/* ---------- atracción ---------- */
#p-atraccion{
  justify-content:center;align-items:center;text-align:center;cursor:pointer;
  background:
    repeating-conic-gradient(from 0deg at 50% 38%, rgba(255,255,255,.16) 0deg 9deg, transparent 9deg 18deg),
    var(--wc-cyan);
}
.marca-evento{
  font-family:var(--datos);font-weight:700;font-size:clamp(13px,3vw,20px);
  letter-spacing:.1em;text-transform:uppercase;color:var(--wc-ink);
  background:var(--wc-white);border:var(--linea) solid var(--wapuu-navy);
  padding:10px 22px;border-radius:999px;
}
.titulazo{
  font-family:var(--display);font-weight:800;line-height:.9;
  font-size:clamp(38px,10.4vw,118px);color:var(--wapuu-navy);letter-spacing:-.015em;
  text-shadow:6px 6px 0 var(--wc-yellow);margin:clamp(8px,2vh,20px) 0;max-width:100%;
}
.desfile{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(8px,2vh,20px);}
.desfile img{
  width:clamp(60px,15vw,112px);aspect-ratio:1;border-radius:18px;max-width:100%;
  border:var(--linea) solid var(--wapuu-navy);box-shadow:0 5px 0 var(--wapuu-navy);
  animation:flota 3.4s ease-in-out infinite;
}
.desfile img:nth-child(2){animation-delay:.28s}
.desfile img:nth-child(3){animation-delay:.56s}
.desfile img:nth-child(4){animation-delay:.84s}
.desfile img:nth-child(5){animation-delay:1.12s}
@keyframes flota{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
.pulso{animation:pulso 1.9s ease-in-out infinite;}
@keyframes pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
#podio-atraccion{
  margin-top:clamp(14px,3vh,32px);display:flex;flex-direction:column;gap:8px;align-items:center;
  min-height:118px;justify-content:center;
}
.podio-fila{
  display:flex;align-items:center;gap:12px;background:var(--wc-white);
  border:3px solid var(--wapuu-navy);border-radius:999px;padding:6px 22px 6px 6px;
  font-weight:800;font-size:clamp(15px,3.2vw,21px);color:var(--wc-ink);max-width:92vw;
}
.podio-fila .mini-wapuu{width:38px;height:38px;border-radius:50%;}
.podio-fila .quien{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.medalla{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--datos);font-weight:700;color:var(--wapuu-navy);border:3px solid var(--wapuu-navy);}
.m1{background:var(--wapuu-gold)}
.m2{background:#DDE6EA}
.m3{background:var(--wapuu-orange)}
.podio-tiempo{font-family:var(--datos);font-weight:700;margin-left:auto;padding-left:10px;}
.esquina{position:absolute;}
.esquina-ii{left:0;top:0;width:112px;height:112px;}
.esquina-dd{right:14px;top:14px;}
#btn-pantalla-completa{
  width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.62);
  border:3px solid var(--wapuu-navy);color:var(--wapuu-navy);font-size:22px;line-height:1;
  display:grid;place-items:center;
}

/* ---------- selección ---------- */
.rejilla-wapuus{
  flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,2.4vw,20px);
  align-content:center;min-height:0;overflow-y:auto;
}
.rejilla-wapuus .carta:nth-child(5){grid-column:1 / -1;justify-self:center;width:min(52%,330px);}
.carta{
  background:var(--wc-white);border:var(--linea) solid var(--wapuu-navy);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:10px;display:flex;flex-direction:column;gap:8px;align-items:center;
  transition:transform .1s ease,box-shadow .1s ease;
}
.carta:active{transform:translateY(5px);box-shadow:0 1px 0 var(--wapuu-navy);}
.carta img{width:60%;max-width:100%;aspect-ratio:1;border-radius:14px;display:block;}
.carta .nombre{font-family:var(--display);font-weight:800;font-size:clamp(16px,3.6vw,26px);color:var(--wapuu-navy);text-align:center;}

/* ---------- niveles ---------- */
.lista-niveles{flex:1;display:flex;flex-direction:column;gap:clamp(10px,2.2vh,20px);justify-content:flex-end;min-height:0;padding-bottom:clamp(10px,4vh,60px);}
.nivel-btn{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  background:var(--wc-white);border:var(--linea) solid var(--wapuu-navy);border-radius:var(--radio);
  box-shadow:var(--sombra);padding:clamp(14px,2.6vh,26px) 22px;text-align:left;
  transition:transform .1s ease,box-shadow .1s ease;
}
.nivel-btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--wapuu-navy);}
.nivel-icono{
  width:64px;height:64px;border-radius:14px;border:3px solid var(--wapuu-navy);
  display:grid;gap:2px;padding:5px;background:var(--wc-cyan-pale);
}
.nivel-icono i{background:var(--wapuu-navy);border-radius:2px;opacity:.85;}
.nivel-nombre{font-family:var(--display);font-weight:800;font-size:clamp(22px,5vw,34px);color:var(--wapuu-navy);}
.nivel-detalle{font-weight:700;font-size:clamp(14px,3vw,19px);color:var(--wc-ink);opacity:.8;}
.nivel-tiempo{font-family:var(--datos);font-weight:700;font-size:clamp(18px,4vw,28px);color:var(--wapuu-red);}

/* ---------- cuenta regresiva ---------- */
#p-cuenta{justify-content:center;align-items:center;gap:clamp(14px,3vh,30px);}
#cuenta-img{width:min(78vw,44dvh);max-width:100%;aspect-ratio:1;border-radius:var(--radio);
  border:var(--linea) solid var(--wapuu-navy);box-shadow:var(--sombra);}
#cuenta-num{
  font-family:var(--display);font-weight:800;font-size:clamp(70px,22vw,180px);color:var(--wapuu-navy);
  line-height:1;text-shadow:8px 8px 0 var(--wc-yellow);
}
.late{animation:late .6s ease-out;}
@keyframes late{from{transform:scale(.45);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- juego ---------- */
#p-juego{padding:0;gap:0;grid-template-rows:auto 1fr auto auto;grid-template-columns:minmax(0,1fr);touch-action:none;}
#p-juego.activa{display:grid;}
.hud{
  background:var(--wc-blue);border-bottom:var(--linea) solid var(--wapuu-navy);
  display:flex;align-items:center;gap:10px;min-width:0;padding:10px clamp(12px,3vw,22px);
}
.chip{
  background:var(--wc-white);border:3px solid var(--wapuu-navy);border-radius:14px;
  padding:6px 14px;display:flex;flex-direction:column;align-items:center;line-height:1;
}
.chip .etiqueta{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--wc-ink);opacity:.7;}
.chip .valor{font-family:var(--datos);font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(22px,5.4vw,34px);color:var(--wapuu-green);}
#chip-marca{padding:8px 16px;}
#chip-marca .valor{font-family:var(--display);color:var(--wapuu-navy);font-size:clamp(18px,4vw,26px);}
#chip-tiempo{margin-left:auto;}
#chip-tiempo.alerta .valor{color:var(--wapuu-red-lt);animation:tic .9s steps(2,end) infinite;}
@keyframes tic{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
#chip-movs .valor{color:var(--wc-ink);}

.zona-tablero{display:grid;place-items:center;min-height:0;min-width:0;padding:clamp(8px,2vh,20px) 16px;position:relative;}
#tablero{
  position:relative;width:min(90vw,54dvh);max-width:100%;aspect-ratio:1;
  border:var(--linea) solid var(--wapuu-navy);border-radius:14px;overflow:hidden;
  background:var(--wc-cyan-pale);touch-action:none;
}
#guia{position:absolute;inset:0;background-image:var(--img-actual);background-size:100% 100%;opacity:.13;}
#rejilla{position:absolute;inset:0;display:grid;}
.casilla{border:1px dashed rgba(4,31,51,.35);background-image:var(--img-actual);background-size:0;position:relative;}
.casilla.llena{border:1px solid rgba(4,31,51,.5);background-size:var(--bg-size);}
.casilla.pop{animation:pop .26s cubic-bezier(.2,1.5,.4,1);z-index:2;}
@keyframes pop{0%{transform:scale(1.18)}60%{transform:scale(.96)}100%{transform:scale(1)}}
.casilla.objetivo{box-shadow:inset 0 0 0 4px var(--wapuu-gold);}
#aviso-tablero{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.8);
  font-family:var(--display);font-weight:800;font-size:clamp(28px,7.4vw,58px);color:var(--wapuu-navy);
  background:var(--wc-yellow);border:var(--linea) solid var(--wapuu-navy);border-radius:20px;
  padding:10px 26px;opacity:0;pointer-events:none;z-index:5;white-space:nowrap;
}
#aviso-tablero.ver{animation:aviso 1.2s ease-out;}
@keyframes aviso{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}

.bandeja-wrap{position:relative;min-width:0;overflow:hidden;height:var(--tray-h);border-top:var(--linea) solid var(--wapuu-navy);background:var(--wc-blue);}
#bandeja{
  height:100%;display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,var(--pz));
  gap:10px;align-content:center;justify-content:start;
  padding:10px 56px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;scrollbar-width:none;
}
#bandeja::-webkit-scrollbar{display:none;}
.pieza{
  width:var(--pz);height:var(--pz);border-radius:8px;border:3px solid var(--wapuu-navy);
  background-image:var(--img-actual);background-repeat:no-repeat;touch-action:none;cursor:grab;
  box-shadow:0 3px 0 rgba(4,31,51,.55);
}
.pieza.tomada{opacity:.22;}
.pieza.fantasma{
  position:fixed;left:0;top:0;z-index:60;pointer-events:none;border-width:var(--linea);
  box-shadow:0 14px 26px rgba(4,31,51,.45);border-radius:10px;
}
.flecha-bandeja{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:78px;border-radius:12px;
  background:var(--wc-white);border:3px solid var(--wapuu-navy);color:var(--wapuu-navy);
  font-size:26px;font-weight:800;display:grid;place-items:center;z-index:3;
}
.flecha-bandeja[hidden]{display:none;}
#flecha-izq{left:5px;} #flecha-der{right:5px;}
.pie-juego{display:flex;justify-content:center;padding:12px 0 16px;background:var(--wc-blue);}

/* ---------- resultado ---------- */
#p-resultado{justify-content:center;align-items:center;text-align:center;}
#resultado-img{width:min(56vw,30dvh);max-width:100%;aspect-ratio:1;border-radius:var(--radio);
  border:var(--linea) solid var(--wapuu-navy);box-shadow:var(--sombra);}
.marcador{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.marcador .caja{
  background:var(--wc-white);border:var(--linea) solid var(--wapuu-navy);border-radius:18px;
  padding:12px 24px;min-width:132px;
}
.marcador .caja .etiqueta{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.7;}
.marcador .caja .valor{font-family:var(--datos);font-weight:700;font-size:clamp(24px,6vw,40px);color:var(--wapuu-navy);font-variant-numeric:tabular-nums;}

/* ---------- enviar ---------- */
#p-enviar{gap:10px;}
.campo{
  background:var(--wc-white);border:var(--linea) solid var(--wapuu-navy);border-radius:16px;
  padding:8px 16px;display:flex;flex-direction:column;gap:2px;text-align:left;
}
.campo.enfocado{box-shadow:0 0 0 5px var(--wapuu-gold);}
.campo .etiqueta{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.72;}
.campo .contenido{font-family:var(--display);font-weight:800;font-size:clamp(24px,5.6vw,36px);min-height:1.2em;color:var(--wapuu-navy);word-break:break-word;}
.campo .contenido.vacio-hint::before{content:attr(data-hint);opacity:.35;}
.cursor{display:inline-block;width:3px;height:1em;background:var(--wapuu-navy);vertical-align:-.14em;animation:parpadeo 1s steps(2,end) infinite;}
@keyframes parpadeo{50%{opacity:0}}
#teclado{display:flex;flex-direction:column;gap:7px;margin-top:auto;}
.fila-teclas{display:flex;gap:6px;justify-content:center;}
.tecla{
  flex:1 1 0;min-width:0;height:clamp(54px,7.2dvh,74px);border-radius:12px;
  background:var(--wc-white);border:3px solid var(--wapuu-navy);box-shadow:0 4px 0 var(--wapuu-navy);
  font-family:var(--display);font-weight:800;font-size:clamp(17px,4vw,24px);color:var(--wapuu-navy);
  display:grid;place-items:center;touch-action:manipulation;
}
.tecla:active{transform:translateY(3px);box-shadow:0 1px 0 var(--wapuu-navy);}
.tecla.ancha{flex:2.4 1 0;font-size:clamp(13px,3vw,17px);}
.tecla.accion{background:var(--wc-yellow);}
#aviso-envio{min-height:26px;text-align:center;font-weight:800;color:var(--wapuu-red);margin:0;}