/* ==========================================================================
   Shuffle21 — Responsive Rules
   Developed by Project Research LLC
   ========================================================================== */

@media (max-width: 900px) {
  :root {
    --card-w: 62px;
    --card-h: 88px;
  }

  .fan-down .card:not(:first-child) {
    margin-top: -64px;
  }

  .fan-down-tight .card:not(:first-child) {
    margin-top: -76px;
  }

  .nav-links {
    display: none;
  }
}

@media (max-width: 720px) {
  .hamburger {
    display: inline-flex;
  }

  .nav-bar {
    height: auto;
    min-height: var(--header-height);
    flex-wrap: wrap;
    padding: 10px 16px;
  }

  .nav-bar > .brand,
  .nav-bar > .nav-right {
    min-width: 0;
  }

  .brand-name,
  .brand-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-links {
    order: 3;
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    padding: 12px 10px;
  }

  .brand-sub {
    display: none;
  }

  .nav-right {
    gap: 6px;
  }

  .balance-pill {
    padding: 5px 8px;
  }

  .balance-pill .amount {
    font-size: 0.8rem;
  }

  .balance-pill .label {
    font-size: 0.55rem;
  }

  .game-toolbar {
    justify-content: center;
  }

  .game-toolbar .toolbar-group {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 600px) {
  :root {
    --card-w: 50px;
    --card-h: 72px;
  }

  #trick-area {
    max-width: 220px !important;
  }

  .pegboard-hole {
    width: 6px;
    height: 6px;
  }

  .pegboard-row {
    gap: 2px;
  }

  .card {
    padding: 2px 3px;
    border-radius: 6px;
  }

  .card .corner {
    font-size: 0.7rem;
  }

  .card .pip {
    font-size: 1.2rem;
  }

  .fan-down .card:not(:first-child) {
    margin-top: -50px;
  }

  .fan-down-tight .card:not(:first-child) {
    margin-top: -60px;
  }

  .fan-right .card:not(:first-child) {
    margin-left: -34px;
  }

  .hero {
    padding: 32px 12px 16px;
  }

  .game-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
  }

  .table-felt {
    padding: 12px;
  }

  .btn {
    padding: 12px 16px;
    font-size: 0.88rem;
  }

  .chip-btn {
    width: 48px;
    height: 48px;
    font-size: 0.7rem;
  }
}

@media (max-width: 420px) {
  :root {
    --card-w: 42px;
    --card-h: 62px;
  }

  .fan-down .card:not(:first-child) {
    margin-top: -44px;
  }

  .fan-down-tight .card:not(:first-child) {
    margin-top: -52px;
  }

  .balance-pill .label {
    display: none;
  }

  .balance-pill {
    padding: 5px 6px;
  }

  #trick-area {
    max-width: 170px !important;
    gap: 2px !important;
  }

  .icon-btn {
    width: 34px;
    height: 34px;
    font-size: 1rem;
  }

  .brand-name {
    font-size: 1.1rem;
  }
}

/* Ensure the page itself never scrolls horizontally */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.game-shell {
  overflow-x: auto;
}