/* =========================================
   TRIVIAL MUSICAL — trivial.css
   ========================================= */

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

html, body {
  width: 100%; height: 100%;
  background: #f0ece6;
  overflow: hidden;
  font-family: 'Segoe UI', Arial, sans-serif;
}

/* Contenedor fijo 800×600 con fitScale */
#app {
  width: 800px;
  height: 600px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background: #faf8f5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


/* =========================================
   CABECERA ESTÁNDAR (patrón const2)
   ========================================= */
#top-bar {
  height: 35px;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
#top-logo { height: 28px; display: block; }

#title-bar {
  height: 65px;
  background: #8e24aa;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#titulo {
  color: white;
  font-size: 28px;
  font-weight: 700;
}


/* =========================================
   SISTEMA DE PANTALLAS
   ========================================= */
#screens {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.screen {
  position: absolute;
  inset: 0;
  display: none;
}
.screen.activa {
  display: flex;
  flex-direction: column;
}


/* =========================================
   PANTALLA DE ENTRADA
   ========================================= */
#entrada-body {
  flex: 1;
  display: flex;
  padding: 14px 16px;
  gap: 16px;
}

/* — Columna ruleta — */
#col-ruleta {
  width: 310px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#ruleta-wrap {
  position: relative;
  width: 284px;
  height: 294px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#ruleta-puntero {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 26px;
  z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}
#ruleta {
  width: 268px;
  height: 268px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 12px rgba(0,0,0,0.2);
}

/* Grid iconos categoría */
#cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 68px);
  gap: 8px;
}
.ico-cat {
  width: 68px; height: 68px;
  border-radius: 8px;
  object-fit: cover;
}

/* — Columna controles — */
#col-controles {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
}
/* Selector de nivel — botón "Niveles" + desplegable, siempre disponible en
   la pantalla de entrada (ver CLAUDE.md, decisión revisada 2026-08-17: el
   nivel no debe ser protagonista permanente de la entrada —de ahí que siga
   detrás de un botón, no una fila de círculos— pero sí accesible desde ahí
   sin depender de terminar antes una partida). */
#nivel-selector { position: relative; }
#btn-niveles {
  width: 100%; height: 38px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: none; border-radius: 8px;
  background: #f3e5f5; color: #8e24aa;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
}
#btn-niveles:hover { background: #ecd5f0; }
#btn-niveles .nivel-caret { transition: transform 0.15s; flex-shrink: 0; }
#nivel-selector.abierto #btn-niveles .nivel-caret { transform: rotate(180deg); }
#nivel-dropdown {
  display: none;
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 15;
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
#nivel-selector.abierto #nivel-dropdown { display: block; }
.nivel-opcion {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border: none; border-bottom: 1px solid #f0ece6;
  background: none; font-size: 14px; font-weight: 600; color: #333;
  text-align: left; cursor: pointer;
}
.nivel-opcion:last-child { border-bottom: none; }
.nivel-opcion:hover:not(.proximo) { background: #f3e5f5; }
.nivel-opcion.activo { color: #8e24aa; background: #f8f0fa; }
.nivel-opcion.proximo { color: #b6ab9c; cursor: default; }
.nivel-opcion-label { display: flex; align-items: center; gap: 8px; }
.nivel-opcion-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #c2b7a8; }

/* Círculo numerado delante del nombre de nivel — misma numeración 1-5 que
   "Inicial 1"/"Inicial 2"/... se usan indistintamente en todo el proyecto
   (ver recursos/niveles/, decisión de nomenclatura de sesión previa);
   tamaño relativo em para escalar con el elemento donde aparece (botón,
   opción del desplegable, cabecera del modal ⓘ) sin reglas por sitio. No
   confundir con la fila de círculos-botón (uno por nivel) descartada como
   selector — este círculo es solo una etiqueta decorativa junto al texto. */
.nivel-num {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 1.5em; height: 1.5em; border-radius: 50%;
  background: #8e24aa; color: #fff; font-size: 0.78em; font-weight: 700;
}
.nivel-opcion.proximo .nivel-num { background: #b6ab9c; }

#modo-wrap { display: flex; flex-direction: column; gap: 8px; }
.btn-modo {
  width: 100%; height: 56px;
  border-radius: 10px;
  border: 2px solid #8e24aa;
  background: white; color: #8e24aa;
  font-size: 20px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.08s;
}
.btn-modo:hover { background: #f3e5f5; }
.btn-modo.activo { background: #8e24aa; color: white; }
.btn-modo:active { transform: scale(0.97); }

#nombres-wrap { display: flex; flex-direction: column; gap: 8px; }
.input-nombre {
  width: 100%; height: 44px;
  border: 1.5px solid #ce93d8;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 17px; color: #333;
  outline: none;
  transition: border-color 0.15s;
}
.input-nombre:focus { border-color: #8e24aa; }
#nombre2 { display: none; }

#btn-empezar {
  width: 100%; height: 52px;
  border-radius: 10px;
  border: none;
  background: #e53935; color: white;
  font-size: 22px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.08s;
}
#btn-empezar:hover  { background: #c62828; }
#btn-empezar:active { transform: scale(0.97); }


/* =========================================
   PANTALLA DE JUEGO — elementos comunes
   ========================================= */

/* Ruleta animable */
.rueda-girable {
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 14px rgba(0,0,0,0.22);
  transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
  cursor: pointer;
}
.rueda-girable:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }

/* Puntero */
.puntero {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 26px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}
.puntero-sm { width: 22px; }

/* Caja de mensaje — altura mínima fija: los textos varían de una línea
   ("¡Te ha tocado Ritmo!") a dos o tres (mensaje inicial, banner de
   acierto/fallo); sin esto, el contenido de debajo (iconos de categoría,
   rueda) se desplazaba cada vez que cambiaba el número de líneas. */
.mensaje-box {
  background: #e0e0e0;
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 19px;
  color: #333;
  line-height: 1.45;
  font-weight: 500;
  min-height: 92px;
  flex-shrink: 0;
}

/* Banner de resultado (acierto/fallo) tras responder — tinte + rebote */
.mensaje-box.acierto { background: #e8f5e9; color: #1b5e20; }
.mensaje-box.fallo    { background: #ffebee; color: #b71c1c; }
@keyframes msgBounce {
  0%   { transform: scale(0.7); opacity: 0; }
  55%  { transform: scale(1.08); opacity: 1; }
  75%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.mensaje-box.resultado { animation: msgBounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Celda de categoría con cuadraditos */
.cat-celda {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.cat-celda img {
  border-radius: 8px;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) brightness(0.85);
  transition: filter 0.4s;
}
.cat-celda.completa img {
  filter: none;
}
.cat-squares { display: flex; gap: 4px; }
.cat-sq {
  height: 10px;
  border-radius: 3px;
  background: #ccc;
  transition: background 0.35s;
}


/* =========================================
   JUEGO — LAYOUT 1 JUGADOR
   ========================================= */
#jg-1j {
  flex: 1;
  display: flex;
  padding: 12px 16px;
  gap: 16px;
}
#jg-2j { display: none; }

#jg1-col-rueda {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#jg1-ruleta-wrap {
  position: relative;
  width: 278px;
  height: 292px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#jg1-rueda { width: 266px; height: 266px; }

/* Contador de puntos (1 jugador) — zona inferior de la rueda */
.puntos-box {
  background: #8e24aa;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 6px 20px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

#jg1-col-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 2px;
}

/* Grid 3×2 con iconos grandes */
.progreso-grid-1j {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex: 1;
  align-content: start;
}
.progreso-grid-1j .cat-celda img { width: 100%; aspect-ratio: 1; }
.progreso-grid-1j .cat-sq { width: 22px; }


/* =========================================
   JUEGO — LAYOUT 2 JUGADORES
   ========================================= */
#jg-2j {
  flex: 1;
  flex-direction: row;
}

/* Panel lateral de jugador */
.panel-jugador {
  width: 190px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border: 3px solid #e0e0e0;
  border-top: none;
  transition: border-color 0.3s, background 0.3s;
}
.panel-jugador.turno-activo {
  border-color: #3b6fd4;
  background: #eef3fd;
}

.panel-nombre {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  padding: 8px 4px;
  background: #9e9e9e;
  color: white;
  letter-spacing: 0.3px;
}
.panel-jugador.turno-activo .panel-nombre {
  background: #3b6fd4;
}

/* Grid 2×3 de iconos por jugador */
.panel-progreso {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 10px 8px;
  align-content: start;
}
.panel-progreso .cat-celda img { width: 100%; aspect-ratio: 1; border-radius: 6px; }
.panel-progreso .cat-sq { width: 15px; height: 8px; border-radius: 2px; }

/* Columna central (mensaje + rueda) */
#jg2-centro {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 8px;
}
#jg2-mensaje { width: 100%; }

#jg2-ruleta-wrap {
  position: relative;
  width: 226px;
  height: 238px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#jg2-rueda { width: 214px; height: 214px; }

/* Marcador comparativo de aciertos (2 jugadores) — estilo placar de fútbol.
   Sin puntuación real, solo tally de aciertos; encima del bocadillo de turno. */
.marcador-2j {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #2a2018;
  border-radius: 14px;
  padding: 10px 20px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.22);
}
.marcador-equipo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 74px;
}
.marcador-nombre {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.65);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.marcador-num {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.marcador-sep {
  font-size: 20px;
  font-weight: 800;
  color: rgba(255,255,255,0.35);
}


/* =========================================
   PANTALLA DE PREGUNTA
   ========================================= */

/* Sub-cabecera de categoría */
#preg-subheader {
  height: 58px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 12px;
}
#preg-cat-ico {
  width: 40px; height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
#preg-cat-nom {
  color: white;
  font-size: 26px;
  font-weight: 700;
}

/* Barra de tiempo */
#preg-timer-wrap {
  height: 10px;
  background: #ded6ca;
  flex-shrink: 0;
}
#preg-timer-barra {
  height: 100%;
  width: 100%;
  background: #ff6b35;
}

/* Caja de pregunta */
#preg-pregunta-box {
  background: #9a8070;
  padding: 14px 24px;
  flex-shrink: 0;
}
#preg-texto {
  color: white;
  font-size: 21px;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}

/* Zona de contenido */
#preg-contenido {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 12px 18px;
  gap: 16px;
  overflow: hidden;
  min-height: 0;
}


/* ── Tipo: imagen-texto ─────────────────── */
.preg-img-lado {
  width: 220px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
.preg-img-lado img {
  max-width: 100%;
  max-height: 250px;
  border-radius: 8px;
  object-fit: contain;
  border: 2px solid #e0e0e0;
  background: #f5f5f5;
}
.preg-img-vacia {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  background: #f0f0f0;
  border: 2px dashed #ccc;
}

.preg-opciones-lado {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

/* Botones de opción — tamaño pizarra digital */
.btn-opcion {
  width: 100%;
  padding: 16px 18px;
  border-radius: 8px;
  border: none;
  background: #f5c218;
  color: #222;
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
  line-height: 1.25;
}
.btn-opcion:hover:not(:disabled) { background: #e0b010; }
.btn-opcion:active               { transform: scale(0.97); }
.btn-opcion.correcta   { background: #4caf50; color: white; }
.btn-opcion.incorrecta { background: #f44336; color: white; }
.btn-opcion:disabled   { cursor: default; }


/* ── Tipo: 3-imagenes ───────────────────── */
.preg-3img-wrap {
  width: 100%;
  justify-content: center;
  gap: 18px;
}
.preg-img-opcion {
  flex: 1;
  max-width: 220px;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 3px solid #ddd;
  overflow: hidden;
  cursor: pointer;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, transform 0.1s;
}
.preg-img-opcion:hover:not(.bloqueada) { border-color: #8e24aa; transform: scale(1.03); }
.preg-img-opcion img { width: 100%; flex: 1; object-fit: cover; object-position: top; min-height: 0; }
.preg-img-opcion.correcta   { border-color: #4caf50; background: #e8f5e9; }
.preg-img-opcion.incorrecta { border-color: #f44336; background: #ffebee; }
.preg-img-opcion.bloqueada  { cursor: default; }
.preg-img-lbl {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #333;
  text-align: center;
  padding: 5px 6px 4px;
  width: 100%;
  flex-shrink: 0;
  background: rgba(255,255,255,0.85);
}


/* ── Tipo: audio-3imagenes ──────────────── */
.preg-audio-col {
  width: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-speaker {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: none;
  background: #8e24aa;
  color: white;
  font-size: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.08s;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.btn-speaker:hover  { background: #6a1b9a; }
.btn-speaker:active { transform: scale(0.93); }

.preg-audio-imgs {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: stretch;
}
.preg-img-opcion-sm {
  flex: 1;
  max-width: 200px;
  aspect-ratio: 1;
}
/* La etiqueta con el nombre le resta alto a la caja cuadrada, así que la zona
   de la imagen deja de ser cuadrada — con object-fit:cover (heredado de
   .preg-img-opcion img) eso recortaba la parte inferior del instrumento
   (patas, ruedas, base...). object-fit:contain muestra la imagen entera. */
.preg-img-opcion-sm img {
  object-fit: contain;
  object-position: center;
}


/* ── Tipo: ritmo-construir (dictado corto, categoría Ritmo) ── */
.preg-ritmo-wrap {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.rc-notation {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding-top: 32px; /* espacio para los indicadores de pulso, que flotan sobre la caja (como en dictado/) */
}
.rc-compas-wrap {
  width: 46px;
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-compas-wrap svg  { height: 54px; width: auto; display: block; }
.rc-compas-wrap path { fill: #2a2018; }

.rc-measure {
  position: relative;
  overflow: visible; /* los indicadores de pulso sobresalen por arriba */
  width: 168px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #f0ece6;
  border-radius: 8px;
  padding: 10px 12px 12px;
  transition: background 0.15s, box-shadow 0.15s;
}
.rc-measure.activo { background: #fdf3e6; box-shadow: inset 0 0 0 2.5px #e07428; }

/* Indicadores de pulso — flotan sobre el borde superior de la caja */
.rc-pulses {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0; right: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 14px;
}
.rc-pulse-dot     { width: 10px; border-radius: 3px; background: #d0c8bf; transition: background 0.08s; flex-shrink: 0; }
.rc-pulse-strong  { height: 15px; }
.rc-pulse-weak    { height: 10px; }
.rc-pulse-dot.lit { background: #e53935; }

.rc-figs {
  flex: 1;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.rc-fig-slot {
  flex: 1;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.rc-fig-slot.filled  { opacity: 1; }
.rc-fig-slot svg     { height: 54px; width: auto; display: block; }
.rc-fig-slot svg path { fill: #2a2018; transition: fill 0.15s; }

/* Revelado de la respuesta correcta tras un fallo — opacidad fijada de forma
   directa e incondicional (mayor especificidad que .rc-fig-slot{opacity:0}).
   transition:none es necesario: si no, hereda la transición de 0.25s de la
   regla base y la figura queda visible solo a medio fundido en la captura. */
.rc-fig-slot.rc-correcto,
.rc-fig-slot.rc-incorrecto { opacity: 1; transition: none; }
.rc-fig-slot.rc-correcto svg path   { fill: #34c785; }
.rc-fig-slot.rc-incorrecto svg path { fill: #ef4565; }

.rc-barline {
  width: 2px;
  background: #a89888;
  border-radius: 1px;
  align-self: stretch;
}
.rc-barline-final {
  display: flex;
  gap: 3px;
  align-items: stretch;
  padding-left: 2px;
  flex-shrink: 0;
}
.rc-bl-thin  { width: 2px; background: #a89888; border-radius: 1px; }
.rc-bl-thick { width: 8px; background: #2a2018; border-radius: 2px; }

.rc-btn-play {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 26px;
  border: none;
  background: #43a047;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  transition: background 0.15s, transform 0.08s;
}
.rc-btn-play:hover:not(:disabled) { background: #388e3c; }
.rc-btn-play:active                { transform: scale(0.96); }
.rc-btn-play:disabled              { opacity: 0.6; cursor: default; }
.rc-play-ico { font-size: 18px; line-height: 1; }

.rc-response-row {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.rc-resp-btn {
  width: 96px; height: 96px;
  border-radius: 10px;
  border: 3px solid #ddd;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.12s, transform 0.08s;
}
.rc-resp-btn:hover:not(:disabled) { border-color: #8e24aa; transform: scale(1.03); }
.rc-resp-btn:disabled             { opacity: 0.55; cursor: default; }
.rc-resp-btn svg                  { height: 62px; width: auto; display: block; }
.rc-resp-btn svg path             { fill: #2a2018; }
.rc-resp-btn.rc-error-flash {
  border-color: #f44336;
  background: #ffebee;
  animation: rcFlashErr 0.4s ease-out;
}


/* ── Tipo: audicion-melodica (categoría Audición) ── */
.preg-audicion-wrap {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.am-btn-play {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 26px;
  border: none;
  background: #43a047;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  transition: background 0.15s, transform 0.08s;
}
.am-btn-play:hover:not(:disabled) { background: #388e3c; }
.am-btn-play:active                { transform: scale(0.96); }
.am-btn-play:disabled              { opacity: 0.6; cursor: default; }
.am-play-ico { font-size: 18px; line-height: 1; }

.am-options-row {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.am-option-card {
  flex: 1;
  max-width: 228px;
  background: #fff;
  border: 3px solid #ddd;
  border-radius: 12px;
  padding: 8px 4px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.12s, transform 0.1s;
}
.am-option-card:hover:not(:disabled) { border-color: #8e24aa; transform: scale(1.02); }
.am-option-card:disabled             { cursor: default; }
.am-option-card svg                  { width: 100%; height: auto; display: block; }
.am-option-card.correcta   { border-color: #4caf50; background: #e8f5e9; }
.am-option-card.incorrecta { border-color: #f44336; background: #ffebee; }


/* ── Tipo: notas-pentagrama (categoría Notas) ── */
.preg-notas-wrap {
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

/* Recuadro pentagrama — 660×191.58, mismo ancho que .np-piano (660px) y
   misma proporción del viewBox real (878.74:255.118) — antes 550×160,
   más estrecho que el teclado sin necesidad (decisión 2026-08-16). */
.np-staff-box {
  position: relative;
  width: 660px;
  height: 191.58px;
  border: 1px solid #cfc9c2;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.np-staff-bg, .np-notes-svg {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  display: block;
}
.np-notes-svg { pointer-events: none; }

/* Teclado — reutiliza el mismo patrón visual/de color que AtrapaNotas landscape */
.np-piano {
  position: relative;
  width: 660px;
  height: 180px;
  background: #b4b0aa;
  border-top: 2px solid #908c86;
  border-radius: 6px;
  flex-shrink: 0;
}
.key-white {
  position: absolute;
  top: 0;
  width: 69px; height: 170px;
  background: linear-gradient(175deg, #ffffff 0%, #f0ece8 100%);
  border-radius: 3px 3px 9px 9px;
  border: 1px solid #cac3bb; border-top: 1px solid #e8e4e0;
  box-shadow: 0 7px 15px rgba(0,0,0,0.26), inset 0 -4px 8px rgba(0,0,0,0.07);
  cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px;
  user-select: none;
  transition: transform 0.07s ease, background 0.07s ease, box-shadow 0.07s ease;
  z-index: 1;
}
.key-white:active { transform: scale(0.97); }
.key-white.inactive { opacity: 0.28; pointer-events: none; }
.key-white.key-hit  { background: #b8f0c8 !important; }
.key-white.key-miss { background: #ffd0d0 !important; }
.key-label {
  font-size: 22px; font-weight: 700; font-family: 'Segoe UI', Arial, sans-serif;
  line-height: 1; pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
}
.key-black {
  position: absolute;
  top: 0;
  width: 45px; height: 95px;
  background: linear-gradient(175deg, #403830 0%, #1a1008 80%, #282018 100%);
  border-radius: 2px 2px 6px 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.60), inset 0 -3px 6px rgba(0,0,0,0.40), inset 1px 0 2px rgba(255,255,255,0.04);
  z-index: 2;
  pointer-events: none;
}
@keyframes rcFlashErr { 0%, 40% { background: #f8c0c0; } 100% { background: #ffebee; } }


/* =========================================
   PANTALLA FINAL (1 y 2 jugadores) — ver mockup de sesión previa
   ========================================= */
#s-resultado {
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 22px 40px;
}

/* .resultado-1j / .resultado-2j se alternan según el modo — ver _mostrarResultado1J()/_mostrarResultado2J() */
.resultado-contenido {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.resultado-contenido.activa { display: flex; }

.tier-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tier-icon { font-size: 46px; line-height: 1; }
.tier-titulo { font-size: 30px; font-weight: 800; letter-spacing: 0.2px; }
.tier-sub { font-size: 14px; color: #7a7168; }

.score-line { font-size: 17px; color: #2a2018; text-align: center; }

.stats-row { display: flex; gap: 10px; }
.stat-tile {
  background: #f7f3ee;
  border: 1px solid #e5dfd7;
  border-radius: 10px;
  padding: 10px 18px;
  min-width: 96px;
  text-align: center;
}
.stat-tile .n {
  font-size: 22px; font-weight: 800; color: #2a2018;
  font-variant-numeric: tabular-nums; display: block;
}
.stat-tile.aciertos .n { color: #34c785; }
.stat-tile.fallos .n   { color: #ef4565; }
.stat-tile .lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px;
  color: #7a7168; font-weight: 700;
}

.refuerzo { text-align: center; max-width: 460px; }
.refuerzo .lead { font-size: 13.5px; color: #7a7168; margin-bottom: 8px; }
.refuerzo.vacio .lead { color: #34c785; font-weight: 600; }
.chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: #fff;
  padding: 5px 13px; border-radius: 14px;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.85); }

/* Tarjetas comparativas — pantalla final 2 jugadores */
.res2-jugadores { display: flex; gap: 18px; }
.res2-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: #f7f3ee;
  border: 2px solid #e5dfd7;
  border-radius: 14px;
  padding: 18px 26px 16px;
  min-width: 150px;
}
.res2-card.ganador { border-color: #34c785; background: #eafaf1; }
.res2-tag {
  display: none;
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  color: #fff; background: #34c785;
  padding: 2px 10px; border-radius: 10px;
  position: absolute; top: -10px;
}
.res2-card.ganador .res2-tag { display: block; }
.res2-nombre { font-size: 16px; font-weight: 700; color: #2a2018; text-align: center; }
.res2-stats { display: flex; gap: 14px; }
.res2-stat { text-align: center; }
.res2-stat .n {
  font-size: 20px; font-weight: 800; color: #2a2018;
  font-variant-numeric: tabular-nums; display: block;
}
.res2-stat.aciertos .n { color: #34c785; }
.res2-stat.fallos .n   { color: #ef4565; }
.res2-stat .lbl {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.4px;
  color: #7a7168; font-weight: 700;
}

.botones { display: flex; gap: 12px; margin-top: 6px; }
.btn {
  border: none; border-radius: 24px; padding: 12px 26px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform 0.08s, opacity 0.15s;
}
.btn:active { transform: scale(0.96); }
.btn-primario { background: #ff6b35; color: #fff; }
.btn-primario:hover { background: #e85a28; }
.btn-secundario { background: transparent; color: #7a7168; border: 1.5px solid #e5dfd7; }
.btn-secundario:hover { background: #f7f3ee; }


/* =========================================
   MODAL INFO DE NIVEL — mismo componente que portrait (mismas claves
   lang.json), tarjeta centrada en vez de hoja inferior por ser un lienzo
   de escritorio con espacio de sobra. Decisión 2026-08-16.
   ========================================= */
#btn-nivel-info {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.18); border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#btn-nivel-info:hover { background: rgba(255,255,255,0.28); }
#btn-nivel-info .ico-i {
  color: #fff; font-size: 17px; font-weight: 700; font-family: Georgia, serif; font-style: italic;
}

#niveles-modal {
  display: none; position: absolute; inset: 0; z-index: 200;
  background: rgba(42,32,24,0.5); align-items: center; justify-content: center;
}
#niveles-modal.abierto { display: flex; }
#niveles-modal-card {
  position: relative; background: #fff; border-radius: 16px; padding: 26px 28px 28px;
  width: 520px; max-height: 480px; overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
}
#niveles-modal-x {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  font-size: 24px; line-height: 1; color: #b6ab9c; cursor: pointer; padding: 2px 6px;
}
#niveles-modal-x:hover { color: #555; }

.nivel-info-panel { display: none; flex-direction: column; gap: 14px; }
.nivel-info-panel.activo { display: flex; }
.nivel-info-panel h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: #8e24aa; }
.nivel-info-panel > p { margin: 0; font-size: 15px; line-height: 1.55; color: #666; }

.nivel-info-intro { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; color: #333; }
.nivel-info-secciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nivel-info-secciones li { font-size: 15px; line-height: 1.55; color: #666; }
.nivel-info-secciones li strong { color: #333; font-weight: 700; }
.nivel-info-secciones li strong::after { content: ': '; }
.nivel-info-mas {
  align-self: flex-start; font-size: 15px; font-weight: 700; color: #8e24aa; text-decoration: none;
}
.nivel-info-mas::after { content: ' →'; }