:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#f7f7fb;background:#07070b;color-scheme:dark;
  --bg:#07070b;--panel:#101017;--panel2:#15151f;--line:#292936;--muted:#9b9bac;
  --pink:#ff4778;--violet:#8f5cff;--green:#67e9a7;--amber:#ffcb66;--red:#ff5d74;
}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;overflow-x:hidden;background:
radial-gradient(circle at 16% -10%,rgba(143,92,255,.28),transparent 32%),
radial-gradient(circle at 88% 0%,rgba(255,71,120,.18),transparent 28%),
linear-gradient(180deg,#09090f,#060609 70%);}
button,input,select{font:inherit}.noise{pointer-events:none;position:fixed;inset:0;opacity:.035;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}.shell{position:relative;z-index:1;width:min(1100px,100%);margin:auto;padding:16px 16px 56px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 4px 18px}.brand{display:inline-flex;gap:5px;align-items:center;color:white;text-decoration:none;font-weight:950;letter-spacing:.08em}.brand span{font-size:17px}.brand b{font-size:19px;color:var(--pink);text-shadow:0 0 24px rgba(255,71,120,.65)}.status-wrap{display:flex;gap:8px;align-items:center}.status-dot,.call-status{font-size:10px;font-weight:900;letter-spacing:.12em;padding:7px 9px;border-radius:999px;border:1px solid var(--line);background:#101015}.status-dot{color:var(--green)}.call-status{color:#777789}.call-status.connected{color:var(--green);border-color:#23553c}.call-status.reconnecting{color:var(--amber);border-color:#57431f}.card,.call-dock{border:1px solid var(--line);background:linear-gradient(180deg,rgba(18,18,26,.94),rgba(11,11,16,.97));box-shadow:0 30px 100px rgba(0,0,0,.45);backdrop-filter:blur(20px)}.card{border-radius:30px;padding:28px;min-height:540px}.call-dock{position:relative;border-radius:26px;padding:16px;margin-bottom:14px;overflow:hidden}.call-dock.collapsed .media-grid,.call-dock.collapsed .call-join-panel,.call-dock.collapsed .call-controls,.call-dock.collapsed .chat-panel,.call-dock.collapsed .reaction-tray{display:none!important}.call-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.icon-btn{width:36px;height:36px;border-radius:12px;border:1px solid var(--line);background:#171720;color:#fff;cursor:pointer}.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#a6a6b4;font-weight:900}.muted{color:var(--muted)}.small{font-size:13px}.hero{text-align:center;padding:36px 0 22px}.hero-mark{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:rgba(143,92,255,.1);border:1px solid rgba(143,92,255,.24);color:#cfbcff;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.hero h1{font-size:clamp(48px,10vw,92px);line-height:.88;letter-spacing:-.07em;margin:14px auto 14px;max-width:780px}.hero h1 span{color:var(--pink);text-shadow:0 0 38px rgba(255,71,120,.3)}.hero p{font-size:clamp(15px,2.3vw,19px);max-width:620px;margin:0 auto}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.mode-card{position:relative;text-align:left;border:1px solid #2c2c3a;background:linear-gradient(145deg,#171721,#101017);color:#fff;border-radius:22px;padding:20px;cursor:pointer;transition:.2s transform,.2s border,.2s box-shadow}.mode-card:hover{transform:translateY(-2px);border-color:#53467b;box-shadow:0 12px 40px #0006}.mode-card.remote{background:radial-gradient(circle at 90% 0%,rgba(143,92,255,.2),transparent 42%),#12121b}.mode-card .mode-icon{font-size:28px}.mode-card h3{margin:10px 0 6px;font-size:22px}.mode-card p{margin:0;color:#9f9faf;font-size:14px;line-height:1.45}.mode-badge{position:absolute;right:14px;top:14px;font-size:9px;letter-spacing:.1em;font-weight:900;color:#e5d9ff;background:#2b2340;border:1px solid #493d69;padding:5px 7px;border-radius:999px}.join-strip{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:12px;padding-top:18px;border-top:1px solid #24242f}.btn{border:0;border-radius:15px;padding:14px 17px;background:#24242e;color:#fff;font-weight:850;cursor:pointer;transition:.18s transform,.18s filter,.18s background}.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}.btn.primary{background:linear-gradient(135deg,var(--pink),var(--violet));box-shadow:0 10px 30px rgba(132,68,255,.18)}.btn.ghost{border:1px solid #30303d;background:transparent}.btn.danger{background:#3b141f;color:#ffd4df;border:1px solid #642236}.btn.success{background:#163629;color:#bfffdc;border:1px solid #275944}.btn:disabled{opacity:.42;cursor:not-allowed;transform:none;filter:none}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.stack{display:grid;gap:12px}.field{display:grid;gap:7px}.field label{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:#9999aa;font-weight:850}.input,.select{width:100%;border:1px solid #30303c;background:#0f0f15;color:#fff;border-radius:14px;padding:13px 14px;outline:none}.input:focus,.select:focus{border-color:#7356c0;box-shadow:0 0 0 3px rgba(143,92,255,.08)}.form-card{max-width:680px;margin:16px auto 0;padding:20px;border:1px solid #292936;border-radius:22px;background:#0d0d13}.form-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.form-title h2{margin:0}.toggle-row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:13px 14px;border-radius:14px;border:1px solid #292936;background:#111119}.switch{appearance:none;width:44px;height:25px;border-radius:999px;background:#282832;position:relative;cursor:pointer;transition:.2s}.switch:after{content:"";position:absolute;width:19px;height:19px;border-radius:50%;background:white;top:3px;left:3px;transition:.2s}.switch:checked{background:linear-gradient(135deg,var(--pink),var(--violet))}.switch:checked:after{left:22px}.room-head{text-align:center}.roomcode{font-size:clamp(36px,8vw,56px);letter-spacing:.14em;font-weight:950;margin:6px 0}.copy-link{border:0;background:transparent;color:#aa91ff;font-weight:800;cursor:pointer}.players{display:grid;gap:8px;margin:16px 0}.player{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;padding:12px 13px;border-radius:15px;background:#15151d;border:1px solid #252531}.avatar{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;font-weight:950;background:linear-gradient(145deg,#2a2440,#201724);border:1px solid #42365f}.player-main{min-width:0}.player-name{font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-meta{font-size:11px;color:#858596;margin-top:2px}.badge{display:inline-flex;font-size:9px;padding:4px 6px;border-radius:999px;background:#2a203a;color:#d9c3ff;font-weight:900;letter-spacing:.08em}.ready-pill{font-size:10px;font-weight:900;padding:6px 8px;border-radius:999px;background:#3a1f28;color:#ffa9bf}.ready-pill.on{background:#183526;color:#8df2b9}.score{font-weight:900;font-variant-numeric:tabular-nums}.kick-btn{width:31px;height:31px;border-radius:10px;border:1px solid #43202a;background:#251217;color:#ff9ab4;cursor:pointer}.divider{height:1px;background:#272733;margin:21px 0}.section-title{margin:0 0 8px;font-size:23px}.actions{display:flex;gap:10px;margin-top:15px}.actions>*{flex:1}.settings-panel{padding:15px;border:1px solid #292936;border-radius:18px;background:#0d0d13}.ready-action{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:14px;border-radius:16px;background:#111119;border:1px solid #292936;margin-top:13px}.role-card{text-align:center;padding:30px 12px;border-radius:24px;background:linear-gradient(160deg,#181820,#101014);border:1px solid #2b2b35;position:relative;overflow:hidden}.role-card:before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle,rgba(143,92,255,.14),transparent 55%);pointer-events:none}.role-card.imposter{background:radial-gradient(circle at top,#491326,#161015 70%);border-color:#6a2039}.role-label{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#aaaab4;font-weight:850}.word{font-size:clamp(40px,9vw,72px);font-weight:950;letter-spacing:-.055em;margin:14px 0}.timer-wrap{text-align:center;margin:18px 0}.timer{font-size:clamp(50px,12vw,86px);font-weight:950;letter-spacing:-.07em;font-variant-numeric:tabular-nums;margin:5px 0}.vote-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.vote-btn{padding:13px;border-radius:14px;background:#16161f;border:1px solid #2a2a35;color:#fff;font-weight:800;cursor:pointer}.vote-btn.selected{border-color:var(--pink);background:#321520;box-shadow:inset 0 0 0 1px rgba(255,71,120,.15)}.vote-btn:disabled{opacity:.35;cursor:not-allowed}.result-hero{text-align:center;padding:18px 0}.result-hero .name{font-size:clamp(42px,9vw,72px);font-weight:950;letter-spacing:-.05em;color:var(--pink)}.secret{font-size:29px;font-weight:900;margin-top:6px}.tally{display:grid;gap:8px;margin-top:14px}.tally-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 14px;border-radius:13px;background:#15151c}.call-join-panel{text-align:center;padding:18px;border:1px dashed #3a354c;border-radius:18px;background:linear-gradient(145deg,rgba(143,92,255,.07),rgba(255,71,120,.035))}.call-join-panel h3{margin:3px 0 7px}.call-join-panel p{margin:0 0 13px}.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}.media-tile{position:relative;aspect-ratio:16/10;border-radius:17px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#262235,#111117 72%);border:1px solid #292936;transition:.18s border,.18s box-shadow,.18s transform;min-height:112px}.media-tile.speaking{border-color:#8d68ff;box-shadow:0 0 0 2px rgba(143,92,255,.22),0 0 28px rgba(143,92,255,.15);transform:translateY(-1px)}.media-tile video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}.media-tile.remote video{transform:none}.media-avatar{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;font-weight:950;color:#eee}.media-tile.has-video .media-avatar{display:none}.media-overlay{position:absolute;inset:auto 7px 7px 7px;display:flex;align-items:center;justify-content:space-between;gap:5px}.media-name{max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 8px;border-radius:999px;background:#07070bc9;backdrop-filter:blur(8px);font-size:11px;font-weight:850}.media-icons{display:flex;gap:4px}.media-icon{display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:999px;background:#07070bd4;font-size:10px}.quality.excellent{color:var(--green)}.quality.good{color:#a9e98e}.quality.poor{color:var(--amber)}.quality.lost{color:var(--red)}.call-controls{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}.call-btn{border:1px solid #2d2d39;background:#171720;color:#fff;border-radius:14px;padding:11px 8px;cursor:pointer;font-weight:800}.call-btn.off{background:#311620;border-color:#57202e;color:#ffb2c5}.call-btn.danger{color:#ff9eb5}.reaction-tray{display:flex;justify-content:center;gap:7px;padding-top:10px}.reaction-tray button{font-size:22px;border:1px solid #30303b;background:#15151c;border-radius:12px;padding:7px 10px;cursor:pointer}.reaction-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.float-reaction{position:absolute;bottom:56px;font-size:34px;animation:floatUp 1.8s ease-out forwards;filter:drop-shadow(0 6px 10px #0008)}@keyframes floatUp{0%{opacity:0;transform:translateY(12px) scale(.7) rotate(-8deg)}20%{opacity:1}100%{opacity:0;transform:translateY(-150px) scale(1.15) rotate(8deg)}}.chat-panel{border-top:1px solid #262631;margin-top:10px;padding-top:10px}.chat-messages{max-height:180px;overflow:auto;display:grid;gap:7px;padding-right:4px}.chat-msg{padding:8px 10px;border-radius:12px;background:#14141c;font-size:13px}.chat-msg strong{color:#d7c9ff}.chat-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:8px}.chat-form input{border:1px solid #30303b;background:#0f0f15;color:#fff;border-radius:12px;padding:11px;outline:none}.chat-form button{border:0;border-radius:12px;padding:0 14px;background:#2d2350;color:#e7ddff;font-weight:850}.toast{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);background:#fff;color:#101014;padding:11px 15px;border-radius:13px;font-weight:800;box-shadow:0 15px 50px #0009;z-index:50;max-width:min(92vw,560px)}
@media(max-width:720px){.shell{padding:10px 10px 36px}.card{padding:20px;border-radius:23px;min-height:calc(100vh - 95px)}.call-dock{border-radius:20px;padding:12px}.mode-grid,.grid{grid-template-columns:1fr}.join-strip{grid-template-columns:1fr}.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.media-tile{min-height:95px;aspect-ratio:1.15}.call-controls{position:sticky;bottom:5px;z-index:4;grid-template-columns:repeat(5,1fr);background:#0c0c12e8;backdrop-filter:blur(16px);padding:7px;border-radius:17px}.call-btn{padding:10px 3px;font-size:15px}.call-btn span{display:none}.actions{flex-direction:column}.vote-grid{grid-template-columns:1fr 1fr}.player{grid-template-columns:auto 1fr auto}.player .score{grid-column:2}.kick-btn{grid-column:3;grid-row:1/3}.status-dot{display:none}.hero{padding-top:18px}}
@media(max-width:380px){.vote-grid{grid-template-columns:1fr}.media-grid{grid-template-columns:1fr 1fr}.roomcode{letter-spacing:.1em}.brand span{font-size:15px}}