:root{--space: #070a1c;--panel: rgba(13, 18, 44, .92);--edge: rgba(110, 140, 255, .35);--ink: #e8ecff;--muted: #97a3d4;--accent: #5ea0ff;--good: #5ef2a0;--bad: #ff5d73;--gold: #ffd166;--font: "Baloo 2", "Trebuchet MS", "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--space);color:var(--ink);font-family:var(--font);overflow:hidden}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.app{display:flex;flex-direction:column;height:100%}.hud{display:flex;align-items:center;gap:clamp(.75rem,3vw,2.5rem);padding:.6rem clamp(.75rem,3vw,1.75rem);background:linear-gradient(180deg,#141b3ef2,#090c1eb3);border-bottom:1px solid var(--edge)}.hud__group{display:flex;flex-direction:column;gap:.1rem;line-height:1.1}.hud__group--misses{min-width:8rem}.hud__group--actions{margin-left:auto;flex-direction:row;gap:.5rem}.hud__label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.hud__value{font-size:clamp(1.1rem,2.4vw,1.6rem);font-variant-numeric:tabular-nums}.hud__value--score{color:var(--gold)}.hud__value.is-hot{color:var(--good)}.pips{display:flex;gap:4px;margin-top:.3rem}.pip{width:12px;height:12px;border-radius:3px;border:1px solid var(--edge);background:#ffffff0f;transition:background .15s ease}.pip.is-lost{background:var(--bad);border-color:var(--bad)}.chip{border:1px solid var(--edge);background:#ffffff0d;color:var(--ink);font:inherit;font-size:.85rem;padding:.35rem .7rem;border-radius:999px;cursor:pointer}.chip:hover,.chip:focus-visible{border-color:var(--accent)}.stage{position:relative;flex:1;min-height:0}canvas{display:block;width:100%;height:100%}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:1rem;background:#040612b8;backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.panel{width:min(46rem,100%);max-height:100%;overflow-y:auto;text-align:center;padding:clamp(1.25rem,4vw,2.25rem);border:1px solid var(--edge);border-radius:1.25rem;background:var(--panel);box-shadow:0 24px 60px #0000008c}.title{margin:0;font-size:clamp(2rem,7vw,3.4rem);letter-spacing:.04em;color:var(--ink);text-shadow:0 0 24px rgba(94,160,255,.55)}.title--small{font-size:clamp(1.5rem,5vw,2.2rem)}.subtitle{margin:.35rem 0 1.4rem;color:var(--muted)}.hint{margin:1.25rem 0 0;color:var(--muted);font-size:.9rem}kbd{font:inherit;font-size:.8em;border:1px solid var(--edge);border-bottom-width:2px;border-radius:5px;padding:.05em .4em}.levels{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}.level{display:flex;flex-direction:column;gap:.3rem;text-align:left;padding:1rem;border:1px solid var(--edge);border-radius:1rem;background:#ffffff0a;color:var(--ink);font:inherit;cursor:pointer;transition:transform .12s ease,border-color .12s ease}.level:hover,.level:focus-visible{transform:translateY(-3px);border-color:var(--accent)}.level__name{font-size:1.3rem}.level__key{color:var(--muted);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}.level__description{color:var(--muted);font-size:.85rem}.level__best{color:var(--gold);font-size:.8rem}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.75rem;margin:1.25rem 0 0}.stats div{padding:.75rem;border-radius:.75rem;background:#ffffff0a}.stats dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.stats dd{margin:.2rem 0 0;font-size:1.5rem;font-variant-numeric:tabular-nums}.record{margin:.5rem 0 0;color:var(--gold);font-size:1.1rem}.record[hidden]{display:none}.panel__buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}.button{font:inherit;font-size:1.05rem;padding:.6rem 1.6rem;border:none;border-radius:999px;background:var(--accent);color:#06122b;cursor:pointer}.button--ghost{background:transparent;border:1px solid var(--edge);color:var(--ink)}.button:hover,.button:focus-visible{filter:brightness(1.1)}@media (prefers-reduced-motion: reduce){.level{transition:none}}