/* ===========================================================================
   JUEGO — pantallas de la actividad
   Se abre desde el celular de cada participante. Todo pensado para el pulgar.
   =========================================================================== */

/* --- Cabecera de la etapa ------------------------------------------------ */

.sello-etapa {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.sello-etapa .letra {
  width: 58px; height: 58px; flex: none; border-radius: 16px;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 32px; color: #fff;
  background: linear-gradient(150deg, var(--carmesi), var(--vino));
  box-shadow: 0 12px 30px -10px rgba(193,2,48,.7);
  animation: sello .7s var(--curva) both;
}
@keyframes sello { from { opacity: 0; transform: scale(.6) rotate(-12deg); } }
.sello-etapa .nombre { font-family: var(--display); font-size: 25px; line-height: 1.1; }
.sello-etapa .cual {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--naranja); margin-top: 3px;
}

/* --- Fases: solo una visible a la vez ------------------------------------ */

.fase { display: none; animation: fadeSube .45s var(--curva); }
.fase.activa { display: block; }
@keyframes fadeSube { from { opacity: 0; transform: translateY(16px); } }

/* --- Barra de avance ----------------------------------------------------- */

.avance-juego {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.avance-juego .pista { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.avance-juego .pista i {
  display: block; height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--vino), var(--carmesi), var(--naranja));
  transition: width .45s var(--curva);
}
.avance-juego .n { font-family: var(--mono); font-size: 12px; color: var(--crema-3); white-space: nowrap; }

/* --- Reloj --------------------------------------------------------------- */

.reloj-aro { position: relative; width: 54px; height: 54px; flex: none; }
.reloj-aro svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.reloj-aro circle { fill: none; stroke-width: 5; }
.reloj-aro .fondo { stroke: rgba(255,255,255,.1); }
.reloj-aro .aguja { stroke: var(--naranja); stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.reloj-aro.urge .aguja { stroke: var(--carmesi-2); }
.reloj-aro b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 17px;
}
.reloj-aro.urge b { color: var(--carmesi-2); animation: pulsa .6s infinite; }
@keyframes pulsa { 50% { opacity: .4 } }

/* --- Enunciado ----------------------------------------------------------- */

.enunciado {
  font-size: 19px; line-height: 1.42; margin-bottom: 18px; text-wrap: balance;
}
.enunciado b { color: var(--naranja-2); }

/* --- Opciones ------------------------------------------------------------ */

.opciones { display: grid; gap: 10px; }
.opcion {
  display: flex; align-items: flex-start; gap: 13px; text-align: left;
  padding: 15px 17px; border-radius: 13px; cursor: pointer;
  border: 1px solid var(--linea); background: rgba(255,255,255,.04);
  color: var(--crema); font: inherit; font-size: 15.5px; line-height: 1.4;
  transition: all .22s var(--curva);
}
.opcion:hover:not(:disabled) { border-color: var(--linea-2); background: rgba(255,255,255,.08); transform: translateX(3px); }
.opcion .clave {
  flex: none; width: 27px; height: 27px; border-radius: 8px;
  display: grid; place-items: center; font-family: var(--mono); font-size: 12.5px;
  background: rgba(255,255,255,.09); color: var(--crema-2);
  transition: all .22s;
}
.opcion.bien { border-color: var(--verde); background: rgba(53,208,127,.14); }
.opcion.bien .clave { background: var(--verde); color: #06301c; }
.opcion.mal  { border-color: var(--rojo); background: rgba(255,95,86,.13); }
.opcion.mal .clave { background: var(--rojo); color: #3d0906; }
.opcion:disabled { cursor: default; }
.opcion.apagada { opacity: .42; }

/* --- Clasificar (juego de Concentración) --------------------------------- */

.arena { position: relative; min-height: 300px; }

.ficha {
  margin: 6px auto 20px; max-width: 420px;
  padding: 22px 20px; border-radius: 16px; text-align: center;
  font-size: 20px; line-height: 1.35;
  border: 1px solid var(--linea-2);
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  animation: llega .4s var(--curva);
}
@keyframes llega { from { opacity: 0; transform: scale(.9) translateY(14px); } }

.cajas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.caja {
  padding: 22px 14px; border-radius: 15px; cursor: pointer; text-align: center;
  border: 2px solid var(--linea); background: rgba(255,255,255,.04);
  color: var(--crema); font: inherit;
  transition: all .22s var(--curva);
}
.caja:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--naranja); }
.caja .t { font-size: 19px; font-weight: 600; }
.caja .p { font-size: 11.5px; color: var(--crema-3); margin-top: 4px; line-height: 1.35; }
.caja.bien { border-color: var(--verde); background: rgba(53,208,127,.16); }
.caja.mal  { border-color: var(--rojo);  background: rgba(255,95,86,.14); }

/* Notificaciones falsas: el ruido contra el que se juega */
.ruido {
  position: fixed; z-index: 5; pointer-events: none;
  padding: 11px 16px; border-radius: 12px; font-size: 13.5px;
  background: rgba(40,20,25,.92); border: 1px solid var(--linea-2);
  color: var(--crema-2); box-shadow: 0 14px 34px -12px rgba(0,0,0,.8);
  animation: ruidoEntra 2.6s var(--curva) forwards;
  max-width: 240px;
}
@keyframes ruidoEntra {
  0%   { opacity: 0; transform: translateX(40px) scale(.9); }
  12%  { opacity: 1; transform: none; }
  78%  { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(30px) scale(.95); }
}

/* --- Ojeada (Inspección) -------------------------------------------------- */

.material {
  background: #F6F2EC; color: #241216; border-radius: 14px;
  padding: 20px 18px; font-size: 13.5px; line-height: 1.5;
  max-height: 56vh; overflow: hidden; position: relative;
}
.material h4 { font-family: var(--display); font-size: 19px; font-weight: 400; line-height: 1.2; }
.material .sub { font-size: 11px; color: #7A6A63; margin-top: 2px; margin-bottom: 12px; font-family: var(--mono); }
.material h5 { font-size: 13px; margin: 12px 0 3px; color: var(--vino); }
.material p { margin-bottom: 4px; }
.material b { background: rgba(255,131,0,.28); padding: 0 2px; border-radius: 3px; }
.material table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 12px; }
.material th, .material td { border: 1px solid #D8CEC5; padding: 4px 7px; text-align: left; }
.material th { background: #EBE4DA; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.material .conclusion { margin-top: 10px; font-style: italic; border-top: 1px solid #D8CEC5; padding-top: 8px; }

/* --- Avance (Lectura) ----------------------------------------------------- */

.lector {
  min-height: 210px; display: grid; place-items: center;
  padding: 26px 20px; border-radius: 16px;
  background: rgba(0,0,0,.3); border: 1px solid var(--linea);
}
.lector .bloque {
  font-family: var(--display); font-size: 24px; line-height: 1.4; text-align: center;
  text-wrap: balance; animation: pasa .5s var(--curva);
}
@keyframes pasa { from { opacity: 0; transform: translateY(12px); } }
.lector-nota {
  margin-top: 12px; text-align: center; font-family: var(--mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--crema-3);
}

/* --- Emparejar (Producción) ----------------------------------------------- */

.emparejar { display: grid; gap: 10px; }
.par { display: grid; grid-template-columns: 1fr; gap: 8px; }
.par .izq {
  padding: 13px 16px; border-radius: 12px; font-weight: 600; font-size: 16px;
  background: linear-gradient(150deg, rgba(193,2,48,.3), rgba(162,26,25,.18));
  border: 1px solid var(--linea-2);
}
.par select {
  width: 100%; padding: 13px 14px; border-radius: 12px;
  border: 1px solid var(--linea-2); background: rgba(0,0,0,.3);
  color: var(--crema); font: inherit; font-size: 15px;
}
.par select:focus { outline: none; border-color: var(--naranja); }
.par.bien .izq { border-color: var(--verde); }
.par.bien select { border-color: var(--verde); background: rgba(53,208,127,.12); }
.par.mal select { border-color: var(--rojo); background: rgba(255,95,86,.1); }
.par .correcta { font-size: 12.5px; color: var(--verde); padding-left: 4px; }

/* --- Predicción (Autoevaluación) ------------------------------------------ */

.prediccion { text-align: center; }
.prediccion .valor {
  font-family: var(--display); font-size: 76px; line-height: 1; color: var(--naranja-2);
  transition: color .3s;
}
.prediccion input[type=range] {
  width: 100%; margin-top: 18px; accent-color: var(--carmesi); height: 30px;
}
.prediccion .escala {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; color: var(--crema-3);
}

.calibracion { text-align: center; margin-top: 20px; }
.calibracion .barras { display: flex; gap: 26px; justify-content: center; align-items: flex-end; height: 150px; }
.calibracion .col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.calibracion .barra {
  width: 62px; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, var(--carmesi-2), var(--vino));
  transition: height 1.1s var(--curva); height: 0;
}
.calibracion .col.real .barra { background: linear-gradient(180deg, var(--naranja-2), var(--naranja)); }
.calibracion .et { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--crema-3); }
.calibracion .cifra { font-family: var(--display); font-size: 26px; }
.calibracion .veredicto { margin-top: 18px; font-size: 15px; color: var(--crema-2); text-wrap: balance; }

/* --- Resultado ------------------------------------------------------------ */

.resultado { text-align: center; }
.marcador {
  font-family: var(--display); font-size: 84px; line-height: 1;
  background: linear-gradient(120deg, var(--naranja-2), var(--carmesi-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: marca .9s var(--curva) both;
}
@keyframes marca { from { opacity: 0; transform: scale(.55); } }
.resultado .de { font-family: var(--mono); font-size: 13px; color: var(--crema-3); letter-spacing: .12em; }
.resultado .frase { margin: 16px 0 22px; font-size: 17px; color: var(--crema-2); text-wrap: balance; }

.repaso-lista { text-align: left; display: grid; gap: 8px; margin-top: 18px; }
.repaso-item {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; border-radius: 11px; font-size: 14px;
  border: 1px solid var(--linea); background: rgba(255,255,255,.035);
}
.repaso-item .ic { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; }
.repaso-item.bien .ic { background: rgba(53,208,127,.22); color: var(--verde); }
.repaso-item.mal .ic  { background: rgba(255,95,86,.2); color: var(--rojo); }
.repaso-item .sol { color: var(--verde); font-size: 13px; margin-top: 3px; }

/* --- Confeti (solo cuando el resultado lo merece) ------------------------- */

.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.confeti i {
  position: absolute; width: 9px; height: 14px; border-radius: 2px;
  animation: cae linear forwards;
}
@keyframes cae {
  to { transform: translateY(105vh) rotate(760deg); opacity: 0; }
}

@media (min-width: 560px) {
  .par { grid-template-columns: 1fr 1.35fr; align-items: center; }
}

/* --- Elegir etapa (cuando se entra sin ?e= en la dirección) --------------- */

.eleccion { display: grid; gap: 9px; }
.elige {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 15px; border-radius: 13px; text-decoration: none;
  border: 1px solid var(--linea); background: rgba(255,255,255,.04);
  color: var(--crema);
  transition: all .22s var(--curva);
}
.elige:hover { border-color: var(--linea-2); background: rgba(255,255,255,.09); transform: translateX(4px); }
.elige .l {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 23px; color: #fff;
  background: linear-gradient(150deg, var(--carmesi), var(--vino));
}
.elige .t { display: flex; flex-direction: column; line-height: 1.3; }
.elige .t b { font-size: 16px; font-weight: 600; }
.elige .t i {
  font-style: normal; font-size: 12px; color: var(--crema-3);
  font-family: var(--mono); letter-spacing: .04em;
}