:root{--bg: #07040f;--bg-elev: #140c24;--bg-elev-2: #1d1433;--fg: #f7f1ff;--fg-dim: #b7a8d4;--accent: #ff4fd8;--accent-2: #5cf0ff;--good: #5dffb0;--warn: #ffd24a;--bad: #ff5d7a;--radius: 16px;--shadow: 0 18px 50px rgba(0, 0, 0, .45);--font: "Nunito", "Segoe UI", sans-serif;--display: "Bungee", "Nunito", sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}html,body{margin:0;background:var(--bg);color:var(--fg)}body{font-family:var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none}button,input{font:inherit;color:inherit}button{background:var(--bg-elev);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:.9rem 1.2rem;cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:active:not(:disabled){transform:translateY(1px)}.btn-primary{background:linear-gradient(135deg,var(--accent),#7a5bff);border:none;font-weight:800}input[type=text]{background:var(--bg-elev);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:.9rem 1rem;width:100%}input[type=text]:focus{outline:2px solid var(--accent-2)}.landing{min-height:100%;display:grid;place-items:center;padding:1.5rem;background:radial-gradient(800px 400px at 10% -10%,#5b1d7a 0%,transparent 60%),radial-gradient(700px 360px at 110% 10%,#124b66 0%,transparent 55%),var(--bg)}.landing-card{width:min(520px,100%);background:var(--bg-elev);border-radius:28px;padding:2.4rem 1.8rem;box-shadow:var(--shadow);text-align:center;border:1px solid rgba(255,255,255,.06)}.landing-kicker{letter-spacing:.28em;text-transform:uppercase;color:var(--accent-2);font-weight:800;font-size:.75rem}.landing-title{font-family:var(--display);font-size:clamp(2.2rem,8vw,3.2rem);margin:.4rem 0 .6rem;line-height:1.05}.landing-sub{color:var(--fg-dim);margin:0 0 1.8rem}.landing-actions{display:grid;gap:.7rem}.landing-actions a{text-decoration:none}.landing-actions button{width:100%}.host{height:100%;display:flex;flex-direction:column;background:radial-gradient(900px 500px at 0% 0%,#3a1058 0%,transparent 55%),var(--bg)}.host--play .host-lobby,.host--play .host-top{display:none}.host--play{background:#000}.host-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.1rem}.host-brand{font-family:var(--display);font-size:1.1rem}.host-code-inline{font-family:var(--display);letter-spacing:.18em;font-size:1.4rem;color:var(--accent-2)}.host-lobby{flex:1;display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:1.2rem;padding:0 1.2rem 1.2rem;min-height:0}.host-code-card{background:var(--bg-elev);border-radius:24px;padding:1.2rem;display:flex;flex-direction:column;align-items:center;gap:.8rem;border:1px solid rgba(255,255,255,.06)}.host-code-card .label{letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim);font-size:.75rem;font-weight:800}.host-code-card .code{font-family:var(--display);font-size:clamp(2.6rem,6vw,4.2rem);letter-spacing:.16em;line-height:1}.host-code-card .hint{color:var(--fg-dim);text-align:center;font-size:.9rem;word-break:break-all}.host-code-card .hint a{color:var(--accent-2)}.player-list{display:flex;flex-direction:column;gap:.45rem;width:100%}.player-chip{display:flex;align-items:center;gap:.6rem;background:var(--bg-elev-2);border-radius:999px;padding:.45rem .7rem;font-weight:800}.player-chip-dot{width:14px;height:14px;border-radius:50%;background:var(--accent)}.player-empty{color:var(--fg-dim);margin:0}.host-games{display:grid;grid-template-columns:1fr 1fr;gap:1rem;min-height:0}.game-card{text-align:left;border-radius:24px;padding:1.4rem;border:2px solid transparent;background:var(--bg-elev);display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;position:relative;overflow:hidden}.game-card:hover:not(:disabled){border-color:var(--accent)}.game-card .eyebrow{letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;font-weight:800;color:var(--accent-2)}.game-card h2{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.4rem);margin:.35rem 0 .5rem}.game-card p{margin:0;color:var(--fg-dim);max-width:28ch}.game-card.pong{background:linear-gradient(160deg,#2a1048,#12081f 60%)}.game-card.maze{background:linear-gradient(160deg,#0b1a4a,#07040f 62%)}.host-stage{flex:1;min-height:0;display:flex;position:relative}.host-stage>*{flex:1;min-height:0;width:100%}.host-exit{position:absolute;top:.7rem;left:.7rem;z-index:5;background:#00000073;border:1px solid rgba(255,255,255,.15);font-weight:800}.connection-pill{position:fixed;right:.8rem;bottom:.8rem;z-index:20;display:flex;align-items:center;gap:.4rem;background:#00000080;border-radius:999px;padding:.25rem .65rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.connection-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--bad)}.connection-pill.up .dot{background:var(--good)}.player{height:100%;display:flex;flex-direction:column;background:radial-gradient(600px 300px at 50% -20%,#4a1870 0%,var(--bg) 60%);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.player-header{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem .2rem;font-weight:800}.player-header-code{font-family:var(--display);letter-spacing:.14em;color:var(--accent-2)}.player-stage{flex:1;min-height:0;display:flex;flex-direction:column;padding:.6rem .9rem .9rem}.player-waiting{flex:1;display:grid;place-items:center;text-align:center;color:var(--fg-dim);font-size:1.15rem;font-weight:800}.join{min-height:100%;display:grid;place-items:center;padding:1.2rem;background:radial-gradient(700px 360px at 50% -10%,#4a1870 0%,var(--bg) 60%)}.join-card{width:min(420px,100%);background:var(--bg-elev);border-radius:24px;padding:1.6rem;display:grid;gap:.9rem;box-shadow:var(--shadow)}.join-card h1{font-family:var(--display);margin:0 0 .2rem;font-size:1.8rem}.code-input{text-transform:uppercase;letter-spacing:.35em;font-size:1.6rem;text-align:center;font-weight:800}.join-error{color:var(--bad);min-height:1.2em;font-weight:800}.role-banner{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.6rem}.role-pill{border-radius:999px;padding:.35rem .8rem;font-weight:900}.hud-stat{font-weight:800;color:var(--fg-dim)}.overlay-copy{flex:1;display:grid;place-items:center;text-align:center}.overlay-copy .kicker{letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim);font-weight:800}.overlay-copy h2{font-family:var(--display);font-size:2.4rem;margin:.4rem 0}@media (max-width: 860px){.host-lobby,.host-games{grid-template-columns:1fr}}