/* Shared astronomy illustrations and six astronomy recipe sequences. */
.obs-art,.obs-prop{display:inline-block;flex-shrink:0;width:120px;height:120px;background:url('../scene/magic/observatory-objects.png') 0 0/400% 500% no-repeat;vertical-align:middle;pointer-events:none}
.obs-prop{background-image:url('../scene/magic/observatory-brewing.png');background-size:300% 200%;width:280px;height:280px;border-radius:28px}
.obs-activity .action-head{text-align:center;margin:12px auto 20px}.obs-activity .action-head p{max-width:800px;margin:10px auto}
.obs-scene{position:relative;isolation:isolate;min-height:var(--task-scene-height,784px);padding:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;border:2px solid #baa575;border-radius:30px;background:linear-gradient(#111c4055,#111c4055),url('../scene/magic/observatory-classroom.png') center/cover;color:#fff5d5;overflow:hidden;box-shadow:0 14px 35px #18254422}
.obs-scene>*{max-width:100%}.obs-scene .feedback:empty{display:none}.obs-scene .feedback.error{background:#fff4de;color:#8a341d;padding:12px 20px;border-radius:18px}.obs-progress{margin:0;padding:8px 22px;border-radius:20px;background:#121e43e8;color:#fff1ba;font-weight:800}
.obs-button{border:2px solid #d9b56a;border-radius:18px;padding:13px 22px;background:#fff7df;color:#253259;font-size:clamp(18px,2.3vw,29px);font-weight:800;box-shadow:0 4px 0 #685174;cursor:pointer;touch-action:manipulation}.obs-button:hover:not(:disabled){background:#fff1bb;transform:translateY(-2px)}.obs-button:focus-visible,.obs-pair:focus-visible,.obs-hidden:focus-visible{outline:4px solid #8effed;outline-offset:4px}.obs-button:disabled{cursor:default}.obs-button.selected,.obs-button.picked{background:#b1f1e6;border-color:#4cb7af}.obs-button.picked{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}.obs-button:disabled:not(.picked),.obs-pair.completed{opacity:.55}.obs-picture{padding:5px;background:#10224488}.obs-picture .obs-art{width:110px;height:110px}
.obs-word-stars,.obs-gather,.obs-activation,.obs-options,.obs-letter-tray{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}.obs-word-stars{width:100%;min-height:260px;align-items:center}.obs-word-star{position:relative;background:transparent;border:0;box-shadow:none;padding:0;width:210px;height:210px;display:grid;place-items:center}.obs-word-star .obs-art{position:absolute;width:210px;height:210px}.obs-word-star>span:last-child{z-index:1;background:#fff3d6ed;border-radius:12px;padding:8px;font-size:23px}.obs-target-word{display:flex;align-items:center;gap:20px;padding:10px 30px;background:#12214beb;border:1px solid #c7aa6a;border-radius:25px;font-size:32px}
.obs-scratch{position:relative;width:640px;height:220px;display:grid;place-items:center;border-radius:26px;overflow:hidden;background:#fff4dc;color:#25355e;font-size:clamp(30px,6vw,65px);letter-spacing:4px}.obs-scratch canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.obs-feeding,.obs-fire-stage{display:flex;justify-content:space-around;align-items:center;width:100%;gap:24px}.obs-foods{display:flex;flex-direction:column;gap:22px}.obs-feeding .obs-prop,.obs-fire-stage .obs-prop{width:min(35vw,350px);height:min(35vw,350px)}.obs-built{font-size:clamp(26px,4vw,42px);font-weight:800;letter-spacing:3px;padding:12px 22px;background:#101f45e8;border-radius:20px;margin:0}.obs-built span{color:#aaaacc}.obs-letter-picture .obs-art{width:180px;height:180px}.obs-fire-stones{display:flex;flex-direction:column;gap:12px}.obs-stone{position:relative;display:grid;place-items:center;background:none;border:0;box-shadow:none;width:160px;height:140px}.obs-stone .obs-art{position:absolute;width:160px;height:160px}.obs-stone strong{z-index:1;color:#fff5b0;text-shadow:0 2px 4px #321a20;font-size:34px}.obs-fire-beam{position:fixed;z-index:100;height:9px;border-radius:50%;background:#fff3c7;box-shadow:0 0 12px 7px #ff952e;transform-origin:left center;pointer-events:none}
.obs-hidden-field{position:relative;width:100%;height:530px}.obs-hidden{position:absolute;width:100px;height:100px;border:0;background:none;transform:translate(-50%,-50%);padding:0;cursor:pointer}.obs-hidden .obs-art{width:100%;height:100%;clip-path:inset(0 0 75% 0)}.obs-hidden.found .obs-art{clip-path:none;filter:drop-shadow(0 0 14px #ffdf6b)}
.obs-legend{display:flex;align-items:center;font-size:32px;font-weight:800;background:#15274ae8;padding:10px 25px;border-radius:20px}.obs-legend .obs-art,.obs-symbol{width:68px;height:68px}.obs-coded{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:20px;background:#fff4dc;color:#26325a;border-radius:24px;font-size:clamp(24px,4vw,45px);font-weight:800;letter-spacing:4px}
.obs-trace-layout{display:flex;gap:30px;align-items:center;width:min(100%,780px)}.obs-route{width:32%;background:#fff4de;border-radius:20px;padding:10px;fill:#6756a3}.obs-route text{font-size:5px;text-anchor:middle}.obs-route polyline{stroke:#ac6b36;stroke-width:1.5;fill:none}.obs-trace-board{position:relative;flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;aspect-ratio:1;touch-action:none}.obs-trace-board svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.obs-trace-board polyline{fill:none;stroke:#26afbe99;stroke-width:2}.obs-trace-board button{padding:0;font-size:30px}
.obs-word-rows{width:100%;display:grid;gap:18px}.obs-word-row{display:flex;align-items:center;gap:18px;background:#fff5e9ed;border-radius:22px;padding:10px 18px;color:#28345d;min-height:170px}.obs-row-picture{width:155px;flex-shrink:0;text-align:center}.obs-row-picture .obs-art{width:105px;height:105px}.obs-row-picture strong{display:block;font-size:15px;min-height:22px}.obs-word-row .obs-letter-tray{gap:7px;justify-content:flex-start}.obs-word-row .obs-button{padding:9px;min-width:39px;font-size:24px}.obs-word-row.completed{filter:grayscale(1);opacity:.6}
.obs-pairs{position:relative;width:100%;height:580px}.obs-pair{position:absolute;left:var(--px);top:var(--py);transform:translate(-50%,-50%);padding:0;border:2px solid transparent;background:transparent;border-radius:20px;width:94px;height:94px;cursor:pointer}.obs-pair .obs-art{width:100%;height:100%}.obs-pair.selected{border-color:#ffe091;background:#6f5cac88}.obs-pair.completed{filter:grayscale(1)}.obs-tick{position:absolute;right:0;bottom:0;color:#fff;background:#287466;border-radius:50%;padding:3px 7px}
.obs-dobble{display:flex;justify-content:center;gap:24px;width:100%}.obs-dobble-card{position:relative;width:46%;aspect-ratio:1;border-radius:50%;border:4px solid #d1b477;background:#fff8e8;container-type:inline-size;box-shadow:0 8px 30px #060e3b88}.obs-dobble-word{position:absolute;transform:translate(-50%,-50%) rotate(var(--angle)) scale(var(--scale));font-size:6cqw;padding:4px;border:0;box-shadow:none;background:transparent;white-space:nowrap}.obs-dobble-word:hover:not(:disabled){transform:translate(-50%,-50%) rotate(var(--angle)) scale(var(--scale))}.obs-dobble-word.selected{outline:2px solid #698fac}.obs-dobble-word.color-0{color:#006cab}.obs-dobble-word.color-1{color:#967000}.obs-dobble-word.color-2{color:#c12e2e}.obs-dobble-word.color-3{color:#147548}.obs-dobble-word.font-1{font-family:Georgia,serif}.obs-dobble-word.font-2{font-family:monospace}
.obs-phrase-board{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:90px;width:min(100%,780px)}.obs-phrase-board>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.obs-phrase-board path{fill:none;stroke:#77e2d4;stroke-width:4;stroke-linecap:round}.obs-phrase-slot{height:90px;display:flex;align-items:center;justify-content:center}.obs-adj{font-size:22px;max-width:100%;overflow-wrap:anywhere;touch-action:none}.obs-noun{padding:0;background:#fff2db;width:110px;height:85px;position:relative}.obs-noun .obs-art{width:80px;height:80px}.obs-noun small{position:absolute;bottom:0;left:0;right:0;background:#fff2db;font-size:12px}.obs-phrase-board .completed{filter:grayscale(.8)}
.obs-reading{background:#fff7e8f2;color:#273658;max-width:760px;padding:36px;border-radius:26px;box-shadow:0 10px 40px #06123277}.obs-reading .story-text{font-size:clamp(23px,3vw,32px);line-height:1.8;margin:0 0 30px}.obs-reading .obs-built{text-align:center;margin-bottom:25px;color:#fff}.obs-reading .obs-options{gap:15px}.obs-reading .obs-button{font-size:23px}
.obs-medium{width:280px}.obs-large-picture{width:300px;height:300px;max-width:100%;padding:0;border:0;background:none;box-shadow:none}.obs-large-picture .obs-prop,.obs-large-picture .obs-art{width:100%;height:100%}.obs-brew-pair{display:flex;align-items:center;justify-content:center;gap:60px;width:100%}.obs-brew-source{position:relative;width:300px}.obs-brew-source>.obs-prop{width:100%;height:auto;aspect-ratio:1}.obs-ingredients{display:flex;justify-content:center;gap:3px}.obs-ingredients .obs-art{width:65px;height:65px}.obs-ingredients .obs-button{padding:0}.obs-hued,.obs-reward-potion{filter:hue-rotate(var(--obs-hue))}.obs-puzzle{display:flex;gap:60px;align-items:center}.obs-piece-tray,.obs-puzzle-slots{display:grid;grid-template-columns:1fr 1fr}.obs-piece-tray{gap:16px}.obs-piece-tray button,.obs-puzzle-slots button{padding:0;width:120px;height:120px;overflow:hidden;touch-action:none}.obs-puzzle-target{position:relative;width:240px;height:240px}.obs-puzzle-guide{position:absolute;inset:0;width:100%;height:100%;opacity:.28}.obs-puzzle-slots{position:relative}.obs-puzzle-slots button{border-radius:8px;background:#ffffff15}.obs-fragment{position:relative;display:block;width:100%;height:100%;overflow:hidden}.obs-fragment>.obs-art{position:absolute;width:200%;height:200%;max-width:none;left:0;top:0}.fragment-1>.obs-art{left:-100%}.fragment-2>.obs-art{top:-100%}.fragment-3>.obs-art{left:-100%;top:-100%}.obs-piece-tray .invisible{visibility:hidden}.obs-drag-ghost{position:fixed!important;z-index:9999;pointer-events:none!important;margin:0!important;opacity:.9}.obs-bottle-result{padding:20px}.potion-display.potion-room-3>.obs-reward-potion{width:100%;height:100%;background-position:0 100%;transform:none}.charm-art.charms-observatory{background-size:contain;background-position:center;background-repeat:no-repeat}.charms-observatory.charm-0{background-image:url('../scene/magic/observatory-neck-charm-star.png')}.charms-observatory.charm-1{background-image:url('../scene/magic/observatory-neck-charm-moon.png')}.charms-observatory.charm-2{background-image:url('../scene/magic/observatory-neck-charm-comet.png')}
@media(max-width:650px){.obs-scene{padding:16px 10px;gap:16px;min-height:670px;border-radius:22px}.obs-word-stars{gap:0}.obs-word-star,.obs-word-star .obs-art{width:145px;height:145px}.obs-word-star>span:last-child{font-size:18px}.obs-target-word{font-size:23px;padding:8px 14px;gap:8px}.obs-target-word .obs-art{width:90px;height:90px}.obs-feeding,.obs-fire-stage{gap:5px}.obs-foods{gap:12px}.obs-foods .obs-button{padding:10px;font-size:20px}.obs-feeding .obs-prop,.obs-fire-stage .obs-prop{width:145px;height:145px}.obs-stone{width:130px;height:125px}.obs-stone .obs-art{width:135px;height:135px}.obs-trace-layout{gap:12px;flex-direction:column}.obs-route{width:130px}.obs-trace-board{width:100%;flex:auto}.obs-word-row{padding:8px;gap:7px;min-height:170px}.obs-row-picture{width:85px}.obs-row-picture .obs-art{width:80px;height:80px}.obs-row-picture strong{font-size:10px;overflow-wrap:anywhere}.obs-word-row .obs-letter-tray{gap:5px}.obs-word-row .obs-button{padding:6px;min-width:30px;font-size:19px}.obs-pair{left:var(--mx);top:var(--my);width:68px;height:68px}.obs-dobble{flex-direction:column;align-items:center;gap:18px}.obs-dobble-card{width:min(100%,290px)}.obs-phrase-board{gap:30px}.obs-adj{font-size:17px;padding:9px}.obs-phrase-slot{height:88px}.obs-noun{width:95px}.obs-reading{padding:23px 17px}.obs-reading .obs-button{font-size:20px}.obs-brew-pair{gap:12px}.obs-large-picture,.obs-brew-source{width:155px;height:155px}.obs-brew-source{height:auto}.obs-ingredients .obs-art{width:44px;height:44px}.obs-puzzle{gap:20px;flex-direction:column}.obs-puzzle-target{width:220px;height:220px}.obs-piece-tray button,.obs-puzzle-slots button{width:110px;height:110px}.obs-legend{padding:6px 12px;font-size:25px}.obs-hidden{width:75px;height:75px}.obs-gather{gap:8px}.obs-picture .obs-art{width:80px;height:80px}}
.obs-ingredients .obs-picture .obs-art{width:65px;height:65px}
@media(max-width:650px){.obs-ingredients .obs-picture .obs-art{width:44px;height:44px}.obs-dobble-card{width:min(100%,245px)}.obs-dobble-word{font-size:6.8cqw}}
/* Keep the neighboring atlas cell below the star outside its visible area. */
.obs-word-star .obs-art{clip-path:inset(0 0 8% 0)}
/* Stars stay transparent when pointed at or selected with the keyboard. */
.obs-word-star.obs-button:hover:not(:disabled),
.obs-word-star.obs-button:active,
.obs-word-star.obs-button:focus-visible{background:transparent;box-shadow:none;outline:none}
.obs-word-star:focus-visible>span:last-child{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.obs-word-star{-webkit-tap-highlight-color:transparent}

/* Completed activities continue automatically. */
.level-page #advance{display:none!important}
/* Catch matching words in the dragon's open wizard hat. */
.obs-task-match .obs-scene{background: url('../scene/magic/star-catching-sky.png') center/cover;display:block;height:var(--task-scene-height,784px);min-height:670px;padding:0}
.obs-task-match .obs-progress{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:3;white-space:nowrap}
.obs-task-match .obs-word-stars{position:absolute;inset:0;display:block;min-height:0;pointer-events:none}
.obs-task-match .obs-word-star{position:absolute;left:calc(10% + var(--star-index)*20%);top:13%;width:170px;height:170px;transform:translateX(-50%);pointer-events:auto}
.obs-task-match .obs-word-star:nth-child(even){top:25%}
.obs-task-match .obs-word-star .obs-art{width:100%;height:100%}
.obs-task-match .obs-word-star>span:last-child{font-size:21px;padding:7px}
.obs-task-match .obs-word-star:hover:not(:disabled){transform:translateX(-50%)}
.obs-task-match .obs-word-star.caught{visibility:hidden}
.obs-task-match .obs-word-star:disabled:not(.caught){opacity:1}
.obs-star-catcher{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:350px;max-width:80%;aspect-ratio:1}
.obs-star-catcher img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#obsHatMouth{position:absolute;left:58%;top:46%;width:24%;height:8%;border-radius:50%;pointer-events:none}
.obs-hat-word{position:absolute;left:70%;top:59%;transform:translateX(-50%);padding:7px 11px;background:#fff1ce;color:#213050;border:1px solid #dbb15e;border-radius:10px;font-size:23px;white-space:nowrap}
.obs-star-catcher.has-star #obsHatMouth{background:#ffe99566;box-shadow:0 0 24px 10px #ffe47899}
.obs-task-match .obs-falling-star{z-index:5;pointer-events:none;transform:none;filter:drop-shadow(0 0 10px #ffe089)}
.obs-task-match #obsFeedback:not(:empty){position:absolute;bottom:12px;left:16px;max-width:28%;z-index:6}
@media(max-width:900px){.obs-task-match .obs-word-star{width:130px;height:130px}.obs-task-match .obs-word-star>span:last-child{font-size:17px}}
@media(max-width:650px){.obs-task-match .obs-word-star{width:105px;height:105px;left:18%;top:13%}.obs-task-match .obs-word-star:nth-child(2){left:50%;top:24%}.obs-task-match .obs-word-star:nth-child(3){left:82%;top:13%}.obs-task-match .obs-word-star:nth-child(4){left:28%;top:38%}.obs-task-match .obs-word-star:nth-child(5){left:74%;top:38%}.obs-task-match .obs-word-star>span:last-child{font-size:14px;padding:5px}.obs-star-catcher{width:285px;bottom:12px}.obs-hat-word{font-size:19px}.obs-task-match #obsFeedback:not(:empty){left:5%;bottom:0;max-width:90%;font-size:14px;padding:8px}}
/* Loose ingredients rest on the moonlit stone shelf, without card borders. */
.obs-task-gather .obs-scene{background:url('../scene/magic/crystal-terrace.png') center/cover;display:block;height:var(--task-scene-height,784px);min-height:670px;padding:0}
.obs-task-gather .obs-progress{position:absolute;left:50%;top:20px;transform:translateX(-50%)}
.obs-task-gather .obs-gather{position:absolute;left:8%;width:84%;top:calc(47% - 130px);height:130px;display:flex;align-items:flex-end;justify-content:space-around;gap:0}
.obs-loose-ingredient.obs-button,.obs-loose-ingredient.obs-button:hover:not(:disabled),.obs-loose-ingredient.obs-button:active,.obs-loose-ingredient.obs-button:focus-visible{position:relative;background:transparent;border:0;box-shadow:none;outline:none;padding:0;width:130px;height:130px;touch-action:none;-webkit-tap-highlight-color:transparent}
.obs-loose-ingredient .obs-art{width:130px;height:130px;clip-path:inset(0 5% 12% 3%);filter:drop-shadow(0 5px 5px #09172c99)}
.obs-loose-ingredient:focus-visible .obs-art{filter:drop-shadow(0 0 9px #9ef6ff)}
.obs-loose-ingredient:before{content:'';position:absolute;width:64%;height:10%;left:18%;bottom:2%;border-radius:50%;background:#03132c70;filter:blur(5px);pointer-events:none}
.obs-loose-ingredient.obs-drag-ghost:before{display:none}
.obs-task-gather .obs-gather .obs-loose-ingredient:disabled{opacity:0}
.obs-task-gather #obsBowl{position:absolute;bottom:65px;left:50%;transform:translateX(-50%)}
.obs-task-gather #obsAdd{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);white-space:nowrap}
.obs-task-gather #obsFeedback:not(:empty){position:absolute;bottom:8px;left:5%;max-width:90%}
@media(max-width:650px){.obs-task-gather .obs-gather{left:3%;width:94%;top:calc(47% - 95px);height:95px}.obs-loose-ingredient.obs-button,.obs-loose-ingredient.obs-button:hover:not(:disabled),.obs-loose-ingredient.obs-button:active,.obs-loose-ingredient.obs-button:focus-visible{width:95px;height:95px}.obs-loose-ingredient.obs-picture .obs-art{width:95px;height:95px}.obs-task-gather #obsBowl,.obs-task-gather #obsBowl .obs-prop{width:240px;height:240px}}
/* Persist each collected ingredient above the bowl's front rim. */
#obsBowlCatch{position:absolute;left:56%;top:55%;width:30%;height:6%;pointer-events:none}
.obs-bowl-contents{position:absolute;left:56%;top:40%;width:30%;height:21%;overflow:hidden;pointer-events:none;clip-path:polygon(0 0,100% 0,100% 90%,65% 100%,30% 100%,0 90%)}
.obs-bowl-contents .obs-bowl-item{position:absolute;bottom:-6%;left:0;width:48%;height:auto;aspect-ratio:1;clip-path:inset(0 5% 12% 3%);filter:drop-shadow(0 1px 2px #16305599)}
.obs-bowl-contents .obs-bowl-item-1{left:26%;bottom:0;transform:rotate(12deg)}
.obs-bowl-contents .obs-bowl-item-2{left:52%;transform:rotate(-12deg)}
.obs-scratch-card{flex-shrink:0}
.obs-scratch-card .scratch-word{font-size:clamp(23px,5vw,56px);color:#293a60}
#obsScratch{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;user-select:none}
.obs-scratch-card:has(#obsScratch:focus-visible){outline:4px solid #f7cd6d;outline-offset:5px}

/* Let the reader decide when to leave a revealed greenhouse word. */
.level-page .scratch-game #advance{display:inline-block!important}
/* Collected sparks leave the sky and remain visible inside the cauldron. */
.obs-charge-pick.obs-button,.obs-charge-pick.obs-button:hover:not(:disabled),.obs-charge-pick.obs-button:active,.obs-charge-pick.obs-button:focus-visible{background:transparent;border:0;box-shadow:none;outline:none;padding:0;-webkit-tap-highlight-color:transparent;touch-action:none}
.obs-charge-pick .obs-art{clip-path:inset(0 0 8% 0)}
.obs-charge-pick:focus-visible .obs-art{filter:drop-shadow(0 0 9px #9ef6ff)}
.obs-task-charge [data-charge]:disabled{visibility:hidden}
.obs-charge-pick.obs-drag-ghost{visibility:visible;opacity:1}
.obs-charge-pot{position:relative;height:280px}
#obsPotCatch{position:absolute;left:25%;top:27%;width:50%;height:10%;pointer-events:none}
.obs-pot-contents{position:absolute;left:21%;top:24%;width:58%;height:17%;border-radius:50%;overflow:hidden;pointer-events:none}
.obs-pot-contents.filled{background:radial-gradient(ellipse,#ffcf7055,transparent 75%)}
.obs-pot-item{position:absolute;left:18%;top:40%;width:27%;aspect-ratio:1;transform:translate(-50%,-50%)}
.obs-pot-item .obs-art{width:100%;height:100%;clip-path:inset(0 0 8% 0);filter:drop-shadow(0 0 3px #ffd678)}
.obs-pot-item-1{left:48%;top:27%}.obs-pot-item-2{left:78%;top:40%}.obs-pot-item-3{left:34%;top:68%}.obs-pot-item-4{left:65%;top:68%}
/* Story questions use the greenhouse reading-card layout. */
.obs-story-scene{align-items:flex-end;justify-content:center;padding:32px;isolation:isolate;background:url('../scene/magic/observatory-classroom.png') center/cover}
.obs-story-card.reading-card{position:relative;z-index:1;width:65%;max-width:800px;margin:0;padding:30px;background:#fff8e5f2;border:1px solid #e4d2a5;border-radius:26px;color:var(--ink);box-shadow:0 12px 35px #101c3944}
.obs-story-card h2{margin:0 0 26px;font-size:calc(var(--reading) + 4px);line-height:1.5}
.obs-story-card .story-text{padding:18px 22px;margin:0 0 24px;border-left:4px solid #8aaa9a;border-radius:0 22px 22px 0;background:#eae9ddaa;font-size:var(--reading);line-height:1.8}
.obs-story-card .options{display:grid;grid-template-columns:1fr;gap:14px;margin:0}
.obs-story-card .answer{font-size:var(--reading);font-weight:400}
.obs-story-card .obs-progress{display:inline-block;margin-bottom:20px;font-size:15px}
.obs-story-card #obsFeedback:empty{display:none}
.obs-story-decoration{position:absolute;left:2%;bottom:4%;width:31%;display:flex;align-items:flex-end;pointer-events:none}
.obs-story-decoration>.obs-art{width:75%;height:auto;aspect-ratio:1;filter:drop-shadow(0 9px 7px #080f3366)}
.obs-story-decoration>img{width:35%;height:auto;margin-left:-8%}
@media(max-width:700px){.obs-story-scene{padding:24px 14px 140px;justify-content:center}.obs-story-card.reading-card{width:100%;padding:22px 18px;border-radius:22px}.obs-story-card h2{margin-bottom:18px}.obs-story-card .story-text{padding:14px;margin-bottom:20px}.obs-story-decoration{left:10%;width:180px;bottom:8px}.obs-story-decoration>.obs-art{width:115px}.obs-story-decoration>img{width:70px}}

/* Dedicated dragon artwork and matching bowl opening for ingredient collection. */
.obs-prop.obs-gather-dragon{background-image:url('../scene/magic/observatory-dragon-bowl-v2.png');background-size:contain;background-repeat:no-repeat;border-radius:0}
.obs-task-gather #obsBowlCatch{left:53%;top:50%;width:36%;height:5%}
.obs-task-gather .obs-bowl-contents{left:53%;top:37%;width:36%;height:18%}

/* Orbit of Light finale: stir before collecting the finished bottle. */
#obsStir{position:relative}
.obs-orbit-swirl{position:absolute;left:25%;top:12%;width:50%;height:26%;border:3px solid #ffe598;border-radius:50%;color:#fff2bb;font-size:24px;line-height:1;animation:obs-orbit-swirl 2s linear infinite;pointer-events:none}
@keyframes obs-orbit-swirl{to{transform:rotate(360deg)}}
.no-motion .obs-orbit-swirl{animation:none}
@media(prefers-reduced-motion:reduce){.obs-orbit-swirl{animation:none}}

/* Dedicated neck pendants for Orbit of Light (recipe 8). */
.charm-art.charms-orbit{background-size:contain;background-position:center;background-repeat:no-repeat}
.charms-orbit.charm-0{background-image:url('../scene/magic/orbit-neck-charm-planet.png')}
.charms-orbit.charm-1{background-image:url('../scene/magic/orbit-neck-charm-orbit.png')}
.charms-orbit.charm-2{background-image:url('../scene/magic/orbit-neck-charm-sun.png')}
.potion-level-20>.potion-charm{width:29%;top:38%}

/* Only the front half of a worn cord is visible in front of the bottle neck. */
.potion-display>.potion-charm>.charms-observatory,
.potion-display>.potion-charm>.charms-orbit{clip-path:inset(var(--cord-back-cut) 0 0 0)}
.charms-observatory.charm-0{--cord-back-cut:22%}
.charms-observatory.charm-1{--cord-back-cut:23%}
.charms-observatory.charm-2{--cord-back-cut:19%}
.charms-orbit.charm-0{--cord-back-cut:24%}
.charms-orbit.charm-1{--cord-back-cut:22%}
.charms-orbit.charm-2{--cord-back-cut:21%}