:root { --bg:#090b11; --panel:#0e1119; --ink:#effff8; --dim:#68736f; --neon:#51f6a6; --pink:#ff4f91; --line:rgba(126,255,190,.15); }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--ink); background:var(--bg); font-family:"IBM Plex Mono",monospace; overflow-x:hidden; }
.noise { position:fixed; inset:0; z-index:10; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
header, main, footer { width:min(1100px,calc(100% - 40px)); margin-inline:auto; }
header { height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.12em; }
.back { color:var(--dim); text-decoration:none; transition:.2s; }.back:hover{color:var(--neon)}
.sound-label { color:var(--dim); }.status-dot { display:inline-block; width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--neon);box-shadow:0 0 12px var(--neon);animation:pulse 1.5s infinite; }
main { padding:50px 0 65px; }
.intro { position:relative; margin-bottom:32px; }
.kicker { margin:0 0 8px;color:var(--neon);font-size:10px;letter-spacing:.25em; }
h1 { margin:0;font:400 clamp(48px,8vw,88px)/.95 "Black Han Sans",sans-serif;letter-spacing:.02em; }
h1 span { color:transparent;-webkit-text-stroke:1px var(--neon);text-shadow:0 0 25px rgba(81,246,166,.2); }
.description { position:absolute;right:0;bottom:3px;margin:0;color:var(--dim);font-size:12px;line-height:1.8;text-align:right; }
.game-shell { border:1px solid var(--line);background:var(--panel);box-shadow:0 25px 80px rgba(0,0,0,.35); }
.scoreboard { height:82px;display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--line); }
.metric { display:flex;align-items:center;justify-content:center;gap:18px; }.metric+ .metric{border-left:1px solid var(--line)}
.metric span { color:var(--dim);font-size:10px;letter-spacing:.16em; }.metric strong { font-size:25px;font-weight:500;font-variant-numeric:tabular-nums; }
.timer strong { color:var(--neon);text-shadow:0 0 15px rgba(81,246,166,.35); }
.arena { position:relative;height:min(52vh,470px);min-height:330px;overflow:hidden;cursor:crosshair;touch-action:manipulation; }
.grid { position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle,black 15%,transparent 80%);opacity:.5; }
.arena::after { content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--neon),transparent);opacity:.25;animation:scan 5s linear infinite;pointer-events:none; }
.corner { position:absolute;width:20px;height:20px;border-color:var(--neon);opacity:.55 }.top-left{top:18px;left:18px;border-top:1px solid;border-left:1px solid}.top-right{top:18px;right:18px;border-top:1px solid;border-right:1px solid}.bottom-left{bottom:18px;left:18px;border-bottom:1px solid;border-left:1px solid}.bottom-right{bottom:18px;right:18px;border-bottom:1px solid;border-right:1px solid}
.start-screen { position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(9,11,17,.76);backdrop-filter:blur(3px);text-align:center; }
.start-screen.hidden { display:none; }.radar{position:relative;width:66px;height:66px;margin-bottom:22px;border:1px solid var(--line);border-radius:50%}.radar::before,.radar::after{content:"";position:absolute;background:var(--line)}.radar::before{width:100%;height:1px;top:50%;left:0}.radar::after{width:1px;height:100%;left:50%;top:0}.radar span{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon)}.radar i{position:absolute;inset:6px;border-radius:50%;background:conic-gradient(from 0deg,rgba(81,246,166,.45),transparent 30%);animation:rotate 2s linear infinite}
h2{margin:0 0 9px;font-size:25px;font-weight:500}.start-screen p{margin:0 0 27px;color:var(--dim);font-size:11px}.start-screen button{padding:16px 25px;border:1px solid var(--neon);color:var(--bg);background:var(--neon);font:600 12px "IBM Plex Mono";letter-spacing:.08em;cursor:pointer;box-shadow:0 0 25px rgba(81,246,166,.12);transition:.2s}.start-screen button:hover{box-shadow:0 0 28px rgba(81,246,166,.4);transform:translateY(-2px)}.start-screen button span{margin-left:12px;font-size:9px;opacity:.55}
.target { position:absolute;z-index:3;display:none;width:68px;height:68px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;transform:translate(-50%,-50%);filter:drop-shadow(0 0 12px rgba(81,246,166,.5)); }.target.visible{display:block;animation:targetIn .16s ease-out}.target-ring{position:absolute;border:1px solid var(--neon);border-radius:50%;inset:0}.ring-one{animation:ring 1s infinite}.ring-two{inset:12px}.target-core{position:absolute;inset:25px;border-radius:50%;background:var(--neon);box-shadow:0 0 16px 4px var(--neon)}
.combo,.flash-score{position:absolute;z-index:4;display:none;pointer-events:none;color:var(--pink);font-weight:600;text-shadow:0 0 10px rgba(255,79,145,.6)}.combo{left:50%;top:22px;transform:translateX(-50%);font-size:12px;letter-spacing:.12em}.combo.show{display:block;animation:comboIn .25s ease}.flash-score{font-size:13px}.flash-score.show{display:block;animation:floatUp .65s ease-out forwards}
.game-footer{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-top:1px solid var(--line);color:var(--dim);font-size:9px;letter-spacing:.12em}.game-footer strong{color:var(--ink);font-weight:500}.tip{opacity:.7}
footer{display:flex;justify-content:space-between;padding:22px 0 30px;border-top:1px solid var(--line);color:#414a46;font-size:9px;letter-spacing:.1em}
@keyframes pulse{50%{opacity:.35}}@keyframes scan{from{top:0}to{top:100%}}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ring{50%{transform:scale(1.15);opacity:.25}}@keyframes targetIn{from{transform:translate(-50%,-50%) scale(.4);opacity:0}}@keyframes comboIn{from{transform:translate(-50%,-8px);opacity:0}}@keyframes floatUp{to{transform:translateY(-35px);opacity:0}}
@media(max-width:650px){header,main,footer{width:calc(100% - 24px)}main{padding-top:32px}.description{position:static;margin-top:18px;text-align:left}.scoreboard{height:70px}.metric{gap:7px;flex-direction:column}.metric strong{font-size:20px}.arena{height:52vh}.tip{display:none}.game-footer{padding:0 14px}h1{font-size:55px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}