/* ============================================================
   LAN PARTY Z — Banner anime  (extraido de Design2026/banner/lanparty-banner.html)
   Escala solo a cualquier ancho vía container query units.
   Clases renombradas para no chocar con lanparty-ui.css:
   .lpz-badge -> .lpzh-badge · .lpz-chip -> .lpzh-chip (+ .w/.c/.g)
   .lpz-bar -> .lpzh-bar · .lpz-spark -> .lpzh-spark (+ .s1..s5) · .lpz-lead -> .lpzh-lead
   ============================================================ */

/* --- Marco responsivo: conserva la relación 1920x680 --- */
/* Full-bleed: rompe el padding de .content-page/.container-fluid para ocupar 100% del viewport */
.lpz-frame{
  container-type: inline-size;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  aspect-ratio: 1920 / 680;
  overflow: hidden;
  border-radius: 0;
}
.lpz-frame .lpz{
  width: 1920px; height: 680px;
  transform-origin: top left;
}

/* ---------------------- Tokens de estilo --------------------- */
.lpz{
  --ink:#16224a;
  --sky-top:#20307a; --sky-mid:#5d86e0; --sky-low:#ffcf9e;
  --accent:#FF4E8B;  --accent2:#3DD6F5; --gold:#FFD23F;
  --ray:rgba(255,206,120,.5);
  --play:running;

  position: relative; overflow: hidden;
  font-family:'Zen Kaku Gothic New', sans-serif;
  background: linear-gradient(165deg,
    var(--sky-top) 0%, var(--sky-mid) 46%, #a9c8f2 66%, var(--sky-low) 100%);
}
@media (prefers-color-scheme: dark){
  .lpz:not([data-theme]){
    --sky-top:#0b0f30; --sky-mid:#1a2a66; --sky-low:#2a1550;
    --accent:#FF3DAE;  --accent2:#2DE2FF; --ray:rgba(120,90,255,.5);
  }
}
.lpz[data-theme="atardecer"]{
  --sky-top:#3a1e6e; --sky-mid:#b8407e; --sky-low:#ffb15a;
  --accent:#FFD23F;  --accent2:#6d4bd6; --ray:rgba(255,170,90,.55);
}
.lpz[data-theme="noche"]{
  --sky-top:#0b0f30; --sky-mid:#1a2a66; --sky-low:#2a1550;
  --accent:#FF3DAE;  --accent2:#2DE2FF; --ray:rgba(120,90,255,.5);
}
.lpz *{ box-sizing: border-box; }

/* ------------------------- Fondo ---------------------------- */
.lpz-rays{
  position:absolute; left:74%; top:46%; width:1700px; height:1700px;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    var(--ray) 0deg, var(--ray) 5.5deg, transparent 5.5deg, transparent 12deg);
  opacity:.55; animation:lpz-spin 90s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 0%,#000 42%,transparent 62%);
          mask:radial-gradient(circle,#000 0%,#000 42%,transparent 62%);
}
.lpz-cloud{
  position:absolute; background:rgba(255,255,255,.9); border-radius:60px;
  animation:lpz-cloud 9s ease-in-out infinite;
}
.lpz-cloud.a{ left:8%; top:16%; width:190px; height:66px;
  box-shadow:70px 14px 0 -6px rgba(255,255,255,.9),-60px 12px 0 -10px rgba(255,255,255,.85),0 0 0 5px rgba(22,34,74,.14); }
.lpz-cloud.b{ right:20%; top:9%; width:150px; height:52px; animation-delay:.8s;
  background:rgba(255,255,255,.82);
  box-shadow:56px 12px 0 -6px rgba(255,255,255,.82),-46px 10px 0 -9px rgba(255,255,255,.75); }
.lpz-tone{
  position:absolute; background-image:radial-gradient(circle,currentColor 1.7px,transparent 2.1px);
}
.lpz-tone.bl{ left:0; bottom:0; width:520px; height:340px; color:#16224a; opacity:.16;
  background-size:13px 13px;
  -webkit-mask:radial-gradient(120% 120% at 0% 100%,#000,transparent 62%);
          mask:radial-gradient(120% 120% at 0% 100%,#000,transparent 62%); }
.lpz-tone.tr{ right:0; top:0; width:460px; height:300px; color:#fff; opacity:.2;
  background-size:14px 14px;
  -webkit-mask:radial-gradient(120% 120% at 100% 0%,#000,transparent 60%);
          mask:radial-gradient(120% 120% at 100% 0%,#000,transparent 60%); }

/* ---------------------- Bloque de título -------------------- */
.lpz-left{
  position:absolute; left:88px; top:0; height:100%; width:1010px; z-index:6;
  display:flex; flex-direction:column; justify-content:center; gap:18px;
}
.lpz-tagrow{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.lpzh-badge{
  font-family:'Mochiy Pop One'; font-size:22px; color:#fff;
  background:var(--accent); padding:8px 20px; border-radius:40px;
  box-shadow:0 0 0 4px var(--ink), 0 6px 0 var(--ink); letter-spacing:1px;
}
.lpz-kata{
  font-family:'Mochiy Pop One'; font-size:20px; color:var(--ink);
  background:#fff; padding:7px 16px; border-radius:40px;
  box-shadow:0 0 0 4px var(--ink); letter-spacing:2px;
}
.lpz-title{
  display:flex; align-items:baseline; gap:10px; line-height:.86;
  transform:rotate(-2.5deg); transform-origin:left center;
}
.lpz-title .main, .lpz-title .z{
  font-family:'Mochiy Pop One'; color:#fff;
  -webkit-text-stroke:9px var(--ink); paint-order:stroke fill;
}
.lpz-title .main{ font-size:150px; letter-spacing:1px;
  filter:drop-shadow(7px 8px 0 var(--accent)) drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.lpz-title .z{ font-size:236px; color:var(--gold); -webkit-text-stroke-width:11px;
  display:inline-block; transform:translateY(24px) rotate(4deg);
  filter:drop-shadow(8px 9px 0 var(--accent2)) drop-shadow(0 8px 12px rgba(0,0,0,.35)); }

.lpz-chips{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.lpzh-chip{
  font-family:'Mochiy Pop One'; font-size:20px; padding:7px 18px; border-radius:40px;
  box-shadow:0 0 0 4px var(--ink); letter-spacing:1px;
}
.lpzh-chip.w{ color:var(--ink); background:#fff; }
.lpzh-chip.c{ color:#fff;       background:var(--accent2); }
.lpzh-chip.g{ color:var(--ink); background:var(--gold); }

.lpzh-lead{
  margin:6px 0 0; max-width:600px; font-weight:900; font-size:22px; line-height:1.4;
  color:#fff; text-shadow:2px 2px 0 rgba(22,34,74,.55), 0 2px 8px rgba(0,0,0,.4);
}

/* --------------------- Marco de Sid ------------------------- */
.lpz-right{
  position:absolute; right:150px; top:50%; transform:translateY(-50%);
  width:560px; height:560px; z-index:5;
}
.lpz-speed{
  position:absolute; left:50%; top:50%; width:900px; height:900px;
  transform:translate(-50%,-50%); opacity:.5; animation:lpz-spinrev 50s linear infinite;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(22,34,74,.22) 0deg, rgba(22,34,74,.22) .55deg, transparent 1.2deg, transparent 2.8deg);
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 42%,#000 58%,transparent 74%);
          mask:radial-gradient(circle,transparent 30%,#000 42%,#000 58%,transparent 74%);
}
.lpz-medallion{
  position:absolute; left:50%; top:50%; width:454px; height:454px;
  transform:translate(-50%,-50%); border-radius:50%; padding:16px; background:#fff;
  box-shadow:0 0 0 8px var(--ink), 0 22px 44px rgba(0,0,0,.4), 0 0 70px rgba(255,255,255,.35);
  animation:lpz-bob 5s ease-in-out infinite; animation-play-state:var(--play);
}
.lpz-photo{
  position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden;
  box-shadow:inset 0 0 0 4px var(--ink);
}
.lpz-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 26%; display:block; }
.lpz-photo::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 -46px 60px rgba(22,34,74,.32), inset 30px 26px 60px rgba(255,255,255,.14);
}
.lpz-nameplate{
  position:absolute; left:50%; bottom:-22px; transform:translateX(-50%) rotate(-3deg);
  background:var(--accent); border-radius:44px; padding:9px 30px; text-align:center; white-space:nowrap;
  box-shadow:0 0 0 5px var(--ink), 0 8px 0 var(--ink);
}
.lpz-nameplate .n{ font-family:'Mochiy Pop One'; color:#fff; font-size:34px; letter-spacing:5px; line-height:.95; -webkit-text-stroke:1px rgba(22,34,74,.4); }
.lpz-nameplate .s{ font-family:'Mochiy Pop One'; color:#fff; font-size:12px; letter-spacing:3px; margin-top:2px; opacity:.95; }

.lpzh-spark{
  position:absolute; background:#fff;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  animation:lpz-tw 3.4s ease-in-out infinite;
}
.lpzh-spark.s1{ left:2%;  top:14%;   width:44px; height:44px; filter:drop-shadow(0 0 8px rgba(255,255,255,.9)); }
.lpzh-spark.s2{ right:0;  top:36%;   width:30px; height:30px; background:var(--gold);    animation-delay:.5s; }
.lpzh-spark.s3{ left:8%;  bottom:8%; width:34px; height:34px;                             animation-delay:.3s; }
.lpzh-spark.s4{ right:12%;bottom:2%; width:24px; height:24px; background:var(--accent2);  animation-delay:.8s; }
.lpzh-spark.s5{ right:24%;top:4%;    width:20px; height:20px;                             animation-delay:.2s; }

.lpzh-bar{ position:absolute; left:0; right:0; bottom:0; height:14px; background:var(--accent); box-shadow:0 -4px 0 var(--ink); }

.lpz-credit{
  position:absolute; left:88px; bottom:36px; z-index:7;
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900; font-size:16px;
  text-decoration:none; color:#fff; background:rgba(22,34,74,.42);
  padding:7px 16px; border-radius:30px; box-shadow:0 0 0 3px rgba(255,255,255,.3);
  transition:box-shadow .15s, background .15s;
}
.lpz-credit span{ color:var(--accent2); font-family:'Mochiy Pop One'; }
.lpz-credit:hover{ box-shadow:0 0 0 3px var(--accent2); background:rgba(22,34,74,.62); }

/* ------------------------ Animaciones ----------------------- */
@keyframes lpz-spin    { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes lpz-spinrev { to { transform:translate(-50%,-50%) rotate(-360deg); } }
@keyframes lpz-tw  { 0%,100%{ transform:scale(.55) rotate(0);   opacity:.35; } 50%{ transform:scale(1) rotate(45deg); opacity:1; } }
@keyframes lpz-bob { 0%,100%{ transform:translate(-50%,-50%) translateY(0); } 50%{ transform:translate(-50%,-50%) translateY(-12px); } }
@keyframes lpz-cloud{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(22px); } }
@media (prefers-reduced-motion: reduce){ .lpz *{ animation:none !important; } }

/* ============================================================
   Versión móvil: el .lpz-frame desktop es un canvas fijo de
   1920x680 que la JS escala uniformemente — en móvil eso deja
   texto diminuto. Aquí se apila todo en columna, centrado, con
   tamaños propios (no escalados), en vez de encoger el diseño
   de escritorio.
   ============================================================ */
.lpz-mobile{ display:none; }

@media (max-width: 767.98px){
  .lpz-frame{ display:none; }

  .lpz-mobile{
    --ink:#16224a;
    --sky-top:#20307a; --sky-mid:#5d86e0; --sky-low:#ffcf9e;
    --accent:#FF4E8B; --accent2:#3DD6F5; --gold:#FFD23F;

    position:relative; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:12px;
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    padding:28px 20px 34px;
    font-family:'Zen Kaku Gothic New', sans-serif;
    background:linear-gradient(165deg, var(--sky-top) 0%, var(--sky-mid) 46%, #a9c8f2 66%, var(--sky-low) 100%);
  }
  @media (prefers-color-scheme: dark){
    .lpz-mobile{
      --sky-top:#0b0f30; --sky-mid:#1a2a66; --sky-low:#2a1550;
      --accent:#FF3DAE; --accent2:#2DE2FF;
    }
  }

  .lpz-mobile__tagrow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
  .lpz-mobile .lpzh-badge{ font-size:14px; padding:6px 14px; }
  .lpz-mobile .lpz-kata{ font-size:13px; padding:5px 12px; }

  .lpz-mobile__medallion{ display:flex; flex-direction:column; align-items:center; margin:4px 0 6px; }
  .lpz-mobile__photo{
    width:110px; height:110px; border-radius:50%; overflow:hidden; background:#fff; padding:6px;
    box-shadow:0 0 0 5px var(--ink), 0 10px 20px rgba(0,0,0,.35);
  }
  .lpz-mobile__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 26%; border-radius:50%; display:block; }
  .lpz-mobile__nameplate{
    margin-top:-12px; position:relative; z-index:1;
    background:var(--accent); border-radius:40px; padding:5px 20px; text-align:center; white-space:nowrap;
    box-shadow:0 0 0 4px var(--ink), 0 5px 0 var(--ink);
  }
  .lpz-mobile__nameplate .n{ font-family:'Mochiy Pop One'; color:#fff; font-size:16px; letter-spacing:3px; line-height:1; -webkit-text-stroke:1px rgba(22,34,74,.4); }
  .lpz-mobile__nameplate .s{ font-family:'Mochiy Pop One'; color:#fff; font-size:8px; letter-spacing:1.5px; margin-top:2px; opacity:.95; }

  .lpz-mobile__title{ display:flex; flex-direction:column; align-items:center; line-height:.9; }
  .lpz-mobile__title .main, .lpz-mobile__title .z{
    font-family:'Mochiy Pop One'; color:#fff; -webkit-text-stroke:5px var(--ink); paint-order:stroke fill;
  }
  .lpz-mobile__title .main{ font-size:clamp(34px, 12vw, 64px); letter-spacing:1px;
    filter:drop-shadow(3px 4px 0 var(--accent)) drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
  .lpz-mobile__title .z{ font-size:clamp(52px, 18vw, 96px); color:var(--gold); -webkit-text-stroke-width:6px;
    margin-top:-2px;
    filter:drop-shadow(4px 5px 0 var(--accent2)) drop-shadow(0 6px 10px rgba(0,0,0,.35)); }

  .lpz-mobile__chips{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
  .lpz-mobile .lpzh-chip{ font-size:13px; padding:6px 14px; }

  .lpz-mobile__lead{ margin:4px 0 0; max-width:320px; font-weight:900; font-size:14px; line-height:1.5;
    color:#fff; text-shadow:1px 1px 0 rgba(22,34,74,.55), 0 2px 8px rgba(0,0,0,.4); }

  .lpz-mobile__credit{
    display:inline-flex; align-items:center; gap:6px; margin-top:2px;
    font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900; font-size:13px;
    text-decoration:none; color:#fff; background:rgba(22,34,74,.42);
    padding:6px 14px; border-radius:30px; box-shadow:0 0 0 2px rgba(255,255,255,.3);
  }
  .lpz-mobile__credit span{ color:var(--accent2); font-family:'Mochiy Pop One'; }
}