/* ══════════════════════════════════════════════════════════════
   jugar-view.css — Hub «Jugar» (Fase 1 de la reestructura).
   Vista inmersiva: mazo activo + botón fusionado con el modo +
   menú de modos (tarjetas grandes en escritorio / lista en móvil).
   Estética real de tcgmini (oscuro, system-ui, cristal, oro online).
   Todo scopeado bajo #view-jugar. Aditivo: no toca otras vistas.
   ══════════════════════════════════════════════════════════════ */
#view-jugar{
  position:fixed; top:48px; left:0; right:0; bottom:0; z-index:9050;
  display:none; /* switchAppTab lo pone a flex */
  flex-direction:column; overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#efeef5; background:#0b0b11;
  --jv-gold:#ffd166; --jv-gold-deep:#f2b13a;
  --jv-line:rgba(255,255,255,0.09); --jv-line2:rgba(255,255,255,0.17);
  --jv-panel:rgba(255,255,255,0.05); --jv-panel2:rgba(255,255,255,0.09);
  --jv-muted:#9797a7; --jv-muted2:#6a6a76; --jv-live:#57dc8c;
  --jv-a-std:#ffd166; --jv-a-draft:#5ec8ff; --jv-a-evo:#59d39a; --jv-a-libre:#b79cff;
  /* alto de las bandas de modo en móvil (banners_tuner.html → «Alto de la banda») */
  --jv-band-h:114px;
  /* ancho del mazo activo: de aquí cuelga el espaciado del bloque central, así que al
     encoger el mazo en pantallas estrechas los huecos encogen con él (en escritorio da
     270px = exactamente el espaciado de siempre: 22px bajo el nombre, 62px sobre el botón) */
  --jv-deckw:min(270px,66vw);
}

/* fondo atmosférico */
#view-jugar .jv-bg{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none}
#view-jugar .jv-bg::before{content:""; position:absolute; inset:0;
  background:
    radial-gradient(760px 620px at 50% 20%, rgba(255,196,120,.15), transparent 62%),
    radial-gradient(720px 560px at 14% 108%, rgba(77,171,255,.12), transparent 60%),
    radial-gradient(760px 620px at 90% 112%, rgba(255,107,107,.10), transparent 60%),
    linear-gradient(180deg,#101019,#0a0a10 70%);}
#view-jugar .jv-vig{position:absolute; inset:0; background:radial-gradient(120% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.5) 100%)}
/* Fondo de pokéballs (mismo tile que el draft): textura con marca + deriva lenta, muy sutil bajo los glows. */
#view-jugar .jv-pokeballs{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; opacity:0.045;
  -webkit-mask-image:radial-gradient(ellipse 95% 80% at 50% 42%, #000 55%, transparent 100%);
          mask-image:radial-gradient(ellipse 95% 80% at 50% 42%, #000 55%, transparent 100%);}
#view-jugar .jv-pokeballs::before{content:''; position:absolute; top:-320px; left:-320px;
  width:calc(100% + 640px); height:calc(100% + 640px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='white' stroke-width='3.2'%3E%3Cg transform='translate(50 50) rotate(22)'%3E%3Cpath fill='white' stroke='none' fill-rule='evenodd' d='M-24 0A24 24 0 0 1 24 0Z M-9 0A9 9 0 0 1 9 0Z'/%3E%3Ccircle r='24'/%3E%3Ccircle r='9'/%3E%3C/g%3E%3Cg transform='translate(150 50) rotate(112)'%3E%3Cpath fill='white' stroke='none' fill-rule='evenodd' d='M-24 0A24 24 0 0 1 24 0Z M-9 0A9 9 0 0 1 9 0Z'/%3E%3Ccircle r='24'/%3E%3Ccircle r='9'/%3E%3C/g%3E%3Cg transform='translate(50 150) rotate(205)'%3E%3Cpath fill='white' stroke='none' fill-rule='evenodd' d='M-24 0A24 24 0 0 1 24 0Z M-9 0A9 9 0 0 1 9 0Z'/%3E%3Ccircle r='24'/%3E%3Ccircle r='9'/%3E%3C/g%3E%3Cg transform='translate(150 150) rotate(298)'%3E%3Cpath fill='white' stroke='none' fill-rule='evenodd' d='M-24 0A24 24 0 0 1 24 0Z M-9 0A9 9 0 0 1 9 0Z'/%3E%3Ccircle r='24'/%3E%3Ccircle r='9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 300px 300px repeat;
  animation:jv-bg-drift 52s linear infinite;}
@keyframes jv-bg-drift{to{transform:translate(300px,300px)}}

/* zona central */
#view-jugar .jv-home{position:relative; z-index:2; flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:20px; overflow:auto}
#view-jugar .jv-eyebrow{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--jv-muted); font-weight:700}

/* ── mazo activo (HERO) ──────────────────────────────────────────────
   Reutiliza el .mz-stack de Mis Mazos, pero con presencia de héroe:
   bisel + sombra a capas + gloss para que la carta destacada se lea como
   UNA carta premium, y un hover que respira (elevación + destello +
   apertura del stack). ⚠ El contenedor REAL es #jv-deckstage (.jv2-dwrap):
   todos los :hover van scopeados a ESE id — si se renombra el markup,
   re-scopear aquí o el hover muere en silencio (ya pasó una vez). */

#view-jugar .jv-deck-wrap{position:relative; width:210px; max-width:62vw}
#view-jugar .jv-deck-wrap .mz-stack{margin-bottom:0}

/* dorsos: sombra propia + apertura suave = volumen real de mazo */
#view-jugar .jv-deck-wrap .mz-stack-back{border-radius:11px; border-color:rgba(255,255,255,.05);
  box-shadow:0 5px 12px rgba(0,0,0,.4);
  transition:transform .32s cubic-bezier(.34,1.25,.64,1), opacity .26s, box-shadow .3s}
/* spread EN REPOSO = el del hover de antes (Daniel 2026-08-08: que el mazo «tenga cartas»
   por defecto); el hover abre AÚN más (reglas :hover más abajo) */
#view-jugar .jv-deck-wrap .mz-stack-back-1{transform:translateY(8px);  opacity:.92}
#view-jugar .jv-deck-wrap .mz-stack-back-2{transform:translateY(16px); opacity:.68}
#view-jugar .jv-deck-wrap .mz-stack-back-3{transform:translateY(24px); opacity:.46}
/* «púlsame»: nudge muy sutil cada ~8 s (pausa en hover; fuera con reducir-animaciones) */
@keyframes jv2DeckNudge{0%,90%,100%{transform:translateY(0)}93%{transform:translateY(-5px)}96%{transform:translateY(1px)}98%{transform:translateY(0)}}
#view-jugar .jv-deck-wrap .mz-stack{animation:jv2DeckNudge 8s ease-in-out infinite}
#view-jugar #jv-deckstage:hover .jv-deck-wrap .mz-stack{animation-play-state:paused}
html.pb-reduce-motion #view-jugar .jv-deck-wrap .mz-stack{animation:none}

/* frente = carta premium: bisel (hairline oscuro fuera / rim claro dentro) + sombra a capas */
#view-jugar .jv-deck-wrap .mz-stack-front{border-radius:12px; border:none;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    0 2px 3px rgba(0,0,0,.4),
    0 12px 26px -6px rgba(0,0,0,.55),
    0 30px 56px -22px rgba(0,0,0,.72);
  transition:transform .34s cubic-bezier(.2,.8,.3,1), box-shadow .34s}
/* gloss + viñeta estáticos: unifican las bandas bajo una sola luz → objeto único */
#view-jugar .jv-deck-wrap .mz-stack-front::after{content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.06);
  background:
    linear-gradient(134deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 26%, transparent 46%),
    radial-gradient(150% 130% at 50% -12%, transparent 58%, rgba(0,0,0,.30) 100%)}
/* destello que barre en el hover = la carta "cobra vida" */
#view-jugar .jv-deck-wrap .mz-stack-front::before{content:""; position:absolute; top:-20%; left:-70%;
  width:46%; height:140%; z-index:6; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:skewX(-16deg); opacity:0}
#view-jugar #jv-deckstage:hover .mz-stack-front::before{animation:jvDeckSheen .9s ease-out}
@keyframes jvDeckSheen{0%{left:-70%;opacity:0}16%{opacity:.85}100%{left:135%;opacity:0}}

/* hover: elevación + sombra que crece + apertura del stack */
#view-jugar #jv-deckstage:hover .mz-stack-front{transform:translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    0 4px 7px rgba(0,0,0,.42),
    0 22px 44px -8px rgba(0,0,0,.6),
    0 48px 84px -26px rgba(0,0,0,.82)}
#view-jugar #jv-deckstage:hover .mz-stack-back-1{transform:translateY(12px); opacity:.94; box-shadow:0 8px 16px rgba(0,0,0,.42)}
#view-jugar #jv-deckstage:hover .mz-stack-back-2{transform:translateY(23px); opacity:.7;  box-shadow:0 9px 18px rgba(0,0,0,.4)}
#view-jugar #jv-deckstage:hover .mz-stack-back-3{transform:translateY(34px); opacity:.48; box-shadow:0 10px 20px rgba(0,0,0,.38)}
html.pb-reduce-motion #view-jugar #jv-deckstage:hover .mz-stack-front::before{animation:none}

/* estados vacío / fallback */
#view-jugar .jv-empty-deck{aspect-ratio:400/559; box-sizing:border-box; border-radius:12px; text-align:center;
  padding:16px; color:var(--jv-muted); font:600 13px/1.45 system-ui,sans-serif;
  background:linear-gradient(160deg,#20202c,#14141c); border:1px solid rgba(255,255,255,.1)}
#view-jugar button.jv-empty-deck{width:100%; display:grid; place-items:center; appearance:none; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.25,1),border-color .18s,background .18s,box-shadow .2s}
#view-jugar button.jv-empty-deck:hover{color:#e9e9f1; border-color:rgba(255,255,255,.2); background:linear-gradient(160deg,#262632,#171720);
  transform:translateY(-2px); box-shadow:0 16px 30px -18px #000}
#view-jugar button.jv-empty-deck:active{transform:scale(.985)}
#view-jugar .jv-empty-deck:focus-visible,#view-jugar .jv-welcome-face:focus-visible,
#view-jugar .jv-welcome-local:focus-visible{
  outline:2px solid rgba(210,216,235,.9); outline-offset:3px}

/* Bienvenida contextual: la silueta sigue siendo exactamente la de una baraja.
   El área grande inicia sesión; el botón inferior (hermano, nunca anidado) permite
   crear localmente sin obligar a abrir una cuenta. */
#view-jugar .jv-welcome-deck{position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; gap:3px;
  padding:11px; color:#efeff5; border-color:rgba(255,255,255,.14);
  background:linear-gradient(155deg,rgba(35,35,48,.98),rgba(18,18,26,.99));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 24px 48px -32px #000;
  animation:jvWelcomeIn .38s cubic-bezier(.2,.85,.3,1) both}
#view-jugar .jv-welcome-deck::before{content:""; position:absolute; inset:-25%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 50% 24%,rgba(195,202,230,.13),transparent 42%); transform:rotate(-8deg)}
@keyframes jvWelcomeIn{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}
#view-jugar .jv-welcome-face{min-width:0; min-height:0; flex:1; width:100%; appearance:none; border:0; border-radius:9px;
  padding:10px 9px 7px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:transparent; color:inherit; font:inherit; cursor:pointer; transition:background .16s,transform .15s}
#view-jugar .jv-welcome-face:hover{background:rgba(255,255,255,.035)}
#view-jugar .jv-welcome-face:active{transform:scale(.985)}
#view-jugar .jv-welcome-icon{width:48px; height:48px; display:grid; place-items:center; color:rgba(232,235,248,.55)}
#view-jugar .jv-welcome-icon svg{width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
#view-jugar .jv-welcome-title{max-width:15ch; color:#f3f3f8; font-size:16px; line-height:1.22; font-weight:760; letter-spacing:-.01em; text-wrap:balance}
#view-jugar .jv-welcome-body{max-width:24ch; color:#9292a1; font-size:11.5px; line-height:1.46; font-weight:520; text-wrap:balance}
#view-jugar .jv-welcome-local{width:100%; min-height:44px; flex:none; appearance:none; border:0; border-top:1px solid rgba(255,255,255,.075);
  background:transparent; color:#a9a9b6; border-radius:0 0 8px 8px; cursor:pointer;
  font:620 12px/1.25 system-ui,sans-serif; transition:color .15s,background .15s,transform .1s}
#view-jugar .jv-welcome-local:hover{color:#fff; background:rgba(255,255,255,.045)}
#view-jugar .jv-welcome-local:active{transform:scale(.98)}

/* Espera breve entre login y resolución de la biblioteca de Firestore. */
#view-jugar .jv-welcome-wait{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  color:#a4a4b2; font-size:12px; font-weight:620}
#view-jugar #jv-deckstage[data-jv-deck-state="syncing"]{cursor:wait}
#view-jugar #jv-deckstage[data-jv-deck-state="syncing"]:hover .jv2-halo{opacity:.55; transform:translateX(-50%)}
#view-jugar .jv-welcome-spinner{width:27px; height:27px; border-radius:50%; border:2px solid rgba(255,255,255,.12); border-top-color:rgba(255,255,255,.72);
  animation:jvWelcomeSpin .8s linear infinite}
@keyframes jvWelcomeSpin{to{transform:rotate(360deg)}}
#view-jugar .jv-face-fallback{aspect-ratio:400/559; border-radius:12px; background:#0a0a10 center/cover; border:1px solid rgba(255,255,255,.1)}
#view-jugar .jv-name{font-size:21px; font-weight:750; margin-top:8px; text-align:center}
#view-jugar .jv-line{display:flex; align-items:center; gap:8px; color:var(--jv-muted); font-size:13px; margin-top:2px}
#view-jugar .jv-line .n{color:var(--jv-live); font-weight:650}
#view-jugar .jv-orb{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);display:inline-block;vertical-align:-2px;background-size:cover}

/* botón fusionado (Clash Mini): una cápsula, 2 filas */
#view-jugar .jv-shell{margin-top:16px; width:300px; max-width:82vw; border-radius:17px; overflow:hidden;
  border:1px solid rgba(255,255,255,.16); box-shadow:0 20px 44px -14px rgba(255,201,90,.4)}
#view-jugar .jv-mrow{display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  background:linear-gradient(180deg,rgba(30,30,42,.98),rgba(22,22,32,.99)); padding:11px; font-weight:700; font-size:13.5px;
  letter-spacing:.01em; border-bottom:1px solid rgba(0,0,0,.35)}
#view-jugar .jv-mrow .jv-mdot{width:9px;height:9px;border-radius:50%;background:var(--jv-acc,var(--jv-gold));box-shadow:0 0 0 3px color-mix(in srgb,var(--jv-acc,var(--jv-gold)) 22%, transparent)}
#view-jugar .jv-mrow .jv-chev{color:var(--jv-acc,var(--jv-gold)); font-size:11px}
#view-jugar .jv-mrow:hover{background:linear-gradient(180deg,rgba(38,38,52,.99),rgba(26,26,36,1))}
#view-jugar .jv-arow{position:relative; overflow:hidden; cursor:pointer; text-align:center; font-weight:740; font-size:19px; color:#191408;
  background:linear-gradient(180deg,#ffe490,var(--jv-gold-deep)); padding:18px; transition:filter .15s}
#view-jugar .jv-arow.jv-soon{cursor:default; color:#4a4536; background:linear-gradient(180deg,#3a3a46,#2c2c36); font-size:15px; font-weight:680}
#view-jugar .jv-arow::after{content:"";position:absolute;top:0;left:-60%;width:38%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:jvShine 3.8s ease-in-out infinite}
#view-jugar .jv-arow.jv-soon::after{display:none}
@keyframes jvShine{0%,72%{left:-60%}86%{left:130%}100%{left:130%}}
#view-jugar .jv-friend{font-size:13px; color:var(--jv-muted2); cursor:pointer; margin-top:12px}
#view-jugar .jv-friend.jv-hide{display:none}

/* ── menú de modos ── */
#view-jugar .jv-scrim{position:absolute; inset:0; z-index:8; background:rgba(6,6,10,.6); opacity:0; pointer-events:none; transition:opacity .28s}
#view-jugar.jv-menu-open .jv-scrim{opacity:1; pointer-events:auto}

/* móvil: lista de banners */
#view-jugar .jv-drawer{position:absolute; z-index:9; left:50%; bottom:0; transform:translate(-50%,102%); width:min(720px,96vw);
  background:linear-gradient(180deg,rgba(24,24,34,.98),rgba(16,16,24,.99)); border:1px solid var(--jv-line2); border-bottom:none;
  border-radius:22px 22px 0 0; padding:14px 20px 24px; box-shadow:0 -30px 80px -30px rgba(0,0,0,.85);
  transition:transform .32s cubic-bezier(.2,.85,.25,1); max-height:80%; overflow:auto}
#view-jugar.jv-menu-open .jv-drawer{transform:translate(-50%,0)}
#view-jugar .jv-grip{width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.18);margin:2px auto 14px}
#view-jugar .jv-dhead{display:flex;align-items:center;justify-content:space-between;margin:0 4px 14px}
#view-jugar .jv-dhead h3{margin:0;font-size:17px;font-weight:750}
#view-jugar .jv-x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--jv-muted);background:var(--jv-panel);border:1px solid var(--jv-line)}
#view-jugar .jv-x:hover{color:#fff}
/* Las bandas de modo se reutilizan FUERA del hub (el selector de formato al crear un mazo):
   el ámbito del componente es este contenedor, no #view-jugar. Lo único que necesita de fuera
   es --jv-line (el resto de vars van en línea por banda o tienen valor por defecto). */
.jv-bands{display:flex;flex-direction:column;gap:10px;--jv-line:rgba(255,255,255,0.09)}
/* móvil: bandas = banner horizontal (arte al fondo, scrim a la izq para el texto, franja de acento) */
#view-jugar .jv-band,.jv-bands .jv-band{position:relative;display:block;cursor:pointer;overflow:hidden;border-radius:14px;min-height:var(--jv-band-h,114px);
  border:1px solid var(--jv-line);background:#101017;transition:border-color .2s,box-shadow .2s}
/* encuadre por modo (banners_tuner.html → js/jugar-view.js): --jvbb-z = zoom en % del ANCHO
   de la banda; 100% == el `cover` de siempre (la ilustración es vertical y la banda apaisada,
   así que cover escala por el ancho). Sin vars, el encuadre general de aquí. */
#view-jugar .jv-band .jv-bbanner,.jv-bands .jv-band .jv-bbanner{position:absolute;inset:0;z-index:0;background-color:#101017;background-repeat:no-repeat;
  background-position:calc(50% + var(--jvbb-dx,0px)) calc(40% + var(--jvbb-dy,0px));
  background-size:var(--jvbb-z,100%) auto;opacity:.92}
/* el desplazamiento va en PÍXELES sobre el anclaje de siempre (--jvb-dx/--jvbb-dx…): así se
   puede sacar la ilustración fuera del hueco todo lo que haga falta — con % el recorrido
   depende del zoom y al llegar al borde ya no se movía más.
   velo de la banda, ajustable por modo: --jvbs-op = opacidad de la zona oscura ·
   --jvbs-w = hasta dónde llega OPACA (a la izquierda, la del texto) · --jvbs-fade = dónde
   acaba el fundido. Con op:1 y w alto la izquierda tapa del todo la ilustración, que es lo
   que permite encoger la carta y dejarla solo en la derecha. */
#view-jugar .jv-band .jv-bscrim,.jv-bands .jv-band .jv-bscrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,7,12,var(--jvbs-op,.95)) var(--jvbs-w,26%),
      rgba(7,7,12,calc(var(--jvbs-op,.95) * .58)) var(--jvbs-fade,62%),
      rgba(7,7,12,var(--jvbs-far,.32))),
    linear-gradient(180deg,rgba(7,7,12,.18),rgba(7,7,12,.5));
  box-shadow:inset 4px 0 0 var(--a)}
#view-jugar .jv-band .jv-bcontent,.jv-bands .jv-band .jv-bcontent{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:15px 16px 15px 18px;min-height:calc(var(--jv-band-h,114px) - 2px)}
#view-jugar .jv-band .jv-info,.jv-bands .jv-band .jv-info{flex:1;min-width:0}
#view-jugar .jv-band .jv-t,.jv-bands .jv-band .jv-t{font-size:16px;font-weight:770;letter-spacing:-.01em;text-shadow:0 1px 7px rgba(0,0,0,.8)}
#view-jugar .jv-band .jv-d,.jv-bands .jv-band .jv-d{font-size:12px;color:rgba(230,230,242,.74);margin-top:3px;text-shadow:0 1px 7px rgba(0,0,0,.85)}
#view-jugar .jv-band:hover,.jv-bands .jv-band:hover{border-color:color-mix(in srgb,var(--a) 55%,transparent)}
#view-jugar .jv-band.jv-sel,.jv-bands .jv-band.jv-sel{border-color:color-mix(in srgb,var(--a) 82%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 40%,transparent),0 8px 24px -14px color-mix(in srgb,var(--a) 55%,#000)}
#view-jugar .jv-band.jv-lock,.jv-bands .jv-band.jv-lock{cursor:default;filter:grayscale(.5) brightness(.74)}
#view-jugar .jv-band.jv-lock .jv-ppl,.jv-bands .jv-band.jv-lock .jv-ppl{color:#c8c8d4}

/* escritorio: tarjetas grandes */
#view-jugar .jv-cards{position:absolute; z-index:9; left:0; right:0; bottom:0; transform:translateY(102%);
  transition:transform .34s cubic-bezier(.2,.85,.25,1);
  background:linear-gradient(180deg,rgba(22,22,31,.98),rgba(14,14,21,.99)); border-top:1px solid var(--jv-line2);
  border-radius:24px 24px 0 0; padding:16px 24px 30px}
#view-jugar.jv-menu-open .jv-cards{transform:translateY(0)}
#view-jugar .jv-cards-head{display:flex;align-items:center;justify-content:space-between;max-width:900px;margin:0 auto 16px}
#view-jugar .jv-cards-head h3{margin:0;font-size:17px;font-weight:750}
#view-jugar .jv-cardrow{display:flex;gap:16px;justify-content:center;align-items:flex-end;max-width:900px;margin:0 auto;flex-wrap:wrap}
#view-jugar .jv-card{position:relative;width:184px;height:250px;border-radius:18px;overflow:hidden;cursor:pointer;flex:none;
  border:1px solid var(--jv-line2);transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .24s,border-color .24s;
  background:#0f0f16;box-shadow:0 18px 40px -22px #000}
/* banner = ilustración de carta; zoom + posición centrada en el personaje → recorta el nombre/PS
   de arriba y los ataques de abajo (mando: background-position/size) */
#view-jugar .jv-card .jv-banner{position:absolute;inset:0;z-index:0;background-color:#0f0f16;background-repeat:no-repeat;
  background-position:calc(50% + var(--jvb-dx,0px)) calc(35% + var(--jvb-dy,0px));
  background-size:auto var(--jvb-z,184%)}
/* voltear la ilustración (algunos artes miran hacia fuera de la tarjeta) */
#view-jugar .jv-banner.jv-flip,#view-jugar .jv-bbanner.jv-flip,.jv-bands .jv-bbanner.jv-flip{transform:scaleX(-1)}
/* scrim: fundido oscuro arriba (tapa el nombre si asoma) + transparente en el personaje + base
   CASI opaca (tapa los ataques de la carta) + tinte de acento */
/* velo de la tarjeta, ajustable por modo: --jvcs-op = opacidad de la base (la que tapa los
   ataques de la carta) · --jvcs-start = a qué altura empieza esa base. */
#view-jugar .jv-card .jv-cscrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,12,.62),transparent 22%,transparent 44%,
      rgba(7,7,12,calc(var(--jvcs-op,.95) * .63)) calc(var(--jvcs-start,80%) - 18%),
      rgba(6,6,11,var(--jvcs-op,.95)) var(--jvcs-start,80%),
      rgba(6,6,11,var(--jvcs-op,.95)) 100%),
    radial-gradient(130% 46% at 50% 0,color-mix(in srgb,var(--a) 16%,transparent),transparent 62%)}
#view-jugar .jv-card .jv-cbar{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:14px 14px 15px}
#view-jugar .jv-card .jv-clbl{min-width:0}
#view-jugar .jv-card .jv-cnm{font-size:20px;font-weight:820;letter-spacing:-.02em;line-height:1.03;text-shadow:0 2px 12px rgba(0,0,0,.8)}
#view-jugar .jv-card .jv-cds{font-size:11.5px;font-weight:600;color:rgba(232,232,244,.74);margin-top:5px;text-shadow:0 1px 8px rgba(0,0,0,.85)}
/* Subtítulos del selector de modos a UNA sola línea, para que los nombres queden al mismo nivel entre tarjetas. */
#view-jugar .jv-card .jv-clbl,#view-jugar .jv-band .jv-info,.jv-bands .jv-band .jv-info{min-width:0}
#view-jugar .jv-card .jv-cds,#view-jugar .jv-band .jv-d,.jv-bands .jv-band .jv-d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-jugar .jv-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--a) 50%,transparent);box-shadow:0 24px 44px -18px color-mix(in srgb,var(--a) 45%,#000)}
#view-jugar .jv-card.jv-sel{transform:translateY(-2px) scale(1.06);border-color:color-mix(in srgb,var(--a) 90%,transparent);
  box-shadow:0 26px 54px -16px color-mix(in srgb,var(--a) 60%,#000),inset 0 0 0 1.5px color-mix(in srgb,var(--a) 85%,transparent)}
#view-jugar .jv-card.jv-lock{cursor:default;filter:grayscale(.55) brightness(.7)}
#view-jugar .jv-card.jv-lock .jv-ppl{color:#c8c8d4}
/* «i» del modo: abre las reglas del formato (no elige el modo). ABSOLUTO en la esquina:
   dentro del flujo del label robaba ancho y cortaba la descripción con ellipsis. */
#view-jugar .jv-i,.jv-bands .jv-i{position:absolute;top:9px;right:9px;z-index:5;
  width:22px;height:22px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.42);color:rgba(255,255,255,.85);
  font:800 12px/1 system-ui,serif;font-style:italic;cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
  transition:background .16s,transform .16s,border-color .16s}
#view-jugar .jv-i:hover,.jv-bands .jv-i:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.55);transform:scale(1.1)}
#view-jugar .jv-i:active,.jv-bands .jv-i:active{transform:scale(.94)}
/* siluetas de jugador (1 local / 2 online) + candado — compartido por tarjetas y bandas */
#view-jugar .jv-ppl,.jv-bands .jv-ppl{display:flex;align-items:center;gap:6px;flex:none;color:color-mix(in srgb,var(--a) 84%,#fff)}
#view-jugar .jv-ppl-1,.jv-bands .jv-ppl-1,#view-jugar .jv-ppl-2,.jv-bands .jv-ppl-2{display:inline-flex;align-items:center}
#view-jugar .jv-sil,.jv-bands .jv-sil{width:19px;height:19px;display:block;fill:currentColor;filter:drop-shadow(0 1px 3px rgba(0,0,0,.75))}
#view-jugar .jv-ppl-2 .jv-sil:last-child,.jv-bands .jv-ppl-2 .jv-sil:last-child{margin-left:-8px;filter:drop-shadow(-1.5px 0 0 rgba(8,8,14,.92)) drop-shadow(0 1px 3px rgba(0,0,0,.75))}
#view-jugar .jv-lock-svg,.jv-bands .jv-lock-svg{width:16px;height:16px;display:block;fill:currentColor;color:#c8c8d4}

/* responsive: lista en móvil, tarjetas en escritorio */
#view-jugar .jv-drawer{display:none}
#view-jugar .jv-cards{display:block}
@media (max-width:720px){
  #view-jugar .jv-drawer{display:block}
  #view-jugar .jv-cards{display:none}
  #view-jugar .jv-deck-wrap{width:170px}
}

/* etiqueta de maqueta/fase (quitar en producción) */
#view-jugar .jv-tag{position:absolute;left:14px;top:10px;z-index:12;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--jv-muted2);background:rgba(0,0,0,.4);border:1px solid var(--jv-line);padding:5px 10px;border-radius:999px}

/* ══ Pantalla «Buscando» del lobby PvP (radar + cronómetro) — de la maqueta «flujo».
   Va aquí (mi CSS, no en pvp.css dirty) scopeada al overlay del PvP. Los contadores
   «en línea / en partida» de la maqueta llegan con la presencia (Fase 2). ══ */
#pvp-content .pvp-searching-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;padding:10px 0 4px;
  position:relative;z-index:1;animation:pvpSearchIn .5s cubic-bezier(.2,.85,.3,1) both}
@keyframes pvpSearchIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
/* Fondo de pokéballs con «warp» de aceleración al entrar (transición generativa que pidió Daniel) */
#pvp-content .pvp-pokeballs{position:fixed;top:48px;left:0;right:0;bottom:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.06;
  /* difuminado gradual en TODA la pantalla (sin borde/«charco»): centro pleno → bordes a 0 */
  -webkit-mask-image:radial-gradient(130% 120% at 50% 46%,#000 8%,rgba(0,0,0,.5) 62%,transparent 100%);
          mask-image:radial-gradient(130% 120% at 50% 46%,#000 8%,rgba(0,0,0,.5) 62%,transparent 100%);
  /* «acelerón»: el fondo entra empujado (deriva rápida) + mini zoom, no un zoom-de-pantalla */
  animation:pvpAccelIn 1s cubic-bezier(.1,.72,.18,1) both}
#pvp-content .pvp-pokeballs::before{content:'';position:absolute;top:-330px;left:-330px;width:calc(100% + 660px);height:calc(100% + 660px);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='white' stroke-width='3.2'%3E%3Cg transform='translate(50 50) rotate(22)'%3E%3Cpath fill='white' stroke='none' fill-rule='evenodd' d='M-24 0A24 24 0 0 1 24 0Z M-9 0A9 9 0 0 1 9 0Z'/%3E%3Ccircle r='24'/%3E%3Ccircle r='9'/%3E%3C/g%3E%3Cg transform='translate(150 50) rotate(112)'%3E%3Cpath fill='white' stroke='none' fill-rule='evenodd' d='M-24 0A24 24 0 0 1 24 0Z M-9 0A9 9 0 0 1 9 0Z'/%3E%3Ccircle r='24'/%3E%3Ccircle r='9'/%3E%3C/g%3E%3Cg transform='translate(50 150) rotate(205)'%3E%3Cpath fill='white' stroke='none' fill-rule='evenodd' d='M-24 0A24 24 0 0 1 24 0Z M-9 0A9 9 0 0 1 9 0Z'/%3E%3Ccircle r='24'/%3E%3Ccircle r='9'/%3E%3C/g%3E%3Cg transform='translate(150 150) rotate(298)'%3E%3Cpath fill='white' stroke='none' fill-rule='evenodd' d='M-24 0A24 24 0 0 1 24 0Z M-9 0A9 9 0 0 1 9 0Z'/%3E%3Ccircle r='24'/%3E%3Ccircle r='9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 260px repeat;
  /* deriva CONTINUA más rápida que en el hub (~52s) → «terminan moviéndose más rápido» */
  animation:pvpDrift 26s linear infinite}
/* el «acelerón»: la capa entra empujada (translate rápido que decelera) + mini zoom + fade breve.
   Compone con la deriva del ::before → sensación de que el fondo acelera y se asienta. */
@keyframes pvpAccelIn{0%{transform:translate(-150px,-150px) scale(1.05);opacity:0}16%{opacity:.06}100%{transform:translate(0,0) scale(1);opacity:.06}}
@keyframes pvpDrift{to{transform:translate(260px,260px)}}
html.pb-reduce-motion #pvp-content .pvp-pokeballs,
html.pb-reduce-motion #pvp-content .pvp-searching-wrap,
html.pb-reduce-motion #pvp-content .pvp-pokeballs::before{animation:none}
#pvp-content .pvp-radar{position:relative;width:148px;height:148px;display:grid;place-items:center}
#pvp-content .pvp-radar .pvp-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,209,102,.5);animation:pvpPing 2s ease-out infinite}
#pvp-content .pvp-radar .pvp-ring.r2{animation-delay:1s}
@keyframes pvpPing{0%{transform:scale(.4);opacity:.95}100%{transform:scale(1.35);opacity:0}}
/* núcleo = glow suave detrás de un pokéball SVG real (el viejo `.pvp-pk` de pseudo-elementos
   salía «amorfo» → ahora es un SVG nítido: media roja, cinturón negro, botón hueco) */
#pvp-content .pvp-radar .pvp-core{width:66px;height:66px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,224,138,.55),rgba(242,177,58,.14) 70%,transparent);
  display:grid;place-items:center;box-shadow:0 0 40px -6px rgba(255,209,102,.55)}
#pvp-content .pvp-radar .pvp-pk-svg{width:44px;height:44px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
#pvp-content .pvp-search-title{margin:0;font-size:27px;font-weight:780;letter-spacing:-.015em;color:#f3f2f8}
/* «Modo Estándar · 0:08» — pie discreto pero con presencia (tabular para que no baile) */
#pvp-content .pvp-elapsed{margin-top:-4px;font:600 11.5px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:#7b7b88;font-variant-numeric:tabular-nums}
html.pb-reduce-motion #pvp-content .pvp-radar .pvp-ring{animation:none}

/* Cancelar de las colas = botón SÓLIDO con acento ROJO (mismo lenguaje que «Partida
   privada» del hub, en rojo). Global: lo usan la cola Estándar y la del Draft. */
.pb-cancelbtn{margin-top:6px;display:inline-flex;align-items:center;justify-content:center;
  font:650 11.5px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#ff9d9d;cursor:pointer;
  padding:11px 22px;border-radius:12px;border:1px solid rgba(255,107,107,.38);background:#231620;transition:.15s}
.pb-cancelbtn:hover{color:#ffbdbd;border-color:rgba(255,107,107,.62);background:#2e1a24}
.pb-cancelbtn:active{transform:scale(.97)}

/* ══ Píldora «en línea / en partida» — COMPARTIDA por el hub «Jugar» y la cola de
   búsqueda (misma pieza, mismo tamaño). Sin punto separador central: un divisor
   fino y grupos juntos (Daniel 2026-08-13). El HTML lo genera pbPresencePill(). ══ */
.pb-onpill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  border:1px solid rgba(95,220,147,.36);background:rgba(95,220,147,.075);
  font:600 12px/1 system-ui,sans-serif;color:#a7d6bc;white-space:nowrap}
.pb-onpill-i{display:inline-flex;align-items:baseline;gap:5px}
.pb-onpill-i b{color:#f0f1f6;font-weight:760;font-size:13px;font-variant-numeric:tabular-nums}
.pb-onpill-div{width:1px;height:12px;background:rgba(255,255,255,.16);flex:none}
.pb-onpill-dot{width:7px;height:7px;border-radius:50%;background:#5fdc93;box-shadow:0 0 8px rgba(95,220,147,.85);flex:none;
  animation:pbOnPul 2s ease-in-out infinite}
@keyframes pbOnPul{0%,100%{opacity:1}50%{opacity:.4}}
html.pb-reduce-motion .pb-onpill-dot{animation:none}

/* ══ Modo INMERSIVO del overlay PvP (pantallas de flujo: buscando / fin).
   Ocupa el ÁREA DE CONTENIDO (top:48px, heredado de .pb-modal-overlay), NO tapa la barra
   superior (petición de Daniel: nada superpuesto sobre la nav; se navega a Cartas/Mazos
   en partida y estas pantallas se suspenden/restauran vía switchAppTab). ══ */
#pvp-overlay.pvp-immersive{
  /* fondo PLANO (los gradientes anchos bandean = el «brillito raro»); la única textura son
     las pokéballs, que se difuminan suave hacia los bordes → sin banding, sin viñeta rara */
  background:#0b0b12;
  -webkit-backdrop-filter:none; backdrop-filter:none}
#pvp-overlay.pvp-immersive .pvp-modal{
  max-width:none; width:100%; height:100%; min-height:100%;
  border:none; border-radius:0; background:none; box-shadow:none;
  display:block; padding:0}
#pvp-overlay.pvp-immersive #pvp-close{display:none}
/* SUSPENDIDO: al navegar a Cartas/Mazos en partida, el flujo PvP se oculta (la sesión sigue
   viva); al volver a «Jugar» se restaura. Lo togglea switchAppTab vía _pvpFlowSuspend/Restore. */
#pvp-overlay.pvp-suspended,#pvp-vs-curtain.pvp-suspended,#pvp-board-coin.pvp-suspended{display:none !important}
/* #pvp-content = centrador a pantalla completa (evita que la tarjeta del Fin se estire) */
#pvp-overlay.pvp-immersive #pvp-content{
  width:100%; height:100%; max-width:none;
  display:flex; align-items:center; justify-content:center;
  padding:24px; box-sizing:border-box}
#pvp-overlay.pvp-immersive #pvp-content>*{flex:0 0 auto}

/* ══ Pantalla «Fin» del PvP — MINIMALISTA (sin rayos) + carta y stats de cada jugador (idea TCG Live) ══ */
#pvp-content .pvp-fin{display:flex;flex-direction:column;align-items:center;text-align:center;width:min(560px,94vw);
  animation:pvpFinIn .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes pvpFinIn{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
#pvp-content .pvp-fin-tag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:#8a8a98;margin-bottom:12px}
#pvp-content .pvp-fin-res{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1;color:#efeef5;position:relative;padding-bottom:16px}
#pvp-content .pvp-fin-res::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:38px;height:3px;border-radius:2px}
#pvp-content .pvp-fin.win .pvp-fin-res::after{background:#57dc8c}
#pvp-content .pvp-fin.lose .pvp-fin-res::after{background:#ff6b6b}
#pvp-content .pvp-fin.draw .pvp-fin-res::after{background:#c9c9d4}   /* empate: neutro, ni verde ni rojo */
/* marcador centrado, bajo el resultado (no en medio de las cartas → menos «desordenado») */
#pvp-content .pvp-fin-score{font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;color:#efeef5;margin-top:18px}
#pvp-content .pvp-fin-score span{color:#565664;font-weight:500;margin:0 6px}
/* cuerpo: los dos paneles (carta+nombre+stats) centrados, lado a lado, alineados arriba */
#pvp-content .pvp-fin-body{display:flex;align-items:flex-start;justify-content:center;gap:26px;margin-top:24px}
#pvp-content .pvp-fin-side{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto;width:148px}
#pvp-content .pvp-fin-card{width:82px;aspect-ratio:367/512;border-radius:7px;object-fit:cover;
  box-shadow:0 8px 22px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.09)}
#pvp-content .pvp-fin-card.ph{background:#1a1a24}
#pvp-content .pvp-fin-side.me .pvp-fin-card{box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 1px rgba(77,171,255,.4)}
#pvp-content .pvp-fin-side.opp .pvp-fin-card{box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 1px rgba(255,107,107,.4)}
#pvp-content .pvp-fin-pname{font-size:13.5px;font-weight:700;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pvp-content .pvp-fin-side.me .pvp-fin-pname{color:#4dabff}
#pvp-content .pvp-fin-side.opp .pvp-fin-pname{color:#ff6b6b}
/* stats en CAJAS (estilo TCG Live): etiqueta arriba + valor en caja, todo centrado */
#pvp-content .pvp-fin-stats{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:2px}
#pvp-content .pvp-fin-stats .st{display:flex;flex-direction:column;align-items:center;gap:4px}
#pvp-content .pvp-fin-stats .st span{font-size:9.5px;line-height:1.25;letter-spacing:.05em;text-transform:uppercase;
  color:#8a8a98;font-weight:600;min-height:24px;display:flex;align-items:flex-end}
#pvp-content .pvp-fin-stats .st b{font-size:19px;font-weight:750;color:#efeef5;font-variant-numeric:tabular-nums;width:100%;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:5px 0}
#pvp-content .pvp-fin-meta{font-size:13px;color:#8a8a98;margin-top:20px}
#pvp-content .pvp-fin-btns{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;margin-top:30px}
#pvp-content .pvp-fin-btns .pvp-opt{width:100%}
/* Apoyo solo al terminar una partida online: una invitación tranquila tras haber recibido
   valor, nunca un pop-up ni una interrupción durante el juego. */
#pvp-content .pvp-fin-support{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 7px;width:100%;max-width:420px;
  margin-top:18px;text-decoration:none;font-size:11.5px;line-height:1.4;color:#8a8a98;transition:color .15s}
#pvp-content .pvp-fin-support b{color:#e3a765;font-weight:700}
#pvp-content .pvp-fin-support:hover{color:#c3c3ce}
#pvp-content .pvp-fin-support:hover b{color:#f3cd93;text-decoration:underline;text-underline-offset:3px}
@media (max-width:520px){
  #pvp-content .pvp-fin-body{gap:14px}
  #pvp-content .pvp-fin-side{width:130px}
  #pvp-content .pvp-fin-card{width:68px}
}
html.pb-reduce-motion #pvp-content .pvp-fin{animation:none}

/* ══ VS = CORTINA de TRANSICIÓN (no un overlay-pantalla): dos mitades HORIZONTALES —
   RIVAL arriba (rojo), YO abajo (azul, = zonas del tablero) — que CIERRAN sobre la búsqueda,
   sostienen avatares+«VS», y ABREN revelando el tablero ya cargado debajo (transición real,
   fondo negro por debajo). La moneda va DESPUÉS, ya en el tablero. Bajo la nav (top:48px). ══ */
#pvp-vs-curtain{position:fixed;top:48px;left:0;right:0;bottom:0;z-index:99992;overflow:hidden;pointer-events:none}
#pvp-vs-curtain .cur-half{position:absolute;left:0;right:0;height:50%;display:flex;justify-content:center}
/* bandas METÁLICAS (petición Daniel: menos planas): color rico + veta metálica sutil + sheen
   diagonal + borde/glow luminoso en la costura donde se juntan */
#pvp-vs-curtain .cur-half.top{top:0;transform:translateY(-100%);align-items:flex-end;padding-bottom:74px;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 2px, transparent 2px 7px),
    linear-gradient(125deg, rgba(255,255,255,.09), transparent 32%, transparent 68%, rgba(0,0,0,.22)),
    linear-gradient(180deg, #7a2536, #3f131d 60%, #230a0e);
  box-shadow:inset 0 -1.5px 0 rgba(255,175,185,.5), inset 0 -38px 66px -34px rgba(255,95,115,.45)}
#pvp-vs-curtain .cur-half.bottom{bottom:0;transform:translateY(100%);align-items:flex-start;padding-top:74px;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 2px, transparent 2px 7px),
    linear-gradient(125deg, rgba(255,255,255,.09), transparent 32%, transparent 68%, rgba(0,0,0,.22)),
    linear-gradient(0deg, #143053, #0b1730 60%, #060c17);
  box-shadow:inset 0 1.5px 0 rgba(160,195,255,.5), inset 0 38px 66px -34px rgba(70,125,255,.45)}
/* UNA sola animación cierra→settle→hold→abre, sincronizada al mp3 (2,9s): slam ~25,6%≈780ms,
   hold, ABRE 79-100% (≈2410-3050ms) = coincide con la COLA del sonido (Daniel: «terminar con el
   sonido» y no abrir en cuanto sale el VS). */
/* 3,7 s desde 2026-08-15 (+1 s de sostén para ver los EMBLEMAS): mismos instantes absolutos
   de cierre (~780ms) y asentado; ABRE en 88-100% (≈3270-3700ms). El mp3 (2,9s) ya ha acabado
   cuando abre: el sostén extra es en silencio, a propósito. */
#pvp-vs-curtain.run .cur-half.top{animation:pvpCurTop 3.7s forwards}
#pvp-vs-curtain.run .cur-half.bottom{animation:pvpCurBot 3.7s forwards}
@keyframes pvpCurTop{
  0%{transform:translateY(-100%);animation-timing-function:cubic-bezier(.4,0,.14,1)}
  21.2%{transform:translateY(0);animation-timing-function:ease-out}
  23.7%{transform:translateY(-2.2%);animation-timing-function:ease-in}
  26.3%{transform:translateY(0)}
  88.3%{transform:translateY(0);animation-timing-function:cubic-bezier(.45,0,.7,.35)}
  100%{transform:translateY(-100%)}}
@keyframes pvpCurBot{
  0%{transform:translateY(100%);animation-timing-function:cubic-bezier(.4,0,.14,1)}
  21.2%{transform:translateY(0);animation-timing-function:ease-out}
  23.7%{transform:translateY(2.2%);animation-timing-function:ease-in}
  26.3%{transform:translateY(0)}
  88.3%{transform:translateY(0);animation-timing-function:cubic-bezier(.45,0,.7,.35)}
  100%{transform:translateY(100%)}}
/* shake sutil (tipo impacto, no golpe duro) en el clash del sonido */
#pvp-vs-curtain.shake{animation:pvpCurShake .28s ease}
@keyframes pvpCurShake{0%,100%{transform:translate(0,0)}18%{transform:translate(-4px,2px)}38%{transform:translate(3px,-3px)}58%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
/* avatares a un PUNTO MEDIO del centro (no chocan con el «VS»). Entrada ÉPICA pero SMOOTH tras
   el slam (Daniel): CONVERGEN hacia el centro (el de arriba baja, el de abajo sube) con escala +
   fade + un halo que respira, escalonados. */
#pvp-vs-curtain .pvp-vs-in{display:flex;flex-direction:column;align-items:center;gap:11px;opacity:0}
#pvp-vs-curtain.run .cur-half.top .pvp-vs-in{animation:pvpAvaTop .62s cubic-bezier(.16,.84,.3,1) .86s both}
#pvp-vs-curtain.run .cur-half.bottom .pvp-vs-in{animation:pvpAvaBot .62s cubic-bezier(.16,.84,.3,1) .96s both}
@keyframes pvpAvaTop{0%{opacity:0;transform:translateY(-34px) scale(.86)}60%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pvpAvaBot{0%{opacity:0;transform:translateY(34px) scale(.86)}60%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
#pvp-vs-curtain.run .pvp-vs-ava{animation:pvpAvaGlow 2.4s ease-in-out 1.5s infinite}
@keyframes pvpAvaGlow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 10px rgba(255,255,255,.28))}}
#pvp-vs-curtain .pvp-vs-ava{width:90px;height:90px;border-radius:50%;object-fit:cover;background:#1a1a24;
  display:grid;place-items:center;font-size:36px;font-weight:800;color:#fff}
#pvp-vs-curtain .cur-half.top .pvp-vs-ava{box-shadow:0 0 0 3px rgba(255,107,107,.85),0 10px 30px rgba(0,0,0,.5)}
#pvp-vs-curtain .cur-half.bottom .pvp-vs-ava{box-shadow:0 0 0 3px rgba(77,171,255,.85),0 10px 30px rgba(0,0,0,.5)}
#pvp-vs-curtain .pvp-vs-name{font-size:21px;font-weight:800;letter-spacing:-.01em;max-width:72vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
#pvp-vs-curtain .cur-half.top .pvp-vs-name{color:#ff8a8a}
#pvp-vs-curtain .cur-half.bottom .pvp-vs-name{color:#7dc0ff}
/* EMBLEMAS equipados de cada jugador (Maestría Pokémon, hasta 3): fila bajo el nombre; entran
   escalonados tras el avatar y reciben un destello (misma clase md-glow del Perfil). Al ser la
   mitad de ARRIBA la del rival, sus emblemas quedan pegados a la costura (align flex-end). */
#pvp-vs-curtain .pvp-vs-embs{display:flex;gap:12px;justify-content:center;min-height:0;margin-top:4px}
#pvp-vs-curtain .pvp-vs-embs:empty{display:none}
#pvp-vs-curtain .pvp-vs-emb{width:84px;opacity:0;transform:translateY(10px) scale(.9)}
#pvp-vs-curtain.run .pvp-vs-emb{animation:pvpEmbIn .5s cubic-bezier(.16,.84,.3,1) both}
#pvp-vs-curtain.run .pvp-vs-emb:nth-child(1){animation-delay:1.25s}
#pvp-vs-curtain.run .pvp-vs-emb:nth-child(2){animation-delay:1.36s}
#pvp-vs-curtain.run .pvp-vs-emb:nth-child(3){animation-delay:1.47s}
@keyframes pvpEmbIn{0%{opacity:0;transform:translateY(10px) scale(.9)}100%{opacity:1;transform:none}}
#pvp-vs-curtain .pvp-vs-emb .md-plate{font-size:8px;letter-spacing:1.1px}
/* el destello del metal (md-glow) recorre cada emblema una vez al aparecer */
#pvp-vs-curtain.run .pvp-vs-emb .md-fr{animation:md-glint 1.4s cubic-bezier(.4,0,.2,1) 1.9s 1}
#pvp-vs-curtain.run .pvp-vs-emb:nth-child(2) .md-fr{animation-delay:2.05s}
#pvp-vs-curtain.run .pvp-vs-emb:nth-child(3) .md-fr{animation-delay:2.2s}
/* pantallas bajas (móvil apaisado / portátiles chicos): emblemas menores y sin placa */
@media (max-height:720px){
  #pvp-vs-curtain .cur-half.top{padding-bottom:52px}
  #pvp-vs-curtain .cur-half.bottom{padding-top:52px}
  #pvp-vs-curtain .pvp-vs-ava{width:70px;height:70px;font-size:28px}
  #pvp-vs-curtain .pvp-vs-emb{width:62px}
  #pvp-vs-curtain .pvp-vs-emb .md-fr{padding-bottom:5px}
  #pvp-vs-curtain .pvp-vs-emb .md-plate{display:none}
  #pvp-vs-curtain .pvp-vs-emb .md-fr::before{bottom:5px}
}
/* «VS»: oculto hasta que ESTALLA en el clash principal del sonido (~1460ms, .burst) */
#pvp-vs-curtain .cur-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;
  font-size:clamp(56px,13vw,124px);font-weight:900;font-style:italic;letter-spacing:-.04em;line-height:1;color:#fff;
  text-shadow:0 6px 26px rgba(0,0,0,.6),0 0 50px rgba(255,209,102,.4)}
#pvp-vs-curtain .cur-vs.burst{animation:pvpVsBurst .5s cubic-bezier(.2,1.5,.35,1) forwards}
@keyframes pvpVsBurst{0%{transform:translate(-50%,-50%) scale(2.4) rotate(-8deg);opacity:0}
  55%{transform:translate(-50%,-50%) scale(.92) rotate(0);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@media (max-width:520px){
  #pvp-vs-curtain .pvp-vs-ava{width:74px;height:74px;font-size:29px}
  #pvp-vs-curtain .pvp-vs-name{font-size:17px}
  #pvp-vs-curtain .cur-half.top{padding-bottom:58px}
  #pvp-vs-curtain .cur-half.bottom{padding-top:58px}
}
html.pb-reduce-motion #pvp-vs-curtain.run .cur-half{animation:none}
html.pb-reduce-motion #pvp-vs-curtain .cur-vs.burst{animation:none;opacity:1;transform:translate(-50%,-50%) scale(1)}

/* Aceleración del fondo de pokéballs (transición continua búsqueda→VS; sin jump-cut): la capa
   hace zoom-in + brillo mientras la cortina cierra encima (la deriva del ::before sigue) */
#pvp-content .pvp-pokeballs.pvp-warp{animation:pvpWarp .85s cubic-bezier(.4,0,.7,1) forwards}
@keyframes pvpWarp{from{transform:scale(1);opacity:.06}to{transform:scale(1.9);opacity:.16}}
html.pb-reduce-motion #pvp-content .pvp-pokeballs.pvp-warp{animation:none}

/* Moneda «quién empieza» YA en el TABLERO (tras abrirse el VS). 50% más grande. Cada jugador
   ve si va PRIMERO (azul) o SEGUNDO (rojo). Bajo la nav (top:48px). */
#pvp-board-coin{position:fixed;top:48px;left:0;right:0;bottom:0;z-index:99991;display:flex;align-items:center;justify-content:center;
  background:rgba(6,6,12,.42);opacity:0;transition:opacity .3s}
#pvp-board-coin.show{opacity:1}
#pvp-board-coin .pbc-col{display:flex;flex-direction:column;align-items:center;gap:20px}
#pvp-board-coin .pbc-label{font-size:32px;font-weight:850;letter-spacing:-.01em;opacity:0;transform:translateY(8px);
  transition:opacity .3s,transform .3s}
#pvp-board-coin .pbc-label.show{opacity:1;transform:none}

/* ══ «Jugar online» con la textura METÁLICA de las bandas del VS (petición Daniel):
   veta + sheen + borde/glow luminoso, dorado (play premium). ══
   OJO: esta textura es SOLO de este botón. «Activar mazo» la tenía y Daniel la quitó
   (2026-08-12): vive en mazos-view.css con el material neutro del resto de la app. */
#view-jugar .jv-arow:not(.jv-soon){
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 7px),
    linear-gradient(125deg, rgba(255,255,255,.32), transparent 34%, transparent 66%, rgba(0,0,0,.16)),
    linear-gradient(180deg, #ffe694, #f2b13a) !important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.65), inset 0 -3px 9px rgba(120,80,10,.3), 0 7px 24px -8px rgba(255,200,80,.55)}
#view-jugar .jv-arow:not(.jv-soon):hover{filter:brightness(1.07) saturate(1.05)}

/* Contadores «en línea / en partida» del hub (Daniel: online siempre visible). Solo modos online. */
#view-jugar .jv-online{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:11px;
  font-size:13px;color:var(--jv-muted)}
#view-jugar .jv-online.jv-hide{display:none}
#view-jugar .jv-online b{color:#eaeaf2;font-weight:750;font-variant-numeric:tabular-nums;margin:0 1px}
#view-jugar .jv-online .jv-osep{opacity:.4;margin:0 2px}
#view-jugar .jv-online .jv-live-dot{width:8px;height:8px;border-radius:50%;background:var(--jv-live);
  box-shadow:0 0 8px rgba(87,220,140,.8);animation:jvLiveDot 2s ease-in-out infinite}
@keyframes jvLiveDot{0%,100%{opacity:1}50%{opacity:.4}}
html.pb-reduce-motion #view-jugar .jv-online .jv-live-dot{animation:none}

/* Búsqueda de la COLA de Draft online (en el overlay del lobby de draft-multi) */
#dr-lobby-content .dr-qsearch{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:14px 4px 6px}
#dr-lobby-content .dr-qonline{display:flex;align-items:center;gap:7px;font-size:13px;color:#9a9aa8}
#dr-lobby-content .dr-qonline b{color:#eaeaf2;font-weight:750;font-variant-numeric:tabular-nums}
#dr-lobby-content .dr-qsep{opacity:.4}
#dr-lobby-content .dr-qdot{width:8px;height:8px;border-radius:50%;background:#57dc8c;box-shadow:0 0 8px rgba(87,220,140,.8);animation:jvLiveDot 2s ease-in-out infinite}
/* opciones secundarias del hub = BOTONES de verdad (Daniel: reutilizar el botón «jugar con un
   amigo» del draft, ya no un texto). Estándar = 1; Draft = 2 (amigo · solo). */
#view-jugar .jv-friend{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:14px}
#view-jugar .jv-friend .jv-fk{cursor:pointer;color:#cbcbd8;font-weight:640;font-size:13.5px;
  padding:10px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);
  transition:background .15s,border-color .15s,color .15s,transform .12s}
#view-jugar .jv-friend .jv-fk:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
#view-jugar .jv-friend .jv-fk:active{transform:scale(.97)}
#view-jugar .jv-friend .jv-fkdot{display:none}

/* ── Draft: el SOBRE en el hub (en vez del selector de mazo) — Tanda A ── */
/* Héroe de altura FIJA → el botón NO se mueve entre modos. */
#view-jugar .jv-hero{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:340px; overflow:visible}
#view-jugar .jv-hero .jv-name{margin:0 0 12px}   /* nombre ARRIBA del mazo (antes iba debajo) */
/* El sobre es tan ANCHO como el mazo; su parte inferior (lo que sobra por ser más alto) queda
   RECORTADA tras el botón. Flota en idle sin asomar nunca por debajo (el recorte lo garantiza). */
/* 👇 TAMAÑO DEL SOBRE: cambia SOLO este número. 1 = máximo, 0.85 = medio, 0.7 = pequeño. */
#view-jugar .jv-pack-stage{--pack-scale:0.89;   /* 238px × 0.89 = el ancho de siempre (212) */
  position:relative; width:220px; max-width:64vw; height:300px;   /* alto VISIBLE ≈ mazo (este alto es el que ocupa en la página: NO tocarlo, mueve el botón) */
  margin:0 auto -36px;                                            /* solapa el botón → el corte de abajo queda TRAS él */
  clip-path:inset(-80px -90px 0 -90px)}                           /* recorta SOLO por abajo: los lados, la sombra y lo que asoma por arriba se ven enteros */
#view-jugar .jv-pack-stage.jv-hide,
#view-jugar #jv-deckstage.jv-hide,
#view-jugar #jv-name.jv-hide{display:none}
/* top NEGATIVO: el sobre asoma 14px por ENCIMA de su caja para que la insignia «DRAFT» quede
   entera sobre el botón sin que la caja crezca (si creciera, el bloque centrado bajaría el botón).
   14 + los 6 del vaivén = los 20px de aire que hay sobre la caja en el móvil más bajo: ahí queda
   a ras de la barra de arriba, nunca cortado. */
#view-jugar .jv-pack-stage .dr-pack{margin:0 !important;
  position:absolute; left:50%; top:-14px;
  transform:translateX(-50%) scale(var(--pack-scale)); transform-origin:top center;
  animation:jvPackFloat 3.8s ease-in-out infinite; cursor:default}
@keyframes jvPackFloat{
  0%,100%{transform:translateX(-50%) translateY(0) scale(var(--pack-scale))}
  50%{transform:translateX(-50%) translateY(-6px) scale(var(--pack-scale))}}
#view-jugar.jv-exiting .jv-pack-stage .dr-pack{animation-play-state:paused}   /* congela el float en la salida */
html.pb-reduce-motion #view-jugar .jv-pack-stage .dr-pack{animation:none}
#view-jugar .jv-pack-stage .dr-cut-hint{display:none}
/* el botón tapa la parte inferior del sobre → el z-index vive en .jv2-shell (regla principal) */
/* salida de la UI del hub al pulsar «Jugar online» (el sobre NO se desvanece: viaja) */
#view-jugar.jv-exiting #jv-name,
#view-jugar.jv-exiting .jv2-shell,
#view-jugar.jv-exiting #jv-online,
#view-jugar.jv-exiting .jv2-secrow{opacity:0; transform:translateY(16px); transition:opacity .26s ease, transform .26s ease}

/* ══════════════════════════════════════════════════════════════
   DIRECCIÓN LATERAL · hextech (doble marco + brackets) sobre pokéballs.
   Paneles y sus botones = angular/oro; cluster de acción del centro
   (Jugar / online / partida privada) = redondeado suave.
   ══════════════════════════════════════════════════════════════ */
#view-jugar .jv2-stage{position:relative; z-index:2; flex:1; display:grid;
  grid-template-columns:322px 380px 322px; column-gap:84px; row-gap:0; justify-content:center; align-items:start; align-content:safe center;
  padding:36px 24px 12px; overflow:auto;
  --au:#c8aa6e; --au2:#f4dfa8; --jtx:#efe7d2; --jmut:#948d73; --jlive:#5fdc93}
#view-jugar .jv-hide{display:none !important}
/* columnas fijadas a mano: el aviso legal va en la fila 2 y así nada se le cuela */
#view-jugar .jv2-colmeta{grid-column:1; grid-row:1}
#view-jugar .jv2-center{grid-column:2; grid-row:1}
#view-jugar .jv2-colexp{grid-column:3; grid-row:1}

/* panel = tarjeta NEUTRA (lenguaje del selector de modos; fuera el oro/brackets — Daniel 2026-08-08).
   540px, un pelín más bajo que el corebox (584) y CENTRADO sobre él (margin-top 22 = (584-540)/2). */
#view-jugar .jv2-panel{position:relative; height:540px; margin-top:22px; display:flex; flex-direction:column; text-align:left;
  background:linear-gradient(180deg,rgba(22,22,31,.92),rgba(13,13,20,.96)); border:1px solid rgba(255,255,255,.13); border-radius:18px;
  box-shadow:0 24px 54px -24px #000}
#view-jugar .jv2-panel > *{position:relative; z-index:1}

/* cabecera: título con peso + «Ver todo ›» a la derecha (sustituye a los botones inferiores) */
#view-jugar .jv2-ph{display:flex; align-items:center; gap:10px; padding:17px 18px 13px; flex:none}
#view-jugar .jv2-k{font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:830; color:#e7e7f0}
/* «Ver todo ›» = chip mínimo: pill tenue que se enciende al hover, chevrón que se desliza */
#view-jugar .jv2-vt{margin-left:auto; display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  font-family:inherit; font-size:10.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:#a2a2b2;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 12px;
  transition:color .15s, background .15s, border-color .15s}
#view-jugar .jv2-vt:hover{color:#fff; background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.24)}
#view-jugar .jv2-vtc{font-size:13px; line-height:1; margin-top:-1px; transition:transform .18s}
#view-jugar .jv2-vt:hover .jv2-vtc{transform:translateX(2px)}

/* mejores mazos = BANDAS-BANNER (A v2): arte del mazo de fondo + scrim + franja de acento
   por energía (--a, EL_COLORS); la banda entera abre el mazo en Meta. Sin «Activar». */
#view-jugar .jv2-bands{flex:1; display:flex; flex-direction:column; justify-content:space-evenly; padding:2px 15px 4px}
#view-jugar .jv2-band{position:relative; height:118px; border-radius:14px; overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,255,255,.11); transition:border-color .2s, transform .18s, box-shadow .22s}
/* hover con algo más de acento (como las tarjetas de modo): borde + glow del color del mazo */
#view-jugar .jv2-band:hover{border-color:color-mix(in srgb,var(--a) 60%,transparent); transform:translateY(-2px);
  box-shadow:0 12px 30px -14px color-mix(in srgb,var(--a) 55%,#000), inset 0 0 0 1px color-mix(in srgb,var(--a) 22%,transparent)}
#view-jugar .jv2-bart{position:absolute; inset:0; background-position:center 24%; background-size:135% auto; background-repeat:no-repeat; background-color:#12121a}
/* scrim algo MÁS ligero (Daniel: bajar el oscurecimiento un poco) */
#view-jugar .jv2-bscrim{position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(7,7,12,.88) 30%,rgba(7,7,12,.44) 62%,rgba(7,7,12,.14)),linear-gradient(180deg,rgba(7,7,12,.10),rgba(7,7,12,.34));
  box-shadow:inset 4px 0 0 var(--a)}
#view-jugar .jv2-bin{position:relative; display:flex; align-items:center; gap:11px; height:100%; padding:0 14px 0 16px}
#view-jugar .jv2-brk{width:23px; height:23px; border-radius:7px; display:grid; place-items:center; font-weight:800; font-size:12px; flex:none;
  color:#cfcfda; background:rgba(10,10,16,.7); border:1px solid rgba(255,255,255,.2)}
#view-jugar .jv2-brk.t{background:#eef0f6; color:#14141c; border-color:transparent}
#view-jugar .jv2-binfo{min-width:0}
#view-jugar .jv2-bt{display:block; font-size:14.5px; font-weight:790; color:#f2f2f8; line-height:1.2; text-shadow:0 1px 8px rgba(0,0,0,.85)}
#view-jugar .jv2-bs{display:block; font-size:11.5px; color:rgba(226,226,238,.75); margin-top:4px; text-shadow:0 1px 6px rgba(0,0,0,.85)}
/* frescura del meta = MISMA píldora que la de «en línea» (Daniel 2026-08-13):
   mismo shape/tamaño/tipografía, en tono neutro (no es un indicador «en vivo»),
   y ALINEADA A LA IZQUIERDA con el padding del panel (18px), no centrada. */
#view-jugar .jv2-freshrow{flex:none; display:flex; justify-content:flex-start; padding:2px 18px 13px}
#view-jugar .jv2-fresh{font:600 11px/1 system-ui,sans-serif; letter-spacing:.02em; color:#9a9aa6; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.045)}
#view-jugar .jv2-fresh::before{content:""; width:6px; height:6px; border-radius:50%; background:#6f6f7c; flex:none}

/* centro */
#view-jugar .jv2-center{display:flex; flex-direction:column; align-items:center}
/* corebox = MISMA altura que los paneles → el borde inferior del botón JUGAR queda
   alineado con el de los paneles; el nombre del mazo se centra en el hueco libre
   (flex:1) con min-height que garantiza que el spread del hover (21px) no lo tape. */
#view-jugar .jv2-corebox{height:584px; width:100%; display:flex; flex-direction:column; align-items:center}
#view-jugar .jv2-stage.jv2-draft .jv2-corebox{height:auto}   /* en Elección: bloque compacto centrado */
#view-jugar .jv2-hero{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end}
#view-jugar .jv2-dwrap{position:relative; display:flex; flex-direction:column; align-items:center; cursor:pointer; padding:6px 0 2px}
#view-jugar .jv2-halo{position:absolute; width:296px; height:296px; top:-24px; left:50%; transform:translateX(-50%); z-index:0; border-radius:50%;
  background:radial-gradient(circle,rgba(168,178,220,.26),transparent 62%); filter:blur(24px); opacity:.55; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease}
#view-jugar #jv-deckstage:hover .jv2-halo{opacity:.85; transform:translateX(-50%) scale(1.06)}
#view-jugar .jv2-center .jv-deck-wrap{position:relative; z-index:1; width:var(--jv-deckw)}
/* nombre del mazo ARRIBA (Daniel 2026-08-08); es la misma affordance que el mazo →
   clicable, con icono ⇄ sutil (cambiar mazo / Mis Mazos) que se enciende al hover */
#view-jugar .jv2-dn{font-size:16px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; margin:2px 0 16px; text-align:center; color:#eef0f6;
  flex:none; display:flex; align-items:center; gap:8px; cursor:pointer}
#view-jugar .jv2-dn:hover{color:#fff}
#view-jugar .jv2-dnic{display:inline-flex; opacity:.38; transition:opacity .18s, transform .18s}
#view-jugar .jv2-dnic svg{width:15px; height:15px; fill:currentColor; display:block}
#view-jugar .jv2-dn:hover .jv2-dnic{opacity:.95; transform:translateX(1px)}
#view-jugar .jv2-dn.jv2-dn-welcome{display:none}
#view-jugar .jv-welcome-preparing{color:#8d8d9b; font-size:11.5px; font-weight:650; letter-spacing:.02em; text-transform:none}

/* Confirmación única tras recibir la baraja: mismo cristal global, con el stack real. */
.pb-welcome-modal{width:min(560px,92vw); max-width:92vw; display:grid; grid-template-columns:142px minmax(0,1fr); align-items:center;
  gap:27px; padding:26px 27px}
.pb-welcome-stack{width:132px; justify-self:center; position:relative}
.pb-welcome-stack .mz-stack{width:100%; margin:0}
.pb-welcome-stack::after{content:""; position:absolute; inset:0; z-index:4; opacity:0; pointer-events:none; border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:#171720 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Crect x='15' y='12' width='29' height='39' rx='4' fill='none' stroke='%239898a8' stroke-width='2'/%3E%3Cpath d='M11 17v30a4 4 0 0 0 4 4M30 23v17M21.5 31.5h17' fill='none' stroke='%239898a8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/44% no-repeat}
.pb-welcome-stack.pb-welcome-stack-fallback .mz-stack{opacity:0}
.pb-welcome-stack.pb-welcome-stack-fallback::after{opacity:.46}
.pb-welcome-content{min-width:0; display:flex; flex-direction:column; gap:13px}
.pb-welcome-modal .pb-modal-title{font-size:16px; font-weight:680; color:#f1f1f6}
.pb-welcome-deckname{font:780 21px/1.18 system-ui,sans-serif; letter-spacing:-.02em; color:#fff; text-wrap:balance}
.pb-welcome-modal .pb-modal-msg{margin:0; color:rgba(238,238,246,.58); font-size:12.5px; line-height:1.58}
.pb-welcome-modal .pb-modal-actions{margin-top:2px; flex-wrap:wrap}
.pb-welcome-modal .pb-btn{min-height:44px}
@media (max-width:520px){
  .pb-welcome-modal{width:min(352px,91vw); grid-template-columns:88px minmax(0,1fr); gap:18px; padding:22px 20px}
  .pb-welcome-stack{width:82px}
  .pb-welcome-content{gap:10px}
  .pb-welcome-deckname{font-size:18px}
  .pb-welcome-modal .pb-modal-actions{display:grid; grid-template-columns:1fr; width:100%}
  .pb-welcome-modal .pb-btn{width:100%}
}
@media (max-width:360px){
  .pb-welcome-modal{grid-template-columns:1fr; text-align:center}
  .pb-welcome-stack{width:72px}
  .pb-welcome-modal .pb-modal-actions{justify-content:center}
}
html.pb-reduce-motion #view-jugar .jv-welcome-deck,
html.pb-reduce-motion #view-jugar .jv-welcome-spinner{animation:none}
/* el hueco flexible vive AHORA entre el mazo y el botón (nombre arriba) — y da sitio al spread */
#view-jugar .jv2-corebox .jv2-hero{margin-bottom:auto}
/* Jugar online = redondeado (como antes) */
#view-jugar .jv2-shell{position:relative; z-index:3;   /* POR DELANTE del sobre del draft (su corte inferior queda detrás) */
  margin-top:12px; width:348px; max-width:84vw; overflow:visible; border:1px solid rgba(255,255,255,.18); border-radius:15px; box-shadow:0 18px 40px -16px #000}
#view-jugar .jv2-mode{position:relative; display:flex; align-items:center; justify-content:center; gap:9px; padding:11px; font-weight:700; font-size:13px; letter-spacing:.03em; cursor:pointer;
  border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,#161a24,#0e1119); border-bottom:1px solid rgba(0,0,0,.45)}
#view-jugar .jv2-mdot{width:8px; height:8px; background:var(--jv-acc,var(--au)); box-shadow:0 0 0 3px color-mix(in srgb,var(--jv-acc,var(--au)) 22%,transparent)}
#view-jugar .jv2-chev{color:#9a9aa8; font-size:11px}
#view-jugar .jv2-play{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; font-weight:800; font-size:21px; letter-spacing:.05em; text-transform:uppercase; color:#171204; padding:19px; cursor:pointer;
  border-radius:0 0 14px 14px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.08) 0 2px,transparent 2px 7px),linear-gradient(125deg,rgba(255,255,255,.32),transparent 34%,transparent 66%,rgba(0,0,0,.16)),linear-gradient(180deg,var(--au2),#f2b13a);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -3px 9px rgba(90,60,10,.3)}
#view-jugar .jv2-play-label,#view-jugar .jv2-beta{position:relative; z-index:1}
#view-jugar .jv2-beta{display:inline-flex; align-items:center; min-height:18px; padding:2px 6px; border-radius:999px;
  font:800 8px/1 system-ui,sans-serif; letter-spacing:.11em; color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.18); background:rgba(18,16,12,.58); box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

/* ══ Racha de victorias — indicador de texto (hub + Fin PvP) ══
   Píldora del MISMO material que el resto de la web (cristal + borde de 1px), como la de
   «en línea»: «RACHA DE VICTORIAS · N». Sin icono — el texto ya lo dice. El número vira a
   azul a partir de 10 (maestría ×2). En el hub va DEBAJO del botón, en el flujo. */
#view-jugar .jv2-streak-host{display:flex; justify-content:center; margin-top:13px; pointer-events:none}
#view-jugar .jv2-streak-host[hidden]{display:none}
/* El bloque central mide LO MISMO con y sin racha: el hueco que la píldora ocupa arriba se
   descuenta de este pad del final. Así el mazo, el botón y los paneles no se recolocan
   cuando la racha aparece (el stage centra el conjunto verticalmente). */
#view-jugar .jv2-streak-pad{flex:none; height:var(--jv-streak-space,51px); pointer-events:none}
#view-jugar .jv2-center.jv2-has-streak .jv2-streak-pad{height:0}

.pb-streak{--sk-acc:#ffd166; --sk-acc2:#f2a93a; --sk-glow:rgba(255,209,102,.5);
  --sk-shadow:0 6px 18px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.17);
  position:relative; display:inline-flex; align-items:center; gap:9px; line-height:1;
  padding:7px 15px 8px 14px; border-radius:999px; overflow:hidden; white-space:nowrap;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:var(--sk-shadow)}
.pb-streak.is-blue{--sk-acc:#8fdcff; --sk-acc2:#3aa9ff; --sk-glow:rgba(90,190,255,.55)}
/* brillo que la recorre de vez en cuando (mismo gesto que el resto del cristal de la web) */
.pb-streak::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);
  background-size:300% 100%; animation:pbStreakSheen 7s ease-in-out infinite}
/* el rótulo lleva una corrección óptica: sin ella el texto queda alto respecto al número */
.pb-streak-cap{position:relative; top:.08em; font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; font-weight:800; color:#8a8a97; line-height:1}
.pb-streak-num{position:relative; display:inline-grid; justify-items:center; min-width:.62em;
  font-size:21px; font-weight:900; letter-spacing:-.02em; line-height:1}
.pb-streak-num>span{grid-area:1/1;
  background:linear-gradient(160deg,#fff,var(--sk-acc) 44%,var(--sk-acc2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 8px var(--sk-glow)); animation:pbStreakGlow 3.4s ease-in-out infinite}
/* entrada */
.pb-streak.is-enter{animation:pbStreakIn .46s cubic-bezier(.2,.85,.3,1) both}
/* subida de una victoria: el dígito rueda hacia arriba y el halo late una vez. Sutil: sin
   rebote ni escalones — solo desplazamiento corto, opacidad y un resplandor que se apaga. */
.pb-streak.is-bump{animation:pbStreakPulse .66s ease-out}
.pb-streak-num>span.is-in{animation:pbStreakDigitIn .42s cubic-bezier(.22,.8,.28,1) both,
  pbStreakGlow 3.4s ease-in-out .42s infinite}
.pb-streak-num>span.is-out{animation:pbStreakDigitOut .34s cubic-bezier(.4,0,.7,.4) both}
@keyframes pbStreakIn{from{opacity:0; transform:translateY(7px)}to{opacity:1; transform:none}}
@keyframes pbStreakGlow{0%,100%{filter:drop-shadow(0 0 7px var(--sk-glow))}
  50%{filter:drop-shadow(0 0 14px var(--sk-glow))}}
@keyframes pbStreakSheen{0%,60%{background-position:190% 0}100%{background-position:-95% 0}}
@keyframes pbStreakDigitIn{from{opacity:0; transform:translateY(.55em)}to{opacity:1; transform:none}}
@keyframes pbStreakDigitOut{from{opacity:1; transform:none}to{opacity:0; transform:translateY(-.55em)}}
@keyframes pbStreakPulse{0%{box-shadow:var(--sk-shadow), 0 0 17px 1px var(--sk-glow)}
  100%{box-shadow:var(--sk-shadow), 0 0 0 0 transparent}}

/* Fin PvP: la MISMA píldora, en grande, debajo del marcador. El slot no ocupa nada
   mientras no haya un resultado verificado. */
#pvp-content .pvp-fin-streak-slot{width:100%; height:0; overflow:hidden; margin:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  opacity:0; transition:opacity .28s ease; pointer-events:none}
#pvp-content .pvp-fin-streak-slot.is-active{height:auto; margin-top:12px; opacity:1}
.pvp-fin-streak-slot .pb-streak{gap:13px; padding:12px 22px 13px 20px}
.pvp-fin-streak-slot .pb-streak-cap{font-size:12.5px; letter-spacing:.16em}
.pvp-fin-streak-slot .pb-streak-num{font-size:31px}
.pb-streak-x2{font:800 10.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:.15em;
  text-transform:uppercase; color:#8fdcff; animation:pbStreakX2 .46s .1s cubic-bezier(.2,.85,.3,1) both}
.pb-streak-x2[hidden]{display:none}
@keyframes pbStreakX2{from{opacity:0; transform:translateY(-5px)}to{opacity:1; transform:none}}
html.pb-reduce-motion .pb-streak,html.pb-reduce-motion .pb-streak *{animation:none !important}


@media (max-width:520px){
  #view-jugar .jv2-streak-host{margin-top:11px}
  .pb-streak{gap:8px; padding:6px 13px 7px 12px}
  .pb-streak-cap{font-size:9.5px; letter-spacing:.13em}
  .pb-streak-num{font-size:19px}
  #pvp-content .pvp-fin-streak-slot.is-active{margin-top:9px}
  .pvp-fin-streak-slot .pb-streak{gap:11px; padding:10px 18px 11px 16px}
  .pvp-fin-streak-slot .pb-streak-cap{font-size:11px; letter-spacing:.13em}
  .pvp-fin-streak-slot .pb-streak-num{font-size:26px}
}
@media (max-height:740px){
  #pvp-content .pvp-fin-streak-slot.is-active{margin-top:6px}
  .pvp-fin-streak-slot .pb-streak{padding:10px 19px 11px 17px}
  .pvp-fin-streak-slot .pb-streak-num{font-size:27px}
  #pvp-content .pvp-fin-body{margin-top:14px}
  #pvp-content .pvp-fin-btns{margin-top:18px}
  #pvp-content .pvp-fin-support{margin-top:11px}
}
@media (prefers-reduced-motion:reduce){
  .pb-streak,.pb-streak *,.pb-streak::after,.pb-streak-x2{animation:none!important}
}
#view-jugar .jv2-play::after{content:""; position:absolute; top:0; left:-60%; width:36%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg); animation:jv2Shn 3.8s ease-in-out infinite}
@keyframes jv2Shn{0%,72%{left:-60%}86%{left:132%}100%{left:132%}}
#view-jugar .jv2-play.jv2-soon{cursor:default; color:#8d8770; background:linear-gradient(180deg,#2a2c34,#1e2028)}
#view-jugar .jv2-play.jv2-soon::after{display:none}
/* chip de online = pill VERDE redondeada */
/* el hub solo aporta el hueco; la píldora en sí es .pb-onpill (compartida con la cola) */
#view-jugar .jv2-online{margin-top:14px; display:flex; justify-content:center}
/* fila de secundarios: Estándar = «Partida privada»; Elección = «Partida privada» + «En solitario» */
#view-jugar .jv2-secrow{display:flex; gap:10px; align-items:center; justify-content:center; margin-top:14px}
/* botón SÓLIDO (Daniel 2026-08-08: nada de transparente) */
#view-jugar .jv2-friend{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:650; color:#c6c6d2; cursor:pointer; padding:9px 15px; border-radius:11px;
  border:1px solid rgba(255,255,255,.16); background:#1a1b26; transition:.15s}
#view-jugar .jv2-friend:hover{color:#fff; border-color:rgba(255,255,255,.3); background:#242534}
/* aviso legal: al FINAL DEL CONTENIDO, sin franja ni línea divisoria — texto tenue sobre el
   fondo del hub, que scrollea con lo demás. Se toca para leerlo entero en «Acerca de». */
#view-jugar .jv2-legal{grid-column:1 / -1; grid-row:2; align-self:end; text-align:center; cursor:default;
  margin:18px auto 0; max-width:900px; padding:0 8px;
  font-size:10px; line-height:1.5; color:#4e4e5a; text-wrap:balance; transition:color .15s}
#view-jugar .jv2-legal:hover{color:#75757f}
#view-jugar .jv2-friend svg{width:18px; height:18px; fill:currentColor}

/* última expansión: bocadillo REAL del draft (.dr-peek / .dr-peek-reel, mismo CSS) +
   sobre completo (reflejo sutil difuminado). El override sólo neutraliza el posicionado
   absoluto del draft para que el bocadillo viva dentro del panel; el look es el del draft. */
#view-jugar .jv-exp-peek{position:relative; left:auto; transform:none; width:auto; max-width:none; margin:10px 16px 0; z-index:3; flex:none;
  /* +sustancia: gradiente en vez de tinte plano, filo de luz arriba, pozo interior abajo y sombra a capas */
  background:linear-gradient(180deg, rgba(40,43,58,.88), rgba(21,23,34,.95));
  border-color:rgba(255,255,255,.17);
  box-shadow:0 16px 38px rgba(0,0,0,.55), 0 3px 9px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.13), inset 0 -14px 22px rgba(0,0,0,.3)}
#view-jugar .jv-exp-peek::after{border-top-color:rgb(31,33,46)}   /* la cola casa con el fondo nuevo */
/* margin-top 18 = hueco para la COLA del bocadillo (14px) → nunca pisa el sobre */
#view-jugar .jv2-packarea{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; min-height:0; margin-top:18px; padding-bottom:12px}
/* sobre ENTERO y protagonista (png con el fondo blanco eliminado → el drop-shadow sigue la
   SILUETA real). overflow:hidden = recorta el glint/holo a la caja del sobre. */
#view-jugar .jv2-mpack{--seam-y:14.9%;   /* línea de soldadura REAL de la imagen (medida: y=195/1307) */
  position:relative; width:164px; height:315px; overflow:hidden;
  background-position:center; background-size:contain; background-repeat:no-repeat;
  filter:drop-shadow(0 22px 32px rgba(0,0,0,.7)); animation:jv2Float 5.4s ease-in-out infinite}
@keyframes jv2Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* holo foil sutil del sobre del draft (misma banda diagonal, opacidad baja) */
#view-jugar .jv2-mpack::after{content:""; position:absolute; top:-30%; bottom:-30%; left:-28%; width:60px;
  transform:rotate(15deg); pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  animation:jv2Holo 5.2s ease-in-out infinite alternate}
@keyframes jv2Holo{from{left:-28%}to{left:88%}}
/* brillo puntual que RECORRE la línea de rotura (idéntico al dr-pack-seam-shine del draft:
   recorrido rápido + pausa larga), alineado a la soldadura real de la imagen */
#view-jugar .jv2-seamglint{position:absolute; top:calc(var(--seam-y) - 4px); left:0; width:44px; height:8px; z-index:2;
  border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center, #fff 0%, #fff 24%, rgba(255,255,255,.6) 46%, transparent 74%);
  box-shadow:0 0 12px 3px rgba(255,255,255,.8); filter:blur(.8px);
  animation:jv2SeamSweep 6s ease-in-out infinite}
@keyframes jv2SeamSweep{
  0%{transform:translateX(-46px); opacity:0}
  2%{opacity:1}
  25%{transform:translateX(166px); opacity:1}
  28%{transform:translateX(186px); opacity:0}
  100%{transform:translateX(186px); opacity:0}}
html.pb-reduce-motion #view-jugar .jv2-mpack::after,
html.pb-reduce-motion #view-jugar .jv2-seamglint{animation:none}
/* (el botón inferior «Ver todas las cartas» pasó a «Ver todo ›» en la cabecera — Daniel 2026-08-08) */

/* Elección (draft): oculta los laterales, centra el sobre del draft */
#view-jugar .jv2-stage.jv2-draft{grid-template-columns:1fr}
#view-jugar .jv2-stage.jv2-draft .jv2-panel{display:none}
#view-jugar .jv2-stage.jv2-draft .jv2-center{grid-column:1}
#view-jugar .jv2-stage.jv2-draft .jv2-legal{grid-column:1}

/* móvil: una columna con scroll (centro primero) */
@media (max-width:860px){
  /* `safe center`: centra mientras quepa, pero al desbordar se comporta como flex-start —
     con `center` a secas el contenido se sale por ARRIBA y esa parte era INALCANZABLE
     (el mazo activo quedaba cortado y el scroll ya estaba a 0). */
  #view-jugar .jv2-stage{display:flex; flex-direction:column; align-items:center; gap:20px;
    padding:20px 16px 24px; justify-content:safe center}
  #view-jugar .jv2-stage > *{flex:none}
  #view-jugar .jv2-center{order:-1; transform:none}
  /* mismo reparto que en escritorio, pero proporcional al mazo (no fijo) */
  #view-jugar .jv2-corebox{height:auto}
  #view-jugar .jv2-corebox .jv2-hero{margin-bottom:0}
  #view-jugar .jv2-dn{margin-bottom:calc(var(--jv-deckw) * .059)}
  #view-jugar .jv2-shell{margin-top:calc(var(--jv-deckw) * .222)}
  /* En Elección el centro NO es el mazo sino el SOBRE, y su corte inferior tiene que quedar
     TAPADO por el botón (por eso `.jv-pack-stage` lleva `margin-bottom:-36px`). El margin-top
     de arriba —pensado para el mazo— bajaba el botón y dejaba el corte del sobre a la vista. */
  #view-jugar .jv2-stage.jv2-draft .jv2-shell{margin-top:0}
  #view-jugar .jv2-panel{width:min(94vw,360px); height:auto; min-height:0; margin-top:0}


  /* el aviso legal, al final del scroll y a DOS líneas como mucho (ocupaba media pantalla) */
  #view-jugar .jv2-legal{margin:16px auto calc(4px + env(safe-area-inset-bottom,0px)); padding:0 8px;
    font-size:9.5px; line-height:1.45; cursor:pointer}
  #view-jugar .jv2-legal-t{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  /* tocarlo lo despliega entero aquí mismo */
  #view-jugar .jv2-legal.jv2-legal-open .jv2-legal-t{-webkit-line-clamp:unset; display:block}
}