/* RPS GRID — NEON, after Crown Run. A screen, not a lit table: near-black
   ground, inks that read as lit from inside, one green that only ever means
   "you can act here", amber for a thing about to be wasted. Your pieces are
   filled; everyone else's are hollow. */

@font-face { font-family: "Space Grotesk"; font-weight: 400; src: url(/fonts/space-grotesk-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; font-weight: 500; src: url(/fonts/space-grotesk-500.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; font-weight: 700; src: url(/fonts/space-grotesk-700.woff2) format("woff2"); font-display: swap; }

:root {
  --ground: #05050c;
  --panel: #0a0a16;
  --panel-2: #15152b;
  --ink: #eaf2ff;
  --dim: #7b83a8;
  --rule: #0a0a16;
  --rule-soft: #26264d;
  --tile: #1b1b36;
  --tile-2: #181832;
  --edge: #05050c;
  --act: #2bff9b;
  --act-ink: #04140c;
  --warn: #ffd23d;
  --danger: #ff2e88;
  --font: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --stripe-dead: #15152b;
  --stripe-next: #5a4a1c;
  --radius: 14px;
  color-scheme: dark;
}

/* CONVERT mode is the same screen inverted: paper-white ground, dark ink, so
   the two rule sets can never be mistaken for each other at a glance. */
:root[data-mode="convert"] {
  --ground: #eef0f8;
  --panel: #ffffff;
  --panel-2: #e3e7f4;
  --ink: #0a0a16;
  --dim: #5a6285;
  --rule: #ffffff;
  --rule-soft: #c6cde3;
  --tile: #d6dcef;
  --tile-2: #dde2f2;
  --edge: #ffffff;
  --act: #14b86a;
  --act-ink: #ffffff;
  --warn: #c98f00;
  --danger: #e0186f;
  --stripe-dead: #cfd4e6;
  --stripe-next: #e0c25a;
  color-scheme: light;
}
:root[data-mode="convert"] .wordmark span { text-shadow: 0 0 10px rgba(20, 184, 106, 0.5); }
:root[data-mode="convert"] .bigcode { text-shadow: none; }
:root[data-mode="convert"] .banner h2 { text-shadow: none; }
:root[data-mode="convert"] .cell.dead { fill: url(#deadstripe); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--ink); }
body { font: 15px/1.4 var(--font); overscroll-behavior: none; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--ink); }

.boot { padding: 40vh 0; text-align: center; letter-spacing: 0.4em; color: var(--dim); }

/* ── the stage: one 10:16 rectangle for everyone ─────────────────────────── */

#app { min-height: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 16px; }
.stage {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--ground);
}
@media (min-width: 700px) {
  #app { padding: 20px; align-items: center; min-height: 100vh; }
  .stage {
    width: min(430px, calc((100vh - 40px) * 10 / 16));
    min-height: min(688px, calc(100vh - 40px));
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 0 0 1px var(--rule-soft);
  }
  .rail { display: flex; }
}

.rail { flex-direction: column; gap: 10px; width: 290px; max-height: calc(100vh - 40px); overflow: auto; color: var(--dim); font-size: 13px; }
@media (max-width: 699px) { .rail { display: none; } }
.rail h3 { margin: 0 0 8px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.rail .card { background: var(--panel); }
.rail .logline { padding: 4px 0; border-bottom: 1px solid var(--panel-2); }
.rail .logline b { color: var(--ink); font-weight: 500; }

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

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: 0.01em; }
.wordmark { font-weight: 500; letter-spacing: 0.1em; font-size: 22px; text-transform: uppercase; }
.wordmark span { color: var(--act); text-shadow: 0 0 18px var(--act); font-family: var(--mono); font-weight: 700; margin-left: 6px; }
.lede { color: var(--dim); margin: 6px 0 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.small { font-size: 13px; }
.label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 500; }

/* ── chrome ───────────────────────────────────────────────────────────────── */

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.topbar .wordmark { flex: 1; text-align: center; }
.chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1.5px solid var(--rule-soft);
  font-size: 13px; line-height: 1; white-space: nowrap;
}
.chip.warn { border-color: var(--warn); color: var(--warn); }
.chip.act { border-color: var(--act); color: var(--act); }

.card { background: var(--panel-2); border: 1.5px solid var(--rule-soft); border-radius: var(--radius); padding: 14px; }
.stage > .card, .stage .stack > .card { background: var(--panel); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.spread { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }

button {
  appearance: none; cursor: pointer;
  border: 1.5px solid var(--rule-soft); border-radius: var(--radius);
  background: var(--panel-2); color: var(--ink);
  padding: 0 16px; min-height: 46px; font-weight: 500; letter-spacing: 0.01em;
}
button:disabled, button.primary:disabled { background: var(--panel-2); color: var(--dim); border-color: var(--rule-soft); cursor: default; box-shadow: none; }
button.primary { background: var(--act); color: var(--act-ink); border-color: var(--act); font-weight: 700; width: 100%; min-height: 52px; font-size: 16px; box-shadow: 0 0 22px -4px var(--act); }
button.primary.sent { background: var(--panel-2); color: var(--act); border-color: var(--act); box-shadow: 0 0 14px -6px var(--act); }
button.quiet { background: transparent; border-color: transparent; }
button.icon { width: 44px; min-height: 44px; padding: 0; font-size: 18px; line-height: 1; border-radius: 50%; background: var(--panel-2); border-color: transparent; }
button.seg { border-radius: 0; flex: 1; min-height: 40px; padding: 0 8px; font-size: 13px; }
.segs { display: flex; }
.segs .seg:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.segs .seg:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.segs .seg.on { background: var(--act); color: var(--act-ink); border-color: var(--act); }

input[type="text"] { width: 100%; min-height: 46px; padding: 0 12px; border: 1.5px solid var(--rule-soft); border-radius: var(--radius); background: var(--panel-2); color: var(--ink); }
input[type="text"]:focus { outline: none; border-color: var(--act); box-shadow: 0 0 14px -6px var(--act); }
input.code { letter-spacing: 0.3em; text-transform: uppercase; font-family: var(--mono); font-size: 18px; }

.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.swatch { width: 28px; height: 28px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #05050c; }
:root[data-mode="convert"] .swatch { color: #ffffff; }
.players .row { min-height: 40px; }
.players .you { color: var(--act); font-size: 12px; }
.players .off { color: var(--dim); font-size: 12px; }
.bigcode { font-family: var(--mono); font-size: 40px; letter-spacing: 0.25em; font-weight: 700; color: var(--act); text-shadow: 0 0 22px var(--act); }

/* ── your pieces, as chips above the board ────────────────────────────────── */

.pieces { display: flex; gap: 6px; margin-top: 6px; }
.piece {
  flex: 1; min-height: 56px; padding: 6px 4px 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--panel-2); border: 1.5px solid var(--rule-soft); border-radius: 12px;
}
.piece svg { width: 22px; height: 22px; overflow: visible; }
.piece .pname { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); font-weight: 500; line-height: 1; }
.piece.on { border-color: var(--act); box-shadow: 0 0 16px -4px var(--act); }
.piece.on .pname { color: var(--ink); }
.piece.dead { opacity: 0.35; }
.piece .steps { position: absolute; }

/* budget bar */
.bar { height: 6px; border-radius: 3px; background: var(--panel-2); margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--act); box-shadow: 0 0 10px var(--act); transition: width 0.15s ease; }
.bar i.low { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.barlabel { text-align: right; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
.barlabel b { color: var(--ink); font-weight: 500; font-family: var(--mono); }

/* ── board ────────────────────────────────────────────────────────────────── */

.boardwrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; margin: 8px 0; }
svg.board {
  width: min(100%, 50vh); height: auto; touch-action: none; user-select: none; display: block;
  background: var(--panel); border: 1.5px solid var(--rule-soft); border-radius: 12px; padding: 4px;
}

.cell { fill: var(--tile); stroke: var(--panel); stroke-width: 0.05; }
.cell.alt { fill: var(--tile-2); }
.cell.dead { fill: url(#deadstripe); stroke: none; }
.cell.next { fill: url(#nextstripe); }
.cell.danger { fill: var(--danger); fill-opacity: 0.32; }
.boxring { fill: none; stroke: var(--ink); stroke-width: 0.06; stroke-dasharray: 0.16 0.12; opacity: 0.7; }
.boxmark { fill: var(--ink); font: 500 0.5px var(--font); text-anchor: middle; pointer-events: none; opacity: 0.85; }
.reach { fill: var(--act); fill-opacity: 0.18; pointer-events: none; }

.unit { transition: transform 0.3s ease; will-change: transform; filter: drop-shadow(0 0 0.14px var(--c)); }
.unit .shape { stroke: var(--c); stroke-width: 0.09; fill: var(--panel); }
.unit.mine .shape { fill: var(--c); stroke: var(--edge); stroke-width: 0.07; }
.unit.selected { filter: drop-shadow(0 0 0.22px var(--act)); }
.unit.selected .ring { stroke: var(--act); stroke-width: 0.09; fill: none; }
.unit .shield { stroke: var(--ink); stroke-width: 0.06; fill: none; stroke-dasharray: 0.22 0.12; }
.unit .seat { font: 700 0.4px var(--font); text-anchor: middle; pointer-events: none; fill: var(--c); }
.unit.mine .seat { fill: var(--ground); }
.unit.dying { transition: transform 0.3s ease, opacity 0.35s ease; opacity: 0; transform-origin: center; filter: drop-shadow(0 0 0.4px var(--danger)); }
.unit.dying .shape { fill: var(--danger) !important; stroke: var(--danger) !important; }
.unit.bump { animation: bump 0.3s ease; }
@keyframes bump { 0% { filter: brightness(1); } 40% { filter: brightness(1.8); } 100% { filter: brightness(1); } }

.strike { stroke-width: 0.16; stroke-linecap: round; stroke-dasharray: 3; stroke-dashoffset: 3; animation: strike 0.25s ease-out forwards; filter: drop-shadow(0 0 0.12px currentColor); pointer-events: none; }
@keyframes strike { to { stroke-dashoffset: 0; } }
.strikehead { fill: none; stroke-width: 0.12; animation: strikehead 0.6s ease-out 0.2s infinite alternate; pointer-events: none; }
@keyframes strikehead { from { r: 0.42; opacity: 1; } to { r: 0.52; opacity: 0.5; } }
.unit.lunge { animation: lunge 0.5s ease-out; }
@keyframes lunge { 0% { filter: brightness(1); } 25% { filter: brightness(2.2) drop-shadow(0 0 0.3px var(--c)); } 100% { filter: brightness(1); } }
.status.contact { color: var(--ink); font-weight: 700; }
.float.tag { font-size: 0.42px; animation-duration: 1.6s; }
.shock { fill: none; stroke: var(--ink); stroke-width: 0.08; transform-box: fill-box; transform-origin: center; animation: shock 0.55s ease-out forwards; pointer-events: none; }
@keyframes shock { from { transform: scale(0.2); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }

.path { fill: none; stroke-width: 0.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; pointer-events: none; filter: drop-shadow(0 0 0.12px var(--c)); }
.ghost { fill-opacity: 0.18; stroke-width: 0.05; pointer-events: none; }
.ghostnum { font: 700 0.42px var(--font); text-anchor: middle; fill: var(--ink); pointer-events: none; }

.float { font: 700 0.6px var(--font); text-anchor: middle; fill: var(--ink); stroke: var(--ground); stroke-width: 0.08; paint-order: stroke; animation: floatup 1.1s ease forwards; pointer-events: none; }
@keyframes floatup { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-1.2px); } }

.controls { display: flex; flex-direction: column; gap: 8px; }
.controls .row button { flex: 1; }
.status { min-height: 20px; color: var(--dim); font-size: 13px; text-align: center; }
.status b { color: var(--ink); font-weight: 500; }
.status.act { color: var(--act); }

/* ── drawer & toast ───────────────────────────────────────────────────────── */

.scrim { position: absolute; inset: 0; background: rgba(0, 0, 6, 0.7); border-radius: inherit; z-index: 30; }
.drawer { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 31; background: var(--panel); border: 1.5px solid var(--rule-soft); border-radius: var(--radius); padding: 14px; max-height: 80%; overflow: auto; }
.drawer ul { margin: 8px 0 0; padding-left: 18px; color: var(--dim); }
.drawer li { margin: 4px 0; }
.toast { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--ink); color: var(--ground); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; z-index: 40; white-space: nowrap; animation: toastin 2.6s ease forwards; }
@keyframes toastin { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

.banner { text-align: center; padding: 10px 0; }
.banner h2 { font-size: 26px; color: var(--act); text-shadow: 0 0 22px var(--act); }
.banner .names { color: var(--dim); }
.badge { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--rule-soft); color: var(--ink); }

/* ── beats key ────────────────────────────────────────────────────────────── */
.key { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; color: var(--dim); font-size: 12px; }
.key .pair { display: inline-flex; align-items: center; gap: 5px; }
.keyshape { width: 16px; height: 16px; fill: var(--ink); stroke: none; }