/* ============================================================================
   BARLIN GAMES — Public game page (approved bright cinematic layout)
   ----------------------------------------------------------------------------
   Loaded ONLY by /games/{slug} (and its admin preview), after game-detail.css,
   via <x-public.games.page.styles />.

   game-detail.css keeps what the two designs share: the tokens on `.bgd`,
   the buttons, the chips, the lightbox, the sticky-bar mechanics, the motion
   gate and the community-review child. This sheet is the layout on top —
   everything here is `bgp-` namespaced and scoped under `.bgp`, so nothing
   in it can reach another page.

   THEMED. Light is the design: white and off-white surfaces, Barlin red for
   actions and marks, restrained neutrals. Dark is the same sheet with the
   tokens on `.bgd` / `.bgp` redefined under `.theme-dark` (see the block at
   the end of game-detail.css) — nothing here names a surface colour
   directly, so the toggle in the header flips the whole page, not just the
   header. No prefers-color-scheme block: the visitor's choice wins.

   RESPONSIVE BY REFLOW, NOT BY SCALING. Desktop is a 70/30 two-column body
   under a full-width hero; under 1080px the sidebar becomes a band of cards
   below the content, the hero stacks, rails scroll sideways, grids collapse.
   ========================================================================== */

.bgp {
    --bgp-side: 340px;
    --bgp-gap: 24px;
    --bgp-r: 16px;
    --bgp-r-sm: 12px;
    --bgp-line: #E6E9EF;
    --bgp-tint: #FFF6F6;
    --bgp-tint-line: rgba(229, 27, 35, .14);
    --bgp-nav-bg: rgba(255, 255, 255, .92);
    --bgp-e: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -10px rgba(16, 24, 40, .14);
    --bgp-e-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 16px 36px -18px rgba(16, 24, 40, .24);
}

.bgp-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* The page's controls hide things with the `hidden` attribute. The UA's
   own [hidden] rule loses to any author `display`, so a grid or flex box
   would stay visible: this makes the attribute mean what it says. */
.bgp [hidden] { display: none !important; }

.bgp .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ═══ HERO ════════════════════════════════════════════════════════════════ */

.bgp-hero {
    position: relative; isolation: isolate;
    /* Above the section bar (40) so the "More" menu can hang over it, below
       the site header (60). The two never overlap otherwise: the bar sticks
       exactly when the hero's bottom edge has scrolled past it. */
    z-index: 45;
    background: var(--dark);
    color: var(--on);
    min-height: 520px;
    display: flex; align-items: stretch;
}
.bgp-hero.is-blank {
    /* No landscape art: a designed stage, not a borrowed picture. */
    background:
        radial-gradient(70% 90% at 90% 10%, rgba(229, 27, 35, .34) 0%, transparent 60%),
        radial-gradient(50% 70% at 10% 90%, rgba(229, 27, 35, .16) 0%, transparent 60%),
        linear-gradient(160deg, #161B24 0%, #0B0E13 100%);
}
.bgp-hero.is-blank::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(80% 80% at 70% 40%, #000 0%, transparent 100%);
            mask-image: radial-gradient(80% 80% at 70% 40%, #000 0%, transparent 100%);
}
/* The art clips itself (the parallax scale needs it); the hero stays
   overflow-visible so the "More" menu can extend past its bottom edge. */
.bgp-hero-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.bgp-hero-art img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
    /* A little headroom for the parallax translate so the edges never show. */
    transform: scale(1.06);
    will-change: transform;
}
/* Legibility. The text sits on the left, so the shade is heaviest there and
   lifts towards the art on the right; a second wash anchors the bottom so
   the platform row and tags stay readable over bright sky. */
.bgp-hero-shade {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7, 9, 13, .94) 0%, rgba(7, 9, 13, .82) 34%, rgba(7, 9, 13, .38) 62%, rgba(7, 9, 13, .12) 100%),
        linear-gradient(180deg, rgba(7, 9, 13, .28) 0%, transparent 30%, transparent 62%, rgba(7, 9, 13, .78) 100%);
}
.bgp-hero-in { position: relative; z-index: 1; display: flex; padding-top: 40px; padding-bottom: 36px; }
.bgp-hero-grid {
    width: 100%;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 36px; align-items: end;
}
.bgp-hero-body { min-width: 0; max-width: 720px; }

.bgp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.bgp-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 750; letter-spacing: .02em;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); color: var(--on);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.bgp-badge.is-status, .bgp-badge.is-free { background: var(--red); border-color: transparent; }
.bgp-badge.is-verified::before { content: '✓'; font-weight: 900; }

/* `.bgp` prefixed on purpose. The base sheet's heading reset
   (`.bgd h1, .bgd h2, …` in game-detail.css) is one class + one type, so a
   bare `.bgp-hero-t` loses to it and the title takes `--ink` — page ink, on
   top of the hero art. In dark that is near-white and the mistake hides; in
   light it is near-black on a dark photograph, about 1.1:1. The title is
   on-image text in both themes, so it names `--on` and outranks the reset. */
.bgp .bgp-hero-t {
    margin: 0; color: var(--on);
    font-size: clamp(38px, 5.4vw, 66px); font-weight: 900; line-height: .98;
    letter-spacing: -.035em; text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.bgp-hero-t.has-logo { line-height: 0; }
.bgp-hero-logo {
    display: block; width: auto; height: auto;
    max-width: min(440px, 100%); max-height: 168px; object-fit: contain; object-position: left center;
    filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .45));
}
.bgp-hero-official { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--on-soft); letter-spacing: .01em; }
.bgp-hero-tag {
    margin: 16px 0 0;
    font-size: clamp(14px, 1.5vw, 18px); font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
    color: var(--on);
}
.bgp-hero-x { margin: 16px 0 0; max-width: 60ch; font-size: 15.5px; line-height: 1.66; color: rgba(255, 255, 255, .84); }

/* Facts — icon, small label, bold value. */
.bgp-facts { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 26px 0 0; }
/* A two-row grid: the icon spans both rows, the label and value stack
   beside it. `display: contents` lets the <dt>'s two children take grid
   cells of their own while the markup stays a valid <dl>. */
.bgp-fact { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; min-width: 0; }
.bgp-fact dt { display: contents; }
.bgp-fact-i {
    grid-row: 1 / 3; grid-column: 1;
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 9px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .14);
    color: var(--on);
}
.bgp-fact-k { grid-column: 2; align-self: end; font-size: 11.5px; font-weight: 600; color: var(--on-dim); letter-spacing: .02em; }
.bgp-fact dd { grid-column: 2; align-self: start; margin: 1px 0 0; font-size: 13.5px; font-weight: 800; color: var(--on); }
.bgp-fact dd a { border-bottom: 1px solid rgba(255, 255, 255, .28); transition: border-color .18s var(--ease), color .18s var(--ease); }
.bgp-fact dd a:hover { color: #fff; border-color: #fff; }

/* Actions. The primary is red; every other button in the hero is white on
   the plate, as the approved design has it. */
.bgp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.bgp-hero .bgd-btn { background: #FFFFFF; color: #0E1116; border-color: transparent; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .55); }
.bgp-hero .bgd-btn:hover { color: var(--red); background: #FFFFFF; border-color: transparent; }
.bgp-hero .bgd-btn-red { background: linear-gradient(135deg, #FF3138, var(--red-dark)); color: #fff; box-shadow: var(--e-red); }
.bgp-hero .bgd-btn-red:hover { background: linear-gradient(135deg, #FF474E, var(--red)); color: #fff; }
.bgp-btn-i {
    display: grid; place-items: center; width: 26px; height: 26px; margin-left: -6px;
    border-radius: 50%; background: rgba(255, 255, 255, .22);
}
.bgp-hero .bgd-btn-lg { padding: 14px 22px; border-radius: 13px; }
.bgp-hero .bgd-fav.is-on .gd-i { fill: var(--red); stroke: var(--red); }
.bgp-hero .bgd-btn-ico { padding: 14px; }
.bgp-dots { display: inline-flex; gap: 3px; }
.bgp-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* The "More" menu is a <details>, so it opens with no script at all. */
.bgp-menu { position: relative; }
.bgp-menu > summary { list-style: none; }
.bgp-menu > summary::-webkit-details-marker { display: none; }
.bgp-menu-l {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
    min-width: 220px; margin: 0; padding: 6px; list-style: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--e3);
}
.bgp-menu-l a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    font-size: 13.5px; font-weight: 650; color: var(--ink);
}
.bgp-menu-l a > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgp-menu-l a > .gd-i:last-child { color: var(--faint); }
.bgp-menu-l a:hover { background: var(--red-soft); color: var(--red); }

/* Platforms and tags. */
.bgp-hero-plats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.bgp-hero-plats a {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 750; color: var(--on);
    padding: 6px 2px; opacity: .92; transition: opacity .18s var(--ease), color .18s var(--ease);
}
.bgp-hero-plats a:hover { opacity: 1; color: #fff; }
.bgp-plat-img { width: 1em; height: 1em; object-fit: contain; }

.bgp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.bgp-tag {
    display: inline-flex; align-items: center;
    padding: 7px 12px; border-radius: 9px;
    background: rgba(12, 15, 21, .62); border: 1px solid rgba(255, 255, 255, .12);
    color: var(--on); font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: background .18s var(--ease), border-color .18s var(--ease);
}
a.bgp-tag:hover { background: var(--red); border-color: transparent; }

/* The fact panel: dark glass, real figures only. */
.bgp-stats {
    display: flex; flex-direction: column; gap: 12px;
    min-width: 230px; padding: 16px 18px;
    background: rgba(10, 12, 18, .68); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .7);
}
.bgp-stat { display: flex; align-items: center; gap: 12px; }
.bgp-stat-i {
    display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: 11px; background: rgba(255, 255, 255, .1); color: var(--on);
}
.bgp-stat-b { display: flex; flex-direction: column; min-width: 0; }
.bgp-stat-big { font-size: 19px; font-weight: 900; color: var(--on); letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
a.bgp-stat-big:hover { color: var(--red-lit); }
.bgp-stat-small { font-size: 12px; font-weight: 600; color: var(--on-dim); margin-top: 2px; }

/* Entrance — gated on .bgd-fx exactly like the base sheet. */
.bgd-fx .bgp-hero { opacity: 0; transform: translateY(12px); }
.bgd-lit .bgp-hero { animation: bgd-up .7s var(--ease) forwards; }

/* ═══ SECTION BAR ═════════════════════════════════════════════════════════ */

.bgp-nav { background: var(--bgp-nav-bg); border-bottom: 1px solid var(--bgp-line); }
.bgp-nav .bgp-wrap { position: relative; }
.bgp-nav-in { gap: 4px; }
.bgp-tab { gap: 8px; padding: 16px 16px 14px; font-size: 14px; }
.bgp-tab .gd-i { opacity: 1; transform: none; color: var(--faint); transition: color .18s var(--ease); }
.bgp-tab:hover .gd-i, .bgp-tab.is-on .gd-i { color: var(--red); }
.bgp-nav .bgd-tabs-ink { height: 3px; }

/* ═══ BODY ════════════════════════════════════════════════════════════════ */

.bgp-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--bgp-side);
    gap: var(--bgp-gap); align-items: stretch;
    padding: 26px 0 72px;
}
.bgp-main { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.bgp-side { min-width: 0; }
.bgp-side-in { gap: 18px; }

.bgp-row { display: grid; gap: 22px; }
.bgp-row-about { grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr); align-items: start; }
.bgp-row-about:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 1fr); }

/* ═══ CARD ════════════════════════════════════════════════════════════════ */

.bgp-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--bgp-line); border-radius: var(--bgp-r);
    box-shadow: var(--bgp-e);
    scroll-margin-top: calc(var(--bgd-sticky, 0px) + 84px);
    transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.bgp-card:hover { box-shadow: var(--bgp-e-hover); }
.bgp-card-h { display: flex; align-items: center; gap: 12px; padding: 20px 22px 14px; }
.bgp-card-m {
    display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px;
    border-radius: 8px; background: var(--red); color: #fff;
}
.bgp-card-m.is-bar { width: 4px; flex-basis: 4px; height: 22px; border-radius: 3px; }
.bgp-card-hb { min-width: 0; }
.bgp-card-h h2 { margin: 0; font-size: 17.5px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.bgp-card-x { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 550; }
.bgp-more {
    margin-left: auto; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 2px; font-size: 13px; font-weight: 750; color: var(--red); white-space: nowrap;
}
.bgp-more-n { font-weight: 700; color: var(--red); }
.bgp-more .gd-i { transition: transform .2s var(--ease); }
.bgp-more:hover .gd-i { transform: translateX(3px); }
.bgp-more.is-quiet { color: var(--muted); font-weight: 700; }
.bgp-card-b { padding: 0 22px 22px; }
.bgp-card-b.is-flush { padding: 0; }

.bgp-sub-h {
    display: flex; align-items: center; gap: 7px; margin: 0 0 12px;
    font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.bgp-sub-h .gd-i { color: var(--red); }
.bgp-sub-h > span { color: var(--muted); font-weight: 700; }

.bgp-empty { margin: 0; padding: 14px; border-radius: 10px; background: var(--sunken); color: var(--muted); font-size: 13.5px; font-weight: 600; text-align: center; }
.bgp-sub-more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: none; color: var(--red); }
.bgp-info-nobuy { flex: 1 1 auto; margin: 0; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--sunken); color: var(--muted); font-size: 13px; font-weight: 650; }
.bgp-ed-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12.5px; font-weight: 750; color: var(--red); }
.bgp-ed-more .gd-i { transition: transform .2s var(--ease); }
.bgp-ed-more[aria-expanded="true"] .gd-i { transform: rotate(180deg); }

.bgp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bgp-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; border-radius: 9px;
    background: var(--sunken); border: 1px solid transparent; color: var(--ink);
    font-size: 12.5px; font-weight: 700; line-height: 1;
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.bgp-chip > span { color: var(--muted); font-weight: 650; }
.bgp-chip:hover { background: var(--red-soft); color: var(--red); }
.bgp-chip.is-on { background: var(--surface); border-color: var(--red); color: var(--red); }
.bgp-chip.is-on > span { color: var(--red); }

/* The community-review child keeps its own classes; only its shell is
   restated so it sits in this page like every other card. */
.bgp .bgd-card { border-radius: var(--bgp-r); border-color: var(--bgp-line); box-shadow: var(--bgp-e); }
.bgp .bgd-card:hover { box-shadow: var(--bgp-e-hover); border-color: var(--bgp-line); }
.bgp .bgd-card-h .bgd-card-m { background: var(--red); color: #fff; border-radius: 8px; width: 28px; height: 28px; flex-basis: 28px; }
.bgp .bgd-card-h h2 { font-size: 17.5px; letter-spacing: -.015em; text-transform: none; }
.bgp-community { scroll-margin-top: calc(var(--bgd-sticky, 0px) + 84px); }

/* ═══ ABOUT ═══════════════════════════════════════════════════════════════ */

.bgp-prose { max-width: none; font-size: 15px; line-height: 1.75; }
.bgp-clamp[data-open="false"] .bgd-clamp-b {
    max-height: 9.6em; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.bgp-readmore {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    font-size: 13.5px; font-weight: 800; color: var(--red);
}
.bgp-readmore .gd-i { transition: transform .2s var(--ease); }
.bgp-readmore:hover .gd-i { transform: translateX(3px); }

/* ═══ EDITORIAL HIGHLIGHT ═════════════════════════════════════════════════ */

.bgp-editorial { background: var(--bgp-tint); border-color: var(--bgp-tint-line); }
.bgp-ed { display: flex; flex-direction: column; gap: 12px; }
.bgp-ed-top { display: flex; align-items: center; gap: 14px; }
.bgp-ed-logo {
    display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px;
    border-radius: 12px; background: var(--surface); border: 1px solid var(--bgp-tint-line); overflow: hidden;
}
.bgp-ed-logo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.bgp-ed-logo.is-mono { font-size: 15px; font-weight: 900; letter-spacing: .02em; color: var(--red); }
.bgp-ed-score { display: flex; flex-direction: column; min-width: 0; }
.bgp-ed-score b { font-size: 26px; font-weight: 900; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.bgp-ed-score span { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.bgp-ed-stars { position: relative; display: inline-block; height: 14px; margin-top: 6px; line-height: 0; }
.bgp-ed-stars i { display: inline-flex; gap: 2px; }
.bgp-ed-stars-bg { color: var(--line); }
.bgp-ed-stars-bg .gd-i { fill: currentColor; stroke: none; }
.bgp-ed-stars-on { position: absolute; inset: 0; width: var(--bgp-fill, 0%); overflow: hidden; color: #F2B01E; white-space: nowrap; }
.bgp-ed-stars-on .gd-i { fill: currentColor; stroke: none; }
.bgp-ed-quote {
    margin: 0; font-size: 15px; line-height: 1.6; font-weight: 600; color: var(--ink); font-style: italic;
}
.bgp-ed-title { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.bgp-ed-meta { display: flex; flex-direction: column; gap: 2px; }
.bgp-ed-src { font-size: 14px; font-weight: 800; color: var(--ink); }
.bgp-ed-type { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.bgp-ed-verified { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; font-weight: 800; color: var(--ok); }
.bgp-ed-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--red); }
.bgp-ed-link .gd-i { transition: transform .2s var(--ease); }
.bgp-ed-link:hover .gd-i { transform: translateX(3px); }
.bgp-ed-others { margin: 4px 0 0; padding: 10px 0 0; list-style: none; border-top: 1px solid var(--bgp-tint-line); display: flex; flex-direction: column; gap: 6px; }
.bgp-ed-others li { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.bgp-ed-others-src { font-weight: 750; color: var(--ink); }
.bgp-ed-others-type { color: var(--muted); font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgp-ed-others-score { font-weight: 900; color: var(--ink); white-space: nowrap; }
a.bgp-ed-others-score:hover { color: var(--red); }

/* ═══ KEY FEATURES ════════════════════════════════════════════════════════ */

.bgp-feat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
    gap: 12px; margin: 0; padding: 0; list-style: none;
}
.bgp-feat a {
    display: flex; align-items: center; gap: 12px; height: 100%;
    padding: 14px; border-radius: var(--bgp-r-sm);
    border: 1px solid var(--bgp-line); background: var(--surface);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.bgp-feat a:hover { border-color: var(--red-line); box-shadow: var(--bgp-e-hover); transform: translateY(-2px); }
.bgp-feat-i {
    display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 11px; background: var(--red-soft); color: var(--red);
}
.bgp-feat-b { display: flex; flex-direction: column; min-width: 0; }
.bgp-feat-b b { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.bgp-feat-b span { margin-top: 3px; font-size: 12.5px; color: var(--muted); font-weight: 550; line-height: 1.4; }
.bgp-feat-all { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }

/* ═══ MEDIA GALLERY — the overview's card ═════════════════════════════════ */

/* The lead sets the row's height; the four tiles stretch to fill it, two
   by two, so the block's bottom edge is straight whatever the widths. */
.bgp-mg { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
.bgp-mg.is-solo { grid-template-columns: minmax(0, 1fr); }
.bgp-mg-lead, .bgp-mg-tile {
    position: relative; display: block; width: 100%; overflow: hidden;
    border-radius: var(--bgp-r-sm); background: var(--sunken);
}
.bgp-mg-lead { aspect-ratio: 16 / 9; }
.bgp-mg.is-solo .bgp-mg-lead { aspect-ratio: 16 / 8; }
.bgp-mg-lead img, .bgp-mg-tile img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s var(--ease);
}
.bgp-mg-lead:hover img, .bgp-mg-tile:hover img { transform: scale(1.04); }
.bgp-mg-lead::after, .bgp-mg-tile:not(.has-more)::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55) 100%);
    opacity: 0; transition: opacity .3s var(--ease);
}
.bgp-mg-lead:hover::after, .bgp-mg-tile:hover::after { opacity: 1; }
.bgp-mg-lead::after { opacity: 1; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .62) 100%); }
.bgp-mg-cap {
    position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1;
    display: flex; flex-direction: column; gap: 2px; text-align: left; color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.bgp-mg-cap b { font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.bgp-mg-cap span { font-size: 13px; font-weight: 600; opacity: .85; }
.bgp-mg-zoom {
    position: absolute; top: 12px; right: 12px; z-index: 1;
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(0, 0, 0, .5); color: #fff; opacity: 0; transition: opacity .2s var(--ease);
}
.bgp-mg-lead:hover .bgp-mg-zoom, .bgp-mg-lead:focus-visible .bgp-mg-zoom { opacity: 1; }
.bgp-mg-tiles { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 0; }
.bgp-mg-tile { min-height: 0; }
.has-more img { filter: brightness(.38) saturate(.7); }
.bgp-mg-more {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: #fff; text-align: center; padding: 6px;
}
.bgp-mg-more b { font-size: 26px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.bgp-mg-more span { font-size: 12.5px; font-weight: 700; opacity: .9; }

.bgp-videos { margin-top: 18px; }
.bgp-video-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 12px; margin: 0; padding: 0; list-style: none;
}
.bgp-video { min-width: 0; }
.bgp-video-b {
    position: relative; display: block; width: 100%; overflow: hidden;
    aspect-ratio: 16 / 9; border-radius: var(--bgp-r-sm); background: var(--dark-2);
}
.bgp-video-b img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.bgp-video-b:hover img { transform: scale(1.04); }
.bgp-video-blank { position: absolute; inset: 0; background: linear-gradient(135deg, #1B2029, #0B0E13); }
.bgp-video-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    background: var(--red); color: #fff; box-shadow: var(--e-red);
    transition: transform .25s var(--spring);
}
.bgp-video-b:hover .bgp-video-play { transform: translate(-50%, -50%) scale(1.08); }
.bgp-video-t { display: flex; flex-direction: column; margin-top: 8px; min-width: 0; }
.bgp-video-t b {
    font-size: 13.5px; font-weight: 750; color: var(--ink);
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bgp-video-t span { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ═══ MEDIA HUB — /games/{slug}/media ═════════════════════════════════════ */

/* Two cards: the category rail, pinned while the rows scroll, beside one
   row per category. Full width — the hub has no sidebar. */
.bgp-hub-layout { padding: 26px 0 72px; }
.bgp-mh { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--bgp-gap); align-items: start; }
.bgp-mh-rail {
    position: sticky; top: calc(var(--bgd-sticky, 0px) + 84px);
    display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 20px 14px 16px;
}
.bgp-mh-rail-t { padding: 0 6px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.bgp-mh-rail-t h2 {
    position: relative; margin: 0; padding-left: 12px;
    font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--ink);
}
.bgp-mh-rail-t h2::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 3px; background: var(--red); }
.bgp-mh-rail-t p { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 550; }
.bgp-mh-rail-h {
    margin: 0 0 6px; padding: 0 10px;
    font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.bgp-mh-cats + .bgp-mh-rail-h { margin-top: 16px; }
.bgp-mh-cats { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bgp-mh-cat, .bgp-mh-type {
    display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0;
    padding: 8px 10px; border-radius: 9px; border: 1px solid transparent;
    background: transparent; color: var(--ink); text-align: left;
    font-size: 13px; font-weight: 650; line-height: 1.2;
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.bgp-mh-cat .gd-i { flex: 0 0 auto; color: var(--muted); transition: color .18s var(--ease); }
.bgp-mh-cat > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgp-mh-cat > b { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.bgp-mh-cat:hover, .bgp-mh-type:hover { background: var(--sunken); }
.bgp-mh-cat.is-on { background: var(--red-soft); color: var(--red); border-color: var(--bgp-tint-line); }
.bgp-mh-cat.is-on .gd-i, .bgp-mh-cat.is-on > b { color: var(--red); }
.bgp-mh-types { display: flex; flex-direction: column; gap: 2px; }
.bgp-mh-type > i {
    flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid var(--line); background: var(--surface); transition: border-color .18s var(--ease);
}
.bgp-mh-type.is-on { color: var(--red); }
.bgp-mh-type.is-on > i { border-color: var(--red); border-width: 4.5px; }

.bgp-mh-body { min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: 22px; }
.bgp-mh-top { display: flex; align-items: flex-start; gap: 12px; }
.bgp-mh-top-t { min-width: 0; }
.bgp-mh-top-t h3 {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0;
    font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
}
.bgp-mh-top-t p { margin: 4px 0 0; font-size: 13px; color: var(--muted); font-weight: 550; }
.bgp-mh-row { min-width: 0; padding-top: 22px; border-top: 1px solid var(--line-soft); scroll-margin-top: calc(var(--bgd-sticky, 0px) + 84px); }
.bgp-mh-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.bgp-mh-i {
    display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px;
    border-radius: 7px; background: var(--red); color: #fff;
}
.bgp-mh-hb { min-width: 0; }
.bgp-mh-hb h3 {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: var(--ink);
}
.bgp-mh-n {
    display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px;
    border-radius: 6px; background: var(--red-soft); color: var(--red);
    font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.bgp-mh-n.is-big { height: 24px; padding: 0 9px; font-size: 12.5px; letter-spacing: 0; }
.bgp-mh-hb p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 550; }
.bgp-mh-h .bgp-more { margin-left: auto; }
.bgp-mh-row.is-open .bgp-mh-h .bgp-more .gd-i { transform: rotate(90deg); }

/* The preview: a lead two tiles wide and two tall, then the tiles, four to
   a row; the last becomes "+N more" when the category runs past them. */
.bgp-mh-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.bgp-mh-lead, .bgp-mh-tile {
    position: relative; display: block; width: 100%; min-height: 0; overflow: hidden;
    border-radius: 10px; background: var(--sunken);
}
/* The lead stretches to the two tile rows beside it; with no tiles the
   aspect ratio sizes the rows instead, so one picture is still a picture. */
.bgp-mh-lead { grid-column: span 2; grid-row: span 2; align-self: stretch; aspect-ratio: 16 / 10; }
.bgp-mh-grid.is-solo .bgp-mh-lead { grid-column: span 3; grid-row: span 1; }
.bgp-mh-tile { aspect-ratio: 16 / 10; }
.bgp-mh-lead img, .bgp-mh-tile img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s var(--ease);
}
.bgp-mh-lead:hover img, .bgp-mh-tile:hover img { transform: scale(1.04); }
.bgp-mh-lead::after, .bgp-mh-tile:not(.has-more)::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55) 100%);
    opacity: 0; transition: opacity .3s var(--ease);
}
.bgp-mh-lead:hover::after, .bgp-mh-tile:hover::after { opacity: 1; }
.bgp-mh-lead::after { opacity: 1; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .62) 100%); }
.bgp-mh-lead .bgp-mg-cap { left: 16px; right: 16px; bottom: 14px; }
.bgp-mh-lead .bgp-mg-cap b { font-size: 15px; }
.bgp-mh-lead .bgp-mg-cap span { font-size: 12px; }
.bgp-mh-lead .bgp-mg-zoom { top: 10px; right: 10px; width: 32px; height: 32px; }
.bgp-mh-lead:hover .bgp-mg-zoom, .bgp-mh-lead:focus-visible .bgp-mg-zoom { opacity: 1; }
.bgp-mh-tile .bgp-mg-more b { font-size: 24px; }
.bgp-mh-tile .bgp-mg-more span { font-size: 11.5px; }

/* Portrait categories keep their shape: covers are 2:3 by rule. */
.bgp-mh-grid.is-cover .bgp-mh-tile, .bgp-mh-grid.is-cover .bgp-mh-lead { aspect-ratio: 2 / 3; }
.bgp-mh-grid.is-cover.is-solo .bgp-mh-lead { grid-column: span 2; }
/* Logos are transparent marks: a dark stage and no crop. */
.bgp-mh-grid.is-logo .bgp-mh-lead, .bgp-mh-grid.is-logo .bgp-mh-tile,
.bgp-gallery-grid.is-logo .bgp-gallery-item > button {
    background:
        linear-gradient(45deg, rgba(255, 255, 255, .06) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .06) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, .06) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .06) 75%),
        #1B2029;
    background-size: 18px 18px, 18px 18px, auto; background-position: 0 0, 9px 9px, 0 0;
}
.bgp-mh-grid.is-logo img, .bgp-gallery-grid.is-logo img { object-fit: contain; padding: 10%; }
.bgp-mh-grid.is-logo .bgp-mh-lead::after, .bgp-mh-grid.is-logo .bgp-mh-tile::after { display: none; }

/* Video cards, five to a row: the poster, the title, the type. */
.bgp-mh-videos {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px; margin: 0; padding: 0; list-style: none;
}
.bgp-mh-videos .bgp-video-play { width: 42px; height: 42px; }
.bgp-mh-videos .bgp-video-t { margin-top: 7px; }
.bgp-mh-videos .bgp-video-t b { font-size: 13px; }
.bgp-mh-videos .bgp-video-t span { font-size: 11.5px; }

/* The full grid, per category. */
.bgp-mh-all { margin-top: 2px; }
.bgp-gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
    gap: 8px; margin: 0; padding: 0; list-style: none;
}
.bgp-gallery-grid.is-cover { grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); }
.bgp-gallery-grid.is-video { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px; }
.bgp-gallery-item { min-width: 0; }
.bgp-gallery-item > button, .bgp-gallery-item > a {
    position: relative; display: block; width: 100%; overflow: hidden;
    aspect-ratio: 16 / 10; border-radius: 10px; background: var(--sunken);
}
.bgp-gallery-grid.is-cover .bgp-gallery-item > button { aspect-ratio: 2 / 3; }
.bgp-gallery-grid.is-video .bgp-gallery-item > button, .bgp-gallery-grid.is-video .bgp-gallery-item > a { aspect-ratio: 16 / 9; background: var(--dark-2); }
.bgp-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.bgp-gallery-item > :hover img { transform: scale(1.05); }
.bgp-gallery-kind {
    position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px);
    padding: 3px 8px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.bgp-gallery-item.is-video .bgp-video-play { width: 38px; height: 38px; }
.bgp-gallery-more { display: flex; justify-content: center; margin-top: 16px; }

/* ═══ GAME DETAILS ════════════════════════════════════════════════════════ */

/* One group at a time: chips switch the panel; every panel is in the
   markup, and a panel's rows flow two-up where there is room. */
.bgp-spec-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.bgp-spec-tabs .bgp-chip { gap: 6px; }
.bgp-spec-tabs .bgp-chip .gd-i { color: var(--muted); }
.bgp-spec-tabs .bgp-chip.is-on .gd-i { color: var(--red); }
.bgp-spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 22px 28px; }
.bgp-spec + .bgp-spec { margin-top: 22px; }
.bgp-spec-tabs ~ .bgp-spec .bgp-sub-h { display: none; }
.bgp-spec-l { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px 28px; }
.bgp-spec-r { min-width: 0; }
.bgp-spec-r dt { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.bgp-spec-r dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bgp-spec-v {
    display: inline-flex; flex-direction: column;
    padding: 6px 10px; border-radius: 8px; background: var(--sunken);
    font-size: 13px; font-weight: 650; color: var(--ink); line-height: 1.35;
    max-width: 100%;
}
.bgp-spec-v a:hover { color: var(--red); }
.bgp-spec-v small { font-size: 11.5px; font-weight: 600; color: var(--muted); }

/* ═══ CREDITS ═════════════════════════════════════════════════════════════ */

.bgp-cred-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
    gap: 10px; margin: 0; padding: 0; list-style: none;
}
.bgp-cred { min-width: 0; }
.bgp-cred-in {
    display: flex; align-items: flex-start; gap: 12px; height: 100%;
    padding: 12px; border-radius: 12px; border: 1px solid var(--bgp-line); background: var(--surface);
    color: var(--ink); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
a.bgp-cred-in:hover { border-color: var(--red-line); box-shadow: var(--bgp-e-hover); transform: translateY(-2px); }
.bgp-cred-pic {
    flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
    background: var(--sunken); display: grid; place-items: center;
}
.bgp-cred-pic img { width: 100%; height: 100%; object-fit: cover; }
.bgp-cred-pic.is-blank { background: linear-gradient(135deg, #1B2029, #0B0E13); color: #fff; }
.bgp-cred-pic.is-blank b { font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.bgp-cred-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bgp-cred-n { font-size: 14px; font-weight: 800; letter-spacing: -.01em; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bgp-cred-lead {
    font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 5px; background: var(--red-soft); color: var(--red);
}
.bgp-cred-as { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.bgp-cred-r { font-size: 12.5px; font-weight: 700; color: var(--red); }
.bgp-cred-c { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.bgp-cred-d { font-size: 11.5px; font-weight: 600; color: var(--muted); }

/* ═══ AGE RATINGS (sidebar) ═══════════════════════════════════════════════ */

.bgp-rating-l { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bgp-rating { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.bgp-rating-m {
    flex: 0 0 46px; width: 46px; height: 46px; border-radius: 10px;
    display: grid; place-items: center; background: var(--dark); color: #fff;
}
.bgp-rating-m b { font-size: 11px; font-weight: 900; letter-spacing: .04em; text-align: center; padding: 0 3px; line-height: 1.1; }
.bgp-rating-b { min-width: 0; flex: 1 1 auto; }
.bgp-rating-t { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--ink); }
.bgp-rating-t a:hover { color: var(--red); }
.bgp-rating-uv {
    font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 5px; background: var(--sunken); color: var(--muted);
}
.bgp-rating-s { margin: 1px 0 0; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.bgp-rating-d { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.bgp-rating-d li { font-size: 11px; font-weight: 700; color: var(--ink); padding: 3px 7px; border-radius: 6px; background: var(--sunken); }
.bgp-rating-loose { margin: 12px 0 0; font-size: 12px; color: var(--muted); font-weight: 600; }

/* ═══ EDITIONS ════════════════════════════════════════════════════════════ */

.bgp-ed-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 12px; margin: 0; padding: 0; list-style: none;
}
.bgp-edition {
    display: flex; gap: 12px; padding: 14px;
    border: 1px solid var(--bgp-line); border-radius: var(--bgp-r-sm); background: var(--surface);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bgp-edition:hover { border-color: var(--red-line); box-shadow: var(--bgp-e-hover); }
.bgp-edition.is-off { opacity: .7; }
/* align-self, or the flex row stretches the art to the card's height and the 2:3 cover is cropped to a sliver. */
.bgp-edition-art { flex: 0 0 62px; width: 62px; align-self: flex-start; aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: var(--sunken); }
.bgp-edition-art img { width: 100%; height: 100%; object-fit: cover; }
.bgp-edition-blank { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(160deg, #1B2029, #0B0E13); color: #fff; font-size: 22px; font-weight: 900; }
.bgp-edition-b { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bgp-edition-b h3 { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.bgp-edition-type { margin: 2px 0 0; font-size: 12px; font-weight: 650; color: var(--muted); }
.bgp-edition-c { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--body); }
.bgp-edition-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.bgp-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.bgp-price b { font-size: 17px; font-weight: 900; color: var(--ink); letter-spacing: -.02em; }
.bgp-price s { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.bgp-price em { font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: var(--ok); padding: 2px 6px; border-radius: 5px; }
.bgp-price-na { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.bgp-compare { margin-top: 16px; }
.bgp-ed-all { margin: 14px 0 0; display: flex; justify-content: flex-end; }
.bgp-table-wrap { overflow-x: auto; border: 1px solid var(--bgp-line); border-radius: var(--bgp-r-sm); }
.bgp-table { min-width: 720px; font-size: 13px; }
.bgp-table th, .bgp-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.bgp-table thead th { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--sunken); }
.bgp-table tbody th { font-weight: 800; color: var(--ink); white-space: nowrap; }
.bgp-table tbody tr:last-child > * { border-bottom: 0; }

/* ═══ RELATED GAMES ═══════════════════════════════════════════════════════ */

.bgp-rail-wrap { position: relative; }
.bgp-rail {
    display: flex; gap: 14px; margin: 0; padding: 4px 2px 8px; list-style: none;
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.bgp-rail::-webkit-scrollbar { display: none; }
.bgp-rc { flex: 0 0 156px; scroll-snap-align: start; }
.bgp-rc a { display: flex; flex-direction: column; gap: 8px; }
.bgp-rc-art {
    position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden;
    border-radius: var(--bgp-r-sm); background: var(--sunken); box-shadow: var(--bgp-e);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bgp-rc a:hover .bgp-rc-art { transform: translateY(-3px); box-shadow: var(--bgp-e-hover); }
.bgp-rc-art img { width: 100%; height: 100%; object-fit: cover; }
.bgp-rc-logo { display: grid; place-items: center; width: 100%; height: 100%; padding: 16px; background: linear-gradient(160deg, #1B2029, #0B0E13); }
.bgp-rc-logo img { object-fit: contain; }
.bgp-rc-blank { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(160deg, #1B2029, #0B0E13); color: #fff; font-size: 40px; font-weight: 900; }
.bgp-rc-score {
    position: absolute; left: 8px; top: 8px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 7px;
    background: rgba(0, 0, 0, .62); color: #fff; font-size: 11.5px; font-weight: 800;
}
.bgp-rc-score .gd-i { color: #F2B01E; fill: #F2B01E; }
.bgp-rc-t { font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.bgp-rc a:hover .bgp-rc-t { color: var(--red); }
.bgp-rc-g { font-size: 12px; font-weight: 650; color: var(--muted); }
.bgp-rail-btn {
    position: absolute; top: 34%; z-index: 2;
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--bgp-line); box-shadow: var(--e2); color: var(--ink);
}
.bgp-rail-btn:hover { color: var(--red); }
.bgp-rail-btn.is-prev { left: -10px; }
.bgp-rail-btn.is-next { right: -10px; }

/* ═══ SIDEBAR — information card ══════════════════════════════════════════ */

.bgp-info { overflow: hidden; }
.bgp-cover {
    position: relative; isolation: isolate;
    display: flex; justify-content: center; padding: 22px;
    background: var(--dark-2);
}
/* The cover itself, blurred, is the stage behind the portrait — the same
   request, drawn twice, no second file. */
.bgp-cover::before {
    content: ''; position: absolute; inset: -20px; z-index: -1;
    background: var(--bgp-cover-bg) center / cover no-repeat;
    filter: blur(28px) saturate(1.2) brightness(.55);
}
.bgp-cover img, .bgp-cover-blank {
    display: block; width: 58%; max-width: 190px; height: auto; aspect-ratio: 2 / 3;
    border-radius: 10px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
    object-fit: cover;
}
.bgp-cover-blank { display: grid; place-items: center; background: linear-gradient(160deg, #262C37, #0B0E13); color: #fff; font-size: 48px; font-weight: 900; }
.bgp-info-b { padding: 16px 18px 18px; }
.bgp-info-cta { display: flex; gap: 8px; }
.bgp-buy { flex: 1 1 auto; justify-content: center; }
.bgp-buy-p { margin-left: 6px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .35); font-weight: 800; }
.bgp-buy-p s { margin-left: 5px; font-weight: 600; opacity: .8; font-size: 12px; }
.bgp-info-fav { flex: 0 0 auto; }
.bgp-info-fav.is-on .gd-i { fill: var(--red-lit); stroke: var(--red-lit); }
.bgp-info-store { margin: 8px 0 0; font-size: 12px; font-weight: 650; color: var(--muted); text-align: center; }
.bgp-info-store em { font-style: normal; color: var(--ok); font-weight: 800; }
.bgp-info-l { margin: 14px 0 0; display: flex; flex-direction: column; }
.bgp-info-r { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.bgp-info-r:first-child { border-top: 0; }
.bgp-info-r dt { flex: 0 0 104px; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.bgp-info-r dd { margin: 0; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.bgp-info-r dd a:hover { color: var(--red); }

/* ═══ SIDEBAR — available on ══════════════════════════════════════════════ */

.bgp-plat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bgp-plat {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 74px; padding: 10px 6px; border-radius: var(--bgp-r-sm);
    border: 1px solid var(--bgp-line); background: var(--surface); text-align: center;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.bgp-plat:hover { border-color: var(--red-line); box-shadow: var(--bgp-e-hover); transform: translateY(-2px); }
.bgp-plat-i { display: grid; place-items: center; width: 26px; height: 26px; }
.bgp-plat-i .bgp-plat-img { width: 24px; height: 24px; }
.bgp-plat-n { font-size: 12px; font-weight: 750; color: var(--ink); line-height: 1.2; }
.bgp-plat-s { font-size: 10.5px; font-weight: 700; color: var(--warn); }

/* ═══ SIDEBAR — system requirements ═══════════════════════════════════════ */

.bgp-req-plats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bgp-req-for { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.bgp-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.bgp-tier {
    flex: 1 1 auto; min-width: 0;
    padding: 9px 8px; border-radius: 9px;
    border: 1px solid var(--bgp-line); background: var(--sunken);
    font-size: 12.5px; font-weight: 750; color: var(--muted); text-align: center; white-space: nowrap;
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.bgp-tier:hover { color: var(--ink); }
.bgp-tier.is-on { background: var(--surface); border-color: var(--red); color: var(--red); }
.bgp-tier.is-empty { opacity: .55; }
.bgp-req-l { margin: 0; display: flex; flex-direction: column; }
.bgp-req-r { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.bgp-req-r:first-child { border-top: 0; }
.bgp-req-r dt { flex: 0 0 96px; font-size: 12.5px; font-weight: 800; color: var(--ink); }
.bgp-req-r dd { margin: 0; min-width: 0; font-size: 12.5px; color: var(--body); line-height: 1.5; overflow-wrap: anywhere; }
.bgp-req-notes { margin: 12px 0 0; padding: 12px 0 0; list-style: none; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; }
.bgp-req-notes li { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted); }
.bgp-req-notes .gd-i { flex: 0 0 auto; margin-top: 2px; color: var(--red); }

/* ═══ SIDEBAR — languages ═════════════════════════════════════════════════ */

.bgp-lang-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bgp-lang {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px; border-radius: 10px; border: 1px solid var(--bgp-line); background: var(--surface);
}
.bgp-lang-f { display: grid; place-items: center; flex: 0 0 auto; }
.bgp-lang-f svg, .bgp-lang-f .bgd-flag { width: 24px; height: 17px; border-radius: 3px; }
.bgp-lang-n { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bgp-lang-n b { font-size: 12.5px; font-weight: 750; color: var(--ink); overflow-wrap: break-word; hyphens: auto; }
.bgp-lang-n span { font-size: 11px; color: var(--muted); font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
.bgp-lang-m { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.bgp-lang-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.bgp-lang-dot.is-on { background: var(--ok); }
.bgp-lang-dot.is-off { background: var(--line); }
.bgp-lang-dot.is-nv { background: transparent; border: 1.5px dashed var(--faint); }
.bgp-langs-more {
    display: block; width: 100%; margin-top: 10px; padding: 9px; border-radius: 9px;
    background: var(--sunken); color: var(--red); font-size: 12.5px; font-weight: 800;
    transition: background .18s var(--ease);
}
.bgp-langs-more:hover { background: var(--red-soft); }
.bgp-lang-key { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 11px; font-weight: 600; color: var(--muted); }

/* ═══ SIDEBAR — where to buy ══════════════════════════════════════════════ */

.bgp-store-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bgp-store {
    display: flex; align-items: center; gap: 10px; height: 100%;
    padding: 10px; border-radius: var(--bgp-r-sm);
    border: 1px solid var(--bgp-line); background: var(--surface);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.bgp-store:hover { border-color: var(--red-line); box-shadow: var(--bgp-e-hover); transform: translateY(-2px); }
.bgp-store.is-gone { opacity: .6; }
.bgp-store-i {
    display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px;
    border-radius: 9px; background: var(--sunken); color: var(--ink); overflow: hidden;
}
.bgp-store-i img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.bgp-store-i.is-mono { font-size: 14px; font-weight: 900; }
.bgp-store-b { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bgp-store-b > b { font-size: 12.5px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.bgp-store-s { font-size: 11px; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.bgp-store-s:empty { display: none; }
.bgp-store-p { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; }
.bgp-store-p b { font-size: 13.5px; font-weight: 900; color: var(--ink); }
.bgp-store-p s { font-size: 11px; color: var(--muted); }
.bgp-store-p em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted); }
.bgp-store > .gd-i { flex: 0 0 auto; color: var(--faint); }

/* ═══ SIDEBAR — share ═════════════════════════════════════════════════════ */

.bgp-share-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bgp-share-t {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%;
    padding: 12px 4px; border-radius: var(--bgp-r-sm);
    border: 1px solid var(--bgp-line); background: var(--surface);
    font-size: 11.5px; font-weight: 700; color: var(--muted);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), color .2s var(--ease);
}
.bgp-share-t:hover { border-color: var(--red-line); box-shadow: var(--bgp-e-hover); transform: translateY(-2px); color: var(--ink); }
.bgp-share-i { display: grid; place-items: center; width: 30px; height: 30px; }
.bgp-share-t.is-x .bgp-share-i { color: #0F1419; }
.bgp-share-t.is-facebook .bgp-share-i { color: #1877F2; }
.bgp-share-t.is-reddit .bgp-share-i { color: #FF4500; }
.bgp-share-t.is-whatsapp .bgp-share-i { color: #25D366; }
.bgp-share-t.is-copy .bgp-share-i, .bgp-share-t.is-native .bgp-share-i { color: var(--red); }

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════ */

/* ═══ SYSTEM REQUIREMENTS PAGE — /games/{slug}/system-requirements ════════
   One workspace under one platform selector. Every selector is written
   under `.bgp` (0,2,0): game-detail.css resets `.bgd button` at (0,1,1),
   which would otherwise strip the selector's and the tabs' faces. */

/* The overview's sidebar card: its "Full requirements" link is too wide for
   the rail beside the title, so it drops to a second line under it — the
   title must never break mid-word to make room. */
.bgp .bgp-req .bgp-card-h { flex-wrap: wrap; }
.bgp .bgp-req .bgp-card-h h2 { overflow-wrap: normal; hyphens: manual; }
.bgp .bgp-req .bgp-card-h .bgp-more { flex: 0 0 100%; margin-left: 40px; padding-top: 0; }

.bgp .bgp-rq { display: flex; flex-direction: column; gap: 22px; }

/* Header + notice */
.bgp .bgp-rq-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 20px; align-items: start; }
.bgp .bgp-rq-title { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.bgp .bgp-rq-mark { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 16px; background: var(--red); color: #fff; box-shadow: var(--e-red); }
.bgp .bgp-rq-title h2 { margin: 2px 0 0; font-size: 30px; font-weight: 900; letter-spacing: -.025em; line-height: 1.1; color: var(--ink); }
.bgp .bgp-rq-title p { margin: 8px 0 0; max-width: 640px; font-size: 14.5px; line-height: 1.55; color: var(--muted); font-weight: 550; }
.bgp .bgp-rq-notice {
    display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px;
    background: var(--sunken); border: 1px solid var(--bgp-line);
}
.bgp .bgp-rq-notice-i { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--surface); color: var(--red); border: 1px solid var(--bgp-line); }
.bgp .bgp-rq-notice p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); font-weight: 550; }
.bgp .bgp-rq-upd { display: flex; align-items: center; gap: 6px; margin-top: 8px !important; font-size: 12.5px; color: var(--muted); }
.bgp .bgp-rq-upd b { color: var(--ink); font-weight: 750; }

/* THE platform selector: one row, scrolls sideways when the game ships
   on more platforms than the row can hold; the current one in red. */
.bgp .bgp-rq-plats-w { position: relative; }
.bgp .bgp-rq-plats { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.bgp .bgp-rq-plat {
    display: inline-flex; align-items: center; gap: 10px; flex: 1 0 auto; min-width: 150px; height: 52px; padding: 0 18px;
    border-radius: 13px; border: 1px solid var(--bgp-line); background: var(--surface); color: var(--ink);
    font-size: 14px; font-weight: 800; white-space: nowrap; box-shadow: var(--bgp-e);
    transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.bgp .bgp-rq-plat:hover { border-color: var(--red-line); transform: translateY(-1px); }
.bgp .bgp-rq-plat.is-on { background: var(--red); border-color: var(--red); color: #fff; box-shadow: var(--e-red); }
.bgp .bgp-rq-plat:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red-soft), var(--bgp-e); }
.bgp .bgp-rq-plat.is-on:focus-visible { box-shadow: 0 0 0 3px rgba(229, 27, 35, .35); }
.bgp .bgp-rq-plat-i { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; }
.bgp .bgp-rq-plat-i .gd-i { fill: currentColor; }
.bgp .bgp-rq-plat .bgp-plat-img { width: 18px; height: 18px; object-fit: contain; }
.bgp .bgp-rq-plat.is-on .bgp-plat-img { filter: brightness(0) invert(1); }

/* Panel: selected-platform header, tier cards, the three info cards */
.bgp .bgp-rq-panel { display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: var(--bgp-r); background: var(--sunken); border: 1px solid var(--bgp-line); }
.bgp .bgp-rq-ph { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bgp .bgp-rq-ph-i { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; background: var(--surface); border: 1px solid var(--bgp-line); color: var(--ink); }
.bgp .bgp-rq-ph-i .gd-i { fill: currentColor; }
.bgp .bgp-rq-ph-t { min-width: 0; flex: 1 1 260px; }
.bgp .bgp-rq-ph h3 { margin: 0; font-size: 20px; font-weight: 850; letter-spacing: -.02em; color: var(--ink); }
.bgp .bgp-rq-ph p { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); font-weight: 550; }
.bgp .bgp-rq-badge, .bgp .bgp-rq-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.bgp .bgp-rq-badge.is-ok, .bgp .bgp-rq-pill.is-ok { background: rgba(21, 128, 61, .1); color: var(--ok); }
.bgp .bgp-rq-badge.is-warn, .bgp .bgp-rq-pill.is-warn { background: rgba(217, 119, 6, .12); color: #9A5300; }
.bgp .bgp-rq-badge.is-bad, .bgp .bgp-rq-pill.is-bad { background: var(--red-soft); color: var(--red); }
.bgp .bgp-rq-pill.is-dim { background: var(--sunken); color: var(--muted); border: 1px solid var(--bgp-line); }

.bgp .bgp-rq-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bgp .bgp-rq-tiers.is-1 { grid-template-columns: minmax(0, 1fr); }
.bgp .bgp-rq-tiers.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bgp .bgp-rq-tier { background: var(--surface); border: 1px solid var(--bgp-line); border-radius: var(--bgp-r); box-shadow: var(--bgp-e); overflow: hidden; }
/* A fixed header height keeps the three cards' first rows level even when one description wraps. */
.bgp .bgp-rq-tier-h { display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.bgp .bgp-rq-tier-i { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: var(--sunken); color: var(--ink); }
.bgp .bgp-rq-tier.is-recommended .bgp-rq-tier-h { background: var(--bgp-tint); }
.bgp .bgp-rq-tier.is-recommended .bgp-rq-tier-i, .bgp .bgp-rq-tier.is-ultra .bgp-rq-tier-i { background: var(--red); color: #fff; box-shadow: var(--e-red); }
.bgp .bgp-rq-tier.is-ultra .bgp-rq-tier-h { background: linear-gradient(180deg, var(--bgp-tint), var(--surface)); }
.bgp .bgp-rq-tier-h h4 { margin: 0; font-size: 17px; font-weight: 850; letter-spacing: -.015em; color: var(--ink); }
.bgp .bgp-rq-tier-h p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 550; line-height: 1.4; }
.bgp .bgp-rq-rows { margin: 0; padding: 4px 18px 10px; display: flex; flex-direction: column; }
.bgp .bgp-rq-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.bgp .bgp-rq-row:first-child { border-top: 0; }
.bgp .bgp-rq-row dt { font-size: 13px; font-weight: 800; color: var(--ink); }
.bgp .bgp-rq-row dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--body); font-weight: 550; overflow-wrap: anywhere; }
.bgp .bgp-rq-row dd small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

.bgp .bgp-rq-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    padding: 40px 20px; border-radius: var(--bgp-r); background: var(--surface); border: 1px dashed var(--line);
}
.bgp .bgp-rq-empty-i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--red-soft); color: var(--red); margin-bottom: 6px; }
.bgp .bgp-rq-empty b { font-size: 16px; font-weight: 800; color: var(--ink); }
.bgp .bgp-rq-empty span:not(.bgp-rq-empty-i) { font-size: 13.5px; color: var(--muted); font-weight: 550; }

.bgp .bgp-rq-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.bgp .bgp-rq-card { background: var(--surface); border: 1px solid var(--bgp-line); border-radius: var(--bgp-r); box-shadow: var(--bgp-e); padding: 18px; }
.bgp .bgp-rq-card > header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bgp .bgp-rq-card-i { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--red-soft); color: var(--red); }
.bgp .bgp-rq-card h4 { margin: 0; font-size: 16px; font-weight: 850; letter-spacing: -.015em; color: var(--ink); }
.bgp .bgp-rq-list { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--body); font-weight: 550; }
.bgp .bgp-rq-list li::marker { color: var(--red); }
.bgp .bgp-rq-tech { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bgp .bgp-rq-tech li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.bgp .bgp-rq-tech li .gd-i { color: var(--ok); flex: 0 0 auto; margin-top: 2px; }
.bgp .bgp-rq-tech li:not(.is-verified) .gd-i { color: var(--muted); }
.bgp .bgp-rq-tech small { font-weight: 600; color: var(--muted); }
.bgp .bgp-rq-src-n { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--ink); line-height: 1.4; }
.bgp .bgp-rq-src-n.is-none { color: var(--muted); }
.bgp .bgp-rq-src-m { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.bgp .bgp-rq-src-x { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); font-weight: 550; }
.bgp .bgp-rq-src-b {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 12px 16px;
    border-radius: 12px; background: var(--red-soft); color: var(--red); font-size: 14px; font-weight: 800; border: 1px solid var(--red-line);
    transition: background .18s var(--ease), color .18s var(--ease);
}
.bgp .bgp-rq-src-b:hover { background: var(--red); color: #fff; border-color: var(--red); }
.bgp .bgp-rq-more { margin-top: 12px; }
.bgp .bgp-rq-more summary { cursor: pointer; font-size: 12.5px; font-weight: 750; color: var(--red); list-style: none; }
.bgp .bgp-rq-more summary::-webkit-details-marker { display: none; }
.bgp .bgp-rq-more ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.bgp .bgp-rq-more li { display: flex; flex-direction: column; font-size: 13px; font-weight: 650; color: var(--ink); }
.bgp .bgp-rq-more li a { color: var(--ink); text-decoration: underline; }
.bgp .bgp-rq-more li small { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ═══ CREDITS PAGE — /games/{slug}/credits ═══════════════════════════════ */

.bgp .bgp-cr { display: flex; flex-direction: column; gap: 20px; }
.bgp .bgp-cr.is-loading .bgp-cr-table { opacity: .45; transition: opacity .15s var(--ease); }

.bgp .bgp-cr-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 20px; align-items: start; }
.bgp .bgp-cr-title { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.bgp .bgp-cr-mark { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 58px; border-radius: 16px; background: var(--red); color: #fff; box-shadow: var(--e-red); }
.bgp .bgp-cr-title h2 { margin: 4px 0 0; font-size: 30px; font-weight: 900; letter-spacing: -.025em; line-height: 1.1; color: var(--ink); }
.bgp .bgp-cr-title p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); font-weight: 550; }
.bgp .bgp-cr-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--sunken); border: 1px solid var(--bgp-line); }
.bgp .bgp-cr-notice-i { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--surface); color: var(--red); border: 1px solid var(--bgp-line); }
.bgp .bgp-cr-notice p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); font-weight: 550; }
.bgp .bgp-cr-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px !important; font-size: 12.5px; color: var(--muted); }
.bgp .bgp-cr-meta span { display: inline-flex; align-items: center; gap: 5px; }
.bgp .bgp-cr-meta b { color: var(--ink); font-weight: 750; }
.bgp .bgp-cr-meta .is-ok { color: var(--ok); font-weight: 700; }
.bgp .bgp-cr-meta .is-dim { color: var(--muted); font-weight: 650; }

.bgp .bgp-cr-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-cr-stats li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--bgp-line); box-shadow: var(--bgp-e); }
.bgp .bgp-cr-stat-i { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--red-soft); color: var(--red); }
.bgp .bgp-cr-stat-i.is-lead { background: rgba(245, 165, 36, .14); color: #B7791F; }
.bgp .bgp-cr-stats b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bgp .bgp-cr-stats span:not(.bgp-cr-stat-i) { font-size: 12.5px; font-weight: 700; color: var(--muted); }

.bgp .bgp-cr-dir { background: var(--surface); border: 1px solid var(--bgp-line); border-radius: var(--bgp-r); box-shadow: var(--bgp-e); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.bgp .bgp-cr-tools { display: flex; flex-direction: column; gap: 10px; }
.bgp .bgp-cr-search { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; border: 1px solid var(--bgp-line); border-radius: 12px; background: var(--sunken); color: var(--muted); }

.bgp .bgp-cr-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); }
.bgp .bgp-cr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bgp .bgp-cr-sel { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.bgp .bgp-cr-sel select {
    height: 40px; padding: 0 34px 0 12px; border-radius: 10px; border: 1px solid var(--bgp-line); background: var(--surface); font: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
    appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 240px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23656D79' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
}
.bgp .bgp-cr-sel select:focus-visible { outline: none; }
.bgp .bgp-cr-sel.is-sort { margin-left: auto; }
.bgp .bgp-cr-clear { font-size: 12.5px; font-weight: 750; color: var(--red); padding: 8px 6px; }


.bgp .bgp-cr-tablew { overflow-x: auto; }
.bgp .bgp-cr-table { width: 100%; border-collapse: collapse; }
.bgp .bgp-cr-table th { padding: 10px 12px; text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--sunken); border-bottom: 1px solid var(--bgp-line); white-space: nowrap; }
.bgp .bgp-cr-table th:first-child { border-radius: 10px 0 0 10px; }
.bgp .bgp-cr-table th:last-child { border-radius: 0 10px 10px 0; }
.bgp .bgp-cr-table td { padding: 12px; vertical-align: middle; font-size: 13.5px; color: var(--body); font-weight: 550; border-bottom: 1px solid var(--line-soft); }
.bgp .bgp-cr-table tbody tr:hover td { background: var(--sunken); }
.bgp .bgp-cr-person { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.bgp .bgp-cr-avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; object-fit: cover; background: var(--sunken); border: 1px solid var(--bgp-line); }
.bgp .bgp-cr-avatar.is-mono { display: grid; place-items: center; font-size: 13px; font-weight: 900; color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
.bgp .bgp-cr-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bgp .bgp-cr-who a, .bgp .bgp-cr-who b { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.bgp .bgp-cr-who a:hover { color: var(--red); }
.bgp .bgp-cr-sub { font-size: 12px; color: var(--muted); font-weight: 600; }
.bgp .bgp-cr-sub.is-char { color: var(--red); }
.bgp .bgp-cr-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-cr-chips li { padding: 4px 9px; border-radius: 7px; background: var(--sunken); border: 1px solid var(--bgp-line); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.bgp .bgp-cr-cos { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-cr-cos li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.bgp .bgp-cr-cos a { color: var(--ink); font-weight: 700; }
.bgp .bgp-cr-cos a:hover { color: var(--red); }
.bgp .bgp-cr-logo { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 7px; object-fit: contain; background: var(--surface); border: 1px solid var(--bgp-line); }
.bgp .bgp-cr-logo.is-mono { display: grid; place-items: center; font-size: 10px; font-weight: 900; color: var(--muted); background: var(--sunken); }
.bgp .bgp-cr-types { display: flex; flex-wrap: wrap; gap: 5px; }
.bgp .bgp-cr-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; background: var(--sunken); color: var(--ink); border: 1px solid var(--bgp-line); white-space: nowrap; }
.bgp .bgp-cr-pill.is-lead { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.bgp .bgp-cr-ver { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 750; white-space: nowrap; }
.bgp .bgp-cr-ver.is-ok { color: var(--ok); }
.bgp .bgp-cr-ver.is-warn { color: #9A5300; }
.bgp .bgp-cr-ver.is-bad { color: var(--red); }
.bgp .bgp-cr-ver.is-dim { color: var(--muted); }
.bgp .bgp-cr-dash { color: var(--faint); }

.bgp .bgp-cr-none, .bgp .bgp-cr-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 40px 20px; border-radius: 14px; border: 1px dashed var(--line); background: var(--surface); }
.bgp .bgp-cr-empty-i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--red-soft); color: var(--red); margin-bottom: 6px; }
.bgp .bgp-cr-none b, .bgp .bgp-cr-empty b { font-size: 16px; font-weight: 800; color: var(--ink); }
.bgp .bgp-cr-none span, .bgp .bgp-cr-empty span:not(.bgp-cr-empty-i) { font-size: 13.5px; color: var(--muted); font-weight: 550; }

.bgp .bgp-cr-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.bgp .bgp-cr-count { margin: 0; font-size: 13px; font-weight: 650; color: var(--muted); }
.bgp .bgp-cr-pager { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bgp .bgp-cr-pages { display: flex; align-items: center; gap: 6px; }
.bgp .bgp-cr-page { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--bgp-line); background: var(--surface); font-size: 13px; font-weight: 750; color: var(--ink); }
.bgp .bgp-cr-page:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.bgp .bgp-cr-page.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.bgp .bgp-cr-page:disabled { opacity: .4; cursor: default; }
.bgp .bgp-cr-page:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red-soft); }
.bgp .bgp-cr-gap { padding: 0 2px; color: var(--muted); font-weight: 800; }
.bgp .bgp-cr-sel.is-per select { height: 36px; }

/* ═══ EDITIONS PAGE — /games/{slug}/editions ═════════════════════════════
   One card per edition (the collection decides how many), the comparison
   table, then the notes / stores / related row. `bgp-eh-` throughout,
   every rule under .bgp so the sheet's own button reset never wins. */

.bgp .bgp-eh { display: flex; flex-direction: column; gap: 20px; }

.bgp .bgp-eh-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 20px; align-items: start; }
.bgp .bgp-eh-title { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.bgp .bgp-eh-mark { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 58px; border-radius: 16px; background: var(--red); color: #fff; box-shadow: var(--e-red); }
.bgp .bgp-eh-title h2 { margin: 4px 0 0; font-size: 30px; font-weight: 900; letter-spacing: -.025em; line-height: 1.1; color: var(--ink); }
.bgp .bgp-eh-title p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); font-weight: 550; }
.bgp .bgp-eh-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--sunken); border: 1px solid var(--bgp-line); }
.bgp .bgp-eh-notice-i { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--surface); color: var(--red); border: 1px solid var(--bgp-line); }
.bgp .bgp-eh-notice p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); font-weight: 550; }
.bgp .bgp-eh-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px !important; font-size: 12.5px; color: var(--muted); }
.bgp .bgp-eh-meta span { display: inline-flex; align-items: center; gap: 5px; }
.bgp .bgp-eh-meta b { color: var(--ink); font-weight: 750; }
.bgp .bgp-eh-meta .is-ok { color: var(--ok); font-weight: 700; }
.bgp .bgp-eh-meta .is-dim { color: var(--muted); font-weight: 650; }

.bgp .bgp-eh-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 48px 20px; border-radius: 14px; border: 1px dashed var(--line); background: var(--surface); }
.bgp .bgp-eh-empty-i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--red-soft); color: var(--red); margin-bottom: 6px; }
.bgp .bgp-eh-empty b { font-size: 16px; font-weight: 800; color: var(--ink); }
.bgp .bgp-eh-empty span:not(.bgp-eh-empty-i) { font-size: 13.5px; color: var(--muted); font-weight: 550; }

/* The bar over the cards: the count, and the platform filter when the
   editions are recorded on two or more platforms. */
.bgp .bgp-eh-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bgp .bgp-eh-count { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.bgp .bgp-eh-sel { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 750; color: var(--muted); }
.bgp .bgp-eh-sel select {
    height: 40px; padding: 0 34px 0 12px; border-radius: 10px; border: 1px solid var(--bgp-line); background: var(--surface); font: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
    appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 260px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23656D79' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
}
.bgp .bgp-eh-sel select:focus-visible { outline: none; }

/* The cards. Four across on a desktop wrap; fewer editions do not stretch
   into billboards, they keep a card's width. */
/* Four across at most on a desktop wrap; fewer editions do not stretch
   into billboards, they keep a card's width. Buttons align because the
   cards stretch to the row — except while a detail panel is open, when
   the open card grows alone (`has-open`, set by the script). */
.bgp .bgp-eh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; margin: 14px 0 0; padding: 0; list-style: none; align-items: stretch; }
.bgp .bgp-eh-grid.is-few { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 340px)); }
.bgp .bgp-eh-grid.has-open { align-items: start; }
.bgp .bgp-eh-card {
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    background: var(--surface); border: 1px solid var(--bgp-line); border-radius: var(--bgp-r); box-shadow: var(--bgp-e);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.bgp .bgp-eh-card:hover { border-color: var(--red-line); box-shadow: var(--bgp-e-hover); }
.bgp .bgp-eh-card.is-off .bgp-eh-art { filter: saturate(.7); }
.bgp .bgp-eh-card:target { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft), var(--bgp-e-hover); }
.bgp .bgp-eh-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sunken); border-bottom: 1px solid var(--line-soft); }
.bgp .bgp-eh-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The fallback cover is portrait: staged whole on a dark field, never cropped to a sliver. */
.bgp .bgp-eh-art.is-cover { background: linear-gradient(160deg, #1B2029, #0B0E13); }
.bgp .bgp-eh-art.is-cover img { object-fit: contain; padding: 12px; }
.bgp .bgp-eh-blank { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(160deg, #1B2029, #0B0E13); color: #fff; font-size: 40px; font-weight: 900; }
.bgp .bgp-eh-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px; }
.bgp .bgp-eh-body h3 { margin: 0; font-size: 17px; font-weight: 850; letter-spacing: -.015em; line-height: 1.25; color: var(--ink); }
.bgp .bgp-eh-type { margin: 3px 0 0; font-size: 12.5px; font-weight: 650; color: var(--muted); }
.bgp .bgp-eh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.bgp .bgp-eh-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 7px; background: var(--sunken); border: 1px solid var(--bgp-line); font-size: 12px; font-weight: 750; color: var(--ink); }
.bgp .bgp-eh-chip.is-ok { background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .22); color: var(--ok); }
.bgp .bgp-eh-chip.is-warn { background: rgba(245, 165, 36, .14); border-color: rgba(245, 165, 36, .3); color: #9A5300; }
.bgp .bgp-eh-chip.is-info { background: rgba(37, 99, 235, .08); border-color: rgba(37, 99, 235, .2); color: #1D4ED8; }
.bgp .bgp-eh-chip.is-dim { color: var(--muted); }
.bgp .bgp-eh-chip.is-sale { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.bgp .bgp-eh-list { display: flex; flex-direction: column; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.bgp .bgp-eh-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.bgp .bgp-eh-list li .gd-i { flex: 0 0 auto; margin-top: 3px; color: var(--ok); }
.bgp .bgp-eh-list li.is-more { color: var(--muted); font-weight: 650; font-size: 12.5px; padding-left: 21px; }
.bgp .bgp-eh-facts { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; }
.bgp .bgp-eh-facts div { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.45; }
.bgp .bgp-eh-facts dt { flex: 0 0 auto; display: inline-flex; margin-top: 2px; color: var(--muted); }
.bgp .bgp-eh-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--body); }
.bgp .bgp-eh-foot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: auto; padding-top: 16px; }
.bgp .bgp-eh-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.bgp .bgp-eh-price b { font-size: 18px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); }
.bgp .bgp-eh-price s { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.bgp .bgp-eh-price em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.bgp .bgp-eh-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 16px;
    border-radius: 12px; background: var(--red-soft); color: var(--red); border: 1px solid var(--red-line); font-size: 14px; font-weight: 800;
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.bgp .bgp-eh-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
.bgp .bgp-eh-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red-soft); }
.bgp .bgp-eh-btn[aria-expanded="true"] .gd-i { transform: rotate(90deg); }
.bgp .bgp-eh-btn .gd-i { transition: transform .18s var(--ease); }
.bgp .bgp-eh-details { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 10px; }
.bgp .bgp-eh-details h4 { margin: 4px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bgp .bgp-eh-details .bgp-eh-list { margin-top: 0; }
.bgp .bgp-eh-rows { display: flex; flex-direction: column; gap: 0; margin: 0; }
.bgp .bgp-eh-rows div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.bgp .bgp-eh-rows div:first-child { border-top: 0; }
.bgp .bgp-eh-rows dt { font-weight: 800; color: var(--ink); }
.bgp .bgp-eh-rows dd { margin: 0; color: var(--body); font-weight: 550; overflow-wrap: anywhere; }
.bgp .bgp-eh-rows dd.is-ok { color: var(--ok); font-weight: 700; }
.bgp .bgp-eh-rows dd.is-dim { color: var(--muted); }
.bgp .bgp-eh-rows dd s { color: var(--muted); font-weight: 500; }
.bgp .bgp-eh-links { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-eh-links a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 9px 11px; border-radius: 10px; background: var(--sunken); border: 1px solid var(--bgp-line); font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.bgp .bgp-eh-links a:hover { border-color: var(--red-line); color: var(--red); }
.bgp .bgp-eh-links a.is-off { opacity: .7; }
.bgp .bgp-eh-links a > span { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
.bgp .bgp-eh-links a small { flex: 0 0 auto; margin-left: auto; font-size: 12.5px; font-weight: 750; color: var(--ink); white-space: nowrap; }
.bgp .bgp-eh-links a small s { color: var(--muted); font-weight: 500; }
.bgp .bgp-eh-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--body); font-weight: 550; white-space: pre-line; }

/* The comparison: the first column stays put while the editions scroll. */
.bgp .bgp-eh-tablew { overflow-x: auto; border: 1px solid var(--bgp-line); border-radius: var(--bgp-r-sm); }
.bgp .bgp-eh-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.bgp .bgp-eh-table th, .bgp .bgp-eh-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.bgp .bgp-eh-table thead th { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--sunken); text-align: center; border-bottom: 1px solid var(--bgp-line); }
.bgp .bgp-eh-table thead th:first-child { text-align: left; }
.bgp .bgp-eh-table thead th a { color: var(--ink); }
.bgp .bgp-eh-table thead th a:hover { color: var(--red); }
.bgp .bgp-eh-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 750; color: var(--ink); white-space: nowrap; min-width: 200px; border-right: 1px solid var(--line-soft); }
.bgp .bgp-eh-table tbody th .gd-i { color: var(--red); vertical-align: -2px; margin-right: 6px; }
.bgp .bgp-eh-table tbody td { text-align: center; color: var(--body); font-weight: 600; min-width: 120px; }
.bgp .bgp-eh-table tbody td b { font-weight: 850; color: var(--ink); }
.bgp .bgp-eh-table tbody td s { font-size: 12px; color: var(--muted); font-weight: 500; }
.bgp .bgp-eh-table tbody tr:last-child > * { border-bottom: 0; }
.bgp .bgp-eh-table tbody tr:hover td { background: var(--sunken); }
.bgp .bgp-eh-yes { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; }
.bgp .bgp-eh-no { color: var(--faint); font-weight: 700; }

/* Under the comparison: the editions' notes take the reading width, the
   links to the game's other pages sit beside them; whichever is alone
   takes the row, the links then laid out as tiles. */
.bgp .bgp-eh-more { display: grid; gap: 16px; align-items: start; }
.bgp .bgp-eh-more.is-both { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
.bgp .bgp-eh-more.is-one { grid-template-columns: minmax(0, 1fr); }
.bgp .bgp-eh-more .bgp-card { margin: 0; }
.bgp .bgp-eh-notes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bgp .bgp-eh-notes li { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); gap: 4px 14px; padding: 12px 14px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--bgp-line); font-size: 13.5px; line-height: 1.5; color: var(--body); font-weight: 550; }
.bgp .bgp-eh-notes b { color: var(--ink); font-weight: 800; overflow-wrap: anywhere; }
.bgp .bgp-eh-notes span { white-space: pre-line; overflow-wrap: anywhere; }
.bgp .bgp-eh-related { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-eh-related.is-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.bgp .bgp-eh-related a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--bgp-line); font-size: 13.5px; font-weight: 750; color: var(--ink); transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease); }
.bgp .bgp-eh-related a:hover { border-color: var(--red-line); color: var(--red); background: var(--surface); }
.bgp .bgp-eh-related a > span:not(.bgp-eh-related-i) { flex: 1 1 auto; }
.bgp .bgp-eh-related-i { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: var(--surface); color: var(--red); border: 1px solid var(--bgp-line); }
.bgp .bgp-eh-related a:hover .bgp-eh-related-i { background: var(--red); color: #fff; border-color: var(--red); }

/* ═══ DEVELOPMENT & OWNERSHIP PAGE — /games/{slug}/development-ownership ═══
   Section 03 as a page: developers, publishers, ownership, key people, the
   map, the timeline, the sources. `bgp-do-` throughout, every rule under
   .bgp so the sheet's own button reset never wins. */

.bgp .bgp-do { display: flex; flex-direction: column; gap: 20px; }
.bgp .bgp-do .bgp-card { margin: 0; }

.bgp .bgp-do-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 20px; align-items: start; }
.bgp .bgp-do-title { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.bgp .bgp-do-mark { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 58px; border-radius: 16px; background: var(--red); color: #fff; box-shadow: var(--e-red); }
.bgp .bgp-do-title h2 { margin: 4px 0 0; font-size: 30px; font-weight: 900; letter-spacing: -.025em; line-height: 1.1; color: var(--ink); }
.bgp .bgp-do-title p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); font-weight: 550; }
.bgp .bgp-do-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--sunken); border: 1px solid var(--bgp-line); }
.bgp .bgp-do-notice-i { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--surface); color: var(--red); border: 1px solid var(--bgp-line); }
.bgp .bgp-do-notice p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); font-weight: 550; }
.bgp .bgp-do-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px !important; font-size: 12.5px; color: var(--muted); }
.bgp .bgp-do-meta span { display: inline-flex; align-items: center; gap: 5px; }
.bgp .bgp-do-meta b { color: var(--ink); font-weight: 750; }
.bgp .bgp-do-meta .is-ok { color: var(--ok); font-weight: 700; }
.bgp .bgp-do-meta .is-dim { color: var(--muted); font-weight: 650; }

.bgp .bgp-do-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 48px 20px; border-radius: 14px; border: 1px dashed var(--line); background: var(--surface); }
.bgp .bgp-do-empty-i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--red-soft); color: var(--red); margin-bottom: 6px; }
.bgp .bgp-do-empty b { font-size: 16px; font-weight: 800; color: var(--ink); }
.bgp .bgp-do-empty span:not(.bgp-do-empty-i) { font-size: 13.5px; color: var(--muted); font-weight: 550; }
.bgp .bgp-do-none, .bgp .bgp-do-nomatch { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line); background: var(--sunken); font-size: 13.5px; font-weight: 600; color: var(--muted); }
.bgp .bgp-do-nomatch { margin-top: 10px; }

.bgp .bgp-do-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-do-stats li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--bgp-line); box-shadow: var(--bgp-e); }
.bgp .bgp-do-stat-i { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--red-soft); color: var(--red); }
.bgp .bgp-do-stats b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bgp .bgp-do-stats span:not(.bgp-do-stat-i) { display: block; font-size: 13px; font-weight: 750; color: var(--ink); }
.bgp .bgp-do-stats small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }

/* Filters over a block's cards. */
.bgp .bgp-do-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.bgp .bgp-do-sel select {
    height: 38px; padding: 0 32px 0 12px; border-radius: 10px; border: 1px solid var(--bgp-line); background: var(--surface); font: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
    appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 240px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23656D79' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 11px center;
}
.bgp .bgp-do-sel select:focus-visible { outline: none; }
.bgp .bgp-do-count { margin: 0 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* Company cards: as many as there are rows, four across on a desktop wrap. */
.bgp .bgp-do-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; align-items: stretch; }
.bgp .bgp-do-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--bgp-line); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.bgp .bgp-do-card:hover { border-color: var(--red-line); box-shadow: var(--bgp-e-hover); }
.bgp .bgp-do-co { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.bgp .bgp-do-logo { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 12px; object-fit: contain; background: var(--surface); border: 1px solid var(--bgp-line); padding: 4px; }
.bgp .bgp-do-logo.is-mono { display: grid; place-items: center; padding: 0; font-size: 15px; font-weight: 900; letter-spacing: .02em; color: rgb(var(--co)); background: rgba(var(--co), .1); border-color: rgba(var(--co), .25); }
.bgp .bgp-do-logo.is-sm { width: 40px; height: 40px; flex-basis: 40px; border-radius: 10px; font-size: 12px; }
.bgp .bgp-do-co-b { min-width: 0; }
.bgp .bgp-do-co-b h3 { margin: 0; font-size: 15px; font-weight: 850; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.bgp .bgp-do-co-b h3 a { color: inherit; }
.bgp .bgp-do-co-b h3 a:hover { color: var(--red); }
.bgp .bgp-do-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }
.bgp .bgp-do-chip { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 8px; border-radius: 7px; background: var(--sunken); border: 1px solid var(--bgp-line); font-size: 11.5px; font-weight: 750; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.bgp .bgp-do-chip.is-primary { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.bgp .bgp-do-chip.is-type { color: var(--muted); }
.bgp .bgp-do-chip.is-rel { background: var(--red-soft); border-color: var(--red-line); color: var(--red); font-size: 12px; }
.bgp .bgp-do-facts { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.bgp .bgp-do-facts div { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.45; }
.bgp .bgp-do-facts dt { flex: 0 0 auto; display: inline-flex; margin-top: 2px; color: var(--red); }
.bgp .bgp-do-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--body); }
.bgp .bgp-do-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); font-weight: 550; }
.bgp .bgp-do-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.bgp .bgp-do-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--red); }

.bgp .bgp-do-link.is-off { color: var(--muted); font-weight: 600; }
.bgp .bgp-do-ver { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.bgp .bgp-do-ver.is-ok { color: var(--ok); }
.bgp .bgp-do-ver.is-warn { color: #9A5300; }
.bgp .bgp-do-ver.is-bad { color: var(--red); }
.bgp .bgp-do-ver.is-dim { color: var(--muted); }

/* Ownership beside Key People. */
.bgp .bgp-do-row { display: grid; gap: 16px; align-items: start; }
.bgp .bgp-do-row.is-two { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); }
.bgp .bgp-do-row.is-one { grid-template-columns: minmax(0, 1fr); }
.bgp .bgp-do-own { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-do-own-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "co rel parent" "x x x"; gap: 10px 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--bgp-line); }
.bgp .bgp-do-own-co { grid-area: co; display: flex; align-items: center; gap: 10px; min-width: 0; }
.bgp .bgp-do-own-co.is-parent { grid-area: parent; }
.bgp .bgp-do-own-co b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.bgp .bgp-do-own-co a { color: inherit; }
.bgp .bgp-do-own-co a:hover { color: var(--red); }
.bgp .bgp-do-own-co small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.bgp .bgp-do-own-rel { grid-area: rel; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); }
.bgp .bgp-do-own-pct { font-size: 12px; font-weight: 800; color: var(--ink); }
.bgp .bgp-do-own-x { grid-area: x; display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px dashed var(--line); }
.bgp .bgp-do-own-x p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); font-weight: 550; }
.bgp .bgp-do-own-m { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px !important; color: var(--muted) !important; }
.bgp .bgp-do-own-m span, .bgp .bgp-do-own-m a { display: inline-flex; align-items: center; gap: 4px; }
.bgp .bgp-do-own-m a { color: var(--red); font-weight: 750; }
.bgp .bgp-do-own-row:not(:has(.is-parent)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "co rel" "x x"; }

.bgp .bgp-do-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-do-people li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--bgp-line); min-width: 0; }
.bgp .bgp-do-avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; object-fit: cover; background: var(--surface); border: 1px solid var(--bgp-line); }
.bgp .bgp-do-avatar.is-mono { display: grid; place-items: center; font-size: 13px; font-weight: 900; color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
.bgp .bgp-do-people b { display: block; font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.bgp .bgp-do-people a { color: inherit; }
.bgp .bgp-do-people a:hover { color: var(--red); }
.bgp .bgp-do-person-r { display: block; font-size: 12px; font-weight: 700; color: var(--red); }
.bgp .bgp-do-people small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }

/* Locations · Timeline · Sources: the map takes a row of its own (a world
   map in a third of the page is a postage stamp), the other two share the
   next row. */
.bgp .bgp-do-tail { display: grid; gap: 16px; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bgp .bgp-do-tail.is-1, .bgp .bgp-do-tail.has-map.is-2 { grid-template-columns: minmax(0, 1fr); }
.bgp .bgp-do-tail .bgp-do-loc { grid-column: 1 / -1; }
.bgp .bgp-do-loc-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 20px; align-items: start; }
.bgp .bgp-do-map { position: relative; border-radius: 12px; overflow: hidden; background: var(--sunken); border: 1px solid var(--bgp-line); aspect-ratio: 1080 / 435; }
.bgp .bgp-do-map img { display: block; width: 100%; height: 100%; }
.bgp .bgp-do-pin { position: absolute; width: 0; height: 0; z-index: 1; }
.bgp .bgp-do-pin:hover, .bgp .bgp-do-pin:focus-within { z-index: 3; }
.bgp .bgp-do-pin:focus-visible { outline: none; }
.bgp .bgp-do-pin-dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 2px solid var(--surface); box-shadow: 0 0 0 2px rgba(229, 27, 35, .25), 0 2px 6px rgba(0, 0, 0, .2); display: grid; place-items: center; cursor: default; transition: transform .15s var(--ease); }
.bgp .bgp-do-pin.is-many .bgp-do-pin-dot { left: -11px; top: -11px; width: 22px; height: 22px; }
.bgp .bgp-do-pin-dot b { font-size: 10px; font-weight: 900; color: #fff; line-height: 1; }
.bgp .bgp-do-pin:not(.is-exact) .bgp-do-pin-dot { background: var(--surface); border-color: var(--red); box-shadow: 0 0 0 2px rgba(229, 27, 35, .18), 0 2px 6px rgba(0, 0, 0, .15); }
.bgp .bgp-do-pin:not(.is-exact) .bgp-do-pin-dot b { color: var(--red); }
.bgp .bgp-do-pin:hover .bgp-do-pin-dot, .bgp .bgp-do-pin:focus-visible .bgp-do-pin-dot { transform: scale(1.15); }
.bgp .bgp-do-pin-tip { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); min-width: 150px; max-width: 220px; padding: 8px 10px; border-radius: 10px; background: var(--dark-2); color: #fff; font-size: 12px; line-height: 1.4; box-shadow: var(--bgp-e-hover); opacity: 0; pointer-events: none; transition: opacity .15s var(--ease); z-index: 2; }
.bgp .bgp-do-pin-tip b { display: block; font-weight: 800; }
.bgp .bgp-do-pin-tip span { display: block; opacity: .9; }
.bgp .bgp-do-pin-tip em { display: block; font-style: normal; font-size: 11px; opacity: .7; margin-top: 2px; }
.bgp .bgp-do-pin:hover .bgp-do-pin-tip, .bgp .bgp-do-pin:focus-visible .bgp-do-pin-tip, .bgp .bgp-do-pin:focus-within .bgp-do-pin-tip { opacity: 1; }
.bgp .bgp-do-pin.is-many .bgp-do-pin-tip { bottom: 18px; }
/* A marker near the top edge shows its tip below the dot, or the map's own overflow clips it. After the rules above: both `bottom`s must yield. */
.bgp .bgp-do-pin.is-top .bgp-do-pin-tip, .bgp .bgp-do-pin.is-top.is-many .bgp-do-pin-tip { bottom: auto; top: 14px; }
.bgp .bgp-do-pin.is-top.is-many .bgp-do-pin-tip { top: 18px; }
.bgp .bgp-do-countries { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-do-countries li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.bgp .bgp-do-countries li:last-child { border-bottom: 0; }
.bgp .bgp-do-countries li > span:not(.bgp-do-cdot) { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bgp .bgp-do-countries b { font-size: 12px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.bgp .bgp-do-cdot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--red); }
.bgp .bgp-do-countries li.is-dim { color: var(--muted); }
.bgp .bgp-do-countries li.is-dim .bgp-do-cdot { background: var(--line); }
.bgp .bgp-do-loc-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); font-weight: 600; }

.bgp .bgp-do-tl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.bgp .bgp-do-tl li { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 0 0 16px 22px; }
.bgp .bgp-do-tl li::before { content: ''; position: absolute; left: 5px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--red-line); }
.bgp .bgp-do-tl li::after { content: ''; position: absolute; left: 9px; top: 17px; bottom: 0; width: 2px; background: var(--line); }
.bgp .bgp-do-tl li:last-child::after { display: none; }
.bgp .bgp-do-tl li:last-child { padding-bottom: 0; }
.bgp .bgp-do-tl time { font-size: 12.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.4; }
.bgp .bgp-do-tl b { display: block; font-size: 13.5px; font-weight: 750; color: var(--ink); line-height: 1.4; }
.bgp .bgp-do-tl span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }

.bgp .bgp-do-src { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bgp .bgp-do-src li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 9px 11px; border-radius: 10px; background: var(--sunken); border: 1px solid var(--bgp-line); min-width: 0; }
.bgp .bgp-do-src li .bgp-do-ver { margin-left: auto; }
.bgp .bgp-do-src-i { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; background: var(--surface); color: var(--red); border: 1px solid var(--bgp-line); }
.bgp .bgp-do-src li > div { flex: 1 1 200px; min-width: 0; }
.bgp .bgp-do-src a, .bgp .bgp-do-src b { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 750; color: var(--ink); overflow-wrap: anywhere; }
.bgp .bgp-do-src a:hover { color: var(--red); }
.bgp .bgp-do-src small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.bgp .bgp-do-more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--red-soft); color: var(--red); font-size: 13px; font-weight: 800; border: 1px solid var(--red-line); }
.bgp .bgp-do-more:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* ═══ PLATFORMS PAGE — /games/{slug}/platforms ═══════════════════════════
   Section 09 as a page: one card per platform release, the feature matrix,
   the release timeline, the sources. `bgp-pl-` throughout, every rule
   under .bgp so the sheet's own button reset never wins. The header,
   notice, stats and select rules mirror the sibling pages on purpose. */

.bgp .bgp-pl { display: flex; flex-direction: column; gap: 20px; }
.bgp .bgp-pl .bgp-card { margin: 0; }

.bgp .bgp-pl-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 20px; align-items: start; }
.bgp .bgp-pl-title { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.bgp .bgp-pl-mark { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 58px; border-radius: 16px; background: var(--red); color: #fff; box-shadow: var(--e-red); }
.bgp .bgp-pl-title h2 { margin: 4px 0 0; font-size: 30px; font-weight: 900; letter-spacing: -.025em; line-height: 1.1; color: var(--ink); }
.bgp .bgp-pl-title p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); font-weight: 550; }
.bgp .bgp-pl-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--sunken); border: 1px solid var(--bgp-line); }
.bgp .bgp-pl-notice-i { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--surface); color: var(--red); border: 1px solid var(--bgp-line); }
.bgp .bgp-pl-notice p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); font-weight: 550; }
.bgp .bgp-pl-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px !important; font-size: 12.5px; color: var(--muted); }
.bgp .bgp-pl-meta span { display: inline-flex; align-items: center; gap: 5px; }
.bgp .bgp-pl-meta b { color: var(--ink); font-weight: 750; }
.bgp .bgp-pl-meta .is-ok { color: var(--ok); font-weight: 700; }
.bgp .bgp-pl-meta .is-dim { color: var(--muted); font-weight: 650; }

.bgp .bgp-pl-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 48px 20px; border-radius: 14px; border: 1px dashed var(--line); background: var(--surface); }
.bgp .bgp-pl-empty-i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--red-soft); color: var(--red); margin-bottom: 6px; }
.bgp .bgp-pl-empty b { font-size: 16px; font-weight: 800; color: var(--ink); }
.bgp .bgp-pl-empty span:not(.bgp-pl-empty-i) { font-size: 13.5px; color: var(--muted); font-weight: 550; }
.bgp .bgp-pl-nomatch { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line); background: var(--sunken); font-size: 13.5px; font-weight: 600; color: var(--muted); }

.bgp .bgp-pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-pl-stats li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--bgp-line); box-shadow: var(--bgp-e); }
.bgp .bgp-pl-stat-i { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--red-soft); color: var(--red); }
.bgp .bgp-pl-stats b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bgp .bgp-pl-stats span:not(.bgp-pl-stat-i) { display: block; font-size: 13px; font-weight: 750; color: var(--ink); }
.bgp .bgp-pl-stats small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }

.bgp .bgp-pl-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.bgp .bgp-pl-sel select {
    height: 38px; padding: 0 32px 0 12px; border-radius: 10px; border: 1px solid var(--bgp-line); background: var(--surface); font: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
    appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 260px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23656D79' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 11px center;
}
.bgp .bgp-pl-sel select:focus-visible { outline: none; }
.bgp .bgp-pl-count { margin: 0 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* The cards: as many as there are rows; stretched so the buttons align,
   except while a detail panel is open (has-open, set by the script). */
.bgp .bgp-pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; align-items: stretch; }
.bgp .bgp-pl-grid.has-open { align-items: start; }
.bgp .bgp-pl-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--bgp-line); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.bgp .bgp-pl-card:hover { border-color: var(--red-line); box-shadow: var(--bgp-e-hover); }
.bgp .bgp-pl-card:target { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft), var(--bgp-e-hover); }
.bgp .bgp-pl-card.is-off .bgp-pl-icon { filter: saturate(.4); opacity: .8; }
.bgp .bgp-pl-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.bgp .bgp-pl-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--bgp-line); }
.bgp .bgp-pl-icon .bgp-plat-img { width: 30px; height: 30px; object-fit: contain; }
.bgp .bgp-pl-top-b { min-width: 0; }
.bgp .bgp-pl-top-b h3 { margin: 0; font-size: 15.5px; font-weight: 850; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.bgp .bgp-pl-top-b h3 a { color: inherit; }
.bgp .bgp-pl-top-b h3 a:hover { color: var(--red); }
.bgp .bgp-pl-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }
.bgp .bgp-pl-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 8px; border-radius: 7px; background: var(--sunken); border: 1px solid var(--bgp-line); font-size: 11.5px; font-weight: 750; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.bgp .bgp-pl-chip.is-ok { background: rgba(22, 163, 74, .1); border-color: rgba(22, 163, 74, .22); color: var(--ok); }
.bgp .bgp-pl-chip.is-info { background: rgba(37, 99, 235, .08); border-color: rgba(37, 99, 235, .2); color: #1D4ED8; }
.bgp .bgp-pl-chip.is-warn { background: rgba(245, 165, 36, .14); border-color: rgba(245, 165, 36, .3); color: #9A5300; }
.bgp .bgp-pl-chip.is-bad { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.bgp .bgp-pl-chip.is-dim { color: var(--muted); }
.bgp .bgp-pl-chip.is-key { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.bgp .bgp-pl-facts { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.bgp .bgp-pl-facts div { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.45; }
.bgp .bgp-pl-facts dt { flex: 0 0 auto; display: inline-flex; margin-top: 2px; color: var(--red); }
.bgp .bgp-pl-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--body); }
.bgp .bgp-pl-feats { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-pl-feats li { padding: 3px 8px; border-radius: 7px; background: var(--surface); border: 1px solid var(--bgp-line); font-size: 11.5px; font-weight: 700; color: var(--ink); }
.bgp .bgp-pl-feats li.is-more { color: var(--muted); background: var(--sunken); }
.bgp .bgp-pl-feats.is-full li { background: var(--sunken); }
.bgp .bgp-pl-stores { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.bgp .bgp-pl-stores a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; background: var(--sunken); border: 1px solid var(--bgp-line); font-size: 12px; font-weight: 750; color: var(--ink); }
.bgp .bgp-pl-stores a:hover { border-color: var(--red-line); color: var(--red); }
.bgp .bgp-pl-stores a.is-off { opacity: .7; }
.bgp .bgp-pl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.bgp .bgp-pl-ver { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.bgp .bgp-pl-ver.is-ok { color: var(--ok); }
.bgp .bgp-pl-ver.is-warn { color: #9A5300; }
.bgp .bgp-pl-ver.is-bad { color: var(--red); }
.bgp .bgp-pl-ver.is-dim { color: var(--muted); }
.bgp .bgp-pl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: var(--red-soft); color: var(--red); border: 1px solid var(--red-line); font-size: 12.5px; font-weight: 800; transition: background .18s var(--ease), color .18s var(--ease); }
.bgp .bgp-pl-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
.bgp .bgp-pl-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red-soft); }
.bgp .bgp-pl-btn .gd-i { transition: transform .18s var(--ease); }
.bgp .bgp-pl-btn[aria-expanded="true"] .gd-i { transform: rotate(90deg); }
.bgp .bgp-pl-details { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 10px; }
.bgp .bgp-pl-details h4 { margin: 4px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bgp .bgp-pl-rows { display: flex; flex-direction: column; margin: 0; }
.bgp .bgp-pl-rows div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.bgp .bgp-pl-rows div:first-child { border-top: 0; }
.bgp .bgp-pl-rows dt { font-weight: 800; color: var(--ink); }
.bgp .bgp-pl-rows dd { margin: 0; color: var(--body); font-weight: 550; overflow-wrap: anywhere; }
.bgp .bgp-pl-rows dd.is-ok { color: var(--ok); font-weight: 700; }
.bgp .bgp-pl-rows dd.is-dim { color: var(--muted); }
.bgp .bgp-pl-rows dd small { color: var(--muted); font-weight: 600; }
.bgp .bgp-pl-rows dd a { color: var(--ink); text-decoration: underline; }
.bgp .bgp-pl-links { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-pl-links a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 9px 11px; border-radius: 10px; background: var(--sunken); border: 1px solid var(--bgp-line); font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.bgp .bgp-pl-links a:hover { border-color: var(--red-line); color: var(--red); }
.bgp .bgp-pl-links a.is-off { opacity: .7; }
.bgp .bgp-pl-links a > span { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
.bgp .bgp-pl-links a small { flex: 0 0 auto; margin-left: auto; font-size: 12.5px; font-weight: 750; color: var(--ink); white-space: nowrap; }
.bgp .bgp-pl-links a small s { color: var(--muted); font-weight: 500; }
.bgp .bgp-pl-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--body); font-weight: 550; white-space: pre-line; }
.bgp .bgp-pl-more { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 0; }
.bgp .bgp-pl-more a { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--red); }


/* The feature matrix: the feature column stays put while the platforms scroll. */
.bgp .bgp-pl-tablew { overflow-x: auto; border: 1px solid var(--bgp-line); border-radius: var(--bgp-r-sm); }
.bgp .bgp-pl-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.bgp .bgp-pl-table th, .bgp .bgp-pl-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.bgp .bgp-pl-table thead th { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--ink); background: var(--sunken); text-align: center; border-bottom: 1px solid var(--bgp-line); white-space: nowrap; }
.bgp .bgp-pl-table thead th:first-child { text-align: left; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.bgp .bgp-pl-table thead th a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.bgp .bgp-pl-table thead th a:hover { color: var(--red); }
.bgp .bgp-pl-th-i { display: inline-grid; place-items: center; }
.bgp .bgp-pl-th-i .bgp-plat-img { width: 16px; height: 16px; object-fit: contain; }
.bgp .bgp-pl-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 750; color: var(--ink); white-space: nowrap; min-width: 180px; border-right: 1px solid var(--line-soft); }
.bgp .bgp-pl-table tbody td { text-align: center; min-width: 96px; }
.bgp .bgp-pl-table tbody tr:last-child > * { border-bottom: 0; }
.bgp .bgp-pl-table tbody tr:hover td { background: var(--sunken); }
.bgp .bgp-pl-yes { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; }
.bgp .bgp-pl-no { color: var(--faint); font-weight: 700; }

.bgp .bgp-pl-tail { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.bgp .bgp-pl-tail.is-1 { grid-template-columns: minmax(0, 1fr); }
.bgp .bgp-pl-tl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.bgp .bgp-pl-tl li { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 0 0 16px 22px; }
.bgp .bgp-pl-tl li::before { content: ''; position: absolute; left: 5px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--red-line); }
.bgp .bgp-pl-tl li.is-future::before { background: var(--surface); }
.bgp .bgp-pl-tl li::after { content: ''; position: absolute; left: 9px; top: 17px; bottom: 0; width: 2px; background: var(--line); }
.bgp .bgp-pl-tl li:last-child::after { display: none; }
.bgp .bgp-pl-tl li:last-child { padding-bottom: 0; }
.bgp .bgp-pl-tl time { font-size: 12.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.4; }
.bgp .bgp-pl-tl b { display: block; font-size: 13.5px; font-weight: 750; color: var(--ink); line-height: 1.4; }
.bgp .bgp-pl-tl span { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }

.bgp .bgp-pl-src { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bgp .bgp-pl-src li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 9px 11px; border-radius: 10px; background: var(--sunken); border: 1px solid var(--bgp-line); min-width: 0; }
.bgp .bgp-pl-src li .bgp-pl-ver { margin-left: auto; }
.bgp .bgp-pl-src-i { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; background: var(--surface); color: var(--red); border: 1px solid var(--bgp-line); }
.bgp .bgp-pl-src li > div { flex: 1 1 200px; min-width: 0; }
.bgp .bgp-pl-src a, .bgp .bgp-pl-src b { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 750; color: var(--ink); overflow-wrap: anywhere; }
.bgp .bgp-pl-src a:hover { color: var(--red); }
.bgp .bgp-pl-src small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.bgp .bgp-pl-src small.is-note { font-weight: 550; margin-top: 2px; }
.bgp .bgp-pl-morebtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--red-soft); color: var(--red); font-size: 13px; font-weight: 800; border: 1px solid var(--red-line); }
.bgp .bgp-pl-morebtn:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* ═══ RATINGS PAGE — /games/{slug}/ratings ═══════════════════════════════
   Section 11 as a page: one card per rating, the comparison, the
   descriptor summary, the notes, the sources. `bgp-rt-` throughout, every
   rule under .bgp. The header, notice and stats mirror the sibling pages. */

.bgp .bgp-rt { display: flex; flex-direction: column; gap: 20px; }
.bgp .bgp-rt .bgp-card { margin: 0; }

.bgp .bgp-rt-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 20px; align-items: start; }
.bgp .bgp-rt-title { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.bgp .bgp-rt-mark { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 58px; border-radius: 16px; background: var(--red); color: #fff; box-shadow: var(--e-red); }
.bgp .bgp-rt-title h2 { margin: 4px 0 0; font-size: 30px; font-weight: 900; letter-spacing: -.025em; line-height: 1.1; color: var(--ink); }
.bgp .bgp-rt-title p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); font-weight: 550; }
.bgp .bgp-rt-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--sunken); border: 1px solid var(--bgp-line); }
.bgp .bgp-rt-notice-i { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--surface); color: var(--red); border: 1px solid var(--bgp-line); }
.bgp .bgp-rt-notice p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); font-weight: 550; }
.bgp .bgp-rt-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px !important; font-size: 12.5px; color: var(--muted); }
.bgp .bgp-rt-meta span { display: inline-flex; align-items: center; gap: 5px; }
.bgp .bgp-rt-meta b { color: var(--ink); font-weight: 750; }
.bgp .bgp-rt-meta .is-ok { color: var(--ok); font-weight: 700; }
.bgp .bgp-rt-meta .is-dim { color: var(--muted); font-weight: 650; }

.bgp .bgp-rt-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 48px 20px; border-radius: 14px; border: 1px dashed var(--line); background: var(--surface); }
.bgp .bgp-rt-empty-i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--red-soft); color: var(--red); margin-bottom: 6px; }
.bgp .bgp-rt-empty b { font-size: 16px; font-weight: 800; color: var(--ink); }
.bgp .bgp-rt-empty span:not(.bgp-rt-empty-i) { font-size: 13.5px; color: var(--muted); font-weight: 550; }
.bgp .bgp-rt-nomatch { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line); background: var(--sunken); font-size: 13.5px; font-weight: 600; color: var(--muted); }

.bgp .bgp-rt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-rt-stats li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--bgp-line); box-shadow: var(--bgp-e); }
.bgp .bgp-rt-stat-i { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--red-soft); color: var(--red); }
.bgp .bgp-rt-stats b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bgp .bgp-rt-stats span:not(.bgp-rt-stat-i) { display: block; font-size: 13px; font-weight: 750; color: var(--ink); }
.bgp .bgp-rt-stats small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }

.bgp .bgp-rt-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.bgp .bgp-rt-sel select {
    height: 38px; padding: 0 32px 0 12px; border-radius: 10px; border: 1px solid var(--bgp-line); background: var(--surface); font: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
    appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 260px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23656D79' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: right 11px center;
}
.bgp .bgp-rt-sel select:focus-visible { outline: none; }
.bgp .bgp-rt-count { margin: 0 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* The cards: one per rating, its board's mark a lettered tile. */
.bgp .bgp-rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; align-items: stretch; }
.bgp .bgp-rt-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--bgp-line); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.bgp .bgp-rt-card:hover { border-color: var(--red-line); box-shadow: var(--bgp-e-hover); }
.bgp .bgp-rt-card:target { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft), var(--bgp-e-hover); }
.bgp .bgp-rt-top { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.bgp .bgp-rt-tile { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 12px; background: var(--dark); color: #fff; border: 2px solid #1B2029; }
.bgp .bgp-rt-tile b { font-size: 12px; font-weight: 900; letter-spacing: .04em; text-align: center; padding: 0 3px; line-height: 1.1; }
.bgp .bgp-rt-tile.is-sm { width: 28px; height: 28px; flex-basis: 28px; border-radius: 7px; border-width: 1px; margin-right: 8px; vertical-align: middle; display: inline-grid; }
.bgp .bgp-rt-tile.is-sm b { font-size: 8px; letter-spacing: 0; }
.bgp .bgp-rt-top-b { min-width: 0; }
.bgp .bgp-rt-top-b h3 { margin: 0; font-size: 16px; font-weight: 850; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.bgp .bgp-rt-bname { margin: 2px 0 0; font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.35; }
.bgp .bgp-rt-region { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 0; font-size: 12.5px; font-weight: 700; color: var(--body); }
.bgp .bgp-rt-region .gd-i { color: var(--red); }
.bgp .bgp-rt-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.bgp .bgp-rt-rating b { font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); line-height: 1.15; overflow-wrap: anywhere; }
.bgp .bgp-rt-age { padding: 3px 8px; border-radius: 7px; background: var(--red-soft); border: 1px solid var(--red-line); color: var(--red); font-size: 11.5px; font-weight: 800; }
.bgp .bgp-rt-desc { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-rt-desc li { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; font-weight: 650; color: var(--ink); line-height: 1.4; }
.bgp .bgp-rt-desc li .gd-i { flex: 0 0 auto; margin-top: 3px; color: var(--muted); }
.bgp .bgp-rt-nodesc { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.bgp .bgp-rt-facts { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.bgp .bgp-rt-facts div { display: flex; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.bgp .bgp-rt-facts dt::after { content: ':'; }
.bgp .bgp-rt-facts dd { margin: 0; color: var(--body); }
.bgp .bgp-rt-foot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.bgp .bgp-rt-ver { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.bgp .bgp-rt-ver small { font-weight: 600; color: var(--muted); }
.bgp .bgp-rt-ver.is-ok { color: var(--ok); }
.bgp .bgp-rt-ver.is-warn { color: #9A5300; }
.bgp .bgp-rt-ver.is-bad { color: var(--red); }
.bgp .bgp-rt-ver.is-dim { color: var(--muted); }
.bgp .bgp-rt-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px 12px; border-radius: 10px; background: var(--red-soft); color: var(--red); border: 1px solid var(--red-line); font-size: 12.5px; font-weight: 800; transition: background .18s var(--ease), color .18s var(--ease); }
.bgp .bgp-rt-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
.bgp .bgp-rt-btn.is-quiet { background: var(--sunken); color: var(--ink); border-color: var(--bgp-line); }
.bgp .bgp-rt-btn.is-quiet:hover { background: var(--surface); color: var(--red); border-color: var(--red-line); }

/* The comparison beside the summary; the notes beside the sources. */
.bgp .bgp-rt-row { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.bgp .bgp-rt-row.is-1 { grid-template-columns: minmax(0, 1fr); }
.bgp .bgp-rt-tablew { overflow-x: auto; border: 1px solid var(--bgp-line); border-radius: var(--bgp-r-sm); }
.bgp .bgp-rt-table { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.bgp .bgp-rt-table th, .bgp .bgp-rt-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; text-align: left; white-space: nowrap; }
.bgp .bgp-rt-table thead th { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--sunken); border-bottom: 1px solid var(--bgp-line); }
.bgp .bgp-rt-table tbody th { font-weight: 750; color: var(--ink); }
.bgp .bgp-rt-table tbody td { color: var(--body); font-weight: 600; }
.bgp .bgp-rt-table tbody td a { display: inline-flex; align-items: center; color: var(--ink); font-weight: 750; }
.bgp .bgp-rt-table tbody td a:hover { color: var(--red); }
.bgp .bgp-rt-table td.is-rating { font-weight: 850; color: var(--ink); }
.bgp .bgp-rt-table tbody tr:last-child > * { border-bottom: 0; }
.bgp .bgp-rt-sum { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bgp .bgp-rt-sum li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "i n c" "i bar bar"; gap: 4px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--sunken); border: 1px solid var(--bgp-line); }
.bgp .bgp-rt-sum-i { grid-area: i; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface); color: var(--red); border: 1px solid var(--bgp-line); }
.bgp .bgp-rt-sum-n { grid-area: n; font-size: 13.5px; font-weight: 800; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.bgp .bgp-rt-sum-c { grid-area: c; font-size: 11.5px; font-weight: 650; color: var(--muted); white-space: nowrap; }
.bgp .bgp-rt-sum-bar { grid-area: bar; display: block; height: 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--bgp-line); overflow: hidden; }
.bgp .bgp-rt-sum-bar i { display: block; height: 100%; background: var(--red); border-radius: 999px; }
.bgp .bgp-rt-notes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bgp .bgp-rt-notes li { display: grid; grid-template-columns: minmax(100px, 150px) minmax(0, 1fr); gap: 4px 12px; padding: 10px 12px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--bgp-line); font-size: 13.5px; line-height: 1.5; color: var(--body); font-weight: 550; }
.bgp .bgp-rt-notes b { color: var(--ink); font-weight: 800; }
.bgp .bgp-rt-notes span { white-space: pre-line; overflow-wrap: anywhere; }
.bgp .bgp-rt-src { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bgp .bgp-rt-src li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 9px 11px; border-radius: 10px; background: var(--sunken); border: 1px solid var(--bgp-line); min-width: 0; }
.bgp .bgp-rt-src li .bgp-rt-ver { margin-left: auto; }
.bgp .bgp-rt-src-i { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; background: var(--surface); color: var(--red); border: 1px solid var(--bgp-line); }
.bgp .bgp-rt-src li > div { flex: 1 1 200px; min-width: 0; }
.bgp .bgp-rt-src a, .bgp .bgp-rt-src b { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 750; color: var(--ink); overflow-wrap: anywhere; }
.bgp .bgp-rt-src a:hover { color: var(--red); }
.bgp .bgp-rt-src small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.bgp .bgp-rt-src small.is-note { font-weight: 550; margin-top: 2px; }
.bgp .bgp-rt-morebtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--red-soft); color: var(--red); font-size: 13px; font-weight: 800; border: 1px solid var(--red-line); }
.bgp .bgp-rt-morebtn:hover { background: var(--red); color: #fff; border-color: var(--red); }

@media (max-width: 1280px) {
    .bgp { --bgp-side: 316px; --bgp-gap: 20px; }
    .bgp-row-about { grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); }
}

@media (max-width: 1080px) {
    .bgp .bgp-rt-head, .bgp .bgp-rt-row { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-pl-head { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-pl-tail { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-do-head { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-do-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bgp .bgp-do-row.is-two, .bgp .bgp-do-tail { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-eh-head { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-eh-more.is-both { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-cr-head { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-cr-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bgp .bgp-rq-head { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-rq-tiers, .bgp .bgp-rq-tiers.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bgp .bgp-rq-tiers.is-1 { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-rq-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Single column. The sidebar becomes a band of cards under the content,
       laid two-up where there is room, and never pins. */
    .bgp-layout { grid-template-columns: minmax(0, 1fr); }
    .bgp-side-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .bgp-side-in.is-follow { position: static; top: auto !important; }
    .bgp-info { grid-column: 1 / -1; }
    .bgp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .bgp-stats { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; min-width: 0; }
    .bgp-hero-body { max-width: none; }
}

@media (max-width: 840px) {
    .bgp-row-about { grid-template-columns: minmax(0, 1fr); }
    .bgp-mg { grid-template-columns: minmax(0, 1fr); }
    .bgp-mg-tiles { grid-template-rows: auto; }
    .bgp-mg-tile { aspect-ratio: 16 / 10; }
    /* The media hub: the rail becomes a chip strip over the rows, the
       preview drops to four columns (the lead keeps two of them; the
       tiles wrap beneath), videos three to a row. Nothing is hidden, so
       the "+N more" counts stay true. */
    .bgp-mh { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .bgp-mh-rail { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 16px; }
    .bgp-mh-rail-t { flex: 1 0 100%; padding: 0 0 10px; margin-bottom: 4px; }
    .bgp-mh-rail-h { display: none; }
    .bgp-mh-cats, .bgp-mh-types { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .bgp-mh-cats + .bgp-mh-rail-h + .bgp-mh-types { padding-left: 8px; border-left: 1px solid var(--line); }
    .bgp-mh-cat, .bgp-mh-type { width: auto; padding: 7px 10px; background: var(--sunken); gap: 7px; }
    .bgp-mh-body { padding: 16px; }
    .bgp-mh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bgp-mh-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bgp-spec-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    /* The ratings page: stats two-up, one card per row, tables scroll. */
    .bgp .bgp-rt-title h2 { font-size: 24px; }
    .bgp .bgp-rt-mark { width: 48px; height: 48px; flex-basis: 48px; }
    .bgp .bgp-rt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .bgp .bgp-rt-stats li { padding: 12px 14px; gap: 10px; }
    .bgp .bgp-rt-grid { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-rt-count { margin-left: 0; flex-basis: 100%; }
    .bgp .bgp-rt-sel select { max-width: 100%; }
    .bgp .bgp-rt-notes li { grid-template-columns: minmax(0, 1fr); }
    /* The platforms page: one card per row, the matrix scrolls under its
       pinned first column, the timeline stacks its date over its entry. */
    .bgp .bgp-pl-title h2 { font-size: 24px; }
    .bgp .bgp-pl-mark { width: 48px; height: 48px; flex-basis: 48px; }
    .bgp .bgp-pl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .bgp .bgp-pl-stats li { padding: 12px 14px; gap: 10px; }
    .bgp .bgp-pl-grid { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-pl-count { margin-left: 0; flex-basis: 100%; }
    .bgp .bgp-pl-sel select { max-width: 100%; }
    .bgp .bgp-pl-table { min-width: 480px; }
    .bgp .bgp-pl-table tbody th { min-width: 140px; white-space: normal; }
    .bgp .bgp-pl-rows div { grid-template-columns: 90px minmax(0, 1fr); }
    .bgp .bgp-pl-tl li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    /* The development page: stats two-up, one card per row, the ownership
       chain stacks, the map keeps its shape with the country list below. */
    .bgp .bgp-do-title h2 { font-size: 24px; }
    .bgp .bgp-do-mark { width: 48px; height: 48px; flex-basis: 48px; }
    .bgp .bgp-do-stats { gap: 10px; }
    .bgp .bgp-do-stats li { padding: 12px 14px; gap: 10px; }
    .bgp .bgp-do-grid { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-do-count { margin-left: 0; flex-basis: 100%; }
    .bgp .bgp-do-sel select { max-width: 100%; }
    .bgp .bgp-do-own-row, .bgp .bgp-do-own-row:not(:has(.is-parent)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "co" "rel" "parent" "x"; }
    .bgp .bgp-do-own-rel { flex-direction: row; justify-content: flex-start; }
    .bgp .bgp-do-own-rel .gd-i { transform: rotate(90deg); }
    .bgp .bgp-do-loc-in { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-do-pin-tip { max-width: 160px; min-width: 120px; }
    .bgp .bgp-do-tl li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    /* The editions page: one card per row, the comparison scrolls sideways
       under its pinned first column, the bottom cards stack. */
    .bgp .bgp-eh-title h2 { font-size: 24px; }
    .bgp .bgp-eh-mark { width: 48px; height: 48px; flex-basis: 48px; }
    .bgp .bgp-eh-grid, .bgp .bgp-eh-grid.is-few { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-eh-sel { width: 100%; }
    .bgp .bgp-eh-sel select { flex: 1 1 auto; max-width: none; }
    .bgp .bgp-eh-table { min-width: 520px; }
    .bgp .bgp-eh-table tbody th { min-width: 150px; white-space: normal; }
    .bgp .bgp-eh-table th, .bgp .bgp-eh-table td { padding: 10px 12px; }
    .bgp .bgp-eh-notes li { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-eh-rows div { grid-template-columns: 84px minmax(0, 1fr); }
    /* The credits table becomes a stack of cards: each cell prints its column
       name from data-label, the person cell stays the card's head. */
    .bgp .bgp-cr-title h2 { font-size: 24px; }
    .bgp .bgp-cr-mark { width: 48px; height: 48px; flex-basis: 48px; }
    .bgp .bgp-cr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .bgp .bgp-cr-stats li { padding: 12px 14px; }
    .bgp .bgp-cr-dir { padding: 14px; }
    .bgp .bgp-cr-sel.is-sort { margin-left: 0; }
    .bgp .bgp-cr-sel select { max-width: 100%; }
    .bgp .bgp-cr-tablew { overflow: visible; }
    .bgp .bgp-cr-table, .bgp .bgp-cr-table tbody, .bgp .bgp-cr-table tr, .bgp .bgp-cr-table td { display: block; }
    .bgp .bgp-cr-table thead { display: none; }
    .bgp .bgp-cr-table tr { margin-bottom: 10px; padding: 6px 12px; border-radius: 14px; border: 1px solid var(--bgp-line); background: var(--surface); }
    .bgp .bgp-cr-table td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
    .bgp .bgp-cr-table td:last-child { border-bottom: 0; }
    .bgp .bgp-cr-table td::before { content: attr(data-label); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
    .bgp .bgp-cr-table td:first-child { grid-template-columns: minmax(0, 1fr); padding-top: 10px; }
    .bgp .bgp-cr-table td:first-child::before { display: none; }
    .bgp .bgp-cr-person { min-width: 0; }
    .bgp .bgp-cr-cos li { white-space: normal; }
    .bgp .bgp-cr-foot { flex-direction: column; align-items: stretch; }
    .bgp .bgp-cr-pager { justify-content: space-between; }
    .bgp .bgp-rq-title h2 { font-size: 24px; }
    .bgp .bgp-rq-mark { width: 46px; height: 46px; flex-basis: 46px; }
    .bgp .bgp-rq-plat { min-width: 0; flex: 0 0 auto; height: 46px; padding: 0 14px; font-size: 13px; }
    .bgp .bgp-rq-panel { padding: 14px; }
    .bgp .bgp-rq-tiers, .bgp .bgp-rq-tiers.is-2, .bgp .bgp-rq-cards { grid-template-columns: minmax(0, 1fr); }
    .bgp .bgp-rq-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .bgp .bgp-rq-row dt { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
    .bgp-wrap { padding: 0 16px; }
    .bgp-hero { min-height: 0; }
    .bgp-hero-in { padding-top: 26px; padding-bottom: 26px; }
    .bgp-hero-shade { background: linear-gradient(180deg, rgba(7, 9, 13, .74) 0%, rgba(7, 9, 13, .86) 100%); }
    .bgp .bgp-hero-t { font-size: clamp(30px, 9vw, 40px); }
    .bgp-hero-logo { max-height: 110px; }
    .bgp-hero-tag { letter-spacing: .16em; }
    .bgp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
    .bgp-actions { gap: 8px; }
    .bgp-hero .bgd-btn-lg { padding: 12px 16px; font-size: 14px; }
    .bgp-primary { width: 100%; }
    .bgp-stats { padding: 12px 14px; }
    .bgp-stat-big { font-size: 16px; }
    .bgp-nav-in { gap: 0; }
    .bgp-tab { padding: 14px 12px 12px; font-size: 13.5px; }
    .bgp-card-h { padding: 16px 16px 12px; }
    .bgp-card-b { padding: 0 16px 16px; }
    .bgp-card-h h2 { font-size: 16px; }
    .bgp-mg-tiles { grid-template-columns: 1fr 1fr; }
    .bgp-hub-layout { padding: 18px 0 56px; }
    .bgp-mh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .bgp-mh-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bgp-mh-h { flex-wrap: wrap; }
    .bgp-mh-hb p { display: none; }
    .bgp-mh-tile .bgp-mg-more b { font-size: 18px; }
    .bgp-mh-tile .bgp-mg-more span { font-size: 10.5px; }
    .bgp-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); gap: 6px; }
    .bgp-gallery-grid.is-cover { grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr)); }
    .bgp-side-in { grid-template-columns: minmax(0, 1fr); }
    .bgp-ed-grid { grid-template-columns: minmax(0, 1fr); }
    .bgp-rc { flex-basis: 132px; }
    .bgp-rail-btn { display: none; }
    .bgp-req-r { flex-direction: column; gap: 2px; }
    .bgp-req-r dt { flex-basis: auto; }
    .bgp-info-r dt { flex-basis: 92px; }
    .bgp-plat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bgp-store-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
    .bgp-share-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bgp-lang-grid { grid-template-columns: minmax(0, 1fr); }
    .bgp-info-cta { flex-wrap: wrap; }
    .bgp-buy { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .bgd-fx .bgp-hero { opacity: 1; transform: none; }
    .bgp-hero-art img { transform: none; }
}

@media print {
    .bgp-nav, .bgp-actions, .bgp-rail-btn, .bgp-sharecard { display: none !important; }
    .bgp-layout { grid-template-columns: 1fr; }
    .bgp-card { box-shadow: none; break-inside: avoid; }
}

/* ═══ DETAILS PAGE — /games/{slug}/details ════════════════════════════════
   The description as an editorial article. Three columns on a wide
   screen: "On This Page" pinned on the left, the article in a readable
   column, the overview's own sidebar cards on the right. Under 1280px the
   contents list folds into a bar above the article; under 1080px the
   sidebar becomes the band of cards the overview also uses.

   The article's own markup (`.bgp-art`) is what DescriptionRenderer
   produces: h2/h3, p, figure/img/figcaption, a gallery of figures,
   blockquote, ul/ol, hr. Styled as one piece of writing — nothing inside
   the column is a card. */

.bgp-dt-layout {
    display: grid; grid-template-columns: 224px minmax(0, 1fr) var(--bgp-side);
    gap: var(--bgp-gap); align-items: start;
    padding: 26px 0 72px;
}
.bgp-dt-layout.no-toc { grid-template-columns: minmax(0, 1fr) var(--bgp-side); }
.bgp-dt-main { min-width: 0; }
.bgp-dt-side { min-width: 0; }

/* ── On This Page ───────────────────────────────────────────────────────── */
.bgp-dt-tocwrap { min-width: 0; position: sticky; top: calc(var(--bgd-sticky, 0px) + 84px); }
.bgp-dt-toc {
    background: var(--surface); border: 1px solid var(--bgp-line); border-radius: var(--bgp-r);
    box-shadow: var(--bgp-e); padding: 6px 8px 10px;
}
.bgp-dt-toc-h {
    display: flex; align-items: center; gap: 8px; list-style: none; cursor: default;
    padding: 10px 10px 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink);
}
.bgp-dt-toc-h::-webkit-details-marker { display: none; }
.bgp-dt-toc-h .gd-i { color: var(--red); }
.bgp-dt-toc-chev { display: none; margin-left: auto; color: var(--muted); transition: transform .2s var(--ease); }
.bgp-dt-toc-list, .bgp-dt-toc-list ol { list-style: none; margin: 0; padding: 0; }
.bgp-dt-toc-list > li + li { margin-top: 1px; }
.bgp-dt-toc-list a {
    position: relative; display: block; padding: 7px 10px 7px 20px; border-radius: 8px;
    font-size: 13px; font-weight: 650; line-height: 1.3; color: var(--body);
    transition: background .18s var(--ease), color .18s var(--ease);
}
.bgp-dt-toc-list a::before {
    content: ''; position: absolute; left: 8px; top: 50%; width: 5px; height: 5px; border-radius: 50%;
    background: var(--faint); transform: translateY(-50%); transition: background .18s var(--ease), transform .18s var(--ease);
}
.bgp-dt-toc-list a:hover { background: var(--sunken); color: var(--ink); }
.bgp-dt-toc-list a.is-on { background: var(--red-soft); color: var(--red); }
.bgp-dt-toc-list a.is-on::before { background: var(--red); transform: translateY(-50%) scale(1.3); }
.bgp-dt-toc-list ol { margin: 1px 0 3px 14px; }
.bgp-dt-toc-list ol a { font-size: 12.5px; font-weight: 600; padding-top: 5px; padding-bottom: 5px; }

/* ── The article shell ──────────────────────────────────────────────────── */
.bgp-dt-article { padding: 28px 40px 40px; }
.bgp-dt-head { margin-bottom: 18px; }
.bgp-dt-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red);
}
.bgp-dt-kicker::before { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--red); }
.bgp-dt-title { margin: 10px 0 0; font-size: 26px; font-weight: 900; letter-spacing: -.025em; color: var(--ink); }
.bgp-dt-empty { display: flex; flex-direction: column; gap: 14px; }
.bgp-dt-empty-x { margin: 0; font-size: 16px; line-height: 1.7; color: var(--body); }

/* ── The prose ──────────────────────────────────────────────────────────── */
.bgp .bgp-art {
    max-width: 76ch; font-size: 16px; line-height: 1.78; color: var(--body);
    /* Nothing inside may push the column wider than the page. */
    overflow-wrap: anywhere;
}
.bgp .bgp-art > * + * { margin-top: 1.1em; }
.bgp .bgp-art > h2 {
    position: relative; margin-top: 2em; padding-top: .35em;
    font-size: 26px; font-weight: 900; line-height: 1.2; letter-spacing: -.025em; color: var(--ink);
    scroll-margin-top: calc(var(--bgd-sticky, 0px) + 96px);
}
.bgp .bgp-art > h2::before { content: ''; position: absolute; left: 0; top: 0; width: 34px; height: 3px; border-radius: 2px; background: var(--red); }
.bgp .bgp-art > h2:first-child { margin-top: 0; }
.bgp .bgp-art > h3 {
    margin-top: 1.7em; font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -.015em; color: var(--ink);
    scroll-margin-top: calc(var(--bgd-sticky, 0px) + 96px);
}
.bgp .bgp-art h2 + h3 { margin-top: 1em; }
.bgp .bgp-art h2 + p, .bgp .bgp-art h3 + p { margin-top: .75em; }
.bgp .bgp-art p { margin: 0; }
.bgp .bgp-art p + p { margin-top: 1.05em; }
.bgp .bgp-art strong { color: var(--ink); font-weight: 700; }
.bgp .bgp-art a:not(.bgp-art-zoom) { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.bgp .bgp-art a:not(.bgp-art-zoom):hover { color: var(--red-dark); }
.bgp .bgp-art ul, .bgp .bgp-art ol { margin: 1em 0 0; padding-left: 1.4em; }
.bgp .bgp-art li + li { margin-top: .45em; }
.bgp .bgp-art li::marker { color: var(--red); font-weight: 800; }

/* The List block: a plain list, marked in the brand red. */
.bgp .bgp-art .bgp-art-list { margin-top: 1.2em; padding-left: 0; list-style: none; counter-reset: bgp-art-ol; }
.bgp .bgp-art .bgp-art-list li { position: relative; padding-left: 30px; }
.bgp .bgp-art .bgp-art-list li + li { margin-top: .6em; }
.bgp .bgp-art ul.bgp-art-list li::before {
    content: ''; position: absolute; left: 0; top: .42em; width: 18px; height: 18px; border-radius: 50%;
    /* The brand red circle with a check; a data URI so no request is made. */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E51B23'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bgp .bgp-art ol.bgp-art-list li::before {
    counter-increment: bgp-art-ol; content: counter(bgp-art-ol);
    position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 6px;
    display: grid; place-items: center; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1;
}

/* Figures. Full spans the column; medium and small may sit to a side with
   the text wrapping past them. */
.bgp .bgp-art .bgp-art-fig { margin: 1.6em 0 0; }
.bgp .bgp-art .bgp-art-fig img {
    display: block; width: 100%; height: auto; margin: 0;
    border-radius: var(--bgp-r-sm); background: var(--sunken);
}
.bgp .bgp-art .bgp-art-fig figcaption,
.bgp .bgp-art .bgp-art-gal-item figcaption {
    margin-top: 9px; font-size: 13px; line-height: 1.5; color: var(--muted); font-weight: 550;
}
.bgp .bgp-art .bgp-art-fig.is-medium { width: 60%; }
.bgp .bgp-art .bgp-art-fig.is-small  { width: 42%; }
.bgp .bgp-art .bgp-art-fig.is-center { margin-left: auto; margin-right: auto; }
.bgp .bgp-art .bgp-art-fig.is-left  { float: left;  margin: .4em 26px 14px 0; }
.bgp .bgp-art .bgp-art-fig.is-right { float: right; margin: .4em 0 14px 26px; }
.bgp .bgp-art .bgp-art-fig.is-full.is-center { width: 100%; }
.bgp .bgp-art > h2, .bgp .bgp-art > h3, .bgp .bgp-art > .bgp-art-hr, .bgp .bgp-art > .bgp-art-gal { clear: both; }
.bgp .bgp-art::after { content: ''; display: block; clear: both; }

.bgp .bgp-art .bgp-art-zoom { display: block; position: relative; border-radius: var(--bgp-r-sm); overflow: hidden; cursor: zoom-in; }
.bgp .bgp-art .bgp-art-zoom::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .06); pointer-events: none;
}
.bgp .bgp-art .bgp-art-zoom img { transition: transform .5s var(--ease); }
.bgp .bgp-art .bgp-art-zoom:hover img { transform: scale(1.02); }
.bgp .bgp-art .bgp-art-zoom:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* The Gallery block: a grid of figures; each opens the page's viewer. */
.bgp .bgp-art .bgp-art-gal { display: grid; gap: 14px; margin-top: 1.6em; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bgp .bgp-art .bgp-art-gal.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bgp .bgp-art .bgp-art-gal.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bgp .bgp-art .bgp-art-gal-item { margin: 0; min-width: 0; }
.bgp .bgp-art .bgp-art-gal-item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin: 0; border-radius: var(--bgp-r-sm); background: var(--sunken); }
.bgp .bgp-art .bgp-art-gal-item figcaption { font-size: 12.5px; }

/* The Quote block: an editorial pull quote. */
.bgp .bgp-art .bgp-art-quote {
    position: relative; margin: 1.8em 0 0; padding: 22px 26px 22px 60px;
    border-radius: var(--bgp-r); background: var(--bgp-tint); border: 1px solid var(--bgp-tint-line);
    font-size: 18px; line-height: 1.6; font-weight: 600; font-style: italic; color: var(--ink);
}
.bgp .bgp-art .bgp-art-quote::before {
    content: '\201C'; position: absolute; left: 22px; top: 12px;
    font-size: 54px; line-height: 1; font-weight: 900; font-style: normal; color: var(--red); opacity: .9;
}
.bgp .bgp-art .bgp-art-quote p { margin: 0; }
.bgp .bgp-art .bgp-art-quote p + p { margin-top: .7em; }
.bgp .bgp-art .bgp-art-quote footer { margin-top: 10px; font-size: 13.5px; font-weight: 700; font-style: normal; color: var(--muted); }
.bgp .bgp-art .bgp-art-quote footer::before { content: '\2014\00a0'; }
.bgp .bgp-art .bgp-art-quote cite { font-style: normal; }

/* The Divider block. */
.bgp .bgp-art .bgp-art-hr {
    position: relative; margin: 2.2em 0 0; height: 0; border: 0; border-top: 1px solid var(--bgp-line);
}
.bgp .bgp-art .bgp-art-hr::after {
    content: ''; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--red); transform: translateX(-50%);
}

/* Legacy HTML (the previous editor's output): tables and stray images
   stay inside the column. */
.bgp .bgp-art table { display: block; max-width: 100%; overflow-x: auto; }
.bgp .bgp-art img { max-width: 100%; height: auto; }
.bgp .bgp-art iframe { max-width: 100%; }

/* The overview's About card renders the same stored HTML inside .bgp-prose
   (collapsed behind Read More). The block structures keep their shape there
   too, at the card's own type size; nothing about that card changed. */
.bgp .bgp-prose .bgp-art-fig { margin: 1.2em 0 0; }
.bgp .bgp-prose .bgp-art-fig img { display: block; width: 100%; height: auto; margin: 0; border-radius: var(--bgp-r-sm); }
.bgp .bgp-prose .bgp-art-fig figcaption, .bgp .bgp-prose .bgp-art-gal-item figcaption { margin-top: 7px; font-size: 12.5px; color: var(--muted); font-weight: 550; }
.bgp .bgp-prose .bgp-art-fig.is-medium { width: 60%; }
.bgp .bgp-prose .bgp-art-fig.is-small { width: 42%; }
.bgp .bgp-prose .bgp-art-fig.is-center { margin-left: auto; margin-right: auto; }
.bgp .bgp-prose .bgp-art-fig.is-left { float: left; margin: .3em 20px 10px 0; }
.bgp .bgp-prose .bgp-art-fig.is-right { float: right; margin: .3em 0 10px 20px; }
.bgp .bgp-prose .bgp-art-gal { display: grid; gap: 10px; margin-top: 1.2em; grid-template-columns: repeat(3, minmax(0, 1fr)); clear: both; }
.bgp .bgp-prose .bgp-art-gal.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bgp .bgp-prose .bgp-art-gal.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bgp .bgp-prose .bgp-art-gal-item { margin: 0; min-width: 0; }
.bgp .bgp-prose .bgp-art-gal-item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin: 0; border-radius: var(--bgp-r-sm); }
.bgp .bgp-prose .bgp-art-quote { margin: 1.3em 0 0; padding: 14px 18px 14px 18px; border-left: 3px solid var(--red); border-radius: 0 var(--bgp-r-sm) var(--bgp-r-sm) 0; background: var(--bgp-tint); font-style: italic; color: var(--ink); }
.bgp .bgp-prose .bgp-art-quote p { margin: 0; }
.bgp .bgp-prose .bgp-art-quote footer { margin-top: 6px; font-size: 12.5px; font-weight: 700; font-style: normal; color: var(--muted); }
.bgp .bgp-prose .bgp-art-quote footer::before { content: '\2014\00a0'; }
.bgp .bgp-prose .bgp-art-quote cite { font-style: normal; }
.bgp .bgp-prose .bgp-art-hr { margin: 1.4em 0 0; border: 0; border-top: 1px solid var(--bgp-line); clear: both; }
.bgp .bgp-prose h2, .bgp .bgp-prose h3 { clear: both; }
@media (max-width: 720px) {
    .bgp .bgp-prose .bgp-art-fig.is-medium, .bgp .bgp-prose .bgp-art-fig.is-small { width: 100%; float: none; margin-left: 0; margin-right: 0; }
    .bgp .bgp-prose .bgp-art-gal, .bgp .bgp-prose .bgp-art-gal.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Latest articles (sidebar) ──────────────────────────────────────────── */
.bgp-dt-latest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bgp-dt-latest-item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 4px; border-radius: 10px; transition: background .18s var(--ease); }
.bgp-dt-latest-item:hover { background: var(--sunken); }
.bgp-dt-latest-item img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--sunken); }
.bgp-dt-latest-item > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bgp-dt-latest-item b { font-size: 13.5px; font-weight: 750; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bgp-dt-latest-item small { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    /* The contents list folds into a bar above the article; the sidebar keeps its column. */
    .bgp-dt-layout { grid-template-columns: minmax(0, 1fr) var(--bgp-side); }
    .bgp-dt-tocwrap { position: static; grid-column: 1 / -1; }
    .bgp-dt-toc-h { cursor: pointer; }
    .bgp-dt-toc-chev { display: block; }
    .bgp-dt-toc[open] .bgp-dt-toc-chev { transform: rotate(90deg); }
    .bgp-dt-toc:not([open]) .bgp-dt-toc-h { padding-bottom: 8px; }
    .bgp-dt-toc-list { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 0 4px 2px; }
    .bgp-dt-toc-list > li + li { margin-top: 0; }
    .bgp-dt-toc-list > li { display: contents; }
    .bgp-dt-toc-list a { padding: 6px 12px 6px 22px; border: 1px solid var(--bgp-line); border-radius: 999px; font-size: 12.5px; }
    .bgp-dt-toc-list a::before { left: 10px; }
    .bgp-dt-toc-list ol { display: contents; }
    .bgp-dt-article { padding: 26px 30px 34px; }
}
@media (max-width: 1080px) {
    .bgp-dt-layout, .bgp-dt-layout.no-toc { grid-template-columns: minmax(0, 1fr); }
    .bgp-dt-side .bgp-side-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .bgp-dt-side .bgp-info { grid-column: 1 / -1; }
    .bgp .bgp-art { max-width: none; }
}
@media (max-width: 720px) {
    .bgp-dt-layout { padding: 18px 0 56px; }
    .bgp-dt-article { padding: 22px 18px 26px; }
    .bgp .bgp-art { font-size: 15.5px; }
    .bgp .bgp-art > h2 { font-size: 22px; }
    .bgp .bgp-art > h3 { font-size: 17.5px; }
    /* Side-set images go full width; a 42% image on a phone is a stamp. */
    .bgp .bgp-art .bgp-art-fig.is-medium, .bgp .bgp-art .bgp-art-fig.is-small { width: 100%; float: none; margin-left: 0; margin-right: 0; }
    .bgp .bgp-art .bgp-art-gal, .bgp .bgp-art .bgp-art-gal.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .bgp .bgp-art .bgp-art-quote { padding: 18px 18px 18px 46px; font-size: 16.5px; }
    .bgp .bgp-art .bgp-art-quote::before { left: 14px; font-size: 44px; }
    .bgp-dt-side .bgp-side-in { grid-template-columns: minmax(0, 1fr); }
    .bgp-dt-toc { padding: 4px 6px 8px; }
    /* Folded by default on a phone; the script opens it when there is room. */
}
@media (max-width: 420px) {
    .bgp .bgp-art .bgp-art-gal, .bgp .bgp-art .bgp-art-gal.cols-4, .bgp .bgp-art .bgp-art-gal.cols-2 { grid-template-columns: minmax(0, 1fr); }
}
@media print {
    .bgp-dt-layout { grid-template-columns: 1fr; }
    .bgp-dt-tocwrap, .bgp-dt-side { display: none !important; }
}

/* ═══ THE WIDE SECTIONS ════════════════════════════════════════════════════
   Media, Credits, Editions, Platforms, System Requirements, Development &
   Ownership, Ratings and Community were nine pages until 2026-09-27 and are
   sections of the game page now. Each was written to have a page to itself,
   so they keep the full container width and are stacked here with a rule
   between them — the reader needs to see where one ends and the next begins.

   Every selector below is new. Nothing above redefines them, so appending
   the block cannot be overridden by an earlier media query. */

.bgp-stack { display: flex; flex-direction: column; gap: 0; }

/* The anchor targets. The sticky section bar would otherwise sit on top of
   whatever the reader just jumped to. */
.bgp-stack > *,
.bgp-stack > * > [id] { scroll-margin-top: calc(var(--bgd-sticky, 0px) + 84px); }

.bgp-stack > * + * {
    margin-top: 44px; padding-top: 44px;
    border-top: 1px solid var(--bgp-line);
}

/* The media hub is a two-column grid whose rail is sticky; the rule has to
   clear it rather than run underneath. */
.bgp-stack > .bgp-mh { padding-top: 0; }
.bgp-stack > .bgp-mh + * { margin-top: 52px; }

@media (max-width: 1024px) {
    .bgp-stack > * + * { margin-top: 34px; padding-top: 34px; }
}

@media (max-width: 720px) {
    .bgp-stack > * + * { margin-top: 26px; padding-top: 26px; }
}

@media print {
    .bgp-stack > * + * { border-top: 0; }
}