/* Homepage-only composition. */
.gr-app .gr-home-page .gr-steam-hero .gr-steam-hero-copy > p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:15px; line-height:1.55; }
@media (max-width:760px) {
  .gr-app .gr-home-page .gr-steam-hero .gr-steam-hero-copy { padding:16px; gap:8px; }
  .gr-app .gr-home-page .gr-steam-hero .gr-steam-hero-copy :is(h1,h2) { font-size:25px; line-height:1.18; }
  .gr-app .gr-home-page .gr-steam-hero .gr-steam-hero-copy > p { margin-block:2px; font-size:14px; }
}
.gr-app .gr-home-page { width:100%; min-width:0; }
.gr-app .gr-home-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 18px; margin:18px 0 26px; }
.gr-app .gr-home-toolbar .gr-channel-tabs { margin:0; }
.gr-app .gr-home-toolbar .gr-calendar-subscribe { margin-left:auto; }
.gr-app .gr-home-content { padding-bottom:36px; }
.gr-app .gr-home-section { margin:0 0 28px; }
.gr-app .gr-home-section .gr-section-heading { margin-bottom:14px; }
.gr-app .gr-home-section .gr-section-heading h2 { font-size:24px; }
@media (max-width:620px) {
 .gr-app .gr-home-toolbar { margin:14px 0 22px; gap:8px; }
 .gr-app .gr-home-toolbar .gr-channel-tabs { gap:6px; }
 .gr-app .gr-home-toolbar .gr-channel-tabs a { min-height:42px; padding-inline:10px; }
 .gr-app .gr-home-toolbar .gr-calendar-subscribe { margin:0; font-size:12px; }
 .gr-app .gr-home-section .gr-section-heading { align-items:center; gap:12px; }
 .gr-app .gr-home-section .gr-section-heading h2 { font-size:21px; }
 .gr-app .gr-home-section .gr-section-heading p { max-width:260px; }
}


/* Shelf details are progressive; the full-viewport hero above remains unchanged. */
.gr-app .gr-home-page [data-gr-home-shelf] { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; align-items:start; }
.gr-app .gr-home-page [data-gr-home-shelf] > .gr-card { display:flex; height:100%; border:0; border-radius:10px; background:var(--slate-760); box-shadow:none; }
.gr-app .gr-home-page [data-gr-home-shelf] > .gr-card:hover { background:var(--slate-730); }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-card .gr-card-art { border-radius:10px 10px 0 0; }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-card .gr-card-content { padding:14px; gap:12px; }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-card h3 { font-size:18px; min-height:0; }
.gr-app .gr-home-page .gr-shelf-meta { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-top:8px; color:var(--slate-240); font-size:12px; line-height:1.4; }
.gr-app .gr-home-page .gr-shelf-platforms { display:inline-flex; flex-wrap:wrap; gap:7px; }
.gr-app .gr-home-page .gr-shelf-facts { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin-top:auto; }
.gr-app .gr-home-page .gr-shelf-facts:empty { display:none; }
.gr-app .gr-home-page .gr-shelf-facts .gr-card-rating small { display:inline; font-size:11px; }
.gr-app .gr-home-page .gr-shelf-unconfirmed { font-size:11px; color:var(--slate-200); }
@media (max-width:1099px) {
 .gr-app .gr-home-page [data-gr-home-shelf] { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}
@media (max-width:620px) {
 .gr-app .gr-home-page [data-gr-home-shelf] { grid-template-columns:minmax(0,1fr); }
}

/* Primary shelves: newest / high-audience new releases / near-term anticipation. */
.gr-app .gr-home-page { background:transparent; }
.gr-app .gr-home-toolbar { margin:16px 0 10px; }
.gr-app .gr-home-section { margin-bottom:34px; scroll-margin-top:90px; }
.gr-app .gr-home-section .gr-section-heading { margin-bottom:12px; }
.gr-app .gr-home-section .gr-section-heading h2 { font-size:21px; font-weight:500; letter-spacing:.4px; color:var(--slate-40); }
.gr-app .gr-home-section .gr-section-heading p { font-size:12px; margin-top:5px; color:var(--slate-240); }
.gr-app .gr-home-page [data-gr-home-shelf] { gap:14px; }
.gr-app .gr-home-page [data-gr-home-shelf] > .gr-card { border-radius:2px; background:linear-gradient(125deg,var(--slate-610),var(--slate-670)); box-shadow:0 2px 8px #0005; }
.gr-app .gr-home-page [data-gr-home-shelf] > .gr-card:hover { background:linear-gradient(125deg,var(--slate-520),var(--slate-610)); }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-card .gr-card-art { border-radius:2px 2px 0 0; }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-card .gr-card-content { padding:12px 14px 10px; gap:8px; }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-card h3 { font-size:17px; min-height:0; font-weight:600; }
.gr-app .gr-home-page .gr-shelf-meta { font-size:12px; color:var(--slate-200); gap:5px 10px; margin-top:5px; }
.gr-app .gr-home-uncertain { padding:0 0 22px; color:var(--slate-200); font-size:12px; }
.gr-app .gr-home-uncertain > summary { width:fit-content; cursor:pointer; padding:6px 0; }
.gr-app .gr-home-uncertain > a { display:flex; gap:16px; padding:7px 12px; color:var(--slate-160); background:#ffffff05; margin-top:4px; }
.gr-app .gr-home-page .gr-daily-calendar { background:var(--slate-670); border:0; border-radius:2px; padding:18px; margin:0 0 30px; scroll-margin-top:86px; }
.gr-app .gr-home-page .gr-daily-calendar h2 { font-size:20px; font-weight:500; }
.gr-app .gr-home-page .gr-daily-date { border-radius:2px; border:0; background:var(--slate-610); min-height:68px; }
.gr-app .gr-home-page .gr-daily-date[aria-current] { background:var(--slate-460); }
.gr-app .gr-home-page .gr-shelf-empty { background:var(--slate-670); border:0; padding:18px; font-size:13px; }
@media (max-width:620px) {
 .gr-app .gr-home-section .gr-section-heading h2 { font-size:20px; letter-spacing:0; }
 .gr-app .gr-home-page .gr-daily-calendar { padding:14px; }
}

/* Anchor navigation remains immediate, including when JavaScript is unavailable. */
html:has(.gr-home-page) { scroll-behavior:auto; }

/* Editorial feature: bounded like the content, with intrinsic-size artwork. */

/* A missing image is an honest compact state, not a giant empty poster. */
.gr-app .gr-home-page [data-gr-home-shelf] .gr-card-no-art .gr-card-art,
.gr-app .gr-home-page [data-gr-home-shelf] .gr-card:has(.gr-card-art img[hidden]) .gr-card-art { height:86px; min-height:86px; aspect-ratio:auto; }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-card-no-art .gr-card-cover,
.gr-app .gr-home-page [data-gr-home-shelf] .gr-card:has(.gr-card-art img[hidden]) .gr-card-cover { height:86px; min-height:86px; aspect-ratio:auto; }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-card-no-art .gr-cover-fallback,
.gr-app .gr-home-page [data-gr-home-shelf] .gr-card:has(.gr-card-art img[hidden]) .gr-cover-fallback { display:flex; flex-direction:row; justify-content:flex-start; gap:12px; padding:16px; padding-right:52px; }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-cover-fallback b { font-size:22px; }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-cover-fallback span { font-size:11px; line-height:1.4; }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-card-no-art .gr-card-content { flex:1; }

/* Media-first hero: artwork fills the stage, while live video preserves the complete frame. */

/* Interactive sticky hero: cards promote their game into the header preview. */
@media (min-width:901px) {
 .gr-app .gr-home-section,
 .gr-app .gr-home-page .gr-daily-calendar { scroll-margin-top:350px; }
}


/* Larger media workspace + continuously resizable sticky hero. */
@media (min-width:901px) {
 .gr-app .gr-home-section,.gr-app .gr-home-page .gr-daily-calendar { scroll-margin-top:var(--gr-sticky-anchor-offset,392px); }
}

/* Paged home shelves: eight games at a time with lightweight left/right navigation. */
.gr-home-section .gr-library-toolbar { justify-content:flex-end; }
.gr-home-section .gr-library-toolbar > span { margin-right:auto; }
.gr-home-pager { display:inline-flex; align-items:center; gap:6px; margin-left:4px; }
.gr-home-page-button { display:grid; place-items:center; width:38px; height:38px; padding:0 0 3px; border:1px solid var(--slate-580); border-radius:3px; background:var(--slate-700); color:var(--slate-80); font-size:28px; line-height:1; }
.gr-home-page-button:hover:not(:disabled) { border-color:var(--cyan-210); background:var(--slate-610); }
.gr-home-page-button:disabled { opacity:.32; cursor:default; }
.gr-home-page-status { min-width:76px; color:var(--slate-280); font-size:11px; font-variant-numeric:tabular-nums; text-align:center; }
.gr-home-list[aria-busy="true"] { opacity:.6; }
@media (max-width:760px) { .gr-home-page-status { min-width:64px; } .gr-home-page-button { width:40px; height:40px; } }
/* Simple static homepage hero. No sticky, hover-preview, autoplay or resize behavior. */


/* Homepage feature: media selector beside a naturally proportioned player. */
.gr-app .gr-steam-hero.game-detail-hero { grid-template-columns:minmax(0,1.25fr) minmax(300px,.9fr); gap:16px; padding:12px; margin-bottom:20px; }
.gr-app .gr-steam-hero .game-media { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.gr-app .gr-steam-hero .game-media:has(.game-media-strip) { grid-template-columns:minmax(0,1fr) 92px; }
.gr-app .gr-steam-hero .game-media-screen { height:auto; aspect-ratio:var(--gr-media-aspect,16/9); }
.gr-app .gr-steam-hero .game-media-stage-open:is([data-gr-media-kind="video"],[data-gr-media-kind="embed"]) > img { object-fit:cover; }
.gr-app .gr-steam-hero .game-media-strip { display:flex; flex-direction:column; gap:8px; width:100%; min-width:0; min-height:0; contain:size; align-self:stretch; margin:0; padding:1px 3px 1px 1px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.gr-app .gr-steam-hero .game-media-thumb { flex:0 0 auto; width:100%; aspect-ratio:16/9; }
.gr-app .gr-steam-hero .game-media-thumb small { display:none; }
.gr-app .gr-steam-hero .game-media-stage-open.is-inline-player { position:absolute; z-index:3; top:12px; right:12px; width:auto; height:auto; padding:7px 10px; border:1px solid color-mix(in srgb,var(--cyan-200) 33.3%,transparent); border-radius:4px; background:color-mix(in srgb,var(--slate-820) 85.9%,transparent); color:var(--slate-80); font-size:12px; }
.gr-app .gr-steam-hero .is-inline-player .game-media-stage-play { position:static; inset:auto; width:auto; max-width:none; height:auto; margin:0; padding:0; border:0; background:none; transform:none; }
.gr-app .gr-steam-hero .gr-steam-hero-copy :is(h1,h2) { margin:7px 0; font-size:clamp(26px,2.5vw,38px); line-height:1.1; letter-spacing:-.6px; overflow-wrap:anywhere; }
.gr-app .gr-steam-hero .gr-steam-hero-copy .gr-eyebrow { margin-top:2px; }
.gr-app .gr-steam-hero .gr-steam-hero-copy .gr-tags { margin:0 0 2px; }
.gr-app .gr-steam-hero .gr-steam-hero-copy .detail-hero-facts { margin-top:2px; }
.gr-app .gr-steam-hero .gr-steam-hero-copy .detail-actions { display:flex; align-items:center; flex-wrap:wrap; gap:9px; width:100%; }
.gr-app .gr-steam-hero .gr-steam-hero-copy .detail-actions .game-quick-actions { width:auto; flex:none; }
.gr-app .gr-steam-hero-placeholder { min-height:100%; display:grid; place-items:center; align-content:center; gap:10px; color:var(--slate-340); background:var(--slate-820); }
.gr-app .gr-steam-hero-placeholder .gr-icon { width:42px; height:42px; }
.gr-app .gr-home-page > .gr-container.gr-home-content { padding-top:0; }
@media (max-width:760px) {
  .gr-app .gr-steam-hero.game-detail-hero { grid-template-columns:minmax(0,1fr); margin-top:12px; margin-bottom:18px; }
  .gr-app .gr-steam-hero .game-media:has(.game-media-strip) { grid-template-columns:minmax(0,1fr); }
  .gr-app .gr-steam-hero .game-media-strip { flex-direction:row; contain:none; padding:1px 1px 5px; overflow-x:auto; overflow-y:hidden; }
  .gr-app .gr-steam-hero .game-media-thumb { flex:0 0 92px; width:92px; }
  .gr-app .gr-steam-hero .gr-steam-hero-copy .detail-actions > .gr-button { min-height:44px; }
}

/* Editorial shelves expose the games and retain ordinary links without JavaScript. */
/* Collection picks are the compact, whole-card-link layout of the shared card. */
.gr-app .gr-home-page .gr-home-section { margin:0 0 22px; }
.gr-app .gr-home-page .gr-section-heading h2 { font-size:21px; }
/* Card shelves on the home page — the weekly picks and the themed collections — share one grid. */
.gr-app .gr-home-page :is(.gr-home-weekly .gr-game-list,.gr-collection-games)[data-gr-card-layout="grid"] { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; min-width:0; }
.gr-app :is(.gr-home-weekly .gr-game-list,.gr-collection-games)[data-gr-card-layout="grid"] .gr-card-content { padding:10px; gap:7px; }
.gr-app :is(.gr-home-weekly .gr-game-list,.gr-collection-games)[data-gr-card-layout="grid"] h3 { font-size:15px; }
.gr-app .gr-home-collections a:focus-visible,.gr-app .gr-home-search-tools a:focus-visible { outline:2px solid var(--cyan-140); outline-offset:3px; }
.gr-app .gr-home-search-tools { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:20px; align-items:center; margin:0 0 22px; padding:14px 16px; border:1px solid var(--slate-580); border-radius:8px; background:var(--slate-730); }
.gr-app .gr-home-search-tools .gr-eyebrow { color:var(--cyan-200); font-size:10px; }
.gr-app .gr-home-search-tools h2 { margin:5px 0 0; color:var(--slate-80); font-size:18px; }
.gr-app .gr-search-promo-form { min-width:0; }
.gr-app .gr-search-promo-form > div { display:flex; align-items:center; gap:10px; padding:5px 5px 5px 12px; border:1px solid var(--slate-460); border-radius:7px; background:var(--slate-790); }
.gr-app .gr-search-promo-form > div:focus-within { border-color:var(--cyan-140); box-shadow:0 0 0 2px color-mix(in srgb,var(--cyan-140) 13.3%,transparent); }
.gr-app .gr-search-promo-form > div > .gr-icon { flex:none; width:19px; color:var(--cyan-255); }
.gr-app .gr-search-promo-form input { flex:1; min-width:0; width:100%; min-height:42px; padding:0; border:0; outline:none; background:transparent; color:var(--slate-20); font-size:14px; }
.gr-app .gr-search-promo-form input::placeholder { color:var(--slate-240); opacity:1; }
.gr-app .gr-search-promo-form button { flex:none; min-height:44px; white-space:nowrap; }
.gr-app .gr-search-promo-guide { display:inline-flex; align-items:center; gap:8px; min-height:36px; color:var(--cyan-140); font-size:12px; }
@media (max-width:1100px) {
  .gr-app .gr-home-page :is(.gr-home-weekly .gr-game-list,.gr-collection-games)[data-gr-card-layout="grid"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gr-app .gr-home-search-tools { grid-template-columns:auto minmax(0,1fr); gap:14px 20px; }
  .gr-app .gr-home-search-tools > .gr-search-promo-guide { grid-column:1/-1; }
}
@media (max-width:700px) {
  /* Phones swipe through a collection instead of stacking eight cards. */
  .gr-app .gr-home-page .gr-home-collection .gr-collection-games[data-gr-card-layout="grid"] { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(200px,62%); overflow-x:auto; padding:2px 0 10px; scroll-snap-type:x mandatory; scroll-padding-inline:0; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--slate-400) transparent; }
  /* Each card ends after its own content: stretching to the tallest one in the row leaves a hole in the rest. */
  .gr-app .gr-home-page .gr-home-collection .gr-collection-games[data-gr-card-layout="grid"] { align-items:start; }
  .gr-app .gr-home-page .gr-collection-games > .gr-card { height:auto; scroll-snap-align:start; }
  .gr-app .gr-home-search-tools { grid-template-columns:minmax(0,1fr); padding:18px 14px; gap:14px; }
  .gr-app .gr-search-promo-form > div { flex-wrap:wrap; padding:8px 10px; }
  .gr-app .gr-search-promo-form input { width:calc(100% - 30px); }
  .gr-app .gr-search-promo-form button { width:100%; justify-content:center; }
}