/* MONSTER BRAWLER: TOKYO '97 — game shell.
 *
 * Visual language is taken from assets/art/keyart-titled.png: crushed blacks, a molten orange key
 * (#ffb45c highlight, #ff6a18 hot), cold cyan fill (#1fd4ff), heavy letter-spaced monospace, and
 * hard rectangular frames with thin rules rather than rounded cards. Nothing here is decorative
 * for its own sake — every accent colour means "this is the thing you are pointing at".
 */

:root {
  --ink: #05070a;
  --ink-2: #0a0d13;
  --paper: #e8eef8;
  --paper-dim: #8b96a8;
  --amber: #ffb45c;
  --amber-hot: #ff6a18;
  --cyan: #1fd4ff;
  --red: #ff5a4a;
  --green: #7ce08a;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --frame: rgba(255, 180, 92, 0.22);
  --frame-lit: rgba(255, 180, 92, 0.85);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

#stage { position: fixed; inset: 0; z-index: 0; touch-action: none; }
#stage canvas { display: block; width: 100%; height: 100%; }

/* ── shell root ─────────────────────────────────────────────────────────── */

#ui {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
}
#ui.active { display: block; }

#backdrop {
  position: absolute;
  inset: 0;
  background: #05070a center/cover no-repeat;
  transition: opacity .45s ease, background-image .1s;
  opacity: 1;
}
#backdrop.dim { opacity: .34; }
#backdrop.hidden { opacity: 0; }

/* Grain + scanline + vignette. Sells "1997 broadcast" and hides PNG banding. */
#grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 30%, rgba(0,0,0,.78) 100%);
  mix-blend-mode: multiply;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  padding: clamp(20px, 4vh, 48px) clamp(22px, 5vw, 84px);
  animation: screen-in .22s ease-out;
}
.screen.active { display: flex; flex-direction: column; }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── shared type ────────────────────────────────────────────────────────── */

.eyebrow {
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: .85;
}
.screen-title {
  margin: 4px 0 2px;
  font-size: clamp(24px, 3.4vw, 46px);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 26px rgba(255, 106, 24, .5), 0 3px 0 rgba(0,0,0,.6);
}
.screen-sub {
  color: var(--paper-dim);
  font-size: clamp(11px, 1.15vw, 14px);
  letter-spacing: .1em;
  max-width: 62ch;
}
.rule {
  height: 1px;
  background: linear-gradient(to right, var(--frame-lit), rgba(255,180,92,0) 70%);
  margin: 14px 0 18px;
}

.screen-head { flex: 0 0 auto; }
.screen-body { flex: 1 1 auto; min-height: 0; display: flex; }
.screen-foot {
  flex: 0 0 auto;
  padding-top: 14px;
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--paper-dim);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hint b {
  color: var(--ink);
  background: var(--amber);
  padding: 1px 6px;
  margin-right: 6px;
  font-weight: 700;
  letter-spacing: .08em;
}
.hint.pad b { background: var(--cyan); }

/* ── TITLE ──────────────────────────────────────────────────────────────── */

#screen-title { justify-content: center; }
#screen-title .wrap { max-width: min(52ch, 54vw); }

.logo {
  font-size: clamp(38px, 6.6vw, 104px);
  line-height: .94;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, #ffc27a 42%, #ff6a18 74%, #8d2c00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 106, 24, .45));
}
.logo-sub {
  margin-top: 10px;
  font-size: clamp(12px, 1.5vw, 19px);
  letter-spacing: .72em;
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(31, 212, 255, .55);
}
.logo-kana {
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .5em;
  color: rgba(255,180,92,.6);
  margin-bottom: 12px;
}

/* ── menu list ──────────────────────────────────────────────────────────── */

.menu-list { list-style: none; margin: 30px 0 0; padding: 0; }
.menu-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 16px 11px 22px;
  font-size: clamp(15px, 1.7vw, 22px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--paper-dim);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: color .12s, background .12s, border-color .12s, padding-left .12s;
}
.menu-item .note {
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(139,150,168,.7);
  text-transform: none;
}
.menu-item.is-focus {
  color: #fff;
  border-left-color: var(--amber-hot);
  background: linear-gradient(to right, rgba(255,106,24,.20), rgba(255,106,24,0) 62%);
  padding-left: 30px;
  text-shadow: 0 0 18px rgba(255,140,50,.6);
}
.menu-item.is-focus::after {
  content: "◂";
  position: absolute;
  left: 8px;
  color: var(--amber-hot);
  animation: blink 1.1s steps(2) infinite;
  transform: scaleX(-1);
}
.menu-item.disabled { opacity: .34; cursor: default; }

@keyframes blink { 50% { opacity: .25; } }

/* ── MONSTER SELECT ─────────────────────────────────────────────────────── */

#screen-monster .screen-body { gap: clamp(18px, 2.5vw, 40px); align-items: stretch; }

.roster {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(8px, 1vw, 16px);
  align-content: start;
  flex: 1 1 58%;
  min-width: 0;
}
.card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--frame);
  background: #06080c center/cover no-repeat;
  filter: grayscale(.65) brightness(.55) contrast(1.05);
  transition: filter .16s, border-color .16s, transform .16s;
}
.card .name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 9px 9px;
  font-size: clamp(10px, .95vw, 14px);
  font-weight: 700;
  letter-spacing: .18em;
  background: linear-gradient(to top, rgba(3,5,8,.95), rgba(3,5,8,0));
}
.card .idx {
  position: absolute;
  top: 6px; left: 8px;
  font-size: 10px;
  letter-spacing: .2em;
  color: rgba(255,180,92,.55);
}
.card.is-focus {
  filter: none;
  border-color: var(--frame-lit);
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(255,106,24,.5), 0 14px 40px rgba(0,0,0,.7), 0 0 44px rgba(255,106,24,.28);
}
.card.is-focus .name { color: var(--amber); }

.detail {
  flex: 1 1 42%;
  min-width: 0;
  border-left: 1px solid var(--frame);
  padding-left: clamp(14px, 2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.detail .dname {
  font-size: clamp(22px, 2.6vw, 38px);
  font-weight: 800;
  letter-spacing: .16em;
  color: #fff;
}
.detail .dtag { color: var(--amber); font-size: 12px; letter-spacing: .1em; }

.statlist { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 2px; }
.stat { display: grid; grid-template-columns: 8ch 1fr 4ch; gap: 10px; align-items: center; font-size: 11px; letter-spacing: .12em; color: var(--paper-dim); }
.bar { height: 6px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.06); }
.bar > i { display: block; height: 100%; background: linear-gradient(to right, var(--amber-hot), var(--amber)); }
.stat .val { text-align: right; color: var(--paper); }

.abilities { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ability {
  border-left: 2px solid rgba(31,212,255,.5);
  padding: 4px 0 4px 10px;
}
.ability .an { font-size: 12px; letter-spacing: .16em; color: var(--cyan); }
.ability .ad { font-size: 11px; color: var(--paper-dim); letter-spacing: .04em; line-height: 1.5; }
.ability .acd { font-size: 10px; color: rgba(255,180,92,.75); letter-spacing: .14em; }

/* ── MODE SELECT ────────────────────────────────────────────────────────── */

.mode-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 22px); width: 100%; align-content: center; }
.mode {
  position: relative;
  min-height: clamp(220px, 42vh, 460px);
  border: 1px solid var(--frame);
  background: #06080c center/cover no-repeat;
  cursor: pointer;
  overflow: hidden;
  filter: grayscale(.6) brightness(.5);
  transition: filter .18s, border-color .18s, transform .18s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.mode .inner {
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(3,5,8,.96) 30%, rgba(3,5,8,0));
}
.mode .mname { font-size: clamp(18px, 2.2vw, 30px); font-weight: 800; letter-spacing: .24em; }
.mode .mcount { font-size: 11px; letter-spacing: .24em; color: var(--amber); margin: 4px 0 6px; }
.mode .mtag { font-size: 11px; line-height: 1.6; color: var(--paper-dim); }
.mode.is-focus { filter: none; border-color: var(--frame-lit); transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(255,106,24,.5), 0 18px 50px rgba(0,0,0,.75); }
.mode.is-focus .mname { color: var(--amber); text-shadow: 0 0 20px rgba(255,106,24,.6); }

/* ── TIME OF DAY ────────────────────────────────────────────────────────── */

.time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 22px); width: 100%; align-content: center; }
.tod {
  position: relative;
  min-height: clamp(180px, 34vh, 360px);
  border: 1px solid var(--frame);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  filter: brightness(.62) saturate(.8);
  transition: filter .18s, border-color .18s, transform .18s;
}
.tod .sky { position: absolute; inset: 0; }
.tod .skyline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: #05070a;
  -webkit-mask-image: var(--city);
  mask-image: var(--city);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.tod .inner { position: relative; padding: 14px 16px; background: linear-gradient(to top, rgba(3,5,8,.94), rgba(3,5,8,0)); }
.tod .tname { font-size: clamp(15px, 1.6vw, 22px); font-weight: 800; letter-spacing: .26em; }
.tod .ttag { font-size: 10px; letter-spacing: .16em; color: var(--paper-dim); margin-top: 3px; }
.tod.is-focus { filter: none; border-color: var(--frame-lit); transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(255,106,24,.5), 0 18px 50px rgba(0,0,0,.75); }
.tod.is-focus .tname { color: var(--amber); }

/* ── LOADING ────────────────────────────────────────────────────────────── */

#screen-loading { justify-content: flex-end; }
#screen-loading .wrap { max-width: 62ch; }
.loadbar {
  margin-top: 16px;
  height: 3px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
}
.loadbar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--amber-hot), var(--amber));
  box-shadow: 0 0 18px rgba(255,140,50,.8);
  transition: width .25s ease-out;
}
.loadlabel { margin-top: 10px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--amber); }
.loadpct { float: right; color: var(--paper-dim); }
.loadtip { margin-top: 22px; font-size: 11px; line-height: 1.7; color: var(--paper-dim); letter-spacing: .06em; max-width: 60ch; }

/* ── PAUSE / SETTINGS / dialog screens ──────────────────────────────────── */

.dialog-screen { background: rgba(3,5,9,.72); backdrop-filter: blur(7px); justify-content: center; align-items: flex-start; }
.dialog {
  width: min(680px, 92vw);
  border: 1px solid var(--frame);
  background: linear-gradient(180deg, rgba(10,13,19,.96), rgba(5,7,10,.96));
  padding: clamp(18px, 3vh, 34px) clamp(20px, 3vw, 40px);
  box-shadow: 0 30px 90px rgba(0,0,0,.8);
}

.settings-list { list-style: none; margin: 18px 0 0; padding: 0; }
.setting {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 10px 14px 10px 20px;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.setting .label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim); }
.setting .value { font-size: 13px; letter-spacing: .18em; color: var(--paper); min-width: 16ch; text-align: right; }
.setting .value .arrow { color: rgba(255,180,92,.35); padding: 0 8px; }
.setting.is-focus { background: linear-gradient(to right, rgba(255,106,24,.16), rgba(255,106,24,0) 70%); border-left-color: var(--amber-hot); }
.setting.is-focus .label { color: #fff; }
.setting.is-focus .value { color: var(--amber); }
.setting.is-focus .value .arrow { color: var(--amber); }
.setting .note { grid-column: 1 / -1; font-size: 10px; letter-spacing: .1em; color: rgba(139,150,168,.65); text-transform: none; }

/* ── RESULTS ────────────────────────────────────────────────────────────── */

#screen-results .screen-body { gap: clamp(18px, 3vw, 46px); }
.verdict { flex: 0 0 34%; display: flex; flex-direction: column; justify-content: center; }
.place {
  font-size: clamp(52px, 9vw, 140px);
  line-height: .9;
  font-weight: 800;
  letter-spacing: .02em;
  background: linear-gradient(180deg, #fff, #ffb45c 55%, #ff6a18);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 34px rgba(255,106,24,.5));
}
.place-sub { font-size: 13px; letter-spacing: .34em; color: var(--amber); text-transform: uppercase; }
.finalscore { margin-top: 20px; font-size: clamp(26px, 3.4vw, 46px); font-weight: 800; letter-spacing: .1em; color: #fff; }
.finalscore span { font-size: 12px; letter-spacing: .3em; color: var(--paper-dim); display: block; }

.scoretable { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; justify-content: center; min-width: 0; }
.row {
  display: grid;
  grid-template-columns: 3ch 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.row.me { border-color: var(--frame-lit); background: linear-gradient(to right, rgba(255,106,24,.14), rgba(255,106,24,0)); }
.row .pl { color: var(--amber); font-weight: 700; letter-spacing: .1em; }
.row .nm { letter-spacing: .2em; font-size: 14px; }
.row .nm em { font-style: normal; font-size: 10px; letter-spacing: .2em; color: var(--paper-dim); margin-left: 10px; }
.row .sc { font-size: 16px; font-weight: 700; letter-spacing: .08em; }
.row .sc.pending { font-size: 10px; color: rgba(139,150,168,.7); letter-spacing: .18em; font-weight: 400; }

.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.summary div { border-top: 1px solid var(--frame); padding-top: 8px; }
.summary .k { display: block; font-size: 10px; letter-spacing: .22em; color: var(--paper-dim); text-transform: uppercase; }
.summary .v { font-size: clamp(16px, 1.9vw, 24px); font-weight: 700; color: #fff; }

/* ── CONTROLS ───────────────────────────────────────────────────────────── */

.ctrl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 54px); width: 100%; align-content: start; }
.ctrl-cols h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: .32em; color: var(--amber); text-transform: uppercase; font-weight: 700; }
.ctrl-row { display: grid; grid-template-columns: 12ch 1fr; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 12px; }
.ctrl-row .b { color: var(--cyan); letter-spacing: .1em; }
.ctrl-row .d { color: var(--paper-dim); letter-spacing: .05em; }

/* ══ HUD ═══════════════════════════════════════════════════════════════════ */

#hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  display: none;
  font-size: 12px;
}
#hud.active { display: block; }
#hud .corner { position: absolute; }

/* timer */
.hud-timer { top: 14px; left: 50%; transform: translateX(-50%); text-align: center; }
.hud-clock {
  font-size: clamp(26px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 2px 10px #000, 0 0 26px rgba(255,140,50,.35);
  font-variant-numeric: tabular-nums;
}
.hud-clock.warn { color: var(--amber); }
.hud-clock.crit { color: var(--red); animation: pulse .9s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.hud-mode { font-size: 10px; letter-spacing: .4em; color: var(--amber); text-transform: uppercase; text-shadow: 0 1px 6px #000; }
.hud-timerbar { width: clamp(150px, 18vw, 260px); height: 2px; margin: 5px auto 0; background: rgba(255,255,255,.14); }
.hud-timerbar > i { display: block; height: 100%; background: var(--amber); box-shadow: 0 0 10px rgba(255,140,50,.8); }

/* score */
.hud-score { top: 14px; left: 18px; }
.hud-score .lab { font-size: 10px; letter-spacing: .36em; color: var(--amber); text-shadow: 0 1px 4px #000; }
.hud-score .val {
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 800;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px #000, 0 0 22px rgba(255,140,50,.3);
}
.hud-combo {
  margin-top: 2px;
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--amber-hot);
  text-shadow: 0 0 16px rgba(255,106,24,.8), 0 2px 4px #000;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .12s, transform .12s;
}
.hud-combo.on { opacity: 1; transform: none; }

/* rival board */
.hud-board { top: 14px; right: 18px; min-width: 200px; text-align: right; }
.hud-board .lab { font-size: 10px; letter-spacing: .3em; color: var(--amber); text-shadow: 0 1px 4px #000; }
.hud-board .lab .off { color: rgba(139,150,168,.8); letter-spacing: .14em; }
.hud-board ol { list-style: none; margin: 6px 0 0; padding: 0; }
.hud-board li {
  display: grid;
  grid-template-columns: 2ch 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 3px 6px;
  font-size: 11px;
  letter-spacing: .12em;
  background: rgba(4,6,10,.5);
  border-right: 2px solid transparent;
  text-shadow: 0 1px 3px #000;
}
.hud-board li + li { margin-top: 2px; }
.hud-board li.me { border-right-color: var(--amber-hot); background: rgba(255,106,24,.14); }
.hud-board li .s { font-variant-numeric: tabular-nums; font-weight: 700; }
.hud-board li .s.pending { color: rgba(139,150,168,.75); font-weight: 400; font-size: 10px; }

/* destruction */
.hud-destruction { bottom: 16px; left: 18px; width: clamp(180px, 20vw, 280px); }
.hud-destruction .lab { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .26em; color: var(--amber); text-shadow: 0 1px 4px #000; }
.hud-destruction .pct { color: #fff; font-weight: 700; }
.hud-destruction .track { height: 8px; margin-top: 5px; background: rgba(4,6,10,.66); border: 1px solid rgba(255,180,92,.25); }
.hud-destruction .track > i { display: block; height: 100%; width: 0; background: linear-gradient(to right, var(--amber-hot), var(--amber)); box-shadow: 0 0 14px rgba(255,140,50,.7); transition: width .2s; }
.hud-destruction .sub { margin-top: 4px; font-size: 10px; letter-spacing: .16em; color: var(--paper-dim); text-shadow: 0 1px 3px #000; }

/* minimap — bottom right, opposite the destruction meter */
.hud-map { bottom: 16px; right: 18px; }
.hud-map[hidden] { display: none; }
.hud-mapcanvas {
  display: block;
  border: 1px solid rgba(255,180,92,.3);
  background: rgba(4,6,10,.8);
  box-shadow: 0 6px 22px rgba(0,0,0,.55);
  image-rendering: auto;
}
.hud-map .lab {
  margin-top: 4px; text-align: right;
  font-size: 10px; letter-spacing: .3em; color: var(--amber); text-shadow: 0 1px 4px #000;
}

/* abilities */
.hud-abilities { bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; }
.slot { width: clamp(58px, 5.4vw, 76px); text-align: center; }
.slot .disc {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid rgba(255,180,92,.3);
  background: rgba(4,6,10,.66);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.slot .disc .key { font-size: clamp(13px, 1.4vw, 17px); font-weight: 800; letter-spacing: .06em; color: var(--paper-dim); position: relative; z-index: 2; }
.slot .disc .sweep { position: absolute; inset: 0; background: conic-gradient(rgba(255,106,24,.34) var(--f, 0deg), rgba(0,0,0,.62) 0); }
.slot .disc .cd { position: absolute; bottom: 2px; right: 3px; font-size: 9px; color: var(--amber); z-index: 2; font-variant-numeric: tabular-nums; }
/* Ability names are two words ("Atomic Breath", "Plate Slam", "Roar Quake") and do not fit a
   68px slot on one line. nowrap + ellipsis turned them into "ATOMIC _" and "PLATE S_", which
   tells the player nothing. Wrap to two lines instead — the disc row stays the same height
   because the labels sit under it. */
.slot .an {
  margin-top: 4px; font-size: 9px; letter-spacing: .08em; line-height: 1.25;
  color: var(--paper-dim); text-transform: uppercase; text-shadow: 0 1px 3px #000;
  white-space: normal; overflow-wrap: break-word; hyphens: none;
  min-height: 2.5em;            /* reserve both lines so one-line names do not shift the row */
}
.slot.ready .disc { border-color: rgba(255,180,92,.85); box-shadow: 0 0 18px rgba(255,106,24,.28) inset; }
.slot.ready .disc .key { color: #fff; }
.slot.ready .an { color: var(--amber); }
.slot.fired { animation: fired .4s ease-out; }
@keyframes fired { from { transform: scale(1.22); filter: brightness(2.2); } to { transform: none; } }

/* prompt + banner + debug */
.hud-prompt {
  left: 50%; bottom: 22%; transform: translateX(-50%);
  padding: 7px 14px;
  border: 1px solid rgba(255,200,120,.45);
  background: rgba(5,8,13,.72);
  color: #ffd9a0;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hud-prompt[hidden] { display: none; }
.hud-flash {
  left: 50%; top: 26%; transform: translateX(-50%);
  font-size: clamp(16px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cyan);
  text-shadow: 0 0 24px rgba(31,212,255,.7), 0 2px 6px #000;
  opacity: 0;
}
.hud-flash.on { animation: flash 1.05s ease-out; }
@keyframes flash {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.9); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -14px); }
}
.hud-debug { bottom: 14px; right: 18px; text-align: right; font-size: 10px; line-height: 1.6; color: rgba(139,150,168,.85); letter-spacing: .1em; text-shadow: 0 1px 3px #000; white-space: pre; }

/* score popups (world-space, projected) */
#pops { position: fixed; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.pop {
  position: absolute;
  font: 800 15px/1 var(--mono);
  color: #ffd9a0;
  text-shadow: 0 2px 6px #000, 0 0 14px rgba(255,140,40,.6);
  animation: rise 1.1s ease-out forwards;
}
@keyframes rise {
  from { opacity: 0; transform: translate(-50%, 0) scale(.7); }
  20%  { opacity: 1; transform: translate(-50%, -14px) scale(1.08); }
  to   { opacity: 0; transform: translate(-50%, -60px) scale(1); }
}

/* ── narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .roster { grid-template-columns: repeat(3, 1fr); }
  #screen-monster .screen-body { flex-direction: column; }
  .detail { border-left: 0; border-top: 1px solid var(--frame); padding-left: 0; padding-top: 14px; }
  .ctrl-cols, .summary { grid-template-columns: 1fr; }
  .hud-board { min-width: 150px; }
}

/* ── build chooser ──────────────────────────────────────────────────────────
   Shown once, before anything downloads. Styled to match the shell rather than
   look like a browser dialog — it is the first thing a player sees. */
#quality-gate {
  position: fixed; inset: 0; z-index: 200; outline: none;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #131a26 0%, #05070a 70%);
  font-family: ui-monospace, Consolas, monospace; color: var(--paper, #dfe8f4);
}
.qg-panel { width: min(760px, 90vw); text-align: center; }
.qg-eyebrow { font-size: 11px; letter-spacing: .34em; color: var(--amber, #ffb45c); }
#quality-gate h1 { margin: 10px 0 6px; font-size: clamp(26px, 5vw, 44px); letter-spacing: .06em; }
.qg-sub { margin: 0 auto 26px; max-width: 54ch; font-size: 12px; line-height: 1.7;
  color: var(--paper-dim, #8b96a8); }
.qg-sub code { color: var(--amber, #ffb45c); }
.qg-options { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
#quality-gate button {
  flex: 1 1 260px; max-width: 320px; cursor: pointer; text-align: left;
  display: grid; gap: 6px; padding: 20px 22px;
  background: rgba(8, 12, 18, .8); color: inherit; font: inherit;
  border: 1px solid rgba(255, 180, 92, .28); border-radius: 4px;
  transition: border-color .15s, background .15s, transform .15s;
}
#quality-gate button:hover, #quality-gate button:focus {
  border-color: var(--amber, #ffb45c); background: rgba(255, 140, 50, .12);
  transform: translateY(-2px); outline: none;
}
.qg-name { font-size: 18px; letter-spacing: .22em; color: var(--amber, #ffb45c); }
.qg-size { font-size: 22px; font-weight: 700; }
.qg-note { font-size: 11px; line-height: 1.6; color: var(--paper-dim, #8b96a8); }
@media (max-width: 560px) { .qg-options { flex-direction: column; } }

/* ── touch controls ─────────────────────────────────────────────────────────
   The stick stays visible during play, then follows the thumb while steering. */
#touch-ui { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
#touch-ui[hidden] { display: none; }

.tc-stick {
  position: absolute; width: 0; height: 0;
  left: calc(78px + env(safe-area-inset-left));
  bottom: calc(92px + env(safe-area-inset-bottom));
}
.tc-base, .tc-knob {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
}
.tc-base {
  width: 132px; height: 132px;
  border: 1px solid rgba(255, 180, 92, .38);
  background: radial-gradient(circle, rgba(255,140,50,.12), rgba(4,6,10,.42) 70%);
}
.tc-knob {
  width: 58px; height: 58px;
  border: 1px solid rgba(255, 180, 92, .85);
  background: rgba(255, 140, 50, .30);
  box-shadow: 0 0 22px rgba(255, 140, 50, .45);
}

.tc-buttons {
  position: absolute; right: 12px; bottom: 12px;
  display: grid; grid-template-columns: repeat(3, auto); gap: 9px;
  justify-items: end; pointer-events: none;
}
.tc-btn {
  pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent;
  width: 62px; height: 62px; border-radius: 50%;
  font: 700 10px/1 var(--mono); letter-spacing: .1em;
  color: var(--amber); background: rgba(6, 9, 14, .72);
  border: 1px solid rgba(255, 180, 92, .45);
}
.tc-btn.is-down { background: rgba(255, 106, 24, .38); color: #fff; transform: scale(.94); }
.tc-btn.tb-heavy { width: 76px; height: 76px; border-color: rgba(255,106,24,.7); }
.tc-btn.tb-ab { width: 50px; height: 50px; font-size: 12px; }

@media (max-width: 360px) {
  .tc-buttons { grid-template-columns: repeat(2, auto); }
}

/* ── phone-sized HUD ────────────────────────────────────────────────────────
   The HUD was laid out for a 1080p desktop window: at 390px wide the clock,
   score race, destruction meter and minimap covered most of the screen and left
   almost nothing to look at. Everything shrinks and the minimap gets out of the
   way of the action buttons. */
@media (max-width: 820px), (pointer: coarse) {
  .hud-clock { font-size: 22px; }
  .hud-mode { font-size: 9px; }
  .hud-timer { top: 8px; left: 10px; }
  .hud-score { top: 8px; left: 50%; transform: translateX(-50%); text-align: center; }
  .hud-score .val { font-size: 20px; }
  .hud-score .lab, .hud-board .lab, .hud-destruction .lab { font-size: 8px; letter-spacing: .18em; }
  .hud-board { top: 8px; right: 10px; min-width: 0; font-size: 9px; }
  .hud-board li { padding: 1px 5px; gap: 6px; }
  .hud-destruction { bottom: 8px; left: 10px; width: 40vw; max-width: 210px; }
  .hud-destruction .sub { font-size: 8px; }
  .hud-abilities { display: none; }   /* the touch buttons already carry the abilities */
  .hud-map { bottom: 96px; right: 10px; }
  .hud-mapcanvas { width: 92px !important; height: 92px !important; }
  .hud-prompt { font-size: 10px; bottom: 92px; }
  .hud-debug { font-size: 8px; }
}