@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Poppins:wght@400;600;700&display=swap');
:root,[data-theme=dark]{--bg:#0b0615;--bg2:#2a1050;--card:rgba(30,18,52,.78);--in:#120a22;--tx:#f3eaff;--mut:#a894c9;--a:#ff2d55;--b:#a78bfa;--g:#35e0a1;--y:#ffb020;--bd:rgba(255,255,255,.13)}
[data-theme=light]{--bg:#f7f0ff;--bg2:#ffd6e7;--card:rgba(255,255,255,.88);--in:#fff;--tx:#25123f;--mut:#6b5a8a;--a:#e11d48;--b:#7c3aed;--g:#059669;--y:#d97706;--bd:rgba(40,10,80,.16)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Poppins,system-ui,sans-serif;color:var(--tx);background:linear-gradient(135deg,var(--bg),var(--bg2),var(--bg));background-size:300% 300%;animation:bg 16s ease infinite;padding:12px 12px 50px;overflow-x:hidden}
main{max-width:600px;margin:auto}
@keyframes bg{50%{background-position:100% 50%}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes flick{0%,100%{text-shadow:0 0 12px var(--a),0 0 30px var(--a)}45%{opacity:.8}50%{text-shadow:0 0 3px var(--a)}55%{opacity:1}}
@keyframes pulse{50%{transform:scale(1.08)}}
@keyframes fall{to{transform:translateY(115vh) rotate(720deg)}}
@keyframes pop{from{transform:scale(.3);opacity:0}}
@keyframes glow{50%{box-shadow:0 0 28px var(--rc,var(--b))}}
h1,h2,.ttl{font-family:Creepster,cursive;letter-spacing:2px;font-weight:400}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.top h1{margin:0;font-size:2.1rem;color:var(--a);animation:flick 4s infinite;display:flex;align-items:center;gap:8px}
.top img{height:40px;border-radius:8px}
h2{margin:0 0 8px;font-size:1.45rem;color:var(--b)}
.card{background:var(--card);backdrop-filter:blur(10px);border:1px solid var(--bd);border-radius:18px;padding:14px;margin:12px 0;animation:rise .5s both;box-shadow:0 8px 30px rgba(139,92,246,.2)}
input,select{width:100%;padding:13px;margin:5px 0;border-radius:12px;border:1px solid var(--bd);background:var(--in);color:var(--tx);font:inherit;font-size:16px}
input:focus,select:focus{outline:2px solid var(--b)}
.btn{width:100%;padding:13px 16px;margin:5px 0;border:0;border-radius:12px;background:linear-gradient(90deg,var(--a),#b5179e);color:#fff;font:600 16px Poppins,sans-serif;cursor:pointer;transition:.2s;box-shadow:0 4px 18px rgba(255,45,85,.35)}
.btn:active{transform:scale(.96)}.btn.g{background:linear-gradient(90deg,#059669,var(--g))}.btn.y{background:linear-gradient(90deg,#d97706,var(--y))}.btn.p{background:linear-gradient(90deg,#6d28d9,#a78bfa)}
.btn.s{width:auto;padding:8px 12px;font-size:14px;margin:2px;flex:1}
.tg{width:60px;height:30px;border-radius:30px;border:1px solid var(--bd);background:var(--in);position:relative;cursor:pointer;padding:0;flex:none}
.tg:after{content:'🌙';position:absolute;top:2px;left:3px;width:24px;height:24px;line-height:24px;font-size:14px;text-align:center;border-radius:50%;background:var(--b);transition:.3s}
[data-theme=light] .tg:after{content:'☀️';left:32px;background:var(--y)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}.row>.btn,.row>input,.row>select{flex:1}
.pill{padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600;background:var(--in);border:1px solid var(--bd)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.stats span{background:var(--in);border-radius:12px;padding:8px 2px;text-align:center;font-weight:700;font-size:1.1rem;border:1px solid var(--bd)}
.stats small{display:block;font-size:10px;color:var(--mut);font-weight:400}
.ban{text-align:center;padding:11px;border-radius:12px;background:var(--in);border:1px dashed var(--b);margin:8px 0;animation:pop .5s both}
.timer{font-size:3rem;text-align:center;font-family:Creepster;color:var(--y);animation:pulse 1s infinite}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fc{perspective:900px;height:var(--h,96px);cursor:default;animation:rise .5s both}
.fc .in{position:relative;height:100%;transition:transform .8s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.fc.on .in{transform:rotateY(180deg)}
.fc .f,.fc .k{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:16px;padding:8px;font-weight:600;word-break:break-word;background:var(--card);border:2px solid var(--bd)}
.fc .k{transform:rotateY(180deg);border-color:var(--rc,var(--b));animation:glow 2.5s infinite}
.fc small{color:var(--mut);font-weight:400;font-size:12px}
.fc.tap .f{border-color:var(--b);cursor:pointer}.fc.sel .f{border-color:var(--a);background:rgba(255,45,85,.22);box-shadow:0 0 18px var(--a)}.fc.dead{opacity:.45;filter:grayscale(.8)}
.fc.big .f{background:linear-gradient(145deg,#3b0764,#9f1239);color:#fff;font-size:1.6rem;cursor:pointer;animation:glow 2s infinite}.fc.big .k{padding:14px;justify-content:flex-start;overflow:auto}
.fc.big p{margin:4px 0;font-size:14px;color:var(--tx);font-weight:400}.fc.big h2{margin:6px 0 0;color:var(--rc)}
.av{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--rc,var(--b));background:var(--in);overflow:hidden;font-size:22px;flex:none}
.av.lg{width:92px;height:92px;font-size:46px}.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}.av b{font-weight:400}
.pr{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0}
.pc2{background:var(--in);border:1px solid var(--bd);border-radius:14px;padding:10px;margin:8px 0}
.err{color:var(--a);text-align:center}.mut{color:var(--mut);font-size:13px}
.win{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;animation:pop .6s both;background:radial-gradient(circle,rgba(0,0,0,.6),rgba(0,0,0,.95))}
.win .ttl{font-size:clamp(3rem,16vw,6rem);line-height:1;margin:0 0 14px;animation:pulse 1.6s infinite}
.win.mafia .ttl{color:var(--a);text-shadow:0 0 30px var(--a),0 0 60px #7f1d1d}.win.civilian .ttl{color:var(--g);text-shadow:0 0 30px var(--g),0 0 60px #065f46}
.win p{color:#fff;font-size:1.2rem;margin:4px}.win .btn{max-width:320px}
.bit{position:fixed;top:-40px;z-index:60;font-size:26px;animation:fall linear forwards;pointer-events:none}