/* AFTER hitbox-owner handoff only. Append after pixel-hud.css. No box geometry changes.
   Derived PNG slices equal used CSS border widths: corners render 1:1 CSS pixels.
   Filled border-image paints in the background layer; DOM labels remain above it. */
:root {
  --ph-panel:url("assets/pixel-hud-repair/panel-9s.png");
  --ph-card:url("assets/pixel-hud-repair/status-card-9s.png");
  --ph-portrait:url("assets/pixel-hud-repair/portrait-frame.png");
  --ph-meter:url("assets/pixel-hud-repair/meter-frame.png");
  --ph-boss:url("assets/pixel-hud-repair/boss-meter-frame.png");
  --ph-idle:url("assets/pixel-hud-repair/button-idle.png");
  --ph-selected:url("assets/pixel-hud-repair/button-selected.png");
  --ph-pressed:url("assets/pixel-hud-repair/button-pressed.png");
  --ph-disabled:url("assets/pixel-hud-repair/button-disabled.png");
  --ph-tool:url("assets/pixel-hud-repair/tool-button.png");
  --ph-banner:url("assets/pixel-hud-repair/banner-frame.png");
  --ph-combo:url("assets/pixel-hud-repair/combo-frame.png");
  --ph-input:url("assets/pixel-hud-repair/input-frame.png");
  --ph-menu:url("assets/pixel-hud-repair/menu-card-9s.png");
}
button, .touch-action, .ce-special, #context-action { border-image-slice:8 fill; border-image-width:8px; border-image-outset:0; border-image-repeat:stretch; }
.panel { border-image-slice:10 fill; border-image-width:10px; border-image-outset:0; }
#player-card, #ally-card, #boss-hud { border-image-slice:8 fill; border-image-width:8px; border-image-outset:0; }
#player-card>img, #ally-card img, .character-choices img { border-image-slice:7 fill; border-image-width:7px; border-image-outset:0; }
.meter, .loading-panel progress { border-image-slice:4 fill; border-image-width:4px; border-image-outset:0; }
#game-tools button, .panel-brand .seal { border-image-slice:7 fill; border-image-width:7px; border-image-outset:0; }
#location-intro, #fight-banner, #combo, input { border-image-slice:8 fill; border-image-width:8px; border-image-outset:0; }
#stick { background-image:url("assets/pixel-hud-repair/stick-base.png"); }
#knob { background-image:url("assets/pixel-hud-repair/stick-knob.png"); }
/* Source selection must follow component rules, whose specificity otherwise wins
   over the original generic :active/:disabled rules. No transform override. */
#context-action:hover { border-image-source:var(--ph-selected); }
button:not(:disabled):not([aria-disabled="true"]):is(:active,[data-force-pressed="true"]),
#game-tools button:not(:disabled):not([aria-disabled="true"]):is(:active,[data-force-pressed="true"]),
#context-action:not(:disabled):not([aria-disabled="true"]):is(:active,[data-force-pressed="true"]) { border-image-source:var(--ph-pressed); }
button:is(:disabled,[aria-disabled="true"]), .panel button:is(:disabled,[aria-disabled="true"]), .touch-action:is(:disabled,[aria-disabled="true"]), .character-choices button:is(:disabled,[aria-disabled="true"]), #game-tools button:is(:disabled,[aria-disabled="true"]), #context-action:is(:disabled,[aria-disabled="true"]) { border-image-source:var(--ph-disabled); }
#game-tools button:is(:hover,[aria-pressed="true"]) { border-image-source:url("assets/pixel-hud-repair/tool-selected.png"); }
#game-tools button:not(:disabled):not([aria-disabled="true"]):is(:active,[data-force-pressed="true"]) { border-image-source:url("assets/pixel-hud-repair/tool-pressed.png"); }
#game-tools button:is(:disabled,[aria-disabled="true"]) { border-image-source:url("assets/pixel-hud-repair/tool-disabled.png"); }
/* Joined invite controls have no gap. Put the existing 3px focus outline in
   the padding lane, after the 8px generated frame, not over the adjacent frame. */
#invite:focus-visible, #pause-invite-link:focus-visible, #copy-invite:focus-visible, #pause-copy:focus-visible { outline-offset:-11px; }
/* Keep the measured 8px outer box; original 4px borders left zero progress content. */
.loading-panel progress { height:8px; border-width:2px; border-image-source:url("assets/pixel-hud-repair/loading-frame.png"); border-image-slice:2 fill; border-image-width:2px; }