/* ============================================================
   NIVEL 3 — "¡Atrapa a Bryan!"
   ============================================================ */

/* --- las tres vidas (corazones) --- */
.vidas{
  display:flex; justify-content:center; gap:7px; margin-top:12px;
  font-size:17px; line-height:1;
}
.vidas span{
  color:var(--rojo);
  transition:color .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
}
.vidas span.gastado{ color:var(--linea); transform:scale(.78); }
.vidas span.brinca{ animation:brinca-corazon .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes brinca-corazon{ 0%{transform:scale(1)} 45%{transform:scale(1.55)} 100%{transform:scale(.78)} }

/* al atraparlo se le devuelven todas: ella ganó */
.vidas span.gana{ color:var(--rojo); transform:scale(1); animation:gana-corazon .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes gana-corazon{ 0%{transform:scale(.78)} 55%{transform:scale(1.5)} 100%{transform:scale(1)} }

/* --- la cancha donde huye --- */
.cancha{
  position:relative;
  width:100%; height:340px;
  margin:16px auto 0;
  border:1.5px dashed var(--linea);
  border-radius:16px;
  background:radial-gradient(120% 90% at 50% 0%, #FFF6F7 0%, #FFFFFF 70%);
  overflow:hidden;
  touch-action:none;              /* que no haga scroll al perseguirlo */
  cursor:crosshair;
  user-select:none; -webkit-user-select:none;
}
.cancha.atrapado{ border-style:solid; border-color:var(--rosa-medio); }

/* ============================================================
   EL MUÑEQUITO
   .bryan  → lo mueve el JS (posición)
   .cuerpo → se voltea a izquierda/derecha
   .figura → brinca y respira
   ============================================================ */
.bryan{
  position:absolute; top:0; left:0;
  width:74px; height:112px;
  padding:0; border:0; background:none;
  cursor:pointer;
  will-change:transform;
  z-index:2;
}
.bryan .cuerpo{ position:absolute; inset:0; }
.bryan .figura{
  position:absolute; inset:0;
  animation:respira 3.2s ease-in-out infinite;
  transform-origin:center bottom;
}
@keyframes respira{ 0%,100%{ transform:translateY(0) scaleY(1) } 50%{ transform:translateY(-2px) scaleY(1.015) } }

/* --- cabeza (aquí va su foto) --- */
.bryan .cabeza{
  position:absolute; left:15px; top:0;
  width:44px; height:44px; border-radius:50%;
  background:var(--rosa-suave);
  box-shadow:0 0 0 3px var(--rojo), 0 6px 14px rgba(225,29,72,.25);
  z-index:4;
  transition:box-shadow .3s ease;
}
.bryan .cabeza img, .bryan .cabeza svg{
  display:block; width:100%; height:100%;
  border-radius:50%; object-fit:cover;
  pointer-events:none;
}

/* --- torso --- */
.bryan .torso{
  position:absolute; left:21px; top:42px;
  width:32px; height:34px;
  background:linear-gradient(180deg,#F7CFAA,#EFBE93);
  border-radius:13px 13px 9px 9px;
  z-index:3;
}
/* ombliguito */
.bryan .torso::after{
  content:""; position:absolute; left:50%; top:22px; transform:translateX(-50%);
  width:3px; height:3px; border-radius:50%; background:rgba(160,110,70,.5);
}

/* --- los boxers --- */
.bryan .boxer{
  position:absolute; left:19px; top:70px;
  width:36px; height:21px;
  background:var(--rojo);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath d='M5.5 8S2 6 2 4.1a1.2 1.2 0 0 1 3.5-.6A1.2 1.2 0 0 1 9 4.1C9 6 5.5 8 5.5 8z' fill='rgba(255,255,255,.42)'/%3E%3C/svg%3E");
  border-radius:6px 6px 8px 8px;
  z-index:5;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.28);
}

/* --- brazos y piernas --- */
.bryan .brazo, .bryan .pierna{
  position:absolute;
  background:linear-gradient(180deg,#F7CFAA,#EDBA8E);
  transform-origin:top center;
  z-index:2;
}
.bryan .brazo{ width:8px; height:30px; top:46px; border-radius:5px; }
.bryan .brazo.izq{ left:11px; transform:rotate(16deg); }
.bryan .brazo.der{ left:55px; transform:rotate(-16deg); }

.bryan .pierna{ width:11px; height:24px; top:88px; border-radius:5px 5px 6px 6px; }
.bryan .pierna.izq{ left:24px; transform:rotate(-5deg); }
.bryan .pierna.der{ left:39px; transform:rotate(5deg); }
/* piecitos */
.bryan .pierna::after{
  content:""; position:absolute; bottom:-2px; left:-2px;
  width:14px; height:7px; border-radius:6px 7px 4px 4px;
  background:#EFBE93;
}

/* ---------- corriendo ---------- */
.bryan.huyendo .figura{ animation:brinquito .26s ease-in-out infinite; }
@keyframes brinquito{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-4px) } }

.bryan.huyendo .brazo.izq{ animation:brazo-a .26s ease-in-out infinite; }
.bryan.huyendo .brazo.der{ animation:brazo-b .26s ease-in-out infinite; }
.bryan.huyendo .pierna.izq{ animation:pierna-a .26s ease-in-out infinite; }
.bryan.huyendo .pierna.der{ animation:pierna-b .26s ease-in-out infinite; }
@keyframes brazo-a{ 0%,100%{ transform:rotate(34deg) } 50%{ transform:rotate(-38deg) } }
@keyframes brazo-b{ 0%,100%{ transform:rotate(-38deg) } 50%{ transform:rotate(34deg) } }
@keyframes pierna-a{ 0%,100%{ transform:rotate(-30deg) } 50%{ transform:rotate(32deg) } }
@keyframes pierna-b{ 0%,100%{ transform:rotate(32deg) } 50%{ transform:rotate(-30deg) } }

.bryan.huyendo .cabeza{ box-shadow:0 0 0 3px var(--rojo-hondo), 0 8px 18px rgba(225,29,72,.38); }

/* la gotita de sudor */
.bryan .gota{
  position:absolute; top:-5px; right:-6px;
  width:12px; height:16px;
  background:#7DD3FC;
  clip-path:polygon(50% 0%, 100% 62%, 78% 100%, 22% 100%, 0% 62%);
  opacity:0; transform:scale(.4);
  transition:opacity .2s ease, transform .2s ease;
  z-index:6;
}
.bryan.huyendo .gota{ opacity:1; animation:gotea .8s ease-in-out infinite; }
@keyframes gotea{
  0%{ transform:translateY(0) scale(1) }
  50%{ transform:translateY(4px) scale(1.12) }
  100%{ transform:translateY(0) scale(1) }
}

/* rayitas de velocidad — el JS gira el contenedor hacia atrás del movimiento */
.bryan .rayas{
  position:absolute; inset:0;
  transform:rotate(var(--angulo, 0deg));
  opacity:0; transition:opacity .18s ease;
  pointer-events:none;
}
.bryan.huyendo .rayas{ opacity:1; }
.bryan .rayas i{
  position:absolute; left:-26px; height:3px; border-radius:2px;
  background:var(--rosa-medio);
}
.bryan .rayas i:nth-child(1){ top:34%; width:20px; animation:raya .45s linear infinite; }
.bryan .rayas i:nth-child(2){ top:50%; width:28px; animation:raya .45s linear infinite .1s; }
.bryan .rayas i:nth-child(3){ top:66%; width:16px; animation:raya .45s linear infinite .2s; }
@keyframes raya{ 0%{ opacity:0; transform:translateX(6px) } 40%{ opacity:1 } 100%{ opacity:0; transform:translateX(-8px) } }

/* ---------- atrapado ---------- */
.bryan.atrapado{ cursor:default; }
.bryan.atrapado .figura{ animation:risita .5s ease-in-out 3; }
.bryan.atrapado .brazo.izq{ transform:rotate(158deg); transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.bryan.atrapado .brazo.der{ transform:rotate(-158deg); transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.bryan.atrapado .pierna.izq{ transform:rotate(-2deg); }
.bryan.atrapado .pierna.der{ transform:rotate(2deg); }
.bryan.atrapado .cabeza{
  box-shadow:0 0 0 4px var(--rojo), 0 0 0 11px var(--rosa-suave), 0 8px 20px rgba(225,29,72,.3);
}
@keyframes risita{
  0%,100%{ transform:rotate(0) scale(1) }
  25%{ transform:rotate(-6deg) scale(1.04) }
  75%{ transform:rotate(6deg) scale(1.04) }
}

/* corazoncitos que brotan al atraparlo */
.corazoncito{
  position:absolute; left:50%; top:40%;
  font-size:16px; line-height:1; color:var(--rojo);
  pointer-events:none; z-index:7;
  animation:brota .9s ease-out forwards;
}
@keyframes brota{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.3) }
  25%{ opacity:1 }
  100%{ opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) }
}

/* --- el globo de texto --- */
.globo{
  position:absolute; left:50%; top:14px; transform:translateX(-50%) translateY(-6px);
  max-width:88%;
  background:var(--tinta); color:#fff;
  font-size:13.5px; line-height:1.35; font-weight:500;
  padding:9px 14px; border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.16);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
  z-index:8;
}
.globo::after{
  content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:var(--tinta); border-bottom:0;
}
.globo.visible{ opacity:1; transform:translateX(-50%) translateY(0); }
.globo.tierno{ background:var(--rojo); }
.globo.tierno::after{ border-top-color:var(--rojo); }

#rendirse[hidden]{ display:none; }

@media (max-width:400px){
  .cancha{ height:300px; }
}

@media (prefers-reduced-motion: reduce){
  .bryan .figura, .bryan .brazo, .bryan .pierna, .bryan .rayas i, .bryan .gota{ animation:none !important; }
}