/* Pre-level preparation: one screen, one chosen deck, one start action. */
.prep-screen { isolation:isolate; grid-template-rows:56px minmax(0,1fr) auto; color:#eee9ce; background:linear-gradient(90deg,#0b18079c,#0b180738),var(--level-art) center/cover no-repeat; }
.prep-screen::before { display:none; }
.prep-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:8px 18px; background:#172212e8; border-bottom:1px solid #c4d0a044; }
.prep-header>div { text-align:center; display:grid; gap:2px; }
.prep-header strong { font:800 14px/1.1 ui-sans-serif,system-ui,sans-serif; }
.prep-header>div>span { font-size:10px; color:#bdcaaa; }
.prep-button,.prep-text-button { width:max-content; min-height:32px; padding:6px 10px; border:1px solid #b8b38680; border-radius:2px; color:#eee9ce; background:#32291fe8; font:700 11px/1.15 ui-sans-serif,system-ui,sans-serif; cursor:pointer; }
.prep-audio { justify-self:end; }
.prep-button:disabled { opacity:.4; cursor:default; }
.prep-text-button { background:transparent; border-color:transparent; min-height:30px; padding:4px 6px; color:#e5d794; }
.prep-body { position:relative; display:grid; grid-template-columns:minmax(0,450px) 220px; align-content:center; justify-content:center; align-items:start; gap:18px; min-height:0; padding:14px 20px; }
.prep-panel { min-width:0; background:linear-gradient(130deg,#33281ff5,#1c2119f2); border:1px solid #b6a47b88; box-shadow:0 4px 0 #14180ed9,0 10px 24px #07120577; padding:12px; }
.prep-section-heading { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:30px; margin-bottom:8px; }
.prep-section-heading h2 { margin:0; font:700 20px/1 Georgia,serif; letter-spacing:-.025em; }
.prep-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-content:start; min-height:calc(2 * clamp(72px,17cqh,105px) + 7px); gap:7px; }
.prep-seed { position:relative; display:grid; grid-template-rows:22px minmax(0,1fr) 19px; justify-items:center; width:100%; height:clamp(72px,17cqh,105px); padding:3px; border:2px solid #b6bd7b; border-radius:1px; color:#233111; background:linear-gradient(135deg,#f1efc8,#c8d393); box-shadow:inset 0 0 0 1px #ffffff99,0 2px 0 #686a37; font:800 10px/1.1 ui-sans-serif,system-ui,sans-serif; cursor:pointer; }
.prep-seed-name { display:grid; align-items:center; text-align:center; }
.prep-plant-art { display:block; width:60px; height:55px; object-fit:contain; align-self:center; filter:drop-shadow(0 2px 1px #12260844); }
.prep-cost { align-self:end; width:100%; padding-top:2px; border-top:1px solid #839b5266; text-align:center; font-size:11px; }
.prep-cost i { color:#8b6814; font-style:normal; }
.prep-seed.is-picked { border-color:#f0c356; background:linear-gradient(135deg,#e3e9b8,#9faf70); }
.prep-seed.is-picked .prep-plant-art { opacity:.55; }
.prep-check { position:absolute; right:2px; top:25px; display:grid; place-items:center; width:18px; height:18px; background:#2e4b23; border:1px solid #fff1a1; color:#f9e598; font-size:12px; }
.prep-plant-info { display:flex; flex-direction:column; justify-content:center; min-height:48px; margin-top:8px; font-size:11px; line-height:1.3; color:#c8d0b1; }
.prep-plant-info strong { color:#f0e9bf; }
.prep-plant-info small { font-size:inherit; }
.prep-pager { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:6px; font-size:10px; color:#b8c2a2; }
.prep-pager .prep-button { font-size:10px; padding:5px 7px; min-height:30px; }
.prep-roster { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.prep-enemy { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; min-width:0; height:78px; padding:4px; border:1px solid #bcb79855; border-radius:1px; color:#e9e5ce; background:#10180d88; font:700 10px/1.1 ui-sans-serif,system-ui,sans-serif; cursor:pointer; }
.prep-zombie-art { position:relative; display:block; width:46px; height:43px; }
.prep-zombie-art>img { display:block; width:100%; height:100%; object-fit:contain; }
.prep-threat-caption { min-height:42px; margin:10px 0; font-size:11px; line-height:1.35; color:#c1c9ae; }
.prep-view-lawn { width:100%; }
.prep-footer { display:grid; grid-template-columns:minmax(0,1fr) 205px; grid-template-rows:auto auto; gap:6px 16px; width:100%; margin:0; padding:10px 20px 14px; border-top:1px solid #b6a47b77; background:#172212f5; }
.prep-bank-heading { display:flex; align-items:center; justify-content:space-between; gap:7px; font-size:11px; }
.prep-bank-heading>span { color:#d4c68b; font-size:10px; }
.prep-bank { display:grid; grid-template-columns:repeat(var(--slots),minmax(0,1fr)); gap:5px; min-width:0; max-width:min(650px,calc(var(--slots) * 66px + (var(--slots) - 1) * 5px)); grid-column:1; }
.prep-slot { position:relative; display:grid; grid-template-rows:minmax(0,1fr) 12px; justify-items:center; align-items:center; min-width:0; height:65px; padding:3px; border:1px solid #bbb98c88; border-radius:1px; color:#f0ebcf; background:#50492cc2; font:700 8px/1 ui-sans-serif,system-ui,sans-serif; cursor:pointer; }
.prep-slot .prep-plant-art { width:30px; height:32px; }
.prep-slot>span:not(.prep-plant-art) { white-space:nowrap; font-size:8px; }
.prep-slot>b { position:absolute; right:2px; top:2px; color:#f8df90; font-size:9px; }
.prep-slot.is-empty { color:#a4ae91; border-style:dashed; background:#34402866; cursor:default; }
.prep-slot.is-empty>span { font-size:18px; grid-row:1/-1; }
.prep-launch { display:flex; flex-direction:column; justify-content:end; gap:7px; grid-column:2; grid-row:1/3; }
.prep-feedback { min-height:27px; color:#d6d8b7; font-size:10px; line-height:1.3; }
.prep-start { min-height:44px; padding:8px 12px; border:2px solid #9c792c; border-radius:1px; background:linear-gradient(#f8e7a1,#cda14a); color:#29300f; font:900 14px/1 ui-sans-serif,system-ui,sans-serif; cursor:pointer; box-shadow:inset 0 0 0 1px #fff0bb,0 3px 0 #624518; }
.prep-start:disabled { color:#c2c8a9; background:#46503c; border-color:#758064; box-shadow:none; cursor:default; }
.prep-screen button:focus-visible { outline:3px solid #ffe88a; outline-offset:2px; }
.prep-seed:hover { filter:brightness(1.08); }
.prep-special { min-height:160px; padding:15px 8px; color:#e5e8ce; }
.prep-special h3 { font:700 22px/1.1 Georgia,serif; }
.prep-special p { max-width:330px; font-size:13px; line-height:1.5; }
.prep-supplied-art { display:flex; gap:20px; }
.prep-lawn-inspection { position:absolute; z-index:10; inset:0; display:flex; flex-direction:column; justify-content:center; gap:12px; padding:18px; background:#111b10f5; }
.prep-lawn-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; }
.prep-board { flex:none; width:min(100%,600px,calc((100cqh - 125px) * 4 / 3)); aspect-ratio:4/3; margin-inline:auto; background:var(--level-art) 36.667% center/175% 100% no-repeat; border:2px solid #919c6b; }
.prep-lawn-inspection>p { margin:0; font-size:12px; text-align:center; color:#d2daba; }
.prep-fixture-controls { display:flex; flex-wrap:wrap; gap:10px 18px; font-size:12px; color:var(--muted); }
.prep-fixture-controls[hidden] { display:none; }
.prep-fixture-controls label { display:flex; gap:7px; align-items:center; }
.prep-fixture-controls select { padding:6px 8px; border:1px solid #657a4e; border-radius:3px; background:#1d2c18; color:#e3edd2; font:inherit; }
.prep-fixture-controls small { width:100%; color:#91a67c; }
.prep-bank[data-count="0"] { display:none; }
.prep-game-preview { grid-template-rows:56px minmax(0,1fr) auto; }
.prep-starting-sun { justify-self:end; color:#f4db7e; font-size:14px; }
.prep-preview-lawn { display:flex; align-items:center; justify-content:center; min-height:0; padding:12px; }
.prep-preview-lawn .prep-board { width:min(100%,calc((100cqh - 180px) * 4 / 3)); height:auto; }
.prep-preview-bank { display:flex; justify-content:center; gap:6px; padding:10px; background:#172212f5; }
.prep-preview-bank .prep-slot { width:58px; }
.prep-preview-bank>p { margin:5px; font-size:12px; }
@container (max-height:490px) and (min-width:621px) {
  .prep-screen { grid-template-rows:46px minmax(0,1fr) auto; }
  .prep-body { padding:8px 18px; gap:12px; grid-template-columns:minmax(0,440px) 230px; }
  .prep-panel { padding:8px; }
  .prep-section-heading { margin-bottom:5px; min-height:25px; }
  .prep-section-heading h2 { font-size:18px; }
  .prep-plant-info { min-height:38px; margin-top:5px; font-size:10px; }
  .prep-threat-caption { min-height:30px; font-size:10px; margin:6px 0; }
  .prep-enemy { height:64px; }
  .prep-footer { padding:7px 18px 10px; }
  .prep-slot { height:56px; }
}
@container (max-width:620px) {
  .prep-screen { grid-template-rows:48px minmax(0,1fr) auto; }
  .prep-header { padding:5px 10px; gap:4px; }
  .prep-header strong { font-size:12px; }
  .prep-header>div>span { font-size:9px; }
  .prep-header .prep-button { padding:5px 7px; font-size:10px; }
  .prep-body { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); grid-template-areas:'threats' 'catalog'; align-content:stretch; align-items:center; gap:9px; padding:9px 10px; }
  .prep-catalog { grid-area:catalog; }
  .prep-panel { padding:9px; }
  .prep-section-heading h2 { font-size:19px; }
  .prep-grid { gap:6px; min-height:182px; }
  .prep-seed { height:88px; grid-template-rows:21px minmax(0,1fr) 18px; font-size:10px; }
  .prep-seed .prep-plant-art { width:38px; height:36px; }
  .prep-plant-info { min-height:47px; font-size:10px; }
  .prep-threats { grid-area:threats; position:relative; padding:7px 8px; }
  .prep-threats .prep-section-heading { min-height:18px; margin:0 0 5px; }
  .prep-threats h2 { font:800 11px/1 ui-sans-serif,system-ui,sans-serif; }
  .prep-roster { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  .prep-enemy { height:59px; font-size:9px; border-color:transparent; padding:2px; }
  .prep-zombie-art { width:35px; height:34px; }
  .prep-threat-caption { display:none; }
  .prep-view-lawn { position:absolute; top:4px; right:5px; width:auto; font-size:9px; padding:3px 6px; min-height:24px; }
  .prep-footer { grid-template-columns:1fr; grid-template-rows:auto auto auto; padding:8px 10px 10px; gap:6px; }
  .prep-bank { width:100%; grid-column:1; gap:4px; }
  .prep-slot { height:53px; padding:2px; }
  .prep-slot>span:not(.prep-plant-art) { font-size:7px; }
  .prep-slot .prep-plant-art { width:25px; height:27px; }
  .prep-bank[data-count='8'],.prep-bank[data-count='10'] { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .prep-bank[data-count='8'] .prep-slot,.prep-bank[data-count='10'] .prep-slot { height:42px; }
  .prep-bank[data-count='8'] .prep-slot.is-filled>span:not(.prep-plant-art),.prep-bank[data-count='10'] .prep-slot.is-filled>span:not(.prep-plant-art) { display:none; }
  .prep-launch { grid-column:1; grid-row:auto; display:grid; grid-template-columns:1fr 140px; align-items:center; gap:8px; }
  .prep-feedback { min-height:0; font-size:10px; }
  .prep-start { min-height:42px; font-size:13px; }
  .prep-lawn-heading { flex-wrap:wrap; }
}
@container (max-width:620px) and (max-height:640px) {
  .prep-body { padding:6px 8px; gap:6px; }
  .prep-panel { padding:6px; }
  .prep-section-heading { min-height:24px; margin-bottom:5px; }
  .prep-section-heading h2 { font-size:18px; }
  .prep-seed { height:72px; grid-template-rows:19px minmax(0,1fr) 16px; font-size:9px; }
  .prep-grid { min-height:150px; }
  .prep-seed .prep-plant-art { width:30px; height:28px; }
  .prep-cost { font-size:10px; }
  .prep-check { top:20px; width:15px; height:15px; font-size:10px; }
  .prep-plant-info { min-height:38px; margin-top:5px; font-size:9px; }
  .prep-pager { margin-top:4px; }
  .prep-pager .prep-button { min-height:27px; padding:4px 6px; font-size:9px; }
  .prep-enemy { height:46px; }
  .prep-zombie-art { height:26px; }
  .prep-footer { padding:6px 8px 8px; gap:5px; }
  .prep-slot { height:45px; }
  .prep-slot .prep-plant-art { height:23px; width:23px; }
  .prep-screen[data-capacity='8'] .prep-seed,.prep-screen[data-capacity='10'] .prep-seed { height:65px; }
  .prep-screen[data-capacity='8'] .prep-grid,.prep-screen[data-capacity='10'] .prep-grid { min-height:136px; }
  .prep-screen[data-capacity='8'] .prep-plant-info,.prep-screen[data-capacity='10'] .prep-plant-info { min-height:34px; }
}
@container (max-height:380px) and (min-width:621px) {
  .prep-body { grid-template-columns:minmax(0,480px) 220px; }
  .prep-grid { grid-template-columns:repeat(8,minmax(0,1fr)); min-height:83px; gap:5px; }
  .prep-seed { height:83px; font-size:8px; }
  .prep-seed .prep-plant-art { width:29px; height:33px; }
  .prep-roster { grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; }
  .prep-enemy { height:64px; font-size:8px; }
  .prep-zombie-art { transform:scale(.85); }
  .prep-threats h2 { font-size:16px; }
  .prep-plant-info { min-height:30px; }
  .prep-pager { margin-top:3px; }
  .prep-pager .prep-button { min-height:25px; }
  .prep-footer { grid-template-columns:minmax(0,1fr) 180px; }
  .prep-slot { height:48px; }
  .prep-slot .prep-plant-art { height:23px; width:25px; }
  .prep-feedback { min-height:20px; font-size:9px; }
  .prep-special { min-height:0; padding:4px; }
  .prep-special h3 { font-size:17px; margin-bottom:6px; }
  .prep-special p { font-size:11px; margin:0; }
}