/* =============================================================================
   97-games-shelf-cards.css — v16.120
   GAMES shelf cards: Wishlist and Played.

   Both adopt the shape the movies/TV/anime planning cards use — a control stack
   under the title, and one line pinned to the poster's bottom edge — so the
   games shelf reads like the rest of the app rather than like a separate screen.
   The stack spacing itself comes from 94-shelf-title-rating.css
   (`.shelf-planning-stack`), and the bottom line from
   95-where-to-watch-modal.css (`.shelf-planning-rating-row`); this file only
   states what is games-specific.

   WISHLIST   title · status · platforms pill        ★ / priority on the edge
   PLAYED     title · status · G Profile · rating    hours played on the edge
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Shared: both games stacks use the planning rhythm.

   `.card-info` must be the positioning context. The planning cards get
   `position: relative` from a rule in 01-mylists-cards-episodes.css scoped to
   `.card-media-planning-stacked` / `.card-movies-planning-stacked` — classes a
   games card does not carry. Without it the bottom row anchored to `.card` and
   landed 22px BELOW the poster (measured), because the card is taller than the
   header by its own padding.
   -------------------------------------------------------------------------- */
#mylist-view #cards-grid .card.game-library-card .card-info {
  position: relative;
}

#mylist-view #cards-grid .card.game-library-card .shelf-planning-stack,
#mylist-view #cards-grid .card.game-library-card .shelf-game-played-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
#mylist-view #cards-grid .card.game-library-card .card-info > .shelf-planning-stack,
#mylist-view #cards-grid .card.game-library-card .card-info > .shelf-game-played-stack {
  margin-top: calc(4 * var(--shelfd-px, 1px)) !important;
}
#mylist-view #cards-grid .card.game-library-card .shelf-game-played-stack > * {
  margin: 0 !important;
}
/* 10px between every item in the stack — the same rhythm TV Shows / Watching
   uses, which is the reference the rest of the shelf was matched to. */
#mylist-view #cards-grid .card.game-library-card .shelf-game-played-stack > * + *,
#mylist-view #cards-grid .card.game-library-card .shelf-planning-stack > .games-platforms-line {
  margin-top: calc(10 * var(--shelfd-px, 1px)) !important;
}

/* -----------------------------------------------------------------------------
   WISHLIST — the platforms pill.

   Same control as the where-to-watch pill (it reuses .wtw-pill), so a game's
   platforms and a film's services are the same affordance. The wrapper exists
   only so the stack's `> * + *` spacing has a single child to target.
   -------------------------------------------------------------------------- */
#mylist-view #cards-grid .card.game-library-card .games-platforms-line {
  display: flex;
  align-items: center;
  line-height: 1 !important;
}

/* -----------------------------------------------------------------------------
   PLAYED — G Profile button and the hours line.
   -------------------------------------------------------------------------- */
/* v16.127: the G Profile button now wears the Episodes button's classes, so its
   size and chrome come from the Episodes rules in 01-mylists-cards-episodes.css.
   Nothing to restate here — only the flex behaviour inside this stack. */
#mylist-view #cards-grid .card.game-library-card .shelf-game-played-stack > .shelf-g-profile-btn {
  flex: 0 0 auto;
}
#mylist-view #cards-grid .card.game-library-card .shelf-planning-rating-row > .shelf-game-hours {
  grid-column: 1;
  justify-self: start;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: calc(13 * var(--shelfd-px, 1px));
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  margin: 0 !important;
}
body.light-mode #mylist-view #cards-grid .card.game-library-card .shelf-planning-rating-row > .shelf-game-hours {
  color: rgba(20, 18, 28, 0.72);
}

/* -----------------------------------------------------------------------------
   The games ★.

   Sized to the controls beside it, exactly like the movies planning rating. The
   dash an unreleased game shows sits in the same box as a score would, so a card
   does not change height when its rating resolves.
   -------------------------------------------------------------------------- */
#mylist-view #cards-grid .card.game-library-card .shelf-planning-rating-row > .shelf-game-rating {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: calc(5 * var(--shelfd-px, 1px));
  height: calc(25.3 * var(--shelfd-px, 1px));
  margin: 0 !important;
  line-height: 1 !important;
}
#mylist-view #cards-grid .card.game-library-card .shelf-game-rating .shelfd-star-glyph {
  --shelfd-star-size: calc(18 * var(--shelfd-px, 1px));
  color: #E6C766;
}
#mylist-view #cards-grid .card.game-library-card .shelf-game-rating .shelf-title-rating-score {
  font-size: calc(15 * var(--shelfd-px, 1px));
  font-weight: 500;
  color: #ffffff;
  line-height: 1 !important;
}

/* -----------------------------------------------------------------------------
   The wishlist card's old two-column priority block is gone — the circle now
   sits in the shared bottom row. This zeroes the container it used to need so a
   stale rule cannot reserve space for it.
   -------------------------------------------------------------------------- */
#mylist-view #cards-grid .card.games-wishlist-card .games-wishlist-card-priority {
  display: none !important;
}
#mylist-view #cards-grid .card.games-wishlist-card .shelf-planning-rating-row > .watchlist-priority-slot {
  position: static;
  grid-column: 3;
  justify-self: end;
  margin: 0 !important;
}

/* =============================================================================
   v16.128 — "Gaming Clips ›" on the game profile.

   The reel's heading is now a button that opens this game's clips page. It keeps
   `.mylist-game-profile-highlight-head-left`, so the type it already had in
   34-mylist-games.css still applies — only the button reset and the chevron are
   stated here.

   The chevron matches the search rows: 18px, 1.2px stroke, the app's lavender.
   One affordance means one thing everywhere in the app.
   ============================================================================= */
.mylist-game-profile-highlight-head .mylist-game-profile-clips-link {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--shelfd-px, 1px));
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  /* the heading's own colour, not a link colour — the chevron is what marks it
     as tappable, so the words stay a heading */
  color: inherit;
  font: inherit;
  text-align: left;
}
.mylist-game-profile-highlight-head .mylist-game-profile-clips-link:active {
  opacity: 0.6;
}
.mylist-game-profile-highlight-head .mylist-game-profile-clips-chevron {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: #a78bfa;
}
.mylist-game-profile-highlight-head .mylist-game-profile-clips-chevron svg {
  width: calc(18 * var(--shelfd-px, 1px));
  height: calc(18 * var(--shelfd-px, 1px));
  stroke-width: 1.2;
}
body.light-mode .mylist-game-profile-highlight-head .mylist-game-profile-clips-chevron {
  color: #7c3aed;
}
/* `.mylist-game-profile-highlight-head span` in 34-mylist-games.css mutes every
   span in this row to 13px/400/48% — that rule exists for the "N clips" count.
   The label is a span now (it was bare text), so it needs the heading type the
   left group used to carry directly. */
.mylist-game-profile-highlight-head .mylist-game-profile-clips-link .mylist-game-profile-clips-label {
  color: #ffffff;
  font-size: calc(16 * var(--shelfd-px, 1px));
  font-weight: 600;
  line-height: 1.2;
}
body.light-mode .mylist-game-profile-highlight-head .mylist-game-profile-clips-link .mylist-game-profile-clips-label {
  color: #14121c;
}

/* =============================================================================
   v16.132 — the clips page opened FROM a game profile has to sit above it.

   `.shelfd-diary-page` (06-profile.css) is z-index 1550 — correct when the clips
   page is opened from the shelf, where nothing else is stacked. But the game
   profile overlay is z-index 7600, so tapping "Gaming Clips ›" mounted the page
   correctly (fixed, full-screen, .is-open, opacity 1 — verified live) and then
   rendered it entirely behind the profile. It looked like nothing happened.

   Raised only while a game profile is actually open, so the shelf-opened case
   keeps the stacking it was designed with. 7700 clears 7600 with room to spare
   and stays under the app's 9000-tier overlays (rating guide / consensus).
   ============================================================================= */
body.mylist-game-profile-open #shelfd-game-clips-page,
body.mylist-game-profile-open #shelfd-gaming-clips-page {
  z-index: 7700 !important;
}