:root{--bg-deep: #07080f;--bg-mid: #0d0e1f;--bg-surface: #12142a;--bg-elevated: #181a35;--cyan: #00e5ff;--cyan-dim: rgba(0, 229, 255, .2);--cyan-soft: rgba(0, 229, 255, .08);--magenta: #ff00c8;--magenta-dim: rgba(255, 0, 200, .2);--magenta-soft: rgba(255, 0, 200, .08);--electric: #4d79ff;--electric-dim: rgba(77, 121, 255, .2);--gold: #ffd54a;--success: #00ff88;--error: #ff3b6c;--warning: #ffb84d;--glass-bg: rgba(255, 255, 255, .04);--glass-bg-hi: rgba(255, 255, 255, .06);--glass-border: rgba(255, 255, 255, .1);--glass-border-hi:rgba(0, 229, 255, .35);--glass-blur: blur(16px);--glass-blur-hi: blur(24px);--text-primary: rgba(255, 255, 255, .94);--text-secondary: rgba(255, 255, 255, .62);--text-muted: rgba(255, 255, 255, .36);--text-disabled: rgba(255, 255, 255, .18);--glow-cyan-sm: 0 0 8px var(--cyan-dim), 0 0 20px var(--cyan-dim);--glow-cyan-md: 0 0 12px var(--cyan), 0 0 32px var(--cyan-dim), 0 0 64px rgba(0,229,255,.12);--glow-cyan-lg: 0 0 18px var(--cyan), 0 0 48px var(--cyan-dim), 0 0 96px rgba(0,229,255,.18);--glow-magenta-sm:0 0 8px var(--magenta-dim), 0 0 20px var(--magenta-dim);--glow-magenta-md:0 0 12px var(--magenta), 0 0 32px var(--magenta-dim);--glow-success: 0 0 12px rgba(0,255,136,.4), 0 0 32px rgba(0,255,136,.2);--glow-error: 0 0 12px rgba(255,59,108,.4), 0 0 32px rgba(255,59,108,.2);--shadow-card: 0 8px 32px rgba(0, 0, 0, .6);--shadow-modal: 0 24px 64px rgba(0, 0, 0, .8);--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-7: 48px;--sp-8: 64px;--r-sm: 6px;--r-md: 12px;--r-lg: 16px;--r-xl: 24px;--r-full: 999px;--font-display: "Orbitron", system-ui, sans-serif;--font-head: "Exo 2", system-ui, sans-serif;--font-body: "DM Sans", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--t-fast: all .15s cubic-bezier(.4, 0, .2, 1);--t-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--t-glow: box-shadow .4s ease, transform .3s ease;--z-bg: 0;--z-base: 10;--z-elevated: 20;--z-modal: 30;--z-toast: 40}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--text-primary);background:var(--bg-deep);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;inset:0;z-index:var(--z-bg);pointer-events:none;background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(77,121,255,.22),transparent 60%),radial-gradient(ellipse 60% 40% at 90% 60%,rgba(0,229,255,.12),transparent 60%),radial-gradient(ellipse 50% 35% at 10% 90%,rgba(255,0,200,.1),transparent 60%)}.bg-grid{position:fixed;inset:0;z-index:var(--z-bg);pointer-events:none;opacity:.4;background-image:linear-gradient(rgba(0,229,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 80%)}.bg-aurora{position:fixed;inset:0;z-index:var(--z-bg);pointer-events:none;background:radial-gradient(circle at 20% 30%,var(--cyan-soft),transparent 50%),radial-gradient(circle at 80% 70%,var(--magenta-soft),transparent 50%);filter:blur(40px);animation:aurora-shift 18s ease-in-out infinite alternate}.scan-line{position:fixed;left:0;right:0;top:0;height:80px;z-index:var(--z-bg);pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(0,229,255,.06),transparent);animation:scan-line 8s linear infinite}.app-root{position:relative;z-index:var(--z-base);min-height:100vh;min-height:100dvh;padding:var(--sp-5);display:flex;flex-direction:column;align-items:center;justify-content:center}h1{font-family:var(--font-display);font-weight:900;letter-spacing:.08em;font-size:clamp(1.8rem,5vw,3.5rem);line-height:1.1}h2{font-family:var(--font-display);font-weight:700;letter-spacing:.06em;font-size:clamp(1.4rem,3vw,2rem)}h3{font-family:var(--font-head);font-weight:600;font-size:1.25rem;letter-spacing:.02em}p{color:var(--text-secondary)}.mono{font-family:var(--font-mono)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--glass-border-hi);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--cyan)}:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}::selection{background:var(--cyan);color:var(--bg-deep)}input,button,select,textarea{font:inherit;color:inherit;background:none;border:none}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}.glass{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:var(--r-lg)}.glass-card{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow-card);transition:var(--t-smooth)}.glass-card:hover{background:var(--glass-bg-hi);border-color:var(--glass-border-hi);transform:translateY(-2px)}.glass-panel{background:linear-gradient(135deg,var(--glass-bg-hi),var(--glass-bg));border:1px solid var(--glass-border);backdrop-filter:var(--glass-blur-hi);-webkit-backdrop-filter:var(--glass-blur-hi);border-radius:var(--r-xl);padding:var(--sp-6);box-shadow:var(--shadow-card),inset 0 1px #ffffff0d;width:100%;max-width:480px}.glass-panel--wide{max-width:720px}.glass-input{width:100%;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);color:var(--text-primary);font-family:var(--font-mono);font-size:1rem;letter-spacing:.05em;transition:var(--t-fast);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}.glass-input::placeholder{color:var(--text-muted)}.glass-input:focus{outline:none;border-color:var(--cyan);box-shadow:var(--glow-cyan-sm),inset 0 0 0 1px var(--cyan-dim);background:var(--glass-bg-hi)}.glass-input--code{text-align:center;font-size:1.5rem;letter-spacing:.5em;text-transform:uppercase;font-weight:700}.divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--glass-border),transparent);margin:var(--sp-5) 0}.badge{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);background:var(--cyan-soft);border:1px solid var(--cyan-dim);border-radius:var(--r-full);color:var(--cyan);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}.badge--magenta{background:var(--magenta-soft);border-color:var(--magenta-dim);color:var(--magenta)}.badge--success{background:#00ff881a;border-color:#00ff884d;color:var(--success)}.badge--error{background:#ff3b6c1a;border-color:#ff3b6c4d;color:var(--error)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);border-radius:var(--r-md);font-family:var(--font-head);font-size:.95rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:var(--t-glow);border:1px solid transparent;position:relative;user-select:none}.btn:active{transform:translateY(1px) scale(.98)}.btn:disabled{transform:none!important;box-shadow:none!important;opacity:.4}.btn-primary{background:linear-gradient(135deg,var(--cyan-dim),var(--electric-dim));border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow-cyan-sm)}.btn-primary:hover:not(:disabled){box-shadow:var(--glow-cyan-md);transform:translateY(-2px);background:linear-gradient(135deg,#00e5ff4d,#4d79ff4d)}.btn-secondary{background:linear-gradient(135deg,var(--magenta-dim),var(--magenta-soft));border-color:var(--magenta);color:var(--magenta);box-shadow:var(--glow-magenta-sm)}.btn-secondary:hover:not(:disabled){box-shadow:var(--glow-magenta-md);transform:translateY(-2px)}.btn-ghost{background:var(--glass-bg);border-color:var(--glass-border);color:var(--text-primary);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}.btn-ghost:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow-cyan-sm)}.btn-lg{padding:var(--sp-4) var(--sp-7);font-size:1.1rem}.btn-sm{padding:var(--sp-2) var(--sp-3);font-size:.8rem}.btn-block{width:100%}.glow-text-cyan{color:var(--cyan);text-shadow:0 0 10px var(--cyan-dim),0 0 20px var(--cyan-dim)}.glow-text-magenta{color:var(--magenta);text-shadow:0 0 10px var(--magenta-dim),0 0 20px var(--magenta-dim)}.glow-text-gold{color:var(--gold);text-shadow:0 0 10px rgba(255,213,74,.3)}.glow-text-success{color:var(--success);text-shadow:0 0 10px rgba(0,255,136,.4)}.glow-text-error{color:var(--error);text-shadow:0 0 10px rgba(255,59,108,.4)}.glow-ring{border:2px solid var(--cyan);box-shadow:var(--glow-cyan-sm),inset 0 0 12px var(--cyan-dim)}.glow-ring--magenta{border-color:var(--magenta);box-shadow:var(--glow-magenta-sm),inset 0 0 12px var(--magenta-dim)}.pulse-glow{animation:pulse-glow 2.5s ease-in-out infinite}.numpad-key{aspect-ratio:1;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-md);font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:var(--text-primary);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);cursor:pointer;transition:var(--t-fast);display:flex;align-items:center;justify-content:center}.numpad-key:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-soft);box-shadow:var(--glow-cyan-sm)}.numpad-key:active{transform:scale(.95)}.numpad-key--action{color:var(--magenta);border-color:var(--magenta-dim)}.numpad-key--action:hover{color:var(--magenta);border-color:var(--magenta);box-shadow:var(--glow-magenta-sm)}@keyframes pulse-glow{0%,to{box-shadow:var(--glow-cyan-sm)}50%{box-shadow:var(--glow-cyan-md)}}@keyframes fade-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes scan-line{0%{transform:translateY(-100px)}to{transform:translateY(100vh)}}@keyframes aurora-shift{0%{transform:translate(0) scale(1);opacity:.6}50%{transform:translate(40px,-30px) scale(1.1);opacity:.9}to{transform:translate(-30px,40px) scale(.95);opacity:.7}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}@keyframes flash-success{0%{box-shadow:var(--glow-cyan-sm)}50%{box-shadow:var(--glow-success);border-color:var(--success)}to{box-shadow:var(--glow-cyan-sm)}}@keyframes flash-error{0%{box-shadow:var(--glow-cyan-sm)}50%{box-shadow:var(--glow-error);border-color:var(--error)}to{box-shadow:var(--glow-cyan-sm)}}@keyframes count-down{0%{width:100%}to{width:0%}}@keyframes spin-glow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slide-in-right{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}.fade-up{animation:fade-up .5s cubic-bezier(.16,1,.3,1) both}.fade-in{animation:fade-in .4s ease both}.shake{animation:shake .4s ease}.flash-ok{animation:flash-success .6s ease}.flash-err{animation:flash-error .6s ease}.stagger>*:nth-child(1){animation:fade-up .5s .05s both}.stagger>*:nth-child(2){animation:fade-up .5s .15s both}.stagger>*:nth-child(3){animation:fade-up .5s .25s both}.stagger>*:nth-child(4){animation:fade-up .5s .35s both}.stagger>*:nth-child(5){animation:fade-up .5s .45s both}.stagger>*:nth-child(6){animation:fade-up .5s .55s both}.stagger>*:nth-child(7){animation:fade-up .5s .65s both}.stagger>*:nth-child(8){animation:fade-up .5s .75s both}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.chat-container{display:flex;flex-direction:column;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-md);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);overflow:hidden;height:320px;max-height:50vh}.chat-header{padding:var(--sp-3);border-bottom:1px solid var(--glass-border);display:flex;justify-content:space-between;align-items:center}.chat-list{flex:1;overflow-y:auto;padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);scroll-behavior:smooth}.chat-msg{display:flex;gap:var(--sp-2);align-items:flex-start;animation:fade-up .25s ease both}.chat-msg--system{justify-content:center;font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);font-style:italic;padding:var(--sp-1) 0}.chat-avatar{width:28px;height:28px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--cyan-dim),var(--magenta-dim));font-family:var(--font-display);font-size:.7rem;font-weight:700;flex-shrink:0}.chat-body{flex:1;min-width:0}.chat-meta{font-size:.7rem;color:var(--cyan);margin-bottom:2px;letter-spacing:.05em}.chat-text{background:var(--glass-bg-hi);border:1px solid var(--glass-border);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);font-size:.9rem;color:var(--text-primary);word-wrap:break-word;overflow-wrap:break-word}.chat-msg--mine .chat-text{background:var(--cyan-soft);border-color:var(--cyan-dim);color:var(--cyan)}.chat-msg--mine .chat-meta{color:var(--magenta)}.chat-input-row{display:flex;gap:var(--sp-2);padding:var(--sp-3);border-top:1px solid var(--glass-border)}.chat-input{flex:1;font-family:var(--font-body)!important;font-size:.9rem!important;text-align:left!important;letter-spacing:normal!important}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}.gap-5{gap:var(--sp-5)}.text-center{text-align:center}.w-full{width:100%}.home-hero{text-align:center;margin-bottom:var(--sp-7)}.home-title{font-size:clamp(2.2rem,7vw,4.5rem);background:linear-gradient(135deg,var(--cyan),var(--magenta));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 24px var(--cyan-dim));margin-bottom:var(--sp-2)}.home-subtitle{font-family:var(--font-mono);color:var(--text-secondary);font-size:.9rem;letter-spacing:.3em;text-transform:uppercase}.home-menu{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-6)}.lobby-header{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}.lobby-code{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.8rem);letter-spacing:.4em;color:var(--cyan);text-shadow:0 0 20px var(--cyan-dim);padding:var(--sp-3) var(--sp-5);background:var(--glass-bg);border:1px solid var(--cyan-dim);border-radius:var(--r-md);cursor:pointer}.lobby-code:hover{background:var(--cyan-soft)}.player-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--sp-3);margin:var(--sp-4) 0}.player-card{display:flex;align-items:center;gap:var(--sp-3);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-md);padding:var(--sp-3);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}.player-card--host{border-color:var(--cyan);box-shadow:var(--glow-cyan-sm)}.player-card--self{border-color:var(--magenta)}.player-avatar{width:36px;height:36px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;background:linear-gradient(135deg,var(--cyan-dim),var(--magenta-dim));color:var(--text-primary);flex-shrink:0}.player-info{flex:1;min-width:0}.player-name{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-score{font-family:var(--font-mono);font-size:.8rem;color:var(--cyan)}.game-hud{width:100%;max-width:720px;display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}.hud-item{font-family:var(--font-mono);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}.hud-value{color:var(--cyan);font-weight:700}.timer-bar{width:100%;max-width:720px;height:4px;border-radius:2px;background:var(--glass-bg);overflow:hidden;margin-bottom:var(--sp-5)}.timer-bar__fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--electric));box-shadow:var(--glow-cyan-sm);transition:width 1s linear}.timer-bar__fill--warn{background:linear-gradient(90deg,var(--warning),var(--error))}.puzzle-display{font-family:var(--font-head);font-weight:600;font-size:clamp(1.3rem,3.5vw,2rem);text-align:center;line-height:1.5;margin:var(--sp-5) 0;padding:var(--sp-5);min-height:120px;display:flex;align-items:center;justify-content:center}.answer-display{font-family:var(--font-mono);font-size:2rem;font-weight:700;letter-spacing:.15em;text-align:center;color:var(--cyan);padding:var(--sp-4);margin-bottom:var(--sp-4);background:var(--glass-bg);border:2px solid var(--glass-border);border-radius:var(--r-md);min-height:4rem;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);text-shadow:0 0 12px var(--cyan-dim)}.numpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);width:100%;max-width:360px;margin:0 auto}.ranking-list{display:flex;flex-direction:column;gap:var(--sp-3);margin:var(--sp-5) 0}.rank-row{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--r-md);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}.rank-row--first{border-color:var(--gold);box-shadow:0 0 16px #ffd54a40}.rank-row--second{border-color:#c0c0c080}.rank-row--third{border-color:#cd7f3280}.rank-number{font-family:var(--font-display);font-size:2rem;font-weight:900;min-width:48px;text-align:center}.rank-name{flex:1;font-size:1.1rem;font-weight:600}.rank-score{font-family:var(--font-mono);font-size:1.2rem;color:var(--cyan);font-weight:700}.toast-container{position:fixed;bottom:var(--sp-5);right:var(--sp-5);display:flex;flex-direction:column-reverse;gap:var(--sp-2);z-index:var(--z-toast);pointer-events:none}.toast{background:var(--glass-bg-hi);border:1px solid var(--glass-border-hi);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);backdrop-filter:var(--glass-blur-hi);-webkit-backdrop-filter:var(--glass-blur-hi);min-width:200px;max-width:360px;animation:slide-in-right .3s ease both;pointer-events:auto}.toast--success{border-color:var(--success);color:var(--success)}.toast--error{border-color:var(--error);color:var(--error)}.toast--info{border-color:var(--cyan);color:var(--cyan)}@media (max-width: 640px){.app-root{padding:var(--sp-3)}.glass-panel{padding:var(--sp-4)}}