/* Campaign overlay on the 960x540 game grid; main.js scales the root like the battle canvas, so one CSS px is one game px.
   All art is pixel canvases/PNGs: no CSS borders, no vector text, no fractional motion. */
#campaign { position:fixed; width:960px; height:540px; transform-origin:top left; pointer-events:none; }
#campaign canvas, #campaign img { display:block; image-rendering:pixelated; }
#campaign button { position:absolute; pointer-events:auto; cursor:pointer; padding:0; margin:0; border:0; background:none; font:inherit; color:inherit; }
#campaign button:focus-visible { outline:2px solid #ffe272; outline-offset:2px; }
#campaign button:disabled { cursor:default; }
#campaign [hidden] { display:none !important; }
#campaign .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* The HUD toggle (H) hides every overlay element; visibility keeps the layout measurable while hidden. */
body.hud-off #campaign { visibility:hidden; }
#ui-fx { position:absolute; left:0; top:0; width:960px; height:540px; z-index:50; pointer-events:none; }

.syn { position:absolute; top:-2px; }
#syn-left { left:-2px; } #syn-right { right:-2px; }
#cmd-bar { position:absolute; left:321px; top:-2px; width:318px; height:39px; }
#status-plates { position:absolute; inset:0; pointer-events:none; }
#campaign .status-plate { position:absolute; z-index:1; }

/* Recruit cards (Horde3d layout): a row at the top, moved per frame in whole pixels by campaignUI. */
#campaign-shop { position:absolute; inset:0; }
#campaign .offer { width:96px; height:144px; z-index:4; }
#campaign .offer:hover { z-index:6; }
#campaign .offer .card-art { position:absolute; left:0; top:0; width:96px; height:144px; }
/* Positions of the stat row, coin, HUD, ribbon and halo come from campaignUI.js and cardFace.js. The halo is
   the first child, so it sits behind the art; the coin tucks over the ribbon's left tail. */
#campaign .offer .card-glow { position:absolute; pointer-events:none; }
#campaign .offer .card-stats { position:absolute; left:0; }
#campaign .offer .cost { position:absolute; z-index:3; }
#campaign .offer .card-hud { position:absolute; }
#campaign .offer .level-up { position:absolute; z-index:2; }
/* Horde3d multiplies an unaffordable card's art by 0.43 grey; the stats, coin and HUD stay lit. */
#campaign .offer.unaffordable .card-art { filter:brightness(.43); }
#campaign .offer:active .card-art { top:2px; }
#campaign-board { position:absolute; inset:0; }
#campaign .board-cell { width:64px; height:40px; z-index:2; }
#campaign .formation { touch-action:none; cursor:grab; }
#campaign .formation:active { cursor:grabbing; }
#campaign .board-cell.formation { z-index:3; }

#reserve-shelf { position:absolute; left:208px; top:472px; }
#campaign-reserves { position:absolute; inset:0; }
#campaign .reserve { width:100px; height:60px; z-index:3; }
#campaign .reserve .reserve-units { position:absolute; left:-6px; top:-44px; width:112px; height:112px; pointer-events:none; }
#campaign .reserve .rank { position:absolute; right:6px; top:60px; }
#campaign .reserve.formation:hover .reserve-units { transform:translateY(-2px); }
.drag-ghost { position:absolute; z-index:40; pointer-events:none; opacity:.85; }

#campaign-turn { position:absolute; left:3px; top:453px; }
#campaign-notice { position:absolute; margin:0; z-index:5; }
#campaign-action { z-index:6; }
#campaign-action:disabled { cursor:default; }
/* Hover grows the whole FIGHT button a little (nearest-neighbour, so its pixels stay hard). */
#campaign-action:not(:disabled):hover { transform:scale(1.08); transform-origin:50% 50%; }
#campaign-sell { top:362px; z-index:6; }
#campaign-speed { right:128px; top:6px; z-index:6; }
#unit-hover { position:absolute; z-index:55; pointer-events:none; }
#banner { position:absolute; z-index:40; pointer-events:none; }

/* Utility controls as 22x22 pixel icon plates on the 960x540 grid (campaign mode). */
body.campaign #hud-controls { gap:2px; z-index:60; }
body.campaign #hud-controls button { width:22px; height:22px; padding:0; border:0; background:none; }
body.campaign #hud-controls button canvas { display:block; image-rendering:pixelated; }
body.campaign #hud-controls button:hover { filter:brightness(1.3); transform:translateY(2px); }