/* Theme gestures and shared instruction styling. */
#game .card[data-theme="7"]{--card-top:#c8b486;--card-mid:#8d7952;--card-end:#443e33;--card-edge:#332f27;--question-bg:#f4ecd8;--question-ink:#463b29;--ink:#342e24}
#game .card[data-theme="9"]{--card-top:#dcd4c2;--card-mid:#b0aa8c;--card-end:#74755e;--card-edge:#505641;--question-bg:#f7f3e7;--question-ink:#354132;--ink:#354132}
#game .card[data-theme="10"]{--card-top:#b5b5e3;--card-mid:#6f73b6;--card-end:#29315d;--card-edge:#171e42;--question-bg:#ecebfa;--question-ink:#292c57;--ink:#292c57}
.topic-swatch[data-theme="7"]{background:linear-gradient(145deg,#d4b56b,#454035)}
.topic-swatch[data-theme="9"]{background:linear-gradient(145deg,#e0d7c3,#73775d)}
.topic-swatch[data-theme="10"]{background:linear-gradient(145deg,#a1a7e8,#202856)}
#game .card[data-theme="9"] .reveal-question,#game .card[data-theme="9"] .card-count{color:#354132}
.scratch-area .effect-stage.weave,.scratch-area .effect-stage.journey,.scratch-area .effect-stage.stars{display:flex;flex-direction:column;align-items:stretch;padding:14px 10px 12px;gap:8px;background:#39382f;color:#f5e3b6;cursor:default}
.scratch-area .effect-stage.journey{background:linear-gradient(#d7ceae,#7f8267);color:#283e2c}
.scratch-area .effect-stage.stars{background:linear-gradient(#151c3b,#303469);color:#f0edff}
.three-title{text-align:center;font:700 1rem/1.25 system-ui,sans-serif;flex-shrink:0}
.three-space{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.three-board{width:100%;height:100%;min-height:0;display:block;touch-action:none;user-select:none;overflow:visible}
.three-help{text-align:center;font:500 .875rem/1.3 system-ui,sans-serif;min-height:2.6em;display:grid;place-items:center;padding:0 4px;flex-shrink:0}
.three-progress{width:72%;height:4px;border-radius:4px;background:#ffffff24;margin:0 auto;overflow:hidden;flex-shrink:0}
.journey .three-progress{background:#263c2c33}
.three-progress i{display:block;height:100%;width:0;background:#f4d388;transition:width .12s linear;border-radius:inherit}
.stars .three-progress i{background:#e2d6ff}
.three-trace{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.thread-fabric{fill:#494537;stroke:#c8ae71;stroke-width:1.2}
.thread-border{fill:none;stroke:#e1c17d;stroke-width:2;stroke-dasharray:3 6;opacity:.65}
.thread-guide{fill:none;stroke:#d5bd8b;stroke-width:3;stroke-dasharray:3 7;stroke-linecap:round;opacity:.42}
.thread-made{stroke:#f0cd81;stroke-width:5;filter:drop-shadow(0 1px 1px #15140c)}
.thread-motif{fill:none;stroke:#ddbc75;stroke-width:2.5;opacity:.12;transition:opacity .25s}
.thread-motif.stitched{opacity:1;filter:drop-shadow(0 0 3px #ecc37a66)}
.three-target{fill:#f8dd9533;stroke:#e8c77a;stroke-width:1;stroke-dasharray:2 3;pointer-events:none}
.three-marker{fill:#fff4c8;stroke:#a77d31;stroke-width:2;filter:drop-shadow(0 0 7px #ffe0a0);pointer-events:none}
.road-beds polyline{fill:none;stroke:#4c4933;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.road-guides polyline{fill:none;stroke:#e5d5a5;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.road-lit{stroke:#ffdf8e;stroke-width:7;filter:drop-shadow(0 0 5px #ffefb9)}
.star-lines{stroke:#e2dcff;stroke-width:2;filter:drop-shadow(0 0 5px #bcafff)}
.star-halo{fill:#b3a7ff;opacity:.09}
.star-core{fill:#dadfff;filter:drop-shadow(0 0 3px #b6caff)}
.sky-star.next .star-halo{animation:threeStarPulse 1.4s ease-in-out infinite;fill:#fff0cb}
.sky-star.next .star-core,.sky-star.connected .star-core{fill:#fff9df;filter:drop-shadow(0 0 7px #fff0b5)}
.sky-star.connected .star-halo{opacity:.24}
.three-complete .three-trace,.three-complete .thread-motif,.three-complete .star-core{animation:threeFinishGlow .8s ease-in-out both}
.three-complete .three-marker,.three-complete .three-target{opacity:0}
.three-keyboard{position:absolute;left:12px;right:12px;bottom:9px;opacity:0;pointer-events:none;display:flex;justify-content:center;gap:6px}
.three-keyboard:focus-within{opacity:1;pointer-events:auto;background:#faf2dc;padding:5px;border-radius:10px;z-index:5}
.three-keyboard button{font:600 .875rem system-ui,sans-serif;min-height:44px;color:#26372a;background:#f6e4bb;border:1px solid #a88a4c;border-radius:8px;padding:6px}
@keyframes threeStarPulse{0%,100%{opacity:.12}50%{opacity:.5}}
@keyframes threeFinishGlow{0%,100%{filter:drop-shadow(0 0 3px #f5dfa0)}50%{filter:drop-shadow(0 0 11px #fff4b7)}}
@media(max-height:700px){.scratch-area .effect-stage.weave,.scratch-area .effect-stage.journey,.scratch-area .effect-stage.stars{padding:8px 6px;gap:4px}.three-title{font-size:.875rem}.three-help{font-size:.875rem}}
@media(prefers-reduced-motion:reduce){.sky-star.next .star-halo,.three-complete .three-trace,.three-complete .thread-motif,.three-complete .star-core{animation:none}.sky-star.next .star-halo{opacity:.4}.three-progress i,.thread-motif{transition:none}}

.three-keyboard button[hidden]{display:none!important}

/* Larger ornament and two equally styled abstract paths. */
.weave .thread-made{stroke-width:7}
.weave .thread-guide{stroke-width:4}
.weave .three-marker{r:12px}
.journey .road-beds polyline{stroke-width:12;stroke:#675f45;opacity:.25}
.journey .road-guides polyline{stroke-width:7;stroke:#fff0c6;opacity:.9}
.journey .road-lit{stroke-width:7}
.road-start{fill:#fff4c8;stroke:#a77d31;stroke-width:2;filter:drop-shadow(0 0 7px #ffe0a0)}

/* Full-card scenes: captions float above the play surface. */
.scratch-area .effect-stage:is(.puzzle,.family,.curtains,.coloring,.weave,.journey,.stars,.foldmap){display:block;padding:0;gap:0}
:is(.puzzle-instruction,.family-title,.curtain-title,.color-title,.three-title,.fold-title){position:absolute;top:8px;left:8px;right:8px;z-index:4;width:fit-content;max-width:calc(100% - 16px);margin:0 auto;padding:5px 10px;border-radius:10px;background:#102e27c9;color:#fff4d6;pointer-events:none;font-size:14px;line-height:1.25}
:is(.puzzle-help,.family-help,.curtain-help,.three-help,.fold-hint){position:absolute;bottom:10px;left:8px;right:8px;z-index:4;width:fit-content;max-width:calc(100% - 16px);margin:0 auto;padding:5px 10px;border-radius:10px;background:#102e27c9;color:#fff4d6;pointer-events:none;font-size:14px;line-height:1.25;min-height:0}
:is(.puzzle-space,.family-space,.curtain-space,.three-space,.fold-space){position:absolute;inset:0;width:100%;height:100%;min-height:0}
.puzzle-board{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;grid-template-rows:1fr 1fr}
.puzzle-piece{aspect-ratio:auto;min-height:0}
.family-picture,.curtain-window{width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
.scratch-area .effect-stage.coloring{background:#fff}
.landscape-space{position:absolute;inset:0 0 76px;width:100%;height:auto;display:grid;place-items:center}
.scratch-area canvas.landscape-canvas{width:min(100cqw,133.333cqh);height:min(75cqw,100cqh);border:0;border-radius:0;box-shadow:none}
.coloring .color-palette{position:absolute;bottom:37px;left:0;right:0;gap:14px;z-index:4}
.coloring .color-pencil{width:36px;height:34px;border-radius:9px}
.coloring .color-pencil:after{inset:5px 13px 4px}
.coloring .landscape-footer{position:absolute;bottom:2px;left:5px;right:5px;width:auto;z-index:4;gap:8px}
.coloring .color-done{min-height:32px;padding:4px 12px}
.coloring .color-help{font-size:12px;max-width:none}
.three-space{overflow:hidden}
.weave .three-space{inset:32px 10px 40px;width:auto;height:auto}
.weave .thread-fabric,.weave .thread-border{display:none}
.journey .three-space{inset:35px 0 42px;height:auto}
/* Fill the normal question area; select artwork by the scene's own proportions. */
.scratch-area .effect-stage.stars{container:fantasy-scene / size}
.stars .three-space{background:url('fantasy-night.png') 50% 100%/cover no-repeat}
@container fantasy-scene (min-aspect-ratio:1/1){
 .stars .three-space{background-image:url('fantasy-night-wide-v89.webp');background-position:60% 70%}
 .stars .three-board{height:70%;align-self:flex-start}
}
@container fantasy-scene (min-aspect-ratio:4/1){.stars .three-board{height:50%}}
@container fantasy-scene (min-aspect-ratio:5/1){.stars .three-board{height:40%}}
.three-progress{position:absolute;bottom:3px;left:14%;z-index:4}
.three-help{bottom:12px}
.fold-map{width:min(94cqw,77cqh)}
.fold-space{inset:30px 0 35px;height:auto}

/* Thread follows the central red ribbon of the supplied ornament. */
.weave .thread-guide{stroke:#fff2bf;stroke-width:2;opacity:.85}
.weave .thread-made{stroke:#ffe49b;stroke-width:3;stroke-dasharray:3 2;filter:drop-shadow(0 0 3px #f9dc88)}
.weave .three-marker{r:7px}

/* Green ornament; thread and guide keep their golden colors. */
.weave .three-board image{filter:hue-rotate(110deg) saturate(.65) brightness(1.35)}

/* v72: instructions below the artwork, in place of repeated theme text. */
#effectStage :is(.puzzle-instruction,.puzzle-help,.family-title,.family-help,.curtain-title,.curtain-help,.color-title,.color-help,.three-title,.three-help,.fold-title,.fold-hint,.mirror-title,.mirror-help){display:none!important}
#scratchPrompt{display:none!important}
/* An opaque panel keeps every theme's instructions readable. */
#game .card .foot{width:min(100%,640px);align-self:center;border:1px solid #c4a366;border-radius:13px;background:#fff6df;padding:9px 13px;min-height:0;justify-content:center;box-shadow:0 2px 8px #152c241a}
#game .card .foot:has(#effectInstruction:empty){display:none}
#effectInstruction{width:100%;display:flex;flex-direction:column;gap:5px;color:#405547;font:400 13px/1.35 system-ui,sans-serif;overflow-wrap:break-word;text-wrap:pretty}
#effectInstruction strong{color:#173f32;font-size:14px;font-weight:700}
#effectInstruction span{display:block}
#effectInstruction strong+span{border-top:1px solid #c4a36666;padding-top:5px}
#game .card[data-theme] .reveal-question{width:min(100%,640px);font:600 13px/1.35 system-ui,sans-serif;min-height:44px;margin:0;padding:9px 13px;border:1px solid #c4a366;border-radius:12px;background:#174a39;color:#fff6df;text-decoration:none;box-shadow:0 2px 8px #152c2424}
#game .card[data-theme] .reveal-question:hover{background:#123d2f}
#game .card[data-theme] .reveal-question:focus-visible{outline:3px solid #fff6df;outline-offset:3px}
/* Keep navigation inside the screen; the scene uses the remaining height.
   Long bilingual instructions can scroll within their own panel. */
@media(max-height:700px){
 #game .card{padding-bottom:max(118px,calc(106px + env(safe-area-inset-bottom)));gap:6px}
 #game .card-head{padding-top:max(84px,calc(env(safe-area-inset-top) + 70px))}
 #game .card .foot{max-height:min(18dvh,100px);overflow-y:auto;overscroll-behavior:contain}
 #game .scratch-area .question{height:100%;min-height:0;overflow-y:auto;align-items:safe center}
 #game .scratch-area .question.bilingual{justify-content:safe center}
 #game .actions{bottom:max(47px,calc(env(safe-area-inset-bottom) + 41px))}
 #game .actions button{min-height:50px}
 #game .reset{min-height:32px;bottom:max(8px,env(safe-area-inset-bottom))}
}
/* On a short landscape screen, show the scene beside its controls. */
@media(max-height:500px) and (min-width:600px){
 #game .card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"art head" "art languages" "art instruction" "art reveal";padding-top:max(84px,calc(env(safe-area-inset-top) + 70px));column-gap:16px}
 #game .card-head{grid-area:head;padding:0 4px;min-width:0}
 #game .card-kicker{font-size:1rem}
 #game .card .modes{grid-area:languages;min-width:0}
 #game .scratch-area{grid-area:art;height:100%;min-height:0;margin:0}
 #game .card .foot{grid-area:instruction;min-height:0;max-height:100%;align-self:stretch;padding:6px 10px;justify-content:safe center}
 #game .card[data-theme] .reveal-question{grid-area:reveal;min-width:0;min-height:40px;padding:7px 10px}
}
.weave .three-space,.journey .three-space{inset:10px 10px 16px;width:auto;height:auto}
.fold-space{inset:10px 0;height:auto}
.coloring .landscape-footer{justify-content:center}
#game .topline{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1.1fr);gap:7px}
#game .topline button{padding:6px 5px;font-size:clamp(.68rem,3.2vw,.84rem);overflow-wrap:break-word}
#game .topline #topicsButton{min-width:0;max-width:none;white-space:normal;line-height:1.15;overflow-wrap:break-word}
#game .actions #back{font-size:clamp(.8rem,3.5vw,1rem);white-space:nowrap;padding-left:5px;padding-right:5px}

/* Restore a larger cover title with a separate, readable subtitle. */
.intro .cover-title{top:max(clamp(36px,9dvh,100px),calc(env(safe-area-inset-top) + 18px));width:86%}
.intro .cover-title .brand{font-size:clamp(1.6rem,8vw,3.1rem);line-height:1.12}
.intro .cover-title .lead{font-size:clamp(.9rem,4vw,1.35rem);line-height:1.3;margin-top:clamp(14px,2dvh,20px)}
/* Scale the 841×1870 cover as one image. Keep its curtain rod (y≈500)
   below the title area, including on short installed-app screens. */
@media(max-aspect-ratio:3/4){
 .intro{--cover-art-height:max(104dvh,calc(104vw * 1870 / 841))}
 .intro .cover{width:calc(var(--cover-art-height) * 841 / 1870);height:var(--cover-art-height);top:calc(24dvh - var(--cover-art-height) * 500 / 1870);left:50%;right:auto;bottom:auto;transform:translateX(-50%);object-fit:contain}
}

/* Scale the welcome image and its text as one coordinate system. */
.welcome-art{inset:auto;left:50%;bottom:0;top:auto;right:auto;width:max(100vw,calc(100dvh * 841 / 1870));height:max(100dvh,calc(100vw * 1870 / 841));transform:translateX(-50%)}
.welcome-art img{width:100%;height:100%;object-fit:fill}
.welcome-card-text{font:700 clamp(.56rem,2.45vw,.85rem)/1.2 Georgia,serif}
.card-text-left{top:35.8%;left:19.3%;width:16%;transform:translateY(-50%) rotate(-14deg)}
.card-text-center{top:34.4%;left:40%;width:20%;transform:translateY(-50%)}
.card-text-right{top:35.8%;right:20.7%;width:16%;transform:translateY(-50%) rotate(14deg)}
.welcome-top{left:8%;right:8%;display:flex;align-items:center;gap:10px}
.welcome-top #welcomeBack{position:static;flex:none;min-height:38px;padding:7px 9px;font-size:.75rem}
.welcome-top>span{width:auto;flex:1;margin:0;padding:0;font-size:clamp(.9rem,3.6vw,1.25rem);text-align:center}

/* v73: keep the mirror in the full-height grid track after moving its labels. */
.effect-stage.mirror{grid-template-rows:minmax(0,1fr);gap:0}
.mirror-space{grid-row:1;align-self:stretch}
/* Keep the 49% rotation origin while centering the uniform enlargement. */
.mirror-object{--mirror-scale:1.2;scale:var(--mirror-scale);translate:0 calc((1 - var(--mirror-scale)) * 1%)}
@container(min-height:430px){.mirror-object{--mirror-scale:1.25}}
@container(min-height:470px){.mirror-object{--mirror-scale:1.35}}
@container(min-height:510px){.mirror-object{--mirror-scale:1.48}}
@container(min-height:560px){.mirror-object{--mirror-scale:1.6}}
/* Keep punctuation with its word and balance the two angled sample cards. */
.welcome-card-text.card-text-left,.welcome-card-text.card-text-right{font-size:clamp(.52rem,2.2vw,.78rem);line-height:1.25;width:18%}
.card-text-left{left:18.3%}
.card-text-right{right:19.7%}
.welcome-card-text span{display:block;white-space:nowrap}