:root{color-scheme:dark;--bg: #192A56;--bg-accent: #1e3264;--bg-ambient: radial-gradient(1400px 700px at 78% -18%, rgba(255,195,18,.04), transparent 62%), radial-gradient(900px 520px at 14% 2%, rgba(255,195,18,.06), transparent 68%), radial-gradient(600px 300px at 50% 100%, rgba(25,42,86,.08), transparent 55%), #192A56;--panel: #1e3264;--panel-2: #233a6f;--panel-3: #28427a;--panel-elevated: #2a4580;--panel-glow: rgba(255,195,18,.08);--text: #FFFFFF;--text-secondary: #DCDCDC;--muted: #94a3b8;--muted-2: #64748b;--neutral: rgba(255,255,255,.04);--neutral-hover: rgba(255,255,255,.07);--accent: #FFC312;--accent-2: #ffd54f;--accent-warm: #FFC312;--error: #EA2027;--success: #32FF7E;--warning: #fbbf24;--ring: rgba(255,195,18,.4);--ring-focus: rgba(255,195,18,.6);--vignette-intensity: .25}:root[data-theme=light]{color-scheme:light;--bg: #f8fafc;--bg-accent: #f1f5f9;--bg-ambient: radial-gradient(1400px 700px at 78% -18%, rgba(255,195,18,.06), transparent 62%), radial-gradient(900px 520px at 14% 2%, rgba(255,195,18,.08), transparent 68%), radial-gradient(600px 300px at 50% 100%, rgba(25,42,86,.04), transparent 55%), #f8fafc;--panel: #ffffff;--panel-2: #f8fafc;--panel-3: #f1f5f9;--panel-elevated: #ffffff;--panel-glow: rgba(255,195,18,.12);--text: #0f172a;--text-secondary: #334155;--muted: #64748b;--muted-2: #94a3b8;--neutral: rgba(0,0,0,.04);--neutral-hover: rgba(0,0,0,.07);--accent: #d4a00a;--accent-2: #FFC312;--accent-warm: #d4a00a;--error: #dc2626;--success: #32FF7E;--warning: #f59e0b;--ring: rgba(212,160,10,.4);--ring-focus: rgba(212,160,10,.6);--vignette-intensity: .12}:root{--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.35' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--space-8: 4rem;--space-9: 6rem;--radius-xs: 6px;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0,0,0,.15);--shadow-sm: 0 2px 4px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);--shadow-md: 0 4px 8px rgba(0,0,0,.16), 0 2px 4px rgba(0,0,0,.12), 0 1px 2px rgba(255,195,18,.04);--shadow-lg: 0 8px 16px rgba(0,0,0,.2), 0 4px 8px rgba(0,0,0,.14), 0 2px 4px rgba(255,195,18,.06);--shadow-xl: 0 16px 32px rgba(0,0,0,.24), 0 8px 16px rgba(0,0,0,.18), 0 4px 8px rgba(255,195,18,.08);--shadow-2xl: 0 24px 48px rgba(0,0,0,.28), 0 12px 24px rgba(0,0,0,.22), 0 6px 12px rgba(255,213,79,.1);--highlight: linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.02) 50%, transparent 100%);--highlight-subtle: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 100%);--font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;--font-size-xs: clamp(.75rem, .73rem + .1vw, .8rem);--font-size-sm: clamp(.875rem, .85rem + .15vw, .938rem);--font-size-base: clamp(1rem, .975rem + .2vw, 1.063rem);--font-size-md: clamp(1.125rem, 1.09rem + .25vw, 1.25rem);--font-size-lg: clamp(1.333rem, 1.28rem + .35vw, 1.5rem);--font-size-xl: clamp(1.777rem, 1.68rem + .5vw, 2rem);--font-size-2xl: clamp(2.369rem, 2.2rem + .7vw, 2.667rem);--font-size-200: clamp(.8125rem, .8rem + .1vw, .875rem);--font-size-300: clamp(.9375rem, .9rem + .15vw, 1rem);--font-size-500: clamp(1.25rem, 1.2rem + .25vw, 1.375rem);--line-height-tight: 1.25;--line-height-snug: 1.375;--line-height-normal: 1.5;--line-height-relaxed: 1.625;--letter-spacing-tight: -.02em;--letter-spacing-normal: 0;--letter-spacing-wide: .025em;--letter-spacing-wider: .05em;--grid-columns: 12;--grid-gutter: var(--space-6);--grid-margin: var(--space-5);--container-max: 1280px;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-out-quart: cubic-bezier(.25, 1, .5, 1);--ease-in-out-circ: cubic-bezier(.85, 0, .15, 1);--transition-fast: .15s var(--ease-out-quart);--transition-base: .22s var(--ease-out-quart);--transition-slow: .35s var(--ease-out-expo);--transition-slower: .5s var(--ease-out-expo);--touch-target-min: 44px;--interactive-min: 44px;--avatar-lg: 72px;--avatar-md: 54px;--avatar-sm: 40px}.player-badge{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--text)}.player-badge--vertical{flex-direction:column;align-items:flex-start;gap:var(--space-2)}.player-badge__avatar{width:var(--avatar-md);height:var(--avatar-md);border-radius:var(--radius-lg);border:1px solid rgba(255,195,18,.3);background:linear-gradient(165deg,#1e293be6,#111827eb);box-shadow:inset 0 1px #ffffff14,0 6px 12px #0006;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--accent)}.player-badge__avatar img{width:100%;height:100%;object-fit:cover;display:block}.player-badge__meta{display:flex;flex-direction:column;gap:4px}.player-badge__row{display:inline-flex;align-items:center;gap:var(--space-2)}.player-badge__name{font-weight:700;letter-spacing:var(--letter-spacing-wide)}.player-badge__level{padding:.15rem .5rem;border-radius:var(--radius-full);border:1px solid rgba(255,195,18,.35);background:#ffc31224;color:var(--accent);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em}.player-badge__level.guest-level{border-color:#ffb84d66;background:#ffb84d2e;color:var(--warning)}.player-badge__subtitle{font-size:var(--font-size-sm);color:var(--muted)}.player-badge--lg .player-badge__avatar{width:var(--avatar-lg);height:var(--avatar-lg)}.player-badge--sm .player-badge__avatar{width:var(--avatar-sm);height:var(--avatar-sm);border-radius:var(--radius-md)}.player-badge--sm .player-badge__name{font-size:var(--font-size-sm)}.player-badge--sm .player-badge__subtitle{font-size:var(--font-size-xs)}.profile-highlight{display:flex;justify-content:space-between;align-items:center;padding:var(--space-5);border-radius:var(--radius-lg);border:2px solid rgba(255,195,18,.2);background:linear-gradient(135deg,#1e326499,#142346b3);box-shadow:var(--shadow-md),inset 0 1px #ffffff14;margin-bottom:var(--space-5);gap:var(--space-4)}.profile-highlight .btn{white-space:nowrap}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;font-family:var(--font-sans);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--text);background:var(--bg-ambient);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;font-optical-sizing:auto}img,video{max-width:100%;height:auto;display:block}:focus-visible{outline:2px solid var(--ring-focus);outline-offset:2px;border-radius:var(--radius-xs)}.app{display:flex;min-height:100vh;flex-direction:column;background:var(--bg-ambient);position:relative;isolation:isolate}.app:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:var(--noise);mix-blend-mode:overlay;opacity:.6;z-index:1}.app:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 30% 20%,rgba(255,195,18,.03) 0%,transparent 50%),radial-gradient(circle at 70% 60%,rgba(255,213,79,.025) 0%,transparent 40%),radial-gradient(circle at 50% 90%,rgba(61,108,170,.02) 0%,transparent 35%);z-index:1;animation:meshShift 20s ease-in-out infinite}.app>main:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 20%,rgba(0,0,0,var(--vignette-intensity)) 100%);z-index:0}@keyframes meshShift{0%,to{opacity:.6;transform:scale(1) rotate(0)}50%{opacity:.8;transform:scale(1.05) rotate(2deg)}}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.topbar{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4) var(--space-6);background:linear-gradient(135deg,#0c1424d9,#090e1abf 60%,#112034b3);border-bottom:1px solid rgba(255,195,18,.12);position:sticky;top:0;z-index:100;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--shadow-sm),inset 0 -1px #ffffff08;min-height:var(--touch-target-min)}.topbar:before{content:"";position:absolute;inset:0;background:var(--highlight-subtle);pointer-events:none;opacity:.4}.brand{font-weight:800;font-size:var(--font-size-lg);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;z-index:1}.sub{color:var(--muted);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;font-weight:600}.main{flex:1;width:min(var(--container-max),100vw);margin:0 auto;padding:var(--space-7) var(--space-5) calc(var(--space-8) + env(safe-area-inset-bottom));position:relative;z-index:2}@media (max-width: 768px){.main{padding:var(--space-5) var(--space-4) calc(var(--space-7) + env(safe-area-inset-bottom))}}.layout-grid{display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));gap:var(--grid-gutter);align-items:start}.row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center}.main-grid{width:100%}.foot{text-align:center;color:var(--muted);padding:var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));border-top:1px solid rgba(255,195,18,.08);background:linear-gradient(180deg,transparent 0%,rgba(10,16,24,.6) 100%);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);font-size:var(--font-size-sm);position:relative;z-index:2}.foot:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,195,18,.15) 50%,transparent 100%)}.card{position:relative;background:linear-gradient(165deg,#192846f2,#0f192deb);border-radius:var(--radius-xl);padding:var(--space-6);border:1px solid rgba(255,195,18,.15);box-shadow:var(--shadow-xl),inset 0 1px #ffffff0f;backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);isolation:isolate;overflow:hidden;transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-fast);animation:cardIn .45s var(--ease-out-expo) both;animation-delay:calc(var(--card-order, 0) * 60ms);will-change:transform}.card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(140% 140% at 100% 0%,rgba(255,195,18,.05) 0%,transparent 50%),radial-gradient(120% 120% at 0% 100%,rgba(255,213,79,.08) 0%,transparent 55%);mix-blend-mode:screen;opacity:.7;z-index:-1}.card:after{content:"";position:absolute;top:0;left:0;right:0;height:60%;border-radius:inherit;background:linear-gradient(165deg,rgba(255,255,255,.08) 0%,transparent 60%);pointer-events:none;opacity:.6;z-index:-1}.card:hover,.card:focus-within{transform:translate3d(0,-3px,0) scale(1.015);box-shadow:var(--shadow-xl),0 0 40px #ffc31214,inset 0 1px #ffffff0f;border-color:#ffc31240}.card:active{transform:translateZ(0) scale(1.005);transition-duration:.1s}.card-header{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5)}.eyebrow{text-transform:none;letter-spacing:var(--letter-spacing-wide);font-size:var(--font-size-sm);color:var(--text-secondary);margin:0;font-weight:600;opacity:1}.card-header h1,.card-header h2,.card-header h3{margin:0;font-size:var(--font-size-lg);line-height:var(--line-height-tight);font-weight:700;letter-spacing:var(--letter-spacing-tight);color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,.3)}.card-sub{margin:0;color:var(--text-secondary);max-width:42ch;font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}.card-footer{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid rgba(255,195,18,.08);font-size:var(--font-size-sm);color:var(--muted)}.card-footer:before{content:"";position:absolute;left:var(--space-6);right:var(--space-6);top:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(255,195,18,.2) 50%,transparent 100%)}.status{justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);padding-top:var(--space-4);margin-top:var(--space-4);border-top:1px solid rgba(255,195,18,.08);position:relative}.status-pill{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);background:linear-gradient(135deg,#ffc3122e,#ffd54f26);border:1px solid rgba(255,195,18,.3);color:var(--accent);font-weight:700;letter-spacing:var(--letter-spacing-wide);font-size:var(--font-size-sm);box-shadow:var(--shadow-sm),inset 0 1px #ffffff1a;position:relative;overflow:hidden}.status-pill:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.15) 50%,transparent 100%);transform:translate(-100%);animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%,to{transform:translate(-100%)}50%{transform:translate(100%)}}.form-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:var(--space-4)}.field{display:flex;flex-direction:column;gap:var(--space-2)}.label{font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-normal);text-transform:none;color:var(--text);font-weight:600;margin-bottom:var(--space-2);display:block}.input{width:100%;border-radius:var(--radius-md);border:2px solid rgba(255,195,18,.3);background:linear-gradient(165deg,#0f1928f2,#0c1423);color:var(--text);padding:var(--space-3) var(--space-4);min-height:var(--touch-target-min);font-size:var(--font-size-base);font-family:var(--font-sans);transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast),background var(--transition-fast);box-shadow:inset 0 2px 4px #0000004d,inset 0 1px #00000026;position:relative}.input::placeholder{color:var(--muted);opacity:.7}.input:hover{border-color:#ffc31266;background:linear-gradient(165deg,#0c1424f2,#0a1220)}.input:focus,.input:focus-visible{outline:none;border-color:var(--accent);background:linear-gradient(165deg,#0e1828,#0c1422);box-shadow:0 0 0 4px #ffc31240,inset 0 2px 4px #00000026,inset 0 1px #ffffff08;transform:translateY(-1px)}.toggle{display:inline-flex;align-items:center;gap:var(--space-3);font-size:var(--font-size-base);cursor:pointer;color:var(--text-secondary);padding:var(--space-2) 0;min-height:var(--touch-target-min);transition:color var(--transition-fast)}.toggle:hover{color:var(--text)}.toggle input[type=checkbox]{width:24px;height:24px;accent-color:var(--accent);cursor:pointer;transition:transform var(--transition-fast)}.toggle input[type=checkbox]:hover{transform:scale(1.1)}.toggle input[type=checkbox]:focus-visible{outline:2px solid var(--ring-focus);outline-offset:2px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);min-height:var(--touch-target-min);border-radius:var(--radius-md);border:1px solid rgba(255,195,18,.2);background:linear-gradient(135deg,#1c3352e6,#12223eeb);color:var(--text);font-weight:700;font-size:var(--font-size-base);letter-spacing:var(--letter-spacing-wide);cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast),background var(--transition-base);box-shadow:var(--shadow-sm),inset 0 1px #ffffff0d;position:relative;overflow:hidden;isolation:isolate;font-family:var(--font-sans);-webkit-tap-highlight-color:transparent}.btn:before{content:"";position:absolute;inset:0;background:var(--highlight);opacity:.3;pointer-events:none;transition:opacity var(--transition-fast)}.btn:hover:not(:disabled){transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-md),0 0 20px #ffc3121a,inset 0 1px #ffffff14;border-color:#ffc3124d}.btn:hover:not(:disabled):before{opacity:.5}.btn:active:not(:disabled){transform:translateY(0) scale(.98);box-shadow:var(--shadow-xs),inset 0 2px 4px #0003;transition-duration:80ms}.btn:focus-visible{outline:none;box-shadow:0 0 0 4px #ffc31266,0 0 0 8px #ffc31233,var(--shadow-md);border-color:var(--accent)}.lobby-tab:focus-visible{outline:none;box-shadow:0 0 0 3px #ffc31266,inset 0 0 0 2px #ffc3124d}.input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px #ffc31240,inset 0 2px 4px #00000026,inset 0 1px #ffffff08;transform:translateY(-1px)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn.ghost{background:transparent;border-color:#ffc31240;color:var(--accent);box-shadow:none;padding-inline:var(--space-4)}.btn.ghost:before{opacity:0}.btn.ghost:hover:not(:disabled){transform:translateY(-1px) scale(1.02);border-color:#ffc31266;background:#ffc31214;box-shadow:var(--shadow-sm),0 0 20px #ffc31214}.btn.ghost:hover:not(:disabled):before{opacity:.2}.btn.ghost:active:not(:disabled){transform:translateY(0) scale(1);background:#ffc3121f}.btn.primary{background:linear-gradient(135deg,#ffc31247,#05966942);color:var(--text);border-color:#ffc31280;box-shadow:var(--shadow-md),inset 0 1px #ffc3124d,0 0 25px #ffc3121f;font-weight:700}.btn.primary:before{background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%);opacity:.5}.btn.primary:hover:not(:disabled){background:linear-gradient(135deg,#ffc31252,#05966947);border-color:#ffc3128c;box-shadow:var(--shadow-md),0 0 30px #ffc3122e,inset 0 1px #ffc31259}.btn.primary:hover:not(:disabled):before{opacity:.7}.kbd{background:linear-gradient(165deg,#1e293bd9,#182333e6);border:1px solid rgba(255,195,18,.2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--font-size-xs);font-weight:600;letter-spacing:var(--letter-spacing-wide);box-shadow:var(--shadow-xs),inset 0 1px #ffffff0d;color:var(--accent)}.entry-card{grid-column:span min(12,var(--grid-columns));display:flex;flex-direction:column;gap:var(--space-3)}.lobby-card{grid-column:1 / -1;display:flex;flex-direction:column;gap:var(--space-4)}.lobby-tabs{display:flex;gap:var(--space-1);background:linear-gradient(165deg,#0a1220b3,#080f1cbf);border-radius:var(--radius-md);padding:var(--space-1);border:1px solid rgba(255,195,18,.12);width:100%;box-shadow:inset 0 2px 4px #0003;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.lobby-tabs::-webkit-scrollbar{display:none}.lobby-tab{border:none;background:transparent;color:var(--text-secondary);font-weight:600;font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-normal);text-transform:none;padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),transform var(--transition-fast);min-height:var(--touch-target-min);min-width:var(--touch-target-min);position:relative;font-family:var(--font-sans);white-space:nowrap;flex:1}.lobby-tab:hover:not(.is-active){background:#ffc3121f;color:var(--text)}.lobby-tab.is-active{background:linear-gradient(135deg,#ffc31238,#ffd54f2e);color:var(--accent);box-shadow:var(--shadow-sm),inset 0 1px #ffffff1a;border:1px solid rgba(255,195,18,.35)}.lobby-tab.is-active:before{content:"";position:absolute;inset:0;background:var(--highlight);opacity:.3;pointer-events:none;border-radius:inherit}@media (max-width: 768px){.lobby-tab{flex:0 0 auto;min-width:120px}}.discover-panel{display:grid;gap:var(--space-3)}.discover-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4);border-radius:var(--radius-md);border:1px solid rgba(255,195,18,.12);background:linear-gradient(135deg,#0c1626b3,#0a1220bf);color:var(--text);cursor:pointer;transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-base);min-height:var(--touch-target-min);font-family:var(--font-sans);font-size:var(--font-size-base);box-shadow:var(--shadow-xs);position:relative;overflow:hidden}.discover-item:before{content:"";position:absolute;inset:0;background:var(--highlight-subtle);opacity:.2;pointer-events:none}.discover-item:hover:not(:disabled){transform:translateY(-2px) scale(1.01);border-color:#ffc3124d;background:linear-gradient(135deg,#0e1a2cd9,#0c1626e6);box-shadow:var(--shadow-md),0 0 20px #ffc3120f}.discover-item:active:not(:disabled){transform:translateY(0) scale(1)}.discover-room{font-weight:700;letter-spacing:var(--letter-spacing-wide);color:var(--text)}.discover-host{color:var(--muted);font-size:var(--font-size-sm)}.role-select{appearance:none;background-image:linear-gradient(160deg,#0d182b,#081020)}.duel-grid{grid-column:1 / -1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gutter);align-items:start}.duel-grid>*{min-width:0}.duel-grid>.stage-banner{grid-column:1 / -1}.high-card{grid-column:span 7}.opponent-card{grid-column:span 5}.room-shell{grid-column:span 12;display:grid;gap:var(--space-4)}@media (max-width: 1024px){.high-card,.opponent-card{grid-column:span 12}}.camera{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(255,195,18,.2);box-shadow:var(--shadow-lg),inset 0 0 0 1px #ffc3120f,0 0 40px #070f1e66;filter:brightness(var(--seal-bright, 1));background:linear-gradient(165deg,#050709,#030507);isolation:isolate;transition:box-shadow var(--transition-base),border-color var(--transition-base)}.camera:hover{border-color:#ffc3124d;box-shadow:var(--shadow-xl),inset 0 0 0 1px #ffc3121a,0 0 50px #ffc3120d}.camera.spectator{display:flex;align-items:center;justify-content:center;min-height:280px;color:var(--muted);background:linear-gradient(165deg,#0a121e99,#080e18b3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.spectator-placeholder{padding:var(--space-5) var(--space-6);border-radius:var(--radius-md);background:linear-gradient(135deg,#0a121ed9,#080e1ae6);border:1px solid rgba(255,195,18,.15);box-shadow:var(--shadow-sm);font-size:var(--font-size-base);text-align:center}.camera:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,transparent 20%,rgba(5,7,9,.3) 80%,rgba(5,7,9,.6) 100%);mix-blend-mode:multiply;opacity:.6}.video{width:100%;height:auto;transform:scaleX(-1);display:block}.overlay{position:absolute;inset:0;pointer-events:none;z-index:1}.camera-status{position:absolute;left:var(--space-4);bottom:var(--space-4);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);background:#091222d9;backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,195,18,.2);color:var(--muted);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-wide);font-weight:600;box-shadow:var(--shadow-sm),inset 0 1px #ffffff0d;pointer-events:auto}.seal{position:absolute;top:var(--space-4);right:var(--space-4);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);background:linear-gradient(135deg,#ffc3122e,#ffd54f26);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,195,18,.4);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:var(--accent);font-weight:700;box-shadow:var(--shadow-md),inset 0 1px #ffffff1a,0 0 30px #ffc3121f;animation:sealPulse 3s ease-in-out infinite;pointer-events:auto}@keyframes sealPulse{0%,to{box-shadow:var(--shadow-md),inset 0 1px #ffffff1a,0 0 30px #ffc3121f}50%{box-shadow:var(--shadow-lg),inset 0 1px #ffffff26,0 0 40px #ffc31233}}.snap{position:absolute;bottom:var(--space-3);left:50%;transform:translate(-50%);padding:.75rem 1.25rem;border-radius:var(--radius-sm);background:#0c1424a6;border:1px solid rgba(255,195,18,.25);backdrop-filter:blur(14px)}.values{display:flex;gap:var(--space-2);font-size:var(--font-size-500);font-weight:800;letter-spacing:.08em}.value-chip{padding:.35rem .75rem;border-radius:10px;background:#122036d9;border:1px solid rgba(69,116,168,.6);box-shadow:inset 0 0 10px #0c182b99}.opponent-body{display:grid;grid-template-columns:minmax(140px,1fr) 1fr;gap:var(--space-4);align-items:center}.thumb{display:flex;align-items:center;justify-content:center;width:140px;height:90px;border-radius:var(--radius-sm);border:1px dashed rgba(73,126,184,.55);background:#0b1321d9;color:#5684bae6;position:relative;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;border-radius:inherit}.stable-thumb{flex:0 0 auto;width:140px;height:90px}.opponent-stats{display:flex;flex-direction:column;gap:var(--space-2)}.dice-stack{display:flex;flex-wrap:wrap;gap:var(--space-2)}.values-row{display:flex;flex-direction:row;gap:var(--space-2);margin-top:var(--space-1)}.rank-row{display:flex;align-items:baseline;gap:var(--space-2)}.rank-chip{padding:.45rem .85rem;border-radius:10px;background:#13213af2;border:1px solid rgba(64,110,170,.7);font-weight:700;letter-spacing:.06em}.rank-chip.is-ready{background:#ffc31233;border-color:#ffc31280;color:var(--accent)}.seal-score{color:var(--muted);font-size:var(--font-size-200)}.stat-bar{height:10px;border-radius:999px;background:#0a111ff2;border:1px solid rgba(53,98,151,.6);overflow:hidden}.stat-fill{height:100%;background:linear-gradient(90deg,#ffc312bf,#ffd54fa6);width:0%;transition:width .32s cubic-bezier(.25,1,.5,1)}.room-state{display:flex;flex-direction:column;gap:var(--space-4)}.state-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}.stage-banner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-5) var(--space-6);border-radius:var(--radius-xl);background:linear-gradient(135deg,#0a1424d9,#08101ee6);border:1px solid rgba(255,195,18,.15);box-shadow:var(--shadow-md);position:relative;overflow:hidden;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.stage-banner:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,195,18,.08) 0%,rgba(255,213,79,.06) 50%,transparent 100%);opacity:.6;pointer-events:none}.stage-banner:after{content:"";position:absolute;top:0;left:var(--space-6);right:var(--space-6);height:2px;background:linear-gradient(90deg,transparent 0%,var(--accent) 30%,var(--accent-2) 70%,transparent 100%);opacity:.5}.stage-meta{display:flex;flex-direction:column;gap:var(--space-2);flex:1}.stage-label{text-transform:uppercase;letter-spacing:var(--letter-spacing-wider);font-size:var(--font-size-xs);color:var(--accent);font-weight:700;opacity:.9}.stage-title{font-size:var(--font-size-lg);margin:0;font-weight:800;letter-spacing:var(--letter-spacing-tight);color:var(--text);line-height:var(--line-height-tight)}.stage-body{margin:0;color:var(--muted);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed);max-width:50ch}.state-metrics{display:grid;gap:var(--space-2);margin:0}.state-line{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);font-size:var(--font-size-300);color:var(--muted)}.state-line dt{text-transform:uppercase;letter-spacing:.12em}.state-line dd{margin:0;font-weight:600;color:var(--text)}.roster{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}.roster-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4);border-radius:var(--radius-md);background:linear-gradient(135deg,#0f192bbf,#0c1424cc);border:1px solid rgba(255,195,18,.12);transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-base);box-shadow:var(--shadow-xs);position:relative;overflow:hidden}.roster-main{display:flex;align-items:center;gap:var(--space-3)}.roster-item:before{content:"";position:absolute;inset:0;background:var(--highlight-subtle);opacity:.15;pointer-events:none}.roster-item:hover{transform:translateY(-1px);border-color:#ffc31233;box-shadow:var(--shadow-sm)}.roster-item.is-turn{border-color:#ffc31280;background:linear-gradient(135deg,#ffc31214,#ffd54f0f);box-shadow:var(--shadow-md),0 0 0 2px #ffc3121f,0 0 30px #ffc31214;transform:translate3d(0,-2px,0)}.roster-item.is-turn:before{background:linear-gradient(90deg,rgba(255,195,18,.1) 0%,transparent 50%,rgba(255,213,79,.1) 100%);opacity:.4}.roster-names{display:flex;flex-direction:column;gap:4px}.roster-name{font-weight:600;color:var(--text);letter-spacing:.04em}.roster-role{font-size:var(--font-size-200);color:var(--muted)}.roster-tags{display:flex;gap:var(--space-2);align-items:center}.tag{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:linear-gradient(135deg,#12243be6,#0e1c30eb);color:var(--text-secondary);font-size:var(--font-size-xs);border:1px solid rgba(255,195,18,.15);letter-spacing:var(--letter-spacing-wide);font-weight:700;box-shadow:var(--shadow-xs),inset 0 1px #ffffff0a;text-transform:uppercase;white-space:nowrap}.tag-turn{background:linear-gradient(135deg,#ffc31238,#ffd54f2e);border-color:#ffc31273;color:var(--accent);box-shadow:var(--shadow-sm),inset 0 1px #ffffff1a,0 0 20px #ffc3121a}.tag-ready{background:linear-gradient(135deg,#ffc31233,#2de5a82e);border-color:#ffc31266;color:var(--accent);box-shadow:var(--shadow-sm),inset 0 1px #ffffff14}.tag-live{background:linear-gradient(135deg,#ffd54f38,#3d6caa2e);border-color:#ffd54f73;color:var(--accent-2);box-shadow:var(--shadow-sm),inset 0 1px #ffffff1a;animation:livePulse 2s ease-in-out infinite}@keyframes livePulse{0%,to{opacity:1}50%{opacity:.85}}.muted{color:var(--muted);font-size:var(--font-size-200)}.phase-indicator{display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);background:linear-gradient(135deg,#0e1a2cd9,#0c1626e6);border:1px solid var(--phase-color, var(--accent));color:var(--phase-color, var(--accent));position:relative;min-height:var(--touch-target-min);box-shadow:var(--shadow-sm),inset 0 1px #ffffff0f,0 0 20px var(--phase-color, transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden}.phase-indicator:before{content:"";position:absolute;inset:0;background:var(--highlight-subtle);opacity:.2;pointer-events:none}.phase-icon{font-size:var(--font-size-md);filter:drop-shadow(0 0 8px currentColor)}.phase-label{font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;color:inherit;font-weight:700}.phase-pulse{width:10px;height:10px;border-radius:50%;background:currentColor;opacity:.9;animation:phasePulse 2.2s var(--ease-in-out-circ) infinite;margin-left:auto;box-shadow:0 0 0 0 currentColor}@keyframes phasePulse{0%,to{transform:scale(.8);opacity:.95;box-shadow:0 0 0 0 currentColor}50%{transform:scale(1.5);opacity:.3;box-shadow:0 0 0 10px transparent}}.round-timeline{display:flex;flex-direction:column;gap:var(--space-2)}.round-timeline h4{margin:0;font-size:var(--font-size-200);letter-spacing:.16em;text-transform:uppercase;color:#9fb2c7e6}.timeline-list{display:flex;flex-direction:column;gap:var(--space-2);max-height:240px;overflow-y:auto;padding-right:4px;scroll-padding:var(--space-2)}.timeline-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-sm);background:#0b1422bf;border:1px solid rgba(36,64,104,.55);transition:transform var(--transition-fast),border-color var(--transition-fast)}.timeline-item.is-you{border-color:#ffc31273;box-shadow:0 0 0 2px #ffc31226;transform:translate3d(0,-2px,0)}.timeline-meta{display:flex;flex-direction:column;gap:2px;min-width:96px}.timeline-user{font-weight:600;color:var(--text)}.timeline-time{color:var(--muted);font-size:var(--font-size-200)}.timeline-dice{display:flex;gap:var(--space-2);flex-wrap:wrap}.dice-pip{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;background:#111e33d9;border:1px solid rgba(58,96,148,.6);font-weight:700;font-size:var(--font-size-200);color:var(--text)}.timeline-score{margin-left:auto;font-weight:700;font-size:var(--font-size-300)}.timeline-score.score-high{color:var(--accent)}.timeline-score.score-mid{color:var(--accent-warm)}.timeline-score.score-low{color:var(--error)}.toast{position:fixed;bottom:var(--space-6);left:50%;transform:translate(-50%);background:linear-gradient(135deg,#0a1220f5,#080e1afa);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,195,18,.25);color:var(--text);padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl),inset 0 1px #ffffff14,0 0 40px #ffc31214;font-size:var(--font-size-base);font-weight:600;letter-spacing:var(--letter-spacing-wide);z-index:1000;max-width:90vw;animation:toastSlideIn .3s var(--ease-out-expo) both;will-change:transform,opacity}.toast:before{content:"";position:absolute;inset:0;background:var(--highlight-subtle);opacity:.2;pointer-events:none;border-radius:inherit}@keyframes toastSlideIn{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.player-stats{display:grid;gap:var(--space-2);background:#080f1cbf;border:1px solid rgba(36,62,102,.55);border-radius:var(--radius-sm);padding:var(--space-4);box-shadow:inset 0 0 0 1px #ffc31214}.player-stats .stat-row{display:flex;justify-content:space-between;font-size:var(--font-size-300)}.stat-label{color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.stat-value{font-weight:700;color:var(--text)}.level-badge{padding:.35rem .75rem;border-radius:999px;background:#ffc3122e;border:1px solid rgba(255,195,18,.4);color:var(--accent)}.xp-progress-wrap{display:flex;flex-direction:column;gap:6px}.xp-progress-bar{height:8px;border-radius:999px;background:#0a111ee6;border:1px solid rgba(42,74,118,.55);overflow:hidden}.xp-progress-fill{height:100%;background:linear-gradient(90deg,#ffc312cc,#ffd54fb3);transition:width .32s cubic-bezier(.25,1,.5,1)}.xp-progress-text{font-size:var(--font-size-200);color:var(--muted);letter-spacing:.08em}.streak-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:.4rem .75rem;border-radius:10px;background:#ffcd7024;border:1px solid rgba(255,205,112,.35);color:var(--accent-warm);font-weight:600}.streak-icon{font-size:1rem}@keyframes cardIn{0%{opacity:0;transform:translate3d(0,20px,0) scale(.96);filter:blur(4px)}60%{opacity:1;transform:translate3d(0,-3px,0) scale(1.01);filter:blur(0)}to{opacity:1;transform:translateZ(0) scale(1);filter:blur(0)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.phase-pulse,.seal,.tag-live,.app:after{animation:none!important}}.card,.btn,.input,.lobby-tab,.discover-item,.roster-item,.phase-indicator{will-change:transform;transform:translateZ(0)}.card,.btn{contain:layout style paint}@media (max-width: 768px){:root{--grid-gutter: var(--space-5);--grid-margin: var(--space-4)}.main{padding-inline:var(--space-4);padding-block:var(--space-6)}.layout-grid{gap:var(--space-5)}.card{padding:var(--space-5);border-radius:var(--radius-lg)}.opponent-body{grid-template-columns:1fr;gap:var(--space-4)}.thumb{width:100%;max-width:240px;margin:0 auto}.stable-thumb{width:140px;height:90px;margin:0 auto}.form-grid{grid-template-columns:1fr}.topbar{padding:var(--space-3) var(--space-4)}.brand{font-size:var(--font-size-md)}.stage-banner{flex-direction:column;align-items:flex-start;gap:var(--space-4);padding:var(--space-5)}.roster-item,.profile-highlight{flex-direction:column;align-items:flex-start;gap:var(--space-3)}.roster-tags{width:100%;justify-content:flex-start}}.theme-toggle{display:flex;align-items:center;justify-content:center;min-width:var(--touch-target-min);min-height:var(--touch-target-min);padding:var(--space-2);background:var(--neutral);border:1px solid var(--neutral-hover);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base)}.theme-toggle:hover{background:var(--neutral-hover);color:var(--text);transform:rotate(15deg) scale(1.05)}.theme-toggle:active{transform:rotate(15deg) scale(.95)}.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-6);background:var(--bg-ambient);position:relative}.auth-container{width:100%;max-width:1200px;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}@media (max-width: 900px){.auth-container{grid-template-columns:1fr;max-width:480px}.auth-features{display:none}.auth-screen{padding:var(--space-4)}}.auth-card{padding:var(--space-7);background:var(--panel);border:1px solid var(--neutral);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);position:relative;overflow:hidden}@media (max-width: 768px){.auth-card{padding:var(--space-6);border-radius:var(--radius-lg)}.form-grid{gap:var(--space-4)}}.auth-card:before{content:"";position:absolute;inset:0;background:var(--highlight);pointer-events:none;opacity:.6}.auth-card.elevated{transform:translateY(0);transition:transform var(--transition-slow),box-shadow var(--transition-slow)}.auth-header{text-align:center;margin-bottom:var(--space-7)}.auth-logo{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-bottom:var(--space-4)}.logo-icon{font-size:3rem;filter:drop-shadow(0 4px 8px rgba(255,195,18,.3))}.logo-text{font-size:var(--font-size-2xl);font-weight:800;letter-spacing:var(--letter-spacing-wide);background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.auth-subtitle{color:var(--muted);font-size:var(--font-size-md)}.auth-tabs{display:flex;gap:var(--space-2);padding:var(--space-1);background:var(--neutral);border-radius:var(--radius-md);margin-bottom:var(--space-6)}.auth-tab{flex:1;padding:var(--space-3) var(--space-4);background:transparent;border:none;border-radius:var(--radius-sm);color:var(--muted);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-base)}.auth-tab.active{background:var(--panel-elevated);color:var(--text);box-shadow:var(--shadow-sm)}.auth-tab:hover:not(.active){color:var(--text-secondary)}.auth-form{display:flex;flex-direction:column;gap:var(--space-5)}.auth-divider{position:relative;text-align:center;margin:var(--space-6) 0;color:var(--muted-2);font-size:var(--font-size-sm)}.auth-divider:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--neutral)}.auth-divider span{position:relative;padding:0 var(--space-3);background:var(--panel);z-index:1}.auth-footer{margin-top:var(--space-5);text-align:center;color:var(--muted);font-size:var(--font-size-sm)}.link-button{background:none;border:none;color:var(--accent);font-weight:600;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color var(--transition-fast)}.link-button:hover{text-decoration-color:var(--accent)}.auth-features{display:flex;flex-direction:column;gap:var(--space-5)}.feature-card{padding:var(--space-5);background:var(--panel);border:1px solid var(--neutral);border-radius:var(--radius-lg);transition:all var(--transition-base)}.feature-card:hover{border-color:var(--panel-glow);box-shadow:var(--shadow-md);transform:translate(4px)}.feature-icon{font-size:2rem;margin-bottom:var(--space-3)}.feature-card h3{font-size:var(--font-size-md);font-weight:700;margin-bottom:var(--space-2);color:var(--text)}.feature-card p{color:var(--muted);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}.game-mode-screen{width:100%;max-width:var(--container-max);margin:0 auto;padding:var(--space-6)}.mode-header{display:flex;align-items:center;gap:var(--space-5);margin-bottom:var(--space-7)}.mode-title{font-size:var(--font-size-2xl);font-weight:800;color:var(--text);margin-bottom:var(--space-2)}.mode-subtitle{color:var(--muted);font-size:var(--font-size-md)}.mode-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-6);margin-bottom:var(--space-8)}.game-card{position:relative;display:flex;flex-direction:column;padding:var(--space-6);background:var(--panel);border:2px solid var(--neutral);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);cursor:pointer;transition:all var(--transition-slow);overflow:hidden;text-align:left}.game-card:before{content:"";position:absolute;inset:0;background:var(--highlight);opacity:.3;transition:opacity var(--transition-base)}.game-card:hover:not(.disabled){border-color:var(--accent);box-shadow:var(--shadow-xl);transform:translateY(-4px)}.game-card:hover:not(.disabled):before{opacity:.6}.game-card.disabled{opacity:.6;cursor:not-allowed}.game-card.disabled:hover{transform:none}.game-card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--space-5)}.game-icon{font-size:3rem;filter:drop-shadow(0 2px 8px currentColor)}.badge-soon{padding:var(--space-1) var(--space-2);background:var(--neutral);color:var(--muted);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.game-card-body{flex:1;margin-bottom:var(--space-5)}.game-name{font-size:var(--font-size-lg);font-weight:700;color:var(--text);margin-bottom:var(--space-3)}.game-description{color:var(--muted);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}.game-card-footer{position:relative;z-index:1}.game-meta{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.meta-item{display:flex;align-items:center;gap:var(--space-1);color:var(--muted-2);font-size:var(--font-size-xs);font-weight:600}.meta-item svg{opacity:.7}.badge-difficulty{padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.badge-easy{background:#2de5a826;color:var(--success)}.badge-medium{background:#ffb84d26;color:var(--warning)}.badge-hard{background:#ff6b8126;color:var(--error)}.game-card-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ffc312e6,#ffd54fe6);opacity:0;transition:opacity var(--transition-base);pointer-events:none}.game-card:hover:not(.disabled) .game-card-overlay{opacity:1}.play-text{color:var(--bg);font-size:var(--font-size-lg);font-weight:800;letter-spacing:var(--letter-spacing-wide)}.mode-info{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-5);background:var(--panel-2);border:1px solid var(--accent);border-left:4px solid var(--accent);border-radius:var(--radius-md)}.info-icon{font-size:2rem;flex-shrink:0}.mode-info h3{font-size:var(--font-size-md);font-weight:700;color:var(--text);margin-bottom:var(--space-2)}.mode-info p{color:var(--muted);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}.mode-info strong{color:var(--accent);font-weight:600}.btn.full-width{width:100%;justify-content:center}.btn.ghost-neutral{background:transparent;border:1px solid var(--neutral);color:var(--text-secondary)}.btn.ghost-neutral:hover{background:var(--neutral);border-color:var(--neutral-hover);color:var(--text)}.btn.secondary{background:transparent;border:2px solid rgba(255,195,18,.25);color:var(--text);font-weight:600}.btn.secondary:hover{background:#ffc31214;border-color:#ffc31266}.link-subtle{color:var(--accent);text-decoration:none;font-weight:600;transition:color var(--transition-fast);cursor:pointer}.link-subtle:hover{color:var(--accent-2);text-decoration:underline}.link-subtle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-xs)}.field{display:flex;flex-direction:column}.field-hint{margin-top:var(--space-2);color:var(--muted);font-size:var(--font-size-xs);line-height:var(--line-height-relaxed)}.topbar-actions{display:flex;align-items:center;gap:var(--space-4)}.account-actions{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}@media (max-width: 768px){.account-actions{gap:var(--space-2)}.account-actions .btn{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm)}}.user-name{color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:600;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 768px){.user-name{display:none}.topbar{padding:var(--space-3) var(--space-4)}.brand{font-size:var(--font-size-base)}}.guest-notice{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:linear-gradient(135deg,#fbbf2429,#fbbf241f);border:2px solid rgba(251,191,36,.5);border-left:4px solid var(--warning);border-radius:var(--radius-md);margin-bottom:var(--space-5);box-shadow:var(--shadow-md),0 0 20px #fbbf2426}.guest-notice__icon{font-size:1.5rem;flex-shrink:0;color:var(--warning)}.guest-notice__content{flex:1}.guest-notice__title{font-size:var(--font-size-base);font-weight:700;color:var(--text);margin-bottom:var(--space-1)}.guest-notice__text{font-size:var(--font-size-sm);color:var(--text-secondary);line-height:var(--line-height-relaxed)}.guest-notice__action{flex-shrink:0}@media (max-width: 768px){.guest-notice{flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-5) var(--space-4)}.guest-notice__action,.guest-notice__action .btn{width:100%}.guest-notice__text{font-size:var(--font-size-sm)}}.avatar-selector{position:relative;margin-bottom:var(--space-5)}.avatar-button{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3);background:var(--neutral);border:1px solid var(--neutral-hover);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}.avatar-button:hover{background:var(--neutral-hover);border-color:var(--panel-glow)}.avatar-display{font-size:2rem;line-height:1}.avatar-label{flex:1;text-align:left;color:var(--text-secondary);font-size:var(--font-size-sm)}.avatar-grid{position:absolute;top:calc(100% + var(--space-2));left:0;right:0;z-index:100;display:grid;grid-template-columns:repeat(8,1fr);gap:var(--space-2);padding:var(--space-3);background:var(--panel-elevated);border:1px solid var(--neutral-hover);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);max-height:240px;overflow-y:auto}.avatar-option{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:var(--neutral);border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.avatar-option:hover{background:var(--neutral-hover);transform:scale(1.1)}.avatar-option.selected{border-color:var(--accent);background:var(--panel-glow)}.user-badge{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--neutral);border-radius:var(--radius-full);transition:all var(--transition-base);position:relative}.user-badge:hover{background:var(--neutral-hover)}.user-badge.guest-badge{background:#ffb84d1a;border:1px solid rgba(255,184,77,.3)}.user-badge.guest-badge:hover{background:#ffb84d26;border-color:#ffb84d66}.user-avatar{font-size:1.25rem;line-height:1}.user-info{display:flex;flex-direction:column;align-items:flex-start}.user-name-display{font-size:var(--font-size-sm);font-weight:600;color:var(--text)}.user-level{font-size:var(--font-size-xs);color:var(--muted-2)}.guest-indicator{display:inline-flex;align-items:center;gap:var(--space-1);padding:.2rem .4rem;background:#ffb84d33;border:1px solid rgba(255,184,77,.4);border-radius:var(--radius-sm);color:var(--warning);font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);white-space:nowrap}.player-avatar{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;font-size:1.5rem;background:var(--panel-elevated);border:2px solid var(--accent);border-radius:var(--radius-full);box-shadow:var(--shadow-sm)}.opponent-avatar{border-color:var(--accent-2)}.opponent-header-top{width:100%}.opponent-title-row{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-2)}.opponent-avatar{font-size:2rem;line-height:1;filter:drop-shadow(0 2px 8px rgba(255,213,79,.3))}@keyframes glideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes glideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.main-grid{animation:glideIn .4s var(--ease-out-expo)}.page-transition-enter{animation:glideIn .5s var(--ease-out-expo)}.page-transition-exit{animation:glideOut .3s var(--ease-out-quart)}.loading-state{animation:fadeIn .3s var(--ease-out-quart)}.room-list-container{width:100%;max-width:var(--container-max);animation:glideIn .4s var(--ease-out-expo)}.room-list-header{margin-bottom:var(--space-6)}.room-list-title{font-size:var(--font-size-2xl);font-weight:800;color:var(--text);margin-bottom:var(--space-2)}.room-list-subtitle{color:var(--muted);font-size:var(--font-size-md)}.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-5);margin-bottom:var(--space-7)}.room-card{position:relative;display:flex;flex-direction:column;padding:var(--space-5);background:var(--panel);border:2px solid var(--neutral);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);overflow:hidden}.room-card:before{content:"";position:absolute;inset:0;background:var(--highlight-subtle);opacity:.3;transition:opacity var(--transition-base)}.room-card:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.room-card:hover:before{opacity:.5}.room-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-4);position:relative;z-index:1}.room-id{font-size:var(--font-size-xl);font-weight:800;font-family:var(--font-mono);color:var(--accent);letter-spacing:var(--letter-spacing-wide)}.room-status{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);background:var(--panel-glow);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.room-status.waiting{color:var(--warning);background:#ffb84d26}.room-status.active{color:var(--success);background:#2de5a826}.room-status.full{color:var(--muted);background:var(--neutral)}.room-status-dot{width:6px;height:6px;border-radius:var(--radius-full);background:currentColor;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.room-info{position:relative;z-index:1;margin-bottom:var(--space-4)}.room-host{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.room-host-avatar{font-size:1.5rem}.room-host-name{color:var(--text);font-weight:600;font-size:var(--font-size-sm)}.room-meta{display:flex;gap:var(--space-3);flex-wrap:wrap;color:var(--muted-2);font-size:var(--font-size-xs)}.room-meta-item{display:flex;align-items:center;gap:var(--space-1)}.room-actions{position:relative;z-index:1}.empty-state{grid-column:1 / -1;text-align:center;padding:var(--space-9);color:var(--muted)}.empty-state-icon{font-size:4rem;margin-bottom:var(--space-4);opacity:.5}.empty-state-text{font-size:var(--font-size-lg);margin-bottom:var(--space-2)}.empty-state-hint{font-size:var(--font-size-sm);color:var(--muted-2)}.game-results-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#000000d9;backdrop-filter:blur(10px);animation:fadeIn .3s var(--ease-out-quart)}.game-results-card{max-width:500px;width:min(90%,520px);max-height:min(90vh,640px);background:var(--panel-elevated);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);border:2px solid var(--accent);animation:glideIn .5s var(--ease-out-expo);overflow:hidden;display:flex;flex-direction:column}.results-header{text-align:center;padding:var(--space-7) var(--space-6) var(--space-5);background:linear-gradient(135deg,#ffc3121a,#ffd54f1a);border-bottom:1px solid var(--neutral)}.trophy-icon{font-size:4rem;margin-bottom:var(--space-3);animation:bounce .6s var(--ease-out-expo)}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.results-title{font-size:var(--font-size-2xl);font-weight:800;color:var(--text);margin-bottom:var(--space-2)}.results-subtitle{font-size:var(--font-size-md);color:var(--accent);font-weight:600}.results-body{padding:var(--space-6);overflow-y:auto;flex:1;min-height:0}.results-reason{text-align:center;font-size:var(--font-size-md);color:var(--text-secondary);margin-bottom:var(--space-6);padding:var(--space-4);background:var(--neutral);border-radius:var(--radius-md)}.results-scores{display:flex;flex-direction:column;gap:var(--space-3)}.score-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);background:var(--panel);border:2px solid var(--neutral);border-radius:var(--radius-md);transition:all var(--transition-base)}.score-row.winner{border-color:var(--accent);background:var(--panel-glow)}.player-name{flex:1;font-size:var(--font-size-md);font-weight:600;color:var(--text)}.player-score{font-size:var(--font-size-lg);font-weight:800;color:var(--accent);margin:0 var(--space-4)}.player-xp{font-size:var(--font-size-sm);color:var(--success);font-weight:600;padding:var(--space-1) var(--space-2);background:#2de5a826;border-radius:var(--radius-sm)}.results-actions{display:flex;gap:var(--space-3);padding:var(--space-6);border-top:1px solid var(--neutral)}.results-actions .btn{flex:1}@media (max-width: 640px){.game-results-card{width:94%;max-height:100vh;border-radius:var(--radius-lg)}.results-header,.results-body,.results-actions{padding:var(--space-4)}.results-reason{margin-bottom:var(--space-4)}}.connection-status{position:fixed;top:70px;right:16px;padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;z-index:99;animation:slideIn .3s ease-out;box-shadow:0 4px 12px #0000004d}.connection-status .status-icon{font-size:16px;animation:pulseSoft 2s ease-in-out infinite}.status-connecting{background:#ffd54f26;border:1px solid rgba(255,213,79,.4);color:var(--accent-2)}.status-reconnecting{background:#ffcd7026;border:1px solid rgba(255,205,112,.4);color:var(--warning)}.status-disconnected{background:#ff6b6b26;border:1px solid rgba(255,107,107,.4);color:var(--error)}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes pulseSoft{0%,to{opacity:1}50%{opacity:.5}}.loading{opacity:.6;pointer-events:none}.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}