:root {
  --bg: #050b1a;
  --panel: #0d1830;
  --panel-2: #14223f;
  --line: #24365c;
  --text: #eef5ff;
  --muted: #9fb2d4;
  --accent: #3ee6ff;
  --gold: #ffd23d;
  --good: #7fffb0;
  --bad: #ff5a6a;
  --radius: 10px;
  --header-h: 48px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  -webkit-text-size-adjust: 100%;
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

.page {
  padding: 8px 8px 40px;
}

.game-root {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  background: #02050d;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Stage ---------- */

.stage {
  position: relative;
  width: 100%;
  height: clamp(300px, calc(100vh - var(--header-h) - 20px), 1000px);
  /* The header grows by the top safe area in the home-screen app. */
  height: clamp(300px, calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px) - 20px), 1000px);
  touch-action: none;
  outline: none;
}

/* Full screen: the site's "Full screen" button takes #game-root fullscreen
   (site/fullscreen.js). The stage fills the screen, and src/layout.js places
   the field and everything around it (DESIGN.md, "The layout around the
   field"). */
.game-root:fullscreen {
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
}
.game-root:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
}
.game-root:fullscreen .stage {
  height: 100%;
}
.game-root:-webkit-full-screen .stage {
  height: 100%;
}

/* "Leave full screen" where src/layout.js puts it: off the field, next to
   Sound and Pause, clear of the HUD. main.js sets the two properties. */
.game-root .am-fs-exit {
  top: var(--ss-exit-top, max(8px, env(safe-area-inset-top, 0px)));
  left: var(--ss-exit-left, calc(50% - 22px));
}

/* Reads the screen's safe-area insets for src/layout.js. */
.safe-probe {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.stage.playing {
  cursor: none;
}

.stage #game {
  display: block;
  width: 100%;
  height: 100%;
}

/* The guardian's 3D layer over the field, and the bullets, ship and HUD over
   it (src/render.js). Input still goes to #game. */
.stage .layer {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.stage #game-top {
  width: 100%;
  height: 100%;
}

.corner {
  position: absolute;
  display: flex;
  gap: 8px;
  z-index: 3;
}

.btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-weight: 700;
  text-align: center;
}

.overlay .btn {
  min-width: 44px;
  min-height: 44px;
}

.btn:hover:not(:disabled) {
  border-color: var(--accent);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.42;
  cursor: default;
}

.btn-primary {
  background: linear-gradient(180deg, #5cf0ff, #1fb7d6);
  color: #041018;
  border-color: #7ff3ff;
}

.btn-danger {
  background: #3a1016;
  border-color: #8c2a36;
  color: #ffd0d6;
}

.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(13, 24, 48, 0.72);
}

.btn-icon svg {
  width: 20px;
  height: 20px;
}

/* 44 px on touch screens (docs/PLATFORMS.md); main.js sets --ss-btn. */
.corner .btn-icon {
  width: var(--ss-btn, 38px);
  height: var(--ss-btn, 38px);
}

.stage.playing .corner .btn-icon {
  cursor: pointer;
}

.nova-btn {
  position: absolute;
  z-index: 3;
  border-radius: 50%;
  border: 2px solid rgba(255, 154, 232, 0.8);
  background: radial-gradient(circle at 50% 40%, rgba(255, 154, 232, 0.55), rgba(90, 20, 80, 0.55));
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  touch-action: none;
  cursor: pointer;
}

.nova-btn .count {
  font-size: 18px;
}

.nova-btn.over {
  opacity: 0.7;
}

.nova-btn:disabled {
  opacity: 0.3;
}

/* ---------- Toasts ---------- */

.toasts {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  width: min(90%, 420px);
  z-index: 6;
}

.toast {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(8, 14, 30, 0.92);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  animation: toast-in 0.25s ease-out;
}

.toast.gold {
  border-color: var(--gold);
  color: var(--gold);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ---------- Overlays ---------- */

.overlay {
  position: absolute;
  inset: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  display: none;
  padding: max(12px, env(safe-area-inset-top, 0px)) 16px 16px;
  background: rgba(2, 6, 16, 0.62);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  z-index: 5;
  cursor: default;
  font-size: var(--ss-text, 14px);
}

.overlay.show {
  display: flex;
}

/* Menus and results may scroll on a short screen. Keep their first row
   below the site's top-layer exit, including when a tall panel overflows:
   the overlay's padding moves its content down, while its shade still
   covers the whole screen. Moving the overlay itself left an undimmed bar
   across the top in full screen (Oct 13). */
.game-root:fullscreen .overlay {
  padding-top: max(calc(var(--ss-exit-top, 16px) + 52px), env(safe-area-inset-top, 0px));
}
.game-root:-webkit-full-screen .overlay {
  padding-top: max(calc(var(--ss-exit-top, 16px) + 52px), env(safe-area-inset-top, 0px));
}

.panel {
  margin: auto;
  width: min(560px, 100%);
  background: rgba(13, 24, 48, 0.94);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.panel h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.panel h3 {
  margin: 16px 0 4px;
  font-size: 16px;
}

.panel .sub {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.panel .foot {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}

.actions.spread {
  justify-content: space-between;
}

.ico {
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
}

.ico svg {
  width: 100%;
  height: 100%;
}

.shards {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 800;
  color: #9ff3ff;
  white-space: nowrap;
}

.btn-primary .shards {
  color: #041018;
}

/* Title */

.title-screen {
  text-align: center;
  width: min(440px, 100%);
}

.title-ship {
  display: block;
  margin: 0 auto 4px;
  filter: drop-shadow(0 0 10px rgba(62, 230, 255, 0.6));
}

.logo {
  font-size: clamp(38px, 8vw, 60px);
  font-weight: 900;
  letter-spacing: 5px;
  margin: 0;
  background: linear-gradient(180deg, #ffffff, #8fe3ff 45%, #ffb547 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.title-screen .tag {
  color: var(--muted);
  margin: 4px 0 16px;
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 340px;
  margin: 0 auto;
}

.menu-buttons .btn {
  padding: 11px;
  font-size: 15px;
}

.menu-buttons .btn small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.8;
}

.btn-launch {
  font-size: 18px !important;
}

.pair,
.trio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.trio {
  grid-template-columns: 1fr 1fr 1fr;
}

.trio .btn {
  font-size: var(--ss-text, 14px) !important;
  padding: 10px 4px !important;
}

/* Lists (sectors, hangar) */

.list .row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.row .grow {
  flex: 1;
  min-width: 0;
}

.row .name {
  font-weight: 800;
}

.row .desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.row .effect {
  font-size: 12px;
  margin-top: 3px;
  color: #cfe6ff;
}

.row.locked {
  opacity: 0.5;
}

.num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.btn-sm {
  padding: 7px 14px;
}

.medals {
  display: inline-flex;
  gap: 3px;
  margin-left: 4px;
  vertical-align: -2px;
}

.medal {
  color: rgba(255, 255, 255, 0.16);
  font-size: 14px;
}

.medal.on {
  color: var(--gold);
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.tab {
  flex: 1;
  padding: 7px 6px;
}

.tab.on {
  border-color: var(--accent);
  background: #173152;
}

.tiers {
  display: flex;
  gap: 3px;
  margin-top: 5px;
}

.tiers i {
  width: 16px;
  height: 5px;
  border-radius: 2px;
  background: #22345a;
}

.tiers i.on {
  background: var(--accent);
}

/* The second act's tiers (switch on): set apart after the first act's five,
   in gold. */
.tiers i.act2 {
  background: #3a2f12;
}

.tiers i:not(.act2) + i.act2 {
  margin-left: 5px;
}

.tiers i.act2.on {
  background: var(--gold);
}

.tier-lock {
  color: var(--muted);
  white-space: nowrap;
}

/* The map of both acts (switch on): one column on phones and narrow
   screens, the two acts side by side where there is room. */
.panel-map {
  width: min(560px, 100%);
}

.act-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 2px;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
}

.act-head small {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-weight: 600;
}

.list .row.next .num {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(127, 233, 255, 0.25);
}

@media (min-width: 900px) and (min-height: 560px) {
  .panel-map {
    width: min(1040px, 100%);
  }
  .acts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
  }
}

.btn-buy {
  flex: none;
  padding: 8px 10px;
}

.maxed {
  flex: none;
  font-weight: 800;
  color: var(--gold);
  padding: 0 10px;
}

.balance {
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0 8px;
}

.ships {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}

.ship {
  padding: 6px 4px;
}

.ship.on {
  border-color: var(--accent);
  background: #173152;
}

.ship-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 13px;
}

.ship-card small {
  font-size: 11px;
  color: var(--muted);
}

/* Stats, results */

.stats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  font-size: 14px;
  margin: 10px 0;
}

.stats span:nth-child(even) {
  font-weight: 800;
  text-align: right;
}

.big-score {
  font-size: clamp(34px, 8vw, 48px);
  font-weight: 900;
  text-align: center;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}

.best {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.close {
  text-align: center;
  color: #ffc8a0;
  font-weight: 700;
  margin: 8px 0 0;
}

.medal-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 10px 0;
}

.medal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.medal-card .ico {
  font-size: 22px;
}

.medal-card small {
  font-size: 11px;
  font-weight: 600;
}

.medal-card.on {
  color: var(--gold);
  border-color: #6d5a26;
}

.medal-card.new {
  background: rgba(255, 210, 61, 0.12);
  animation: medal-in 0.5s ease-out;
}

@keyframes medal-in {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

.earned {
  text-align: center;
  font-size: 15px;
  margin: 8px 0;
}

.earned .bal {
  color: var(--muted);
  font-size: 13px;
}

.note {
  text-align: center;
  font-size: 14px;
  margin: 4px 0;
  color: #cfe6ff;
}

.note.gold {
  color: var(--gold);
  font-weight: 700;
}

.mod {
  border: 1px solid #6d5a26;
  background: rgba(255, 210, 61, 0.08);
  border-radius: 10px;
  padding: 10px;
}

.mod .name {
  font-weight: 800;
  color: var(--gold);
}

.mod .desc {
  font-size: 14px;
}

.achs .ach {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.achs .ach .name {
  font-weight: 700;
  color: var(--gold);
}

.achs .ach .desc {
  color: var(--muted);
  text-align: right;
}

.achs .ach.locked .name {
  color: var(--muted);
}

/* Settings */

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.setting input[type='range'] {
  width: min(200px, 50%);
  accent-color: var(--accent);
  min-height: 44px;
}

.toggle {
  min-width: 64px;
}

.toggle.on {
  border-color: var(--accent);
  background: #173152;
  color: var(--accent);
}

.seg {
  display: flex;
  gap: 8px;
}

.seg .btn {
  padding: 6px 8px;
  font-size: 13px;
}

.seg .btn.on {
  border-color: var(--accent);
  color: var(--accent);
}

.overlay :is(small, .sub, .foot, .desc, .effect, .ship-card, .stats, .seg .btn,
  .ach, .best, .medal-card, .earned .bal, .note, kbd) {
  font-size: var(--ss-text, 14px);
}

.help dt {
  font-weight: 800;
  margin-top: 10px;
  color: var(--accent);
}

.help dd {
  margin: 2px 0 0;
  font-size: var(--ss-text, 14px);
  line-height: 1.45;
}

/* ---------- Below the game ---------- */

.ad-below {
  max-width: 1200px;
  margin: 12px auto 0;
}

.about {
  max-width: 820px;
  margin: 24px auto 0;
  padding: 0 8px;
  line-height: 1.55;
  color: #d2def2;
}

.about h1,
.about h2 {
  color: var(--text);
}

kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--panel);
  font-size: 12px;
}

@media (max-width: 640px) {
  .page {
    padding: 4px 0 30px;
  }
  .game-root {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .panel {
    padding: 12px;
  }
  .overlay {
    padding: max(8px, env(safe-area-inset-top, 0px)) 16px 16px;
  }
}

@media (max-height: 520px) {
  .stage {
    height: calc(100vh - var(--header-h) - 12px);
    height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px) - 12px);
    min-height: 260px;
  }
  .title-ship {
    display: none;
  }
  .logo {
    font-size: 32px;
  }
  .title-screen .tag {
    margin-bottom: 8px;
  }
  .menu-buttons .btn {
    padding: 8px;
  }
}

/* Phones held sideways: the site header steps aside during a sortie so the
   play field gets the whole height of the screen. */
@media (max-height: 540px) and (orientation: landscape) {
  body.playing .site-header {
    display: none;
  }
  body.playing .page {
    padding-top: 0;
    padding-bottom: 0;
  }
  body.playing .game-root {
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
  }
  body.playing .stage {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }
}

@media (max-height: 400px) {
  .title-screen .tag {
    display: none;
  }
}

/* Short landscape screens (phones held sideways): the title menu goes side by
   side, name and medal count on the left, buttons on the right, so every
   button fits under the site header whatever the system font's line height. */
@media (max-height: 440px) and (orientation: landscape) {
  .title-screen {
    width: min(660px, 100%);
    padding: 10px;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: 1fr auto 1fr;
    column-gap: 14px;
    align-items: center;
  }
  .title-screen .tag {
    display: none;
  }
  .title-screen .logo {
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(22px, 4.2vw, 30px);
    letter-spacing: 3px;
  }
  .title-screen .foot {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    margin: 4px 0 0;
  }
  .title-screen .menu-buttons {
    grid-column: 2;
    grid-row: 1 / 4;
    gap: 8px;
    max-width: none;
    width: 100%;
  }
  .title-screen .menu-buttons .pair,
  .title-screen .menu-buttons .trio {
    gap: 8px;
  }
  .title-screen .menu-buttons .btn {
    padding: 7px;
  }
}

/* The ending: its own canvas, with the lines fading in over it. */
.ending {
  position: absolute;
  inset: 0;
  background: #05030a;
  cursor: pointer;
  touch-action: none;
}

.ending canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ending-lines {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16%;
  padding: 0 24px;
  text-align: center;
  color: #fff2c8;
  font-size: 1.15rem;
  text-shadow: 0 0 10px #ff9a3a;
}

.ending-lines p {
  margin: 0.5em 0;
}

.ending-skip {
  position: absolute;
  right: 12px;
  bottom: 8px;
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 242, 200, 0.6);
}