/* EMBERFIST — UI.

   Palette: the SpecEnvoy brand (navy #0e1730 / #060a16, royal blue #3b6fe0,
   gold #f3c849, heart pink #ff5d8f, royal purple #7d3c98) with orange #f37021
   used ONLY as a field, never as a peer accent beside gold — they sit 22° apart
   on the hue wheel and gold-on-orange is 1.84 contrast (docs/brand-assets.md).
   NO artificial green or teal anywhere (owner rule). */

@font-face {
  font-family: "Lilita One";
  src: url("fonts/lilita-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("fonts/baloo2-var.woff2") format("woff2");
  font-weight: 400 800; font-display: swap;
}

:root {
  --navy: #0b0f22;
  --navy2: #131a36;
  --ink: #eaf0ff;
  --dim: #93a2c9;
  --dim2: #7d8cb0;          /* AA on navy — the accessible dim (Ruth a11y) */
  --blue: #3b6fe0;
  --blue-soft: #5b86ec;
  --gold: #f3c849;
  --pink: #ff5d8f;
  --purple: #7d3c98;
  --orange: #f37021;
  --line: rgba(120, 150, 220, .18);
  --panel: rgba(11, 15, 34, .82);
  --title: "Lilita One", system-ui, sans-serif;
  --body: "Baloo 2", system-ui, -apple-system, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--navy); color: var(--ink);
  font-family: var(--body);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: none;
}
#stage { position: fixed; inset: 0; }
#gl, #fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fx { pointer-events: none; z-index: 3; }

.hidden { display: none !important; }

/* ------------------------------------------------------------------ screens */
.screen {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 20px 16px calc(20px + var(--safe-b));
  background:
    radial-gradient(900px 620px at 70% -8%, rgba(59,111,224,.22), transparent 62%),
    radial-gradient(760px 520px at 12% 12%, rgba(125,60,152,.18), transparent 60%),
    linear-gradient(180deg, rgba(6,10,22,.94), rgba(6,10,22,.98));
  backdrop-filter: blur(3px);
  animation: fadein .28s ease;
}
.screen.panel { justify-content: flex-start; overflow-y: auto; touch-action: pan-y; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------- logo */
.logo {
  font-family: var(--title); letter-spacing: .02em; line-height: .96;
  display: flex; gap: .06em; justify-content: center;
}
.logo.big { font-size: clamp(38px, 12vw, 92px); }
.logo .l1 { color: var(--ink); text-shadow: 0 0 30px rgba(120,160,255,.35); }
.logo .l2 {
  background: linear-gradient(96deg, var(--gold), var(--orange) 70%, var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(243,200,73,.35));
}
.logo-zh {
  font-family: var(--title); font-size: clamp(20px, 5vw, 34px);
  color: var(--gold); letter-spacing: .3em; margin: 2px 0 0 .3em; opacity: .9;
}
.tagline { color: var(--dim); margin: 4px 0 14px; text-align: center; max-width: 34ch; font-size: 15px; }

/* ------------------------------------------------------------------ loading */
#loading .load-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bar { width: min(340px, 74vw); height: 8px; border-radius: 99px; background: rgba(120,150,220,.16); overflow: hidden; margin-top: 14px; }
.bar > i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--blue), var(--gold)); transition: width .2s ease; }
.load-msg { color: var(--dim2); font-size: 13px; min-height: 1.2em; }

/* ------------------------------------------------------------------ buttons */
.btn {
  font-family: var(--body); font-weight: 700; font-size: 16px;
  color: var(--ink); background: rgba(30,42,84,.72);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 22px; min-width: 168px; cursor: pointer;
  transition: transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .15s, background .15s;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); background: rgba(46,62,116,.85); outline: none; box-shadow: 0 6px 22px rgba(0,0,0,.4); }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(243,200,73,.6); }
.btn.primary { background: linear-gradient(180deg, var(--blue-soft), var(--blue)); border-color: rgba(180,205,255,.4); }
.btn.primary:hover { background: linear-gradient(180deg, #7ba0f5, #4a7cf0); }
.btn.ghost { background: transparent; color: var(--dim); }
.btn.big { font-size: 19px; padding: 14px 34px; margin-top: 8px; }
.menu { display: flex; flex-direction: column; gap: 9px; align-items: center; }

.chip {
  font: 600 13px var(--body); color: var(--dim); background: rgba(20,28,58,.7);
  border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px;
  cursor: pointer; text-decoration: none; transition: .15s;
}
.chip:hover { color: var(--ink); border-color: rgba(243,200,73,.5); }
.chip.off { opacity: .45; }
.title-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 16px; }

.back-link {
  position: absolute; top: 14px; left: 14px; z-index: 20;
  font: 600 14px var(--body); color: var(--dim); text-decoration: none;
  background: rgba(11,15,34,.75); border: 1px solid var(--line);
  border-radius: 99px; padding: 7px 15px; cursor: pointer;
}
.back-link:hover { color: var(--ink); }
.back-link.static { position: static; margin-top: 8px; }
.btn-back { font-family: var(--body); }

/* ---------------------------------------------------------------- options */
.opts { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 18px; max-width: 760px; }
.opt { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.opt-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim2); }
.opt-desc { font-size: 12px; color: var(--dim2); max-width: 26ch; text-align: center; margin: 0; min-height: 2.4em; line-height: 1.35; }
.seg { display: inline-flex; background: rgba(16,22,48,.85); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.seg button {
  background: none; border: 0; color: var(--dim); font: 600 14px var(--body);
  padding: 8px 16px; cursor: pointer; transition: .15s;
}
.seg button.on { background: linear-gradient(180deg, #24356b, #182449); color: #fff; box-shadow: inset 0 0 0 1px rgba(140,180,255,.4); }
.seg button:hover { color: var(--ink); }
.seg.small button { font-size: 12px; padding: 6px 11px; }

/* ------------------------------------------------------------ select screen */
#select h2 { font-family: var(--title); font-size: clamp(20px, 4vw, 30px); margin: 0 0 4px; font-weight: 400; }
.roster { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: 900px; }
.rcard {
  width: 150px; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, rgba(28,38,78,.9), rgba(14,20,44,.9));
  border: 1px solid var(--line); padding: 12px 10px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s, border-color .15s;
  position: relative;
}
.rcard:hover, .rcard:focus-visible { transform: translateY(-4px) scale(1.03); outline: none; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.rcard.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(243,200,73,.5), 0 10px 30px rgba(0,0,0,.5); }
.rcard.partner { border-color: var(--blue-soft); box-shadow: 0 0 0 2px rgba(91,134,236,.5); }
/* The portrait sits in the disc the roster used to be. Keeping the tint glow
   matters: it is how a card reads as this character from across the screen,
   and at 72px the fighter alone is not enough to tell them apart at a glance. */
.rcard .port {
  width: 72px; height: 72px; border-radius: 50%; display: block; overflow: hidden;
  position: relative; box-shadow: 0 0 22px currentColor;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(circle at 50% 34%, rgba(255,255,255,.12), rgba(10,15,34,.6));
  transition: box-shadow .15s;
}
.rcard .port .portrait { width: 100%; height: 100%; display: block; }
/* WebGL missing or a fighter that failed to draw — the old coloured disc */
.rcard .port.swatch-fallback { background: currentColor; }
.rcard.on .port { box-shadow: 0 0 26px currentColor, 0 0 0 2px var(--gold); }
.rcard.partner .port { box-shadow: 0 0 26px currentColor, 0 0 0 2px var(--blue-soft); }
.rcard .rname { font-family: var(--title); font-size: 19px; }
.rcard .rzh { font-size: 13px; color: var(--gold); }
.rcard .rarch { font-size: 11px; color: var(--dim2); text-align: center; line-height: 1.3; }
.rcard .slot { position: absolute; top: 6px; right: 8px; font: 700 11px var(--body); color: var(--gold); }
.sel-detail { color: var(--dim); font-size: 13px; max-width: 52ch; text-align: center; min-height: 3em; line-height: 1.45; }
.sel-team { display: flex; gap: 8px; align-items: center; color: var(--dim2); font-size: 13px; min-height: 1.6em; }

/* ------------------------------------------------------------ ladder screen */
.ladder-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rung-label { font-family: var(--title); font-size: 15px; letter-spacing: .28em; color: var(--gold); text-transform: uppercase; }
.vs-row { display: flex; align-items: center; gap: 20px; }
.vs-card { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 130px; }
.vs-card .swatch { width: 62px; height: 62px; border-radius: 50%; box-shadow: 0 0 26px currentColor; }
.vs-card .vname { font-family: var(--title); font-size: 21px; }
.vs-card .vpartner { font-size: 12px; color: var(--dim2); }
.vs-word { font-family: var(--title); font-size: 30px; color: var(--pink); }
.verge-name { color: var(--dim); font-size: 14px; letter-spacing: .06em; }

/* ---------------------------------------------------------------- the HUD */
#hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px;
  padding: 10px 12px 0;
}
.hud-side { display: flex; flex-direction: column; gap: 4px; }
.hud-side.rev { align-items: flex-end; }
.lamp-wrap {
  position: relative; height: 20px; border-radius: 5px;
  background: rgba(6,10,22,.72); border: 1px solid rgba(140,170,255,.28);
  overflow: hidden; width: 100%;
}
.hud-side.rev .lamp-wrap { direction: rtl; }
.lamp, .lamp-red { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; }
.lamp-red { background: rgba(255,93,143,.5); transition: width .45s ease .12s; }
.lamp {
  background: linear-gradient(180deg, #ffe08a, var(--gold) 45%, #e0a02a);
  box-shadow: 0 0 14px rgba(243,200,73,.55) inset;
  transition: width .12s linear;
}
.hud-side.rev .lamp, .hud-side.rev .lamp-red { left: auto; right: 0; }
.lamp-name {
  position: absolute; top: 1px; left: 8px; direction: ltr;
  font: 700 12px var(--body); color: #0b0f22; letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.hud-side.rev .lamp-name { left: auto; right: 8px; }
.bench { height: 6px; width: 42%; border-radius: 4px; background: rgba(6,10,22,.7); border: 1px solid rgba(140,170,255,.22); overflow: hidden; }
.bench .bench-hp { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--blue-soft), var(--blue)); }
.bench.dead { opacity: .25; }
.hud-clock { text-align: center; }
.clock { font-family: var(--title); font-size: clamp(26px, 5vw, 40px); line-height: 1; color: var(--ink); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.rounds { display: flex; gap: 4px; justify-content: center; margin-top: 3px; }
.rounds i { width: 9px; height: 9px; border-radius: 50%; background: rgba(140,170,255,.25); display: block; }
.rounds i.won { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

.hud-bottom {
  position: absolute; left: 0; right: 0; bottom: calc(6px + var(--safe-b));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px;
  padding: 0 12px;
}
.gauge-col { display: flex; flex-direction: column; gap: 4px; max-width: 300px; }
.gauge-col.rev { align-items: flex-end; margin-left: auto; }
.ember { display: flex; gap: 3px; }
.ember i {
  display: block; width: 26px; height: 9px; border-radius: 3px;
  background: rgba(140,170,255,.18); border: 1px solid rgba(140,170,255,.22);
  transition: background .12s, box-shadow .12s;
}
.ember i.on { background: linear-gradient(180deg, #ffcf7a, var(--orange)); box-shadow: 0 0 9px rgba(243,112,33,.7); border-color: rgba(255,190,120,.5); }
.ember i.part { background: linear-gradient(90deg, var(--orange) 50%, rgba(140,170,255,.18) 50%); }
.ember.guttered i { background: rgba(60,40,40,.5); box-shadow: none; }
.ember.guttered { animation: gutter 1.1s ease-in-out infinite; }
@keyframes gutter { 0%,100% { opacity: .5; } 50% { opacity: .9; } }
.ember.refuse, .beacon.refuse { animation: refuse .42s ease; }
@keyframes refuse {
  0%, 100% { transform: none; filter: none; }
  20% { transform: translateX(-4px); filter: brightness(1.9) saturate(.4); }
  50% { transform: translateX(4px); filter: brightness(1.9) saturate(.4); }
  75% { transform: translateX(-2px); }
}
/* ⭐ PIXEL'S TOOL QUEUE. ROSTER.md #13 says Insert Coin "rolls the next three
   tools, shown on the HUD", and the showing is not decoration: a random kit the
   player cannot see is just noise, while a random kit they CAN see is a plan
   they did not choose — which is the archetype. The FRONT tool is the one
   `Cabinet` fires, so it is the one drawn large.
   ⚠ `.gauge-col.rev` right-aligns player 2's column, so this row must follow the
   column's direction rather than assume left — otherwise the front tool sits at
   the far end of the queue on one side only. */
.toolq { display: flex; gap: 4px; align-items: center; margin-top: 2px; }
.toolq:empty { display: none; }
.gauge-col.rev .toolq { flex-direction: row-reverse; }
.toolq i {
  display: block; font-style: normal; font-size: 10px; line-height: 15px;
  min-width: 44px; height: 17px; padding: 0 6px; border-radius: 3px;
  text-align: center; letter-spacing: .04em; white-space: nowrap;
  color: rgba(226,232,255,.72);
  background: rgba(140,170,255,.14); border: 1px solid rgba(140,170,255,.22);
}
/* the front of the queue — brighter, and it is the only one that is about to
   happen. Uses the character's own tint via a custom property so this does not
   hard-code magenta for a fighter that may not be Pixel. */
.toolq i.front {
  color: #fff; font-weight: 700;
  background: color-mix(in srgb, var(--toolq-tint, #c026d3) 62%, transparent);
  border-color: color-mix(in srgb, var(--toolq-tint, #c026d3) 80%, transparent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--toolq-tint, #c026d3) 55%, transparent);
}
.beacon { display: flex; gap: 3px; }
.beacon i {
  display: block; width: 44px; height: 7px; border-radius: 3px;
  background: rgba(140,170,255,.16); border: 1px solid rgba(140,170,255,.2);
  overflow: hidden; position: relative;
}
.beacon i > b {
  position: absolute; inset: 0; width: 0;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  box-shadow: 0 0 10px rgba(255,93,143,.6);
  transition: width .18s ease;
}
.beacon i.full > b { background: linear-gradient(90deg, #ffd54d, var(--pink)); }
.combo-mid { font-family: var(--title); font-size: 22px; color: var(--gold); min-height: 1em; text-shadow: 0 2px 8px rgba(0,0,0,.7); }

.replay-tag {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; pointer-events: auto;
  background: rgba(11,15,34,.78); border: 1px solid var(--line);
  border-radius: 99px; padding: 6px 8px 6px 14px; font: 700 12px var(--body);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
.replay-tag .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); animation: rec 1s infinite; }
@keyframes rec { 50% { opacity: .25; } }
.mini { font: 700 11px var(--body); background: rgba(46,62,116,.9); color: var(--ink); border: 0; border-radius: 99px; padding: 4px 11px; cursor: pointer; }

/* -------------------------------------------------------------- touch pads */
#touch { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#touch > * { pointer-events: auto; }
.stick {
  position: absolute; left: 12px; bottom: calc(16px + var(--safe-b));
  width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(59,111,224,.18), rgba(11,15,34,.5) 70%);
  border: 1px solid rgba(140,170,255,.26);
  touch-action: none;
}
.stick .knob {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8fb4ff, #3b6fe0 70%);
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  transform: translate(var(--sx, 0px), var(--sy, 0px));
  transition: transform .06s linear;
}
.stick.on { border-color: rgba(243,200,73,.5); }
.btns {
  position: absolute; right: 10px; bottom: calc(10px + var(--safe-b));
  width: 222px; height: 205px;
}
.tb {
  position: absolute; width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); color: #fff;
  font: 700 17px var(--title); letter-spacing: .02em;
  display: grid; place-items: center; touch-action: none; user-select: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  background: rgba(30,42,84,.85);
}
.tb.on { transform: scale(.92); filter: brightness(1.4); }
.tb.b-l { background: linear-gradient(180deg, #7ba0f5, #3b6fe0); }
.tb.b-m { background: linear-gradient(180deg, #a6c0ff, #5b6fd0); }
.tb.b-h { background: linear-gradient(180deg, #ff8fb1, #d63f6e); }
.tb.b-s { background: linear-gradient(180deg, #ffd97a, #e0a02a); color: #2a1c06; }
.tb.b-b { background: linear-gradient(180deg, #c58cf0, #7d3c98); }
.tb.b-e { background: linear-gradient(180deg, #ffb060, #f37021); color: #2a1206; width: 54px; height: 54px; font-size: 15px; }
.tb.b-t { background: rgba(30,42,84,.9); width: 54px; height: 54px; font-size: 15px; }

/* ---------------------------------------------------------------- pause */
.pause-inner, .result-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pause-inner h2 { font-family: var(--title); font-weight: 400; font-size: 30px; margin: 0 0 6px; }
.result-word { font-family: var(--title); font-size: clamp(34px, 9vw, 74px); line-height: 1; }
.result-word.win { background: linear-gradient(96deg, var(--gold), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.result-word.lose { color: var(--dim); }
.result-sub { color: var(--dim); font-size: 15px; text-align: center; max-width: 40ch; }
.result-moments { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 10px 0 4px; }
.mchip { display: flex; align-items: center; gap: 6px; font: 700 12px var(--body); padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line); background: rgba(16,22,48,.8); }
.mchip b { font-family: var(--title); font-size: 14px; }
.result-btns { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; }
.result-btns .btn { min-width: 130px; }

/* ---------------------------------------------------------------- bonus */
#bonusHud { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 12px; pointer-events: none; }
.bonus-top { display: flex; align-items: baseline; justify-content: center; gap: 18px; flex-wrap: wrap; }
.bonus-title { font-family: var(--title); font-size: 19px; color: var(--gold); }
.bonus-clock { font-family: var(--title); font-size: 38px; line-height: 1; }
.bonus-letters { font-size: 13px; color: var(--dim); }
.bonus-letters b { color: var(--ink); font-size: 16px; }
.bonus-bar { width: min(520px, 82vw); height: 9px; margin: 8px auto 0; border-radius: 99px; background: rgba(120,150,220,.16); overflow: hidden; }
.bonus-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--gold)); transition: width .12s; }

/* ---------------------------------------------------------------- panels */
.panel h2 { font-family: var(--title); font-weight: 400; font-size: clamp(24px, 5vw, 36px); margin: 44px 0 2px; }
.panel h3 { font-family: var(--title); font-weight: 400; font-size: 20px; margin: 22px 0 8px; color: var(--gold); }
.lede { color: var(--dim); margin: 0 0 16px; text-align: center; }
.cx-wrap { display: grid; grid-template-columns: 190px 1fr; gap: 16px; width: min(980px, 96vw); align-items: start; }
.cx-list { display: flex; flex-direction: column; gap: 8px; }
.cx-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
  border-radius: 11px; border: 1px solid var(--line); background: rgba(16,22,48,.7);
  transition: .15s; text-align: left;
}
.cx-item:hover { border-color: rgba(243,200,73,.4); }
.cx-item.on { border-color: var(--gold); background: rgba(30,40,82,.85); }
.cx-item .dot { width: 15px; height: 15px; border-radius: 50%; box-shadow: 0 0 10px currentColor; flex: none; }
.cx-item .nm { font-family: var(--title); font-size: 16px; }
.cx-item .zh { font-size: 12px; color: var(--dim2); }
.cx-view { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 16px; align-items: start; }
#cxCanvas { width: 100%; aspect-ratio: 3/4; border-radius: 14px; background: radial-gradient(circle at 50% 30%, rgba(59,111,224,.2), rgba(6,10,22,.9)); border: 1px solid var(--line); }
.cx-text { font-size: 14px; line-height: 1.62; color: #cfd9f2; }
.cx-text h4 { font-family: var(--title); font-weight: 400; font-size: 26px; margin: 0 0 2px; }
.cx-text .zh { color: var(--gold); font-size: 16px; margin-bottom: 8px; }
.cx-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.cx-meta span { font: 600 11px var(--body); padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--dim); }
.cx-text p { margin: 0 0 .85em; white-space: pre-line; }
.cx-moves { margin-top: 12px; }
.cx-moves li { margin-bottom: 4px; color: var(--dim); font-size: 13px; }
.cx-moves b { color: var(--ink); }

/* ------------------------------------------------------------ move gallery */
.gl-chars { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 12px; max-width: 100%; }
.gl-chars .cx-item { flex: none; }
/* The viewer STICKS while the movelist scrolls past it — the whole point of the
   screen is watching one animation while you read about it. */
/* `100%`, not `96vw` — the panel already carries 16 px of side padding, so a
   viewport-relative width overflows it and the page scrolls sideways on a
   phone. The gate asserts scrollWidth ≤ innerWidth. */
.gl-wrap {
  display: grid; grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
  gap: 16px 22px; width: min(1060px, 100%); align-items: start;
}
.gl-stage {
  grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.gl-info { grid-column: 2; grid-row: 1; }
.gl-list { grid-column: 2; grid-row: 2; }
#glCanvas {
  width: 100%; aspect-ratio: 3/4; border-radius: 14px; border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 32%, rgba(59,111,224,.22), rgba(6,10,22,.92));
}
.gl-angles { align-self: center; }
.gl-nav { display: flex; align-items: center; justify-content: center; gap: 12px; }
.gl-arrow {
  width: 40px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 13px; line-height: 1;
  background: rgba(16,22,48,.85); border: 1px solid var(--line); color: var(--ink);
}
.gl-arrow:hover { border-color: rgba(243,200,73,.55); }
.gl-count { font: 600 12px var(--body); color: var(--dim2); min-width: 62px; text-align: center; }

.gl-info { display: flex; flex-direction: column; gap: 10px; }
.gl-name { font-family: var(--title); font-weight: 400; font-size: clamp(22px, 4.2vw, 30px); line-height: 1.1; }
.gl-namezh { color: var(--gold); font-size: 15px; margin-top: -6px; }

.gl-bind { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gl-scheme {
  font: 700 10px var(--body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim2); min-width: 58px;
}
.gl-tokens { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.gl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 26px; padding: 0 8px; border-radius: 8px;
  font: 700 12px var(--title); letter-spacing: .04em; color: #f4f8ff;
  background: rgba(60,80,140,.7);
}
.gl-btn.b-l { background: linear-gradient(180deg, #7ba0f5, #3b6fe0); }
.gl-btn.b-m { background: linear-gradient(180deg, #a6c0ff, #5b6fd0); }
.gl-btn.b-h { background: linear-gradient(180deg, #ff8fb1, #d63f6e); }
.gl-btn.b-s { background: linear-gradient(180deg, #ffd97a, #e0a02a); color: #2a1c06; }
.gl-btn.b-b { background: linear-gradient(180deg, #c58cf0, #7d3c98); }
.gl-btn.b-e { background: linear-gradient(180deg, #ffb060, #f37021); color: #2a1206; }
.gl-btn.b-t { background: rgba(40,54,102,.95); }
.gl-dir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; font-size: 14px; line-height: 1;
  border: 1px solid rgba(243,200,73,.45); color: var(--gold); background: rgba(243,200,73,.08);
}
.gl-mot {
  padding: 4px 9px; border-radius: 8px; font-size: 14px; letter-spacing: .12em;
  border: 1px solid rgba(243,200,73,.45); color: var(--gold); background: rgba(243,200,73,.08);
}
.gl-sep { font-style: normal; color: var(--dim2); font-size: 12px; }
.gl-word { color: var(--dim); font-size: 12px; }

.gl-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-stat {
  font: 600 11px var(--body); padding: 4px 9px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--dim);
}
.gl-stat b { color: var(--ink); font-weight: 700; }
.gl-stat.plus { border-color: rgba(91,134,236,.5); }
.gl-stat.minus { border-color: rgba(255,93,143,.45); }
.gl-stat.cost { border-color: rgba(243,200,73,.45); color: var(--gold); }
.gl-stat.warn { border-color: rgba(255,93,143,.45); }
.gl-stat.k-special, .gl-stat.k-super { border-color: rgba(197,140,240,.5); }

.gl-timeline { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.gl-ruler {
  position: relative; display: flex; height: 34px; border-radius: 9px; overflow: hidden;
  border: 1px solid var(--line); background: rgba(11,15,34,.7);
}
.gl-seg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; overflow: hidden; gap: 1px;
}
.gl-seg b { font: 700 12px var(--title); line-height: 1; }
.gl-seg i { font: 600 8px var(--body); font-style: normal; letter-spacing: .06em; text-transform: uppercase; opacity: .8; white-space: nowrap; }
.gl-seg.s-st { background: rgba(59,111,224,.34); color: #cfe0ff; }
.gl-seg.s-ac { background: rgba(243,200,73,.42); color: #2a1c06; }
.gl-seg.s-rc { background: rgba(120,140,190,.16); color: var(--dim); }
.gl-head {
  position: absolute; top: 0; bottom: 0; width: 2px; left: 0;
  background: var(--ink); box-shadow: 0 0 8px rgba(234,240,255,.9);
}
.gl-scrub { width: 100%; accent-color: var(--gold); cursor: pointer; }
.gl-play { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gl-note { color: var(--dim); font-size: 13px; line-height: 1.6; margin: 2px 0 0; }

.gl-list { padding-bottom: 44px; }
.gl-group { margin-bottom: 14px; }
.gl-gtitle {
  font: 700 10px var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 7px;
}
.gl-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 7px; }
.gl-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px; cursor: pointer;
  padding: 8px 10px; border-radius: 11px; text-align: left;
  border: 1px solid var(--line); background: rgba(16,22,48,.7); transition: .15s;
}
.gl-chip:hover { border-color: rgba(243,200,73,.4); }
.gl-chip.on { border-color: var(--gold); background: rgba(30,40,82,.9); }
.gl-cnm { font: 400 14px var(--title); color: var(--ink); }
.gl-cin { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; transform: scale(.86); transform-origin: left center; }

.reel-tiers { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rtile {
  width: 124px; padding: 14px 10px; border-radius: 14px; text-align: center;
  border: 1px solid var(--line); background: rgba(16,22,48,.75);
}
.rtile .rt { font-family: var(--title); font-size: 15px; letter-spacing: .1em; }
.rtile .rn { font-family: var(--title); font-size: 34px; line-height: 1.1; }
.rtile[data-t="1"] .rt { color: #ffd54d; }
.rtile[data-t="2"] .rt { color: #ffb43c; }
.rtile[data-t="3"] .rt { color: #ff8a2e; }
.rtile[data-t="4"] .rt { color: #8fd4ff; }
.rtile[data-t="5"] .rt { color: var(--gold); text-shadow: 0 0 14px rgba(243,200,73,.7); }
.reel-clips { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: 980px; padding-bottom: 40px; }
.clip { width: 250px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: rgba(11,15,34,.8); }
.clip video { width: 100%; display: block; background: #000; }
.clip .cmeta { padding: 7px 10px; font-size: 12px; color: var(--dim); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.clip .cmeta button { background: none; border: 0; color: var(--pink); cursor: pointer; font: 600 12px var(--body); }
.empty { color: var(--dim2); font-size: 14px; padding: 20px; }

.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; width: min(920px, 94vw); padding-bottom: 40px; }
.how-row { display: flex; gap: 11px; align-items: center; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line); background: rgba(16,22,48,.7); }
.how-key { font: 700 12px var(--title); letter-spacing: .06em; color: #0b0f22; background: var(--gold); border-radius: 7px; padding: 5px 9px; white-space: nowrap; }
.how-txt { font-size: 13px; color: var(--dim); }

.ending-inner { max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ending-title { font-family: var(--title); font-size: clamp(26px, 6vw, 44px); background: linear-gradient(96deg, var(--gold), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ending-body p { color: #cfd9f2; line-height: 1.7; font-size: 15px; margin: 0 0 1em; opacity: 0; animation: rise .7s ease forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.fs-toggle {
  position: absolute; top: 12px; right: 12px; z-index: 21;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: rgba(11,15,34,.72); border: 1px solid var(--line);
  color: var(--dim); font-size: 17px; line-height: 1;
}
.fs-toggle:hover { color: var(--ink); }

@media (max-width: 780px) {
  .cx-wrap { grid-template-columns: 1fr; }
  .cx-view { grid-template-columns: 1fr; }
  #cxCanvas { max-width: 260px; margin: 0 auto; }
  .cx-list { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .cx-item { flex: none; }
  .gl-wrap { grid-template-columns: 1fr; }
  .gl-stage, .gl-info, .gl-list { grid-column: 1; grid-row: auto; }
  .gl-stage { position: static; }
  #glCanvas { max-width: 250px; margin: 0 auto; }
  /* ⚠⚠ `flex: none` IS LOAD-BEARING, and leaving it off hid the character
     picker on every phone. Two CSS rules compose into it:
       1. `overflow-x: auto` makes the computed `overflow-y` **auto** as well —
          the spec forbids one axis being `visible` while the other scrolls.
       2. A scroll container's `min-height: auto` resolves to **0** instead of
          min-content, because the automatic minimum size does not apply to
          things that can scroll.
     `#gallery` is a fixed-height `display:flex; flex-direction:column`, so once
     this row could shrink, it was the item that got shrunk — measured at
     **4 px tall** (its padding, nothing else) against 28 px of content, with
     each 54 px chip squashed to 20 px. Only the bottom sliver of Vixen /
     Bastion / Risa rendered. Desktop never saw it: no media query, no
     overflow, so `min-height: auto` still protected the row. */
  .gl-chars { flex: none; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: 100%; padding-bottom: 4px; }
  .gl-chips { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
  .gl-scheme { min-width: 50px; }
  .opts { gap: 12px; }
  .btn { min-width: 150px; }
}
@media (max-height: 520px) {
  .logo.big { font-size: clamp(28px, 8vw, 46px); }
  .logo-zh { font-size: 18px; }
  .tagline { margin-bottom: 6px; font-size: 13px; }
  .btn { padding: 8px 18px; font-size: 14px; }
  .menu { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .opt-desc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .screen, .ending-body p { animation: none; }
  .ember.guttered { animation: none; }
}