/**
 * Comprehensive Mobile Fixes
 * - Scaled card symbols proportional to card size
 * - Better overall scaling for all elements
 * - Ensures all controls work on mobile
 */

@media (max-width: 900px) and (orientation: landscape) {
  
  /* ===========================
     OVERALL SCALING - More aggressive
     =========================== */
  html {
    font-size: 14px; /* Base font smaller on mobile */
  }
  
  #game-container {
    font-size: 0.8rem;
  }
  
  /* ===========================
     CARD SYMBOLS - Proportionally scaled to smaller cards
     =========================== */
  
  /* Base card styling */
  .card .suit {
    font-size: 0.85rem !important;
  }
  
  .card::before,
  .card::after {
    font-size: 0.55rem !important;
  }
  
  /* Default card size - smaller */
  .player-spot .card,
  #dealer-hand .card {
    width: 34px !important;
    height: 51px !important;
    transition: all 0.2s ease !important;
  }
  
  /* ===========================
     GRID LAYOUT - Adjusted to prevent action bar overlap
     =========================== */
  #game-container {
    grid-template-columns: 110px 1fr 110px !important;
    grid-template-rows: 38px 1fr 8px !important;
    gap: 0 !important;
    height: calc(100vh - 80px) !important;
    height: calc(100dvh - 80px) !important;
  }
  
  /* Game table area - contained within grid */
  .game-table {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 4px !important;
    margin-bottom: 0 !important;
  }
  
  /* ===========================
     TOP BAR - Very compact
     =========================== */
  .mobile-nav {
    padding: 4px 8px !important;
    gap: 4px !important;
  }
  
  .mobile-nav button {
    min-height: 28px !important;
    font-size: 0.65rem !important;
    padding: 4px 8px !important;
  }
  
  .mobile-chips-display {
    font-size: 0.7rem !important;
    gap: 8px !important;
  }
  
  /* ===========================
     SIDEBARS - Maximum compact
     =========================== */
  .waiting-list,
  .leaderboard {
    padding: 3px !important;
  }
  
  .waiting-list h2,
  .leaderboard h2 {
    font-size: 0.6rem !important;
    margin-bottom: 3px !important;
  }
  
  #waiting-list-list li,
  #leaderboard-list li {
    font-size: 0.55rem !important;
    padding: 3px !important;
    margin: 1px 0 !important;
  }
  
  #refresh-leaderboard-btn {
    font-size: 0.55rem !important;
    padding: 2px 4px !important;
  }
  
  /* ===========================
     DEALER AREA - Maximum compact
     =========================== */
  .dealer-area {
    padding: 3px !important;
    gap: 3px !important;
  }
  
  .dealer-area h3 {
    font-size: 0.65rem !important;
    margin: 0 0 2px 0 !important;
  }
  
  #dealer-hand {
    margin: 2px 0 !important;
  }
  
  #dealer-value {
    font-size: 0.6rem !important;
    padding: 2px 5px !important;
  }
  
  /* ===========================
     PLAYER SPOTS - Maximum compact to fit everything
     =========================== */
  .player-spot {
    min-width: 95px !important;
    max-width: 115px !important;
    padding: 3px !important;
    gap: 1px !important;
    margin-bottom: 1px !important;
  }
  
  .player-name {
    font-size: 0.55rem !important;
    margin: 0 0 1px 0 !important;
  }
  
  .player-info {
    font-size: 0.5rem !important;
  }
  
  .player-chips {
    font-size: 0.5rem !important;
    padding: 1px 3px !important;
  }
  
  .hand {
    min-height: 48px !important;
    max-height: 48px !important;
    gap: 2px !important;
    margin: 1px 0 !important;
  }
  
  .hand-value {
    font-size: 0.55rem !important;
    padding: 1px 3px !important;
    margin: 1px 0 0 0 !important;
  }
  
  .player-result {
    font-size: 0.5rem !important;
    padding: 1px !important;
    margin: 1px 0 !important;
  }
  
  .player-status {
    font-size: 0.5rem !important;
    padding: 1px 3px !important;
  }
  
  /* ===========================
     ACTION BAR - Fixed at bottom, below game content
     =========================== */
  .action-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    max-width: none !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    background: rgba(15, 15, 15, 0.98) !important;
    border-top: 2px solid rgba(255, 215, 0, 0.3) !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    z-index: 1000 !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.6) !important;
    min-height: 68px !important;
  }
  
  .action-btn {
    min-height: 36px !important;
    font-size: 0.7rem !important;
    padding: 6px 10px !important;
    flex: 0 1 auto !important;
    min-width: 65px !important;
    max-width: 85px !important;
  }
  
  /* Ensure action buttons are always touchable */
  .action-btn:not(.hidden) {
    display: inline-flex !important;
    pointer-events: all !important;
    touch-action: manipulation !important;
  }
  
  /* ===========================
     BETTING CONTROLS - Handled by mobile-betting-controls.css
     =========================== */
  /* Betting control styles moved to dedicated file for better organization */
  
  /* ===========================
     MESSAGES - More compact
     =========================== */
  #message,
  #round-result {
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
    max-width: 250px !important;
  }
}

/* ===========================
   SMALL SCREENS - Even more compact
   =========================== */
@media (max-width: 700px) and (orientation: landscape) {
  html {
    font-size: 13px;
  }
  
  #game-container {
    grid-template-columns: 110px 1fr 110px !important;
    grid-template-rows: 38px 1fr 64px !important;
  }
  
  /* Smaller cards need smaller symbols */
  .player-spot .card,
  #dealer-hand .card,
  .deck {
    width: 36px !important;
    height: 54px !important;
  }
  
  .card .suit {
    font-size: 0.9rem !important;
  }
  
  .card::before,
  .card::after {
    font-size: 0.65rem !important;
  }
  
  .action-btn {
    min-height: 40px !important;
    font-size: 0.75rem !important;
    padding: 7px 12px !important;
    min-width: 70px !important;
  }
}

/* ===========================
   MEDIUM SCREENS - Moderate scaling
   =========================== */
@media (min-width: 701px) and (max-width: 900px) and (orientation: landscape) {
  html {
    font-size: 15px;
  }
  
  #game-container {
    grid-template-columns: 150px 1fr 150px !important;
    grid-template-rows: 44px 1fr 70px !important;
  }
  
  /* 42px cards */
  .player-spot .card,
  #dealer-hand .card,
  .deck {
    width: 42px !important;
    height: 63px !important;
  }
  
  .card .suit {
    font-size: 1.05rem !important;
  }
  
  .card::before,
  .card::after {
    font-size: 0.75rem !important;
  }
}

/* ===========================
   VERY SMALL SCREENS - Maximum compression
   =========================== */
@media (max-width: 568px) and (orientation: landscape) {
  html {
    font-size: 12px;
  }
  
  #game-container {
    grid-template-columns: 100px 1fr 100px !important;
    grid-template-rows: 36px 1fr 62px !important;
  }
  
  /* Very small cards */
  .player-spot .card,
  #dealer-hand .card,
  .deck {
    width: 32px !important;
    height: 48px !important;
  }
  
  .card .suit {
    font-size: 0.8rem !important;
  }
  
  .card::before,
  .card::after {
    font-size: 0.6rem !important;
  }
  
  .action-btn {
    min-height: 38px !important;
    font-size: 0.7rem !important;
    padding: 6px 10px !important;
    min-width: 65px !important;
  }
  
  .mobile-nav button {
    min-height: 32px !important;
    font-size: 0.7rem !important;
  }
}