/*
   34-mylist-games.css
   Extracted from 01-mylists-cards-episodes.css to keep surface ownership explicit.
*/

  /* v10.426: GAMES section gets the SAME action-row hoist as TV Shows
     for every status that uses the rating bubble — Playing (single),
     Playing (live), Playing (competitive), and Played. Scoped to
     `.card-uses-rating-bubble` so it ONLY fires on the four statuses
     that use the bubble (filtered in `useRatingBubble`) — wishlist +
     Backloggd cards keep their existing layout (Backloggd never gets
     the action row markup at all, see the `!isGameBackloggdCard` JS
     gate).
     v10.427: split into desktop + mobile media-query branches because
     the card cover changes width across breakpoints. Desktop base
     (.card-cover width:100, .card-header padding:14, gap:14) puts the
     meta-column edge at 14 + 100 + 14 = 128. Mobile override in
     05-messages-early-polish.css (max-width:700) bumps the cover to
     120 and the gap to 13, shifting the meta-column edge to
     14 + 120 + 13 = 147. Without this split the bubble's border sat
     ~19px LEFT of the title text on mobile — visibly under the
     cover's right edge rather than flush with the title. Both branches
     anchor the action row's bottom at card-header padding-bottom so
     the row lines up with the cover's bottom edge. */
  #mylist-view .card[data-library-section="games"].card-uses-rating-bubble {
    position: relative;
  }
  #mylist-view .card[data-library-section="games"].card-uses-rating-bubble .card-action-row {
    position: absolute !important;
    bottom: 14px !important;
    left: 128px !important;
    right: 14px !important;
    top: auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    display: flex !important;
  }
  @media (max-width: 700px) {
    #mylist-view .card[data-library-section="games"].card-uses-rating-bubble .card-action-row {
      left: 147px !important;
    }
  }

  /* v10.429: GAMES — universal cover aspect with 12px corners. The
     base `.card-cover` rule sets `aspect-ratio: 1400/2100` (a 2:3
     portrait poster meant for movies/TV). Game covers get their own
     ratio + softer "platform tile" rounding.
     v10.431: aspect bumped 5:4 (landscape) → 5:6.38 (portrait) per
     spec. This matches the native Steam/IGDB box-art ratio so the
     cover frames the title art the way the publisher intended. */
  #mylist-view .card[data-library-section="games"] .card-cover {
    aspect-ratio: 5 / 6.38 !important;
    border-radius: 12px !important;
  }

  /* v10.429: GAMES action-row anchored to the COVER's bottom edge,
     not the card's bottom. Technique: anchor the row's TOP at
     `cover-bottom-Y` from card top, then `transform: translateY(-100%)`
     lifts the row up by its own rendered height so its BOTTOM edge
     lands at that Y. This is robust to variable row heights — no
     fixed-height assumption.
     v10.431: recomputed for the new 5:6.38 portrait aspect.
     Desktop cover: 100 × (100 × 6.38/5) = 100 × 127.6 → cover-
     bottom-Y = 14 (card-header padding-top) + 127.6 ≈ 142. Mobile
     cover: 120 × (120 × 6.38/5) = 120 × 153.12 → cover-bottom-Y =
     14 + 153.12 ≈ 167. Rounded to whole pixels because subpixel
     `top` values get smeared by sub-pixel anti-aliasing on iOS. */
  #mylist-view .card[data-library-section="games"].card-uses-rating-bubble .card-action-row {
    top: 142px !important;
    bottom: auto !important;
    transform: translateY(-100%) !important;
  }
  @media (max-width: 700px) {
    #mylist-view .card[data-library-section="games"].card-uses-rating-bubble .card-action-row {
      top: 167px !important;
    }
  }

  /* v10.429: FULL-PAGE game profile cover (`.mylist-game-profile-cover`)
     — used on the dedicated MyList → game profile route (opened from
     competitive title cards via `openMyListGameProfilePage`). The
     existing rules across this file set `aspect-ratio: 3 / 4`
     (portrait) and `border-radius: 8px–10px`. Override for visual
     consistency with the title cards. `!important` on every
     property because the existing rules use it too — without it
     the cascade ties at multiple specificities and source order
     would decide.
     v10.431: aspect updated to 5:6.38 (native Steam/IGDB box-art
     ratio) per spec. */
  .mylist-game-profile-cover {
    aspect-ratio: 5 / 6.38 !important;
    border-radius: 12px !important;
  }

  /* v10.429: Discover-style game media profile poster
     (`.game-media-profile-overlay .discover-media-poster`) — the
     route opened when a game is tapped from outside MyList. Was
     2:3 portrait + 8px radius.
     v10.431: aspect updated to 5:6.38 to match the title-card
     cover and the MyList profile cover. */
  .game-media-profile-overlay .discover-media-poster {
    aspect-ratio: 5 / 6.38 !important;
    border-radius: 12px !important;
  }


  /* v10.433: COMPETITIVE game cards drop the title clamp from 2
     lines to 1. The competitive surface has dense secondary content
     (status pill, platform line, dedicated competitive-stats card,
     rating bubble) below the title, so allocating two lines to the
     title makes the card overly tall and pushes everything down.
     Single line + ellipsis keeps the card compact regardless of
     title length. Hooks the new `.game-competitive-card` class
     added to the card markup whenever `isCompetitiveGameCard` is
     true. */
  .game-competitive-card .card-title,
  .game-competitive-card .card-title .card-title-profile-btn,
  .game-competitive-card .card-title .media-title-profile-btn,
  .game-competitive-card .card-title .game-title-profile-btn,
  .game-competitive-card .card-title > span {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }

  /* v10.428: GAMES — move the status pill directly under the title for
     EVERY status (Single Player / Live / Competitive / Played /
     Backloggd / Wishlist). `.card-info` is already a flex column
     (set in 05-messages-early-polish.css line 2558+), so we don't
     need to move JS markup — flex `order` reorders the children
     visually without touching the DOM. Default order is 0 for
     every child; bumping every direct child to `order: 2` and then
     pinning `.card-title-row` + `.status-pills-selector-wrap` to
     `order: 1` lifts both to the top of the column. When two flex
     children share the same `order`, the spec resolves the tie by
     DOM order — and `.card-title-row` is declared before
     `.status-pills-selector-wrap` in the markup, so the title
     stays first and the status pill lands directly beneath it.
     All other meta (year, artist, genre, game stats, progress,
     next-episode line, etc.) flow below as `order: 2`.
     v10.432: status-pill margin-top tightened from the default 6px
     down to 2px per spec ("0.5 spacing"). Without this override the
     `.game-status-pills-wrap, .status-pills-selector-wrap` rule
     elsewhere in this file applies a 6px top margin meant for the
     legacy non-stacked layout — visibly too airy when the pill
     sits directly beneath the title. 2px reads as a tight, almost-
     touching break that still gives the pill room to render its
     own click-target without the title text appearing to crash
     into it. Scoped to games only; music / shows / anime keep
     their existing `margin-top: 0` flush-against-meta treatment. */
  #mylist-view .card[data-library-section="games"] .card-info > * {
    order: 2;
  }
  #mylist-view .card[data-library-section="games"] .card-info > .card-title-row,
  #mylist-view .card[data-library-section="games"] .card-info > .status-pills-selector-wrap {
    order: 1;
  }
  #mylist-view .card[data-library-section="games"] .status-pills,
  #mylist-view .card[data-library-section="games"] .status-pills-selector-wrap {
    /* v10.436: line spacing reverted from 0.9px (v10.434) to 6px
       per spec ("change back the spacing... 1 line spacing"). 6px
       matches the original `.game-status-pills-wrap,
       .status-pills-selector-wrap { margin-top: 6px }` default and
       reads as a single line break between meta rows. Applies
       across every game status (playing / backlog / played /
       wishlist). */
    margin-top: 6px !important;
  }

  /* v10.434: 0.9px gap between game-card stat rows.
     v10.436: reverted to 6px / 3px per spec ("1 line spacing") —
     same one-line-break feel as the title→status gap above.
     - margin-top 6px: status → hours-played gap
     - gap 3px: between stat rows inside the block (currently only
       one row exists after the v10.434 trim, but reserved for
       future row additions to stay in rhythm). */
  #mylist-view .card[data-library-section="games"] .game-card-stats-inline {
    margin-top: 6px !important;
    gap: 3px !important;
  }

  /* v10.436: vertically center every child of the games action row
     so the rating bubble (min-height 30px) and the + button
     (height 32px) line up on the same horizontal axis. Without
     this, the default flex `align-items: stretch` was producing
     subtle vertical drift on the Played surface because the
     bubble's intrinsic height differed from the +'s explicit
     height. Center-alignment keeps both items pegged to the row's
     midline regardless of their individual heights. */
  #mylist-view .card[data-library-section="games"].card-uses-rating-bubble .card-action-row {
    align-items: center !important;
  }

  /* v10.436: reduce the horizontal width of every status pill on
     game cards so the chip hugs its label instead of carrying the
     legacy 10px side padding. Applies to the current-pill (visible
     in the meta column) AND each alternative in the pop-out
     flyout. Padding 3px 10px -> 3px 5px snugs the border around
     short labels like "Played" / "Live" / "Backloggd" without
     ever clipping longer ones because `white-space: nowrap` is
     already in place. */
  #mylist-view .card[data-library-section="games"] .game-status-current-pill,
  #mylist-view .card[data-library-section="games"] .game-status-options .status-pill {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* v11.578: wishlist game cards now SHOW genre + release date (spec: title,
     status, release, genre, priority). The old v10.436 rule that hid these meta
     lines for height parity is removed — height is handled by collapsing the
     empty action row instead. Platforms is no longer rendered at all, so no
     per-line hide is needed here. */


/* v413: game covers keep visible fallback art; placeholder only appears when no image exists */
#mylist-view .card-cover.screenlist-game-cover-pending,
#mylist-view .card-cover.no-img.screenlist-game-cover-pending,
.discover-media-poster.game-media-poster.screenlist-game-cover-pending {
  background-image: none !important;
  background: linear-gradient(145deg, rgba(19, 20, 27, 0.92), rgba(42, 43, 51, 0.82)) !important;
  color: rgba(255,255,255,0.84) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#mylist-view .card-cover.screenlist-game-cover-pending span,
.discover-media-poster.game-media-poster.screenlist-game-cover-pending span {
  padding: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.82);
}

/* v411: user-selected IGDB/Twitch game cover picker */
.game-card-cover-btn {
  position: static;
  min-height: 27px;
  padding: 0 10px;
  border: 1px solid rgba(196,181,253,0.30);
  border-radius: 999px;
  background: rgba(5, 4, 16, 0.72);
  color: #ffffff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  z-index: 3;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.game-card-cover-btn:active { transform: scale(0.96); }
#mylist-view .game-library-card .card-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.screenlist-game-profile-cover-btn {
  background: rgba(6, 182, 212, 0.22) !important;
  border-color: rgba(103, 232, 249, 0.42) !important;
  color: #ffffff !important;
}
.screenlist-game-cover-picker {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: flex-end;
  background: rgba(0,0,0,0.58);
  opacity: 0;
  transition: opacity 220ms ease;
}
.screenlist-game-cover-picker.open {
  display: flex;
  opacity: 1;
}
body.screenlist-game-cover-picker-open { overflow: hidden !important; }
.screenlist-game-cover-picker-sheet {
  width: 100%;
  height: min(88vh, 780px);
  border-radius: 28px 28px 0 0;
  border: 1px solid rgba(255,255,255,0.22);
  background: #05040d;
  color: #ffffff;
  transform: translate3d(0, 18px, 0);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Sohne', 'DM Sans', sans-serif;
}
.screenlist-game-cover-picker.open .screenlist-game-cover-picker-sheet { transform: translate3d(0, 0, 0); }
.screenlist-game-cover-picker-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.13);
}
.screenlist-game-cover-picker-back,
.screenlist-game-cover-picker-search button {
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  border-radius: 999px;
  min-height: 38px;
  padding: 0 14px;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-weight: 850;
  cursor: pointer;
}
.screenlist-game-cover-picker-title-wrap {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.screenlist-game-cover-picker-title-wrap strong {
  font-size: 18px;
  font-weight: 900;
}
.screenlist-game-cover-picker-title-wrap span {
  color: rgba(255,255,255,0.68);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screenlist-game-cover-picker-search {
  display: flex;
  gap: 10px;
  padding: 12px 16px 8px;
}
.screenlist-game-cover-picker-search input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(196,181,253,0.22);
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  padding: 0 13px;
  font: 800 16px 'Sohne', 'DM Sans', sans-serif;
  outline: none;
}
.screenlist-game-cover-picker-status {
  min-height: 28px;
  padding: 0 16px 10px;
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  font-weight: 750;
}
.screenlist-game-cover-picker-grid {
  flex: 1;
  overflow-y: auto;
  padding: 0 14px calc(24px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 16px;
}
.screenlist-game-cover-group {
  display: grid;
  gap: 9px;
}
.screenlist-game-cover-group-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  text-align: center;
}
.screenlist-game-cover-group-head::before,
.screenlist-game-cover-group-head::after {
  content: "";
  flex: 1;
  max-width: 72px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.32), rgba(255,255,255,0.08));
}
.screenlist-game-cover-group-head span {
  padding: 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
}
.screenlist-game-cover-group-copy {
  margin: 0;
  padding: 0 10px;
  text-align: center;
  color: rgba(255,255,255,0.52);
  font-size: 11px;
  line-height: 1.45;
}
.screenlist-game-cover-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px 10px;
}
.screenlist-game-cover-empty {
  grid-column: 1 / -1;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 13px 14px;
  color: rgba(255,255,255,0.62);
  background: rgba(255,255,255,0.045);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 750;
  text-align: center;
}
.screenlist-game-cover-choice {
  appearance: none;
  border: 0;
  background: transparent;
  color: #ffffff;
  padding: 0;
  text-align: center;
  cursor: pointer;
  font-family: 'Sohne', 'DM Sans', sans-serif;
}
.screenlist-game-cover-choice img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 12px 28px rgba(0,0,0,0.32);
  display: block;
}
.screenlist-game-cover-choice span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.18;
  font-weight: 800;
  color: rgba(255,255,255,0.88);
}
.screenlist-game-cover-choice small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 700;
  color: rgba(255,255,255,0.52);
}
@media (min-width: 760px) {
  .screenlist-game-cover-picker { align-items: center; justify-content: center; }
  .screenlist-game-cover-picker-sheet {
    width: min(760px, 92vw);
    height: min(84vh, 760px);
    border-radius: 28px;
  }
  .screenlist-game-cover-choice-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* v414: automated cover search query is display-only. */
.screenlist-game-cover-picker-search input[readonly] {
  opacity: 0.82;
  cursor: default;
}

/* =============================================================================
   v11.042 — GAME PROFILE PAGE: full UI rebuild (Editorial Dark, flat + minimal)
   -----------------------------------------------------------------------------
   Single source of truth. Replaces the stacked v10.353 / v10.357 / v11.037
   reskins (all removed). No button functions changed — every class / id /
   data-attribute the JS depends on is preserved:
     #mylist-game-profile-page, .mylist-game-profile-scroll,
     .mylist-game-profile-edit, .mylist-rank-picker-*,
     [data-game-profile-edit-field], .rank-picker-open, .is-open, etc.
   Flat #0E0E0E surface, hairline dividers, lavender (#a78bfa) interactive
   accent, subtle inset cards for figures. Söhne throughout.
   ============================================================================= */
body.mylist-game-profile-open { overflow: hidden; }

.mylist-game-profile-page {
  position: fixed;
  inset: 0;
  z-index: 7600;
  display: flex;
  flex-direction: column;
  background: #0E0E0E;
  color: #f5f2ff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  transform: translate3d(100%, 0, 0);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}
.mylist-game-profile-page.is-open { transform: translate3d(0, 0, 0); }
.mylist-game-profile-page * { font-family: 'Sohne', 'DM Sans', sans-serif; }

.mylist-game-profile-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100dvh;
}

/* ---- Topbar -------------------------------------------------------------- */
.mylist-game-profile-topbar {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  /* v11.077: equal side columns so the centered "Game Profile" title sits at
     true screen center regardless of the back button vs action-button widths. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 12px;
  background: #0E0E0E;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.mylist-game-profile-topbar > span {
  justify-self: center;
  min-width: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mylist-game-profile-back {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mylist-game-profile-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mylist-game-profile-back:active { transform: scale(0.94); opacity: 0.8; }
.mylist-game-profile-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mylist-game-profile-share {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mylist-game-profile-share svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mylist-game-profile-share:active { transform: scale(0.94); opacity: 0.8; }
.mylist-game-profile-edit {
  appearance: none;
  -webkit-appearance: none;
  min-width: 56px;
  height: 32px;
  padding: 0 15px;
  border: 1px solid rgba(167, 139, 250, 0.34);
  background: rgba(167, 139, 250, 0.12);
  color: #c4b5fd;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mylist-game-profile-edit:active { transform: scale(0.96); opacity: 0.8; }
.mylist-game-profile-edit:disabled { opacity: 0.55; }

/* ---- Scroll body --------------------------------------------------------- */
.mylist-game-profile-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 18px 18px calc(env(safe-area-inset-bottom, 0px) + 36px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mylist-game-profile-scroll::-webkit-scrollbar { display: none; }
.mylist-game-profile-page.rank-picker-open .mylist-game-profile-scroll {
  overflow: hidden;
  touch-action: none;
}

/* ---- Hero ---------------------------------------------------------------- */
.mylist-game-profile-hero {
  position: relative;
  display: block;
  padding: 2px 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/* Flat, minimal — the old ambient blur layers are intentionally hidden. */
.mylist-game-profile-hero-bg,
.mylist-game-profile-hero-glow { display: none !important; }
.mylist-game-profile-hero-card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.mylist-game-profile-cover {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  width: 104px;
  aspect-ratio: 5 / 6.38;
  height: auto;
  border-radius: 12px;
  background-color: #1a1a1a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.mylist-game-profile-cover:active { transform: scale(0.985); }
.mylist-game-profile-cover.no-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.42);
  font-size: 40px;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.28), rgba(255, 255, 255, 0.05));
}
.mylist-game-profile-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mylist-game-profile-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mylist-game-profile-kicker {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.4);
  background: rgba(167, 139, 250, 0.14);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mylist-game-profile-tracker-shortcut {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mylist-game-profile-tracker-shortcut:active { transform: scale(0.92); opacity: 0.75; }
.mylist-game-profile-tracker-mark {
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  transform: translateX(2px);
}
.mylist-game-profile-tracker-shortcut svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: #c4b5fd;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(-1px, -2px);
}
.mylist-game-profile-identity h1 {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.mylist-game-profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.mylist-game-profile-meta-row span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}
.mylist-game-profile-subcopy {
  margin: 2px 0 0;
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
}

/* v11.079: interactive rating in the hero (replaces the old subcopy). Same
   half-step star visual as the Write-a-Review composer, sized to fit. */
.mylist-game-profile-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 0;
}
.mylist-game-profile-rating-stars {
  display: inline-flex;
  gap: 3px;
}
.mylist-game-profile-rating-slot {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  font-size: 26px;
  line-height: 26px;
}
.mylist-game-profile-rating-base { color: rgba(255, 255, 255, 0.22); }
.mylist-game-profile-rating-fill {
  position: absolute;
  inset: 0;
  color: #E6C36A;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--star-fill, 0%)) 0 0);
}
.mylist-game-profile-rating-hit {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mylist-game-profile-rating-hit-left { left: 0; }
.mylist-game-profile-rating-hit-right { right: 0; }
.mylist-game-profile-rating.is-readonly .mylist-game-profile-rating-hit { display: none; }
.mylist-game-profile-rating-value {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* ---- Facts strip --------------------------------------------------------- */
.mylist-game-profile-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px;
  margin: 18px 0 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}
.mylist-game-profile-facts div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 14px;
  background: #0E0E0E;
  min-width: 0;
}
.mylist-game-profile-facts span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mylist-game-profile-facts strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* ---- Section panels ------------------------------------------------------ */
.mylist-game-profile-panel {
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.mylist-game-profile-panel:last-child { border-bottom: 0; }
.mylist-game-profile-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}
.mylist-game-profile-panel-head span {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}
.mylist-game-profile-panel-head small {
  flex: 0 0 auto;
  max-width: 55%;
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.3;
  text-align: right;
}

/* ---- Stat grid (read + edit share the card; label on top, value below) --- */
.mylist-game-profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mylist-game-profile-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
}
.mylist-game-profile-stat > span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mylist-game-profile-stat > strong {
  max-width: 100%;
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Rank read-stat: centered icon + name + label */
.mylist-game-profile-rank-stat {
  align-items: center;
  text-align: center;
  gap: 8px;
}
.mylist-game-profile-rank-logo,
.mylist-game-profile-rank-logo-placeholder {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}
.mylist-game-profile-rank-logo-placeholder {
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  filter: none;
}
.mylist-game-profile-rank-stat > strong {
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}
.mylist-game-profile-rank-stat > span {
  width: 100%;
}

/* ---- Edit: profile setup grid + fields ----------------------------------- */
.mylist-game-profile-edit-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mylist-game-profile-edit-meta label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.mylist-game-profile-edit-meta label > span,
.mylist-game-profile-editable-link-label,
.mylist-game-profile-highlight-input span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* v11.044: editable-link label row holds the field label + an optional
   "Open ↗" quick-link to the source site (Tracker.gg). */
.mylist-game-profile-editable-link-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.mylist-game-profile-field-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.mylist-game-profile-field-open:active { opacity: 0.7; }
/* Read-mode "Not linked" tracker row: keep "Not linked" pinned right so
   the Open link sits next to the label (the circled spot). */
.mylist-game-profile-link-row.has-quick-open > strong { margin-left: auto; }
.mylist-game-profile-edit-meta input,
.mylist-game-profile-edit-meta select,
.mylist-game-profile-editable-stat input,
.mylist-game-profile-editable-link input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  outline: none;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  /* v11.044: guarantee text selection + the iOS Paste callout work in
     these fields regardless of any app-level user-select:none. */
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.mylist-game-profile-edit-meta select {
  appearance: none;
  -webkit-appearance: none;
}
.mylist-game-profile-edit-meta input:focus,
.mylist-game-profile-edit-meta select:focus,
.mylist-game-profile-editable-stat input:focus,
.mylist-game-profile-editable-link input:focus {
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15);
}

/* ---- Rank icon picker ---------------------------------------------------- */
.mylist-rank-picker-field { position: relative; }
.mylist-rank-picker-field.is-open { z-index: 30; }
.mylist-rank-picker-trigger {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  color: #ffffff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mylist-rank-picker-trigger img {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  object-fit: contain;
}
.mylist-rank-picker-empty {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
}
.mylist-rank-picker-trigger strong {
  min-width: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mylist-rank-picker-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  max-height: min(360px, 50vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #161616;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
  display: none;
}
.mylist-rank-picker-field.is-open .mylist-rank-picker-menu {
  display: grid;
  gap: 6px;
}
.mylist-rank-picker-option {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mylist-rank-picker-option.active {
  border-color: rgba(167, 139, 250, 0.4);
  background: rgba(167, 139, 250, 0.16);
}
.mylist-rank-picker-option img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
}
.mylist-rank-picker-option span {
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.2;
}

/* ---- Links --------------------------------------------------------------- */
.mylist-game-profile-links .mylist-game-profile-panel-head { margin-bottom: 6px; }
.mylist-game-profile-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  margin-top: 10px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mylist-game-profile-link-row:active { transform: scale(0.99); }
.mylist-game-profile-link-row > span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}
.mylist-game-profile-link-row > strong {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
a.mylist-game-profile-link-row > strong::after {
  content: '\203A';
  margin-left: 7px;
  color: #a78bfa;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}
.mylist-game-profile-link-row.is-disabled { opacity: 0.55; }
.mylist-game-profile-link-row.is-disabled > strong { color: rgba(255, 255, 255, 0.4); }
/* v11.044: a not-linked row that offers a quick-open link stays full
   opacity (the Open ↗ must read as tappable) — only the "Not linked"
   status text is muted. */
.mylist-game-profile-link-row.is-disabled.has-quick-open { opacity: 1; }
.mylist-game-profile-link-row.is-disabled.has-quick-open > span { color: rgba(255, 255, 255, 0.86); }
.mylist-game-profile-editable-link {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-height: 0;
  padding: 12px 14px;
}
.mylist-game-profile-highlight-button { cursor: pointer; }
.mylist-game-profile-edit-status {
  min-height: 18px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
}
.mylist-game-profile-edit-status.is-error { color: #ff7a7a; }

/* ---- Highlight reel embed ------------------------------------------------ */
.mylist-game-profile-highlight-preview {
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.mylist-game-profile-highlight-head {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mylist-game-profile-highlight-head span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 13px;
  font-weight: 400;
}
.mylist-game-profile-highlight-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -2px;
  padding: 0 2px 2px;
}
.mylist-game-profile-highlight-track::-webkit-scrollbar { display: none; }
.mylist-game-profile-highlight-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.mylist-game-profile-highlight-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #000;
}
.mylist-game-profile-highlight-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.mylist-game-profile-highlight-caption {
  margin: 10px 2px 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
}

/* ---- Highlight link bottom-sheet modal ----------------------------------- */
.mylist-game-profile-highlight-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* JS (visualViewport) feeds the live keyboard height into this var so the
     bottom sheet lifts above the iOS keyboard instead of hiding behind it. */
  padding-bottom: var(--game-profile-highlight-keyboard-offset, 0px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, padding-bottom 180ms ease;
}
.mylist-game-profile-highlight-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mylist-game-profile-highlight-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.mylist-game-profile-highlight-sheet {
  position: relative;
  width: 100%;
  max-width: 640px;
  /* v11.394: full-page sheet that rises from the bottom of the screen.
     v11.470 FIX: the sheet must never be taller than the space left ABOVE the
     iOS keyboard. The container adds padding-bottom = keyboard height to lift the
     sheet clear of the keyboard; with a fixed 90dvh height that lift shoved the
     sheet's top off the top of the screen, and because the container is
     position:fixed it could not be scrolled back into frame ("fixed too high").
     Capping both height and max-height by the live keyboard offset makes the
     sheet shrink to fit and stay anchored at the bottom, always fully on-screen.
     When the keyboard is closed the offset is 0, so it rests at 90dvh as before. */
  height: 90vh;
  height: min(90dvh, calc(100dvh - var(--game-profile-highlight-keyboard-offset, 0px) - 12px));
  max-height: 90vh;
  max-height: calc(100dvh - var(--game-profile-highlight-keyboard-offset, 0px) - 12px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 18px calc(env(safe-area-inset-bottom, 0px) + 20px);
  border-radius: 24px 24px 0 0;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mylist-game-profile-highlight-modal.is-open .mylist-game-profile-highlight-sheet {
  transform: translateY(0);
}
.mylist-game-profile-highlight-grabber {
  width: 42px;
  height: 4px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}
.mylist-game-profile-highlight-sheet h2 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}
.mylist-game-profile-highlight-sheet p {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}
.mylist-game-profile-highlight-input {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.mylist-game-profile-highlight-input input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #0E0E0E;
  color: #ffffff;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 16px;
  letter-spacing: 0.01em;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.mylist-game-profile-highlight-input input:focus {
  border-color: rgba(196, 181, 253, 0.5);
}
.mylist-game-profile-highlight-list {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}
.mylist-game-profile-highlight-editor-row {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.mylist-game-profile-highlight-add {
  width: fit-content;
  min-height: 36px;
  margin: 2px 0 16px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: #c4b5fd;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.mylist-game-profile-highlight-add:active { opacity: 0.7; }
.mylist-game-profile-highlight-remove[hidden] { display: none; }
.mylist-game-profile-highlight-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mylist-game-profile-highlight-secondary,
.mylist-game-profile-highlight-primary {
  min-height: 46px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
}
.mylist-game-profile-highlight-secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
}
.mylist-game-profile-highlight-primary {
  background: #a78bfa;
  border-color: transparent;
  color: #0E0E0E;
  font-weight: 600;
}

/* ---- Desktop scale-up (app is iPhone-first; this just relaxes spacing) --- */
@media (min-width: 720px) {
  .mylist-game-profile-hero-card { grid-template-columns: 132px minmax(0, 1fr); }
  .mylist-game-profile-cover { width: 132px; }
  .mylist-game-profile-identity h1 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .mylist-game-profile-page,
  .mylist-game-profile-highlight-modal,
  .mylist-game-profile-highlight-sheet { transition: none !important; }
}

/* =============================================================================
   v11.224 — Title-card text line-height = 18px (My Lists)
   Every text element on a My Lists title card (`#mylist-view .card`) renders
   with a fixed 18px line-height. Scoped to the card root + all descendants so
   titles, status pills, episode counts, ratings, metadata, and footer button
   labels all share an 18px leading. `!important` wins over any per-element
   line-height (incl. existing !important rules). Episode/season detail pages
   and full-page profiles are NOT affected (outside `#mylist-view .card`).
   ============================================================================= */
#mylist-view .card,
#mylist-view .card * {
  line-height: 18px !important;
}

/* =============================================================================
   v11.226 — Uniform 6px vertical gap between EVERY stacked element on a card
   Every stacked child inside `.card-info` (title row, status pill, year,
   artist, genre, progress area, next-episode line, inline rating, comment slot,
   metadata, etc.) is separated by exactly 6px. The first stacked child has no
   top margin so the stack starts flush with the cover top.
   This is a rebuild-over-override: it replaces the prior per-section margins
   (anime 0, shows 0, games 6, movies 8.4, under-title 3) with ONE uniform 6px,
   matching the Games card spacing across every category. Highest-specificity
   `#mylist-view .card .card-info > *` + later declaration + !important wins
   the cascade cleanly. Episode/season pages + profiles are untouched.
   ============================================================================= */
#mylist-view .card .card-info > * {
  margin-top: 6px !important;
}
#mylist-view .card .card-info > *:first-child {
  margin-top: 0 !important;
}

/* v11.229 — collapse stacked internal margins between the episode count and
   the "Where to watch" line. The big gap was three margins stacking:
   .progress-meta margin-bottom (only needed to separate the count from a
   progress BAR) + the 6px card-info gap + .card-availability-line margin-top.
   Planned cards have no progress bar, so the progress-meta margin is wasted
   space. Drop it ONLY when progress-meta is the last child (no bar present),
   and zero the availability line's own top margin so the uniform 6px between
   card-info children is the single source of the gap. Watching cards (which
   DO have a bar) keep progress-meta's margin because it is not :last-child. */
#mylist-view .card .progress-area > .progress-meta:last-child {
  margin-bottom: 0 !important;
}
#mylist-view .card .watchlist-card-metadata > *:first-child {
  margin-top: 0 !important;
}
#mylist-view .card .card-availability-line {
  margin-top: 0 !important;
}

/* =============================================================================
   v11.230 — HD poster: real <img> cover (My Lists, non-game)
   The non-game card cover now renders a real <img> (`.card-cover-img`) instead
   of a CSS background-image. WKWebView applies proper retina downscaling to
   <img>, so the poster reads crisp at 2x/3x; backgrounds looked soft. The img
   fills the existing `.card-cover` box (which is flex + overflow:hidden) via
   absolute positioning so it doesn't fight the flex centering used for the
   emoji/placeholder fallback. Portrait posters use top-center crop (matches the
   old background-position); music covers are square and center-cropped.
   ============================================================================= */
#mylist-view .card .card-cover { position: relative; }
#mylist-view .card .card-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: inherit;
  /* keep the high-res source sharp when scaled into the small box */
  image-rendering: -webkit-optimize-contrast;
}
#mylist-view .card .card-cover-img.card-cover-img-music {
  object-position: center center;
}

/* =============================================================================
   v11.232 — Smoother My Lists scrolling
   Long libraries repaint every card on each scroll frame (each card has a
   border + gradient + box-shadow). `content-visibility: auto` lets the browser
   SKIP layout/paint for cards currently off-screen, so only the ~handful of
   visible cards are rendered per frame — big win on long lists. The paired
   `contain-intrinsic-size` reserves an estimated height for off-screen cards
   so the scrollbar/position stays stable (no jump) before they paint.
   ~420px is a typical TV/movie card height; the browser refines it after a
   card has been rendered once. Music cards are shorter, so they get a smaller
   estimate. Safe to revert (single block).
   ============================================================================= */
#mylist-view #cards-grid > .card {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
#mylist-view #cards-grid > .card[data-library-section="music"] {
  contain-intrinsic-size: auto 150px;
}

/* =============================================================================
   v11.233 — Glassy status button (My Lists title cards)
   Rebuild of the visible per-card status button (`.game-status-current-pill`)
   into a modern frosted-glass pill: translucent gradient fill, backdrop blur,
   soft 1px light border, inset top highlight + subtle drop shadow, and a crisp
   press state. Replaces the flat outline-only look. Scoped to
   `body.true-dark-mode #mylist-view` + chained classes so it beats the v10.738
   white-60% outline rule (1,5,0 + !important) without touching the pop-out
   OPTION pills (`.game-status-options .status-pill`) — the selector mechanics
   and per-status active colors are unchanged. Only the resting button skin.
   ============================================================================= */
/* v11.234: selectors now carry TWO ids (#mylist-view + #cards-grid) = (2,x,0)
   so they beat the v10.738 rule (1,5,0 + !important) that pinned the button's
   border + text to white-60% and was suppressing the glass border/tint. */
/* v11.238: ALL status buttons use the French Lilac (#e1b7e5) identity,
   regardless of status — whisper-glass chip in one unified color. The
   per-status tint blocks were removed; this single base rule colors every
   state (watching/watched/paused/etc) the same lilac. */
body.true-dark-mode #mylist-view #cards-grid .status-pills .game-status-current-pill,
body.true-dark-mode #mylist-view #cards-grid .status-pills .game-status-current-pill.watching-active,
body.true-dark-mode #mylist-view #cards-grid .status-pills .game-status-current-pill.competitive-active,
body.true-dark-mode #mylist-view #cards-grid .status-pills .game-status-current-pill.planned-active,
body.true-dark-mode #mylist-view #cards-grid .status-pills .game-status-current-pill.wishlist-active,
body.true-dark-mode #mylist-view #cards-grid .status-pills .game-status-current-pill.watched-active,
body.true-dark-mode #mylist-view #cards-grid .status-pills .game-status-current-pill.paused-active,
body.true-dark-mode #mylist-view #cards-grid .status-pills .game-status-current-pill.dropped-active,
body.true-dark-mode #mylist-view #cards-grid .status-pills .game-status-current-pill.live-active {
  color: #e1b7e5 !important;
  border: 1px solid rgba(225, 183, 229, 0.45) !important;
  background: rgba(225, 183, 229, 0.10) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
  box-shadow: none !important;
  border-radius: 7px !important;
  padding: 3.5px 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  transition: transform 140ms ease, background 180ms ease, border-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
body.true-dark-mode #mylist-view #cards-grid .status-pills .game-status-current-pill:active {
  transform: scale(0.97);
  background: rgba(225, 183, 229, 0.16) !important;
}

/* =============================================================================
   v11.251 — My Lists CATEGORY tabs + STATUS tabs: type normalization
   Category tabs (.section-btn: Games / Anime / Music / Movies / TV) and the
   status tabs (.tab-btn: Watching / Watchlist / Watched / Paused):
     - ALL CAPS (text-transform: uppercase)
     - letter-spacing: 0
     - Söhne (app default) font, forced past any contrast/override file
     - status tabs also get line-height: 1 (tightest safe — a literal 0 clips
       the glyphs). Scoped high + !important so 16-light-mode-contrast.css and
       12-pwa-header-continuity.css can't override the family/spacing.
   Two IDs (#mylist-view #mylist-toolbar / #mylist-header) keep specificity
   above the existing rules in 12 + 16. Dark-mode is the only production theme.
   ============================================================================= */
/* Categories (.section-btn) — ALL CAPS, Söhne, 0 tracking. */
#mylist-view #mylist-header .section-btn,
body.true-dark-mode #mylist-view #mylist-header .section-btn {
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}
/* Status tabs (.tab-btn) — v11.253/254: NOT all-caps. Labels keep their
   authored casing (first letter only: "Watching", "Watchlist", …). Söhne,
   0 tracking, tight line-height, 12px (overrides the 13px !important in file 12). */
#mylist-view #mylist-toolbar .tab-btn,
body.true-dark-mode #mylist-view #mylist-toolbar .tab-btn {
  font-family: 'Sohne', 'DM Sans', sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  font-size: 12px !important;
}

/* =============================================================================
   v11.252 — Shelf loading animation (game full-page profile)
   Replaces the "Building this game page..." text with a small, clean loader: a
   row of books that pop up onto a shelf plank one after another, loop. Books
   are simple lavender bars of varied height; the plank is a thin underline.
   Transform/opacity only (GPU-composited, ProMotion-friendly).
   ============================================================================= */
.shelfd-shelf-loading {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}
.shelfd-shelf-loader {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 34px;
  padding: 0 4px 6px;
}
.shelfd-shelf-book {
  width: 7px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #c4b5fd, #8b5cf6);
  transform: translateY(10px) scaleY(0.4);
  transform-origin: bottom center;
  opacity: 0;
  animation: shelfdShelfBookPop 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.shelfd-shelf-book:nth-child(1) { height: 24px; animation-delay: 0s; }
.shelfd-shelf-book:nth-child(2) { height: 30px; animation-delay: 0.12s; background: linear-gradient(180deg, #ddd0ff, #a78bfa); }
.shelfd-shelf-book:nth-child(3) { height: 20px; animation-delay: 0.24s; }
.shelfd-shelf-book:nth-child(4) { height: 28px; animation-delay: 0.36s; background: linear-gradient(180deg, #ddd0ff, #a78bfa); }
.shelfd-shelf-book:nth-child(5) { height: 22px; animation-delay: 0.48s; }
.shelfd-shelf-plank {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}
@keyframes shelfdShelfBookPop {
  0%   { transform: translateY(10px) scaleY(0.4); opacity: 0; }
  18%  { transform: translateY(0) scaleY(1); opacity: 1; }
  72%  { transform: translateY(0) scaleY(1); opacity: 1; }
  90%  { transform: translateY(10px) scaleY(0.4); opacity: 0; }
  100% { transform: translateY(10px) scaleY(0.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shelfd-shelf-book { animation-duration: 3s; }
}

/* =============================================================================
   v11.386 — Steam library refresh-sync button (games shelf toolbar, far-left).
   Mirrors the search-toggle icon button; dark-mode only. Spins while syncing.
   ========================================================================== */
/* v11.467: games-shelf "resync steam" control — a compact labeled pill pinned to
   the FAR LEFT of the toolbar row. margin-right:auto absorbs the free space so
   Sort + Search stay grouped on the right (works regardless of the row's
   justify-content). Glyph + lowercase "resync steam" text. */
.mylist-steam-sync-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(232, 227, 243, 0.82);
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  margin-right: auto !important; /* pin far-left; Sort + Search stay on the right */
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 160ms ease, background 160ms ease, transform 140ms ease, border-color 160ms ease;
}
.mylist-steam-sync-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mylist-steam-sync-label { line-height: 1; }
.mylist-steam-sync-btn:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.18); }
.mylist-steam-sync-btn:active { transform: scale(0.96); }
.mylist-steam-sync-btn:disabled { cursor: default; }
.mylist-steam-sync-btn.is-busy { color: #c4b5fd; border-color: rgba(196, 181, 253, 0.30); }
.mylist-steam-sync-btn.is-busy svg { animation: steam-sync-spin 0.8s linear infinite; }
@keyframes steam-sync-spin { to { transform: rotate(360deg); } }
/* When the library search field is open, hide the resync pill so the search input
   keeps full width (no crowding/overlap on smaller iPhones). */
#mylist-view #mylist-toolbar .toolbar-right:has(#mylist-search-row.is-open) .mylist-steam-sync-btn {
  display: none !important;
}


/* =============================================================================
   v11.394 — per-clip "Apply Clip" / "Applied" controls in the highlight editor.
   Each clip is applied + posted independently; applied clips lock with a chip.
   ========================================================================== */
.mylist-game-profile-highlight-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
/* v11.442: primary per-clip action — single FLAT lavender accent (no gradient),
   matching the sheet's Done button. */
.mylist-game-profile-highlight-apply-clip {
  min-height: 38px;
  padding: 0 20px;
  border-radius: 999px;
  border: 0;
  background: #a78bfa;
  color: #0E0E0E;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mylist-game-profile-highlight-apply-clip:active { opacity: 0.85; }
.mylist-game-profile-highlight-apply-clip:disabled { opacity: 0.5; cursor: default; }
/* v11.442: Edit + Remove share one understated ghost-pill style — a clean,
   consistent pair (Editorial Dark: transparent, hairline, muted). */
.mylist-game-profile-highlight-edit,
.mylist-game-profile-highlight-remove {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mylist-game-profile-highlight-edit:active,
.mylist-game-profile-highlight-remove:active { opacity: 0.7; }
/* v11.441: inline clip preview inside an editor row (shows the pasted/saved clip). */
.mylist-game-profile-highlight-row-preview:not(:empty) { margin: 10px 0 2px; }
.mylist-game-profile-highlight-row-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #000;
}
.mylist-game-profile-highlight-row-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* v11.442: understated "Applied" state cue — accent check + label only, no pill
   background, so it reads as a status not a third competing button. */
.mylist-game-profile-highlight-applied {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 2px;
  color: #c4b5fd;
  font-family: 'Sohne', 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.mylist-game-profile-highlight-applied svg { width: 15px; height: 15px; }
/* v11.442: applied rows stay on the same clean hairline surface — no purple-glow
   card, no dimmed inputs; the "Applied ✓" chip is the only state cue. */
.mylist-game-profile-highlight-editor-row.is-applied .mylist-game-profile-highlight-input input { opacity: 1; }