/* ============================================================
   TRAZOS — Estilos (adaptado de "escribir")
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Respaldo por si game.json no carga. Lo normal es que juego-comun.js
     los reescriba con el color de la tarjeta del juego en el selector.
     Nombres neutros porque aquí puede acabar cualquier tono. */
  --acento:       #ea580c;
  --acento-claro: #f0d0e8;
  --acento-suave: #ffedd5;
  --acento-fuerte: #c2176e;
  --acento-medio:   #fb923c;
  --bg:            #fff7ed;
  --card:          #ffffff;
  --text:          #3a1a0a;
  --correct-bg:    #e8f5e9;
  --correct-bd:    #66bb6a;
  --wrong-bg:      #ffebee;
  --wrong-bd:      #ef5350;
  --shadow:        0 6px 24px rgba(234,88,12,0.18);
  --radius:        20px;
}

body {
  font-family: 'Nunito', 'Hiragino Sans', 'Meiryo', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(12px, 1.5vh) 12px 12px;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

#app {
  width: 100%;
  max-width: 720px;
  position: relative;
}

/* ── GAME SCREEN ─────────────────────────────────────────── */
#game-screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#canvas-area { margin-top: 14px; }

header { text-align: center; }

h1 {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--acento);
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

#level-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

#phase-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #999;
  font-weight: 700;
}

#level-row { width: 100%; max-width: 320px; }

#level-text {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  color: #777;
  margin-bottom: 3px;
}

#level-bar-bg {
  background: var(--acento-suave);
  border-radius: 99px;
  height: 7px;
  overflow: hidden;
}

#level-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--acento-medio), var(--acento));
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(.34,1.56,.64,1);
}

#accuracy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
}

#accuracy-bar-bg {
  flex: 1;
  background: #f0f0f0;
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}

#accuracy-bar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: #ccc;
  transition: width 0.5s ease, background 0.5s ease;
}

#accuracy-pct {
  font-size: 0.7rem;
  color: #bbb;
  font-weight: 700;
  min-width: 2.8em;
  text-align: right;
}

/* Element card: emoji + slots de palabra */
#element-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 50px 10px 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

#word-emoji {
  font-size: 2.6rem;
  line-height: 1.1;
  transition: transform 0.2s;
  flex-shrink: 0;
}

#word-emoji.pop { animation: pop 0.4s ease-out; }

@keyframes pop {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  70%  { transform: scale(1.15) rotate(4deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

#audio-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  background: var(--acento-suave);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
}

@media (hover: hover) {
  #audio-btn:hover { background: var(--acento-claro); transform: scale(1.15); }
}
#audio-btn:active { transform: scale(0.95); }

/* ── DISPLAY DE PALABRA (slots, dentro del card) ─────────── */
#word-display {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 44px;
}

#word-display.shake { animation: shake 0.35s ease-in-out; }

.slot {
  width: 36px;
  height: 44px;
  border: 3px solid var(--acento-medio);
  border-radius: 8px;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--acento);
  transition: all 0.15s;
}

.slot.filled {
  background: #f4faf4;
  border-color: #c5e3c7;
  color: #6ba56e;
  animation: slot-pop 0.25s ease-out;
}

.slot.filled.perfect {
  background: linear-gradient(135deg, #fff5d4, #fde68a);
  border-color: #fbbf24;
  color: var(--acento);
  animation: slot-perfect 0.75s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 4px 18px rgba(251,191,36,0.55);
}

@keyframes slot-perfect {
  0%   { transform: scale(0.5) rotate(-18deg); }
  35%  { transform: scale(1.45) rotate(12deg); }
  60%  { transform: scale(0.92) rotate(-5deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes slot-pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.slot.cursor {
  border-color: var(--acento);
  background: var(--acento-suave);
  color: var(--acento);
  transform: scale(1.12);
  animation: cursor-pulse 1.1s ease-in-out infinite;
}

@keyframes cursor-pulse {
  0%,100% {
    box-shadow: 0 4px 12px rgba(234,88,12,0.28), 0 0 0 0 rgba(234,88,12,0.55);
  }
  50% {
    box-shadow: 0 4px 12px rgba(234,88,12,0.28), 0 0 0 12px rgba(234,88,12,0);
  }
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-7px); }
  40%     { transform: translateX(7px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}

/* ── CANVAS DE DIBUJO ────────────────────────────────────── */
#canvas-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#canvas-wrap {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-height: 50vh;
  width: 100%;
  margin: 0 auto;
  border: 3px solid var(--acento-medio);
}

#canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#ghost { z-index: 1; }
#board { z-index: 2; }

#canvas-wrap.flash-ok      { border-color: var(--correct-bd); background: var(--correct-bg); }
#canvas-wrap.flash-bad     { border-color: var(--wrong-bd);   background: var(--wrong-bg); }
#canvas-wrap.flash-perfect {
  border-color: #fbbf24;
  background: linear-gradient(135deg, #fff5d4, #fde68a);
  animation: canvas-perfect-glow 0.7s ease-out;
}

@keyframes canvas-perfect-glow {
  0%   { box-shadow: 0 0 0 0 rgba(251,191,36,0.75); }
  100% { box-shadow: 0 0 0 50px rgba(251,191,36,0); }
}

/* Botones flotantes en esquinas del canvas */
#clear-btn, #replay-btn {
  position: absolute;
  top: 8px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--acento);
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.1s, background 0.15s;
  -webkit-appearance: none;
  touch-action: manipulation;
}

#clear-btn  { right: 8px; }
#replay-btn { left: 8px; padding-left: 3px; }
#clear-btn:active, #replay-btn:active { transform: scale(0.92); background: var(--acento-suave); }

/* EL ▶ VA PELADO, Y ESO ES EL CAMBIO. Llevaba encima una píldora roja con las
   pistas que quedaban (`content: attr(data-uses)`), un estado apagado para
   cuando se acababan y un «+1 ❤️» verde que subía flotando cada tres palabras.
   Se fue todo el 31 de agosto de 2026 con el racionamiento que contaba: sin
   nada que contar, la píldora sólo podía decir un número que nunca baja, y un
   contador que no se mueve es peor que ninguno — promete una regla que no
   existe. Ahora es lo que parece: un botón de ver otra vez. El porqué está en
   `game.js`, junto a `DEMO_LENTA`. */
/* Feedback */
#feedback {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  min-height: 1.4em;
}

.fb-correct { color: #2e7d32; }
.fb-wrong   { color: #c62828; }
.fb-score   { color: var(--acento); }
.fb-perfect {
  color: var(--acento);
  font-size: 1.2em;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(251,191,36,0.4);
  animation: fb-pop 0.5s ease-out;
}

@keyframes fb-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

.heart-particle {
  position: fixed;
  z-index: 99998;
  pointer-events: none;
  user-select: none;
  transform-origin: center;
  will-change: transform, opacity;
  text-shadow: 0 2px 6px rgba(0,0,0,0.15);
  filter: drop-shadow(0 0 4px rgba(251,191,36,0.5));
}

/* ── OVERLAYS ─────────────────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 247, 237, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.overlay.hidden { display: none; }

#video-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 680px;
  text-align: center;
}

#video-box h2 {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--acento);
}

#youtube-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
}

#youtube-player iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Pantalla de victoria */
#skip-btn {
  background: var(--acento);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 14px 38px;
  font-size: 1.05rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  box-shadow: 0 4px 14px rgba(234,88,12,0.32);
}

@media (hover: hover) {
#skip-btn:hover {
    background: var(--acento);
    transform: scale(1.04);
  }
}

#skip-btn:active { transform: scale(0.97); }

/* ── RESPONSIVE ───────────────────────────────────────────── */

/* iPad y desktop */
@media (min-width: 768px) {
  body              { padding: max(20px, 2vh) 24px 20px; }
  h1                { font-size: 2rem; }
  #game-screen      { gap: 16px; }
  #element-card     { padding: 14px 60px 14px 24px; gap: 22px; }
  #word-emoji       { font-size: 4.2rem; }
  .slot             { width: 52px; height: 64px; font-size: 2.2rem; border-radius: 12px; }
  #word-display     { gap: 8px; min-height: 64px; }
  #feedback         { font-size: 1.2rem; }
  #level-row, #accuracy-row { max-width: 400px; }
  #canvas-wrap      { max-height: 60vh; max-width: 480px; }
  #canvas-area      { margin-top: 24px; }
  #element-card     { max-width: 480px; margin-left: auto; margin-right: auto; width: 100%; }
}

/* Móvil pequeño */
@media (max-width: 420px) {
  h1               { font-size: 1.25rem; }
  #word-emoji      { font-size: 2.2rem; }
  .slot            { width: 30px; height: 38px; font-size: 1.25rem; border-width: 2px; border-radius: 6px; }
  #word-display    { gap: 4px; min-height: 38px; }
  #element-card    { padding: 8px 12px 6px; gap: 10px; }
  #video-box h2    { font-size: 1.3rem; }
}

/* ============================================================
   LA CÁSCARA COMÚN, EN UN JUEGO DE PAPEL Y LÁPIZ

   ../juego-layout.css pone el paisaje de la categoría de fondo, deja el
   título flotando encima sin caja y parte la pantalla en bandas, sin
   scroll. En los juegos de test la banda de abajo son cuatro pastillas;
   aquí es el papel, y encima va lo que hay que escribir:

     ┌──────────────────┐
     │    Mayúsculas    │  cabecera · de la cáscara
     │        🐻        │  el dibujo · se come la holgura que quede
     │   [O][?][?]      │  las casillas · por dónde va la palabra
     │  ┌────────────┐  │
     │  │   lienzo   │  │  el papel · cuadrado y lo más grande posible
     │  └────────────┘  │
     └──────────────────┘

   El reparto es el de la cáscara con una vuelta de tuerca: allí el
   hueco sobrante es del emoji y la banda de abajo mide lo que miden los
   botones; aquí la banda de abajo es un cuadrado que se mide contra la
   ventana (56vh o el ancho, lo que sea menor) y el sobrante sigue
   siendo del emoji. Así el papel es igual de grande en cualquier
   pantalla y la holgura de un móvil alto no se queda en blanco.

   Esta hoja carga ANTES que la cáscara, así que a igualdad de peso ella
   gana. Casi nunca hace falta pelearse: lo de la banda del medio
   (filas, tamaño del dibujo) son propiedades que ella no declara, y el
   lienzo y las casillas son sólo de aquí. La única regla con un id de
   más está en el bloque de móvil tumbado, y allí se explica por qué.

   Va al final del fichero a propósito: por delante hay dos bloques
   @media con las medidas de antes (.slot de 30/36/52 px, el lienzo a
   50vh…). Las media queries no suman especificidad, así que lo de aquí
   les gana por orden y aquéllas se quedan sólo para lo que no se
   redefine abajo.
   ============================================================ */

/* ── BANDA MEDIA · el dibujo y las casillas ──────────────────
   La cáscara deja #element-card en `display:grid` con el hueco que
   sobra y lo declara contenedor de tamaño; a partir de ahí 1cqh es el
   1% de ESE hueco y no del alto de la ventana, así que el dibujo se
   mide contra el sitio que le ha quedado.

   Dos filas de alto propio, y el par centrado en la banda
   (`align-content`): dibujo y casillas se leen como una sola cosa —qué
   palabra es y por dónde va— en vez de quedar una arriba del todo y las
   otras pegadas al papel. Una sola columna, porque si no el grid
   pondría las dos piezas en fila.

   Que las filas midan lo suyo y no `1fr` tiene además su porqué: el
   tamaño del dibujo sale del alto de la BANDA (cqh), que es firme, así
   que no hay pescadilla que se muerda la cola por mucho que la fila se
   mida por su contenido. */
#element-card {
  grid-template-rows: auto auto;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  row-gap: min(2.5cqh, 14px);
  padding: 0;
}

/* El dibujo dice QUÉ palabra es. Sombra de figura y no halo de texto:
   sobre un emoji el halo blanco se ve como un borrón de color alrededor
   de la silueta.

   TRES declaraciones, de peor a mejor: gana la última que el navegador
   sepa leer (una unidad desconocida tira la regla entera al parsear).
   Y ninguna lleva `var()` dentro, que es lo que rompe el truco: un
   `var()` siempre parsea bien y se cargaría el repuesto de arriba.

     1. `vh`   — navegador antiguo sin nada de lo de abajo.
     2. `dvh`  — Safari 15.4+ (el iPad de casa va por aquí).
     3. `cqh`  — Safari 16+: mide contra la BANDA, que es lo suyo.

   Por qué el repuesto es 14dvh y no 26vh, que es lo que había: en un
   móvil de pie 26vh y el 52% de la banda vienen a ser lo mismo, pero en
   una tableta no. La banda no crece con la pantalla —el papel se lleva
   la mitad larga— así que en un iPad ese 26vh salía un dibujo de 250px
   para un hueco de 286: las casillas se iban por debajo y acababan
   tapadas por el papel. `dvh` además es lo que SE VE: en iOS `vh` es el
   viewport grande, el de la barra del navegador escondida, y ahí se
   perdían otros ~50px. Con 14dvh el dibujo sale del tamaño que le
   habría dado `cqh` en las tres formas de pantalla. */
#word-emoji {
  font-size: min(18vh, 30vw);
  font-size: min(14dvh, 30vw);
  font-size: min(52cqh, 42cqw);
  line-height: 1;
  filter: drop-shadow(0 10px 14px rgba(80,55,10,.28));
}

/* La entrada de cada palabra nueva SÓLO funde. El `pop` de antes iba de
   scale(.4) a 1.15 con un giro, y encima del vaivén de la cáscara eso
   no se lee como "ha entrado otra", se lee como que algo ha fallado. Es
   la misma decisión que ella tomó con #element-text, y `aparecer` es su
   @keyframes: al ser globales, se puede usar desde aquí. */
#word-emoji.pop { animation: aparecer .5s ease-out backwards; }

/* ── LAS CASILLAS ────────────────────────────────────────────
   Se reparten el ancho de la banda con tope por arriba: así una palabra
   de tres letras no sale con tres cajones enormes y una de ocho
   (`elefante`) tampoco se sale de la pantalla.

   El ALTO es fijo y no depende de cuántas sean: si creciera con el
   largo de la palabra, la banda cambiaría de tamaño en cada ronda y el
   dibujo daría un salto en cada palabra nueva. */
#word-display {
  gap: clamp(3px, 1vw, 8px);
  min-height: 0;
  flex-wrap: nowrap;
  width: 100%;
}

.slot {
  flex: 0 1 auto;
  width: clamp(30px, 9vw, 52px);
  min-width: 0;
  height: clamp(34px, 6vh, 58px);
  font-size: clamp(1.05rem, 3.4vh, 1.9rem);
  border-width: 3px;
  border-color: var(--canto);
  border-radius: 12px;
  background: var(--plato, rgba(255,255,255,.84));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 16px rgba(60,40,10,.14);
}

/* La casilla resuelta sigue en verde y la de turno con el latido de su
   color: son las dos únicas señales de por dónde va la palabra, y aquí
   ya no hay ningún mensaje escrito que lo cuente. */
.slot.filled { background: var(--correct-bg); border-color: var(--correct-bd); }

/* ── EL BOTÓN DE VOZ ─────────────────────────────────────────
   Sin la tarjeta blanca detrás ya no tiene dónde vivir, así que sale de
   la banda y se va a la esquina de la pantalla, enfrente del botón de
   volver al menú que pone juego-comun.js: mismo tamaño y mismo cuerpo,
   para que se lean como la pareja de mandos del juego.

   (`fixed` dentro de #game-screen: cuando juego-fx.js hace temblar la
   pantalla por un fallo, tiembla con ella. Es lo que se quiere.) */
#audio-btn {
  position: fixed;
  top:   max(10px, env(safe-area-inset-top, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  /* Por debajo de las pantallas de premio (z-200) y por encima del
     tablero: cuando sale la copa, el mando desaparece con el juego. El
     de volver al menú, que es de la cáscara, sí se queda: es la salida. */
  z-index: 40;
  width: 46px;
  height: 46px;
  font-size: 1.25rem;
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 0;
  box-shadow: 0 4px 14px rgba(60,40,10,.14);
}

/* Con la voz encendida sí se distingue: es el único mando con dos
   estados y a distancia el icono no se lee. */
#audio-btn:not(.muted) { background: rgba(215,245,221,.92); }

/* ── BANDA BAJA · el papel ───────────────────────────────────
   Cuadrado SIEMPRE: es lo que hace que la letra de la plantilla y la
   que se dibuja encima estén a la misma escala. El lado es el menor de
   los dos límites —lo que hay de ancho, o 56vh— así que no se sale ni
   de pie ni tumbado, y lo que sobra se lo queda el dibujo de arriba.

   El 52 no es a ojo: la cabecera se lleva ~11dvh y hay que dejarle a la
   banda del medio algo con lo que trabajar. Con más, en una tableta el
   dibujo se queda de sello y las casillas sin sitio; con menos, el
   papel se hace pequeño justo donde hay sitio de sobra.

   Y va en `dvh`, no en `vh`: en iOS `vh` es el viewport GRANDE —el de
   la barra del navegador escondida—, así que un 56vh se comía ~50px más
   de los que hay de verdad y el papel salía tapando las casillas. La
   línea de `vh` se queda delante de repuesto, para un navegador que no
   entienda `dvh` (Safari < 15.4). */
#canvas-area {
  order: 1;
  flex: 0 0 auto;
  margin: 0;
  display: grid;
  place-items: center;
}

#canvas-wrap {
  width: min(100%, 52vh);
  width: min(100%, 52dvh);
  height: auto;
  max-width: none;
  max-height: none;
  border-radius: 22px;
  border: 3px solid var(--canto);
  background: rgba(255,253,247,.97);
  box-shadow: 0 10px 28px rgba(60,40,10,.20);
}

/* ── Móvil tumbado ───────────────────────────────────────────
   Tumbado no hay alto para tres pisos, pero sobra ancho: la pantalla se
   parte en dos columnas —a la izquierda lo que hay que escribir, a la
   derecha el papel— y así el cuadrado vuelve a ser lo más grande que
   cabe, ahora medido por el alto de la banda.

   Es un cambio de eje, no de piezas: `main` pasa a fila y el orden que
   ya tenían (dibujo 0, papel 1) las coloca solas. El papel se estira al
   alto de la banda y su `aspect-ratio` le saca el ancho; el resto se lo
   queda la columna de la izquierda, que sigue siendo el contenedor de
   tamaño contra el que se mide el dibujo.

   Mismo umbral que usa la cáscara para las pastillas, para que los
   juegos cambien a la vez. */
@media (orientation: landscape) and (max-height: 560px) {
  /* Lleva un id de más porque la cáscara declara `flex-direction:column`
     sobre `main` pelado, y como carga después ganaba ella. */
  #game-screen main { flex-direction: row; align-items: stretch; }

  /* Y el mando de la voz baja debajo del de volver, en la misma esquina:
     donde estaba —arriba a la derecha— le caía justo encima al botón de
     borrar del papel, que tumbado se pega al borde de la pantalla. */
  #audio-btn {
    top: calc(max(10px, env(safe-area-inset-top, 0px)) + 50px);
    left: max(10px, env(safe-area-inset-left, 0px));
    right: auto;
  }

  /* El lado sale de la ventana y no del hueco, a diferencia de lo que
     se hace de pie. Es por una pescadilla que se muerde la cola: en una
     fila, el ancho de la columna del papel se calcula ANTES de saber
     cuánto mide de alto, así que un cuadrado que saque su ancho del
     alto (height:100% + aspect-ratio) se queda en cero y desaparece.
     Con dos topes contra la ventana no hay nada que adivinar: 72vh es
     lo que queda de alto quitando la cabecera, y 46vw deja la mitad
     larga de la pantalla para el dibujo y las casillas. */
  #canvas-wrap {
    width: min(46vw, 72vh);
    width: min(46vw, 72dvh);
    max-height: 100%;
  }

  .slot      { height: clamp(28px, 9.5vh, 46px);
               width:  clamp(26px, 6vw, 44px);
               font-size: clamp(.95rem, 5.2vh, 1.5rem); }
  #audio-btn { width: 40px; height: 40px; font-size: 1.05rem; }
}