/* ===========================================================
   TRIVIA MEXICANA - Estilos
   Noche de fiesta: fondo oscuro, papel picado y colores
   de puesto de mercado. Los avatares apagados van en ceniza.
   =========================================================== */

:root {
  --rosa:        #E4007C;
  --rosa-claro:  #FF4FA3;
  --verde:       #0E9B62;
  --verde-hondo: #006847;
  --amarillo:    #F7C948;
  --naranja:     #F26B1D;
  --rojo:        #CE1126;
  --turquesa:    #2FA8A0;
  --morado:      #7A5FC4;

  --tinta:       #17110F;   /* fondo */
  --tinta-alta:  #221A17;   /* tarjetas */
  --tinta-suave: #2E2421;   /* bordes */
  --hueso:       #F7F2E6;
  --ceniza:      #9A918A;
  --ceniza-baja: #6B635E;

  --sombra:      0 6px 20px rgba(0, 0, 0, .45);
  --sombra-alta: 0 16px 46px rgba(0, 0, 0, .55);
  --sombra-rosa: 0 8px 26px rgba(228, 0, 124, .45);

  --fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--fuente);
  background: var(--tinta);
  color: var(--hueso);
  overscroll-behavior: none;
}

/* resplandores de feria detras de todo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(228, 0, 124, .20), transparent 62%),
    radial-gradient(820px 520px at 92% 8%, rgba(14, 155, 98, .18), transparent 62%),
    radial-gradient(760px 480px at 50% 115%, rgba(247, 201, 72, .12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.pantalla, .vista {
  position: relative;
  z-index: 1;
  display: none;
  animation: entrar .45s cubic-bezier(.2, .9, .3, 1.3) both;
}
.pantalla.activa, .vista.activa { display: block; }

/* ---------- Papel picado ---------- */

.papel {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 46px;
  display: flex;
  z-index: 2;
  pointer-events: none;
}
.papel i {
  flex: 1;
  height: 34px;
  display: block;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  transform-origin: top center;
  animation: colgar 3.6s ease-in-out infinite;
  opacity: .92;
}
.papel i:nth-child(6n+1) { background: var(--rosa); }
.papel i:nth-child(6n+2) { background: var(--amarillo); }
.papel i:nth-child(6n+3) { background: var(--verde); }
.papel i:nth-child(6n+4) { background: var(--turquesa); }
.papel i:nth-child(6n+5) { background: var(--naranja); }
.papel i:nth-child(6n+6) { background: var(--morado); }
.papel i:nth-child(2n)   { animation-delay: -1.2s; height: 30px; }
.papel i:nth-child(3n)   { animation-delay: -2.4s; height: 38px; }
.papel::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(247, 242, 230, .25);
}

/* ---------- Animaciones ---------- */

@keyframes entrar {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes pop {
  0%   { opacity: 0; transform: scale(.4) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes latir {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes brillo {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes temblar {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-9px); }
  40%      { transform: translateX(9px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}
@keyframes colgar {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}
@keyframes caer {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}
@keyframes girar {
  to { transform: rotate(360deg); }
}

/* El tiritar de las calaveritas: casi todo el ciclo estan quietas
   y de repente les da el escalofrio. Cada avatar entra en distinto
   momento gracias al animation-delay que les pone el JS. */
@keyframes tiritar {
  0%, 84%, 100% { transform: translate(0, 0) rotate(0); }
  86%  { transform: translate(-2px, 1px) rotate(-2.5deg); }
  88%  { transform: translate(2px, -1px) rotate(2.5deg); }
  90%  { transform: translate(-2px, 0) rotate(-2deg); }
  92%  { transform: translate(2px, 1px) rotate(1.5deg); }
  94%  { transform: translate(-1px, 0) rotate(-1deg); }
  96%  { transform: translate(1px, 0) rotate(.5deg); }
}
/* Los que ya estan vivos respiran, no tiemblan */
@keyframes respirar {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.02); }
}
/* El momento en que alguien entra y su avatar revive */
@keyframes revivir {
  0%   { transform: scale(.75) rotate(-10deg); filter: brightness(3); }
  35%  { transform: scale(1.25) rotate(6deg);  filter: brightness(1.8); }
  60%  { transform: scale(.96) rotate(-3deg);  filter: brightness(1.2); }
  100% { transform: scale(1) rotate(0);        filter: none; }
}
@keyframes onda {
  0%   { opacity: .85; transform: scale(.4); }
  100% { opacity: 0;   transform: scale(2.1); }
}
/* detalles vivos de los dibujos */
@keyframes brasear {
  0%, 100% { opacity: 1; }
  45%      { opacity: .35; }
}
@keyframes zumbar {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(3px, -4px); }
  50%      { transform: translate(-4px, 2px); }
  75%      { transform: translate(2px, 4px); }
}
@keyframes gotear {
  0%, 100% { transform: translateY(0);   opacity: 1; }
  70%      { transform: translateY(6px); opacity: .3; }
}
@keyframes serpentear {
  0%, 100% { transform: translateX(0) rotate(0); }
  50%      { transform: translateX(-3px) rotate(-3deg); }
}

/* ---------- Piezas comunes ---------- */

.marca {
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: .95;
  text-transform: uppercase;
}
.marca span { color: var(--rosa-claro); }

.boton {
  border: 0;
  cursor: pointer;
  font-family: var(--fuente);
  font-weight: 800;
  color: var(--hueso);
  background: linear-gradient(135deg, var(--rosa-claro), var(--rosa));
  border-radius: 999px;
  box-shadow: var(--sombra-rosa);
  transition: transform .16s cubic-bezier(.2,.9,.3,1.4), box-shadow .16s, filter .16s;
}
.boton:hover  { transform: translateY(-2px) scale(1.02); filter: brightness(1.08); }
.boton:active { transform: translateY(1px) scale(.98); }
.boton:disabled {
  background: var(--tinta-suave);
  color: var(--ceniza-baja);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.boton.fantasma {
  background: transparent;
  color: var(--ceniza);
  box-shadow: none;
  border: 2px solid var(--tinta-suave);
}
.boton.fantasma:hover { border-color: var(--rosa); color: var(--rosa-claro); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--tinta-alta);
  border: 1px solid var(--tinta-suave);
  border-radius: 999px;
  box-shadow: var(--sombra);
  font-weight: 700;
  animation: pop .45s cubic-bezier(.2,.9,.3,1.5) both;
}
.chip .punto {
  width: .6em;
  height: .6em;
  border-radius: 50%;
  background: var(--verde);
  flex: none;
}
.chip.desconectado { opacity: .45; }
.chip.desconectado .punto { background: var(--ceniza-baja); }

.error {
  background: rgba(206, 17, 38, .18);
  color: #FF8A8A;
  border-radius: 14px;
  font-weight: 700;
  animation: temblar .4s;
}

/* ===========================================================
   LOS AVATARES
   =========================================================== */

.avatar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--tam, 110px);
}

.avatar .arte {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.avatar .piso { fill: rgba(0, 0, 0, .45); }

/* --- lugar vacio: calaverita en ceniza --- */
.avatar.dormido .arte {
  filter: grayscale(1) brightness(.42) contrast(1.05);
  opacity: .5;
  animation: tiritar 6s ease-in-out infinite;
  animation-delay: var(--retraso, 0s);
}
.avatar.dormido .marca-calaverita {
  opacity: .92;
  animation: tiritar 6s ease-in-out infinite;
  animation-delay: var(--retraso, 0s);
}
/* la calaverita conserva su blanco aunque el dibujo este en gris */
.avatar.dormido .marca-calaverita { filter: none; }
.avatar.vivo .marca-calaverita { display: none; }

/* --- lugar ocupado: el juguete a todo color --- */
.avatar.vivo .arte {
  animation: respirar 3.4s ease-in-out infinite;
  animation-delay: var(--retraso, 0s);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
}
.avatar.vivo .brasa   { animation: brasear 1.1s ease-in-out infinite; }
.avatar.vivo .moscas  { animation: zumbar 1.6s linear infinite; }
.avatar.vivo .escurre { animation: gotear 2.6s ease-in-out infinite; }
.avatar.vivo .ceniza  { animation: gotear 3.1s ease-in-out infinite; }
.avatar.vivo .lazo    { animation: serpentear 2.2s ease-in-out infinite; }
.avatar.vivo .boton   { animation: colgar 2.4s ease-in-out infinite; transform-origin: 60px 38px; }

/* el destello del momento en que revive */
.avatar.reviviendo .arte { animation: revivir .9s cubic-bezier(.2,.9,.3,1.4) both; }
.avatar.reviviendo::before {
  content: "";
  position: absolute;
  top: 30%; left: 50%;
  width: 90%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid var(--amarillo);
  animation: onda .9s ease-out forwards;
  pointer-events: none;
}

/* nombre debajo del monito */
.avatar .placa {
  margin-top: .35em;
  font-weight: 800;
  font-size: clamp(11px, 1.05vw, 16px);
  padding: .25em .8em;
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--tinta-alta);
  border: 1px solid var(--tinta-suave);
  color: var(--hueso);
}
.avatar.dormido .placa {
  color: var(--ceniza-baja);
  background: transparent;
  border-color: transparent;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: clamp(9px, .8vw, 12px);
}
.avatar.vivo .placa {
  border-color: var(--color-avatar, var(--rosa));
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .35);
}

/* palomita de "ya contesto" */
.avatar .listo {
  position: absolute;
  top: 2%;
  right: 4%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
  animation: pop .4s cubic-bezier(.2,.9,.3,1.5) both;
}

/* corona del que trae el mando */
.avatar .corona {
  position: absolute;
  top: -12%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(16px, 1.6vw, 24px);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}

/* puntos flotando sobre el avatar */
.avatar .marcador-mini {
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--amarillo);
  color: #2B2B2B;
  font-weight: 900;
  font-size: clamp(11px, 1.1vw, 17px);
  padding: .1em .6em;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
}

/* ---------- Opciones de respuesta (colores tipo lotería) ---------- */

/* ---------- las cartas de Memoria Mexicana ---------- */
/* Marco de carta de loteria: filo de papel viejo y doble raya */
.arma-carta {
  width: 88%; height: 88%; object-fit: contain; display: block;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.45));
}
.reverso-carta { width: 92%; height: 92%; object-fit: contain; display: block; }
.num-carta {
  position: absolute; bottom: 6px; right: 8px; font-weight: 900;
  font-size: .45em; color: var(--hueso); text-shadow: 0 2px 3px #000;
}

/* ---------- la copa de Los Vasitos ---------- */
.copa-img {
  display: block; width: 100%; max-height: 120px; margin: 0 auto 4px;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.45));
  transition: filter .3s, transform .2s;
}
/* la que trae veneno: se tiñe morada */
.copa-veneno { filter: hue-rotate(215deg) saturate(1.6) drop-shadow(0 0 14px rgba(168,85,247,.8)); }
/* la que ya se llevo alguien */
.copa-tomada { filter: grayscale(1) brightness(.45); }
/* la mia */
.copa-mia { filter: drop-shadow(0 0 14px rgba(232,163,58,.95)); transform: scale(1.06); }

.op-0 { --op: var(--rosa);     }
.op-1 { --op: var(--turquesa); }
.op-2 { --op: var(--amarillo); }
.op-3 { --op: var(--verde);    }

.etiqueta-dif {
  display: inline-block;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .35em 1.1em;
}
.dif-facil     { background: rgba(14,155,98,.22);  color: #55D6A0; }
.dif-dificil   { background: rgba(247,201,72,.20); color: var(--amarillo); }
.dif-imposible { background: rgba(228,0,124,.22);  color: var(--rosa-claro); }