/* ═══════════════════════════════════════════════════════════
   MUNDIAL 2026 — Tema festivo para Full Entretenimiento Colombia
   v3.2 — Rondo realista con acciones variadas
   ═══════════════════════════════════════════════════════════ */

:root{
  --m26-amarillo:#FFD200;
  --m26-azul:#0033A0;
  --m26-rojo:#CE1126;
  --m26-verde:#1a9e4b;
  --m26-oro:#F4C430;
  --m26-cesped:#0d6b2e;
}

.m26-overlay{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.m26-cesped{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.m26-cesped::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0px, transparent 40px, rgba(13,107,46,.06) 40px, rgba(13,107,46,.06) 80px),
    linear-gradient(180deg, var(--m26-cesped) 0%, transparent 4px);
  height:6px;
  top:auto;
  bottom:0;
  opacity:.7;
}

.m26-bunting{
  position:fixed;
  top:0; left:0; right:0;
  height:40px;
  z-index:3;
  pointer-events:none;
  display:flex;
  justify-content:center;
  gap:0;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));
}
.m26-bunting i{
  width:0; height:0;
  border-left:13px solid transparent;
  border-right:13px solid transparent;
  border-top:24px solid var(--c,var(--m26-amarillo));
  transform-origin:top center;
  animation:m26-sway 3.2s ease-in-out infinite;
  animation-delay:var(--d,0s);
  opacity:.92;
}
@keyframes m26-sway{
  0%,100%{ transform:rotate(-4deg) translateY(0); }
  50%    { transform:rotate(4deg)  translateY(2px); }
}
.m26-bunting::before{
  content:"";
  position:absolute;
  top:1px; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
}

.m26-balones{
  position:absolute;
  inset:0;
  z-index:2;
}

.m26-flash{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.10), transparent 9%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.08), transparent 8%),
    radial-gradient(circle at 55% 75%, rgba(244,196,48,.10), transparent 10%);
  animation:m26-flashes 6s steps(1) infinite;
  opacity:0;
}
@keyframes m26-flashes{
  0%,97%{opacity:0;} 98%{opacity:1;} 100%{opacity:0;}
}

.m26-badge{
  position:fixed;
  left:14px; bottom:14px;
  z-index:4;
  display:flex; align-items:center; gap:7px;
  padding:7px 13px;
  font:600 12px/1 'Segoe UI',system-ui,sans-serif;
  letter-spacing:.5px;
  color:#1a1305;
  background:linear-gradient(135deg,var(--m26-oro),var(--m26-amarillo));
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5);
  pointer-events:none;
  animation:m26-pop .6s cubic-bezier(.18,.89,.32,1.28) both;
}
.m26-badge b{ font-weight:800; }
.m26-badge .m26-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--m26-rojo);
  box-shadow:0 0 0 0 rgba(206,17,38,.6);
  animation:m26-pulse 1.6s ease-out infinite;
}
@keyframes m26-pulse{
  0%{box-shadow:0 0 0 0 rgba(206,17,38,.55);}
  70%{box-shadow:0 0 0 9px rgba(206,17,38,0);}
  100%{box-shadow:0 0 0 0 rgba(206,17,38,0);}
}
@keyframes m26-pop{ from{transform:scale(.6);opacity:0;} to{transform:scale(1);opacity:1;} }

/* ═══ JUGADOR ═══ */
.m26-player-wrap{
  position:fixed;
  z-index:10;
  pointer-events:none;
  width:75px;
  height:115px;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.55));
  transition:opacity .35s;
}
.m26-player-wrap.flip{ transform:scaleX(-1); }

.m26-player-wrap.appear{
  animation:m26-appear .4s cubic-bezier(.18,.89,.32,1.28) forwards;
}
.m26-player-wrap.prepare{
  animation:m26-prepare .45s ease-in forwards;
}
.m26-player-wrap.kick{
  animation:m26-kick .28s cubic-bezier(.25,.1,.25,1) forwards;
}
.m26-player-wrap.head{
  animation:m26-head .55s ease-out forwards;
}
.m26-player-wrap.bicycle{
  animation:m26-bicycle .5s ease-out forwards;
}
.m26-player-wrap.taquito{
  animation:m26-taquito .4s ease-out forwards;
}
.m26-player-wrap.vanish{
  opacity:0; transform:scale(.3); transition:all .4s ease-in;
}

@keyframes m26-appear{
  0%{opacity:0;transform:scale(.2) translateY(25px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
@keyframes m26-prepare{
  0%{transform:rotate(0deg) translateY(0);}
  100%{transform:rotate(-15deg) translateY(-12px);}
}
@keyframes m26-kick{
  0%{transform:rotate(-15deg) translateY(-12px);}
  50%{transform:rotate(22deg) translateY(10px);}
  100%{transform:rotate(16deg) translateY(6px);}
}
@keyframes m26-head{
  0%{transform:translateY(0);}
  30%{transform:translateY(-32px);}
  60%{transform:translateY(-20px) rotate(-10deg);}
  100%{transform:translateY(0) rotate(0deg);}
}
@keyframes m26-bicycle{
  0%{transform:rotate(0deg) translateY(0);}
  20%{transform:rotate(-35deg) translateY(-22px);}
  50%{transform:rotate(18deg) translateY(-12px);}
  100%{transform:rotate(0deg) translateY(0);}
}
@keyframes m26-taquito{
  0%{transform:rotate(0deg);}
  30%{transform:rotate(-8deg) translateY(-5px);}
  60%{transform:rotate(5deg) translateY(0);}
  100%{transform:rotate(0deg);}
}

/* Pierna */
.m26-kick-leg{
  transform-origin:35px 82px;
  transition:transform .3s cubic-bezier(.25,.1,.25,1);
}
.m26-player-wrap.prepare .m26-kick-leg,
.m26-player-wrap.bicycle .m26-kick-leg{ transform:rotate(-72deg); }
.m26-player-wrap.kick .m26-kick-leg{ transform:rotate(52deg); }
.m26-player-wrap.taquito .m26-kick-leg{ transform:rotate(-35deg); }

/* Brazos */
.m26-arm-left,.m26-arm-right{
  transform-origin:26px 50px;
  transition:transform .3s ease-out;
}
.m26-arm-right{ transform-origin:49px 50px; }
.m26-player-wrap.prepare .m26-arm-left,
.m26-player-wrap.bicycle .m26-arm-left{ transform:rotate(-42deg); }
.m26-player-wrap.prepare .m26-arm-right,
.m26-player-wrap.bicycle .m26-arm-right{ transform:rotate(48deg); }
.m26-player-wrap.kick .m26-arm-left{ transform:rotate(38deg); }
.m26-player-wrap.kick .m26-arm-right{ transform:rotate(-52deg); }

/* Balón */
.m26-the-ball{
  position:fixed;
  z-index:20;
  pointer-events:none;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.7));
  will-change:left,top,transform;
}
.m26-the-ball svg{
  animation:m26-spin .13s linear infinite;
}
@keyframes m26-spin{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

/* Polvo */
.m26-dust{
  position:fixed;
  z-index:12;
  pointer-events:none;
}
.m26-dust-dot{
  position:absolute;
  width:3px;
  height:3px;
  background:#c8b896;
  border-radius:50%;
  opacity:0;
  transition:all .5s ease-out;
}

/* GOOOL */
.m26-goal-text{
  position:fixed;
  z-index:30;
  pointer-events:none;
  font:900 72px 'Arial Black',Impact,sans-serif;
  color:#FFD200;
  text-shadow:0 0 40px #FFD200,0 0 80px #FF8C00,0 0 120px #FF4500,4px 4px 0 #0033A0;
  letter-spacing:6px;
  left:50%;
  top:40%;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .5s cubic-bezier(.18,.89,.32,1.28);
}
.m26-goal-text.show{ transform:translate(-50%,-50%) scale(1); }
.m26-goal-text.fadeout{
  transform:translate(-50%,-50%) scale(1.8);
  opacity:0;
  transition:all .8s ease-in;
}

/* Confeti */
.m26-confeti{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:none;
}

/* Cinta login */
.m26-login-cinta{
  display:inline-flex; align-items:center; gap:8px;
  margin:0 auto 4px;
  padding:6px 14px;
  font:700 11px/1 'Segoe UI',system-ui,sans-serif;
  letter-spacing:1.5px; text-transform:uppercase;
  color:#fff;
  background:linear-gradient(90deg,var(--m26-amarillo),var(--m26-azul),var(--m26-rojo));
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}

/* Accesibilidad */
@media (prefers-reduced-motion:reduce){
  .m26-player-wrap,.m26-player-wrap.appear,.m26-player-wrap.prepare,
  .m26-player-wrap.kick,.m26-player-wrap.head,.m26-player-wrap.bicycle,
  .m26-player-wrap.taquito,.m26-bunting i,.m26-flash,.m26-badge,
  .m26-badge .m26-dot,.m26-the-ball svg{
    animation:none!important; transition:none!important;
  }
  .m26-player-wrap{opacity:.7;}
}

/* Fix centrado login */
.auth-wrap{
  max-width:100%!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.auth-card{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Responsive */
@media (max-width:560px){
  .m26-bunting i{
    border-left-width:10px;
    border-right-width:10px;
    border-top-width:19px;
  }
  .m26-badge{ font-size:11px; padding:6px 11px; }
  .m26-player-wrap{ width:55px; height:85px; }
  .m26-goal-text{ font-size:44px; }
}