/* ==========================================================================
   Acabado visual compartido por los 19 juegos.
   Solo estética: no cambia estructura, medidas ni lógica de ningún juego.
   Se carga desde index.html y pisa a los .css de cada juego por especificidad
   (#view .game-host …), así no hay que editar juego por juego.
   ========================================================================== */

/* ---------- Ambiente: grano, luz de lámpara y viñeta en toda la mesa ---------- */
#view .game-host > [class^="g-"] { isolation: isolate; }
#view .game-host > [class^="g-"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 42% at 50% -6%, rgba(255, 236, 170, .13), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .16; mix-blend-mode: overlay;
}
#view .game-host > [class^="g-"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(110% 85% at 50% 45%, transparent 58%, rgba(0, 0, 0, .42) 100%);
}

/* ---------- Barra superior: vidrio oscuro + hilo dorado ---------- */
#view .game-host :is(.ab-top, .bc-top, .bj-top, .ch-top, .cr-top, .dc-top, .dt-top, .hl-top, .kn-top, .mn-top, .pk-top, .rl-top, .sc-top, .sb-top, .sl-top, .tw-top, .vp-top, .wh-top) {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, .64), rgba(0, 0, 0, .4));
  border-bottom: 1px solid rgba(212, 175, 55, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 26px rgba(0, 0, 0, .28);
}
#view .game-host :is(.ab-top, .bc-top, .bj-top, .ch-top, .cr-top, .dc-top, .dt-top, .hl-top, .kn-top, .mn-top, .pk-top, .rl-top, .sc-top, .sb-top, .sl-top, .tw-top, .vp-top, .wh-top)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(245, 223, 138, .75) 50%, transparent 100%);
}
#view .game-host :is(.ab-brand, .bc-brand, .bj-brand, .ch-brand, .cr-brand, .dc-brand, .dt-brand, .hl-brand, .kn-brand, .mn-brand, .pk-brand, .sc-brand, .sb-brand, .sl-brand, .tw-brand, .vp-brand, .wh-brand, .rl-top .brand) {
  text-shadow: 0 1px 0 rgba(90, 65, 10, .9), 0 0 14px rgba(212, 175, 55, .45), 0 0 34px rgba(212, 175, 55, .22);
}
#view .game-host :is(.ab-msg, .bc-msg, .bj-msg, .cr-msg, .dt-msg, .hl-msg, .kn-msg, .pk-msg, .sc-msg, .sb-msg, .sl-msg, .vp-msg) {
  font-weight: 500; text-shadow: 0 0 16px rgba(245, 223, 138, .25);
}
/* Stats de la barra: valor un toque más presente */
#view .game-host .stat b { font-weight: 700; letter-spacing: -.01em; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
#view .game-host .stat span { opacity: .85; }

/* ---------- Barra de controles: base con relieve ---------- */
#view .game-host :is(.ab-controls, .bc-controls, .bj-controls, .cr-controls, .dc-controls, .dt-controls, .kn-controls, .pk-controls, .sc-controls, .sb-controls, .vp-controls, .wh-controls) {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .5));
  border-top: 1px solid rgba(212, 175, 55, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 -12px 30px rgba(0, 0, 0, .28);
}

/* ---------- Botón principal desactivado: apagado, nunca translúcido ----------
   Con opacidad baja sobre una mesa oscura el botón se ve negro y sucio, y encima deja ver el
   tablero a través. Mejor un dorado apagado, sólido: se entiende que todavía no se puede apretar. */
#view .game-host :is(.btn.primary, .btn.spin, .btn.go, .btn.cashout, .drop, .action, button.action):disabled {
  opacity: 1;
  background: linear-gradient(180deg, #6a6250, #4d4738 58%, #3b3629);
  border-color: rgba(255, 255, 255, .14);
  color: rgba(247, 243, 233, .52);
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* ---------- Botón dorado principal: brillo que recorre al pasar el mouse ---------- */
#view .game-host :is(.btn.primary, .btn.spin, .drop, .btn.go) {
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -2px 0 rgba(0, 0, 0, .14) inset, 0 8px 22px rgba(212, 175, 55, .35), 0 2px 6px rgba(0, 0, 0, .35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .15s, filter .15s, box-shadow .15s;
}
#view .game-host :is(.btn.primary, .btn.spin, .drop, .btn.go)::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 34%; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-18deg); opacity: 0;
}
#view .game-host :is(.btn.primary, .btn.spin, .drop, .btn.go):hover:not(:disabled)::after { animation: gp-sheen .9s ease-out; }
#view .game-host :is(.btn.primary, .btn.spin, .drop, .btn.go):hover:not(:disabled) { box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -2px 0 rgba(0, 0, 0, .14) inset, 0 12px 30px rgba(212, 175, 55, .5), 0 2px 6px rgba(0, 0, 0, .35); }
#view .game-host :is(.btn.primary, .btn.spin, .drop, .btn.go):active:not(:disabled) { transform: translateY(1px) scale(.99); filter: brightness(.97); }
#view .game-host :is(.btn.primary, .btn.spin, .drop, .btn.go):disabled { box-shadow: none; text-shadow: none; }
@keyframes gp-sheen { 0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(420%) skewX(-18deg); opacity: 0; } }

/* Botones secundarios: relieve fino */
#view .game-host .btn:not(.primary):not(.spin):not(.go):not(.cashout):not(.stop) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(0, 0, 0, .25);
}
#view .game-host .btn:not(.primary):not(.spin):not(.go):not(.cashout):not(.stop):hover:not(:disabled) { border-color: rgba(245, 223, 138, .6); }

/* ---------- Fichas: resina, canto segmentado y medallón central ---------- */
/* El dibujo usa las variables de color que ya define cada mesa, de modo que todas las fichas
   comparten calidad visual sin perder el código cromático de sus valores. */
#view .game-host .chip {
  isolation: isolate;
  border: 1px solid var(--c, #ddd);
  border: 1px solid color-mix(in srgb, var(--c, #ddd) 68%, white);
  background-color: var(--c, #ddd);
  background-image:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, .62) 0 4%, rgba(255, 255, 255, .18) 14%, transparent 31%),
    radial-gradient(circle, var(--c, #ddd) 0 48%, transparent 49%),
    repeating-conic-gradient(from -5deg, var(--s, rgba(255, 255, 255, .88)) 0 11deg, transparent 11deg 34deg),
    radial-gradient(circle at 46% 42%, var(--c, #ddd) 0 70%, var(--c, #ddd) 100%);
  background-image:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, .62) 0 4%, rgba(255, 255, 255, .18) 14%, transparent 31%),
    radial-gradient(circle, color-mix(in srgb, var(--c, #ddd) 84%, white) 0 48%, transparent 49%),
    repeating-conic-gradient(from -5deg, var(--s, rgba(255, 255, 255, .88)) 0 11deg, transparent 11deg 34deg),
    radial-gradient(circle at 46% 42%, color-mix(in srgb, var(--c, #ddd) 86%, white) 0 70%, color-mix(in srgb, var(--c, #ddd) 68%, black) 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .48),
    inset 0 -3px 3px rgba(0, 0, 0, .35),
    0 2px 0 var(--c, #777),
    0 5px 11px rgba(0, 0, 0, .48);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .48),
    inset 0 -3px 3px rgba(0, 0, 0, .35),
    0 2px 0 color-mix(in srgb, var(--c, #777) 55%, black),
    0 5px 11px rgba(0, 0, 0, .48);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .5), 0 0 5px rgba(255, 255, 255, .18);
}
#view .game-host .chip::after {
  content: ""; position: absolute; inset: 17%; z-index: -1; border-radius: 50%; pointer-events: none;
  border: 1px solid var(--s, white);
  border: 1px solid color-mix(in srgb, var(--s, white) 62%, transparent);
  background: radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .2), transparent 52%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .28), inset 0 -1px 2px rgba(0, 0, 0, .28);
}
#view .game-host .chip.stack {
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .48), inset 0 -3px 3px rgba(0, 0, 0, .35),
    0 3px 0 var(--c, #777), 0 5px 0 var(--c, #777),
    0 7px 0 black, 0 11px 15px rgba(0, 0, 0, .58);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .48), inset 0 -3px 3px rgba(0, 0, 0, .35),
    0 3px 0 color-mix(in srgb, var(--c, #777) 55%, black), 0 5px 0 var(--c, #777),
    0 7px 0 color-mix(in srgb, var(--c, #777) 48%, black), 0 11px 15px rgba(0, 0, 0, .58);
}
#view .game-host .rail .chip:is(.selected, .sel) {
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .55), inset 0 -3px 3px rgba(0, 0, 0, .32),
    0 0 0 2px #101318, 0 0 0 4px #f5df8a, 0 9px 22px rgba(212, 175, 55, .5);
  filter: brightness(1.08) saturate(1.12);
}

/* Doble usa otro nombre de clase, pero conserva el mismo lenguaje visual. */
#view .game-host .dbl-chip {
  position: relative; isolation: isolate; overflow: hidden;
  border-style: solid;
  background-image:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, .58), transparent 28%),
    radial-gradient(circle, transparent 0 48%, rgba(0, 0, 0, .3) 49% 52%, transparent 53%),
    repeating-conic-gradient(from -5deg, rgba(255, 255, 255, .82) 0 11deg, transparent 11deg 34deg);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .45), inset 0 -3px 3px rgba(0, 0, 0, .34), 0 3px 0 rgba(0, 0, 0, .42), 0 6px 12px rgba(0, 0, 0, .46);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
#view .game-host .dbl-chip::after {
  content: ""; position: absolute; inset: 18%; z-index: -1; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .28);
}
#view .game-host .dbl-chip.sel {
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .55), inset 0 -3px 3px rgba(0, 0, 0, .3), 0 0 0 2px #101318, 0 0 0 4px #f5df8a, 0 9px 20px rgba(212, 175, 55, .48);
  filter: brightness(1.08) saturate(1.12);
}

/* ---------- Paneles laterales y zonas de juego: vidrio con hilo dorado ---------- */
#view .game-host :is(.panel, .cr-side, .pk-side, .g-hilo .stage, .g-ab .felt, .spots, .g-keno .tray, .g-vpoker .paytable-wrap, .g-dice .params, .g-mines .stats, .g-tower .stats, .g-hilo .stats, .g-chicken .stats) {
  border-color: rgba(212, 175, 55, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(0, 0, 0, .25), 0 14px 36px rgba(0, 0, 0, .35);
}
#view .game-host :is(.g-chicken .stage, .g-crash .cr-stage, .g-plinko .pk-stage, .g-craps .table-scroll, .g-sicbo .table-scroll) {
  border-color: rgba(212, 175, 55, .28);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 44px rgba(0, 0, 0, .5);
}

/* Etiquetas de sección dentro de paneles (APUESTA, RIESGO, FILAS…) */
#view .game-host :is(.panel, .cr-side, .pk-side, .g-hilo .stage) label > span:first-child,
#view .game-host :is(.panel, .cr-side, .pk-side) .lbl { letter-spacing: .22em; }

/* ---------- Mesas de cartas: marco de fieltro con doble hilo dorado ---------- */
#view .game-host :is(.g-blackjack .bj-table, .g-baccarat .bc-table, .g-dt .table, .g-ab .table) { isolation: isolate; }
#view .game-host :is(.g-blackjack .bj-table, .g-baccarat .bc-table, .g-dt .table, .g-ab .table)::before {
  content: ""; position: absolute; inset: 10px 14px; z-index: -1; pointer-events: none; border-radius: 26px;
  border: 1px solid rgba(245, 223, 138, .22);
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .12), inset 0 0 0 6px rgba(245, 223, 138, .1), inset 0 0 80px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .25);
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(255, 255, 255, .05), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 6px);
}
#view .game-host .g-blackjack .bj-table::before { inset: 8px 18px 4px; }
#view .game-host .g-baccarat .bc-table, #view .game-host .g-dt .table, #view .game-host .g-ab .table { position: relative; padding: 14px; }

/* Cartas: canto y sombra más realista */
#view .game-host .card .face.front, #view .game-host .card.front, #view .game-host .g-hilo .card .face.front {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* ---------- Escenarios "tecnológicos": retícula de puntos que se desvanece hacia los bordes ----------
   Va en el ::before del juego (sin hijos), así la máscara no recorta nada. */
#view .game-host > :is(.g-dice, .g-mines, .g-tower, .g-hilo, .g-vpoker, .g-slot, .g-wheel, .g-scratch, .g-keno, .g-plinko, .g-crash, .g-chicken)::before {
  background:
    radial-gradient(55% 42% at 50% -6%, rgba(255, 236, 170, .13), transparent 70%),
    radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.4px) center / 22px 22px,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  -webkit-mask-image: radial-gradient(70% 65% at 50% 50%, #000 20%, rgba(0, 0, 0, .35) 100%); mask-image: radial-gradient(70% 65% at 50% 50%, #000 20%, rgba(0, 0, 0, .35) 100%);
}

/* ---------- Historial (últimas jugadas): pastillas con relieve ---------- */
#view .game-host .history > * { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .35); }

/* ---------- Celdas / casillas clicables: relieve y hover más vivo ---------- */
#view .game-host :is(.g-keno .cell, .g-mines .tile, .g-tower .tile, .g-baccarat .spot, .g-dt .spot, .g-sicbo .spot, .g-craps .spot, .g-ab .spot, .g-roulette .num, .g-roulette .outside, .g-hilo .choice, .g-scratch .price, .g-wheel .seg button, .g-tower .seg button, .g-chicken .seg button, .g-mines .seg button, .g-plinko .seg button, .preset) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .3);
}

/* ---------- Inputs numéricos: campo hundido ---------- */
#view .game-host input[type="number"], #view .game-host input[type="text"] {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .3);
}

/* ---------- Toasts y modales: más cuerpo ---------- */
#view .game-host :is(.toast, .modal-card, .prompt-card, .sl-modal-card, .modal .card-box) {
  border-color: rgba(212, 175, 55, .4);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(0, 0, 0, .4);
}

@media (prefers-reduced-motion: reduce) {
  #view .game-host :is(.btn.primary, .btn.spin, .drop, .btn.go):hover:not(:disabled)::after { animation: none; }
}

/* ==========================================================================
   Retoques por juego
   ========================================================================== */
/* Blackjack: el texto del arco no entraba en el trazo y se cortaba en los extremos */
#view .game-host .g-blackjack .arc text { font-size: 17px; letter-spacing: .16em; }
#view .game-host .g-blackjack .arc { opacity: .7; }
/* Foco de luz suave en el centro de las mesas de cartas */
#view .game-host :is(.g-blackjack .bj-table, .g-baccarat .bc-table)::after {
  content: ""; position: absolute; left: 50%; top: 42%; width: 70%; height: 60%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent);
}
/* Hi-Lo: la carta y los botones centrados en el escenario, con halo detrás de la carta */
/* "safe": si el contenido no entra (celular), se alinea arriba y se puede deslizar; con "center" a secas
   la cadena de cartas salía por arriba del escenario y quedaba inalcanzable. */
#view .game-host .g-hilo .stage { justify-content: safe center; }
#view .game-host .g-hilo .trail:empty { min-height: 0; padding: 0; }
/* Hi-Lo con el celular acostado: escenario y panel lado a lado lo resuelve el encaje general (data-fit-side, más abajo).
   Acá solo queda el margen propio del juego. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1200px) {
  #view .game-host .g-hilo .hl-main[data-fit-area] { padding: 6px 10px; }
}
#view .game-host .g-hilo .card-wrap, #view .game-host .g-hilo .deck { position: relative; }
#view .game-host .g-hilo .stage { background-image: radial-gradient(38% 45% at 50% 42%, rgba(255, 46, 136, .10), transparent 70%), radial-gradient(38% 45% at 50% 42%, rgba(46, 196, 255, .08), transparent 70%); }
/* Video Póker: brillo de pantalla CRT sobre la tabla de pagos */
#view .game-host .g-vpoker .paytable { box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 213, 46, .18), inset 0 0 40px rgba(0, 0, 0, .35); }
/* Rueda y ruleta: halo detrás de la rueda */
#view .game-host :is(.g-wheel .stage, .g-roulette .wheel-panel) { background-image: radial-gradient(42% 42% at 50% 50%, rgba(212, 175, 55, .12), transparent 70%); }
/* Rascá y Ganá: la tarjeta con más cuerpo */
#view .game-host .g-scratch .ticket { box-shadow: 0 34px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .8); }
/* Slot: marco del gabinete con luz */
#view .game-host .g-slot .sl-canvas { box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 60px rgba(124, 58, 237, .25), 0 24px 60px rgba(0, 0, 0, .6); }

/* ==========================================================================
   Juego móvil: controles cómodos, barras compactas y contenido sin recortes
   ========================================================================== */
@media (max-width: 720px) {
  #view .game-host,
  #view .game-host > [class^="g-"] {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    height: auto;
    overflow-x: clip;
  }

  #view .game-host > [class^="g-"] {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  /* La mesa ya tiene la navegación global: la cabecera interna solo informa. */
  #view .game-host :is(.ab-top, .bc-top, .bj-top, .ch-top, .cr-top, .dc-top, .dt-top, .hl-top, .kn-top, .mn-top, .pk-top, .rl-top, .sc-top, .sb-top, .sl-top, .tw-top, .vp-top, .wh-top) {
    min-width: 0;
    min-height: 48px;
    padding: 6px 10px;
    gap: 8px;
    flex-wrap: wrap;
  }

  #view .game-host :is(.ab-brand, .bc-brand, .bj-brand, .ch-brand, .cr-brand, .dc-brand, .dt-brand, .hl-brand, .kn-brand, .mn-brand, .pk-brand, .sb-brand, .sl-brand, .tw-brand, .vp-brand, .wh-brand, .rl-top .brand) {
    min-width: 0;
    font-size: 13px;
    letter-spacing: .12em;
    white-space: nowrap;
  }

  #view .game-host :is(.ab-brand, .bc-brand, .bj-brand, .ch-brand, .cr-brand, .dc-brand, .dt-brand, .hl-brand, .kn-brand, .mn-brand, .pk-brand, .sb-brand, .sl-brand, .tw-brand, .vp-brand, .wh-brand) small,
  #view .game-host :is(.history-label, .rail-label) {
    display: none;
  }

  #view .game-host .stat { flex: 0 0 auto; }
  #view .game-host .stat span { font-size: 8px; letter-spacing: .1em; }
  #view .game-host .stat b { font-size: 13px; }

  #view .game-host :is(.ab-msg, .bc-msg, .bj-msg, .cr-msg, .dt-msg, .hl-msg, .kn-msg, .pk-msg, .sc-msg, .sb-msg, .sl-msg, .vp-msg) {
    order: 20;
    flex: 1 0 100%;
    min-width: 0;
    min-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
  }

  /* Objetivos táctiles. Los tableros conservan sus propias medidas. */
  #view .game-host :is(.btn, .link, .preset, .stepper button, .seg button, .sl-stepper button, .close) {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  #view .game-host :is(input[type="number"], input[type="text"], select) {
    min-height: 44px;
    font-size: 16px;
  }

  /* Las fichas quedan en una sola fila desplazable, sin empujar las acciones. */
  #view .game-host .rail {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 6px 2px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #view .game-host .rail::-webkit-scrollbar { display: none; }
  #view .game-host .rail .chip { flex: 0 0 44px; width: 44px; height: 44px; }

  #view .game-host :is(.ab-controls, .bc-controls, .bj-controls, .cr-controls, .dc-controls, .dt-controls, .kn-controls, .pk-controls, .sc-controls, .sb-controls, .vp-controls, .wh-controls, .sl-bar) {
    width: 100%;
    min-width: 0;
    gap: 8px;
    padding: 9px 10px max(10px, env(safe-area-inset-bottom));
  }

  #view .game-host :is(.actions, .action, .sl-actions) {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
  }

  /* Cuatro acciones caben en una sola fila: libera alto para el tablero en teléfonos. */
  #view .game-host :is(.actions, .sl-actions):has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #view .game-host :is(.actions, .action, .sl-actions) .btn {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: 8px;
    white-space: normal;
    line-height: 1.15;
  }

  #view .game-host :is(.actions, .sl-actions):has(> :nth-child(4):last-child) .btn {
    padding-inline: 5px;
    font-size: 10.5px;
    letter-spacing: .04em;
  }

  #view .game-host :is(.btn.primary, .btn.spin, .btn.go, .btn.cashout) {
    min-height: 52px;
  }

  /* Mesas anchas pueden desplazarse sin ensanchar toda la página. */
  #view .game-host :is(.table-scroll, .paytable-wrap) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  #view .game-host :is(.modal, .sl-modal, .prompt) {
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }

  #view .game-host :is(.modal-card, .prompt-card, .sl-modal-card, .pt, .modal .card-box) {
    width: min(100%, 640px);
    max-width: 100%;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 16px;
    overflow: auto;
  }

  #view .game-host .toast {
    bottom: max(12px, env(safe-area-inset-bottom));
    width: max-content;
    max-width: calc(100vw - 24px);
    text-align: center;
  }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1200px) {
  #view .game-host,
  #view .game-host > [class^="g-"] { width: 100%; min-width: 0; height: auto; min-height: 100%; overflow-x: clip; }
  #view .game-host :is(.ab-top, .bc-top, .bj-top, .ch-top, .cr-top, .dc-top, .dt-top, .hl-top, .kn-top, .mn-top, .pk-top, .rl-top, .sc-top, .sb-top, .sl-top, .tw-top, .vp-top, .wh-top) { min-height: 44px; padding: 4px 10px; }
  #view .game-host :is(.btn, .link, .preset, .stepper button, .seg button, .sl-stepper button) { min-height: 42px; touch-action: manipulation; }
  #view .game-host :is(.modal, .sl-modal, .prompt) { position: fixed; inset: 0; z-index: 100; }

  /* La ruleta acostada tiene su propio reparto (rueda | paño y controles): ver games/roulette/roulette.css. */
}

/* ==========================================================================
   HISTORIA 1.1 — los botones del juego, siempre visibles en el celular

   Mientras se juega, la pantalla de juego ocupa exactamente el alto disponible: el tablero se
   achica (y scrollea por dentro si hace falta) y la zona de controles conserva su tamaño, así el
   botón principal nunca queda fuera de la vista. Quién es "tablero" y quién es "controles" lo
   marca platform/core/mobilefit.js con data-fit-*, porque cada juego los nombra distinto.
   ========================================================================== */
@media (max-width: 1024px), (max-height: 720px) {
  /* Jugando: sin scroll de página y sin barra de navegación abajo (el botón "‹ Lobby" ya está arriba). */
  body[data-playing] #shell { height: 100dvh; min-height: 100dvh; }
  body[data-playing] #view { overflow: hidden; padding-bottom: 0; }
  body[data-playing] .mobile-nav:not([hidden]) { display: none; }
  body[data-playing] .shell-header { position: static; }

  /* La cáscara también tiene que estar acotada: si queda en alto automático, el 100% del juego no resuelve. */
  body[data-playing] #view .game-host {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  #view .game-host > [data-fit-root] {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
  }
  /* El contenedor que reparte el alto entre tablero y controles. */
  #view .game-host [data-fit-area] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  /* El tablero cede: se encoge hasta lo que haya y scrollea por dentro como último recurso. */
  #view .game-host [data-fit-board] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /*
     Los controles no ceden, pero tampoco pueden comerse la pantalla: los paneles con tabla de
     premios llegaban a 668 px de 804 y dejaban la tarjeta en cero. Con tope, el panel se desliza
     por dentro y la fila del botón queda pegada abajo, siempre a mano.
  */
  #view .game-host [data-fit-dock] {
    flex: 0 0 auto;
    /*
       Reparto: los controles no pasan del 55 % y el tablero nunca baja de 110 px. Sin el 55 %, un
       panel con tabla de premios dejaba la raspadita en 94 px: el botón se veía, pero el juego no
       se podía jugar. Lo que no entra en el panel se desliza por dentro, con el botón fijo abajo.
    */
    max-height: min(55%, calc(100% - 110px));
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  #view .game-host [data-fit-dock]::-webkit-scrollbar { width: 0; }
  #view .game-host [data-fit-action][data-fit-action][data-fit-action] {
    position: sticky;
    bottom: var(--fit-bottom, 0px);
    z-index: 3;
  }
  /*
     La cortina oscura sirve para que el contenido que pasa por detrás no se mezcle con los
     controles. Pero cuando lo que queda fijo es el BOTÓN, pintarla le tapaba el dorado: el
     "Apostar" y el "Comprar" se veían negros en 9 juegos. Va solo en las filas contenedoras.
  */
  #view .game-host [data-fit-action]:not(.btn):not(button) {
    padding-top: 8px;
    /* Opaca de verdad en la parte de abajo: si no, el tablero se ve a través de los botones. */
    background: linear-gradient(180deg, rgba(10, 12, 16, .6), rgba(10, 12, 16, .97) 42%, rgb(10, 12, 16));
  }
  /* Un panel lateral que en el celular cae debajo no necesita seguir siendo una columna alta. */
  #view .game-host [data-fit-dock]:is(.panel, .ticket) { min-height: 0; }
  /*
     La tarjeta de las raspaditas tiene proporción fija (4:5). Para que siga el alto disponible en
     vez del ancho, la fila del tablero tiene que tener alto definido: con la fila en "auto" crecía
     con la tarjeta y el 100 % no resolvía, así que la tarjeta se salía y había que deslizarla.
  */
  #view .game-host .g-scratch [data-fit-board] { grid-template-rows: minmax(0, 1fr); }
  #view .game-host .g-scratch [data-fit-board] .ticket {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
}

/* ==========================================================================
   Celular acostado: tablero a la izquierda, controles en columna a la derecha
   --------------------------------------------------------------------------
   Acostado quedan ~250 px de alto. Con los controles apilados abajo (como parado) el tablero
   quedaba en nada: Cascada en 0 px, las mesas de cartas en una franja, la ruleta con las fichas
   encima del paño. mobilefit.js marca el área con data-fit-side cuando los controles son altos y
   deja en --fit-rows / --fit-row cómo son las filas de ese juego; acá se arma la grilla.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1200px) {
  #view .game-host [data-fit-area][data-fit-side] {
    /* Ancho de la columna de controles; un juego puede cambiarlo. Mínimo 260 px: con 240 (iPhone SE acostado,
       667 px) los botones de las mesas se pisaban y "Repartir" quedaba cortado. */
    --fit-side-w: clamp(260px, 36%, 320px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--fit-side-w);
    grid-template-rows: var(--fit-rows, minmax(0, 1fr));
    column-gap: 10px;
    align-items: stretch;
  }
  /* Cabecera, tiras de resultados y demás: a lo ancho, cada uno en su fila. */
  #view .game-host [data-fit-area][data-fit-side] > * { grid-column: 1 / -1; min-width: 0; }
  #view .game-host [data-fit-area][data-fit-side] > [data-fit-board] { grid-column: 1; grid-row: var(--fit-row, 1); }
  #view .game-host [data-fit-area][data-fit-side] > [data-fit-dock] {
    grid-column: 2;
    grid-row: var(--fit-row, 1);
    max-height: none;          /* la fila ya lo acota: el panel ocupa todo el alto y se desliza por dentro */
    min-height: 0;
    width: auto;
    margin: 0;
    border-top: 0;
    align-content: start;
  }
}
/*
   Celular acostado angosto (≤ 720 px, p. ej. 667×375): acá también corren las reglas del celular parado, que ponen
   las fichas en UNA fila deslizable y las acciones en una grilla de 4. En la columna de controles (~260 px) eso
   dejaba fichas escondidas a la derecha y "Deshacer/Limpiar/Repetir/Repartir" pisándose. Dentro de la columna:
   fichas en varias filas, y acciones de a tres con el botón principal a lo ancho debajo.
*/
@media (orientation: landscape) and (max-height: 600px) and (max-width: 720px) {
  #view .game-host [data-fit-area][data-fit-side] > [data-fit-dock] .rail { flex-wrap: wrap; overflow: visible; gap: 6px; }
  #view .game-host [data-fit-area][data-fit-side] > [data-fit-dock] .rail .chip { flex: 0 0 38px; width: 38px; height: 38px; }
  /* Solo con 4 botones o más (Deshacer/Limpiar/Repetir + principal); con 2 o 3 (Auto + Soltar) queda la grilla de siempre. */
  #view .game-host [data-fit-area][data-fit-side] > [data-fit-dock] .actions:has(> :nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #view .game-host [data-fit-area][data-fit-side] > [data-fit-dock] .actions:has(> :nth-child(4)) .btn { min-height: 42px; padding-inline: 4px; font-size: 10px; letter-spacing: .03em; }
  #view .game-host [data-fit-area][data-fit-side] > [data-fit-dock] .actions:has(> :nth-child(4)) > :is(.primary, .spin, .go):last-child { grid-column: 1 / -1; font-size: 14px; letter-spacing: .16em; }
}