/* Pup Academy — a tablet app for a four-year-old.
   Locked down: no zoom, no selection, no overscroll, no way out. */
:root{
  --cbar-h:104px;   /* the canvas tool bar, and what the play area sits below */
  --sky-1:#8FD3EA; --sky-2:#CFEEF9; --grass:#6FBB63; --grass-2:#7BC46B;
  --ink:#20242B; --ink-2:#55606E; --paper:#FFFDF8; --line:#DCE4EC;
  --accent:#FF6B1F; --good:#3FA347; --track:#FF6B1F;
  --font:"Baloo 2","Trebuchet MS",-apple-system,system-ui,sans-serif;
  --tap:132px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%; margin:0; overscroll-behavior:none}
body{
  font-family:var(--font); color:var(--ink); background:var(--sky-2);
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
  overflow:hidden;
}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer; touch-action:manipulation}
svg{display:block}

.app{position:fixed; inset:0; display:flex; flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.screen{position:absolute; inset:0; display:flex; flex-direction:column}

/* ---------------------------------------------------------------- lookout */
.lookout{background:linear-gradient(#7FC9EE,#CBEBF8)}
.lookout .scene{position:absolute; inset:0; overflow:hidden}
.lookout .scene svg{width:100%; height:100%; object-fit:cover}
.play-btn{
  position:absolute; left:50%; bottom:9%; transform:translateX(-50%);
  width:min(34vw,220px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FF9A4D,#F0560F);
  box-shadow:0 12px 0 #B33F09, 0 22px 40px rgba(0,0,0,.28);
  display:grid; place-items:center; color:#fff;
  transition:transform .12s, box-shadow .12s;
}
.play-btn:active{transform:translateX(-50%) translateY(8px); box-shadow:0 4px 0 #B33F09, 0 10px 22px rgba(0,0,0,.28)}
.play-btn svg{width:44%; height:44%; filter:drop-shadow(0 3px 0 rgba(0,0,0,.18))}
.grown-up{position:absolute; right:10px; bottom:10px; width:56px; height:56px;
  border-radius:16px; background:rgba(255,255,255,.5); display:grid; place-items:center;
  color:#2C3138; opacity:.55}
.grown-up svg{width:26px;height:26px}

/* ---------------------------------------------------------------- mission */
.mission{background:linear-gradient(#7FC9EE,#D3EEFA)}
.mission .ground{position:absolute; left:0; right:0; bottom:0; height:26%;
  background:var(--grass-2); border-radius:50% 50% 0 0/16% 16% 0 0}
.prompt{position:relative; z-index:2; display:flex; align-items:center; gap:14px;
  margin:clamp(10px,2.4vh,26px) auto 0; padding:12px 26px 12px 12px;
  background:var(--paper); border-radius:999px; box-shadow:0 6px 0 rgba(0,0,0,.09);
  max-width:min(92vw,900px)}
.prompt-text{font-size:clamp(20px,3.6vh,34px); font-weight:700; line-height:1.15}
.say{width:60px; height:60px; flex:0 0 auto; border-radius:50%; background:var(--accent);
  color:#fff; display:grid; place-items:center}
.say:active{transform:scale(.93)}
.say-ico svg{width:30px; height:30px}
.prompt-glyph{font-size:clamp(28px,5vh,48px); font-weight:800; color:var(--track); margin-left:auto}
.prompt-glyph.small{font-size:clamp(20px,3.4vh,32px); letter-spacing:.04em}
.prompt-swatch{width:46px;height:46px;border-radius:12px;margin-left:auto;box-shadow:inset 0 0 0 3px rgba(0,0,0,.12)}
.prompt-shape{width:52px;height:52px;margin-left:auto;color:var(--track)}
.prompt-shape svg{width:100%;height:100%}
.prompt-mix{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:22px;font-weight:800}
.prompt-mix span{width:38px;height:38px;border-radius:10px}
.prompt-mix .q{display:grid;place-items:center;background:#E9EDF2;color:var(--ink-2)}
.prompt-pattern{display:flex;align-items:center;gap:7px;margin-left:auto;flex-wrap:wrap;max-width:52%}
.prompt-pattern span{width:30px;height:30px;border-radius:8px}
.prompt-pattern .q{display:grid;place-items:center;background:#E9EDF2;color:var(--ink-2);font-weight:800}

.opts{position:relative; z-index:2; flex:1; display:flex; align-items:center;
  justify-content:center; gap:clamp(12px,3vw,34px); padding:clamp(10px,3vh,30px)}
.opt{
  width:min(28vw,var(--tap)*2); max-width:260px; aspect-ratio:3/4;
  min-width:var(--tap); min-height:var(--tap);
  background:var(--paper); border-radius:28px; border:5px solid var(--line);
  display:grid; place-items:center; padding:12px;
  box-shadow:0 8px 0 rgba(0,0,0,.10);
  transition:transform .12s, opacity .3s, border-color .2s;
}
.opts.n4 .opt{width:min(21vw,200px)}
.opt:active{transform:translateY(5px); box-shadow:0 3px 0 rgba(0,0,0,.10)}
.opt .face{width:100%; height:100%; display:grid; place-items:center; color:var(--track)}
.opt .face svg{width:78%; height:78%}
.opt .glyph{font-size:min(17vh,120px); font-weight:800; line-height:1}
.opt .swatch{width:80%; height:80%; border-radius:20px}
.opt.is-out{opacity:.18; pointer-events:none; transform:scale(.9)}
.opt.is-spotlit{border-color:var(--accent); box-shadow:0 0 0 8px rgba(255,107,31,.25),0 8px 0 rgba(0,0,0,.10)}
.opt.is-right{border-color:var(--good)}
.opt.is-wrong{animation:shake .4s}
.opt.is-hit{animation:hit .6s cubic-bezier(.34,1.5,.5,1)}
.opt.is-nudge{animation:nudge .9s ease-in-out}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
@keyframes hit{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes nudge{0%,100%{transform:translateY(0)}30%{transform:translateY(-16px)}60%{transform:translateY(0)}}

.paws{position:absolute; left:0; right:0; bottom:12px; z-index:3;
  display:flex; justify-content:center; gap:14px}
.paw{width:26px; height:26px; opacity:.3}
.paw.on{opacity:1}
.paw svg{width:100%;height:100%}

.confetti{position:absolute; width:11px; height:11px; border-radius:3px; z-index:9; pointer-events:none}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* ------------------------------------------------------------ celebration */
.cheer{position:absolute; inset:0; z-index:8; display:grid; place-items:center;
  background:rgba(255,253,248,.9); text-align:center; padding:24px}
.cheer h2{font-size:clamp(30px,7vh,64px); margin:0 0 6px}
.cheer p{font-size:clamp(16px,2.6vh,22px); color:var(--ink-2); margin:0 0 22px}
.cheer .big-btn{background:var(--accent); color:#fff; border-radius:999px;
  padding:18px 44px; font-size:clamp(18px,3vh,26px); font-weight:800;
  box-shadow:0 8px 0 #B33F09}
.cheer .big-btn:active{transform:translateY(5px); box-shadow:0 3px 0 #B33F09}
.stickers{display:flex; gap:10px; justify-content:center; margin-bottom:20px; flex-wrap:wrap}
.stickers .s{width:56px;height:56px}

/* ------------------------------------------------------------- grown-up */
.grown{background:#EEF2F6; color:#1B2028; overflow:auto; -webkit-overflow-scrolling:touch;
  font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif; user-select:text}
.gbar{position:sticky; top:0; z-index:3; background:#fff; border-bottom:1px solid #DCE4EC;
  display:flex; align-items:center; gap:16px; padding:10px 16px; flex-wrap:wrap}
.gback{font-weight:600; color:#2D6CDF}
.gtabs{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap}
.gtab{padding:8px 15px; border-radius:999px; font-size:14px; font-weight:600; color:#55606E}
.gtab.on{background:#FF6B1F; color:#fff}
.gbody{padding:18px 16px 60px; max-width:940px; margin:0 auto}
.gsec{margin-bottom:26px}
.gsec h3{font-size:15px; text-transform:uppercase; letter-spacing:.07em; color:#8894A4; margin:0 0 10px}
.gnote{font-size:14px; color:#55606E; line-height:1.55; max-width:64ch; margin:0 0 18px}
.gempty{font-size:15px; color:#8894A4; padding:26px 0}

.gstats{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:1px;
  background:#DCE4EC; border:1px solid #DCE4EC; border-radius:12px; overflow:hidden; margin-bottom:26px}
.gstat{background:#fff; padding:12px 14px}
.gstat b{display:block; font-size:26px; line-height:1; font-variant-numeric:tabular-nums}
.gstat span{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#8894A4}

.mgrid{display:flex; flex-wrap:wrap; gap:6px}
.mcell{width:38px; height:38px; border-radius:9px; display:grid; place-items:center;
  font-size:15px; font-weight:700; background:#E4EAF0; color:#8894A4; border:2px solid transparent}
.mcell.solid{background:#D6F2E0; color:#12794C; border-color:#7ED4A6}
.mcell.shaky{background:#FDEFD3; color:#8A5B00; border-color:#F0C775}
.mcell.weak{background:#FBDDD9; color:#9A2A20; border-color:#EFA69D}
.mcell.new{background:#E8EDF3; color:#55606E}
.mcell .mini svg{width:20px; height:20px}
.mcell .dot{width:20px; height:20px; border-radius:50%; display:block}

.gtable{width:100%; border-collapse:collapse; font-size:14px; background:#fff;
  border:1px solid #DCE4EC; border-radius:10px; overflow:hidden}
.gtable th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
  color:#8894A4; padding:9px 12px; border-bottom:1px solid #DCE4EC; font-weight:600}
.gtable td{padding:9px 12px; border-bottom:1px solid #EEF2F6; font-variant-numeric:tabular-nums}

.gcards{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.gcard{background:#fff; border:1px solid #DCE4EC; border-radius:12px; padding:15px}
.gcard h4{margin:0 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:#8894A4}
.gcard b{display:block; font-size:30px; line-height:1.05; font-variant-numeric:tabular-nums}
.gcard span{font-size:12.5px; color:#55606E; display:block; margin-top:5px; line-height:1.45}

.slots{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.slot{display:flex; align-items:center; gap:11px; background:#fff; border:1px solid #DCE4EC;
  border-radius:12px; padding:9px 11px; cursor:pointer}
.slot-prev{width:46px; height:46px; flex:0 0 auto; border-radius:9px; background:#EEF2F6;
  display:grid; place-items:center; color:#8894A4; font-size:20px; overflow:hidden}
.slot-prev.filled{background:#fff; box-shadow:inset 0 0 0 2px #7ED4A6}
.slot-prev img{width:100%; height:100%; object-fit:contain}
.slot-label{flex:1; font-size:13.5px; text-transform:capitalize}
.slot-x{color:#B0BAC6; font-size:15px; padding:5px}

.growrow{display:flex; gap:10px; flex-wrap:wrap}
.gbtn{background:#fff; border:1px solid #C7D0DA; border-radius:10px; padding:11px 17px;
  font-size:14px; font-weight:600; color:#2C3138; cursor:pointer}
.gbtn.danger{color:#B3261E; border-color:#E9B4AE}
.field{display:block; margin-bottom:14px; max-width:400px}
.field span{display:block; font-size:13px; color:#55606E; margin-bottom:5px}
.field input[type=text]{width:100%; padding:10px 12px; border:1px solid #C7D0DA; border-radius:9px; font-size:15px}
.field input[type=range]{width:100%}

/* --------------------------------------------------------------- tracing */
.trace-board{position:relative; z-index:2; flex:1; display:grid; place-items:center; padding:8px}
.trace-svg{width:min(74vh,74vw); height:min(74vh,74vw); touch-action:none; cursor:crosshair}
.trace-svg circle.is-nudge{animation:nudge .9s ease-in-out 2}

/* ------------------------------------------------------ making & mashing */
.cbar{position:relative; z-index:3; min-height:var(--cbar-h); display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 14px; background:rgba(255,253,248,.94); box-shadow:0 3px 0 rgba(0,0,0,.06)}
.cbar-label{font-weight:700; font-size:17px; margin-right:auto}
.cdone{background:var(--accent); color:#fff; border-radius:999px; padding:20px 34px;
  min-height:76px; font-weight:800; font-size:21px; box-shadow:0 5px 0 #B33F09}
.cdone:active{transform:translateY(3px); box-shadow:0 2px 0 #B33F09}
.cbtn{background:#fff; border:2px solid #DCE4EC; border-radius:14px; padding:18px 24px;
  min-height:72px; font-size:19px; font-weight:700}
.sws{display:flex; gap:7px; flex-wrap:wrap}
.sw{width:56px; height:56px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(0,0,0,.14)}
.sw.on{outline:4px solid var(--accent); outline-offset:2px}
.sizes{display:flex; gap:6px}
.bsize{width:56px; height:56px; border-radius:14px; background:#fff; display:grid; place-items:center;
  border:2px solid #DCE4EC}
.bsize.on{border-color:var(--accent)}
.bsize i{display:block; background:#2C3138; border-radius:50%}
.paint-wrap{position:absolute; inset:var(--cbar-h) 0 0 0; background:#fff}
.paint{width:100%; height:100%; display:block; touch-action:none}

.bubbles{position:absolute; inset:var(--cbar-h) 0 0 0; overflow:hidden}
.bub{position:absolute; bottom:-160px; border-radius:50%; border:0;
  box-shadow:inset -8px -10px 20px rgba(0,0,0,.10), 0 3px 10px rgba(0,0,0,.10); touch-action:none}
.bub.gone{transition:transform .2s, opacity .2s; transform:scale(1.5); opacity:0}

.scene-wrap{position:absolute; inset:var(--cbar-h) 0 0 0; display:flex; flex-direction:column}
.scene-board{position:relative; flex:1; background:linear-gradient(#BEE3F2 62%,#7BC46B 62%); overflow:hidden}
.placed{position:absolute; width:16%; aspect-ratio:1; touch-action:none; cursor:grab}
.placed svg{width:100%; height:100%; filter:drop-shadow(0 3px 4px rgba(0,0,0,.22))}
.placed.lift{transform:scale(1.1); z-index:5}
/* Wraps rather than scrolls sideways: ten stickers do not fit across a portrait
   tablet, and a four-year-old will never think to swipe a tray to find the rest. */
.tray{display:flex; flex-wrap:wrap; justify-content:center; align-content:flex-start;
  gap:8px; padding:9px 12px; background:rgba(255,253,248,.95);
  max-height:34vh; overflow-y:auto}
.tray-item{width:76px; height:76px; flex:0 0 auto; background:#fff; border-radius:16px;
  border:2px solid #DCE4EC; padding:6px}
.tray-item svg{width:100%; height:100%}

.colourin-wrap{position:absolute; inset:var(--cbar-h) 0 0 0; display:grid; place-items:center; background:#FFFDF8}
.colourin{width:min(94vw,900px); height:auto; touch-action:manipulation}

/* ------------------------------------------------------- attention games */
.centre{position:relative; z-index:2; flex:1; display:grid; place-items:center; padding:14px}
.light{width:min(42vh,42vw); aspect-ratio:1; border-radius:50%; background:#C7D0DA;
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.10), 0 10px 0 rgba(0,0,0,.12); display:grid; place-items:center}
.light svg{width:52%; height:52%}
.light.go{background:#3FA347} .light.no{background:#D6342A}
.light.hit{animation:hit .5s} .light.oops{animation:shake .4s}

.ring{position:relative; width:min(44vh,44vw); aspect-ratio:1; display:grid; place-items:center; touch-action:none}
.ring-fill{--p:0; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p)*360deg), #DCE4EC 0)}
.ring-fill::after{content:""; position:absolute; inset:14px; border-radius:50%; background:#FFFDF8}
.ring-badge{position:relative; z-index:1; width:52%}
.ring-badge svg{width:100%; height:auto}
.ring.holding{transform:scale(1.04)}

.floor{display:flex; gap:min(4vw,28px); align-items:flex-end}
.dancer{width:min(14vw,110px); aspect-ratio:1; border-radius:26px; box-shadow:0 8px 0 rgba(0,0,0,.14)}
.floor.dancing .dancer{animation:bop .68s ease-in-out infinite; animation-delay:var(--d)}
.floor.frozen .dancer{filter:saturate(.45)}
.floor.wiggle{animation:shake .4s}
@keyframes bop{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-22px) scaleY(1.06)}}

.watch{display:grid; grid-template-columns:repeat(4,1fr); gap:min(2vw,16px);
  width:min(88vw,760px)}
.wcell{aspect-ratio:4/3; border-radius:14px; background:#B9C6D2; box-shadow:inset 0 -6px 0 rgba(0,0,0,.10)}
.wcell.lit{background:#FFD24A; box-shadow:inset 0 -6px 0 rgba(0,0,0,.10), 0 0 0 6px rgba(255,210,74,.35)}

/* -------------------------------------------------------------- dragging */
.drag-board{position:relative; z-index:2; flex:1; display:flex; flex-direction:column;
  justify-content:space-around; padding:10px 16px 20px; gap:12px}
.slots-row,.pieces-row{display:flex; justify-content:center; gap:min(4vw,30px); flex-wrap:wrap}
.slot-target{width:min(20vw,150px); aspect-ratio:1; min-width:110px; background:rgba(255,255,255,.55);
  border-radius:22px; display:grid; place-items:center; padding:10px}
.slot-target.filled{background:rgba(255,255,255,.95); box-shadow:0 0 0 5px var(--track)}
.slot-target svg{width:100%; height:100%}
.slot-target .big{font-size:min(11vh,72px); font-weight:800; color:var(--track)}
.slot-target .bin{width:100%; height:100%; display:grid; place-items:center}
.binswatch{width:60%; aspect-ratio:1; border-radius:16px; display:block}
.piece{width:min(18vw,132px); aspect-ratio:1; min-width:100px; background:#FFFDF8; border-radius:22px;
  display:grid; place-items:center; padding:10px; box-shadow:0 7px 0 rgba(0,0,0,.12);
  touch-action:none; cursor:grab; z-index:6}
.piece svg{width:100%; height:100%}
.piece .big{font-size:min(10vh,64px); font-weight:800; color:var(--track)}
.piece.lift{box-shadow:0 16px 24px rgba(0,0,0,.24); z-index:20}

/* ------------------------------------------------------------- sequences */
.pup-row{display:flex; gap:min(3vw,22px); flex-wrap:wrap; justify-content:center; max-width:92vw}
.countpup{width:min(15vw,120px); min-width:84px; background:none; padding:0}
.countpup svg{width:100%; height:auto}
.countpup.counted{filter:saturate(.4) brightness(1.1); transform:scale(.92)}
.loader{display:flex; flex-direction:column; align-items:center; gap:14px}
.truck{width:min(60vw,420px); height:min(20vh,150px); background:#F2B01E; border-radius:18px;
  box-shadow:0 8px 0 #C1860B; padding:10px; overflow:hidden}
.truck-bed{display:flex; flex-wrap:wrap; gap:6px; align-content:flex-end; height:100%}
.loglog{width:36px; height:22px; border-radius:6px; background:#8B5E3C; box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.load-count{font-size:min(9vh,60px); font-weight:800; color:var(--track); line-height:1}
.load-ctrls{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.log-btn{background:#8B5E3C; color:#fff; border-radius:20px; padding:26px 46px; font-size:26px;
  min-height:96px; min-width:150px; font-weight:800; box-shadow:0 6px 0 #5E3F27}
.log-btn:active{transform:translateY(4px); box-shadow:0 2px 0 #5E3F27}
.plank-row{display:flex; gap:min(3vw,20px); flex-wrap:wrap; justify-content:center}
.plank{width:min(17vw,130px); aspect-ratio:1; min-width:96px; background:#C9A227; color:#fff;
  border-radius:16px; font-size:min(9vh,58px); font-weight:800; box-shadow:0 7px 0 #93741A}
.plank.laid{background:#3FA347; box-shadow:0 7px 0 #2A7331}
.pads{display:grid; grid-template-columns:1fr 1fr; gap:min(3vw,22px)}
.pad{width:min(22vh,180px); aspect-ratio:1; border-radius:28px; opacity:.55;
  box-shadow:0 8px 0 rgba(0,0,0,.18); transition:opacity .12s, transform .12s}
.pad.lit{opacity:1; transform:scale(1.06)}

/* ---------------------------------------------------------------- memory */
.pairs{display:grid; grid-template-columns:repeat(3,1fr); gap:min(2.5vw,18px)}
.pcard{position:relative; width:min(19vw,150px); aspect-ratio:3/4; min-width:96px}
.pback,.pface{position:absolute; inset:0; border-radius:18px; display:grid; place-items:center;
  backface-visibility:hidden; transition:transform .3s}
.pback{background:#2D6CDF; box-shadow:0 6px 0 rgba(0,0,0,.16)}
.pface{background:#FFFDF8; transform:rotateY(180deg); box-shadow:0 6px 0 rgba(0,0,0,.12); padding:10px}
.pface svg{width:80%; height:auto}
.pcard.up .pback{transform:rotateY(180deg)}
.pcard.up .pface{transform:rotateY(0)}
.pcard.gone{opacity:.25; pointer-events:none}
.cups{display:flex; gap:min(5vw,40px); align-items:flex-end}
.cup{position:relative; width:min(20vw,160px); min-width:96px}
.cup-body{width:100%; aspect-ratio:1/1.15; background:#E2372B; border-radius:14px 14px 40% 40%;
  box-shadow:0 8px 0 #A9251C}
.cup.swap{animation:swap .5s ease-in-out}
.cup.done .cup-body{opacity:.6}
.bone{position:absolute; bottom:-6px; left:12%; width:76%}
@keyframes swap{0%,100%{transform:translateY(0)}50%{transform:translateY(-46px)}}

/* ------------------------------------------------- user-supplied artwork */
.user-art{display:block; pointer-events:none; -webkit-user-drag:none}
.scene-img{position:absolute; inset:0; background-position:center;
  background-repeat:no-repeat; background-size:contain}
.scene-img.cover{background-size:cover}
.scene-img.dim{opacity:.55}
.wordmark{position:absolute; top:4%; left:50%; transform:translateX(-50%);
  max-width:52%; max-height:16%; object-fit:contain; pointer-events:none}
.opt .user-art, .countpup .user-art, .pface .user-art{width:100%; height:100%}