/* =======================================================================
   DUPIXENT QUIZ — Estilos para kiosco táctil vertical 1080 x 1920
   ======================================================================= */

/* ---------- Reset / optimización touch ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;   /* sin flash azul al tocar */
  -webkit-touch-callout: none;                /* sin menú contextual */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;                          /* sin selección de texto */
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;                           /* sin scroll involuntario */
  background: #000;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  overscroll-behavior: none;
  touch-action: manipulation;                 /* elimina el delay de 300ms y el pinch-zoom */
}

/* ---------- Lienzo fijo 1080x1920, escalado al centro ---------- */
#stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1080px;
  height: 1920px;
  transform-origin: center center;
  transform: translate(-50%, -50%);           /* el factor scale() lo aplica script.js */
  overflow: hidden;
}

/* ---------- Pantallas (slides) ---------- */
.screen {
  position: absolute;
  inset: 0;
  width: 1080px;
  height: 1920px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: none;                              /* solo la activa se muestra */
}
.screen.is-active { display: block; }

.screen--home { background-image: url("assets/images/bg-home.jpg"); }
.screen--game { background-image: url("assets/images/fondo-pregunta.jpg"); }
.screen--win  { background-image: url("assets/images/bg-ganaste.jpg"); }
.screen--lose { background-image: url("assets/images/bg-perdiste.jpg"); }

/* ---------- Áreas táctiles transparentes sobre botones ya dibujados en el fondo ---------- */
.hit-area {
  position: absolute;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
}
/* Botón JUGAR (home) — imagen superpuesta dentro del marco amarillo del fondo */
#btn-jugar {
  left: 150px;
  top: 1398px;
  width: 785px;
  height: 205px;
}
/* Botón JUEGA DE NUEVO (perdiste) — el marco está un poco más abajo */
#btn-reiniciar {
  left: 150px;
  top: 1400px;
  width: 785px;
  height: 205px;
}
/* Botón GANASTE (ganaste) — el pill ya está dibujado en el fondo, solo área táctil */
#btn-ganaste {
  left: 150px;
  top: 1430px;
  width: 785px;
  height: 175px;
}

/* La imagen del botón se ajusta dentro del área táctil, conservando proporción */
.btn-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  display: block;
}
.hit-area:active { transform: scale(0.97); }

/* =======================================================================
   PANTALLA DE JUEGO
   ======================================================================= */

/* ---------- Título de nivel ---------- */
#level-title {
  position: absolute;
  top: 210px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 92px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #00A99D;                             /* color por defecto; se ajusta por nivel en JS */
}
/* Colores dinámicos por nivel (clase añadida desde JS) */
#level-title.level-facil   { color: #00A99D; }
#level-title.level-medio   { color: #F5A623; }
#level-title.level-dificil { color: #E2231A; }

/* ---------- Texto de la pregunta ---------- */
#question-text {
  position: absolute;
  top: 380px;
  left: 120px;
  width: 840px;
  text-align: center;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.25;
  color: #5b6b73;
}

/* ---------- Contenedor de opciones ---------- */
.options {
  position: absolute;
  top: 650px;
  left: 90px;
  width: 900px;
}

/* ---------- Tarjeta de opción (Diseño plano + capas z-index) ----------
   La caja de color (z-index:1) queda DEBAJO del badge y de la barra
   derecha (z-index:2), por lo que al pintarse de verde/rojo el color
   llena la caja sin tapar las imágenes transparentes. */

/* Contenedor plano: sin borde, sin sombra, sin radios.
   La caja blanca se recorta por la izquierda (margin-left) para que empiece
   justo después del badge y NO se extienda por detrás de él. El badge y el
   texto se recolocan para que queden en la misma posición visual de antes. */
.option-card {
  position: relative;
  overflow: visible;                          /* deja sobresalir la solapa del badge */
  width: calc(100% - 28px);                   /* la caja pierde 90px por la izquierda */
  margin-left: 28px;                          /* borde izq. recortado hacia la derecha */
  min-height: 110px;
  margin-bottom: 36px;
  background-color: #ffffff;                  /* caja de color base */
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 18px 46px 18px 80px;               /* texto queda en su misma posición */
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 1;
  transition: background-color 0.2s ease;
}

/* Badge (A, B, C) por encima de la caja; con left negativo se queda en su
   posición original (al ras de la izquierda), ya fuera de la caja recortada.
   Tamaño FIJO y centrado vertical: así no crece en respuestas de varias
   líneas y nunca se monta sobre el texto. */
.badge-icon {
  position: absolute;
  left: -28px;
  top: 50%;
  transform: translateY(-50%);
  height: 96px;                               /* alto fijo (no depende de la caja) */
  width: auto;                                /* conserva la proporción del PNG */
  z-index: 2;                                 /* por encima de la caja de color */
  pointer-events: none;
}

/* Barra naranja derecha por encima de la caja, a altura completa */
.border-right-icon {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  z-index: 2;                                 /* por encima de la caja de color */
  pointer-events: none;
}

/* Texto de la respuesta */
.option-text {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: left;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  color: #555555;                             /* oscuro por defecto */
}

/* ---------- Estados de respuesta ---------- */
/* ESTADO GANÓ: la caja verde se pinta por DEBAJO del badge */
.option-card.correct {
  background-color: #00C853 !important;
}
.option-card.correct .option-text {
  color: #ffffff !important;
}

/* ESTADO PERDIÓ: la caja roja se pinta por DEBAJO del badge */
.option-card.wrong {
  background-color: #D32F2F !important;
}
.option-card.wrong .option-text {
  color: #ffffff !important;
}

/* Bloquea nuevos toques mientras se muestra el feedback */
.options.locked .option-card { pointer-events: none; }