/* Console mode is enabled before boot for touch devices or ?mobile=1. */
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: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 Forest result above Jim on short landscape screens. */
@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}
}