/* ===================== Arcade scenes ===================== */
.arcade{position:relative;height:370px;border-radius:16px;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;cursor:crosshair}
.arcade .target{position:absolute;transform:translate(-50%,-50%);min-width:92px;max-width:46%;padding:10px 12px;border-radius:14px;background:#fff;border:3px solid #7c3aed;font-weight:800;font-size:1.15rem;box-shadow:0 4px 10px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;gap:4px;line-height:1.2;color:#1f2340;cursor:pointer}
.arcade .target .tlabel{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap}
.arcade .target:hover{filter:brightness(1.05)}
.arcade .target.hit.ok{background:#dcfce7;border-color:#16a34a;animation:hitok .6s ease-out}
.arcade .target.hit.bad{background:#fee2e2;border-color:#dc2626;animation:shake .5s}
.arcade .target.reveal{border-color:#16a34a;border-style:dashed;box-shadow:0 0 0 6px rgba(22,163,74,.35)}
.arcade.frozen .target,.arcade.frozen .clouds,.arcade.frozen .ripple{animation-play-state:paused!important}
.arcade.frozen .beetle .legs{animation-play-state:paused!important}
.arcade .target .beetle .legs{animation:legs .5s ease-in-out infinite alternate;transform-origin:50% 60%}
@keyframes legs{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes hitok{0%{transform:translate(-50%,-50%) scale(1)}40%{transform:translate(-50%,-50%) scale(1.25)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes shake{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(-56%,-50%) rotate(-4deg)}75%{transform:translate(-44%,-50%) rotate(4deg)}}
.arcade .launcher{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);font-size:2.6rem;line-height:1;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.proj{position:absolute;left:0;top:0;pointer-events:none;z-index:5;will-change:transform}
.proj.fly{transition:transform .4s cubic-bezier(.3,.6,.6,1)}
.proj.arrow{width:64px;height:8px;margin-left:-58px;margin-top:-4px}
.proj.arrow .shaft{position:absolute;left:0;top:2px;width:56px;height:4px;background:#78350f;border-radius:2px}
.proj.arrow .shaft::before{content:"";position:absolute;left:0;top:-4px;width:14px;height:12px;background:#ef4444;clip-path:polygon(0 0,100% 50%,0 100%,30% 50%)}
.proj.arrow .tip{position:absolute;right:0;top:-3px;width:14px;height:14px;background:#4b5563;clip-path:polygon(0 0,100% 50%,0 100%)}
.proj.ball{width:36px;height:36px;margin-left:-18px;margin-top:-18px;font-size:1.8rem;line-height:36px;text-align:center}
.proj.dart{width:64px;height:16px;margin-left:-60px;margin-top:-8px;line-height:0}
.proj.ball .ballin{display:inline-block;animation:arc .4s ease-out}
.launcher.dartlauncher{line-height:0;transform:translateX(-50%) rotate(-90deg);bottom:14px}
@keyframes arc{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-46px) rotate(180deg)}100%{transform:translateY(0) rotate(360deg)}}
.missnote{position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:1.1rem;color:#fff;background:rgba(31,35,64,.85);padding:4px 12px;border-radius:10px;pointer-events:none;animation:missnote .9s ease-out forwards;z-index:6;white-space:nowrap}
@keyframes missnote{0%{opacity:0;transform:translate(-50%,-30%)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-140%)}}
.arcade .rider{position:absolute;pointer-events:none;line-height:0}

/* archery */
.scene-archery{background:linear-gradient(#bfe6ff 0,#e6f6ff 60%,#9be39b 60%,#6fcf6f 100%)}
.scene-archery .ground{position:absolute;left:0;right:0;bottom:0;height:40%;background:repeating-linear-gradient(90deg,transparent 0 30px,rgba(255,255,255,.12) 30px 32px)}
.scene-archery .target.bullseye{background:radial-gradient(circle,#fff 0 34%,#ef4444 34% 50%,#fff 50% 66%,#ef4444 66% 82%,#fff 82%);border-color:#1f2340;border-radius:50%;min-width:104px;min-height:104px;padding:8px;animation:bob 2.6s ease-in-out infinite}
.scene-archery .target.bullseye .tlabel{background:rgba(255,255,255,.92);border-radius:10px;padding:4px 8px}
.scene-archery .target.bullseye::after{content:"";position:absolute;left:50%;top:100%;width:8px;height:40px;margin-left:-4px;background:#8b5a2b;z-index:-1}
.scene-archery .rider{top:-14px;right:-8px;transform:rotate(30deg)}
@keyframes bob{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-10px)}}

/* cans */
.scene-cans{background:linear-gradient(#fde68a,#fbbf24 55%,#b45309 55%,#92400e 100%)}
.scene-cans .shelf{position:absolute;left:8%;right:8%;height:10px;background:#78350f;border-radius:4px;box-shadow:0 4px 0 #451a03}
.scene-cans .shelf.s1{top:31%}.scene-cans .shelf.s2{top:65%}
.scene-cans .target.can{border-radius:10px 10px 8px 8px;background:linear-gradient(90deg,#94a3b8,#f1f5f9 40%,#cbd5e1);border-color:#475569;min-height:70px;transform:translate(-50%,-72%);flex-direction:column;gap:0;padding-top:4px}
.scene-cans .target.can::before{content:"";position:absolute;left:6px;right:6px;top:4px;height:6px;border-radius:3px;background:#64748b}
.scene-cans .target.can .tlabel{background:#fff;border-radius:8px;padding:3px 8px;border:2px solid #7c3aed}
.scene-cans .canbug{line-height:0;margin-top:6px;margin-bottom:2px}
.scene-cans .target.can.hit{animation:topple .7s ease-in forwards}
@keyframes topple{0%{transform:translate(-50%,-72%) rotate(0)}100%{transform:translate(-20%,-30%) rotate(75deg)}}
.scene-cans .target.can.hit.ok{background:linear-gradient(90deg,#86efac,#dcfce7 40%,#bbf7d0)}

/* balloons */
.scene-balloons{background:linear-gradient(#7dd3fc,#e0f2fe)}
.scene-balloons .clouds{position:absolute;top:8%;left:-20%;font-size:3rem;opacity:.85;animation:drift 22s linear infinite;pointer-events:none}
.scene-balloons .clouds.c2{top:45%;animation-duration:31s;animation-delay:-12s;font-size:2.2rem}
@keyframes drift{from{left:-20%}to{left:110%}}
.scene-balloons .target.balloon{border-radius:50% 50% 50% 50%/45% 45% 55% 55%;background:radial-gradient(circle at 35% 30%,#fff 0,var(--bc,#ef4444) 28%,var(--bc,#ef4444) 100%);border-color:rgba(0,0,0,.25);min-width:96px;min-height:110px;animation:rise 20s linear infinite;top:105%}
.scene-balloons .target.balloon .tlabel{background:rgba(255,255,255,.95);border-radius:10px;padding:4px 8px}
.scene-balloons .target.balloon .string{position:absolute;left:50%;top:100%;width:2px;height:30px;background:#475569}
.scene-balloons .target.balloon .hanger{position:absolute;left:50%;top:calc(100% + 28px);transform:translateX(-50%);line-height:0;animation:sway 1.8s ease-in-out infinite alternate;transform-origin:top center}
@keyframes sway{from{transform:translateX(-50%) rotate(-8deg)}to{transform:translateX(-50%) rotate(8deg)}}
@keyframes rise{from{top:112%}to{top:-30%}}
.scene-balloons .target.balloon.hit.ok{background:#dcfce7}
.scene-balloons .target.balloon.hit.bad{opacity:.55}

/* beetle burrows */
.scene-burrows{background:linear-gradient(#bbf7d0,#86efac);cursor:default}
.scene-burrows .grass{position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(120deg,transparent 0 22px,rgba(22,101,52,.08) 22px 24px)}
.scene-burrows .hole{position:absolute;width:150px;height:104px;transform:translate(-50%,-50%);border-radius:50%/40%;background:#3f2a14;box-shadow:inset 0 8px 14px rgba(0,0,0,.5);overflow:hidden}
.scene-burrows .target.mole{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:40px 40px 14px 14px;background:#fef3c7;border-color:#92400e;min-height:88px;padding:2px 10px 6px;flex-direction:column;gap:0;animation:mole 4.6s ease-in-out infinite;animation-fill-mode:both}
.scene-burrows .target.mole .face{line-height:0}
.scene-burrows .target.mole .tlabel{font-size:1.05rem}
@keyframes mole{0%{transform:translate(-50%,-50%) translateY(110%)}14%{transform:translate(-50%,-50%) translateY(0)}54%{transform:translate(-50%,-50%) translateY(0)}66%{transform:translate(-50%,-50%) translateY(110%)}100%{transform:translate(-50%,-50%) translateY(110%)}}
.scene-burrows.frozen .target.mole{animation:none!important;transform:translate(-50%,-50%)}
.scene-burrows .hammer{position:absolute;font-size:2.6rem;transform-origin:bottom right;animation:bonk .3s ease-in forwards;pointer-events:none;z-index:6}
@keyframes bonk{0%{transform:rotate(-70deg) translate(20px,-20px)}100%{transform:rotate(10deg)}}

/* beetle race */
.scene-race{background:linear-gradient(#fef3c7,#fde68a);cursor:default}
.scene-race .track{position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,#d6a15b 0 2px,transparent 2px 24%);opacity:.5}
.scene-race .flag{position:absolute;right:8px;top:6px;font-size:1.8rem}
.scene-race .target.racer{left:-30%;transform:translate(-50%,-50%);animation:crawl linear infinite;background:transparent;border:0;box-shadow:none;padding:0;min-width:0;flex-direction:column;gap:0}
.scene-race .target.racer .bug{line-height:0;transform:rotate(90deg);filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.scene-race .target.racer .tlabel{background:#fff;border:3px solid #7c3aed;border-radius:12px;padding:4px 10px;margin-bottom:-6px;order:-1;box-shadow:0 3px 8px rgba(0,0,0,.2)}
@keyframes crawl{from{left:-18%}to{left:118%}}
.scene-race.frozen .target.racer{animation-play-state:paused}
.scene-race .target.racer.hit .tlabel{animation:hitok .6s}
.scene-race .target.racer.hit.ok .tlabel{background:#dcfce7;border-color:#16a34a}
.scene-race .target.racer.hit.bad .tlabel{background:#fee2e2;border-color:#dc2626}
.scene-race .target.racer.reveal .tlabel{border-color:#16a34a;border-style:dashed;box-shadow:0 0 0 6px rgba(22,163,74,.35)}
.scene-race .target.racer.reveal{box-shadow:none}

/* catch the leaf: one lane per answer, the basket snaps between lanes, leaves are placed by arcade.js */
.scene-catch{background:linear-gradient(#a5f3fc,#dbeafe 70%,#86efac 70%,#4ade80);cursor:pointer}
.scene-catch .lanes{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;pointer-events:none}
.scene-catch .lane{flex:1;border-left:2px dashed rgba(255,255,255,.6);transition:background .15s}
.scene-catch .lane:first-child{border-left:0}
.scene-catch .lane.on{background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.5) 60%,rgba(250,204,21,.5))}
.scene-catch .basket{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);transition:left .12s ease-out;font-size:3.2rem;line-height:1;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3));z-index:2}
.scene-catch .target.faller{top:-40%;transform:translateX(-50%);background:transparent;border:0;box-shadow:none;padding:0;min-width:0;flex-direction:column;gap:0;pointer-events:none;opacity:1;z-index:1}
.scene-catch .target.faller:disabled{opacity:1}
.scene-catch .target.faller .leaf{font-size:2.2rem;line-height:1;animation:leafsway 1.6s ease-in-out infinite alternate}
.scene-catch .target.faller .tlabel{background:#fff;border:3px solid #7c3aed;border-radius:12px;padding:3px 7px;box-shadow:0 3px 8px rgba(0,0,0,.2);white-space:normal;text-align:center;max-width:100%;line-height:1.15}
.scene-catch .target.faller .tlabel svg{max-width:100%;height:auto}
.scene-catch .rider{position:static;margin-top:-4px}
@keyframes leafsway{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.scene-catch .target.faller.hit.ok .tlabel{background:#dcfce7;border-color:#16a34a}
.scene-catch .target.faller.hit.bad .tlabel{background:#fee2e2;border-color:#dc2626}
.scene-catch .target.faller.reveal .tlabel{border-color:#16a34a;border-style:dashed;box-shadow:0 0 0 6px rgba(22,163,74,.35)}
.scene-catch .target.faller.reveal,.scene-catch .target.faller.hit{box-shadow:none;animation:none}
.scene-catch .target.faller.hit .tlabel{animation:catchpop .45s ease-out}
@keyframes catchpop{40%{transform:scale(1.25)}100%{transform:scale(1)}}
.scene-catch .hint-drag{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);font-size:.85rem;font-weight:800;color:#1f2340;background:rgba(255,255,255,.75);padding:2px 10px;border-radius:99px;pointer-events:none;white-space:nowrap;transition:opacity .3s;z-index:2}
.scene-catch .hint-drag.gone{opacity:0}

/* lily pond */
.scene-pond{background:radial-gradient(circle at 30% 30%,#7dd3fc,#0ea5e9 70%,#0369a1);cursor:default}
.scene-pond .ripple{position:absolute;border:2px solid rgba(255,255,255,.5);border-radius:50%;width:60px;height:60px;animation:ripple 4s linear infinite;pointer-events:none}
.scene-pond .ripple.r1{left:15%;top:75%}.scene-pond .ripple.r2{left:80%;top:40%;animation-delay:-2s}
@keyframes ripple{from{transform:scale(.3);opacity:.8}to{transform:scale(2.2);opacity:0}}
.scene-pond .target.pad{border-radius:50%;background:radial-gradient(circle at 40% 35%,#86efac,#16a34a 70%);border-color:#14532d;min-width:110px;min-height:96px;animation:padfloat 3s ease-in-out infinite}
.scene-pond .target.pad::before{content:"";position:absolute;right:14px;top:6px;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:26px solid #0ea5e9;transform:rotate(35deg);opacity:.9}
.scene-pond .target.pad .tlabel{background:rgba(255,255,255,.95);border-radius:10px;padding:4px 8px}
@keyframes padfloat{0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}50%{transform:translate(-50%,-50%) translateY(-6px) rotate(2deg)}}
.scene-pond .hopper{position:absolute;left:50%;top:90%;transform:translate(-50%,-50%);line-height:0;z-index:4;pointer-events:none;transition:left .6s cubic-bezier(.3,.9,.6,1),top .6s cubic-bezier(.3,.9,.6,1)}
.scene-pond .hopper.hop .beetle{animation:hopjump .6s ease-out}
@keyframes hopjump{0%{transform:scale(1)}50%{transform:scale(1.7) translateY(-30px)}100%{transform:scale(1)}}

@media (max-width:600px){
  .arcade{height:340px}
  .arcade .target{min-width:80px;font-size:1rem;padding:8px}
  .scene-archery .target.bullseye{min-width:94px;min-height:94px}
  .scene-burrows .hole{width:132px}
  .scene-pond .target.pad{min-width:96px;min-height:84px}
}

/* ===================== Intro animations ===================== */
.intro{max-width:640px;margin:0 auto}
.intro .stage{background:#fff;border-radius:16px;min-height:220px;display:flex;align-items:center;justify-content:center;padding:14px;margin:12px 0;border:3px solid #e2dcff}
.intro .stage svg{max-width:100%;height:auto}
.intro .caption{font-size:1.2rem;font-weight:700;min-height:3.2em;text-align:center}
.intro .dots{text-align:center;margin:8px 0;letter-spacing:6px;color:#c4b5fd;font-size:1.3rem}
.intro .dots .on{color:#7c3aed}
.ai{opacity:0;animation:ai .55s ease-out forwards;transform-box:fill-box;transform-origin:center}
@keyframes ai{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.ais{opacity:0;animation:ais .6s ease-out forwards;transform-box:fill-box;transform-origin:center}
@keyframes ais{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
.aid{stroke-dasharray:600;stroke-dashoffset:600;animation:aid 1.1s ease-out forwards}
@keyframes aid{to{stroke-dashoffset:0}}
.aiw{animation:wiggle 1.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes wiggle{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.aim{animation:moveR 2.4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes moveR{from{transform:translateX(0)}to{transform:translateX(var(--dx,120px))}}
.aig{animation:grow 1.6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:left center}
@keyframes grow{from{transform:scaleX(.2)}to{transform:scaleX(1)}}

/* ===================== Hands-on interactions ===================== */
.pies{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:center}
.pies svg{max-width:100%;height:auto}
.slice{cursor:pointer}
.slice:hover{opacity:.8}
.tapgrid rect{cursor:pointer}
.frogline{position:relative;display:inline-block}
.frogline svg{max-width:100%;height:auto;display:block}
.frog{position:absolute;top:-6px;font-size:2rem;transition:left .5s cubic-bezier(.3,1.5,.6,1);transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.frogline .tapzone{cursor:pointer}

/* ===================== Beetle mascot ===================== */
.mascot-beetle{line-height:0;animation:mbob 2.4s ease-in-out infinite}
@keyframes mbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.mascot-beetle .beetle .legs{animation:legs .6s ease-in-out infinite alternate;transform-origin:50% 60%}
.beetle-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;line-height:0;margin:6px 0}