:root { color-scheme: dark; --ink:#f4f1e8; --muted:#9398aa; --panel:#0d1120; --line:#252a3b; --acid:#d8ff4f; --pink:#ff4e91; --cyan:#48ddff; --bg:#070a13; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; background-image:radial-gradient(circle at 80% 8%,#27315755 0,transparent 25%),linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px); background-size:auto,48px 48px,48px 48px; }
button,a { font:inherit; }
button { color:inherit; }
.app-shell { width:min(1160px,calc(100% - 40px)); margin:auto; }
.topbar { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:13px; color:var(--ink); text-decoration:none; font-family:Inter,Avenir,"Helvetica Neue",sans-serif; font-weight:700; letter-spacing:.04em; }
.brand-mark { display:grid; place-items:center; width:37px; height:37px; color:var(--bg); background:var(--acid); font-size:13px; box-shadow:4px 4px 0 #829c20; }
.sound-toggle { border:1px solid var(--line); background:#0b0f1c; padding:10px 14px; font-size:11px; letter-spacing:.08em; cursor:pointer; }
.sound-toggle span { color:var(--acid); }
.hero { padding:74px 0 42px; text-align:center; }
.eyebrow { margin:0 0 18px; color:var(--acid); font-size:11px; letter-spacing:.2em; }
h1,h2 { font-family:Inter,Avenir,"Helvetica Neue",sans-serif; margin:0; line-height:.9; letter-spacing:-.055em; }
h1 { font-size:clamp(52px,8vw,100px); }
h1 em { color:transparent; -webkit-text-stroke:1.5px var(--pink); font-style:normal; text-shadow:4px 4px 0 #ff4e9125; }
.lede { color:var(--muted); line-height:1.75; font-size:13px; margin:25px 0 0; }
.game-card { border:1px solid var(--line); background:#090d19; box-shadow:0 30px 80px #0008; }
.hud { min-height:78px; display:grid; grid-template-columns:repeat(3,1fr); align-items:center; border-bottom:1px solid var(--line); padding:0 30px; }
.hud>div { display:flex; align-items:baseline; gap:14px; }
.hud>div:nth-child(2) { justify-content:center; }
.hud>div:last-child { justify-content:flex-end; }
.hud span,.status-strip { color:var(--muted); font-size:10px; letter-spacing:.14em; }
.hud strong { font-family:Inter,Avenir,"Helvetica Neue",sans-serif; font-size:24px; letter-spacing:.08em; }
.hud-lives strong { color:var(--pink); font-size:17px; }
.arena { height:500px; position:relative; overflow:hidden; outline:none; background:radial-gradient(ellipse at 50% 100%,#26375e 0,transparent 53%),linear-gradient(#0e1425,#080b14); }
.arena:focus-visible { box-shadow:inset 0 0 0 2px var(--acid); }
.grid-glow { position:absolute; inset:45% -20% -80%; transform:perspective(250px) rotateX(55deg); transform-origin:top; background-image:linear-gradient(#52618e55 1px,transparent 1px),linear-gradient(90deg,#52618e55 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,transparent,#000 25%); }
.player { position:absolute; bottom:27px; left:50%; width:112px; height:39px; display:flex; align-items:center; justify-content:center; border:1px solid var(--acid); background:#192218; box-shadow:0 0 30px #d8ff4f33,inset 0 0 15px #d8ff4f12; transform:translateX(-50%); color:var(--acid); font-size:12px; transition:left .06s linear; z-index:3; }
.receiver-light { width:5px; height:5px; margin-right:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 9px var(--acid); }
.falling { position:absolute; top:-48px; z-index:2; padding:9px 12px; white-space:nowrap; font-size:11px; border:1px solid currentColor; background:#090d19e8; box-shadow:0 0 18px currentColor; }
.falling.hello { color:var(--cyan); }
.falling.bug { color:var(--pink); font-weight:500; }
.game-overlay { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; background:#090d19db; backdrop-filter:blur(4px); transition:opacity .25s,visibility .25s; }
.game-overlay.hidden { opacity:0; visibility:hidden; }
.overlay-icon { color:var(--acid); font-size:35px; animation:pulse 1.6s infinite; }
.overlay-kicker { color:var(--acid); font-size:10px; letter-spacing:.2em; margin:14px 0; }
.game-overlay h2 { font-size:clamp(38px,6vw,62px); }
.game-overlay>p:not(.overlay-kicker,.key-hint) { color:var(--muted); font-size:12px; max-width:390px; line-height:1.6; }
.primary-button { margin-top:15px; border:0; padding:16px 20px; background:var(--acid); color:#0b0e13; font-weight:700; font-size:12px; cursor:pointer; box-shadow:5px 5px 0 #768e1c; transition:transform .15s,box-shadow .15s; }
.primary-button:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 #768e1c; }
.primary-button span { margin-left:25px; }
.key-hint { color:#686e81; font-size:10px; margin-top:20px; }
kbd { border:1px solid #3b4154; padding:3px 6px; background:#151a29; }
.touch-controls { display:none; position:absolute; inset:auto 16px 15px; justify-content:space-between; z-index:6; pointer-events:none; }
.touch-controls button { width:58px; height:48px; border:1px solid #5b6378; background:#111625cc; font-size:20px; pointer-events:auto; }
.status-strip { min-height:48px; display:flex; justify-content:space-between; align-items:center; padding:0 24px; border-top:1px solid var(--line); }
.status-strip p { margin:0; }.status-strip strong { color:var(--ink); }.status-dot { display:inline-block; width:6px; height:6px; margin-right:9px; border-radius:50%; background:var(--acid); box-shadow:0 0 8px var(--acid); }
.how-to { display:grid; grid-template-columns:1fr 2fr; gap:60px; padding:100px 0; }
.how-to h2 { font-size:43px; }.how-to ol { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.how-to li { min-height:150px; padding:20px; border:1px solid var(--line); background:#0c101c; }
.how-to li>span { color:var(--acid); font-size:10px; }.how-to li div { margin-top:36px; }.how-to li strong { font-family:Inter,Avenir,"Helvetica Neue",sans-serif; font-size:14px; }.how-to li p { color:var(--muted); font-size:10px; line-height:1.6; }
footer { min-height:70px; display:flex; justify-content:space-between; align-items:center; color:#5f6577; font-size:9px; letter-spacing:.12em; border-top:1px solid var(--line); }
@keyframes pulse { 50% { opacity:.45; transform:scale(.9); } }
@media (max-width:760px) { .app-shell{width:min(100% - 22px,1160px)} .topbar{height:66px}.brand{font-size:12px}.sound-toggle{font-size:9px}.hero{padding:55px 0 30px}.arena{height:470px}.hud{padding:0 13px}.hud>div{display:block}.hud strong{display:block;font-size:18px;margin-top:5px}.touch-controls{display:flex}.player{bottom:75px}.how-to{grid-template-columns:1fr;padding:70px 0;gap:30px}.how-to ol{grid-template-columns:1fr}.how-to li{min-height:115px}.how-to li div{margin-top:23px}footer{display:block;padding:24px 0}footer span{display:block;margin:5px 0} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }