/* Store pages (Steam, Epic Games, GOG, Other games): the home page's look from style.css, plus the pieces only
   these pages use: store links in the top bar, a breadcrumb, the step list, the one-line price strip and the
   cards that link to the other stores. Loaded after style.css; the home page loads it for the store links. */

/* Epic Games and GOG wear their store's colors through the body class; the home page, Steam and Other games keep
   Game Bridger's pink and violet. --accent-rgb is --sub-text as numbers, for the tinted borders and highlights. */
body.epic { --bg: #101010; --bar: #121212; --tile: #1a1a1a; --tile-hi: #242424; --bg-rgb: 16, 16, 16;
  --play-a: #ffffff; --play-b: #dcdcdc; --sub: #0074e4; --sub-text: #4fb4ff; --accent-rgb: 79, 180, 255; --glow: 255, 255, 255; }
body.gog { --bg: #120f17; --bar: #15111b; --tile: #1c1724; --tile-hi: #261f31; --bg-rgb: 18, 15, 23;
  --play-a: #a45ee5; --play-b: #6c2db8; --sub: #7b3fc8; --sub-text: #c7a2f6; --accent-rgb: 199, 162, 246; --glow: 140, 70, 220; }
body.epic .btn.play { color: #121212; }
body.epic .btn.play, body.gog .btn.play { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 6px 22px rgba(var(--glow), 0.3); }
body.epic ::selection, body.gog ::selection { background: rgba(var(--accent-rgb), 0.35); }
body.epic .pick.on, body.gog .pick.on { background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.35); }
body.epic .topbar { background: rgba(18, 18, 18, 0.92); }
body.gog .topbar { background: rgba(21, 17, 27, 0.92); }
body.epic .hero-art::after, body.epic .reel::after, body.gog .hero-art::after, body.gog .reel::after {
  background: linear-gradient(90deg, rgba(var(--bg-rgb), 0.95) 0%, rgba(var(--bg-rgb), 0.8) 45%, rgba(var(--bg-rgb), 0.5) 100%),
              linear-gradient(0deg, var(--bg) 0%, rgba(var(--bg-rgb), 0) 45%); }
@media (max-width: 860px) {
  body.epic .reel::after, body.gog .reel::after { background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.78), rgba(var(--bg-rgb), 0.88) 70%, var(--bg)); }
}

/* Game art in place of footage in the library tiles */
.vtile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vtile:hover > img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .vtile > img { transition: none; } }

/* Store links in the top bar; the menu button follows them instead of taking the free space */
.topbar nav a[aria-current="page"], .side-links a[aria-current="page"] { color: var(--sub-text); }
@media (min-width: 1041px) { .topbar nav + .menu-btn { margin-left: 0; } }
/* style.css hides the bar's links under 1040px; the store links stay up to phone width, the menu holds them below */
@media (min-width: 641px) and (max-width: 1040px) {
  .topbar nav { display: flex; gap: 16px; }
  .topbar nav + .menu-btn { margin-left: 0; }
  .topbar .wrap { gap: 20px; }
}
.side-links a { text-decoration: none; }
.side-links.minor { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--stroke); }
.side-links.minor a { font-size: 18px; color: var(--dim); }

.crumb { margin: 0 0 14px; font-size: 14px; color: var(--dim); }
.crumb a { color: var(--soft); text-decoration: none; }
.crumb a:hover { color: var(--text); text-decoration: underline; }

/* A shorter hero than the home page's */
.hero.short { min-height: min(78vh, 760px); }

/* Three steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: step; }
.steps li { background: var(--tile); border: 1px solid var(--stroke); padding: 26px; counter-increment: step; }
.steps li::before { content: counter(step); display: block; font: 800 46px/0.95 var(--display); color: var(--sub-text); margin-bottom: 14px; }
.steps h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; }
.steps p { margin: 0; color: var(--dim); }

/* One-line pricing; the full plans live on the home page */
.strip { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding: 26px 28px;
  background: var(--tile-hi); border: 1px solid rgba(var(--accent-rgb, 231, 155, 242), 0.4); }
.strip h3 { margin: 0 0 4px; font: 800 27px/1.05 var(--display); text-transform: uppercase; }
.strip p { margin: 0; color: var(--soft); }
.strip .cta { flex: none; }

/* Cards that link to the other stores: footage behind, one store each */
.other-stores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.store { position: relative; display: flex; align-items: flex-end; min-height: 220px; overflow: hidden; background: #0e141b;
  color: var(--text); text-decoration: none; box-shadow: 0 0 0 1px var(--stroke); transition: box-shadow .18s ease; }
.store:hover { box-shadow: 0 0 0 1px rgba(var(--accent-rgb, 231, 155, 242), 0.55); }
.store video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); }
.store::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 20, 27, 0.96) 15%, rgba(14, 20, 27, 0.35) 70%, rgba(14, 20, 27, 0.15)); }
.store-body { position: relative; z-index: 1; display: block; padding: 24px; }
.store-tag { display: block; font-size: 14px; font-weight: 600; color: var(--sub-text); margin-bottom: 6px; }
.store h3 { font: 800 25px/1 var(--display); text-transform: uppercase; margin: 0 0 10px; }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--text); }
.more svg { width: 18px; height: 18px; transition: transform .15s ease; }
.store:hover .more svg { transform: translateX(4px); }

footer .stores-links { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--stroke); }

@media (max-width: 860px) {
  .steps, .other-stores { grid-template-columns: 1fr; }
  .hero.short { min-height: 0; }
}
@media (max-width: 520px) {
  .strip { padding: 22px; }
  .strip .cta { width: 100%; }
  .store h3 { font-size: 22px; }
}

/* Famous games that won't run (anti-cheat, DirectX 12) stay on the shelf, dimmed and marked, so nobody subscribes for them */
.cover { position: relative; }
.cover.blocked img { filter: grayscale(0.6) brightness(0.7); }
.no-run { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 3px 4px; background: rgba(10, 10, 10, 0.88);
  border: 1px solid rgba(245, 166, 35, 0.5); color: var(--warn); font: 700 12px/1.3 var(--body); text-align: center; }

/* The shelf's link to buy the game on screen, and the note when store links carry a commission or creator code */
.shelf-buy { margin-left: 12px; color: var(--sub-text, var(--text)); font-weight: 600; text-decoration: none; white-space: nowrap; }
.shelf-buy:hover { text-decoration: underline; }
.shelf-note { display: block; margin-top: 4px; color: var(--dim); font-size: 12px; }