/* CoreGrafX tribute. One stylesheet for every page. */
:root{
  --ink:#1a1a2e; --cream:#fff8e1; --sky1:#4aa8ff; --sky2:#bfe6ff;
  --pink:#ff5fa2; --yellow:#ffd83a; --blue:#2a4fc9; --green:#49c95a; --red:#e8413c; --orange:#f08a1c;
  --shell:#5a5d60; --shell2:#44474a; --letter:#a9cdf0;
  --px:"Press Start 2P",monospace; --tx:"VT323",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--tx);font-size:23px;line-height:1.25;color:var(--ink);
  background:var(--sky1) linear-gradient(var(--sky1),var(--sky2) 60%,#e9f7ff) fixed;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
h1,h2,h3{font-family:var(--px);line-height:1.5;margin:0 0 .8em;font-weight:400}
h1{font-size:clamp(26px,6vw,58px)} h2{font-size:clamp(16px,2.6vw,26px)} h3{font-size:13px}
p{margin:0 0 .8em}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px;position:relative}

/* sprites */
.spr{--s:4px;--n:1;display:inline-block;width:calc(var(--w,16)*var(--s));height:calc(var(--h,16)*var(--s));
  background-repeat:no-repeat;background-size:calc(var(--n)*100%) 100%;image-rendering:pixelated;
  animation:frames .36s steps(var(--n)) infinite;cursor:pointer;vertical-align:bottom}
.spr.flip{transform:scaleX(-1)}
@keyframes frames{to{background-position-x:calc(-1*var(--w,16)*var(--s)*var(--n))}}
.mv{display:inline-block}
.hop{animation:hop .7s steps(4) infinite}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
.bob{animation:bob 2.4s steps(8) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.spin{animation:spin 1.2s steps(8) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.hit{animation:hit .5s steps(6)}
@keyframes hit{0%,100%{transform:none;filter:none}20%{transform:translateY(-30px) rotate(-20deg);filter:brightness(3)}60%{transform:translateY(-10px) rotate(20deg)}}

/* scrolling sky */
.clouds{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.95;
  background-image:
   radial-gradient(ellipse 70px 20px at 110px 70px,#fff 98%,transparent),
   radial-gradient(ellipse 34px 22px at 96px 56px,#fff 98%,transparent),
   radial-gradient(ellipse 30px 18px at 132px 60px,#fff 98%,transparent),
   radial-gradient(ellipse 90px 22px at 470px 250px,#fff 98%,transparent),
   radial-gradient(ellipse 40px 26px at 450px 232px,#fff 98%,transparent),
   radial-gradient(ellipse 36px 20px at 500px 238px,#fff 98%,transparent);
  background-size:760px 420px;animation:clouds 50s linear infinite}
@keyframes clouds{to{background-position-x:-760px}}
main,header,footer{position:relative;z-index:1}

/* HUD */
.hud{position:sticky;top:0;z-index:20;background:var(--ink);color:#fff;font-family:var(--px);font-size:10px;
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:10px 16px;border-bottom:4px solid var(--yellow)}
.hud a{color:#fff;text-decoration:none;padding:4px 2px}
.hud a:hover,.hud a:focus{color:var(--yellow)}
.hud .logo{color:var(--letter);font-size:12px}
.hud .logo b{color:var(--pink);font-weight:400}
.hud nav{display:flex;flex-wrap:wrap;gap:6px 14px;flex:1}
.hud .sc{color:var(--yellow);white-space:nowrap}
.hud button{font:inherit;color:var(--ink);background:var(--yellow);border:0;padding:6px 8px;cursor:pointer}

/* panels */
section{padding:44px 0 20px}
.panel{background:var(--cream);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:22px 22px 14px;position:relative}
.panel.blue{background:#dff0ff}.panel.pink{background:#ffe3f0}.panel.dark{background:var(--shell2);color:#fff}
.panel.dark a{color:var(--letter)}
.tag{display:inline-block;font-family:var(--px);font-size:10px;background:var(--pink);color:#fff;padding:6px 8px;margin-bottom:14px;border:3px solid var(--ink)}
.tag.y{background:var(--yellow);color:var(--ink)}.tag.b{background:var(--blue)}.tag.g{background:var(--green);color:var(--ink)}
.pop{opacity:0;transform:translateY(30px)}
.pop.on{opacity:1;transform:none;transition:transform .4s steps(5),opacity .4s steps(5)}
.cols{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:center}
.cols.rev{grid-template-columns:1fr 1.2fr}
@media(max-width:760px){.cols,.cols.rev{grid-template-columns:1fr}}
.big{display:flex;justify-content:center;align-items:flex-end;gap:10px;min-height:150px}

/* hero */
.hero{padding-top:30px;text-align:center}
.hero h1{color:#fff;text-shadow:4px 4px 0 var(--ink),8px 8px 0 var(--pink);letter-spacing:2px;margin-bottom:.4em}
.hero h1 span{display:inline-block;animation:wave 1.2s steps(4) infinite}
@keyframes wave{50%{transform:translateY(-10px)}}
.hero .sub{font-family:var(--px);font-size:12px;color:var(--ink);background:var(--yellow);display:inline-block;padding:8px 10px;border:3px solid var(--ink)}
.console{width:min(520px,86%);margin:10px auto 0;animation:bob 3s steps(10) infinite;filter:drop-shadow(10px 14px 0 rgba(26,26,46,.25))}
.stars i{position:absolute;width:8px;height:8px;background:#fff;animation:tw 1s steps(2) infinite;box-shadow:0 0 0 2px var(--yellow)}
@keyframes tw{50%{transform:scale(.3);opacity:.3}}
.marquee{background:var(--ink);color:var(--yellow);font-family:var(--px);font-size:11px;overflow:hidden;white-space:nowrap;border-block:4px solid var(--pink);padding:10px 0}
.marquee span{display:inline-block;padding-left:100%;animation:mq 26s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}

/* token box */
.token{max-width:640px;margin:26px auto 0;text-align:left}
.ca{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-family:var(--px);font-size:10px;background:#fff;border:3px solid var(--ink);padding:10px;word-break:break-all}
.btn{display:inline-block;font-family:var(--px);font-size:11px;color:#fff;background:var(--pink);border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:12px 14px;text-decoration:none;cursor:pointer}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn.y{background:var(--yellow);color:var(--ink)}.btn.b{background:var(--blue)}
.btn[aria-disabled=true]{background:#b9b9b9;cursor:not-allowed;box-shadow:none}
.why{font-size:19px;margin-top:8px}
.small{font-size:19px;opacity:.85}

/* runner strips */
.strip{position:relative;height:150px;overflow:hidden;margin-top:20px}
.strip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22px;border-top:4px solid var(--ink);
  background:repeating-linear-gradient(90deg,var(--green) 0 24px,#3fb04e 24px 48px);animation:ground 1s linear infinite}
@keyframes ground{to{background-position-x:-48px}}
.strip .mv{position:absolute;bottom:20px;left:0;animation:cross var(--d,14s) linear infinite;animation-delay:var(--dl,0s)}
.strip .mv.rtl{animation-name:crossr}
.strip .mv.high{bottom:60px}
@keyframes cross{from{transform:translateX(-260px)}to{transform:translateX(100vw)}}
@keyframes crossr{from{transform:translateX(100vw)}to{transform:translateX(-260px)}}

/* stats, timeline */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:14px 0}
.stat{background:#fff;border:3px solid var(--ink);padding:10px;text-align:center}
.stat b{display:block;font-family:var(--px);font-size:12px;color:var(--blue);margin-bottom:6px;font-weight:400}
.stat span{font-size:20px}
.tl{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.tl li{display:grid;grid-template-columns:150px 1fr;gap:14px;background:#fff;border:3px solid var(--ink);padding:10px 12px}
.tl li.star{background:#fff3b0}
.tl time{font-family:var(--px);font-size:10px;color:var(--pink);padding-top:5px}
@media(max-width:600px){.tl li{grid-template-columns:1fr}}

/* HuCards */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}
.filters button{font-family:var(--px);font-size:10px;background:#fff;border:3px solid var(--ink);padding:8px;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--yellow)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.card{--h:210;display:block;text-decoration:none;color:var(--ink);background:#fff;border:4px solid var(--ink);border-radius:8px;
  aspect-ratio:54/86;padding:8px;position:relative;box-shadow:5px 5px 0 var(--ink);overflow:hidden;transition:transform .15s steps(3)}
.card:hover,.card:focus{transform:translateY(-12px) rotate(-3deg)}
.card .art{height:46%;background:hsl(var(--h) 85% 60%);border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 6px,transparent 6px 12px)}
.card .art b{font-family:var(--px);font-size:9px;color:#fff;text-shadow:2px 2px 0 var(--ink);font-weight:400}
.card h3{font-size:9px;margin:8px 0 4px;line-height:1.5}
.card .jp{font-size:16px;line-height:1.1;display:block}
.card .yr{position:absolute;right:8px;bottom:26px;font-family:var(--px);font-size:9px;color:var(--pink)}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:repeating-linear-gradient(90deg,#c9a227 0 6px,var(--ink) 6px 8px);border-top:3px solid var(--ink)}
.card.cd{border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:conic-gradient(from 0deg,#fff,#cfe8ff,#ffd6ec,#fff7c2,#fff);padding:18px}
.card.cd::after{display:none}.card.cd .art{display:none}.card.cd .yr{position:static;margin-top:4px}
.card.cd:hover{transform:rotate(25deg)}
.card.hide{display:none}

/* photos */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.photo{background:#fff;border:4px solid var(--ink);padding:8px 8px 6px;box-shadow:5px 5px 0 var(--ink);margin:0;transform:rotate(-1.5deg)}
.photo:nth-child(even){transform:rotate(1.5deg)}
.photo:hover{transform:rotate(0) scale(1.04)}
.photo img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff}
.photo figcaption{font-size:18px;line-height:1.1;padding-top:6px}
.photo small{display:block;font-size:15px;opacity:.7}

/* shop */
.shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.shop a{display:block;background:#fff;border:3px solid var(--ink);padding:12px;text-decoration:none;color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.shop a:hover{background:var(--yellow)}
.shop b{font-family:var(--px);font-size:10px;display:block;margin-bottom:6px;font-weight:400;color:var(--blue)}

/* video */
.tv{background:var(--shell);border:4px solid var(--ink);border-radius:14px;padding:12px;box-shadow:6px 6px 0 var(--ink);margin:0 0 18px}
.tv .scr{position:relative;aspect-ratio:4/3;background:#000 center/cover;border:4px solid var(--ink);border-radius:18px;overflow:hidden;cursor:pointer;display:block;width:100%;padding:0}
.tv .scr::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px);pointer-events:none}
.tv .scr::after{content:"\25B6  PLAY";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--px);font-size:12px;color:var(--ink);background:var(--yellow);padding:10px;border:3px solid var(--ink)}
.tv .scr.live::after,.tv .scr.live::before{display:none}
.tv iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tv figcaption{color:#fff;font-size:18px;padding-top:8px;line-height:1.15}
.tv figcaption b{font-family:var(--px);font-size:9px;color:var(--yellow);font-weight:400;margin-right:6px}
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}

/* game page */
.gamehead{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center}
@media(max-width:640px){.gamehead{grid-template-columns:1fr}.gamehead .card{max-width:180px;margin:auto}}
.gamehead h1{font-size:clamp(20px,4vw,38px);color:#fff;text-shadow:4px 4px 0 var(--ink)}
.gamehead>div>.jp{font-size:34px;color:var(--ink);background:var(--yellow);display:inline-block;padding:0 8px;border:3px solid var(--ink)}
.facts{width:100%;border-collapse:collapse;font-size:21px}
.facts th{font-family:var(--px);font-size:9px;text-align:left;color:var(--letter);padding:8px 10px 8px 0;vertical-align:top;font-weight:400;width:40%}
.facts td{padding:6px 0;border-bottom:2px dashed rgba(255,255,255,.25)}
.trivia{list-style:none;padding:0;margin:0}
.trivia li{padding:6px 0 6px 34px;position:relative}
.trivia li::before{content:"\2605";position:absolute;left:4px;color:var(--pink);animation:blink 1s steps(2) infinite}
.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:26px 0}
.src{font-size:17px;word-break:break-all}
.src li{margin-bottom:2px}

/* footer */
footer{background:var(--ink);color:#fff;margin-top:50px;padding:26px 0 40px;border-top:4px solid var(--yellow);font-size:19px}
footer a{color:var(--letter)}

/* boot screen */
#boot{position:fixed;inset:0;z-index:100;background:#000;color:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:26px;cursor:pointer;padding:16px}
html.booting #boot{display:flex}
html.booting body{overflow:hidden}
#boot h1{color:var(--letter);text-shadow:4px 4px 0 var(--blue);margin:0;font-size:clamp(26px,8vw,70px)}
#boot h1 b{color:var(--pink);font-weight:400}
#boot .push{font-family:var(--px);font-size:14px;color:var(--yellow)}
#boot small{font-family:var(--px);font-size:9px;opacity:.7;line-height:2}
#boot.go{animation:flash .5s steps(5) forwards}
@keyframes flash{0%{background:#fff}40%{background:#000}100%{opacity:0;visibility:hidden}}
#boot::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 2px,transparent 2px 4px);pointer-events:none}

/* page wipe */
#wipe{position:fixed;inset:0;z-index:90;pointer-events:none;display:grid;grid-template-rows:repeat(8,1fr)}
#wipe span{background:var(--ink);transform:scaleX(0);transform-origin:left;border-bottom:2px solid var(--pink)}
#wipe span:nth-child(even){transform-origin:right;background:var(--blue)}
#wipe.out span{transform:scaleX(1);transition:transform .42s steps(7)}
html.arriving #wipe span{transform:scaleX(1)}
html.arriving #wipe.in span{transform:scaleX(0);transition:transform .42s steps(7)}
#wipe .mv{position:fixed;top:40vh;left:0;z-index:91;transform:translateX(-300px)}
#wipe.out .mv,html.arriving #wipe.in .mv{animation:cross .6s linear}
.plus{position:fixed;z-index:80;font-family:var(--px);font-size:12px;color:var(--yellow);text-shadow:2px 2px 0 var(--ink);pointer-events:none;animation:plus .8s steps(8) forwards}
@keyframes plus{to{transform:translateY(-60px);opacity:0}}

/* mini-game */
.cab{max-width:820px;margin:0 auto;background:var(--shell);border:4px solid var(--ink);border-radius:16px;padding:16px;box-shadow:8px 8px 0 var(--ink)}
#game{width:100%;image-rendering:pixelated;background:#000;border:4px solid var(--ink);border-radius:14px;display:block;touch-action:none}
.pad{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px;flex-wrap:wrap}
.pad button{font-family:var(--px);font-size:12px;border:4px solid var(--ink);background:var(--letter);color:var(--ink);border-radius:50%;width:74px;height:74px;cursor:pointer;touch-action:manipulation}
.pad button.run{border-radius:20px;width:auto;height:auto;padding:10px 16px;background:var(--yellow)}
.pad button:active{transform:translateY(3px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pop{opacity:1;transform:none}
  .strip .mv{position:static;margin:0 20px}
}
html.calm *,html.calm *::before,html.calm *::after{animation:none!important;transition:none!important}
html.calm .pop{opacity:1;transform:none}
html.calm .strip .mv{position:static;margin:0 20px}

/* arcade and pairs */
.arcade{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.arcade a{display:block;text-decoration:none;color:#fff;background:var(--shell);border:4px solid var(--ink);border-radius:14px;padding:16px;box-shadow:6px 6px 0 var(--ink);text-align:center}
.arcade a:hover{transform:translateY(-8px)}
.arcade b{display:block;font-family:var(--px);font-size:13px;color:var(--yellow);font-weight:400;margin:10px 0}
.arcade .scrn{background:#10103a;border:4px solid var(--ink);border-radius:12px;height:130px;display:flex;align-items:center;justify-content:center;gap:8px}
#pairs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:560px;margin:14px auto}
.pc{aspect-ratio:3/4;border:4px solid var(--ink);border-radius:8px;padding:0;cursor:pointer;position:relative;background:var(--blue);overflow:hidden}
.pc .back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--px);font-size:8px;color:var(--yellow);
  background:repeating-linear-gradient(45deg,var(--blue) 0 8px,#3a63e0 8px 16px)}
.pc .face{position:absolute;inset:0;background:#fff center/cover;display:none}
.pc.up .face{display:block}.pc.up .back{display:none}
.pc.ok{outline:4px solid var(--yellow);animation:hop .5s steps(4) 2}
.card .art.img{background-size:cover;background-position:center top;height:56%}
.card .art.img b{display:none}
.card.cd.has{background-size:cover;background-position:center}
.card.cd.has h3,.card.cd.has .jp,.card.cd.has .yr{background:rgba(255,255,255,.92);padding:2px 5px}
.cover{border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);background:#fff;max-height:340px;width:auto;margin:0 auto 10px}

.roots{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px}
.roots a{display:grid;grid-template-columns:84px 1fr;gap:12px;background:#fff;border:3px solid var(--ink);padding:10px;text-decoration:none;color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.roots a:hover{background:#fff3b0;transform:translate(-2px,-2px)}
.roots img{width:84px;height:110px;object-fit:cover;border:3px solid var(--ink)}
.roots b{font-family:var(--px);font-size:10px;display:block;margin-bottom:6px;font-weight:400;color:var(--pink);line-height:1.5}
.roots span{font-size:20px;line-height:1.15;display:block}
.parade{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:14px;margin:18px 0 6px}

/* then and now */
.famous{font-size:clamp(20px,4.4vw,40px);color:var(--pink);text-shadow:3px 3px 0 var(--ink);margin:.2em 0 .3em}
.linkline{font-family:var(--px);font-size:11px;line-height:1.8;background:var(--yellow);border:3px solid var(--ink);padding:8px 10px;display:inline-block}
.vs{display:grid;grid-template-columns:1fr 60px 1fr;gap:14px;align-items:start;margin:14px 0}
.vs .side{background:#fff;border:3px solid var(--ink);padding:12px;text-align:center}
.vs .side p{text-align:left}
.vs .side h3{margin:10px 0 6px}
.vs .side img,.vs .nocover{height:230px;width:auto;max-width:100%;margin:8px auto;border:3px solid var(--ink);object-fit:contain;background:#fff}
.vs .nocover{display:flex;align-items:center;justify-content:center;width:170px;background:var(--blue);color:#fff;font-family:var(--px);font-size:10px;line-height:1.8;padding:8px}
.vs .arrow{font-family:var(--px);font-size:34px;color:var(--pink);text-shadow:3px 3px 0 var(--ink);align-self:center;text-align:center;animation:wave 1s steps(4) infinite}
@media(max-width:700px){.vs{grid-template-columns:1fr}.vs .arrow{transform:rotate(90deg)}}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.btn.x{background:var(--ink);color:#fff}
.sharecard{max-width:600px;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);margin:10px 0}

/* history pictures */
.tl li.has{grid-template-columns:150px 170px 1fr;align-items:center}
.tl li img{width:170px;height:120px;object-fit:contain;background:#fff;border:3px solid var(--ink)}
@media(max-width:700px){.tl li.has{grid-template-columns:1fr}.tl li img{margin:auto}}
.eras{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:18px 0}
.eras figure{margin:0;background:#fff;border:3px solid var(--ink);padding:8px;text-align:center;box-shadow:4px 4px 0 var(--ink)}
.eras img{height:130px;width:100%;object-fit:contain}
.eras b{font-family:var(--px);font-size:10px;color:var(--pink);font-weight:400;display:block;margin:6px 0 2px}
.eras figcaption{font-size:18px;line-height:1.1}
/* the cast */
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.who{background:#fff;border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:10px;text-align:center;display:flex;flex-direction:column;gap:6px}
.who.hide{display:none}
.who .pic{height:120px;display:flex;align-items:flex-end;justify-content:center;background:repeating-linear-gradient(0deg,#dff0ff 0 6px,#cfe8ff 6px 12px);border:3px solid var(--ink)}
.who h3{font-size:10px;margin:6px 0 0;line-height:1.5}
.who .from{font-size:18px;line-height:1.1}
.who .note{font-size:17px;line-height:1.1;opacity:.85}
.who a.btn{font-size:8px;padding:7px 6px;box-shadow:3px 3px 0 var(--ink);margin-top:auto}