/* Game detail page: the user's game display card and action bar on the layered scene, then the rdr2.jpg story band, card row and media carousel. */

/* Game display card (the .gd rules live in site.css): the layered scene replaces the blurred backdrop, and the game's thumbnail shows at full colour. */
.game-fx .scene.gp-fx-scene { z-index: 0; }
.gp .gd-bg { filter: saturate(1.08) contrast(1.04); }

/* Action bar under the card: red slanted tab, Play, Discord, loader. */
.gp-bar { position: relative; display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 18px; padding: 0 16px 0 0; border: 1px solid var(--line-2); background: rgba(10, 10, 12, .92); animation: rise-in .8s var(--ease) .28s backwards; }
.gp-tab { display: flex; align-items: center; align-self: stretch; padding: 0 44px 0 24px; clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); background: #c8111b; color: #fff; font: 700 18px/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.gp-bar > .btn { margin-block: 14px; }
.gp-bar .code-box { --cut: 0px; height: 54px; box-shadow: inset 0 0 0 1px var(--line-2), inset 3px 0 0 #c8111b; }
.gp-bar .copy-btn { height: 38px; }
.game-page .btn-ghost svg { fill: none; stroke: currentColor; font-size: 16px; }
.gp > .game-page { padding-bottom: 70px; }

/* Story band: loader and steps */
.gp-story { padding: 96px 0; }
.gp-story .story-inner > * { max-width: 620px; }
.gp-story .kicker::before, .gp-story .kicker::after { content: none; }
.gp-band-banner { height: clamp(64px, 7.4vw, 112px); max-width: 100%; }
.gp-band-banner img { max-width: 100%; object-fit: contain; object-position: left; }
.gp-story .code-box { width: min(620px, 100%); clip-path: none; border-radius: 2px; background: rgba(9, 9, 11, .88); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 3px 0 0 #c8111b; }
.gp-steps { display: grid; width: min(620px, 100%); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.gp-steps li { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.gp-steps b { color: var(--red-hot); font: 700 18px/1 var(--display); letter-spacing: .2em; }
.gp-steps span { font: 700 19px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.gp-story-cta { justify-content: flex-start; gap: 28px; }

/* Card row */
.gp-feats { border-bottom: 1px solid var(--line-2); }
.gp-feat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gp-feat-grid .gx-card { min-height: 300px; padding-top: 40px; }

/* Related games carousel */
.gp-more { padding-top: 80px; }
.gp .game-note { padding-bottom: 60px; }

@media (max-width: 1220px) {
  .gp-bar { grid-template-columns: auto auto minmax(0, 1fr); padding: 0 16px 16px 0; }
  .gp-bar .code-box { grid-column: 1 / -1; margin-left: 16px; }
}
@media (max-width: 1100px) {
  .gp-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .gp-bar { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 0 14px; }
  .gp-tab { padding: 14px 44px 14px 18px; justify-self: start; }
  .gp-bar > .btn { width: calc(100% - 28px); margin: 0 14px; justify-content: center; }
  .gp-bar .code-box { width: calc(100% - 28px); margin: 0 14px; }
}
@media (max-width: 640px) {
  .gp-story-cta { gap: 18px; }
  .gp-story-cta .btn { flex: 1 1 100%; justify-content: center; }
  .gp-story { padding: 64px 0; }
  .gp-steps span { font-size: 17px; }
  .gp-band-banner { height: clamp(52px, 15vw, 72px); }
  .gp-feat-grid { grid-template-columns: minmax(0, 1fr); }
  .gp-feat-grid .gx-card { min-height: 0; }
  .gp-more { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .gp-bar { animation: page-in .5s ease .28s backwards; }
}