/* Production viewport, not the lab's simulated device frame. OS chrome stays outside. */
html,body { width:100%; height:100%; min-width:0; overflow:hidden; overscroll-behavior:none; }
body { background:#172713; touch-action:manipulation; }
#viewport { position:fixed; inset:0; height:var(--app-height,100dvh); }
#app { position:relative; width:100%; height:100%; container-type:size; overflow:hidden; }
#app>.pvz { width:100%; height:100%; }
#app .menu-stage { width:100%; margin:0; }
#app .menu-bar { width:100%; }
.menu-reset { justify-self:end;min-height:44px;border-radius:0; }
.battle-dialog.reset-dialog { width:min(480px,100%);max-width:480px;padding:20px; }
.reset-dialog h2 { font-size:28px;line-height:1.1; }
.reset-dialog p { font-size:14px;line-height:1.45; }
.reset-dialog .battle-dialog-actions { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.reset-dialog .battle-dialog-actions>.battle-gold { grid-column:auto; }
.reset-dialog .battle-button { min-height:44px;font-size:14px; }
/* Paint scenery to the viewport edge; reserve OS insets for controls, not a
 * second blank frame around the entire page. The real system rail is external. */
#app .menu-bar { padding-top:max(10px,env(safe-area-inset-top)); padding-left:max(24px,calc(env(safe-area-inset-left) + 16px)); padding-right:max(24px,calc(env(safe-area-inset-right) + 16px)); }
#app .menu-stage { padding-bottom:max(30px,calc(env(safe-area-inset-bottom) + 12px)); }
.menu-status { bottom:max(6px,calc(env(safe-area-inset-bottom) + 4px)); }
.battle-screen { background:linear-gradient(#17271380,#172713b3),url('assets/images/background1.jpg') center/cover; }
.battle-screen[data-hud-family="desktop"] .battle-companion { left:max(20px,calc(env(safe-area-inset-left) + 12px)); top:max(12px,calc(env(safe-area-inset-top) + 8px)); }
.battle-screen[data-hud-family="desktop"] .battle-pause { width:76px; min-width:76px; height:44px; min-height:44px; font-size:18px; top:max(12px,calc(env(safe-area-inset-top) + 8px)); right:max(16px,calc(env(safe-area-inset-right) + 12px)); }
.battle-screen[data-hud-family="desktop"] .battle-wave { bottom:max(1%,calc(env(safe-area-inset-bottom) + 6px)); right:max(2%,env(safe-area-inset-right)); }
.battle-screen[data-hud-family="phone"] .battle-live { padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left)); }
.prep-header { padding-left:max(18px,calc(env(safe-area-inset-left) + 12px)); padding-right:max(18px,calc(env(safe-area-inset-right) + 12px)); padding-top:max(8px,env(safe-area-inset-top)); }
.prep-footer { padding-bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px)); }
.battle-overlay { padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
#game { display:block; width:100%; height:100%; aspect-ratio:4/3; touch-action:none; }
#game:focus-visible { outline:2px solid #f6e98e; outline-offset:-2px; }
.battle-tool:disabled { cursor:not-allowed; opacity:.55; }
.battle-packet { min-width:44px; }
.battle-screen[data-hud-family="phone"] .battle-bank { grid-auto-rows:clamp(44px,20cqh,76px); align-content:center; }
/* The early bank has only 1–3 packets; do not stretch an empty wooden rail. */
.battle-screen[data-hud-family="wide"] .battle-companion { top:50%; bottom:auto; height:220px; transform:translateY(-50%); }
.battle-screen[data-hud-family="wide"] .battle-pause { top:calc(50% + 59px); bottom:auto; }
.prep-enemy>img { width:46px; height:43px; object-fit:contain; }
.prep-note { margin:10px 0 0; font-size:12px; line-height:1.45; color:#d4d8ba; }
.prep-footer { grid-template-rows:auto; align-items:center; }
.prep-footer .battle-button { min-height:44px; }
.prep-grid { grid-template-columns:repeat(3,minmax(0,1fr)); min-height:110px; }
.prep-grid .prep-seed { height:110px; cursor:default; }
.prep-grid .prep-seed .prep-plant-art { opacity:1; }
.prep-plant-info { gap:5px; }
.prep-body { grid-template-columns:minmax(280px,450px) 220px; }
.reward-plant { display:block; width:85px; height:85px; object-fit:contain; margin:0 auto 8px; }
.library-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; background:linear-gradient(#142510d9,#142510e8),url('assets/images/background1.jpg') center/cover; padding:20px; }
.library-screen h1 { font:700 34px/1.1 Georgia,serif; margin:0; letter-spacing:0; }
.library-screen p { margin:0; }
.library-levels { display:flex; gap:12px; margin:10px 0; }
.library-levels button { min-width:130px; min-height:90px; font-size:22px; }
.library-levels small { display:block; margin-top:10px; font:12px system-ui,sans-serif; }
button:disabled { cursor:default; opacity:.5; }
.lawn-inspection { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; height:100%; min-height:0; }
#inspect-host { width:min(100%,calc((100cqh - 85px)*4/3)); aspect-ratio:4/3; min-height:0; }
#posture { position:fixed; inset:0; z-index:100; height:var(--app-height,100dvh); }
[hidden] { display:none!important; }
.loading { display:grid; place-content:center; height:100%; text-align:center; gap:16px; }
.loading img { width:220px; margin:auto; }
@container (max-height:500px) {
  .prep-screen { grid-template-rows:50px minmax(0,1fr) auto; }
  .prep-body { padding:8px 14px; gap:14px; grid-template-columns:minmax(270px,450px) 200px; }
  .prep-panel { padding:8px; }
  .prep-grid { min-height:90px; }
  .prep-grid .prep-seed { height:90px; }
  .prep-section-heading { margin-bottom:5px; }
  .prep-note { font-size:10px; margin-top:5px; }
  .prep-plant-info { min-height:0; font-size:10px; }
  .prep-enemy { height:64px; }
  .prep-footer { padding:6px 14px; grid-template-columns:1fr 180px; }
  .prep-header .battle-button { min-height:36px; }
  .battle-dialog { padding:12px; }
  .reward-plant { width:48px; height:48px; }
}
.opening-film { height:100%;display:grid;place-items:center;background:#000;position:relative; }
.collection-screen { display:flex;flex-direction:column;gap:12px;padding:16px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:linear-gradient(#142510df,#142510ed),url('assets/images/background1.jpg') center/cover; }
.collection-screen>header { display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none; }
.collection-screen h1 { margin:0;font:700 clamp(20px,3cqh,34px) Georgia,serif; }
.collection-screen>p { margin:0;font:12px/1.25 system-ui,sans-serif; }
.collection-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;min-height:0;flex:1;width:min(1040px,100%);margin-inline:auto; }
.collection-card { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:0;padding:12px;border:2px solid #7e7049;color:#f5e9b4;background:#26291dec;font:14px/1.25 system-ui,sans-serif;text-align:center; }
.collection-card img { width:min(85px,45%);height:min(85px,10cqh);object-fit:contain; }
.collection-card strong { font-size:clamp(12px,1.8cqh,18px); }
.collection-card.is-locked { opacity:.5; }
.battle-dialog.almanac-dialog { width:min(560px,92%); }
.almanac-dialog p { min-height:90px;text-align:left; }
.almanac-dialog .reward-plant { float:left;width:70px;height:70px;margin:0 14px 4px 0; }
.almanac-dialog .battle-dialog-actions { clear:both;grid-template-columns:repeat(3,1fr); }
.almanac-dialog .battle-dialog-actions>.battle-gold { grid-column:auto; }
.prep-utilities { display:flex;gap:6px;align-items:center; }
.prep-utilities .battle-button { min-height:44px;padding:6px 10px; }
@container (max-height:500px) {
 .prep-utilities { gap:4px; }
 .prep-utilities .battle-button { padding:4px 7px;font-size:11px; }
}
.collection-tabs,.catalog-pages { display:flex;align-items:center;justify-content:center;gap:8px;flex:none; }
.catalog-pages { min-height:44px; }
.catalog-pages .battle-button { min-height:44px;padding:5px 12px; }
.garden-actions { display:flex;gap:4px; }
.garden-actions .battle-button { min-height:44px;padding:5px;font-size:12px;text-transform:capitalize; }
.credits-copy { display:grid;place-content:center;flex:1;text-align:center;padding:20px; }
.prep-catalog .catalog-pages { margin:4px 0; }
.prep-plant-info small { display:block;max-width:100%;font:10px/1.25 system-ui,sans-serif; }
.prep-plant-info label { display:flex;gap:6px;align-items:center;font-size:11px; }
.prep-plant-info select { min-width:0;max-width:170px;background:#e6dcad;color:#302711; }
.battle-start-assault { position:absolute;bottom:8%;left:40%;z-index:8; }
@container (max-height:500px) {
 .collection-screen { gap:6px;padding:8px; }
 .collection-screen>header .battle-button { min-height:36px; }
 .collection-grid { gap:5px; }
 .collection-grid { grid-template-rows:minmax(0,1fr); }
 .collection-card { gap:3px;padding:4px;font-size:10px; }
 .collection-card img { width:28px;height:28px; }
 .collection-card strong { font-size:11px; }
 .collection-card .battle-button { min-height:44px;font-size:10px;padding:4px; }
 .collection-tabs .battle-button { min-height:36px;font-size:11px;padding:5px; }
 .garden-actions .battle-button { min-height:44px;padding:4px; }
 .prep-catalog .prep-grid .prep-seed { height:48px;grid-template-rows:10px minmax(0,1fr) 10px;padding:2px; }
 .prep-catalog .prep-grid .prep-plant-art { height:22px;max-height:22px; }
 .prep-catalog .prep-seed-name,.prep-catalog .prep-cost { font-size:9px; }
 .prep-catalog .prep-plant-info { margin:2px 0; }
 .prep-catalog .prep-plant-info>span { display:none; }
 .prep-catalog .catalog-pages { margin:2px 0; }
 .prep-catalog .catalog-pages .battle-button { font-size:10px;padding:3px 6px; }
}
.library-levels { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:min(760px,100%); }
.library-levels button { min-width:0;min-height:70px;font-size:18px; }
.prep-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
button.prep-seed { cursor:pointer;color:inherit;font:inherit;border-radius:0; }
button.prep-seed .prep-seed-name,button.prep-seed .prep-cost { color:#302711;text-shadow:none;font-weight:700; }
button.prep-seed:not(.is-picked) .prep-seed-name,button.prep-seed:not(.is-picked) .prep-cost { color:#302711; }
button.prep-seed:not(.is-picked) { opacity:.65; }
button.prep-seed.is-picked { outline:2px solid #ffe184;outline-offset:-3px; }
[data-seed="explodeonut"]:is(img) { filter:sepia(1) saturate(5) hue-rotate(315deg); }
.battle-tool[aria-pressed="true"] { outline:3px solid #ffe184;outline-offset:-3px; }
.dave-dialogue { position:absolute;z-index:8;top:12%;right:8%;width:min(46%,360px);padding:16px;background:#f4e5bd;color:#332817;border:3px solid #655238;box-shadow:3px 5px 0 #0006; }
.dave-dialogue p { margin:0 0 12px;font:700 clamp(14px,2.3cqh,21px)/1.35 Georgia,serif; }
.dave-dialogue .battle-button { min-height:44px; }
.battle-screen[data-large-bank="true"][data-hud-family="wide"] .battle-companion { height:min(96%,calc(124px + var(--bank-rows,3) * 62px)); }
.battle-screen[data-large-bank="true"][data-hud-family="wide"] .battle-pause { top:calc(50% + 12px + var(--bank-rows,3) * 31px);bottom:auto; }
.battle-screen[data-large-bank="true"][data-hud-family="phone"] .battle-bank { grid-auto-rows:minmax(20px,1fr);align-content:stretch; }
.battle-screen[data-large-bank="true"][data-hud-family="phone"] .battle-seed-name { font-size:clamp(8px,2.7cqh,11px); }
.battle-screen[data-large-bank="true"][data-hud-family="phone"] .battle-seed-price { font-size:10px; }
.battle-screen:not([data-mode="normal"]) .battle-sun-total { background:#59462b;display:grid;place-items:center; }
.battle-screen:not([data-mode="normal"]) #sun-count { font:700 10px system-ui,sans-serif;color:#fff0b4; }
.battle-screen:not([data-mode="normal"]) .battle-sun-total::before,.battle-screen:not([data-mode="normal"]) .battle-sun-total::after { display:none; }
@container (max-height:500px) {
 .prep-grid { min-height:0;gap:5px; }
 .prep-grid .prep-seed { height:66px; }
 .prep-grid .prep-plant-art { height:33px;max-height:33px; }
 .prep-seed-name,.prep-cost { font-size:10px; }
 .prep-roster { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px; }
 .prep-enemy { height:54px; }
 .prep-plant-info { padding:5px; }
 .library-screen { gap:6px;padding:10px; }
 .library-screen h1 { font-size:25px; }
 .library-levels { margin:2px 0; }
 .library-levels button { min-height:54px;font-size:15px;padding:5px; }
 .library-levels small { margin-top:4px; }
 .dave-dialogue { top:10%;padding:10px; }
}
.opening-stage { width:min(100%,calc(var(--app-height,100dvh)*4/3));aspect-ratio:4/3;max-height:100%; }
.opening-stage canvas { display:block;width:100%;height:100%; }
.opening-actions { position:absolute;right:max(14px,calc(env(safe-area-inset-right) + 10px));bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px));display:flex;gap:10px; }
.opening-actions .battle-button { min-height:44px;padding:8px 14px; }
.opening-loading { position:absolute;top:40%;left:10%;right:10%;text-align:center;color:#efe5ba;pointer-events:none; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; } }