/* ══════════════════════════════════════════════════════════════════════════
   ZTS ARCADE — NO BLUE ANYWHERE
   ══════════════════════════════════════════════════════════════════════════
   *"purge all the blue highlights when you click any of the arcade buttons on
   any of the games."*

   The blue is the browser's, not ours, and it arrives by four different doors.
   Killing one and calling it done is how it survived this long:

     1. the TAP FLASH   — Android paints a translucent blue box over whatever
                          you press. `-webkit-tap-highlight-color`.
     2. the FOCUS RING  — a clicked button keeps focus, and some engines draw a
                          blue ring around it until you press something else.
     3. the SELECTION   — a press that drags a pixel selects the label instead
                          of pressing the key, and selected text is blue.
     4. the CALLOUT     — a long press on Android/iOS raises the copy/share
                          sheet with a blue swatch behind the words.

   It had been fixed piecemeal: Redline, Night Vision and Paydirt each set the
   tap colour on their own deck and canvas, Heavy Hands set it on `html`, and
   Pixel Hoops and the arcade floor had none of it at all — which is why the
   blue showed up on the two cabinets with the most buttons.

   ⚠ CONTROLS ONLY FOR 2–4. Text still has to be selectable: room codes get
   copied, chat gets quoted, scoreboards get read out. `user-select:none` goes
   on the things you PRESS, never on the page, and inputs keep their caret,
   their selection and their focus ring — a text field with no focus ring is
   a text field you cannot tell you are typing into.

   ⚠ AND THE KEYBOARD KEEPS ITS RING. `:focus-visible` is how a browser says
   "this focus came from a keyboard"; that ring stays, in the cabinet's own
   green rather than the system blue. Only the pointer's ring is removed.
   Loaded by every cabinet — see arcade-ui.js, which is the same idea for sound.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1 · THE TAP FLASH — one declaration, inherited by everything on the page. */
html { -webkit-tap-highlight-color: transparent; }

/* 3 · THE SELECTION is already handled: style.css sets ::selection to the ZTS
   green site-wide and every cabinet links it. Nothing to do here — noted so the
   next person does not "fix" it a second time and start a specificity fight. */

/* 2 + 3 + 4 · anything you press: no ring from a pointer, no drag-select, no
   long-press sheet. The list is every control the arcade has, at every cabinet,
   named once here rather than six times in six files. */
.cab button, .cab a, .cab [role="button"],
.gate button, .gate a,
.ov button, .ov a,
.rack button, .rack a,
.btn-sm, .cab-key, .coin-btn, .scores-btn, .bk-btn, .gate-go,
.menu-btn, .share-btn, .ov-back, .ov-btn, .deck-btn, .diff-btn,
.fcard, .gun-btn, .rc-car, .wrow, .swap-btn, .mit-toggle, .sens-btn,
.voice-row, .gm-icon, .acts button, .pb {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* the pointer's ring goes; the keyboard's stays, two lines below */
.cab button:focus:not(:focus-visible),
.gate button:focus:not(:focus-visible),
.ov button:focus:not(:focus-visible),
.rack button:focus:not(:focus-visible),
.btn-sm:focus:not(:focus-visible),
.cab-key:focus:not(:focus-visible),
.coin-btn:focus:not(:focus-visible),
.scores-btn:focus:not(:focus-visible),
.gate-go:focus:not(:focus-visible),
.menu-btn:focus:not(:focus-visible),
.share-btn:focus:not(:focus-visible),
.ov-back:focus:not(:focus-visible),
.ov-btn:focus:not(:focus-visible),
.deck-btn:focus:not(:focus-visible),
.diff-btn:focus:not(:focus-visible),
.voice-row:focus:not(:focus-visible),
.gm-icon:focus:not(:focus-visible) { outline: none; }

/* ⚠ THIS IS NOT THE SAME RULE WITH THE NEGATION DROPPED. A visitor on a
   keyboard has no pointer to show them where they are; take this away and the
   arcade becomes unnavigable for them. Green, so it is ours and not the OS's. */
.cab button:focus-visible,
.gate button:focus-visible,
.ov button:focus-visible,
.rack button:focus-visible,
.cab a:focus-visible,
.gate a:focus-visible,
.ov a:focus-visible {
  outline: 2px solid #00ff00;
  outline-offset: 2px;
}