/* Layout: one neon arcade world. A side-scroller "level" runs down the page:
   hero with a playable memory pad, then the loop, the ten powers, the games shelf, and a calm parents panel. */
:root{
  color-scheme: dark;
  --night:#150a2e;        /* deep violet ground */
  --night-2:#1f1142;      /* raised surface */
  --night-3:#2b1a5a;      /* borders, tracks */
  --ink:#f6f1ff;          /* main text */
  --ink-soft:#bfb2e6;     /* secondary text */
  --pink:#ff3ea5;
  --cyan:#22e6ff;
  --lime:#b6ff3b;
  --sun:#ffd23a;
  --orange:#ff7a2f;
  --display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,Consolas,monospace;
  --wrap:1080px;
}
*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--night);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  padding-inline:20px;
  background-image:
    radial-gradient(60rem 30rem at 85% -5%, rgba(255,62,165,.22), transparent 60%),
    radial-gradient(50rem 28rem at 0% 20%, rgba(34,230,255,.16), transparent 60%);
  background-repeat:no-repeat;
}
.wrap{max-width:var(--wrap);margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:.01em}
p{margin:0}
a{color:var(--cyan)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.label{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* nav */
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:22px}
.brand{font-family:var(--display);font-size:1.5rem;color:var(--ink);text-decoration:none}
.brand b{color:var(--pink);font-weight:400}
.nav ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0}
.nav ul a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.98rem}
.nav ul a:hover{color:var(--lime)}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:36px 64px}
.hero > *{min-width:0}
.hero h1{font-size:clamp(2.7rem,7.2vw,5.2rem)}
.hero h1 .a{color:var(--lime)}
.hero h1 .b{color:var(--cyan)}
.hero .lede{font-size:1.18rem;color:var(--ink-soft);max-width:34ch;margin-top:18px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{font-family:var(--display);font-size:1.1rem;border:0;border-radius:999px;padding:14px 26px;cursor:pointer;text-decoration:none;display:inline-block}
.btn-go{background:var(--lime);color:#14230a;box-shadow:0 6px 0 #5f8f0c}
.btn-go:active{transform:translateY(4px);box-shadow:0 2px 0 #5f8f0c}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--night-3)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--cyan)}

/* memory pad */
.pad{background:var(--night-2);border:2px solid var(--night-3);border-radius:28px;padding:22px;display:flex;flex-direction:column;gap:16px}
.pad-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.pad-head h2{font-size:1.5rem}
.pad-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stage{position:relative;height:300px;border-radius:20px;overflow:hidden;border:2px solid var(--night-3);display:grid;place-items:end center;perspective:700px;
  background:
    linear-gradient(to bottom, transparent 0 84%, var(--cyan) 84% 85%, #10244a 85% 100%),
    radial-gradient(22rem 14rem at 50% 30%, rgba(34,230,255,.28), transparent 70%),
    linear-gradient(#0c0628,#12305a)}
.echo{position:relative;height:95%;aspect-ratio:896/1195;margin-bottom:1%;transform-origin:50% 98%;animation:e-idle 2.4s ease-in-out infinite}
.echo img{position:absolute;inset:0;width:100%;height:100%;display:block}
.echo img{visibility:hidden}
.echo .e-pose{inset:auto;left:50%;width:auto;transform:translateX(-50%)}
.echo .e-stomp{bottom:1.8%;height:87.6%}
.echo .e-spin{bottom:1.8%;height:84%}
.echo .e-clap{bottom:-4%;height:105%}
.echo:not(.jump):not(.clap):not(.spin):not(.stomp) .e-stand,
.echo.jump .e-jump,.echo.clap .e-clap,.echo.spin .e-spin,.echo.stomp .e-stomp{visibility:visible}
.echo.jump{animation:e-jump .7s ease-out}
.echo.clap{animation:e-clap .7s ease-in-out;transform-origin:50% 100%}
.echo.spin{animation:e-spin .7s ease-in-out;transform-origin:50% 50%}
.echo.stomp{animation:e-stomp .7s ease-in}
.burst{position:absolute;top:33%;left:82%;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle, var(--sun) 0 22%, transparent 24% 40%, var(--pink) 42% 50%, transparent 52%)}
.echo.clap .burst{animation:e-burst .35s ease-out 2}
.ring{position:absolute;left:50%;bottom:9%;width:240px;height:36px;margin-left:-120px;border-radius:50%;border:4px solid var(--lime);opacity:0;pointer-events:none}
.stage.stomp .ring{animation:e-ring .45s ease-out .32s}
.stage.stomp{animation:e-shake .3s linear .32s}
.say{position:absolute;top:12px;left:12px;font-family:var(--display);font-size:1.5rem;line-height:1;padding:10px 16px;border-radius:16px 16px 16px 4px;background:var(--ink);color:#1b1038;opacity:0;transform:scale(.6);transform-origin:0 100%;transition:opacity .12s, transform .12s}
.say.on{opacity:1;transform:scale(1)}
.sound{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:0;background:rgba(21,10,46,.75);color:var(--ink);cursor:pointer}
@keyframes e-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2%)}}
@keyframes e-jump{0%,100%{transform:translateY(9%)}50%{transform:translateY(-5%)}}
@keyframes e-clap{0%,50%,100%{transform:scale(1)}25%,75%{transform:scale(1.05)}}
@keyframes e-spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@keyframes e-stomp{0%{transform:translateY(0)}35%{transform:translateY(-8%)}55%{transform:translateY(0) scaleY(.92)}75%{transform:scaleY(1.03)}100%{transform:none}}
@keyframes e-burst{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}
@keyframes e-ring{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(1.3)}}
@keyframes e-shake{0%,100%{transform:translateY(0)}30%{transform:translateY(5px)}60%{transform:translateY(-2px)}}
.move{font-family:var(--display);font-size:1.25rem;border:0;border-radius:20px;aspect-ratio:2.4;cursor:pointer;color:#14082b;opacity:.5;transition:opacity .12s, transform .12s, box-shadow .12s}
.move[data-c="pink"]{background:var(--pink)}
.move[data-c="cyan"]{background:var(--cyan)}
.move[data-c="lime"]{background:var(--lime)}
.move[data-c="sun"]{background:var(--sun)}
.move.lit{opacity:1;transform:scale(1.04);box-shadow:0 0 34px currentColor}
.move[data-c="pink"].lit{box-shadow:0 0 34px var(--pink)}
.move[data-c="cyan"].lit{box-shadow:0 0 34px var(--cyan)}
.move[data-c="lime"].lit{box-shadow:0 0 34px var(--lime)}
.move[data-c="sun"].lit{box-shadow:0 0 34px var(--sun)}
.pad.ready .move{opacity:.85}
.move:disabled{cursor:default}
.pad-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pad-msg{font-weight:700;min-height:1.6em}
.score{font-family:var(--mono);color:var(--sun);font-variant-numeric:tabular-nums}

/* sections */
section{padding-block:56px}
.sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:30px;max-width:60ch}
.sec-head h2{font-size:clamp(2rem,4.6vw,3rem)}
.sec-head p{color:var(--ink-soft)}

/* loop */
.loop{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.loop li{list-style:none;counter-increment:step;border-top:4px solid var(--c);padding-top:16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.loop li::before{content:"Step " counter(step);font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.loop h3{font-size:1.5rem}
.loop p{color:var(--ink-soft)}
ol.loop{margin:0;padding:0}

/* powers */
.powers{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.power{background:var(--night-2);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.power .code{font-family:var(--mono);font-size:.8rem;color:var(--c);letter-spacing:.08em}
.power h3{font-size:1.35rem;color:var(--c)}
.power .real{font-weight:800;font-size:.92rem}
.power p{color:var(--ink-soft);font-size:.95rem}
.sub{font-family:var(--display);font-size:1.4rem;margin:34px 0 14px}

/* games */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.game{border:2px dashed var(--night-3);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.game h3{font-size:1.4rem}
.game p{color:var(--ink-soft);font-size:.96rem}
.tag{align-self:flex-start;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--night-3);color:var(--ink)}
.tag.live{background:var(--lime);color:#14230a}

/* parents */
.parents{background:var(--ink);color:#1b1038;border-radius:28px;padding:36px;display:grid;grid-template-columns:1.2fr .8fr;gap:32px}
.parents > *{min-width:0}
.parents h2{font-size:clamp(1.9rem,4vw,2.6rem);color:#1b1038}
.parents .label{color:#5b4a8f}
.parents p{margin-top:14px;max-width:58ch}
.parents ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.parents li{border-left:4px solid var(--pink);padding-left:14px}
.parents li b{display:block}
.parents li span{color:#4a3b78;font-size:.95rem}

footer{padding-block:36px 48px;color:var(--ink-soft);font-size:.9rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}

@media (max-width:820px){
  .hero,.parents{grid-template-columns:1fr}
  .loop{grid-template-columns:1fr}
  .parents{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .move{transition:none}
  .move.lit{transform:none}
  .echo,.echo.jump,.echo.clap,.echo.spin,.echo.stomp,.stage.stomp,.echo.clap .burst,.stage.stomp .ring{animation:none}
}