@font-face{font-family:"Press Start 2P";src:url(assets/PressStart2P.woff) format("woff");font-display:swap}
:root{--g:#39FF14;--y:#FFD400;--c:#00E5FF;--bg:#000;--t:#e8ffe0}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--t);font:22px/1.35 VT323,ui-monospace,monospace;background:var(--bg);
 background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
h1,h2,.btn,.cd b{font-family:"Press Start 2P",monospace;font-weight:400}
a{color:var(--c)}a:focus-visible,.btn:focus-visible{outline:3px dashed var(--y);outline-offset:4px}
.hero{position:relative;text-align:center;padding:48px 16px 32px;overflow:hidden;border-bottom:4px solid var(--g)}
.hero-bg{position:absolute;inset:0;background:url(assets/hero.webp) center/cover no-repeat;opacity:.35;image-rendering:pixelated}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,#000)}
.hero-inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.bang{font:28px "Press Start 2P",monospace;color:var(--y);animation:blink 1.2s steps(1) infinite;text-shadow:3px 3px 0 #b38f00}
@keyframes blink{50%{opacity:0}}
.avatar{display:block;width:160px;height:160px;margin:10px auto 18px;border:4px solid var(--c);box-shadow:6px 6px 0 var(--g);image-rendering:pixelated}
h1{font-size:clamp(18px,5.4vw,40px);color:var(--g);margin:0 0 14px;text-shadow:3px 3px 0 #0a5c00;word-break:break-word}
h1 span{color:var(--y);text-shadow:3px 3px 0 #7a6500}
.tag{font-size:24px;margin:0 auto;max-width:560px}
main{max-width:860px;margin:0 auto;padding:0 16px}
section{margin:40px 0;text-align:center}
h2{font-size:clamp(12px,3.2vw,18px);color:var(--y);line-height:1.6;margin:0 0 18px}
.cd{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.cd div{min-width:72px;padding:12px 8px;border:3px solid var(--g);background:#071a03;box-shadow:4px 4px 0 var(--c)}
.cd b{display:block;font-size:clamp(16px,5vw,30px);color:var(--g)}
.cd small{display:block;margin-top:6px;color:var(--c);text-transform:uppercase}
.links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:36px 0}
.btn{display:block;text-align:center;text-decoration:none;font-size:12px;padding:16px 6px;color:var(--g);background:#000;border:3px solid var(--g);box-shadow:4px 4px 0 var(--c);transition:transform .08s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--c)}
.btn.primary{grid-column:1/-1;font-size:16px;padding:20px;color:#000;background:var(--g);border-color:var(--y);box-shadow:5px 5px 0 var(--y)}
.video{position:relative;aspect-ratio:16/9;border:4px solid var(--c);box-shadow:6px 6px 0 var(--y);background:#111}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cap{color:var(--c);margin-top:14px}
footer{text-align:center;padding:32px 16px 40px;border-top:4px solid var(--g);margin-top:48px}
footer p{margin:6px 0}.sign{color:var(--y)}.copy{color:#9fb59a;font-size:18px}
@media(min-width:720px){.links{grid-template-columns:repeat(4,1fr)}.btn.primary{grid-column:auto;font-size:13px;padding:16px 10px}.avatar{width:200px;height:200px}.hero{padding:64px 16px 48px}}
@media(prefers-reduced-motion:reduce){.bang{animation:none}}