*,*::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}}
.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-tab{flex:1;padding:10px;background:var(--card);border:none;color:var(--muted);font-size:7px;font-family:var(--px);cursor:pointer;border-right:2px solid var(--border)}
.auth-tab:last-child{border-right:none}
.auth-tab.active{background:var(--accent);color:#000}
.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}
.title-name{font-size:34px;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 .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)}
}