/* The garden — making the home screen the MAIN room.

   It was the thinnest screen in the app: a greeting that did nothing, a trail
   nobody arrived at, a barn button that had never been styled, and a sky with
   nothing in it. The playroom felt like home and this felt like a menu.

   Everything here is additive and lives in its own file on purpose — a second
   session is working in index.html and games.js at the same time, so this
   never touches either. Loaded last, so equal-specificity rules win. */

/* ================================================== the hello door ==== */
/* "Hello, Nick!" was an h1. A child taps it, because it is the biggest warm
   thing on the screen, and nothing happened. It is now the door back to Mo
   and Pip — the one place on this screen where you just mess about. */
#homeHi{
  flex:1; margin:0; text-align:left; cursor:pointer; border:0;
  font:inherit; font-size:clamp(17px,4.6vw,24px); color:var(--ink);
  display:flex; align-items:center; gap:9px;
  padding:7px 14px 7px 9px; border-radius:22px;
  background:linear-gradient(180deg,#FFFFFF,#FFF3DE);
  box-shadow:var(--lift-1),var(--gloss);
  position:relative; isolation:isolate;
  transition:transform .14s var(--spring), box-shadow .14s ease-out;
  -webkit-tap-highlight-color:transparent;
}
#homeHi::before{                       /* the house gradient outline */
  content:''; position:absolute; inset:0; border-radius:inherit; padding:2.5px;
  background:linear-gradient(140deg,var(--sun),var(--berry));
  -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;
}
#homeHi:active{transform:translate(1px,3px) scale(.98);box-shadow:var(--lift-1)}
#homeHi .hh-face{flex:none;width:clamp(34px,9vw,44px);height:clamp(34px,9vw,44px);display:block}
#homeHi .hh-face svg{width:100%;height:100%;display:block;overflow:visible}
#homeHi .hh-txt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
#homeHi .hh-txt b{font-weight:inherit;line-height:1.05;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
#homeHi .hh-txt i{font-style:normal;font-size:clamp(10px,2.9vw,12.5px);
  color:var(--ink-soft);line-height:1;letter-spacing:.1px}
/* it breathes every few seconds so it reads as pressable without shouting */
#homeHi.nudge{animation:hhNudge 3.6s ease-in-out infinite}
@keyframes hhNudge{0%,88%,100%{transform:none}92%{transform:scale(1.035) rotate(-.7deg)}96%{transform:scale(1.015)}}

/* ================================================== the barn button === */
/* It set a font-SIZE but never `font:inherit`, so it fell back to the system
   UI font and the UA's default button colour — which is why it came out in
   system blue on amber and looked like nobody had drawn it. */
.go.alt{
  font:inherit; font-size:clamp(17px,4.6vw,21px); color:#FFFDF6;
  --a1:#FFE9A8; --a2:#C97F2A;
  background:linear-gradient(180deg,#F5BC55 0%,#EDA23C 52%,#D8903A 100%);
  padding:13px 26px 14px; margin-top:9px; border-radius:26px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  text-shadow:0 2px 0 rgba(120,72,18,.34);
  box-shadow:0 6px 0 #B4791F, 0 12px 22px rgba(120,86,50,.26),
             inset 0 3px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(120,72,18,.16);
}
.go.alt:active{transform:translateY(4px);
  box-shadow:0 2px 0 #B4791F, 0 6px 12px rgba(120,86,50,.24),
             inset 0 3px 0 rgba(255,255,255,.4)}
.go.alt .barn-ico{flex:none;width:clamp(22px,5.8vw,27px);height:auto;display:block;
  filter:drop-shadow(0 2px 0 rgba(120,72,18,.3))}

/* =================================================== the destination == */
/* It was a 60px picture and a grey line of text, so arriving at it could not
   possibly feel like anything. Now it is a signpost with a lit sky behind it
   and five beads that fill in as you walk. */
.path-goal{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:2px;margin-bottom:2px;padding:2px 14px 4px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.path-goal::before{                    /* the glow it sits in */
  content:'';position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:150%;aspect-ratio:1.35;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,240,190,.85),rgba(255,235,175,.28) 58%,transparent 76%);
  z-index:-1}
.path-goal svg{width:clamp(66px,19vw,96px);height:auto;display:block;
  filter:drop-shadow(0 5px 5px rgba(60,80,60,.22));
  transition:transform .2s var(--spring)}
.path-goal:active svg{transform:scale(.93)}
.path-goal.lean svg{animation:goalLean 5s ease-in-out infinite}
@keyframes goalLean{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(1deg)}}
.path-goal b{font:800 clamp(13px,3.8vw,17px)/1.1 var(--font);color:var(--ink)}
.path-goal i{font:600 clamp(10px,3vw,13px)/1 var(--font);color:#7C8B96;font-style:normal}
.path-goal .gbeads{display:flex;gap:5px;margin-top:3px}
.path-goal .gbeads span{width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 2px rgba(160,140,110,.45);
  transition:transform .3s var(--spring),background .3s ease-out}
.path-goal .gbeads span.on{background:var(--leaf);box-shadow:inset 0 0 0 2px #4E9E4C}
.path-goal .gbeads span.just{animation:beadPop .7s var(--spring)}
@keyframes beadPop{0%{transform:scale(.4)}55%{transform:scale(1.6)}100%{transform:scale(1)}}
/* one bead left — the destination starts pulling */
.path-goal.close::before{animation:goalPull 1.9s ease-in-out infinite}
@keyframes goalPull{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}
                    50%{opacity:1;transform:translate(-50%,-50%) scale(1.09)}}

/* the walker gets a shadow so the hop reads as a hop */
.walker-shadow{fill:rgba(60,80,60,.20)}
.stone.just-lit circle{animation:stoneLit .9s var(--spring)}
@keyframes stoneLit{0%{transform:scale(.5)}55%{transform:scale(1.5)}100%{transform:scale(1)}}
.stone{transform-box:fill-box;transform-origin:center}
.stone circle{transform-box:fill-box;transform-origin:center}

/* ================================================ the arrival ========= */
/* The whole reason for the trail. It used to be literally unreachable — `left`
   was 5 minus (done mod 5), which is 5..1 and never 0 — so the "you're here!"
   state could not fire and the castle silently became the lighthouse between
   one session and the next. */
/* It stops ABOVE the cast band on purpose — Mo and Pip stay in shot, so the
   child can see the two of them cheering rather than hearing a voice from
   behind a sheet of colour. */
#goalCheer{position:fixed;left:0;right:0;top:0;bottom:calc(var(--cast-h) - 14px);
  z-index:60;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
  padding:20px 24px;text-align:center;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 38%,rgba(255,248,228,.97),rgba(255,232,196,.94) 62%,rgba(246,208,160,.92));
  -webkit-mask:linear-gradient(#000 0 88%,transparent 100%);
  mask:linear-gradient(#000 0 88%,transparent 100%);
  -webkit-tap-highlight-color:transparent}
#goalCheer.on{display:flex;animation:cheerIn .4s ease-out}
@keyframes cheerIn{from{opacity:0}to{opacity:1}}
#goalCheer .gc-rays{position:absolute;left:50%;top:38%;width:150vmax;aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.5;
  background:repeating-conic-gradient(from 0deg,rgba(255,206,61,.55) 0deg 9deg,transparent 9deg 22deg);
  -webkit-mask:radial-gradient(closest-side,#000 12%,rgba(0,0,0,.5) 42%,transparent 70%);
  mask:radial-gradient(closest-side,#000 12%,rgba(0,0,0,.5) 42%,transparent 70%);
  animation:gcSpin 26s linear infinite}
@keyframes gcSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
#goalCheer .gc-art{width:min(52vw,240px);height:auto;position:relative;
  filter:drop-shadow(0 10px 14px rgba(120,86,50,.3));
  animation:gcLand .9s var(--spring)}
#goalCheer .gc-art svg{width:100%;height:auto;display:block;overflow:visible}
@keyframes gcLand{0%{transform:scale(.3) translateY(40px);opacity:0}
                  60%{transform:scale(1.12) translateY(-6px);opacity:1}
                  100%{transform:scale(1) translateY(0)}}
#goalCheer h2{position:relative;margin:10px 0 0;font:800 clamp(24px,7.4vw,38px)/1.1 var(--font);
  color:var(--ink);animation:gcRise .5s .25s var(--spring) both}
#goalCheer p{position:relative;margin:4px 0 0;font:600 clamp(14px,4vw,18px)/1.2 var(--font);
  color:#8A6A44;animation:gcRise .5s .4s var(--spring) both}
@keyframes gcRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#goalCheer .gc-next{position:relative;margin-top:16px;display:flex;align-items:center;gap:10px;
  padding:9px 16px 9px 10px;border-radius:22px;background:rgba(255,255,255,.8);
  box-shadow:var(--lift-1);animation:gcRise .5s 1.5s var(--spring) both}
#goalCheer .gc-next svg{width:clamp(44px,12.5vw,60px);height:auto;display:block;overflow:visible}
#goalCheer .gc-next span{font:700 clamp(12px,3.5vw,15px)/1.2 var(--font);color:var(--ink-soft);
  text-align:left}
#goalCheer .gc-next span b{display:block;font-weight:800;color:var(--ink);
  font-size:clamp(14px,4vw,17px)}
#goalCheer .gc-go{position:relative;margin-top:18px;font:inherit;
  font-size:clamp(19px,5.4vw,25px);color:var(--ink);padding:13px 40px;
  animation:gcRise .5s 1.9s var(--spring) both;
  --a1:var(--sun);--a2:var(--berry);cursor:pointer}

/* ================================================ things to poke ====== */
/* A sky with nothing in it. Six drawn things that all answer back — the same
   rule the playroom and the barn already live by, which is the actual reason
   those two rooms feel like somewhere and this one felt like a menu. */
#scHome > #gardenPlay{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.gprop{position:absolute;pointer-events:auto;border:0;background:none;padding:0;
  cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent;
  width:var(--w,clamp(42px,11.5vw,62px));transform-origin:50% 60%}
.gprop svg{width:100%;height:auto;display:block;overflow:visible;
  filter:drop-shadow(0 3px 3px rgba(60,80,60,.18))}
.gprop:active{filter:brightness(1.06)}

/* idles — each one different, so the sky never ticks in unison */
.gp-bird{animation:gpBob 3.4s ease-in-out infinite}
.gp-butterfly{animation:gpDrift 6.5s ease-in-out infinite}
.gp-bee{animation:gpBee 4.2s ease-in-out infinite}
.gp-rabbit{animation:gpBreathe 2.9s ease-in-out infinite}
.gp-balloon{animation:gpSway 5.2s ease-in-out infinite}
.gp-mushroom{animation:gpBreathe 4.4s ease-in-out infinite}
@keyframes gpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes gpDrift{0%,100%{transform:translate(0,0) rotate(-4deg)}
                   33%{transform:translate(9px,-8px) rotate(5deg)}
                   66%{transform:translate(-6px,5px) rotate(-2deg)}}
@keyframes gpBee{0%,100%{transform:translate(0,0)}25%{transform:translate(6px,-4px)}
                 50%{transform:translate(-4px,3px)}75%{transform:translate(3px,5px)}}
@keyframes gpBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes gpSway{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}

/* wing parts that move on their own */
.gp-wing{transform-box:fill-box;transform-origin:80% 90%;animation:wingFlap .42s ease-in-out infinite alternate}
@keyframes wingFlap{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.gp-bwing{transform-box:fill-box;animation:beeWing .09s ease-in-out infinite alternate}
.gp-bwing.wL{transform-origin:78% 100%}
.gp-bwing.wR{transform-origin:16% 100%}
@keyframes beeWing{from{transform:rotate(-13deg) scaleY(.94)}to{transform:rotate(13deg)}}
.gp-flutterL,.gp-flutterR{transform-box:fill-box;animation:flut 1.5s ease-in-out infinite alternate}
.gp-flutterL{transform-origin:100% 50%}
.gp-flutterR{transform-origin:0% 50%}
@keyframes flut{from{transform:scaleX(1)}to{transform:scaleX(.72)}}

/* reactions — every one of these travels, so a press always shows something */
.gprop.r-fly{animation:gpFly 1.5s var(--spring)}
@keyframes gpFly{0%{transform:translate(0,0) rotate(0) scale(1)}
                 30%{transform:translate(30px,-60px) rotate(-16deg) scale(1.1)}
                 55%{transform:translate(62px,-30px) rotate(12deg) scale(.95)}
                 80%{transform:translate(22px,10px) rotate(-6deg)}
                 100%{transform:translate(0,0) rotate(0) scale(1)}}
.gprop.r-flit{animation:gpFlit 1.7s ease-in-out}
@keyframes gpFlit{0%{transform:translate(0,0) rotate(0)}
                  25%{transform:translate(-26px,-38px) rotate(-22deg) scale(1.12)}
                  50%{transform:translate(18px,-62px) rotate(18deg) scale(.9)}
                  75%{transform:translate(26px,-20px) rotate(-10deg)}
                  100%{transform:translate(0,0) rotate(0) scale(1)}}
.gprop.r-buzz{animation:gpBuzz 1.25s ease-in-out}
@keyframes gpBuzz{0%{transform:translate(0,0)}15%{transform:translate(-22px,-12px) rotate(-12deg)}
                  32%{transform:translate(20px,-26px) rotate(14deg)}
                  50%{transform:translate(-16px,-34px) rotate(-10deg)}
                  70%{transform:translate(18px,-14px) rotate(10deg)}
                  100%{transform:translate(0,0) rotate(0)}}
.gprop.r-hop{animation:gpHop 1.15s var(--spring)}
@keyframes gpHop{0%{transform:translateY(0) scaleY(1)}
                 12%{transform:translateY(0) scaleY(.78) scaleX(1.14)}
                 40%{transform:translateY(-46px) scaleY(1.1) scaleX(.93) rotate(-7deg)}
                 62%{transform:translateY(0) scaleY(.86) scaleX(1.1)}
                 82%{transform:translateY(-16px) scaleY(1.04)}
                 100%{transform:translateY(0) scaleY(1) scaleX(1)}}
.gprop.r-wobble{animation:gpWobble .95s var(--spring)}
@keyframes gpWobble{0%{transform:scale(1)}
                    18%{transform:scaleY(.7) scaleX(1.22) translateY(6px)}
                    45%{transform:scaleY(1.16) scaleX(.9) translateY(-9px)}
                    70%{transform:scaleY(.94) scaleX(1.05)}
                    100%{transform:scale(1)}}
.gprop.r-pop{animation:gpPop .5s ease-out forwards;pointer-events:none}
@keyframes gpPop{0%{transform:scale(1);opacity:1}
                 45%{transform:scale(1.45) rotate(6deg);opacity:1}
                 100%{transform:scale(.15) rotate(-10deg);opacity:0}}
.gprop.r-rise{animation:gpRise 3.4s ease-in forwards;pointer-events:none}
@keyframes gpRise{to{transform:translateY(-72vh) rotate(20deg);opacity:0}}
.gprop.gone{display:none}
/* the balloon drifting back in from the grass after it was popped */
.gprop.r-return{animation:gpReturn 2.6s ease-out}
@keyframes gpReturn{from{transform:translateY(58vh) scale(.5);opacity:0}
                    to{transform:translateY(0) scale(1);opacity:1}}

/* a puff of nothing much, for the taps that need a bit of air */
.puff{position:fixed;z-index:59;pointer-events:none;border-radius:50%;
  background:rgba(255,255,255,.9);animation:puffOut .7s ease-out forwards}
@keyframes puffOut{from{transform:translate(-50%,-50%) scale(.3);opacity:.9}
                   to{transform:translate(-50%,-50%) scale(2.6);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .gprop,.gp-wing,.gp-bwing,.gp-flutterL,.gp-flutterR,
  .path-goal.lean svg,.path-goal.close::before,#homeHi.nudge{animation:none!important}
}

/* ============================== SHARING THE APP
   A small code in the top bar, and a big one when it is pressed — a phone
   camera will not read a fifty-pixel square from across a table. Drawn from a
   static path, so nothing is fetched to make it. */
.qr-badge{padding:5px;background:#fff;overflow:hidden}
.qr-badge svg{width:100%;height:100%;display:block;border-radius:3px}

.qr-card{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(59,42,30,.55);padding:5vw}
.qr-card[hidden]{display:none}
.qr-inner{background:#FFFDF6;border-radius:22px;padding:18px 18px 16px;max-width:340px;width:100%;
  box-shadow:0 14px 34px rgba(60,40,10,.34);text-align:center;
  animation:qrIn .32s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes qrIn{from{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}
.qr-inner h2{margin:0 0 10px;font-size:clamp(18px,5vw,23px);color:var(--deep)}
.qr-big{width:min(62vw,220px);height:auto;display:block;margin:0 auto;
  border:8px solid #fff;border-radius:10px;box-shadow:0 3px 10px rgba(60,40,10,.18)}
.qr-url{margin:10px 0 12px;font:700 13px/1.2 var(--font);color:var(--ink-soft);letter-spacing:.01em}
.qr-row{display:flex;gap:8px}
.qr-row .go{flex:1;margin:0}