:root{--bg: #06232e;--fg: #fff6e0;--accent: #ffbe3d;--accent2: #00e0c8;--panel: rgba(4, 38, 48, .72);--radius: 14px;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:#000;color:var(--fg);font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}#stage{position:fixed;inset:0;width:100%;height:100%;display:block}#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:50;mix-blend-mode:screen}#ui{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;pointer-events:none}#ui button,#ui input,#ui a,#ui .panel,#ui .theme-card{pointer-events:auto}#topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 26px;gap:16px}.brand{font-weight:900;font-size:20px;letter-spacing:.22em;text-shadow:0 0 24px color-mix(in srgb,var(--accent) 70%,transparent)}.brand span{color:var(--accent)}.top-right{display:flex;align-items:center;gap:10px}.badge{font-size:12px;letter-spacing:.14em;padding:7px 12px;border-radius:999px;background:var(--panel);border:1px solid color-mix(in srgb,var(--fg) 18%,transparent);backdrop-filter:blur(10px);white-space:nowrap}.badge b{color:var(--accent);letter-spacing:.24em}.badge.warn{border-color:color-mix(in srgb,var(--accent) 60%,transparent);color:var(--accent)}.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid color-mix(in srgb,var(--fg) 18%,transparent);background:var(--panel);color:var(--fg);font-size:15px;cursor:pointer;backdrop-filter:blur(10px);transition:transform .12s,border-color .12s}.icon-btn:hover{transform:translateY(-1px);border-color:var(--accent)}.screen{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:0 26px 22px;min-height:0}.screen.center{align-items:center;justify-content:center}.hidden{display:none!important}.panel{background:var(--panel);border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);border-radius:var(--radius);padding:26px 28px;backdrop-filter:blur(16px);box-shadow:0 24px 70px #00000080;max-width:520px;width:100%}h1{font-size:30px;font-weight:900;letter-spacing:.18em;margin-bottom:22px}h2{font-size:22px;font-weight:800;margin-bottom:6px}h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;opacity:.65;margin:20px 0 10px}.lead{opacity:.8;line-height:1.5;margin-bottom:20px}.lead.small{font-size:14px;margin-bottom:14px}.field{display:block;margin-bottom:14px}.field span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-bottom:6px}input[type=text]{width:100%;padding:12px 14px;font-size:16px;font-family:inherit;color:var(--fg);background:#00000052;border:1px solid color-mix(in srgb,var(--fg) 20%,transparent);border-radius:10px;outline:none;transition:border-color .15s}input[type=text]:focus{border-color:var(--accent)}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.btn{font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.06em;padding:12px 20px;border-radius:10px;border:1px solid color-mix(in srgb,var(--fg) 24%,transparent);background:transparent;color:var(--fg);cursor:pointer;transition:transform .12s,background .15s,border-color .15s,box-shadow .15s}.btn:hover:not(:disabled){transform:translateY(-2px);border-color:var(--accent)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:var(--accent);border-color:var(--accent);color:#0a0a0a;box-shadow:0 0 color-mix(in srgb,var(--accent) 60%,transparent)}.btn.primary:hover:not(:disabled){box-shadow:0 10px 34px color-mix(in srgb,var(--accent) 45%,transparent)}.btn.big{width:100%;padding:16px;font-size:17px;letter-spacing:.1em}.btn.ghost{background:#ffffff0d}.hint{font-size:12px;opacity:.55;margin-top:8px}.error{margin-top:12px;font-size:14px;color:#ff6b6b}.lobby-panel{max-width:580px;max-height:calc(100vh - 150px);overflow-y:auto}.players{list-style:none;display:flex;flex-direction:column;gap:8px;max-height:132px;overflow-y:auto}.players li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:#ffffff0d;font-size:14px}.vol{font-size:12px;padding:2px 7px;border-radius:999px;background:#ffffff14;opacity:.8;white-space:nowrap}.players .score{font-weight:800;color:var(--accent);min-width:26px;text-align:right}.players .tag{margin-left:auto}.dot{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:0 0 12px currentColor}.tag{margin-left:auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}.name-row{display:flex;align-items:center;gap:10px;margin-bottom:4px}.name-row label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;white-space:nowrap}.name-row input{flex:1;min-width:0;padding:9px 12px;font-size:15px}.name-row .btn{padding:9px 14px;font-size:13px;flex:none}.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.volume-row{display:flex;gap:8px;flex-wrap:wrap}.volume-card{flex:1;min-width:68px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px 10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--fg) 16%,transparent);background:#ffffff0a;color:var(--fg);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:transform .12s,border-color .15s,background .15s}.volume-card .bottle{width:21px;height:42px;fill:currentColor;opacity:.55;transition:opacity .15s}.volume-card.active .bottle{opacity:1}.volume-card .vsize{font-size:15px;line-height:1}.volume-card .vname{font-size:11px;font-weight:600;letter-spacing:.02em;opacity:.6}.volume-card:hover:not(:disabled){transform:translateY(-2px)}.volume-card.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--fg)}.volume-card:disabled{opacity:.45;cursor:not-allowed}.theme-card{display:flex;align-items:center;gap:8px;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--fg) 16%,transparent);background:#ffffff0a;color:var(--fg);cursor:pointer;font-family:inherit;font-size:14px;transition:transform .12s,border-color .15s,background .15s}.theme-card:hover:not(:disabled){transform:translateY(-2px)}.theme-card .swatch{width:10px;height:10px;border-radius:3px;flex:none}.theme-card .tname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.theme-card .votes{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:999px;background:var(--accent);color:#0a0a0a;flex:none}.theme-card .num{font-size:10px;opacity:.35;flex:none}.theme-card .votes+.num{margin-left:0}.theme-card .tname+.num{margin-left:auto}.theme-card.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}.h3-note{text-transform:none;letter-spacing:0;font-weight:400;opacity:.7}#hostControls{margin-top:20px}.roll-overlay{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:24px;background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(6px)}.roll-title{margin:0;font-size:clamp(20px,3.4vw,34px);letter-spacing:.14em;text-transform:uppercase;opacity:.85}.roll-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:860px}.roll-card{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:128px;padding:16px 18px 12px;border-radius:14px;border:2px solid color-mix(in srgb,var(--fg) 18%,transparent);background:var(--panel);transition:transform .1s,border-color .1s,opacity .25s,box-shadow .1s}.roll-card .swatch{width:34px;height:34px;border-radius:9px}.roll-card .rname{font-weight:800;font-size:15px}.roll-card .rvoter{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.65}.roll-card .rvoter i{width:8px;height:8px;border-radius:50%}.roll-card.active{transform:scale(1.12);border-color:var(--accent);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 55%,transparent)}.roll-card.winner{transform:scale(1.22);border-color:var(--accent);box-shadow:0 0 34px color-mix(in srgb,var(--accent) 75%,transparent);animation:roll-win .5s ease-out}.roll-card.out{opacity:.22;transform:scale(.94)}@keyframes roll-win{0%{transform:scale(1.02)}55%{transform:scale(1.3)}to{transform:scale(1.22)}}.tension-wrap{margin-top:auto;height:4px;border-radius:999px;background:#ffffff1a;overflow:hidden}.tension{height:100%;width:0%;background:linear-gradient(90deg,var(--accent2),var(--accent));box-shadow:0 0 20px var(--accent);transition:width .08s linear}.chug-top{display:flex;justify-content:center;padding-top:8px}.clock{font-family:SF Mono,Cascadia Mono,Consolas,monospace;font-size:46px;font-weight:800;letter-spacing:.04em;padding:10px 26px;border-radius:var(--radius);background:var(--panel);border:1px solid color-mix(in srgb,var(--fg) 16%,transparent);backdrop-filter:blur(12px)}.chug-bottom{display:flex;flex-direction:column;align-items:center;gap:16px}.btn.done{padding:22px 74px;font-size:26px;font-weight:900;letter-spacing:.18em;border-radius:16px;background:var(--accent);border-color:var(--accent);color:#0a0a0a;animation:throb .9s ease-in-out infinite}.btn.done.waiting{animation:none;background:transparent;color:var(--fg);opacity:.6}@keyframes throb{0%,to{transform:scale(1);box-shadow:0 0 color-mix(in srgb,var(--accent) 55%,transparent)}50%{transform:scale(1.045);box-shadow:0 0 46px 6px color-mix(in srgb,var(--accent) 45%,transparent)}}.live-players{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.live-players li{display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--panel);border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);font-size:13px;backdrop-filter:blur(10px)}.live-players li.done{border-color:var(--accent2)}.live-players .ms{font-family:SF Mono,Consolas,monospace;opacity:.75}.leaderboard{list-style:none;counter-reset:rank;display:flex;flex-direction:column;gap:8px;margin:16px 0 22px;max-height:320px;overflow-y:auto}.leaderboard li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;background:#ffffff0d;font-size:15px}.leaderboard li .rank{font-weight:900;width:26px;opacity:.5}.leaderboard .who{font-weight:600;white-space:nowrap}.leaderboard .meta{margin-left:auto;font-size:12px;opacity:.7;font-family:SF Mono,Consolas,monospace;white-space:nowrap}.leaderboard .meta.dnf{letter-spacing:.08em;opacity:.45}.leaderboard .pts{font-weight:800;color:var(--accent2);min-width:34px;text-align:right}.leaderboard .total{font-weight:900;min-width:34px;text-align:right;padding-left:10px;border-left:1px solid color-mix(in srgb,var(--fg) 18%,transparent)}.leaderboard li:first-child{background:color-mix(in srgb,var(--accent) 20%,transparent);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent)}.leaderboard li:first-child .rank{opacity:1;color:var(--accent)}#hotkeys{display:flex;gap:18px;justify-content:center;padding:10px 0 14px;font-size:11px;letter-spacing:.08em;opacity:.35}#hotkeys b{color:var(--accent);font-weight:700}@media(max-width:900px){#hotkeys{display:none}}
