:root{--bg-void:#0a0810;--bg-deep:#120e1c;--bg-panel:#181228;--bg-panel-raised:#201933;--border-subtle:#ffffff14;--border-strong:#ffffff29;--text-primary:#f2eef8;--text-muted:#a89cc0;--text-faint:#6d6285;--gold:#e0b24d;--gold-bright:#f6d47f;--crimson:#b5233a;--crimson-bright:#d92f4a;--royal:#5a2ba6;--silver:#cfd3dd;--silver-bright:#eceef4;--violet:#8354e6;--violet-bright:#a37bf2;--jet:#0e0c14;--success:#4ecb8e;--danger:#e0546a;--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--shadow-soft:0 8px 30px #00000073;--shadow-glow-gold:0 0 24px #e0b24d59;--shadow-glow-violet:0 0 24px #8354e659;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{background:radial-gradient(circle at 20% -10%, #5a2ba640, transparent 45%), radial-gradient(circle at 85% 10%, #b5233a2e, transparent 40%), var(--bg-void);color:var(--text-primary);min-height:100vh;margin:0;font-family:Inter,system-ui,sans-serif}h1,h2,h3,h4{letter-spacing:.02em;margin:0;font-family:Cinzel,serif}p{color:var(--text-muted);margin:0}button{font-family:inherit}.screen{flex-direction:column;justify-content:center;align-items:center;gap:28px;min-height:100vh;padding:32px 20px;display:flex}.brand{text-align:center;flex-direction:column;gap:6px;display:flex}.brand h1{background:linear-gradient(135deg, var(--gold-bright), var(--crimson-bright) 60%, var(--violet-bright));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:clamp(2.2rem,6vw,3.4rem)}.brand .subtitle{color:var(--text-faint);letter-spacing:.12em;text-transform:uppercase;font-size:.95rem}.panel{background:linear-gradient(180deg, var(--bg-panel-raised), var(--bg-panel));border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:min(440px,92vw);box-shadow:var(--shadow-soft);flex-direction:column;gap:20px;padding:32px;display:flex}.panel-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.14em;text-align:center;font-size:1.1rem}.btn{border:1px solid var(--border-strong);background:var(--bg-panel-raised);color:var(--text-primary);border-radius:var(--radius-md);cursor:pointer;padding:14px 20px;font-size:1rem;font-weight:600;transition:transform .15s,box-shadow .15s,border-color .15s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg, var(--gold), var(--crimson));color:#1a0e04;border-color:#0000}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-glow-gold)}.btn-herrin{background:linear-gradient(135deg, var(--gold), var(--crimson-bright));color:#200a0a;border-color:#0000}.btn-herrin:hover:not(:disabled){box-shadow:var(--shadow-glow-gold)}.btn-sub{background:linear-gradient(135deg, var(--jet), var(--violet));color:var(--silver-bright);border-color:#0000}.btn-sub:hover:not(:disabled){box-shadow:var(--shadow-glow-violet)}.btn-ghost{border-color:var(--border-subtle);color:var(--text-muted);background:0 0}.btn-ghost:hover:not(:disabled){border-color:var(--border-strong);color:var(--text-primary)}.btn-row{gap:12px;display:flex}.btn-row .btn{flex:1}label.field{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;flex-direction:column;gap:8px;font-size:.85rem;display:flex}input[type=text]{background:var(--bg-void);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);outline:none;padding:12px 14px;font-size:1rem;transition:border-color .15s}input[type=text]:focus{border-color:var(--gold)}.role-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.role-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-void);cursor:pointer;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;transition:all .15s;display:flex}.role-card .emoji{font-size:2rem}.role-card.selected.herrin{border-color:var(--gold);box-shadow:var(--shadow-glow-gold);background:linear-gradient(160deg,#e0b24d29,#b5233a1a)}.role-card.selected.sub{border-color:var(--violet);box-shadow:var(--shadow-glow-violet);background:linear-gradient(160deg,#8354e629,#0e0c1466)}.role-card:disabled,.role-card.taken{opacity:.35;cursor:not-allowed}.room-code-box{text-align:center;border-radius:var(--radius-md);border:1px dashed var(--border-strong);background:var(--bg-void);padding:18px}.room-code-box .code{letter-spacing:.3em;color:var(--gold-bright);font-family:Cinzel,serif;font-size:2.2rem}.lobby-players{flex-direction:column;gap:12px;display:flex}.player-row{border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-void);align-items:center;gap:14px;padding:14px 16px;display:flex}.player-row .avatar{font-size:1.8rem}.player-row .meta{flex-direction:column;flex:1;display:flex}.player-row .role-tag{text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);font-size:.72rem}.status-dot{background:var(--text-faint);border-radius:50%;width:10px;height:10px}.status-dot.ready{background:var(--success);box-shadow:0 0 8px var(--success)}.status-dot.disconnected{background:var(--danger)}.match-shell{grid-template-rows:auto 1fr auto;gap:18px;min-height:100vh;padding:18px;display:grid}.hud{flex-wrap:wrap;justify-content:space-between;gap:16px;display:flex}.hud-card{border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-panel);flex:1;align-items:center;gap:12px;min-width:220px;padding:12px 16px;display:flex}.hud-card.herrin{border-color:#e0b24d66}.hud-card.sub{border-color:#8354e666}.hud-card .credits{color:var(--gold-bright);font-family:Cinzel,serif;font-size:1.3rem;transition:color .3s}.hud-card.sub .credits{color:var(--violet-bright)}.credits.pulse-gain{animation:.6s gainPulse}.credits.pulse-loss{animation:.6s lossPulse}@keyframes gainPulse{0%{transform:scale(1)}40%{color:var(--success);transform:scale(1.25)}to{transform:scale(1)}}@keyframes lossPulse{0%{transform:scale(1)}40%{color:var(--danger);transform:scale(1.25)}to{transform:scale(1)}}.board-wrap{justify-content:center;align-items:center;display:flex;overflow:auto}.board-track{grid-template-columns:repeat(8,minmax(70px,1fr));gap:6px;max-width:900px;display:grid}.tile{aspect-ratio:1;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-panel);text-align:center;color:var(--text-faint);flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:6px;font-size:.62rem;display:flex;position:relative}.tile .tile-emoji{font-size:1.3rem}.tile .tokens{gap:2px;display:flex;position:absolute;bottom:2px}.tile .token{border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:.7rem;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex}.token.herrin{background:radial-gradient(circle, var(--gold-bright), var(--crimson));box-shadow:0 0 6px var(--gold)}.token.sub{background:radial-gradient(circle, var(--silver-bright), var(--violet));box-shadow:0 0 6px var(--violet)}.action-bar{flex-direction:column;align-items:center;gap:14px;display:flex}.dice{background:linear-gradient(160deg, var(--bg-panel-raised), var(--bg-void));border:1px solid var(--border-strong);width:64px;height:64px;color:var(--gold-bright);border-radius:16px;justify-content:center;align-items:center;font-family:Cinzel,serif;font-size:1.8rem;display:flex}.dice.rolling{animation:.6s diceSpin}@keyframes diceSpin{0%{transform:rotate(0)scale(1)}50%{transform:rotate(180deg)scale(1.15)}to{transform:rotate(360deg)scale(1)}}.phase-banner{text-align:center;color:var(--text-muted);text-transform:uppercase;letter-spacing:.14em;font-size:.95rem}.log-feed{max-height:110px;color:var(--text-faint);border-top:1px solid var(--border-subtle);flex-direction:column-reverse;gap:4px;padding-top:10px;font-size:.82rem;display:flex;overflow-y:auto}.overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:50;background:#050409db;justify-content:center;align-items:center;animation:.25s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.minigame-card{background:var(--bg-panel-raised);border:1px solid var(--border-strong);border-radius:var(--radius-lg);text-align:center;width:min(480px,92vw);box-shadow:var(--shadow-soft);flex-direction:column;align-items:center;gap:20px;padding:36px;display:flex}.reaction-zone{border-radius:var(--radius-md);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;width:100%;height:200px;font-family:Cinzel,serif;font-size:1.4rem;transition:background .15s;display:flex}.reaction-zone.waiting{background:repeating-linear-gradient(135deg, var(--bg-void), var(--bg-void) 10px, #1a1428 10px, #1a1428 20px);color:var(--text-faint)}.reaction-zone.go{background:linear-gradient(135deg, var(--success), #2f8f63);color:#08130d}.reaction-zone.done{background:var(--bg-void);color:var(--text-muted)}.result-hero{text-align:center;flex-direction:column;gap:10px;display:flex}.result-hero .headline{font-size:clamp(1.8rem,5vw,2.6rem)}.stat-grid{grid-template-columns:1fr 1fr;gap:14px;width:100%;display:grid}.stat-box{background:var(--bg-void);border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-align:center;padding:14px}.stat-box .value{color:var(--gold-bright);font-family:Cinzel,serif;font-size:1.4rem}.error-toast{background:var(--danger);color:#2a0508;border-radius:var(--radius-md);box-shadow:var(--shadow-soft);z-index:100;padding:12px 20px;font-weight:600;animation:.2s fadeIn;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.link-row{gap:10px;display:flex}.link-row input{flex:1}.connection-badge{border:1px solid var(--border-subtle);color:var(--text-faint);background:var(--bg-panel);z-index:80;border-radius:20px;padding:6px 12px;font-size:.75rem;position:fixed;top:14px;right:14px}.connection-badge.connected{color:var(--success);border-color:#4ecb8e66}.connection-badge.disconnected{color:var(--danger);border-color:#e0546a80}