/* ═══════════════════════════════════════════════════════════════════════
   Barlin Games — site footer (.bgf)

   Everything is scoped under .bgf, including the design tokens, so the footer
   renders identically whether the page it sits on loaded homepage.css,
   navigation.css, articles.css or none of them. The values mirror the --bh-*
   set those files define; they are repeated rather than inherited so the
   component has no ordering dependency on another stylesheet.

   NO IMAGES. The surface is a gradient, the oversized letter behind it is a
   text node sized in vw, the swash under the sign-off is a curved border and
   the social buttons are bordered circles. The only <img> in the footer is the
   brand mark, which is the header's own 160px asset.

   LAYOUT RULES THAT KEEP IT HONEST AT EVERY WIDTH
     * Only three things are positioned or hidden by a breakpoint — the
       watermark, the swash and the word strip — and none of them is content.
       Every readable element is in normal flow.
     * No element has a fixed height; the bars grow with their text.
     * Every grid and flex child that can hold long content carries min-width:0,
       and .bgf clips its own overflow, so nothing here can scroll the page
       sideways.
   ═══════════════════════════════════════════════════════════════════════ */

.bgf {
    --bgf-red:     #E51B23;
    --bgf-red-2:   #C7070F;
    --bgf-ink:     #14141C;
    --bgf-ink-2:   #262633;
    --bgf-link:    #4C5266;
    --bgf-muted:   #6E7488;
    --bgf-line:    rgba(20, 20, 28, .10);
    --bgf-chip:    rgba(255, 255, 255, .72);
    --bgf-shadow:  0 1px 2px rgba(20, 20, 28, .05);

    position: relative;
    isolation: isolate;
    /* The watermark is deliberately larger than the panel; this is what stops
       it widening the page at any width. */
    overflow: hidden;
    margin-top: 36px;
    border-top: 1px solid var(--bgf-line);
    background:
        radial-gradient(110% 80% at 100% 108%, rgba(229, 27, 35, .13), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #FFF8F8 46%, #FDEEEF 100%);
    color: var(--bgf-ink-2);
    font-size: 15px;
    line-height: 1.6;
}

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

/* ── The oversized letter ──────────────────────────────────────────────
   A character, not artwork: it inherits the display face, scales with the
   viewport and costs nothing to download. Decorative, so it is out of the
   reading order and out of the way of the pointer. */
.bgf__mark {
    position: absolute;
    z-index: 0;
    inset-inline-end: -1%;
    /* Low enough that the bottom bar's tint cuts across it, which is what
       gives the bar an edge without a second border. */
    bottom: -8%;
    font-family: 'Sora', 'Inter', system-ui, sans-serif;
    font-size: clamp(260px, 32vw, 520px);
    font-weight: 900;
    line-height: .78;
    letter-spacing: -.07em;
    color: rgba(229, 27, 35, .055);
    pointer-events: none;
    user-select: none;
}

.bgf__inner {
    position: relative;
    z-index: 1;
    max-width: var(--bg-wrap-wide, 1280px);
    margin-inline: auto;
    padding: 56px 24px 0;
}

/* ── The row: brand, columns, word strip ───────────────────────────── */
.bgf-main {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr) auto;
    gap: 44px 56px;
    align-items: start;
    padding-bottom: 44px;
}

/* ── 1. Brand ──────────────────────────────────────────────────────── */
.bgf-brand { min-width: 0; }

.bgf-brand__id {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.bgf-brand__mark { height: 60px; width: auto; }
.bgf-brand__wm { line-height: 1; }
.bgf-brand__wm b,
.bgf-brand__wm i {
    display: block;
    font-style: normal;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.bgf-brand__wm b { color: var(--bgf-ink); }
.bgf-brand__wm i { color: var(--bgf-red); }

.bgf-brand__tag {
    margin: 22px 0 0;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bgf-ink);
}
.bgf-brand__tag span { color: var(--bgf-red); }

.bgf-brand__blurb {
    margin: 14px 0 0;
    max-width: 34ch;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--bgf-link);
}

/* ── Socials ───────────────────────────────────────────────────────── */
.bgf-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
.bgf-social a {
    /* Overridden per network below; an account the set has no colour for
       keeps the brand red rather than rendering grey. */
    --net: var(--bgf-red);

    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--bgf-chip);
    border: 1px solid var(--bgf-line);
    color: var(--net);
    box-shadow: var(--bgf-shadow);
    transition: background .18s ease, color .18s ease, border-color .18s ease,
                transform .18s ease, box-shadow .18s ease;
}
.bgf-social a:hover {
    background: var(--net);
    border-color: var(--net);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -10px var(--net);
}

.bgf-social [data-net="facebook"]  { --net: #1877F2; }
.bgf-social [data-net="instagram"] { --net: #D62976; }
.bgf-social [data-net="youtube"]   { --net: #FF0000; }
.bgf-social [data-net="x"],
.bgf-social [data-net="twitter"]   { --net: #0F1419; }
.bgf-social [data-net="tiktok"]    { --net: #111111; }
.bgf-social [data-net="discord"]   { --net: #5865F2; }
.bgf-social [data-net="reddit"]    { --net: #FF4500; }
.bgf-social [data-net="twitch"]    { --net: #9146FF; }
.bgf-social [data-net="linkedin"]  { --net: #0A66C2; }
.bgf-social [data-net="steam"]     { --net: #1B2838; }
.bgf-social [data-net="whatsapp"]  { --net: #25D366; }
.bgf-social [data-net="telegram"]  { --net: #26A5E4; }

/* ── The handwritten sign-off ──────────────────────────────────────── */
.bgf-script {
    display: inline-block;
    margin: 30px 0 0;
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-size: 33px;
    font-weight: 700;
    line-height: 1.02;
    color: var(--bgf-ink);
}
.bgf-script span { display: block; }
/* The second line steps in, the way the line would be written by hand. */
.bgf-script span + span { margin-inline-start: 1.6em; }
.bgf-script__swash {
    display: block;
    width: 76%;
    height: 13px;
    margin: 4px 0 0 auto;
    /* A curve, not a rule: the bottom edge of a very round box. */
    border-bottom: 3px solid var(--bgf-red);
    border-radius: 0 0 46% 46% / 0 0 100% 100%;
    transform: rotate(-1.6deg);
}

/* ── 2. Link columns ───────────────────────────────────────────────── */
.bgf-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
    min-width: 0;
}
.bgf-col { min-width: 0; }

.bgf-col__h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--bgf-ink);
}
.bgf-col__ic {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px; height: 26px;
    color: var(--bgf-red);
}

/* The heading's button. Built by site-footer.js, so these rules describe an
   element that only exists once the script has run: above the breakpoint it is
   styled to be indistinguishable from the plain heading it replaced, and it
   ignores the pointer because there is nothing there to toggle. */
.bgf-col__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: default;
    pointer-events: none;
}
.bgf-col__t { min-width: 0; }
.bgf-col__caret { display: none; }

.bgf-col__list { margin: 0; padding: 0; list-style: none; }
.bgf-col__list li + li { margin-top: 11px; }
.bgf-col__list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    color: var(--bgf-link);
    text-decoration: none;
    transition: color .16s ease, transform .16s ease;
}
.bgf-col__list a svg {
    flex: none;
    color: var(--bgf-muted);
    opacity: .6;
    transition: color .16s ease, opacity .16s ease;
}
.bgf-col__list a:hover { color: var(--bgf-red); transform: translateX(3px); }
.bgf-col__list a:hover svg { color: var(--bgf-red); opacity: 1; }

/* ── 3. Word strip ─────────────────────────────────────────────────── */
.bgf-strip {
    display: grid;
    gap: 9px;
    justify-items: start;
    margin: 6px 0 0;
    padding-inline-start: 20px;
    border-inline-start: 2px solid var(--bgf-red);
}
.bgf-strip span {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--bgf-muted);
    white-space: nowrap;
}

/* ── 4. Bottom bar ─────────────────────────────────────────────────── */
/* The tint runs the full width of the viewport; the contents keep the same
   measure as the row above it. */
.bgf-barwrap {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--bgf-line);
    background: rgba(229, 27, 35, .05);
}
.bgf-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    max-width: var(--bg-wrap-wide, 1280px);
    margin-inline: auto;
    padding: 18px 24px 22px;
}
.bgf-bar__copy { min-width: 0; }
.bgf-bar__copy p { margin: 0; font-size: 13.5px; color: var(--bgf-muted); }
.bgf-bar__line2 { margin-top: 3px; }

.bgf-bar__made {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
    font-size: 13.5px;
    color: var(--bgf-muted);
}
.bgf-bar__heart { display: inline-grid; place-items: center; color: var(--bgf-red); }
.bgf-bar__heart svg { fill: currentColor; }

.bgf-ctl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-inline-start: auto;
}

/* Theme toggle and language badge share one shape; only the link reacts to
   the pointer, because only the link does anything. */
.bgf-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--bgf-chip);
    border: 1px solid var(--bgf-line);
    box-shadow: var(--bgf-shadow);
    color: var(--bgf-ink-2);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .16s ease, color .16s ease, transform .16s ease;
}
.bgf-pill svg { flex: none; color: var(--bgf-red); }
a.bgf-pill:hover { border-color: var(--bgf-red); color: var(--bgf-red); transform: translateY(-1px); }
.bgf-pill--static { cursor: default; }

/* The moon replaces the sun once the page is in the dark theme, matching the
   header's toggle exactly. */
.bgf-pill__moon { display: none; }
body.theme-dark .bgf-pill__sun,
.theme-dark .bgf-pill__sun { display: none; }
body.theme-dark .bgf-pill__moon,
.theme-dark .bgf-pill__moon { display: inline; }

/* Back to top. Hidden until the reader has scrolled (site-footer.js adds
   .is-on); visibility rather than display, so revealing it never moves the
   bar and it stays out of the tab order while hidden. */
.bgf-up {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bgf-ink-2);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s, color .18s ease;
}
.bgf-up.is-on { opacity: 1; visibility: visible; transform: none; }
.bgf-up__c {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--bgf-red);
    background: var(--bgf-chip);
    color: var(--bgf-red);
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.bgf-up:hover { color: var(--bgf-red); }
.bgf-up:hover .bgf-up__c { background: var(--bgf-red); color: #fff; transform: translateY(-3px); }

.bgf a:focus-visible,
.bgf button:focus-visible {
    outline: 2px solid var(--bgf-red);
    outline-offset: 3px;
    border-radius: 10px;
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════
   Each step drops the least load-bearing thing first: the decorative strip,
   then the side-by-side row, then the four-up columns. The hierarchy — brand,
   then links, then the bar — is the same at every width. */

@media (max-width: 1240px) {
    .bgf-main { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
    .bgf-strip { display: none; }
}

@media (max-width: 1000px) {
    .bgf__inner { padding-top: 44px; }
    .bgf-main { grid-template-columns: minmax(0, 1fr); gap: 38px; padding-bottom: 36px; }
    .bgf-brand__blurb { max-width: 58ch; }
    .bgf-script__swash { width: 58%; }
}

@media (max-width: 760px) {
    .bgf__inner { padding: 38px 18px 0; }
    .bgf-bar { padding-inline: 18px; }
    .bgf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }

    /* Copyright, then the controls, then the credit line: the controls stay
       reachable without scrolling past a line of prose. */
    .bgf-bar { gap: 16px; }
    .bgf-bar__copy { order: 1; width: 100%; }
    .bgf-ctl      { order: 2; width: 100%; margin-inline-start: 0; }
    .bgf-bar__made { order: 3; width: 100%; margin: 0; }
    .bgf-up { margin-inline-start: auto; }
}

@media (max-width: 420px) {
    .bgf-brand__mark { height: 52px; }
    .bgf-brand__wm b,
    .bgf-brand__wm i { font-size: 22px; }
    .bgf-brand__tag { font-size: 20px; }
    .bgf-script { font-size: 28px; }
    .bgf-social a { width: 42px; height: 42px; }
    .bgf__mark { font-size: clamp(200px, 58vw, 300px); }
    .bgf-up__t { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .bgf *,
    .bgf *::before,
    .bgf *::after {
        transition: none !important;
        animation: none !important;
    }
    .bgf-social a:hover,
    .bgf-col__list a:hover,
    .bgf-up:hover .bgf-up__c,
    a.bgf-pill:hover { transform: none; }
}

/* ═══ DARK THEME ══════════════════════════════════════════════════════
   The footer sits on pages whose <body> carries `theme-dark` (the header
   toggle). Only the tokens and the surface change; the layout above is shared,
   so the two themes cannot drift apart. */
body.theme-dark .bgf,
.theme-dark .bgf {
    --bgf-ink:    #F5F5F8;
    --bgf-ink-2:  #E4E4EC;
    --bgf-link:   #A8AEC0;
    --bgf-muted:  #8B90A2;
    --bgf-line:   rgba(255, 255, 255, .10);
    --bgf-chip:   rgba(255, 255, 255, .055);
    --bgf-shadow: none;

    background:
        radial-gradient(110% 80% at 100% 108%, rgba(229, 27, 35, .16), transparent 60%),
        linear-gradient(180deg, #14141A 0%, #101015 48%, #0C0C10 100%);
    color-scheme: dark;
}
body.theme-dark .bgf__mark,
.theme-dark .bgf__mark { color: rgba(229, 27, 35, .085); }
body.theme-dark .bgf-barwrap,
.theme-dark .bgf-barwrap { background: rgba(0, 0, 0, .28); }

/* Marks whose brand colour is near-black vanish on the dark ground. */
body.theme-dark .bgf-social [data-net="x"],
body.theme-dark .bgf-social [data-net="twitter"],
body.theme-dark .bgf-social [data-net="tiktok"],
.theme-dark .bgf-social [data-net="x"],
.theme-dark .bgf-social [data-net="twitter"],
.theme-dark .bgf-social [data-net="tiktok"]  { --net: #E8E8EE; }
body.theme-dark .bgf-social [data-net="steam"],
.theme-dark .bgf-social [data-net="steam"]   { --net: #8FA3C4; }
body.theme-dark .bgf-social a:hover,
.theme-dark .bgf-social a:hover { color: #0C0C10; }

/* ═══ COLLAPSED LINK GROUPS ═══════════════════════════════════════════
   site-footer.js adds `bgf-collapsible` to <html> below 700px and turns each
   heading into a disclosure button. These rules only describe that state — with
   the script blocked the class never appears and every list stays open. */
.bgf-collapsible .bgf-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
.bgf-collapsible .bgf-col { border-bottom: 1px solid var(--bgf-line); }
.bgf-collapsible .bgf-col:first-child { border-top: 1px solid var(--bgf-line); }

.bgf-collapsible .bgf-col__h { margin: 0; }
.bgf-collapsible .bgf-col__btn {
    padding: 15px 2px;
    cursor: pointer;
    pointer-events: auto;
}
.bgf-collapsible .bgf-col__t { flex: 1 1 auto; }

/* A chevron drawn from two borders, so it rotates cleanly and needs no glyph. */
.bgf-collapsible .bgf-col__caret {
    display: block;
    flex: none;
    width: 9px; height: 9px;
    margin-inline-end: 4px;
    border-inline-end: 2px solid var(--bgf-muted);
    border-block-end: 2px solid var(--bgf-muted);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease, border-color .18s ease;
}
.bgf-collapsible .bgf-col__btn[aria-expanded="true"] .bgf-col__caret {
    transform: translateY(2px) rotate(-135deg);
    border-color: var(--bgf-red);
}
.bgf-collapsible .bgf-col__list { padding-bottom: 16px; }

@media (prefers-reduced-motion: reduce) {
    .bgf-collapsible .bgf-col__caret { transition: none; }
}