/* styles.css — make the screen read like the physical table (Brief §2). Felt surface,
 * card-like spines, hidden stacks, a face-down debt pile that visibly grows. Function over
 * polish: legibility of the cardboard truth beats prettiness. */
:root{
  /* (else fine) — FIVE's "Ditto Sheet": a cheap back-room duplicator. Two-drum mimeo red + ink black on
     mimeo white. (The sim runs on a dark table; we carry the brand in the ink — red accent, typewriter mark.) */
  --mimeo:#b23a2c; --ink:#1c1a16; --stock:#f2f1ea;
  --felt:#28403b; --felt2:#1e312d; --paper:#f2f1ea; --paper2:#e6e4d8;
  --line:#3a352c; --muted:#9a9082; --accent:#b23a2c; --rival:#c2912f;
  --good:#4a8c5a; --warn:#c2912f; --bad:#b23a2c; --panel:#16140f; --panel2:#1f1c15;
  --serif:'Spectral','Hoefler Text','Palatino Linotype',Georgia,serif;
  --typewriter:'Special Elite','Courier New',ui-monospace,monospace;
  --mono:'Space Mono',ui-monospace,'SFMono-Regular',monospace;
  --brass:#c2912f; --oxblood:#7d2a26;
}
*{box-sizing:border-box}
/* hotseat hand-off — covers the board while the device is passed */
.pass-screen{position:fixed;inset:0;z-index:80;background:#0e1419;display:flex;align-items:center;justify-content:center}
.pass-card{text-align:center;max-width:420px;padding:30px}
.pass-card .pass-icon{font-size:46px;margin-bottom:10px}
.pass-card .pass-to{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:15px}
.pass-card .pass-name{font-family:var(--serif);font-size:30px;font-weight:800;color:#f3ecda;margin:4px 0 20px}
.pass-card .btn.primary{font-size:15px;padding:11px 22px}

/* (else fine) masthead — the series mark: lowercase, ALWAYS in round brackets (a cataloguer's aside),
   struck in the typewriter (Special Elite) in mimeo red. The duplicator look, deadpan. */
.brand{display:flex;align-items:baseline;gap:11px}
.brand .mark-elsefine{font-family:var(--typewriter);font-size:19px;font-weight:400;letter-spacing:.3px;color:var(--mimeo);text-shadow:.5px .5px 0 rgba(0,0,0,.25)}
.brand .tagline{font-family:var(--mono);font-size:10.5px;color:var(--ink);background:var(--stock);padding:2px 7px;border-radius:2px;box-shadow:.5px .5px 0 rgba(0,0,0,.3)}
.brand .muted{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:1px}
#topbar{background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 2px,transparent 2px 4px),
  linear-gradient(#1a1812,#131009) !important;
  border-bottom:2px solid var(--mimeo) !important;box-shadow:0 3px 10px rgba(0,0,0,.4)}
.zone-label,.feed-label,.tm-head,.decide-head{font-family:var(--mono);letter-spacing:.3px}
html,body{margin:0;height:100%}
body{font:13px/1.45 var(--serif);color:#e9e6da;background:
  radial-gradient(100% 80% at 0% 110%,rgba(178,58,44,.08),transparent 55%),
  #110f0a;display:flex;flex-direction:column;height:100vh;overflow:hidden}
b{font-weight:650}
.muted{color:var(--muted)} .sm{font-size:11px} .ok{color:var(--good)} .err{color:var(--bad);font-size:11px}

/* ---------- top chrome ---------- */
#topbar{display:flex;align-items:center;gap:18px;padding:9px 16px;border-bottom:1px solid #000;flex:0 0 auto}
#status{display:flex;gap:14px;flex-wrap:wrap;font-size:12px}
#status .st b{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.4px}
#status .rules b{color:var(--accent)} #status .seed b{color:var(--rival)}
.topright{margin-left:auto}
.seedbox{display:flex;align-items:center;gap:6px}
.seedbox label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px}
input,select,textarea{background:#0d0b07;border:1px solid #34301f;color:#efe7d4;border-radius:5px;padding:4px 6px;font:inherit}
input:focus,select:focus,textarea:focus{outline:1px solid var(--accent);border-color:var(--accent)}
.btn,.flow{background:#221d15;border:1px solid #393222;color:#e4dcc8;border-radius:6px;padding:5px 10px;cursor:pointer;font:inherit;transition:background .12s,border-color .12s,box-shadow .12s}
.btn:hover,.flow:hover{background:#2c2619;border-color:#5a4f33}
.btn.primary,.flow.primary{background:linear-gradient(#b23a2c,#8f2c21);border-color:#d2503f;color:#fff;font-family:var(--mono);font-size:12px}
.btn.primary:hover{background:linear-gradient(#c54536,#9c3225)}
.btn:disabled,.flow:disabled{opacity:.4;cursor:not-allowed}
.flow.sm{padding:4px 7px;font-size:11px}
.flow.on{background:linear-gradient(#b23a2c,#8f2c21);border-color:#d2503f;color:#fff}

#flowbar{display:flex;align-items:center;gap:14px;padding:6px 16px;background:linear-gradient(#16120c,#120f0a);border-bottom:1px solid #000;flex:0 0 auto;flex-wrap:wrap}
.flow-group{display:flex;gap:6px;align-items:center}
.flow-group.exports{margin-left:auto}

/* ---------- layout ---------- */
#layout{display:flex;flex:1 1 auto;min-height:0}
#table{flex:1 1 auto;background:radial-gradient(120% 120% at 50% 38%,var(--felt) 0%,var(--felt2) 68%,#0f322d 100%);
  padding:12px 18px;overflow:auto;display:flex;flex-direction:column;gap:10px;min-width:0;position:relative}
#dock{flex:0 0 470px;background:var(--panel);border-left:1px solid #000;display:flex;flex-direction:column;min-height:0}
body.dock-hidden #dock{display:none}
#tabs{display:flex;flex-wrap:wrap;gap:2px;padding:7px 8px 0;background:var(--panel2);border-bottom:1px solid #000}
.tab{background:transparent;border:1px solid transparent;border-bottom:none;color:#aeb7c2;padding:6px 9px;border-radius:6px 6px 0 0;cursor:pointer;font-size:12px}
.tab:hover{background:#2a241a}
.tab.active{background:var(--panel);color:var(--accent);border-color:#000;box-shadow:inset 0 2px 0 var(--accent)}
#panel{flex:1 1 auto;overflow:auto;padding:14px}

/* ---------- mats ---------- */
.mat{border-radius:10px;padding:9px 12px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.07)}
.mat.player{background:rgba(0,0,0,.22);border-color:rgba(91,155,255,.25);margin-top:auto}
.mat.rival{border-color:rgba(255,177,78,.22)}
.mat.closed{opacity:.5;filter:grayscale(.6)}
.mat-label{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.mat.rival .mat-label{color:var(--rival)}
.mat-summary{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:13px}
.mat-summary .stat.cash{color:#9fe0b6;font-weight:700;font-size:15px}
.mat-summary .stat.debt{color:#e0a89f} .mat-summary .stat.strikes{color:#e0c49f}
.mat-summary .stat.hidden b{color:#cdb8e8}
.rival-shelf{display:flex;gap:2px;margin-top:6px;flex-wrap:wrap}
.mini-spine{width:6px;height:20px;border-radius:1px;opacity:.85}

.mat-row{display:grid;grid-template-columns:160px 1fr 180px;gap:12px;margin-bottom:10px}
.zone{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:8px 10px;min-height:74px}
.zone-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:5px}
.zone-sub{font-size:11px;color:#aeb7c2;margin-top:5px}
.cash-big{font-size:26px;font-weight:800;color:#9fe0b6}
.hint{color:#ffd98a;text-transform:none;letter-spacing:0;font-weight:600;margin-left:6px}

/* private collection — hidden stack at the back */
.collection-zone{position:relative}
.coll-stack{display:flex;min-height:42px;align-items:flex-end}
.coll-card{width:26px;height:38px;margin-left:-16px;border-radius:3px;background:repeating-linear-gradient(45deg,#2a2540,#2a2540 4px,#332c4d 4px,#332c4d 8px);
  border:1px solid #4a4170;border-left:3px solid var(--sec);box-shadow:0 1px 3px rgba(0,0,0,.5)}
.coll-card:first-child{margin-left:0}
/* quiet pile — face-down growing debt */
.quiet-stack{display:flex;min-height:42px;align-items:flex-end}
.quiet-card{width:30px;height:20px;margin-left:-24px;margin-bottom:calc(var(--i)*2px);border-radius:3px;
  background:repeating-linear-gradient(135deg,#3a2222,#3a2222 4px,#472a2a 4px,#472a2a 8px);border:1px solid #5e3636;box-shadow:0 1px 2px rgba(0,0,0,.5)}
.quiet-card:first-child{margin-left:0}

/* shelf of book spines */
.shelf-zone .shelf{display:flex;gap:4px;flex-wrap:wrap;min-height:84px;align-items:flex-end}
.spine{width:40px;height:78px;background:linear-gradient(180deg,color-mix(in srgb,var(--sec) 78%,#000) 0%,var(--sec) 100%);
  border-radius:3px;border:1px solid rgba(0,0,0,.4);box-shadow:0 2px 4px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08);
  display:flex;flex-direction:column;justify-content:space-between;padding:4px 2px;position:relative;overflow:hidden;transition:transform .12s,box-shadow .12s;animation:dealIn .22s ease}
.spine.dross{background:repeating-linear-gradient(180deg,#4a4a4a,#4a4a4a 6px,#404040 6px,#404040 12px);color:#aaa}
.spine .spine-cash{font-size:11px;font-weight:800;text-align:center;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.6)}
.spine .spine-title{font-size:8px;writing-mode:vertical-rl;transform:rotate(180deg);margin:0 auto;color:rgba(255,255,255,.92);flex:1 1 0;min-height:0;max-height:50px;overflow:hidden;text-align:center;white-space:nowrap}
.spine .spine-foot{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#fff}
.spine .spine-base{background:rgba(0,0,0,.35);border-radius:3px;padding:0 3px;font-weight:700}
/* S2.1 star value — 4–5★ Finds glow gold (collectible), 1–3★ commons are muted */
.mk{font-size:10px;line-height:1;font-weight:700;letter-spacing:-.5px}
.mk-find{color:var(--brass);text-shadow:0 0 5px rgba(215,177,90,.65)}
.mk-common{color:#9a8f7d;opacity:.8}
.spine.find{box-shadow:inset 0 0 0 1px rgba(215,177,90,.45)}
/* S2.2 Redirect bar on the engage overlay */
.redirect-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;padding-top:9px;border-top:1px dashed rgba(178,58,44,.4)}
.redirect-bar .rb-label{font-size:11px;color:#cfc7b4}
.ebtn.redirect{background:#2a1d1a;border-color:#7d2a26;color:#e9c9c2}
.ebtn.redirect:hover{background:#3a2622;border-color:#b23a2c}
.spine .spine-sec{font-size:8px;letter-spacing:.3px;color:rgba(255,255,255,.6);text-transform:uppercase}
/* the always-on star key in the street header */
.prov-legend{display:flex;align-items:center;gap:9px;background:rgba(0,0,0,.28);border:1px solid rgba(215,177,90,.28);border-radius:8px;padding:5px 10px;font-size:11px}
.prov-legend .pl-label{font-family:var(--serif);font-style:italic;color:var(--brass)}
.prov-legend .pl-item{display:flex;align-items:center;gap:3px;color:#cfc7b4}
.prov-legend .pl-item .mk{font-size:12px}
.spine.clickable{cursor:pointer}
.spine.clickable:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 8px 14px rgba(0,0,0,.5),0 0 0 2px #ffd98a}
@keyframes dealIn{from{transform:translateY(8px) rotate(-2deg);opacity:0}to{transform:none;opacity:1}}

/* ---------- the street ---------- */
.street{background:rgba(0,0,0,.14);border:1px dashed rgba(255,255,255,.14);border-radius:10px;padding:8px 12px;display:grid;
  grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:8px 12px;align-items:start}
.street-decks{grid-row:1/3;display:flex;flex-direction:column;gap:8px}
.deck{width:64px;height:60px;border-radius:6px;background:#23303a;border:1px solid #34404b;display:flex;flex-direction:column;align-items:center;justify-content:center}
.deck.stock{background:#2a3a30;border-color:#3a5040}
.deck-n{font-size:18px;font-weight:800} .deck-l{font-size:10px;color:var(--muted)}
.zone-label{user-select:none}
.queue{display:flex;gap:8px;flex-wrap:wrap}
.qcard{width:150px;background:var(--paper);color:#241f17;border-radius:7px;padding:7px 8px;box-shadow:0 2px 6px rgba(0,0,0,.4);border-top:4px solid #999;animation:dealIn .2s ease}
.qcard.buyer.joe{border-top-color:#4b9bc7} .qcard.buyer.gag{border-top-color:#caa23a} .qcard.buyer.kook{border-top-color:#b257b2}
.qcard.walkin{border-top-color:#6a8f5a;background:var(--paper2)}
.qhead{display:flex;justify-content:space-between;align-items:baseline}
.qkind{font-weight:800;font-size:13px} .qtag{font-size:9px;text-transform:uppercase;color:#7a6f59;letter-spacing:.5px}
.qbody{font-size:12px;margin:3px 0} .qflavor{font-size:10.5px;color:#6b6353;font-style:italic;min-height:26px}
.qbtns{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.qbtn{background:#2d3b2a;color:#eafce0;border:1px solid #3f5239;border-radius:5px;padding:3px 7px;font-size:11px;cursor:pointer;font-weight:600}
.qbtn:hover{background:#3a4d35}
.qbtn.serve-sell{background:#2c5fa6;border-color:#3f78c7}
.qbtn.buy-math{background:#7a4a2a;border-color:#9a5e36}
.qbtn.serve-refuse{background:#5a3030;border-color:#6e3a3a}
.qbtn.pass{background:#3a3f46;border-color:#4a515a}
.catalog{display:flex;gap:8px;flex-wrap:wrap}
.cat-item{display:flex;flex-direction:column;align-items:center;gap:3px}
.cat-item .qbtn{padding:2px 6px}

/* ---------- play-by-play feed (makes alternating AI turns legible) ---------- */
.play-feed{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 10px;margin-top:2px;max-height:118px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.feed-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:2px}
.feed-line{font-size:11.5px;color:#c7d0da;line-height:1.35;padding:1px 4px;border-radius:4px}
.feed-line.fresh{background:rgba(255,210,74,.12)}
.feed-who{font-weight:800}
.feed-what{color:#dfe4ea}
.feed-why{color:#c9b88a;font-style:italic}

/* ---------- turn bar ---------- */
.turn-bar{display:flex;align-items:center;gap:14px;padding:7px 12px;border-radius:8px;background:rgba(0,0,0,.25);font-size:13px}
.turn-bar.your-turn{background:rgba(91,155,255,.16);box-shadow:inset 0 0 0 1px rgba(91,155,255,.4)}
.turn-bar .who{font-weight:700}
.turn-bar .big{font-weight:800;font-size:15px}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;border:1px solid #5b9bff;margin:0 2px}
.dot.on{background:#5b9bff}
.free-collect{color:#ffd98a;font-weight:600}

/* ---------- panels / instrumentation ---------- */
#panel h3{margin:0 0 8px;font-size:15px} #panel h4{margin:14px 0 6px;font-size:12.5px;color:#cdd6e0}
.verdict{padding:9px 11px;border-radius:7px;font-weight:600;margin:6px 0;background:#202832;border-left:4px solid var(--muted)}
.verdict.good{border-left-color:var(--good);background:#1c2a23}
.verdict.warn{border-left-color:var(--warn);background:#2a2618}
.chart-block{margin:10px 0}
.chart-title{font-size:11.5px;color:#aeb7c2;margin-bottom:3px}
.legend{float:right;color:var(--muted)} .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 3px -1px 8px}
svg.chart{background:#11161c;border:1px solid #222c35;border-radius:6px;max-width:100%}
svg .grid{stroke:#222c35;stroke-width:1} svg .marker{stroke:#3a4754;stroke-dasharray:2 3}
svg .refline{stroke:#caa23a;stroke-dasharray:4 3}
svg .ax{fill:#7c8895;font-size:10px} svg .ax.y{text-anchor:end} svg .ax.end{text-anchor:end} svg .ax.mid{text-anchor:middle} svg .ax.sm{font-size:9px}
.sub{margin-top:12px;padding-top:10px;border-top:1px solid #222c35}
.fp-row{display:grid;grid-template-columns:46px 120px 1fr auto;gap:8px;align-items:center;margin:5px 0;font-size:11.5px}
.fp-bar{height:10px;background:#1a222b;border-radius:5px;overflow:hidden} .fp-fill{height:100%}
.flags{margin:4px 0;padding-left:18px} .flags li{margin:3px 0}
.flag.dead{color:#ff9b8a} .flag.slack{color:#ffd98a}
.aq-row{display:flex;gap:10px;align-items:center;font-size:11.5px;margin:4px 0;flex-wrap:wrap}
.aq-who{font-weight:700;width:42px} .aq-stat{padding:1px 0} .aq-stat.ok{color:#5fae84} .aq-stat.warn{color:#ffb14e}
.batch-stats{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.bstat{background:#1a222b;border:1px solid #2a3540;border-radius:7px;padding:7px 11px;text-align:center;min-width:72px}
.bstat b{display:block;font-size:18px} .bstat span{font-size:10px;color:var(--muted)}
.track-split{display:flex;gap:6px;margin:8px 0}
.track-split .ts{flex:1;text-align:center;padding:8px 4px;border-radius:6px;font-size:11px;background:#1a222b}
.ts.both{background:#1c2a23} .ts.cash{background:#2a2618} .ts.coll{background:#22202e} .ts b{font-size:16px;display:block}

/* log */
.log-body{max-height:64vh;overflow:auto;font-size:11.5px}
.log-row{padding:3px 4px;border-bottom:1px solid #1a2027;display:grid;grid-template-columns:34px 38px 1fr;gap:6px}
.log-row.day-start,.log-row.reckoning,.log-row.closed,.log-row.game-over{background:#161d24}
.log-row.reckoning{background:#22201a}
.log-ply{color:#5a6672} .log-who.player{color:var(--accent)} .log-who.rival{color:var(--rival)}
.log-steps{grid-column:3;color:#9aa6b2;font-size:10.5px;margin:2px 0 2px 0}
.ai-reason{color:#c9b88a;font-style:italic}
.t{font-size:9px;padding:0 4px;border-radius:3px;font-weight:700}
.t.contested{background:#3a2c12;color:#ffce7a} .t.forced{background:#332024;color:#ff9b8a} .t.ok{color:#566}

/* reckonings */
.reck-block{background:#161d24;border:1px solid #232d36;border-radius:7px;padding:8px 10px;margin-bottom:8px}
.reck-block h4{margin:0 0 5px} .reck-shop{margin:4px 0;font-size:12px}
.reck-steps{color:#9aa6b2;font-size:10.8px;margin:2px 0 6px 8px}

/* reveal */
.reveal-grid{display:flex;gap:12px} .reveal-card{flex:1;background:#171e26;border:1px solid #28333d;border-radius:9px;padding:11px}
.reveal-card.winner{border-color:#d9b94a;box-shadow:0 0 0 1px #d9b94a inset}
.reveal-card.failed{opacity:.7}
.reveal-score{font-size:30px;font-weight:800;color:#cdb8e8}
.reveal-tab{width:100%;font-size:11.5px;margin:6px 0} .reveal-tab td{padding:2px 0;border-bottom:1px solid #1d252d}
.reveal-tab td:last-child{text-align:right}
.reveal-gate{margin-top:6px;font-size:11px;font-weight:700} .reveal-gate.pass{color:var(--good)} .reveal-gate.fail{color:var(--bad)}

/* fiddliness table */
.ftable{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:6px}
.ftable th,.ftable td{text-align:left;padding:4px 6px;border-bottom:1px solid #222c35}
.ftable th{color:var(--muted);font-weight:600}

/* params */
.param-actions .row{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0;align-items:center}
.pgroup{border:1px solid #28323c;border-radius:8px;margin:10px 0;padding:8px 10px}
.pgroup legend{color:#bcc6d2;font-size:12px;font-weight:700;padding:0 5px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.pfield{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px}
.pfield span{color:#aeb7c2} .pfield input,.pfield select{width:92px}
textarea.raw{width:100%;height:200px;font:11px/1.4 ui-monospace,Menlo,monospace;resize:vertical}

/* ---------- Guided mode: narration bubble + arrow + target highlight ---------- */
.narr-bubble{position:absolute;z-index:40;width:300px;max-width:74vw;background:var(--paper);color:#241f17;
  border-radius:10px;padding:11px 13px 12px;box-shadow:0 10px 30px rgba(0,0,0,.55);border:1px solid #cdbf9c;
  font-size:12.5px;line-height:1.45;animation:bubbleIn .18s ease}
.narr-bubble.narr-cash{border-top:5px solid #4fae84} .narr-bubble.narr-collection{border-top:5px solid #b257b2}
.narr-bubble.narr-neutral{border-top:5px solid #999} .narr-bubble.narr-setup{border-top:5px solid #4b9bc7}
.narr-bubble b{color:#1d1810}
.narr-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.narr-emoji{font-size:19px}
.narr-track{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;font-weight:800;padding:2px 7px;border-radius:10px;color:#fff}
.narr-track.cash{background:#3c8f6b} .narr-track.collection{background:#9244a0} .narr-track.neutral,.narr-track.setup{background:#5a7a95}
.narr-head{font-weight:800;font-size:13.5px;margin:1px 0 4px}
.narr-detail{color:#352e22}
.narr-why{margin-top:6px;padding:4px 7px;background:rgba(0,0,0,.06);border-radius:6px;font-style:italic;color:#5a5141;font-size:11.5px}
.narr-glos{margin-top:7px;padding-top:6px;border-top:1px dashed #c9bd9c;color:#4a4234;font-size:11.5px}
.narr-glos b{color:#2a2418}
/* arrow */
.narr-bubble::after{content:"";position:absolute;left:var(--arrow-x,24px);width:0;height:0;border:9px solid transparent}
.narr-bubble.narr-above::after{bottom:-17px;border-top-color:var(--paper);margin-left:-9px}
.narr-bubble.narr-below::after{top:-17px;border-bottom-color:var(--paper);margin-left:-9px}
.narr-bubble.narr-noarrow::after{display:none}
@keyframes bubbleIn{from{transform:translateY(4px) scale(.97);opacity:0}to{transform:none;opacity:1}}
/* target highlight pulse */
.narr-highlight{position:relative;z-index:30;outline:3px solid #ffd24a;outline-offset:2px;border-radius:6px;
  box-shadow:0 0 0 4px rgba(255,210,74,.25),0 0 22px rgba(255,210,74,.5);animation:narrPulse 1.1s ease-in-out infinite}
@keyframes narrPulse{0%,100%{box-shadow:0 0 0 4px rgba(255,210,74,.22),0 0 16px rgba(255,210,74,.4)}
  50%{box-shadow:0 0 0 7px rgba(255,210,74,.32),0 0 26px rgba(255,210,74,.7)}}

/* guided control bar (only shown in guided mode) */
#guidedBar{display:none;position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:45;
  align-items:center;gap:12px;background:#161d24;border:1px solid #2c3a46;border-radius:12px;padding:8px 14px;
  box-shadow:0 8px 26px rgba(0,0,0,.55)}
body.guided #guidedBar{display:flex}
body.guided #flowbar .flow-group.watch{opacity:.4}
#guidedBar #guidedHint{font-size:12px;color:#cdd6e0;max-width:360px}
/* "what just happened" ledger, sits just above the guided bar */
#guidedLedger{display:none;position:fixed;bottom:74px;left:50%;transform:translateX(-50%);z-index:45;
  width:560px;max-width:92vw;background:#12181f;border:1px solid #2c3a46;border-left:4px solid #4fae84;border-radius:10px;
  padding:8px 12px;box-shadow:0 8px 22px rgba(0,0,0,.5)}
body.guided #guidedLedger.show{display:block}
#guidedLedger .gl-head{font-size:11.5px;font-weight:700;color:#bfe6cf;margin-bottom:3px}
#guidedLedger .gl-steps{margin:0;padding-left:18px;font-size:11.5px;color:#c7d0da}
#guidedLedger .gl-steps li{margin:2px 0}
#guidedBar .btn.primary{font-size:14px;padding:7px 16px}
#guidedBtn.on{background:#7a4fae;border-color:#9a6fce}
#guidedAutoBtn.on{background:#2c5fa6;border-color:#5b9bff}

/* ===== Brief #2 layout: rivals row, the door, Street, Free Bin ===== */
#status .st.street.thriving b, #status .st.street.thriving { color:#7fe0a8 }
#status .st.street.declining b, #status .st.street.declining { color:#ff9b8a }
.rivals{display:flex;gap:8px;flex-wrap:wrap}
.rivals .mat.rival{flex:1 1 220px;margin:0}
.mat.active{box-shadow:0 0 0 2px #ffd24a inset}
.mat-label .acting{color:#ffd24a;font-weight:700;text-transform:none;letter-spacing:0;margin-left:4px}
.stat.claim{color:#cdb8e8}

.street{display:flex;flex-direction:column;gap:8px;background:rgba(0,0,0,.14);border:1px dashed rgba(255,255,255,.14);border-radius:10px;padding:8px 12px}
.street-top{display:flex;gap:12px;align-items:stretch}
.barometer{flex:1;background:rgba(0,0,0,.2);border-radius:8px;padding:6px 10px;border:1px solid rgba(255,255,255,.06)}
.barometer.thriving{box-shadow:inset 0 0 0 1px rgba(127,224,168,.4)} .barometer.declining{box-shadow:inset 0 0 0 1px rgba(255,155,138,.4)}
.barometer.dying{box-shadow:inset 0 0 0 1px rgba(226,93,68,.6)} .barometer.gone{box-shadow:inset 0 0 0 1px rgba(226,93,68,.9)}
.st-track{display:flex;gap:3px;margin:3px 0;align-items:center}
.st-sep{color:#4a4a44;font-size:10px}
.st-dot{min-width:26px;text-align:center;padding:3px 4px;border-radius:5px;background:#1a1712;color:#6a6258;font-size:12px}
.st-dot.declining.on{background:#4a2c1f;color:#e8a13c} .st-dot.steady.on{background:#2a261c;color:#e9e2d2} .st-dot.thriving.on{background:#1f3a2c;color:#7fe0a8}
.st-dot.dying.on{background:#5a221c;color:#ff8a72} .st-dot.gone.on{background:#7d2a26;color:#fff}
.st-now{font-size:12px;text-transform:capitalize;font-weight:700}
.st-thriving{color:#7fe0a8}.st-steady{color:#cdd6e0}.st-declining{color:#ff9b8a}

.door{display:flex;gap:6px;flex-wrap:wrap;align-items:stretch}
.door-exit,.door-entrance{display:flex;align-items:center;font-size:10px;color:var(--muted);writing-mode:horizontal-tb;padding:0 2px;white-space:nowrap}
.door-exit{color:#e3a08a}
.door-card.empty{width:128px;border:1px dashed rgba(255,255,255,.12);border-radius:8px;min-height:78px;background:rgba(0,0,0,.12)}
.door-card.up.leaving{opacity:.85;box-shadow:0 0 0 2px #e3a08a inset;background:#efe3d2}
.door-card .leaving-tag{font-size:9px;font-weight:800;color:#a8543a;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.door-card{width:128px;border-radius:8px;padding:7px 8px;position:relative;animation:dealIn .2s ease;display:flex;flex-direction:column;gap:3px}
.door-card.back{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bk) 30%,#11161c),color-mix(in srgb,var(--bk) 30%,#11161c) 7px,#11161c 7px,#11161c 14px);border:1px solid var(--bk);align-items:center;justify-content:center;min-height:78px}
.door-card.back .db-type{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--bk);font-weight:800}
.door-card.back .db-q{font-size:26px;color:var(--bk);opacity:.7}
.door-card.up{background:var(--paper);color:#241f17;border-top:4px solid #999;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.door-card.up.regular{border-top-color:#4b9bc7}.door-card.up.character{border-top-color:#b257b2}.door-card.up.seller{border-top-color:#6a8f5a}
.door-card.front{outline:3px solid #ffd24a;outline-offset:2px}
.dc-name{font-weight:800;font-size:12.5px}.dc-sub{font-size:11px}.dc-q{font-size:10px;color:#6b6353;font-style:italic;min-height:24px}
.door-card .qbtn.engage{margin-top:3px;background:#2c5fa6;border-color:#5b9bff;width:100%}
.lower-street{display:flex;gap:14px;flex-wrap:wrap}
.catalog-wrap,.freebin-wrap{flex:1 1 280px}
.catalog,.freebin{display:flex;gap:6px;flex-wrap:wrap;min-height:40px;align-items:flex-end}
.freebin{max-height:108px;overflow-y:auto;align-items:flex-start}
.cat-item{display:flex;flex-direction:column;align-items:center;gap:3px}
.fb-item{background:none;border:none;padding:0;cursor:default;display:inline-flex}
.fb-item.grab{cursor:pointer;border-radius:5px}
.fb-item.grab:hover{box-shadow:0 0 0 2px #ffd24a;transform:translateY(-3px)}
.spine-money{font-size:9px;text-align:center;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.6);font-weight:700}
.spine-money .b{color:#ffd98a}.spine-money .s{color:#9fe0b6}

.stat.haz{color:#ff9b8a;font-weight:700}
.zone-sub.haz{color:#ffb14e;font-weight:600}
.rail-label{font-size:11px;color:var(--muted);align-self:center;margin-right:2px}
.reorder-list{display:flex;flex-direction:column;gap:5px;margin:8px 0}
.reorder-row{display:flex;align-items:center;gap:10px;background:#1d242c;border:1px solid #34404b;border-radius:6px;padding:6px 10px}
.reorder-row .ro-pos{width:18px;color:var(--muted);font-weight:700}
.reorder-row .ro-name{flex:1;font-size:12.5px}
.reorder-row .ro-btns button{background:#222932;border:1px solid #313a44;color:#dbe2ea;border-radius:4px;padding:2px 7px;cursor:pointer;margin-left:3px}
.action-rail{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0}
.rail-btn{background:#222932;border:1px solid #313a44;color:#dbe2ea;border-radius:7px;padding:7px 12px;cursor:pointer;font:inherit;font-weight:600}
.rail-btn:hover{background:#2c3540}.rail-btn.pass{background:#3a3f46}.rail-btn.warn{background:#5a3030;border-color:#6e3a3a}

/* engage / pick overlays */
.engage-opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.ebtn{background:#2d3b2a;border:1px solid #3f5239;color:#eafce0;border-radius:7px;padding:9px 14px;cursor:pointer;font:inherit;font-weight:600}
.ebtn:hover:not(:disabled){background:#3a4d35}.ebtn:disabled{opacity:.4;cursor:not-allowed}
.ebtn.buy{background:#2c5fa6;border-color:#3f78c7}.ebtn.tab{background:#7a4a2a;border-color:#9a5e36}.ebtn.pass,.ebtn.refuse{background:#5a3030;border-color:#6e3a3a}
.decide-sub2{font-size:12px;color:#cdd6e0;margin:8px 0 4px}.decide-sub2.warn{color:#ffb14e}
.pick-grid{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
.pick{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#1d242c;border:1px solid #34404b;border-radius:7px;padding:7px 10px;cursor:pointer;color:#e6ebf0;font:inherit;text-align:left}
.pick:hover{background:#252e37;border-color:#46535f}
.pick-spine{font-weight:700;font-size:12.5px;border-left:4px solid var(--sec);padding-left:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pick-info{font-size:11px;color:#aeb7c2;white-space:nowrap;flex:0 0 auto}.pick-info b{color:#9fe0b6}
.asg-money{font-weight:700;color:#9fe0b6;font-size:11px}
.asg-dest.pulp.on{background:#7a4030;border-color:#b0654a;color:#fff}

/* ---------- decision overlays (assignment / forced liquidation) ---------- */
.decide-overlay{position:fixed;inset:0;z-index:60;background:rgba(6,10,14,.7);display:flex;align-items:center;justify-content:center;padding:22px}
.decide-card{position:relative}
.decide-cancel{position:absolute;top:8px;right:8px;width:24px;height:24px;padding:0;border-radius:50%;background:#2a323c;border:1px solid #3d4854;color:#cfd6de;font-size:13px;line-height:1;cursor:pointer;z-index:2}
.decide-cancel:hover{background:#3a4450;color:#fff;border-color:var(--bad)}
.decide-card{background:#171d24;border:1px solid #30404c;border-radius:14px;padding:16px 18px;max-width:760px;width:100%;
  box-shadow:0 18px 50px rgba(0,0,0,.6);max-height:88vh;overflow:auto;animation:bubbleIn .16s ease}
.decide-card.liq{border-color:#7a3b3b}
.decide-head{font-size:16px;font-weight:800;margin-bottom:4px}
.decide-sub{font-size:12px;color:#aeb7c2;margin-bottom:12px;line-height:1.5}
.asg-grid{display:flex;flex-wrap:wrap;gap:10px}
.asg-book{width:172px;background:#1d242c;border:1px solid #2c3742;border-radius:9px;padding:8px}
.asg-book.dross{opacity:.72}
.asg-spine{display:flex;align-items:center;gap:7px;border-left:5px solid var(--sec);padding:3px 6px;background:rgba(255,255,255,.04);border-radius:4px}
.asg-cash{font-weight:800;color:#9fe0b6;font-size:13px} .asg-name{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asg-meta{font-size:10.5px;color:#9aa6b2;margin:5px 0 7px;min-height:26px}
.asg-meta b{color:#cdb8e8}
.asg-dests{display:flex;gap:4px}
.asg-dest{flex:1;font-size:10.5px;padding:5px 2px;border-radius:5px;border:1px solid #36424d;background:#222a32;color:#cfd8e2;cursor:pointer;font-weight:600}
.asg-dest:hover:not(:disabled){background:#2c3741}
.asg-dest:disabled{opacity:.3;cursor:not-allowed}
.asg-dest.shelf.on{background:#2c5fa6;border-color:#5b9bff;color:#fff}
.asg-dest.coll.on{background:#7a4fae;border-color:#b07fe0;color:#fff}
.asg-dest.dump.on{background:#7a4030;border-color:#b0654a;color:#fff}
.decide-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;border-top:1px solid #28323c;padding-top:11px}
.asg-tally{font-size:12px;color:#aeb7c2} .asg-tally.warn,.warn{color:#ffb14e} .asg-tally.ok{color:#5fae84}
.liq-grid{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
.liq-book{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border:1px solid #34404b;border-radius:7px;background:#1d242c;cursor:pointer}
.liq-book:hover{background:#252e37}
.liq-book.sel{background:#3a2630;border-color:#b0556e;box-shadow:0 0 0 1px #b0556e inset}
.liq-name{font-weight:700;font-size:12.5px;border-left:4px solid;padding-left:7px}
.liq-info{font-size:11px;color:#aeb7c2} .liq-info b{color:#9fe0b6}

/* ---------- end-of-turn summary modal ---------- */
.turn-modal{position:fixed;inset:0;z-index:70;background:rgba(6,10,14,.72);display:flex;align-items:center;justify-content:center;padding:22px}
.turn-modal .tm-card{background:#171d24;border:1px solid #30404c;border-top:4px solid #5b9bff;border-radius:14px;padding:16px 20px;max-width:480px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.6);animation:bubbleIn .16s ease}
.tm-head{font-size:17px;font-weight:800} .tm-who{font-weight:900}
.tm-sub{font-size:12px;color:#aeb7c2;margin:3px 0 10px}
.tm-moves{display:flex;flex-direction:column;gap:3px;max-height:40vh;overflow:auto;margin-bottom:10px}
.tm-move{font-size:12.5px;color:#dfe4ea;line-height:1.4}
.tm-stats{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:#aeb7c2;border-top:1px solid #28323c;padding-top:9px}
.tm-stats b{color:#e6ebf0}
.tm-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px}
.tm-foot .btn.primary{font-size:14px;padding:8px 20px}
.tm-toggle{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px;cursor:pointer}
.tm-card.reck{max-width:560px;border-top-color:#caa23a}
.rk-list{gap:8px}
.rk-shop{font-size:12.5px}
.rk-steps{color:#9aa6b2;font-size:11px;margin:2px 0 4px 8px;line-height:1.4}

/* flash toast */
#flash{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(20px);background:#222c36;border:1px solid #3a4855;
  color:#eaf0f6;padding:8px 16px;border-radius:8px;opacity:0;transition:.25s;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.5);z-index:50}
#flash.show{opacity:1;transform:translateX(-50%) translateY(0)}
.muted.sm{display:block;margin:3px 0}
/* S2.8: legible collection-bleed — a struggling shop sees the squeeze coming */
.zone-sub.bleed-warn{color:#e8a13c;background:rgba(125,42,38,.18);border-left:2px solid var(--bad);padding:2px 6px;border-radius:3px;margin-top:4px;font-size:10.5px}

/* ---------- How-to-play intro (a mimeo rules-sheet card) ---------- */
.btn.help{font-family:var(--mono);font-size:11px;border-color:var(--mimeo);color:#e9c9c2}
.btn.help:hover{background:#2a1d1a;border-color:#d2503f}
.howto-overlay{position:fixed;inset:0;z-index:90;background:rgba(10,8,5,.72);display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.howto-overlay[hidden]{display:none}
.howto-card{position:relative;max-width:560px;width:100%;background:var(--stock);color:var(--ink);border-radius:4px;
  padding:26px 30px 22px;box-shadow:0 12px 40px rgba(0,0,0,.6);border-top:5px solid var(--mimeo);font-family:var(--serif);line-height:1.5;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.012) 0 1px,transparent 1px 3px)}
.howto-card .howto-x{position:absolute;top:8px;right:10px;background:none;border:none;color:#9a9082;font-size:18px;cursor:pointer}
.howto-card .howto-mark{font-family:var(--typewriter);font-size:24px;color:var(--mimeo);margin-bottom:6px}
.howto-card .howto-tag{font-style:italic;color:#5a534a;margin:0 0 14px;font-size:13.5px}
.howto-card h3{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--mimeo);margin:16px 0 5px}
.howto-card p{margin:5px 0;font-size:14px}
.howto-card ol{margin:5px 0;padding-left:20px}
.howto-card li{margin:5px 0;font-size:14px}
.howto-card b{font-weight:700}
.howto-foot{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.howto-foot .btn{font-family:var(--mono);font-size:13px;padding:8px 16px}
.howto-foot .btn.primary{background:linear-gradient(#b23a2c,#8f2c21);border-color:#d2503f;color:#fff}
/* first-turn nudge on the turn bar */
.turn-bar .turn-hint{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;color:var(--brass)}

/* play vs sim view — the clean play view (dock hidden) also hides the dev/sim flowbar controls;
   the "⚙ Sim tools" toggle reveals them. A player sees only Undo / Guided / Watch. */
body.dock-hidden #flowbar .dev-only{display:none}
#flowbar{justify-content:flex-start}
#dockToggle{margin-left:auto}
body.dock-hidden #dockToggle{opacity:.7}

/* the Door is the heart — on your turn, give it a soft focal glow + a cue chip */
.door-wrap.is-your-move{border-radius:10px;padding:6px 8px;margin:0 -8px;
  background:radial-gradient(120% 140% at 50% 0%,rgba(194,145,47,.10),transparent 70%);
  box-shadow:0 0 0 1px rgba(194,145,47,.28),0 0 22px rgba(194,145,47,.10) inset;animation:doorPulse 2.4s ease-in-out infinite}
@keyframes doorPulse{0%,100%{box-shadow:0 0 0 1px rgba(194,145,47,.22),0 0 14px rgba(194,145,47,.06) inset}50%{box-shadow:0 0 0 1px rgba(194,145,47,.40),0 0 26px rgba(194,145,47,.14) inset}}
.door-cue{font-family:var(--mono);font-size:10.5px;color:#0f0d09;background:var(--brass);padding:1px 7px;border-radius:10px;margin-right:8px;text-transform:none;letter-spacing:0;font-weight:700;vertical-align:middle}

/* ---------- Vellum account chip (SSO status) ---------- */
.account-chip{display:inline-flex;align-items:center;margin-right:10px;vertical-align:middle}
.account-chip .chip{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:11px;border:1px solid #393222;white-space:nowrap}
.account-chip .chip.muted{color:var(--muted)}
.account-chip .chip.ok{color:#bfe6c8;border-color:#2f5b3a;background:rgba(74,140,90,.12)}
.account-chip .chip.warn{color:#e6cf9a;border-color:#5b4a2f;background:rgba(194,145,47,.12)}
.account-chip .btn.chip-signin{font-family:var(--mono);font-size:11px;padding:3px 11px;background:linear-gradient(#b23a2c,#8f2c21);border-color:#d2503f;color:#fff}

/* ---------- Play-online lobby ---------- */
.btn.online-btn{font-family:var(--mono);font-size:11px;margin-right:8px;background:linear-gradient(#2c4a3f,#21382f);border-color:#3a6354;color:#cfeeda}
.btn.online-btn:hover{background:linear-gradient(#356053,#284539)}
.lobby-overlay{position:fixed;inset:0;z-index:95;background:rgba(10,8,5,.74);display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}
.lobby-overlay[hidden]{display:none}
.lobby-card{position:relative;max-width:560px;width:100%;background:var(--stock);color:var(--ink);border-radius:5px;padding:24px 28px;box-shadow:0 12px 40px rgba(0,0,0,.6);border-top:5px solid var(--mimeo);font-family:var(--serif)}
.lobby-card .lobby-x{position:absolute;top:8px;right:11px;background:none;border:none;color:#9a9082;font-size:18px;cursor:pointer}
.lobby-title{font-family:var(--typewriter);font-size:20px;color:var(--mimeo);margin-bottom:8px}
.lobby-msg{min-height:16px;font-family:var(--mono);font-size:11px;color:#4a7a52;margin-bottom:6px}
.lobby-msg.bad{color:#b23a2c}
.lobby-row{display:flex;gap:18px;flex-wrap:wrap}
.lobby-sec{flex:1 1 220px;margin:10px 0}
.lobby-sec h4{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--mimeo);margin:0 0 7px}
.lobby-card input{background:#fff;border:1px solid #c9c5b6;color:var(--ink);width:100%;margin-bottom:7px}
.lobby-card .btn{font-family:var(--mono);font-size:12px}
.lobby-card .btn.primary{background:linear-gradient(#b23a2c,#8f2c21);border-color:#d2503f;color:#fff}
.lobby-card .btn:disabled{opacity:.45}
.pc-pick{font-size:13px;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.pc-pick .pc{width:30px;height:30px;border-radius:6px;border:1px solid #c9c5b6;background:#fff;color:var(--ink);cursor:pointer;font-family:var(--mono)}
.pc-pick .pc.on{background:var(--mimeo);color:#fff;border-color:var(--mimeo)}
.invite{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.invite code{flex:1;background:#fff;border:1px dashed #c9a59d;padding:5px 8px;border-radius:4px;font-size:11px;word-break:break-all;color:#7d2a26}
.seats{margin:4px 0;padding-left:20px}
.seats li{margin:3px 0;font-size:14px}
.seats li.empty{color:#9a9082;font-style:italic}
.lb-list{display:flex;flex-direction:column;gap:5px}
.lb-item{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #ddd9cc;border-radius:5px;padding:6px 9px;font-size:13px}
.lb-item.mine{border-color:#d2503f;box-shadow:0 0 0 1px rgba(178,58,44,.25)}
.lb-item .lb-when{font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--mimeo);min-width:74px}
.lb-item .lb-who{flex:1;color:#5a534a}
.lobby-actions{display:flex;gap:9px;margin-top:14px;flex-wrap:wrap}
.lobby-note{background:#efe9d8;border-left:3px solid var(--brass);padding:9px 11px;font-size:13px;color:#5a534a;border-radius:3px;margin:6px 0}

/* ---------- remote-match turn banner ---------- */
.match-banner{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:70;
  font-family:var(--mono);font-size:12px;padding:8px 14px;border-radius:9px;box-shadow:0 6px 20px rgba(0,0,0,.45);
  display:flex;align-items:center;gap:10px;border:1px solid #000}
.match-banner.mine{background:linear-gradient(#2c4a3f,#21382f);border-color:#3a6354;color:#dbf3e4}
.match-banner.wait{background:#1f1c15;color:#c9c1ad}
.match-banner.over{background:linear-gradient(#b23a2c,#8f2c21);border-color:#d2503f;color:#fff}
.match-banner .btn.sm{font-family:var(--mono);font-size:10px;padding:2px 8px}