/* ============================================================
   DELUX ARENA · V38 "EXCLUSIVE" — Portada cinematográfica + lobby vivo
   Reemplaza por completo la portada antigua (#dlx-entry).
   ============================================================ */

/* ---------- reset de la portada vieja ---------- */
#dlx-entry.v38 {
  position: fixed; inset: 0; z-index: 9999; display: block; overflow: hidden;
  background: #03040a; color: #f4efe4;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  opacity: 1; transition: opacity .7s ease, filter .7s ease;
  perspective: 1200px;
}
#dlx-entry.v38.leaving { opacity: 0; filter: blur(6px); pointer-events: none; }
#dlx-entry.v38 > * { position: absolute; }
#dlx-entry.v38 .entry-noise,
#dlx-entry.v38 .entry-brand,
#dlx-entry.v38 .entry-bottom,
#dlx-entry.v38 .entry-quick,
#dlx-entry.v38 #dlx-entry-fx { display: none !important; }

/* ---------- capas del escenario ---------- */
.cv-bg { inset: -4%; z-index: 0; }
.cv-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 52%;
  transform: scale(1.04); will-change: transform;
  animation: cvKen 38s ease-in-out infinite alternate;
  filter: saturate(1.08) contrast(1.05) brightness(.92);
}
@keyframes cvKen {
  0%   { transform: scale(1.04) translate3d(0,0,0); }
  100% { transform: scale(1.16) translate3d(-2.2%, -1.6%, 0); }
}
.cv-rays {
  inset: -30%; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .42;
  background: conic-gradient(from 190deg at 62% 12%,
    transparent 0deg, rgba(255,214,150,.20) 7deg, transparent 15deg,
    transparent 27deg, rgba(255,186,116,.14) 34deg, transparent 44deg,
    transparent 62deg, rgba(150,220,255,.12) 70deg, transparent 82deg);
  filter: blur(10px); animation: cvRays 22s ease-in-out infinite alternate;
}
@keyframes cvRays { from { transform: rotate(-3deg) scale(1); } to { transform: rotate(3deg) scale(1.1); } }
.cv-fog {
  inset: -12%; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background:
    radial-gradient(ellipse 42% 26% at 26% 88%, rgba(255,138,52,.26), transparent 70%),
    radial-gradient(ellipse 36% 22% at 74% 94%, rgba(120,200,255,.16), transparent 70%),
    radial-gradient(ellipse 60% 38% at 50% 108%, rgba(255,96,24,.18), transparent 72%);
  animation: cvFog 16s ease-in-out infinite alternate;
}
@keyframes cvFog {
  from { transform: translate3d(-1.6%, 1%, 0) scale(1); }
  to   { transform: translate3d(1.6%, -1.4%, 0) scale(1.07); }
}
.cv-fx { inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.cv-grain {
  inset: 0; z-index: 6; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.9'/></svg>");
}
.cv-vig {
  inset: 0; z-index: 5; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 46% at 50% 48%, rgba(0,0,0,.30), rgba(0,0,0,.10) 60%, transparent 78%),
    radial-gradient(ellipse at 50% 44%, transparent 34%, rgba(0,0,0,.62) 84%, rgba(0,0,0,.94) 100%),
    linear-gradient(180deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.30) 22%, transparent 44%, rgba(0,0,0,.34) 72%, rgba(0,0,0,.96) 100%);
}
.cv-scan { inset: 0; z-index: 6; pointer-events: none; opacity: .035; background: repeating-linear-gradient(0deg, rgba(255,255,255,.6) 0 1px, transparent 1px 3px); }

/* ---------- barra superior ---------- */
.cv-top {
  top: 0; left: 0; right: 0; z-index: 8; display: flex; align-items: center; gap: 14px;
  padding: calc(env(safe-area-inset-top) + 16px) clamp(16px, 3.2vw, 40px) 0;
  animation: cvFadeDown .9s .1s both cubic-bezier(.2,.7,.3,1);
}
.cv-brandmark { display: flex; align-items: center; gap: 10px; font: 900 13px/1 Inter, sans-serif; letter-spacing: .30em; color: #f0e3c6; }
.cv-brandmark i {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-style: normal;
  background: linear-gradient(145deg, #f7e3a8, #e8c37a 45%, #a9792b); color: #1a1206; font-size: 13px;
  box-shadow: 0 6px 16px rgba(232,195,122,.35), inset 0 1px 0 rgba(255,255,255,.7);
}
.cv-live {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid rgba(255,90,90,.45); background: rgba(255,60,60,.10);
  font: 800 10px/1 Inter, sans-serif; letter-spacing: .16em; color: #ffb3b3;
}
.cv-live b { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; animation: cvLive 1.6s ease-in-out infinite; }
@keyframes cvLive { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.cv-season {
  margin-left: auto; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(232,195,122,.32);
  background: rgba(8,10,16,.55); backdrop-filter: blur(12px);
  font: 800 10px/1 Inter, sans-serif; letter-spacing: .22em; color: #e8c37a;
}

/* ---------- contenido central ---------- */
.cv-mid {
  z-index: 8; left: clamp(18px, 6vw, 96px); top: 50%; transform: translateY(-50%);
  width: min(620px, 52vw); pointer-events: none;
}
.cv-mid > * { pointer-events: auto; }
.cv-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 10px/1 Inter, sans-serif; letter-spacing: .42em; color: #d9c9a4; text-transform: uppercase;
  animation: cvUp .9s .18s both cubic-bezier(.2,.7,.3,1);
}
.cv-kicker::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, #e8c37a); }
.cv-title {
  margin: 14px 0 0; font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700; line-height: .84; letter-spacing: -.02em; text-transform: uppercase;
  animation: cvUp 1s .26s both cubic-bezier(.2,.7,.3,1);
}
.cv-title span {
  display: block; font-size: clamp(54px, 9.4vw, 132px);
  background: linear-gradient(180deg, #fffaf0 0%, #f3e2b6 34%, #e8c37a 56%, #a9792b 82%, #6d4a17 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(232,195,122,.18));
}
.cv-title em {
  display: block; font-style: normal; font-size: clamp(20px, 3.2vw, 40px);
  letter-spacing: .52em; margin-top: 10px; color: #cfe9ff; opacity: .92;
  text-shadow: 0 0 26px rgba(127,209,255,.45);
}
.cv-sub {
  margin: 20px 0 0; max-width: 44ch; color: #b9b3a6; font-size: clamp(13px, 1.3vw, 15px); line-height: 1.6;
  animation: cvUp 1s .36s both cubic-bezier(.2,.7,.3,1);
}
.cv-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; animation: cvUp 1s .46s both cubic-bezier(.2,.7,.3,1); }
.cv-btn {
  position: relative; overflow: hidden; min-height: 54px; padding: 0 26px; border-radius: 14px; cursor: pointer;
  font: 900 12px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #f4efe4;
  backdrop-filter: blur(10px); transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s, background .2s;
}
.cv-btn:hover { transform: translateY(-3px); border-color: rgba(232,195,122,.7); box-shadow: 0 16px 34px rgba(0,0,0,.55), 0 0 26px rgba(232,195,122,.18); }
.cv-btn:active { transform: translateY(-1px) scale(.99); }
.cv-btn.primary {
  border-color: #fff0bd; color: #171004;
  background: linear-gradient(180deg, #fff2c4, #e8c37a 46%, #b07f2e 100%);
  box-shadow: 0 14px 34px rgba(232,195,122,.30), inset 0 1px 0 rgba(255,255,255,.85);
  animation: cvPulse 3.6s ease-in-out infinite;
}
.cv-btn.primary:hover { box-shadow: 0 20px 44px rgba(232,195,122,.46), inset 0 1px 0 rgba(255,255,255,.9); }
@keyframes cvPulse {
  0%,100% { box-shadow: 0 14px 34px rgba(232,195,122,.26), inset 0 1px 0 rgba(255,255,255,.85); }
  50%     { box-shadow: 0 16px 44px rgba(232,195,122,.52), inset 0 1px 0 rgba(255,255,255,.85); }
}
.cv-btn.primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  transform: skewX(-18deg); animation: cvSheen 4.2s ease-in-out infinite;
}
@keyframes cvSheen { 0%, 62% { left: -60%; } 92%, 100% { left: 130%; } }
.cv-btn small { display: block; font-size: 9px; letter-spacing: .12em; opacity: .7; margin-top: 4px; }

/* ---------- campeones flotantes (los personajes reales) ---------- */
.cv-champs { inset: 0; z-index: 7; pointer-events: none; }
.cv-champ {
  position: absolute; bottom: 4%; display: flex; flex-direction: column; align-items: center;
  transform-style: preserve-3d; will-change: transform;
  animation: cvFloat 7s ease-in-out infinite;
}
.cv-champ img {
  width: 100%; height: auto; object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.75)) drop-shadow(0 0 26px var(--c, rgba(232,195,122,.5)));
  animation: cvBreath 5.2s ease-in-out infinite;
}
.cv-champ .cv-aura {
  position: absolute; left: 50%; bottom: 6%; width: 78%; height: 46%; transform: translateX(-50%);
  border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, var(--c, rgba(232,195,122,.55)), transparent 72%);
  filter: blur(18px); opacity: .55; animation: cvAura 4.4s ease-in-out infinite;
}
.cv-champ b {
  margin-top: -6px; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(4,6,10,.72); border: 1px solid rgba(255,255,255,.10); backdrop-filter: blur(8px);
  font: 800 9px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #e9e2d3;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.cv-champ:hover b { opacity: 1; transform: none; }
.cv-champ.c1 { right: 2.5%; width: clamp(140px, 17vw, 250px); bottom: 7%; animation-delay: -.4s; z-index: 3; }
.cv-champ.c2 { right: 18%; width: clamp(100px, 12vw, 180px); bottom: 5%; opacity: .9; animation-delay: -2.4s; z-index: 2; }
.cv-champ.c3 { right: 31%; width: clamp(80px, 8.5vw, 125px); bottom: 4%; opacity: .72; animation-delay: -4.2s; z-index: 1; }
@keyframes cvFloat { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-16px) rotate(.5deg); } }
@keyframes cvBreath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.022) translateY(-3px); } }
@keyframes cvAura { 0%,100% { opacity: .42; transform: translateX(-50%) scale(1); } 50% { opacity: .78; transform: translateX(-50%) scale(1.1); } }

/* ---------- pie ---------- */
.cv-bottom {
  bottom: 0; left: 0; right: 0; z-index: 9;
  background: linear-gradient(0deg, rgba(2,3,7,.82), transparent 92%); display: flex; align-items: flex-end; gap: 20px;
  padding: 0 clamp(16px, 3.2vw, 40px) calc(env(safe-area-inset-bottom) + 20px);
  animation: cvFadeUp 1s .6s both cubic-bezier(.2,.7,.3,1);
}
.cv-stats { display: flex; gap: 22px; }
.cv-stats div { display: flex; flex-direction: column; gap: 3px; }
.cv-stats b { font: 700 clamp(17px, 2vw, 24px)/1 "Playfair Display", Georgia, serif; color: #f6e7c2; }
.cv-stats span { font: 800 8.5px/1 Inter, sans-serif; letter-spacing: .24em; color: #8d877a; text-transform: uppercase; }
.cv-hint { margin-left: auto; text-align: right; font: 600 10px/1.5 Inter, sans-serif; color: #7d7869; letter-spacing: .06em; }
.cv-hint b { color: #c9bda3; }

@keyframes cvUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes cvFadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes cvFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .cv-mid { width: min(560px, 86vw); left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; }
  .cv-kicker { justify-content: center; }
  .cv-kicker::before { display: none; }
  .cv-sub { margin-left: auto; margin-right: auto; }
  .cv-cta { justify-content: center; }
  .cv-champs { inset: auto 0 0 0; height: 42%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
  .cv-champ { position: relative; right: auto !important; bottom: auto !important; }
  .cv-champ.c1 { width: 34vw; } .cv-champ.c2 { width: 26vw; } .cv-champ.c3 { width: 20vw; }
  .cv-bottom { justify-content: center; }
  .cv-stats { gap: 16px; }
  .cv-hint { display: none; }
  .cv-season { display: none; }
}
@media (max-width: 560px) {
  .cv-mid { top: 34%; }
  .cv-title span { font-size: clamp(46px, 15vw, 74px); }
  .cv-title em { font-size: 15px; letter-spacing: .34em; }
  .cv-sub { font-size: 12px; max-width: 30ch; }
  .cv-btn { min-height: 48px; padding: 0 16px; font-size: 10.5px; letter-spacing: .12em; }
  .cv-cta { gap: 8px; }
  .cv-champs { height: 40%; }
  .cv-stats b { font-size: 15px; }
  .cv-stats span { font-size: 7.5px; letter-spacing: .16em; }
  .cv-brandmark { font-size: 11px; letter-spacing: .2em; }
}

/* ============================================================
   LOBBY VIVO
   ============================================================ */
#dlx-lobby-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: #05060a; }
#dlx-lobby-bg .lb-img {
  position: absolute; inset: -6%; background: url("cover-v38.jpg") center 55%/cover no-repeat;
  filter: blur(3px) saturate(1.05) brightness(.42); transform: scale(1.06);
  animation: lbKen 46s ease-in-out infinite alternate;
}
@keyframes lbKen { 0% { transform: scale(1.06) translate3d(0,0,0); } 100% { transform: scale(1.16) translate3d(-1.5%,-1.2%,0); } }
#dlx-lobby-bg .lb-grad {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(232,195,122,.10), transparent 62%),
    radial-gradient(55% 55% at 92% 90%, rgba(127,209,255,.10), transparent 66%),
    linear-gradient(180deg, rgba(4,5,9,.86), rgba(4,5,9,.94) 60%, #030408);
}
#dlx-lobby-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; }
body.dlx-lobby { background: #05060a; }
body.dlx-lobby header { background: rgba(6,7,12,.55); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(232,195,122,.10); }

/* héroe del lobby con arte y campeón flotante */
#s-lobby .hero { position: relative; overflow: hidden; background: #05060a; }
#s-lobby .hero canvas#hc { display: none !important; }
#s-lobby .hero .dlx-hero-art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%;
  transform: scale(1.02); animation: lbKen 30s ease-in-out infinite alternate;
  filter: saturate(1.06) contrast(1.04) brightness(.9);
}
#s-lobby .hero .dlx-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 38%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.85));
}
#s-lobby .hero .dlx-hero-champ {
  position: absolute; right: 4%; bottom: 0; height: 88%; width: auto; object-fit: contain; z-index: 2;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(232,195,122,.25));
  animation: lbChamp 6s ease-in-out infinite;
  transition: opacity .5s ease, transform .5s ease;
}
@keyframes lbChamp { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(1.015); } }
#s-lobby .hero .dlx-hero-tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 3; padding: 7px 12px; border-radius: 999px;
  background: rgba(4,6,10,.66); border: 1px solid rgba(232,195,122,.35); backdrop-filter: blur(10px);
  font: 800 9.5px/1 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #f0e3c6;
}
#s-lobby .hero .ht { z-index: 3; }

/* botones del lobby con brillo y elevación */
#s-lobby .menu .big { position: relative; overflow: hidden; transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s; }
#s-lobby .menu .big::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg); transition: left .55s ease;
}
#s-lobby .menu .big:hover::after { left: 130%; }
#s-lobby .menu .big:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,.5), 0 0 24px rgba(232,195,122,.14); }
#s-lobby .card, #s-lobby details.card { transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s; }
#s-lobby .card:hover, #s-lobby details.card:hover { transform: translateY(-2px); border-color: rgba(232,195,122,.28); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
#s-lobby .hero, #s-lobby .menu, #s-lobby > .k2, #s-lobby > #dlx-pais, #s-lobby > label.pl, #s-lobby > details.card, #s-lobby > p.tiny {
  animation: lbIn .7s both cubic-bezier(.2,.7,.3,1);
}
#s-lobby .hero { animation-delay: .02s; } #s-lobby > .k2 { animation-delay: .08s; }
#s-lobby .menu { animation-delay: .14s; } #s-lobby > label.pl { animation-delay: .2s; }
#s-lobby > details.card { animation-delay: .26s; } #s-lobby > p.tiny { animation-delay: .32s; }
@keyframes lbIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #dlx-entry.v38 *, #dlx-lobby-bg *, #s-lobby .hero * { animation: none !important; }
}

/* ============================================================
   V39 · LOBBY REAL (#hub) con movimiento
   ============================================================ */
#hub .hb-hero { position: relative; }
#hub .dlx-hub-champ {
  position: absolute; right: 1%; bottom: 0; height: 92%; width: auto; max-width: 48%;
  object-fit: contain; pointer-events: none; z-index: 1;
  filter: drop-shadow(0 18px 46px rgba(0,0,0,.75)) drop-shadow(0 0 26px rgba(232,195,122,.18));
  transition: opacity .3s ease, transform .3s ease;
  animation: dlxHubFloat 5.5s ease-in-out infinite;
}
@keyframes dlxHubFloat {
  0%,100% { transform: translateY(0) rotate(-.4deg); }
  50%     { transform: translateY(-12px) rotate(.4deg); }
}
#hub .dlx-hub-tag {
  position: absolute; right: 2%; top: 4%; z-index: 2;
  padding: 6px 12px; border-radius: 999px;
  font: 800 10px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: #f7e3a8; background: rgba(8,9,14,.62); border: 1px solid rgba(232,195,122,.45);
  backdrop-filter: blur(8px); box-shadow: 0 6px 22px rgba(0,0,0,.5);
  animation: dlxTagIn .5s ease both;
}
@keyframes dlxTagIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* brillo + elevacion en tarjetas del lobby */
#hub .dlx-live-card { position: relative; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
#hub .dlx-live-card::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-18deg); pointer-events: none; animation: dlxCardSheen 5.5s ease-in-out infinite;
}
#hub .hb-m.dlx-live-card:hover,
#hub .hb-m.dlx-live-card:focus-visible { transform: translateY(-4px) scale(1.012); box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(232,195,122,.35) inset; }
#hub .hb-rail button.dlx-live-card:hover { transform: translateY(-2px); background: rgba(243,201,105,.12); }
@keyframes dlxCardSheen { 0%,62% { left: -60%; } 82%,100% { left: 130%; } }

@media (max-width: 720px) {
  #hub .dlx-hub-champ { height: 74%; max-width: 42%; right: -2%; opacity: .9; }
  #hub .dlx-hub-tag { font-size: 8.5px; padding: 5px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  #hub .dlx-hub-champ, #hub .dlx-live-card::after { animation: none; }
}