/* ══════════════════════════════════════════════════════════════ 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.95; position:relative; width:220px; max-width:64vw; height:300px; /* alto VISIBLE ≈ mazo */ margin:0 auto -36px; overflow:hidden} /* recorta abajo, solapando el botón → el corte queda TRAS él */ #view-jugar .jv-pack-stage.jv-hide, #view-jugar #jv-deckstage.jv-hide, #view-jugar #jv-name.jv-hide{display:none} #view-jugar .jv-pack-stage .dr-pack{margin:0 !important; position:absolute; left:50%; top:12px; 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} }