/* Letter Friends (v26) and Today's Walk (v25), 2026-10-02. */

/* ---------- a friend: the letter's body, its dress, and three looks ---------- */
.lf { display: block; overflow: visible; }
.lf .lf-dress { transition: opacity .55s ease, transform .55s cubic-bezier(.3, 1.4, .5, 1); transform-box: view-box; transform-origin: 50% 60%; }
.lf .lf-fill { transition: stroke .5s ease; }
.lf .lf-fill-dot { transition: fill .5s ease; }
.lf.is-soft .lf-dress { opacity: .42; }
.lf.is-plain .lf-dress { opacity: 0; transform: scale(.86); }
.lf.is-plain .lf-fill { stroke: #4a3620; }
.lf.is-plain .lf-fill-dot { fill: #4a3620; }
/* Growing in: the dress pops on a beat after the colour arrives. */
.lf.is-growing .lf-dress { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .lf .lf-dress, .lf .lf-fill, .lf .lf-fill-dot { transition: none; } }

/* ---------- Find My Friend ---------- */
.ff { display: grid; gap: clamp(12px, 3vh, 26px); justify-items: center; padding: 8px 12px 16px; }
.ff-top button { appearance: none; border: 0; background: #fffaf0; border-radius: 28px; padding: 10px; box-shadow: 0 4px 0 #c9bda4, 0 0 0 4px #4a3620; cursor: pointer; position: relative; }
.ff-top svg { width: min(150px, 30vw, 22vh); height: auto; display: block; }
.ff-curtain.is-peeking .ff-peek { position: absolute; inset: auto -18px -14px auto; animation: ff-peek .5s ease-out both; }
.ff-peek svg { width: 82px; }
@keyframes ff-peek { from { transform: translateY(14px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.ff-choices { display: flex; flex-wrap: nowrap; max-width: 100%; justify-content: center; gap: clamp(12px, 3vw, 26px); }
.ff-card { appearance: none; border: 0; background: #ccfbef; border-radius: 26px; padding: 10px; min-width: 0; flex: 0 1 auto; box-shadow: 0 5px 0 #62cdf4, 0 0 0 4px #4a3620; cursor: pointer; transition: transform .25s ease, opacity .3s ease; }
.ff-card svg { width: min(140px, 25vw, 20vh); height: auto; }
.ff-card.is-letter { background: #fffaf0; box-shadow: 0 5px 0 #c9bda4, 0 0 0 4px #4a3620; }
.ff-card.is-hint { animation: ff-hint 1.2s ease-in-out infinite; }
.ff-card.is-right { transform: translateY(-6px) scale(1.06); background: #b7e779; }
.ff-card.is-away { opacity: .35; transform: scale(.94); }
@keyframes ff-hint { 50% { box-shadow: 0 5px 0 #62cdf4, 0 0 0 4px #4a3620, 0 0 0 12px #ffe49a; } }
.ff-progress { display: flex; gap: 8px; }
.ff-progress i { width: 14px; height: 14px; border-radius: 50%; background: #e5dcc8; box-shadow: inset 0 0 0 2.4px #a89478; }
.ff-progress i.is-on { background: #ffa06e; }
.ff-progress i.is-done { background: #7fce54; }
@media (prefers-reduced-motion: reduce) { .ff-card.is-hint, .ff-curtain.is-peeking .ff-peek { animation: none; } }

/* ---------- the Friend Book spread ---------- */
.fb { display: grid; gap: 14px; justify-items: center; padding: 8px 12px 18px; width: 100%; box-sizing: border-box; }
.fb-spread { display: grid; justify-items: center; gap: 10px; background: #fffdf7; border-radius: 30px; padding: 18px 26px 22px; box-shadow: 0 6px 0 #e5dcc8, 0 0 0 4px #4a3620; min-width: min(88vw, 360px); }
.fb-friend { appearance: none; border: 0; background: #ccfbef; border-radius: 50%; padding: 18px; cursor: pointer; box-shadow: inset 0 -8px 0 #96ecff; }
.fb-friend svg { width: clamp(170px, 40vmin, 240px); height: auto; }
.fb-caption { display: flex; align-items: baseline; gap: 22px; font-family: "Amiri Quran", serif; color: #4a3620; }
.fb-letter { font-size: clamp(44px, 9vmin, 64px); line-height: 1.4; }
.fb-word-wrap { position: relative; display: inline-block; font-size: clamp(40px, 8vmin, 56px); line-height: 1.5; }
.fb-word { position: relative; z-index: 1; }
.fb-mark { position: absolute; top: .3em; height: .95em; border-radius: 18px; background: #ffe49a; box-shadow: 0 0 0 3px #ffa798; opacity: 0; transition: opacity .4s ease; z-index: 0; }
.fb-nav { display: flex; gap: 22px; align-items: center; direction: ltr; }
.fb-next svg { transform: scaleX(-1); }
.fb-nav button[disabled] { opacity: .35; }

/* ---------- Letter book pages: friends instead of signs ---------- */
.book-letter.is-friend { background: #ccfbef; border-radius: 22px; padding: 4px; }
.book-letter.is-friend svg { width: 76px; height: 76px; }

/* ---------- meeting a letter: its friend arrives ---------- */
.meet-friend { position: absolute; inset: auto -1% -3% auto; appearance: none; border: 0; background: #ccfbef; border-radius: 50%; padding: 8px; box-shadow: 0 4px 0 #96ecff, 0 0 0 4px #4a3620; cursor: pointer; z-index: 3; animation: meet-friend-in .7s cubic-bezier(.3, 1.5, .5, 1) both; }
.meet-friend svg { width: clamp(80px, 16vmin, 112px); height: auto; }
@keyframes meet-friend-in { from { transform: translateY(30px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .meet-friend { animation: none; } }

/* ---------- Today's Walk ---------- */
.map-walk { position: relative; }
/* The walk is the day's live thing until it is walked (ART §2 accent-warm). */
.map-walk:not(.is-finished) { box-shadow: 0 0 0 4px #ffa06e; }
.map-walk .walk-steps { position: absolute; inset: auto 0 -6px 0; display: flex; justify-content: center; gap: 3px; }
.map-walk .walk-steps i { width: 7px; height: 7px; border-radius: 50%; background: #e5dcc8; box-shadow: inset 0 0 0 1.6px #a89478; }
.map-walk .walk-steps i.is-done { background: #7fce54; }
.lg-walk .walk-stage { display: grid; gap: 18px; justify-items: center; padding: 10px 12px 20px; }
.walk-trail { position: relative; width: min(94vw, 720px); height: clamp(260px, 52vh, 420px); }
.walk-trail.is-upright { width: min(92vw, 460px); height: min(76vh, 760px); }
.walk-trail > svg.walk-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.walk-stone { position: absolute; transform: translate(-50%, -50%); appearance: none; border: 0; padding: 0; background: #fffaf0; border-radius: 50%; width: clamp(84px, 15vmin, 116px); height: clamp(84px, 15vmin, 116px); box-shadow: 0 5px 0 #c9bda4, 0 0 0 4px #4a3620; cursor: pointer; display: grid; place-items: center; }
.walk-stone svg { width: 78%; height: 78%; }
.walk-stone.is-done { background: #b7e779; box-shadow: 0 5px 0 #4e9677, 0 0 0 4px #4a3620; }
.walk-stone.is-next { box-shadow: 0 5px 0 #c9bda4, 0 0 0 4px #4a3620, 0 0 0 10px #ffa06e; animation: walk-next 1.6s ease-in-out infinite; }
.walk-stone .walk-check { position: absolute; inset: -6px -6px auto auto; width: 30px; height: 30px; border-radius: 50%; background: #7fce54; box-shadow: 0 0 0 3px #4a3620; display: grid; place-items: center; }
.walk-stone .walk-check svg { width: 20px; height: 20px; }
.walk-pet { position: absolute; transform: translate(-112%, -78%); pointer-events: none; transition: left .9s ease, top .9s ease; }
.walk-end { position: absolute; transform: translate(-50%, -50%); width: clamp(70px, 12vmin, 96px); }
.walk-nap { display: grid; justify-items: center; gap: 8px; }
.walk-nap .walk-zz { font: 700 28px ui-rounded, system-ui; color: #6064a0; animation: walk-zz 2.4s ease-in-out infinite; }
@keyframes walk-next { 50% { box-shadow: 0 5px 0 #c9bda4, 0 0 0 4px #4a3620, 0 0 0 16px #ffe49a; } }
@keyframes walk-zz { 50% { transform: translateY(-8px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .walk-stone.is-next, .walk-nap .walk-zz { animation: none; } .walk-pet { transition: none; } }

/* ---------- the picture-book games (v27) ---------- */
.bk { display: grid; gap: clamp(10px, 2.4vh, 22px); justify-items: center; padding: 6px 12px 16px; width: 100%; box-sizing: border-box; }
.bk button { appearance: none; border: 0; cursor: pointer; font: inherit; }
.bk-progress { display: flex; gap: 8px; }
.bk-progress i { width: 14px; height: 14px; border-radius: 50%; background: #e5dcc8; box-shadow: inset 0 0 0 2.4px #a89478; }
.bk-progress i.is-on { background: #ffa06e; }
.bk-progress i.is-done { background: #7fce54; }
.bk .is-hint { animation: bk-hint 1.2s ease-in-out infinite; }
@keyframes bk-hint { 50% { filter: drop-shadow(0 0 10px #ffe49a) drop-shadow(0 0 4px #f3c955); } }

/* Peekaboo flaps */
.bk-ask .bk-ear, .bk-ask .bk-pic { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: #fffaf0; box-shadow: 0 5px 0 #c9bda4, 0 0 0 4px #4a3620; }
.bk-hedge { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2.6vw, 22px); padding: 18px 14px 10px; border-radius: 30px; background: #b7e779; box-shadow: inset 0 -10px 0 #7fce54; }
.bk-flap { position: relative; width: clamp(92px, 21vw, 132px); aspect-ratio: 100 / 110; background: #fffdf7; border-radius: 46px 46px 12px 12px; box-shadow: 0 0 0 4px #4a3620; padding: 0; perspective: 600px; }
.bk-behind { position: absolute; inset: 14% 8% 6%; display: grid; place-items: center; }
.bk-behind svg { width: 90%; height: auto; }
.bk-door { position: absolute; inset: 0; transform-origin: 0 50%; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.bk-door svg.bk-flap-door { width: 100%; height: 100%; display: block; }
.bk-door-letter { position: absolute; inset: 26% 18% 18%; display: grid; place-items: center; background: #fffaf0; border-radius: 50%; box-shadow: 0 0 0 3px #4a3620; }
.bk-door-letter svg { width: 82%; height: auto; }
.bk-flap.is-open .bk-door { transform: rotateY(-105deg); }

/* Sound sort */
.bk-card-slot { min-height: 150px; display: grid; place-items: center; }
.bk-card { width: 140px; height: 140px; border-radius: 28px; background: #fffaf0; box-shadow: 0 6px 0 #c9bda4, 0 0 0 4px #4a3620; display: grid; place-items: center; animation: bk-deal .45s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes bk-deal { from { transform: translateY(-30px) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.bk-baskets { display: flex; gap: clamp(12px, 4vw, 34px); justify-content: center; flex-wrap: nowrap; }
.bk-basket { position: relative; display: grid; justify-items: center; background: transparent; padding: 0; width: clamp(110px, 27vw, 160px); }
.bk-basket-label { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: #ccfbef; box-shadow: 0 0 0 4px #4a3620; margin-bottom: -10px; z-index: 1; }
.bk-basket-label svg { width: 80%; height: auto; }
.bk-basket-art { width: 100%; height: auto; }
.bk-basket-in { position: absolute; inset: auto 12% 8% 12%; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; pointer-events: none; }

/* The hoopoe's trip */
.bk-trip { max-width: 640px; background: #ccfbef; border-radius: 30px; box-shadow: inset 0 -26px 0 #b7e779; }
.bk-parade { display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 2px; min-height: 84px; flex-wrap: wrap; justify-content: center; }
.bk-walker { display: inline-block; animation: bk-bob 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.2s); }
.bk-walker.is-new { animation: bk-join .6s cubic-bezier(.3, 1.5, .5, 1) both, bk-bob 1.4s ease-in-out .6s infinite; }
.bk-walker.is-saying svg { filter: drop-shadow(0 0 8px #ffe49a); transform: scale(1.1); transition: transform .2s ease; }
@keyframes bk-bob { 50% { transform: translateY(-4px); } }
@keyframes bk-join { from { transform: translateX(-40px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.bk-sign { position: relative; width: 120px; }
.bk-sign > svg { width: 120px; height: 120px; display: block; }
.bk-sign > span { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); }
.bk-waiting { display: flex; gap: clamp(10px, 3vw, 22px); justify-content: center; }
.bk-friend svg, .bk-piece svg { width: min(96px, 22vw); height: auto; }
.bk-friend { flex: 0 1 auto; min-width: 0; background: #fffdf7; border-radius: 26px; padding: 8px; box-shadow: 0 5px 0 #c9bda4, 0 0 0 4px #4a3620; }
.bk-home svg { width: min(60vw, 240px); height: auto; }
.bk-trip.is-home .bk-walker { animation-duration: .6s; }

/* Friend shapes */
.bk-missing { display: grid; place-items: center; width: clamp(200px, 50vmin, 260px); aspect-ratio: 1; border-radius: 50%; background: #ccfbef; box-shadow: inset 0 -10px 0 #96ecff; }
.bk-missing svg { width: 82%; height: auto; }
.lf.is-bodiless .lf-body { opacity: 0; }
.lf.is-whole .lf-body { animation: bk-body-in .55s cubic-bezier(.3, 1.5, .5, 1) both; transform-box: view-box; transform-origin: 50% 50%; }
@keyframes bk-body-in { from { transform: scale(1.3); opacity: 0; } to { transform: none; opacity: 1; } }
.bk-pieces { display: flex; gap: clamp(10px, 3vw, 22px); justify-content: center; }
.bk-piece { background: #fffaf0; border-radius: 24px; padding: 8px; box-shadow: 0 5px 0 #c9bda4, 0 0 0 4px #4a3620; transition: opacity .3s ease, transform .3s ease; }
.bk-piece.is-used { opacity: 0; transform: translateY(-40px) scale(.5); }

/* Busy market */
.bk-lens-row { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 640px; justify-content: space-between; }
.bk-lens { position: relative; width: 104px; height: 104px; background: transparent; padding: 0; }
.bk-lens > svg { width: 100%; height: 100%; }
.bk-lens > span { position: absolute; left: 13%; top: 13%; width: 62%; height: 62%; display: grid; place-items: center; }
.bk-lens > span svg { width: 100%; height: auto; }
.bk-bag { flex: 1; min-height: 52px; border-radius: 26px; background: #fffaf0; box-shadow: inset 0 0 0 3px #c9bda4; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px; align-items: center; }
.bk-scene { position: relative; width: 100%; max-width: 640px; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 4px #4a3620; background: #ccfbef; }
.bk-stalls { position: absolute; inset: 0; width: 100%; height: 100%; }
.bk-good { position: absolute; width: clamp(56px, 14%, 84px); aspect-ratio: 1; padding: 0; background: transparent; border-radius: 50%; transition: transform .3s ease, opacity .4s ease; }
.bk-good svg { width: 100%; height: 100%; }
.bk-good.is-found { opacity: .25; transform: scale(.7); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .bk .is-hint, .bk-walker, .bk-walker.is-new, .bk-card, .lf.is-whole .lf-body { animation: none; }
  .bk-door { transition: none; }
}

/* ---------- the Sand Table (v28) ---------- */
.sand { display: grid; gap: 14px; justify-items: center; padding: 6px 12px 16px; }
.sand-tray { position: relative; width: min(100%, 62vh, 460px); aspect-ratio: 1; border-radius: 34px; background: #c69434; padding: 16px; box-shadow: 0 0 0 4px #4a3620, inset 0 -8px 0 #70501b; box-sizing: border-box; }
.sand-paper { position: absolute; inset: 16px; border-radius: 22px; overflow: hidden;
  background-color: #e5dcc8;
  background-image: radial-gradient(#c9bda4 1.2px, transparent 1.6px), radial-gradient(#fffaf0 1px, transparent 1.4px);
  background-size: 14px 14px, 19px 19px; background-position: 0 0, 7px 9px;
  box-shadow: inset 0 6px 0 #c9bda4; }
.sand-paper.is-raked { animation: sand-rake .45s ease-out; }
@keyframes sand-rake { 40% { background-position: 10px 0, 17px 9px; filter: brightness(1.05); } }
.sand-paper .trace-guided { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
/* Grooves: the drawn line is darker sand with a pale lip below it. */
.sand-paper .tg-ink-path { stroke-width: 10; filter: drop-shadow(0 1.6px 0 #fffaf0); }
.sand-paper .tg-ink-dot { filter: drop-shadow(0 1.6px 0 #fffaf0); }
.sand-paper .tg-guide-edge { stroke: #c9bda4; }
.sand-paper .tg-guide-path { stroke: #fffaf0; }
/* The guide fades with the level. */
.sand-paper[data-level="dotted"] .tg-guide-edge { stroke: none; }
.sand-paper[data-level="dotted"] .tg-guide-path { stroke: #a89478; stroke-width: 2.4; stroke-dasharray: .5 5; }
.sand-paper[data-level="dotted"] .tg-guide-dot { fill: none; stroke: #a89478; stroke-dasharray: 1 2; }
.sand-paper[data-level="start"] .tg-guide-edge, .sand-paper[data-level="start"] .tg-guide-path, .sand-paper[data-level="start"] .tg-guide-dot,
.sand-paper[data-level="memory"] .tg-guide-edge, .sand-paper[data-level="memory"] .tg-guide-path, .sand-paper[data-level="memory"] .tg-guide-dot,
.sand-paper[data-level="memory"] .tg-arrow, .sand-paper[data-level="memory"] .tg-start { display: none; }
.sand-friend { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); overflow: visible; pointer-events: none; opacity: 0; transform: translateY(14px) scale(.92); transition: opacity .6s ease, transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.sand-friend.is-up { opacity: 1; transform: none; }
.sand-tools { display: flex; align-items: center; gap: 18px; }
.sand-progress { display: flex; gap: 8px; }
.sand-progress i { width: 14px; height: 14px; border-radius: 50%; background: #e5dcc8; box-shadow: inset 0 0 0 2.4px #a89478; }
.sand-progress i.is-on { background: #ffa06e; }
.sand-progress i.is-done { background: #7fce54; }
.sand-hint svg { display: block; }
@media (prefers-reduced-motion: reduce) { .sand-friend { transition: none; } .sand-paper.is-raked { animation: none; } }

/* ---------- Living Books (v29) ---------- */
.lb-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); justify-items: center; gap: 20px; width: 100%; max-width: 640px; box-sizing: border-box; padding: 16px 12px 24px; }
.lb-spine { position: relative; appearance: none; border: 0; cursor: pointer; display: grid; justify-items: center; gap: 6px; width: 150px; padding: 12px 10px 14px; border-radius: 10px 24px 24px 10px; background: #fffdf7; box-shadow: inset 12px 0 0 #ee806f, 0 6px 0 #c9bda4, 0 0 0 4px #4a3620; }
.lb-spine:nth-child(2n) { box-shadow: inset 12px 0 0 #62cdf4, 0 6px 0 #c9bda4, 0 0 0 4px #4a3620; }
.lb-spine:nth-child(3n) { box-shadow: inset 12px 0 0 #7fce54, 0 6px 0 #c9bda4, 0 0 0 4px #4a3620; }
.lb-spine-title { font: 26px/1.5 "Amiri Quran", serif; color: #4a3620; }
.lb-fav { position: absolute; inset: -10px -10px auto auto; width: 34px; height: 34px; border-radius: 50%; background: #ffe49a; box-shadow: 0 0 0 3px #4a3620; display: grid; place-items: center; }
.lb { display: grid; gap: 14px; justify-items: center; padding: 6px 12px 18px; width: 100%; box-sizing: border-box; min-width: 0; }
.lb-page { width: 100%; max-width: 560px; min-width: 0; border-radius: 18px 30px 30px 18px; background: #fffdf7; box-shadow: inset -14px 0 0 #e5dcc8, 0 6px 0 #c9bda4, 0 0 0 4px #4a3620; padding: 14px 26px 18px 14px; box-sizing: border-box; display: grid; gap: 10px; }
.lb-art { position: relative; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; background: #ccfbef; display: grid; place-items: center; }
.lb-art.is-cover { background: #ffe49a; }
.lb-sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb-friend, .lb-cover, .lb-moon { position: relative; z-index: 1; }
.lb-friend svg { width: min(160px, 34vw); height: auto; }
.lb-friend.is-asleep .lf-front { opacity: .55; }
.lb-sun { position: absolute; inset: 6% auto auto 6%; z-index: 1; animation: lb-rise 1.6s ease-out both; }
@keyframes lb-rise { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.lb-zz { position: absolute; inset: 14% 22% auto auto; z-index: 2; font: 700 28px ui-rounded, system-ui; color: #ffe49a; animation: walk-zz 2.4s ease-in-out infinite; }
.lb-flap, .lb-guess { appearance: none; border: 0; background: transparent; cursor: pointer; position: relative; width: min(220px, 48vw); aspect-ratio: 16 / 13; z-index: 1; }
.lb-behind { position: absolute; inset: 0; display: grid; place-items: center; }
.lb-behind svg { width: 70%; height: auto; }
.lb-bush { position: absolute; inset: 0; transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); animation: lb-wiggle 2.8s ease-in-out 2s infinite; }
.lb-bush svg { width: 100%; height: 100%; }
.lb-flap.is-open .lb-bush { transform: translate(64%, 20%) rotate(18deg); animation: none; }
@keyframes lb-wiggle { 0%, 88%, 100% { transform: none; } 92% { transform: rotate(-3deg); } 96% { transform: rotate(3deg); } }
.lb-guess svg { width: 100%; height: auto; }
.lb-text { margin: 0; text-align: center; font: clamp(30px, 6.4vmin, 44px)/1.7 "Amiri Quran", serif; color: #4a3620; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .35em; }
.lb-word { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; padding: 0 .12em; border-radius: 12px; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.lb-word.is-said { background: #ffe49a; transform: translateY(-3px); }
.lb-word.is-decodable { text-decoration: underline dotted #c69434 3px; text-underline-offset: .35em; }
.lb-word.is-trying { background: #ccfbef; box-shadow: 0 0 0 3px #62cdf4; }
.lb-blank { display: inline-grid; place-items: center; width: 1.6em; height: 1.4em; vertical-align: middle; background: #ccfbef; box-shadow: inset 0 0 0 2.4px #62cdf4; }
.lb-blank svg { width: 1.3em; height: 1.3em; }
.lb-blank.is-waiting { animation: bk-hint 1.2s ease-in-out infinite; }
.lb-blank.is-filled { width: auto; height: auto; background: transparent; box-shadow: none; }
.lb-reveal { display: contents; }
.lb-reveal .lb-word { color: #c25a49; }
.lb-nav { display: flex; gap: 22px; align-items: center; direction: ltr; }
.lb-next svg { transform: scaleX(-1); }
.lb-nav button[disabled] { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .lb-sun, .lb-zz, .lb-bush, .lb-blank.is-waiting { animation: none; } .lb-bush { transition: none; } }

/* ---------- the Story of the Garden (v30) ---------- */
/* Lands still waiting for their friends are pale, never grey. */
.sg-wash { position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); background: #fffdf7; pointer-events: none; z-index: 0; transition: opacity 2.4s ease; mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.map-play-places .map-friends-garden { position: relative; }
.map-friends-garden .sg-count { position: absolute; inset: -8px -8px auto auto; min-width: 26px; height: 26px; border-radius: 13px; background: #7fce54; box-shadow: 0 0 0 3px #4a3620; font: 700 15px/26px ui-rounded, system-ui; color: #4a3620; text-align: center; }
.sg-parade { position: fixed; left: 0; right: 0; bottom: 14%; display: flex; justify-content: center; gap: 4px; pointer-events: none; z-index: 40; }
.sg-parade span { animation: sg-march 4.4s cubic-bezier(.3, .9, .5, 1) both; animation-delay: calc(var(--i) * .18s); }
@keyframes sg-march { 0% { transform: translateX(-60vw); opacity: 0; } 15% { opacity: 1; } 60% { transform: none; } 75% { transform: translateY(-14px); } 85% { transform: none; } 100% { transform: none; opacity: 0; } }

/* The wind story: four wordless pages. */
.sg-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: center; padding: 8px 12px 18px; width: 100%; box-sizing: border-box; }
.sg-scene { position: relative; width: 100%; max-width: 640px; aspect-ratio: 3 / 2; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 4px #4a3620, 0 6px 0 #c9bda4; }
.sg-sky { position: absolute; inset: 0; background: linear-gradient(#96ecff, #ccfbef 55%, #b7e779 55%, #7fce54); transition: filter 1.4s ease; }
.sg-wind { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.sg-friends { position: absolute; inset: 8% 4% 6%; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end; gap: 2px; }
.sg-friend { transition: transform 1.4s cubic-bezier(.5, -.3, .7, 1), opacity 1.2s ease; transition-delay: calc(var(--i) * .08s); }
.sg-pet { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); opacity: 0; transition: opacity .8s ease; }
.sg-scene.is-page-1 .sg-wind { opacity: 1; animation: sg-gust 1.6s ease-in-out infinite; }
.sg-scene.is-page-1 .sg-friend, .sg-scene.is-page-2 .sg-friend { transform: translate(calc((var(--i) - 3.5) * 40vw), -70vh) rotate(calc(var(--i) * 90deg)); opacity: 0; }
.sg-scene.is-page-1 .sg-sky, .sg-scene.is-page-2 .sg-sky { filter: saturate(.45) brightness(1.06); }
.sg-scene.is-page-2 .sg-pet, .sg-scene.is-page-3 .sg-pet { opacity: 1; }
.sg-scene.is-page-3 .sg-friends { align-content: center; justify-content: flex-end; padding-right: 12%; }
.sg-scene.is-page-3 .sg-friend { display: none; }
.sg-scene.is-page-3 .sg-friend:first-child { display: block; opacity: 1; transform: scale(1.7); animation: sg-home .9s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes sg-home { from { transform: scale(.3); opacity: 0; } to { transform: scale(1.7); opacity: 1; } }
.sg-scene.is-page-3 .sg-pet { left: 30%; }
@keyframes sg-gust { 50% { transform: translateX(14px); } }

/* The Friends' Garden. */
.sg-garden { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: center; padding: 8px 12px 20px; width: 100%; box-sizing: border-box; }
.sg-garden-tools { display: flex; gap: 16px; align-items: center; }
.sg-replay-story { background: #96ecff; }
.sg-replay-story svg, .sg-replay-story .sg-wind { position: static; opacity: 1; width: 34px; height: 34px; animation: none; }
.sg-replay-story svg path { stroke: #4a3620; }
.sg-keepsake { appearance: none; border: 0; background: transparent; cursor: pointer; width: 96px; filter: drop-shadow(0 0 10px #ffe49a); }
.sg-plots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; width: 100%; max-width: 760px; padding: 16px; box-sizing: border-box; border-radius: 30px; background: #b7e779; box-shadow: inset 0 -10px 0 #7fce54, 0 0 0 4px #4a3620; }
.sg-plot { appearance: none; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; min-height: 92px; padding: 0; }
.sg-plot:not(.is-home) svg { width: 70px; }

/* The Bismillah graduation. */
.sg-grad { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: center; padding: 10px 12px 20px; width: 100%; box-sizing: border-box; }
.sg-grad-friends { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 760px; }
.sg-rehal { padding: 18px 26px; border-radius: 28px; background: #fffdf7; box-shadow: 0 0 0 4px #70501b, 0 8px 0 #c69434; }
.sg-bismillah { font: clamp(36px, 8vmin, 64px)/1.8 "Amiri Quran", serif; color: #4a3620; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .3em; }
.sg-bword { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; padding: 0 .1em; border-radius: 14px; cursor: pointer; transition: background .3s ease, color .3s ease; }
.sg-bword.is-reading { background: #ffe49a; }
.sg-bword.is-read { color: #2f5c46; }
.sg-bword.is-yours { background: #ccfbef; box-shadow: 0 0 0 3px #62cdf4; }
.sg-grad-pet { display: block; }
.sg-grad-end { display: flex; align-items: center; gap: 18px; }
.sg-scroll svg { width: 110px; height: auto; }
.sg-grad.is-celebrating .sg-grad-friends span { animation: bk-bob .6s ease-in-out infinite; animation-delay: calc(var(--i) * -.07s); }
@media (prefers-reduced-motion: reduce) {
  .sg-parade span, .sg-scene.is-page-1 .sg-wind, .sg-grad.is-celebrating .sg-grad-friends span { animation: none; }
  .sg-friend, .sg-sky, .sg-wash { transition: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .sg-scene { max-width: none; width: auto; height: calc(100vh - 30px); }
  .sg-story { grid-template-columns: 1fr auto; align-items: center; }
  .sg-grad { grid-template-columns: 1fr auto; align-items: center; }
  .sg-grad-friends { grid-column: 1 / -1; }
}

/* ---------- the Puzzle Tree (v31) ---------- */
.pz { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 2.4vh, 20px); justify-items: center; padding: 6px 12px 16px; width: 100%; box-sizing: border-box; }
.pz button { appearance: none; border: 0; cursor: pointer; font: inherit; }
.pz-progress { display: flex; gap: 8px; }
.pz-progress i { width: 14px; height: 14px; border-radius: 50%; background: #e5dcc8; box-shadow: inset 0 0 0 2.4px #a89478; }
.pz-progress i.is-on { background: #ffa06e; }
.pz-progress i.is-done { background: #7fce54; }
.pz-board { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 3vw, 22px); }
.pz-tile { background: #fffaf0; border-radius: 26px; padding: 10px; box-shadow: 0 5px 0 #c9bda4, 0 0 0 4px #4a3620; transition: transform .2s ease; }
.pz-tile svg { width: min(92px, 22vw); height: auto; }
.pz .is-hint { animation: bk-hint 1.2s ease-in-out infinite; }
/* Echo parade */
.pz-singers { display: flex; gap: 8px; min-height: 84px; padding: 6px 14px; border-radius: 26px; background: #b7e779; box-shadow: inset 0 -8px 0 #7fce54; transition: filter .4s ease; }
.pz-singers.is-hidden .pz-singer { opacity: 0; transform: translateY(16px); }
.pz-singers { position: relative; overflow: hidden; }
.pz-hedge { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.pz-hedge svg { width: 100%; height: 100%; display: block; }
.pz-singers.is-hidden .pz-hedge { opacity: 1; }
.pz-singer { transition: opacity .4s ease, transform .4s ease; }
.pz-singers.is-hidden::after { content: ""; }
.pz-slots { display: flex; gap: 10px; }
.pz-slot { width: 72px; height: 72px; border-radius: 20px; box-shadow: inset 0 0 0 3px #a89478; background: #fffdf7; display: grid; place-items: center; }
.pz-slot.is-full { background: #ccfbef; box-shadow: inset 0 0 0 3px #62cdf4; animation: ff-peek .4s ease-out both; }
.pz-singers:not(.is-hidden) .pz-singer { animation: bk-bob .7s ease-in-out infinite; }
/* Dots last */
.pz-reveal { width: min(220px, 50vw, 32vh); aspect-ratio: 1; border-radius: 30px; background: #fffdf7; box-shadow: 0 6px 0 #c9bda4, 0 0 0 4px #4a3620; padding: 12px; box-sizing: border-box; }
.pz-reveal svg { width: 100%; height: 100%; overflow: visible; }
.pz-body { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s ease; }
.pz-reveal.is-drawn .pz-body { stroke-dashoffset: 0; }
.pz-dot { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.2); transition: opacity .3s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.pz-dot.is-on { opacity: 1; transform: none; }
.pz-reveal.is-early { box-shadow: 0 6px 0 #c9bda4, 0 0 0 4px #4a3620, 0 0 0 12px #ffe49a; }
/* Letter train */
.pz-sky { position: relative; width: 100%; max-width: 640px; height: clamp(200px, 40vh, 320px); border-radius: 28px; background: linear-gradient(#96ecff, #ccfbef); overflow: hidden; }
.pz-balloon { position: absolute; left: clamp(4px, calc(var(--x) - 40px), calc(100% - 84px)); top: 12%; width: 80px; background: transparent; padding: 0; animation: pz-float 3.2s ease-in-out infinite; animation-delay: var(--d); }
.pz-balloon svg { width: 100%; height: auto; display: block; }
.pz-balloon-letter { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); }
.pz-balloon.is-popped { visibility: hidden; }
@keyframes pz-float { 50% { transform: translateY(-10px); } }
.pz-rails { display: flex; align-items: flex-end; gap: 2px; min-height: 76px; padding: 0 10px 6px; border-bottom: 6px solid #a89478; width: min(100%, 640px); box-sizing: border-box; }
.pz-engine svg { width: 100px; height: auto; display: block; }
.pz-cars { display: flex; gap: 2px; }
.pz-car { position: relative; width: 76px; animation: ff-peek .4s ease-out both; }
.pz-car svg { width: 100%; height: auto; display: block; }
.pz-car-letter { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); background: #fffaf0; border-radius: 10px; }
.pz-car.is-singing .pz-car-letter { box-shadow: 0 0 0 4px #ffe49a; }
.pz-rails.is-leaving { animation: pz-chug 1.6s ease-in-out infinite; }
@keyframes pz-chug { 50% { transform: translateY(-2px); } }
/* Same letter */
.pz-target { display: grid; place-items: center; width: min(170px, 40vw, 28vh); aspect-ratio: 1; border-radius: 50%; background: #ccfbef; box-shadow: inset 0 -8px 0 #96ecff; }
.pz-target svg { width: 78%; height: auto; }
.pz-turned { display: inline-block; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
@media (prefers-reduced-motion: reduce) {
  .pz .is-hint, .pz-balloon, .pz-rails.is-leaving, .pz-singers:not(.is-hidden) .pz-singer, .pz-slot.is-full, .pz-car { animation: none; }
  .pz-body, .pz-dot, .pz-turned, .pz-singer { transition: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .pz { height: 100%; align-content: center; }
  .pz-echo, .pz-dots, .pz-same { grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: 20px; align-items: center; }
  .pz-echo .pz-singers, .pz-dots .pz-reveal, .pz-same .pz-target { grid-row: 1 / 3; }
  .pz-echo .pz-slots { grid-column: 2; }
  .pz-sky { height: calc(100vh - 140px); max-width: none; }
  .pz-balloon { width: clamp(84px, 26vh, 110px); }
  .pz-balloon-letter svg { width: 60px; height: 60px; }
}

/* ---------- Lantern Hunt and Letter Shadows (v32) ---------- */
.sh { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 2.4vh, 20px); justify-items: center; padding: 6px 12px 16px; width: 100%; box-sizing: border-box; }
.sh button { appearance: none; border: 0; cursor: pointer; font: inherit; }
.sh-night { position: relative; width: 100%; max-width: 720px; aspect-ratio: 5 / 3; border-radius: 28px; overflow: hidden; touch-action: none; background: linear-gradient(#4a4d84, #34375f 55%, #4e9677 55%, #2f5c46); box-shadow: 0 0 0 4px #4a3620; }
.sh-thing { position: absolute; transform: translate(-50%, -50%); background: transparent; padding: 0; z-index: 1; width: 15%; }
.sh-night.is-tall { aspect-ratio: 3 / 4; max-width: 460px; }
.sh-night.is-tall .sh-thing { width: 22%; }
.sh-glow { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #fffdf7; box-shadow: 0 0 0 3px #a89478; transition: box-shadow .3s ease, transform .3s ease; }
.sh-glow svg { width: 78%; height: auto; }
.sh-thing.is-lit .sh-glow { box-shadow: 0 0 0 3px #4a3620, 0 0 18px #ffe49a; }
.sh-thing.is-found .sh-glow { background: #ffe49a; box-shadow: 0 0 0 3px #c69434, 0 0 22px #f3c955; transform: scale(.9); }
.sh-dark { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), transparent 0, transparent var(--lr, 120px), rgb(35 37 63 / .965) calc(var(--lr, 120px) + 26px)); transition: background .25s ease; }
.sh-night.is-dawn .sh-dark { background: transparent; transition: background 1.2s ease; }
.sh-lantern-icon { position: absolute; left: var(--lx, 50%); top: var(--ly, 50%); width: 44px; transform: translate(-50%, -150%); z-index: 3; pointer-events: none; transition: left .2s ease, top .2s ease; filter: drop-shadow(0 0 10px #ffe49a); }
.sh-lantern-icon svg { width: 100%; height: auto; display: block; }
.sh-jar { position: absolute; right: 10px; bottom: 10px; width: 60px; z-index: 4; }
.sh-jar svg { width: 100%; height: auto; display: block; }
.sh-jar-in { position: absolute; inset: 30% 12% 10%; display: flex; flex-wrap: wrap; gap: 1px; justify-content: center; align-content: flex-end; }
.sh-jar-in i { filter: drop-shadow(0 0 4px #ffe49a); }
.sh-firefly { position: absolute; z-index: 3; width: 6px; height: 6px; border-radius: 50%; background: #ffe49a; box-shadow: 0 0 8px #f3c955; left: calc(10% + var(--i) * 15%); top: calc(20% + (var(--i) * 37 % 60) * 1%); animation: sh-fly 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); pointer-events: none; }
@keyframes sh-fly { 50% { transform: translate(18px, -14px); opacity: .4; } }
.sh-screen { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #ffe49a, #ffa06e 75%); box-shadow: 0 0 0 6px #8a3a2d, 0 0 0 10px #4a3620; }
.sh-shadow { position: absolute; top: 50%; left: calc(50% + (var(--i) - (var(--n) - 1) / 2) * 34%); transform: translate(-50%, -50%); transition: filter .7s ease; }
.sh-shadow svg { width: min(150px, 30vw, 26vh); height: auto; display: block; filter: brightness(0) opacity(.78); transition: filter .7s ease; }
.sh-shadow.is-lit svg { filter: none; }
.sh-screen.is-moving .sh-shadow { animation: sh-drift 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -2s); }
.sh-shadow.is-lit { animation-play-state: paused !important; }
@keyframes sh-drift { from { transform: translate(-80%, -56%) rotate(-6deg); } to { transform: translate(-20%, -44%) rotate(6deg); } }
.pz-tile.is-used { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .sh-firefly, .sh-screen.is-moving .sh-shadow { animation: none; } .sh-dark, .sh-lantern-icon, .sh-shadow svg { transition: none; } }
@media (orientation: landscape) and (max-height: 500px) {
  .sh { height: 100%; align-content: center; }
  .sh-night { max-width: none; width: auto; height: calc(100vh - 50px); }
  .sh-shadows { grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; align-items: center; column-gap: 16px; }
  .sh-shadows .sh-screen { grid-row: 1 / 3; max-width: none; }
  .sh-shadows .pz-board { flex-direction: column; flex-wrap: nowrap; }
}


/* ---------- UI pass (2026-10-03): kid-sized, grouped, consistent ---------- */
/* The practice garden in five colour-coded groups, each with a picture chip. */
.lg-practice-garden .practice-garden-hub { display: grid; gap: 14px; }
.pg-group { position: relative; border-radius: 30px; padding: 30px 10px 12px; }
.pg-group[data-group="play"] { background: #ffa798; box-shadow: inset 0 -6px 0 #ee806f; }
.pg-group[data-group="read"] { background: #ccfbef; box-shadow: inset 0 -6px 0 #96ecff; }
.pg-group[data-group="think"] { background: #ffe49a; box-shadow: inset 0 -6px 0 #f3c955; }
.pg-group[data-group="write"] { background: #e6d6f0; box-shadow: inset 0 -6px 0 #b49fcf; }
.pg-group[data-group="explore"] { background: #b7e779; box-shadow: inset 0 -6px 0 #7fce54; }
.pg-chip { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 50%; background: #fffdf7; box-shadow: 0 0 0 3px #4a3620, 0 3px 0 #c9bda4; display: grid; place-items: center; }
.pg-group .practice-garden-choices { margin: 0; }
/* Every control a small hand might reach is at least 56px. */
.lg-screen.lg-home .map-daily-row button { width: 56px !important; height: 56px !important; min-width: 56px !important; }
@media (max-width: 359px) { .lg-screen.lg-home .map-daily-row button { width: 50px !important; height: 50px !important; min-width: 50px !important; } }
.album-tab { width: 62px; height: 56px; }
.lb-word { min-width: 52px; min-height: 56px; }
.sh-thing { min-width: 62px; }
.wg-gate-tag { width: max(62px, 15%) !important; }
.lab-tile { width: 56px; height: 62px; }
.studio-ink { width: 52px; height: 52px; }
/* One shared "press" feel for every big game tile. */
.pz-tile, .ff-card, .bk-friend, .bk-piece, .bk-flap, .bk-basket, .lb-spine, .sg-plot { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pz-tile:active, .ff-card:active, .bk-friend:active, .bk-piece:active, .lb-spine:active { transform: translateY(3px) scale(.97); }
.pz-tile:focus-visible, .ff-card:focus-visible, .bk-friend:focus-visible, .bk-piece:focus-visible, .bk-flap:focus-visible, .bk-basket:focus-visible, .lb-spine:focus-visible, .sg-plot:focus-visible, .sh-thing:focus-visible { outline: 4px solid var(--lg-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .pz-tile:active, .ff-card:active, .bk-friend:active, .bk-piece:active, .lb-spine:active { transform: none; } }

/* ---------- Vowel Hats (v33) ---------- */
.vh { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 2.6vh, 22px); justify-items: center; padding: 6px 12px 16px; width: 100%; box-sizing: border-box; }
.vh button { appearance: none; border: 0; cursor: pointer; font: inherit; }
.vh-stage { display: grid; place-items: center; width: min(240px, 60vw, 36vh); aspect-ratio: 1; border-radius: 50%; background: #ccfbef; box-shadow: inset 0 -10px 0 #96ecff; }
.vh-friend svg { width: min(170px, 44vw, 28vh); height: auto; overflow: visible; }
.vh-friend.is-dressed .vh-on { animation: vh-drop .55s cubic-bezier(.3, 1.5, .5, 1) both; transform-box: view-box; transform-origin: 50% 50%; }
@keyframes vh-drop { from { transform: translateY(-30px) scale(1.4); opacity: 0; } to { transform: none; opacity: 1; } }
.vh-shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 3vw, 22px); padding: 12px 16px; border-radius: 26px; background: #e5dcc8; box-shadow: inset 0 -8px 0 #c9bda4; }
.vh-choice { background: #fffdf7; border-radius: 22px; padding: 10px 12px; min-width: 96px; min-height: 76px; box-shadow: 0 5px 0 #c9bda4, 0 0 0 4px #4a3620; display: grid; place-items: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.vh-choice.is-friend { padding: 8px; }
.vh-choice.is-friend svg { width: min(120px, 26vw, 22vh); height: auto; overflow: visible; }
.vh-thing { overflow: visible; }
.vh-choice:active { transform: translateY(3px) scale(.97); }
.vh-choice.is-taken { opacity: .35; }
.vh-choice.is-right { background: #b7e779; }
.vh .is-hint { animation: bk-hint 1.2s ease-in-out infinite; }
.vh-choice:focus-visible { outline: 4px solid var(--lg-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .vh-friend.is-dressed .vh-on, .vh .is-hint { animation: none; } .vh-choice:active { transform: none; } }
@media (orientation: landscape) and (max-height: 500px) {
  .vh { grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; align-items: center; height: 100%; column-gap: 20px; }
  .vh .vh-stage { grid-row: 1 / 3; }
  .vh .vh-shelf.is-friends { grid-column: 1 / -1; }
}

/* ---------- The Letter Workshop (v34) ---------- */
.ws { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 2.6vh, 22px); justify-items: center; padding: 6px 12px 16px; width: 100%; box-sizing: border-box; }
.ws button { appearance: none; border: 0; cursor: pointer; font: inherit; }
.ws-frame { position: relative; width: min(230px, 56vw, 34vh); aspect-ratio: 1; border-radius: 30px; background: #fffdf7; box-shadow: 0 6px 0 #c9bda4, 0 0 0 4px #4a3620; padding: 14px; box-sizing: border-box; }
.ws-target { width: 100%; height: 100%; overflow: visible; }
.ws-in { animation: ws-in .4s cubic-bezier(.3, 1.5, .5, 1) both; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes ws-in { from { transform: scale(1.4); opacity: 0; } to { transform: none; opacity: 1; } }
.ws-friend { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.ws-friend svg { width: 90%; height: auto; }
.ws-frame.is-built .ws-friend { opacity: 1; }
.ws-frame.is-built .ws-target { opacity: 0; transition: opacity .5s ease; }
.ws-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 3vw, 20px); min-height: 100px; padding: 10px 14px; border-radius: 24px; background: #e5dcc8; box-shadow: inset 0 -8px 0 #c9bda4; }
.ws-piece { background: #fffaf0; border-radius: 20px; padding: 8px; box-shadow: 0 5px 0 #c9bda4, 0 0 0 4px #4a3620; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ws-piece svg { width: min(80px, 20vw); height: auto; display: block; }
.ws-piece:active { transform: translateY(3px) scale(.97); }
.ws-piece:focus-visible { outline: 4px solid var(--lg-focus); outline-offset: 3px; }
.ws .is-hint { animation: bk-hint 1.2s ease-in-out infinite; }
.ws-card { display: grid; justify-items: center; gap: 6px; padding: 14px 24px; border-radius: 28px; background: #fffdf7; box-shadow: 0 6px 0 #c9bda4, 0 0 0 4px #4a3620; }
.ws-pic svg { width: min(130px, 34vw, 22vh); height: auto; display: block; }
.ws-word { display: flex; align-items: center; gap: 4px; font: clamp(40px, 8vmin, 56px)/1.6 "Amiri Quran", serif; color: #4a3620; min-height: 1.6em; }
.ws-hole { display: inline-block; width: .9em; height: 1.1em; border-radius: 12px; background: #ccfbef; box-shadow: inset 0 0 0 3px #62cdf4; animation: bk-hint 1.6s ease-in-out infinite; }
.ws-word.is-whole .ws-whole { animation: ff-peek .45s ease-out both; }
@media (prefers-reduced-motion: reduce) { .ws-in, .ws .is-hint, .ws-hole, .ws-word.is-whole .ws-whole { animation: none; } .ws-piece:active { transform: none; } }
@media (orientation: landscape) and (max-height: 500px) {
  .ws { grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; align-items: center; height: 100%; column-gap: 20px; }
  .ws .ws-frame, .ws .ws-card { grid-row: 1 / 3; }
}
.ws-tray:empty { visibility: hidden; }
/* v35: syllable tiles in Echo Parade. */
.pz-syl { display: grid; place-items: center; min-width: 84px; min-height: 84px; font: clamp(38px, 9vmin, 52px)/1.6 "Amiri Quran", serif; color: #4a3620; }