/* whichscene: the Premiere look (black and gold, serif titles), founder 2026-10-06. No emoji anywhere: icons are SVG. */
:root{--bg:#0b0a09;--fg:#f3eadb;--mute:#9a8f7e;--gold:#e8b65a;--goldbtn:linear-gradient(180deg,#f6d58e,#e8b65a);--ink:#1b1307;--card:#17140f;--card2:#1e1a14;--line:#2a241c;--bc:#3a3226;--hl:#e8b65a1f;
  --ok:#5fb37a;--near:#e8a33a;--bad:#d9534a;--off:#ffffff30;--blue:#5aa0e8;--head:"DM Serif Display",Georgia,serif;--body:Inter,system-ui,-apple-system,sans-serif;--r:18px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none}
body{font-family:var(--body);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
svg{display:block}
#app{position:relative;max-width:460px;margin:0 auto;height:100dvh;overflow:hidden;background:var(--bg);color:var(--fg)}
.scr{position:absolute;inset:0;display:none;flex-direction:column;padding-bottom:env(safe-area-inset-bottom)}
.scr.on{display:flex;animation:in .25s ease-out}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
@keyframes fade{from{opacity:0}}
.btn{height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:17px;background:var(--goldbtn);color:var(--ink);box-shadow:0 10px 30px #e8b65a2a;width:100%;flex-shrink:0;transition:transform .08s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;pointer-events:none}
.btn.sec{background:var(--card);color:var(--fg);border:1px solid var(--bc);box-shadow:none}
.btn i svg{width:18px;height:18px}
.link{color:var(--mute);font-size:14px;font-weight:600;padding:6px;align-self:center;text-decoration:underline;text-underline-offset:3px;flex-shrink:0}
.tag{position:absolute;left:10px;top:10px;z-index:2;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:#000a;color:#fff;pointer-events:none}

/* every clip is drawn whole at its own shape (480x832, cartoons 720x1280), never cropped */
.fit{flex:1;min-height:0;container-type:size;display:flex;align-items:center;justify-content:center}
.frame{position:relative;width:min(100cqw,calc(100cqh * var(--ar,0.577)));aspect-ratio:var(--ar,0.577);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#000;flex-shrink:0}
.frame video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.ic{position:absolute;top:8px;z-index:3;width:40px;height:40px;border-radius:50%;background:#000a;color:#fff;display:grid;place-items:center}
.ic svg{width:17px;height:17px}
.snd{right:8px}.shr{right:54px}

/* ---------- HOME ---------- */
#home{padding:20px 18px calc(14px + env(safe-area-inset-bottom));gap:12px}
.logo{font-family:var(--head);font-size:34px;text-align:center;flex-shrink:0;letter-spacing:-.01em}
.logo em{color:var(--gold)}

/* ---------- HUD ---------- */
.hud{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 10px;gap:12px;flex-shrink:0;padding-top:max(12px,env(safe-area-inset-top))}
.hudl{flex:1;min-width:0}
.quit{width:40px;height:40px;border-radius:50%;border:1px solid var(--bc);color:var(--mute);display:grid;place-items:center;flex-shrink:0;transition:opacity .2s}
.quit svg{width:16px;height:16px}
.lvl{font-family:var(--head);font-size:26px;line-height:1;white-space:nowrap}
.lvl small{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-right:6px}
.hearts{display:flex;gap:4px;margin-top:5px;color:var(--bad)}
.hearts i{display:flex}.hearts i.lost{opacity:.22;filter:grayscale(1)}
.hearts i.pop{animation:lose .6s}
@keyframes lose{40%{transform:scale(1.8)}}
.pips{display:flex;gap:5px;margin-top:7px}
.pips i{width:26px;height:4px;border-radius:2px;background:var(--off)}
.pips i.on{background:var(--gold)}.pips i.miss{background:var(--bad)}.pips i.near{background:var(--near)}
.score{text-align:right;line-height:1;flex-shrink:0}
.score small{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.score b{font-family:var(--head);font-weight:400;font-size:30px;color:var(--gold);font-variant-numeric:tabular-nums;display:inline-block}
.score b.bump{animation:bump .45s}
@keyframes bump{40%{transform:scale(1.25)}}
.stage-fit{padding:0 14px}

/* ---------- result overlay on the clip ---------- */
.flash{position:absolute;inset:0;z-index:4;display:none;align-items:center;justify-content:center;flex-direction:column;gap:6px;background:#000d;color:#fff;text-align:center;padding:18px}
.flash.on{display:flex;animation:fade .2s ease-out}
.flash .big{line-height:0}.flash .big svg{width:48px;height:48px}
.flash .big.ok{color:var(--ok)}.flash .big.near{color:var(--near)}.flash .big.miss{color:var(--bad)}.flash .big.gold{color:var(--gold)}
.flash .ttl{font-family:var(--head);font-size:28px;line-height:1.1}
.flash .sub{font-size:15px;opacity:.8}
.flash .btn{margin-top:14px;width:auto;padding:0 28px;height:48px}
.flash .btn.wait{opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .25s,transform .25s}
.flash .btn.wait.on{opacity:1;pointer-events:auto;transform:none}
.brk{width:100%;max-width:250px;margin-top:12px;display:flex;flex-direction:column;gap:7px}
.brk div{display:flex;justify-content:space-between;font-size:15px;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.brk div.on{opacity:1;transform:none}
.brk span{color:#d8cdbb;text-align:left}.brk b{font-variant-numeric:tabular-nums}.brk i{font-style:normal}
.brk b.neg{color:var(--bad)}
.brk .tot{border-top:1px solid #ffffff30;padding-top:8px;margin-top:2px;align-items:baseline}
.brk .tot span{color:#fff;font-weight:700}.brk .tot b{font-family:var(--head);font-weight:400;font-size:26px;color:var(--gold)}
.chips{display:flex;gap:6px;margin-top:12px;justify-content:center;flex-wrap:wrap}
.chips small{width:100%;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ffffff80;font-weight:700}
.chips button{height:40px;padding:0 12px;border-radius:999px;border:1px solid #ffffff40;font-size:13px;font-weight:600;color:#fff}
.chips button.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
/* the result card always fits its clip, however small the clip gets (a phone with the browser bar and 4 choices
   open leaves ~380 px; founder bug report 2026-10-14): it is a size container and tightens step by step */
.frame:has(>.flash){container-type:size}
.flash{justify-content:safe center;overflow:auto}
@container (max-height:540px){
  .flash>*{flex-shrink:0}
  .flash .big svg{width:36px;height:36px}
  .flash .ttl{font-size:24px}
  .flash .sub{font-size:14px}
  .brk{margin-top:8px;gap:5px}.brk div{font-size:14px}.brk .tot{padding-top:6px}.brk .tot b{font-size:22px}
  .chips{margin-top:8px;gap:5px}.chips button{height:28px;padding:0 10px;font-size:12.5px}
  .flash .btn{margin-top:10px;height:44px}
}
@container (max-height:430px){
  .flash{padding:10px;gap:3px}
  .flash .big svg{width:28px;height:28px}
  .flash .ttl{font-size:20px}
  .flash .sub{font-size:13px}
  .brk{margin-top:6px;gap:3px}.brk div{font-size:13px}.brk .tot{padding-top:4px}.brk .tot b{font-size:20px}
  .chips{margin-top:6px}.chips small{display:none}
  .flash .btn{margin-top:8px;height:40px;font-size:16px}
}
@container (max-width:250px){
  .flash{padding-left:10px;padding-right:10px}
  .chips{gap:4px}.chips button{padding:0 8px;font-size:12px}
}
.fly{position:absolute;z-index:20;font-family:var(--head);font-size:26px;color:var(--gold);pointer-events:none;transition:transform .55s cubic-bezier(.5,0,.75,0),opacity .55s}
.hb{position:relative;width:110px;height:110px;color:var(--bad);animation:beat .35s ease-out}
.hb i{position:absolute;inset:0;display:block;transition:transform .6s cubic-bezier(.3,0,.6,1),opacity .6s .15s}
.hb svg{width:110px;height:110px;display:block}
.hb .l{clip-path:polygon(0 0,52% 0,44% 30%,56% 52%,46% 75%,50% 100%,0 100%)}
.hb .r{clip-path:polygon(52% 0,100% 0,100% 100%,50% 100%,46% 75%,56% 52%,44% 30%)}
.hb.go .l{transform:translate(-26px,30px) rotate(-24deg);opacity:0}
.hb.go .r{transform:translate(26px,30px) rotate(24deg);opacity:0}
@keyframes beat{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* ---------- answer dock ---------- */
.dock{padding:10px 14px 14px;position:relative;flex-shrink:0;transition:opacity .2s}
.scr:has(.flash.on) .dock,.scr:has(.flash.on) .quit{opacity:.12;pointer-events:none}
.sugg{position:absolute;left:14px;right:14px;bottom:calc(100% - 4px);background:var(--card);border:1px solid var(--bc);border-radius:var(--r);overflow:hidden;display:none;z-index:5;box-shadow:0 -10px 30px #0008}
.sugg.on{display:block}
.sugg button{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;padding:13px 16px;text-align:left;font-size:16px;border-top:1px solid var(--line)}
.sugg button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugg button:first-child{border-top:0;background:var(--hl)}
.sugg small{color:var(--mute);flex-shrink:0}
.row{display:flex;gap:8px}
.inp{flex:1;min-width:0;width:100%;height:54px;border-radius:16px;border:0;background:var(--fg);color:#16120c;font:500 17px var(--body);padding:0 16px;outline:none}
.inp::placeholder{color:#8a7e6c}
.inp.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.guess{display:none;width:auto;height:54px;padding:0 22px}
.pick{display:none;flex:1;min-width:0;height:54px;border-radius:16px;background:var(--fg);color:#16120c;box-shadow:0 0 0 2px var(--gold);align-items:center;gap:8px;padding:0 8px 0 16px;text-align:left}
.pick span{flex:1;min-width:0;font:600 16px/1.2 var(--body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pick .x{width:30px;height:30px;border-radius:50%;background:#16120c1a;display:grid;place-items:center;flex-shrink:0}
.pick .x svg{width:14px;height:14px}
.row.sel .inp{display:none}.row.sel .pick,.row.sel .guess{display:flex;animation:fade .15s}
.helpers{display:flex;gap:10px;margin-top:10px}
.help{flex:1;height:46px;border-radius:12px;border:1px solid var(--bc);background:var(--card);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;color:var(--fg)}
.help svg{color:var(--gold);width:18px;height:18px}
.help .n{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:12px;font-weight:800;display:grid;place-items:center}
.help:disabled{opacity:.35;pointer-events:none}
.help:disabled .n{background:var(--off);color:var(--fg)}
.choices{display:none;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.choices.on{display:grid}
.choices button{min-height:50px;padding:8px 10px;border-radius:12px;background:var(--card);border:1px solid var(--bc);font-weight:600;font-size:14px;line-height:1.25}
.choices button.sel{border-color:var(--gold);background:var(--hl);color:var(--gold)}
.choices button.x{opacity:.3;text-decoration:line-through;pointer-events:none}

/* ---------- RESULT ---------- */
#res,#lreveal{padding:18px 20px calc(16px + env(safe-area-inset-bottom));gap:11px;background:var(--bg);padding-top:max(18px,env(safe-area-inset-top))}
.stamp{align-self:center;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;border-radius:6px;border:1.5px solid currentColor;flex-shrink:0}
.stamp.ok{color:var(--ok)}.stamp.bad{color:var(--bad)}.stamp.gold{color:var(--gold)}
.rtitle{font-family:var(--head);font-size:34px;line-height:1.05;text-align:center;flex-shrink:0}
.rtitle small{font-family:var(--body);font-size:15px;font-weight:500;color:var(--mute);margin-left:6px}
.rsub{text-align:center;font-size:15px;color:var(--mute);flex-shrink:0}
.rsub b{color:var(--gold);font-family:var(--head);font-weight:400;font-size:24px}
.rnote{text-align:center;font-size:14px;color:var(--mute);line-height:1.45;flex-shrink:0}
.rnote:empty{display:none}
.strip{display:flex;gap:8px;justify-content:center;align-items:center;flex:1;min-height:0;container-type:size}
.strip div{width:min(calc((100cqw - 16px) / 3),calc(100cqh * 480 / 832));aspect-ratio:480/832;flex-shrink:0;border-radius:9px;overflow:hidden;border:1px solid var(--bc);background:#000;position:relative}
.strip video{width:100%;height:100%;object-fit:contain;display:block}
.strip div.hit{outline:3px solid var(--ok);outline-offset:2px}
.trail{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;flex-shrink:0}
.trail:empty{display:none}
.trail i{width:14px;height:14px;border-radius:3px;background:var(--off)}
.trail i.ok{background:var(--ok)}.trail i.near{background:var(--near)}.trail i.miss{background:var(--bad)}.trail i.skip{background:#ffffff55}
.rbtns{display:flex;gap:10px;flex-shrink:0}
.rbtns .btn{flex:1}

/* ---------- LOBBY ---------- */
#lobby .lbody{flex:1;overflow-y:auto;padding:4px 18px 10px;display:flex;flex-direction:column;gap:14px}
.codebox{text-align:center;padding:10px;border-radius:var(--r);background:var(--card);border:1px solid var(--bc)}
.codebox small{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.codebox b{font-family:var(--head);font-weight:400;font-size:44px;letter-spacing:.14em;color:var(--gold)}
.rules{font-size:14px;line-height:1.5;color:#d8cdbb;padding:2px 2px}
.rules b{color:var(--fg)}
.plist{display:flex;flex-direction:column;gap:6px}
.plist div{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-weight:600}
.plist div span{flex:1}
.plist small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.plist div.off{opacity:.45}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex-shrink:0}.off .dot{background:var(--mute)}
.settings{display:flex;flex-direction:column;gap:10px}
.set{display:flex;flex-direction:column;gap:6px}
.set>small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.seg{display:flex;gap:6px}
.seg button{flex:1;height:42px;border-radius:10px;border:1px solid var(--bc);background:var(--card);font-weight:600;font-size:14px}
.seg button.on{border-color:var(--gold);color:var(--gold);background:var(--hl)}
.seg button:disabled{pointer-events:none}
.lwait{text-align:center;color:var(--mute);font-size:14px}
.lfoot{padding:10px 18px calc(16px + env(safe-area-inset-bottom));flex-shrink:0}

/* ---------- DUEL ---------- */
.duelhud{padding-bottom:6px}
.vs{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.vs .pl{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.vs .pl:last-child{text-align:right;align-items:flex-end}
.vs .pl span{font-size:13px;font-weight:700;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.vs .pl b{font-family:var(--head);font-weight:400;font-size:28px;font-variant-numeric:tabular-nums}
.vs .me b{color:var(--gold)}.vs .them b{color:var(--blue)}
.vs .mid{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--mute)}
.vs .off span:after{content:" · away";font-weight:500}
.dround{text-align:center;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-bottom:8px;flex-shrink:0}
.zoomable{background:#000}
.zoomer{position:absolute;inset:0;will-change:transform;transform-origin:50% 40%}
.zoomer video{width:100%;height:100%;object-fit:contain}
.dpts{position:absolute;right:10px;top:10px;z-index:3;font-family:var(--head);font-size:22px;color:var(--gold);background:#000b;padding:3px 11px;border-radius:999px;font-variant-numeric:tabular-nums}
.dstatus{text-align:center;font-size:15px;font-weight:600;min-height:22px;margin-bottom:8px;color:#d8cdbb}
.dstatus b{color:var(--gold)}
.buzz{width:100%;height:84px;border-radius:22px;background:radial-gradient(circle at 50% 30%,#ff7a6e,#c2392f);color:#fff;font-family:var(--head);font-size:34px;letter-spacing:.02em;box-shadow:0 8px 0 #7d211b,0 16px 34px #c2392f55;transition:transform .06s,box-shadow .06s,opacity .2s;user-select:none;-webkit-user-select:none}
.buzz:active{transform:translateY(6px);box-shadow:0 2px 0 #7d211b,0 6px 18px #c2392f55}
.buzz:disabled{opacity:.25;pointer-events:none;filter:grayscale(.6)}
#drow{display:none;margin-bottom:8px}
#ddock.answering #drow{display:flex}
#pyrow.choicemode{display:none;margin-bottom:8px}#pyrow.choicemode.sel{display:flex}
#pyrow.choicemode .pick{pointer-events:none}#pyrow.choicemode .pick .x{display:none}
#ddock.answering .buzz{display:none}
.abar{height:4px;border-radius:2px;background:var(--off);overflow:hidden;display:none;margin-bottom:6px}
.abar i{display:block;height:100%;background:var(--gold);width:100%}
#ddock.answering .abar,#ddock.waiting .abar{display:block}

/* ---------- PARTY ---------- */
.steps{display:flex;gap:6px;padding:0 16px 8px;flex-shrink:0}
.steps div{flex:1;height:8px;border-radius:3px;background:var(--off);overflow:hidden;position:relative}
.steps div i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.steps div.done i{transform:scaleX(1);opacity:.5}
.others{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding:8px 14px 0;flex-shrink:0;min-height:30px}
.others span{font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--mute)}
.others span.ok{color:var(--ink);background:var(--ok);border-color:var(--ok)}
.others span.wait{color:var(--fg)}
.pnote{text-align:center;font-size:14px;color:var(--mute);min-height:20px;margin-top:8px}
.pnote b{color:var(--gold)}
.ladder{display:flex;flex-direction:column;gap:4px;font-size:14px;color:#d8cdbb;text-align:center;flex-shrink:0;line-height:1.4}
.ladder:empty{display:none}
.standings{display:flex;flex-direction:column;gap:6px;flex-shrink:0;max-height:34%;overflow-y:auto}
.standings div{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.standings div.me{border-color:var(--gold)}
.standings .pos{font-family:var(--head);font-size:20px;width:22px;color:var(--mute)}
.standings .nm{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.standings .add{font-size:13px;font-weight:700;color:var(--ok)}
.standings .add.zero{color:var(--mute)}
.standings .tot{font-family:var(--head);font-size:22px;color:var(--gold);font-variant-numeric:tabular-nums;min-width:60px;text-align:right}
.rate{display:flex;gap:6px;justify-content:center;flex-shrink:0}
.rate:empty{display:none}
.rate button{height:40px;padding:0 13px;border-radius:999px;border:1px solid var(--bc);font-size:13px;font-weight:600}
.rate button.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
#lreveal .fit{min-height:90px}

/* ---------- sheet and toast ---------- */
.sheet{position:absolute;inset:0;z-index:30;background:#000b;display:none;align-items:safe flex-end;overflow-y:auto;padding:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.sheet.on{display:flex;animation:fade .2s}
.sheet .card{width:100%;background:var(--card);border:1px solid var(--bc);border-radius:22px;padding:24px 18px 18px;display:flex;flex-direction:column;gap:10px;text-align:center;animation:rise .25s ease-out}
@keyframes rise{from{transform:translateY(30px)}}
.sheet .ttl{font-family:var(--head);font-size:30px;line-height:1.1}
.sheet .sub{color:var(--mute);font-size:15px;margin-bottom:6px;line-height:1.45}
.sheet .sub b{color:var(--fg)}
.sheet .inp{flex:none;text-align:center;margin-bottom:4px}
.sheet .inp.code{font-family:var(--head);font-size:30px;letter-spacing:.3em;text-transform:uppercase}
.sheet ol{text-align:left;font-size:15px;line-height:1.55;color:#d8cdbb;padding-left:22px;margin:2px 0 8px}
.sheet ol b{color:var(--fg)}
.toast{position:absolute;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%);background:#000e;border:1px solid var(--bc);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;display:none;z-index:40;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.toast.on{display:block;animation:fade .2s}
.tapplay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#000a;color:#fff;font-weight:700;font-size:16px}
.tapplay svg{width:54px;height:54px;color:var(--gold)}


/* ---------- home: Solo and With friends, two cards each (founder 2026-10-14) ---------- */
.go{position:absolute;right:12px;bottom:9px;pointer-events:none;font-style:normal;color:var(--gold);font-size:19px;line-height:1}
.go::after{content:"\2192"}
.mcard{position:relative}
.grp{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.gh{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding:0 2px}
.glink{letter-spacing:0;text-transform:none;font-size:13px;font-weight:600;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;border-radius:12px;background:var(--card2);border:0;text-align:left;min-height:84px;transition:transform .08s}
.mcard:active{transform:scale(.98)}
.mcard b{font-family:var(--head);font-weight:400;font-size:21px;line-height:1;white-space:nowrap}
.mcard span{font-size:12.5px;color:var(--mute);line-height:1.3}
.mcard.done{opacity:.75}
/* the public pages a site needs (release plan §6), small and quiet under the cards */
.legal{display:flex;justify-content:center;gap:10px;flex-shrink:0;font-size:12.5px;margin:-12px 0 -12px}
.legal a{color:var(--mute);text-decoration:none;padding:13px 6px;line-height:14px}
.legal a:hover{color:var(--fg)}

/* ---------- layout: phones get one column; the side panel dissolves into it ---------- */
.side{display:contents}
.pre{order:-1}
.desk{display:none}

/* ---------- desktop and tablets in landscape: the clip on the left at full height, everything else on the right ---------- */
@media (min-width:900px) and (min-height:540px){
  #app{max-width:none;border:0}
  .scr{flex-direction:row;align-items:stretch;justify-content:center;gap:56px;padding:36px 56px}
  .scr>.fit{flex:0 1 auto;width:min(calc((100dvh - 72px) * var(--far,0.6)),52vw);height:100%;padding:0;max-height:none}
  .side{display:flex;flex-direction:column;flex:0 0 440px;width:440px;min-height:0;gap:14px;justify-content:center}
  .pre{order:0}
  .desk{display:block}
  .frame{border-radius:22px}
  .btn:hover,.help:hover,.choices button:hover,.seg button:hover{filter:brightness(1.08)}
  .sugg button:hover{background:var(--hl)}
  /* home */
  #home{padding:48px 64px}
  #home .side{gap:16px}
  #home .logo{font-size:64px;text-align:left;line-height:1;margin-bottom:14px}
  .mcard:hover{filter:brightness(1.1)}
  .mcard{min-height:112px;padding:16px 18px}
  .mcard b{font-size:28px}
  .gh{font-size:13px}
  #home .grp{gap:10px;margin-top:6px}
  /* playing: the HUD on top of the panel, the answer box at its foot, the clip as tall as the window */
  #play .side,#duel .side,#party .side{justify-content:flex-start;padding:4px 0}
  #play .dock,#duel .dock,#party .dock{margin:16vh 0 0}
  .ask{font-family:var(--head);font-size:32px;line-height:1.15;margin-bottom:18px}
  .keys{font-size:13px;color:var(--mute);margin-top:10px}
  .keys b{color:var(--fg);font-weight:600}
  .hud{padding:0}
  .stage-fit{padding:0}
  .dock{padding:0}
  .lvl{font-size:34px}
  .score b{font-size:40px}
  .inp,.pick{height:58px;font-size:18px}
  .guess{height:58px}
  /* suggestions drop below the box, like a search field */
  .dock{display:flex;flex-direction:column}
  .dock>*{order:4}
  .dock>.ask,.dock>.dstatus{order:0}
  .dock>.choices{order:1}
  .dock>.row{order:2}
  .dock>.sugg{order:3;position:static;margin-top:8px;box-shadow:none}
  .dock>.helpers,.dock>.buzz,.dock>.pnote{order:5}
  .dstatus{text-align:left;font-size:17px;margin-bottom:12px}
  .dround{text-align:left;padding:10px 0 0}
  .vs .pl span{max-width:180px}
  .buzz{height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  .buzz small{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
  .steps{padding:12px 0 0}
  .others{justify-content:flex-start;padding:0}
  .pnote{text-align:left}
  /* results: the clip on the left, the verdict on the right */
  #res,#lreveal{padding:48px 64px;gap:56px}
  #res .side,#lreveal .side{gap:16px}
  #res .stamp,#lreveal .stamp{align-self:flex-start}
  #res .rtitle,#lreveal .rtitle{text-align:left;font-size:48px}
  #res .rsub,#lreveal .rsub,#res .rnote,#lreveal .ladder{text-align:left}
  .trail{justify-content:flex-start}
  .rate{justify-content:flex-start}
  .rbtns{margin-top:10px}
  .standings{max-height:none}
  /* lobby: one calm column */
  #lobby{flex-direction:column;align-items:center;gap:0;padding:36px 24px}
  #lobby{justify-content:center}
  #lobby>*{width:min(560px,100%)}
  #lobby .lbody{flex:0 1 auto}
  #lobby .lfoot{padding-top:18px}
  #lobby .hud{padding-bottom:12px}
  .codebox b{font-size:72px}
  /* sheets in the middle of the screen */
  .sheet{align-items:center;justify-content:center}
  .sheet .card{max-width:460px}
}

/* ---------- findings 2026-10-14 ---------- */
/* the solo result card covers the whole screen (founder: "result card should be full screen") */
#play{container-type:size}
.flash.full{position:absolute;inset:0;z-index:20;background:#0b0a09f2;padding:24px 20px calc(24px + env(safe-area-inset-bottom))}
.flash .sub.miss{color:var(--bad);font-weight:600}
.btn>svg{width:18px;height:18px;flex-shrink:0}
.cdbig{font-family:var(--head);font-size:72px;line-height:1;color:var(--gold)}
#lready .cd{font-weight:600;opacity:.65}
.rbtns .lstatus{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--mute);font-size:14px}
/* the lobby: a guest sees whose game it is and waits; guests read the settings as a line */
.lguest{text-align:center;font-size:17px;color:var(--fg)}.lguest:empty{display:none}.lguest b{color:var(--gold);font-weight:600}
.lnew{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--gold);margin-bottom:6px}
#lobby.guest .codebox{padding:6px;background:none;border:0}
#lobby.guest .codebox b{font-size:20px;letter-spacing:.2em}
#lobby.guest .codebox small{display:inline;margin-right:8px}
#lobby.guest #linvite{display:none}
.rules:empty{display:none}
.lsum{text-align:center;font-size:14px;color:var(--mute)}
.lwait:empty{display:none}
#lobby .lbody{gap:10px}
.others span.left{opacity:.5;text-decoration:line-through}
.sheet .sub.bad{color:var(--bad)}
.stamp:empty{display:none}
/* a short phone: the lobby fits without scrolling */
@media (max-height:600px){
  .codebox{padding:4px}.codebox b{font-size:30px}.codebox small{display:inline;margin-right:8px}
  .plist div{padding:7px 12px}
  .seg button{height:40px}
  .settings{gap:6px}.set{gap:4px}
  #lobby .lbody{gap:8px}
  #lobby #linvite{height:44px}
}


/* Report a problem (2026-10-15): a quiet text link under the rating chips and on the end screens */
.replink{display:block;margin:8px auto 0;padding:8px 10px;background:none;border:0;color:#ffffff80;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.rtext{width:100%;height:110px;padding:12px 14px;resize:none;font:inherit;line-height:1.4;margin:6px 0 4px;box-sizing:border-box}