:root{--bg:#07150f;--bg2:#0d2519;--card:rgba(10,31,22,.88);--line:rgba(211,244,226,.14);--text:#eefaf2;--muted:#a8c8b5;--good:#8de4ae;--wolf:#ff6b75;--gold:#f3cf6d;--blue:#8bc6ff;--shadow:0 20px 70px rgba(0,0,0,.38)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 20% 0,#153b27 0,transparent 34%),radial-gradient(circle at 90% 10%,#17243d 0,transparent 27%),linear-gradient(160deg,var(--bg),#030806 78%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body{min-height:100dvh;overflow-x:hidden}.app{width:min(980px,100%);margin:auto;padding:18px clamp(14px,3vw,30px) 42px;position:relative;z-index:2}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.eyebrow{font-size:.72rem;letter-spacing:.18em;color:var(--gold);font-weight:800}.topbar h1{margin:.15rem 0 0;font-size:clamp(1.8rem,5vw,3rem)}.room{min-width:96px;text-align:center;border:1px solid var(--line);background:rgba(0,0,0,.25);padding:8px 12px;border-radius:16px}.room span{display:block;font-size:.68rem;color:var(--muted);text-transform:uppercase}.room strong{letter-spacing:.16em;font-size:1.1rem}.card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(15,46,31,.88),rgba(6,22,15,.92));border-radius:22px;box-shadow:var(--shadow);backdrop-filter:blur(13px)}.status{padding:12px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:56px;margin-bottom:14px}.status .phase{font-weight:900}.status .sub{color:var(--muted);font-size:.88rem}.screen{display:grid;gap:14px}.panel{padding:clamp(16px,4vw,28px)}h2,h3,p{margin-top:0}.muted{color:var(--muted)}.hero{text-align:center;padding:34px 18px}.moon{font-size:clamp(4rem,18vw,8rem);filter:drop-shadow(0 0 26px rgba(225,236,255,.3));animation:float 4s ease-in-out infinite}.role-card{position:relative;overflow:hidden;text-align:center;padding:30px 20px}.role-card:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.06),transparent 24%);animation:spin 9s linear infinite}.role-card>*{position:relative}.role-icon{font-size:4.5rem;margin-bottom:10px}.role-good{box-shadow:0 0 0 1px rgba(141,228,174,.12),var(--shadow)}.role-wolf{box-shadow:0 0 0 1px rgba(255,107,117,.18),0 20px 80px rgba(126,0,13,.24)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.players{display:grid;gap:9px}.player{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:15px;background:rgba(255,255,255,.045);border:1px solid var(--line)}.player.dead{opacity:.48;filter:grayscale(.7)}.tag{font-size:.75rem;padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}.tag.good{color:var(--good)}.tag.wolf{color:var(--wolf)}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}.btn{appearance:none;border:0;border-radius:15px;padding:12px 16px;font-weight:850;font-size:1rem;cursor:pointer;transition:.18s transform,.18s filter,.18s opacity;color:#06130c;background:var(--good);box-shadow:0 9px 28px rgba(0,0,0,.23)}.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}.btn:active{transform:translateY(1px) scale(.99)}.btn.secondary{background:#d7e6dc}.btn.danger{background:var(--wolf);color:#270006}.btn.gold{background:var(--gold)}.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}.field{display:grid;gap:6px;margin:10px 0}.field label{font-size:.82rem;color:var(--muted);font-weight:700}.input,.select{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:#07120d;color:var(--text);outline:none;font-size:1rem}.input:focus,.select:focus{border-color:rgba(141,228,174,.55);box-shadow:0 0 0 3px rgba(141,228,174,.08)}.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}.choice{padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04);color:var(--text);font-weight:800;text-align:left;cursor:pointer}.choice:hover{border-color:rgba(243,207,109,.55);background:rgba(243,207,109,.07)}.choice.selected{border-color:var(--gold);box-shadow:0 0 0 2px rgba(243,207,109,.14) inset}.note{padding:12px 14px;border-radius:14px;background:rgba(139,198,255,.08);border:1px solid rgba(139,198,255,.16);color:#d8edff}.night{background:radial-gradient(circle at 50% 0,rgba(132,154,255,.12),transparent 35%),linear-gradient(180deg,rgba(7,14,29,.94),rgba(5,16,12,.94))}.day{background:radial-gradient(circle at 50% 0,rgba(243,207,109,.12),transparent 35%),linear-gradient(180deg,rgba(24,45,26,.95),rgba(6,22,15,.92))}.big{font-size:clamp(1.45rem,5vw,2.4rem);font-weight:950}.result{text-align:center;padding:30px}.winner{font-size:clamp(2rem,8vw,4rem);font-weight:1000}.wolves{color:var(--wolf)}.village{color:var(--good)}.progress{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--good),var(--gold));transition:width .35s ease}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;z-index:20;background:#f4fff7;color:#07150f;padding:10px 16px;border-radius:999px;font-weight:850;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.fog{position:fixed;inset:auto -30% 10%;height:40vh;background:radial-gradient(ellipse,rgba(206,235,222,.08),transparent 62%);filter:blur(16px);pointer-events:none;z-index:1;animation:fog 13s ease-in-out infinite alternate}.fog-b{bottom:42%;animation-duration:17s;opacity:.6}.hidden{display:none!important}.sep{height:1px;background:var(--line);margin:16px 0}.small{font-size:.82rem}.center{text-align:center}@keyframes float{50%{transform:translateY(-8px) rotate(2deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fog{from{transform:translateX(-8%)}to{transform:translateX(8%)}}@media(max-width:600px){.topbar{align-items:flex-start}.status{align-items:flex-start;flex-direction:column}.app{padding-top:12px}.btn{width:100%}.actions{display:grid;grid-template-columns:1fr}.choice-grid{grid-template-columns:1fr 1fr}.panel{border-radius:18px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}