:root{--bg: #0a0907;--panel: #0a0806;--panel2: #12100f;--line: #2a241d;--line-lit: #42382b;--text: #ece4d6;--muted: #a39682;--amber: #e2941f;--amber-dim: #6a4f25;--sapphire: #5fb8d8;--sapphire-dim: #27566a;--accent: #d8a74e;--accent-ink: #140f06;--glow: none;--glow-strong: none;--danger: #c2685c;--ok: #8ab45c;--display: "Fraunces", "Hoefler Text", Georgia, serif;--sans: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;--mono: ui-monospace, "Cascadia Mono", Consolas, monospace}#root{box-sizing:border-box}#root{margin:0;color:var(--text);font-family:var(--sans);min-height:100vh}#root a{color:inherit;text-decoration:none}#root .link{color:var(--accent);text-decoration:underline;cursor:pointer}#root .link:hover{color:var(--accent)}#root .muted{color:var(--muted)}#root .small{font-size:12px}#root .center{text-align:center}#root .row{display:flex;gap:10px;align-items:center}#root .row.between{justify-content:space-between}#root .topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);background:#00000040;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#root .brand{font-weight:800;font-size:20px;letter-spacing:.5px}#root .brand span{color:var(--accent)}#root main{max-width:1180px;margin:0 auto;padding:22px}#root .card{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:18px;margin-bottom:16px}#root .btn{background:var(--panel2);color:var(--text);border:1px solid var(--line);padding:9px 16px;border-radius:2px;cursor:pointer;font-weight:600;transition:.15s}#root .btn:hover{border-color:var(--accent)}#root .btn:disabled{opacity:.4;cursor:not-allowed}#root .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}#root .btn.primary:hover{border-color:var(--accent)}#root .btn.tiny{padding:5px 10px;font-size:12px}#root .btn.ghost{background:transparent}#root .btn.discord{background:#5865f2;border-color:#5865f2;color:#fff}#root .btn.steam{background:#1b2838;border-color:#2a475e;color:#cfe}#root input,#root select{background:var(--panel2);color:var(--text);border:1px solid var(--line);padding:9px 12px;border-radius:2px;font-size:14px}#root input:focus,#root select:focus{outline:none;border-color:var(--accent)}#root .loginbar{display:flex;align-items:center;gap:10px}#root .loginbar .avatar{width:28px;height:28px;border-radius:50%}#root .loginbar .name{font-weight:600}#root .hero-banner{text-align:center;padding:30px 10px}#root .hero-banner h1{font-size:34px;margin:0 0 10px}#root .mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:16px 0}#root .mode-card{text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:2px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:6px;color:var(--text)}#root .mode-card span{color:var(--muted);font-size:13px}#root .mode-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset,var(--glow)}#root .badge{font-size:11px;padding:3px 8px;border-radius:2px;margin-right:6px;font-weight:700;letter-spacing:.4px}#root .badge.mode{background:var(--panel2);border:1px solid var(--line)}#root .badge.status{background:#243;color:#aef}#root .badge.status.in_progress{background:#3a2f12;color:var(--amber)}#root .badge.status.complete{background:#133;color:var(--ok)}#root .badge.captain{background:#3a2a55;color:#c9b3ff;margin-left:6px}#root .badge.host{background:var(--accent);color:var(--accent-ink);margin-left:6px}#root .badge.ready{background:#143a22;color:var(--ok);margin-left:6px}#root .badge.off,#root .badge.steam{background:#333;color:#bbb}#root .lobby-loading{text-align:center;padding:60px;color:var(--muted)}#root .lobby-header{display:flex;justify-content:space-between;align-items:center}#root .lobby-title{margin:0 0 8px;font-size:20px}#root .share{display:flex;gap:8px}#root .share input{width:320px}#root .lobby-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}#root .team-panel{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:12px}#root .team-panel.amber{border-top:3px solid var(--amber)}#root .team-panel.sapphire{border-top:3px solid var(--sapphire)}#root .team-panel.active{box-shadow:0 0 0 2px var(--accent),var(--glow)}#root .team-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px}#root .team-name{font-weight:700}#root .team-head-right{display:flex;align-items:center;gap:8px}#root .turn-flag{font-size:10px;background:var(--accent);color:var(--accent-ink);padding:2px 7px;border-radius:2px;border-color:var(--accent)}#root .team-clock{font-weight:800;font-size:18px;color:var(--muted);display:inline-flex;align-items:baseline;gap:4px;min-width:44px;justify-content:flex-end}#root .team-clock small{font-size:9px;font-weight:700;text-transform:uppercase;opacity:.8}#root .team-clock small.bank{color:var(--muted)}#root .team-clock.idle{opacity:.55;font-size:15px}#root .team-clock.active{color:var(--accent)}#root .team-clock.active.reserve{color:var(--sapphire);text-shadow:0 0 10px rgba(76,143,224,.5)}#root .team-clock.active.danger{color:var(--danger);text-shadow:0 0 10px rgba(224,92,92,.5)}#root .slot{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--line);border-radius:2px;margin-bottom:6px;min-height:44px;background:var(--panel2);overflow:hidden}#root .slot.empty{background:transparent;border-style:dashed}#root .slot .dot{width:8px;height:8px;border-radius:50%;flex:none}#root .slot .dot.on{background:var(--ok)}#root .slot .dot.off{background:#555}#root .slot-av{width:22px;height:22px;border-radius:50%;flex:none}#root .slot-name{flex:1;min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#root .slot-badges{flex:none;display:flex;align-items:center;gap:4px}#root .slot-badges .badge{margin:0}#root .slot-hero{flex:none;font-size:12px;color:var(--accent);font-weight:600;display:inline-flex;align-items:center;gap:5px;max-width:90px;overflow:hidden}#root .slot-hero .slot-hero-img,#root .slot .leave,#root .slot .kick{flex:none}#root .slot-hero-img{width:22px;height:22px;border-radius:2px;object-fit:cover;object-position:center 20%}#root .join-slot{width:100%;background:transparent;border:none;color:var(--muted);cursor:pointer;padding:4px}#root .join-slot:hover:not(:disabled){color:var(--accent)}#root .kick{background:transparent;border:none;color:var(--danger);cursor:pointer}#root .leave{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:10px;font-weight:600;padding:2px 7px;border-radius:2px;cursor:pointer}#root .leave:hover{border-color:var(--danger);color:var(--danger)}#root .lobby-center{display:flex;flex-direction:column;gap:12px}#root .center-msg{text-align:center}#root .turn-banner{display:flex;flex-direction:column;gap:8px}#root .tb-main{display:flex;justify-content:space-between;align-items:center}#root .pick-timer{font-size:26px;font-weight:800;color:var(--amber);display:flex;align-items:baseline;gap:6px}#root .pick-timer.danger{color:var(--danger)}#root .pick-timer.reserve{color:var(--sapphire)}#root .pt-tag{font-size:10px;font-weight:700;letter-spacing:.5px;opacity:.8;text-transform:uppercase}#root .reserve-banks{display:flex;gap:14px;font-size:12px;font-weight:600;border-top:1px solid var(--line);padding-top:6px}#root .reserve-banks .amber{color:var(--amber)}#root .reserve-banks .sapphire{color:var(--sapphire)}#root .timer-inputs{display:flex;gap:10px;margin-top:8px}#root .subfield{display:flex;flex-direction:column;gap:4px;flex:1}#root .subfield span{font-size:12px;color:var(--muted)}#root .host-controls{display:flex;flex-direction:column;gap:26px}#root .settings-group{display:flex;flex-direction:column;gap:14px}#root .group-header{margin:0;font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.8px;text-transform:uppercase;text-shadow:0 0 8px rgba(95,248,178,.25);padding-bottom:8px;border-bottom:1px solid var(--line)}#root .host-controls .field{display:flex;flex-direction:column;gap:6px;margin:0}#root .host-controls .field>span{font-size:12px;color:var(--muted);font-weight:600}#root .toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:var(--panel2);cursor:pointer;-webkit-user-select:none;user-select:none}#root .toggle-row:hover{border-color:#3a4a44}#root .toggle-text{display:flex;flex-direction:column;gap:2px}#root .toggle-label{font-weight:600;font-size:14px}#root .toggle-desc{font-size:12px;color:var(--muted)}#root .switch{flex:none;width:44px;height:24px;border-radius:999px;border:1px solid var(--line);background:#2a3531;position:relative;cursor:pointer;transition:.15s;padding:0}#root .switch .knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#8a9a93;transition:.15s}#root .switch.on{background:var(--accent);border-color:var(--accent)}#root .switch.on .knob{left:22px;background:var(--accent-ink)}#root .ban-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}#root .ban-chip{font-size:12px;background:#2a1a1a;color:#e8a;padding:3px 8px;border-radius:2px;text-decoration:line-through}#root .herogrid-wrap{margin-top:8px}#root .herogrid-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}#root .search{width:260px}#root .herogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}#root .hero-tile{display:flex;flex-direction:column;align-items:stretch;gap:0;overflow:hidden;background:var(--panel2);border:1px solid var(--line);border-radius:2px;padding:0;cursor:pointer;color:var(--text);transition:.12s}#root .hero-tile:hover:not(:disabled){transform:translateY(-2px);border-color:var(--accent)}#root .herogrid.banning .hero-tile:hover:not(:disabled){border-color:var(--danger);box-shadow:0 0 12px #e05c5c99}#root .hero-tile:disabled{cursor:not-allowed}#root .hero-tile.banned{opacity:.3;filter:grayscale(1)}#root .hero-tile.taken{opacity:.4;filter:grayscale(.7)}#root .hero-tile img{width:100%;aspect-ratio:1 / 1;object-fit:cover;object-position:center top;display:block}#root .hero-initials{width:100%;aspect-ratio:1 / 1;display:grid;place-items:center;background:linear-gradient(135deg,#243a30,#161e1a);font-weight:800;color:var(--accent)}#root .hero-name{font-size:11px;text-align:center;padding:5px 3px}#root .vote-tally{display:flex;flex-direction:column;gap:12px}#root .vote-head{display:flex;justify-content:space-between;align-items:center;gap:12px}#root .vote-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}#root .vote-col.amber h4{color:var(--amber)}#root .vote-col.sapphire h4{color:var(--sapphire)}#root .vote-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--line)}#root .vote-row .count{font-weight:700}#root .export-table{width:100%;border-collapse:collapse;margin-top:8px}#root .export-table td{padding:6px 8px;border-bottom:1px solid var(--line);font-size:13px}#root .export-table code{color:var(--accent)}#root .team-cell.amber{color:var(--amber)}#root .team-cell.sapphire{color:var(--sapphire)}#root .draft-order{display:flex;flex-direction:column;gap:12px;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}#root .draft-order h3{margin:0}#root .do-controls{display:flex;flex-wrap:wrap;gap:16px;align-items:center}#root .firstpick{display:flex;align-items:center;gap:8px}#root .preset-row{display:flex;flex-wrap:wrap;gap:6px}#root .preset-btn{background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:7px 12px;border-radius:2px;cursor:pointer;font-weight:600;font-size:12px}#root .preset-btn:hover{border-color:var(--accent)}#root .preset-btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}#root .seg{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}#root .seg button{background:var(--panel2);color:var(--muted);border:none;padding:6px 12px;cursor:pointer;font-size:12px;font-weight:600}#root .seg button.on{background:var(--accent);color:var(--accent-ink)}#root .seg button.on.amber{background:var(--amber);color:#1a1206}#root .seg button.on.sapphire{background:var(--sapphire);color:#0a1422}#root .order-grid{display:grid;gap:5px;align-items:center;padding-bottom:4px;width:max-content;max-width:100%;margin:0 auto;overflow-x:auto}#root .og-num{text-align:center;font-size:10px;color:var(--muted)}#root .og-rowlabel{font-size:12px;font-weight:700;white-space:nowrap;padding-right:8px}#root .og-rowlabel.amber{color:var(--amber)}#root .og-rowlabel.sapphire{color:var(--sapphire)}#root .og-cell{width:32px;height:32px;border-radius:2px;border:1px solid var(--line);background:transparent;color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;padding:0}#root .og-cell.empty{border-style:dashed;opacity:.35}#root .og-cell.pick{background:#14361f;border-color:#2f7d4a;color:#7fe0a0;opacity:1}#root .og-cell.ban{background:#3a1717;border-color:#8a3a3a;color:#f0a0a0;opacity:1}#root .og-cell.active{outline:2px solid var(--accent);outline-offset:1px}#root .og-cell.done{opacity:.4}#root .og-cell.edit{cursor:pointer}#root .og-cell.edit:hover{border-color:var(--accent);opacity:1}#root .og-cell.empty.edit.amber:hover{background:var(--amber-dim)}#root .og-cell.empty.edit.sapphire:hover{background:var(--sapphire-dim)}#root .og-remove{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:10px;padding:2px}#root .og-remove:hover{color:var(--danger)}#root .og-empty{border:1px dashed var(--line);border-radius:2px;padding:18px;text-align:center;color:var(--muted);font-size:13px}#root .do-edit{display:flex;flex-wrap:wrap;gap:8px;align-items:center}#root .modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;display:grid;place-items:start center;z-index:200;padding:3vh 20px;overflow-y:auto}#root .modal-box{background:var(--panel);border:1px solid var(--line);border-radius:2px;width:min(900px,100%);max-height:94vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080}#root .modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}#root .modal-head h2{margin:0;font-size:18px}#root .modal-x{background:transparent;border:none;color:var(--muted);font-size:24px;cursor:pointer;line-height:1}#root .modal-x:hover{color:var(--text)}#root .modal-body{padding:18px 20px;overflow-y:auto;scrollbar-gutter:stable;display:flex;flex-direction:column;gap:26px}#root .modal-body .draft-order{border:none;background:transparent;padding:0;margin:0;width:auto;max-width:none;gap:14px}#root .modal-body .draft-order .order-grid{margin:0}#root .modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line)}#root .setup-bar{display:flex;gap:10px;justify-content:center;align-items:center}#root .toast{position:fixed;top:72px;left:50%;transform:translate(-50%);z-index:250;padding:12px 20px;border-radius:2px;font-size:14px;font-weight:600;background:var(--panel);border:1px solid var(--line);color:var(--text);box-shadow:0 12px 32px #00000073;max-width:90vw;display:flex;align-items:center;gap:10px;animation:toast-in .18s ease-out}#root .toast:before{content:"";width:8px;height:8px;border-radius:50%;flex:none}#root .toast.error{border-color:var(--danger)}#root .toast.error:before{background:var(--danger);box-shadow:0 0 8px var(--danger)}#root .toast.info{border-color:var(--accent)}#root .toast.info:before{background:var(--accent);border-color:var(--accent)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}#root .join-slot.locked{opacity:.55}#root .join-slot.locked:hover{color:var(--danger)}#root .voteroll-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000c7;display:grid;place-items:center;z-index:200;padding:20px}#root .voteroll-box{background:var(--panel);border:1px solid var(--accent);border-radius:2px;padding:26px 32px;text-align:center;border-color:var(--accent);max-width:92vw}#root .voteroll-box>h3{margin:0 0 18px}#root .voteroll-cols{display:flex;gap:28px;justify-content:center}#root .reel{display:flex;flex-direction:column;align-items:center;gap:10px;width:160px}#root .reel-label{font-weight:800;font-size:14px}#root .reel.amber .reel-label{color:var(--amber)}#root .reel.sapphire .reel-label{color:var(--sapphire)}#root .reel-window{width:130px;height:130px;border-radius:2px;overflow:hidden;border:2px solid var(--line);background:#0c120f;display:grid;place-items:center}#root .reel.landed .reel-window{border-color:var(--accent)}#root .reel.spinning .reel-window{filter:blur(1px) brightness(.9)}#root .reel-window img{width:100%;height:100%;object-fit:cover;object-position:center top}#root .reel-initials{font-size:28px;font-weight:800;color:var(--accent)}#root .reel-name{font-size:14px;font-weight:700;min-height:18px}#root .reel.landed .reel-name{color:var(--accent)}#root .wheel-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:grid;place-items:center;z-index:100}#root .wheel-box{background:var(--panel);border:1px solid var(--accent);border-radius:2px;padding:26px 40px;text-align:center;min-width:320px}#root .wheel-list{height:60px;overflow:hidden;margin:14px 0;position:relative}#root .wheel-list .wheel-item{padding:16px 0;font-size:22px;font-weight:700;color:var(--muted)}#root .wheel-list.spin{animation:reel .25s linear infinite}#root .wheel-list.landed .wheel-item{opacity:.3}#root .wheel-list.landed .wheel-item.win{opacity:1;color:var(--accent);font-size:26px}@keyframes reel{0%{transform:translateY(0)}to{transform:translateY(-52px)}}#root .wheel-result strong{font-size:28px;color:var(--accent)}@media (max-width: 900px){#root .lobby-body{grid-template-columns:1fr}#root .share input{width:180px}}
