/* The Daily path: one mural painted for a phone, the puzzles on its path,
   and a green line that walks the path as you scroll. --u is about one CSS
   pixel on a phone (never under 0.9 or over 1.25) and sizes the stops; the
   mural fills a 390-unit column, and --m turns the mural's own pixels, which
   place everything on it, into CSS pixels. */
body.garden-day{background:var(--sa-paper);overflow-x:clip}
body.garden-day #main{padding-top:0}
.path-hub{margin:0}
.garden-path{--u:clamp(.9px,calc(100vw / 390),1.25px);--m:calc(var(--u) * 390 / var(--W));position:relative;width:100vw;margin:0 0 8px calc(50% - 50vw);overflow:hidden;color:var(--sa-ink);-webkit-user-select:none;user-select:none}
/* The card covers the mural's top (--room: the tree's canopy) and no more. */
.path-stage{position:relative;width:calc(var(--W) * var(--m));height:calc(var(--H) * var(--m));margin:calc(8px - var(--room) * var(--m)) auto 0}
.path-mural img,.path-moves,.path-greet{position:absolute;inset:0;display:block;width:100%;height:100%;-webkit-mask-image:linear-gradient(#000 92%,transparent);mask-image:linear-gradient(#000 92%,transparent)}
/* Wider than a phone, the mural's sides melt into the paper too. */
@media (min-width:560px){.path-mural img,.path-moves,.path-greet{-webkit-mask-image:linear-gradient(#000 92%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(#000 92%,transparent),linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}}
.garden-path.no-art .path-mural,.garden-path.no-art .path-wide,.garden-path.no-art .path-moves,.garden-path.no-art .path-greet{display:none}
/* A scene's desktop copy (--pad wider each side) sits behind the mural on a
   wider screen; the mural's melt fades into the same painting, so there's no
   edge. Its sides are already blank paper, where each thing ends in its own
   shape, so only its last few pixels melt, in case the paint is a shade off. */
.path-wide img{display:none}
@media (min-width:640px){.path-wide img{display:block;position:absolute;top:0;left:calc(var(--pad) * var(--m) * -1);width:calc((var(--W) + 2 * var(--pad)) * var(--m));height:100%;-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent),linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent),linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}}
.path-stage>[style*="--x"]{position:absolute;left:calc(var(--x) * var(--m));top:calc(var(--y) * var(--m))}
/* The line walks the painted path, a soft paper halo keeping it clear of the
   brushwork; its head is a small gold step. */
.path-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.path-line path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.line-halo{stroke:rgba(255,253,247,.6);stroke-width:19}
.line-walk{stroke:var(--sa-green);stroke-width:10}
.line-head{fill:var(--sa-gold);stroke:var(--sa-ink);stroke-width:3.5}
/* The moments' pieces. */
.path-bloom,.path-crawler{width:calc(var(--w) * var(--m));height:auto;transform:translate(-50%,-50%);pointer-events:none}
.path-bloom{opacity:0}
.path-bloom.opening{opacity:1}
.path-bloom:not(.bloomed):not(.opening){visibility:hidden}
.path-notes{width:0;height:0;pointer-events:none;z-index:2}
.path-note{position:absolute;left:-6px;top:-14px;width:11px;height:14px;opacity:0;color:var(--sa-green)}
/* The character who meets you at the sun, and its place painted without it. */
.path-patch{width:calc(var(--w) * var(--m));height:calc(var(--h) * var(--m));pointer-events:none}
.path-meet{width:calc(var(--w) * var(--m));aspect-ratio:1;transform:translate(-50%,-100%);pointer-events:none;z-index:3}
.path-meet>img,.meet-flying{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.meet-flying{background:var(--fly) 0 0/400% 100% no-repeat;opacity:0}
.path-meet.flying .meet-perched{opacity:0}
.path-meet.flying .meet-flying{opacity:1}
.path-meet.waiting{visibility:hidden}
.path-meet .path-notes{position:absolute}
.path-meet.face-right .meet-perched{transform:scaleX(-1)}
/* A character painted beside the sun greets you: its drawn frames, unseen
   until it moves. They wear the mural's melt (above), so they match it at its
   foot and, on a wider screen, its sides. */
.path-greet{visibility:hidden;pointer-events:none}
.path-greet.greeting{visibility:visible}
.path-greet>.greet-cut{position:absolute;left:calc(var(--x) * var(--m));top:calc(var(--y) * var(--m));width:calc(var(--w) * var(--m));height:calc(var(--h) * var(--m))}
.greet-cut{overflow:hidden}
.greet-frames{display:block;width:calc(var(--n) * 100%);max-width:none;height:100%}
/* A part of the painting that moves: its box shows one frame of its row of the move's sprite sheet. */
.path-moves{pointer-events:none}
.move-cut{position:absolute;left:calc(var(--x) * var(--m));top:calc(var(--y) * var(--m));width:calc(var(--w) * var(--m));height:calc(var(--h) * var(--m));overflow:hidden}
.move-frames{position:absolute;left:0;top:0;display:block;width:calc(var(--sw) * var(--m));max-width:none;height:auto}
/* A dog's bark: two small arcs from its mouth as it greets you. */
.path-voice{width:0;height:0;pointer-events:none;z-index:2}
.path-bark{position:absolute;left:-2px;top:-15px;width:15px;height:18px;opacity:0;color:var(--sa-ink)}
.path-bark svg{display:block;width:100%;height:100%}
/* A warm light that glows for a moment (a lantern, a window). */
.path-glow{width:calc(var(--r) * 2 * var(--m));aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,221,140,.85),rgba(255,200,90,.35) 55%,rgba(255,200,90,0));mix-blend-mode:screen;opacity:0;pointer-events:none}

/* The Daily Five card sits over the top of the scene. */
.path-cards{position:relative;z-index:3;padding:12px 0 0}
.path-cards>*{margin-top:0}
/* #main: storybook.css pulls #main's cards up over a page scene; this card
   sits in the path's own space below the masthead, centred. */
#main .garden-path .daily-play-header{width:min(100% - 2 * var(--sa-gutter),var(--sa-col));margin:0 auto}
.garden-path .path-cards>.habit-today{width:min(100% - 2 * var(--sa-gutter),560px);box-sizing:border-box;margin:10px auto 0}
@media (min-width:700px){#main .garden-path .daily-play-header{width:min(560px,100% - 2 * var(--sa-gutter));margin:0 auto}}
.daily-play-header .edition-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.daily-play-header .edition-heading .sa-eyebrow{margin:0}
.daily-play-header .edition-heading>span{font-size:16px;color:var(--sa-paper)}
.daily-play-header .edition-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 12px}
.daily-play-header h1{margin:0;font:500 clamp(24px,6.6vw,32px)/1.15 var(--serif);color:var(--sa-surface);letter-spacing:-.4px}
.daily-play-header.sa-card-over-scene::before{display:none}
.daily-play-header .sa-progress__text.edition-reward{display:block;margin:0;font-size:16px;color:var(--sa-surface)}
/* The older Start button's styles (journey.css) still name .begin-journey;
   the shared button's look wins here. */
.garden-path .sa-btn.begin-journey{border-radius:999px;filter:none}
.garden-path .sa-btn.begin-journey span{margin:0}
.garden-path .path-play.begin-journey{background:var(--sa-clay);border-color:var(--sa-clay);color:var(--sa-surface)}
.garden-path .path-play.begin-journey:hover{background:var(--sa-clay-dark);border-color:var(--sa-clay-dark);color:var(--sa-surface)}
.daily-play-header .sa-btn.begin-journey{flex:none;width:100%;min-height:48px;margin-top:14px;padding:11px 24px;font-size:18px;background:var(--sa-clay);border-color:var(--sa-clay);color:var(--sa-surface)}
.daily-play-header .sa-btn.begin-journey:hover{background:var(--sa-clay-dark);border-color:var(--sa-clay-dark);color:var(--sa-surface)}
@media (min-width:700px){.daily-play-header .sa-btn.begin-journey{width:auto}}
.daily-play-header .habit-streak{margin:10px 0 0;color:var(--sa-paper)}
/* Difficulty: a chip on the card, still a real menu underneath. */
.daily-level{position:relative;flex:none;display:inline-flex}
.daily-level select{-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:44px;margin:0;padding:0 36px 0 16px;border:2px solid var(--sa-surface);border-radius:22px;background:transparent;color:var(--sa-surface);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.daily-level::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border:solid var(--sa-surface);border-width:0 2px 2px 0;transform:translate(0,-70%) rotate(45deg);pointer-events:none}
.daily-level select:focus-visible{outline:3px solid var(--sa-surface);outline-offset:2px}
.daily-level select option{color:var(--sa-ink);background:var(--sa-surface)}

/* Each game keeps one colour everywhere (--sa-game-<type> in design.css). */
.path-stop{--tile:var(--sa-game-search);--tile-ink:var(--sa-game-search-ink)}
.stop-scramble{--tile:var(--sa-game-scramble);--tile-ink:var(--sa-game-scramble-ink)}
.stop-sudoku{--tile:var(--sa-game-sudoku);--tile-ink:var(--sa-game-sudoku-ink)}
.stop-groups{--tile:var(--sa-game-groups);--tile-ink:var(--sa-game-groups-ink)}
.stop-cross{--tile:var(--sa-game-cross);--tile-ink:var(--sa-game-cross-ink)}
.stop-maze{--tile:var(--sa-game-maze);--tile-ink:var(--sa-game-maze-ink)}

/* Stops: a small tile on the path showing a tiny board, its number on a
   stone, and the game's name, haloed in paper so it reads over the art. */
.path-stops{list-style:none;margin:0;padding:0}
.path-spot{position:absolute;left:calc(var(--x) * var(--m));top:calc(var(--y) * var(--m));width:0;height:0;z-index:2}
.path-stop{position:absolute;left:0;top:calc(-36 * var(--u));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;width:max-content;max-width:170px;color:var(--sa-ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.path-tile{position:relative;display:grid;place-items:center;width:calc(72 * var(--u));height:calc(72 * var(--u));box-sizing:border-box;border:2px solid var(--tile-ink);border-radius:calc(15 * var(--u));background:var(--tile);box-shadow:0 calc(5 * var(--u)) 0 rgba(35,75,61,.18);transform:rotate(-3deg);transition:transform .2s ease}
/* Lights up as the line arrives: a gold ring that opens out. */
.path-ring{position:absolute;left:50%;top:calc(36 * var(--u));width:calc(72 * var(--u) + 20px);height:calc(72 * var(--u) + 20px);box-sizing:border-box;border:3px solid var(--sa-gold);border-radius:50%;opacity:0;transform:translate(-50%,-50%);pointer-events:none}
.spot-right .path-tile{transform:rotate(3deg)}
.path-stop:hover .path-tile{transform:translateY(-3px) rotate(0)}
.path-board{display:grid;place-items:center;width:72%;height:72%}
.path-board svg{display:block;width:100%;height:100%}
.path-board .letter-display{display:flex;gap:2px}
.path-board .letter-display span{display:grid;place-items:center;width:calc(11 * var(--u));height:calc(15 * var(--u));border:1px solid #b09d89;border-radius:3px;background:#fff9e8;font:calc(10 * var(--u))/1 var(--serif);color:var(--sa-ink)}
/* The number stone follows the stepping stones: not yet, now, done. */
.path-num{position:absolute;left:-12px;top:-12px;display:grid;place-items:center;width:28px;height:28px;box-sizing:border-box;border:2px solid var(--sa-sage);border-radius:50%;background:var(--sa-surface);color:var(--sa-ink);font-size:14px;font-weight:700;transform:rotate(3deg)}
.spot-right .path-num{transform:rotate(-3deg)}
.path-stop.current .path-num{border-color:var(--sa-ink);background:var(--sa-gold)}
.path-stop.started .path-num{background:conic-gradient(var(--sa-gold) 0 40%,var(--sa-surface) 0);border-color:var(--sa-ink)}
.path-stop.done .path-num{border-color:var(--sa-green);background:var(--sa-green)}
.path-stop.done .path-num::after{content:"";width:6px;height:11px;margin-top:-3px;border:solid var(--sa-surface);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.path-stop.done .path-board{opacity:.55;filter:saturate(.5)}
.path-name{display:flex;flex-direction:column;align-items:center;margin-top:12px;padding:2px 8px;border-radius:8px;background:rgba(248,240,224,.92);text-align:center;line-height:1.2}
.path-name strong{font:600 17px/1.2 var(--serif);color:var(--sa-ink)}
.path-name small{margin-top:2px;font-size:16px;color:#3d5a45}
.path-stop.current .path-name{margin-top:8px}
/* Outer space is the one dark place: its puzzle names sit on a soft cream card. */
.skin-space .path-name{padding:3px 10px 5px;border-radius:10px;background:rgba(251,247,238,.92);box-shadow:0 1px 6px rgba(20,24,48,.35)}
.skin-space .path-name strong,.skin-space .path-name small{text-shadow:none}
.path-stop:focus-visible{outline:none}
.path-stop:focus-visible .path-tile{outline:3px solid var(--sa-ink);outline-offset:4px}
/* Up next: a soft gold glow (the page's one attention cue) and the Play
   pill, the page's one primary action, tucked under the tile. */
.path-stop.current::before{content:"";position:absolute;left:50%;top:calc(36 * var(--u));z-index:-1;width:calc(72 * var(--u) + 56px);height:calc(72 * var(--u) + 56px);border-radius:50%;background:radial-gradient(closest-side,rgba(242,189,75,.85),rgba(242,189,75,.4) 58%,rgba(242,189,75,0));transform:translate(-50%,-50%);animation:path-glow 3.2s ease-in-out infinite;pointer-events:none}
@keyframes path-glow{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(.92)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.path-play{position:relative;z-index:1;margin-top:-14px;min-height:44px;padding:8px 22px;font-size:17px;white-space:nowrap;box-shadow:0 2px 0 rgba(27,51,38,.18)}
.garden-path .path-play{width:auto;min-width:0}

/* The finish: the sun at the end of the path, and the day's reward on the
   paper below the mural. */
.path-sun{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle,#ffe7a3,#f2bd4b 70%);color:#7a5413;transform:translate(-50%,-50%);z-index:2;box-shadow:0 0 0 3px rgba(255,253,247,.7)}
.path-sun::before{content:"";position:absolute;inset:-34px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(242,189,75,.55),rgba(242,189,75,0))}
.sun-ring{position:absolute;inset:-6px;border:3px solid var(--sa-gold);border-radius:50%;opacity:0;pointer-events:none}
.path-sun .sa-icon{width:30px;height:30px}
.path-end{position:relative;z-index:2;width:min(100% - 2 * var(--sa-gutter),330px);margin:6px auto 0;text-align:center}
.path-end h2{margin:0;font:500 22px/1.2 var(--serif);color:var(--sa-ink)}
.path-end p{margin:4px 0 8px;font-size:16px;line-height:1.35;color:#2f4a3b}
.path-passport{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:16px;font-weight:600;color:var(--sa-green)}
.path-passport .sa-icon{width:20px;height:20px}

/* One ambient motion: petals (or leaves, or snow) drifting from the tree. */
.path-drift-zone{width:calc(var(--dw) * var(--m));height:calc(var(--dh) * var(--m));pointer-events:none;z-index:1}
.path-drift{position:absolute;width:9px;height:6px;opacity:0;pointer-events:none}
.drift-petal{border-radius:70% 30% 70% 30%;background:radial-gradient(circle at 35% 40%,#fffef8,#f3ead5 70%,#e5d9bd);box-shadow:0 0 0 .5px #d8cdb2}
.drift-leaf{width:11px;height:8px;border-radius:80% 0 80% 0;background:linear-gradient(135deg,#e2a23b,#b8572e)}
.drift-snow{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 2px #c9d3d6}
.drift-bubble{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 16%,rgba(255,255,255,.2) 38%,rgba(205,234,238,.25) 72%,rgba(255,255,255,.6));box-shadow:inset 0 0 0 .8px rgba(255,255,255,.85)}
.drift-star{width:13px;height:13px;background:radial-gradient(circle,#fffbe8 0 16%,#f4d27c 42%,#e2ad48);clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%)}
@media (prefers-reduced-motion:reduce){
 .path-stop.current::before{animation:none;opacity:1}
 .path-tile{transition:none}
 .line-head{display:none}
}