/* Bluff — styles. Tokens first, then components, then screens, then motion. */
@font-face{
  font-family:"Atkinson Next";
  src:url("../fonts/atkinson-next.woff") format("woff");
  font-weight:200 800; font-display:swap;
}
:root{
  --ink:#140F1C; --ink2:#1D1629; --ink3:#281F39; --ink4:#342849;
  --line:#3A2D55; --line2:#52427A;
  --text:#F4EEFB; --dim:#B0A2CA; --faint:#7D6F98;
  --coral:#FF5A76; --coral-deep:#C43755; --red:#FF2E3E;
  --amber:#FFC24B; --amber-deep:#C68A14;
  --mint:#4FE0B8; --mint-deep:#1F9C7C;
  --font:"Atkinson Next","Avenir Next",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:16px; --r-lg:22px;
  --pad:20px;
  --out:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.25,1.35,.45,1);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--ink)}
body{
  color:var(--text); font:400 17px/1.45 var(--font);
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  overflow:hidden; overscroll-behavior:none;
  background:
    radial-gradient(90% 45% at 0% 0%, rgba(255,90,118,.11), transparent 70%),
    radial-gradient(90% 45% at 100% 100%, rgba(79,224,184,.07), transparent 70%),
    var(--ink);
}
#app{position:fixed; inset:0; max-width:560px; margin:0 auto}
.boot{display:grid; place-items:center; height:100%; font:800 64px var(--font); letter-spacing:-.04em; color:var(--ink4)}
p{margin:0}
h1,h2,h3{margin:0; font-weight:800; line-height:1.05; letter-spacing:-.02em}
h2{font-size:clamp(28px,8.4vw,36px)}
h3{font-size:18px; letter-spacing:-.01em}
b,strong{font-weight:700}
[tabindex="-1"]:focus{outline:none}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
svg{display:block}

/* ---------- layout ---------- */
.screen{
  position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:18px;
  padding:calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + var(--pad)) 0 calc(env(safe-area-inset-left) + var(--pad));
  scrollbar-width:none;
}
.screen::-webkit-scrollbar{display:none}
/* Scrolling screens must never squash their sections (groups clip overflow, so they'd shrink to nothing). */
.screen > *{flex-shrink:0}
.sticky{
  position:sticky; bottom:0; z-index:3; margin-top:auto;
  display:flex; flex-direction:column; gap:10px;
  padding:26px 0 calc(env(safe-area-inset-bottom) + 16px);
  background:linear-gradient(to top, var(--ink) calc(100% - 22px), rgba(20,15,28,0));
}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px}
.row{display:flex; align-items:center; gap:10px}
.between{justify-content:space-between}
.center-row{justify-content:center}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.row2 .btn{font-size:16.5px}
.center{text-align:center}
.center-col{display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; margin-block:auto}
.center-col.tight{gap:6px; margin-block:12px 0}
.sec{display:flex; flex-direction:column; gap:10px}
.label{font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint)}
.lead{color:var(--dim); font-size:17px}
.note{color:var(--dim); font-size:15px; line-height:1.4}
.fine{color:var(--faint); font-size:13.5px; line-height:1.5}
.err{color:var(--coral); font-size:14.5px; font-weight:700}
.tag{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--dim);
  background:var(--ink2); border:1px solid var(--line); border-radius:99px; padding:6px 12px 6px 12px; min-height:34px}
.tag .av{margin-left:-6px}

/* ---------- buttons ---------- */
.btn{
  appearance:none; border:0; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none;
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:58px; padding:14px 20px; border-radius:var(--r);
  font:700 18px/1.2 var(--font); letter-spacing:-.005em; text-align:center;
  color:#2E0712; background:var(--coral);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 var(--coral-deep), 0 12px 24px -10px rgba(255,90,118,.6);
  transition:transform .09s ease, box-shadow .09s ease, filter .2s;
}
.btn:active{transform:translateY(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 var(--coral-deep), 0 4px 10px -6px rgba(255,90,118,.5)}
.btn svg{width:20px; height:20px}
.btn.amber{color:#2E1D00; background:var(--amber); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 4px 0 var(--amber-deep), 0 12px 24px -10px rgba(255,194,75,.55)}
.btn.amber:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 var(--amber-deep)}
.btn.mint{color:#032219; background:var(--mint); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 4px 0 var(--mint-deep), 0 12px 24px -10px rgba(79,224,184,.5)}
.btn.mint:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 0 var(--mint-deep)}
.btn.quiet{color:var(--text); background:var(--ink3); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 3px 0 #0C0812}
.btn.quiet:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 #0C0812}
.btn.ghost{color:var(--text); background:transparent; box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn.ghost:active{transform:translateY(1px); background:var(--ink2); box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn.ghost.danger{color:var(--coral)}
.btn[aria-disabled=true]{filter:grayscale(.75) brightness(.7)}
.btn:disabled{opacity:.35; cursor:default}
.btn.sm{width:auto; min-height:44px; padding:10px 18px; font-size:15.5px; border-radius:13px}
.link{appearance:none; background:none; border:0; cursor:pointer; color:var(--dim); font:700 16px var(--font);
  padding:10px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line2); text-decoration-thickness:2px}
.link.sm{font-size:14px; padding:6px 0}
/* Tip jar: always small and quiet (DEV/tip-jar.md). */
.link.tiplink{align-self:center; color:var(--faint); text-decoration-color:var(--line); padding:4px 8px}
.tip-support .btn{align-self:flex-start}
.tipline{display:flex; align-items:center; justify-content:center; gap:6px; margin:0; color:var(--faint)}
.tipline .link{color:var(--faint); font-weight:600; font-size:13.5px; text-decoration-color:var(--line); padding:4px 0}
.tipx{appearance:none; border:0; background:none; cursor:pointer; color:var(--faint); font:700 18px var(--font);
  min-width:32px; min-height:32px; border-radius:10px; line-height:1}
.tipx:active{background:var(--ink3); color:var(--text)}
.icon-btn{appearance:none; border:0; cursor:pointer; flex:none; width:46px; height:46px; border-radius:15px;
  display:grid; place-items:center; color:var(--dim); background:var(--ink2); box-shadow:inset 0 0 0 1px var(--line)}
.icon-btn:active{background:var(--ink3); color:var(--text)}
.icon-btn svg{width:22px; height:22px}
.icon-btn svg.fat path{stroke-width:3.4}

/* ---------- controls ---------- */
.seg{display:flex; gap:4px; padding:4px; border-radius:15px; background:var(--ink2); box-shadow:inset 0 0 0 1px var(--line)}
.seg button{flex:1; min-height:44px; border:0; border-radius:11px; background:none; cursor:pointer;
  color:var(--dim); font:700 15.5px var(--font); transition:background .18s, color .18s}
.seg button[aria-pressed=true]{color:var(--text); background:var(--ink4); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.35)}
.seg.lang{width:118px}

.group{background:var(--ink2); border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--line); overflow:hidden}
.group > * + *{border-top:1px solid var(--line)}
.opt{appearance:none; display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; min-height:60px;
  background:none; border:0; border-radius:0; color:inherit; font:inherit; text-align:left; cursor:pointer}
.opt:not(.static):active{background:var(--ink3)}
.opt.static{cursor:default}
.opt .txt{flex:1; min-width:0}
.opt b{display:block; font-size:17px}
.opt small{display:block; margin-top:2px; color:var(--dim); font-size:14.5px; line-height:1.35}
.opt.danger b{color:var(--coral)}
.switch{flex:none; position:relative; width:52px; height:32px; border-radius:99px; background:var(--ink4); box-shadow:inset 0 0 0 1px var(--line2); transition:background .2s}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.45); transition:transform .28s var(--spring)}
[aria-checked=true] > .switch{background:var(--mint); box-shadow:none}
[aria-checked=true] > .switch::after{transform:translateX(20px)}

.stepper{flex:none; display:flex; align-items:center; gap:2px; padding:4px; border-radius:15px; background:var(--ink3)}
.stepper button{width:42px; height:42px; border:0; border-radius:11px; cursor:pointer; background:var(--ink4); color:var(--text); font:700 22px/1 var(--font)}
.stepper button:disabled{opacity:.3; cursor:default}
.stepper output{min-width:36px; text-align:center; font-size:22px; font-weight:800}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; min-height:42px;
  padding:8px 15px; border-radius:99px; border:1.5px solid var(--line2); background:transparent;
  color:var(--dim); font:700 15px var(--font); transition:background .15s, color .15s, border-color .15s}
.chip[aria-pressed=true]{background:var(--text); border-color:var(--text); color:var(--ink)}
.chip[aria-pressed=true]::before{content:""; width:12px; height:7px; margin:-3px 1px 0 -2px; border:solid currentColor; border-width:0 0 2.5px 2.5px; transform:rotate(-45deg)}

input[type=text], textarea{
  width:100%; min-width:0; padding:13px 16px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--ink2); color:var(--text); font:600 17px/1.35 var(--font); transition:border-color .15s, background .15s;
}
textarea{resize:vertical; min-height:88px}
input::placeholder, textarea::placeholder{color:var(--faint); font-weight:500}
input:focus, textarea:focus{outline:none; border-color:var(--amber); background:var(--ink3)}

.panel{background:var(--ink2); border-radius:var(--r-lg); box-shadow:inset 0 0 0 1px var(--line); padding:16px; display:flex; flex-direction:column; gap:12px}
details.panel{gap:0}
details.panel[open]{gap:12px}
summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; font-weight:700; min-height:28px}
summary::-webkit-details-marker{display:none}
summary::after{content:""; width:9px; height:9px; border:solid var(--dim); border-width:0 2.5px 2.5px 0; transform:rotate(45deg); margin:-4px 4px 0 12px; transition:transform .2s}
details[open] > summary::after{transform:rotate(225deg); margin-top:4px}
.field{display:flex; flex-direction:column; gap:10px}
.clist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.clist li{display:flex; align-items:center; gap:12px; padding:8px 8px 8px 14px; border-radius:14px; background:var(--ink3)}
.clist .txt{flex:1; min-width:0}
.clist small{display:block; color:var(--dim); font-size:13.5px}

.pill{display:inline-block; padding:4px 11px; border-radius:99px; font-size:14px; font-weight:800; background:var(--ink4); color:var(--text)}
.pill.mint{background:rgba(79,224,184,.15); color:var(--mint)}
.pill.coral{background:rgba(255,90,118,.16); color:var(--coral)}
.pill.amber{background:rgba(255,194,75,.16); color:var(--amber)}
.delta{flex:none; padding:3px 9px; border-radius:99px; font-size:13.5px; font-weight:800; color:var(--mint); background:rgba(79,224,184,.14)}

/* avatars */
.av{--h:0; flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:hsl(var(--h) 80% 70%); color:hsl(var(--h) 55% 17%); font-weight:800; font-size:18px; line-height:1}
.av.sm{width:28px; height:28px; font-size:13px}
.av.lg{width:64px; height:64px; font-size:28px}
.av.xl{width:112px; height:112px; font-size:50px; box-shadow:0 0 0 6px var(--ink), 0 0 0 8px hsl(var(--h) 80% 70% / .45), 0 20px 40px -12px hsl(var(--h) 80% 60% / .5)}

/* ---------- playing cards ---------- */
.cardback{
  background-color:#2A2040;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 13px);
  box-shadow:inset 0 0 0 9px #2A2040, inset 0 0 0 10.5px var(--line2), 0 24px 50px -22px rgba(0,0,0,.8);
}
.emb{display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--ink);
  box-shadow:0 0 0 2px var(--line2), 0 0 0 7px #2A2040; color:var(--amber); font-weight:800; font-size:28px}
.emb.big{width:108px; height:108px; font-size:58px; box-shadow:0 0 0 2.5px var(--line2), 0 0 0 12px #2A2040}
.corner{position:absolute; font-weight:800; font-size:18px; line-height:1; color:var(--faint)}
.corner.tl{top:20px; left:22px}
.corner.br{bottom:20px; right:22px; transform:rotate(180deg)}

/* ---------- home ---------- */
.hero{position:relative; height:clamp(170px,30vh,230px); margin-top:4px}
.pc{--tx:0px; --rot:0deg; position:absolute; left:50%; top:10%; width:clamp(104px,30vw,132px); aspect-ratio:5/7;
  margin-left:calc(clamp(104px,30vw,132px) / -2); border-radius:16px; display:grid; place-items:center;
  transform:translateX(var(--tx)) rotate(var(--rot))}
.pc.l{--tx:-58%; --rot:-15deg}
.pc.r{--tx:58%; --rot:12deg}
.pc.c{--rot:-3deg; color:#3A2600; background:linear-gradient(155deg,#FFD989,var(--amber) 60%,#F6AE22);
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.18), 0 26px 50px -16px rgba(255,194,75,.5)}
.pc.c .corner{color:#7A5200; font-size:20px}
.pc.c .qmark{font-size:clamp(64px,19vw,84px); font-weight:800; line-height:1}
.wordmark{text-align:center; font-size:clamp(76px,27vw,124px); line-height:.86; letter-spacing:-.045em; margin-top:4px}
.wordmark span{display:inline-block}
.wordmark .tell{color:var(--coral); transform:rotate(10deg) translateY(-3%); transform-origin:50% 90%}
.tagline{text-align:center; color:var(--dim); font-size:18px; max-width:28ch; margin:0 auto}

/* ---------- rules ---------- */
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.step{display:flex; gap:14px; padding:16px; border-radius:var(--r-lg); background:var(--ink2); box-shadow:inset 0 0 0 1px var(--line)}
.step .n{flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:var(--amber); color:#2E1D00; font-weight:800; font-size:20px}
.step b{display:block; font-size:18px; margin:7px 0 4px}
.step p{color:var(--dim); font-size:15.5px}
.scoring,.tips{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; color:var(--dim); font-size:15.5px}
.scoring li{display:flex; align-items:baseline; gap:10px}
.scoring .pill{flex:none; min-width:42px; text-align:center}
.tips li{position:relative; padding-left:20px}
.tips li::before{content:""; position:absolute; left:3px; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--mint)}

/* ---------- setup ---------- */
.plist{display:flex; flex-direction:column; gap:8px}
.prow{display:flex; align-items:center; gap:10px}
.prow .av{width:36px; height:36px; font-size:16px}
.prow.bad input{border-color:var(--coral)}
.fairbars,.bars{display:flex; flex-direction:column; gap:6px}
.barrow{display:grid; grid-template-columns:minmax(0,1fr) 2fr auto; align-items:center; gap:10px; font-size:14.5px}
.barrow .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.barrow .track{height:8px; border-radius:9px; background:var(--ink4); overflow:hidden}
.barrow .track i{display:block; height:100%; width:var(--w); background:var(--mint); border-radius:9px}
.barrow .track{position:relative}
.barrow .track::after{content:""; position:absolute; left:50%; top:-3px; bottom:-3px; width:2px; background:var(--amber)}
.barrow b{font-variant-numeric:tabular-nums; min-width:48px; text-align:right}
.summary{text-align:center; color:var(--dim); font-size:14.5px; font-weight:700}

/* ---------- deal ---------- */
.pass{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; min-height:320px}
.pass-name{font-size:clamp(44px,14vw,64px); letter-spacing:-.035em; overflow-wrap:anywhere}
.pass .note{display:flex; align-items:center; gap:8px}
.pass .note svg{width:20px; height:20px; flex:none}
.dots{display:flex; justify-content:center; flex-wrap:wrap; gap:6px}
.dots i{width:8px; height:8px; border-radius:50%; background:var(--ink4)}
.dots i.done{background:var(--mint)}
.dots i.now{background:var(--amber); width:22px; border-radius:9px}

.reveal{flex:1 0 auto; display:flex; min-height:330px; max-height:520px; perspective:1600px; cursor:pointer;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none; outline:none}
.reveal:focus-visible .face.back{box-shadow:inset 0 0 0 9px #2A2040, inset 0 0 0 10.5px var(--line2), 0 0 0 3px var(--amber)}
.reveal .inner{position:relative; flex:1; transform-style:preserve-3d; transition:transform .55s var(--spring)}
.reveal.up .inner{transform:rotateY(180deg)}
.face{position:absolute; inset:0; border-radius:26px; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:28px 22px; text-align:center}
.face.front{transform:rotateY(180deg);
  background:radial-gradient(120% 70% at 50% 0%, rgba(79,224,184,.2), transparent 65%), var(--ink2);
  box-shadow:inset 0 0 0 2px var(--mint), 0 30px 60px -24px rgba(79,224,184,.45)}
.reveal.imp .face.front{
  background:radial-gradient(120% 70% at 50% 0%, rgba(255,90,118,.24), transparent 65%), var(--ink2);
  box-shadow:inset 0 0 0 2px var(--coral), 0 30px 60px -24px rgba(255,90,118,.5)}
.role{padding:6px 14px; border-radius:99px; font-size:13.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mint); background:rgba(79,224,184,.14)}
.reveal.imp .role{color:var(--coral); background:rgba(255,90,118,.15)}
.role:empty{display:none}
.word{font-size:clamp(40px,13vw,60px); font-weight:800; line-height:1.02; letter-spacing:-.035em; overflow-wrap:anywhere; hyphens:auto}
.reveal.long .word{font-size:clamp(30px,9.5vw,44px)}
.sub{color:var(--dim); font-size:17px; font-weight:700}
.hold-hint{position:absolute; left:0; right:0; bottom:44px; display:flex; flex-direction:column; align-items:center; gap:10px; font-weight:700; font-size:16px; color:var(--text)}
.hold-hint svg{width:36px; height:36px; color:var(--amber)}

/* ---------- discussion ---------- */
.olist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; counter-reset:o}
.olist li{display:flex; align-items:center; gap:14px; min-height:56px; padding:10px 14px; border-radius:16px;
  background:var(--ink2); box-shadow:inset 0 0 0 1px var(--line); font-weight:700; font-size:18px}
.olist li::before{counter-increment:o; content:counter(o); flex:none; display:grid; place-items:center; width:32px; height:32px;
  border-radius:10px; background:var(--ink4); color:var(--amber); font-weight:800; font-size:16px}
.olist .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.olist li.first{background:linear-gradient(90deg, rgba(255,194,75,.16), var(--ink2) 70%); box-shadow:inset 0 0 0 1.5px var(--amber)}
.olist li.first::before{background:var(--amber); color:#2E1D00}
.olist li.out{opacity:.45}
.olist li.out .nm{text-decoration:line-through; text-decoration-thickness:2px}
.badge{flex:none; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--amber)}
.badge.dim{color:var(--faint)}

.clockwrap{position:relative; width:min(62vw,230px); aspect-ratio:1; margin:2px auto 0}
.ring{width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:9}
.ring .track{stroke:var(--ink3)}
.ring .bar{stroke:var(--mint); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:0; transition:stroke-dashoffset .3s linear, stroke .3s}
.clockwrap.low .bar{stroke:var(--amber)}
.clockwrap.done .bar{stroke:var(--coral)}
.clock{position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(46px,15vw,62px); font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.clockwrap.low .clock{color:var(--amber)}
.clockwrap.done .clock{color:var(--coral); font-size:clamp(24px,7vw,30px); padding:0 20%; text-align:center; line-height:1.1}
.clockwrap.paused .clock{opacity:.55}

/* ---------- vote ---------- */
.vgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.vote{appearance:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:112px; padding:14px 10px; border:0; border-radius:20px; background:var(--ink2); box-shadow:inset 0 0 0 1.5px var(--line);
  color:var(--text); font:700 17px/1.2 var(--font); transition:transform .1s, box-shadow .15s}
.vote span:last-child{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vote:active{transform:scale(.96); box-shadow:inset 0 0 0 2px var(--coral)}

/* ---------- suspense & results ---------- */
.susp{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; text-align:center; padding-top:12px}
.susp h2{overflow-wrap:anywhere}
.reveal.still{flex:none; width:min(68vw,270px); height:auto; aspect-ratio:5/7; min-height:0; cursor:default; touch-action:auto}
.reveal.still .face{gap:12px; padding:20px}
.reveal.still .role{text-transform:none; letter-spacing:0; font-size:16px}
.reveal.still .word{font-size:clamp(28px,8.5vw,36px)}

.stamp{align-self:center; margin-top:8px; max-width:100%; padding:12px 20px; border:4px solid currentColor; border-radius:14px;
  text-align:center; text-transform:uppercase; font-weight:800; font-size:clamp(28px,9vw,40px); line-height:1; letter-spacing:-.01em;
  transform:rotate(-4deg); overflow-wrap:anywhere}
.stamp.mint{color:var(--mint)} .stamp.coral{color:var(--coral)} .stamp.amber{color:var(--amber)}
.big-body{font-size:21px; line-height:1.35; max-width:26ch}
.word-panel{align-items:center; text-align:center; gap:8px; padding-block:20px}
.word-panel .word{font-size:clamp(34px,11vw,48px)}
.out-panel{flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:6px}
.out-panel .txt{flex:1 1 120px; min-width:0}
.out-panel b{display:block; font-size:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.out-panel small{color:var(--dim); font-size:15px}
.out-panel .pill{flex:none; font-size:13px}
.enter .out-panel{animation:rise .45s var(--out) both .3s}

.board{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.brow{position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; min-height:60px; padding:10px 14px;
  border-radius:16px; background:var(--ink2); box-shadow:inset 0 0 0 1px var(--line)}
.brow > :not(.bar){position:relative}
.brow .bar{position:absolute; inset:0 auto 0 0; width:var(--w); background:linear-gradient(90deg, rgba(255,194,75,.2), rgba(255,194,75,.05))}
.brow .rank{flex:none; width:24px; display:grid; place-items:center; font-weight:800; color:var(--faint)}
.brow .rank svg{width:22px; height:22px; color:var(--amber)}
.brow .nm{flex:1; min-width:0; font-weight:700; font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.brow .score{flex:none; min-width:2ch; text-align:right; font-size:26px; font-weight:800; font-variant-numeric:tabular-nums}
.brow.lead{box-shadow:inset 0 0 0 1.5px var(--amber)}

.winner-label{color:var(--amber); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:14px}
.winner{font-size:clamp(34px,11vw,50px); letter-spacing:-.035em; overflow-wrap:anywhere}
.podium{display:flex; align-items:flex-end; justify-content:center; gap:10px; margin-top:6px}
.pod{flex:1; max-width:128px; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px}
.pod .nm{max-width:100%; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pod .crown svg{width:30px; height:30px; color:var(--amber)}
.pod .blk{width:100%; display:flex; justify-content:center; padding-top:12px; border-radius:14px 14px 6px 6px; font-weight:800; font-size:26px;
  background:var(--ink3); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); transform-origin:bottom}
.pod.pos1 .blk{height:140px; color:#2E1D00; background:linear-gradient(var(--amber), var(--amber-deep))}
.pod.pos2 .blk{height:100px}
.pod.pos3 .blk{height:72px}

/* ---------- sheet & toast ---------- */
.sheet-wrap{position:fixed; inset:0; z-index:20; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(8,5,12,.66); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.sheet{width:100%; max-width:560px; display:flex; flex-direction:column; gap:14px; max-height:92%; overflow-y:auto;
  padding:12px calc(env(safe-area-inset-right) + 20px) calc(env(safe-area-inset-bottom) + 20px) calc(env(safe-area-inset-left) + 20px);
  border-radius:28px 28px 0 0; background:var(--ink2); box-shadow:inset 0 1px 0 var(--line2), 0 -20px 60px rgba(0,0,0,.5)}
.sheet > *{flex-shrink:0}
.sheet::before{content:""; align-self:center; width:40px; height:5px; border-radius:9px; background:var(--line2); margin-bottom:6px}
.sheet .group{background:var(--ink3)}
.sheet-title{font-size:clamp(24px,7vw,30px); overflow-wrap:anywhere}
.toast{position:fixed; z-index:30; left:16px; right:16px; top:calc(env(safe-area-inset-top) + 12px); max-width:528px; margin:0 auto;
  display:flex; align-items:center; gap:12px; padding:10px 10px 10px 16px; border-radius:18px;
  background:var(--text); color:var(--ink); font-weight:700; font-size:15px; box-shadow:0 16px 40px rgba(0,0,0,.55)}
.toast span{flex:1}

/* ---------- motion ---------- */
@keyframes enter{from{opacity:0; transform:translateY(12px)}}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0; transform:translateY(16px)}}
@keyframes sheetUp{from{transform:translateY(100%)}}
@keyframes dealIn{from{opacity:0; transform:translate(var(--tx), 70px) rotate(0deg) scale(.85)}}
@keyframes float{50%{transform:translateX(var(--tx)) translateY(-7px) rotate(calc(var(--rot) + 1.5deg))}}
@keyframes tell{0%,86%,100%{transform:rotate(10deg) translateY(-3%)} 90%{transform:rotate(-6deg) translateY(-6%)} 95%{transform:rotate(14deg) translateY(-2%)}}
@keyframes press{0%,100%{transform:translateY(0) scale(1)} 45%{transform:translateY(3px) scale(.9)}}
@keyframes wobble{from{transform:rotate(-2deg) translateY(0)} to{transform:rotate(2deg) translateY(-3px)}}
@keyframes stamp{0%{opacity:0; transform:scale(2) rotate(-14deg)} 60%{opacity:1; transform:scale(.94) rotate(-3deg)} 100%{transform:scale(1) rotate(-4deg)}}
@keyframes pop{0%{opacity:0; transform:scale(.4)} 70%{transform:scale(1.15)} 100%{opacity:1; transform:scale(1)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes blk{from{transform:scaleY(0)}}
@keyframes pulse{50%{opacity:.55}}
@keyframes shake{0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)}}
@keyframes fall{to{transform:translate(var(--dx), 110vh) rotate(calc(var(--r) + 720deg))}}

.screen.enter{animation:enter .3s var(--out)}
.enter .step, .enter .olist li, .enter .brow, .enter .vote{animation:rise .42s var(--out) both; animation-delay:calc(var(--i, 0) * 45ms + 60ms)}
.enter .pass .av{animation:pop .5s var(--spring) both .05s}
.enter .pass-name{animation:rise .45s var(--out) both .12s}
.enter .reveal:not(.still){animation:rise .45s var(--out) both}
.hero .pc{animation:dealIn .65s var(--spring) both, float 6s ease-in-out 1s infinite}
.hero .pc.l{animation-delay:.05s, 1.4s}
.hero .pc.r{animation-delay:.14s, 2s}
.hero .pc.c{animation-delay:.24s, 1s}
.wordmark span{animation:rise .5s var(--out) both}
.wordmark span:nth-child(2){animation-delay:.04s} .wordmark span:nth-child(3){animation-delay:.08s}
.wordmark span:nth-child(5){animation-delay:.16s}
.wordmark .tell{animation:rise .5s var(--out) both .12s, tell 5s ease-in-out 1.6s infinite}
.hold-hint svg{animation:press 1.8s ease-in-out infinite}
.reveal.still:not(.up) .inner{animation:wobble .13s ease-in-out infinite alternate}
.stamp{animation:stamp .5s var(--spring) both .08s}
.delta{animation:pop .45s var(--spring) both .45s}
.brow .bar{transform-origin:left; animation:grow .8s var(--out) both .2s}
.pod .blk{animation:blk .7s var(--spring) both}
.pod.pos2 .blk{animation-delay:.15s} .pod.pos3 .blk{animation-delay:.3s}
.pod .av, .pod .crown{animation:pop .5s var(--spring) both .6s}
.sheet-wrap.enter{animation:fade .2s ease}
.sheet-wrap.enter .sheet{animation:sheetUp .34s var(--out)}
.toast{animation:rise .35s var(--out)}
.clockwrap.done .clock{animation:pulse 1s ease-in-out infinite}
.shake{animation:shake .42s ease}
.confetti{position:fixed; inset:0; z-index:25; pointer-events:none; overflow:hidden}
.confetti i{position:absolute; top:-24px; left:var(--x); width:9px; height:15px; border-radius:2px; background:var(--c);
  transform:rotate(var(--r)); animation:fall var(--d) var(--delay) cubic-bezier(.3,.1,.6,1) forwards}

.rm *, .rm *::before, .rm *::after{animation-duration:1ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important}
.rm .confetti{display:none}

@media (min-width:600px){
  #app{border-inline:1px solid rgba(255,255,255,.04)}
}
@media (max-height:640px){
  .hero{height:150px}
  .wordmark{font-size:clamp(64px,22vw,96px)}
  .reveal{min-height:280px}
  .pass{min-height:240px; gap:10px}
  .av.xl{width:88px; height:88px; font-size:40px}
}

/* ---------- 3.0: landing ---------- */
.demo{position:relative; height:clamp(150px,25vh,200px); margin-top:4px}
.dcard{--w:clamp(126px,37vw,158px); position:absolute; left:50%; top:6%; width:var(--w); aspect-ratio:5/6.4; border-radius:18px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px; text-align:center}
.dcard.a{margin-left:calc(var(--w) * -1 + 2px); transform:rotate(-9deg); background:var(--ink3); box-shadow:inset 0 0 0 2px var(--line2), 0 20px 40px -18px rgba(0,0,0,.7)}
.dcard.b{margin-left:-2px; transform:rotate(7deg) translateY(12px); color:#3A2600; background:linear-gradient(155deg,#FFD989,var(--amber) 60%,#F6AE22);
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.18), 0 26px 50px -16px rgba(255,194,75,.5)}
.dlabel{font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; line-height:1.2}
.dcard.a .dlabel{color:var(--dim)}
.dcard.b .dlabel{color:#6B4700}
.dcard b{font-size:clamp(18px,5.4vw,23px); font-weight:800; letter-spacing:-.02em; line-height:1.05; overflow-wrap:anywhere}
.proof{list-style:none; margin:2px 0 0; padding:0; display:flex; justify-content:center; flex-wrap:wrap; gap:8px}
.proof li{display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:99px; background:var(--ink2); box-shadow:inset 0 0 0 1px var(--line); font-size:14px; font-weight:700; color:var(--dim)}
.proof svg{width:17px; height:17px; color:var(--mint)}
.enter .dcard.a{animation:dealA .6s var(--spring) both .05s}
.enter .dcard.b{animation:dealB .6s var(--spring) both .18s}
@keyframes dealA{from{opacity:0; transform:translateY(50px) rotate(0) scale(.85)}}
@keyframes dealB{from{opacity:0; transform:translateY(60px) rotate(0) scale(.85)}}

/* ---------- 3.0: setup ---------- */
.modes{display:flex; flex-direction:column; gap:8px}
.mode{appearance:none; cursor:pointer; position:relative; display:flex; flex-direction:column; gap:3px; width:100%; min-height:64px;
  padding:13px 16px 13px 52px; border:0; border-radius:18px; text-align:left; color:var(--text); font:inherit;
  background:var(--ink2); box-shadow:inset 0 0 0 1.5px var(--line)}
.mode::before{content:""; position:absolute; left:17px; top:17px; width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--line2); transition:box-shadow .15s}
.mode[aria-checked=true]{background:linear-gradient(90deg, rgba(255,194,75,.11), var(--ink2) 75%); box-shadow:inset 0 0 0 2px var(--amber)}
.mode[aria-checked=true]::before{box-shadow:inset 0 0 0 6px var(--amber)}
.mode-top{display:flex; align-items:center; flex-wrap:wrap; gap:8px}
.mode b{font-size:17px}
.mode small{color:var(--dim); font-size:14.5px; line-height:1.35}
.mode .pill{font-size:12px; padding:2px 9px}
details.adv summary > span{display:flex; flex-direction:column; min-width:0}
details.adv summary small{color:var(--dim); font-weight:600; font-size:13.5px; margin-top:2px}
.adv-body{display:flex; flex-direction:column; gap:12px}
.adv-body .label{margin-top:4px}

/* ---------- 3.0: coach tips ---------- */
.coach{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:9px 10px 9px 12px; border-radius:16px; font-size:15px;
  background:rgba(79,224,184,.1); box-shadow:inset 0 0 0 1px rgba(79,224,184,.35)}
.coach p{flex:1 1 170px; min-width:0}
.coach-dot{flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--mint); color:#032219; font-weight:800; font-size:15px}
.coach .link{flex:none; margin-left:auto; padding:8px 4px; min-height:44px}
.enter .coach{animation:rise .4s var(--out) both .15s}

/* ---------- 3.0: cards ---------- */
.hide-hint{min-height:1.2em; color:var(--dim); font-size:14.5px; font-weight:700}
.reveal[data-tone=imp] .face.front{background:radial-gradient(120% 70% at 50% 0%, rgba(255,90,118,.24), transparent 65%), var(--ink2);
  box-shadow:inset 0 0 0 2px var(--coral), 0 30px 60px -24px rgba(255,90,118,.5)}
.reveal[data-tone=imp] .role{color:var(--coral); background:rgba(255,90,118,.15)}
.reveal[data-tone=neutral] .face.front{background:radial-gradient(120% 70% at 50% 0%, rgba(255,194,75,.18), transparent 65%), var(--ink2);
  box-shadow:inset 0 0 0 2px var(--amber), 0 30px 60px -24px rgba(255,194,75,.4)}
.reveal[data-tone=neutral] .role{color:var(--amber); background:rgba(255,194,75,.14)}

/* ---------- 3.0: discussion ---------- */
.olist li{position:relative}
.olist .clue{appearance:none; flex:1; min-width:0; display:flex; align-items:center; gap:12px; min-height:44px; margin:-10px -14px -10px 0; padding:10px 14px 10px 0;
  border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.olist .clue::after{content:""; position:absolute; inset:0}
.given-mark{flex:none; display:grid; place-items:center; width:28px; height:28px; margin-left:auto; border-radius:50%; color:transparent; box-shadow:inset 0 0 0 2px var(--line2); transition:background .15s}
.given-mark svg{width:16px; height:16px}
.given-mark svg path{stroke-width:3}
.olist li.given .given-mark{background:var(--mint); color:#032219; box-shadow:none}
.olist li.given .nm{color:var(--dim)}
.olist .badge + .given-mark{margin-left:8px}
.olist .clue .badge{margin-left:auto}
.timesup{margin-top:-8px; text-align:center; color:var(--coral); font-weight:800; font-size:18px}
.btn.urgent{animation:urgent 1.2s ease-in-out infinite}
@keyframes urgent{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 var(--coral-deep), 0 0 0 9px rgba(255,90,118,.28)}}

/* ---------- 3.0: votes & ties ---------- */
.vote.pick{position:relative}
.pick-mark{position:absolute; top:10px; right:10px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:transparent; box-shadow:inset 0 0 0 2px var(--line2)}
.pick-mark svg{width:15px; height:15px}
.pick-mark svg path{stroke-width:3}
.vote[aria-pressed=true]{background:linear-gradient(180deg, rgba(255,194,75,.12), var(--ink2)); box-shadow:inset 0 0 0 2.5px var(--amber)}
.vote[aria-pressed=true] .pick-mark{background:var(--amber); color:#2E1D00; box-shadow:none}

/* ---------- 3.0: results & scores ---------- */
.stamp{display:inline-flex; align-items:center; justify-content:center; gap:10px}
.stamp-icon{display:inline-grid; place-items:center; font-size:.9em}
.stamp-icon svg{width:.95em; height:.95em}
.stamp-icon svg path{stroke-width:3.4}
.awards{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.awards li{display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-radius:14px; background:var(--ink2); box-shadow:inset 0 0 0 1px var(--line)}
.awards .why{color:var(--dim)}
.tie-first{align-self:flex-start; display:inline-flex; align-items:center; gap:6px}
.tie-first svg{width:16px; height:16px}
details.hist summary{justify-content:flex-start; gap:10px}
details.hist summary svg{width:20px; height:20px; color:var(--dim)}
details.hist summary::after{margin-left:auto}
.hist-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.hist-list li{display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:14px; background:var(--ink3); font-size:15px}
.hist-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.install{gap:6px}

/* ---------- 3.0: packs ---------- */
.pack-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.pack{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 10px 10px 16px; border-radius:18px; background:var(--ink2); box-shadow:inset 0 0 0 1px var(--line)}
.pack .txt{flex:1; min-width:120px}
.pack b{display:block; overflow-wrap:anywhere}
.pack small{display:block; color:var(--dim); font-size:14px}
.pack-acts{display:flex; gap:6px}
.issues{margin:6px 0 0; padding-left:20px; color:var(--coral); font-size:14.5px; font-weight:600}
.ok{color:var(--mint); font-weight:700; font-size:15px}
.msg{color:var(--mint); font-weight:700; text-align:center}
.file-input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
label.btn{cursor:pointer}
.file-input:focus-visible + label, label.btn:focus-within{outline:3px solid var(--amber); outline-offset:3px}

/* ---------- 3.0: share ---------- */
.share-frame{width:min(100%, calc(44vh * 1080 / 1350)); aspect-ratio:1080/1350; margin:0 auto; border-radius:18px; overflow:hidden; background:var(--ink3); box-shadow:inset 0 0 0 1px var(--line)}
.share-frame img{display:block; width:100%; height:100%; object-fit:contain}

/* ---------- 3.0: narrow phones and accessibility ---------- */
@media (max-width:359px){
  :root{--pad:16px}
  .row2 .btn{font-size:15px; padding-inline:10px; min-height:52px}
  .wordmark{font-size:62px}
  .seg button{font-size:14px}
  .proof li{font-size:13px; padding:6px 10px}
  .btn{font-size:17px}
}
@media (prefers-contrast: more){
  :root{--dim:#DDD3EF; --faint:#BDB0D6; --line:#6E5C96; --line2:#A08ECA}
  .btn.ghost{box-shadow:inset 0 0 0 2px var(--text)}
  .chip{border-color:var(--dim)}
  .group, .panel, .vote, .mode, .olist li, .brow, .step{box-shadow:inset 0 0 0 1.5px var(--line2)}
  .face.back{box-shadow:inset 0 0 0 9px #2A2040, inset 0 0 0 11px var(--text)}
}

/* ---------- imposter card: impossible to miss ---------- */
.reveal[data-tone=imp] .face.front, .reveal.imp .face.front{
  background:radial-gradient(120% 70% at 50% 0%, rgba(255,46,62,.32), transparent 70%), #24101C;
  box-shadow:inset 0 0 0 6px var(--red), 0 0 0 3px rgba(255,46,62,.35), 0 0 60px -6px rgba(255,46,62,.7)}
.reveal[data-tone=imp] .role{order:-1; padding:12px 20px; border-radius:14px; background:var(--red); color:#fff;
  font-size:clamp(19px,5.6vw,24px); letter-spacing:.05em; box-shadow:0 8px 24px -8px rgba(255,46,62,.8)}
.reveal[data-tone=imp] .role::before{content:"⚠ "}
.reveal[data-tone=imp] .sub{color:#FFB3BA}
.reveal.imp .role{color:#fff; background:var(--red)}