@font-face{font-family:Poppins;src:url('poppins-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url('poppins-semibold.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:HwFallback;src:local('Georgia')}*{box-sizing:border-box}html{background:#14251f;color:#f8f1df;font-family:system-ui,-apple-system,sans-serif}body{margin:0}button,input,select{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #ffdd84;outline-offset:4px}button{min-height:46px;border:1px solid #b99d644d;border-radius:12px;padding:10px 16px;background:#253e34;color:#fcf3dc;font-weight:650}button:hover:not(:disabled){background:#365442}a{color:inherit}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Georgia,serif;font-weight:normal}h1{font-size:clamp(42px,7vw,88px);line-height:1.02;letter-spacing:-3px}h2{font-size:32px}h3{font-size:23px}p{line-height:1.65;color:#b9c8b9}.eyebrow{font-size:11px;letter-spacing:2.8px;font-weight:750;color:#d6bd7e;text-transform:uppercase}.primary{background:#e9c781;color:#283b2d;border-color:#e9c781}.primary:hover:not(:disabled){background:#f7dda4}.quiet{background:transparent}.icon{width:20px;height:20px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.loading{padding:12vh 8vw}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:20;background:#fcf3dc;color:#26372b;padding:14px 22px;border-radius:14px;box-shadow:0 5px 30px #0007;max-width:calc(100% - 24px)}.landing{min-height:100svh;background:linear-gradient(90deg,#10261ef0 0%,#10261e8a 48%,#10261e18 100%),url('arrival.webp') center/cover;display:flex;flex-direction:column}.landing-nav,.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 32px;border-bottom:1px solid #ddc58f25}.brand{font-family:Georgia,serif;font-size:27px;letter-spacing:-.6px;text-decoration:none}.brand small{display:block;font:9px system-ui;letter-spacing:3px;color:#d7c494;margin-top:4px}.landing-body{padding:45px 7vw 70px;display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center;flex:1}.landing-copy{max-width:570px}.landing-copy h1{margin:22px 0 12px}.landing-copy .subtitle{font:italic 25px Georgia;color:#edcf91;margin:0 0 26px}.landing-copy p{color:#e4e8d6;max-width:420px;font-size:17px}.landing-note{margin-top:32px;font-size:12px!important;color:#c4ceb8!important}.card{background:#192e27f2;border:1px solid #c6af764d;border-radius:20px;padding:28px;box-shadow:0 20px 70px #081c2270;backdrop-filter:blur(12px)}.card h2{margin:12px 0}.card p{font-size:14px}.profiles{display:grid;gap:10px;margin:18px 0}.profile-card{display:flex;align-items:center;gap:14px;text-align:left}.profile-card span{display:block}.profile-card small{display:block;color:#bcc9b5;margin-top:4px;font-weight:400}.avatar{width:56px;height:72px;image-rendering:pixelated;flex-shrink:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#c4d0be;letter-spacing:.3px}.field select{width:100%;min-height:46px;background:#0e241e;color:#f6ebd3;border:1px solid #a88d594f;border-radius:9px;padding:10px;font-size:14px}.appearance-preview{display:flex;align-items:center;gap:20px;margin:10px 0 22px;padding:14px 20px;background:#11251e;border-radius:12px}.appearance-preview .avatar{width:70px;height:96px}.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.note{font-size:12px!important;line-height:1.5;color:#aebca9}.chapter-header{padding:23px 32px 17px;display:flex;align-items:center;justify-content:space-between;gap:20px}.chapter-header h1{font-size:38px;letter-spacing:-1px;margin:6px 0 0}.chapter-header .chapter-label{text-align:right;font-size:12px;color:#b7c6b5}.game-shell{max-width:1800px;margin:auto}.topbar{padding:14px 28px;background:#11221d}.topbar .tools{display:flex;gap:8px;align-items:center}.tools button{font-size:12px;padding:8px 12px}.save-label{font-size:11px;color:#bbcbae}.adventure-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;padding:0 28px}.map-wrap{position:relative;align-self:start;overflow:hidden;border-radius:16px;border:1px solid #d7bd7755;box-shadow:0 12px 36px #06191260}.world-map{position:relative;aspect-ratio:3/2;background:#53724a url('hearthmeadow.webp') center/100% 100%;isolation:isolate;touch-action:manipulation}.world-map:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 45px #15281f66;z-index:1}.map-marker{position:absolute;transform:translate(-50%,-100%);z-index:3;background:#142f26ef;border:1px solid #d7c28e;color:#fff3d4;box-shadow:0 3px 15px #0007;padding:7px 10px;min-height:44px;font-size:11px;white-space:nowrap;border-radius:9px;display:flex;align-items:center;gap:5px}.map-marker:after{content:'';position:absolute;bottom:-7px;left:50%;width:10px;height:10px;background:inherit;border-right:1px solid #d7c28e;border-bottom:1px solid #d7c28e;transform:translateX(-50%) rotate(45deg)}.map-marker.current{background:#edd394;color:#213b2c}.map-marker.complete{border-color:#aac68a}.map-marker.optional{border-style:dashed}.player-token{position:absolute;z-index:4;pointer-events:none;transform:translate(-50%,-85%);filter:drop-shadow(0 4px 2px #092b2190);width:42px;height:58px;transition:left .32s linear,top .32s linear}.player-token .avatar{width:42px;height:58px}.map-foot{padding:12px 16px;background:#10271e;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:#c1cdb8}.map-foot strong{color:#efd594}.journal-panel{padding:22px;background:#f5eedc;color:#354435;border-radius:15px;align-self:start;box-shadow:0 12px 30px #03180d30}.journal-panel .eyebrow{color:#877239;letter-spacing:2px}.journal-panel h2{font-size:25px;margin:10px 0}.journal-panel p{color:#63715b;font-size:13px;line-height:1.6}.journal-panel button{width:100%;font-size:12px;margin-top:8px}.quest-entry{border-top:1px solid #d9d4bd;padding:15px 0 0;margin-top:14px}.quest-entry small{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#7c8059}.quest-entry h3{font-size:19px;margin:7px 0}.progress-dots{display:flex;gap:6px;margin:15px 0}.progress-dots i{height:5px;flex:1;background:#d4d4bd;border-radius:4px}.progress-dots i.done{background:#66815b}.character-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px 24px}.character-identity{display:flex;align-items:center;gap:12px}.character-identity .avatar{width:35px;height:48px}.character-identity strong{display:block;font-family:Georgia,serif;font-size:18px}.character-identity small{font-size:11px;color:#aec3ac}.speciality-buttons{display:flex;gap:6px}.speciality-buttons button{font-size:12px;min-height:42px}.speciality-buttons button[aria-pressed=true]{background:#dcc184;color:#20382b}.build-note{padding:0 28px 18px;color:#839e88;font-size:11px}.overlay{border:none;padding:0;background:transparent;color:inherit;width:min(720px,calc(100% - 28px));max-height:calc(100svh - 32px);overflow:auto}.overlay::backdrop{background:#071a14bd;backdrop-filter:blur(5px)}.dialog-card{padding:30px;background:#f7f0df;color:#2d412f;border:1px solid #e6d19b;border-radius:19px;box-shadow:0 20px 80px #0008}.dialog-card p{color:#58684f}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px}.dialog-head .eyebrow{color:#85743d}.dialog-head button{background:transparent;color:#415641;min-width:44px;border-color:#a79f7766;padding:8px}.dialog-card h2{margin-bottom:15px;font-size:30px}.portrait{width:58px;height:58px;border-radius:50%;background:#dde1c2;display:grid;place-items:center;color:#536e4c;flex-shrink:0}.portrait .icon{width:35px;height:35px}.speaker-line{display:flex;gap:14px;align-items:center;margin-bottom:18px}.speaker-line strong{font:20px Georgia;display:block}.speaker-line small{color:#7a825f;font-size:12px}.dialog-card .primary{background:#355a41;border-color:#355a41;color:#fff1cf}.dialog-card .primary:hover{background:#244a30}.dialog-card button.quiet{color:#486344;border-color:#beb88e}.puzzle-prompt{font:22px/1.55 Georgia;color:#314831!important;padding:22px;background:#e9e9d6;border-radius:12px;white-space:pre-line}.answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.answer-grid button{background:#fffcf2;color:#344d34;border:2px solid #cbd0b8;min-height:80px;font:19px Georgia}.answer-grid button:hover:not(:disabled){background:#e7edd7}.answer-grid button[aria-pressed=true]{border-color:#456941;background:#e0e9ca;box-shadow:0 0 0 2px #6a815026}.answer-grid button.guided{border-style:dashed;border-color:#7b679b}.hint-box{margin:18px 0;padding:15px;border:1px solid #c9c49e;border-radius:12px;background:#eee7d2}.hint-box p{font-size:14px;margin:8px 0 0}.hint-title{display:flex;gap:10px;align-items:center;font:18px Georgia}.feedback{font-size:14px;border-left:3px solid #8c9b65;padding-left:12px;margin:15px 0}.dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}.reward{background:#e4e8cb;padding:16px;border-radius:12px;color:#536040;margin:18px 0}.reward strong{display:block;margin-top:5px;color:#32472d}.wardrobe .field{color:#596a4d}.wardrobe .field select{background:#fffaf0;color:#354632}.wardrobe .appearance-preview{background:#e7e6ce}.world-regions{list-style:none;padding:0}.world-regions li{padding:14px 0;border-bottom:1px solid #d5d6bb;display:flex;justify-content:space-between;gap:14px}.world-regions small{font-size:11px;color:#6f7c5b}.learning-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.learning-summary div{background:#e9e8d2;border-radius:10px;padding:15px}.learning-summary strong{display:block;margin-bottom:10px}.learning-summary span{display:block;font-size:13px;line-height:1.7}.draft-note{font-size:11px;color:#78886b;margin:10px 0}.idle-action{margin-top:12px}.read-button{display:inline-flex;align-items:center;gap:7px}.special-tool{font-size:12px;margin:12px 0;color:#566948}.title-rule{width:70px;height:2px;background:#d6b977;margin:26px 0}.hidden,[hidden]{display:none!important}@media(min-width:1500px){.adventure-layout{grid-template-columns:minmax(0,1fr) 340px}.journal-panel{padding:28px}.map-marker{font-size:13px}}@media(max-width:1050px){.adventure-layout{grid-template-columns:minmax(0,1fr) 245px;gap:14px;padding:0 18px}.journal-panel{padding:17px}.map-marker{font-size:10px;padding:6px}.landing-body{gap:30px;padding:35px 5vw}.card{padding:22px}}@media(max-width:800px){.adventure-layout{grid-template-columns:1fr}.journal-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.journal-panel>.eyebrow,.journal-panel>h2,.journal-panel>.progress-dots{grid-column:1/-1}.journal-panel>.quest-entry{grid-column:2;grid-row:4/8;margin:0;padding:0 0 0 18px;border-top:0;border-left:1px solid #d9d4bd}.character-bar{flex-wrap:wrap;padding:16px 18px}.landing-body{grid-template-columns:1fr;padding:25px}.landing-copy{max-width:580px}.landing-copy h1{font-size:62px}.landing-note{margin-top:16px}.topbar{padding:12px 18px}.save-label{display:none}.chapter-header{padding:20px 18px}.brand{font-size:22px}.tools button span{display:none}}@media(max-width:480px){.landing-nav{padding:16px}.landing-body{padding:20px 16px}.card{padding:18px}.tracks{grid-template-columns:1fr}.form-grid{gap:10px}.chapter-header h1{font-size:30px}.chapter-label{max-width:100px}.map-marker{font-size:9px;min-height:44px;padding:4px}.map-marker .icon{display:none}.adventure-layout{padding:0 10px}.journal-panel{display:block}.journal-panel>.quest-entry{padding:12px 0 0;border-left:0;border-top:1px solid #d9d4bd;margin-top:12px}.topbar{padding:10px;gap:6px}.tools{gap:4px!important}.tools button{padding:8px}.brand small{font-size:7px;letter-spacing:2px}.character-bar{padding:12px}.speciality-buttons{width:100%}.speciality-buttons button{flex:1;padding:8px}.dialog-card{padding:20px}.dialog-card h2{font-size:26px}.answer-grid{grid-template-columns:1fr}.answer-grid button{min-height:50px}.puzzle-prompt{font-size:19px;padding:16px}.learning-summary{grid-template-columns:1fr}.player-token,.player-token .avatar{width:27px;height:38px}.build-note{padding:0 12px 16px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.journal-panel button.quiet{color:#486344;border-color:#b6b594}.journal-panel button.quiet:hover{background:#e5e6cd}.map-marker{margin-top:-18px}
.tools button{min-width:44px}

.ordering-board{padding:18px;background:#ede6ce;border:1px solid #c6b98f;border-radius:12px}.ordering-board ol{padding:0;list-style:none;display:grid;gap:8px}.ordering-board li button{width:100%;text-align:left}.ordering-board li span{display:inline-grid;place-items:center;background:#375b4c;color:#fff;border-radius:50%;width:26px;height:26px;margin-right:8px}.piece-bank{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.piece-bank button{min-height:48px}.empty-arrangement{padding:20px;border:2px dashed #ac9d76;text-align:center}.ordering-board .special-tool{display:block}.ordering-board .special-tool button{margin:6px 6px 0 0;min-height:44px}

/* Hearthmeadow chapter and first-steps controls. */
.tutorial-banner{padding:16px;border:1px solid #ae955d;background:#f0e6c7;color:#2c4434;border-radius:12px;margin-bottom:18px}.tutorial-banner p{color:inherit}.tutorial-banner button{margin-top:8px}.number-board{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:24px;border:1px solid #c6b98f;background:#eee7ce;border-radius:12px}.number-board output{font:700 42px Georgia,serif;min-width:72px;text-align:center;color:#254737}.number-board button{min-width:48px;min-height:48px}.number-board p{width:100%;text-align:center}.creature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.creature-grid article{padding:16px;border:1px solid #c6b98f;border-radius:12px}.creature-grid h3{margin:12px 0}.landmark-list{display:grid;gap:10px;margin:20px 0}.journal-panel .tutorial-banner .quiet{color:#34563f}@media(max-width:480px){.creature-grid{grid-template-columns:1fr}.map-marker span{max-width:96px;white-space:normal}.number-board{padding:16px}}

.journal-section{border-top:1px solid #ffffff25;margin-top:16px;padding-top:8px}.journal-section .section-heading{min-height:44px;display:flex;align-items:center;font-weight:600;color:#e8d69f}.speciality-buttons button{min-height:44px}
.journal-panel .journal-section{border-color:#d0ccb0}.journal-panel .journal-section .section-heading{color:#36523b}.journal-panel>.tutorial-banner{grid-column:1/-1}
@media(max-width:600px){.chapter-header .chapter-label{display:none}.map-marker span{display:none}.map-marker .icon{display:block}.map-marker{width:44px;min-width:44px;justify-content:center;transform:translate(-50%,-50%);margin-top:0}.map-marker:after{display:none}}
@media(max-width:480px){.world-map{aspect-ratio:1}.chapter-header{min-width:0}.chapter-header h1{font-size:clamp(25px,9vw,30px)}}

/* Walking is tied to travel only. The shadow stays on the road as the body steps. */
.player-token{transition:none;transform:translate(-50%,-94%)}
.avatar .walk-back{display:none}
.player-token[data-facing=north] .walk-back{display:block}
.player-token[data-facing=north] .walk-face,.player-token[data-facing=north] .walk-trim{visibility:hidden}
.player-token[data-facing=west] .walk-facing{transform:translateX(48px) scaleX(-1)}
.player-token[data-facing=east] .walk-face,.player-token[data-facing=west] .walk-face{transform:translateX(1px)}
.player-token.is-walking .walk-leg{animation:hw-step .44s ease-in-out infinite}
.player-token.is-walking .walk-leg.walk-right{animation-delay:-.22s}
.player-token.is-walking .walk-arm{animation:hw-arm .44s ease-in-out infinite}
.player-token.is-walking .walk-arm.walk-left{animation-delay:-.22s}
.player-token.is-walking .walk-body{animation:hw-bob .22s ease-in-out infinite}
.player-token.is-walking .walk-cloak{transform-origin:24px 30px;animation:hw-cloak .44s ease-in-out infinite}
.map-foot{flex-wrap:wrap;min-height:68px}
.map-foot [data-do=stop-walking]{min-height:44px;font-size:12px;padding:8px 14px}
.map-foot .voice-note{flex-basis:100%;font-size:11px;opacity:.75}
@keyframes hw-step{0%,100%{transform:translateY(-1px)}50%{transform:translateY(1px)}}
@keyframes hw-arm{0%,100%{transform:translateY(1px)}50%{transform:translateY(-1px)}}
@keyframes hw-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.7px)}}
@keyframes hw-cloak{0%,100%{transform:skewX(-3deg)}50%{transform:skewX(3deg)}}
@media(prefers-reduced-motion:reduce){.player-token *{animation:none!important}}
/* Illustrated story stages. Motion settles after four seconds; never gates input. */
.story-overlay{width:min(800px,calc(100% - 28px))}
.story-overlay .dialog-card{overflow:visible}
.story-overlay .dialog-head{margin-bottom:14px}
.story-stage{position:relative;isolation:isolate;overflow:hidden;width:calc(100% + 60px);height:330px;margin:0 -30px 20px;background:#586e48}
.story-scenery{position:absolute;inset:auto 0 0;aspect-ratio:3/2;background-image:url('story-scenes.webp');background-size:200% 200%;background-position:0 0}
.story-stage[data-setting=woodland] .story-scenery{background-position:100% 0}
.story-stage[data-setting=bridge] .story-scenery{background-position:0 100%}
.story-stage[data-setting=ruins] .story-scenery{background-position:100% 100%}
.story-place{position:absolute;top:12px;left:16px;padding:7px 12px;background:#173729e6;border:1px solid #e4ce9380;color:#fff0c8;border-radius:30px;font:12px Georgia,serif;z-index:3}
.scene-player,.scene-companion,.scene-creature{position:absolute;bottom:6%;height:34%;width:22%;display:flex;align-items:end;justify-content:center;filter:drop-shadow(0 4px 2px #15302380);z-index:2}
.scene-player{left:14%;animation:story-arrive 1s ease-out both}
.scene-companion{right:17%;animation:story-greet 4s ease-in-out both}
.scene-creature{right:1%;height:26%;animation:story-greet 4s ease-in-out both}
.story-stage .avatar{height:100%;width:auto}
.scene-companion>svg:not(.avatar),.scene-creature>svg{height:100%;width:100%;overflow:visible}
.story-ground{position:absolute;bottom:0;left:0;right:0;height:12%;background:linear-gradient(transparent,#203d3250);pointer-events:none}
.story-atmosphere{position:absolute;inset:0;pointer-events:none}
.story-atmosphere i{position:absolute;width:5px;height:5px;background:#f9e6a8;border-radius:50%;box-shadow:0 0 10px #f9df96;left:20%;top:30%;opacity:.6;animation:story-drift 4s ease-out both}
.story-atmosphere i:nth-child(2){left:72%;top:40%;animation-direction:reverse}
.story-atmosphere i:nth-child(3){left:49%;top:18%;width:3px;height:3px}
.story-egg{position:absolute;left:44%;bottom:20%;width:12%;height:26%;display:grid;place-items:center;z-index:1}
.story-stage.restored[data-setting=ruins] .story-scenery{filter:brightness(1.12) saturate(1.08)}
.story-stage.restored[data-setting=bridge] .story-atmosphere i{box-shadow:0 0 15px 5px #ffe1a2}
.story-overlay .portrait{overflow:hidden;background:#d6dfbb}
.story-overlay .portrait svg{height:50px;width:50px}
.story-overlay .portrait .avatar{width:32px;height:44px}
.story-motion{font-size:12px;color:#415641;border-color:#a79f7766;margin-top:12px;min-height:44px}
.compact-stage{max-height:150px;margin-bottom:16px}
.compact-stage .scene-player,.compact-stage .scene-companion,.compact-stage .scene-creature{height:50%}
.compact-stage :not(.is-speaking>.story-cast){animation:none!important}
.still-stories .story-stage *{animation:none!important}
@keyframes story-arrive{from{transform:translateX(-18px);opacity:.3}to{transform:none;opacity:1}}
@keyframes story-greet{0%,100%{transform:none}25%{transform:translateY(-4px) rotate(-3deg)}50%{transform:none}75%{transform:rotate(2deg)}}
@keyframes story-drift{from{transform:translate(-10px,12px);opacity:.1}to{transform:translate(10px,-8px);opacity:.6}}
@media(max-width:600px){
 .story-overlay{width:calc(100% - 16px);max-height:calc(100svh - 16px)}
 .story-overlay .dialog-card{padding:16px;border-radius:14px}
 .story-stage{width:calc(100% + 32px);margin-left:-16px;margin-right:-16px;height:clamp(180px,62vw,260px)}
 .story-overlay .dialog-head{position:sticky;top:-16px;background:#f7f0df;z-index:5;padding:8px 0;margin-top:-8px}
 .story-overlay h2{font-size:26px}
 .story-overlay .speaker-line{margin-bottom:12px}
 .story-overlay .dialog-actions{position:sticky;bottom:-16px;z-index:5;background:#f7f0dff5;padding:12px 0;margin-bottom:0;box-shadow:0 -8px 16px #f7f0df}
 .compact-stage{max-height:105px}
}
@media(prefers-reduced-motion:reduce){.story-stage *{animation:none!important}}
.story-cast{display:block;aspect-ratio:3/4;height:100%;background:url('story-cast.webp');background-size:400% 200%;background-position:var(--cast-x) var(--cast-y)}
.story-cast.sunseal-cast{aspect-ratio:6/5;max-width:100%;background-image:url('sunseal-drake.png');background-size:contain;background-position:center bottom;background-repeat:no-repeat}
.story-cast.pip-cast{aspect-ratio:3/2;max-width:100%;background-image:url('pip-dragon.png');background-size:contain;background-position:center bottom;background-repeat:no-repeat}
.portrait .story-cast{height:56px;width:42px}
.story-egg .story-cast{width:100%;height:100%;border:0;border-radius:0;box-shadow:none;transform:none;background-color:transparent;filter:saturate(.4) brightness(.85)}
.story-egg.awakened .story-cast{filter:drop-shadow(0 0 10px #ffe3a6);animation:story-egg-light 4s ease-out both}
.story-paused .story-stage *{animation-play-state:paused!important}
@keyframes story-egg-light{from{filter:drop-shadow(0 0 1px #ffe3a6)}to{filter:drop-shadow(0 0 10px #ffe3a6)}}
@media(prefers-reduced-motion:reduce){.story-egg.awakened .story-cast{animation:none!important}}

.memory-lights{position:absolute;left:38%;right:38%;top:30%;display:flex;justify-content:center;gap:8px}.memory-lights span{color:#777357;background:#263f37;border:1px solid #948661;border-radius:50%;padding:5px}.memory-lights .lit{color:#fff0b5;background:#9c7a33;box-shadow:0 0 15px #ffdc91}
.world-inhabitant{position:absolute;pointer-events:none;width:32px;height:43px;transform:translate(-50%,-85%);z-index:2;filter:drop-shadow(0 2px 2px #152a23aa)}
.world-inhabitant .story-cast{width:100%;height:100%}
/* Portrait glow identifies the speaker; names and voice controls stay separate. */
.character-actor{display:block;text-align:center}
.character-button{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;padding:0;border:0;background:transparent;border-radius:0;min-width:44px;min-height:44px;width:100%;height:calc(100% - 20px);display:flex;justify-content:center;align-items:end;touch-action:manipulation}
.character-button:active,.character-button:hover:not(:disabled),.character-button.speaker-active{background:transparent;border:0}
.character-button:focus-visible{outline:none}
.character-button .story-cast{height:100%;pointer-events:none}
.character-button.speaker-active .story-cast,.character-button:hover:not(:disabled) .story-cast,.character-button:focus-visible .story-cast{filter:drop-shadow(0 0 3px #ffe8a8) drop-shadow(0 0 9px #ffe0a6)}
.character-name{display:block;position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:max-content;max-width:none;font:600 12px/20px Georgia,serif;white-space:nowrap;color:#fff8df;text-shadow:0 1px 3px #10271e,1px 0 2px #10271e,-1px 0 2px #10271e;pointer-events:none}
.character-actor:has(.character-button:focus-visible) .character-name{text-decoration:underline;text-underline-offset:3px}
.story-stage .character-actor{height:43%;bottom:7%;animation:none}
.story-stage .scene-companion{right:31%}
.story-stage .scene-creature{right:5%;height:36%}
.character-button.is-speaking .story-cast{animation:character-talk .7s ease-in-out infinite;transform-origin:50% 90%}
.character-dialogue{border:1px solid #cec3a0;border-left:4px solid #839666;border-radius:12px;padding:14px 16px;background:#fff9e9;margin:0 0 16px;color:#2d412f}
.character-dialogue-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.character-dialogue strong{font:20px Georgia,serif;white-space:nowrap}
.character-dialogue p{margin:8px 0 0;line-height:1.6;color:#465a43}
.character-dialogue button{margin:0;color:#324b37;border-color:#acb390;min-height:44px;white-space:nowrap;padding:8px 12px}
#map-dialogue{margin:12px}
/* Creatures sit beside landmarks and below their markers so a landmark tap always walks. */
.world-character{position:absolute;width:52px;height:70px;transform:translate(-50%,-50%);z-index:2}
.world-character .world-inhabitant{position:relative;left:auto;top:auto;transform:none;pointer-events:auto;width:52px;height:70px;display:block}
.world-character .story-cast{width:auto;height:48px}
.world-character .character-name{font-size:10px;line-height:18px;bottom:0}
.world-character.compact .character-name{display:none}
@media(max-width:480px){.world-character,.world-character .world-inhabitant{width:40px;height:54px}.world-character .story-cast{height:36px}}
/* Give the two small woodland creatures a clearer silhouette against the map. */
.world-character:has([data-talk=sprite], [data-talk=golem]){--creature-width:72px;--creature-height:96px;--creature-art:72px;width:var(--creature-width);height:var(--creature-height)}
.world-character:has([data-talk=sprite], [data-talk=golem]) .world-inhabitant{width:var(--creature-width);height:var(--creature-height);filter:drop-shadow(0 0 2px #fff2c2) drop-shadow(0 3px 3px #10271e)}
.world-character :is([data-talk=sprite], [data-talk=golem]) .story-cast{height:var(--creature-art)}
.world-character:has([data-talk=sprite], [data-talk=golem]) .character-name{font-size:11px;line-height:20px;padding:0 6px;border-radius:6px;background:#18382ee6}
@media(max-width:480px){.world-character:has([data-talk=sprite], [data-talk=golem]){--creature-width:56px;--creature-height:76px;--creature-art:52px}}
@keyframes character-talk{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}
@media(max-width:600px){.story-stage .character-name{font-size:11px}.story-stage .character-actor{height:48%}.story-stage .scene-creature{height:43%}.compact-stage .character-name{font-size:10px}.compact-stage .character-actor{height:82%;bottom:5%}.character-dialogue strong{font-size:18px}}
.still-stories .character-button *,.story-paused .character-button *{animation:none!important}
@media(prefers-reduced-motion:reduce){.character-button *{animation:none!important}}
.story-scenery{min-height:100%}

/* Bring story conversations into the foreground without enlarging the dialog. */
.story-stage:not(.compact-stage){border-radius:12px;box-shadow:inset 0 0 0 1px #f2dfac55}
.story-stage:not(.compact-stage)::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#132d285c,transparent 32%,transparent 60%,#132d2866);z-index:1}
.story-stage:not(.compact-stage) .story-place{top:14px;left:14px;max-width:calc(100% - 28px);box-sizing:border-box;border-radius:8px;background:#173729eb;line-height:1.4}
.story-stage:not(.compact-stage):has(.memory-lights) .story-place{max-width:calc(100% - 132px)}
.story-stage:not(.compact-stage) .scene-player{left:9%;width:26%;height:47%;bottom:calc(7% + 32px)}
.story-stage:not(.compact-stage) .character-actor{display:grid;grid-template-rows:minmax(44px,1fr) auto;gap:4px;width:28%;height:68%;bottom:7%}
.story-stage:not(.compact-stage) .scene-companion{right:35%}
.story-stage:not(.compact-stage) .scene-creature{right:5%;height:60%}
.story-stage:not(.compact-stage) .scene-creature:has(.sunseal-cast){right:4%;width:32%;height:74%}
.story-stage:not(.compact-stage) .character-button{position:relative;height:100%;min-height:44px;z-index:1}
.story-stage:not(.compact-stage) :is(.scene-player,.character-actor)::before{content:"";position:absolute;bottom:28px;left:16%;width:68%;height:12px;background:radial-gradient(ellipse,#142a21a6,transparent 70%);pointer-events:none}
.story-stage:not(.compact-stage) .scene-player::before{bottom:-4px}
.story-stage:not(.compact-stage) .character-actor .character-name{position:static;transform:none;width:fit-content;max-width:100%;margin:0 auto;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere;line-height:1.25;padding:4px 8px;border:1px solid #d9ca9b66;border-radius:6px;background:#173729ed;text-shadow:none}
.story-stage:not(.compact-stage) .memory-lights{left:auto;right:14px;top:14px;gap:5px;padding:5px;border:1px solid #e4ce9380;border-radius:8px;background:#173729eb;z-index:3}
.story-stage:not(.compact-stage) .memory-lights span{display:grid;place-items:center;padding:3px;border-radius:4px;background:transparent}
.story-stage:not(.compact-stage) .memory-lights .icon{width:18px;height:18px}
.story-stage:not(.compact-stage) .memory-lights .lit{background:#907033;box-shadow:none}
@media(max-width:600px){
 .story-stage:not(.compact-stage) .scene-player{left:3%;width:28%;height:43%}
 .story-stage:not(.compact-stage) .scene-companion{right:35%;width:32%;height:62%}
 .story-stage:not(.compact-stage) .scene-creature{right:1%;width:32%;height:57%}
 .story-stage:not(.compact-stage) .character-name{padding:3px 5px}
}

.appearance-preview .detailed-avatar{width:96px;height:128px}.scene-player .detailed-avatar{filter:drop-shadow(0 2px 1px #243b3550)}

/* Poppins is bundled locally so character labels and controls match on every device. */
html,h1,h2,h3,.brand,.brand small,.landing-copy .subtitle,.character-identity strong,.speaker-line strong,.story-place,.character-name,.character-dialogue strong{font-family:Poppins,system-ui,sans-serif}
.character-dialogue strong{font-weight:600}

/* Learning cues use shape, position and labels as well as colour. */
.learning-clock{margin:20px auto;text-align:center}.learning-clock>svg{width:min(100%,240px);height:auto;color:#244c42}.clock-face{fill:#fffaf0;stroke:#244c42;stroke-width:3}.clock-tick{stroke:#244c42;stroke-width:1}.learning-clock text{font:600 14px Poppins,system-ui;fill:#244c42}.clock-hour{stroke:#244c42;stroke-width:8;stroke-linecap:round}.clock-minute{stroke:#8c431f;stroke-width:3;stroke-linecap:round}.learning-clock figcaption{display:grid;gap:6px;font-size:14px}.learning-signs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.learning-signs>div{display:grid;justify-items:center;gap:8px;padding:12px;border:2px solid #496f55;border-radius:12px;background:#fffaf0;color:#244c42;text-align:center}.learning-signs svg{width:100%;max-width:120px;fill:currentColor}.learning-signs span{overflow-wrap:anywhere}.quest-complete{text-align:center;padding:20px;background:#eaf3df;border:2px solid #496f55;border-radius:16px;color:#244c42}.completion-seal{display:inline-grid;place-items:center;width:64px;height:64px;border:3px solid currentColor;border-radius:50%}.completion-seal .icon{width:40px;height:40px}.quest-complete h3{margin:12px 0 8px}

.game-shell[data-region=whisperwood] .world-map{background-image:url('whisperwood.webp')}
@media(max-width:600px){.map-marker{white-space:normal;max-width:100px;font-size:10px;line-height:1.25;padding:6px}.map-marker .icon{width:16px;height:16px}.topbar .tools{flex-wrap:wrap;justify-content:flex-end}.world-regions li{flex-wrap:wrap;gap:8px}.world-regions button{max-width:100%;white-space:normal}}

/* Keep task actions in view; only the content pane scrolls. When enlarged text or a short
   landscape screen cannot fit the header, a readable content pane and the actions, the whole
   card scrolls instead, so no control is ever clipped. */
.overlay.with-actions{overflow:hidden;max-height:calc(100svh - 16px)}
.with-actions .dialog-card{display:flex;flex-direction:column;max-height:calc(100svh - 20px);padding:16px;overflow:auto}
.with-actions .dialog-head{flex-shrink:0;position:static;margin:0 0 8px;padding:0}
.with-actions .dialog-scroll{flex-shrink:1;min-height:min(8rem,30svh);overflow:auto;overscroll-behavior:contain;padding:4px;scroll-padding:12px}
.dialog-scroll .story-stage{width:100%;margin-left:0;margin-right:0}
.with-actions .dialog-actions{position:static;flex-shrink:0;margin:0;padding:12px 0 0;gap:8px;border-top:1px solid #c9c49e;background:#f7f0df;box-shadow:none}
.with-actions .dialog-actions button{flex:1;min-height:46px}
.puzzle-scenery{margin:0 0 8px}
.puzzle-scenery .section-heading{min-height:44px;display:block;padding:12px 4px;color:#344d34}
.puzzle-overlay h2{font-size:24px;margin-bottom:10px}
.puzzle-overlay .puzzle-prompt{padding:12px;font-size:20px;line-height:1.4;margin:10px 0}
.puzzle-overlay .hint-box{padding:10px;margin:10px 0}
.puzzle-overlay .answer-grid{margin:10px 0;gap:8px}
.puzzle-overlay .answer-grid button{min-height:48px}
@media(max-width:480px){.with-actions .dialog-actions{display:grid;grid-template-columns:1fr 1fr}.with-actions .dialog-actions .primary{grid-column:1/-1;grid-row:1}.with-actions .dialog-actions button{padding:8px;font-size:14px}.with-actions .dialog-card{padding:10px}.puzzle-overlay .puzzle-prompt{font-size:18px}}

.game-shell[data-region=sunstone] .world-map{background-image:url('sunstone.webp')}
.story-stage[data-setting=sunstone] .story-scenery{background-image:url('sunstone.webp');background-size:cover;background-position:center}

.game-shell[data-region=lanternfen] .world-map{background-image:url('lanternfen.webp')}
.story-stage[data-setting=lanternfen] .story-scenery{background-image:url('lanternfen.webp');background-size:cover;background-position:center}

.game-shell[data-region=emberpeak] .world-map{background-image:url('emberpeak.webp')}
.story-stage[data-setting=emberpeak] .story-scenery{background-image:url('emberpeak.webp');background-size:cover;background-position:center}

.game-shell[data-region=crown] .world-map{background-image:url('crown.webp')}
.story-stage[data-setting=crown] .story-scenery{background-image:url('crown.webp');background-size:cover;background-position:center}

.character-dialogue-head{flex-wrap:wrap}.character-dialogue strong{white-space:normal;overflow-wrap:anywhere}
.story-stage .scene-creature .character-name{max-width:100px;white-space:normal;line-height:1.2}

/* Spoken option: a steady glow and outline, independent of answer selection or focus. */
#hw-dialog button.is-reading{outline:3px solid #967027;outline-offset:2px;box-shadow:0 0 0 5px #e4bd6540,0 0 18px #d7a73c80;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* Wooden challenge stamps: category remains visible independently of completion. */
.challenge-stamp{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;background:#e8d6b3;border:2px solid #85623e;border-radius:7px;color:#654729;box-shadow:1px 2px 0 #755735}
.challenge-stamp svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.challenge-types{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.challenge-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;line-height:1.4}
.challenge-legend{padding:0 16px 8px;background:#10271e;color:#f6ebd3}
.challenge-legend .section-heading{min-height:44px;padding:12px 0;font-size:12px}
.map-marker .map-challenges{display:flex;gap:4px;flex-wrap:wrap;max-width:92px}
.map-marker .challenge-stamp{display:inline-flex;width:26px;height:26px;max-width:none}
.map-marker .challenge-stamp svg{width:20px;height:20px}
.map-marker .map-complete{display:grid;place-items:center;position:absolute;right:-7px;top:-9px;width:19px;height:19px;border:1px solid #71875c;border-radius:50%;background:#eef3da;color:#345335;font-size:12px}
.map-marker.compact{min-width:44px;--marker-edge:46px}
.map-marker.compact .map-marker-name{display:none}
.challenge-stages{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:10px 0;padding:0}
.challenge-stages li{display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid #c8bda0;border-radius:10px;font-size:12px;color:#40543c}
.challenge-stages li.done{border-color:#8fa47a;background:#eef2e2}
.challenge-stages .stage-done{color:#345335;font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.challenge-stages li[aria-current=step]{border:2px solid #466c4e;padding:5px 8px;background:#e5ecd9;font-weight:600}
@media(max-width:600px){.map-marker{width:auto;min-width:44px;max-width:92px;padding:5px}.map-marker .map-challenges{max-width:80px;gap:2px}.map-marker .challenge-stamp{width:24px;height:24px}.map-marker .challenge-stamp svg{width:18px;height:18px}.map-marker .map-marker-name{display:none}.challenge-stages{gap:6px}.challenge-stages li{font-size:11px;padding:5px}.challenge-stages li[aria-current=step]{padding:4px}}

.map-marker{--marker-edge:90px;width:max-content;max-width:180px;white-space:normal;flex-wrap:wrap;justify-content:center}
.map-marker .map-marker-name{min-width:0;overflow-wrap:anywhere}
@media(min-width:1200px){
 .map-marker{--marker-edge:120px;max-width:240px;flex-wrap:nowrap}
 .map-marker .map-challenges{flex-shrink:0}
 .map-marker .map-marker-name{overflow-wrap:normal;text-align:left}
}
@media(max-width:600px){.map-marker{--marker-edge:46px;width:auto;max-width:92px}}

.companion-chats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:8px 16px 14px;background:#10271e}
.companion-chat{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:6px;background:transparent;border-color:#c6af7655;color:#f6ebd3;font-size:12px;white-space:normal}
.companion-face{display:block;position:relative;flex:none;width:30px;height:38px}
.companion-face .story-cast{display:block;width:100%;height:100%}
.companion-chat.is-speaking{border-color:#e8d6b3;text-decoration:underline;text-underline-offset:4px}
.story-outcome{padding:12px 14px;background:#eae4d0;border-radius:10px;border-left:3px solid #937344}
/* Small screens keep the four companions in one row, face above name, so the journal stays close. */
@media(max-width:480px){.companion-chats{gap:6px;padding:6px 12px 10px}.companion-chat{flex-direction:column;gap:2px;padding:4px 2px;font-size:11px}.companion-chat .companion-face{width:24px;height:30px}.companion-chat.local-resident{flex-direction:row;gap:7px}}

/* Quiet breathing, followed by one brief gesture; labels and hit areas stay still. */
[data-talk]{--idle-turn:2deg;--idle-lift:-2px;--idle-period:19s;--idle-delay:-3s}
[data-talk=dragon],[data-talk=drake]{--idle-turn:-3deg;--idle-lift:-4px;--idle-period:21s;--idle-delay:-7s}
[data-talk=owl]{--idle-turn:5deg;--idle-lift:-1px;--idle-period:23s;--idle-delay:-12s}
[data-talk=apprentice]{--idle-turn:-3deg;--idle-period:25s;--idle-delay:-5s}
[data-talk=knight]{--idle-turn:4deg;--idle-lift:1px;--idle-period:27s;--idle-delay:-17s}
[data-talk*=wisp],[data-talk=sprite]{--idle-turn:-4deg;--idle-lift:-5px;--idle-period:22s;--idle-delay:-9s}
[data-talk*=golem]{--idle-turn:2deg;--idle-lift:-1px;--idle-period:29s;--idle-delay:-21s}
[data-talk] .story-cast{transform-origin:50% 90%;transition:scale .18s ease,translate .18s ease}
[data-talk]:not(.is-speaking) .story-cast{animation:character-idle var(--idle-period) ease-in-out var(--idle-delay) infinite}
[data-talk]:active .story-cast{scale:.94 1.03;translate:0 -3px}
.companion-chat.is-speaking .story-cast{animation:character-talk .7s ease-in-out infinite}
@keyframes character-idle{
  0%,20%,40%,60%,80%,100%{transform:translateY(0) rotate(0) scaleY(1)}
  10%,30%,50%,70%{transform:translateY(-1px) rotate(.6deg) scaleY(1.015)}
  88%{transform:translateY(var(--idle-lift)) rotate(var(--idle-turn)) scaleY(1.02)}
  93%{transform:translateY(0) rotate(calc(var(--idle-turn) * -.5))}
  97%{transform:translateY(-1px) rotate(0)}
}
.still-stories [data-talk] .story-cast,.story-paused [data-talk] .story-cast{animation:none!important;transition:none;scale:none;translate:none}
@media(prefers-reduced-motion:reduce){[data-talk] .story-cast{animation:none!important;transition:none;scale:none;translate:none}}
.map-tools{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 8px;padding:0 12px 8px 0;background:#10271e}
.map-tools .challenge-legend{flex:1 1 80px;padding:0 0 0 16px}
.map-tools .map-motion{margin:0}
.map-motion{margin:0 0 0 12px;min-height:44px;max-width:calc(100% - 24px);padding:8px 10px;font-size:12px;white-space:normal}

/* Local residents have separate transparent art, never a recoloured shared creature. */
.story-cast.resident-cast{background-size:contain;background-position:center bottom;background-repeat:no-repeat}
.resident-mallow{background-image:url('resident-mallow.webp')}
.resident-tock{background-image:url('resident-tock-fox.webp')}
.resident-nessa{background-image:url('resident-nessa.webp')}
.resident-brindle{background-image:url('resident-brindle.webp')}
.resident-nimbus{background-image:url('resident-nimbus.webp')}
[data-talk=mallow]{--idle-period:23s;--idle-delay:-5s;--press-turn:-3deg}
[data-talk=tock]{--idle-period:27s;--idle-delay:-13s;--press-turn:4deg}
[data-talk=nessa]{--idle-period:25s;--idle-delay:-9s;--press-turn:-4deg}
[data-talk=brindle]{--idle-period:29s;--idle-delay:-17s;--press-turn:2deg}
[data-talk=nimbus]{--idle-period:31s;--idle-delay:-21s;--press-turn:-2deg}
[data-talk=mallow]:not(.is-speaking) .story-cast{animation-name:resident-flutter}
[data-talk=tock]:not(.is-speaking) .story-cast{animation-name:resident-listen}
[data-talk=nessa]:not(.is-speaking) .story-cast{animation-name:resident-greet}
[data-talk=brindle]:not(.is-speaking) .story-cast{animation-name:resident-warmth}
[data-talk=nimbus]:not(.is-speaking) .story-cast{animation-name:resident-float}
[data-talk] .resident-cast{transition:scale .18s ease,translate .18s ease,rotate .18s ease}
[data-talk]:active .resident-cast{rotate:var(--press-turn,0deg)}
@keyframes resident-flutter{0%,20%,40%,60%,80%,100%{transform:translateY(0) scaleX(1)}10%,30%,50%,70%{transform:translateY(-1px)}86%,92%{transform:translateY(-3px) scaleX(.96) rotate(-1deg)}89%,95%{transform:translateY(-2px) scaleX(1.025) rotate(1deg)}}
@keyframes resident-listen{0%,20%,40%,60%,80%,100%{transform:rotate(0)}10%,30%,50%,70%{transform:translateY(-1px)}87%{transform:rotate(-4deg)}94%{transform:rotate(3deg)}}
@keyframes resident-greet{0%,20%,40%,60%,80%,100%{transform:translateY(0) rotate(0)}10%,30%,50%,70%{transform:translateY(-1px)}86%,94%{transform:translateY(-2px) rotate(-3deg)}90%{transform:translateY(-2px) rotate(3deg)}}
@keyframes resident-warmth{0%,20%,40%,60%,80%,100%{transform:translateY(0);filter:brightness(1)}10%,30%,50%,70%{transform:translateY(-1px);filter:brightness(1)}89%{transform:rotate(2deg);filter:brightness(1.12) drop-shadow(0 0 3px #e8af7555)}}
@keyframes resident-float{0%,20%,40%,60%,80%,100%{transform:translateY(0) rotate(0)}10%,30%,50%,70%{transform:translateY(-1px)}88%{transform:translateY(-4px) rotate(-2deg)}94%{transform:translateY(-2px) rotate(2deg)}}
.still-stories [data-talk] .resident-cast,.story-paused [data-talk] .resident-cast{animation:none!important;transition:none;rotate:none}
@media(prefers-reduced-motion:reduce){[data-talk] .resident-cast{animation:none!important;transition:none;rotate:none}}
.companion-chat.local-resident{grid-column:1/-1;background:#f5eedb;border-color:#aa9467;color:#24372b}
.local-resident .companion-face{width:42px;height:48px}
.local-resident small{display:block;font-size:12px;font-weight:400;color:#536449;line-height:1.4}

/* Fixed discoveries blend into the scenery; focus and optional help reveal names. */
.map-secret{position:absolute;z-index:2;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;min-height:44px;padding:0;border:0;border-radius:8px;background:transparent;filter:drop-shadow(0 2px 2px #23302499)}
.map-secret svg{width:48px;height:48px;pointer-events:none}
.map-secret:hover:not(:disabled),.map-secret:focus-visible{background:#f6ebcb22}
.map-secret:focus-visible{outline:3px solid #fff0ad;outline-offset:2px}
.secret-name{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);width:max-content;max-width:130px;padding:3px 7px;border-radius:6px;background:#18382ef2;color:#fff8df;font-size:11px;line-height:1.4;pointer-events:none}
.map-secret:hover .secret-name,.map-secret:focus-visible .secret-name{display:block}
.secret-help{flex:1 1 100px;padding:0 12px 8px 16px;color:#f6ebd3;font-size:12px}
.secret-help .section-heading{min-height:44px;padding:12px 0}
.secret-help p{margin:0 0 8px;color:inherit}
@media(max-width:480px){.map-secret{width:44px;height:44px}.map-secret svg{width:38px;height:38px}}

/* Tap-only jokes: the hit area stays still and each movement finishes once. */
.map-plaything{position:absolute;z-index:2;transform:translate(-50%,-50%);width:52px;height:52px;min-height:44px;padding:0;border:0;border-radius:8px;background:transparent;filter:drop-shadow(0 2px 2px #23302499)}
.map-plaything:hover:not(:disabled){background:#f6ebcb18}
.map-plaything:focus-visible{outline:3px solid #fff0ad;outline-offset:3px}
.map-plaything svg{width:100%;height:100%;overflow:visible;pointer-events:none}
.plaything-art{transform-origin:32px 55px}
.plaything-face{opacity:0}
.is-posed .plaything-face{opacity:1}
.is-playing .plaything-art{animation:plaything-wobble 1.1s ease-in-out 1}
.is-playing[data-plaything=acorn] .plaything-art{animation-name:plaything-tumble}
.is-playing[data-plaything=pebble] .plaything-art{animation-name:plaything-hop}
.is-playing[data-plaything=frog] .plaything-art{animation-name:plaything-dance}
.is-playing[data-plaything=flower] .plaything-art{animation-name:plaything-bow}
@keyframes plaything-wobble{0%,100%{transform:none}20%{transform:scale(1.12,.82) rotate(-12deg)}45%{transform:scale(.9,1.12) rotate(14deg)}70%{transform:rotate(-7deg)}}
@keyframes plaything-tumble{0%,100%{transform:none}30%{transform:translateX(7px) rotate(65deg)}65%{transform:translateX(-4px) rotate(-25deg)}}
@keyframes plaything-hop{0%,100%{transform:none}20%{transform:scale(1.15,.8)}45%{transform:translateY(-12px) rotate(10deg)}70%{transform:scale(1.1,.9)}}
@keyframes plaything-dance{0%,100%{transform:none}20%{transform:rotate(-12deg)}40%{transform:translateY(-6px) rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(8deg)}}
@keyframes plaything-bow{0%,100%{transform:none}35%,55%{transform:rotate(35deg)}80%{transform:rotate(-8deg)}}
.still-stories .plaything-art,.story-paused .plaything-art{animation:none!important}
@media(prefers-reduced-motion:reduce){.plaything-art{animation:none!important}}
@media(max-width:480px){.map-plaything{width:44px;height:44px}}

/* Reserve the viewport for play. Long journals and enlarged content can scroll
   without moving the primary actions; very short windows retain page scrolling. */
.game-shell{height:100svh;display:grid;grid-template-rows:auto auto minmax(240px,1fr) auto;gap:10px;padding:0 0 max(8px,env(safe-area-inset-bottom))}
.game-shell .topbar{padding:8px 20px;gap:12px}
.game-shell .chapter-header{padding:0 20px;min-height:52px}
.game-shell .chapter-header h1{font-size:28px;margin:2px 0 0}
.game-shell .adventure-layout{min-height:0;grid-template-columns:minmax(0,1fr) 310px;gap:16px;padding:0 20px}
.game-shell .map-wrap{height:100%;min-height:0;display:flex;flex-direction:column;align-self:stretch;background:#10271e}
.map-canvas{container-type:size;flex:1;min-height:0;display:grid;place-items:center}
.map-canvas .world-map{container-type:inline-size;width:min(100cqw,150cqh);aspect-ratio:3/2;flex:none}
.game-shell .map-foot{min-height:44px;flex:none;padding:4px 12px;gap:4px 12px}
.game-shell .journal-panel{display:block;min-height:0;height:100%;overflow:auto;overscroll-behavior:contain;padding:16px;scroll-padding:12px}
.game-shell .journal-panel h2{font-size:22px;margin:6px 0}
.game-shell .journal-panel .progress-dots{margin:10px 0}
.game-shell .journal-panel .journal-section{margin-top:8px;padding-top:4px}
.game-shell .journal-panel button{margin-top:4px}
.game-shell .journal-panel .map-tools{display:block;padding:0;background:transparent}
.game-shell .journal-panel .secret-help,.game-shell .journal-panel .challenge-legend{padding:0;color:#354435;background:transparent}
.game-shell .journal-panel .secret-help .section-heading,.game-shell .journal-panel .challenge-legend .section-heading{font-size:12px}
.game-shell .journal-panel .companion-chats{grid-template-columns:repeat(2,minmax(0,1fr));padding:0;gap:6px;background:transparent}
.game-shell .journal-panel .companion-chat{color:#354435;border-color:#a7ad8c}
.game-shell .journal-panel .character-bar{padding:0;display:flex;flex-direction:column;align-items:stretch;gap:8px}
.game-shell .journal-panel .character-identity small,.game-shell .journal-panel .build-note,.game-shell .journal-panel .voice-note{color:#58684f}
.game-shell .journal-panel .build-note{padding:10px 0 0}
.game-shell .journal-panel .speciality-buttons{flex-wrap:wrap}
.game-shell .journal-panel .speciality-buttons button{flex:1}
/* Two equal primary actions; the view switch belongs beside the chapter title. */
.adventure-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch;padding:0 20px}
.adventure-actions>button{min-height:46px;margin:0}
.world-tabs{display:flex;gap:6px;flex-wrap:wrap}.world-tabs [aria-selected=true]{background:#e6d39b;color:#213d2e;border-color:#466c47}.game-shell .adventure-layout{grid-template-columns:minmax(0,1fr)}.game-shell [role=tabpanel][hidden]{display:none}.section-heading{font:inherit;font-weight:600;margin:12px 0}
.game-shell #map-dialogue{flex:none;max-height:35%;overflow:auto;overscroll-behavior:contain;margin:0;border-radius:0;padding:10px 14px}
.game-shell #map-dialogue p{margin:4px 0 0}
/* Marker labels respond to the actual fitted map width, not the browser width. */
@container(max-width:950px){.map-marker{--marker-edge:90px;max-width:180px;font-size:11px;padding:6px;flex-wrap:wrap}.map-marker .map-challenges{flex-shrink:1}}
@container(max-width:850px){.map-marker{--marker-edge:46px;max-width:92px;min-width:44px;padding:5px}.map-marker .map-marker-name{display:none}.map-marker .challenge-stamp{width:24px;height:24px}.map-marker .map-challenges{max-width:80px;gap:2px}}
@media(max-width:800px){
 .game-shell .adventure-layout{grid-template-columns:minmax(0,1fr);padding:0 10px}
 .game-shell .topbar{padding:6px 10px;flex-wrap:wrap}
 .game-shell .topbar .tools{margin-left:auto;gap:4px}
 .game-shell .chapter-header{padding:0 10px;min-height:42px}
 .game-shell .chapter-header .chapter-label{display:none}
 .adventure-actions{padding:0 10px}
 .adventure-actions>button{font-size:12px;padding:8px}
}
@media(max-width:480px){
 .game-shell{gap:6px}
 .game-shell .brand{font-size:20px}
 .game-shell .brand small{display:none}
 .game-shell .topbar .tools button{font-size:11px;min-height:44px}
 .game-shell .chapter-header h1{font-size:24px}
 .map-canvas .world-map{width:min(100cqw,100cqh);aspect-ratio:1}
 .game-shell .map-foot{font-size:10px}
}
/* Artwork yields space to story text before the content needs scrolling. */
.with-actions .story-stage:not(.compact-stage){height:clamp(140px,24svh,230px)}
.with-actions .dialog-card h2{font-size:26px;margin-bottom:10px}
.with-actions .character-dialogue{padding:10px 12px;margin-bottom:12px}
.with-actions .dialog-scroll>p{margin-bottom:12px}

@container(max-width:850px){
 .map-marker:not(.compact):is(:hover,:focus-visible) .map-marker-name{display:block;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;max-width:145px;padding:5px 8px;background:#142f26;border-radius:6px;color:#fff3d4;z-index:6}
}
@media(max-height:500px){
 .game-shell{gap:6px;grid-template-rows:auto auto minmax(150px,1fr) auto}
 .game-shell .topbar{padding:4px 10px}
 .game-shell .brand small,.game-shell .chapter-header .eyebrow,.game-shell .chapter-label{display:none}
 .game-shell .chapter-header{padding:0 10px;min-height:32px}
 .game-shell .chapter-header h1{font-size:22px}
 .game-shell .adventure-layout{grid-template-columns:minmax(0,1fr);padding:0 10px}
 .adventure-actions{padding:0 10px}
}
/* A quieter arrival: artwork, one invitation, one primary action. */
.landing-body{gap:clamp(28px,6vw,90px);grid-template-columns:minmax(0,1.3fr) minmax(300px,.85fr)}
.landing-copy h1{font-size:clamp(48px,7vw,96px);margin:18px 0 10px}
.landing-copy .subtitle{margin-bottom:28px}
.landing-copy .landing-hook{font-size:clamp(17px,1.6vw,21px);line-height:1.6}
.landing-entry{max-width:440px;width:100%;justify-self:end;text-align:center;padding:32px;background:linear-gradient(150deg,#244237ed,#142b25f5);border-color:#e9c78155;box-shadow:0 24px 80px #05191166}
.landing-seal{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;border:1px solid #e9c78166;border-radius:50%;color:#edcf91;background:#e9c7810a}
.landing-seal .icon{width:30px;height:30px}
.landing-entry h2{font-size:clamp(25px,3vw,32px);margin:0 0 10px}
.landing-entry .landing-invitation{margin-bottom:24px}
.landing-entry>.primary,.landing-entry>.quiet{width:100%}
.landing-entry .primary{min-height:52px;display:flex;align-items:center;justify-content:center;gap:14px;box-shadow:0 5px 18px #071b2240}
.landing-entry .profiles:empty{display:none}
.landing-details{margin-top:16px;text-align:left;border-top:1px solid #e9c78126}
.landing-details .section-heading{min-height:44px;display:block;align-content:center;margin-left:18px;font-size:12px;color:#c4ceb8}
.landing-details p{margin:8px 0 12px}
.landing-back{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:#c4ceb8;text-underline-offset:4px}
@media(max-width:650px){.landing-body{grid-template-columns:minmax(0,1fr);gap:24px;padding:26px 20px}.landing-copy{text-align:center}.landing-copy p{margin-left:auto;margin-right:auto}.landing-copy .subtitle{margin-bottom:16px}.landing-copy .landing-note{margin-bottom:0}.landing-entry{justify-self:center;padding:24px}.landing-seal{display:none}}
@media(max-height:500px) and (min-width:651px){.landing-body{padding:20px 4vw;gap:28px}.landing-copy h1{font-size:52px}.landing-entry{padding:20px}.landing-seal{display:none}.landing-entry .landing-invitation{margin-bottom:16px}.landing-copy .subtitle{margin-bottom:16px}.landing-copy .landing-note{margin-top:16px}}
/* Shared panel hierarchy: task first, supporting detail on request. */
.dialog-head h2{font-size:clamp(21px,2.4vw,28px);line-height:1.25;margin:0;min-width:0;overflow-wrap:anywhere}
.dialog-head>button{flex-shrink:0}
.panel-details{margin:10px 0;border-top:1px solid #b5b58a66}
.panel-details>.section-heading{min-height:44px;align-content:center;padding:10px 4px;font-size:13px;font-weight:600;color:#52654a}
.panel-details>.section-heading{color:#304a34}
.panel-details .form-grid{margin:8px 0 16px}
.panel-details .tracks{margin:8px 0 16px}
.panel-details h3{font-size:18px}
.panel-details .story-motion{margin:0 0 10px}
.puzzle-overlay .hint-ready{display:flex;align-items:center;justify-content:space-between;gap:12px;background:transparent;padding:0;border:0}
.hint-ready .hint-title{font:600 14px Poppins,system-ui,sans-serif}
.hint-ready button{margin-top:0!important;min-height:44px}
.dialog-scroll>.draft-note{border:0;margin:8px 0;color:#596d51}
.dialog-scroll>.quest-complete{padding:12px 0}
.quest-complete .completion-seal{width:54px;height:54px;margin:0 auto 10px}
.quest-complete h3{margin:8px 0}
.dialog-scroll>.reward{border:1px solid #b8c79e88;border-radius:14px;background:#e9eddc;padding:12px 16px;font-size:12px}
.dialog-scroll>.reward strong{font-size:15px}
.world-regions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.world-regions li{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:16px;padding:16px;border:1px solid #c4c9ae;border-radius:14px;background:#eef0df;min-width:0}
.world-regions li.current-region{border-color:#6b895c;background:#e2ead4}
.world-regions li>span{font-weight:600;font-size:16px;color:#344b32}
.world-regions button{width:100%;min-height:44px}
.creature-grid article{border:1px solid #c9c9a6;border-radius:16px;padding:16px;background:#fdf9ed}
.creature-grid article>.portrait{margin:0 auto 10px}
.creature-grid article>h3{margin-bottom:8px}
@media(max-width:380px){.world-regions{grid-template-columns:minmax(0,1fr)}.hint-ready{flex-wrap:wrap}.hint-ready button{flex:1}}
.dialog-scroll>.quest-complete{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;align-items:center;text-align:left;padding:14px 16px;border-width:1px}
.quest-complete .completion-seal{width:44px;height:44px;grid-column:1;grid-row:1/4;margin:0;border-width:2px}
.quest-complete .completion-seal .icon{width:28px;height:28px}
.quest-complete>h3,.quest-complete>p,.quest-complete>.challenge-types{grid-column:2;margin:0}
.quest-complete>h3{font-size:20px}
.quest-complete>p{font-size:12px}
/* One compact playback control shared by panels, objectives and dialogue. */
button.audio-button,.journal-panel button.audio-button{display:inline-grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:8px;margin:0;border-radius:50%}
.audio-button .icon{width:26px;height:26px;stroke-width:2}
.icon.solid{fill:currentColor;stroke:none}
button.audio-button.quiet{background:#fff8e7;color:#355a41;border-color:#8b9b79}
button.audio-button.quiet:hover:not(:disabled),button.audio-button.quiet[aria-pressed=true]{background:#355a41;color:#fff1cf;border-color:#355a41}
.dialog-head>h2,.dialog-head>.eyebrow{flex:1}
.dialog-head{gap:10px}
.character-dialogue-head>[data-character-name]{flex:1}
.journal-panel>.audio-button{margin-bottom:8px}
.landing-nav .trent-brand{display:block;background:#161616;border-radius:8px;padding:0;line-height:0;max-width:200px}
.landing-nav .trent-brand img{width:200px;max-width:100%;height:auto}
/* Quiet status + one compact utility group, rather than competing action cards. */
.game-shell .topbar .tools{gap:16px;flex-wrap:nowrap}
.game-shell .header-controls{display:flex;align-items:center;gap:4px;padding:3px;background:#ffffff06;border:1px solid #ffffff16;border-radius:14px}
.game-shell .header-controls button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;border:0;background:transparent;border-radius:10px;padding:8px 12px;color:#dce4d7;font-size:12px;font-weight:500}
.game-shell .header-controls button:hover{background:#ffffff0e;color:#fff}
.game-shell .header-controls .narration-toggle{padding:10px;width:44px}
.game-shell .header-controls .narration-toggle[aria-pressed=true]{color:#ffad60;background:#ff790014}
.game-shell .header-controls .narration-toggle[aria-pressed=false]{color:#a6b3a3}
.game-shell .save-label{font-size:11px;color:#a8baa5;white-space:nowrap}
.game-shell .save-label:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#9ebd8e;margin-right:7px;vertical-align:middle}
.game-shell .save-warning{color:#f2c57b}
/* A browser that cannot save is the one case worth keeping on a narrow screen. */
@media(max-width:800px){.game-shell .save-label.save-warning{display:inline}}
.game-shell .save-warning:before{background:#f2c57b}
@media(max-width:800px){.game-shell .header-controls button{padding:10px;width:44px}.game-shell .header-controls button span{display:none}}

/* Puzzle support stays together while the answer action remains outside the scrolling content. */
.puzzle-support{margin:16px 0;border:1px solid #c9c49e;border-radius:12px;background:#eee7d2;overflow:hidden}
.support-tabs{display:flex;gap:4px;padding:0 8px;background:#e8e4cd;border-bottom:1px solid #c9c49e}
.support-tabs button{flex:1;min-width:0;min-height:48px;padding:10px 6px;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;color:#58684f;font-size:13px;font-weight:500;overflow-wrap:anywhere}
.support-tabs button:hover:not(:disabled){background:#ffffff55;color:#294e36}
.support-tabs button[aria-selected=true]{border-bottom-color:#355a41;color:#294e36;font-weight:700}
.support-tabs .icon{width:18px;height:18px}
.support-tabs button:focus-visible,.support-panel:focus-visible{outline:3px solid #8c6827;outline-offset:-3px}
.support-panel{padding:16px}
.puzzle-support .hint-box,.puzzle-support .special-tool{margin:0;padding:0;border:0;background:transparent}
.puzzle-support .special-tool{font-size:14px;line-height:1.7}
.puzzle-support .special-tool button{margin:4px 8px 4px 0;min-height:44px}
.puzzle-support .hint-title{font:600 15px Poppins,system-ui,sans-serif}
.puzzle-support .hint-ready{display:block}
.puzzle-support .hint-ready button{margin-top:12px!important}
.puzzle-support .story-stage{margin:0;border-radius:8px}
.puzzle-support .character-dialogue{margin-bottom:0}
.with-actions .puzzle-actions{display:flex;flex-wrap:wrap;justify-content:flex-end}
.puzzle-actions .draft-note{flex:1 1 220px;margin:0;font-size:11px;line-height:1.6}
.with-actions .puzzle-actions .primary{flex:0 1 auto;min-width:140px}
@media(max-width:480px){.support-tabs{padding:0 4px;gap:0}.support-tabs button{font-size:12px;gap:4px;flex-direction:column;padding:8px 2px}.support-tabs .icon{width:16px;height:16px}.support-panel{padding:12px}.with-actions .puzzle-actions .primary{flex:1 1 100%}}

/* Each atlas contains nine authored places. Crop within one cell, never across neighbours. */
.story-stage[data-atlas] .story-scenery{background-size:300% 300%;background-position:var(--scene-x) var(--scene-y)}
.story-stage[data-atlas=hearthmeadow] .story-scenery{background-image:url('scenes-hearthmeadow.webp')}
.story-stage[data-atlas=whisperwood] .story-scenery{background-image:url('scenes-whisperwood.webp')}
.story-stage[data-atlas=sunstone] .story-scenery{background-image:url('scenes-sunstone.webp')}
.story-stage[data-atlas=lanternfen] .story-scenery{background-image:url('scenes-lanternfen.webp')}
.story-stage[data-atlas=emberpeak] .story-scenery{background-image:url('scenes-emberpeak.webp')}
.story-stage[data-atlas=crown] .story-scenery{background-image:url('scenes-crown.webp')}
.scene-landmark{position:absolute;z-index:1;left:43%;bottom:26%;width:21%;max-height:56%;filter:drop-shadow(0 3px 3px #24382b88);pointer-events:none}
.scene-landmark svg{display:block;width:100%;max-height:100%}
.landmark-wheel{transform-origin:50px 42px}
.is-restoring .landmark-wheel{animation:landmark-turn 1.2s ease-out 1}
@keyframes landmark-turn{from{rotate:-90deg}to{rotate:0deg}}
.still-stories .landmark-wheel,.story-paused .landmark-wheel{animation:none}
@media(prefers-reduced-motion:reduce){.landmark-wheel{animation:none!important}}
.encounter-overlay{width:min(1120px,calc(100% - 20px));max-width:none;padding:0;border-radius:18px}
.encounter-overlay .dialog-card{height:min(760px,calc(100svh - 24px));max-height:calc(100svh - 24px);padding:16px;overflow:auto;gap:0}
.encounter-overlay .dialog-head{align-items:center;gap:8px;flex-shrink:0}
.encounter-overlay .dialog-head h2{font-size:clamp(20px,2.5vw,28px);line-height:1.2;margin:0;min-width:0}
.encounter-tabs{display:flex;gap:4px;padding:0 0 8px;border-bottom:1px solid #cfc5a4;flex-shrink:0}
.encounter-tabs button{min-height:44px;padding:8px 14px;border:0;border-radius:8px;background:transparent;color:#35543c}
.encounter-tabs button[aria-selected=true]{background:#e5e6ce;box-shadow:inset 0 -3px #42674b;font-weight:600}
.encounter-story{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);flex:1;min-height:130px;overflow:hidden;padding-top:12px}
.encounter-story[hidden],.encounter-secondary[hidden]{display:none}
.encounter-view{min-width:0;overflow:auto;padding:0 12px 0 0}
.encounter-overlay .encounter-view .story-stage{width:100%;height:auto;aspect-ratio:3/2;margin:0;border-radius:12px}
.encounter-overlay .story-place{font-size:12px;max-width:calc(100% - 28px)}
.encounter-overlay .memory-lights{display:none}
.encounter-overlay .story-stage:has(.memory-lights) .story-place{max-width:calc(100% - 28px)}
.encounter-overlay .scene-player{left:1%;width:24%;height:44%;bottom:calc(7% + 32px)}
.encounter-overlay .story-stage .scene-companion{right:42%;width:31%;height:58%}
.encounter-overlay .story-stage .scene-creature{right:0;width:32%;height:59%}
.encounter-overlay .story-stage .scene-creature:has(.sunseal-cast){right:0;width:34%;height:68%}
.encounter-overlay .story-stage .character-name{font-size:12px}
.encounter-overlay .story-stage .scene-landmark{left:52%;bottom:35%;width:20%}
.scene-state{font-size:12px;line-height:1.4;color:#4c624b;margin:8px 0 12px;padding:8px 10px;background:#e8e6d4;border-radius:6px}
.encounter-body{overflow:auto;overscroll-behavior:contain;min-width:0;padding:0 8px 16px 12px;scroll-padding:12px;outline-offset:-2px}
.encounter-body>h3{margin:0 0 12px;font-size:22px;line-height:1.3}
.encounter-body>p{line-height:1.6;margin:0 0 16px}
.encounter-secondary{flex:1;overflow:auto;min-height:130px;padding:16px 8px}
.encounter-secondary h3{margin-top:0}
.encounter-secondary>button{display:block;margin:12px 0;min-height:44px}
.encounter-overlay .dialog-actions{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0;padding-top:10px;margin-top:4px}
.encounter-overlay .dialog-actions button{min-height:48px;padding:10px 14px;font-size:14px;flex:1 1 150px}
.encounter-overlay .dialog-actions .primary{flex:2 1 200px}
.encounter-overlay .dialog-actions button[data-map-target]{flex:2 1 240px}
.encounter-overlay .dialog-actions [data-do=rest]{background:#f7f0df;color:#35583e;border:1px solid #9caa8a}
.task-step{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#637251;margin:0 0 10px!important}
.task-surface{border:1px solid #c5ba94;border-radius:14px;background:#f1ead6;padding:14px;margin-bottom:12px;position:relative;overflow:hidden}
.task-object{float:right;width:58px;margin:0 0 8px 12px;opacity:.9}
.task-object svg{width:100%;height:auto;display:block}
.task-location{font-size:12px;color:#596b50;margin:0 0 10px;line-height:1.4}
.task-surface .puzzle-prompt{background:transparent;padding:0;border:0;font-size:18px;line-height:1.5;color:#263f2e;margin:0 0 16px}
.task-work{min-width:0}
.task-surface[data-object=wheel],.task-surface[data-object=water],.task-surface[data-object=boat]{background:#e7eee3;border-color:#9cb5a1}
.task-surface[data-object=inscription],.task-surface[data-object=gate],.task-surface[data-object=beacon]{background:#e7e1cf;border-color:#baaa81}
.task-surface[data-object=message],.task-surface[data-object=shelves]{background:#f3e8cf;border-color:#c6aa7b}
.task-surface .answer-grid{clear:both;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.task-surface .answer-grid:has(.answer-vessel){grid-template-columns:repeat(3,minmax(0,1fr))}
.contextual-answers button{min-height:48px;padding:10px;border:2px solid #c5c9ac;border-radius:8px;background:#fffcef;display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.4;color:#2a4632}
.contextual-answers button:has(.answer-vessel){flex-direction:column}
.contextual-answers button[aria-pressed=true]{border-color:#355b3c;background:#d7e6c8;box-shadow:inset 0 0 0 1px #355b3c}
.contextual-answers .answer-vessel{width:48px;height:54px}
.answer-seal{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:1px solid #b69b60;border-radius:50%;background:#e6d3a1}
.answer-seal .icon{width:20px;height:20px}
.resolved-answer{clear:both;display:flex;align-items:center;gap:8px;border:1px solid #a6b595;background:#e2ebd5;border-radius:8px;padding:10px 12px;font-weight:600;line-height:1.5}
.encounter-body .feedback{margin:10px 0;line-height:1.5}
.encounter-body .puzzle-support{margin:12px 0 0}
.encounter-body .hint-box{padding:12px;margin:0}
.encounter-body .hint-box p{margin:0 0 10px}
.encounter-body .hint-box button{min-height:44px}
.encounter-body .support-tabs button{min-width:44px}
.encounter-body .ordering-board .piece-bank button{background:#fff6dd;border:2px solid #bca77d;border-radius:4px 12px 5px 9px;min-height:44px}
.encounter-body .ordering-board ol{clear:both}
.encounter-body .number-board{clear:both}
.encounter-body .learning-clock{clear:both}
.map-marker.map-destination{outline:4px solid #ffdf91;outline-offset:5px;box-shadow:0 0 0 8px #203f2ed9}
@media(max-width:680px){
 .encounter-overlay{width:calc(100% - 12px);border-radius:12px}
 .encounter-overlay .dialog-card{padding:10px;height:calc(100svh - 16px);max-height:calc(100svh - 16px)}
 .encounter-tabs button{flex:1;padding:6px 8px;font-size:13px}
 .encounter-story{display:flex;flex-direction:column;padding-top:8px;min-height:150px}
 .encounter-view{flex-shrink:0;padding:0;overflow:visible}
 .encounter-overlay .encounter-view .story-stage{height:clamp(128px,20svh,170px);aspect-ratio:auto}
 .encounter-overlay .story-stage .scene-player{height:42%;bottom:calc(7% + 30px)}
 .encounter-overlay .story-stage .character-actor{min-height:82px}
 .encounter-overlay .story-stage .character-name{font-size:11px}
 .encounter-overlay .story-place{top:8px;left:8px;padding:4px 8px;font-size:11px}
 .encounter-overlay .scene-state{margin:4px 0 8px;padding:5px 8px;font-size:11px}
 .encounter-body{padding:4px 2px 12px;min-height:80px;flex:1}
 .encounter-body>h3{font-size:19px}
 .task-surface{padding:10px;border-radius:10px}
 .task-object{width:38px;margin-left:8px}
 .task-surface .puzzle-prompt{font-size:16px;margin-bottom:12px}
 .task-step{margin-bottom:6px!important}
 .contextual-answers .answer-vessel{width:34px;height:38px}
 .encounter-overlay .dialog-actions{display:grid;grid-template-columns:1fr 1fr}
 .encounter-overlay .dialog-actions .primary{grid-column:auto;grid-row:auto}
 .encounter-overlay .dialog-actions button{padding:8px;font-size:13px}
 .encounter-overlay .dialog-actions button[data-map-target],.encounter-overlay .dialog-actions button[data-do=world]{grid-column:1/-1}
 .encounter-view .character-dialogue{max-height:100px;overflow:auto;padding:8px;margin:4px 0}
}
@media(max-height:500px) and (min-width:681px){
 .encounter-overlay .dialog-card{padding:8px}
 .encounter-story{grid-template-columns:33% 67%;padding-top:6px;min-height:80px}
 .encounter-overlay .encounter-view .story-stage{height:150px;aspect-ratio:auto}
 .encounter-overlay .dialog-head h2{font-size:20px}
 .encounter-tabs{padding-bottom:4px}
 .scene-state{margin:4px 0;font-size:11px;padding:4px}
 .encounter-view .character-dialogue{padding:6px}
}
/* The moving wheel sits on the painted mill axle. */
.encounter-overlay .story-stage[data-object=wheel] .scene-landmark{left:36%;top:8%;bottom:auto;width:24%}

.encounter-overlay .dialog-actions > button[hidden]{display:none}