/* Design system and home page. Layout: pixel-grid ground under a sticky HUD header; the hero splits copy and a pixel portal; bands sit in a 1232px column; the boss battle arena is the one loud game screen, echoed by the dark footer. Page-specific styles live in app.css. */
:root{
  --ground:#EEF0F8; --grid:#E2E5F2; --panel:#FFFFFF; --panel-2:#F3F4FA; --header:#F8F9FD;
  --ink:#18172E; --muted:#55577A; --line:#18172E; --line-soft:#C8CBDF; --shadow:#18172E;
  --gold:#FFBE1A; --gold-ink:#18172E; --bevel:rgba(24,23,46,.16);
  --ml:#3157F5; --ml-soft:#E2E8FF; --cy:#D63B1F; --cy-soft:#FCE6E0; --bio:#0B8148; --bio-soft:#DCF3E7;
  --ok:#0B8148; --ok-soft:#DCF3E7; --bad:#C92A2A; --bad-soft:#FBE2E2; --focus:#3157F5;
  --void:#1E1C45; --void-2:#3A3578;
  --lock:#C4C7DA; --lock-hi:#D9DBE8; --lock-d:#9EA2BD;
  /* game-screen colors, shared by both themes on purpose */
  --stage:#191B33; --stage-2:#24284A; --stage-3:#353A6B; --stage-ink:#EEF0FF; --stage-muted:#AEB2D6; --scan:rgba(4,5,12,.28);
  --sprite-ink:#15142B; --sprite-white:#FFFFFF; --metal:#A3A9CC; --screen:#0E1230; --screen-dim:#5466B8; --red-light:#FF4D5E;
  --heart:#FF4D6D; --heart-hi:#FFB3C1; --heart-empty:#464A73;
  --spr-ml:#4169FF; --spr-ml-hi:#A6B9FF; --spr-ml-lo:#2443C2;
  --spr-cy:#F2552F; --spr-cy-hi:#FFAE95; --spr-cy-lo:#A8321A;
  --spr-bio:#2DBE6C; --spr-bio-hi:#96F1BB; --spr-bio-lo:#178049;
  --spr-gold:#FFC21F; --spr-gold-hi:#FFE48C; --spr-gold-lo:#C98E00;
  --f-display:"Jersey 10","Silkscreen",ui-monospace,monospace;
  --f-ui:"Silkscreen",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --f-body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --t-hero:clamp(3.4rem,2.2rem + 4.8vw,6.75rem);
  --t-h2:clamp(2.75rem,2rem + 2.8vw,4.5rem);
  --t-lead:1.25rem; --t-body:1.0625rem; --t-small:.9375rem; --t-label:.6875rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#10111B; --grid:#181A29; --panel:#1A1C2C; --panel-2:#222538; --header:#141523;
    --ink:#EEF0FF; --muted:#A6A9C9; --line:#5C6194; --line-soft:#363A5C; --shadow:#04050A;
    --gold:#FFC83D; --gold-ink:#18172E; --bevel:rgba(24,23,46,.2);
    --ml:#7D96FF; --ml-soft:#212A52; --cy:#FF7C61; --cy-soft:#3B2420; --bio:#3DD68B; --bio-soft:#16352A;
    --ok:#3DD68B; --ok-soft:#16352A; --bad:#FF7070; --bad-soft:#3D1F25; --focus:#7D96FF;
    --void:#07070F; --void-2:#211E4C;
    --lock:#454A6E; --lock-hi:#555B84; --lock-d:#33375A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#10111B; --grid:#181A29; --panel:#1A1C2C; --panel-2:#222538; --header:#141523;
  --ink:#EEF0FF; --muted:#A6A9C9; --line:#5C6194; --line-soft:#363A5C; --shadow:#04050A;
  --gold:#FFC83D; --gold-ink:#18172E; --bevel:rgba(24,23,46,.2);
  --ml:#7D96FF; --ml-soft:#212A52; --cy:#FF7C61; --cy-soft:#3B2420; --bio:#3DD68B; --bio-soft:#16352A;
  --ok:#3DD68B; --ok-soft:#16352A; --bad:#FF7070; --bad-soft:#3D1F25; --focus:#7D96FF;
  --void:#07070F; --void-2:#211E4C;
  --lock:#454A6E; --lock-hi:#555B84; --lock-d:#33375A;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:96px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background-color:var(--ground);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
  color:var(--ink);font-family:var(--f-body);font-size:var(--t-body);line-height:1.6;overflow-x:clip;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--header)}
img,svg{max-width:100%}
a{color:inherit}
p{margin:0}
:focus-visible{outline:3px dashed var(--focus);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:90;background:var(--gold);color:var(--gold-ink);padding:10px 14px;font-family:var(--f-ui);font-size:.75rem;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
.wrap{width:100%;max-width:1232px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}

/* pixel border: four hard edges leave the corners notched */
.pbox,.btn,.tag,.step-n,.icon,.hud,.icon-btn,.toast,.boss-card,.player-card,.stat-row{--pb:0 -3px 0 0 var(--line),0 3px 0 0 var(--line),-3px 0 0 0 var(--line),3px 0 0 0 var(--line)}
.pbox{background:var(--panel);margin:3px;box-shadow:var(--pb),4px 8px 0 0 var(--pshadow,var(--shadow)),8px 4px 0 0 var(--pshadow,var(--shadow))}

/* type */
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:.92;letter-spacing:.01em;margin:0;text-wrap:balance}
.eyebrow,.label{font-family:var(--f-ui);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:9px;height:9px;flex:none;background:var(--gold);box-shadow:0 0 0 2px var(--line)}
code{font-family:var(--f-mono);font-size:.9em;background:var(--panel-2);padding:1px 5px;box-shadow:inset 0 0 0 1px var(--line-soft);overflow-wrap:anywhere}

/* buttons */
.btn{
  --bg:var(--gold);--fg:var(--gold-ink);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-ui);font-size:.8125rem;line-height:1.25;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;text-align:center;
  color:var(--fg);background:var(--bg);border:0;padding:14px 20px 12px;margin:3px 3px 7px;cursor:pointer;
  box-shadow:var(--pb),inset 0 -4px 0 0 var(--bevel),0 7px 0 0 var(--shadow);
  transition:transform 90ms steps(2),box-shadow 90ms steps(2);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--pb),inset 0 -4px 0 0 var(--bevel),0 9px 0 0 var(--shadow)}
.btn:active{transform:translateY(3px);box-shadow:var(--pb),inset 0 -4px 0 0 var(--bevel),0 4px 0 0 var(--shadow)}
.btn-ghost{--bg:var(--panel);--fg:var(--ink)}
.btn-sm{font-size:.6875rem;padding:11px 14px 9px}
.link-btn{appearance:none;background:none;border:0;padding:0 0 3px;cursor:pointer;font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);border-bottom:3px solid var(--tc,var(--gold));text-decoration:none}
.link-btn:hover{color:var(--tc,var(--ink));border-bottom-style:dotted}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--header);border-bottom:3px solid var(--line)}
.top-in{display:flex;align-items:center;gap:14px;min-height:68px;padding-block:9px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:var(--f-display);font-size:2.125rem;line-height:1;white-space:nowrap}
.brand b{font-weight:400;background:var(--gold);color:var(--gold-ink);padding:0 5px 0 4px;margin-left:1px}
.logo{width:27px;height:27px;flex:none;display:block}
.logo .o{fill:var(--logo-o,var(--ink))}
.logo .f{fill:var(--gold)}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a:not(.btn){font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:10px 10px 8px}
.nav a:not(.btn):hover{background:var(--panel-2);box-shadow:inset 0 -3px 0 0 var(--gold)}
.nav .nav-cta{display:none}
.hud{display:inline-flex;align-items:center;gap:10px;padding:8px 12px 7px;margin:3px;text-decoration:none;color:var(--ink);background:var(--panel);font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase;box-shadow:var(--pb);white-space:nowrap}
.hud b{font-weight:700}
.hud .bar{width:72px}
.hud.pulse{animation:hudpulse .6s steps(3)}
@keyframes hudpulse{40%{background:var(--gold);color:var(--gold-ink)}}
.icon-btn{appearance:none;border:0;background:var(--panel);color:var(--ink);min-width:38px;height:38px;padding:0 10px;display:inline-grid;place-items:center;cursor:pointer;margin:3px;box-shadow:var(--pb);font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.05em;text-transform:uppercase}
.icon-btn svg{width:18px;height:18px;display:block}
.menu-btn{display:none}
.cta-top{margin-left:6px}
@media (max-width:1180px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--header);border-bottom:3px solid var(--line);padding:6px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px))}
  .nav.open{display:flex}
  .nav a:not(.btn){padding:14px 4px 12px;font-size:.8125rem;border-bottom:2px dotted var(--line-soft)}
  .nav a:not(.btn):hover{box-shadow:none}
  .nav .nav-cta{display:inline-flex;align-self:flex-start;margin-top:18px}
  .menu-btn{display:inline-grid}
  .cta-top{display:none}
  .hud{margin-left:auto}
}
@media (max-width:480px){
  .top-in{gap:6px}
  .brand{font-size:1.75rem;gap:8px}
  .logo{width:22px;height:22px}
  .hud{gap:7px;padding:8px 9px 7px}
  .hud .xp-n{display:none}
  .hud .bar{width:40px}
}

/* bars (XP) */
.bar{position:relative;display:block;height:10px;background:var(--panel-2);box-shadow:0 0 0 2px var(--line);overflow:hidden}
.bar>i{display:block;height:100%;width:0;background:var(--gold);transition:width .5s steps(8)}
.bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),var(--gap,var(--panel)) calc(10% - 2px) 10%)}

/* hero */
.hero{padding-block:clamp(40px,7vw,104px) clamp(36px,5vw,64px)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,72px);align-items:center}
.hero-copy{display:grid;justify-items:start;gap:22px;min-width:0}
.hero h1{font-size:var(--t-hero)}
.hl{background:linear-gradient(var(--gold),var(--gold)) 0 94%/100% .13em no-repeat;padding-bottom:.02em}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--muted);max-width:50ch}
.actions{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center}
.press{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-ui);font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:2px dashed var(--line-soft);padding-bottom:4px}
.press b{color:var(--ink);font-weight:700}
.press:hover{border-bottom-color:var(--ink)}
.hero-art{position:relative;display:grid;place-items:center;min-width:0;padding-block:12px}
.portal-btn{appearance:none;border:0;background:none;padding:0;cursor:pointer;display:block;width:min(100%,460px);aspect-ratio:1;max-width:100%}
.portal-btn canvas{display:block;width:100%;height:100%;image-rendering:crisp-edges;image-rendering:pixelated}
.tag{position:absolute;z-index:1;font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.05em;text-transform:uppercase;padding:9px 11px 7px;margin:3px;background:var(--panel);color:var(--ink);box-shadow:var(--pb),0 6px 0 0 var(--shadow);white-space:nowrap;pointer-events:none}
.tag-xp{left:2%;top:12%;background:var(--gold);color:var(--gold-ink)}
.tag-lv{right:2%;bottom:14%}
@media (prefers-reduced-motion:no-preference){
  .tag{animation:bob 2.4s steps(4) infinite}
  .tag-lv{animation-delay:-1.2s}
}
@keyframes bob{50%{transform:translateY(-6px)}}
@media (max-width:900px){
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .portal-btn{width:min(80%,340px)}
}

/* stats */
.stats{padding-block:0 clamp(16px,3vw,32px)}
.stat-row{margin:3px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--panel);box-shadow:var(--pb),4px 8px 0 0 var(--shadow),8px 4px 0 0 var(--shadow)}
.stat-row>div{padding:18px 22px 20px;display:grid;gap:8px;position:relative;min-width:0}
.stat-row>div+div::before{content:"";position:absolute;left:0;top:16px;bottom:16px;border-left:3px dotted var(--line-soft)}
.stat-row dt{font-family:var(--f-ui);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stat-row dd{margin:0;font-family:var(--f-display);font-size:clamp(2.5rem,1.8rem + 2vw,3.5rem);line-height:.85;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-row>div:nth-child(3)::before{display:none}
  .stat-row>div:nth-child(n+3){border-top:3px dotted var(--line-soft)}
}

/* sections */
.band{padding-block:clamp(56px,7vw,104px)}
.sec-head{display:grid;justify-items:start;gap:16px;max-width:60ch;margin-bottom:clamp(32px,4vw,52px)}
.sec-head h2{font-size:var(--t-h2)}
.sec-head p{color:var(--muted);font-size:1.125rem;line-height:1.55}

[data-track="ml"]{--tc:var(--ml);--tc-soft:var(--ml-soft);--tc-spr:var(--spr-ml)}
[data-track="cy"]{--tc:var(--cy);--tc-soft:var(--cy-soft);--tc-spr:var(--spr-cy)}
[data-track="bio"]{--tc:var(--bio);--tc-soft:var(--bio-soft);--tc-spr:var(--spr-bio)}

/* courses */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.card{--pshadow:var(--tc);display:flex;flex-direction:column;gap:14px;padding:24px 24px 26px;min-width:0;transition:transform 120ms steps(2)}
.card:hover{transform:translate(-2px,-2px)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px}
.icon{display:grid;place-items:center;width:76px;height:76px;margin:3px;background:var(--tc-soft);box-shadow:var(--pb);flex:none}
.icon svg{width:60px;height:60px}
.boss-tag{font-family:var(--f-ui);font-size:.625rem;letter-spacing:.05em;text-transform:uppercase;color:var(--tc);box-shadow:inset 0 0 0 2px currentColor;padding:6px 8px 5px;text-align:right}
.card h3{font-size:2.5rem}
.card p{color:var(--muted)}
.topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 18px}
.topics li{display:flex;gap:10px;align-items:baseline}
.topics li::before{content:"";flex:none;width:8px;height:8px;background:var(--tc);transform:translateY(-2px)}
.card-actions{margin-top:auto;padding-top:10px;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
@media (max-width:980px){.cards{grid-template-columns:minmax(0,1fr)}}

/* how it works */
.loop{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.loop li{display:grid;gap:12px;align-content:start;position:relative;min-width:0}
.step-n{width:58px;height:58px;margin:3px;display:grid;place-items:center;background:var(--panel);box-shadow:var(--pb),0 6px 0 0 var(--shadow);font-family:var(--f-display);font-size:2.5rem;line-height:1}
.loop li:last-child .step-n{background:var(--gold);color:var(--gold-ink)}
.loop li:not(:last-child)::after{content:"";position:absolute;top:31px;left:80px;right:-16px;border-top:3px dashed var(--line)}
.loop h3{font-size:2rem;margin-top:6px}
.loop p{color:var(--muted)}
.loop .bar{margin:6px 2px 2px;height:12px;--gap:var(--ground)}
@media (max-width:900px){
  .loop{grid-template-columns:repeat(2,minmax(0,1fr))}
  .loop li:nth-child(2n)::after{display:none}
}
@media (max-width:560px){
  .loop{grid-template-columns:minmax(0,1fr)}
  .loop li::after{display:none}
}

/* boss battle */
.battle-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:36px;align-items:start}
.arena-col{min-width:0}
.tabs{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px;padding:0 3px;position:relative;z-index:2}
.tab{appearance:none;border:0;cursor:pointer;font-family:var(--f-ui);font-size:.6875rem;letter-spacing:.05em;text-transform:uppercase;padding:12px 14px 10px;margin:3px 3px 0;color:var(--muted);background:var(--panel-2);box-shadow:0 -3px 0 0 var(--line-soft),-3px 0 0 0 var(--line-soft),3px 0 0 0 var(--line-soft);display:inline-flex;align-items:center;gap:8px}
.tab::before{content:"";width:8px;height:8px;background:var(--tc-spr)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--stage);color:var(--stage-ink);box-shadow:0 -3px 0 0 var(--line),-3px 0 0 0 var(--line),3px 0 0 0 var(--line);padding-bottom:13px;margin-bottom:-3px}
.tab .s{display:none}
@media (max-width:640px){.tab .l{display:none}.tab .s{display:inline}}
.arena{--pshadow:var(--tc);overflow:hidden}
.stage{position:relative;background:var(--stage);color:var(--stage-ink);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"card sprite" ". sprite" "player sprite";grid-template-rows:auto 1fr auto;gap:12px 24px;padding:22px 28px 20px;min-height:300px;overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:repeating-linear-gradient(90deg,var(--stage-2) 0 24px,var(--stage) 24px 48px);box-shadow:inset 0 3px 0 0 var(--stage-3)}
.boss-card,.player-card{--line:var(--stage-3);position:relative;z-index:2;background:var(--stage-2);box-shadow:var(--pb);margin:3px;padding:12px 14px}
.boss-card{grid-area:card;justify-self:start;align-self:start;display:grid;gap:4px;min-width:min(250px,100%)}
.boss-name{font-family:var(--f-ui);font-size:.875rem;letter-spacing:.05em;text-transform:uppercase}
.boss-sub{font-size:.875rem;color:var(--stage-muted)}
.hp{display:flex;align-items:center;gap:10px;margin-top:6px;font-family:var(--f-ui);font-size:.6875rem}
.hp-bar{display:flex;gap:3px;padding:3px;background:var(--stage);box-shadow:0 0 0 2px var(--stage-3)}
.hp-bar i{display:block;width:30px;height:12px;background:var(--tc-spr);transition:background .3s steps(3)}
.hp-bar i.lost{background:var(--stage-3)}
.player-card{grid-area:player;justify-self:start;align-self:end;display:flex;align-items:center;gap:12px;font-family:var(--f-ui);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.hearts{display:flex;gap:6px}
.hearts svg{width:27px;height:24px}
.boss-sprite{grid-area:sprite;align-self:end;justify-self:center;position:relative;z-index:1;margin-bottom:8px}
.boss-sprite::before{content:"";position:absolute;left:8%;right:8%;bottom:-8px;height:16px;z-index:-1;background:var(--stage-3);clip-path:polygon(12px 0,calc(100% - 12px) 0,calc(100% - 12px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 12px) calc(100% - 4px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 4px),0 calc(100% - 4px),0 4px,12px 4px)}
.boss-sprite svg{width:200px;height:160px}
.boss-sprite.hit svg{animation:hit .45s steps(6)}
.boss-sprite.down svg{animation:ko .9s steps(9) forwards}
.stage-flash{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--bad);opacity:0}
.stage.hurt .stage-flash{animation:hurt .5s steps(4)}
.stage.hurt{animation:shake .4s steps(5)}
@keyframes hit{0%,100%{transform:none;filter:none}20%{transform:translateX(-10px);filter:brightness(2.4)}40%{transform:translateX(10px)}60%{transform:translateX(-6px);filter:brightness(2.4)}80%{transform:translateX(4px)}}
@keyframes ko{0%{transform:none;opacity:1}30%{opacity:.2}45%{opacity:1}60%{opacity:.2}100%{transform:translateY(18px);opacity:.18;filter:grayscale(1)}}
@keyframes hurt{0%,100%{opacity:0}25%,75%{opacity:.3}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){
  .boss-sprite.hit svg{animation:flash .45s steps(3)}
  .stage.hurt{animation:none}
  .boss-sprite.down svg{animation:none;opacity:.25;filter:grayscale(1)}
}
@keyframes flash{50%{filter:brightness(2.4)}}
.float{position:absolute;z-index:4;right:16%;top:22%;font-family:var(--f-display);font-size:2.5rem;line-height:1;color:var(--spr-gold);text-shadow:3px 3px 0 var(--sprite-ink);pointer-events:none;animation:rise 1s steps(10) forwards}
@keyframes rise{to{transform:translateY(-56px);opacity:0}}
@media (prefers-reduced-motion:reduce){.float{animation:none}}
@media (max-width:560px){
  .stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"card" "sprite" "player";grid-template-rows:auto auto auto;padding:18px 16px 16px;min-height:0}
  .boss-sprite svg{width:160px;height:128px}
  .float{right:10%;top:34%}
}

.dialog{padding:22px 24px 26px;display:grid;gap:16px;border-top:3px solid var(--line);min-width:0}
.round{font-family:var(--f-ui);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--tc)}
.question{font-size:1.1875rem;font-weight:700;line-height:1.45;max-width:62ch}
.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt{appearance:none;border:0;font:inherit;text-align:left;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;min-width:0;color:var(--ink);background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--line-soft);line-height:1.4}
.opt .key{display:grid;place-items:center;width:28px;height:28px;font-family:var(--f-ui);font-size:.75rem;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line)}
.opt .txt{min-width:0;overflow-wrap:anywhere}
.opt .note{font-family:var(--f-ui);font-size:.625rem;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.opt:not(:disabled):hover,.opt:not(:disabled):focus-visible{background:var(--tc-soft);box-shadow:inset 0 0 0 3px var(--tc)}
.opt:not(:disabled):hover .key{background:var(--tc);color:var(--panel);box-shadow:none}
.opt:disabled{cursor:default}
.opt.right{background:var(--ok-soft);box-shadow:inset 0 0 0 3px var(--ok)}
.opt.right .note,.verdict.ok{color:var(--ok)}
.opt.wrong{background:var(--bad-soft);box-shadow:inset 0 0 0 3px var(--bad)}
.opt.wrong .note,.verdict.bad{color:var(--bad)}
.opt:disabled:not(.right):not(.wrong){opacity:.6}
.feedback{display:grid;gap:6px;max-width:66ch}
.feedback:empty{display:none}
.verdict{font-family:var(--f-ui);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase}
.feedback p:not(.verdict){color:var(--muted)}
.dialog-actions{display:flex}
.result{grid-column:1/-1;display:grid;gap:14px;justify-items:start}
.result p{color:var(--muted);max-width:60ch}
.result-actions{display:flex;flex-wrap:wrap;gap:12px 16px}
@media (max-width:640px){.options{grid-template-columns:minmax(0,1fr)}}

.inventory{padding:22px 22px 24px;display:grid;gap:14px;min-width:0}
.inventory h3{font-size:2rem}
.inv-level{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.inv-lv{font-family:var(--f-display);font-size:3.25rem;line-height:.85}
.inv-xp{font-family:var(--f-ui);font-size:var(--t-label);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.inventory .bar{height:14px;margin:2px}
.inv-next{font-size:var(--t-small);color:var(--muted)}
.inv-badges-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;padding-top:14px;border-top:3px dotted var(--line-soft)}
.badges{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.badge{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center}
.badge svg{width:48px;height:57px}
.badge b{display:block;font-size:.9375rem;line-height:1.3}
.badge small{display:block;font-size:.8125rem;color:var(--muted)}
.badge.got small{color:var(--ok);font-family:var(--f-ui);font-size:.625rem;letter-spacing:.05em;text-transform:uppercase}
.inv-note{font-size:.8125rem;color:var(--muted)}
.inventory .link-btn{justify-self:start}
@media (max-width:1060px){
  .battle-grid{grid-template-columns:minmax(0,1fr)}
  .badges{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}

/* story */
.story{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,88px);align-items:start}
.story-copy{display:grid;justify-items:start;gap:18px}
.story-copy h2{font-size:var(--t-h2)}
.story-copy p{max-width:60ch}
.story-copy .credit{color:var(--muted);font-size:var(--t-small)}
.quotes{display:grid;gap:28px}
.quote{margin:3px;padding:24px 24px 20px;display:grid;gap:14px}
.quote blockquote{margin:0}
.quote blockquote p{font-size:1.1875rem;line-height:1.5}
.quote figcaption{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.quote figcaption span{font-family:var(--f-ui);font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.press-card{display:grid;gap:8px;padding:18px 20px;margin:3px;color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 3px var(--line-soft)}
.press-card:hover{box-shadow:inset 0 0 0 3px var(--line)}
.press-card b{font-size:1.0625rem;line-height:1.4}
.press-card span:last-child{font-size:var(--t-small);color:var(--muted)}
@media (max-width:900px){.story{grid-template-columns:minmax(0,1fr)}}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start}
.faq .sec-head{margin-bottom:0}
.faq-list details{border-bottom:3px dotted var(--line-soft)}
.faq-list details:first-child{border-top:3px dotted var(--line-soft)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:700;font-size:1.125rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;font-family:var(--f-ui);font-size:1rem;font-weight:400;box-shadow:inset 0 0 0 2px var(--line)}
.faq-list details[open] summary::after{content:"-";background:var(--gold);color:var(--gold-ink)}
.faq-list details p{color:var(--muted);max-width:60ch;padding:0 0 20px}
@media (max-width:900px){.faq{grid-template-columns:minmax(0,1fr)}}

/* closing band + footer: the game screen again */
.end{position:relative;margin-top:clamp(40px,6vw,88px);background:var(--stage);color:var(--stage-ink)}
.end::before{content:"";position:absolute;left:0;right:0;top:-15px;height:15px;background:repeating-linear-gradient(90deg,var(--stage) 0 30px,transparent 30px 60px)}
.end .btn{--line:#0B0C18;--shadow:#05060C}
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;padding-block:clamp(56px,7vw,100px) clamp(48px,6vw,80px)}
.cta-copy{display:grid;justify-items:start;gap:18px}
.cta h2{font-size:var(--t-h2);max-width:16ch}
.cta p{color:var(--stage-muted);font-size:1.125rem;max-width:46ch}
.lineup{display:flex;align-items:flex-end;gap:18px}
.lineup svg{width:120px;height:96px}
.lineup span{position:relative}
.lineup span::after{content:"";position:absolute;left:10%;right:10%;bottom:-8px;height:6px;background:var(--stage-3)}
@media (max-width:900px){.cta{grid-template-columns:minmax(0,1fr)}.lineup svg{width:80px;height:64px}}
.foot{--logo-o:var(--stage-ink);border-top:3px dotted var(--stage-3)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:32px;padding-block:44px 32px}
.foot .brand{color:var(--stage-ink)}
.foot p,.foot .label{color:var(--stage-muted)}
.foot ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.foot a:not(.brand){color:var(--stage-ink);text-decoration:none;border-bottom:2px solid transparent}
.foot a:not(.brand):hover{border-bottom-color:var(--spr-gold)}
.foot-tag{margin-top:12px;max-width:34ch}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:20px 36px;border-top:3px dotted var(--stage-3);font-size:var(--t-small);color:var(--stage-muted)}
.secret-hint{font-family:var(--f-ui);font-size:var(--t-label);letter-spacing:.05em;text-transform:uppercase}
@media (max-width:720px){.foot-in{grid-template-columns:minmax(0,1fr)}}

/* sprites: rect classes map to swappable palette slots */
.px-art{display:block;--k:var(--sprite-ink);--w:var(--sprite-white);--i:var(--ink);--m:var(--metal);--s:var(--screen);--q:var(--screen-dim);--r:var(--red-light);--g:var(--spr-gold);--p:var(--spr-ml);--x:var(--spr-bio-hi);--b:var(--spr-ml);--l:var(--spr-ml-hi);--d:var(--spr-ml-lo)}
.px-art .k{fill:var(--k)}.px-art .w{fill:var(--w)}.px-art .i{fill:var(--i)}.px-art .m{fill:var(--m)}.px-art .s{fill:var(--s)}.px-art .q{fill:var(--q)}.px-art .r{fill:var(--r)}.px-art .g{fill:var(--g)}.px-art .p{fill:var(--p)}.px-art .x{fill:var(--x)}.px-art .b{fill:var(--b)}.px-art .l{fill:var(--l)}.px-art .d{fill:var(--d)}
.t-cy{--b:var(--spr-cy);--l:var(--spr-cy-hi);--d:var(--spr-cy-lo)}
.t-bio{--b:var(--spr-bio);--l:var(--spr-bio-hi);--d:var(--spr-bio-lo)}
.t-gold{--b:var(--spr-gold);--l:var(--spr-gold-hi);--d:var(--spr-gold-lo);--g:var(--spr-cy)}
.t-heart{--b:var(--heart);--l:var(--heart-hi)}
.px-art.empty{--b:var(--heart-empty);--l:var(--heart-empty)}
.px-art.locked{--b:var(--lock);--l:var(--lock-hi);--d:var(--lock-d);--g:var(--lock-d);--w:var(--lock-hi);--k:var(--lock-d)}

/* toast + effects */
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 86px);z-index:70;transform:translateX(-50%);--line:var(--sprite-ink);display:grid;gap:4px;justify-items:center;text-align:center;max-width:calc(100% - 40px);padding:12px 20px 11px;background:var(--spr-gold);color:var(--sprite-ink);box-shadow:var(--pb),0 7px 0 0 var(--sprite-ink);pointer-events:none}
.toast b{font-family:var(--f-display);font-weight:400;font-size:2.25rem;line-height:.9}
.toast span{font-family:var(--f-ui);font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase}
.toast.show{animation:toast-in .4s steps(4)}
@keyframes toast-in{from{transform:translate(-50%,-24px);opacity:0}}
@media (prefers-reduced-motion:reduce){.toast.show{animation:none}}
.fx{position:fixed;inset:0;z-index:65;pointer-events:none;overflow:hidden}
.fx i{position:absolute;width:7px;height:7px;animation:pop .9s steps(9) forwards}
@keyframes pop{to{transform:translate(var(--dx),var(--dy));opacity:0}}