/* Webfont Genshin Impact. */
@font-face{
  font-family:"GenshinImpact";
  src:url("fonts/Genshin.woff2") format("woff2");
  font-display:swap;
}

html, body, button, input, select, textarea { font-family:"GenshinImpact", system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important; }
button, input, select, textarea { font-size: 1em; }

/* Util para ocultar cualquier [hidden] con prioridad. */
[hidden]{display:none !important}


:root{
  --bg:#0c0d11;
  --panel:#1f1f1f;
  --panel-2: rgba(33,33,33,.35);
  --slot: rgba(0,0,0,.65);
  --slot-border:#555;
  --green:#4CAF50;
  --accent:#FFEB3B;
  --p1:#0aa3ff;
  --p2:#ff4d4d;

  /* Colores por elemento (HEX). */
  --c-pyro:#ff7a59;
  --c-hydro:#3aa0ff;
  --c-dendro:#68c05c;
  --c-electro:#a67bff;
  --c-anemo:#4db7a6;
  --c-cryo:#7bc9ff;
  --c-geo:#d7b25a;

  /* RGB para efectos. */
  --pyro-rgb:255,122,89;
  --hydro-rgb:58,160,255;
  --dendro-rgb:104,192,92;
  --electro-rgb:166,123,255;
  --anemo-rgb:77,183,166;
  --cryo-rgb:123,201,255;
  --geo-rgb:215,178,90;

  /* UI zoom (solo header, contenido; no afecta trailers ni fondo). */
  --ui-zoom: .95;

}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html,body{ margin:0; padding:0; background:transparent; color:#fff; }
a{ color:#6aa9ff; text-decoration:none }
a:hover{ filter:brightness(1.1) }

body{
  background-color: var(--bg);
  color:#fff;
  overflow-x:hidden;
  position:relative;
}

/* Header. */
header{
  text-align:center;
  padding:6px 12px 0px;
  background: transparent;
  border:none;
  position:relative;
  z-index:5;

  /* UI zoom (sin blur de video en Chromium; fallback con transform). */
  zoom: var(--ui-zoom);
}
@supports not (zoom: 1){
  header{
    transform: scale(var(--ui-zoom));
    transform-origin: top center;
  }
}
.site-title{
  margin:0;
  font-weight:900;
  letter-spacing:1px;
  font-size:36px;
  line-height:1;
  background: linear-gradient(90deg,#79f0ff,#ff75f2,#ffe275,#79f0ff);
  background-size: 400% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation: titleGlow 10s linear infinite;
  text-shadow:0 2px 18px rgba(0,0,0,.65);
}

/* Site title: modo trailer (color por elemento del PJ seleccionado). */
.site-title{
  transition: color .22s ease, text-shadow .22s ease, filter .22s ease;
}

body.pv-site-title-elemental .site-title{
  background: none !important;
  background-size: initial !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--pv-site-title-color, #e8eaed) !important;
  -webkit-text-fill-color: var(--pv-site-title-color, #e8eaed) !important;
  text-shadow:
    0 2px 18px rgba(0,0,0,.72),
    0 0 12px rgba(var(--pv-site-title-rgb, 232,234,237), .18);
  animation: pvTitleElementIn .55s ease-out 1;
}

/* Micro‑animación: sólo 1 vez al entrar (nada infinito => menos lag). */
@keyframes pvTitleElementIn{
  0%{ filter: brightness(1.22); transform: translateY(-1px); }
  100%{ filter: none; transform: none; }
}
.site-subtitle{
  margin-top:2px;
  color:#d6fbff;
  font-weight:800;
  letter-spacing:.8px;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  opacity:.95;
}
@keyframes titleGlow{
  0%{ background-position:0% 50% }
  100%{ background-position:100% 50% }
}

/* Panel de volumen. */
#volume-control{
  position:fixed;
  top:18px; left:18px;
  background:rgba(0,0,0,.88);
  border-radius:12px;
  padding:10px 12px;
  display:flex; flex-direction:column; gap:8px;
  z-index:1000;
  width:220px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  border:1px solid #2b2b2b;
}
#volume-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:700; }
#volume-title{ color:#ddd; font-size:14px; letter-spacing:.4px; }
#volume-icon{ font-size:1.05rem; }
#volume-close{
  background:#222; color:#bbb; border:1px solid #333; border-radius:8px;
  padding:4px 8px; cursor:pointer;
}
#volume-close:hover{ filter:brightness(1.1); }
#main-volume-slider{ width:100%; cursor:pointer; }

#volume-toggle{
  position:fixed;
  bottom:18px; left:18px;
  display:none;
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid #2e2e2e;
  background:#181818;
  color:#ddd;
  font-size:20px;
  line-height:42px; text-align:center;
  cursor:pointer;
  z-index:1000;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}
#volume-toggle:hover{ filter:brightness(1.1); }

/* Layout 3 columnas. */
#draft-container{
  max-width:1750px;
  margin:0 auto;
  padding:0 20px 18px;
  margin-top:-12px;
  gap:20px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  /* UI zoom (sin blur de video en Chromium; fallback con transform). */
  zoom: var(--ui-zoom);
}
@supports not (zoom: 1){
  #draft-container{
    transform: scale(var(--ui-zoom));
    transform-origin: top center;
  }
}

/* Paneles de equipos. */
.team-section{
  width:430px;
  padding:12px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.15));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 2px 24px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.05);
  flex-shrink:0;
  position:relative;
  overflow:hidden;
  backdrop-filter: blur(2px);
}
#team1{ --side: var(--p1); }
#team2{ --side: var(--p2); }

/* Esquinas luminosas, borde dinámico sutil. */
.team-section::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:1;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    radial-gradient(60% 80% at 0% 0%, color-mix(in srgb, var(--side) 15%, transparent) 0%, transparent 60%),
    radial-gradient(60% 80% at 100% 100%, color-mix(in srgb, var(--side) 10%, transparent) 0%, transparent 60%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--side) 35%, transparent);
}

/* Brillos alejados del avatar (J1 derecha, J2 izquierda). */
.team-section::after{
  content:""; position:absolute; width:160px; height:160px; top:-60px;
  filter:blur(22px) saturate(1.05); opacity:.20; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--side) 55%, transparent), transparent 70%);
}
#team1::after{ right:-70px; }
#team2::after{ left:-70px; }

/* Parpadeo cuando está activo el lado. */
@keyframes panelPulse{
  0%{ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--side) 35%, transparent), 0 0 0 rgba(0,0,0,0);}
  50%{ box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--side) 60%, transparent), 0 0 22px color-mix(in srgb, var(--side) 22%, transparent);}
  100%{ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--side) 35%, transparent), 0 0 0 rgba(0,0,0,0);}
}
.team-active{ animation:panelPulse .9s ease-in-out infinite; }

/* Header de jugador (avatar, título, rank). */
.player-header{
  display:flex; gap:14px; align-items:center; justify-content:center;
  padding:6px 8px; margin:0 0 8px;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}

/* Avatar, marcos. */
.avatar-wrap{
  --size: 58px;
  position:relative; width:var(--size); height:var(--size);
  border-radius:50%; overflow:visible;
  background:#111; border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center; flex-shrink:0;
}
.avatar, .avatar-img{
  width:100%; height:100%; object-fit:cover; display:block; z-index:3; background:#0b0d12;
  border-radius:50%;
}

/* IMPORTANTE: el frame va DETRÁS del avatar. */
.frame, .frame-img{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:178%; height:178%;
  object-fit:contain; pointer-events:none; z-index:1;
  display:none;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
}


.avatar-wrap.has-frame .frame,
.avatar-wrap[data-frame-file] > .frame-img{ display:block; }

/* Marcos: animaciones centralizadas en frames.css. */
.avatar-wrap[data-frame-file] > .frame-img{
  z-index:1; /* Detrás del avatar. */
}

.frame-css.owner{
  position:absolute; inset:-4px; border-radius:50%; z-index:5; pointer-events:none; display:none;
}
/* Owner tambien vive en frames.css para mantener el mismo color/animacion. */

/* Meta. */
.player-meta{
  display:flex; flex-direction:column; gap:4px; min-width:0;
  max-width: 310px;
  margin-left: 6px;
}
.player-name{
  font-weight:800; letter-spacing:.3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Título. */
.player-meta .title-badge{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 10px;
  border-radius:999px;
  font-weight:800; font-size:12px; line-height:1.1;

  /* Quitar “líneas/borde” manteniendo legibilidad. */
  border: none !important;
  box-shadow: none !important;
}
.player-meta .title-badge:empty::after{ content:"—"; opacity:.7; }

/* Liga (logo, badge). */
.rk-league-cell{ display:flex; align-items:center; gap:10px; margin-top:2px; }
.rank-logo{
  width:22px;height:22px;border-radius:6px;
  background-size:70% 70%;background-position:center;background-repeat:no-repeat;
  background-color:#0e141d;
  box-shadow:0 0 0 2px rgba(255,255,255,.15), 0 2px 6px rgba(0,0,0,.45);
  flex:0 0 22px;filter:saturate(1.1) contrast(1.05);
}
.rank-logo[data-league="bronze"]{background-image:url("img/leagues/bronze.png")}
.rank-logo[data-league="silver"]{background-image:url("img/leagues/silver.png")}
.rank-logo[data-league="gold"]{background-image:url("img/leagues/gold.png")}
.rank-logo[data-league="platinum"]{background-image:url("img/leagues/platinum.png")}
.rank-logo[data-league="diamond"]{background-image:url("img/leagues/diamond.png")}
.rank-logo[data-league="master"]{background-image:url("img/leagues/master.png")}
.rank-logo[data-league="primordial"]{background-image:url("img/leagues/primordial.png")}
.rank-logo[data-league="abysslord"]{background-image:url("img/leagues/abysslord.png")}

@keyframes rk-sheen{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.rank-badge{
  display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.08);
  padding:6px 14px;border-radius:999px;font-weight:800;font-size:13.5px;
  background:#151c26;box-shadow:0 2px 8px rgba(0,0,0,.25);white-space:nowrap;
  position:relative; overflow:hidden; will-change:transform;
  color:#e9f4ff;
}
.rank-badge[data-league="bronze"]     {color:#f5e3cf;background:linear-gradient(90deg,#5a3b22,#7b4f2b,#5a3b22);background-size:200% 100%;animation:rk-sheen 9s linear infinite}
.rank-badge[data-league="silver"]     {color:#0b0f14;background:linear-gradient(90deg,#d9d9d9,#c0c0c0,#d9d9d9);background-size:200% 100%;animation:rk-sheen 10s linear infinite}
.rank-badge[data-league="gold"]       {color:#0b0f14;background:linear-gradient(90deg,#ffe08a,#ffd24d,#ffe08a);background-size:200% 100%;animation:rk-sheen 8s linear infinite}
.rank-badge[data-league="platinum"]   {color:#07201c;background:linear-gradient(90deg,#5ae3d4,#3ac0b1,#5ae3d4);background-size:200% 100%;animation:rk-sheen 8s linear infinite}
.rank-badge[data-league="diamond"]    {color:#072026;background:linear-gradient(90deg,#8af0ff,#40e0d0,#8af0ff);background-size:200% 100%;animation:rk-sheen 7s linear infinite}
.rank-badge[data-league="master"]     {color:#fff;background:linear-gradient(90deg,#7c0e19,#d72c3a,#7c0e19);background-size:200% 100%;animation:rk-sheen 7s linear infinite}
.rank-badge[data-league="primordial"] {color:#0b0f14;background:linear-gradient(90deg,#ffffff,#f7f7f7,#ffffff);background-size:200% 100%;animation:rk-sheen 11s linear infinite}
.rank-badge[data-league="abysslord"]  {color:#f6e8ff;background:linear-gradient(90deg,#6e37c9,#b565ff,#6e37c9);background-size:200% 100%;animation:rk-sheen 6s linear infinite}

@keyframes rgb-rot { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes rgb-pulse { 0%,100%{opacity:.16} 50%{opacity:.34} }
.rank-badge[data-league]::after{
  content:""; position:absolute; left:50%; top:50%;
  width:180%; height:180%;
  transform:translate(-50%,-50%);
  border-radius:inherit; pointer-events:none;
  background: conic-gradient(#ff0040,#ff7a00,#ffe600,#28ff00,#00eaff,#6a00ff,#ff00c8,#ff0040);
  filter: blur(10px) saturate(120%);
  mix-blend-mode: screen;
  opacity:.22;
  animation: rgb-rot 7.2s linear infinite, rgb-pulse 3.6s ease-in-out infinite;
}

.rank-badge[data-league="platinum"],
.rank-badge[data-league="diamond"],
.rank-badge[data-league="primordial"]{
  text-shadow:0 0 6px rgba(255,255,255,.18);
  box-shadow:0 2px 10px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.08);
}
.rank-badge[data-league="platinum"]::after{ opacity:.26; filter:blur(11px) saturate(128%); animation-duration:6.8s; }
.rank-badge[data-league="diamond"]::after{  opacity:.28; filter:blur(11px) saturate(130%); animation-duration:6.6s; }
.rank-badge[data-league="primordial"]::before{
  content:""; position:absolute; inset:2px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 62%);
  mix-blend-mode: multiply;
}

/* Slots. */
.team-slots-container{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(4,200px);
  gap:14px;
  width:100%;
  position:relative;   /* Ancla exacto para banners TOP/THE BEST. */
  overflow:visible;
}
.slot{
  width:100%; height:200px;
  background: rgba(0,0,0,.22);
  border:2px solid rgba(255,255,255,.14);
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  transition:.2s;
  overflow:hidden; position:relative;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.slot video, .slot img{ width:100%; height:100%; object-fit:cover; }
.slot, .slot video, .slot img, .final-pick-img{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.slot{ isolation:isolate; }
.slot video, .slot img, .final-pick-img{
  image-rendering:auto;
  transform:translateZ(0);
  filter:none !important;
}
.slot img{ position:relative; z-index:1; }

@keyframes slotPulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.35);border-color:#a7a7ff;}
  50%{box-shadow:0 0 18px 6px rgba(255,255,255,.18);border-color:#fff;}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,.35);border-color:#a7a7ff;}
}
.picking-active{animation:slotPulse .9s ease-in-out infinite;}

/* Fondo elemental del slot, variable --elrgb. */
.slot[data-el="Pyro"]   { --elrgb: var(--pyro-rgb);
  background:
  radial-gradient(60% 80% at 50% 100%, rgba(var(--pyro-rgb),.45) 0%, rgba(0,0,0,.05) 70%),
  linear-gradient(180deg, rgba(var(--pyro-rgb),.25), rgba(0,0,0,.10) 62%),
  rgba(var(--pyro-rgb),.38); border-color:rgba(var(--pyro-rgb),.70); box-shadow: 0 8px 26px rgba(var(--pyro-rgb),.20); }
.slot[data-el="Hydro"]  { --elrgb: var(--hydro-rgb);
  background:
  radial-gradient(60% 80% at 50% 100%, rgba(var(--hydro-rgb),.45) 0%, rgba(0,0,0,.05) 70%),
  linear-gradient(180deg, rgba(var(--hydro-rgb),.25), rgba(0,0,0,.10) 62%),
  rgba(var(--hydro-rgb),.38); border-color:rgba(var(--hydro-rgb),.70); box-shadow:0 8px 26px rgba(var(--hydro-rgb),.20); }
.slot[data-el="Dendro"] { --elrgb: var(--dendro-rgb);
  background:
  radial-gradient(60% 80% at 50% 100%, rgba(var(--dendro-rgb),.45) 0%, rgba(0,0,0,.05) 70%),
  linear-gradient(180deg, rgba(var(--dendro-rgb),.25), rgba(0,0,0,.10) 62%),
  rgba(var(--dendro-rgb),.38); border-color:rgba(var(--dendro-rgb),.70); box-shadow:0 8px 26px rgba(var(--dendro-rgb),.20); }
.slot[data-el="Electro"]{ --elrgb: var(--electro-rgb);
  background:
  radial-gradient(60% 80% at 50% 100%, rgba(var(--electro-rgb),.45) 0%, rgba(0,0,0,.05) 70%),
  linear-gradient(180deg, rgba(var(--electro-rgb),.25), rgba(0,0,0,.10) 62%),
  rgba(var(--electro-rgb),.38); border-color:rgba(var(--electro-rgb),.70); box-shadow:0 8px 26px rgba(var(--electro-rgb),.20); }
.slot[data-el="Anemo"]  { --elrgb: var(--anemo-rgb);
  background:
  radial-gradient(60% 80% at 50% 100%, rgba(var(--anemo-rgb),.45) 0%, rgba(0,0,0,.05) 70%),
  linear-gradient(180deg, rgba(var(--anemo-rgb),.25), rgba(0,0,0,.10) 62%),
  rgba(var(--anemo-rgb),.38); border-color:rgba(var(--anemo-rgb),.70); box-shadow:0 8px 26px rgba(var(--anemo-rgb),.20); }
.slot[data-el="Cryo"]   { --elrgb: var(--cryo-rgb);
  background:
  radial-gradient(60% 80% at 50% 100%, rgba(var(--cryo-rgb),.45) 0%, rgba(0,0,0,.05) 70%),
  linear-gradient(180deg, rgba(var(--cryo-rgb),.25), rgba(0,0,0,.10) 62%),
  rgba(var(--cryo-rgb),.38); border-color:rgba(var(--cryo-rgb),.70); box-shadow:0 8px 26px rgba(var(--cryo-rgb),.20); }
.slot[data-el="Geo"]    { --elrgb: var(--geo-rgb);
  background:
  radial-gradient(60% 80% at 50% 100%, rgba(var(--geo-rgb),.45) 0%, rgba(0,0,0,.05) 70%),
  linear-gradient(180deg, rgba(var(--geo-rgb),.25), rgba(0,0,0,.10) 62%),
  rgba(var(--geo-rgb),.38); border-color:rgba(var(--geo-rgb),.70); box-shadow:0 8px 26px rgba(var(--geo-rgb),.20); }

.slot.finalized::before{
  content:""; position:absolute; inset:-3px; border-radius:inherit; z-index:2;
  background:
    conic-gradient(from 0deg, rgba(var(--elrgb,255,255,255),.28), transparent 25% 75%, rgba(var(--elrgb,255,255,255),.28));
  filter: blur(6px);
  animation: ambientSpin 8s linear infinite;
  pointer-events:none; mix-blend-mode: screen;
}
@keyframes ambientSpin{ to{ transform: rotate(360deg); } }

.slot.finalized::after{
  content:""; position:absolute; inset:-8px; border-radius:inherit; z-index:3;
  border:3px solid rgba(var(--elrgb,255,255,255),.55);
  filter:blur(6px); opacity:0; pointer-events:none;
  animation: ringPop .6s ease-out forwards;
}
@keyframes ringPop{
  0%{ transform: scale(.92); opacity:0; }
  35%{ opacity:.85; }
  100%{ transform: scale(1.06); opacity:0; }
}


/* TOP 1 (THE BEST) — resplandor dorado sutil en el slot ===== Nota: no usamos ::after porque .slot tiene overflow:hidden y recorta pseudo-elementos. */
.slot.pv-slot-top1{
  border-color: rgba(255, 214, 102, .92);
  box-shadow:
    0 8px 24px rgba(0,0,0,.45),
    0 0 0 1px rgba(255, 233, 170, .45) inset,
    0 0 0 3px rgba(255, 185, 55, .18) inset,
    0 0 26px rgba(255, 200, 85, .26),
    0 0 52px rgba(255, 175, 45, .18),
    0 0 88px rgba(255, 150, 20, .10);
  animation: pvTop1Glow 2.35s ease-in-out infinite;
}
@keyframes pvTop1Glow{
  0%,100%{
    border-color: rgba(255, 214, 102, .82);
    box-shadow:
      0 8px 24px rgba(0,0,0,.45),
      0 0 0 1px rgba(255, 233, 170, .36) inset,
      0 0 0 3px rgba(255, 185, 55, .14) inset,
      0 0 22px rgba(255, 200, 85, .22),
      0 0 46px rgba(255, 175, 45, .16),
      0 0 78px rgba(255, 150, 20, .09);
  }
  50%{
    border-color: rgba(255, 230, 150, .98);
    box-shadow:
      0 8px 24px rgba(0,0,0,.45),
      0 0 0 1px rgba(255, 250, 210, .62) inset,
      0 0 0 3px rgba(255, 195, 80, .26) inset,
      0 0 34px rgba(255, 220, 120, .36),
      0 0 70px rgba(255, 180, 55, .24),
      0 0 118px rgba(255, 150, 20, .14);
  }
}

/* Barra de nombre inferior. */
.slot-name-bar{
  position:absolute; left:0; right:0; bottom:0; height:26px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72);
  border-top:2px solid rgba(255,255,255,.08);
  z-index:4;
}
.slot-name-text{ font-weight:800; font-size:14px; letter-spacing:.5px; text-shadow:0 1px 2px rgba(0,0,0,.8); }
.slot-name-bar[data-el="Pyro"] .slot-name-text{ color:var(--c-pyro); }
.slot-name-bar[data-el="Hydro"] .slot-name-text{ color:var(--c-hydro); }
.slot-name-bar[data-el="Dendro"] .slot-name-text{ color:var(--c-dendro); }
.slot-name-bar[data-el="Electro"] .slot-name-text{ color:var(--c-electro); }
.slot-name-bar[data-el="Anemo"] .slot-name-text{ color:var(--c-anemo); }
.slot-name-bar[data-el="Cryo"] .slot-name-text{ color:var(--c-cryo); }
.slot-name-bar[data-el="Geo"] .slot-name-text{ color:var(--c-geo); }

/* Columna central (GRID). */
#draft-info{
  min-width:780px; max-width:780px;
  background:rgba(0,0,0,.08);            /* Más transparente. */
  border:1px solid #2b2b2b; border-radius:14px;
  padding:14px 16px 12px;
  display:flex; flex-direction:column; align-items:center;
  overflow:hidden; position: relative;
}

#current-action{
  font-size:22px; margin:0 0 6px; text-align:center;
  font-weight:900; letter-spacing:.6px;
  color:#e8faff;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}
#draft-info[data-phase="pick"]        #current-action{ color:#79f0ff; }
#draft-info[data-phase="extra-bans"]  #current-action{ color:#ffd166; }
#draft-info[data-phase="bans"]        #current-action{ color:#ff9aa2; }

/* Timers. */
#dual-timers{ margin:0 0 10px; display:flex; gap:14px; align-items:center; font-weight:700; }
.timer{
  padding:6px 12px; border-radius:10px; font-size:22px; font-weight:800;
  background:#0e0e0e; border:2px solid rgba(255,255,255,.06);
  box-shadow: inset 0 0 16px rgba(255,255,255,.03);
}
#timer-p1.timer{ color:var(--p1); border-color:color-mix(in srgb, var(--p1) 55%, transparent); }
#timer-p2.timer{ color:var(--p2); border-color:color-mix(in srgb, var(--p2) 55%, transparent); }
@keyframes timerPulse{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.35);} 70%{box-shadow:0 0 0 10px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} }
.timer-active{animation:timerPulse 1s ease-out infinite;}

/* EXTRA BANS / BANS. */
#extra-bans.hidden{ display:none; }
#extra-bans, #bans-container{
  width:100%; padding:6px 6px; margin:4px 0 2px;
  border:none; border-radius:10px; background:transparent;
}
.extra-heading{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:6px;
}
#extra-bans h3,
#bans-container h3{
  margin:0; text-align:center; letter-spacing:.6px;
  font-size:16px; font-weight:900;
  color:#e9f4ff; text-transform:uppercase;
  position:relative; flex:1;
}
#extra-bans h3::after, #bans-container h3::after{
  content:""; display:block; height:2px; width:120px; margin:6px auto 0;
  background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.6), rgba(255,255,255,0));
  filter:blur(.2px);
}
#draft-info[data-phase="extra-bans"] #extra-bans h3{ color:#ffd166; }
#draft-info[data-phase="bans"] #bans-container h3{ color:#ff9aa2; }

.extra-counts{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.extra-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 8px; border-radius:999px; font-weight:900; font-size:12px;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  white-space:nowrap;
}
.extra-chip.p1{ color:var(--p1); }
.extra-chip.p2{ color:var(--p2); }
.extra-chip::after{ content:" · " attr(data-remaining) " restantes"; font-weight:900; }
.extra-chip[data-remaining="0"]{
  background:rgba(60,0,0,.55); border-color:rgba(255,60,60,.4); color:#ff8c8c;
  filter:saturate(1); opacity:.95;
}
.extra-chip[data-remaining="0"]::after{ content:" · agotado"; }

.bans-line{ display:flex; gap:10px; width:100%; justify-content:space-between; align-items:center; }
.bans-col{ flex:1; display:flex; }
#bans-p1-container, #extra-bans-p1 { justify-content:flex-start; }
#bans-p2-container, #extra-bans-p2 { justify-content:flex-end; }
.bans-group{ display:flex; gap:6px; min-height:66px; }
.banned-char-img{
  width:64px; height:64px; border-radius:12px; object-fit:cover; border:2px solid; transform:translateZ(0);
  background:#0e0e0e;
  box-shadow:0 6px 14px rgba(0,0,0,.45);
}
.ban-p1{ border-color:color-mix(in srgb, var(--p1) 80%, white 0%); }
.ban-p2{ border-color:color-mix(in srgb, var(--p2) 80%, white 0%); }

/* Filtros. */
#filter-bar{
  width:100%; margin-top:8px; padding:10px 8px;
  border-top:1px solid #2a2a2a; border-bottom:1px solid #2a2a2a;
  background:transparent;
}
#filter-bar > div{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:6px 0; }
#filter-bar h4{ margin:0 8px 0 0; color:#bbb; font-size:13px; font-weight:600; }

/* Input de búsqueda “un poco transparente” Nota: forzamos #search-input para ganar a estilos inline del JS. */
#filter-bar input[type="text"],
#filter-bar input[type="search"],
#search-input{
  min-width: 340px;
  color:#ffffff;
  background: rgba(0,0,0,.12) !important;  /* Leve transparencia. */
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:10px;
  padding:8px 12px;
  outline: none;
  box-shadow:none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
#filter-bar input[type="text"]::placeholder,
#filter-bar input[type="search"]::placeholder,
#search-input::placeholder{
  color: rgba(255,255,255,.75);
}
#filter-bar input[type="text"]:focus,
#filter-bar input[type="search"]:focus,
#search-input:focus{
  background: rgba(0,0,0,.08) !important;
  border-color: rgba(255,255,255,.38) !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}

.filter-button{
  display:inline-flex; align-items:center; justify-content:center;
  background:#333; color:#fff; border-radius:20px;
  padding:4px 10px; font-size:13px; cursor:pointer;
  transition:background .15s,box-shadow .15s;
  border:1px solid #3d3d3d;
}
.filter-button:hover{ background:#4a4a4a; }
.filter-button.active{ background:var(--green); box-shadow:0 0 6px var(--green); }
.filter-button.element, .filter-button.weapon{ padding:2px 6px; }
.filter-image{ width:26px; height:26px; display:flex; }
.filter-image img{ width:26px; height:26px; }

/* Pool de personajes. */
#characters-scroll{ width:100%; margin-top:8px; flex:1; overflow:auto; padding:6px 2px; }
#characters{
  display:grid;
  grid-template-columns:repeat(8,78px);
  gap:10px; justify-content:center;
}

.character{
  width:78px; height:78px; border-radius:50%;
  cursor:pointer; position:relative;
  border:2px solid transparent;
  transition:border-color .15s,opacity .15s,transform .12s;
  overflow:visible;
}
.character:hover{ border-color:#FFD700; transform:translateY(-1px); }
.character{ isolation:isolate; }
.character > img{ position:relative; z-index:1; }
.character::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:scale(.84);
  transition:opacity .56s ease, transform .56s cubic-bezier(.2,.78,.2,1), filter .56s ease;
  z-index:0;
  filter:saturate(1.18) brightness(1.02);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 -18px 30px rgba(0,0,0,.08),
    0 0 18px rgba(var(--elrgb,255,255,255),.14);
}
.character[data-el="Pyro"]::before,
.character[data-el="Hydro"]::before,
.character[data-el="Dendro"]::before,
.character[data-el="Electro"]::before,
.character[data-el="Geo"]::before,
.character[data-el="Cryo"]::before,
.character[data-el="Anemo"]::before,
.character[data-el="Ninguno"]::before{
  background:
    radial-gradient(88% 96% at 50% 100%, rgba(var(--elrgb),.84) 0%, rgba(var(--elrgb),.58) 40%, rgba(var(--elrgb),.26) 68%, rgba(0,0,0,.04) 100%),
    linear-gradient(180deg, rgba(var(--elrgb),.36) 0%, rgba(var(--elrgb),.10) 68%, rgba(0,0,0,.02) 100%) !important;
}
.character:not(.banned):not(.picked):hover::before{
  opacity:1;
  transform:scale(1);
  filter:saturate(1.42) brightness(1.08);
}
.character.picked-temp:not(.banned-temp)::before{
  opacity:1 !important;
  transform:scale(1) !important;
  filter:saturate(1.42) brightness(1.08) !important;
}
.character.picked-temp:not(.banned-temp){
  box-shadow:0 14px 24px rgba(0,0,0,.30), 0 0 18px rgba(var(--elrgb,255,255,255),.22);
}
.character.banned-temp::before{
  opacity:0 !important;
  transform:scale(.84) !important;
}
.character img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.character.banned,.character.picked{ cursor:default; }
.picked img{ opacity:.25; filter:grayscale(100%); }
.banned img{ opacity:.25; filter:grayscale(100%); }
.banned-temp img{ opacity:.35; filter:grayscale(100%); }
/* Mantén el check de pick siempre claro. */
.pv-picked-p1::before, .character.pv-picked-p2::after{ opacity:1 !important; filter:none !important; }

.character .grid-badge{
  position:absolute; padding:2px 6px;
  font-size:12px; font-weight:900; line-height:1;
  background:rgba(0,0,0,.72); border:1px solid rgba(255,255,255,.12);
  border-radius:7px; text-shadow:0 1px 1px rgba(0,0,0,.5);
  backdrop-filter: blur(1px);
  z-index:5; pointer-events:none;
}
.character .grid-badge-x{
  position:absolute;
  font-weight:900; font-size:18px; line-height:18px;
  padding:2px 6px; border-radius:10px;
  background: rgba(200,0,0,.85); border:1px solid rgba(255,60,60,.7);
  color:#fff; z-index:6; pointer-events:none;
}
/* Empuje hacia afuera (emula pre-draft). */
.character .grid-badge[style*="top: 4px"][style*="left: 4px"]{ transform: translate(-10px, -10px); }
.character .grid-badge[style*="top: 4px"][style*="right: 4px"]{ transform: translate(10px, -10px); }
.character .grid-badge[style*="bottom: 4px"][style*="left: 4px"]{ transform: translate(-10px, 10px); }
.character .grid-badge[style*="bottom: 4px"][style*="right: 4px"]{ transform: translate(10px, 10px); }
.character .grid-badge-x[style*="top: -6px"][style*="left: -6px"]{ transform: translate(0,0); }
.character .grid-badge-x[style*="top: -6px"][style*="right: -6px"]{ transform: translate(0,0); }

/* Botón confirmar. */
#confirm-pick-btn{
  cursor: pointer;
  /* Queda pegado al inicio del panel de personajes (justo debajo de los filtros). */
  position: sticky;
  top: 6px;
  z-index: 12;

  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);

  background: rgba(10, 190, 90, .92);
  color: #fff;
  font-weight: 900;
  letter-spacing: .4px;

  box-shadow: 0 10px 24px rgba(0,0,0,.40);

  transition: filter .14s ease, transform .08s ease;
  display: none;
  margin: 10px auto 10px;
}

/* Ban = rojo. */
#confirm-pick-btn[data-action="ban"]{
  background: rgba(210, 56, 56, .92);
}

/* Hover/active (sutil, sin animaciones continuas). */
/* Botón flotante de confirmación (solo aparece cuando bajas mucho y el original ya no se ve). */
#confirm-pick-btn-sticky{
  cursor: pointer;
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9999;
  display: none;

  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);

  background: rgba(10, 190, 90, .92);
  color: #fff;
  font-weight: 900;
  letter-spacing: .4px;

  box-shadow: 0 18px 42px rgba(0,0,0,.55);
}
#confirm-pick-btn-sticky[data-action="ban"]{
  background: rgba(210, 56, 56, .92);
}
#confirm-pick-btn-sticky:disabled{
  opacity: .55;
  cursor: not-allowed;
}

#confirm-pick-btn-sticky:disabled{
  opacity: .55;
  cursor: not-allowed;
}
@media (max-width: 720px){
  #confirm-pick-btn-sticky{
  cursor: pointer;
    width: calc(100% - 24px);
    bottom: 12px;
  }
}

#confirm-pick-btn:hover{ filter:brightness(1.05); }
#confirm-pick-btn:active{ transform:translateY(1px); }

@keyframes pickFade{ from{opacity:0; transform:scale(.92);} to{opacity:1; transform:scale(1);} }
@keyframes hoverUp{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-3px) } }

.final-pick-img{
  opacity:0; animation: pickFade .35s ease-out forwards, hoverUp 3s ease-in-out infinite .35s;
  z-index:1;
}

/* Trailer de fondo del pick. */
#background-trailer,
video#background-trailer{
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  opacity:1 !important;                 /* Siempre claro. */
  filter:none !important;
  mix-blend-mode: normal !important;
  transition:opacity .8s ease;
  transform: translateZ(0); will-change: opacity;
}


/* Overlay para bans. */
#ban-overlay{
  position:fixed; inset:0; z-index:-1;
  background-position:center; background-repeat:no-repeat; background-size:cover;
  opacity:0; filter:none !important; transition:opacity .55s ease;
}
#ban-overlay.visible{ opacity:.55; }

/* Spectator gris opcional. */
.character.viewer-lacks { filter: grayscale(100%) brightness(.7); opacity:.9; }

/* Performance tweak: evitar filtros caros en scroll grande. */
#characters-scroll { backdrop-filter: none !important; }

/* Responsive (pequeñas mejoras en pantallas medianas). */
@media (max-width: 1500px){
  #draft-container{ gap:16px; }
  .team-section{ width:410px; }
}
@media (max-width: 1380px){
  #draft-container{ gap:14px; }
  .team-section{ width:380px; }
  #draft-info{ min-width:720px; max-width:720px; }
  #characters{ grid-template-columns:repeat(8,74px); }
  .character{ width:74px; height:74px; }
}
@media (max-width: 1280px){
  :root{ --ui-zoom: .92; }
}
/* (Mantén todo tu código CSS anterior igual). */

/* CRÍTICO: VIDEO BUFFERING (Añadir al del archivo). */
.slot {
    /* Necesario para que los videos se superpongan correctamente. */
    position: relative !important; 
    overflow: hidden;
    background-color: #0c0d11; /* Fondo oscuro base. */
}

.slot video {
    /* Esto permite que el video nuevo se cargue ENCIMA del viejo sin desplazarlo. */
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: opacity 0.4s ease-out; /* Suavizado del cambio. */
}

/* El video que entra empieza invisible. */
.slot video.incoming-video {
    z-index: 2;
    opacity: 0;
}

/* Cuando el video ya está reproduciendo, se hace visible. */
.slot video.incoming-video.active {
    opacity: 1;
}


/* PV POLISH (no blur bars, cleaner abyss bg, bigger bans & permabans) - Quita paneles grandes que "emborronan" trailers - Mantiene organización pro de bans (especialmente en Pola) - Bans y Permabans más grandes - Fondo abisal morado sin "líneas" marcadas. */

/* BANS/EXTRA BANS: sin barras/blur que tapen trailers. */
#extra-bans, #bans-container{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
  padding: 6px 6px 8px !important;
  margin: 6px 0 4px !important;
}

/* Mantén el título perfectamente centrado aunque haya chips a los lados. */
.extra-heading{ position:relative; }
.extra-heading h3{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:max-content;
  pointer-events:none;
}
.extra-heading .extra-counts{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

/* Organización pro (sin paneles opacos). */
#bans-container .bans-line{
  display:grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "sec1 sec2"
    "ban1 ban2";
  gap: 10px 12px;
  align-items:start;
}

#secure-bans-p1{ grid-area: sec1; }
#secure-bans-p2{ grid-area: sec2; }
#bans-p1-container{ grid-area: ban1; }
#bans-p2-container{ grid-area: ban2; }

/* “BANS SEGUROS”: caja sutil, NO opaca. */
.secure-bans-wrap{
  width:100%;
  padding:8px 8px 10px;
  border-radius:14px;
  background: rgba(0,0,0,.10);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.20);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

/* Centrar título y contenido dentro de BANS SEGUROS. */
.secure-bans-wrap > h4,
.secure-bans-wrap > h3,
.secure-bans-wrap .secure-title,
.secure-bans-wrap .bans-secure-title{
  width:100%;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.secure-bans-wrap .bans-group{
  width:100%;
  justify-content:center !important;
}
.secure-bans-wrap{ text-align:center; }


/* Wrap para que quede ordenado. */
.bans-group{
  flex-wrap: wrap !important;
  gap: 10px !important;
  min-height:76px !important;
}

/* Imágenes de bans más grandes (normal, pola). */
.banned-char-img{
  width:72px !important;
  height:72px !important;
  border-radius:14px !important;
  border-width:2px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
}

/* Permabans más grandes, texto plural SIN barra opaca. */
#permabans-bar.permabans-bar{
  background: rgba(0,0,0,.12) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.30) !important;
  backdrop-filter: none !important;
}

/* Cambiar título a plural sin tocar JS. */
#permabans-bar.permabans-bar h4{
  font-size:0 !important;
}
#permabans-bar.permabans-bar h4::before{
  display:block;
  text-align:center;
  width:100%;
  content:"PERMABANS ACTIVOS";
  font-size:14px;
  font-weight:1000;
  color:#ff7b7b;
  letter-spacing:1.1px;
  text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}

/* Permabans: mucho más grandes y con pulido/animación. */
#permabans-bar.permabans-bar > div{
  gap:14px !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  justify-content: center !important;
  padding-bottom: 0 !important;
  -webkit-overflow-scrolling: auto;
}

#permabans-bar.permabans-bar > div::-webkit-scrollbar{ height: 0 !important; }
#permabans-bar.permabans-bar > div::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 999px; }
#permabans-bar.permabans-bar > div::-webkit-scrollbar-track{ background: rgba(0,0,0,.18); border-radius: 999px; }

#permabans-bar.permabans-bar img{
  width:112px !important;
  height:112px !important;
  border-radius:18px !important;
  border:0 !important;
  box-shadow:none !important;
}


@keyframes starsDrift{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-150px, 130px, 0); }
}
@keyframes starsTwinkle{
  0%,100%{ opacity:.36; }
  50%{ opacity:.52; }
}


@keyframes auroraSpin{
  0%{ transform: translate3d(0,0,0) rotate(0deg) scale(1.06); }
  50%{ transform: translate3d(-1.5%, 1%, 0) rotate(180deg) scale(1.08); }
  100%{ transform: translate3d(0,0,0) rotate(360deg) scale(1.06); }
}
@keyframes auroraPulse{
  0%,100%{ opacity:.46; }
  50%{ opacity:.66; }
}


:root{
  --ban-thumb: 68px;
  --ban-gap: 10px;

  --perma-thumb: 110px;
  --perma-radius: 20px;

  --abyss-1: rgba(140, 90, 255, .40);
  --abyss-2: rgba(70, 190, 255, .22);
  --abyss-3: rgba(255, 70, 200, .18);
  --abyss-deep: #070510;
}

/* Bans thumbs: un poquito más chicos. */
.banned-char-img{
  width: var(--ban-thumb) !important;
  height: var(--ban-thumb) !important;
  border-radius: 14px !important;
}

/* Extra Bans: usar el ancho completo cuando un lado está vacío. */
#extra-bans .bans-group{
  width: 100% !important;
  flex-wrap: wrap !important;
  gap: var(--ban-gap) !important;
}

/* Por defecto mantenemos el feel “izq/der” cuando ambos lados existen. */
#extra-bans .bans-line{
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  align-items: start;
}
#extra-bans #extra-bans-p1{ justify-content: flex-start !important; }
#extra-bans #extra-bans-p2{ justify-content: flex-end !important; }

/* Si el navegador soporta :has(), colapsamos a 1 columna cuando solo un lado tiene imágenes. */
@supports selector(:has(*)){
  #extra-bans #extra-bans-p1:not(:has(img.banned-char-img)){ display:none !important; }
  #extra-bans #extra-bans-p2:not(:has(img.banned-char-img)){ display:none !important; }

  #extra-bans .bans-line:has(#extra-bans-p1:has(img.banned-char-img)):not(:has(#extra-bans-p2:has(img.banned-char-img))){
    grid-template-columns: 1fr;
  }
  #extra-bans .bans-line:has(#extra-bans-p2:has(img.banned-char-img)):not(:has(#extra-bans-p1:has(img.banned-char-img))){
    grid-template-columns: 1fr;
  }

  /* Cuando queda una sola columna: centramos y dejamos que llegue “de extremo a extremo”. */
  #extra-bans .bans-line:has(#extra-bans-p1:has(img.banned-char-img)):not(:has(#extra-bans-p2:has(img.banned-char-img))) #extra-bans-p1,
  #extra-bans .bans-line:has(#extra-bans-p2:has(img.banned-char-img)):not(:has(#extra-bans-p1:has(img.banned-char-img))) #extra-bans-p2{
    grid-column: 1 / -1;
    justify-content: center !important;
  }
  #extra-bans .bans-line:has(#extra-bans-p1:has(img.banned-char-img)):not(:has(#extra-bans-p2:has(img.banned-char-img))) .bans-group,
  #extra-bans .bans-line:has(#extra-bans-p2:has(img.banned-char-img)):not(:has(#extra-bans-p1:has(img.banned-char-img))) .bans-group{
    justify-content: center !important;
  }
}

/* PERMABANS: más grandes, animación tipo picks. */
#permabans-bar.permabans-bar{
  border-radius: 18px !important;
  overflow: hidden;
}

/* En post‑draft, aunque JS ponga display:none inline, lo forzamos en Pola. */
body.draft-finished #permabans-bar{
  display: block !important;
}

/* El contenedor interno (el div que crea JS) siempre en una sola línea. */
#permabans-bar > div{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: center;
  justify-content: center !important;
  overflow: visible !important;
  padding: 6px 4px 0 !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: auto;
}

/* Ocultar scrollbar sin romper scroll. */
#permabans-bar > div::-webkit-scrollbar{ height: 0 !important; }
#permabans-bar > div::-webkit-scrollbar-track{ background: transparent; }
#permabans-bar > div::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
}
#permabans-bar > div{ scrollbar-color: transparent transparent; scrollbar-width: none; }

/* “Placa” sutil detrás para hacerlo más god sin tapar nada. */
#permabans-bar > div{
  position: relative;
}
#permabans-bar > div::before{
  content:"";
  position:absolute; inset:-30px -30px -30px -30px;
  background:
    radial-gradient(50% 70% at 20% 40%, rgba(165,124,255,.20), transparent 60%),
    radial-gradient(55% 75% at 80% 30%, rgba(0,177,255,.16), transparent 62%),
    radial-gradient(65% 80% at 50% 90%, rgba(255,107,58,.10), transparent 70%);
  filter: blur(18px);
  opacity: .55;
  pointer-events:none;
  z-index:0;
  animation: permaGlowDrift 9s ease-in-out infinite alternate;
}
@keyframes permaGlowDrift{
  from{ transform: translate3d(-10px, 0, 0) scale(1.0); }
  to  { transform: translate3d(14px, -6px, 0) scale(1.02); }
}

#permabans-bar img{
  width: var(--perma-thumb) !important;
  height: var(--perma-thumb) !important;
  border-radius: var(--perma-radius) !important;
  object-fit: cover !important;

  
  border: 2px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 18px 36px rgba(0,0,0,.55),
    0 0 0 2px rgba(0,0,0,.20) inset,
    0 0 26px rgba(165,124,255,.18);
  transform: translateZ(0);
  will-change: transform, filter, box-shadow;

  position: relative;
  z-index: 1;
  scroll-snap-align: start;

  animation: permaFloat 4.6s ease-in-out infinite;
}
#permabans-bar img:nth-child(2n){ animation-delay: -1.2s; }
#permabans-bar img:nth-child(3n){ animation-delay: -2.1s; }
@keyframes permaFloat{
  0%   { transform: translate3d(0, 0, 0) scale(1); filter: saturate(1.05) contrast(1.04); }
  50%  { transform: translate3d(0, -6px, 0) scale(1.01); filter: saturate(1.12) contrast(1.06); }
  100% { transform: translate3d(0, 0, 0) scale(1); filter: saturate(1.05) contrast(1.04); }
}
#permabans-bar img:hover{
  transform: translate3d(0, -10px, 0) scale(1.03) !important;
  box-shadow:
    0 22px 44px rgba(0,0,0,.62),
    0 0 0 2px rgba(0,0,0,.20) inset,
    0 0 34px rgba(140,90,255,.26);
}


@keyframes abyssNebula{
  0%   { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1.05); }
  50%  { transform: translate3d(2%, 1.5%, 0) rotate(180deg) scale(1.08); }
  100% { transform: translate3d(-2%, -1%, 0) rotate(360deg) scale(1.05); }
}
@keyframes abyssStars{
  0%   { transform: translate3d(0,0,0) scale(1); opacity:.30; }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.02); opacity:.38; }
  100% { transform: translate3d(0,0,0) scale(1); opacity:.30; }
}


/* EXTRA BANS — lado correcto, 8 por fila, salto de línea automático - P1 (izquierda): izquierda → derecha - P2 (derecha): derecha → izquierda (direction: rtl) - Cada fila tiene 8 slots; si hay más, baja a la siguiente fila - Las imágenes bajan 1px para no tapar el texto "EXTRA BANS". */
#extra-bans .bans-line{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  padding-top: 8px;
  margin-top: 6px;
}

#extra-bans .bans-col{ min-width: 0; }

#extra-bans-p1 .bans-group,
#extra-bans-p2 .bans-group{
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  align-content: start;
  justify-items: center;
}

#extra-bans-p1 .bans-group{ direction: ltr; }
#extra-bans-p2 .bans-group{ direction: rtl; }

#extra-bans .banned-char-img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  transform: translate3d(0, 1px, 0);
}

/* Si solo un jugador tiene extra bans, que ese lado use TODO el ancho (8 por fila pero más grande). */
#extra-bans.extra-only-p1 .bans-line{ grid-template-columns: 1fr; }
#extra-bans.extra-only-p1 #extra-bans-p2{ display: none; }

#extra-bans.extra-only-p2 .bans-line{ grid-template-columns: 1fr; }
#extra-bans.extra-only-p2 #extra-bans-p1{ display: none; }


/* 01-08) — request 1) Extra bans thumbnails a bit smaller (ONLY extra bans) 2) Theme background simplified to reduce lag (light abyss, light particles) NOTE: This is appended to avoid moving layouts. */

/* EXTRA BANS: smaller thumbnails (keep bans normales intactos). */
#extra-bans-p1 .banned-char-img,
#extra-bans-p2 .banned-char-img{
  width: 58px !important;
  height: 58px !important;
  border-radius: 12px !important;
}


@keyframes pvParticlesDrift{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(140px,-140px,0); }
}


/* 01-08) — tweaks #1 Extra bans: thumbnails a bit bigger, tighter spacing (ONLY extra bans). */

/* Extra bans thumbnails: slightly bigger. */
#extra-bans-p1 .banned-char-img,
#extra-bans-p2 .banned-char-img{
  width: 66px !important;
  height: 66px !important;
  border-radius: 12px !important;
}

/* Extra bans spacing: a bit closer. */
#extra-bans-p1 .bans-group,
#extra-bans-p2 .bans-group{
  gap: 4px !important;
  row-gap: 6px !important;
}


/* 01-08) — tweaks - Extra bans: closer spacing (ONLY extra bans; does not change alignment/side). */
#extra-bans-p1 .bans-group,
#extra-bans-p2 .bans-group{
  gap: 2px !important;
  row-gap: 4px !important;
}


/* Check verde por pick (izq = P1, der = P2). */
.character.pv-picked-p1::before,
.character.pv-picked-p2::after{
  content: "✓";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  color: rgba(40, 255, 120, 1);
  background: rgba(0, 0, 0, 0.70);
  border: 1px solid rgba(40, 255, 120, 0.85);
  box-shadow: 0 0 10px rgba(40, 255, 120, 0.35);
  pointer-events: none;
  z-index: 5;
}
.character.pv-picked-p1::before{ left: 4px; }
.character.pv-picked-p2::after{ right: 4px; }

/* Permabans con fondo elemental. */

/* Permabans (Modo Pola) – fondo elemental épico (como picks) sin marcos rojos. */
.permabans-bar .permaban-card{
  --perma-radius: 18px;
  --elrgb: 255,255,255;
  position:relative;
  width: var(--perma-thumb);
  height: var(--perma-thumb);
  border-radius: var(--perma-radius);
  overflow:hidden;
  padding:0;
  background:
    radial-gradient(75% 90% at 50% 105%, rgba(var(--elrgb),0.55) 0%, rgba(0,0,0,0.10) 62%),
    linear-gradient(180deg, rgba(var(--elrgb),0.28) 0%, rgba(0,0,0,0.25) 70%),
    rgba(0,0,0,0.35);
  box-shadow:
    0 18px 38px rgba(0,0,0,0.58),
    0 0 28px rgba(var(--elrgb),0.25),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}
.permabans-bar .permaban-card::before{
  content:'';
  position:absolute;
  inset:-18px;
  background: radial-gradient(closest-side, rgba(var(--elrgb),0.58) 0%, rgba(0,0,0,0) 72%);
  filter: blur(10px);
  opacity: 0.72;
  pointer-events:none;
}
.permabans-bar .permaban-card[data-el="Pyro"]{   --elrgb: var(--pyro-rgb); }
.permabans-bar .permaban-card[data-el="Hydro"]{  --elrgb: var(--hydro-rgb); }
.permabans-bar .permaban-card[data-el="Electro"]{--elrgb: var(--electro-rgb); }
.permabans-bar .permaban-card[data-el="Cryo"]{   --elrgb: var(--cryo-rgb); }
.permabans-bar .permaban-card[data-el="Anemo"]{  --elrgb: var(--anemo-rgb); }
.permabans-bar .permaban-card[data-el="Dendro"]{ --elrgb: var(--dendro-rgb); }
.permabans-bar .permaban-card[data-el="Geo"]{    --elrgb: var(--geo-rgb); }

.permabans-bar .permaban-card img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  border:none;
  border-radius: var(--perma-radius);
  box-shadow:none;
}
.pv-toprank-toast{
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 6000;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(-12px) scale(0.96);
}
.pv-toprank-toast.show{
  animation: pvTopRankPop 2s ease forwards;
}
@keyframes pvTopRankPop{
  0%   { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.96); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0px) scale(1.00); }
  85%  { opacity: 1; transform: translateX(-50%) translateY(0px) scale(1.00); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.98); }
}
.pv-toprank-content{
  display: flex;
  justify-content: center;
  align-items: center;
}
.pv-toprank-box{
  --accent: rgba(255,255,255,0.22);
  position: relative;
  overflow: hidden;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 0 0 2px var(--accent), 0 14px 28px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  text-align: center;
  min-width: 220px;
}
.pv-toprank-box::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background:
    radial-gradient(circle at 22% 18%, var(--accent) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.75));
  opacity: 0.55;
  pointer-events: none;
}
.pv-toprank-box::after{
  content: "";
  position: absolute;
  inset: -35% -70%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translateX(-35%) rotate(10deg);
  animation: pvTopRankShine 1.2s ease-in-out infinite;
  opacity: 0.30;
  pointer-events: none;
}
@keyframes pvTopRankShine{
  0%   { transform: translateX(-45%) rotate(10deg); }
  100% { transform: translateX(45%) rotate(10deg); }
}
.pv-toprank-box > div{
  position: relative;
  z-index: 1;
}
.pv-toprank-rank{
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 4px;
}
.pv-toprank-char{
  font-weight: 800;
  font-size: 13px;
  opacity: 0.95;
}

/* Accent por elemento. */
.pv-toprank-box[data-el="Pyro"]{ --accent: var(--c-pyro); }
.pv-toprank-box[data-el="Hydro"]{ --accent: var(--c-hydro); }
.pv-toprank-box[data-el="Anemo"]{ --accent: var(--c-anemo); }
.pv-toprank-box[data-el="Electro"]{ --accent: var(--c-electro); }
.pv-toprank-box[data-el="Cryo"]{ --accent: var(--c-cryo); }
.pv-toprank-box[data-el="Dendro"]{ --accent: var(--c-dendro); }
.pv-toprank-box[data-el="Geo"]{ --accent: var(--c-geo); }


/* Sticky: los paneles de picks (8 cubos) siempre visibles al hacer scroll. */
@media (min-width: 1101px){
  #team1, #team2{
    position: sticky;
    top: 6px;
    z-index: 40;
    overflow: visible; /* Permite que los banners salgan hacia el centro. */
  }
}

/* Contenedor de 4 "columnas" (verticales) para banners, alineado con las 4 filas de slots. */
.pv-ranklane{
  position:absolute;
  top:0;
  width:260px;
  display:grid;
  grid-template-rows:repeat(4,200px);
  gap:14px;
  pointer-events:none;
  z-index:60;
}
.pv-ranklane-cell{
  display:flex;
  align-items:center;
  justify-content:center;
}

.pv-ranklane--team1{ left: calc(100% + 6px); }
.pv-ranklane--team2{ right: calc(100% + 14px); }

@media (max-width: 1500px){
  .pv-ranklane{ width:240px; }
}
@media (max-width: 1380px){
  .pv-ranklane{ width:220px; }
}
@media (max-width: 1280px){
  /* En pantallas pequeñas el layout cambia mucho; evitamos overflow raro. */
  .pv-ranklane{ display:none !important; }
  #team1, #team2{ position:relative; overflow:hidden; }
}

/* Banner base. */
.pv-rankbanner{
  --elrgb: 96,100,108;
  border-radius: 16px;
  padding: 9px 10px;
  display: inline-flex;
  position:relative;
  flex-direction:column;
  gap:4px;
  width: fit-content;
  min-width: unset;
  max-width: 320px;

  background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.62));

  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 54px rgba(0,0,0,.62),
    0 0 0 1px rgba(var(--elrgb), .30) inset;

  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
  transform: translateZ(0);
  will-change: transform, opacity;

  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.pv-rankbanner::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  pointer-events:none;
  /* Halo sutil al borde (sin teñir el fondo). */
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(var(--elrgb), .20), transparent 58%),
    linear-gradient(90deg, rgba(var(--elrgb), .22), transparent 55%);
  opacity:.55;
  mix-blend-mode: screen;
}

/* Shine (solo al entrar). */
.pv-rankbanner::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:18px;
  pointer-events:none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 45%, transparent 62%);
  opacity:0;
  transform: translateX(-120%);
}

/* Tipografía TOP 2-5. */
.pv-rankbanner-top{
  font-weight: 1000;
  letter-spacing: 1.1px;
  font-size: 22px;
  text-transform: uppercase;
  line-height: 1.0;
  color: rgb(var(--elrgb));
  text-shadow: 0 2px 14px rgba(0,0,0,.72);
}
.pv-rankbanner-char{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 17px;
  opacity: .98;
  line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0,0,0,.72);
  color:#fff;
  text-transform: uppercase;
  letter-spacing: .35px;
}

.pv-rankbanner-line{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
  font-weight:900;
  line-height:1.05;
  text-shadow:0 2px 14px rgba(0,0,0,.72);
  text-transform:uppercase;
  letter-spacing:.35px;
}

.pv-rankbanner-line .pv-rankbanner-top{
  flex:0 0 auto;
  font-size:22px;
}

.pv-rankbanner-line .pv-rankbanner-name{
  flex:1 1 auto;
  min-width:0;
  font-size:17px;
  color:rgb(var(--elrgb,255,255,255));
}

.pv-rankbanner-name{
  display:inline-block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:1000;
  letter-spacing:.2px;
}

/* THE BEST (usa titles.css). */
.pv-rankbanner--best{
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.64));
}

.pv-rankbest-row{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
}

.pv-best-badge{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 320px;

  font-size: 20px !important;
  line-height: 1.05;

  padding: 8px 16px !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.75);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  filter: drop-shadow(0 12px 26px rgba(0,0,0,.58));
}

.pv-rank-elicon{
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex: 0 0 18px;
  opacity: .96;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
}

.pv-rankbanner--best .pv-rank-elicon{
  width: 22px;
  height: 22px;
  flex-basis: 22px;
}

/* Map por elemento (por si falta --elrgb). */
.pv-rankbanner[data-el="Pyro"]{ --elrgb: var(--pyro-rgb); }
.pv-rankbanner[data-el="Hydro"]{ --elrgb: var(--hydro-rgb); }
.pv-rankbanner[data-el="Electro"]{ --elrgb: var(--electro-rgb); }
.pv-rankbanner[data-el="Cryo"]{ --elrgb: var(--cryo-rgb); }
.pv-rankbanner[data-el="Anemo"]{ --elrgb: var(--anemo-rgb); }
.pv-rankbanner[data-el="Dendro"]{ --elrgb: var(--dendro-rgb); }
.pv-rankbanner[data-el="Geo"]{ --elrgb: var(--geo-rgb); }

/* Animaciones (entra -> hold -> sale). */
@keyframes pvRankShine{
  0%{ opacity:0; transform: translateX(-120%); }
  10%{ opacity:.75; }
  60%{ opacity:.55; }
  100%{ opacity:0; transform: translateX(120%); }
}

@keyframes pvRankInLeft{
  0%{ opacity:0; transform: translateX(-28px) scale(.98); }
  100%{ opacity:1; transform: translateX(0) scale(1); }
}
@keyframes pvRankOutLeft{
  0%{ opacity:1; transform: translateX(0) scale(1); }
  100%{ opacity:0; transform: translateX(-28px) scale(.985); }
}
@keyframes pvRankInRight{
  0%{ opacity:0; transform: translateX(28px) scale(.98); }
  100%{ opacity:1; transform: translateX(0) scale(1); }
}
@keyframes pvRankOutRight{
  0%{ opacity:1; transform: translateX(0) scale(1); }
  100%{ opacity:0; transform: translateX(28px) scale(.985); }
}

.pv-rankbanner--from-left.pv-rankbanner--enter{ animation: pvRankInLeft .26s ease-out both; }
.pv-rankbanner--enter::after{ animation: pvRankShine .55s ease-out both; }
.pv-rankbanner--from-left.pv-rankbanner--exit{ animation: pvRankOutLeft .28s ease-in both; }
.pv-rankbanner--from-right.pv-rankbanner--enter{ animation: pvRankInRight .26s ease-out both; }
.pv-rankbanner--from-right.pv-rankbanner--exit{ animation: pvRankOutRight .28s ease-in both; }


#team1, #team2{ margin-top: -18px; }          /* Sube bloques (slots+perfil). */
#draft-info{ margin-top: 10px; }             /* Baja un poco el grid central (evita tapar 'ABYSS DRAFT'). */

/* Logo esquina (como ranked). */
.pv-corner-logo{
  position: fixed;
  top: 10px; left: 10px;
  width: 34px; height: 34px;
  z-index: 1205;
  pointer-events: none;
  user-select: none;
  opacity: .96;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.65));
}

/* Deja espacio para el logo. */
#volume-control{ left: 56px; }
#volume-toggle{ left: 56px; }


body.pv-perf-video .rank-badge,
body.pv-perf-video .rank-badge::before,
body.pv-perf-video .rank-badge::after{
  animation-play-state: paused !important;
}

/* Mantener indicador de turno (team-active) SIEMPRE activo, incluso con trailers. */
body.pv-perf-video .team-active{
  animation-play-state: running !important;
}


/* Pausa el “brillo” (sheen) constante del slot (conic, blur) mientras corre un trailer. Mantiene el balanceo (hoverUp) de la imagen. */
body.pv-perf-video .slot.finalized::before{
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
}

body.pv-perf-video .team-section,
body.pv-perf-video #draft-info,
body.pv-perf-video #volume-control{
  backdrop-filter: none !important;
}


/* Extra: eliminar blur/sombras pesadas en banners y toasts mientras corre un trailer. */
body.pv-perf-video .pv-toprank-box,
body.pv-perf-video .pv-rankbanner{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
body.pv-perf-video .pv-toprank-box::after,
body.pv-perf-video .pv-rankbanner::before,
body.pv-perf-video .pv-rankbanner::after{
  opacity: 0 !important;
  animation: none !important;
}


/* Pausar animaciones de títulos equipados (perfil) mientras hay trailer. IMPORTANTE: NO afecta banners THE BEST/TOP 2–5 (fuera de .player-meta). */
body.pv-perf-video .player-meta .title-badge,
body.pv-perf-video .player-meta .title-badge::before,
body.pv-perf-video .player-meta .title-badge::after{
  animation-play-state: paused !important;
}

/* Pausar resplandor dorado del slot TOP 1 mientras hay trailer. */
body.pv-perf-video .slot.pv-slot-top1{
  animation-play-state: paused !important;
}


/* Next Draft (Pola Semi/). */
.pv-next-draft-btn{
  position: fixed;
  top: 10px;
  right: 18px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(10,10,12,0.62);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  transition: transform .12s ease, opacity .12s ease, background .12s ease;
}
.pv-next-draft-btn:hover{
  transform: translateY(-1px);
  background: rgba(10,10,12,0.72);
}
.pv-next-draft-btn:active{
  transform: translateY(0px);
  opacity: 0.95;
}
.pv-next-draft-btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
@media (max-width: 680px){
  .pv-next-draft-btn{ top: 8px; right: 12px; padding: 9px 12px; font-size: 12px; }
}


/* Post‑Draft panel solo visible cuando el draft está finalizado. */
#postdraft-panel{ display:none; }
body.draft-finished #postdraft-panel{ display:block; }


/* Indicador de número de Draft (Series Semi/). */
.pv-series-indicator{
  display: inline-block;
  margin: 8px auto 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.42);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  letter-spacing: .6px;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}


/* Draft normal postdraft swap animation. */
.pd-swap-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10050;
}
.pd-swap-ghost{
  position:fixed;
  margin:0;
  overflow:hidden;
  will-change:transform, opacity;
  transform:translate3d(0,0,0);
  transition:transform .82s cubic-bezier(.22,.78,.2,1), opacity .82s ease;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.28));
  backface-visibility:hidden;
}
.pd-swap-ghost.animating{ opacity:1; }
.pd-swap-ghost.fade-out{ opacity:0; }
.pd-swap-ghost-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.pd-swap-ghost-cons{ position:absolute; top:6px; left:6px; z-index:3; }
.pd-swap-ghost-weapon{
  position:absolute; top:6px; right:6px; z-index:3; width:46px; height:46px; object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.25));
  background:rgba(0,0,0,.42); border:2px solid rgba(0,0,0,.42); border-radius:10px; padding:2px;
}
.slot.pd-swap-conceal{ background:rgba(0,0,0,.10) !important; box-shadow:none !important; }
.slot.pd-swap-conceal > img,
.slot.pd-swap-conceal > video,
.slot.pd-swap-conceal .final-pick-img,
.slot.pd-swap-conceal .final-pick-cons-badge,
.slot.pd-swap-conceal .final-pick-weapon-img,
.slot.pd-swap-conceal .slot-name-bar{ opacity:0 !important; visibility:hidden !important; }

/* Draft normal tiempos por separado. */
#postdraft-panel .pd-times-toggle{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:12px; padding:12px 14px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  color:#e8eaed; cursor:pointer; font-weight:900; letter-spacing:.3px;
}
#postdraft-panel .pd-times-toggle:hover{ filter:brightness(1.05); }
#postdraft-panel .pd-times-toggle .ico{ font-size:18px; }
#postdraft-panel .pd-times-wrap{ margin-top:10px; display:none; }
#postdraft-panel .pd-times-wrap.open{ display:block; }
#postdraft-panel .pd-times-grid{ display:grid; grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr); gap:14px; align-items:stretch; }
#postdraft-panel .pd-times-side,
#postdraft-panel .pd-times-center{ border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(255,255,255,.05); padding:14px; }
#postdraft-panel .pd-times-side-title{ font-weight:900; letter-spacing:.4px; margin-bottom:10px; text-align:center; }
#postdraft-panel .pd-times-side[data-side='p1'] .pd-times-side-title{ color:var(--p1); }
#postdraft-panel .pd-times-side[data-side='p2'] .pd-times-side-title{ color:var(--p2); }
#postdraft-panel .pd-time-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
#postdraft-panel .pd-time-row label{ width:72px; opacity:.9; font-size:12px; }
#postdraft-panel .pd-time-input{ flex:1; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(10,10,12,.55); color:#e8eaed; font-weight:900; letter-spacing:.8px; text-align:center; }
#postdraft-panel .pd-times-footer{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; margin-top:8px; }
#postdraft-panel .pd-times-total{ font-size:14px; font-weight:900; opacity:.92; text-align:center; white-space:nowrap; }
#postdraft-panel .pd-times-ready{ min-width:132px; }
#postdraft-panel .pd-times-ready.is-ready{ background:rgba(76,175,80,.22); border-color:rgba(76,175,80,.45); }
#postdraft-panel .pd-times-center{ display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
#postdraft-panel .pd-times-versus{ font-size:30px; margin-bottom:8px; opacity:.88; }
#postdraft-panel .pd-times-diff-main{ font-size:22px; font-weight:900; letter-spacing:.5px; }
#postdraft-panel .pd-times-diff-sub{ margin-top:8px; font-size:12px; opacity:.8; }
#postdraft-panel .pd-times-meta{ margin-top:10px; font-size:12px; opacity:.75; }
#postdraft-panel .pd-code.pd-code-disabled{ min-width:320px; }
@media (max-width: 1280px){
  #postdraft-panel .pd-times-grid{ grid-template-columns:1fr; }
}


html, body{
  overflow:hidden;
}
#ui-root{
  position:relative;
  z-index:2;
  min-height:100vh;
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.site-title-link{
  color:inherit;
  text-decoration:none;
  display:inline-block;
}
#draft-container{
  flex:1 1 auto;
  min-height:0;
  height:calc(100vh - 86px);
  overflow:hidden;
  align-items:stretch;
}
#draft-info,
.team-section{
  min-height:0;
}
#draft-info{
  height:100%;
}
#characters-scroll{
  flex:1 1 auto;
  min-height:0;
  overscroll-behavior:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
#characters-scroll::-webkit-scrollbar{ width:0; height:0; }

/* Host usa el mismo check del rival; liberamos ::before para el fondo elemental. */
.character.pv-picked-p1::before{ content:none !important; }
.character.pv-picked-p1::after,
.character.pv-picked-p2::after{
  content:"✓";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:900;
  color:rgba(40,255,120,1);
  background:rgba(0,0,0,.70);
  border:1px solid rgba(40,255,120,.85);
  box-shadow:0 0 10px rgba(40,255,120,.35);
  pointer-events:none;
  z-index:5;
  opacity:1 !important;
  filter:none !important;
}
.character.pv-picked-p1::after{ left:4px; right:auto; }
.character.pv-picked-p2::after{ right:4px; left:auto; }

/* Pick casi instantáneo como draft de ratas. */
.final-pick-img{
  opacity:1 !important;
  animation:none !important;
}
.slot video.incoming-video{
  transition:opacity .12s ease !important;
  will-change:opacity, transform;
}
.slot video.incoming-video.active{
  opacity:1 !important;
  filter:none !important;
  image-rendering:auto !important;
}

/* Panel de sonido abre donde está el icono. */
#volume-control{
  top:auto;
  bottom:18px;
  left:18px;
}

/* Postdraft panel centrado y estable. */
#postdraft-panel{
  width:min(100%, 760px);
  margin:10px auto 10px;
  display:none;
  justify-items:center;
}
body.draft-finished #postdraft-panel{ display:grid; }
#postdraft-panel .pd-row{
  width:100%;
  justify-content:center;
}
#postdraft-panel .pd-row.pd-id-row{
  flex-wrap:nowrap;
}
#postdraft-panel .pd-row.pd-status-row{
  min-height:22px;
  align-items:center;
}
#postdraft-panel #pd-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  line-height:22px;
  white-space:nowrap;
}
#postdraft-panel .pd-code{ min-width:260px; max-width:360px; }
#postdraft-panel .pd-no-id-banner{
  display:none;
  width:100%;
  text-align:center;
  font-weight:1000;
  letter-spacing:.5px;
  padding:6px 0 2px;
  border:none;
  background:transparent;
  box-shadow:none;
  color:#eef6ff;
}
#postdraft-panel.no-final-id .pd-no-id-banner{ display:block; }
#postdraft-panel.no-final-id .pd-id-row,
#postdraft-panel.no-final-id .pd-status-row{ display:none !important; }

/* Tiempos por separado. */
#pd-separate-times-host{ width:100%; }
#postdraft-panel .pd-times-toggle{
  margin-inline:auto;
  min-width:250px;
}
#postdraft-panel .pd-times-grid{
  grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);
  width:100%;
}
#postdraft-panel .pd-times-side,
#postdraft-panel .pd-times-center{
  overflow:hidden;
  min-width:0;
}
#postdraft-panel .pd-times-side-title{
  font-size:16px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#postdraft-panel .pd-time-row{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  align-items:center;
  gap:10px;
}
#postdraft-panel .pd-time-row label{
  width:auto;
  white-space:nowrap;
  font-size:12px;
}
#postdraft-panel .pd-time-input{
  width:100%;
  min-width:0;
  max-width:100%;
}
#postdraft-panel .pd-time-input.is-better{
  color:#8cff9b;
  border-color:rgba(90,255,126,.45);
  box-shadow:0 0 0 1px rgba(90,255,126,.12) inset;
}
#postdraft-panel .pd-time-input.is-worse{
  color:#ff8d8d;
  border-color:rgba(255,110,110,.38);
  box-shadow:0 0 0 1px rgba(255,110,110,.10) inset;
}
#postdraft-panel .pd-times-diff-main .pd-winner-name{
  font-weight:1000;
}
#postdraft-panel .pd-times-diff-main .pd-winner-name.p1{ color:var(--p1); }
#postdraft-panel .pd-times-diff-main .pd-winner-name.p2{ color:var(--p2); }
#postdraft-panel .pd-times-diff-sub .pd-total-p1{ color:var(--p1); }
#postdraft-panel .pd-times-diff-sub .pd-total-p2{ color:var(--p2); }
@media (max-width: 980px){
  #draft-container{ height:calc(100vh - 74px); }
}


/* Draft normal polish. */
header{ padding:4px 12px 0 !important; }
#draft-container{
  height:calc(100vh - 58px) !important;
  margin-top:-24px !important;
  padding:0 18px 10px !important;
  align-items:flex-start !important;
}
#team1, #team2{ margin-top:-30px !important; }
#draft-info{ margin-top:0 !important; }
.team-section{ padding:10px 10px 8px !important; }
.team-slots-container{ grid-template-rows:repeat(4,200px) !important; gap:12px !important; }
.slot{ height:200px !important; }

#characters-scroll{
  scroll-behavior:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch;
}
#characters-scroll::-webkit-scrollbar{ width:0 !important; height:0 !important; }

.final-pick-img{
  opacity:1 !important;
  animation:hoverUp 3s ease-in-out infinite !important;
}

#postdraft-panel .pd-times-side-title{
  font-size:18px !important;
  font-weight:1000 !important;
}
#postdraft-panel .pd-time-row{
  grid-template-columns:92px minmax(0,132px) !important;
  justify-content:center !important;
}
#postdraft-panel .pd-time-row label{
  font-size:14px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
#postdraft-panel .pd-time-input{
  max-width:132px !important;
  min-width:0 !important;
}
#postdraft-panel .pd-times-total{
  font-size:14px !important;
  font-weight:900 !important;
}
#postdraft-panel .pd-times-diff-sub,
#postdraft-panel .pd-times-meta{
  font-size:13px !important;
}


/* Draft normal over. */
/* El header sólo ocupa la huella visual del título y no tapa la zona de jugadores. */
header{
  display:inline-grid !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 auto !important;
  justify-items:center !important;
  align-content:start !important;
  pointer-events:none;
  z-index:4 !important;
}
header > *{ pointer-events:auto; }
.site-title{
  display:inline-flex !important;
  width:max-content !important;
  max-width:100% !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  animation:none !important;
}
.site-title-link{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  text-decoration:none;
  display:inline-block;
  background:linear-gradient(90deg,#79f0ff,#ff75f2,#ffe275,#79f0ff) !important;
  background-size:400% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  animation:titleGlow 10s linear infinite !important;
  text-shadow:0 2px 18px rgba(0,0,0,.65);
  transition:filter .18s ease, text-shadow .18s ease, opacity .18s ease;
  opacity:1 !important;
}
.site-title-link:hover,
.site-title-link:focus-visible{
  opacity:1 !important;
  filter:brightness(1.08) drop-shadow(0 0 12px rgba(255,255,255,.16));
  text-shadow:0 2px 18px rgba(0,0,0,.65), 0 0 14px rgba(255,255,255,.14);
  outline:none;
}
body.pv-site-title-elemental .site-title-link{
  background:none !important;
  color:var(--pv-site-title-color, #e8eaed) !important;
  -webkit-text-fill-color:var(--pv-site-title-color, #e8eaed) !important;
  text-shadow:0 2px 18px rgba(0,0,0,.72), 0 0 12px rgba(var(--pv-site-title-rgb,232,234,237), .18);
  animation:pvTitleElementIn .55s ease-out 1 !important;
}

/* La zona de jugadores y picks debe verse por encima de todo. */
#draft-container{
  overflow:visible !important;
  position:relative;
  z-index:20;
}
#draft-info,
.team-section,
.team-slots-container,
.slot{
  position:relative;
  z-index:21;
}
.team-section,
#draft-info{
  overflow:visible !important;
}

/* El panel de sonido se abre desde el mismo icono sin subir al tope. */
#volume-control{
  top:auto !important;
  bottom:18px !important;
  left:18px !important;
}
#volume-toggle{
  bottom:18px !important;
  left:18px !important;
}

/* Tiempos por separado: texto más limpio. */
#postdraft-panel .pd-times-total{
  font-size:14px !important;
  font-weight:900 !important;
}


/* Draft normal polish. */
.pv-pick-reveal-overlay{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  border-radius:inherit;
  overflow:hidden;
  display:grid;
  place-items:center;
  opacity:0;
  isolation:isolate;
}
.pv-pick-reveal-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(88% 92% at 50% 100%, rgba(var(--elrgb,255,255,255),.22) 0%, rgba(var(--elrgb,255,255,255),.08) 34%, rgba(0,0,0,.02) 74%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 30%, rgba(0,0,0,.06) 100%);
  mix-blend-mode:screen;
}
.pv-pick-reveal-flash{
  position:absolute;
  inset:-8%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.56) 0%, rgba(var(--elrgb,255,255,255),.30) 22%, rgba(255,255,255,0) 66%);
  filter:blur(12px);
  opacity:0;
}
.pv-pick-reveal-glow{
  position:absolute;
  inset:-10%;
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% 58%, rgba(var(--elrgb,255,255,255),.34) 0%, rgba(var(--elrgb,255,255,255),.16) 28%, rgba(255,255,255,0) 70%),
    conic-gradient(from 180deg, rgba(var(--elrgb,255,255,255),0) 0deg, rgba(var(--elrgb,255,255,255),.22) 96deg, rgba(var(--elrgb,255,255,255),0) 180deg, rgba(var(--elrgb,255,255,255),.14) 264deg, rgba(var(--elrgb,255,255,255),0) 360deg);
  filter:blur(14px) saturate(1.06);
  opacity:0;
}
.pv-pick-reveal-sigil-wrap{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:2;
}
.pv-pick-reveal-sigil-ring{
  display:none;
}
.pv-pick-reveal-sigil{
  position:relative;
  z-index:1;
  width:22%;
  aspect-ratio:1/1;
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(var(--elrgb,255,255,255),.38));
  opacity:0;
  transform:scale(.72) translateY(10px);
}
.pv-pick-reveal-sweep{
  position:absolute;
  inset:-18% auto -18% -62%;
  width:52%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.46), rgba(255,255,255,0));
  transform:skewX(-22deg) translateX(0);
  opacity:0;
  filter:blur(8px);
  z-index:3;
}
.pv-pick-reveal-overlay.play{
  animation:pvPickRevealWrap 2.98s cubic-bezier(.2,.82,.2,1) forwards;
}
.pv-pick-reveal-overlay.play .pv-pick-reveal-flash{
  animation:pvPickRevealFlash 2.98s ease-out forwards;
}
.pv-pick-reveal-overlay.play .pv-pick-reveal-glow{
  animation:pvPickRevealGlow 2.98s ease-out forwards;
}
.pv-pick-reveal-overlay.play .pv-pick-reveal-sigil-ring{
  animation:pvPickRevealRing 2.98s cubic-bezier(.2,.84,.2,1) forwards;
}
.pv-pick-reveal-overlay.play .pv-pick-reveal-sigil{
  animation:pvPickRevealSigil 2.98s cubic-bezier(.2,.84,.2,1) forwards;
}
.pv-pick-reveal-overlay.play .pv-pick-reveal-sweep{
  animation:pvPickRevealSweep 2.98s ease-out forwards;
}
.pv-pick-reveal-overlay.pv-pick-reveal-overlay--force-exit{
  animation:pvPickRevealForceOut .28s ease forwards !important;
}
.pv-pick-reveal-overlay.pv-pick-reveal-overlay--force-exit .pv-pick-reveal-flash,
.pv-pick-reveal-overlay.pv-pick-reveal-overlay--force-exit .pv-pick-reveal-glow,
.pv-pick-reveal-overlay.pv-pick-reveal-overlay--force-exit .pv-pick-reveal-sigil-ring,
.pv-pick-reveal-overlay.pv-pick-reveal-overlay--force-exit .pv-pick-reveal-sigil,
.pv-pick-reveal-overlay.pv-pick-reveal-overlay--force-exit .pv-pick-reveal-sweep{
  animation:none !important;
}
.pv-pick-reveal-overlay.pv-pick-reveal-overlay--force-exit .pv-pick-reveal-flash,
.pv-pick-reveal-overlay.pv-pick-reveal-overlay--force-exit .pv-pick-reveal-glow,
.pv-pick-reveal-overlay.pv-pick-reveal-overlay--force-exit .pv-pick-reveal-sigil-ring,
.pv-pick-reveal-overlay.pv-pick-reveal-overlay--force-exit .pv-pick-reveal-sigil,
.pv-pick-reveal-overlay.pv-pick-reveal-overlay--force-exit .pv-pick-reveal-sweep{
  opacity:inherit;
}
@keyframes pvPickRevealWrap{
  0%{ opacity:0; }
  12%{ opacity:1; }
  56%{ opacity:1; }
  74%{ opacity:0; }
  100%{ opacity:0; }
}
@keyframes pvPickRevealFlash{
  0%{ opacity:0; transform:scale(.86); }
  12%{ opacity:.78; transform:scale(1.02); }
  34%{ opacity:.20; transform:scale(1.08); }
  58%{ opacity:.12; transform:scale(1.10); }
  76%{ opacity:0; transform:scale(1.14); }
  100%{ opacity:0; transform:scale(1.14); }
}
@keyframes pvPickRevealGlow{
  0%{ opacity:0; transform:scale(.84); }
  18%{ opacity:.62; transform:scale(1); }
  58%{ opacity:.36; transform:scale(1.08); }
  76%{ opacity:0; transform:scale(1.12); }
  100%{ opacity:0; transform:scale(1.12); }
}
@keyframes pvPickRevealRing{
  0%{ opacity:0; transform:scale(.72) rotate(-18deg); }
  18%{ opacity:.94; transform:scale(1) rotate(16deg); }
  52%{ opacity:.44; transform:scale(1.08) rotate(88deg); }
  76%{ opacity:0; transform:scale(1.16) rotate(126deg); }
  100%{ opacity:0; transform:scale(1.16) rotate(126deg); }
}
@keyframes pvPickRevealSigil{
  0%{ opacity:0; transform:scale(.72) translateY(10px); }
  18%{ opacity:1; transform:scale(1) translateY(0); }
  56%{ opacity:1; transform:scale(.96) translateY(0); }
  76%{ opacity:0; transform:scale(.82) translateY(-8px); }
  100%{ opacity:0; transform:scale(.82) translateY(-8px); }
}
@keyframes pvPickRevealSweep{
  0%{ opacity:0; transform:skewX(-22deg) translateX(0); }
  20%{ opacity:.62; }
  42%{ opacity:.26; }
  76%{ opacity:0; transform:skewX(-22deg) translateX(265%); }
  100%{ opacity:0; transform:skewX(-22deg) translateX(265%); }
}
#postdraft-panel .pd-no-id-banner{
  display:none;
  width:100%;
  text-align:center;
  font-weight:1000;
  letter-spacing:.5px;
  padding:6px 0 2px;
  border:none;
  background:transparent;
  box-shadow:none;
  color:#eef6ff;
}
#postdraft-panel.no-final-id .pd-no-id-banner{ display:block; }
#postdraft-panel.no-final-id .pd-id-row,
#postdraft-panel.no-final-id .pd-status-row{ display:none !important; }

/* Tiempos por separado. */
#pd-separate-times-host{ width:100%; }
#postdraft-panel .pd-times-toggle{
  margin-inline:auto;
  min-width:250px;
}
#postdraft-panel .pd-times-grid{
  grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);
  width:100%;
}
#postdraft-panel .pd-times-side,
#postdraft-panel .pd-times-center{
  overflow:hidden;
  min-width:0;
}
#postdraft-panel .pd-times-side-title{
  font-size:16px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#postdraft-panel .pd-time-row{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  align-items:center;
  gap:10px;
}
#postdraft-panel .pd-time-row label{
  width:auto;
  white-space:nowrap;
  font-size:12px;
}
#postdraft-panel .pd-time-input{
  width:100%;
  min-width:0;
  max-width:100%;
}
#postdraft-panel .pd-time-input.is-better{
  color:#8cff9b;
  border-color:rgba(90,255,126,.45);
  box-shadow:0 0 0 1px rgba(90,255,126,.12) inset;
}
#postdraft-panel .pd-time-input.is-worse{
  color:#ff8d8d;
  border-color:rgba(255,110,110,.38);
  box-shadow:0 0 0 1px rgba(255,110,110,.10) inset;
}
#postdraft-panel .pd-times-diff-main .pd-winner-name{
  font-weight:1000;
}
#postdraft-panel .pd-times-diff-main .pd-winner-name.p1{ color:var(--p1); }
#postdraft-panel .pd-times-diff-main .pd-winner-name.p2{ color:var(--p2); }
#postdraft-panel .pd-times-diff-sub .pd-total-p1{ color:var(--p1); }
#postdraft-panel .pd-times-diff-sub .pd-total-p2{ color:var(--p2); }
@media (max-width: 980px){
  #draft-container{ height:calc(100vh - 74px); }
}


/* Draft normal polish. */
header{ padding:4px 12px 0 !important; }
#draft-container{
  height:calc(100vh - 58px) !important;
  margin-top:-24px !important;
  padding:0 18px 10px !important;
  align-items:flex-start !important;
}
#team1, #team2{ margin-top:-30px !important; }
#draft-info{ margin-top:0 !important; }
.team-section{ padding:10px 10px 8px !important; }
.team-slots-container{ grid-template-rows:repeat(4,200px) !important; gap:12px !important; }
.slot{ height:200px !important; }

#characters-scroll{
  scroll-behavior:auto !important;
  overscroll-behavior:contain !important;
  -webkit-overflow-scrolling:touch;
}
#characters-scroll::-webkit-scrollbar{ width:0 !important; height:0 !important; }

.final-pick-img{
  opacity:1 !important;
  animation:hoverUp 3s ease-in-out infinite !important;
}

#postdraft-panel .pd-times-side-title{
  font-size:18px !important;
  font-weight:1000 !important;
}
#postdraft-panel .pd-time-row{
  grid-template-columns:92px minmax(0,132px) !important;
  justify-content:center !important;
}
#postdraft-panel .pd-time-row label{
  font-size:14px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
#postdraft-panel .pd-time-input{
  max-width:132px !important;
  min-width:0 !important;
}
#postdraft-panel .pd-times-total{
  font-size:14px !important;
  font-weight:900 !important;
}
#postdraft-panel .pd-times-diff-sub,
#postdraft-panel .pd-times-meta{
  font-size:13px !important;
}


/* Draft normal over. */
/* El header sólo ocupa la huella visual del título y no tapa la zona de jugadores. */
header{
  display:inline-grid !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 auto !important;
  justify-items:center !important;
  align-content:start !important;
  pointer-events:none;
  z-index:4 !important;
}
header > *{ pointer-events:auto; }
.site-title{
  display:inline-flex !important;
  width:max-content !important;
  max-width:100% !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
  animation:none !important;
}
.site-title-link{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  text-decoration:none;
  display:inline-block;
  background:linear-gradient(90deg,#79f0ff,#ff75f2,#ffe275,#79f0ff) !important;
  background-size:400% 100% !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  animation:titleGlow 10s linear infinite !important;
  text-shadow:0 2px 18px rgba(0,0,0,.65);
  transition:filter .18s ease, text-shadow .18s ease, opacity .18s ease;
  opacity:1 !important;
}
.site-title-link:hover,
.site-title-link:focus-visible{
  opacity:1 !important;
  filter:brightness(1.08) drop-shadow(0 0 12px rgba(255,255,255,.16));
  text-shadow:0 2px 18px rgba(0,0,0,.65), 0 0 14px rgba(255,255,255,.14);
  outline:none;
}
body.pv-site-title-elemental .site-title-link{
  background:none !important;
  color:var(--pv-site-title-color, #e8eaed) !important;
  -webkit-text-fill-color:var(--pv-site-title-color, #e8eaed) !important;
  text-shadow:0 2px 18px rgba(0,0,0,.72), 0 0 12px rgba(var(--pv-site-title-rgb,232,234,237), .18);
  animation:pvTitleElementIn .55s ease-out 1 !important;
}

/* La zona de jugadores y picks debe verse por encima de todo. */
#draft-container{
  overflow:visible !important;
  position:relative;
  z-index:20;
}
#draft-info,
.team-section,
.team-slots-container,
.slot{
  position:relative;
  z-index:21;
}
.team-section,
#draft-info{
  overflow:visible !important;
}

/* El panel de sonido se abre desde el mismo icono sin subir al tope. */
#volume-control{
  top:auto !important;
  bottom:18px !important;
  left:18px !important;
}
#volume-toggle{
  bottom:18px !important;
  left:18px !important;
}

/* Tiempos por separado: texto más limpio. */
#postdraft-panel .pd-times-total{
  font-size:14px !important;
  font-weight:900 !important;
}


/* Draft normal polish. */
#postdraft-panel .pd-no-id-banner{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:2px 0 6px !important;
}
#postdraft-panel .pd-times-footer{
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
}
#postdraft-panel .pd-times-total{
  font-size:15px !important;
  font-weight:1000 !important;
  opacity:.96 !important;
  white-space:nowrap !important;
  text-align:center !important;
}

/* Draft normal polish. */
#postdraft-panel.no-final-id .pd-swap-hint{
  margin-bottom: 14px !important;
}
#postdraft-panel .pd-no-id-banner{
  margin-top: 8px;
}


/* Draft normal trailer sync/quality. */
#background-trailer,
video#background-trailer{
  z-index:1 !important;
  filter:none !important;
  image-rendering:auto !important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
  will-change:opacity;
  transition:opacity .25s ease !important;
  pointer-events:none !important;
}
body:not(.pv-trailer-open) #background-trailer,
body:not(.pv-trailer-open) video#background-trailer{
  opacity:0 !important;
}
body.pv-trailer-open #background-trailer,
body.pv-trailer-open video#background-trailer{
  opacity:.99 !important;
}


.slot video,
.slot video.incoming-video,
.slot video.incoming-video.active,
.final-pick-video,
video.final-pick-video{
  filter:none !important;
  image-rendering:auto !important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
}
.slot video.incoming-video.active{
  opacity:1 !important;
}


body.pv-mode-pola #pola-infobar{
  gap:8px !important;
  margin:4px 0 6px !important;
}
body.pv-mode-pola #pola-infobar .chip{
  margin:0 !important;
}
body.pv-mode-pola #current-action{
  margin:0 0 4px !important;
}
body.pv-mode-pola #dual-timers{
  margin:0 0 8px !important;
}
body.pv-mode-pola #extra-bans,
body.pv-mode-pola #bans-container{
  padding:4px 4px 5px !important;
  margin:2px 0 2px !important;
}
body.pv-mode-pola #bans-container .bans-line{
  gap:6px 10px !important;
}
body.pv-mode-pola .secure-bans-wrap{
  padding:5px 6px 6px !important;
  border-radius:12px !important;
  box-shadow:0 6px 14px rgba(0,0,0,.18) !important;
}
body.pv-mode-pola .secure-bans-wrap > h4,
body.pv-mode-pola .secure-bans-wrap > h3,
body.pv-mode-pola .secure-bans-wrap .secure-title,
body.pv-mode-pola .secure-bans-wrap .bans-secure-title{
  margin:0 0 4px !important;
  font-size:12px !important;
  line-height:1.05 !important;
}
body.pv-mode-pola .secure-bans-wrap .bans-group{
  min-height:54px !important;
  gap:8px !important;
}
body.pv-mode-pola #filter-bar{
  margin-top:4px !important;
  padding:8px 8px !important;
}
body.pv-mode-pola #filter-bar > div{
  margin:4px 0 !important;
}
body.pv-mode-pola #characters-scroll{
  margin-top:4px !important;
  padding-top:4px !important;
}


/* Ajuste fino layout POLA, badges grid. */
body.pv-mode-pola #draft-container{
  margin-top: -6px !important;
}

/* En TODOS, las badges superiores no deben sobresalir tanto y cortarse arriba. */
.character .grid-badge[style*="top: 4px"][style*="left: 4px"],
.character .grid-badge[style*="top: 4px"][style*="right: 4px"]{
  transform: translate(-7px, -4px);
}
.character .grid-badge[style*="top: 4px"][style*="right: 4px"]{
  transform: translate(7px, -4px);
}
.character .grid-badge-x[style*="top: -6px"][style*="left: -6px"],
.character .grid-badge-x[style*="top: -6px"][style*="right: -6px"]{
  transform: translateY(4px);
}


#draft-info{
  border: none !important;
  box-shadow: none !important;
}


/* /Separate Times admin lock. */
#postdraft-panel .pd-times-topbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
#pd-separate-times-host.pd-times-host-locked .pd-times-side,
#pd-separate-times-host.pd-times-host-locked .pd-times-center{
  box-shadow: inset 0 0 0 1px rgba(255,215,0,.12);
}
#postdraft-panel .pd-time-input:disabled,
#postdraft-panel .pd-times-ready:disabled{
  opacity:.68;
  cursor:not-allowed;
}
#pd-admin-lock-floating{
  position:fixed;
  top:14px;
  right:18px;
  z-index:1200;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
#pd-admin-lock-btn{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(15,18,28,.82);
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
#pd-admin-lock-btn:hover{ filter:brightness(1.06); }
#pd-admin-lock-floating.is-on #pd-admin-lock-btn{
  border-color:rgba(255,215,0,.40);
  box-shadow:0 10px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(255,215,0,.18) inset;
}
#pd-admin-lock-state{
  font-size:11px;
  font-weight:900;
  letter-spacing:.6px;
  color:#ffe082;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}


/* Post-draft listo (solo modo normal). */
#pd-normal-ready-bar{
  display:none;
  position:relative;
  align-items:center;
  justify-content:center;
  margin:14px 0 18px;
  min-height:96px;
  padding:18px 190px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.09), rgba(255,255,255,.03) 42%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, rgba(22,28,44,.74), rgba(10,13,20,.78));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 16px 40px rgba(0,0,0,.26),
    0 0 0 1px rgba(255,255,255,.03);
  overflow:visible;
}
#pd-normal-ready-bar::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.05);
  pointer-events:none;
}
#pd-normal-ready-bar .pd-normal-ready-text{
  width:100%;
  font-weight:900;
  font-size:15px;
  line-height:1.25;
  letter-spacing:.28px;
  text-align:center;
  text-wrap:balance;
  color:#f7fbff;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}
#pd-normal-ready-bar .pd-normal-ready-actions{
  display:contents;
}
#pd-normal-ready-bar .pd-final-ready-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  min-width:156px;
  height:56px;
  padding:0 20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  font-size:14px;
  font-weight:900;
  letter-spacing:.45px;
  text-transform:uppercase;
  color:#fff;
  backdrop-filter:blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 24px rgba(0,0,0,.28);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease, background .18s ease;
  overflow:hidden;
}
#pd-normal-ready-bar .pd-final-ready-btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(120deg, transparent 10%, rgba(255,255,255,.18) 48%, transparent 82%);
  opacity:.7;
  transform:translateX(-115%);
  transition:transform .42s ease;
  pointer-events:none;
}
#pd-normal-ready-bar .pd-final-ready-btn:hover:not(:disabled){
  transform:translateY(-50%) scale(1.03);
  filter:brightness(1.06);
}
#pd-normal-ready-bar .pd-final-ready-btn:hover:not(:disabled)::before{
  transform:translateX(115%);
}
#pd-normal-ready-bar .pd-final-ready-btn:disabled{
  opacity:.55;
  filter:saturate(.7);
}
#pd-final-ready-p1{
  left:18px;
  background:linear-gradient(180deg, rgba(10,163,255,.36), rgba(10,163,255,.18));
  border-color:rgba(10,163,255,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 24px rgba(0,0,0,.28),
    0 0 22px rgba(10,163,255,.18);
}
#pd-final-ready-p2{
  right:18px;
  background:linear-gradient(180deg, rgba(255,77,77,.34), rgba(255,77,77,.17));
  border-color:rgba(255,77,77,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 24px rgba(0,0,0,.28),
    0 0 22px rgba(255,77,77,.16);
}
#pd-normal-ready-bar .pd-final-ready-btn.is-ready{
  background:linear-gradient(180deg, rgba(83,217,118,.42), rgba(57,158,84,.26));
  border-color:rgba(117,255,158,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 12px 28px rgba(0,0,0,.28),
    0 0 26px rgba(97,255,146,.22);
}
body.draft-finished #postdraft-panel.pd-await-final-ready{
  display:none !important;
}
@media (max-width: 1280px){
  #pd-normal-ready-bar{
    min-height:unset;
    padding:16px 18px 18px;
    gap:14px;
    flex-direction:column;
  }
  #pd-normal-ready-bar .pd-normal-ready-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    width:100%;
  }
  #pd-normal-ready-bar .pd-final-ready-btn{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    transform:none;
    min-width:170px;
  }
  #pd-normal-ready-bar .pd-final-ready-btn:hover:not(:disabled){
    transform:translateY(-1px) scale(1.02);
  }
}


/* Fullscreen toggle (). */
.pv-fullscreen-btn{
  position:fixed;
  top:50px;
  left:9px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:none;
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(20,24,34,.92), rgba(10,12,18,.88)),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  box-shadow:
    0 10px 24px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.09),
    inset 0 1px 0 rgba(255,255,255,.08);
  cursor:pointer;
  z-index:1206;
  color:#edf2ff;
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease, background .22s ease;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}
.pv-fullscreen-btn::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:11px;
  background: radial-gradient(100% 100% at 50% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 62%);
  pointer-events:none;
}
.pv-fullscreen-btn:hover{
  transform: translateY(-1px) scale(1.035);
  filter: brightness(1.05);
  box-shadow:
    0 14px 28px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.13),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(158,191,255,.10);
}
.pv-fullscreen-btn:active{
  transform: translateY(0) scale(.98);
}
.pv-fullscreen-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px rgba(173,214,255,.40),
    0 12px 28px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.12);
}
.pv-fullscreen-icon{
  width:15px;
  height:15px;
  display:block;
  position:relative;
  z-index:1;
  --fsicon: rgba(239,244,255,.96);
  background:
    linear-gradient(var(--fsicon),var(--fsicon)) left top/6px 2px no-repeat,
    linear-gradient(var(--fsicon),var(--fsicon)) left top/2px 6px no-repeat,
    linear-gradient(var(--fsicon),var(--fsicon)) right top/6px 2px no-repeat,
    linear-gradient(var(--fsicon),var(--fsicon)) right top/2px 6px no-repeat,
    linear-gradient(var(--fsicon),var(--fsicon)) left bottom/6px 2px no-repeat,
    linear-gradient(var(--fsicon),var(--fsicon)) left bottom/2px 6px no-repeat,
    linear-gradient(var(--fsicon),var(--fsicon)) right bottom/6px 2px no-repeat,
    linear-gradient(var(--fsicon),var(--fsicon)) right bottom/2px 6px no-repeat;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.14));
  transition: transform .22s ease, filter .22s ease, opacity .22s ease, background-size .22s ease;
}
body.pv-is-fullscreen .pv-fullscreen-btn{
  background:
    linear-gradient(180deg, rgba(27,33,46,.95), rgba(12,15,22,.92)),
    linear-gradient(180deg, rgba(142,180,255,.16), rgba(255,255,255,0));
  box-shadow:
    0 14px 30px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(160,196,255,.20),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 18px rgba(110,150,255,.12);
}
body.pv-is-fullscreen .pv-fullscreen-icon{
  transform: scale(.96);
  --fsicon: rgba(214,230,255,.98);
  background:
    linear-gradient(var(--fsicon),var(--fsicon)) 3px 3px/5px 2px no-repeat,
    linear-gradient(var(--fsicon),var(--fsicon)) 3px 3px/2px 5px no-repeat,
    linear-gradient(var(--fsicon),var(--fsicon)) calc(100% - 3px) 3px/5px 2px no-repeat,
    linear-gradient(var(--fsicon),var(--fsicon)) calc(100% - 3px) 3px/2px 5px no-repeat,
    linear-gradient(var(--fsicon),var(--fsicon)) 3px calc(100% - 3px)/5px 2px no-repeat,
    linear-gradient(var(--fsicon),var(--fsicon)) 3px calc(100% - 3px)/2px 5px no-repeat,
    linear-gradient(var(--fsicon),var(--fsicon)) calc(100% - 3px) calc(100% - 3px)/5px 2px no-repeat,
    linear-gradient(var(--fsicon),var(--fsicon)) calc(100% - 3px) calc(100% - 3px)/2px 5px no-repeat;
}
body.pv-is-fullscreen{
  --ui-zoom: 1;
}
body.pv-is-fullscreen #draft-container{
  max-width: 1840px;
}
body.pv-is-fullscreen .pv-corner-logo{
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.70));
}

/* Fullscreen layout polish. */
body.pv-is-fullscreen header{
  margin-top: 14px !important;
}
body.pv-is-fullscreen #draft-container{
  max-width: 1840px;
  margin-top: -6px !important;
}
body.pv-is-fullscreen #draft-info{
  margin-top: 10px !important;
}
body.pv-is-fullscreen .team-section{
  padding: 12px 12px 10px !important;
}
body.pv-is-fullscreen .team-slots-container{
  grid-template-rows: repeat(4, 216px) !important;
  gap: 12px !important;
}
body.pv-is-fullscreen .slot{
  height: 216px !important;
}


/* Permabans hover suave en modo pola. */
.permabans-bar .permaban-card,
.permabans-bar .permaban-card::before,
.permabans-bar .permaban-card img,
#permabans-bar img{
  transition: transform .24s cubic-bezier(.22,.9,.2,1), box-shadow .24s ease, filter .24s ease, opacity .24s ease !important;
}
.permabans-bar .permaban-card:hover{
  transform: translateY(-6px) scale(1.01) !important;
}
.permabans-bar .permaban-card:hover::before{
  opacity: .92 !important;
}
.permabans-bar .permaban-card:hover img,
#permabans-bar .permaban-card:hover img,
#permabans-bar img:hover{
  transform: translate3d(0,-10px,0) scale(1.03) !important;
  box-shadow:
    0 22px 44px rgba(0,0,0,.62),
    0 0 0 2px rgba(0,0,0,.20) inset,
    0 0 34px rgba(140,90,255,.26) !important;
}


/* PV preview layer ligera para el draft normal. */
.slot-preview-layer{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
  contain:paint;
}
.slot-preview-poster,
.slot-preview-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
  filter:none !important;
  image-rendering:auto !important;
  background:transparent !important;
}
.slot-preview-poster{
  z-index:1;
}
.slot-preview-video{
  z-index:2;
  opacity:0;
  transition:opacity .18s linear;
}
.slot-preview-video.active{
  opacity:1;
}
.slot.picking-active > *:not(.slot-preview-layer){
  position:relative;
  z-index:3;
}


body.pv-page-paused .rank-badge,
body.pv-page-paused .rank-badge::before,
body.pv-page-paused .rank-badge::after,
body.pv-page-paused .team-active,
body.pv-page-paused .slot.finalized::before,
body.pv-page-paused .pv-toprank-box,
body.pv-page-paused .pv-rankbanner,
body.pv-page-paused .pv-toprank-box::after,
body.pv-page-paused .pv-rankbanner::before,
body.pv-page-paused .pv-rankbanner::after,
body.pv-page-paused .player-meta .title-badge,
body.pv-page-paused .player-meta .title-badge::before,
body.pv-page-paused .player-meta .title-badge::after,
body.pv-page-paused .slot.pv-slot-top1{
  animation-play-state:paused !important;
}


/* Solo mientras el trailer de PJ está activo/cargando. Mantiene el fondo normal fuera de eso. */
body.pv-trailer-hard-perf #background-trailer,
body.pv-trailer-hard-perf video#background-trailer,
body.pv-trailer-open #background-trailer,
body.pv-trailer-open video#background-trailer{
  filter:none !important;
  image-rendering:auto !important;
  box-shadow:none !important;
  contain:paint !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  transform:translateZ(0) !important;
}


/* Frenar capas decorativas que en el normal siguen compitiendo con el trailer. */
body.pv-trailer-hard-perf .team-section,
body.pv-trailer-hard-perf #draft-info,
body.pv-trailer-hard-perf #volume-control,
body.pv-trailer-hard-perf #characters-scroll,
body.pv-trailer-hard-perf .extra-chip,
body.pv-trailer-hard-perf .permaban-card,
body.pv-trailer-open .team-section,
body.pv-trailer-open #draft-info,
body.pv-trailer-open #volume-control,
body.pv-trailer-open #characters-scroll,
body.pv-trailer-open .extra-chip,
body.pv-trailer-open .permaban-card{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}

body.pv-trailer-hard-perf .team-section::before,
body.pv-trailer-hard-perf .team-section::after,
body.pv-trailer-hard-perf .slot.finalized::before,
body.pv-trailer-hard-perf .character::before,
body.pv-trailer-hard-perf .permaban-card::before,
body.pv-trailer-hard-perf .pv-toprank-box::after,
body.pv-trailer-hard-perf .pv-rankbanner::before,
body.pv-trailer-hard-perf .pv-rankbanner::after,
body.pv-trailer-hard-perf .rank-badge::before,
body.pv-trailer-hard-perf .rank-badge::after,
body.pv-trailer-open .team-section::before,
body.pv-trailer-open .team-section::after,
body.pv-trailer-open .slot.finalized::before,
body.pv-trailer-open .character::before,
body.pv-trailer-open .permaban-card::before,
body.pv-trailer-open .pv-toprank-box::after,
body.pv-trailer-open .pv-rankbanner::before,
body.pv-trailer-open .pv-rankbanner::after,
body.pv-trailer-open .rank-badge::before,
body.pv-trailer-open .rank-badge::after{
  opacity:0 !important;
  animation:none !important;
  filter:none !important;
  background:none !important;
  box-shadow:none !important;
}

body.pv-trailer-hard-perf .rank-badge,
body.pv-trailer-hard-perf .team-active,
body.pv-trailer-hard-perf .pv-toprank-box,
body.pv-trailer-hard-perf .pv-rankbanner,
body.pv-trailer-hard-perf .player-meta .title-badge,
body.pv-trailer-hard-perf .slot.pv-slot-top1,
body.pv-trailer-hard-perf .permaban-card img,
body.pv-trailer-open .rank-badge,
body.pv-trailer-open .team-active,
body.pv-trailer-open .pv-toprank-box,
body.pv-trailer-open .pv-rankbanner,
body.pv-trailer-open .player-meta .title-badge,
body.pv-trailer-open .slot.pv-slot-top1,
body.pv-trailer-open .permaban-card img{
  animation-play-state:paused !important;
}

/* El grid de TODOS castiga mucho por halos y sombras mientras el trailer sigue vivo. */
body.pv-trailer-hard-perf .character,
body.pv-trailer-open .character{
  box-shadow:none !important;
}
body.pv-trailer-hard-perf .character:hover,
body.pv-trailer-hard-perf .character.picked-temp,
body.pv-trailer-open .character:hover,
body.pv-trailer-open .character.picked-temp{
  transform:none !important;
  box-shadow:none !important;
}

/* Mantener vivos los videos del slot, pero sin decoración extra alrededor. */
body.pv-trailer-hard-perf .slot-preview-video,
body.pv-trailer-hard-perf .slot video.incoming-video,
body.pv-trailer-open .slot-preview-video,
body.pv-trailer-open .slot video.incoming-video{
  animation-play-state:running !important;
  filter:none !important;
}


/* PRIME: polish visual del draft normal (solo diseño). */
#draft-info{
  padding-top:56px !important;
}

#dual-timers{
  position:absolute;
  top:12px;
  left:16px;
  right:16px;
  width:auto;
  margin:0 !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  z-index:4;
  pointer-events:none;
}

.timer{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:112px;
  padding:7px 12px;
  border-radius:12px;
  font-size:20px;
  font-weight:900;
  line-height:1;
  background:rgba(6, 10, 18, .22) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.16);
  backdrop-filter:blur(2px) saturate(120%);
  -webkit-backdrop-filter:blur(2px) saturate(120%);
}

.timer::before{
  content:"";
  width:14px;
  height:14px;
  flex:0 0 14px;
  box-sizing:border-box;
  border:2px solid currentColor;
  border-radius:50%;
  opacity:.92;
  background:
    linear-gradient(currentColor, currentColor) center 27% / 2px 4px no-repeat,
    linear-gradient(currentColor, currentColor) 66% 54% / 4px 2px no-repeat;
}

#current-action{
  font-size:16px !important;
  line-height:1.12;
  padding:0 132px;
  margin:0 0 8px !important;
  text-wrap:balance;
}

#extra-bans,
#bans-container{
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.secure-bans-wrap,
#extra-bans .secure-bans-wrap,
#bans-container .secure-bans-wrap{
  background:rgba(0,0,0,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#filter-bar,
#filter-bar > div,
#filter-bar h4{
  background:transparent !important;
}

#filter-bar .filter-button{
  background:rgba(0,0,0,.08) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:none !important;
}

#filter-bar .filter-button:hover{
  background:rgba(255,255,255,.12) !important;
}

#filter-bar .filter-button.active{
  background:rgba(124, 232, 170, .16) !important;
  border-color:rgba(124, 232, 170, .34) !important;
  box-shadow:0 0 0 1px rgba(124, 232, 170, .12), 0 0 12px rgba(124, 232, 170, .10) !important;
}

#filter-bar .filter-button.element,
#filter-bar .filter-button.weapon{
  padding:2px 7px;
}

#filter-bar .filter-button .filter-image{
  border-radius:999px;
}

#filter-bar .filter-button .filter-image img{
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.22));
}

/* 04-19) — PRIME Bans sin fondo negro/opaco para que el trailer se vea a través - Fondo default estático, bonito y ultra-ligero (sin animaciones). */

/* BANS / EXTRA BANS / PERMABANS: transparencias limpias. */
#bans-container,
#extra-bans,
#permabans-bar.permabans-bar,
.secure-bans-wrap,
#bans-container .bans-line,
#extra-bans .bans-line,
#bans-container .bans-col,
#extra-bans .bans-col,
#bans-container .bans-group,
#extra-bans .bans-group{
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.secure-bans-wrap,
#permabans-bar.permabans-bar{
  border-color: rgba(255,255,255,.08) !important;
}

.banned-char-img,
#permabans-bar img,
#extra-bans .banned-char-img{
  background: transparent !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}

/* FONDO DEFAULT: estático, elegante y barato. */
body{
  background: #07080d !important;
}


/* Clock a bit bigger, default background with more visible color Static only. No animation. */

.timer::before{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
  border-width:2px !important;
  background:
    linear-gradient(currentColor, currentColor) center 26% / 2px 5px no-repeat,
    linear-gradient(currentColor, currentColor) 67% 56% / 5px 2px no-repeat !important;
}

body{
  background:#080912 !important;
}


/* PRIME: pola chips arriba, panel ojo colapsable. */
body.pv-mode-pola #pola-infobar{
  position:absolute !important;
  top:12px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px !important;
  z-index:5;
  pointer-events:none;
  max-width:calc(100% - 290px);
}
body.pv-mode-pola #pola-infobar .chip{
  padding:6px 10px !important;
  border-radius:999px !important;
  background:rgba(6, 10, 18, .20) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.10) !important;
  backdrop-filter:blur(2px) saturate(120%);
  -webkit-backdrop-filter:blur(2px) saturate(120%);
  color:#eef5ff !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:.45px !important;
  white-space:nowrap;
}
body.pv-mode-pola #pola-infobar .phase-chip{ color:#f4deff !important; }
body.pv-mode-pola #pola-infobar .series-chip{ color:#dce7ff !important; }

#postdraft-panel{
  overflow:visible !important;
}
#postdraft-panel .pd-collapse-toolbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:100%;
  margin:0 0 8px;
}
#postdraft-panel .pd-collapse-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  min-width:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(8, 11, 20, .26);
  box-shadow:0 10px 22px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.03);
  color:#eef4ff;
  cursor:pointer;
  transition:transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
  backdrop-filter:blur(2px) saturate(120%);
  -webkit-backdrop-filter:blur(2px) saturate(120%);
}
#postdraft-panel .pd-collapse-btn:hover{
  transform:translateY(-1px);
  background:rgba(12, 18, 30, .34);
  border-color:rgba(255,255,255,.22);
}
#postdraft-panel .pd-collapse-btn.is-collapsed{
  background:rgba(76, 54, 140, .26);
  border-color:rgba(196, 166, 255, .30);
}
#postdraft-panel .pd-eye-ico{
  position:relative;
  display:block;
  width:18px;
  height:11px;
  border:2px solid currentColor;
  border-radius:18px / 11px;
  box-sizing:border-box;
  opacity:.96;
  transition:transform .24s ease, border-color .24s ease, opacity .24s ease;
}
#postdraft-panel .pd-eye-ico::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  border-radius:999px;
  background:currentColor;
  transform:translate(-50%, -50%);
  transition:opacity .18s ease, transform .18s ease;
}
#postdraft-panel .pd-eye-ico::after{
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  top:50%;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transform:translateY(-50%) scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}
#postdraft-panel .pd-collapse-btn.is-collapsed .pd-eye-ico::before{
  opacity:0;
  transform:translate(-50%, -50%) scale(.35);
}
#postdraft-panel .pd-collapse-btn.is-collapsed .pd-eye-ico::after{
  opacity:.96;
  transform:translateY(-50%) scaleX(1);
}
#postdraft-panel .pd-collapse-region{
  width:100%;
  overflow:hidden;
  max-height:1200px;
  opacity:1;
  transform:none;
  transition:max-height .38s cubic-bezier(.22,.72,.2,1), margin .34s ease;
  will-change:max-height;
}
#postdraft-panel.pd-info-collapsed{
  width:fit-content !important;
  max-width:100% !important;
  margin:6px 0 6px auto !important;
  display:block !important;
  justify-items:unset !important;
}
#postdraft-panel.pd-info-collapsed .pd-collapse-toolbar{
  width:auto !important;
  margin:0 !important;
}
#postdraft-panel.pd-info-collapsed .pd-collapse-region{
  max-height:0 !important;
  opacity:1;
  transform:none;
  margin:0 !important;
  pointer-events:none;
}
#postdraft-panel.pd-hide-collapse-content .pd-collapse-region > *{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
#postdraft-panel .pd-collapse-region > #pd-separate-times-host,
#postdraft-panel .pd-collapse-region > .pd-no-id-banner,
#postdraft-panel .pd-collapse-region > .pd-row{
  width:100%;
}

/* Despegar current-action del panel post-draft para que no tape el botón de tiempos. */
body.draft-finished #postdraft-panel{
  margin-bottom: 18px !important;
}
body.draft-finished #current-action{
  margin-top: 6px !important;
}
#postdraft-panel:not(.pd-info-collapsed) #pd-separate-times-host{
  margin-top: 4px;
}

/* Tiempos por separado con gris más visible, igual línea visual que COPIAR ID. */
#postdraft-panel .pd-times-toggle{
  background: rgba(28, 31, 39, .78) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.03) !important;
}
#postdraft-panel .pd-times-toggle:hover{
  background: rgba(34, 38, 48, .84) !important;
  border-color: rgba(255,255,255,.24) !important;
}
#postdraft-panel .pd-times-side,
#postdraft-panel .pd-times-center{
  background: rgba(28, 31, 39, .74) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.02) !important;
}
#postdraft-panel .pd-time-input{
  background: rgba(44, 48, 60, .82) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* PRIME: keep TOP/THE BEST pick banners alive during trailers. */
/* Problema: el modo del trailer pausaba también los banners de Ranking Characters (TOP 2-5 / THE BEST), así que la entrada/salida y el brillo no se veían mientras había trailer de fondo. Solución: dejar el recorte/global para el resto del draft, pero EXCLUIR estos banners y restaurar su animación/estilo completo en los modos ligados al trailer. */
body.pv-perf-video .pv-rankbanner,
body.pv-trailer-hard-perf .pv-rankbanner,
body.pv-trailer-open .pv-rankbanner{
  background: linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.62)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 18px 54px rgba(0,0,0,.62),
    0 0 0 1px rgba(var(--elrgb), .30) inset !important;
  backdrop-filter: blur(10px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(135%) !important;
  animation-play-state: running !important;
}

body.pv-perf-video .pv-rankbanner.pv-rankbanner--best,
body.pv-trailer-hard-perf .pv-rankbanner.pv-rankbanner--best,
body.pv-trailer-open .pv-rankbanner.pv-rankbanner--best{
  background: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.64)) !important;
}

body.pv-perf-video .pv-rankbanner::before,
body.pv-trailer-hard-perf .pv-rankbanner::before,
body.pv-trailer-open .pv-rankbanner::before{
  opacity: .55 !important;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(var(--elrgb), .20), transparent 58%),
    linear-gradient(90deg, rgba(var(--elrgb), .22), transparent 55%) !important;
  filter: none !important;
  box-shadow: none !important;
}

body.pv-perf-video .pv-rankbanner::after,
body.pv-trailer-hard-perf .pv-rankbanner::after,
body.pv-trailer-open .pv-rankbanner::after{
  opacity: 0 !important;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 45%, transparent 62%) !important;
  transform: translateX(-120%) !important;
  filter: none !important;
  box-shadow: none !important;
}

body.pv-perf-video .pv-rankbanner--from-left.pv-rankbanner--enter,
body.pv-trailer-hard-perf .pv-rankbanner--from-left.pv-rankbanner--enter,
body.pv-trailer-open .pv-rankbanner--from-left.pv-rankbanner--enter{
  animation: pvRankInLeft .26s ease-out both !important;
}

body.pv-perf-video .pv-rankbanner--from-right.pv-rankbanner--enter,
body.pv-trailer-hard-perf .pv-rankbanner--from-right.pv-rankbanner--enter,
body.pv-trailer-open .pv-rankbanner--from-right.pv-rankbanner--enter{
  animation: pvRankInRight .26s ease-out both !important;
}

body.pv-perf-video .pv-rankbanner--from-left.pv-rankbanner--exit,
body.pv-trailer-hard-perf .pv-rankbanner--from-left.pv-rankbanner--exit,
body.pv-trailer-open .pv-rankbanner--from-left.pv-rankbanner--exit{
  animation: pvRankOutLeft .28s ease-in both !important;
}

body.pv-perf-video .pv-rankbanner--from-right.pv-rankbanner--exit,
body.pv-trailer-hard-perf .pv-rankbanner--from-right.pv-rankbanner--exit,
body.pv-trailer-open .pv-rankbanner--from-right.pv-rankbanner--exit{
  animation: pvRankOutRight .28s ease-in both !important;
}

body.pv-perf-video .pv-rankbanner--enter::after,
body.pv-trailer-hard-perf .pv-rankbanner--enter::after,
body.pv-trailer-open .pv-rankbanner--enter::after{
  animation: pvRankShine .55s ease-out both !important;
}

body.pv-perf-video .pv-rankbanner .pv-best-badge,
body.pv-perf-video .pv-rankbanner .pv-best-badge::before,
body.pv-perf-video .pv-rankbanner .pv-best-badge::after,
body.pv-trailer-hard-perf .pv-rankbanner .pv-best-badge,
body.pv-trailer-hard-perf .pv-rankbanner .pv-best-badge::before,
body.pv-trailer-hard-perf .pv-rankbanner .pv-best-badge::after,
body.pv-trailer-open .pv-rankbanner .pv-best-badge,
body.pv-trailer-open .pv-rankbanner .pv-best-badge::before,
body.pv-trailer-open .pv-rankbanner .pv-best-badge::after{
  animation-play-state: running !important;
}


/* PV durante trailers NO ocultar emojis de títulos; dejarlos estáticos. */
body.pv-trailer-open .player-meta .title-badge::after,
body.pv-page-paused .player-meta .title-badge::before,
body.pv-page-paused .player-meta .title-badge::after,
body.pv-perf-video .player-meta .title-badge::before,
body.pv-perf-video .player-meta .title-badge::after{
  opacity:1 !important;
  visibility:visible !important;
  animation:none !important;
  animation-play-state:paused !important;
}

/* LAG Draft normal only (NO toca Draft de Ratas) Ratas tambien importa draft.css, por eso TODO queda encapsulado bajo body.pv-draft-normal. .html usa body.pv-body y no entra aqui. Objetivo: que el normal no vaya peor sin trailer que con trailer. */
body.pv-draft-normal{
  background:#07080d !important;
}


/* Estatico en Draft normal: sin animacion infinita del titulo. */
body.pv-draft-normal .site-title,
body.pv-draft-normal.pv-site-title-elemental .site-title{
  animation:none !important;
  animation-play-state:paused !important;
  background-position:50% 50% !important;
}

/* En reposo NO se pausa nada. Las animaciones quedan activas. */

/* Durante trailer o entrada de slot: mantener emojis/coronas de titulos visibles. No se toca THE BEST de Ratas porque esto esta bajo body.pv-draft-normal. */
body.pv-draft-normal.pv-perf-video .player-meta .title-badge,
body.pv-draft-normal.pv-trailer-hard-perf .player-meta .title-badge,
body.pv-draft-normal.pv-trailer-open .player-meta .title-badge,
body.pv-draft-normal.pv-slot-preview-open .player-meta .title-badge,
body.pv-draft-normal.pv-perf-video .player-meta .title-badge::before,
body.pv-draft-normal.pv-perf-video .player-meta .title-badge::after,
body.pv-draft-normal.pv-trailer-hard-perf .player-meta .title-badge::before,
body.pv-draft-normal.pv-trailer-hard-perf .player-meta .title-badge::after,
body.pv-draft-normal.pv-trailer-open .player-meta .title-badge::before,
body.pv-draft-normal.pv-trailer-open .player-meta .title-badge::after,
body.pv-draft-normal.pv-slot-preview-open .player-meta .title-badge::before,
body.pv-draft-normal.pv-slot-preview-open .player-meta .title-badge::after{
  opacity:1 !important;
  visibility:visible !important;
}

body.pv-draft-normal.pv-perf-video .player-meta .title-badge[data-title-key="the-one"]::before,
body.pv-draft-normal.pv-trailer-hard-perf .player-meta .title-badge[data-title-key="the-one"]::before,
body.pv-draft-normal.pv-trailer-open .player-meta .title-badge[data-title-key="the-one"]::before,
body.pv-draft-normal.pv-slot-preview-open .player-meta .title-badge[data-title-key="the-one"]::before,
body.pv-draft-normal.pv-perf-video .player-meta .title-badge[data-title-style="the-one"]::before,
body.pv-draft-normal.pv-trailer-hard-perf .player-meta .title-badge[data-title-style="the-one"]::before,
body.pv-draft-normal.pv-trailer-open .player-meta .title-badge[data-title-style="the-one"]::before,
body.pv-draft-normal.pv-slot-preview-open .player-meta .title-badge[data-title-style="the-one"]::before{
  content:"" !important;
  opacity:1 !important;
  visibility:visible !important;
  display:inline-block !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
}

/* El halo de THE ONE si se apaga: era decoracion; la corona NO. */
body.pv-draft-normal.pv-perf-video .player-meta .title-badge[data-title-key="the-one"]::after,
body.pv-draft-normal.pv-perf-video .player-meta .title-badge[data-title-style="the-one"]::after,
body.pv-draft-normal.pv-trailer-open .player-meta .title-badge[data-title-key="the-one"]::after,
body.pv-draft-normal.pv-trailer-open .player-meta .title-badge[data-title-style="the-one"]::after,
body.pv-draft-normal.pv-slot-preview-open .player-meta .title-badge[data-title-key="the-one"]::after,
body.pv-draft-normal.pv-slot-preview-open .player-meta .title-badge[data-title-style="the-one"]::after{
  animation:none !important;
  filter:none !important;
  opacity:.10 !important;
  visibility:visible !important;
}

/* El video de entrada del slot debe seguir corriendo aunque el resto este congelado. */
body.pv-draft-normal.pv-slot-preview-open .slot-preview-video,
body.pv-draft-normal.pv-slot-preview-open .slot video.incoming-video{
  animation-play-state:running !important;
  filter:none !important;
}


/* NORMAL: no ocultar emotes/coronas de titulos con trailers. */
body.pv-draft-normal.pv-perf-video .player-meta .title-badge::before,
body.pv-draft-normal.pv-perf-video .player-meta .title-badge::after,
body.pv-draft-normal.pv-trailer-hard-perf .player-meta .title-badge::before,
body.pv-draft-normal.pv-trailer-hard-perf .player-meta .title-badge::after,
body.pv-draft-normal.pv-trailer-open .player-meta .title-badge::before,
body.pv-draft-normal.pv-trailer-open .player-meta .title-badge::after,
body.pv-draft-normal.pv-slot-preview-open .player-meta .title-badge::before,
body.pv-draft-normal.pv-slot-preview-open .player-meta .title-badge::after{
  opacity:1 !important;
  visibility:visible !important;
  display:inline-block !important;
  animation:none !important;
  animation-play-state:paused !important;
}

/* LAG Draft normal only - Reposo: animaciones normales activas, timer pulse activo. - Entrada de PJ: pausar CSS decorativo solo mientras el video corre. - Ligas: animadas en reposo; pausadas con trailer, video de entrada y post-draft. - Mantener vivo el indicador rojo/azul con trailer; pausarlo durante entrada de PJ. */

/* Ligas/rangos: vuelven a animarse en reposo. Se pausan automaticamente con pv-video, pv-trailer-open, pv-slot-preview-open y pv-css-paused. */
body.pv-draft-normal .rk-league-cell{
  align-items:center !important;
}
body.pv-draft-normal .rank-logo{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:24px !important;
  height:24px !important;
  flex:0 0 24px !important;
  background-position:50% 50% !important;
  background-repeat:no-repeat !important;
  background-size:18px 18px !important;
  background-origin:border-box !important;
  background-clip:padding-box !important;
}
body.pv-draft-normal.pv-slot-preview-open *,
body.pv-draft-normal.pv-slot-preview-open *::before,
body.pv-draft-normal.pv-slot-preview-open *::after{
  animation-play-state:paused !important;
}
body.pv-draft-normal.pv-slot-preview-open video,
body.pv-draft-normal.pv-slot-preview-open .slot-preview-video,
body.pv-draft-normal.pv-slot-preview-open .slot video.incoming-video{
  animation-play-state:running !important;
  filter:none !important;
}
body.pv-draft-normal.pv-perf-video .team-active,
body.pv-draft-normal.pv-trailer-hard-perf .team-active,
body.pv-draft-normal.pv-trailer-open .team-active{
  animation:panelPulse .9s ease-in-out infinite !important;
  animation-play-state:running !important;
}
body.pv-draft-normal.pv-trailer-hard-perf .team-section::before,
body.pv-draft-normal.pv-trailer-open .team-section::before,
body.pv-draft-normal.pv-slot-preview-open .team-section::before{
  content:"" !important;
  opacity:1 !important;
  visibility:visible !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    radial-gradient(60% 80% at 0% 0%, color-mix(in srgb, var(--side) 15%, transparent) 0%, transparent 60%),
    radial-gradient(60% 80% at 100% 100%, color-mix(in srgb, var(--side) 10%, transparent) 0%, transparent 60%) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--side) 35%, transparent) !important;
  filter:none !important;
}
body.pv-draft-normal.pv-trailer-hard-perf .team-section::after,
body.pv-draft-normal.pv-trailer-open .team-section::after,
body.pv-draft-normal.pv-slot-preview-open .team-section::after{
  content:"" !important;
  opacity:.20 !important;
  visibility:visible !important;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--side) 55%, transparent), transparent 70%) !important;
  filter:blur(22px) saturate(1.05) !important;
  box-shadow:none !important;
}
body.pv-draft-normal:not(.pv-perf-video):not(.pv-trailer-open):not(.pv-trailer-hard-perf):not(.pv-slot-preview-open) .timer-active{
  animation:timerPulse 1s ease-out infinite !important;
  animation-play-state:running !important;
}


body.pv-draft-normal{
  background:#05060a !important;
  background-image:none !important;
}


body.pv-draft-normal.pv-css-paused *,
body.pv-draft-normal.pv-css-paused *::before,
body.pv-draft-normal.pv-css-paused *::after{
  animation-play-state:paused !important;
}

/* Dejar vivos únicamente los videos y la animación puntual del intercambio. */
body.pv-draft-normal.pv-css-paused video,
body.pv-draft-normal.pv-css-paused .slot-preview-video,
body.pv-draft-normal.pv-css-paused .slot video.incoming-video,
body.pv-draft-normal.pv-css-paused .pd-swap-ghost,
body.pv-draft-normal.pv-css-paused .pd-swap-ghost *,
body.pv-draft-normal.pv-css-paused .pd-swap-ghost::before,
body.pv-draft-normal.pv-css-paused .pd-swap-ghost::after{
  animation-play-state:running !important;
}

/* Durante video de entrada, conservar color/identidad de lados pero detener el pulso. */
body.pv-draft-normal.pv-slot-preview-open .team-active,
body.pv-draft-normal.pv-slot-preview-open .team-section,
body.pv-draft-normal.pv-slot-preview-open .team-section::before,
body.pv-draft-normal.pv-slot-preview-open .team-section::after{
  animation-play-state:paused !important;
}
body.pv-draft-normal.pv-slot-preview-open .team-section::before{
  opacity:.88 !important;
  filter:none !important;
}
body.pv-draft-normal.pv-slot-preview-open .team-section::after{
  opacity:.14 !important;
  filter:none !important;
}

/* Ligas/rangos: en reposo usan su CSS original; durante trailers, video de entrada y animaciones cortas del post-draft quedan pausadas por las clases globales. */

/* Draft normal only - Sin restos animados de fondo CSS. - Trailer de fondo: pausa hoverUp de picks finales, pero NO pausa timers. - Video de entrada: sigue pausando timers y pulsos rojo/azul. - Post-draft: panel ID/tiempos arranca visible. */
body.pv-draft-normal{
  background-color:#05060a !important;
  background-image:none !important;
}
body.pv-draft-normal::before,
body.pv-draft-normal::after{
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
  filter:none !important;
}

/* Con trailer de fondo, congelar el loop de subida/bajada de las imágenes finales. */
body.pv-draft-normal.pv-trailer-open .final-pick-img,
body.pv-draft-normal.pv-trailer-hard-perf .final-pick-img{
  animation-play-state:paused !important;
}

/* Con trailer de fondo, el pulso del timer SI queda vivo. */
body.pv-draft-normal.pv-trailer-open:not(.pv-slot-preview-open) .timer-active,
body.pv-draft-normal.pv-trailer-hard-perf:not(.pv-slot-preview-open) .timer-active{
  animation:timerPulse 1s ease-out infinite !important;
  animation-play-state:running !important;
}

/* Con video de entrada de PJ, el timer y los pulsos rojo/azul SI se congelan. */
body.pv-draft-normal.pv-slot-preview-open .timer-active,
body.pv-draft-normal.pv-slot-preview-open .team-active,
body.pv-draft-normal.pv-slot-preview-open .team-section,
body.pv-draft-normal.pv-slot-preview-open .team-section::before,
body.pv-draft-normal.pv-slot-preview-open .team-section::after{
  animation-play-state:paused !important;
}

/* Estado inicial del post-draft: contenido visible, no escondido por restos del toggle del ojo. */
body.pv-draft-normal.draft-finished #postdraft-panel:not(.pd-info-collapsed) .pd-collapse-region{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
body.pv-draft-normal.draft-finished #postdraft-panel:not(.pd-info-collapsed).pd-hide-collapse-content .pd-collapse-region > *{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}


/* Draft normal only, base Trailer de fondo mantiene pulso del timer. - Video de entrada pausa timer, pero mantiene brillo del slot si NO hay trailer. - Tiempos por separado: apertura directa, cierre animado. - ? sin capsula y sin corte. - Serpiente real por los bordes cuadrados del slot activo. */
body.pv-draft-normal.pv-trailer-open:not(.pv-slot-preview-open) .timer,
body.pv-draft-normal.pv-trailer-hard-perf:not(.pv-slot-preview-open) .timer{
  backdrop-filter:blur(2px) saturate(120%) !important;
  -webkit-backdrop-filter:blur(2px) saturate(120%) !important;
}
body.pv-draft-normal.pv-trailer-open:not(.pv-slot-preview-open) .timer-active,
body.pv-draft-normal.pv-trailer-hard-perf:not(.pv-slot-preview-open) .timer-active{
  animation:timerPulse 1s ease-out infinite !important;
  animation-play-state:running !important;
}
body.pv-draft-normal.pv-slot-preview-open .timer-active{
  animation-play-state:paused !important;
}

/* Si hay video de entrada y NO hay trailer de fondo, el brillo/pulso del slot sigue vivo. */
body.pv-draft-normal.pv-slot-preview-open:not(.pv-trailer-open):not(.pv-trailer-hard-perf) .slot.picking-active{
  animation:slotPulse .9s ease-in-out infinite !important;
  animation-play-state:running !important;
}

/* Si hay trailer de fondo, el pulso/brillo del slot seleccionado queda congelado SIEMPRE, incluso cuando el video de entrada ya termino y quedo frizado. */
body.pv-draft-normal.pv-trailer-open .slot.picking-active,
body.pv-draft-normal.pv-trailer-hard-perf .slot.picking-active{
  animation-play-state:paused !important;
}

body.pv-draft-normal #postdraft-panel .pd-times-wrap{
  display:block !important;
  overflow:hidden !important;
  max-height:0;
  opacity:0;
  transform:translateY(-10px) scale(.985);
  pointer-events:none;
  transition:max-height .36s cubic-bezier(.2,.85,.2,1), opacity .24s ease, transform .30s ease;
  will-change:max-height, opacity, transform;
}
body.pv-draft-normal #postdraft-panel .pd-times-wrap.open{
  max-height:none;
  opacity:1;
  transform:none;
  pointer-events:auto;
  transition:none !important;
}
body.pv-draft-normal #postdraft-panel .pd-times-wrap:not(.open){
  margin-top:0 !important;
}
body.pv-draft-normal #postdraft-panel .pd-times-wrap.pv-times-closing{
  transition:max-height .36s cubic-bezier(.2,.85,.2,1), opacity .24s ease, transform .30s ease !important;
}

/* Signo de interrogacion: solo texto bonito, sin capsula y sin recortes. */
body.pv-draft-normal .slot.pv-pick-target:not(.finalized):not(.picking-active)::after{
  content:"?";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  box-sizing:border-box;
  border:0 !important;
  border-radius:0 !important;
  padding:0 0 .04em 0 !important;
  margin:0 !important;
  overflow:visible !important;
  font-size:64px;
  line-height:1.28;
  font-weight:1000;
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing:0;
  text-align:center;
  color:transparent;
  -webkit-text-fill-color:transparent;
  background:linear-gradient(135deg, rgba(255,255,255,.99), color-mix(in srgb, var(--side, #9fd8ff) 72%, #ffffff 28%) 44%, color-mix(in srgb, var(--side, #9fd8ff) 82%, #101520 18%) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  text-shadow:0 3px 18px color-mix(in srgb, var(--side, #9fd8ff) 46%, transparent), 0 10px 28px rgba(0,0,0,.58);
  filter:drop-shadow(0 0 11px color-mix(in srgb, var(--side, #9fd8ff) 34%, transparent));
  animation:none !important;
}

/* Serpiente rectangular fluida: una cola luminosa larga recorriendo el borde del slot. */
@property --pv-snake-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
body.pv-draft-normal:not(.pv-trailer-open):not(.pv-trailer-hard-perf):not(.pv-slot-preview-open) .slot.pv-pick-target:not(.finalized):not(.picking-active)::before{
  content:"";
  position:absolute;
  inset:5px;
  z-index:3;
  pointer-events:none;
  border-radius:12px;
  padding:4px;
  box-sizing:border-box;
  --pv-snake-dim:color-mix(in srgb, var(--side, #7fc7ff) 12%, transparent);
  --pv-snake-tail:color-mix(in srgb, var(--side, #7fc7ff) 42%, transparent);
  --pv-snake-body:color-mix(in srgb, var(--side, #7fc7ff) 82%, transparent);
  --pv-snake-head:color-mix(in srgb, var(--side, #7fc7ff) 92%, #ffffff 8%);
  background:
    conic-gradient(from var(--pv-snake-angle),
      transparent 0deg,
      transparent 205deg,
      var(--pv-snake-dim) 232deg,
      var(--pv-snake-tail) 264deg,
      var(--pv-snake-body) 306deg,
      var(--pv-snake-head) 338deg,
      #ffffff 352deg,
      transparent 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--side, #7fc7ff) 78%, transparent)) drop-shadow(0 0 18px color-mix(in srgb, var(--side, #7fc7ff) 42%, transparent));
  animation:pvPickSnakeBorder 1.95s linear infinite;
}

@keyframes pvPickSnakeBorder{
  to{ --pv-snake-angle:360deg; }
}

/* Con trailer o video de entrada la serpiente no se pausa: desaparece. */
body.pv-draft-normal.pv-trailer-open .slot.pv-pick-target::before,
body.pv-draft-normal.pv-trailer-hard-perf .slot.pv-pick-target::before,
body.pv-draft-normal.pv-slot-preview-open .slot.pv-pick-target::before,
body.pv-draft-normal .slot.pv-pick-target.picking-active::before,
body.pv-draft-normal .slot.pv-pick-target.finalized::before{
  content:none !important;
  display:none !important;
  background:none !important;
  animation:none !important;
}
body.pv-draft-normal .slot.pv-pick-target.picking-active::after,
body.pv-draft-normal .slot.pv-pick-target.finalized::after{
  content:none !important;
  display:none !important;
}

/* LAG Draft normal: THE BEST sin tocar su animacion - El banner sale del layout sticky de slots y queda fixed/aislado como en ratas. - Esto evita que el shine/title fuerce repintado del grid/slots mientras corre trailer. */
body.pv-draft-normal .pv-ranklane.pv-ranklane--fixed{
  position:fixed !important;
  top:0 !important;
  width:260px !important;
  display:grid !important;
  pointer-events:none !important;
  z-index:2147483647 !important;
  overflow:visible !important;
  isolation:isolate !important;
  contain:layout paint style !important;
  transform:translateZ(0) !important;
  will-change:transform !important;
}
body.pv-draft-normal .pv-ranklane.pv-ranklane--fixed .pv-ranklane-cell{
  display:flex !important;
  align-items:center !important;
}
body.pv-draft-normal .pv-ranklane.pv-ranklane--fixed.pv-ranklane--side-left .pv-ranklane-cell{
  justify-content:flex-start !important;
}
body.pv-draft-normal .pv-ranklane.pv-ranklane--fixed.pv-ranklane--side-right .pv-ranklane-cell{
  justify-content:flex-end !important;
}
body.pv-draft-normal .pv-ranklane.pv-ranklane--fixed .pv-rankbanner{
  contain:paint style !important;
  backface-visibility:hidden !important;
  transform:translateZ(0);
}
@media (max-width:1500px){
  body.pv-draft-normal .pv-ranklane.pv-ranklane--fixed{ width:240px !important; }
}
@media (max-width:1380px){
  body.pv-draft-normal .pv-ranklane.pv-ranklane--fixed{ width:220px !important; }
}
@media (max-width:1280px){
  body.pv-draft-normal .pv-ranklane.pv-ranklane--fixed{ display:none !important; }
}


body.pv-draft-normal .pv-ranklane.pv-ranklane--fixed{
  width: var(--pv-ranklane-fit-width, 260px) !important;
}
body.pv-draft-normal .pv-rankbanner{
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}
body.pv-draft-normal .pv-rankbest-row,
body.pv-draft-normal .pv-rankbanner-line{
  width: max-content !important;
  max-width: none !important;
  min-width: max-content !important;
  overflow: visible !important;
}
body.pv-draft-normal .pv-best-badge,
body.pv-draft-normal .pv-rankbanner-name{
  width: max-content !important;
  max-width: none !important;
  min-width: max-content !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
body.pv-draft-normal .pv-rankbanner--best .pv-rank-elicon,
body.pv-draft-normal .pv-rankbanner-line .pv-rank-elicon{
  flex-shrink: 0 !important;
}


/* Fondo DraftIMAGEN y balanceo siempre vivo en draft normal. */
body.pv-draft-normal{
  background-color:#05060a !important;
  background-image:
    linear-gradient(rgba(5,6,10,.70), rgba(5,6,10,.78)),
    url("/img/favicon/DraftIMAGEN.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}

body.pv-draft-normal.pv-trailer-open .final-pick-img,
body.pv-draft-normal.pv-trailer-hard-perf .final-pick-img,
body.pv-draft-normal.pv-slot-preview-open .final-pick-img,
body.pv-draft-normal.pv-css-paused .final-pick-img{
  animation:hoverUp 3s ease-in-out infinite !important;
  animation-play-state:running !important;
}


/* Draft normal: solo DraftIMAGEN clara, sin fondos por turno. */
body.pv-draft-normal{
  background-color:#05060a !important;
  background-image:url("/img/favicon/DraftIMAGEN.png") !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}
body.pv-draft-normal::before,
body.pv-draft-normal::after{content:none !important;display:none !important;background:none !important;}
.pv-turn-bg{display:none !important;}

/* Normal entrada suave, sonido premium liviano. */
@keyframes pvDraftSoftIn{from{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
body.pv-draft-normal #ui-root{animation:pvDraftSoftIn .50s cubic-bezier(.16,1,.3,1) both}
body.pv-draft-normal .pv-corner-logo,body.pv-draft-normal .pv-fullscreen-btn,body.pv-draft-normal header,body.pv-draft-normal #draft-container,body.pv-draft-normal #volume-toggle,body.pv-draft-normal #volume-control{animation:pvDraftSoftIn .50s cubic-bezier(.16,1,.3,1) both}
body.pv-draft-normal .pv-corner-logo{animation-delay:.02s}body.pv-draft-normal .pv-fullscreen-btn{animation-delay:.04s}body.pv-draft-normal header{animation-delay:.08s}body.pv-draft-normal #draft-container{animation-delay:.13s}body.pv-draft-normal #volume-toggle,body.pv-draft-normal #volume-control{animation-delay:.18s}
#volume-toggle{left:18px!important;bottom:18px!important;top:auto!important;z-index:1600!important;width:42px!important;height:42px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;color:#dcd1ff!important;background:linear-gradient(180deg,rgba(80,61,130,.96),rgba(30,26,48,.96))!important;border:1px solid rgba(203,181,255,.28)!important;box-shadow:0 10px 20px rgba(0,0,0,.30),inset 0 0 0 1px rgba(255,255,255,.04)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease!important}
#volume-toggle:hover{transform:translateY(-3px)!important;border-color:rgba(203,181,255,.58)!important;box-shadow:0 14px 24px rgba(0,0,0,.34),0 0 18px rgba(167,139,250,.18)!important;filter:none!important}
#volume-toggle:active{transform:translateY(0) scale(.97)!important}
#volume-control{left:72px!important;bottom:18px!important;top:auto!important;z-index:1599!important;width:244px!important;max-width:244px!important;min-height:62px!important;padding:12px 14px!important;border-radius:26px!important;display:flex!important;flex-direction:column!important;gap:9px!important;background:linear-gradient(180deg,rgba(18,21,32,.92),rgba(8,10,16,.86))!important;border:1px solid rgba(203,181,255,.25)!important;box-shadow:0 16px 36px rgba(0,0,0,.42),0 0 20px rgba(124,58,237,.10),inset 0 0 0 1px rgba(255,255,255,.035)!important;backdrop-filter:blur(12px) saturate(130%);overflow:hidden!important;opacity:1;transform:translateX(0);transition:max-width .26s cubic-bezier(.16,.84,.32,1),width .26s cubic-bezier(.16,.84,.32,1),opacity .2s ease,transform .22s ease,padding .22s ease,border-color .22s ease,box-shadow .22s ease!important}
#volume-control.is-collapsed{width:0!important;max-width:0!important;min-width:0!important;opacity:0!important;transform:translateX(-8px)!important;pointer-events:none!important;padding-left:0!important;padding-right:0!important;border-color:transparent!important;box-shadow:none!important}
#volume-header{display:flex!important;align-items:center!important;gap:8px!important;justify-content:flex-start!important;font-weight:900!important;color:#efeaff!important;min-width:214px!important}
#volume-icon{font-size:18px!important;filter:drop-shadow(0 0 8px rgba(203,181,255,.28))}
#volume-title{font-size:13px!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#efeaff!important;flex:1 1 auto}
#volume-close{width:30px!important;height:30px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;border-radius:999px!important;color:#fff!important;background:linear-gradient(180deg,rgba(38,43,58,.94),rgba(17,20,30,.94))!important;border:1px solid rgba(203,181,255,.24)!important;box-shadow:0 8px 16px rgba(0,0,0,.20),inset 0 0 0 1px rgba(255,255,255,.035)!important;transition:transform .16s ease,box-shadow .18s ease,border-color .18s ease!important}
#volume-close:hover{transform:translateY(-2px)!important;border-color:rgba(203,181,255,.50)!important;box-shadow:0 12px 22px rgba(0,0,0,.26),0 0 16px rgba(167,139,250,.16)!important;filter:none!important}
#main-volume-slider{appearance:none;-webkit-appearance:none;width:100%!important;height:8px!important;border-radius:999px!important;outline:none!important;background:linear-gradient(90deg,rgba(203,181,255,.86),rgba(37,99,235,.78))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 0 10px rgba(124,58,237,.12)!important}
#main-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#f5f2ff;border:2px solid #8b5cf6;box-shadow:0 0 12px rgba(203,181,255,.45);cursor:pointer}
#main-volume-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#f5f2ff;border:2px solid #8b5cf6;box-shadow:0 0 12px rgba(203,181,255,.45);cursor:pointer}
@media (max-width:720px){#volume-control{left:64px!important;width:212px!important;max-width:212px!important}#volume-header{min-width:182px!important}}
@media (prefers-reduced-motion:reduce){body.pv-draft-normal #ui-root,body.pv-draft-normal .pv-corner-logo,body.pv-draft-normal .pv-fullscreen-btn,body.pv-draft-normal header,body.pv-draft-normal #draft-container,body.pv-draft-normal #volume-toggle,body.pv-draft-normal #volume-control{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}#volume-toggle,#volume-control,#volume-close{transition:none!important}}

/* Sin refresco visual, animaciones puntuales siempre vivas - Mantiene el modo ligero para lag: blur/filtros/marcos/ligas pesadas pausadas. - NO pausa THE BEST/TOP 2-4 ni el reveal elemental del pick. - pv-css-paused/pv-slot-preview-open ya no matan esas animaciones puntuales. */

/* Banners TOP/THE BEST: misma animacion de entrada/salida que ratas, con y sin trailer/video. */
body.pv-draft-normal.pv-perf-video .pv-rankbanner,
body.pv-draft-normal.pv-trailer-open .pv-rankbanner,
body.pv-draft-normal.pv-trailer-hard-perf .pv-rankbanner,
body.pv-draft-normal.pv-slot-preview-open .pv-rankbanner,
body.pv-draft-normal.pv-css-paused .pv-rankbanner,
body.pv-draft-normal.pv-media-hard-lock .pv-rankbanner,
body.pv-draft-normal.pv-perf-video .pv-rankbanner *,
body.pv-draft-normal.pv-trailer-open .pv-rankbanner *,
body.pv-draft-normal.pv-trailer-hard-perf .pv-rankbanner *,
body.pv-draft-normal.pv-slot-preview-open .pv-rankbanner *,
body.pv-draft-normal.pv-css-paused .pv-rankbanner *,
body.pv-draft-normal.pv-media-hard-lock .pv-rankbanner *{
  animation-play-state:running !important;
  transition-property:opacity, transform !important;
}
body.pv-draft-normal.pv-perf-video .pv-rankbanner,
body.pv-draft-normal.pv-trailer-open .pv-rankbanner,
body.pv-draft-normal.pv-trailer-hard-perf .pv-rankbanner,
body.pv-draft-normal.pv-slot-preview-open .pv-rankbanner,
body.pv-draft-normal.pv-css-paused .pv-rankbanner,
body.pv-draft-normal.pv-media-hard-lock .pv-rankbanner{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.42),
    0 0 0 1px rgba(var(--elrgb), .24) inset !important;
  background:linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.62)) !important;
}
body.pv-draft-normal.pv-perf-video .pv-rankbanner::before,
body.pv-draft-normal.pv-trailer-open .pv-rankbanner::before,
body.pv-draft-normal.pv-trailer-hard-perf .pv-rankbanner::before,
body.pv-draft-normal.pv-slot-preview-open .pv-rankbanner::before,
body.pv-draft-normal.pv-css-paused .pv-rankbanner::before,
body.pv-draft-normal.pv-media-hard-lock .pv-rankbanner::before{
  opacity:.45 !important;
  animation:none !important;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(var(--elrgb), .16), transparent 58%),
    linear-gradient(90deg, rgba(var(--elrgb), .18), transparent 55%) !important;
  filter:none !important;
  box-shadow:none !important;
}
body.pv-draft-normal.pv-perf-video .pv-rankbanner::after,
body.pv-draft-normal.pv-trailer-open .pv-rankbanner::after,
body.pv-draft-normal.pv-trailer-hard-perf .pv-rankbanner::after,
body.pv-draft-normal.pv-slot-preview-open .pv-rankbanner::after,
body.pv-draft-normal.pv-css-paused .pv-rankbanner::after,
body.pv-draft-normal.pv-media-hard-lock .pv-rankbanner::after{
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 45%, transparent 62%) !important;
  filter:none !important;
  box-shadow:none !important;
}
body.pv-draft-normal .pv-rankbanner--from-left.pv-rankbanner--enter,
body.pv-draft-normal.pv-perf-video .pv-rankbanner--from-left.pv-rankbanner--enter,
body.pv-draft-normal.pv-trailer-open .pv-rankbanner--from-left.pv-rankbanner--enter,
body.pv-draft-normal.pv-trailer-hard-perf .pv-rankbanner--from-left.pv-rankbanner--enter,
body.pv-draft-normal.pv-slot-preview-open .pv-rankbanner--from-left.pv-rankbanner--enter,
body.pv-draft-normal.pv-css-paused .pv-rankbanner--from-left.pv-rankbanner--enter,
body.pv-draft-normal.pv-media-hard-lock .pv-rankbanner--from-left.pv-rankbanner--enter{
  animation:pvRankInLeft .26s ease-out both !important;
  animation-play-state:running !important;
}
body.pv-draft-normal .pv-rankbanner--from-right.pv-rankbanner--enter,
body.pv-draft-normal.pv-perf-video .pv-rankbanner--from-right.pv-rankbanner--enter,
body.pv-draft-normal.pv-trailer-open .pv-rankbanner--from-right.pv-rankbanner--enter,
body.pv-draft-normal.pv-trailer-hard-perf .pv-rankbanner--from-right.pv-rankbanner--enter,
body.pv-draft-normal.pv-slot-preview-open .pv-rankbanner--from-right.pv-rankbanner--enter,
body.pv-draft-normal.pv-css-paused .pv-rankbanner--from-right.pv-rankbanner--enter,
body.pv-draft-normal.pv-media-hard-lock .pv-rankbanner--from-right.pv-rankbanner--enter{
  animation:pvRankInRight .26s ease-out both !important;
  animation-play-state:running !important;
}
body.pv-draft-normal .pv-rankbanner--from-left.pv-rankbanner--exit,
body.pv-draft-normal.pv-perf-video .pv-rankbanner--from-left.pv-rankbanner--exit,
body.pv-draft-normal.pv-trailer-open .pv-rankbanner--from-left.pv-rankbanner--exit,
body.pv-draft-normal.pv-trailer-hard-perf .pv-rankbanner--from-left.pv-rankbanner--exit,
body.pv-draft-normal.pv-slot-preview-open .pv-rankbanner--from-left.pv-rankbanner--exit,
body.pv-draft-normal.pv-css-paused .pv-rankbanner--from-left.pv-rankbanner--exit,
body.pv-draft-normal.pv-media-hard-lock .pv-rankbanner--from-left.pv-rankbanner--exit{
  animation:pvRankOutLeft .28s ease-in both !important;
  animation-play-state:running !important;
}
body.pv-draft-normal .pv-rankbanner--from-right.pv-rankbanner--exit,
body.pv-draft-normal.pv-perf-video .pv-rankbanner--from-right.pv-rankbanner--exit,
body.pv-draft-normal.pv-trailer-open .pv-rankbanner--from-right.pv-rankbanner--exit,
body.pv-draft-normal.pv-trailer-hard-perf .pv-rankbanner--from-right.pv-rankbanner--exit,
body.pv-draft-normal.pv-slot-preview-open .pv-rankbanner--from-right.pv-rankbanner--exit,
body.pv-draft-normal.pv-css-paused .pv-rankbanner--from-right.pv-rankbanner--exit,
body.pv-draft-normal.pv-media-hard-lock .pv-rankbanner--from-right.pv-rankbanner--exit{
  animation:pvRankOutRight .28s ease-in both !important;
  animation-play-state:running !important;
}
body.pv-draft-normal .pv-rankbanner--enter::after,
body.pv-draft-normal.pv-perf-video .pv-rankbanner--enter::after,
body.pv-draft-normal.pv-trailer-open .pv-rankbanner--enter::after,
body.pv-draft-normal.pv-trailer-hard-perf .pv-rankbanner--enter::after,
body.pv-draft-normal.pv-slot-preview-open .pv-rankbanner--enter::after,
body.pv-draft-normal.pv-css-paused .pv-rankbanner--enter::after,
body.pv-draft-normal.pv-media-hard-lock .pv-rankbanner--enter::after{
  animation:pvRankShine .55s ease-out both !important;
  animation-play-state:running !important;
}
body.pv-draft-normal.pv-css-paused .pv-rankbanner .pv-best-badge,
body.pv-draft-normal.pv-slot-preview-open .pv-rankbanner .pv-best-badge,
body.pv-draft-normal.pv-perf-video .pv-rankbanner .pv-best-badge,
body.pv-draft-normal.pv-trailer-open .pv-rankbanner .pv-best-badge,
body.pv-draft-normal.pv-trailer-hard-perf .pv-rankbanner .pv-best-badge,
body.pv-draft-normal.pv-media-hard-lock .pv-rankbanner .pv-best-badge{
  animation-play-state:running !important;
  filter:none !important;
}

/* Reveal elemental del slot: siempre debe correr aunque haya video de entrada/trailer o pv-css-paused. */
body.pv-draft-normal.pv-css-paused .pv-pick-reveal-overlay,
body.pv-draft-normal.pv-slot-preview-open .pv-pick-reveal-overlay,
body.pv-draft-normal.pv-perf-video .pv-pick-reveal-overlay,
body.pv-draft-normal.pv-trailer-open .pv-pick-reveal-overlay,
body.pv-draft-normal.pv-trailer-hard-perf .pv-pick-reveal-overlay,
body.pv-draft-normal.pv-media-hard-lock .pv-pick-reveal-overlay,
body.pv-draft-normal.pv-css-paused .pv-pick-reveal-overlay *,
body.pv-draft-normal.pv-slot-preview-open .pv-pick-reveal-overlay *,
body.pv-draft-normal.pv-perf-video .pv-pick-reveal-overlay *,
body.pv-draft-normal.pv-trailer-open .pv-pick-reveal-overlay *,
body.pv-draft-normal.pv-trailer-hard-perf .pv-pick-reveal-overlay *,
body.pv-draft-normal.pv-media-hard-lock .pv-pick-reveal-overlay *{
  animation-play-state:running !important;
}
body.pv-draft-normal.pv-css-paused .pv-pick-reveal-overlay.play,
body.pv-draft-normal.pv-slot-preview-open .pv-pick-reveal-overlay.play,
body.pv-draft-normal.pv-perf-video .pv-pick-reveal-overlay.play,
body.pv-draft-normal.pv-trailer-open .pv-pick-reveal-overlay.play,
body.pv-draft-normal.pv-trailer-hard-perf .pv-pick-reveal-overlay.play,
body.pv-draft-normal.pv-media-hard-lock .pv-pick-reveal-overlay.play{
  animation:pvPickRevealWrap 2.98s cubic-bezier(.2,.82,.2,1) forwards !important;
}
body.pv-draft-normal.pv-css-paused .pv-pick-reveal-overlay.play .pv-pick-reveal-flash,
body.pv-draft-normal.pv-slot-preview-open .pv-pick-reveal-overlay.play .pv-pick-reveal-flash,
body.pv-draft-normal.pv-perf-video .pv-pick-reveal-overlay.play .pv-pick-reveal-flash,
body.pv-draft-normal.pv-trailer-open .pv-pick-reveal-overlay.play .pv-pick-reveal-flash,
body.pv-draft-normal.pv-trailer-hard-perf .pv-pick-reveal-overlay.play .pv-pick-reveal-flash,
body.pv-draft-normal.pv-media-hard-lock .pv-pick-reveal-overlay.play .pv-pick-reveal-flash{
  animation:pvPickRevealFlash 2.98s ease-out forwards !important;
}
body.pv-draft-normal.pv-css-paused .pv-pick-reveal-overlay.play .pv-pick-reveal-glow,
body.pv-draft-normal.pv-slot-preview-open .pv-pick-reveal-overlay.play .pv-pick-reveal-glow,
body.pv-draft-normal.pv-perf-video .pv-pick-reveal-overlay.play .pv-pick-reveal-glow,
body.pv-draft-normal.pv-trailer-open .pv-pick-reveal-overlay.play .pv-pick-reveal-glow,
body.pv-draft-normal.pv-trailer-hard-perf .pv-pick-reveal-overlay.play .pv-pick-reveal-glow,
body.pv-draft-normal.pv-media-hard-lock .pv-pick-reveal-overlay.play .pv-pick-reveal-glow{
  animation:pvPickRevealGlow 2.98s ease-out forwards !important;
}
body.pv-draft-normal.pv-css-paused .pv-pick-reveal-overlay.play .pv-pick-reveal-sigil,
body.pv-draft-normal.pv-slot-preview-open .pv-pick-reveal-overlay.play .pv-pick-reveal-sigil,
body.pv-draft-normal.pv-perf-video .pv-pick-reveal-overlay.play .pv-pick-reveal-sigil,
body.pv-draft-normal.pv-trailer-open .pv-pick-reveal-overlay.play .pv-pick-reveal-sigil,
body.pv-draft-normal.pv-trailer-hard-perf .pv-pick-reveal-overlay.play .pv-pick-reveal-sigil,
body.pv-draft-normal.pv-media-hard-lock .pv-pick-reveal-overlay.play .pv-pick-reveal-sigil{
  animation:pvPickRevealSigil 2.98s cubic-bezier(.2,.84,.2,1) forwards !important;
}
body.pv-draft-normal.pv-css-paused .pv-pick-reveal-overlay.play .pv-pick-reveal-sweep,
body.pv-draft-normal.pv-slot-preview-open .pv-pick-reveal-overlay.play .pv-pick-reveal-sweep,
body.pv-draft-normal.pv-perf-video .pv-pick-reveal-overlay.play .pv-pick-reveal-sweep,
body.pv-draft-normal.pv-trailer-open .pv-pick-reveal-overlay.play .pv-pick-reveal-sweep,
body.pv-draft-normal.pv-trailer-hard-perf .pv-pick-reveal-overlay.play .pv-pick-reveal-sweep,
body.pv-draft-normal.pv-media-hard-lock .pv-pick-reveal-overlay.play .pv-pick-reveal-sweep{
  animation:pvPickRevealSweep 2.98s ease-out forwards !important;
}

/* Mantener el balanceo que ya funcionaba. */
body.pv-draft-normal.pv-trailer-open .final-pick-img,
body.pv-draft-normal.pv-trailer-hard-perf .final-pick-img,
body.pv-draft-normal.pv-slot-preview-open .final-pick-img,
body.pv-draft-normal.pv-css-paused .final-pick-img,
body.pv-draft-normal.pv-perf-video .final-pick-img,
body.pv-draft-normal.pv-media-hard-lock .final-pick-img{
  animation:hoverUp 3s ease-in-out infinite !important;
  animation-play-state:running !important;
}

/* Lo pesado sigue apagado durante video; no tocar banners/reveal/picks. */
body.pv-draft-normal.pv-trailer-open .rank-logo,
body.pv-draft-normal.pv-trailer-hard-perf .rank-logo,
body.pv-draft-normal.pv-slot-preview-open .rank-logo,
body.pv-draft-normal.pv-css-paused .rank-logo,
body.pv-draft-normal.pv-perf-video .rank-logo,
body.pv-draft-normal.pv-trailer-open .frame-img,
body.pv-draft-normal.pv-trailer-hard-perf .frame-img,
body.pv-draft-normal.pv-slot-preview-open .frame-img,
body.pv-draft-normal.pv-css-paused .frame-img,
body.pv-draft-normal.pv-perf-video .frame-img,
body.pv-draft-normal.pv-trailer-open .frame-css,
body.pv-draft-normal.pv-trailer-hard-perf .frame-css,
body.pv-draft-normal.pv-slot-preview-open .frame-css,
body.pv-draft-normal.pv-css-paused .frame-css,
body.pv-draft-normal.pv-perf-video .frame-css,
body.pv-draft-normal.pv-trailer-open .player-meta .title-badge,
body.pv-draft-normal.pv-trailer-hard-perf .player-meta .title-badge,
body.pv-draft-normal.pv-slot-preview-open .player-meta .title-badge,
body.pv-draft-normal.pv-css-paused .player-meta .title-badge,
body.pv-draft-normal.pv-perf-video .player-meta .title-badge{
  animation-play-state:paused !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}


/* Base enviada, sin tocar grid/videos/trailers - Badge TOP 1-5 estatico en pick , sin animaciones. - No pausa pulsos del temporizador ni de la casilla seleccionada. */
.final-pick-top-badge{
  position:absolute;
  left:2px;
  bottom:28px;
  z-index:8;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
  padding:4px 7px 4px 6px;
  border-radius:9px;
  font-size:11px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.055em;
  color:#fff5c7;
  background:rgba(10,8,3,.74);
  border:1px solid rgba(255,218,86,.64);
  box-shadow:0 2px 8px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.05);
  text-shadow:0 1px 2px rgba(0,0,0,.86);
  pointer-events:none;
  user-select:none;
  animation:none !important;
  transition:none !important;
  transform:translateZ(0);
}
.final-pick-top-badge[data-rank="1"]{
  color:#fff9dc;
  border-color:rgba(255,224,92,.86);
  background:linear-gradient(180deg, rgba(65,43,4,.82), rgba(12,9,4,.78));
}
.final-pick-top-star{
  width:12px;
  height:12px;
  flex:0 0 12px;
  display:inline-block;
  background:#ffd84f;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.70));
  animation:none !important;
  transition:none !important;
}
.final-pick-top-badge[data-rank="1"] .final-pick-top-star{
  background:#ffe66b;
}
.final-pick-top-label{
  display:inline-block;
  white-space:nowrap;
  animation:none !important;
  transition:none !important;
}


/* Optimización visual sin cambiar el balanceo de picks finales. */
body.pv-draft-normal{
  background-attachment:scroll !important;
}
body.pv-draft-normal #background-trailer,
body.pv-draft-normal video#background-trailer{
  contain:paint !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}
body.pv-draft-normal:not(.pv-trailer-open):not(.pv-trailer-hard-perf) #background-trailer,
body.pv-draft-normal:not(.pv-trailer-open):not(.pv-trailer-hard-perf) video#background-trailer{
  opacity:0 !important;
  visibility:hidden !important;
}
body.pv-draft-normal.pv-trailer-open #background-trailer,
body.pv-draft-normal.pv-trailer-open video#background-trailer,
body.pv-draft-normal.pv-trailer-hard-perf #background-trailer,
body.pv-draft-normal.pv-trailer-hard-perf video#background-trailer{
  visibility:visible !important;
}
body.pv-draft-normal .final-pick-img{
  will-change:transform !important;
}


/* Base legacy del grid Todos sin pausar trailers ===== Ya no se ocultan imágenes. Solo se conserva la contención y se bajan adornos caros. */
body.pv-draft-normal #characters-scroll{
  contain:layout style;
}
body.pv-draft-normal.pv-grid-all-heavy #characters .character{
  /* Content-visibility recortaba overflow y metia C/R1 dentro del retrato en Todos. Dejamos el presupuesto en JS, pero las badges se pintan igual que en filtros elementales. */
  content-visibility:visible !important;
  contain-intrinsic-size:auto !important;
  overflow:visible !important;
}
body.pv-draft-normal.pv-grid-all-heavy #characters .character.pv-card-offscreen > img{
  visibility:visible !important;
  opacity:1 !important;
}
body.pv-draft-normal.pv-grid-media-lite #characters .character,
body.pv-draft-normal.pv-grid-media-lite #characters .character:hover,
body.pv-draft-normal.pv-grid-media-lite #characters .character.picked-temp,
body.pv-draft-normal.pv-grid-media-lite #characters .character.banned-temp{
  transition:none !important;
  transform:none !important;
  box-shadow:none !important;
}
body.pv-draft-normal.pv-grid-media-lite #characters .character::before{
  opacity:0 !important;
  transition:none !important;
  filter:none !important;
  box-shadow:none !important;
  background:none !important;
}
body.pv-draft-normal.pv-grid-media-lite #characters .character .grid-badge,
body.pv-draft-normal.pv-grid-media-lite #characters .character .grid-badge-x{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}


/* NORMAL: Todos igual visualmente, videos de entrada pesados sin dejar decoder vivo. */
body.pv-draft-normal{
  background-attachment:scroll !important;
}
body.pv-draft-normal.pv-grid-all-heavy #characters .character .grid-badge,
body.pv-draft-normal.pv-grid-all-heavy #characters .character .grid-badge-x{
  z-index:30 !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none !important;
}
body.pv-draft-normal .slot-preview-freeze{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1 !important;
  filter:none !important;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
body.pv-draft-normal.pv-grid-media-lite #characters .character > img{
  filter:none !important;
  box-shadow:none !important;
}


body.pv-draft-normal #characters{
  grid-template-columns:repeat(7,82px) !important;
  gap:10px !important;
  justify-content:center !important;
}
body.pv-draft-normal #characters .character{
  width:82px !important;
  height:82px !important;
}
@media (max-width:1380px){
  body.pv-draft-normal #characters{
    grid-template-columns:repeat(7,74px) !important;
    gap:9px !important;
  }
  body.pv-draft-normal #characters .character{
    width:74px !important;
    height:74px !important;
  }
}
body.pv-draft-normal #characters .character.pv-card-offscreen > img,
body.pv-draft-normal.pv-grid-all-heavy #characters .character.pv-card-offscreen > img,
body.pv-draft-normal.pv-grid-media-lite #characters .character.pv-card-offscreen > img{
  visibility:visible !important;
  opacity:1 !important;
  display:block !important;
}
body.pv-draft-normal #characters .character.pv-card-offscreen{
  opacity:1 !important;
}
body.pv-draft-normal.pv-slot-preview-open .slot-preview-video,
body.pv-draft-normal.pv-slot-preview-open .slot-preview-video.active,
body.pv-draft-normal.pv-slot-preview-open .slot-preview-poster{
  transform:none !important;
  will-change:auto !important;
  backface-visibility:visible !important;
  -webkit-backface-visibility:visible !important;
  filter:none !important;
}
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character,
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character:hover,
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character.picked-temp,
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character.banned-temp{
  transition:none !important;
  transform:none !important;
  box-shadow:none !important;
  filter:none !important;
}
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character::before{
  opacity:0 !important;
  transition:none !important;
  animation:none !important;
  box-shadow:none !important;
  filter:none !important;
  background:none !important;
}
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character:not(.picked):not(.banned):not(.picked-temp):not(.banned-temp) > img{
  filter:none !important;
  box-shadow:none !important;
}
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character .grid-badge,
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character .grid-badge-x{
  visibility:visible !important;
  opacity:1 !important;
  z-index:30 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}
body.pv-draft-normal.pv-slot-preview-decode-priority .slot.picking-active{
  box-shadow:0 8px 26px rgba(var(--elrgb,255,255,255),.16) !important;
}
body.pv-draft-normal.pv-slot-preview-decode-priority .slot-preview-layer{
  contain:strict !important;
  isolation:isolate !important;
}


/* Bans en color sin tocar el grid. */
.banned-char-img,
#bans-container .banned-char-img,
#extra-bans .banned-char-img,
.secure-bans-wrap .banned-char-img{
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}

#ban-overlay{
  filter: none !important;
  -webkit-filter: none !important;
}


/* La prioridad de video NO debe borrar el estado visual del grid. */
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character.picked > img,
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character.banned > img{
  opacity:.25 !important;
  filter:grayscale(100%) !important;
  -webkit-filter:grayscale(100%) !important;
}
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character.picked-temp{
  opacity:.3 !important;
}
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character.banned-temp{
  opacity:.35 !important;
}
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character.picked,
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character.banned,
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character.picked-temp,
body.pv-draft-normal.pv-slot-preview-decode-priority #characters .character.banned-temp{
  cursor:default !important;
}

/* MOBILE DRAFT solo teléfonos (iPhone 12 Pro referencia) PC queda fuera por pointer/hover, tamaño. */
.pv-mobile-rotate-overlay{
  display:none;
}

@media (hover: none) and (pointer: coarse) and (max-width: 980px) and (orientation: portrait){
  html,
  body{
    width:100%;
    height:100%;
    min-height:100svh;
    overflow:hidden !important;
    background:#050711 !important;
  }

  body.pv-draft-normal #ui-root{
    opacity:0 !important;
    pointer-events:none !important;
    filter:blur(10px) saturate(.8) brightness(.55);
  }

  .pv-mobile-rotate-overlay{
    position:fixed;
    inset:0;
    z-index:99999;
    display:grid;
    place-items:center;
    padding:22px;
    color:#f7fbff;
    background:
      radial-gradient(90% 60% at 50% 20%, rgba(121,240,255,.18), transparent 58%),
      radial-gradient(72% 58% at 72% 78%, rgba(255,117,242,.13), transparent 62%),
      linear-gradient(180deg, rgba(5,7,17,.96), rgba(2,3,8,.985));
    overflow:hidden;
  }
  .pv-mobile-rotate-overlay::before,
  .pv-mobile-rotate-overlay::after{
    content:"";
    position:absolute;
    width:62vmin;
    height:62vmin;
    border-radius:50%;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 0 60px rgba(121,240,255,.08) inset;
    animation:pvRotateAura 7s ease-in-out infinite;
  }
  .pv-mobile-rotate-overlay::before{ top:-20vmin; left:-18vmin; }
  .pv-mobile-rotate-overlay::after{ right:-24vmin; bottom:-22vmin; animation-delay:-2.4s; }

  .pv-rotate-card{
    width:min(92vw, 390px);
    display:grid;
    justify-items:center;
    gap:10px;
    text-align:center;
    padding:28px 22px 24px;
    border-radius:28px;
    background:linear-gradient(180deg, rgba(14,18,34,.78), rgba(7,9,18,.72));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:
      0 28px 80px rgba(0,0,0,.52),
      inset 0 0 0 1px rgba(255,255,255,.05),
      0 0 38px rgba(121,240,255,.09);
    backdrop-filter:blur(16px) saturate(135%);
    -webkit-backdrop-filter:blur(16px) saturate(135%);
    animation:pvRotateCardIn .62s cubic-bezier(.16,1,.3,1) both;
  }
  .pv-rotate-orbit{
    width:112px;
    height:112px;
    border-radius:50%;
    display:grid;
    place-items:center;
    margin-bottom:2px;
    background:
      conic-gradient(from 0deg, rgba(121,240,255,0), rgba(121,240,255,.72), rgba(255,117,242,.62), rgba(255,226,117,.58), rgba(121,240,255,0));
    box-shadow:0 0 30px rgba(121,240,255,.20);
    animation:pvRotateOrbit 2.7s linear infinite;
  }
  .pv-rotate-orbit::before{
    content:"";
    position:absolute;
    width:88px;
    height:88px;
    border-radius:50%;
    background:#0a0d18;
  }
  .pv-rotate-phone{
    position:relative;
    z-index:1;
    width:36px;
    height:62px;
    border-radius:10px;
    border:3px solid #eef8ff;
    box-shadow:0 0 20px rgba(121,240,255,.28), inset 0 0 0 1px rgba(255,255,255,.12);
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    animation:pvPhoneTurn 2.7s cubic-bezier(.65,0,.35,1) infinite;
  }
  .pv-rotate-phone span{
    position:absolute;
    left:50%;
    bottom:5px;
    width:8px;
    height:8px;
    transform:translateX(-50%);
    border-radius:50%;
    background:rgba(255,255,255,.86);
  }
  .pv-rotate-kicker{
    margin:0;
    font-size:11px;
    line-height:1;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#93f5ff;
    font-weight:1000;
    text-shadow:0 0 18px rgba(121,240,255,.22);
  }
  .pv-rotate-card h2{
    margin:0;
    font-size:28px;
    line-height:1.02;
    letter-spacing:.02em;
    font-weight:1000;
    background:linear-gradient(90deg,#79f0ff,#ff75f2,#ffe275);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
  .pv-rotate-card p:last-child{
    margin:0;
    max-width:300px;
    font-size:14px;
    line-height:1.42;
    color:rgba(242,248,255,.86);
    text-shadow:0 2px 18px rgba(0,0,0,.55);
  }

  @keyframes pvRotateCardIn{
    from{ opacity:0; transform:translateY(14px) scale(.97); filter:blur(5px); }
    to{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
  }
  @keyframes pvRotateAura{
    0%,100%{ transform:scale(.96); opacity:.42; }
    50%{ transform:scale(1.08); opacity:.72; }
  }
  @keyframes pvRotateOrbit{
    to{ transform:rotate(360deg); }
  }
  @keyframes pvPhoneTurn{
    0%,18%{ transform:rotate(0deg); }
    42%,72%{ transform:rotate(90deg); }
    100%{ transform:rotate(0deg); }
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 980px) and (max-height: 560px) and (orientation: landscape){
  :root{
    --ui-zoom:1;
    --pv-mobile-center: min(340px, 40vw);
    --pv-mobile-gap:6px;
    --pv-player-head:33px;
  }

  html,
  body{
    width:100%;
    height:100%;
    min-height:100dvh;
    overflow:hidden !important;
    touch-action:manipulation;
  }
  body.pv-draft-normal{
    background-attachment:scroll !important;
    background-position:center center !important;
  }
  body.pv-draft-normal #ui-root{
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
    display:block !important;
    animation:none !important;
  }
  @supports not (height: 100dvh){
    html, body,
    body.pv-draft-normal #ui-root{ height:100vh !important; min-height:100vh !important; }
  }

  body.pv-draft-normal header{
    position:fixed !important;
    top:2px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    display:grid !important;
    width:max-content !important;
    max-width:210px !important;
    height:24px !important;
    padding:0 !important;
    margin:0 !important;
    align-content:start !important;
    justify-items:center !important;
    z-index:90 !important;
    pointer-events:none;
    zoom:1 !important;
  }
  body.pv-draft-normal header > *{ pointer-events:auto; }
  body.pv-draft-normal .site-title{
    font-size:19px !important;
    line-height:.9 !important;
    letter-spacing:.7px !important;
  }
  body.pv-draft-normal .site-title-link{
    text-shadow:0 2px 12px rgba(0,0,0,.85) !important;
  }
  body.pv-draft-normal .site-subtitle{
    margin-top:0 !important;
    font-size:8px !important;
    line-height:1 !important;
    letter-spacing:.16em !important;
    opacity:.82 !important;
  }

  body.pv-draft-normal .pv-corner-logo{
    width:24px !important;
    height:24px !important;
    top:5px !important;
    left:6px !important;
    opacity:.9 !important;
    z-index:120 !important;
  }
  body.pv-draft-normal .pv-fullscreen-btn{
    width:31px !important;
    height:31px !important;
    top:5px !important;
    right:6px !important;
    border-radius:11px !important;
    z-index:120 !important;
  }

  body.pv-draft-normal #draft-container{
    position:relative !important;
    z-index:30 !important;
    width:100vw !important;
    max-width:none !important;
    height:100dvh !important;
    margin:0 !important;
    padding:30px 6px 4px !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) var(--pv-mobile-center) minmax(0, 1fr) !important;
    gap:var(--pv-mobile-gap) !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    overflow:hidden !important;
    zoom:1 !important;
    transform:none !important;
  }
  @supports not (height: 100dvh){
    body.pv-draft-normal #draft-container{ height:100vh !important; }
  }

  body.pv-draft-normal #team1,
  body.pv-draft-normal #team2,
  body.pv-draft-normal #draft-info{
    min-width:0 !important;
    max-width:none !important;
    width:auto !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  body.pv-draft-normal #team1,
  body.pv-draft-normal #team2{
    display:flex !important;
    flex-direction:column !important;
    padding:5px !important;
    border-radius:12px !important;
    background:rgba(0,0,0,.18) !important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--side) 34%, transparent), 0 8px 20px rgba(0,0,0,.32) !important;
  }
  body.pv-draft-normal .team-section::before{
    border-radius:12px !important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--side) 34%, transparent) !important;
  }
  body.pv-draft-normal .team-section::after{
    width:90px !important;
    height:90px !important;
    top:-34px !important;
    opacity:.13 !important;
    filter:blur(14px) !important;
  }

  body.pv-draft-normal .player-header{
    flex:0 0 var(--pv-player-head) !important;
    min-height:var(--pv-player-head) !important;
    height:var(--pv-player-head) !important;
    padding:2px 4px !important;
    margin:0 0 5px !important;
    gap:5px !important;
    border-radius:9px !important;
    justify-content:flex-start !important;
    background:rgba(0,0,0,.36) !important;
  }
  body.pv-draft-normal .avatar-wrap{
    --size:27px !important;
    flex:0 0 27px !important;
  }
  body.pv-draft-normal .player-meta{
    gap:1px !important;
    max-width:calc(100% - 34px) !important;
    margin-left:0 !important;
    overflow:hidden !important;
  }
  body.pv-draft-normal .player-name{
    font-size:10px !important;
    line-height:1.02 !important;
    letter-spacing:.1px !important;
  }
  body.pv-draft-normal .player-meta .title-badge{
    max-width:100% !important;
    padding:1px 5px !important;
    font-size:7.5px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body.pv-draft-normal .rk-league-cell{
    gap:3px !important;
    margin-top:0 !important;
  }
  body.pv-draft-normal .rank-logo{
    width:13px !important;
    height:13px !important;
    flex-basis:13px !important;
    border-radius:4px !important;
  }
  body.pv-draft-normal .rank-badge{
    padding:2px 5px !important;
    font-size:7.5px !important;
    line-height:1 !important;
    gap:3px !important;
    max-width:88px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body.pv-draft-normal .team-slots-container{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    grid-template-rows:repeat(4, minmax(0,1fr)) !important;
    gap:5px !important;
    overflow:visible !important;
  }
  body.pv-draft-normal .slot{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    border-radius:10px !important;
    border-width:1px !important;
    box-shadow:0 5px 13px rgba(0,0,0,.38) !important;
  }
  body.pv-draft-normal .slot video,
  body.pv-draft-normal .slot img:not(.final-pick-img){
    image-rendering:auto !important;
    transform:none !important;
  }
  body.pv-draft-normal .final-pick-img{
    image-rendering:auto !important;
  }
  body.pv-draft-normal .slot .final-pick-img,
  body.pv-draft-normal .final-pick-img{
    object-fit:contain !important;
    padding:2px !important;
  }
  body.pv-draft-normal .slot-name-bar{
    min-height:14px !important;
    height:14px !important;
    padding:1px 3px !important;
    border-radius:0 0 9px 9px !important;
  }
  body.pv-draft-normal .slot-name-text{
    font-size:7.8px !important;
    line-height:1 !important;
    letter-spacing:.05px !important;
  }
  body.pv-draft-normal .final-pick-cons-badge,
  body.pv-draft-normal .final-pick-weapon-img{
    transform:scale(.72) !important;
    transform-origin:top left !important;
  }
  body.pv-draft-normal .final-pick-weapon-img{
    transform-origin:top right !important;
  }

  body.pv-draft-normal .pv-ranklane{
    display:grid !important;
    position:absolute !important;
    top:calc(var(--pv-player-head) + 10px) !important;
    left:5px !important;
    right:5px !important;
    width:auto !important;
    height:calc(100% - var(--pv-player-head) - 15px) !important;
    grid-template-rows:repeat(4, minmax(0,1fr)) !important;
    gap:5px !important;
    z-index:75 !important;
    pointer-events:none !important;
  }
  body.pv-draft-normal .pv-ranklane-cell{
    align-items:flex-start !important;
    justify-content:center !important;
    min-width:0 !important;
    overflow:visible !important;
  }
  body.pv-draft-normal .pv-rankbanner{
    max-width:calc(100% - 8px) !important;
    padding:3px 5px !important;
    border-radius:9px !important;
    gap:2px !important;
    box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--elrgb), .24) inset !important;
  }
  body.pv-draft-normal .pv-rankbanner::before{ border-radius:9px !important; opacity:.38 !important; }
  body.pv-draft-normal .pv-rankbanner::after{ border-radius:10px !important; }
  body.pv-draft-normal .pv-rankbanner-line{
    gap:4px !important;
    max-width:100% !important;
  }
  body.pv-draft-normal .pv-rankbanner-top,
  body.pv-draft-normal .pv-rankbanner-line .pv-rankbanner-top{
    font-size:10px !important;
    line-height:1 !important;
    letter-spacing:.35px !important;
  }
  body.pv-draft-normal .pv-rankbanner-char,
  body.pv-draft-normal .pv-rankbanner-line .pv-rankbanner-name{
    font-size:8.5px !important;
    line-height:1 !important;
    letter-spacing:.12px !important;
  }
  body.pv-draft-normal .pv-rankbanner--best{
    padding:2px 4px !important;
  }
  body.pv-draft-normal .pv-rankbest-row{
    gap:4px !important;
    max-width:100% !important;
  }
  body.pv-draft-normal .pv-best-badge{
    max-width:100% !important;
    padding:3px 7px !important;
    font-size:9px !important;
    line-height:1 !important;
  }
  body.pv-draft-normal .pv-rank-elicon,
  body.pv-draft-normal .pv-rankbanner--best .pv-rank-elicon{
    width:11px !important;
    height:11px !important;
    flex-basis:11px !important;
  }

  body.pv-draft-normal #draft-info{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    padding:4px 5px 3px !important;
    border-radius:12px !important;
    background:rgba(0,0,0,.08) !important;
    border:0 !important;
    box-shadow:none !important;
  }
  body.pv-draft-normal #current-action{
    order:1;
    margin:0 0 2px !important;
    padding:0 !important;
    min-height:20px !important;
    max-height:22px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    text-align:center !important;
    text-wrap:balance;
    font-size:10px !important;
    line-height:1.08 !important;
    letter-spacing:.18px !important;
    text-shadow:0 2px 10px rgba(0,0,0,.82) !important;
  }
  body.pv-draft-normal #dual-timers{
    order:2;
    position:static !important;
    inset:auto !important;
    width:100% !important;
    margin:0 0 2px !important;
    display:flex !important;
    justify-content:space-between !important;
    gap:5px !important;
    pointer-events:none !important;
  }
  body.pv-draft-normal .timer{
    min-width:52px !important;
    height:20px !important;
    padding:2px 6px !important;
    border-radius:8px !important;
    font-size:11px !important;
    line-height:1 !important;
    justify-content:center !important;
    gap:4px !important;
    border-width:1px !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 4px 12px rgba(0,0,0,.18) !important;
  }
  body.pv-draft-normal .timer::before{
    width:8px !important;
    height:8px !important;
    flex-basis:8px !important;
    border-width:1px !important;
    background:none !important;
  }

  body.pv-draft-normal #extra-bans,
  body.pv-draft-normal #bans-container{
    order:3;
    width:100% !important;
    margin:1px 0 !important;
    padding:0 !important;
    border-radius:8px !important;
    overflow:hidden !important;
  }
  body.pv-draft-normal #extra-bans h3,
  body.pv-draft-normal #bans-container h3{
    font-size:8px !important;
    line-height:1 !important;
    letter-spacing:.12em !important;
    margin:0 0 2px !important;
  }
  body.pv-draft-normal #extra-bans h3::after,
  body.pv-draft-normal #bans-container h3::after{
    display:none !important;
  }
  body.pv-draft-normal .extra-heading{
    gap:4px !important;
    margin-bottom:1px !important;
  }
  body.pv-draft-normal .extra-chip{
    padding:1px 4px !important;
    font-size:7px !important;
    line-height:1.2 !important;
  }
  body.pv-draft-normal .extra-chip::after{
    content:" · " attr(data-remaining) !important;
  }
  body.pv-draft-normal .bans-line{
    gap:4px !important;
    align-items:center !important;
  }
  body.pv-draft-normal .bans-group{
    gap:3px !important;
    min-height:24px !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  body.pv-draft-normal .banned-char-img{
    width:23px !important;
    height:23px !important;
    border-radius:6px !important;
    border-width:1px !important;
    box-shadow:0 3px 8px rgba(0,0,0,.34) !important;
  }

  body.pv-draft-normal #filter-bar{
    order:4;
    width:100% !important;
    margin:2px 0 2px !important;
    padding:3px 0 !important;
    border-top:1px solid rgba(255,255,255,.10) !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    overflow:hidden !important;
    flex:0 0 auto !important;
  }
  body.pv-draft-normal #filter-bar > div{
    margin:2px 0 !important;
    gap:3px !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    min-width:0 !important;
  }
  body.pv-draft-normal #filter-bar h4{
    display:none !important;
  }
  body.pv-draft-normal #search-input,
  body.pv-draft-normal #filter-bar input[type="text"],
  body.pv-draft-normal #filter-bar input[type="search"]{
    width:100% !important;
    min-width:0 !important;
    height:20px !important;
    padding:2px 7px !important;
    border-radius:8px !important;
    font-size:9px !important;
    line-height:1 !important;
    background:rgba(0,0,0,.18) !important;
  }
  body.pv-draft-normal .filter-button{
    min-width:0 !important;
    height:20px !important;
    padding:2px 5px !important;
    border-radius:999px !important;
    font-size:8px !important;
    line-height:1 !important;
    flex:0 1 auto !important;
  }
  body.pv-draft-normal .filter-button.element,
  body.pv-draft-normal .filter-button.weapon{
    width:22px !important;
    height:22px !important;
    padding:2px !important;
    border-radius:8px !important;
    flex:0 0 22px !important;
  }
  body.pv-draft-normal .filter-button[data-value="Todos"]{
    width:auto !important;
    min-width:34px !important;
    flex:0 0 auto !important;
    padding:2px 6px !important;
  }
  body.pv-draft-normal .filter-image,
  body.pv-draft-normal .filter-image img{
    width:16px !important;
    height:16px !important;
  }

  body.pv-draft-normal #confirm-pick-btn{
    order:5;
    width:100% !important;
    min-height:24px !important;
    margin:1px 0 2px !important;
    padding:4px 8px !important;
    border-radius:9px !important;
    font-size:10px !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
  }
  body.pv-draft-normal #characters-scroll{
    order:6;
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    margin:1px 0 0 !important;
    padding:3px 2px 7px !important;
    overflow:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
    contain:layout style !important;
  }
  body.pv-draft-normal #characters-scroll::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
  }
  body.pv-draft-normal #characters{
    display:grid !important;
    grid-template-columns:repeat(6, 42px) !important;
    justify-content:center !important;
    align-content:start !important;
    gap:5px !important;
    padding:0 !important;
  }
  body.pv-draft-normal #characters .character,
  body.pv-draft-normal .character{
    width:42px !important;
    height:42px !important;
    border-width:1px !important;
    transform:none !important;
  }
  body.pv-draft-normal .character:hover{
    transform:none !important;
  }
  body.pv-draft-normal .character img{
    border-radius:50% !important;
  }
  body.pv-draft-normal .character .grid-badge{
    padding:1px 3px !important;
    min-width:15px !important;
    height:13px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:5px !important;
    font-size:7.5px !important;
    line-height:1 !important;
    z-index:32 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  body.pv-draft-normal .character .grid-badge-x{
    width:15px !important;
    height:15px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border-radius:999px !important;
    font-size:11px !important;
    line-height:1 !important;
    z-index:34 !important;
  }
  body.pv-draft-normal .character .grid-badge[style*="top: 4px"][style*="left: 4px"]{ transform:translate(-5px,-3px) !important; }
  body.pv-draft-normal .character .grid-badge[style*="top: 4px"][style*="right: 4px"]{ transform:translate(5px,-3px) !important; }
  body.pv-draft-normal .character .grid-badge[style*="bottom: 4px"][style*="left: 4px"]{ transform:translate(-5px,4px) !important; }
  body.pv-draft-normal .character .grid-badge[style*="bottom: 4px"][style*="right: 4px"]{ transform:translate(5px,4px) !important; }
  body.pv-draft-normal .character .grid-badge-x[style*="top: -6px"][style*="left: -6px"]{ transform:translate(1px,3px) !important; }
  body.pv-draft-normal .character .grid-badge-x[style*="top: -6px"][style*="right: -6px"]{ transform:translate(-1px,3px) !important; }
  body.pv-draft-normal .character.pv-picked-p1::after,
  body.pv-draft-normal .character.pv-picked-p2::after{
    width:15px !important;
    height:15px !important;
    font-size:10px !important;
    line-height:1 !important;
    border-radius:999px !important;
  }
  body.pv-draft-normal .character.pv-picked-p1::after{ left:2px !important; }
  body.pv-draft-normal .character.pv-picked-p2::after{ right:2px !important; }

  body.pv-draft-normal #volume-toggle{
    width:34px !important;
    height:34px !important;
    left:6px !important;
    bottom:5px !important;
    font-size:16px !important;
    z-index:1600 !important;
  }
  body.pv-draft-normal #volume-control{
    left:44px !important;
    bottom:5px !important;
    width:188px !important;
    max-width:188px !important;
    min-height:48px !important;
    padding:8px 10px !important;
    border-radius:18px !important;
    gap:6px !important;
    z-index:1599 !important;
  }
  body.pv-draft-normal #volume-control.is-collapsed{
    width:0 !important;
    max-width:0 !important;
    min-width:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    opacity:0 !important;
    transform:translateX(-8px) !important;
  }
  body.pv-draft-normal #volume-header{
    min-width:164px !important;
    gap:5px !important;
  }
  body.pv-draft-normal #volume-title{
    font-size:10px !important;
  }
  body.pv-draft-normal #volume-close{
    width:24px !important;
    height:24px !important;
  }
  body.pv-draft-normal #main-volume-slider{
    height:6px !important;
  }
  body.pv-draft-normal #main-volume-slider::-webkit-slider-thumb{
    width:15px !important;
    height:15px !important;
  }
  body.pv-draft-normal #main-volume-slider::-moz-range-thumb{
    width:15px !important;
    height:15px !important;
  }

  body.pv-mode-pola #draft-container{
    margin:0 !important;
    padding-top:30px !important;
  }
  body.pv-mode-pola #characters-scroll{
    margin-top:1px !important;
    padding-top:3px !important;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 760px) and (max-height: 430px) and (orientation: landscape){
  :root{
    --pv-mobile-center: min(316px, 39vw);
    --pv-mobile-gap:5px;
    --pv-player-head:30px;
  }
  body.pv-draft-normal #draft-container{
    padding-left:5px !important;
    padding-right:5px !important;
  }
  body.pv-draft-normal .player-header{
    margin-bottom:4px !important;
  }
  body.pv-draft-normal .team-slots-container{
    gap:4px !important;
  }
  body.pv-draft-normal #characters{
    grid-template-columns:repeat(6, 39px) !important;
    gap:4px !important;
  }
  body.pv-draft-normal #characters .character,
  body.pv-draft-normal .character{
    width:39px !important;
    height:39px !important;
  }
  body.pv-draft-normal #current-action{
    min-height:18px !important;
    max-height:20px !important;
    font-size:9px !important;
  }
  body.pv-draft-normal .timer{
    height:18px !important;
    min-width:48px !important;
    font-size:10px !important;
  }
  body.pv-draft-normal .banned-char-img{
    width:21px !important;
    height:21px !important;
  }
}

/* Ajustes móviles encapsulados para pantallas táctiles. */
@media (hover: none) and (pointer: coarse) and (max-width: 980px) and (orientation: portrait){
  .pv-mobile-rotate-overlay{
    background:
      radial-gradient(72% 48% at 50% 16%, rgba(110,170,255,.22), transparent 62%),
      radial-gradient(72% 54% at 50% 92%, rgba(178,95,255,.18), transparent 65%),
      linear-gradient(180deg, #050714 0%, #080a18 52%, #03040b 100%) !important;
  }
  .pv-mobile-rotate-overlay::before{
    width:82vmin !important;
    height:82vmin !important;
    top:auto !important;
    left:50% !important;
    bottom:50% !important;
    transform:translateX(-50%) !important;
    border:0 !important;
    background:conic-gradient(from 0deg, transparent, rgba(116,238,255,.26), transparent, rgba(255,114,234,.22), transparent) !important;
    filter:blur(20px) !important;
    animation:pvRotateOrbit 5.2s linear infinite !important;
  }
  .pv-mobile-rotate-overlay::after{
    width:160vmax !important;
    height:160vmax !important;
    right:auto !important;
    bottom:auto !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    border:1px solid rgba(255,255,255,.055) !important;
    box-shadow:0 0 0 28px rgba(255,255,255,.012) inset, 0 0 70px rgba(116,238,255,.07) inset !important;
    animation:pvRotateAura 4.4s ease-in-out infinite !important;
  }
  .pv-rotate-card{
    width:min(88vw, 360px) !important;
    padding:24px 20px 22px !important;
    border-radius:26px !important;
    gap:9px !important;
    background:linear-gradient(180deg, rgba(18,24,44,.82), rgba(7,9,19,.76)) !important;
    border:1px solid rgba(160,220,255,.18) !important;
    box-shadow:0 26px 70px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.08), 0 0 44px rgba(114,222,255,.10) !important;
  }
  .pv-rotate-orbit{
    width:98px !important;
    height:98px !important;
    box-shadow:0 0 34px rgba(120,235,255,.20), inset 0 0 18px rgba(255,255,255,.06) !important;
  }
  .pv-rotate-orbit::before{ width:76px !important; height:76px !important; }
  .pv-rotate-phone{
    width:34px !important;
    height:58px !important;
    border-width:3px !important;
    animation:pvPhoneTurn 2.15s cubic-bezier(.58,0,.26,1) infinite !important;
  }
  .pv-rotate-kicker{ font-size:10px !important; color:#8cf3ff !important; }
  .pv-rotate-card h2{ font-size:26px !important; letter-spacing:.01em !important; }
  .pv-rotate-card p:last-child{ font-size:13px !important; line-height:1.36 !important; }
}

@media (hover: none) and (pointer: coarse) and (max-width: 980px) and (max-height: 560px) and (orientation: landscape){
  :root{
    --pv-mobile-center: min(294px, 35.5vw) !important;
    --pv-mobile-gap:5px !important;
    --pv-player-head:36px !important;
    --pv-mobile-topbar:29px;
  }

  body.pv-draft-normal .pv-corner-logo{
    width:23px !important;
    height:23px !important;
    top:4px !important;
    left:6px !important;
    z-index:1700 !important;
  }
  body.pv-draft-normal .pv-fullscreen-btn{
    width:24px !important;
    height:24px !important;
    top:4px !important;
    left:33px !important;
    right:auto !important;
    border-radius:8px !important;
    z-index:1700 !important;
    background:rgba(10,12,18,.64) !important;
    border-color:rgba(255,255,255,.14) !important;
    box-shadow:0 5px 14px rgba(0,0,0,.24) !important;
  }
  body.pv-draft-normal .pv-fullscreen-icon{
    width:12px !important;
    height:12px !important;
  }
  body.pv-draft-normal header{
    top:1px !important;
    height:27px !important;
    max-width:184px !important;
    z-index:1600 !important;
  }
  body.pv-draft-normal .site-title{
    font-size:17px !important;
    letter-spacing:.55px !important;
  }
  body.pv-draft-normal .site-subtitle{
    font-size:7.5px !important;
    letter-spacing:.14em !important;
  }

  body.pv-draft-normal #volume-toggle,
  body.pv-draft-normal #pv-settings-btn{
    position:fixed !important;
    top:4px !important;
    bottom:auto !important;
    width:25px !important;
    height:25px !important;
    min-width:25px !important;
    border-radius:9px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    font-size:13px !important;
    padding:0 !important;
    opacity:.96 !important;
    background:rgba(9,11,17,.70) !important;
    border:1px solid rgba(255,255,255,.15) !important;
    box-shadow:0 6px 16px rgba(0,0,0,.26) !important;
    backdrop-filter:blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter:blur(8px) saturate(120%) !important;
    z-index:1700 !important;
  }
  body.pv-draft-normal #volume-toggle{ right:6px !important; left:auto !important; }
  body.pv-draft-normal #pv-settings-btn{ right:36px !important; left:auto !important; }
  body.pv-draft-normal #pv-settings-menu{
    top:34px !important;
    right:6px !important;
    bottom:auto !important;
    min-width:172px !important;
    padding:7px !important;
    border-radius:12px !important;
    transform-origin:right top !important;
    font-size:11px !important;
    z-index:1699 !important;
  }
  body.pv-draft-normal #pv-settings-menu .item{ padding:8px !important; border-radius:10px !important; }
  body.pv-draft-normal #pv-settings-menu .sub{ font-size:10px !important; }

  body.pv-draft-normal #volume-control{
    position:fixed !important;
    top:34px !important;
    right:6px !important;
    left:auto !important;
    bottom:auto !important;
    width:176px !important;
    max-width:176px !important;
    min-height:46px !important;
    padding:7px 9px !important;
    border-radius:14px !important;
    gap:5px !important;
    z-index:1698 !important;
    transform-origin:top right !important;
    transition:opacity .22s ease, transform .24s cubic-bezier(.16,.84,.32,1), width .24s cubic-bezier(.16,.84,.32,1), max-width .24s cubic-bezier(.16,.84,.32,1), padding .24s ease !important;
  }
  body.pv-draft-normal #volume-control.is-collapsed{
    display:flex !important;
    width:0 !important;
    max-width:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    opacity:0 !important;
    transform:translate3d(8px,-8px,0) scale(.92) !important;
    pointer-events:none !important;
    overflow:hidden !important;
  }
  body.pv-draft-normal #volume-header{ min-width:154px !important; }
  body.pv-draft-normal #volume-icon{ font-size:12px !important; }
  body.pv-draft-normal #volume-title{ font-size:10px !important; }
  body.pv-draft-normal #volume-close{ width:22px !important; height:22px !important; padding:0 !important; font-size:10px !important; }

  body.pv-draft-normal #draft-container{
    padding:var(--pv-mobile-topbar) 5px 4px !important;
    grid-template-columns:minmax(0,1fr) var(--pv-mobile-center) minmax(0,1fr) !important;
    gap:var(--pv-mobile-gap) !important;
  }
  body.pv-draft-normal #team1,
  body.pv-draft-normal #team2{
    padding:4px !important;
    border-radius:12px !important;
  }
  body.pv-draft-normal .player-header{
    display:grid !important;
    grid-template-columns:28px minmax(0,1fr) !important;
    align-items:center !important;
    justify-items:center !important;
    flex:0 0 var(--pv-player-head) !important;
    height:var(--pv-player-head) !important;
    min-height:var(--pv-player-head) !important;
    padding:3px 5px !important;
    margin:0 0 4px !important;
    gap:5px !important;
    border-radius:10px !important;
  }
  body.pv-draft-normal .avatar-wrap{
    --size:28px !important;
    width:28px !important;
    height:28px !important;
    flex:0 0 28px !important;
  }
  body.pv-draft-normal .player-meta{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:1px !important;
    text-align:center !important;
    overflow:hidden !important;
  }
  body.pv-draft-normal .player-name{
    max-width:100% !important;
    font-size:9.6px !important;
    line-height:1 !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body.pv-draft-normal .player-meta .title-badge{
    max-width:100% !important;
    padding:1px 5px !important;
    font-size:7px !important;
    line-height:1.05 !important;
  }
  body.pv-draft-normal .rk-league-cell{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:3px !important;
    margin-top:0 !important;
    min-width:0 !important;
  }
  body.pv-draft-normal .rank-logo{
    width:14px !important;
    height:14px !important;
    flex:0 0 14px !important;
    border-radius:4px !important;
    background-size:contain !important;
  }
  body.pv-draft-normal .rank-badge{
    min-width:0 !important;
    max-width:calc(100% - 18px) !important;
    padding:2px 5px !important;
    font-size:7.2px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    text-align:center !important;
    justify-content:center !important;
  }

  body.pv-draft-normal .team-slots-container{
    gap:4px !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    grid-template-rows:repeat(4, minmax(0,1fr)) !important;
  }
  body.pv-draft-normal .slot{
    border-radius:10px !important;
    min-height:0 !important;
  }
  body.pv-draft-normal .slot.pv-pick-target:not(.finalized):not(.picking-active)::after{
    font-size:36px !important;
    line-height:1 !important;
    text-shadow:0 2px 12px color-mix(in srgb, var(--side, #9fd8ff) 42%, transparent), 0 8px 20px rgba(0,0,0,.58) !important;
  }
  body.pv-draft-normal .slot.pv-pick-target:not(.finalized):not(.picking-active)::before{
    inset:4px !important;
    border-radius:10px !important;
    padding:3px !important;
  }
  body.pv-draft-normal .slot-name-bar{ height:15px !important; min-height:15px !important; padding:1px 3px !important; }
  body.pv-draft-normal .slot-name-text{ font-size:8px !important; line-height:1 !important; }
  body.pv-draft-normal .slot .final-pick-img,
  body.pv-draft-normal .final-pick-img{
    object-fit:contain !important;
    padding:1px !important;
    animation:hoverUp 3s ease-in-out infinite !important;
  }
  body.pv-draft-normal .slot .final-pick-cons-badge,
  body.pv-draft-normal .final-pick-cons-badge{
    top:3px !important;
    left:3px !important;
    padding:2px 4px !important;
    border-radius:6px !important;
    font-size:8.5px !important;
    line-height:1 !important;
    transform:none !important;
  }
  body.pv-draft-normal .slot .final-pick-weapon-img,
  body.pv-draft-normal .final-pick-weapon-img{
    top:3px !important;
    right:3px !important;
    width:21px !important;
    height:21px !important;
    padding:1px !important;
    border-radius:6px !important;
    transform:none !important;
  }
  body.pv-draft-normal .final-pick-top-badge{
    left:50% !important;
    right:auto !important;
    bottom:16px !important;
    transform:translateX(-50%) !important;
    gap:2px !important;
    padding:2px 4px 2px 4px !important;
    border-radius:7px !important;
    font-size:7.5px !important;
    letter-spacing:.035em !important;
    max-width:calc(100% - 8px) !important;
    z-index:9 !important;
  }
  body.pv-draft-normal .final-pick-top-star{
    width:8px !important;
    height:8px !important;
    flex-basis:8px !important;
  }

  body.pv-draft-normal .pv-pick-reveal-overlay{ z-index:10 !important; }
  body.pv-draft-normal .pv-pick-reveal-flash{ filter:blur(7px) !important; inset:-5% !important; }
  body.pv-draft-normal .pv-pick-reveal-glow{ filter:blur(7px) saturate(1.04) !important; inset:-6% !important; }
  body.pv-draft-normal .pv-pick-reveal-sigil{
    width:22px !important;
    max-width:24% !important;
    filter:drop-shadow(0 0 9px rgba(var(--elrgb,255,255,255),.42)) !important;
  }
  body.pv-draft-normal .pv-pick-reveal-sweep{ filter:blur(5px) !important; }

  body.pv-draft-normal #draft-info{
    padding:3px 4px 4px !important;
    border-radius:12px !important;
  }
  body.pv-draft-normal #current-action{
    min-height:17px !important;
    max-height:19px !important;
    margin:0 0 2px !important;
    font-size:8.7px !important;
    line-height:1.05 !important;
  }
  body.pv-draft-normal #dual-timers{ margin:0 0 2px !important; gap:4px !important; }
  body.pv-draft-normal .timer{
    min-width:52px !important;
    height:21px !important;
    padding:2px 6px !important;
    font-size:10.8px !important;
    gap:5px !important;
  }
  body.pv-draft-normal .timer::before{
    width:11px !important;
    height:11px !important;
    flex-basis:11px !important;
    box-shadow:0 0 8px currentColor !important;
  }
  body.pv-draft-normal #extra-bans,
  body.pv-draft-normal #bans-container{ margin:1px 0 2px !important; }
  body.pv-draft-normal #extra-bans h3,
  body.pv-draft-normal #bans-container h3{ font-size:7.5px !important; margin:0 0 2px !important; }
  body.pv-draft-normal .bans-group{ min-height:31px !important; gap:4px !important; justify-content:center !important; }
  body.pv-draft-normal .banned-char-img{
    width:30px !important;
    height:30px !important;
    border-radius:7px !important;
  }

  body.pv-draft-normal #filter-bar{ margin:1px 0 2px !important; padding:2px 0 !important; }
  body.pv-draft-normal #filter-bar > div{ gap:2px !important; margin:1px 0 !important; }
  body.pv-draft-normal #search-input,
  body.pv-draft-normal #filter-bar input[type="text"],
  body.pv-draft-normal #filter-bar input[type="search"]{
    height:18px !important;
    padding:1px 6px !important;
    font-size:8.5px !important;
  }
  body.pv-draft-normal .filter-button{ height:19px !important; padding:1px 5px !important; font-size:7.5px !important; }
  body.pv-draft-normal .filter-button.element,
  body.pv-draft-normal .filter-button.weapon{ width:20px !important; height:20px !important; flex-basis:20px !important; }
  body.pv-draft-normal .filter-image,
  body.pv-draft-normal .filter-image img{ width:15px !important; height:15px !important; }
  body.pv-draft-normal #confirm-pick-btn{
    min-height:23px !important;
    margin:1px 0 2px !important;
    padding:3px 8px !important;
    font-size:9px !important;
    border-radius:8px !important;
  }
  body.pv-draft-normal #characters-scroll{ padding:2px 1px 5px !important; }
  body.pv-draft-normal #characters{
    grid-template-columns:repeat(6, 38px) !important;
    gap:4px !important;
  }
  body.pv-draft-normal #characters .character,
  body.pv-draft-normal .character{
    width:38px !important;
    height:38px !important;
  }
  body.pv-draft-normal .character .grid-badge:not(.grid-badge-x){
    min-width:13px !important;
    height:12px !important;
    font-size:7px !important;
    padding:1px 3px !important;
  }
  body.pv-draft-normal .character .grid-badge-x{
    width:19px !important;
    height:19px !important;
    font-size:15px !important;
    line-height:19px !important;
    font-weight:1000 !important;
    color:#ff4242 !important;
    text-shadow:0 1px 3px rgba(0,0,0,.86), 0 0 8px rgba(255,40,40,.45) !important;
  }
  body.pv-draft-normal .character.pv-picked-p1::after,
  body.pv-draft-normal .character.pv-picked-p2::after{
    width:13px !important;
    height:13px !important;
    font-size:8px !important;
    border-width:1px !important;
  }

  body.pv-draft-normal .pv-ranklane{
    position:fixed !important;
    z-index:1500 !important;
    pointer-events:none !important;
    display:grid !important;
    contain:none !important;
    overflow:visible !important;
  }
  body.pv-draft-normal .pv-ranklane-cell{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    overflow:visible !important;
    min-width:0 !important;
  }
  body.pv-draft-normal .pv-rankbanner{
    max-width:calc(100% - 10px) !important;
    width:auto !important;
    padding:2px 5px !important;
    border-radius:8px !important;
    gap:2px !important;
    transform-origin:center top !important;
    box-shadow:0 8px 20px rgba(0,0,0,.48), 0 0 0 1px rgba(var(--elrgb), .26) inset !important;
  }
  body.pv-draft-normal .pv-rankbanner-line{ gap:3px !important; }
  body.pv-draft-normal .pv-rankbanner-top,
  body.pv-draft-normal .pv-rankbanner-line .pv-rankbanner-top{ font-size:9px !important; letter-spacing:.25px !important; }
  body.pv-draft-normal .pv-rankbanner-char,
  body.pv-draft-normal .pv-rankbanner-line .pv-rankbanner-name{ font-size:7.8px !important; }
  body.pv-draft-normal .pv-rankbanner--best{ padding:2px 4px !important; }
  body.pv-draft-normal .pv-best-badge{ padding:2px 5px !important; font-size:8px !important; max-width:100% !important; }
  body.pv-draft-normal .pv-rank-elicon,
  body.pv-draft-normal .pv-rankbanner--best .pv-rank-elicon{ width:10px !important; height:10px !important; flex-basis:10px !important; }

  body.pv-draft-normal.pv-slot-preview-open .frame-img,
  body.pv-draft-normal.pv-slot-preview-open .frame-css,
  body.pv-draft-normal.pv-slot-preview-open .avatar-wrap[data-frame="owner"]::after,
  body.pv-draft-normal.pv-css-paused .frame-img,
  body.pv-draft-normal.pv-css-paused .frame-css,
  body.pv-draft-normal.pv-css-paused .avatar-wrap[data-frame="owner"]::after,
  body.pv-draft-normal.pv-perf-video .frame-img,
  body.pv-draft-normal.pv-perf-video .frame-css,
  body.pv-draft-normal.pv-perf-video .avatar-wrap[data-frame="owner"]::after,
  body.pv-draft-normal.pv-trailer-open .frame-img,
  body.pv-draft-normal.pv-trailer-open .frame-css,
  body.pv-draft-normal.pv-trailer-open .avatar-wrap[data-frame="owner"]::after,
  body.pv-draft-normal.pv-trailer-hard-perf .frame-img,
  body.pv-draft-normal.pv-trailer-hard-perf .frame-css,
  body.pv-draft-normal.pv-trailer-hard-perf .avatar-wrap[data-frame="owner"]::after{
    animation-play-state:running !important;
  }

  body.pv-draft-normal.draft-finished #draft-info{
    gap:2px !important;
    overflow:auto !important;
    scrollbar-width:none !important;
  }
  body.pv-draft-normal.draft-finished #draft-info::-webkit-scrollbar{ width:0 !important; height:0 !important; }
  body.pv-draft-normal.draft-finished #current-action{ font-size:9px !important; min-height:16px !important; }
  body.pv-draft-normal.draft-finished #dual-timers,
  body.pv-draft-normal.draft-finished #extra-bans,
  body.pv-draft-normal.draft-finished #bans-container{
    flex:0 0 auto !important;
  }
  body.pv-draft-normal #pd-normal-ready-bar{
    margin:2px 0 3px !important;
    min-height:0 !important;
    padding:5px !important;
    border-radius:12px !important;
    gap:5px !important;
    flex-direction:column !important;
  }
  body.pv-draft-normal #pd-normal-ready-bar .pd-normal-ready-text{
    font-size:8.5px !important;
    line-height:1.12 !important;
    letter-spacing:.08px !important;
  }
  body.pv-draft-normal #pd-normal-ready-bar .pd-normal-ready-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:5px !important;
    width:100% !important;
  }
  body.pv-draft-normal #pd-normal-ready-bar .pd-final-ready-btn{
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    min-width:0 !important;
    width:100% !important;
    height:25px !important;
    padding:0 6px !important;
    border-radius:9px !important;
    font-size:8.2px !important;
    letter-spacing:.12px !important;
  }
  body.pv-draft-normal #postdraft-panel{
    width:100% !important;
    max-width:100% !important;
    margin:2px auto 3px !important;
    gap:3px !important;
    display:grid !important;
  }
  body.pv-draft-normal #postdraft-panel .pd-collapse-toolbar{
    margin:0 0 2px !important;
    height:22px !important;
    justify-content:flex-end !important;
  }
  body.pv-draft-normal #postdraft-panel .pd-collapse-btn,
  body.pv-draft-normal #pd-admin-lock-btn{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    font-size:12px !important;
    border-radius:9px !important;
  }
  body.pv-draft-normal #postdraft-panel .pd-eye-ico{ width:13px !important; height:8px !important; border-width:1.5px !important; }
  body.pv-draft-normal #postdraft-panel .pd-row{ gap:4px !important; width:100% !important; }
  body.pv-draft-normal #postdraft-panel .pd-id-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 64px !important;
    align-items:center !important;
    margin-top:2px !important;
  }
  body.pv-draft-normal #postdraft-panel .pd-code{
    min-width:0 !important;
    width:100% !important;
    max-width:none !important;
    height:24px !important;
    padding:3px 6px !important;
    border-radius:8px !important;
    font-size:9px !important;
    letter-spacing:.25px !important;
  }
  body.pv-draft-normal #postdraft-panel .pd-btn{
    min-width:0 !important;
    height:24px !important;
    padding:3px 6px !important;
    border-radius:8px !important;
    font-size:8.2px !important;
    line-height:1 !important;
  }
  body.pv-draft-normal #postdraft-panel .pd-status-row{ min-height:14px !important; margin-top:1px !important; }
  body.pv-draft-normal #postdraft-panel #pd-status,
  body.pv-draft-normal #postdraft-panel .pd-hint{ font-size:8px !important; line-height:1.1 !important; min-height:0 !important; }
  body.pv-draft-normal #postdraft-panel .pd-no-id-banner{ font-size:8.5px !important; padding:3px 0 !important; }
  body.pv-draft-normal #pd-separate-times-host{ width:100% !important; }
  body.pv-draft-normal #postdraft-panel .pd-times-topbar{ gap:4px !important; }
  body.pv-draft-normal #postdraft-panel .pd-times-toggle{
    min-width:0 !important;
    width:100% !important;
    height:25px !important;
    margin:3px auto 2px !important;
    padding:3px 7px !important;
    border-radius:9px !important;
    gap:5px !important;
    font-size:8.5px !important;
  }
  body.pv-draft-normal #postdraft-panel .pd-times-toggle .ico{ font-size:11px !important; }
  body.pv-draft-normal #postdraft-panel .pd-times-wrap{ margin-top:2px !important; }
  body.pv-draft-normal #postdraft-panel .pd-times-grid{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:4px !important;
    align-items:stretch !important;
  }
  body.pv-draft-normal #postdraft-panel .pd-times-center{
    order:-1 !important;
    grid-column:1 / -1 !important;
    padding:5px !important;
    border-radius:10px !important;
    min-height:0 !important;
  }
  body.pv-draft-normal #postdraft-panel .pd-times-side{
    padding:5px !important;
    border-radius:10px !important;
    min-width:0 !important;
  }
  body.pv-draft-normal #postdraft-panel .pd-times-side-title{
    font-size:8.5px !important;
    line-height:1 !important;
    margin:0 0 4px !important;
  }
  body.pv-draft-normal #postdraft-panel .pd-time-row{
    display:grid !important;
    grid-template-columns:32px minmax(0,1fr) !important;
    gap:3px !important;
    margin:0 0 3px !important;
  }
  body.pv-draft-normal #postdraft-panel .pd-time-row label{ font-size:7.5px !important; line-height:1 !important; }
  body.pv-draft-normal #postdraft-panel .pd-time-input{
    height:21px !important;
    max-width:none !important;
    padding:2px 3px !important;
    border-radius:7px !important;
    font-size:8.5px !important;
    letter-spacing:.15px !important;
  }
  body.pv-draft-normal #postdraft-panel .pd-times-footer{ gap:3px !important; margin-top:3px !important; }
  body.pv-draft-normal #postdraft-panel .pd-times-total{ font-size:8px !important; line-height:1.05 !important; }
  body.pv-draft-normal #postdraft-panel .pd-times-ready{ width:100% !important; height:22px !important; }
  body.pv-draft-normal #postdraft-panel .pd-times-versus{ font-size:13px !important; margin:0 0 2px !important; }
  body.pv-draft-normal #postdraft-panel .pd-times-diff-main{ font-size:9px !important; line-height:1.12 !important; }
  body.pv-draft-normal #postdraft-panel .pd-times-diff-sub,
  body.pv-draft-normal #postdraft-panel .pd-times-meta{ margin-top:2px !important; font-size:7.5px !important; line-height:1.1 !important; }
  body.pv-draft-normal #pd-admin-lock-floating{
    top:33px !important;
    right:6px !important;
    gap:2px !important;
    z-index:1701 !important;
  }
  body.pv-draft-normal #pd-admin-lock-state{ font-size:7px !important; letter-spacing:.2px !important; }
}

@media (hover: none) and (pointer: coarse) and (max-width: 760px) and (max-height: 430px) and (orientation: landscape){
  :root{
    --pv-mobile-center: min(282px, 34.5vw) !important;
    --pv-mobile-gap:4px !important;
    --pv-player-head:34px !important;
  }
  body.pv-draft-normal #draft-container{ padding-left:4px !important; padding-right:4px !important; }
  body.pv-draft-normal .team-slots-container{ gap:3px !important; }
  body.pv-draft-normal #characters{ grid-template-columns:repeat(6, 36px) !important; gap:3px !important; }
  body.pv-draft-normal #characters .character,
  body.pv-draft-normal .character{ width:36px !important; height:36px !important; }
  body.pv-draft-normal .banned-char-img{ width:28px !important; height:28px !important; }
  body.pv-draft-normal .rank-badge{ font-size:6.8px !important; padding:2px 4px !important; }
  body.pv-draft-normal .rank-logo{ width:13px !important; height:13px !important; flex-basis:13px !important; }
}

@media (hover: none) and (pointer: coarse) and (max-width: 980px) and (max-height: 560px) and (orientation: landscape){
  html body.pv-draft-normal.pv-slot-preview-open .player-header .frame-img,
  html body.pv-draft-normal.pv-slot-preview-open .player-header .frame-css,
  html body.pv-draft-normal.pv-slot-preview-open .player-header .avatar-wrap[data-frame="owner"]::after,
  html body.pv-draft-normal.pv-css-paused .player-header .frame-img,
  html body.pv-draft-normal.pv-css-paused .player-header .frame-css,
  html body.pv-draft-normal.pv-css-paused .player-header .avatar-wrap[data-frame="owner"]::after,
  html body.pv-draft-normal.pv-perf-video .player-header .frame-img,
  html body.pv-draft-normal.pv-perf-video .player-header .frame-css,
  html body.pv-draft-normal.pv-perf-video .player-header .avatar-wrap[data-frame="owner"]::after,
  html body.pv-draft-normal.pv-trailer-open .player-header .frame-img,
  html body.pv-draft-normal.pv-trailer-open .player-header .frame-css,
  html body.pv-draft-normal.pv-trailer-open .player-header .avatar-wrap[data-frame="owner"]::after,
  html body.pv-draft-normal.pv-trailer-hard-perf .player-header .frame-img,
  html body.pv-draft-normal.pv-trailer-hard-perf .player-header .frame-css,
  html body.pv-draft-normal.pv-trailer-hard-perf .player-header .avatar-wrap[data-frame="owner"]::after{
    animation-play-state:running !important;
    will-change:transform, opacity, filter !important;
  }
}

/* MOBILE DRAFT correcciones puntuales Solo teléfono/tablet chico. PC queda fuera por tamaño/orientación. */
.pv-sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width: 580px) and (orientation: portrait){
  html,
  body{
    width:100% !important;
    height:100% !important;
    min-height:100svh !important;
    overflow:hidden !important;
    background:#050711 !important;
  }
  body.pv-draft-normal #ui-root{
    opacity:0 !important;
    pointer-events:none !important;
    filter:blur(10px) saturate(.8) brightness(.52) !important;
  }
  .pv-mobile-rotate-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483000 !important;
    display:grid !important;
    place-items:center !important;
    padding:22px !important;
    color:#f7fbff !important;
    overflow:hidden !important;
    background:
      radial-gradient(72% 48% at 50% 16%, rgba(110,170,255,.24), transparent 62%),
      radial-gradient(72% 54% at 50% 92%, rgba(178,95,255,.20), transparent 65%),
      linear-gradient(180deg, #050714 0%, #080a18 52%, #03040b 100%) !important;
  }
  .pv-mobile-rotate-overlay::before{
    content:"" !important;
    position:absolute !important;
    width:82vmin !important;
    height:82vmin !important;
    left:50% !important;
    bottom:50% !important;
    border-radius:50% !important;
    transform:translateX(-50%) !important;
    background:conic-gradient(from 0deg, transparent, rgba(116,238,255,.28), transparent, rgba(255,114,234,.24), transparent) !important;
    filter:blur(20px) !important;
    animation:pvRotateOrbit 5.2s linear infinite !important;
    pointer-events:none !important;
  }
  .pv-mobile-rotate-overlay::after{
    content:"" !important;
    position:absolute !important;
    width:160vmax !important;
    height:160vmax !important;
    left:50% !important;
    top:50% !important;
    border-radius:50% !important;
    transform:translate(-50%,-50%) !important;
    border:1px solid rgba(255,255,255,.055) !important;
    box-shadow:0 0 0 28px rgba(255,255,255,.012) inset, 0 0 70px rgba(116,238,255,.08) inset !important;
    animation:pvRotateAura 4.4s ease-in-out infinite !important;
    pointer-events:none !important;
  }
  .pv-rotate-card{
    width:min(88vw, 360px) !important;
    display:grid !important;
    justify-items:center !important;
    gap:9px !important;
    text-align:center !important;
    padding:24px 20px 22px !important;
    border-radius:26px !important;
    background:linear-gradient(180deg, rgba(18,24,44,.84), rgba(7,9,19,.78)) !important;
    border:1px solid rgba(160,220,255,.20) !important;
    box-shadow:0 26px 70px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08), 0 0 44px rgba(114,222,255,.12) !important;
    backdrop-filter:blur(16px) saturate(135%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(135%) !important;
    animation:pvRotateCardIn .62s cubic-bezier(.16,1,.3,1) both !important;
  }
  .pv-rotate-orbit{
    width:100px !important;
    height:100px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    background:conic-gradient(from 0deg, rgba(121,240,255,0), rgba(121,240,255,.76), rgba(255,117,242,.66), rgba(255,226,117,.58), rgba(121,240,255,0)) !important;
    box-shadow:0 0 34px rgba(120,235,255,.20), inset 0 0 18px rgba(255,255,255,.06) !important;
    animation:pvRotateOrbit 2.45s linear infinite !important;
  }
  .pv-rotate-orbit::before{
    content:"" !important;
    position:absolute !important;
    width:76px !important;
    height:76px !important;
    border-radius:50% !important;
    background:#0a0d18 !important;
  }
  .pv-rotate-phone{
    position:relative !important;
    z-index:1 !important;
    width:34px !important;
    height:58px !important;
    border-radius:10px !important;
    border:3px solid #eef8ff !important;
    box-shadow:0 0 20px rgba(121,240,255,.28), inset 0 0 0 1px rgba(255,255,255,.12) !important;
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)) !important;
    animation:pvPhoneTurn 2.15s cubic-bezier(.58,0,.26,1) infinite !important;
  }
  .pv-rotate-kicker{
    margin:0 !important;
    font-size:10px !important;
    line-height:1 !important;
    letter-spacing:.18em !important;
    text-transform:uppercase !important;
    color:#8cf3ff !important;
    font-weight:1000 !important;
  }
  .pv-rotate-card h2{
    margin:0 !important;
    font-size:26px !important;
    line-height:1.02 !important;
    letter-spacing:.01em !important;
    font-weight:1000 !important;
    background:linear-gradient(90deg,#79f0ff,#ff75f2,#ffe275) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
  }
  .pv-rotate-card p:last-child{
    margin:0 !important;
    max-width:300px !important;
    font-size:13px !important;
    line-height:1.36 !important;
    color:rgba(242,248,255,.88) !important;
  }
}

@media (max-width: 980px) and (max-height: 560px) and (orientation: landscape){
  /* Topbar móvil: logo libre, fullscreen a la izquierda; sonido/tuerca/candado juntos a la derecha. */
  body.pv-draft-normal .pv-corner-logo{
    width:23px !important;
    height:23px !important;
    top:4px !important;
    left:6px !important;
    z-index:1700 !important;
  }
  body.pv-draft-normal .pv-fullscreen-btn{
    width:23px !important;
    height:23px !important;
    top:4px !important;
    left:33px !important;
    right:auto !important;
    border-radius:8px !important;
    z-index:1700 !important;
  }
  body.pv-draft-normal #volume-toggle,
  body.pv-draft-normal #pv-settings-btn,
  body.pv-draft-normal #pd-admin-lock-btn{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;
    border-radius:9px !important;
    font-size:12px !important;
    line-height:1 !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(9,11,17,.72) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 6px 16px rgba(0,0,0,.26) !important;
    backdrop-filter:blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter:blur(8px) saturate(120%) !important;
  }
  body.pv-draft-normal #volume-toggle{
    position:fixed !important;
    top:4px !important;
    right:6px !important;
    left:auto !important;
    bottom:auto !important;
    z-index:1700 !important;
  }
  body.pv-draft-normal #pv-settings-btn{
    top:4px !important;
    right:36px !important;
    left:auto !important;
    bottom:auto !important;
    z-index:1700 !important;
  }
  body.pv-draft-normal #pd-admin-lock-floating{
    position:fixed !important;
    top:4px !important;
    right:66px !important;
    left:auto !important;
    z-index:1700 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
  }
  body.pv-draft-normal #pd-admin-lock-floating[style*="display: none"]{
    display:none !important;
  }
  body.pv-draft-normal #pd-admin-lock-state{
    display:none !important;
  }
  body.pv-draft-normal #pd-admin-lock-btn{
    position:static !important;
    color:#fff !important;
    transform:none !important;
    text-align:center !important;
  }

  /* Perfil: avatar/marco pegado a la info, grupo centrado y fallback de avatar sin círculo/texto gigante. */
  body.pv-draft-normal .player-header{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    padding:3px 6px !important;
    min-height:34px !important;
    height:34px !important;
  }
  body.pv-draft-normal .avatar-wrap{
    --size:25px !important;
    width:25px !important;
    height:25px !important;
    flex:0 0 25px !important;
    font-size:0 !important;
    background:rgba(8,10,16,.62) !important;
  }
  body.pv-draft-normal .avatar-wrap .avatar,
  body.pv-draft-normal .avatar-wrap .avatar-img{
    font-size:0 !important;
  }
  body.pv-draft-normal .avatar-wrap:not(:has(img.avatar-img)):not(:has(img.avatar)){
    opacity:.55 !important;
  }
  body.pv-draft-normal .player-meta{
    flex:0 1 112px !important;
    width:auto !important;
    max-width:112px !important;
    min-width:0 !important;
    align-items:center !important;
    text-align:center !important;
    gap:1px !important;
  }
  body.pv-draft-normal .rank-logo{
    width:13px !important;
    height:13px !important;
    flex:0 0 13px !important;
    border-radius:4px !important;
  }
  body.pv-draft-normal .rank-badge{
    max-width:92px !important;
    min-width:0 !important;
    height:13px !important;
    padding:1px 4px !important;
    font-size:6.8px !important;
    line-height:1 !important;
    justify-content:center !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Casillas: signos, arma, top badge y animaciones del pick igual vivas que PC. */
  body.pv-draft-normal .slot.pv-pick-target:not(.finalized):not(.picking-active)::after{
    font-size:24px !important;
    opacity:.78 !important;
    transform:translate(-50%,-50%) scale(.95) !important;
  }
  body.pv-draft-normal .slot .final-pick-img,
  body.pv-draft-normal .final-pick-img,
  body.pv-draft-normal.pv-trailer-open .final-pick-img,
  body.pv-draft-normal.pv-trailer-hard-perf .final-pick-img,
  body.pv-draft-normal.pv-slot-preview-open .final-pick-img,
  body.pv-draft-normal.pv-css-paused .final-pick-img,
  body.pv-draft-normal.pv-perf-video .final-pick-img,
  body.pv-draft-normal.pv-media-hard-lock .final-pick-img{
    animation:hoverUp 3s ease-in-out infinite !important;
    animation-play-state:running !important;
    will-change:transform !important;
  }
  body.pv-draft-normal .slot .final-pick-weapon-img,
  body.pv-draft-normal .final-pick-weapon-img{
    width:16px !important;
    height:16px !important;
    top:2px !important;
    right:2px !important;
    padding:1px !important;
    border-radius:5px !important;
  }
  body.pv-draft-normal .final-pick-top-badge{
    left:50% !important;
    right:auto !important;
    bottom:14px !important;
    transform:translateX(-50%) !important;
    height:12px !important;
    min-height:12px !important;
    padding:1px 4px !important;
    gap:2px !important;
    font-size:6.8px !important;
    line-height:1 !important;
    border-radius:6px !important;
    max-width:calc(100% - 8px) !important;
  }
  body.pv-draft-normal .final-pick-top-star{
    width:7px !important;
    height:7px !important;
    flex:0 0 7px !important;
  }

  /* Videos de entrada más cerca desde el inicio, no solo al congelar. */
  body.pv-draft-normal .slot-preview-layer{
    overflow:hidden !important;
    border-radius:inherit !important;
  }
  body.pv-draft-normal .slot-preview-video,
  body.pv-draft-normal video.slot-preview-video{
    object-fit:cover !important;
    transform:scale(1.12) !important;
    transform-origin:center center !important;
  }
  body.pv-draft-normal .slot-preview-poster{
    transform:scale(1.12) !important;
    transform-origin:center center !important;
  }

  /* Reveal elemental: que el símbolo salga completo y centrado. */
  body.pv-draft-normal .pv-pick-reveal-overlay{
    overflow:visible !important;
    z-index:18 !important;
  }
  body.pv-draft-normal .pv-pick-reveal-sigil-wrap{
    overflow:visible !important;
    inset:0 !important;
  }
  body.pv-draft-normal .pv-pick-reveal-sigil{
    width:20px !important;
    height:20px !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    overflow:visible !important;
    filter:drop-shadow(0 0 8px rgba(var(--elrgb,255,255,255),.54)) !important;
  }

  /* Timers con emote en móvil; el icono CSS viejo se veía pequeño/cortado. */
  body.pv-draft-normal .timer{
    min-width:54px !important;
    height:20px !important;
    gap:4px !important;
    font-size:10.6px !important;
  }
  body.pv-draft-normal .timer::before{
    content:"⏱️" !important;
    width:auto !important;
    height:auto !important;
    flex:0 0 auto !important;
    border:0 !important;
    border-radius:0 !important;
    background:none !important;
    box-shadow:none !important;
    font-size:10px !important;
    line-height:1 !important;
  }

  /* Extra bans y bans normales: extra compacto, normales más legibles, nada empuja ni corta. */
  body.pv-draft-normal #extra-bans,
  body.pv-draft-normal #bans-container{
    overflow:visible !important;
    flex:0 0 auto !important;
  }
  body.pv-draft-normal #extra-bans{
    max-height:48px !important;
    margin:0 0 2px !important;
  }
  body.pv-draft-normal #bans-container{
    margin:1px 0 2px !important;
  }
  body.pv-draft-normal .extra-heading{
    position:relative !important;
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) 42px !important;
    align-items:center !important;
    gap:2px !important;
    width:100% !important;
    min-height:14px !important;
    margin:0 0 1px !important;
  }
  body.pv-draft-normal .extra-heading h3{
    grid-column:2 !important;
    font-size:7.4px !important;
    line-height:1 !important;
    letter-spacing:.10em !important;
    margin:0 !important;
    text-align:center !important;
  }
  body.pv-draft-normal .extra-chip.extra-remaining,
  body.pv-draft-normal #extra-count-p1.extra-chip,
  body.pv-draft-normal #extra-count-p2.extra-chip{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    margin:0 !important;
    width:42px !important;
    max-width:42px !important;
    height:13px !important;
    min-height:13px !important;
    padding:0 2px !important;
    gap:2px !important;
    font-size:7px !important;
    line-height:1 !important;
    border-radius:999px !important;
    justify-content:center !important;
    overflow:hidden !important;
    text-transform:uppercase !important;
  }
  body.pv-draft-normal #extra-count-p1{ grid-column:1 !important; justify-self:start !important; }
  body.pv-draft-normal #extra-count-p2{ grid-column:3 !important; justify-self:end !important; }
  body.pv-draft-normal .extra-chip.extra-remaining::before,
  body.pv-draft-normal .extra-chip.extra-remaining::after{
    content:"" !important;
    display:none !important;
  }
  body.pv-draft-normal .extra-chip-tag{
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    font-size:6.4px !important;
    line-height:1 !important;
  }
  body.pv-draft-normal .extra-chip-num{
    font-size:8px !important;
    line-height:1 !important;
  }
  body.pv-draft-normal .extra-chip-text{
    display:none !important;
  }
  body.pv-draft-normal #extra-bans .bans-line,
  body.pv-draft-normal #extra-bans.extra-only-p1 .bans-line,
  body.pv-draft-normal #extra-bans.extra-only-p2 .bans-line{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:4px !important;
    align-items:start !important;
    padding:0 !important;
    margin:0 !important;
  }
  body.pv-draft-normal #extra-bans.extra-only-p1 #extra-bans-p2,
  body.pv-draft-normal #extra-bans.extra-only-p2 #extra-bans-p1{
    display:flex !important;
    visibility:hidden !important;
  }
  body.pv-draft-normal #extra-bans .bans-group{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:2px !important;
    min-height:22px !important;
    max-height:22px !important;
    overflow:hidden !important;
  }
  body.pv-draft-normal #extra-bans .banned-char-img,
  body.pv-draft-normal #extra-bans-p1 .banned-char-img,
  body.pv-draft-normal #extra-bans-p2 .banned-char-img{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    max-width:22px !important;
    aspect-ratio:1 / 1 !important;
    border-radius:6px !important;
    object-fit:cover !important;
    transform:none !important;
  }
  body.pv-draft-normal #bans-container .bans-group{
    min-height:33px !important;
    max-height:34px !important;
    gap:3px !important;
    overflow:hidden !important;
  }
  body.pv-draft-normal #bans-container .banned-char-img,
  body.pv-draft-normal #bans-p1-container .banned-char-img,
  body.pv-draft-normal #bans-p2-container .banned-char-img{
    width:31px !important;
    height:31px !important;
    min-width:31px !important;
    max-width:31px !important;
    border-radius:7px !important;
    object-fit:cover !important;
  }

  /* X de personajes que faltan: esquina izquierda/derecha como PC, nunca al centro. */
  body.pv-draft-normal .character .grid-badge-x{
    width:18px !important;
    height:18px !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    font-size:18px !important;
    line-height:18px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#ff3333 !important;
    text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 8px rgba(255,35,35,.55) !important;
    transform:none !important;
    z-index:40 !important;
  }
  body.pv-draft-normal .character .grid-badge-x[style*="left"]{
    top:-3px !important;
    left:-2px !important;
    right:auto !important;
  }
  body.pv-draft-normal .character .grid-badge-x[style*="right"]{
    top:-3px !important;
    right:-2px !important;
    left:auto !important;
  }

  /* TOP/THE BEST: lateral como PC y visible por encima de slots/trailer. */
  body.pv-draft-normal .pv-ranklane{
    z-index:1900 !important;
    overflow:visible !important;
    contain:none !important;
    pointer-events:none !important;
  }
  body.pv-draft-normal .pv-ranklane-cell{
    align-items:flex-start !important;
    overflow:visible !important;
  }
  body.pv-draft-normal .pv-ranklane--team1 .pv-ranklane-cell{
    justify-content:flex-start !important;
  }
  body.pv-draft-normal .pv-ranklane--team2 .pv-ranklane-cell{
    justify-content:flex-end !important;
  }
  body.pv-draft-normal .pv-rankbanner{
    max-width:min(154px, 92%) !important;
    padding:3px 6px !important;
    border-radius:9px !important;
    opacity:1;
  }
  body.pv-draft-normal .pv-rankbanner--best{
    max-width:min(176px, 96%) !important;
    padding:3px 6px !important;
  }
  body.pv-draft-normal .pv-best-badge{
    font-size:9px !important;
    line-height:1 !important;
    padding:2px 5px !important;
    max-width:142px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body.pv-draft-normal .pv-rankbanner-line .pv-rankbanner-top,
  body.pv-draft-normal .pv-rankbanner-top{
    font-size:10px !important;
  }
  body.pv-draft-normal .pv-rankbanner-line .pv-rankbanner-name{
    font-size:8px !important;
  }
  body.pv-draft-normal .pv-rank-elicon,
  body.pv-draft-normal .pv-rankbanner--best .pv-rank-elicon{
    width:11px !important;
    height:11px !important;
    flex:0 0 11px !important;
  }
}

@media (max-width: 760px) and (max-height: 430px) and (orientation: landscape){
  body.pv-draft-normal .player-meta{
    max-width:96px !important;
    flex-basis:96px !important;
  }
  body.pv-draft-normal .rank-badge{
    max-width:78px !important;
    font-size:6.4px !important;
  }
  body.pv-draft-normal #extra-bans .banned-char-img,
  body.pv-draft-normal #extra-bans-p1 .banned-char-img,
  body.pv-draft-normal #extra-bans-p2 .banned-char-img{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
  }
  body.pv-draft-normal #bans-container .banned-char-img,
  body.pv-draft-normal #bans-p1-container .banned-char-img,
  body.pv-draft-normal #bans-p2-container .banned-char-img{
    width:29px !important;
    height:29px !important;
    min-width:29px !important;
  }
  body.pv-draft-normal .pv-rankbanner--best{
    max-width:160px !important;
  }
  body.pv-draft-normal .pv-best-badge{
    max-width:128px !important;
    font-size:8.4px !important;
  }
}

@media (max-width: 980px) and (max-height: 560px) and (orientation: landscape){
  body.pv-draft-normal .frame-img,
  body.pv-draft-normal .frame-css,
  body.pv-draft-normal .avatar-wrap[data-frame]::before,
  body.pv-draft-normal .avatar-wrap[data-frame]::after,
  body.pv-draft-normal .avatar-wrap[data-frame-file] > .frame-img,
  body.pv-draft-normal.pv-trailer-open .frame-img,
  body.pv-draft-normal.pv-trailer-hard-perf .frame-img,
  body.pv-draft-normal.pv-slot-preview-open .frame-img,
  body.pv-draft-normal.pv-css-paused .frame-img,
  body.pv-draft-normal.pv-perf-video .frame-img,
  body.pv-draft-normal.pv-trailer-open .frame-css,
  body.pv-draft-normal.pv-trailer-hard-perf .frame-css,
  body.pv-draft-normal.pv-slot-preview-open .frame-css,
  body.pv-draft-normal.pv-css-paused .frame-css,
  body.pv-draft-normal.pv-perf-video .frame-css{
    animation-play-state:running !important;
    will-change:transform, opacity, filter !important;
  }
}

/* MOBILE DRAFT correcciones puntuales sin tocar PC Activado por clase JS robusta para iPhone/DevTools móvil. */
@media (max-width: 640px) and (orientation: portrait){
  html:has(body.pv-draft-normal.pv-mobile-portrait-forced),
  body.pv-draft-normal.pv-mobile-portrait-forced{
    width:100% !important;
    height:100% !important;
    min-height:100svh !important;
    overflow:hidden !important;
    background:#050711 !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced #ui-root{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    filter:none !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-mobile-rotate-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483647 !important;
    display:grid !important;
    place-items:center !important;
    padding:22px !important;
    color:#f8fbff !important;
    background:
      radial-gradient(90% 56% at 50% 16%, rgba(112,232,255,.22), transparent 62%),
      radial-gradient(78% 58% at 58% 86%, rgba(176,96,255,.20), transparent 64%),
      linear-gradient(180deg, #050714 0%, #080b19 55%, #03040b 100%) !important;
    overflow:hidden !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-mobile-rotate-overlay::before{
    content:"" !important;
    position:absolute !important;
    width:88vmin !important;
    height:88vmin !important;
    left:50% !important;
    top:20% !important;
    border-radius:50% !important;
    transform:translate(-50%,-50%) !important;
    background:conic-gradient(from 0deg, transparent, rgba(121,240,255,.34), transparent, rgba(255,117,242,.28), transparent) !important;
    filter:blur(18px) !important;
    animation:pvRotateOrbit 5.4s linear infinite !important;
    pointer-events:none !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-mobile-rotate-overlay::after{
    content:"" !important;
    position:absolute !important;
    width:150vmax !important;
    height:150vmax !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.07) !important;
    box-shadow:0 0 0 26px rgba(255,255,255,.012) inset, 0 0 82px rgba(121,240,255,.09) inset !important;
    animation:pvRotateAura 4.2s ease-in-out infinite !important;
    pointer-events:none !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-card{
    position:relative !important;
    z-index:1 !important;
    width:min(88vw, 370px) !important;
    display:grid !important;
    justify-items:center !important;
    gap:10px !important;
    text-align:center !important;
    padding:26px 21px 23px !important;
    border-radius:28px !important;
    background:linear-gradient(180deg, rgba(18,24,44,.88), rgba(7,9,19,.78)) !important;
    border:1px solid rgba(166,224,255,.22) !important;
    box-shadow:0 30px 78px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.08), 0 0 46px rgba(121,240,255,.13) !important;
    backdrop-filter:blur(16px) saturate(135%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(135%) !important;
    transform:none !important;
    animation:pvRotateCardIn .58s cubic-bezier(.16,1,.3,1) both !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-orbit{
    position:relative !important;
    width:108px !important;
    height:108px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    margin-bottom:2px !important;
    background:conic-gradient(from 0deg, rgba(121,240,255,0), rgba(121,240,255,.80), rgba(255,117,242,.70), rgba(255,226,117,.62), rgba(121,240,255,0)) !important;
    box-shadow:0 0 36px rgba(121,240,255,.23), inset 0 0 18px rgba(255,255,255,.06) !important;
    animation:pvRotateOrbit 2.4s linear infinite !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-orbit::before{
    content:"" !important;
    position:absolute !important;
    width:82px !important;
    height:82px !important;
    border-radius:50% !important;
    background:#0a0d18 !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-phone{
    position:relative !important;
    z-index:1 !important;
    width:35px !important;
    height:60px !important;
    border-radius:10px !important;
    border:3px solid #eef8ff !important;
    background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)) !important;
    box-shadow:0 0 22px rgba(121,240,255,.30), inset 0 0 0 1px rgba(255,255,255,.12) !important;
    animation:pvPhoneTurn 2.15s cubic-bezier(.58,0,.26,1) infinite !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-phone span{
    position:absolute !important;
    left:50% !important;
    bottom:5px !important;
    width:8px !important;
    height:8px !important;
    transform:translateX(-50%) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.88) !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-kicker{
    margin:0 !important;
    font-size:10px !important;
    line-height:1 !important;
    letter-spacing:.18em !important;
    text-transform:uppercase !important;
    color:#8cf3ff !important;
    font-weight:1000 !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-card h2{
    margin:0 !important;
    font-size:28px !important;
    line-height:1.02 !important;
    letter-spacing:.01em !important;
    font-weight:1000 !important;
    background:linear-gradient(90deg,#79f0ff,#ff75f2,#ffe275) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-card p:last-child{
    margin:0 !important;
    max-width:305px !important;
    font-size:13.5px !important;
    line-height:1.38 !important;
    color:rgba(242,248,255,.89) !important;
  }
}

@media (max-width: 980px) and (max-height: 580px) and (orientation: landscape){
  /* Pregunta visible y centrada: se corrige el transform que la sacaba del slot. */
  body.pv-draft-normal.pv-mobile-landscape-forced .slot.pv-pick-target:not(.finalized):not(.picking-active)::after{
    content:"?" !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
    font-size:30px !important;
    line-height:1 !important;
    opacity:.84 !important;
    z-index:6 !important;
  }

  /* Extra bans centrados y mismo tamaño visual que bans normales. */
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans{
    max-height:none !important;
    margin:0 0 2px !important;
    overflow:visible !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-heading,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .extra-heading{
    position:relative !important;
    display:grid !important;
    grid-template-columns:46px minmax(0,1fr) 46px !important;
    align-items:center !important;
    justify-items:center !important;
    width:100% !important;
    min-height:15px !important;
    margin:0 0 2px !important;
    padding:0 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-heading h3,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .extra-heading h3{
    grid-column:2 !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    font-size:7.8px !important;
    line-height:1 !important;
    letter-spacing:.13em !important;
    transform:none !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-count-p1.extra-chip,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-count-p2.extra-chip,
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip.extra-remaining{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    display:inline-flex !important;
    width:44px !important;
    max-width:44px !important;
    min-width:0 !important;
    height:13px !important;
    min-height:13px !important;
    padding:0 3px !important;
    margin:0 !important;
    gap:2px !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    font-size:7px !important;
    line-height:1 !important;
    border-radius:999px !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-count-p1.extra-chip{ grid-column:1 !important; justify-self:start !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-count-p2.extra-chip{ grid-column:3 !important; justify-self:end !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip::after,
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip.extra-remaining::before,
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip.extra-remaining::after{
    content:"" !important;
    display:none !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip-text{ display:none !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip-tag{ font-size:6.3px !important; line-height:1 !important; padding:0 !important; background:transparent !important; border:0 !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip-num{ font-size:8px !important; line-height:1 !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .bans-line{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:4px !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .bans-group,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-container .bans-group{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    min-height:36px !important;
    max-height:36px !important;
    overflow:hidden !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans-p1 .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans-p2 .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-container .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-p1-container .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-p2-container .banned-char-img{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    border-radius:8px !important;
    object-fit:cover !important;
    transform:none !important;
  }

  /* Iconos de slot: arma más grande, elemento un poco más grande, TOP pegado a la izquierda. */
  body.pv-draft-normal.pv-mobile-landscape-forced .slot .final-pick-weapon-img,
  body.pv-draft-normal.pv-mobile-landscape-forced .final-pick-weapon-img{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;
    top:3px !important;
    right:3px !important;
    padding:1px !important;
    border-radius:7px !important;
    z-index:32 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-pick-reveal-sigil{
    width:26px !important;
    height:26px !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    transform:none !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .final-pick-top-badge{
    left:4px !important;
    right:auto !important;
    bottom:14px !important;
    transform:none !important;
    height:12px !important;
    min-height:12px !important;
    max-width:calc(100% - 8px) !important;
    padding:1px 4px !important;
    gap:2px !important;
    font-size:6.8px !important;
    line-height:1 !important;
    border-radius:6px !important;
    justify-content:flex-start !important;
    z-index:34 !important;
  }

  /* Rebote del pick igual que PC: vuelve a incluir el fade inicial. */
  body.pv-draft-normal.pv-mobile-landscape-forced .slot .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-trailer-open .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-trailer-hard-perf .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-slot-preview-open .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-css-paused .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-perf-video .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-media-hard-lock .final-pick-img{
    opacity:1 !important;
    animation:pickFade .35s ease-out forwards, hoverUp 3s ease-in-out infinite .35s !important;
    animation-play-state:running !important;
    will-change:transform !important;
  }

  /* Videos de entrada realmente zoom desde que reproducen; el poster hereda el mismo encuadre. */
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-layer{
    overflow:hidden !important;
    border-radius:inherit !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-video,
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-video.active,
  body.pv-draft-normal.pv-mobile-landscape-forced video.slot-preview-video,
  body.pv-draft-normal.pv-mobile-landscape-forced .slot video.slot-preview-video,
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-poster{
    object-fit:cover !important;
    transform:translateZ(0) scale(1.22) !important;
    transform-origin:center center !important;
    will-change:opacity !important;
  }

  /* THE BEST / TOP: carril siempre encima, pegado al lado del slot y no tapado por video. */
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-ranklane{
    z-index:2147482500 !important;
    overflow:visible !important;
    contain:none !important;
    pointer-events:none !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-ranklane-cell{
    overflow:visible !important;
    align-items:flex-start !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-ranklane--team1 .pv-ranklane-cell{ justify-content:flex-start !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-ranklane--team2 .pv-ranklane-cell{ justify-content:flex-end !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-rankbanner{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    max-width:min(178px, 98%) !important;
    padding:3px 6px !important;
    border-radius:9px !important;
    transform-origin:center center !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-rankbanner--best{ max-width:min(190px, 100%) !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-best-badge{
    font-size:9px !important;
    line-height:1 !important;
    padding:2px 5px !important;
    max-width:150px !important;
  }
}

@media (max-width: 760px) and (max-height: 430px) and (orientation: landscape){
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans-p1 .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans-p2 .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-container .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-p1-container .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-p2-container .banned-char-img{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    max-width:32px !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .slot .final-pick-weapon-img,
  body.pv-draft-normal.pv-mobile-landscape-forced .final-pick-weapon-img{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
  }
}


/* MOBILE DRAFT correcciones quirúrgicas Solo móvil por clase robusta / tamaños de teléfono. PC queda intacto. */
@media (max-width: 640px) and (orientation: portrait){
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-mobile-rotate-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483647 !important;
    display:grid !important;
    place-items:center !important;
    padding:22px !important;
    color:#f8fbff !important;
    overflow:hidden !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    background:
      radial-gradient(82% 48% at 50% 12%, rgba(122,236,255,.24), transparent 64%),
      radial-gradient(74% 56% at 50% 92%, rgba(177,96,255,.18), transparent 66%),
      linear-gradient(180deg, #050714 0%, #090c1d 54%, #03040b 100%) !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced #ui-root{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-card{
    width:min(88vw, 370px) !important;
    padding:26px 22px 24px !important;
    border-radius:28px !important;
    display:grid !important;
    justify-items:center !important;
    gap:10px !important;
    text-align:center !important;
    background:linear-gradient(180deg, rgba(18,24,44,.90), rgba(7,9,19,.80)) !important;
    border:1px solid rgba(166,224,255,.22) !important;
    box-shadow:0 30px 78px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.08), 0 0 46px rgba(121,240,255,.13) !important;
    backdrop-filter:blur(16px) saturate(135%) !important;
    -webkit-backdrop-filter:blur(16px) saturate(135%) !important;
    animation:pvRotateCardIn .58s cubic-bezier(.16,1,.3,1) both !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-orbit{
    position:relative !important;
    width:112px !important;
    height:112px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    background:radial-gradient(circle at 50% 50%, rgba(10,13,24,.96) 0 38px, transparent 39px), conic-gradient(from 225deg, rgba(121,240,255,0), rgba(121,240,255,.72), rgba(255,117,242,.62), rgba(255,226,117,.58), rgba(121,240,255,0)) !important;
    box-shadow:0 0 36px rgba(121,240,255,.22), inset 0 0 18px rgba(255,255,255,.06) !important;
    animation:none !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-orbit::before{ display:none !important; }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-phone{
    position:relative !important;
    z-index:1 !important;
    width:36px !important;
    height:62px !important;
    border-radius:11px !important;
    border:3px solid #eef8ff !important;
    background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)) !important;
    box-shadow:0 0 22px rgba(121,240,255,.30), inset 0 0 0 1px rgba(255,255,255,.12) !important;
    transform-origin:center center !important;
    animation:pvPhonePortraitLandscape 2.65s cubic-bezier(.55,0,.25,1) infinite !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-phone span{
    position:absolute !important;
    left:50% !important;
    bottom:5px !important;
    width:8px !important;
    height:8px !important;
    transform:translateX(-50%) !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.88) !important;
  }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-card h2{ font-size:0 !important; }
  body.pv-draft-normal.pv-mobile-portrait-forced .pv-rotate-card h2::before{
    content:"Rota tu dispositivo";
    font-size:27px !important;
    line-height:1.02 !important;
    letter-spacing:.01em !important;
    font-weight:1000 !important;
    background:linear-gradient(90deg,#79f0ff,#ff75f2,#ffe275) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
  }
  @keyframes pvPhonePortraitLandscape{
    0%,18%{ transform:rotate(0deg) scale(1); }
    42%,66%{ transform:rotate(90deg) scale(1.03); }
    90%,100%{ transform:rotate(0deg) scale(1); }
  }
}

@media (max-width: 980px) and (max-height: 580px) and (orientation: landscape){
  body.pv-draft-normal.pv-mobile-landscape-forced{
    --pv-mobile-topbar:23px !important;
    --pv-mobile-center:min(282px, 34.5vw) !important;
  }

  /* Topbar móvil: logo, ABYSS DRAFT, a la izquierda; botones compactos a la derecha. */
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-corner-logo{
    top:3px !important;
    left:6px !important;
    width:19px !important;
    height:19px !important;
    z-index:1800 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced header{
    position:fixed !important;
    left:30px !important;
    right:auto !important;
    top:2px !important;
    width:auto !important;
    max-width:260px !important;
    height:21px !important;
    min-height:21px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
    z-index:1750 !important;
    pointer-events:auto !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .site-subtitle{
    order:1 !important;
    margin:0 !important;
    font-size:8px !important;
    line-height:1 !important;
    letter-spacing:.12em !important;
    white-space:nowrap !important;
    color:rgba(220,244,255,.92) !important;
    text-shadow:0 1px 7px rgba(0,0,0,.75) !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .site-title{
    order:2 !important;
    margin:0 !important;
    font-size:15px !important;
    line-height:1 !important;
    letter-spacing:.04em !important;
    white-space:nowrap !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .site-title-link{ font-size:inherit !important; line-height:1 !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced #draft-container{
    padding-top:var(--pv-mobile-topbar) !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #volume-toggle,
  body.pv-draft-normal.pv-mobile-landscape-forced #pv-settings-btn,
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-fullscreen-btn,
  body.pv-draft-normal.pv-mobile-landscape-forced #pd-admin-lock-btn{
    position:fixed !important;
    top:3px !important;
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    min-height:22px !important;
    padding:0 !important;
    border-radius:8px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:12px !important;
    line-height:1 !important;
    z-index:1800 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #volume-toggle{ right:5px !important; left:auto !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced #pv-settings-btn{ right:32px !important; left:auto !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-fullscreen-btn{ right:59px !important; left:auto !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced #pd-admin-lock-floating{
    position:fixed !important;
    top:3px !important;
    right:86px !important;
    left:auto !important;
    z-index:1801 !important;
    gap:0 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #pd-admin-lock-state{ display:none !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced #pd-admin-lock-btn{ position:relative !important; top:auto !important; right:auto !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-fullscreen-icon{ width:11px !important; height:11px !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced #volume-control,
  body.pv-draft-normal.pv-mobile-landscape-forced #pv-settings-menu{
    top:29px !important;
    right:5px !important;
  }

  /* Extra bans: como PC, título siempre al centro; chips no empujan y no dejan P2/J1 viejo al agotarse. */
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans{ margin:0 0 1px !important; overflow:visible !important; max-height:none !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-heading,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .extra-heading{
    position:relative !important;
    display:block !important;
    width:100% !important;
    min-height:13px !important;
    margin:0 0 1px !important;
    padding:0 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-heading h3,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .extra-heading h3{
    position:relative !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    font-size:7.4px !important;
    line-height:13px !important;
    letter-spacing:.12em !important;
    transform:none !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-count-p1.extra-chip,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-count-p2.extra-chip{
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:auto !important;
    max-width:42px !important;
    min-width:0 !important;
    height:12px !important;
    min-height:12px !important;
    padding:0 4px !important;
    margin:0 !important;
    gap:2px !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    font-size:6.7px !important;
    line-height:1 !important;
    border-radius:999px !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-count-p1.extra-chip{ left:0 !important; right:auto !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-count-p2.extra-chip{ right:0 !important; left:auto !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip[data-remaining="0"]{ display:none !important; visibility:hidden !important; opacity:0 !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip::after,
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip.extra-remaining::before,
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip.extra-remaining::after{ content:"" !important; display:none !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip-text{ display:none !important; }

  /* Bans y extra bans con mismo tamaño móvil, sin cortar el primer ban ni mezclar lados. */
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .bans-line,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-container .bans-line{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:4px !important;
    align-items:center !important;
    padding:0 2px !important;
    margin:0 !important;
    overflow:visible !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .bans-group,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-container .bans-group{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    min-height:28px !important;
    max-height:29px !important;
    overflow:visible !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans-p1 .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans-p2 .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-container .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-p1-container .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-p2-container .banned-char-img{
    width:26px !important;
    height:26px !important;
    min-width:26px !important;
    max-width:26px !important;
    border-radius:7px !important;
    object-fit:cover !important;
    transform:none !important;
  }

  /* Confirmar pick/ban: compacto como PC, no barra de lado a lado. */
  body.pv-draft-normal.pv-mobile-landscape-forced #confirm-pick-btn{
    width:fit-content !important;
    min-width:0 !important;
    max-width:max-content !important;
    align-self:center !important;
    justify-self:center !important;
    display:inline-flex;
    margin:1px auto 3px !important;
    padding:4px 12px !important;
    white-space:nowrap !important;
  }

  /* Picks finales vuelven a img/picks-; aquí se adaptan a toda la casilla móvil. */
  body.pv-draft-normal.pv-mobile-landscape-forced .slot .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-trailer-open .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-trailer-hard-perf .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-slot-preview-open .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-css-paused .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-perf-video .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-media-hard-lock .final-pick-img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    padding:0 !important;
    opacity:1 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .slot .final-pick-weapon-img,
  body.pv-draft-normal.pv-mobile-landscape-forced .final-pick-weapon-img{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;
    top:2px !important;
    right:2px !important;
    z-index:36 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .final-pick-top-badge{
    left:2px !important;
    bottom:16px !important;
    transform:translateY(-1px) !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-pick-reveal-sigil{
    width:27px !important;
    height:27px !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
  }

  /* Video de entrada: mismo zoom mientras reproduce y cuando queda congelado, sin zoom extra al. */
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-layer{ overflow:hidden !important; border-radius:inherit !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-video,
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-video.active,
  body.pv-draft-normal.pv-mobile-landscape-forced video.slot-preview-video,
  body.pv-draft-normal.pv-mobile-landscape-forced .slot video.slot-preview-video,
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-poster,
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-poster.active,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-slot-preview-open .slot-preview-video,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-slot-preview-open .slot-preview-poster{
    object-fit:cover !important;
    transform:translateZ(0) scale(1.22) !important;
    transform-origin:center center !important;
    will-change:opacity !important;
  }

  /* THE BEST / TOP móvil: overlay directo y carril visible, sin irse a otra parte. */
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-rank-direct{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    max-width:min(196px, 42vw) !important;
    padding:3px 7px !important;
    border-radius:9px !important;
    pointer-events:none !important;
    z-index:2147483400 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-rank-direct .pv-best-badge{
    font-size:9px !important;
    line-height:1 !important;
    padding:2px 5px !important;
    max-width:158px !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-rank-direct .pv-rankbanner-top{ font-size:10px !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-rank-direct .pv-rankbanner-name{ font-size:8px !important; }
}

@media (max-width: 760px) and (max-height: 430px) and (orientation: landscape){
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans-p1 .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans-p2 .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-container .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-p1-container .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-p2-container .banned-char-img{
    width:25px !important;
    height:25px !important;
    min-width:25px !important;
    max-width:25px !important;
  }
}


/* MOBILE DRAFT correcciones quirúrgicas desde sin mover PC. */
@media (max-width: 980px) and (max-height: 580px) and (orientation: landscape){
  /* Topbar: solo color y tamaño del botón; no se mueven zonas de jugadores. */
  body.pv-draft-normal.pv-mobile-landscape-forced .site-subtitle{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    opacity:1 !important;
    text-shadow:0 1px 8px rgba(0,0,0,.86), 0 0 10px rgba(255,255,255,.16) !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-fullscreen-btn{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    border-radius:7px !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-fullscreen-icon{
    width:10px !important;
    height:10px !important;
  }

  /* Subir SOLO el panel central/grid. Las columnas de jugadores quedan como en. */
  body.pv-draft-normal.pv-mobile-landscape-forced #draft-info{
    height:calc(100% + 20px) !important;
    transform:translateY(-20px) !important;
  }

  /* EXTRA BANS: título centrado real; chips laterales no empujan el texto. */
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .extra-heading,
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-heading{
    position:relative !important;
    display:block !important;
    width:100% !important;
    min-height:14px !important;
    height:14px !important;
    margin:0 0 2px !important;
    padding:0 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .extra-heading h3,
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-heading h3{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    top:50% !important;
    width:max-content !important;
    max-width:68% !important;
    margin:0 !important;
    padding:0 !important;
    transform:translate(-50%, -50%) !important;
    text-align:center !important;
    white-space:nowrap !important;
    font-size:7.8px !important;
    line-height:1 !important;
    letter-spacing:.12em !important;
    pointer-events:none !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-count-p1.extra-chip,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-count-p2.extra-chip,
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip.extra-remaining{
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:auto !important;
    max-width:42px !important;
    height:12px !important;
    min-height:12px !important;
    padding:0 4px !important;
    margin:0 !important;
    gap:2px !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    font-size:6.7px !important;
    line-height:1 !important;
    border-radius:999px !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-count-p1.extra-chip{ left:0 !important; right:auto !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-count-p2.extra-chip{ right:0 !important; left:auto !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip[data-remaining="0"]{ display:none !important; visibility:hidden !important; opacity:0 !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip::after,
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip.extra-remaining::before,
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip.extra-remaining::after{ content:"" !important; display:none !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .extra-chip-text{ display:none !important; }

  /* Bans un punto más grandes que en iPhone, sin volver al tamaño invasivo. */
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .bans-group,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-container .bans-group{
    min-height:30px !important;
    max-height:31px !important;
    gap:3px !important;
    overflow:visible !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans-p1 .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans-p2 .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-container .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-p1-container .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-p2-container .banned-char-img{
    width:29px !important;
    height:29px !important;
    min-width:29px !important;
    max-width:29px !important;
    border-radius:7px !important;
    object-fit:cover !important;
  }

  /* Entrada del pick escala base en móvil, sin zoom extra. */
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-layer{
    overflow:hidden !important;
    border-radius:inherit !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-layer > video.slot-preview-video,
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-layer > video.slot-preview-video.active,
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-layer.pv-mobile-entry-zoom > video.slot-preview-video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    transform:none !important;
    transform-origin:center center !important;
    will-change:opacity !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-layer > .slot-preview-poster,
  body.pv-draft-normal.pv-mobile-landscape-forced .slot-preview-layer > .pv-slot-preview-freeze{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    transform:translateZ(0) !important;
    transform-origin:center center !important;
    will-change:opacity !important;
  }

  /* Chibis finales: mantener chibi en móvil, sin estirarlos ni cortarlos horizontalmente. */
  body.pv-draft-normal.pv-mobile-landscape-forced .slot .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-trailer-open .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-trailer-hard-perf .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-slot-preview-open .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-css-paused .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-perf-video .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-media-hard-lock .final-pick-img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    padding:0 !important;
    opacity:1 !important;
    transform-origin:center center !important;
  }

  /* Check verde del grid: un poco más pequeño que. */
  body.pv-draft-normal.pv-mobile-landscape-forced .character.pv-picked-p1::after,
  body.pv-draft-normal.pv-mobile-landscape-forced .character.pv-picked-p2::after{
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    min-height:8px !important;
    font-size:6px !important;
    line-height:8px !important;
    border-width:1px !important;
    box-shadow:0 0 5px rgba(40,255,120,.28) !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .character.pv-picked-p1::after{ left:2px !important; }
  body.pv-draft-normal.pv-mobile-landscape-forced .character.pv-picked-p2::after{ right:2px !important; }
}

@media (max-width: 760px) and (max-height: 430px) and (orientation: landscape){
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans-p1 .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #extra-bans-p2 .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-container .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-p1-container .banned-char-img,
  body.pv-draft-normal.pv-mobile-landscape-forced #bans-p2-container .banned-char-img{
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    max-width:28px !important;
  }
}


/* MOBILE DRAFT rebote igual que PC Usa el mismo keyframe hoverUp del draft de escritorio: lento y suave. */
@media (max-width: 980px) and (max-height: 580px) and (orientation: landscape){
  body.pv-draft-normal.pv-mobile-landscape-forced .slot img.final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-trailer-open .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-trailer-hard-perf .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-slot-preview-open .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-css-paused .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-perf-video .final-pick-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-media-hard-lock .final-pick-img{
    animation:hoverUp 3s ease-in-out infinite !important;
    animation-play-state:running !important;
    transform-origin:center bottom !important;
    will-change:transform !important;
  }
}

/* MOBILE POLA chips de serie/fase en topbar y BANS SEGUROS compacto Solo afecta Modo Pola en teléfono horizontal. PC y Draft normal intactos. */
@media (max-width: 980px) and (max-height: 580px) and (orientation: landscape){
  /* El centro sube solo en Pola móvil para liberar más filas del grid de personajes. */
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #draft-info{
    height:calc(100% + 28px) !important;
    transform:translateY(-28px) !important;
  }

  /* BANS SEGUROS sigue en su sitio, pero deja de ocupar tanto alto visual. */
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced .secure-bans-wrap{
    padding:2px 4px 3px !important;
    border-radius:9px !important;
    min-height:0 !important;
  }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced .secure-bans-wrap > h4,
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced .secure-bans-wrap > h3,
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced .secure-bans-wrap .secure-bans-title,
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced .secure-bans-wrap .secure-title,
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced .secure-bans-wrap .bans-secure-title{
    margin:0 0 1px !important;
    padding:0 !important;
    font-size:7.4px !important;
    line-height:1 !important;
    letter-spacing:.11em !important;
    font-weight:950 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced .secure-bans-wrap .bans-group{
    min-height:25px !important;
    max-height:27px !important;
    gap:3px !important;
  }
}


/* MOBILE POLA colocación de fase/serie, permabans y siguiente draft Solo modo Pola en teléfono horizontal. No toca PC ni draft normal. */
@media (max-width: 980px) and (max-height: 580px) and (orientation: landscape){
  /* Permabans Pola móvil: más pequeños, limpios y con menos alto. */
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #permabans-bar.permabans-bar{
    margin:4px 0 3px !important;
    padding:2px 4px 4px !important;
    border-radius:12px !important;
    max-height:74px !important;
    overflow:hidden !important;
  }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #permabans-bar.permabans-bar h4{
    margin:0 0 2px !important;
    line-height:1 !important;
  }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #permabans-bar.permabans-bar h4::before{
    font-size:7.2px !important;
    line-height:1 !important;
    letter-spacing:.12em !important;
  }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #permabans-bar.permabans-bar > div{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:5px !important;
    padding:2px 2px 0 !important;
    overflow:hidden !important;
  }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #permabans-bar.permabans-bar .permaban-card{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    border-radius:10px !important;
    flex:0 0 42px !important;
  }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #permabans-bar.permabans-bar img,
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #permabans-bar img{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    border-radius:10px !important;
    object-fit:cover !important;
    animation:permaFloat 5.2s ease-in-out infinite !important;
  }

  /* SIGUIENTE DRAFT: dentro del grid central, al , bajo los bans/postdraft. */
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #draft-info > .pv-next-draft-btn{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    bottom:auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:fit-content !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:4px auto 2px !important;
    padding:5px 12px !important;
    border-radius:10px !important;
    font-size:8.4px !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
    z-index:8 !important;
  }

  /* Cuando empieza el siguiente draft, el panel de ID no puede quedarse visible en móvil. */
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced:not(.draft-finished) #postdraft-panel{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced.draft-finished #postdraft-panel{
    visibility:visible !important;
    pointer-events:auto !important;
  }
}

@media (max-width: 760px) and (max-height: 430px) and (orientation: landscape){
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #permabans-bar.permabans-bar .permaban-card,
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #permabans-bar.permabans-bar img,
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #permabans-bar img{
    width:39px !important;
    height:39px !important;
    min-width:39px !important;
    max-width:39px !important;
    flex-basis:39px !important;
  }
}


/* MOBILE POLA fase/serie fuera del centro, Next Draft no empuja Solo teléfono horizontal en modo Pola. PC intacto. */
@media (max-width: 980px) and (max-height: 580px) and (orientation: landscape){
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #pola-infobar.pv-pola-mobile-topbar{
    position:fixed !important;
    top:3px !important;
    right:112px !important;
    left:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:138px !important;
    height:20px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:3px !important;
    overflow:visible !important;
    pointer-events:none !important;
    z-index:1902 !important;
  }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #pola-infobar.pv-pola-mobile-topbar .chip{
    height:17px !important;
    min-height:17px !important;
    max-height:17px !important;
    padding:0 5px !important;
    margin:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    font-size:6.8px !important;
    line-height:17px !important;
    font-weight:950 !important;
    letter-spacing:.055em !important;
    white-space:nowrap !important;
    color:#f7fbff !important;
    background:rgba(8,12,25,.66) !important;
    border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter:blur(6px) saturate(130%) !important;
    -webkit-backdrop-filter:blur(6px) saturate(130%) !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    flex:0 1 auto !important;
  }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #pola-infobar.pv-pola-mobile-topbar .phase-chip{
    max-width:78px !important;
  }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #pola-infobar.pv-pola-mobile-topbar .series-chip,
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #pola-infobar.pv-pola-mobile-topbar #pv-series-indicator{
    max-width:56px !important;
    flex:0 0 auto !important;
  }

  /* Si JS oculta SIGUIENTE DRAFT, el CSS móvil no puede volverlo a ocupar como INICIANDO. */
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #draft-info > .pv-next-draft-btn[style*="display: none"]{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
    margin:0 !important;
    padding:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
  }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #draft-info > .pv-next-draft-btn:not([style*="display: none"]){
    display:inline-flex !important;
  }
}

@media (max-width: 760px) and (max-height: 430px) and (orientation: landscape){
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #pola-infobar.pv-pola-mobile-topbar{
    right:110px !important;
    max-width:128px !important;
  }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #pola-infobar.pv-pola-mobile-topbar .chip{
    height:16px !important;
    min-height:16px !important;
    line-height:16px !important;
    font-size:6.35px !important;
    padding:0 4px !important;
  }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #pola-infobar.pv-pola-mobile-topbar .phase-chip{ max-width:72px !important; }
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #pola-infobar.pv-pola-mobile-topbar .series-chip,
  body.pv-draft-normal.pv-mode-pola.pv-mobile-landscape-forced #pola-infobar.pv-pola-mobile-topbar #pv-series-indicator{ max-width:52px !important; }
}


/* MOBILE DRAFT EXPERIMENTAL — video de entrada en toda la zona jugador Solo teléfono horizontal. PC intacto. */
@media (max-width: 980px) and (max-height: 580px) and (orientation: landscape){
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open{
    isolation:isolate !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    border-radius:inherit !important;
    overflow:hidden !important;
    pointer-events:none !important;
    z-index:0 !important;
    background:rgba(0,0,0,.08) !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview-video,
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview > video.slot-preview-video,
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview > video.slot-preview-video.active{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:0 !important;
    transform:translateZ(0) scale(1.06) !important;
    transform-origin:center center !important;
    filter:saturate(1.08) contrast(1.04) brightness(.92) !important;
    transition:opacity .22s ease !important;
    z-index:0 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview-video.active,
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview > video.slot-preview-video.active{
    opacity:.64 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview-veil{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    pointer-events:none !important;
    background:
      radial-gradient(80% 62% at 50% 38%, rgba(255,255,255,.05), rgba(255,255,255,0) 62%),
      linear-gradient(180deg, rgba(4,6,14,.05), rgba(4,6,14,.38)) !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open .player-header,
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open .team-slots-container{
    position:relative !important;
    z-index:2 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open .slot{
    background-color:rgba(0,0,0,.18) !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open .slot.finalized{
    background-color:rgba(var(--elrgb,255,255,255),.20) !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open .slot::before{
    z-index:0 !important;
  }
}


/* MOBILE DRAFT EXPERIMENTAL — video jugador nítido sin salto entre reproducción/frizado Solo teléfono horizontal. Solo afecta al jugador con video de entrada activo. No toca títulos equipados ni PC. */
@media (max-width: 980px) and (max-height: 580px) and (orientation: landscape){
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview-video,
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview > video.slot-preview-video,
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview > video.slot-preview-video.active,
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview > video.slot-preview-video.pv-mobile-entry-frozen{
    transform:none !important;
    scale:1 !important;
    object-fit:cover !important;
    object-position:center center !important;
    image-rendering:auto !important;
    filter:brightness(1.06) contrast(1.10) saturate(1.14) !important;
    opacity:0 !important;
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview-video.active,
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview > video.slot-preview-video.active,
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview > video.slot-preview-video.pv-mobile-entry-frozen{
    opacity:1 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .pv-mobile-zone-preview-veil{
    background:linear-gradient(180deg, rgba(2,4,10,.02), rgba(2,4,10,.18)) !important;
  }

  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open{
    background:rgba(0,0,0,.10) !important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--side) 38%, transparent), 0 8px 20px rgba(0,0,0,.24) !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open::before{
    background:rgba(0,0,0,.06) !important;
    opacity:.55 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open .player-header{
    background:rgba(0,0,0,.18) !important;
    border-color:color-mix(in srgb, var(--side) 42%, rgba(255,255,255,.16)) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 4px 13px rgba(0,0,0,.20) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    filter:none !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open .rank-badge{
    background:rgba(0,0,0,.24) !important;
    color:#f4fbff !important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--side) 36%, transparent), 0 0 8px rgba(0,0,0,.16) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    filter:none !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open .rank-badge::before,
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open .rank-badge::after{
    opacity:0 !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open .slot{
    background-color:rgba(0,0,0,.12) !important;
    border-color:color-mix(in srgb, var(--side) 36%, rgba(255,255,255,.12)) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 3px 10px rgba(0,0,0,.18) !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open .slot.finalized{
    background-color:rgba(var(--elrgb,255,255,255),.13) !important;
  }
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section.pv-mobile-zone-preview-open .slot-name-bar{
    background:linear-gradient(90deg, rgba(0,0,0,.20), rgba(0,0,0,.34), rgba(0,0,0,.20)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 -2px 8px rgba(0,0,0,.18) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    filter:none !important;
  }
}


/* Normal: escalado PC/tablet desde la maqueta 1980x1080 Motivo: el draft usaba paneles/slots fijos de PC; al bajar resolución se recortaba en vez de reescalar. Estos cortes solo reducen el UI completo en landscape >=981px. Los teléfonos conservan su layout móvil aprobado. */
@media (orientation: landscape) and (min-width: 981px){
  body.pv-draft-normal{
    overflow:hidden !important;
  }
  body.pv-draft-normal #ui-root{
    width:100vw !important;
    height:100vh !important;
    min-height:100vh !important;
    overflow:hidden !important;
  }
  body.pv-draft-normal header,
  body.pv-draft-normal #draft-container{
    transform-origin:top center;
  }
}

/* PC normal y monitores grandes: se mantiene el comportamiento aprobado. */
@media (orientation: landscape) and (min-width: 1901px){
  :root{ --ui-zoom:.95; }
}

/* Desktop/tablet landscape: baja el zoom por escalones para que todo quepa. */
@media (orientation: landscape) and (min-width: 981px) and (max-width: 1900px){
  :root{ --ui-zoom:.95; }
}
@media (orientation: landscape) and (min-width: 981px) and (max-width: 1680px){
  :root{ --ui-zoom:.93; }
}
@media (orientation: landscape) and (min-width: 981px) and (max-width: 1600px){
  :root{ --ui-zoom:.89; }
}
@media (orientation: landscape) and (min-width: 981px) and (max-width: 1440px){
  :root{ --ui-zoom:.80; }
}
@media (orientation: landscape) and (min-width: 981px) and (max-width: 1368px){
  :root{ --ui-zoom:.76; }
}
@media (orientation: landscape) and (min-width: 981px) and (max-width: 1280px){
  :root{ --ui-zoom:.71; }
}
@media (orientation: landscape) and (min-width: 981px) and (max-width: 1180px){
  :root{ --ui-zoom:.66; }
}
@media (orientation: landscape) and (min-width: 981px) and (max-width: 1100px){
  :root{ --ui-zoom:.58; }
}

/* Cortes de altura: si Windows/DevTools baja la altura, priorizar que no corte. */
@media (orientation: landscape) and (min-width: 981px) and (max-height: 900px){
  :root{ --ui-zoom:.80; }
}
@media (orientation: landscape) and (min-width: 981px) and (max-height: 820px){
  :root{ --ui-zoom:.72; }
}
@media (orientation: landscape) and (min-width: 981px) and (max-height: 768px){
  :root{ --ui-zoom:.64; }
}
@media (orientation: landscape) and (min-width: 981px) and (max-height: 620px){
  :root{ --ui-zoom:.56; }
}

/* Tablets concretas: las tratamos como PC reescalado, no como PC recortado. */
@media (orientation: landscape) and (min-width: 1000px) and (max-width: 1050px) and (min-height: 580px) and (max-height: 790px){
  :root{ --ui-zoom:.56; }
  body.pv-draft-normal #draft-container{ margin-top:-6px !important; }
}
@media (orientation: landscape) and (min-width: 1160px) and (max-width: 1200px) and (min-height: 790px) and (max-height: 840px){
  :root{ --ui-zoom:.66; }
}
@media (orientation: landscape) and (min-width: 1260px) and (max-width: 1300px) and (min-height: 780px) and (max-height: 870px){
  :root{ --ui-zoom:.71; }
}
@media (orientation: landscape) and (min-width: 1340px) and (max-width: 1390px) and (min-height: 880px) and (max-height: 1040px){
  :root{ --ui-zoom:.76; }
}

/* Surface Duo / móviles landscape siguen usando el modo móvil ya aprobado. */
@media (orientation: landscape) and (max-width: 980px) and (max-height: 560px){
  :root{ --ui-zoom:1; }
}

/* Escala global real para Draft normal - Mantiene el PC aprobado cerca de 1920/1980x1080. - En fullscreen chico usa la misma escala que fuera de fullscreen. - En monitores grandes escala hacia arriba con límite, sin tocar móvil. */
body.pv-draft-normal.pv-draft-global-scale-active header,
body.pv-draft-normal.pv-draft-global-scale-active #draft-container{
  transform-origin:top center;
}
body.pv-draft-normal.pv-is-fullscreen.pv-draft-global-scale-active{
  --ui-zoom:var(--pv-draft-normal-fit-zoom, .95) !important;
}
body.pv-draft-normal.pv-draft-global-scale-active:not(.pv-is-fullscreen){
  --ui-zoom:var(--pv-draft-normal-fit-zoom, .95) !important;
}
body.pv-draft-normal.pv-draft-large-screen-active #draft-container{
  max-width:1840px;
}


/* Normal: escala fluida real para PC/tablet Usa la maqueta aprobada como base y calcula zoom por viewport. Evita que fullscreen o alturas muy bajas vuelvan al zoom-in. */
body.pv-draft-normal.pv-draft-v32-fluid-active{
  --ui-zoom:var(--pv-draft-normal-fluid-zoom, .95) !important;
  overflow:hidden !important;
}
body.pv-draft-normal.pv-draft-v32-fluid-active header,
body.pv-draft-normal.pv-draft-v32-fluid-active #draft-container{
  zoom:var(--pv-draft-normal-fluid-zoom, .95) !important;
  transform-origin:top center !important;
}
body.pv-draft-normal.pv-draft-v32-fluid-active #draft-container{
  max-width:1750px !important;
}
body.pv-draft-normal.pv-draft-v32-low-height #draft-container{
  margin-top:-14px !important;
  padding-bottom:8px !important;
}
body.pv-draft-normal.pv-draft-v32-low-height .pv-ranklane.pv-ranklane--fixed{
  max-height:calc(100vh / max(var(--pv-draft-normal-fluid-zoom, .5), .1) - 18px) !important;
}

/* Normal PC grande sin zoom-out Crece por ancho con variables; no toca móvil/tablet ni maqueta madre. */
@media (orientation:landscape) and (min-width:1981px) and (min-height:900px){
  body.pv-draft-normal.pv-draft-v43-large-active .site-title{
    font-size:var(--pv-draft-v43-title-font, 38px) !important;
  }
  body.pv-draft-normal.pv-draft-v43-large-active #draft-container{
    max-width:var(--pv-draft-v43-container, 2020px) !important;
    gap:var(--pv-draft-v43-gap, 26px) !important;
    padding-left:22px !important;
    padding-right:22px !important;
  }
  body.pv-draft-normal.pv-draft-v43-large-active .team-section{
    width:var(--pv-draft-v43-team, 506px) !important;
    padding:var(--pv-draft-v43-panel-pad, 14px) !important;
  }
  body.pv-draft-normal.pv-draft-v43-large-active #draft-info{
    min-width:var(--pv-draft-v43-center, 898px) !important;
    max-width:var(--pv-draft-v43-center, 898px) !important;
    padding:var(--pv-draft-v43-center-pad-y, 15px) var(--pv-draft-v43-center-pad-x, 18px) 12px !important;
  }
  body.pv-draft-normal.pv-draft-v43-large-active .team-slots-container{
    grid-template-rows:repeat(4, var(--pv-draft-v43-slot-h, 207px)) !important;
    gap:var(--pv-draft-v43-slot-gap, 16px) !important;
  }
  body.pv-draft-normal.pv-draft-v43-large-active .slot{
    height:var(--pv-draft-v43-slot-h, 207px) !important;
  }
  body.pv-draft-normal.pv-draft-v43-large-active #characters{
    grid-template-columns:repeat(8, var(--pv-draft-v43-char, 84px)) !important;
    gap:var(--pv-draft-v43-char-gap, 12px) !important;
  }
  body.pv-draft-normal.pv-draft-v43-large-active .character{
    width:var(--pv-draft-v43-char, 84px) !important;
    height:var(--pv-draft-v43-char, 84px) !important;
  }
  body.pv-draft-normal.pv-draft-v43-large-active #current-action{
    font-size:var(--pv-draft-v43-action-font, 23px) !important;
  }
  body.pv-draft-normal.pv-draft-v43-large-active .timer{
    font-size:var(--pv-draft-v43-timer-font, 23px) !important;
  }

  /* Títulos: mismo arreglo que en ratas; conserva animaciones sin subpíxeles temblorosos. */
  @keyframes crownFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-2px,0)}}
  @keyframes emojiBob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-1px,0)}}
  @keyframes swordSwing{0%,100%{transform:rotate(-7deg) translate3d(0,0,0)}50%{transform:rotate(6deg) translate3d(0,-2px,0)}}
  @keyframes twinkle{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-1px,0) scale(1.045)}}
  @keyframes theOneCrownFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-2px,0)}}
  @keyframes pvBestAura{0%,100%{transform:translate3d(0,0,0);opacity:.55}50%{transform:translate3d(0,-2px,0);opacity:.75}}
  @keyframes pvBestSpark{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.9}50%{transform:translate3d(0,-1px,0) scale(1.045);opacity:1}}

  body.pv-draft-normal.pv-draft-v43-large-active .title-badge,
  body.pv-draft-normal.pv-draft-v43-large-active .title-badge::before,
  body.pv-draft-normal.pv-draft-v43-large-active .title-badge::after{
    backface-visibility:hidden !important;
    -webkit-font-smoothing:antialiased;
    transform-origin:50% 50% !important;
    will-change:transform, opacity;
  }
}


/* Normal: límites sanos en PC grande - A partir de 2160px el texto de turno no se sube ni crece contra ABYSS DRAFT. - A partir de 1328px de alto se congela el crecimiento vertical de zonas. */
@media (orientation:landscape) and (min-width:2160px) and (min-height:900px){
  body.pv-draft-normal.pv-draft-v43-large-active #current-action{
    font-size:var(--pv-draft-v43-action-font, 16.4px) !important;
    line-height:1.08 !important;
    margin:2px 0 7px !important;
    padding-left:132px !important;
    padding-right:132px !important;
    transform:none !important;
  }
  body.pv-draft-normal.pv-draft-v43-large-active #draft-info{
    padding-top:56px !important;
  }
}
@media (orientation:landscape) and (min-width:1981px) and (min-height:1329px){
  body.pv-draft-normal.pv-draft-v43-large-active #draft-container{
    align-items:center !important;
  }
  body.pv-draft-normal.pv-draft-v43-large-active .team-section{
    max-height:calc(100vh - 34px) !important;
    overflow:visible !important;
  }
}

/* Ajustes quirúrgicos solicitados 1) Arma en pick móvil: mantener imagen centrada dentro del marco cuando el draft usa chibis en teléfono. 2) Botón LISTO post-draft: si un jugador ya está listo, dueño, rival y espectadores lo ven igual de vivo/pro que el jugador local. */

/* El botón listo no debe verse muerto para el rival/espectadores solo por estar disabled. */
#pd-normal-ready-bar .pd-final-ready-btn.is-ready,
#pd-normal-ready-bar .pd-final-ready-btn.is-ready:disabled{
  opacity:1 !important;
  filter:none !important;
  color:#fff !important;
  background:linear-gradient(180deg, rgba(83,217,118,.42), rgba(57,158,84,.26)) !important;
  border-color:rgba(117,255,158,.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 12px 28px rgba(0,0,0,.28),
    0 0 26px rgba(97,255,146,.22) !important;
}
#pd-normal-ready-bar .pd-final-ready-btn.is-ready:disabled::before{
  opacity:.7 !important;
}

@media (max-width:900px){
  body.pv-draft-normal .slot .final-pick-weapon-wrap,
  body.pv-draft-normal .final-pick-weapon-wrap,
  body.pv-draft-normal.pv-mobile-landscape-forced .slot .final-pick-weapon-wrap,
  body.pv-draft-normal.pv-mobile-landscape-forced .final-pick-weapon-wrap{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    line-height:0 !important;
    overflow:visible !important;
  }

  body.pv-draft-normal .slot .final-pick-weapon-wrap > .final-pick-weapon-img,
  body.pv-draft-normal .final-pick-weapon-wrap > .final-pick-weapon-img,
  body.pv-draft-normal.pv-mobile-landscape-forced .slot .final-pick-weapon-wrap > .final-pick-weapon-img,
  body.pv-draft-normal.pv-mobile-landscape-forced .final-pick-weapon-wrap > .final-pick-weapon-img{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    display:block !important;
    flex:0 0 auto !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    padding:0 !important;
    margin:0 auto !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
    transform:none !important;
  }
}

@media (orientation:landscape) and (max-width:980px) and (max-height:560px){
  body.pv-draft-normal.pv-mobile-landscape-forced .slot .final-pick-weapon-wrap,
  body.pv-draft-normal.pv-mobile-landscape-forced .final-pick-weapon-wrap{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;
    top:2px !important;
    right:2px !important;
    padding:2px !important;
    border-radius:7px !important;
    z-index:36 !important;
  }
}

/* Blindaje definitivo arma pick móvil Problema: reglas antiguas de móvil aplicaban top/right/width/height a .pick-weapon-img aunque ahora esté dentro de .pick-weapon-wrap. Solución: en teléfono horizontal, el wrapper manda y la imagen se centra por coordenadas absolutas dentro de la cápsula, sin depender de flex/grid. */
@media (orientation:landscape) and (max-width:1180px) and (max-height:620px){
  body.pv-draft-normal.pv-mobile-landscape-forced .slot.finalized .final-pick-weapon-wrap,
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section .slot.finalized .final-pick-weapon-wrap,
  body.pv-draft-normal.pv-mobile-landscape-forced .team-slots-container .slot.finalized .final-pick-weapon-wrap{
    position:absolute !important;
    top:2px !important;
    right:2px !important;
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;
    max-width:24px !important;
    max-height:24px !important;
    padding:2px !important;
    box-sizing:border-box !important;
    display:block !important;
    overflow:visible !important;
    border-radius:7px !important;
    z-index:46 !important;
    line-height:0 !important;
  }

  body.pv-draft-normal.pv-mobile-landscape-forced .slot.finalized .final-pick-weapon-wrap > img.final-pick-weapon-img,
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section .slot.finalized .final-pick-weapon-wrap > img.final-pick-weapon-img,
  body.pv-draft-normal.pv-mobile-landscape-forced .team-slots-container .slot.finalized .final-pick-weapon-wrap > img.final-pick-weapon-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-trailer-open .slot.finalized .final-pick-weapon-wrap > img.final-pick-weapon-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-trailer-hard-perf .slot.finalized .final-pick-weapon-wrap > img.final-pick-weapon-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-slot-preview-open .slot.finalized .final-pick-weapon-wrap > img.final-pick-weapon-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-css-paused .slot.finalized .final-pick-weapon-wrap > img.final-pick-weapon-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-perf-video .slot.finalized .final-pick-weapon-wrap > img.final-pick-weapon-img,
  body.pv-draft-normal.pv-mobile-landscape-forced.pv-media-hard-lock .slot.finalized .final-pick-weapon-wrap > img.final-pick-weapon-img{
    position:absolute !important;
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    left:50% !important;
    width:calc(100% - 4px) !important;
    height:calc(100% - 4px) !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:calc(100% - 4px) !important;
    max-height:calc(100% - 4px) !important;
    padding:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    display:block !important;
    object-fit:contain !important;
    object-position:center center !important;
    border:0 !important;
    border-radius:5px !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
    transform:translate(-50%, -50%) !important;
    transform-origin:center center !important;
  }

  body.pv-draft-normal.pv-mobile-landscape-forced .slot.finalized .final-pick-weapon-wrap > .final-pick-weapon-ref-badge,
  body.pv-draft-normal.pv-mobile-landscape-forced .team-section .slot.finalized .final-pick-weapon-wrap > .final-pick-weapon-ref-badge,
  body.pv-draft-normal.pv-mobile-landscape-forced .team-slots-container .slot.finalized .final-pick-weapon-wrap > .final-pick-weapon-ref-badge{
    right:-4px !important;
    bottom:-5px !important;
    z-index:48 !important;
  }
}


/* Captura completa post-draft normal, modo Pola Base botón solo cámara, sin CDN y sin esconder paneles/tiempos. */
#postdraft-panel .pd-capture-row{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:10px;
}
#postdraft-panel .pd-capture-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  min-width:48px;
  height:44px;
  min-height:44px;
  padding:0;
  border-radius:14px;
  border:1px solid rgba(136, 218, 255, .30);
  background:
    linear-gradient(180deg, rgba(22, 32, 50, .82), rgba(10, 13, 22, .78)),
    radial-gradient(120% 180% at 50% 0%, rgba(102, 220, 255, .20), transparent 58%);
  color:#eef9ff;
  box-shadow:
    0 14px 34px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 22px rgba(89, 207, 255, .13);
  cursor:pointer;
  overflow:hidden;
  transform:translateZ(0);
  transition:transform .18s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#postdraft-panel .pd-capture-btn::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.12) 42%, transparent 62%);
  transform:translateX(-120%);
  transition:transform .45s ease;
}
#postdraft-panel .pd-capture-btn:hover{
  transform:translateY(-1px) translateZ(0);
  border-color:rgba(145, 228, 255, .46);
  filter:brightness(1.06);
  box-shadow:
    0 16px 38px rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 0 28px rgba(89, 207, 255, .18);
}
#postdraft-panel .pd-capture-btn:hover::before{ transform:translateX(120%); }
#postdraft-panel .pd-capture-btn:active{ transform:translateY(0) scale(.99) translateZ(0); }
#postdraft-panel .pd-capture-btn:disabled{
  opacity:.70;
  cursor:wait;
  filter:saturate(.85);
  transform:none;
}
#postdraft-panel .pd-camera-ico{
  --cam:#eef9ff;
  position:relative;
  width:22px;
  height:16px;
  flex:0 0 22px;
  border:2px solid var(--cam);
  border-radius:5px;
  box-shadow:0 0 10px rgba(150, 230, 255, .25);
}
#postdraft-panel .pd-camera-ico::before{
  content:"";
  position:absolute;
  left:3px;
  top:-7px;
  width:10px;
  height:6px;
  border-radius:4px 4px 1px 1px;
  background:var(--cam);
  box-shadow:9px 4px 0 -3px var(--cam);
}
#postdraft-panel .pd-camera-ico::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border:2px solid var(--cam);
  border-radius:50%;
  transform:translate(-50%, -50%);
  background:rgba(0,0,0,.30);
}
#postdraft-panel .pd-capture-btn.is-busy .pd-camera-ico{
  animation:pvCaptureCameraPulse .9s ease-in-out infinite;
}
@keyframes pvCaptureCameraPulse{
  0%,100%{ transform:scale(1); opacity:.95; }
  50%{ transform:scale(1.08); opacity:1; }
}
#pd-capture-toast{
  position:fixed;
  left:50%;
  bottom:30px;
  z-index:2147483000;
  transform:translate(-50%, 14px) scale(.98);
  opacity:0;
  pointer-events:none;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(132, 255, 180, .42);
  background:
    linear-gradient(180deg, rgba(16, 29, 25, .92), rgba(6, 12, 12, .88)),
    radial-gradient(120% 160% at 50% 0%, rgba(95,255,174,.22), transparent 60%);
  color:#eafff2;
  font-weight:1000;
  letter-spacing:.35px;
  box-shadow:0 18px 42px rgba(0,0,0,.42), 0 0 26px rgba(91,255,170,.14);
  backdrop-filter:blur(8px) saturate(140%);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  transition:opacity .22s ease, transform .22s ease;
}
#pd-capture-toast.is-show{
  opacity:1;
  transform:translate(-50%, 0) scale(1);
}
#pd-capture-toast.is-error{
  border-color:rgba(255, 116, 116, .48);
  background:linear-gradient(180deg, rgba(48, 18, 22, .92), rgba(15, 7, 10, .88));
  color:#ffecec;
  box-shadow:0 18px 42px rgba(0,0,0,.42), 0 0 26px rgba(255,91,91,.13);
}
/* Solo se pausa la animación dentro de la imagen clonada; la página real no se esconde al capturar. */
body.pv-capturing-result *,
body.pv-capturing-result *::before,
body.pv-capturing-result *::after{
  animation-play-state:paused !important;
  transition:none !important;
}
/* Mantener el ojo en su sitio normal cuando el panel está abierto; al ocultar, que no rebote a la derecha. */
#postdraft-panel.pd-info-collapsed{
  width:fit-content !important;
  max-width:100% !important;
  margin:6px auto !important;
  display:block !important;
  justify-items:unset !important;
}
#postdraft-panel.pd-info-collapsed .pd-collapse-toolbar{
  width:auto !important;
  margin:0 !important;
  justify-content:center !important;
}
@media (orientation:landscape) and (max-width:1180px) and (max-height:620px){
  #postdraft-panel .pd-capture-row{ margin-top:4px !important; }
  #postdraft-panel .pd-capture-btn{
    width:36px !important;
    min-width:36px !important;
    height:31px !important;
    min-height:31px !important;
    padding:0 !important;
    border-radius:11px !important;
  }
  #postdraft-panel .pd-camera-ico{
    width:16px !important;
    height:12px !important;
    flex-basis:16px !important;
    border-width:1.5px !important;
    border-radius:4px !important;
  }
  #postdraft-panel .pd-camera-ico::before{
    left:2px !important;
    top:-5px !important;
    width:8px !important;
    height:5px !important;
    box-shadow:7px 3px 0 -2.5px var(--cam) !important;
  }
  #postdraft-panel .pd-camera-ico::after{
    width:5px !important;
    height:5px !important;
    border-width:1.5px !important;
  }
  #pd-capture-toast{
    bottom:12px !important;
    padding:8px 12px !important;
    font-size:10px !important;
  }
}

/* HTML Captura nativa real Oculta solo controles flotantes mientras el navegador toma el frame real. No redibuja el draft ni cambia slots/marcos/fondos. */
body.pv-draft-normal.pv-native-capturing-result #pd-capture-row,
body.pv-draft-normal.pv-native-capturing-result #pd-capture-toast,
body.pv-draft-normal.pv-native-capturing-result #fullscreen-toggle,
body.pv-draft-normal.pv-native-capturing-result #volume-toggle,
body.pv-draft-normal.pv-native-capturing-result #volume-control,
body.pv-draft-normal.pv-native-capturing-result #pv-settings-btn,
body.pv-draft-normal.pv-native-capturing-result #pv-settings-menu,
body.pv-draft-normal.pv-native-capturing-result #pd-admin-lock-floating,
body.pv-draft-normal.pv-native-capturing-result .pv-mobile-rotate-overlay{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}