/* Fill the viewport even where dynamic viewport units or fullscreen are unavailable. */
html[data-mobile-ui="true"] #view:fullscreen{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;aspect-ratio:auto;overflow:hidden}
html[data-mobile-ui="true"] main,html[data-mobile-ui="true"] .stage,html[data-mobile-ui="true"] #view{width:100vw;height:100vh}
html[data-mobile-ui="true"],html[data-mobile-ui="true"] body{width:100%;height:100%;overflow:hidden;background:#071610}html[data-mobile-ui="true"] main{width:100dvw;min-width:0;height:100dvh;min-height:0;margin:0;padding:0;overflow:hidden}html[data-mobile-ui="true"] .top,html[data-mobile-ui="true"] .bar,html[data-mobile-ui="true"] .guide{display:none}html[data-mobile-ui="true"] .stage,html[data-mobile-ui="true"] #view{position:fixed;inset:0;width:100dvw;height:100dvh;aspect-ratio:auto;border:0;box-shadow:none}html[data-mobile-ui="true"] canvas{width:100%;height:100%}html[data-mobile-ui="true"] #controls{display:none!important}html[data-mobile-ui="true"] #hud{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));max-width:min(62vw,460px);padding:7px 10px;border:1px solid #8da58b77;border-radius:10px;background:#102c24b8;backdrop-filter:blur(8px);color:#fff9e8;font:700 clamp(12px,2.8vw,15px)/1.3 system-ui,sans-serif}html[data-mobile-ui="true"] #finish{inset:18% 10%;max-height:64dvh;overflow:auto;padding:clamp(16px,4vw,26px);border-radius:16px;background:#173c31f4}html[data-mobile-ui="true"] #finish h2{font-size:clamp(1.35rem,6vw,2rem)}
@media(min-aspect-ratio:4/3) and (max-height:800px){html[data-mobile-ui="true"] #hud{max-width:42vw}}@media(max-width:420px){html[data-mobile-ui="true"] #hud{max-width:70vw;padding:5px 7px;font-size:12px}html[data-mobile-ui="true"] #finish{inset:10% 6%;max-height:76dvh;padding:14px}}

/* Fay and Forest completion focuses on the earned result and replay, with the trail visible. */
#view #finish{grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px}
#finish-content{min-height:0;overflow:auto;overscroll-behavior:contain}
#finish-content #finish-result{margin:12px auto 0}
#view #finish button{min-height:44px}
.finish-haul__total{margin:0 0 10px;font:500 15px/1.3 system-ui,sans-serif;color:#c9d7bf}
.finish-haul__total strong{font-size:22px;color:#fff2c8}
.finish-haul__items{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;margin:0;padding:0;list-style:none}
.finish-haul__item{display:flex;align-items:center;gap:7px;max-width:100%;text-align:left}
.finish-haul__art{display:block;flex:0 0 56px;width:56px;height:56px}
.finish-haul__art img,.finish-haul__art svg{display:block;width:100%;height:100%;object-fit:contain}
.finish-haul__words{display:flex;flex-direction:column;gap:2px;font-family:system-ui,sans-serif}
.finish-haul__count{font-size:19px;line-height:1.1;color:#fff2c8}
.finish-haul__label{font-size:12px;line-height:1.2;color:#e3e8d5}
.finish-haul__credit,.finish-haul__empty{margin:10px 0 0;font:500 14px/1.35 system-ui,sans-serif;color:#e3e8d5}
.finish-haul__gift{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;padding-top:8px;border-top:1px solid #a9c97c44;font:500 14px/1.3 system-ui,sans-serif;color:#e3e8d5}
.finish-haul__gift .finish-haul__art{flex-basis:40px;width:40px;height:40px}
html[data-mobile-ui="true"] .finish-haul__art{flex-basis:48px;width:48px;height:48px}
html[data-mobile-ui="true"] .finish-haul__gift .finish-haul__art{flex-basis:40px;width:40px;height:40px}
@media(max-width:420px){html[data-mobile-ui="true"] .finish-haul__art{flex-basis:40px;width:40px;height:40px}.finish-haul__items{gap:10px 14px}.finish-haul__count{font-size:18px}}
#view #finish:is([data-stage="forest"],[data-stage="fay"]){inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(600px,88%);height:auto;min-height:0;max-height:calc(100% - 48px);overflow:auto;padding:clamp(16px,3vw,24px);border-radius:16px}
#view:has(#finish:is([data-stage="forest"],[data-stage="fay"]):not([hidden])) .touch-controls__play,
#view:has(#finish:is([data-stage="forest"],[data-stage="fay"]):not([hidden])) #controls,
#view:has(#finish:is([data-stage="forest"],[data-stage="fay"]):not([hidden])) #hud{visibility:hidden}

/* Keep selected-power teaching beside the choices in Pause and briefly in play. */
html[data-mobile-ui="true"] .touch-controls__menu #power-guide{display:block;margin:10px 2px 0;color:#f5f1df;font:500 14px/1.45 system-ui,sans-serif}
#hud .power-reminder{display:block;margin-top:6px;padding-top:6px;border-top:1px solid #b8c8a655;color:#e7edc5;font-weight:500}

/* Keep the mast, perched gull and falling bag clear while retaining the cue. */
#view #hud[data-mast-side]{max-width:32%;width:max-content}
#view #hud[data-mast-side="left"]{left:1.5%;right:auto}
#view #hud[data-mast-side="right"]{left:auto;right:1.5%}
html[data-mobile-ui="true"] #view #hud[data-mast-side="right"]{top:max(68px,calc(env(safe-area-inset-top) + 56px))}

/* Keep the Forest result above Jim on short landscape screens. */
@media(orientation:portrait){
  html[data-mobile-ui="true"] #view #finish{inset:max(16px,env(safe-area-inset-top)) auto auto 50%;transform:translateX(-50%);margin:0;width:min(560px,calc(100% - 32px));height:auto;min-height:0;max-height:50vh;max-height:50dvh;padding:16px 20px;place-content:stretch;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px;overflow:hidden}
  html[data-mobile-ui="true"] #view #finish h2{font-size:clamp(1.35rem,4vw,1.65rem);line-height:1.15}
  html[data-mobile-ui="true"] #view #finish-result{margin:12px 0 0;max-width:none;font-size:15px;line-height:1.35}
  html[data-mobile-ui="true"] #view #finish button{min-height:44px;padding:10px 13px}
}
/* Keep shortened airborne guidance readable in the top corner, clear of Pause. */
#view #hud[data-flight]{box-sizing:border-box;width:max-content;max-width:min(600px,calc(100% - 88px));padding:7px 10px;border:1px solid #8da58b77;border-radius:10px;background:#102c24f0;backdrop-filter:none;color:#fff9e8;font:700 15px/1.4 system-ui,sans-serif;white-space:normal;overflow-wrap:break-word;text-shadow:none}
/* Broad portrait has room above Jim for the complete haul and short prose. */
@media(orientation:portrait) and (min-width:600px){
  html[data-mobile-ui="true"] #view #finish{max-height:54vh;max-height:54dvh}
}
@media(orientation:landscape) and (max-height:640px){
  html[data-mobile-ui="true"] #view #finish[data-stage="forest"]{top:40%}
}
@media(orientation:landscape) and (max-height:480px){
  html[data-mobile-ui="true"] #view #finish[data-stage="forest"]{top:35%;padding:12px 20px}
  html[data-mobile-ui="true"] #finish[data-stage="forest"] h2{font-size:1.35rem}
  html[data-mobile-ui="true"] #finish[data-stage="forest"] #finish-result{margin:8px 0 10px;font-size:14px;line-height:1.35}
}

/* Keep Fay and Forest discoveries and added bookshop actions in one scroll flow.
   A fixed four-row grid cannot account for the bank notice and shop button. */
#view #finish:is([data-stage="forest"],[data-stage="fay"]){display:flex;flex-direction:column;place-content:initial;overflow:auto;max-height:calc(100% - 48px)}
#view #finish:is([data-stage="forest"],[data-stage="fay"]) > *{flex-shrink:0}
#view #finish:is([data-stage="forest"],[data-stage="fay"]) #finish-content{overflow:visible;min-height:auto}
@media(orientation:portrait){
  html[data-mobile-ui="true"] #view #finish:is([data-stage="forest"],[data-stage="fay"]){max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - 16px)}
}

html[data-mobile-ui="true"] [data-command="show-touch"]{display:none}