/* A quieter storybook surface for reading, with the workshop as the action stage. */
.level-page{padding-top:30px}
.mission-head{align-items:center;margin-bottom:20px}
.mission-head h1{font-size:clamp(28px,3.2vw,42px);font-weight:normal;color:#fff3d5;text-wrap:balance}
.mission-head .eyebrow{color:#bdcdbb;letter-spacing:.14em}
.mission-head .step-count{padding:8px 15px;background:#1c3c3e;border-radius:14px;color:#f5dba2;line-height:1.7;text-align:center}
.stepper{gap:8px;margin-bottom:28px}
.stepper span{height:4px;background:#adcdbb1a}
.stepper span.done{opacity:.8}.stepper span.now{box-shadow:0 0 12px #f3cf8455}
.task-layout{gap:28px}
.reading-card{position:relative;isolation:isolate;padding:30px 42px 36px;border:1px solid #d9c394;border-radius:28px 12px 28px 12px;background:linear-gradient(105deg,#f4e8cc 0,#fff9e9 4%,#fffaf0 70%,#f8edda 100%);box-shadow:0 22px 55px #02181d44,inset 5px 0 0 #e6d6b17a,inset 0 0 0 6px #fffcf34d;color:#243b35}
.reading-card:after{content:'';position:absolute;bottom:16px;right:18px;width:18px;height:18px;border-right:1px solid #bba36c88;border-bottom:1px solid #bba36c88;border-radius:0 0 8px 0;pointer-events:none}
.recipe-card-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px;min-width:0}
.recipe-card-heading>div{min-width:0}.recipe-card-heading>.sprite{width:64px;flex-shrink:0;transform:rotate(8deg);clip-path:inset(0 0 7% 0);filter:drop-shadow(0 4px 5px #765f3733)}
.reading-card .recipe-card-heading .eyebrow{font-size:10px;letter-spacing:.14em;color:#80663c;line-height:1.7;margin-bottom:3px}
.recipe-card-flourish{font-size:13px;color:#ac8748;letter-spacing:.1em}
.reading-card h2{margin-bottom:25px;font-size:1.13em;font-weight:700;line-height:1.65;max-width:36em}
.options{gap:14px;margin-top:24px}
.answer{position:relative;padding:20px 24px 20px 50px;min-height:72px;border:1px solid #d4ccb3;border-radius:16px;background:#fffefa;box-shadow:0 4px 0 #ddd2b370;transition:background .18s,border-color .18s,box-shadow .18s;letter-spacing:.015em}
.answer:before{content:'';position:absolute;left:22px;top:calc(50% - 5px);width:9px;height:9px;border-radius:3px;background:#c2ab73;transform:rotate(45deg)}
@media(hover:hover){.answer:hover:not(:disabled){border-color:#6c9c80;background:#f1f7ed;box-shadow:0 4px 0 #93b59766}}
.answer:active:not(:disabled){box-shadow:0 1px 0 #93b59766;transform:translateY(2px)}
.answer.correct{background:#e7f4e5;border-color:#548763;box-shadow:0 4px 0 #82a98277}
.answer.correct:before{background:#417550}
.answer.wrong{background:#fff1dd;border-color:#c79c62;box-shadow:0 4px 0 #d9bc8870}
.reading-card .feedback{font-size:16px;line-height:1.7;margin:22px 0 0;color:#3c6b48}
.reading-card .feedback:empty{margin:8px 0 0;min-height:12px}
.recipe-word{border-radius:18px;padding:20px 16px;background:#ede4cc80;margin:20px 0 28px;box-shadow:inset 0 1px 5px #816b3110}
.sentence-slots{border:1px solid #a9b89b;background:#edf2e4;box-shadow:inset 0 3px 10px #556e3910;min-height:100px;padding:18px;border-radius:18px}
.token-tray{gap:12px;padding-top:8px}
.token{border:1px solid #c7b589;border-bottom-width:4px;background:#fffdf5;border-radius:14px;min-height:60px;padding:12px 19px;box-shadow:0 5px 12px #64552a0a}
.token.used{opacity:.3;box-shadow:none}
.story-text{padding:22px 24px;border:0;border-left:4px solid #83a489;border-radius:0 18px 18px 0;background:#f0eedf;color:#294239;line-height:1.95;letter-spacing:.02em}
.hint-box{background:#fff0c9;border-color:#d3b977;line-height:1.7}
.companion-card{overflow:hidden;padding:25px 18px;border:1px solid #aac6a32a;border-radius:24px;background:radial-gradient(ellipse at 50% 27%,#719d6644,transparent 60%),linear-gradient(155deg,#224441,#122e36);box-shadow:0 15px 35px #031b2326}
.companion-card>.sprite{--size:160px;max-width:100%;filter:drop-shadow(0 12px 15px #071e2c66)}
.companion-card p{font-size:15px;line-height:1.8;color:#e4e9d4}
.companion-card .phase-badge{font-size:10px;letter-spacing:.15em;color:#f3d393;margin:10px 0}
.action-head{max-width:760px;margin-bottom:28px}
.action-head h2{font-size:clamp(28px,3vw,40px);font-weight:normal;color:#fff2cf;text-wrap:balance;margin-bottom:12px}
.action-head p{color:#d6e3d4;line-height:1.8}
.worktop{border:1px solid #cfb87838;border-radius:30px;box-shadow:0 20px 55px #02192144,inset 0 1px 0 #fff4c714;background:linear-gradient(#09242d70,#10242bd9),url('../scene/magic/workshop.webp') center/cover}
.worktop>.feedback:not(:empty){padding:12px 18px;border-radius:14px;background:#09232bbb;max-width:650px;color:#ffedb7;line-height:1.7}
.action-footer{margin-top:24px}.action-footer .primary{padding:15px 28px;border-radius:16px}
.action-card>.small-note{font-size:11px;color:#a9bdb4;margin-top:18px}
@media(max-width:1000px){.companion-card{padding:16px 20px;gap:18px}.companion-card>.sprite{--size:85px}.companion-card .phase-badge{margin-top:0}}
@media(max-width:700px){
 .level-page{padding:18px 10px}
 .mission-head{gap:10px;margin-bottom:16px}.mission-head h1{font-size:28px}.mission-head .eyebrow{font-size:9px;letter-spacing:.08em}.mission-head .step-count{font-size:10px;padding:6px 9px;border-radius:10px}
 .stepper{gap:5px;margin-bottom:22px}.task-layout{gap:18px}
 .reading-card{padding:22px 18px 26px;border-radius:22px 10px 22px 10px}
 .recipe-card-heading{gap:8px;margin-bottom:16px}.recipe-card-heading>.sprite{width:46px}.reading-card .recipe-card-heading .eyebrow{font-size:9px;letter-spacing:.06em}.recipe-card-flourish{font-size:11px}
 .reading-card h2{font-size:1.05em;margin-bottom:22px;line-height:1.6}
 .answer{min-height:66px;padding:16px 14px 16px 34px;border-radius:14px}.answer:before{left:14px;width:7px;height:7px;top:calc(50% - 4px)}.options{gap:12px}
 .recipe-word{padding:18px 10px}.sentence-slots{padding:12px;min-height:90px}.token{padding:10px 12px;min-height:54px}.token-tray{gap:9px}.story-text{padding:16px 14px}
 .companion-card{padding:12px 16px}.companion-card>.sprite{--size:75px}.companion-card p{font-size:13px}
 .action-head{margin-bottom:22px}.action-head h2{font-size:30px}.action-head p{font-size:17px;line-height:1.75}
 .worktop{border-radius:24px;padding-left:10px;padding-right:10px}.worktop>.feedback:not(:empty){font-size:14px;padding:10px 12px}
}
@media(max-width:359px){.reading-card{padding:20px 14px}.recipe-card-heading>.sprite{width:38px}.reading-card .recipe-card-heading .eyebrow{font-size:8px}.mission-head h1{font-size:26px}.action-head h2{font-size:28px}}
.no-motion .answer{transition:none}
@media(prefers-reduced-motion:reduce){.answer{transition:none}}


/* Use the fully expanded acorn scene as the shared task backdrop size. */
.level-page{--task-scene-height:784px}
.level-page :is(.acorn-scene,.scratch-scene,.sprout-story-scene,.feeding-scene,.letter-catch-scene,.worktop),
.level-page .task-layout:has(>.reading-card){
  height:var(--task-scene-height);
  min-height:var(--task-scene-height);
  overflow:auto;
  border-radius:26px;
}
/* Keep illustrations at their natural size and allow long clues to scroll. */
.level-page :is(.acorn-scene,.scratch-scene,.feeding-scene,.letter-catch-scene,.worktop)>*{flex-shrink:0}
.level-page :is(.scratch-scene,.feeding-scene,.worktop){justify-content:safe center}
.level-page :is(.sprout-story-scene,.task-layout.observatory-reading){align-items:safe center}
.level-page .task-layout:has(>.reading-card):not(.observatory-reading)>.reading-card{min-height:100%}
/* The next button follows the content even when a task needs scrolling. */
.level-page #worktop{padding-bottom:24px}
.level-page #worktop>.action-footer{position:static;margin-top:24px;flex-shrink:0}
@media(max-width:700px){
  .level-page{--task-scene-height:670px}
}


/* The pot rests on the tabletop in every feeding animation state. */
.plant-table-stage{position:relative;isolation:isolate;width:100%;max-width:500px;aspect-ratio:1/1.28;justify-self:center;transform:translateY(24px)}
.plant-table{position:absolute;left:0;bottom:0;width:100%;height:auto;pointer-events:none;user-select:none}
.plant-table-stage>.hungry-plant{position:absolute;top:0;left:7.5%;width:85%;z-index:1}

/* Keep the dragon's feet on the leaf while enlarging it by 30%. */
.effect-stairs .scene-dragon .sprite{transform:scale(1.3);transform-origin:50% 100%}

/* Greenhouse syllable practice: Spark sends a gentle flame toward a stone. */
.task-layout:has(.fire-game){grid-template-columns:minmax(0,1fr)}
.fire-game{min-width:0}
.fire-scene{position:relative;isolation:isolate;height:var(--task-scene-height);min-height:var(--task-scene-height);padding:24px 30px;border-radius:26px;overflow:auto;background:linear-gradient(#173c2426,#142d3459),url('../scene/magic/acorn-greenhouse.webp') center/cover;display:flex;flex-direction:column;align-items:center}
.fire-scene>.acorn-round{flex-shrink:0}
.fire-word{background:#fff7e5ed;color:#294632;border:2px solid #dfbd7e;border-radius:22px;text-align:center;padding:12px 30px;max-width:100%;box-shadow:0 7px 20px #17332444}
.fire-word-label{display:block;font-size:14px}.fire-word strong{display:block;font-size:clamp(28px,4vw,42px);letter-spacing:.06em}
.fire-slots{display:flex;gap:8px;justify-content:center;margin-top:8px}.fire-slot{font-size:calc(var(--reading) + 2px);min-width:55px;border-bottom:3px solid #a59b7c;color:#6e705c;padding:0 5px}.fire-slot.filled{color:#24522e;border-color:#5a8a4b}
.fire-arena{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:15%;width:100%;max-width:900px;flex:1;min-height:390px}
.fire-dragon{position:relative;width:100%;max-width:290px;justify-self:center;filter:drop-shadow(0 10px 10px #122d3144)}
.fire-dragon>.sprite{width:100%}.fire-mouth{position:absolute;top:38%;right:20%;width:4px;height:4px}
.fire-stones{display:flex;flex-direction:column;align-items:center;gap:12px}
.syllable-stone{position:relative;width:210px;max-width:100%;aspect-ratio:1.8;border:0;background:url('../scene/magic/syllable-stone.png') center/100% 100% no-repeat;color:#293b27;font-size:calc(var(--reading) + 12px);font-weight:bold;padding:18px;filter:drop-shadow(0 7px 5px #142e3244);transition:filter .2s}
.syllable-stone:hover,.syllable-stone.lit{filter:drop-shadow(0 0 13px #ffd77e)}.syllable-stone:focus-visible{outline:3px solid #ffe9a4;outline-offset:4px;border-radius:28%}.syllable-stone.try-again{filter:drop-shadow(0 0 6px #e8ba73)}
.fire-feedback{min-height:30px;margin:0;text-align:center;color:#fff9e4;font-size:16px;text-shadow:0 2px 5px #152c23}
.syllable-flame{position:fixed;z-index:80;pointer-events:none;width:64px;height:28px;border-radius:70% 45% 45% 70%;background:radial-gradient(ellipse at 70% 50%,#fffce5 0 15%,#ffe08b 25%,#ffaf38 50%,#ef6425 70%,transparent 74%);box-shadow:0 0 18px #ffc65e;transform-origin:center}
@media(max-width:700px){.fire-scene{padding:18px 12px}.fire-word{padding:10px 15px}.fire-arena{gap:8%;grid-template-columns:1fr 1fr;min-height:340px}.fire-stones{gap:16px;width:100%}.syllable-stone{font-size:calc(var(--reading) + 4px);padding:12px 8px;min-height:74px}.fire-slot{min-width:42px}.fire-feedback{font-size:14px}.fire-dragon{width:115%;max-width:210px}}
@media(prefers-reduced-motion:reduce){.syllable-stone{transition:none}}


/* Anchor the larger potting table to the floor of the feeding scene. */
.feeding-scene{padding-bottom:8px}
.feeding-stage{max-width:1020px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);margin:auto auto 0;align-items:center}
.feeding-scene>.feedback:empty{display:none}
.plant-table-stage:before{content:'';position:absolute;left:10%;bottom:3%;width:80%;height:6%;background:radial-gradient(ellipse,#061e24a6,transparent 70%);pointer-events:none;z-index:-1}
@media(max-width:700px){
  .feeding-scene{padding:22px 12px 6px}
  .feeding-stage{grid-template-columns:minmax(0,1fr);gap:18px}
  .feeding-stage>.plant-table-stage{grid-row:2;width:min(100%,340px)}
  .feeding-stage>.plant-food{grid-row:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-height:66px;gap:8px;width:100%;max-width:450px;justify-self:center}
  .feeding-stage .food-word{font-size:var(--reading);padding:10px 4px;overflow-wrap:anywhere}
}


/* Collected berries sit inside the bowl held by Spark. */
.berry-collect{width:min(100%,720px);text-align:center}
.berry-collect>p{margin:0 0 10px}
.berry-collect-stage{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:20px;align-items:center}
.berry-picks{display:flex;flex-direction:column;align-items:center;gap:6px}
.berry-picks>.gather-item{width:100px;max-width:100%;padding:4px}
.berry-dragon{position:relative;width:100%;max-width:400px;justify-self:center}
.berry-dragon>img{width:100%;height:auto;pointer-events:none}
.dragon-bowl-berries{position:absolute;left:36%;top:55%;width:36%;height:12%;display:flex;align-items:center;justify-content:center;gap:0}
.bowl-berry-slot{width:33.333%;aspect-ratio:1;display:block}
.berry-count{font-size:16px;color:#fff1c4}
.berry-collect.berries-ready .berry-picks{display:none}
.berry-collect.berries-ready .berry-collect-stage{grid-template-columns:minmax(0,1fr)}
.berries-ready .berry-dragon{max-width:240px}
.berry-flight{position:fixed;z-index:80;pointer-events:none}
@media(max-width:700px){.berry-collect-stage{gap:8px;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr)}.berry-picks>.gather-item{width:75px}.berry-collect>p{font-size:16px}.berries-ready .berry-dragon{max-width:190px}}


/* Only one quarter of each hidden flower peeks out of the greenery. */
.hidden-flower:not(.found)>.sprite{clip-path:inset(0 50% 50% 0);filter:none}
.hidden-flower:nth-child(4n+2):not(.found)>.sprite{clip-path:inset(0 0 50% 50%)}
.hidden-flower:nth-child(4n+3):not(.found)>.sprite{clip-path:inset(50% 0 0 50%)}
.hidden-flower:nth-child(4n):not(.found)>.sprite{clip-path:inset(50% 50% 0 0)}


/* Picture-letter substitutions on a quiet page in the greenhouse. */
.task-layout:has(.symbol-game){grid-template-columns:minmax(0,1fr)}
.symbol-game{min-width:0}
.symbol-scene{height:var(--task-scene-height);min-height:var(--task-scene-height);overflow:auto;display:flex;flex-direction:column;align-items:center;padding:24px;border-radius:26px;background:linear-gradient(#173c2433,#173c2466),url('../scene/magic/acorn-greenhouse.webp') center/cover}
.symbol-paper{width:min(100%,780px);margin:auto;padding:30px 36px;border:2px solid #dfc898;border-radius:24px;background:#fff9eaf5;color:#294632;box-shadow:0 14px 35px #142e3344}
.symbol-key{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}.symbol-key>span{display:flex;align-items:center;gap:8px;border:1px solid #b8c9ac;border-radius:14px;padding:8px 16px;font-size:28px;background:#f2f4df}
.word-symbol{font-family:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif;font-size:1em;line-height:1.2;display:inline-block}
.encoded-word{display:flex;justify-content:center;align-items:center;gap:6px;min-height:130px;margin:28px 0;font-size:clamp(30px,5vw,54px);font-weight:bold;letter-spacing:.02em}
.symbol-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.symbol-options .answer{text-align:center;padding:16px 8px;font-size:calc(var(--reading) + 2px)}.symbol-options .answer:before{display:none}
.symbol-paper .feedback{margin:16px 0 0;font-size:16px;text-align:center}.symbol-paper .feedback:empty{display:none}
@media(max-width:700px){.symbol-scene{padding:18px 10px}.symbol-paper{padding:22px 12px}.symbol-key{gap:10px}.symbol-key>span{padding:8px 12px;font-size:24px}.encoded-word{gap:2px;font-size:clamp(25px,7vw,44px);min-height:100px;margin:20px 0}.symbol-options{grid-template-columns:minmax(0,1fr);gap:10px}.symbol-options .answer{min-height:56px;padding:10px}.symbol-paper .feedback{font-size:14px}}


/* Reveal each discovered flower fully without covering its petals. */
.hidden-flower.found>.sprite{clip-path:none;opacity:1}
.hidden-flower.found .flower-check{inset:auto -4px -4px auto;width:24px;height:24px;font-size:16px}


/* A lantern-lit path illustrates the firefly reading clue. */
.level-page .task-layout.firefly-reading{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);padding:36px;align-items:safe center;background:linear-gradient(90deg,#102c311a,transparent),url('../scene/magic/firefly-reading.png') center/cover}
.level-page .task-layout.firefly-reading:has(>.reading-card)>.reading-card{min-height:0;padding:28px;background:#fff9eaf2;box-shadow:0 16px 40px #071e3355}
.firefly-reading>.companion-card{display:none}
@media(max-width:700px){
 .level-page .task-layout.firefly-reading{grid-template-columns:minmax(0,1fr);padding:90px 12px 24px;background-position:70% center;align-items:start}
 .level-page .task-layout.firefly-reading:has(>.reading-card)>.reading-card{padding:20px 16px}
}

/* Moonflowers turn into a lavender potion before the matching bottle is awarded. */
.moon-brew-art{display:block;width:100%;aspect-ratio:1;background-image:url('../scene/magic/moon-brewing.png');background-repeat:no-repeat;background-size:300% 100%}
.moon-pot-empty{background-position:0 50%}.moon-pot-full{background-position:50% 50%}.moon-potion{background-position:100% 50%}
.charm-art.charms-moon{background-image:url('../scene/magic/moon-charms.png')}
.level-page #worktop.moon-worktop{background:linear-gradient(#10283426,#16243455),url('../scene/magic/firefly-reading.png') center/cover;padding:35px 25px}
.moon-brew-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:25px;align-items:end;width:min(100%,950px);position:relative}
.moon-bowl{position:relative;max-width:390px;width:100%;justify-self:center}.moon-bowl>img{width:100%;pointer-events:none}
.moon-flowers{position:absolute;left:35%;top:52%;width:39%;height:15%;border:0;background:transparent;padding:0;cursor:grab;touch-action:none;border-radius:50%}
.moon-flowers .moon-flower{position:absolute;width:36%;height:auto;aspect-ratio:1;pointer-events:none}
.moon-flower-0{left:0;top:15%}.moon-flower-1{left:28%;top:5%}.moon-flower-2{left:57%;top:20%}.moon-flower-3{left:14%;top:36%}.moon-flower-4{left:45%;top:40%}.moon-flower-5{left:13%;top:-12%}.moon-flower-6{left:48%;top:-8%}
.moon-bowl.emptied .moon-flowers{visibility:hidden}
.moon-pot{position:relative;display:block;width:100%;max-width:440px;justify-self:center;aspect-ratio:1;border:0;padding:0;background:none;border-radius:25%;isolation:isolate}
.moon-pot:disabled{opacity:1;cursor:default}.moon-pot.over{filter:drop-shadow(0 0 18px #dab7ff)}
.moon-fireworks{position:absolute;left:50%;top:35%;pointer-events:none}.moon-spark{position:absolute;width:8px;height:8px;border-radius:50%;box-shadow:0 0 8px currentColor}
.moon-flower-flight{position:fixed;z-index:80;pointer-events:none}
.brew-ready .moon-bowl{display:none}.brew-ready .moon-brew-stage{grid-template-columns:minmax(0,1fr)}.brew-ready .moon-pot{max-width:460px;filter:drop-shadow(0 0 25px #c894ff66)}
@media(max-width:700px){.level-page #worktop.moon-worktop{padding:24px 12px}.moon-brew-stage{gap:4px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.moon-flowers{min-width:44px;min-height:44px}.moon-pot{min-width:0}.brew-ready .moon-pot{max-width:340px}}


/* Match the route diagram by drawing through a four-by-four letter grid. */
.task-layout:has(.trace-game){grid-template-columns:minmax(0,1fr)}.trace-game{min-width:0}
.trace-scene{height:var(--task-scene-height);min-height:var(--task-scene-height);overflow:auto;border-radius:26px;padding:24px;display:flex;flex-direction:column;align-items:center;background:linear-gradient(#173c2430,#163b3455),url('../scene/magic/acorn-greenhouse.webp') center/cover}
.trace-panels{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:35px;align-items:center;width:min(100%,850px);margin:auto}
.trace-guide,.trace-letter-panel{padding:18px;border:1px solid #dbc797;border-radius:20px;background:#fff9eaf5;color:#294533;min-width:0}.trace-panels h3{text-align:center;font-size:18px;margin:0 0 12px}
.trace-guide svg{display:block;width:100%;aspect-ratio:1;border:1px solid #b1b79c;border-radius:6px;background:#fffdf5}.trace-grid-lines{stroke:#b9c3ab;stroke-width:.5;fill:none}.trace-guide-line{fill:none;stroke:#c15b29;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.trace-start{fill:#b94822}.trace-arrow{fill:none;stroke:#b94822;stroke-width:2.5;stroke-linecap:round}
.trace-board{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));aspect-ratio:1;touch-action:none;user-select:none;border:1px solid #9ba98f;background:#fffdf5}
.trace-cell{position:relative;z-index:1;display:grid;place-items:center;min-width:0;padding:0;border:1px solid #bac4ac;background:transparent;color:#294533;font-size:clamp(22px,3vw,36px);font-weight:bold;touch-action:none;border-radius:0}.trace-cell.traced{color:#234b36;background:#a4c98e33}.trace-cell:disabled{opacity:1}.trace-cell:focus-visible{outline-offset:-4px}
.trace-board>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.trace-board polyline{fill:none;stroke:#e8ad62;stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.trace-word{min-height:54px;margin:18px 0 0;padding:8px 20px;background:#fff9eaf0;color:#25472d;border-radius:14px;font-size:clamp(24px,4vw,34px);font-weight:bold;letter-spacing:.08em}.trace-word>span{color:#81876f}
.trace-scene>.feedback{color:#fffbe5;text-shadow:0 2px 4px #153123;text-align:center;font-size:16px;min-height:30px;margin:12px 0 0}
@media(max-width:700px){.trace-scene{padding:16px 10px}.trace-panels{grid-template-columns:minmax(0,1fr);gap:14px;max-width:340px}.trace-guide{width:150px;justify-self:center;padding:8px}.trace-panels h3{font-size:14px;margin-bottom:6px}.trace-guide svg{width:110px;margin:auto}.trace-letter-panel{padding:10px}.trace-board{max-width:280px;margin:auto}.trace-cell{font-size:26px;min-height:44px}.trace-word{font-size:24px;margin-top:12px}.trace-scene>.feedback{font-size:14px}}


/* Picture names are found by underlining their syllables, like a garden workbook. */
.task-layout:has(.picture-syllable-game){grid-template-columns:minmax(0,1fr)}.picture-syllable-game{min-width:0}
.picture-syllable-scene{height:var(--task-scene-height);min-height:var(--task-scene-height);overflow:auto;padding:32px;display:flex;flex-direction:column;justify-content:safe center;gap:18px;border-radius:26px;background:linear-gradient(#173c2430,#163b3455),url('../scene/magic/acorn-greenhouse.webp') center/cover}
.picture-syllable-row{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:24px;padding:16px 22px;background:#fff9eaf5;border:1px solid #dcc697;border-radius:22px;color:#294533;flex-shrink:0}
.picture-syllable-art{display:block;width:130px;max-width:100%;aspect-ratio:1;background:url('../scene/magic/picture-syllables.png') 0 50%/300% 100% no-repeat;margin:auto}.picture-syllable-art-1{background-position:50% 50%}.picture-syllable-art-2{background-position:100% 50%}
.picture-syllable-word{display:block;min-height:24px;text-align:center;font-size:16px;font-weight:bold;color:#346341}
.picture-syllable-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 8px}.picture-syllable{min-width:0;min-height:48px;padding:6px 2px;border:0;border-radius:8px;background:transparent;color:#294533;font-weight:bold;font-size:calc(var(--reading) + 2px)}.picture-syllable.underlined{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px;background:#dcebcba3;color:#275734}.picture-syllable:disabled{opacity:1}.picture-syllable:focus-visible{outline:3px solid #b78a43;outline-offset:1px}
.picture-syllable-scene>.feedback{margin:0;min-height:30px;text-align:center;color:#fffbe7;text-shadow:0 2px 4px #163523;font-size:16px;flex-shrink:0}
@media(max-width:700px){.picture-syllable-scene{padding:18px 10px;gap:12px}.picture-syllable-row{grid-template-columns:70px minmax(0,1fr);padding:12px 8px;gap:8px}.picture-syllable-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}.picture-syllable{font-size:var(--reading);min-height:44px;padding:5px 0}.picture-syllable-word{font-size:12px;overflow-wrap:anywhere}.picture-syllable-scene>.feedback{font-size:14px}}

/* Finished picture rows remain readable but are clearly inactive. */
.picture-syllable-row.completed{filter:grayscale(1);background:#e8e8e5f5;border-color:#b8b8b3}
.picture-syllable-row.completed .picture-syllable-art{opacity:.55}
.picture-syllable-row.completed :is(.picture-syllable,.picture-syllable-word){color:#737373}
.picture-syllable-row.completed .picture-syllable{cursor:default}
.picture-syllable-row.completed .picture-syllable.underlined{background:#d5d5d2}


.picture-syllable-art.picture-extra-art{background-image:url('../scene/magic/picture-syllables-extra.png');background-size:300% 200%}
.picture-extra-0{background-position:0 0}.picture-extra-1{background-position:50% 0}.picture-extra-2{background-position:100% 0}
.picture-extra-3{background-position:0 100%}.picture-extra-4{background-position:50% 100%}.picture-extra-5{background-position:100% 100%}
.picture-syllable-scene>.picture-round{margin:0;flex-shrink:0}

/* The hidden sign glows among the greenhouse roots beside the reading card. */
.level-page .task-layout.roots-reading{background-image:linear-gradient(90deg,#102c311a,transparent),url('../scene/magic/roots-reading.png')}

/* Four crystal fragments, a crystal potion, and a separate bottling action. */
.star-brew-art{display:block;width:100%;aspect-ratio:1;background:url('../scene/magic/star-brewing.png') 0 50%/300% 100% no-repeat}.star-pot-full{background-position:50% 50%}.star-potion{background-position:100% 50%}
.charm-art.charms-star{background-image:url('../scene/magic/star-charms.png')}
.level-page #worktop.star-worktop{background:linear-gradient(#123b3333,#0e272b66),url('../scene/magic/roots-reading.png') center/cover;padding:32px 20px}
.crystal-puzzle{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:35px;width:min(100%,800px)}
.crystal-piece-tray{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:250px;align-content:center}
.crystal-piece{display:block;width:100%;aspect-ratio:1;padding:0;border:2px solid #ceebea66;border-radius:18px;background:#123b3ddd;touch-action:none;cursor:grab}.crystal-piece[aria-pressed=true]{border-color:#ffda7a;background:#315855}.crystal-piece[hidden]{display:block;visibility:hidden}
.crystal-fragment{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:none}
.crystal-fragment>.star-brew-art{position:absolute;max-width:none;width:200%;height:200%}.fragment-0>.star-brew-art{left:0;top:0}.fragment-1>.star-brew-art{left:-100%;top:0}.fragment-2>.star-brew-art{left:0;top:-100%}.fragment-3>.star-brew-art{left:-100%;top:-100%}
.crystal-outline{position:relative;aspect-ratio:1;width:100%;border:2px solid #b8f1e8aa;border-radius:18px;background:#122f39bd;overflow:hidden}.crystal-guide{position:absolute;inset:0;opacity:.2;filter:grayscale(1)}
.crystal-slots{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.crystal-slot{min-width:0;padding:0;border:1px dashed #d6f7f28c;background:transparent;color:#d5f9f0;font-size:30px}.crystal-slot.placed{border-color:transparent}.crystal-slot:disabled{opacity:1}
.crystal-brew-pair{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;width:min(100%,900px)}.star-prop{width:100%;padding:0;border:0;background:none;border-radius:20%;touch-action:none}.star-prop:disabled{opacity:1}.star-prop.over{filter:drop-shadow(0 0 20px #c1f8ff)}
.star-bottle-preview{position:relative;width:100%;aspect-ratio:1}.star-bottle-preview>.star-brew-art{position:absolute;inset:0}.empty-star-bottle{filter:grayscale(1);opacity:.35}.star-bottle-liquid{clip-path:inset(100% 0 0)}
.star-finished-bottle{filter:drop-shadow(0 0 28px #a5ecfa66)}
.crystal-flight,.crystal-drag-ghost{position:fixed;z-index:80;pointer-events:none}.crystal-pour-stream{position:fixed;z-index:80;pointer-events:none;height:9px;border-radius:999px;transform-origin:0 50%;background:linear-gradient(#e4ffff,#51dded,#d7ffff);box-shadow:0 0 10px #b0f7ff}
@media(max-width:700px){.crystal-puzzle{gap:12px;grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}.crystal-piece-tray{min-height:150px;gap:8px}.crystal-piece{border-radius:10px;min-height:44px}.crystal-brew-pair{gap:10px}.level-page #worktop.star-worktop{padding:24px 12px}.star-finished-bottle>.potion-display{max-width:240px}}

/* Every pendant uses the same neck anchor as the star potion. */
.potion-display>.potion-charm{left:50%;top:39%}

/* Morning dew and a flower-covered door frame the missing-letter exercise. */
.level-page .task-layout.dew-reading{background-image:linear-gradient(90deg,#102c311a,transparent),url('../scene/magic/dew-reading.png')}

/* Recipe 5: scattered pictures, 60% of their previous illustration size. */
.task-layout:has(.matching-game){grid-template-columns:minmax(0,1fr)}
.matching-game{min-width:0}
.matching-scene{height:var(--task-scene-height);min-height:var(--task-scene-height);overflow:auto;padding:16px;display:flex;flex-direction:column;align-items:center;border-radius:26px;background:linear-gradient(#193a2910,#173f3820),url('../scene/magic/dew-reading.png') center/cover}
.matching-board{position:relative;width:100%;flex:1;min-height:520px;--picture-size:clamp(44px,7vw,85px)}
.matching-tile{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:calc(var(--picture-size) + 12px);height:calc(var(--picture-size) + 12px);min-width:44px;min-height:44px;padding:6px;border:0;border-radius:50%;background:transparent;box-shadow:none;cursor:pointer;touch-action:manipulation}
.matching-art{display:block;width:100%;height:100%;background-image:url('../scene/magic/matching-pictures.png');background-size:300% 300%;background-repeat:no-repeat;filter:drop-shadow(0 2px 3px #142b3990) drop-shadow(0 0 3px #fff4cf)}
.matching-art-extra{background-image:url('../scene/magic/matching-pictures-extra.png');background-size:400% 300%}
.matching-tile:hover{background:#fff4cc45}.matching-tile.selected{outline:3px solid #ffe3a3;background:#ffedb857}.matching-tile.matched{outline:3px solid #c1f3a3;background:#45834c70}.matching-tile:disabled{opacity:1;cursor:default}.matching-tile:focus-visible{outline:3px solid #fff5c9;outline-offset:4px}
.matching-check{position:absolute;right:0;top:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#6a522a;color:white;font-size:16px}.matched .matching-check{background:#45834c}
.matching-scene>.feedback{min-height:52px;margin:8px 0 0;max-width:660px;text-align:center;color:#fffbea;text-shadow:0 2px 4px #163523;flex-shrink:0}.matching-scene>.feedback.error{background:#fff8eb;color:#7b392a;text-shadow:none;padding:12px;border-radius:14px}
@media(max-width:700px){.matching-scene{padding:12px 8px}.matching-board{--picture-size:clamp(44px,12vw,54px);min-height:520px}.matching-tile{left:var(--mx);top:var(--my)}.matching-scene>.feedback{font-size:16px}}

/* A curved stream feeds an open glass flask; liquid rises inside its silhouette. */
.crystal-pouring-scene{position:relative;width:min(100%,900px);aspect-ratio:900/570;isolation:isolate}
.crystal-pouring-scene #starPour{position:absolute;width:45%;left:0;top:0;transform-origin:80% 35%;z-index:2}
.crystal-pouring-scene #starBottle{position:absolute;left:61%;top:38.6%;width:30%;z-index:3;filter:drop-shadow(0 12px 14px #082c3860)}
.crystal-glass-bottle{display:block;width:100%;overflow:visible}
.crystal-pour-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;pointer-events:none;z-index:1;filter:drop-shadow(0 0 5px #83edff88)}
.crystal-pour-arc path{fill:none;stroke-linecap:round}.pour-outer{stroke:#41c5da;stroke-width:10}.pour-inner{stroke:#dbffff;stroke-width:3}

.matching-count{align-self:center;flex-shrink:0;margin:0 0 8px;padding:8px 18px;border-radius:18px;background:#fff6dfeb;color:#294c3b;font-weight:bold;font-size:16px}
.matching-tile.matched .matching-art{filter:grayscale(1);opacity:.48}

/* Normalize visible bottle height, accounting for each illustration's transparent padding. */
.sprite.potion-display{width:var(--size,var(--art-size,165px));aspect-ratio:1}
.potion-display>.sprite{transform:translate(var(--bottle-x,0%),var(--bottle-y,0%)) scale(var(--bottle-scale,1));transform-origin:center}
.potion-display.potion-room-0{--bottle-scale:.944;--bottle-x:-6.3%;--bottle-y:3.9%}
.potion-display.potion-room-3{--bottle-scale:.955;--bottle-x:-1.5%;--bottle-y:4.3%}
.potion-display.potion-level-2{--bottle-scale:.867;--bottle-x:.4%;--bottle-y:-1.1%}
.potion-display.potion-level-3,.potion-display.potion-level-21{--bottle-scale:1.092;--bottle-x:-3%;--bottle-y:-.2%}
.potion-display.potion-level-4{--bottle-scale:1;--bottle-x:-2.4%;--bottle-y:0%}
.reward-page:not(.finale)>.potion-display{--size:300px}
.book-grid .potion-card>.potion-display{--size:190px}
@media(max-width:700px){.reward-page:not(.finale)>.potion-display{--size:220px}.book-grid .potion-card>.potion-display{--size:160px}}

/* Morning-dew brewing in the flower-door greenhouse. */
.dew-brew-art{display:block;width:100%;aspect-ratio:1;background:url('../scene/magic/dew-brewing.png') 0 50%/300% 100% no-repeat}.dew-pot-full{background-position:50% 50%}.dew-potion{background-position:100% 50%}
.level-page #worktop.dew-worktop{background:linear-gradient(#174a3020,#163b3e55),url('../scene/magic/dew-reading.png') center/cover;padding:28px 20px}
.dew-collect-scene{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;width:min(100%,900px)}
.dew-leaves,.dew-receiving-pot{position:relative;width:100%;aspect-ratio:1}.dew-leaves{filter:drop-shadow(0 9px 10px #153d3880)}
.dew-pick{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:clamp(48px,6vw,72px);height:clamp(48px,6vw,72px);padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;touch-action:manipulation}.dew-pick[hidden]{display:none}.dew-pick:focus-visible{outline:3px solid #ffe6a1;outline-offset:4px}
.dew-pick>span,.dew-flying-drop{display:block;background:url('../scene/magic/morning-dewdrop.png') center/contain no-repeat;filter:drop-shadow(0 2px 3px #123e4470) drop-shadow(0 0 6px #c7fff0a0)}.dew-pick>span{width:100%;height:100%;pointer-events:none}.dew-pick:hover>span{filter:drop-shadow(0 0 9px #eeffca)}
.dew-flying-drop{position:fixed;z-index:90;pointer-events:none}
.dew-pot-glow{position:absolute;left:24%;top:22%;width:53%;height:25%;border-radius:50%;background:radial-gradient(ellipse,#a9ffe6aa,transparent 70%);pointer-events:none}
.dew-count{padding:8px 18px;border:1px solid #e4ca86;border-radius:24px;background:#fff7e2e8;color:#355640;font-size:16px}
.dew-finished{filter:drop-shadow(0 0 30px #c2ffe891)}
.dew-pouring-scene .crystal-bottle-star{display:none}.dew-pouring-scene #starLiquid stop:first-child{stop-color:#e1ffe9}.dew-pouring-scene #starLiquid stop:nth-child(2){stop-color:#84e5bd}.dew-pouring-scene #starLiquid stop:last-child{stop-color:#349f93}.dew-pouring-scene .pour-outer{stroke:#8bdfbd}.dew-pouring-scene .pour-inner{stroke:#e0ffe8}
.potion-display.potion-level-5{--bottle-scale:1;--bottle-x:0%;--bottle-y:0%}
@media(max-width:700px){.dew-collect-scene{gap:6px}.level-page #worktop.dew-worktop{padding:20px 10px}.dew-finished>.potion-display{max-width:240px}}

/* Five-word Dobble cards: one shared word per card pair. */
.task-layout:has(.dobble-game){grid-template-columns:minmax(0,1fr)}.dobble-game{min-width:0}
.dobble-scene{height:var(--task-scene-height);min-height:var(--task-scene-height);overflow:auto;padding:28px 22px;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:22px;border-radius:26px;background:linear-gradient(#183f3026,#173c3655),url('../scene/magic/dew-reading.png') center/cover}
.dobble-round{margin:0;padding:8px 20px;border-radius:22px;background:#fff8e8ed;color:#315343;font-weight:bold;flex-shrink:0}
.dobble-cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;width:min(100%,940px);flex-shrink:0}
.dobble-card{position:relative;aspect-ratio:1;border:3px solid #b79a59;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fffef9,#fff6db);box-shadow:inset 0 0 0 7px #f0dfad66,0 12px 24px #14362e55;container-type:inline-size}
.dobble-word{position:absolute;transform:translate(-50%,-50%) rotate(var(--word-angle));font-size:calc(9cqw * var(--word-scale));font-weight:800;line-height:1.15;min-height:44px;padding:5px 7px;border:2px solid transparent;border-radius:12px;background:transparent;white-space:nowrap;touch-action:manipulation}
.dobble-color-0{color:#0874ae}.dobble-color-1{color:#bb8800}.dobble-color-2{color:#c83030}.dobble-color-3{color:#16824b}
.dobble-font-0{font-family:Verdana,sans-serif}.dobble-font-1{font-family:Georgia,serif}.dobble-font-2{font-family:'Trebuchet MS',sans-serif}
.dobble-word.selected{border-color:#aa8540;background:#ffebaa88}.dobble-word.matched{border-color:#44824b;background:#daefc9}.dobble-word:focus-visible{outline:3px solid #486c60;outline-offset:3px}.dobble-word:disabled{opacity:1}
.dobble-scene>.feedback{min-height:48px;margin:0;color:#fff7df;text-align:center;text-shadow:0 2px 3px #15392d;flex-shrink:0}.dobble-scene>.feedback.error{background:#fff8e9;color:#774526;border-radius:14px;padding:10px 16px;text-shadow:none}
@media(max-width:700px){.dobble-scene{padding:16px 10px;gap:12px;justify-content:flex-start}.dobble-cards{grid-template-columns:1fr;max-width:280px;gap:14px}.dobble-card{border-width:2px}.dobble-word{padding:3px 5px}.dobble-round{font-size:14px}}

.potion-ready-pot{max-width:400px;position:relative;filter:drop-shadow(0 0 24px #c4fff04d)}
.potion-ready-label{display:block;width:fit-content;max-width:100%;margin:6px auto 0;padding:12px 20px;border-radius:18px;background:#fff2d4;color:#355442;font-size:18px;line-height:1.4;font-weight:bold}
.potion-ready-pot:focus-visible{outline:3px solid #ffe3a5;outline-offset:6px}

.charm-art.charms-dew{background-image:url('../scene/magic/dew-charms.png')}

/* Recipe 6: find each pictured word among distractor letters. */
.task-layout:has(.underline-game){grid-template-columns:minmax(0,1fr)}.underline-game{min-width:0}
.underline-scene{height:var(--task-scene-height);min-height:var(--task-scene-height);overflow:auto;padding:30px;display:flex;flex-direction:column;justify-content:safe center;gap:20px;border-radius:26px;background:linear-gradient(#24483220,#17423755),url('../scene/magic/acorn-greenhouse.webp') center/cover}
.underline-row{display:grid;grid-template-columns:145px minmax(0,1fr);align-items:center;gap:20px;padding:18px 22px;border:2px solid #bfa66c;border-radius:22px;background:#fff9eaf5;flex-shrink:0;color:#2b4939}
.underline-art{display:block;width:100%;aspect-ratio:1;background:url('../scene/magic/underline-pictures.png') 0 50%/300% 100% no-repeat}
.underline-result{display:block;min-height:24px;text-align:center;font-size:15px;font-weight:bold;letter-spacing:.05em;overflow-wrap:anywhere}
.underline-letters{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px}
.underline-letter{display:inline-grid;place-items:center;min-width:44px;min-height:52px;padding:4px 6px;border:2px solid transparent;border-radius:9px;background:transparent;color:#273b32;font:700 clamp(24px,2.6vw,34px)/1.3 Verdana,sans-serif;touch-action:manipulation}
.underline-letter.picked{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px;color:#2b6745;background:#dcedd4}.underline-letter:disabled{opacity:1}.underline-letter:focus-visible{outline:3px solid #b48a39;outline-offset:2px}
.underline-row.completed{filter:grayscale(1);background:#e7e8e1ef;border-color:#aeb4a5}.underline-row.completed .underline-art{opacity:.5}.underline-row.completed .underline-letter{color:#777}
.underline-scene>.feedback{min-height:48px;margin:0;text-align:center;color:#fff9e4;text-shadow:0 2px 3px #254831;flex-shrink:0}.underline-scene>.feedback.error{background:#fff8e9;color:#794d2d;padding:12px;border-radius:14px;text-shadow:none}
@media(max-width:700px){.underline-scene{padding:16px 10px;gap:12px;justify-content:flex-start}.underline-row{grid-template-columns:78px minmax(0,1fr);gap:8px;padding:12px 8px}.underline-letter{min-width:44px;min-height:48px;font-size:23px;padding:2px}.underline-letters{gap:2px;justify-content:flex-start}.underline-result{font-size:12px;letter-spacing:0}}

.underline-art.underline-extra-art{background-image:url('../scene/magic/underline-new-rounds.png');background-size:300% 200%;border-radius:16px;box-shadow:0 3px 9px #35472c22}
.underline-round{align-self:center;flex-shrink:0;margin:0;padding:8px 18px;border-radius:22px;background:#fff6dfed;color:#315343;font-size:16px;font-weight:bold}

/* Recipe 6: connect an adjective to a pictured noun. */
.task-layout:has(.phrase-game){grid-template-columns:minmax(0,1fr)}.phrase-game{min-width:0}
.phrase-scene{height:var(--task-scene-height);min-height:var(--task-scene-height);overflow:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px;border-radius:26px;background:linear-gradient(#264d3522,#193e3766),url('../scene/magic/acorn-greenhouse.webp') center/cover}
.phrase-count{margin:0;padding:8px 18px;border-radius:22px;background:#fff6e3ed;color:#35563c;font-size:16px;flex-shrink:0}
.phrase-board{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 130px;column-gap:160px;width:min(100%,820px);padding:12px 28px;border:1px solid #dbc28c;border-radius:24px;background:#fff9eaf5;flex-shrink:0}
.phrase-words,.phrase-pictures{position:relative;z-index:1;display:grid;grid-template-rows:repeat(6,94px)}
.phrase-slot{display:flex;align-items:center}.phrase-words .phrase-slot{justify-content:flex-start}.phrase-pictures .phrase-slot{justify-content:center}
.phrase-word{position:relative;min-height:48px;width:100%;padding:9px 12px;border:2px solid transparent;border-radius:12px;background:#fff9ec;color:#294534;text-align:left;font-size:calc(var(--reading) + 2px);font-weight:bold;touch-action:none}
.phrase-word:after,.phrase-picture:before{content:'';position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:#967d42;transform:translateY(-50%)}.phrase-word:after{right:-11px}.phrase-picture:before{left:-11px}
.phrase-word.selected{border-color:#bd913c;background:#fff0bf}.phrase-word.matched{color:#6d7b6b;background:#e1ebd5}
.phrase-picture{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:90px;min-height:80px;padding:0;border:0;border-radius:12px;background:transparent;color:#45633d}
.phrase-art{display:block;width:74px;aspect-ratio:1;border-radius:13px;background:url('../scene/magic/phrase-pictures.png') 0 0/300% 200% no-repeat;box-shadow:0 2px 6px #25412630}.phrase-noun{font-size:12px;line-height:1.3;font-weight:bold}.phrase-picture.matched .phrase-art{opacity:.55;filter:grayscale(.7)}
.phrase-word:disabled,.phrase-picture:disabled{opacity:1}.phrase-word:focus-visible,.phrase-picture:focus-visible{outline:3px solid #b68d3e;outline-offset:3px}
.phrase-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}.phrase-lines path{fill:none;stroke:#548762;stroke-width:3;stroke-linecap:round}.phrase-lines .drawing{stroke:#be933c;stroke-dasharray:7 5}
.phrase-scene>.feedback{margin:0;min-height:45px;color:#fff6df;text-align:center;text-shadow:0 2px 4px #214d34;flex-shrink:0}.phrase-scene>.feedback.error{background:#fff7e8;color:#79502e;text-shadow:none;border-radius:12px;padding:10px}
@media(max-width:700px){.phrase-scene{padding:14px 8px;gap:10px}.phrase-board{grid-template-columns:minmax(0,1fr) 76px;column-gap:44px;padding:8px 14px}.phrase-words,.phrase-pictures{grid-template-rows:repeat(6,86px)}.phrase-word{padding:7px 3px;font-size:16px;overflow-wrap:anywhere}.phrase-picture{width:70px;min-height:74px}.phrase-art{width:64px}.phrase-noun{font-size:11px}}

.phrase-art.phrase-extra-art{display:flex;align-items:center;justify-content:center;overflow:hidden;background:none}
.phrase-art-crop{display:block;flex-shrink:0;background:url('../scene/magic/phrase-extra-rounds.png') no-repeat}

/* Final greenhouse clue beside the flower-covered doorway. */
.level-page .task-layout.flower-door-reading{background-image:linear-gradient(90deg,#143c3526,transparent),url('../scene/magic/dew-reading.png')}

/* Greenhouse finale: four-piece key, flower doors and golden petal potion. */
.key-art{display:block;width:100%;aspect-ratio:1;background:url('../scene/magic/greenhouse-key-finale.png') 0 0/300% 200% no-repeat;border-radius:18px}.key-art-1{background-position:50% 0}.key-art-2{background-position:100% 0}.key-art-3{background-position:0 100%}.key-art-4{background-position:50% 100%}.key-art-5{background-position:100% 100%}
.level-page #worktop.key-worktop{background:linear-gradient(#28462422,#19382c66),url('../scene/magic/dew-reading.png') center/cover;padding:30px 22px}
.key-puzzle{max-width:740px}.key-fragment{display:block;position:relative;width:100%;height:100%;overflow:hidden;pointer-events:none}.key-fragment>.key-art{position:absolute;width:200%;height:200%;max-width:none;border-radius:0}.key-fragment-0>.key-art{left:0;top:0}.key-fragment-1>.key-art{left:-100%;top:0}.key-fragment-2>.key-art{left:0;top:-100%}.key-fragment-3>.key-art{left:-100%;top:-100%}
.key-door-pair{display:grid;grid-template-columns:.65fr 1fr;align-items:center;gap:30px;width:min(100%,780px)}.key-door-button{padding:0;border:2px solid #f3d48d;border-radius:20px;background:transparent;touch-action:manipulation}.key-door-button:focus-visible{outline:4px solid #fff3b0;outline-offset:5px}.assembled-key{filter:drop-shadow(0 0 18px #ffde9780)}.key-open-door{max-width:440px;margin-bottom:22px}
.key-flower-source{filter:none}.key-receiving-pot{width:100%;aspect-ratio:1}.key-petal{position:absolute;transform:translate(-50%,-50%);width:clamp(48px,6vw,70px);height:clamp(48px,6vw,70px);border:0;padding:5px;background:transparent;touch-action:manipulation}.key-petal[hidden]{display:none}.key-petal>span,.key-petal-flight{display:block;background:url('../scene/magic/golden-petals.png') var(--petal-position,0%) 50%/300% 100% no-repeat;filter:drop-shadow(0 2px 3px #5c3b2855) drop-shadow(0 0 5px #fff0b788)}.key-petal>span{width:100%;height:100%;pointer-events:none}.key-petal:focus-visible{outline:3px solid #fff2b8;border-radius:50%}.key-petal-flight,.key-piece-ghost{position:fixed;pointer-events:none;z-index:90}
.potion-display.potion-level-6{--bottle-scale:1;--bottle-x:0%;--bottle-y:0%}
@media(max-width:700px){.level-page #worktop.key-worktop{padding:22px 12px}.key-door-pair{gap:12px}.key-open-door{max-width:320px}}

.charm-art.charms-key{background-image:url('../scene/magic/greenhouse-key-charms.png')}

.key-petal[data-key-petal="1"]{--petal-position:50%}.key-petal[data-key-petal="2"]{--petal-position:100%}

/* Chapter celebration and a preview of the newly unlocked observatory. */
.observatory-unlock{max-width:1250px;margin:24px auto 40px;border:1px solid #d9c89466;border-radius:30px;overflow:hidden;background:linear-gradient(110deg,#081b38e8,#16294baa),url('../scene/magic/route-observatory.webp') center/cover;box-shadow:0 18px 60px #0003;padding:42px;display:grid;grid-template-columns:1fr 1.1fr;gap:38px;color:#fff5dc}
.observatory-welcome{align-self:center}.observatory-celebration{font-size:48px;letter-spacing:.15em;color:#ffe0a0;text-shadow:0 0 24px #ffc87690;margin-bottom:18px}.observatory-welcome h1{font-size:clamp(30px,3.4vw,46px);line-height:1.2;margin:12px 0 22px;color:#ffe6ae}.observatory-lead{font-size:20px;line-height:1.7}.observatory-guide{display:flex;align-items:center;gap:16px;margin-top:22px}.observatory-guide p{line-height:1.6;font-size:17px}
.observatory-levels{padding:24px;border:1px solid #e4d4a14d;border-radius:24px;background:#091d35cc}.observatory-levels h2{font-size:25px;margin:0 0 12px}.observatory-levels>p{font-size:15px;line-height:1.6;color:#d4dfea}.observatory-preview{list-style:none;padding:0;margin:22px 0;display:grid;gap:10px}.observatory-preview button{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:12px;align-items:center;text-align:left;padding:13px 14px;border:1px solid #f1cf8655;border-radius:16px;background:#30475e;color:#fff0cd}.observatory-preview button:not(:disabled){background:linear-gradient(110deg,#496052,#314660);border-color:#e6c678}.observatory-preview button:disabled{opacity:1;color:#c3cddd;background:#203347;border-color:#8ba3bd3b}.observatory-level-number{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid #e2c38a75;background:#182d46;color:#ffe1a5;font-weight:bold;font-size:20px}.observatory-level-title{font-weight:bold;line-height:1.4;font-size:16px}.observatory-level-state{font-size:12px;line-height:1.5;margin-top:3px}.observatory-levels .button-row{justify-content:center}.observatory-preview button:focus-visible{outline:3px solid #ffe6aa;outline-offset:3px}
@media(max-width:850px){.observatory-unlock{grid-template-columns:1fr;margin:16px 12px 30px;padding:24px;gap:22px}.observatory-welcome{text-align:center}.observatory-guide{justify-content:center;text-align:left}.observatory-levels{padding:18px}.observatory-celebration{font-size:36px;margin-bottom:10px}}
@media(max-width:450px){.observatory-unlock{padding:20px 12px}.observatory-lead{font-size:17px}.observatory-guide .sprite{--size:80px}.observatory-preview button{padding:10px;column-gap:9px}.observatory-level-title{font-size:15px}}

/* Soft fireworks celebrate the unlocked chapter without covering its controls. */
.observatory-unlock{position:relative;isolation:isolate}.observatory-welcome,.observatory-levels{position:relative;z-index:1}
.observatory-fireworks{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.observatory-burst{position:absolute;width:1px;height:1px;color:var(--firework-color)}
.observatory-burst>i{position:absolute;display:block;width:var(--spark-size);height:var(--spark-size);border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor,0 0 14px currentColor;opacity:0;animation:observatory-spark 3.2s var(--burst-delay) 3 both;will-change:transform,opacity}
.observatory-burst-halo{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border:1px solid currentColor;border-radius:50%;opacity:0;animation:observatory-halo 3.2s var(--burst-delay) 3 both}
@keyframes observatory-spark{0%{opacity:0;transform:translate(0,35px) scale(.2)}12%{opacity:.85;transform:translate(0,0) scale(.6)}40%{opacity:.95;transform:translate(var(--spark-x),var(--spark-y)) scale(1)}72%{opacity:.4;transform:translate(var(--spark-x),var(--spark-fall)) scale(.7)}90%,100%{opacity:0;transform:translate(var(--spark-x),var(--spark-fall)) scale(.2)}}
@keyframes observatory-halo{0%,10%{opacity:0;transform:scale(.1)}22%{opacity:.4}58%,100%{opacity:0;transform:scale(2.8)}}
.no-motion .observatory-burst>i{animation:none;transform:translate(var(--spark-x),var(--spark-y));opacity:.35;will-change:auto}.no-motion .observatory-burst-halo{animation:none;opacity:0}
@media(prefers-reduced-motion:reduce){.observatory-burst>i{animation:none;transform:translate(var(--spark-x),var(--spark-y));opacity:.35;will-change:auto}.observatory-burst-halo{animation:none;opacity:0}}
@media(max-width:600px){.observatory-burst{scale:.7}}

/* Illustrated astronomy objects along the observatory route. */
.observatory-map-decor{position:absolute;inset:0;pointer-events:none;user-select:none}
.observatory-decoration{position:absolute;display:block;width:25%;aspect-ratio:1;background:url('../scene/magic/observatory-route-decor.png') 0 0/200% 200% no-repeat;filter:drop-shadow(0 7px 9px #07162988) drop-shadow(0 0 9px #a5d8ff30);pointer-events:none}
.observatory-decoration-0{right:0;top:8px;background-position:0 0}
.observatory-decoration-1{left:0;top:170px;background-position:100% 0}
.observatory-decoration-2{right:0;top:350px;background-position:0 100%}
.observatory-decoration-3{left:0;top:715px;background-position:100% 100%}
@media(max-width:700px){.observatory-decoration{width:27%}.observatory-decoration-0{top:12px}.observatory-decoration-1{top:185px}.observatory-decoration-2{top:340px}.observatory-decoration-3{top:735px}}

/* The greenhouse entrance spans the former two room-card columns. */
.room-grid.greenhouse-wide{grid-template-columns:minmax(0,1fr)}
.greenhouse-wide .room-card .room-picture{aspect-ratio:2;background-size:200% auto;background-position:0 10%}
@media(max-width:700px){.greenhouse-wide .room-card .room-picture{aspect-ratio:1.3;background-position:0 0}}

/* Observatory follows the six greenhouse recipe nodes. */
.room-grid.observatory-wide{grid-template-columns:minmax(0,1fr);margin-top:32px}
.observatory-wide .room-card .room-picture{aspect-ratio:2;background-size:200% auto;background-position:100% 100%}
@media(max-width:700px){.observatory-wide .room-card .room-picture{aspect-ratio:1.3}}

/* Full-width room artwork replaces enlarged atlas cells. */
.greenhouse-wide .room-card .room-picture{background-image:url('../scene/magic/greenhouse-card-hd.png');background-size:cover;background-position:center}
.observatory-wide .room-card .room-picture{background-image:url('../scene/magic/observatory-card-hd.png');background-size:cover;background-position:center}

/* Observatory recipe 3: astronomy edition of the shared decoding activity. */
.observatory-symbol-game .symbol-scene{background:linear-gradient(#101a3933,#101a3970),url('../scene/magic/observatory-classroom.png') center/cover;gap:12px}
.observatory-symbol-game .symbol-astronomer{display:block;width:190px;height:190px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 8px 14px #070c2399)}
.observatory-symbol-game .symbol-paper{margin:0 auto auto;background:#f8f6fff5;border-color:#c5b172;color:#263657;box-shadow:0 14px 35px #07102e66}
.observatory-symbol-game .symbol-key>span{background:#eeedff;border-color:#c6b8dc;color:#263657}
.observatory-symbol-game .encoded-word{gap:3px;font-size:clamp(24px,4vw,48px)}
.observatory-symbol-game .symbol-options .answer{overflow-wrap:anywhere}
@media(max-width:700px){.observatory-symbol-game .symbol-astronomer{width:135px;height:135px}.observatory-symbol-game .encoded-word{font-size:clamp(20px,5.8vw,36px);gap:1px;min-height:66px;margin:16px 0}.observatory-symbol-game .symbol-paper{padding:16px 10px}}

/* Observatory recipe 3: shared syllable mechanics with a star-chart scene. */
.observatory-fire-game .fire-scene{background:linear-gradient(#101a3926,#101a3966),url('../scene/magic/observatory-classroom.png') center/cover}
.observatory-fire-game .fire-word{background:#f8f6fff2;border-color:#d5b976;color:#263657}
.observatory-fire-game .fire-slot{color:#5a5880;border-color:#aaa1cb}
.observatory-fire-game .fire-slot.filled{color:#334c92;border-color:#7467b7}
.observatory-fire-game .fire-astronomer{display:block;width:100%;height:auto}
.observatory-fire-game .fire-mouth{top:53%;right:28%}
.observatory-fire-game .syllable-stone{background:linear-gradient(145deg,#263e77,#16284e);border:2px solid #d9ba73;border-radius:24px;color:#fff8de;box-shadow:inset 0 0 0 4px #ffffff12,0 6px 20px #050d324d;text-shadow:0 2px 4px #081431}
.observatory-fire-game .syllable-stone:before{content:'✦';position:absolute;top:5px;left:12px;font-size:20px;color:#eacb84}
.observatory-fire-game .syllable-stone:after{content:'✧';position:absolute;bottom:5px;right:12px;font-size:18px;color:#c7d6ff}
.observatory-fire-game .syllable-stone.lit{background:linear-gradient(145deg,#455a9b,#253a72)}
.starlight-beam{background:radial-gradient(ellipse at 70% 50%,#fff 0 15%,#fff0ae 25%,#b9d7ff 50%,#8f91ef 65%,transparent 74%);box-shadow:0 0 20px #d6ddff}

/* Observatory recipe 3: seven comets hidden in the astronomy room. */
.observatory-flower-search .flower-search-picture{width:100%;min-width:0;background-image:url('../scene/magic/observatory-moonflower-search.png');border:2px solid #b89a61;box-shadow:0 12px 32px #07152e55}
.observatory-flower-search .flower-count{color:#f7edcd;text-align:center}
.observatory-flower-search .hidden-flower>.sprite{filter:drop-shadow(0 0 3px #b9c8ff)}
.observatory-flower-search .hidden-flower.found>.sprite{filter:drop-shadow(0 0 9px #e1d1ff)}
.observatory-flower-search .hidden-flower .flower-check{background:#f6efff;color:#40477e;box-shadow:0 2px 8px #12173c88}
@media(max-width:700px){.observatory-flower-search .flower-search-picture{min-height:clamp(520px,65svh,700px)}.observatory-flower-search .hidden-flower{width:72px}}

.task-layout:has(.observatory-flower-search){grid-template-columns:minmax(0,1fr)}
.observatory-flower-search{width:100%;min-width:0;max-width:100%;margin:0 auto}

.observatory-flower-search .search-comet{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;transform:rotate(var(--flower-turn));filter:hue-rotate(var(--comet-hue)) drop-shadow(0 0 2px #b9c8ff)}
.observatory-flower-search .hidden-flower:not(.found) .search-comet{filter:hue-rotate(var(--comet-hue))}
.observatory-flower-search .comet-foreground{position:absolute;inset:0;pointer-events:none;background-image:url('../scene/magic/observatory-moonflower-search.png');background-size:var(--comet-bg-size);background-position:var(--comet-bg-position);background-repeat:no-repeat;clip-path:polygon(0 21%,25% 22%,50% 20%,75% 21%,100% 23%,100% 100%,0 100%)}
.observatory-flower-search .hidden-flower:nth-child(3n+2) .comet-foreground{clip-path:polygon(0 24%,25% 20%,45% 23%,65% 19%,85% 21%,100% 22%,100% 100%,0 100%)}
.observatory-flower-search .hidden-flower:nth-child(3n) .comet-foreground{clip-path:polygon(0 25%,20% 25%,40% 24%,60% 22%,80% 20%,100% 19%,100% 100%,0 100%)}
.observatory-flower-search .hidden-flower.found .comet-foreground{display:none}
.observatory-flower-search .hidden-flower .flower-check{z-index:1}
.observatory-flower-search .hidden-flower.found .search-comet{filter:hue-rotate(var(--comet-hue)) drop-shadow(0 0 8px #e1d1ff)}

/* The observatory brews with the seven comets collected earlier. */
.level-page .comet-brew-card #worktop.moon-worktop{background-image:linear-gradient(#101a3926,#101a3955),url('../scene/magic/observatory-classroom.png')}
.comet-brew-card .moon-bowl>img{display:block}
.comet-brew-card .moon-flowers{left:54%;top:43%;width:35%;height:13%}
.comet-brew-card .moon-flowers .brew-comet{width:40%;object-fit:contain;filter:drop-shadow(0 0 2px #dcddff)}
.comet-brew-card .moon-bowl:after{content:'';position:absolute;inset:0;pointer-events:none;background:url('../scene/magic/observatory-dragon-bowl-v2.png') center/contain no-repeat;clip-path:polygon(51% 52%,56% 54%,64% 55.5%,73% 56%,83% 55%,91% 53%,94% 65%,50% 65%)}
.brew-comet.moon-flower-flight{object-fit:contain}

.drag-ghost>.brew-comet{display:block;width:80px;height:80px;object-fit:contain}

/* Comet ingredients become the same pearlescent cyan-lavender potion. */
.comet-brew-card .moon-brew-art,.comet-potion-art{background-image:url('../scene/magic/comet-potion-brewing.png');background-size:300% 100%}
.charm-art.charms-comet-potion{background-image:url('../scene/magic/comet-potion-charms.png');background-size:300% 100%}
.potion-display.potion-level-21{--bottle-scale:1;--bottle-x:0%;--bottle-y:0%}
.comet-brew-card .brew-ready .moon-pot{filter:drop-shadow(0 0 25px #b9daff77)}
.potion-level-21>.potion-charm{width:28%;top:42%}
.potion-level-21>.potion-charm:before{content:'';position:absolute;left:15%;top:4%;width:70%;height:12%;border:2px solid #b8cbe1;border-radius:50%;box-shadow:0 1px 1px #35486566}

/* Observatory level 3, task 4: a dedicated star-reading chamber. */
.level-page .task-layout.firefly-reading.starlight-reading{background-image:linear-gradient(90deg,#101d331a,transparent),url('../scene/magic/observatory-starlight-reading.png');background-position:center}
@media(max-width:700px){.level-page .task-layout.firefly-reading.starlight-reading{background-position:78% center}}