@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,400;12..60,700;12..60,800&family=Public+Sans:wght@400;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

    :root {
      --tinta:  #0F0A0D;
      --hueso:  #F2E8D5;
      --rojo:   #B21E35;
      --oro:    #E8A33D;
      --jade:   #1F7A5C;
      --humo:   #6B6259;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    /* overflow-x:hidden como salvaguarda: sin contenido visible que se salga
       del viewport (verificado), pero el documento medía unos px de scroll
       horizontal fantasma en móvil; esto lo elimina sin recortar nada real. */
    html { scroll-behavior: smooth; background: var(--tinta); overflow-x: hidden; }
    html.gate-locked { overflow: hidden; }
    body { background: transparent; color: #fff; font-family: 'Public Sans', system-ui, sans-serif; }

    .font-display { font-family: 'Bricolage Grotesque', system-ui, sans-serif; }
    .font-mono    { font-family: 'IBM Plex Mono', monospace; }

    /* ── Scrollbar oculta ── */
    .scrollbar-hide { scrollbar-width: none; }
    .scrollbar-hide::-webkit-scrollbar { display: none; }

    /* ── Glow animado ── */
    @keyframes glow-spin { to { transform: rotate(360deg); } }
    .glow-wrap { position: relative; isolation: isolate; }
    .glow-wrap::before {
      content: '';
      position: absolute; inset: -40%;
      background: conic-gradient(from 0deg at 50% 60%,
        transparent 0deg, rgba(178,30,53,.35) 60deg,
        rgba(232,163,61,.15) 120deg, transparent 180deg);
      filter: blur(48px);
      animation: glow-spin 8s linear infinite;
      pointer-events: none; z-index: -1;
    }

    /* ── Trust chips ── */
    .trust-chip {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--hueso); color: var(--tinta);
      border-radius: 9999px; padding: 6px 14px;
      font-size: .8rem; font-weight: 600;
      border: 1.5px solid rgba(178,30,53,.3); white-space: nowrap;
      font-family: 'IBM Plex Mono', monospace;
    }

    /* ══════════════════════════════
       AGE GATE
    ══════════════════════════════ */
    #age-gate {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(15,10,13,.96);
      backdrop-filter: blur(10px);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
    }
    #age-gate[hidden] { display: none; }
    .age-gate-card {
      max-width: 420px; width: 100%; text-align: center;
      background: var(--hueso); color: var(--tinta);
      border: 4px solid var(--rojo); border-radius: 1rem;
      padding: 40px 28px;
    }

    /* ══════════════════════════════
       LOBBY ANIMADO (fondo fijo de toda la página)
       Contenedor único — sustituible por <video> real más adelante.
       Simula un recorrido por un lobby de casino: piso con luces en
       movimiento (efecto de "caminata"), letrero de neón parpadeante,
       máquinas y ruleta de fondo, cartas/fichas a la deriva.
    ══════════════════════════════ */
    #lobby-bg {
      position: fixed; inset: 0; z-index: -1; overflow: hidden;
      /* contain:paint fuerza a este contenedor a recortar de verdad la
         geometría 3D de .lobby-floor (perspective+rotateX); sin esto, esa
         geometría transformada se filtraba al scrollWidth del documento
         pese a estar recortada visualmente, causando overflow horizontal
         fantasma en móvil. */
      contain: paint;
      pointer-events: none;
      background:
        radial-gradient(circle at 25% 15%, rgba(178,30,53,.30), transparent 55%),
        radial-gradient(circle at 78% 65%, rgba(232,163,61,.20), transparent 55%),
        var(--tinta);
    }
    /* "Piso" del lobby: franjas de luz que se desplazan, dando sensación de avanzar */
    #lobby-bg .lobby-floor {
      position: absolute; left: -10%; right: -10%; bottom: 0; height: 55%;
      background-image: repeating-linear-gradient(100deg,
        rgba(232,163,61,.10) 0 2px, transparent 2px 90px,
        rgba(178,30,53,.10) 90px 92px, transparent 92px 180px);
      background-size: 200% 100%;
      animation: floor-walk 22s linear infinite;
      transform: perspective(600px) rotateX(55deg);
      transform-origin: bottom;
      opacity: .6;
    }
    @keyframes floor-walk { from { background-position: 0 0; } to { background-position: -1600px 0; } }

    #lobby-bg .felt-ring {
      position: absolute; top: 42%; left: 50%; width: 720px; height: 720px;
      margin: -360px 0 0 -360px; border-radius: 50%;
      background: repeating-conic-gradient(var(--rojo) 0deg 9deg, transparent 9deg 18deg);
      opacity: .10;
      animation: glow-spin 70s linear infinite;
    }
    /* Video real de la ruleta (clip corto en loop) como medallón central */
    #lobby-bg .lobby-roulette-video {
      position: absolute; top: 42%; left: 50%; width: 560px; height: 560px;
      margin: -280px 0 0 -280px; border-radius: 50%; overflow: hidden;
      opacity: .30; box-shadow: 0 0 80px 20px rgba(232,163,61,.08);
    }
    #lobby-bg .lobby-roulette-video video {
      width: 100%; height: 100%; object-fit: cover;
    }
    @keyframes float-drift {
      0%   { transform: translate(0,0) rotate(0deg); }
      50%  { transform: translate(12px,-22px) rotate(14deg); }
      100% { transform: translate(0,0) rotate(0deg); }
    }
    #lobby-bg .drift-icon {
      position: absolute; font-size: 2rem; opacity: .28;
      animation: float-drift 7s ease-in-out infinite;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
    }
    #lobby-bg .drift-icon:nth-child(odd) { animation-duration: 9s; }

    /* Letrero de neón parpadeante, tipo lobby de Las Vegas */
    @keyframes neon-flicker {
      0%, 19%, 21%, 23%, 54%, 56%, 100% { opacity: 1; }
      20%, 22%, 55% { opacity: .35; }
    }
    /* #lobby-bg está fijo al viewport, así que su posición no se mueve con
       el scroll; con el hero de pantalla completa un top:8% caía siempre en
       una franja vacía. El encabezado compacto ya no deja esa franja en el
       centro, así que el letrero se mueve a una esquina superior —fuera de
       la columna centrada del titular y de la grilla del Top 10— y se
       reduce para leerse como acento ambiental, no como un segundo titular. */
    #lobby-bg .neon-sign {
      position: absolute; top: 64px; right: 4%; left: auto;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: clamp(.9rem, 2.2vw, 1.5rem); font-weight: 800; letter-spacing: .04em;
      color: var(--oro); text-shadow: 0 0 12px rgba(232,163,61,.9), 0 0 30px rgba(232,163,61,.5);
      animation: neon-flicker 6s linear infinite;
      white-space: nowrap; opacity: .8;
    }
    @media (max-width: 640px) {
      #lobby-bg .neon-sign { display: none; }
    }

    /* Espaciados del recorrido hasta el ranking. Se declaran aquí (no en
       línea) porque en pantallas chicas hay que comprimirlos para que la
       primera carta entre sin desplazar: en 360x640 la suma de estos
       márgenes empujaba la carta fuera del viewport. */
    .site-header    { padding: 96px 16px 32px; }
    .top10-section  { padding: 80px 16px; }
    .top10-intro    { padding: 24px; margin-bottom: 40px; }
    .top10-grid-wrap{ padding: 24px; }

    @media (max-width: 640px) {
      .site-header    { padding: 68px 16px 18px; }
      .top10-section  { padding: 28px 16px 60px; }
      .top10-intro    { padding: 16px; margin-bottom: 16px; }
      .top10-grid-wrap{ padding: 14px; }
    }

    /* Overlay de legibilidad: oscurece progresivamente hacia abajo para que
       el texto de las secciones siga siendo legible sobre el lobby animado */
    #lobby-bg .lobby-fade {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(15,10,13,0) 0%, rgba(15,10,13,.55) 100%);
    }


    /* Paneles translúcidos para que el contenido siga legible sobre el lobby */
    .glass-panel {
      background: rgba(15,10,13,.68);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 1rem;
    }

    /* ══════════════════════════════
       CARTAS PÓKER (ranking)
    ══════════════════════════════ */
    .poker-card {
      position: relative;
      background: var(--hueso); color: var(--tinta);
      border: 3px solid var(--rojo); border-radius: 18px;
      display: flex; flex-direction: column; overflow: hidden;
      transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
      transform-style: preserve-3d;
    }
    .poker-card::before, .poker-card::after {
      content: ''; position: absolute; width: 15px; height: 15px;
      background-image: url('assets/img/card-hq-spades-ace.svg');
      background-size: cover; background-position: center; border-radius: 3px;
      opacity: .6; z-index: 2;
    }
    .poker-card::before { top: 10px; left: 12px; }
    .poker-card::after  { bottom: 10px; right: 12px; transform: rotate(180deg); }
    .poker-card:hover {
      transform: translateY(-6px);
      border-color: var(--oro);
      box-shadow: 0 12px 32px rgba(232,163,61,.18);
    }
    .poker-card { perspective: 900px; }
    @keyframes card-deal {
      0%   { transform: translateY(0) rotateY(0deg) rotate(0deg) scale(1); box-shadow: 0 12px 32px rgba(232,163,61,.18); }
      30%  { transform: translateY(-40px) rotateY(180deg) rotate(-6deg) scale(1.08); box-shadow: 0 30px 60px rgba(0,0,0,.5); }
      60%  { transform: translateY(-18px) rotateY(360deg) rotate(4deg) scale(1.04); }
      100% { transform: translateY(0) rotateY(360deg) rotate(0deg) scale(1); box-shadow: 0 12px 32px rgba(232,163,61,.18); }
    }
    .poker-card.dealing { animation: card-deal 1200ms cubic-bezier(.34,1.2,.64,1); z-index: 5; }

    /* Carta de póker real (según el rango del casino en el Top 10: 1=As,
       2=K, 3=Q... ) que se muestra a tamaño completo —igual al marco de la
       carta del casino— durante el volteo, antes de llevar a la reseña. */
    .card-flip-face {
      position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
      opacity: 0; pointer-events: none; z-index: 4;
      background: #fff; border: 3px solid var(--rojo); box-sizing: border-box;
    }
    .card-flip-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
    @keyframes card-flip-face-show {
      0%, 12%  { opacity: 0; }
      22%, 78% { opacity: 1; }
      92%, 100% { opacity: 0; }
    }
    .poker-card.dealing .card-flip-face { animation: card-flip-face-show 1200ms ease; }

    .loteria-num { font-family: 'IBM Plex Mono', monospace; font-size: 1.5rem; font-weight: 600; color: var(--rojo); }
    .score-big   { font-family: 'IBM Plex Mono', monospace; font-size: 1.75rem; font-weight: 600; color: var(--tinta); }

    .legend-badge {
      position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
      background: var(--rojo); color: #fff; font-family: 'IBM Plex Mono', monospace;
      font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
      padding: 4px 10px; border-radius: 9999px; white-space: nowrap; z-index: 2;
      box-shadow: 0 2px 8px rgba(0,0,0,.35);
    }

    /* ══════════════════════════════
       FICHAS DE CASINO (botones circulares)
    ══════════════════════════════ */
    .chip-btn {
      width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
      background: repeating-conic-gradient(var(--rojo) 0deg 30deg, var(--hueso) 30deg 60deg);
      border: 3px solid var(--tinta); box-shadow: 0 2px 6px rgba(0,0,0,.4);
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; transition: transform 150ms;
    }
    .chip-btn:hover { transform: scale(1.08) rotate(8deg); }
    .chip-btn:active { transform: scale(.92); }
    .chip-btn .chip-inner {
      width: 26px; height: 26px; border-radius: 50%; background: var(--tinta);
      display: flex; align-items: center; justify-content: center; font-size: 12px;
    }

    .btn-casino {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      background: var(--rojo); color: #fff; padding: 12px 24px 12px 12px;
      border-radius: .5rem; font-weight: 700; font-size: .875rem;
      border: none; text-decoration: none; cursor: pointer;
      transition: background 150ms, transform 150ms;
    }
    .btn-casino:hover { background: #931829; transform: translateY(-1px); }
    .btn-casino:active { transform: translateY(0) scale(.97); }
    .btn-casino.btn-ghost {
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.2); color: #fff;
    }
    .btn-casino.btn-ghost:hover { background: rgba(255,255,255,.1); }

    /* Icono-ficha dentro de los botones casino */
    .btn-chip {
      width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
      background: repeating-conic-gradient(rgba(255,255,255,.9) 0deg 30deg, rgba(255,255,255,.3) 30deg 60deg);
      border: 2px solid rgba(255,255,255,.8);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 12px; line-height: 1;
    }

    /* Dados rodando (decorativo, junto al CTA de la ruleta) */
    @keyframes dice-roll {
      0%   { transform: rotate(0deg) translateY(0); }
      25%  { transform: rotate(90deg) translateY(-4px); }
      50%  { transform: rotate(180deg) translateY(0); }
      75%  { transform: rotate(270deg) translateY(-4px); }
      100% { transform: rotate(360deg) translateY(0); }
    }
    .dice-roll { display: inline-block; animation: dice-roll 2.2s ease-in-out infinite; }
    .dice-roll:nth-child(2) { animation-delay: .3s; }

    /* Luces tipo marquesina alrededor de la ruleta */
    @keyframes marquee-chase {
      0%, 100% { box-shadow: 0 0 0 3px rgba(232,163,61,1), 0 0 16px 4px rgba(232,163,61,.7); }
      50% { box-shadow: 0 0 0 3px rgba(232,163,61,.25), 0 0 6px 2px rgba(232,163,61,.2); }
    }
    .marquee-ring { position: relative; }
    .marquee-ring::before {
      content: ''; position: absolute; inset: -10px; border-radius: 50%;
      border: 2px dashed rgba(232,163,61,.5);
      animation: glow-spin 14s linear infinite, marquee-chase 1.6s ease-in-out infinite;
      pointer-events: none;
    }

    /* Control flotante de música ambiente: ficha de casino circular (motivo
       ya usado en el resto del sitio), un poco más grande que la ficha base
       para que el toque sea cómodo en móvil. La percepción se resuelve por
       tamaño + realce inicial + aria-label, sin etiqueta de texto visible. */
    #music-toggle {
      position: fixed; right: 20px; bottom: 20px; z-index: 60;
      width: 54px; height: 54px;
      transition: bottom .2s ease;
    }
    /* El banner de publicidad es una tarjeta flotante al pie (alto variable
       según el viewport, hasta ~250px); cuando está visible, el control de
       música sube lo suficiente para no quedar tapado en ningún ancho. */
    body.promo-banner-open #music-toggle { bottom: 270px; }
    /* El elemento trae "display:flex" en su propio style para cuando está
       visible; sin !important aquí, esa regla inline gana sobre el
       "display:none" implícito del atributo [hidden] y la pieza se vería
       incluso antes de confirmar la edad. */
    #promo-banner[hidden], #promo-overlay[hidden] { display: none !important; }

    /* ══════════════════════════════
       CREATIVIDAD PUBLICITARIA DE PLAYDOIT — recreada en vector/CSS
       El creativo original venía como tira JPEG de 259 px de alto: en
       pantallas de alta densidad el navegador tenía que ampliarlo ~2x y se
       veía blando, además de traer franjas blancas de separación entre
       paneles. Reconstruida con el logotipo SVG y tipografía, queda nítida
       a cualquier densidad, sin marcos, y pesa ~6 KB en vez de ~80 KB.
       Colores tomados del creativo oficial (rojo #ED1C24, verde #00A651).
       Se dimensiona en unidades de contenedor (cqw) para que todo escale
       en proporción con el banner, en escritorio y en móvil.
    ══════════════════════════════ */
    .promo-creative {
      container-type: inline-size;
      position: relative; width: 100%; height: 100%; overflow: hidden;
      background: radial-gradient(circle at 20% 15%, #F52A31 0%, #ED1C24 48%, #BC121B 100%);
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      display: flex; flex-direction: column;
    }
    /* Retícula diagonal tenue: evoca la red/cancha del creativo original */
    .promo-creative__mesh {
      position: absolute; inset: -10%; pointer-events: none; opacity: .16;
      background-image:
        linear-gradient(114deg, rgba(255,255,255,.55) 0 1.5px, transparent 1.5px 46px),
        linear-gradient(66deg,  rgba(255,255,255,.55) 0 1.5px, transparent 1.5px 46px);
    }
    /* Medallón decorativo del lado derecho */
    .promo-creative__badge {
      position: absolute; right: -9cqw; top: 46%; transform: translateY(-50%);
      width: 44cqw; height: 44cqw; border-radius: 50%;
      background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.20), rgba(255,255,255,.05) 62%, transparent 74%);
      pointer-events: none;
    }
    .promo-creative__badge::after {
      content: ''; position: absolute; inset: 15%;
      border-radius: 50%; border: .8cqw solid rgba(255,255,255,.20);
    }

    /* El cuerpo ocupa el alto disponible y la franja legal queda debajo en
       flujo normal, para que nunca tape el botón de llamada a la acción. */
    .promo-creative__body {
      position: relative; z-index: 1; flex: 1; min-height: 0;
      padding: 8cqw 6cqw 1.5cqw;
      display: flex; flex-direction: column; align-items: flex-start;
      justify-content: center; gap: 1.7cqw;
    }
    .promo-creative__logo { display: block; width: 27cqw; height: auto; }
    .promo-creative__kicker {
      font-size: 2.8cqw; font-weight: 700; color: #fff;
      text-transform: uppercase; letter-spacing: .2em; opacity: .92;
    }
    /* Cintas negras inclinadas con tipografía blanca, como el creativo real */
    .promo-creative__ribbon {
      display: inline-block; background: #0C0C05; transform: skewX(-8deg);
      padding: .8cqw 2.2cqw; box-shadow: .45cqw .45cqw 0 rgba(0,0,0,.22);
    }
    .promo-creative__ribbon > span {
      display: inline-block; transform: skewX(8deg);
      color: #fff; font-weight: 800; line-height: 1.08;
      text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
    }
    .promo-creative__headline > span { font-size: 4.8cqw; }
    .promo-creative__amount > span { font-size: 7cqw; }

    .promo-creative__cta {
      display: inline-block; margin-top: .8cqw;
      background: #00A651; color: #fff;
      font-size: 3cqw; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
      padding: 1.3cqw 3.6cqw; border-radius: .5cqw;
      box-shadow: 0 .5cqw 1.4cqw rgba(0,0,0,.32);
    }
    /* Franja legal inferior, igual que el creativo oficial */
    .promo-creative__legal {
      position: relative; z-index: 1; flex-shrink: 0;
      display: flex; align-items: center; gap: 1.5cqw;
      padding: 1.2cqw 6cqw; background: rgba(0,0,0,.36);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 1.95cqw; line-height: 1.2; color: rgba(255,255,255,.8);
      white-space: nowrap; overflow: hidden;
    }
    .promo-creative__legal .pd-18 {
      flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
      width: 3.9cqw; height: 3.9cqw; border-radius: 50%;
      border: .3cqw solid rgba(255,255,255,.85); font-weight: 700; font-size: 1.7cqw;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    }

    /* ── Variante del vertical de deportes: red de portería en el medallón ── */
    .promo-creative--deportes .promo-creative__badge::after {
      inset: 6%; border: none; border-radius: 50%;
      background:
        repeating-linear-gradient(0deg,  rgba(255,255,255,.20) 0 1.5px, transparent 1.5px 11%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.20) 0 1.5px, transparent 1.5px 11%);
    }
    #music-toggle .chip-inner { width: 30px; height: 30px; font-size: 16px; }
    @keyframes music-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(232,163,61,.5);} 50% { box-shadow: 0 0 0 10px rgba(232,163,61,0);} }
    #music-toggle.playing { animation: music-pulse 1.8s ease-out infinite; }
    /* Realce solo hasta que el usuario interactúa por primera vez (ver JS) */
    #music-toggle.attention { animation: music-pulse 1.5s ease-out infinite; }

    /* Control de volumen en pila de fichas: cada ficha es un nivel y su
       color sigue la denominación real de casino (gris $1 < rojo $5 <
       azul $10 < verde $25 < negro $100). Se empalman dejando solo el
       borde rayado a la vista, como una pila real (ver JS). */
    #music-chip-stack { pointer-events: none; }
    .vol-chip {
      position: fixed; right: 26px;
      width: 30px; height: 30px; border-radius: 50%;
      border: 2px solid rgba(0,0,0,.6);
      cursor: pointer; pointer-events: auto;
      background: repeating-conic-gradient(
        var(--chip-color) 0deg 22deg, var(--hueso) 22deg 44deg);
      box-shadow: 0 3px 7px rgba(0,0,0,.55),
                  inset 0 2px 3px rgba(255,255,255,.3),
                  inset 0 -3px 4px rgba(0,0,0,.4);
      animation: vol-chip-in 300ms cubic-bezier(.34,1.4,.64,1) backwards;
      transition: transform 140ms ease, filter 180ms ease, opacity 180ms ease;
    }
    /* Cara interior de la ficha, para que el borde rayado se lea aparte */
    .vol-chip::after {
      content: ''; position: absolute; inset: 6px; border-radius: 50%;
      background: var(--chip-color);
      box-shadow: inset 0 1px 2px rgba(255,255,255,.35), inset 0 -1px 2px rgba(0,0,0,.35);
    }
    /* Niveles por encima del volumen actual: apagados pero presentes */
    .vol-chip.inactive { filter: grayscale(.85) brightness(.45); opacity: .55; }
    .vol-chip:hover { transform: translateX(-4px) scale(1.07); }
    .vol-chip.leaving { animation: vol-chip-out 220ms ease forwards; }
    @keyframes vol-chip-in {
      0%   { transform: translateY(16px) scale(.5); opacity: 0; }
      70%  { transform: translateY(-2px) scale(1.05); opacity: 1; }
      100% { transform: translateY(0) scale(1); opacity: 1; }
    }
    @keyframes vol-chip-out {
      to { transform: translateY(14px) scale(.5); opacity: 0; }
    }

    /* Fichas cayendo al revelar un resultado */
    @keyframes chip-drop {
      0%   { transform: translateY(-24px) rotate(-8deg); opacity: 0; }
      60%  { transform: translateY(4px) rotate(4deg); opacity: 1; }
      100% { transform: translateY(0) rotate(0deg); opacity: 1; }
    }
    .chip-drop { animation: chip-drop 420ms cubic-bezier(.34,1.4,.64,1); }

    /* Marco de logo con motivo de ruleta: el aro exterior lleva pinstripes
       rojo/negro (como las casillas del wheel) + borde dorado; el logo en sí
       siempre va sobre una caja blanca sólida interior para que ningún logo
       pierda contraste, sea cual sea su color. */
    .logo-frame {
      position: relative; overflow: hidden; box-sizing: border-box;
      /* Placa cálida que armoniza con el crema de la carta, en vez del blanco
         puro que se leía como un hueco recortado. */
      background: linear-gradient(180deg, #FDFBF6 0%, #F4EEE1 100%);
      border: 1px solid rgba(178,30,53,.22) !important;
      box-shadow: inset 0 0 0 1px rgba(232,163,61,.32),
                  inset 0 2px 10px rgba(15,10,13,.07);
      display: flex; align-items: center; justify-content: center;
      padding: 10px 14px;
    }
    /* Halo suave centrado: sugiere un letrero iluminado sin el rayado duro
       que competía con los logos. */
    .logo-frame::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 72% 80% at 50% 44%,
        rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 72%);
    }
    .logo-frame-inner {
      position: relative; z-index: 1; width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
    }
    /* width/height al 100% con object-fit:contain escala igual de bien un PNG
       que un SVG sin width/height propios, sin deformar en ningún caso. */
    .logo-frame-inner img {
      width: 100%; height: 100%;
      object-fit: contain; display: block;
    }
    /* Placa oscura para los logotipos pensados para fondo oscuro: el de
       Winner es blanco sólido y el de Brazino777 es de contorno claro, así
       que sobre el marco color hueso quedarían ilegibles. Se monta la marca
       tal cual sobre una placa, en vez de recolorearla y falsearla. */
    .logo-frame-inner img.on-dark {
      background: linear-gradient(180deg, #241D22 0%, var(--tinta) 100%);
      border-radius: .35rem; padding: 10px 14px;
    }

    /* Logo del ranking como enlace real al sitio del operador: navegación
       nativa del <a> (no bloqueada por el navegador como sí ocurriría con
       un window.open() disparado tras un temporizador), con una señal
       visible de que es activable. */
    a.logo-frame.casino-logo-link {
      cursor: pointer; text-decoration: none;
      transition: transform 160ms ease, box-shadow 160ms ease;
    }
    a.logo-frame.casino-logo-link:hover,
    a.logo-frame.casino-logo-link:focus-visible {
      transform: scale(1.03);
      box-shadow: 0 6px 18px rgba(232,163,61,.4);
      outline: none;
    }
    a.logo-frame.casino-logo-link::after {
      content: '↗'; position: absolute; top: 4px; right: 7px; z-index: 2;
      font-size: 12px; font-weight: 700; color: var(--rojo); opacity: 0;
      transition: opacity 160ms ease;
    }
    a.logo-frame.casino-logo-link:hover::after,
    a.logo-frame.casino-logo-link:focus-visible::after { opacity: .9; }

    /* Insignia de logo cuando no hay imagen oficial disponible */
    .logo-badge {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-weight: 800; color: var(--rojo);
    }
    .logo-badge .logo-dot {
      width: 10px; height: 10px; border-radius: 50%; background: var(--oro);
      box-shadow: 0 0 0 3px rgba(232,163,61,.25);
      flex-shrink: 0;
    }

    /* ── Calculadora ── */
    .calc-input {
      width: 100%; background: #fff; border: 2px solid rgba(178,30,53,.3);
      border-radius: .5rem; padding: 10px 14px;
      font-family: 'IBM Plex Mono', monospace; font-size: .95rem;
      color: var(--tinta); outline: none;
      transition: border-color 150ms;
    }
    .calc-input:focus { border-color: var(--rojo); }
    .result-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: .5rem; }
    .result-highlight { background: var(--oro); }

    /* ── Ruleta ── */
    #wheel-canvas { transition: transform 4s cubic-bezier(0.15,0,0.15,1); transform-origin: 50% 50%; }

    /* ── Trust / info cards ── */
    .info-card {
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
      border-radius: .75rem; padding: 20px;
    }
    details.faq-item { border-bottom: 1px solid rgba(255,255,255,.1); padding: 16px 0; }
    details.faq-item summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
    details.faq-item summary::-webkit-details-marker { display: none; }
    details.faq-item summary::after { content: '+'; color: var(--oro); font-size: 1.2rem; flex-shrink: 0; }
    details.faq-item[open] summary::after { content: '−'; }
    details.faq-item p { color: var(--humo); margin-top: 10px; font-size: .9rem; line-height: 1.6; }

    /* Nav activo: indica en cuál vertical está el usuario */
    .nav-link[aria-current="page"] { color: #fff; border-bottom: 2px solid var(--rojo); padding-bottom: 2px; }

/* Acción secundaria: mismo peso visual que un enlace, para que no compita con
   el botón principal de la tarjeta. */
.btn-inline {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: inherit; font-size: .8rem; color: var(--humo);
  text-decoration: underline; text-align: center;
}
.btn-inline:hover { color: var(--tinta); }
.btn-inline:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

/* Volver arriba: aparece al bajar, discreto y fuera del camino del contenido. */
.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jade); color: #fff; border: 2px solid rgba(255,255,255,.25);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: background 150ms, transform 150ms, bottom 200ms;
}
.to-top:hover { background: #175f48; transform: translateY(-2px); }
.to-top:active { transform: translateY(0) scale(.95); }
.to-top:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.to-top[hidden] { display: none; }