/**
 * Mobile Card Hand Dynamic Scaling
 * - Cards scale down when there are more cards
 * - Everything fits on screen without scrolling
 * - Maintains aspect ratio and readability
 */

@media (max-width: 900px) and (orientation: landscape) {
  
  /* ===========================
     HAND CONTAINER - Dynamic sizing
     =========================== */
  
  .hand {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    min-height: 65px !important;
    margin: 4px 0 !important;
    overflow: visible !important;
    padding: 2px !important;
    justify-content: center !important;
  }
  
  /* Default card size - matched to comprehensive-fix */
  .player-spot .card,
  #dealer-hand .card {
    width: 34px !important;
    height: 51px !important;
    transition: all 0.2s ease !important;
  }
  
  /* ===========================
     DYNAMIC SCALING - Based on card count
     Scale down when there are more cards
     =========================== */
  
  /* 5 cards - slightly smaller */
  .hand:has(.card:nth-child(5)) .card {
    width: 30px !important;
    height: 45px !important;
    gap: 2px !important;
  }
  
  .hand:has(.card:nth-child(5)) {
    gap: 2px !important;
  }
  
  /* 6 cards - smaller */
  .hand:has(.card:nth-child(6)) .card {
    width: 27px !important;
    height: 40px !important;
  }
  
  .hand:has(.card:nth-child(6)) {
    gap: 1px !important;
  }
  
  /* 7 cards - even smaller */
  .hand:has(.card:nth-child(7)) .card {
    width: 24px !important;
    height: 36px !important;
  }
  
  .hand:has(.card:nth-child(7)) {
    gap: 1px !important;
  }
  
  /* 8+ cards - very small */
  .hand:has(.card:nth-child(8)) .card {
    width: 21px !important;
    height: 31px !important;
  }
  
  .hand:has(.card:nth-child(8)) {
    gap: 1px !important;
  }
  
  /* ===========================
     SYMBOL SCALING - Proportional to card size
     =========================== */
  
  /* 5 cards */
  .hand:has(.card:nth-child(5)) .card .suit {
    font-size: 0.85rem !important;
  }
  
  .hand:has(.card:nth-child(5)) .card::before,
  .hand:has(.card:nth-child(5)) .card::after {
    font-size: 0.6rem !important;
  }
  
  /* 6 cards */
  .hand:has(.card:nth-child(6)) .card .suit {
    font-size: 0.75rem !important;
  }
  
  .hand:has(.card:nth-child(6)) .card::before,
  .hand:has(.card:nth-child(6)) .card::after {
    font-size: 0.55rem !important;
  }
  
  /* 7 cards */
  .hand:has(.card:nth-child(7)) .card .suit {
    font-size: 0.65rem !important;
  }
  
  .hand:has(.card:nth-child(7)) .card::before,
  .hand:has(.card:nth-child(7)) .card::after {
    font-size: 0.5rem !important;
  }
  
  /* 8+ cards */
  .hand:has(.card:nth-child(8)) .card .suit {
    font-size: 0.6rem !important;
  }
  
  .hand:has(.card:nth-child(8)) .card::before,
  .hand:has(.card:nth-child(8)) .card::after {
    font-size: 0.45rem !important;
  }
  
  /* ===========================
     PLAYER SPOT - Flexible width based on cards
     =========================== */
  
  .player-spot {
    min-width: 140px !important;
    max-width: 180px !important;
    flex: 0 0 auto !important;
  }
  
  /* Wider spots for more cards */
  .player-spot:has(.hand .card:nth-child(5)) {
    min-width: 155px !important;
  }
  
  .player-spot:has(.hand .card:nth-child(6)) {
    min-width: 165px !important;
  }
  
  .player-spot:has(.hand .card:nth-child(7)) {
    min-width: 170px !important;
  }
  
  .player-spot:has(.hand .card:nth-child(8)) {
    min-width: 175px !important;
  }
  
  /* ===========================
     DEALER HAND - Same dynamic scaling
     =========================== */
  
  #dealer-hand {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    overflow: visible !important;
    padding: 2px !important;
    justify-content: center !important;
    max-width: 100% !important;
  }
  
  /* Dealer hand also scales with card count */
  #dealer-hand:has(.card:nth-child(5)) .card {
    width: 36px !important;
    height: 54px !important;
  }
  
  #dealer-hand:has(.card:nth-child(6)) .card {
    width: 32px !important;
    height: 48px !important;
  }
  
  #dealer-hand:has(.card:nth-child(7)) .card {
    width: 28px !important;
    height: 42px !important;
  }
  
  #dealer-hand:has(.card:nth-child(8)) .card {
    width: 25px !important;
    height: 37px !important;
  }
  
  /* ===========================
     HAND VALUE - Always visible
     =========================== */
  
  .hand-value {
    background: rgba(0, 0, 0, 0.8) !important;
    font-size: 0.8rem !important;
    padding: 4px 8px !important;
    margin: 4px 0 0 0 !important;
    border-radius: 4px !important;
    width: 100% !important;
    text-align: center !important;
  }
  
  /* ===========================
     SMALL SCREENS - Start with smaller base cards
     =========================== */
  
  @media (max-width: 700px) {
    .hand {
      min-height: 58px !important;
    }
    
    /* Base size smaller */
    .player-spot .card,
    #dealer-hand .card {
      width: 36px !important;
      height: 54px !important;
    }
    
    /* 5 cards */
    .hand:has(.card:nth-child(5)) .card,
    #dealer-hand:has(.card:nth-child(5)) .card {
      width: 32px !important;
      height: 48px !important;
    }
    
    /* 6 cards */
    .hand:has(.card:nth-child(6)) .card,
    #dealer-hand:has(.card:nth-child(6)) .card {
      width: 28px !important;
      height: 42px !important;
    }
    
    /* 7+ cards */
    .hand:has(.card:nth-child(7)) .card,
    #dealer-hand:has(.card:nth-child(7)) .card {
      width: 24px !important;
      height: 36px !important;
    }
    
    .hand-value {
      font-size: 0.75rem !important;
      padding: 3px 6px !important;
    }
  }
  
  @media (max-width: 568px) {
    .hand {
      min-height: 52px !important;
      gap: 2px !important;
    }
    
    /* Base size even smaller */
    .player-spot .card,
    #dealer-hand .card {
      width: 32px !important;
      height: 48px !important;
    }
    
    /* 5 cards */
    .hand:has(.card:nth-child(5)) .card,
    #dealer-hand:has(.card:nth-child(5)) .card {
      width: 28px !important;
      height: 42px !important;
    }
    
    /* 6 cards */
    .hand:has(.card:nth-child(6)) .card,
    #dealer-hand:has(.card:nth-child(6)) .card {
      width: 25px !important;
      height: 37px !important;
    }
    
    /* 7+ cards */
    .hand:has(.card:nth-child(7)) .card,
    #dealer-hand:has(.card:nth-child(7)) .card {
      width: 22px !important;
      height: 33px !important;
    }
    
    .player-spot {
      min-width: 120px !important;
      max-width: 160px !important;
    }
    
    .hand-value {
      font-size: 0.7rem !important;
      padding: 2px 4px !important;
    }
  }
}

/* ===========================
   PLAYERS AREA - Horizontal scroll for multiple players
   =========================== */

@media (max-width: 900px) and (orientation: landscape) {
  .players-area {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    padding: 8px 4px !important;
  }
  
  /* Players area scrollbar - for multiple players */
  .players-area::-webkit-scrollbar {
    height: 4px;
  }
  
  .players-area::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
  }
  
  .players-area::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.6);
    border-radius: 2px;
  }
  
  .players-area::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.8);
  }
}