/* Responsive — tablet and mobile overrides */

/* ── Tablet: 768px–1024px ───────────────────────────── */
@media (max-width: 1024px) {
  #game {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }

  #client-panel {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #browse-panel {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* Mannequin + board side by side below browse */
  #mannequin-panel {
    grid-column: 1;
    grid-row: 3;
    position: static;
  }

  #styling-board {
    grid-column: 2;
    grid-row: 3;
    position: sticky;
    top: calc(4rem + 1rem);
  }
}

/* ── Mobile: < 768px ─────────────────────────────────── */
@media (max-width: 767px) {
  /* Header */
  header {
    padding: 0.75rem 1rem;
  }

  header h1 {
    font-size: 1.3rem;
  }

  /* Layout: single column */
  #game {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    padding: 0.75rem;
    gap: 0.75rem;
  }

  #client-panel,
  #browse-panel,
  #mannequin-panel,
  #styling-board {
    grid-column: 1;
    min-width: 0; /* prevent grid blowout from wide children (item-grid minmax) */
  }

  #client-panel   { grid-row: 1; }
  #browse-panel   { grid-row: 2; }
  #mannequin-panel {
    grid-row: 3;
    position: static;
    /* Compact strip on mobile — shrink the mannequin to a short preview */
  }

  #mannequin {
    max-width: 100px;
  }
  #styling-board  { grid-row: 4; position: static; }

  /* Client panel */
  #client-vibe {
    font-size: 0.85rem;
  }

  /* Brand tabs — horizontal scroll on mobile */
  #brand-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 0.5rem;
  }

  #brand-tabs::-webkit-scrollbar { display: none; }

  .brand-tab {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
  }

  /* Item grid */
  #item-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.6rem;
    max-height: 45vh;
  }

  /* Outfit slots — 2-column grid on mobile */
  #outfit-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  /* Make shoes slot span full width (odd one out) */
  .slot[data-slot="shoes"] {
    grid-column: 1 / -1;
  }

  /* Tap target minimum 48px */
  .slot {
    min-height: 60px;
  }

  button,
  .brand-tab {
    min-height: 48px;
  }

  /* Modals full-width on mobile */
  .modal {
    align-items: flex-end;
    padding: 0;
  }

  .modal-content {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 1.75rem 1.5rem;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
  }

  .score-modal-content {
    max-height: 85vh;
  }

  .naming-modal-content {
    max-width: 100%;
  }

  /* Score reveal — tighter on small screens */
  .score-row {
    padding: 0.4rem 0;
  }

  #star-display {
    font-size: 1.4rem;
  }
}

/* ── Very small: < 360px ─────────────────────────────── */
@media (max-width: 359px) {
  header h1 {
    font-size: 1.1rem;
  }

  #item-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }

  .brand-initial {
    font-size: 1.8rem;
  }
}

/* ── Landscape mobile ────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  #game {
    grid-template-columns: 200px 1fr 140px 200px;
    grid-template-rows: auto;
    padding: 0.5rem 1rem;
    gap: 0.75rem;
  }

  #client-panel    { grid-column: 1; grid-row: 1; }
  #browse-panel    { grid-column: 2; grid-row: 1; }
  #mannequin-panel { grid-column: 3; grid-row: 1; position: sticky; top: calc(4rem + 0.5rem); }
  #styling-board   { grid-column: 4; grid-row: 1; }

  #item-grid {
    max-height: 55vh;
  }

  .modal-content {
    max-height: 90vh;
    overflow-y: auto;
  }
}
/* 1773974945 */