*,*:before,*:after{box-sizing:border-box}:root{--bg-1: #08080f;--bg-2: #12121f;--surface: rgba(255, 255, 255, .06);--border: rgba(255, 255, 255, .12);--text: #f0f0f5;--muted: #8888a0;--p1: #00e5ff;--p2: #ff2d95;--success: #00ff88;--error: #ff4466;--radius: 16px;--btn-radius: 12px}html,body{height:100%;min-height:100dvh;margin:0;overflow-x:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}body{font-family:Outfit,system-ui,-apple-system,sans-serif;color:var(--text);background:linear-gradient(135deg,var(--bg-1),var(--bg-2));animation:gradient-shift 8s ease-in-out infinite alternate;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.page-game{overflow:hidden;overscroll-behavior:none}.bg-glow{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 20% 20%,rgba(0,229,255,.12),transparent 40%),radial-gradient(circle at 80% 80%,rgba(255,45,149,.12),transparent 40%);z-index:0}.container{position:relative;z-index:1;width:min(100%,420px);margin:0 auto;padding:1.25rem 1rem 2rem;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:1rem}.hero{text-align:center}.hero.compact{margin-bottom:.5rem}.logo-mark{font-size:2.5rem;margin-bottom:.25rem}h1{margin:0;font-size:clamp(2rem,8vw,2.75rem);font-weight:700}.subtitle{color:var(--muted);margin:.5rem 0 0}.glow-text{animation:glow-text 2.5s ease-in-out infinite}.card{border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}.glass{background:var(--surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.center{text-align:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;min-width:48px;padding:.75rem 1.25rem;border:none;border-radius:var(--btn-radius);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:transform .15s ease,opacity .15s ease}.btn:active{transform:scale(.98)}.btn:focus-visible{outline:2px solid var(--p1);outline-offset:2px}.btn-block{width:100%}.btn-primary{background:linear-gradient(135deg,#00c8ff,#07f);color:#001018}.btn-secondary{background:#ffffff1a;color:var(--text);border:1px solid var(--border)}.divider{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0;color:var(--muted);font-size:.875rem}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.join-row{display:grid;grid-template-columns:1fr auto;gap:.75rem}input[type=text],input[type=password],input[type=url]{width:100%;min-height:48px;padding:.75rem 1rem;border-radius:var(--btn-radius);border:1px solid var(--border);background:#00000040;color:var(--text);font:inherit;text-transform:uppercase}.install-form label{display:block;margin-bottom:1rem;font-size:.9rem;color:var(--muted)}.error-text{color:var(--error);margin:.75rem 0 0}.success-text{color:var(--success)}.muted{color:var(--muted)}.small{font-size:.85rem}.hidden{display:none!important}.fade-up{animation:fade-up .5s ease forwards}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:var(--muted);margin:0 0 .5rem}.room-code{font-size:clamp(2rem,10vw,3rem);letter-spacing:.2em;margin:0;font-weight:700}.status-line{display:flex;align-items:center;gap:.5rem;color:var(--muted)}.pulse-dot{width:10px;height:10px;border-radius:50%;background:var(--success);animation:pulse-dot 1.2s ease-in-out infinite}.lobby-actions{display:grid;gap:.75rem;margin:1.25rem 0}.invite-preview{word-break:break-all;font-size:.85rem;color:var(--p1);margin:.25rem 0 0}.toast{position:fixed;left:50%;bottom:calc(1.5rem + env(safe-area-inset-bottom));transform:translate(-50%);background:#000000d9;border:1px solid var(--border);padding:.75rem 1.25rem;border-radius:999px;z-index:100}.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.spinner.large{width:40px;height:40px;margin:0 auto 1rem}.game-shell{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column}.score-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.75rem 1rem;position:sticky;top:0;z-index:10;background:#08080fd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.score{font-size:clamp(1.75rem,8vw,2.5rem);font-weight:700}.score.p1{color:var(--p1);text-align:left}.score.p2{color:var(--p2);text-align:right}.vs{color:var(--muted);font-size:.875rem;font-weight:600}.canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;position:relative;min-height:0}#game-canvas{width:100%;max-width:420px;height:auto;aspect-ratio:400 / 600;border-radius:12px;border:1px solid var(--border);touch-action:none;background:#0a0a12;transform:translateZ(0)}.hint-bar{text-align:center;color:var(--muted);font-size:.875rem;padding:.75rem;margin:0;transition:opacity .5s ease}.hint-bar.fade-out{opacity:0}.reconnect-banner{position:absolute;top:.5rem;left:50%;transform:translate(-50%);background:#ff4466e6;color:#fff;padding:.35rem .75rem;border-radius:999px;font-size:.8rem}.game-over{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:50}.game-over-card{width:min(100%,360px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center}.final-score{font-size:1.25rem;color:var(--muted)}.rematch-status{margin:.75rem 0 0;font-size:.95rem;color:var(--p1)}.rematch-status.waiting{color:var(--muted)}.game-over-actions{display:grid;gap:.75rem;margin-top:1.25rem}.scale-in{animation:scale-in .35s ease forwards}@keyframes gradient-shift{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(18deg)}}@keyframes glow-text{0%,to{text-shadow:0 0 12px rgba(0,229,255,.35)}50%{text-shadow:0 0 22px rgba(255,45,149,.45)}}@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-dot{0%,to{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scale-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (min-width: 768px){.hint-bar:after{content:" · W/S or ↑/↓ on keyboard"}}