/* ===== Gonk Gunpla — Runner / Outrun theme ===== */
:root{
  --ink:#0a0d16; --ink2:#070a12; --ink3:#0b1122;
  --plastic:#eef2fb;
  --fed-blue:#2a5cc4; --fed-blue-lt:#4f8be6;
  --fed-red:#e23046; --fed-yellow:#f5c518;
  --neon-cyan:#00f0ff; --neon-mag:#ff2bd6;
  --sun-top:#ffe86b; --sun-mid:#ff8a3d; --sun-bot:#ff2bd6;
  --muted:#a9c7ff;
  /* VT323 terminal type scale. VT323 has a very small x-height, so these run
     ~30% larger than the sans equivalents to land at the same read size. */
  --t-md:21px; --t-lg:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--ink);color:var(--plastic);font-family:'Chakra Petch',sans-serif;overflow-x:hidden;cursor:none;line-height:1.5}
a{color:var(--neon-cyan);text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0}

/* ---------- targeting cursor ---------- */
#cursor{position:fixed;top:0;left:0;width:42px;height:42px;margin:-21px 0 0 -21px;z-index:9999;pointer-events:none;mix-blend-mode:screen;transition:transform .08s ease-out}
#cursor .ring{position:absolute;inset:6px;border:1.5px solid var(--neon-cyan);border-radius:50%;opacity:.7}
#cursor .brk{position:absolute;width:10px;height:10px;border:2px solid var(--neon-cyan)}
#cursor .tl{top:0;left:0;border-right:0;border-bottom:0}#cursor .tr{top:0;right:0;border-left:0;border-bottom:0}
#cursor .bl{bottom:0;left:0;border-right:0;border-top:0}#cursor .br{bottom:0;right:0;border-left:0;border-top:0}
#cursor .dot{position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-1.5px;background:var(--fed-red);border-radius:50%}
#cursor.lock{transform:scale(1.35)}#cursor.lock .ring,#cursor.lock .brk{border-color:var(--fed-yellow)}
@media(hover:none){#cursor{display:none}body{cursor:auto}}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;background:#020403;z-index:10000;display:flex;flex-direction:column;justify-content:center;padding:8vw;font-family:'VT323',monospace;color:#39ff9e;font-size:clamp(16px,2.1vw,24px);line-height:1.55;text-shadow:0 0 6px rgba(57,255,158,.6)}
#boot .ln{opacity:0}
#boot.done{animation:crtOff .5s forwards}
@keyframes crtOff{40%{filter:brightness(2.4) contrast(1.6)}60%{transform:scaleY(.006);filter:brightness(6)}100%{transform:scaleY(.001) scaleX(.4);opacity:0;visibility:hidden}}
#skip{position:fixed;bottom:18px;right:22px;z-index:10001;font-family:'Press Start 2P';font-size:10px;color:#39ff9e;opacity:.75}

/* ---------- HUD + nav ---------- */
.hud{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 18px;font-family:'VT323',monospace;font-size:var(--t-md);color:var(--neon-cyan);letter-spacing:.5px;text-shadow:0 0 6px rgba(0,240,255,.5);background:linear-gradient(180deg,rgba(6,8,16,.92),rgba(6,8,16,.4));border-bottom:1px solid rgba(0,240,255,.18)}
.hud .rec{color:var(--fed-red)}
.hud .rec::before{content:"●";margin-right:5px;animation:blink 1s steps(1) infinite}
.hud .kata{color:var(--fed-yellow);opacity:.9}
.hud nav{display:flex;gap:16px;flex-wrap:wrap}
.hud nav a{color:var(--plastic);font-size:var(--t-md);letter-spacing:1px;text-transform:uppercase;position:relative;padding:2px 0}
.hud nav a::before{content:"";position:absolute;left:-10px;top:50%;width:0;height:2px;background:var(--fed-yellow);box-shadow:0 0 8px var(--fed-yellow);transform:translateY(-50%);transition:width .18s}
.hud nav a:hover{color:var(--fed-yellow)}
.hud nav a:hover::before{width:7px}
.navtoggle{display:none;background:none;border:1px solid var(--neon-cyan);color:var(--neon-cyan);font-family:'Press Start 2P';font-size:10px;padding:8px 10px}
@keyframes blink{50%{opacity:0}}
@media(max-width:820px){
  .hud{flex-wrap:wrap}
  .hud .kata{display:none}
  .navtoggle{display:block}
  .hud nav{display:none;flex-basis:100%;flex-direction:column;gap:10px;padding:8px 0}
  .hud nav.open{display:flex}
}

/* ---------- outrun background (shared) ---------- */
.stage{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:70px 16px 40px}
.sky{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 74%,rgba(255,43,214,.30),transparent 60%),linear-gradient(180deg,#0a0d16 0%,#191033 40%,#3a154e 66%,#7a1b56 82%,#0a0d16 100%)}
.stars{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 18%,#fff,transparent),radial-gradient(1px 1px at 44% 12%,#bcd,transparent),radial-gradient(1px 1px at 85% 40%,#fff,transparent),radial-gradient(1px 1px at 33% 44%,#9ad,transparent),radial-gradient(1px 1px at 60% 34%,#fff,transparent);opacity:.7}
.sun{position:absolute;left:50%;top:44%;width:min(46vw,420px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(180deg,var(--sun-top),var(--sun-mid) 52%,var(--sun-bot));filter:drop-shadow(0 0 60px rgba(255,120,60,.6));-webkit-mask:repeating-linear-gradient(180deg,#000 0 12px,transparent 12px 15px);mask:repeating-linear-gradient(180deg,#000 0 12px,transparent 12px 15px)}
.sun::after{content:"";position:absolute;inset:0;border-radius:50%;-webkit-mask:linear-gradient(180deg,#000 40%,transparent 60%);mask:linear-gradient(180deg,#000 40%,transparent 60%);background:linear-gradient(180deg,var(--sun-top),var(--sun-mid))}
.grid{position:absolute;left:-25%;right:-25%;bottom:0;height:52%;background-image:linear-gradient(90deg,rgba(0,240,255,.55) 1px,transparent 1px),linear-gradient(180deg,rgba(0,240,255,.55) 1px,transparent 1px);background-size:60px 60px;transform:perspective(340px) rotateX(74deg);transform-origin:bottom;animation:grid 1.1s linear infinite;box-shadow:0 0 40px rgba(0,240,255,.3)}
@keyframes grid{to{background-position:0 60px}}
.hill{position:absolute;bottom:52%;left:0;right:0;height:2px;background:var(--neon-cyan);box-shadow:0 0 12px var(--neon-cyan),0 0 24px var(--neon-cyan)}
.scan{position:absolute;inset:0;pointer-events:none;z-index:6;background:repeating-linear-gradient(180deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.vhs{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .4s steps(3) infinite}
@keyframes grain{to{transform:translate(6px,3px)}}
.frame{position:fixed;z-index:55;width:34px;height:34px;border:2px solid rgba(0,240,255,.5);pointer-events:none}
.frame.a{top:52px;left:12px;border-right:0;border-bottom:0}.frame.b{top:52px;right:12px;border-left:0;border-bottom:0}
.frame.c{bottom:12px;left:12px;border-right:0;border-top:0}.frame.d{bottom:12px;right:12px;border-left:0;border-top:0}

/* ---------- hero: sprue nameplate ---------- */
.hero{position:relative;z-index:10;text-align:center;padding:0 10px;max-width:1000px}
.runner-lbl{font-family:'Press Start 2P';font-size:clamp(9px,2.4vw,11px);line-height:1.6;color:var(--fed-yellow);letter-spacing:2px;margin:0 auto 6px;width:fit-content;background:rgba(6,8,16,.62);padding:7px 14px;border-radius:4px;text-shadow:0 1px 2px #000}
.runner{position:relative;display:inline-block;border-radius:26px;padding:15px;margin:10px 0 6px;background:linear-gradient(155deg,#c6d1e8 0%,#8494bd 32%,#5a6a94 62%,#39476b 100%);box-shadow:0 14px 30px rgba(0,0,0,.55),inset 0 2px 3px rgba(255,255,255,.6),inset 0 -3px 6px rgba(0,0,0,.4);animation:snapin .7s cubic-bezier(.2,1.3,.4,1) both}
@keyframes snapin{0%{transform:scale(.82) rotate(-2deg);opacity:0}100%{transform:none;opacity:1}}
.runner::before{content:"";position:absolute;top:8px;left:18px;right:18px;height:32%;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));pointer-events:none}
.runner .win{position:relative;border-radius:14px;padding:30px 46px 34px;background:rgba(8,11,20,.6);box-shadow:inset 0 0 0 2px rgba(0,0,0,.45),inset 0 0 34px rgba(0,0,0,.6)}
.runner .rtag{position:absolute;top:-16px;left:26px;width:36px;height:36px;border-radius:50%;z-index:3;background:radial-gradient(circle at 35% 30%,#eef2fb,#5a6a94);color:#1a2340;font-family:'Press Start 2P';font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 7px rgba(0,0,0,.5),inset 0 1px 2px rgba(255,255,255,.9)}
.gate{position:absolute;width:0;height:0;z-index:2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.gate.t{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:13px solid #97a6cc;top:9px}
.gate.b{border-left:6px solid transparent;border-right:6px solid transparent;border-top:13px solid #97a6cc;bottom:9px}
.gate.l{border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:13px solid #97a6cc;left:7px}
.gate.r{border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:13px solid #97a6cc;right:7px}
.title{font-family:'Press Start 2P';font-size:clamp(24px,6.4vw,64px);line-height:1.16;background:linear-gradient(180deg,#fff 0%,#dbe6ff 38%,var(--fed-blue) 40%,#12244f 60%,#7fd7ff 62%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:3px 3px 0 var(--fed-red),-2px -1px 0 var(--neon-cyan);letter-spacing:2px}
.title .part{position:relative;display:inline-block}
.title .part[data-code]::after{content:attr(data-code);position:absolute;top:-17px;right:-6px;font-size:10px;color:var(--fed-yellow);-webkit-text-fill-color:var(--fed-yellow);text-shadow:none;letter-spacing:0}
.tag{font-family:'VT323';font-size:clamp(21px,3.2vw,34px);color:var(--neon-mag);margin:14px auto 4px;width:fit-content;max-width:100%;background:rgba(6,8,16,.6);padding:3px 16px;border-radius:4px;text-shadow:0 0 10px rgba(255,43,214,.6),0 1px 3px #000}
.tag .cur{animation:blink 1s steps(1) infinite}
.specrow{display:flex;gap:2px 16px;justify-content:center;flex-wrap:wrap;font-family:'VT323';font-size:var(--t-lg);color:var(--muted);margin:8px auto 22px;width:fit-content;max-width:100%;background:rgba(6,8,16,.6);padding:6px 16px;border-radius:4px;text-shadow:0 1px 3px #000}
.specrow b{color:var(--fed-yellow);font-weight:400}
.cta{position:relative;display:inline-block;font-family:'Press Start 2P';font-size:clamp(12px,3.2vw,14px);letter-spacing:1px;color:var(--ink);background:var(--fed-yellow);padding:18px 28px;border:0;text-decoration:none;clip-path:polygon(0 0,100% 0,100% 70%,94% 100%,0 100%);box-shadow:0 0 0 2px var(--ink),4px 4px 0 var(--fed-red);cursor:none}
.cta:hover{animation:jit .18s infinite;box-shadow:0 0 0 2px var(--ink),4px 4px 0 var(--neon-cyan)}
.cta small{display:block;font-size:9px;color:#4a3c00;margin-bottom:7px}
@keyframes jit{0%,100%{transform:translate(0,0)}25%{transform:translate(-1px,1px)}75%{transform:translate(1px,-1px)}}
.scrollcue{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:12;font-family:'VT323';color:var(--neon-cyan);font-size:var(--t-md);text-align:center;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,7px)}}

/* ---------- content sections ---------- */
.section{position:relative;z-index:10;background:var(--ink2);padding:66px 20px;border-top:2px solid rgba(0,240,255,.25)}
.section.alt{border-top-color:rgba(255,43,214,.3)}
.wrap{max-width:1040px;margin:0 auto}
.step-h{display:flex;align-items:center;gap:14px;max-width:1040px;margin:0 auto 26px}
.step-num{font-family:'Press Start 2P';font-size:20px;color:var(--ink);background:var(--fed-blue);width:52px;height:52px;display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--fed-red);flex:none}
.step-num.red{background:var(--fed-red);box-shadow:3px 3px 0 var(--fed-yellow)}
.step-num.cyan{background:var(--neon-cyan);box-shadow:3px 3px 0 var(--fed-mag,#ff2bd6)}
.step-h h3{font-family:'Press Start 2P';font-size:clamp(15px,2.6vw,22px);line-height:1.35}
.step-h .sub{font-family:'VT323';color:var(--neon-cyan);font-size:var(--t-lg);margin-top:5px}

/* featured */
.featured{max-width:1040px;margin:0 auto}
.featured .ratio{position:relative;aspect-ratio:16/9;border:2px solid rgba(0,240,255,.35);box-shadow:0 0 30px rgba(0,240,255,.12);background:#000}
.featured .ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.featured p{font-family:'VT323';font-size:26px;line-height:1.4;color:var(--muted);margin-top:14px}

/* cards */
.cards{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{position:relative;background:linear-gradient(180deg,#101830,#0b1122);border:1.5px solid rgba(79,139,230,.4);padding:16px;border-radius:4px;transition:transform .18s,border-color .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);border-color:var(--neon-cyan);box-shadow:0 8px 26px rgba(0,240,255,.14)}
.card::before{content:attr(data-part);position:absolute;top:-1px;left:12px;transform:translateY(-50%);font-family:'Press Start 2P';font-size:10px;color:var(--fed-yellow);background:var(--ink2);padding:0 7px}
.thumb{position:relative;aspect-ratio:16/9;border-radius:3px;overflow:hidden;background:repeating-linear-gradient(45deg,rgba(0,240,255,.08) 0 8px,transparent 8px 16px),linear-gradient(135deg,#1a2b57,#0c1226);display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,240,255,.25);margin-bottom:12px;font-family:'VT323';color:var(--neon-cyan);font-size:var(--t-md);text-align:center;padding:0 10px}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,8,16,.25);color:#fff;font-size:34px;text-shadow:0 0 12px #000}
a.card{color:inherit}
.badge{display:inline-block;font-family:'Press Start 2P';font-size:9px;line-height:1;padding:5px 7px;margin:0 6px 6px 0}
.b-hg{background:var(--fed-blue);color:#fff}.b-rg{background:#6a3fb5;color:#fff}.b-mg{background:#1f7a4d;color:#fff}.b-pg{background:#b5892f;color:#fff}.b-sd{background:#555;color:#fff}
.b-done{background:var(--fed-yellow);color:var(--ink)}.b-wip{background:var(--fed-red);color:#fff}.b-backlog{background:#33405f;color:var(--muted)}
.card h4{font-family:'Chakra Petch';font-weight:600;margin:8px 0 6px;font-size:19px;line-height:1.3}
.note{font-family:'VT323';color:var(--muted);font-size:18px;line-height:1.35;margin-bottom:10px;letter-spacing:.75px}
.bar{height:8px;border-radius:4px;background:#0a1120;border:1px solid rgba(0,240,255,.25);overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--neon-cyan),var(--fed-yellow));transition:width .8s ease}

/* community + support */
.center{text-align:center;max-width:760px;margin:0 auto}
.center p{font-family:'VT323';font-size:26px;line-height:1.4;color:var(--muted);margin:10px 0 24px}
.socials{display:flex;gap:22px;justify-content:center;margin-bottom:6px}
.socials a{font-size:30px;color:var(--neon-cyan);transition:transform .15s,color .15s;cursor:none}
.socials a:hover{color:var(--fed-yellow);transform:translateY(-3px) scale(1.1)}

/* footer */
footer{position:relative;z-index:10;background:#000;border-top:2px solid var(--neon-cyan);padding:24px 22px;text-align:center;font-family:'VT323';color:var(--muted);font-size:var(--t-lg);line-height:1.45}
footer a{margin:0 10px}
.back-to-top{position:fixed;bottom:16px;right:16px;z-index:56;width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:rgba(6,8,16,.8);border:2px solid var(--neon-cyan);color:var(--neon-cyan);font-size:18px;cursor:none;opacity:0;pointer-events:none;transition:opacity .25s}
.back-to-top.show{opacity:1;pointer-events:auto}
.back-to-top:hover{color:var(--fed-yellow);border-color:var(--fed-yellow)}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media(max-width:520px){
  .runner .win{padding:22px 22px 26px}
  .step-num{width:44px;height:44px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  #boot{display:none}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}