/* New portrait art stays in its native 9:16 composition on every screen. */
body .location>.hero,body #sceneHome>.hero{
 width:min(100%,calc(80dvh * 9 / 16));height:auto;max-height:none;
 aspect-ratio:9/16;margin-inline:auto;background:#e7ede1;
}
body .location>.hero>img:not(.elio-on-field){object-fit:contain;object-position:center;background:transparent}
body .gardenExchange{padding:0 0 32px}
body .gardenExchange>h2,body .gardenExchange>p,body .gardenExchange>.cards{margin-left:16px;margin-right:16px}
body .gardenExchange>h2{margin-top:16px}
body .hero>.elio-on-field{height:37%!important;left:4%;bottom:4%}
body.home-empty #gardenApp{background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#e7ede1}
/* The guide uses the actual visible character height inside this uncut image. */
body.tutorial-mode #sceneHome>.hero{
 width:100%;height:clamp(220px,40dvh,360px);aspect-ratio:auto;max-height:none;
}
body.tutorial-mode #sceneHome>.hero>img[data-art="home"]{object-fit:contain}
@media(max-height:480px) and (min-aspect-ratio:4/3){
 body.tutorial-mode #sceneHome>.hero{height:min(clamp(220px,40dvh,360px),60dvh)}
}