/* Twirbo Junior. Kinetic Toybox palette (Stitch); targets are 56px or larger. */
:root{
  --primary:#0053d4;--primary-light:#e1e8ff;--bg:#faf9ff;--card:#fff;--card-alt:#f1f3ff;--text:#131b2d;--text-secondary:#424655;
  --border:#c2c6d8;--highlight:#ffba48;--warning:#7e5400;--warning-bg:#ffddb1;--success:#007238;--success-bg:#d9ffe6;
  --font-ui:'Hanken Grotesk',system-ui,sans-serif;--font-head:'Fredoka','Hanken Grotesk',system-ui,sans-serif;
  --move:#0053d4;--move-bg:#e1e8ff;--turn:#7e5400;--turn-bg:#ffddb1;--arm:#6b3fd4;--arm-bg:#ece4ff;--loop:#006d36;--loop-bg:#d9ffe6;
  --oops:#ba1a1a;--oops-bg:#ffdad6;--tap:56px;--r:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:18px/1.4 var(--font-ui);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.4;cursor:default}
a{color:var(--primary)}
:focus-visible{outline:3px solid #bd823c;outline-offset:3px}

.top{display:flex;align-items:center;gap:12px;padding:8px 16px;min-height:64px;background:#0a1230;color:#fff3d6;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff3d6;min-height:var(--tap)}
.brand h1{font:800 1.5rem 'Baloo 2',var(--font-head);margin:0;letter-spacing:.01em}
.brand em{font-style:normal;color:var(--primary)}
.logo{font-size:30px}
.crumb{color:#dfe6ff;font-weight:600}
.spacer{flex:1}
.more{font-weight:600;font-size:15px;text-decoration:none;color:#dfe6ff;padding:0 8px;min-height:44px;display:inline-flex;align-items:center}
.more:hover{color:#fff}
.crumb-back{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:999px;background:var(--primary-light);color:var(--primary);font-weight:700;text-decoration:none;font-size:17px}
.crumb-back:hover{background:#cfdbff}
.top .sound-btn{background:#fff3d6;border-color:#fff3d6}
.sound-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--border);background:var(--card);font-size:22px;line-height:1;display:grid;place-items:center}
.loading{padding:24px 16px}

.screen{max-width:1100px;margin:0 auto;padding:20px 16px 32px}
.screen-title{font:500 1.8rem var(--font-head);margin:8px 0 18px}
.back-link{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:700;text-decoration:none;font-size:17px}
.big-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 22px;border-radius:var(--r);background:var(--primary);color:#fff;font-weight:700;text-decoration:none}
.empty{padding:40px 0;display:grid;gap:12px;justify-items:start}

.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.theme-card{display:grid;gap:6px;padding:22px;border:2px solid var(--border);border-radius:20px;background:var(--card);text-decoration:none;color:var(--text);min-height:180px;align-content:start;transition:transform .12s,border-color .12s}
.theme-card:hover,.theme-card:focus-visible{border-color:var(--primary);transform:translateY(-2px)}
.theme-card .emoji{font-size:56px;line-height:1}
.theme-card b{font-size:1.3rem}
.theme-card span:not(.emoji){color:var(--text-secondary);font-size:16px}
.theme-card small{font-weight:700;color:var(--warning)}

.ch-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ch-card{display:flex;align-items:center;gap:14px;padding:14px 18px;min-height:84px;border:2px solid var(--border);border-radius:18px;background:var(--card);text-decoration:none;color:var(--text)}
.ch-card:hover{border-color:var(--primary)}
.ch-card.done{background:var(--success-bg);border-color:#b7dcc4}
.ch-card .num{flex:none;width:48px;height:48px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.2rem}
.ch-text{display:grid;flex:1;min-width:0}
.ch-text b{font-size:1.15rem}
.ch-text span{color:var(--text-secondary);font-size:16px}
.stars{font-size:22px;letter-spacing:2px;white-space:nowrap;color:#c9a24a}
.stars.small{font-size:16px;letter-spacing:1px;vertical-align:middle}

/* play: the field, and beside it one column in the order a kid uses it: program, blocks, Go */
.play{display:grid;gap:12px;padding:12px 16px 20px;max-width:1400px;margin:0 auto;
  grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:auto auto auto 1fr;grid-template-areas:"head head" "hint hint" "field program" "toast program"}
.play-head{grid-area:head;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.story{flex:1;min-width:220px}
.story h2{font:500 1.35rem var(--font-head);margin:0}
.story p{margin:2px 0 0;color:var(--text-secondary);font-size:17px}
.budget{font-weight:700;color:var(--text)}
.hint-btn{min-height:var(--tap);padding:0 18px;border:2px solid var(--highlight);background:var(--warning-bg);border-radius:var(--r);font-weight:700}
.hint{grid-area:hint;margin:0;padding:12px 16px;border-radius:var(--r);background:var(--warning-bg);color:var(--warning);font-weight:600}
.field-wrap{grid-area:field;position:relative;align-self:start}
.field{display:block;width:100%;height:auto;max-height:calc(100vh - 190px);min-height:180px;border-radius:var(--r);border:2px solid var(--border);background:#f3efe4}
.mat{fill:#f3efe4}
.grid line{stroke:#18343e;stroke-opacity:.08;stroke-width:3}
.obst rect{fill:#a89f91;stroke:#6e665a;stroke-width:6}
.obst.over-art rect{fill:none;stroke-dasharray:18 12}
.emoji-t{font-size:90px}
.art{filter:saturate(.8) brightness(1.08) contrast(.92)} /* softer, lighter art so the robot and the goal stand out */
.goal circle{fill:rgba(255,255,255,.62);stroke:#e08a00;stroke-width:14}
.goal.hit circle{fill:rgba(23,101,59,.25);stroke:var(--success);stroke-dasharray:none}
.goal circle{transform-box:fill-box;transform-origin:center;animation:goalpulse 1.6s ease-in-out infinite}
@keyframes goalpulse{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.goal circle{animation:none}}
.goal-label{font:800 60px var(--font-ui);fill:#fff;stroke:#131b2d;stroke-width:14px;paint-order:stroke;stroke-linejoin:round}
.goal-n{font:700 52px var(--font-ui);fill:var(--text)}
.trail{fill:none;stroke:var(--primary);stroke-width:10;stroke-opacity:.45;stroke-dasharray:4 22;stroke-linecap:round}
.ghost.off{display:none}
.ghost-path{fill:none;stroke:#131b2d;stroke-width:9;stroke-opacity:.38;stroke-dasharray:2 20;stroke-linecap:round;stroke-linejoin:round}
.ghost-bot{opacity:.35}
.ghost.running .ghost-bot{display:none}
.robot .body{fill:#ffd36b;stroke:#18343e;stroke-width:8}
.robot .wheel{fill:#18343e}
.robot .eye{fill:#18343e}
.robot .nose{fill:#e0a030}
.robot .arm{fill:var(--arm);stroke:#18343e;stroke-width:6}
.robot .arm.up{fill:#b49ad8}

.toast{grid-area:toast;align-self:start;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:var(--r);background:var(--card);border:2px solid var(--border);box-shadow:0 8px 24px rgba(24,52,62,.18)}
.toast[hidden]{display:none}
.toast p{margin:0;flex:1;min-width:180px;font-weight:700;font-size:1.15rem}
.toast p small{display:block;font-weight:500;font-size:16px;color:var(--text-secondary)}
.toast.win{border-color:var(--success);background:var(--success-bg)}
.toast.win p{font-size:1.5rem}
.toast.oops{border-color:var(--oops);background:var(--oops-bg)}
.toast-actions{display:flex;gap:10px;flex-wrap:wrap}

.program{grid-area:program;display:flex;flex-direction:column;gap:12px;min-width:0;align-self:start;position:sticky;top:12px}
.script{--sbg:var(--card);display:flex;flex-direction:column;align-items:flex-start;padding:12px 12px 20px;min-height:150px;max-height:calc(100vh - 500px);overflow:auto;border:2px solid var(--border);border-radius:var(--r);background:var(--sbg)}
.script.locked .minus,.script.locked .val,.script.locked .plus{pointer-events:none}
.strip-empty{margin:14px 0 0;padding:14px 16px;border:3px dashed var(--border);border-radius:10px;color:var(--text-secondary);font-weight:600;font-size:16px;align-self:stretch}
/* Scratch-style blocks: each has a notch on top and a bump underneath, so they snap into one stack */
.hat,.blk{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;font-weight:700;font-size:18px;line-height:1.1;color:#fff;background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)}
.hat{--c:var(--highlight);color:#291800;padding:14px 16px 12px;border-radius:30px 30px 8px 8px / 22px 22px 8px 8px;min-width:200px}
.hat-go{background:var(--success);color:#fff;border-radius:8px;padding:3px 8px;font-size:16px}
.blk{padding:6px 12px;min-height:60px;border-radius:8px;min-width:160px;transition:background-color .2s}
.blk::before{content:'';position:absolute;top:0;left:18px;width:30px;height:8px;background:var(--sbg);border-radius:0 0 9px 9px;z-index:1} /* notch */
.hat::after,.blk::after{content:'';position:absolute;top:100%;left:18px;width:30px;height:8px;background:var(--c);border-radius:0 0 9px 9px;box-shadow:0 2px 0 rgba(0,0,0,.22);z-index:2} /* bump */
.blk svg{width:26px;height:26px;flex:none}
.blk .deg{font-size:26px;line-height:1;align-self:flex-start;margin:10px 0 0 -4px}
.blk.c-move{--c:var(--move)}.blk.c-turn{--c:#b06f00}.blk.c-arm{--c:var(--arm)}.blk.c-loop{--c:var(--loop)}
.blk.active{z-index:3;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),0 0 0 4px #fff,0 0 0 8px #131b2d}
.script.locked .blk:not(.active){background:color-mix(in srgb,var(--c) 45%,#fff)}
.blk.bad{--c:var(--oops)}
.num{display:inline-flex;align-items:center;background:#fff;border-radius:999px;padding:2px;gap:0}
.minus,.val,.plus{min-height:48px;border:0;background:none;color:var(--text);font-weight:800;font-size:1.15rem;font-variant-numeric:tabular-nums}
.minus,.plus{width:42px;border-radius:999px;font-size:1.4rem;color:var(--text-secondary)}
.minus:hover,.plus:hover{background:var(--card-alt)}
.val{min-width:48px;padding:0 4px;border-radius:10px}
/* repeat: a C block whose mouth holds every block after it */
.cblk{display:flex;flex-direction:column;align-items:flex-start}
.cblk>.blk{border-radius:8px 8px 8px 0}
.cblk>.blk::after{left:40px}
.mouth{display:flex;flex-direction:column;align-items:flex-start;border-left:22px solid var(--loop);min-height:34px;padding:0 0 4px}
.mouth-empty{margin:12px 10px;color:var(--text-secondary);font-size:15px;font-weight:600}
.cfoot{width:150px;height:22px;background:var(--loop);border-radius:0 8px 8px 8px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22)}
.script.locked .cfoot,.script.locked .mouth{opacity:.6}
.run-row{display:flex;gap:10px}
.go{flex:1;min-height:72px;border:0;border-radius:var(--r);background:var(--success);color:#fff;font-weight:700;font-size:1.6rem;box-shadow:0 5px 0 #005227}
.go:active{transform:translateY(2px);box-shadow:0 2px 0 #005227}
.go.stop{background:var(--oops);box-shadow:0 4px 0 #6b2219}
.tool{min-height:var(--tap);min-width:var(--tap);padding:0 16px;border:2px solid var(--border);border-radius:var(--r);background:var(--card);font-weight:700}
.run-row .tool{min-height:72px}

.palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; /* like arrow keys: Forward on top, Turn left / Back / Turn right below */
  grid-template-areas:". fwd ." "left back right" "armup armdown repeat"}
.palette.few{grid-template-areas:". fwd ." "left back right"}
.pal[data-add=forward]{grid-area:fwd}.pal[data-add=back]{grid-area:back}.pal[data-add=left]{grid-area:left}.pal[data-add=right]{grid-area:right}
.pal[data-add=armUp]{grid-area:armup}.pal[data-add=armDown]{grid-area:armdown}.pal[data-add=repeat]{grid-area:repeat}
.pal{min-height:84px;border:0;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:700;font-size:15px;line-height:1.1;text-align:center;padding:8px 4px;box-shadow:0 4px 0 rgba(0,0,0,.15)}
.pal:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.15)}
.pal svg{width:40px;height:40px}
.c-move{background:var(--move-bg);color:var(--move)}
.c-turn{background:var(--turn-bg);color:var(--turn)}
.c-arm{background:var(--arm-bg);color:var(--arm)}
.c-loop{background:var(--loop-bg);color:var(--loop)}
.script .blk{background:var(--c);color:#fff} /* beats the light palette colours above */

/* coding levels */
.lvl{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:999px;background:var(--loop-bg);color:var(--loop);font-weight:600;font-size:15px;border:2px solid #b7dcc4}
.lvl[hidden]{display:none}
.lvl b{font:600 15px var(--font-head)}
.lvl-note{margin:-8px 0 18px;color:var(--text-secondary)}
.ch-group{font:500 1.3rem var(--font-head);margin:22px 0 10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ch-group .lock{font:600 15px var(--font-ui);color:var(--text-secondary);background:var(--card-alt);border-radius:999px;padding:4px 12px}
.ch-card.locked{opacity:.55;background:var(--card-alt);border-style:dashed}
.code-panel{border:2px solid var(--border);border-radius:var(--r);background:var(--card)}
.code-panel summary{min-height:var(--tap);display:flex;align-items:center;padding:0 16px;font-weight:700;cursor:pointer;color:var(--primary)}
.code-sub{margin:0 16px 8px;font-size:15px;color:var(--text-secondary)}
.code-panel pre{margin:0;padding:12px 16px 16px;overflow-x:auto;background:#131b2d;color:#e1e8ff;border-radius:0 0 14px 14px;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}
@media(max-width:520px){.code-panel pre{font-size:11px;padding:10px 12px 14px}}
/* guess first */
.guess-btn{min-height:var(--tap);padding:0 18px;border:2px solid var(--border);background:var(--card);border-radius:var(--r);font-weight:700}
.guess-btn.on{border-color:var(--arm);background:var(--arm-bg);color:var(--arm)}
.field.guessing{cursor:crosshair}
.guess-tip{position:absolute;left:12px;top:12px;margin:0;padding:8px 14px;border-radius:999px;background:var(--arm-bg);color:var(--arm);font-weight:700;font-size:16px;border:2px solid var(--arm);pointer-events:none}
.guess-tip[hidden]{display:none}
.guess circle{fill:rgba(107,63,212,.18);stroke:var(--arm);stroke-width:8;stroke-dasharray:16 10}
.guess-x{stroke:var(--arm);stroke-width:8;stroke-linecap:round}
.guess-line{stroke:var(--arm);stroke-width:6;stroke-dasharray:10 12}
.toast p .guess-note{display:block;margin-top:6px;font-size:1.1rem;color:var(--arm)}
.toast p .level-up{color:var(--loop);font-weight:700}
.toast p .big-idea{display:block;margin-top:10px;padding:10px 14px;border-radius:12px;background:var(--card);border:2px solid var(--highlight);font:500 1.1rem/1.35 var(--font-head);color:var(--text)}
.big-idea b{display:block;font:600 13px var(--font-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--warning)}
.level-up-btn{background:var(--highlight);color:#291800}

/* grown-up footer: one quiet line under the game, same width as the page */
#site-footer{max-width:1400px;margin:28px auto 0;padding:12px 16px 20px;border-top:1px solid var(--border);font-size:12px;color:var(--text-secondary);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
#site-footer nav{display:flex;flex-wrap:wrap;gap:4px 14px}
#site-footer a{color:var(--text-secondary)}
#site-footer p{margin:0}
#site-footer .analytics-choice{display:flex;gap:8px;align-items:center}
#site-footer label{display:flex;gap:6px;align-items:center}
#site-footer details{flex-basis:auto}
#site-footer details[open]{flex-basis:100%}
#site-footer summary{cursor:pointer}

@media (max-width:900px){
  .play{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "hint" "field" "toast" "program"}
  .run-row{position:sticky;bottom:0;z-index:2;padding:8px 0 calc(8px + env(safe-area-inset-bottom));background:var(--bg)} /* Go stays in reach under the thumb */
  .program{position:static}
  .script{max-height:none;min-height:110px}
  .field{max-height:none}
}
@media (max-width:600px){.more{display:none}}
@media (max-width:480px){
  body{font-size:17px}
  .brand h1{font-size:1.2rem}
  .more{font-size:14px}
  .story h2{font-size:1.2rem}
  .pal{min-height:84px;font-size:14px}
  .pal svg{width:34px;height:34px}
  .toast{padding:10px 12px}
  .blk,.hat{font-size:17px}
  .plus{display:none} /* tapping the number also goes up */
  .guess-tip{position:static;margin-top:8px;border-radius:12px}
  .lvl{font-size:14px}
  .emoji-t{font-size:110px}
}

/* motion: things pop, squish and bounce like a toy (all off for reduced motion) */
.pal{transition:transform .12s cubic-bezier(.34,1.56,.64,1),box-shadow .12s}
.pal:hover:not(:disabled){transform:translateY(-3px)}
.pal:active:not(:disabled){transform:translateY(3px) scale(.95);box-shadow:0 1px 0 rgba(0,0,0,.15)}
.blk.pop{animation:blkpop .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes blkpop{from{transform:scale(.3) translateY(24px);opacity:0}}
.blk.active{animation:blkbounce .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes blkbounce{0%{transform:scale(1)}50%{transform:scale(1.12) translateY(-4px)}100%{transform:scale(1.04)}}
.go{transition:transform .12s cubic-bezier(.34,1.56,.64,1)}
.go.ready{animation:gopulse 1.8s ease-in-out infinite}
@keyframes gopulse{50%{box-shadow:0 5px 0 #005227,0 0 0 8px rgba(0,114,56,.18)}}
.go:hover:not(:disabled){transform:translateY(-2px)}
.field-wrap.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.burst .spark{font-size:70px;transform-box:fill-box;transform-origin:center;animation:spark 1.1s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes spark{0%{transform:translate(0,0) scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.1);opacity:0}}
.toast:not([hidden]){animation:toastin .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes toastin{from{transform:translateY(24px) scale(.96);opacity:0}}
.goal.hit circle{animation:goalhit .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes goalhit{50%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.blk.pop,.blk.active,.go.ready,.field-wrap.shake,.toast:not([hidden]),.goal.hit circle{animation:none}.pal,.go{transition:none}}

/* world page: an adventure map of stops over the world's art */
.map-screen{max-width:1300px;margin:0 auto;padding:16px 16px 20px;display:flex;flex-direction:column;gap:12px;min-height:calc(100vh - 160px)}
.map-head{display:flex;align-items:center;gap:14px}
.map-head h2{font:600 1.9rem/1.1 var(--font-head);margin:0}
.map-head p{margin:2px 0 0;color:var(--text-secondary)}
.map-emoji{font-size:44px;width:68px;height:68px;border-radius:50%;background:var(--card);display:grid;place-items:center;box-shadow:0 4px 0 #dae2fb;flex:none}
.map-total{margin-left:auto;font:600 1.15rem var(--font-head);background:var(--card);border-radius:999px;padding:8px 16px;box-shadow:0 3px 0 #dae2fb;white-space:nowrap}
.map{position:relative;flex:1;min-height:440px;border-radius:28px;overflow:hidden;background:#dbe1ff;box-shadow:0 10px 30px rgba(24,52,62,.14);border:4px solid #fff}
.map::before{content:'';position:absolute;inset:-30px;background:var(--art) center/cover;filter:blur(6px) saturate(1.1);transform:scale(1.25);opacity:.85} /* the world's art as soft scenery, not a field to read */
.trail{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.stops{position:absolute;inset:0;z-index:1}
.trail path{fill:none;stroke:#fff;stroke-width:10;stroke-linecap:round;stroke-dasharray:2 22;vector-effect:non-scaling-stroke;filter:drop-shadow(0 2px 0 rgba(0,0,0,.18))}
.stops{list-style:none;margin:0;padding:0}
.stops .stop{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%)}
.stop-in{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--text)}
.node{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font:700 2.1rem var(--font-head);color:#fff;background:var(--primary);border:5px solid #fff;
  box-shadow:0 6px 0 #003fa5,0 10px 22px rgba(0,0,0,.2);transition:transform .15s cubic-bezier(.34,1.56,.64,1)}
a.stop-in:hover .node,a.stop-in:focus-visible .node{transform:translateY(-4px) scale(1.06)}
a.stop-in:active .node{transform:translateY(3px);box-shadow:0 2px 0 #003fa5}
.tag{display:grid;justify-items:center;gap:2px;background:var(--card);border-radius:14px;padding:6px 12px;box-shadow:0 3px 0 rgba(0,0,0,.12);max-width:170px;text-align:center}
.tag b{font-size:.98rem;line-height:1.15}
.st{font-size:15px;color:#c9a24a;letter-spacing:1px}
.stop.done .node{background:var(--success);box-shadow:0 6px 0 #00421f,0 10px 22px rgba(0,0,0,.2)}
.stop.locked .node{background:#a7acc0;box-shadow:0 6px 0 #6f7488;font-size:1.8rem}
.stop.locked .tag{opacity:.75}.stop.locked .st{color:var(--text-secondary);letter-spacing:0;font-size:13px;font-weight:600}
.stop.next .node{width:100px;height:100px;background:var(--highlight);color:#291800;box-shadow:0 6px 0 #7e5400,0 0 0 10px rgba(255,186,72,.35),0 12px 26px rgba(0,0,0,.22);animation:nextpulse 1.8s ease-in-out infinite}
@keyframes nextpulse{50%{box-shadow:0 6px 0 #7e5400,0 0 0 18px rgba(255,186,72,.15),0 12px 26px rgba(0,0,0,.22)}}
.bot{position:absolute;top:-52px;font-size:46px;animation:botbob 1.2s ease-in-out infinite;filter:drop-shadow(0 4px 2px rgba(0,0,0,.2))}
@keyframes botbob{50%{transform:translateY(-8px) rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.stop.next .node,.bot{animation:none}}
@media (max-width:760px){
  .map-head h2{font-size:1.5rem}.map-emoji{width:54px;height:54px;font-size:34px}.map-head p{display:none}
  .map-screen{min-height:0;padding:8px 12px 12px;gap:8px}
  .map-head{gap:10px}.map-emoji{width:44px;height:44px;font-size:28px}
  .map{min-height:0;padding:28px 16px 10px;border-width:3px}
  .trail{display:none}
  .map::after{content:'';position:absolute;left:50%;top:30px;bottom:30px;border-left:6px dotted #fff;transform:translateX(-50%);opacity:.9;z-index:0}
  .stops{position:relative;z-index:1;display:grid;gap:10px}
  .stops .stop{position:static;transform:none;justify-self:start;margin-left:4%}
  .stop.low{justify-self:end;margin:0 4% 0 0}
  .stop-in{flex-direction:row;gap:8px}
  .stop.low .stop-in{flex-direction:row-reverse}
  .node{width:56px;height:56px;border-width:4px;font-size:1.5rem;box-shadow:0 4px 0 #003fa5,0 6px 14px rgba(0,0,0,.2)}
  .stop.done .node{box-shadow:0 4px 0 #00421f,0 6px 14px rgba(0,0,0,.2)}
  .stop.locked .node{font-size:1.3rem;box-shadow:0 4px 0 #6f7488}
  .stop.next .node{width:64px;height:64px;box-shadow:0 4px 0 #7e5400,0 0 0 8px rgba(255,186,72,.35)}
  .tag{padding:4px 10px;max-width:140px}.tag b{font-size:.9rem}
  .bot{top:-30px;font-size:30px}
}

/* world picker: night-sky banner under the header, then the worlds as floating islands (look shared with /twirbo/twirbo.css) */
.picker-banner{--below:#f3eee2;margin-top:-1px}
body:has(.picker-banner){background:#f3eee2}
.picker-banner .hero-in{padding:0 16px 64px}
.picker-banner .wordmark{--n:10}
.picker-banner .lvl-note{margin:14px auto 0;color:#dfe6ff;font:500 clamp(18px,2vw,21px)/1.45 'Baloo 2',var(--font-ui);max-width:48ch}
.picker-banner .lvl-note b{color:#fff3d6}
.picker{max-width:1160px;margin:0 auto;padding:26px 16px 40px}
.jr-worlds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px;font-family:'Baloo 2',var(--font-ui)}
.jr-worlds .isl-copy{background:none;padding:6px 0 0}
.jr-worlds .isl-copy .h4{font-size:26px}
.jr-worlds .isl-copy p{font-size:16px;line-height:1.35}
@media(max-width:1000px){.jr-worlds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.jr-worlds{grid-template-columns:1fr;gap:40px}.jr-worlds .island{width:min(250px,100%)}}
.picker-banner .wordmark{text-transform:uppercase}
.jr-worlds .isl-copy .h4{display:block}