/* Mobile readability on the existing logo palette. Desktop and business logic unchanged. */
@media (max-width: 860px) {
  /* Each mover is one aligned row. A long hero name may wrap, never its change value. */
  .camp-mover-group { padding: 14px !important; }
  .camp-mover-group-title { font-size: 16px; line-height: 1.4; }
  .camp-mover-group-title span { font-size: 12px; }
  .camp-mover-item {
    grid-template-columns: 18px 40px minmax(0, 1fr) max-content;
    align-items: center; gap: 8px; padding: 12px 0;
  }
  .camp-mover-rank { grid-column: 1; grid-row: 1; width: 18px; font-size: 13px; }
  .camp-mover-avatar { grid-column: 2; grid-row: 1; width: 40px; height: 40px; }
  .camp-mover-info { grid-column: 3; grid-row: 1; min-width: 0; }
  .camp-mover-name { font-size: 15px; line-height: 1.45; }
  .camp-mover-current { font-size: 12px; line-height: 1.5; }
  .camp-mover-change {
    grid-column: 4; grid-row: 1; justify-self: end; align-self: center;
    font-size: 17px; line-height: 1.3; white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .camp-daily-summary-meta { font-size: 12px; }
  .camp-daily-summary-tab { font-size: 13px; min-height: 44px; }

  /* Return skins stay two-up; artwork now leads the card instead of a 40px icon. */
  .skin-hero-card.is-clickable {
    grid-template-columns: minmax(0, 1fr); grid-auto-rows: min-content;
    gap: 6px; padding: 12px; align-content: start;
  }
  .skin-hero-card.is-clickable .hero-avatar {
    grid-column: 1; grid-row: auto; width: 100%; height: auto;
    aspect-ratio: 4 / 3; border-radius: 6px; margin-bottom: 4px;
  }
  .skin-hero-card.is-clickable .hero-avatar img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
  }
  .skin-hero-card.is-clickable .hero-rank { min-width: 22px; height: 22px; font-size: 12px; }
  .skin-hero-card.is-clickable .hero-card-top { grid-column: 1; grid-row: auto; margin: 0; }
  .skin-hero-card.is-clickable .hero-name { font-size: 16px; line-height: 1.4; }
  .skin-hero-card.is-clickable .hero-role-tags { grid-column: 1; grid-row: auto; }
  .skin-hero-card.is-clickable .role-chip { font-size: 12px; line-height: 1.4; }
  .skin-hero-card.is-clickable .latest-skin { margin: 3px 0 0; font-size: 12px; }
  .skin-hero-card.is-clickable .skin-name-row { flex-wrap: wrap; justify-content: flex-start; gap: 4px 8px; margin: 0 0 4px; }
  .skin-hero-card.is-clickable .skin-name { font-size: 16px; line-height: 1.4; }
  .skin-hero-card.is-clickable .skin-tag-img { width: 46px; max-height: 22px; }
  .skin-hero-card.is-clickable .skin-date { font-size: 12px; line-height: 1.6; }
  .skin-hero-card.is-clickable .return-meta-row { gap: 5px; }
  .skin-hero-card.is-clickable .return-count,
  .skin-hero-card.is-clickable .no-direct-sale-badge { font-size: 11px; padding: 3px 5px; }
  .skin-hero-card.is-clickable .wait-days { margin-top: 6px; padding-top: 10px; }
  .skin-hero-card.is-clickable .wait-days strong { font-size: 26px; }
  .skin-hero-card.is-clickable .wait-days span { font-size: 12px; }
  .skin-hero-card.is-clickable .wait-days.is-active strong { font-size: 22px; }

  /* Keep all five columns and all three sortable rates, with actual readable type. */
  .camp-rank-table th, .camp-rank-table td { padding-left: 2px; padding-right: 2px; }
  .camp-rank-table tbody td { padding-top: 15px; padding-bottom: 15px; }
  .camp-rank-table th:nth-child(1), .camp-rank-table td:nth-child(1) {
    width: 28px; padding-left: 0; padding-right: 2px;
  }
  .camp-rank-table th:nth-child(n+3), .camp-rank-table td:nth-child(n+3) {
    width: clamp(52px, 14vw, 64px); padding-left: 2px; padding-right: 2px;
  }
  .camp-rank-table thead th { font-size: 12px; }
  .camp-sort-button { min-height: 44px; }
  .camp-rank-number { width: 25px; font-size: 13px; }
  .camp-row-avatar { width: 42px; height: 42px; }
  .camp-hero-cell { gap: 8px; }
  .camp-hero-name-line { font-size: 16px; line-height: 1.35; }
  .camp-hero-name-sub { font-size: 12px; line-height: 1.35; }
  .camp-rate-value, .camp-rate-muted { font-size: 16px; white-space: nowrap; }
  .camp-rank-meta { font-size: 12px; }
}
@media (max-width: 600px) {
  .camp-daily-summary-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 360px) {
  .camp-mover-item { grid-template-columns: 16px 36px minmax(0, 1fr) max-content; gap: 6px; }
  .camp-mover-avatar { width: 36px; height: 36px; }
  .camp-mover-change { font-size: 16px; }
  .skin-hero-card.is-clickable { padding: 10px; }
  .camp-rank-table th:nth-child(1), .camp-rank-table td:nth-child(1) { width: 24px; }
  .camp-rank-number { width: 22px; }
  .camp-row-avatar { width: 36px; height: 36px; }
  .camp-hero-cell { gap: 5px; }
  .camp-rate-value, .camp-rate-muted { font-size: 15px; }
}