/* ═══════════════════════════════════════════════════════════════════
   ENJOYER WIN — CAPA RESPONSIVE
   Se carga después de animations.css. Objetivo: que móvil, tablet y
   escritorio se vean igual de acabados, no que móvil sea "lo mismo
   pero encogido".

   Escalones:
     ≤ 480px   móvil pequeño
     ≤ 700px   móvil
     701-1024  tablet vertical   ← el que faltaba por completo
     1025-1200 tablet apaisado / portátil pequeño
     ≥ 1600px  monitor grande
═══════════════════════════════════════════════════════════════════ */

/* Tipografía fluida: en lugar de saltos por breakpoint, el cuerpo escala
   con el viewport dentro de límites. Evita los títulos gigantes de tablet
   y los ilegibles de móvil. */
:root {
  --fs-title: clamp(20px, 2.6vw, 30px);
  --fs-body:  clamp(13px, 1.15vw, 15px);
  --pad-main: clamp(14px, 2.4vw, 28px);
}

main { padding: var(--pad-main); }
.game-title { font-size: var(--fs-title); }

/* Nadie debería poder provocar scroll horizontal. Antes las tablas de
   ranking y los tableros de ruleta lo hacían en móvil. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Contenedores que sí pueden desbordar: que hagan scroll ellos, no la página. */
.leaderboard-table,
.ranking-tabs,
.rlt-main, .mft-main,
.wins-ticker-track { max-width: 100%; }

.leaderboard-scroll,
#leaderboardContent { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ═══════════════════════════════════════════
   TABLET VERTICAL (701–1024)
   Este rango caía en el breakpoint de "móvil" (max-width:1200) de
   style.css: en un iPad la barra lateral se convertía en un cajón
   deslizante y el contenido quedaba en una sola columna estrecha con
   márgenes enormes. Un iPad tiene sitio de sobra para dos columnas.
═══════════════════════════════════════════ */
@media (min-width: 701px) and (max-width: 1024px) {
  .layout {
    grid-template-columns: 210px 1fr;
    grid-template-areas:
      "header header"
      "adtop  adtop"
      "sidebar main";
  }

  /* La lateral vuelve a ser fija y visible, más estrecha. */
  .sidebar {
    position: sticky;
    top: 64px;
    left: auto;
    width: 210px;
    height: calc(100vh - 64px);
    transform: none;
    padding: 16px 0;
  }
  .sidebar.open { transform: none; }
  .menu-toggle { display: none; }
  .menu-backdrop { display: none !important; }

  .nav-item { padding: 10px 18px; font-size: 14px; gap: 10px; }
  .nav-item:hover, .nav-item.active { padding-left: 22px; }
  .nav-item span.icon { font-size: 18px; width: 20px; }

  /* La columna de anuncios lateral no cabe; el banner superior sí. */
  .ads-panel { display: none; }

  /* Las vistas de juego estaban limitadas a 600px: en tablet dejaban
     dos franjas vacías enormes a los lados. */
  .game-view { max-width: 680px; }

  .games-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
  .lobby-stats { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════
   TABLET APAISADA / PORTÁTIL (1025–1200)
═══════════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1200px) {
  .layout { grid-template-columns: 230px 1fr; }
  .ads-panel { display: none; }
  .game-view { max-width: 720px; }
}

/* ═══════════════════════════════════════════
   MÓVIL (≤ 700)
═══════════════════════════════════════════ */
@media (max-width: 700px) {
  /* Área táctil mínima. Varios botones de apuesta medían 26px de alto:
     por debajo de 44px el dedo falla y se pulsa el de al lado. */
  .btn-neon, .btn-ghost, .btn-danger,
  .nav-item, .auth-tab, .ranking-tab,
  .bet-preset button, .rg-chip, .cc-btn {
    min-height: 44px;
  }
  .bet-preset button { padding: 10px 12px; }

  .games-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 4px; }
  .game-thumb { padding: 16px 12px; }
  .game-thumb-icon { font-size: 28px; }
  .game-thumb-name { font-size: 13.5px; }
  .game-thumb-tag  { font-size: 10px; }

  /* En táctil el hover se queda "pegado" tras el toque: lo quitamos. */
  .game-thumb:hover { transform: none; box-shadow: none; }
  .game-thumb:active { transform: scale(.97); }
  .leaderboard-table tbody tr:hover { transform: none; }

  .game-view { max-width: 100%; }
  .game-card { padding: 14px; border-radius: 12px; }

  /* Tablas de ranking: en 375px no caben 6 columnas. Se ocultan las
     secundarias en vez de comprimir todo a 8px ilegibles. */
  .leaderboard-table { font-size: 12.5px; }
  .leaderboard-table th, .leaderboard-table td { padding: 9px 6px; }
  .leaderboard-table th:nth-child(n+5),
  .leaderboard-table td:nth-child(n+5) { display: none; }

  .ranking-tabs {
    display: flex; overflow-x: auto; gap: 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .ranking-tabs::-webkit-scrollbar { display: none; }
  .ranking-tab { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }

  /* El aviso de cookies en horizontal dejaba el texto en una columna de
     ~120px con los tres botones apretados al borde. */
  .cc-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .cc-actions { flex-direction: column-reverse; }
  .cc-btn { width: 100%; }

  .rg-card { padding: 26px 20px; }
  .rg-chips { gap: 6px; }
  .rg-chip { flex: 1 1 calc(50% - 3px); }

  .site-footer { padding: 24px 16px 90px; }
  .footer-links { gap: 4px 14px; }

  .notif-container { top: auto; bottom: 16px; right: 12px; left: 12px; }
  .notif { max-width: 100%; }

  .big-win-mult   { font-size: 38px; }
  .big-win-amount { font-size: 18px; }

  /* El banner superior de 728px forzaba scroll horizontal en cada página. */
  .ad-top { overflow: hidden; max-width: 100vw; }
  .ad-top ins { max-width: 100%; }
  .ads-panel { display: none; }
}

/* ═══════════════════════════════════════════
   MÓVIL PEQUEÑO (≤ 480)
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .games-grid { gap: 10px; }
  .game-thumb { padding: 14px 10px; }
  .leaderboard-table th:nth-child(n+4),
  .leaderboard-table td:nth-child(n+4) { display: none; }
  .big-win-mult { font-size: 32px; }
  .rg-icon { font-size: 38px; }
}

/* En móviles con notch, el pie y la barra fija se metían debajo del
   indicador de gestos del sistema. */
@supports (padding: max(0px)) {
  @media (max-width: 700px) {
    .site-footer   { padding-bottom: max(90px, calc(70px + env(safe-area-inset-bottom))); }
    .cookie-consent { padding-bottom: env(safe-area-inset-bottom); }
    .notif-container { bottom: max(16px, env(safe-area-inset-bottom)); }
  }
}

/* ═══════════════════════════════════════════
   MONITOR GRANDE (≥ 1600)
   El layout se quedaba anclado a la izquierda con medio monitor vacío.
═══════════════════════════════════════════ */
@media (min-width: 1600px) {
  .layout {
    max-width: 1720px;
    margin: 0 auto;
    grid-template-columns: 280px 1fr 300px;
  }
  .game-view { max-width: 760px; }
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* Pantallas bajas y anchas (portátil 13" apaisado): el gate de edad y los
   modales altos se cortaban por arriba sin poder hacer scroll. */
@media (max-height: 700px) {
  .modal-overlay, .rg-modal { align-items: flex-start; overflow-y: auto; padding: 16px 16px 40px; }
  .modal { margin: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   PASADA MÓVIL — centrado y "que quepa en una pantalla"
   Se añade al final para ganar a lo anterior sin tocarlo.

   El problema de raíz: `.mft-wrap` (la mesa de apuestas) declara
   `min-width: 360px` Y `overflow-x: auto`. En un móvil de 375px, con el
   padding de <main>, quedan ~347px útiles — menos que ese mínimo. Como
   `min-width` gana al ancho del contenedor, la mesa desbordaba hacia la
   derecha y arrastraba consigo toda la vista, que es lo que se veía
   descentrado. El contenedor con scroll tiene que poder encoger; los
   mínimos van DENTRO de él.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* ── 1. Nada puede desbordar el ancho de la pantalla ── */
  main, .game-view, .game-card { max-width: 100%; }
  .game-view { margin-left: auto; margin-right: auto; }

  /* El contenedor con scroll encoge; los anchos mínimos se quedan dentro. */
  .mft-wrap, .rlt-wrap {
    min-width: 0;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* La mesa en sí sí conserva su mínimo: se desplaza dentro del wrap. */
  .mft-main, .mft-dozens, .mft-outside,
  .rlt-main, .rlt-dozens, .rlt-outside { min-width: 340px; }

  /* ── 2. Todo centrado ── */
  .game-view > .game-card,
  .lobby-header, .stats-grid, .games-grid { margin-inline: auto; }

  .game-card > div[style*="display:flex"],
  .game-card > div[style*="display: flex"] { justify-content: center; }

  /* Los juegos con canvas: centrarlos siempre. */
  #rCanvas, #mfCanvas, #plinkoCanvas, #crashCanvas,
  .mfv-wheel-wrap, #towerContainer, #minesGrid, #kenoGrid {
    margin-left: auto;
    margin-right: auto;
  }

  /* Botoneras y controles: centrados y en fila que envuelve. */
  .mfv-controls, .mfv-chips, .bet-preset,
  .chip-row, .history-chips {
    justify-content: center;
  }

  /* ── 3. Que quepa más en una pantalla ── */
  main            { padding: 12px 10px 24px; }
  .game-card      { padding: 12px 10px; margin-bottom: 12px; }
  .game-title     { font-size: 20px; margin-bottom: 12px; }
  .lobby-header   { padding: 14px 12px; }
  .mfv-header     { margin-bottom: 12px; }
  .mfv-layout     { gap: 12px; }
  .mfv-left       { gap: 10px; }
  .mfv-right      { gap: 12px; }
  .stats-grid     { gap: 8px; }
  .big-stat       { padding: 10px 8px; }
  .big-stat-value { font-size: 17px; }
  .big-stat-label { font-size: 10px; }

  /* Fichas más pequeñas: seis de 52px no caben en 355px útiles. */
  .mf-chip, .rlt-chip, .chip { width: 42px !important; height: 42px !important; font-size: 11px !important; }
  .mfv-chips, .chip-row { gap: 7px; }

  /* La rueda ocupa el ancho disponible en lugar de un valor fijo, con
     tope para que no se coma la pantalla entera en móviles grandes. */
  #rCanvas, #mfCanvas {
    width: min(86vw, 300px) !important;
    height: min(86vw, 300px) !important;
  }
  .mfv-fire-bar, .mfv-result-box { max-width: min(86vw, 300px); }

  /* ── 4. El banner superior de 728px no cabe: que no empuje nada ── */
  .ad-top { padding: 4px; min-height: 0; }
  .ad-top ins { max-width: 100% !important; }
}

@media (max-width: 400px) {
  #rCanvas, #mfCanvas {
    width: min(88vw, 260px) !important;
    height: min(88vw, 260px) !important;
  }
  .mfv-fire-bar, .mfv-result-box { max-width: min(88vw, 260px); }
  .mft-main, .mft-dozens, .mft-outside,
  .rlt-main, .rlt-dozens, .rlt-outside { min-width: 310px; }
  .mf-chip, .rlt-chip, .chip { width: 38px !important; height: 38px !important; }
  main { padding: 10px 8px 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
   TODOS LOS JUEGOS EN MÓVIL — centrado y sin saltos de layout

   Cada juego construye su vista con estilos en línea propios, así que no
   había un sitio común donde centrarlos: unos quedaban pegados a la
   izquierda, otros desbordaban. Esto los alinea a todos por igual sin
   tocar el JS de cada juego.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* ── 1. Contenedores principales, centrados ── */
  #minesGrid, #kenoGrid, #towerContainer, #ccRoad,
  #plinkoCanvas, #crashCanvas, .slots-reels {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100%;
  }

  /* Controles de apuesta: la etiqueta, el input y los atajos centrados. */
  .bet-controls   { align-items: center; text-align: center; }
  .bet-quick-btns { justify-content: center; }
  .bet-input      { max-width: 200px; margin-inline: auto; }

  /* Filas de acciones. Casi todos los juegos las construyen como <div>
     anónimos con `display:flex` en línea, sin clase, así que se llega a
     ellas por el atributo de estilo — es la única forma sin tocar cada JS. */
  .bj-actions,
  .game-card div[style*="display:flex"][style*="gap"] { justify-content: center; }

  /* ── 2. BLACKJACK ──────────────────────────────────────────────
     Las manos usaban `flex-wrap: wrap`: a partir de la cuarta carta
     saltaban a una segunda fila y la mesa cambiaba de alto en mitad de
     la jugada. Un blackjack real abanica las cartas superpuestas, que
     además cabe siempre en una línea por muchas cartas que salgan. */
  .bj-table { padding: 14px 10px !important; }
  .bj-hand {
    flex-wrap: nowrap;
    justify-content: center;
    min-height: 88px;
    gap: 0;                       /* la separación la da el margen negativo */
    padding-left: 26px;           /* compensa el solape de la primera carta */
  }
  .bj-hand .card {
    width: 52px;
    height: 74px;
    margin-left: -26px;           /* abanico: cada carta tapa media anterior */
    flex-shrink: 0;
    box-shadow: -3px 2px 8px rgba(0,0,0,.55);
  }
  /* La carta bajo el cursor/última se levanta un poco: se lee el valor. */
  .bj-hand .card:last-child { transform: translateY(-4px); }

  #bjStatus     { font-size: 14px !important; padding: 10px 0 !important; min-height: 44px !important; }
  #bjDealerVal,
  #bjPlayerVal  { text-align: center; }
  .bj-actions button { font-size: 12.5px !important; padding: 12px 8px !important; min-height: 46px; }

  /* ── 3. MINAS y KENO: retículas cuadradas y centradas ── */
  #minesGrid { max-width: min(92vw, 340px); }
  #kenoGrid  { max-width: min(94vw, 360px); }

  /* ── 4. TORRE: pisos centrados ── */
  #towerContainer { max-width: min(90vw, 320px) !important; }

  /* ── 5. GALLINA: la carretera hace scroll ella, no la página ── */
  #ccRoad { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── 6. AVIATOR y PLINKO: el canvas se adapta al ancho ── */
  #crashCanvas, #plinkoCanvas { width: 100% !important; height: auto !important; }

  /* ── 7. TRAGAPERRAS: la fila de rodillos centrada ──
     Los rodillos son #reel-container-0..4 dentro de un flex sin clase; se
     centra el contenedor por su hijo conocido. */
  .slots-reels { justify-content: center !important; flex-wrap: nowrap; }
  [id^="reel-container-"] { width: min(17vw, 66px) !important; }
}

@media (max-width: 400px) {
  .bj-hand .card { width: 46px; height: 66px; margin-left: -23px; }
  .bj-hand       { padding-left: 23px; min-height: 78px; }
  #minesGrid     { max-width: 94vw; }
}