*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --px:'Press Start 2P',monospace;
  --body:'VT323',monospace;
  --vn:'Be Vietnam Pro',sans-serif;
  --dark:#0f0f1a;--panel:#1a1a2e;--card:#16213e;
  --border:#4a4a8a;--text:#c8c8f0;--muted:#6868a8;
  --accent:#00ff88;--accent2:#ffd700;
  --red:#ff3030;--blue:#4488ff;
  --sidebar:260px;--right:320px;
}
html,body{height:100%;overflow:hidden;background:var(--dark);color:var(--text);font-family:var(--px);font-size:10px}

/* NES.css dark overrides */
.nes-container{background:var(--card)!important;color:var(--text)!important}
.nes-container.with-title>.title{background:var(--card)!important;color:var(--accent2)!important;font-size:8px}
.nes-btn{font-size:8px!important;font-family:var(--px)!important}
.nes-btn.is-primary{background:var(--accent)!important;color:#000!important;border-color:#00cc66!important}
.nes-btn.is-warning{background:var(--accent2)!important;color:#000!important}
.nes-btn.is-error{background:var(--red)!important;color:#fff!important}
.nes-input,.nes-select select{background:#0a0a18!important;color:var(--text)!important;border-color:var(--border)!important;font-family:var(--px)!important;font-size:9px!important}
progress::-webkit-progress-bar{background:#111!important}
progress.is-success::-webkit-progress-value{background:var(--accent)!important}
progress.is-warning::-webkit-progress-value{background:var(--accent2)!important}
progress.is-error::-webkit-progress-value{background:var(--red)!important}

/* Layout */
#app{display:grid;grid-template-columns:var(--sidebar) 1fr var(--right);height:100vh;overflow:hidden}

/* Sidebar */
#sidebar{background:var(--panel);border-right:4px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
#sidebar::-webkit-scrollbar{width:3px}
#sidebar::-webkit-scrollbar-thumb{background:var(--border)}
.sb-logo{padding:14px 12px 10px;border-bottom:4px solid var(--border)}
.sb-logo h1{font-size:13px;color:var(--accent2);text-shadow:2px 2px 0 #000}
.sb-logo h1 span{color:var(--accent)}
.sb-logo p{font-size:6px;color:var(--muted);margin-top:3px}
.player-card{margin:10px 8px;padding:12px;background:var(--card);border:4px solid var(--border)}
.pixel-avatar{font-size:30px;display:block;text-align:center;margin-bottom:8px;animation:pb .8s steps(2) infinite}
@keyframes pb{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.player-name{font-size:9px;color:#fff;text-align:center;text-shadow:2px 2px 0 #000}
.player-stage{font-size:6px;color:var(--accent);text-align:center;margin-top:3px}
.player-age{font-size:6px;color:var(--muted);text-align:center;margin-top:2px}
.xp-wrap{margin-top:8px}
.xp-label{display:flex;justify-content:space-between;font-size:6px;color:var(--muted);margin-bottom:4px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:0 8px 8px}
.stat-box{background:var(--card);border:3px solid var(--border);padding:7px 5px;text-align:center;cursor:default}
.stat-val{font-size:10px;font-family:var(--px);color:#fff;text-shadow:2px 2px 0 #000}
.stat-lbl{font-size:5px;color:var(--muted);margin-top:2px;text-transform:uppercase}
.stat-box.pos .stat-val{color:var(--accent)}
.stat-box.neg .stat-val{color:var(--red)}
.stat-box.gold .stat-val{color:var(--accent2)}
.dc-box{margin:0 8px 8px;padding:9px;background:var(--card);border:3px solid var(--accent);display:flex;align-items:center;gap:8px}
.dc-count{font-size:22px;font-family:var(--px);color:var(--accent);text-shadow:2px 2px 0 #000}
.dc-info-title{font-size:6px;color:#fff}
.dc-info-sub{font-size:5px;color:var(--muted);margin-top:2px}
.nav-section{padding:0 8px;margin-bottom:6px}
.nav-title{font-size:6px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;padding-left:3px}
.nav-btn{width:100%;display:flex;align-items:center;gap:7px;padding:7px 9px;border:3px solid transparent;background:transparent;color:var(--text);font-size:7px;font-family:var(--px);cursor:pointer;text-align:left;margin-bottom:3px}
.nav-btn:hover{background:rgba(255,255,255,.05);border-color:var(--border)}
.nav-btn.active{background:rgba(0,255,136,.1);color:var(--accent);border-color:var(--accent)}
.nav-btn .nb-icon{font-size:13px;width:18px}
.nb-badge{margin-left:auto;background:var(--red);color:#fff;font-size:6px;padding:2px 5px;border:2px solid #ff8888;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sb-bottom{margin-top:auto;padding:9px 12px;border-top:4px solid var(--border);font-size:6px;color:var(--muted)}
#sb-newrun{display:none;width:calc(100% - 16px);margin:0 8px 6px;padding:8px;background:rgba(0,255,136,.06);border:3px solid rgba(0,255,136,.3);color:var(--accent);font-size:11px;font-family:var(--body);cursor:pointer;text-align:center;letter-spacing:1px}
#sb-newrun:hover{background:rgba(0,255,136,.14);border-color:var(--accent)}
.sb-bottom span{color:var(--accent2)}

/* ── SIDEBAR REDESIGN (hero vitals + drawers) ───────── */
.sb-logo{padding:12px;border-bottom:4px solid var(--border);display:flex;align-items:center;gap:6px}
#lang-btn{background:none;border:2px solid var(--border);color:var(--muted);font-size:6px;padding:3px 6px;cursor:pointer;font-family:var(--px);flex-shrink:0}
#lang-btn:hover{border-color:var(--accent2);color:var(--accent2)}
/* Shared sidebar card */
.sb-card{margin:0 8px 8px;background:var(--card);border:3px solid var(--border);padding:9px 10px}
/* Identity chip (horizontal, was a tall centered block) */
.sb-idchip{display:flex;align-items:center;gap:9px;padding:8px 10px;margin:8px}
.sb-idchip .idchip-av{position:relative;flex-shrink:0}
.sb-idchip .pixel-avatar{font-size:26px;display:block;margin:0;text-align:center}
.sb-idchip .av-emo{position:absolute;bottom:-2px;right:-5px;font-size:12px;line-height:1}
.sb-idchip .idchip-info{min-width:0;flex:1}
.sb-idchip .player-name{font-size:9px;text-align:left}
.sb-idchip .player-stage{font-size:6px;text-align:left;margin-top:3px;line-height:1.4}
.sb-idchip .player-age{font-size:6px;text-align:left;margin-top:2px}
/* Money hero */
.sb-money{background:linear-gradient(135deg,rgba(255,215,0,.09),var(--card) 65%);border-color:rgba(255,215,0,.45)}
.sb-money-main{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.sb-money-val{font-size:20px;font-family:var(--px);color:var(--accent2);text-shadow:2px 2px 0 #000;line-height:1}
.sb-money-lbl{font-size:6px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.sb-money-nw{font-size:6px;color:var(--muted);margin-top:7px;letter-spacing:.5px}
.sb-money-nw span{color:var(--accent);font-family:var(--px);font-size:8px}
/* Vitals pill row */
.vitals-row{display:flex;gap:5px;padding:0 8px 8px}
.vpill{flex:1;min-width:0;background:var(--card);border:3px solid var(--border);padding:6px 3px 5px;display:flex;flex-direction:column;align-items:center;gap:3px;overflow:hidden}
.vpill .vp-ic{font-size:13px;line-height:1}
.vpill .vp-val{font-size:8px;font-family:var(--px);color:#fff;text-shadow:1px 1px 0 #000}
.vp-health{border-color:rgba(255,80,80,.4)}
.vp-energy{border-color:rgba(255,170,0,.4)}
.vp-happy{border-color:rgba(0,255,136,.35)}
.vp-stress{border-color:rgba(120,120,255,.4)}
.vp-dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;max-width:100%;min-height:8px}
.vp-dots .edot{width:5px;height:5px;border-width:1px}
.vp-bar{width:100%;height:4px;margin-top:1px}
/* Progress card (XP + stage) */
.sb-prog{padding:8px 10px}
.sb-prog-row{display:flex;align-items:center;gap:6px}
.sb-prog-row+.sb-prog-row{margin-top:6px}
.sb-prog-lbl{font-size:6px;color:var(--muted);width:36px;flex-shrink:0;font-family:var(--px)}
.sb-prog-row progress{flex:1;height:10px}
.sb-prog-val{font-size:6px;color:var(--muted);width:34px;text-align:right;flex-shrink:0}
/* Finances drawer */
.sb-drawer{margin:0 8px 8px}
.sb-drawer>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:var(--card);border:3px solid var(--border);font-size:7px;font-family:var(--px);color:var(--text)}
.sb-drawer>summary::-webkit-details-marker{display:none}
.sb-drawer>summary:hover{border-color:var(--accent);color:#fff}
.sb-drawer .drawer-caret{color:var(--muted);transition:transform .15s steps(2)}
.sb-drawer[open]>summary .drawer-caret{transform:rotate(90deg)}
.sb-drawer-grid{grid-template-columns:1fr 1fr 1fr;padding:8px 0 0}

/* City */
#city-area{position:relative;overflow:hidden;background:#0a0e1a}
#city-canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;cursor:default;touch-action:none}
#city-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
#city-area::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.12) 3px,rgba(0,0,0,.12) 4px);pointer-events:none;z-index:2}
.city-ui-overlay{position:absolute;inset:0;pointer-events:none;z-index:3}
.city-title-bar{position:absolute;top:10px;left:10px;background:rgba(10,14,26,.9);border:3px solid var(--border);padding:7px 11px}
.city-title{font-size:9px;font-family:var(--px);color:var(--accent2);text-shadow:2px 2px 0 #000}
.city-subtitle{font-size:6px;color:var(--muted);margin-top:2px}
.city-time{position:absolute;top:10px;right:10px;background:rgba(10,14,26,.9);border:3px solid var(--border);padding:7px 11px;font-size:8px;font-family:var(--px);color:var(--accent2)}
.building-tooltip{position:absolute;background:rgba(10,14,26,.97);border:3px solid var(--border);padding:9px 11px;pointer-events:none;opacity:0;min-width:150px;z-index:5;transition:opacity .1s steps(1)}
.building-tooltip.show{opacity:1}
.bt-name{font-size:9px;font-family:var(--px);color:#fff;text-shadow:2px 2px 0 #000}
.bt-desc{font-size:6px;color:var(--muted);margin-top:3px}
.bt-action{font-size:7px;color:var(--accent);margin-top:5px}
.city-controls{position:absolute;bottom:10px;left:10px;display:flex;gap:5px;pointer-events:all;z-index:5}
.ctrl-btn{background:rgba(10,14,26,.9);border:3px solid var(--border);padding:5px 9px;color:var(--text);font-size:7px;font-family:var(--px);cursor:pointer}
.ctrl-btn:hover{border-color:var(--accent);color:#fff}
.ctrl-btn:active{transform:translate(2px,2px)}
/* ── Left city quick-buttons ─────────────────────────── */
.city-quick-btns{position:absolute;top:68px;left:10px;display:flex;flex-direction:column;gap:5px;pointer-events:all;z-index:5}
.cq-btn{background:rgba(10,14,26,.9);border:3px solid var(--border);padding:6px 10px;color:var(--text);font-size:7px;font-family:var(--px);cursor:pointer;text-align:left;white-space:nowrap}
.cq-btn:hover{border-color:var(--accent);color:#fff}
.cq-btn:active{transform:translate(2px,2px)}
.cq-btn.danger{border-color:var(--red);color:var(--red)}
.cq-btn.danger:hover{background:rgba(255,48,48,.1)}
#mute-btn{padding:3px 8px;font-size:6px;border-color:var(--muted);color:var(--muted);opacity:.75;margin-top:4px}
#mute-btn:hover{border-color:var(--accent2);color:var(--accent2);opacity:1}
#app.ui-hidden{grid-template-columns:1fr}
#app.ui-hidden #sidebar,#app.ui-hidden #right-panel{display:none}

/* Right panel */
#right-panel{background:var(--panel);border-left:4px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.rp-header{padding:12px 12px 8px;border-bottom:4px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.rp-title{font-size:9px;font-family:var(--px);color:#fff;text-shadow:2px 2px 0 #000}
.rp-badge{background:var(--accent);color:#000;font-size:6px;font-family:var(--px);padding:3px 7px;border:2px solid #00cc66}
.rp-content{flex:1;overflow-y:auto;padding:10px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.rp-content::-webkit-scrollbar{width:3px}
.rp-content::-webkit-scrollbar-thumb{background:var(--border)}
.draw-card-btn{margin:0 10px 10px;padding:11px;background:linear-gradient(180deg,#2E7D32,#1B5E20);border:4px solid #4CAF50;color:#fff;font-size:8px;font-family:var(--px);cursor:pointer;width:calc(100% - 20px);text-shadow:2px 2px 0 #000;box-shadow:4px 4px 0 #0a2a0a}
.draw-card-btn:hover{filter:brightness(1.2)}
.draw-card-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 #0a2a0a}
.draw-card-btn.pulse{animation:dpulse 2s steps(2) infinite}
@keyframes dpulse{0%,100%{box-shadow:4px 4px 0 #0a2a0a}50%{box-shadow:4px 4px 0 #00ff88,0 0 16px rgba(0,255,136,.3)}}

/* Event card */
/* ── Full-screen card modal (TFT style) ── */
#card-modal{position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.90);display:none;flex-direction:column;align-items:center;justify-content:flex-start;padding:40px 24px 32px;overflow-y:auto;pointer-events:all;perspective:1100px}
#card-modal.cm-out{animation:cmOut .18s ease-in forwards;pointer-events:none}
@keyframes cmOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.97)}}
/* ── Card-deal entrance: a card flips up out of the deck on each fresh draw.
   Added by renderCard() only when a NEW card is dealt (not on DC/lang re-renders). ── */
#card-modal.cm-deal .cm-header{transform-origin:50% 100%;backface-visibility:hidden;animation:cardDeal .44s cubic-bezier(.18,.72,.28,1) both}
#card-modal.cm-deal .cm-choices{animation:cardDealChoices .34s .24s both ease-out}
@keyframes cardDeal{0%{opacity:0;transform:translateY(-130px) scale(.62) rotateX(82deg)}55%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1) rotateX(0)}}
@keyframes cardDealChoices{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){#card-modal.cm-deal .cm-header,#card-modal.cm-deal .cm-choices{animation-duration:.01ms}}

/* ── CARD FX ─────────────────────────────────────────────────────────────
   Shared card vocabulary for TF2 + the entry picker (js/19-card-fx.js).
   DEAL reuses @keyframes cardDeal above — SP and TF2 draw with one motion.
   FONT TRAP: .cfx-title/.cfx-sub carry Vietnamese arc copy, so they use
   --body; Press Start 2P (--px) has no diacritics and is chrome-only here. */
.cfx-card{position:relative;background:var(--card);border:3px solid var(--border);box-shadow:4px 4px 0 #000;padding:12px 13px;box-sizing:border-box;perspective:1100px}
.cfx-inner{transition:transform .34s cubic-bezier(.18,.72,.28,1);transform-style:preserve-3d}
.cfx-card.cfx-flipped .cfx-inner{transform:rotateY(180deg)}
.cfx-ic{font-size:22px;line-height:1;margin-bottom:7px;text-align:center}
.cfx-title{font-family:var(--body);font-size:17px;line-height:1.35;color:#fff;text-shadow:2px 2px 0 #000}
.cfx-sub{font-family:var(--body);font-size:14px;line-height:1.4;color:var(--muted);margin-top:4px}
.cfx-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.cfx-chip,.cfx-label{font-family:var(--px);font-size:7px;letter-spacing:.08em;padding:3px 5px;border:1px solid currentColor}
/* Countdown digit (js/17 _tf2ShowCountdown) — a big glowing glyph that PUNCHES
   in each tick with an expanding shock-ring, not a number sitting in a box.
   ASCII digits + GO! only, so --px is safe here. Colour comes from the wrapper
   (currentColor) so the ring and glow track the digit's accent. */
.tf2-cd-card{position:relative;display:inline-flex;align-items:center;justify-content:center}
.tf2-cd-digit{position:relative;z-index:1;font-family:var(--px);font-size:clamp(64px,15vw,140px);line-height:1;
  text-shadow:0 0 22px currentColor,0 0 44px currentColor,6px 6px 0 #000;
  animation:tf2CdPunch .52s cubic-bezier(.2,1.7,.35,1) both}
.tf2-cd-digit.tf2-cd-go{font-size:clamp(74px,18vw,168px);letter-spacing:2px}
.tf2-cd-ring{position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px 0 0 -70px;
  border:5px solid currentColor;border-radius:50%;pointer-events:none;animation:tf2CdRing .6s ease-out both}
@keyframes tf2CdPunch{0%{opacity:0;transform:scale(2) rotate(-6deg);filter:blur(4px)}
  50%{opacity:1;filter:blur(0)}70%{transform:scale(.88)}85%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes tf2CdRing{0%{opacity:.75;transform:scale(.35)}100%{opacity:0;transform:scale(2.6)}}
/* Reduced motion: the countdown is a purposeful FEEDBACK beat, not an ambient
   loop — the game keeps its interactive juice (entry card flips, coin/celebrate)
   under this setting too, so keep it animated. Just gentler: drop the blur and
   the spin, keep a clear pop + the ring. */
@media (prefers-reduced-motion:reduce){
  .tf2-cd-digit{animation:tf2CdPunchLite .36s ease both}
}
@keyframes tf2CdPunchLite{0%{opacity:0;transform:scale(1.6)}55%{opacity:1}74%{transform:scale(.92)}100%{transform:scale(1)}}
/* ── TF2 WAITING ROOM (js/17 _tf2RenderRoster / _tf2RenderAvatarPicker) ──
   Waiting should feel like a room filling up, not a list mutating. Arrivals
   pop in, the count eases, and the START button pulses once it's a real room.
   min-width:0 on the name is what stops a long generated handle (NEON_FOX_07)
   from pushing the HOST tag off the row. */
.tf2-lobby-row{display:flex;align-items:center;gap:6px;padding:6px 8px;border:2px solid var(--border);
  background:transparent;margin-bottom:5px}
.tf2-lobby-row.me{background:rgba(0,255,136,.08)}
.tf2-lobby-av{font-size:var(--fs-lg);flex:0 0 auto}
.tf2-lobby-name{flex:1 1 auto;min-width:0;font-size:var(--fs-md);color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf2-lobby-tag{flex:0 0 auto;font-size:var(--fs-label);font-family:var(--px);color:var(--accent2)}
.tf2-lobby-pop{animation:tf2LobbyPop .34s cubic-bezier(.2,1.6,.4,1) both}
@keyframes tf2LobbyPop{0%{opacity:0;transform:translateX(-14px) scale(.9)}
  60%{opacity:1;transform:translateX(0) scale(1.04)}100%{transform:scale(1)}}
.tf2-ready-pulse{animation:tf2ReadyPulse 1.5s ease-in-out infinite}
@keyframes tf2ReadyPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
.tf2-av-btn{font-size:16px;line-height:1;padding:4px 5px;background:#0a0e1a;border:2px solid var(--border);
  cursor:pointer;color:#fff}
.tf2-av-btn.sel{border-color:var(--accent);background:rgba(0,255,136,.12)}
.tf2-hold-title{font-family:var(--px);font-size:var(--fs-label);color:var(--accent2);text-align:center;margin-bottom:5px}
.tf2-hold-row{display:flex;align-items:center;gap:6px;font-size:var(--fs-md);color:var(--muted);padding:2px 4px}
.tf2-hold-rank{flex:0 0 auto;font-family:var(--px);font-size:var(--fs-label);color:var(--accent)}
.tf2-hold-nw{flex:0 0 auto;color:#fff}
/* ── PRESENCE (js/17 _tf2HereRepaint) ──
   Three states, not two: a row we have not heard from YET is `joining`, never
   `away`. State is never carried by colour alone — filled / hollow / soft
   differ in SHAPE too, so it survives colour-blindness and the reduced-motion
   path below, where the pulse is gone. */
.tf2-lobby-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;box-sizing:border-box;
  background:transparent;border:2px solid var(--muted)}
.tf2-lobby-dot.live{background:var(--accent);border-color:var(--accent);animation:tf2HerePulse 2s ease-in-out infinite}
.tf2-lobby-dot.away{background:transparent;border-color:#ffb300}
.tf2-lobby-dot.joining{background:rgba(255,255,255,.22);border-color:var(--muted)}
@keyframes tf2HerePulse{0%,100%{opacity:1}50%{opacity:.4}}
.tf2-lobby-st{flex:0 0 auto;font-size:var(--fs-label);color:var(--muted);font-style:italic}
.tf2-lobby-row.away{opacity:.45}
.tf2-lobby-row.rdy{border-color:var(--accent)}
.tf2-lobby-row.rdy::after{content:'✓';flex:0 0 auto;font-family:var(--px);font-size:var(--fs-label);color:var(--accent)}
#tf2-ready-btn.on{background:linear-gradient(180deg,#2E7D32,#1B5E20);border-color:#4CAF50}
/* The pop and the pulse are ambient, not feedback — unlike the countdown they
   carry no information, so reduced motion switches them off entirely. js/17
   also skips them at the source (TFE2_UI.reduced); this is the backstop. */
@media (prefers-reduced-motion:reduce){
  .tf2-lobby-pop{animation:none}
  .tf2-ready-pulse{animation:none}
  .tf2-lobby-dot.live{animation:none}
}
/* ── TF2 LOBBY: SCROLL + ARRIVAL JUICE ──────────────────────────────────
   The scroll itself is inline on #tf2-lobby in index.html, deliberately: it
   is a correctness fix (content was unreachable) and must survive this file
   or js/27 being dropped. Everything here is the motion on top of it. */
#tf2-lobby{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
#tf2-lobby::-webkit-scrollbar{width:8px}
#tf2-lobby::-webkit-scrollbar-thumb{background:var(--border)}
/* The card lands rather than appears. Keyed off the card, so it replays every
   time the lobby is reopened (the element is re-shown, not rebuilt — the
   animation restarts because display:none tears the running one down). */
#tf2-lobby-card{animation:tf2LobbyIn .26s cubic-bezier(.2,.9,.3,1.2) backwards}
/* The waiting room's blocks arrive in reading order instead of all at once:
   invite first, then the room, then what you do about it. Six steps is enough
   for the top of the panel — anything past it is already below the fold.
   BACKWARDS, never `both`: a filled-forwards animation ending at opacity:1
   outranks normal declarations for good, which would pin #tf2-qr and
   #tf2-you-block opaque and silently kill js/27's hero-state dimming. */
#tf2-lobby-wait > *{animation:tf2LobbyRise .3s ease backwards}
#tf2-lobby-wait > :nth-child(2){animation-delay:.04s}
#tf2-lobby-wait > :nth-child(3){animation-delay:.08s}
#tf2-lobby-wait > :nth-child(4){animation-delay:.12s}
#tf2-lobby-wait > :nth-child(5){animation-delay:.16s}
#tf2-lobby-wait > :nth-child(n+6){animation-delay:.2s}
@keyframes tf2LobbyIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tf2LobbyRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* The scroll cue. Hidden by default so the markup is inert without js/27. */
#tf2-lb-more{display:none;position:fixed;left:50%;bottom:10px;transform:translateX(-50%);
  z-index:2;pointer-events:none;font-family:var(--px);font-size:12px;line-height:1;
  color:#02060d;background:var(--accent);border:3px solid #02060d;box-shadow:3px 3px 0 #000;
  padding:5px 12px}
#tf2-lobby.can-scroll #tf2-lb-more{display:block;animation:tf2LobbyNudge 1.4s ease-in-out infinite}
@keyframes tf2LobbyNudge{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,4px)}}
@media (prefers-reduced-motion:reduce){
  #tf2-lobby{scroll-behavior:auto}
  #tf2-lobby-card,#tf2-lobby-wait > *{animation:none}
  #tf2-lobby.can-scroll #tf2-lb-more{animation:none}
}

/* ── TF2 LOBBY STAGE (js/27) ────────────────────────────────────────────
   Hierarchy, not density — the js/22 thesis applied to the waiting room. The
   panel was nine co-equal blocks with nothing louder than anything else, so
   the eye had nowhere to land. Exactly one thing is loud at a time now, and
   which one is chosen by _tf2StageHeroClass() from the room's actual state.

   EVERY rule here is scoped to .tf2-stage or a .tf2-lb-* element, and only
   js/27 ever adds that class. Delete js/27's <script> tag and the Phase-1
   lobby returns exactly — the class is the feature flag and the rollback at
   once, the same trick js/22 plays with .tf2-ladder. */
.tf2-stage{position:relative}
.tf2-stage>*{position:relative;z-index:1}
/* The market tape sits BEHIND everything and is decoration only: a local
   random walk in js/27 over TF_ASSETS, with no engine, session or network.
   Low opacity and no numbers, so it can never be mistaken for real prices. */
.tf2-stage>#tf2-lb-tape{position:absolute;inset:-8px -4px;z-index:0;overflow:hidden;
  pointer-events:none;opacity:.13;display:flex;flex-direction:column;justify-content:space-around}
.tf2-lb-tape-row{display:flex;gap:18px;white-space:nowrap;width:max-content;
  animation:tf2StageTape 60s linear infinite}
.tf2-lb-chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--px);
  font-size:var(--fs-label);color:var(--muted)}
.tf2-lb-chip.up{color:var(--accent)}
.tf2-lb-chip.dn{color:#ff5252}
.tf2-lb-spark{flex:0 0 auto}
@keyframes tf2StageTape{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* THE GRID. Thirty names in a vertical scroll is a pit to be dug through;
   four columns of faces reads as a crowd at a glance. max-height carries
   !important because #tf2-roster's is an inline style from index.html —
   overriding it in the stylesheet is what keeps the Phase-1 value intact when
   this layer is removed. */
.tf2-stage #tf2-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:6px;max-height:250px!important}
.tf2-stage .tf2-lobby-row{flex-direction:column;gap:2px;padding:7px 4px;margin-bottom:0;
  text-align:center;position:relative;background:rgba(4,10,20,.55)}
.tf2-stage .tf2-lobby-av{font-size:26px;animation:tf2StageBob 1.8s steps(1) infinite}
.tf2-stage .tf2-lobby-name{flex:0 0 auto;width:100%;font-size:var(--fs-label);text-align:center}
.tf2-stage .tf2-lobby-dot{position:absolute;top:5px;right:5px}
.tf2-stage .tf2-lobby-st{font-size:9px;font-style:italic}
.tf2-stage .tf2-lobby-tag{position:absolute;top:4px;left:5px;font-size:7px}
/* The READY stamp reuses the countdown's punch curve rather than inventing a
   second one — same 8-bit vocabulary, already tuned. */
.tf2-stage .tf2-lobby-row.rdy::after{position:absolute;bottom:2px;right:5px;
  animation:tf2CdPunchLite .36s ease both}
@keyframes tf2StageBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* THE TICKER. A departure used to be a row that silently stopped existing. */
#tf2-lb-ticker{margin-bottom:8px}
.tf2-lb-tk{font-size:var(--fs-md);color:var(--muted);padding:2px 6px;margin-bottom:3px;
  border-left:3px solid var(--accent2);animation:tf2StageTk .3s ease both}
@keyframes tf2StageTk{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}

/* THE CODE AS AN OBJECT. Six slot boxes, not a letter-spaced string. The
   inline letter-spacing has to be overridden or it opens a gap inside each
   slot. A-Z + 2-9 only, so var(--px) is safe on the code itself. */
.tf2-stage #tf2-room-code{display:flex;justify-content:center;gap:5px;cursor:pointer;
  letter-spacing:0!important;margin-bottom:8px}
.tf2-lb-slot{display:inline-flex;align-items:center;justify-content:center;line-height:1;
  min-width:26px;padding:6px 2px;background:#0a0e1a;border:3px solid var(--border);
  font-family:var(--px);color:var(--accent2)}

/* THE FOUR HERO STATES. CSS does all of it — js/27 sets one class and stops. */
.tf2-stage.hero-code .tf2-lb-slot{min-width:34px;padding:9px 3px;font-size:20px}
.tf2-stage.hero-code #tf2-roster{opacity:.62}
.tf2-stage.hero-room .tf2-lb-slot{min-width:22px;padding:4px 2px;font-size:12px}
.tf2-stage.hero-room #tf2-qr,.tf2-stage.hero-room #tf2-you-block{opacity:.7}
.tf2-stage.hero-start .tf2-lb-slot{min-width:20px;padding:3px 2px;font-size:11px}
.tf2-stage.hero-start #tf2-start-btn{padding:20px!important;font-size:12px!important}
.tf2-stage.hero-start #tf2-qr,.tf2-stage.hero-start #tf2-you-block,
.tf2-stage.hero-start>#tf2-lb-tape{opacity:.3}

/* Two layers, matching the pattern above: js/27 skips the tape at the source
   on TFE2_UI.reduced, and this is the backstop for everything else. Bob, tape,
   stamp and ticker-slide all carry no information, so they simply stop. */
@media (prefers-reduced-motion:reduce){
  .tf2-stage .tf2-lobby-av{animation:none}
  .tf2-lb-tape-row{animation:none}
  .tf2-stage .tf2-lobby-row.rdy::after{animation:none}
  .tf2-lb-tk{animation:none}
  .tf2-stage>#tf2-lb-tape{display:none}
}
.cfx-ghost{position:fixed;margin:0;pointer-events:none;z-index:60;opacity:.85}
/* The booth tip is itself a bordered panel; when it hosts a dealt card, drop its
   own chrome so the card isn't boxed twice. Doubled specificity beats the
   .tf2-tip rule in index.html's inline <style> regardless of source order. */
/* max-height/overflow are reset too: .tf2-tip is a scrollbox so the spread picker's
   trader list stays reachable, but a dealt card lifts (cfxLift) and carries a hard
   7px shadow — inside a scroll container both get clipped, and the card gains a
   scrollbar it has no content for. */
.tf2-tip.tf2-tip--card{background:transparent;border-color:transparent;padding:0;min-height:0;max-height:none;overflow:visible}
/* The drawn rumour is THE moment — a real, raised card that pops off the modal.
   Lighter gradient face (the base .cfx-card bg is nearly the modal's), chunky
   border + hard shadow + an inset frame, mirroring the game's entry cards. */
.tf2-tip.tf2-tip--card .cfx-card{max-width:440px;margin:12px auto 6px;padding:26px 26px 28px;text-align:center;
  background:linear-gradient(165deg,#243660,#141f3c);border-width:4px;box-shadow:7px 7px 0 #000;position:relative}
.tf2-tip.tf2-tip--card .cfx-card::before{content:'';position:absolute;inset:6px;border:2px solid rgba(255,255,255,.09);pointer-events:none}
.tf2-tip.tf2-tip--card .cfx-ic{font-size:44px;margin-bottom:14px;filter:drop-shadow(0 0 10px currentColor)}
.tf2-tip.tf2-tip--card .cfx-title{font-size:22px;line-height:1.4}
.tf2-tip.tf2-tip--card .cfx-chips{justify-content:center;margin-top:16px}
.tf2-tip.tf2-tip--card .cfx-chip{font-size:9px;padding:6px 9px}
@keyframes cfxFlyTo{0%{opacity:.9;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--cfx-dx,0),var(--cfx-dy,0)) scale(.34) rotateZ(9deg)}}
@keyframes cfxLift{0%{transform:translateY(0)}42%{transform:translateY(-9px) scale(1.03)}100%{transform:translateY(0)}}
@keyframes cfxFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .cfx-inner{transition:none}
  .cfx-card{animation:cfxFade .01ms both!important}
}
.cm-header{text-align:center;margin-bottom:24px;max-width:720px;width:100%}
.cm-type{display:inline-block;font-size:8px;font-family:var(--px);padding:4px 14px;border:2px solid;margin-bottom:14px;letter-spacing:3px;text-transform:uppercase}
.cm-title{font-size:clamp(13px,2.2vw,20px);font-family:var(--px);color:#fff;text-shadow:3px 3px 0 #000;margin-bottom:18px;line-height:1.4}
.cm-scenario{font-size:clamp(15px,1.6vw,20px);font-family:'VT323',monospace;color:var(--text);line-height:1.75;background:rgba(255,255,255,.04);border-left:4px solid var(--accent2);padding:14px 18px;max-width:720px;width:100%;box-sizing:border-box}
.cm-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;max-width:820px;width:100%;margin-top:32px}
.cm-choice{background:var(--card);border:4px solid var(--border);padding:24px 16px;cursor:pointer;text-align:center;box-shadow:4px 4px 0 #000;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:160px;justify-content:flex-start;transition:border-color .1s,background .1s}
.cm-choice:hover{border-color:var(--accent);background:rgba(0,255,136,.07);color:#fff}
.cm-choice:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}
.cm-choice--broke{border-color:#ff4444!important;cursor:not-allowed!important;opacity:.72;position:relative}
.cm-choice--broke:hover{border-color:#ff4444!important;background:rgba(255,68,68,.08)!important;transform:none!important}
.cm-choice--broke:active{transform:none!important;box-shadow:4px 4px 0 #000!important}
.cm-choice--broke .cm-choice-text{text-decoration:line-through;color:#ff8888!important}
.cm-choice--broke .cm-choice-icon{opacity:.45;filter:grayscale(.6)}
.cm-broke-badge{background:#ff4444;color:#fff;font-family:var(--px);font-size:6px;padding:4px 10px;letter-spacing:1px;border:2px solid #000;box-shadow:2px 2px 0 #000;margin-top:2px;white-space:nowrap}
.cm-choice-icon{font-size:34px}
.cm-choice-text{font-size:16px;font-family:'VT323',monospace;color:#fff;line-height:1.35}
/* ── */
.event-card{background:var(--card);border:4px solid var(--border);margin-bottom:10px;position:relative;overflow:hidden}
.event-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent2)}
.ec-header{padding:10px 12px 8px;border-bottom:3px solid var(--border)}
.ec-badge{display:inline-block;font-size:6px;font-family:var(--px);padding:2px 7px;border:2px solid currentColor;margin-bottom:7px}
.ec-title{font-size:10px;font-family:var(--px);color:#fff;line-height:1.5;text-shadow:2px 2px 0 #000}
.ec-body{padding:10px 12px}
.ec-scenario{font-size:7px;color:var(--text);line-height:1.9;margin-bottom:12px;padding:7px 9px;background:rgba(255,255,255,.04);border-left:4px solid var(--accent2)}
.ec-scenario strong{color:var(--accent2)}
.ec-choices{display:flex;flex-direction:column;gap:5px}
.choice-btn{width:100%;padding:9px 11px;border:3px solid var(--border);background:var(--card);text-align:left;cursor:pointer;display:flex;align-items:flex-start;gap:7px;color:var(--text);font-family:var(--px);box-shadow:3px 3px 0 #000}
.choice-btn:hover{border-color:var(--accent);background:rgba(0,255,136,.06);color:#fff}
.choice-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 #000}
.choice-icon{font-size:14px;flex-shrink:0}
.choice-preview-bar { display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; }
.cpv-s, .cpv-h { font-size:6px; font-family:var(--px); padding:2px 5px; border:2px solid currentColor; }
.cpv-s.pos { color:var(--accent); } .cpv-s.neg { color:var(--red); }
.cpv-h.pos { color:var(--accent); } .cpv-h.neg { color:var(--red); }
.choice-content{flex:1}
.choice-text{font-size:7px;font-family:var(--px);color:#fff;line-height:1.5}
.choice-impact{font-size:6px;margin-top:3px;font-family:var(--px)}
.impact-pos{color:var(--accent)}
.impact-neg{color:var(--red)}
.dc-preview-btn{width:100%;padding:7px;border:3px dashed var(--accent);background:transparent;color:var(--accent);font-size:7px;font-family:var(--px);cursor:pointer;margin-top:5px}
.dc-preview-btn:hover{background:rgba(0,255,136,.06)}
.dc-preview-btn:active{transform:translate(2px,2px)}

/* ── DC OUTCOME PREVIEW — in-game styled replacement for native alert() ── */
.dcp-overlay{position:fixed;inset:0;z-index:760;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:24px;animation:dcpFade .15s ease-out}
@keyframes dcpFade{from{opacity:0}to{opacity:1}}
.dcp-panel{background:var(--card);border:4px solid var(--accent);box-shadow:8px 8px 0 #000;max-width:560px;width:100%;max-height:88vh;overflow-y:auto;padding:20px;box-sizing:border-box}
.dcp-title{font-family:var(--px);font-size:11px;color:var(--accent);text-align:center;margin-bottom:16px;letter-spacing:2px;text-shadow:2px 2px 0 #000}
.dcp-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.dcp-row{display:flex;gap:12px;align-items:flex-start;padding:12px;background:rgba(255,255,255,.04);border:2px solid var(--border)}
.dcp-icon{font-size:26px;flex-shrink:0;line-height:1}
.dcp-choice{font-family:'VT323',monospace;font-size:17px;color:#fff;line-height:1.4;margin-bottom:4px}
.dcp-impact{font-family:'VT323',monospace;font-size:15px;color:var(--accent);line-height:1.4}
.dcp-lesson{background:rgba(249,168,37,.12);border:3px solid var(--accent2);padding:12px;font-family:'VT323',monospace;font-size:16px;color:var(--text);line-height:1.6;margin-bottom:16px}
.dcp-lesson-lbl{display:block;font-family:var(--px);font-size:8px;color:var(--accent2);letter-spacing:2px;margin-bottom:6px}
.dcp-close{width:100%;padding:12px;background:linear-gradient(180deg,#2E7D32,#1B5E20);border:4px solid #4CAF50;color:#fff;font-family:var(--px);font-size:9px;cursor:pointer;box-shadow:4px 4px 0 #000;text-shadow:2px 2px 0 #000}
.dcp-close:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}

/* Outcome card */
.outcome-card{background:var(--card);border:4px solid var(--border);padding:12px;margin-bottom:10px}
.oc-emoji{font-size:36px;text-align:center;display:block;margin-bottom:8px;animation:ppop .3s steps(3) both}
@keyframes ppop{from{transform:scale(0)}to{transform:scale(1)}}
.oc-title{font-size:11px;font-family:var(--px);color:#fff;text-align:center;margin-bottom:3px;text-shadow:2px 2px 0 #000}
.oc-sub{font-size:6px;color:var(--muted);text-align:center;margin-bottom:10px}
.oc-changes{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.oc-row{display:flex;justify-content:space-between;align-items:center;padding:5px 9px;background:rgba(255,255,255,.04);border:2px solid var(--border)}
.oc-label{font-size:7px;color:var(--muted)}
.oc-val{font-size:8px;font-family:var(--px)}
.oc-val.pos{color:var(--accent)}
.oc-val.neg{color:var(--red)}
.lesson-card{background:rgba(249,168,37,.12);border:3px solid var(--accent2);padding:11px 13px;display:flex;flex-direction:column;gap:5px;margin-bottom:10px;position:relative}
.lesson-card::before{content:'💡 LESSON';display:block;font-size:8px;color:var(--accent2);font-family:var(--px);letter-spacing:2px;margin-bottom:4px}
.lesson-icon{display:none}
.lesson-text{font-size:6px;color:var(--text);line-height:1.9}
.btn-continue{width:100%;padding:11px;background:linear-gradient(180deg,#2E7D32,#1B5E20);border:4px solid #4CAF50;color:#fff;font-size:8px;font-family:var(--px);cursor:pointer;box-shadow:4px 4px 0 #000;text-shadow:2px 2px 0 #000}
.btn-continue:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}

/* ── CENTER-SCREEN OUTCOME — the card-modal morphs from decision into consequence here.
   Clean type scale: pixel font only for short labels/headings; VT323 for everything read. */
.cm-outcome{max-width:520px;width:100%;margin:auto 0;background:var(--card);border:4px solid var(--border);box-shadow:8px 8px 0 #000;padding:24px;text-align:center;box-sizing:border-box;animation:cmoIn .22s ease-out}
@keyframes cmoIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.cmo-emoji{font-size:48px;display:block;margin-bottom:8px;animation:ppop .3s steps(3) both}
.cmo-title{font-family:var(--px);font-size:14px;text-shadow:2px 2px 0 #000;margin-bottom:6px;letter-spacing:1px;line-height:1.4}
.cmo-sub{font-family:'VT323',monospace;font-size:17px;color:var(--muted);margin-bottom:16px;line-height:1.35}
.cmo-changes{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.cmo-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:rgba(255,255,255,.04);border:2px solid var(--border)}
.cmo-label{font-family:'VT323',monospace;font-size:16px;color:var(--text)}
.cmo-val{font-family:var(--px);font-size:11px}
.cmo-val.pos{color:var(--accent)}
.cmo-val.neg{color:var(--red)}
.cmo-cf{margin-bottom:14px;padding:8px 10px;border:1px dashed var(--border);font-family:'VT323',monospace;font-size:14px;color:var(--muted);font-style:italic;text-align:left;line-height:1.4}
.cmo-lesson{background:rgba(249,168,37,.12);border:3px solid var(--accent2);padding:14px;text-align:left;margin-bottom:18px;font-family:'VT323',monospace;font-size:16px;color:var(--text);line-height:1.6}
.cmo-lesson-lbl{display:block;font-family:var(--px);font-size:8px;color:var(--accent2);letter-spacing:2px;margin-bottom:6px}
.cmo-continue{width:100%;padding:14px;background:linear-gradient(180deg,#2E7D32,#1B5E20);border:4px solid #4CAF50;color:#fff;font-family:var(--px);font-size:10px;cursor:pointer;box-shadow:4px 4px 0 #000;text-shadow:2px 2px 0 #000}
.cmo-continue:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}

/* Notif */
.notif{background:var(--card);border:3px solid var(--border);padding:9px 11px;margin-bottom:5px;display:flex;gap:7px;align-items:flex-start;animation:slidein .2s steps(3) both}
@keyframes slidein{from{transform:translateX(-6px);opacity:0}to{transform:translateX(0);opacity:1}}
.notif-icon{font-size:13px;flex-shrink:0}
.notif-text{font-size:7px;color:var(--text);line-height:1.7}
.notif-time{font-size:5px;color:var(--muted);margin-top:2px}

/* ── BUILDING LOBBY ─────────────────────────────────────── */
#lobby-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:400;display:none;align-items:center;justify-content:center}
#lobby-overlay.show{display:flex}
.lobby-panel{width:900px;max-width:96vw;max-height:90vh;background:var(--panel);border:6px solid var(--border);box-shadow:8px 8px 0 #000;display:flex;flex-direction:column;animation:lbin .2s steps(4) both;overflow:hidden}
@keyframes lbin{from{transform:scale(.85) translateY(16px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.lobby-header{padding:14px 18px 10px;border-bottom:4px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--card)}
.lobby-title{font-size:13px;font-family:var(--px);color:var(--accent2);text-shadow:3px 3px 0 #000}
.lobby-subtitle{font-size:7px;color:var(--muted);margin-top:4px}
.lobby-close{background:var(--red);border:3px solid #ff6666;color:#fff;font-size:13px;font-family:var(--px);cursor:pointer;padding:5px 11px;box-shadow:3px 3px 0 #000;line-height:1}
.lobby-close:active{transform:translate(3px,3px);box-shadow:0 0 0 #000}
.lobby-tabs{display:flex;border-bottom:4px solid var(--border);background:var(--dark);overflow-x:auto}
.lobby-tab{flex:1;padding:9px 6px;background:transparent;border:none;border-right:4px solid var(--border);border-bottom:none;color:var(--muted);font-size:6px;font-family:var(--px);cursor:pointer;min-width:70px;text-align:center;line-height:1.6}
.lobby-tab:last-child{border-right:none}
.lobby-tab:hover{background:rgba(255,255,255,.05);color:var(--text)}
.lobby-tab.active{background:var(--panel);color:var(--accent2);border-bottom:4px solid var(--panel);margin-bottom:-4px;z-index:1}
.lobby-tab .ticon{font-size:14px;display:block;margin-bottom:3px}
.lobby-body{flex:1;overflow-y:auto;padding:18px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.lobby-body::-webkit-scrollbar{width:3px}
.lobby-body::-webkit-scrollbar-thumb{background:var(--border)}
/* ── LOBBY V2 INTERIOR LAYOUT ── */
.lobby-tabs{display:none!important}
.lobby-v2-grid{display:grid;grid-template-columns:1fr;flex:1;overflow:hidden;min-height:0}
#lobby-sidebar-right{border-right:none;border-left:4px solid var(--border)}
.lobby-v2-main{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.lobby-v2-interior{height:108px;position:relative;background-size:cover;background-position:center;border-bottom:4px solid var(--border);flex-shrink:0;overflow:hidden}
.lobby-int-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.25) 55%,transparent 100%)}
/* Themed floating scene behind the shade */
.lobby-int-scene{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:space-around;padding:2px 12px 22px;pointer-events:none}
.lis-icon{font-size:30px;line-height:1;opacity:.9;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6));animation:lisFloat 3.2s ease-in-out infinite;animation-delay:calc(var(--i,0)*.28s)}
@keyframes lisFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.lobby-int-stats{position:absolute;bottom:0;left:0;right:0;display:flex;z-index:2;border-top:1px solid rgba(255,255,255,.12);background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
.lint-stat{flex:1;text-align:center;padding:5px 3px}
.lint-val{display:block;font-size:9px;font-family:var(--px);color:var(--bld-accent,var(--accent2));text-shadow:1px 1px 0 #000}
.lint-lbl{display:block;font-size:4px;color:rgba(255,255,255,.6);margin-top:1px;letter-spacing:.5px}
/* ── Hero action-card feed (section headers over concatenated action cards) ── */
.lfeed-section{margin-bottom:18px}
.lfeed-section:last-child{margin-bottom:0}
/* One-shot staged reveal on open */
#lobby-body.feed-in .lfeed-section{animation:lfeedIn .42s cubic-bezier(.22,.8,.4,1) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes lfeedIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.lfeed-head{position:sticky;top:-18px;z-index:2;font-size:8px;font-family:var(--px);color:var(--bld-accent,var(--accent2));letter-spacing:1px;padding:8px 0 7px;margin-bottom:8px;border-bottom:3px solid var(--border);background:var(--panel);text-shadow:1px 1px 0 #000}
/* Per-building accent applied inside the panel */
.lobby-panel .lsect-title{color:var(--bld-accent,var(--accent2))}
.lobby-panel .laction:active{transform:translate(3px,3px)}
.la-front,.la-back{transition:border-color .12s}
.laction.la-pop{animation:laPop .24s ease-out}
@keyframes laPop{0%{transform:scale(1)}45%{transform:scale(.98) translate(2px,2px)}100%{transform:scale(1)}}
/* Tap spark burst */
.laction-spark{position:fixed;width:5px;height:5px;pointer-events:none;z-index:10001;image-rendering:pixelated;box-shadow:0 0 3px currentColor;animation:laSpark .44s ease-out forwards}
@keyframes laSpark{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.35)}}
.lstat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.lstat{background:var(--card);border:3px solid var(--border);padding:10px;text-align:center}
.lstat-val{font-size:14px;font-family:var(--px);color:#fff;text-shadow:2px 2px 0 #000;display:block;margin-bottom:3px}
.lstat-val.pos{color:var(--accent)}
.lstat-val.neg{color:var(--red)}
.lstat-val.gold{color:var(--accent2)}
.lstat-lbl{font-size:11px;font-family:var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
/* ── ACTION CARDS (the building's "hand") ──────────────── */
/* Two equal, shrink-to-fit columns so cards always stay inside the tab */
.laction-hand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.laction-hand.n-1{grid-template-columns:minmax(0,300px)}
/* Legacy flat button — bespoke lists (market deals, job list, stock buy/sell, index sliders) */
.laction{position:relative;width:100%;padding:12px 14px;background:var(--card);border:4px solid var(--border);color:var(--text);font-size:8px;font-family:var(--px);cursor:pointer;text-align:left;display:flex;align-items:center;gap:11px;margin-bottom:7px;box-shadow:4px 4px 0 #000;line-height:1.5}
.laction:hover{border-color:var(--accent);background:rgba(0,255,136,.06);color:#fff}
.laction:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}
.laction .la-icon{font-size:20px;flex-shrink:0}
.laction .la-info{flex:1}
.laction .la-name{font-size:8px;color:#fff;text-shadow:1px 1px 0 #000;line-height:1.4}
.la-front .la-name{word-break:break-word;max-width:100%}
.laction .la-badge{font-size:6px;padding:3px 6px;border:2px solid currentColor;font-family:var(--px);flex-shrink:0}
/* Flip-card action (built by _lactionCard) — overrides the flat base */
.laction:has(.la-inner){padding:0;margin:0;background:transparent;border:none;box-shadow:none;display:block;min-height:244px;perspective:1100px;-webkit-tap-highlight-color:transparent}
.laction:has(.la-inner):hover{background:transparent}
.la-inner{position:relative;width:100%;height:100%;min-height:244px;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.75,.25,1.06);will-change:transform}
.laction:hover .la-inner,.laction:focus-visible .la-inner{transform:rotateY(180deg)}
.la-front,.la-back{position:absolute;inset:0;box-sizing:border-box;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:3px solid var(--border);border-radius:12px;box-shadow:4px 4px 0 #000,inset 0 0 0 2px rgba(255,255,255,.04);background:linear-gradient(158deg,rgba(255,255,255,.06),rgba(0,0,0,.2)),var(--card);display:flex;flex-direction:column;transition:border-color .18s,box-shadow .18s}
.la-front{align-items:center;justify-content:center;text-align:center;gap:10px;overflow:hidden;padding:22px 12px 16px}
.la-back{transform:rotateY(180deg);overflow:auto;text-align:left;gap:7px;padding:14px 13px}
/* Type accent strip along the top of the front face */
.la-front::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--border)}
.laction:has(.la-type.pos) .la-front::before{background:var(--accent)}
.laction:has(.la-type.neg) .la-front::before{background:var(--red)}
.laction:has(.la-type.warn) .la-front::before{background:var(--accent2)}
.laction:has(.la-type.lock) .la-front::before{background:var(--muted)}
/* Little "tap to flip" hint in the corner */
.la-front::after{content:'⇄';position:absolute;top:8px;right:9px;font-size:10px;color:var(--muted);opacity:.6}
.laction:hover .la-front,.laction:hover .la-back{border-color:var(--bld-accent,var(--accent));box-shadow:5px 5px 0 #000,0 0 16px rgba(0,255,136,.28),inset 0 0 0 2px rgba(255,255,255,.05)}
.la-type{font-size:7px;font-family:var(--px);letter-spacing:1px;padding:3px 8px;border:2px solid currentColor;border-radius:20px;color:var(--muted);background:rgba(0,0,0,.25)}
.la-type.pos{color:var(--accent)}
.la-type.neg{color:var(--red)}
.la-type.warn{color:var(--accent2)}
.la-type.lock{color:var(--muted)}
/* Icon framed as a medallion — reads like card "art" */
.la-front .la-icon{font-size:38px;line-height:1;width:72px;height:72px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.14),rgba(0,0,0,.28));border:2px solid rgba(255,255,255,.14);box-shadow:inset 0 2px 8px rgba(0,0,0,.45);filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
/* Name in a bottom banner */
.la-front .la-name{font-size:11px;line-height:1.4;width:100%;box-sizing:border-box;background:rgba(0,0,0,.34);border:2px solid rgba(255,255,255,.08);border-radius:5px;padding:6px 7px}
.la-front .la-badge{margin-top:auto;font-size:8px;padding:4px 8px;border-radius:4px;background:rgba(0,0,0,.34)}
/* Card back content — larger, structured, easier to read */
.la-desc{font-size:15px;font-family:var(--body);color:var(--text);line-height:1.5}
.la-quote{font-size:13px;font-family:var(--body);color:var(--text);font-style:italic;line-height:1.45;border-left:3px solid var(--bld-accent,var(--accent2));padding-left:8px;margin-bottom:3px}
.la-cg{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:13px;font-family:var(--body);background:rgba(255,255,255,.05);border:2px solid var(--border);border-radius:5px;padding:5px 8px}
.la-cg span{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:10px}
.la-cg b{color:#fff;text-align:right;font-weight:700}
.la-impact{margin-top:5px}
.la-back .apo-stat-label{font-size:11px}
.la-back .apo-delta{font-size:12px}
.la-lockhint{font-size:12px;font-family:var(--body);color:var(--muted);line-height:1.4;margin-top:4px}
/* Face-down locked slot — no flip */
.laction--facedown{cursor:not-allowed}
.laction--facedown:hover .la-inner{transform:none}
.laction--facedown .la-front{border-style:dashed;opacity:.72}
/* Deal-in: cards stagger in once when a tab opens (feed-in one-shot) */
@keyframes laDeal{0%{opacity:0;transform:translateY(22px) rotate(-4deg) scale(.86)}70%{opacity:1;transform:translateY(-3px) rotate(1deg) scale(1.02)}100%{opacity:1;transform:none}}
#lobby-body.feed-in .laction-hand>.laction{animation:laDeal .42s cubic-bezier(.22,.8,.4,1) both}
#lobby-body.feed-in .laction-hand>.laction:nth-child(1){animation-delay:0ms}
#lobby-body.feed-in .laction-hand>.laction:nth-child(2){animation-delay:45ms}
#lobby-body.feed-in .laction-hand>.laction:nth-child(3){animation-delay:90ms}
#lobby-body.feed-in .laction-hand>.laction:nth-child(4){animation-delay:135ms}
#lobby-body.feed-in .laction-hand>.laction:nth-child(5){animation-delay:180ms}
#lobby-body.feed-in .laction-hand>.laction:nth-child(6){animation-delay:225ms}
#lobby-body.feed-in .laction-hand>.laction:nth-child(7){animation-delay:270ms}
#lobby-body.feed-in .laction-hand>.laction:nth-child(8){animation-delay:315ms}
.la-badge.pos{color:var(--accent)}
.la-badge.neg{color:var(--red)}
.la-badge.warn{color:var(--accent2)}
.la-badge.lock{color:var(--muted)}
.ltip{background:rgba(249,168,37,.07);border:3px solid rgba(249,168,37,.3);padding:10px 12px;font-size:15px;font-family:var(--body);color:var(--text);line-height:1.5;margin-top:12px}
.ltip strong{color:var(--accent2)}
.lsect-title{font-size:8px;font-family:var(--px);color:var(--accent2);margin-bottom:10px;padding-bottom:6px;border-bottom:3px solid var(--border)}
.skill-row{margin-bottom:10px}
.skill-label{display:flex;justify-content:space-between;font-size:7px;margin-bottom:4px}
.skill-label span:first-child{color:var(--text)}
.skill-label span:last-child{color:var(--muted)}

/* ── ACTION PREVIEW OVERLAY ─────────────────────────────── */
#apo-overlay{position:fixed;inset:0;background:rgba(0,0,0,0);z-index:10000;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:background .22s}
#apo-overlay.show{background:rgba(0,0,0,.88);pointer-events:all}
#apo-card{background:var(--panel);border:6px solid var(--border);box-shadow:8px 8px 0 #000;padding:22px 22px 18px;width:340px;max-width:94vw;transform:translateY(64px) scale(.97);opacity:0;transition:transform .32s cubic-bezier(.22,.8,.4,1),opacity .25s;max-height:85vh;overflow-y:auto}
#apo-overlay.show #apo-card{transform:translateY(0) scale(1);opacity:1}
#apo-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
#apo-emoji{font-size:30px;flex-shrink:0}
#apo-title{font-size:11px;font-family:var(--px);color:var(--accent2);text-shadow:2px 2px 0 #000}
#apo-building{font-size:6px;color:var(--muted);margin-top:3px}
#apo-quote{font-size:7px;color:var(--muted);font-style:italic;line-height:1.7;border-left:3px solid var(--accent2);padding:6px 10px;background:rgba(255,255,255,.04);margin-bottom:14px}
.apo-stat-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.apo-stat-label{font-size:5px;font-family:var(--px);color:var(--muted);width:68px;flex-shrink:0;text-transform:uppercase;letter-spacing:.5px}
.apo-bar-track{flex:1;height:10px;background:rgba(255,255,255,.08);border:2px solid var(--border);position:relative;overflow:hidden}
.apo-bar-cur{position:absolute;left:0;top:0;height:100%;background:rgba(255,255,255,.2);transition:none}
.apo-bar-proj{position:absolute;left:0;top:0;height:100%;background:var(--accent);opacity:.85;width:0;transition:width .7s cubic-bezier(.4,0,.2,1)}
.apo-bar-proj.neg-change{background:var(--red)}
.apo-bar-proj.neutral{background:var(--accent2)}
.apo-delta{font-size:7px;font-family:var(--px);width:36px;text-align:right;flex-shrink:0;opacity:0;transform:translateY(4px);transition:opacity .3s .5s,transform .3s .5s}
.apo-delta.pos{color:var(--accent)}
.apo-delta.neg{color:var(--red)}
.apo-delta.warn{color:var(--accent2)}
#apo-summary{display:flex;flex-direction:column;gap:5px;padding:10px 12px;background:var(--card);border:3px solid var(--border);margin:12px 0 14px}
.apo-cost{font-size:7px;color:var(--red);font-family:var(--px)}
.apo-gain{font-size:7px;color:var(--accent);font-family:var(--px)}
#apo-btns{display:flex;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
#apo-btns button{flex:1;padding:11px 8px;font-size:8px;font-family:var(--px);cursor:pointer;border:4px solid;box-shadow:4px 4px 0 #000}
#apo-btns button:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}
#apo-btn-cancel{background:var(--dark);border-color:var(--border);color:var(--muted)}
#apo-btn-confirm{background:var(--accent);border-color:var(--accent);color:#000;font-weight:700}
#apo-btn-confirm:hover{background:#00ffaa}

/* Wallet/skills/market */
.wallet-hero{background:linear-gradient(180deg,rgba(27,94,32,.4),rgba(0,105,92,.3));border:4px solid rgba(0,255,136,.15);padding:14px;margin-bottom:10px;text-align:center}
.wh-label{font-size:6px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.wh-amount{font-size:26px;font-family:var(--px);color:#fff;font-weight:700;margin:5px 0;text-shadow:3px 3px 0 #000}
.wh-net{font-size:7px;color:var(--accent)}
.wh-stats{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:10px}
.wh-stat{background:rgba(0,0,0,.3);border:2px solid var(--border);padding:7px;text-align:center}
.wh-sv{font-size:11px;font-family:var(--px);font-weight:700;color:#fff}
.wh-sl{font-size:5px;color:var(--muted)}
.txn-row{display:flex;align-items:center;gap:7px;padding:7px 9px;background:var(--card);border:3px solid var(--border);margin-bottom:4px}
.txn-icon{font-size:16px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:2px solid var(--border);flex-shrink:0}
.txn-info{flex:1}
.txn-name{font-size:7px;color:#fff}
.txn-when{font-size:5px;color:var(--muted);margin-top:2px}
.txn-amt{font-size:9px;font-family:var(--px);font-weight:700}

/* ══ BACKGROUND PICK (#10) ══ */
#persona-row{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.bg-opt.locked{opacity:.4;cursor:not-allowed;filter:grayscale(1)}
.bg-opt .bg-sig{font-size:13px;font-family:var(--body);color:var(--muted);margin-top:3px;line-height:1.4}
.bg-opt{display:flex;gap:9px;align-items:center;text-align:left;padding:9px 11px;background:var(--card);border:3px solid var(--border);cursor:pointer;font-family:var(--px)}
.bg-opt:hover{border-color:var(--text)}
.bg-opt.sel{border-color:var(--accent);background:rgba(0,255,136,.1)}
.bg-opt .bg-ic{font-size:20px;flex-shrink:0}
.bg-opt .bg-name{font-size:9px;color:#fff;line-height:1.4}
.bg-opt .bg-perk{font-size:14px;font-family:var(--body);color:var(--accent);margin-top:4px;line-height:1.35}
/* ── Dealt hand of life-cards (deal-in + burn-on-select FOMO) ── */
.persona-fomo{font-size:12px;font-family:var(--body);color:var(--accent);font-style:italic;opacity:.9;margin:-4px 0 10px}
.life-card{animation:lc-deal .45s steps(6) backwards;transition:opacity .45s,filter .45s,transform .12s steps(2),box-shadow .12s,border-color .1s}
.life-card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #000}
.life-card.sel{box-shadow:0 0 12px rgba(0,255,136,.55),3px 3px 0 #000}
.life-card.burn{opacity:.3;filter:grayscale(.85) brightness(.55) sepia(.25);box-shadow:none}
.life-card.burn:hover{opacity:.6;filter:grayscale(.4) brightness(.8);transform:none}
@keyframes lc-deal{0%{opacity:0;transform:translate(40px,-32px) rotate(8deg) scale(.85)}100%{opacity:1;transform:none}}
/* ══ GOAL PICK ══ */
.goal-opt{display:flex;gap:9px;align-items:center;text-align:left;padding:9px 11px;background:var(--card);border:3px solid var(--border);cursor:pointer;font-family:var(--px);margin-bottom:6px}
.goal-opt:hover{border-color:var(--text)}
.goal-opt.sel{border-color:var(--accent);background:rgba(0,255,136,.1)}
.goal-opt .go-ic{font-size:20px;flex-shrink:0}
.goal-opt .go-name{font-size:9px;color:#fff;line-height:1.4}
.goal-opt .go-desc{font-size:13px;font-family:var(--body);color:var(--muted);margin-top:4px;line-height:1.4}

/* ══ BUILDING ENTRY TRANSITION (#3) ══ */
#bldg-transition{position:fixed;inset:0;z-index:380;background:#05080f;display:none;align-items:center;justify-content:center;flex-direction:column}
#bldg-transition.show{display:flex;animation:btfade .35s steps(4) both}
@keyframes btfade{from{opacity:0}to{opacity:1}}
.bt-zoom-emoji{font-size:90px;animation:btzoom .55s cubic-bezier(.3,1.2,.5,1) both}
@keyframes btzoom{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.bt-zoom-name{font-family:var(--px);font-size:15px;color:var(--accent2);text-shadow:3px 3px 0 #000;margin-top:16px;animation:slidein .4s steps(3) .15s both}
.bt-zoom-sub{font-family:var(--px);font-size:7px;color:var(--muted);margin-top:8px;animation:slidein .4s steps(3) .28s both}
.bt-loadbar{width:200px;height:10px;background:#0a0a18;border:3px solid var(--border);margin-top:18px;overflow:hidden}
.bt-loadbar>div{height:100%;width:0;background:linear-gradient(90deg,#2E7D32,#00ff88);animation:btload .7s steps(10) forwards}
@keyframes btload{to{width:100%}}

/* ══ INSTRUCTION BUBBLES (#12) ══ */
#tour-layer{position:fixed;inset:0;z-index:600;pointer-events:none;display:none}
#tour-layer.show{display:block}
.tour-bubble{position:absolute;max-width:230px;background:#0a0e1a;border:4px solid var(--accent2);box-shadow:5px 5px 0 #000;padding:11px 13px;pointer-events:all;animation:ppop .3s steps(3) both}
.tour-bubble .tb-step{font-size:6px;color:var(--muted);font-family:var(--px)}
.tour-bubble .tb-title{font-size:8px;color:var(--accent2);font-family:var(--px);margin:5px 0 6px;text-shadow:1px 1px 0 #000}
.tour-bubble .tb-text{font-size:6px;color:var(--text);line-height:1.95}
.tour-bubble .tb-next{margin-top:9px;width:100%;padding:7px;background:var(--accent);color:#000;border:2px solid #00cc66;font-size:7px;font-family:var(--px);cursor:pointer}
.tour-bubble .tb-next:active{transform:translate(2px,2px)}
.tour-bubble .tb-skip{display:block;width:100%;margin-top:5px;background:none;border:none;color:var(--muted);font-size:6px;font-family:var(--px);cursor:pointer;text-decoration:underline}
#tour-dim{position:absolute;inset:0;background:rgba(0,0,0,.55);pointer-events:all}

/* ══ CARD DRAW CUTSCENE (#7) ══ */
#draw-cutscene{position:fixed;inset:0;z-index:1150;background:rgba(2,4,10,.92);display:none;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}
#draw-cutscene.show{display:flex}
.cut-flash{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,215,0,.2),transparent 65%);animation:cutpulse 1.4s steps(6) infinite}
@keyframes cutpulse{50%{opacity:.35}}
.cut-card{width:230px;height:320px;background:linear-gradient(160deg,#1a1a2e,#0a0a18);border:6px solid var(--accent2);box-shadow:0 0 40px rgba(255,215,0,.4),8px 8px 0 #000;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotateY(90deg) scale(.6);animation:cardflip 1s cubic-bezier(.34,1.3,.5,1) forwards}
@keyframes cardflip{0%{transform:rotateY(90deg) scale(.6)}55%{transform:rotateY(-12deg) scale(1.08)}100%{transform:rotateY(0) scale(1)}}
.cut-emoji{font-size:80px;animation:ppop .4s steps(4) both}
.cut-type{font-family:var(--px);font-size:13px;margin-top:14px;text-shadow:3px 3px 0 #000;animation:slidein .3s steps(3) .1s both}
.cut-title{font-family:var(--px);font-size:9px;color:#fff;margin-top:10px;text-align:center;padding:0 18px;line-height:1.6;animation:slidein .3s steps(3) .2s both}
.cut-label{font-family:var(--px);font-size:7px;color:var(--muted);letter-spacing:2px;margin-bottom:18px;animation:blink 1s steps(1) infinite}
@keyframes cardspin{0%{transform:rotateY(0)}100%{transform:rotateY(720deg)}}
#cut-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
/* OPPORTUNITY theme — electric blue lightning + money rain */
#draw-cutscene.theme-opportunity{background:radial-gradient(circle at 50% 30%,rgba(0,15,50,.97),rgba(0,4,16,.97))}
#draw-cutscene.theme-opportunity .cut-flash{background:radial-gradient(circle,rgba(80,180,255,.35),transparent 60%);animation:cutpulse-opp .65s steps(4) infinite}
#draw-cutscene.theme-opportunity .cut-card{box-shadow:0 0 60px rgba(80,180,255,.55),8px 8px 0 #000}
@keyframes cutpulse-opp{0%,100%{opacity:.2}50%{opacity:1}}
.cut-bolt{position:absolute;top:0;pointer-events:none;background:linear-gradient(180deg,#fff 0%,#88d4ff 35%,rgba(80,160,255,.4) 70%,transparent 100%);border-radius:2px;animation:boltfall .5s ease-out forwards}
@keyframes boltfall{0%{opacity:0;transform:scaleY(0)}15%{opacity:1;transform:scaleY(1)}75%{opacity:.9;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1) translateY(30px)}}
.cut-money{position:absolute;pointer-events:none;animation:moneyfall linear forwards}
@keyframes moneyfall{0%{opacity:1;transform:translateY(-40px) rotate(0deg)}100%{opacity:0;transform:translateY(108vh) rotate(540deg)}}
/* CRISIS theme — rising flames + embers */
#draw-cutscene.theme-crisis{background:radial-gradient(circle at 50% 100%,rgba(50,5,0,.97),rgba(10,2,2,.97))}
#draw-cutscene.theme-crisis .cut-flash{background:radial-gradient(circle at 50% 100%,rgba(255,80,0,.45),transparent 55%);animation:cutpulse-crisis .85s steps(5) infinite}
#draw-cutscene.theme-crisis .cut-card{box-shadow:0 0 60px rgba(255,60,0,.65),8px 8px 0 #000;border-color:#ff3300!important}
@keyframes cutpulse-crisis{0%,100%{opacity:.35}50%{opacity:1}}
.cut-flame{position:absolute;bottom:-8px;pointer-events:none;border-radius:50% 50% 28% 28%;background:linear-gradient(0deg,#ff6a00 0%,#ff3300 35%,#ffaa00 65%,transparent 100%);transform-origin:bottom center;animation:flamerise ease-in-out infinite alternate}
@keyframes flamerise{0%{transform:scaleX(1) scaleY(1) rotate(-5deg);opacity:.9}100%{transform:scaleX(.75) scaleY(1.7) rotate(5deg);opacity:.25}}
.cut-ember{position:absolute;border-radius:50%;animation:emberrise linear forwards}
@keyframes emberrise{0%{opacity:1;transform:translateY(0) translateX(0)}100%{opacity:0;transform:translateY(-65vh) translateX(var(--ex,0px))}}
/* LIFE EVENT theme — purple shimmer + sparkles */
#draw-cutscene.theme-event{background:radial-gradient(circle at 50% 40%,rgba(25,5,60,.97),rgba(5,2,20,.97))}
#draw-cutscene.theme-event .cut-flash{background:radial-gradient(circle,rgba(160,80,255,.35),transparent 60%);animation:cutpulse-event 1.1s steps(5) infinite}
#draw-cutscene.theme-event .cut-card{box-shadow:0 0 60px rgba(160,80,255,.4),8px 8px 0 #000}
@keyframes cutpulse-event{0%,100%{opacity:.12}50%{opacity:.65}}
.cut-sparkle{position:absolute;pointer-events:none;animation:sparklelife ease-in-out forwards}
@keyframes sparklelife{0%{opacity:0;transform:scale(0) rotate(0deg)}35%{opacity:1;transform:scale(1.4) rotate(180deg)}70%{opacity:.75;transform:scale(1) rotate(300deg)}100%{opacity:0;transform:scale(.1) rotate(420deg) translateY(-50px)}}

/* ══ AUTH SCREEN ══ */
#auth-overlay{position:fixed;inset:0;z-index:1200;background:linear-gradient(160deg,#040814,#081a10);display:flex;align-items:center;justify-content:center;padding:24px}
#auth-inner{width:680px;max-width:96vw;display:grid;grid-template-columns:220px 1fr;background:var(--panel);border:5px solid var(--border);box-shadow:8px 8px 0 #000;overflow:hidden}
#auth-brand{background:linear-gradient(160deg,#040814,#061910);border-right:3px solid var(--border);padding:32px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
#auth-form{padding:24px;overflow-y:auto;max-height:90vh}
/* ═══ Auth tabs — segmented control with a sliding thumb ═══
   The thumb is one absolutely-positioned sibling that slides between the two
   buttons, rather than each button painting its own background. That is the
   whole reason the switch reads as one control moving instead of two lights
   blinking. #auth-tabs[data-tab] is written by showAuthTab() in js/09. */
#auth-tabs{position:relative;display:flex;margin-bottom:16px;border:3px solid var(--border);
  background:var(--card);overflow:hidden}
#auth-thumb{position:absolute;top:0;left:0;z-index:0;width:50%;height:100%;
  background:linear-gradient(180deg,var(--accent),#0bbd68);box-shadow:inset 0 -3px 0 rgba(0,0,0,.28);
  transition:transform .26s cubic-bezier(.3,1.35,.4,1)}
#auth-tabs[data-tab="register"] #auth-thumb{transform:translateX(100%)}
.auth-tab{position:relative;z-index:1;flex:1;padding:11px 8px;background:transparent;border:none;
  color:var(--muted);font-size:7px;font-family:var(--px);cursor:pointer;
  transition:color .2s ease,text-shadow .2s ease}
.auth-tab:hover{color:#fff}
.auth-tab.active{background:transparent;color:#04140b;text-shadow:0 1px 0 rgba(255,255,255,.25)}

/* ── Guest-upgrade mode ──────────────────────────────────────────────────
   One DOM, two modes. #auth-form[data-mode="upgrade"] is set by
   showAuthUpgrade() (js/09) when an anonymous player asks to keep their record;
   with no data-mode this whole block is inert and the first-run panel is
   pixel-identical to what shipped. */
#auth-upsell,#auth-close-btn,.auth-note,#auth-later-link{display:none}
#auth-form[data-mode="upgrade"] #auth-upsell{display:block}
#auth-form[data-mode="upgrade"] #auth-close-btn{display:block}
#auth-form[data-mode="upgrade"] #auth-later-link{display:block}
#auth-form[data-mode="upgrade"] #auth-login-note{display:block}
/* A guest already IS a guest, and role/Google both create a NEW uid — none of
   the three can do what this mode exists to do. */
#auth-form[data-mode="upgrade"] #auth-guest-login-link,
#auth-form[data-mode="upgrade"] #auth-guest-register-link,
#auth-form[data-mode="upgrade"] #reg-role-block,
#auth-form[data-mode="upgrade"] #auth-divider-register,
#auth-form[data-mode="upgrade"] #auth-google-register-btn{display:none}

#auth-upsell{position:relative;margin-bottom:16px;padding:13px 14px;
  background:linear-gradient(160deg,rgba(60,44,4,.55),rgba(10,14,26,.55));
  border:3px solid rgba(255,216,77,.45);box-shadow:4px 4px 0 #000}
#auth-close-btn{position:absolute;top:6px;right:6px;padding:4px 7px;background:transparent;
  border:2px solid var(--border);color:var(--muted);font-family:var(--px);font-size:8px;cursor:pointer}
#auth-close-btn:hover{color:#fff;border-color:var(--accent)}
.aup-top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.aup-ic{font-size:26px;line-height:1;filter:drop-shadow(2px 2px 0 #000)}
.aup-h{font-family:var(--px);font-size:9px;color:#ffd84d;text-shadow:2px 2px 0 #000}
.aup-who{font-size:10px;color:var(--muted);margin-top:5px}
.aup-who b{color:#fff;font-family:var(--px);font-size:7px}
.aup-p{font-size:11px;line-height:1.65;color:var(--text)}
.aup-p b{color:var(--accent)}
.auth-note{font-size:10px;line-height:1.6;color:var(--muted);margin-bottom:12px;padding:8px 10px;
  border-left:3px solid var(--accent2);background:rgba(77,208,225,.07)}
.auth-note i{font-style:normal;color:#fff}

/* ── Live field feedback ───────────────────────────────────────────────── */
.auth-hint{font-size:9px;line-height:1.5;color:var(--muted);min-height:13px;margin-top:5px}
.auth-hint.ok{color:var(--accent)}
.auth-hint.err{color:var(--red)}
.auth-meter{height:5px;margin-top:6px;background:#06090f;border:2px solid var(--border);overflow:hidden}
.auth-meter span{display:block;height:100%;width:0;background:var(--red);
  transition:width .22s ease,background .22s ease}
.auth-input.is-ok{border-color:var(--accent)}
.auth-input.is-err{border-color:var(--red)}
/* A disabled submit with no stated reason is a dead end — the button stays
   clickable and the hints say what is missing. This is only a visual damper. */
.auth-btn.is-idle{filter:saturate(.35) brightness(.8)}
.auth-label{font-size:6px;color:var(--muted);font-family:var(--px);margin-bottom:4px;margin-top:10px}
.auth-input{width:100%;padding:9px 10px;background:#06090f;border:3px solid var(--border);color:#fff;font-size:8px;font-family:var(--px);box-sizing:border-box;outline:none}
.auth-input:focus{border-color:var(--accent)}
.auth-btn{width:100%;margin-top:14px;padding:12px;background:linear-gradient(180deg,#2E7D32,#1B5E20);border:4px solid #4CAF50;color:#fff;font-size:9px;font-family:var(--px);cursor:pointer;box-shadow:4px 4px 0 #000;text-shadow:1px 1px 0 #000}
.auth-btn:active{transform:translate(4px,4px);box-shadow:none}
.auth-msg{font-size:6px;margin-top:8px;text-align:center;min-height:16px;font-family:var(--px)}
.auth-msg.err{color:var(--red)}
.auth-msg.ok{color:var(--accent)}
.auth-role-row{display:flex;gap:8px;margin-bottom:4px;margin-top:10px}
.auth-role-opt{flex:1;padding:9px 6px;border:3px solid var(--border);font-family:var(--px);font-size:6px;cursor:pointer;text-align:center;background:transparent;color:var(--muted)}
.auth-role-opt:has(input:checked){border-color:var(--accent);background:rgba(0,255,136,.08);color:var(--accent)}
.auth-role-opt input{display:none}
.auth-guest-link{display:block;width:100%;margin-top:10px;padding:8px;background:transparent;border:2px solid var(--border);color:var(--muted);font-size:6px;font-family:var(--px);cursor:pointer;text-align:center}
.auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted);font-size:6px;font-family:var(--px)}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:2px;background:var(--border)}
.auth-google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;background:#fff;border:3px solid var(--border);color:#3c4043;font-size:8px;font-family:var(--px);cursor:pointer;box-shadow:4px 4px 0 #000}
.auth-google-btn:active{transform:translate(4px,4px);box-shadow:none}
.auth-google-btn img{width:14px;height:14px}
#title-overlay{position:fixed;inset:0;z-index:1100;background:linear-gradient(160deg,#040814 0%,#0a1228 55%,#081a10 100%);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;padding:24px;-webkit-overflow-scrolling:touch}
#title-inner{width:760px;max-width:96vw;margin:auto}
.title-hero{text-align:center;margin-bottom:20px}
.title-logo{font-size:52px;display:block;animation:pb .8s steps(4) infinite}
/* 2x the previous 34px. Fallback path only — styles/entry.css overrides this whenever
   body.entry-fx is on, which is every normal boot. Kept in step with it so the title
   doesn't shrink if the entry layer is ever disabled. */
.title-name{font-size:clamp(30px,12vw,68px);font-family:var(--px);color:var(--accent2);text-shadow:4px 4px 0 #000;margin-top:6px}
.title-name span{color:var(--accent)}
.title-tag{font-size:8px;color:var(--muted);margin-top:8px;letter-spacing:1px}
#title-panels{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.title-col{background:var(--panel);border:5px solid var(--border);box-shadow:6px 6px 0 #000;padding:15px}
.title-col-h{font-size:8px;font-family:var(--px);color:var(--accent2);margin-bottom:9px;text-shadow:1px 1px 0 #000}
.mode-btn{width:100%;display:flex;gap:10px;align-items:center;text-align:left;padding:11px;background:var(--card);border:3px solid var(--border);color:var(--text);font-family:var(--px);cursor:pointer;margin-bottom:7px;box-shadow:3px 3px 0 #000}
.mode-btn:hover{border-color:var(--accent);color:#fff}
.mode-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 #000}
.mode-btn.sel{border-color:var(--accent);background:rgba(0,255,136,.1)}
.mode-ic{font-size:24px;flex-shrink:0}
img.mode-ic{width:32px;height:32px;object-fit:contain;display:block}
.mode-name{font-size:8px;color:#fff}
.mode-desc{font-size:6px;color:var(--muted);margin-top:4px;line-height:1.7}
.soon{font-size:5px;background:var(--accent2);color:#000;padding:1px 4px;margin-left:4px}
.title-mission{font-size:6px;color:var(--text);line-height:1.95;background:rgba(255,255,255,.03);border-left:3px solid var(--accent2);padding:8px 10px}
.title-mission strong,.title-team strong{color:var(--accent2)}
.htp-row{display:flex;gap:8px;margin-bottom:8px;font-size:6px;color:var(--text);line-height:1.8}
.htp-row b{color:var(--accent)}
.htp-ic{font-size:14px;flex-shrink:0}
.title-team{font-size:6px;color:var(--text);line-height:1.95;background:rgba(255,255,255,.03);border-left:3px solid var(--accent);padding:8px 10px}
.title-start{display:block;width:100%;margin-top:18px;padding:15px;background:linear-gradient(180deg,#2E7D32,#1B5E20);border:5px solid #4CAF50;color:#fff;font-size:12px;font-family:var(--px);cursor:pointer;box-shadow:6px 6px 0 #000;text-shadow:2px 2px 0 #000}
.title-start:hover{filter:brightness(1.15)}
.title-start:active{transform:translate(6px,6px);box-shadow:0 0 0 #000}
@media(max-width:680px){#title-panels{grid-template-columns:1fr}}
#onboard-overlay{position:fixed;inset:0;background:linear-gradient(160deg,#040814 0%,#081a10 100%);z-index:1000;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 16px;cursor:grab;user-select:none}
#onboard-overlay.grabbing{cursor:grabbing}
.ob-box{width:min(820px,96vw);max-width:96vw;display:grid;grid-template-columns:280px 1fr;background:var(--panel);border:6px solid var(--border);box-shadow:8px 8px 0 #000;flex-shrink:0;overflow:hidden}
.ob-col-left{padding:24px;border-right:4px solid var(--border);overflow-y:auto;max-height:88vh}
.ob-col-right{padding:24px;overflow-y:auto;max-height:88vh}
.ob-logo{font-size:44px;text-align:center;display:block;margin-bottom:8px;animation:pb .8s steps(4) infinite}
.ob-title{font-size:22px;font-family:var(--px);color:var(--accent2);text-align:center;margin-bottom:4px;text-shadow:3px 3px 0 #000}
.ob-title span{color:var(--accent)}
.ob-sub{font-size:14px;font-family:var(--body);color:var(--muted);text-align:center;margin-bottom:22px;line-height:1.5}
.ob-label{font-size:9px;font-family:var(--px);color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;line-height:1.6}
.ob-input{width:100%;background:#0a0a18;border:4px solid var(--border);padding:12px 13px;font-size:12px;font-family:var(--px);color:#fff;outline:none;margin-bottom:18px}
.ob-input:focus{border-color:var(--accent)}
.ob-input::placeholder{color:var(--muted)}
.av-emo{font-size:12px;display:block;margin-top:-2px;text-align:center;line-height:1}
.ob-btn{width:100%;padding:14px;background:linear-gradient(180deg,#2E7D32,#1B5E20);border:4px solid #4CAF50;color:#fff;font-size:11px;font-family:var(--px);cursor:pointer;box-shadow:6px 6px 0 #000;text-shadow:2px 2px 0 #000}
.ob-btn:hover{filter:brightness(1.2)}
.ob-btn:active{transform:translate(6px,6px);box-shadow:0 0 0 #000}

/* Stage transition */
#stage-overlay{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:500;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}
#stage-overlay.show{display:flex}
.st-emoji{font-size:68px;animation:ppop .4s steps(4) .1s both;display:block;margin-bottom:18px}
.st-label{font-size:8px;color:var(--accent);letter-spacing:2px;text-transform:uppercase;font-family:var(--px)}
.st-name{font-size:26px;font-family:var(--px);color:#fff;margin-top:10px;text-shadow:4px 4px 0 #000}
.st-desc{font-size:8px;color:var(--muted);margin-top:10px;max-width:480px;line-height:1.9}
.st-unlocks{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:20px}
.st-unlock{background:rgba(255,255,255,.07);border:3px solid rgba(255,255,255,.15);padding:5px 13px;font-size:7px;font-family:var(--px);color:#fff;animation:ppop .3s steps(2) both}
.st-btn{margin-top:28px;padding:13px 38px;background:linear-gradient(180deg,#2E7D32,#1B5E20);border:4px solid #4CAF50;color:#fff;font-size:11px;font-family:var(--px);cursor:pointer;box-shadow:6px 6px 0 #000;text-shadow:2px 2px 0 #000}
.st-btn:active{transform:translate(6px,6px);box-shadow:0 0 0 #000}

/* Toast */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(14px);background:var(--card);border:4px solid var(--border);color:#fff;padding:9px 18px;font-size:8px;font-family:var(--px);opacity:0;z-index:999;white-space:nowrap;pointer-events:none;box-shadow:4px 4px 0 #000;text-shadow:1px 1px 0 #000}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);animation:tin .15s steps(3) both}
@keyframes tin{from{transform:translateX(-50%) translateY(14px)}to{transform:translateX(-50%) translateY(0)}}

/* Particles */
.coin-part{position:fixed;font-size:18px;pointer-events:none;z-index:1000;animation:cflyup .8s steps(8) forwards}
@keyframes cflyup{0%{opacity:1;transform:translateY(0) scale(1)}60%{opacity:1;transform:translateY(-55px) scale(1.2)}100%{opacity:0;transform:translateY(-110px) scale(.5)}}
#screen-flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:998}
#screen-flash.flash{animation:flshanim .25s steps(3) forwards}
#screen-flash.flash-pos{background:var(--accent)}
#screen-flash.flash-neg{background:var(--red)}
@keyframes flshanim{0%{opacity:.28}100%{opacity:0}}
/* ── BUY ANIMATION ─────────────────────────────────── */
@keyframes buyGrow{0%{transform:scale(1)}20%{transform:scale(1.03)}60%{transform:scale(1.01)}100%{transform:scale(1)}}
@keyframes buyRingPulse{0%{box-shadow:inset 0 0 0 3px var(--accent),0 0 0 0 rgba(0,255,136,.5)}60%{box-shadow:inset 0 0 0 3px var(--accent),0 0 0 14px rgba(0,255,136,0)}100%{box-shadow:inset 0 0 0 0 transparent}}
.buy-flash{animation:buyGrow .35s ease-out,buyRingPulse .6s ease-out}
@keyframes coinRise{0%{opacity:1;transform:translateY(0) scale(1.2)}100%{opacity:0;transform:translateY(-70px) scale(.6)}}
.stock-buy-coin{position:fixed;pointer-events:none;z-index:1001;font-size:16px;animation:coinRise .7s ease-out forwards}

/* ── SUB-STATS (stress / happiness / energy) ────────── */
.substats-sec{padding:0 8px 6px}
.substat-item{margin-bottom:5px}
.substat-hdr{display:flex;justify-content:space-between;font-size:6px;margin-bottom:2px}
.substat-hdr .sl{color:var(--text)}
.substat-hdr .sv{color:var(--accent)}
.energy-sec{padding:0 8px 10px;display:flex;align-items:center;gap:7px;border-bottom:3px solid var(--border);margin-bottom:2px}
.energy-label{font-size:6px;color:var(--muted);white-space:nowrap}
.energy-dots{display:flex;gap:3px;flex-wrap:wrap}
.edot{width:11px;height:11px;border:2px solid var(--border);background:var(--card)}
.edot.on{background:var(--accent2);border-color:#ffaa00;box-shadow:0 0 4px rgba(255,170,0,.4)}
.edot.empty{background:var(--card);opacity:.35}

/* ── REACTIVE WORLD ─────────────────────────────────── */
body.world-crisis #city-area{background:linear-gradient(180deg,#1a0508,#0a0814)!important}
body.world-crisis #sidebar{border-right-color:var(--red)!important}
body.world-crisis .sb-logo h1 span{color:var(--red)!important}
body.world-crisis .player-card{border-color:var(--red)!important}
body.world-crisis .draw-card-btn{background:linear-gradient(180deg,#6d0f0f,#4a0808)!important;border-color:var(--red)!important}
body.world-crisis::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9990;box-shadow:inset 0 0 0 4px rgba(255,0,0,.25);animation:cshim 2s steps(2) infinite}
@keyframes cshim{50%{box-shadow:inset 0 0 0 4px rgba(255,0,0,.08)}}
body.world-poor #city-area{background:#060810!important}
body.world-ok #city-area{background:#0a0e1a!important}
body.world-good #city-area{background:linear-gradient(180deg,#0a1218,#0a0e1a)!important}
body.world-rich #city-area{background:linear-gradient(180deg,#081512,#0a0e1a)!important}
body.world-rich .dc-box{border-color:var(--accent2)!important;box-shadow:0 0 14px rgba(255,215,0,.15)}
body.world-rich #sidebar{border-right-color:var(--accent2)!important}
body.world-rich .sb-logo h1 span{color:var(--accent2)!important}

/* ── TAB SCENE ART ──────────────────────────────────── */
.lscene{display:flex;gap:8px;align-items:flex-end;justify-content:center;padding:12px 8px;border:3px solid var(--border);background:rgba(255,255,255,.02);margin-bottom:14px;flex-wrap:wrap}
.lscene-item{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:44px}
.lscene-item span{font-size:26px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.lscene-lbl{font-size:10px;font-family:var(--body);color:var(--muted);text-transform:uppercase;text-align:center;letter-spacing:.5px}

/* ── COOLDOWN / ENERGY locked actions ───────────────── */
/* Legacy buttons frame the wrapper; cards frame the faces (wrapper is hidden
   behind them). Overlay sits above .la-inner and is never flipped. */
.laction.act-locked{cursor:not-allowed;border-color:var(--red)!important;background:rgba(255,48,48,.06)!important;box-shadow:inset 0 0 0 3px var(--red),4px 4px 0 #000!important}
.laction.act-locked:hover .la-inner{transform:none}
.laction.act-locked .la-front,.laction.act-locked .la-back{border-color:var(--red)!important;box-shadow:inset 0 0 0 3px var(--red),4px 4px 0 #000!important;background:rgba(255,48,48,.06)!important}
.cd-overlay{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;pointer-events:none;backface-visibility:visible}
.cd-overlay-text{font-size:16px;font-family:var(--body);color:var(--red);text-align:center;line-height:1.3;text-shadow:0 0 8px rgba(255,48,48,.6)}
.cdinfo{font-size:13px;font-family:var(--body);color:var(--red);margin-top:3px}
.einfo{font-size:13px;font-family:var(--body);color:var(--accent2);margin-top:3px}

/* ── LESSON GATE locked actions ─────────────────────── */
.laction.gate-locked{opacity:.6;cursor:pointer;border-color:var(--accent2)!important;background:rgba(249,168,37,.04)!important}
.laction.gate-locked .la-front,.laction.gate-locked .la-back{border-color:var(--accent2)!important;background:rgba(249,168,37,.04)!important}
.laction.gate-locked:hover{opacity:.8}
.gate-learn-badge{position:absolute;top:6px;right:6px;z-index:6;font-size:6px;padding:3px 7px;border:2px solid var(--accent2);color:var(--accent2);font-family:var(--px);letter-spacing:.5px;white-space:nowrap;background:var(--panel)}

/* ── END SCREEN ─────────────────────────────────────── */
#end-overlay{position:fixed;inset:0;background:linear-gradient(160deg,#020408,#060c10);z-index:1200;display:none;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;padding:20px 10px}
#end-overlay.show{display:flex}
@keyframes fallCoins  { 0%{transform:translateY(-20px);opacity:0} 60%{opacity:1} 100%{transform:translateY(60px);opacity:0} }
@keyframes twinkle    { 0%,100%{opacity:0;transform:scale(.5)} 50%{opacity:1;transform:scale(1.2)} }
@keyframes fallPetal  { 0%{transform:translateY(-10px) rotate(0deg);opacity:0} 70%{opacity:.9} 100%{transform:translateY(70px) rotate(180deg);opacity:0} }
.anim-coins::before,.anim-blossoms::before,.anim-stars::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:radial-gradient(circle, var(--anim-color,gold) 2px, transparent 2px);
  background-size:40px 40px;
  animation:fallCoins 1.8s steps(8) infinite;
}
.anim-stars::before  { background-image:radial-gradient(circle,#fffde7 2px,transparent 2px); animation:twinkle 1.4s steps(4) infinite; }
.anim-blossoms::before { background-image:radial-gradient(circle,#f48fb1 3px,transparent 3px); animation:fallPetal 2s steps(6) infinite; }
.end-panel{width:680px;max-width:96vw;background:var(--panel);border:6px solid var(--border);box-shadow:8px 8px 0 #000;animation:lbin .3s steps(4) both;overflow:visible}
.end-header{background:var(--dark);padding:18px 22px 14px;border-bottom:4px solid var(--border);text-align:center}
.end-game-over{font-size:20px;font-family:var(--px);color:#fff;text-shadow:3px 3px 0 #000}
.end-sub{font-size:7px;color:var(--muted);margin-top:5px;line-height:1.8}
.grade-sec{display:flex;flex-direction:column;align-items:center;padding:20px;background:var(--card);border-bottom:4px solid var(--border)}
.grade-letter{font-size:68px;font-family:var(--px);text-shadow:4px 4px 0 #000;animation:ppop .5s steps(4) .2s both}
.grade-lbl{font-size:10px;font-family:var(--px);margin-top:5px;text-shadow:2px 2px 0 #000}
.end-body{padding:18px 22px}
.end-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
.end-stat{background:var(--dark);border:3px solid var(--border);padding:9px;text-align:center}
.esv{font-size:12px;font-family:var(--px);color:#fff;text-shadow:2px 2px 0 #000;display:block;margin-bottom:3px}
.esv.pos{color:var(--accent)}
.esv.neg{color:var(--red)}
.esv.gold{color:var(--accent2)}
.esl{font-size:5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.end-sect-title{font-size:8px;font-family:var(--px);color:var(--accent2);margin-bottom:8px;padding-bottom:5px;border-bottom:3px solid var(--border)}
.outcome-nar{background:rgba(0,255,136,.05);border:3px solid rgba(0,255,136,.2);padding:11px 13px;font-size:7px;color:var(--text);line-height:1.9;margin-bottom:14px}
.outcome-nar strong{color:var(--accent)}
.end-footer{padding:14px 22px;border-top:4px solid var(--border);display:flex;gap:10px;background:var(--dark)}
.end-btn{flex:1;padding:13px;background:linear-gradient(180deg,#2E7D32,#1B5E20);border:4px solid #4CAF50;color:#fff;font-size:9px;font-family:var(--px);cursor:pointer;box-shadow:4px 4px 0 #000;text-shadow:2px 2px 0 #000}
.end-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}
.end-btn.warn-btn{background:linear-gradient(180deg,#6A1B9A,#4A148C);border-color:#9C27B0}
/* ── Share certificate modal ── */
#share-modal{position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:20px}
#share-modal.show{display:flex}
#share-cert-img{max-width:min(560px,96vw);border:4px solid var(--accent);box-shadow:8px 8px 0 #000;image-rendering:pixelated}
.share-modal-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.share-dl-btn{padding:12px 20px;background:linear-gradient(180deg,#2E7D32,#1B5E20);border:4px solid #4CAF50;color:#fff;font-size:8px;font-family:var(--px);cursor:pointer;box-shadow:4px 4px 0 #000;text-shadow:1px 1px 0 #000}
.share-dl-btn:active{transform:translate(4px,4px);box-shadow:none}
.share-close-btn{padding:12px 20px;background:transparent;border:4px solid var(--border);color:var(--muted);font-size:8px;font-family:var(--px);cursor:pointer}

/* ── GAME-OVER WARNING BAR ───────────────────────────── */
#warning-bar{position:fixed;top:0;left:0;right:0;z-index:300;background:var(--red);border-bottom:3px solid #ff6666;padding:6px 16px;font-size:7px;font-family:var(--px);color:#fff;text-align:center;text-shadow:1px 1px 0 #000;display:none;animation:blink 1s steps(1) infinite}
#warning-bar.show{display:block}
/* ── SURVIVAL BAR ───────────────────────────────────────── */
#survival-bar{position:fixed;top:0;left:0;right:0;height:6px;display:flex;z-index:295;pointer-events:auto;cursor:help}
#survival-bar>div{flex:1;height:6px;background:#111;border-right:1px solid #000;position:relative}
#survival-bar>div>div{height:100%;transition:width .3s}
#survival-bar::after{content:attr(data-tip);position:absolute;top:8px;left:50%;transform:translateX(-50%);background:#0a0e1a;border:2px solid var(--border);color:var(--text);font-size:5px;font-family:var(--px);white-space:nowrap;padding:3px 7px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:296}
#survival-bar:hover::after{opacity:1}
#effects-hud{position:fixed;top:52px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:290;pointer-events:none;flex-wrap:wrap;justify-content:center}
.anticipation-hint{font-size:5px;color:var(--accent);margin-top:3px;text-align:center;letter-spacing:.5px}

  /* ── v3: XP float popup ────────────────────────────── */
  @keyframes xpFloatUp {
    0%   { opacity:1; transform:translate(-50%,-50%) scale(1.4); }
    55%  { opacity:1; transform:translate(-50%,-100%) scale(1.05); }
    100% { opacity:0; transform:translate(-50%,-160%) scale(0.8); }
  }
  .xp-float-dom {
    position:fixed; left:50%; top:38%; pointer-events:none;
    font-family:"Press Start 2P",monospace;
    font-size:clamp(13px,2vw,20px);
    color:#00ff88;
    text-shadow:0 0 18px #00ff88, 0 0 6px #00cc66, 2px 2px 0 #000;
    z-index:9999;
    animation:xpFloatUp 1.8s cubic-bezier(.22,.61,.36,1) forwards;
  }
  /* ── v3: NPC portrait card ──────────────────────────── */
  .npc-card {
    display:flex; gap:14px; align-items:center;
    padding:10px 12px; margin-bottom:10px;
    background:rgba(0,0,0,0.35);
    border:2px solid var(--border);
    border-left:3px solid var(--accent);
  }
  .npc-card-avatar { font-size:2em; line-height:1; min-width:38px; text-align:center; }
  .npc-card-body   { flex:1; }
  .npc-card-name   { color:#FFD700; font-size:0.68em; margin-bottom:5px; letter-spacing:0.04em; }
  .npc-card-quote  { color:#9e9e9e; font-size:0.57em; line-height:1.6; }
  /* ── v3: DC badge ───────────────────────────────────── */
  .dc-cost {
    display:inline-block; padding:1px 6px;
    background:#2d0a52; color:#ce93d8;
    font-size:0.6em; border:1px solid #9c27b0;
    vertical-align:middle; margin-left:4px;
  }
  .dc-hint {
    font-size:0.58em; color:#9c27b0; padding:3px 8px 6px;
    line-height:1.5;
  }

/* ══ READABILITY PATCH — minimum font-size overrides ══ */
.ec-scenario{font-size:max(14px,1em)!important;line-height:1.65!important}
.choice-text{font-size:max(9px,0.85em)!important}
.choice-impact{font-size:max(11px,1em)!important}
.lesson-text{font-size:max(13px,1em)!important;line-height:1.7!important}
.notif-text{font-size:max(12px,1em)!important}
.oc-label{font-size:max(9px,0.85em)!important}
.oc-sub{font-size:max(10px,0.9em)!important}
.oc-impact{font-size:max(11px,1em)!important}
.stat-lbl{font-size:max(6px,0.6em)!important}
.lobby-subtitle{font-size:max(10px,0.9em)!important}
.lsect-title{font-size:max(9px,0.85em)!important}
.ltip{font-size:max(14px,1.1em)!important;line-height:1.6!important}
.laction .la-desc{font-size:max(15px,1.1em)!important}
.laction .la-badge{font-size:max(11px,1em)!important}
.cdinfo,.einfo{font-size:max(14px,1.1em)!important}
.dc-preview-btn{font-size:max(8px,0.8em)!important}
.wh-label{font-size:max(9px,0.85em)!important}
.wh-net{font-size:max(9px,0.85em)!important}
.tb-text{font-size:max(7px,0.7em)!important;line-height:1.9!important}
.tb-title{font-size:max(9px,0.85em)!important}
.stat-val{font-size:max(11px,0.9em)!important}
.lobby-tab{font-size:max(7px,0.65em)!important}
html,body{font-size:11px!important}
@keyframes statpop-up{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-32px) scale(.85)}}
.stat-pop{position:fixed;font-family:var(--px);font-size:9px;padding:3px 8px;border:2px solid currentColor;pointer-events:none;animation:statpop-up 1.1s steps(11) forwards;z-index:9999;white-space:nowrap}
.stat-pop.neg{color:#ff4444;border-color:#ff4444;background:rgba(255,68,68,.14)}
.stat-pop.pos{color:var(--accent);border-color:var(--accent);background:rgba(0,255,136,.09)}
@keyframes dc-flash{0%,100%{color:var(--accent)}40%{color:#ff4444}70%{color:#ff8888}}
.dc-count.draining{animation:dc-flash 0.5s steps(5) both}
/* ── Mobile nav bar (hidden on desktop) ── */
#mobile-nav{display:none;align-items:center;justify-content:space-around;background:var(--panel);border-top:4px solid var(--border);z-index:100;width:100%}
#mob-backdrop{display:none;position:fixed;inset:0 0 52px 0;background:rgba(0,0,0,.65);z-index:199}
.mnav-btn{flex:1;background:none;border:none;color:var(--text);font-family:var(--px);font-size:5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;line-height:1;letter-spacing:.5px;text-transform:uppercase}
.mnav-btn:active,.mnav-btn.mob-active{color:var(--accent)}
.mnav-ic{font-size:19px;display:block}
/* ── Responsive: ≤640px ── */
@media(max-width:640px){
  html,body{font-size:12px!important}
  #app{grid-template-columns:1fr!important;grid-template-rows:1fr 52px!important}
  #app.ui-hidden{grid-template-columns:1fr!important;grid-template-rows:1fr 52px!important}
  #app.ui-hidden #sidebar,#app.ui-hidden #right-panel{display:flex!important}
  #sidebar{position:fixed!important;left:0;top:0;bottom:52px;width:83vw;max-width:300px;z-index:200;transform:translateX(-106%);transition:transform .2s steps(4)}
  #sidebar.mob-open{transform:translateX(0)!important}
  #right-panel{position:fixed!important;right:0;top:0;bottom:52px;width:83vw;max-width:310px;z-index:200;transform:translateX(106%);transition:transform .2s steps(4)}
  #right-panel.mob-open{transform:translateX(0)!important}
  #city-area{grid-column:1;grid-row:1}
  #mobile-nav{display:flex!important}
  /* auth */
  #auth-inner{grid-template-columns:1fr!important;width:96vw}
  #auth-brand{display:none!important}
  #auth-form{max-height:none;padding:16px}
  /* title */
  #title-inner{width:96vw}
  #title-panels{grid-template-columns:1fr!important}
  /* onboarding */
  .ob-box{grid-template-columns:1fr!important;width:96vw!important;max-width:96vw!important}
  .ob-col-left{max-height:none;border-right:none!important;border-bottom:4px solid var(--border)}
  .ob-col-right{max-height:none}
  /* lobby */
  .lobby-panel{width:96vw!important;max-width:none!important;max-height:92vh!important}
  .laction-hand{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .laction-hand.n-1{grid-template-columns:minmax(140px,1fr)!important}
  /* card modal */
  #card-modal{padding:14px 10px 80px}
  .cm-choices{grid-template-columns:1fr!important;gap:10px;margin-top:12px}
  .cm-choice{min-height:auto;padding:14px 10px}
  .cm-title{font-size:13px!important}
  .cm-scenario{font-size:15px!important;padding:10px 12px}
  /* city overlays */
  .city-controls{bottom:60px;left:50%!important;transform:translateX(-50%);flex-wrap:wrap;justify-content:center;max-width:280px}
  .city-quick-btns{top:8px;left:auto!important;right:8px;align-items:flex-end}
  .city-title-bar{max-width:58vw}
  .city-time{font-size:6px;padding:5px 8px}
  /* toast above mobile nav */
  #toast{bottom:64px!important}
  /* end/stage overlays */
  .end-panel{max-width:96vw;width:96vw}
  #stage-overlay{padding:20px}
  /* teacher dashboard */
  .td-panel{max-width:96vw!important;width:96vw!important}
}
/* ── ACCESSIBILITY ────────────────────────────────────── */
html.hc{
  --dark:#000;--panel:#111;--card:#111;
  --border:#fff;--text:#fff;--muted:#ccc;
  --accent:#00ff88;--accent2:#ffff00;
  --red:#ff4444;--blue:#55aaff;
}
html.hc .cq-btn{border-width:3px}
html.hc .ec-card,.html.hc .outcome-card{border-width:4px!important}
html.lg-text,html.lg-text body{font-size:13px!important}
html.lg-text .ec-scenario,html.lg-text .lesson-text{font-size:10px!important}
html.lg-text .choice-btn .choice-text{font-size:10px!important}
html.lg-text .stat-val{font-size:13px!important}
#a11y-bar{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9800;background:var(--panel);border:4px solid var(--border);padding:20px 24px;min-width:260px;display:none;flex-direction:column;gap:8px;box-shadow:8px 8px 0 #000;pointer-events:all}
#a11y-bar-title{font-size:8px;color:var(--accent2);font-family:var(--px);letter-spacing:1px;margin-bottom:6px;padding-bottom:8px;border-bottom:2px solid var(--border)}
#a11y-bar button{background:var(--card);border:3px solid var(--border);padding:10px 14px;color:var(--text);font-size:10px;font-family:var(--px);cursor:pointer;text-align:left;white-space:nowrap;width:100%}
#a11y-bar button:hover{border-color:var(--accent2);color:var(--accent2)}
#a11y-bar button.a11y-on{border-color:var(--accent);color:var(--accent)}
#a11y-bar-close{background:transparent!important;border-color:var(--red)!important;color:var(--red)!important;font-size:9px!important}
#a11y-bar-close:hover{background:rgba(255,48,48,.1)!important}
#a11y-backdrop{position:fixed;inset:0;z-index:9799;display:none;background:rgba(0,0,0,.5)}
/* ── Unified Quiz Modal ────────────────────────────────── */
.uq-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9500;display:flex;align-items:center;justify-content:center;padding:16px}
.uq-panel{background:var(--panel);border:6px solid var(--accent2);padding:22px;max-width:660px;width:100%;font-family:var(--font);max-height:92vh;overflow-y:auto;box-shadow:8px 8px 0 #000}
.uq-type{font-size:13px;font-family:var(--px);color:var(--accent2);letter-spacing:1px;line-height:1.4;text-shadow:2px 2px 0 #000;margin-bottom:6px}
.uq-question{font-size:clamp(13px,1.8vw,17px);margin:10px 0 18px;line-height:1.5;font-family:'VT323',monospace;color:var(--text)}
.uq-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.uq-opt{position:relative;background:var(--card);border:4px solid var(--border);padding:16px 14px 14px;cursor:pointer;text-align:left;box-shadow:4px 4px 0 #000;display:flex;flex-direction:column;gap:9px;transition:transform .08s steps(2),border-color .1s,background .1s;min-height:96px}
.uq-opt:hover{border-color:var(--accent2);transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.uq-label{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:10px;font-family:var(--px);color:#000;background:var(--accent2);flex-shrink:0}
.uq-text{font-size:13px;line-height:1.5;color:var(--text);font-family:'VT323',monospace}
.uq-opt.correct{background:rgba(0,255,136,.2)!important;border-color:#00ff88!important}
.uq-opt.wrong{background:rgba(255,60,60,.2)!important;border-color:#ff4444!important}
.uq-opt.correct .uq-label{background:#00ff88}
.uq-opt.wrong .uq-label{background:#ff4444}
.uq-opt.correct .uq-text{color:#00ff88}
.uq-opt.wrong .uq-text{color:#ff4444}
@media (max-width:520px){.uq-opts{grid-template-columns:1fr}.uq-opt{min-height:0}}
.uq-lesson{margin:10px 0;padding:10px;background:rgba(0,255,136,.08);border:2px solid var(--accent);font-size:8px;color:var(--accent);line-height:1.5}
.uq-ctx{background:var(--dark);border-left:3px solid var(--accent2);padding:10px;margin-bottom:14px;font-size:8px;line-height:1.5;color:var(--muted)}
.uq-ctx-ex{margin-top:6px;color:var(--text)}
.uq-footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.uq-skip{flex:0 0 auto;padding:10px 14px;background:transparent;border:3px solid var(--muted);color:var(--muted);font-family:var(--px);font-size:7px;cursor:pointer}
.uq-skip:hover{border-color:var(--accent2);color:var(--accent2)}
.uq-continue{flex:1;padding:10px;background:var(--accent2);border:none;color:#000;font-family:var(--px);font-size:7px;cursor:pointer}
/* ── PROFILE OVERLAY ─────────────────────────────────── */
#profile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9980;display:none;align-items:center;justify-content:center;padding:16px}
#profile-overlay.show{display:flex}
.prof-panel{background:var(--panel);border:4px solid var(--border);max-width:420px;width:100%;max-height:88vh;overflow-y:auto;padding:22px;font-family:var(--px)}
.prof-title{font-size:11px;color:var(--accent2);text-shadow:2px 2px 0 #000;margin-bottom:16px;text-align:center}
.prof-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.prof-stat{background:var(--card);border:3px solid var(--border);padding:10px;text-align:center}
.prof-stat-val{font-size:12px;color:var(--accent);text-shadow:2px 2px 0 #000}
.prof-stat-lbl{font-size:5px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:.5px}
.prof-history-row{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;border:2px solid var(--border);margin-bottom:4px;font-size:6px}
/* ── TEACHER ONBOARDING MODAL ─────────────────────────── */
#td-onboard-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:10100;display:none;align-items:center;justify-content:center;padding:16px}
#td-onboard-overlay.show{display:flex}
.td-ob-panel{background:var(--panel);border:4px solid var(--accent);max-width:400px;width:100%;padding:24px;font-family:var(--px);text-align:center}
.td-ob-step-ind{display:flex;gap:8px;justify-content:center;margin-bottom:18px}
.td-ob-dot{width:10px;height:10px;border:2px solid var(--border)}
.td-ob-dot.active{background:var(--accent);border-color:var(--accent)}
.td-ob-icon{font-size:32px;margin-bottom:10px}
.td-ob-title{font-size:9px;color:var(--accent2);margin-bottom:10px}
.td-ob-body{font-size:7px;color:var(--muted);line-height:2;margin-bottom:18px;font-family:'VT323',monospace;font-size:14px}
/* ── END SCREEN RANK BADGE ───────────────────────────── */
#end-rank-badge{margin:0 0 14px;text-align:center;min-height:0}
.rank-badge-inner{display:inline-block;background:var(--card);border:3px solid var(--accent2);padding:10px 20px}
.rank-badge-num{font-size:22px;color:var(--accent2);text-shadow:2px 2px 0 #000;font-family:var(--px)}
.rank-badge-lbl{font-size:6px;color:var(--muted);margin-top:3px}

/* ═══════════════════════════════════
   TOURNAMENT MODE
   ═══════════════════════════════════ */
.trn-screen{position:fixed;inset:0;background:var(--dark);z-index:9000;display:none;flex-direction:column;font-family:var(--px);overflow:hidden}
.trn-screen.active{display:flex}
.trn-header{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 14px;background:var(--panel);border-bottom:4px solid var(--border);flex-shrink:0}
.trn-header-logo{font-size:10px;color:var(--accent2);text-shadow:2px 2px 0 #000;white-space:nowrap;margin-right:4px}
.trn-hstat{background:var(--card);border:3px solid var(--border);padding:4px 10px;text-align:center;min-width:84px}
.trn-hstat .hv{font-size:14px;color:#fff}
.trn-hstat .hl{font-size:9px;color:var(--muted);margin-top:1px;text-transform:uppercase}
.trn-hstat.pos .hv{color:var(--accent)}
.trn-hstat.neg .hv{color:var(--red)}
.trn-regime{padding:4px 9px;border:3px solid var(--accent);font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
.trn-tickbar{flex:1;min-width:120px;max-width:200px}
.trn-tickbar-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-bottom:3px}
.trn-tickbar-track{height:9px;background:#0a0a18;border:2px solid var(--border)}
.trn-tickbar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .6s}
.trn-exit-btn{margin-left:auto;padding:5px 12px;background:transparent;border:3px solid var(--red);color:var(--red);font-size:11px;font-family:var(--px);cursor:pointer;white-space:nowrap}
.trn-exit-btn:hover{background:rgba(255,48,48,.15)}
.trn-admin-bar{background:rgba(255,215,0,.06);border-bottom:3px solid var(--accent2);padding:5px 14px;display:none;align-items:center;gap:8px;flex-shrink:0}
.trn-admin-bar.visible{display:flex}
.trn-admin-label{font-size:10px;color:var(--accent2);letter-spacing:1px;text-transform:uppercase;margin-right:4px}
.trn-admin-btn{padding:4px 10px;background:transparent;border:2px solid var(--accent2);color:var(--accent2);font-size:11px;font-family:var(--px);cursor:pointer}
.trn-admin-btn:hover{background:rgba(255,215,0,.1)}
.trn-primary-tabs{display:flex;border-bottom:4px solid var(--border);flex-shrink:0;background:var(--panel)}
.trn-ptab{flex:1;padding:9px 4px;background:transparent;border:none;border-right:2px solid var(--border);color:var(--muted);font-size:11px;font-family:var(--px);cursor:pointer;text-align:center;transition:background .15s}
.trn-ptab:last-child{border-right:none}
.trn-ptab.active{background:rgba(0,255,136,.12);color:var(--accent);border-bottom:3px solid var(--accent)}
.trn-ptab:hover:not(.active){background:rgba(255,255,255,.04)}
.trn-subtabs{display:none;flex-shrink:0;border-bottom:3px solid var(--border);background:#0a0a18;padding:0 10px}
.trn-subtabs.visible{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.trn-stab{padding:6px 10px;background:transparent;border:none;border-bottom:3px solid transparent;color:var(--muted);font-size:10px;font-family:var(--px);cursor:pointer;white-space:nowrap;margin-bottom:-3px}
.trn-stab.active{color:var(--accent2);border-bottom-color:var(--accent2)}
.trn-stab:hover:not(.active){color:var(--text)}
.trn-content{flex:1;overflow-y:auto;padding:8px 12px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.trn-content::-webkit-scrollbar{width:3px}
.trn-content::-webkit-scrollbar-thumb{background:var(--border)}
.trn-asset-card{background:var(--card);border:3px solid var(--border);padding:10px 12px;margin-bottom:5px;display:flex;align-items:center;gap:10px}
.trn-asset-card:hover{border-color:rgba(0,255,136,.4)}
.trn-ac-id{font-size:9px;color:var(--accent2);min-width:50px;font-family:var(--px)}
.trn-ac-info{flex:1;min-width:0}
.trn-ac-name{font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trn-ac-sub{font-size:10px;color:var(--muted);margin-top:3px}
.trn-ac-held{font-size:10px;color:var(--accent);margin-top:2px}
.trn-ac-spark{width:72px;height:30px;flex-shrink:0}
.trn-ac-price{text-align:right;min-width:72px;flex-shrink:0}
.trn-ac-price .pv{font-size:15px;color:#fff;font-family:var(--px)}
.trn-ac-price .pc{font-size:11px;margin-top:2px}
.pc.up{color:var(--accent)}
.pc.dn{color:var(--red)}
.trn-ac-trade{display:flex;align-items:center;gap:5px;flex-shrink:0}
.trn-qty{width:44px;padding:4px 6px;background:#0a0a18;border:2px solid var(--border);color:var(--text);font-size:12px;font-family:var(--px);text-align:center}
.trn-qty:focus{outline:none;border-color:var(--accent)}
.trn-buy{padding:5px 10px;background:var(--accent);color:#000;border:2px solid #00cc66;font-size:11px;font-family:var(--px);cursor:pointer}
.trn-sell{padding:5px 10px;background:transparent;color:var(--red);border:2px solid var(--red);font-size:11px;font-family:var(--px);cursor:pointer}
.trn-buy:hover{opacity:.85}
.trn-sell:hover{background:rgba(255,48,48,.12)}
.trn-buy:disabled,.trn-sell:disabled{opacity:.3;cursor:not-allowed}
.trn-vc-badge{display:inline-block;font-size:9px;background:rgba(255,215,0,.1);border:2px solid var(--accent2);color:var(--accent2);padding:2px 6px;margin-top:3px}
.trn-port-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.trn-port-stat{background:var(--card);border:3px solid var(--border);padding:10px;text-align:center}
.trn-port-stat .psv{font-size:17px;color:#fff}
.trn-port-stat .psl{font-size:9px;color:var(--muted);margin-top:3px;text-transform:uppercase}
.trn-port-stat.pos .psv{color:var(--accent)}
.trn-port-stat.neg .psv{color:var(--red)}
.trn-port-stat.gold .psv{color:var(--accent2)}
.trn-port-table{width:100%;border-collapse:collapse}
.trn-port-table th{font-size:9px;color:var(--muted);text-transform:uppercase;padding:5px 8px;border-bottom:2px solid var(--border);text-align:left;font-weight:normal}
.trn-port-table td{font-size:12px;padding:7px 8px;border-bottom:1px solid rgba(74,74,138,.2);color:var(--text)}
.trn-port-table tr:last-child td{border-bottom:none}
.trn-port-table .td-id{color:var(--accent2);font-family:var(--px)}
.trn-port-table .td-pnl.up{color:var(--accent)}
.trn-port-table .td-pnl.dn{color:var(--red)}
.trn-empty{color:var(--muted);font-size:12px;text-align:center;padding:32px;font-family:var(--body)}
.trn-lb-table{width:100%;border-collapse:collapse}
.trn-lb-table th{font-size:9px;color:var(--muted);text-transform:uppercase;padding:5px 10px;border-bottom:2px solid var(--border);text-align:left;font-weight:normal}
.trn-lb-row{border-bottom:1px solid rgba(74,74,138,.2)}
.trn-lb-row.me{background:rgba(0,255,136,.05)}
.trn-lb-row td{padding:8px 10px;font-size:13px;color:var(--text)}
.trn-lb-row .td-rank{font-size:14px;min-width:32px}
.trn-lb-row .td-name{color:#fff}
.trn-lb-row .td-val{color:var(--accent);text-align:right}
.trn-lb-row .td-pnl{text-align:right;font-size:11px}
.trn-lb-row .td-pnl.up{color:var(--accent)}
.trn-lb-row .td-pnl.dn{color:var(--red)}
.trn-lb-admin-row td{padding:5px 10px;font-size:10px;color:var(--muted)}
.trn-news-item{display:flex;gap:10px;align-items:flex-start;padding:10px 4px;border-bottom:1px solid rgba(74,74,138,.2);animation:trn-fadein .3s ease}
@keyframes trn-fadein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.trn-news-icon{font-size:18px;flex-shrink:0;margin-top:2px}
.trn-news-body .nt{font-size:13px;color:#fff;margin-bottom:3px}
.trn-news-body .ns{font-size:11px;color:var(--muted);font-family:var(--body)}
.trn-news-tick{font-size:9px;color:var(--muted);margin-top:4px}
#trn-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel);border:3px solid var(--accent);padding:7px 18px;font-size:12px;font-family:var(--px);color:var(--accent);z-index:9900;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
#trn-lobby{align-items:center;justify-content:center}
.trn-lobby-wrap{background:var(--panel);border:4px solid var(--border);padding:28px 36px;max-width:500px;width:100%;text-align:center}
.trn-lobby-title{font-size:14px;color:var(--accent2);text-shadow:3px 3px 0 #000;margin-bottom:6px}
.trn-lobby-sub{font-size:12px;color:var(--muted);line-height:1.9;margin-bottom:20px}
.trn-lobby-code{font-size:30px;color:var(--accent);text-shadow:3px 3px 0 #00cc66;letter-spacing:10px;margin:10px 0 4px}
.trn-lobby-codesub{font-size:10px;color:var(--muted);margin-bottom:18px}
.trn-lobby-input{width:100%;padding:10px;background:#0a0a18;border:3px solid var(--border);color:var(--text);font-size:10px;font-family:var(--px);text-align:center;text-transform:uppercase;letter-spacing:4px;margin-bottom:8px}
.trn-lobby-btn{display:block;width:100%;padding:11px;font-size:13px;font-family:var(--px);cursor:pointer;margin-bottom:6px;border:3px solid;transition:opacity .15s}
.trn-lobby-btn.primary{background:var(--accent);color:#000;border-color:#00cc66}
.trn-lobby-btn.secondary{background:transparent;color:var(--text);border-color:var(--border)}
.trn-lobby-btn.gold{background:var(--accent2);color:#000;border-color:#b8860b}
.trn-lobby-btn:hover{opacity:.85}
.trn-lobby-divider{font-size:10px;color:var(--muted);margin:10px 0}
.trn-player-list{margin-top:14px;text-align:left;max-height:160px;overflow-y:auto}
.trn-player-item{display:flex;justify-content:space-between;align-items:center;padding:5px 2px;border-bottom:1px solid rgba(74,74,138,.25);font-size:12px;color:var(--text)}
.trn-player-item .host-tag{font-size:9px;color:var(--accent2)}
.trn-lobby-meta{font-size:10px;color:var(--muted);margin-top:16px;line-height:1.9}
#trn-results{align-items:center;justify-content:flex-start;padding:32px 20px;overflow-y:auto}
.trn-results-title{font-size:14px;color:var(--accent2);text-shadow:3px 3px 0 #000;text-align:center;margin-bottom:4px}
.trn-results-sub{font-size:12px;color:var(--muted);text-align:center;margin-bottom:24px}
.trn-results-list{width:100%;max-width:540px;display:flex;flex-direction:column;gap:5px}
.trn-rrow{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--card);border:3px solid var(--border)}
.trn-rrow.gold{border-color:var(--accent2)}
.trn-rrow.silver{border-color:#aaa}
.trn-rrow.bronze{border-color:#cd7f32}
.trn-rrow .rr-medal{font-size:18px;min-width:26px}
.trn-rrow .rr-name{flex:1;font-size:14px;color:#fff}
.trn-rrow .rr-val{font-size:16px;color:var(--accent);text-align:right}
.trn-rrow .rr-pnl{font-size:11px;min-width:80px;text-align:right}
.rr-pnl.up{color:var(--accent)}
.rr-pnl.dn{color:var(--red)}
.trn-vc-box{margin-top:16px;padding:14px 18px;background:var(--card);border:3px solid var(--accent2);width:100%;max-width:540px}
.trn-vc-box-h{font-size:11px;color:var(--accent2);margin-bottom:10px}
.trn-vc-item{font-size:11px;color:var(--text);padding:4px 0;border-bottom:1px solid rgba(74,74,138,.2);font-family:var(--body)}
.trn-results-btns{display:flex;gap:10px;margin-top:20px;width:100%;max-width:540px}
.trn-results-btns .trn-lobby-btn{margin-bottom:0}
.trn-fund-item{background:var(--card);border:3px solid var(--border);padding:8px 12px;margin-bottom:4px}
.trn-fund-item-name{font-size:13px;color:var(--accent2);margin-bottom:3px}
.trn-fund-item-members{font-size:10px;color:var(--muted);margin-bottom:8px}
.trn-fund-roles{display:flex;gap:5px;flex-wrap:wrap}
.trn-role-btn{padding:4px 9px;background:transparent;border:2px solid var(--border);color:var(--muted);font-size:10px;font-family:var(--px);cursor:pointer}
.trn-role-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.trn-role-btn.taken{opacity:.35;cursor:not-allowed}
.trn-role-btn.mine{border-color:var(--accent2);color:var(--accent2)}
.trn-role-badge{display:inline-block;padding:2px 8px;border:2px solid;font-size:9px;font-family:var(--px);text-transform:uppercase;letter-spacing:.5px}
.trn-role-badge.fund_manager{border-color:var(--accent2);color:var(--accent2)}
.trn-role-badge.risk_manager{border-color:#4488ff;color:#4488ff}
.trn-role-badge.trader{border-color:var(--accent);color:var(--accent)}
.trn-role-badge.analyst{border-color:var(--muted);color:var(--muted)}
.trn-chat{display:flex;flex-direction:column;gap:3px;padding:6px 0}
.trn-chat-msg{padding:5px 8px;border-left:3px solid var(--border)}
.trn-chat-msg.mine{border-color:var(--accent)}
.trn-chat-msg .cm-role{font-size:9px;color:var(--muted);margin-bottom:2px}
.trn-chat-msg .cm-text{font-size:12px;color:var(--text);font-family:var(--body);line-height:1.6}
.trn-chat-input-row{display:flex;gap:6px;padding:8px 0;border-top:2px solid var(--border);flex-shrink:0}
.trn-chat-input{flex:1;padding:6px 8px;background:#0a0a18;border:2px solid var(--border);color:var(--text);font-size:12px;font-family:var(--body)}
.trn-chat-send{padding:6px 10px;background:var(--accent);color:#000;border:none;font-size:11px;font-family:var(--px);cursor:pointer}
.trn-risk-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(74,74,138,.2)}
.trn-risk-row .rr-class{font-size:11px;color:var(--text);flex:1}
.trn-risk-row .rr-bar{flex:2;height:10px;background:#0a0a18;border:2px solid var(--border);position:relative;overflow:hidden}
.trn-risk-row .rr-fill{height:100%;background:var(--accent);transition:width .4s}
.trn-risk-row .rr-fill.warn{background:var(--accent2)}
.trn-risk-row .rr-fill.danger{background:var(--red)}
.trn-risk-row .rr-pct{font-size:11px;color:#fff;min-width:36px;text-align:right}
.trn-risk-row .rr-limit-input{width:36px;padding:3px 5px;background:#0a0a18;border:2px solid var(--border);color:var(--text);font-size:10px;font-family:var(--px);text-align:center}
/* ── TOURNAMENT ANIMATIONS ────────────── */
@keyframes trn-price-up{0%{background:rgba(0,255,136,.35)}100%{background:transparent}}
@keyframes trn-price-dn{0%{background:rgba(255,48,48,.35)}100%{background:transparent}}
.trn-price-flash-up{animation:trn-price-up .7s ease-out forwards}
.trn-price-flash-dn{animation:trn-price-dn .7s ease-out forwards}
@keyframes trn-ticker-scroll{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
#trn-market-ticker{overflow:hidden;background:rgba(0,0,0,.35);border-bottom:2px solid var(--border);padding:4px 0;flex-shrink:0;font-size:10px;font-family:var(--px);color:var(--muted);white-space:nowrap}
#trn-market-ticker span{display:inline-block;animation:trn-ticker-scroll 28s linear infinite;padding-left:100%}
.trn-rank-up{font-size:9px;color:var(--accent);margin-left:4px}
.trn-rank-dn{font-size:9px;color:var(--red);margin-left:4px}
.trn-ac-id{font-size:11px;color:var(--accent2);min-width:50px;font-family:var(--px)}
/* ── TRADING FLOOR ─────────────────────── */
@keyframes tf-flash-in { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
@keyframes tf-flash-out { from{opacity:1} to{opacity:0} }
@keyframes tf-tip-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
/* Event reaction VFX (#6): positive growth vs negative crash */
@keyframes tf-fx-rise { 0%{opacity:0;transform:translateY(0) scale(.6)} 12%{opacity:1} 100%{opacity:0;transform:translateY(-80vh) scale(1.25)} }
@keyframes tf-fx-fall { 0%{opacity:0;transform:translateY(0) scale(1.2) rotate(0deg)} 12%{opacity:1} 100%{opacity:0;transform:translateY(80vh) scale(.7) rotate(45deg)} }
@keyframes tf-fx-vig  { 0%{opacity:0} 20%{opacity:1} 70%{opacity:1} 100%{opacity:0} }
@keyframes tf-fx-shake{ 0%,100%{transform:translateX(0)} 15%{transform:translateX(-9px)} 35%{transform:translateX(9px)} 55%{transform:translateX(-6px)} 75%{transform:translateX(6px)} 90%{transform:translateX(-3px)} }
.tf-lb-row { display:grid;grid-template-columns:1fr auto auto;gap:3px 8px;padding:7px 8px;border:1px solid var(--border);border-radius:2px;align-items:center }
.tf-lb-row.tf-lb-self { border-color:var(--accent);background:rgba(0,255,136,.07) }
.tf-lb-rank { font-size:12px;font-family:var(--px);color:#FFD700 }
.tf-lb-name { font-size:11px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.tf-lb-val  { font-size:11px;font-family:var(--px);color:var(--accent);text-align:right }
.tf-lb-roi  { font-size:11px;font-family:var(--px);text-align:right }
.tf-asset-row { display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border) }
.tf-asset-name { font-size:12px;color:var(--text) }
.tf-asset-price { font-size:13px;font-family:var(--px);color:var(--accent) }
.tf-asset-held  { font-size:10px;color:var(--muted) }
.tf-buy-btn { padding:7px 13px;background:#1a3a1a;border:2px solid #4CAF50;color:#4CAF50;font-size:10px;font-family:var(--px);cursor:pointer;margin-left:4px }
.tf-sell-btn { padding:7px 13px;background:#3a1a1a;border:2px solid var(--red);color:var(--red);font-size:10px;font-family:var(--px);cursor:pointer;margin-left:4px }
.tf-buy-btn:disabled,.tf-sell-btn:disabled { opacity:.4;cursor:not-allowed }
/* ── VIETNAMESE FONT FALLBACK ─────────────────────────────────────── */
body.lang-vn .nav-btn,body.lang-vn .bl-name,body.lang-vn .bl-badge,
body.lang-vn .guide-title,body.lang-vn .guide-text,body.lang-vn .guide-next-btn,
body.lang-vn .guide-skip-btn,body.lang-vn .codex-detail-title,body.lang-vn .codex-detail-def,
body.lang-vn .codex-detail-tip,body.lang-vn .codex-tile-name,body.lang-vn .dc-info-title,
body.lang-vn .dc-info-sub,body.lang-vn #draw-req,body.lang-vn #lang-btn,
body.lang-vn .nav-title,body.lang-vn #draw-btn,body.lang-vn #sb-stage,
body.lang-vn .city-title,body.lang-vn #sp-stage-label,body.lang-vn #sp-stage-next,
body.lang-vn .stat-lbl{font-family:var(--vn)!important;letter-spacing:0!important}
body.lang-vn .nav-btn{font-size:8px!important;line-height:1.4!important}
body.lang-vn .guide-title{font-size:11px!important}
body.lang-vn .guide-text{font-size:8px!important;line-height:1.9!important}
body.lang-vn .guide-next-btn{font-size:9px!important}
body.lang-vn .bl-name{font-size:8px!important}
body.lang-vn .bl-badge{font-size:7px!important}
body.lang-vn .codex-tile-name{font-size:8px!important;line-height:1.5!important}
body.lang-vn .codex-detail-title{font-size:12px!important}
body.lang-vn .codex-detail-def,body.lang-vn .codex-detail-tip{font-size:11px!important;line-height:1.7!important}
body.lang-vn #draw-req{font-size:8px!important;line-height:1.5!important}
body.lang-vn #sb-stage{font-size:8px!important}
body.lang-vn .stat-lbl{font-size:8px!important}
body.lang-vn .auth-label,body.lang-vn .auth-tab,body.lang-vn .auth-btn,
body.lang-vn .aup-h,body.lang-vn .aup-who b,
body.lang-vn .auth-guest-link,body.lang-vn #auth-tip-block,body.lang-vn #auth-footer-note,
body.lang-vn #lang-btn-auth,body.lang-vn #lang-btn-title,
body.lang-vn .title-tag,body.lang-vn .title-col-h,body.lang-vn .mode-name,
body.lang-vn .mode-desc,body.lang-vn .title-mission,body.lang-vn .htp-row,
body.lang-vn .title-team,body.lang-vn .title-start{font-family:var(--vn)!important;letter-spacing:0!important}
body.lang-vn .mode-desc,body.lang-vn .title-mission,body.lang-vn .htp-row,body.lang-vn .title-team{font-size:12px!important;line-height:1.7!important}
body.lang-vn .title-tag{font-size:10px!important}
body.lang-vn .mode-name{font-size:10px!important}
body.lang-vn .title-col-h{font-size:9px!important}
body.lang-vn .title-start{font-size:10px!important}
/* ── GUIDED WALKTHROUGH OVERLAY ───────────────────────────────────── */
.guide-overlay{position:fixed;z-index:8500;max-width:260px;background:#0a0e1a;border:3px solid var(--accent2);box-shadow:4px 4px 0 #000;padding:12px 14px;pointer-events:all;animation:ppop .25s steps(3) both}
.guide-step-lbl{font-size:5px;color:var(--muted);font-family:var(--px);letter-spacing:1px;margin-bottom:4px}
.guide-title{font-size:9px;color:var(--accent2);font-family:var(--px);margin-bottom:7px;text-shadow:1px 1px 0 #000}
.guide-text{font-size:6px;color:var(--text);line-height:1.9}
.guide-next-btn{margin-top:10px;width:100%;padding:7px;background:var(--accent);color:#000;border:2px solid #00cc66;font-size:7px;font-family:var(--px);cursor:pointer;letter-spacing:1px}
.guide-skip-btn{display:block;width:100%;margin-top:5px;background:none;border:none;color:var(--muted);font-size:5px;font-family:var(--px);cursor:pointer;text-decoration:underline}
.tutorial-skip-btn{background:none;border:none;color:var(--muted);font-size:7px;font-family:var(--px);letter-spacing:1px;cursor:pointer;text-decoration:underline;padding:6px 10px;opacity:.75;transition:opacity .15s}
.tutorial-skip-btn:hover{opacity:1;color:var(--text)}
.guide-dim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:8490;pointer-events:all}
/* ── JUST-IN-TIME TIP ─────────────────────────────────────────────── */
.jit-tip{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9700;max-width:340px;width:calc(100% - 32px);background:#0a0e1a;border:3px solid var(--accent2);box-shadow:4px 4px 0 #000;padding:14px 16px;animation:slidein .22s steps(3) both}
.jit-tip-title{font-family:var(--px);font-size:8px;letter-spacing:1px;color:var(--accent2);margin-bottom:7px}
.jit-tip-text{font-family:'VT323',monospace;font-size:15px;line-height:1.5;color:var(--text);margin-bottom:10px}
.jit-tip-btn{display:block;margin-left:auto;background:none;border:2px solid var(--accent2);color:var(--accent2);font-family:var(--px);font-size:7px;letter-spacing:1px;padding:6px 12px;cursor:pointer}
.jit-tip-btn:hover{background:var(--accent2);color:#0a0e1a}
/* ── BUILDING NAME TAGS ───────────────────────────────────────────── */
#building-labels{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.bldg-label{position:absolute;transform:translate(-50%,0);background:rgba(4,8,20,.88);border:2px solid var(--border);padding:3px 8px;white-space:nowrap;font-family:var(--px);pointer-events:none;transition:opacity .2s}
.bldg-label .bl-name{font-size:6px;color:#e8eaf6;letter-spacing:.5px}
.bldg-label .bl-badge{font-size:4px;color:var(--muted);margin-top:1px}
.bldg-label.bl-locked{opacity:.4}
/* ── FINANCIAL CODEX ──────────────────────────────────────────────────── */
.codex-new-badge{background:#ff4444;color:#fff;font-size:5px;padding:1px 4px;margin-left:4px;font-family:var(--px);letter-spacing:1px;animation:pulse 1s steps(2) infinite;vertical-align:middle}
#codex-progress-pill{color:var(--accent);font-size:5px;margin-left:4px;font-family:var(--px)}
.codex-cat-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:10px 12px 6px;border-bottom:2px solid var(--border)}
.codex-cat-tab{background:var(--card);border:2px solid var(--border);color:var(--muted);font-family:var(--px);font-size:5px;padding:3px 7px;cursor:pointer;letter-spacing:1px}
.codex-cat-tab.active{border-color:var(--accent);color:var(--accent);background:rgba(0,255,136,.1)}
.codex-search{width:100%;box-sizing:border-box;padding:6px 10px;background:var(--dark);border:2px solid var(--border);color:var(--text);font-family:var(--px);font-size:7px;margin:8px 0;outline:none}
.codex-search:focus{border-color:var(--accent)}
.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;padding:4px 0 16px}
.codex-tile{background:var(--card);border:2px solid var(--border);padding:8px 10px;cursor:pointer;min-height:70px;display:flex;flex-direction:column;gap:4px}
.codex-tile.discovered{border-color:rgba(0,255,136,.4)}
.codex-tile.discovered:hover{border-color:var(--accent)}
.codex-tile.new-term{border-color:var(--accent);box-shadow:0 0 8px rgba(0,255,136,.3)}
.codex-tile.locked{opacity:.5;cursor:default}
.codex-tile-emoji{font-size:14px}
.codex-tile-name{font-size:6px;color:var(--text);font-family:var(--px);line-height:1.4}
.codex-tile-meta{font-size:5px;color:var(--muted);margin-top:auto}
.codex-tile-new{font-size:5px;color:var(--accent);font-family:var(--px);letter-spacing:1px}
.codex-diff-dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:3px;vertical-align:middle}
.codex-diff-beginner{background:#00c853}.codex-diff-intermediate{background:#ffab00}.codex-diff-advanced{background:#ff1744}
.codex-detail{background:var(--panel);border:3px solid var(--accent);padding:14px 16px;margin-bottom:12px}
.codex-detail-title{font-size:10px;color:var(--accent);font-family:var(--px);margin-bottom:6px}
.codex-detail-def{font-size:7px;color:var(--text);line-height:1.8;margin-bottom:10px}
.codex-detail-tip{font-size:7px;color:var(--accent2);line-height:1.7;padding:8px 10px;background:rgba(249,168,37,.07);border-left:3px solid var(--accent2)}
.codex-detail-found{font-size:5px;color:var(--muted);margin-top:8px}
.codex-progress-bar-wrap{margin:0 12px 8px;background:var(--dark);height:6px;border:1px solid var(--border)}
.codex-progress-bar-fill{height:100%;background:var(--accent);transition:width .4s}

/* ═══ 8-BIT BEVELED BOXES (cohesive frame pass) ══════════════════════════════
   Engraved raised-panel look: inner top-left highlight + inner bottom-right
   shadow, echoing the existing .draw-card-btn depth so every framed box reads
   as a chunky 8-bit panel. Inset shadows render INSIDE the border box, so they
   never overlap neighbours or shift layout (safe on tight grids like .stat-box). */
.player-card,.stat-box,.dc-box,.ctrl-btn,.cq-btn,.codex-detail,#sb-newrun{
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.07), inset -2px -2px 0 rgba(0,0,0,.42);
}
/* Floating city HUD panels: bevel + a hard pixel drop-shadow for lift. */
.city-title-bar,.city-time,.building-tooltip{
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.07), inset -2px -2px 0 rgba(0,0,0,.42), 4px 4px 0 rgba(0,0,0,.5);
}
/* Press feedback for the small pixel buttons (matches the draw-card button). */
.ctrl-btn:active,.cq-btn:active{transform:translate(2px,2px)}

/* ═══ JUICE: impact screen shake (fired on negative outcomes) ═══ */
@keyframes juice-shake{
  0%{transform:translate(0,0)}  15%{transform:translate(-3px,1px)}
  30%{transform:translate(3px,-2px)} 45%{transform:translate(-2px,2px)}
  60%{transform:translate(2px,-1px)} 75%{transform:translate(-1px,1px)}
  100%{transform:translate(0,0)}
}
.juice-shake{animation:juice-shake .34s steps(2,end)}

/* JUICE: floating feedback label ("+20 XP") */
.juice-float{position:fixed;pointer-events:none;z-index:1001;font-family:var(--px);font-size:11px;color:var(--accent2);text-shadow:2px 2px 0 #000;white-space:nowrap;will-change:transform,opacity;animation:juicefloat 1s steps(12) forwards}
@keyframes juicefloat{
  0%{opacity:0;transform:translate(-50%,8px) scale(.6)}
  18%{opacity:1;transform:translate(-50%,-2px) scale(1.15)}
  34%{transform:translate(-50%,-9px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50px) scale(.9)}
}
/* JUICE: milestone celebration spark */
.juice-spark{position:fixed;pointer-events:none;z-index:1001;font-size:18px;will-change:transform,opacity;animation:juicespark 1.05s ease-out forwards}
@keyframes juicespark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.65)}
}