/**
 * Mobile Betting Controls - Compact and Touch-Friendly
 * - Quick bet buttons for common amounts
 * - Compact layout that fits on screen
 * - Large touch targets
 */

@media (max-width: 900px) and (orientation: landscape) {
  
  /* ===========================
     BETTING CONTROLS - Compact mobile layout
     =========================== */
  
  .betting-controls,
  #betting-controls {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    max-width: none !important;
    width: 100% !important;
    height: 60px !important;
    max-height: 60px !important;
    padding: 4px 8px !important;
    gap: 3px !important;
    background: rgba(15, 15, 15, 0.98) !important;
    border-top: 2px solid rgba(255, 215, 0, 0.3) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1001 !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
  }
  
  .betting-controls.hidden,
  #betting-controls.hidden {
    display: none !important;
  }
  
  /* ===========================
     BET LABEL - Hidden on mobile (save space)
     =========================== */
  
  .bet-label {
    display: none !important;
  }
  
  /* ===========================
     QUICK BET BUTTONS - Horizontal layout
     =========================== */
  
  .bet-quick-buttons {
    display: flex !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
    order: 1 !important;
  }
  
  .bet-quick {
    min-width: 42px !important;
    max-width: 50px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    font-size: 0.65rem !important;
    font-weight: bold !important;
    background: rgba(33, 150, 243, 0.2) !important;
    border: 1px solid rgba(33, 150, 243, 0.5) !important;
    color: #2196F3 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .bet-quick:active {
    background: rgba(33, 150, 243, 0.4) !important;
    transform: scale(0.95) !important;
  }
  
  .bet-quick.selected {
    background: rgba(33, 150, 243, 0.5) !important;
    border-color: #2196F3 !important;
    color: #fff !important;
  }
  
  /* ===========================
     BET INPUT ROW - Single line layout
     =========================== */
  
  .bet-input-row {
    display: flex !important;
    gap: 4px !important;
    flex: 1 !important;
    align-items: center !important;
    order: 2 !important;
    max-width: 180px !important;
  }
  
  #bet-amount {
    flex: 1 !important;
    min-width: 80px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 6px !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    color: #ffd700 !important;
    border-radius: 4px !important;
    text-align: center !important;
    appearance: none !important;
    -moz-appearance: textfield !important;
  }
  
  #bet-amount::-webkit-inner-spin-button,
  #bet-amount::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }
  
  #bet-amount:focus {
    outline: none !important;
    border-color: rgba(255, 215, 0, 0.6) !important;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.3) !important;
  }
  
  #place-bet {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 14px !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    background: linear-gradient(135deg, #ffd700, #ffed4e) !important;
    border: none !important;
    color: #000 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
  }
  
  #place-bet:active {
    transform: scale(0.95) !important;
    box-shadow: 0 1px 3px rgba(255, 215, 0, 0.3) !important;
  }
  
  /* ===========================
     SMALL SCREENS - Adjust sizing
     =========================== */
  
  @media (max-width: 568px) {
    .betting-controls,
    #betting-controls {
      height: 56px !important;
      max-height: 56px !important;
      padding: 4px 6px !important;
      gap: 2px !important;
    }
    
    .bet-quick {
      min-width: 38px !important;
      max-width: 44px !important;
      height: 30px !important;
      min-height: 30px !important;
      font-size: 0.6rem !important;
    }
    
    .bet-input-row {
      max-width: 160px !important;
      gap: 3px !important;
    }
    
    #bet-amount {
      min-width: 70px !important;
      height: 30px !important;
      min-height: 30px !important;
      font-size: 0.7rem !important;
      padding: 0 5px !important;
    }
    
    #place-bet {
      height: 30px !important;
      min-height: 30px !important;
      padding: 0 12px !important;
      font-size: 0.7rem !important;
    }
  }
  
  /* ===========================
     VERY SMALL SCREENS - Maximum compact
     =========================== */
  
  @media (max-width: 480px) {
    .betting-controls,
    #betting-controls {
      height: 54px !important;
      max-height: 54px !important;
    }
    
    .bet-quick {
      min-width: 36px !important;
      max-width: 40px !important;
      height: 28px !important;
      min-height: 28px !important;
      font-size: 0.55rem !important;
    }
    
    .bet-input-row {
      max-width: 150px !important;
    }
    
    #bet-amount {
      min-width: 65px !important;
      height: 28px !important;
      min-height: 28px !important;
      font-size: 0.65rem !important;
    }
    
    #place-bet {
      height: 28px !important;
      min-height: 28px !important;
      padding: 0 10px !important;
      font-size: 0.65rem !important;
    }
  }
}

/* Desktop - keep original styling */
@media (min-width: 901px) {
  .bet-quick-buttons {
    display: none;
  }
  
  .betting-controls {
    flex-direction: row !important;
  }
}