@font-face{font-family:"Edu QLD Beginner";src:url("fonts/EduQLDBeginner.ttf") format("truetype");font-style:normal;font-weight:400 700;font-display:swap}
:root{font-family:"Edu QLD Beginner",cursive;color:#f7f5e9;background:#102e2b;font-size:20px;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#24564a,#102e2b 75%);min-height:100vh}button,a{touch-action:manipulation}button{font:inherit;font-weight:700;cursor:pointer;min-height:44px;padding:11px 18px;color:#fff7dd;background:#234e42;border:1px solid #a9ba92;border-radius:10px}button:hover{background:#356b54}button:disabled{cursor:default}a{color:#fce5ad}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #ffce66;outline-offset:4px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px max(20px,calc((100vw - 1180px)/2));background:#0a231f}header span{font-size:.875rem;letter-spacing:.14em;color:#c1d2b0}main{max-width:1180px;margin:auto;padding:26px 22px}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px}h1{font-family:inherit;font-size:clamp(2rem,4vw,3rem);margin:5px 0 25px;color:#ffe9b2}h2{font-family:inherit;font-size:1.7rem;margin:8px 0}p{line-height:1.6}.eyebrow{letter-spacing:.16em;font-size:.875rem;font-weight:700;color:#c3dfb3}.purse{white-space:nowrap;background:#092822;border:1px solid #a5c384;padding:13px 20px;border-radius:16px;font-size:1.5rem}.purse span:last-child{font-size:1rem}.places{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:24px 0}.place{padding:0;text-align:left;overflow:hidden;border:1px solid #839d78;background:#173f35;border-radius:20px;box-shadow:0 12px 25px #001d2240;transition:transform .2s}.place:hover{transform:translateY(-5px)}.place img{width:100%;aspect-ratio:1.3;object-fit:cover;display:block}.place-info{display:block;padding:18px}.place-name{display:block;font-family:inherit;font-size:1.8rem;color:#ffe8ae}.place-info small{display:block;font-size:.95rem;margin-top:10px;color:#d5e6ca}.small{font-size:.9rem}.scene-bar{display:flex;align-items:center;gap:20px;margin:5px 0 16px}.scene-bar h2{flex:1}.scene{position:relative;aspect-ratio:3/2;border-radius:22px;overflow:hidden;isolation:isolate;background:#18392f;max-height:70vh}.scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.scene-caption{position:absolute;top:18px;left:50%;transform:translateX(-50%);padding:11px 20px;background:#092820eb;border:1px solid #d8cfa0;border-radius:30px;max-width:90%;width:max-content;text-align:center;font-weight:600}.item{position:absolute;width:clamp(66px,10vw,105px);height:clamp(52px,7vw,76px);padding:0;border:0;background:transparent;transform:translate(-50%,-50%) rotate(-12deg);filter:drop-shadow(0 3px 5px #162516);border-radius:20%;overflow:hidden}.item img{width:100%;height:100%;object-fit:cover;display:block}.item:hover{background:transparent;transform:translate(-50%,-50%) rotate(0) scale(1.15)}.item.here{outline:4px solid #fff493;outline-offset:5px}.item.completed{pointer-events:none;opacity:.8;background:#133c2d;border:2px solid #eddb8d;color:#ffe69b;transform:translate(-50%,-50%);font-size:1.5rem}.under-scene{display:flex;justify-content:space-between;align-items:center;gap:18px}.satchel{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-top:1px solid #658477;margin-top:25px}.satchel h2{font-size:1.4rem;color:#ffe8ad}.satchel p{color:#c1d8c5;margin-bottom:0}.badges{display:flex;gap:12px}.badge{text-align:center;border:1px solid #66806b;padding:12px;border-radius:12px;min-width:90px;color:#bbcdb9}.badge strong{display:block;font-size:1.6rem}.badge.earned{background:#456842;border-color:#e5c974;color:#fff2b6}details{margin:18px 0;color:#cadbc5;font-size:.9rem}summary{cursor:pointer;min-height:44px;padding-top:12px}.finish{background:#234d3d;border:1px solid #d9c680;padding:25px;border-radius:18px}dialog{padding:0;border:0;background:transparent;color:#342b1b;width:min(980px,96vw);max-height:94dvh;overflow:auto}dialog::backdrop{background:#031d19bb;backdrop-filter:blur(5px)}.scroll-wrap{position:relative;padding:46px 8% 50px;background:#eadaaa url('art/scroll.jpg') center/100% 100% no-repeat;min-height:560px;border-radius:25px;color-scheme:light}.close{display:block;margin:0 0 20px auto;background:#513c24;color:#fff2cd;border-color:#85663d}.scroll-paper{background:#f5e6bded;border-radius:12px;padding:16px 20px}.scroll-paper .eyebrow{color:#716039;margin-top:0;font-size:.8rem}.scroll-paper h2{color:#49351c}.scroll-paper button{background:#45613d;color:#fff;border-color:#47603b}.scroll-paper button:hover{background:#2f4e2d}#typing,#passage{font-size:clamp(1.55rem,3.6vw,2.15rem);font-family:inherit;line-height:2.3;min-height:155px;padding:12px 0;letter-spacing:.015em}#typing::after{content:'▏';color:#987227}.word-group{display:inline-block;white-space:nowrap}.scroll-paper .gap{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;font-size:1.7rem;width:44px;height:44px;padding:0;margin:0 5px 0 3px;background:#fff8df;color:#49351c;border:2px dotted #95805c;border-radius:8px}.scroll-paper .gap:hover{background:#f9d983}.scroll-paper .gap.correct{background:#d8e9b3;border:2px solid #51763a;font-weight:700}.scroll-paper .gap.wrong{border-color:#b56332;background:#ffe0b5}.gap.hinted{outline:3px solid #bd7a16;outline-offset:2px}#feedback{min-height:56px;line-height:1.5;font-weight:600}.scroll-actions{display:flex;flex-wrap:wrap;gap:10px}.scroll-paper button:focus-visible{outline-color:#98601b}#stops-left{margin-bottom:0;color:#665333}[hidden]{display:none!important}@media(max-width:700px){header span{display:none}main{padding:20px 14px}.heading{align-items:flex-start}.purse{padding:10px;font-size:1.2rem}.places{gap:12px;grid-template-columns:1fr}.place{display:grid;grid-template-columns:40% 60%;border-radius:15px}.place img{height:100%;aspect-ratio:1.1}.place-info{padding:18px 14px}.place-name{font-size:1.5rem}.scene-bar{flex-wrap:wrap;gap:10px}.scene-bar h2{font-size:1.4rem}.scene-bar>span{font-size:.875rem}.scene{aspect-ratio:1.15;max-height:none}.scene>img{object-fit:fill}.scene-caption{font-size:.85rem;top:12px;padding:9px 12px}.satchel{flex-direction:column;align-items:flex-start}.badge{padding:10px;min-width:80px}.scroll-wrap{padding:26px 5% 35px;min-height:0}.scroll-paper{padding:15px 12px}.close{margin-bottom:12px}#typing,#passage{font-size:1.55rem;min-height:140px;line-height:2.35}.under-scene p{font-size:.9rem}.under-scene button{font-size:.9rem}.scroll-paper .gap{margin-right:3px}}@media(prefers-reduced-motion:no-preference){.purse.pop{animation:pop .4s}.item.here{animation:glow 1s infinite alternate}.badge.earned{animation:pop .5s}@keyframes pop{50%{transform:scale(1.12)}}@keyframes glow{to{filter:drop-shadow(0 0 15px #fff274)}}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}/* The adventure keeps its painted worlds; the explorer is a transparent sprite. */
header span,.eyebrow{letter-spacing:.03em}.scene{cursor:crosshair;touch-action:manipulation}.scene:focus-visible{outline:4px solid #ffda63;outline-offset:4px}.scene-caption{z-index:110;pointer-events:none;font-size:1rem;box-shadow:0 4px 18px #09282050}.scene>img{pointer-events:none;user-select:none}.item{cursor:pointer;z-index:65;overflow:visible}.item img{border-radius:20%;pointer-events:none}.item.completed{z-index:55}.explorer{--facing:1;--depth:1;--sprite-x:0%;--sprite-y:0%;position:absolute;width:clamp(95px,13vw,158px);aspect-ratio:1;pointer-events:none;transform:translate(-50%,-96%) scale(var(--depth));transform-origin:50% 96%;will-change:left,top}.explorer-sprite{width:100%;height:100%;background:url('art/explorer-walk.webp') var(--sprite-x) var(--sprite-y)/400% 200% no-repeat;transform:scaleX(var(--facing));filter:drop-shadow(0 4px 2px #13291b65)}#walk-marker{position:absolute;z-index:54;transform:translate(-50%,-50%);width:34px;height:18px;border:3px solid #fff5ab;border-radius:50%;background:#fff1a733;pointer-events:none}.explore-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px}#move-help{margin:0;font-size:1rem;line-height:1.4}.direction-pad{display:grid;grid-template-columns:repeat(3,48px);gap:5px;flex-shrink:0}.direction-pad button{padding:4px;min-width:48px;min-height:44px;font-size:1.3rem;border-color:#ffe09b;touch-action:none;user-select:none}.direction-pad button:first-child{grid-column:2}.direction-pad button:nth-child(2){grid-column:1}.direction-pad button:active{background:#eecc65;color:#153d32}.under-scene{border-top:1px solid #54776a;margin-top:12px}.under-scene p{line-height:1.4}
/* Feedback remains visible until the next answer, with text and colour together. */
.scroll-paper{position:relative}.feedback-panel{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;position:relative;isolation:isolate;min-height:118px!important;padding:18px 20px;margin:10px 0 22px;border:3px solid #76b9dc;border-radius:20px;background:linear-gradient(125deg,#e4f6ff,#cdeeff);color:#123f5b;box-shadow:0 6px 0 #6ba6c1,0 10px 22px #51442522;font-weight:500!important}.feedback-panel:empty{display:none}.feedback-icon{font-size:2.35rem;line-height:1;text-align:center}.feedback-copy{min-width:0}.feedback-title{display:block;font-size:clamp(1.35rem,3vw,1.8rem);font-weight:700;line-height:1.2;margin-bottom:7px}.feedback-detail{display:block;font-size:1.05rem;line-height:1.4}.feedback-panel.success{background:linear-gradient(120deg,#deff93,#a1f4d6);border-color:#218458;color:#0d4931;box-shadow:0 7px 0 #188064,0 12px 26px #10563230}.feedback-panel.bonus{background:linear-gradient(120deg,#fff091,#ffbc79,#ffc9ee);border-color:#b45b96;color:#63254f;box-shadow:0 7px 0 #a54d8a,0 12px 26px #88336230}.feedback-panel.retry{background:linear-gradient(120deg,#fff19c,#ffc993);border-color:#cd6823;color:#6f3015;box-shadow:0 7px 0 #c56a31,0 12px 26px #96592822}.feedback-panel.hint{background:linear-gradient(120deg,#e9dcff,#d5edff);border-color:#8f6bcc;color:#49307c;box-shadow:0 7px 0 #8664c4}.scroll-paper .gap.correct{background:#9deab9;border:3px solid #258054;color:#113d24;font-size:2rem}.scroll-paper .gap.wrong{background:#ffcf94;border:3px solid #c46423}.celebration{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5;border-radius:12px}.confetti{position:absolute;left:50%;top:50%;width:9px;height:16px;background:var(--colour);border-radius:2px;opacity:0}.scroll-actions button{min-height:48px}.scroll-paper #collect{background:#0c705b;border:2px solid #064837;box-shadow:0 4px 0 #064837}#stops-left{font-size:1rem}#typing,#passage{font-size:clamp(1.8rem,3.6vw,2.3rem);letter-spacing:0;line-height:2.15}.word-group{max-width:100%}.scroll-paper .eyebrow{font-size:.95rem}.scroll-wrap{padding-top:28px}.scroll-paper h2{font-size:1.65rem}.scroll-paper .gap{margin-left:4px}
@media(max-width:700px){:root{font-size:19px}.heading{gap:10px}.heading h1{font-size:2rem}.heading .eyebrow{font-size:.85rem}.scene{aspect-ratio:1.18}.scene-caption{font-size:.9rem;max-width:94%;padding:8px 12px}.explorer{width:clamp(100px,23vw,140px)}.explore-controls{gap:10px}#move-help{font-size:.95rem}.direction-pad{grid-template-columns:repeat(3,44px)}.direction-pad button{min-width:44px}.scroll-wrap{padding:16px 3% 24px}.scroll-paper{padding:14px 12px}.feedback-panel{padding:15px 12px;gap:10px;grid-template-columns:44px 1fr;min-height:120px!important}.feedback-icon{font-size:1.8rem}.feedback-title{font-size:1.35rem}.feedback-detail{font-size:1rem}#typing,#passage{font-size:1.75rem;line-height:2.2}.under-scene{gap:10px}.under-scene button{flex-shrink:0;max-width:45%}.badges{flex-wrap:wrap}.scene-bar h2{font-size:1.3rem}.scene-bar button{font-size:.95rem}.scroll-actions{gap:9px}.satchel{gap:16px}}
@media(max-height:600px) and (min-width:701px){.scene{max-height:none;height:65vh;min-height:270px}.scene-caption{padding:5px 14px;top:8px}.explorer{width:110px}}
@media(prefers-reduced-motion:no-preference){.feedback-panel.feedback-pop{animation:feedback-pop .44s cubic-bezier(.2,.9,.3,1.25)}.feedback-panel.retry.feedback-pop{animation:retry-pop .4s ease-out}.confetti{animation:confetti-burst 1.1s ease-out forwards;animation-delay:var(--delay)}@keyframes feedback-pop{0%{transform:scale(.87) translateY(12px);opacity:.5}70%{transform:scale(1.025) translateY(-2px)}100%{transform:scale(1);opacity:1}}@keyframes retry-pop{0%{transform:scale(.94)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}100%{transform:none}}@keyframes confetti-burst{0%{opacity:1;transform:translate(0,0) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--spin))}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}.celebration{display:none}}
/* Connected transitions: the scenery, sentence and feedback each keep their space. */
#adventure-views{position:relative}#map,#explore{transform-origin:50% 15%}
button,a,.item,.badge,.gap,.word-label{transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}
.place{transition:transform .24s cubic-bezier(.22,.8,.28,1),background-color .2s ease}
.item{transition:transform .22s ease,filter .22s ease,opacity .2s ease}
.item.collecting{pointer-events:none}.explorer{transition:transform .14s ease-out}
.explorer-sprite{transition:transform .12s ease-in-out}
.scroll-paper .gap:active{transform:scale(.94)}
#passage{margin:0;min-height:155px}.reveal-words .word-group{opacity:0;visibility:hidden}
.reveal-words .word-group.word-visible{opacity:1;visibility:visible}
.reveal-words .gap{visibility:hidden}.word-label{border-radius:5px}
.reading-now .word-label{background:#ffe7a0;box-shadow:0 2px 0 #b97a25;color:#4c3515}
.scroll-actions{min-height:52px;align-items:center}
.scroll-actions button{transition:background-color .2s ease,opacity .2s ease,transform .2s ease}
.scroll-paper button:disabled{cursor:default}#skip:disabled{opacity:.65}
.feedback-panel{overflow:hidden;transition:background .26s ease,border-color .26s ease,box-shadow .26s ease}
.feedback-panel.feedback-pop,.feedback-panel.retry.feedback-pop,.badge.earned{animation:none}
#scroll-dialog{overscroll-behavior:contain;transform-origin:50% 40%}
.voice-settings{display:grid;gap:9px;max-width:660px;margin:20px 0 8px}
.voice-settings label{font-size:1.05rem;color:#fff0be}
.voice-settings select{width:100%;min-height:48px;padding:10px 12px;border:1px solid #a9ba92;border-radius:10px;background:#173f35;color:#fff7dd;font:inherit;font-size:1rem}
.voice-settings select:focus-visible{outline:3px solid #ffce66;outline-offset:3px}
.voice-settings p{margin:0;font-size:.95rem;line-height:1.5}
@media(prefers-reduced-motion:no-preference){
  #scroll-dialog[open]::backdrop{animation:backdrop-in .34s ease-out both}
  #scroll-dialog.is-closing::backdrop{animation:backdrop-out .22s ease-in both}
  @keyframes backdrop-in{from{background:#031d1900;backdrop-filter:blur(0)}to{background:#031d19bb;backdrop-filter:blur(5px)}}
  @keyframes backdrop-out{from{background:#031d19bb;backdrop-filter:blur(5px)}to{background:#031d1900;backdrop-filter:blur(0)}}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* Small painted scrolls sit in the scenery; location help is deliberately opt-in. */
.item{width:clamp(44px,5.8vw,68px);height:clamp(44px,5.8vw,68px);min-height:44px;border:0;border-radius:50%;background:transparent;transform:translate(-50%,-50%) rotate(var(--scroll-turn));filter:none;opacity:.9;box-shadow:none}
.item img{object-fit:contain;border-radius:0;filter:brightness(var(--scroll-light)) saturate(.7) drop-shadow(1px 2px 1px #15201488)}
.item:hover{transform:translate(-50%,-50%) rotate(var(--scroll-turn)) scale(1.04);background:transparent;opacity:1}
.item:focus-visible,.item.here{outline:3px solid #fff493;outline-offset:2px;opacity:1;background:#fff49322}
.item.completed{width:26px;height:26px;min-height:0;border:0;background:transparent;color:#fff0ca;opacity:.55;font-size:1rem;text-shadow:0 1px 3px #163228;transform:translate(-50%,-50%);filter:none}
.scene-bar{flex-wrap:wrap;gap:12px}.scene-bar h2{min-width:120px}.clue-counts{display:flex;gap:8px;font-size:.95rem}.clue-counts>span{display:flex;gap:7px;align-items:center;background:#092b25;border:1px solid #648675;border-radius:10px;padding:8px 12px;white-space:nowrap}.clue-counts strong{color:#ffe49c}.quiet-button{background:transparent;font-size:.9rem;padding:9px 12px;border-color:#6f9180}.purse{font-size:1.25rem;display:flex;gap:8px;align-items:center}
/* Every coloured third comes from the same painted jewel sprite. */
.satchel{display:block}.collection-heading{max-width:660px}.collection-heading p{margin:5px 0 0;line-height:1.45}.treasure-layout{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:28px;align-items:center;margin-top:20px}.gem-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.gem-card{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:14px 10px 17px;background:#092a2359;border:1px solid #547a64;border-radius:18px;transition:background-color .4s,border-color .4s}.gem-card>strong{font-size:1.2rem;color:#e9eed7}.gem-card.earned{background:#365339;border-color:#c9b56f}.piece-count{font-size:.95rem;color:#d1dfc4;text-align:center}.gem-model{position:relative;aspect-ratio:1;width:100px;flex-shrink:0;isolation:isolate}.gem-card .gem-model{width:min(115px,100%);margin-bottom:8px}.gem-surface{position:absolute;inset:0;background:url('art/gemstones.webp') var(--gem-x) center/300% 100% no-repeat}.gem-ghost{opacity:.22;filter:grayscale(1) brightness(1.4)}.gem-piece{opacity:0;transform:translate(0,0)}.gem-piece.joined{opacity:1}.piece-0{clip-path:polygon(0 0,100% 0,50% 55%)}.piece-1{clip-path:polygon(0 0,50% 55%,50% 100%,0 100%)}.piece-2{clip-path:polygon(100% 0,100% 100%,50% 100%,50% 55%)}.gem-model.whole{filter:drop-shadow(0 3px 8px #ffdc7d25)}
.goblet-display{text-align:center}.goblet-scene{position:relative;width:100%;aspect-ratio:1;isolation:isolate}.goblet-scene>img{width:100%;height:100%;display:block;object-fit:contain}.goblet-gem{position:absolute;top:27%;width:18%;transform:translate(-50%,-50%);z-index:1}.goblet-display p{margin:-8px 0 0;font-size:1.1rem;color:#ffe49c}
.gem-reward{position:relative;display:flex;align-items:center;gap:18px;padding:12px 16px;margin:0 0 20px;background:#e7ecc9;border:2px solid #90ab65;border-radius:18px;transform-origin:center top}.reward-gem{width:92px;z-index:3}.reward-copy{flex:1;min-width:0;font-weight:700;font-size:1.1rem;line-height:1.3;color:#315830;margin:0}.reward-bowl{width:150px;flex-shrink:0}.gem-reward.complete{background:linear-gradient(120deg,#fff1b8,#f2dcf6);border-color:#c9a355}.gem-reward.complete .reward-copy{color:#694174}
.reset-dialog{width:min(530px,94vw);border:1px solid #c5b576;border-radius:22px;color:#fff2cd;background:#183d32}.reset-wrap{padding:28px}.reset-wrap .eyebrow{margin-top:0}.reset-wrap h2{font-size:1.6rem}.reset-wrap p{line-height:1.5}.reset-actions{display:flex;gap:12px;flex-wrap:wrap}.reset-actions button{flex:1}.reset-actions #confirm-reset{background:#efcb7d;color:#3c3018;border-color:#efcb7d}
@media(max-width:850px){.treasure-layout{grid-template-columns:minmax(0,1fr) 180px;gap:14px}.clue-counts{order:3}.scene-bar .quiet-button{margin-left:auto;order:4}.scene-bar h2{flex:1}.gem-card{padding:12px 6px}.gem-card>strong{font-size:1.05rem}.piece-count{font-size:.85rem}}
@media(max-width:700px){.heading{flex-wrap:wrap}.heading h1{margin-bottom:8px}.purse{margin-bottom:16px}.scene-bar{margin-top:0}.clue-counts{font-size:.85rem;gap:5px}.clue-counts>span{padding:7px 8px;gap:5px}.scene-bar .quiet-button{font-size:.85rem;padding:7px 10px}.treasure-layout{grid-template-columns:1fr}.gem-cards{gap:8px}.goblet-display{width:210px;justify-self:center}.gem-card .gem-model{width:90px}.gem-card>strong{font-size:1.08rem}.piece-count{font-size:.9rem}.gem-reward{gap:10px;padding:10px}.reward-gem{width:68px}.reward-bowl{width:105px}.reward-copy{font-size:1rem}.gem-reward.complete{display:grid;grid-template-columns:1fr 1fr}.gem-reward.complete .reward-gem{justify-self:center;width:82px}.gem-reward.complete .reward-bowl{grid-column:2;grid-row:1;justify-self:center;width:130px}.gem-reward.complete .reward-copy{grid-column:1/-1;text-align:center}.reset-wrap{padding:22px}}
/* A fixed play window looks into the larger woodland world. */
#world-layer{position:absolute;inset:0;transform-origin:0 0}#scene-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}.roaming #world-layer{will-change:transform}.roaming .explorer{width:132px;transition:none}.roaming .item{width:80px;height:80px}.roaming .item.completed{width:28px;height:28px}.roaming .scene-caption{max-width:65%;font-size:.95rem;left:16px;transform:none;top:14px;padding:8px 14px}.world-overview{position:absolute;z-index:120;right:14px;top:14px;width:clamp(78px,9vw,110px);aspect-ratio:4/3;overflow:hidden;border:2px solid #d8c989;border-radius:12px;background:#092c21;box-shadow:0 3px 15px #09291b80;pointer-events:none}.world-overview>img{width:100%;height:100%;display:block;object-fit:fill;filter:brightness(.75)}#overview-view{position:absolute;border:1.5px solid #f8f1c2;background:#fff9d51a;box-shadow:0 0 0 1px #0c312b66}#overview-player,#overview-clue{position:absolute;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:#fffdf1;box-shadow:0 0 0 2px #194c3b}#overview-clue{width:12px;height:12px;background:#ffcf4b;border:2px solid #fff9c2;box-shadow:0 0 0 3px #81521d99}.area-label{position:absolute;left:16px;bottom:14px;z-index:120;padding:6px 12px;border:1px solid #9bb88688;border-radius:10px;background:#0b2b24e6;color:#fff2c9;font-size:.95rem;pointer-events:none}.roaming #walk-marker{width:30px;height:18px}.gem-surface{background-image:var(--gem-image,url('art/gemstones.webp'));background-size:var(--gem-size,300% 100%)}.gem-cards{grid-template-columns:repeat(4,minmax(0,1fr))}.places{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.place-info{padding:15px}.place-name{font-size:1.55rem}.roaming-place{border-color:#e1c071;background:#254b37}.roaming-place .place-name{color:#ffe39a}
@media(max-width:1000px){.places{grid-template-columns:repeat(2,minmax(0,1fr))}.gem-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.places{grid-template-columns:1fr}.roaming .scene-caption{font-size:.83rem;max-width:calc(100% - 139px);left:10px;top:10px;padding:6px 9px;line-height:1.2;text-align:left;border-radius:12px}.world-overview{right:10px;top:10px;width:110px;border-radius:9px}.area-label{left:10px;bottom:10px;font-size:.85rem;padding:5px 9px}.gem-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.roaming .explorer{width:138px}}

/* Share Spelling Spire's five-frame walk cycle; frames follow actual movement. */
.explorer{transform:translate(-50%,-100%) scale(var(--depth));transform-origin:50% 100%}
.explorer-sprite{position:absolute;left:50%;bottom:0;width:53.333333%;height:100%;background-image:url('../../../spelling-alpha/spire-workshop-7f3a91c2e6d8/assets/characters/spelling-spire-boy-walk-cycle-v2.png');background-size:500% 100%;background-position:var(--sprite-x) 0;transform:translateX(-50%) scaleX(var(--facing));will-change:background-position}

/* Ground footprints block movement; taller artwork sorts against the explorer's feet. */
#scenery{position:absolute;inset:0;pointer-events:none}.world-prop{position:absolute;height:auto;max-width:none;pointer-events:none;user-select:none;opacity:1;transition:opacity .22s ease;filter:drop-shadow(0 5px 3px #112a2338)}.world-prop.player-behind{opacity:.72}

/* A low-flying rocket replaces the walking sprite only on the lunar plain. */
.space-world{border-color:#87cde9;background:#171e3e}.space-world .area-label{background:#172344e8;border-color:#75cfe2;color:#e0f9ff}.space-world .world-overview{border-color:#88e3f1;background:#151c3e}.space-world .item img{filter:brightness(var(--scroll-light)) saturate(.5) drop-shadow(1px 2px 2px #11182e99)}
.roaming .explorer.rocket{width:116px;transform:translate(-50%,-65%);transform-origin:50% 65%}
.explorer.rocket .explorer-sprite{left:0;bottom:0;width:100%;height:100%;background:url('art/space-rocket.webp') center/contain no-repeat;transform:rotate(var(--heading,0deg));transition:none;will-change:transform;filter:drop-shadow(0 13px 4px #11192c55)}
.explorer.rocket.walking .explorer-sprite{filter:drop-shadow(-5px 0 5px #75edff) drop-shadow(0 13px 4px #11192c55)}
.gem-surface{filter:hue-rotate(var(--gem-hue,0deg))}.gem-ghost{filter:grayscale(1) brightness(1.4)}
.places{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.gem-cards{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
@media(max-width:700px){.places{grid-template-columns:1fr}.gem-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:no-preference){.explorer.rocket.walking .explorer-sprite{animation:rocket-thrust .34s ease-in-out infinite alternate}@keyframes rocket-thrust{from{filter:drop-shadow(-4px 0 3px #75edff) drop-shadow(0 13px 4px #11192c55)}to{filter:drop-shadow(-7px 0 9px #b5f7ff) drop-shadow(0 13px 4px #11192c55)}}}

/* The portal is a translucent energy field inside the existing gate artwork. */
.space-portal{position:absolute;width:164px;height:217px;pointer-events:none;transform:translate(-48%,-107%) skewY(-8deg);border-radius:50% 50% 15% 15%;border:3px solid #92ecff;background:radial-gradient(ellipse at center,#d8fbff66 0%,#29bfff88 42%,#1264ecc9 76%,#9ef7ffcc 100%);box-shadow:inset 0 0 25px #b7f7ff,0 0 24px #258fff99;opacity:.8}
.boost-status{position:absolute;bottom:14px;right:14px;z-index:125;padding:10px 16px;border:2px solid #b7f5ff;border-radius:14px;background:#09489aee;color:#fff;font-size:1.05rem;pointer-events:none;box-shadow:0 0 20px #45d8ff88}
.explorer.rocket.boosted .explorer-sprite{filter:drop-shadow(0 0 14px #49cfff) brightness(1.15)}
@media(prefers-reduced-motion:no-preference){.space-portal{animation:portal-shimmer 1.8s ease-in-out infinite alternate}@keyframes portal-shimmer{from{opacity:.65;box-shadow:inset 0 0 18px #b7f7ff,0 0 18px #258fff99}to{opacity:.92;box-shadow:inset 0 0 38px #b7f7ff,0 0 34px #258fffbb}}}
/* Exhaust shares the ship's rotating frame, keeping its nozzle at the rear. */
.explorer.rocket .explorer-sprite::before,.explorer.rocket .explorer-sprite::after{content:'';position:absolute;pointer-events:none;right:95%;top:50%;transform:translateY(-50%) scaleX(.35);transform-origin:100% 50%;opacity:0;transition:opacity .18s ease,transform .18s ease;border-radius:100% 15% 15% 100%}
.explorer.rocket .explorer-sprite::before{width:76%;height:25%;background:linear-gradient(90deg,#1668ff00,#237aff80 25%,#36d9fff0 72%,#c7fbff);filter:blur(2px);box-shadow:8px 0 16px #37bdff55}
.explorer.rocket .explorer-sprite::after{width:52%;height:11%;background:linear-gradient(90deg,#77eaff00,#94efff 55%,#fff 100%);filter:blur(.5px)}
.explorer.rocket.boosted .explorer-sprite::before,.explorer.rocket.boosted .explorer-sprite::after{opacity:1;transform:translateY(-50%) scaleX(1)}
@media(prefers-reduced-motion:no-preference){.explorer.rocket.boosted .explorer-sprite::before{animation:jet-stream .24s ease-in-out infinite alternate}.explorer.rocket.boosted .explorer-sprite::after{animation:jet-stream .17s ease-in-out infinite alternate-reverse}@keyframes jet-stream{from{transform:translateY(-50%) scaleX(.88) scaleY(.94)}to{transform:translateY(-50%) scaleX(1.08) scaleY(1.05)}}}

#correction-dialog{background:linear-gradient(135deg,#fff1a2,#ffd0aa);color:#542a16;border:4px solid #ed8639;box-shadow:0 0 70px #ffad5466}#correction-sentence{font-size:1.6rem;line-height:1.5;background:#fffdf0;padding:18px;border-radius:14px;border:2px solid #e8a45e}#correction-continue{background:#145e80;color:white;border-color:#094b69;min-height:48px}.space-world .item img{filter:brightness(.9) saturate(.8) drop-shadow(2px 3px 2px #11182e88)}

/* Palm Island shares the world's ground-plane sorting, including the moving monkey. */
.island-world{background:#40bdb6;border:2px solid #aad8bb}
.island-world .area-label{background:#155747ed;border-color:#e4d599;color:#fff2c9}
.island-world .world-overview{border-color:#f4df9a;background:#289b9b}
.island-world .world-overview>img{filter:brightness(.9)}
.island-monkey{position:absolute;width:80px;height:88px;transform:translate(-50%,-94%) translateY(var(--jump-lift,0px)) scale(var(--monkey-scale,1));transform-origin:50% 94%;pointer-events:none;filter:drop-shadow(0 5px 3px #60442d55)}
.island-monkey>img{display:block;width:100%;height:100%;object-fit:contain;transform:scaleX(var(--monkey-facing,1));transform-origin:50% 92%}
.island-monkey.dashing{filter:drop-shadow(-6px 3px 3px #f5dc7577) drop-shadow(0 4px 2px #60442d55)}
.monkey-passenger{position:absolute;width:48px;height:54px;object-fit:contain;left:-12px;bottom:39%;pointer-events:none;filter:drop-shadow(0 2px 1px #42281955)}
.monkey-status{position:absolute;bottom:14px;right:14px;z-index:125;max-width:60%;padding:8px 13px;border:1px solid #efd791;border-radius:13px;background:#3f4625ed;color:#fff7d6;font-size:.95rem;line-height:1.2;pointer-events:none;box-shadow:0 3px 12px #184b4533}
.monkey-status.caught{background:#136b4fee;border:2px solid #b8e99a}
@media(prefers-reduced-motion:no-preference){
  .island-monkey.scampering>img{animation:monkey-step .3s ease-in-out infinite alternate}
  .island-monkey.dashing>img{animation-duration:.14s}
  .monkey-rider.walking .monkey-passenger{animation:monkey-ride .24s ease-in-out infinite alternate}
  @keyframes monkey-step{from{transform:scaleX(var(--monkey-facing,1)) translateY(0) rotate(-4deg)}to{transform:scaleX(var(--monkey-facing,1)) translateY(-6px) rotate(4deg)}}
  @keyframes monkey-ride{to{transform:translateY(-3px) rotate(-4deg)}}
}
@media(max-width:700px){.monkey-status{bottom:10px;right:10px;max-width:52%;font-size:.8rem;padding:6px 8px}.island-world .area-label{max-width:42%}}
@media(prefers-reduced-motion:reduce){.island-monkey{transform:translate(-50%,-94%)}}

/* The same shoreline art defines where sailing changes into walking. */
.island-ground{position:absolute;transform:translate(-50%,-50%);pointer-events:none;max-width:none;z-index:1}
.world-overview .overview-island{position:absolute;transform:translate(-50%,-50%);object-fit:fill;filter:none;z-index:1}#overview-view,#overview-player,#overview-clue{z-index:2}
.water-world{background:#126b87;border-color:#75d5da}.water-world .area-label{background:#075469e8}.water-world .world-overview{border-color:#97e4e4;background:#176681}
.roaming .explorer.boating{width:125px;transform:translate(-50%,-65%);transform-origin:50% 65%}
.explorer.boating .explorer-sprite{left:0;bottom:0;width:100%;height:100%;background:url('art/bay-boat.webp') center/contain no-repeat;transform:rotate(var(--heading,0deg));transition:none;filter:drop-shadow(0 5px 3px #064e6570)}
.water-world .item img{filter:drop-shadow(1px 2px 2px #073c5370)}

.water-world .explorer{transition:transform .16s ease-out}
.water-world .item.floating img{animation:bottle-bob 2.4s ease-in-out infinite alternate}@keyframes bottle-bob{from{transform:translateY(-2px) rotate(-3deg)}to{transform:translateY(3px) rotate(3deg)}}

.explorer.boating .explorer-sprite{transform:scaleX(var(--facing)) rotate(var(--boat-tilt,0deg))}

/* Moving foam fronts and submerged wildlife sit beneath the island ground. */
.sea-wave{position:absolute;z-index:0;height:180px;max-width:none;pointer-events:none;opacity:.88;transform-origin:50% 50%;background:url('art/bay-wave.webp') center/100% 100% no-repeat}
.sea-shark{position:absolute;width:130px;height:auto;max-width:none;pointer-events:none;opacity:.24;filter:sepia(.3) saturate(.7) hue-rotate(125deg);transition:opacity .18s ease,filter .18s ease;transform-origin:50% 50%}.sea-shark.breaching{opacity:1;filter:drop-shadow(0 12px 5px #073b5977)}
.sea-status{position:absolute;right:14px;bottom:14px;z-index:126;max-width:65%;padding:10px 14px;background:#074f6eea;border:2px solid #c1faff;color:#fff;border-radius:14px;font-size:1rem;pointer-events:none}
.explorer.boating .explorer-sprite{transition:none}
.explorer.boating.surfing .explorer-sprite{filter:drop-shadow(-8px 10px 5px #e1ffffbb)}
.explorer.boating.boat-stunned .explorer-sprite{animation:boat-shake .16s ease-in-out infinite alternate}@keyframes boat-shake{from{translate:-4px 0;rotate:-3deg}to{translate:4px 0;rotate:3deg}}

.sea-wave-canvas{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;pointer-events:none}.sea-wave.wave-ready{background-image:none}.wave-ready .sea-wave-canvas{visibility:visible}
.sea-ripple,.sea-droplet{position:absolute;pointer-events:none;box-sizing:border-box;transform-origin:center}.sea-ripple{border:2px solid #d6ffff;border-radius:50%;box-shadow:0 2px 1px #076a7a22}.sea-droplet{border-radius:50%;background:#e0fcff;box-shadow:0 1px 3px #73dcea66}

.water-world .explorer.boating .explorer-sprite{transition:none!important}



/* Fullscreen presents the playfield, with controls over it and dialogs in the top layer. */
body.play-fullscreen{overflow:hidden}
body.play-fullscreen>header,body.play-fullscreen main{visibility:hidden}
body.play-fullscreen #scene{visibility:visible;position:fixed;inset:0;width:100vw;height:100dvh;max-height:none;aspect-ratio:auto;border-radius:0;z-index:200}
body.play-fullscreen #fullscreen{visibility:visible;position:fixed;right:16px;bottom:16px;z-index:220;background:#103c36ed}
body.play-fullscreen .direction-pad{visibility:visible;position:fixed;left:16px;bottom:16px;z-index:220;background:#103c36cc;border-radius:14px;padding:6px}
body.play-fullscreen dialog{visibility:visible}
body.play-fullscreen .area-label{bottom:165px}
body.play-fullscreen .sea-status,body.play-fullscreen .boost-status,body.play-fullscreen .monkey-status{bottom:76px}
body.play-fullscreen .world-overview{width:clamp(80px,7vw,110px)}

/* Waterwheel Valley: larger world, repaired crossings and working mill. */
.valley-detail{position:absolute;pointer-events:none;user-select:none}
.valley-bridge{width:400px;height:380px;max-width:none;transform:translate(-50%,-50%);z-index:2;opacity:.24;filter:grayscale(.8);clip-path:inset(68% 0 0)}
.valley-bridge.built{opacity:1;filter:drop-shadow(0 5px 3px #174f4344);clip-path:none}
.valley-sign,.valley-mill-label{transform:translate(-50%,-50%);padding:9px 18px;border:2px solid #cfa957;border-radius:9px;background:#3c4027ed;color:#fff2cb;white-space:nowrap;font-size:22px;z-index:5400;box-shadow:0 4px 9px #17291855}
.valley-mill-label{z-index:3700;background:#294c36ee}
.valley-wheel{width:215px;height:215px;transform:translate(-50%,-50%);z-index:4100}
.valley-wheel img{width:100%;height:100%;animation:valley-spin var(--wheel-time,12s) linear infinite;animation-play-state:paused;filter:drop-shadow(0 4px 4px #183a3355)}
.valley-wheel.turning img{animation-play-state:running}
body:has(dialog[open]) .valley-wheel img{animation-play-state:paused}
@keyframes valley-spin{to{transform:rotate(360deg)}}
.bridge-dialog{width:min(650px,94vw);max-height:90dvh;padding:0;border:3px solid #d3b366;border-radius:24px;background:#fff9e8;color:#263e31;box-shadow:0 24px 80px #071f2790}
.bridge-wrap{padding:28px}.bridge-wrap h2{font-size:1.8rem;color:#274c39;margin:14px 0}.bridge-wrap .eyebrow{margin-top:24px;color:#75602d}
.bridge-sentence{padding:22px;background:#f0e3b9;border:1px solid #cfb879;border-radius:14px;font-size:1.6rem;line-height:1.6}
.bridge-choices{display:flex;gap:14px}.bridge-choices button{flex:1;min-height:60px;font-size:1.5rem;background:#36664d;color:#fff8dd;border:2px solid #204633;box-shadow:0 4px 0 #18382b}
.bridge-choices button:disabled{opacity:.65}.bridge-actions{display:flex;gap:14px;flex-wrap:wrap}.bridge-actions button{min-height:48px}
#bridge-feedback{min-height:3em;line-height:1.5}#bridge-close{display:block;margin-left:auto}.bridge-wrap .quiet-button{background:#efe4c6;color:#324634;border:1px solid #baa678}
@media(prefers-reduced-motion:reduce){.valley-wheel img{animation:none}}
@media(max-width:700px){.bridge-wrap{padding:18px}.bridge-wrap h2{font-size:1.45rem}.bridge-sentence{font-size:1.25rem;padding:15px}.bridge-choices{gap:10px}}

/* Continuous mill motion is explicitly controllable, independent of UI effects. */
.valley-wheel.turning img{animation:valley-spin var(--wheel-time,24s) linear infinite!important}
.valley-water{width:260px;height:100px;transform:translate(-50%,-50%);z-index:3;opacity:var(--flow-strength,.7);border-radius:50%;background:radial-gradient(ellipse,#d4fff877,#32bfbc44 40%,transparent 72%)}
.valley-ripple{position:absolute;left:48%;top:48%;width:80px;height:25px;border:3px solid #e4fffcbf;border-left-color:transparent;border-radius:50%;animation:valley-ripple 2.8s linear infinite!important;animation-delay:var(--delay)!important}
.valley-foam{width:150px;height:35px;transform:translate(-50%,-50%);z-index:4400;background:radial-gradient(ellipse,#edffefaa, #b7fff777 25%,transparent 68%);border-radius:50%}
.valley-drop{position:absolute;left:50%;top:12px;width:6px;height:10px;background:#e1fff8;border-radius:60%;box-shadow:0 0 4px #99e8df;animation:valley-splash 1.7s ease-out infinite!important;animation-delay:var(--delay)!important}
@keyframes valley-ripple{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}20%{opacity:.8}100%{transform:translate(-150%,-35%) scale(2.5);opacity:0}}
@keyframes valley-splash{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.9}48%{transform:translate(calc(var(--drift)*.5),var(--lift));opacity:.9}100%{transform:translate(var(--drift),20px) scale(.4);opacity:0}}
body:has(dialog[open]) .valley-wheel img,body:has(dialog[open]) .valley-ripple,body:has(dialog[open]) .valley-drop,
.mill-motion-paused .valley-wheel img,.mill-motion-paused .valley-ripple,.mill-motion-paused .valley-drop{animation-play-state:paused!important}
#mill-motion{display:none}body:has(.valley-world) #mill-motion{display:block;white-space:normal}
body:has(.valley-world) .under-scene{flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.valley-wheel.turning img{animation-duration:36s!important}.valley-ripple{animation-duration:5.6s!important}.valley-drop{display:none}}

/* Waterfall highlights stay on the painted cascade; no new terrain. */
.valley-bridge{width:330px;height:295px}