/* Blackjack Digital — app del jugador. Mobile-first, sin scroll lateral.
   Los colores de mesa son tokens (verde / azul / borgona). No tocan reglas ni pagos. */
@font-face { font-family: 'Lexend'; src: url('/lexend.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root, [data-blackjack-theme="verde"] {
  --bj-background: #031426; --bj-accent: #00D9A6; --bj-trim: #EAC66F; --bj-text: #F8F7F3; --bj-muted: #B8BEC9;
  --bj-panel: rgba(6, 22, 44, .82); --bj-panel-2: rgba(10, 32, 60, .9); --bj-line: rgba(234, 198, 111, .55);
  --bj-cta-1: #0fb58c; --bj-cta-2: #07785f; --bj-chip-1: #0d6b4f; --bj-chip-2: #EAC66F;
  --bj-bg-img: url('/blackjack/mesas/verde.webp');
}
[data-blackjack-theme="azul"] {
  --bj-background: #02132D; --bj-accent: #00D8FF; --bj-trim: #D6EDFF; --bj-text: #F8F7F3; --bj-muted: #B8BEC9;
  --bj-panel: rgba(3, 20, 48, .84); --bj-panel-2: rgba(8, 30, 66, .9); --bj-line: rgba(214, 237, 255, .5);
  --bj-cta-1: #10a9d8; --bj-cta-2: #0a5f96; --bj-chip-1: #0b3d8c; --bj-chip-2: #D6EDFF;
  --bj-bg-img: url('/blackjack/mesas/azul.webp');
}
[data-blackjack-theme="borgona"] {
  --bj-background: #100E13; --bj-accent: #EAC66F; --bj-trim: #EAC66F; --bj-text: #F8F7F3; --bj-muted: #C3BCB0;
  --bj-panel: rgba(24, 10, 14, .86); --bj-panel-2: rgba(40, 14, 20, .92); --bj-line: rgba(234, 198, 111, .6);
  --bj-cta-1: #b8912f; --bj-cta-2: #6e1420; --bj-chip-1: #6e1420; --bj-chip-2: #EAC66F;
  --bj-bg-img: url('/blackjack/mesas/borgona.webp');
}
[data-bj-fallback="1"] { --bj-bg-img: url('/blackjack/mesas/verde.webp'); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
body {
  font-family: 'Lexend', ui-rounded, system-ui, sans-serif; color: var(--bj-text); background: var(--bj-background);
  min-height: 100dvh; overscroll-behavior-x: none; touch-action: pan-y; transition: background-color .35s ease;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible, input:focus-visible { outline: 3px solid var(--bj-accent); outline-offset: 2px; }
.oculto, [hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── estructura de app ─────────────────────────────────────────────── */
#app { width: 100%; max-width: 560px; margin: 0 auto; min-height: 100dvh; position: relative; overflow-x: hidden;
  padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.pantalla { display: none; width: 100%; }
.pantalla.on { display: block; }
.fondo-app { position: fixed; inset: 0; z-index: -1; background: radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.06), transparent 60%), var(--bj-background); }

nav.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.72)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.08); padding-bottom: env(safe-area-inset-bottom); }
nav.barra .fila { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; max-width: 560px; }
nav.barra button { background: none; border: 0; padding: 9px 2px 8px; min-height: 60px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--bj-muted); font-size: 11.5px; letter-spacing: .01em; position: relative; }
nav.barra button svg { width: 24px; height: 24px; }
nav.barra button[aria-current="page"] { color: var(--bj-trim); }
nav.barra button[aria-current="page"]::after { content: ''; position: absolute; bottom: 3px; width: 34px; height: 3px; border-radius: 3px; background: var(--bj-trim); }
.pie-rg { text-align: center; font-size: 11px; color: var(--bj-muted); padding: 10px 0 4px; opacity: .8; }

/* ── botones ───────────────────────────────────────────────────────── */
.btn { border-radius: 999px; border: 1.5px solid transparent; min-height: 48px; padding: 0 22px; font-weight: 700; letter-spacing: .03em;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform .12s ease, filter .2s, opacity .2s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.6); }
.btn-cta { width: 100%; min-height: 60px; font-size: 20px; background: linear-gradient(180deg, var(--bj-cta-1), var(--bj-cta-2));
  border-color: color-mix(in srgb, var(--bj-accent) 70%, white); box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 10px 30px color-mix(in srgb, var(--bj-accent) 30%, transparent); text-transform: uppercase; }
.btn-linea { width: 100%; background: transparent; border-color: var(--bj-trim); text-transform: uppercase; }
.btn-chico { min-height: 40px; padding: 0 14px; font-size: 14px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.icono-btn { width: 46px; height: 46px; border-radius: 50%; background: rgba(4, 16, 34, .7); border: 1.5px solid rgba(255,255,255,.22);
  display: grid; place-items: center; }
.icono-btn svg { width: 22px; height: 22px; }

/* ── entrada (demo) ────────────────────────────────────────────────── */
.entrada { padding: 28px 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; min-height: 90dvh; justify-content: center; }
.entrada img.logo { width: min(64vw, 260px); height: auto; }
.entrada form { width: 100%; max-width: 380px; display: grid; gap: 12px; }
.campo { display: grid; gap: 6px; font-size: 13px; color: var(--bj-muted); }
.campo input { min-height: 52px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.2); background: rgba(0,0,0,.35); color: var(--bj-text);
  padding: 0 16px; font: inherit; font-size: 17px; }
.aviso-demo { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--bj-line); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; color: var(--bj-trim); }
.error { color: #ff8a8a; font-size: 14px; min-height: 18px; text-align: center; }

/* ── lobby ─────────────────────────────────────────────────────────── */
.lobby { padding: 12px 16px 0; }
.lobby-top { display: grid; grid-template-columns: 48px 1fr 48px; align-items: start; }
.lobby-top > #b-volver { grid-column: 1; } .lobby-top > .lobby-logo { grid-column: 2; } .lobby-top > [data-ir=ajustes] { grid-column: 3; }
.lobby-logo { display: flex; flex-direction: column; align-items: center; }
.lobby-logo img { width: min(46vw, 210px); height: auto; filter: drop-shadow(0 8px 24px rgba(0,120,255,.25)); }
.lobby-logo small { color: var(--bj-muted); font-size: 13px; margin-top: -2px; }
.pildora-saldo { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--bj-trim); border-radius: 999px; padding: 6px 16px 6px 10px;
  background: rgba(0,0,0,.45); width: fit-content; margin: 10px auto 0; }
.pildora-saldo .ficha-ico { width: 26px; height: 26px; }
.pildora-saldo b { display: block; font-size: 18px; }
.pildora-saldo span { font-size: 10.5px; letter-spacing: .14em; color: var(--bj-muted); text-transform: uppercase; }
.titular { text-align: center; margin: 12px 0 0; }
.titular h1 { margin: 0; font-size: clamp(26px, 7.6vw, 42px); letter-spacing: -.01em; line-height: 1.02; font-weight: 800;
  background: linear-gradient(180deg, #fff, #e9d8b0 60%, #caa55a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.titular p { margin: 6px 0 0; color: var(--bj-text); opacity: .92; font-size: 16px; }
.heroe { position: relative; margin: 10px -16px 0; aspect-ratio: 1024 / 700; background: var(--bj-bg-img) center 18% / cover no-repeat; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); }
.heroe .cartas-hero { position: absolute; left: 50%; top: 22%; width: 60%; transform: translateX(-42%); display: flex; }
.heroe .cartas-hero img { width: 44%; height: auto; filter: drop-shadow(0 14px 18px rgba(0,0,0,.55)); }
.heroe .cartas-hero img:first-child { transform: rotate(-8deg) translateY(4%); }
.heroe .cartas-hero img:last-child { transform: rotate(7deg); margin-left: -6%; }
.heroe .pila { position: absolute; left: 14%; top: 50%; width: 18%; }
.pills-reglas { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: -8px; position: relative; z-index: 2; }
.pill { border: 1.5px solid var(--bj-trim); border-radius: 999px; padding: 6px 12px; font-size: 10.5px; letter-spacing: .06em; white-space: nowrap; font-weight: 700; color: var(--bj-trim); background: rgba(0,0,0,.55); }
.seccion-titulo { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 2px 10px; }
.seccion-titulo h2 { margin: 0; font-size: 20px; }
.seccion-titulo small { color: var(--bj-muted); font-size: 12px; }
.limites { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.limite { position: relative; border-radius: 18px; border: 1.5px solid rgba(255,255,255,.14); background: var(--bj-panel); padding: 12px 6px 12px; text-align: center; min-height: 118px; }
.limite[aria-checked="true"] { border-color: var(--bj-accent); box-shadow: 0 0 0 1px var(--bj-accent), 0 0 24px color-mix(in srgb, var(--bj-accent) 30%, transparent); }
.limite .check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--bj-accent); color: #042; display: none; place-items: center; font-size: 14px; font-weight: 900; }
.limite[aria-checked="true"] .check { display: grid; }
.limite b { display: block; font-size: 15px; letter-spacing: .06em; margin-top: 6px; text-transform: uppercase; }
.limite span { display: block; font-size: 12px; color: var(--bj-muted); margin-top: 6px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 6px; }
.limite .fichitas { height: 34px; display: flex; justify-content: center; align-items: end; gap: 2px; }
.temas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tema { position: relative; border-radius: 16px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.14); background: #000; padding: 0; text-align: left; }
.tema img { width: 100%; aspect-ratio: 2 / 2.2; object-fit: cover; object-position: center 30%; display: block; }
.tema b { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 8px; font-size: 12.5px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); }
.tema[aria-checked="true"] { border-color: var(--bj-accent); box-shadow: 0 0 0 2px var(--bj-accent); }
.tema .check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--bj-accent); color: #042; display: none; place-items: center; font-weight: 900; font-size: 13px; }
.tema[aria-checked="true"] .check { display: grid; }
.nota { color: var(--bj-muted); font-size: 12.5px; text-align: center; margin: 10px 0 0; }
.acciones-lobby { display: grid; gap: 12px; margin: 20px 0 6px; }

/* ── mesa: stage = parte de la mesa del fondo (1024 × 1130 de 1536), controles debajo ── */
.mesa { display: flex; flex-direction: column; align-items: center; min-height: calc(100dvh - 76px - env(safe-area-inset-bottom)); }
.stage { position: relative; width: min(100%, calc((100dvh - 76px - 250px - env(safe-area-inset-bottom)) * 1024 / 1130)); min-width: min(100%, 320px);
  aspect-ratio: 1024 / 1130; container-type: inline-size; background: var(--bj-bg-img) center top / 100% auto no-repeat, var(--bj-background); overflow: hidden; flex: none; }
.stage .capa { position: absolute; }
.hud-top { left: 3cqw; right: 3cqw; top: 2.5cqw; display: flex; justify-content: space-between; align-items: flex-start; }
.hud-top .logo { width: 23cqw; height: auto; margin-top: -1cqw; filter: drop-shadow(0 1cqw 3cqw rgba(0,90,255,.35)); }
.hud-top .icono-btn { width: max(44px, 10cqw); height: max(44px, 10cqw); }
.pill-hud { top: 14.5cqw; display: flex; align-items: center; gap: 2cqw; border: .35cqw solid var(--bj-trim); border-radius: 99cqw; padding: 1.1cqw 3cqw 1.1cqw 2cqw;
  background: rgba(0,0,0,.6); width: 37cqw; }
.pill-hud.izq { left: 3cqw; } .pill-hud.der { right: 3cqw; }
.pill-hud .ficha-ico { width: 5cqw; height: 5cqw; flex: none; }
.pill-hud div { min-width: 0; padding-left: 1cqw; }
.pill-hud span { display: block; font-size: max(9px, 2.3cqw); letter-spacing: .15em; color: var(--bj-muted); text-transform: uppercase; }
.pill-hud b { display: block; font-size: max(12.5px, 3.8cqw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rotulo-banca { left: 50%; top: 22.5%; transform: translateX(-50%); border: .35cqw solid var(--bj-trim); border-radius: 99cqw; padding: .6cqw 4.5cqw; font-size: max(11px, 3cqw);
  font-weight: 700; letter-spacing: .08em; background: rgba(0,0,0,.6); color: var(--bj-trim); }
.zona-banca { left: 0; right: 0; top: 27%; display: flex; justify-content: center; }
.zona-banca .carta { --cw: 15.5cqw; }
.total { display: inline-block; min-width: 12cqw; text-align: center; border: .35cqw solid var(--bj-trim); border-radius: 99cqw; padding: .5cqw 3cqw; background: rgba(0,0,0,.75);
  font-weight: 800; font-size: max(13px, 4cqw); white-space: nowrap; }
.total small { font-size: max(9px, 2.3cqw); font-weight: 600; color: var(--bj-muted); margin-left: 1cqw; }
.total-banca { left: 50%; top: 45%; transform: translateX(-50%); }
.texto-mesa { left: 50%; top: 51%; transform: translateX(-50%); text-align: center; color: var(--bj-trim); width: 86cqw; pointer-events: none; opacity: .9; }
.texto-mesa b { display: block; font-size: 5.6cqw; letter-spacing: .08em; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; text-shadow: 0 .3cqw 0 rgba(0,0,0,.45); }
.texto-mesa span { display: block; font-size: max(10px, 3.3cqw); letter-spacing: .05em; font-family: Georgia, serif; }
.marca-agua { left: 50%; top: 60%; transform: translateX(-50%); width: 13cqw; opacity: .12; pointer-events: none; }
.zona-manos { left: 2cqw; right: 2cqw; top: 63%; display: flex; justify-content: center; gap: 2cqw; align-items: flex-start; }
.mano { display: flex; flex-direction: column; align-items: center; gap: 1cqw; position: relative; transition: opacity .25s; }
.mano.activa .cartas { filter: drop-shadow(0 0 2.2cqw color-mix(in srgb, var(--bj-accent) 80%, transparent)); }
.mano.activa .total { border-color: var(--bj-accent); box-shadow: 0 0 2cqw color-mix(in srgb, var(--bj-accent) 60%, transparent); }
.mano.espera { opacity: .7; }
.mano .etq { font-size: max(9px, 2.6cqw); font-weight: 700; letter-spacing: .1em; color: var(--bj-trim); text-transform: uppercase; background: rgba(0,0,0,.5); border-radius: 99cqw; padding: .2cqw 2cqw; }
.mano .apuesta-mano { font-size: max(9px, 2.6cqw); background: rgba(0,0,0,.6); border-radius: 99cqw; padding: .3cqw 2cqw; white-space: nowrap; }
.mano .res { font-size: max(9px, 2.6cqw); font-weight: 800; padding: .4cqw 2cqw; border-radius: 99cqw; }
.res.gana, .res.natural { background: #0fb58c; color: #02140f; }
.res.empate { background: #d6d9df; color: #111; }
.res.pierde { background: #b3263a; color: #fff; }
.res.rendida { background: #6c7280; color: #fff; }
.cartas { display: flex; position: relative; }
.carta { position: relative; width: var(--cw, 17cqw); aspect-ratio: 144 / 180; perspective: 60cqw; flex: none; }
.carta + .carta { margin-left: calc(var(--cw, 17cqw) * -0.55); }
.carta .caras { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.carta .cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.carta .cara img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 .8cqw 1cqw rgba(0,0,0,.45)); }
.carta .dorso { transform: rotateY(180deg); }
.carta.boca-abajo .caras { transform: rotateY(180deg); }
.carta.entra { animation: entra .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes entra { from { transform: translate(40cqw, -50cqw) rotate(18deg); opacity: 0; } to { transform: none; opacity: 1; } }
.manos-2 .zona-manos .carta { --cw: 13.5cqw; }
.manos-3 .zona-manos .carta, .manos-4 .zona-manos .carta { --cw: 10.5cqw; }
.manos-3 .zona-manos, .manos-4 .zona-manos { gap: .8cqw; left: 1cqw; right: 1cqw; }
.ficha-apuesta { right: 6cqw; top: 67%; display: flex; flex-direction: column; align-items: center; gap: 1cqw; }
.ficha-apuesta .pila-svg { width: 12cqw; }
.ficha-apuesta b { font-size: max(11px, 3cqw); border: .3cqw solid var(--bj-trim); border-radius: 99cqw; padding: .5cqw 2.5cqw; background: rgba(0,0,0,.65); white-space: nowrap; }
.manos-2 .ficha-apuesta, .manos-3 .ficha-apuesta, .manos-4 .ficha-apuesta { display: none; }

.panel-mesa { width: min(100%, 520px); padding: 6px 14px 4px; display: grid; gap: 10px; margin-top: -4px; }
.estado-turno { justify-self: center; display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--bj-accent); border-radius: 99px; padding: 6px 16px;
  background: rgba(0,0,0,.65); font-size: 15px; white-space: nowrap; }
.estado-turno .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--bj-accent); box-shadow: 0 0 8px var(--bj-accent); }
.estado-turno .sep { width: 1px; height: 16px; background: rgba(255,255,255,.3); }
.estado-turno.urgente { border-color: #ff6b6b; } .estado-turno.urgente .punto { background: #ff6b6b; box-shadow: 0 0 8px #ff6b6b; }
.controles { display: grid; gap: 10px; }
.controles .fila1 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.controles .fila2 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.accion { min-height: 50px; border-radius: 99px; border: 1.5px solid; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; font-size: clamp(12px, 3.5vw, 15px); transition: transform .12s, opacity .2s, filter .2s; padding: 0 6px; min-width: 0; overflow: hidden; }
.accion svg { width: 20px; height: 20px; flex: none; }
.accion span { text-align: left; line-height: 1.1; }
.accion small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.accion:active:not(:disabled) { transform: scale(.97); }
.accion:disabled { opacity: .3; filter: grayscale(1); cursor: not-allowed; }
.accion.pedir { background: linear-gradient(180deg, var(--bj-cta-1), var(--bj-cta-2)); border-color: color-mix(in srgb, var(--bj-accent) 70%, white); min-height: 58px; font-size: clamp(15px, 4.4vw, 19px); box-shadow: 0 6px 22px color-mix(in srgb, var(--bj-accent) 25%, transparent); }
.accion.pedir svg, .accion.plantarse svg { width: 28px; height: 28px; }
.accion.plantarse { background: linear-gradient(180deg, #13306a, #0a1b3f); border-color: var(--bj-trim); min-height: 58px; font-size: clamp(15px, 4.4vw, 19px); }
.accion.doblar { background: linear-gradient(180deg, #3a2c10, #1a1307); border-color: var(--bj-trim); color: #fff; }
.accion.doblar svg { color: var(--bj-trim); }
.accion.dividir, .accion.rendirse { background: rgba(8, 18, 36, .8); border-color: rgba(255,255,255,.5); }
.pie-mesa { text-align: center; font-size: 11px; color: var(--bj-muted); padding-top: 2px; }

.preapuesta { display: grid; gap: 10px; }
.preapuesta .monto { display: flex; justify-content: space-between; align-items: center; background: var(--bj-panel); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 8px 14px; }
.preapuesta .monto span { display: block; font-size: 11px; color: var(--bj-muted); letter-spacing: .1em; text-transform: uppercase; }
.preapuesta .monto b { font-size: 22px; }
.preapuesta .monto .der { text-align: right; } .preapuesta .monto small { display: block; font-size: 12px; color: var(--bj-muted); }
.fichas { display: flex; justify-content: space-between; gap: 6px; }
.ficha { flex: 1; max-width: 64px; aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0; background: none; position: relative; min-width: 44px; }
.ficha svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.ficha span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.ficha:active { transform: translateY(2px); }
.preapuesta .fila { display: grid; grid-template-columns: 1fr 1fr 1.8fr; gap: 8px; }
.preapuesta .fila .btn { min-height: 52px; font-size: 14px; padding: 0 8px; }
.preapuesta .fila .btn-cta { font-size: 18px; min-height: 52px; }

/* avisos y modales */
.banner { border-radius: 18px; padding: 12px 16px; text-align: center; background: var(--bj-panel-2); border: 1.5px solid var(--bj-trim); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.banner h3 { margin: 0; font-size: 24px; }
.banner p { margin: 4px 0 0; font-size: 13px; color: var(--bj-muted); }
.banner .grande { font-size: 19px; color: var(--bj-text); font-weight: 700; }
.banner.gana { border-color: var(--bj-accent); } .banner.pierde { border-color: #b3263a; }
.banner .btn { margin-top: 10px; min-height: 50px; font-size: 17px; }
.aviso-red { left: 50%; top: 25cqw; transform: translateX(-50%); z-index: 9; background: #3a2a05; border: 1px solid var(--bj-trim); color: #ffe6a6; border-radius: 99px;
  padding: 5px 14px; font-size: 13px; white-space: nowrap; }
.modal-fondo { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.6); display: grid; place-items: end center; padding: 0 12px calc(90px + env(safe-area-inset-bottom)); }
.modal { width: 100%; max-width: 480px; border-radius: 22px; background: var(--bj-panel-2); border: 1.5px solid var(--bj-trim); padding: 20px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal h3 { margin: 0 0 6px; font-size: 22px; }
.modal p { margin: 0 0 14px; color: var(--bj-muted); font-size: 14.5px; line-height: 1.45; }
.modal .fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal .btn { font-size: 15px; padding: 0 10px; }
.toast { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; background: #111a2b; border: 1px solid rgba(255,255,255,.2);
  padding: 10px 16px; border-radius: 12px; font-size: 14px; max-width: calc(100% - 32px); text-align: center; }

/* páginas de texto */
.pagina { padding: 18px 16px 10px; }
.pagina h1 { font-size: 26px; margin: 4px 0 14px; }
.tarjeta { background: var(--bj-panel); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; }
.tarjeta h2 { font-size: 17px; margin: 0 0 8px; color: var(--bj-trim); }
.tarjeta p, .tarjeta li { font-size: 14.5px; line-height: 1.55; color: #dfe3ea; }
.tarjeta ul { padding-left: 18px; margin: 6px 0; }
table.pagos { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.pagos td, table.pagos th { padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
table.pagos td:last-child, table.pagos th:last-child { text-align: right; }
.hist { display: grid; gap: 10px; }
.hist .item { background: var(--bj-panel); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 12px 14px; display: grid; gap: 6px; }
.hist .item .top { display: flex; justify-content: space-between; font-size: 13px; color: var(--bj-muted); }
.hist .item .neto { font-weight: 800; font-size: 17px; }
.hist .item .neto.pos { color: #3ee6b5; } .hist .item .neto.neg { color: #ff8a8a; }
.mini-cartas { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--bj-muted); }
.mini-cartas img { width: 26px; height: auto; }
.ajuste { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 15px; }
.ajuste:last-child { border-bottom: 0; }
.interruptor { width: 52px; height: 30px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); position: relative; flex: none; }
.interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #cfd5df; transition: left .2s; }
.interruptor[aria-checked="true"] { background: var(--bj-cta-2); border-color: var(--bj-accent); }
.interruptor[aria-checked="true"]::after { left: 25px; background: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media (min-width: 900px) {
  .fondo-app { background: radial-gradient(60% 60% at 50% 30%, color-mix(in srgb, var(--bj-accent) 12%, transparent), transparent 70%), var(--bj-background); }
}

/* «Lobby de juegos» (todos los juegos del casino), centrado bajo el saldo */
.lj-pill { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px auto 0; min-height: 40px; padding: 0 18px 0 14px;
  border-radius: 999px; border: 1px solid rgba(242, 201, 120, .5); background: rgba(6, 18, 36, .72); color: #f3e3bd;
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.lj-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.lj-pill[hidden] { display: none; }
.lj-pill:focus-visible { outline: 3px solid #f2c978; outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMACIONES v2 — reparto con suspenso, resultado con fichas y dinero (15/10/2026)
   Sólo presentación: el estado ya llegó completo del servidor.
   ═══════════════════════════════════════════════════════════════════════════ */
.carta.entra { animation: entra .44s cubic-bezier(.2,.8,.2,1) both; }
@keyframes entra { 0% { transform: translate(42cqw, -58cqw) rotate(24deg) scale(.82); opacity: 0; } 15% { opacity: 1; } 78% { transform: translate(-.6cqw, .4cqw) rotate(-1.5deg); } 100% { transform: none; opacity: 1; } }
.carta .caras { transition: transform .56s cubic-bezier(.3,1.35,.45,1); }
.carta.voltear { z-index: 2; }
.carta.voltear:not(.boca-abajo) .caras { animation: bjVoltearSalto .56s ease-out; }
@keyframes bjVoltearSalto { 40% { translate: 0 -2.4cqw; scale: 1.08; } }

/* Totales: aparecen cuando la carta ya llegó */
.total.tarde { animation: bjTotal .38s cubic-bezier(.2,1.7,.4,1) var(--d, 0ms) both; }
@keyframes bjTotal { 0% { opacity: 0; scale: .3; } 100% { opacity: 1; scale: 1; } }
.total-banca.pasada { border-color: #ff6b6b; color: #ffd0d0; box-shadow: 0 0 2.4cqw rgba(255, 70, 70, .6); }

/* Tu turno: el indicador respira */
.estado-turno.tu-turno .punto { animation: bjPunto 1.1s ease-in-out infinite; }
@keyframes bjPunto { 50% { transform: scale(1.5); box-shadow: 0 0 14px var(--bj-accent); } }
.controles.tarde { animation: bjCtrl .35s cubic-bezier(.2,1.3,.4,1) var(--d, 0ms) both; }
@keyframes bjCtrl { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* Te pasaste */
.mano.pasada .cartas { animation: bjApaga .4s ease var(--d, 0ms) both; }
@keyframes bjApaga { to { filter: grayscale(.75) brightness(.62); } }
.sello-pasada { position: absolute; left: 50%; top: 42%; z-index: 3; translate: -50% -50%; rotate: -12deg; white-space: nowrap; pointer-events: none;
  padding: .8cqw 3cqw; border-radius: 2cqw; border: .5cqw solid #ffd0d0; background: linear-gradient(180deg, #ff6b6b, #b3263a); color: #fff;
  font-weight: 900; font-size: max(13px, 4.2cqw); letter-spacing: .04em; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .55), 0 0 4cqw rgba(255, 60, 60, .55);
  animation: bjSelloChico .5s cubic-bezier(.2,1.6,.35,1) var(--d, 0ms) both; }
@keyframes bjSelloChico { 0% { opacity: 0; scale: 2.4; } 100% { opacity: 1; scale: 1; } }

/* Manos al final */
.mano.ganadora .cartas { animation: bjGanadora 1.3s ease-in-out infinite; }
@keyframes bjGanadora { 0%, 100% { filter: drop-shadow(0 0 1.2cqw rgba(255, 210, 90, .55)); } 50% { filter: drop-shadow(0 0 3.4cqw rgba(255, 215, 100, .95)); } }
.mano.ganadora .total { border-color: #ffd968; color: #fff4c2; box-shadow: 0 0 3cqw rgba(255, 210, 90, .7); }
.mano.perdedora .cartas { filter: brightness(.7) saturate(.7); transition: filter .5s; }
.mano .res { animation: bjSelloChico .45s cubic-bezier(.2,1.6,.35,1) both; }
.res.gana, .res.natural { background: linear-gradient(180deg, #ffe08a, #e0a526); color: #2a1a00; box-shadow: 0 0 2cqw rgba(255, 210, 90, .7); }

/* Sello grande sobre la mesa */
.sello-mesa { left: 50%; top: 54.5%; z-index: 6; translate: -50% -50%; rotate: -6deg; white-space: nowrap; pointer-events: none; text-align: center;
  font-weight: 900; font-size: max(26px, 9.6cqw); letter-spacing: -.01em; line-height: 1; padding: 1.6cqw 5cqw 2cqw; border-radius: 3.4cqw;
  animation: bjSello .6s cubic-bezier(.2,1.5,.35,1) both, bjSelloSale .5s ease-in 2.1s forwards; }
.sello-mesa.largo { font-size: max(20px, 7cqw); }
@keyframes bjSello { 0% { opacity: 0; scale: 2.8; } 55% { opacity: 1; } 100% { opacity: 1; scale: 1; } }
@keyframes bjSelloSale { to { opacity: 0; scale: .8; translate: -50% -80%; } }
.sello-mesa.oro { color: #2a1a00; border: .6cqw solid #fff4c2; background: linear-gradient(180deg, #fff6c8 0%, #ffd64f 32%, #f3b11d 64%, #c98408 100%);
  box-shadow: 0 0 0 .6cqw #6d4004, 0 2cqw 5cqw rgba(0, 0, 0, .55), 0 0 9cqw rgba(255, 200, 60, .75); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.sello-mesa.plata { color: #111; border: .6cqw solid #fff; background: linear-gradient(180deg, #ffffff, #d6d9df 55%, #9aa1ad); box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .55), 0 0 6cqw rgba(255, 255, 255, .35); }
.sello-mesa.rojo { color: #ffe1e1; border: .5cqw solid rgba(255, 190, 190, .8); background: linear-gradient(180deg, rgba(150, 25, 45, .96), rgba(80, 10, 22, .96));
  box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .6); font-size: max(20px, 7.4cqw); }

/* Fichas de la apuesta: se van a la banca al perder, crecen al ganar */
.ficha-apuesta.barrida { animation: bjBarrida .7s cubic-bezier(.5,0,.8,.4) .35s forwards; }
@keyframes bjBarrida { to { translate: -38cqw -36cqw; scale: .45; opacity: 0; } }
.ficha-apuesta.pagada .pila-svg { animation: bjPagada .5s cubic-bezier(.2,1.7,.4,1); filter: drop-shadow(0 0 3cqw rgba(255, 210, 90, .8)); }
@keyframes bjPagada { 40% { scale: 1.25; } }

/* Banner del resultado */
.banner:not(.oculto) { animation: bjBanner .45s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes bjBanner { from { opacity: 0; translate: 0 22px; scale: .96; } to { opacity: 1; translate: 0 0; scale: 1; } }
.banner.gana { background: linear-gradient(180deg, rgba(40, 32, 6, .95), rgba(14, 12, 4, .95)); border-color: #ffd968; box-shadow: 0 0 0 1px rgba(255, 217, 104, .4), 0 10px 40px rgba(255, 200, 60, .3); }
.banner.gana h3 { background: linear-gradient(180deg, #fff6c8, #ffd64f 45%, #e0a526); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 28px; }
.banner.gana .grande { color: #ffd968; font-size: 24px; font-variant-numeric: tabular-nums; }
#p-monto { display: inline-block; }