:root{--bg:#0b1020;--bg-2:#10173a;--panel:#151c3d;--panel-2:#1b2450;--border:#2a3568;--text:#e8ecff;--muted:#8b96c9;--accent:#7c5cff;--accent-2:#22d3ee;--danger:#ff5c7a;--success:#34d399;--gold:#fbbf24;font-family:Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{background:radial-gradient(1200px 700px at 80% -10%, #1c2258 0%, var(--bg) 55%) fixed;min-height:100%;color:var(--text);margin:0;padding:0}#root{min-height:100vh}button{font-family:inherit}a{color:inherit;text-decoration:none}h1,h2,h3{margin:0 0 8px}.page{flex-direction:column;min-height:100vh;display:flex}.page-loading{min-height:60vh;color:var(--muted);justify-content:center;align-items:center;font-size:18px;display:flex}.topbar{border-bottom:1px solid var(--border);z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0b1020d9;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;display:flex;position:sticky;top:0}.topbar-brand{letter-spacing:.4px;font-size:18px;font-weight:700}.topbar-user{align-items:center;gap:10px;display:flex}.logo-icon{filter:drop-shadow(0 0 8px #7c5cffb3)}.user-chip{background:var(--panel);border:1px solid var(--border);white-space:nowrap;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600}.user-chip small{color:var(--muted);font-weight:400}.btn{cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:10px 18px;font-size:15px;font-weight:600;transition:transform .12s,box-shadow .12s,background .12s;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(135deg, var(--accent), #5b3df5);color:#fff;box-shadow:0 4px 18px #7c5cff59}.btn-primary:hover{box-shadow:0 6px 24px #7c5cff8c}.btn-ghost{color:var(--muted);border:1px solid var(--border);background:0 0}.btn-ghost:hover{color:var(--text);border-color:var(--accent)}.btn-danger{background:var(--danger);color:#fff}.btn-block{width:100%}.btn:disabled{opacity:.55;cursor:not-allowed}.panel{background:linear-gradient(180deg, var(--panel), var(--bg-2));border:1px solid var(--border);border-radius:16px;padding:20px}input{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:10px;outline:none;width:100%;padding:11px 14px;font-size:15px}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #7c5cff33}.form-error{color:var(--danger);background:#ff5c7a1f;border:1px solid #ff5c7a66;border-radius:10px;margin:10px 0;padding:10px 14px;font-size:14px}.muted{color:var(--muted)}.pill{background:var(--panel-2);border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:3px 10px;font-size:12px}.pill-live{color:var(--success);border-color:var(--success)}.auth-page{justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{background:linear-gradient(180deg, var(--panel), var(--bg-2));border:1px solid var(--border);border-radius:20px;width:100%;max-width:420px;padding:32px;box-shadow:0 20px 60px #00000080}.auth-logo{text-align:center;margin-bottom:22px}.auth-logo .logo-icon{font-size:40px}.auth-logo h1{background:linear-gradient(90deg, var(--accent-2), var(--accent));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:30px}.auth-logo p{color:var(--muted);margin:4px 0 0;font-size:13px}.auth-tabs{background:var(--bg);border-radius:12px;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:20px;padding:5px;display:grid}.auth-tabs button{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:9px;padding:9px;font-size:14px;font-weight:600}.auth-tabs button.active{background:var(--accent);color:#fff}.auth-card form{flex-direction:column;gap:14px;display:flex}.auth-card label{color:var(--muted);flex-direction:column;gap:6px;font-size:13px;display:flex}.home-main{width:100%;max-width:1060px;margin:0 auto;padding:40px 20px 60px}.home-title{text-align:center;font-size:32px}.home-sub{text-align:center;color:var(--muted);margin:0 0 30px}.game-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;display:grid}.game-card{background:linear-gradient(180deg, var(--panel), var(--bg-2));border:1px solid var(--border);border-radius:18px;flex-direction:column;align-items:flex-start;gap:6px;padding:26px 22px;transition:transform .15s,border-color .15s,box-shadow .15s;display:flex}.game-card:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 12px 40px #7c5cff40}.game-card-emoji{margin-bottom:6px;font-size:44px}.game-card h3{font-size:20px}.game-card-tagline{color:var(--accent-2);margin:0;font-size:13px;font-weight:600}.game-card-desc{color:var(--muted);flex:1;font-size:14px}.game-card .btn{margin-top:10px}.lobby-main{flex-direction:column;gap:16px;width:100%;max-width:860px;margin:0 auto;padding:28px 20px 60px;display:flex}.lobby-actions p{color:var(--muted);margin:0 0 14px;font-size:14px}.create-row{gap:10px;display:flex}.create-row input{flex:1}.room-list{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.room-list li{background:var(--bg);border:1px solid var(--border);border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.room-list li small{color:var(--muted);margin-top:2px;display:block}.overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#050814cc;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.overlay-card{background:linear-gradient(180deg, var(--panel), var(--bg-2));border:1px solid var(--border);text-align:center;border-radius:20px;width:100%;max-width:420px;padding:34px;box-shadow:0 20px 80px #0009}.overlay-card h2{font-size:28px}.overlay-buttons{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px;display:flex}.spinner{border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:42px;height:42px;margin:0 auto 16px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.game-main{flex:1;justify-content:center;align-items:flex-start;padding:20px;display:flex}.hud-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-bottom:14px;display:flex}.hud-badge{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:8px 14px;font-size:14px}.hud-badge strong{color:var(--accent-2)}.hud-turn{border-color:var(--gold);color:var(--gold)}.controls-card{text-align:left}.controls-card h3{text-align:center}.controls-list{flex-direction:column;gap:6px;margin:14px 0;display:flex}.controls-row{background:var(--bg);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:10px;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;font-size:14px;display:flex}.controls-row:hover{border-color:var(--accent)}.controls-row kbd{background:var(--panel-2);border:1px solid var(--border);text-align:center;border-bottom-width:3px;border-radius:6px;min-width:46px;padding:3px 10px;font-family:inherit;font-size:13px}.controls-listening{border-color:var(--gold)}.controls-listening kbd{color:var(--gold);border-color:var(--gold)}.controls-options{flex-direction:column;gap:10px;margin:4px 0 14px;display:flex}.controls-option{justify-content:space-between;align-items:center;gap:12px;font-size:14px;display:flex}.controls-seg{background:var(--bg);border:1px solid var(--border);border-radius:9px;gap:3px;padding:3px;display:inline-flex}.controls-seg button{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:7px;padding:6px 12px;font-size:13px;font-weight:600}.controls-seg button.active{background:var(--accent);color:#fff}.home-section{margin-top:34px}.home-section h3{color:var(--accent-2);align-items:center;gap:8px;margin-bottom:14px;font-size:18px;display:flex}.home-section h3 .pill{font-size:11px}@media (width<=640px){.create-row{flex-direction:column}.topbar{padding:10px 12px}.topbar-brand{font-size:15px}}