/* ============================================================
   PASSIVE — styles
   Dark blue-gray glassmorphism · teal + gold accents
   ============================================================ */
:root{
  --bg-0:#0a1018; --bg-1:#0d1520; --bg-2:#111c2b;
  --panel: rgba(23,36,54,0.55);
  --panel-solid:#16243a;
  --glass-border: rgba(255,255,255,0.08);
  --glass-hi: rgba(255,255,255,0.04);
  --ink:#e8eef6; --ink-dim:#9fb0c4; --ink-faint:#63758c;
  --accent:#00d4aa; --accent-dim:#0a8f78;
  --gold:#f0b429; --danger:#ff6b6b; --success:#51cf66; --info:#748ffc; --violet:#e599f7;
  --shadow: 0 10px 40px rgba(0,0,0,0.45);
  --radius:16px; --radius-sm:10px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'SF Mono', ui-monospace, 'Roboto Mono', monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); color:var(--ink);
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(0,212,170,0.10), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(116,143,252,0.10), transparent 55%),
    linear-gradient(160deg, var(--bg-1), var(--bg-0));
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#app{height:100vh;width:100vw;position:relative}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .35s ease;overflow:auto}
.screen.active{opacity:1;pointer-events:auto}

/* ---------- buttons ---------- */
/* native buttons/inputs don't inherit color+font by default — make them,
   so any bare <button> reads as light text on our dark panels */
button, input, select, textarea{color:inherit;font-family:inherit}
/* native dropdowns: force a dark closed control AND dark popup options,
   otherwise light option text lands on a default white popup (invisible) */
select{background:rgba(0,0,0,0.35);color:var(--ink);border:1px solid var(--glass-border);border-radius:8px;padding:8px 10px;font-size:13px}
select option{background:#16243a;color:#e8eef6}
.btn{
  font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);
  background:var(--glass-hi);border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);padding:10px 16px;cursor:pointer;
  transition:transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
}
.btn:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.28);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-dim));color:#04231d;border-color:transparent;box-shadow:0 6px 20px rgba(0,212,170,0.28)}
.btn-primary:hover{box-shadow:0 8px 26px rgba(0,212,170,0.42)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#c98f10);color:#241a02;border-color:transparent}
.btn-danger{background:linear-gradient(135deg,var(--danger),#c94b4b);color:#2a0d0d;border-color:transparent}
.btn-ghost{background:var(--glass-hi)}
.btn-lg{font-size:16px;padding:14px 22px;border-radius:14px}
.btn-sm{font-size:12px;padding:7px 12px}
.btn-block{width:100%}
.btn-xl{font-size:18px;padding:18px 30px}

/* ============ TITLE ============ */
.title-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;gap:26px}
.title-logo{
  font-size:clamp(56px,12vw,120px);font-weight:900;letter-spacing:.12em;
  background:linear-gradient(120deg,#fff 10%,var(--accent) 50%,var(--gold) 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  display:block;line-height:1;filter:drop-shadow(0 8px 30px rgba(0,212,170,0.25));
}
.title-sub{display:block;margin-top:10px;color:var(--ink-dim);letter-spacing:.35em;text-transform:uppercase;font-size:clamp(9px,1.6vw,13px)}
.title-tagline{font-size:clamp(15px,2.4vw,20px);color:var(--ink);max-width:560px}
.title-tagline b{color:var(--accent)}
.title-tagline b:nth-of-type(2){color:var(--gold)}
.title-actions{display:flex;flex-direction:column;gap:12px;width:min(340px,86vw);margin-top:10px}
.title-foot{color:var(--ink-faint);font-size:11px;max-width:440px;margin-top:20px}

/* ============ SETUP ============ */
.setup-wrap{max-width:1080px;margin:0 auto;padding:22px 18px 60px}
.setup-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.setup-head h1{font-size:24px;font-weight:800;flex:1}
.setup-mode-badge{background:var(--glass-hi);border:1px solid var(--glass-border);border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700;color:var(--accent)}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.setup-col{display:flex;flex-direction:column;gap:18px}
.panel{
  background:var(--panel);border:1px solid var(--glass-border);border-radius:var(--radius);
  padding:18px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);
}
.panel-h{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim);margin-bottom:14px}
.muted{color:var(--ink-dim)}.small{font-size:12px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field>span{font-size:12px;color:var(--ink-dim);font-weight:600}
.select-desc{font-size:11px;color:var(--ink-faint);line-height:1.4;font-weight:500}
.select-desc b{color:var(--accent)}
input[type=text],input[type=number]{
  font-family:inherit;font-size:15px;color:var(--ink);background:rgba(0,0,0,0.25);
  border:1px solid var(--glass-border);border-radius:10px;padding:11px 12px;width:100%;
}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,212,170,0.15)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}

/* segmented control */
.seg{display:flex;background:rgba(0,0,0,0.25);border:1px solid var(--glass-border);border-radius:10px;padding:4px;gap:4px;margin-bottom:14px}
.seg-btn{flex:1;background:transparent;border:none;color:var(--ink-dim);font-family:inherit;font-size:13px;font-weight:700;padding:9px;border-radius:7px;cursor:pointer;transition:.15s}
.seg-btn.active{background:var(--accent);color:#04231d}

/* chip list (scenarios) */
.chip-list{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--glass-hi);border:1px solid var(--glass-border);border-radius:20px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;color:var(--ink);font-family:inherit}
.chip:hover{border-color:var(--ink-dim)}
.chip.active{background:linear-gradient(135deg,var(--gold),#c98f10);color:#241a02;border-color:transparent}

/* card pickers (professions / roles) */
.card-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:340px;overflow:auto;padding-right:4px}
.pick{
  text-align:left;background:var(--glass-hi);border:1px solid var(--glass-border);border-radius:12px;
  padding:12px;cursor:pointer;transition:.15s;position:relative;color:var(--ink);font-family:inherit;
}
.pick:hover{border-color:var(--ink-dim);transform:translateY(-2px)}
.pick.active{border-color:var(--accent);background:rgba(0,212,170,0.10);box-shadow:0 0 0 1px var(--accent) inset}
.pick-title{font-weight:800;font-size:14px;display:flex;align-items:center;gap:7px}
.pick-flavor{font-size:11px;color:var(--ink-faint);margin-top:4px;line-height:1.35}
.pick-stats{display:flex;gap:10px;margin-top:8px;font-size:11px;color:var(--ink-dim);flex-wrap:wrap}
.pick-stats b{color:var(--ink)}
.pick-icon{font-size:16px}

/* AI list */
.ai-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.ai-row{display:flex;align-items:center;gap:10px;background:var(--glass-hi);border:1px solid var(--glass-border);border-radius:10px;padding:8px 10px}
.ai-dot{width:12px;height:12px;border-radius:50%;flex:none}
.ai-row .ai-name{flex:1;font-weight:700;font-size:13px}
.ai-row select{background:rgba(0,0,0,0.25);color:var(--ink);border:1px solid var(--glass-border);border-radius:8px;padding:6px 8px;font-family:inherit;font-size:12px}
.stepper{display:flex;align-items:center;gap:14px}
.stepper b{font-size:20px;min-width:20px;text-align:center}

/* toggles */
.toggle-list{display:flex;flex-direction:column;gap:4px}
.toggle{display:flex;align-items:flex-start;gap:12px;padding:10px 8px;border-radius:10px;cursor:pointer;transition:.15s}
.toggle:hover{background:var(--glass-hi)}
.toggle-sw{width:40px;height:23px;border-radius:20px;background:rgba(255,255,255,0.12);position:relative;flex:none;transition:.2s;margin-top:2px}
.toggle-sw::after{content:'';position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;transition:.2s}
.toggle.on .toggle-sw{background:var(--accent)}
.toggle.on .toggle-sw::after{transform:translateX(17px)}
.toggle-txt b{font-size:13px;display:block}
.toggle-txt span{font-size:11px;color:var(--ink-faint);line-height:1.35;display:block;margin-top:2px}

/* ============ GAME ============ */
.game-top{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--glass-border);background:rgba(10,16,24,0.6);backdrop-filter:blur(10px);position:relative;z-index:5;gap:8px}
.gt-left,.gt-right{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.gt-right{justify-content:flex-end}
.gt-logo{font-weight:900;letter-spacing:.1em;font-size:15px;color:var(--accent);flex:none}
.gt-center{flex:0 0 auto;text-align:center;font-weight:700;font-size:14px}
.cycle-badge{font-size:12px;font-weight:700;padding:5px 12px;border-radius:20px;border:1px solid var(--glass-border);display:inline-flex;gap:6px;align-items:center;flex:none}
@media(max-width:720px){
  .game-top{flex-wrap:wrap;row-gap:6px}
  .gt-center{order:3;flex-basis:100%;font-size:12px}
  .gt-right .btn-sm{padding:7px 9px;font-size:11px}
}
.turn-dot{display:inline-block;width:9px;height:9px;border-radius:50%}

.game-body{display:flex;height:calc(100vh - 56px - 74px - 62px);min-height:0}
@media(max-width:900px){.game-body{flex-direction:column;height:auto}}

/* board */
.board-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:20px;min-height:0;overflow:hidden}
.board-tilt{perspective:1700px;width:min(720px,96%);aspect-ratio:1/1;max-height:100%}
.board{position:relative;width:100%;height:100%;transform:rotateX(42deg) rotateZ(0deg);transform-style:preserve-3d;transition:transform .6s ease}
.board-center{
  position:absolute;inset:24%;border-radius:50%;
  background:radial-gradient(circle at 50% 35%, rgba(0,212,170,0.14), rgba(13,21,32,0.7));
  border:1px solid var(--glass-border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  transform:translateZ(2px);box-shadow:inset 0 0 40px rgba(0,0,0,0.5);
}
.board-center .bc-cycle{font-size:22px;font-weight:900}
.board-center .bc-phase{font-size:11px;color:var(--ink-dim);letter-spacing:.15em;text-transform:uppercase}
.board-center .bc-blurb{font-size:10px;color:var(--ink-faint);max-width:70%;margin-top:6px}
.board-center .bc-ring{font-size:10px;margin-top:8px;padding:3px 10px;border-radius:12px;background:var(--glass-hi);border:1px solid var(--glass-border)}

.space{
  position:absolute;width:12.5%;height:12.5%;transform:translate(-50%,-50%);
  border-radius:11px;background:var(--panel-solid);border:1px solid var(--glass-border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:9px;text-align:center;transition:.2s;
}
.space .sp-icon{font-size:20px;line-height:1}
.space .sp-label{font-size:9px;color:var(--ink);margin-top:2px;font-weight:700;letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,0.7)}
.space.current-space{border-color:#fff;box-shadow:0 0 0 3px #fff, 0 0 30px rgba(255,255,255,0.55);z-index:3;filter:brightness(1.35)}
.space[data-color=success]{background:linear-gradient(160deg,rgba(81,207,102,0.22),var(--panel-solid))}
.space[data-color=danger]{background:linear-gradient(160deg,rgba(255,107,107,0.22),var(--panel-solid))}
.space[data-color=accent]{background:linear-gradient(160deg,rgba(0,212,170,0.22),var(--panel-solid))}
.space[data-color=gold]{background:linear-gradient(160deg,rgba(240,180,41,0.22),var(--panel-solid))}
.space[data-color=info]{background:linear-gradient(160deg,rgba(116,143,252,0.22),var(--panel-solid))}

/* player tokens on board */
.token{
  position:absolute;width:20px;height:20px;border-radius:50%;transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,0.85);box-shadow:0 3px 8px rgba(0,0,0,0.5);z-index:4;
  transition:left .5s cubic-bezier(.34,1.3,.5,1), top .5s cubic-bezier(.34,1.3,.5,1);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:#04231d;
}
.token.active-token{animation:tokenPulse 1.2s infinite;width:26px;height:26px;border-color:#fff;z-index:6}
@keyframes tokenPulse{0%,100%{box-shadow:0 3px 8px rgba(0,0,0,0.5),0 0 0 0 rgba(255,255,255,0.6)}50%{box-shadow:0 3px 8px rgba(0,0,0,0.5),0 0 0 8px rgba(255,255,255,0)}}

/* upright pin that stands out of the tilted board plane for the active player */
.token-pin{
  position:absolute;left:50%;bottom:60%;
  transform:translateX(-50%) rotateX(-42deg) translateY(-26px);
  transform-origin:bottom center;pointer-events:none;z-index:20;
  animation:pinBob 1.4s ease-in-out infinite;
}
.pin-flag{
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  background:var(--pin-color,#00d4aa);color:#04231d;font-weight:900;font-size:11px;
  padding:3px 9px;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,0.55);
  border:1.5px solid rgba(255,255,255,0.9);
}
.token-pin::after{ /* little stem connecting flag down to the token */
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid var(--pin-color,#00d4aa);
}
@keyframes pinBob{0%,100%{transform:translateX(-50%) rotateX(-42deg) translateY(-26px)}50%{transform:translateX(-50%) rotateX(-42deg) translateY(-33px)}}

/* dice */
.dice-tray{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;gap:16px;z-index:10;pointer-events:none}
.die{
  width:54px;height:54px;border-radius:12px;background:linear-gradient(145deg,#fff,#d5dde6);
  display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;color:#0d1520;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.die.rolling{animation:tumble .6s cubic-bezier(.3,.1,.3,1)}
@keyframes tumble{
  0%{transform:rotate(0) scale(.6);opacity:.4}
  40%{transform:rotate(220deg) scale(1.15)}
  70%{transform:rotate(370deg) scale(.95)}
  100%{transform:rotate(360deg) scale(1);opacity:1}
}

/* dashboard */
.dash{width:340px;flex:none;border-left:1px solid var(--glass-border);background:rgba(10,16,24,0.4);overflow-y:auto;padding:16px}
@media(max-width:900px){.dash{width:100%;border-left:none;border-top:1px solid var(--glass-border)}}
.dash-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.dash-avatar{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#04231d;font-size:16px;flex:none}
.dash-name{font-weight:800;font-size:16px}
.dash-role{font-size:11px;color:var(--ink-dim)}
.dash-cash{margin-left:auto;text-align:right}
.dash-cash b{font-size:20px;font-weight:900;color:var(--accent);display:block;font-family:var(--mono)}
.dash-cash span{font-size:10px;color:var(--ink-faint)}

.stat-block{background:var(--panel);border:1px solid var(--glass-border);border-radius:12px;padding:12px;margin-bottom:12px}
.stat-block h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim);margin-bottom:10px;font-weight:800}
.stat-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:4px 0}
.stat-row .lbl{color:var(--ink-dim)}
.stat-row .val{font-family:var(--mono);font-weight:700}
.stat-row .val.pos{color:var(--success)}.stat-row .val.neg{color:var(--danger)}
.stat-divide{height:1px;background:var(--glass-border);margin:8px 0}
.big-cf{text-align:center;padding:8px 0}
.big-cf .n{font-size:26px;font-weight:900;font-family:var(--mono)}
.big-cf .n.pos{color:var(--success)}.big-cf .n.neg{color:var(--danger)}
.big-cf .cap{font-size:10px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em}

/* momentum bar */
.momentum{margin:6px 0 2px}
.momentum-track{height:12px;border-radius:8px;background:rgba(0,0,0,0.3);overflow:hidden;position:relative;border:1px solid var(--glass-border)}
.momentum-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width .5s ease;border-radius:8px}
.momentum-fill.ready{animation:momentumGlow 1s infinite}
@keyframes momentumGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.4)}}
.momentum-cap{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-faint);margin-top:3px}

/* leverage gauge */
.gauge{display:flex;align-items:center;gap:10px}
.gauge-bar{flex:1;height:10px;border-radius:6px;background:linear-gradient(90deg,var(--success) 0%,var(--success) 45%,var(--gold) 55%,var(--gold) 72%,var(--danger) 85%);position:relative;overflow:visible;border:1px solid var(--glass-border)}
.gauge-needle{position:absolute;top:-4px;width:3px;height:18px;background:#fff;border-radius:2px;transform:translateX(-50%);box-shadow:0 0 6px rgba(0,0,0,0.6);transition:left .4s ease}
.gauge-zone{font-size:11px;font-weight:800;padding:2px 8px;border-radius:10px}
.gauge-zone.green{color:var(--success);background:rgba(81,207,102,0.15)}
.gauge-zone.yellow{color:var(--gold);background:rgba(240,180,41,0.15)}
.gauge-zone.red{color:var(--danger);background:rgba(255,107,107,0.15)}

/* credit badge */
.credit-badge{font-size:12px;font-weight:800;padding:4px 10px;border-radius:20px;border:1px solid var(--glass-border)}

/* portfolio chips */
.holding{display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 0;border-bottom:1px solid var(--glass-hi)}
.holding:last-child{border-bottom:none}
.holding .h-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.holding .h-cf{font-family:var(--mono);font-weight:700}
.holding .h-cf.pos{color:var(--success)}.holding .h-cf.neg{color:var(--danger)}
.holding-actions{display:flex;gap:4px}
.mini-btn{font-size:10px;padding:3px 7px;border-radius:6px;border:1px solid var(--glass-border);background:var(--glass-hi);cursor:pointer;color:var(--ink);font-weight:700}
.mini-btn:hover{border-color:var(--accent)}
.skill-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;background:rgba(240,180,41,0.14);border:1px solid rgba(240,180,41,0.3);border-radius:14px;padding:3px 9px;margin:2px}
.empty-note{font-size:11px;color:var(--ink-faint);text-align:center;padding:8px 0}

/* action bar */
.action-bar{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;min-height:74px;border-top:1px solid var(--glass-border);background:rgba(10,16,24,0.55);backdrop-filter:blur(10px);flex-wrap:wrap}
.action-hint{color:var(--ink-dim);font-size:13px;font-weight:600}
.roll-btn{font-size:17px;padding:16px 34px}

/* players strip */
.players-strip{display:flex;gap:10px;padding:8px 16px;overflow-x:auto;border-top:1px solid var(--glass-border);background:rgba(10,16,24,0.5);min-height:62px}
.pstrip{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--glass-border);border-radius:12px;padding:7px 12px;flex:none;min-width:170px}
.pstrip.turn{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pstrip.bankrupt{opacity:.45}
.pstrip-dot{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;color:#04231d;flex:none}
.pstrip-info{line-height:1.25;min-width:0}
.pstrip-name{font-weight:800;font-size:12px;display:flex;gap:6px;align-items:center}
.pstrip-sub{font-size:10px;color:var(--ink-dim);font-family:var(--mono)}
.pstrip-badge{font-size:9px;padding:1px 6px;border-radius:8px;background:var(--glass-hi)}
.escaped-tag{color:var(--gold)}

/* log drawer */
.log-drawer{position:fixed;top:0;right:0;width:min(380px,90vw);height:100vh;background:rgba(13,21,32,0.97);border-left:1px solid var(--glass-border);z-index:40;display:flex;flex-direction:column;backdrop-filter:blur(16px);box-shadow:-20px 0 60px rgba(0,0,0,.5)}
.log-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--glass-border)}
.log-scroll{flex:1;overflow-y:auto;padding:10px 16px}
.log-entry{font-size:12px;padding:6px 0;border-bottom:1px solid var(--glass-hi);line-height:1.4;display:flex;gap:8px}
.log-entry .lg-turn{color:var(--ink-faint);font-family:var(--mono);font-size:10px;flex:none;padding-top:1px}
.log-entry.k-lesson{color:var(--gold)}
.log-entry.k-win,.log-entry.k-escape{color:var(--accent);font-weight:700}
.log-entry.k-momentum,.log-entry.k-income,.log-entry.k-buy{color:var(--success)}
.log-entry.k-expense,.log-entry.k-bankrupt,.log-entry.k-fallback{color:var(--danger)}
.log-entry.k-market,.log-entry.k-auction{color:var(--info)}
.log-entry.k-credit{color:var(--violet)}

/* ============ MODAL ============ */
.modal-layer{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,8,14,0.72);backdrop-filter:blur(4px)}
.modal-card{position:relative;background:linear-gradient(160deg,var(--panel-solid),var(--bg-2));border:1px solid var(--glass-border);border-radius:20px;padding:24px;width:min(460px,94vw);max-height:90vh;overflow-y:auto;box-shadow:0 30px 90px rgba(0,0,0,.6);animation:modalIn .3s cubic-bezier(.34,1.3,.5,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.modal-card.wide{width:min(720px,96vw)}
.card-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:5px 12px;border-radius:20px;margin-bottom:14px}
.card-tag.opportunity{background:rgba(0,212,170,0.16);color:var(--accent)}
.card-tag.bigMove{background:rgba(240,180,41,0.16);color:var(--gold)}
.card-tag.danger{background:rgba(255,107,107,0.16);color:var(--danger)}
.card-tag.info{background:rgba(116,143,252,0.16);color:var(--info)}
.card-tag.gold{background:rgba(240,180,41,0.16);color:var(--gold)}
.modal-title{font-size:22px;font-weight:900;line-height:1.15;margin-bottom:6px}
.modal-flavor{font-size:13px;color:var(--ink-dim);font-style:italic;line-height:1.45;margin-bottom:16px}
.deal-figures{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.figure{background:rgba(0,0,0,0.25);border:1px solid var(--glass-border);border-radius:12px;padding:11px;text-align:center}
.figure .fv{font-size:19px;font-weight:900;font-family:var(--mono)}
.figure .fl{font-size:10px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.figure .fv.pos{color:var(--success)}.figure .fv.neg{color:var(--danger)}.figure .fv.accent{color:var(--accent)}
.modal-actions{display:flex;gap:10px;margin-top:8px}
.modal-actions .btn{flex:1}
.calc-note{font-size:12px;color:var(--ink-dim);background:var(--glass-hi);border-radius:10px;padding:10px;margin-bottom:14px;line-height:1.4}
.calc-note b{color:var(--ink)}
.option-btn{display:block;width:100%;text-align:left;background:var(--glass-hi);border:1px solid var(--glass-border);border-radius:12px;padding:14px;margin-bottom:10px;cursor:pointer;transition:.15s;color:var(--ink);font-family:inherit}
.option-btn:hover{border-color:var(--accent);background:rgba(0,212,170,0.08);transform:translateX(3px)}
.option-btn b{font-size:15px;display:block;margin-bottom:3px}
.option-btn span{font-size:12px;color:var(--ink-dim)}
.share-input{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.share-input input{flex:1}
.peek-list{background:rgba(0,0,0,0.2);border-radius:10px;padding:10px;margin-bottom:12px;font-size:12px}
.peek-list .pk{padding:3px 0;color:var(--ink-dim)}

/* toasts (coach) */
.toast-layer{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(440px,92vw)}
.toast{background:linear-gradient(135deg,rgba(240,180,41,0.95),rgba(201,143,16,0.95));color:#241a02;padding:12px 16px;border-radius:12px;font-size:13px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.4);animation:toastIn .3s ease, toastOut .4s ease 5.6s forwards;pointer-events:auto;line-height:1.4}
.toast .toast-h{font-weight:900;display:flex;align-items:center;gap:6px;margin-bottom:2px}
@keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}

/* game over */
.gameover-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;gap:20px}
.go-crown{font-size:64px}
.go-title{font-size:clamp(30px,6vw,52px);font-weight:900;background:linear-gradient(120deg,var(--gold),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.go-sub{color:var(--ink-dim);font-size:16px;max-width:520px}
.debrief-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;width:min(880px,96vw);margin-top:8px}
.debrief-card{background:var(--panel);border:1px solid var(--glass-border);border-radius:16px;padding:16px;text-align:left}
.debrief-card.winner{border-color:var(--gold);box-shadow:0 0 30px rgba(240,180,41,0.2)}
.debrief-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.debrief-head .dh-dot{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#04231d;font-size:14px}
.debrief-head .dh-name{font-weight:800}
.debrief-head .dh-role{font-size:11px;color:var(--ink-dim)}
.debrief-stats{display:flex;gap:14px;margin-bottom:10px;font-size:12px;flex-wrap:wrap}
.debrief-stats b{color:var(--accent);font-family:var(--mono)}
.debrief-list{font-size:12px;color:var(--ink-dim);line-height:1.5;list-style:none}
.debrief-list li{padding:4px 0 4px 18px;position:relative}
.debrief-list li::before{content:'▸';position:absolute;left:0;color:var(--accent)}

.menu-card{width:min(320px,90vw);text-align:center}
.menu-card h2{margin-bottom:18px}
.menu-card .btn{margin-bottom:10px}

/* ============ MULTIPLAYER LOBBY ============ */
.room-code{font-family:var(--mono);font-size:40px;font-weight:900;letter-spacing:.12em;color:var(--accent);text-align:center;padding:14px 0;background:rgba(0,212,170,0.08);border:1px dashed rgba(0,212,170,0.4);border-radius:12px;margin-bottom:12px}
.lobby-row{display:flex;align-items:center;gap:10px;background:var(--glass-hi);border:1px solid var(--glass-border);border-radius:10px;padding:9px 10px}
.lobby-row .lr-dot{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#04231d;font-size:12px;flex:none}
.lobby-row .lr-info{flex:1;min-width:0}
.lobby-row .lr-name{font-weight:800;font-size:13px;display:flex;align-items:center;gap:6px}
.lobby-row .lr-sub{font-size:11px;color:var(--ink-dim)}
.lobby-row .lr-status{font-size:10px;padding:2px 8px;border-radius:10px;background:rgba(81,207,102,0.15);color:var(--success)}
.lobby-row .lr-status.off{background:rgba(255,107,107,0.15);color:var(--danger)}
.lobby-row select{background:rgba(0,0,0,0.25);color:var(--ink);border:1px solid var(--glass-border);border-radius:8px;padding:5px 7px;font-family:inherit;font-size:11px}
.conn-badge{font-size:11px;font-weight:700;padding:5px 10px;border-radius:20px;border:1px solid var(--glass-border);display:inline-flex;align-items:center;gap:5px}
.conn-badge.ok{color:var(--success)}
.conn-badge.bad{color:var(--danger)}
.conn-dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* chat */
.chat-input-row{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--glass-border)}
.chat-input-row input{flex:1;font-size:13px;padding:9px 12px;background:rgba(0,0,0,0.25);border:1px solid var(--glass-border);border-radius:10px;color:var(--ink)}
.chat-bubble{margin-bottom:10px}
.chat-bubble .cb-head{font-size:11px;color:var(--ink-faint);margin-bottom:2px}
.chat-bubble .cb-head b{color:var(--accent)}
.chat-bubble .cb-text{font-size:13px;background:var(--glass-hi);border-radius:10px;padding:8px 11px;display:inline-block;max-width:90%}

/* trade modal */
.trade-col{flex:1;background:rgba(0,0,0,0.2);border-radius:12px;padding:12px}
.trade-cols{display:flex;gap:10px;margin-bottom:14px}
.trade-asset-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:5px 0}
.trade-asset-row input[type=checkbox]{accent-color:var(--accent)}

/* ============ GAME FEEL (Response 3.5) ============ */
/* token hop bounce — applied to the moving token each step */
.token.hopping{animation:hopBounce .14s ease}
@keyframes hopBounce{
  0%{transform:translate(-50%,-50%) scale(1)}
  40%{transform:translate(-50%,-64%) scale(1.25)}
  100%{transform:translate(-50%,-50%) scale(1)}
}

/* landing space flash */
.space.land-flash{animation:landFlash .9s ease;z-index:5}
@keyframes landFlash{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,0.0);filter:brightness(1)}
  25%{box-shadow:0 0 0 6px rgba(255,255,255,0.55),0 0 34px rgba(255,255,255,0.35);filter:brightness(1.9)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0);filter:brightness(1)}
}

/* landing callout chip over the board */
.land-callout{
  position:absolute;top:12%;left:50%;transform:translateX(-50%);z-index:11;pointer-events:none;
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:24px;
  background:rgba(13,21,32,0.92);border:1px solid var(--glass-border);backdrop-filter:blur(10px);
  font-weight:800;font-size:14px;box-shadow:0 12px 34px rgba(0,0,0,0.5);
  animation:calloutIn 1.6s ease forwards;
}
.land-callout .lc-icon{font-size:18px}
.land-callout[data-color=success]{border-color:rgba(81,207,102,0.5);color:var(--success)}
.land-callout[data-color=danger]{border-color:rgba(255,107,107,0.5);color:var(--danger)}
.land-callout[data-color=accent]{border-color:rgba(0,212,170,0.5);color:var(--accent)}
.land-callout[data-color=gold]{border-color:rgba(240,180,41,0.5);color:var(--gold)}
.land-callout[data-color=info]{border-color:rgba(116,143,252,0.5);color:var(--info)}
@keyframes calloutIn{
  0%{opacity:0;transform:translateX(-50%) translateY(14px) scale(.85)}
  15%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.05)}
  25%{transform:translateX(-50%) scale(1)}
  80%{opacity:1}
  100%{opacity:0;transform:translateX(-50%) translateY(-10px)}
}

/* floating +$ / −$ near the dashboard cash figure */
.cash-float{
  position:absolute;right:8px;top:34px;z-index:20;pointer-events:none;
  font-family:var(--mono);font-weight:900;font-size:16px;
  animation:floatUp 1.2s ease forwards;
}
.cash-float.pos{color:var(--success)}
.cash-float.neg{color:var(--danger)}
@keyframes floatUp{
  0%{opacity:0;transform:translateY(6px)}
  20%{opacity:1}
  100%{opacity:0;transform:translateY(-26px)}
}
.dash-cash{position:relative}
.dash-cash b.flash-pos{animation:cashFlashPos .5s ease}
.dash-cash b.flash-neg{animation:cashFlashNeg .5s ease}
@keyframes cashFlashPos{0%{color:var(--success);transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes cashFlashNeg{0%{color:var(--danger);transform:scale(1.15)}100%{transform:scale(1)}}

/* players-strip flash when someone's cash changes */
.pstrip.cash-blip{animation:stripBlip .6s ease}
@keyframes stripBlip{0%{background:rgba(0,212,170,0.18)}100%{}}

/* "your turn" banner */
.turn-flash{
  position:fixed;top:38%;left:50%;transform:translate(-50%,-50%);z-index:80;pointer-events:none;
  font-size:clamp(26px,5vw,44px);font-weight:900;letter-spacing:.06em;
  padding:18px 44px;border-radius:20px;text-align:center;
  background:linear-gradient(135deg,rgba(0,212,170,0.92),rgba(10,143,120,0.92));color:#04231d;
  box-shadow:0 24px 70px rgba(0,212,170,0.35);
  animation:turnBanner 1.3s cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes turnBanner{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
  30%{transform:translate(-50%,-50%) scale(1)}
  78%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-58%) scale(.96)}
}

/* card-draw flip-in (applied to card-like pending modals) */
.modal-card.card-flip{animation:flipIn .45s cubic-bezier(.3,.9,.4,1);transform-style:preserve-3d;perspective:900px}
@keyframes flipIn{
  0%{opacity:0;transform:rotateY(85deg) scale(.9)}
  60%{opacity:1;transform:rotateY(-8deg) scale(1.02)}
  100%{transform:rotateY(0) scale(1)}
}

/* roll-button pulse when it's your move */
.btn.pulse{animation:btnPulse 1.6s infinite}
@keyframes btnPulse{
  0%,100%{box-shadow:0 6px 20px rgba(0,212,170,0.28)}
  50%{box-shadow:0 6px 32px rgba(0,212,170,0.65),0 0 0 5px rgba(0,212,170,0.12)}
}

/* momentum shimmer near surge */
.momentum-fill.near{background:linear-gradient(90deg,var(--accent),var(--gold),var(--accent));background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{0%{background-position:0% 0}100%{background-position:200% 0}}

/* market-cycle "weather" tint on the board center */
.board-center{transition:background 1.8s ease, box-shadow 1.8s ease}
.board-center[data-cycle=boom]{background:radial-gradient(circle at 50% 35%, rgba(0,212,170,0.17), rgba(13,21,32,0.72))}
.board-center[data-cycle=peak]{background:radial-gradient(circle at 50% 35%, rgba(240,180,41,0.18), rgba(13,21,32,0.72))}
.board-center[data-cycle=recession]{background:radial-gradient(circle at 50% 35%, rgba(255,107,107,0.16), rgba(13,21,32,0.75))}
.board-center[data-cycle=recovery]{background:radial-gradient(circle at 50% 35%, rgba(81,207,102,0.16), rgba(13,21,32,0.72))}

/* optional drop-in art (assets/ folder) — CSS backgrounds fail silently if absent */
.title-hero{background-image:url('assets/title-bg.jpg');background-size:cover;background-position:center}
.board-center::before{
  content:'';position:absolute;inset:0;border-radius:50%;opacity:.35;pointer-events:none;
  background-image:url('assets/board-medallion.png');background-size:cover;background-position:center;
}

/* accessibility: honor reduced-motion */
@media (prefers-reduced-motion: reduce){
  .token,.token.hopping,.space.land-flash,.modal-card.card-flip,.btn.pulse,
  .momentum-fill.near,.turn-flash,.land-callout,.die.rolling{animation:none !important}
  .token{transition:none}
}

/* utility */
[hidden]{display:none !important}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:10px}
::-webkit-scrollbar-track{background:transparent}

@media(max-width:720px){
  .setup-grid{grid-template-columns:1fr}
  .board-tilt{width:100%}
  .dash{max-height:none}
  /* tighten labels so bigger board spaces don't collide on narrow screens */
  .space .sp-icon{font-size:17px}
  .space .sp-label{font-size:7px;font-weight:600}
  .space-inner{width:8% !important;height:8% !important}
}