:root{--bg: #f4f1ec;--card: #ffffff;--surface-2: #efeae3;--input-bg: #ffffff;--text: #23202b;--muted: #6d6878;--line: #e2dbd0;--accent: #5a3fd1;--accent-soft: #ece8ff;--accent-strong: #4429b8;--on-accent: #ffffff;--moon: #f0c75e;--green: #2e9e6e;--yellow: #f0c75e;--red-text: #c4303d;--village: #2f8f63;--werewolf: #c93a48;--neutral: #8a55d4;--village-soft: #e3f4ea;--werewolf-soft: #fbe5e7;--neutral-soft: #f0e7fb;--card-face: #fffdf8;--on-team: #ffffff;--shadow: 0 8px 24px rgba(35, 32, 43, .08);--shadow-sm: 0 2px 8px rgba(35, 32, 43, .08);--radius: 16px;color-scheme:light}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #0f1020;--card: #1a1b2e;--surface-2: #23243a;--input-bg: #14152a;--text: #ecebf5;--muted: #9c9ab3;--line: #2e2f48;--accent: #9d8cff;--accent-soft: #2c2850;--accent-strong: #cfc6ff;--on-accent: #0f1020;--green: #4fd68e;--red-text: #ff8a94;--village: #4fc98d;--werewolf: #ff6b78;--neutral: #b58cff;--village-soft: #173327;--werewolf-soft: #3a1a22;--neutral-soft: #2a1f42;--card-face: #f7f1e3;--on-team: #0f1020;--shadow: 0 8px 24px rgba(0, 0, 0, .4);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);color-scheme:dark}}:root[data-theme=dark]{--bg: #0f1020;--card: #1a1b2e;--surface-2: #23243a;--input-bg: #14152a;--text: #ecebf5;--muted: #9c9ab3;--line: #2e2f48;--accent: #9d8cff;--accent-soft: #2c2850;--accent-strong: #cfc6ff;--on-accent: #0f1020;--green: #4fd68e;--red-text: #ff8a94;--village: #4fc98d;--werewolf: #ff6b78;--neutral: #b58cff;--village-soft: #173327;--werewolf-soft: #3a1a22;--neutral-soft: #2a1f42;--card-face: #f7f1e3;--on-team: #0f1020;--shadow: 0 8px 24px rgba(0, 0, 0, .4);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:Nunito,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text);line-height:1.45;-webkit-font-smoothing:antialiased;transition:background-color .2s,color .2s}h1,h2,h3,p{margin:0}h1{font-size:1.6rem;font-weight:900;line-height:1.2}h2{font-size:1.1rem;font-weight:800}h3{font-size:1.05rem;font-weight:800}button,input{font:inherit;color:inherit}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.app{min-height:100dvh;display:flex;flex-direction:column;overflow-x:clip}.topbar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:720px;margin:0 auto;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left))}.topbar-actions{display:flex;gap:8px}.logo{display:inline-flex;align-items:center;gap:8px;font-family:Cinzel,serif;font-weight:900;font-size:1.2rem;letter-spacing:.04em;color:var(--text);text-decoration:none;min-height:44px}.main{flex:1;width:100%;max-width:720px;margin:0 auto;padding:8px max(16px,env(safe-area-inset-right)) 64px max(16px,env(safe-area-inset-left))}.banner{position:sticky;top:0;z-index:50;padding:6px 16px;text-align:center;font-weight:800;background:var(--yellow);color:#23202b}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 20px}.stack{display:grid;gap:12px}.muted{color:var(--muted)}.small{font-size:.875rem}.center{text-align:center}.error{color:var(--red-text);font-weight:700}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border:0;border-radius:999px;font-weight:800;cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1),background-color .15s,box-shadow .15s,opacity .15s}.btn:active:not(:disabled){transform:scale(.96)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-lg{width:100%;min-height:56px;font-size:1.1rem}.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent)}.btn-secondary{background:var(--accent-soft);color:var(--accent-strong)}.btn-ghost{background:transparent;color:var(--muted)}.icon-btn{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:var(--card);color:var(--text);box-shadow:var(--shadow-sm);cursor:pointer}.help-btn{font-size:1.25rem;font-weight:900;color:var(--accent-strong)}.field{display:grid;gap:6px;font-weight:700}.input{width:100%;min-height:48px;padding:10px 16px;font-size:1rem;border:2px solid var(--line);border-radius:14px;background:var(--input-bg);outline:none;transition:border-color .15s}.input:focus{border-color:var(--accent)}.input-code{text-transform:uppercase;letter-spacing:.3em;font-size:1.4rem;font-weight:900;text-align:center}.tag{padding:2px 10px;border-radius:999px;font-size:.75rem;font-weight:800;background:var(--accent-soft);color:var(--accent-strong)}.eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.home{display:grid;gap:28px;max-width:420px;margin:0 auto;padding-top:5vh}.hero{display:grid;gap:10px;justify-items:center;text-align:center}.hero-title{font-family:Cinzel,serif;font-size:2.6rem;letter-spacing:.04em}.hero-mark{animation:float 3s ease-in-out infinite}.hero-mark svg{border-radius:22px;box-shadow:0 12px 40px color-mix(in srgb,var(--moon) 35%,transparent)}.how{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:how}.how li{counter-increment:how;display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-weight:600}.how li:before{content:counter(how);flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-strong);font-weight:900;font-size:.85rem}.hub-link{justify-self:center;font-size:.9rem;font-weight:700;color:var(--muted);text-decoration:none}.hub-link:hover{color:var(--text)}.form{display:grid;gap:16px;max-width:420px;margin:24px auto 0}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.lobby,.narrator{display:grid;gap:16px;max-width:520px;margin:0 auto}.lobby-card{display:grid;gap:14px}.lobby-card:first-child{text-align:center}.room-code{display:flex;justify-content:center;gap:6px}.room-code span{width:48px;height:56px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);color:var(--accent-strong);font-size:1.8rem;font-weight:900}.row-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.player-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.player-row,.narrator-row{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border-radius:14px;background:var(--surface-2);font-weight:700;animation:pop-in .25s cubic-bezier(.34,1.56,.64,1)}.player-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.presence{width:10px;height:10px;flex:none;display:inline-block;border-radius:50%;background:transparent;border:2px solid var(--muted)}.presence.on{background:var(--green);border-color:var(--green)}.kick{width:32px;height:32px;flex:none;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer}.kick:hover{background:var(--werewolf-soft);color:var(--werewolf)}@keyframes pop-in{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.role-setup{gap:10px}.role-group{display:grid;gap:8px;margin-top:8px}.role-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--surface-2);border:2px solid transparent;cursor:pointer;transition:border-color .15s,background-color .15s}.role-row.on{border-color:color-mix(in srgb,var(--team) 55%,transparent);background:var(--team-soft)}.stepper-row{cursor:default;border-color:color-mix(in srgb,var(--team) 55%,transparent);background:var(--team-soft)}.villager-row{cursor:default;background:transparent;border:2px dashed var(--line)}.role-emoji{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--card);font-size:1.4rem}.role-text{flex:1;min-width:0;display:grid;line-height:1.25}.role-name{font-weight:800}.stepper{display:flex;align-items:center;gap:4px}.stepper button{width:40px;height:40px;border:0;border-radius:50%;background:var(--card);font-size:1.3rem;font-weight:900;cursor:pointer;box-shadow:var(--shadow-sm)}.stepper button:disabled{opacity:.4;cursor:not-allowed}.stepper output{min-width:28px;text-align:center;font-size:1.3rem;font-weight:900}.switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:none;position:relative;width:48px;height:28px;margin:0;border-radius:999px;background:var(--line);cursor:pointer;transition:background-color .15s}.switch:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.switch:checked{background:var(--team)}.switch:checked:after{transform:translate(20px)}.switch:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:2px}.deck-summary{margin-top:4px;text-align:center;font-weight:800}.deck-summary.over{color:var(--red-text)}.role-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.role-chip{padding:6px 12px;border-radius:999px;font-weight:800;font-size:.9rem;background:var(--team-soft);color:var(--text);border:1.5px solid color-mix(in srgb,var(--team) 45%,transparent)}.role-count{color:var(--muted);font-weight:800}.team-village{--team: var(--village);--team-soft: var(--village-soft)}.team-werewolf{--team: var(--werewolf);--team-soft: var(--werewolf-soft)}.team-neutral{--team: var(--neutral);--team-soft: var(--neutral-soft)}.team-pill{justify-self:start;display:inline-block;padding:2px 10px;border-radius:999px;font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;background:var(--team);color:var(--on-team)}.sheet{width:min(560px,100%);max-width:100%;max-height:min(88dvh,820px);margin:auto auto 0;padding:0;border:0;border-radius:22px 22px 0 0;background:var(--bg);color:var(--text);box-shadow:var(--shadow)}.sheet[open]{animation:sheet-up .28s cubic-bezier(.2,.9,.3,1)}.sheet::backdrop{background:#0808148c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}@media(min-width:640px){.sheet{margin:auto;border-radius:22px}}.sheet-body{display:grid;gap:14px;padding:20px max(16px,env(safe-area-inset-left)) calc(24px + env(safe-area-inset-bottom))}.sheet-head{position:sticky;top:-20px;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:-20px -16px 0;padding:20px 16px 12px;background:var(--bg)}.sheet-head h2{font-family:Cinzel,serif;font-size:1.35rem}.role-info-list{display:grid;gap:12px}.role-info{display:grid;gap:8px;padding:14px 16px;border-radius:16px;background:var(--card);box-shadow:var(--shadow-sm);border-left:5px solid var(--team)}.role-info-head{display:flex;align-items:center;gap:12px}.role-info-head .role-emoji{background:var(--team-soft)}.role-info-title{display:grid;gap:3px}.powers{display:grid;gap:6px;margin:0;padding:0;list-style:none}.powers li{position:relative;padding-left:20px;font-size:.93rem}.powers li:before{content:"✦";position:absolute;left:0;top:0;color:var(--team);font-size:.8rem;line-height:1.6}@keyframes sheet-up{0%{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}.reveal{display:grid;gap:16px;justify-items:center;max-width:520px;margin:0 auto}.card-stage{display:grid;gap:14px;justify-items:center;width:100%;perspective:1400px}.flip-card{--card-w: min(330px, 100%, calc((100dvh - 290px) / 1.45));position:relative;width:max(220px,var(--card-w));aspect-ratio:1 / 1.45;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;animation:deal-in .9s cubic-bezier(.2,.9,.25,1.15) both}.flip-card:focus-visible .flip-inner{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 60%,transparent)}.flip-inner{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:22px;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.35,1.35,.45,1)}.flip-card.is-flipped .flip-inner{transform:rotateY(180deg)}.flip-card:not(.is-flipped):not(.is-waiting) .flip-inner{animation:card-bob 2.6s ease-in-out 1s infinite}.flip-face{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 18px 50px #0a081e59,0 2px 6px #0a081e33}.flip-back{background:#1c1d3a}.flip-back:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 48%,transparent 60%);background-size:250% 100%;animation:sheen 3.2s ease-in-out 1.2s infinite}.card-back-art{display:block;width:100%;height:100%}.card-back-title{font-family:Cinzel,serif;font-weight:900;font-size:15px;letter-spacing:6px;fill:#f0c75e}.card-back-art .star{animation:twinkle 2.4s ease-in-out infinite alternate}.flip-front{transform:rotateY(180deg);display:flex;flex-direction:column;background:var(--card-face);color:#23202b;border:3px solid var(--team)}.front-band{flex:none;display:grid;place-items:center;height:34%;background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.35),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--team) 55%,#120c1c),color-mix(in srgb,var(--team) 88%,#120c1c))}.front-emoji{font-size:clamp(3rem,16vw,4.4rem);line-height:1;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}.flip-card.is-flipped .front-emoji{animation:emoji-pop .6s .45s cubic-bezier(.34,1.56,.64,1) both}.front-body{flex:1;min-height:0;overflow-y:auto;display:grid;align-content:start;justify-items:center;gap:8px;padding:14px 16px 18px;text-align:center;overscroll-behavior:contain;scrollbar-width:none}.front-body::-webkit-scrollbar{display:none}.front-name{font-family:Cinzel,serif;font-size:clamp(1.4rem,7vw,1.8rem);font-weight:900;line-height:1.1;color:#23202b}.flip-front .team-pill{justify-self:center}.front-desc{font-weight:700;color:#4a4555;font-size:.95rem}.front-divider{color:var(--team);font-size:.8rem;letter-spacing:1em;padding-left:1em}.flip-front .powers{text-align:left;justify-self:stretch}.flip-front .powers li{color:#2f2b38;font-size:.9rem}.card-hint{min-height:1.4em;text-align:center;font-weight:700}.narrator-gone{display:grid;gap:10px;justify-items:center;text-align:center;padding:16px;width:100%}@keyframes deal-in{0%{transform:translateY(-75vh) rotate(-28deg) scale(.55);opacity:0}55%{opacity:1}80%{transform:translateY(10px) rotate(3deg) scale(1.02)}to{transform:none;opacity:1}}@keyframes card-bob{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-.8deg)}}@keyframes sheen{0%{background-position:150% 0}60%,to{background-position:-100% 0}}@keyframes twinkle{0%{opacity:.25}to{opacity:1}}@keyframes emoji-pop{0%{transform:scale(.3) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}.narrator h1{font-family:Cinzel,serif}.assignments{display:grid;gap:8px;margin:0;padding:0;list-style:none;transition:filter .25s}.assignments.is-hidden{filter:blur(9px);pointer-events:none;-webkit-user-select:none;user-select:none}.assignment{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 14px;border-radius:14px;background:var(--team-soft, var(--surface-2));border-left:5px solid var(--team, var(--line));font-weight:700}.assignment.left{opacity:.5}.assignment-name{display:inline-flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.assignment-role{flex:none;font-weight:900}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}