*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,#17304b 0,#091422 45%,#050a11 100%);color:#f7edd7;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif}.app{max-width:520px;min-height:100vh;margin:auto;padding:calc(16px + env(safe-area-inset-top)) 15px 30px}header{display:flex;align-items:center;gap:12px;padding:6px 4px 12px}header h1{font-family:Georgia,serif;letter-spacing:4px;margin:0;font-size:25px}header p{margin:2px 0;color:#9fb0c3;font-size:12px}.logo{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#d8b35c,#74531f);color:#17110a;font-size:24px;box-shadow:0 0 24px #d7a94a44}.icon{margin-left:auto;width:38px;height:38px;border-radius:50%;padding:0}.panel{position:relative;background:linear-gradient(180deg,#172538ee,#0e1928ee);border:1px solid #8b6c364f;border-radius:22px;padding:20px;box-shadow:0 18px 50px #0008;margin:10px 0}.hero{text-align:center;padding-top:28px}.crest{font-size:54px;filter:drop-shadow(0 5px 12px #000)}h2{font-family:Georgia,"Songti SC",serif;margin:10px 0}.muted{color:#9eacbb;line-height:1.6}.hidden{display:none!important}input{width:100%;background:#07111d;border:1px solid #31445b;color:#fff;border-radius:13px;padding:14px;margin:7px 0;font-size:16px;outline:none}button{border:0;border-radius:13px;padding:13px 15px;background:#2a3c52;color:white;font-weight:750;font-size:15px}.primary{width:100%;background:linear-gradient(180deg,#e3bd67,#a97727);color:#211606;margin-top:9px;box-shadow:0 8px 20px #0006}.danger{background:linear-gradient(180deg,#a93e49,#68232c)}.good{background:linear-gradient(180deg,#3c8d78,#24594e)}.row{display:flex;gap:9px}.row>*{flex:1}.roomcode{font-size:36px;letter-spacing:8px;text-align:center;font-weight:900;color:#e5c16f}.player{display:flex;align-items:center;gap:10px;background:#091522;border:1px solid #26394e;border-radius:13px;padding:11px;margin:7px 0}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#253b53}.player b{flex:1}.tag{font-size:11px;color:#c6d1dc;background:#24364a;border-radius:99px;padding:5px 8px}.offline{opacity:.45}.rolecard{text-align:center;border:1px solid #987439;border-radius:18px;padding:24px 16px;background:radial-gradient(circle,#263d54,#0a1420)}.role{font-family:Georgia,"Songti SC",serif;font-size:38px;color:#efca75;margin:14px}.evil{color:#ff7b86}.goodtxt{color:#6ee7b7}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.stat{background:#08131f;border-radius:12px;padding:10px 5px;text-align:center}.stat span{display:block;color:#8fa0b1;font-size:11px}.stat b{font-size:18px}.missiondots{display:flex;justify-content:center;gap:10px;margin:17px 0}.dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#26374b;border:1px solid #496078}.dot.active{outline:2px solid #e5bd63}.dot.win{background:#246c5c}.dot.lose{background:#7a2d39}.selectable{cursor:pointer}.selected{border-color:#d7ad57;background:#263044;box-shadow:inset 0 0 0 1px #d7ad57}.sheet{position:fixed;inset:0;background:#000a;padding:70px 16px;z-index:5;overflow:auto}.sheet .panel{max-width:520px;margin:auto}.close{position:absolute;right:14px;top:14px;width:38px;height:38px;padding:0;font-size:24px}.history{font-size:13px;color:#aebaca;line-height:1.8;border-left:2px solid #80652f;padding-left:12px}.center{text-align:center}.big{font-size:46px;font-weight:900}#toast{position:fixed;left:50%;bottom:35px;transform:translateX(-50%);background:#000d;border:1px solid #ffffff22;padding:11px 17px;border-radius:99px;opacity:0;pointer-events:none;transition:.25s;z-index:9;white-space:nowrap}#toast.show{opacity:1}
:root{--gold:#e2bc67;--good:#53c9a8;--evil:#ef6d79}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:
radial-gradient(circle at 20% 15%,#d7b55a12,transparent 26%),
radial-gradient(circle at 80% 65%,#6f8fb512,transparent 24%);animation:ambient 8s ease-in-out infinite alternate}
@keyframes ambient{from{opacity:.55;transform:scale(1)}to{opacity:1;transform:scale(1.04)}}
.panel{animation:panelIn .34s ease both}
@keyframes panelIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.rolecard.revealAnim{animation:cardReveal .75s cubic-bezier(.2,.8,.2,1)}
@keyframes cardReveal{0%{transform:rotateY(90deg) scale(.9);opacity:0}60%{transform:rotateY(-8deg) scale(1.02);opacity:1}100%{transform:rotateY(0) scale(1)}}
.role{animation:glow 1.8s ease-in-out infinite alternate}
@keyframes glow{from{text-shadow:0 0 8px transparent}to{text-shadow:0 0 24px currentColor}}
.voteFlash,.missionFlash,.assassinFlash,.endingFlash{position:fixed;inset:0;z-index:8;display:grid;place-items:center;background:#03070de6;animation:flashIn .25s ease}
@keyframes flashIn{from{opacity:0}to{opacity:1}}
.resultCard{text-align:center;padding:34px 24px;border-radius:24px;background:linear-gradient(180deg,#1e3048,#0d1724);border:1px solid #846938;box-shadow:0 20px 70px #000}
.resultIcon{font-size:72px;animation:pop .55s cubic-bezier(.2,1.4,.3,1)}
@keyframes pop{0%{transform:scale(.2) rotate(-10deg);opacity:0}100%{transform:scale(1);opacity:1}}
.shake{animation:shake .55s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.crownPulse{animation:crownPulse 1.3s ease-in-out infinite}
@keyframes crownPulse{50%{transform:scale(1.12);filter:drop-shadow(0 0 8px #f0c665)}}
.audioBar{display:flex;gap:8px;align-items:center;justify-content:center;margin:10px 0}.audioBar button{padding:9px 12px}
.progressRing{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:12px auto;background:conic-gradient(var(--gold) var(--pct,0%),#243447 0);position:relative}
.progressRing::after{content:"";position:absolute;width:64px;height:64px;border-radius:50%;background:#0e1928}
.progressRing b{position:relative;z-index:1}
.confetti{position:fixed;top:-20px;width:8px;height:14px;background:#d8b35c;z-index:10;animation:fall 2.5s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.8}}

.qrWrap{display:grid;place-items:center;margin:12px auto}.qrWrap img{width:210px;max-width:70vw;border-radius:16px;border:1px solid #8e713d;background:#0c1624;padding:8px}
.countdown{height:58vh;display:grid;place-items:center;text-align:center}.countNum{font-size:120px;font-weight:900;color:#edc96f;text-shadow:0 0 50px #dcae4d;animation:countPulse 1s ease infinite}
@keyframes countPulse{0%{transform:scale(.65);opacity:.3}50%{transform:scale(1.1);opacity:1}100%{transform:scale(.9);opacity:.8}}
.kick{flex:0 0 auto;width:auto;padding:7px 9px;font-size:12px;background:#5f2630}.installHint{font-size:12px;color:#92a3b5;text-align:center;margin-top:10px}

.roleMedia{position:fixed;inset:0;z-index:30;background:#02060c;display:grid;place-items:center}.roleMedia video{width:100%;height:100%;object-fit:cover}.roleMedia button{position:absolute;right:18px;top:calc(18px + env(safe-area-inset-top));width:auto;background:#0009;border:1px solid #ffffff33}
.presetGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preset{border:1px solid #344b63;background:#0a1624;padding:12px;border-radius:12px;text-align:left}.preset.active{border-color:#e0b85f;box-shadow:inset 0 0 0 1px #e0b85f}.preset b{display:block;color:#efca75;margin-bottom:4px}.switchRow{display:flex;justify-content:space-between;align-items:center;background:#0a1624;padding:12px;border-radius:12px;margin-top:10px}.switchRow input{width:22px;height:22px;margin:0}
.ladyCard{border-color:#7cbcc0;background:linear-gradient(180deg,#123a43,#0d2029)}

.rolePortrait{width:100%;max-width:320px;aspect-ratio:3/4;object-fit:cover;border-radius:22px;border:1px solid #d2ad5a66;box-shadow:0 24px 60px #0009;margin:10px auto;display:block;animation:portraitIn .85s cubic-bezier(.15,.9,.25,1)}
@keyframes portraitIn{0%{transform:translateY(35px) scale(.88);opacity:0;filter:blur(8px)}100%{transform:none;opacity:1;filter:none}}
.roleAura{position:absolute;inset:0;border-radius:22px;pointer-events:none;box-shadow:inset 0 0 70px #d8b25b18;animation:aura 2s ease-in-out infinite alternate}
@keyframes aura{to{box-shadow:inset 0 0 120px #d8b25b35}}
.introScene{position:fixed;inset:0;z-index:40;background:radial-gradient(circle,#1a3046,#04090f 70%);display:grid;place-items:center;text-align:center;padding:30px}
.introRound{width:270px;height:270px;border-radius:50%;border:4px solid #c6a654;box-shadow:0 0 60px #d5ac4a55,inset 0 0 50px #000;display:grid;place-items:center;animation:roundSpin 7s linear infinite}
@keyframes roundSpin{to{transform:rotate(360deg)}}
.introRound::after{content:"♜";font-size:100px;color:#eacb78;transform:rotate(var(--counter,0deg))}
.introText{margin-top:28px;font-family:Georgia,serif;font-size:28px;letter-spacing:3px;color:#f0d27e;animation:introFade 1.2s ease both}
@keyframes introFade{from{opacity:0;transform:translateY(15px)}to{opacity:1}}
.mapPanel{overflow:hidden}.questMap{width:100%;border-radius:18px;display:block;opacity:.92}.mapMarker{position:absolute;width:26px;height:26px;border-radius:50%;background:#f0c96b;box-shadow:0 0 25px #f0c96b;animation:markerPulse 1s ease-in-out infinite alternate}
@keyframes markerPulse{to{transform:scale(1.35);box-shadow:0 0 45px #f0c96b}}
.mapWrap{position:relative}.mapTrail{position:absolute;inset:0;pointer-events:none}
.cgScene{position:fixed;inset:0;z-index:50;background:#02060b;display:grid;place-items:center;animation:cgIn .6s ease}.cgScene img{width:100%;height:100%;object-fit:cover}.cgCaption{position:absolute;bottom:9vh;left:25px;right:25px;text-align:center;text-shadow:0 4px 18px #000}.cgCaption h2{font-size:36px}.cgScene button{position:absolute;top:calc(18px + env(safe-area-inset-top));right:18px;width:auto;background:#0009}
@keyframes cgIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.questTransition{position:fixed;inset:0;z-index:35;background:#07101bdd;display:grid;place-items:center;text-align:center}.questHorse{font-size:84px;animation:ride 1.2s ease-in-out infinite alternate}@keyframes ride{to{transform:translateX(22px) translateY(-7px)}}.questTransition h2{color:#e8c56c}

.goalBox{margin:14px 0;padding:12px 14px;border-radius:14px;background:#08131f;border-left:3px solid #e1ba62;text-align:left}.goalBox b{color:#efca75}
.modeBar{display:grid;grid-template-columns:1fr 1fr;gap:8px}.modeBtn.active{border:1px solid #e4bd65;background:#2c3441}.difficulty{letter-spacing:2px;color:#e9be60;font-size:12px}
.voteWall{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.voteCard{padding:12px;border-radius:12px;background:#0a1624;border:1px solid #2f4358;display:flex;align-items:center;gap:8px}.voteCard.yes{border-color:#3b8b76}.voteCard.no{border-color:#8b3c49}.voteMark{margin-left:auto;font-size:20px}
.waitReconnect{background:#5c431a;color:#ffe39a}.privacyButtons{display:grid;grid-template-columns:1fr 1fr;gap:10px}.privacyButtons button{background:#1c2a3b;border:1px solid #53667b;color:#fff}.privacyButtons button.dangerChoice{background:#1c2a3b;border-color:#53667b}
.recapRound{background:#08131f;border-radius:14px;padding:12px;margin:10px 0}.recapTeam{font-size:13px;color:#b5c0cc;margin:5px 0}.recapVotes{font-size:12px;color:#91a2b4}.modeHint{font-size:12px;color:#95a5b6;margin-top:6px}.playerCount{font-size:13px;color:#e7c675}
#roomExit{position:fixed;top:12px;right:12px;z-index:30}.exitRoom{width:auto;background:rgba(18,28,42,.92);border:1px solid #9c4b55;color:#ffb1b8;padding:7px 10px;font-size:12px}