/* Monigotes (cabezón con foto + cuerpecillo animado), parejas y desfile. */
/* ── Monigotes: cabezón con foto + cuerpecillo ──────────── */
.mono {
  --s: 40px; --c: var(--gold); --d: 0ms;
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  width: calc(var(--s) * 1.3);
}
.mono__head {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: var(--s); height: var(--s); border-radius: 50%; background: #fff;
  border: max(2px, calc(var(--s) * .07)) solid var(--ink);
  font-size: calc(var(--s) * .58); line-height: 1; transform-origin: 50% 90%;
  animation: mono-wobble 1.8s ease-in-out var(--d) infinite;
}
.mono__head > span, .mono__head > img { grid-area: 1 / 1; }
.mono__head > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mono__crown {
  position: absolute; top: calc(var(--s) * -.46); left: 50%; translate: -50% 0; rotate: -10deg;
  font-size: calc(var(--s) * .5); font-style: normal;
}
.mono__body { position: relative; width: calc(var(--s) * .9); height: calc(var(--s) * .92); margin-top: calc(var(--s) * -.1); }
.mono__torso {
  position: absolute; z-index: 1; left: 50%; top: 0; translate: -50% 0;
  width: calc(var(--s) * .48); height: calc(var(--s) * .52); background: var(--c);
  border: max(2px, calc(var(--s) * .06)) solid var(--ink); border-radius: calc(var(--s) * .2) calc(var(--s) * .2) calc(var(--s) * .12) calc(var(--s) * .12);
}
.mono__arm, .mono__leg {
  position: absolute; display: block; border-radius: 99px; transform-origin: 50% 10%;
  border: max(1.5px, calc(var(--s) * .05)) solid var(--ink);
}
.mono__arm { top: calc(var(--s) * .05); width: calc(var(--s) * .15); height: calc(var(--s) * .42); background: var(--c); }
.mono__arm--l { left: calc(50% - var(--s) * .33); rotate: 20deg; }
.mono__arm--r { left: calc(50% + var(--s) * .18); rotate: -20deg; }
.mono__leg { top: calc(var(--s) * .44); width: calc(var(--s) * .16); height: calc(var(--s) * .42); background: var(--ink); }
.mono__leg--l { left: calc(50% - var(--s) * .2); }
.mono__leg--r { left: calc(50% + var(--s) * .04); }
.mono__name {
  margin-top: 1px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--ink); color: #fff; font: 800 11px var(--font-body);
}
.mono--bday .mono__name { background: linear-gradient(135deg, var(--gold), var(--pink)); font-size: 12px; }

.mono--idle { animation: mono-bob 1.8s ease-in-out var(--d) infinite; }
.mono--idle .mono__arm--l { animation: arm-sway-l 1.8s ease-in-out var(--d) infinite; }
.mono--idle .mono__arm--r { animation: arm-sway-r 1.8s ease-in-out var(--d) infinite; }

.mono--walk { animation: mono-step .5s ease-in-out var(--d) infinite; }
.mono--walk .mono__leg--l, .mono--walk .mono__arm--r { animation: swing-a .5s ease-in-out var(--d) infinite alternate; }
.mono--walk .mono__leg--r, .mono--walk .mono__arm--l { animation: swing-b .5s ease-in-out var(--d) infinite alternate; }

.mono--wave { animation: mono-bob 1.4s ease-in-out var(--d) infinite; }
.mono--wave .mono__arm--r { animation: wave .45s ease-in-out var(--d) infinite alternate; }

.mono--dance { animation: mono-hop .6s ease-in-out var(--d) infinite alternate; }
.mono--dance .mono__arm--l { animation: dance-l .3s ease-in-out var(--d) infinite alternate; }
.mono--dance .mono__arm--r { animation: dance-r .3s ease-in-out var(--d) infinite alternate; }
.mono--dance .mono__leg--l { animation: swing-a .3s ease-in-out var(--d) infinite alternate; }

/* En el mapa */
.walker { position: absolute; transform: translate(-50%, -86%); }
.walker--left .mono__body { scale: -1 1; }
.walker--parked { left: 70px; top: 4px; }
.walker--stale { opacity: .5; filter: grayscale(.7); }
.walker--me .mono__name { background: var(--mint); }
.walker--bday { filter: drop-shadow(0 0 8px rgba(246,196,83,.9)); }
.pair { position: absolute; transform: translate(-50%, 4px); display: flex; }
.pair--locked { opacity: .6; }
.crew {
  position: absolute; transform: translate(-50%, 8px); display: flex; padding: 3px 6px 3px 10px;
  background: #fff; border-radius: 999px; border: 2px solid var(--ink);
}
.crew .av { margin-left: -6px; box-shadow: 0 0 0 2px var(--c); }
.crew__more { font-size: 11px; font-weight: 800; align-self: center; padding-left: 4px; }
.sticker {
  position: absolute; transform: translate(-50%, -50%) rotate(-8deg); font-size: 28px; line-height: 1;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 3px 0 rgba(42,22,56,.35));
  animation: float 4s ease-in-out infinite;
}

/* En las tarjetas y la celebración */
.pairline { display: flex; align-items: flex-end; gap: 4px; margin: 12px 0 2px; }
.pairline__amp { font: 700 18px var(--font-display); color: var(--muted); align-self: center; }
.pairline--empty { color: var(--muted); font-size: 14px; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--plum); font-weight: 800; text-decoration: underline; }
.pairpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.ov__pair { display: flex; justify-content: center; gap: 18px; margin: 8px 0 12px; }

/* Desfile de la pantalla de entrada */
.ob { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
.parade { position: fixed; left: 0; right: 0; bottom: 0; height: 110px; overflow: hidden; pointer-events: none; }
.parade__w { position: absolute; bottom: 10px; left: 0; animation: stroll linear infinite; }
.ob__who { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ob__who button {
  border: 2px solid rgba(255,255,255,.2); border-radius: var(--radius); background: rgba(255,255,255,.08);
  padding: 16px 4px 10px; display: grid; place-items: center;
}
.ob__who button:active { background: var(--gold); }

@keyframes mono-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes mono-step { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes mono-hop { from { translate: 0 0; rotate: -6deg; } to { translate: 0 -7px; rotate: 6deg; } }
@keyframes mono-wobble { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes arm-sway-l { 0%, 100% { rotate: 20deg; } 50% { rotate: 30deg; } }
@keyframes arm-sway-r { 0%, 100% { rotate: -20deg; } 50% { rotate: -30deg; } }
@keyframes swing-a { from { rotate: 30deg; } to { rotate: -30deg; } }
@keyframes swing-b { from { rotate: -30deg; } to { rotate: 30deg; } }
@keyframes wave { from { rotate: -130deg; } to { rotate: -175deg; } }
@keyframes dance-l { from { rotate: 150deg; } to { rotate: 110deg; } }
@keyframes dance-r { from { rotate: -110deg; } to { rotate: -150deg; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes stroll { from { transform: translateX(-80px); } to { transform: translateX(calc(100vw + 20px)); } }