body{color:#333;background-color:#fff;background-position:50%;background-size:cover;background-attachment:fixed;justify-content:center;align-items:center;height:100vh;margin:0;font-family:Inter,Arial,sans-serif;transition:background-color .5s,background-image .5s;display:flex;overflow:hidden}#app{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.reveal-text{margin:0;font-size:28px;font-weight:400;transition:color .5s}.role-text{letter-spacing:2px;opacity:0;margin-top:15px;font-size:48px;font-weight:900;transition:all .6s cubic-bezier(.175,.885,.32,1.275);display:block;transform:scale(.8)}.role-text.show{opacity:1;transform:scale(1)}.pin-container{justify-content:center;gap:12px;margin-top:40px;display:flex}.pin-box{text-align:center;color:#333;text-transform:uppercase;background:#ffffffe6;border:2px solid #ccc;border-radius:8px;outline:none;width:50px;height:60px;font-size:28px;transition:border-color .2s,box-shadow .2s}.pin-box:focus{border-color:#007bff;box-shadow:0 0 10px #007bff4d}.pin-box::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pin-box::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.form-container{flex-direction:column;align-items:center;gap:16px;margin-top:40px;display:flex}.nickname-input{text-align:center;border:2px solid #ccc;border-radius:8px;outline:none;width:236px;height:50px;font-size:20px;font-weight:700;transition:border-color .2s,box-shadow .2s}.nickname-input:focus{border-color:#007bff;box-shadow:0 0 10px #007bff4d}.nickname-input::placeholder{color:#aaa;font-size:16px;font-weight:400}.submit-btn{color:#fff;cursor:pointer;background-color:#007bff;border:none;border-radius:8px;width:240px;height:46px;font-size:16px;font-weight:700;transition:background-color .2s,transform .1s}.submit-btn:hover{background-color:#0056b3}.submit-btn:active{transform:scale(.98)}.wait-container{text-align:center;flex-direction:column;align-items:center;gap:20px;display:flex}.spinner{border:4px solid #f3f3f3;border-top-color:#007bff;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.wait-title{color:inherit;margin:0;font-size:24px;font-weight:700}.wait-sub{color:inherit;opacity:.7;margin:0;font-size:16px;animation:1.5s ease-in-out infinite pulse}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}body.theme-werewolf{color:#e2e8f0;background-color:#0b0202;background-image:linear-gradient(#0b0202cc,#0b0202f2),url(/bg/werewolf.png)}body.theme-werewolf .reveal-text{color:#8a8a8a}body.theme-werewolf .role-text{color:#dc3545}body.theme-minion{color:#e2e8f0;background-color:#1a0505;background-image:linear-gradient(#1a0505cc,#1a0505f2),url(/bg/werewolf.png)}body.theme-minion .reveal-text{color:#d97777}body.theme-minion .role-text{color:#ef4444;text-shadow:0 0 15px #ef444466}body.theme-villager{color:#e2e8f0;background-color:#0b1325;background-image:linear-gradient(#0b1325b3,#0b1325e6),url(/bg/villager.png)}body.theme-villager .reveal-text{color:#b0c4de}body.theme-villager .role-text{color:gold;text-shadow:0 0 15px #ffd70066}body.theme-doctor{color:#e2e8f0;background-color:#0d1b1e;background-image:linear-gradient(#0d1b1eb3,#0d1b1ee6),url(/bg/doctor.png)}body.theme-doctor .reveal-text{color:#a3b899}body.theme-doctor .role-text{color:#00f0ff;text-shadow:0 0 15px #00f0ff80}body.theme-seer{color:#e2e8f0;background-color:#1a0b2e;background-image:linear-gradient(#1a0b2eb3,#1a0b2ee6),url(/bg/seer.png)}body.theme-seer .reveal-text{color:#d8b4e2}body.theme-seer .role-text{color:#a855f7;text-shadow:0 0 15px #a855f780}body.theme-thief{color:#e2e8f0;background-color:#0b1a14;background-image:linear-gradient(#0b1a14bf,#0b1a14f2),url(/bg/thief.png)}body.theme-thief .reveal-text{color:#94a3b8}body.theme-thief .role-text{color:#10b981;text-shadow:0 0 15px #10b98180}.night-container{text-align:center;width:100%;max-width:320px;padding:20px}.moon-icon{margin-bottom:10px;font-size:40px}body.theme-werewolf .moon-icon{color:#fef08a;text-shadow:0 0 20px #fef08a4d}body.theme-minion .moon-icon{color:#ef4444;text-shadow:0 0 20px #ef44444d}body.theme-doctor .moon-icon{color:#00f0ff;text-shadow:0 0 20px #00f0ff4d}body.theme-seer .moon-icon{color:#a855f7;text-shadow:0 0 20px #a855f74d}body.theme-villager .moon-icon{color:gold;text-shadow:0 0 20px #ffd70066}body.theme-thief .moon-icon{color:#10b981;text-shadow:0 0 20px #10b9814d}.night-title{letter-spacing:1px;color:#fff;margin:0 0 5px;font-size:28px;font-weight:700}.night-subtitle{color:#94a3b8;margin:0 0 30px;font-size:15px}.custom-select-wrapper{-webkit-user-select:none;user-select:none;width:100%;position:relative}.select-trigger{cursor:pointer;color:#f3f4f6;background-color:#111827;border:2px solid #374151;border-radius:8px;justify-content:space-between;align-items:center;height:50px;padding:0 16px;font-size:16px;transition:all .2s;display:flex}.select-trigger:hover{border-color:#4b5563}body.theme-werewolf .select-trigger.open{border-color:#dc3545;box-shadow:0 0 10px #dc354533}body.theme-doctor .select-trigger.open{border-color:#00f0ff;box-shadow:0 0 10px #00f0ff33}body.theme-seer .select-trigger.open{border-color:#a855f7;box-shadow:0 0 10px #a855f733}body.theme-villager .select-trigger.open{border-color:gold;box-shadow:0 0 15px #ffd7004d}body.theme-thief .select-trigger.open{border-color:#10b981;box-shadow:0 0 15px #10b9814d}.arrow-icon{border:2px solid #9ca3af;border-width:0 2px 2px 0;padding:4px;transition:transform .2s;display:inline-block;transform:rotate(45deg)}.select-trigger.open .arrow-icon{margin-top:4px;transform:rotate(-135deg)}.select-options{z-index:100;opacity:0;pointer-events:none;text-align:left;background-color:#111827;border:2px solid #374151;border-radius:8px;max-height:220px;transition:all .2s;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow-y:auto;transform:translateY(-10px);box-shadow:0 10px 15px -3px #00000080}.select-options.show{opacity:1;pointer-events:auto;transform:translateY(0)}.option-item{cursor:pointer;color:#f3f4f6;border-bottom:1px solid #1f2937;justify-content:space-between;align-items:center;padding:12px 16px;font-size:15px;transition:background-color .15s;display:flex}.option-item:last-child{border-bottom:none}.option-item:hover{background-color:#1f2937}.option-item.disabled{cursor:not-allowed;pointer-events:none;color:#6b7280!important;background-color:#0b0f17!important}.status-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:4px;padding:2px 6px;font-size:11px;font-weight:700}.status-badge.werewolf{color:#ef4444;background-color:#dc354526}.status-badge.dead{color:#9ca3af;background-color:#9ca3af26}body.theme-day{color:#1e293b;background-color:#f8fafc;background-image:linear-gradient(#f8fafc80,#f8fafccc),url(/bg/day.png);animation:2.5s cubic-bezier(.25,1,.5,1) forwards morningSunrise}.summary-container{text-align:center;width:100%;max-width:400px;padding:20px}.sun-icon{color:#ea580c;text-shadow:0 0 25px #ea580c33;opacity:0;margin-bottom:24px;font-size:48px;animation:.8s ease-out forwards fadeInUp}.summary-title{letter-spacing:1px;color:#0f172a;opacity:0;margin:0 0 35px;font-size:32px;font-weight:900;animation:.8s ease-out .4s forwards fadeInUp}.summary-line{color:#334155;opacity:0;margin:0 0 16px;font-size:18px;line-height:1.8;animation:1s ease-out forwards fadeInUp;transform:translateY(10px)}.highlight-save{color:#0284c7;font-weight:700}.highlight-kill{color:#dc2626;font-weight:700}@keyframes morningSunrise{0%{background-color:#070b12}to{background-color:#f8fafc}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.discussion-container{text-align:center;width:100%;max-width:340px;padding:20px}.phase-title{letter-spacing:.5px;color:#0f172a;margin:0 0 8px;font-size:28px;font-weight:900}.phase-subtitle{color:#64748b;margin:0 0 35px;font-size:15px}.timer-wrapper{justify-content:center;align-items:center;width:160px;height:160px;margin:0 auto 40px;display:flex;position:relative}.timer-svg{width:160px;height:160px;position:absolute;top:0;left:0;transform:rotate(-90deg)}.track-ring{fill:none;stroke:#e2e8f0;stroke-width:8px}.progress-ring{fill:none;stroke:#10b981;stroke-width:8px;stroke-linecap:round;stroke-dasharray:452.39;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke .3s}.timer-text{font-variant-numeric:tabular-nums;color:#0f172a;font-size:38px;font-weight:700;transition:color .3s}.timer-text.warning,.progress-ring.warning{stroke:#f97316;color:#f97316}.timer-text.critical,.progress-ring.critical{stroke:#ef4444;color:#ef4444}.pulse-critical{animation:.5s ease-in-out infinite alternate textPulse}@keyframes textPulse{0%{transform:scale(1)}to{transform:scale(1.05)}}.win-title{text-transform:uppercase;margin-bottom:20px;font-size:40px;font-weight:900}.win-description{max-width:450px;padding:0 20px;font-size:18px;line-height:1.6}body.theme-werewolf .win-title{color:#dc3545}body.theme-werewolf .win-description{color:#b5a4a4}body.theme-villager .win-title{color:gold;text-shadow:0 0 15px #ffd70066}body.theme-villager .win-description{color:#cbd5e1}body.theme-doctor .win-title{color:#00f0ff;text-shadow:0 0 15px #00f0ff80}body.theme-doctor .win-description{color:#cbd5e0}.view-screen{opacity:0;pointer-events:none;transition:opacity .8s}.view-screen.active{opacity:1;pointer-events:auto;z-index:10;position:relative}.animate-fade-in{opacity:0;animation:.6s cubic-bezier(.16,1,.3,1) forwards slideUpFade;transform:translateY(20px)}.stagger-1{opacity:0;animation:.5s cubic-bezier(.16,1,.3,1) .1s forwards slideUpFade;transform:translateY(15px)}.stagger-2{opacity:0;animation:.5s cubic-bezier(.16,1,.3,1) .2s forwards slideUpFade;transform:translateY(15px)}.stagger-3{opacity:0;animation:.5s cubic-bezier(.16,1,.3,1) .3s forwards slideUpFade;transform:translateY(15px)}.stagger-4{opacity:0;animation:.5s cubic-bezier(.16,1,.3,1) .4s forwards slideUpFade;transform:translateY(15px)}.stagger-5{opacity:0;animation:.5s cubic-bezier(.16,1,.3,1) .5s forwards slideUpFade;transform:translateY(15px)}.float-anim{animation:4s ease-in-out infinite float}.svg-icon{filter:drop-shadow(0 4px 6px #0000004d);width:100%;height:100%}@keyframes slideUpFade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}to{transform:translateY(0)}}