/* Homepage-only composition. The hero is outside the bounded content container. */
.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 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-hero { width:100%; max-width:none; margin:0; border:0; border-bottom:1px solid #284154; border-radius:0; box-shadow:none; background:#0b1a28; isolation:isolate; }
.gr-app .gr-home-hero .gr-slide { display:flex; align-items:center; min-height:300px; padding-block:22px 52px; }
.gr-app .gr-home-hero .gr-hero-art { inset:0; width:100%; height:100%; opacity:1; }
.gr-app .gr-home-hero .gr-hero-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:65% 45%; opacity:1; filter:none; transform:none; }
.gr-app .gr-home-hero .gr-hero-art::after { background:linear-gradient(90deg,#06121df5 0%,#081624df 25%,#08162494 48%,#08162426 76%),linear-gradient(0deg,#081420bd,transparent 40%); }
.gr-app .gr-home-hero .gr-hero-inner { position:relative; z-index:1; }
.gr-app .gr-home-hero .gr-hero-copy { padding:0; width:min(53%,600px); max-width:none; background:none; }
.gr-app .gr-home-hero .gr-hero-copy h2 { font-size:clamp(30px,3vw,42px); margin:10px 0; letter-spacing:-1px; line-height:1.08; }
.gr-app .gr-home-hero .gr-hero-copy > p { color:#d1deea; font-size:14px; line-height:1.45; max-width:510px; -webkit-line-clamp:2; margin:0 0 10px; }
.gr-app .gr-home-hero .gr-hero-meta { margin:10px 0; font-size:12px; }
.gr-app .gr-home-hero .gr-hero-actions { gap:10px; }
.gr-app .gr-home-hero .gr-hero-actions .gr-button { min-height:42px; }
.gr-app .gr-home-controls { position:absolute; z-index:2; inset:auto 0 18px; pointer-events:none; }
.gr-app .gr-home-controls .gr-carousel-controls { position:static; width:fit-content; margin-left:auto; pointer-events:auto; }
.gr-app .gr-home-controls button { min-width:36px; min-height:36px; }
.gr-app .gr-home-controls .gr-carousel-dots button { min-width:30px; }
.gr-app .gr-home-hero.gr-hero-no-highlight { padding:28px 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-toolbar .gr-home-live { margin:0; padding:0; min-height:0; }
.gr-app .gr-home-toolbar .gr-home-live:not(:has(button:not([hidden]))) { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.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; }
.gr-app .gr-home-page .gr-home-shelf { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.gr-app .gr-home-shelf .gr-game-card { box-shadow:none; }
.gr-app .gr-home-shelf .gr-card-content { padding:14px; gap:9px; }
.gr-app .gr-home-shelf .gr-card-main h3 { font-size:18px; line-height:1.3; }
.gr-app .gr-home-shelf .gr-card-bottom { margin-top:0; gap:10px; }
.gr-app .gr-home-shelf .gr-card-facts { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 10px; }
.gr-app .gr-home-shelf .gr-card-facts > .gr-release-channels { grid-column:1/-1; }
.gr-app .gr-home-shelf .gr-card-date { grid-column:1/-1; font-size:12px; }
.gr-app .gr-home-shelf .gr-card-rating { min-width:0; }
.gr-app .gr-home-shelf .gr-card-rating strong { font-size:16px; }
.gr-app .gr-home-shelf .gr-card-rating > span { font-size:11px; }
.gr-app .gr-home-shelf .gr-card-rating small { display:block; font-size:11px; }
.gr-app .gr-home-shelf .gr-card-platforms { justify-content:flex-end; }
.gr-app .gr-home-shelf .gr-card-tools { margin-top:0; }
.gr-app .gr-home-shelf .gr-card-tools .game-action-watch { min-height:38px; }
.gr-app .gr-home-shelf .gr-card-extra { margin:0; padding-top:9px; font-size:12px; }
.gr-app .gr-home-page .gr-update-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1099px) {
 .gr-app .gr-home-page .gr-home-shelf { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
 .gr-app .gr-home-hero .gr-hero-copy { width:min(66%,570px); }
 .gr-app .gr-home-page .gr-update-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:620px) {
 .gr-app .gr-home-page .gr-home-shelf { grid-template-columns:minmax(0,1fr); }
 .gr-app .gr-home-hero .gr-slide { min-height:340px; padding-block:28px 66px; }
 .gr-app .gr-home-hero .gr-hero-copy { width:100%; }
 .gr-app .gr-home-hero .gr-hero-copy h2 { font-size:32px; }
 .gr-app .gr-home-hero .gr-hero-copy > p { font-size:14px; }
 .gr-app .gr-home-hero .gr-hero-art::after { background:linear-gradient(90deg,#071420e8,#07142080),linear-gradient(0deg,#071420dc,transparent); }
 .gr-app .gr-home-hero .gr-hero-actions .gr-button, .gr-app .gr-home-hero .game-action { min-height:44px; }
 .gr-app .gr-home-controls { bottom:12px; }
 .gr-app .gr-home-controls button { min-width:44px; min-height:44px; }
 .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; }
 .gr-app .gr-home-shelf .gr-card-tools .game-action-watch { min-height:44px; }
}

.gr-app .gr-home-hero .gr-hero-actions .game-quick-actions { width:auto; flex:none; }
@media (max-width:620px) {
 .gr-app .gr-home-hero .gr-hero-actions { flex-wrap:wrap; gap:8px; }
 .gr-app .gr-home-hero .gr-hero-actions > .gr-button { font-size:12px; padding-inline:12px; }
 .gr-app .gr-home-hero .gr-hero-actions .game-action-watch { width:auto; }
}

/* 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-game-card { display:flex; height:100%; border:0; border-radius:10px; background:#102231; box-shadow:none; }
.gr-app .gr-home-page [data-gr-home-shelf] > .gr-game-card:hover { background:#142c3d; }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-game-card .gr-card-art { border-radius:10px 10px 0 0; }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-game-card .gr-card-content { padding:14px; gap:12px; }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-game-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:#97b3c7; 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:#a5bbcc; }
.gr-app .gr-home-page .gr-shelf-actions { display:flex; align-items:center; gap:12px; }
.gr-app .gr-home-page .gr-shelf-actions .gr-card-tools { flex:1; width:auto; }
.gr-app .gr-home-page .gr-shelf-actions .game-action-watch { background:#19354a; border:1px solid #365469; font-weight:500; }
@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); }
 .gr-app .gr-home-page .gr-shelf-actions .game-action { min-height:44px; }
 .gr-app .gr-home-page .gr-update-grid { grid-template-columns:minmax(0,1fr); }
 .gr-app .gr-home-page .gr-update-grid > .gr-update-card { display:grid; grid-column:auto; grid-template-columns:100px minmax(0,1fr); align-items:start; border:0; border-radius:8px; }
 .gr-app .gr-home-page .gr-update-grid .gr-update-art { height:auto; aspect-ratio:460/215; margin-top:12px; }
 .gr-app .gr-home-page .gr-update-grid .gr-update-card > div { padding:12px; }
 .gr-app .gr-home-page .gr-update-card .game-action { min-height:44px; min-width:44px; }
}

/* Primary shelves: newest / high-audience new releases / near-term anticipation. */
.gr-app .gr-home-page { background:transparent; }
.gr-app .gr-home-hero { border-bottom:0; background:#172635; }
.gr-app .gr-home-hero .gr-slide { min-height:310px; }
.gr-app .gr-home-hero .gr-hero-copy > p { color:#d0dbe3; }
.gr-app .gr-home-hero .gr-hero-art::after { background:linear-gradient(90deg,#152534f5 0%,#152534de 26%,#15253478 51%,#15253420 83%),linear-gradient(0deg,#1b2838,transparent 50%); }
.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:#edf2f5; }
.gr-app .gr-home-section .gr-section-heading p { font-size:12px; margin-top:5px; color:#9fb3c2; }
.gr-app .gr-home-page [data-gr-home-shelf] { gap:14px; }
.gr-app .gr-home-page [data-gr-home-shelf] > .gr-game-card { border-radius:2px; background:linear-gradient(125deg,#29465c,#213647); box-shadow:0 2px 8px #0005; }
.gr-app .gr-home-page [data-gr-home-shelf] > .gr-game-card:hover { background:linear-gradient(125deg,#3c627c,#2a495f); }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-game-card .gr-card-art { border-radius:2px 2px 0 0; }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-game-card .gr-card-content { padding:12px 14px 10px; gap:8px; }
.gr-app .gr-home-page [data-gr-home-shelf] .gr-game-card h3 { font-size:17px; min-height:0; font-weight:600; }
.gr-app .gr-home-page .gr-shelf-meta { font-size:12px; color:#abbfcd; gap:5px 10px; margin-top:5px; }
.gr-app .gr-home-page .gr-shelf-actions { gap:8px; }
.gr-app .gr-home-page .gr-shelf-actions .game-action-watch { background:#ffffff0d; border:0; border-radius:2px; font-size:12px; color:#c7d5e0; }
.gr-app .gr-home-page .gr-shelf-actions .game-action-watch:hover { background:#ffffff1f; color:#fff; }
.gr-app .gr-home-page .gr-headline-shelf { grid-template-columns:repeat(4,minmax(0,1fr)); }
.gr-app .gr-home-headlines .gr-card-art { aspect-ratio:1.95; }
.gr-app .gr-home-headlines .gr-card-main h3 { font-size:20px!important; }
.gr-app .gr-home-uncertain { padding:0 0 22px; color:#abbfcc; 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:#bcd3e3; background:#ffffff05; margin-top:4px; }
.gr-app .gr-home-secondary { border-top:1px solid #ffffff12; padding-top:24px; }
.gr-app .gr-home-secondary .gr-section-heading h2 { font-size:18px; color:#bbcbd6; }
.gr-app .gr-home-secondary .gr-update-card { display:grid; grid-template-columns:110px minmax(0,1fr); align-items:start; background:#203546; border:0; border-radius:2px; }
.gr-app .gr-home-secondary .gr-update-card .gr-update-art { height:auto; aspect-ratio:460/215; margin-top:12px; }
.gr-app .gr-home-secondary .gr-update-card > div { padding:12px; }
.gr-app .gr-home-secondary .gr-update-card h3 { font-size:15px; }
.gr-app .gr-home-secondary .gr-update-card .game-quick-actions { display:none; }
.gr-app .gr-home-page .gr-daily-calendar { background:#203546; 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:#2b4558; min-height:68px; }
.gr-app .gr-home-page .gr-daily-date[aria-current] { background:#427292; }
.gr-app .gr-home-page .gr-shelf-empty { background:#203546; border:0; padding:18px; font-size:13px; }
@media (max-width:1099px) {
 .gr-app .gr-home-page .gr-headline-shelf { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
 .gr-app .gr-home-page .gr-headline-shelf { grid-template-columns:minmax(0,1fr); }
 .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; }
 .gr-app .gr-home-hero .gr-hero-copy h2 { font-size:30px; }
}

/* 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. */
.gr-app .gr-home-hero { width:calc(100% - 80px); max-width:1360px; margin:24px auto 0; border:0; border-radius:2px; background:#142332; box-shadow:0 6px 20px #0003; }
.gr-app .gr-home-hero .gr-slide { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr); min-height:0; padding:0; align-items:stretch; }
.gr-app .gr-home-hero .gr-hero-art { position:relative; inset:auto; width:100%; height:auto; min-height:290px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(135deg,#101923,#203a4b); }
.gr-app .gr-home-hero .gr-hero-art img { position:static; display:block; width:auto; height:auto; max-width:100%; max-height:320px; object-fit:contain; object-position:center; opacity:1; filter:none; transform:none; }
.gr-app .gr-home-hero .gr-hero-art::after { display:none; }
.gr-app .gr-home-hero .gr-hero-inner { width:auto; max-width:none; min-width:0; margin:0; padding:26px 28px 66px; background:linear-gradient(125deg,#1d3445,#142332); }
.gr-app .gr-home-hero .gr-hero-copy { width:100%; max-width:none; padding:0; }
.gr-app .gr-home-hero .gr-hero-copy h2 { font-size:clamp(26px,2.3vw,36px); line-height:1.15; letter-spacing:-.6px; }
.gr-app .gr-home-hero .gr-hero-copy > p { max-width:none; color:#c0ced8; }
.gr-app .gr-home-controls { width:auto; inset:auto 22px 16px auto; max-width:none; margin:0; }
.gr-app .gr-home-hero .gr-hero-actions { flex-wrap:wrap; }
.gr-app .gr-home-hero .gr-hero-actions > .gr-button { font-size:13px; padding-inline:14px; }
.gr-app .gr-home-hero .gr-hero-actions .game-quick-actions { flex-wrap:wrap; }
.gr-app .gr-home-hero .gr-no-art { min-height:160px; }
.gr-app .gr-home-hero.gr-hero-no-highlight { padding:22px; }
@media (max-width:900px) {
 .gr-app .gr-home-hero .gr-slide { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .gr-app .gr-home-hero .gr-hero-inner { padding:22px 20px 62px; }
}
@media (max-width:620px) {
 .gr-app .gr-home-hero { width:calc(100% - 24px); margin-top:12px; }
 .gr-app .gr-home-hero .gr-slide { grid-template-columns:minmax(0,1fr); }
 .gr-app .gr-home-hero .gr-hero-art { min-height:0; height:190px; }
 .gr-app .gr-home-hero .gr-hero-art img { max-height:190px; }
 .gr-app .gr-home-hero .gr-hero-inner { padding:20px 18px 66px; }
 .gr-app .gr-home-controls { right:16px; bottom:12px; }
}

/* 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-game-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-game-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-game-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; }
.gr-app .gr-home-window-note { margin:0 0 16px; color:#b8c9d8; font-size:13px; line-height:1.5; }

/* Media-first hero: artwork fills the stage, while live video preserves the complete frame. */
.gr-app .gr-home-hero .gr-slide { grid-template-columns:minmax(0,1.28fr) minmax(340px,.92fr); }
.gr-app .gr-home-hero .gr-hero-media { min-width:0; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:minmax(370px,1fr); background:#0d1924; }
.gr-app .gr-home-hero .gr-hero-media-stage { grid-column:1; grid-row:1; position:relative; min-height:370px; overflow:hidden; isolation:isolate; background:#0b1620; }
.gr-app .gr-home-hero .gr-hero-frame { position:absolute; z-index:-1; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(90deg,#07111a26,#07111a00 50%,#07111a36); }
.gr-app .gr-home-hero .gr-hero-frame .gr-home-image { display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; object-position:center; filter:none; transform:none; transition:width 160ms,height 160ms,filter 160ms; }
.gr-app .gr-home-hero .gr-hero-frame .gr-home-image[data-gr-hero-quality="small"] { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; box-shadow:none; }
.gr-app .gr-home-hero .gr-hero-frame .gr-home-image[data-gr-hero-quality="large"] { width:100%; height:100%; object-fit:cover; box-shadow:none; }
.gr-app .gr-home-hero .gr-hero-media-stage::after { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; background:linear-gradient(0deg,#07131ed4 0%,transparent 34%),linear-gradient(90deg,#07131e35,transparent 35%,#07131e22); }
.gr-app .gr-home-hero .gr-hero-play,.gr-app .gr-home-hero .gr-hero-media-count { position:absolute; z-index:3; bottom:14px; min-height:36px; border:1px solid #8ec5e755; border-radius:3px; background:#0a1825d9; color:#e7f6ff; padding:7px 11px; font-size:11px; backdrop-filter:blur(8px); }
.gr-app .gr-home-hero .gr-hero-play { left:14px; font-weight:700; }
.gr-app .gr-home-hero .gr-hero-media-count { right:14px; display:inline-flex; align-items:center; gap:6px; }
.gr-app .gr-home-hero .gr-hero-play:hover,.gr-app .gr-home-hero .gr-hero-media-count:hover { background:#24506c; border-color:#8fd6ff; }
.gr-app .gr-home-hero .gr-hero-media-rail { grid-column:2; grid-row:1; display:flex; flex-direction:column; align-items:center; gap:5px; width:88px; min-width:88px; min-height:0; align-self:stretch; padding:8px 7px; overflow-x:hidden; overflow-y:auto; background:#101f2c; border-left:1px solid #ffffff10; scrollbar-width:thin; }
.gr-app .gr-home-hero .gr-hero-media-rail button { position:relative; flex:0 0 42px; width:72px; height:42px; padding:0; overflow:hidden; border:1px solid transparent; border-radius:2px; background:#172b3a; }
.gr-app .gr-home-hero .gr-hero-media-rail button:hover,.gr-app .gr-home-hero .gr-hero-media-rail button:focus-visible { border-color:#66b7e0; }
.gr-app .gr-home-hero .gr-hero-media-rail img { width:100%; height:100%; object-fit:cover; }
.gr-app .gr-home-hero .gr-hero-media-rail span { position:absolute; inset:0; display:grid; place-items:center; color:white; background:#08131e68; font-size:16px; }
.gr-app .gr-home-hero .gr-hero-inner { padding-bottom:58px; }
@media (max-width:900px) {
 .gr-app .gr-home-hero .gr-slide { grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); }
 .gr-app .gr-home-hero .gr-hero-media { grid-template-rows:minmax(300px,1fr); }
 .gr-app .gr-home-hero .gr-hero-media-stage { min-height:300px; }
}
@media (max-width:620px) {
 .gr-app .gr-home-hero .gr-slide { grid-template-columns:minmax(0,1fr); }
 .gr-app .gr-home-hero .gr-hero-media { grid-template-columns:minmax(0,1fr) auto; grid-template-rows:210px; }
 .gr-app .gr-home-hero .gr-hero-media-stage { min-height:210px; }
 .gr-app .gr-home-hero .gr-hero-frame .gr-home-image[data-gr-hero-quality="small"] { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; box-shadow:none; }
 .gr-app .gr-home-hero .gr-hero-play,.gr-app .gr-home-hero .gr-hero-media-count { bottom:10px; min-height:40px; }
 .gr-app .gr-home-hero .gr-hero-media-rail { width:70px; min-width:70px; padding-inline:6px; }
 .gr-app .gr-home-hero .gr-hero-media-rail button { flex-basis:34px; width:56px; height:34px; }
}

/* Interactive sticky hero: cards promote their game into the header preview. */
.gr-app .gr-home-hero { z-index:60; transition:box-shadow 160ms,background 160ms; }
.gr-app .gr-home-hero .gr-hero-live-video,
.gr-app .gr-home-hero .gr-hero-live-embed { position:absolute; z-index:2; inset:0; display:block; width:100%; height:100%; border:0; background:#000; }
.gr-app .gr-home-hero .gr-hero-live-video { object-fit:contain; object-position:center; background:#000; }
.gr-app .gr-home-hero.is-trailer-live .gr-hero-play { display:none; }
.gr-app .gr-home-hero .gr-hero-media-rail button.is-active { border-color:#66c0f4; box-shadow:0 0 0 1px #66c0f466; }
.gr-app .gr-home-hero [data-gr-interactive-preview] .gr-eyebrow { color:#73d2ff; }
.gr-app .gr-home-hero [data-gr-interactive-preview] .gr-steam-action { display:inline-flex; align-items:center; min-height:42px; padding:0 14px; border:1px solid #4d7690; border-radius:3px; color:#d9effc; background:#173348; }
.gr-app .gr-home-hero [data-gr-interactive-preview] .gr-steam-action:hover { border-color:#66c0f4; background:#234b64; color:#fff; }
@media (min-width:901px) {
 .gr-app .gr-home-hero { position:sticky; top:65px; margin-top:16px; }
 .gr-app .gr-home-hero.is-floating { box-shadow:0 18px 42px #0009; background:#101f2d; }
 .gr-app .gr-home-hero.is-floating .gr-hero-media { grid-template-rows:minmax(220px,1fr); }
 .gr-app .gr-home-hero.is-floating .gr-hero-media-stage { min-height:220px; }
 .gr-app .gr-home-hero.is-floating .gr-hero-inner { padding-top:18px; padding-bottom:48px; }
 .gr-app .gr-home-hero.is-floating .gr-hero-copy h2 { margin:7px 0; font-size:clamp(24px,2vw,30px); }
 .gr-app .gr-home-hero.is-floating .gr-hero-copy > p { margin-bottom:7px; -webkit-line-clamp:1; }
 .gr-app .gr-home-hero.is-floating .gr-hero-meta { margin:7px 0; }
 .gr-app .gr-home-hero.is-floating .gr-hero-media-rail { width:72px; min-width:72px; min-height:0; padding:5px 6px; }
 .gr-app .gr-home-hero.is-floating .gr-hero-media-rail button { flex-basis:30px; width:58px; height:30px; }
}
@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. */
.gr-app .gr-home-hero { --gr-hero-media-height:430px; --gr-sticky-media-height:300px; }
@media (min-width:1100px) {
 .gr-app .gr-home-hero .gr-slide { grid-template-columns:minmax(0,1.65fr) minmax(330px,.75fr); }
 .gr-app .gr-home-hero:not(.is-floating) .gr-hero-media { grid-template-rows:minmax(var(--gr-hero-media-height),1fr); }
 .gr-app .gr-home-hero:not(.is-floating) .gr-hero-media-stage { min-height:var(--gr-hero-media-height); }
}
.gr-app .gr-hero-sticky-controls,.gr-app .gr-hero-resize-handle { display:none; }
@media (min-width:901px) {
 .gr-app .gr-home-hero.is-floating .gr-slide { height:min(var(--gr-sticky-media-height),calc(100vh - 115px)); min-height:0; }
 .gr-app .gr-home-hero.is-floating .gr-hero-media { height:100%; min-height:0; grid-template-rows:minmax(0,1fr); }
 .gr-app .gr-home-hero.is-floating .gr-hero-media-stage { height:100%; min-height:0; }
 .gr-app .gr-home-hero.is-floating .gr-hero-inner { height:100%; min-height:0; overflow:hidden; }
 .gr-app .gr-hero-sticky-controls { position:absolute; z-index:32; top:8px; right:8px; display:flex; align-items:center; gap:4px; padding:4px; border:1px solid #52748b; border-radius:6px; background:#0b1b29e8; box-shadow:0 6px 22px #0005; backdrop-filter:blur(10px); }
 .gr-app .gr-hero-sticky-controls button { display:grid; place-items:center; min-width:30px; height:30px; padding:0 8px; border:1px solid #41637a; border-radius:4px; background:#173247; color:#d8edf8; font:600 13px/1 "Segoe UI",Arial,sans-serif; cursor:pointer; }
 .gr-app .gr-hero-sticky-controls button:hover { border-color:#78badb; background:#28516a; color:#fff; }
 .gr-app .gr-hero-sticky-controls [data-gr-hero-restore] { display:none; min-width:auto; padding-inline:12px; }
 .gr-app .gr-hero-resize-handle { position:absolute; z-index:31; left:0; right:0; bottom:-5px; display:block; height:11px; cursor:ns-resize; touch-action:none; outline:none; }
 .gr-app .gr-hero-resize-handle::after { content:""; position:absolute; left:50%; bottom:3px; width:72px; height:3px; border-radius:4px; background:#6d9fbaaa; transform:translateX(-50%); transition:width 120ms,background 120ms; }
 .gr-app .gr-hero-resize-handle:hover::after,.gr-app .gr-hero-resize-handle:focus-visible::after,.gr-app .gr-home-hero.is-resizing .gr-hero-resize-handle::after { width:112px; background:#8bd7fb; }
 .gr-app .gr-home-hero.is-resizing { user-select:none; }
 .gr-app .gr-home-hero.is-resizing * { cursor:ns-resize!important; }
 .gr-app .gr-home-hero.is-sticky-compact .gr-hero-copy > p,.gr-app .gr-home-hero.is-sticky-compact .gr-tags { display:none; }
 .gr-app .gr-home-hero.is-sticky-compact .gr-hero-copy h2 { font-size:22px; margin:4px 0 6px; }
 .gr-app .gr-home-hero.is-sticky-compact .gr-hero-inner { padding-top:14px; padding-bottom:20px; }
 .gr-app .gr-home-hero.is-floating.is-sticky-dismissed { height:42px; min-height:42px; overflow:visible; background:#101f2d; }
 .gr-app .gr-home-hero.is-floating.is-sticky-dismissed .gr-slides,.gr-app .gr-home-hero.is-floating.is-sticky-dismissed .gr-home-controls,.gr-app .gr-home-hero.is-floating.is-sticky-dismissed .gr-hero-resize-handle { display:none; }
 .gr-app .gr-home-hero.is-floating.is-sticky-dismissed .gr-hero-sticky-controls { top:5px; right:8px; }
 .gr-app .gr-home-hero.is-floating.is-sticky-dismissed .gr-hero-sticky-controls > :not([data-gr-hero-restore]) { display:none; }
 .gr-app .gr-home-hero.is-floating.is-sticky-dismissed .gr-hero-sticky-controls [data-gr-hero-restore] { display:inline-flex; align-items:center; height:30px; }
 .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 #35556c; border-radius:3px; background:#173047; color:#dceef9; font-size:28px; line-height:1; }
.gr-home-page-button:hover:not(:disabled) { border-color:#72c9ef; background:#214a64; }
.gr-home-page-button:disabled { opacity:.32; cursor:default; }
.gr-home-page-status { min-width:76px; color:#91adbf; 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. */
.gr-app .gr-simple-hero { position:relative; min-height:360px; margin:18px 0 28px; overflow:hidden; border:1px solid #345269; border-radius:8px; background:#101f2d; box-shadow:0 12px 32px #0004; }
.gr-app .gr-simple-hero-art { position:absolute; inset:0; background:#0a1621; }
.gr-app .gr-simple-hero-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.gr-app .gr-simple-hero-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#07131ef5 0%,#07131ed8 38%,#07131e66 69%,#07131e1f),linear-gradient(0deg,#07131ed1 0%,transparent 48%); }
.gr-app .gr-simple-hero-placeholder { display:grid; width:100%; height:100%; place-items:center; color:#7cb9dc; }
.gr-app .gr-simple-hero-copy { position:relative; z-index:1; width:min(610px,64%); min-height:360px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:34px 38px; }
.gr-app .gr-simple-hero-copy h2 { margin:9px 0 10px; color:#f2f8fc; font-size:clamp(31px,3.1vw,46px); line-height:1.03; letter-spacing:-1px; }
.gr-app .gr-simple-hero-copy > p { max-width:560px; margin:0 0 12px; color:#c8d8e4; font-size:14px; line-height:1.55; }
.gr-app .gr-simple-hero-copy .gr-tags { margin:3px 0 12px; }
.gr-app .gr-simple-hero-meta { display:flex; align-items:center; gap:7px; margin:0 0 16px; color:#a9c5d7; font-size:12px; }
.gr-app .gr-simple-hero-meta svg { width:15px; height:15px; }
.gr-app .gr-simple-hero .gr-button { min-height:42px; }
@media (max-width:760px) {
  .gr-app .gr-simple-hero { min-height:320px; margin-block:12px 22px; }
  .gr-app .gr-simple-hero-art::after { background:linear-gradient(90deg,#07131ef2,#07131ea8),linear-gradient(0deg,#07131ef0 0%,#07131e4a 70%); }
  .gr-app .gr-simple-hero-copy { width:100%; min-height:320px; padding:26px 22px; }
  .gr-app .gr-simple-hero-copy h2 { font-size:31px; }
  .gr-app .gr-simple-hero-copy > p { font-size:13px; }
}


/* Homepage feature: media selector beside a naturally proportioned player. */
.gr-app .gr-steam-hero.game-detail-hero { margin-bottom:24px; }
.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) 112px; }
.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-stage-open.is-inline-player { position:absolute; z-index:3; top:12px; right:12px; width:auto; height:auto; padding:7px 10px; border:1px solid #8ec5e755; border-radius:4px; background:#07131edb; color:#dceefa; 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 h2 { 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:#7799ad; background:#071018; }
.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 { margin-top:12px; margin-bottom:20px; }
  .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; }
}