:root{
  --bg:#08070d;
  --panel:#12101b;
  --panel2:#1b1728;
  --card:#171321;
  --text:#f7f4ff;
  --muted:#aaa1bf;
  --line:rgba(255,255,255,.11);
  --accent:#ff315a;
  --accent2:#7c4dff;
  --good:#35e08b;
  --bad:#ff4b4b;
  --warn:#ffd166;
  --shadow:0 18px 60px rgba(0,0,0,.38);
  --radius:20px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{
  background:
    radial-gradient(circle at 15% 10%, rgba(255,49,90,.25), transparent 30%),
    radial-gradient(circle at 86% 0%, rgba(124,77,255,.22), transparent 32%),
    linear-gradient(135deg, #07060b 0%, #12101b 55%, #07060b 100%);
}
a{color:inherit}
button,input,select,textarea{font:inherit}
button{border:0;cursor:pointer}
.wrap{width:min(1220px, calc(100% - 24px));margin:0 auto;padding:18px 0 32px}
.hero{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin-bottom:16px}
.logo{display:flex;gap:12px;align-items:center}
.logo-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;box-shadow:0 0 24px rgba(255,49,90,.35);font-weight:900}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(28px,5vw,60px);letter-spacing:-.05em;line-height:.9;text-transform:uppercase}
h2{font-size:20px;letter-spacing:-.02em}
h3{font-size:15px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.sub{color:var(--muted);font-size:15px;margin-top:6px}.small{font-size:12px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:999px;font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.code-badge{font-size:28px;color:#fff;padding:10px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(255,49,90,.22),rgba(124,77,255,.18));border:1px solid rgba(255,255,255,.15);font-weight:1000;letter-spacing:.08em}
.panel{background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;backdrop-filter:blur(12px)}
.grid-3{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:14px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.stack{display:grid;gap:12px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.between{display:flex;align-items:center;justify-content:space-between;gap:10px}.center{text-align:center}.hide{display:none!important}
label{display:grid;gap:6px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
input,select,textarea{width:100%;border:1px solid var(--line);background:rgba(0,0,0,.22);color:var(--text);border-radius:14px;padding:12px 12px;outline:0}
input:focus,textarea:focus{border-color:rgba(255,49,90,.6);box-shadow:0 0 0 4px rgba(255,49,90,.12)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid var(--line);color:var(--text);font-weight:900;min-height:44px;transition:.16s transform,.16s background,.16s border-color;text-decoration:none}.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.14)}.btn.primary{background:linear-gradient(135deg,var(--accent),#b61dff);border-color:transparent;color:white}.btn.good{background:linear-gradient(135deg,#12b96f,#2dd4bf);color:#06110c;border:0}.btn.bad{background:linear-gradient(135deg,#ff4b4b,#ff315a);color:white;border:0}.btn.warn{background:linear-gradient(135deg,#ffd166,#ff9f1c);color:#1b1000;border:0}.btn.ghost{background:transparent}.btn.block{width:100%}.btn.sm{padding:8px 10px;min-height:34px;font-size:12px;border-radius:11px}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.btn-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.player-list{display:grid;gap:8px}.player{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:rgba(0,0,0,.18);border:1px solid var(--line);border-left:6px solid var(--player-color,var(--accent));padding:10px;border-radius:14px}.player .name{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px}.player .name:before{content:"";width:10px;height:10px;border-radius:999px;background:var(--player-color,var(--accent));box-shadow:0 0 14px var(--player-color,var(--accent));flex:0 0 auto}.player.active-turn{border-color:rgba(255,49,90,.85);border-left-color:var(--player-color,var(--accent));box-shadow:0 0 0 3px rgba(255,49,90,.12),0 0 24px var(--player-color,var(--accent))}.player.out{opacity:.45;filter:grayscale(.6)}.player.inactive{opacity:.5;filter:grayscale(.5);border-style:dashed}.player .meta{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.pill{font-size:11px;font-weight:900;border-radius:999px;padding:5px 8px;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--muted)}.pill.good{color:#092015;background:rgba(53,224,139,.9);border:0}.pill.bad{color:white;background:rgba(255,75,75,.9);border:0}.pill.warn{color:#241400;background:rgba(255,209,102,.95);border:0}.pill.purple{color:white;background:rgba(124,77,255,.8);border:0}.pill.gray{color:white;background:rgba(128,128,145,.75);border:0}
.status-card{min-height:120px;display:grid;place-items:center;text-align:center;border-radius:18px;padding:18px;background:radial-gradient(circle at 50% 0%, rgba(255,49,90,.18), transparent 55%),rgba(0,0,0,.18);border:1px solid var(--line)}.big-status{font-size:clamp(26px,5vw,74px);font-weight:1000;letter-spacing:-.06em;text-transform:uppercase;line-height:.9}.screen .big-status{font-size:clamp(36px,8vw,112px)}.glow{animation:glow 1.8s ease-in-out infinite alternate}@keyframes glow{from{text-shadow:0 0 8px rgba(255,49,90,.25)}to{text-shadow:0 0 26px rgba(255,49,90,.85)}}
.timer{font-size:clamp(42px,9vw,130px);font-weight:1000;letter-spacing:-.08em;line-height:.9}.timer.danger{color:var(--accent);animation:pulse .75s infinite alternate}@keyframes pulse{to{transform:scale(1.03);filter:brightness(1.25)}}
.secret-card{position:relative;overflow:hidden;min-height:240px;border-radius:24px;border:1px solid rgba(255,255,255,.14);padding:24px;background:linear-gradient(135deg,rgba(255,49,90,.16),rgba(124,77,255,.14)),rgba(0,0,0,.24);box-shadow:var(--shadow);display:grid;place-items:center;text-align:center;user-select:none}.secret-hold{touch-action:none;user-select:none}.hold-visible{animation:secretPop .12s ease-out both}@keyframes secretPop{from{transform:scale(.97);filter:brightness(.75)}to{transform:scale(1);filter:brightness(1)}}.secret-card:before{content:"";position:absolute;inset:-60px;background:repeating-linear-gradient(120deg,transparent 0 18px,rgba(255,255,255,.035) 18px 20px);opacity:.7}.secret-card>*{position:relative}.secret-word{font-size:clamp(42px,13vw,100px);font-weight:1000;letter-spacing:-.06em;text-transform:uppercase}.role-lie{color:#fff;text-shadow:0 0 30px rgba(255,49,90,.75)}.vote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.vote-btn{min-height:82px;font-size:18px;border-left:8px solid var(--player-color,var(--accent));box-shadow:0 10px 30px rgba(0,0,0,.18)}.screen-wrap{width:min(1480px,calc(100% - 28px));margin:0 auto;padding:22px 0}.screen-top{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}.screen-stage{margin-top:20px;display:grid;gap:18px}.screen-players{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.screen-player{min-height:78px;display:grid;place-items:center;text-align:center;padding:12px;border-radius:18px;background:rgba(255,255,255,.065);border:1px solid var(--line);border-left:8px solid var(--player-color,var(--accent));font-weight:1000;font-size:clamp(18px,2.5vw,34px);box-shadow:0 10px 30px rgba(0,0,0,.2)}.screen-player.turn{background:linear-gradient(135deg,rgba(255,49,90,.8),rgba(124,77,255,.68));border-color:var(--player-color,var(--accent));border-left-color:var(--player-color,var(--accent));box-shadow:0 0 0 4px rgba(255,255,255,.10),0 0 32px var(--player-color,var(--accent));animation:float 1.1s ease-in-out infinite alternate}.screen-player.out{opacity:.28;text-decoration:line-through}.screen-player.inactive{opacity:.38;filter:grayscale(.6);border-style:dashed}.screen-player small{display:block;font-size:12px;opacity:.75;margin-top:4px}@keyframes float{to{transform:translateY(-5px)}}
.vote-bars{display:grid;gap:10px}.bar{display:grid;grid-template-columns:170px 1fr auto;gap:10px;align-items:center}.bar-track{height:22px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px;min-width:3px}.tabbar{display:flex;gap:8px;position:sticky;top:0;z-index:5;background:rgba(8,7,13,.84);backdrop-filter:blur(10px);padding:8px 0}.tab{flex:1}.mobile-section{display:none}.mobile-section.on{display:grid}.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#fff;color:#09070f;border-radius:999px;padding:10px 14px;font-weight:900;box-shadow:var(--shadow);z-index:30;max-width:min(620px,calc(100% - 28px));text-align:center}.top-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:980px){.grid-3,.grid-2{grid-template-columns:1fr}.hero,.screen-top{grid-template-columns:1fr}.top-links{justify-content:flex-start}.btn-row,.btn-row-3{grid-template-columns:1fr}.wrap{width:min(100% - 16px,760px);padding-top:10px}.panel{padding:12px;border-radius:16px}.bar{grid-template-columns:1fr}.code-badge{font-size:22px}.screen-wrap{width:calc(100% - 14px);padding:10px 0}.screen-players{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}.screen-player{min-height:58px;font-size:18px}.hero.compact h1{font-size:28px}.hero.compact .logo-mark{width:34px;height:34px;border-radius:10px}.hero.compact{margin-bottom:8px}.sub{font-size:13px}}
@media (max-height:680px){.wrap{padding:8px 0}.panel{padding:10px}.stack{gap:8px}.btn{min-height:38px;padding:9px 10px}.hero.compact h1{font-size:24px}.sub{font-size:12px}.player{padding:8px}.status-card{min-height:84px}.timer{font-size:48px}}

.room-picker{display:grid;gap:10px;border:1px solid var(--line);background:rgba(0,0,0,.16);border-radius:16px;padding:12px}
.room-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.room-list{display:grid;gap:8px}
.room-card{width:100%;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.065);color:var(--text);border-radius:14px;padding:11px 12px}
.room-card:hover,.room-card.selected{border-color:rgba(255,49,90,.75);background:rgba(255,49,90,.12)}
.room-card b{display:block;font-size:14px;line-height:1.15}
.room-card small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.room-card strong{font-size:20px;letter-spacing:.08em}

.topic-words-box{border:1px solid var(--line);background:rgba(0,0,0,.18);border-radius:16px;padding:12px;display:grid;gap:10px;max-height:220px;overflow:auto}
.word-chips{display:flex;flex-wrap:wrap;gap:7px}
.word-chip{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.075);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;color:var(--text)}