/* ════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   - Tablet:      ≤ 900px
   - Mobile:      ≤ 600px
   - Tiny phones: ≤ 380px
   ════════════════════════════════════════════════════════════ */

/* ──────── Tablet ──────── */
@media (max-width: 900px) {
  .splash-title { font-size: 38px; }
  .menu-title   { font-size: 26px; letter-spacing: 2px; }
  .btn          { min-width: 200px; padding: 12px 22px; font-size: 14px; }
  .btn--large   { padding: 16px 36px; font-size: 15px; }
  .menu-panel   { padding: 26px 22px; }

  .play-area { padding: 56px 80px 36px; }

  /* Felt radius slightly larger on tablet for softer look */
  .felt          { border-radius: 16px; }
  .felt::before  { inset: 10px; border-radius: 12px; }

  .player-hand .card {
    width: 64px;
    height: 90px;
    margin-inline-start: -38px;
  }

  .opp-deck .card { width: 32px; height: 46px; }
  .opp-deck--north .card { margin-inline-start: -26px; }
  .opp-deck--west  .card,
  .opp-deck--east  .card { margin-top: -38px; }
}

/* ──────── Mobile ──────── */
@media (max-width: 600px) {
  /* Splash */
  .splash-title    { font-size: 30px; }
  .splash-subtitle { letter-spacing: 2px; font-size: 12px; }

  .logo-card { width: 60px; height: 84px; font-size: 22px; }
  .logo-card--1 { transform: translateX(-66px) rotate(-12deg); }
  .logo-card--2 { transform: translateX(-22px) rotate(-4deg); }
  .logo-card--3 { transform: translateX(22px)  rotate(4deg); }
  .logo-card--4 { transform: translateX(66px)  rotate(12deg); }

  /* Menus */
  .menu-panel   { padding: 22px 16px; }
  .menu-title   { font-size: 22px; }
  .btn          { min-width: 100%; }
  .menu-buttons { gap: 8px; }

  .setting-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    text-align: center;
  }
  .seg { justify-content: center; }

  /* Modal: stack buttons vertically */
  .modal { width: min(360px, 92%); }
  .modal-footer {
    flex-direction: column;
    gap: 8px;
    padding: 12px 18px 18px;
  }
  .modal-footer .btn { min-width: 100%; }

  /* ── Table on phones ── */
  .hud { padding: 6px 8px; gap: 0; }
  .hud-cell  { min-width: 0; padding: 2px 4px; flex: 1; }
  .hud-label { font-size: 8px; letter-spacing: 1px; }
  .hud-value { font-size: 14px; }
  .hud-trump { font-size: 16px; }
  .turn-indicator { font-size: 11px; letter-spacing: 1px; }

  .play-area { padding: 44px 52px 28px; }

  /* Mobile felt: rounded-square shape with fixed pixel radius */
  .felt {
    border-width: 4px;
    border-radius: 20px;
  }
  .felt::before {
    inset: 8px;
    border-radius: 14px;            /* matches inset offset (20 - 6 ≈ 14) */
  }

  /* Pills — only override north/south offset; keep west/east on edge from base */
  .seat-pill { font-size: 10px; padding: 3px 9px; letter-spacing: 1.5px; }
  .seat-pill--north { top: -11px; }
  .seat-pill--south { bottom: -11px; }
  /* west / east keep base left:0 / right:0 — no offset overrides */

  /* Opponent decks tighter */
  .opp-deck .card { width: 26px; height: 38px; }
  .opp-deck--north .card { margin-inline-start: -20px; }
  .opp-deck--west  .card,
  .opp-deck--east  .card { margin-top: -32px; }
  .opp-deck--north { top: 4px; }
  .opp-deck--west  { left: 4px; }
  .opp-deck--east  { right: 4px; }

  /* Player hand — wider cards with less overlap for readability */
  .player-hand-wrap { padding: 4px 6px 6px; }
  .player-hand      { min-height: 92px; }
  .player-hand .card {
    width: 60px;                 /* was 52 */
    height: 86px;                /* was 74 */
    margin-inline-start: -36px;  /* ~24px visible per card */
  }
  .player-hand .card:hover {
    transform: translateY(-8px) scale(1.06);
  }

  /* Bottom HUD on mobile */
  .hud--bottom {
    padding: 6px 8px;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
  }
  .hud--bottom .btn--small {
    padding: 7px 12px;
    font-size: 11px;
    letter-spacing: 0.5px;
    min-width: auto;
  }

  .room-code { font-size: 26px; letter-spacing: 5px; }

  /* Trick piles: smaller on phones */
  .trick-pile {
    width: 38px;
    height: 54px;
  }
  .trick-pile-badge { font-size: 18px; }
  .trick-pile--us   { bottom: 8px; left:  10px; }
  .trick-pile--them { top:    8px; right: 10px; }

  /* Trick piles on phones — STACK mode (cards on top of each other, big number on top) */
  .trick-pile {
    width: 38px;
    height: 54px;
    gap: 0;                              /* no gap — we overlap */
  }
  .trick-pile--us   { bottom: 8px; left:  10px; }
  .trick-pile--them { top:    8px; right: 10px; }

  /* Each pile-card is absolutely stacked. Only the LAST one shows its number. */
  .pile-card {
    position: absolute;
    width: 38px;
    height: 54px;
    border-radius: 6px;
    /* Slight offset per card for visual depth */
    transform: translate(calc(var(--idx, 0) * 1.2px),
                         calc(var(--idx, 0) * -1.2px));
  }
  .pile-card-num    { font-size: 0; }    /* hide all numbers… */
  .pile-card:last-child .pile-card-num {
    font-size: 22px;                      /* …show only on top card */
  }

  /* Crowns on phones */
  .hakem-crown      { width: 32px; height: 24px; }

}

/* ──────── Very small phones ──────── */
@media (max-width: 380px) {
  .play-area { padding: 40px 44px 24px; }

  /* Slightly smaller radius on very small phones for proportional look */
  .felt          { border-radius: 16px; }
  .felt::before  { inset: 6px; border-radius: 12px; }

  .player-hand .card {
    width: 52px;                 /* was 46 */
    height: 74px;                /* was 64 */
    margin-inline-start: -32px;  /* ~20px visible per card */
  }

  .opp-deck .card { width: 22px; height: 32px; }
}