@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');
:root{font-family:'Be Vietnam Pro',system-ui,sans-serif;color:#edf1ff;background:#080b1c;font-size:13px;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer;padding:11px 16px;border-radius:12px;border:1px solid #b7a7ec38;color:#e9eaff;background:#282342;transition:transform .2s,box-shadow .2s,filter .2s;font-weight:600}button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 22px #827aff40;filter:brightness(1.15)}button:disabled{opacity:.4;cursor:default}input,select{padding:12px;border-radius:12px;border:1px solid #8c88be4d;background:#0d122a;color:#fff;width:100%;outline:none}input:focus,select:focus{border-color:#9df6ff}input[type=checkbox]{width:auto}button:focus-visible{outline:2px solid #8decff;outline-offset:3px}h1,h2,h3{margin:0 0 14px}h2{font-size:22px}h3{font-size:15px}p{color:#adb5d4;line-height:1.85}small{display:block;color:#93a2c0;font-size:10px;line-height:1.8;margin-top:14px}label{display:block;font-size:11px;color:#bec5df;margin:12px 0}label input,label select{margin-top:8px}.cosmos{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 15% 20%,#25346699,transparent 55%),radial-gradient(ellipse at 90% 80%,#67296955,transparent 50%),#070a1b;transition:background 1s}.nebula{position:absolute;inset:-20%;background:radial-gradient(ellipse at 40% 45%,#8d59cf25,transparent 45%),radial-gradient(ellipse at 70% 80%,#14b3bc25,transparent 45%);filter:blur(40px);animation:nebula 35s ease-in-out infinite alternate}.stars{position:absolute;inset:-100px;background-image:radial-gradient(1px 1px at 30px 50px,#daeeff,transparent),radial-gradient(2px 2px at 220px 150px,#bbadff,transparent),radial-gradient(1px 1px at 80px 130px,#fff,transparent);background-size:220px 200px,480px 340px,370px 270px;opacity:.65;animation:stars 90s linear infinite}.moon{position:absolute;right:-50px;top:14%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle at 25% 30%,#c2b7ef,#8070b3 45%,#35205d 80%);box-shadow:inset -55px -30px 65px #0a0725,0 0 90px #b887ef25;opacity:.7;transition:background 1s}body[data-phase=day] .cosmos,body[data-phase=vote] .cosmos{background:radial-gradient(ellipse at 35% 20%,#26447599,transparent 70%),#0b1126}body[data-phase=day] .moon{background:radial-gradient(circle at 25% 30%,#ffe6aa,#dfac6a 50%,#58374f)}header{max-width:1440px;margin:auto;display:flex;align-items:center;gap:22px;padding:24px 32px;border-bottom:1px solid #ac9cee25;background:#0a102144;backdrop-filter:blur(12px)}.brand{text-decoration:none;color:white;font-weight:800;font-size:19px;letter-spacing:1px;white-space:nowrap}.brand span{color:#9ceaff}nav{display:flex;gap:10px;margin-left:auto}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:700;color:#98dceb}main{max-width:1380px;margin:auto;padding:34px 28px}.panel{padding:24px;border:1px solid #b9adf12b;border-radius:23px;background:linear-gradient(145deg,#1c2444df,#171329db);backdrop-filter:blur(16px);box-shadow:0 22px 45px #0003}.primary{background:linear-gradient(120deg,#a1f0ff,#bc9dff);color:#15172e;border:0;box-shadow:0 0 25px #837dfa35}#welcome{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:65px;align-items:center;min-height:75vh}h1{font-size:clamp(35px,4.3vw,62px);letter-spacing:-2.5px;line-height:1.22;margin:23px 0}h1 em{font-style:normal;background:linear-gradient(100deg,#9fedff,#b6a0ff,#f6a1d3);background-clip:text;color:transparent}.hero p{max-width:460px;font-size:15px}.hero-cards{display:flex;gap:18px;padding:28px 18px;margin:8px 0}.hero-cards .role-card:first-child{rotate:-12deg}.hero-cards .role-card:last-child{rotate:12deg}.hero-cards .role-card{animation:float 5s ease-in-out infinite}.hero-cards .role-card:nth-child(2){animation-delay:-2s}.hero-tags{display:flex;flex-wrap:wrap;gap:12px;font-size:10px;color:#b6bdde}.entrance h2{margin:13px 0}.entrance button:not(.avatar-option){width:100%;margin:8px 0}.divider{text-align:center;font-size:10px;color:#8e9ab9;margin:20px 0}.avatars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin:18px 0}.avatar-option{padding:9px 0;font-size:24px;background:#141a31}.avatar-option[aria-pressed=true]{border-color:#91edff;box-shadow:0 0 18px #71d2ff33;background:#253f56}.role-card{--glow:#af91ff;flex-shrink:0;width:118px;height:178px;position:relative;overflow:hidden;border-radius:17px;border:1px solid #ffffff8a;background:radial-gradient(circle at 50% 35%,#bb8aff45,transparent 60%),linear-gradient(145deg,#313054,#15152c);box-shadow:inset 0 0 0 5px #ffffff08,0 15px 25px #0007,0 0 26px color-mix(in srgb,var(--glow) 20%,transparent);isolation:isolate}.role-card:before{content:'';position:absolute;inset:10px;border:1px solid #ffffff4d;border-radius:10px;background:linear-gradient(120deg,transparent 25%,#fff2 45%,transparent 46%)}.role-card:after{content:'';position:absolute;width:85px;height:85px;border-radius:50%;border:1px solid #ffffff50;left:50%;top:42%;translate:-50% -50%;box-shadow:0 0 0 6px #ffffff08}.role-icon{position:absolute;top:42%;left:50%;translate:-50% -50%;font-size:51px;filter:drop-shadow(0 0 17px var(--glow));z-index:1}.role-title{position:absolute;top:73%;left:5px;right:5px;text-align:center;font-size:10px;font-weight:800;text-transform:uppercase}.role-team{position:absolute;top:86%;left:0;right:0;text-align:center;font-size:7px;letter-spacing:2px;color:#ddd6f2}.role-corner{position:absolute;left:15px;top:12px;font-size:12px;color:#e9e3ff}.crimson{--glow:#ff527f;background:radial-gradient(circle at 50% 30%,#f4487c66,transparent 65%),linear-gradient(145deg,#56233f,#1d132a)}.azure{--glow:#85c9ff;background:radial-gradient(circle at 50% 30%,#4e8af466,transparent 65%),linear-gradient(145deg,#263b61,#152036)}.teal{--glow:#66efd1;background:radial-gradient(circle at 50% 30%,#24af9266,transparent 65%),linear-gradient(145deg,#254d54,#0f2133)}.amber{--glow:#ffdb8b;background:radial-gradient(circle at 50% 30%,#c3904566,transparent 65%),linear-gradient(145deg,#614457,#1d1b36)}.rose{--glow:#f5a3de;background:radial-gradient(circle at 50% 30%,#a34f9f66,transparent 65%),linear-gradient(145deg,#573060,#211b38)}.role-card.hidden-role{background:linear-gradient(140deg,#29294b,#131930)}.room-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}.room-bar h2{letter-spacing:5px;color:#c5f6ff;margin:6px 0 0}.room-bar #occupancy{margin-left:auto;color:#adb8d5;font-size:12px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px}.main-column,aside{min-width:0}.players{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:22px}.player{position:relative;padding:15px 6px;border-radius:17px;text-align:center;background:linear-gradient(140deg,#25264bea,#12192be6);border:1px solid #9793c235}.player.dead{filter:grayscale(1);opacity:.5}.player.gm{border-color:#ffe0a56b}.player.self{border-color:#99e3ff8a}.player.selected{box-shadow:0 0 25px #d166e966;border-color:#f69add}.player .avatar{font-size:31px;display:grid;place-items:center;width:48px;height:48px;margin:auto auto 8px;border:1px solid #c3aeff50;border-radius:50%;background:radial-gradient(circle,#8062b244,#222546)}.player strong{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player small{margin:5px 0 0;font-size:9px}.player button{padding:4px 7px;font-size:9px;margin-top:7px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.section-heading h2{margin:8px 0}.config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.check{display:flex;align-items:center;gap:8px}.check input{margin:0}.role-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.role-count{padding:12px;border:1px solid #aaa1d728;border-radius:12px;background:#10182c}.role-count label{margin:0}.role-count input{padding:8px}.role-count span{display:block;font-size:22px;margin-bottom:8px}.help{font-size:11px;color:#94aaca}.arena{position:relative;overflow:hidden;isolation:isolate;border-color:#98b0f05a;box-shadow:inset 0 0 80px #a27cff12,0 0 65px #8564ec13;min-height:370px;transition:box-shadow 1s}.orbit{position:absolute;inset:55px -30px;border:1px solid #afa1ed20;border-radius:50%;transform:rotate(-14deg);z-index:-1}.phase-head{display:flex;align-items:center;gap:16px}.phase-head h2{margin:5px 0 0;font-size:20px}#phase-symbol{font-size:44px;color:#d3bdff;text-shadow:0 0 22px #af8bff}#timer{margin-left:auto;font-size:25px;color:#a4e9ff;font-weight:700;white-space:nowrap}#phase-description{font-size:12px}.arena-content{display:grid;grid-template-columns:135px minmax(0,1fr);gap:25px;align-items:start;margin-top:25px}.mission h3{margin:8px 0}.mission p{font-size:12px}.targets{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.target{display:flex;align-items:center;gap:7px;font-size:11px;padding:10px}.target.selected{border-color:#ffb6e7;background:#563558;box-shadow:0 0 20px #f08be12b}.target span{font-size:20px}#witch-controls{display:flex;gap:10px;flex-wrap:wrap}.chosen{color:#a0e8ff!important;font-size:11px}.private-note{padding:9px 12px;border:1px solid #bbaaec40;border-radius:10px;color:#ddd1ff;background:#4b336c33;margin:8px 0;font-size:11px}.notes p{font-size:11px}aside .panel{margin-bottom:20px}.chat-panel select{width:115px;padding:7px;font-size:10px}.messages{height:235px;overflow-y:auto;padding-right:5px}.message{margin:10px 0;background:#0c142640;border-radius:10px;padding:10px}.message strong{font-size:10px;color:#d2c0ff}.message p{margin:5px 0 0;font-size:12px;overflow-wrap:anywhere}.chat-panel form{display:flex;gap:8px;margin-top:16px}.chat-panel form input{min-width:0;font-size:11px}#chat-hint{font-size:10px;color:#86bfd0}#events{font-size:11px;max-height:250px;overflow:auto}#events p{padding-bottom:9px;border-bottom:1px solid #ffffff0a;margin:8px 0}#gm-panel{border-top:1px solid #d7b87245;margin-top:25px;padding-top:20px}#gm-roles,#final-roles{display:flex;flex-wrap:wrap;gap:8px}.role-chip{border:1px solid #a598c740;border-radius:9px;padding:8px;font-size:11px;background:#222038}#gm-progress{font-size:12px}.result{margin-top:20px;text-align:center;border-color:#cf9bf970;background:radial-gradient(ellipse at top,#663c7155,#161d35);animation:reveal .7s ease-out}#result-icon{font-size:58px;margin-bottom:15px}.result h2{font-size:28px}.result button{margin-top:22px}#final-roles{justify-content:center}.role-reveal{animation:flip .8s ease-out}.death-effect{animation:hit .55s ease-out}#fx{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}.particle{position:fixed;width:6px;height:6px;border-radius:50%;background:#b6ebff;box-shadow:0 0 10px currentColor}.phase-veil{position:fixed;inset:0;background:radial-gradient(circle,#66328670,#050616de);pointer-events:none}.beam{position:fixed;height:3px;background:linear-gradient(90deg,transparent,#e892ff);transform-origin:left center;box-shadow:0 0 15px #d075ff}#toast{position:fixed;bottom:25px;left:50%;translate:-50% 0;z-index:60;padding:14px 22px;border-radius:12px;background:#eaf3ff;color:#171f38;max-width:92vw;box-shadow:0 15px 35px #0006}#banner{position:fixed;top:20%;left:50%;translate:-50% 0;z-index:50;max-width:90vw;width:max-content;text-align:center;border:1px solid #c99fffa0;border-radius:20px;padding:23px 35px;background:#151831ef;box-shadow:0 0 65px #9a61ff55;font-size:22px;font-weight:800;pointer-events:none;animation:reveal .4s ease-out}dialog{max-width:94vw;max-height:90vh;width:850px;border:1px solid #a28cd46b;border-radius:24px;background:linear-gradient(135deg,#222b4a,#21152f);padding:28px;color:#eef0ff;box-shadow:0 0 100px #6333ac44}dialog::backdrop{background:#020517ce;backdrop-filter:blur(7px)}#guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:24px}.guide-item{display:flex;gap:18px;padding:17px;border-radius:17px;border:1px solid #c2b0eb25;background:#11152bd9;align-items:center}.guide-item .role-card{width:88px;height:135px}.guide-item .role-icon{font-size:38px}.guide-item .role-card:after{width:60px;height:60px}.guide-item .role-title{font-size:8px}.guide-item .role-team{font-size:6px}.guide-item p{font-size:11px;margin:0}.guide-item h3{margin-bottom:7px}#profile-dialog{width:400px}.controls{display:flex;gap:12px;justify-content:center}footer{text-align:center;padding:28px;font-size:9px;color:#6e789f}[hidden]{display:none!important}
@keyframes stars{to{translate:0 100px}}@keyframes nebula{to{transform:rotate(15deg) scale(1.1)}}@keyframes float{50%{translate:0 -12px}}@keyframes reveal{from{opacity:0;transform:translateY(25px) scale(.95)}to{opacity:1;transform:none}}@keyframes flip{from{opacity:.2;transform:perspective(500px) rotateY(90deg)}to{opacity:1;transform:perspective(500px) rotateY(0)}}@keyframes hit{20%,60%{translate:-5px 0}40%,80%{translate:5px 0}}
@media(max-width:1050px){header>.eyebrow{display:none}.game-layout{grid-template-columns:minmax(0,1fr) 265px}#welcome{gap:30px}.players{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:800px){.game-layout{grid-template-columns:minmax(0,1fr)}aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}aside .chat-panel{grid-row:span 2}#welcome{grid-template-columns:minmax(0,1fr);gap:30px}.hero{padding-top:20px}.hero-cards{justify-content:center}.hero h1{font-size:46px}#guide-grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:500px){header{padding:17px 14px;gap:9px}.brand{font-size:13px;letter-spacing:.3px}nav{gap:5px}nav button{padding:8px;font-size:10px}main{padding:24px 14px}.hero h1{font-size:36px;letter-spacing:-1.5px}.hero-cards{gap:12px;padding:22px 10px}.hero-cards .role-card{width:96px;height:150px}.hero-cards .role-card .role-icon{font-size:43px}.hero-cards .role-card:after{width:65px;height:65px}.hero-cards .role-title{font-size:8px}.panel{padding:19px}.players{grid-template-columns:repeat(3,minmax(0,1fr))}.player{padding:11px 5px}.player .avatar{font-size:26px;width:42px;height:42px}.room-bar{gap:10px}.room-bar button{padding:9px 12px;font-size:11px}.room-bar #occupancy{margin-left:0}.arena-content{grid-template-columns:100px minmax(0,1fr);gap:15px}.arena-content .role-card{width:100px;height:156px}.role-icon{font-size:43px}.role-card:after{width:68px;height:68px}.role-title{font-size:8px}.role-team{font-size:6px}.phase-head h2{font-size:16px}#phase-symbol{font-size:32px}#timer{font-size:18px}.config-grid{gap:0 12px}.role-counts{grid-template-columns:repeat(2,minmax(0,1fr))}aside{display:block}dialog{padding:20px}.guide-item{padding:12px;gap:12px}.result h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Sky theme */
:root{color:#123956;background:#89d2fa;color-scheme:light}
body{isolation:isolate}.cosmos{z-index:-1;background:linear-gradient(155deg,#4baaf0 0%,#94d8fc 48%,#e2f6ff 100%)}
body[data-phase=day] .cosmos,body[data-phase=vote] .cosmos{background:linear-gradient(155deg,#56b9f5,#a8e3ff 55%,#f0fbff)}
body[data-phase=night] .cosmos,body[data-phase=witch] .cosmos,body[data-phase=cupid] .cosmos{background:linear-gradient(155deg,#3983c9,#80bcec 50%,#c2e5fa)}
.sky-haze{position:absolute;inset:0;background:radial-gradient(ellipse at 85% 10%,#fff9,transparent 55%);pointer-events:none}
.sun{position:absolute;right:9%;top:110px;width:115px;height:115px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffbe0,#ffe480 65%,#ffc35c);box-shadow:0 0 45px 15px #ffec9b70,0 0 110px 45px #fff3b14d;animation:sun-breathe 7s ease-in-out infinite;transition:opacity 1s}
.sun-rays{position:absolute;inset:-32px;border-radius:50%;background:repeating-conic-gradient(from 0deg,transparent 0deg 20deg,#fff4bd55 20deg 23deg,transparent 23deg 45deg);mask-image:radial-gradient(circle,transparent 47%,#000 50%,transparent 72%);animation:sun-turn 70s linear infinite}
.cloud{position:absolute;width:230px;height:65px;border-radius:100px;background:linear-gradient(#fffffff5,#ffffffb3);box-shadow:0 15px 32px #2d8fc014;animation:cloud-travel 65s linear infinite;left:-320px}
.cloud:before,.cloud:after{content:'';position:absolute;background:inherit;border-radius:50%;bottom:20px}.cloud:before{width:100px;height:100px;left:36px}.cloud:after{width:125px;height:125px;right:28px}
.cloud-one{top:17%;animation-delay:-18s;opacity:.75}.cloud-two{top:48%;width:300px;height:76px;animation-duration:95s;animation-delay:-52s;opacity:.5}.cloud-three{top:78%;animation-duration:80s;animation-delay:-8s;opacity:.7}.cloud-four{top:8%;animation-duration:110s;animation-delay:-78s;transform:scale(.6);opacity:.5}
header{background:#e8f8ff70;border-color:#fff7;box-shadow:0 4px 25px #2186bd0d}.brand{color:#154c79}.brand span{color:#137cc0}.eyebrow{color:#24688e}h1 em{background-image:linear-gradient(100deg,#1265b6,#1a90be,#135c9f)}p{color:#345a76}small,.help,label,.hero-tags,.divider,footer{color:#426680}.panel{background:linear-gradient(145deg,#ffffffed,#edf8ffdb);border-color:#ffffffce;box-shadow:0 18px 55px #226da922}.primary{background:linear-gradient(110deg,#1688dd,#36b8ec);color:white;box-shadow:0 8px 22px #178edb35}button{color:#21597e;background:#edf8ffdb;border-color:#82b8d44d}button:hover:not(:disabled){box-shadow:0 7px 22px #1b87b52b;filter:brightness(1.03)}input,select{background:#f8fcff;color:#173f5f;border-color:#b5d7e9}input:focus,select:focus{border-color:#1a8dc9;box-shadow:0 0 0 3px #42b2e51c}button:focus-visible{outline-color:#157ebc}
.avatar-option{background:#e1f1fc}.avatar-option[aria-pressed=true]{background:#b7e5ff;border-color:#2595d0;box-shadow:0 0 0 3px #249fde18}.role-card{color:#fff;box-shadow:inset 0 0 0 5px #ffffff08,0 15px 25px #276a9830,0 0 26px color-mix(in srgb,var(--glow) 20%,transparent)}
.room-bar h2{color:#136ca7}.room-bar #occupancy{color:#355d7c}.player{background:linear-gradient(140deg,#f8fdffef,#dcefffeb);border-color:#ffffffb5}.player.self{border-color:#168fc9;box-shadow:0 5px 18px #178bd322}.player.gm{border-color:#cf9f36}.player .avatar{background:radial-gradient(circle,#c4eaff,#effaff);border-color:#93cdea}.player small{color:#48708c}.player.selected{border-color:#4798d9;box-shadow:0 0 20px #4798d944}.role-count{background:#eaf6ff;border-color:#bbdceb}.arena{border-color:#fff;box-shadow:inset 0 0 80px #54b3e808,0 18px 55px #226da922}.orbit{border-color:#4996c21a}#phase-symbol{color:#1988c2;text-shadow:0 0 22px #91d6ff}#timer{color:#1477b2}.target.selected{background:#cbeaff;border-color:#3399d7;box-shadow:0 0 20px #58b2e22b}.chosen{color:#176d9b!important}.private-note{background:#dff1ff;border-color:#a7d2ec;color:#285d7e}.message{background:#e3f1fb}.message strong{color:#1b6eab}#chat-hint{color:#3c728f}#events p{border-color:#4e99c522}.role-chip{background:#e7f4fc;border-color:#afd2e8;color:#315a75}.result{background:radial-gradient(ellipse at top,#fff0b6,#effaff);border-color:#fff}.guide-item{background:#eef8ff;border-color:#c2dfef}dialog{background:linear-gradient(135deg,#f9fdff,#e4f4ff);color:#123956;border-color:#fff;box-shadow:0 25px 90px #145a8655}dialog::backdrop{background:#1c5c8c70}.phase-veil{background:radial-gradient(circle,#b5e8ff55,#26639a8c)}#banner{background:#f2fbfff5;color:#1b5279;border-color:#fff;box-shadow:0 0 65px #60b9ef55}
@keyframes cloud-travel{from{left:-340px}to{left:calc(100% + 100px)}}@keyframes sun-breathe{50%{transform:scale(1.07);box-shadow:0 0 60px 20px #ffec9b90,0 0 130px 50px #fff3b166}}@keyframes sun-turn{to{transform:rotate(360deg)}}
@media(max-width:500px){.sun{width:75px;height:75px;top:105px;right:5%;opacity:.7}.cloud{scale:.65}.cloud-two{top:58%}}
@media(prefers-reduced-motion:reduce){.cloud,.sun,.sun-rays{animation:none!important}.cloud-one{left:10%}.cloud-two{left:65%}.cloud-three{left:25%}.cloud-four{left:80%}}