/* Hotline Wuhan — shell styling. The game itself is drawn on the canvas; this file styles the DOM
   overlays (title, draft, game over, victory, debug bar) and the optional CRT filter. */

:root {
  --mono: "Cascadia Mono", Consolas, "DejaVu Sans Mono", Menlo, "MS Gothic", monospace;
  --hanzi: "KaiTi", "STKaiti", "Kaiti SC", "DFKai-SB", "BiauKai", "Noto Serif CJK SC", "Songti SC", "SimSun", serif;
  --ink: #070308;
  --paper: #f2ead8;
  --dim: #8d8790;
  --blood: #ff1133;
  --gold: #ffd84a;
  --jade: #3dffa8;
  --line: rgba(255, 255, 255, 0.14);
  /* one unit that tracks the window, so every overlay fits from 800x450 up to 4K */
  --u: clamp(8px, min(1.25vw, 2.2vh), 22px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--u);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  outline: none;
  background: #000;
}
body.state-playing #game { cursor: none; }

/* ---- CRT: scanlines + vignette, purely cosmetic, never intercepts input ---- */
#crt {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  display: none;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.34) 100%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.16) 3px, rgba(0, 0, 0, 0) 4px);
}
body.crt #crt { display: block; }
@media (prefers-reduced-motion: no-preference) {
  body.crt #crt::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.022) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 100% 38vh;
    background-repeat: no-repeat;
    animation: crt-roll 7s linear infinite;
  }
}
@keyframes crt-roll {
  from { background-position: 0 -40vh; }
  to { background-position: 0 140vh; }
}

/* ---- shared overlay furniture ---- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 1.2em;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.dim { color: var(--dim); }
.hz, .seal, .death-glyph, .victory-glyph { font-family: var(--hanzi); }

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0.05em 0.42em;
  margin: 0 0.12em;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font: inherit;
  font-size: 0.86em;
  text-align: center;
  line-height: 1.35;
}

.btn {
  font: inherit;
  font-weight: bold;
  color: var(--paper);
  background: rgba(10, 4, 8, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.6em 1.3em;
  cursor: pointer;
  letter-spacing: 0.08em;
  transition: background 0.08s, color 0.08s, border-color 0.08s, transform 0.08s;
}
.btn:hover, .btn:focus-visible { background: var(--paper); color: #000; outline: none; transform: translateY(-1px); }
.btn:hover kbd, .btn:focus-visible kbd { color: #000; border-color: #000; }
.btn-primary { border-color: var(--blood); color: #fff; box-shadow: 0 0 0 1px var(--blood) inset, 0 0 1.6em rgba(255, 17, 51, 0.35); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--blood); color: #fff; }
.btn small { display: block; margin-top: 0.35em; font-size: 0.62em; font-weight: normal; letter-spacing: 0.02em; opacity: 0.75; }
.row { display: flex; gap: 1em; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ---- TITLE ---- */
#title { background: radial-gradient(ellipse at 50% 40%, rgba(7, 3, 8, 0.4) 0, rgba(7, 3, 8, 0.62) 65%, rgba(7, 3, 8, 0.8) 100%); }
.title-wrap { width: min(78em, 100%); margin: auto; display: flex; flex-direction: column; gap: 1.05em; }

.logo { display: flex; align-items: center; justify-content: center; gap: 1.8em; }
.seal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  direction: rtl;                       /* read like a chop: top-to-bottom, right column first */
  gap: 0.02em 0.1em;
  padding: 0.16em 0.22em 0.2em;
  background: var(--blood);
  color: #fff4ee;
  font-size: 3.5em;
  font-weight: bold;
  line-height: 1.06;
  transform: rotate(-4deg);
  box-shadow: 0 0 0 0.05em #fff4ee inset, 0 0 0 0.11em var(--blood) inset, 0 0 1em rgba(255, 17, 51, 0.5);
  border-radius: 0.07em;
}
.seal span { display: block; direction: ltr; }
.seal span:nth-child(1) { grid-area: 1 / 1; }
.seal span:nth-child(2) { grid-area: 2 / 1; }
.seal span:nth-child(3) { grid-area: 1 / 2; }
.seal span:nth-child(4) { grid-area: 2 / 2; }

.logo-art {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.74em;
  line-height: 1.02;
  letter-spacing: 0;
  white-space: pre;
}
.logo-hot { color: #fff6f0; text-shadow: 0.22em 0.22em 0 var(--blood); }
.logo-wu { color: var(--blood); text-shadow: 0.22em 0.22em 0 #4a0714; margin-top: 0.62em; }
.tagline { margin: 0.9em 0 0; color: var(--gold); letter-spacing: 0.06em; font-size: 0.9em; }

.title-actions { display: flex; align-items: center; justify-content: center; gap: 2.2em; flex-wrap: wrap; }
#btn-start { font-size: 1.3em; padding: 0.55em 1.6em; }
.loadout { display: flex; align-items: center; gap: 0.8em; }
.label { color: var(--dim); font-size: 0.8em; letter-spacing: 0.14em; }
.chips { display: flex; gap: 0.35em; flex-wrap: wrap; }
.chip {
  font: inherit;
  font-size: 0.82em;
  color: var(--paper);
  background: rgba(10, 4, 8, 0.8);
  border: 1px solid var(--line);
  padding: 0.3em 0.6em;
  cursor: pointer;
}
.chip b { color: var(--c, #fff); margin-right: 0.35em; }
.chip:hover { border-color: #fff; }
.chip[aria-checked="true"] { border-color: var(--gold); color: #fff; background: rgba(255, 216, 74, 0.14); }

.select-head { display: flex; align-items: center; gap: 0.9em; font-size: 0.8em; letter-spacing: 0.14em; color: var(--paper); }
.select-head i { flex: 1; height: 1px; background: var(--line); }
.select-head .dim { letter-spacing: 0.02em; }

.stage-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.55em; }
@media (max-aspect-ratio: 11/10) { .stage-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.28em;
  min-height: 8.3em;
  padding: 0.6em 0.65em 0.55em;
  text-align: left;
  font: inherit;
  color: var(--paper);
  background: linear-gradient(160deg, var(--bg, #111) 0, rgba(0, 0, 0, 0.88) 100%);
  border: 1px solid color-mix(in srgb, var(--acc, #fff) 45%, transparent);
  border-top: 3px solid var(--acc, #fff);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.08s, box-shadow 0.08s, border-color 0.08s;
}
.stage-card:hover, .stage-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--acc, #fff);
  box-shadow: 0 0 1.4em color-mix(in srgb, var(--acc, #fff) 40%, transparent);
  outline: none;
}
.stage-card .act { display: flex; justify-content: space-between; align-items: baseline; color: var(--acc, #fff); font-size: 0.78em; }
.stage-card .act .hz { font-size: 1.5em; }
.stage-card .act kbd { font-size: 0.9em; }
.stage-card .name { font-weight: bold; font-size: 0.86em; line-height: 1.2; color: #fff; }
.stage-card .film { margin-top: auto; font-size: 0.68em; line-height: 1.25; color: var(--acc2, #ccc); }
.stage-card .mode { font-size: 0.62em; letter-spacing: 0.12em; color: var(--dim); }
.stage-card .glyphs {
  position: absolute;
  right: 0.3em;
  bottom: 0.1em;
  font-size: 2.3em;
  font-weight: bold;
  color: var(--acc, #fff);
  opacity: 0.13;
  pointer-events: none;
  white-space: pre;
}

.legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.2em 1.6em;
  padding: 0.75em 1em;
  border: 1px solid var(--line);
  background: rgba(10, 4, 8, 0.6);
  font-size: 0.78em;
}
.legend-col > div { display: flex; align-items: baseline; gap: 0.5em; padding: 0.16em 0; white-space: nowrap; }
.legend-col span { color: #cfc8cf; overflow: hidden; text-overflow: ellipsis; }
.tips { margin: 0; text-align: center; font-size: 0.78em; color: #cfc8cf; }
.glint { color: var(--gold); text-shadow: 0 0 0.5em var(--gold); }
.title-foot { display: flex; justify-content: space-between; gap: 1.5em; font-size: 0.66em; color: var(--dim); }

/* ---- panels: draft, game over, victory ---- */
.panel-wide, .panel-slim {
  margin: auto;
  padding: 1.5em 2em 1.6em;
  text-align: center;
  background: rgba(7, 3, 8, 0.9);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px #000, 0 1.2em 4em rgba(0, 0, 0, 0.7);
}
.panel-wide { width: min(70em, 100%); }
.panel-slim { width: min(34em, 100%); }
.overlay h2, #file-hint h2 { margin: 0 0 0.3em; font-size: 1.7em; letter-spacing: 0.22em; }
.overlay h2 .hz { color: var(--blood); letter-spacing: 0; margin: 0 0.4em; }
.sub { margin: 0 0 1.1em; color: #cfc8cf; font-size: 0.9em; }
.hint { margin: 1em 0 0; color: var(--dim); font-size: 0.8em; }

#draft { background: rgba(4, 2, 6, 0.74); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1em; }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  padding: 0.9em 0.9em 1em;
  font: inherit;
  color: var(--paper);
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rar, #888) 13%, #0a0508) 0, #070308 70%);
  border: 1px solid var(--rar, #888);
  box-shadow: 0 0 0 1px #000 inset;
  cursor: pointer;
  transition: transform 0.09s, box-shadow 0.09s;
}
.card:hover, .card:focus-visible {
  transform: translateY(-0.4em);
  box-shadow: 0 0 0 1px #000 inset, 0 0 2.2em color-mix(in srgb, var(--rar, #888) 55%, transparent);
  outline: none;
}
.card .key { position: absolute; top: 0.5em; left: 0.6em; }
.card .rarity { align-self: flex-end; font-size: 0.68em; letter-spacing: 0.2em; color: var(--rar, #888); }
.card pre {
  margin: 0.1em 0;
  font-family: var(--mono);
  font-size: 1.02em;
  line-height: 1.12;
  color: var(--col, #fff);
  text-shadow: 0 0 0.6em color-mix(in srgb, var(--col, #fff) 55%, transparent);
}
.card .hanzi { font-family: var(--hanzi); font-size: 2em; line-height: 1.1; color: var(--col, #fff); }
.card .name { font-weight: bold; font-size: 1.05em; letter-spacing: 0.08em; color: #fff; }
.card .element { font-size: 0.68em; letter-spacing: 0.18em; color: var(--dim); text-transform: uppercase; }
.card .desc { margin: 0.2em 0 0; font-size: 0.8em; line-height: 1.4; color: #e2dbe0; min-height: 4.2em; }
.card .stack-desc { margin: 0; font-size: 0.7em; line-height: 1.35; color: var(--dim); }
.card .stacks { margin-top: auto; padding-top: 0.5em; font-size: 0.82em; color: var(--gold); letter-spacing: 0.08em; }
.card .pips { letter-spacing: 0.25em; }

.owned { display: flex; gap: 0.5em 1.2em; justify-content: center; flex-wrap: wrap; margin-top: 0.9em; font-size: 0.76em; color: var(--dim); }
.owned:empty, .stage-times:empty { display: none; }
.owned b { font-family: var(--hanzi); font-size: 1.25em; margin-right: 0.3em; }

#gameover { align-items: flex-end; padding-bottom: 9vh; background: radial-gradient(ellipse at center, rgba(60, 0, 8, 0) 30%, rgba(60, 0, 8, 0.5) 100%); pointer-events: none; }
#gameover .panel-slim { pointer-events: auto; margin: auto auto 0; border-color: rgba(255, 17, 51, 0.6); padding-top: 0.7em; }
.death-glyph { font-size: 4em; line-height: 1.05; color: var(--blood); text-shadow: 0 0 0.4em rgba(255, 17, 51, 0.6); }
#gameover h2 { color: #fff; }

#victory { background: rgba(4, 2, 6, 0.8); }
.victory-glyph { font-size: 4.2em; line-height: 1; color: var(--gold); text-shadow: 0 0 0.5em rgba(255, 216, 74, 0.5); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7em; margin: 0.4em 0 1em; }
.stat { padding: 0.6em 0.4em; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); }
.stat b { display: block; font-size: 1.7em; color: #fff; }
.stat span { font-size: 0.68em; letter-spacing: 0.14em; color: var(--dim); }
.stage-times { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3em 1.4em; margin-bottom: 1em; font-size: 0.78em; color: #cfc8cf; }
.stage-times b { color: var(--acc, #fff); font-weight: normal; margin-right: 0.5em; }
#victory .row { margin-top: 1.2em; }

/* ---- small floating notes ---- */
.toast {
  position: fixed;
  left: 50%;
  top: 44%;
  z-index: 30;
  transform: translate(-50%, -50%);
  padding: 0.7em 1.4em;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid var(--line);
  letter-spacing: 0.16em;
  pointer-events: none;
}
.toast-corner { left: auto; right: 1.2em; top: auto; bottom: 1.2em; transform: none; font-size: 0.72em; letter-spacing: 0.06em; color: var(--gold); }

/* ---- debug bar ---- */
#debug {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  max-height: 46vh;
  overflow: auto;
  padding: 6px 10px 8px;
  background: rgba(0, 0, 0, 0.9);
  border-top: 1px solid #3a3a44;
  font-size: 11px;
  line-height: 1.5;
  color: #b8b8c4;
}
.dbg-row { display: flex; align-items: flex-start; gap: 6px 10px; flex-wrap: wrap; padding: 2px 0; }
.dbg-label { flex: 0 0 52px; color: #77ff99; letter-spacing: 0.1em; padding-top: 2px; }
.dbg-group { display: flex; flex-wrap: wrap; gap: 3px; flex: 1 1 0; min-width: 200px; }
.dbg-row > .dbg-group:first-of-type { flex: 0 1 auto; }
#debug button {
  font: inherit;
  color: #d6d6e0;
  background: #17171d;
  border: 1px solid #3a3a44;
  padding: 1px 7px;
  cursor: pointer;
}
#debug button:hover { border-color: #fff; color: #fff; }
#debug button.on { background: #1f4a2c; border-color: #77ff99; color: #fff; }
#debug button b { color: var(--c, #fff); }
.dbg-sfx .dbg-group { max-height: 9.2em; overflow: auto; }
.dbg-info { margin-left: auto; color: #8d8790; white-space: pre; }
.errlog { margin: 4px 0 0; color: #ff6a7a; white-space: pre-wrap; font: inherit; user-select: text; -webkit-user-select: text; }
.errlog:empty { display: none; }

/* ---- file:// hint ---- */
#file-hint, #noscript {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em;
  background: var(--ink);
  font-size: 16px;
  user-select: text;
  -webkit-user-select: text;
}
#file-hint h2 { font-size: 1.2em; letter-spacing: 0.08em; color: var(--blood); }
#file-hint p { line-height: 1.5; color: #e2dbe0; }
#file-hint pre { display: inline-block; margin: 0; padding: 0.5em 1.2em; background: #17171d; border: 1px solid var(--gold); color: var(--gold); font-family: var(--mono); font-size: 1.2em; }
#file-hint a { color: var(--jade); }
#file-hint code { color: var(--gold); }