/* EXTRAS — see extras.js */

/* hold-to-activate: a ring fills round the button while the finger is down */
.hold-btn{position:relative;overflow:visible}
.hold-ring{position:absolute;inset:-5px;border-radius:50%;pointer-events:none;
  background:conic-gradient(var(--sun) 0%,transparent 0);opacity:0;transition:opacity .15s}
.hold-btn.holding .hold-ring{opacity:1;animation:holdFill .8s linear forwards}
@keyframes holdFill{from{background:conic-gradient(var(--sun) 0%,transparent 0)}to{background:conic-gradient(var(--sun) 100%,transparent 0)}}
.hold-btn.held{animation:holdPop .5s var(--spring)}
@keyframes holdPop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
/* the ring sits behind the round button's own face */
.hold-btn::before{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;z-index:0}
.hold-btn>*{position:relative;z-index:1}
.hold-btn .hold-ring{z-index:0}
#scGame #gameSkip{pointer-events:auto;position:fixed;top:calc(var(--pad-top) + 10px);right:70px;width:46px;height:46px;border-radius:50%;border:0;
  background:#fff;box-shadow:var(--lift-2),var(--gloss);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;
  -webkit-tap-highlight-color:transparent}
#scGame #gameSkip svg{width:26px;height:26px;display:block}

/* hide and seek */
#scSeek{padding:0;overflow:hidden;background:linear-gradient(180deg,#BFE9FB 0%,#E4F5FF 46%,#8CC96A 46.5%,#6FB350 100%)}
.hs-sky{position:absolute;inset:0}
.hs-sun{position:absolute;right:8%;top:5%;width:16%;aspect-ratio:1;border-radius:50%;background:#FFCE3D;box-shadow:0 0 0 8px rgba(255,206,61,.3),0 0 28px rgba(255,206,61,.7)}
.hs-grass{position:absolute;left:-10%;right:-10%;top:40%;height:16%;border-radius:50%;background:#9AD27A}
.hs-spots{position:absolute;inset:0}
.hs-spot{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;z-index:3;
  transition:transform .2s var(--spring)}
.hs-spot svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(3px 5px 5px rgba(40,20,4,.22))}
.hs-spot:active{transform:scale(1.05)}
.hs-spot.hs-shake{animation:hsShake .5s ease-out}
@keyframes hsShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}65%{transform:rotate(2.5deg)}}
.hs-pip{position:absolute;left:50%;top:60%;width:22%;transform:translate(-50%,0);z-index:2;transition:left .9s ease-in-out,top .9s ease-in-out,opacity .4s,transform .5s var(--spring)}
.hs-pip .char{width:100%}
.hs-pip.going{z-index:2}
.hs-pip.hidden{opacity:.0;transform:translate(-50%,10%) scale(.8)}
.hs-pip.hidden::after{content:'';position:absolute;left:62%;top:-4%;width:14%;aspect-ratio:.5;border-radius:50% 50% 0 0;background:#4FC7C0;opacity:.9;animation:hsFeather 1.6s ease-in-out infinite}
@keyframes hsFeather{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
.hs-pip.found{opacity:1;z-index:6;transform:translate(-50%,-30%) scale(1.15)}
.hs-mo{position:absolute;left:4%;bottom:6%;width:30%;z-index:4}
.hs-mo .char{width:100%}
.hs-say{position:absolute;left:31%;right:3%;bottom:12%;z-index:9;background:#FFF8EC;border-radius:14px;padding:9px 14px;color:#5A4636;
  font:800 clamp(14px,3.9vw,18px)/1.35 var(--font);box-shadow:0 6px 16px rgba(10,30,60,.3);opacity:0;transform:translateY(8px) scale(.9);
  transform-origin:8% 100%;transition:all .34s var(--spring);pointer-events:none}
.hs-say.on{opacity:1;transform:none}
.hs-say.her{background:#FFE6EF;color:#8E3B5E}
.hs-say::after{content:'';position:absolute;left:7%;top:100%;width:0;height:0;border:10px solid transparent;border-top-color:#FFF8EC}
.hs-say.her::after{border-top-color:#FFE6EF}
.hs-stars{position:absolute;left:50%;top:calc(var(--pad-top) + 16px);transform:translateX(-50%);display:flex;gap:9px;z-index:9}
.hs-stars i{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 3px rgba(160,140,110,.3)}
.hs-stars i.lit{background:var(--sun);box-shadow:inset 0 0 0 3px #E2A81F}

/* the visit to the room: a way back to the games, only during a visit */
#visitBack{display:none;position:fixed;left:50%;bottom:calc(var(--pad-bottom,0px) + 14px);transform:translateX(-50%);z-index:30;
  font:inherit;font-size:clamp(15px,4.2vw,19px);font-weight:800;color:var(--ink);padding:12px 22px;cursor:pointer}
#visitBack.on{display:block}

/* E-INK TAP SLOP. On the e-ink tablet a tap registers late, so a moving
   piece has moved on by the time the finger lands. Every tappable piece in
   a game gets an invisible margin round it — the drawing stays the same
   size, the finger has 16px more on every side. */
#gameStage .tap-slop::after{content:'';position:absolute;inset:-16px;border-radius:28px}

/* PIP'S CHECK — a scene, not a form. A signpost in the garden with Pip on it;
   the choices are painted wooden tiles with their own colour round the edge. */
#scCheck{background:linear-gradient(180deg,#BFE9FB 0%,#E4F5FF 52%,#8CC96A 52.5%,#6FB350 100%);justify-content:flex-start;padding-top:clamp(70px,11vh,96px)}
#scCheck::before{content:'';position:absolute;right:8%;top:6%;width:16%;aspect-ratio:1;border-radius:50%;background:#FFCE3D;box-shadow:0 0 0 8px rgba(255,206,61,.3),0 0 28px rgba(255,206,61,.7)}
#scCheck::after{content:'';position:absolute;left:6%;top:12%;width:26%;height:9%;border-radius:999px;background:rgba(255,255,255,.9)}
#scCheck .ck-top{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:#FFF8EC;border-radius:18px;padding:12px 18px 10px;box-shadow:0 6px 0 #D8B989,0 10px 20px rgba(120,86,50,.2);margin-bottom:18px}
#scCheck .ck-top::after{content:'';position:absolute;left:50%;top:100%;width:14px;height:34px;margin-left:-7px;background:#B98346;border-radius:0 0 4px 4px}
#scCheck .ck-ask{color:#5A3E1C}
#scCheck .ck-grid{position:relative;z-index:2;gap:14px}
#scCheck .ck-t{--a1:var(--sun);--a2:var(--berry);background:linear-gradient(180deg,#FFFDF6,#F6EBD6);border-radius:22px;
  box-shadow:0 6px 0 #C9AE86,0 10px 16px rgba(60,40,10,.22);color:#3B2A1E;isolation:isolate;animation:ckDrop .55s var(--spring) both}
#scCheck .ck-t::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:4px;background:linear-gradient(140deg,var(--a1),var(--a2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
#scCheck .ck-t:nth-child(1){--a1:#FF8FA6;--a2:#FFCE3D;animation-delay:.05s}
#scCheck .ck-t:nth-child(2){--a1:#6EC6F0;--a2:#6BC46A;animation-delay:.12s}
#scCheck .ck-t:nth-child(3){--a1:#C9A0F0;--a2:#FF8FA6;animation-delay:.19s}
#scCheck .ck-t:nth-child(4){--a1:#FFCE3D;--a2:#6EC6F0;animation-delay:.26s}
#scCheck .ck-t:nth-child(5){--a1:#6BC46A;--a2:#C9A0F0;animation-delay:.33s}
@keyframes ckDrop{0%{transform:translateY(-40px) scale(.6);opacity:0}100%{transform:none;opacity:1}}
#scCheck .ck-t.yes{background:linear-gradient(180deg,#E6FAE2,#C7F0BE)}
#scCheck .ck-again{position:relative;z-index:2;margin-top:16px;background:#FFF8EC;box-shadow:0 4px 0 #D8B989,0 8px 14px rgba(120,86,50,.18);
  color:#5A3E1C;font-weight:800;padding:12px 22px;border-radius:22px}
#scCheck .ck-win{background:rgba(255,248,236,.88);border-radius:22px;padding:16px 14px 20px;box-shadow:0 8px 22px rgba(120,86,50,.18)}
#scCheck .ck-star{background:var(--sun);box-shadow:inset 0 0 0 3px #E2A81F}

/* SHOO THE CROWS */
.sc-shoo,.shoo-host{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#BFE9FB 0%,#E4F5FF 44%,#A3C97A 44.5%,#7E9F4E 100%)}
.shoo-host{position:absolute;inset:0}
.shoo-sun{position:absolute;right:8%;top:5%;width:15%;aspect-ratio:1;border-radius:50%;background:#FFCE3D;box-shadow:0 0 0 8px rgba(255,206,61,.3),0 0 28px rgba(255,206,61,.7)}
.shoo-hedge{position:absolute;left:-2%;right:-2%;top:41%;height:7%;border-radius:40% 40% 8px 8px/100% 100% 8px 8px;background:#4FA85C;box-shadow:inset 0 -8px 0 #3E8A4A}
.shoo-field{position:absolute;left:0;right:0;top:46%;bottom:0}
.shoo-rows{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 30px,rgba(90,60,30,.22) 30px 40px)}
.shoo-shoots{position:absolute;left:4%;right:4%;top:14%;bottom:20%}
.shoo-shoots i{position:absolute;bottom:0;width:6%;height:0;border-radius:6px 6px 0 0;background:#6BC46A;box-shadow:inset 0 0 0 2px #4FA85C;animation:shooGrow 1.4s var(--spring) forwards}
.shoo-shoots i::before,.shoo-shoots i::after{content:'';position:absolute;top:20%;width:120%;height:26%;border-radius:50% 50% 50% 0;background:#8ED57A}
.shoo-shoots i::before{left:-90%;transform:rotate(-30deg)}.shoo-shoots i::after{right:-90%;transform:rotate(30deg) scaleX(-1)}
@keyframes shooGrow{to{height:42%}}
.shoo-farmer{position:absolute;left:4%;bottom:18%;width:22%;z-index:3;transition:transform .3s var(--spring)}
.shoo-svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(3px 5px 5px rgba(40,20,4,.3))}
.shoo-farmer.cheer{animation:shooCheer .6s var(--spring)}
@keyframes shooCheer{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}}
.shoo-farmer.sow{animation:shooSow 1.2s ease-in-out 2}
@keyframes shooSow{0%,100%{transform:translateX(0) rotate(0)}50%{transform:translateX(24px) rotate(6deg)}}
/* under the game header when it is a game; high in the sky when it is a breather */
#gameStage .shoo-count{top:19%}
.shoo-count{position:absolute;left:50%;top:8%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:4;pointer-events:none}
.shoo-n{font:900 clamp(64px,20vw,110px)/1 var(--font);color:var(--deep);text-shadow:0 5px 0 #fff}
.shoo-n.pop{animation:shooPop .5s var(--spring)}
@keyframes shooPop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
.shoo-of{font:800 clamp(14px,4vw,18px)/1 var(--font);color:var(--ink-soft);font-style:normal;margin-top:4px}
.shoo-birds{position:absolute;inset:0;z-index:5}
.shoo-crow{position:absolute;width:24%;border:0;background:transparent;padding:0;cursor:pointer;touch-action:none;
  transform:translate(-50%,-50%) scaleX(var(--dir,1));animation:shooLand .6s var(--spring) both;-webkit-tap-highlight-color:transparent}
@keyframes shooLand{0%{transform:translate(-50%,-160%) scaleX(var(--dir,1))}100%{transform:translate(-50%,-50%) scaleX(var(--dir,1))}}
.shoo-crow .shoo-wing{transform-origin:40% 40%;animation:shooPeck 2.4s ease-in-out infinite}
.shoo-crow .shoo-wing.r{transform-origin:60% 40%}
@keyframes shooPeck{0%,80%,100%{transform:rotate(0)}90%{transform:rotate(-8deg)}}
.shoo-crow.shoo-off{animation:shooOff .9s ease-in forwards;pointer-events:none}
@keyframes shooOff{0%{transform:translate(-50%,-50%) scaleX(var(--dir,1))}100%{transform:translate(calc(-50% + 40vw * var(--dir,1)),-360%) scaleX(var(--dir,1)) scale(.5);opacity:0}}
.shoo-crow.shoo-off .shoo-wing{animation:shooFlap .16s ease-in-out infinite alternate}
@keyframes shooFlap{from{transform:rotate(-30deg)}to{transform:rotate(28deg)}}
.shoo-done .shoo-rows{background:repeating-linear-gradient(180deg,transparent 0 30px,rgba(90,60,30,.12) 30px 40px)}
.shoo-say{position:absolute;left:31%;right:3%;bottom:9%;z-index:9;background:#FFF8EC;border-radius:14px;padding:9px 14px;color:#5A4636;
  font:800 clamp(14px,3.9vw,18px)/1.35 var(--font);box-shadow:0 6px 16px rgba(10,30,60,.3);opacity:0;transform:translateY(8px) scale(.9);
  transform-origin:8% 100%;transition:all .34s var(--spring);pointer-events:none}
.shoo-say.on{opacity:1;transform:none}
.shoo-say.her{background:#FFE6EF;color:#8E3B5E}
.shoo-say::after{content:'';position:absolute;left:7%;top:100%;width:0;height:0;border:10px solid transparent;border-top-color:#FFF8EC}
.shoo-say.her::after{border-top-color:#FFE6EF}
#scCrows{padding:0}

/* BIGGER PIECES for the games whose moving pieces measured smallest on a
   phone (a survey of all 65 at 402px wide — the smallest were 39 to 64px on
   a side, against the 80px rule). `zoom` scales the piece and everything in
   it without touching the transforms the games use to move them. */
.g-treehouse [data-letter]{zoom:1.3}
.g-bridge [data-letter]{zoom:1.3}
.g-sheep-pen [data-letter]{zoom:1.45}
.g-fish-pond [data-letter]{zoom:1.4}
.g-campfire [data-letter]{zoom:1.4}
.g-dragon-race [data-letter]{zoom:1.25}
.g-word-soup [data-letter]{zoom:1.25}
.g-fireworks [data-letter]{zoom:1.2}
.g-birds-nest [data-letter]{zoom:1.15}
.g-rainbow [data-letter]{zoom:1.15}
.g-pumpkins [data-letter]{zoom:1.12}
.g-cake [data-letter]{zoom:1.12}
.g-leaf-pile [data-letter]{zoom:1.1}
.g-glowworm [data-letter]{zoom:1.1}

/* LANDSCAPE. An iPhone will not lock a web app's orientation, so the app
   locks itself: when a short screen goes sideways, the whole page is turned
   back by ninety degrees and sized to the other axis. To the child it simply
   stays upright whichever way the phone is held. */
html[data-rot] body{position:absolute;top:0;left:0;width:100vh;height:100vw;transform-origin:top left;overflow:hidden}
/* the box is 100vh wide and 100vw tall; rotate about the top-left corner and
   shift it back into the viewport (transforms apply right to left) */
html[data-rot="l"] body{transform:rotate(-90deg) translateX(-100vh)}
html[data-rot="r"] body{transform:rotate(90deg) translateY(-100vw)}
html[data-rot] .screen,html[data-rot] #castBand,html[data-rot] .corner-btn,html[data-rot] #gateBtn,html[data-rot] #prizePop,html[data-rot] #numCard,html[data-rot] #scGame #gameSkip{position:absolute}

/* GROWN-UPS. Cards fold: a title, a one-line summary of what is set, and
   the rest only when it is opened. The two a parent looks at most stay open. */
#scSetup .set-card{transition:box-shadow .2s}
#scSetup .set-card h3{display:flex;align-items:center;justify-content:space-between;cursor:pointer;margin:0;padding:2px 0;
  -webkit-tap-highlight-color:transparent}
#scSetup .set-card h3::after{content:'';width:12px;height:12px;border-right:3px solid var(--deep);border-bottom:3px solid var(--deep);
  transform:rotate(45deg);margin:0 6px 6px 0;transition:transform .25s var(--spring);flex:none}
#scSetup .set-card.open h3::after{transform:rotate(-135deg);margin:6px 6px 0 0}
#scSetup .set-sum{margin:2px 0 0;font:600 clamp(12.5px,3.5vw,15px)/1.3 var(--font);color:var(--deep)}
#scSetup .set-body{display:none;margin-top:9px}
#scSetup .set-card.open .set-body{display:block}
#scSetup .set-card.open .set-sum{display:none}
#scSetup .set-h{font-size:clamp(24px,6.6vw,32px)}

/* the grown-ups pill on the garden: a drawn key on a proper button, with
   the ring that fills while it is held */
#gateBtn{background:linear-gradient(180deg,#FFFDF6,#F6EBD6);box-shadow:0 5px 0 #C9AE86,0 9px 16px rgba(60,40,10,.22);
  color:#5A3E1C;font-weight:800;padding:11px 20px 11px 16px;border-radius:999px;border:0;display:flex;align-items:center;gap:8px}
#gateBtn::before{content:'';width:20px;height:20px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#FFE49A,#E2A81F);box-shadow:inset 0 0 0 3px #B8600F}

/* GROWN-UPS, properly dressed: the app's own paper, a sunburst behind the
   title, every card with the gradient edge the rest of the app wears, a
   drawn mark on each title, and the mode buttons as pillowed tiles. */
#scSetup{background:
  radial-gradient(ellipse at 50% -10%,rgba(255,206,61,.45) 0%,rgba(255,206,61,0) 55%),
  repeating-conic-gradient(from 0deg at 50% -10%,rgba(255,255,255,.35) 0 6deg,rgba(255,255,255,0) 6deg 12deg),
  linear-gradient(180deg,#FFF3DA,#FBF0DE)}
#scSetup .set-h{font-size:clamp(26px,7vw,34px);color:#5A3E1C;text-shadow:0 2px 0 #fff}
#scSetup .set-card{position:relative;background:linear-gradient(180deg,#FFFDF6,#FFF6E6);border-radius:24px;
  box-shadow:0 6px 0 rgba(200,160,100,.35),0 12px 24px rgba(120,86,50,.16);isolation:isolate;--a1:var(--sun);--a2:var(--berry)}
#scSetup .set-card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:3px;
  background:linear-gradient(140deg,var(--a1),var(--a2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;z-index:-1}
#scSetup .set-card:nth-child(4n+1){--a1:#FFCE3D;--a2:#FF8FA6}
#scSetup .set-card:nth-child(4n+2){--a1:#6EC6F0;--a2:#6BC46A}
#scSetup .set-card:nth-child(4n+3){--a1:#C9A0F0;--a2:#FFCE3D}
#scSetup .set-card:nth-child(4n){--a1:#6BC46A;--a2:#6EC6F0}
#scSetup .set-card h3{font-size:clamp(17px,4.6vw,21px);color:#5A3E1C;gap:10px}
#scSetup .set-card h3::before{content:'';width:26px;height:26px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff 0 20%,var(--a1) 22% 60%,var(--a2) 62%);box-shadow:0 2px 0 rgba(120,86,50,.25)}
#scSetup .set-sum{color:#8E5F2B;padding-left:36px}
#scSetup .set-mode{background:linear-gradient(180deg,#fff,#FFF6E6);box-shadow:0 4px 0 rgba(200,160,100,.4);border-radius:18px;margin-top:8px}
#scSetup .set-mode b{color:#5A3E1C}
#scSetup .set-mode.on{background:linear-gradient(180deg,#F2FBF0,#E1F5DB);box-shadow:inset 0 0 0 3px var(--leaf),0 4px 0 rgba(120,160,90,.4)}
#scSetup .set-l{background:linear-gradient(180deg,#fff,#F6EBD6);box-shadow:0 3px 0 rgba(200,160,100,.4);color:#5A3E1C;font-weight:900}
#scSetup .set-l.pick{background:linear-gradient(180deg,#FFF6D8,#FFE49A);box-shadow:inset 0 0 0 3px var(--sun),0 3px 0 rgba(200,160,100,.4)}
#scSetup .set-clear,#scSetup .set-big{background:linear-gradient(180deg,#fff,#FFF6E6);box-shadow:0 4px 0 rgba(200,160,100,.4);color:#5A3E1C;font-weight:800;border-radius:16px}
#scSetup .set-big{background:linear-gradient(180deg,#FFF6D8,#FFE49A);box-shadow:0 4px 0 #D8B989}
#scSetup .set-note{color:#8E7A62}
#scSetup .rp-stats div{background:linear-gradient(180deg,#fff,#FFF6E6);box-shadow:0 3px 0 rgba(200,160,100,.35)}
#setBack{background:linear-gradient(180deg,#FFFDF6,#F6EBD6);box-shadow:0 5px 0 #C9AE86,0 9px 16px rgba(60,40,10,.22)}

/* the home bar: who, and Guided / I choose */
#scHome .home-top{gap:6px}
#scHome #homeHi{flex:0 1 auto;max-width:48%}
.hm-mode{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:var(--lift-1);flex:1;min-width:0}
.hm-mode button{flex:1;min-width:0;border:0;cursor:pointer;border-radius:999px;padding:5px 8px;background:transparent;
  display:flex;flex-direction:column;align-items:center;line-height:1.05;-webkit-tap-highlight-color:transparent}
.hm-mode button b{font:800 clamp(12px,3.3vw,15px)/1.05 var(--font);color:var(--ink-soft)}
.hm-mode button i{font:600 clamp(9px,2.5vw,11px)/1.1 var(--font);color:var(--ink-soft);font-style:normal;opacity:.8}
.hm-mode button.on{background:var(--deep);box-shadow:var(--lift-1)}
.hm-mode button.on b,.hm-mode button.on i{color:#fff}

/* the way back out of a visit sits clear of the toy row */
#visitBack{bottom:calc(var(--pad-bottom,0px) + 8px);left:auto;right:12px;transform:none;
  font-size:clamp(13px,3.6vw,16px);padding:10px 16px}
body.no-asking #visitBack{display:none !important}

/* a crow nobody has shooed yet gets restless — the hint that it wants a finger */
.shoo-crow.shoo-hint{animation:shooHint 1.5s ease-in-out infinite}
@keyframes shooHint{0%,70%,100%{transform:translate(-50%,-50%) scaleX(var(--dir,1))}
  80%{transform:translate(-50%,-64%) scaleX(var(--dir,1)) rotate(-5deg)}
  90%{transform:translate(-50%,-56%) scaleX(var(--dir,1)) rotate(3deg)}}
.shoo-crow.shoo-hint .shoo-wing{animation:shooFlap .3s ease-in-out infinite alternate}
/* the house on a change-of-pace screen */
.bth-home{font-size:22px;line-height:1}