:root{--grad-a:#6b4df6;--grad-b:#38b6ff;--night-a:#1a1440;--night-b:#2c1e5e;--ink:#2b2b4d;--ink-soft:#6f76af;--card:#fff;--accent:#6b4df6;--accent-dark:#5238d8;--pink:#ff5c7a;--pink-dark:#e04563;--yellow:#ffc93c;--yellow-dark:#e0ad1f;--blood:#ff4757;--blood-dark:#d63a48;--green:#2ecc71;--green-dark:#22a357;--shadow:#1e145040;font-family:Nunito,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{color:#fff;background:radial-gradient(900px 500px at 15% -5%, #ffffff24, transparent 60%), radial-gradient(700px 500px at 90% 15%, #ffc93c2e, transparent 55%), linear-gradient(160deg, var(--grad-a), var(--grad-b));background-attachment:fixed;min-height:100vh;margin:0;transition:background .6s}body.night{background:radial-gradient(900px 500px at 15% -5%, #ffffff0d, transparent 60%), radial-gradient(700px 500px at 85% 10%, #ffc93c1a, transparent 50%), linear-gradient(160deg, var(--night-a), var(--night-b));background-attachment:fixed}h1,h2,h3{font-family:"Baloo 2",Nunito,system-ui,sans-serif}.screen{max-width:980px;margin:0 auto;padding:24px 20px 72px}@keyframes popIn{0%{opacity:0;transform:scale(.86)translateY(14px)}60%{opacity:1;transform:scale(1.03)translateY(-3px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes floaty{0%,to{transform:translateY(0)rotate(-4deg)}50%{transform:translateY(-12px)rotate(5deg)}}@keyframes wiggle{0%,to{transform:rotate(-2.5deg)scale(1.02)}50%{transform:rotate(2.5deg)scale(1.02)}}@keyframes toastUp{0%{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%)}}@keyframes cardFlip{0%{opacity:0;transform:rotateY(90deg)scale(.9)}to{opacity:1;transform:rotateY(0)scale(1)}}@keyframes pulseRing{0%,to{box-shadow:0 0 #ff47578c}70%{box-shadow:0 0 0 14px #ff475700}}@keyframes fadeGray{to{filter:grayscale();opacity:.55}}@keyframes speakPulse{0%,to{box-shadow:0 0 #2ecc7199}70%{box-shadow:0 0 0 8px #2ecc7100}}.pop-in{animation:.45s cubic-bezier(.34,1.56,.64,1) both popIn}.wiggle-hover:hover{animation:.45s ease-in-out infinite wiggle}@media (prefers-reduced-motion:reduce){.pop-in,.wiggle-hover:hover,.role-card-inner,.hero-emojis span,.muting-banner{animation:none!important}}.hero{text-align:center;padding:30px 0 18px;position:relative}.hero h1{letter-spacing:.01em;text-shadow:0 4px #1e145040;margin:0 0 6px;font-size:3.2rem;font-weight:800}.hero p{color:#ffffffe6;margin:0;font-size:1.1rem;font-weight:600}.hero-emojis{justify-content:center;gap:26px;height:2.6rem;font-size:2.2rem;display:flex}.hero-emojis span{display:inline-block}.hero-emojis .float-a{animation:3.2s ease-in-out infinite floaty}.hero-emojis .float-b{animation:2.7s ease-in-out .4s infinite floaty}.hero-emojis .float-c{animation:3.6s ease-in-out .8s infinite floaty}.card{background:var(--card);color:var(--ink);box-shadow:0 7px 0 var(--shadow);border-radius:20px;margin-bottom:16px;padding:16px}.card-title{margin:0 0 12px;font-size:1.15rem}.hint{color:var(--ink-soft);margin:8px 0 0;font-size:.82rem;font-weight:600}.hint.center,.screen>.hint.center{text-align:center;color:#ffffffd9;display:block}.error-text{color:var(--pink);margin:8px 0 0;font-size:.85rem;font-weight:700}.section-title{text-shadow:0 3px #1e145033;margin:26px 0 12px;font-size:1.4rem}.scene-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;display:grid}.game-card{background:var(--card);color:var(--ink);box-shadow:0 7px 0 var(--shadow);cursor:pointer;border-radius:20px;flex-direction:column;transition:transform .18s,box-shadow .18s;display:flex;overflow:hidden}.game-card:hover{box-shadow:0 13px 0 var(--shadow);transform:translateY(-6px)rotate(-1deg)}.game-card.ghost{color:#fff;box-shadow:none;background:#ffffff24;border:2px dashed #ffffff73}.game-card.ghost .hint{color:#ffffffbf}.game-thumb{background:linear-gradient(135deg,#d9d3ff,#c2e8ff);place-items:center;height:110px;font-size:3rem;display:grid;overflow:hidden}.game-card.ghost .game-thumb{background:0 0}.game-thumb img{border-radius:50%;width:64px;height:64px}.game-body{flex-direction:column;gap:4px;padding:14px 16px 16px;display:flex}.game-body h3{margin:0;font-size:1.15rem}.game-meta{color:var(--accent);font-size:.82rem;font-weight:700}.game-card.ghost .game-meta{color:var(--yellow)}.join-cta{background:linear-gradient(120deg,#5865f2,#7b46f0);border-radius:18px;align-items:center;gap:16px;margin-bottom:16px;padding:16px 20px;display:flex;box-shadow:0 7px #1e14504d}.join-cta .join-emoji{font-size:2.4rem;animation:2.8s ease-in-out infinite floaty}.btn{color:var(--ink);cursor:pointer;background:#eef0fb;border:0;border-radius:14px;padding:11px 16px;font-family:"Baloo 2",Nunito,sans-serif;font-size:.95rem;font-weight:700;transition:transform 80ms,box-shadow 80ms,filter .15s;box-shadow:0 4px #1e14502e}.btn:hover:not(:disabled){filter:brightness(1.05)}.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 #0000}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--accent);color:#fff;box-shadow:0 4px 0 var(--accent-dark)}.btn.cta{background:var(--yellow);color:#5b4300;box-shadow:0 4px 0 var(--yellow-dark);font-size:1.02rem}.btn.danger{background:var(--blood);color:#fff;box-shadow:0 4px 0 var(--blood-dark)}.btn.danger-ghost{color:var(--pink-dark);background:#ffe3e8;box-shadow:0 4px #e0456359}.btn.success{background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green-dark)}.btn.sm{border-radius:11px;padding:7px 12px;font-size:.85rem}.btn.big{padding:15px 28px;font-size:1.15rem}.btn.discord{color:#fff;background:#5865f2;box-shadow:0 4px #4450c9}.input,.select{color:var(--ink);background:#f1f2fb;border:2px solid #dcdff2;border-radius:12px;outline:none;width:100%;padding:11px 14px;font-family:Nunito,sans-serif;font-size:.95rem;font-weight:700;transition:border-color .15s,box-shadow .15s}.input:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #6b4df633}.code-input{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-size:1.3rem;font-weight:800}.form-row{flex-direction:column;gap:6px;margin-bottom:12px;display:flex}.form-row label{color:var(--ink-soft);font-size:.85rem;font-weight:800}.user-bar{justify-content:flex-end;align-items:center;gap:10px;min-height:40px;display:flex}.user-avatar{border:2px solid #fff9;border-radius:50%;width:32px;height:32px}.user-name{font-size:.9rem;font-weight:800}.player-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;display:grid}.player-tile{background:var(--card);color:var(--ink);text-align:center;box-shadow:0 5px 0 var(--shadow);border:3px solid #0000;border-radius:16px;padding:12px 10px;transition:transform .18s,box-shadow .18s;position:relative}.player-tile.selectable{cursor:pointer}.player-tile.selectable:hover{box-shadow:0 9px 0 var(--shadow);transform:translateY(-4px)rotate(-1deg)}.player-tile.selected{border-color:var(--accent);animation:.45s ease-in-out infinite wiggle}.player-tile.dead{animation:.8s both fadeGray}.player-tile .avatar{background:linear-gradient(135deg,#d9d3ff,#c2e8ff);border-radius:50%;place-items:center;width:52px;height:52px;margin:0 auto 6px;font-size:1.6rem;display:grid;overflow:hidden}.player-tile .avatar img{object-fit:cover;width:100%;height:100%}.player-tile .pname{text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;font-weight:800;overflow:hidden}.player-tile .pmeta{color:var(--ink-soft);min-height:1em;font-size:.72rem;font-weight:700}.player-tile .badge-row{gap:4px;font-size:.85rem;display:flex;position:absolute;top:6px;right:6px}.player-tile .vote-count{background:var(--pink);color:#fff;min-width:26px;height:26px;box-shadow:0 3px 0 var(--pink-dark);border-radius:50%;place-items:center;font-size:.85rem;font-weight:800;display:grid;position:absolute;top:-8px;left:-8px}.dead-cross{pointer-events:none;place-items:center;font-size:2.2rem;display:grid;position:absolute;inset:0}.voice-dot{border-radius:50%;width:10px;height:10px;display:inline-block}.voice-dot.in{background:var(--green)}.voice-dot.out{background:#c3c8e8}.voice-dot.muted{background:var(--blood)}.role-card{perspective:900px;max-width:340px;margin:0 auto 18px}.role-card-inner{background:var(--card);color:var(--ink);text-align:center;box-shadow:0 8px 0 var(--shadow);border-radius:22px;padding:28px 22px;animation:.7s cubic-bezier(.34,1.56,.64,1) both cardFlip}.role-card .role-emoji{font-size:3.6rem}.role-card h2{margin:8px 0 4px;font-size:1.7rem}.role-card .team-tag{border-radius:999px;margin-bottom:10px;padding:4px 14px;font-size:.8rem;font-weight:800;display:inline-block}.role-card .team-tag.koy{color:var(--green-dark);background:#e3f7ea}.role-card .team-tag.vampir{color:var(--blood-dark);background:#ffe3e8}.role-card p{color:var(--ink-soft);margin:0;font-size:.95rem;font-weight:600}.phase-banner{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff24;border:2px solid #ffffff47;border-radius:18px;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px;padding:12px 18px;display:flex}.phase-banner .phase-name{font-family:"Baloo 2",sans-serif;font-size:1.3rem;font-weight:800}.phase-banner .phase-day{opacity:.85;font-size:.85rem;font-weight:700}.countdown-ring{flex:none;width:56px;height:56px;position:relative}.countdown-ring svg{transform:rotate(-90deg)}.countdown-ring circle{fill:none;stroke-width:5px}.countdown-ring .track{stroke:#ffffff40}.countdown-ring .bar{stroke:var(--yellow);stroke-linecap:round;transition:stroke-dashoffset .9s linear}.countdown-ring .num{font-variant-numeric:tabular-nums;place-items:center;font-size:.95rem;font-weight:800;display:grid;position:absolute;inset:0}.event-ticker{text-align:center;color:var(--ink);box-shadow:0 5px 0 var(--shadow);background:#ffffffeb;border-radius:14px;margin-bottom:14px;padding:10px 16px;font-family:"Baloo 2",sans-serif;font-size:1.05rem;font-weight:800}.muting-banner{text-align:center;background:#ff47572e;border:2px dashed #ff788299;border-radius:14px;margin-bottom:14px;padding:8px 14px;font-weight:800;animation:1.4s ease-out infinite pulseRing}@keyframes curtainIn{0%{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}20%{opacity:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}75%{opacity:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}to{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}}@keyframes curtainPop{0%{opacity:0;transform:scale(.7)translateY(20px)}35%{opacity:1;transform:scale(1.06)translateY(0)}70%{opacity:1;transform:scale(1)translateY(0)}to{opacity:0;transform:scale(1.04)translateY(-10px)}}.curtain{z-index:200;pointer-events:none;place-items:center;animation:1.8s both curtainIn;display:grid;position:fixed;inset:0}.curtain.night{background:radial-gradient(circle at 50% 40%,#2c1e5eeb,#0a081ef5)}.curtain.day{background:radial-gradient(circle at 50% 40%,#ffc93ceb,#ff8a4cf0)}.curtain.vote{background:radial-gradient(circle at 50% 40%,#6b4df6eb,#281964f2)}.curtain.hunter{background:radial-gradient(circle at 50% 40%,#ff4757eb,#5a0c14f5)}.curtain-inner{text-align:center;animation:1.8s cubic-bezier(.34,1.56,.64,1) both curtainPop}.curtain-emoji{font-size:5rem;display:block}.curtain-inner h2{text-shadow:0 5px #0000004d;margin:4px 0 6px;font-size:3rem}.curtain.day .curtain-inner h2,.curtain.day .curtain-inner p{color:#5b4300;text-shadow:none}.curtain-inner p{opacity:.9;margin:0;font-size:1.05rem;font-weight:700}.action-panel{background:var(--card);color:var(--ink);box-shadow:0 6px 0 var(--shadow);border-left:6px solid var(--accent);border-radius:18px;align-items:flex-start;gap:14px;margin-bottom:16px;padding:14px 18px;display:flex}.action-panel.witch{border-left-color:var(--green)}.action-panel.hunter{border-left-color:var(--blood)}.action-panel.sleep{border-left-color:var(--ink-soft);opacity:.9}.action-panel .ap-emoji{font-size:2rem;line-height:1}.action-panel .ap-body{flex:1}.action-panel .ap-body b{font-family:"Baloo 2",sans-serif;font-size:1.1rem}.action-panel .ap-body p{color:var(--ink-soft);margin:4px 0 0;font-size:.9rem;font-weight:600}.action-panel .ap-hint{font-style:italic;font-size:.82rem!important}.potion-row{flex-wrap:wrap;gap:8px;margin-top:10px;display:flex}.lover-note{text-align:center;background:#ff5c7a33;border:2px solid #ff5c7a80;border-radius:14px;max-width:340px;margin:0 auto 14px;padding:10px 14px;font-size:.9rem;font-weight:700}.game-log{background:#0f0a2880;border:2px solid #fff3;border-radius:18px;flex-direction:column;max-height:480px;display:flex;overflow:hidden}.game-log header{background:#ffffff1f;padding:10px 14px;font-family:"Baloo 2",sans-serif;font-weight:800}.log-lines{flex-direction:column;flex:1;gap:7px;padding:10px 12px;display:flex;overflow-y:auto}.log-line{gap:8px;font-size:.85rem;font-weight:600;line-height:1.35;display:flex}.log-line.bad{color:#ffc4cc}.log-line.good{color:#b6f5cd}.log-line.muted{opacity:.65}.log-day{background:#ffffff29;border-radius:6px;flex:none;place-items:center;min-width:26px;height:20px;font-size:.7rem;font-weight:800;display:grid}.game-layout{grid-template-columns:1fr 320px;align-items:start;gap:16px;display:grid}.game-main{min-width:0}.side-tabs{gap:6px;margin-bottom:8px;display:flex}.side-tabs button{color:#fff;cursor:pointer;background:#ffffff24;border:2px solid #0000;border-radius:12px;flex:1;padding:8px 10px;font-family:"Baloo 2",sans-serif;font-size:.85rem;font-weight:800;transition:background .15s,border-color .15s}.side-tabs button.active{background:#ffffff47;border-color:#ffffff80}.wolf-chat{background:#140a238c;border:2px solid #ff5c7a66;border-radius:18px;flex-direction:column;max-height:480px;display:flex;overflow:hidden}.wolf-chat header{background:#ff5c7a40;padding:10px 14px;font-family:"Baloo 2",sans-serif;font-weight:800}.wolf-chat .msgs{flex-direction:column;flex:1;gap:6px;padding:10px 12px;display:flex;overflow-y:auto}.wolf-chat .msg{font-size:.88rem;font-weight:600}.wolf-chat .msg b{color:var(--pink)}.wolf-chat form{gap:6px;padding:10px;display:flex}.wolf-chat .input{background:#ffffffeb}.lobby-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;display:flex}.lobby-code{letter-spacing:.25em;cursor:pointer;background:#ffffff29;border:2px dashed #ffffff73;border-radius:14px;padding:6px 16px;font-family:"Baloo 2",sans-serif;font-size:1.6rem;font-weight:800}.warn-banner{background:#ffc93c33;border:2px solid #ffc93c8c;border-radius:14px;margin-bottom:14px;padding:10px 14px;font-size:.9rem;font-weight:700}.settings-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 14px;margin-top:12px;display:grid}.settings-grid .form-row{margin-bottom:0}.modal-backdrop{z-index:100;background:#0f0a288c;place-items:center;display:grid;position:fixed;inset:0}.modal{background:var(--card);color:var(--ink);text-align:center;width:calc(100% - 40px);max-width:420px;box-shadow:0 10px 0 var(--shadow);border-radius:20px;padding:24px}.modal h3{margin:0 0 8px;font-size:1.3rem}.modal-text{color:var(--ink-soft);margin:0 0 16px;font-size:.9rem;font-weight:600}.toast{background:var(--ink);color:#fff;z-index:50;border-radius:999px;padding:12px 22px;font-weight:800;animation:.3s cubic-bezier(.34,1.56,.64,1) both toastUp;position:fixed;bottom:28px;left:50%;transform:translate(-50%);box-shadow:0 6px 20px #0000004d}.winner-banner{text-align:center;padding:20px 0}.winner-banner .big-emoji{font-size:4rem;animation:2.8s ease-in-out infinite floaty;display:inline-block}.winner-banner h2{text-shadow:0 4px #1e145040;margin:8px 0;font-size:2.2rem}@media (width<=860px){.game-layout{grid-template-columns:1fr}.game-side{order:2}.wolf-chat,.game-log{max-height:300px}}@media (width<=720px){.screen{padding:16px 12px 64px}.hero h1{font-size:2.3rem}.hero-emojis{gap:18px;font-size:1.8rem}.player-grid{grid-template-columns:repeat(2,1fr);gap:10px}.player-tile{padding:14px 8px}.player-tile .avatar{width:44px;height:44px;font-size:1.3rem}.player-tile .pname{font-size:.85rem}.player-tile.selectable{border-color:#6b4df673}.player-tile.selectable:hover{box-shadow:0 5px 0 var(--shadow);transform:none}.phase-banner{padding:10px 14px}.phase-banner .phase-name{font-size:1.1rem}.curtain-emoji{font-size:3.6rem}.curtain-inner h2{font-size:2.1rem}.action-panel{gap:10px;padding:12px 14px}.action-panel .ap-emoji{font-size:1.6rem}.scene-grid{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr 1fr}.join-cta{text-align:center;flex-direction:column}.lobby-head{flex-direction:column;align-items:flex-start}.btn.big{width:100%;padding:13px 20px;font-size:1.05rem}}@media (width<=330px){.player-grid,.settings-grid{grid-template-columns:1fr}}