/* The garden, rearranged for somebody who cannot read.

   Old order of visual weight, biggest first: the word "Play" (meaningless), the
   dressing-up box (very legible, and the wrong thing to press), the mountain,
   then Mo and Pip about two inches tall. New order: the journey, the doors, and
   the two of them big enough to be the point. */

/* ---------------------------------------------- what the doors replace */
/* Kept in the DOM and pressed by the doors, so no behaviour is duplicated. */
#bigPlay, #homeBarn, #homeHi, #homePlay, #homeBack { display:none !important }

#scHome{justify-content:flex-start;gap:6px}

/* Mo and Pip were the smallest thing on the screen and they are the reason a
   child opens the app. Scoped to home so no other screen shifts. */
body.home-on{--cast-h:clamp(158px,23vh,214px)}
body.home-on .char{width:clamp(124px,29vw,190px)}
body.home-on #pipStage{width:clamp(100px,23.5vw,154px)}

/* --------------------------------------------------------- who's here */
.home-top{gap:8px}
#whoChip{flex:1;display:flex;align-items:center;gap:8px;min-width:0;
  padding:5px 12px 5px 5px;border-radius:22px;
  background:rgba(255,255,255,.82);box-shadow:var(--lift-1)}
#whoChip .wc-face{flex:none;width:clamp(32px,8.4vw,40px);line-height:0}
#whoChip .wc-face svg{width:100%;height:auto;display:block}
#whoChip .wc-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
#whoChip .wc-txt b{font:800 clamp(14px,4vw,18px)/1.05 var(--font);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#whoChip .wc-txt i{font:600 clamp(10px,2.8vw,12px)/1 var(--font);color:var(--leaf);font-style:normal}

/* ------------------------------------------------------- the journey -- */
/* More prominent: it is the only thing on the page that says "you are getting
   somewhere", and it was a 60px picture. */
.path-wrap{flex:1 1 auto;min-height:0;gap:2px}
.path-goal{flex:none}
.path-goal svg{width:clamp(72px,21vw,104px)}
.path-goal b{font:800 clamp(14px,4.2vw,18px)/1.1 var(--font)}
.path-svg{max-height:none;height:100%;min-height:64px}
/* the chip carries the count now, and two different numbers for the same idea
   (18 learned vs 3 checked) just confused it */
#homeCount{display:none}

/* ---------------------------------------------------------- the hall -- */
#scHome > .door-hall{position:relative;z-index:4}
/* the hall is a full-width box, so its empty margins were swallowing taps
   meant for the trees behind it */
.door-hall{width:100%;max-width:520px;display:flex;flex-direction:column;
  align-items:center;gap:clamp(6px,1.4vh,11px);margin-top:2px;flex:none;
  pointer-events:none}
.door{pointer-events:auto}
.door-big-wrap{display:flex;justify-content:center;width:100%}
.door-small-row{display:flex;justify-content:center;gap:clamp(8px,3vw,16px);width:100%}

.door{position:relative;border:0;padding:0;background:none;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s var(--spring)}
.door.is-big{width:clamp(132px,36vw,166px)}
.door:not(.is-big){width:clamp(74px,21.5vw,96px)}

/* the frame. An arch, because that is the shape a child reads as "a way in",
   and the per-door accent lives in the woodwork rather than fighting it. */
.door-arch{position:relative;display:block;width:100%;aspect-ratio:.96;
  box-sizing:border-box;padding:8px 8px 0;
  border-radius:50% 50% 13px 13px / 38% 38% 13px 13px;
  background:linear-gradient(165deg,var(--f1,#FFE3A0),var(--f2,#D89B3C));
  box-shadow:0 7px 0 rgba(120,86,50,.34),0 13px 24px rgba(120,86,50,.26),
             inset 0 2px 0 rgba(255,255,255,.6)}
.door:not(.is-big) .door-arch{padding:6px 6px 0}
.door-inner{position:absolute;inset:8px 8px 0;overflow:hidden;display:block;
  border-radius:50% 50% 8px 8px / 38% 38% 8px 8px;
  background:#FFF4E0;
  box-shadow:inset 0 3px 9px rgba(90,60,30,.28)}
.door:not(.is-big) .door-inner{inset:6px 6px 0}
.door-inner svg{width:100%;height:100%;display:block}

/* light spilling out onto the grass — the thing that makes it read as OPEN
   rather than as a picture in a frame */
.door-step{position:absolute;left:2%;right:2%;bottom:-9px;height:20px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,226,150,.95),rgba(255,226,150,.35) 58%,transparent 76%)}

.door-name{font:800 clamp(10.5px,3vw,13px)/1.1 var(--font);color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.75)}
.door.is-big .door-name{font-size:clamp(17px,4.8vw,22px)}

.door:active{transform:translateY(4px) scale(.98)}
.door:active .door-arch{box-shadow:0 3px 0 rgba(120,86,50,.34),0 6px 12px rgba(120,86,50,.24),
             inset 0 2px 0 rgba(255,255,255,.5)}
/* walking through it */
.door.went{animation:doorGo .19s ease-in}
@keyframes doorGo{to{transform:translateY(2px) scale(1.06);opacity:.55}}

/* the main door breathes, so the eye lands on it first with no words involved */
.door.is-big .door-arch{animation:doorBreathe 3.2s ease-in-out infinite}
@keyframes doorBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}
.door.is-big .door-step{animation:doorLight 3.2s ease-in-out infinite}
@keyframes doorLight{0%,100%{opacity:.8}50%{opacity:1;transform:scaleX(1.06)}}

/* ------------------------------------------- the dressing-up box, now a
   drawer rather than the biggest thing on the page */
#dressSheet{position:fixed;inset:0;z-index:58;display:none;
  align-items:flex-end;justify-content:center;
  background:rgba(60,42,26,.34);-webkit-tap-highlight-color:transparent}
#dressSheet.on{display:flex;animation:dsFade .2s ease-out}
@keyframes dsFade{from{opacity:0}to{opacity:1}}
#dressSheet .ds-panel{position:relative;width:100%;max-width:560px;
  padding:16px 14px calc(var(--pad-bot) + 18px);
  background:linear-gradient(180deg,#FFFDF8,#FFF2DF);
  border-radius:28px 28px 0 0;box-shadow:0 -8px 30px rgba(60,42,26,.3);
  animation:dsUp .32s var(--spring)}
@keyframes dsUp{from{transform:translateY(100%)}to{transform:none}}
#dressSheet .ds-shut{position:absolute;right:12px;top:12px;width:38px;height:38px;
  border:0;border-radius:50%;background:#FFF;color:var(--ink-soft);font-size:16px;
  cursor:pointer;box-shadow:var(--lift-1);z-index:2}
#dressSheet .cup-card{box-shadow:none;background:none;padding:0;margin-top:6px}
#dressSheet .cup-head h2{font-size:clamp(16px,4.6vw,20px)}

@media (prefers-reduced-motion:reduce){
  .door,.door-arch,.door-step{animation:none!important;transition:none}
  #dressSheet .ds-panel{animation:none}
}

/* ------------------------------------------------------- the trail ---- */
/* It came out as a 48px-wide ribbon with 11px stones, which nobody can read as
   "that is me, walking to the ship". The SVG is height-constrained and its
   viewBox is 100x246, so its rendered WIDTH is a function of the height it gets
   — there is no CSS that widens it without distorting the circles. What can be
   done is scale the contents: `r` is a settable property here (the app already
   animates it in stoneglow), so the stones and Mo grow inside the same box.
   Stones sit 37 units apart, so r:16 still leaves a gap. */
/* r:16 was too far — Path.draw sizes each stone by index for perspective
   (12 - i*0.5) and a flat override both kills that and closes the 37-unit gap
   between them, so they very nearly touched. 13 keeps a clear gap. */
.path-svg .stone circle{r:13}
.path-svg .stone text{font-size:13px}
.path-svg .walker .walker-head{r:10}
.path-svg .walker circle{r:4.2}
.path-svg .road{stroke-width:8;stroke-dasharray:0.1 13}
/* restated because the original keyframes pin r back to 11 */
@keyframes stoneglow{0%,100%{r:13}50%{r:15}}

/* a touch bigger, now that the dressing-up card is not eating the page */
.door.is-big{width:clamp(140px,39vw,180px)}
.door:not(.is-big){width:clamp(78px,23vw,102px)}
/* more light on the grass, so it reads as open rather than as a framed picture */
.door-step{bottom:-11px;height:24px;
  background:radial-gradient(closest-side,rgba(255,228,152,1),rgba(255,228,152,.45) 55%,transparent 78%)}
/* the close button was sitting on top of "3 of 10" */
#dressSheet .cup-head{padding-right:46px}

/* ------------------------------------------- everything answers back --- */
/* The chip and the music button sit above the sun, which is now in the
   interactive layer and would otherwise cover them. */
#scHome > .home-top{position:relative;z-index:5}
.g-live{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.g-cloud.g-live.g-hit{animation:cloudSquash .7s var(--spring)}
@keyframes cloudSquash{0%,100%{transform:scaleY(1)}
                       35%{transform:scaleY(.66) scaleX(1.16)}
                       70%{transform:scaleY(1.1) scaleX(.95)}}
.g-sun.g-live{border-radius:50%}
.g-tree.g-live.g-hit{animation:treeShake .7s var(--spring)}
@keyframes treeShake{0%,100%{transform:rotate(0) scale(1)}
                     20%{transform:rotate(-7deg) scale(1.06)}
                     45%{transform:rotate(6deg) scale(1.04)}
                     70%{transform:rotate(-3deg)}}
.g-sun.g-live.g-hit{animation:sunSpin .9s ease-out}
@keyframes sunSpin{0%{transform:rotate(0) scale(1)}
                   40%{transform:rotate(120deg) scale(1.14)}
                   100%{transform:rotate(360deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.g-live.g-hit{animation:none!important}}