/* Mobile navigation is outside the original playable scenes. */
:root{--suite-nav-height:44px}
body[data-suite-game]{padding-top:var(--suite-nav-height)!important;padding-bottom:env(safe-area-inset-bottom);justify-content:flex-start;min-height:100svh}
.suite-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center;gap:5px;height:var(--suite-nav-height);padding:3px max(5px,env(safe-area-inset-right)) 3px max(5px,env(safe-area-inset-left));background:#fff9e9;border-bottom:1.5px solid #8d7959;font:700 13px KittyRound,Round,system-ui,sans-serif;color:#594431;overflow-x:auto}
.suite-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:5px 10px;border:1px solid #b6a582;border-radius:12px;background:#f8f0dc;text-decoration:none;color:inherit;white-space:nowrap;flex-shrink:0}
.suite-nav .suite-home{background:#deebbc}.suite-nav a[aria-current=page]{background:#f4b5a4;border-color:#99745e}
body[data-suite-game] .app{flex-shrink:0;margin:auto 0}
body[data-suite-game] dialog{max-width:min(94vw,760px);max-height:calc(100dvh - 20px);overflow:auto;-webkit-overflow-scrolling:touch}
body[data-suite-game] button,body[data-suite-game] a,body[data-suite-game] summary{-webkit-tap-highlight-color:transparent}
#drum,.ingredient,.seed,#notes [data-planted],#target{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
body[data-suite-game=chords] .garden-layout{display:flex;flex-direction:column;align-items:center;padding:0;gap:0;width:100%;margin:auto 0}
body[data-suite-game=chords] .garden-layout .app{order:1}
.mobile-lesson{order:2;width:100%;padding:8px 12px;background:#fff9e9;color:#594431}
.mobile-lesson summary{font:700 15px Round,system-ui;cursor:pointer;padding:8px;min-height:36px}
.mobile-lesson .lesson-card{margin:6px 0;box-shadow:none}
@media(orientation:landscape) and (pointer:coarse), (orientation:landscape) and (max-height:600px){
 body[data-suite-game]:not([data-suite-game=staff]) .app{width:min(100vw,calc((100dvh - var(--suite-nav-height) - env(safe-area-inset-bottom))*1586/992));max-width:1600px;aspect-ratio:1586/992;height:auto}
 body[data-suite-game=chords] .garden-layout{min-height:calc(100dvh - var(--suite-nav-height))}
 .mobile-lesson{position:fixed;left:max(5px,env(safe-area-inset-left));bottom:max(4px,env(safe-area-inset-bottom));z-index:30;width:auto;max-width:min(94vw,650px);max-height:75dvh;overflow:auto;border:1px solid #a7b785;border-radius:12px;padding:0 5px;background:#fff9e9ee}
 .mobile-lesson summary{font-size:12px;min-height:28px;padding:5px}
 body[data-suite-game=staff] .app{top:calc(var(--fit-top,0px) + var(--suite-nav-height));height:calc(var(--fit-height,100%) - var(--suite-nav-height))}
}
@media(max-width:400px){.suite-nav{gap:3px}.suite-nav a{padding:5px 7px;font-size:12px}}
/* Tablets get the same full-bleed game area as the takeout apartment. Keep narrower phone landscape at its art ratio so labels do not collide. */
@media (orientation:landscape) and (min-width:1000px) and (any-pointer:coarse), (orientation:landscape) and (min-width:1000px) and (max-height:600px){
 body[data-suite-game]:not([data-suite-game=staff]) .app{position:fixed;left:var(--fit-left,0px);top:calc(var(--fit-top,0px) + var(--suite-nav-height));width:var(--fit-width,100%);height:calc(var(--fit-height,100%) - var(--suite-nav-height));max-width:none;aspect-ratio:auto;margin:0}
}