:root{--bg: #0b0806;--bg-2: #14100a;--surface: #1d150c;--surface-2: #271d11;--border: #5c4322;--text: #f3e9d2;--muted: #b09a76;--blood: #cf5c28;--blood-bright: #e8833f;--blood-deep: #7c3413;--accent: var(--blood);--accent-2: var(--blood-bright);--danger: #fb7185;--ok: #84cc16;--moon: #e8b54a}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,rgba(207,92,40,.12),transparent 60%),radial-gradient(800px 500px at 100% 100%,rgba(124,52,19,.08),transparent 60%),var(--bg);color:var(--text);font-family:Noto Kufi Arabic,Segoe UI,Tahoma,sans-serif;line-height:1.6}h1,h2,h3{margin:0 0 .5rem}h1{font-size:1.9rem}h2{font-size:1.35rem}.page{max-width:480px;margin:0 auto;padding:1rem 1rem 3rem}.center-screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:1rem;text-align:center}.title{font-size:2.6rem;text-shadow:0 0 18px rgba(207,92,40,.65),0 0 50px rgba(207,92,40,.3);animation:pulse-blood 3s ease-in-out infinite}@keyframes pulse-blood{0%,to{text-shadow:0 0 18px rgba(207,92,40,.55),0 0 50px rgba(207,92,40,.25)}50%{text-shadow:0 0 30px rgba(232,131,63,.85),0 0 70px rgba(207,92,40,.4)}}.subtitle{color:var(--muted);margin-top:-.5rem;letter-spacing:.05em}.field{display:flex;flex-direction:column;gap:.25rem;width:min(320px,90vw);text-align:right}.field span{font-size:.85rem;color:var(--muted)}input{background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);padding:.7rem .9rem;font-size:1rem;font-family:inherit;transition:border-color .15s ease,box-shadow .15s ease}input:focus{outline:none;border-color:var(--blood);box-shadow:0 0 0 3px #cf5c2840}.code-input{letter-spacing:.3em;text-align:center;direction:ltr;font-weight:700}.btn{font-family:inherit;border:none;border-radius:12px;padding:.7rem 1.4rem;font-size:1rem;cursor:pointer;transition:transform .1s ease,filter .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease}.btn:not(:disabled):hover{transform:translateY(-1px)}.btn:not(:disabled):active{transform:translateY(0) scale(.96)}.btn:focus-visible,.player-list.selectable li:focus-visible,.help-btn:focus-visible,.sound-toggle:focus-visible{outline:2px solid var(--blood-bright);outline-offset:2px}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:linear-gradient(160deg,var(--blood-bright),var(--blood-deep));color:#fff;border:1px solid rgba(255,120,120,.35);box-shadow:0 4px 20px #cf5c2859,inset 0 1px #ffffff1f;text-shadow:0 1px 2px rgba(0,0,0,.4)}.btn.primary:not(:disabled):hover{filter:brightness(1.15);box-shadow:0 6px 28px #e8833f80,inset 0 1px #ffffff26}.btn.ghost{background:#cf5c280f;border:1px solid var(--border);color:var(--text)}.btn.ghost:hover{border-color:var(--blood);background:#cf5c2824}.btn.ghost.picked{border-color:var(--blood-bright);background:#cf5c2847;box-shadow:0 0 14px #cf5c2866}.btn.big{font-size:1.15rem;padding:.9rem 2rem}.link{background:none;border:none;color:var(--blood-bright);cursor:pointer;font-family:inherit;font-size:.9rem;padding:.2rem}.link:hover{text-decoration:underline}.link.danger{color:var(--danger)}.row{display:flex;gap:.6rem;align-items:center;justify-content:center;flex-wrap:wrap}.mt{margin-top:1rem}.topbar{max-width:480px;margin:0 auto;display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem;font-size:.9rem;color:var(--muted);border-bottom:1px solid rgba(92,67,34,.5)}.room-code{color:var(--text);font-weight:700;direction:ltr}.conn.on{color:var(--ok)}.conn.off{color:var(--danger)}.topbar .link{margin-inline-start:auto}.card{background:linear-gradient(170deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:14px;padding:1rem 1.2rem;width:100%;box-shadow:inset 0 1px #ff78780d,0 8px 24px #00000073}.card.result{text-align:center;font-size:1.05rem;border-color:var(--blood);box-shadow:0 0 24px #cf5c2840,inset 0 1px #ff787814}.hint{color:var(--muted);font-size:.9rem}.hint.ok{color:var(--ok)}.code-big{font-size:1.7rem;letter-spacing:.25em;color:var(--blood-bright);direction:ltr;display:inline-block;text-shadow:0 0 16px rgba(232,131,63,.5)}.player-list{list-style:none;margin:.75rem 0;padding:0;width:100%;display:flex;flex-direction:column;gap:.45rem}.player-list li{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.65rem .9rem;transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}.player-list li.me{border-color:var(--blood);background:linear-gradient(170deg,rgba(207,92,40,.12),var(--surface))}.player-list.selectable li{cursor:pointer;transition:transform .1s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease}.player-list.selectable li:hover{border-color:var(--blood);transform:translate(-2px)}.player-list.selectable li:active{transform:scale(.985)}.player-list.selectable li.selected{border-color:var(--blood-bright);background:#cf5c2838;box-shadow:0 0 16px #cf5c2859;animation:pick-pulse .25s ease}@keyframes pick-pulse{0%{box-shadow:0 0 #cf5c2800}}.player-list.compact li{padding:.4rem .8rem;font-size:.95rem}.player-list li.dim{opacity:.45}.badges{display:flex;gap:.4rem;align-items:center}.badge{font-style:normal;font-size:.72rem;border-radius:999px;padding:.1rem .55rem}.badge.host{background:#e8b54a29;color:var(--moon);border:1px solid rgba(232,181,74,.35)}.badge.ready{background:#84cc1626;color:var(--ok);border:1px solid rgba(132,204,22,.3)}.badge.off{background:#fb718524;color:var(--danger);border:1px solid rgba(251,113,133,.3)}.role-card{width:min(260px,70vw);aspect-ratio:2 / 3;border-radius:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;border:2px solid var(--border);background:radial-gradient(circle at 50% 20%,rgba(207,92,40,.15),transparent 55%),linear-gradient(165deg,var(--surface-2),#141009);box-shadow:0 12px 40px #0009;animation:card-rise .35s ease}@keyframes card-rise{0%{opacity:0;transform:translateY(16px) scale(.96)}}.role-card.team-villain{border-color:var(--blood);box-shadow:0 0 60px #cf5c2866,0 12px 40px #0009}.role-card.team-village{border-color:#14b8a6;box-shadow:0 0 44px #14b8a640,0 12px 40px #0009}.role-team{color:var(--muted);font-size:.85rem}.role-name{font-size:2.1rem;text-shadow:0 0 20px currentColor}.night-head{display:flex;justify-content:space-between;align-items:baseline}.timer{font-size:1.4rem;font-weight:700;color:var(--moon);font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(232,181,74,.4)}.timer.huge{font-size:3rem}.queue{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-top:.75rem}.chip{font-size:.78rem;border:1px solid var(--border);border-radius:999px;padding:.15rem .7rem;color:var(--muted)}.chip.active{border-color:var(--blood-bright);color:#fff;background:#cf5c284d;box-shadow:0 0 12px #cf5c2873;animation:chip-glow 1.6s ease-in-out infinite}@keyframes chip-glow{0%,to{box-shadow:0 0 8px #cf5c2859}50%{box-shadow:0 0 18px #e8833fa6}}.results-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}.results-list li{display:flex;justify-content:space-between;gap:1rem}.results-list.small{font-size:.88rem;color:var(--muted)}.wolf-text{color:var(--blood-bright);font-weight:700}.toast{position:fixed;bottom:1.2rem;left:50%;transform:translate(-50%);background:#2a190c;color:#f0b48a;border:1px solid var(--blood);box-shadow:0 0 24px #cf5c2866;border-radius:12px;padding:.6rem 1.2rem;z-index:50;animation:pop .2s ease}.banner{position:fixed;top:0;left:0;right:0;background:linear-gradient(90deg,var(--blood-deep),var(--blood));color:#fff;text-align:center;padding:.35rem;font-size:.85rem;z-index:40}@media(prefers-reduced-motion:reduce){.title,.chip.active,.now-card:not(.is-dark),.q-card.now,.join-art{animation:none}.player-list.selectable li:hover{transform:none}}@media(min-width:900px){body{background:radial-gradient(1400px 700px at 50% -10%,rgba(207,92,40,.14),transparent 60%),radial-gradient(1000px 600px at 0% 100%,rgba(124,52,19,.1),transparent 60%),radial-gradient(900px 500px at 100% 90%,rgba(124,52,19,.08),transparent 55%),var(--bg)}.page{max-width:640px}.topbar{max-width:720px;padding:1rem 1.5rem}h1{font-size:2.3rem}h2{font-size:1.55rem}.player-list li{padding:.8rem 1.1rem;font-size:1.05rem}.btn{font-size:1.05rem;padding:.8rem 1.7rem}.card{padding:1.4rem 1.6rem}.page>.player-list,.night-targets{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.center-screen{gap:1rem}}.join-art{animation:float 5s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.claws{opacity:.9}.with-art{display:flex;align-items:center;gap:.5rem}.active-role-art{margin-top:.25rem}.role-art{margin:.4rem 0}.role-card--flip{animation:card-flip-in .55s ease}@keyframes card-flip-in{0%{transform:perspective(700px) rotateY(90deg);opacity:0}to{transform:perspective(700px) rotateY(0);opacity:1}}.role-cell{display:inline-flex;align-items:center;gap:.35rem}.desc{max-width:420px}.help-wrap{position:fixed;top:3.4rem;left:1rem;z-index:30}.help-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:1.05rem;cursor:pointer;transition:border-color .15s ease,color .15s ease,box-shadow .15s ease}.help-btn:hover{border-color:var(--blood);color:var(--blood-bright);box-shadow:0 0 12px #dc262659}.help-pop{position:absolute;top:42px;left:0;width:min(280px,78vw);background:var(--surface-2);border:1px solid var(--blood-deep);border-radius:12px;padding:.7rem .9rem;font-size:.88rem;color:var(--text);box-shadow:0 10px 30px #0009,0 0 18px #cf5c2826;animation:pop .18s ease}.spinner-wrap{display:flex;flex-direction:column;align-items:center;gap:.4rem}.spinner-track{stroke:var(--border)}.spinner-head{stroke:var(--blood-bright);stroke-dasharray:70 40;transform-origin:center;animation:spin 1.1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.timer-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.ring-track{stroke:var(--border)}.ring-fill{stroke:var(--moon);filter:drop-shadow(0 0 6px rgba(232,181,74,.5));transition:stroke-dashoffset 1s linear}.timer-ring.urgent .ring-fill{stroke:var(--blood-bright);filter:drop-shadow(0 0 8px rgba(232,131,63,.7))}.timer-ring-num{position:absolute;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}.timer-ring.urgent .timer-ring-num{color:var(--blood-bright);animation:pulse-blood 1.2s ease-in-out infinite}.vote-confirm{justify-content:space-between!important}.tracker{width:100%;max-width:620px;display:flex;flex-direction:column;gap:.7rem;margin-top:.5rem}.page>.tracker,.tracker-foot .tracker{max-width:100%}.now-card{position:relative;display:flex;align-items:center;gap:.9rem;padding:.85rem 1.1rem;border-radius:14px;border:1px solid var(--blood);background:radial-gradient(circle at 88% 15%,rgba(207,92,40,.22),transparent 55%),linear-gradient(170deg,var(--surface-2),#161009);box-shadow:0 10px 26px #00000080}.now-card:not(.is-dark){animation:now-pulse 1.8s ease-in-out infinite}@keyframes now-pulse{0%,to{box-shadow:0 0 16px #cf5c282e,0 10px 26px #00000080}50%{box-shadow:0 0 30px #e8833f73,0 10px 26px #00000080}}.now-card.is-dark{border-color:var(--border);filter:saturate(.75)}.now-label{position:absolute;top:-.68rem;inset-inline-start:.9rem;font-size:.68rem;letter-spacing:.14em;color:var(--moon);background:var(--bg);padding:0 .45rem;border-radius:999px;border:1px solid rgba(232,181,74,.35)}.now-text h3{margin:0;font-size:1.12rem;text-shadow:0 0 14px rgba(232,131,63,.35)}.now-text .hint{margin:0;font-size:.8rem}.now-timer{margin-inline-start:auto;font-weight:700;font-size:1.05rem;color:var(--moon);font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(232,181,74,.4)}.queue-cards{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}.q-card{position:relative;display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:10px;font-size:.8rem;border:1px solid var(--border);background:#cf5c280d;color:var(--text);transition:opacity .3s ease,transform .2s ease,border-color .2s ease,box-shadow .2s ease}.q-card em{font-style:normal}.q-card.now{border-color:var(--blood-bright);animation:chip-glow 1.6s ease-in-out infinite;transform:scale(1.05)}.q-card.done{opacity:.4}.q-card.done em{text-decoration:line-through}.q-tick{color:var(--ok);font-size:.72rem}.my-role-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .95rem;border-radius:999px;font-size:.92rem;background:linear-gradient(170deg,rgba(207,92,40,.14),var(--surface));border:1px solid var(--blood-deep);box-shadow:inset 0 1px #ff787814,0 4px 14px #00000059}.sound-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:.95rem;line-height:1;transition:border-color .15s ease,transform .1s ease,box-shadow .15s ease}.sound-toggle:hover{border-color:var(--blood);box-shadow:0 0 12px #cf5c284d}.sound-toggle:active{transform:scale(.9)}.tracker-foot{opacity:.97}@media(min-width:900px){.page{max-width:720px}.tracker{max-width:none}.now-text h3{font-size:1.3rem}.now-timer{font-size:1.2rem}.q-card{font-size:.88rem;padding:.38rem .8rem}.queue-cards{gap:.55rem}.my-role-badge{font-size:1rem;padding:.45rem 1.1rem}}.night-recap h3{margin-bottom:.6rem;color:var(--moon)}.recap-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.recap-list li{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.6rem;padding:.45rem .6rem;border-radius:10px;background:#cf5c280d;border:1px solid rgba(92,67,34,.6);font-size:.88rem}.recap-role{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}.recap-player{color:var(--blood-bright);font-weight:700;white-space:nowrap}.recap-desc{color:var(--muted)}@media(min-width:900px){.recap-list li{font-size:.95rem;padding:.55rem .8rem}}.htp-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#050301e0;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.htp-modal{background:linear-gradient(170deg,var(--surface-2),#120d08);border:1px solid var(--blood-deep);border-radius:16px;width:min(560px,96vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 60px #cf5c2840,0 24px 60px #000000b3;animation:pop .2s ease}.htp-header{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.2rem;border-bottom:1px solid var(--border)}.htp-header h2{margin:0;font-size:1.2rem;color:var(--moon)}.htp-close{background:none;border:1px solid var(--border);border-radius:8px;color:var(--muted);width:30px;height:30px;cursor:pointer}.htp-close:hover{border-color:var(--blood);color:var(--blood-bright)}.htp-tabs{display:flex;gap:.3rem;padding:.6rem 1rem 0;flex-wrap:wrap}.htp-tab{font-family:inherit;background:#cf5c280d;border:1px solid var(--border);border-radius:999px 999px 0 0;border-bottom:none;color:var(--muted);padding:.4rem .9rem;font-size:.85rem;cursor:pointer}.htp-tab.active{color:var(--text);background:#cf5c2829;border-color:var(--blood)}.htp-content{padding:1rem 1.2rem 1.4rem;overflow-y:auto;border-top:1px solid var(--border);font-size:.92rem}.htp-flavor{color:var(--muted);font-style:italic;margin-top:0}.htp-step{display:flex;gap:.8rem;margin:.9rem 0;align-items:flex-start}.htp-step-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:#cf5c2833;border:1px solid var(--blood);color:var(--blood-bright);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}.htp-step-title{color:var(--text)}.htp-step-desc{margin:.15rem 0 0;color:var(--muted);font-size:.88rem}.htp-win{margin-top:1.1rem;padding:.8rem 1rem;border:1px solid var(--border);border-radius:12px;background:#cf5c280a}.htp-win-label{color:var(--moon);font-weight:700;display:block;margin-bottom:.4rem}.htp-win p{margin:.25rem 0;font-size:.88rem}.htp-team{font-weight:700}.htp-team.village{color:#2dd4bf}.htp-team.villain{color:var(--blood-bright)}.htp-team.neutral{color:var(--moon)}.htp-order{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}.htp-order li{display:flex;align-items:center;gap:.6rem;padding:.35rem .6rem;border-radius:8px;background:#cf5c280d}.htp-order-num{color:var(--moon);font-weight:700;min-width:1.2rem}.htp-note{color:var(--muted);font-size:.82rem;margin-top:.8rem}.htp-block{margin-bottom:1rem}.htp-block>b{color:var(--moon);display:block;margin-bottom:.4rem;font-size:.9rem}.htp-row{display:flex;align-items:center;gap:.55rem;padding:.3rem .6rem;font-size:.9rem}.htp-row em{font-style:normal;color:var(--blood-bright);font-weight:700}.htp-row .htp-dim{color:var(--muted)}.htp-roles{display:flex;flex-direction:column;gap:.6rem}.htp-char{border:1px solid var(--border);border-radius:10px;padding:.6rem .8rem;background:#cf5c2808}.htp-char-head{display:flex;align-items:center;gap:.5rem}.htp-team-pill{font-size:.68rem;border-radius:999px;padding:.05rem .5rem;margin-inline-start:auto}.htp-team-pill.team-village{background:#2dd4bf24;color:#2dd4bf}.htp-team-pill.team-villain{background:#e8833f29;color:var(--blood-bright)}.htp-team-pill.team-neutral{background:#e8b54a24;color:var(--moon)}.htp-char-desc{margin:.35rem 0 0;color:var(--text);font-size:.88rem}.htp-char-knows{margin:.2rem 0 0;color:var(--muted);font-size:.82rem}.htp-btn{font-family:inherit;background:none;border:1px solid var(--border);border-radius:10px;color:var(--moon);padding:.45rem 1rem;font-size:.9rem;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}.htp-btn:hover{border-color:var(--moon);box-shadow:0 0 12px #e8b54a40}.card.result.with-close{position:relative;max-width:620px}.result-body{display:flex;align-items:center;gap:.5rem;justify-content:center;flex-wrap:wrap}.result-close{position:absolute;top:.4rem;inset-inline-end:.4rem;width:24px;height:24px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:.72rem;line-height:1;cursor:pointer;transition:border-color .15s ease,color .15s ease}.result-close:hover{border-color:var(--blood);color:var(--blood-bright)}.result-restore{font-family:inherit;background:#cf5c2814;border:1px dashed var(--blood-deep);border-radius:999px;color:var(--muted);padding:.3rem .9rem;font-size:.82rem;cursor:pointer;transition:border-color .15s ease,color .15s ease}.result-restore:hover{border-color:var(--blood-bright);color:var(--text)}.clone-followup-tag{font-size:.85em;color:var(--moon);text-shadow:0 0 10px rgba(232,181,74,.4)}