:root{color-scheme:dark;--bg:#100c16;--panel:rgba(29,22,37,.92);--line:#3a2d43;--text:#f8f1fa;--muted:#aa9eaf;--orange:#ff8a24;--orange2:#ffb45c;--green:#79d6a1;--red:#ff6e70}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -20%,#39213c 0,transparent 55%),var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;overflow-x:hidden}.ambient{position:fixed;pointer-events:none;filter:blur(90px);opacity:.16;border-radius:50%;z-index:-1}.ambient-one{width:260px;height:260px;background:#e65d19;top:25%;left:-150px}.ambient-two{width:300px;height:300px;background:#713d91;right:-170px;bottom:5%}.shell{width:min(680px,calc(100% - 32px));margin:0 auto;padding:34px 0 22px}.brand{display:flex;align-items:center;gap:13px;margin:0 0 28px 4px}.brand-mark{font-size:38px;filter:drop-shadow(0 0 18px #f8792b55)}.brand h1{font:700 19px 'Space Grotesk',sans-serif;letter-spacing:5px;margin:0}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--orange2);margin:0 0 9px}.brand .eyebrow{font-size:9px;margin-bottom:3px;color:#a99aaa}.panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 24px 70px #0005;backdrop-filter:blur(14px)}h2{font:700 clamp(27px,6vw,38px)/1.12 'Space Grotesk',sans-serif;letter-spacing:-1.3px;margin:0 0 13px}h2 span{color:var(--orange)}h3{font:700 17px 'Space Grotesk',sans-serif;margin:0}.muted{color:var(--muted);line-height:1.6}.hero{padding:36px}.hero>h2{font-size:clamp(38px,9vw,56px);margin:16px 0}.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px}.join-box{border-left:1px solid var(--line);padding-left:22px;display:flex;flex-direction:column;gap:10px}.join-box label,label{font-size:12px;font-weight:700;color:#d7cbdc}.button{border:0;border-radius:12px;padding:14px 18px;font:800 12px 'DM Sans',sans-serif;letter-spacing:1px;cursor:pointer;transition:transform .16s,filter .16s,opacity .16s}.button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}.button:disabled{opacity:.35;cursor:not-allowed}.primary{color:#25130a;background:linear-gradient(135deg,var(--orange2),var(--orange));box-shadow:0 8px 24px #ff85252b}.secondary{background:#34283c;color:var(--text);border:1px solid #51405a}.danger{background:#54272c;color:#ffdfe0;border:1px solid #87434a}.full{width:100%;margin-top:16px}input{width:100%;border:1px solid #594761;border-radius:11px;background:#17111e;color:var(--text);padding:14px 13px;font:600 15px 'DM Sans',sans-serif;outline:none}input:focus{border-color:var(--orange)}.join-box input{letter-spacing:2px;text-transform:uppercase}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.pill{border:1px solid #725033;background:#3b291d;color:#ffbd79;padding:7px 10px;border-radius:30px;font-size:9px;font-weight:800;letter-spacing:1px}.room-share{display:flex;align-items:center;justify-content:space-between;background:#17111e;border:1px solid var(--line);border-radius:16px;padding:16px;margin:20px 0 26px}.room-code{font:700 34px 'Space Grotesk',sans-serif;letter-spacing:5px;color:var(--orange2)}.room-share img{width:112px;height:112px;border-radius:8px;background:white;padding:5px}.players-heading{margin:24px 0 12px}.players-heading h3 span{font-size:12px;color:var(--muted);margin-left:5px}.player-list{display:flex;flex-direction:column;gap:8px}.player-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#211a29;border:1px solid #382d40;border-radius:11px}.player-name{font-weight:700;font-size:14px}.player-state{font-size:10px;font-weight:800;letter-spacing:.7px;color:var(--muted)}.player-state.ready{color:var(--green)}.player-state.revealed{color:var(--orange2)}.footnote{font-size:11px;color:var(--muted);text-align:center;margin:15px 0 0}.message{color:var(--orange2);font-size:12px;min-height:18px;margin-top:12px}.back-link{background:none;border:0;color:var(--muted);padding:0;margin-bottom:24px;cursor:pointer;font:600 13px 'DM Sans'}.role-panel{text-align:center;padding:24px 4px 4px}.role-seal{width:76px;height:76px;border:1px solid #725033;border-radius:50%;display:grid;place-items:center;margin:0 auto 24px;font:700 38px 'Space Grotesk';color:var(--orange2);background:#3a251c}
.role-panel .role-seal{width:112px;height:112px;margin-bottom:24px;background:transparent;border:0;font-size:0}
.role-avatar{width:96px;height:96px;border-width:3px;box-shadow:0 6px 22px #0008}.role-icon{font-size:54px;margin:18px}.role-result{margin-top:25px;padding:25px 16px;border:1px solid #604a35;border-radius:16px;background:linear-gradient(160deg,#33231f,#211a29)}.role-result.traitor{border-color:#9a4247;background:linear-gradient(160deg,#492126,#211a29)}.role-result.innocent{border-color:#4b765f;background:linear-gradient(160deg,#20392e,#211a29)}.role-result h2{font-size:32px}.role-result p{margin-bottom:8px}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#5a292d;border:1px solid #a84b50;color:#fff;padding:12px 18px;border-radius:12px;max-width:calc(100% - 30px);font-size:13px;box-shadow:0 8px 30px #0008}.hidden{display:none!important}footer{text-align:center;color:#746a79;font-size:11px;padding:24px 0}footer span{color:var(--orange);padding:0 5px}.small{font-size:11px}
@media(max-width:560px){.shell{padding-top:22px}.panel,.hero{padding:22px}.home-actions{grid-template-columns:1fr}.join-box{border-left:0;border-top:1px solid var(--line);padding:20px 0 0}.room-code{font-size:27px;letter-spacing:3px}.room-share img{width:94px;height:94px}.section-head{align-items:flex-start}}



/* Round table */
.roundtable-panel{margin-top:26px;padding:22px;border:1px solid #59402f;border-radius:16px;background:linear-gradient(155deg,#2b2028,#1b1521)}
.roundtable-panel h3{margin:10px 0}
.roundtable-panel>h2{font-size:clamp(24px,5vw,32px);margin:16px 0 10px}
.vote-progress{margin:18px 0 8px}
.progress-label{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px;margin-bottom:9px}
.progress-label strong{color:var(--orange2);font-size:13px}
.progress-track{height:9px;border-radius:20px;background:#120e17;border:1px solid #493849;overflow:hidden}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#bd5b24,var(--orange2));border-radius:20px;transition:width .25s ease}
.candidate-list{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.candidate-button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 16px;border:1px solid #59445f;border-radius:12px;background:#261d2d;color:var(--text);font:700 15px 'DM Sans',sans-serif;text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.candidate-button:hover{transform:translateY(-1px);border-color:var(--orange);background:#382735}
.candidate-arrow{color:var(--orange2);font-size:20px}
.roundtable-result{margin-top:18px;padding:18px;border:1px solid #715038;border-radius:13px;background:linear-gradient(150deg,#38271f,#211a29)}
.roundtable-result h3{font-size:18px;line-height:1.35;margin:8px 0}
.result-kicker{font-size:10px;letter-spacing:2px;font-weight:900;color:var(--orange2)}
.result-votes{display:flex;flex-direction:column;gap:7px;margin-top:15px}
.result-vote-row{display:flex;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:8px;background:#17111e;color:var(--muted);font-size:12px}
.result-vote-row strong{color:var(--text)}
.spectator-banner{margin-top:20px;padding:22px;text-align:center;border:1px solid #725033;border-radius:16px;background:linear-gradient(155deg,#33251e,#211a29)}
.spectator-banner .role-seal{font-size:30px}
.spectator-banner h2{font-size:28px}
.exiled-row{opacity:.62}
.exiled-row .player-name{text-decoration:line-through}
.exiled-state{color:var(--orange2)}
#player-roundtable-status{display:inline-block;margin:8px 0}
#player-roundtable .message{padding:12px;border:1px solid #59402f;border-radius:10px;background:#241b28}
@media(max-width:560px){.roundtable-panel{padding:17px}.progress-label{font-size:10px}}

/* Secret night phase */
.night-panel{margin-top:26px;padding:22px;border:1px solid #55415f;border-radius:16px;background:linear-gradient(155deg,#211b32,#171321)}
.night-panel h2{font-size:clamp(26px,5vw,34px);margin:12px 0 8px}
.night-heading{text-align:center;margin:4px 0 18px}
.night-moon{font-size:42px;color:#c6b3e8;text-shadow:0 0 24px #9c7bd866;margin-bottom:8px}
.night-result{margin-top:18px;padding:18px;border:1px solid #625078;border-radius:13px;background:linear-gradient(150deg,#292239,#1a1724)}
.night-result h3{font-size:18px;line-height:1.4;margin:8px 0}
.traitor-team{display:flex;flex-direction:column;gap:7px;margin-top:16px;padding:13px 14px;border:1px solid #78434c;border-radius:11px;background:#321f2a;font-size:12px}
.traitor-team strong{color:#ffb1b2;letter-spacing:1px;text-transform:uppercase;font-size:10px}
.traitor-team span{color:var(--text);font-weight:700}
.night-panel .candidate-list{margin-top:18px}
@media(max-width:560px){.night-panel{padding:17px}}


/* Shared night question and suspense reveal */
.night-question{margin-top:18px;padding:16px;border:1px solid #625078;border-radius:13px;background:#211b2d}
.night-question h3{font-size:18px;line-height:1.4;margin:7px 0 14px}
.night-question .candidate-list{margin-top:0}
.night-countdown{margin-top:18px;padding:22px 14px;text-align:center;border:1px solid #8a6b9d;border-radius:14px;background:radial-gradient(circle,#40304d,#211b32);font:800 22px 'Space Grotesk',sans-serif;color:#e5cfff;letter-spacing:1px;box-shadow:0 0 28px #9c7bd822}


/* Secret abilities */
.ability-settings{margin:20px 0;padding:18px;border:1px solid #59445f;border-radius:14px;background:linear-gradient(150deg,#211b2d,#191521)}
.ability-settings h3{margin:0 0 12px}
.ability-select{width:100%;margin:8px 0 10px;padding:12px;border:1px solid #59445f;border-radius:10px;background:#211b2d;color:var(--text);font:600 14px 'DM Sans',sans-serif}
.ability-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}
.ability-options input{accent-color:var(--orange2)}
.ability-panel{margin-top:18px;padding:16px;border:1px solid #78623e;border-radius:13px;background:linear-gradient(145deg,#30251f,#211b2b)}
.ability-panel h3{margin:7px 0}
.ability-panel .candidate-list{margin-top:12px}
.candidate-button.is-selected{border-color:var(--orange2);background:#493323}
#player-ability-controls{margin-top:12px}
@media(max-width:560px){.ability-options{grid-template-columns:1fr}.ability-settings{padding:15px}}


.ability-feedback{
  display:block;
  padding:14px 16px;
  margin-top:14px;
  border:1px solid var(--orange2);
  border-radius:10px;
  background:rgba(210,137,65,.16);
  color:var(--text);
  font-size:14px;
  font-weight:700;
  line-height:1.5;
  text-align:center;
  box-shadow:0 0 0 2px rgba(210,137,65,.08);
}


/* Ability selection cards */
.ability-legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin:14px 0;color:var(--muted);font-size:11px;font-weight:700}
.ability-legend span{display:flex;align-items:center;gap:7px}
.ability-legend-icon{font-style:normal;font-size:16px}
.ability-legend-icon.innocent{color:#a7d9b9}
.ability-legend-icon.traitor{color:#ff9a9d}
.ability-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.ability-card{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:13px;border:1px solid #493849;border-radius:12px;background:#1b1623;transition:border-color .15s,opacity .15s}
.ability-card.innocent{border-left:3px solid #659b79}
.ability-card.traitor{border-left:3px solid #a64d55}
.ability-card-icon{flex:0 0 32px;font-size:25px;line-height:1.2;text-align:center}
.ability-card-content{flex:1;min-width:0}
.ability-card-content>strong{display:block;font-size:13px;color:var(--text)}
.ability-card-content>p{min-height:48px;margin:5px 0 10px;color:var(--muted);font-size:11px;line-height:1.45}
.ability-disable{display:inline-flex;align-items:center;gap:6px;color:#e8b1b2!important;font-size:10px!important;font-weight:800!important;letter-spacing:.4px;cursor:pointer}
.ability-disable input{width:15px;height:15px;margin:0;accent-color:var(--red)}
.ability-card:has(.ability-disable input:checked){opacity:.52;border-style:dashed}
.ability-selection-summary{margin:14px 0 0;padding:10px 12px;border-radius:9px;background:#17111e;color:var(--orange2);font-size:11px;line-height:1.5;text-align:center}
@media(max-width:560px){.ability-options{grid-template-columns:1fr}.ability-card-content>p{min-height:0}}

/* Connection state and offline-player controls */
.player-row-main{display:flex;flex-direction:column;gap:4px;min-width:0}.disconnected-state{color:#f0a0a0!important}.player-remove{padding:8px 10px;font-size:10px;letter-spacing:.5px;white-space:nowrap}.player-row:has(.player-remove){border-color:#694047}

.trust-signal{margin-top:18px;padding:17px;border-radius:12px;border:1px solid var(--line);background:#211a29}.trust-signal h3{font-size:16px;line-height:1.35;margin:7px 0}.trust-signal p:last-child{font-size:13px;line-height:1.5;color:var(--muted);margin:0}.trust-signal.suspected{border-color:#8c4b4b;background:linear-gradient(145deg,rgba(112,39,39,.25),#211a29)}.trust-signal.suspected .eyebrow{color:#e59b9b}.trust-signal.clear{border-color:#557b64;background:linear-gradient(145deg,rgba(45,103,67,.22),#211a29)}.trust-signal.clear .eyebrow{color:#9bc9a9}


.no-abilities-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.75rem 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface, rgba(128, 128, 128, 0.06));
  font-weight: 650;
}

.no-abilities-toggle input {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}

#ability-options.disabled {
  opacity: 0.45;
}


/* Cat avatars */
.cat-avatar{display:inline-block;flex:0 0 auto;width:46px;height:46px;border-radius:50%;background-image:url('/images/cat-avatars.webp');background-size:500% 400%;background-repeat:no-repeat;border:2px solid rgba(255,255,255,.24);box-shadow:0 3px 12px #0006;vertical-align:middle}
.cat-01{background-position:0% 0%}.cat-02{background-position:25% 0%}.cat-03{background-position:50% 0%}.cat-04{background-position:75% 0%}.cat-05{background-position:100% 0%}
.cat-06{background-position:0% 33.333%}.cat-07{background-position:25% 33.333%}.cat-08{background-position:50% 33.333%}.cat-09{background-position:75% 33.333%}.cat-10{background-position:100% 33.333%}
.cat-11{background-position:0% 66.667%}.cat-12{background-position:25% 66.667%}.cat-13{background-position:50% 66.667%}.cat-14{background-position:75% 66.667%}.cat-15{background-position:100% 66.667%}
.cat-16{background-position:0% 100%}.cat-17{background-position:25% 100%}.cat-18{background-position:50% 100%}.cat-19{background-position:75% 100%}.cat-20{background-position:100% 100%}
.player-row{gap:11px}.player-row .player-row-main{flex:1}.player-row>.player-name{flex:1}
.avatar-picker-label{margin:20px 0 10px;color:#d7cbdc;font-size:12px;font-weight:700}
.avatar-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#17111e}
.avatar-choice{display:grid;place-items:center;min-width:0;padding:4px;border:2px solid transparent;border-radius:50%;background:transparent;cursor:pointer;transition:transform .15s,border-color .15s}
.avatar-choice .cat-avatar{width:100%;height:auto;aspect-ratio:1;border-width:2px}
.avatar-choice:hover{transform:scale(1.06)}.avatar-choice.selected{border-color:var(--orange2);background:#493323;box-shadow:0 0 0 2px #ffb45c33}
@media(max-width:420px){.avatar-picker{gap:6px;padding:8px}.cat-avatar{width:40px;height:40px}}

.candidate-player,.result-player{display:inline-flex;align-items:center;gap:10px;min-width:0}.small-avatar{width:34px;height:34px}.result-vote-row{align-items:center}.result-player{font-weight:700;color:var(--text)}