:root {
  --panel: rgba(18, 18, 24, 0.88);
  --panel-solid: #17171d;
  --panel-raised: #22222a;
  --border: rgba(255, 255, 255, 0.14);
  --text: #e8e6df;
  --text-dim: #a8a59b;
  --gold: #f4c14f;
  --green: #3fae5f;
  --green-hover: #46c46a;
  --red: #c94848;
  --radius: 6px;
  --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* the command card's height; what sits above it (the send queue) needs it too */
  --card-height: 240px;
}

body { margin: 0; }

#menu-container {
  font-family: var(--font);
  color: var(--text);
}
#menu-container * {
  box-sizing: border-box;
}

/* ---------- boot curtain (models loading, before the scene exists) ---------- */

.boot-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 18px;
  color: var(--text-dim);
  background: radial-gradient(circle at 50% 30%, #2a2a36, #0e0e13);
  z-index: 30;
}
.boot-loading[hidden] {
  display: none;
}

/* ---------- login ---------- */

.auth-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 30%, #2a2a36, #0e0e13);
  z-index: 20;
}
.auth-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px;
  text-align: center;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.auth-title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: var(--gold);
}
.auth-subtitle {
  margin: 0 0 12px;
  color: var(--text-dim);
}
.auth-button {
  min-height: 48px;
  padding: 12px 16px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.auth-button:hover:not(:disabled) {
  border-color: var(--gold);
}
.auth-button--primary {
  color: white;
  background: var(--green);
}
.auth-button--primary:hover:not(:disabled) {
  background: var(--green-hover);
}
.auth-button:disabled {
  opacity: 0.5;
  cursor: default;
}
.auth-guest {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-input {
  min-height: 48px;
  padding: 0 14px;
  /* 16px stops iOS zooming the page when the field is focused */
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
  text-align: center;
  background: #101015;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.auth-input:focus {
  outline: none;
  border-color: var(--gold);
}
.auth-divider {
  font-size: 13px;
  color: var(--text-dim);
}
.auth-error {
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  color: #ff9c9c;
  background: rgba(201, 72, 72, 0.15);
  border: 1px solid rgba(201, 72, 72, 0.4);
  border-radius: var(--radius);
}
.auth-note {
  margin: 0;
  font-size: 12px;
  color: var(--text-dim);
}

/* ---------- lobby ---------- */

.home-screen {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  padding: 24px 16px 40px;
  background: radial-gradient(circle at 50% 20%, #2a2a36, #0e0e13);
  z-index: 20;
}
.home {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.home__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.home__account {
  display: flex;
  gap: 12px;
  font-size: 14px;
  color: var(--text-dim);
}
.home__faction {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.home__faction-label {
  font-size: 13px;
  color: var(--text-dim);
  margin-right: 4px;
}
.home__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.home__actions .auth-button {
  flex: 1 1 140px;
}
.home__heading {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.home__empty {
  margin: 0;
  padding: 14px;
  font-size: 14px;
  color: var(--text-dim);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.home__row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 10px 12px;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
}
.home__row--turn { border-left-color: var(--green); }
.home__row--won { border-left-color: var(--green); }
.home__row--lost { border-left-color: var(--red); }
.home__row--finished { opacity: 0.65; }
.home__row-text {
  flex: 1;
  min-width: 0;
}
.home__row-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home__row-detail {
  font-size: 13px;
  color: var(--text-dim);
}
.home__row--turn .home__row-detail {
  color: var(--green-hover);
}
.home__row-button {
  min-height: 40px;
  padding: 0 14px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.home__row-button--go {
  color: white;
  background: var(--green);
}
.home__row-button:disabled {
  opacity: 0.5;
  cursor: default;
}
.home__link {
  align-self: center;
  padding: 8px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-dim);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
}

.account-chip {
  position: fixed;
  top: 8px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 14px;
  font-size: 13px;
  font-weight: 600;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 5;
}
.account-chip__name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-chip__action {
  padding: 0;
  font: inherit;
  color: var(--gold);
  background: none;
  border: none;
  cursor: pointer;
}
.account-chip__action:hover {
  color: white;
}
:fullscreen .account-chip {
  top: 48px;
}

.game-notice {
  position: fixed;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(90vw, 480px);
  padding: 6px 14px;
  font-size: 13px;
  text-align: center;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  z-index: 6;
}

/* ---------- top bar ---------- */

.menu__topright {
  position: fixed;
  top: 8px;
  right: 16px;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.menu__hud {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  padding: 6px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
}
.menu__hud small {
  color: var(--text-dim);
  font-size: 0.85em;
  font-weight: 500;
}
.menu__fullscreen,
.menu__settings,
.menu__weather-button {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--gold);
  font-size: 16px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}
.menu__fullscreen:hover,
.menu__settings:hover,
.menu__weather-button:hover {
  color: white;
  border-color: var(--gold);
}

/* the weather button(s): a row of their own under the HUD (the dev
   server has one per condition) */
.menu__weather {
  position: fixed;
  top: 48px;
  right: 16px;
  display: flex;
  gap: 6px;
  z-index: 10;
}

:fullscreen .menu__weather {
  top: 88px;
}

/* the weather showing, among the dev server's weather buttons */
.menu__weather-button--on {
  border-color: var(--gold);
  background: var(--gold);
  color: #1a1408;
}

.phase-group {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  align-items: stretch;
  z-index: 5;
}
.phase-banner {
  padding: 6px 14px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.phase-banner--planning {
  background: var(--green);
  cursor: pointer;
}
.phase-banner--planning:hover:not(:disabled) {
  background: var(--green-hover);
}
.phase-banner--planning:disabled {
  background: #4a4a52;
  cursor: default;
}
.phase-banner--waiting {
  background: var(--panel);
  color: var(--gold);
  cursor: pointer;
}
.phase-banner--waiting:hover:not(:disabled) {
  border-color: var(--gold);
}
.phase-banner--waiting:disabled {
  cursor: default;
  opacity: 0.7;
}
.phase-banner--attack {
  background: var(--red);
}
.phase-speeds {
  display: flex;
  gap: 8px;
}
.phase-chip {
  padding: 6px 12px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.phase-chip:hover {
  color: white;
  border-color: var(--gold);
}
.phase-chip--active {
  background: var(--green);
  color: white;
}

/* in fullscreen there's no browser chrome, so drop the top bar lower */
:fullscreen .menu__topright,
:fullscreen .phase-group {
  top: 48px;
}

/* ---------- minimap ---------- */

/* fills the command card's portrait window (view/Minimap.js joins the
   same element the model preview draws in) while nothing is selected;
   laid over the window rather than flowing after the preview's canvas */
.menu__window .minimap {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #101015;
  touch-action: none;
  cursor: crosshair;
}
.menu__window .minimap[hidden] {
  display: none;
}

/* ---------- model view ---------- */

.model-view__top {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 5;
}
.model-view__title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.model-view__clips {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.model-view__hint {
  position: fixed;
  bottom: 12px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
:fullscreen .model-view__top {
  top: 48px;
}

/* ---------- placement confirm / cancel ---------- */

.placement-controls {
  position: fixed;
  bottom: 260px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 28px;
  z-index: 5;
}
.placement-controls button {
  font-size: 28px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: white;
  cursor: pointer;
  position: relative;
}
/* invisible halo that widens the tap target without growing the button;
   near-misses hit the button instead of repositioning the ghost */
.placement-controls button::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
}
.placement-controls__confirm {
  background: var(--green);
}
.placement-controls__confirm:hover:not(:disabled) {
  background: var(--green-hover);
}
.placement-controls__confirm:disabled {
  background: #4a4a52;
  opacity: 0.7;
  cursor: not-allowed;
}
.placement-controls__cancel {
  background: var(--red);
}

/* ---------- the card's little windows ---------- */

/* The shell CardWindow.jsx renders: drops up from the cell or portrait
   that hosts it (MenuOptions / MenuWindow render it inside); --shift is
   set by the component to keep it on screen when the host sits near an
   edge */
.card-window {
  --shift: 0px;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(calc(-50% + var(--shift)));
  max-width: calc(100vw - 16px);
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  z-index: 6;
  cursor: default;
  text-align: left;
}
/* the caret that points back at the host */
.card-window::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% - var(--shift));
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--border);
  border-bottom: 0;
}
.card-window__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 4px;
}
.card-window__close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
}

/* the arrow window (clone / select) */
.arrow-window__pad {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: 4px;
}
.arrow-window__arrow {
  font-size: 18px;
  color: white;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.arrow-window__arrow:hover:not(:disabled) {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.arrow-window__arrow:active:not(:disabled) {
  transform: scale(0.9);
}
.arrow-window__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.arrow-window__arrow--up { grid-area: 1 / 2; }
.arrow-window__arrow--left { grid-area: 2 / 1; }
.arrow-window__arrow--right { grid-area: 2 / 3; }
.arrow-window__arrow--down { grid-area: 3 / 2; }
.arrow-window--clone .arrow-window__arrow:not(:disabled) {
  background: var(--green);
}
.arrow-window--clone .arrow-window__arrow:hover:not(:disabled) {
  background: var(--green-hover);
}

/* the upgrade preview (UpgradeWindow.jsx): the current level's numbers
   next to the next level's, the changes in gold, cost and buy below */
.upgrade-window {
  min-width: 240px;
}
.upgrade-window__stats {
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
}
.upgrade-window__stats th {
  font-weight: 500;
  text-align: left;
  padding: 2px 10px 2px 0;
}
.upgrade-window__stats td {
  padding: 2px 0;
}
.upgrade-window__arrow {
  padding: 2px 6px !important;
  opacity: 0.5;
}
.upgrade-window__row--changed .upgrade-window__to {
  color: var(--gold);
  font-weight: 600;
}
.upgrade-window__row--changed .upgrade-window__arrow {
  opacity: 1;
  color: var(--gold);
}
.upgrade-window__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.upgrade-window__cost {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.upgrade-window__cost small {
  font-weight: 400;
  color: var(--text-dim);
}
.upgrade-window__cost--short {
  color: var(--red);
}
.upgrade-window__confirm {
  font-size: 14px;
  font-weight: 600;
  padding: 7px 16px;
  background: var(--green);
  color: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.upgrade-window__confirm:hover:not(:disabled) {
  background: var(--green-hover);
}
.upgrade-window__confirm:disabled {
  background: #4a4a52;
  opacity: 0.7;
  cursor: not-allowed;
}

/* the stats window (StatsWindow.jsx): the stats column, for phones that
   have no room for it in the card */
.stats-window {
  min-width: 200px;
}
.stats-window__list {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 14px;
  row-gap: 3px;
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
}
.stats-window__list dt {
  font-weight: 500;
}
.stats-window__list dd {
  margin: 0;
  color: var(--text);
}

/* the send window (SendWindow.jsx): the unit's stats, then a button a
   batch size, ×1 ×5 ×25, each with its price; sized for thumbs */
.send-window {
  min-width: 220px;
}
.send-window__stats {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 14px;
  row-gap: 3px;
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
  white-space: nowrap;
}
.send-window__stats dt {
  font-weight: 500;
}
.send-window__stats dd {
  margin: 0;
  color: var(--text);
}
.send-window__footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.send-window__to {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 6px;
  white-space: nowrap;
}
.send-window__batches {
  display: flex;
  gap: 6px;
}
.send-window__batch {
  flex: 1 1 0;
  min-width: 64px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 8px;
  background: var(--green);
  color: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
}
.send-window__batch-count {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
}
.send-window__batch-cost {
  font-size: 11px;
  color: var(--gold);
  line-height: 1.1;
}
.send-window__batch:hover:not(:disabled) {
  background: var(--green-hover);
}
.send-window__batch:active:not(:disabled) {
  transform: scale(0.95);
}
.send-window__batch:disabled {
  background: #4a4a52;
  opacity: 0.7;
  cursor: not-allowed;
}
.send-window__batch:disabled .send-window__batch-cost {
  color: var(--red);
}

/* ---------- bottom menu ---------- */

/* The card's height sets everything else: the portrait is a square of
   that height, the command grid a 4:3 block of square cells, and the
   stats take whatever width is left. Widths never come from the
   viewport, so cells stay square on every screen. */
#menu-container main {
  width: 100%;
  height: var(--card-height);
  background: var(--panel-solid);
  border-top: 1px solid var(--border);
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: stretch;
}
.menu__window {
  position: relative;
  flex: 0 0 var(--card-height);
  width: var(--card-height);
  min-width: 0;
  border-right: 1px solid var(--border);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
}
/* the portrait: the model preview's canvas (view/ModelPreview.js) over
   a lit backdrop while something is selected, or the flat icon when no
   preview is on the page */
.menu__window .menu__window-preview {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: calc(var(--radius) + 6px);
}
/* out of the flow: the canvas is as big as the window makes it, never
   the other way round (its backing store is up to twice its size, and
   would otherwise push the window wider on every resize) */
.menu__window .menu__window-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.menu__window .menu__window-preview--showing {
  background:
    radial-gradient(ellipse 70% 45% at 50% 88%, rgba(244, 193, 79, 0.16), transparent 70%),
    radial-gradient(ellipse at 50% 30%, #434659 0%, #23242f 55%, #111218 100%);
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.menu__window .menu__window-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu__window .menu__window-stats {
  width: 100%;
  font-size: 13px;
  color: var(--text-dim);
}
/* the name under the portrait, opening the stats window: for phones,
   whose card has no stats column (see the small-screen rules) */
.menu__window .menu__window-caption {
  display: none;
  width: 100%;
  margin-top: 3px;
  padding: 2px 4px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--gold);
  background: none;
  border: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.menu__window .menu__window-caption-level {
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.menu__window .menu__window-caption-caret {
  margin-left: 4px;
  color: var(--text-dim);
}
.menu__window .menu__window-caption--open .menu__window-caption-caret {
  color: var(--gold);
}
.menu__stats {
  flex: 1 1 auto;
  min-width: 0;
  border-right: 1px solid var(--border);
  padding: 24px 48px;
  overflow: hidden;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.menu__stats h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--gold);
}
.menu__stats .menu__stats-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--text-dim);
}
.menu__stats .menu__stats-container > * {
  width: 50%;
  padding: 2px 0;
}
.menu__stats .menu__stats-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-dim);
}
.menu__options {
  flex: 0 0 calc(var(--card-height) * 4 / 3);
  width: calc(var(--card-height) * 4 / 3);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.menu__options > * {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--border);
  background: var(--panel-raised);
  box-sizing: border-box;
}
.menu__options-cell--filled {
  cursor: pointer;
}
.menu__options-cell--filled:hover {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.menu__options-cell--filled:active .menu__options-icon {
  transform: scale(0.88);
}
.menu__options-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.menu__options-cell--filled .menu__options-icon {
  transition: transform 0.08s;
}
/* the name over a rendered icon; clicks fall through to the icon */
.menu__options-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 2px 3px;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  color: var(--text);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  pointer-events: none;
}
.menu__options-cell--placing {
  outline: 3px solid var(--gold);
  outline-offset: -3px;
  animation: cell-pulse 0.9s ease-in-out infinite;
}
.menu__options-cell--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.menu__options-cell--disabled img {
  cursor: not-allowed;
}
/* greyed for gold, but its window still opens to show the price: only
   the icon fades, so the cell's opacity neither dims the window nor
   starts a stacking context that would trap it under the HUD */
.menu__options-cell--peek {
  opacity: 1;
  cursor: pointer;
}
.menu__options-cell--peek .menu__options-icon {
  opacity: 0.35;
  cursor: pointer;
}
/* a cell you may press to look, though not to buy right now */
.menu__options-cell--faded .menu__options-icon {
  opacity: 0.55;
}
/* the price, on the cell itself; a refund reads as a gain */
.menu__options-cost {
  position: absolute;
  top: 3px;
  right: 4px;
  padding: 1px 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--radius);
  pointer-events: none;
}
.menu__options-cost--refund {
  color: var(--green-hover);
}
@keyframes cell-pulse {
  0%, 100% { outline-color: var(--gold); }
  50% { outline-color: #ff5500; }
}

/* ---------- send queue ---------- */

/* this round's sends, up the right edge above the command card; the
   latest nearest the card (column-reverse: the first child is at the
   bottom), scrolling once there are more than fit */
.send-queue {
  position: fixed;
  right: 12px;
  bottom: calc(var(--card-height) + 12px);
  max-height: calc(100vh - var(--card-height) - 72px);
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  overflow-y: auto;
  scrollbar-width: none;
  z-index: 4;
}
.send-queue__entry {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  padding: 0;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}
.send-queue__entry img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.send-queue__entry:hover {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}
.send-queue__entry--horde:hover {
  outline-color: var(--gold);
}
.send-queue__entry span {
  position: absolute;
  font-size: 10px;
  line-height: 1.2;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.65);
  pointer-events: none;
}
.send-queue__cost {
  top: 2px;
  right: 2px;
  color: var(--gold);
  font-weight: 700;
}
.send-queue__count {
  top: 2px;
  left: 2px;
  color: var(--text);
}
.send-queue__lane {
  bottom: 2px;
  right: 2px;
  color: var(--text-dim);
}

/* ---------- horde builder ---------- */

/* a sheet drawn up over the command card; the backdrop keeps it the only
   thing in focus until it is confirmed or cancelled */
.horde-sheet__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 8;
}
.horde-sheet {
  width: min(640px, 100%);
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: calc(var(--radius) * 2) calc(var(--radius) * 2) 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
  cursor: default;
  animation: sheet-up 0.15s ease-out;
}
@keyframes sheet-up {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.horde-sheet__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
}
.horde-sheet__close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
}
/* which of the opponent's spawn points the horde is aimed at */
.horde-sheet__lane {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
}
/* ten square slots in one row, shrinking with the sheet */
.horde-sheet__slots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}
.horde-sheet__slot {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--panel-raised);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  box-sizing: border-box;
  overflow: hidden;
}
.horde-sheet__slot--filled {
  border-style: solid;
  cursor: pointer;
}
.horde-sheet__slot--filled:hover {
  border-color: var(--red);
}
.horde-sheet__slot img,
.horde-sheet__unit img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.horde-sheet__units {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.horde-sheet__unit {
  position: relative;
  width: 72px;
  height: 72px;
  padding: 0;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}
.horde-sheet__unit small {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 11px;
  color: var(--gold);
}
.horde-sheet__unit:hover:not(:disabled) {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.horde-sheet__unit:active:not(:disabled) img {
  transform: scale(0.9);
}
.horde-sheet__unit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.horde-sheet__total {
  text-align: center;
  font-size: 14px;
  color: var(--text);
}
.horde-sheet__total small {
  color: var(--text-dim);
}
.horde-sheet__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.horde-sheet__actions button {
  padding: 10px 20px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.horde-sheet__cancel {
  background: var(--panel-raised);
}
.horde-sheet__remove {
  margin-right: auto;
  background: var(--red);
}
.horde-sheet__remove:hover {
  background: #de5c5c;
}
.horde-sheet__confirm {
  background: var(--green);
}
.horde-sheet__confirm:hover:not(:disabled) {
  background: var(--green-hover);
}
.horde-sheet__confirm:disabled {
  background: #4a4a52;
  opacity: 0.7;
  cursor: not-allowed;
}

/* ---------- game over ---------- */

.game-over {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: 700;
  color: var(--red);
  background: rgba(0, 0, 0, 0.55);
  z-index: 10;
}
.game-over--victory {
  color: var(--green-hover);
}
.game-over--draw {
  color: var(--gold);
}
.game-over__restart {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  padding: 10px 32px;
  background: var(--green);
  color: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.game-over__restart:hover {
  background: var(--green-hover);
}

/* ---------- the attack's opening count ---------- */

/* the count sits over the middle of the battlefield and takes no taps;
   a faint vignette draws the eye in without hiding the boards */
.countdown {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.35) 100%);
  z-index: 7;
  animation: countdown-vignette 0.3s ease-out both;
}
@keyframes countdown-vignette {
  from { opacity: 0; }
  to { opacity: 1; }
}
.countdown__round {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  animation: countdown-round 0.4s ease-out both;
}
@keyframes countdown-round {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
/* each number lands hard and large and then holds, settling a little,
   until the next one takes its place (the count runs on the game's
   clock, so a number is never gone before its successor); a ring
   spreads out from behind it on the beat */
.countdown__number {
  position: relative;
  font-size: 180px;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: white;
  text-shadow:
    0 0 24px rgba(244, 193, 79, 0.9),
    0 0 60px rgba(244, 193, 79, 0.5),
    0 6px 18px rgba(0, 0, 0, 0.8);
  animation: countdown-pop 1s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
.countdown__number::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.4em;
  height: 1.4em;
  margin: -0.7em 0 0 -0.7em;
  border: 3px solid rgba(244, 193, 79, 0.85);
  border-radius: 50%;
  animation: countdown-ring 0.9s ease-out both;
  z-index: -1;
}
@keyframes countdown-pop {
  0% { opacity: 0; transform: scale(2.4); }
  14% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.8; transform: scale(0.88); }
}
@keyframes countdown-ring {
  0% { opacity: 0.9; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(2.2); }
}
/* "FIGHT!": red and a shake; it holds over the first blows and goes
   when the controller takes it down */
.countdown--go .countdown__number {
  font-size: 140px;
  letter-spacing: 0.04em;
  color: #ff5e52;
  text-shadow:
    0 0 24px rgba(201, 72, 72, 0.9),
    0 0 70px rgba(201, 72, 72, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.8);
  animation: countdown-go 1s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
.countdown--go .countdown__number::before {
  border-color: rgba(255, 94, 82, 0.85);
  border-width: 4px;
}
.countdown--go .countdown__round {
  animation: none;
}
@keyframes countdown-go {
  0% { opacity: 0; transform: scale(2.8) rotate(-4deg); }
  12% { opacity: 1; transform: scale(1) rotate(2deg); }
  20% { transform: scale(1.05) rotate(-1.5deg); }
  28% { transform: scale(1) rotate(0); }
  100% { opacity: 1; transform: scale(1.06); }
}

/* ---------- round summary ---------- */

.round-summary {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
  z-index: 12;
  animation: countdown-vignette 0.25s ease-out both;
}
.round-summary__panel {
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 24px 22px;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-top: 2px solid var(--gold);
  border-radius: calc(var(--radius) * 2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  animation: summary-in 0.35s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
@keyframes summary-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.round-summary__kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.round-summary__title {
  margin: -8px 0 0;
  font-size: 30px;
  font-weight: 800;
  text-align: center;
  color: var(--gold);
}
.round-summary__title--good {
  color: var(--green-hover);
}
.round-summary__title--bad {
  color: #ff6b6b;
}
.round-summary__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  width: 100%;
}
.round-summary__column h3 {
  margin: 0 0 8px;
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}
/* a row: its label, its figure counting up, and a note under them; each
   row rises into place a beat after the last (the delay is set inline) */
.round-summary__stat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 5px 0;
  animation: summary-row 0.4s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}
@keyframes summary-row {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}
.round-summary__label {
  font-size: 14px;
  color: var(--text);
}
.round-summary__value {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: white;
}
.round-summary__stat--good .round-summary__value {
  color: var(--green-hover);
}
.round-summary__stat--bad .round-summary__value {
  color: #ff6b6b;
}
.round-summary__stat--quiet .round-summary__value {
  color: var(--text-dim);
}
.round-summary__note {
  grid-column: 1 / -1;
  margin-top: -4px;
  font-size: 12px;
  color: var(--text-dim);
}
/* the score: both seats' lives side by side, counting down from what
   they were; a lost life flashes the figure red and lands the loss beside it */
.round-summary__score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 0 6px;
  border-top: 1px solid var(--border);
}
.round-summary__vs {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.round-summary__lives {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.round-summary__lives-count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 40px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: white;
  transition: color 0.2s;
}
.round-summary__heart {
  font-size: 24px;
  color: #ff6b6b;
}
.round-summary__lives--them .round-summary__heart {
  color: #6f9cf0;
}
.round-summary__lives--hit .round-summary__lives-count {
  animation: summary-hit 0.5s ease-out both;
}
@keyframes summary-hit {
  0% { color: #ff6b6b; transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  100% { color: white; transform: none; }
}
.round-summary__lives--them.round-summary__lives--hit .round-summary__lives-count {
  animation-name: summary-hit-them;
}
@keyframes summary-hit-them {
  0% { color: var(--green-hover); transform: scale(1.1); }
  100% { color: white; transform: none; }
}
.round-summary__delta {
  min-width: 2ch;
  font-size: 16px;
  font-weight: 700;
  color: #ff6b6b;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s, transform 0.25s;
}
.round-summary__lives--them .round-summary__delta {
  color: var(--green-hover);
}
.round-summary__delta--shown {
  opacity: 1;
  transform: none;
}
.round-summary__lives-label {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}
.round-summary__gold {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
  animation: summary-row 0.4s ease-out 1.4s both;
}
.round-summary__continue {
  margin-top: 4px;
  padding: 12px 36px;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  color: white;
  background: var(--green);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  animation: summary-row 0.4s ease-out 1.6s both;
}
.round-summary__continue:hover {
  background: var(--green-hover);
}

/* ---------- self play and recording (dev) ---------- */

.menu__seat--p1 {
  color: #e0605e;
  font-weight: 700;
}
.menu__seat--p2 {
  color: #6f9cf0;
  font-weight: 700;
}
.handover {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  border: none;
  font-family: var(--font);
  color: white;
  cursor: pointer;
}
.handover--p1 {
  background: rgba(70, 14, 13, 0.94);
}
.handover--p2 {
  background: rgba(14, 33, 72, 0.94);
}
.handover__seat {
  font-size: 48px;
  font-weight: 700;
}
.handover__detail {
  font-size: 18px;
  opacity: 0.8;
}
.recording-chip {
  position: fixed;
  top: 52px;
  left: 12px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #ff6b6b;
  background: rgba(0, 0, 0, 0.6);
  border-radius: var(--radius);
  pointer-events: none;
}
.game-over__guidance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.game-over__status {
  font-size: 14px;
  color: white;
  max-width: 80vw;
  text-align: center;
}
.recording-chip--error {
  color: #ffd166;
}

/* ---------- world editor (dev) ---------- */

.editor {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #1b1b21;
  color: #e8e4da;
  font-family: var(--font);
  font-size: 13px;
  overflow: hidden;
}
.editor__header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid #33333d;
}
.editor__title span {
  opacity: 0.7;
  margin-left: 6px;
}
.editor__tabs,
.editor__actions,
.editor-tools__group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.editor__status {
  padding: 6px 12px;
  background: #2a2a33;
}
.editor__body {
  flex: 1;
  overflow: auto;
  padding: 8px 12px 24px;
}
.editor-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 8px;
}
.editor-tools--prop {
  padding: 6px 8px;
  background: #2a2a33;
  border-radius: var(--radius);
  align-items: center;
}
.editor-button {
  font-family: var(--font);
  font-size: 13px;
  padding: 6px 10px;
  color: #e8e4da;
  background: #2f2f39;
  border: 1px solid #45454f;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.editor-button:disabled {
  opacity: 0.45;
  cursor: default;
}
.editor-button--active {
  background: #5a4a22;
  border-color: var(--gold);
}
.editor-button--primary {
  background: var(--green);
  border-color: var(--green-hover);
}
.editor-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.editor-input {
  font-family: var(--font);
  font-size: 13px;
  width: 72px;
  padding: 4px 6px;
  color: #e8e4da;
  background: #24242c;
  border: 1px solid #45454f;
  border-radius: 4px;
}
.editor-input--text {
  width: 140px;
}
.editor-input--wide {
  width: 100%;
  margin-bottom: 6px;
}
.editor-grid-scroll {
  overflow: auto;
  max-width: 100%;
}
.editor-grid {
  display: block;
  image-rendering: pixelated;
}
.editor-problems {
  margin: 0 0 8px;
  padding: 6px 10px 6px 24px;
  color: #ffd166;
  background: #3a2f17;
  border-radius: var(--radius);
}
.editor-note {
  opacity: 0.75;
}
.editor-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.editor-card {
  padding: 8px 10px;
  background: #24242c;
  border-radius: var(--radius);
}
.editor-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
}
.editor-table-scroll {
  overflow-x: auto;
}
.editor-table {
  border-collapse: collapse;
}
.editor-table th,
.editor-table td {
  padding: 2px 6px;
  text-align: left;
  white-space: nowrap;
}
.editor-table th {
  font-weight: 500;
  opacity: 0.85;
}
.editor-table__derived td,
.editor-table__derived th {
  opacity: 0.6;
  font-style: italic;
}
.editor-table__stale {
  opacity: 0.5;
}
.editor-preview {
  position: fixed;
  inset: 0;
}
.editor-preview__close {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* ---------- tower focus (view/TowerFocus.js) ---------- */

/* the card's parts (portrait, stats, command grid) lie across the card
   as before; the wrapper is there to remount them when the panel changes
   kind (menu/index.jsx), so they rise into place: the tower's panel
   arriving after the tap, in the spec's 200-400 ms window */
.menu__card {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: stretch;
  animation: card-reveal 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) 0.06s both;
}
@keyframes card-reveal {
  from {
    opacity: 0.35;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu__card,
  .countdown,
  .countdown__round,
  .countdown__number,
  .countdown__number::before,
  .round-summary,
  .round-summary__panel,
  .round-summary__stat,
  .round-summary__lives-count,
  .round-summary__gold,
  .round-summary__continue {
    animation: none;
  }
  .round-summary__delta {
    transition: none;
  }
}
/* placement mode: the card slides away under the world grid, leaving the
   ground it covered to the ghost and the confirm/cancel buttons; the
   panel takes no taps then, so the ghost can be put where it stood. The
   buttons and the HUD, fixed inside it, keep theirs. */
#menu-container main {
  transition: background-color 0.2s, border-top-color 0.2s;
}
.menu__card {
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}
#menu-container main.menu--placing {
  background-color: transparent;
  border-top-color: transparent;
  pointer-events: none;
}
#menu-container main.menu--placing > * {
  pointer-events: auto;
}
#menu-container main.menu--placing .menu__card {
  animation: none;
  transform: translateY(105%);
  opacity: 0;
  pointer-events: none;
}
#menu-container main.menu--placing .placement-controls {
  bottom: 44px;
}

/* the command card while a tower is selected: a gold line along its top
   ties the card to the lit tower */
#menu-container main.menu--tower {
  border-top-color: rgba(244, 193, 79, 0.55);
  box-shadow: 0 -1px 0 rgba(244, 193, 79, 0.25), 0 -12px 28px rgba(0, 0, 0, 0.35);
}

/* ---------- small screens ---------- */

@media (max-width: 900px) {
  :root {
    --card-height: 150px;
  }
  .menu__stats {
    padding: 6px 12px;
  }
  .menu__stats h1 {
    font-size: 15px;
    margin: 2px 0 6px;
  }
  .menu__stats .menu__stats-container {
    font-size: 12px;
  }
  .menu__window {
    padding: 4px;
  }
  .menu__window-stats {
    font-size: 12px;
  }
  /* small screens split the controls: fullscreen and Start Attack stay
     at the top, out of thumb range, so they aren't hit by accident;
     stats and playback speed sit just above the command card. The
     desktop wrappers dissolve so each piece positions on its own. */
  .menu__topright,
  .phase-group {
    display: contents;
  }
  .menu__fullscreen,
  .phase-banner,
  .menu__hud,
  .phase-speeds {
    position: fixed;
    z-index: 5;
  }
  .menu__fullscreen {
    top: 8px;
    left: 8px;
    font-size: 14px;
    padding: 6px 9px;
  }
  /* the graphics gear under the weather row, in the left column */
  .menu__settings {
    position: fixed;
    top: 84px;
    left: 8px;
    font-size: 14px;
    padding: 6px 9px;
    z-index: 5;
  }
  :fullscreen .menu__settings {
    top: 124px;
  }
  .phase-banner {
    top: 8px;
    right: 8px;
    font-size: 13px;
    padding: 6px 12px;
  }
  :fullscreen .menu__fullscreen,
  :fullscreen .phase-banner {
    top: 48px;
  }
  /* the weather under the fullscreen and account chips */
  .menu__weather {
    top: 46px;
    left: 8px;
    right: auto;
  }
  .menu__weather-button {
    font-size: 14px;
    padding: 6px 9px;
  }
  :fullscreen .menu__weather {
    top: 86px;
  }
  .account-chip {
    left: 46px;
    gap: 8px;
    padding: 6px 9px;
    font-size: 12px;
  }
  .account-chip__name {
    max-width: 96px;
  }
  .menu__hud {
    bottom: 158px;
    left: 8px;
    font-size: 12px;
    padding: 5px 10px;
    gap: 9px;
  }
  .phase-speeds {
    bottom: 158px;
    right: 8px;
    gap: 5px;
  }
  .phase-chip {
    font-size: 12px;
    padding: 5px 9px;
  }
  .game-over {
    font-size: 40px;
  }
  .countdown__number {
    font-size: 120px;
  }
  .countdown--go .countdown__number {
    font-size: 84px;
  }
  .round-summary__panel {
    gap: 10px;
    padding: 14px 16px 16px;
  }
  .round-summary__title {
    font-size: 24px;
  }
  .round-summary__columns {
    gap: 0 16px;
  }
  .round-summary__value {
    font-size: 22px;
  }
  .round-summary__lives-count {
    font-size: 32px;
  }
  .placement-controls {
    bottom: 215px;
  }
  .placement-controls button {
    width: 56px;
    height: 56px;
  }
  .placement-controls button::before {
    inset: -16px;
  }
  .arrow-window__pad {
    grid-template-columns: repeat(3, 52px);
    grid-template-rows: repeat(3, 52px);
  }
  .horde-sheet {
    padding: 10px 10px 12px;
    gap: 10px;
  }
  .horde-sheet__unit {
    width: 64px;
    height: 64px;
  }
}
/* phones in portrait: no room for stats; the portrait takes what the
   command grid leaves, and the grid gives up square cells only when
   even that would not fit */
@media (max-width: 600px) {
  .menu__stats {
    display: none;
  }
  .menu__window {
    flex: 1 1 auto;
    width: auto;
  }
  .menu__window .menu__window-caption {
    display: block;
  }
  .menu__options {
    max-width: 65vw;
    flex-shrink: 1;
  }
  /* ten slots in one row get too small to tap: two rows of five */
  .horde-sheet__slots {
    grid-template-columns: repeat(5, 1fr);
    max-width: 320px;
    width: 100%;
    margin: 0 auto;
  }
  .horde-sheet__actions button {
    flex: 1;
  }
}

/* ---------- graphics settings and the performance overlay ---------- */

/* the panel the gear opens (menu/GraphicsSettings.jsx): under the top
   bar on the right, over the weather buttons */
.settings-panel {
  position: fixed;
  top: 48px;
  right: 16px;
  width: 340px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 10px 12px 12px;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 12;
}
:fullscreen .settings-panel {
  top: 88px;
}
.settings-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold);
}
.settings-panel__close {
  padding: 2px 6px;
  font: inherit;
  color: var(--text-dim);
  background: none;
  border: none;
  cursor: pointer;
}
.settings-panel__close:hover {
  color: white;
}
.settings-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--border);
}
.settings-panel__label {
  flex: 1;
  color: var(--text);
}
.settings-panel__choices {
  display: flex;
  gap: 4px;
  align-items: center;
}
.settings-panel__choice {
  min-width: 44px;
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.settings-panel__choice:hover {
  color: white;
  border-color: var(--gold);
}
.settings-panel__choice--on {
  color: #1a1408;
  background: var(--gold);
  border-color: var(--gold);
}
.settings-panel__custom {
  padding: 0 4px;
  font-size: 12px;
  color: var(--text-dim);
}
.settings-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.settings-panel__note {
  font-size: 11px;
  color: var(--text-dim);
}
.settings-panel__reset {
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}
.settings-panel__reset:hover {
  color: white;
  border-color: var(--gold);
}

/* the frame stats (devtools/PerfOverlay.js): a few lines of text under
   the account chip, never in the way of a tap */
.perf-overlay {
  position: fixed;
  top: 48px;
  left: 16px;
  margin: 0;
  padding: 6px 8px;
  font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
  color: #d8e4c8;
  background: rgba(10, 12, 16, 0.78);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  pointer-events: none;
  white-space: pre;
  /* no z-index: it stands before the menu's container in the page, so
     everything of the menu paints over it */
}
:fullscreen .perf-overlay {
  top: 88px;
}

/* on a phone the panel spans the screen under the gear, and the stats
   stand beside the gear, clear of the weather row */
@media (max-width: 900px) {
  .settings-panel {
    top: 124px;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100vh - 136px);
  }
  :fullscreen .settings-panel {
    top: 164px;
  }
  .perf-overlay {
    top: 84px;
    left: 48px;
  }
  :fullscreen .perf-overlay {
    top: 124px;
  }
  /* while the stats show, the panel starts under them, so the frame
     rate can be watched as a setting changes */
  body:has(.perf-overlay) .settings-panel {
    top: 196px;
    max-height: calc(100vh - 208px);
  }
  :fullscreen body:has(.perf-overlay) .settings-panel {
    top: 236px;
  }
}