/* Controller focus (gamepad.js): while a pad is the last-used input, the focused control gets a chunky lime ring
   with a dark outline, in the style guide's colours, so it reads on any panel. Hidden again on keyboard or mouse. */
html[data-input=pad] :is(:focus,.pad-focus){outline:4px solid var(--bb-lime,#d4ff42)!important;outline-offset:3px;box-shadow:0 0 0 7px #090c10,0 0 18px 4px color-mix(in srgb,var(--bb-lime,#d4ff42) 55%,transparent)!important;position:relative;z-index:2}
html[data-input=pad] body{cursor:none}
.pad-glyph{display:inline-block;vertical-align:middle;image-rendering:pixelated}
#hud .slot-key .pad-glyph{width:auto;height:14px}
/* Phone or tablet with a Bluetooth pad: the touch joystick and zoom slider step aside while the pad is in use, and
   the big action buttons show their pad glyphs. A tap on the screen brings the touch layout straight back. */
@media (pointer:coarse){
  html[data-input=pad] body #hud :is(#joystick,#zoom-control){display:none!important}
  html[data-input=pad] body #hud :is(#ultimate,#trinket,#dash) .slot-key{display:block;position:absolute;top:3px;left:50%;transform:translateX(-50%);background:none;border:0;z-index:2}
}