@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;1,700&family=Inter:wght@500;600;700&display=swap');

:root{--ink:#05080b;--paper:#edf7ff;--cyan:#21c7ff;--red:#ff2945;--amber:#ffca43;--glass:rgba(5,9,13,.78)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#05080b;color:var(--paper);font-family:Inter,system-ui,sans-serif}button{font:inherit}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;background:#080e13;touch-action:none}
#game:after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle,transparent 45%,rgba(0,0,0,.45) 100%)}
.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 68% 35%,rgba(25,80,105,.18),transparent 30%),linear-gradient(100deg,rgba(2,5,8,.97),rgba(2,5,8,.7));opacity:0;visibility:hidden;transition:.45s;z-index:20}.overlay.active{opacity:1;visibility:visible}
.boot-card,.result-card{width:min(540px,100%);margin-right:min(37vw,520px)}.eyebrow{font:700 .78rem/1 Inter;letter-spacing:.25em;color:var(--cyan);margin-bottom:18px}.boot-card h1,.result-card h2{font:800 clamp(3.6rem,7vw,6.6rem)/.76 "Barlow Condensed",sans-serif;letter-spacing:-.035em;margin:0;text-transform:uppercase}.boot-card h1 span{color:transparent;-webkit-text-stroke:1.5px var(--paper)}.boot-card p,.result-card p{max-width:470px;color:#a7bbc8;font-size:1rem;line-height:1.65;margin:30px 0}
.key-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 22px;margin:0 0 28px}.key-grid div{display:flex;align-items:center;min-height:34px;color:#8da2af;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}.key-grid kbd{min-width:30px;height:30px;display:grid;place-items:center;margin-right:5px;border:1px solid #52636e;border-bottom-width:3px;border-radius:3px;color:#dceaf1;background:#111920;font:bold .8rem Inter}.key-grid span{margin-left:7px}
.boot-card button,.result-card button{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;background:var(--paper);color:#071016;padding:18px 20px;font-weight:800;letter-spacing:.08em;cursor:pointer;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);transition:.2s}.boot-card button:hover,.result-card button:hover{background:var(--cyan);transform:translateY(-2px)}.boot-card button b,.result-card button b{font-size:1.35rem}.boot-card small{display:block;text-align:center;color:#586a75;margin-top:14px;font-size:.7rem}.hidden{opacity:0!important;pointer-events:none!important}
#hud{position:fixed;z-index:5;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:28px 34px;transition:.3s;pointer-events:none;background:linear-gradient(#05080bb8,transparent)}#hud span,#hud small{display:block;font-size:.62rem;letter-spacing:.2em;color:#78909e}#hud b{font:700 1.1rem/1 "Barlow Condensed";letter-spacing:.1em}.unit{display:grid;grid-template-columns:12px auto;grid-template-rows:auto auto;column-gap:10px}.unit .live{grid-row:1/3;align-self:center;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:pulse 1s infinite}.target{text-align:center;border-top:2px solid var(--red);padding:8px 38px;background:linear-gradient(#ff29451b,transparent)}.target b{color:#fff}.camera{text-align:right;pointer-events:auto}.camera button{margin-top:5px;border:0;border-bottom:1px solid #52636e;color:#fff;background:none;font:700 .95rem "Barlow Condensed";letter-spacing:.1em;cursor:pointer;padding:0 0 4px}
#reticle{position:fixed;left:50%;top:37%;z-index:6;transform:translate(-50%,-50%);text-align:center;transition:left .14s ease-out,opacity .3s;pointer-events:none}#reticle b{display:block;height:22px;color:#ff2945;font:800 1.35rem/1 Inter;text-shadow:0 0 10px #ff2945;transform-origin:50% 50%;transition:transform .14s}#reticle i{display:block;width:64px;height:28px;border:1px solid #ff2945;border-top:0;clip-path:polygon(0 0,9% 0,9% 82%,91% 82%,91% 0,100% 0,100% 100%,0 100%);margin:auto;filter:drop-shadow(0 0 4px #ff2945)}#reticle span{font:700 .65rem Inter;letter-spacing:.16em;color:#ffdce1;background:#18070be6;padding:4px 7px;white-space:nowrap}
#minimap{position:fixed;z-index:6;right:32px;top:105px;width:180px;transition:.3s;pointer-events:none;background:#04090dc7;border:1px solid #456070;border-top:2px solid var(--cyan);box-shadow:0 12px 34px #0008;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%)}#minimap>div{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;border-bottom:1px solid #31424c}#minimap span,#minimap small{font:700 .56rem Inter;letter-spacing:.16em;color:#9ab0bc}#minimap>div b{color:var(--cyan);font:800 .7rem Inter}#mapCanvas{width:178px;height:178px;display:block}#minimap small{display:block;padding:7px 9px 8px}#minimap small i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 7px var(--red);margin-right:5px}
#damage{position:fixed;z-index:5;left:34px;bottom:33px;width:270px;transition:.3s}#damage>span{font-size:.61rem;letter-spacing:.16em;color:#91a6b2}.damage-row{display:flex;gap:12px;align-items:center;margin-top:8px}.bar{flex:1;height:8px;background:#26333b;transform:skew(-20deg);overflow:hidden}.bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--amber),var(--red));box-shadow:0 0 12px var(--red);transition:.25s}.damage-row b{font:700 1rem "Barlow Condensed"}
#speedo{position:fixed;right:34px;bottom:28px;z-index:5;display:flex;align-items:flex-end;gap:9px;text-align:right;transition:.3s}#speedo div{display:flex;align-items:baseline;gap:8px}#speedo b{font:italic 800 clamp(3rem,6vw,5rem)/.75 "Barlow Condensed";letter-spacing:-.04em;text-shadow:0 0 18px #21c7ff55}#speedo span{font:bold .65rem Inter;letter-spacing:.12em;color:#8aa1ae}#speedo small{width:28px;height:28px;display:grid;place-items:center;background:var(--cyan);color:#041016;font:bold 1rem "Barlow Condensed";clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%)}
.mission{position:fixed;z-index:8;top:110px;left:50%;transform:translate(-50%,-20px);padding:10px 22px;border-left:2px solid var(--cyan);background:linear-gradient(90deg,rgba(8,20,28,.92),rgba(8,20,28,.6));text-align:center;opacity:1;transition:.5s}.mission span{display:block;color:var(--cyan);font-size:.57rem;letter-spacing:.25em;margin-bottom:3px}.mission b{font:700 1.05rem "Barlow Condensed";letter-spacing:.06em;text-transform:uppercase}.mission.hidden{transform:translate(-50%,-35px)}
#hitFlash{position:fixed;inset:0;pointer-events:none;z-index:7;opacity:0;box-shadow:inset 0 0 120px 30px var(--red)}#hitFlash.flash{animation:hit .35s}
#velocityFx{position:fixed;inset:-20%;z-index:3;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 0deg at 50% 48%,transparent 0 4deg,rgba(189,231,255,.16) 4.1deg 4.24deg,transparent 4.35deg 9deg);mask-image:radial-gradient(circle at 50% 48%,transparent 0 20%,#000 68%);transition:opacity .12s}
#cockpit{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden;transition:opacity .2s}#cockpit:before{content:"";position:absolute;inset:0;border:clamp(18px,3vw,46px) solid #050708;border-bottom-width:0;clip-path:polygon(0 0,100% 0,100% 20%,94% 18%,82% 11%,18% 11%,6% 18%,0 20%)}#cockpit:after{content:"";position:absolute;left:-8%;right:-8%;bottom:-18%;height:45%;border-radius:50% 50% 0 0;background:linear-gradient(#172027,#06090b 38%);box-shadow:0 -8px 20px #0008,inset 0 8px 0 #2b3942}#cockpit i{position:absolute;z-index:2;left:50%;bottom:-11%;width:min(38vw,390px);aspect-ratio:1;border:18px solid #11191e;border-radius:50%;transform:translateX(-50%);box-shadow:0 0 0 3px #35434b,inset 0 0 0 4px #020304}#cockpit b{position:absolute;z-index:3;left:50%;bottom:7%;width:90px;height:42px;transform:translateX(-50%);background:#05080a;border:2px solid #26353d;border-radius:6px;box-shadow:0 0 18px #21c7ff22}
#touch{position:fixed;inset:auto 18px 22px;z-index:10;display:flex;justify-content:space-between;transition:.3s;pointer-events:none}.steer,.pedals{display:flex;gap:10px;pointer-events:auto}#touch button{width:64px;height:64px;border:1px solid #a9c0cc55;border-radius:50%;background:#07101899;color:#dcecf3;font:bold 1.8rem "Barlow Condensed";backdrop-filter:blur(6px);touch-action:none}#touch .pedals button{font-size:.68rem;letter-spacing:.06em}#touch button:active{background:#1e526a99;border-color:var(--cyan)}
.result-card{margin:0;text-align:center}.result-card .badge{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;margin:0 auto 20px;background:#b8ff54;color:#0a1505;font-size:1.7rem;box-shadow:0 0 40px #b8ff5466}.result-card h2{font-size:clamp(3.3rem,7vw,5.6rem)}.result-card p{margin:22px auto}.result-card dl{display:grid;grid-template-columns:repeat(3,1fr);margin:25px 0 30px;border-block:1px solid #34424b}.result-card dl div{padding:16px;border-right:1px solid #34424b}.result-card dl div:last-child{border:0}.result-card dt{font-size:.58rem;letter-spacing:.16em;color:#78909e}.result-card dd{margin:5px 0 0;font:700 1.4rem "Barlow Condensed"}
@keyframes pulse{50%{opacity:.25}}@keyframes hit{0%{opacity:1}100%{opacity:0}}
@media(pointer:fine){#touch{display:none}}@media(max-width:800px){.boot-card{margin:0}.overlay{align-items:end;padding-bottom:32px}.boot-card h1{font-size:3.5rem}.boot-card p{font-size:.9rem;margin:22px 0}.key-grid{display:none}#hud{padding:18px 16px;grid-template-columns:1fr auto}.target{display:none}.camera{grid-column:2}#damage{left:18px;bottom:104px;width:210px}#speedo{right:18px;bottom:100px}#speedo b{font-size:3rem}.result-card{margin:0}.result-card p{font-size:.9rem}#reticle{top:34%}#minimap{right:14px;top:78px;width:132px}#mapCanvas{width:130px;height:130px}#minimap>div{height:24px}#minimap small{display:none}}
@media(max-height:600px){.boot-card p{margin:14px 0}.key-grid{display:none}.boot-card h1{font-size:3rem}.result-card p{display:none}}