/* responsive.css — Media Queries */

/* ── Tablet (max 900px) ──────────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    --sidebar-width: 120px;
    --font-size-base: 12px;
  }

  #game-header .header-village {
    display: none;
  }

  .building-nav-name {
    font-size: var(--font-size-sm);
  }

  #main-content {
    padding: var(--gap-sm);
  }
}

/* ── Mobile (max 640px) ──────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --sidebar-width: 0px;
    --font-size-base: 12px;
  }

  #game-header {
    padding: 0 var(--gap-sm);
    gap: var(--gap-sm);
  }

  #game-header .header-points {
    display: none;
  }

  #building-nav {
    display: none;
  }

  #resource-bar {
    gap: var(--gap-sm);
    overflow-x: auto;
    padding: 0 var(--gap-sm);
  }

  .res-label {
    display: none;
  }

  #tab-nav {
    overflow-x: auto;
  }

  .tab-btn {
    padding: 0 var(--gap-sm);
    font-size: var(--font-size-sm);
  }

  .login-box {
    max-width: 100%;
    margin: 0;
  }

  .modal-box {
    max-width: 100%;
    max-height: 90vh;
  }

  .cost-display {
    gap: var(--gap-sm);
  }

  .game-table {
    font-size: var(--font-size-sm);
  }

  .game-table th,
  .game-table td {
    padding: 3px var(--gap-xs);
  }
}

/* ── Large screens ───────────────────────────────────────────── */
@media (min-width: 1400px) {
  :root {
    --sidebar-width: 180px;
  }

  #main-content {
    padding: var(--gap-lg);
  }
}