/* Steam background catalogue pages (/<lang>/backgrounds..., smweb/background_pages.py, 2026-10-13).
   Built on the guide template (static/guide.html + css/guides.css); everything here carries the bgp- prefix. */
.page-bgp .guide {width:min(100% - 32px,1280px)}
.bgp-crumbs {display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;color:rgba(200,214,238,.55);font:600 12px/1.4 Montserrat,sans-serif}
.bgp-crumbs a {color:#6fe3ff;text-decoration:none}
.bgp-crumbs a:hover {color:#fff;text-decoration:underline}
.bgp-crumbs [aria-current] {color:rgba(226,238,255,.82)}
.page-bgp .guide__lead {max-width:920px}
.bgp-stats {margin:-12px 0 6px;color:rgba(200,214,238,.62);font:600 13px/1.5 Montserrat,sans-serif}

.bgp-chips {display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
a.bgp-chip {display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid rgba(110,170,255,.24);border-radius:999px;
  background:rgba(5,10,28,.6);color:#e3efff;font:700 13px/1.2 Montserrat,sans-serif;text-decoration:none;transition:border-color .18s,color .18s,background .18s}
a.bgp-chip small {color:rgba(200,214,238,.55);font-weight:600}
a.bgp-chip:hover {border-color:rgba(111,227,255,.65);color:#6fe3ff;background:rgba(31,201,241,.08)}

.bgp-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.bgp-card {margin:0;display:flex;flex-direction:column;border:1px solid rgba(110,170,255,.18);border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(14,26,60,.92),rgba(5,10,28,.95));transition:border-color .18s,transform .18s,box-shadow .18s}
.bgp-card:hover {border-color:rgba(111,227,255,.55);box-shadow:0 14px 34px rgba(0,0,0,.35);transform:translateY(-1px)}
.bgp-card__media {position:relative;aspect-ratio:16/9;background:#060b1a;overflow:hidden}
.bgp-card__media img, .bgp-card__media video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bgp-card__media video {opacity:0;transition:opacity .25s}
.bgp-card.is-playing .bgp-card__media video {opacity:1}
.bgp-card.is-anim .bgp-card__media {cursor:pointer}
.bgp-badge {position:absolute;left:8px;top:8px;z-index:2;padding:3px 8px;border-radius:999px;background:rgba(4,8,20,.78);
  border:1px solid rgba(111,227,255,.5);color:#6fe3ff;font:700 10px/1.3 Montserrat,sans-serif;letter-spacing:.02em}
.bgp-badge::before {content:"▶ ";font-size:8px}
.bgp-card figcaption {display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px;min-width:0}
.bgp-card figcaption b {overflow:hidden;color:#f4f9ff;font:700 13px/1.35 Montserrat,sans-serif;text-overflow:ellipsis;white-space:nowrap}
a.bgp-card__game {overflow:hidden;color:#6fe3ff;font:600 12px/1.35 Montserrat,sans-serif;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
a.bgp-card__game:hover {text-decoration:underline}
.bgp-card__meta {color:rgba(200,214,238,.6);font:600 11px/1.4 Montserrat,sans-serif}
.bgp-card__acts {display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bgp-card__acts a {padding:6px 10px;border-radius:9px;font:700 12px/1.2 Montserrat,sans-serif;text-decoration:none;transition:background .18s,color .18s,border-color .18s}
a.bgp-use {background:#1fc9f1;color:#03131a}
a.bgp-use:hover {background:#6fe3ff}
a.bgp-use--alt {background:rgba(138,125,255,.22);color:#ece8ff}
a.bgp-use--alt:hover {background:rgba(138,125,255,.4);color:#fff}
a.bgp-shop {border:1px solid rgba(110,170,255,.28);color:#d6e6ff}
a.bgp-shop:hover {border-color:rgba(111,227,255,.6);color:#6fe3ff}

.bgp-games {display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
a.bgp-game {display:grid;grid-template-columns:116px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border:1px solid rgba(110,170,255,.18);
  border-radius:12px;background:linear-gradient(160deg,rgba(14,26,60,.92),rgba(5,10,28,.95));color:#f4f9ff;text-decoration:none;transition:border-color .18s,transform .18s}
a.bgp-game:hover {border-color:rgba(111,227,255,.55);transform:translateY(-1px)}
a.bgp-game img {width:116px;height:44px;border-radius:7px;object-fit:cover;background:#060b1a}
a.bgp-game span {min-width:0}
a.bgp-game b {display:block;overflow:hidden;font:700 13px/1.35 Montserrat,sans-serif;text-overflow:ellipsis;white-space:nowrap}
a.bgp-game small {display:block;margin-top:2px;color:rgba(200,214,238,.6);font:600 11px/1.4 Montserrat,sans-serif}

a.bgp-more {display:inline-block;margin-top:14px;color:#6fe3ff;font:700 14px/1.4 Montserrat,sans-serif;text-decoration:none}
a.bgp-more:hover {color:#fff;text-decoration:underline}
.bgp-cta {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:34px 0 0;padding:20px 22px;
  border:1px solid rgba(31,201,241,.35);border-radius:16px;background:linear-gradient(120deg,rgba(31,201,241,.1),rgba(138,125,255,.12))}
.bgp-cta div {max-width:720px}
.bgp-cta b {display:block;margin-bottom:6px;color:#f4f9ff;font:800 18px/1.3 Montserrat,sans-serif}
.bgp-cta p {margin:0;color:rgba(214,229,250,.74);font:500 14px/1.6 Montserrat,sans-serif}
.bgp-cta .guide__cta {margin-top:0}

.bgp-azlist {display:grid;gap:8px}
.bgp-az {border:1px solid rgba(110,170,255,.16);border-radius:12px;background:rgba(5,10,28,.55)}
.bgp-az summary {padding:11px 16px;cursor:pointer;color:#f4f9ff;font:800 15px/1.3 Montserrat,sans-serif}
.bgp-az summary small {margin-left:6px;color:rgba(200,214,238,.55);font-weight:600}
.bgp-az__links {display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 16px;padding:0 16px 14px}
.bgp-az__links a {overflow:hidden;color:#cfe0ff;font:500 13px/1.6 Montserrat,sans-serif;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.bgp-az__links a:hover {color:#6fe3ff;text-decoration:underline}

@media (max-width:560px) {
  .bgp-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .bgp-card figcaption {padding:8px 9px 10px}
  .bgp-card__acts a {padding:6px 8px;font-size:11px}
  .bgp-games {grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce) {
  .bgp-card, a.bgp-game {transition:none}
}