:root{
  --bg:#0a0a0a; --ink:#f4f1ea; --muted:#9a948a;
  --gold:#c09e5a; --cyan:#00d4ff; --coral:#ff6b6b; --green:#2fd08a;
  --panel:rgba(22,22,24,.72); --line:rgba(244,241,234,.10);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Space Grotesk",system-ui,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{ display:none !important; }
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--body);
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
#app{
  display:grid; grid-template-columns:1fr minmax(360px,420px);
  height:100vh; width:100vw;
}

/* ===================== STAGE ===================== */
#stage{ position:relative; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 8%, #131520 0%, #0a0a0c 55%, #060608 100%); }
#scene{ position:absolute; inset:0; width:100%; height:100%; display:block; }

#titlebar{ position:absolute; top:26px; left:34px; z-index:5; pointer-events:none;
  text-shadow:0 2px 18px #000; }
.kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.32em;
  color:var(--gold); margin-bottom:8px; }
#titlebar h1{ font-family:var(--disp); font-weight:700; font-size:clamp(30px,3.4vw,52px);
  letter-spacing:.04em; line-height:.95; }
.tag{ color:var(--muted); font-size:13.5px; margin-top:10px; max-width:32ch; line-height:1.4; }

/* Wallet HUD */
#wallet{ position:absolute; top:26px; right:30px; z-index:5; width:248px;
  background:linear-gradient(160deg,rgba(20,20,22,.82),rgba(14,14,16,.78));
  border:1px solid var(--line); border-radius:14px; padding:15px 17px 17px;
  backdrop-filter:blur(8px); box-shadow:0 18px 40px -20px #000; }
.wallet-label{ font-family:var(--mono); font-size:10px; letter-spacing:.26em; color:var(--muted); }
.wallet-amount{ font-family:var(--mono); font-weight:700; font-size:38px; line-height:1.05;
  margin-top:4px; color:var(--ink); transition:color .4s; letter-spacing:-.01em; }
.wallet-amount .cur{ font-size:22px; color:var(--gold); vertical-align:top; margin-right:1px; }
#wallet.hot .wallet-amount{ color:var(--coral); }
.wallet-sub{ font-size:11px; color:var(--muted); margin-top:5px; }
#walletDelta{ color:var(--coral); font-family:var(--mono); }
.wallet-bar{ height:5px; border-radius:4px; background:rgba(255,255,255,.07);
  margin-top:11px; overflow:hidden; }
#walletFill{ height:100%; width:0%; border-radius:4px;
  background:linear-gradient(90deg,var(--green),var(--gold) 55%,var(--coral));
  transition:width .5s cubic-bezier(.4,0,.2,1); }

/* Regulator alert */
.reg-alert{ position:absolute; left:50%; top:120px; transform:translateX(-50%);
  z-index:6; font-family:var(--mono); font-weight:700; font-size:14px; letter-spacing:.18em;
  color:#ffd2d2; background:rgba(70,12,12,.62); border:1px solid rgba(255,107,107,.5);
  padding:9px 18px; border-radius:8px; box-shadow:0 0 28px rgba(255,80,80,.35);
  display:flex; align-items:center; gap:10px; animation:regflash 1s ease; }
.reg-eye{ color:var(--coral); }
.reg-foot{ font-weight:500; font-size:10px; letter-spacing:.12em; color:#d79; opacity:.85; }
.reg-alert[hidden]{ display:none; }
@keyframes regflash{ 0%{opacity:0;transform:translateX(-50%) scale(.94)} 12%{opacity:1}
  78%{opacity:1} 100%{opacity:.0; transform:translateX(-50%) scale(1)} }

/* Cartel stamp */
.cartel-stamp{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%) rotate(-9deg);
  z-index:6; font-family:var(--disp); font-weight:700; font-size:clamp(54px,8vw,120px);
  letter-spacing:.08em; color:rgba(255,107,107,.16);
  border:5px solid rgba(255,107,107,.18); padding:6px 34px 14px; border-radius:8px;
  pointer-events:none; text-shadow:0 0 40px rgba(255,80,80,.2);
  animation:stampin .6s cubic-bezier(.2,1.3,.4,1); }
@keyframes stampin{ 0%{opacity:0;transform:translate(-50%,-50%) rotate(-9deg) scale(1.7)}
  100%{opacity:1;transform:translate(-50%,-50%) rotate(-9deg) scale(1)} }

/* ===================== DECK ===================== */
#deck{ background:#0c0c0e; border-left:1px solid var(--line);
  padding:22px 22px 16px; display:flex; flex-direction:column; gap:14px;
  overflow-y:auto; }
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:16px 17px; }
.panel-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.panel-title{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--ink); }
.panel-hint{ font-size:10.5px; color:var(--muted); font-family:var(--mono); letter-spacing:.04em; }

/* Slider / ladder */
.ladder{ padding:2px 4px 0; }
#bw{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px;
  background:linear-gradient(90deg,var(--green),var(--gold) 55%,var(--coral));
  outline:none; margin-bottom:4px; cursor:pointer; }
#bw::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid #0c0c0e; box-shadow:0 0 0 2px var(--cyan),0 4px 14px #000;
  cursor:grab; transition:transform .1s; }
#bw::-webkit-slider-thumb:active{ transform:scale(1.12); cursor:grabbing; }
#bw::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff;
  border:3px solid #0c0c0e; box-shadow:0 0 0 2px var(--cyan); cursor:grab; }
.ladder-ticks{ display:flex; justify-content:space-between; margin-top:6px; }
.tick{ background:none; border:none; color:var(--muted); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:1px; font-family:var(--mono);
  padding:4px 6px; border-radius:6px; transition:color .2s,background .2s; }
.tick b{ font-size:12px; letter-spacing:.05em; }
.tick i{ font-style:normal; font-size:9.5px; letter-spacing:.06em; }
.tick:hover{ color:var(--ink); }
.tick.active{ color:var(--cyan); background:rgba(0,212,255,.08); }

.level-readout{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.lr-name{ font-family:var(--disp); font-weight:700; font-size:19px; letter-spacing:.02em; }
.lr-blurb{ color:var(--muted); font-size:12.5px; margin-top:5px; line-height:1.45; min-height:34px; }
.lr-k{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:9px; letter-spacing:.04em; }
.lr-k b{ color:var(--gold); }

/* Transport */
.transport{ display:flex; gap:9px; }
.btn{ flex:1; font-family:var(--mono); font-size:12px; letter-spacing:.04em;
  color:var(--ink); background:rgba(255,255,255,.05); border:1px solid var(--line);
  border-radius:9px; padding:11px 8px; cursor:pointer; transition:.16s;
  display:flex; align-items:center; justify-content:center; gap:6px; }
.btn:hover{ background:rgba(255,255,255,.1); border-color:rgba(244,241,234,.22); }
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:rgba(0,212,255,.12); border-color:rgba(0,212,255,.35); color:#cfeffb; }
.btn.primary:hover{ background:rgba(0,212,255,.2); }
.btn .ico-pause{ display:none; }
.btn.playing .ico-play{ display:none; }
.btn.playing .ico-pause{ display:inline; }
.btn:focus-visible,.tick:focus-visible,#bw:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

.round-row{ display:flex; align-items:center; gap:14px; margin-top:13px; }
.round-label{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--muted); }
.round-count{ font-family:var(--mono); font-weight:700; font-size:18px; }
.round-count i{ font-style:normal; color:var(--muted); font-weight:500; font-size:13px; }
.reg-toggle{ margin-left:auto; display:flex; align-items:center; gap:8px; cursor:pointer; }
.reg-toggle input{ position:absolute; opacity:0; width:0; height:0; }
.reg-knob{ width:34px; height:18px; border-radius:10px; background:rgba(255,255,255,.12);
  position:relative; transition:.2s; }
.reg-knob::after{ content:""; position:absolute; top:2px; left:2px; width:14px; height:14px;
  border-radius:50%; background:#fff; transition:.2s; }
.reg-toggle input:checked + .reg-knob{ background:rgba(255,107,107,.55); }
.reg-toggle input:checked + .reg-knob::after{ transform:translateX(16px); }
.reg-toggle input:focus-visible + .reg-knob{ outline:2px solid var(--cyan); outline-offset:2px; }
.reg-text{ font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.06em; }

/* Transcript */
.transcript-panel{ flex:1; min-height:120px; display:flex; flex-direction:column; }
.transcript{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px;
  font-family:var(--mono); font-size:12px; line-height:1.4; max-height:240px; }
.tline{ padding:8px 11px; border-radius:9px; max-width:92%; animation:slidein .35s ease; }
@keyframes slidein{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.tline.a{ align-self:flex-start; background:rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.22); }
.tline.b{ align-self:flex-end; background:rgba(192,158,90,.12); border:1px solid rgba(192,158,90,.28); }
.tline .who{ display:block; font-size:9px; letter-spacing:.16em; opacity:.7; margin-bottom:3px; }
.tline.a .who{ color:var(--cyan); }
.tline.b .who{ color:var(--gold); }
.tline.sig{ font-weight:700; letter-spacing:.1em; opacity:.9; }
.tline.empty{ align-self:center; color:var(--muted); background:none; border:none; font-style:italic; opacity:.6; }

/* Verdict */
.verdict-panel{ background:linear-gradient(150deg,rgba(40,16,16,.6),rgba(20,14,14,.6));
  border-color:rgba(255,107,107,.3); }
.verdict-panel.win{ background:linear-gradient(150deg,rgba(16,40,28,.55),rgba(14,20,18,.6));
  border-color:rgba(47,208,138,.3); }
.verdict-head{ font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--muted); }
.verdict-line{ font-family:var(--disp); font-weight:500; font-size:16.5px; margin-top:7px; line-height:1.3; }
.verdict-line b{ font-family:var(--mono); }
.verdict-foot{ font-size:11.5px; color:var(--muted); margin-top:7px; line-height:1.4; }

#credits{ font-size:10.5px; color:var(--muted); text-align:center; line-height:1.5;
  margin-top:auto; padding-top:6px; }
#credits a{ color:var(--gold); text-decoration:none; }
#credits a:hover{ text-decoration:underline; }

/* Responsive */
@media (max-width:1120px){
  #app{ grid-template-columns:1fr minmax(320px,360px); }
  #wallet{ width:210px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.05ms !important; }
}