@import url("/codelab/fonts.css");
:root {
  font-family: Inter, system-ui, sans-serif;
  color: #f5fbff;
  font-weight: 650;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #071b2b;
  overflow: hidden;
}
canvas#world {
  width: 100vw;
  height: 100vh;
  display: block;
  touch-action: none;
}
button,
a {
  font: inherit;
}
button {
  border: 1px solid #ffffff28;
  border-radius: 12px;
  background: #112b40ec;
  color: #f5fbff;
  padding: 12px 18px;
  cursor: pointer;
  transition:
    transform 0.15s,
    background 0.15s;
  min-height: 44px;
}
button:hover {
  background: #214a61;
  transform: translateY(-2px);
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button.primary {
  background: #a9f454;
  color: #152819;
  border: 0;
  font-weight: 950;
  letter-spacing: 0.09em;
  font-size: 22px;
  box-shadow: 0 6px 0 #477327;
  padding: 18px 55px;
}
header {
  position: fixed;
  top: 20px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
header a {
  color: white;
  text-decoration: none;
  font-weight: 950;
  letter-spacing: 0.12em;
}
#account {
  background: #0c2439e8;
  border: 1px solid #ffffff24;
  border-radius: 16px;
  padding: 12px 20px;
  font-size: 13px;
}
#menu {
  position: fixed;
  left: 6vw;
  top: 20vh;
  width: 290px;
  text-shadow: 0 2px 10px #0005;
}
small {
  color: #a9cad4;
  font-size: 11px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
h1 {
  font-size: clamp(42px, 5vw, 76px);
  line-height: 0.92;
  margin: 16px 0;
  letter-spacing: -0.06em;
  font-weight: 1000;
}
h1 span {
  color: #adf455;
}
p {
  color: #b7cedd;
  line-height: 1.65;
}
nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 22px 0;
}
nav button {
  font-size: 11px;
  padding: 12px 6px;
}
#hud {
  position: fixed;
  inset: 85px 20px 20px;
  pointer-events: none;
}
#hud button {
  pointer-events: auto;
}
#wave,
#money {
  position: absolute;
  top: 0;
  padding: 14px;
  background: #0a2338eb;
  border-radius: 14px;
  font-size: 22px;
  font-weight: 900;
}
#money {
  right: 0;
  color: #b8f66d;
}
#base {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 280px;
  background: #0a2338eb;
  padding: 10px;
  border-radius: 14px;
  font-size: 11px;
}
progress {
  display: block;
  width: 100%;
  height: 16px;
  accent-color: #aff759;
  margin: 7px 0;
}
#actions {
  position: absolute;
  right: 0;
  top: 90px;
  display: grid;
  gap: 7px;
}
#actions button {
  font-size: 11px;
}
#hotbar {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.slot {
  padding: 5px;
  width: 100px;
  display: grid;
  text-align: center;
  background: linear-gradient(#1d4458ee, #0a2035ee);
  border-bottom: 4px solid #54bfc2;
}
.slot img {
  width: 85px;
  height: 76px;
  object-fit: contain;
}
.slot small {
  color: #baff73;
}
.slot.selected {
  border-color: #b6fb61;
  background: #345941;
}
.slot b {
  font-size: 12px;
}
#hint {
  position: absolute;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  background: #10283ce8;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 12px;
  text-align: center;
}
dialog {
  border: 1px solid #78c6d34d;
  border-radius: 24px;
  background: linear-gradient(135deg, #18384b, #091c2c);
  color: white;
  max-width: 900px;
  width: 90vw;
  max-height: 85vh;
  padding: 32px;
  box-shadow: 0 30px 120px #0009;
}
dialog::backdrop {
  background: #03121dc9;
  backdrop-filter: blur(8px);
}
#close {
  position: absolute;
  right: 12px;
  top: 12px;
}
h2 {
  font-size: 32px;
  margin: 0 0 20px;
  letter-spacing: -0.03em;
}
h3 {
  text-transform: uppercase;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.card {
  background: #122c40;
  border: 1px solid #8cc9db33;
  border-radius: 16px;
  padding: 12px;
  text-align: center;
}
.card img {
  width: 100%;
  height: 140px;
  object-fit: contain;
}
.card p {
  font-size: 12px;
}
.card button {
  font-size: 11px;
  width: 100%;
}
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0;
}
select,
input {
  border: 1px solid #9ce8ff44;
  border-radius: 10px;
  padding: 12px;
  background: #0b2336;
  color: white;
  font: inherit;
  max-width: 100%;
}
#toast {
  position: fixed;
  top: 85px;
  left: 50%;
  transform: translateX(-50%);
  background: #152e42;
  border: 1px solid #9adfec55;
  padding: 12px 20px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  z-index: 20;
}
#toast.show {
  opacity: 1;
}
#tower {
  position: fixed;
  left: 20px;
  top: 170px;
  background: #102c40f5;
  width: 260px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #71cee544;
}
#tower img {
  width: 100%;
  height: 145px;
  object-fit: contain;
}
#tower button {
  margin-top: 6px;
  width: 100%;
  font-size: 12px;
}
#boss {
  position: fixed;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 60vw);
  text-align: center;
  background: #321530e8;
  padding: 10px;
  border: 1px solid #fd86cf;
  border-radius: 12px;
  font-size: 12px;
}
#boss progress {
  accent-color: #ed63b7;
}
#mobile {
  display: none;
  position: fixed;
  bottom: 155px;
  left: 10px;
  gap: 4px;
  max-width: 160px;
  flex-wrap: wrap;
}
#mobile button {
  padding: 12px;
}
#mobile button:last-child {
  font-size: 10px;
}
body.match #menu {
  display: none;
}
[hidden] {
  display: none !important;
}
@media (pointer: coarse) {
  #mobile {
    display: flex;
  }
}
@media (max-width: 650px) {
  header {
    top: 10px;
    left: 10px;
    right: 10px;
  }
  header a {
    font-size: 10px;
  }
  #account {
    font-size: 10px;
    padding: 8px;
  }
  #menu {
    left: 25px;
    top: 17vh;
    width: 250px;
  }
  #menu h1 {
    font-size: 54px;
  }
  dialog {
    padding: 24px 14px;
  }
  #hud {
    inset: 65px 8px 8px;
  }
  #base {
    width: 150px;
    font-size: 9px;
  }
  #wave,
  #money {
    font-size: 14px;
    padding: 10px;
  }
  #actions {
    top: 70px;
  }
  #actions button {
    padding: 10px;
    font-size: 9px;
  }
  .slot {
    width: 61px;
  }
  .slot img {
    width: 50px;
    height: 52px;
  }
  .slot b {
    font-size: 9px;
  }
  .slot small {
    font-size: 9px;
  }
  #hint {
    bottom: 100px;
    width: 65%;
    font-size: 10px;
  }
  #tower {
    width: 205px;
    top: 140px;
    left: 8px;
    padding: 12px;
  }
  #boss {
    top: 120px;
  }
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.card.uncommon {
  border-top: 3px solid #72e490;
}
.card.rare {
  border-top: 3px solid #7bbdff;
}
.card.epic {
  border-top: 3px solid #c593ff;
}
.card.legendary {
  border-top: 3px solid #f5c965;
}
#tower p {
  font-size: 12px;
  margin: 8px 0;
}
#tower {
  max-height: calc(100vh - 300px);
  overflow: auto;
}
#toast {
  top: auto;
  bottom: 165px;
}
.duoButton {
  display: block;
  width: 100%;
  margin-top: 16px;
  background: #235b78;
  border: 2px solid #66d9f4;
  font-size: 18px;
  font-weight: 900;
}
.duoButton small {
  display: block;
  font-size: 10px;
  color: #d8f5ff;
}
.teamChoices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.teamChoices .active {
  border-color: #acfa66;
}
.roomCard {
  padding: 12px;
  border-radius: 14px;
  background: #214459;
  margin-top: 10px;
}
.sharedChat {
  --ink: #e6f5ff;
  --green: #94e6d5;
  --muted: #a5bacb;
  --panel: #102b40ed;
  width: 280px;
  bottom: 18px;
  left: 18px;
  border-color: #5293ad60;
  z-index: 24;
}
.sharedChat header {
  position: static;
  transform: none;
  border-color: #ffffff20;
  min-height: 44px;
}
.sharedChat #chatInput {
  background: #071e30;
  color: white;
  border-color: #76baca66;
}
.sharedChat button {
  min-height: 36px;
  padding: 5px;
}
.sharedChat svg {
  width: 18px;
  height: 18px;
}
.sharedChat.collapsed {
  width: 210px;
}
.sharedChat #chatMessages {
  height: 145px;
}
.sharedChat footer {
  padding: 8px;
}
.sharedChat #chatForm {
  padding: 8px;
}
.sharedChat #chatForm button {
  background: #387c83;
}
.sharedChat .message b {
  color: #b2f4d7;
}
.match .sharedChat {
  bottom: 130px;
}
.match #tower:not([hidden]) ~ .sharedChat {
  left: auto;
  right: 18px;
  bottom: 150px;
}
#tutorialGuide {
  position: absolute;
  top: 85px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 440px;
  width: 65%;
  background: #0c2944ed;
  border: 2px solid #a9ef69;
  border-radius: 16px;
  padding: 12px 18px;
  text-align: center;
  pointer-events: auto;
  font-size: 13px;
}
#tutorialGuide strong {
  display: block;
  color: #bdff81;
  margin-bottom: 6px;
}
#tutorialGuide button {
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 11px;
}
dialog[data-required="true"]::backdrop {
  background: #061c2cdf;
}
#menu {
  top: 14vh;
}
#menu h1 {
  font-size: clamp(42px, 4.8vw, 68px);
}
@media (max-width: 650px) {
  #menu {
    top: 13vh;
    width: 260px;
  }
  #menu h1 {
    font-size: 46px;
  }
  #menu .primary {
    padding: 15px 30px;
    font-size: 18px;
  }
  nav {
    margin: 12px 0;
  }
  .sharedChat {
    left: 8px;
    bottom: 10px;
    width: 245px;
  }
  .sharedChat.collapsed {
    width: 190px;
  }
  .match .sharedChat {
    bottom: 102px;
    left: auto;
    right: 8px;
  }
  .match .sharedChat.collapsed {
    width: 145px;
  }
  .sharedChat #chatMessages {
    height: 100px;
  }
  .sharedChat header {
    padding: 8px;
  }
  .sharedChat header small {
    font-size: 8px;
  }
  .match #tower:not([hidden]) ~ .sharedChat {
    right: 8px;
    bottom: 102px;
  }
  #tutorialGuide {
    top: 100px;
    width: 72%;
    font-size: 11px;
    left: 8px;
    transform: none;
    padding: 10px;
  }
  #tutorialGuide button {
    font-size: 10px;
  }
  #hint {
    bottom: 100px;
    left: 8px;
    transform: none;
    width: 50%;
  }
  #mobile {
    bottom: 170px;
  }
  #menu > small:last-child {
    display: none;
  }
}
#waitingTeam {
  position: fixed;
  top: 78px;
  right: 24px;
  background: #295b72;
  z-index: 5;
  font-size: 12px;
}
#teamHud {
  position: absolute;
  top: 72px;
  left: 0;
  max-width: 65%;
  font-size: 12px;
  color: #e0fbff;
  background: #0d2940d9;
  padding: 8px 12px;
  border-radius: 10px;
}
.roomCard {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 10px;
}
.roomCard h3,
.roomCard p {
  margin: 4px 0;
  grid-column: 1;
}
.roomCard button {
  grid-column: 2;
  grid-row: 1/4;
  font-size: 13px;
  padding: 10px 18px;
}
.row button[aria-pressed="true"] {
  border-color: #adf455;
  background: #345941;
}
#content > .primary {
  font-size: 18px;
  padding: 15px 30px;
}
#tutorialGuide {
  top: 105px;
}
#menu {
  max-height: calc(100vh - 140px);
  overflow: auto;
  padding-bottom: 16px;
}
#menu > .primary {
  width: 100%;
}
#hint {
  max-width: 360px;
}
#boss {
  top: 180px;
}
@media (max-width: 650px) {
  #teamHud {
    top: 68px;
    font-size: 9px;
    max-width: 57%;
    padding: 6px;
  }
  #waitingTeam {
    top: 58px;
    right: 8px;
    font-size: 10px;
  }
  .roomCard {
    grid-template-columns: 1fr;
  }
  .roomCard button {
    grid-column: 1;
    grid-row: auto;
    margin-top: 8px;
  }
  #content > .primary {
    font-size: 16px;
    padding: 12px 20px;
  }
  #tutorialGuide {
    top: 100px;
    width: 58%;
    font-size: 10px;
  }
  #boss {
    top: 270px;
    width: 58%;
    left: 8px;
    transform: none;
  }
  .match .sharedChat {
    z-index: 15;
  }
  .match .sharedChat:not(.collapsed) {
    bottom: 105px;
    max-width: calc(100vw - 24px);
  }
  .match #hint {
    display: none;
  }
  #menu {
    max-height: calc(100vh - 195px);
  }
}
.speechBubble {
  background: #092539f2;
  color: #edf9ff;
  border: 1px solid #aadfce;
  font-size: 12px;
  max-width: 210px;
}
.speechBubble::after {
  border-top-color: #092539;
}
#toast {
  max-width: min(440px, 80vw);
  font-size: 13px;
}
@media (max-width: 650px) {
  #base {
    top: 48px;
    left: 0;
    transform: none;
    width: 100%;
    padding: 7px 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    text-align: left;
    gap: 0 12px;
  }
  #base progress {
    grid-row: 2;
    grid-column: 1/-1;
    height: 9px;
    margin: 4px 0;
  }
  #base span {
    grid-row: 1;
    grid-column: 2;
  }
  #wave {
    font-size: 12px;
    max-width: 75%;
    white-space: nowrap;
  }
  #teamHud {
    top: 108px;
  }
  #actions {
    top: 146px;
  }
  #actions button {
    padding: 8px;
    min-height: 40px;
  }
  #tutorialGuide {
    top: 146px;
    width: calc(100% - 130px);
  }
  #boss {
    top: 320px;
  }
  #mobile {
    width: 120px;
    bottom: 140px;
  }
  #mobile button {
    padding: 8px;
    min-height: 36px;
    min-width: 36px;
  }
  #mobile button:last-child {
    padding: 6px;
    font-size: 9px;
  }
  #toast {
    bottom: 360px;
    padding: 8px 12px;
    font-size: 11px;
  }
  .speechBubble {
    font-size: 10px;
    max-width: 150px;
  }
  .match .sharedChat:not(.collapsed) {
    width: 245px;
  }
  .sharedChat footer {
    font-size: 8px;
  }
  .sharedChat #chatInput {
    min-width: 0;
  }
}
.quickTeams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}
.quickTeams button.primary {
  padding: 20px 12px;
  font-size: 17px;
}
#modalActions {
  position: sticky;
  bottom: -32px;
  background: #102a3ef5;
  padding: 12px 0;
  margin-top: 18px;
  border-top: 1px solid #79bed544;
}
#modalActions:has(button[hidden]) {
  display: none;
}
#modalLeave {
  width: 100%;
  border-color: #f28e8e;
  color: #ffe1dd;
  font-size: 14px;
}
dialog[data-context="room"] {
  max-width: 520px;
}
dialog[data-context="room"] #content p {
  margin: 10px 0;
}
@media (max-width: 650px) {
  .quickTeams {
    gap: 8px;
  }
  .quickTeams button.primary {
    font-size: 13px;
    padding: 16px 8px;
  }
  #modalActions {
    bottom: -24px;
  }
  .roomCard button {
    font-size: 13px;
  }
}
body.queuing #menu,
body.choosingTeam #menu {
  display: none;
}
#padStatus {
  position: fixed;
  left: 50%;
  top: 75px;
  transform: translateX(-50%);
  background: #102c40ed;
  border: 1px solid #9edd74;
  border-radius: 16px;
  padding: 14px 20px;
  text-align: center;
  max-width: 90vw;
  z-index: 8;
}
#padStatus p {
  margin: 6px 0;
  font-size: 12px;
}
#padAvatars {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 3;
}
.padAvatars {
  position: absolute;
  display: flex;
  gap: 6px;
  transform: translate(-50%, -100%);
  background: #102c40dc;
  border-radius: 12px;
  padding: 4px;
}
.padAvatars img {
  width: 44px;
  height: 54px;
  object-fit: contain;
}
.padAvatars small {
  display: block;
  text-align: center;
  font-size: 9px;
  max-width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.padAvatars > div {
  text-align: center;
}
@media (max-width: 650px) {
  .padAvatars img {
    width: 32px;
    height: 40px;
  }
  .padAvatars small {
    font-size: 8px;
    max-width: 45px;
  }
  #padStatus {
    top: 60px;
    font-size: 11px;
    padding: 10px;
  }
}
#zoneBack {
  display: none;
  position: fixed;
  top: 75px;
  right: 20px;
  font-size: 12px;
  z-index: 10;
}
body.choosingTeam:not(.queuing):not(.match) #zoneBack {
  display: block;
}
#zoneOptions {
  display: none;
  position: fixed;
  top: 130px;
  right: 20px;
  font-size: 11px;
  z-index: 10;
}
body.choosingTeam:not(.queuing):not(.match) #zoneOptions {
  display: block;
}
.padCount {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 9px;
  background: #102c40ef;
  border-radius: 8px;
  font-size: 12px;
  color: #d2ffaa;
}
.padAvatars:not(:has(img)) {
  background: transparent;
  padding: 0;
}
.padAvatars:not(:has(img)) .padCount {
  position: relative;
  bottom: 0;
  left: 0;
  transform: none;
  font-size: 11px;
}

#matchSetup{display:none;position:fixed;top:118px;left:50%;transform:translateX(-50%);z-index:14;width:min(560px,calc(100vw - 30px));padding:12px;border:1px solid #54818e;border-radius:14px;background:#102b40ef;grid-template-columns:1fr 1fr;gap:9px}
body.choosingTeam:not(.queuing):not(.match) #matchSetup{display:grid}
#matchSetup label{display:grid;gap:5px;font-size:12px;color:#d6f3ee}
#matchSetup select{width:100%;padding:8px;border-radius:8px;background:#16364c;color:#fff;border:1px solid #54818e}
#difficultyInfo{grid-column:1/-1;font-size:11px;color:#b5ced5}
.slot{touch-action:none;user-select:none;cursor:grab}.slot:active{cursor:grabbing}
@media(max-width:600px){#matchSetup{top:100px;width:calc(100vw - 20px);padding:9px}#zoneOptions{top:225px;font-size:9px}}

/* Match choices are available after walking into a team zone. */
body.choosingTeam:not(.queuing):not(.match) #matchSetup{display:none}
body.queuing:not(.match) #matchSetup{display:grid;top:auto;bottom:30px}
#setupHint{grid-column:1/-1;color:#c3d9e0;font-size:11px}
#zoneOptions{display:none!important}
#matchSetup select:disabled{opacity:.75}
@media(max-width:600px){body.queuing:not(.match) #matchSetup{bottom:120px}}
/* Guardian interface: a single start action and a clear team lobby. */
body:not(.choosingTeam):not(.queuing):not(.match)::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#061626f5 0%,#061626de 30%,#0b233477 67%,#09253888);z-index:1}
body>header{z-index:20;top:22px}body>header a{font-size:12px;color:#c5e0e8;letter-spacing:.14em}#account{border-radius:30px;background:#081e30c9;font-size:11px;padding:11px 16px}
#menu{z-index:4;left:6vw;top:15vh;width:min(440px,42vw);max-height:79vh;overflow:auto;scrollbar-width:thin;padding:4px 12px 20px 0}#menu h1{font-size:clamp(56px,6.4vw,92px);line-height:.94;letter-spacing:-.055em;margin:22px 0}#menu h1 span{color:#c2f875}#menu .menuPitch{font-size:16px;line-height:1.6;margin:20px 0 26px;color:#c5d7e2}.operationBadge{display:inline-flex;align-items:center;gap:9px;border:1px solid #c4f78955;background:#a9e56a0b;border-radius:30px;padding:7px 12px;letter-spacing:.17em;color:#d5eea7;font-size:10px}.operationBadge i{width:6px;height:6px;background:#c2f875;border-radius:50%;box-shadow:0 0 12px #b9ef76}
#menu .startButton{width:100%;padding:20px 24px;background:linear-gradient(115deg,#d2fc8d,#9de652);border-radius:14px;box-shadow:0 5px 0 #4a7329,0 14px 35px #a2eb5317;text-align:left;font-size:22px;letter-spacing:.05em}#menu .startButton>span{display:flex;justify-content:space-between;align-items:center}#menu .startButton small{display:block;color:#355425;font-size:11px;letter-spacing:0;margin-top:5px;font-weight:650}.teamAvailability{display:block;text-align:center;margin:14px 0 0;color:#8fadb9;font-size:10px;letter-spacing:0}
#menu .mainShortcuts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 12px}#menu .mainShortcuts button{display:flex;align-items:center;gap:10px;text-align:left;padding:15px 12px;background:#10293dd9;border:1px solid #6c98ad33;border-radius:12px;font-size:10px}.mainShortcuts small{display:block;font-size:9px;font-weight:500;letter-spacing:0;color:#8fadb9}.menuSymbol{font-size:25px;color:#91cdd2}.moreMenu{border-top:1px solid #a3bdce22;padding-top:12px}.moreMenu summary{cursor:pointer;color:#aac3d1;font-size:11px;list-style:none;padding:7px 2px;display:flex;justify-content:space-between}.moreMenu nav{margin:10px 0}.menuControls{display:flex;align-items:center;gap:9px;margin-top:18px;color:#779ba9;font-size:10px}kbd{padding:4px 6px;border:1px solid #56758355;border-radius:5px;background:#092032;font:10px inherit}
#missionArtwork{position:fixed;z-index:2;right:5vw;top:20vh;width:42vw;height:64vh;pointer-events:none;display:flex;align-items:center;justify-content:center}.artOrbit{position:absolute;width:31vw;height:31vw;border:1px solid #a5e86f33;border-radius:50%;background:radial-gradient(circle,#9deb5a24,transparent 65%);box-shadow:0 0 0 35px #79b3bd07,0 0 0 70px #79b3bd05}.artCaption{position:absolute;top:0;letter-spacing:.22em;font-size:10px;color:#c3e3b1}#heroUnit{width:75%;height:88%;object-fit:contain;filter:drop-shadow(0 18px 30px #0008);position:relative}.heroSquad{position:absolute;inset:22% -2% 15%;display:flex;align-items:flex-end;justify-content:space-between;z-index:-1}.heroSquad img{width:46%;height:60%;object-fit:contain;filter:drop-shadow(0 15px 18px #0006)}.missionFacts{position:absolute;bottom:0;display:flex;gap:42px;color:#8ab0bd;font-size:9px;letter-spacing:.13em;text-align:center}.missionFacts b{display:block;color:#edf8e7;font-size:24px;letter-spacing:0;margin-bottom:6px}
body.choosingTeam #missionArtwork,body.queuing #missionArtwork,body.match #missionArtwork{display:none}#zoneGuide,#lobbyTools{display:none}body.choosingTeam:not(.queuing):not(.match) #zoneGuide{display:block;position:fixed;z-index:8;top:82px;left:25px;border-left:3px solid #b7ed73;padding:0 16px;background:linear-gradient(90deg,#0e293dde,transparent);border-radius:0 12px 12px 0}#zoneGuide h2{font-size:22px;letter-spacing:-.03em;margin:4px 0}#zoneGuide p{font-size:12px;line-height:1.5;margin:6px 0 10px}body.choosingTeam:not(.queuing):not(.match) #lobbyTools{display:flex;position:fixed;top:130px;right:20px;z-index:10;gap:7px}#lobbyTools button{font-size:10px;padding:10px 14px}#zoneBack{border-radius:30px;background:#0a2438d9;font-size:10px}.padCount{border:1px solid #91d0c64d;border-radius:20px;background:#0b283de8;padding:7px 14px;font-size:12px;box-shadow:0 5px 18px #001b2644}#padStatus{border-color:#b3e77666;border-radius:18px;box-shadow:0 12px 32px #00172955}#matchSetup{border-radius:18px;border-color:#a4db7755;box-shadow:0 12px 32px #00172966;padding:16px;gap:12px}#matchSetup select{border-color:#698d9b77;padding:11px;background:#16354b;border-radius:10px}#modal{border:1px solid #8ac3cc44;border-radius:22px;background:linear-gradient(145deg,#15374b,#0a2033);box-shadow:0 24px 100px #00132199}#modal::backdrop{background:#03131bbd;backdrop-filter:blur(7px)}#modal h2{letter-spacing:-.03em}.onboardingContent h2{font-size:30px}.onboardingContent p{max-width:470px}.slot{border-radius:13px;background:linear-gradient(155deg,#24495cf0,#0b253af5);box-shadow:0 5px 15px #00152133}.slot.selected{box-shadow:0 0 0 2px #b7ef77,0 8px 25px #97df4422}#actions button{border-radius:10px;background:#0a2438e6}#wave,#money,#base{border:1px solid #739cab33;box-shadow:0 8px 24px #00172433}#base progress{height:8px;border-radius:10px;overflow:hidden}
@media(max-width:700px){#menu{left:24px;top:12vh;width:calc(100vw - 48px);max-height:79vh;padding-right:0}#menu h1{font-size:58px;margin:17px 0}#menu .menuPitch{font-size:13px;margin:15px 0 20px}#missionArtwork{display:none}body:not(.choosingTeam):not(.queuing):not(.match)::before{background:linear-gradient(135deg,#071c30f5,#071c30d9)}body>header{left:18px;right:18px;top:14px}body>header a{font-size:9px}#account{max-width:55vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;padding:9px 11px}body.choosingTeam:not(.queuing):not(.match) #zoneGuide{top:78px;left:15px;width:calc(100vw - 30px)}#zoneGuide h2{font-size:20px}#zoneGuide p{font-size:11px}#zoneBack{top:192px;right:15px}body.choosingTeam:not(.queuing):not(.match) #lobbyTools{top:192px;right:auto;left:15px}body.queuing:not(.match) #matchSetup{bottom:135px;padding:12px}#padStatus{top:65px;width:calc(100vw - 30px)}.menuControls{font-size:9px;gap:6px}#menu .mainShortcuts{margin-top:17px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
.tutorialCoach{position:fixed;z-index:45;pointer-events:none;transform:translateX(-50%);text-align:center;display:grid;justify-items:center;gap:3px;max-width:210px}.tutorialCoach[hidden],.tutorialFocus[hidden]{display:none}.tutorialCoach span{padding:7px 11px;border-radius:9px;background:#d1fa8a;color:#20371f;font-size:11px;font-weight:850;box-shadow:0 4px 18px #0005;white-space:nowrap}.tutorialCoach b{font-size:35px;line-height:1;color:#d1fa8a;text-shadow:0 3px 8px #0009;animation:coachBounce .8s ease-in-out infinite alternate}.tutorialFocus{position:fixed;z-index:44;pointer-events:none;border:2px solid #ccfb86;border-radius:15px;box-shadow:0 0 0 5px #c7f77b20,0 0 25px #b5ed7555}#tutorialGuide{top:92px;left:0;transform:none;width:300px;max-width:calc(100vw - 35px);font-size:12px;text-align:left;background:#102c40ef;border:1px solid #b7ee7777;padding:15px;border-radius:15px}#tutorialGuide strong{font-size:13px}#tutorialGuide button{width:100%;font-size:10px;background:#c5f484;color:#25401f;border:0;font-weight:900}body.match #tutorialGuide span{display:block;line-height:1.6}@keyframes coachBounce{to{transform:translateY(5px)}}@media(max-width:700px){#tutorialGuide{top:105px;left:0;width:calc(100vw - 40px);padding:11px;font-size:11px}#tutorialGuide strong{font-size:12px}.tutorialCoach span{font-size:10px;padding:6px 8px}.tutorialCoach b{font-size:30px}}@media(prefers-reduced-motion:reduce){.tutorialCoach b{animation:none}}
#padAvatars{display:none}body.choosingTeam:not(.match) #padAvatars,body.queuing:not(.match) #padAvatars{display:block}body:not(.choosingTeam):not(.queuing):not(.match) #toast{visibility:hidden}
.headerInfo{display:flex;gap:10px;align-items:center}#soundQuick{border-radius:30px;padding:8px 13px;min-height:34px;font-size:10px;white-space:nowrap;background:#0b283dcc;color:#c6eba2}#soundQuick[aria-pressed="false"]{color:#dfbd93;border-color:#ad815b66}@media(max-width:700px){.headerInfo{gap:6px}#soundQuick{padding:7px 9px;font-size:9px}#account{max-width:40vw}}
.crateViewport{height:210px;position:relative;overflow:hidden;border:1px solid #86abbc66;background:#071b2a;border-radius:15px;margin:25px 0}.crateStrip{display:flex;width:max-content;height:100%;will-change:transform}.crateItem{width:126px;flex:none;border-right:3px solid #071b2a;border-bottom:4px solid #a8e47a;background:linear-gradient(#21445b,#0c2437);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;gap:7px;text-align:center}.crateItem img{width:105px;height:115px;object-fit:contain}.crateItem b{font-size:10px}.crateItem small{font-size:9px}.crateMarker{position:absolute;top:0;left:50%;transform:translateX(-50%);color:#eefa9a;font-size:25px;z-index:2}.crateViewport::after{content:"";position:absolute;left:50%;top:28px;bottom:0;width:2px;background:#eefa9a99}.skinCard{display:inline-flex;vertical-align:top;flex-direction:column;width:calc(50% - 12px);padding:15px;margin:5px;border:1px solid #739fac55;border-radius:12px;background:#132e42}.skinCard h3{font-size:15px}.skinCard button{font-size:10px;margin:5px 0}@media(max-width:600px){.skinCard{width:100%;margin:5px 0}}
#duelArena[hidden]{display:none!important}#duelArena{position:fixed;inset:0;z-index:150;background:#103725;color:white;font-family:inherit}#duelArena canvas{position:absolute;inset:0;width:100%;height:100%}#duelArena header{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;gap:12px;align-items:center}#duelArena h2{font-size:20px;margin:0;background:#082538e8;padding:10px 16px;border-radius:14px}#duelArena button{padding:12px 16px;border-radius:12px;border:1px solid #ffffff50;background:#082538ec;color:#fff;font-weight:900;cursor:pointer}#duelArena button:disabled{opacity:.5;cursor:default}#duelArena .duelScore{position:absolute;top:75px;left:50%;transform:translateX(-50%);padding:10px 18px;border-radius:12px;background:#082538ec;text-align:center;max-width:90%;width:max-content}#duelArena .duelMessage{position:absolute;top:125px;left:50%;transform:translateX(-50%);max-width:85%;text-align:center;padding:8px 12px;background:#082538db;border-radius:10px}#duelArena footer{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:min(760px,96%);box-sizing:border-box;padding:12px;border-radius:18px;background:#082538ec;text-align:center}#duelArena footer p{margin:8px 0 0;font-size:12px}#duelArena .duelEnergy{font-weight:900;color:#ce8bff;margin-bottom:8px}#duelArena .duelLanes{display:flex;gap:10px;justify-content:center;margin-bottom:8px}#duelArena [aria-pressed=true]{background:#168dd2}#duelArena .duelCards{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}#duelPlay{margin-top:8px;width:100%}@media(max-width:600px){#duelArena h2{font-size:14px}#duelArena button{padding:9px;font-size:11px}#duelArena .duelScore{font-size:12px}#duelArena .duelMessage{font-size:12px}}

#duelArena footer{width:min(920px,96%);padding:10px}#duelArena .duelCards button{flex:1;min-width:0;padding:10px 6px;font-size:13px}#duelArena .duelMessage{font-size:13px;top:118px}#duelArena .duelLanes button{padding:8px 14px}@media(max-width:600px){#duelArena .duelCards button{font-size:10px;padding:9px 3px}#duelArena footer p{font-size:10px}}

#duelBattleControls[hidden]{display:none!important}#duelBattleControls{position:fixed;right:155px;top:82px;z-index:35;width:260px;max-height:65vh;overflow:auto;padding:12px;background:#082538ed;color:white;border:1px solid #4783a4;border-radius:14px;font-size:12px}#duelBattleControls summary{cursor:pointer;font-weight:900;padding:10px 0;color:#9eff43}#duelBattleControls p{line-height:1.5}#duelBattleControls button{border:1px solid #447a98;border-radius:9px;padding:8px;color:white;background:#104360;cursor:pointer}#duelBattleControls button:disabled{opacity:.4}.duelSendCards{display:grid;gap:6px}.duelNotice button{display:block;margin-top:8px}@media(max-width:650px){#duelBattleControls{right:10px;top:135px;width:185px;max-height:45vh}}

.duelGroupLabel,#duelEnemies{display:none}body.duelMatch #duelBottom{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px;width:min(1200px,96vw);padding:10px;background:#08283bed;border:1px solid #4b8ba4;border-radius:18px;pointer-events:auto}body.duelMatch #duelDefences,body.duelMatch #duelEnemies{min-width:0;display:block}body.duelMatch .duelGroupLabel{display:block;font-size:11px;letter-spacing:.07em;margin-bottom:6px;color:#6bceff}body.duelMatch #duelEnemies{border-left:2px solid #ff698875;padding-left:14px}body.duelMatch #duelEnemies>.duelGroupLabel{color:#ff9eb2}body.duelMatch #hotbar{position:static!important;transform:none!important;padding:0!important;display:flex;overflow-x:auto;gap:5px;border:0!important;background:transparent!important;max-width:none!important}body.duelMatch #duelBattleControls{position:static!important;width:auto!important;max-height:none!important;background:transparent!important;border:0!important;padding:0!important}body.duelMatch .duelSendCards{display:flex;gap:5px;overflow-x:auto}body.duelMatch .slot{flex:0 0 82px;width:82px;min-width:82px;padding:4px;font-size:10px}body.duelMatch .slot img{width:100%;height:55px;object-fit:contain}body.duelMatch .enemySlot{border-bottom-color:#ff6988}body.duelMatch .duelOpponent{position:fixed;right:170px;top:10px;background:#082538e8;padding:9px;border-radius:12px;font-size:11px}body.duelMatch .duelNotice{margin:4px 0 0;font-size:11px}body.duelMatch #hint{bottom:165px!important}body.duelMatch .duelSendCards button:disabled{opacity:.45}@media(max-width:650px){body.duelMatch #duelBottom{width:98vw;gap:6px;padding:7px}body.duelMatch #duelEnemies{padding-left:6px}body.duelMatch .slot{flex-basis:65px;min-width:65px;width:65px}body.duelMatch .slot img{height:42px}body.duelMatch .duelOpponent{right:10px;top:90px;font-size:10px}}