/* The browser is the game surface: full height, safe touch areas and a small HUD. */
html,body{overscroll-behavior:none;background:#194e42}
#app{height:100dvh;min-height:0}
header{top:calc(14px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));z-index:10;pointer-events:none}
header .brand,.top-tools{pointer-events:auto}
.top-tools{position:relative;display:block;margin-left:auto}
.options-toggle{width:44px;height:44px;border-radius:15px;background:#194e42e8;color:#e1ebc8;border:1px solid #90b58b99;box-shadow:0 3px 12px #173f3420;backdrop-filter:blur(8px);display:grid;place-items:center}
.options-toggle svg{width:23px;height:23px}
.options-panel{position:absolute;right:0;top:53px;width:207px;padding:7px;background:#194e42;border:1px solid #93ba8e;border-radius:19px;box-shadow:0 9px 28px #103b3440}
.options-panel .glass-icon,.options-panel .glass-icon:hover,body.night .options-panel .glass-icon{width:100%;height:auto;min-height:48px;display:flex;gap:11px;padding:10px 12px;border:0;border-radius:12px;background:transparent;backdrop-filter:none;color:#f0f5df;text-align:left;font-size:13px}
.options-panel .glass-icon:hover,.options-panel .glass-icon:focus-visible{background:#2e6855!important}
.options-panel .glass-icon svg{width:19px;height:19px;flex:none}
.options-toggle:focus-visible,.options-panel button:focus-visible{outline:2px solid #a8cc9a;outline-offset:2px}
body.playing .brand,body.playing .scene-tag{display:none}
body.playing .chapter-pill{top:calc(14px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));max-width:calc(100% - 84px - env(safe-area-inset-left) - env(safe-area-inset-right));min-height:38px;padding:10px 12px;gap:7px;border-radius:15px;background:#194e42df;font-size:11px;line-height:1.25;box-shadow:none;pointer-events:none}
body.playing .chapter-pill small{display:none}
.chapter-pill .live-dot{flex:none;width:5px;height:5px}
.intro{top:auto;bottom:calc(22px + env(safe-area-inset-bottom));left:24px;right:auto;width:min(350px,calc(100% - 48px));max-width:none;padding:20px;border-radius:24px;background:#194e42f2;backdrop-filter:blur(8px)}
.intro .intro-kicker{font-size:8px;letter-spacing:1.5px}
.intro h1{font:500 48px/.98 Georgia;letter-spacing:-2.2px;margin:15px 0}
.intro h1 br{display:none}.intro h1 em{margin-left:5px}
.intro>p{font-size:13px;line-height:1.55;margin:13px 0 16px}
.intro>.gold-button{width:100%;min-height:50px;font-size:14px;border-radius:17px}
.intro>small{display:none}
.controls{bottom:calc(10px + env(safe-area-inset-bottom));width:366px;max-width:calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))}
.controls>p{font-size:11px;line-height:1.35;min-height:0;margin:0 0 9px}
.control-row{gap:9px}.round-button{width:46px;height:46px;min-height:44px;background:#194e42de;backdrop-filter:blur(8px)}
.cast-button{height:58px;min-width:0;font-size:17px;box-shadow:0 4px 0 #113c3d30,0 7px 20px #15413822}
.amy-link{min-height:44px;padding:9px 12px 5px;font-size:11px;line-height:1.2}
.fight-hud{bottom:calc(var(--controls-height,132px) + 24px + env(safe-area-inset-bottom));background:#194e42ee;backdrop-filter:blur(8px)}
.camp-tray,.build-tray{bottom:calc(12px + env(safe-area-inset-bottom));width:min(390px,calc(100% - 24px));padding:13px 15px 4px;border-radius:23px;background:#194e42f2;border-color:#93ba8e99}
.camp-heading small{display:none}.camp-heading strong{font:22px/1.15 Georgia}.camp-heading>span:first-child{min-width:0}.camp-heading{gap:8px}
.camp-stock{margin:7px 0;gap:8px}.camp-stock .material{width:43px;height:43px}.camp-stock>span{width:45px}.camp-stock p{font-size:11px;line-height:1.4}.camp-stock b{font-size:12px}.camp-stock small{font-size:10px}
.camp-tray>.gold-button{min-height:48px;font-size:13px}.camp-back{min-height:44px;font-size:11px;padding:9px 8px}
.camp-tray.rest{padding-bottom:13px}.camp-tray.rest>.gold-button{margin-top:10px}.camp-tray.rest.next-chapter{padding-bottom:4px}
.build-title{margin-bottom:10px}.build-title strong{font-size:23px}.build-title small{display:none}.build-tools>.gold-button{min-height:60px;font-size:16px}.build-tray>p{font-size:11px;margin:10px 0 9px}
.catch-card{bottom:calc(14px + env(safe-area-inset-bottom));padding:17px 20px;border-radius:23px}.catch-card h2{font-size:25px}
.toast{top:calc(70px + env(safe-area-inset-top));max-width:calc(100% - 32px);font-size:12px}
.speech.speech-letter{top:18%;padding:17px;width:min(350px,calc(100% - 28px))}.speech-letter p{font-size:19px}
@media(max-width:600px){.intro{left:18px;right:18px;width:auto;margin:auto;max-width:370px}.intro h1{font-size:45px}.brand strong{font-size:21px}.brand-icon{width:36px;height:36px}}
@media(max-width:350px){.intro{left:12px;right:12px;padding:17px}.intro h1{font-size:39px}.camp-heading strong{font-size:20px}.cast-button{font-size:15px}.control-row{gap:7px}.camp-stock{gap:6px}.camp-stock p{font-size:11px}.speech{width:260px}}
@media(max-height:500px) and (min-aspect-ratio:1/1){
 .controls{left:auto;right:calc(12px + env(safe-area-inset-right));bottom:calc(7px + env(safe-area-inset-bottom));transform:none;width:330px}.controls>p{font-size:10px;margin-bottom:5px}.amy-link{padding:5px 8px;min-height:38px}.cast-button{height:48px;font-size:16px}.round-button{width:44px;height:44px}
 .fight-hud{left:auto;right:40px;transform:none;width:260px}
 .camp-tray,.build-tray{left:auto;right:calc(12px + env(safe-area-inset-right));transform:none;width:310px;bottom:calc(8px + env(safe-area-inset-bottom))}.camp-heading strong{font-size:20px}.camp-stock{margin:5px 0}.camp-back{min-height:38px}.camp-tray>.gold-button{min-height:44px}
 .intro{left:20px;right:auto;bottom:14px;width:315px;padding:15px}.intro h1{font-size:36px;margin:10px 0}.intro>p{margin:10px 0;font-size:12px}.intro>.gold-button{min-height:44px;font-size:13px}
}

#catch-note{font-size:12px;line-height:1.45;margin:6px 0 12px;color:#c4d8b5}
.journey{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#194e42;color:#e7edcb;pointer-events:all;animation:journey-in 1.8s ease both}
.journey span{font-size:10px;letter-spacing:2px}.journey p{font:27px Georgia;text-align:center;padding:0 20px}
@keyframes journey-in{0%,60%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.journey{animation:none}}

@media(orientation:landscape) and (max-height:500px){.speech:not(.speech-letter){width:340px;max-width:calc(100% - 28px)}}

/* A contextual recipe, using the same compact construction tray. */
.picnic-food .camp-stock>span{display:none}.picnic-food .camp-stock p{margin:0 0 2px}.picnic-food .lake-choice{margin:8px 0 10px}
.material.grill{position:relative;background:none}.material.grill:before{content:'';position:absolute;inset:10px 4px 9px;border:3px solid #b5c5ac;border-radius:5px;transform:rotate(-12deg);background:repeating-linear-gradient(90deg,#667f70 0 3px,#c8d1b2 3px 5px,#344f40 5px 9px);box-shadow:2px 3px 0 #203c30}