@font-face{font-family:"Jersey 10";src:url(Jersey10.ttf);font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(BarlowCondensed-SemiBold.ttf);font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(IBMPlexMono-SemiBold.ttf);font-weight:600;font-display:swap}
:root{--midnight:#000b22;--deep:#001741;--royal:#032855;--electric:#0f5fa5;--cyan:#0accdf;--gold:#ffb21a;--orange:#f47a1f;--green:#7fd83d;--white:#f4f7ff;--grey:#8fa6c3;--soft:#c9d6e8}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--midnight)}
body{margin:0;min-height:100vh;color:var(--white);font:600 19px/1.45 "Barlow Condensed",system-ui,sans-serif;background:var(--midnight) radial-gradient(ellipse 90% 420px at 50% 0,rgba(15,95,165,.42),transparent)}
a{color:var(--cyan)}
h1,h2{margin:0;font-family:"Jersey 10",monospace;font-weight:400}
h1{font-size:clamp(46px,9vw,68px);line-height:.95;text-shadow:3px 3px 0 var(--royal)}
h2{font-size:32px;line-height:1;color:var(--gold)}
.eyebrow{margin:0 0 6px;color:var(--cyan);font:600 12px "IBM Plex Mono",monospace;letter-spacing:.2em;text-transform:uppercase}
.lede{margin:8px 0 0;color:var(--soft)}
.muted{margin:8px 0 12px;color:var(--soft)}
.field{margin:18px 0 8px;color:var(--gold)}

.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:10px max(16px,calc(50% - 440px));background:rgba(0,11,34,.92);border-bottom:2px solid var(--electric)}
.brand{margin-right:auto}
.brand img{display:block;height:26px}
.play{padding:7px 16px;border:2px solid var(--gold);background:var(--orange);color:var(--midnight);font:400 22px/1 "Jersey 10",monospace;text-decoration:none;box-shadow:3px 3px 0 rgba(0,0,0,.5)}
.play:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.5)}
.burger{display:grid;gap:4px;width:42px;height:38px;padding:8px 9px;border:2px solid var(--electric);background:var(--deep);cursor:pointer}
.burger span{display:block;height:3px;background:var(--white)}
.menu{position:absolute;top:calc(100% + 6px);right:max(16px,calc(50% - 440px));display:grid;min-width:210px;padding:8px;border:3px solid var(--gold);background:var(--deep);box-shadow:6px 6px 0 rgba(0,0,0,.55)}
.menu a,.menu button{padding:9px 10px;border:0;background:none;color:var(--white);font:600 13px "IBM Plex Mono",monospace;letter-spacing:.04em;text-align:left;text-decoration:none;text-transform:uppercase;cursor:pointer}
.menu a:hover,.menu button:hover,.menu a:focus,.menu button:focus{background:var(--royal);color:var(--gold);outline:0}

main{width:min(880px,calc(100% - 32px));margin:24px auto 64px}
.gate{width:min(460px,100%);margin:28px auto 0;padding:28px;border:3px solid var(--gold);background:var(--deep);box-shadow:8px 8px 0 rgba(0,0,0,.55);text-align:center}
.gate form,.gate #start{margin-top:20px;text-align:left}
.gate form{display:grid;gap:14px}
.gate #start form{margin-top:0}
.or{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--grey);font:600 12px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
.or:before,.or:after{content:"";flex:1;height:2px;background:var(--electric)}

label{display:grid;gap:5px;color:var(--gold)}
input:not([type=checkbox]){width:100%;padding:11px;border:2px solid var(--cyan);border-radius:0;background:var(--midnight);color:var(--white);font:600 17px "IBM Plex Mono",monospace}
input:focus{outline:0;border-color:var(--gold)}
input:disabled{border-color:var(--electric);color:var(--soft)}
input.code{font-size:30px;letter-spacing:.35em;text-align:center}
.tick{display:flex;align-items:flex-start;gap:10px;color:var(--soft)}
.tick input{flex:none;width:18px;height:18px;margin:4px 0 0;accent-color:var(--orange)}

.button{padding:11px 22px;border:2px solid var(--electric);background:var(--royal);color:var(--white);font:400 25px/1 "Jersey 10",monospace;box-shadow:4px 4px 0 rgba(0,0,0,.5);cursor:pointer}
.button.primary{border-color:var(--gold);background:var(--orange);color:var(--midnight)}
.button.danger{border-color:#c0392b;background:transparent;color:#ff8a7a}
.button.wide{width:100%}
.button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.button:disabled{opacity:.55;cursor:default}
.link{justify-self:center;border:0;background:none;color:var(--cyan);font:inherit;text-decoration:underline;cursor:pointer}

.sprite{width:36px;height:36px;background-position:0 0;background-repeat:no-repeat;image-rendering:pixelated}
.runner{margin:0 auto 84px;transform:scale(3);transform-origin:top center;animation:run .6s steps(8) infinite}
@keyframes run{to{background-position:-288px 0}}
.hero{position:relative;display:flex;align-items:center;gap:24px;padding:26px;overflow:hidden;border:3px solid var(--gold);background:linear-gradient(120deg,var(--royal),var(--deep));box-shadow:8px 8px 0 rgba(0,0,0,.55)}
.hero:after{content:"";position:absolute;top:-60px;right:-190px;width:640px;height:360px;background:url(globe.png) center/cover no-repeat;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent);opacity:.75;pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero-sprite{flex:none;width:108px;height:108px;background-size:972px 108px;animation:hero-run .6s steps(8) infinite}
@keyframes hero-run{to{background-position:-864px 0}}
.nudge{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:16px 20px;border:2px dashed var(--cyan);background:rgba(10,204,223,.07)}
.nudge p{margin:4px 0 0;color:var(--soft)}
.nudge .button{flex:none}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.stats.streak{grid-template-columns:repeat(3,1fr);margin-top:10px}
.stat{padding:14px;border:2px solid var(--electric);background:var(--deep);box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.stat b{display:block;margin-top:2px;color:var(--white);font:400 34px/1 "Jersey 10",monospace}
.stat span{display:block;color:var(--grey);font-size:15px}
.stat small{color:var(--cyan);font:600 12px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
.card{margin-top:18px;padding:22px;border:2px solid var(--electric);background:var(--deep);box-shadow:5px 5px 0 rgba(0,0,0,.45)}
.card form{margin-top:12px}
.card .button{margin-top:14px}
.card.danger{border-color:#7a2c24}
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.picks.themes{grid-template-columns:repeat(4,1fr)}
.pick{display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 10px;border:2px solid var(--electric);background:var(--midnight);color:var(--white);font:600 12px "IBM Plex Mono",monospace;letter-spacing:.04em;text-align:left;text-transform:uppercase;cursor:pointer}
.pick[aria-checked=true]{border-color:var(--gold);background:var(--royal)}
.pick .sprite{flex:none}
.passkeys{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.passkeys li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:2px solid var(--electric);background:var(--midnight)}
.passkeys small{display:block;color:var(--grey);font-size:15px}
.passkeys button{border:0;background:none;color:#ff8a7a;font:inherit;text-decoration:underline;cursor:pointer}
#status{position:fixed;left:50%;bottom:18px;z-index:20;max-width:calc(100% - 32px);margin:0;padding:10px 18px;border:2px solid var(--gold);background:var(--midnight);color:var(--green);box-shadow:4px 4px 0 rgba(0,0,0,.6);transform:translateX(-50%)}
#status:empty{display:none}
@media (max-width:640px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .picks{grid-template-columns:repeat(2,1fr)}
  .picks.themes{grid-template-columns:repeat(2,1fr)}
  .hero{gap:12px;padding:18px}
  .hero-sprite{width:72px;height:72px;background-size:648px 72px;animation-name:hero-run-small}
  .nudge{display:block}
  .nudge .button{margin-top:12px}
}
@keyframes hero-run-small{to{background-position:-576px 0}}
@media (prefers-reduced-motion:reduce){.runner,.hero-sprite{animation:none}}