/* Play scenes stay outside the stable letters and finger guide. */
.game-screen.active{grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch;height:calc(100dvh - 66px)}
.game-main{grid-template-columns:minmax(0,1fr) clamp(195px,21vw,250px);align-items:stretch}
.practice-card{display:grid;grid-template-rows:clamp(112px,18vh,148px) minmax(94px,1fr) 23px auto;gap:7px;padding:12px 16px}
.practice-card>.mission{grid-row:1}.practice-card>.intro-panel,.practice-card>.typing-zone{grid-row:2;min-height:0;margin:0;overflow-y:auto}
.practice-card>.practice-footer{grid-row:3;min-height:0}.practice-card>.keyboard-panel{grid-row:4}
.practice-card>.coach-line{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.intro-panel{align-content:center}.typing-zone{padding:10px 14px 20px}.prompt-display{font-size:clamp(1.45rem,2.8vw,2rem)}
/* Pale watercolor environment, undistorted and composited as one scene. */
.mission{--actor-size:110px;--scene-inset:14%;--end-space:84px;--scene-travel:0;position:relative;isolation:isolate;overflow:hidden;border:1px solid #efcfda;border-radius:18px;background:#fff6f2}
.mission::before{content:"";position:absolute;inset:0;background:url('assets/images/playroom.webp') center/cover no-repeat;opacity:.88}
.mission::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fff9f100 40%,#fff7f04d 90%);pointer-events:none}
.mission[data-scene="cushion"]{--end-space:24px}
.mission[data-scene="cushion"]::before{background-position:center}
.mission-heading{position:absolute;z-index:5;top:7px;left:12px;display:flex;align-items:center;gap:12px;padding:3px 9px;border-radius:10px;background:#fffaf5e8;color:var(--berry);font-size:.85rem}
.mission-heading span{font-size:.68rem;font-weight:700;color:var(--muted)}
#buddy-name{display:none}
.mission-stage{position:absolute;inset:0;z-index:3;pointer-events:none}
.scene-actor{position:absolute;left:calc(var(--scene-inset) + (100% - 2 * var(--scene-inset) - var(--actor-size) - var(--end-space)) * var(--scene-travel));bottom:0;width:var(--actor-size);height:var(--actor-size);padding:0;border:0;border-radius:0;background:none;box-shadow:none;z-index:3;pointer-events:auto}
button.scene-actor{cursor:pointer;min-width:44px;min-height:44px}
button.scene-actor:hover{background:none;box-shadow:none;transform:none}
button.scene-actor:focus-visible{outline:2px solid var(--berry);outline-offset:-8px;border-radius:16px}
.scene-sprite{display:block;width:100%;height:100%;background:url('assets/images/mochi-sprites.webp') 100% 100%/400% 200% no-repeat;transform-origin:55% 85%;will-change:transform}
.scene-shadow{position:absolute;z-index:2;left:calc(var(--scene-inset) + (100% - 2 * var(--scene-inset) - var(--actor-size) - var(--end-space)) * var(--scene-travel));bottom:13px;width:var(--actor-size);height:10px;border-radius:50%;background:radial-gradient(ellipse,#886459 0,transparent 68%);pointer-events:none}
.scene-rug{position:absolute;z-index:1;left:3%;right:3%;bottom:5px;height:22px;border-radius:50%;background:radial-gradient(ellipse,#efcbd466 20%,#efd9d966 70%,transparent 72%);border-bottom:1px solid #e0b1c24d}
.scene-yarn{position:absolute;z-index:4;left:calc(var(--scene-inset) + var(--actor-size) - 11px + (100% - 2 * var(--scene-inset) - var(--actor-size) - var(--end-space)) * var(--scene-travel));bottom:14px;width:40px;height:40px;pointer-events:none}
.yarn-ball{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 1px #855c5233);will-change:transform}
.yarn-ball svg{display:block;width:100%;height:100%}
.yarn-tail{position:absolute;right:22px;bottom:1px;width:38px;height:10px;border:2px solid #70b5c6;border-right:0;border-top-color:transparent;border-radius:50%;transform:rotate(-9deg)}
.scene-cushion{position:absolute;z-index:2;right:var(--scene-inset);bottom:11px;width:86px;height:22px;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#ffe3ed 0,#edb2c6 55%,#d991af 85%);border-bottom:4px solid #d197b2;box-shadow:0 4px 5px #98707820;display:none}
.scene-cushion::before{content:"";position:absolute;inset:3px 8px;border:1px dashed #c78da766;border-radius:50%}
.scene-cushion::after{content:"";position:absolute;left:47%;top:5px;width:7px;height:4px;border-radius:50%;background:#c786a4;box-shadow:0 1px 2px #fff4f8}
.mission[data-scene="cushion"] .scene-cushion{display:block}
.mission[data-scene="cushion"] .scene-yarn{display:none}
.mission-cheer{position:absolute;right:18%;top:9px;padding:2px 8px;border-radius:10px;background:#fffaf5;color:var(--berry);font-weight:900;font-size:.8rem}
.mission-cheer:empty{display:none}
.mission-progress{position:absolute;z-index:6;bottom:0;left:0;right:0;height:3px;background:#efd8e2}
.mission-progress>span{display:block;height:100%;width:0;background:#b5598b;transition:width .2s}
.scene-sparkles{position:absolute;right:20px;top:13px;z-index:4;opacity:0;color:#bc6b96;font-size:26px;pointer-events:none}
.scene-sparkles::before{content:"✧"}
.mission[data-pose="celebrate"][data-moving="false"] .scene-sparkles,.mission[data-pose="blink"] .scene-sparkles{animation:scene-sparkle .28s ease-out}
.mission[data-pose="celebrate"][data-moving="false"] .scene-cushion{animation:cushion-settle .24s ease-out}
.mission[data-paused="true"] *{animation-play-state:paused!important}
.mission[data-entrance="0"] .scene-actor{animation:scene-arrive-a .28s ease-out}.mission[data-entrance="1"] .scene-actor{animation:scene-arrive-b .28s ease-out}
@keyframes scene-arrive-a{from{opacity:0}to{opacity:1}}@keyframes scene-arrive-b{from{opacity:0}to{opacity:1}}
@keyframes scene-sparkle{0%{opacity:0;transform:translateY(12px) scale(.4)}35%{opacity:1}100%{opacity:0;transform:translateY(-6px) scale(1.2)}}
@keyframes cushion-settle{35%{transform:scale(1.08,.78)}70%{transform:scale(.98,1.05)}}
.buddy-art{display:block;aspect-ratio:1;background:#fff8fc url('assets/images/buddy-poses.webp') var(--buddy-x,0%) var(--buddy-y,0%)/300% 200% no-repeat;border:0;border-radius:18px}
.buddy-art.portrait-buddy{background-size:cover;background-position:center}
.level-picture-card{padding:13px;gap:7px}.level-picture-frame{width:100%;max-width:none;border-width:4px}
.level-picture-heading h2{font-size:1.08rem}.level-picture-heading .eyebrow{font-size:.65rem}
.kitty-fact{margin-top:5px;padding:12px;border-radius:14px;background:#fff2dd;color:#64442e}
.kitty-fact>span{font-size:.67rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.kitty-fact>p{margin:4px 0 0;font-size:.83rem;line-height:1.5}
.treasure-button{padding:7px;border:2px solid transparent;cursor:pointer;color:var(--ink);text-align:left;font:inherit;transition:transform .15s,border-color .15s}
.treasure-button:hover{border-color:#b34a80;transform:translateY(-2px)}
.treasure-button .buddy-art{width:100%;aspect-ratio:1}.ragdoll-card-copy>span{font-size:.7rem}
.mystery-shelf{margin-top:24px;padding:14px;border-radius:15px;background:#fff2f8}
summary{cursor:pointer;color:var(--berry);font-weight:850}summary:focus-visible{outline:3px solid #74204d;outline-offset:3px}
.mystery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:8px;margin-top:12px}
.mystery-card{display:grid;justify-items:center;gap:5px;padding:10px;border:1px dashed #d5aac1;border-radius:14px;color:var(--muted);text-align:center}
.mystery-card>span{font-size:1.6rem;color:var(--berry)}.mystery-card>small{font-size:.71rem}
.game-shelf-card{display:grid;gap:6px;padding:12px;border-radius:15px;background:#fff0f7}.game-shelf-card>strong{color:var(--berry);font-size:.82rem}
.challenge-replay-button{min-height:40px;font-size:.8rem}
.portrait-dialog{width:min(540px,calc(100% - 28px))}.portrait-dialog>div{text-align:center}
#portrait-art{position:relative;overflow:hidden;width:min(100%,400px,52dvh);aspect-ratio:1;margin:18px auto;border-radius:22px}
.portrait-cover{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(135deg,#e2abc7,#aa8ac3)}
.session-keepsakes{display:flex;align-items:center;justify-content:center;gap:22px;padding:18px;margin:18px 0;border-radius:22px;background:#fff8fc;text-align:left}
.session-keepsakes>.buddy-art{width:130px;flex-shrink:0}.session-keepsakes p{margin:6px 0;color:var(--berry);font-weight:800}
.results-details{margin:14px 0;text-align:left}.results-details .results-summary{margin:12px 0}
.app-shell:has(#results-screen.active){padding:8px 0 12px}.results-card{margin:10px auto;padding:24px}.results-card h1{font-size:clamp(2rem,4vw,3.2rem)}.results-card>#results-message{margin:0 0 10px}
.challenge-scene{height:130px;margin:10px 0}.challenge-yarn-track{height:3px;margin:8px 0}
.challenge-shell:has(#challenge-done-button:not([hidden])) .challenge-key-row,.challenge-shell:has(#challenge-done-button:not([hidden])) .challenge-prompt{display:none}
.challenge-shell{padding:20px 26px}.challenge-stats{margin:8px 0}.challenge-feedback{font-size:.85rem}
.challenge-stats strong{font-size:1.04rem}.challenge-stats span{font-size:.6rem}
@media(min-width:701px) and (max-height:690px){
  .results-card{padding:20px}.results-card h1{font-size:2.5rem;margin-bottom:8px}.session-keepsakes{margin:10px 0;padding:10px}.session-keepsakes>.buddy-art{width:92px}.results-details{margin:10px 0}.results-actions{margin-top:12px}
  .practice-card{padding:8px 12px;gap:4px;grid-template-rows:104px minmax(78px,1fr) 20px auto}.mission{--actor-size:88px}
  .practice-card>.keyboard-panel{padding-top:3px}.key{height:31px}.key.space-key{height:26px}.keyboard,.keyboard-row{gap:3px}
  .intro-panel{min-height:0}.kitty-fact{padding:9px}.kitty-fact>p{font-size:.76rem}.level-picture-card{padding:10px}
  .challenge-scene{height:94px}.challenge-shell{padding:14px 22px}
  .challenge-prompt{min-height:66px;padding:8px;font-size:1.3rem}.challenge-key-row strong{min-height:35px}.challenge-reward .ragdoll-art{width:65px}.challenge-reward{grid-template-columns:65px 1fr}
}
@media(max-width:900px){.game-main{grid-template-columns:minmax(0,1fr) 190px}.mission-heading span{display:none}.practice-card>.keyboard-panel{grid-template-columns:85px minmax(0,1fr)}.hand-figures{transform:scale(.78)}.hand-caption{font-size:.59rem}.level-picture-heading h2{font-size:.93rem}}
@media(max-width:700px){
  .game-screen.active{height:auto;grid-template-rows:auto auto auto}.game-main{grid-template-columns:1fr}
  .practice-card{grid-template-rows:128px minmax(110px,auto) 24px auto}.typing-zone{max-height:225px}
  .level-picture-card{display:grid;grid-template-columns:110px 1fr;gap:8px}.level-picture-frame{width:110px}.level-picture-heading{margin:0}.kitty-fact{grid-column:2;margin:0;padding:8px}.kitty-fact>p{font-size:.76rem}.kitty-fact>span{display:none}
  .session-keepsakes{gap:10px;padding:12px}.session-keepsakes>.buddy-art{width:90px}.session-keepsakes p{font-size:.86rem}
  .mission-heading span{display:inline}.portrait-dialog>div{padding:24px 18px}.challenge-shell{padding:18px}
}
@media(prefers-reduced-motion:reduce){.mission *,.buddy-art{animation:none!important;transition:none!important}}
body.reduced-motion .mission *,body.reduced-motion .buddy-art{animation:none!important;transition:none!important}