/* Progression screens (progression agent): S03 New town, S04 Roles, S13 Result, S14 Daily, S19 Ledger, S22 Tutorial, the coach marks and the context-hint bubble.
   Uses only the app.css tokens (so every board paper recolours it) and the app.css components (.screen .panel .btn .chip .list .tiles .toggle .seg). */

/* ---------- shared bits ---------- */
.startbar{ position:sticky; bottom:0; z-index:5; display:flex; flex-direction:column; gap:6px; margin:auto -4px 0; padding:10px 4px calc(var(--sab) + 6px);
  background:linear-gradient(180deg,rgba(14,26,43,0),var(--bg) 22%); }
.startbar .small{ margin:0; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.xpbar{ height:14px; border-radius:7px; background:rgba(0,0,0,.34); overflow:hidden; border:1px solid var(--panel-edge); }
.xpbar > span{ display:block; height:100%; background:linear-gradient(90deg,var(--brass),var(--lamp-core)); border-radius:7px; }
.tc-points{ margin:0 0 6px; padding-left:20px; } .tc-points li{ margin:3px 0; }

/* ---------- S03: scenario + tier cards ---------- */
.btn.scen, .btn.tiercard, .btn.rolecard, .btn.cosmetic, .btn.dailyrole{
  --bg-b:rgba(246,235,208,.07); --fg:var(--ink); --edge-b:transparent; box-shadow:none; border:1.5px solid var(--panel-edge);
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:6px; text-align:left; font-size:var(--fs-m); font-weight:500; min-height:56px; width:100%; padding:10px 12px;
}
.btn.scen.sel, .btn.tiercard.sel, .btn.rolecard.sel, .btn.cosmetic.sel, .btn.dailyrole.sel{ border-color:var(--lamp-core); background:rgba(255,210,122,.14); box-shadow:inset 0 0 0 1px var(--lamp-core); }
.btn.scen.pressed, .btn.tiercard.pressed, .btn.rolecard.pressed, .btn.cosmetic.pressed, .btn.dailyrole.pressed{ transform:translateY(2px); box-shadow:none; }
.scenlist, .tierlist, .rolelist{ display:flex; flex-direction:column; gap:8px; }
.sc-top{ display:flex; align-items:center; gap:8px; font-size:var(--fs-l); } .sc-top > b{ flex:1; min-width:0; }
.sc-n{ flex:0 0 26px; height:26px; border-radius:50%; background:var(--paper-hi); display:grid; place-items:center; font-size:var(--fs-xs); font-weight:700; }
.sc-radio{ flex:0 0 auto; font-size:var(--fs-l); color:var(--lamp-core); margin-left:auto; }
.sc-blurb{ color:var(--ink-muted); line-height:1.35; }
.tc-band{ color:var(--lamp-core); font-weight:600; font-size:var(--fs-s); }
.tc-lines{ margin:0; padding-left:18px; color:var(--ink-muted); } .tc-lines li{ margin:2px 0; }
.chip.seatchip{ gap:4px; }

/* ---------- S04: roles, seats, bots ---------- */
.rc-badge{ order:99; margin-left:auto; display:inline-flex; opacity:.95; }
.rc-main{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.rc-top{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:var(--fs-l); }
.rc-line{ line-height:1.35; } .rc-line b{ color:var(--lamp-core); font-weight:600; }
.rc-lock{ color:var(--warn); font-weight:600; }
.btn.rolecard.locked{ opacity:.62; }
.seatrow{ display:flex; align-items:center; gap:8px; padding:4px; border-radius:12px; border:1.5px solid transparent; }
.seatrow.active{ border-color:var(--lamp-core); background:rgba(255,210,122,.08); }
.seatrow input.text{ flex:1; min-width:0; }
.seatmark{ flex:0 0 28px; display:grid; place-items:center; }
.seatrole{ flex:0 0 auto; max-width:38%; text-align:center; }
.botrow{ display:flex; align-items:center; gap:10px; min-height:48px; }
.botrow .br-name{ flex:1; min-width:0; }

/* ---------- S13: result ---------- */
.verdict{ text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center; padding:18px 14px; }
.verdict.win{ background:linear-gradient(180deg,rgba(255,158,61,.22),var(--panel) 75%); border-color:rgba(255,210,122,.65); }
.verdict.lose{ background:linear-gradient(180deg,rgba(94,120,160,.22),var(--panel) 75%); }
.vkicker{ margin:0; color:var(--ink-muted); font-size:var(--fs-s); font-weight:600; letter-spacing:.3px; }
.vline{ margin:0; font-size:var(--fs-l); }
.vstars{ margin:0; font-size:calc(46px * var(--tx)); line-height:1; color:var(--lamp-core); letter-spacing:6px; text-shadow:0 3px 0 var(--bg-deep); }
.near{ margin:0; font-weight:600; color:var(--warn); }
.nighttrack{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,12),minmax(0,1fr)); gap:4px; }
.np{ display:flex; flex-direction:column; align-items:center; gap:2px; border-radius:8px; padding:4px 0 3px; border:1.5px solid transparent; min-width:0; }
.np .nn{ font-size:var(--fs-xs); color:var(--ink-muted); } .np .nb{ font-weight:700; font-size:var(--fs-xs); min-height:1.2em; } .np .nm{ font-size:var(--fs-xs); min-height:1.2em; color:var(--lamp-core); }
.np.calm{ background:rgba(60,198,181,.22); border-color:rgba(60,198,181,.6); } .np.warm{ background:rgba(242,169,59,.30); border-color:rgba(242,169,59,.8); }
.np.hot{ background:rgba(255,122,102,.38); border-color:var(--danger); } .np.dawn{ background:rgba(255,210,122,.38); border-color:var(--lamp-core); }
.np.fall{ background:rgba(255,122,102,.25); border:2px solid var(--danger); } .np.future{ border:1.5px dashed var(--panel-edge); opacity:.7; }
.lhlist li{ align-items:center; gap:8px; flex-wrap:wrap; }
.lhname{ display:flex; align-items:center; gap:8px; min-width:0; }
.lhglyph{ font-size:var(--fs-xl); } .lhglyph.ca{ color:var(--amber); } .lhglyph.ct{ color:var(--teal); } .lhglyph.cv{ color:var(--violet); }
.unlocks{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.xpbox{ border-color:rgba(255,210,122,.45); }
.resultbtns .btn{ width:100%; }
.banner-host{ position:fixed; inset:0; z-index:44; pointer-events:none; }
.confetti-host{ position:fixed; inset:0; z-index:30; pointer-events:none; overflow:hidden; }
.installbanner{ border-color:rgba(255,210,122,.5); }

/* ---------- S14: Daily ---------- */
.dailydate{ margin:0; font-size:var(--fs-l); }
.dailyroles{ display:flex; flex-direction:column; gap:8px; }
.btn.dailyrole{ flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; }
.btn.dailyrole .dim{ flex-basis:100%; color:var(--ink-muted); }
.dailyseg{ display:flex; max-width:none; width:100%; } .dailyseg .btn{ flex:1 1 0; }
.bigline{ margin:0; font-size:var(--fs-xl); font-weight:700; }
.dailystars{ margin:0; font-size:calc(32px * var(--tx)); color:var(--lamp-core); letter-spacing:4px; }
.dailyresult.win{ border-color:rgba(255,210,122,.6); }
.strip14{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px 2px; }
.strip14 li{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:3px 0; border-radius:8px; border:1.5px solid transparent; color:var(--ink-muted); min-height:44px; }
.strip14 li.today{ border-color:var(--lamp-core); color:var(--ink); }
.strip14 li{ min-height:56px; } .strip14 .dn{ font-size:var(--fs-xs); } .strip14 .ic svg{ display:block; width:28px; height:auto; }
.strip14.mini .mk{ font-weight:700; font-size:var(--fs-s); }
.chart{ display:flex; align-items:flex-end; gap:4px; height:110px; padding:4px 0; }
.chart .col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; border-radius:8px; border:1.5px solid transparent; min-width:0; height:100%; }
.chart .col.me{ border-color:var(--lamp-core); background:rgba(255,210,122,.1); }
.chart .bar{ display:block; width:70%; background:var(--teal); border-radius:4px 4px 0 0; } .chart .v, .chart .n{ font-size:var(--fs-xs); color:var(--ink-muted); }
.worldlist li{ font-size:var(--fs-s); }
pre.sharecard{ margin:0; padding:12px; border-radius:12px; background:var(--card); color:var(--card-ink); font:600 var(--fs-s)/1.45 ui-monospace,Menlo,monospace; white-space:pre-wrap; word-break:break-word; user-select:text; -webkit-user-select:text; }

/* ---------- S19: Ledger ---------- */
.statlist li{ flex-wrap:wrap; row-gap:4px; }
.sl-name{ font-weight:600; } .sl-val{ margin-left:auto; text-align:right; }
.pctbar{ flex-basis:100%; height:6px; border-radius:3px; background:rgba(0,0,0,.34); overflow:hidden; } .pctbar i{ display:block; height:100%; background:var(--teal); }
.ledgerpanel{ padding:12px 8px; } .ledgerpanel > h2, .ledgerpanel > p, .ledgerpanel > .row{ padding:0 6px; }
.ledgergrid{ display:grid; grid-template-columns:42px repeat(6,minmax(0,1fr)); gap:1px; }
.lcorner{ min-height:68px; } .lhead{ min-height:68px; display:flex; align-items:flex-end; justify-content:center; }
.lhead span{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:var(--fs-xs); font-weight:600; color:var(--ink-muted); white-space:nowrap; padding-bottom:4px; }
.lrole{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; min-height:44px; font-size:var(--fs-xs); font-weight:600; color:var(--ink-muted); line-height:1.1; overflow:hidden; } .lrole .lrb{ display:flex; } .lrole svg{ width:auto; height:14px; }
.lcell{ min-height:44px; min-width:0; border-radius:8px; border:1.5px dashed var(--panel-edge); background:rgba(0,0,0,.2); color:var(--ink-muted); font-size:var(--fs-xs); padding:0; }
.lcell.won{ border-style:solid; color:var(--card-ink); font-weight:700; }
.lcell.s1{ background:#E8D4A0; border-color:#C9A95E; } .lcell.s2{ background:#F2C25A; border-color:#D9A22E; } .lcell.s3{ background:var(--lamp-core); border-color:var(--lamp-glow); }
.cosgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.btn.cosmetic{ align-items:center; text-align:center; gap:4px; }
.btn.cosmetic.locked{ opacity:.6; } .cosart{ display:grid; place-items:center; min-height:46px; }
.paperswatch{ width:78px; height:46px; border-radius:10px; border:2px solid; display:flex; align-items:center; justify-content:center; gap:5px; } .paperswatch i{ width:16px; height:28px; border-radius:4px; display:block; }

/* ---------- context hint bubble ---------- */
#overlays > .hintbubble{ position:fixed; z-index:44; display:flex; align-items:flex-start; gap:6px; padding:8px 4px 8px 12px; border-radius:12px; background:var(--card); color:var(--card-ink);
  font-weight:600; font-size:var(--fs-s); line-height:1.35; box-shadow:0 4px 0 var(--bg-deep), 0 0 0 2px var(--lamp-core); pointer-events:none; animation:toast-in var(--anim) ease-out; }
#overlays > .hintbubble.out{ opacity:0; transition:opacity 160ms; }
.hintbubble .hb-text{ flex:1; padding-top:2px; } .hintbubble .hb-x{ pointer-events:auto; flex:0 0 44px; width:44px; height:44px; margin:-8px -2px -8px 0; border:0; background:none; font-size:var(--fs-xxl); line-height:1; color:var(--card-ink); }
.hintbubble::after{ content:''; position:absolute; left:var(--ax,50%); width:14px; height:14px; background:var(--card); transform:translateX(-50%) rotate(45deg); box-shadow:2px 2px 0 var(--lamp-core); }
.hintbubble[data-side="above"]::after{ bottom:-7px; } .hintbubble[data-side="below"]::after{ top:-7px; box-shadow:-2px -2px 0 var(--lamp-core); } .hintbubble[data-side="none"]::after{ display:none; }

/* ---------- tutorial coach ---------- */
#overlays > .tcoach{ position:fixed; z-index:43; display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:14px; background:var(--card); color:var(--card-ink);
  box-shadow:0 5px 0 var(--bg-deep), 0 0 0 2px var(--lamp-core); pointer-events:auto; max-width:calc(100vw - 16px); }
.tcoach .tc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .tcoach .tc-step{ font-size:var(--fs-xs); font-weight:700; color:#6B4F1F; }
.tcoach .tc-col{ width:44px; height:44px; margin:-8px -6px -8px 0; border:0; border-radius:12px; background:rgba(42,30,16,.1); color:var(--card-ink); font-size:var(--fs-xl); font-weight:700; }
.tcoach .tc-text{ margin:0; font-size:var(--fs-m); line-height:1.35; font-weight:500; } .tcoach .tc-text b{ color:#8A4B00; }
.tcoach .tc-stuck{ margin:0; font-size:var(--fs-xs); color:#7A3A00; font-weight:600; }
.tcoach .tc-btns{ display:flex; flex-wrap:wrap; gap:6px; } .tcoach .tc-btns .btn{ flex:1 1 auto; min-height:44px; }
.tcoach .btn.quiet{ --fg:var(--card-ink); border-color:rgba(42,30,16,.35); }
.tcoach.collapsed .tc-text, .tcoach.collapsed .tc-btns, .tcoach.collapsed .tc-stuck{ display:none; }
.tcoach.collapsed{ padding:6px 8px; }
#overlays > .tspot{ position:fixed; z-index:41; display:none; border-radius:12px; border:3px solid var(--lamp-core); box-shadow:0 0 0 3px rgba(8,17,29,.6), 0 0 18px 4px rgba(255,210,122,.75); pointer-events:none; animation:tspot 1.4s ease-in-out infinite; }
@keyframes tspot{ 0%,100%{ box-shadow:0 0 0 3px rgba(8,17,29,.6), 0 0 10px 2px rgba(255,210,122,.5); } 50%{ box-shadow:0 0 0 3px rgba(8,17,29,.6), 0 0 22px 7px rgba(255,210,122,.9); } }
html[data-motion="reduced"] .tspot{ animation:none; }
.tutready .homehead{ padding-top:20px; }

/* a Start note that explains what is missing */
.startbar .warnnote{ color:var(--warn); font-weight:600; }
.startbar .flash{ animation:noteflash 420ms ease-out; } @keyframes noteflash{ 0%{ transform:translateX(0); } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 100%{ transform:none; } }
html[data-motion="reduced"] .startbar .flash{ animation:none; }