:root{--bg-0: #070b16;--bg-1: #0a0f1f;--bg-2: #111935;--surface: rgba(255, 255, 255, .04);--surface-strong: rgba(255, 255, 255, .07);--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .16);--text: #e5ecf7;--text-soft: #cbd5e1;--text-muted: #94a3b8;--text-faint: #64748b;--accent-cyan: #22d3ee;--accent-cyan-strong: #06b6d4;--accent-violet: #a855f7;--accent-amber: #f59e0b;--accent-rose: #f43f5e;--accent-emerald: #10b981;--accent-sky: #0ea5e9;--game-kniffel: #f59e0b;--game-tictactoe: #22d3ee;--game-phase10: #a855f7;--game-connect4: #f43f5e;--game-battleship: #3b82f6;--game-uno: #10b981;--success: #10b981;--warning: #f59e0b;--danger: #f43f5e;--radius-sm: 8px;--radius: 14px;--radius-lg: 20px;--shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px rgba(0, 0, 0, .35);--shadow-2: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 20px 50px rgba(0, 0, 0, .5);--glow-cyan: 0 0 40px rgba(34, 211, 238, .18);--gap-1: 4px;--gap-2: 8px;--gap-3: 12px;--gap-4: 16px;--gap-5: 24px;--gap-6: 32px;--gap-7: 48px;--gap-8: 64px;--font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;background:radial-gradient(1200px 600px at 80% -10%,rgba(34,211,238,.08),transparent 60%),radial-gradient(900px 500px at 0% 10%,rgba(168,85,247,.07),transparent 60%),linear-gradient(180deg,var(--bg-0) 0%,var(--bg-1) 100%);background-attachment:fixed;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:var(--accent-cyan);text-decoration:none;transition:color .15s ease}a:hover{color:#67e8f9}button{font-family:inherit;font-size:.95rem}input,textarea,select{font:inherit;color:inherit}::selection{background:#22d3ee4d;color:#fff}.app-shell{display:grid;grid-template-rows:auto 1fr;min-height:100%}.top-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:var(--gap-3) var(--gap-5);background:#0a0f1fb3;backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--border)}.top-nav__brand{display:flex;align-items:center;gap:var(--gap-3);font-weight:700;letter-spacing:-.01em}.top-nav__brand-logo{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent-cyan),var(--accent-violet));color:var(--bg-0);font-weight:800;font-size:1.05rem;box-shadow:var(--glow-cyan)}.top-nav__brand-text{display:flex;flex-direction:column;line-height:1}.top-nav__brand-text small{color:var(--accent-cyan);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}.top-nav__brand-text span{color:var(--text);font-size:1.05rem;margin-top:2px}.top-nav__links{display:flex;align-items:center;gap:var(--gap-2)}.top-nav__link{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);font-weight:500;font-size:.9rem;padding:8px 14px;border-radius:999px;transition:color .15s ease,background .15s ease}.top-nav__link:hover{color:var(--text);background:var(--surface)}.top-nav__link.is-active{color:var(--text);background:var(--surface-strong);box-shadow:inset 0 0 0 1px var(--border)}.content{padding:var(--gap-6) var(--gap-5);max-width:1200px;margin:0 auto;width:100%}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--gap-5);box-shadow:var(--shadow-1);margin-bottom:var(--gap-4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.card h2{margin-top:0;margin-bottom:var(--gap-4);font-size:1.05rem;letter-spacing:.01em}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-2);border:1px solid var(--border);background:var(--surface);color:var(--text);padding:10px 18px;min-height:42px;border-radius:10px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .05s ease;font-weight:500}.btn:hover:not(:disabled){background:var(--surface-strong);border-color:var(--border-strong)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:linear-gradient(135deg,var(--accent-cyan),var(--accent-cyan-strong));color:var(--bg-0);border:0;font-weight:600;box-shadow:var(--glow-cyan)}.btn--primary:hover:not(:disabled){background:linear-gradient(135deg,#67e8f9,var(--accent-cyan))}.btn--ghost{background:transparent;border-color:transparent;color:var(--text-muted)}.btn--ghost:hover:not(:disabled){color:var(--text);background:var(--surface)}.btn--danger{background:transparent;color:var(--danger);border-color:#f43f5e66}.btn--danger:hover:not(:disabled){background:#f43f5e1a}.btn--lg{min-height:52px;padding:14px 26px;font-size:1rem}.input,.select,.textarea{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--border-strong);background:#00000040;color:var(--text);min-height:44px;transition:border-color .15s ease,background .15s ease}.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent-cyan);background:#00000059}.room-code-input{max-width:140px;text-align:center;font-size:1.2rem;font-weight:700;letter-spacing:.14em}.room-code-badge{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-strong);color:var(--text-soft);font-size:.9rem}.room-code-badge strong{color:var(--text);font-size:1rem;letter-spacing:.12em}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--gap-3)}.field label{font-size:.8rem;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase}.row{display:flex;gap:var(--gap-3);align-items:center}.col{display:flex;flex-direction:column;gap:var(--gap-3)}.grid{display:grid;gap:var(--gap-4)}.muted{color:var(--text-muted)}.error-banner{background:#f43f5e1a;border:1px solid rgba(244,63,94,.35);color:#fda4af;padding:var(--gap-3) var(--gap-4);border-radius:10px;margin-bottom:var(--gap-3)}.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;background:var(--surface-strong);color:var(--text-muted);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}.avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:#fff;font-weight:600;background-size:cover;background-position:center;box-shadow:0 0 0 2px #ffffff0f}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#475569;box-shadow:0 0 0 2px var(--bg-0)}.dot.is-online{background:var(--success);box-shadow:0 0 0 2px var(--bg-0),0 0 12px #10b98199}.hero{text-align:center;padding:clamp(48px,9vw,96px) var(--gap-4) clamp(40px,7vw,72px);position:relative}.hero__eyebrow{color:var(--accent-cyan);font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;font-weight:600}.hero__title{font-size:clamp(2.6rem,8vw,5.6rem);margin:var(--gap-3) auto var(--gap-3);line-height:1.02;letter-spacing:-.03em;font-weight:800;background:linear-gradient(135deg,#67e8f9,#22d3ee 35%,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent;max-width:14ch}.hero__subtitle{max-width:56ch;margin:0 auto var(--gap-5);color:var(--text-soft);font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.5}.hero__cta{display:inline-flex;gap:var(--gap-3);flex-wrap:wrap;justify-content:center}.section{margin-top:clamp(40px,6vw,64px)}.section__header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap-4);margin-bottom:var(--gap-4)}.section__eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--text-faint);font-weight:600}.section__title{font-size:1.6rem;margin:4px 0 0;letter-spacing:-.01em}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap-4)}.game-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--gap-3);padding:var(--gap-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-decoration:none;color:inherit;overflow:hidden;transition:transform .15s ease,border-color .15s ease,background .15s ease;isolation:isolate}.game-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 60% at 50% 0%,var(--game-color, transparent) 0%,transparent 60%);opacity:.12;z-index:-1;transition:opacity .2s ease}.game-card:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--game-color, var(--accent-cyan));opacity:.85}.game-card:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--game-color, var(--accent-cyan)) 35%,transparent)}.game-card:hover:before{opacity:.25}.game-card__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;background:color-mix(in oklab,var(--game-color, var(--accent-cyan)) 16%,transparent);color:var(--game-color, var(--accent-cyan));font-size:1.6rem}.game-card__title{font-size:1.25rem;font-weight:700;margin:0;letter-spacing:-.01em}.game-card__desc{color:var(--text-muted);font-size:.92rem;line-height:1.4;margin:0}.game-card__meta{display:flex;gap:var(--gap-3);color:var(--text-faint);font-size:.78rem;margin-top:auto}.lobby-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--gap-3)}.lobby-card{background:var(--surface);padding:var(--gap-4);border-radius:var(--radius);cursor:pointer;border:1px solid var(--border);text-align:left;color:inherit;transition:transform .15s ease,border-color .15s ease}.lobby-card:hover{transform:translateY(-2px);border-color:var(--border-strong)}.scoreboard-table{width:100%;border-collapse:collapse}.scoreboard-table th,.scoreboard-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);font-size:.92rem}.scoreboard-table th{color:var(--text-muted);font-weight:500;letter-spacing:.04em;text-transform:uppercase;font-size:.75rem}.scoreboard-table tr:last-child td{border-bottom:0}.scoreboard-table button{font-size:.82rem;padding:5px 10px;min-height:30px}.rank{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;font-weight:700;font-size:.8rem;background:var(--surface-strong)}.rank--gold{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#422006}.rank--silver{background:linear-gradient(135deg,#e2e8f0,#94a3b8);color:#1e293b}.rank--bronze{background:linear-gradient(135deg,#fdba74,#c2410c);color:#431407}.center-page{display:flex;align-items:center;justify-content:center;min-height:100%;padding:var(--gap-5)}.login-card{width:min(100%,420px);background:var(--surface-strong);padding:var(--gap-6);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:var(--shadow-2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.dice-row{display:flex;gap:var(--gap-3);flex-wrap:wrap}.die{width:72px;height:72px;border-radius:16px;background:#00000059;border:2px solid var(--border-strong);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:2.4rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .1s ease,border-color .15s ease,background .15s ease}.die:hover:not(:disabled){border-color:var(--accent-cyan)}.die:disabled{opacity:.6;cursor:not-allowed}.die.is-held{background:#22d3ee2e;border-color:var(--accent-cyan);color:#67e8f9;box-shadow:0 0 24px #22d3ee40}.toast-stack{position:fixed;bottom:var(--gap-4);right:var(--gap-4);display:flex;flex-direction:column;gap:var(--gap-2);z-index:1000}.toast{background:var(--bg-2);color:var(--text);padding:12px 16px;border-radius:var(--radius);border:1px solid var(--border-strong);box-shadow:var(--shadow-2);min-width:220px}.toast.is-error{border-color:#f43f5e66;background:#f43f5e1a}@media(max-width:720px){.top-nav{padding:var(--gap-3)}.top-nav__links{flex-wrap:wrap;justify-content:flex-end}.content{padding:var(--gap-4) var(--gap-3)}.hero{padding-top:var(--gap-5)}}