:root{
  --bg:#110d2b;
  --bg-dot:#2a2258;
  --ink:#1b1433;
  --text:#f3ecff;
  --muted:#bfb3e6;
  --cream:#fff5e4;
  --lilac:#b9a3ff;
  --lilac-2:#dcd0ff;
  --shell:#a98cf2;
  --shell-dark:#7f63d6;
  --coral:#ff8f70;
  --coral-2:#e8664a;
  --butter:#ffd36e;
  --butter-2:#e8a93c;
  --aqua:#52e0c4;
  --aqua-2:#2a9c86;
  --plum:#5a2d7a;
  --grass:#4fd1a5;
  --grass-dark:#2b8f76;
  --brick:#4a2f63;
  --brick-dark:#35204a;
  --pixel:"Press Start 2P", ui-monospace, monospace;
  --body:"Pixelify Sans", ui-monospace, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background-color:var(--bg);
  background-image:radial-gradient(var(--bg-dot) 1px, transparent 1.5px);
  background-size:6px 6px;
  color:var(--text);
  font-family:var(--body);
  font-size:18px;
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit}
img{display:block;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* page-load pixel wipe (CSS only, so it runs before any script) */
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  background:var(--ink);transform-origin:bottom;
  animation:wipeOff .45s steps(6) .05s both;
}
@keyframes wipeOff{from{transform:scaleY(1)}to{transform:scaleY(0)}}
.wipe{position:fixed;inset:0;z-index:201;pointer-events:none;display:grid;grid-template-columns:repeat(8,1fr)}
.wipe i{background:var(--ink);transform:scaleY(0);transform-origin:top;animation:wipeOn .32s steps(5) forwards;animation-delay:calc(var(--i) * 25ms)}
.wipe b{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font:400 14px var(--pixel);color:var(--butter);opacity:0;animation:blink .3s steps(1) .25s infinite}
@keyframes wipeOn{to{transform:scaleY(1)}}

.xpbar{position:fixed;top:0;left:0;height:5px;width:100%;z-index:60;background:var(--aqua);transform-origin:left;transform:scaleX(var(--p,0));box-shadow:0 0 8px rgba(82,224,196,.6)}

/* ---------- sprites ---------- */
.spr{
  display:block;
  image-rendering:pixelated;
  width:calc(var(--w,0) * var(--px,4px));
  height:calc(var(--h,0) * var(--px,4px));
}
.abs{position:absolute}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes across{from{transform:translateX(-25vw)}to{transform:translateX(125vw)}}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes wobble{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-10px) rotate(8deg)}}
@keyframes batfly{
  0%{transform:translate(0,0)}25%{transform:translate(70px,-18px)}
  50%{transform:translate(140px,6px)}75%{transform:translate(70px,24px)}100%{transform:translate(0,0)}
}
@keyframes jump{
  0%{transform:translateY(0)}
  45%{transform:translateY(calc(var(--jh,90px) * -1))}
  55%{transform:translateY(calc(var(--jh,90px) * -1))}
  100%{transform:translateY(0)}
}
@keyframes wave{0%,40%,100%{transform:translateY(0)}20%{transform:translateY(-12px)}}
@keyframes pop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--aqua),6px 6px 0 3px var(--ink)}50%{box-shadow:0 0 0 3px var(--butter),6px 6px 0 3px var(--ink),0 0 24px 6px rgba(255,211,110,.35)}}
@keyframes hop{0%,4%,100%{transform:translateY(0)}2%{transform:translateY(-8px)}}
@keyframes collect{0%{transform:translateY(0) scale(1)}60%{transform:translateY(-44px) scale(1.3);opacity:1}100%{transform:translateY(-60px) scale(.6);opacity:0}}
@keyframes rise{to{transform:translateY(-46px);opacity:0}}
@keyframes spark{to{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes shoot{from{transform:rotate(-24deg) translateX(0);opacity:1}to{transform:rotate(-24deg) translateX(-520px);opacity:0}}
@keyframes scan{from{transform:translateY(-100%)}to{transform:translateY(100%)}}
@keyframes piranha{0%,12%{transform:translateY(100%)}30%,70%{transform:translateY(0)}88%,100%{transform:translateY(100%)}}
@keyframes bump{0%,86%,100%{transform:translateY(0)}90%{transform:translateY(-12px)}}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,211,110,.25))}50%{filter:drop-shadow(0 0 16px rgba(255,211,110,.7))}}
@keyframes sway{0%,100%{transform:skewX(0)}50%{transform:skewX(-2deg)}}

.bob{animation:bob 2.4s steps(4) infinite}
.twinkle{animation:twinkle 2s steps(3) infinite}
.idle{animation:idle 1.6s steps(2) infinite}
.sky{position:absolute;left:var(--x,0);animation:across var(--t,70s) linear infinite;pointer-events:none}
.flyer{position:absolute;animation:batfly var(--t,6s) steps(12) infinite}
.jump{animation:jump var(--jd,.8s) cubic-bezier(.3,.7,.4,1) both !important}

.walker{position:absolute;left:0;bottom:52px;z-index:2;cursor:pointer;will-change:transform;touch-action:manipulation}
.walker canvas{transform-origin:bottom center}

.coin{cursor:pointer}
.coin.got{animation:collect .5s steps(6) forwards !important;pointer-events:none}
.plus1{position:absolute;z-index:6;font:400 12px var(--pixel);color:var(--butter);text-shadow:2px 2px 0 var(--ink);pointer-events:none;animation:rise .8s steps(8) forwards}
.spark{position:fixed;z-index:90;width:6px;height:6px;pointer-events:none;animation:spark .5s steps(5) forwards}
.shooting{position:absolute;width:90px;height:3px;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));pointer-events:none;animation:shoot 1.1s linear forwards;z-index:0}

/* ---------- ground + ribbon ---------- */
.ground{
  position:absolute;left:0;right:0;bottom:0;height:52px;
  border-top:4px solid var(--ink);
  background:
    repeating-linear-gradient(90deg,var(--grass-dark) 0 6px,transparent 6px 12px) 0 10px/100% 6px no-repeat,
    linear-gradient(var(--grass) 0 16px,transparent 16px),
    repeating-linear-gradient(90deg,transparent 0 30px,var(--brick-dark) 30px 34px) 0 16px/100% 18px no-repeat,
    repeating-linear-gradient(90deg,var(--brick-dark) 0 4px,transparent 4px 34px) 17px 34px/100% 18px no-repeat,
    linear-gradient(transparent 33px,var(--brick-dark) 33px 35px,transparent 35px),
    var(--brick);
}
.ribbon{
  position:relative;z-index:2;
  background:var(--aqua);
  color:var(--ink);
  border-top:4px solid var(--ink);
  border-bottom:4px solid var(--ink);
  overflow:hidden;white-space:nowrap;
  font-family:var(--pixel);font-size:clamp(14px,2.2vw,22px);
  padding:14px 0 12px;
}
.ribbon.alt{background:var(--coral)}
.ribbon-track{display:inline-flex;animation:marquee 26s linear infinite}
.ribbon-track span{padding:0 28px;display:inline-flex;align-items:center;gap:28px}
.ribbon-track b{color:var(--plum);font-weight:400;display:inline-block;animation:twinkle 1s steps(2) infinite}

/* ---------- hero / title screen ---------- */
.hero{position:relative;min-height:720px;padding:22px 0 0;overflow:hidden}
.hero.sub{min-height:600px}
.hud{
  position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 clamp(16px,4vw,48px);
  font-family:var(--pixel);font-size:11px;
}
.hud-xp{color:var(--coral)}
.hud-xp a{text-decoration:none}
.hud-clouds{display:flex;align-items:flex-end;gap:6px}
.hud-clouds canvas{animation:idle 3s steps(2) infinite}
.hud-player{display:flex;align-items:center;gap:10px;color:var(--coral)}
.hud-player .heart{animation:twinkle 1.2s steps(2) infinite}
.hud-coins{display:inline-flex;align-items:center;gap:6px;color:var(--butter)}
.hud-coins.bump{animation:bump .3s steps(2)}
.hp{width:96px;height:14px;border:3px solid var(--ink);background:var(--cream);box-shadow:0 0 0 2px var(--aqua)}
.hp span{display:block;height:100%;width:74%;background:var(--aqua);animation:hpfill 4s steps(8) infinite alternate}
@keyframes hpfill{from{width:58%}to{width:92%}}

.screen-frame{
  position:relative;z-index:1;
  width:min(920px,calc(100% - 32px));
  margin:34px auto 0;
  min-height:390px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:48px 24px 72px;
  background:#07061a;
  border:4px solid var(--aqua);
  border-radius:28px;
  box-shadow:0 0 0 4px var(--ink),0 0 28px rgba(82,224,196,.35),inset 0 0 40px rgba(82,224,196,.08);
  text-align:center;
  overflow:hidden;
}
.screen-frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(transparent 0 3px,rgba(255,255,255,.025) 3px 4px);
}
.sub .screen-frame{min-height:300px;padding:40px 24px 64px}
.year{
  font-family:var(--pixel);font-size:clamp(22px,4.4vw,46px);
  color:var(--butter);text-shadow:4px 4px 0 var(--coral-2);
}
.title{
  font-family:var(--pixel);font-weight:400;
  font-size:clamp(30px,8vw,84px);line-height:1.1;
  color:var(--coral);
  text-shadow:5px 5px 0 var(--plum),8px 8px 0 var(--ink);
  letter-spacing:.02em;
}
.sub .title{font-size:clamp(26px,6.4vw,64px)}
.tagline{font-size:clamp(16px,2vw,20px);color:var(--muted);max-width:560px}
.wave span{display:inline-block;animation:wave 2.4s steps(3) infinite;animation-delay:calc(var(--i) * 90ms)}
.start{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--pixel);font-size:18px;text-decoration:none;
  color:var(--ink);background:var(--aqua);
  padding:14px 22px 12px;
  border:4px solid var(--ink);
  box-shadow:0 0 0 3px var(--aqua),6px 6px 0 3px var(--ink);
  animation:pulse 1.4s steps(2) infinite;
}
.start::before{content:"▶";font-size:12px;animation:blink 1s steps(1) infinite}
.start:hover,.start:focus-visible{animation:none;background:var(--butter);box-shadow:0 0 0 3px var(--butter),6px 6px 0 3px var(--ink);outline:none}
.start:active{transform:translate(4px,4px);box-shadow:0 0 0 3px var(--aqua),2px 2px 0 3px var(--ink)}
.stage-select{
  font-family:var(--pixel);font-size:10px;color:var(--muted);
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin-top:6px;
}
.stage-select a{color:var(--lilac);text-decoration:none;padding:4px 2px}
.stage-select a[aria-current="page"]{color:var(--aqua)}
.stage-select a[aria-current="page"]::before{content:"★ "}
.stage-select a:hover,.stage-select a:focus-visible{color:var(--butter);outline:none}
.stage-select a:hover::before,.stage-select a:focus-visible::before{content:"▶ "}

.hero .lamp{left:clamp(4px,2.5vw,40px);bottom:52px;--px:5px;animation:glow 2.4s steps(3) infinite}
.hero .tree{right:-10px;bottom:52px;--px:7px;transform-origin:bottom center;animation:sway 3s steps(2) infinite}
.sub .tree{--px:6px}

/* ---------- level headings ---------- */
.lvl-head{font-family:var(--pixel)}
.lvl-head .lvl{font-size:clamp(34px,5.2vw,58px);line-height:1.05;color:var(--coral);text-shadow:4px 4px 0 var(--plum)}
.lvl-head .sub{font-size:clamp(13px,1.5vw,16px);color:var(--butter);margin-top:18px;line-height:1.6}
.lvl-head .name{font-size:clamp(22px,3vw,34px);color:var(--aqua);margin-top:22px;line-height:1.3;text-shadow:3px 3px 0 var(--ink)}

/* ---------- retro windows ---------- */
.win{
  position:relative;z-index:1;
  background:var(--cream);color:var(--ink);
  border:4px solid var(--ink);
  box-shadow:8px 8px 0 rgba(0,0,0,.45);
  transition:box-shadow .1s steps(1);
}
.win:hover{box-shadow:12px 12px 0 rgba(0,0,0,.45)}
.win-bar{
  height:26px;background:var(--lilac);border-bottom:4px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 30px;
}
.win-bar::before{content:"";width:40%;height:6px;background:var(--lilac-2);border:2px solid var(--ink)}
.win-dots{display:flex;gap:4px}
.win-dots i{width:12px;height:12px;border:2px solid var(--ink);background:var(--lilac-2)}
.win-dots i:last-child{background:var(--coral);animation:blink 2s steps(1) infinite}
.win-body{display:flex;min-height:100%}
.win-side{
  flex:0 0 22px;border-right:4px solid var(--ink);
  background:
    linear-gradient(var(--ink),var(--ink)) 50% 8px/10px 10px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 50% calc(100% - 8px)/10px 10px no-repeat,
    linear-gradient(var(--shell),var(--shell)) 50% var(--sp,30%)/10px 40px no-repeat,
    var(--lilac-2);
  animation:scrollthumb 5s steps(6) infinite alternate;
}
.win-body > .win-side:last-child{border-right:0;border-left:4px solid var(--ink)}
@keyframes scrollthumb{from{background-position:50% 8px,50% calc(100% - 8px),50% 25%,0 0}to{background-position:50% 8px,50% calc(100% - 8px),50% 75%,0 0}}
.win-main{padding:16px 18px 20px;flex:1;min-width:0}
.chip{
  display:inline-block;font-family:var(--pixel);font-weight:400;font-size:11px;
  background:var(--butter);color:var(--ink);
  border:3px solid var(--ink);padding:7px 10px 5px;margin-bottom:14px;
}
.win p{font-size:17px;line-height:1.45;margin-bottom:10px}
.win p:last-child{margin-bottom:0}
.win .k{color:var(--coral-2);font-weight:700}
.win ul{list-style:none;font-size:17px;line-height:1.5}
.win li::before{content:"▪ ";color:var(--coral-2)}

.js .reveal{opacity:0}
.js .reveal.on{animation:pop .5s steps(5) both}
.js .reveal.on.float{animation:pop .5s steps(5) both,floaty var(--ft,3.4s) steps(2) .5s infinite}

/* ---------- Level 01 stage ---------- */
.level{position:relative;padding:90px clamp(16px,4vw,48px) 60px;overflow:hidden}
.stage{
  position:relative;max-width:1160px;margin:0 auto;
  display:grid;gap:56px 48px;
  grid-template-columns:1fr minmax(340px,400px) 1fr;
  grid-template-areas:
    "head console hello"
    "weapons training skills";
  align-items:start;
}
.stage .lvl-head{grid-area:head;padding-top:10px}
.stage .console{grid-area:console}
.stage .hello{grid-area:hello;margin-top:-10px}
.stage .weapons{grid-area:weapons}
.stage .training{grid-area:training;margin-top:30px}
.stage .skills{grid-area:skills}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.wires line{stroke:var(--lilac);stroke-width:3;stroke-dasharray:6 7;animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-26}}

/* handheld console */
.console{position:relative;z-index:1;width:100%;max-width:400px;justify-self:center}
.c-top{
  position:relative;background:var(--shell);border:4px solid var(--ink);
  border-radius:24px 24px 8px 8px;padding:24px 18px 20px;
  box-shadow:inset -6px -6px 0 var(--shell-dark),inset 6px 6px 0 #c3adff;
}
.cam{position:absolute;top:7px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--ink);border:2px solid var(--lilac-2)}
.cam::after{content:"";position:absolute;right:-18px;top:2px;width:5px;height:5px;background:var(--aqua);animation:blink 1.2s steps(1) infinite}
.bezel{
  position:relative;background:#2a2244;border:4px solid var(--ink);border-radius:10px;
  padding:16px 40px;display:flex;justify-content:center;
}
.spk{position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;
  background:radial-gradient(circle,var(--lilac) 1.5px,transparent 2px) 0 0/8px 8px}
.spk.l{left:12px}.spk.r{right:12px}
.screen{
  position:relative;width:100%;aspect-ratio:5/4;
  background:#1d5a55;border:4px solid var(--ink);
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
  background-image:linear-gradient(transparent 50%,rgba(0,0,0,.08) 50%);background-size:100% 4px;
}
.screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 0 42%,rgba(255,255,255,.12) 50%,transparent 58%);
  animation:scan 3.2s linear infinite;
}
.photo{width:74%;height:auto;aspect-ratio:1;display:block;position:relative;z-index:1}
.screen .s1{left:10%;top:16%;--px:3px;z-index:2}
.screen .s2{right:9%;top:48%;--px:3px;animation-delay:-1s;z-index:2}
.hinge{height:18px;margin:0 16px;background:var(--shell-dark);border-left:4px solid var(--ink);border-right:4px solid var(--ink);position:relative}
.hinge::after{content:"";position:absolute;left:50%;bottom:-4px;width:18px;height:8px;margin-left:-9px;background:var(--ink)}
.c-bot{
  background:var(--shell);border:4px solid var(--ink);border-radius:8px 8px 30px 30px;
  padding:20px 18px 18px;display:grid;grid-template-columns:64px 1fr 64px;gap:16px;align-items:center;
  box-shadow:inset -6px -6px 0 var(--shell-dark),inset 6px 6px 0 #c3adff;
}
.c-left{display:flex;flex-direction:column;align-items:center;gap:14px}
.stick{width:40px;height:40px;border-radius:50%;background:var(--shell-dark);border:4px solid var(--ink);box-shadow:inset 4px 4px 0 #c3adff;animation:stick 3s steps(1) infinite}
@keyframes stick{0%,100%{transform:none}25%{transform:translate(3px,0)}50%{transform:translate(0,3px)}75%{transform:translate(-3px,0)}}
.dpad{position:relative;width:42px;height:42px}
.dpad::before,.dpad::after{content:"";position:absolute;background:var(--ink)}
.dpad::before{left:14px;top:0;width:14px;height:42px}
.dpad::after{top:14px;left:0;width:42px;height:14px}
.touch{
  aspect-ratio:4/3;background:var(--lilac-2);border:4px solid var(--ink);
  background-image:linear-gradient(90deg,rgba(27,20,51,.12) 2px,transparent 2px),linear-gradient(rgba(27,20,51,.12) 2px,transparent 2px);
  background-size:33.4% 50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--pixel);font-size:8px;line-height:1.8;color:var(--plum);padding:6px;
}
.touch span{animation:blink 1.4s steps(1) infinite}
.abxy{display:grid;grid-template:repeat(3,20px)/repeat(3,20px);justify-content:center}
.abxy i{width:20px;height:20px;border-radius:50%;background:var(--coral);border:3px solid var(--ink);
  font:400 7px/14px var(--pixel);text-align:center;font-style:normal;color:var(--ink);
  animation:press 4s steps(1) infinite}
.abxy i:nth-child(1){grid-area:1/2;animation-delay:-1s}.abxy i:nth-child(2){grid-area:2/1;animation-delay:-2s}
.abxy i:nth-child(3){grid-area:2/3}.abxy i:nth-child(4){grid-area:3/2;animation-delay:-3s}
@keyframes press{0%,90%,100%{transform:none;background:var(--coral)}92%{transform:translateY(2px);background:var(--butter)}}
.c-foot{grid-column:1/-1;display:flex;justify-content:center;gap:14px}
.c-foot i{width:28px;height:8px;background:var(--ink);border-radius:2px}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:12px}
.tile{
  aspect-ratio:1;border:3px solid var(--ink);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--pixel);font-size:10px;color:var(--t,#fff);background:var(--b,#333);
  box-shadow:inset -4px -4px 0 rgba(0,0,0,.25),inset 4px 4px 0 rgba(255,255,255,.25),3px 3px 0 var(--ink);
  position:relative;cursor:default;
  animation:hop 6s steps(1) infinite;animation-delay:calc(var(--i,0) * 350ms);
}
.tile:hover,.tile:focus-visible{animation:none;transform:translateY(-6px) rotate(-5deg);outline:none}
.tile::after{
  content:attr(data-name);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);
  background:var(--ink);color:var(--cream);font:400 14px var(--body);padding:3px 8px;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:5;
}
.tile:hover::after,.tile:focus-visible::after{opacity:1}

/* ---------- platformer scene ---------- */
.scene{position:relative;height:250px;margin-top:40px}
.scene > .spr,.scene > .flyer,.scene > .sky{position:absolute}
.coin{--px:4px}
.piranha{position:absolute;left:calc(50% - 40px);bottom:52px;--px:4px;width:calc(20 * var(--px))}
.piranha .clip{position:absolute;left:0;right:0;bottom:calc(12 * var(--px));height:calc(18 * var(--px));overflow:hidden}
.piranha .clip > div{animation:piranha 5s steps(10) infinite}
.piranha .pipe{position:relative;z-index:1}
.scene .key{left:calc(50% - 20px);bottom:200px;--px:4px;animation:wobble 2s steps(4) infinite}
.scene .flag{right:18%;bottom:52px;--px:4px}
.scene .door{right:3%;bottom:52px;--px:5px}
.scene .bat{--px:4px}

/* ---------- content sections ---------- */
.section{position:relative;padding:90px clamp(16px,4vw,48px) 40px;overflow-x:clip}
.wrap{max-width:1160px;margin:0 auto}
.section .lvl-head{margin-bottom:44px}
.mission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px}
.mission .cover{border:4px solid var(--ink);aspect-ratio:16/9;overflow:hidden;background:var(--lilac-2);margin-bottom:16px}
.mission .cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s steps(5)}
.mission:hover .cover img{transform:scale(1.06)}
.mission h3{font-family:var(--pixel);font-weight:400;font-size:15px;line-height:1.5;margin-bottom:10px;color:var(--plum)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.tags span{font-size:14px;border:2px solid var(--ink);background:var(--lilac-2);padding:1px 8px}
.btn{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;cursor:pointer;
  font-family:var(--pixel);font-size:11px;color:var(--ink);background:var(--coral);
  border:3px solid var(--ink);padding:10px 14px 8px;box-shadow:4px 4px 0 var(--ink);
}
.btn:hover,.btn:focus-visible{background:var(--butter);outline:none;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.alt{background:var(--aqua)}
.more{margin-top:44px;text-align:center}

/* question block */
.qblock{
  width:96px;height:96px;margin:0 auto 18px;cursor:pointer;border:4px solid var(--ink);
  background:
    radial-gradient(circle,var(--ink) 3px,transparent 3.5px) 8px 8px/calc(100% - 16px) calc(100% - 16px),
    var(--butter);
  box-shadow:inset -6px -6px 0 var(--butter-2),inset 6px 6px 0 #fff0bf,4px 4px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
  font:400 40px var(--pixel);color:var(--coral-2);text-shadow:3px 3px 0 var(--ink);
  animation:bump 2.4s steps(2) infinite;
}
.qblock:active{transform:translateY(-12px)}
.mission.soon{display:flex;flex-direction:column}
.mission.soon .win-main{display:flex;flex-direction:column;justify-content:center;text-align:center;flex:1}

.save-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
.links{display:grid;gap:12px}
.links a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;
  border:3px solid var(--ink);background:#fff;padding:10px 14px;font-size:18px;overflow-wrap:anywhere;
  box-shadow:3px 3px 0 var(--ink);
}
.links a:hover,.links a:focus-visible{background:var(--butter);outline:none;transform:translateX(4px)}
.links a b{flex:none;font-family:var(--pixel);font-weight:400;font-size:10px;color:var(--coral-2)}

/* profile / about */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:40px;align-items:start}
.four{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.portrait{width:100%;max-width:260px;aspect-ratio:1;border:4px solid var(--ink);background:#1d5a55;margin:0 auto 16px;display:block}
.stats{display:grid;gap:8px;font-size:17px}
.stats div{display:flex;gap:8px;align-items:baseline}
.stats dt{font:400 10px var(--pixel);color:var(--coral-2);white-space:nowrap}
.stats div::after{content:"";order:1;flex:1;border-bottom:3px dotted rgba(27,20,51,.3)}
.stats dd{order:2;text-align:right}
.big p{font-size:19px}

.quests{position:relative;display:grid;gap:36px;padding-left:64px;max-width:820px}
.quests::before{content:"";position:absolute;left:22px;top:10px;bottom:10px;border-left:4px dashed var(--lilac)}
.quest{position:relative}
.quest > .spr{position:absolute;left:-60px;top:14px;--px:4px}
.quest .when{font:400 10px var(--pixel);color:var(--aqua-2)}
.quest h3{font:400 14px/1.5 var(--pixel);color:var(--plum);margin:8px 0}

.cta{text-align:center;max-width:720px;margin:0 auto}
.cta .win-main{padding:28px 24px}
.cta h2{font:400 clamp(16px,2.4vw,22px)/1.5 var(--pixel);color:var(--plum);margin-bottom:14px}

/* contact */
.dialog{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start}
.dialog .portrait{max-width:120px;margin:0}
.dialog .say{font-size:19px;min-height:7em}
.caret{display:inline-block;color:var(--coral-2);animation:blink .8s steps(1) infinite;margin-left:4px}
.status{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font:400 10px var(--pixel);color:var(--aqua-2)}
.status::before{content:"";width:10px;height:10px;background:var(--aqua);border:2px solid var(--ink);animation:blink 1s steps(1) infinite}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font:400 10px var(--pixel);color:var(--plum)}
.field input,.field textarea{
  font:inherit;font-size:17px;color:var(--ink);width:100%;
  border:3px solid var(--ink);background:#fff;padding:10px 12px;
  box-shadow:inset 3px 3px 0 rgba(27,20,51,.1);
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;background:#fffbe9;box-shadow:0 0 0 3px var(--aqua)}

.gameover{
  position:relative;text-align:center;padding:70px 16px 150px;overflow:hidden;
  font-family:var(--pixel);
}
.gameover h2{font-weight:400;font-size:clamp(20px,3.4vw,34px);color:var(--butter);text-shadow:4px 4px 0 var(--coral-2);margin-bottom:28px}
.gameover small{display:block;margin-top:32px;font-size:10px;color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .stage{grid-template-columns:1fr 1fr;grid-template-areas:"head head" "console hello" "weapons skills" "training training"}
  .stage .training{margin-top:0}
  .save-grid,.two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  body{font-size:17px}
  .hero{min-height:640px}
  .hero.sub{min-height:560px}
  .hud{font-size:8px;flex-wrap:wrap}
  .hud-clouds{display:none}
  .hp{width:60px}
  .screen-frame{min-height:320px;padding:36px 16px 130px}
  .sub .screen-frame{padding:32px 16px 120px}
  .hero .lamp{display:none}
  .hero .walker.player{--px:6px !important}
  .hero .tree{--px:4px}
  .stage{grid-template-columns:1fr;grid-template-areas:"head" "console" "hello" "weapons" "training" "skills";gap:36px}
  .stage .hello{margin-top:0}
  .mission-grid{grid-template-columns:1fr}
  .dialog{grid-template-columns:1fr}
  .links a{flex-direction:column-reverse;align-items:flex-start;gap:4px}
  .quests{padding-left:48px}
  .quest > .spr{left:-48px}
  .quests::before{left:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  body::after{display:none}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1}
}

/* ---------- blog ---------- */
.posts{display:grid;gap:32px;max-width:860px}
.post .win-main{display:grid;gap:10px}
.post .meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.post .meta .chip{margin:0}
.post .date{font:400 10px var(--pixel);color:var(--aqua-2)}
.post h3{font:400 clamp(14px,2vw,18px)/1.5 var(--pixel);color:var(--plum)}
.post .read{justify-self:start;background:none;border:0;padding:0;cursor:pointer;font:400 11px var(--pixel);color:var(--coral-2)}
.post .read::before{content:"";position:absolute;inset:0;z-index:1}
.post .read:focus-visible{outline:none}
.post:hover .win,.post:has(.read:focus-visible) .win{box-shadow:12px 12px 0 rgba(0,0,0,.45);background:#fffbe9}
.post:has(.read:focus-visible) .win{outline:3px solid var(--butter);outline-offset:4px}
.post:hover .read::after,.post .read:focus-visible::after{content:" ▶";animation:blink .6s steps(1) infinite}
.save-slot{font:400 10px var(--pixel);color:var(--muted);margin-bottom:10px}
dialog.win{padding:0;margin:auto;width:min(760px,calc(100% - 32px));max-height:86vh;overflow:auto;color:var(--ink)}
dialog.win[open]{animation:pop .4s steps(5) both}
dialog::backdrop{background:rgba(17,13,43,.82)}
dialog .win-bar{position:sticky;top:0;z-index:2}
dialog .close{font:400 10px var(--pixel);background:var(--coral);color:var(--ink);border:2px solid var(--ink);padding:3px 6px;cursor:pointer}
dialog .close:hover,dialog .close:focus-visible{background:var(--butter);outline:none}
.article h2{font:400 clamp(16px,2.6vw,24px)/1.5 var(--pixel);color:var(--plum);margin:10px 0 18px}
.article .date{font:400 10px var(--pixel);color:var(--aqua-2)}
.article p{font-size:18px}
.article code{font-family:ui-monospace,monospace;font-size:15px;background:var(--ink);color:var(--aqua);padding:2px 6px;overflow-wrap:anywhere}
.article pre{background:var(--ink);color:var(--aqua);padding:12px 14px;border:3px solid var(--plum);overflow:auto;margin-bottom:12px}
.article pre code{padding:0;background:none}
.article .last{color:var(--coral-2);font-weight:700}