/**
 * Mobile Cards Visual Fix - Make mobile cards look like desktop
 * - Same visual style as desktop
 * - Proportional scaling
 * - Maintain card design consistency
 */

@media (max-width: 900px) and (orientation: landscape) {
  
  /* ===========================
     CARD BASE STYLING - Match desktop appearance
     =========================== */
  
  .card {
    background: var(--card-bg-gradient) !important;
    border-radius: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 3px !important;
    color: var(--card-index) !important;
    font-weight: bold !important;
    border: 1px solid var(--card-border) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: var(--card-shadow) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }
  
  /* Card hover effect - subtle on mobile */
  .card:active {
    transform: translateY(-1px) !important;
    box-shadow: var(--card-shadow-hover) !important;
  }
  
  /* ===========================
     CARD COLORS - Match desktop
     =========================== */
  
  /* Red cards (hearts ♥, diamonds ♦) */
  .card.red,
  .card.red::before,
  .card.red::after {
    color: var(--card-index-red) !important;
  }
  
  .card.red .suit {
    color: var(--card-index-red) !important;
  }
  
  /* Black cards (clubs ♣, spades ♠) */
  .card.black,
  .card.black::before,
  .card.black::after {
    color: #000 !important;
  }
  
  .card.black .suit {
    color: #000 !important;
  }
  
  /* Fallback: default to black */
  .card:not(.red),
  .card:not(.red)::before,
  .card:not(.red)::after {
    color: #000 !important;
  }
  
  .card:not(.red) .suit {
    color: #000 !important;
  }
  
  /* ===========================
     CORNER VALUES - Properly positioned
     =========================== */
  
  .card::before,
  .card::after {
    content: attr(data-value) !important;
    position: absolute !important;
    font-size: 0.55rem !important;
    font-weight: bold !important;
    line-height: 1 !important;
  }
  
  .card::before {
    top: 3px !important;
    left: 3px !important;
  }
  
  .card::after {
    bottom: 3px !important;
    right: 3px !important;
    transform: rotate(180deg) !important;
  }
  
  /* ===========================
     CENTER SUIT - Properly centered
     =========================== */
  
  .card .suit {
    font-size: 0.85rem !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* ===========================
     CARD BACK - Match desktop
     =========================== */
  
  .card-back {
    background: var(--card-back-bg) !important;
    color: white !important;
    border: var(--card-back-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    border-radius: 6px !important;
  }
  
  .card-back .pattern {
    width: 100% !important;
    height: 100% !important;
    background:
      radial-gradient(circle at 50% 50%, var(--card-back-pattern-a) 1px, transparent 1px),
      radial-gradient(circle at 50% 50%, var(--card-back-pattern-b) 1px, transparent 1px) !important;
    background-size: 12px 12px !important;
    border-radius: 4px !important;
  }
  
  /* ===========================
     CARD ANIMATIONS - Match desktop
     =========================== */
  
  .card.dealing {
    animation: deal 0.5s ease-out forwards !important;
  }
  
  @keyframes deal {
    0% {
      transform: translateY(-50px) rotate(-5deg);
      opacity: 0;
    }
    100% {
      transform: translateY(0) rotate(0);
      opacity: 1;
    }
  }
  
  /* ===========================
     PROPORTIONAL SIZING - Scale with card count
     =========================== */
  
  /* Base size - 34x51px maintains 2:3 ratio like desktop (80:120) */
  .player-spot .card,
  #dealer-hand .card {
    width: 34px !important;
    height: 51px !important;
  }
  
  /* 5 cards */
  .hand:has(.card:nth-child(5)) .card {
    width: 30px !important;
    height: 45px !important;
  }
  
  .hand:has(.card:nth-child(5)) .card .suit {
    font-size: 0.75rem !important;
  }
  
  .hand:has(.card:nth-child(5)) .card::before,
  .hand:has(.card:nth-child(5)) .card::after {
    font-size: 0.5rem !important;
  }
  
  /* 6 cards */
  .hand:has(.card:nth-child(6)) .card {
    width: 27px !important;
    height: 40px !important;
  }
  
  .hand:has(.card:nth-child(6)) .card .suit {
    font-size: 0.65rem !important;
  }
  
  .hand:has(.card:nth-child(6)) .card::before,
  .hand:has(.card:nth-child(6)) .card::after {
    font-size: 0.45rem !important;
  }
  
  /* 7 cards */
  .hand:has(.card:nth-child(7)) .card {
    width: 24px !important;
    height: 36px !important;
  }
  
  .hand:has(.card:nth-child(7)) .card .suit {
    font-size: 0.6rem !important;
  }
  
  .hand:has(.card:nth-child(7)) .card::before,
  .hand:has(.card:nth-child(7)) .card::after {
    font-size: 0.4rem !important;
  }
  
  /* 8+ cards */
  .hand:has(.card:nth-child(8)) .card {
    width: 21px !important;
    height: 31px !important;
  }
  
  .hand:has(.card:nth-child(8)) .card .suit {
    font-size: 0.55rem !important;
  }
  
  .hand:has(.card:nth-child(8)) .card::before,
  .hand:has(.card:nth-child(8)) .card::after {
    font-size: 0.35rem !important;
  }
  
  /* ===========================
     DECK CARD - Match styling
     =========================== */
  
  .deck {
    width: 34px !important;
    height: 51px !important;
    border-radius: 6px !important;
  }
  
  /* ===========================
     SMALL SCREENS - Maintain proportions
     =========================== */
  
  @media (max-width: 568px) {
    .card {
      border-radius: 5px !important;
      padding: 2px !important;
    }
    
    .card::before,
    .card::after {
      font-size: 0.5rem !important;
    }
    
    .card::before {
      top: 2px !important;
      left: 2px !important;
    }
    
    .card::after {
      bottom: 2px !important;
      right: 2px !important;
    }
    
    .card .suit {
      font-size: 0.75rem !important;
    }
    
    .card-back .pattern {
      background-size: 10px 10px !important;
    }
  }
  
  @media (max-width: 480px) {
    .card {
      border-radius: 4px !important;
      padding: 2px !important;
    }
    
    .card::before,
    .card::after {
      font-size: 0.45rem !important;
    }
    
    .card .suit {
      font-size: 0.7rem !important;
    }
    
    .card-back {
      font-size: 1rem !important;
    }
  }
}