:root{--bg-deep:#05090f;--panel-bg:linear-gradient(180deg, #101f32eb, #08131ff2);--border:#2c4560;--border-soft:#1c2f44;--gold:#ffcb5c;--gold-soft:#ffe4a3;--teal:#79eadc;--danger:#ff8c8c;--text:#eef7ff;--text-dim:#b8cde0;--text-faint:#6f89a3}*{box-sizing:border-box}html,body,#root,main,.game{width:100%;height:100%;margin:0;overflow:hidden}body{color:var(--text);background:var(--bg-deep);font-family:Inter,system-ui,sans-serif}button{border:1px solid var(--border);width:fit-content;color:var(--text-dim);letter-spacing:.2px;cursor:pointer;background:#14243866;border-radius:10px;justify-content:center;align-items:center;gap:8px;margin:0;padding:10px 16px;font:700 13px/1 Inter,system-ui,sans-serif;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s,color .15s,opacity .15s;display:inline-flex}button:hover:not(:disabled){color:var(--text);border-color:var(--teal);background:#ffffff0f;transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0)}button:disabled{cursor:not-allowed;opacity:.5}.btn-primary{color:#08111f;background:linear-gradient(135deg, var(--gold-soft), var(--gold));border-color:#0000;box-shadow:0 10px 26px -12px #ffcb5c80}.btn-primary:hover:not(:disabled){color:#08111f;border-color:#0000;box-shadow:0 14px 30px -10px #ffcb5caa}.btn-danger{color:var(--danger);background:#ff8c8c0f;border-color:#ff8c8c3a}.btn-danger:hover:not(:disabled){color:#fff;border-color:var(--danger);background:#ff8c8c26}.panel>button,.panel>form>button{width:100%;padding:13px 18px;font-size:14px}.hud{background:#08111fd9;border:1px solid #48637e;border-radius:10px;gap:5px;padding:12px 14px;display:grid;position:fixed;inset:18px auto auto 18px;box-shadow:0 8px 30px #0007}.hud strong{color:#ffcb5c;font-size:18px}.hud span{color:#b8cde0;font-size:13px}.connection.connected{color:#79eadc}.connection.connecting,.connection.reconnecting{color:#ffcb5c}.connection.error,.connection.disconnected{color:#ff8c8c}.position-log{color:#d9fff9;background:#050c16cc;border:1px solid #35536d;border-radius:6px;grid-template-columns:repeat(3,auto);gap:4px 14px;margin:5px 0;padding:8px 10px;font:12px/1.35 Consolas,monospace;display:grid}.position-log b{color:#79eadc;grid-column:1/-1;font-family:Inter,system-ui,sans-serif}.position-log span{color:inherit;font:inherit}.match-panel{color:#b8cde0;white-space:nowrap;background:#08111fd9;border:1px solid #48637e;border-radius:10px;flex-wrap:wrap;align-items:center;gap:16px;padding:10px 22px;font:13px/1.3 Inter,system-ui,sans-serif;display:flex;position:fixed;top:18px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #0007}.match-panel strong{color:#ffcb5c;font-size:15px}.match-panel .timer{color:#79eadc;font-family:Consolas,monospace;font-weight:700}.match-panel .score{color:#eef7ff;font-family:Consolas,monospace;font-weight:700}.match-panel .slowed-indicator{color:#ff8c8c;font-weight:700}.match-panel .winner{color:#ffcb5c;font-weight:700}.match-panel .reconnecting{color:#ff8c8c;font-weight:700}.match-panel .returning{color:#b8cde0}.ability-bar{gap:18px;display:flex;position:fixed;bottom:22px;left:50%;transform:translate(-50%)}.ability-slot{flex-direction:column;align-items:center;gap:4px;display:flex}.ability-button{color:#eef7ff;cursor:pointer;background:#101c2ce6;border:2px solid #48637e;border-radius:50%;width:58px;height:58px;margin:0;padding:0;transition:transform .1s,border-color .15s;position:relative;overflow:hidden;box-shadow:0 6px 16px #0008}.ability-button:hover:not(:disabled){border-color:#79eadc;transform:translateY(-3px)}.ability-button:disabled{cursor:not-allowed;opacity:.55}.ability-button .cooldown-overlay{background:conic-gradient(#000000b3 var(--progress,0%), transparent var(--progress,0%));pointer-events:none;position:absolute;inset:0}.ability-button .ability-face{z-index:1;font:700 13px/1 Inter,system-ui,sans-serif;position:relative}.ability-slot .key-hint{color:#b8cde0;font:700 11px/1 Consolas,monospace}.spectator-controls{background:#08111fd9;border:1px solid #48637e;border-radius:999px;align-items:center;gap:16px;padding:10px 18px;display:flex;position:fixed;bottom:22px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #0007}.spectator-controls-label{letter-spacing:.4px;text-transform:uppercase;color:#b8cde0;font:700 12px/1 Inter,system-ui,sans-serif}.spectator-switch{color:#eef7ff;cursor:pointer;background:#101c2ce6;border:2px solid #48637e;border-radius:50%;width:44px;height:44px;margin:0;padding:0;font:700 20px/1 Inter,system-ui,sans-serif;transition:transform .1s,border-color .15s}.spectator-switch:hover{border-color:#79eadc;transform:translateY(-3px)}.auth-screen{isolation:isolate;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;height:100%;padding:18px;display:flex;position:relative;overflow:hidden}.auth-screen:before{content:"";filter:blur(6px);z-index:-2;background:radial-gradient(circle at 18% 22%,#ffcb5c26,#0000 42%),radial-gradient(circle at 82% 18%,#79eadc26,#0000 44%),radial-gradient(circle at 50% 92%,#3d6fff22,#0000 48%);animation:20s ease-in-out infinite alternate aurora-drift;position:absolute;inset:-20%}.auth-screen:after{content:"";z-index:-1;background-image:linear-gradient(#ffffff09 1px,#0000 1px),linear-gradient(90deg,#ffffff09 1px,#0000 1px);background-size:44px 44px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle at 50% 42%,#000 0%,#0000 72%);mask-image:radial-gradient(circle at 50% 42%,#000 0%,#0000 72%)}@keyframes aurora-drift{0%{transform:translate(0,0)scale(1)}to{transform:translate(-3%,2%)scale(1.08)}}.panel{border:1px solid var(--border-soft);background:var(--panel-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);text-align:center;border-radius:18px;justify-items:center;gap:14px;width:min(380px,92vw);padding:30px 26px 26px;animation:.45s cubic-bezier(.16,1,.3,1) both panel-in;display:grid;position:relative;box-shadow:0 30px 70px -20px #000b,inset 0 0 0 1px #ffffff0a,inset 0 1px #ffffff14}.panel:before{content:"";background:linear-gradient(90deg, transparent, var(--gold), var(--teal), transparent);opacity:.85;border-radius:2px;height:2px;position:absolute;top:0;left:16%;right:16%}@keyframes panel-in{0%{opacity:0;transform:translateY(16px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.panel>strong:first-child{letter-spacing:.4px;background:linear-gradient(135deg, var(--gold-soft), var(--gold) 45%, var(--teal));color:#0000;filter:drop-shadow(0 0 18px #ffcb5c2e);-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:800;display:block}.auth-form{gap:14px;display:grid}.auth-tabs{border:1px solid var(--border-soft);background:#050c16;border-radius:10px;gap:4px;width:100%;padding:4px;display:flex}.auth-tabs button{color:var(--text-faint);background:0 0;border:none;border-radius:7px;flex:1;margin:0;padding:8px 10px}.auth-tabs button:hover:not(:disabled){color:var(--text-dim);background:0 0;transform:none}.auth-tabs button[aria-selected=true]{background:linear-gradient(135deg, var(--gold-soft), var(--gold));color:#08111f;box-shadow:0 6px 16px -6px #ffcb5c80}.auth-tabs button[aria-selected=true]:disabled{opacity:1;cursor:default}.auth-form label{text-align:left;letter-spacing:.5px;text-transform:uppercase;width:100%;color:var(--text-faint);gap:6px;font-size:11px;font-weight:700;display:grid}.auth-form input{border:1px solid var(--border-soft);width:100%;color:var(--text);background:#050c16;border-radius:9px;padding:11px 13px;font:14px Inter,system-ui,sans-serif;transition:border-color .15s,box-shadow .15s}.auth-form input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px #79eadc26}.auth-form .auth-error{width:100%}.auth-error{color:var(--danger);text-align:left;background:#ff8c8c14;border:1px solid #ff8c8c33;border-radius:8px;align-items:center;gap:6px;padding:8px 10px;font-size:13px;display:flex}.auth-error:before{content:"⚠"}.session-bar{z-index:6;border:1px solid var(--border);color:var(--text-dim);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#08111fd9;border-radius:999px;align-items:center;gap:10px;padding:7px 10px 7px 7px;font-size:13px;display:flex;position:fixed;top:18px;right:18px}.session-bar-avatar{background:linear-gradient(135deg, var(--gold-soft), var(--gold));color:#08111f;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:26px;height:26px;font-size:12px;font-weight:800;display:flex}.session-bar span{color:var(--text);font-weight:600}.session-bar button{width:fit-content;padding:7px 12px}.menu-panel{width:min(400px,92vw)}.brand{justify-items:center;gap:3px;margin-bottom:4px;display:grid}.brand-mark{letter-spacing:1px;background:linear-gradient(135deg, var(--gold-soft), var(--gold) 45%, var(--teal));color:#0000;filter:drop-shadow(0 0 18px #ffcb5c2e);-webkit-background-clip:text;background-clip:text;font-size:26px;font-weight:800}.menu-nav{gap:10px;width:100%;display:grid}.menu-item{border:1px solid var(--border-soft);width:100%;color:var(--text);text-align:left;background:#0d1b2b80;border-radius:12px;align-items:center;gap:14px;padding:12px 16px 12px 14px;display:flex;position:relative;overflow:hidden}.menu-item:before{content:"";background:linear-gradient(180deg, var(--gold), var(--teal));width:3px;transition:transform .2s;position:absolute;inset:0 auto 0 0;transform:scaleY(0)}.menu-item:hover:not(:disabled){color:var(--text);background:#132539b3;border-color:#3d5b7a;transform:translate(4px)}.menu-item:hover:not(:disabled):before{transform:scaleY(1)}.menu-item-icon{background:#ffffff0d;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:19px;display:flex}.menu-item-body{gap:2px;min-width:0;display:grid}.menu-item-title{color:var(--text);font-size:14px;font-weight:700}.menu-item-subtitle{color:var(--text-faint);letter-spacing:.1px;font-size:11px;font-weight:500}.menu-item-chevron{color:var(--text-faint);margin-left:auto;font-size:18px;transition:transform .18s,color .18s}.menu-item:hover:not(:disabled) .menu-item-chevron{color:var(--teal);transform:translate(3px)}.lobby-panel .auth-error,.lobby-panel .lobby-status{width:100%}.lobby-status{color:var(--teal);justify-content:center;align-items:center;gap:8px;font:600 14px/1.3 Consolas,monospace;display:flex}.lobby-status:before{content:"";background:var(--teal);border-radius:50%;flex-shrink:0;width:8px;height:8px;animation:1.6s ease-out infinite status-pulse;box-shadow:0 0 #79eadc80}@keyframes status-pulse{0%{box-shadow:0 0 #79eadc66}70%{box-shadow:0 0 0 8px #79eadc00}to{box-shadow:0 0 #79eadc00}}.customization-panel{width:min(440px,92vw)}.outfit-grid{flex-wrap:wrap;justify-content:center;gap:14px;width:100%;display:flex}.outfit-option{border:2px solid var(--border-soft);cursor:pointer;background:#050c16;border-radius:12px;justify-content:center;align-items:center;width:88px;height:88px;margin:0;padding:0;display:flex;overflow:hidden}.outfit-option:hover:not(:disabled){transform:translateY(-2px)scale(1.03)}.outfit-option:hover:not(:disabled):not([aria-pressed=true]){border-color:var(--teal)}.outfit-option[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 3px #ffcb5c33,0 10px 22px -10px #ffcb5c66}.outfit-option:disabled{cursor:not-allowed;opacity:.6}.outfit-preview{width:64px;height:64px;image-rendering:pixelated;background-repeat:no-repeat;transform:scale(1.6)}.history-panel{scrollbar-width:thin;scrollbar-color:var(--border) transparent;width:min(440px,92vw);max-height:80vh;overflow-y:auto}.history-panel::-webkit-scrollbar{width:8px}.history-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}.history-list{gap:8px;width:100%;margin:0;padding:0;list-style:none;display:grid}.history-entry{border:1px solid var(--border-soft);text-align:left;background:#0d1b2b80;border-left-width:3px;border-radius:10px;gap:2px;padding:12px 14px;transition:transform .15s,border-color .15s;display:grid}.history-entry:hover{transform:translate(3px)}.history-entry .history-outcome{font-weight:700}.history-entry .history-opponent{color:var(--text-dim);font-size:13px}.history-entry .history-score{color:var(--text);font:700 14px/1.3 Consolas,monospace}.history-entry .history-meta{color:var(--text-faint);font-size:12px}.history-outcome-win{border-left-color:var(--teal)}.history-outcome-win .history-outcome{color:var(--teal)}.history-outcome-win .history-outcome:before{content:"▲ "}.history-outcome-loss{border-left-color:var(--danger)}.history-outcome-loss .history-outcome{color:var(--danger)}.history-outcome-loss .history-outcome:before{content:"▼ "}.history-outcome-draw{border-left-color:var(--gold)}.history-outcome-draw .history-outcome{color:var(--gold)}.history-outcome-draw .history-outcome:before{content:"◆ "}.friends-request-form{gap:8px;width:100%;display:flex}.friends-request-form input{border:1px solid var(--border-soft);color:var(--text);background:#050c16;border-radius:9px;flex:1;padding:11px 13px;font:14px Inter,system-ui,sans-serif;transition:border-color .15s,box-shadow .15s}.friends-request-form input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px #79eadc26}.friends-request-form button{width:fit-content}.friends-section{text-align:left;gap:8px;width:100%;display:grid}.friends-section-title{color:var(--text-faint);letter-spacing:.6px;text-transform:uppercase;align-items:center;gap:8px;font-size:11px;font-weight:700;display:flex}.friends-section-title:after{content:"";background:var(--border-soft);flex:1;height:1px}.friends-list{gap:8px;width:100%;margin:0;padding:0;list-style:none;display:grid}.friends-entry{border:1px solid var(--border-soft);background:#0d1b2b80;border-radius:10px;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;transition:border-color .15s;display:flex}.friends-entry:hover{border-color:var(--border)}.friends-entry-actions{gap:6px;display:flex}.friends-entry-actions button{width:fit-content;padding:7px 12px;font-size:12px}.friends-presence{color:var(--text);align-items:center;gap:8px;font-weight:600;display:flex}.friends-presence:before{content:"";background:#4a5c70;border-radius:50%;flex-shrink:0;width:9px;height:9px}.friends-presence-online:before{background:var(--teal);box-shadow:0 0 0 3px #79eadc26}.friends-presence-offline:before{background:#4a5c70}.auth-screen.with-sidebar{padding-right:288px}.friends-sidebar{border-left:1px solid var(--border-soft);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:4;background:#0a1421e6;width:264px;animation:.4s cubic-bezier(.16,1,.3,1) both sidebar-in;position:fixed;top:0;bottom:0;right:0;box-shadow:-24px 0 50px -34px #000c}.friends-sidebar-collapsed{flex-direction:column;align-items:center;gap:8px;width:34px;padding-top:112px;display:flex}@keyframes sidebar-in{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}.friends-sidebar-toggle{border:1px solid var(--border);width:32px;height:32px;color:var(--text-dim);z-index:6;background:#101c2c;border-radius:50%;padding:0;font-size:15px;position:absolute;top:70px;left:-16px}.friends-sidebar-collapsed-icon{font-size:18px}.friends-sidebar-collapsed-badge{background:var(--teal);color:#08111f;border-radius:999px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 4px;font:800 11px/1 Inter,system-ui,sans-serif;display:flex}.friends-sidebar-body{scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex-direction:column;gap:14px;height:100%;padding:96px 16px 18px;display:flex;overflow-y:auto}.friends-sidebar-body::-webkit-scrollbar{width:6px}.friends-sidebar-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}.friends-sidebar-header{color:var(--text-faint);letter-spacing:.6px;text-transform:uppercase;justify-content:space-between;align-items:center;font:700 11px/1 Inter,system-ui,sans-serif;display:flex}.friends-sidebar-header em{color:var(--teal);margin-left:6px;font-style:normal}.friends-sidebar-add-toggle{border-radius:7px;width:24px;height:24px;padding:0;font-size:16px;line-height:1}.friends-sidebar .friends-request-form input{padding:9px 11px;font-size:13px}.friends-sidebar .friends-request-form button{padding:9px 12px;font-size:12px}.friends-sidebar .friends-section{gap:6px}.friends-sidebar .friends-entry{padding:8px 10px}.friends-sidebar .friends-entry span{font-size:13px}.friends-sidebar .friends-entry-actions{opacity:0;transition:opacity .15s}.friends-sidebar .friends-entry:hover .friends-entry-actions,.friends-sidebar .friends-entry:focus-within .friends-entry-actions,.friends-sidebar .friends-section:first-of-type .friends-entry-actions{opacity:1}.friends-entry-actions .friends-icon-btn{width:26px;height:26px;padding:0;font-size:12px}.friends-empty{justify-content:flex-start;font-size:12px}.room-host-panel{width:min(420px,92vw)}.room-spectator-status{color:var(--text-faint);text-transform:uppercase;letter-spacing:.4px;font-size:12px}.room-invite-banner{border:1px solid var(--border);color:var(--text-dim);text-align:center;z-index:10;background:#08111fe6;border-radius:10px;flex-direction:column;align-items:center;gap:10px;padding:14px 20px;font:13px/1.4 Inter,system-ui,sans-serif;animation:.3s cubic-bezier(.16,1,.3,1) both sidebar-in;display:flex;position:fixed;top:18px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #0007}.room-invite-actions{gap:10px;display:flex}.room-invite-actions button{padding:8px 16px;font-size:12px}.room-guest-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:15;background:#05090fdb;justify-content:center;align-items:center;animation:.3s cubic-bezier(.16,1,.3,1) both sidebar-in;display:flex;position:fixed;inset:0}.room-guest-overlay .room-host-panel .friends-list{width:100%}.friends-empty:before{display:none}