:root{font-family:Arial,Helvetica,sans-serif;color:#4c513d;background:#303b32;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 45%,#788477,#27392f)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #a07230;outline-offset:3px}svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.defs{position:absolute;width:0;height:0}[hidden]{display:none!important}#app{position:relative;isolation:isolate;width:min(100vw,60dvh);height:100dvh;overflow:clip;box-shadow:0 0 100px #10201e66}.sky{position:absolute;inset:-8%;z-index:-1;background:radial-gradient(ellipse at 24% 16%,#fff5cd 0%,#e4e6cb 30%,#b7c9b7 65%,#94b1a1);transform:translate(var(--parallax,0px),0)}#garden{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}header{position:absolute;z-index:4;inset:max(24px,env(safe-area-inset-top)) 23px auto;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}header button{pointer-events:auto}.eyebrow{font-size:8px;letter-spacing:2.5px;font-weight:600;margin:0 0 9px;color:#77795c}h1{font:26px Georgia,serif;font-weight:normal;margin:0;text-shadow:0 1px 10px #fff4d4}h2{font:29px/1.15 Georgia,serif;font-weight:normal;margin:10px 0 14px}p{line-height:1.55}.round{width:47px;height:47px;display:grid;place-items:center;border-radius:50%;border:1px solid #fff7deaa;background:#fff9e6b0;backdrop-filter:blur(10px);box-shadow:0 4px 20px #3c513515;color:#596048}.round svg{width:23px;height:23px}.round[aria-pressed=false]{opacity:.68}footer{position:absolute;inset:auto 22px max(24px,env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center;pointer-events:none;z-index:4}footer button{pointer-events:auto}.atlas-button{width:55px;height:55px;background:#fff8dfdb;box-shadow:0 6px 25px #33503928}.atlas-button svg{width:28px;height:28px}#pockets{display:flex;gap:8px}.pocket{width:40px;height:40px;border:0;border-radius:14px;background:#fff7e18c;display:grid;place-items:center}.pocket svg{width:23px;height:23px}.save-state{font-size:10px;margin-left:auto;color:#52694f;max-width:150px;text-align:right}#targets{position:absolute;inset:0;pointer-events:none;z-index:2}.hotspot{position:absolute;width:48px;height:48px;transform:translate(-50%,-50%);border:0;background:none;border-radius:50%;pointer-events:auto;display:grid;place-items:center;padding:0}.hotspot span{display:grid;place-items:center;width:20px;height:20px;background:#fff7d2d9;color:#9b7638;border:1px solid #fff9dd;border-radius:50%;box-shadow:0 0 18px #fff5d289;transition:transform .2s}.hotspot svg{width:14px;height:14px;stroke-width:1.7}.hotspot.exit span{width:26px;height:26px;background:#f9f2d3a8;color:#6a7859}.hotspot:hover span,.hotspot:focus-visible span{transform:scale(1.2);background:#fff5d6}.hotspot.blocked span{color:#938973;background:#eee5c8a6}.hotspot.shake{animation:shake .35s ease}.hotspot:disabled{pointer-events:none;opacity:.25}#veil{position:absolute;inset:0;background:#eee9cc;opacity:0;pointer-events:none;z-index:6;transition:opacity .3s}#veil.cover{opacity:1}#loading{position:absolute;inset:0;z-index:10;display:grid;place-content:center;justify-items:center;background:#e7e6d0;color:#626f4f;font:16px Georgia,serif}.sprout{width:55px;height:55px;display:grid;place-items:center;border:1px solid #b7bc9566;border-radius:50%;animation:breathe 2s ease-in-out infinite}.sprout svg{width:29px;height:29px}#retry,.paper-button{border:1px solid #a4aa87;background:#627759;color:#fff9e2;padding:14px 20px;border-radius:12px;font-size:13px}.paper-button{width:100%;margin:10px 0 3px;min-height:46px}.text-button{background:none;border:0;text-decoration:underline;padding:14px;font-size:12px;min-height:44px}dialog{width:min(390px,calc(100% - 32px));max-height:calc(100dvh - 48px);border:1px solid #f8f2d6;border-radius:24px;padding:32px 27px 23px;background:radial-gradient(ellipse at top left,#fff9e3,#e8dfbd);color:#525a41;box-shadow:0 25px 80px #183a3b4d;overflow:auto}dialog::backdrop{background:#22372b5e;backdrop-filter:blur(7px)}dialog p{font-size:13px}dialog .close{position:absolute;right:12px;top:12px;width:35px;height:35px;background:transparent;border:0;box-shadow:none}dialog .close svg{width:18px}#map{width:100%;margin:2px 0 0;overflow:visible}#map g{opacity:.22}#map g.known{opacity:1}#map g circle{fill:#eee6c9;stroke:#a6ac8c;stroke-width:1}#map g.current circle{fill:#dae2bf;stroke:#627854;stroke-width:2}#map g path{stroke:#708362;stroke-width:1.5}#map text{stroke:none;fill:#617051;text-anchor:middle;font:11px Georgia,serif}#map g:not(.known) text{visibility:hidden}.map-trail{stroke:#899875;stroke-width:1.5;stroke-dasharray:3 6}.map-trail.secret{opacity:.16}.map-trail.open{opacity:1;stroke:#70834f;stroke-width:2;stroke-dasharray:none}.journal{font-family:Georgia,serif;border-top:1px solid #b3b38a55;padding-top:15px;color:#74775c}.book-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 14px;margin-top:15px}.book-links a,.book-links button{display:inline-flex;align-items:center;justify-content:center;appearance:none;font:inherit;font-size:10px;line-height:16px;margin:0;padding:12px 0;min-height:40px;color:#778067;background:none;border:0;text-decoration:underline}#finish-dialog{text-align:center}.earned{width:72px;height:72px;margin:4px auto 25px;border-radius:50%;background:#e1d7a5;display:grid;place-items:center;color:#897037}.earned svg{width:40px;height:40px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@keyframes breathe{50%{transform:translateY(-5px)}}@keyframes shake{25%{translate:-4px}75%{translate:4px}}@media(max-width:375px){header{left:17px;right:17px}h1{font-size:23px}.eyebrow{font-size:7px;letter-spacing:2px}dialog{padding:28px 20px 18px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

header::before{content:"";position:absolute;inset:-35px -25px -25px;z-index:-1;background:linear-gradient(#f5edcee8,#f5edce8c 65%,transparent);pointer-events:none}

/* Discovery cues are neutral, small and local. Unmarked objects remain tappable. */
.hotspot:not(.exit) span{opacity:0;width:7px;height:7px;background:#fff5d3;border:0;box-shadow:0 0 7px #ffe9a4;transition:opacity .3s,transform .2s}
.hotspot:not(.exit) span svg{display:none}
.hotspot:not(.exit).near span,.hotspot:not(.exit):focus-visible span{opacity:.8}
.hotspot:not(.exit).using span{background:#ffe29a;box-shadow:0 0 10px #ffdc7c;transform:scale(1.35)}
.hotspot:not(.exit):focus-visible{outline:2px solid #cfb270;outline-offset:-10px}
.hotspot.exit svg{transform-origin:center}
.pocket[aria-pressed=true]{background:#fff0bb;outline:2px solid #8e7842;box-shadow:0 0 18px #f9e0a599;transform:translateY(-3px)}

/* More finds fit naturally beside the atlas; narrow phones can scroll the row. */
#pockets{min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:4px 3px;scrollbar-width:thin;scrollbar-color:#a9aa8555 transparent;overscroll-behavior-x:contain}
.pocket{flex:0 0 44px;width:44px;height:44px}
.atlas-button{flex-shrink:0}
.save-state:empty{display:none}

/* Two small tools keep the portrait stage clear. */
.scene-tools{display:flex;gap:7px;flex:0 0 auto;align-self:flex-start}header>div:first-child{min-width:0}header h1{font-size:clamp(21px,5.6vw,26px)}#zoom:disabled{opacity:.4}#sound:disabled{opacity:.5}.music-setting{display:flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;font-size:13px}.music-setting input{width:18px;height:18px;accent-color:#627759}#atlas-dialog summary{cursor:pointer;padding:10px 0}

/* Dialogue and object menus live in garden-story-ui.css. */




/* The lantern quarter keeps the same clear portrait controls in warm twilight. */
#app.dusk .sky{background:radial-gradient(ellipse at 30% 20%,#a7a0b4,#657c90 60%,#3a586d)}
#app.dusk header::before{background:linear-gradient(#d6cfdfeb,#d6cfdf70 65%,transparent)}
#app.dusk h1{text-shadow:0 1px 12px #e7d8c0}#app.dusk .eyebrow{color:#67677c}
#night-map{width:100%;overflow:visible}#night-map g{opacity:.20}#night-map g.known{opacity:1}#night-map g circle{fill:#eee5cb;stroke:#9c9aad;stroke-width:1}#night-map g.current>circle:first-child{fill:#e8d2a5;stroke:#9c7950;stroke-width:2}#night-map text{stroke:none;fill:#696677;text-anchor:middle;font:11px Georgia,serif}#night-map g:not(.known) text{visibility:hidden}
#atlas-regions{display:flex;gap:8px;margin:16px 0 8px}#atlas-regions button{min-height:44px;border:1px solid #aaa18b;background:transparent;padding:8px 14px;border-radius:12px;font-size:12px}#atlas-regions button[aria-pressed=true]{background:#657464;color:#fff6df}

/* The same journey, with a different atmosphere beyond each set. */
#app[data-room=shed] .sky{background:radial-gradient(ellipse at 20% 15%,#fff0cc,#ddc9aa 65%,#a39c82)}
#app[data-room=post] .sky{background:radial-gradient(ellipse at 30% 12%,#f3edcc,#c9d2b0 48%,#8ea586)}
#app[data-room=court] .sky{background:radial-gradient(ellipse at 30% 10%,#fff3cd,#ddd6b8 65%,#a9b6a5)}
#app[data-room=terrace] .sky{background:linear-gradient(#afcbd7,#dae6df 45%,#f3dfb4 80%,#c9cba9)}
#app[data-room=glasshouse] .sky{background:radial-gradient(ellipse at 35% 10%,#eff2cc,#bfdbca 60%,#91afa1)}

.sound-settings .music-setting{margin-top:0}.music-volume{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-top:6px}.music-volume output{font-variant-numeric:tabular-nums;color:#627759}#music-volume{width:100%;height:36px;margin:0;accent-color:#627759}.sound-settings p{font-size:12px;line-height:1.5;color:#73785c;margin:0 0 12px}#music-volume:focus-visible{outline:2px solid #627759;outline-offset:3px}

/* Indoor light continues past the cutaway; the remaining edge tone matches the room. */
#app[data-room=theatre] .sky{background:radial-gradient(ellipse at 50% 25%,#8b6762,#463b3f 75%,#302f35)}
#app[data-room=loft] .sky{background:radial-gradient(ellipse at 35% 20%,#c5ad83,#74644f 65%,#434347)}
#app[data-room=theatre] header::before{background:linear-gradient(#e5d5bae8,#e5d5ba55 65%,transparent)}
#app[data-room=loft] header::before{background:linear-gradient(#e8d6b2eb,#e8d6b25c 65%,transparent)}

/* Voice replay belongs to the conversation, not a separate panel. */
#dialogue-replay{display:grid;place-items:center;flex:0 0 44px;width:44px;min-height:44px;padding:8px;border:1px solid #b9ad8259;border-radius:50%;background:#efe5c871;color:#6a7358;margin-left:auto;}
#dialogue-replay[hidden]{display:none}#dialogue-replay svg{width:22px;height:22px}#dialogue-replay:focus-visible{outline:2px solid #657b5b;outline-offset:3px}

/* Pointer taps are resolved in the scene so dragging over a prop still rotates.
   Buttons remain available to Tab/Enter and assistive technology. */
#targets .hotspot{pointer-events:none}
.hotspot:not(.exit).approaching span,.hotspot:not(.exit).hovered span{opacity:1;transform:scale(1.35);background:#ffe7a7;box-shadow:0 0 14px #ffdda6}