/* ═══════════════════════════════════════════════════════════════════════
   BLACKJACK CHILE — Game Improvements v3.0
   Mobile-first · Height-responsive · safe-area · dvh · Sin orientación forzada
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   VIEWPORT HEIGHT REAL (dvh)
   En móvil, 100vh incluye la barra del navegador. dvh usa la altura visible real.
───────────────────────────────────────────────────────────────────────── */
html {
  /* Fallback → dvh → svh (small viewport height, sin barras) */
  height: 100%;
  height: 100dvh;
}
body { height: 100%; min-height: 100%; min-height: 100dvh; }

/* ─────────────────────────────────────────────────────────────────────────
   FULLSCREEN — Usar todo el espacio disponible
───────────────────────────────────────────────────────────────────────── */
:fullscreen            { width:100%!important; height:100%!important; }
:-webkit-full-screen   { width:100%!important; height:100%!important; }
:-moz-full-screen      { width:100%!important; height:100%!important; }

/* ─────────────────────────────────────────────────────────────────────────
   SAFE AREA INSETS (iPhone X+, Android con notch)
   Aplica padding extra en la zona del home indicator / notch
───────────────────────────────────────────────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  /* Topbars/navbars — notch arriba */
  .topbar, .nav, .hdr, .top-bar {
    padding-top: max(0px, env(safe-area-inset-top)) !important;
  }
  /* Áreas de acción — home indicator abajo */
  .actions-row, .act-row, .bet-section, .control-panel, .bet-panel {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
  /* Layout principal */
  .layout, .main, .game-layout {
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   PERFORMANCE — GPU-friendly (solo transform + opacity en animaciones)
───────────────────────────────────────────────────────────────────────── */
.card        { will-change: transform; }
.chip        { will-change: transform; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.act         { will-change: transform; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.result-box  { will-change: transform, opacity; }
.sidebar     { contain: layout style; }

/* ─────────────────────────────────────────────────────────────────────────
   BLACKJACK — Diseño responsivo por altura de pantalla
   El problema principal: overflow:hidden corta los botones en pantallas cortas
───────────────────────────────────────────────────────────────────────── */

/* Asegurar que la mesa pueda hacer scroll si no caben todos los elementos */
@media (max-width: 800px) {
  .table-area {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    /* Mostrar scroll suave solo cuando se necesita */
    scrollbar-width: none !important;
  }
  .table-area::-webkit-scrollbar { display: none !important; }

  /* El layout ocupa toda la pantalla real */
  .layout {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important; right: 0 !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
  }
  .table-area { flex: 1 !important; min-height: 0 !important; }
  .sidebar { display: none !important; }
}

/* ── Pantalla media (667px - iPhone 6/7/8) ── */
@media (max-width: 800px) and (max-height: 750px) {
  .topbar { height: 50px !important; }
  .layout { top: 50px !important; }
  .table-area { padding: 10px 16px 0 !important; }
  .hand-lbl { font-size: .68rem !important; margin-bottom: 4px !important; }
  .t-divider { margin: 5px 0 !important; }
  .cards { min-height: 80px !important; gap: 6px !important; }
  .card { width: 58px !important; height: 82px !important; }
  .card .cs { font-size: 1.25rem !important; }
  .chips { gap: 8px !important; }
  .chip { width: 48px !important; height: 48px !important; font-size: .6rem !important; }
  .bet-row { margin-bottom: 4px !important; }
  .bet-area { padding-bottom: 2px !important; }
  .act { padding: 12px 6px !important; font-size: .72rem !important; }
  .actions-row { gap: 7px !important; padding: 6px 0 10px !important; }
}

/* ── Pantalla pequeña (< 600px — la mayoría de Androids) ── */
@media (max-width: 800px) and (max-height: 660px) {
  .topbar { height: 46px !important; }
  .layout { top: 46px !important; }
  .table-area { padding: 7px 12px 0 !important; }
  .hand-lbl { font-size: .65rem !important; margin-bottom: 3px !important; letter-spacing: .1em !important; }
  .t-divider { margin: 3px 0 !important; }
  .cards { min-height: 72px !important; gap: 5px !important; }
  .card { width: 52px !important; height: 74px !important; padding: 4px 3px 2px !important; }
  .card .cs { font-size: 1.1rem !important; }
  .card .cr, .card .crb { font-size: .72rem !important; }
  .chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important; overflow-y: hidden !important;
    gap: 7px !important; padding: 3px 0 6px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { width: 46px !important; height: 46px !important; font-size: .58rem !important; flex-shrink: 0 !important; }
  .bet-box { padding: 6px 10px !important; min-width: 90px !important; font-size: .84rem !important; }
  .act { padding: 11px 4px !important; font-size: .68rem !important; }
  .act .key { display: none !important; }
  .actions-row { gap: 5px !important; padding: 5px 0 8px !important; }
  .info-chip { padding: 4px 8px !important; font-size: .72rem !important; }
  .jackpot-chip { display: none !important; } /* Ocultar jackpot en pantallas chicas */
}

/* ── Pantalla muy pequeña (< 580px — Android básico, iPhone SE 1a gen) ── */
@media (max-width: 800px) and (max-height: 590px) {
  .topbar { height: 42px !important; }
  .layout { top: 42px !important; }
  .table-area { padding: 5px 10px 0 !important; }
  .hand-lbl { margin-bottom: 2px !important; }
  .t-divider { margin: 2px 0 !important; }
  .cards { min-height: 64px !important; gap: 4px !important; }
  .card { width: 46px !important; height: 66px !important; }
  .card .cs { font-size: 1rem !important; }
  .chip { width: 42px !important; height: 42px !important; font-size: .55rem !important; }
  .act { padding: 9px 3px !important; font-size: .63rem !important; }
  .bet-box { font-size: .78rem !important; min-width: 82px !important; padding: 5px 8px !important; }
  .tb-info { display: none !important; } /* Ocultar info del topbar, mostrar solo balance */
}

/* ── Landscape muy corto (teléfono horizontal, < 430px alto) ── */
@media (max-height: 430px) and (orientation: landscape) {
  .topbar, .nav { height: 40px !important; padding: 0 10px !important; }
  .layout { top: 40px !important; }
  .table-area { padding: 4px 10px 0 !important; }
  .hand-lbl { margin-bottom: 1px !important; font-size: .6rem !important; }
  .t-divider { margin: 2px 0 !important; }
  .cards { min-height: 58px !important; gap: 3px !important; }
  .card { width: 40px !important; height: 58px !important; padding: 3px 2px 2px !important; border-radius: 4px !important; }
  .card .cs { font-size: .9rem !important; }
  .card .cr, .card .crb { font-size: .62rem !important; }
  .chips {
    flex-wrap: nowrap !important; overflow-x: auto !important;
    gap: 5px !important; padding: 2px 0 4px !important;
    scrollbar-width: none;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { width: 38px !important; height: 38px !important; font-size: .52rem !important; flex-shrink: 0 !important; }
  .act { padding: 8px 3px !important; font-size: .6rem !important; }
  .act .key { display: none !important; }
  .actions-row { padding: 3px 0 6px !important; gap: 4px !important; }
  .bet-box { padding: 4px 7px !important; font-size: .74rem !important; min-width: 78px !important; }
  /* Ocultar etiquetas de mano en landscape muy corto */
  .hand-lbl .hval { display: inline-flex !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   BACCARAT — Responsivo
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Topbar baccarat */
  .topbar-info { display: none !important; } /* Solo logo + btns */
  /* Cards de baccarat más pequeñas */
  .bac-card, .baccarat-card { width: 50px !important; height: 72px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   TODOS LOS JUEGOS — Controles táctiles
───────────────────────────────────────────────────────────────────────── */

/* Tamaño mínimo de tap según Apple HIG: 44×44pt */
@media (hover: none) {
  .act, .btn-action, .chip, .qb, .btn-sm, .btn-back, .back-btn,
  .btn-primary, .btn-outline, .btn-again, .btn-lobby, .nav-back {
    min-height: 44px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  /* Feedback táctil de :active (hover no funciona en touch) */
  .act:active:not(:disabled)    { transform: scale(.93) !important; opacity: .88 !important; }
  .chip:active                   { transform: scale(.85) !important; }
  .btn-primary:active,
  .btn-again:active              { transform: translateY(2px) !important; filter: brightness(.9) !important; }
  .game-card:active              { transform: translateY(-2px) !important; }
  /* Quitar hover que queda pegado en touch */
  .card:hover                    { transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   LOBBY — Game grid responsivo
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .game-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .game-card-art  { height: 115px !important; }
  .game-card-body { padding: 10px 12px 14px !important; }
  .game-card-title { font-size: .88rem !important; }
  .game-card-desc  { font-size: .76rem !important; margin-bottom: 8px !important; }
}
@media (max-width: 420px) {
  .game-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .game-card-art   { height: 88px !important; }
  .game-card-body  { padding: 8px 8px 10px !important; }
  .game-card-title { font-size: .8rem !important; }
  .game-card-desc  { display: none !important; }
  .game-card-meta  { display: none !important; }
  /* Topbar lobby compacto */
  .topbar-nav { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   RULETA — Betting panel en móvil
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .betting-panel {
    width: 100% !important;
    left: 0 !important; right: 0 !important;
    transform: none !important;
    padding: 8px 6px !important;
    border-radius: 0 !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
  }
  .bet-chip { width: 34px !important; height: 34px !important; font-size: .56rem !important; }
  .top-bar { padding: 8px 12px !important; }
  .balance-display { font-size: .82rem !important; padding: 5px 10px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   AVIATOR/SLOTS — Panel de control en móvil
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .bet-panel, .control-panel {
    padding: 8px 10px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
  }
  .bet-input-wrap input { font-size: .95rem !important; padding: 8px 10px !important; }
  .quick-bets { gap: 5px !important; }
  .qb { padding: 6px 8px !important; font-size: .64rem !important; min-height: 36px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   TOASTS — Full width en móvil, bien posicionados
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .toast-container, .toasts {
    top: max(54px, calc(48px + env(safe-area-inset-top, 0px))) !important;
    right: 8px !important;
    left: 8px !important;
  }
  .toast {
    min-width: unset !important;
    max-width: 100% !important;
    font-size: .7rem !important;
    padding: 9px 14px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   HOVER EFFECTS — Solo en dispositivos con cursor real
───────────────────────────────────────────────────────────────────────── */
@media (hover: hover) {
  .card:hover { z-index: 5 !important; }
  .card.red:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,.7), 0 0 22px rgba(192,57,43,.45) !important;
  }
  .card.blk:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,.7), 0 0 20px rgba(80,110,220,.4) !important;
  }
  .chip { overflow: hidden; }
  .chip::after {
    content: '';
    position: absolute;
    top: -50%; left: -120%;
    width: 55%; height: 200%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.2), transparent);
    transform: skewX(-15deg);
    pointer-events: none;
  }
  .chip:hover::after { animation: chipSheen .42s ease forwards; }
  @keyframes chipSheen { to { left: 180%; } }
}

/* ─────────────────────────────────────────────────────────────────────────
   MODAL — Responsive en móvil
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .modal-backdrop { padding: 12px !important; align-items: flex-end !important; }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 85dvh !important;
    border-radius: 16px 16px 0 0 !important;
    margin-bottom: env(safe-area-inset-bottom, 0) !important;
  }
  .result-box {
    padding: 20px 18px !important;
    width: min(94vw, 320px) !important;
    min-width: unset !important;
    border-radius: 14px !important;
  }
  .res-title    { font-size: 1.45rem !important; }
  .res-amount   { font-size: 1.2rem !important; }
  .res-btns     { flex-direction: column !important; gap: 8px !important; }
  .btn-again, .btn-lobby {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   SCROLLBARS FINOS
───────────────────────────────────────────────────────────────────────── */
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(201,162,39,.2); border-radius: 2px; }

/* ─────────────────────────────────────────────────────────────────────────
   PERFORMANCE — prefers-reduced-motion y low-end
───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* low-end class aplicada por fullscreen.js */
.low-end body::before,
.low-end .hero::before,
.low-end .jackpot-bar::after { animation: none !important; display: none !important; }

.low-end .topbar, .low-end .nav, .low-end .modal-backdrop,
.low-end .result-ov.show, .low-end .sidebar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.low-end .jp-amount, .low-end .hero h1, .low-end .topbar-logo {
  animation: none !important; background: none !important;
  -webkit-text-fill-color: #c9a227 !important; color: #c9a227 !important; filter: none !important;
}
.low-end .card, .low-end .chip, .low-end .act { will-change: auto !important; }

/* ─────────────────────────────────────────────────────────────────────────
   ANIMACIONES — Solo transform/opacity (GPU-friendly)
───────────────────────────────────────────────────────────────────────── */
@keyframes flipReveal {
  0%   { transform: rotateY(0deg); }
  49%  { transform: rotateY(89deg); }
  51%  { transform: rotateY(-89deg); }
  100% { transform: rotateY(0deg); }
}
.card-flip-reveal {
  animation: flipReveal .36s ease !important;
  will-change: transform;
}

@keyframes jackpotPop {
  0%   { transform: scale(.65) rotate(-4deg); opacity: 0; }
  40%  { transform: scale(1.1) rotate(1.5deg); opacity: 1; }
  65%  { transform: scale(.97); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.jackpot-anim { animation: jackpotPop .55s cubic-bezier(.22,.8,.34,1.12) !important; }