/* =========================================================
   TRIVIA DEL CUMPLE — estilos
   - body.tv:      pantalla de la TV (todo en vh/vw para Full HD y 4K)
   - body.jugador: pantalla del celular (mobile-first)
   Sin inset / aspect-ratio y con alternativas para min(): así anda
   también en navegadores de Smart TV viejos.
   ========================================================= */

:root {
  --fondo: #14052e;
  --fondo-2: #2b0b63;
  --dorado: #ffc83d;
  --rosa: #ff2d87;
  --violeta: #7b2ff7;
  --texto-oscuro: #2b0b63;

  /* Colores de las 4 respuestas */
  --roja: #e5243b;
  --azul: #1b6fe0;
  --amarilla: #ffc400;
  --verde: #1e9e45;

  --fuente-titulo: 'Luckiest Guy', 'Arial Black', 'Segoe UI Black', system-ui, sans-serif;
  --fuente-texto: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  --fuente-ja: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Meiryo', 'Yu Gothic', 'Noto Sans JP', sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  color: #fff;
  font-family: var(--fuente-texto);
  background-color: var(--fondo);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255, 45, 135, 0.35), transparent 38%),
    radial-gradient(circle at 85% 85%, rgba(0, 194, 255, 0.28), transparent 40%),
    radial-gradient(circle at 70% 10%, rgba(255, 200, 61, 0.18), transparent 30%),
    radial-gradient(circle at 50% 50%, var(--fondo-2), var(--fondo) 75%);
  background-attachment: fixed;
}

button { font: inherit; cursor: pointer; }

kbd {
  display: inline-block;
  padding: 0.05em 0.5em;
  border-radius: 0.35em;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
  font-family: var(--fuente-texto);
  font-weight: 700;
}

.titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 400;
  line-height: 1.02;
  color: var(--dorado);
  text-shadow:
    0 0.05em 0 var(--rosa),
    0 0.1em 0 var(--violeta),
    0 0.18em 0.25em rgba(0, 0, 0, 0.55);
}

/* Formas de las respuestas (SVG blanco) */
.forma { display: inline-block; flex: none; line-height: 0; }
.forma svg { width: 100%; height: 100%; fill: #fff; filter: drop-shadow(0 0.08em 0.06em rgba(0, 0, 0, 0.25)); }

@keyframes pulso { 50% { opacity: 0.35; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(2vh); } }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } }

/* =========================================================
   TV
   ========================================================= */

body.tv {
  height: 100vh;
  overflow: hidden;
  font-size: calc(0.9vh + 0.5vw);
  user-select: none;
  -webkit-user-select: none;
}

.tv .pantalla {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 4vh 4vw 6vh;
  animation: aparecer 0.45s ease-out;
}

.pista-ok {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.2vh;
  margin: 0;
  text-align: center;
  font-size: 3vh;
  font-weight: 600;
  cursor: pointer;
  animation: pulso 2s ease-in-out infinite;
}

/* ---------- Sala de espera ---------- */

.lobby {
  display: grid;
  grid-template-columns: 1.15fr auto 1fr;
  grid-column-gap: 3vw;
  align-items: center;
}

.lobby-info > * + * { margin-top: 3.4vh; }
.lobby .titulo { font-size: 10vh; transform: rotate(-3deg); transform-origin: left center; }

.pasos { margin: 0; padding: 0; list-style: none; font-size: 3.4vh; font-weight: 600; }
.pasos li { display: flex; align-items: center; margin-top: 1.6vh; }
.pasos span {
  display: inline-grid;
  place-items: center;
  width: 5.6vh;
  height: 5.6vh;
  margin-right: 1.2vw;
  flex: none;
  padding-top: 0.12em;
  border-radius: 50%;
  background: var(--rosa);
  font-family: var(--fuente-titulo);
  font-size: 3.2vh;
  box-shadow: 0 0.5vh 0 #9c0048;
}

.sala {
  display: inline-flex;
  flex-direction: column;
  padding: 1.6vh 2.4vw 1.2vh;
  border-radius: 2.6vh;
  background: #fff;
  color: var(--texto-oscuro);
  box-shadow: 0 0 0 0.8vh rgba(255, 255, 255, 0.2), 0 2vh 4vh rgba(0, 0, 0, 0.4);
}
.sala-etiqueta { font-size: 2.6vh; font-weight: 700; }
.sala-codigo {
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 12vh;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--violeta);
}

.conexion { display: flex; align-items: center; margin: 0; font-size: 2.4vh; font-weight: 600; opacity: 0.9; }
.conexion-punto { width: 0.8em; height: 0.8em; margin-right: 0.6em; flex: none; border-radius: 50%; background: #f5a623; }
.conexion[data-estado="conectando"] .conexion-punto { animation: pulso 1s ease-in-out infinite; }
.conexion[data-estado="ok"] .conexion-punto { background: #12b76a; box-shadow: 0 0 0.6em #12b76a; }
.conexion[data-estado="error"] .conexion-punto { background: #e5383b; }
.aviso-local { margin: 0; font-size: 2.2vh; color: #ffd9a8; }

.solo-celular { display: none; }

.lobby-qr {
  padding: 2.4vh;
  border-radius: 3.4vh;
  background: #fff;
  box-shadow: 0 0 0 1.2vh rgba(255, 255, 255, 0.2), 0 0 10vh rgba(255, 45, 135, 0.45), 0 3vh 6vh rgba(0, 0, 0, 0.5);
}
.qr { display: block; width: 46vh; height: 46vh; image-rendering: pixelated; }

.lobby-jugadores {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 2vh 0 4vh;
  padding: 2.4vh 1.6vw;
  border-radius: 3vh;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.lobby-cantidad { margin: 0 0 2vh; font-family: var(--fuente-titulo); font-weight: 400; font-size: 5vh; }
.lobby-cantidad span:first-child { color: var(--dorado); }
.lobby-vacio { margin: auto 0; text-align: center; font-size: 3vh; opacity: 0.7; animation: pulso 2s ease-in-out infinite; }

.chips { display: flex; flex-wrap: wrap; align-content: flex-start; margin: -0.6vh; padding: 0; list-style: none; }
.chip {
  margin: 0.6vh;
  padding: 0.8vh 1.4vw 0.6vh;
  border-radius: 999px;
  background: var(--color, var(--violeta));
  font-size: 3.2vh;
  font-weight: 700;
  box-shadow: 0 0.5vh 0 rgba(0, 0, 0, 0.3);
}
.chip.nuevo { animation: pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }

/* ---------- Pregunta ---------- */

.pregunta {
  display: flex;
  flex-direction: column;
}

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.barra-numero, .barra-respondieron {
  padding: 1vh 1.6vw;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 3vh;
  font-weight: 700;
}
.barra-respondieron strong { color: var(--dorado); font-size: 1.3em; }

.reloj { position: relative; width: 15vh; height: 15vh; flex: none; }
.reloj svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.reloj circle { fill: none; stroke-width: 9; }
.reloj-fondo { stroke: rgba(255, 255, 255, 0.15); fill: rgba(0, 0, 0, 0.35) !important; }
.reloj-arco { stroke: var(--dorado); stroke-linecap: round; transition: stroke 0.3s; }
.reloj-numero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding-top: 0.12em;
  font-family: var(--fuente-titulo);
  font-size: 7vh;
}
.reloj.urgente .reloj-arco { stroke: #ff4d5e; }
.reloj.urgente .reloj-numero { color: #ff6b78; animation: latido 0.5s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(1.15); } }

.pregunta-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2.5vh 6vw;
  padding: 2vh 3vw;
  border-radius: 3vh;
  background: #fff;
  color: var(--texto-oscuro);
  font-size: 6.4vh;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 1vh 0 rgba(0, 0, 0, 0.25), 0 2vh 5vh rgba(0, 0, 0, 0.35);
}
.pregunta-texto.larga { font-size: 5vh; }

/* Subtítulos en japonés (MOSTRAR_JAPONES en config.js) */
.texto-es, .texto-ja { display: block; }
.texto-ja { font-family: var(--fuente-ja); font-weight: 700; line-height: 1.25; line-break: strict; }
.pregunta-texto .texto-ja { margin-top: 1.2vh; font-size: 0.66em; color: #6b4bb8; }
.opcion-texto .texto-ja { margin-top: 0.5vh; font-size: 0.72em; opacity: 0.92; }
.opciones.bilingue .opcion { font-size: 4vh; padding-top: 1.4vh; padding-bottom: 1.4vh; }
.opciones.bilingue .opcion .forma { width: 8vh; height: 8vh; }
.resultados-pregunta .texto-ja { margin-top: 0.6vh; font-size: 0.72em; opacity: 0.8; }
.correcta-texto .texto-ja { margin-top: 0.3vh; font-size: 0.62em; color: #6b4bb8; }

.opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2vh 1.4vw;
  height: 36vh;
  margin-right: 13vw; /* deja lugar al QR chico de la esquina */
}

.opcion {
  display: flex;
  align-items: center;
  padding: 2vh 2vw;
  border-radius: 2vh;
  font-size: 4.6vh;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: inset 0 -1vh 0 rgba(0, 0, 0, 0.22), 0 1vh 2vh rgba(0, 0, 0, 0.3);
  animation: pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
.opcion:nth-child(2) { animation-delay: 0.08s; }
.opcion:nth-child(3) { animation-delay: 0.16s; }
.opcion:nth-child(4) { animation-delay: 0.24s; }
.opcion .forma { width: 9vh; height: 9vh; margin-right: 1.6vw; }
.opcion-texto { text-shadow: 0 0.06em 0.1em rgba(0, 0, 0, 0.3); }

.opcion--roja { background: var(--roja); }
.opcion--azul { background: var(--azul); }
.opcion--amarilla { background: var(--amarilla); color: #3a2400; }
.opcion--amarilla .forma svg { fill: #5a3c00; }
.opcion--amarilla .opcion-texto { text-shadow: none; }
.opcion--verde { background: var(--verde); }

.tarde {
  position: absolute;
  right: 3vw;
  bottom: 8.5vh;
  width: 11vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 1.9vh;
  font-weight: 600;
  opacity: 0.85;
}
.qr-chico { width: 12vh; height: 12vh; margin-bottom: 1vh; border-radius: 1vh; image-rendering: pixelated; }
.tarde strong { font-size: 1.4em; color: var(--dorado); letter-spacing: 0.06em; }

/* ---------- Resultados ---------- */

.resultados {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-column-gap: 3vw;
}
.resultados-izq { display: flex; flex-direction: column; min-height: 0; }
.resultados-izq .barra-numero { align-self: flex-start; }
.resultados-pregunta { margin: 2vh 0 1.5vh; font-size: 4vh; font-weight: 700; line-height: 1.2; }
.resultados-correcta {
  display: flex;
  align-items: center;
  align-self: flex-start;
  margin: 0;
  padding: 1.4vh 2vw;
  border-radius: 2vh;
  background: #fff;
  color: var(--texto-oscuro);
  font-size: 4.4vh;
  font-weight: 700;
  box-shadow: 0 0 0 0.6vh rgba(255, 255, 255, 0.3), 0 0 6vh rgba(255, 200, 61, 0.6);
  animation: pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.resultados-correcta .forma { width: 6vh; height: 6vh; margin-right: 1.2vw; }
.forma--roja svg { fill: var(--roja); }
.forma--azul svg { fill: var(--azul); }
.forma--amarilla svg { fill: #d9a300; }
.forma--verde svg { fill: var(--verde); }

.grafico {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  margin-top: 3vh;
  padding-bottom: 2vh;
}
.columna {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 9vw;
  margin: 0 1.2vw;
  opacity: 0.4;
}
.columna--correcta { opacity: 1; }
.columna-numero { font-family: var(--fuente-titulo); font-size: 5vh; margin-bottom: 0.8vh; }
.columna-barra {
  width: 100%;
  border-radius: 1.4vh 1.4vh 0 0;
  transform-origin: bottom;
  animation: crecer 0.8s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.columna-pie {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 1.2vh 0;
  border-radius: 0 0 1.4vh 1.4vh;
}
.columna-pie .forma { width: 5vh; height: 5vh; }
.columna-tilde {
  position: absolute;
  top: -1.6vh;
  right: -1.2vh;
  width: 4.4vh;
  height: 4.4vh;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--verde);
  font-size: 3vh;
  font-weight: 700;
  box-shadow: 0 0.4vh 1vh rgba(0, 0, 0, 0.4);
}
.columna--roja .columna-barra, .columna--roja .columna-pie { background: var(--roja); }
.columna--azul .columna-barra, .columna--azul .columna-pie { background: var(--azul); }
.columna--amarilla .columna-barra, .columna--amarilla .columna-pie { background: var(--amarilla); }
.columna--amarilla .forma svg { fill: #5a3c00; }
.columna--verde .columna-barra, .columna--verde .columna-pie { background: var(--verde); }
@keyframes crecer { from { transform: scaleY(0); } }

.resultados-der {
  align-self: start;
  padding: 2.6vh 1.6vw;
  border-radius: 3vh;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.tabla-titulo { margin: 0 0 2vh; font-family: var(--fuente-titulo); font-weight: 400; font-size: 5vh; color: var(--dorado); }
.tabla { margin: 0; padding: 0; list-style: none; }
.tabla-fila {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 1.3vh;
  padding: 1.3vh 1.2vw;
  border-radius: 1.8vh;
  background: rgba(0, 0, 0, 0.3);
  font-size: 3.4vh;
  font-weight: 700;
  animation: aparecer 0.5s ease-out both;
}
.tabla-fila:nth-child(2) { animation-delay: 0.08s; }
.tabla-fila:nth-child(3) { animation-delay: 0.16s; }
.tabla-fila:nth-child(4) { animation-delay: 0.24s; }
.tabla-fila:nth-child(5) { animation-delay: 0.32s; }
.tabla-fila:first-child { background: rgba(255, 200, 61, 0.22); box-shadow: inset 0 0 0 0.35vh var(--dorado); }
.tabla-puesto {
  width: 5vh;
  height: 5vh;
  display: grid;
  place-items: center;
  flex: none;
  margin-right: 1vw;
  padding-top: 0.12em;
  border-radius: 50%;
  background: var(--color, var(--violeta));
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 3vh;
}
.tabla-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-puntos { font-family: var(--fuente-titulo); font-weight: 400; margin-left: 1vw; }
.tabla-suma {
  position: absolute;
  top: -1.2vh;
  right: 1vw;
  padding: 0.2vh 0.7vw;
  border-radius: 999px;
  background: var(--verde);
  font-size: 2.1vh;
  animation: pop 0.6s 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

/* ---------- Podio ---------- */

.podio { display: flex; flex-direction: column; align-items: center; }
.podio-titulo { font-size: 9vh; transform: rotate(-3deg); }
.podio-escalones { flex: 1; display: flex; align-items: flex-end; justify-content: center; width: 100%; min-height: 0; }
.escalon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22vw;
  margin: 0 1vw;
  text-align: center;
  animation: aparecer 0.8s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
.escalon--1 { animation-delay: 1.2s; }
.escalon--2 { animation-delay: 0.6s; }
.escalon--3 { animation-delay: 0.1s; }
.escalon-medalla { font-size: 9vh; line-height: 1.1; }
.escalon-nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 4.6vh; font-weight: 700; }
.escalon-puntos { font-family: var(--fuente-titulo); font-size: 4.4vh; color: var(--dorado); }
.escalon-trivia { margin-bottom: 1.2vh; font-size: 2.2vh; font-weight: 600; opacity: 0.75; }
.escalon-base {
  width: 100%;
  display: grid;
  place-items: center;
  padding-top: 0.15em;
  border-radius: 2vh 2vh 0 0;
  font-family: var(--fuente-titulo);
  font-size: 12vh;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 0.04em 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1.2vh 0 rgba(255, 255, 255, 0.25);
}
.escalon--1 .escalon-base { height: 29vh; background: linear-gradient(#ffd75e, #e0a100); }
.escalon--2 .escalon-base { height: 20vh; background: linear-gradient(#e9eef5, #a9b4c4); color: rgba(60, 70, 90, 0.8); }
.escalon--3 .escalon-base { height: 13vh; background: linear-gradient(#f0a868, #b8662b); }
.escalon--1 .escalon-nombre { font-size: 5.6vh; color: var(--dorado); }

/* ---------- Tabla final ---------- */

.tabla-final { display: flex; flex-direction: column; align-items: center; }
.tabla-final-cabecera { text-align: center; margin-bottom: 2vh; }
.tabla-final-titulo { font-size: 7vh; transform: rotate(-2deg); }
.tabla-final-nota { margin: 1vh 0 0; font-size: 2.4vh; font-weight: 600; opacity: 0.8; }

.tabla-final-lista {
  display: grid;
  grid-template-columns: minmax(0, 60vw);
  grid-row-gap: 0.8vh;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabla-final-lista.dos-columnas {
  grid-template-columns: minmax(0, 44vw) minmax(0, 44vw);
  grid-template-rows: repeat(10, auto);
  grid-auto-flow: column;
  grid-column-gap: 2vw;
}

.final-fila {
  display: flex;
  align-items: center;
  padding: 0.5vh 0.8vw 0.5vh 0.5vh;
  border-radius: 1.6vh;
  background: rgba(0, 0, 0, 0.3);
  font-size: 3vh;
  font-weight: 700;
  animation: aparecer 0.5s ease-out both;
}
.final-fila--1 { background: rgba(255, 200, 61, 0.25); box-shadow: inset 0 0 0 0.35vh var(--dorado); }
.final-fila--2 { background: rgba(220, 228, 240, 0.18); }
.final-fila--3 { background: rgba(240, 168, 104, 0.2); }
.final-puesto {
  width: 4.8vh;
  height: 4.8vh;
  display: grid;
  place-items: center;
  flex: none;
  margin-right: 1vw;
  padding-top: 0.1em;
  border-radius: 50%;
  background: var(--color, var(--violeta));
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 2.8vh;
}
.final-fila--1 .final-puesto, .final-fila--2 .final-puesto, .final-fila--3 .final-puesto {
  background: none;
  padding-top: 0;
  font-family: var(--fuente-texto);
  font-size: 4.4vh;
}
.final-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.final-trivia { margin: 0 1.2vw; font-size: 2.2vh; font-weight: 600; opacity: 0.65; }
.final-puntos {
  min-width: 6.4vh;
  padding: 0.5vh 1vw 0.2vh;
  border-radius: 999px;
  background: var(--dorado);
  color: var(--texto-oscuro);
  font-family: var(--fuente-titulo);
  font-weight: 400;
  font-size: 3.6vh;
  text-align: center;
}

/* ---------- Configuración pendiente, avisos y confeti ---------- */

.configurar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 3.6vh;
}
.configurar .titulo { font-size: 10vh; margin-bottom: 4vh; }
.configurar p { margin: 1vh 0; }

.toast {
  position: fixed;
  top: 3vh;
  left: 50%;
  z-index: 80;
  max-width: 80vw;
  margin: 0;
  padding: 1.4vh 2.4vw;
  border-radius: 999px;
  background: #fff;
  color: var(--texto-oscuro);
  font-size: 3vh;
  font-weight: 700;
  transform: translateX(-50%);
  box-shadow: 0 1vh 4vh rgba(0, 0, 0, 0.5);
  animation: pop 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.aviso {
  position: fixed;
  left: 2vw;
  bottom: 1.6vh;
  z-index: 70;
  margin: 0;
  padding: 0.5em 1em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 2vh;
  font-weight: 600;
}
.aviso-sonido { animation: pulso 2s ease-in-out infinite; }

/* Esquina de abajo a la derecha: atajos y botón para reiniciar */
.esquina {
  position: fixed;
  right: 2vw;
  bottom: 1.4vh;
  z-index: 65;
  display: flex;
  align-items: center;
}
.atajos { margin: 0 1vw 0 0; font-size: 1.6vh; opacity: 0.35; }

.boton-reiniciar {
  padding: 0.9vh 1.4vw 0.8vh;
  border: 0.25vh solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 2.2vh;
  font-weight: 700;
  opacity: 0.8;
  transition: opacity 0.2s, transform 0.15s, background 0.2s;
}
.boton-reiniciar:hover,
.boton-reiniciar:focus { opacity: 1; background: var(--rosa); transform: scale(1.06); outline: none; }

/* Confirmación para reiniciar */
.confirmar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(10, 0, 30, 0.8);
  animation: aparecer 0.25s ease-out;
}
.confirmar-caja {
  width: 58vw;
  padding: 5vh 4vw 4.5vh;
  border-radius: 4vh;
  background: #fff;
  color: var(--texto-oscuro);
  text-align: center;
  box-shadow: 0 0 0 1vh rgba(255, 255, 255, 0.25), 0 4vh 8vh rgba(0, 0, 0, 0.6);
  animation: pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.confirmar-titulo { margin: 0; font-family: var(--fuente-titulo); font-weight: 400; font-size: 6vh; color: var(--violeta); }
.confirmar-texto { margin: 2vh 0 4.5vh; font-size: 3.2vh; font-weight: 600; line-height: 1.3; }
.confirmar-botones { display: flex; justify-content: center; }
.confirmar-botones button {
  margin: 0 1.2vw;
  padding: 1.6vh 3vw 1.3vh;
  border: none;
  border-radius: 999px;
  font-family: var(--fuente-titulo);
  font-size: 4vh;
  transition: transform 0.15s;
}
.confirmar-no { background: #e8e4f3; color: var(--texto-oscuro); box-shadow: 0 0.7vh 0 #b9b1d6; }
.confirmar-si { background: var(--rosa); color: #fff; box-shadow: 0 0.7vh 0 #9c0048; }
/* Botón marcado (control remoto con flechas): bien visible */
.confirmar-botones button:focus { outline: 0.7vh solid var(--dorado); outline-offset: 0.5vh; transform: scale(1.08); }

.confeti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  pointer-events: none;
}

/* Smart TV (lo activa app.js): sin efectos caros */
.liviano .opcion,
.liviano .tabla-fila,
.liviano .escalon,
.liviano .final-fila { animation: none; }

/* TV en pantalla vertical o angosta (por ejemplo, si alguien la abre en el celu) */
@media (max-aspect-ratio: 1/1) {
  body.tv { overflow-y: auto; height: auto; }
  .tv .pantalla { position: static; min-height: 100vh; padding: 4vh 5vw 10vh; }
  .lobby, .resultados { grid-template-columns: 1fr; grid-row-gap: 3vh; justify-items: center; }
  .lobby .titulo { font-size: 6vh; transform-origin: center; }
  .qr { width: 70vw; height: 70vw; }
  .lobby-jugadores { width: 100%; }
  .solo-celular {
    display: inline-block;
    padding: 1.4vh 4vw;
    border-radius: 999px;
    background: var(--rosa);
    color: #fff;
    font-size: 2.4vh;
    font-weight: 700;
    text-decoration: none;
  }
  .opciones { height: auto; margin-right: 0; grid-auto-rows: 12vh; }
  .tarde { display: none; }
  .escalon { width: 28vw; }
}

/* =========================================================
   CELULAR
   ========================================================= */

body.jugador {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 18px;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

.j-cabecera {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  background: rgba(0, 0, 0, 0.3);
  font-weight: 700;
}
.j-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.j-puntos { margin: 0 12px; font-family: var(--fuente-titulo); font-weight: 400; font-size: 20px; color: var(--dorado); }
.j-conexion { width: 12px; height: 12px; flex: none; border-radius: 50%; background: #f5a623; }
.j-conexion[data-estado="ok"] { background: #12b76a; box-shadow: 0 0 8px #12b76a; }
.j-conexion[data-estado="error"] { background: #e5383b; animation: pulso 1s ease-in-out infinite; }

.j-contenido { flex: 1; display: flex; flex-direction: column; padding: 16px; }
.j-vista { flex: 1; display: flex; flex-direction: column; animation: aparecer 0.35s ease-out; }
.j-centro { align-items: center; justify-content: center; text-align: center; }

/* Ingreso */
.j-ingreso { justify-content: center; }
.j-ingreso .titulo { font-size: 40px; text-align: center; transform: rotate(-3deg); margin-bottom: 28px; }
.j-form {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 22px 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.j-campo { display: block; margin-bottom: 18px; }
.j-campo span { display: block; margin-bottom: 6px; font-weight: 700; }
.j-campo input {
  width: 100%;
  padding: 14px 16px;
  border: 3px solid rgba(255, 255, 255, 0.45);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font: inherit;
  font-size: 22px;
  font-weight: 600;
}
.j-campo input:focus { outline: none; border-color: var(--dorado); }
#inputCodigo { font-family: var(--fuente-titulo); font-size: 34px; letter-spacing: 0.3em; text-align: center; }

.j-boton {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 999px;
  background: var(--dorado);
  color: var(--texto-oscuro);
  font-family: var(--fuente-titulo);
  font-size: 26px;
  box-shadow: 0 6px 0 #a65d00;
  touch-action: manipulation;
}
.j-boton:active { transform: translateY(4px); box-shadow: 0 2px 0 #a65d00; }
.j-boton:disabled { opacity: 0.6; }
.j-error { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(229, 56, 59, 0.25); font-weight: 600; }

/* Textos comunes */
.j-emoji { margin: 0 0 10px; font-size: 80px; line-height: 1; }
.j-titulo { margin: 0 0 10px; font-family: var(--fuente-titulo); font-weight: 400; font-size: 32px; color: var(--dorado); }
.j-texto { margin: 0; max-width: 340px; font-size: 19px; line-height: 1.35; opacity: 0.9; }

/* Pregunta: los 4 botones */
.j-pregunta-barra { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-weight: 700; }
.j-tiempo {
  min-width: 52px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-family: var(--fuente-titulo);
  font-size: 24px;
  text-align: center;
}
.j-tiempo.urgente { background: #e5383b; animation: pulso 0.6s ease-in-out infinite; }

.j-botones {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  min-height: 300px;
}
.j-botones[data-cantidad="2"] { grid-template-columns: 1fr; }
.j-botones[data-cantidad="3"] .j-opcion:last-child { grid-column: span 2; }

.j-opcion {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 20px;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.22), 0 6px 14px rgba(0, 0, 0, 0.3);
  touch-action: manipulation;
  transition: transform 0.08s ease;
}
.j-opcion:active { transform: scale(0.95); }
.j-opcion .forma { width: 42%; max-width: 120px; }
.j-opcion--roja { background: var(--roja); }
.j-opcion--azul { background: var(--azul); }
.j-opcion--amarilla { background: var(--amarilla); }
.j-opcion--amarilla .forma svg { fill: #5a3c00; }
.j-opcion--verde { background: var(--verde); }
.j-pista { margin: 12px 0 0; text-align: center; font-weight: 600; opacity: 0.75; }

/* Respuesta enviada */
.j-elegida {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  margin-bottom: 20px;
  border-radius: 28px;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.22), 0 10px 30px rgba(0, 0, 0, 0.4);
  animation: pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.j-elegida .forma { width: 55%; }

/* Resultado */
.j-resultado { margin: -16px; padding: 16px; }
.j-resultado--bien { background: radial-gradient(circle at 50% 35%, rgba(30, 158, 69, 0.75), rgba(30, 158, 69, 0.1) 70%); }
.j-resultado--mal { background: radial-gradient(circle at 50% 35%, rgba(229, 36, 59, 0.6), rgba(229, 36, 59, 0.08) 70%); }
.j-icono-resultado {
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  margin: 0 0 16px;
  border-radius: 50%;
  background: #fff;
  font-size: 60px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.j-resultado--bien .j-icono-resultado { color: var(--verde); }
.j-resultado--mal .j-icono-resultado { color: var(--roja); }
.j-resultado .j-titulo { color: #fff; }
.j-suma { margin: 4px 0 10px; font-family: var(--fuente-titulo); font-size: 48px; color: var(--dorado); }
.j-racha { margin: 0 0 10px; font-size: 20px; font-weight: 700; }
.j-puesto { margin: 0; padding: 8px 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.3); font-weight: 700; }

/* Pie y avisos */
.j-pie { padding: 0 16px max(14px, env(safe-area-inset-bottom)); text-align: center; }
.j-salir {
  padding: 8px 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 600;
}
.j-aviso {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 70px;
  z-index: 10;
  margin: 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
  color: var(--texto-oscuro);
  font-weight: 700;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}