@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/dm-sans-regular.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/dm-sans-medium.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/dm-sans-semibold.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/dm-sans-bold.ttf') format('truetype')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500 700;font-display:swap;src:url('/assets/fonts/fraunces-medium.ttf') format('truetype')}
:root{font-family:'DM Sans',sans-serif;color:#283c2e;background:#f4f2e8;font-synthesis:none;--paper:#fffdf1;--green:#304b37;--yellow:#f2c66b}*{box-sizing:border-box}body{margin:0;height:100dvh;min-height:540px;display:flex;flex-direction:column;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #d39036;outline-offset:4px}button{border:0}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-defs{position:absolute;width:0;height:0}.header{height:91px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:25px;flex-shrink:0}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}.brand-mark{background:var(--green);color:#f7efcf;width:39px;height:47px;border-radius:18px 18px 8px 8px;display:grid;place-items:center}.brand-mark svg{width:27px;height:32px;stroke-width:1.4}.brand strong{font-family:'Fraunces',Georgia,serif;letter-spacing:2px;font-size:27px;line-height:1.1}.brand-dot{font-family:Arial;font-size:10px;vertical-align:top;display:inline-block;margin:3px 0 0 3px}.brand small{display:block;font-size:8px;font-weight:700;letter-spacing:2.05px;margin-top:5px}.day{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.5px}.day svg{width:21px;color:#9a793b}.day i{font-style:normal;padding:0 12px;color:#c1c1b0}.weather{color:#778074;font-size:12px;letter-spacing:0}nav{display:flex;gap:12px;align-items:center}.icon-button{position:relative;background:transparent;width:34px;height:34px;border-radius:50%;display:grid;place-items:center}.icon-button:hover{background:#e7e8db}.help-button{border:1.5px solid #52634e;width:21px;height:21px;font-size:13px;font-weight:600}.sound-slash{position:absolute;width:26px;height:1.5px;transform:rotate(-45deg);background:#52634e;border:1px solid #f4f2e8}.nav-line{height:23px;background:#dadcd0;width:1px;margin:0 5px}.pause-button{background:transparent;display:flex;gap:8px;align-items:center;font-size:12px}.pause-button>span:first-child{font-size:21px}#game-shell{position:relative;isolation:isolate;flex:1;margin:0 22px;min-height:0;border-radius:14px;overflow:hidden;background:#749660;box-shadow:0 1px 0 #fff,0 0 0 1px #243f3320}#game{width:100%;height:100%;display:block;outline:none;touch-action:none}.world-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 110px #263e3733;z-index:1}.paper{background:#fffdf1f5;border:1px solid #ffffffe0;box-shadow:0 4px 18px #20352814}.top-hud{position:absolute;top:25px;left:25px;right:25px;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;z-index:2}.quest{width:253px;border-radius:10px;padding:20px}.eyebrow{font-size:9px;letter-spacing:1.6px;font-weight:700;color:#7f8973}.quest h2{font-family:'Fraunces',Georgia,serif;font-size:24px;letter-spacing:-.7px;margin:8px 0 17px;font-weight:500}.quest-line{display:flex;gap:8px;align-items:center;font-size:11px}.quest-line strong{margin-left:auto;font-size:11px;color:#5d7156}.quest-check{height:12px;width:12px;border:1px solid #a0ad90;border-radius:50%;flex-shrink:0}.quest-check.done{background:#718f56;border-color:#718f56}.quest-check.done:after{content:'✓';display:block;color:#fff;font-size:9px;line-height:10px;text-align:center}.quest-progress{height:4px;background:#e4e7d7;border-radius:2px;margin:9px 0 15px 20px;overflow:hidden}.quest-progress span{display:block;background:#90a864;width:0;height:100%;transition:width .3s}.return-line{font-size:10px;color:#7c8675}.return-line svg{width:15px;height:15px;margin-left:auto}.status-column{display:flex;flex-direction:column;align-items:flex-end;gap:9px}.status-pill{display:flex;align-items:center;gap:9px;padding:12px 15px;background:#304a38eF;color:#fff8df;border-radius:30px;font-size:11px;box-shadow:0 4px 10px #20352814}.status-pill svg{width:17px;height:17px}.status-dot{width:6px;height:6px;border-radius:50%;background:#b9d290;margin-left:8px}.status-pill.danger{background:#a74d37}.status-pill.hidden{background:#536e41}.energy{display:flex;align-items:center;gap:8px;padding:10px 13px;border-radius:30px}.energy svg{width:14px;height:14px;color:#7e8e5a}.energy>span:nth-child(2){font-size:8px;letter-spacing:1px;color:#7f876f}.energy-track{height:5px;width:59px;border-radius:10px;background:#e1e5ce;overflow:hidden}.energy-track i{display:block;width:100%;height:100%;background:#93a95f;transition:width .2s}#lives{font-size:11px;color:#ba7651;letter-spacing:2px}.alert-track{height:4px;width:180px;border-radius:3px;background:#243e3318;overflow:hidden}.alert-track span{display:block;height:100%;width:0;background:#e09053;transition:width .1s}.location-tag{position:absolute;top:239px;left:27px;display:flex;align-items:center;gap:7px;color:#fdfce9;text-shadow:0 1px 4px #20432580;font-size:8px;font-weight:700;letter-spacing:1.5px;z-index:2}.location-dot{width:5px;height:5px;background:#f4df9a;border-radius:100%}.bottom-hud{position:absolute;bottom:23px;left:25px;right:25px;display:flex;align-items:flex-end;justify-content:space-between;z-index:2;pointer-events:none}.mini-tip{display:flex;align-items:center;gap:7px;color:#fffde9;font-size:10px;letter-spacing:.2px;text-shadow:0 1px 3px #234529}.mini-tip svg{width:15px;height:15px}.map-button{padding:5px 5px 8px;border-radius:9px;pointer-events:auto;transition:transform .2s}.map-button:hover{transform:translateY(-3px)}.map-button canvas{width:139px;height:93px;display:block;border-radius:5px}.map-button>span{display:flex;align-items:center;justify-content:center;gap:5px;font-size:8px;letter-spacing:1.2px;font-weight:700;padding-top:7px}.map-button svg{width:13px;height:13px}.map-button kbd{margin-left:7px;font-size:8px;padding:2px 3px}.footer{height:55px;padding:0 31px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0}.footer>span:first-child{font-size:8px;letter-spacing:1.1px;color:#858975;font-weight:500;display:flex;gap:7px;align-items:center}.footer-dot{width:5px;height:5px;border-radius:50%;background:#789256}.keyboard-hints{display:flex;gap:20px;font-size:10px;color:#7c8270}.keyboard-hints>span{display:flex;align-items:center;gap:7px}kbd{font-family:inherit;background:#f9f8ef;border:1px solid #dcded0;border-bottom-width:2px;border-radius:4px;color:#65715b;font-size:9px;padding:3px 5px}.footer-note{font-family:'Fraunces',Georgia,serif;font-size:15px;font-style:italic;color:#7a866b}.overlay{position:absolute;inset:0;z-index:6}.overlay[hidden]{display:none!important}.intro-overlay{display:flex;align-items:center;background:linear-gradient(90deg,#203d3942,transparent 85%);padding:28px 7%}.intro-card{position:relative;width:385px;background:#fbf8eb;box-shadow:0 16px 50px #142f353b;padding:25px 33px 23px;border-radius:4px 4px 65px 4px;text-align:center;transform:rotate(-1deg)}.intro-topline{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #dce1cc;padding-bottom:15px}.intro-topline .eyebrow{font-size:8px;letter-spacing:1px}.edition{font-size:6px;letter-spacing:1px;color:#919782}.intro-art{height:187px;position:relative;margin-top:12px;overflow:hidden}.intro-art img{height:162px;position:absolute;z-index:2;left:112px;top:15px;transform:rotate(5deg);animation:character-idle 3s ease-in-out infinite}.art-sun{height:139px;width:139px;border-radius:50%;background:#ead6a1;position:absolute;left:87px;top:17px}.art-ground{height:44px;width:270px;border-radius:50%;position:absolute;top:170px;left:25px;background:#d6ddbd}.character-shadow{width:80px;height:13px;border-radius:50%;position:absolute;left:125px;top:171px;background:#a2b190;z-index:2}.art-pine{width:1em;height:1em;color:#819c73;position:absolute;font-size:110px;transform:scaleX(.65);line-height:1;left:7px;top:70px;z-index:1}.p2{font-size:77px;left:230px;top:108px;color:#a8b28a}.art-note{margin-top:-18px;font-family:Georgia,serif;font-style:italic;color:#869274;font-size:11px;text-align:left;position:absolute;left:0;top:55px;transform:rotate(-9deg)}.art-note span{display:block;margin-left:65px}.art-note svg{width:34px;height:27px;stroke:currentColor;stroke-width:2;fill:none}.art-pine svg{display:block;width:100%;height:100%;stroke:none}.intro-card .art-pine{top:auto;bottom:8px;font-size:80px}.intro-card .p2{font-size:61px}.intro-card .art-note{top:26px}.intro-eyebrow{display:block;margin-top:14px;font-size:8px;color:#8c985f;letter-spacing:2px}h1,.intro-title{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:49px;line-height:1.04;letter-spacing:-2.5px;margin:10px 0 14px}.intro-card p{font-size:12px;line-height:1.8;color:#7e826f;margin:0 0 23px}.primary-button{display:flex;align-items:center;justify-content:space-between;gap:30px;background:#34523b;color:#fff9e5;padding:16px 20px;border-radius:6px;font-size:12px;font-weight:500;width:100%;transition:background .2s,transform .2s;box-shadow:0 3px 0 #233f2d}.primary-button:hover{background:#456744;transform:translateY(-1px)}.primary-button svg{width:18px;height:18px}.intro-footer{margin-top:18px;font-size:9px;color:#929782;letter-spacing:.4px}.tiny-leaf{color:#a9ad6d;margin-right:5px}.world-caption{position:absolute;bottom:35px;right:34px;display:flex;align-items:center;gap:13px;color:#fff6da;font-size:9px;font-weight:600;letter-spacing:2px;text-shadow:0 2px 5px #30482e}.caption-line{height:1px;width:35px;background:#fff6da}.world-caption small{display:block;font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;font-size:15px;letter-spacing:0;margin-top:7px}body:not(.started) .playing-only{display:none!important}body:not(.started) #pause{opacity:.4}#toast{position:absolute;left:50%;top:30px;transform:translate(-50%,-12px);background:#fffbe9;color:#465339;padding:12px 20px;border-radius:8px;font-size:12px;box-shadow:0 5px 22px #1e342a25;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:5;max-width:90%;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0)}#interaction{position:absolute;left:50%;top:59%;transform:translate(-50%,20px);border:1px solid #ffffff70;background:#2c4437ee;color:#fff8df;padding:8px 12px 8px 8px;border-radius:7px;display:flex;gap:9px;align-items:center;font-size:11px;opacity:0;pointer-events:none;z-index:3;white-space:nowrap}#interaction.visible{opacity:1}#interaction kbd{background:#fcf6df;color:#394c36;font-weight:700}.dialog-overlay{background:#173c365c;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:20px}.dialog-card{width:440px;max-height:100%;overflow:auto;padding:33px;border-radius:14px;position:relative}.close-button{position:absolute;right:16px;top:12px;background:transparent;color:#7b8870;font-size:26px;border-radius:5px;line-height:1;width:30px;height:30px}.dialog-card h2,.map-card h2{font-family:'Fraunces',Georgia,serif;font-size:33px;line-height:1.12;letter-spacing:-1px;font-weight:500;margin:12px 0 22px}.dialog-card p{font-size:13px;line-height:1.7;color:#737f65}.guide-row{display:flex;align-items:center;gap:16px;border-top:1px solid #e3e7d6;padding:12px 0;font-size:12px;color:#596b50}.guide-row>span{flex:1}.guide-row strong{display:block;color:#364c35;font-weight:600;margin-bottom:3px}.guide-row kbd{min-width:50px;text-align:center;padding:7px}.guide-tip{background:#e9eddc;border-radius:6px;padding:12px;font-size:11px!important}.dialog-card .primary-button{margin-top:24px}.score-grid{display:flex;gap:10px;margin:20px 0}.score-grid>div{flex:1;background:#ebedda;border-radius:8px;text-align:center;padding:15px;font-size:10px}.score-grid strong{font:30px 'Fraunces',Georgia,serif;display:block;margin-bottom:6px}.result-character{height:100px;display:block;margin:0 auto 15px}.map-card{width:min(820px,95vw);max-height:100%;overflow:auto;padding:26px;position:relative;border-radius:12px}.map-card h2{margin:10px 0 20px}.map-card>canvas{width:100%;max-height:55vh;object-fit:contain;display:block;background:#d6dab1;border-radius:8px}.map-legend{display:flex;gap:24px;justify-content:center;font-size:10px;margin-top:17px}.map-legend span{display:flex;align-items:center;gap:6px}.map-legend i{width:8px;height:8px;display:inline-block;border-radius:50%}.legend-player{background:#fff;border:2px solid #426444}.legend-food{background:#dba955}.legend-home{background:#425c3d}.map-card>p{text-align:center;font-size:10px;color:#859077;margin-bottom:0}#touch-controls{display:none;position:absolute;inset:auto 25px 29px;align-items:flex-end;justify-content:space-between;pointer-events:none;z-index:4}#joystick{height:103px;width:103px;border:2px solid #fff6d957;border-radius:50%;background:#2b4b372d;display:grid;place-items:center;touch-action:none;pointer-events:auto}#joystick-knob{height:44px;width:44px;background:#fff8df9e;border:1px solid #fff8dfc4;border-radius:50%;box-shadow:0 2px 8px #26392444}.touch-actions{display:flex;align-items:flex-end;gap:12px}.touch-actions button{border-radius:50%;width:63px;height:63px;background:#fff8e5dd;border:2px solid #fff8e5;font-size:11px;pointer-events:auto;touch-action:none}.touch-actions button.active{background:#718858;color:white}#touch-interact{width:78px;height:78px;background:#eed393ee;font-size:13px}@keyframes character-idle{50%{transform:rotate(2deg) translateY(-4px)}}@media(max-height:800px){.intro-card{padding-top:20px;padding-bottom:18px;width:345px}.intro-art{height:147px;margin-top:7px}.intro-art img{height:137px;top:4px;left:94px}.art-sun{height:115px;width:115px;left:78px;top:10px}.art-ground{top:131px;left:5px}.character-shadow{top:134px;left:97px}.art-pine{top:45px;left:0}.p2{left:200px;top:80px}.art-note{top:35px;font-size:10px}.intro-eyebrow{margin-top:10px}h1,.intro-title{font-size:43px;margin:9px 0 12px}.intro-card p{margin-bottom:17px}.intro-footer{margin-top:14px}.header{height:78px}.footer{height:47px}}@media(max-width:1000px){.day{display:none}.footer>span:first-child{display:none}.footer{justify-content:space-between}.intro-overlay{padding-left:5%}.world-caption{right:25px}.keyboard-hints{gap:13px}}@media(pointer:coarse){#touch-controls{display:flex}.keyboard-hints{display:none}.mini-tip{display:none}.bottom-hud{bottom:145px;right:19px}.map-button canvas{width:100px;height:64px}.map-button>span{font-size:6px}.map-button kbd{display:none}.footer>span:first-child{display:flex}.intro-overlay{justify-content:center}.world-caption{display:none}}@media(max-width:600px){body{min-height:480px}.header{height:70px;padding:0 18px;gap:10px}.brand strong{font-size:22px;letter-spacing:1px}.brand small{font-size:6px;letter-spacing:1.6px}.brand-mark{width:32px;height:38px}.brand-mark svg{width:23px}.brand{gap:8px}nav{gap:10px}.nav-line{display:none}.pause-label{display:none}#game-shell{margin:0 8px;border-radius:10px}.footer{height:34px;padding:0 15px}.footer-note{font-size:12px}.footer>span:first-child{font-size:6px;letter-spacing:.6px}.top-hud{top:13px;left:13px;right:13px;gap:10px}.quest{width:181px;padding:12px}.quest>.eyebrow{font-size:6px;letter-spacing:1px}.quest h2{font-size:20px;margin:6px 0 12px}.quest-line{font-size:9px;gap:5px}.quest-line strong{font-size:9px}.quest-progress{margin:7px 0 11px 16px}.return-line{font-size:8px}.return-line svg{display:none}.quest-check{width:10px;height:10px}.status-pill{padding:9px;gap:6px;font-size:9px}.status-dot{display:none}.status-pill svg{width:14px;height:14px}.energy{padding:8px;gap:5px}.energy>span:nth-child(2){display:none}.energy-track{width:38px}#lives{font-size:9px;letter-spacing:0}.alert-track{width:115px}.location-tag{top:177px;left:15px;font-size:6px}.intro-overlay{padding:17px;justify-content:center}.intro-card{width:320px;padding:20px 26px}.intro-topline{padding-bottom:12px}.intro-art img{left:88px}.art-sun{left:71px}.character-shadow{left:91px}.art-note{font-size:9px}.world-caption{display:none}.dialog-card{padding:26px}.dialog-card h2,.map-card h2{font-size:28px}.map-card{padding:20px}.map-legend{gap:12px;font-size:8px}.keyboard-hints{gap:8px;font-size:8px}.keyboard-hints>span{gap:4px}.keyboard-hints kbd{font-size:7px;padding:2px}.keyboard-hints>span:last-child{display:none}#toast{top:174px;width:max-content;font-size:10px}#touch-controls{inset:auto 20px 23px}#interaction{font-size:10px}}@media(max-height:640px){.intro-art{height:100px}.intro-art img{height:96px;left:104px;top:0}.art-sun{height:85px;width:85px;left:90px;top:4px}.art-ground{top:90px}.character-shadow{top:91px;left:110px;width:55px}.art-pine{top:33px;font-size:75px;left:25px}.p2{left:190px;top:50px;font-size:55px}.art-note{top:20px}.intro-card{padding:16px 27px;width:330px}.intro-topline{padding-bottom:10px}.intro-eyebrow{margin-top:6px}h1,.intro-title{font-size:35px;margin:8px 0}.intro-card p{font-size:11px;margin-bottom:12px}.primary-button{padding:13px 17px}.intro-footer{margin-top:11px;font-size:8px}.header{height:64px}.footer{height:32px}}

/* The field journal: warm paper, quiet controls, and plenty of room for the woods. */
:root{--ink:#304b37;--muted:#77816d;--line:#dfe4d1;--safe-bottom:env(safe-area-inset-bottom,0px)}
body{min-height:0}
button{user-select:none}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible{outline:3px solid #c98b35;outline-offset:4px}
.header{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
.brand strong{font-weight:500}
.icon-button{width:36px;height:36px}
.help-button{width:25px;height:25px}
.pause-button{min-height:36px}
.intro-card{max-height:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:#c2cbb0 transparent}
.intro-card p{color:#68755f;margin-bottom:13px}
.intro-chapters{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 -10px 21px;font-size:8px;color:#718067;letter-spacing:.1px}
.intro-chapters span{white-space:nowrap}
.intro-chapters i{font-style:normal;color:#a7b08e}
.edition{letter-spacing:.6px}
.intro-footer{font-size:8px;letter-spacing:.2px}
.quest{background:#fffdf1f2;backdrop-filter:blur(10px)}
.quest h2{line-height:1.12}
.quest-line{line-height:1.5}
.quest-line>span:not(.quest-check){min-width:0}
.quest-line strong{white-space:nowrap;padding-left:3px}
.quest-check.done:after{line-height:11px}
.extra-quests{display:grid;gap:10px;margin:0 0 15px}
.extra-quests:empty{display:none}
.extra-quest{font-size:10px}
.extra-quest strong{font-size:10px}
.return-line{border-top:1px solid #dbe1cb;padding-top:12px}
.location-tag{max-width:280px;line-height:1.5}
#lives{font-size:9px;letter-spacing:.4px;color:#7c885e;text-transform:uppercase}
.energy{white-space:nowrap}
.status-pill{max-width:245px;line-height:1.4}
.status-pill.danger{background:#946335}
.status-pill.hidden{background:#526d42}
.status-pill{position:relative}
.awareness-cue{position:absolute;top:-4px;right:-4px;display:grid;width:20px;height:20px;place-items:center;border:2px solid #fffdf1;border-radius:50%;background:#f0d38a;color:#4b482d;font-size:13px;font-weight:800;line-height:1;box-shadow:0 1px 3px #20352835;pointer-events:none}
.awareness-cue.urgent{background:#946335;color:#fffdf1}
.awareness-cue[hidden]{display:none}
.status-column{min-width:0}
.status-column .alert-track{max-width:100%}
.camera-toolbar{position:absolute;z-index:3;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;pointer-events:auto}
.camera-toolbar button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid #fffdf1d9;border-radius:8px;background:#fffbedf2;padding:11px 15px;font-size:11px;font-weight:600;color:#3d533a;box-shadow:0 3px 14px #183e2929;transition:background .2s,transform .2s,box-shadow .2s;white-space:nowrap;backdrop-filter:blur(8px)}
.camera-toolbar button:hover{background:#fffdf1;transform:translateY(-2px);box-shadow:0 5px 17px #183e2930}
.camera-toolbar button:active{transform:translateY(1px)}
.camera-toolbar button[hidden]{display:none!important}
.camera-toolbar button:disabled{opacity:.55;transform:none;box-shadow:none}
.camera-toolbar button svg{width:18px;height:18px;stroke-width:1.7}
.camera-toolbar button kbd{margin-left:4px;font-size:9px;font-weight:400;padding:2px 5px;background:#fffff680}
#photo-button{background:#314e3bf2;color:#fff9df;border-color:#eaf0d433}
#photo-button:hover{background:#456447}
#photo-button kbd{background:#ffffff12;border-color:#ffffff35;color:#f9f1d5}
#journal-button>b{min-width:18px;height:18px;display:inline-grid;place-items:center;border-radius:50%;background:#e5e9d3;color:#698052;font-size:9px}
body:not(.started) .camera-toolbar{display:none}
.dialog-card{width:min(520px,100%);background:#fffdf3;box-shadow:0 20px 65px #133b3645;scrollbar-width:thin;scrollbar-color:#c2cbb0 transparent}
.dialog-card h2{padding-right:12px}
.close-button{width:36px;height:36px;right:12px;top:10px}
.close-button:hover{background:#edf0df}
.dialog-card p{color:#65735e}
.journal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:22px 0}
.journal-photo{min-width:0;position:relative;padding:8px 8px 12px;border:1px solid #e1e3d0;background:#fffcf0;box-shadow:0 3px 7px #3d533710;border-radius:3px;text-align:center;transform:rotate(-1deg)}
.journal-photo:nth-child(2n){transform:rotate(1deg)}
.journal-photo:nth-child(3n){transform:rotate(.5deg)}
.journal-photo img{display:block;width:100%;aspect-ratio:1.45;object-fit:cover;border-radius:2px;background:#cbd7aa}
.journal-photo h3{font-family:'Fraunces',Georgia,serif;font-size:17px;line-height:1.2;font-weight:500;letter-spacing:-.2px;margin:10px 0 5px;color:#3d553b}
.photo-stars{font-size:11px;letter-spacing:3px;color:#c9923e}
.journal-photo.empty{min-height:145px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #cbd3bb;box-shadow:none;background:#f0f1e5b3;color:#96a384;transform:none}
.journal-photo.empty>svg{width:30px;height:30px;margin:7px;stroke-width:1.1}
.journal-photo.empty h3{color:#899779;font-size:15px;margin:8px 0}
.journal-photo.empty p{font-size:10px;line-height:1.5;margin:0;color:#899779}
.journal-photo.empty .photo-stars{color:#c8ceb8}
.chapter-list{display:grid;gap:9px;margin-top:18px}
.chapter-row{display:flex;align-items:center;gap:13px;width:100%;padding:13px 14px;text-align:left;background:#f0f2e4;border:1px solid #e1e6d0;border-radius:8px;transition:background .2s,transform .2s}
button.chapter-row:hover{background:#e7edd7;transform:translateX(2px)}
.chapter-row.active,.chapter-row.current{background:#e4ebd3;border-color:#aebf93}
.chapter-row:disabled{opacity:.6;transform:none}
.chapter-number{display:grid;place-items:center;flex-shrink:0;width:35px;height:35px;border-radius:50%;border:1px solid #b6c6a0;font-family:'Fraunces',Georgia,serif;color:#5c7750;font-size:18px;background:#ffffff57}
.chapter-row>div{min-width:0;flex:1}
.chapter-row strong{display:block;font-size:12px;font-weight:600;color:#3d5838;line-height:1.4}
.chapter-row small{display:block;margin-top:3px;font-size:10px;line-height:1.5;color:#7b896d}
.chapter-row svg{width:17px;height:17px;color:#7a9165}
.chapter-banner{position:absolute;z-index:4;top:26px;left:50%;transform:translateX(-50%);max-width:min(360px,calc(100% - 40px));padding:16px 25px;text-align:center;background:#fffbedf2;border:1px solid #fffef3;border-radius:10px;box-shadow:0 5px 22px #23422b20;pointer-events:none;backdrop-filter:blur(10px)}
.chapter-banner[hidden]{display:none}
.chapter-banner h2,.chapter-banner h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:25px;margin:5px 0}
.chapter-banner p{font-size:11px;line-height:1.5;color:#738065;margin:5px 0 0}
#toast{top:auto;bottom:88px;max-width:min(430px,calc(100% - 36px));padding:11px 18px;line-height:1.5;pointer-events:none}
#interaction{max-width:calc(100% - 32px);white-space:normal;text-align:left;line-height:1.4}
#interaction kbd{flex-shrink:0}
#touch-controls{padding-bottom:var(--safe-bottom)}
.map-button{transition:transform .2s,box-shadow .2s}
.map-button:hover{box-shadow:0 7px 20px #17352330}
.footer-note{white-space:nowrap}
.keyboard-hints{gap:15px;white-space:nowrap}
.footer>span:first-child{font-size:7px;letter-spacing:.8px}

@media(min-width:1200px){.camera-toolbar{bottom:28px}.footer{padding-left:33px;padding-right:33px}}
@media(max-width:1120px){.footer>span:first-child{display:none}.keyboard-hints{gap:14px}.footer{justify-content:space-between}.mini-tip{font-size:9px;max-width:210px;line-height:1.5}}
@media(max-width:800px){.camera-toolbar{left:auto;right:190px;transform:none;bottom:24px}.camera-toolbar button{padding:10px 12px;gap:6px}.camera-toolbar button kbd{display:none}.mini-tip{display:none}.dialog-card{width:460px}.intro-chapters{margin-bottom:17px}}
@media(max-width:600px){
  .header{padding:0 16px;height:66px}
  .brand strong{font-size:21px}
  .brand small{font-size:5.7px;letter-spacing:1.4px}
  .brand{gap:7px}
  nav{gap:7px}
  .icon-button{width:32px;height:36px}
  .help-button{width:24px;height:24px}
  .pause-button{padding:0 3px;min-width:24px;justify-content:center}
  #game-shell{margin:0 7px;border-radius:11px}
  .footer{height:33px;padding:0 13px}
  .footer-note{font-size:12px}
  .footer>span:first-child{font-size:5.5px;letter-spacing:.5px}
  .keyboard-hints{gap:8px;font-size:8px}
  .keyboard-hints>span{gap:3px}
  .keyboard-hints>span:last-child{display:none}
  .top-hud{top:12px;left:12px;right:12px;gap:8px}
  .quest{width:178px;flex-shrink:0;padding:12px}
  .quest h2{font-size:20px;line-height:1.12;margin:7px 0 12px}
  .quest-line{font-size:9px;line-height:1.45;gap:6px}
  .quest-line strong{font-size:9px}
  .extra-quests{gap:8px;margin-bottom:11px}
  .return-line{font-size:8px;padding-top:9px}
  .quest-check.done:after{line-height:9px;font-size:8px}
  .status-column{gap:7px}
  .status-pill{font-size:8px;padding:8px 9px;gap:5px;max-width:139px}
  .status-pill svg{width:13px;height:13px}
  .energy{padding:7px 9px;gap:5px}
  .energy-track{width:33px}
  #lives{font-size:7px;letter-spacing:.3px}
  .alert-track{width:108px}
  .location-tag{left:15px;font-size:6px;letter-spacing:1px;max-width:175px}
  .camera-toolbar{right:15px;bottom:153px;gap:6px}
  .camera-toolbar button{min-height:38px;font-size:9px;padding:9px 10px;gap:5px;border-radius:7px}
  .camera-toolbar button svg{width:15px;height:15px}
  #journal-button>b{height:15px;min-width:15px;font-size:8px}
  .bottom-hud{right:15px;bottom:207px}
  .map-button{padding:4px 4px 7px}
  .map-button canvas{width:92px;height:61px}
  .map-button>span{font-size:6px;gap:4px;letter-spacing:.9px}
  .map-button>span svg{height:11px;width:11px}
  .map-button kbd{display:none}
  .intro-overlay{padding:18px 20px}
  .intro-card{width:min(330px,100%);padding:19px 24px 20px;border-bottom-right-radius:48px}
  .intro-art{margin-left:auto;margin-right:auto;width:270px;max-width:100%}
  .intro-art img{left:88px}
  .intro-card p{font-size:11px;line-height:1.75;margin-bottom:12px}
  .intro-chapters{font-size:7px;gap:6px;margin-bottom:18px}
  .intro-footer{font-size:7px;margin-top:16px}
  .edition{font-size:5px;letter-spacing:.3px}
  .intro-topline .eyebrow{font-size:7px;letter-spacing:.8px}
  .dialog-overlay{padding:16px}
  .dialog-card{padding:25px 22px 23px;border-radius:11px}
  .dialog-card h2{font-size:29px;margin:11px 0 20px}
  .dialog-card p{font-size:12px;line-height:1.7}
  .dialog-card .primary-button{margin-top:20px}
  .journal-grid{gap:10px;margin:20px 0}
  .journal-photo{padding:6px 6px 10px}
  .journal-photo h3{font-size:15px}
  .journal-photo.empty{min-height:125px}
  .chapter-row{padding:12px;gap:10px}
  .chapter-number{width:30px;height:30px;font-size:16px}
  .chapter-banner{top:auto;bottom:205px;padding:12px 17px}
  #toast{top:auto;bottom:206px;width:max-content;max-width:calc(100% - 30px);font-size:10px;padding:9px 14px;z-index:5}
  #touch-controls{left:16px;right:16px;bottom:22px}
  #joystick{width:96px;height:96px}
  .touch-actions{gap:9px}
  .touch-actions button{width:56px;height:56px;font-size:10px}
  #touch-interact{width:70px;height:70px;font-size:11px}
  #interaction{font-size:10px;max-width:calc(100% - 25px)}
}

.creative-play{display:grid;gap:13px;text-align:center}
.creative-scene{height:170px;border-radius:15px;overflow:hidden;background:linear-gradient(#dce9d0,#f3e7bf);border:1px solid #d1dcbf}
.creative-scene>svg{display:block;width:100%;height:100%}
.creative-play .playful-instruction{margin:0;color:#526849;font-size:16px;font-weight:600}
.creative-actions{display:grid;gap:10px}
.creative-water{min-height:58px;display:flex;align-items:center;justify-content:center;gap:9px}
.creative-water svg{width:43px;height:43px}
.creative-blooms,.creative-pieces,.creative-places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.creative-bloom,.creative-pieces button,.creative-places button{min-height:64px;border:1px solid #cbd7b9;border-radius:11px;background:#f3f4e6;color:#3f5c3d;display:flex;align-items:center;justify-content:center;gap:5px}
.creative-bloom svg,.creative-pieces button svg,.creative-places button svg{width:51px;height:51px}
.creative-pieces button{min-width:0;flex-direction:column;padding:8px 5px;font-size:11px;font-weight:700}
.creative-pieces button[aria-pressed="true"]{background:#dce9ca;border:3px solid #6f9258;padding:6px 3px}
.creative-places button{min-height:72px;background:#eee2bd;border:2px dashed #ad966c;font:600 22px 'Fraunces',Georgia,serif}
.creative-places button:not(:disabled){border-style:solid;background:#fff5d7}
.creative-bloom:disabled,.creative-pieces button:disabled,.creative-places button:disabled,.creative-water:disabled{opacity:.58}
.creative-play .playful-status{min-height:48px;margin:0;padding:11px;border-radius:9px;background:#e8eddc;color:#4f6947}
@media(max-width:600px), (max-height:500px){
  .creative-play{gap:9px}.creative-scene{height:128px}.creative-play .playful-instruction{font-size:13px}.creative-bloom,.creative-pieces button,.creative-places button{min-height:54px}.creative-bloom svg,.creative-pieces button svg,.creative-places button svg{width:42px;height:42px}.creative-play .playful-status{min-height:44px;padding:8px;font-size:12px}
}
/* Creative choices need the picture and both action rows together. Other
   play panels keep their existing compact layouts. */
.dialog-card:has(.creative-play) .creative-play .playful-instruction{min-height:0;margin:0;line-height:1.25}
@media(max-height:430px) and (orientation:landscape){
  .dialog-card:has(.creative-play) .creative-play{grid-template-columns:minmax(140px,1fr) minmax(0,2fr);grid-template-rows:auto 44px 44px;gap:4px 9px;align-items:start}
  .dialog-card:has(.creative-play) .creative-scene{grid-column:1;grid-row:1/4;height:100%;min-height:102px}
  .dialog-card:has(.creative-play) .creative-play .playful-instruction{grid-column:2;grid-row:1;font-size:11px;line-height:1.15;text-align:left}
  .dialog-card:has(.creative-play) .creative-pieces{grid-column:2;grid-row:2;gap:4px}
  .dialog-card:has(.creative-play) .creative-places{grid-column:2;grid-row:3;gap:4px}
  .dialog-card:has(.creative-play) .creative-pieces button,.dialog-card:has(.creative-play) .creative-places button{height:44px;min-height:44px;padding:2px;gap:2px;flex-direction:row;font-size:10px;line-height:1.1}
  .dialog-card:has(.creative-play) .creative-pieces button svg,.dialog-card:has(.creative-play) .creative-places button svg{width:30px;height:30px;flex:0 0 30px}
  .dialog-card:has(.creative-play) .creative-actions{grid-column:2;grid-row:2/4;gap:4px}
  .dialog-card:has(.creative-play) .creative-water,.dialog-card:has(.creative-play) .creative-bloom{height:44px;min-height:44px;padding:2px;margin:0;font-size:12px}
  .dialog-card:has(.creative-play) .creative-water svg,.dialog-card:has(.creative-play) .creative-bloom svg{width:32px;height:32px}
  .dialog-card:has(.creative-play) .creative-play .playful-status{grid-column:1/-1;grid-row:4;margin:0;padding:6px;font-size:11px;line-height:1.2}
  .dialog-card:has(.creative-play) [data-play-replay]{grid-column:1/-1;min-height:44px;margin:0}
}
@media(pointer:coarse){
  .camera-toolbar{left:auto;right:20px;bottom:150px;transform:none}
  .camera-toolbar button{min-height:42px;padding:10px 12px}
  .camera-toolbar button kbd{display:none}
  .bottom-hud{right:20px;bottom:210px}
  .mini-tip{display:none}
  .footer>span:first-child{display:flex}
  #toast{bottom:210px;top:auto}
}
@media(max-height:740px) and (min-height:521px){
  .intro-card{padding-top:16px;padding-bottom:17px}
  .intro-art{height:126px}
  .intro-art img{height:118px;top:2px;left:99px}
  .art-sun{height:104px;width:104px;left:86px;top:6px}
  .art-ground{top:114px}
  .character-shadow{top:116px;left:107px;width:62px}
  .art-pine{font-size:83px;top:42px;left:17px}
  .p2{font-size:65px;top:69px;left:198px}
  .art-note{top:28px;font-size:9px}
  .intro-eyebrow{margin-top:8px;font-size:7px}
  h1,.intro-title{font-size:39px;margin:9px 0 10px}
  .intro-card p{font-size:11px;margin-bottom:10px}
  .intro-chapters{margin-bottom:16px}
  .intro-footer{margin-top:13px;font-size:7px}
  .primary-button{padding:13px 17px}
}
@media(max-width:370px){
  .header{padding:0 12px}
  .brand strong{font-size:19px}
  .brand small{font-size:5px;letter-spacing:1.15px}
  .brand-mark{width:28px;height:34px}
  nav{gap:3px}
  .top-hud{left:10px;right:10px;gap:7px}
  .quest{width:166px;padding:11px}
  .status-pill{padding:8px 7px;font-size:7px}
  .energy{padding:7px;gap:4px}
  .energy-track{width:25px}
  .status-pill svg{display:none}
  .alert-track{width:93px}
  .camera-toolbar{right:13px;gap:5px}
  .camera-toolbar button{padding:9px;min-height:38px;font-size:8px}
  .camera-toolbar button svg{height:14px;width:14px}
  #journal-button>b{display:none}
  .intro-card{padding-left:20px;padding-right:20px}
  .intro-art{width:260px}
  .intro-topline .eyebrow{font-size:6px}
  .intro-chapters{font-size:6px;gap:5px}
}
@media(max-height:520px){
  .header{height:55px}
  .footer{height:26px}
  .intro-overlay{padding:12px 5%}
  .intro-card{width:320px;padding:15px 25px;transform:rotate(-.5deg)}
  .intro-topline{padding-bottom:9px}
  .intro-art{display:none}
  .intro-eyebrow{margin-top:13px;font-size:7px}
  h1,.intro-title{font-size:34px;margin:8px 0}
  .intro-card p{font-size:10px;line-height:1.6;margin-bottom:9px}
  .intro-chapters{font-size:7px;margin-bottom:13px}
  .intro-footer{font-size:7px;margin-top:11px}
  .primary-button{padding:11px 15px}
  .dialog-overlay{padding:12px}
  .dialog-card{padding-top:24px;padding-bottom:22px}
  .top-hud{top:12px;left:14px;right:14px}
  .quest{padding:12px 14px;width:219px}
  .quest>.eyebrow{font-size:7px}
  .quest h2{font-size:21px;margin:6px 0 10px}
  .quest-line{font-size:9px}
  .quest-line strong{font-size:9px}
  .extra-quests{gap:5px;margin-bottom:8px}
  .quest-progress{margin-top:6px;margin-bottom:9px}
  .return-line{font-size:8px;padding-top:8px}
  .status-pill{font-size:9px;padding:8px 11px}
  .energy{padding:7px 10px}
  .status-column{gap:6px}
  .location-tag{display:none}
  .mini-tip{display:none}
  .camera-toolbar{left:50%;right:auto;bottom:17px;transform:translateX(-50%);gap:6px}
  .camera-toolbar button{min-height:36px;font-size:9px;padding:8px 10px}
  .camera-toolbar button kbd{display:none}
  .bottom-hud{bottom:16px;right:16px}
  .map-button canvas{display:none}
  .map-button{padding:10px 12px}
  .map-button>span{font-size:7px;padding:0}
  #toast{bottom:66px;font-size:10px;padding:8px 12px}
  .chapter-banner{top:auto;bottom:65px;padding:10px 20px}
  .chapter-banner h2,.chapter-banner h3{font-size:22px}
}
@media(max-height:520px) and (pointer:coarse){
  #touch-controls{bottom:15px;left:20px;right:20px}
  #joystick{width:78px;height:78px}
  #joystick-knob{width:36px;height:36px}
  .touch-actions button{width:49px;height:49px;font-size:9px}
  #touch-interact{width:63px;height:63px;font-size:10px}
  .camera-toolbar{top:104px;bottom:auto;left:auto;right:16px;transform:none}
  .bottom-hud{top:150px;bottom:auto;right:16px}
  .map-button{padding:9px 11px}
  #toast{bottom:30px;max-width:280px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .intro-card,.journal-photo,.journal-photo:nth-child(2n),.journal-photo:nth-child(3n){transform:none}
  button:hover,.map-button:hover,button.chapter-row:hover{transform:none}
}

/* Match dynamic game UI markup and keep hidden objectives out of layout. */
[hidden]{display:none!important}
.map-button{margin-left:auto}
.photo-placeholder{display:grid;place-items:center;width:48px;height:39px;margin:2px 0 5px;color:#9eae89}
.photo-placeholder svg{width:29px;height:29px;stroke-width:1.2}
.journal-photo.empty .photo-stars{font-size:9px;line-height:1.5;letter-spacing:.1px;padding:0 4px;color:#91a17d}

/* Fullscreen keeps a compact control bar and gives the remaining space to play. */
html:fullscreen{background:var(--paper)}
html:-webkit-full-screen{background:var(--paper)}
body.fullscreen-mode{height:100dvh;min-height:0}
.fullscreen-mode .header{height:58px;padding-top:env(safe-area-inset-top);height:calc(58px + env(safe-area-inset-top))}
.fullscreen-mode #game-shell{margin:0;border-radius:0;box-shadow:none}
.fullscreen-mode .footer{display:none}
#fullscreen[aria-pressed="true"]{background:#e3e9d6}
@media(max-width:600px){
  .header{gap:6px;padding-left:12px;padding-right:12px}
  .header nav{gap:4px;flex-shrink:0}
  .header .brand{min-width:0}
  .header .brand strong{font-size:20px;letter-spacing:1px}
  .header .brand small{font-size:5px;letter-spacing:1.2px}
  .fullscreen-mode .header{height:calc(54px + env(safe-area-inset-top))}
}
@media(max-width:350px){
  .header .brand-mark{display:none}
  .header .brand strong{font-size:19px}
}

/* Clear, friendly instructions: the same three lines on every outing. */
body{font-size:18px}
.top-hud{gap:24px}
.quest{width:350px;padding:20px 22px;border-radius:14px;flex-shrink:0}
.quest>.eyebrow{font-size:11px;letter-spacing:1.1px;color:#67775b}
.quest h2{font-size:29px;line-height:1.1;margin:9px 0 15px}
.mission-summary{display:grid;gap:10px;margin:0 0 18px;padding:14px 0 16px;border-top:1px solid #dce3cc;border-bottom:1px solid #dce3cc}
.mission-instruction{display:grid;grid-template-columns:83px minmax(0,1fr);align-items:start;gap:10px}
.mission-instruction>span,.mission-instruction>label{font-size:11px;line-height:1.55;font-weight:700;letter-spacing:.8px;color:#6d7f5b;padding-top:3px}
.mission-instruction>strong{font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.2px;color:#304b37;overflow-wrap:break-word}
.mission-do-row>strong{color:#243e2d}
.mission-do-row>span{color:#527348}
.mission-button{display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:auto;width:100%;min-height:46px;margin-top:16px;background:#e8eedb;border:1px solid #c9d6b5;border-radius:8px;color:#385535;font-size:17px;font-weight:600;transition:background .18s,transform .18s}
.mission-button:hover{background:#dce6ca;transform:translateY(-1px)}
.mission-button svg{width:19px;height:19px}
.mission-button kbd{margin-left:auto;font-size:12px;line-height:1.2;padding:3px 7px;background:#f5f7eb}
.mission-button>span{margin-right:auto}
.quest-line,.quest-line strong,.extra-quest,.extra-quest strong{font-size:14px;line-height:1.45}
.quest-check{height:16px;width:16px}
.quest-check.done:after{font-size:12px;line-height:14px}
.quest-progress{height:5px;margin:9px 0 13px 24px}
.extra-quests{gap:9px;margin-bottom:12px}
.return-line{padding-top:12px;color:#5b6e50}
.status-pill{font-size:15px;padding:12px 16px;max-width:280px}
.status-pill svg{width:20px;height:20px}
.energy>span:nth-child(2){font-size:11px}
#lives{font-size:11px;letter-spacing:.4px}
.location-tag{font-size:11px;letter-spacing:1px;max-width:345px}
.mini-tip{font-size:13px;max-width:320px;line-height:1.4}
.camera-toolbar{gap:9px}
.camera-toolbar button{font-size:16px;min-height:48px;padding:12px 15px}
.camera-toolbar button kbd{font-size:12px}
.camera-toolbar button svg{width:21px;height:21px}
#journal-button>b,.inventory-button>b,#inventory-button>b{font-size:12px;min-width:22px;height:22px;display:inline-grid;place-items:center;border-radius:50%;background:#e5e9d3;color:#526d43}
.map-button>span{font-size:11px;letter-spacing:.6px}
.map-button kbd{font-size:10px}
.keyboard-hints{font-size:13px;gap:15px}
.keyboard-hints kbd{font-size:11px}
#toast{font-size:17px;max-width:min(550px,calc(100% - 40px));padding:14px 20px;bottom:93px}
#interaction{font-size:18px;padding:12px 16px 12px 11px;gap:11px;border-radius:9px;box-shadow:0 5px 20px #233a332b}
#interaction kbd{font-size:16px;padding:5px 9px}
.touch-actions button{font-size:15px}
#touch-interact{font-size:16px}

/* Reading screens have generous type and a clear way back to play. */
.dialog-card{width:min(630px,100%);padding:32px}
.dialog-card>.eyebrow,.map-card>.eyebrow{font-size:12px;letter-spacing:1.1px}
.dialog-card h2,.map-card h2{font-size:36px;line-height:1.13;margin:12px 0 22px}
.dialog-card p{font-size:18px;line-height:1.55}
.close-button{width:44px;height:44px;font-size:31px;right:10px;top:8px}
.primary-button,.secondary-button{min-height:50px;font-size:18px;font-weight:600;line-height:1.3;padding:14px 20px;border-radius:8px}
.primary-button svg,.secondary-button svg{width:21px;height:21px}
.secondary-button{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;background:#edf0e0;border:1px solid #d2dbc1;color:#47603d;transition:background .2s,transform .2s}
.secondary-button:hover{background:#e0e8cf;transform:translateY(-1px)}
.secondary-button:active{transform:translateY(1px)}
.secondary-button:disabled,.primary-button:disabled{opacity:.5;transform:none;box-shadow:none}
.dialog-card .secondary-button{margin-top:12px}
.guide-row{font-size:17px;line-height:1.4;padding:16px 0}
.guide-row kbd{font-size:14px;padding:8px;min-width:59px}
.guide-tip{font-size:16px!important;line-height:1.5;padding:16px}
.mission-story{margin:18px 0 0;padding:15px 18px;background:#eef2e2;border:1px solid #dde5cc;border-left:4px solid #a4b986;border-radius:3px 10px 10px 3px;text-align:left}
.mission-story strong{display:block;font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:600;color:#304b37;margin-bottom:4px}
.mission-story p{font-size:16px!important;line-height:1.5;margin:0!important;color:#5d7156}
.mission-detail{display:grid;gap:12px;margin:22px 0}
.mission-detail .mission-instruction{display:block;padding:17px 20px;background:#eef2e2;border:1px solid #dde5cc;border-left:4px solid #a4b986;border-radius:3px 10px 10px 3px}
.mission-detail .mission-instruction>span,.mission-detail .mission-instruction>label{display:block;padding:0;margin-bottom:7px;font-size:12px;letter-spacing:1px}
.mission-detail .mission-instruction>strong{display:block;font-size:23px;line-height:1.35;letter-spacing:-.3px}
.mission-detail .mission-instruction:nth-child(2){background:#e4ecd7;border-left-color:#6f9053}
.mission-detail+.guide-tip{margin-bottom:0}
.score-grid>div{font-size:15px;padding:18px 12px}
.score-grid strong{font-size:35px}
.chapter-row{padding:16px;gap:15px}
.chapter-row strong{font-size:17px}
.chapter-row small{font-size:14px;line-height:1.4}
.chapter-number{width:40px;height:40px;font-size:22px}
.journal-photo h3{font-size:21px}
.journal-photo.empty h3{font-size:18px}
.journal-photo.empty p,.journal-photo.empty .photo-stars{font-size:13px}
.photo-stars{font-size:15px}
.map-legend{font-size:15px;flex-wrap:wrap;gap:12px 22px}
.map-card>p{font-size:15px;line-height:1.5}
.chapter-banner p{font-size:16px}
.chapter-banner{max-width:min(420px,calc(100% - 40px))}

/* Keep the hand-made title card, with buttons children can read and tap. */
.intro-card{width:410px;padding:24px 32px 23px}
.intro-card p{font-size:17px;line-height:1.55;margin-bottom:13px}
.intro-chapters{font-size:10px;margin-bottom:18px;gap:7px}
.intro-footer{font-size:11px;line-height:1.4;margin-top:16px}
#intro-fullscreen{margin-top:12px;min-height:46px;font-size:17px}
.intro-topline .eyebrow{font-size:10px;letter-spacing:.6px}
.edition{font-size:7px;letter-spacing:.3px}
.intro-eyebrow{font-size:10px;letter-spacing:1.2px}

/* One familiar open-container panel, dressed in a few woodland materials. */
.container-overlay{z-index:8;background:#16372e70;backdrop-filter:blur(3px);--container-body:#90aba7;--container-rim:#c6d9c9;--container-inner:#eaf0db;--container-shadow:#587b71;--container-accent:#638a74}
.container-card{position:relative;width:min(740px,100%);max-height:100%;overflow:auto;padding:28px 32px 23px;border-radius:17px;background:#fffdf2;box-shadow:0 24px 80px #112b2f50;scrollbar-width:thin;scrollbar-color:#becbab transparent}
.container-heading{text-align:center;padding:0 27px}
.container-heading .eyebrow{font-size:11px;letter-spacing:1.6px;color:#81916c}
.container-heading h2{font:500 36px/1.15 'Fraunces',Georgia,serif;letter-spacing:-.8px;margin:9px 0}
.container-heading p{font-size:18px;line-height:1.45;color:#6e7c61;margin:0 0 20px}
.container-stage{position:relative;border-radius:17px 17px 23px 23px;padding:0 20px 24px;border:8px solid var(--container-rim);border-top-width:6px;background:var(--container-body);box-shadow:inset 0 -7px 0 #233c321c,0 7px 0 var(--container-shadow),0 13px 15px #304d3420}
.container-art{height:86px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.container-art:empty{height:35px}
.container-art>svg{width:100%;max-width:420px;height:100%;fill:none;stroke:none}
#container-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-radius:13px;padding:16px;background:var(--container-inner);box-shadow:inset 0 4px 9px #233c3220;border:1px solid #ffffff55}
#container-slots:has(>.container-slot:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
.container-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:167px;padding:12px 8px;background:#fffdf2;border:2px solid #d1d9bd;border-radius:10px;color:#3f5639;box-shadow:0 3px 0 #4a62301b;transition:border-color .16s,background .16s,transform .16s}
.container-slot:hover{border-color:#9aad7d;background:#fffef6;transform:translateY(-2px)}
.container-slot[aria-pressed="true"],.container-slot.selected{border-color:#537940;background:#fff9da;box-shadow:0 0 0 3px #fffce8,0 0 0 5px #618248;transform:translateY(-2px)}
.container-slot[aria-pressed="true"]:after,.container-slot.selected:after{content:'✓';position:absolute;right:6px;top:6px;display:grid;place-items:center;width:22px;height:22px;background:#5e804c;border:2px solid #fffdf1;border-radius:50%;color:#fff8db;font-size:13px;font-weight:700}
.container-slot:disabled,.container-slot.empty{opacity:.66;background:#dde5cc;border-style:dashed;box-shadow:none;transform:none}
.food-illustration{display:flex;align-items:center;justify-content:center;width:100%;height:86px;flex-shrink:0}
.food-illustration>svg{display:block;width:105px;height:86px;max-width:100%;fill:none;stroke:none}
.slot-name,.slot-name strong{display:block;width:100%;font-size:17px;line-height:1.2;font-weight:600;text-align:center;overflow-wrap:break-word;color:#3d5538}
.slot-state{font-size:13px;line-height:1.3;color:#788a63;text-align:center}
.container-empty,.empty-container{grid-column:1/-1;padding:35px 16px;text-align:center;font-size:23px;color:#5d7350;line-height:1.4}
.container-empty strong,.empty-container strong{display:block;font:500 29px/1.2 'Fraunces',Georgia,serif;margin-bottom:9px}
.container-empty p,.empty-container p{font-size:17px;margin:5px 0 0}
.container-info{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:23px 0 0}
#container-selection{font-size:18px;font-weight:600;line-height:1.35;margin:0;color:#3c5737}
#container-bag-count{flex-shrink:0;font-size:14px;padding:7px 10px;background:#edf1e0;border:1px solid #dce4cb;border-radius:20px;color:#6f825d}
#container-message{min-height:26px;font-size:16px;line-height:1.4;margin:6px 0 12px;color:#72855f;text-align:left}
/* The little tick is drawn, not written: #container-hear speaks this
   element's textContent, and a ✓ inside it is read aloud as "check". */
#container-message.done:before{content:'✓ ';color:#718f56}
#container-message:empty{min-height:13px;margin:4px 0}
.container-actions{display:flex;flex-wrap:wrap;gap:11px}
.container-actions>.primary-button,.container-actions>.secondary-button{flex:1;justify-content:center;gap:9px;min-height:52px;font-size:19px;padding:13px 10px;margin:0}
.container-actions>#container-close{background:#f7f6eb;border-color:#dfe3d1;color:#617155}
.container-hint{font-size:13px;line-height:1.4;text-align:center;color:#859174;margin:15px 0 0}
.container-overlay[data-kind="lunchbox"],.container-overlay[data-kind="basket"]{--container-body:#d8b560;--container-rim:#eed99a;--container-inner:#fbefcd;--container-shadow:#a88b49;--container-accent:#a78745}
.container-overlay[data-kind="fridge"]{--container-body:#b1c7bb;--container-rim:#dbe4cf;--container-inner:#f1f4e8;--container-shadow:#809b89;--container-accent:#7d9b89}
.container-overlay[data-kind="fridge"] .container-stage{border-radius:12px 12px 18px 18px;border-width:10px;padding-bottom:26px}
.container-overlay[data-kind="fridge"] #container-slots{gap:14px 11px;border-radius:5px;box-shadow:inset 0 2px 12px #6689792b;background:repeating-linear-gradient(to bottom,#eef3e4 0,#eef3e4 168px,#bdcebc 168px,#d6e3d1 175px)}
.container-overlay[data-kind="cupboard"],.container-overlay[data-kind="crate"]{--container-body:#b89b71;--container-rim:#d6bf93;--container-inner:#e9d7af;--container-shadow:#92754f;--container-accent:#8e704b}
.container-overlay[data-kind="cupboard"] .container-stage,.container-overlay[data-kind="crate"] .container-stage{background:repeating-linear-gradient(90deg,#bb9f74 0,#bb9f74 64px,#b0946a 65px,#c1a880 67px,#bb9f74 69px)}
.bag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:23px 0}
.bag-item{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:14px 8px;background:#f0f2e3;border:1px solid #dce4c9;border-radius:10px;text-align:center}
.bag-item .food-illustration{height:76px}
.bag-item .food-illustration>svg{height:75px;width:92px}
.bag-item strong{display:block;font-size:16px;line-height:1.3;margin-top:5px}
.bag-item small,.bag-item span:not(.food-illustration){font-size:13px;line-height:1.35;color:#7e8d6a}
.bag-empty{text-align:center;padding:25px 15px;color:#758967;font-size:19px}
.count-card-picture{width:220px;max-width:100%;margin:0 auto 18px}
.count-card-picture>img{display:block;width:100%;aspect-ratio:1.45;object-fit:cover;border-radius:8px;background:#cbd7aa}
.count-card-question{font-size:20px;font-weight:600;line-height:1.4;color:#354c36;text-align:center;margin:0 0 20px}
.count-choices{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:0;padding:0}
.count-choice{min-width:68px;min-height:68px;padding:8px;border-radius:14px;background:#f0f2e3;border:2px solid #d5dec3;font-size:28px;font-weight:700;color:#354c36;transition:background .16s,border-color .16s,transform .16s}
.count-choice:hover{background:#e6edd9;border-color:#b7c99e;transform:translateY(-2px)}

@media(max-width:1120px){
  .quest{width:315px;padding:18px}
  .quest h2{font-size:26px}
  .mission-instruction{grid-template-columns:75px minmax(0,1fr);gap:8px}
  .mission-instruction>strong{font-size:17px}
  .mission-instruction>span,.mission-instruction>label{font-size:10px}
  .camera-toolbar{left:50%;right:auto;transform:translateX(-50%)}
  .camera-toolbar button{font-size:15px;padding:11px 12px}
  .camera-toolbar button kbd{display:none}
  .mini-tip{display:none}
  .keyboard-hints{font-size:12px;gap:12px}
}
@media(max-height:820px){
  .intro-art{height:128px}
  .intro-art img{height:117px;left:123px;top:3px}
  .art-sun{width:104px;height:104px;left:111px;top:6px}
  .art-ground{top:115px;left:27px}
  .character-shadow{top:115px;left:128px;width:66px}
  .art-pine{top:35px;left:29px;font-size:84px}
  .p2{left:227px;top:63px;font-size:64px}
  .art-note{top:31px;left:13px}
  .intro-eyebrow{margin-top:7px}
  h1,.intro-title{font-size:42px;margin:9px 0 12px}
  .intro-topline{padding-bottom:12px}
  .intro-chapters{margin-bottom:15px}
  .intro-footer{margin-top:13px}
}
@media(max-width:800px){
  .quest{width:300px}
  .quest>.eyebrow{font-size:10px}
  .quest h2{font-size:25px}
  .status-pill{font-size:13px;max-width:210px;padding:10px 12px}
  .status-pill .status-dot{display:none}
  .camera-toolbar{right:15px;left:auto;transform:none;bottom:148px}
  .camera-toolbar button{font-size:14px;padding:11px;gap:6px}
  .bottom-hud{bottom:211px;right:15px}
  .map-button canvas{width:103px;height:69px}
  .map-button kbd{display:none}
  #toast{bottom:208px;font-size:16px}
  .container-card{padding:25px 23px 22px}
}
@media(max-width:600px){
  body{font-size:16px}
  .top-hud{top:10px;left:10px;right:10px;display:block}
  .quest{width:100%;padding:13px 15px 12px;border-radius:11px}
  .quest>.eyebrow{display:block;font-size:9px;letter-spacing:.8px;line-height:1.2;padding-right:3px}
  .quest h2{font-size:23px;line-height:1.1;margin:5px 0 9px}
  .mission-summary{gap:7px;margin:0;padding:9px 0 0;border-bottom:0}
  .mission-instruction{grid-template-columns:76px minmax(0,1fr);gap:8px}
  .mission-instruction>span,.mission-instruction>label{font-size:10px;letter-spacing:.4px;line-height:1.5;padding-top:2px}
  .mission-instruction>strong{font-size:16px;line-height:1.25;letter-spacing:-.1px}
  .quest>.quest-line,.quest>.quest-progress,.quest>.extra-quests{display:none!important}
  .mission-button{min-height:42px;margin-top:10px;font-size:16px;gap:9px}
  .mission-button kbd{display:none}
  .mission-button>span{margin-right:0}
  .mission-button svg{width:18px;height:18px}
  .status-column{flex-direction:row;justify-content:flex-end;align-items:center;gap:6px;margin-top:8px}
  .status-pill{font-size:12px;max-width:none;padding:8px 10px;gap:6px}
  .status-pill svg{width:16px;height:16px}
  .energy{padding:8px 9px;gap:5px}
  .energy svg{height:14px;width:14px}
  .energy-track{width:35px}
  #lives{font-size:9px;letter-spacing:.1px}
  .alert-track{position:absolute;right:10px;bottom:-6px;width:134px;height:3px}
  .location-tag{display:none}
  .camera-toolbar{left:auto;right:12px;bottom:135px;gap:6px;max-width:calc(100% - 24px)}
  .camera-toolbar button{min-height:43px;font-size:14px;padding:10px;gap:6px}
  .camera-toolbar button svg{width:18px;height:18px}
  .camera-toolbar button kbd{display:none}
  #journal-button>b,.inventory-button>b,#inventory-button>b{font-size:10px;min-width:18px;height:18px}
  .bottom-hud{right:12px;bottom:194px}
  .map-button canvas{display:none}
  .map-button{padding:11px 13px}
  .map-button>span{padding-top:0;font-size:11px;gap:6px;letter-spacing:.5px}
  .map-button>span svg{width:16px;height:16px}
  #interaction{font-size:16px;line-height:1.35;padding:10px 12px 10px 9px;top:auto;bottom:190px;max-width:calc(100% - 26px);transform:translateX(-50%);text-align:center}
  #interaction kbd{font-size:14px}
  #toast{font-size:16px;bottom:240px;line-height:1.4;padding:12px 16px;width:max-content;max-width:calc(100% - 26px)}
  .touch-actions button{font-size:14px;width:57px;height:57px}
  #touch-interact{font-size:15px;width:72px;height:72px}
  #touch-controls{left:15px;right:15px;bottom:19px}
  #joystick{width:94px;height:94px}
  .intro-overlay{padding:14px 18px}
  .intro-card{width:min(365px,100%);padding:20px 24px;transform:rotate(-.5deg)}
  .intro-topline .eyebrow{font-size:8px}
  .edition{font-size:6px}
  .intro-art{width:270px;height:119px}
  .intro-art img{height:111px;left:95px;top:2px}
  .art-sun{width:98px;height:98px;left:83px;top:5px}
  .art-ground{top:106px;left:1px}
  .character-shadow{top:108px;left:98px;width:66px}
  .art-pine{top:34px;left:4px;font-size:80px}
  .p2{left:197px;top:60px;font-size:61px}
  .art-note{left:0;top:26px;font-size:10px}
  .intro-eyebrow{font-size:9px}
  h1,.intro-title{font-size:39px;margin:9px 0 13px}
  .intro-card p{font-size:16px;line-height:1.5;margin-bottom:11px}
  .intro-chapters{font-size:9px;gap:5px;margin-bottom:17px}
  .intro-footer{font-size:10px;line-height:1.45;margin-top:14px}
  .primary-button,.secondary-button{font-size:17px;min-height:49px;padding:13px 17px}
  #intro-fullscreen{font-size:16px;min-height:45px;margin-top:11px}
  .dialog-overlay{padding:12px}
  .dialog-card{padding:26px 21px 22px;border-radius:12px}
  .dialog-card>.eyebrow,.map-card>.eyebrow{font-size:10px;letter-spacing:.8px;display:block;padding-right:20px}
  .dialog-card h2,.map-card h2{font-size:30px;line-height:1.1;margin:12px 0 20px;padding-right:16px}
  .dialog-card p{font-size:16px;line-height:1.5}
  .dialog-card .primary-button{margin-top:21px}
  .mission-detail{gap:10px;margin:17px 0}
  .mission-detail .mission-instruction{padding:15px 16px}
  .mission-detail .mission-instruction>span,.mission-detail .mission-instruction>label{font-size:11px;margin-bottom:6px}
  .mission-detail .mission-instruction>strong{font-size:20px;line-height:1.3}
  .guide-row{font-size:15px;padding:14px 0;gap:13px}
  .guide-row kbd{font-size:12px;min-width:50px}
  .guide-tip{font-size:15px!important;padding:13px}
  .chapter-row{padding:13px;gap:10px}
  .chapter-row strong{font-size:16px}
  .chapter-row small{font-size:13px}
  .chapter-number{width:33px;height:33px;font-size:20px}
  .journal-photo h3{font-size:18px}
  .journal-photo.empty h3{font-size:16px}
  .journal-photo.empty p,.journal-photo.empty .photo-stars{font-size:12px}
  .map-legend{font-size:13px;gap:10px 16px}
  .map-card>p{font-size:13px}
  .container-card{padding:23px 16px 20px;border-radius:13px}
  .container-heading{padding:0 16px}
  .container-heading .eyebrow{font-size:9px;letter-spacing:1px}
  .container-heading h2{font-size:29px;margin:8px 0}
  .container-heading p{font-size:16px;line-height:1.4;margin-bottom:16px}
  .container-stage{padding:0 8px 16px;border-width:6px;border-radius:13px 13px 18px 18px}
  .container-art{height:69px}
  #container-slots{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px}
  #container-slots:has(>.container-slot:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .container-slot{min-height:145px;padding:10px 6px}
  .food-illustration{height:75px}
  .food-illustration>svg{height:75px;width:95px}
  .slot-name,.slot-name strong{font-size:16px;line-height:1.2}
  .slot-state{font-size:12px}
  .container-slot[aria-pressed="true"],.container-slot.selected{box-shadow:0 0 0 2px #fffce8,0 0 0 4px #618248}
  .container-info{gap:8px;margin-top:20px;align-items:flex-start}
  #container-selection{font-size:16px}
  #container-bag-count{font-size:12px;padding:6px 8px}
  #container-message{font-size:15px;margin:6px 0 10px;min-height:23px}
  .container-actions{gap:7px}
  .container-actions>.primary-button,.container-actions>.secondary-button{font-size:17px;min-height:49px;padding:12px 7px;gap:6px}
  .container-actions>.primary-button svg{width:18px;height:18px}
  .container-hint{font-size:12px;margin-top:13px}
  .container-overlay[data-kind="fridge"] .container-stage{border-width:7px;padding-bottom:18px}
  .bag-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:19px 0}
  .bag-item{padding:12px 8px}
  .bag-item strong{font-size:16px}
  .bag-empty{font-size:17px;padding:20px 12px}
}
@media(pointer:coarse) and (min-width:601px){
  .camera-toolbar{right:20px;left:auto;transform:none;bottom:152px}
  .bottom-hud{right:20px;bottom:217px}
  .camera-toolbar button{min-height:46px;font-size:16px}
  #toast{bottom:218px}
}
@media(max-height:660px){
  .intro-card{padding-top:17px;padding-bottom:17px}
  .intro-art{height:89px}
  .intro-art img{height:85px;left:129px;top:0}
  .art-sun{width:76px;height:76px;left:118px;top:3px}
  .art-ground{top:82px}
  .character-shadow{top:83px;left:130px;width:55px}
  .art-pine{top:24px;left:49px;font-size:65px}
  .p2{left:219px;top:45px;font-size:49px}
  .art-note{top:14px;left:31px;font-size:9px}
  .intro-eyebrow{margin-top:7px;font-size:8px}
  h1,.intro-title{font-size:35px;margin:8px 0}
  .intro-card p{font-size:16px;margin-bottom:9px}
  .intro-chapters{margin-bottom:13px}
  .intro-footer{font-size:10px;margin-top:11px}
  .container-art{height:57px}
  .container-heading p{margin-bottom:13px}
  .container-slot{min-height:135px}
  .food-illustration{height:66px}
  .food-illustration>svg{height:66px}
}
@media(max-height:660px) and (max-width:600px){
  .intro-art img{left:102px}
  .art-sun{left:91px}
  .character-shadow{left:104px}
  .art-pine{left:22px}
  .p2{left:191px}
  .art-note{left:3px}
}
@media(max-height:560px) and (min-width:601px){
  .top-hud{top:12px;left:14px;right:14px}
  .quest{width:320px;padding:13px 15px}
  .quest h2{font-size:24px;margin:6px 0 9px}
  .quest>.eyebrow{font-size:9px}
  .mission-summary{padding:9px 0 0;border-bottom:0;margin:0;gap:7px}
  .mission-instruction>strong{font-size:16px;line-height:1.25}
  .quest>.quest-line,.quest>.quest-progress,.quest>.extra-quests{display:none!important}
  .mission-button{min-height:39px;font-size:16px;margin-top:11px}
  .location-tag{display:none}
  .status-pill{font-size:12px;padding:9px 11px}
  .energy{padding:8px 10px}
  .camera-toolbar,.camera-toolbar.playing-only{top:auto;bottom:17px;left:50%;right:auto;transform:translateX(-50%);gap:7px}
  .camera-toolbar button{min-height:42px;font-size:14px;padding:10px}
  .bottom-hud{top:auto;bottom:17px;right:16px}
  .map-button canvas{display:none}
  .map-button{padding:11px 12px}
  #toast{bottom:72px;font-size:16px}
  #interaction{font-size:16px;top:auto;bottom:75px;transform:translateX(-50%)}
  .intro-art{display:none}
  .intro-card{width:360px;padding:17px 24px}
  .intro-topline{padding-bottom:9px}
  .intro-eyebrow{margin-top:12px}
  .intro-card p{font-size:16px}
  .intro-chapters{font-size:9px;margin-bottom:12px}
  .intro-footer{font-size:10px;margin-top:11px}
  .intro-card .primary-button,.intro-card .secondary-button{min-height:44px;font-size:16px;padding:11px 16px}
  #intro-fullscreen{margin-top:9px}
  .container-card{padding-top:20px;padding-bottom:18px}
  .container-heading h2{font-size:29px;margin:6px 0}
  .container-heading .eyebrow{font-size:10px}
  .container-heading p{font-size:16px;margin-bottom:12px}
  .container-art{height:42px}
  .container-slot{min-height:124px}
  .food-illustration{height:64px}
  .food-illustration>svg{height:64px}
  .container-info{margin-top:18px}
  .container-hint{margin-top:11px}
}
@media(max-height:560px) and (pointer:coarse) and (min-width:601px){
  .mission-where-row,.mission-done-row{display:none}
  .quest{width:290px}
  #touch-controls{bottom:15px;left:18px;right:18px}
  #joystick{width:80px;height:80px}
  .touch-actions button{font-size:14px;width:54px;height:54px}
  #touch-interact{font-size:15px;width:66px;height:66px}
  .camera-toolbar,.camera-toolbar.playing-only{top:108px;right:16px;left:auto;bottom:auto;transform:none}
  .bottom-hud{top:164px;right:16px;bottom:auto}
  #toast{bottom:69px;max-width:360px}
}

/* A growing atlas and small, warm celebrations. */
.mission-actions{display:grid;grid-template-columns:1.3fr 1fr;gap:9px;margin-top:16px}
.mission-actions .mission-button{margin-top:0;padding:9px 11px}
.mission-actions .mission-button kbd{display:none}
.mission-actions .mission-button>span{margin:0}
.worlds-button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:9px 11px;pointer-events:auto;font-size:17px;font-weight:600;border:1px solid #d4debf;border-radius:8px;background:#f2f4e8;color:#617b4f;transition:background .18s,transform .18s}
.worlds-button:hover{background:#e5ecd6;transform:translateY(-1px)}
.worlds-button svg{width:19px;height:19px}
.map-region{margin:27px 0}
.map-region:first-child{margin-top:0}
.map-region h3{font:500 25px/1.2 'Fraunces',Georgia,serif;color:#455f3d;letter-spacing:-.4px;margin:0 0 13px;padding-bottom:10px;border-bottom:1px solid #dce4ce}
.map-region>p{font-size:15px;color:#7c8c6b;margin:-2px 0 14px}
.world-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.world-card{display:flex;align-items:center;gap:11px;position:relative;min-width:0;min-height:91px;padding:13px 12px;text-align:left;border:1px solid #dbe3cc;border-radius:10px;background:#f1f4e5;transition:background .18s,border-color .18s,transform .18s;box-shadow:0 2px 0 #d9e1c957}
.world-card:hover{background:#e8eed9;border-color:#b1c79a;transform:translateY(-2px)}
.world-card.current{border:2px solid #7a985c;background:#e5edd5;padding:12px 11px}
.world-card.completed{background:#edf2df;border-color:#bfcea9}
.world-card.completed:after{content:'✓';position:absolute;top:7px;right:7px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#739456;color:#fffde8;font-size:12px;font-weight:700}
.world-card.locked{background:#f2f2e9;border-color:#e0e3d4;color:#89967e}
.world-card:disabled{opacity:.62;transform:none}
.world-card>.chapter-number,.world-card>.world-number,.world-card>.map-number,.world-card>.world-index{display:grid;place-items:center;flex-shrink:0;width:39px;height:39px;border-radius:50%;border:1px solid #bbcda2;background:#ffffff75;font:500 21px 'Fraunces',Georgia,serif;color:#62814d}
.world-card.current>.world-number,.world-card.current>.chapter-number{background:#6f8e52;border-color:#6f8e52;color:#fff8db}
.world-card>div{min-width:0}
.world-card strong,.world-card h4{display:block;font-size:16px;font-weight:600;line-height:1.25;margin:0;color:#415c38;overflow-wrap:break-word}
.world-card small{display:block;font-size:12px;line-height:1.3;color:#7c8e69;margin-top:4px}
.world-card>svg{width:20px;height:20px;margin-left:auto;color:#7f986a}
.worlds-summary{background:#edf2df;padding:16px;border-radius:10px;margin:16px 0 22px;line-height:1.5;font-size:17px}
.worlds-summary strong{color:#517440}
.award-card{text-align:center;padding:0 2px}
.reward-burst{position:relative;display:grid;place-items:center;width:151px;height:151px;margin:4px auto 22px;border-radius:50%;background:#e8ecd4;box-shadow:0 0 0 10px #f1f2e4,0 0 0 11px #d9e1c5}
.reward-burst:before,.reward-burst:after{content:'✦';position:absolute;color:#c9a757;font-size:26px;line-height:1}
.reward-burst:before{left:-26px;top:19px;transform:rotate(-13deg)}
.reward-burst:after{right:-27px;bottom:21px;font-size:21px;transform:rotate(9deg)}
.reward-burst>svg,.award-card>.award-icon{width:104px;height:104px;fill:none;stroke-width:1.5}
.reward-burst>span{font-size:77px;color:#8d9c5a}
.award-card h3{font:500 31px/1.2 'Fraunces',Georgia,serif;letter-spacing:-.5px;margin:12px 0;color:#3f6139}
.award-card p{font-size:18px;line-height:1.5;margin:11px auto;max-width:450px;color:#70835e}
.award-card p.story-thanks{font-style:italic;color:#3f6139}
.award-label{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:20px;padding:8px 14px;background:#e6edda;color:#68864f;font-size:13px;font-weight:600;letter-spacing:.6px}
.badge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:24px 0}
.earned-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;text-align:center;border:1px solid #d8e2c6;border-radius:12px;padding:17px 9px;background:#edf2e1;color:#68894e}
.earned-badge>svg,.earned-badge .badge-art>svg{width:72px;height:72px;display:block;margin:0 auto 10px;fill:none;stroke-width:1.4}
.earned-badge>span:first-child{font-size:47px;line-height:1.2;display:block;margin:0 auto 8px}
.earned-badge strong{font-size:15px;font-weight:600;line-height:1.3;color:#506f3d}
.earned-badge small{display:block;font-size:12px;line-height:1.4;margin-top:5px;color:#849674}
.earned-badge.locked,.earned-badge.unearned{background:#f5f5ee;border-style:dashed;opacity:.6;filter:saturate(.5)}
.reward-toast{position:absolute;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:12px;left:50%;top:25px;transform:translate(-50%,-8px);opacity:0;max-width:min(420px,calc(100% - 30px));padding:14px 21px;border:1px solid #eef4d7;border-radius:11px;background:#fffbed;box-shadow:0 7px 25px #29482e2b;color:#587644;font-size:19px;font-weight:600;line-height:1.3;text-align:center;transition:opacity .25s,transform .25s}
.reward-toast.visible,.reward-toast.show,.reward-toast.active{opacity:1;transform:translate(-50%,0)}
.reward-toast:empty{display:none}
.reward-toast svg{height:31px;width:31px;color:#819c59;flex-shrink:0}
.reward-toast strong{font-weight:600}
.reward-toast small{display:block;font-size:14px;font-weight:400;color:#889974;margin-top:3px}
.quest-check.done{box-shadow:0 0 0 3px #95ad712b}
.mission-do-row.complete>strong,.mission-do-row.done>strong{color:#668d45}
.keyboard-hints>.mouse-hint kbd{white-space:nowrap;font-size:11px}
.footer>.keyboard-hints{gap:13px}
.footer>span:first-child{display:none}
@media(max-width:1190px){.keyboard-hints>span:nth-last-child(1),.keyboard-hints>span:nth-last-child(2){display:none}.footer-note{font-size:14px}}
@media(max-width:920px){.keyboard-hints>span:nth-last-child(3){display:none}.footer>.keyboard-hints{gap:10px}.keyboard-hints{font-size:11px}.keyboard-hints kbd{font-size:10px}.footer-note{display:none}}
@media(max-width:700px){.keyboard-hints>span:nth-last-child(4),.keyboard-hints>span:nth-last-child(5){display:none}.keyboard-hints{gap:9px}.footer{justify-content:center}}
@media(max-width:600px){
  .mission-actions{margin-top:10px;gap:8px;grid-template-columns:1.25fr 1fr}
  .mission-actions .mission-button,.worlds-button{min-height:42px;font-size:16px;padding:8px 10px}
  .worlds-button svg{width:18px;height:18px}
  .world-grid{gap:8px}
  .world-card{min-height:90px;padding:12px 9px;gap:8px;align-items:flex-start}
  .world-card.current{padding:11px 8px}
  .world-card>.chapter-number,.world-card>.world-number,.world-card>.map-number,.world-card>.world-index{width:31px;height:31px;font-size:18px}
  .world-card strong,.world-card h4{font-size:15px;line-height:1.25}
  .world-card small{font-size:11px;line-height:1.35}
  .world-card.completed:after{height:16px;width:16px;top:4px;right:4px;font-size:10px}
  .map-region h3{font-size:23px;margin-bottom:12px}
  .map-region{margin:24px 0}
  .worlds-summary{font-size:16px;padding:14px}
  .award-card h3{font-size:28px}
  .award-card p{font-size:16px}
  .reward-burst{width:124px;height:124px;margin:7px auto 23px}
  .reward-burst>svg,.award-card>.award-icon{width:88px;height:88px}
  .reward-burst>span{font-size:63px}
  .badge-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:21px 0}
  .earned-badge{padding:15px 9px}
  .earned-badge strong{font-size:15px}
  .earned-badge>svg,.earned-badge .badge-art>svg{width:65px;height:65px}
  .reward-toast{top:auto;bottom:249px;font-size:17px;padding:12px 16px;gap:9px;max-width:calc(100% - 28px)}
  .reward-toast svg{width:27px;height:27px}
  .reward-toast small{font-size:13px}
  .keyboard-hints>.mouse-hint kbd{font-size:10px}
}
@media(max-width:370px){
  .world-grid{grid-template-columns:1fr}
  .world-card{min-height:76px;align-items:center}
  .world-card strong{font-size:16px}
  .world-card small{font-size:12px}
  .container-actions>.primary-button,.container-actions>.secondary-button{font-size:16px}
  .container-actions>.primary-button svg{display:none}
}
@media(max-height:560px) and (min-width:601px){
  .mission-actions{margin-top:10px}
  .mission-actions .mission-button,.worlds-button{min-height:39px;font-size:15px;padding:8px 9px}
  .reward-toast{top:15px;font-size:17px;max-width:300px;padding:12px 16px}
}
@media(pointer:coarse){.keyboard-hints{display:none}.footer-note{display:block}.footer>span:first-child{display:flex}}

/* Container actions stay visible while a tall fridge shelf scrolls inside. */
.container-card{display:flex;flex-direction:column;overflow:hidden}
.container-card>.close-button{z-index:2}
.container-heading,.container-info,#container-message,.container-actions,.container-hint{flex-shrink:0}
.container-stage{flex:0 1 auto;min-height:145px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--container-shadow) var(--container-body)}
@media(min-width:371px) and (max-width:600px){
  #container-slots:has(>.container-slot:nth-child(3)):not(:has(>.container-slot:nth-child(4))),
  #container-slots:has(>.container-slot:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:10px}
  #container-slots:has(>.container-slot:nth-child(3)):not(:has(>.container-slot:nth-child(4))) .container-slot,
  #container-slots:has(>.container-slot:nth-child(5)) .container-slot{min-height:137px;padding:9px 5px}
  #container-slots:has(>.container-slot:nth-child(3)):not(:has(>.container-slot:nth-child(4))) .food-illustration,
  #container-slots:has(>.container-slot:nth-child(5)) .food-illustration{height:66px}
  #container-slots:has(>.container-slot:nth-child(3)):not(:has(>.container-slot:nth-child(4))) .food-illustration>svg,
  #container-slots:has(>.container-slot:nth-child(5)) .food-illustration>svg{height:66px}
  #container-slots:has(>.container-slot:nth-child(3)):not(:has(>.container-slot:nth-child(4))) .slot-state,
  #container-slots:has(>.container-slot:nth-child(5)) .slot-state{font-size:11px}
  #container-slots:has(>.container-slot:nth-child(3)):not(:has(>.container-slot:nth-child(4))) .slot-name,
  #container-slots:has(>.container-slot:nth-child(5)) .slot-name,
  #container-slots:has(>.container-slot:nth-child(3)):not(:has(>.container-slot:nth-child(4))) .slot-name strong,
  #container-slots:has(>.container-slot:nth-child(5)) .slot-name strong{font-size:15px;letter-spacing:-.3px;overflow-wrap:normal}
}
@media(max-height:560px){
  .container-stage{min-height:110px}
  .container-heading .eyebrow,.container-hint{display:none}
  .container-heading p{margin-bottom:11px}
  .container-info{margin-top:14px}
  #container-message:empty{min-height:6px}
}
@media(max-height:560px) and (min-width:601px){
  .container-card{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto 1fr auto;gap:10px 18px;padding:16px 22px;height:min(390px,100%)}
  .container-heading{grid-column:1/-1;padding:0 30px}
  .container-heading h2{font-size:27px;margin:0 0 5px}
  .container-heading p{font-size:16px;margin:0;line-height:1.4}
  .container-stage{grid-column:1;grid-row:2/5;min-height:0;align-self:stretch;padding:8px 7px 13px;border-width:6px;border-radius:10px}
  .container-overlay[data-kind="fridge"] .container-stage{padding:8px 7px 13px;border-width:6px}
  .container-art{display:none}
  #container-slots{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:9px}
  #container-slots:has(>.container-slot:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .container-slot{min-height:134px;padding:10px 7px}
  .food-illustration,.food-illustration>svg{height:68px}
  .slot-name,.slot-name strong{font-size:16px}
  .slot-state{font-size:12px}
  .container-info{grid-column:2;grid-row:2;margin:5px 0 0;gap:8px;align-items:center}
  #container-selection{font-size:16px}
  #container-bag-count{font-size:12px;padding:6px 8px}
  #container-message{grid-column:2;grid-row:3;margin:0;font-size:15px;min-height:0;align-self:center}
  #container-message:empty{min-height:0;margin:0}
  .container-actions{grid-column:2;grid-row:4;gap:7px}
  .container-actions>.primary-button,.container-actions>.secondary-button{min-height:47px;font-size:17px;padding:11px 6px}
  .container-actions>.primary-button svg{display:none}
  /* Every other action button is 47px here, one pixel under a 48px touch
     target; Share keeps the real minimum since it is the one still gaining
     a whole new picture-picking step at this size. */
  #container-share{min-height:48px}
  .container-hint{display:none}
}
@media(max-height:740px) and (max-width:600px){
  .container-heading .eyebrow,.container-hint{display:none}
  .container-card{padding-top:20px;padding-bottom:18px}
  .container-heading h2{font-size:27px;margin-top:0}
  .container-heading p{font-size:16px;margin-bottom:13px}
  .container-stage{min-height:100px}
  .container-art{height:50px}
  .container-info{margin-top:16px}
}
/* The status pill doubles as a mouse-accessible quiet-walking switch. */
#stealth-pill{cursor:pointer;font-family:inherit;text-align:left}
#stealth-pill[aria-pressed="true"]{border-color:#97ad7d;background:#edf3db}
#game{touch-action:none}
.quest{position:relative}
#quest-toggle{position:absolute;top:12px;right:12px;width:30px;height:30px;display:grid;place-items:center;border:1px solid #d5dec5;border-radius:50%;background:#f2f5e8;color:#627e4f;font-size:21px;line-height:1;cursor:pointer}
.quest>.eyebrow{padding-right:24px;display:block}
.quest.compact h2,.quest.compact .mission-summary,.quest.compact>.quest-line,.quest.compact>.quest-progress,.quest.compact>.extra-quests{display:none!important}
.quest.compact .mission-actions{margin-top:17px}
.quest.compact{padding-top:20px;padding-bottom:15px}
@media(max-width:600px){#quest-toggle{top:8px;right:9px;width:28px;height:28px}.quest.compact{padding-top:17px;padding-bottom:12px}}

#stealth-pill,#quest-toggle{pointer-events:auto}
#stealth-pill[aria-pressed="true"]{color:#3f633e}
/* Compact first: one readable next step, with room left for the world. */
.compact-mission{display:none}
.quest.compact{width:276px;padding:14px 15px 12px}
.quest.compact .compact-mission{display:block;margin-top:14px}
#compact-step{display:block;font-size:17px;line-height:1.3;color:#355138;font-weight:600}
.compact-why{display:block;font-size:13px;line-height:1.3;color:#647953;margin-top:2px}
.compact-meter{height:5px;background:#dfe7d1;overflow:hidden;border-radius:8px;margin:10px 0 5px}
#compact-fill{display:block;height:100%;background:#8fa762;transition:width .25s}
#compact-progress{font-size:12px;color:#647953}
.quest.compact .mission-actions{margin-top:10px;gap:7px}
.quest.compact .mission-actions button{font-size:14px;min-height:39px;padding:8px 6px;gap:5px}
.quest.compact .mission-actions svg{width:17px;height:17px}
.quest>.eyebrow{padding-right:99px;line-height:1.4;min-height:28px;display:flex;align-items:center;font-size:9px;letter-spacing:.6px}
#quest-toggle{width:47px;height:36px;top:10px;right:11px;border-radius:8px;font-size:13px;font-weight:600}
.read-button{display:inline-flex;align-items:center;justify-content:center;width:38px;min-width:38px;height:38px;border-radius:50%;background:#e6edd7;border:1px solid #c6d5b5;color:#45633d;pointer-events:auto;cursor:pointer;vertical-align:middle}
.read-button svg{width:20px;height:20px}
.read-button:hover{background:#d7e5c7}
#mission-hear{position:absolute;top:9px;right:65px;width:36px;min-width:36px;height:36px}
.dialog-hear{float:right;margin-right:18px;margin-top:20px}
.container-hear{position:absolute;top:25px;left:27px}
#intro-audio{margin-top:10px;min-height:42px;padding:10px 12px;font-size:15px}
#toast{display:flex;align-items:center;gap:12px}
#toast-message{flex:1}
#toast-stars{flex-shrink:0;color:#c9a227;letter-spacing:2px}
#toast-stars:empty{display:none}
#toast-hear{flex-shrink:0}
.rest-controls{position:absolute;z-index:4;bottom:91px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:12px;max-width:calc(100% - 24px)}
.rest-controls[hidden]{display:none}
.rest-controls>span{font-size:16px;white-space:nowrap}
.rest-controls .secondary-button{white-space:nowrap;font-size:15px;min-height:48px;padding:9px 12px}
/* main.js positions the prompt below Scout with an inline top. A mobile
   bottom inset would constrain its height and push wrapped text outside it. */
#interaction{cursor:pointer;pointer-events:auto;border:1px solid #eadfbf;bottom:auto}
#interaction:not(.visible){pointer-events:none}
.speech-stop{position:absolute;left:50%;bottom:86px;transform:translateX(-50%);z-index:35;background:#304b37;color:#fff8e4;border:2px solid #f3e9c9;box-shadow:0 3px 15px #283e3640;border-radius:24px;min-height:44px;padding:10px 19px;font-size:16px;display:flex;align-items:center;gap:10px}
.speech-stop[hidden]{display:none}
.world-entry{position:relative;min-width:0}
.world-entry>.world-card{width:100%;height:100%;padding-right:43px}
.world-entry>.read-button{position:absolute;bottom:8px;right:6px;width:32px;min-width:32px;height:32px}
.bag-item .read-button{margin:0 0 8px}
.pause-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pause-settings .secondary-button{white-space:normal;font-size:16px;padding:12px}
.pause-settings [aria-pressed="true"]{background:#e1ebd4;border-color:#9db888;color:#35583a}
.setting-help{font-size:15px!important;line-height:1.5!important}
.calm-motion *, .calm-motion *:before,.calm-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(max-width:600px){
  .quest.compact{width:254px;max-width:100%;padding:11px 12px}
  #compact-step{font-size:16px;line-height:1.25}
  .quest.compact .compact-mission{margin-top:8px}
  .quest>.eyebrow{padding-right:91px;font-size:9px}
  #quest-toggle{right:8px;top:8px;width:44px;height:35px}
  #mission-hear{right:59px;top:8px;width:35px;min-width:35px;height:35px}
  .quest.compact .mission-actions{margin-top:8px}
  .quest.compact .mission-actions button{font-size:13px;min-height:37px}
  .quest.compact~.status-column{justify-content:flex-start;gap:5px;margin-top:6px}
  .status-column .status-pill{max-width:195px;font-size:11px;padding:8px}
  .camera-toolbar button{font-size:12px;gap:4px;padding:9px 8px}
  .camera-toolbar button kbd,.camera-toolbar button b{display:none}
  #photo-button span{font-size:0}#photo-button span:after{content:'Photo';font-size:12px}
  .camera-toolbar{gap:5px}
  .rest-controls{bottom:207px;flex-wrap:wrap;justify-content:center;gap:6px;padding:9px 11px;width:calc(100% - 30px)}
  .rest-controls>span{font-size:15px}
  .rest-controls .secondary-button{font-size:14px;padding:8px 10px}
  .container-hear{top:14px;left:14px;width:33px;min-width:33px;height:33px}
  .container-heading .eyebrow{padding-left:35px;padding-right:35px}
  .dialog-hear{margin-right:17px;margin-top:15px}
  .speech-stop{bottom:12px}
  .pause-settings{gap:8px}.pause-settings .secondary-button{font-size:15px}
}
@media(max-height:560px) and (min-width:601px){
  .quest.compact{width:253px;padding:9px 12px}
  .quest.compact .compact-mission{margin-top:4px}
  .quest.compact .mission-actions{margin-top:6px}
  #compact-step{font-size:15px}
  .compact-meter{margin-top:6px}
  .rest-controls{bottom:69px}
  #intro-audio,#intro-fullscreen{display:inline-flex;width:calc(50% - 5px);font-size:12px;padding:9px 5px;justify-content:center;min-height:39px}
}
#compact-icon{float:left;margin:1px 8px 7px 0;width:26px;height:26px;padding:3px;color:#738a51;background:#e5eccf;border-radius:6px}
.world-number{position:relative;flex-direction:column}
.world-number svg{width:22px;height:22px}
.world-number b{position:absolute;bottom:-7px;right:-6px;font:600 10px 'DM Sans',sans-serif;padding:2px 3px;min-width:16px;border-radius:8px;background:#fff9e5;color:#527044}
.reward-toast .read-button{flex-shrink:0;width:35px;min-width:35px;height:35px}
.reward-toast .read-button svg{width:19px;height:19px}
.reward-toast.listen-card{gap:10px}
.reward-toast.listen-card .read-button{pointer-events:auto}
.container-heading{padding-left:24px;padding-right:24px}
#intro-hear{position:absolute;right:20px;top:44px}
.intro-card{position:relative}
.container-actions .secondary-button{display:flex;align-items:center;justify-content:center;gap:7px}
.bag-item [data-eat]{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.bag-item [data-eat] svg{width:18px;height:18px}
@media(max-width:600px){.container-actions .secondary-button{gap:4px}.container-actions .secondary-button svg{width:16px;height:16px}}
.intro-card{max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.intro-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.intro-options #intro-audio,.intro-options #intro-fullscreen{margin:0;width:100%;min-height:42px;padding:9px 5px;font-size:13px;display:flex;align-items:center;justify-content:center;gap:5px}
.speech-stop{bottom:12px}
@media(max-height:700px){.intro-card .intro-art{height:88px}.intro-card .intro-art img{height:85px;top:0;left:50%;transform:translateX(-50%)}.intro-card .art-sun{height:80px;width:80px;left:50%;transform:translateX(-50%)}.intro-card .art-ground{top:78px}.intro-card .character-shadow{top:80px}.intro-card .art-note,.intro-card .art-pine{display:none}.intro-card h1,.intro-card .intro-title{font-size:34px}.intro-card .intro-chapters{display:none}.intro-card .intro-footer{font-size:10px}}
#toast:not(.visible),#reward-toast:not(.visible),#interaction:not(.visible){visibility:hidden}
.map-legend svg{width:14px;height:14px;color:#689b95}
@media(max-width:600px){
  .quest.compact{width:min(254px,calc(100% - 74px))}
  .quest.compact~.status-column{position:absolute;right:0;top:0;margin:0;flex-direction:column;align-items:center;gap:8px;width:65px}
  .quest.compact~.status-column .status-pill{width:44px;height:44px;justify-content:center;padding:10px}
  .quest.compact~.status-column #stealth-text,.quest.compact~.status-column .status-dot,.quest.compact~.status-column #lives,.quest.compact~.status-column .energy>span{display:none}
  .quest.compact~.status-column .status-pill svg{width:21px;height:21px}
  .quest.compact~.status-column .energy{padding:8px 7px;gap:4px;width:65px}
  .quest.compact~.status-column .energy-track{width:28px}
  .quest.compact~.status-column .alert-track{position:static;width:52px;margin-top:-4px}
}
@media(max-width:600px) and (max-height:700px){.quest.compact .compact-meter{display:none}.quest.compact #compact-progress{display:block;margin-top:7px}}

/* The view stays adjustable while the world gently frames nearby discoveries. */
.view-toggle{position:static;pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:10px 13px;border-radius:12px;color:#36563d;font-weight:600;font-size:13px;cursor:pointer;border:1px solid #61794b38}
.view-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.view-toggle:focus-visible,.car-controls button:focus-visible{outline:3px solid #d4a343;outline-offset:3px}
.car-controls{position:absolute;z-index:5;bottom:91px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:11px 15px;border-radius:12px}
.car-controls[hidden]{display:none}
.car-controls>svg{width:27px;height:27px;stroke:#567654;fill:none;stroke-width:1.7;flex:none}
.car-controls>span{font-size:15px;max-width:235px}
.car-controls .secondary-button{white-space:nowrap;font-size:15px;min-height:48px;padding:9px 12px}
#car-controls .secondary-button{min-height:48px}
.watch-out{display:flex;align-items:flex-start;gap:12px;text-align:left;padding:15px;background:#eee5c8;border-radius:13px;margin-top:18px}
.watch-out>svg{width:30px;height:30px;flex:none;stroke:#6a7148;fill:none;stroke-width:1.7}
.watch-out strong{font-size:18px;color:#4a6344}
.watch-out p{font-size:17px!important;line-height:1.5;margin:5px 0 0!important}
.world-setting{display:block;margin-top:5px;font-size:12px;color:#6c755f;line-height:1.35}
@media(max-width:600px){
  .view-toggle{width:65px;min-height:52px;padding:7px 4px;flex-direction:column;gap:3px;font-size:10px;border-radius:10px}
  .view-toggle svg{width:18px;height:18px}
  .car-controls{bottom:185px;width:calc(100% - 28px);padding:8px 10px;gap:7px;flex-wrap:wrap;justify-content:center}
  .car-controls>span{font-size:13px;max-width:140px}
  .car-controls .secondary-button{font-size:13px;min-height:48px;padding:8px}
  .car-controls .read-button{width:34px;height:34px;flex:none}
  body.driving .bottom-hud{bottom:254px}
  .watch-out{padding:12px;gap:9px}.watch-out p{font-size:16px!important}
}
@media(max-height:560px) and (min-width:601px){
 .view-toggle{min-height:44px;font-size:12px;padding:7px 10px}
 .car-controls{bottom:65px;padding:8px 10px}.car-controls>span{max-width:170px;font-size:13px}
}
@media(max-width:600px){
  .car-controls{flex-wrap:nowrap}
  .car-controls>svg{display:none}
  .car-controls>span{flex:1;min-width:0;max-width:none;font-size:12px;line-height:1.35}
  .car-controls .secondary-button{flex:none}
}
.car-controls .secondary-button{width:auto}
@media(max-width:600px){
 .reward-toast{width:calc(100% - 28px);box-sizing:border-box;font-size:15px;gap:8px;padding:10px 12px}
 .reward-toast>div{flex:1;min-width:0}.reward-toast small{font-size:12px;line-height:1.35}
 body.driving .reward-toast{bottom:auto;top:12px}
}
@keyframes look-inside{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.container-card{animation:look-inside .28s ease-out;transform-origin:center}
@media(min-width:1100px){
 .container-overlay{justify-content:flex-end;backdrop-filter:none;background:linear-gradient(90deg,#16372e08,#16372e50)}
}

/* Energy is readable at a glance and can explain itself aloud. */
#energy-status{cursor:pointer;pointer-events:auto;font-family:inherit;color:#536b41;min-height:42px}
#energy-status:focus-visible{outline:3px solid #d4a343;outline-offset:3px}
#energy-status .energy-track{display:block;height:8px;width:64px;background:#dce3ce;border:1px solid #72835938;flex:none}
#energy-status #energy-fill{background:#7c9e4a;transition:width .2s,background-color .4s}
#energy-status #energy-value{font-size:13px;min-width:33px;font-variant-numeric:tabular-nums;letter-spacing:0}
#energy-status #lives{font-size:11px;letter-spacing:0;color:inherit;text-transform:none}
#energy-status .energy-voice{width:17px;height:17px;flex:none}
#energy-status[data-level="medium"]{color:#806123;background:#fff5d9}
#energy-status[data-level="medium"] #energy-fill{background:#c49a37}
#energy-status[data-level="low"]{color:#93582f;background:#fff0de}
#energy-status[data-level="low"] #energy-fill{background:#d18447}
#sound-preview{display:flex;gap:8px;align-items:center;justify-content:center}
#sound-preview svg{width:20px;height:20px;flex:none}
@media(max-width:600px){
 #energy-status{gap:5px;padding:7px 9px}
 #energy-status #lives{display:none}
 .quest.compact~.status-column #energy-status{display:grid;grid-template-columns:1fr 17px;gap:3px 2px;width:65px;min-height:39px;padding:5px 7px}
 .quest.compact~.status-column #energy-status>svg:first-child,.quest.compact~.status-column #energy-status>span:nth-child(2){display:none}
 .quest.compact~.status-column #energy-status .energy-track{display:block;grid-column:1/-1;width:49px;height:6px}
 .quest.compact~.status-column #energy-status #energy-value{display:block;min-width:0;font-size:11px}
 .quest.compact~.status-column #energy-status .energy-voice{width:15px;height:15px}
}
/* A picture, a word and its first letter stay together while choosing food. */
#container-selection{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.word-letter{display:flex;align-items:baseline;justify-content:center;gap:3px;min-width:62px;padding:8px;border-radius:12px;background:#e5edd2;color:#4d693e;font:600 32px/1.1 'DM Sans',sans-serif}
.word-letter>small{font-size:23px}
.word-detail{display:block;min-width:0}
.word-detail>strong{display:block;font-size:24px;color:#365839;line-height:1.15}
.word-detail>small{display:block;font-size:13px;color:#737e64;margin-top:4px;line-height:1.3}
.bag-word{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;background:transparent;color:#3d5739;border-radius:12px;padding:5px;cursor:pointer}
.bag-word>strong{font-size:18px}.bag-word>small{font-size:13px;color:#6b8157}
.bag-word:focus-visible,.word-card:focus-visible{outline:3px solid #d4a343;outline-offset:2px}
.word-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:14px 0 25px}
.word-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid #c7d6b6;background:#eff3df;border-radius:13px;padding:12px 7px;color:#43613c;min-width:0}
button.word-card{cursor:pointer}.word-card .food-illustration{width:75px;height:60px}.word-card .food-illustration svg{width:100%;height:100%}
.word-card>b{font-size:24px}.word-card>strong{font-size:15px}.word-card>svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7}
.word-unknown{justify-content:center;border-style:dashed;background:#f3f3e8;color:#89977a;min-height:145px;text-align:center}
.word-unknown>span{font:34px 'Fraunces',serif}.word-unknown>small{font-size:12px;line-height:1.4}
@media(max-width:600px){
 .container-info{flex-wrap:wrap;gap:8px}
 #container-selection{flex-basis:calc(100% - 47px)}
 .word-letter{min-width:48px;font-size:27px;padding:7px}.word-letter>small{font-size:19px}
 .word-detail>strong{font-size:22px}.word-detail>small{font-size:12px}
 #container-bag-count{margin-left:auto;font-size:12px;padding:4px 8px}
 .word-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .word-card .food-illustration{width:85px;height:68px}
}

/* Spoken food names never cover Take / Leave / Close on a short phone. */
.speech-stop.inline-speech{position:static;transform:none;width:max-content;max-width:100%;margin:13px auto 0;min-height:42px;padding:8px 15px;box-shadow:none}
.speech-stop.inline-speech[hidden]{display:none}

/* HUD controls share a real layout: changing a label or adding a wallet
   moves the following control instead of covering it. */
.top-hud{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,max-content);align-items:start;justify-content:space-between;gap:12px;bottom:110px;grid-template-rows:minmax(0,1fr)}
.top-hud>.quest{min-width:0;max-width:100%;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b6c5a0 transparent;pointer-events:auto}
.top-hud>.status-column{position:static;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:8px;width:auto;min-width:0;margin:0}
.status-column>.view-toggle{position:static;inset:auto;min-height:44px;flex-shrink:0}
.status-column>.alert-track{position:static;max-width:100%;margin:0;flex-shrink:0}
.status-column>button{flex-shrink:0;min-height:44px;max-width:100%;pointer-events:auto}
@media(max-width:600px){
  .top-hud{grid-template-columns:minmax(0,1fr) 65px;gap:9px;bottom:205px}
  .top-hud>.quest,.top-hud>.quest.compact{width:100%;max-width:100%}
  .top-hud>.quest.compact{max-width:min(100%,280px)}
  .top-hud>.status-column,.quest.compact~.status-column{position:static;width:65px;margin:0;gap:6px;align-items:center;flex-direction:column}
  .status-column #stealth-pill{width:44px;height:44px;min-height:44px;justify-content:center;padding:10px}
  .status-column #stealth-pill svg{width:21px;height:21px}
  .status-column #stealth-text,.status-column .status-dot{display:none}
  .status-column>.alert-track{width:52px;height:3px;margin:0}
  .status-column>.view-toggle{width:65px;min-height:44px;padding:4px;gap:2px}
  .top-hud>.quest:not(.compact) .mission-instruction{grid-template-columns:1fr;gap:2px}
  .top-hud>.quest:not(.compact) .mission-instruction>strong{font-size:15px}
}
@media(max-width:600px) and (max-height:700px){
  .bottom-hud{bottom:182px}
  .map-button canvas{display:none}
  .map-button{width:65px;min-height:44px;padding:6px 4px;display:flex;align-items:center;justify-content:center}
  .map-button>span{font-size:0;padding:0;gap:4px}
  .map-button>span:after{content:"Map";font-size:11px}
}
@media(pointer:coarse) and (min-width:601px) and (min-height:561px){.top-hud{bottom:160px}}
@media(max-height:560px) and (orientation:landscape){
  .top-hud{top:12px;left:14px;right:14px;bottom:116px;grid-template-columns:minmax(0,290px) 224px;gap:12px}
  .top-hud>.status-column,.quest.compact~.status-column{display:grid;grid-template-columns:65px 65px 82px;align-items:center;justify-items:center;gap:6px;width:224px}
  .status-column #stealth-pill{grid-column:1/span 2;grid-row:2;width:100%;max-width:100%;min-height:44px;height:44px;font-size:11px;padding:6px;gap:5px}
  .status-column #stealth-text{display:inline}
  .status-column .status-dot{display:none}
  .status-column #coin-wallet{grid-column:1;grid-row:1;width:65px}
  .status-column #energy-status{grid-column:3;grid-row:1/span 2}
  .status-column>.view-toggle{grid-column:2;grid-row:1;width:65px;min-height:44px;flex-direction:column;gap:2px;font-size:10px;padding:3px}
  .status-column>.view-toggle svg{width:17px;height:17px}
  .status-column>.alert-track{grid-column:1/-1;grid-row:3;width:100%;height:3px;margin:0}
  .camera-toolbar,.camera-toolbar.playing-only{top:auto;bottom:17px;left:50%;right:auto;transform:translateX(-50%);max-width:calc(100% - 240px);flex-wrap:wrap;justify-content:center}
  .bottom-hud{top:auto;bottom:103px;right:16px;left:auto}
}
@media(max-height:360px) and (orientation:landscape){
  .bottom-hud{right:calc(50% - 52px);bottom:70px}
  .map-button canvas{display:none}
  .map-button{min-height:36px;padding:7px 9px}
  .map-button>span{padding:0;font-size:10px}
}

@media(max-height:360px) and (orientation:landscape){
  .camera-toolbar,.camera-toolbar.playing-only{flex-wrap:nowrap;gap:4px;max-width:calc(100% - 205px);width:max-content}
  .camera-toolbar button{flex-direction:column;justify-content:center;gap:2px;font-size:10px;min-height:44px;padding:4px 7px}
  .camera-toolbar button svg{width:17px;height:17px}
  .camera-toolbar #inventory-button>b,.camera-toolbar #journal-button>b,.camera-toolbar button kbd{display:none}
  #photo-button span{font-size:0}#photo-button span:after{font-size:10px}
  .bottom-hud{right:calc(50% - 32px);bottom:67px}
  .map-button{width:65px;min-height:36px}
  .map-button>span{font-size:0}
  .map-button>span:after{content:"Map";font-size:11px}
}
/* A spoken hint gets a reserved lane, so it never covers a HUD tap target. */
@media(max-width:600px) and (orientation:portrait){
  #game-shell:has(#toast.visible) .top-hud{bottom:264px}
  #toast{left:14px;right:auto;top:auto;bottom:194px;transform:none;max-width:calc(100% - 105px);width:calc(100% - 105px);padding:7px 8px;gap:6px;font-size:12px;line-height:1.35}
  #toast.visible{transform:none}
  #toast-message{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  #toast-hear{width:38px;height:38px;min-width:38px}
}
@media(max-height:360px) and (orientation:landscape){
  #game-shell:has(#toast.visible) .top-hud{bottom:128px}
  #toast{top:auto;bottom:67px;left:116px;right:auto;transform:none;width:calc(100% - 362px);max-width:calc(100% - 362px);padding:6px;gap:5px;font-size:11px;line-height:1.25}
  #toast.visible{transform:none}
  #toast-message{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  #toast-hear{width:38px;height:38px;min-width:38px}
  #game-shell:has(#toast.visible) .bottom-hud{left:calc(100% - 238px);right:auto;bottom:80px}
}
@media(min-width:601px) and (min-height:561px){
  #toast{left:calc(50% - 90px);max-width:min(360px,calc(50% - 50px))}
  #toast.visible{transform:none}
}
@media(max-width:600px) and (orientation:portrait){
  #game-shell:has(#toast.visible) .bottom-hud{bottom:182px}
  #game-shell:has(#toast.visible) .map-button{width:65px;min-height:44px;padding:6px 4px;display:flex;align-items:center;justify-content:center}
  #game-shell:has(#toast.visible) .map-button canvas{display:none}
  #game-shell:has(#toast.visible) .map-button>span{font-size:0;padding:0;gap:4px}
  #game-shell:has(#toast.visible) .map-button>span:after{content:'Map';font-size:11px}
}
@media(max-height:560px) and (min-height:361px) and (orientation:landscape){
  .camera-toolbar,.camera-toolbar.playing-only{flex-wrap:nowrap;width:max-content;gap:6px}
  .camera-toolbar button{flex-direction:column;justify-content:center;gap:2px;font-size:12px;min-height:44px;padding:4px 9px}
  .camera-toolbar button svg{width:18px;height:18px}
  .camera-toolbar #inventory-button>b,.camera-toolbar #journal-button>b,.camera-toolbar button kbd{display:none}
  #toast{top:auto;bottom:80px;left:314px;right:auto;transform:none;width:min(240px,calc(100% - 448px));max-width:min(240px,calc(100% - 448px));padding:7px 8px;gap:6px;font-size:12px;line-height:1.3}
  #toast.visible{transform:none}
  #toast-message{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}

/* The game name is one readable two-line mark at every screen size. */
.header .brand{flex:0 0 auto;gap:10px;min-width:0}
.header .brand-name{display:flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:nowrap}
.header .brand-name strong{display:block;font-size:26px;font-weight:600;line-height:1;letter-spacing:2px}
.header .brand-name small{display:block;margin:0;font-size:11px;font-weight:700;line-height:1.2;letter-spacing:2.25px}
.header .brand-mark{flex:0 0 auto}
.intro-topline>.eyebrow{line-height:1.45;text-align:left}
.intro-topline>.edition{flex-shrink:0;max-width:76px;line-height:1.5;text-align:right}
@media(max-width:600px){
  .header .brand{gap:7px}
  .header .brand-name strong{font-size:21px;letter-spacing:1.4px}
  .header .brand-name small{font-size:9px;letter-spacing:1.55px}
  .header .brand-mark{width:29px;height:36px}
}
@media(max-width:350px){
  .header .brand-mark{display:grid;width:25px;height:33px}
  .header .brand-mark svg{width:20px;height:25px}
  .header .brand{gap:6px}
  .header .brand-name strong{font-size:19px;letter-spacing:1.2px}
  .header .brand-name small{font-size:8px;letter-spacing:1.45px}
}

/* Official character cutouts share a centered baseline, including wider coats. */
.intro-art img#welcome-character{height:calc(100% - 7px);width:auto;max-width:none;left:50%;top:3px;translate:-50% 0;transform:none;object-fit:contain;object-position:center bottom}


/* Play stays outside the scrolling welcome details, even in a short window. */
.intro-card{display:flex;flex-direction:column;min-height:0;max-width:100%;padding:0;overflow:hidden;transform:none;border-radius:12px 12px 32px 12px}
.intro-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:22px 26px 14px}
.intro-play-actions{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:stretch;gap:10px;flex-shrink:0;padding:14px 26px 22px;border-top:1px solid #dce1cc;background:#fbf8eb}
.intro-play-actions #start{min-height:56px;min-width:0;flex:1;gap:12px;font-size:17px;font-weight:700;line-height:1.35;text-align:left;padding:12px 16px}
.intro-play-actions #start svg{flex:none}
.intro-play-actions #intro-team{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;margin:0;padding:9px 12px;font-size:15px;line-height:1.3;border:1px solid #b7c9aa;border-radius:9px;background:#edf2df;color:#34523b}
.intro-play-actions #intro-team svg{width:25px;height:24px;flex:none}
.intro-play-actions #intro-team.is-invited{background:#e0ebcc;border:2px solid #628346;font-weight:700}
.intro-play-actions>.speech-stop{grid-column:1/-1;width:100%;min-height:44px;margin:0}
.intro-play-actions #intro-hear{position:static;flex:0 0 48px;width:48px;height:auto;min-height:56px;margin:0;align-self:stretch;border:1px solid #d1dcc0;background:#edf1de;border-radius:9px}
.intro-card .intro-options #intro-audio,.intro-card .intro-options #intro-fullscreen{min-height:44px}
@media(min-height:701px) and (max-height:940px){
  .intro-card .intro-art{height:128px}
  .intro-card .art-sun{width:120px;height:120px;left:50%;transform:translateX(-50%)}
  .intro-card .art-ground{top:118px}
  .intro-card .character-shadow{top:120px}
  .intro-card h1,.intro-card .intro-title{font-size:42px}
  .intro-card .intro-eyebrow{margin-top:8px}
  .intro-card .intro-chapters{display:none}
  .intro-card .intro-footer{margin-top:10px}
  .intro-content{padding-top:18px}
}
@media(max-width:600px){
  .intro-content{padding:16px 18px 12px}
  .intro-play-actions{gap:8px;padding:12px 18px 18px}
}
@media(max-height:700px){
  .intro-overlay{padding-top:12px;padding-bottom:12px}
  .intro-content{padding-top:14px}
  .intro-play-actions{padding-top:10px;padding-bottom:14px}
}

/* --- Sticker toast: one queued celebration at a time, paced by game time ---
   Top-anchored everywhere: bottom-anchoring on a coarse pointer put it in
   the same band as .car-controls, the map button and #toast, and it could
   cover "Hop out" during a first drive. 110px clears the reward toast's own
   band (top:25px, ~78px tall) on desktop; the coarse-pointer override keeps
   that same clearance instead of dropping back into the bottom band. */
.sticker-toast{position:absolute;z-index:5;pointer-events:auto;display:flex;align-items:center;gap:12px;left:50%;top:110px;transform:translate(-50%,-8px);opacity:0;max-width:min(360px,calc(100% - 30px));padding:10px 16px;border:1px solid #eef4d7;border-radius:11px;background:#fffbed;box-shadow:0 7px 25px #29482e2b;color:#587644;font-size:14px;font-weight:600;line-height:1.3;text-align:left;transition:opacity .25s,transform .25s}
.sticker-toast.visible{opacity:1;transform:translate(-50%,0)}
.sticker-toast:not(.visible){visibility:hidden;pointer-events:none}
.sticker-toast-art{width:56px;height:42px;flex-shrink:0;display:block}
.sticker-toast-art svg{width:100%;height:100%;display:block}
.sticker-toast strong{flex:1;min-width:0}
#sticker-toast-hear{width:48px;min-width:48px;height:48px;flex-shrink:0}
@media(max-width:600px){
  .sticker-toast{font-size:13px;padding:8px 12px;gap:9px;max-width:calc(100% - 26px)}
  .sticker-toast-art{width:46px;height:35px}
  #sticker-toast-hear{width:44px;min-width:44px;height:44px}
}
/* On a coarse (touch) pointer the quest card (compact) reaches about 232px
   into #game-shell at phone width — well past where the desktop 110px would
   put the sticker toast — so it would sit right over the mission card and
   its "My mission" button (see tests/browser/engagement.spec.js's
   phone-width check). 250px clears the whole compact card with margin,
   with plenty of open ground below it before the next HUD row. */
@media(pointer:coarse){.sticker-toast{top:250px;bottom:auto}}
/* A short landscape phone (e.g. 844x390) has no room for 250px before the
   next HUD row: #car-controls (and the touch bottom row generally) sit much
   higher there than on a tall phone. The mission card is also short in this
   wide-but-squat shape (single-line title, no wrapping), so the smaller,
   pre-phone-width 96px clears both it and the car controls with margin —
   see tests/browser/engagement.spec.js's 844x390 landscape check. */
@media(pointer:coarse) and (max-height:540px) and (orientation:landscape){.sticker-toast{top:96px}}

/* --- Journal tabs: Photos (default) and Stickers, each a big picture button --- */
.journal-tabs{display:flex;gap:10px;margin:4px 0 20px}
.journal-tab-button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:60px;padding:10px 8px;border-radius:12px;border:1px solid #d8e2c6;background:#edf2e1;color:#456238;font-size:13px;font-weight:600}
.journal-tab-button svg{width:23px;height:23px}
.journal-tab-button[aria-pressed="true"]{background:#3f6139;border-color:#3f6139;color:#fdfce9}

/* --- Sticker grid: earned stickers in colour, unearned as a soft grey outline with their hint --- */
.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:11px;margin:18px 0}
.sticker-cell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-width:0;min-height:88px;text-align:center;border:1px solid #d8e2c6;border-radius:12px;padding:10px 6px;background:#edf2e1}
.sticker-cell-art{width:64px;height:48px}
.sticker-cell-art svg{width:100%;height:100%;display:block}
.sticker-cell strong{font-size:11px;font-weight:600;line-height:1.3;color:#3f6139}
.sticker-cell small{font-size:12px;line-height:1.35;color:#5c6a52}
.sticker-cell.unearned{background:#f5f5ee;border-style:dashed}
.sticker-cell.unearned .sticker-cell-art{opacity:.4;filter:grayscale(1)}
@media(max-width:600px){
  .journal-tab-button{min-height:52px;font-size:12px}
  .sticker-grid{gap:8px}
}

/* --- The picture-book reader: one page at a time, big and calm ---------- */
.book-reader{display:flex;flex-direction:column;gap:14px}
.book-page-content{display:flex;flex-direction:column;gap:14px}
/* Keep the reader's way forward, way out and speaker in view. Only the
   illustrated page scrolls, so a small screen never hides its controls. */
.dialog-overlay:has(.book-reader){position:fixed;inset:0;padding:12px;z-index:40}
.dialog-card:has(.book-reader){display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;max-height:100%;overflow:hidden}
.dialog-card:has(.book-reader)>#dialog-eyebrow{grid-row:1;grid-column:1;align-self:center;padding-right:0}
.dialog-card:has(.book-reader)>#dialog-close{position:static;grid-row:1;grid-column:2;justify-self:end;align-self:center;margin:0}
.dialog-card:has(.book-reader)>h2{grid-row:2;grid-column:1;margin:2px 0 6px}
.dialog-card:has(.book-reader)>#dialog-hear{grid-row:2;grid-column:2;float:none;align-self:center;justify-self:end;margin:0}
.dialog-card:has(.book-reader)>.speech-stop{grid-row:2;grid-column:1;justify-self:start;margin:0;max-width:100%;min-height:44px;padding:6px 12px;font-size:14px}
.dialog-card:has(.book-reader):has(>.speech-stop:not([hidden]))>h2{display:none}
.dialog-card:has(.book-reader)>#dialog-content{grid-row:3;grid-column:1/-1;min-height:0;overflow:hidden}
.dialog-card:has(.book-reader)>#dialog-action{grid-row:4;grid-column:1/-1;margin-top:0;min-height:48px}
.dialog-card:has(.book-reader) .book-reader{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px}
.dialog-card:has(.book-reader) .book-page-content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:2px}
.book-page-content>*{flex-shrink:0}
@media(max-height:650px){
  .dialog-card:has(.book-reader){padding:16px;gap:8px}
  .dialog-card:has(.book-reader)>h2{font-size:24px;margin:0}
  .dialog-card:has(.book-reader) .book-controls .secondary-button{min-height:44px;padding:9px 8px}
}
@media(min-width:480px) and (max-height:450px){
  /* One stable header row leaves the picture visible while Hear is playing. */
  .dialog-card:has(.book-reader){grid-template-columns:minmax(0,1fr) 44px 44px;grid-template-rows:minmax(44px,auto) minmax(0,1fr) auto}
  .dialog-card:has(.book-reader)>#dialog-eyebrow{display:none}
  .dialog-card:has(.book-reader)>h2,.dialog-card:has(.book-reader)>.speech-stop{grid-row:1;align-self:center}
  .dialog-card:has(.book-reader)>#dialog-hear{grid-column:2;grid-row:1}
  .dialog-card:has(.book-reader)>#dialog-close{grid-column:3;grid-row:1}
  .dialog-card:has(.book-reader)>#dialog-content{grid-row:2}
  .dialog-card:has(.book-reader)>#dialog-action{grid-row:3}
  .dialog-card:has(.book-reader) .book-page-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;align-items:start}
  .book-page-content>.book-stage{grid-column:1;grid-row:1/3;justify-self:center}
  .book-page-content>.book-words,.book-page-content>.book-find{grid-column:2}
}
.book-stage{position:relative;line-height:0;border-radius:12px;overflow:hidden;background:#e8ecdb;border:1px solid #d5ddc4}
#book-canvas{display:block;width:100%;height:auto;cursor:pointer;touch-action:manipulation}
/* The find object's own control on page four: sized and centred right over
   its spot (in the same 0-100 page grid src/book-art.js paints with) so a
   keyboard- or switch-using child can Tab to it and press Enter or Space,
   not just tap the picture with a pointer. Invisible until focused — the
   picture itself is what a sighted child looks at — but never display:none,
   so it stays a real, reachable part of the page in the dialog's own focus
   trap (main.js's Tab handler skips only [hidden] and disabled controls). */
.book-find-target{position:absolute;width:15%;min-width:44px;aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:50%;padding:0;margin:0;background:transparent;opacity:0;cursor:pointer}
.book-find-target:focus-visible{opacity:1;background:#fff3c866;outline:3px solid #eaba55;outline-offset:2px}
.book-words{display:flex;align-items:flex-start;gap:12px}
.book-sentence{flex:1;min-width:0;margin:0;font:600 23px/1.45 'DM Sans',sans-serif;color:#33482f}
.book-words .read-button{flex-shrink:0;margin-top:4px}
.book-find{display:flex;flex-direction:column;gap:10px;background:#eef2e1;border:1px solid #d7e0c5;border-radius:12px;padding:12px 14px}
.book-find-question{margin:0;font-size:16px;font-weight:600;color:#4a6440}
.book-find-status{margin:0;font-size:19px;font-weight:700;color:#3f6139}
.book-find-status:empty{display:none}
.book-word-card{display:flex;align-items:center;gap:12px;background:#fffdf3;border:1px solid #dfe6ce;border-radius:11px;padding:10px 12px}
.book-word-card .word-detail{flex:1}
.book-controls{display:flex;align-items:center;gap:10px}
.book-controls .secondary-button{width:auto;flex:1;margin-top:0;min-height:52px;gap:8px}
.book-controls .secondary-button:disabled{opacity:.45;cursor:default}
.book-controls .flip{transform:rotate(180deg)}
.book-page-count{flex-shrink:0;min-width:88px;text-align:center;font-size:13px;color:#77855f}
/* The one celebration in the reader: a soft gold ring around the spot that
   was just tapped, with a little star above it, so the thing that was found
   stays in plain sight underneath. Never created at all under Calmer motion
   (see sparkleBook in main.js) — not a frozen one, none. */
.book-sparkle{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none;border:3px solid #eaba55;border-radius:50%;box-shadow:0 0 0 4px #fff3c866;animation:book-sparkle .9s ease-out}
.book-sparkle:before{content:'';position:absolute;left:50%;top:-13px;width:19px;height:19px;margin-left:-9.5px;background:#e8a93f;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
/* The mark this leaves behind is the element's own plain style, not the last
   keyframe (no `forwards`), so the ring is still there and fully drawn if
   the animation never runs at all. */
@keyframes book-sparkle{0%{transform:scale(.4);opacity:0}40%{transform:scale(1.2)}100%{transform:scale(1)}}

/* --- My library: finished books in colour, the rest a soft outline ------ */
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;margin:16px 0}
.library-cell{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center;border:1px solid #d8e2c6;border-radius:12px;padding:9px 7px;background:#edf2e1}
.library-cover{display:block;width:100%;height:auto;border-radius:8px;background:#dfe6cd}
.library-cell strong{font-size:12px;font-weight:600;line-height:1.3;color:#3f6139}
.library-cell small{font-size:12px;line-height:1.35;color:#5c6a52}
.library-cell.unread{background:#f5f5ee;border-style:dashed;color:#8b9780}
.library-cover-blank{display:block;width:100%;aspect-ratio:320/220;border:1px dashed #cdd5be;border-radius:8px;background:#fbfbf4}
@media(max-width:600px){
  .book-sentence{font-size:20px;line-height:1.4}
  .book-find{padding:10px 11px}
  .book-find-question{font-size:15px}
  .book-find-status{font-size:17px}
  .book-controls{gap:7px}
  .book-controls .secondary-button{min-height:48px;font-size:16px;padding:12px 8px;gap:5px}
  .book-page-count{min-width:60px;font-size:11px}
  .library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .journal-tabs{flex-wrap:wrap;gap:7px}
  .journal-tab-button{font-size:11px;padding:9px 5px;gap:4px}
  .journal-tab-button svg{width:20px;height:20px}
}

/* A side adventure (src/side-adventures.js): today's one spoken line at the
   top of the mission card, the little "new adventure" tag on a finished
   world in the world list, and the small card that closes a finished visit.
   No badge styling anywhere here — a badge belongs to the day a world's own
   mission was finished. */
.side-line{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:14px 16px;background:#eef2e2;border:1px solid #dde5cc;border-left:4px solid #a4b986;border-radius:3px 10px 10px 3px;text-align:left}
.side-line-icon{width:34px;height:34px;color:#6d8a5b;stroke-width:1.5;flex-shrink:0}
.side-line-copy{flex:1;min-width:0}
.side-line-copy span{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#7c8e69;margin-bottom:3px}
.side-line-copy strong{display:block;font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:600;line-height:1.35;color:#304b37}
.side-line .read-button{flex-shrink:0}
.world-new-tag{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:999px;background:#e3edd0;border:1px solid #b9cd9e;color:#4f6b42;font-size:11px;font-weight:600;letter-spacing:.3px}
.side-award .reward-burst{width:118px;height:118px;margin-bottom:16px}
.side-award-art{width:56px;height:56px;color:#5f7d4f;stroke-width:1.4}
.side-award h3{font-size:25px;margin:10px 0}
.side-card-note{margin:14px 0 0;padding:12px 14px;background:#f4f2e3;border-radius:10px;color:#5d7156;font-size:14px;line-height:1.5}
@media(max-width:600px){
  .side-line{gap:10px;padding:12px}
  .side-line-copy strong{font-size:17px}
  .side-award .reward-burst{width:96px;height:96px}
}

/* --- One readable label ink -------------------------------------------
   Every quiet caption in the game — eyebrows, the weather line, the footer
   note, world names and settings, the mission's own WHERE / DO THIS / DONE
   WHEN labels, bag and container captions — used to be drawn in a muted
   sage that measured between 1.6:1 and 4.4:1 against the cream and pale
   green papers underneath it. Same sage family, two steps darker: one grey
   green for plain captions, one greener ink for the labels that belong to a
   green control, both at 4.5:1 or better on every background they land on
   (checked against the darkest of them, the #e4ecd7 "DO THIS" panel, by
   tests/browser/accessibility.spec.js, which measures the real pairs on the
   page rather than trusting this list). */
:root{--label:#5a6850;--label-green:#4e6a3c}
.eyebrow,.quest>.eyebrow,.dialog-card>.eyebrow,.map-card>.eyebrow{color:var(--label)}
.weather,.footer-note,.keyboard-hints,.footer>span:first-child{color:var(--label)}
.intro-footer,.edition,.intro-chapters,.art-note{color:var(--label)}
.intro-eyebrow{color:var(--label-green)}
.dialog-card p,.map-card>p,.chapter-banner p{color:var(--label)}
.chapter-row small,.map-region>p,.return-line{color:var(--label)}
.container-heading .eyebrow,.container-heading p,.container-hint,#container-message{color:var(--label)}
.container-empty,.empty-container,.bag-empty{color:var(--label)}
.slot-state,#container-bag-count{color:var(--label-green)}
.word-detail>small,.bag-item small,.bag-item span:not(.food-illustration){color:var(--label)}
.bag-word>small{color:var(--label-green)}
.world-setting,.world-card small,.world-card.locked,.side-line-copy span{color:var(--label)}
.mission-instruction>span,.mission-instruction>label{color:var(--label-green)}
#quest-toggle,.worlds-button,.compact-why,#compact-progress{color:var(--label-green)}
.book-page-count{color:var(--label-green)}
.word-unknown,.library-cell.unread,.reward-toast small,.earned-badge small{color:var(--label)}
.journal-photo.empty,.journal-photo.empty h3,.journal-photo.empty p{color:var(--label)}

/* Engagement surfaces reuse existing panels and controls: the map invitation
   sits inside its existing 44px target, collections fold below photographs,
   and the win card names the mission that was actually completed. */
.map-button.has-play-nearby:after{content:'Play nearby';position:absolute;right:-7px;top:-10px;padding:5px 8px;border-radius:999px;background:#f2c66b;color:#354b35;border:2px solid #fffdf1;font-size:9px;font-weight:800;letter-spacing:.2px;box-shadow:0 2px 8px #243c2e35;white-space:nowrap}
.play-more-choices{width:100%;min-height:48px;margin-top:14px}
.photo-memories-first>h3{font:500 24px/1.2 'Fraunces',Georgia,serif;color:#3f6139;margin:4px 0 5px}
.photo-memories-first>.journal-grid{margin-top:14px}
.journal-empty-photos{grid-column:1/-1;padding:20px;border:1px dashed #cbd3bb;border-radius:10px;background:#f0f1e5}
.journal-collections{display:grid;gap:10px;margin:18px 0}
.journal-collections details{border:1px solid #d9dfca;border-radius:10px;background:#f7f7eb;overflow:hidden}
.journal-collections summary{min-height:48px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#405b3e;font-weight:700;cursor:pointer}
.journal-collections summary span{color:#526447;font-size:11px;font-weight:600}
.journal-collections summary{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:8px 10px}
.journal-collections summary .journal-collection-name{display:flex;align-items:center;gap:7px;font-size:13px;color:#405b3e;line-height:1.25}
.journal-collection-name svg{width:28px;height:28px;flex-shrink:0}
.journal-collections summary .read-button{margin:0;width:44px;height:44px;flex-shrink:0}
.journal-collections details[open]{padding:0 14px 14px}
.journal-collections details[open] summary{margin:0 -14px 10px}
.mission-recap{margin:20px 0}
.mission-recap>h3{text-align:center;font:500 24px/1.2 'Fraunces',Georgia,serif;color:#3f6139;margin:0 0 12px}
.mission-recap>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mission-recap-item{position:relative;min-width:0;padding:10px 8px 12px;border-radius:11px;background:#edf1df;text-align:center}
.mission-recap-item>svg{display:block;width:82px;height:68px;margin:0 auto 5px}
.mission-recap-item>strong,.mission-recap-item>span{display:block}
.mission-recap-item>strong{font-size:12px;line-height:1.3;color:#3d573a}
.mission-recap-item>span{font-size:10px;line-height:1.3;color:#526447;margin-top:3px}
.mission-recap-item .read-button{min-width:44px;min-height:44px;margin:5px auto -8px}
.dialog-card:has(.mission-recap) .reward-burst{width:100px;height:100px;margin:0 auto 10px;box-shadow:0 0 0 7px #f1f2e4,0 0 0 8px #d9e1c5}
.dialog-card:has(.mission-recap) .reward-burst>svg{width:72px;height:72px}
.dialog-card:has(.mission-recap) .award-card h3{font-size:25px;margin:7px 0}
.dialog-card:has(.mission-recap) .award-card p{font-size:14px;line-height:1.35;margin:5px auto}
.dialog-card:has(.mission-recap) .mission-recap{margin:14px 0}
.dialog-card:has(.mission-recap) .mission-recap>h3{font-size:21px;margin-bottom:8px}
@media(max-width:600px){
  .map-button.has-play-nearby:after{content:'Play';right:-4px;top:-8px;font-size:8px;padding:4px 7px}
  .mission-recap>div{gap:6px}
  .mission-recap-item{padding:7px 4px 9px}
  .mission-recap-item>svg{width:65px;height:57px}
  .mission-recap-item>strong{font-size:10px}
  .mission-recap-item>span{font-size:9px}
}
/* Before the first "Let's explore", Pause is quieter but still a real button
   that opens the settings, so it is dimmed only as far as its own label can
   still be read (4.5:1); at the old .4 no ink was dark enough to reach it. */
body:not(.started) #pause{opacity:.78}

/* --- Every control big enough for a small hand -------------------------
   A four-year-old aims with a whole fingertip, and the speaker button is
   the one control a child who cannot read needs most - yet it was 38px at
   best and 32px in the world list. Nothing moves to a new place here: the
   same controls stay exactly where a child already expects them, they are
   simply drawn at the 44x44 floor, with at least 8px of quiet space
   between neighbours. Measured on the real boxes at 390px and 1440px by
   tests/browser/accessibility.spec.js. */
.read-button{width:44px;min-width:44px;height:44px}
.read-button svg{width:22px;height:22px}
.world-entry>.read-button{width:44px;min-width:44px;height:44px;bottom:6px;right:6px}
.world-entry>.world-card{padding-right:56px}
.reward-toast .read-button{width:44px;min-width:44px;height:44px}
.reward-toast .read-button svg{width:21px;height:21px}
#mission-hear{width:44px;min-width:44px;height:44px;top:8px;right:67px}
#quest-toggle{height:44px;top:8px}
.quest>.eyebrow{padding-right:119px}
.container-hear{top:20px;left:22px}
.container-heading{padding-left:74px;padding-right:74px}
/* The close button and the speaker shared the top corner of every dialog
   card with 0-2px between them. The speaker keeps its place under the
   close button and simply sits eight pixels clear of it. */
.dialog-hear{margin-top:28px}
/* …and the page below it starts under the speaker rather than wrapping
   around it, so moving the speaker never re-wraps a panel’s first line. */
#dialog-content{clear:right}
.bag-item .read-button{margin:8px 0}
.mission-words>summary{min-height:44px;box-sizing:border-box}
.header .icon-button{width:44px;height:44px}
.header .help-button{width:44px;height:44px;font-size:17px}
.header .sound-slash{width:30px}
.header .pause-button{min-height:44px;padding:0 6px}
.mission-actions .mission-button,.worlds-button{min-height:44px}
.quest.compact .mission-actions{gap:9px}
.quest.compact .mission-actions button{min-height:44px}
.camera-toolbar button{min-height:44px}
@media(max-width:600px){
  .read-button{width:44px;min-width:44px;height:44px}
  #mission-hear{width:44px;min-width:44px;height:44px;top:8px;right:61px}
  #quest-toggle{width:44px;height:44px;top:8px;right:8px}
  .quest>.eyebrow{padding-right:113px}
  .container-hear{width:44px;min-width:44px;height:44px;top:12px;left:12px}
  .container-heading{padding-left:60px;padding-right:60px}
  .container-heading .eyebrow{padding-left:0;padding-right:0}
  .dialog-hear{margin-top:28px}
  .mission-actions .mission-button,.worlds-button{min-height:44px}
  .quest.compact .mission-actions button{min-height:44px}
  .camera-toolbar{gap:9px}
  .camera-toolbar button{min-height:44px}
  .journal-tabs{gap:9px}

  #toast-hear{width:44px;height:44px;min-width:44px}
  .car-controls .read-button{width:44px;height:44px}
}
@media(pointer:coarse){.camera-toolbar button{min-height:44px}}
@media(max-height:360px) and (orientation:landscape){#toast-hear{width:44px;height:44px;min-width:44px}}
@media(max-width:600px) and (orientation:portrait){#toast-hear{width:44px;height:44px;min-width:44px}}
@media(max-width:600px){
  .header .brand{min-height:44px}
  .header nav{gap:8px}
  .header .pause-button{min-width:44px;padding:0 6px}
  .container-actions{gap:9px}
}
/* The map button and the action bar below it only need pulling apart on a
   tall phone; a short screen already packs them into its own tighter band. */
@media(max-width:600px) and (min-height:701px){
  .bottom-hud{bottom:213px}
  #game-shell:has(#toast.visible) .bottom-hud{bottom:188px}
}
/* The compact mission card keeps the height it always had: the 44px buttons
   take their five pixels back out of the card's own padding, not out of the
   room a child has to watch the world. */
.quest.compact{padding-bottom:9px}
.quest.compact .mission-actions{margin-top:7px}
@media(max-width:600px){.quest.compact{padding-bottom:8px}.quest.compact .mission-actions{margin-top:6px}}
/* A 320px-wide phone cannot hold four 44px controls with 8px between them
   next to the game's name, so below 351px the header keeps its old tight
   spacing - the controls themselves stay 44px tall and wide where they can. */
@media(max-width:350px){
  .header nav{gap:3px}
  .header .pause-button{min-width:24px;padding:0 3px}
}
/* The right-hand pills only need pulling apart on a tall phone; a short
   screen packs the same column into a band that has no spare height. */
@media(max-width:600px) and (min-height:701px){
  .top-hud>.status-column,.quest.compact~.status-column{gap:9px}
}

/* --- The journal's not-yet-found cards, and the two labels on the canvas ---
   A card for a word, treasure or sound still to find is now a real button
   with its own speaker icon, so it matches the found cards it sits beside
   and a child who cannot read can press it and hear what it is waiting
   for. It keeps the dashed outline and the question mark, so found and
   not-yet-found still look completely different. */
.word-unknown{gap:7px;padding-bottom:10px}
.word-unknown>small{flex:1}
/* The world's name and the bottom tip were painted straight onto the moving
   game art with only a text shadow, measuring as low as 1.3:1 over real
   ground. They now sit on the same soft dark pill the status pills beside
   them already use, which reads over grass, sand, snow, water and night. */
.location-tag,.mini-tip{padding:8px 14px;border-radius:30px;background:#304a38ef;box-shadow:0 4px 12px #1e332a2e}
.location-tag{top:232px}
@media(max-width:600px){.location-tag{padding:7px 11px;left:12px;top:170px}}

/* --- The finishing touches ---------------------------------------------
   The game's name in the header is the page's own heading while a child is
   playing - the only h1 before this lived on the welcome card and went away
   the moment the game started, leaving a screen-reader user with no
   page-level landmark to navigate to. It is drawn exactly as it was: every
   size, weight and space below is the h1 giving back what the browser's
   default heading style would otherwise have added. */
.header h1.brand-name{margin:0;padding:0;font:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;line-height:normal}

/* Gamepad focus must be visible even though no keyboard event happened. */
body.controller-active :focus { outline: 4px solid #426b9b; outline-offset: 3px; }
.input-settings{line-height:1.5}.input-binding-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:.7rem 0}.input-binding-grid button{display:flex;flex-direction:column;gap:.3rem;min-height:58px;white-space:normal}.input-settings select{display:block;width:100%;min-height:44px;max-width:100%;margin:.5rem 0;font:inherit}.input-settings input[type=range]{width:min(100%,240px);min-height:44px}.input-settings>[data-bind-status]{background:#eef1de;padding:.7rem;border-radius:10px}.input-settings>button{margin:.5rem 0;min-height:44px}

.input-settings summary{min-height:44px;padding:.6rem 0;font-weight:600;cursor:pointer}

.indoor-play{text-align:center;max-width:620px;margin:auto}.indoor-play-context{color:#536650}.indoor-play-picture{display:flex;justify-content:center;gap:14px;background:#eee1bf;border-radius:20px;padding:30px 12px;margin:16px 0}.indoor-play-picture span{display:grid;place-items:center;width:26%;min-height:100px;background:#fff7df;border:2px dashed #c3ad79;border-radius:18px;font-size:clamp(36px,6vw,72px)}.indoor-play-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.indoor-play-choices button{min-height:88px;flex:1;min-width:140px;display:grid;gap:8px}.indoor-play-choices button span{font-size:32px}

/* Calendar invitations keep Continue and the read-aloud control in reach. */
.seasonal-welcome{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seasonal-welcome[hidden]{display:none}
.seasonal-welcome button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:8px;font-size:14px;line-height:1.2}
.seasonal-welcome button>span:first-child{font-size:24px}
.seasonal-choices{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.seasonal-choices button{flex:1 1 145px;min-height:64px;display:flex;align-items:center;justify-content:center;gap:10px}
.seasonal-choices button span{font-size:30px}
.seasonal-picture{max-width:400px;margin:0 auto}.seasonal-picture svg{display:block;width:100%;height:auto;max-height:190px;stroke:none}
.seasonal-progress{text-align:center;font-weight:700}.seasonal-discovery{font-size:80px;text-align:center}
body[data-celebration="thanksgiving"] .intro-card{border-top:6px solid #bd783b}
body[data-celebration="christmas"] .intro-card{border-top:6px solid #487c65}
@media(max-height:440px){.seasonal-picture{max-width:220px}.seasonal-choices{gap:6px;margin:6px 0}.seasonal-choices button{min-height:44px;padding:8px}.seasonal-welcome button{min-height:44px}.seasonal-welcome{gap:6px}}

@media(max-height:440px){
 .intro-play-actions:has(.seasonal-welcome:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr)) 48px;gap:6px;padding:8px 12px}
 .intro-play-actions:has(.seasonal-welcome:not([hidden])) #start{grid-column:1/4;font-size:14px;padding:8px 12px}
 .intro-play-actions:has(.seasonal-welcome:not([hidden])) #intro-hear{grid-column:4}
 .intro-play-actions:has(.seasonal-welcome:not([hidden])) .seasonal-welcome{grid-column:1/3}
 .intro-play-actions:has(.seasonal-welcome:not([hidden])) #intro-team{grid-column:3/5;gap:5px;padding:6px;font-size:13px}
 .intro-play-actions:has(.seasonal-welcome:not([hidden])) .seasonal-welcome button{font-size:12px;padding:6px;gap:3px}
 .intro-play-actions:has(.seasonal-welcome:not([hidden])) .seasonal-welcome button>span:first-child{font-size:19px}
}

@media(max-height:440px){
 .seasonal-picture{max-width:140px}
 .playful-dialog:has(.seasonal-progress) .seasonal-progress{margin:4px 0;font-size:13px}
 .playful-dialog:has(.seasonal-progress) h3{margin:6px 0;font-size:18px}
}
.seasonal-picture svg text{fill:#34523b;font-family:'Apple Color Emoji','Segoe UI Emoji',sans-serif}

/* The same entry stays reachable before and after desktop play. */
.wiggly-vr-entry{position:absolute;bottom:14px;left:18px;z-index:6;max-width:275px}.wiggly-vr-entry button{border:1px solid #8a9e73;border-radius:24px;background:#f8f4df;color:#354d35;padding:10px 18px;font:600 14px inherit;cursor:pointer}.wiggly-vr-entry p{font:11px/1.4 sans-serif;color:#466144;margin:5px 0}.started .wiggly-vr-entry{bottom:80px}.immersive-active .wiggly-vr-entry{visibility:hidden}.immersive-active .dialog-card,.immersive-active .map-card,.immersive-active .container-card{max-height:85vh;overflow:auto}.immersive-active .overlay{z-index:45}@media(max-width:650px){.wiggly-vr-entry{bottom:5px;left:12px;max-width:230px}.wiggly-vr-entry p{display:none}.started .wiggly-vr-entry{bottom:140px}}