/* ══ LOS BOTONES DEL ARCADE ══════════════════════════════════════════════════════════════════
 *
 * <link rel="stylesheet" href="/games/botones.css">   ← va ANTES del <style> del gabinete
 *
 * DE DÓNDE SALE. José, 11-sep: «mejoremos la apariencia y proporción» de los botones. El
 * inventario (`tools/botones.manual.cjs`) contó la incoherencia en vez de opinarla: en veintiséis
 * gabinetes había DOCE alturas de botón distintas, DIEZ tamaños de letra, DOCE radios y SEIS
 * familias tipográficas — entre ellas Arial, Trebuchet MS y Segoe UI, en un arcade que tiene
 * tipografía propia.
 *
 * QUÉ FIJA ESTE ARCHIVO, y qué NO. Fija lo INVARIANTE: tipografía, radio, caja de toque, el
 * acuse al apretar y el estado apagado. NO fija color: cada gabinete tiene su paleta y ésa es
 * suya. Por eso se carga ANTES del <style> del juego — lo que el juego declare después gana, y
 * un gabinete puede salirse de la norma a propósito sin pelear con !important.
 *
 * LAS TRES ALTURAS, y no más:
 *     44px  ·  --zk-h-sm   icono, secundario, barra superior. Es la vara del punto 8.
 *     52px  ·  --zk-h      el botón normal. Es el de por defecto.
 *     84px  ·  --zk-h-lg   botón de menú con subtítulo (el patrón de MOONTOWER, que es el que
 *                          mejor se lee de todo el arcade: título en arcade + renglón chico).
 *
 * POR QUÉ 44 ES EL PISO Y NO UNA SUGERENCIA: es la vara del punto 8 de `games/ESTANDAR.md`, que
 * regía desde hace meses y medía UN gate sobre dos botones de cuatro juegos. Acá el piso viaja
 * con la hoja, así que un botón nuevo nace tocable.
 *
 * QUÉ NO ARREGLA: los gabinetes que se pintan los botones DENTRO del lienzo (diez, contados) no
 * leen CSS. Para ésos la coherencia hay que llevarla al código de dibujo, gabinete por gabinete.
 */
:root{
  --zk-h-sm: 44px;
  --zk-h:    52px;
  --zk-h-lg: 84px;
  --zk-rad:  10px;
  --zk-gap:  10px;
  --zk-fuente: ZacksArcade, ui-monospace, monospace;
  --zk-letra:   13px;
  --zk-letra-sm: 11px;
  --zk-tracking: .08em;
}

button, .zk-btn{
  min-height: var(--zk-h);
  min-width: var(--zk-h-sm);          /* un botón de icono sigue siendo tocable */
  padding: 0 14px;
  border-radius: var(--zk-rad);
  font-family: var(--zk-fuente);
  font-size: var(--zk-letra);
  font-weight: 700;
  letter-spacing: var(--zk-tracking);
  line-height: 1.15;
  cursor: pointer;
  /* el dedo: sin flash azul de Android, sin zoom por doble toque, sin selección al mantener */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* EL ACUSE AL APRETAR es parte de la caja de toque, no un adorno: sin él, en un celu no sabes si
   el toque entró o se lo comió un scroll. Un píxel de hundida y una sombra interior alcanzan. */
button:active, .zk-btn:active{ transform: translateY(1px); }

button[disabled], .zk-btn[disabled], .zk-btn.off{
  opacity: .42;
  cursor: default;
  transform: none;
}

/* el botón chico de barra o de icono */
.zk-btn-sm{ min-height: var(--zk-h-sm); font-size: var(--zk-letra-sm); padding: 0 10px; }

/* el botón de menú con subtítulo — el patrón de MOONTOWER */
.zk-btn-lg{
  min-height: var(--zk-h-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 100%;
}
.zk-btn-lg small{
  font-family: var(--zk-fuente);
  font-size: var(--zk-letra-sm);
  font-weight: 400;
  letter-spacing: .04em;
  opacity: .72;
}

/* una fila de botones: separación pareja y que envuelva en pantalla angosta */
.zk-fila{ display: flex; gap: var(--zk-gap); flex-wrap: wrap; }
.zk-fila > *{ flex: 1 1 auto; }