/* C4TM30W page art: one wide picture per page that matches its topic, plus rotating art in the filler slots.
   Games: ARK base over "ARK and Palworld", ARK/Palworld tiles fill that row. CS2 Check a player: CS2 rage desk.
   CS2 My profile: chibi CT sniper next to the title. Recommendations: the three-PC squad room. */

.page-art-banner{
  position:relative;
  display:block;
  width:100%;
  height:clamp(190px,21vw,300px);
  overflow:hidden;
  border:1px solid var(--line,rgba(188,108,255,.22));
  border-radius:14px;
  background:#0b0712;
}
.page-art-banner img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--art-focus,50% 40%);
}
.page-art-banner::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 -60px 60px -40px rgba(8,5,14,.55);
}
.page-art-cs2{--art-focus:50% 30%}
/* Check a player hides every unknown block under the page title; the banner is allowed. */
body[data-page="counter-strike-checker"] .page-content>.page-art-banner{display:block!important}
.page-art-squad{--art-focus:50% 26%;margin-bottom:var(--section-gap,18px)}
.page-art-ark{--art-focus:50% 38%;margin-bottom:14px}

/* Games: ARK / Palworld art tiles finish the playlist rows (cards first, tiles after). */
body[data-page="games"] .playlist-art-tile{
  position:relative;
  min-height:220px;
  overflow:hidden;
  border:1px solid var(--line,rgba(188,108,255,.22));
  border-radius:9px;
  background:#0b0712;
}
body[data-page="games"] .playlist-art-tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 35%;
}

/* CS2 My profile: sticker beside the page title, pinned so the title row and tabs sit exactly where
   they sit on Check a player (switching tabs does not jump). Only on wide screens, where it fits to the
   right of the tab bar (max 760 px) without touching the top bar. */
.page-art-sticker{display:none}
@media (min-width:1200px){
  .page-title-row:has(>.page-art-sticker){position:relative;padding-right:140px}
  .page-art-sticker{
    position:absolute;
    top:-8px;
    right:4px;
    display:block;
    width:120px;
    pointer-events:none;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
  }
}
.page-art-sticker img{display:block;width:100%;height:auto}

/* Rotating art fades instead of jumping. */
[data-art-rotate] img{transition:opacity .45s ease!important}
[data-art-rotate] img.is-changing{opacity:.15!important}

@media (max-width:760px){
  .page-art-banner{height:auto;aspect-ratio:16/9}
  body[data-page="games"] .playlist-art-tile{min-height:0;aspect-ratio:4/3}
}