/* ============================================================================
   BARLIN GAMES — Game detail experience
   ----------------------------------------------------------------------------
   Loaded ONLY by /games/{slug} (and its admin preview), via
   <x-public.games.detail.styles />.

   WHY THIS IS A SEPARATE SHEET
   game-ui.css dresses five surfaces — the games directory, the genre/platform
   slices, the companies directory, the creator profile and (previously) this
   page. Rewriting it to redesign one of them would have redesigned all five.
   Everything here is `bgd-` namespaced and scoped under `.bgd`, so nothing in
   this file can reach another page and nothing game-ui.css does can reach this
   one. The two sheets are never loaded together.

   THEMED (since 2026-09-21; it was light-only before). Light is the design.
   Dark is the same sheet: every surface, line and ink colour is a token on
   `.bgd`, and the `.theme-dark .bgd` block at the end of this file redefines
   them. The page passes `themed => true` to layouts.article, so <body>
   carries the visitor's theme class and the header toggle flips the whole
   page. There is still no prefers-color-scheme block: the visitor's explicit
   choice must never lose to the operating system.

   THE SHAPE OF THE DESIGN
   Large cards on a quiet ground, separated by real space. Elevation does the
   work borders used to: one hairline at 1px and a soft two-layer shadow, not a
   hard rule around every box. Section headers carry a small brand mark and a
   tracked label; the content inside them is given room to be the thing you
   look at.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

/* A NOTE ON --faint VS --muted.
   --faint is the decorative tier: icons, the 7px status dot, the "·" between
   store facts. Nothing there carries meaning that is not also in adjacent text,
   so it is exempt from the contrast minimum and stays light on purpose.

   It was ALSO being used for six pieces of real text — the spec labels
   (OS / CPU / RAM / GPU), the language table headers, the requirements note,
   the article meta row and the struck-through price. At 10.5px those measured
   2.34:1, where WCAG AA asks 4.5:1. Those six now read --muted. The token
   hierarchy is intact; only the misuse is gone. */

.bgd {
    --red:        #E51B23;
    --red-dark:   #C2151C;
    --red-lit:    #FF4A52;
    --red-soft:   rgba(229, 27, 35, .07);
    --red-line:   rgba(229, 27, 35, .16);

    --ink:        #0E1116;
    --ink-2:      #1D2229;
    --body:       #4A5058;
    /* Darkened from #737B87. Measured against the surfaces it is actually used
       on, that failed WCAG AA for normal text: 3.99:1 on the breadcrumb bar
       (#F6F7F9) and 3.91:1 on a quiet chip (#F3F5F8), where 4.5:1 is required.
       This value clears it on both — and on white — without leaving the same
       cool grey family, so nothing about the design shifts. */
    --muted:      #656D79;
    --faint:      #A2AAB6;

    --canvas:     #F6F7F9;
    --surface:    #FFFFFF;
    --sunken:     #F3F5F8;
    --line:       #E9ECF1;
    --line-soft:  #F1F3F7;

    /* Darkened from #16A34A, which failed WCAG AA in BOTH directions it is
       used: as green text on white for the "RECOMMENDED" requirements
       heading (3.30:1) and as the background under white text on the
       discount badge (3.18:1). Both need 4.5:1; this value gives 5.01:1
       either way. The icon and 7px dot uses only need 3:1 as graphics,
       and comfortably clear it. */
    --ok:         #15803D;
    --warn:       #D97706;

    --dark:       #0B0E13;
    --dark-2:     #151A22;
    --on:         #FFFFFF;
    --on-soft:    rgba(255, 255, 255, .78);
    --on-dim:     rgba(255, 255, 255, .56);
    --on-line:    rgba(255, 255, 255, .13);
    --on-fill:    rgba(255, 255, 255, .06);

    --r-xs: 10px;
    --r-sm: 14px;
    --r:    18px;
    --r-lg: 22px;
    --r-xl: 28px;

    /* Elevation, layered. A single large blur reads as fog; a tight contact
       shadow plus a wide ambient one reads as an object on a surface. */
    --e1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
    --e2: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -14px rgba(16, 24, 40, .20);
    --e3: 0 2px 4px rgba(16, 24, 40, .05), 0 22px 48px -20px rgba(16, 24, 40, .28);
    --e4: 0 4px 8px rgba(16, 24, 40, .06), 0 40px 80px -28px rgba(16, 24, 40, .34);
    --e-red: 0 10px 26px -10px rgba(229, 27, 35, .55);

    --ease:   cubic-bezier(.22, .61, .36, 1);
    --spring: cubic-bezier(.34, 1.4, .48, 1);

    --wrap: var(--bg-w-1400, 1400px);
    --rail: 372px;
    --gap:  26px;

    color: var(--body);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Base ───────────────────────────────────────────────────────────────── */

.bgd, .bgd *, .bgd *::before, .bgd *::after { box-sizing: border-box; }

/*
 * layouts/article.blade.php puts `ba-body` on <body>, and article.css declares
 * `.ba-body img { margin: 26px 0 }` for editorial prose. Every image on this
 * page inherits it, which puts a 26px band above and below every cover, tile
 * and thumbnail. article.css is owned by Articles and is not edited; this only
 * resets the inherited value inside `.bgd`, and .bgd-prose restores it where
 * real prose actually wants it.
 */
.bgd img, .bgd svg { max-width: 100%; margin: 0; }
.bgd img { display: block; }
.bgd a { color: inherit; text-decoration: none; }
.bgd p { margin: 0; }
.bgd h1, .bgd h2, .bgd h3, .bgd h4 {
    margin: 0; color: var(--ink);
    letter-spacing: -.022em; line-height: 1.18;
}
.bgd button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.bgd table { border-collapse: collapse; width: 100%; }
.bgd .gd-i { flex: 0 0 auto; }

/* Focus is restyled, never removed. */
.bgd a:focus-visible,
.bgd button:focus-visible,
.bgd summary:focus-visible,
.bgd [tabindex]:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
    border-radius: 6px;
}

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

/* ── Page shell ─────────────────────────────────────────────────────────── */

.bgd-page {
    position: relative;
    /* Its own stacking context, so the decorative wash below can sit at
       z-index -1 and stay behind this page's content without escaping to
       paint behind the document. */
    isolation: isolate;
    background: var(--canvas);
    min-height: 100vh;
    /*
     * `clip`, NOT `hidden`. overflow:hidden makes this a scroll container and
     * breaks `position: sticky` for every descendant — the section bar and the
     * rail both live inside here. overflow-x:clip contains the hero's
     * transforms without creating one.
     */
    overflow-x: clip;
}

/* A whisper of brand at the top of the page and nothing more. It is masked
   away long before it reaches any running text. */
/*
 * z-index -1 rather than lifting every child to z-index 1.
 *
 * The obvious version of this — `.bgd-page > * { position: relative }` — also
 * matches the shared site navbar, which is a direct child here, and overrides
 * its own `position: sticky`. The header then scrolls away on this page and
 * nowhere else. Pushing the decoration behind instead leaves every child's
 * positioning exactly as its own stylesheet declared it.
 */
.bgd-page::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 620px;
    pointer-events: none; z-index: -1;
    background:
        radial-gradient(60% 100% at 88% 0%, rgba(229, 27, 35, .07) 0%, transparent 62%),
        radial-gradient(50% 80% at 4% 4%, rgba(229, 27, 35, .045) 0%, transparent 60%);
}

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

/* Main column + sticky rail. The rail is information, never the main event. */
/*
 * `stretch`, not `start`.
 *
 * This is what makes the follower below possible. With `start`, the rail's box
 * is only as tall as its cards — about 1500px — so a sticky child inside it
 * can only travel that far, and the remaining ~4300px of a long game page is
 * dead white space beside the content. Stretched, the rail's box is as tall as
 * the row, and a sticky child can follow the reader the whole way down.
 */
.bgd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail);
    gap: var(--gap);
    align-items: stretch;
    padding-bottom: 72px;
}
.bgd-main { min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
/*
 * STICKY ONLY WHEN IT FITS.
 *
 * `position: sticky` pins an element's TOP. When the rail is taller than the
 * viewport — five cards on a 889px screen measured 1507px — pinning the top
 * means the bottom of it never comes into view: Content Rating and Quick Links
 * were unreachable until the reader hit the very end of the page and the
 * containing block finally dragged them up.
 *
 * So the default here is static, and game-detail.js adds `is-stuck` only when
 * the rail actually fits the space it would be pinned in. A short rail (or a
 * tall display) sticks; a long one scrolls with the page and every card is
 * reachable. If the script never runs, nothing sticks and nothing is lost —
 * which is the right way round for a failure.
 */
/*
 * THE RAIL ITSELF NEVER STICKS. One element inside it does.
 *
 * Sticking the whole rail is the obvious move and it is wrong twice: pinned at
 * its top, a rail taller than the viewport hides its own bottom (Content
 * Rating and Quick Links were unreachable), and pinned at all it still leaves
 * the column below it empty on a long page.
 *
 * So the cards flow normally — every one of them scrollable to — and the LAST
 * module is sticky. It travels down beside the whole article, which is both
 * what fills the space and what a reader four thousand pixels into a page
 * actually wants: the price and the button.
 */
.bgd-side { min-width: 0; position: static; }

/*
 * THE WHOLE RAIL FOLLOWS — pinned by whichever edge actually works.
 *
 * `top` and `bottom` are not interchangeable here, and picking the wrong one
 * is what broke this twice:
 *
 *   is-top     the rail is SHORTER than the viewport, so pinning its top
 *              keeps all of it on screen. Correct for a sparse game.
 *   is-bottom  the rail is TALLER than the viewport. Pinning the top would
 *              hide its own bottom for ever; pinning the BOTTOM lets it scroll
 *              naturally on the way down — every card passes the reader — and
 *              then hold, so the last screenful stays alongside the remaining
 *              article instead of leaving an empty column.
 *
 * game-detail.js measures and picks. With no script neither class is set, the
 * rail is plain static, and every card is still reachable — the right way for
 * this to fail.
 */
.bgd-side-in { display: flex; flex-direction: column; gap: 18px; }
.bgd-side-in.is-follow { position: sticky; /* top is set inline — see below */ }

/* The follower no longer pins itself: the rail it sits in does that now, and
   two nested sticky elements fight over the same scroll. */
.bgd-follow { position: static; }

/* ── The follower's card ────────────────────────────────────────────────── */

.bgd-cta {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 13px;
    padding: 18px;
    border-radius: var(--r-lg);
    background:
        radial-gradient(130% 110% at 100% 0%, rgba(229, 27, 35, .11) 0%, transparent 62%),
        var(--surface);
    border: 1px solid var(--red-line);
    box-shadow: var(--e3);
}
.bgd-cta-top { display: flex; align-items: center; gap: 13px; min-width: 0; }
.bgd-cta-art {
    flex: 0 0 54px; width: 54px; border-radius: 10px; overflow: hidden;
    line-height: 0; box-shadow: var(--e2);
}
.bgd-cta-art img { width: 100%; height: auto; }
.bgd-cta-b { min-width: 0; }
.bgd-cta-b b {
    display: block; font-size: 15px; font-weight: 800; letter-spacing: -.02em;
    color: var(--ink); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bgd-cta-b > span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.bgd-cta-s {
    display: inline-flex !important; align-items: center; gap: 4px;
    margin-top: 7px; padding: 3px 9px; border-radius: 999px;
    background: var(--red-soft); color: var(--red);
    font-size: 12px; font-weight: 800;
}
.bgd-cta > .bgd-btn { width: 100%; }
.bgd-cta-row { display: flex; gap: 8px; }
.bgd-cta-row .bgd-btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; }

.bgd-top {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 2px; font-size: 12px; font-weight: 700; color: var(--muted);
    transition: color .18s var(--ease);
}
.bgd-top:hover { color: var(--red); }

/* A row of two equal cards, which is the reference composition. */
.bgd-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
/*
 * 2fr, not 1.25fr.
 *
 * At 1.25fr the About card was ~511px wide, and after its padding that left a
 * ~460px measure for five paragraphs of body copy — narrow enough that the
 * text became a column nobody reads. 2fr gives ~560px of measure, which is
 * around 62 characters and inside the comfortable range for 15px Inter. The
 * partner card loses width it was not using.
 */
.bgd-row.is-wide  { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.bgd-row.is-tight { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }

/*
 * A row whose partner removed itself must not leave a hole.
 *
 * Every section in this design renders nothing when it has no data, so a
 * two-up row is a request, not a guarantee: a game with no linked articles
 * left the Companies card sitting in the left half with an empty right half
 * beside it. When only one child survives it takes the full width.
 *
 * Declared AFTER the modifiers above — same specificity, so source order is
 * what makes it win over .is-wide and .is-tight. A browser without :has()
 * simply keeps the gap, which is the behaviour this replaces rather than
 * something worse.
 */
.bgd-row:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

/* ── Breadcrumbs ────────────────────────────────────────────────────────── */

.bgd-crumbs {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 20px 0 18px; font-size: 13px; color: var(--muted);
}
.bgd-crumbs a { font-weight: 600; padding: 5px 3px; margin: -5px -3px; transition: color .18s var(--ease); }
.bgd-crumbs a:hover { color: var(--red); }
.bgd-crumbs .gd-i { color: var(--faint); }
.bgd-crumbs [aria-current] { color: var(--ink); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO
   ---------------------------------------------------------------------------
   A single large cinematic plate with everything the reader needs to decide
   whether to keep reading: the art, the name, the pitch, the facts and the
   action. Dark inside its own frame, so the gradient overlay is contained and
   never bleeds into the page around it.
   ═══════════════════════════════════════════════════════════════════════════ */

.bgd-hero {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--dark);
    box-shadow: var(--e4);
    color: var(--on-soft);
}

.bgd-hero-art { position: absolute; inset: 0; z-index: -3; }
.bgd-hero-art img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transform: scale(1.08);
    filter: saturate(1.1) contrast(1.03);
    will-change: transform;
}

/* Readability scrim. Heavy where the copy sits, light where the art should
   still read as art. Contained by the hero's own radius and overflow, so the
   darkening never touches the page. */
.bgd-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
        linear-gradient(96deg,
            rgba(8, 10, 14, .94) 0%,
            rgba(8, 10, 14, .86) 26%,
            rgba(8, 10, 14, .58) 54%,
            rgba(8, 10, 14, .30) 74%,
            rgba(8, 10, 14, .62) 100%),
        linear-gradient(180deg, rgba(8, 10, 14, .52) 0%, rgba(8, 10, 14, .04) 34%, rgba(8, 10, 14, .88) 100%);
}
.bgd-hero::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(64% 84% at 4% -6%, rgba(229, 27, 35, .30) 0%, transparent 58%),
        radial-gradient(44% 62% at 100% 104%, rgba(229, 27, 35, .16) 0%, transparent 62%);
}

/* No artwork: a composed brand surface, never a borrowed screenshot. */
.bgd-hero.is-blank {
    background:
        radial-gradient(86% 116% at 8% -16%, rgba(229, 27, 35, .38) 0%, transparent 56%),
        radial-gradient(64% 86% at 96% 8%, rgba(229, 27, 35, .16) 0%, transparent 58%),
        linear-gradient(158deg, #1A1F2B 0%, #0E1116 46%, #090B10 100%);
}
.bgd-hero.is-blank::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, .038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .038) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(124% 104% at 32% 0%, #000 0%, transparent 74%);
            mask-image: radial-gradient(124% 104% at 32% 0%, #000 0%, transparent 74%);
}

.bgd-hero-in { position: relative; padding: 34px 38px 0; }

.bgd-hero-grid {
    display: grid; grid-template-columns: 224px minmax(0, 1fr);
    gap: 38px; align-items: center;
}

/* The cover, floating on the plate. */
.bgd-hero-cover {
    position: relative; width: 224px; border-radius: 18px; overflow: hidden;
    line-height: 0; font-size: 0;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .12);
    transition: transform var(--bg-t-base, .2s) var(--bg-e-out, cubic-bezier(.22,1,.36,1));
}
.bgd-hero-cover img { width: 100%; height: auto; display: block; }
.bgd-hero:hover .bgd-hero-cover { transform: translateY(-4px); }

/* Branded fallback when the record carries no cover. */
.bgd-cover-fb {
    position: relative; display: grid; place-items: center;
    width: 100%; aspect-ratio: 3 / 4;
    background:
        radial-gradient(120% 100% at 18% 0%, rgba(229, 27, 35, .32) 0%, transparent 58%),
        linear-gradient(150deg, #1B1F2A 0%, #0E1116 100%);
    color: #fff; overflow: hidden; line-height: 1;
}
.bgd-cover-fb::after {
    content: ''; position: absolute; inset: 0;
    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: 22px 22px;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 25%, transparent 100%);
            mask-image: radial-gradient(80% 70% at 50% 40%, #000 25%, transparent 100%);
}
.bgd-cover-fb b {
    position: relative; z-index: 1;
    font-size: clamp(30px, 20cqw, 62px); font-weight: 900; letter-spacing: -.05em;
}

.bgd-hero-body { min-width: 0; }

.bgd-hero-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px; border-radius: 999px;
    background: linear-gradient(135deg, #FF2A32, var(--red-dark));
    color: #fff; font-size: 10.5px; font-weight: 800;
    letter-spacing: .11em; text-transform: uppercase;
    box-shadow: var(--e-red);
}

/*
 * `.bgd .bgd-hero-t`, not `.bgd-hero-t`.
 *
 * The base rule `.bgd h1, .bgd h2, ...` sets the light-theme ink colour and
 * scores 0-1-1. A single class scores 0-1-0 and LOSES to it, which rendered
 * the title in near-black over the dark artwork — invisible. Two classes score
 * 0-2-0 and win. The same trap applies to any heading placed on the hero
 * plate, which is why the tagline below is a <p>.
 */
.bgd .bgd-hero-t {
    margin-top: 16px;
    font-size: clamp(40px, 4.6vw, 68px); font-weight: 900;
    letter-spacing: -.042em; line-height: .98; color: var(--on);
    text-shadow: 0 2px 30px rgba(0, 0, 0, .6);
}
.bgd-hero-tag {
    margin-top: 14px; max-width: 44ch;
    font-size: clamp(17px, 1.6vw, 21px); font-weight: 650; line-height: 1.4;
    letter-spacing: -.016em; color: var(--on);
}
.bgd-hero-x {
    margin-top: 13px; max-width: 62ch;
    font-size: 14.5px; line-height: 1.68; color: var(--on-soft);
}

/* ── Hero fact pills ────────────────────────────────────────────────────── */

.bgd-hero-meta {
    display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0;
}
.bgd-hero-meta > div {
    display: flex; flex-direction: column; gap: 4px;
    padding: 11px 17px; border-radius: 13px; min-width: 0;
    background: var(--on-fill); border: 1px solid var(--on-line);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bgd-hero-meta dt {
    display: flex; align-items: center; gap: 6px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--on-dim);
}
.bgd-hero-meta dd { margin: 0; font-size: 14px; font-weight: 750; color: var(--on); white-space: nowrap; }
.bgd-hero-meta dd a:hover { color: var(--red-lit); }
.bgd-dot { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; flex: 0 0 6px; }
/* The platform glyphs are 18px because that is the weight they should carry in
   a metadata row — but an 18x18 link is below the 24x24 minimum target size in
   WCAG 2.5.8, and there are seven of them in a row on a phone. Padding grows
   each target to 30x30 while the glyph stays 18px; the negative margin pulls
   the row back to the spacing it had, so nothing moves. */
.bgd-plat-row { display: flex; align-items: center; gap: 9px; color: var(--on); margin-inline: -6px; }
.bgd-plat-row a {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px; border-radius: 8px;
    transition: color var(--bg-t-snap, .14s) var(--bg-e-out, cubic-bezier(.22,1,.36,1)),
                transform var(--bg-t-snap, .14s) var(--bg-e-out, cubic-bezier(.22,1,.36,1)),
                background var(--bg-t-snap, .14s) var(--bg-e-out, cubic-bezier(.22,1,.36,1));
}
.bgd-plat-row a:hover { color: var(--red-lit); transform: translateY(-2px); background: var(--surface-2, rgba(0,0,0,.04)); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.bgd-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 22px; border-radius: 13px;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    font-size: 14px; font-weight: 750; line-height: 1; white-space: nowrap;
    box-shadow: var(--e1);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease),
                border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.bgd-btn:hover { transform: translateY(-2px); box-shadow: var(--e2); border-color: var(--red-line); color: var(--red); }
.bgd-btn:active { transform: translateY(0); }
.bgd-btn .gd-i { transition: transform .22s var(--spring); }
.bgd-btn:hover .gd-i { transform: translateX(2px); }

.bgd-btn-red {
    background: linear-gradient(135deg, #FF3138, var(--red-dark));
    border-color: transparent; color: #fff; box-shadow: var(--e-red);
}
.bgd-btn-red:hover {
    background: linear-gradient(135deg, #FF474E, var(--red));
    border-color: transparent; color: #fff;
    box-shadow: 0 16px 34px -10px rgba(229, 27, 35, .68);
}
.bgd-btn-red:hover .gd-i { transform: scale(1.12); }

/*
 * The same four colours again, for buttons that are links.
 *
 * `.bgd a { color: inherit }` near the top of this file is one class and one
 * type — 0-1-1 — and every rule above is a single class at 0-1-0, so an <a>
 * styled as a button LOST all of them and inherited `--body` from `.bgd`
 * instead. On a white button that is a shade of grey nobody notices. On the
 * red gradient it measured 1.14:1: the sidebar's "Get Game ₹3,599.00" had its
 * price, and its label, in dark grey on red.
 *
 * The hero's own buttons never showed it, because `.bgp-hero .bgd-btn` is
 * 0-2-0 and already outranked the reset — which is exactly why this was easy
 * to miss.
 *
 * Order matters below: the red rules follow the base ones so a red button's
 * hover does not pick up the base hover's `var(--red)` on red.
 */
.bgd a.bgd-btn { color: var(--ink); }
.bgd a.bgd-btn:hover { color: var(--red); }
.bgd a.bgd-btn-red,
.bgd a.bgd-btn-red:hover { color: #fff; }

.bgd-btn-lg { padding: 15px 26px; font-size: 15px; border-radius: 14px; }
.bgd-btn-sm { padding: 9px 15px; font-size: 13px; border-radius: 10px; }
.bgd-btn-ico { padding: 13px; }
.bgd-btn-ico .gd-i { transform: none; }
.bgd-btn-ico:hover .gd-i { transform: none; }

/* On the hero plate the buttons take the dark palette. */
.bgd-hero .bgd-btn {
    background: rgba(255, 255, 255, .10); border-color: var(--on-line); color: var(--on);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: none;
}
.bgd-hero .bgd-btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .46); color: var(--on); }
.bgd-hero .bgd-btn-red { background: linear-gradient(135deg, #FF3138, var(--red-dark)); border-color: transparent; box-shadow: var(--e-red); }
.bgd-hero .bgd-btn-red:hover { background: linear-gradient(135deg, #FF474E, var(--red)); }

.bgd-hero-cta { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 26px; }

/* The favourite heart fills and pops when it turns on. */
.bgd-fav.is-on .gd-i { fill: var(--red-lit); stroke: var(--red-lit); animation: bgd-pop .34s var(--spring); }
@keyframes bgd-pop { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* Share gives feedback rather than silently doing nothing. */
/*
 * WRAPS, and is capped. This was `white-space: nowrap`, which is fine for
 * "Link copied" and runs clean off the side of a phone for "Link copied —
 * paste it into your story". A tooltip that leaves the viewport is a tooltip
 * nobody reads.
 *
 * The 2.2s duration matches the timeout that removes the class; a shorter
 * animation would finish and leave the element sitting there invisible but
 * present for the remainder.
 */
.bgd-copied::after {
    content: attr(data-copied); position: absolute; z-index: 5;
    left: 50%; bottom: calc(100% + 10px);
    transform: translateX(-50%);
    width: max-content; max-width: min(240px, 70vw);
    padding: 7px 12px; border-radius: 8px;
    background: var(--dark-2); color: #fff;
    font-size: 11.5px; font-weight: 700; line-height: 1.4; text-align: center;
    box-shadow: var(--e2);
    animation: bgd-fade 2.2s var(--ease) forwards; pointer-events: none;
}
@keyframes bgd-fade { 0% { opacity: 0; transform: translate(-50%, 6px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ── Hero media strip ───────────────────────────────────────────────────── */

.bgd-strip { display: flex; gap: 12px; padding: 28px 0 30px; overflow: hidden; }
.bgd-shot {
    position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 16 / 9;
    border-radius: 13px; overflow: hidden; padding: 0;
    background: #0E1116; border: 1px solid var(--on-line);
    transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.bgd-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bg-t-panel, .28s) var(--bg-e-out, cubic-bezier(.22,1,.36,1)); }
.bgd-shot:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, .55); box-shadow: 0 18px 36px rgba(0, 0, 0, .5); }
.bgd-shot:hover img { transform: scale(1.07); }
.bgd-shot-ov {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: linear-gradient(180deg, rgba(8, 10, 14, .04), rgba(8, 10, 14, .48));
    opacity: 0; transition: opacity .26s var(--ease);
}
.bgd-shot:hover .bgd-shot-ov { opacity: 1; }
.bgd-shot-ov span {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--ink);
    transform: scale(.8); transition: transform .26s var(--spring);
}
.bgd-shot:hover .bgd-shot-ov span { transform: scale(1); }

/* A video tile keeps its play badge at rest — the two media kinds must be
   told apart before the reader clicks one. */
.bgd-shot.is-video .bgd-shot-ov { opacity: 1; background: linear-gradient(180deg, rgba(8, 10, 14, .06), rgba(8, 10, 14, .46)); }
.bgd-shot.is-video .bgd-shot-ov span { background: rgba(229, 27, 35, .95); color: #fff; transform: scale(1); }
.bgd-shot.is-video:hover .bgd-shot-ov span { transform: scale(1.12); }
.bgd-shot-l {
    position: absolute; left: 9px; bottom: 8px; z-index: 2;
    padding: 3px 8px; border-radius: 6px;
    background: rgba(8, 10, 14, .74); color: #fff;
    font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.bgd-shot-more {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: rgba(255, 255, 255, .09); color: var(--on);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bgd-shot-more b { font-size: 19px; font-weight: 900; letter-spacing: -.02em; }
.bgd-shot-more span { font-size: 11px; font-weight: 650; color: var(--on-dim); }

/* ═══ RATING PANEL — dark, and the only dark card in the rail ═════════════ */

.bgd-rating {
    position: relative; overflow: hidden;
    border-radius: var(--r-lg); padding: 22px;
    background: linear-gradient(158deg, #171C25 0%, var(--dark) 62%);
    box-shadow: var(--e3);
    color: var(--on-soft);
}
.bgd-rating::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(70% 90% at 96% -10%, rgba(229, 27, 35, .26) 0%, transparent 60%);
}
.bgd-rating > * { position: relative; }
.bgd-rating-h {
    display: flex; align-items: center; gap: 9px;
    font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--on-soft);
}
.bgd-rating-h .gd-i { color: var(--red-lit); }
.bgd-rating-h .bgd-info { margin-left: auto; color: var(--on-dim); cursor: help; }

.bgd-rating-b { display: flex; align-items: center; gap: 20px; padding: 20px 0 18px; }
.bgd-ring {
    position: relative; flex: 0 0 92px; width: 92px; height: 92px; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--red) calc(var(--pct) * 1%), rgba(255, 255, 255, .12) 0);
}
.bgd-ring::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #12161D; }
.bgd-ring b {
    position: relative; z-index: 1;
    font-size: 30px; font-weight: 900; letter-spacing: -.04em; color: var(--on); line-height: 1;
}
.bgd-rating-v { min-width: 0; }
.bgd-rating-v > b { display: block; font-size: 22px; font-weight: 850; letter-spacing: -.028em; color: var(--on); }
.bgd-stars { display: flex; gap: 2px; margin-top: 7px; color: #FFC53D; }
.bgd-stars .gd-i { fill: currentColor; }
.bgd-stars .is-off { color: rgba(255, 255, 255, .22); fill: rgba(255, 255, 255, .22); }
.bgd-rating-v > span { display: block; margin-top: 8px; font-size: 12px; color: var(--on-dim); line-height: 1.45; }

.bgd-critics { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--on-line); }
.bgd-critic { padding: 15px 0 2px; }
.bgd-critic + .bgd-critic { border-left: 1px solid var(--on-line); padding-left: 20px; }
.bgd-critic b { display: block; font-size: 24px; font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.bgd-critic span { display: block; margin-top: 5px; font-size: 11px; font-weight: 650; color: var(--on-dim); }
.bgd-critic.is-high b { color: #4ADE80; }
.bgd-critic.is-mid  b { color: #FACC15; }
.bgd-critic.is-low  b { color: #F87171; }
a.bgd-critic:hover b { filter: brightness(1.15); }

/* ═══ STICKY SECTION TABS ═════════════════════════════════════════════════ */

/* --bgd-sticky is measured and published by game-detail.js: it is the height
   of whatever shared site furniture is pinned above this bar. Written as a
   variable rather than a number so a header that changes height, or stops
   being sticky, needs no edit here. Falls back to 0 when the script has not
   run, which is correct for a non-sticky header. */
.bgd-tabs {
    position: sticky; top: var(--bgd-sticky, 0px); z-index: 40;
    /* The main column is a flex stack with its own gap; a margin here would
       add to it rather than replace it. */
    margin: 0;
    background: color-mix(in srgb, var(--canvas) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--line);
}
.bgd-tabs-in {
    position: relative; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
    /*
     * The bar is built from the sections a game actually has, so a rich game
     * overflows it: eleven tabs measured 1681px inside 1344px, and the last
     * one was sliced mid-word — "Development & Own". A cut word reads as a
     * layout fault; a fade reads as "there is more this way".
     *
     * The mask only bites when content reaches the edge, so a sparse game with
     * three tabs is untouched.
     */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 30px), transparent 100%);
    /* Tabbing to a hidden tab scrolls it clear of the fade, not under it. */
    scroll-padding-inline: 30px;
}
.bgd-tabs-in::-webkit-scrollbar { display: none; }
.bgd-tab {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 17px 18px 15px;
    font-size: 14px; font-weight: 650; color: var(--muted);
    transition: color .2s var(--ease);
}
.bgd-tab:hover { color: var(--ink); }
.bgd-tab.is-on { color: var(--red); font-weight: 750; }
.bgd-tab .gd-i { opacity: 0; transform: scale(.6); transition: opacity .2s var(--ease), transform .2s var(--spring); }
.bgd-tab.is-on .gd-i { opacity: 1; transform: scale(1); }
.bgd-tab-n {
    font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
    background: var(--sunken); color: var(--muted);
}
.bgd-tab.is-on .bgd-tab-n { background: var(--red-soft); color: var(--red); }

/* The marker slides between tabs rather than cutting. */
.bgd-tabs-ink {
    position: absolute; bottom: 0; left: 0; height: 2.5px; width: 0;
    border-radius: 2px 2px 0 0; background: var(--red);
    transition: transform .34s var(--ease), width .34s var(--ease);
    pointer-events: none;
}

/* ═══ CARD — the one surface every section is built from ══════════════════ */

.bgd-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--e2);
    overflow: hidden;
    /* Clears the section bar AND whatever is pinned above it, so an anchor
       never lands with its heading hidden under the furniture. */
    scroll-margin-top: calc(var(--bgd-sticky, 0px) + 96px);
    transition: box-shadow .34s var(--ease);
}
/* The section cards answer to the pointer too, but quietly: they are large
   surfaces, and a big panel that lifts and glows reads as a button. Deeper
   elevation and a hint of brand in the edge is enough to say "live". */
.bgd-card:hover { box-shadow: var(--e3); border-color: var(--red-line); }

.bgd-card-h {
    display: flex; align-items: center; gap: 12px;
    padding: 22px 26px 18px;
}
.bgd-card-h .bgd-card-m {
    display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px;
    border-radius: 9px; background: var(--red-soft); color: var(--red);
}
.bgd-card-h h2, .bgd-card-h h3 {
    font-size: 13px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase;
    color: var(--ink);
}
.bgd-card-h .bgd-card-x { font-size: 12.5px; color: var(--muted); font-weight: 550; letter-spacing: 0; text-transform: none; margin-top: 2px; }
.bgd-card-hb { min-width: 0; }
.bgd-more {
    margin-left: auto; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    /* A standalone control, not a word inside a sentence, so it does not get
       the inline exception to the 24px minimum target size. The block padding
       takes it to 25px tall; the negative margin keeps the card header the
       height it was. */
    padding-block: 4px; margin-block: -4px;
    font-size: 12.5px; font-weight: 750; color: var(--red);
    transition: color var(--bg-t-snap, .14s) var(--bg-e-out, cubic-bezier(.22,1,.36,1));
}
/* The arrow travels, not the gap. `gap` is a layout property — transitioning it
   ran a reflow of the card header on every pointer-over, for an effect the eye
   reads identically when it is a composited translate on the glyph alone. */
.bgd-more svg,
.bgd-more > :last-child {
    transition: transform var(--bg-t-base, .2s) var(--bg-e-out, cubic-bezier(.22,1,.36,1));
}
.bgd-more:hover svg,
.bgd-more:hover > :last-child { transform: translateX(4px); }
.bgd-card-b { padding: 0 26px 26px; }
.bgd-card-b.is-flush { padding: 0; }
.bgd-card-f {
    display: flex; align-items: center; justify-content: center;
    padding: 15px 26px; border-top: 1px solid var(--line-soft);
    font-size: 13px; font-weight: 750; color: var(--red);
    transition: background .2s var(--ease), gap .2s var(--ease); gap: 7px;
}
.bgd-card-f:hover { background: var(--red-soft); gap: 11px; }

/* ── Prose ──────────────────────────────────────────────────────────────── */

/* 78ch. The About card is full width now, so the measure is set here rather
   than by the column: 70ch left an obvious ragged edge of white beside the
   text, and much past 80ch the eye starts losing its place returning to the
   left margin. */
.bgd-prose { font-size: 15px; line-height: 1.78; color: var(--body); max-width: 78ch; }
.bgd-prose > * + * { margin-top: 1.05em; }
.bgd-prose strong, .bgd-prose b { color: var(--ink); font-weight: 700; }
.bgd-prose h2 { font-size: 19px; font-weight: 800; margin-top: 1.6em; }
.bgd-prose h3 { font-size: 16.5px; font-weight: 800; margin-top: 1.4em; }
.bgd-prose a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.bgd-prose ul, .bgd-prose ol { padding-left: 1.3em; margin-top: 1em; }
.bgd-prose li + li { margin-top: .4em; }
.bgd-prose img { border-radius: var(--r-sm); margin: 1.3em 0; }
.bgd-prose blockquote {
    margin: 1.4em 0; padding: 14px 20px;
    border-left: 3px solid var(--red); background: var(--sunken);
    border-radius: 0 var(--r-xs) var(--r-xs) 0; color: var(--ink); font-style: italic;
}
.bgd-prose table { margin: 1.4em 0; font-size: 14px; display: block; overflow-x: auto; }
.bgd-prose th, .bgd-prose td { border: 1px solid var(--line); padding: 9px 13px; text-align: left; vertical-align: top; }
.bgd-prose th { background: var(--sunken); font-weight: 700; color: var(--ink); }

.bgd-clamp { position: relative; }
.bgd-clamp[data-open="false"] .bgd-clamp-b {
    max-height: 240px; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}
.bgd-clamp-t { margin-top: 18px; }
.bgd-clamp-t .gd-i { transition: transform .26s var(--ease); }
.bgd-clamp[data-open="true"] .bgd-clamp-t .gd-i { transform: rotate(180deg); }

/* A faint brand watermark behind the About copy, masked well away from text. */
.bgd-mark {
    position: absolute; right: -30px; bottom: -40px; width: 240px; height: 240px;
    pointer-events: none; opacity: .05; color: var(--red);
}

/* ── Chips ──────────────────────────────────────────────────────────────── */

.bgd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bgd-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface);
    font-size: 13px; font-weight: 650; color: var(--body);
    transition: border-color .18s var(--ease), color .18s var(--ease),
                background .18s var(--ease), transform .18s var(--ease);
}
a.bgd-chip:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); transform: translateY(-2px); }
.bgd-chip.is-quiet { background: var(--sunken); border-color: transparent; color: var(--muted); }

/* ── Features ───────────────────────────────────────────────────────────── */

/* auto-fit, not a hard two: this card now sits in the narrow half of its row,
   and two fixed columns there gave each feature ~120px — enough to break
   "Multithreaded Rendering" across three lines. It takes whatever columns the
   width actually supports. */
.bgd-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 8px; }
.bgd-feat {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 14px; border-radius: var(--r-xs);
    min-width: 0;
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.bgd-feat:hover { background: var(--red-soft); transform: translateX(3px); }
.bgd-feat-i {
    display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px;
    border-radius: 8px; background: var(--red-soft); color: var(--red);
    transition: background .2s var(--ease), color .2s var(--ease), transform .24s var(--spring);
}
.bgd-feat:hover .bgd-feat-i { background: var(--red); color: #fff; transform: scale(1.08); }
.bgd-feat b { font-size: 13.5px; font-weight: 650; color: var(--ink-2); line-height: 1.35; min-width: 0; }

/* ── Gallery. Cinematic tiles at varied sizes, never a grid of stamps. ──── */

.bgd-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bgd-gal-i {
    position: relative; padding: 0; overflow: hidden; cursor: pointer;
    border-radius: var(--r-xs); background: var(--sunken);
    aspect-ratio: 4 / 3; display: block; width: 100%;
    transition: transform .34s var(--ease), box-shadow .34s var(--ease), z-index 0s;
}
/* The first tile earns twice the room — a set of equals reads as a contact
   sheet, and this is meant to read as artwork. */
.bgd-gal-i:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.bgd-gal-i img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bg-t-panel, .28s) var(--bg-e-out, cubic-bezier(.22,1,.36,1)); }
.bgd-gal-i:hover { transform: translateY(-4px); box-shadow: var(--e3); z-index: 2; }
.bgd-gal-i:hover img { transform: scale(1.07); }
.bgd-gal-ov {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
    padding: 14px;
    background: linear-gradient(180deg, transparent 40%, rgba(6, 8, 12, .82) 100%);
    opacity: 0; transition: opacity .3s var(--ease);
    text-align: left;
}
.bgd-gal-i:hover .bgd-gal-ov { opacity: 1; }
.bgd-gal-ov b { font-size: 13.5px; font-weight: 750; color: #fff; line-height: 1.3; }
.bgd-gal-ov span { font-size: 11px; font-weight: 650; color: rgba(255, 255, 255, .66); letter-spacing: .05em; text-transform: uppercase; }
.bgd-gal-x {
    position: absolute; top: 11px; right: 11px;
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .92); color: var(--ink);
    opacity: 0; transform: scale(.7) translateY(-4px);
    transition: opacity .28s var(--ease), transform .28s var(--spring);
}
.bgd-gal-i:hover .bgd-gal-x { opacity: 1; transform: scale(1) translateY(0); }

/* ── Trailer ────────────────────────────────────────────────────────────── */

.bgd-trailer { display: flex; flex-direction: column; gap: 10px; }
.bgd-trailer-m {
    position: relative; width: 100%; padding: 0; overflow: hidden; cursor: pointer;
    border-radius: var(--r-sm); aspect-ratio: 16 / 9; background: #0E1116; display: block;
    transition: box-shadow .3s var(--ease);
}
.bgd-trailer-m img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bg-t-panel, .28s) var(--bg-e-out, cubic-bezier(.22,1,.36,1)); }
.bgd-trailer-m:hover img { transform: scale(1.05); }
.bgd-trailer-m:hover { box-shadow: var(--e3); }
.bgd-trailer-ov {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: linear-gradient(180deg, rgba(8, 10, 14, .16), rgba(8, 10, 14, .5));
}
.bgd-play {
    position: relative;
    display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%;
    background: var(--red); color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
    transition: transform .26s var(--spring), background .2s var(--ease);
}
.bgd-trailer-m:hover .bgd-play { transform: scale(1.1); background: var(--red-lit); }
/* One slow pulse, so the control reads as live without ever being a strobe. */
.bgd-play::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid rgba(229, 27, 35, .5);
    animation: bgd-pulse 2.6s var(--ease) infinite;
}
@keyframes bgd-pulse {
    0%   { transform: scale(1);    opacity: .8; }
    70%  { transform: scale(1.35); opacity: 0;  }
    100% { transform: scale(1.35); opacity: 0;  }
}
.bgd-trailer-c {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 18px;
    background: linear-gradient(180deg, transparent, rgba(6, 8, 12, .8));
    text-align: left;
}
.bgd-trailer-c b { display: block; font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.bgd-trailer-c span { display: block; margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .64); }
.bgd-trailer-r { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bgd-trailer-r .bgd-shot { flex: none; border-color: var(--line); }
.bgd-trailer-r .bgd-shot:hover { border-color: var(--red-line); box-shadow: var(--e2); }

/* ── Articles ───────────────────────────────────────────────────────────── */

.bgd-arts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.bgd-art { display: flex; flex-direction: column; gap: 13px; min-width: 0; transition: transform .28s var(--ease); }
.bgd-art:hover { transform: translateY(-5px); }
.bgd-art-a {
    position: relative; overflow: hidden; border-radius: var(--r-sm);
    aspect-ratio: 16 / 10; background: var(--sunken);
    box-shadow: var(--e1); transition: box-shadow .28s var(--ease);
}
.bgd-art:hover .bgd-art-a { box-shadow: var(--e3); }
.bgd-art-a img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bg-t-panel, .28s) var(--bg-e-out, cubic-bezier(.22,1,.36,1)); }
.bgd-art:hover .bgd-art-a img { transform: scale(1.06); }
.bgd-art-k {
    position: absolute; top: 11px; left: 11px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(9, 11, 15, .74); color: #fff;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.bgd-art-k .gd-i { color: var(--red-lit); }
.bgd-art-b { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bgd-art-b > b { font-size: 15.5px; font-weight: 750; color: var(--ink); line-height: 1.38; letter-spacing: -.016em; }
.bgd-art:hover .bgd-art-b > b { color: var(--red); }
.bgd-art-x {
    font-size: 13px; line-height: 1.6; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bgd-art-m { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.bgd-art-m span { display: inline-flex; align-items: center; gap: 5px; }
.bgd-art-m span + span::before { content: '·'; margin-right: 3px; }
.bgd-art-go {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
    font-size: 12.5px; font-weight: 750; color: var(--red);
    opacity: 0; transform: translateY(-4px);
    transition: opacity .26s var(--ease), transform .26s var(--ease), gap .2s var(--ease);
}
.bgd-art:hover .bgd-art-go { opacity: 1; transform: translateY(0); }
.bgd-art:hover .bgd-art-go:hover { gap: 10px; }

/* ── Companies ──────────────────────────────────────────────────────────── */

.bgd-cos { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 16px; }
.bgd-co {
    position: relative; display: flex; flex-direction: column; gap: 11px;
    padding: 22px 20px 20px; border-radius: var(--r);
    background: linear-gradient(170deg, var(--sunken) 0%, var(--surface) 55%);
    border: 1px solid var(--line);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.bgd-co:hover { transform: translateY(-5px); box-shadow: var(--e3); border-color: var(--red-line); }
.bgd-co-m {
    display: grid; place-items: center; width: 62px; height: 62px; flex: 0 0 62px;
    border-radius: 16px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--e1);
    font-size: 24px; font-weight: 900; color: var(--red); letter-spacing: -.04em;
    transition: transform .3s var(--spring);
}
.bgd-co:hover .bgd-co-m { transform: translateY(-3px) scale(1.04); }
/* CONTAIN, never cover: a wordmark cropped to fill a square is a broken logo. */
.bgd-co-m img { width: 78%; height: 78%; object-fit: contain; }
.bgd-co-n {
    display: flex; align-items: center; gap: 7px;
    font-size: 15.5px; font-weight: 800; color: var(--ink); letter-spacing: -.018em; line-height: 1.25;
}
.bgd-co-v { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; background: var(--red); color: #fff; }
.bgd-co-r { font-size: 11.5px; font-weight: 750; color: var(--red); line-height: 1.35; }
.bgd-co-x {
    font-size: 12.5px; line-height: 1.55; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bgd-co-go {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: auto; padding: 10px 14px; border-radius: 11px;
    border: 1px solid var(--line); background: var(--surface);
    font-size: 12.5px; font-weight: 750; color: var(--ink);
    transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.bgd-co:hover .bgd-co-go { background: var(--red); border-color: var(--red); color: #fff; }
.bgd-co-go .gd-i { transition: transform .22s var(--spring); }
.bgd-co:hover .bgd-co-go .gd-i { transform: translateX(3px); }
/* The stretched link covers the card so the whole thing is one target, while
   the button keeps its own look. */
.bgd-co-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }

/* ═══ LANGUAGES — a card/table hybrid, expanded by default ════════════════ */

/*
 * A real <table> — caption, column headers, a row header per language — that
 * is PAINTED as a stack of panels. Screen readers still announce "English,
 * Interface, Yes"; only the drawing changed.
 *
 * `display: block` on the table and on thead/tbody is load-bearing. Setting
 * flex or grid on the <table> itself makes THEAD and TBODY the items, not the
 * rows, and every row then collapses into one cell-wide column. Blocking the
 * groups out first is what lets each <tr> become its own grid.
 */
.bgd-langs { display: block; width: 100%; border-collapse: separate; border-spacing: 0; }
.bgd-langs thead, .bgd-langs tbody { display: block; width: 100%; }
.bgd-langs th, .bgd-langs td { border: 0; background: none; }

/* 96px, not 74px: "Interface" and "Subtitles" at 10px uppercase with .09em
   tracking do not fit 74px and were breaking across two lines mid-word
   ("INTERF / ACE"). nowrap makes that a visible overflow rather than a silent
   wrap if the copy is ever translated longer. */
.bgd-lang-head {
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 96px);
    gap: 10px; padding: 0 14px 10px;
    font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted); text-align: left;
}
.bgd-lang-head th { white-space: nowrap; }
.bgd-lang-head th:not(:first-child) { text-align: center; }
.bgd-lang {
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 96px);
    gap: 10px; align-items: center;
    padding: 11px 14px; border-radius: var(--r-xs);
    transition: background .2s var(--ease);
}
.bgd-lang:nth-child(odd) { background: var(--sunken); }
.bgd-lang:hover { background: var(--red-soft); }
/* A <th scope="row">, so the UA gives it bold + centred by default. The
   weight belongs on the name inside it, not on the cell. */
.bgd-lang-n { display: flex; align-items: center; gap: 11px; min-width: 0; text-align: left; font-weight: 400; }
.bgd-lang-n b {
    font-size: 13.5px; font-weight: 650; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bgd-flag {
    flex: 0 0 26px; width: 26px; height: 19px; border-radius: 3px; overflow: hidden;
    box-shadow: 0 0 0 1px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .12);
    background: var(--sunken);
}
.bgd-flag svg { width: 100%; height: 100%; display: block; }
.bgd-lang-v { display: grid; place-items: center; }
.bgd-lang-v .gd-i { color: var(--ok); }
.bgd-lang-v.is-no .gd-i { color: #D8DDE5; }
/* Not verified: a question mark in the same muted grey as "no", so it never
   reads as a claim either way. The state exists because "not checked" is not
   "not supported", and a table that could only say the second was lying. */
.bgd-lang-v.is-nv .gd-i { color: #B8C0CC; }

/* The overflow rows are in the DOM and simply hidden, so "view all" is an
   expansion rather than a fetch — and the page never jumps. */
.bgd-lang.is-extra { display: none; }
.bgd-langs.is-open .bgd-lang.is-extra { display: grid; animation: bgd-rise .34s var(--ease) backwards; }
.bgd-langs.is-open .bgd-lang.is-extra:nth-child(n+12) { animation-delay: .03s; }
.bgd-langs.is-open .bgd-lang.is-extra:nth-child(n+16) { animation-delay: .06s; }
@keyframes bgd-rise { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.bgd-lang-all {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 12px; padding: 12px;
    border-radius: var(--r-xs); border: 1px dashed var(--line);
    font-size: 12.5px; font-weight: 750; color: var(--red);
    transition: background .2s var(--ease), border-color .2s var(--ease);
}
.bgd-lang-all:hover { background: var(--red-soft); border-color: var(--red-line); }
.bgd-lang-all .gd-i { transition: transform .26s var(--ease); }
.bgd-langs.is-open + .bgd-lang-all .gd-i { transform: rotate(180deg); }

/* ═══ SYSTEM REQUIREMENTS ═════════════════════════════════════════════════ */

.bgd-reqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 0; }
.bgd-req { padding: 4px 24px; border-left: 1px solid var(--line-soft); min-width: 0; }
.bgd-req:first-child { border-left: 0; padding-left: 0; }
.bgd-req-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.bgd-req-h b { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.bgd-req-h i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: 0 0 7px; }
.bgd-req.is-min i { background: #94A3B8; }
.bgd-req.is-rec i { background: var(--ok); }
.bgd-req.is-ultra i { background: var(--red); }
.bgd-req.is-rec .bgd-req-h b { color: var(--ok); }
.bgd-req.is-ultra .bgd-req-h b { color: var(--red); }
.bgd-req-x { font-size: 11.5px; color: var(--muted); font-weight: 650; margin-bottom: 14px; }
.bgd-spec { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); align-items: baseline; }
.bgd-spec:first-of-type { border-top: 0; }
.bgd-spec-k {
    flex: 0 0 62px; font-size: 10.5px; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.bgd-spec-v { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.5; }
.bgd-req-note { margin-top: 14px; font-size: 12px; line-height: 1.55; color: var(--muted); }

/* ═══ WHY PLAY ════════════════════════════════════════════════════════════ */

.bgd-why {
    position: relative; overflow: hidden;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(229, 27, 35, .10) 0%, transparent 62%),
        linear-gradient(160deg, var(--red-soft) 0%, var(--surface) 58%);
    border-color: var(--red-line);
}
.bgd-why-l { display: flex; flex-direction: column; gap: 4px; }
.bgd-why-i {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 12px 13px; border-radius: var(--r-xs);
    transition: background .22s var(--ease), transform .22s var(--ease);
}
.bgd-why-i:hover { background: var(--surface); transform: translateX(4px); }
.bgd-why-i .bgd-why-m {
    display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; margin-top: 1px;
    border-radius: 9px; color: #fff;
    background: linear-gradient(140deg, #FF3138, var(--red-dark));
    box-shadow: var(--e-red);
    transition: transform .26s var(--spring);
}
.bgd-why-i:hover .bgd-why-m { transform: rotate(-6deg) scale(1.08); }
.bgd-why-i b { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.bgd-why-i span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* ═══ RELATED GAMES — a rail that scrolls, not a grid that wraps ══════════ */

.bgd-rail-w { position: relative; }
.bgd-rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr);
    gap: 18px; overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; padding: 4px 26px 6px;
    scrollbar-width: none;
}
.bgd-rail::-webkit-scrollbar { display: none; }
.bgd-game { scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: transform .3s var(--ease); }
.bgd-game:hover { transform: translateY(-6px); }
.bgd-game-a {
    position: relative; overflow: hidden; border-radius: var(--r-sm);
    aspect-ratio: 3 / 4; background: var(--sunken);
    box-shadow: var(--e1); transition: box-shadow .3s var(--ease);
}
.bgd-game:hover .bgd-game-a { box-shadow: var(--e3); }
.bgd-game-a img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bg-t-panel, .28s) var(--bg-e-out, cubic-bezier(.22,1,.36,1)); }
.bgd-game:hover .bgd-game-a img { transform: scale(1.07); }
/*
 * A pill with a 38px floor, not a fixed circle. A score out of 10 ("9.5") fills
 * it and still reads as the round badge it was; a game carrying only an
 * aggregator score prints "94/100", which a 38px circle could not hold — and
 * the alternative, dropping a bare 94 beside a 9.5, reads as a different game
 * being ten times better.
 */
.bgd-game-s {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 9px; border-radius: 999px;
    background: rgba(9, 11, 15, .78); color: #fff;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-size: 13px; font-weight: 850; letter-spacing: -.02em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.bgd-game-s small { font-size: 9.5px; font-weight: 700; opacity: .72; margin-left: -1px; }
.bgd-game-s.is-high { color: #4ADE80; }
.bgd-game-cta {
    position: absolute; inset: auto 0 0; padding: 26px 12px 12px;
    background: linear-gradient(180deg, transparent, rgba(6, 8, 12, .88));
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 12.5px; font-weight: 750; color: #fff;
    opacity: 0; transform: translateY(8px);
    transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.bgd-game:hover .bgd-game-cta { opacity: 1; transform: translateY(0); }
.bgd-game-b { min-width: 0; }
.bgd-game-b b { display: block; font-size: 14.5px; font-weight: 750; color: var(--ink); line-height: 1.35; letter-spacing: -.014em; }
.bgd-game:hover .bgd-game-b b { color: var(--red); }
.bgd-game-b span { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }

.bgd-rail-nav {
    position: absolute; top: 34%; z-index: 3;
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
    background: var(--surface); border: 1px solid var(--line); color: var(--ink);
    box-shadow: var(--e3);
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.bgd-rail-nav:hover { background: var(--red); border-color: var(--red); color: #fff; transform: scale(1.08); }
.bgd-rail-prev { left: 8px; }
.bgd-rail-next { right: 8px; }
.bgd-rail-nav[hidden] { display: none; }

/* ═══ SIDEBAR ═════════════════════════════════════════════════════════════ */

.bgd-side .bgd-card-h { padding: 18px 20px 14px; }
.bgd-side .bgd-card-b { padding: 0 20px 20px; }

.bgd-rows { display: flex; flex-direction: column; }
.bgd-krow {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 0; border-top: 1px solid var(--line-soft);
    transition: padding-left .2s var(--ease);
}
.bgd-krow:first-child { border-top: 0; }
a.bgd-krow:hover { padding-left: 6px; }
.bgd-krow-k {
    display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
    font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.bgd-krow-k .gd-i { color: var(--faint); }
.bgd-krow-v {
    flex: 1 1 auto; min-width: 0; text-align: right;
    font-size: 13px; font-weight: 700; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bgd-krow-v.is-link { color: var(--red); display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; }
a.bgd-krow:hover .bgd-krow-v { color: var(--red); }

/* Content rating: the board plate beside what it means. */
.bgd-rate { display: flex; align-items: flex-start; gap: 15px; }

/*
 * THE PLATE MUST FIT WHATEVER THE BOARD CALLS IT.
 *
 * This was a fixed 56x66 box with 26px type, which fits "T" and "M" and
 * nothing else. Real data is not that tidy: ESRB is stored here as the word
 * "Teen", PEGI as "16", others as "E10+" or "Mature". At 26px, "Teen" ran
 * straight out through the border.
 *
 * So the box now GROWS to its content from a 56px floor, and the type size
 * comes from --plate, which the component sets from the value's own length.
 * Any rating any board invents will fit — including ones added after this was
 * written, which is the part that matters.
 */
.bgd-rate-p {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 0 0 auto;
    min-width: 58px; min-height: 68px;
    padding: 9px 11px;
    border: 2px solid var(--ink); border-radius: 8px;
    color: var(--ink); line-height: 1;
    text-align: center;
}
.bgd-rate-p b {
    font-size: var(--plate, 26px); font-weight: 900; letter-spacing: -.04em;
    white-space: nowrap; max-width: 100%;
}
.bgd-rate-p span {
    margin-top: 5px; font-size: 7.5px; font-weight: 800; letter-spacing: .08em;
    white-space: nowrap;
}
.bgd-rate-b { min-width: 0; }
.bgd-rate-b > b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.bgd-rate-b > span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--muted); }
/* The expansion above is optional, so whatever lands first must not carry the
   gap that was meant to sit between the two. */
.bgd-rate-b > :first-child { margin-top: 0; }

.bgd-side-plats { display: flex; flex-direction: column; }

/* ═══ LIGHTBOX ════════════════════════════════════════════════════════════ */

.bgd-lb[hidden] { display: none; }
.bgd-lb {
    position: fixed; inset: 0; z-index: 3000;
    display: grid; place-items: center; padding: 48px;
    background: rgba(6, 8, 12, .94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    animation: bgd-lb-in .26s var(--ease);
}
@keyframes bgd-lb-in { from { opacity: 0; } to { opacity: 1; } }
.bgd-lb-fig { margin: 0; max-width: min(1280px, 94vw); display: flex; flex-direction: column; gap: 14px; }
.bgd-lb-fig img {
    max-width: 100%; max-height: 78vh; object-fit: contain;
    border-radius: var(--r-sm); margin: 0 auto;
    animation: bgd-lb-zoom .32s var(--ease);
}
@keyframes bgd-lb-zoom { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }
.bgd-lb-fig img[hidden], .bgd-lb-v[hidden] { display: none; }
.bgd-lb-v { width: min(1160px, 92vw); aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: #000; }
.bgd-lb-v iframe { width: 100%; height: 100%; border: 0; display: block; }
.bgd-lb-cap { display: flex; align-items: center; justify-content: center; gap: 12px; color: rgba(255, 255, 255, .8); font-size: 13.5px; }
.bgd-lb-cap span:last-child { color: rgba(255, 255, 255, .5); font-size: 12px; font-weight: 700; }
.bgd-lb-b {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #fff;
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.bgd-lb-b:hover { background: rgba(255, 255, 255, .26); }
.bgd-lb-prev { left: 22px; }
.bgd-lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.bgd-lb-next { right: 22px; }
.bgd-lb-next:hover { transform: translateY(-50%) translateX(3px); }
.bgd-lb-x { top: 22px; right: 22px; transform: none; }
.bgd-lb-x:hover { transform: rotate(90deg); }

/* ═══ MOTION ══════════════════════════════════════════════════════════════
   Entrance and reveal. Both animate transform and opacity only, so neither
   costs a layout pass. The `.bgd-fx` class is added inline during parse (see
   the template) and removed by a failsafe timer, so a blocked script leaves a
   fully visible page rather than a blank one. */

/*
 * EVERY HIDDEN STATE IS GATED ON `.bgd-fx`, WITHOUT EXCEPTION.
 *
 * That class is added by an inline script during parse and removed by a
 * four-second failsafe if the deferred script never reports in. Anything
 * hidden OUTSIDE that gate would stay hidden for a visitor whose JavaScript is
 * off or broken — an entrance animation's opening frame with nothing left
 * alive to finish it, i.e. a blank page.
 *
 * So: no `.bgd-rev { opacity: 0 }` on its own, ever.
 */
.bgd-fx .bgd-hero { opacity: 0; transform: translateY(14px) scale(.994); }
.bgd-lit .bgd-hero { animation: bgd-up .7s var(--ease) forwards; }
@keyframes bgd-up { to { opacity: 1; transform: none; } }

/* Scroll reveal. `:not(.is-in)` rather than a bare class plus an override, so
   the resting state is unambiguous at equal specificity. */
.bgd-rev { transition: opacity var(--bg-t-enter, .42s) var(--bg-e-out, cubic-bezier(.22,1,.36,1)), transform var(--bg-t-enter, .42s) var(--bg-e-out, cubic-bezier(.22,1,.36,1)); }
.bgd-fx .bgd-rev:not(.is-in) { opacity: 0; transform: translateY(22px); }

/* ═══ GAMEPLAY & TECHNICAL ════════════════════════════════════════════════
   A definition list rather than a table: the values are chips of varying width
   and a table would force every row to the width of the widest one. */

/*
 * TILES, NOT ROWS.
 *
 * This was a 176px label beside a chip list, one per full-width row. Most of
 * these vocabularies hold ONE value — "Camera: First-person" — so each row
 * spent 946px to say two words and the section read as a long, empty ledger.
 *
 * As a tile grid the same content fills the space it occupies, and the rows
 * that genuinely have a lot to say get room to say it: a group with more than
 * three values takes a double-width tile, so "Gameplay" with six chips is not
 * squeezed into the same box as "Camera" with one.
 */
.bgd-attrs {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(194px, 1fr));
    gap: 10px;
    /*
     * `start`, and this is the whole reason the section looked bloated.
     *
     * Grid items stretch to the tallest in their row by default, so the
     * one-chip "Camera" tile was being pulled to the height of the six-chip
     * "Gameplay" tile beside it and carrying 60px of dead space under its
     * single word. Sized to content, every tile is exactly as tall as what is
     * in it and the block collapses to about half the height.
     */
    align-items: start;
    /*
     * DENSE, because the tiles are sized to content.
     *
     * A double-width tile that will not fit at the end of a row is pushed to
     * the next one, and the column it left behind stays empty for good -- the
     * big blank square this grid used to open up beside a long value. Dense
     * flow backfills that column with the next tile narrow enough to sit in
     * it, so the grid stays a grid instead of a staircase.
     */
    grid-auto-flow: dense;
}
.bgd-attr {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 13px;
    border-radius: var(--r-xs);
    /* A shallow raking gradient rather than a flat fill — it is what stops a
       grid of sixteen of these reading as sixteen grey boxes. */
    background: linear-gradient(158deg, var(--sunken) 0%, var(--surface) 92%);
    border: 1px solid var(--line-soft);
    min-width: 0;
    transition: background .24s var(--ease), border-color .24s var(--ease),
                box-shadow .24s var(--ease), transform .24s var(--ease);
}
/* The sheen and the content share the tile, so the content is lifted above it. */
.bgd-attr > * { position: relative; z-index: 2; }

/*
 * THE SWEEP. A band of light crossing the tile once on hover — the way light
 * moves over a card you have just picked up. ONE pass, not a loop: a sheen
 * that never stops is a distraction rather than a response. Clipped by the
 * tile's own overflow, so it needs no wrapper.
 */
.bgd-attr::after {
    content: ''; position: absolute; z-index: 1;
    top: -60%; left: -150%; width: 45%; height: 220%;
    transform: rotate(16deg); pointer-events: none;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .5) 46%,
        rgba(255, 255, 255, .85) 50%,
        rgba(255, 255, 255, .5) 54%,
        rgba(255, 255, 255, 0) 100%);
}
.bgd-attr:hover::after { animation: bgd-sweep .9s cubic-bezier(.22, .61, .36, 1); }
@keyframes bgd-sweep { to { left: 190%; } }

.bgd-attr:hover {
    background: var(--surface); border-color: var(--red-line);
    box-shadow: 0 12px 26px -14px rgba(229, 27, 35, .45), var(--e2);
    transform: translateY(-3px);
}
.bgd-attr.is-wide { grid-column: span 2; }
.bgd-attr.is-full { grid-column: 1 / -1; }

.bgd-attr dt {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
}
.bgd-attr dt::before {
    content: ''; width: 3px; height: 11px; border-radius: 2px;
    background: var(--red); flex: 0 0 3px;
}
.bgd-attr dd { margin: 0; display: flex; flex-wrap: wrap; gap: 7px; }
/* The tile ground is already tinted, so a chip on it takes the white surface
   to stay distinct rather than dissolving into its own container. */
.bgd-attr dd .bgd-chip { background: var(--surface); }

/*
 * A SENTENCE IS NOT A TAG.
 *
 * The chip is a pill built for "Third Person": ring border, pill radius, 650
 * weight, no line height to speak of. Hand it "Chapter-based environments with
 * interconnected exploration areas and optional paths/content" and it becomes
 * a tall rounded blob with a border tracing all five wrapped lines and the
 * pill's own radius pinching the first and last of them.
 *
 * Past ~30 characters a value has stopped being a label and started being a
 * statement, so it is set as one: its own line, a rule down the left edge
 * instead of a ring around the outside, and a line height meant for reading.
 */
.bgd-attr dd .bgd-chip.is-long {
    flex: 1 1 100%;
    display: block;
    padding: 1px 0 1px 11px;
    border: 0; border-left: 2px solid var(--red-line);
    border-radius: 0; background: none;
    font-size: 13.5px; font-weight: 500; line-height: 1.6;
    color: var(--body);
    /* Long words -- URLs, "paths/content" -- break rather than push the tile
       past its column and force a horizontal scrollbar onto the section. */
    overflow-wrap: anywhere;
}

.bgd-sub { margin-top: 26px; }
.bgd-sub h3 {
    display: flex; align-items: center; gap: 10px; margin-bottom: 13px;
    font-size: 11px; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted);
}
.bgd-sub h3::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--red); flex: 0 0 3px; }

/* ═══ WHERE TO BUY ════════════════════════════════════════════════════════ */

.bgd-buys { display: flex; flex-direction: column; }
.bgd-buy {
    display: flex; align-items: center; gap: 15px;
    padding: 16px 14px; border-radius: var(--r-xs);
    border-bottom: 1px solid var(--line-soft);
    transition: background .22s var(--ease), transform .22s var(--ease);
}
.bgd-buy:last-child { border-bottom: 0; }
.bgd-buy:hover { background: var(--red-soft); transform: translateX(4px); }
/* A pulled listing is dimmed rather than hidden — "gone", not "missing". */
.bgd-buy.is-gone { opacity: .55; }
.bgd-buy.is-gone:hover { transform: none; background: var(--sunken); }
.bgd-buy-ic {
    display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 12px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); color: var(--muted);
}
.bgd-buy-ic img { width: 100%; height: 100%; object-fit: contain; }
.bgd-buy-b { flex: 1 1 auto; min-width: 0; }
.bgd-buy-b b { display: block; font-size: 15px; font-weight: 750; color: var(--ink); }
.bgd-buy-m { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.bgd-buy-m span + span::before { content: '·'; margin-right: 6px; color: var(--faint); }
.bgd-buy-p { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bgd-buy-p b { font-size: 17px; font-weight: 850; color: var(--ink); white-space: nowrap; }
.bgd-buy-was { font-size: 12px; color: var(--muted); text-decoration: line-through; }
.bgd-buy-off { padding: 2px 7px; border-radius: 6px; background: var(--ok); color: #fff; font-size: 11px; font-weight: 800; }
.bgd-buy-tag { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bgd-buy-go { flex: 0 0 auto; color: var(--faint); transition: color .2s var(--ease), transform .2s var(--spring); }
.bgd-buy:hover .bgd-buy-go { color: var(--red); transform: translateX(4px); }

/* ═══ SHARE ═══════════════════════════════════════════════════════════════
   The platform's own colour is carried as an "R, G, B" triple in --brand, set
   per button by the template. Nothing in this file names a network, so adding
   one needs no rule here. Colour appears on hover only: eight saturated brand
   blocks at rest would shout louder than the page's own actions. */

.bgd-share { display: flex; flex-wrap: wrap; gap: 10px; }

.bgd-share-b {
    position: relative;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 16px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--surface);
    font-size: 13.5px; font-weight: 700; color: var(--body);
    box-shadow: var(--e1);
    transition: color .2s var(--ease), border-color .2s var(--ease),
                background .2s var(--ease), transform .2s var(--ease),
                box-shadow .2s var(--ease);
}
.bgd-share-b .gd-i { color: var(--faint); transition: color .2s var(--ease), transform .24s var(--spring); }

.bgd-share-b:hover {
    color: rgb(var(--brand, 229, 27, 35));
    border-color: rgba(var(--brand, 229, 27, 35), .45);
    background: rgba(var(--brand, 229, 27, 35), .06);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -12px rgba(var(--brand, 229, 27, 35), .8);
}
.bgd-share-b:hover .gd-i { color: rgb(var(--brand, 229, 27, 35)); transform: scale(1.12); }
.bgd-share-b[hidden] { display: none; }

/* ═══ CREDITS AND SERIES ══════════════════════════════════════════════════ */

.bgd-rolegrp + .bgd-rolegrp { margin-top: 26px; }
.bgd-rolegrp > h3 {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    font-size: 11px; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted);
}
.bgd-rolegrp > h3::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--red); flex: 0 0 3px; }

.bgd-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 12px; }
.bgd-person {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 14px; border-radius: var(--r-xs);
    background: var(--sunken);
    transition: background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.bgd-person:hover { background: var(--surface); transform: translateY(-3px); box-shadow: var(--e2); }
.bgd-person-av {
    display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 50%; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line);
    font-size: 15px; font-weight: 850; color: var(--muted);
}
.bgd-person-av img { width: 100%; height: 100%; object-fit: cover; }
.bgd-person-b { min-width: 0; }
.bgd-person-b b { display: block; font-size: 14px; font-weight: 750; color: var(--ink); line-height: 1.3; }
.bgd-person:hover .bgd-person-b b { color: var(--red); }
.bgd-person-b span {
    display: block; font-size: 12px; color: var(--muted); line-height: 1.4;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.bgd-serie { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 18px; }

/* ═══ ADMIN PREVIEW BAR ═══════════════════════════════════════════════════ */

.bgd-preview {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 11px 18px; margin-bottom: 4px;
    background: #FFF4E5; border-bottom: 1px solid #F3CD93;
    color: #8A5300; font-size: 13px; font-weight: 700;
}
.theme-dark .bgd-preview { background: rgba(217, 119, 6, .16); border-bottom-color: rgba(217, 119, 6, .4); color: #FBBF24; }

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

@media (max-width: 1280px) {
    .bgd { --rail: 330px; --gap: 22px; }
    .bgd-hero-grid { grid-template-columns: 192px minmax(0, 1fr); gap: 30px; }
    .bgd-hero-cover { width: 192px; }
    .bgd-hero-in { padding: 30px 30px 0; }
}

@media (max-width: 1080px) {
    /* The rail stops being a column and becomes a band under the content. It
       is reflowed rather than shrunk — a 330px column of label/value rows at
       this width is unreadable. */
    .bgd-layout { grid-template-columns: minmax(0, 1fr); }
    /* `.is-stuck` too, and by name: it scores 0-2-0 and would otherwise
       outrank a bare `.bgd-side` here if the script ever applied it at this
       width, pinning the band over the content it sits above. */
    /* The rail is a band in the flow here, so nothing in it may pin itself —
       a pinned rail would park over the content it sits above. The grid moves
       to the inner track, which is the element that actually holds the cards.
       The JS clears is-top/is-bottom at this width too; this is the belt to
       that braces, and it is what holds if the script never runs. */
    .bgd-side-in {
        position: static;
        display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 18px; align-items: start;
    }
    .bgd-row, .bgd-row.is-wide, .bgd-row.is-tight { grid-template-columns: minmax(0, 1fr); }
    .bgd-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .bgd-wrap { padding: 0 18px; }
    .bgd-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .bgd-hero-cover { width: 156px; }
    .bgd-hero-in { padding: 26px 24px 0; }
    .bgd-hero-t { font-size: clamp(32px, 7vw, 46px); }
    .bgd-strip { padding: 22px 0 24px; gap: 9px; }
    .bgd-reqs { grid-template-columns: minmax(0, 1fr); }
    .bgd-req { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line-soft); }
    .bgd-req:first-child { border-top: 0; padding-top: 0; }
    .bgd-feats { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .bgd { --gap: 16px; }
    .bgd-wrap { padding: 0 14px; }
    .bgd-crumbs { padding: 14px 0 12px; font-size: 12px; }
    .bgd-hero { border-radius: var(--r-lg); }
    .bgd-hero-in { padding: 22px 18px 0; }
    .bgd-hero-cover { width: 128px; }
    .bgd-hero-meta { gap: 8px; }
    .bgd-hero-meta > div { padding: 9px 13px; flex: 1 1 calc(50% - 4px); }
    .bgd-hero-cta { gap: 9px; }
    .bgd-hero-cta .bgd-btn { flex: 1 1 100%; }
    .bgd-hero-cta .bgd-btn-ico { flex: 0 0 auto; }

    /* The strip becomes a swipeable rail rather than five slivers. */
    .bgd-strip { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
    .bgd-strip::-webkit-scrollbar { display: none; }
    .bgd-shot { flex: 0 0 148px; scroll-snap-align: start; }

    .bgd-card-h { padding: 18px 18px 14px; }
    .bgd-card-b { padding: 0 18px 20px; }
    .bgd-side .bgd-card-h { padding: 16px 16px 12px; }
    .bgd-side .bgd-card-b { padding: 0 16px 16px; }

    .bgd-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .bgd-gal-i:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 10; }
    .bgd-arts { grid-template-columns: minmax(0, 1fr); }
    .bgd-cos { grid-template-columns: minmax(0, 1fr); }
    .bgd-trailer-r { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .bgd-rail { grid-auto-columns: 152px; padding: 4px 18px 6px; }
    .bgd-rail-nav { display: none; }

    /*
     * LANGUAGES BECOME TWO LINES, not four squeezed columns.
     *
     * Holding the desktop shape here failed twice over at 390px: the name
     * track fell to ~52px of usable width, so "Portuguese (Brazil)" rendered
     * as "Portu…", and the nowrap column headings ("Interface" wants 70px)
     * overflowed their 52px tracks and gave the table a horizontal scrollbar.
     *
     * So the heading row is dropped and each cell prints its own label from
     * data-label. The name gets the full width on line one; the three supports
     * sit in thirds on line two. Nothing truncates, nothing scrolls, and the
     * table is still a table to a screen reader.
     */
    .bgd-lang-head { display: none; }

    .bgd-lang {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas: 'name name name' 'aud int sub';
        gap: 9px 6px; padding: 12px 12px;
    }
    .bgd-lang-n { grid-area: name; }
    .bgd-lang-n b { font-size: 13.5px; white-space: normal; }

    .bgd-lang-v {
        display: flex; align-items: center; justify-content: flex-start; gap: 6px;
        min-width: 0;
    }
    /*
     * 8.5px and almost no tracking, because the budget is genuinely tight: a
     * third of 309px is ~91px, and the tick plus its gap takes 21 of them.
     * "Interface" at the label size used elsewhere needed more than the ~70px
     * left and ellipsised to "INTER…", which tells the reader nothing.
     *
     * `flex: 0 0 auto` so the label keeps its measured width and the tick
     * yields instead — a clipped label is useless, a tick shifted two pixels
     * is not.
     */
    .bgd-lang-v::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 8.5px; font-weight: 800; letter-spacing: .02em;
        text-transform: uppercase; color: var(--muted);
        white-space: nowrap;
    }
    .bgd-ring { flex-basis: 78px; width: 78px; height: 78px; }
    .bgd-ring b { font-size: 25px; }
    .bgd-lb { padding: 14px; }
    .bgd-lb-b { width: 42px; height: 42px; }
    .bgd-lb-prev { left: 6px; }
    .bgd-lb-next { right: 6px; }
    .bgd-lb-x { top: 10px; right: 10px; }

    /* One column of tiles, and a double-width tile has nothing to double. */
    .bgd-attrs { grid-template-columns: minmax(0, 1fr); }
    .bgd-attr.is-wide, .bgd-attr.is-full { grid-column: span 1; }
    .bgd-buy { flex-wrap: wrap; gap: 12px; padding: 14px 10px; }
    .bgd-buy-b { flex: 1 1 60%; }
    .bgd-buy-p { width: 100%; align-items: flex-start; text-align: left; flex-direction: row; gap: 8px; }
    .bgd-buy-go { display: none; }
    .bgd-people { grid-template-columns: minmax(0, 1fr); }
    .bgd-serie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ═══ REDUCED MOTION ══════════════════════════════════════════════════════
   Motion is an enhancement. A reader who asks for less gets none of it, and
   critically still gets a VISIBLE page — the entrance states are cleared
   rather than left hanging at opacity 0. */

@media (prefers-reduced-motion: reduce) {
    .bgd *, .bgd *::before, .bgd *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .bgd-fx .bgd-hero { opacity: 1; transform: none; }
    .bgd-fx .bgd-rev:not(.is-in) { opacity: 1; transform: none; }
    .bgd-hero-art img { transform: none; }
    .bgd-play::before { animation: none; }
    .bgd-rail, .bgd-strip { scroll-behavior: auto; }
}

/* Printing a game page should give the facts, not the furniture. */
@media print {
    .bgd-tabs, .bgd-rail-nav, .bgd-lb, .bgd-hero-cta { display: none !important; }
    .bgd-card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
    .bgd-layout { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMMUNITY REVIEWS — Section 13 · Subsection 2
   ═══════════════════════════════════════════════════════════════════════
   Readers' own reviews under the game. Summary (score, distribution,
   category averages), the write/edit form, the list with helpful votes
   and a report box. Tokens only; the page's own light theme.
   ══════════════════════════════════════════════════════════════════════ */

.bgd-rv { display: flex; flex-direction: column; gap: 18px; }

/* ── Summary ─────────────────────────────────────────────────────────── */
.bgd-rv-sum {
    display: grid; gap: 18px; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--sunken);
}
.bgd-rv-big { display: flex; flex-direction: column; gap: 6px; }
.bgd-rv-num { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.bgd-rv-num b { font-size: 46px; font-weight: 900; letter-spacing: -.03em; color: var(--ink); }
.bgd-rv-num span { font-size: 15px; font-weight: 700; color: var(--muted); }
.bgd-rv-num.is-empty b { color: var(--faint); }
.bgd-rv-big em { font-style: normal; font-size: 13px; color: var(--muted); }
.bgd-rv-cta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.bgd-rv-stars { display: inline-flex; gap: 2px; line-height: 1; }
.bgd-rv-st { position: relative; display: inline-block; width: 14px; height: 14px; color: var(--faint); }
.bgd-rv-st::before, .bgd-rv-st::after {
    content: '★'; position: absolute; inset: 0; font-size: 14px; line-height: 14px; text-align: left; color: inherit;
}
.bgd-rv-st::after { color: var(--warn); width: 0; overflow: hidden; }
.bgd-rv-st.is-on::after { width: 100%; }
.bgd-rv-st.is-half::after { width: 50%; }
.bgd-rv-stars.is-sm .bgd-rv-st { width: 11px; height: 11px; }
.bgd-rv-stars.is-sm .bgd-rv-st::before, .bgd-rv-stars.is-sm .bgd-rv-st::after { font-size: 11px; line-height: 11px; }
.bgd-rv-stars.is-input .bgd-rv-st { width: 18px; height: 18px; }
.bgd-rv-stars.is-input .bgd-rv-st::before, .bgd-rv-stars.is-input .bgd-rv-st::after { font-size: 18px; line-height: 18px; }

.bgd-rv-dist, .bgd-rv-cats { display: flex; flex-direction: column; gap: 5px; }
.bgd-rv-bar, .bgd-rv-cat { display: grid; grid-template-columns: 28px minmax(0, 1fr) 34px; align-items: center; gap: 8px; font-size: 12px; }
.bgd-rv-cat { grid-template-columns: 92px minmax(0, 1fr) 34px; }
.bgd-rv-bar span, .bgd-rv-cat span { font-weight: 700; color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgd-rv-bar i, .bgd-rv-cat i { display: block; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.bgd-rv-bar b, .bgd-rv-cat b { display: block; height: 100%; border-radius: 999px; background: var(--red); }
.bgd-rv-cat b { background: var(--ok); }
.bgd-rv-bar em, .bgd-rv-cat em { font-style: normal; font-weight: 700; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Notices ─────────────────────────────────────────────────────────── */
.bgd-rv-note {
    display: flex; align-items: center; gap: 8px; margin: 0;
    padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
    font-size: 13.5px; color: var(--body);
}
.bgd-rv-note.is-ok { border-color: rgba(21, 128, 61, .3); color: var(--ok); }
.bgd-rv-note.is-err { border-color: var(--red-line); color: var(--red); }
.bgd-rv-note.is-mine { color: var(--ink); }

/* ── Form ────────────────────────────────────────────────────────────── */
.bgd-rv-form {
    display: flex; flex-direction: column; gap: 14px;
    padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--e1);
}
.bgd-rv-form h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.bgd-rv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bgd-rv-field label { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.bgd-rv-field label b { color: var(--red); }
.bgd-rv-field label small, .bgd-rv-fs legend small { font-weight: 500; color: var(--muted); }
.bgd-rv-input {
    width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-xs);
    background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; box-sizing: border-box;
}
.bgd-rv-input:focus { outline: none; }
textarea.bgd-rv-input { resize: vertical; min-height: 120px; line-height: 1.5; }
.bgd-rv-range { width: 100%; accent-color: var(--red); }
.bgd-rv-count { align-self: flex-end; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bgd-rv-err { font-size: 12.5px; color: var(--red); }
.bgd-rv-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.bgd-rv-grid.is-cats { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.bgd-rv-fs { margin: 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.bgd-rv-fs legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.bgd-rv-catin { display: flex; align-items: center; gap: 6px; }
.bgd-rv-catin span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bgd-rv-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bgd-rv-actions small { font-size: 12.5px; color: var(--muted); }

/* ── List ────────────────────────────────────────────────────────────── */
.bgd-rv-sort { display: flex; gap: 6px; flex-wrap: wrap; }
.bgd-rv-sort .bgd-chip { cursor: pointer; font: inherit; }
.bgd-rv-sort .bgd-chip.is-on { background: var(--red); border-color: var(--red); color: var(--on); }
.bgd-rv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bgd-rv-item {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.bgd-rv-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bgd-rv-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 40px; background: var(--sunken); }
.bgd-rv-who { flex: 1 1 160px; min-width: 0; }
.bgd-rv-who b { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.bgd-rv-who em { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-style: normal; font-size: 12px; color: var(--muted); }
.bgd-rv-score { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }
.bgd-rv-score b { font-size: 16px; font-weight: 900; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.bgd-rv-title { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.bgd-rv-body { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--body); overflow-wrap: anywhere; }
.bgd-rv-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.bgd-rv-tags .bgd-chip b { margin-left: 4px; color: var(--ink); }
.bgd-rv-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.bgd-rv-spacer { flex: 1 1 auto; }
.bgd-rv-vote, .bgd-rv-report {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
    font: inherit; font-size: 12.5px; font-weight: 700; color: var(--body); cursor: pointer;
}
.bgd-rv-vote b { color: var(--ink); }
.bgd-rv-vote:hover:not(:disabled), .bgd-rv-report:hover { border-color: var(--red-line); color: var(--red); }
.bgd-rv-vote.is-on { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.bgd-rv-vote:disabled { opacity: .55; cursor: default; }
.bgd-rv-vote:focus-visible, .bgd-rv-report:focus-visible, .bgd-rv-sort .bgd-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--red-soft); }
.bgd-rv-reportbox {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 14px; border: 1px solid var(--red-line); border-radius: var(--r-sm); background: var(--red-soft);
}
.bgd-rv-reportbox label { font-size: 13px; font-weight: 700; color: var(--ink); }
.bgd-rv-more { display: flex; justify-content: center; }
.bgd-rv-empty { margin: 0; font-size: 14px; color: var(--muted); }

@media (max-width: 640px) {
    .bgd-rv-score { flex-direction: row; align-items: center; gap: 8px; }
    .bgd-rv-num b { font-size: 38px; }
}

/* ═══ DARK THEME ══════════════════════════════════════════════════════════
   The header toggle puts `theme-dark` on <body>. Only tokens change here:
   surfaces step from off-white to near-black, ink inverts, the tints and
   lines are lifted so they still read on a dark plate, and the elevation
   goes from grey-on-white to black-on-black. `--dark`/`--on` (the hero and
   the media strip, which were dark already) go one step darker so they still
   sit below the page. Green and amber are lifted for contrast as text; the
   three places that paint white text ON green get dark text instead. */

.theme-dark .bgd {
    --red-soft:   rgba(229, 27, 35, .14);
    --red-line:   rgba(229, 27, 35, .32);

    --ink:        #F3F5F8;
    --ink-2:      #E2E6EC;
    --body:       #B6BEC9;
    --muted:      #929BA8;
    --faint:      #626B78;

    --canvas:     #0B0E13;
    --surface:    #151A22;
    --sunken:     #1B212B;
    --line:       #262D38;
    --line-soft:  #20262F;

    --ok:         #34D399;
    --warn:       #FBBF24;

    --dark:       #05070A;
    --dark-2:     #0E1218;

    --e1: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
    --e2: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -14px rgba(0, 0, 0, .7);
    --e3: 0 2px 4px rgba(0, 0, 0, .45), 0 22px 48px -20px rgba(0, 0, 0, .8);
    --e4: 0 4px 8px rgba(0, 0, 0, .5), 0 40px 80px -28px rgba(0, 0, 0, .85);

    color-scheme: dark;
}
.theme-dark .bgp {
    --bgp-line:      #262D38;
    --bgp-tint:      #22171A;
    --bgp-tint-line: rgba(229, 27, 35, .3);
    --bgp-nav-bg:    rgba(21, 26, 34, .94);
    --bgp-e:       0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px -10px rgba(0, 0, 0, .6);
    --bgp-e-hover: 0 2px 4px rgba(0, 0, 0, .4), 0 16px 36px -18px rgba(0, 0, 0, .75);
}
.theme-dark .bgd-page::before {
    background:
        radial-gradient(60% 100% at 88% 0%, rgba(229, 27, 35, .10) 0%, transparent 62%),
        radial-gradient(50% 80% at 4% 4%, rgba(229, 27, 35, .06) 0%, transparent 60%);
}
/* White text on the lifted green would fail; use dark text there. */
.theme-dark .bgd-buy-off,
.theme-dark .bgp .bgp-price em,
.theme-dark .bgp .bgp-eh-yes,
.theme-dark .bgp .bgp-pl-yes { color: #06240F; }
/* Tooltips and the author badge were ink-on-white plates; on a dark page an
   inverted plate (light on dark) is what reads as a tooltip. */
.theme-dark .bgd-copied::after,
.theme-dark .bgp .bgp-do-pin-tip,
.theme-dark .bgc .bgc-author { background: #F3F5F8; color: #0E1116; }
/* Native form controls and scrollbars inside the page follow the theme. */
.theme-dark .bgd select,
.theme-dark .bgd input,
.theme-dark .bgd textarea { color-scheme: dark; }