/* =====================================================================
   Who is the Imposter? — Online. Dark, glassy, gradient. Mobile-first, RTL-aware.
   ===================================================================== */
:root{
  --bg-0:#0b0a1a; --bg-1:#141233;
  --card:rgba(255,255,255,.06); --card-2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.12); --stroke-2:rgba(255,255,255,.22);
  --text:#f4f3ff; --muted:rgba(244,243,255,.62); --faint:rgba(244,243,255,.38);
  --pink:#ff4f8b; --purple:#8b5cf6; --cyan:#22d3ee; --green:#34d399; --red:#fb5d68; --amber:#fbbf24;
  --grad-primary:linear-gradient(135deg,#ff5d8f 0%,#a855f7 55%,#6366f1 100%);
  --grad-players:linear-gradient(135deg,#34d399 0%,#22d3ee 100%);
  --grad-imposter:linear-gradient(135deg,#f43f5e 0%,#a21caf 100%);
  --radius:20px; --radius-sm:14px; --shadow:0 18px 50px -16px rgba(0,0,0,.7); --glow:0 10px 40px -8px rgba(168,85,247,.55);
  --t:.26s cubic-bezier(.2,.8,.2,1); --fd:'Fredoka','Heebo',system-ui,sans-serif; --fb:'Heebo','Fredoka',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--fb);color:var(--text);min-height:100dvh;overflow-x:hidden;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(120% 120% at 50% -10%,#1c1740 0%,var(--bg-1) 45%,var(--bg-0) 100%)}
h1,h2,h3{font-family:var(--fd);margin:0}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:8px}
.muted{color:var(--muted)} .center{text-align:center} .full{width:100%} .sm{font-size:.85rem} .good{color:var(--green);font-weight:700}

/* backdrop */
.bg-orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:drift 18s ease-in-out infinite}
.o1{width:46vmax;height:46vmax;background:#ff4f8b;top:-14vmax;inset-inline-start:-10vmax}
.o2{width:40vmax;height:40vmax;background:#7c3aed;bottom:-12vmax;inset-inline-end:-8vmax;animation-delay:-6s}
.o3{width:32vmax;height:32vmax;background:#22d3ee;top:38%;inset-inline-start:45%;animation-delay:-11s;opacity:.4}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6vmax,4vmax) scale(1.08)}66%{transform:translate(-5vmax,6vmax) scale(.96)}}
#confetti{position:fixed;inset:0;z-index:60;pointer-events:none}

/* frame + header */
.app-frame{position:relative;z-index:1;width:min(560px,100%);margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;
  padding:max(8px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.app-main{flex:1;display:flex;flex-direction:column}
.app-header{display:flex;align-items:center;gap:10px;padding:8px 4px 12px}
.brand{display:flex;align-items:center;gap:8px;flex:1;font-family:var(--fd);font-weight:700}
.logo{font-size:1.3rem} .bword{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.1rem}
.hactions{display:flex;align-items:center;gap:6px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;border-radius:11px;
  background:var(--card);border:1px solid var(--stroke);color:var(--text);font-weight:700;font-size:.9rem;transition:var(--t)}
.iconbtn:hover{background:var(--card-2)} .iconbtn:active{transform:scale(.94)}
.netdot{width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px currentColor;color:var(--amber)}
.netdot.open{background:var(--green);color:var(--green)} .netdot.closed,.netdot.connecting{background:var(--amber);color:var(--amber);animation:blink 1s steps(2) infinite}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:13px 22px;font-weight:700;font-size:1rem;color:#fff;transition:var(--t)}
.btn:active{transform:translateY(1px) scale(.99)} .btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-lg{padding:16px 24px;font-size:1.06rem}
.btn-primary{background:var(--grad-primary);box-shadow:var(--glow)}
.btn-primary:not([disabled]):hover{transform:translateY(-2px)}
.btn-ghost{background:var(--card);border-color:var(--stroke)} .btn-ghost:hover{background:var(--card-2)}
.btn-soft{background:var(--card-2);border-color:var(--stroke);color:var(--text)} .btn-soft.sm{padding:8px 14px;font-size:.85rem}
.pulse{animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:var(--glow)}50%{box-shadow:0 14px 50px -6px rgba(168,85,247,.95)}}

/* screen + shared */
.screen{animation:in .4s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:14px}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.stitle{font-size:1.5rem;text-align:center}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);padding:16px;backdrop-filter:blur(12px);box-shadow:var(--shadow)}
.chead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.pill{min-width:26px;text-align:center;padding:2px 10px;border-radius:999px;background:var(--grad-primary);font-weight:800;font-size:.85rem}
.field{width:100%;padding:13px 14px;border-radius:var(--radius-sm);background:rgba(0,0,0,.28);border:1px solid var(--stroke);color:var(--text);font-size:1rem;transition:var(--t)}
.field::placeholder{color:var(--faint)} .field:focus{outline:none;border-color:var(--purple);background:rgba(0,0,0,.4)}
.field.big{font-size:1.2rem;text-align:center;padding:15px}
.lbl{font-weight:600;font-size:.9rem;color:var(--muted);display:block;margin:4px 0}
.rpill{align-self:center;padding:5px 14px;border-radius:999px;background:var(--card-2);border:1px solid var(--stroke);font-weight:700;font-size:.82rem;color:var(--muted)}
.ferr{color:var(--red);font-weight:600;min-height:1.1em;text-align:center;margin:2px 0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1c1740;border:1px solid var(--stroke-2);padding:12px 20px;border-radius:999px;font-weight:700;z-index:80;box-shadow:var(--shadow)}

/* HOME */
.home{align-items:center;gap:18px;padding-top:8px}
.hero{text-align:center} .hero-emoji{font-size:4rem;filter:drop-shadow(0 10px 24px rgba(168,85,247,.5));animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-title{font-size:2.2rem;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-tag{color:var(--muted);margin-top:6px}
.join-card{width:100%;display:flex;flex-direction:column;gap:8px}
.avatar-big{align-self:center;width:84px;height:84px;border-radius:24px;font-size:3rem;background:var(--card-2);border:1px solid var(--stroke-2);display:grid;place-items:center;transition:var(--t)}
.avatar-big:hover{transform:translateY(-2px);box-shadow:var(--glow)}
.or{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:.8rem;font-weight:700;margin:6px 0}
.or span{flex:1;height:1px;background:var(--stroke)}
.join-row{display:flex;gap:8px} .code-in{width:100%;text-align:center;font-family:var(--fd);font-weight:700;font-size:1.6rem;letter-spacing:.3em;margin-bottom:6px}
.id-card{padding:12px}
.idrow{display:flex;align-items:center;gap:12px}
.avatar-big.sm{width:60px;height:60px;font-size:2.2rem;border-radius:18px;flex:0 0 auto}
.idname{flex:1} .idname .lbl{margin-top:0}
.menu-btns{display:flex;flex-direction:column;gap:12px}
.paneltitle{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--fd);font-size:1.05rem}
.paneltitle b{flex:1}
.public-list{display:flex;flex-direction:column;gap:8px;max-height:46dvh;overflow-y:auto}
.public-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-sm);background:var(--card-2);border:1px solid var(--stroke);color:var(--text);text-align:start;transition:var(--t)}
.public-row:hover{border-color:var(--purple);transform:translateY(-1px);background:rgba(139,92,246,.14)}
.pr-av{font-size:1.8rem;flex:0 0 auto}
.pr-main{flex:1;display:flex;flex-direction:column} .pr-main small{color:var(--muted);font-size:.78rem}
.pr-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.pr-count{font-size:.8rem;color:var(--muted)} .pr-code{font-family:var(--fd);font-weight:700;letter-spacing:.15em;color:var(--cyan)}
.pad{padding:18px 0}

/* LOBBY */
.code-card{text-align:center}
.bigcode{font-family:var(--fd);font-weight:700;font-size:3rem;letter-spacing:.32em;margin:6px 0 12px;padding-inline-start:.32em;
  background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.plist{display:flex;flex-direction:column;gap:8px}
.pchip{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--card-2);border:1px solid var(--stroke)}
.pchip.off{opacity:.45}
.pav{width:44px;height:44px;border-radius:12px;font-size:1.5rem;display:grid;place-items:center;background:rgba(0,0,0,.25);border:1px solid var(--stroke)}
.pav.editable{cursor:pointer;border-color:var(--purple)} .pav.editable:hover{background:rgba(139,92,246,.2)}
.pname{flex:1;font-weight:600} .metag{color:var(--cyan);font-weight:700;font-size:.85rem}
.pscore{font-family:var(--fd);font-weight:700;background:var(--card);border:1px solid var(--stroke);border-radius:999px;padding:2px 10px}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--stroke);flex-wrap:wrap}
.setrow.col{flex-direction:column;align-items:stretch}
.setrow>label{font-weight:600}
.seg-group{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.seg{min-width:40px;padding:8px 12px;border-radius:10px;font-weight:700;font-size:.85rem;background:var(--card-2);border:1px solid var(--stroke);color:var(--text);transition:var(--t)}
.seg.on{background:var(--grad-primary);border-color:transparent}
.modeseg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.mode{display:flex;flex-direction:column;gap:4px;text-align:start;padding:12px;border-radius:var(--radius-sm);background:var(--card-2);border:2px solid var(--stroke);color:var(--text);transition:var(--t)}
.mode small{color:var(--muted);font-weight:400;font-size:.78rem;line-height:1.35}
.mode.on{border-color:var(--purple);background:rgba(139,92,246,.16)}
.toggle{width:52px;height:30px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid var(--stroke);position:relative;transition:var(--t)}
.toggle>span{position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:var(--t)}
.toggle.on{background:var(--grad-players)} .toggle.on>span{transform:translateX(22px)}
body.rtl .toggle.on>span{transform:translateX(-22px)}

/* ROLE */
.role{align-items:center}
.rolecard{width:100%;border-radius:var(--radius);padding:26px 20px;text-align:center;border:1px solid var(--stroke);box-shadow:var(--shadow);animation:pop .4s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.rolecard.civ{background:linear-gradient(160deg,rgba(52,211,153,.16),rgba(34,211,238,.1))}
.rolecard.imposter{background:linear-gradient(160deg,rgba(244,63,94,.2),rgba(162,28,175,.16))}
.rEmoji{font-size:3rem} .rcat{font-weight:700;color:var(--muted);margin-bottom:8px}
.rcat.big{display:inline-block;font-family:var(--fd);font-size:1.5rem;color:var(--text);margin:10px 0 4px;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--stroke-2)}
.rLabel{font-size:1.4rem;font-weight:800;font-family:var(--fd)} .rLabel.sm{font-size:.95rem;color:var(--muted);font-weight:600}
.sword{font-family:var(--fd);font-weight:700;font-size:2.3rem;margin:6px 0;background:var(--grad-players);-webkit-background-clip:text;background-clip:text;color:transparent}
.rhint{color:var(--muted);font-size:.9rem;margin:8px 0 0}
.dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.dot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:1.1rem;background:var(--card-2);border:1px solid var(--stroke);opacity:.5;filter:grayscale(.6);transition:var(--t)}
.dot.on{opacity:1;filter:none;border-color:var(--green);box-shadow:0 0 0 2px rgba(52,211,153,.4)}
.waitbox{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 0}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--stroke);border-top-color:var(--purple);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.checkbig{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:1.8rem;background:var(--grad-players);color:#06281f;font-weight:800}

/* CLUE */
.minirole{align-self:center;padding:8px 14px;border-radius:999px;background:var(--card-2);border:1px solid var(--stroke)}
.minirole.imp{background:rgba(244,63,94,.16);border-color:rgba(244,63,94,.3)}
/* big category banner — shown to EVERYONE (incl. the imposter) while clues are written */
.catbanner{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:14px;padding:14px 18px;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(34,211,238,.16));border:1px solid var(--stroke-2);box-shadow:var(--glow)}
.cat-emoji{font-size:2.6rem;line-height:1}
.cat-text{display:flex;flex-direction:column;line-height:1.1}
.cat-text small{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}
.cat-text b{font-family:var(--fd);font-size:1.7rem}
.turn-now{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-weight:600;margin:2px 0}
.turn-now .turn-av{font-size:1.5rem}

/* timer */
.timerbar{display:flex;align-items:center;gap:10px;justify-content:center}
.tlabel{color:var(--muted);font-size:.82rem}
.tclock{font-family:var(--fd);font-weight:700;font-size:1.8rem;font-variant-numeric:tabular-nums;background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.tclock.low{color:var(--red);-webkit-text-fill-color:var(--red);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.4}}

/* DISCUSS */
.cluelist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.clueitem{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--stroke);animation:slin .35s both}
@keyframes slin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ca{color:var(--muted);font-weight:600} .cw{font-family:var(--fd);font-weight:700;font-size:1.15rem}

/* VOTE */
.votegrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.voteopt{display:flex;align-items:center;gap:10px;padding:13px;border-radius:var(--radius-sm);background:var(--card);border:2px solid var(--stroke);color:var(--text);font-weight:600;text-align:start;transition:var(--t)}
.voteopt:hover{border-color:var(--stroke-2);transform:translateY(-2px)}
.voteopt.chosen{border-color:var(--purple);background:rgba(139,92,246,.18);box-shadow:var(--glow)}
.vav{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;background:rgba(0,0,0,.22);border:1px solid var(--stroke)}

/* RESULTS */
.tallycard{display:flex;flex-direction:column;gap:7px}
.tline{display:flex;align-items:center;gap:10px}
.tn{flex:0 0 40%;font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbar{flex:1;height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.tbar>span{display:block;height:100%;border-radius:999px;background:var(--grad-primary);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.tline.top .tbar>span{background:var(--grad-imposter)}
.tc{flex:0 0 20px;text-align:end;font-weight:800}
.obanner{text-align:center;font-family:var(--fd);font-weight:600;font-size:1.1rem;padding:11px;border-radius:var(--radius-sm);background:var(--card-2);border:1px solid var(--stroke)}
.fg{text-align:center} .fgp{color:var(--muted);margin-top:0}
.wincard{text-align:center;border-radius:var(--radius);padding:24px 18px;border:1px solid var(--stroke);box-shadow:var(--shadow);animation:pop .5s cubic-bezier(.2,.9,.3,1.3)}
.wincard.players{background:linear-gradient(160deg,rgba(52,211,153,.22),rgba(34,211,238,.14))}
.wincard.imposter{background:linear-gradient(160deg,rgba(244,63,94,.24),rgba(162,28,175,.18))}
.wincard.champ{background:linear-gradient(160deg,rgba(251,191,36,.22),rgba(255,93,143,.16))}
.wemoji{font-size:3.2rem;animation:float 3s ease-in-out infinite} .wtitle{font-family:var(--fd);font-weight:700;font-size:1.7rem;margin:6px 0}
.wdetail{font-weight:700;margin:4px 0} .wmeta{color:var(--muted);margin:3px 0;font-size:.94rem}
.scorecard{display:flex;flex-direction:column;gap:4px}
.sline{display:flex;align-items:center;justify-content:space-between;padding:8px 6px;border-radius:10px}
.sline b{font-family:var(--fd)}
.scorecard.big .sline{background:var(--card-2);border:1px solid var(--stroke);margin-bottom:6px;padding:12px}
.sline.first{background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(255,93,143,.12));border-color:rgba(251,191,36,.4)}
.rk{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1px solid var(--stroke);font-weight:800;font-size:.8rem}
.sline.first .rk{background:var(--amber);color:#3b2c00} .snm{flex:1;font-weight:600;margin-inline:10px}

/* turn order (clue phase) — compact so everyone fits without scrolling */
/* compact rows so a full room (up to 12) fits on one screen without scrolling */
.turncard{display:flex;flex-direction:column;gap:4px}
.turn{display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:10px;background:var(--card-2);border:1px solid var(--stroke);transition:var(--t)}
.turn.active{border-color:var(--purple);background:rgba(139,92,246,.18);box-shadow:var(--glow)}
.turn.done{opacity:.92}
.turn-n{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1px solid var(--stroke);font-weight:800;font-size:.72rem}
.turn-av{font-size:1rem} .turn-av.big{font-size:3rem}
.turn-nm{flex:1;font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .turn-state{font-weight:800}
/* the word a player wrote, shown live right beside their name */
.turn-word{flex:0 0 auto;max-width:45%;font-family:var(--fd);font-weight:700;font-size:.92rem;color:var(--cyan);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px 9px;border-radius:999px;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.28)}
.majbar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.majbar>span{display:block;height:100%;border-radius:999px;background:var(--grad-players);transition:width .4s cubic-bezier(.2,.8,.2,1)}

/* reveal table (results) — what everyone wrote & had */
.revealcard{display:flex;flex-direction:column;gap:6px}
.rvrow{display:grid;grid-template-columns:1.1fr 1fr 1fr;align-items:center;gap:8px;padding:10px;border-radius:12px;background:var(--card-2);border:1px solid var(--stroke)}
.rvrow.imp{border-color:rgba(244,63,94,.4);background:rgba(244,63,94,.12)}
.rv-who{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-cell{display:flex;flex-direction:column;line-height:1.2}
.rv-cell small{color:var(--faint);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em}
.rv-cell b{font-family:var(--fd);font-size:1rem}
.imp-no{color:var(--red);font-size:.8rem}

/* modals */
.modal-layer{position:fixed;inset:0;z-index:70;display:none;align-items:flex-end;justify-content:center}
.modal-layer.open{display:flex}
.mback{position:absolute;inset:0;background:rgba(5,4,15,.62);backdrop-filter:blur(6px)}
.msheet{position:relative;z-index:1;width:min(540px,100%);max-height:88dvh;overflow-y:auto;background:linear-gradient(180deg,#1a1640,#120f2c);border:1px solid var(--stroke-2);border-radius:26px 26px 0 0;padding:18px 18px max(20px,env(safe-area-inset-bottom));box-shadow:0 -20px 60px rgba(0,0,0,.6);animation:up .35s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.mhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .mhead h2{font-size:1.25rem}
.avgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:10px}
.avopt{aspect-ratio:1;border-radius:14px;padding:6px;background:var(--card-2);border:1px solid var(--stroke);display:grid;place-items:center;transition:var(--t)}
.avopt:hover{transform:scale(1.08);border-color:var(--purple);background:rgba(139,92,246,.2)}

/* SVG character avatars */
.ava{display:inline-flex;align-items:center;justify-content:center;width:1.6em;height:1.6em;vertical-align:-.42em;line-height:0;flex:0 0 auto}
.ava .avsvg{width:100%;height:100%;display:block;overflow:visible}
.pav .ava,.vav .ava,.avatar-big .ava,.dot .ava,.turn-av .ava,.pr-av .ava,.avopt .ava{width:100%;height:100%}
.turn-av.big{width:74px;height:74px;margin:0 auto;font-size:0}
.rules{list-style:none;counter-reset:r;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.rules li{display:flex;gap:12px;align-items:flex-start}
.rn{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--grad-primary);font-weight:800;font-size:.85rem}

/* anim off */
body.no-anim .orb,body.no-anim .screen,body.no-anim .rolecard,body.no-anim .wincard,body.no-anim .clueitem,
body.no-anim .msheet,body.no-anim .hero-emoji,body.no-anim .wemoji,body.no-anim .pulse,body.no-anim .spinner{animation:none}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* responsive */
@media (min-width:600px){.modal-layer{align-items:center}.msheet{border-radius:26px}.hero-title{font-size:2.6rem}}
@media (max-width:360px){.votegrid{grid-template-columns:1fr}.bigcode{font-size:2.4rem}}