/* =============================================================
   DECATHLON 2026 — Tablero de trivia
   ============================================================= */
:root {
  --bg: #070720;
  --bg2: #120a3a;
  --panel: rgba(255, 255, 255, .06);
  --borde: rgba(255, 255, 255, .12);
  --texto: #f5f3ff;
  --suave: #a5a3c9;
  --ok: #22c55e;
  --ok2: #16a34a;
  --oro: #facc15;
  --fuente-titulo: "Baloo 2", "Segoe UI Black", "Arial Rounded MT Bold", system-ui, sans-serif;
  --fuente: "Poppins", "Segoe UI", system-ui, sans-serif;
  --radio: 22px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(ellipse at top, var(--bg2), var(--bg) 70%);
  color: var(--texto);
  font-family: var(--fuente);
  overflow: hidden;
  user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Fondo animado ---------- */
.fondo { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.blob {
  position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%;
  filter: blur(90px); opacity: .45; animation: flotar 22s ease-in-out infinite alternate;
}
.b1 { background: #7c3aed; top: -20vmax; left: -15vmax; }
.b2 { background: #db2777; bottom: -25vmax; right: -15vmax; animation-delay: -7s; }
.b3 { background: #0891b2; top: 30%; left: 40%; width: 35vmax; height: 35vmax; opacity: .3; animation-delay: -14s; }
@keyframes flotar {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(6vmax, 4vmax) scale(1.1); }
  100% { transform: translate(-4vmax, 7vmax) scale(.95); }
}
.rejilla {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* ---------- Tablero ---------- */
.tablero {
  position: relative; z-index: 1; height: 100vh;
  display: grid; grid-template-rows: auto auto 1fr auto;
  padding: 2vh 3vw 2.5vh; gap: 1.6vh;
}
.cabecera { display: flex; align-items: center; gap: 2rem; }
.logo { display: flex; align-items: center; gap: .8rem; }
.logo h1 { margin: 0; font-family: var(--fuente-titulo); font-size: clamp(2rem, 5.2vh, 3.6rem); line-height: 1; letter-spacing: .02em; }
.logo-texto {
  background: linear-gradient(90deg, #fde047, #fb7185, #c084fc, #22d3ee, #fde047);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brillo 8s linear infinite;
  filter: drop-shadow(0 4px 18px rgba(236, 72, 153, .35));
}
.logo-anio { color: #fff; opacity: .9; font-weight: 700; }
.logo-trofeo { font-size: clamp(2rem, 5.5vh, 3.6rem); filter: drop-shadow(0 0 16px rgba(250, 204, 21, .6)); animation: saltito 3s ease-in-out infinite; }
@keyframes brillo { to { background-position: 300% 0; } }
@keyframes saltito { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }

.progreso { margin-left: auto; min-width: 220px; }
.progreso-texto { font-size: .95rem; color: var(--suave); margin-bottom: .35rem; text-align: right; }
.progreso-texto strong { color: #fff; font-size: 1.2rem; }
.progreso-barra { height: 10px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.progreso-barra span { display: block; height: 100%; background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6); border-radius: inherit; transition: width .6s ease; }

.acciones-cabecera { display: flex; gap: .6rem; }
.btn-icono {
  width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.3rem;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
  color: #fff; text-decoration: none; transition: .2s;
}
.btn-icono:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }

.leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.chip {
  padding: .35rem 1rem; border-radius: 99px; font-weight: 600; font-size: clamp(.8rem, 1.8vh, 1.05rem);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 25%, transparent), color-mix(in srgb, var(--c2) 25%, transparent));
  border: 1px solid color-mix(in srgb, var(--c1) 60%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--c1) 25%, transparent);
}

/* ---------- Carrusel de páginas ---------- */
.carrusel { position: relative; display: flex; align-items: center; justify-content: center; gap: 2vw; min-height: 0; }
.paginas { position: relative; height: 100%; aspect-ratio: 1.25; max-width: 78vw; }
.pagina {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr);
  gap: 1.6vh;
  opacity: 0; pointer-events: none; transform: translateX(8%) scale(.96);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.pagina.activa { opacity: 1; pointer-events: auto; transform: none; }
.pagina.sale-izq { transform: translateX(-8%) scale(.96); }

.casilla {
  position: relative; border: 0; border-radius: var(--radio);
  background: linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow:
    0 .9vh 0 color-mix(in srgb, var(--c2) 55%, #000),
    0 1.4vh 2.6vh rgba(0,0,0,.45),
    inset 0 2px 0 rgba(255,255,255,.45);
  display: grid; place-items: center; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, filter .3s;
  animation: aparecer .5s backwards cubic-bezier(.2, .9, .3, 1.3);
  animation-delay: calc(var(--i) * 18ms);
}
.pagina:not(.activa) .casilla { animation: none; }
.casilla::before { /* brillo superior */
  content: ""; position: absolute; inset: 0 0 55% 0;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  border-radius: var(--radio) var(--radio) 50% 50% / var(--radio) var(--radio) 30% 30%;
}
.casilla::after { /* destello al pasar */
  content: ""; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: rotate(20deg); transition: left .6s ease;
}
.casilla:hover { transform: translateY(-.6vh) scale(1.04); box-shadow: 0 1.5vh 0 color-mix(in srgb, var(--c2) 55%, #000), 0 2vh 4vh color-mix(in srgb, var(--c1) 55%, transparent), inset 0 2px 0 rgba(255,255,255,.45); }
.casilla:hover::after { left: 130%; }
.casilla:active { transform: translateY(.5vh); box-shadow: 0 .3vh 0 color-mix(in srgb, var(--c2) 55%, #000), inset 0 2px 0 rgba(255,255,255,.45); }
.casilla-num {
  position: relative; font-family: var(--fuente-titulo); font-weight: 800;
  font-size: clamp(1.6rem, 6.4vh, 4.6rem); line-height: 1; color: #fff;
  text-shadow: 0 .35vh 0 rgba(0,0,0,.25), 0 0 20px rgba(255,255,255,.25);
}
.casilla-icono { position: absolute; top: .6vh; left: .8vh; font-size: clamp(.8rem, 2.2vh, 1.4rem); opacity: .9; }
.casilla-check {
  position: absolute; bottom: .6vh; right: .8vh; width: 3vh; height: 3vh; min-width: 20px; min-height: 20px;
  border-radius: 50%; background: #fff; color: var(--ok2); font-size: 1.8vh; font-weight: 900;
  display: none; place-items: center;
}
.casilla.usada { filter: grayscale(.95) brightness(.55); box-shadow: 0 .4vh 0 rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.15); }
.casilla.usada .casilla-num { opacity: .55; text-decoration: line-through 4px rgba(255,255,255,.6); }
.casilla.usada .casilla-check { display: grid; }
.casilla.usada:hover { filter: grayscale(.6) brightness(.8); }
.casilla.recien { animation: pulso-usada .8s ease; }
@keyframes aparecer { from { opacity: 0; transform: scale(.6) translateY(20px); } }
@keyframes pulso-usada { 50% { transform: scale(.9); } }

.flecha {
  flex: none; width: clamp(56px, 8vh, 90px); height: clamp(56px, 8vh, 90px); border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08);
  font-size: clamp(2.4rem, 6vh, 4rem); line-height: 1; padding-bottom: .4vh;
  display: grid; place-items: center; backdrop-filter: blur(6px);
  transition: .2s;
}
.flecha:hover:not(:disabled) { background: linear-gradient(135deg, #a855f7, #ec4899); border-color: transparent; transform: scale(1.1); box-shadow: 0 0 30px rgba(236, 72, 153, .5); }
.flecha:disabled { opacity: .2; cursor: default; }

.paginador { display: flex; justify-content: center; gap: .8rem; }
.punto {
  padding: .45rem 1.3rem; border-radius: 99px; border: 1px solid var(--borde);
  background: var(--panel); font-weight: 600; font-size: clamp(.85rem, 1.9vh, 1.1rem); transition: .25s;
}
.punto:hover { background: rgba(255,255,255,.14); }
.punto.activo { background: linear-gradient(135deg, #a855f7, #ec4899); border-color: transparent; box-shadow: 0 0 22px rgba(236, 72, 153, .5); transform: scale(1.08); }

/* ---------- Buscador rápido ---------- */
.buscador {
  position: fixed; left: 50%; bottom: 4vh; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: baseline; gap: .8rem; padding: .9rem 1.6rem;
  background: rgba(15, 10, 45, .92); border: 1px solid rgba(255,255,255,.2); border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5); animation: aparecer .25s;
}
.buscador strong { font-family: var(--fuente-titulo); font-size: 2.4rem; line-height: 1; color: var(--oro); min-width: 2ch; }
.buscador small { color: var(--suave); }

/* ---------- Pregunta ---------- */
.pregunta { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 2.5vh 2.5vw; }
.pregunta-fondo { position: absolute; inset: 0; background: rgba(5, 3, 20, .78); backdrop-filter: blur(10px); animation: fundido .3s; }
@keyframes fundido { from { opacity: 0; } }
.pregunta-caja {
  --c1: #a78bfa; --c2: #7c3aed; --fs: 1;
  position: relative; width: 100%; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(ellipse at top left, color-mix(in srgb, var(--c1) 22%, transparent), transparent 55%),
    linear-gradient(160deg, #1b1250, #0d0a2c);
  border: 2px solid color-mix(in srgb, var(--c1) 55%, transparent);
  border-radius: 32px; overflow: hidden;
  box-shadow: 0 0 80px color-mix(in srgb, var(--c1) 30%, transparent), 0 30px 80px rgba(0,0,0,.6);
  animation: entrar .55s cubic-bezier(.2, .9, .3, 1.15);
}
@keyframes entrar { from { opacity: 0; transform: scale(.7) rotateX(25deg); } }

.pregunta-cabecera {
  display: flex; align-items: center; gap: 1.2rem; padding: 1.6vh 2vw;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  box-shadow: 0 6px 30px color-mix(in srgb, var(--c2) 50%, transparent);
}
.pregunta-num {
  font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(2rem, 6vh, 4rem); line-height: 1;
  width: clamp(64px, 10vh, 120px); height: clamp(64px, 10vh, 120px); border-radius: 50%;
  display: grid; place-items: center; padding-top: .6vh;
  background: #fff; color: var(--c2); box-shadow: 0 6px 0 rgba(0,0,0,.2), 0 0 0 6px rgba(255,255,255,.25);
  animation: girar .7s .15s backwards cubic-bezier(.2, .9, .3, 1.4);
}
.pregunta-num.tres-cifras { font-size: clamp(1.5rem, 4.4vh, 3rem); }
@keyframes girar { from { transform: rotate(-200deg) scale(0); } }
.pregunta-cat { font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.4rem, 4.2vh, 2.8rem); text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 3px 0 rgba(0,0,0,.2); line-height: 1.1; }
.pregunta-cat small { display: block; font-family: var(--fuente); font-size: .45em; font-weight: 600; letter-spacing: .15em; opacity: .9; }
.btn-cerrar { margin-left: auto; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(0,0,0,.2); font-size: 1.4rem; transition: .2s; }
.btn-cerrar:hover { background: rgba(0,0,0,.4); transform: rotate(90deg); }

.pregunta-cuerpo {
  min-height: 0; padding: 2.5vh 2.5vw; display: grid; gap: 2.5vh 2.5vw;
  grid-template-rows: auto auto; align-content: center;
  font-size: calc(var(--fs) * clamp(1rem, 2.9vh, 2.1rem));
}
.pregunta-cuerpo.con-imagen, .pregunta-cuerpo.solo-imagen, .pregunta-cuerpo.img-opciones { align-content: stretch; }
.pregunta-contenido { min-height: 0; display: flex; flex-direction: column; gap: 2vh; }
.enunciado { font-weight: 500; line-height: 1.4; white-space: pre-line; animation: subir .5s .2s backwards; }
.enunciado:empty { display: none; }
.enunciado .cita { display: block; font-style: italic; padding: .4em .9em; margin: .3em 0; border-left: 5px solid var(--c1); background: rgba(255,255,255,.05); border-radius: 0 12px 12px 0; }
.enunciado .fuente { display: block; text-align: right; font-size: .75em; color: var(--suave); margin: -.1em 0 .5em; }
.figura { margin: 0; min-height: 0; display: flex; justify-content: center; align-items: center; animation: subir .5s .3s backwards; }
.figura img {
  max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 16px; padding: 1.2vh;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); cursor: zoom-in;
}
/* Solo opacidad/desenfoque: un transform alteraría scrollHeight al ajustar el texto */
@keyframes subir { from { opacity: 0; filter: blur(8px); } }

.lado-opciones { min-height: 0; display: flex; flex-direction: column; gap: 2vh; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8vh 1.6vw; align-content: start; }
.opcion {
  --oc: #6366f1;
  position: relative; display: flex; align-items: center; gap: 1vw; padding: 1.4vh 1.2vw;
  background: linear-gradient(135deg, color-mix(in srgb, var(--oc) 28%, #1b1250), color-mix(in srgb, var(--oc) 12%, #120c38));
  border: 2px solid color-mix(in srgb, var(--oc) 65%, transparent); border-radius: 20px;
  line-height: 1.3; font-weight: 500;
  transition: transform .4s ease, opacity .4s ease, filter .4s ease, box-shadow .4s ease, background .4s ease;
  animation: subir .45s backwards; animation-delay: calc(.35s + var(--k) * .08s);
}
.opcion:nth-child(1) { --oc: #ef4444; } .opcion:nth-child(2) { --oc: #3b82f6; }
.opcion:nth-child(3) { --oc: #eab308; } .opcion:nth-child(4) { --oc: #22c55e; }
.opcion:nth-child(5) { --oc: #a855f7; }
.opcion-letra {
  flex: none; width: 2.2em; height: 2.2em; border-radius: 14px; display: grid; place-items: center;
  font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.15em; padding-top: .1em;
  background: var(--oc); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--oc) 55%, #000);
}
.opcion-texto { flex: 1; }
.opcion-img { max-height: 9vh; max-width: 100%; background: #fff; border-radius: 10px; padding: .6vh; }
.opcion-marca { position: absolute; right: -14px; top: -14px; width: 46px; height: 46px; border-radius: 50%; display: none; place-items: center; font-size: 1.5rem; font-weight: 900; background: #fff; color: var(--ok2); box-shadow: 0 4px 14px rgba(0,0,0,.4); }

/* Opciones solo con letra (cuando las alternativas están en la imagen) */
.opciones.solo-letras { display: flex; justify-content: center; flex-wrap: wrap; gap: 2vw; }
.opciones.solo-letras .opcion { padding: 1.2vh; border-radius: 24px; }
.opciones.solo-letras .opcion-letra { width: 2.6em; height: 2.6em; font-size: 1.6em; border-radius: 18px; }

/* Distribuciones */
.pregunta-cuerpo.con-imagen { grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr; }
.pregunta-cuerpo.con-imagen .opciones:not(.solo-letras) { grid-template-columns: 1fr; }
.pregunta-cuerpo.con-imagen .lado-opciones { justify-content: center; }
.pregunta-cuerpo.con-imagen .figura { flex: 1; }
.pregunta-cuerpo.solo-imagen { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.pregunta-cuerpo.solo-imagen .figura { flex: 1; }
.pregunta-cuerpo.solo-imagen .figura img { padding: 2vh 2.5vh; }
.pregunta-cuerpo.img-opciones .figura-opciones { flex: 1; }
.pregunta-cuerpo.img-opciones { grid-template-rows: auto 1fr; }
.pregunta-cuerpo.img-opciones.con-imagen { grid-template-rows: 1fr; }
.pregunta-cuerpo.con-imagen .opciones.solo-letras { flex-wrap: nowrap; gap: 1vw; }
.pregunta-cuerpo.con-imagen .solo-letras .opcion { padding: .8vh; }
.pregunta-cuerpo.con-imagen .solo-letras .opcion-letra { font-size: 1.25em; }

/* Revelado */
.revelada .opcion { opacity: .28; filter: grayscale(.8); transform: scale(.97); }
.revelada .opcion.correcta {
  opacity: 1; filter: none; transform: scale(1.04); z-index: 2;
  background: linear-gradient(135deg, #22c55e, #15803d); border-color: #bbf7d0;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .35), 0 0 60px rgba(34, 197, 94, .7);
  animation: latido 1.3s ease-in-out infinite;
}
.revelada .opcion.correcta .opcion-letra { background: #fff; color: var(--ok2); box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.revelada .opcion.correcta .opcion-marca { display: grid; animation: girar .5s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes latido { 50% { transform: scale(1.07); box-shadow: 0 0 0 10px rgba(34, 197, 94, .15), 0 0 90px rgba(34, 197, 94, .9); } }

.pregunta-pie { display: flex; align-items: center; gap: 1.2rem; padding: 1.8vh 2.5vw 2.2vh; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.15); }
.veredicto { margin-right: auto; font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.3rem, 4vh, 2.6rem); color: #4ade80; text-shadow: 0 0 24px rgba(34, 197, 94, .6); }
.veredicto:not(:empty) { animation: aparecer .5s cubic-bezier(.2, .9, .3, 1.4); }
.btn {
  border: 0; border-radius: 18px; padding: 1.4vh 2.4vw; font-weight: 700; font-size: clamp(1rem, 2.6vh, 1.6rem);
  transition: transform .15s, box-shadow .2s, opacity .2s;
}
.btn:active { transform: translateY(3px); }
.btn-revelar {
  background: linear-gradient(135deg, #facc15, #f97316); color: #1c1003;
  box-shadow: 0 6px 0 #b45309, 0 0 40px rgba(250, 204, 21, .45);
  animation: invitar 2s ease-in-out infinite;
}
.btn-revelar:hover { transform: translateY(-2px); }
.btn-revelar:disabled { opacity: .35; animation: none; cursor: default; box-shadow: none; }
@keyframes invitar { 50% { box-shadow: 0 6px 0 #b45309, 0 0 70px rgba(250, 204, 21, .75); } }
.btn-cerrar-grande { background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.25); }
.btn-cerrar-grande:hover { background: rgba(255,255,255,.2); }
.btn-sec { background: rgba(255,255,255,.1); border: 1px solid var(--borde); }
.btn-peligro { background: linear-gradient(135deg, #f43f5e, #be123c); box-shadow: 0 5px 0 #881337; }

.confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

.cargando { display: grid; place-items: center; font-size: 1.4rem; color: var(--suave); }

/* ---------- Zoom ---------- */
.zoom { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.9); display: grid; place-items: center; padding: 3vh; cursor: zoom-out; animation: fundido .2s; }
.zoom img { max-width: 100%; max-height: 100%; background: #fff; border-radius: 16px; padding: 2vh; }

/* ---------- Diálogo ---------- */
.dialogo { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); animation: fundido .2s; }
.dialogo-caja { background: #1b1250; border: 1px solid var(--borde); border-radius: 24px; padding: 2rem 2.4rem; text-align: center; max-width: 440px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: entrar .35s; }
.dialogo-caja h2 { margin: 0 0 .5rem; font-family: var(--fuente-titulo); font-size: 2rem; }
.dialogo-caja p { color: var(--suave); margin: 0 0 1.5rem; }
.dialogo-botones { display: flex; gap: 1rem; justify-content: center; }
.dialogo-botones .btn { font-size: 1.05rem; padding: .8rem 1.4rem; }

/* ---------- Pantallas angostas ---------- */
@media (max-width: 800px) {
  body { overflow: auto; }
  .tablero { height: auto; min-height: 100vh; padding: 16px; }
  .cabecera { flex-wrap: wrap; gap: 1rem; }
  .progreso { order: 3; width: 100%; margin: 0; }
  .acciones-cabecera { margin-left: auto; }
  .carrusel { gap: 8px; }
  .paginas { height: auto; width: 100%; aspect-ratio: 1; }
  .pagina { gap: 8px; }
  .flecha { width: 44px; height: 44px; font-size: 2rem; }
  .casilla-num { font-size: 1.6rem; }
  .pregunta { padding: 8px; }
  .pregunta-cuerpo, .pregunta-cuerpo.con-imagen { grid-template-columns: 1fr; overflow: auto; }
  .opciones { grid-template-columns: 1fr; }
  .pregunta-pie { flex-wrap: wrap; }
}