:root{--bg: #0a0620;--panel: rgba(10, 18, 38, .72);--line: rgba(20, 224, 207, .3);--accent: #14e0cf;--cyan: #7df2ff;--green: #3dff9e;--amber: #ffd23f;--red: #ff3355;--text: #cfe9ec;--dim: #5f7d86;--display: "Chakra Petch", "Avenir Next Condensed", sans-serif;--mono: "IBM Plex Mono", "SF Mono", Menlo, monospace}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:var(--mono);color:var(--text);touch-action:none;-webkit-user-select:none;user-select:none}#game{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;outline:none}#hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:.7rem 1.4rem;background:linear-gradient(180deg,#060a18d9,#060a1800);pointer-events:none;z-index:10}.hud-block{display:flex;align-items:center;gap:.7rem}.hud-label{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.22em;text-transform:uppercase;color:#9fc3cc}.hud-value{font-family:var(--mono);font-weight:600;font-size:1.45rem;color:var(--cyan);text-shadow:0 0 12px rgba(125,242,255,.55);font-variant-numeric:tabular-nums}#health-track{position:relative;width:clamp(140px,26vw,340px);height:13px;background:#ffffff0f;border:1px solid var(--line);border-radius:999px;overflow:hidden}#health-fill{height:100%;width:0%;border-radius:999px;background:var(--red);box-shadow:0 0 14px var(--red);transition:width .18s ease-out,background-color .3s linear,box-shadow .3s linear}#lives{display:inline-flex;gap:.35rem;margin-left:.6rem}#lives .life{width:18px;height:18px;border-radius:50%;background:url(/favicon.png) center / cover no-repeat;box-shadow:0 0 10px #14e0cfcc}#lives .life.lost{background:#ffffff12;box-shadow:none}#announcer{position:absolute;top:4.2rem;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:.3rem;pointer-events:none;z-index:11}.announce{font-family:var(--display);font-weight:600;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);text-shadow:0 0 14px rgba(61,255,158,.7);animation:announce-rise 1.8s ease-out forwards}@keyframes announce-rise{0%{opacity:0;transform:translateY(8px)}12%{opacity:1;transform:translateY(0)}75%{opacity:1}to{opacity:0;transform:translateY(-10px)}}#overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#080c1c8c,#050812e0);z-index:20;transition:opacity .25s ease}#overlay.hidden{opacity:0;pointer-events:none}#overlay-bg{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;opacity:0;transition:opacity .4s ease;pointer-events:none}#overlay.menu #overlay-bg{opacity:1}#overlay-bg .synth-stars{position:absolute;top:0;right:0;bottom:45%;left:0;background-image:radial-gradient(1.5px 1.5px at 12% 30%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 12%,#7df2ff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 44% 38%,#ff2d95 50%,transparent 51%),radial-gradient(1px 1px at 61% 18%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 76% 33%,#7df2ff 50%,transparent 51%),radial-gradient(1px 1px at 89% 10%,#ff2d95 50%,transparent 51%),radial-gradient(1px 1px at 8% 8%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 52% 6%,#ffd23f 50%,transparent 51%),radial-gradient(1px 1px at 95% 42%,#fff 50%,transparent 51%);animation:star-twinkle 1.1s ease-in-out infinite alternate}#overlay-bg .synth-sun{position:absolute;left:50%;top:9%;width:44vmin;height:44vmin;transform:translate(-50%);border-radius:50%;background:linear-gradient(180deg,#ffd23f,#ff8c1a 38%,#ff2d95 68%,#d94fff);-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 19px);mask-image:repeating-linear-gradient(180deg,#000 0 14px,transparent 14px 19px);filter:drop-shadow(0 0 45px rgba(255,45,149,.55));animation:sun-stripes 1.2s linear infinite}#overlay-bg .synth-horizon{position:absolute;left:0;right:0;top:46%;height:3px;background:#ff2d95;box-shadow:0 0 22px 4px #ff2d95cc,0 0 70px 20px #ff2d9559}#overlay-bg .synth-grid{position:absolute;left:-60%;right:-60%;top:46%;height:130%;background-image:linear-gradient(rgba(255,45,149,.85) 2px,transparent 2px),linear-gradient(90deg,rgba(255,45,149,.85) 2px,transparent 2px);background-size:46px 46px;transform:perspective(340px) rotateX(63deg);transform-origin:50% 0;-webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%);animation:grid-rush .5s linear infinite}@keyframes grid-rush{to{background-position:0 46px}}@keyframes sun-stripes{to{-webkit-mask-position:0 19px;mask-position:0 19px}}@keyframes star-twinkle{0%{opacity:.45}to{opacity:1}}@media(prefers-reduced-motion:reduce){#overlay-bg .synth-grid,#overlay-bg .synth-sun,#overlay-bg .synth-stars{animation:none}}#overlay-box{position:relative;z-index:1;text-align:center;padding:2.5rem 3rem;border:1px solid var(--line);background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 0 60px #14e0cf1f,inset 0 0 40px #14e0cf0a;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}#overlay-logo{margin-bottom:1.4rem}#overlay-logo svg{width:clamp(180px,30vw,260px);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 0 14px rgba(20,224,207,.45))}#overlay-eyebrow{font-family:var(--display);font-size:.7rem;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}#overlay-title{font-family:var(--display);font-weight:700;font-size:clamp(2rem,6vw,3.6rem);line-height:1.05;letter-spacing:.06em;color:#f2fffd;text-shadow:0 0 18px rgba(20,224,207,.9),0 0 60px rgba(20,224,207,.4);margin-bottom:1.2rem}#overlay-title.danger{color:#fff0f3;text-shadow:0 0 18px rgba(255,51,85,.9),0 0 60px rgba(255,51,85,.4)}#overlay-sub{font-size:.9rem;line-height:1.65;color:var(--text);margin-bottom:1.6rem}#leaderboard{margin:0 auto 1.6rem;max-width:340px;display:flex;flex-direction:column;gap:.35rem}.lb-title{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}.lb-row{display:grid;grid-template-columns:2.2ch 1fr 4ch auto;gap:.9rem;align-items:baseline;font-size:.9rem;font-variant-numeric:tabular-nums}.lb-row .lb-rank{color:var(--dim);text-align:right}.lb-row .lb-name{color:var(--text);letter-spacing:.1em;text-transform:uppercase;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-row .lb-sprint{color:var(--dim);font-size:.78rem}.lb-row .lb-score{color:var(--cyan);text-shadow:0 0 10px rgba(125,242,255,.45);text-align:right}#overlay-input-row{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-bottom:1.5rem}#overlay-input-row label{font-family:var(--display);font-weight:600;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}#player-name{background:#14e0cf0f;border:1px solid var(--line);color:var(--cyan);font-family:var(--mono);font-size:1.1rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:.4rem .7rem;width:11ch;outline:none;text-align:center}#player-name:focus{border-color:var(--accent);box-shadow:0 0 14px #14e0cf59}#overlay-hint{font-family:var(--display);font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);animation:hint-pulse 1.6s ease-in-out infinite}@keyframes hint-pulse{0%,to{opacity:.45}50%{opacity:1}}#touch-buttons{position:absolute;right:.9rem;bottom:calc(.9rem + env(safe-area-inset-bottom,0px));display:none;gap:.6rem;z-index:12}#touch-buttons button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--accent);font-family:var(--display);font-size:1rem;font-weight:700;-webkit-tap-highlight-color:transparent}#touch-buttons button:active{background:#14e0cf33}@media(pointer:coarse){#touch-buttons{display:flex}}@media(max-width:640px){#hud{gap:.8rem;padding:.45rem .7rem}.hud-label{font-size:.6rem;letter-spacing:.14em}.hud-value{font-size:1.05rem}#health-track{width:clamp(70px,18vw,140px)}#lives .life{width:13px;height:13px}#overlay-box{margin:0 1rem;padding:1.4rem 1.2rem}}#crt{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:30;background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0px,rgba(255,255,255,.014) 1px,transparent 1px,transparent 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.42) 100%)}