:root{--bg:#05060a;--bg-deep:#02030a;--fg:#e6f7ff;--dim:#6f8a9a;--cyan:#3af0ff;--cyan-glow:#3af0ff8c;--magenta:#ff2bd1;--magenta-glow:#ff2bd18c;--yellow:#ffe94f;--green:#48ffa5;--red:#f57;--border:#3af0ff2e;--header-h:44px;--mono:ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", "Geist Mono", monospace}*{box-sizing:border-box}html,body{background:var(--bg-deep);color:var(--fg);font-family:var(--mono);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;overscroll-behavior:none;margin:0;padding:0;font-size:14px}body{min-height:100dvh}button{color:inherit;border:1px solid var(--border);cursor:pointer;background:0 0;font-family:inherit}.app-header{height:var(--header-h);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10;letter-spacing:.02em;-webkit-user-select:none;user-select:none;background:linear-gradient(#05060aeb 0%,#05060ab8 100%);justify-content:center;align-items:center;gap:10px;padding:0 14px;font-size:13px;display:flex;position:fixed;top:0;left:0;right:0}.app-header .brand{color:var(--cyan);text-shadow:0 0 8px var(--cyan-glow);font-weight:600}.app-header .feat{color:var(--fg);opacity:.85}.app-header .jam{color:var(--magenta);text-shadow:0 0 6px var(--magenta-glow)}.app-header .sep{color:var(--dim)}.app-main{min-height:calc(100dvh - var(--header-h));padding-top:var(--header-h);padding-bottom:env(safe-area-inset-bottom);position:relative}.canvas-wrap{background:radial-gradient(ellipse at center, #3af0ff0d 0%, transparent 60%), var(--bg-deep);place-items:center;display:grid;position:absolute;inset:0}canvas.game{touch-action:none;image-rendering:pixelated;image-rendering:crisp-edges;box-shadow:0 0 0 1px var(--border), 0 0 40px #3af0ff14;background:var(--bg);will-change:transform;display:block}.hud{pointer-events:none;letter-spacing:.1em;z-index:5;text-transform:uppercase;justify-content:space-between;gap:12px;font-size:12px;display:flex;position:absolute;top:8px;left:8px;right:8px}.hud .group{pointer-events:auto;gap:14px;display:flex}.hud .chip{border:1px solid var(--border);color:var(--fg);background:#02030aa6;border-radius:4px;padding:6px 10px}.hud .chip b{color:var(--cyan);text-shadow:0 0 6px var(--cyan-glow);margin-left:6px;font-weight:600}.hud .chip.mag b{color:var(--magenta);text-shadow:0 0 6px var(--magenta-glow)}.hud .chip.yellow b{color:var(--yellow)}.hud button.chip{cursor:pointer;transition:border-color .14s,color .14s}.hud button.chip:hover{border-color:var(--cyan);color:var(--cyan)}.overlay{z-index:20;background:radial-gradient(#3af0ff0f 0%,#02030aeb 70%);place-items:center;padding:16px;animation:.18s ease-out fadeIn;display:grid;position:absolute;inset:0}.panel{border:1px solid var(--border);background:linear-gradient(#05060af2,#02030afa);border-radius:6px;width:min(480px,100%);padding:24px;box-shadow:0 0 0 1px #3af0ff14,0 20px 60px #0009}.panel h1{letter-spacing:.06em;color:var(--cyan);text-shadow:0 0 10px var(--cyan-glow);margin:0 0 6px;font-size:22px;font-weight:600}.panel h2{letter-spacing:.06em;color:var(--fg);margin:0 0 16px;font-size:16px;font-weight:500}.panel p{color:var(--dim);margin:0 0 16px;line-height:1.5}.panel p b{color:var(--fg)}.field{flex-direction:column;gap:6px;margin-bottom:16px;display:flex}.field label{letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-size:11px}.field input{border:1px solid var(--border);width:100%;color:var(--fg);letter-spacing:.04em;background:#ffffff05;border-radius:4px;outline:none;padding:12px 14px;font-family:inherit;font-size:15px;transition:border-color .14s,box-shadow .14s}.field input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #3af0ff26}.field .hint{color:var(--dim);font-size:11px}.field .error{color:var(--red);font-size:11px}.btn-primary{border:1px solid var(--cyan);width:100%;color:var(--cyan);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 8px var(--cyan-glow);background:linear-gradient(#3af0ff33,#3af0ff14);border-radius:4px;padding:14px 18px;font-size:14px;font-weight:600;transition:transform .1s,box-shadow .14s,background .14s;box-shadow:0 0 24px #3af0ff1f}.btn-primary:hover{box-shadow:0 0 32px #3af0ff47}.btn-primary:active{transform:translateY(1px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{border:1px solid var(--border);color:var(--fg);letter-spacing:.12em;text-transform:uppercase;background:0 0;border-radius:4px;padding:10px 14px;font-size:12px;transition:border-color .14s,color .14s}.btn-secondary:hover{border-color:var(--cyan);color:var(--cyan)}.vibe-portal{width:100%;color:var(--magenta);border:1px solid var(--magenta);text-transform:uppercase;letter-spacing:.12em;text-shadow:0 0 8px var(--magenta-glow);background:linear-gradient(#ff2bd129,#3af0ff0f);border-radius:4px;justify-content:center;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;font-size:12px;font-weight:600;text-decoration:none;transition:transform .1s,box-shadow .14s;display:inline-flex;box-shadow:0 0 24px #ff2bd124}.vibe-portal:hover{box-shadow:0 0 34px #ff2bd157}.vibe-portal:active{transform:translateY(1px)}.vibe-portal.compact{width:auto;margin-top:0;padding:9px 12px;font-size:10px}.vibe-portal-orb{background:radial-gradient(circle at 35% 35%, #fff, var(--cyan) 28%, var(--magenta) 62%, transparent 68%);width:16px;height:16px;box-shadow:0 0 12px var(--cyan-glow), 0 0 18px var(--magenta-glow);border-radius:999px}.leaderboard{flex-direction:column;width:min(520px,100%);max-height:min(620px,90dvh);display:flex;overflow:hidden}.leaderboard .list{scrollbar-width:thin;scrollbar-color:var(--border) transparent;margin:0 -24px;padding:0 24px;overflow-y:auto}.leaderboard .row{border-bottom:1px solid #3af0ff14;grid-template-columns:40px 1fr 90px 70px;align-items:center;gap:10px;padding:10px 0;font-size:13px;display:grid}.leaderboard .row.head{letter-spacing:.16em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--border);background:#02030afa;font-size:10px;position:sticky;top:0}.leaderboard .row .rk{color:var(--dim);font-variant-numeric:tabular-nums}.leaderboard .row .user{color:var(--fg);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.leaderboard .row .score{color:var(--cyan);text-align:right;font-variant-numeric:tabular-nums;text-shadow:0 0 6px var(--cyan-glow)}.leaderboard .row .time{color:var(--dim);text-align:right;font-variant-numeric:tabular-nums;font-size:11px}.leaderboard .row.me .user{color:var(--magenta);text-shadow:0 0 8px var(--magenta-glow)}.leaderboard .row.me .rk:before{content:"▸ ";color:var(--magenta)}.leaderboard .actions{gap:10px;margin-top:16px;display:flex}.leaderboard .actions .btn-primary{flex:1}.center-msg{pointer-events:none;z-index:6;text-align:center;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.center-msg .inner{pointer-events:auto;border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#02030acc;border-radius:6px;padding:28px 36px;animation:.24s cubic-bezier(.2,.9,.3,1.2) pop}.center-msg .big{letter-spacing:.1em;color:var(--cyan);text-shadow:0 0 12px var(--cyan-glow);text-transform:uppercase;margin:0 0 8px;font-size:22px;font-weight:600}.center-msg .small{color:var(--dim);letter-spacing:.1em;text-transform:uppercase;font-size:12px}.mobile-hint{bottom:calc(env(safe-area-inset-bottom) + 10px);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);pointer-events:none;z-index:5;font-size:10px;position:absolute;left:50%;transform:translate(-50%)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pop{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@media (max-width:560px){.app-header{letter-spacing:0;gap:4px;padding:0 8px;font-size:10px}.app-header .feat{display:none}.panel{padding:20px}.hud{gap:6px;font-size:10px;top:4px;left:4px;right:4px}.hud .chip{padding:4px 6px}.hud .group{flex-wrap:wrap;gap:6px}}