/* @cpi 2026-10-22 16:53: tablero común del zoom en vertical para todos los juegos. El stick y los botones no dependen del juego,
   solo del número de botones (1-3 en fila, 4 en 2x2, 5-6 en 3 columnas). Los juegos aportan etiquetas y colores; su CSS de
   tamaño y posición de mandos va con :not(.expanded) y solo encaja el tablero en el arte del cabinet normal.
   Sustituye a las reglas de zoom de mslug3-cabinet.css (botón acotado y tablero de 140 px). Horizontal: arcade-landscape.css. */
dialog.metal-session.expanded:not([data-arcade-landscape]):not([data-touch-landscape]) .metal-deck:not([hidden]){display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;height:auto!important;min-height:120px!important;padding:10px clamp(12px,4vw,24px)!important}
dialog.metal-session.expanded:not([data-arcade-landscape]):not([data-touch-landscape]) .metal-stick:not([hidden]){flex:0 0 auto!important;position:relative!important;left:auto!important;top:auto!important;transform:none!important;width:clamp(96px,28vw,140px)!important;height:clamp(96px,26vw,124px)!important;margin:0!important}
dialog.metal-session.expanded:not([data-arcade-landscape]):not([data-touch-landscape]) .metal-buttons:has(>button){--ua-btn:clamp(58px,18vw,84px);--ua-gap:clamp(16px,5vw,30px);display:grid!important;grid-auto-flow:column;grid-auto-columns:var(--ua-btn);grid-template-columns:none;gap:8px var(--ua-gap)!important;justify-content:end;align-content:center;align-items:start;flex:0 1 auto!important;position:relative!important;inset:auto!important;transform:none!important;width:auto!important;min-width:0!important;height:auto!important;margin:0 0 0 auto!important}
dialog.metal-session.expanded:not([data-arcade-landscape]):not([data-touch-landscape]) .metal-buttons:has(>button:nth-child(3)){--ua-btn:clamp(52px,15vw,76px);--ua-gap:clamp(12px,4vw,24px)}
dialog.metal-session.expanded:not([data-arcade-landscape]):not([data-touch-landscape]) .metal-buttons:has(>button:nth-child(4)){--ua-btn:clamp(46px,13vw,64px);--ua-gap:clamp(18px,5.5vw,28px);grid-auto-flow:row;grid-template-columns:repeat(2,var(--ua-btn))}
dialog.metal-session.expanded:not([data-arcade-landscape]):not([data-touch-landscape]) .metal-buttons:has(>button:nth-child(5)){grid-template-columns:repeat(3,var(--ua-btn))}
dialog.metal-session.expanded:not([data-arcade-landscape]):not([data-touch-landscape]) .metal-deck:has(>.metal-stick[hidden]) .metal-buttons{margin:0 auto!important}
dialog.metal-session.expanded:not([data-arcade-landscape]):not([data-touch-landscape]) .metal-buttons button{flex:none!important;width:100%!important;min-width:0!important;max-width:none!important;min-height:0!important;height:auto!important;translate:none!important}
dialog.metal-session.expanded:not([data-arcade-landscape]):not([data-touch-landscape]) .metal-buttons i{width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:1.3!important}
/* Rótulo bajo la sombra de la base (hasta 10 px) y con el ancho del botón más medio hueco a cada lado; en dos líneas si no cabe. */
dialog.metal-session.expanded:not([data-arcade-landscape]):not([data-touch-landscape]) .metal-buttons span{position:static!important;transform:none!important;margin:12px calc(var(--ua-gap) / -2) 0!important;font-size:clamp(8px,2.5vw,11px)!important;line-height:1.15!important;white-space:normal!important;text-align:center}
/* Con 4 o más botones (dos filas) el tablero crece con ellos: el alto fijo de 140 px de mslug3-cabinet.css los cortaba. */
dialog.metal-session[data-screen-zoom].expanded:not([data-arcade-landscape]):not([data-touch-landscape]) .metal-deck:not([hidden]):has(.metal-buttons>button:nth-child(4)){height:auto!important;min-height:120px!important}