/* ============================================
   Preferans — Mobile Overrides
   touch-action, breakpoints, overflow fixes
   ============================================ */

/* --- Touch: prevent double-tap zoom on all interactive game elements --- */
#game-table {
  touch-action: manipulation;
}

#game-table button,
#game-table .card,
#game-table .bid-btn,
#game-table .action-btn,
#game-table .whist-btn,
#game-table .discard-btn,
#game-table .contract-btn,
#game-table .misere-ack-btn,
#game-table .game-over-btn,
#game-table .scoresheet-close {
  touch-action: manipulation;
}

/* Lobby touch targets */
.lobby button,
.lobby input,
.lobby .radio-option,
.lobby .toggle {
  touch-action: manipulation;
}

/* --- Scoresheet close button: ensure 44px touch target --- */
.scoresheet-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   375px — Small mobile (iPhone SE, iPhone mini)
   ============================================ */
@media (max-width: 375px) {
  /* Bidding: tighter grid to prevent overflow */
  .bidding-grid {
    grid-template-columns: 20px repeat(5, 1fr);
    gap: 2px;
  }

  .bid-btn {
    min-width: 38px;
    min-height: 44px;
    font-size: 0.72rem;
    padding: 2px 0;
  }

  .bid-row-label {
    font-size: 0.65rem;
    padding-right: 1px;
  }

  .bidding-panel {
    padding: 8px;
  }

  .bid-misere-btn,
  .bid-pass-btn {
    font-size: 0.82rem;
    padding: 8px 10px;
  }

  /* Whist dialog: full width */
  .whist-panel {
    max-width: 100%;
    width: 95%;
    padding: 14px;
  }

  .whist-btn {
    min-width: 0;
    font-size: 0.92rem;
  }

  /* Scoresheet: full width */
  .scoresheet-panel {
    max-width: 100%;
    width: 98%;
    padding: 12px;
  }

  /* Game over: full width */
  .game-over-panel {
    max-width: 100%;
    width: 98%;
    padding: 16px 12px;
  }

  .game-over-title {
    font-size: 1rem;
  }

  .game-over-winner {
    font-size: 1.05rem;
  }

  .game-over-row {
    font-size: 0.75rem;
  }

  .game-over-row-gora-diff,
  .game-over-row-gora-charged {
    font-size: 0.7rem;
    padding-left: 10px;
  }

  .game-over-total-line {
    font-size: 0.8rem;
  }

  .game-over-result {
    font-size: 0.88rem;
  }

  /* Misere modal: tighter */
  .misere-modal-content {
    max-width: 98%;
    padding: 14px;
  }

  /* Contract selector: tighter */
  .contract-selector {
    padding: 8px;
  }

  .contract-btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 0.8rem;
    padding: 3px 4px;
  }

  /* Info panel text */
  #info-panel > div {
    font-size: 0.7rem;
  }

  /* Lobby on 375px */
  .room-code {
    font-size: 2rem;
    padding: 8px 16px;
    letter-spacing: 0.15em;
  }

  .lobby-title {
    font-size: 1.35rem;
  }
}

/* --- Touch feedback: brief press effect --- */
.card.touch-active {
  transform: scale(0.94) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* --- Swipe hint for scrollable player hand --- */
.swipe-hint {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-secondary, #9aaa97);
  opacity: 0.7;
  padding: 2px 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.swipe-hint-hidden {
  opacity: 0;
}

/* --- Player hand: horizontal scroll on mobile when cards overflow --- */
@media (max-width: 480px) {
  #player-hand {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   768px — Tablet
   Cards bigger than mobile, smaller than desktop
   ============================================ */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --card-width: 60px;
    --card-height: 84px;
    --card-width-sm: 38px;
    --card-height-sm: 53px;
    --card-width-trick: 55px;
    --card-height-trick: 77px;
  }

  #middle-zone {
    gap: 16px;
    padding: 6px 16px;
  }

  #info-panel {
    min-width: 130px;
    padding: 12px 16px;
  }

  #info-panel > div {
    font-size: 0.82rem;
  }

  #player-hand.hand-fan {
    height: calc(var(--card-height) + 22px);
  }

  .bidding-panel {
    max-width: 360px;
  }

  .whist-panel {
    max-width: 380px;
  }

  .scoresheet-panel {
    max-width: 440px;
  }

  .game-over-panel {
    max-width: 420px;
  }
}

/* ============================================
   Landscape — Mobile in landscape orientation
   Compact layout to fit short viewport
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --card-width: 50px;
    --card-height: 70px;
    --card-width-sm: 30px;
    --card-height-sm: 42px;
    --card-width-trick: 42px;
    --card-height-trick: 59px;
  }

  #game-table {
    grid-template-rows: auto 1fr auto auto;
  }

  /* Opponent hand: tighter */
  #opponent-hand {
    padding: 2px 8px;
  }

  #opponent-hand .card {
    margin: 0 -4px;
  }

  /* Middle zone: compact */
  #middle-zone {
    gap: 10px;
    padding: 2px 10px;
  }

  #dummy-hand {
    padding: 2px;
  }

  #dummy-hand .card {
    margin: -8px 0;
  }

  /* Trick zone */
  #trick-zone {
    min-width: calc(var(--card-width-trick) * 2);
    min-height: calc(var(--card-height-trick) * 1.2);
  }

  /* Info panel: more compact */
  #info-panel {
    gap: 4px;
    padding: 6px 10px;
    min-width: 100px;
  }

  #info-panel > div {
    font-size: 0.7rem;
  }

  #contract-display,
  #turn-indicator {
    font-size: 0.78rem;
  }

  #turn-indicator {
    padding-top: 3px;
  }

  /* Player hand: tighter */
  #player-hand {
    padding: 2px 8px;
  }

  #player-hand.hand-fan {
    height: calc(var(--card-height) + 14px);
  }

  #player-hand .card {
    margin: 0 -6px;
  }

  /* Action area: compact */
  #action-area {
    padding: 2px 10px 6px;
    min-height: 36px;
    gap: 8px;
  }

  .action-btn {
    min-height: 36px;
    min-width: 70px;
    padding: 6px 14px;
    font-size: 0.85rem;
  }

  /* Bidding panel: compact */
  .bidding-panel {
    padding: 8px;
    gap: 4px;
    max-width: 320px;
  }

  .bid-btn {
    min-height: 34px;
    min-width: 34px;
    font-size: 0.72rem;
  }

  .bid-misere-btn,
  .bid-pass-btn {
    min-height: 36px;
    font-size: 0.82rem;
    padding: 6px 10px;
  }
}