/* Blackjack Digital — pantalla de victoria por BLACKJACK natural.
   Capa aparte: no toca la mesa, la ronda ni el saldo. Sólo muestra lo que el servidor ya liquidó. */
.bjf {
  --oro-1: #fff7cf; --oro-2: #ffd968; --oro-3: #e3a51f; --oro-4: #9c6410; --azul-1: #3cc4ff; --azul-2: #0b63db; --azul-3: #06205a;
  position: fixed; inset: 0; z-index: 120; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  font-family: 'Lexend', ui-rounded, system-ui, sans-serif; color: #fff; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(70% 38% at 50% 34%, rgba(46, 132, 255, .55), transparent 70%),
    radial-gradient(90% 40% at 50% 104%, rgba(20, 80, 200, .55), transparent 70%),
    radial-gradient(60% 30% at 0% 60%, rgba(0, 150, 255, .18), transparent 70%),
    radial-gradient(60% 30% at 100% 60%, rgba(0, 150, 255, .18), transparent 70%),
    linear-gradient(180deg, #020818 0%, #04173f 42%, #031236 70%, #010714 100%);
  opacity: 0; transition: opacity .28s ease;
}
.bjf.on { opacity: 1; }
.bjf.sale { opacity: 0; transition-duration: .22s; }
.bjf *, .bjf *::before, .bjf *::after { box-sizing: border-box; }

/* piso de mesa en perspectiva (decorativo) */
.bjf-piso { position: fixed; left: -20%; right: -20%; bottom: -8%; height: 48%; pointer-events: none;
  background:
    radial-gradient(50% 60% at 50% 30%, rgba(40, 110, 255, .35), transparent 70%),
    repeating-linear-gradient(90deg, rgba(120, 180, 255, .06) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(120, 180, 255, .05) 0 1px, transparent 1px 80px);
  transform: perspective(500px) rotateX(58deg); transform-origin: 50% 100%; opacity: .9; }
.bjf-rayos { position: fixed; left: 50%; top: 30%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 110, .16) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 18%, transparent 42%); mask: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 18%, transparent 42%);
  opacity: 0; transform: scale(.6); transition: opacity .8s ease .25s, transform 1s cubic-bezier(.2,.9,.3,1) .25s; animation: bjf-gira 38s linear infinite; }
.bjf.on .bjf-rayos { opacity: 1; transform: scale(1); }
@keyframes bjf-gira { to { rotate: 360deg; } }
.bjf-confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* columna */
.bjf-col { position: relative; z-index: 2; width: 100%; max-width: 460px; min-height: 100%; margin: 0 auto; overflow-x: clip;
  padding: calc(8px + env(safe-area-inset-top)) 18px calc(8px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; }

.bjf-logo { width: clamp(64px, min(20vw, 9.4vh), 112px); height: auto; filter: drop-shadow(0 6px 18px rgba(0, 120, 255, .55));
  opacity: 0; transform: translateY(-24px) scale(.8); animation: bjf-cae .6s cubic-bezier(.2,1.4,.4,1) .1s forwards; }

/* título */
.bjf-titulo { position: relative; margin-top: clamp(0px, 1vh, 8px); text-align: center; width: 100%; }
.bjf-corona { display: block; width: clamp(34px, 9vw, 44px); margin: 0 auto -6px; filter: drop-shadow(0 2px 6px rgba(255, 200, 60, .6));
  opacity: 0; transform: translateY(-10px) scale(.5); animation: bjf-pop .5s cubic-bezier(.2,1.6,.4,1) .55s forwards; }
.bjf-laurel { position: absolute; top: -10px; width: clamp(34px, 9vw, 46px); opacity: 0; filter: drop-shadow(0 2px 8px rgba(255, 190, 50, .5)); }
.bjf-laurel.izq { left: calc(50% - 30px - clamp(34px, 9vw, 46px)); transform: rotate(-18deg); animation: bjf-aparece .5s ease .6s forwards; }
.bjf-laurel.der { right: calc(50% - 30px - clamp(34px, 9vw, 46px)); transform: scaleX(-1) rotate(-18deg); animation: bjf-aparece .5s ease .6s forwards; }
.bjf-bj { margin: 0; line-height: .95; font-weight: 900; letter-spacing: -.035em; font-size: clamp(42px, min(15vw, 7.6vh), 78px); text-transform: uppercase;
  background: linear-gradient(100deg, transparent 0 40%, rgba(255,255,255,.95) 48%, transparent 56% 100%) , linear-gradient(180deg, var(--oro-1) 0%, var(--oro-2) 30%, var(--oro-3) 52%, #ffe488 66%, var(--oro-4) 100%);
  background-size: 260% 100%, 100% 100%; background-position: 130% 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #b97813) drop-shadow(0 4px 0 #6d4007) drop-shadow(0 10px 14px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(255, 196, 70, .45));
  opacity: 0; transform: scale(.25); animation: bjf-titulo .75s cubic-bezier(.18,1.5,.4,1) .3s forwards, bjf-brillo 2.8s ease-in-out 1.3s infinite; }
.bjf-ganaste { margin: 2px 0 0; font-weight: 800; font-size: clamp(28px, min(9.4vw, 5.2vh), 48px); letter-spacing: .01em; text-transform: uppercase; color: #f4f9ff;
  text-shadow: 0 2px 0 #1b56c9, 0 4px 0 #0a2a6e, 0 0 14px rgba(70, 170, 255, .95), 0 0 34px rgba(40, 120, 255, .7);
  opacity: 0; transform: translateY(18px); animation: bjf-sube .5s cubic-bezier(.2,1.3,.4,1) .7s forwards; }
@keyframes bjf-titulo { 0% { opacity: 0; transform: scale(.25); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes bjf-brillo { 0%, 55% { background-position: 130% 0, 0 0; } 100% { background-position: -30% 0, 0 0; } }

/* cartas + 21 */
.bjf-cartas { position: relative; width: 100%; height: clamp(128px, 19.5vh, 220px); margin-top: clamp(2px, .6vh, 12px); perspective: 900px; }
.bjf-halo { position: absolute; left: 50%; top: 52%; width: 120%; height: 90%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 210, 90, .5), rgba(255, 170, 40, .18) 45%, transparent 75%); opacity: 0; animation: bjf-aparece .8s ease .9s forwards; }
.bjf-anillo { position: absolute; left: 50%; top: 56%; width: 88%; height: 40%; transform: translate(-50%, -50%) rotateX(68deg); border-radius: 50%;
  border: 2px solid rgba(255, 214, 110, .75); box-shadow: 0 0 18px rgba(255, 196, 70, .8), inset 0 0 18px rgba(255, 196, 70, .6); pointer-events: none;
  opacity: 0; animation: bjf-aparece .6s ease 1s forwards, bjf-anillo 3.2s linear 1s infinite; }
@keyframes bjf-anillo { to { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(360deg); } }
.bjf-carta { position: absolute; top: 2%; width: auto; height: 88%; aspect-ratio: 144 / 180; transform-style: preserve-3d; opacity: 0; }
.bjf-carta.c0 { right: 50.5%; transform-origin: 90% 100%; --rot: -9deg; --dx: -60px; animation: bjf-reparte .7s cubic-bezier(.2,1.2,.4,1) .85s forwards; }
.bjf-carta.c1 { left: 50.5%; transform-origin: 10% 100%; --rot: 9deg; --dx: 60px; animation: bjf-reparte .7s cubic-bezier(.2,1.2,.4,1) 1s forwards; }
.bjf-carta .cara { position: absolute; inset: 0; border-radius: 9%/7%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 14px 28px rgba(0,0,0,.55), 0 0 0 2px rgba(255, 220, 130, .75), 0 0 26px rgba(255, 190, 60, .55); }
.bjf-carta .cara img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bjf-carta .dorso { transform: rotateY(180deg); }
.bjf-carta .giro { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); }
.bjf-carta.c0 .giro { animation: bjf-voltea .55s ease-out 1.2s forwards; }
.bjf-carta.c1 .giro { animation: bjf-voltea .55s ease-out 1.35s forwards; }
@keyframes bjf-reparte { 0% { opacity: 0; transform: translate(var(--dx), -140px) rotate(calc(var(--rot) * -3)) scale(.6); } 100% { opacity: 1; transform: translate(0, 0) rotate(var(--rot)) scale(1); } }
@keyframes bjf-voltea { to { transform: rotateY(0deg); } }
.bjf-21 { position: absolute; left: 50%; bottom: -8%; width: clamp(74px, 20vw, 96px); aspect-ratio: 1; transform: translateX(-50%) scale(0); z-index: 2;
  animation: bjf-21 .6s cubic-bezier(.2,1.7,.4,1) 1.65s forwards; }
.bjf-21 svg { position: absolute; inset: -22% -30% -10%; width: 160%; height: 132%; }
.bjf-21 .disco { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #173a7e, #06173e 70%) padding-box, conic-gradient(from 200deg, #fff2b5, #d99a1d, #fff0a0, #a8690f, #ffe486, #d99a1d, #fff2b5) border-box;
  border: 4px solid transparent; box-shadow: 0 8px 22px rgba(0,0,0,.6), 0 0 26px rgba(255, 196, 70, .65); }
.bjf-21 b { font-size: clamp(34px, 9.5vw, 46px); font-weight: 900; letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(180deg, var(--oro-1), var(--oro-2) 40%, var(--oro-3) 70%, #ffe488); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #6d4007); }
@keyframes bjf-21 { 0% { transform: translateX(-50%) scale(0) rotate(-40deg); } 100% { transform: translateX(-50%) scale(1) rotate(0); } }
.bjf-chispa { position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 12%, transparent 13%), conic-gradient(from 0deg, transparent 0 40deg, #fff6c8 45deg, transparent 50deg 130deg, #fff6c8 135deg, transparent 140deg 220deg, #fff6c8 225deg, transparent 230deg 310deg, #fff6c8 315deg, transparent 320deg);
  -webkit-mask: radial-gradient(circle, #000 0 45%, transparent 70%); mask: radial-gradient(circle, #000 0 45%, transparent 70%);
  animation: bjf-chispa 1.6s ease-in-out infinite; }
@keyframes bjf-chispa { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }

/* premio */
.bjf-premio { position: relative; width: 100%; margin-top: clamp(20px, 2.8vh, 34px); padding: clamp(12px, 1.8vh, 18px) 22px clamp(22px, 3vh, 28px); border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, rgba(10, 26, 66, .96), rgba(4, 13, 38, .97)) padding-box,
    linear-gradient(135deg, #fff1b0, #d99a1d 25%, #7a4e0c 50%, #ffd968 75%, #fff1b0) border-box;
  border: 2px solid transparent; box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 34px rgba(255, 190, 60, .28), inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0; transform: translateY(40px) scale(.94); animation: bjf-sube-card .6s cubic-bezier(.2,1.2,.4,1) 1.85s forwards; }
.bjf-premio .etq { font-size: clamp(13px, 3.8vw, 16px); font-weight: 700; letter-spacing: .2em; color: #ffd968; text-transform: uppercase; }
.bjf-monto { display: block; margin: 0 0 6px; font-weight: 900; font-size: clamp(34px, min(12vw, 6.2vh), 60px); letter-spacing: -.02em; line-height: 1.08; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--oro-1), var(--oro-2) 38%, var(--oro-3) 62%, #ffe488 80%, #c98a1b); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #7a4a08) drop-shadow(0 0 16px rgba(255, 196, 70, .45)); }
.bjf-monto.late { animation: bjf-late .45s ease; }
@keyframes bjf-late { 50% { transform: scale(1.08); } }
.bjf-fila { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: clamp(6px, 1vh, 9px) 2px; font-size: clamp(14px, 4.2vw, 18px);
  border-top: 1px solid rgba(255, 214, 110, .28); text-align: left; }
.bjf-fila span { color: #e6ecf7; } .bjf-fila b { font-weight: 700; color: #fff; white-space: nowrap; }
.bjf-fila.neto b { color: #ffd968; font-size: 1.08em; }
.bjf-fila.extra { font-size: clamp(12px, 3.6vw, 14px); } .bjf-fila.extra span, .bjf-fila.extra b { color: #b8c3d8; font-weight: 500; }
.bjf-ok { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%) scale(.6); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 8px 20px 8px 10px; border-radius: 999px; font-size: clamp(14px, 4vw, 16px); font-weight: 500; color: #fff;
  background: linear-gradient(180deg, #0c2a3a, #06182a); border: 1.5px solid rgba(46, 204, 113, .8); box-shadow: 0 0 16px rgba(46, 204, 113, .35), 0 6px 14px rgba(0,0,0,.5);
  opacity: 0; animation: bjf-ok .5s cubic-bezier(.2,1.6,.4,1) 3s forwards; }
.bjf-ok i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #3ee07f, #169c4c); box-shadow: 0 0 10px rgba(62, 224, 127, .7); }
.bjf-ok i svg { width: 14px; height: 14px; }
@keyframes bjf-ok { to { opacity: 1; transform: translate(-50%, 50%) scale(1); } }

/* fichas */
.bjf-ficha { position: absolute; width: var(--t, 54px); height: var(--t, 54px); pointer-events: none; z-index: 1; opacity: 0;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.55)); animation: bjf-ficha-entra .8s cubic-bezier(.2,1.2,.4,1) var(--d, 1.9s) forwards, bjf-flota 3.4s ease-in-out calc(var(--d, 1.9s) + .8s) infinite; }
@keyframes bjf-ficha-entra { 0% { opacity: 0; transform: translate(var(--x0, 0), 160px) rotate(-200deg) scale(.4); } 100% { opacity: 1; transform: translate(0, 0) rotate(var(--r, 0deg)) scale(1); } }
@keyframes bjf-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.bjf-pila { position: absolute; bottom: -22px; width: clamp(50px, 14vw, 70px); pointer-events: none; z-index: 1; opacity: 0;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.6)); animation: bjf-sube .6s cubic-bezier(.2,1.2,.4,1) 2.05s forwards; }
.bjf-pila.izq { left: -16px; } .bjf-pila.der { right: -16px; }

/* botones */
.bjf-acciones { width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.3vh, 14px); margin-top: clamp(26px, 3.4vh, 40px);
  opacity: 0; transform: translateY(16px); animation: bjf-sube .5s ease 2.3s forwards; }
.bjf-btn { font: inherit; cursor: pointer; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-transform: uppercase;
  font-weight: 800; letter-spacing: .02em; transition: transform .12s ease, filter .2s; -webkit-tap-highlight-color: transparent; }
.bjf-btn:active { transform: scale(.97); }
.bjf-btn:focus-visible { outline: 3px solid #9fe4ff; outline-offset: 3px; }
.bjf-mesa { width: 100%; min-height: clamp(54px, 7vh, 66px); font-size: clamp(19px, 5.8vw, 25px); color: #fff; border: 2px solid rgba(160, 230, 255, .9);
  background: linear-gradient(180deg, #5fd0ff 0%, #1f97f2 40%, #0b62d8 72%, #0a4cb8 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 0 26px rgba(40, 170, 255, .75), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -4px 10px rgba(0, 30, 90, .45);
  text-shadow: 0 2px 2px rgba(0, 30, 90, .6); position: relative; overflow: hidden; }
.bjf-mesa::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  animation: bjf-barrido 3s ease-in-out 3.2s infinite; }
@keyframes bjf-barrido { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.bjf-compartir { width: 82%; min-height: clamp(46px, 6vh, 56px); font-size: clamp(16px, 4.8vw, 20px); color: #fff; background: rgba(4, 16, 44, .55);
  border: 2px solid rgba(230, 240, 255, .85); box-shadow: 0 0 14px rgba(80, 160, 255, .35); }
.bjf-compartir svg { width: 26px; height: 26px; }
.bjf-lobby { background: none; border: 0; color: #e6ecf7; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 15px;
  display: flex; flex-direction: column; gap: 2px; padding: 0 18px; min-height: 44px; position: relative; width: 100%; }
.bjf-lobby svg { width: 26px; height: 26px; }
.bjf-lobby::before, .bjf-lobby::after { content: ''; position: absolute; bottom: 12px; width: calc(50% - 70px); height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3)); }
.bjf-lobby::before { left: 0; } .bjf-lobby::after { right: 0; transform: scaleX(-1); }
.bjf-demo { margin-top: -4px; font-size: 11px; color: #9fb0cc; text-align: center; }

@keyframes bjf-cae { to { opacity: 1; transform: none; } }
@keyframes bjf-pop { to { opacity: 1; transform: none; } }
@keyframes bjf-aparece { to { opacity: 1; } }
@keyframes bjf-sube { to { opacity: 1; transform: none; } }
@keyframes bjf-sube-card { to { opacity: 1; transform: none; } }

/* pantallas bajas: se compacta para que entre sin scroll en la mayoría de los celulares */
@media (max-height: 700px) {
  .bjf-logo { width: 60px; } .bjf-corona { width: 30px; }
  .bjf-cartas { height: 128px; } .bjf-premio { margin-top: 22px; } .bjf-acciones { margin-top: 26px; gap: 8px; }
  .bjf-lobby { flex-direction: row; gap: 8px; } .bjf-lobby svg { width: 20px; height: 20px; } .bjf-lobby::before, .bjf-lobby::after { bottom: 50%; width: calc(50% - 80px); }
}

/* movimiento reducido: sin confeti, sin giros; todo aparece con un fundido corto */
.bjf.quieto *, .bjf.quieto *::before, .bjf.quieto *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
.bjf.quieto .bjf-rayos { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .bjf *, .bjf *::before, .bjf *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* el aviso (p. ej. «Copiado») se ve también sobre la pantalla de victoria */
html:has(.bjf) .toast { z-index: 130; }