/* Suiri — monochrome reading-room design system.
   Near black-and-white: dark grey gradients, hairline structure, flat
   surfaces. One accent (near-white) means two things only: you can tap
   it, or you earned it. The story, the clues and the board carry the
   page; everything else is quiet. No webfonts, no images. */
:root{
  --ink:#0a0a0b; --ink2:#101011; --panel:#141415; --panel2:#1b1b1d;
  --paper:#f4f4f5; --parchment:#ececee; --parchment2:#d8d8dc;
  --text:#e9e9ec; --muted:#a7a7ad; --faint:#83838c;
  --brass:#d6d6da; --brass2:#f4f4f5;
  --oxblood:#55555e; --sage:#e9e9ec;
  --line:#2e2e33; --line-soft:#222227;
  --serif:Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
  --radius:14px; --shadow:none;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
::selection{background:#e9e9ec;color:#0a0a0b}
body{margin:0;color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.55;background-color:#09090a;
  background-image:linear-gradient(180deg,#161618 0,#0d0d0e 340px,#09090a 720px);
  background-repeat:no-repeat}
a{color:var(--parchment);text-underline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;margin:0;text-wrap:balance}
.wrap{max-width:1060px;margin:0 auto;padding:0 18px 64px}

/* ---------- header ---------- */
header.site{border-bottom:1px solid var(--line-soft)}
.hdr-in{max-width:1060px;margin:0 auto;padding:10px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand .mark{width:34px;height:34px;flex:none}
.brand .word{font-family:var(--serif);font-size:22px;letter-spacing:.14em;text-transform:uppercase}
.brand .word small{display:block;font-size:9.5px;letter-spacing:.32em;color:var(--faint);text-transform:uppercase;font-family:var(--sans)}
nav.main{display:flex;gap:4px;margin-left:8px}
nav.main a{color:var(--muted);text-decoration:none;font-size:14px;padding:7px 11px;border-radius:99px}
nav.main a:hover{color:var(--text);background:var(--panel2)}
nav.main a[aria-current]{color:#0a0a0b;background:var(--paper);font-weight:700}
.hdr-regs{margin-left:auto;display:flex;gap:8px}
.reg{background:var(--panel);border:1px solid var(--line-soft);border-radius:10px;
  padding:5px 11px;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;min-width:74px}
.reg-label{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.reg b{font-family:var(--serif);font-size:16px;color:var(--paper)}
.reg-tier b{color:var(--paper)}

/* ---------- generic ---------- */
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin:0 0 8px}
.muted{color:var(--muted)} .small{font-size:13px} .tiny{font-size:12px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);border-radius:99px;padding:10px 20px;
  font-size:15px;font-family:var(--sans);cursor:pointer;text-decoration:none;transition:border-color .15s,background .15s}
.btn:hover{border-color:#6e6e76}
.btn.primary{background-color:#e9e9ec;background-image:linear-gradient(180deg,#ffffff,#dcdce0);
  color:#0a0a0b;border-color:transparent;font-weight:700}
.btn.primary:hover{filter:brightness(1.05)}
.btn.danger{border-color:var(--oxblood);color:#c9c9cf}
.btn:disabled{opacity:.45;cursor:default}
.btn.small{padding:6px 14px;font-size:13.5px}
.btn.ghost{background:transparent;border-color:var(--line-soft);color:var(--muted)}
.btn.ghost:hover{color:var(--text);border-color:#6e6e76}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-soft);
  border-radius:99px;padding:3px 11px;font-size:12.5px;color:var(--muted);background:var(--panel)}
.chip b{color:var(--paper);font-family:var(--serif)}
.chip.gold{border-color:#6e6e76;color:var(--paper)}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:20px}
.tag{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:3px 9px;border-radius:99px;
  border:1px solid var(--line);color:var(--muted)}
.tag.grid{color:var(--parchment);border-color:#4a4a52}
.tag.truth{color:var(--muted);border-color:var(--line)}
.tag.stretch{color:#fff;border-color:#8a8a93;font-weight:600}
.dchip{font-family:var(--serif);font-size:13px;border:1px solid var(--line);border-radius:8px;
  padding:2px 8px;color:var(--parchment);background:rgba(255,255,255,.03);white-space:nowrap}
.dchip span{color:var(--faint);font-size:11px;font-family:var(--sans)}

/* ---------- home: daily hero ---------- */
.hero{margin-top:26px;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 42%),
             linear-gradient(180deg,#1e1e21,#121213);
  padding:38px 28px 28px}
.hero h1{font-size:clamp(32px,6vw,48px);letter-spacing:.005em}
.hero .story{max-width:66ch;color:#dcdce0;font-family:var(--serif);font-size:17.5px;line-height:1.65}
.variant-picker{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 20px}
.variant-picker button{border:1px solid var(--line);background:rgba(0,0,0,.35);color:var(--muted);
  border-radius:12px;padding:9px 14px;font-size:13.5px;cursor:pointer;font-family:var(--sans);text-align:left}
.variant-picker button b{display:block;color:var(--paper);font-family:var(--serif);font-size:14.5px}
.variant-picker button.sel{border-color:var(--paper);color:var(--text);
  box-shadow:0 0 0 1.5px var(--paper) inset;background:rgba(255,255,255,.06)}
.hero-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- home: layout ---------- */
.grid2{display:grid;grid-template-columns:1fr;gap:18px;margin-top:22px}
@media(min-width:820px){.grid2{grid-template-columns:340px 1fr}}
.section-h{display:flex;align-items:baseline;gap:12px;margin:30px 0 12px}
.section-h h2{font-size:23px}
.section-h .rule{flex:1;height:1px;background:var(--line-soft)}
.progress-row{margin:12px 0}
.progress-row .lbl{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.progress-row .lbl b{color:var(--parchment)}
.bar{height:8px;border-radius:99px;background:rgba(0,0,0,.5);border:1px solid var(--line-soft);overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#8f8f96,#f4f4f5);border-radius:99px}
.tier-ladder{display:flex;gap:5px;margin-top:14px;flex-wrap:wrap}
.tier-ladder .rung{flex:1;min-width:86px;border:1px solid var(--line-soft);border-radius:10px;
  padding:7px 9px;font-size:11.5px;color:var(--faint);background:rgba(255,255,255,.02)}
.tier-ladder .rung b{display:block;font-family:var(--serif);font-size:13px;color:var(--muted)}
.tier-ladder .rung.on{border-color:var(--paper);color:var(--muted)}
.tier-ladder .rung.on b{color:#fff}
.tier-ladder .rung.done b{color:var(--parchment)}

/* ---------- case cards ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.case-card{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:var(--text);
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:17px 18px;transition:border-color .15s}
.case-card:hover{border-color:#71717a}
.case-card h3{font-size:19px}
.case-card p{margin:0;color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.case-card .foot{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:auto}
.case-card .play{margin-left:auto;font-family:var(--serif);color:#fff;font-size:14.5px}
.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:22px;color:var(--muted);text-align:center}

/* ---------- play page ---------- */
.play-head{margin-top:26px}
.play-head h1{font-size:clamp(28px,5vw,38px)}
.casefile{margin-top:12px}
.casefile summary{cursor:pointer;color:var(--faint);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;list-style:none;width:max-content}
.casefile summary::-webkit-details-marker{display:none}
.casefile summary::before{content:"▸ "}
.casefile[open ] summary::before{content:"▾ "}
.casefile summary:hover{color:var(--text)}
#case-story{font-family:var(--serif);font-size:17.5px;line-height:1.65;color:#dcdce0;max-width:68ch;margin:10px 0 12px}
.statusline{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;
  font-size:13px;color:var(--faint);margin:18px 0 12px;font-variant-numeric:tabular-nums}
.statusline b{font-family:var(--serif);font-size:16px;color:var(--paper);font-weight:600}
.statusline .sep{opacity:.5}
.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:14px}
.actions .spacer{flex:1}
.plan{position:relative;height:min(62vw,380px);min-height:300px;border:1.5px solid #333338;
  border-radius:16px;background:
   repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 46px),
   repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 46px),
   linear-gradient(160deg,#232327,#141416 65%,#0f0f10);overflow:hidden}
.room{position:absolute;border:1.5px solid rgba(255,255,255,.26);border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  cursor:pointer;padding:8px 10px;transition:border-color .15s}
.room:hover{border-color:#fff}
.room b{font-family:var(--serif);font-size:14.5px;color:var(--paper);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.room span{display:block;font-size:11px;color:rgba(255,255,255,.55);line-height:1.3}
.hallmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:10px;
  letter-spacing:.3em;color:rgba(255,255,255,.3);text-transform:uppercase;pointer-events:none}
.tok{position:absolute;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  border:2.5px solid rgba(255,255,255,.9);box-shadow:0 3px 10px rgba(0,0,0,.5);
  transition:left .85s ease-in-out,top .85s ease-in-out;z-index:5;cursor:pointer;font-family:var(--sans)}
.tok.sel{outline:3px solid #fff;outline-offset:2px}
.tok.walk{animation:bob .16s infinite alternate ease-in-out}
@keyframes bob{from{margin-top:0}to{margin-top:-6px}}
.person-colors-0{background:#9a9aa2;color:#101012}.person-colors-1{background:#6e6e76;color:#fff}
.person-colors-2{background:#45454d;color:#fff}.person-colors-3{background:#c6c6cc;color:#101012}
.person-colors-4{background:#83838c;color:#fff}.person-colors-5{background:#2c2c31;color:#fff}
.clues ol{margin:0;padding-left:21px;font-size:16px;line-height:1.65;color:#e2e2e6}
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:17px 19px;margin-top:16px}
.panel h3{font-size:17px;margin-bottom:10px}
.objrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:7px 0;font-size:14px}
.objrow b{width:64px;font-family:var(--serif)}
.obtn{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);border-radius:99px;
  padding:5px 12px;font-size:12.5px;cursor:pointer;font-family:var(--sans)}
.obtn.sel{background:var(--paper);color:#0a0a0b;font-weight:700;border-color:transparent}
.obtn:disabled{opacity:.4;cursor:default}
.msg{min-height:24px;font-size:15px;margin:10px 0;color:#e2e2e6}
.winbox{display:none;border:1px solid var(--paper);border-radius:var(--radius);padding:20px;margin-top:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.winbox.show{display:block}
.winbox h3{font-size:21px;color:#fff}
.breakdown{display:grid;grid-template-columns:1fr auto;gap:4px 16px;font-size:14.5px;margin:12px 0;max-width:420px}
.breakdown>div{display:contents}
.breakdown dt{color:var(--muted)} .breakdown dd{margin:0;font-family:var(--serif);text-align:right}
/* statement board */
.statement-grid{display:grid;grid-template-columns:1fr;gap:13px}
@media(min-width:640px){.statement-grid{grid-template-columns:1fr 1fr}}
.person-card{border:1px solid var(--line-soft);border-radius:var(--radius);padding:15px 17px;
  background:linear-gradient(180deg,var(--panel2),var(--panel))}
.person-card .who{display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;flex:none;border:2px solid rgba(255,255,255,.8)}
.person-card .who b{font-family:var(--serif);font-size:17px}
.quote{font-family:var(--serif);font-style:italic;color:#e2e2e6;margin:9px 0 4px;font-size:15.5px}
.typepick{display:flex;gap:6px;margin-top:11px}
.typepick button{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);
  border-radius:10px;padding:8px 4px;font-size:13px;cursor:pointer;font-family:var(--sans)}
.typepick button.sel-truth{background:var(--paper);color:#0a0a0b;font-weight:700;border-color:transparent}
.typepick button.sel-liar{background:#26262b;color:var(--paper);font-weight:700;border-color:#55555e}

/* ---------- tables / leaderboard / profile ---------- */
table.board{width:100%;border-collapse:collapse;font-size:15px}
table.board th{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
table.board td{padding:10px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
table.board tr.you td{background:rgba(255,255,255,.09);color:var(--paper);font-weight:600}
table.board td.num,table.board th.num{text-align:right}
table.board td.rank{font-family:var(--serif);color:#fff;width:44px}
.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
@media(min-width:760px){.statgrid{grid-template-columns:repeat(4,1fr)}}
.stat{border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px;background:var(--panel)}
.stat .k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.stat .v{font-family:var(--serif);font-size:29px;color:var(--paper);margin-top:3px}
.stat .s{font-size:12.5px;color:var(--muted)}
.history{display:flex;flex-direction:column}
.history .row{display:flex;gap:10px;align-items:baseline;padding:10px 2px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.history .row .t{font-family:var(--serif);font-size:15.5px}
.history .row .when{margin-left:auto;color:var(--faint);font-size:12.5px;white-space:nowrap}
.foot-note{margin-top:44px;color:var(--faint);font-size:12.5px;text-align:center}
.demo-banner{border:1px solid #4a4a52;background:rgba(255,255,255,.05);color:#dcdce0;
  border-radius:12px;padding:11px 15px;font-size:14px;margin:16px 0}
@media(max-width:640px){
  /* Slim mobile header: brand + registers share one row, nav drops to a
     single compact row of its own instead of stacking three tall rows. */
  .hdr-in{padding:7px 12px;gap:6px 10px}
  .brand{gap:7px}
  .brand .mark{width:24px;height:24px}
  .brand .word{font-size:17px}
  .brand .word small{display:none}
  .hdr-regs{gap:6px}
  .reg{flex-direction:row;align-items:baseline;gap:5px;min-width:0;padding:3px 8px;border-radius:8px}
  .reg-label{font-size:8.5px}
  .reg b{font-size:13px}
  nav.main{order:3;flex-basis:100%;margin-left:0;justify-content:space-between}
  nav.main a{font-size:13px;padding:5px 10px}
  .hero{padding:28px 20px 22px}
  .plan{min-height:260px}
}

/* ---------- the stage (play page acts) ---------- */
.stage-wrap{max-width:1440px}
.stage{position:relative;border:1px solid var(--line-soft);border-radius:22px;overflow:hidden;
  margin-top:18px;background:linear-gradient(180deg,#17171a,#0b0b0c);
  min-height:min(880px,calc(100dvh - 128px))}
.stage-bg{position:absolute;inset:0;opacity:.5;transition:opacity 1.4s ease;pointer-events:none}
.stage-scene{width:100%;height:100%;display:block}
.stage[data-phase="investigation"] .stage-bg{opacity:.14}
.stage[data-phase="reveal"] .stage-bg{opacity:.3}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.arrival{position:relative;z-index:2;max-width:700px;margin:0 auto;text-align:center;
  padding:10vh 24px 9vh;display:flex;flex-direction:column;align-items:center;animation:rise .9s ease-out}
.arrival h1{font-size:clamp(34px,5.2vw,54px)}
.arrival #case-story{text-align:left;margin-top:22px}
.arrival-meta{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.btn.begin{margin-top:30px;padding:13px 30px;font-size:16.5px}
.arrival-note{margin-top:18px;max-width:58ch;line-height:1.6}
.investigation{position:relative;z-index:2;padding:18px 22px 24px;animation:rise .7s ease-out}
.stage-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.stage-bar .statusline{margin:0}
.stage-title-mini{margin-left:auto;font-family:var(--serif);font-size:14.5px;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38%}
.casefile-panel{border:1px solid var(--line-soft);background:rgba(10,10,11,.72);border-radius:var(--radius);
  padding:16px 19px;margin-top:14px}
.casefile-panel #case-story{margin-top:0}
.casefile-panel .arrival-meta{justify-content:flex-start;margin-top:10px}
.stage-grid{display:grid;gap:18px;margin-top:14px}
.stage-board{min-width:0}
.stage-rail{min-width:0}
.stage-rail .panel{margin-top:16px}
.stage-rail .panel:first-child{margin-top:0}
.stage .plan{height:min(58vh,560px);min-height:340px}
@media(min-width:1080px){
  .stage-grid{grid-template-columns:minmax(0,1fr) 400px;align-items:start}
}
@media(max-width:1079px){
  .stage .plan{height:min(62vw,380px);min-height:280px}
  .stage-title-mini{display:none}
}
.stage[data-phase="reveal"] .winbox{animation:rise .8s ease-out}
@media (prefers-reduced-motion: reduce){
  .arrival,.investigation,.stage[data-phase="reveal"] .winbox{animation:none}
  .stage-bg{transition:none}
}