/* Letter friends: a big friend on top, the A–Z line below (like the number line). Tokens from theme.css. */
#stage{display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.hero{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,48px);width:min(100%,760px);padding:16px}
.big{width:min(42vw,34vh,300px);aspect-ratio:52/72;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.big svg{width:100%;height:100%;overflow:visible}
.big.hop svg{animation:hop .5s ease-out}
@keyframes hop{30%{transform:translateY(-12%) scale(1.04,.96)}60%{transform:translateY(0) scale(.97,1.03)}}
.word{flex-direction:column;gap:4px;min-width:120px;min-height:120px;font-size:1.5rem}   /* .nb-btn, picture-sized */
.pic{font-size:clamp(3.5rem,10vw,6rem);line-height:1}
.tool{flex-direction:column;gap:2px;min-width:96px;min-height:96px;font-size:1.6rem}   /* 🃏 on a card (prints in the Maker's 🖨️) */
.tool .pic{font-size:3.6rem}
.line{box-sizing:border-box;display:flex;gap:10px;width:100%;overflow-x:auto;padding:6px 4px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.line .nb-btn{flex:none;width:84px;padding:6px;scroll-snap-align:center}   /* picked = theme's shared [aria-current] look */
.line svg{width:100%;height:auto;display:block}
@media(prefers-reduced-motion:reduce){.big.hop svg{animation:none}}
@media(max-width:520px){.hero{flex-direction:column;gap:8px}.big{width:min(56vw,30vh)}.word{flex-direction:row;min-height:72px;gap:12px}.pic{font-size:3rem}}

/* Side of the big friend: the picture word, then small tools (🃏 card, ✏️ build, ⭐/✏️ which one shows). */
.side{display:flex;flex-direction:column;align-items:center;gap:12px}
.tools{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
@media(max-width:520px){.side{flex-direction:row;flex-wrap:wrap;justify-content:center}.tool{min-width:72px;min-height:80px}.tool .pic{font-size:2.6rem}}
/* ✏️ Build a letter: a full-screen board like the Maker's build view. */
.build{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;gap:10px;padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));background:var(--grain),var(--ground)}
.build[hidden]{display:none}
.build-top{display:flex;align-items:center;justify-content:center;gap:16px;font:900 2rem var(--font)}
.build-count{font-size:1.2rem;color:var(--muted)}
.board{flex:1;min-height:0;display:flex;background:var(--grain),var(--paper);border:1px solid var(--edge);border-radius:16px}
.board svg{margin:auto;display:block;max-width:100%;max-height:100%}
.build-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.build-bar .nb-btn{min-width:96px;min-height:60px}
.big-ico{font-size:1.8rem;line-height:1}

/* ✨ Dress up: the shared sticker set (ui/stickers.mjs). Pick one, tap the letter; tap it again to take it off. */
.dress{display:flex;flex-direction:column;align-items:center;gap:10px}
.dress[hidden]{display:none}
body.dressing #step,body.dressing #line,body.dressing .tools{display:none}

/* Tap the picture word: its letter friends line up holding hands and hop as each is said (a-p-p-l-e). */
.spell{display:flex;align-items:flex-end;justify-content:center;gap:4px;flex-wrap:nowrap;max-width:100%}   /* one word, one row: letters shrink to fit */
.spell[hidden]{display:none}
.spell .sl{width:min(52px,calc((100vw - 170px) / 9));aspect-ratio:52/72;position:relative;flex:none}
.spell .sl svg{width:100%;height:100%;display:block}
.spell .sl+.sl::before{content:'';position:absolute;left:-8px;top:52%;width:12px;height:4px;border-radius:2px;background:var(--edge-dark)}   /* holding hands */
.spell .gap{width:min(24px,3vw);flex:none}
.spell #wordCard{margin-left:12px;align-self:center}
.spell .sl.hop{animation:spell-hop .45s ease-out}
@keyframes spell-hop{40%{transform:translateY(-16px)}}
@media(prefers-reduced-motion:reduce){.spell .sl.hop{animation:none}}
body.dressing .spell{display:none}
/* New friends drawing is 120×152 (the show's shape: block + dome). */
.big{aspect-ratio:120/152}.spell .sl{aspect-ratio:120/152}

/* ✨ Word magic: the thing that comes to life on top, the friends holding hands, then the tray of six. */
.magic{gap:8px}
.m-top{display:flex;align-items:center;gap:12px;min-height:64px}
.m-made{display:flex;gap:6px;overflow-x:auto;font-size:2.2rem;flex:1}
.m-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--grain),var(--paper);border:1px solid var(--edge);border-radius:16px;position:relative}
.m-thing{font-size:min(30vh,200px);line-height:1;display:inline-block}
.m-thing.many{font-size:min(20vh,130px)}
.m-word{position:absolute;bottom:10px;left:0;right:0;text-align:center;font:900 2.4rem var(--font);color:var(--ink)}
.m-row{display:flex;align-items:center;justify-content:center;gap:12px}
.m-line{display:flex;align-items:flex-end;gap:6px;min-height:118px;min-width:min(60vw,420px);justify-content:center;padding:4px 10px;border:3px dashed var(--edge);border-radius:18px}
.m-line .f,.m-tray .f{width:84px;aspect-ratio:120/152;padding:0;border:0;background:none;position:relative;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.m-line .f svg,.m-tray .f svg{width:100%;height:100%;display:block}
.m-line .f+.f::before{content:'';position:absolute;left:-12px;top:62%;width:18px;height:6px;border-radius:3px;background:var(--edge-dark)}   /* holding hands */
.m-line .f.hop{animation:spell-hop .45s ease-out}
.m-line.glow .f svg{filter:drop-shadow(0 0 10px #ffe680)}
.m-line.fizzle .f svg{filter:drop-shadow(0 0 10px #ff4d4d) saturate(.5)}
.m-tray{display:flex;gap:10px}
.m-go{min-width:104px;min-height:104px;font-size:3.4rem}
.m-more{min-width:84px;min-height:84px;font-size:2.4rem}
.magic button:disabled{opacity:.5}
/* How things come to life. */
.act-pop{animation:m-pop .7s cubic-bezier(.3,1.6,.5,1)}
.act-grow{animation:m-grow 1.6s ease-out}
.act-run{animation:m-run 2.2s ease-in-out}
.act-fly{animation:m-fly 2.4s ease-in-out}
.act-spin{animation:m-spin 1.2s ease-out}
.act-zap{animation:m-zap .9s steps(2) 2}
.act-sleep{animation:m-sleep 2.4s ease-in-out infinite}
.m-zz{position:absolute;top:18%;right:30%;font-size:3rem;animation:m-fly 2.4s ease-in-out infinite}
.m-puff{font-size:min(22vh,150px);animation:m-pop .5s ease-out}
@keyframes m-pop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes m-grow{0%{transform:scale(.2)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes m-run{0%{transform:translateX(-60vw)}45%{transform:translateX(30vw) scaleX(1)}50%{transform:translateX(30vw) scaleX(-1)}100%{transform:translateX(0) scaleX(-1)}}
@keyframes m-fly{0%{transform:translateY(30%)}50%{transform:translateY(-30%) rotate(-6deg)}100%{transform:translateY(0)}}
@keyframes m-spin{0%{transform:scale(.3) rotate(-360deg)}100%{transform:scale(1) rotate(0)}}
@keyframes m-zap{0%{transform:translate(-6px,2px);filter:brightness(1.8)}100%{transform:translate(6px,-2px);filter:none}}
@keyframes m-sleep{50%{transform:rotate(-8deg)}}
@media(prefers-reduced-motion:reduce){.m-thing,.m-zz,.m-puff,.m-line .f.hop{animation:none!important}}
@media(max-width:700px){.m-line .f,.m-tray .f{width:58px}.m-line{min-height:84px}.m-go{min-width:80px;min-height:80px}}
.m-line .gap{border:3px dashed var(--edge-dark);border-radius:14px;box-sizing:border-box;aspect-ratio:120/152}
/* 🎯 The picture to make: big, a little faded until the friends make it come alive. */
.m-goal{font-size:min(28vh,190px);line-height:1;opacity:.55;filter:grayscale(.3);animation:m-pop .6s ease-out}
.m-hint-pic{font-size:3rem}
.m-tray .f.hint svg{filter:drop-shadow(0 0 12px #ffd23f) drop-shadow(0 0 4px #ffd23f)}
.m-tray .f.hint{animation:hint-bob 1s ease-in-out infinite}
@keyframes hint-bob{50%{transform:translateY(-10px)}}
.m-made .nb-btn{font-size:2.6rem;min-width:68px;min-height:68px;padding:4px;flex:none}
.m-row{flex-wrap:wrap}
@media(max-width:520px){.m-line .f,.m-tray .f{width:48px}.m-tray{flex-wrap:wrap;justify-content:center}.m-line{min-width:0;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.m-goal,.m-tray .f.hint{animation:none}}