/* ==========================================================
   ROSTER BUILDER — Responsive Breakpoints
   Mobile-first: base styles in core/components.
   This file adds wider-viewport enhancements.
   ========================================================== */

/* ── Base (< 480px) — Mobile card compression ───────── */
.rb-card__level {
  display: none;
}

.rb-card__stat-label {
  font-size: 0.5rem;
}

.rb-card__skill {
  font-size: 0.55rem;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 480px — Inline stats on player rows ────────────── */
@media (min-width: 480px) {
  .rb-player {
    grid-template-columns: 40px 1fr auto auto auto;
  }

  .rb-player__stats {
    display: flex;
    gap: var(--space-1);
  }

  .rb-player__value {
    min-width: 48px;
    text-align: right;
  }

  .rb-race-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  /* Card grid: 3 columns */
  .rb-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .rb-card__level { display: inline-block; }
  .rb-card__skill { font-size: 0.6rem; }
}

/* ── 640px — Card grid 4 columns ────────────────────── */
@media (min-width: 640px) {
  .rb-card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── 768px — Full table layout, skills visible ──────── */
@media (min-width: 768px) {
  .rb-app {
    padding: var(--space-6);
  }

  .rb-player {
    grid-template-columns: 40px 1.2fr auto 1fr auto auto;
  }

  .rb-player__skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-width: 0;
  }

  .rb-dashboard__grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  .rb-hire__grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .rb-detail {
    margin: 0 auto;
  }

  .rb-detail__stats .rb-stat-chip {
    min-width: 44px;
    padding: var(--space-1) var(--space-2);
  }

  .rb-modal__box {
    max-width: 500px;
  }

  /* Card grid: 5 columns */
  .rb-card-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ── 1024px — Wider spacing ─────────────────────────── */
@media (min-width: 1024px) {
  .rb-app {
    padding: var(--space-8) var(--space-6);
  }

  .rb-screen__title {
    font-size: var(--text-4xl);
  }

  .rb-roster__name {
    font-size: var(--text-3xl);
  }

  .rb-race-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  /* Card grid: 6 columns */
  .rb-card-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ── 1280px — Wide desktop ──────────────────────────── */
@media (min-width: 1280px) {
  .rb-card-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* ── Touch targets ──────────────────────────────────── */
@media (pointer: coarse) {
  .rb-btn {
    min-height: 48px;
    min-width: 48px;
  }

  .rb-extra__btn {
    width: 44px;
    height: 44px;
  }

  .rb-player {
    min-height: 56px;
    padding: var(--space-3);
  }

  .rb-race-card {
    padding: var(--space-4);
  }

  .rb-hire-card {
    padding: var(--space-4) var(--space-4) var(--space-3);
  }

  .rb-card {
    min-height: 180px;
  }

  .rb-view-toggle__btn {
    width: 40px;
    height: 36px;
  }
}