/* Number Stomp: robot picker, level map and the game. This page uses its own styles (not styles.css). */
:root{
  --night:#0e0a28; --panel:#1a1446; --panel-2:#251c5e; --line:#3a2f86;
  --ink:#f6f3ff; --muted:#b3acdf;
  --pink:#ff4fa8; --cyan:#35e3f5; --lime:#b6ff3c; --yellow:#ffe34d;
  --display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --body:"Nunito","Trebuchet MS","Segoe UI",sans-serif;
  color-scheme:dark; box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px); background:var(--night)}
body{margin:0; background:var(--night); color:var(--ink); font-family:var(--body); font-weight:600; font-size:1.0625rem; line-height:1.45; -webkit-tap-highlight-color:transparent}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
button:focus-visible{outline:3px solid var(--yellow); outline-offset:3px}
h1,h2{font-family:var(--display); font-weight:400; margin:0; letter-spacing:.01em}
[hidden]{display:none !important}
.wrap{max-width:46rem; margin:0 auto; padding:1.25rem 1rem 2.5rem}

/* ---------- Who's playing ---------- */
.pick-title{font-size:clamp(2.4rem,11vw,4rem); line-height:1; color:var(--yellow); text-shadow:0 0 22px rgba(255,227,77,.45); text-align:center; margin-top:.5rem}
.pick-sub{text-align:center; color:var(--muted); margin:.5rem 0 1.25rem; font-size:1.125rem}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem}
@media (min-width:34rem){ .grid{grid-template-columns:repeat(4,1fr)} }
@media (min-width:60rem){ .wrap{max-width:62rem} .grid{grid-template-columns:repeat(6,1fr)} }
.bot{position:relative; display:block; width:100%; aspect-ratio:3/4; border-radius:1.25rem; background:var(--panel); border:3px solid var(--line); padding:.5rem .35rem; transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease}
.bot img{width:100%; height:100%; object-fit:contain; display:block; pointer-events:none}
.bot:focus-visible{border-color:var(--c); box-shadow:0 0 0 2px var(--c), 0 0 26px -2px var(--c); transform:translateY(-3px)}
@media (hover:hover) and (pointer:fine){ .bot:hover{border-color:var(--c); box-shadow:0 0 0 2px var(--c), 0 0 26px -2px var(--c); transform:translateY(-3px)} }
.bot:active{transform:scale(.95)}


/* ---------- Game home ---------- */
.top{display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.game-name{font-size:1.4rem; white-space:nowrap; color:var(--cyan); text-shadow:0 0 18px rgba(53,227,245,.5)}
.switch{white-space:nowrap; display:flex; align-items:center; gap:.5rem; padding:.3rem .9rem .3rem .3rem; border-radius:99px; background:var(--panel); border:2px solid var(--line); font-weight:800; font-size:.95rem}
.switch img{width:2.2rem; height:2.2rem; object-fit:contain; border-radius:50%; background:var(--night)}
.hero{display:grid; grid-template-columns:minmax(0,9rem) 1fr; align-items:center; gap:1rem; margin:1.25rem 0 1.75rem}
.hero img{width:100%; filter:drop-shadow(0 0 24px var(--c))}
.go{display:block; width:100%; text-align:center; font-family:var(--display); font-size:clamp(1.7rem,7.5vw,2.5rem); line-height:1.05; color:#17103f; background:var(--lime); border-radius:1.5rem; padding:1.1rem .75rem 1rem; box-shadow:0 8px 0 #6ea012, 0 0 34px rgba(182,255,60,.45); transition:transform .08s ease, box-shadow .08s ease}
.go:active{transform:translateY(6px); box-shadow:0 2px 0 #6ea012, 0 0 20px rgba(182,255,60,.4)}
.go small{display:block; font-size:.55em; margin-top:.3rem; opacity:.8}
.map-title{font-size:1.5rem; color:var(--pink); margin-bottom:.25rem}
.map-note{color:var(--muted); margin:0 0 1rem; max-width:34rem}
.map{background:var(--panel); border:3px solid var(--line); border-radius:1.5rem; padding:1.25rem .75rem}
.row{position:relative; display:grid; grid-template-columns:repeat(4,1fr); justify-items:center; padding:.35rem 0}
.row::before{content:""; position:absolute; left:var(--l,12.5%); right:var(--r,12.5%); top:50%; border-top:4px dashed var(--line)}
.row.rev{direction:rtl}
.turn{height:1.5rem; width:0; margin-left:auto; margin-right:calc(12.5% - 2px); border-left:4px dashed var(--line)}
.turn.left{margin-left:calc(12.5% - 2px); margin-right:auto}
.lv{position:relative; z-index:1; direction:ltr; width:clamp(3.4rem,17vw,4.6rem); aspect-ratio:1; border-radius:50%; font-family:var(--display); font-size:clamp(1.4rem,6vw,1.9rem); background:var(--night); border:4px solid var(--line); color:var(--ink); display:grid; place-items:center; transition:transform .1s ease}
.lv:active{transform:scale(.92)}
.lv.done{background:var(--cyan); border-color:var(--cyan); color:#0b2a3a}
.lv.done::after{content:"\2605"; position:absolute; right:-.3rem; top:-.5rem; font-size:1.3rem; color:var(--yellow); text-shadow:0 0 6px rgba(0,0,0,.6)}
.lv.here{border-color:var(--lime); box-shadow:0 0 0 4px rgba(182,255,60,.25), 0 0 24px rgba(182,255,60,.6)}
.lv .rider{position:absolute; width:62%; left:-22%; bottom:-28%; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
@media (prefers-reduced-motion:no-preference){
  .lv.here{animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{50%{box-shadow:0 0 0 8px rgba(182,255,60,.12), 0 0 34px rgba(182,255,60,.75)}}
  .hero img.hop{animation:hop .5s ease}
  @keyframes hop{40%{transform:translateY(-14%)}}
}
.grown{margin-top:1.5rem; padding:1rem 1.1rem; border-radius:1.25rem; border:2px dashed var(--line); color:var(--muted)}
.grown h2{font-size:1.2rem; color:var(--ink); margin-bottom:.35rem}
.grown p{margin:.35rem 0}
.link{color:var(--cyan); font-weight:800; text-decoration:underline; padding:.4rem 0}

/* ---------- Level card ---------- */
.veil{position:fixed; inset:0; background:rgba(8,5,26,.82); display:grid; place-items:end center; padding:0; z-index:10}
@media (min-width:34rem){ .veil{place-items:center; padding:1rem} }
.card{width:100%; max-width:30rem; background:var(--panel-2); border:3px solid var(--pink); border-radius:1.5rem 1.5rem 0 0; padding:1.25rem 1.1rem calc(1.25rem + env(safe-area-inset-bottom,0px)); max-height:92%; overflow:auto}
@media (min-width:34rem){ .card{border-radius:1.5rem} }
.card h2{font-size:1.9rem; color:var(--yellow); line-height:1.1}
.card .what{color:var(--cyan); font-weight:800; margin:.2rem 0 .8rem}
.card p{margin:.5rem 0 .9rem}
.big{display:block; width:100%; text-align:center; font-family:var(--display); font-size:1.6rem; color:#17103f; background:var(--lime); border-radius:1.1rem; padding:.9rem .75rem; margin-top:.6rem; box-shadow:0 6px 0 #6ea012}
.small{display:block; width:100%; text-align:center; font-family:var(--display); font-size:1.15rem; padding:.7rem; margin-top:.9rem; border-radius:1rem; border:2px solid var(--line); background:var(--panel)}
.toast{position:fixed; left:50%; bottom:calc(1.25rem + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:#17103f; font-weight:800; padding:.7rem 1.1rem; border-radius:99px; z-index:20; max-width:90%; text-align:center}

.spk{width:2.9rem; height:2.9rem; border-radius:50%; background:var(--night); border:3px solid var(--cyan); color:var(--cyan); display:grid; place-items:center; flex:none}
.spk:active{transform:scale(.9)}
.gowrap{position:relative}
.swwrap{display:flex; align-items:center; gap:.4rem}
.gowrap .spk{position:absolute; top:-1rem; right:-.4rem; z-index:2}
.rowspk{display:flex; gap:.6rem; align-items:center; margin-top:.6rem}
.rowspk .big{margin-top:0; flex:1}
.say{position:fixed; top:calc(.75rem + env(safe-area-inset-top,0px)); left:50%; transform:translateX(-50%); z-index:30; background:var(--yellow); color:#17103f; font-family:var(--display); font-size:1.3rem; line-height:1.15; padding:.55rem 1.1rem; border-radius:99px; max-width:92%; text-align:center; box-shadow:0 0 24px rgba(255,227,77,.5)}
.nsg .stage{position:relative;display:block;height:300px;border-radius:20px;overflow:hidden;border:2px solid var(--night-3);
  background:
    linear-gradient(to bottom, transparent 0 86%, var(--cyan) 86% 87%, #10244a 87% 100%),
    radial-gradient(20rem 12rem at 80% 22%, rgba(255,62,165,.22), transparent 70%),
    linear-gradient(#0c0628,#12305a)}
@keyframes ns-in{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}

@keyframes ns-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2%)}}
@keyframes ns-hop{0%,100%{transform:translateY(6%)}50%{transform:translateY(-12%)}}
.nsg .says{position:absolute;left:36%;right:4%;bottom:17%;background:var(--ink);color:#1b1038;border-radius:18px 18px 18px 4px;padding:9px 14px;font-family:var(--display);font-size:1.05rem;line-height:1.15}
.nsg .sound{position:absolute;top:8px;right:10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:0;background:rgba(21,10,46,.8);color:var(--ink);cursor:pointer;z-index:2}

.nsg .choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.nsg .choice{aspect-ratio:1.35;border:0;border-radius:20px;background:var(--night-3);cursor:pointer;display:grid;place-items:center;padding:0;transition:transform .12s, opacity .12s}
.nsg .choice:disabled{cursor:default;opacity:.45}
.nsg .choice.live:hover{transform:translateY(-3px)}
.nsg .choice.nope{animation:ns-nope .5s ease both}
.nsg .choice.hint{box-shadow:0 0 0 4px var(--lime), 0 0 24px var(--lime);opacity:1}
.nsg .choice.right{box-shadow:0 0 0 4px var(--lime);opacity:1}
.nsg .choice.charge{box-shadow:0 0 0 4px var(--lime), 0 0 26px var(--lime);opacity:1;animation:ns-charge .3s ease-in-out infinite alternate}
@keyframes ns-charge{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.08) rotate(3deg)}}
@keyframes ns-nope{0%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-5px)}100%{transform:none;opacity:.25}}



/* Number Stomp */
.nsg .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.nsg .stars{font-family:var(--display);font-size:1.05rem;color:var(--sun);white-space:nowrap}
.nsg .stars.pop{animation:ns-star .5s ease-out}
.nsg .beat{height:12px;border-radius:999px;background:var(--night-3);overflow:hidden}
.nsg .beat i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--pink))}
.nsg .beat.over i{background:var(--night-3);box-shadow:inset 0 0 0 2px var(--pink)}
.nsg .stage.shake{animation:ns-shake .25s linear}
.nsg .qrow{position:absolute;left:10px;right:10px;top:38px;height:40%;display:flex;align-items:center;justify-content:center;gap:10px}
.nsg .objs{display:grid;gap:8px 12px;justify-content:center}
.nsg .obj{width:60px;height:60px;animation:ns-in .4s cubic-bezier(.2,.9,.3,1.3) both;transition:transform .15s}
.nsg .obj svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 6px var(--glow,#fff))}
.nsg .obj.lit{transform:scale(1.22)}
.nsg .obj.lit svg{filter:drop-shadow(0 0 12px #fff) brightness(1.25)}
.nsg .num{flex:0 0 auto;width:64px;height:72px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-family:var(--display);font-size:2.2rem;line-height:1;
  background:var(--night-2);color:var(--c,var(--cyan));box-shadow:inset 0 0 0 3px var(--c,var(--cyan)), 0 0 14px -2px var(--c,var(--cyan));animation:ns-in .4s cubic-bezier(.2,.9,.3,1.3) both}
.nsg .num.slot{color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink-soft);border-style:dashed}
.nsg .num.slot.filled{color:#14230a;background:var(--lime);box-shadow:0 0 18px var(--lime);animation:ns-pop .45s ease-out}
.nsg .num.slot.tick{animation:ns-pop .3s ease-out}
.nsg .towers{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;justify-items:center;width:100%;height:102px;align-self:flex-start}
.nsg .tower{display:flex;flex-direction:column-reverse;gap:4px;width:64px}
.nsg .blk{height:16px;border-radius:5px;background:var(--c);box-shadow:0 0 6px var(--c);opacity:.9;animation:ns-in .35s both}
.nsg .blk.lit{background:#fff;box-shadow:0 0 10px #fff}
.nsg .says.count{left:38%;right:auto;min-width:74px;text-align:center;font-size:2.6rem;padding:4px 20px;bottom:14%}
.nsg .choice{font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--ink);aspect-ratio:auto;min-height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 6px}
.nsg .pips{display:flex;gap:5px;justify-content:center;min-height:10px}
.nsg .num .pips{gap:3px;min-height:6px}
.nsg .num .pips i{width:6px;height:6px;background:var(--c);box-shadow:none}
.nsg .pips i{width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}
.nsg .choice.charge .pips i,.nsg .choice.right .pips i{background:var(--lime);box-shadow:0 0 6px var(--lime)}
.nsg .choice.charge,.nsg .choice.right{color:var(--lime)}
@keyframes ns-in{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes ns-pop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes ns-star{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(-8deg)}100%{transform:scale(1)}}
@keyframes ns-shake{0%,100%{transform:none}25%{transform:translateY(3px)}60%{transform:translateY(-2px)}}
@media (max-width:480px){
  .nsg .echo{height:44%;left:2%}
  .nsg .says{left:40%;right:3%;font-size:.95rem}
  .nsg .says.count{left:42%;font-size:2.2rem}
  .nsg .objs{gap:6px 8px}
  .nsg .obj{width:48px;height:48px}
  .nsg .choice{min-height:92px}
  .nsg .num{width:54px;height:64px;font-size:1.9rem}
  .nsg .num .pips i{width:5px;height:5px}
  .nsg .choice{font-size:2.2rem}
}
@media (prefers-reduced-motion:reduce){
  .nsg .obj,.nsg .num,.nsg .blk,.nsg .echo,.nsg .echo.jump,.nsg .echo.clap,.nsg .echo.stomp,.nsg .choice.nope,.nsg .choice.charge,.nsg .stage.shake,.nsg .stars.pop,.nsg .num.slot.filled,.nsg .num.slot.tick{animation:none}
  .nsg .choice.nope{opacity:.25}
}

/* The new Echo: every picture is the same size, so poses swap in place. */
.nsg .echo{position:absolute;left:3%;bottom:2.5%;height:60%;aspect-ratio:592/800;transform-origin:50% 98%;animation:ns-idle 2.4s ease-in-out infinite}
.nsg .echo img{position:absolute;inset:0;width:100%;height:100%;visibility:hidden}
.nsg .echo.stand .e-stand,.nsg .echo.stand-b .e-stand-b,.nsg .echo.jump .e-jump,.nsg .echo.stomp .e-stomp,.nsg .echo.stompdown .e-stompdown,.nsg .echo.cheer .e-cheer,.nsg .echo.thumb .e-thumb,.nsg .echo.shrug .e-shrug,.nsg .echo.think .e-think,.nsg .echo.eyes .e-eyes,.nsg .echo.wave .e-wave,.nsg .echo.wave-o .e-wave-o,.nsg .echo.wave-c .e-wave-c,.nsg .echo.wave-u .e-wave-u,.nsg .echo.wave-e .e-wave-e,.nsg .echo.c1 .e-c1,.nsg .echo.c2 .e-c2,.nsg .echo.c3 .e-c3,.nsg .echo.c4 .e-c4,.nsg .echo.c5 .e-c5{visibility:visible}
.nsg .echo.stomp.alt .e-stomp{visibility:hidden}
.nsg .echo.stomp.alt .e-stompdown{visibility:visible}
.nsg .echo.jump{animation:ns-hop .7s ease-out}
/* A taller stage so Echo is big enough to see her fingers when she counts. */
.nsg .stage{height:340px}
.nsg .qrow{top:20px}
.nsg .says{left:42%}
.nsg .says.count{left:46%}
@media (max-width:480px){
  .nsg .echo{height:60%;left:1%}
  .nsg .says{left:46%;right:3%}
  .nsg .says.count{left:50%}
}


/* ---------- Number Stomp game screen ---------- */
:root{--night-2:#1f1142; --night-3:#2b1a5a; --ink-soft:#bfb2e6; --sun:#ffd23a; --orange:#ff7a2f; --mono:"DM Mono",ui-monospace,Consolas,monospace}
.nsg{display:flex; flex-direction:column; gap:14px}
.lvl{font-family:var(--display); font-size:1.4rem; color:var(--yellow); white-space:nowrap}
.top2{display:flex; justify-content:center; align-items:center; gap:1.25rem}
.rdots{display:flex; justify-content:center; gap:.6rem}
.rdots i{width:1.1rem; height:1.1rem; border-radius:50%; border:3px solid var(--line); background:var(--night)}
.rdots i.on{background:var(--lime); border-color:var(--lime); box-shadow:0 0 12px rgba(182,255,60,.7)}
.nsg .stage{border-color:var(--line); border-width:3px}
.nsg .choice{color:var(--ink)}
.nsg .choice.hint{animation:ns-hint 1s ease-in-out infinite}
@keyframes ns-hint{50%{transform:scale(1.05)}}
.nsg .obj.gap{visibility:hidden}
.nsg .objs{transition:opacity .35s}
.nsg .objs.gone{opacity:0}
/* Two rows of shapes and tall towers stay above Echo's head. */
.nsg .objs.two .obj{width:46px; height:46px}
.nsg .objs.two{gap:6px 10px}
.nsg .towers.tall{height:100px}
.nsg .towers.tall .blk{height:7px; border-radius:3px}
.nsg .towers.tall .tower{gap:3px}
/* Dots under 6 to 10 wrap into two rows of five. */
.nsg .choice .pips{flex-wrap:wrap; max-width:72px; row-gap:5px}
.nsg .pad-msg{text-align:center; min-height:1.6em; margin:0}
.nsg #done{margin-top:.2rem}
.nsg .echo.clap .e-clap,.nsg .echo.clap.alt .e-clap2{visibility:visible}
.nsg .echo.clap.alt .e-clap{visibility:hidden}
.nsg .echo.clap{animation:none}
@media (max-width:480px){
  .nsg .objs.two .obj{width:42px; height:42px}
  .nsg .choice .pips{max-width:62px; gap:4px}
  .nsg .choice .pips i{width:9px; height:9px}
}
@media (prefers-reduced-motion:reduce){ .nsg .choice.hint{animation:none} }

/* site header and footer */
.nav{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1.25rem; padding-bottom:1rem}
.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:.3rem 1.25rem; list-style:none; margin:0; padding:0}
.nav a{color:var(--ink); text-decoration:none; font-weight:800}
.nav ul a:hover{color:var(--lime)}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; margin-top:2rem; color:var(--muted); font-size:.9rem}
.foot a,.grown a{color:var(--cyan)}