/* M4-P5 Halloween entrance accents (local; pending Codex review).
   Art: Codex-approved pumpkin/bat technical exports, byte-identical copies of concept-art/m4-p5-accent-staging/exports/
   (SHA-256 in evidence/m4-p5-accent-staging/exports-provenance.json). Top-level files, like every other runtime image:
   the release builder only collects top-level assets.
   Only the four entrance actions (#btnGoHost, #btnGoJoin, #btnHostLogin, #joinGameBtn), only while Halloween is the
   active theme (the existing early saved-theme / room-theme rules; nothing new decides it). Classic and other themes match
   nothing here, so they request neither file. Every other button stays plain.
   Accents are ::before/::after pseudo-elements: no markup, nothing announced, no pointer events (the overhang never extends
   the clickable area), and they survive the controls' textContent updates ("Logging in...", "Connecting..."). They inherit
   the button's own hover/pressed transforms and its disabled grey fade, and are removed during keyboard focus so the
   original focus ring stays whole. A missing or slow image simply paints nothing: the plain button is always usable.
   Placement (measured on the real screens, see evidence/M4_P5_ENTRANCE_ACCENTS_CLAUDE_REPORT.md): one accent per control,
   on its outer corner, with the part over the button kept inside the gold end cap (clear of the label by >= 12 px), and
   on the login/join cards at least 6 px inside the card's gold frame (the frame is not a perch).
   - Main-menu tiles (48 px): the pair is 14 px apart, so each tile gets only the corner facing away from the other.
     Stacked (<= 640 px): Host top-right bat, Join bottom-left pumpkin. Side by side: Host bottom-left pumpkin, Join
     top-right bat.
   - Login & Host (44 px): top-right bat only; Create Account sits 16 px below; the card frame is 17 px to the right.
   - Join the Battle (40 px): top-right bat only, from 360 px wide; the name field is 23 px above, error text appears
     17 px below and the card frame is 25 px to the right, and on narrower phones the label leaves no 12 px clearance, so it stays plain there. */
body.theme-halloween #screenLanding :is(#btnGoHost, #btnGoJoin),
body.theme-halloween #screenHostLogin #btnHostLogin,
body.theme-halloween #playerContainer .joinScreen #joinGameBtn { position: relative; }

/* Main-menu tiles, stacked (phones): outer corners of the stack. */
@media (max-width: 640px) {
  body.theme-halloween #screenLanding #btnGoHost::after {
    content: ''; position: absolute; right: -24px; top: -16px; width: 48px; height: 48px; pointer-events: none;
    background: url('btn-accent-halloween-right.webp') center / contain no-repeat;
  }
  body.theme-halloween #screenLanding #btnGoJoin::before {
    content: ''; position: absolute; left: -24px; bottom: -16px; width: 48px; height: 48px; pointer-events: none;
    background: url('btn-accent-halloween-left.webp') center / contain no-repeat;
  }
}
/* Main-menu tiles, side by side: outer corners of the pair. */
@media (min-width: 641px) {
  body.theme-halloween #screenLanding #btnGoHost::before {
    content: ''; position: absolute; left: -24px; bottom: -16px; width: 48px; height: 48px; pointer-events: none;
    background: url('btn-accent-halloween-left.webp') center / contain no-repeat;
  }
  body.theme-halloween #screenLanding #btnGoJoin::after {
    content: ''; position: absolute; right: -24px; top: -16px; width: 48px; height: 48px; pointer-events: none;
    background: url('btn-accent-halloween-right.webp') center / contain no-repeat;
  }
}
/* Login & Host. */
body.theme-halloween #screenHostLogin #btnHostLogin::after {
  content: ''; position: absolute; right: -14px; top: -14px; width: 44px; height: 44px; pointer-events: none;
  background: url('btn-accent-halloween-right.webp') center / contain no-repeat;
}
/* Join the Battle (not below 360 px wide). */
@media (min-width: 360px) {
  body.theme-halloween #playerContainer .joinScreen #joinGameBtn::after {
    content: ''; position: absolute; right: -14px; top: -10px; width: 40px; height: 40px; pointer-events: none;
    background: url('btn-accent-halloween-right.webp') center / contain no-repeat;
  }
}
/* Keyboard focus: the accents are removed so the complete original focus ring shows (no box left to paint over it). The
   selectors are one step more specific than the accent rules above. */
body.theme-halloween #screenLanding :is(#btnGoHost, #btnGoJoin):focus-visible::before,
body.theme-halloween #screenLanding :is(#btnGoHost, #btnGoJoin):focus-visible::after,
body.theme-halloween #screenHostLogin #btnHostLogin:focus-visible::after,
body.theme-halloween #playerContainer .joinScreen #joinGameBtn:focus-visible::after { content: none; }