/* Original-platform HUD compositions. 800×600 stage stays whole.
 * Desktop/iPad: top wooden tray. iPhone landscape: left seed column.
 * See DESIGN.md, owner-requested reference pass 2026-10-24.
 */
.battle-screen { isolation:isolate; color:#eee8cc; background:#1c2919; }
.battle-screen::before { inset:-24px; z-index:-1; background:linear-gradient(#16251066,#16251099),var(--battle-art) center/cover; filter:blur(18px); }
.battle-live { container-type:size; display:grid; place-items:center; min-height:0; height:100%; padding:0; }
.battle-layout { container-type:inline-size; position:relative; width:min(100cqw,calc(100cqh * 4 / 3)); aspect-ratio:4/3; }
.battle-stage-space { position:absolute; inset:0; }
.battle-board { position:relative; width:100%; height:100%; aspect-ratio:4/3; overflow:hidden; background:var(--board-art) 36.6667% center/175% 100% no-repeat; box-shadow:0 0 0 1px #263a1b66,0 6px 25px #0005; }
.battle-board .guide-label { top:17%; left:6px; border-radius:0; font-size:8px; pointer-events:none; opacity:.7; }
.battle-squares { position:absolute; left:5%; top:13.3333%; width:90%; height:83.3333%; display:grid; grid-template-rows:repeat(var(--lawn-rows),1fr); }
.battle-row { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); min-height:0; }
.battle-square { display:flex; align-items:end; justify-content:center; position:relative; min-width:0; min-height:0; padding:0; border:1px solid transparent; border-radius:0; background:transparent; cursor:pointer; }
.battle-square>img { width:100%; height:100%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 3px 1px #173d1744); }
.has-seed .battle-square:hover,.has-seed .battle-square:focus-visible { background:#fbf5a845; border:2px dashed #f9e8a0; }
.has-shovel .battle-square.is-planted:hover { background:#d9544050; border:2px dashed #efc09a; }
.battle-square:focus-visible { outline:2px solid #fff0a4; outline-offset:-2px; }
.battle-world { position:absolute; inset:0; pointer-events:none; }
.battle-mower { position:absolute; left:0; width:6%; height:10%; object-fit:contain; transform:translateY(-50%); }
.battle-zombie { position:absolute; height:23%; width:11%; object-fit:contain; transform:translate(-50%,-50%); filter:drop-shadow(0 3px 1px #16371b55); }

.battle-sun-drop { position:absolute; z-index:3; display:grid; place-items:center; width:9%; min-width:36px; aspect-ratio:1; padding:0; border:0; background:transparent; transform:translate(-50%,-50%); cursor:pointer; filter:drop-shadow(0 0 9px #ffe47788); }
.battle-sun-drop>img { position:absolute; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.battle-sun-drop>img.battle-sun-core { width:30%; height:30%; }
/* Wood is chrome; controls remain accessible HTML, not baked hit regions. */
.battle-companion { --packet:clamp(30px,5.8cqw,54px); position:absolute; z-index:4; top:0; left:1%; display:grid; grid-template-areas:"sun bank shovel"; grid-template-columns:calc(var(--packet) * 1.18) max-content calc(var(--packet) * .94); align-items:stretch; gap:5px; padding:6px; border:3px solid #a85a29; border-radius:3px; background:linear-gradient(110deg,#703512,#82421e 50%,#613013); box-shadow:inset 0 0 0 2px #b77b3c,0 2px 1px #241a1188; }
.battle-resources { display:contents; }
.battle-sun-total { grid-area:sun; position:relative; align-self:stretch; background:url('assets/images/SunBank.png') center/100% 100% no-repeat; color:#18220f; }
.battle-sun-total strong { position:absolute; bottom:4%; left:0; right:0; text-align:center; font:900 clamp(10px,2.1cqw,20px)/1 ui-sans-serif,system-ui,sans-serif; }
.battle-tool { grid-area:shovel; display:grid; place-items:center; min-width:0; padding:3px; border:1px solid #b17e3f; border-radius:1px; background:url('assets/images/ShovelBank.png') center/100% 100% no-repeat; cursor:pointer; }
.battle-tool>img { width:100%; max-height:55px; object-fit:contain; }
.battle-tool>span,.battle-bank-label { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.battle-bank { grid-area:bank; display:flex; gap:3px; min-width:0; }
.battle-packet { position:relative; isolation:isolate; display:grid; grid-template-rows:14px minmax(0,1fr) 15px; justify-items:center; align-items:center; flex:none; width:var(--packet); height:calc(var(--packet) * 1.4); min-height:44px; padding:2px; border:1px solid #636e3c; border-radius:1px; color:#202a12; background:linear-gradient(#f2edd1 0 19%,#c9df9c 20% 76%,#f4efcf 77%); box-shadow:inset 0 0 0 2px #fff5ce; cursor:pointer; }
.battle-seed-name { width:100%; font:800 clamp(6px,.9cqw,9px)/1 ui-sans-serif,system-ui,sans-serif; text-align:center; }
.battle-packet>img { width:100%; height:100%; min-height:0; object-fit:contain; pointer-events:none; }
.battle-seed-price { font:900 clamp(9px,1.7cqw,15px)/1 ui-sans-serif,system-ui,sans-serif; }
.battle-packet kbd { position:absolute; top:15px; left:2px; color:#34471c; font:700 6px/1 monospace; }
.battle-packet.is-selected,.battle-tool.is-selected { outline:2px solid #fff27d; outline-offset:1px; filter:brightness(1.1); }
.battle-packet.is-poor { filter:saturate(.2) brightness(.7); }
.battle-recharge { position:absolute; z-index:2; inset:0; height:calc(var(--cool) * 100%); background:#152518a6; pointer-events:none; }
.battle-seed-state { position:absolute; z-index:3; bottom:17px; left:1px; right:1px; text-align:center; white-space:nowrap; color:#fff1ce; background:#22371ded; font:800 7px/1.1 ui-sans-serif,system-ui,sans-serif; }
.battle-seed-state:empty { display:none; }
.battle-button { min-height:34px; padding:6px 10px; border:2px solid #77756f; border-radius:2px; background:linear-gradient(#8b8c83,#50594c); box-shadow:inset 0 0 0 2px #a4a69a,0 2px 0 #29362a; color:#ecedd7; font:800 12px/1.1 Georgia,serif; cursor:pointer; }
.battle-pause { position:absolute; z-index:5; right:1%; top:0; width:12%; min-width:62px; min-height:34px; height:7%; color:#8ed73c; background:linear-gradient(#777a8c,#4b5066); border-color:#42485b; box-shadow:inset 0 0 0 2px #9697a4,0 2px 0 #26302a; font:900 clamp(13px,2.3cqw,22px)/1 Georgia,serif; text-shadow:1px 2px #1e3120; }
.battle-screen[data-hud-family="tablet"] .battle-pause { width:13%; height:13%; }
.battle-bottom { display:contents; }
.battle-feedback { position:absolute; z-index:5; bottom:5px; left:5px; max-width:43%; margin:0; padding:3px 5px; color:#fff4ce; background:#1b2a15db; font:700 9px/1.25 ui-sans-serif,system-ui,sans-serif; }
.battle-feedback:empty { display:none; }
.battle-cancel { position:absolute; z-index:5; left:5px; bottom:32px; min-height:28px; padding:4px 9px; border:1px solid #b3b775; border-radius:1px; color:#f4efcb; background:#293c1c; font-size:10px; cursor:pointer; }
.battle-wave { position:absolute; z-index:4; right:2%; bottom:1%; display:grid; grid-template-columns:auto minmax(90px,20cqw); grid-template-rows:auto auto; align-items:center; gap:0 7px; color:#ffefd1; text-shadow:1px 1px 2px #172613,-1px -1px #172613; }
.battle-level { grid-row:1/3; font:900 clamp(11px,1.9cqw,18px)/1 Georgia,serif; white-space:nowrap; }
.battle-wave>div { position:relative; height:14px; border:3px solid #526075; border-radius:8px; background:#101710; box-shadow:0 1px 1px #0008; }
.battle-wave i { display:block; width:var(--wave-progress); height:100%; border-radius:3px; background:linear-gradient(#d2ed41,#7daf18); }
.battle-wave small { text-align:right; font:700 8px/1.1 ui-sans-serif,system-ui,sans-serif; }
.battle-meter-head { position:absolute; width:23px; height:23px; object-fit:contain; left:-12px; top:-7px; }
.battle-flag { position:absolute; right:3px; top:-14px; color:#ac4936; font:900 20px/1 Georgia,serif; }
.battle-screen button:focus-visible { outline:3px solid #ffef91; outline-offset:1px; z-index:6; }
.battle-overlay { position:absolute; inset:0; z-index:10; display:grid; place-items:center; padding:12px; background:#071004bc; backdrop-filter:blur(3px); }
.battle-dialog { width:min(330px,90%); padding:22px; border:2px solid #a49c7a; background:linear-gradient(145deg,#454937,#242b20); box-shadow:inset 0 0 0 4px #161d13,0 12px 35px #0008; text-align:center; }
.battle-dialog-level { color:#dbcc91; font-size:11px; font-weight:800; }
.battle-dialog h2 { margin:6px 0 9px; font:700 32px/1 Georgia,serif; color:#f3ead0; letter-spacing:-.02em; }
.battle-dialog p { margin:0 0 14px; color:#c5cbb1; font-size:12px; line-height:1.4; }
.battle-dialog-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.battle-dialog-actions>.battle-gold { grid-column:1/-1; }
.battle-gold { border-color:#bd9a47; background:linear-gradient(#f6e8ae,#c6a250); color:#30371c; }
.battle-dialog small { display:block; margin-top:12px; font-size:9px; color:#a7b197; }
.game-fixture-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; color:var(--muted); font-size:12px; }
.game-fixture-controls[hidden] { display:none; }
.game-fixture-controls label { display:flex; align-items:center; gap:7px; }
.game-fixture-controls select,.game-fixture-controls button { padding:6px 8px; border:1px solid #657a4e; border-radius:3px; background:#1d2c18; color:#e3edd2; font:inherit; }
.game-fixture-controls button { cursor:pointer; }
.game-fixture-controls small { width:100%; color:#91a67c; }
.device-frame[data-guides="on"] .preview:has(.battle-screen)::after { display:none; }

/* Off-board rails: ultrawide + phone only. Do not apply to Duo/tablet. */
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-live { padding:0 8px; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-layout {
  --left-rail:148px; --right-rail:38px; --rail-gap:10px;
  --rail-space:calc(var(--left-rail) + var(--right-rail) + 2 * var(--rail-gap));
  width:min(100cqw,calc((100cqh - 12px) * 4 / 3 + var(--rail-space)));
  height:min(calc(100cqh - 12px),calc((100cqw - var(--rail-space)) * 3 / 4));
  aspect-ratio:auto;
}
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-stage-space { left:calc(var(--left-rail) + var(--rail-gap)); right:calc(var(--right-rail) + var(--rail-gap)); }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-companion {
  left:0; top:0; bottom:0; width:var(--left-rail); padding:4px;
  display:grid; grid-template-areas:"sun sun" "bank bank" "shovel spare";
  grid-template-columns:1fr 1fr; grid-template-rows:28px minmax(0,1fr) 44px;
  gap:4px; border-width:3px; border-radius:2px;
}
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-sun-total { height:28px; background:linear-gradient(#f3e6ac,#d6c280); border:1px solid #b18741; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-sun-total::before { content:""; position:absolute; left:2px; top:0; width:27px; height:27px; background:url('assets/reanim/Sun2.png') center/contain no-repeat; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-sun-total::after { content:""; position:absolute; left:10px; top:8px; width:10px; height:10px; background:url('assets/reanim/Sun1.png') center/contain no-repeat; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-sun-total strong { left:30px; bottom:3px; font-size:20px; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-bank { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(44px,1fr); min-height:0; gap:1px; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-packet { width:100%; height:100%; min-height:44px; grid-template-rows:0 minmax(0,1fr) 12px; padding:2px; background:linear-gradient(#e9f2ce,#b8d78c 70%,#f4efcf 72%); }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-seed-name { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-packet>img { grid-row:2; width:100%; height:100%; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-seed-price { grid-row:3; justify-self:end; padding-right:2px; font-size:12px; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-packet kbd { display:none; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-seed-state { font-size:7px; bottom:15px; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-tool { height:44px; padding:2px; grid-template-columns:1fr; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-tool>img { height:32px; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-pause { top:auto; left:calc(var(--left-rail) / 2 + 2px); right:auto; bottom:7px; width:calc(var(--left-rail) / 2 - 9px); min-width:44px; height:44px; font-size:15px; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-wave { top:0; bottom:0; right:0; width:var(--right-rail); display:grid; grid-template-columns:1fr; grid-template-rows:65px minmax(70px,1fr) 65px; gap:8px; justify-items:center; padding:4px 0; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-level { grid-column:1; grid-row:1; writing-mode:vertical-rl; font-size:12px; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-wave>div { grid-column:1; grid-row:2; height:100%; width:16px; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-wave i { position:absolute; bottom:0; left:0; width:100%; height:var(--wave-progress); }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-wave small { grid-column:1; grid-row:3; writing-mode:vertical-rl; text-align:center; font-size:10px; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-meter-head { top:auto; bottom:-10px; left:-7px; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-flag { top:0; right:-9px; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-feedback { left:calc(var(--left-rail) + var(--rail-gap) + 4px); font-size:8px; }
.battle-screen:is([data-hud-family="phone"],[data-hud-family="wide"]) .battle-cancel { display:none; }
/* Desktop rail packets remain compact rather than stretching with the screen. */
.battle-screen[data-hud-family="wide"] .battle-bank { grid-auto-rows:58px; align-content:center; gap:4px; }
.battle-screen[data-hud-family="wide"] .battle-seed-name { position:static; width:auto; height:auto; clip-path:none; font-size:8px; }
.battle-screen[data-hud-family="wide"] .battle-packet { grid-template-rows:12px minmax(0,1fr) 13px; }
@container (max-height:380px) and (min-width:621px) {
  .battle-dialog { width:min(470px,90%); padding:15px 20px; }
  .battle-dialog h2 { font-size:26px; margin:3px 0 7px; }
  .battle-dialog p { margin-bottom:9px; font-size:11px; }
  .battle-dialog-actions { grid-template-columns:repeat(3,1fr); }
  .battle-dialog-actions>.battle-gold { grid-column:auto; }
  .battle-dialog .battle-button { min-height:38px; font-size:10px; }
  .battle-dialog small { margin-top:8px; }
}