@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Outfit:wght@500;700;800;900&display=swap');

:root { --cyan:#62f3ff; --pink:#ff4dd8; --ink:#080916; --muted:#a0a8c8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; } body { margin:0; min-height:100vh; color:#f4f5ff; background:radial-gradient(circle at 50% 0%, #202751 0%, #090a17 48%, #05050b 100%); font-family:Outfit, sans-serif; }
.site-nav { width:min(1120px, 100%); height:76px; margin:auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; }.site-nav nav { display:flex; gap:28px; }.site-nav a { color:#a8afcd; font:10px "DM Mono",monospace; letter-spacing:.16em; text-decoration:none; }.site-nav .brand { color:#fff; font:800 15px Outfit,sans-serif; }.nav-cta { border:1px solid #4d5d87; padding:10px 13px; transition:.2s; }.nav-cta:hover { color:var(--cyan); border-color:var(--cyan); }.nav-cta b { color:var(--cyan); margin-left:8px; }.hero { width:min(1120px, 100%); min-height:430px; margin:auto; padding:40px 58px 68px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; position:relative; }.hero-copy { position:relative; z-index:1; max-width:560px; }.hero h1 { font-size:clamp(58px,8.5vw,106px); line-height:.8; letter-spacing:-.085em; margin:12px 0 19px; font-weight:900; }.hero h1 em { font-style:normal; color:var(--pink); text-shadow:3px 0 #7258ff,0 0 24px #ff31d699; }.hero-text { max-width:400px; color:#b5bdd9; line-height:1.6; font-size:15px; }.hero-button { display:inline-block; margin-top:10px; padding:14px 17px; color:#07101d; background:var(--cyan); box-shadow:0 0 22px #48f3ff7a; font-size:11px; font-weight:800; letter-spacing:.14em; text-decoration:none; }.hero-button b { margin-left:25px; font-size:15px; }.hero-art { width:390px; height:340px; position:relative; flex:none; }.orb { position:absolute; border-radius:50%; filter:blur(1px); }.orb-one { width:250px; height:250px; right:15px; top:34px; background:radial-gradient(circle at 38% 32%,#aefff9 0,#45cbe3 18%,#4d53d9 50%,#131545 72%); box-shadow:0 0 60px #4e6fff99; }.orb-two { width:72px; height:72px; left:20px; bottom:26px; background:#ff43cf; box-shadow:0 0 42px #ff43cf; }.hero-ship { position:absolute; right:104px; top:135px; color:#e9fbff; font-size:58px; transform:rotate(46deg); text-shadow:0 0 15px #fff, 0 0 35px #4ff3ff; z-index:1; }.speedline { position:absolute; display:block; height:1px; background:linear-gradient(90deg,transparent,#79eeff); transform:rotate(-20deg); }.speedline.one { width:170px; top:100px; left:0; }.speedline.two { width:110px; bottom:70px; right:0; }.speedline.three { width:90px; top:40px; right:12px; }
.game-shell { width:min(100%, 1120px); margin:auto; padding:24px 28px 16px; }
.topbar, footer { display:flex; align-items:center; justify-content:space-between; letter-spacing:.15em; font-family:"DM Mono",monospace; font-size:10px; color:#8990b2; }
.topbar { padding:0 4px 18px; }.brand-mark { color:var(--cyan); font-size:19px; margin-right:9px; text-shadow:0 0 12px var(--cyan); }.how-to span { color:#5d6382; }.section-label { color:#8e95ba; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.15em; }
.game-frame { position:relative; overflow:hidden; border:1px solid rgba(133,150,255,.27); box-shadow:0 0 0 1px rgba(84,243,255,.04) inset, 0 24px 70px #000a; aspect-ratio:16 / 10; background:#080917; }
canvas { display:block; width:100%; height:100%; }
.hud { position:absolute; top:24px; left:28px; right:28px; display:flex; align-items:start; justify-content:space-between; pointer-events:none; font-family:"DM Mono",monospace; }
.hud span { display:block; font-size:9px; letter-spacing:.2em; color:#9ba5ce; }.hud strong { display:block; margin-top:4px; font-size:21px; letter-spacing:.08em; color:#fff; font-weight:500; }.center-hud { text-align:center; }.energy-box { text-align:right; }.energy-track { margin-top:8px; width:104px; height:4px; background:#343955; transform:skewX(-18deg); }.energy-track i { display:block; height:100%; width:100%; background:var(--cyan); box-shadow:0 0 9px var(--cyan); transition:width .12s; }
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; background:linear-gradient(90deg, rgba(7,8,19,.52), rgba(7,8,19,.04) 50%, rgba(7,8,19,.52)); transition:opacity .35s, visibility .35s; }.overlay.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.eyebrow { font:10px "DM Mono",monospace; letter-spacing:.32em; color:var(--cyan); text-shadow:0 0 12px #2be4ff99; }.overlay h1,.overlay h2 { margin:9px 0 10px; font-size:clamp(54px,8vw,96px); line-height:.78; letter-spacing:-.08em; font-weight:900; }.overlay h2 { font-size:clamp(43px,6vw,70px); }.overlay em { font-style:normal; color:var(--pink); text-shadow:3px 0 #7258ff, 0 0 24px #ff31d699; }.overlay p { margin:15px 0 20px; color:#bcc1dc; font-size:14px; line-height:1.55; letter-spacing:.03em; }.overlay button { border:1px solid var(--cyan); background:#57ecf719; box-shadow:0 0 20px #28e5f233 inset, 0 0 18px #28e5f244; color:white; cursor:pointer; padding:13px 16px 12px 19px; min-width:190px; font:700 12px Outfit,sans-serif; letter-spacing:.17em; transition:.2s; }.overlay button:hover { background:#55f4ff36; transform:translateY(-2px); }.overlay button b { margin-left:18px; color:var(--cyan); font-size:16px; }.overlay small { margin-top:17px; font:9px "DM Mono",monospace; letter-spacing:.16em; color:#858cac; }.overlay small span { color:var(--cyan); }.final-score { font:700 36px "DM Mono",monospace; letter-spacing:.08em; color:var(--cyan); text-shadow:0 0 16px #20dffb99; margin-top:-12px; }
footer { padding:15px 4px 0; font-size:8px; color:#606887; }.status { color:#8490b6; }.status i { display:inline-block; width:5px; height:5px; background:#69ffbd; border-radius:50%; box-shadow:0 0 7px #69ffbd; margin:0 7px 1px 0; }
.info-grid { width:min(1120px,100%); padding:76px 58px 90px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.info-grid article { border-top:1px solid #394266; padding:18px 12px 0 0; }.info-grid span { color:var(--cyan); font:10px "DM Mono",monospace; }.info-grid h2 { margin:14px 0 8px; font-size:18px; letter-spacing:-.035em; }.info-grid p { margin:0; max-width:270px; color:#959dbd; line-height:1.55; font-size:13px; }
@media (max-width:700px) { .site-nav { height:58px; padding:0 15px; }.site-nav nav { display:none; }.hero { min-height:510px; padding:50px 26px 35px; align-items:flex-start; }.hero-art { position:absolute; width:290px; height:290px; right:-55px; bottom:0; opacity:.72; }.hero-copy { max-width:440px; }.game-shell { padding:15px 12px; }.topbar { padding-bottom:12px; }.how-to { display:none; }.hud { top:15px; left:16px; right:16px; }.hud strong { font-size:16px; }.energy-track { width:68px; }.overlay p { font-size:12px; } footer { font-size:6px; }.info-grid { padding:50px 26px; grid-template-columns:1fr; gap:33px; } }