/* =============================================================================
   38-steam-charts-page.css  (v12.146)
   Steam Charts + Games Calendar full-page sheets.

   Animation: 180ms slide-up from bottom, ease-out-expo curve, transform-only
   (no layout) so it composites at 120fps on ProMotion. will-change: transform
   primes the layer pre-animation.
   ========================================================================== */

/* ----- Quick-action button row in games discovery hub ----- */

.discover-games-quick-actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 8px 0 16px;
  margin: 0;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.discover-games-quick-actions::-webkit-scrollbar { display: none; }
.discover-games-quick-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #e6e1f5;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.discover-games-quick-btn:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); }
.discover-games-quick-btn:active { background: rgba(255, 255, 255, 0.10); }
.discover-games-quick-btn svg { flex: 0 0 auto; }

/* ----- Full-page overlay shell ----- */

.shelfd-steam-charts-overlay {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: flex;
  flex-direction: column;
  background: #161920;
  transform: translateY(100%);
  opacity: 1;
  will-change: transform;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
.shelfd-steam-charts-overlay.is-open {
  transform: translateY(0);
}
body.shelfd-steam-charts-open {
  overflow: hidden;
}

.shelfd-steam-charts-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #161920;
}

/* ----- Top bar (back + title) ----- */

.shelfd-steam-charts-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.shelfd-steam-charts-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #e6e1f5;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.shelfd-steam-charts-back:active { background: rgba(255, 255, 255, 0.12); }
.shelfd-steam-charts-title {
  flex: 1 1 auto;
  text-align: center;
  color: #f6f2ff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}
.shelfd-steam-charts-spacer {
  flex: 0 0 auto;
  width: 36px;
}

/* ----- v12.171: filter button (top-right) + dropdown panel ----- */
.shelfd-steam-charts-filter-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #e6e1f5;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  transition: background 140ms ease, color 140ms ease;
}
.shelfd-steam-charts-filter-btn:active { background: rgba(255, 255, 255, 0.12); }
.shelfd-steam-charts-filter-btn.is-active {
  color: #a3cf0f;
  background: rgba(163, 207, 15, 0.12);
}
/* small dot when a filter is applied */
.shelfd-steam-charts-filter-btn.is-active::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #a3cf0f;
}

.sc-filter-panel {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top, 0px) + 44px);
  right: 12px;
  z-index: 20;
  width: 232px;
  max-width: calc(100vw - 24px);
  padding: 14px;
  border-radius: 16px;
  background: rgba(28, 26, 36, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.08);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.08);
  transform-origin: top right;
  transform: scale(0.96);
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sc-filter-panel.is-open { transform: scale(1); opacity: 1; }
.sc-filter-inner { display: flex; flex-direction: column; gap: 12px; }
.sc-filter-row { display: flex; flex-direction: column; gap: 6px; }
.sc-filter-row label {
  color: rgba(235, 232, 244, 0.62);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}
.sc-filter-row select {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #f6f2ff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-appearance: none;
  appearance: none;
}
.sc-filter-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 2px;
}
.sc-filter-actions button {
  flex: 1 1 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid transparent;
}
.sc-filter-clear {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e6e1f5;
}
.sc-filter-clear:active { background: rgba(255, 255, 255, 0.10); }
.sc-filter-apply {
  background: #a3cf0f;
  color: #10140a;
}
.sc-filter-apply:active { background: #93bd0c; }

/* ----- Scroll area -----
   v12.149: vertical scroll for the list; horizontal scroll is delegated to
   the inner `.shelfd-steam-charts-hscroll` container so the topbar/title
   stay locked at the top while users can swipe left/right to reveal the
   24h Peak + All-Time Peak columns that don't fit in the viewport. */

/* v12.162: ONE scroll context for BOTH axes. The header row was previously
   nested inside a separate horizontal scroller inside this vertical scroller —
   two stacked scroll contexts, which made `position: sticky` on the header
   resolve against the inner wrapper (that scrolls away) instead of the visible
   viewport. Scrolling both axes here lets the header stick to the top on
   vertical scroll while still panning horizontally with the columns. */
.shelfd-steam-charts-scroll {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px));
}
.shelfd-steam-charts-scroll::-webkit-scrollbar { display: none; }

/* Sizing wrapper only — as wide as the widest row so the scroller above can
   pan horizontally. No own scroll context (that would re-break sticky). */
.shelfd-steam-charts-hscroll {
  min-width: max-content;
  overflow: visible;
}

/* ----- Header row (sticky inside hscroll so it scrolls with the data) ----- */

.shelfd-steam-charts-header-row {
  /* v12.162: pin the column header to the top on vertical scroll. Sticky
     resolves against .shelfd-steam-charts-scroll (the single both-axes
     scroller); horizontal panning still moves it with the columns. */
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  /* v12.152: tighter header — was 12px top/bottom (~47px total), now 5px
     (~21px total). Compact label row. */
  padding: 5px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #455a64;
  color: #dddddd;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  min-width: max-content;
}
/* v12.151: invisible spacer in the header row that holds the poster slot
   width so column labels align with the data rows' poster columns. No
   background — distinct from the visible `.sc-col-poster` used in rows.
   v12.152: width bumped to 60px to match the bigger data-row poster. */
.sc-col-poster-spacer {
  flex: 0 0 60px;
  width: 60px;
  height: 1px;
}
/* v12.151: sortable header column — pointer cursor + arrow indicators. */
.shelfd-steam-charts-sortable {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  transition: color 140ms ease;
}
.shelfd-steam-charts-sortable:active { color: #ffffff; }
.shelfd-sort-arrows {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 0;
}
.shelfd-sort-arrow {
  display: block;
  color: rgba(221, 221, 221, 0.55);
  transition: color 140ms ease;
}
.shelfd-sort-arrow.is-active { color: #a3cf0f; }
.shelfd-sort-arrow.is-inactive { color: rgba(221, 221, 221, 0.25); }
.shelfd-steam-charts-header-row .sc-col-current,
.shelfd-steam-charts-header-row .sc-col-peak24,
.shelfd-steam-charts-header-row .sc-col-peakall { text-align: right; }
.shelfd-steam-charts-header-row .sc-col-rank { text-align: center; }

/* ----- Data row (also min-width: max-content so it scrolls with header) ----- */

.shelfd-steam-charts-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  /* v12.152: 0.6px top/bottom gap so the poster top/bottom sit just inside
     the dividing lines — "as slim fitting, tight fitting as possible". */
  padding: 0.6px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 140ms ease;
  min-width: max-content;
}
.shelfd-steam-charts-row:active { background: rgba(255, 255, 255, 0.04); }
.shelfd-steam-charts-row:hover { background: rgba(255, 255, 255, 0.03); }

/* ----- Column widths (shared by header + rows) -----
   Default visible (within viewport): rank + poster + name + current.
   Scroll right to reveal: 24h peak + all-time peak.
   Wide name min-width so titles like "PUBG: BATTLEGROUNDS" never truncate. */
.sc-col-rank {
  /* v12.158: narrower rank column — 46px was too wide horizontally. 30px
     still fits 3-digit ranks (up to 100) at 13px tabular-nums. Shared by
     header + rows so they stay aligned. */
  flex: 0 0 30px;
  text-align: center;
}
.sc-col-poster {
  /* v12.152: bigger poster (60×80, ~7.5:10 aspect — matches IGDB's cover
     ratio). With row padding at 0.6px, the poster's top/bottom edges sit
     0.6px from the dividing lines above/below. */
  flex: 0 0 60px;
  width: 60px;
  height: 80px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.sc-col-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sc-col-name {
  /* v12.162: FIXED width (was content-based min 168 / max 220). With auto
     sizing the short "Name" header measured 168px while long-title rows grew
     to 220px, so rows were wider than the header — that's why the header
     background cut off before All-Time Peak and the columns drifted. A fixed
     width makes header + every row identical, so they align and the header
     bar reaches the right edge. */
  flex: 0 0 200px;
  width: 200px;
}
.sc-col-current { flex: 0 0 92px; }
.sc-col-peak24 { flex: 0 0 96px; }
.sc-col-peakall { flex: 0 0 110px; padding-right: 14px; }

.shelfd-steam-charts-row .sc-col-rank {
  color: #dddddd;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.shelfd-steam-charts-row .sc-col-name {
  color: #dddddd;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.shelfd-steam-charts-row .sc-col-current,
.shelfd-steam-charts-row .sc-col-peak24,
.shelfd-steam-charts-row .sc-col-peakall {
  text-align: right;
  color: #dddddd;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.shelfd-steam-charts-row .sc-col-current {
  color: #a3cf0f;
  font-weight: 400;
}
.shelfd-steam-charts-row .sc-col-peakall {
  color: #dddddd;
}

/* ----- Loading + error states ----- */

.shelfd-steam-charts-loading,
.shelfd-steam-charts-error {
  text-align: center;
  padding: 32px 16px;
  color: rgba(235, 232, 244, 0.55);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0;
}
.shelfd-steam-charts-error { color: rgba(255, 110, 130, 0.85); }

/* ----- Calendar stub ----- */

.shelfd-games-calendar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px 32px;
  gap: 8px;
}
.shelfd-games-calendar-empty-title {
  color: #f5f2ff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
}
.shelfd-games-calendar-empty-sub {
  color: rgba(235, 232, 244, 0.5);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  max-width: 280px;
  line-height: 1.45;
}

/* v12.149: removed the old narrow-viewport grid override — the layout is
   now flexbox + horizontal scroll, so narrow phones reveal the right-hand
   columns via swipe instead of cramming all 7 columns into the viewport. */

/* =========================================================================
   v12.155: Games Release Calendar styles.
   ========================================================================= */

.shelfd-games-calendar-overlay .shelfd-steam-charts-scroll {
  padding: 0 12px 24px;
}

/* Month pill row (Jun '26, Jul '26, …) — horizontally scrollable. */
.sc-cal-month-row {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 12px 14px 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sc-cal-month-row::-webkit-scrollbar { display: none; }
.sc-cal-month-pill {
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(230, 225, 245, 0.55);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 140ms ease, background 140ms ease;
}
.sc-cal-month-pill:hover { color: #e6e1f5; }
.sc-cal-month-pill.is-active {
  color: #a3cf0f;
  background: rgba(163, 207, 15, 0.10);
}

/* Grid — 2 cells per row, vertical scroll. */
.sc-cal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 12px;
  padding: 16px 0 24px;
}
.sc-cal-loading, .sc-cal-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 16px;
  color: rgba(230, 225, 245, 0.45);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}

.sc-cal-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Date label: "23rd" w500 white, "Tuesday" w300 white60. */
.sc-cal-date {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  padding: 0 2px;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  letter-spacing: 0;
}
.sc-cal-date-num {
  color: #ffffff;
  font-weight: 500;
  font-size: 13px;
}
.sc-cal-date-day {
  color: rgba(255, 255, 255, 0.60);
  font-weight: 300;
  font-size: 11px;
}

/* Pill row above poster — one per game. */
.sc-cal-pills {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 0 2px;
  height: 4px;
  align-items: stretch;
}
.sc-cal-pill {
  flex: 1 1 0;
  min-width: 0;
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: background 160ms ease;
}
.sc-cal-pill:hover { background: rgba(255, 255, 255, 0.30); }
.sc-cal-pill.is-active { background: #a3cf0f; }

/* Poster carousel — full-width slide track, swipe horizontally. */
.sc-cal-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  touch-action: pan-y;
}
.sc-cal-track {
  display: flex;
  flex-direction: row;
  width: 100%;
  will-change: transform;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sc-cal-slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sc-cal-poster {
  display: block;
  width: 100%;
  aspect-ratio: 600 / 900;
  object-fit: cover;
  background: #1a1d26;
  border-radius: 8px;
  cursor: pointer;
}
.sc-cal-poster-name {
  margin-top: 6px;
  padding: 0 2px;
  color: rgba(230, 225, 245, 0.78);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}