/* betados-polish.v1-20261001.css — Acabado estético final de la sala betados (sólo esta sala; no la cargan las otras).
   Se enlaza como ÚLTIMA hoja del <head> de su index.html (se aplica desde el primer pintado, sin saltos de diseño).
   Cada selector lleva el prefijo "html body" para conservar el desempate frente a las hojas compartidas enlazadas al
   final del <body>. Sólo presentación: no cambia textos, enlaces, IDs, clases ni lógica; no toca .hidden/[hidden].
   Reversión: quitar el <link> de index.html. Detalle: artifacts/rooms-polish-20261001/. */

/* Betados · área "estructura, navegación e imágenes" — VERIFICADO (verificador adversarial, 01/10/2026).
   Forma final: todas las reglas con prefijo "html body". Sólo presentación: no cambia textos, enlaces, IDs, clases ni
   lógica; nada sobre .hidden/[hidden]; sin animaciones infinitas (transiciones <= 180 ms de transform/box-shadow/
   filter/colores, sólo con prefers-reduced-motion: no-preference). Paleta propia de Betados (ámbar #ff9f1a/#ffb22d,
   gradiente #ffa51f→#ffbd31 de su .primary-submit, negro cálido).
   Cambios del verificador respecto de qa/proposals/betados/estructura.css:
   - 02: el aviso de instalación en teléfono vuelve a respetar safe-area (max() con env()).
   - 01: los enlaces del pie (Soporte/Privacidad/Términos, hoy ocultos porque la config usa rutas relativas) centran
         su texto en los 40/34 px de alto (inline-flex) para alinearse con «Preferencias de privacidad».
   - 03: en teléfono los CTA del encabezado conservan 44 px de alto (la propuesta los bajaba a 40 px).
   - 12: además de compactar, el bono lateral queda fijo (sticky) abajo del menú: visible sin desplazar con alturas de
         ventana reales (1366×768 con barra del navegador ≈ 657 px, iPad horizontal ≈ 700 px).
   - 05: tope mínimo de 160 px para el menú del botón M en teléfonos horizontales.
   - 08: NO incluido (duplicado de betados-catalogo-15, que usa z 81/82 por el botón de soporte en z 80).
   - 14: el encabezado del modal de acceso usa la variante WebP del hero (si no, abría el login bajando hero.png de
         543 KB, que ya no se precarga). Acoplado a las variantes de estructura-14.
   !important sólo para vencer !important compartidos (02 y 09: .chv-account-header; 04: rótulo de multisala.css).
   Verificación (qa/probe.mjs, CSP real, 0 escrituras, 0 errores JS):
   - qa/probe/betados-estrv-a (home-clean, home-auth, toast) y -b (actions, menu) × 10 anchos 320–1920: hOverflow 0;
     overflow 0 salvo la imagen del botón M ±1 px a 390 (animación compartida multisala-float, ajena a esta hoja);
     contraste < 4,5 0 (salvo el pie del cajón, que corrige betados-catalogo-15); solapes de «actions» 0.
   - qa/probe/betados-estrv-c (catalog, login, register, wallet, profile, payment, gameshell × 360/834/1440): 834 sin
     desborde (antes 4 por estado); ningún contraste nuevo; los solapes restantes son la página detrás del modal.
   - qa/probe/betados-estrv-combo (catalogo.css + esta hoja): sin desbordes ni contrastes; drawer de catalogo-15 OK.
   - qa/probe/betados-estrv-tools (measure.mjs): 600/700/900/1100/1366, alturas reales 657–950 (bono a la vista),
     títulos sin truncar 320–1366, rótulos de la barra inferior sin truncar, toast centrado en la columna, y el
     index.html modificado + variantes WebP (imágenes propias 5,4 MB → 166–231 KB, CSP sin violaciones nuevas). */

/* ---------------------------------------------------------------- betados-estructura-02 (modificado)
   Un mismo eje lateral para encabezado, contenido, aviso de instalación y pie: 8 px (≤430), 14 px (431–820),
   18 px (821–1180, = padding del menú lateral) y 28 px (≥1181). */
@media (min-width: 821px) {
  html body { --bd-gutter: 18px; --bd-side: 250px; }
  html body main,
  html body .site-header,
  html body > footer { padding-left: var(--bd-gutter); padding-right: var(--bd-gutter); }
  /* Vence .chv-account-header{padding-left/right:10px!important} (≤900, sesión iniciada). */
  html body .site-header.chv-account-header { padding-left: var(--bd-gutter) !important; padding-right: var(--bd-gutter) !important; }
  html body .multisala-app-tools[data-skin="betados"] {
    width: calc(100% - var(--bd-side) - 2 * var(--bd-gutter));
    max-width: calc(1700px - 2 * var(--bd-gutter));
    margin-left: calc(var(--bd-side) + var(--bd-gutter));
    margin-right: var(--bd-gutter);
  }
}
@media (min-width: 1181px) {
  html body { --bd-gutter: 28px; --bd-side: 320px; }
}
@media (max-width: 820px) {
  html body .multisala-app-tools { width: calc(100% - 2 * max(14px, env(safe-area-inset-left), env(safe-area-inset-right))); }
  html body .site-header.chv-account-header { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 430px) {
  html body .multisala-app-tools { width: calc(100% - 2 * max(8px, env(safe-area-inset-left), env(safe-area-inset-right))); }
  html body .site-header.chv-account-header { padding-left: 8px !important; padding-right: 8px !important; }
}

/* ---------------------------------------------------------------- betados-estructura-01 (modificado)
   Pie: desborde horizontal entre 821 y ~1000 px (834: documento de 906 px). La columna 1fr no podía encogerse por
   debajo de la barra (flex sin wrap). Además: enlaces del pie de 21 px de alto y leyenda 18+ con 4,24:1. */
html body > footer > * { min-width: 0; }
html body > footer nav { flex-wrap: wrap; column-gap: 22px; row-gap: 0; }
html body > footer nav button,
html body > footer .platform-footer-links > a,
html body > footer .platform-footer-links > button {
  min-height: 40px;
  white-space: nowrap;
  border-radius: 8px;
}
/* Los <a> no centran su texto como los <button>: mismo renglón visual que «Preferencias de privacidad». */
html body > footer .platform-footer-links > a { display: inline-flex; align-items: center; }
html body > footer nav button:hover,
html body > footer .platform-footer-links > a:hover,
html body > footer .platform-footer-links > button:hover { color: #ffc85a; }
html body > footer :is(nav button, .platform-footer-links > a, .platform-footer-links > button):focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }
html body > footer nav button { color: #d2cfd8; font-size: 14px; font-weight: 600; }
html body > footer .platform-footer-links > :is(a, button) { color: #b9b6c1; font-size: 13px; }
html body > footer .platform-footer-links > small { color: #8f8c97; font-size: 12px; }
html body > footer > p { color: #8f8c97; }
@media (min-width: 821px) {
  html body > footer {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 36px;
    row-gap: 6px;
    padding-top: 28px;
    padding-bottom: 28px;
  }
  html body > footer nav button,
  html body > footer .platform-footer-links > a,
  html body > footer .platform-footer-links > button { min-height: 34px; }
  html body > footer .footer-logo img { width: 168px; height: auto; }
  /* Hueco para el botón M (fijo abajo a la derecha): nunca tapa un enlace del pie. */
  html body > footer { padding-right: max(var(--bd-gutter), 96px); }
}
@media (min-width: 821px) and (max-width: 1180px) {
  html body > footer { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  html body > footer .footer-logo { grid-row: auto; justify-self: start; margin-bottom: 6px; }
}
@media (max-width: 820px) {
  html body > footer nav { justify-content: center; column-gap: 18px; margin: 8px 0 4px; }
  html body > footer .platform-footer-links { margin: 0 0 8px; }
  html body > footer { padding-bottom: 72px; }
}

/* ---------------------------------------------------------------- betados-estructura-03 (modificado)
   Conversión: «Crear cuenta» (acción principal sin sesión) era marrón apagado #a95714 con 3,84:1 y el mismo peso que
   «Iniciar sesión». Pasa al gradiente de acento de Betados; «Iniciar sesión» queda secundario. «Reclamar» del bono
   lateral (3,85:1) igual. T/W (no disponibles) con borde azul/verde competían con los CTA: borde neutro. */
html body .site-header .register-button,
html body .betados-sidebar .sidebar-bonus > span {
  border: 1px solid #ffc048;
  background: linear-gradient(105deg, #ffa51f, #ffbd31);
  color: #1a1206;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(255, 159, 26, .26), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html body .site-header .login-button {
  border-color: #3a3940;
  background: #1c1c20;
  color: #f7f6f4;
}
html body .site-header .login-button,
html body .site-header .register-button { border-radius: 12px; }
html body .site-header .register-button:hover,
html body .site-header .login-button:hover { filter: brightness(1.07); }
html body .site-header .login-button:hover { border-color: #6b5434; }
html body .site-header :is(.register-button, .login-button, .round-action, .balance-button, .profile-button, .hamburger):focus-visible,
html body .betados-sidebar :is(button, a):focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }
html body .site-header .round-action.telegram,
html body .site-header .round-action.whatsapp { border-color: #2c2b31; color: #c9c6cf; }
html body .site-header .round-action.telegram:hover { border-color: #269fd8; color: #fff; }
html body .site-header .round-action.whatsapp:hover { border-color: #15bd58; color: #fff; }
@media (min-width: 821px) {
  html body .site-header .header-actions { gap: 8px; }
  html body .site-header .round-action { width: 44px; height: 44px; border-radius: 12px; }
  html body .site-header .login-button,
  html body .site-header .register-button { height: 44px; min-height: 44px; padding: 0 20px; font-size: 14px; line-height: 1; white-space: nowrap; }
}
@media (max-width: 820px) {
  /* 44 px de alto (como hoy, por room-layout.css): área táctil completa para la acción principal. */
  html body .site-header .login-button,
  html body .site-header .register-button { min-height: 44px; height: 44px; border-radius: 11px; font-size: 12px; white-space: nowrap; }
  html body .site-header .login-button { background: transparent; border-color: #45434b; }
}
/* 320–359 px: el secundario («Iniciar sesión») pasa a dos renglones compactos y el principal queda en una línea. */
@media (max-width: 359px) {
  html body .site-header .login-button { max-width: 72px; padding: 0 8px; white-space: normal; font-size: 11px; line-height: 1.05; }
  html body .site-header .register-button { padding: 0 10px; }
}

/* ---------------------------------------------------------------- betados-estructura-12 (modificado)
   Conversión: el bloque «Gran bono de depósito / Reclamar» quedaba bajo el pliegue del menú lateral. Se compacta el
   menú en pantallas bajas (botones 50/46 px) y, además, el bono queda pegado abajo (sticky) cuando el menú no entra:
   el resto del menú se desplaza por detrás y todos sus ítems siguen accesibles. */
@media (min-width: 821px) and (max-height: 1000px) {
  html body .betados-sidebar { gap: 14px; padding-top: 18px; padding-bottom: 18px; }
  html body .betados-sidebar .sidebar-brand { min-height: 60px; }
  html body .betados-sidebar nav { gap: 6px; }
  html body .betados-sidebar nav button { min-height: 50px; }
  html body .betados-sidebar .sidebar-bonus { min-height: 118px; padding: 18px 20px; gap: 12px; }
  html body .betados-sidebar .sidebar-bonus strong { font-size: 19px; }
}
@media (min-width: 821px) and (max-width: 1180px) and (max-height: 1000px) {
  html body .betados-sidebar nav { gap: 5px; }
  html body .betados-sidebar nav button { min-height: 46px; padding: 0 14px; grid-template-columns: 26px 1fr; gap: 10px; font-size: 14px; }
  html body .betados-sidebar .sidebar-brand > button { width: 46px; height: 46px; border-radius: 14px; }
}
@media (min-width: 821px) {
  html body .betados-sidebar .sidebar-bonus {
    position: sticky;
    bottom: 0;
    z-index: 1;
    flex-shrink: 0;
    box-shadow: 0 -14px 22px -4px #08080a;
  }
}
html body .betados-sidebar > small { color: #8d8a95; }
html body .betados-sidebar .sidebar-bonus > span { border-radius: 10px; }

/* ---------------------------------------------------------------- betados-estructura-06
   Botón M en escritorio: bottom:0 recortaba 16–17 px de su imagen; entre 821 y 950 flotaba a 76 px de una barra
   inferior que en Betados sólo existe hasta 820 px. */
@media (min-width: 821px) {
  html body .multisala-actions {
    right: max(22px, calc(env(safe-area-inset-right) + 8px));
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 8px));
  }
}

/* ---------------------------------------------------------------- betados-estructura-05 (modificado: tope mínimo)
   Menú del botón M: en teléfono llegaba a y≈8 y a 1024×768 a y≈2, encima del encabezado. Tope de alto con
   desplazamiento propio (mínimo 160 px en teléfonos horizontales). Ítems agregados por JS sin .action-icon. */
@media (max-width: 820px) {
  html body .multisala-actions .multisala-menu {
    max-height: max(160px, calc(100dvh - 218px - env(safe-area-inset-bottom) - env(safe-area-inset-top)));
  }
}
@media (min-width: 821px) {
  html body .multisala-actions .multisala-menu {
    max-height: calc(100dvh - 190px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
html body .multisala-menu > #multisalaPushSettings::before,
html body .multisala-menu > #multisalaTourSettings::before {
  content: "";
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}
html body .multisala-menu > #multisalaTourSettings::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
html body .multisala-menu > :is(button, a):focus-visible { outline: 3px solid #ffd27a; outline-offset: -3px; }

/* ---------------------------------------------------------------- betados-estructura-07
   Toast: left:50% limitaba su ancho a 50vw (180 px y 4 renglones a 360), gris de otra sala y, en escritorio,
   centrado en la ventana y no en la columna de contenido. */
html body #toast.toast {
  width: max-content;
  max-width: min(460px, calc(100vw - 32px));
  border-color: #6b4a1e;
  border-radius: 14px;
  background: #1a1612;
  color: #fff8ec;
  font-weight: 650;
  line-height: 1.35;
  text-wrap: balance;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 176, 32, .08), 0 0 22px rgba(255, 159, 26, .12);
}
@media (min-width: 821px) {
  html body #toast.toast {
    left: calc(var(--bd-side) + (100% - var(--bd-side)) / 2);
    max-width: min(460px, calc(100vw - var(--bd-side) - 2 * var(--bd-gutter)));
  }
}

/* ---------------------------------------------------------------- betados-estructura-04
   Barra inferior (teléfono): «Cargar» (conversión con sesión) igual que el resto; rótulos de 9 px; «Mi cuenta» con un
   glifo «●» distinto a los íconos de línea (el glifo sigue en el DOM, sólo se vuelve transparente). */
@media (max-width: 820px) {
  html body nav.mobile-bottom-nav.mobile-nav > button > span:last-child { font-size: 10.5px !important; line-height: 12px !important; font-weight: 700; }
  html body nav.mobile-bottom-nav.mobile-nav > button { border-radius: 14px; }
  html body nav.mobile-bottom-nav.mobile-nav > button[data-mobile-action="wallet"] {
    background: linear-gradient(180deg, rgba(255, 159, 26, .22), rgba(255, 159, 26, .08));
    box-shadow: inset 0 0 0 1px rgba(255, 178, 45, .5);
    color: #ffc04a;
  }
  html body nav.mobile-bottom-nav.mobile-nav > button[data-mobile-action="wallet"] > img {
    filter: grayscale(1) brightness(1.5) sepia(1) saturate(5) hue-rotate(-8deg);
  }
  html body nav.mobile-bottom-nav.mobile-nav > button > .account-icon {
    width: 20px;
    height: 20px;
    color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d0d0d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  }
  html body nav.mobile-bottom-nav.mobile-nav > button.active > .account-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb22d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  }
  html body nav.mobile-bottom-nav.mobile-nav { background: #0f0e11; border-top-color: #2a2730; }
  html body nav.mobile-bottom-nav.mobile-nav > button:focus-visible { outline: 3px solid #ffd27a; outline-offset: -3px; }
}

/* ---------------------------------------------------------------- betados-estructura-09
   Con sesión en teléfono, la hamburguesa quedaba en 28 px (regla compartida de la cuenta) → 36 px; entre 320 y
   359 px el logo se encogía a 66×15 px con espacio libre en la barra → hasta 92 px. */
@media (max-width: 900px) {
  html body .site-header.chv-account-header .hamburger {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
  }
}
@media (max-width: 359px) {
  html body .site-header.chv-account-header > .brand { max-width: 92px; }
}

/* ---------------------------------------------------------------- betados-estructura-10
   Puntos del carrusel 8×8 px (pausa 17×20) a 6 px: separación de 12 px, área táctil invisible por punto y pausa
   de 28×28. Punto activo en el gradiente ámbar de la sala. */
html body .hero-carousel .carousel-dots { gap: 12px; min-height: 32px; }
html body .hero-carousel .carousel-dots > button { position: relative; }
html body .hero-carousel .carousel-dots > button::after { content: ""; position: absolute; inset: -10px -6px; }
html body .hero-carousel .carousel-dots > button.active { background: linear-gradient(90deg, #ffa51f, #ffbd31); }
html body .hero-carousel .carousel-dots > [data-carousel-pause] { min-width: 28px; height: 28px; border-radius: 8px; color: #e9e6ee; }
html body .hero-carousel .carousel-dots > [data-carousel-pause]::after { inset: 0; }
html body .hero-carousel .carousel-dots > button:focus-visible { outline: 2px solid #ffd27a; outline-offset: 3px; }

/* ---------------------------------------------------------------- betados-estructura-11
   Jerarquía del inicio: «Proveedores destacados» 22/18 px y las filas del mismo nivel 15/13 px. Un solo nivel:
   19 px escritorio, 15 px teléfono, 14 px ≤374. */
html body .new-provider-section > h2,
html body #homeRows.home-rows .home-row-header h2 { font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
html body .new-provider-section > h2 { margin-bottom: 12px; gap: 9px; }
html body .new-provider-section > h2 > span,
html body #homeRows.home-rows .home-row-header h2 .pink-bar { width: 4px; height: 1.05em; border-radius: 4px; }
html body #homeRows.home-rows .row-more { color: #f0d9b0; }
html body #homeRows.home-rows .row-more:hover { color: #ffc85a; }
@media (max-width: 820px) {
  html body .new-provider-section > h2,
  html body #homeRows.home-rows .home-row-header h2 { font-size: 15px; }
  html body .new-provider-section > h2 { margin-bottom: 10px; }
}
@media (max-width: 374px) {
  html body .new-provider-section > h2,
  html body #homeRows.home-rows .home-row-header h2 { font-size: 14px; }
}

/* ---------------------------------------------------------------- betados-estructura-13
   Diversión: microinteracciones cortas (elevación, brillo ámbar, presión) sólo con prefers-reduced-motion:
   no-preference; hover sólo con puntero fino. Colchón de 6 px en las pistas para que la elevación no se recorte,
   compensado con margen (el contenido no se mueve). */
html body .category-rail { padding-top: 6px; margin-top: 12px; }
@media (max-width: 820px) { html body .category-rail { margin-top: 4px; } }
html body #homeRows.home-rows .game-row-track { padding-top: 6px; margin-top: -4px; }
html body .category-rail button:focus-visible,
html body .new-provider-cards button:focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  html body .category-rail button,
  html body .new-provider-cards button,
  html body .betados-sidebar nav button,
  html body .betados-sidebar .sidebar-bonus,
  html body .site-header .register-button,
  html body .site-header .login-button,
  html body nav.mobile-bottom-nav.mobile-nav > button,
  html body .mobile-menu .mobile-account button {
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background-color .16s ease, border-color .16s ease;
  }
  html body .new-provider-cards button img { transition: transform .18s ease; }
  html body .category-rail button:active,
  html body .new-provider-cards button:active,
  html body .betados-sidebar nav button:active,
  html body .betados-sidebar .sidebar-bonus:active,
  html body .site-header .register-button:active,
  html body .site-header .login-button:active,
  html body nav.mobile-bottom-nav.mobile-nav > button:active,
  html body .mobile-menu .mobile-account button:active,
  html body #homeRows .game-card:active { transform: scale(.97); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html body .category-rail button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .35), 0 0 16px rgba(255, 159, 26, .18); }
  html body .new-provider-cards button:hover { transform: translateY(-2px); border-color: #ffb020; box-shadow: 0 12px 26px rgba(0, 0, 0, .4), 0 0 18px rgba(255, 159, 26, .16); }
  html body .new-provider-cards button:hover img { transform: scale(1.03); }
  html body .betados-sidebar nav button:hover { transform: translateX(3px); }
  html body .betados-sidebar .sidebar-bonus:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, .4), 0 0 26px rgba(255, 159, 26, .2); }
  html body .site-header .register-button:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255, 159, 26, .38), inset 0 1px 0 rgba(255, 255, 255, .35); }
  html body #homeRows .game-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 159, 26, .2); }
}

/* ---------------------------------------------------------------- betados-estructura-14 (CSS acoplado a las variantes)
   El hero deja de precargar hero.png (543 KB): el banner del modal de acceso (betados.css) usa la misma variante WebP
   del carrusel para que «Iniciar sesión / Crear cuenta» no abra con el encabezado vacío. Mismo degradé. */
html body .betados-auth-banner {
  background:
    linear-gradient(90deg, rgba(34, 17, 48, .18), rgba(255, 140, 19, .08)),
    url("assets/betados/hero-1400.v1-20261001.webp") center / cover;
}

/* VERIFICADO (verificador adversarial, 01/10/2026): las 15 reglas de catalogo.css aceptadas; tres ajustes marcados
   "(verificado)": pestañas del registro a 44 px en pantallas <= 820 px de alto (09) y barra/indicador del juego acotados
   a la barra propia de la sala, sin tocar la apertura de Chavito (14). Pruebas: qa/probe/betados-verif-cat-* (0 errores
   JS, 0 escrituras). Si se integra junto con estructura-08 (mismo menú lateral), conservar este bloque 15: gana por
   especificidad y deja el menú por encima del botón de soporte (z 80).
   Betados · área "catálogo, búsqueda y modales" — propuesta para betados-polish.v1-20261001.css.
   Selectores con el prefijo "html body" (+0,0,2): el resultado es el mismo con la hoja al final del <head> que frente a
   las hojas compartidas del final del <body>.
   Paleta propia de Betados (betados.css): oro #ffb020 (--gold), naranja #ff9f1a (--pink), oro claro #ffb22d (--pink2),
   texto #f8f7f5, apagado #aaa8b0, pozo de campo #151518 / borde #333238, superficie de modal #242428, cálido oscuro
   #201b16 / #4d3a25 (menú de acciones de la sala). Anillo de foco: #ffd27a (oro claro, >= 9:1 sobre los fondos de la sala).
   Sin reglas sobre .hidden/[hidden], sin estilos inline, sin fuentes externas, sin animaciones infinitas.
   Microinteracciones sólo con transform/opacity/box-shadow, <= 180 ms y dentro de prefers-reduced-motion: no-preference.
   !important sólo en betados-catalogo-07 (vence a `.auth-operator{color:#666!important}` de celuapuestas.css). */

/* ---------------------------------------------------------------- betados-catalogo-01
   Grilla del catálogo con portadas de tamaño coherente. Hoy: 3 columnas hasta 820 px (241 px de portada a 768), 6 desde
   821 con la barra lateral de 250 px (86 px a 834, 118 a 1024) y 8 desde 1181 (108 px a 1280, más chicas que a 1024).
   Columnas que dividen 48 y 144 (páginas de 48 + 96 de app.covers-ux-v5.js): 4 de 701 a 1099 (corte de los carruseles
   de lobby-v8), 6 de 1100 a 1599 y 8 desde 1600. Portada resultante 130–200 px en todo el rango >= 701. */
@media (min-width: 701px) and (max-width: 1099px) {
  html body #gamesGrid.games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) and (max-width: 1599px) {
  html body #gamesGrid.games-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
  html body #gamesGrid.games-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- betados-catalogo-02
   Portada protagonista y "casino vivo": al pasar el mouse la portada quedaba tapada por un velo naranja al 76 %
   (rgba(178,93,18,.76)) y sin borde visible (lobby-v8 quita el borde). Velo oscuro sólo abajo, ficha de "jugar" en el oro
   de la sala, anillo dorado y leve elevación; al presionar, leve hundimiento (también en táctil). Foco con el mismo oro
   claro que el resto de los controles (antes blanco, currentColor de room-layout.css). */
html body #gamesGrid .game-card .play-overlay {
  background: linear-gradient(180deg, rgba(9, 9, 11, .05) 30%, rgba(9, 9, 11, .62));
}
html body #gamesGrid .game-card .play-overlay::after {
  width: 46px;
  height: 46px;
  background: linear-gradient(105deg, #ffa51f, #ffbd31);
  color: #171006;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 0 4px rgba(255, 176, 32, .22);
}
html body #gamesGrid .game-card:focus-visible { outline-color: #ffd27a; }
@media (hover: hover) and (pointer: fine) {
  html body #gamesGrid .game-card:hover {
    z-index: 1;
    box-shadow: 0 0 0 2px #ffb020, 0 12px 26px rgba(255, 159, 26, .24);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html body #gamesGrid .game-card { transition: transform .18s ease, box-shadow .18s ease; }
  html body #gamesGrid .game-card .play-overlay::after { transition: transform .18s ease; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html body #gamesGrid .game-card:hover { transform: translateY(-4px); }
  html body #gamesGrid .game-card:hover .play-overlay::after { transform: scale(1.08); }
}
/* Después del bloque de hover (misma especificidad): el hundimiento gana también con el mouse encima. */
@media (prefers-reduced-motion: no-preference) {
  html body #gamesGrid .game-card:active { transform: scale(.97); }
}

/* ---------------------------------------------------------------- betados-catalogo-03
   Chips de categoría: 16 px/400 (cuerpo de texto) en una sala que rotula todo en negrita y 39 px de alto; el activo se
   distinguía sólo por un borde. Misma voz que la barra lateral, 40 px de alto y activo en oro suave (sin competir con
   los botones principales). En teléfono 13 px para que entren más chips en la primera vista. */
html body #gamesSection .category-chip {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  color: #e4e1e8;
}
html body #gamesSection .category-chip:hover { border-color: #ffb020; background: #221b13; color: #fff; }
html body #gamesSection .category-chip.active { border-color: #ffb020; background: #3a2914; color: #ffc85a; }
html body #gamesSection .category-chip:focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }
@media (max-width: 820px) {
  html body #gamesSection .category-chip { padding: 0 14px; font-size: 13px; }
}
@media (prefers-reduced-motion: no-preference) {
  html body #gamesSection .category-chip,
  html body #gamesSection .load-more { transition: transform .15s ease, box-shadow .15s ease; }
  html body #gamesSection .category-chip:active,
  html body #gamesSection .load-more:active { transform: scale(.97); }
}

/* ---------------------------------------------------------------- betados-catalogo-04
   Buscador: celuapuestas.css pone outline:0 al campo sin reemplazo (sin foco visible) y el campo mide 23 px de alto
   dentro de una cápsula de 42. Cápsula de 44 px, campo a toda la altura y anillo dorado de la sala al enfocar. */
html body #gamesSection .search-box { height: 44px; }
html body #gamesSection .search-box input { align-self: stretch; min-height: 0; }
html body #gamesSection .search-box:focus-within { border-color: #ffb020; box-shadow: 0 0 0 3px rgba(255, 176, 32, .28); }
html body #gamesSection .search-box > span { color: #ffb020; }

/* ---------------------------------------------------------------- betados-catalogo-05
   Estados vacío y de error: el título iba en el mismo gris que el texto (#aaa8b0), con márgenes por defecto y palabra
   huérfana. Jerarquía propia sin tocar display. En el error, «Reintentar» es la acción principal: botón lleno en el oro
   de la sala (antes contorno, igual que «Mostrar más»). «Mostrar más» queda secundario con 44 px y radio común. */
html body #gamesSection .empty-state { padding: 48px 16px 40px; }
html body #gamesSection .empty-state > span { display: block; font-size: 40px; line-height: 1; color: #ffb020; }
html body #gamesSection .empty-state h3 { margin: 14px 0 6px; color: #f8f7f5; font-size: 20px; line-height: 1.25; text-wrap: balance; }
html body #gamesSection .empty-state p { max-width: 40ch; margin: 0 auto; color: #aaa8b0; line-height: 1.5; text-wrap: balance; }
html body #gamesSection .load-more {
  min-height: 44px;
  min-width: 200px;
  padding: 0 28px;
  border-color: #ffb020;
  border-radius: 12px;
  color: #ffc85a;
  font-size: 15px;
}
html body #gamesSection .load-more:hover { background: #221b13; }
html body #gamesSection .load-more:focus-visible { outline: 3px solid #ffd27a; outline-offset: 3px; }
html body #gamesSection .empty-state #gamesRetry.load-more {
  margin: 22px auto 0;
  border-color: transparent;
  background: linear-gradient(105deg, #ffa51f, #ffbd31);
  color: #171006;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(255, 159, 26, .2);
}
html body #gamesSection .empty-state #gamesRetry.load-more:hover { box-shadow: 0 14px 30px rgba(255, 159, 26, .34); }

/* ---------------------------------------------------------------- betados-catalogo-06
   Botón cerrar (×) de billetera/perfil/pago: 31×39 px pegado al borde y, al abrir, con el anillo cuadrado por defecto
   (el foco cae ahí). Caja de 44 px con radio y anillo dorado. El × del acceso (círculo de 46 px sobre el banner) conserva
   su forma y gana el anillo. Menú lateral: 33×42 px -> 44×44. */
html body .modal > .modal-close {
  top: 18px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  color: #c9c6cf;
  line-height: 1;
}
@media (min-width: 821px) {
  html body .modal > .modal-close { top: 22px; right: 22px; }
}
html body #authModal > .modal-close { top: 12px; right: 12px; width: 46px; height: 46px; border-radius: 50%; color: #fff; }
html body .modal > .modal-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html body #authModal > .modal-close:hover { background: rgba(20, 18, 23, .85); }
html body .modal > .modal-close:focus-visible,
html body #mobileMenu #mobileMenuClose:focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }
html body #mobileMenu .mobile-menu-head > #mobileMenuClose {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  color: #fff;
  line-height: 1;
}
/* Botón principal de los modales («Ingresar», «Crear cuenta», «Continuar al pago», «Cargar fichas», «Entendido»): la
   sombra seguía en el rosa de otra sala (rgba(236,44,104,.22) de celuapuestas.css) bajo el degradé naranja y sin foco
   visible propio. Sombra en el naranja de Betados, anillo dorado y respuesta al toque/mouse. */
html body .modal .primary-submit { box-shadow: 0 12px 24px rgba(255, 159, 26, .2); }
html body .modal .primary-submit:focus-visible { outline: 3px solid #ffd27a; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  html body .modal .primary-submit { transition: transform .15s ease, box-shadow .15s ease; }
  html body .modal .primary-submit:not(:disabled):active { transform: scale(.98); }
}
@media (hover: hover) and (pointer: fine) {
  html body .modal .primary-submit:not(:disabled):hover { box-shadow: 0 14px 30px rgba(255, 159, 26, .34); }
}

/* ---------------------------------------------------------------- betados-catalogo-07
   Acceso/registro: CELULAR ARGENTINO y REPETIR CONTRASEÑA quedaban inline, 16 px, blancos y pegados al campo (la regla de
   rótulos sólo alcanza a los <label> hijos directos del form). Mismo rótulo que USUARIO/CONTRASEÑA. Contraste AA de los
   textos chicos: pie #666 (2,69:1, con !important compartido), ayudas #999 a 11 px (4,36:1). */
html body #authModal #authPhoneField > label,
html body #authModal #authPasswordRepeatField > label {
  display: block;
  margin: 14px 0 7px;
  color: #c7c3cd;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: normal;
}
html body #authModal .auth-operator { color: #9d9aa5 !important; }
html body #authModal .auth-hint { color: #aaa8b0; font-size: 12px; line-height: 1.4; }
html body #authModal #authTitle { text-wrap: balance; }

/* ---------------------------------------------------------------- betados-catalogo-08
   Campos del acceso: el <input> medía 23 px dentro de una cápsula de 52 (sólo un tercio tocable), outline:0 sin
   reemplazo (sin foco visible) y el botón de mostrar contraseña de 25×25 px. Campo a toda la altura, anillo dorado y
   botón de 40 px. */
html body #authModal .input-shell input { align-self: stretch; }
html body #authModal .input-shell:focus-within { border-color: #ffb020; box-shadow: 0 0 0 3px rgba(255, 176, 32, .28); }
html body #authModal .input-shell > button {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  margin-right: -9px;
  padding: 0;
  border-radius: 10px;
  cursor: pointer;
}
html body #authModal .input-shell > button:focus-visible { outline: 2px solid #ffd27a; outline-offset: -2px; }
html body #authModal .auth-switch button { min-height: 36px; padding: 0 6px; border-radius: 8px; }
html body #authModal .auth-switch button:focus-visible,
html body #authModal .auth-mode-tab:focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }

/* ---------------------------------------------------------------- betados-catalogo-09
   CONVERSIÓN: el registro dejaba «CREAR CUENTA» fuera de la vista a 320×800, 360×800, 1024×768 y 1440×900 (banner de
   176 px en escritorio, 105–124 en teléfono, y el tope de 90vh/94vh) y a 834×1024 pedía desplazar 57 px (113 con los
   rótulos corregidos en -07). A <= 820 px
   el diálogo heredaba min-height:70vh. Sólo en modo registro (pestaña «Crear cuenta» con aria-selected="true", que el
   script ya actualiza) y en pantallas de hasta 1100 px de alto: banner compacto (conserva arte y logo) y ritmo más
   ceñido. El acceso conserva su banner grande; en pantallas bajas sólo gana el tope de alto. Sin :has() (navegadores
   viejos) queda como hoy. */
@media (max-width: 820px) {
  html body #authModal.auth-dialog { min-height: 0; }
}
@media (max-height: 960px) {
  html body #authModal.auth-dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
}
@media (max-height: 1100px) {
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .betados-auth-banner { min-height: 104px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .betados-auth-banner .modal-logo { width: min(200px, 52%); }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .auth-panel { padding-top: 20px; padding-bottom: 22px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .auth-panel > h2 { font-size: 26px; line-height: 1.15; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .auth-panel > p#authTitle { margin: 4px 0 14px; font-size: 15px; line-height: 1.4; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .auth-mode-tabs { margin-bottom: 14px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .auth-mode-tab { min-height: 44px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .input-shell { height: 48px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) :is(#authForm, #authPhoneField, #authPasswordRepeatField) > label { margin: 10px 0 6px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .auth-hint { margin-top: 4px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) #ageLegalNotice { margin: 10px 0 0; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .primary-submit { margin-top: 12px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .auth-switch { margin: 8px 0; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .auth-operator { margin: 4px 0 0; }
}
@media (max-height: 820px) {
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .betados-auth-banner { min-height: 72px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .betados-auth-banner .modal-logo { width: min(170px, 48%); }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .auth-panel > h2 { font-size: 22px; }
  /* (verificado) Las pestañas conservan 44 px también aquí (la propuesta bajaba a 40 px). */
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .input-shell { height: 46px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .auth-hint { line-height: 1.3; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .auth-panel { padding-top: 16px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .auth-panel > p#authTitle { margin-bottom: 10px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .auth-mode-tabs { margin-bottom: 10px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) :is(#authForm, #authPhoneField, #authPasswordRepeatField) > label { margin: 8px 0 5px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .primary-submit { margin-top: 10px; }
  html body #authModal:has(.auth-mode-tab[data-auth-mode="register"][aria-selected="true"]) .auth-switch { margin: 4px 0; }
}

/* ---------------------------------------------------------------- betados-catalogo-10
   Billetera: monto y DNI heredaban 12 px/800 del <label> (iPhone hace zoom al enfocar con < 16 px) y el campo tenía el
   mismo fondo que el modal (#242428 sobre #242428). Mismo pozo y radio que los campos del acceso, 16 px y foco dorado.
   Límites del monto a 10 px #888 (4,36:1) -> 12 px #aaa8b0. */
html body #walletModal form > label > input,
html body #withdrawalModal form > label > input {
  border-color: #3a3940;
  border-radius: 13px;
  background: #151518;
  font-size: 16px;
  font-weight: 600;
}
html body #walletModal form > label > input:focus-visible,
html body #withdrawalModal form > label > input:focus-visible { outline: 0; border-color: #ffb020; box-shadow: 0 0 0 3px rgba(255, 176, 32, .28); }
html body #walletModal #customAmountLimits { color: #aaa8b0; font-size: 12px; font-weight: 700; }

/* ---------------------------------------------------------------- betados-catalogo-11
   Perfil: tres paletas en un mismo modal («Cargar fichas» naranja de la sala, «Cargas/Retiros» violeta de Multisala y
   «Cargas y retiros» azul de payment-shell), que además compiten con la acción principal; «Saldo disponible» con el mismo
   fondo que el modal y «Cerrar sesión» de 23 px de alto. Secundarios en el cálido oscuro de Betados (menú de acciones):
   «Cargar fichas» queda como única acción llena. */
html body #profileModal .profile-balance { align-items: center; gap: 12px; border: 1px solid #333238; background: #151518; }
html body #profileModal .ms-profile-transactions a,
html body #profileModal .ms-wallet-history {
  border: 1px solid #4d3a25;
  border-radius: 14px;
  background: #201b16;
  color: #fff;
}
html body #profileModal .ms-profile-transactions a:hover,
html body #profileModal .ms-wallet-history:hover { border-color: #ffb020; background: #2a2117; }
html body #profileModal .ms-profile-transactions span { color: #ffb020; }
html body #profileModal .ms-wallet-history { min-height: 52px; font: inherit; font-weight: 800; }
html body #profileModal :is(.ms-profile-transactions a, .ms-wallet-history):focus-visible { outline: 3px solid #ffd27a; outline-offset: 3px; }
html body #profileModal #logoutButton.danger-link { display: block; min-height: 44px; margin-top: 6px; border-radius: 12px; font-weight: 700; cursor: pointer; }
html body #profileModal #logoutButton.danger-link:hover { background: rgba(255, 115, 157, .08); }
html body #profileModal #logoutButton.danger-link:focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }

/* ---------------------------------------------------------------- betados-catalogo-12
   Pago: ✓ blanco sobre verde #15bd58 (2,32:1). Tilde oscura sobre el mismo verde (7,6:1). Filas con CVU o referencia
   largas sin pisarse. Avisos (pago y billetera) con caja de esquinas suaves y ritmo de lectura, como el resto de la sala
   (antes caja recta con 10 px de relleno). */
html body #paymentModal .status-orb { color: #07140c; font-weight: 900; }
html body .modal .payment-warning { border-radius: 4px 12px 12px 4px; padding: 12px 14px; line-height: 1.45; }
html body #paymentModal .detail-row { flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
html body #paymentModal .detail-row > span { flex: 0 0 auto; color: #aaa8b0; }
html body #paymentModal .detail-row > strong { min-width: 0; max-width: 100%; margin-left: auto; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- betados-catalogo-13
   Billetera/perfil/pago entre 600 y 820 px: hoja inferior a todo el ancho (campos de 726 px a 768) mientras el acceso ya
   es tarjeta centrada en ese rango. Tarjeta centrada como el acceso; 92dvh en teléfonos. */
@media (min-width: 600px) and (max-width: 820px) {
  html body #walletModal.modal,
  html body #withdrawalModal.modal,
  html body #paymentModal.modal,
  html body #profileModal.modal {
    top: 50%;
    bottom: auto;
    width: min(560px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    padding: 32px 30px 30px;
    border-radius: 24px;
    transform: translate(-50%, -50%);
  }
  html body #walletModal.modal-wide,
  html body #withdrawalModal.modal-wide,
  html body #paymentModal.modal-wide { width: min(640px, calc(100vw - 48px)); }
  html body .modal > .modal-close { top: 20px; right: 20px; }
}
@media (max-width: 599px) {
  @supports (height: 100dvh) {
    html body #walletModal.modal, html body #withdrawalModal.modal, html body #paymentModal.modal, html body #profileModal.modal { max-height: 92dvh; }
  }
}

/* ---------------------------------------------------------------- betados-catalogo-14
   Barra del juego: a <= 700 px el logo ocupaba 102–115 px y el título quedaba en 24–64 px a 10 px («Ga…» a 320).
   Logo de 84–140 px (76 a <= 360) y título de 13 px en hasta dos líneas; «Salir» de 36 -> 44 px de alto. «Salir» blanco sobre naranja
   (2,05:1) -> texto oscuro como el botón principal de la sala. «Cargando juego…» y su indicador quedaban a 1/3 y 2/3
   de la pantalla: juntos y centrados. No se aplica a la apertura de Chavito (.chv-opening-shell), que tiene su barra. */
html body #gameShell .game-shell-actions #gameClose { color: #171006; }
html body #gameShell .game-shell-actions button:focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }
@media (max-width: 700px) {
  html body #gameShell:not(.chv-opening-shell):not(.chv-fullscreen) .game-shell-bar { grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 10px; }
  html body #gameShell:not(.chv-opening-shell):not(.chv-fullscreen) .game-shell-bar > img { width: clamp(84px, 21vw, 140px); height: 32px; }
  html body #gameShell:not(.chv-opening-shell):not(.chv-fullscreen) .game-shell-bar > strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.2;
    text-align: left;
    overflow-wrap: anywhere;
  }
  html body #gameShell:not(.chv-opening-shell):not(.chv-fullscreen) .game-shell-actions button { min-height: 44px; }
}
@media (max-width: 360px) {
  html body #gameShell:not(.chv-opening-shell):not(.chv-fullscreen) .game-shell-bar { gap: 8px; }
  html body #gameShell:not(.chv-opening-shell):not(.chv-fullscreen) .game-shell-bar > img { width: 76px; height: 28px; }
}
/* (verificado) Indicador de carga sólo en la barra propia de la sala: la apertura de Chavito ya define su #gameLoading
   (flex en columna con !important) y no se toca. */
html body #gameShell:not(.chv-opening-shell):not(.chv-fullscreen) #gameLoading.game-loading { place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
html body #gameShell:not(.chv-opening-shell):not(.chv-fullscreen) #gameLoading.game-loading::after { margin-left: 0; }

/* ---------------------------------------------------------------- betados-catalogo-15
   Menú lateral móvil: el botón M (z-index 78) quedaba por encima del menú (70) y de su fondo (69) y tapaba «Mi cuenta» a
   320–360 px; sin desplazamiento en pantallas bajas; pie #777 (4,07:1). CONVERSIÓN: «Cargar fichas» pasa a ser la
   acción llena en el oro de la sala y «Mi cuenta» queda con contorno neutro. Menú (82) y fondo (81) por encima del botón M
   (78) y del botón de soporte (80), y por debajo del aviso de cookies (85/89), de la apertura de Chavito (85), de los
   modales (90/91) y del juego (220). */
html body #mobileMenuBackdrop.menu-backdrop { z-index: 81; }
html body #mobileMenu.mobile-menu {
  z-index: 82;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
html body #mobileMenu > p { color: #9d9aa5; }
html body #mobileMenu .mobile-account > button { min-height: 48px; border-radius: 12px; }
html body #mobileMenu .mobile-account > button[data-mobile-action="wallet"] {
  border-color: transparent;
  background: linear-gradient(105deg, #ffa51f, #ffbd31);
  color: #171006;
  font-weight: 900;
}
html body #mobileMenu .mobile-account > button[data-mobile-action="profile"] { border-color: #4a4850; }
html body #mobileMenu nav > button:focus-visible,
html body #mobileMenu .mobile-account > button:focus-visible { outline: 3px solid #ffd27a; outline-offset: -3px; border-radius: 10px; }

/* Betados · crítico de completitud (01/10/2026) — reglas NUEVAS, no repetidas en estructura.verified.css ni en
   catalogo.verified.css. Van DESPUÉS de las dos hojas verificadas (orden: estructura → catálogo → crítico): critic-04
   corrige un choque entre estructura-12 y estructura-13 con la misma especificidad y se resuelve por orden.
   Todas con prefijo "html body" (+0,0,2). Sin reglas sobre .hidden/[hidden], sin estilos inline, sin animaciones
   infinitas, sin !important. Paleta de Betados (gutters/anchos del menú: variables de estructura-02, con respaldo).
   Probadas con qa/probe.mjs y qa/probe/betados-critic-tools/inspect.mjs (CSP real, 0 escrituras, 0 errores JS). */

/* ---------------------------------------------------------------- betados-critic-01
   Carrusel (≥821): las flechas de 48 px iban centradas en la altura del carrusel (incluida la franja de puntos) y
   tapaban el arte. Con la pieza de Chavito a 834–1024 px la flecha izquierda cubría «¡Ju» de «¡Juegos únicos!».
   Pasan a la franja de controles de abajo (36 px, la misma de los puntos y la pausa), a los costados: el arte queda
   limpio y los controles juntos, como un reproductor. Botón de 32 px con área táctil invisible de 36×44. En teléfono
   (≤820) siguen ocultas como hoy. */
@media (min-width: 821px) {
  html body .hero-carousel .carousel-arrow {
    top: auto;
    bottom: 2px;
    transform: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0 0 6px; /* el glifo «‹ ›» cae ~3 px bajo el centro óptico */
    border-color: #3a3940;
    background: #1c1b20;
    color: #e9e6ee;
    font-size: 22px;
    line-height: 1;
  }
  html body .hero-carousel .carousel-arrow.previous { left: 14px; }
  html body .hero-carousel .carousel-arrow.next { right: 14px; }
  html body .hero-carousel .carousel-arrow::after { content: ""; position: absolute; inset: -2px -6px; }
  html body .hero-carousel .carousel-arrow:hover { border-color: #ffb020; color: #ffc85a; }
  /* Anillo hacia adentro: el carrusel recorta (overflow:hidden) y la flecha queda a 2 px de su borde inferior. */
  html body .hero-carousel .carousel-arrow:focus-visible { outline: 3px solid #ffd27a; outline-offset: -3px; }
}
/* La franja de controles venía en azul marino (#11131b, room-layout.css compartido): pasa al negro cálido del
   carrusel de Betados (#17131d en betados.css), ahora que aloja puntos, pausa y flechas. Todos los anchos. */
html body .hero-carousel .carousel-dots { background: #141217; }

/* ---------------------------------------------------------------- betados-critic-02
   «Llevá la sala a tu inicio» (multisala.js/multisala.css, compartido): la × mide 28–30 × 35 px en todos los anchos
   ≤834. Área táctil de 36–38 × 47 px con un pseudo-elemento transparente; no cambia tamaño, color ni posición visible
   (arreglo mínimo, mismo criterio que critic-03 de Multisala). */
html body .multisala-install-top .multisala-install-top__dismiss { position: relative; }
html body .multisala-install-top .multisala-install-top__dismiss::after { content: ""; position: absolute; inset: -6px -4px; }

/* ---------------------------------------------------------------- betados-critic-03
   Aviso de cookies (lobby-v8, compartido) en ≥821:
   - entre 821 y 1024 px quedaba a 72 px del borde inferior, reserva de una barra inferior que en Betados sólo existe
     hasta 820 px;
   - se centraba en la ventana y no en la columna de contenido: a 834 px arrancaba en x=37, encima del menú lateral y
     de su bono fijo «Reclamar».
   Mismo eje que el toast (estructura-07). Con la portada de anuncios abierta (section.ms-landing en el body) queda
   como hoy, centrado en la pantalla (lobby-v8 la agrega al final del body, después del aviso). Sin :has() (navegadores
   viejos) la regla de columna se descarta y queda como hoy.
   «Más info» (53×18 px): área táctil de 42 px sin mover el renglón. */
@media (min-width: 821px) {
  html body #marketingConsent.ms-consent:not(:has(~ .ms-landing)) {
    left: calc(var(--bd-side, 250px) + var(--bd-gutter, 18px));
    right: var(--bd-gutter, 18px);
  }
}
@media (min-width: 821px) and (max-width: 1024px) {
  html body #marketingConsent.ms-consent { bottom: calc(8px + env(safe-area-inset-bottom)); }
}
html body #marketingConsent .ms-consent-more { padding-block: 12px; margin-block: -12px; }

/* ---------------------------------------------------------------- betados-critic-04
   Choque entre estructura-12 y estructura-13: el bono lateral fijo (sticky) usa una sombra superior para que los
   ítems del menú que pasan por detrás se fundan; el hover de estructura-13 reemplazaba toda la sombra y, en pantallas
   bajas, dejaba ver un corte duro de los botones del menú justo encima del bono. Se conserva el fundido en hover. */
@media (min-width: 821px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html body .betados-sidebar .sidebar-bonus:hover {
    box-shadow: 0 -14px 22px -4px #08080a, 0 14px 30px rgba(0, 0, 0, .4), 0 0 26px rgba(255, 159, 26, .2);
  }
}

/* ---------------------------------------------------------------- betados-critic-05
   Menú lateral móvil: catalogo-15 da radio 12 px a «Cargar fichas»/«Mi cuenta» pero su regla de foco fija 10 px, así
   que el botón cambia de forma al recibir foco con teclado. Mismo radio en reposo y con foco. */
html body #mobileMenu .mobile-account > button:focus-visible { border-radius: 12px; }

/* ---------------------------------------------------------------- betados-critic-06
   Jerarquía (complemento de estructura-11): las filas del inicio y «Proveedores destacados» usan una barra de acento
   de 4 px × 1,05 em con radio 4; la de «Todos los juegos»/«Casino» (#gamesTitle) seguía en 4 × 24 px con radio 5 y
   desentonaba en la misma columna. Se conserva su tamaño de título (22/18 px: es el título de la página en modo
   catálogo); sólo la barra toma la misma proporción. */
html body #gamesSection #gamesTitle .pink-bar { flex: 0 0 4px; width: 4px; height: 1.05em; border-radius: 4px; }

/* ---------------------------------------------------------------------------------------------------------------
   Revisión de regresiones (01/10, revisores + validadores adversariales). Arreglos probados por los validadores.
   betados-phone-01 / wide-03 · Sin sesión, «Cargar» vuelve a ser neutro (abre el ingreso, no la carga): el único botón
   ámbar es «Crear cuenta». Con sesión sigue resaltado. */
@media (max-width: 820px) {
  html body > .site-header:has(#walletButton.hidden) ~ nav.mobile-bottom-nav.mobile-nav > button[data-mobile-action="wallet"]:not(.active) {
    background: none;
    box-shadow: none;
    color: #aaa;
  }
  html body > .site-header:has(#walletButton.hidden) ~ nav.mobile-bottom-nav.mobile-nav > button[data-mobile-action="wallet"]:not(.active) > img { filter: grayscale(1) brightness(2); }
}
html body > .site-header:has(#walletButton.hidden) ~ #mobileMenu .mobile-account > button[data-mobile-action="wallet"] {
  border-color: #ff9f1a;
  background: none;
  color: #f8f7f5;
  font-weight: 800;
}

/* betados-phone-02 · Menú del botón M en el teléfono: filas compactas para que «Activar notificaciones» siga a la vista
   (tope bajo el encabezado conservado). */
@media (max-width: 820px) {
  html body .multisala-actions .multisala-menu > button,
  html body .multisala-actions .multisala-menu > .ms-movements-link { min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
  html body .multisala-actions .multisala-menu .multisala-rooms { gap: 4px; padding: 6px; margin: 2px 0 6px; }
  html body .multisala-actions .multisala-menu .multisala-room { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
}

/* betados-phone-04 / wide-02 / modals-02 · El aviso (toast) no tapa el botón M ni los campos de un modal y no bloquea
   toques (no tiene nada interactivo). */
html body #toast.toast { pointer-events: none; }
@media (max-width: 820px) {
  html body #toast.toast { bottom: calc(146px + env(safe-area-inset-bottom)); }
  html body:has(.modal:not(.hidden)) #toast.toast { top: calc(12px + env(safe-area-inset-top)); bottom: auto; }
}
@media (min-width: 821px) {
  html body #toast.toast { max-width: min(460px, calc(100% - var(--bd-side, 250px) - 192px)); }
  html body:has(.modal:not(.hidden)) #toast.toast { left: 50%; max-width: min(460px, calc(100vw - 32px)); }
}

/* betados-wide-01 · Tableta vertical (821–860): los chips de categoría entran completos («Mesa» no se corta). */
@media (min-width: 821px) and (max-width: 860px) {
  html body #gamesSection .category-chip { padding: 0 12px; }
}