:root {
  color-scheme: dark;
  --ink: #061d2a;
  --panel: #0a3044;
  --panel-2: #10445a;
  --line: #317286;
  --cyan: #53dbe2;
  --orange: #ffad29;
  --cream: #f7f1de;
  --muted: #a8c4cd;
  --danger: #ff6d55;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: #03131d; color: var(--cream); overscroll-behavior: none; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 0%, #154d61 0, transparent 33%),
    linear-gradient(135deg, #041722, #071e2b 65%, #0b3544);
}

button { font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.game-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 74px minmax(0, 1fr) 112px;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
  border-inline: 1px solid rgba(94, 208, 218, .22);
  background: #0a2736;
}
.rotate-hint { display: none; }

.hud {
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(210px, 1.4fr) repeat(4, minmax(120px, .75fr)) 102px;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: linear-gradient(180deg, #103b4f, #082737);
  border-bottom: 2px solid #2f7686;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .26);
}

.brand { display: flex; align-items: center; gap: 12px; font-weight: 950; font-size: 1.55rem; letter-spacing: .04em; }
.brand small { display: block; color: var(--orange); font-size: .68rem; letter-spacing: .17em; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; transform: skew(-8deg); border-radius: 12px; color: #082737; background: var(--orange); box-shadow: inset 0 -4px 0 #dd791a; }

.hud-stat {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(103, 206, 216, .35);
  border-radius: 13px;
  background: rgba(4, 23, 34, .55);
}
.hud-stat small, .hud-stat strong { display: block; }
.hud-stat small { color: var(--muted); font-size: .72rem; }
.hud-stat strong { white-space: nowrap; font-size: 1rem; }
.stat-icon { color: var(--orange); font-size: 1.35rem; }

.icon-button {
  width: 48px; height: 48px; border: 1px solid #4a8898; border-radius: 13px;
  color: white; background: #133f51; cursor: pointer; font-weight: 900; font-size: 1.25rem;
}
.icon-button:hover, .icon-button:focus-visible { background: #1c566a; outline: 3px solid rgba(83, 219, 226, .25); }
.time-controls { display: flex; gap: 6px; }
.speed-button { min-width: 42px; height: 48px; border: 1px solid #4a8898; border-radius: 13px; color: var(--cyan); background: #133f51; cursor: pointer; font-weight: 950; }

.play-area { position: relative; min-height: 0; overflow: hidden; background: #9acfc1; }
#gameCanvas { display: block; width: 100%; height: 100%; touch-action: none; }

.mission-card {
  position: absolute; top: 18px; right: 18px; width: min(270px, 28vw); padding: 14px 16px;
  border: 1px solid rgba(108, 222, 229, .58); border-radius: 14px; background: rgba(6, 35, 49, .92);
  box-shadow: 0 14px 36px rgba(1, 15, 22, .3); backdrop-filter: blur(8px);
}
.mission-card small { color: var(--orange); font-weight: 800; letter-spacing: .12em; }
.mission-card strong { display: block; margin-top: 5px; font-size: 1rem; }
.mission-card p { margin: 4px 0 0; color: #b8d1d8; font-size: .8rem; line-height: 1.35; }

.tower-menu { position: absolute; z-index: 40; display: grid; place-items: center; pointer-events: none; }
.tower-menu.hidden { display: none; }
.tower-menu-item {
  position: absolute; display: grid; place-items: center; gap: 2px; width: 72px; height: 72px; margin: -36px;
  border: 2px solid #4b8291; border-radius: 50%; color: white; background: #0d3447; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.35); pointer-events: auto; transition: transform .12s ease, border-color .12s ease;
}
.tower-menu-item:hover:not(.is-unavailable), .tower-menu-item:focus-visible { border-color: var(--cyan); transform: scale(1.08); outline: 3px solid #fff; outline-offset: 2px; }
.tower-menu-item.is-unavailable { cursor: not-allowed; opacity: .55; border-style: dashed; filter: saturate(.5); }
.tower-menu-item .tower-menu-icon { font-size: 1.4rem; line-height: 1; }
.tower-menu-item small { font-size: .68rem; font-weight: 800; }
.tower-menu-upgrade { background: linear-gradient(#74e5d8, #3ebeb7); border-color: #3ebeb7; }
.tower-menu-upgrade .tower-menu-icon, .tower-menu-upgrade small { color: #103044; }
.tower-menu-upgrade.is-unavailable { background: #2c4a52; border-color: #4b8291; }
.tower-menu-upgrade:disabled .tower-menu-icon, .tower-menu-upgrade:disabled small { color: #8fb0b6; }
.tower-menu-sell { background: #713c3b; border-color: #a5564f; }
.tower-menu-sell .tower-menu-icon, .tower-menu-sell small { color: #f5d7cf; }

.status-toast {
  position: absolute; left: 50%; top: 20px; translate: -50% -16px; opacity: 0;
  padding: 10px 16px; border-radius: 999px; background: #092d3f; border: 1px solid var(--cyan);
  color: white; font-weight: 750; pointer-events: none; transition: .22s ease;
}
.status-toast.show { opacity: 1; translate: -50% 0; }

.start-overlay, .result-overlay {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(90deg, rgba(3, 20, 29, .88), rgba(3, 20, 29, .42));
}
.hidden { display: none !important; }
.start-card {
  width: min(540px, 92vw); padding: 28px; border: 1px solid #4ca4b4; border-radius: 22px;
  background: linear-gradient(145deg, rgba(11, 53, 70, .98), rgba(5, 30, 42, .98));
  box-shadow: 0 24px 70px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.08);
}
.start-card h1, .start-card h2 { margin: 6px 0 10px; font-size: clamp(2.3rem, 7vw, 4.6rem); line-height: .95; text-transform: uppercase; color: white; text-shadow: 4px 5px 0 #0a6579; }
.start-card h2 { font-size: clamp(2rem, 5vw, 3.6rem); }
.start-card p { color: #c7dde2; font-size: 1.05rem; line-height: 1.55; }
.eyebrow { color: var(--orange); font-weight: 900; letter-spacing: .12em; }
.primary-button, .wave-button {
  border: 0; border-radius: 14px; padding: 15px 22px; color: #152531; background: linear-gradient(180deg, #ffc04e, #ff951f);
  box-shadow: inset 0 -4px rgba(173, 81, 8, .34), 0 8px 22px rgba(248, 137, 22, .24); font-weight: 950; cursor: pointer;
}
.primary-button:hover, .primary-button:focus-visible, .wave-button:hover:not(:disabled), .wave-button:focus-visible { filter: brightness(1.08); outline: 3px solid rgba(255, 188, 62, .3); }
.workshop-link { display: inline-flex; align-items: center; min-height: 46px; margin-left: 9px; padding: 10px 16px; border: 1px solid #4b8999; border-radius: 12px; color: #d5f5f7; text-decoration: none; font-weight: 800; }
.workshop-link:hover, .workshop-link:focus-visible { background: #17495c; outline: 3px solid rgba(83,219,226,.2); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

.build-dock {
  z-index: 10; display: flex; justify-content: center; align-items: center;
  padding: 12px 18px 14px; background: linear-gradient(180deg, #0d3a4d, #062432);
  border-top: 2px solid #34788a; box-shadow: 0 -10px 30px rgba(0,0,0,.25);
}
.wave-button { min-height: 66px; min-width: 280px; font-size: 1rem; }
.wave-button:disabled { cursor: not-allowed; filter: grayscale(.65); opacity: .55; box-shadow: none; }
.wave-button span { margin-left: 9px; }

.build-menu { position: absolute; z-index: 40; display: grid; place-items: center; pointer-events: none; }
.build-menu.hidden { display: none; }
.build-menu-hint {
  position: absolute; width: 168px; padding: 6px 10px; text-align: center; border-radius: 10px;
  color: #cfe9ec; background: rgba(6, 35, 49, .92); font-size: .72rem; line-height: 1.3; pointer-events: none;
}
.build-menu-item {
  position: absolute; display: grid; place-items: center; gap: 2px; width: 74px; height: 74px; margin: -37px;
  border: 2px solid #4b8291; border-radius: 50%; color: white; background: #0d3447; cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.35); pointer-events: auto; transition: transform .12s ease, border-color .12s ease;
}
.build-menu-item:hover:not(.is-unavailable), .build-menu-item:focus-visible { border-color: var(--cyan); transform: scale(1.08); outline: 3px solid #fff; outline-offset: 2px; }
.build-menu-item.is-unavailable { cursor: not-allowed; opacity: .55; border-style: dashed; filter: saturate(.5); }
.build-menu-item.is-unavailable small { text-decoration: line-through; }
.game-hint { position: absolute; z-index: 45; transform: translateX(-50%); max-width: 220px; padding: 6px 10px; border: 1px solid #ff9b8a; border-radius: 8px; color: #fff; background: rgba(70, 22, 22, .96); font-size: .78rem; font-weight: 800; text-align: center; pointer-events: none; }
.game-hint::before { content: "✕ "; }
.game-hint.hidden { display: none; }
.build-menu-item .build-menu-icon { font-size: 1.5rem; line-height: 1; }
.build-menu-icon-img { width: 40px; height: 40px; pointer-events: none; }
.build-menu-item small { color: var(--orange); font-size: .68rem; font-weight: 800; }
.build-menu-cancel {
  position: absolute; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px;
  border: 2px solid #4b8291; border-radius: 50%; color: white; background: #123145; cursor: pointer;
  font-size: 1.1rem; font-weight: 900; pointer-events: auto;
}
.build-menu-cancel:hover, .build-menu-cancel:focus-visible { border-color: var(--danger); outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 900px) {
  .game-shell { grid-template-rows: 62px minmax(0, 1fr) 98px; }
  .hud { grid-template-columns: 1fr repeat(3, auto) 82px; gap: 5px; padding: 7px; }
  .brand { font-size: 1rem; }.brand-mark { width: 36px; height: 36px; }.brand small { font-size: .5rem; }
  .hud-stat { padding: 6px 7px; gap: 4px; }.hud-stat small { display: none; }.hud-stat strong { font-size: .78rem; }.stat-icon { font-size: .9rem; }
  .icon-button, .speed-button { width: 38px; min-width: 38px; height: 38px; }
  .build-dock { padding: 8px; }
  .wave-button { min-width: 0; width: 100%; max-width: 320px; }
  .mission-card { top: 8px; right: 8px; width: 220px; padding: 9px 11px; }.mission-card p { display: none; }
}

@media (max-width: 620px) {
  .brand span:last-child { display: none; }
  .hud { grid-template-columns: 42px repeat(3, 1fr) 80px; }
  .hud-stat { justify-content: center; }.stat-icon { display: none; }
  .mission-card { max-width: 190px; }.mission-card small { font-size: .6rem; }
}

@media (max-width: 950px) and (max-height: 650px) {
  body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; }

  .game-shell {
    position: relative;
    display: block;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    border: 0;
  }

  .play-area { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; }

  .hud {
    position: fixed;
    z-index: 100;
    inset: 0 0 auto 0;
    height: 46px;
    grid-template-columns: 42px repeat(3, minmax(72px, 1fr)) 84px;
    gap: 4px;
    padding: 5px max(7px, env(safe-area-inset-right)) 5px max(7px, env(safe-area-inset-left));
    background: linear-gradient(180deg, rgba(9,48,65,.97), rgba(5,31,43,.93));
  }

  .brand { min-width: 0; gap: 0; }
  .brand-mark { width: 36px; height: 36px; font-size: 1rem; border-radius: 9px; }
  .brand span:last-child { display: none; }
  .hud-stat { min-width: 0; height: 36px; justify-content: center; padding: 4px 5px; border-radius: 9px; }
  .hud-stat small, .stat-icon { display: none; }
  .hud-stat strong { overflow: hidden; text-overflow: ellipsis; font-size: clamp(.75rem, 1.7vw, .83rem); }
  .time-controls { gap: 4px; }
  .icon-button, .speed-button { width: 38px; min-width: 38px; height: 38px; border-radius: 9px; padding: 0; }

  .build-dock {
    position: fixed;
    z-index: 100;
    inset: auto 0 0 0;
    height: calc(60px + env(safe-area-inset-bottom));
    padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: linear-gradient(180deg, rgba(10,49,66,.94), rgba(4,29,40,.98));
  }

  .wave-button { min-height: 48px; width: 100%; max-width: 280px; padding: 6px 8px; border-radius: 11px; font-size: .75rem; line-height: 1.15; }

  .mission-card {
    z-index: 80;
    top: 52px;
    right: max(7px, env(safe-area-inset-right));
    width: 190px;
    min-height: 0;
    padding: 8px 10px;
    border-radius: 11px;
    pointer-events: none;
  }
  .mission-card small { font-size: .75rem; }
  .mission-card strong { margin-top: 2px; font-size: .76rem; }
  .mission-card p { display: none; }

  .tower-menu-item { width: 60px; height: 60px; margin: -30px; }
  .tower-menu-item .tower-menu-icon { font-size: 1.15rem; }
  .tower-menu-item small { font-size: .62rem; }

  .status-toast { top: 51px; max-width: 55vw; padding: 7px 12px; font-size: .75rem; }

  .start-overlay, .result-overlay {
    position: fixed;
    z-index: 40;
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .start-card { width: min(520px, 76vw); max-height: 92dvh; overflow-y: auto; padding: 16px 20px; border-radius: 16px; }
  .start-card h1, .start-card h2 { margin: 3px 0 6px; font-size: clamp(2rem, 9vh, 3.1rem); }
  .start-card p { margin: 7px 0 11px; font-size: .82rem; line-height: 1.35; }
  .eyebrow { font-size: .75rem; }
  .primary-button { min-height: 44px; padding: 10px 18px; }
}

@media (orientation: portrait) and (max-width: 700px) {
  .game-shell { filter: blur(6px) brightness(.35); pointer-events: none; }
  .rotate-hint {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px;
    text-align: center;
    background: radial-gradient(circle at 50% 35%, #155268, #041822 65%);
  }
  .rotate-phone { display: block; color: var(--orange); font-size: 5rem; line-height: 1; transform: rotate(90deg); }
  .rotate-hint strong { font-size: 1.2rem; }
  .rotate-hint small { color: var(--muted); font-size: .9rem; }
}

.scenario-pick { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; color: #b7cdd3; font-size: .85rem; }
.scenario-pick.hidden { display: none; }
.scenario-pick select { min-height: 36px; padding: 4px 8px; border-radius: 8px; border: 1px solid #315e6e; color: white; background: #0b2e3d; }