:root{--indigo-900: #120a2a;--indigo-800: #1a1036;--plum-700: #3a1559;--magenta: #ff49a1;--magenta-soft: #ff7ac6;--teal: #39f6e6;--teal-deep: #0a8f9c;--amber: #ffd166;--amber-hot: #ff8c42;--ink: #f4ecff;--ink-dim: #b9a9d6;--danger: #ff5d6c;--pixel: "Press Start 2P", monospace;--mono: "DM Mono", ui-monospace, monospace;--glow-teal: 0 0 12px rgba(57, 246, 230, .55);--glow-magenta: 0 0 14px rgba(255, 73, 161, .55)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--mono);color:var(--ink);background:var(--indigo-900);-webkit-font-smoothing:antialiased;overflow-x:hidden}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;background:radial-gradient(120% 80% at 50% -10%,#2a154d 0%,transparent 60%),radial-gradient(90% 60% at 50% 120%,#5a1f3f 0%,transparent 55%),linear-gradient(180deg,var(--indigo-900) 0%,var(--indigo-800) 50%,#240d3e 100%)}.backdrop:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.app-shell{position:relative;min-height:100%;display:flex;flex-direction:column}.boot{flex:1;display:grid;place-content:center;gap:18px;justify-items:center}.boot__logo{font-family:var(--pixel);font-size:28px;color:var(--amber);text-shadow:var(--glow-magenta);letter-spacing:2px}.boot__dots{font-family:var(--pixel);font-size:10px;color:var(--teal);animation:blink 1s steps(2,start) infinite}@keyframes blink{50%{opacity:.2}}.login{flex:1;display:grid;place-items:center;padding:32px 16px}.login__card{width:min(420px,92vw);background:#1a1036d1;border:1px solid rgba(255,122,198,.35);border-radius:18px;padding:38px 34px 28px;box-shadow:0 30px 80px #00000080,inset 0 0 0 1px #39f6e614;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.login__brand{display:flex;align-items:center;gap:14px;justify-content:center}.brand__mark{font-size:26px;color:var(--teal);text-shadow:var(--glow-teal);transform:rotate(-8deg)}.brand__mark--sm{font-size:16px}.brand__name{font-family:var(--pixel);font-size:26px;margin:0;color:var(--amber);text-shadow:3px 3px 0 var(--magenta);letter-spacing:1px}.login__tag{text-align:center;color:var(--ink-dim);font-size:14px;margin:16px 0 22px}.login__tag .hl{color:var(--teal)}.login__form{display:grid;gap:16px}.field{display:grid;gap:6px;font-size:12px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:1px}.field input{font-family:var(--mono);font-size:15px;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,122,198,.3);background:#0a0618b3;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}.field input:focus{border-color:var(--teal);box-shadow:var(--glow-teal)}.login__foot{text-align:center;color:var(--ink-dim);font-size:11px;margin-top:18px;opacity:.7}.btn{font-family:var(--pixel);font-size:11px;letter-spacing:1px;padding:14px 18px;border-radius:10px;border:none;cursor:pointer;transition:transform .12s,box-shadow .12s,filter .12s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:linear-gradient(135deg,var(--amber) 0%,var(--amber-hot) 100%);color:#2a0f33;box-shadow:0 6px #b5491f,var(--glow-magenta)}.btn--primary:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px #b5491f,var(--glow-magenta)}.btn--primary:not(:disabled):active{transform:translateY(2px);box-shadow:0 3px #b5491f}.btn--ghost{background:transparent;color:var(--teal);border:1px solid rgba(57,246,230,.4);font-size:10px}.btn--ghost:hover{background:#39f6e614}.btn--block{width:100%;margin-top:12px}.notice{font-family:var(--mono);font-size:12px;padding:10px 12px;border-radius:8px;line-height:1.5}.notice--warn{background:#ffd1661f;color:var(--amber);border:1px solid rgba(255,209,102,.3)}.notice--error{background:#ff5d6c24;color:var(--danger);border:1px solid rgba(255,93,108,.4)}.notice code{color:var(--teal)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid rgba(255,122,198,.2);background:#120a2a99;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.topbar__brand{display:flex;align-items:center;gap:10px}.topbar__name{font-family:var(--pixel);font-size:14px;color:var(--amber);text-shadow:2px 2px 0 var(--magenta)}.topbar__right{display:flex;align-items:center;gap:16px}.topbar__user{font-size:13px;color:var(--ink-dim);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.game-layout{flex:1;display:grid;grid-template-columns:minmax(0,440px) minmax(320px,420px);gap:32px;justify-content:center;align-items:start;padding:32px 24px 56px}@media (max-width: 880px){.game-layout{grid-template-columns:1fr;max-width:460px;margin:0 auto}}.stage{display:grid;gap:14px}.stage__frame{position:relative;border-radius:16px;overflow:hidden;border:2px solid rgba(57,246,230,.35);box-shadow:0 24px 70px #0000008c,var(--glow-teal);aspect-ratio:400 / 600}.game-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}.stage__caption{text-align:center;font-size:12px;color:var(--ink-dim);margin:0}.hud{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:center;pointer-events:none}.hud__score{font-family:var(--pixel);font-size:40px;color:#fff;text-shadow:0 0 8px var(--teal),4px 4px 0 rgba(0,0,0,.6)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;gap:12px;justify-items:center;text-align:center;background:radial-gradient(circle at center,#120a2a59,#120a2abf);padding:24px}.overlay--ready{background:transparent;align-content:end;padding-bottom:90px}.overlay__hint{font-family:var(--pixel);font-size:11px;color:var(--ink);text-shadow:0 0 10px var(--magenta);animation:blink 1.1s steps(2,start) infinite}.overlay__title{font-family:var(--pixel);font-size:22px;margin:0 0 6px;color:var(--amber);text-shadow:3px 3px 0 var(--magenta)}.overlay__stat{display:flex;justify-content:space-between;gap:24px;width:220px;font-size:13px;color:var(--ink-dim);letter-spacing:1px}.overlay__stat strong{color:var(--ink);font-size:16px}.overlay__stat--rank strong{color:var(--teal);text-shadow:var(--glow-teal)}.overlay__pending{font-size:11px;color:var(--teal)}.side{display:flex;flex-direction:column}.board{background:#120a2ac7;border:1px solid rgba(255,122,198,.3);border-radius:16px;padding:20px 18px;box-shadow:0 24px 60px #00000073}.board__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}.board__globe{font-size:20px;filter:drop-shadow(0 0 6px var(--teal))}.board__title{font-family:var(--pixel);font-size:14px;margin:0;color:var(--teal);text-shadow:0 0 10px rgba(57,246,230,.4)}.board__sub{font-size:11px;color:var(--ink-dim);margin-left:auto;text-transform:uppercase;letter-spacing:1px}.board__cols,.row,.board__you{display:grid;grid-template-columns:44px 1fr 56px 64px;align-items:center;gap:8px}.board__cols{font-size:10px;color:var(--ink-dim);letter-spacing:1px;padding:0 10px 8px;border-bottom:1px dashed rgba(255,122,198,.25)}.col--games,.col--score{text-align:right}.col--rank{text-align:center}.board__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.row{padding:9px 10px;border-radius:8px;font-size:14px;border:1px solid transparent;transition:background .2s,border-color .2s}.row:nth-child(odd){background:#ffffff06}.row .col--rank{font-family:var(--pixel);font-size:11px;color:var(--ink-dim)}.row .col--score{font-family:var(--pixel);font-size:12px;color:var(--amber)}.row--top .col--score{color:var(--amber);text-shadow:0 0 8px rgba(255,209,102,.5)}.row--me{background:#39f6e61f;border-color:var(--teal);box-shadow:inset 0 0 0 1px #39f6e633}.row--me .col--score{color:var(--teal)}.row--flash{animation:flash .6s ease 0s 3}@keyframes flash{0%,to{background:#39f6e61f}50%{background:#ffd16666}}.you-tag{font-family:var(--pixel);font-size:7px;background:var(--teal);color:#06262a;padding:2px 4px;border-radius:4px;margin-left:8px;vertical-align:middle}.row--empty{text-align:center;color:var(--ink-dim);font-size:13px;padding:24px 0}.board__you{margin-top:12px;padding:10px;border-radius:8px;border:1px dashed var(--teal);background:#39f6e614;font-size:14px}.board__you .col--rank{font-family:var(--pixel);font-size:11px;color:var(--teal)}.board__you .col--score{font-family:var(--pixel);font-size:12px;color:var(--teal)}.row--skel{opacity:.5}.skel-bar{height:12px;border-radius:6px;background:linear-gradient(90deg,#ffffff14,#ffffff2e,#ffffff14);background-size:200% 100%;animation:shimmer 1.4s linear infinite}.skel-bar--sm{width:40px;margin-left:auto}@keyframes shimmer{to{background-position:-200% 0}}.modal{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#080412b3;z-index:20;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal__card{width:min(380px,92vw);background:#1a1036f2;border:1px solid var(--teal);border-radius:16px;padding:28px;box-shadow:0 24px 70px #0009,var(--glow-teal)}.modal__title{font-family:var(--pixel);font-size:14px;color:var(--teal);margin:0 0 8px}.modal__sub{font-size:12px;color:var(--ink-dim);margin:0 0 18px}.modal__input{width:100%;font-family:var(--mono);font-size:16px;padding:12px 14px;border-radius:10px;border:1px solid rgba(57,246,230,.4);background:#0a0618b3;color:var(--ink);outline:none}.modal__input:focus{box-shadow:var(--glow-teal)}.modal__actions{display:flex;justify-content:flex-end;gap:12px;margin-top:18px}