/* ==========================================================================
   GALANOR — Design system & theme
   --------------------------------------------------------------------------
   One stylesheet, loaded after Bootstrap (and after main.min.css on legacy
   pages). Sections:

     1. Tokens            colours, gradients, type, spacing, radii, shadows
     2. Base              page atmosphere, typography, links, focus
     3. Motifs            stars, gems, dividers, eyebrows, ornaments
     4. Buttons           .g-btn (+ --primary / --secondary / --ghost)
     5. Cards             .g-card, .g-arch, .g-banner
     6. Header & nav      .g-topbar, .g-nav
     7. Hero              .g-hero
     8. Sections          .g-section, .g-section-head, layout helpers
     9. Forms             .g-field, .g-input, .g-check, .g-radio
    10. Overlays          dropdowns, modals, alerts, badges, tables
    11. Footer            .g-footer
    12. Patch notes       restyles the cards rendered by js/updates.js
    13. Legacy bridge     re-skins main.min.css classes (play, deals, store)
    14. Motion            keyframes, reveal, reduced-motion

   Fonts (Cinzel + Inter) are loaded with a <link> in each page's <head>.
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

/* Registered so card edges can fade smoothly on hover. */
@property --g-edge {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.3;
}

:root {
    /* Backgrounds */
    --g-void: #07040d;
    --g-bg: #0b0713;
    --g-bg-2: #160d25;
    --g-surface: #211431;
    --g-surface-2: #302044;
    --g-surface-3: #3b2856;

    /* Brand purples */
    --g-violet-deep: #421873;
    --g-royal: #7135b7;
    --g-amethyst: #a65cff;
    --g-arcane: #c58aff;
    --g-arcane-pale: #e3c8ff;

    /* Metallics */
    --g-gold: #c79a64;
    --g-gold-bright: #f0c995;
    --g-gold-pale: #fbe7c4;
    --g-bronze: #765035;

    /* Text. Muted is lifted from #81718F to #9383A3 to pass 4.5:1 on cards. */
    --g-text: #f5eeff;
    --g-text-2: #b7a8c9;
    --g-text-3: #9383a3;

    /* Status (tuned to sit inside the palette) */
    --g-success: #7ddcb0;
    --g-success-bg: rgba(125, 220, 176, .1);
    --g-warning: #f0c995;
    --g-warning-bg: rgba(240, 201, 149, .1);
    --g-danger: #ff8fa6;
    --g-danger-bg: rgba(255, 143, 166, .1);
    --g-info: #c58aff;
    --g-info-bg: rgba(197, 138, 255, .1);

    /* Gradients */
    --g-grad-gold: linear-gradient(180deg, #fbe7c4 0%, #f0c995 22%, #c79a64 58%, #765035 100%);
    --g-grad-gold-text: linear-gradient(180deg, #fff3dc 0%, #f0c995 45%, #c79a64 80%, #a07650 100%);
    --g-grad-royal: linear-gradient(180deg, #8a4ce0 0%, #7135b7 48%, #4a1c88 100%);
    --g-grad-surface: linear-gradient(180deg, #261839 0%, #1b1029 100%);
    --g-grad-surface-raised: linear-gradient(180deg, #34224b 0%, #23163a 100%);
    --g-grad-edge: linear-gradient(160deg,
            rgba(240, 201, 149, calc(var(--g-edge) * 1.1)) 0%,
            rgba(166, 92, 255, calc(var(--g-edge) * .6)) 45%,
            rgba(118, 80, 53, calc(var(--g-edge) * .9)) 100%);
    --g-grad-line-gold: linear-gradient(90deg, transparent, rgba(199, 154, 100, .7) 30%, rgba(240, 201, 149, .9) 50%, rgba(199, 154, 100, .7) 70%, transparent);
    --g-grad-line-violet: linear-gradient(90deg, transparent, rgba(166, 92, 255, .55) 50%, transparent);

    /* SVG motifs (data URIs so they work everywhere without extra requests) */
    --g-svg-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M10 0Q11.2 10.8 19 12Q11.2 13.2 10 24Q8.8 13.2 1 12Q8.8 10.8 10 0Z'/%3E%3C/svg%3E");
    --g-svg-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V27C0 15 30 5 50 0C70 5 100 15 100 27V40Z'/%3E%3C/svg%3E");
    --g-svg-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 0L56 28L28 56L0 28Z' fill='none' stroke='%23a65cff' stroke-opacity='.07'/%3E%3Cpath d='M28 22L31 28L28 34L25 28Z' fill='%23c79a64' fill-opacity='.08'/%3E%3C/svg%3E");
    --g-svg-gems: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e3c8ff'/%3E%3Cstop offset='1' stop-color='%237135b7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='%23d9ad78' stroke-width='.8'%3E%3Cpath d='M6 4L9 7L6 10L3 7Z' fill='%23421873'/%3E%3Cpath d='M22 1L28 7L22 13L16 7Z' fill='url(%23g)'/%3E%3Cpath d='M38 4L41 7L38 10L35 7Z' fill='%23421873'/%3E%3C/g%3E%3C/svg%3E");
    --g-svg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23f0c995' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --g-svg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --g-svg-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M6 12h12M3 18h18' stroke='%23f0c995' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");

    /* Typography */
    --g-font-display: "Cinzel", "Marcellus", Georgia, "Times New Roman", serif;
    --g-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --g-fs-display: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem);
    --g-fs-h1: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem);
    --g-fs-h2: clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem);
    --g-fs-h3: clamp(1.25rem, 1.12rem + .5vw, 1.55rem);
    --g-fs-h4: 1.125rem;
    --g-fs-lead: clamp(1.05rem, 1rem + .3vw, 1.25rem);
    --g-fs-body: 1rem;
    --g-fs-sm: .875rem;
    --g-fs-xs: .75rem;

    --g-tracking-display: .04em;
    --g-tracking-ui: .14em;
    --g-tracking-caps: .22em;

    /* Spacing (4px base) */
    --g-space-1: .25rem;
    --g-space-2: .5rem;
    --g-space-3: .75rem;
    --g-space-4: 1rem;
    --g-space-5: 1.25rem;
    --g-space-6: 1.5rem;
    --g-space-8: 2rem;
    --g-space-10: 2.5rem;
    --g-space-12: 3rem;
    --g-space-16: 4rem;
    --g-space-section: clamp(3.5rem, 2.5rem + 3.5vw, 6rem);
    --g-gutter: clamp(1rem, .6rem + 1.6vw, 1.75rem);

    /* Radii: kept small; the logo is sharp, not soft */
    --g-radius-xs: 2px;
    --g-radius-sm: 4px;
    --g-radius-md: 8px;
    --g-radius-lg: 12px;
    --g-notch: 12px;

    /* Borders */
    --g-border-hair: 1px solid rgba(199, 154, 100, .16);
    --g-border-violet: 1px solid rgba(166, 92, 255, .22);
    --g-border-gold: 1px solid rgba(199, 154, 100, .5);

    /* Shadows: deep and purple-black, never grey */
    --g-shadow-sm: 0 2px 8px rgba(4, 1, 10, .5);
    --g-shadow-md: 0 10px 30px rgba(4, 1, 10, .55);
    --g-shadow-lg: 0 24px 60px rgba(4, 1, 10, .7);
    --g-shadow-inset: inset 0 1px 0 rgba(240, 201, 149, .07), inset 0 0 0 1px rgba(166, 92, 255, .04);

    /* Glows */
    --g-glow-sm: 0 0 12px rgba(166, 92, 255, .35);
    --g-glow-md: 0 0 28px rgba(166, 92, 255, .3);
    --g-glow-lg: 0 0 70px rgba(166, 92, 255, .28);
    --g-glow-gold: 0 0 18px rgba(240, 201, 149, .25);

    /* Motion */
    --g-ease: cubic-bezier(.2, .7, .2, 1);
    --g-ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --g-dur-fast: 150ms;
    --g-dur: 260ms;
    --g-dur-slow: 600ms;

    /* Layout */
    --g-container: 1240px;
    --g-container-narrow: 880px;
    --g-nav-h: 84px;

    /* Layers */
    --g-z-nav: 1030;
    --g-z-nav-menu: 1031;

    color-scheme: dark;
}

@media (max-width: 991.98px) {
    :root { --g-nav-h: 68px; }
}


/* ==========================================================================
   2. Base
   ========================================================================== */

html {
    background-color: var(--g-bg);
    scroll-padding-top: calc(var(--g-nav-h) + 1rem);
}

/* Page atmosphere: near-black violet with large soft glows and a vignette. */
body.g-page {
    margin: 0;
    min-height: 100vh;
    color: var(--g-text-2);
    font-family: var(--g-font-body);
    font-size: var(--g-fs-body);
    line-height: 1.65;
    background-color: var(--g-bg) !important;
    background-image:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(113, 53, 183, .22), transparent 70%),
        radial-gradient(ellipse 50% 40% at 100% 45%, rgba(66, 24, 115, .22), transparent 70%),
        radial-gradient(ellipse 50% 40% at 0% 80%, rgba(66, 24, 115, .18), transparent 70%) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    isolation: isolate;
    overflow-x: hidden;
}

body.g-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(4, 1, 10, .6) 100%);
}

:where(.g-page) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--g-font-display);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: var(--g-tracking-display);
    color: var(--g-text);
    margin: 0 0 var(--g-space-4);
}

:where(.g-page) h1 { font-size: var(--g-fs-h1); }
:where(.g-page) h2 { font-size: var(--g-fs-h2); }
:where(.g-page) h3 { font-size: var(--g-fs-h3); }
:where(.g-page) h4 { font-size: var(--g-fs-h4); }

:where(.g-page) p { margin: 0 0 var(--g-space-4); }
:where(.g-page) p:last-child { margin-bottom: 0; }

:where(.g-page) a {
    color: var(--g-arcane-pale);
    text-decoration: none;
    transition: color var(--g-dur) var(--g-ease);
}

:where(.g-page) a:hover { color: var(--g-gold-bright); }

:where(.g-page) img { max-width: 100%; height: auto; }

::selection {
    background: rgba(166, 92, 255, .45);
    color: #fff;
}

/* One consistent, clearly visible focus ring for keyboard users. */
:focus-visible {
    outline: 2px solid var(--g-arcane);
    outline-offset: 3px;
}

:focus:not(:focus-visible) { outline: none; }

html { scrollbar-color: var(--g-surface-3) var(--g-bg); }
::-webkit-scrollbar { width: 12px; height: 12px; background: var(--g-bg); }
::-webkit-scrollbar-track { background: var(--g-bg); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--g-surface-3), var(--g-violet-deep));
    border: 3px solid var(--g-bg);
    border-radius: 8px;
}

/* Sticky footer: every page's <body> carries .g-site (includes/header.php). */
.g-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.g-site > main { flex: 1 0 auto; }

/* Utilities */
.g-container {
    width: 100%;
    max-width: calc(var(--g-container) + 2 * var(--g-gutter));
    margin-inline: auto;
    padding-inline: var(--g-gutter);
}

.g-container--narrow { max-width: calc(var(--g-container-narrow) + 2 * var(--g-gutter)); }

.g-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.g-skip-link {
    position: absolute;
    left: var(--g-space-4);
    top: -100px;
    z-index: 2000;
    padding: var(--g-space-3) var(--g-space-5);
    background: var(--g-surface-2);
    color: var(--g-text) !important;
    border: var(--g-border-gold);
    border-radius: var(--g-radius-sm);
    font-weight: 600;
}

.g-skip-link:focus { top: var(--g-space-4); }

/* Heading treatments */
.g-text-gold {
    background: var(--g-grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

.g-display {
    font-family: var(--g-font-display);
    font-size: var(--g-fs-display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: var(--g-tracking-display);
}

.g-lead {
    font-size: var(--g-fs-lead);
    line-height: 1.7;
    color: var(--g-text-2);
}

.g-muted { color: var(--g-text-3); }


/* ==========================================================================
   3. Motifs
   ========================================================================== */

/* Four-pointed star (from the logo's glowing sparkles). Inherits colour. */
.g-star {
    display: inline-block;
    width: .8em;
    height: 1em;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--g-svg-star) center / contain no-repeat;
    mask: var(--g-svg-star) center / contain no-repeat;
    vertical-align: -.1em;
}

/* Amethyst gem: a small faceted diamond with a gold rim. */
.g-gem {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: none;
    transform: rotate(45deg);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, transparent 45%),
        linear-gradient(135deg, var(--g-arcane-pale), var(--g-amethyst) 45%, var(--g-violet-deep));
    border: 1px solid var(--g-gold-bright);
    box-shadow: 0 0 12px rgba(197, 138, 255, .7), 0 0 2px rgba(240, 201, 149, .8);
}

/* Small caps label with a star on each side. */
.g-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .75em;
    margin: 0 0 var(--g-space-4);
    font-family: var(--g-font-body);
    font-size: var(--g-fs-xs);
    font-weight: 700;
    letter-spacing: var(--g-tracking-caps);
    text-transform: uppercase;
    color: var(--g-arcane);
}

.g-eyebrow::before,
.g-eyebrow::after {
    content: "";
    width: .75em;
    height: .95em;
    background: var(--g-gold);
    -webkit-mask: var(--g-svg-star) center / contain no-repeat;
    mask: var(--g-svg-star) center / contain no-repeat;
}

/* Divider: gold hairline broken by a small-large-small chain of gems,
   mirroring the stacked stars on the logo's central "A". */
.g-divider {
    display: block;
    width: min(100%, 320px);
    height: 14px;
    margin: var(--g-space-5) auto;
    border: 0;
    opacity: 1;
    color: inherit;
    background:
        var(--g-svg-gems) center / 44px 14px no-repeat,
        linear-gradient(90deg,
            transparent 0,
            rgba(199, 154, 100, .75) 40%,
            rgba(199, 154, 100, .75) calc(50% - 28px),
            transparent calc(50% - 28px),
            transparent calc(50% + 28px),
            rgba(199, 154, 100, .75) calc(50% + 28px),
            rgba(199, 154, 100, .75) 60%,
            transparent 100%) center / 100% 1px no-repeat;
}

.g-divider--wide { width: 100%; }

.g-divider--start {
    width: 180px;
    margin-left: 0;
    background:
        var(--g-svg-gems) left center / 44px 14px no-repeat,
        linear-gradient(90deg, transparent 0 52px, rgba(199, 154, 100, .75) 52px, transparent 100%) center / 100% 1px no-repeat;
}

.g-divider--violet {
    background:
        var(--g-svg-gems) center / 44px 14px no-repeat,
        linear-gradient(90deg, transparent, rgba(166, 92, 255, .5) 35%, transparent calc(50% - 28px), transparent calc(50% + 28px), rgba(166, 92, 255, .5) 65%, transparent) center / 100% 1px no-repeat;
}

/* Plain hairline for quiet separation inside components. */
.g-rule {
    height: 1px;
    margin: var(--g-space-6) 0;
    border: 0;
    opacity: 1;
    background: var(--g-grad-line-violet);
}

/* Diamond icon frame: a rotated square with a gold rim; the icon stays upright. */
.g-sigil {
    --g-sigil-size: 60px;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--g-sigil-size);
    height: var(--g-sigil-size);
    flex: none;
    color: var(--g-gold-bright);
    font-size: calc(var(--g-sigil-size) * .34);
}

.g-sigil::before,
.g-sigil::after {
    content: "";
    position: absolute;
    inset: 14.6%;
    transform: rotate(45deg);
}

.g-sigil::before {
    background: var(--g-grad-gold);
    box-shadow: 0 0 22px rgba(166, 92, 255, .35);
}

.g-sigil::after {
    inset: calc(14.6% + 1px);
    background:
        radial-gradient(circle at 50% 30%, rgba(197, 138, 255, .45), transparent 70%),
        linear-gradient(180deg, #3a2160, #1b0f2e);
}

.g-sigil > * { position: relative; z-index: 1; }

.g-sigil--sm { --g-sigil-size: 44px; }
.g-sigil--lg { --g-sigil-size: 84px; }

/* Ornamental corner brackets, applied as a decoration layer to any container. */
.g-ornate { position: relative; }

.g-ornate::after {
    --c: rgba(240, 201, 149, .55);
    --l: 18px;
    content: "";
    position: absolute;
    inset: 7px;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(var(--c), var(--c)) top left / var(--l) 1px,
        linear-gradient(var(--c), var(--c)) top left / 1px var(--l),
        linear-gradient(var(--c), var(--c)) top right / var(--l) 1px,
        linear-gradient(var(--c), var(--c)) top right / 1px var(--l),
        linear-gradient(var(--c), var(--c)) bottom left / var(--l) 1px,
        linear-gradient(var(--c), var(--c)) bottom left / 1px var(--l),
        linear-gradient(var(--c), var(--c)) bottom right / var(--l) 1px,
        linear-gradient(var(--c), var(--c)) bottom right / 1px var(--l);
    background-repeat: no-repeat;
    transition: inset var(--g-dur) var(--g-ease), opacity var(--g-dur) var(--g-ease);
}


/* ==========================================================================
   4. Buttons
   --------------------------------------------------------------------------
   Pointed ends echo the logo's spurred terminals. The shape lives on two
   pseudo-elements (gold edge + fill) so the element itself is never clipped:
   focus outlines and drop-shadow glows still render around it.
   ========================================================================== */

.g-btn {
    --g-btn-notch: var(--g-notch);
    --g-btn-edge: var(--g-grad-gold);
    --g-btn-fill: var(--g-grad-royal);
    --g-btn-color: var(--g-text);
    --g-btn-glow: drop-shadow(0 0 10px rgba(166, 92, 255, .55)) drop-shadow(0 0 2px rgba(240, 201, 149, .35));
    --g-btn-shape: polygon(var(--g-btn-notch) 0, calc(100% - var(--g-btn-notch)) 0, 100% 50%, calc(100% - var(--g-btn-notch)) 100%, var(--g-btn-notch) 100%, 0 50%);

    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65em;
    min-height: 48px;
    margin: 0;
    padding: .8rem calc(var(--g-btn-notch) + 1.35rem);
    font-family: var(--g-font-display);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--g-tracking-ui);
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: var(--g-btn-color) !important;
    text-shadow: 0 1px 2px rgba(18, 4, 38, .65);
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        color var(--g-dur) var(--g-ease),
        filter var(--g-dur) var(--g-ease),
        transform var(--g-dur-fast) var(--g-ease);
}

.g-btn::before,
.g-btn::after {
    content: "";
    position: absolute;
    z-index: -1;
    clip-path: var(--g-btn-shape);
}

.g-btn::before {
    inset: 0;
    background: var(--g-btn-edge);
}

/* Fill layers, top to bottom: shimmer sweep, glass sheen, colour. */
.g-btn::after {
    inset: 1px;
    background:
        linear-gradient(105deg, transparent 40%, rgba(255, 238, 214, .3) 50%, transparent 60%) 100% 0 / 250% 100% no-repeat,
        linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 52%),
        var(--g-btn-fill);
    transition: filter var(--g-dur) var(--g-ease);
}

.g-btn i,
.g-btn .g-star { font-size: 1.05em; }

.g-btn:hover {
    filter: var(--g-btn-glow);
    transform: translateY(-1px);
}

.g-btn:hover::after {
    filter: brightness(1.16) saturate(1.05);
    background-position: 0 0, 0 0, 0 0;
    transition: filter var(--g-dur) var(--g-ease), background-position 900ms var(--g-ease);
}

.g-btn:active { transform: translateY(0) scale(.98); }

.g-btn:focus-visible { outline-offset: 4px; }

.g-btn:disabled,
.g-btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.35);
    transform: none;
    pointer-events: none;
}

/* Secondary: dark, quiet fill with a muted gold rim and gold text. */
.g-btn--secondary {
    --g-btn-edge: linear-gradient(180deg, rgba(240, 201, 149, .8), rgba(118, 80, 53, .7));
    --g-btn-fill: linear-gradient(180deg, #24163a, #150c24);
    --g-btn-color: var(--g-gold-bright);
    --g-btn-glow: drop-shadow(0 0 10px rgba(166, 92, 255, .35));
    text-shadow: none;
}

.g-btn--secondary:hover { --g-btn-color: var(--g-text); }

.g-btn--secondary:hover::after { filter: brightness(1.45); }

/* Violet-rimmed secondary, for lower emphasis next to a primary. */
.g-btn--subtle {
    --g-btn-edge: linear-gradient(180deg, rgba(197, 138, 255, .6), rgba(66, 24, 115, .8));
    --g-btn-fill: linear-gradient(180deg, rgba(48, 32, 68, .96), rgba(22, 13, 37, .96));
    --g-btn-color: var(--g-arcane-pale);
    text-shadow: none;
}

/* Ghost: text button with a growing gold underline. */
.g-btn--ghost {
    --g-btn-color: var(--g-arcane-pale);
    min-height: 40px;
    padding-inline: .25rem;
    text-shadow: none;
}

.g-btn--ghost::before {
    inset: auto 0 6px;
    height: 1px;
    clip-path: none;
    background: var(--g-grad-line-gold);
    transform: scaleX(.3);
    opacity: .6;
    transition: transform var(--g-dur) var(--g-ease), opacity var(--g-dur) var(--g-ease);
}

.g-btn--ghost::after { content: none; }

.g-btn--ghost:hover {
    --g-btn-color: var(--g-gold-bright);
    filter: none;
}

.g-btn--ghost:hover::before { transform: scaleX(1); opacity: 1; }

.g-btn--ghost .fa-arrow-right { transition: transform var(--g-dur) var(--g-ease); }
.g-btn--ghost:hover .fa-arrow-right { transform: translateX(3px); }

/* Sizes */
.g-btn--sm {
    --g-btn-notch: 9px;
    min-height: 38px;
    padding: .55rem calc(var(--g-btn-notch) + .9rem);
    font-size: .75rem;
}

.g-btn--lg {
    --g-btn-notch: 16px;
    min-height: 58px;
    padding: 1rem calc(var(--g-btn-notch) + 2rem);
    font-size: 1rem;
}

.g-btn--block { display: flex; width: 100%; }

.g-btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--g-space-4);
}

/* Square icon button (social links, toggles). */
.g-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--g-gold-bright) !important;
    font-size: 1.05rem;
    background: linear-gradient(180deg, #24163a, #150c24);
    border: 1px solid rgba(199, 154, 100, .38);
    border-radius: var(--g-radius-sm);
    box-shadow: var(--g-shadow-inset);
    cursor: pointer;
    transition: color var(--g-dur) var(--g-ease), border-color var(--g-dur) var(--g-ease), box-shadow var(--g-dur) var(--g-ease), transform var(--g-dur) var(--g-ease);
}

.g-icon-btn:hover {
    color: var(--g-text) !important;
    border-color: rgba(197, 138, 255, .75);
    box-shadow: var(--g-shadow-inset), var(--g-glow-sm);
    transform: translateY(-2px);
}


/* ==========================================================================
   5. Cards
   ========================================================================== */

.g-card {
    --g-edge: .3;
    --g-mx: 50%;
    --g-my: 0%;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--g-text-2);
    border: 1px solid transparent;
    border-radius: var(--g-radius-md);
    background:
        var(--g-grad-surface) padding-box,
        var(--g-grad-edge) border-box;
    box-shadow: var(--g-shadow-md), var(--g-shadow-inset);
    transition:
        --g-edge var(--g-dur) var(--g-ease),
        transform var(--g-dur) var(--g-ease),
        box-shadow var(--g-dur) var(--g-ease);
}

/* Soft illumination that follows the pointer (js/scripts.js sets --g-mx/--g-my). */
.g-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--g-mx) var(--g-my), rgba(166, 92, 255, .14), transparent 60%);
    opacity: 0;
    transition: opacity var(--g-dur-slow) var(--g-ease);
}

.g-card__body { padding: var(--g-space-6); flex: 1 1 auto; }

.g-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-4);
    padding: var(--g-space-4) var(--g-space-6);
    border-bottom: 1px solid rgba(199, 154, 100, .14);
}

.g-card__header h3,
.g-card__header h4 { margin: 0; }

.g-card__footer {
    display: flex;
    align-items: center;
    gap: var(--g-space-4);
    padding: var(--g-space-4) var(--g-space-6);
    border-top: 1px solid rgba(199, 154, 100, .12);
}

.g-card__title {
    font-family: var(--g-font-display);
    font-size: var(--g-fs-h3);
    color: var(--g-text);
    margin: 0 0 var(--g-space-3);
}

.g-card__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: calc(var(--g-radius-md) - 1px) calc(var(--g-radius-md) - 1px) 0 0;
    aspect-ratio: 16 / 9;
    background: var(--g-bg-2);
}

.g-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--g-dur-slow) var(--g-ease);
}

.g-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(27, 16, 41, .9));
}

/* Interactive cards lift and light up. Links inside can be stretched. */
.g-card--interactive:hover,
.g-card--interactive:focus-within {
    --g-edge: .75;
    transform: translateY(-4px);
    box-shadow: var(--g-shadow-lg), var(--g-shadow-inset), 0 0 40px rgba(166, 92, 255, .14);
}

.g-card--interactive:hover::before,
.g-card--interactive:focus-within::before { opacity: 1; }

.g-card--interactive:hover .g-card__media img { transform: scale(1.04); }

.g-stretched::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

.g-card .g-stretched { color: inherit; }
.g-card .g-stretched:focus-visible { outline: none; }
.g-card:has(.g-stretched:focus-visible) { outline: 2px solid var(--g-arcane); outline-offset: 4px; }

/* Raised: a lighter surface for nested/elevated content. */
.g-card--raised {
    background:
        var(--g-grad-surface-raised) padding-box,
        var(--g-grad-edge) border-box;
}

/* Ornate: corner brackets plus a stronger gold edge. */
.g-card--ornate { --g-edge: .5; }
.g-card--ornate:hover::after { inset: 5px; }

/* Featured: a gem set into the top edge. */
.g-card--featured {
    --g-edge: .6;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(166, 92, 255, .18), transparent 70%) padding-box,
        var(--g-grad-surface) padding-box,
        var(--g-grad-edge) border-box;
}

.g-card > .g-gem {
    position: absolute;
    top: -8px;
    left: calc(50% - 7px);
    z-index: 3;
}

/* Arch card: gothic pointed top. The arch is a mask, so the gold edge and fill
   are two masked pseudo-layers and the drop shadow follows the shape. */
.g-arch {
    --g-edge: .55;
    --g-arch-h: 64px;
    --g-arch-mask:
        var(--g-svg-arch) top / 100% var(--g-arch-h) no-repeat,
        linear-gradient(#000 0 0) 0 calc(var(--g-arch-h) - 1px) / 100% calc(100% - var(--g-arch-h) + 1px) no-repeat;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--g-arch-h) * .55) var(--g-space-6) var(--g-space-8);
    text-align: center;
    color: var(--g-text-2);
    filter: drop-shadow(0 18px 30px rgba(4, 1, 10, .55));
    transition:
        --g-edge var(--g-dur) var(--g-ease),
        transform var(--g-dur) var(--g-ease),
        filter var(--g-dur) var(--g-ease);
}

.g-arch::before,
.g-arch::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-mask: var(--g-arch-mask);
    mask: var(--g-arch-mask);
}

.g-arch::before {
    background: linear-gradient(180deg,
            rgba(240, 201, 149, calc(var(--g-edge) + .2)) 0%,
            rgba(199, 154, 100, var(--g-edge)) 25%,
            rgba(166, 92, 255, calc(var(--g-edge) * .45)) 70%,
            rgba(118, 80, 53, calc(var(--g-edge) * .6)) 100%);
}

.g-arch::after {
    inset: 1px;
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(166, 92, 255, .22), transparent 75%),
        var(--g-svg-lattice) center top / 56px 56px,
        var(--g-grad-surface);
}

.g-arch h3 { margin: var(--g-space-5) 0 var(--g-space-3); }

.g-arch p { max-width: 32ch; }

.g-arch__cta {
    margin-top: auto;
    padding-top: var(--g-space-5);
}

.g-arch:hover,
.g-arch:focus-within {
    --g-edge: .95;
    transform: translateY(-5px);
    filter: drop-shadow(0 22px 36px rgba(4, 1, 10, .6)) drop-shadow(0 0 22px rgba(166, 92, 255, .25));
}

.g-arch:has(.g-stretched:focus-visible) { outline: 2px solid var(--g-arcane); outline-offset: 6px; }

/* Banner: the premium panel. Stronger gold, crystal art, a slow shimmer. */
.g-banner {
    --g-edge: .7;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--g-space-8);
    padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--g-radius-lg);
    background:
        radial-gradient(ellipse 60% 90% at 85% 50%, rgba(166, 92, 255, .28), transparent 70%) padding-box,
        var(--g-svg-lattice) center / 56px 56px padding-box,
        linear-gradient(120deg, #2b1846 0%, #1a0f2b 60%, #150c24 100%) padding-box,
        linear-gradient(120deg, rgba(240, 201, 149, .85), rgba(118, 80, 53, .5) 35%, rgba(166, 92, 255, .4) 65%, rgba(240, 201, 149, .7)) border-box;
    box-shadow: var(--g-shadow-lg), var(--g-shadow-inset);
}

.g-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 236, 210, .07) 50%, transparent 58%) 100% 0 / 250% 100% no-repeat;
    animation: g-shimmer-single 9s var(--g-ease-in-out) infinite 3s;
}

.g-banner__art {
    justify-self: center;
    width: min(100%, 260px);
    filter: drop-shadow(0 0 40px rgba(166, 92, 255, .45));
    animation: g-float 8s ease-in-out infinite;
}

@media (max-width: 767.98px) {
    .g-banner { grid-template-columns: 1fr; text-align: center; }
    .g-banner .g-btn-group { justify-content: center; }
    .g-banner .g-divider--start { margin-inline: auto; width: min(100%, 320px); }
    .g-banner__art { width: 150px; grid-row: 1; }
}

/* Framed media (images, video embeds). */
.g-frame {
    position: relative;
    padding: 6px;
    border-radius: var(--g-radius-md);
    background:
        linear-gradient(180deg, #1d1130, #120a1e) padding-box,
        linear-gradient(160deg, rgba(240, 201, 149, .7), rgba(118, 80, 53, .5) 50%, rgba(240, 201, 149, .5)) border-box;
    border: 1px solid transparent;
    box-shadow: var(--g-shadow-lg), 0 0 50px rgba(166, 92, 255, .12);
}

.g-frame > img,
.g-frame > .g-embed {
    display: block;
    width: 100%;
    border-radius: calc(var(--g-radius-md) - 4px);
}

.g-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--g-void);
}

.g-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ==========================================================================
   6. Header & navigation
   ========================================================================== */

.g-topbar {
    position: relative;
    z-index: calc(var(--g-z-nav) + 1);
    font-size: .8125rem;
    background: rgba(7, 4, 13, .92);
    border-bottom: 1px solid rgba(199, 154, 100, .1);
}

.g-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-4);
    min-height: 38px;
}

.g-topbar a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding-block: .5rem;
    color: var(--g-text-2);
}

.g-topbar a i { color: var(--g-amethyst); }
.g-topbar a:hover { color: var(--g-gold-bright); }

/* Main nav: translucent, blurred, with a thin bronze rule that brightens
   under the centred logo. */
.g-nav {
    position: sticky;
    top: 0;
    z-index: var(--g-z-nav);
    background: rgba(11, 7, 19, .62);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(118, 80, 53, .45);
    transition: background-color var(--g-dur) var(--g-ease), box-shadow var(--g-dur) var(--g-ease);
}

.g-nav::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: min(560px, 70%);
    height: 1px;
    transform: translateX(-50%);
    background: var(--g-grad-line-gold);
    pointer-events: none;
}

.g-nav.is-scrolled {
    background: rgba(11, 7, 19, .88);
    box-shadow: 0 10px 30px rgba(4, 1, 10, .55);
}

.g-nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: clamp(1rem, 2.5vw, 3rem);
    min-height: var(--g-nav-h);
}

.g-nav__brand {
    grid-column: 2;
    grid-row: 1;
    display: block;
    line-height: 0;
    transition: filter var(--g-dur) var(--g-ease), transform var(--g-dur) var(--g-ease);
}

.g-nav__brand img {
    width: auto;
    height: 60px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}

.g-nav__brand:hover {
    filter: drop-shadow(0 0 14px rgba(166, 92, 255, .45)) brightness(1.08);
    transform: translateY(-1px);
}

/* Desktop: the menu wrapper dissolves so both lists sit in the grid either
   side of the logo. */
.g-nav__menu { display: contents; }

.g-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(.25rem, 1.6vw, 1.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.g-nav__list--start { grid-column: 1; grid-row: 1; justify-content: flex-end; }
.g-nav__list--end { grid-column: 3; grid-row: 1; justify-content: flex-start; }

.g-nav__list li { list-style: none; }

.g-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .75rem .5rem;
    font-family: var(--g-font-display);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: var(--g-tracking-ui);
    text-transform: uppercase;
    color: var(--g-text-2) !important;
    transition: color var(--g-dur) var(--g-ease), text-shadow var(--g-dur) var(--g-ease);
}

.g-nav__link::after {
    content: "";
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: .35rem;
    height: 1px;
    background: var(--g-grad-line-gold);
    transform: scaleX(0);
    transition: transform var(--g-dur) var(--g-ease);
}

.g-nav__link:hover {
    color: var(--g-text) !important;
    text-shadow: 0 0 14px rgba(197, 138, 255, .7);
}

.g-nav__link:hover::after { transform: scaleX(1); }

.g-nav__link[aria-current="page"] { color: var(--g-gold-bright) !important; }
.g-nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Promo link: a small pulsing star instead of flashing text. */
.g-nav__link--promo .g-star {
    color: var(--g-arcane);
    font-size: .8em;
    animation: g-twinkle-soft 2.4s ease-in-out infinite;
}

.g-nav__toggle {
    display: none;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    background-image: var(--g-svg-menu), linear-gradient(180deg, #24163a, #150c24);
    background-size: 22px 22px, 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.g-nav__toggle[aria-expanded="true"] {
    background-image: linear-gradient(180deg, #24163a, #150c24);
}

.g-nav__toggle[aria-expanded="true"]::before {
    content: "\00d7";
    font-size: 1.6rem;
    line-height: 1;
}

@media (max-width: 991.98px) {
    .g-nav__inner { grid-template-columns: auto 1fr auto; }

    .g-nav__brand { grid-column: 1; }
    .g-nav__brand img { height: 46px; }

    .g-nav__toggle { display: inline-grid; }

    /* Without JS the menu stays visible as a wrapped row. */
    .g-nav__menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        grid-column: 1 / -1;
        grid-row: 2;
        padding-bottom: var(--g-space-3);
    }

    .g-nav__list { flex-wrap: wrap; justify-content: center; }

    /* With JS: a collapsible panel. */
    .g-js .g-nav__menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        padding: var(--g-space-4) var(--g-gutter) var(--g-space-6);
        /* Solid: a nested backdrop-filter can't blur through the nav's own. */
        background:
            radial-gradient(ellipse 80% 50% at 50% 0%, rgba(113, 53, 183, .18), transparent 70%),
            #0e0818;
        border-bottom: 1px solid rgba(118, 80, 53, .5);
        box-shadow: 0 24px 40px rgba(4, 1, 10, .7);
        max-height: calc(100vh - var(--g-nav-h));
        overflow-y: auto;
    }

    .g-js .g-nav.is-open .g-nav__menu { display: flex; animation: g-drop-in var(--g-dur) var(--g-ease); }

    .g-js .g-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

    .g-js .g-nav__link {
        display: flex;
        width: 100%;
        padding: .95rem .25rem;
        font-size: .9375rem;
        border-bottom: 1px solid rgba(199, 154, 100, .1);
    }

    .g-js .g-nav__link::after { left: .25rem; right: auto; width: 32px; bottom: -1px; }
}


/* ==========================================================================
   7. Hero
   ========================================================================== */

.g-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: min(94vh, 900px);
    margin-top: calc(-1 * var(--g-nav-h));
    padding: calc(var(--g-nav-h) + clamp(2.5rem, 6vh, 5rem)) 0 clamp(5rem, 12vh, 8rem);
    overflow: hidden;
    text-align: center;
}

/* Existing castle artwork, recoloured to amethyst with a colour blend layer
   so the original asset can stay untouched. */
.g-hero__art {
    position: absolute;
    inset: 0;
    z-index: -4;
    background:
        linear-gradient(180deg, #5b2a9c 0%, #2c1250 60%, #160a2a 100%),
        url("../images/hero-bg.jpg") center 35% / cover no-repeat;
    background-blend-mode: color, normal;
    opacity: .5;
    -webkit-mask: linear-gradient(180deg, #000 50%, transparent 98%);
    mask: linear-gradient(180deg, #000 50%, transparent 98%);
}

.g-hero__glow {
    position: absolute;
    left: 50%;
    top: 44%;
    z-index: -3;
    width: min(1200px, 160vw);
    aspect-ratio: 2 / 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(166, 92, 255, .38), rgba(113, 53, 183, .16) 45%, transparent 78%);
    animation: g-breathe 10s ease-in-out infinite;
    pointer-events: none;
}

.g-hero__sigil {
    position: absolute;
    left: 50%;
    top: 44%;
    z-index: -2;
    width: min(880px, 130vw);
    height: auto;
    color: var(--g-gold);
    opacity: .13;
    translate: -50% -50%;
    -webkit-mask: radial-gradient(closest-side, #000 75%, transparent);
    mask: radial-gradient(closest-side, #000 75%, transparent);
    animation: g-spin 240s linear infinite;
    pointer-events: none;
}

/* Rising embers, drawn by js/scripts.js. Sits above the sigil (same layer,
   later in the markup) and fades out toward the bottom like the art. */
.g-hero__particles {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
    -webkit-mask: linear-gradient(180deg, transparent, #000 15%, #000 70%, transparent);
    mask: linear-gradient(180deg, transparent, #000 15%, #000 70%, transparent);
}

/* Vignette. Every hero layer fades out by mask rather than painting the page
   colour, so the hero melts into whatever atmosphere sits behind it. */
.g-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 85% 75% at 50% 42%, transparent 45%, rgba(5, 2, 10, .7) 100%);
    -webkit-mask: linear-gradient(180deg, #000 55%, transparent);
    mask: linear-gradient(180deg, #000 55%, transparent);
}

.g-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.g-hero__crest {
    position: relative;
    width: min(760px, 100%);
    margin: 0 0 var(--g-space-2);
    line-height: 0;
}

.g-hero__crest img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .65)) drop-shadow(0 0 50px rgba(166, 92, 255, .22));
    animation: g-rise 1.2s var(--g-ease) both;
}

/* Twinkles placed over the logo's own stars, so the artwork feels alive
   without being redrawn. Positions are percentages of the logo image. */
.g-sparkle {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s, 7%);
    aspect-ratio: 1;
    translate: -50% -50%;
    pointer-events: none;
    mix-blend-mode: screen;
    background:
        radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(227, 200, 255, .6) 25%, rgba(166, 92, 255, .25) 55%, transparent 75%);
    opacity: 0;
    animation: g-twinkle 6s ease-in-out infinite var(--d, 0s);
}

.g-hero__tagline {
    margin: 0 0 var(--g-space-3);
    font-family: var(--g-font-display);
    font-size: clamp(1.35rem, 1rem + 1.6vw, 2.25rem);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.g-hero__lead {
    max-width: 46ch;
    margin: 0 auto var(--g-space-8);
    font-size: var(--g-fs-lead);
    color: var(--g-text-2);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.g-hero__actions { justify-content: center; }

.g-hero__actions .g-btn--primary::after { animation: g-shimmer 7s var(--g-ease-in-out) infinite 2.5s; }

.g-hero__platforms {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--g-space-2) var(--g-space-6);
    margin: var(--g-space-8) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--g-fs-sm);
    color: var(--g-text-3);
}

.g-hero__platforms li { list-style: none; }

.g-hero__platforms a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .2rem;
    color: var(--g-text-2);
}

.g-hero__platforms a:hover { color: var(--g-gold-bright); }
.g-hero__platforms i { color: var(--g-amethyst); }

.g-hero__edge {
    position: absolute;
    left: 50%;
    bottom: clamp(1.5rem, 4vh, 2.5rem);
    width: min(640px, 80%);
    margin: 0;
    transform: translateX(-50%);
}

@media (max-width: 575.98px) {
    .g-hero { min-height: 0; }
    .g-hero__actions { flex-direction: column; width: 100%; }
    .g-hero__actions .g-btn { width: min(100%, 320px); }
}


/* ==========================================================================
   8. Sections & layout helpers
   ========================================================================== */

.g-section {
    position: relative;
    isolation: isolate;
    padding-block: var(--g-space-section);
}

.g-section--tight { padding-block: calc(var(--g-space-section) * .6); }

/* Faint arcane lattice, fading out towards the edges. */
.g-section--arcane::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--g-svg-lattice) center / 56px 56px;
    -webkit-mask: radial-gradient(ellipse 70% 60% at 50% 50%, #000 15%, transparent 75%);
    mask: radial-gradient(ellipse 70% 60% at 50% 50%, #000 15%, transparent 75%);
}

/* Ambient glow behind the section's content. */
.g-section--glow::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: min(1000px, 120vw);
    aspect-ratio: 2 / 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(113, 53, 183, .2), transparent 75%);
    pointer-events: none;
}

.g-section-head {
    max-width: 720px;
    margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem);
    text-align: center;
}

.g-section-head h2 { margin-bottom: 0; }
.g-section-head .g-divider { margin-block: var(--g-space-5); }

.g-section-head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--g-space-6);
    max-width: none;
    text-align: left;
}

.g-section-head--split .g-divider { margin-left: 0; }

.g-grid {
    display: grid;
    gap: var(--g-space-6);
}

.g-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.g-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
}

@media (max-width: 991.98px) {
    .g-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g-split { grid-template-columns: 1fr; }
}

@media (max-width: 639.98px) {
    .g-grid--3,
    .g-grid--2 { grid-template-columns: 1fr; }
}

/* Feature list: diamond icon + title + line of text. */
.g-features {
    display: grid;
    gap: var(--g-space-5);
    margin: var(--g-space-8) 0;
    padding: 0;
    list-style: none;
}

.g-features li {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--g-space-4);
    list-style: none;
}

.g-features h3 {
    margin: 0 0 .2rem;
    font-size: 1.05rem;
}

.g-features p { margin: 0; font-size: var(--g-fs-sm); }

/* Closing call-to-action band. */
.g-cta {
    text-align: center;
}

.g-cta h2 { margin-bottom: var(--g-space-3); }
.g-cta .g-btn-group { justify-content: center; margin-top: var(--g-space-8); }


/* ==========================================================================
   9. Forms
   ========================================================================== */

.g-field {
    display: grid;
    gap: .5rem;
    margin: 0 0 var(--g-space-6);
}

.g-label {
    margin: 0;
    font-family: var(--g-font-body);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--g-text-2);
}

.g-label .g-req { color: var(--g-arcane); margin-left: .15em; }

.g-input {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: .75rem 1rem;
    font-family: var(--g-font-body);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--g-text);
    background-color: #130b20;
    background-image: linear-gradient(180deg, #110a1c, #180e28);
    border: 1px solid rgba(166, 92, 255, .24);
    border-radius: var(--g-radius-sm);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
    transition: border-color var(--g-dur) var(--g-ease), box-shadow var(--g-dur) var(--g-ease);
    -webkit-appearance: none;
    appearance: none;
}

.g-input::placeholder { color: var(--g-text-3); opacity: 1; }

.g-input:hover { border-color: rgba(166, 92, 255, .45); }

.g-input:focus,
.g-input:focus-visible {
    outline: none;
    color: var(--g-text);
    background-color: #160d25;
    border-color: var(--g-amethyst);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), 0 0 0 3px rgba(166, 92, 255, .28), 0 0 22px rgba(166, 92, 255, .18);
}

.g-input:disabled {
    opacity: .5;
    cursor: not-allowed;
}

textarea.g-input { min-height: 132px; resize: vertical; }

select.g-input {
    padding-right: 2.75rem;
    background-image: var(--g-svg-chevron), linear-gradient(180deg, #110a1c, #180e28);
    background-position: right 1rem center, 0 0;
    background-size: 12px 8px, 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
}

select.g-input option { background: var(--g-bg-2); color: var(--g-text); }

/* Validation: error and success states, driven by aria-invalid or field class. */
.g-input[aria-invalid="true"],
.g-field--error .g-input { border-color: var(--g-danger); }

.g-input[aria-invalid="true"]:focus,
.g-field--error .g-input:focus {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), 0 0 0 3px rgba(255, 143, 166, .25);
}

.g-field--success .g-input { border-color: rgba(125, 220, 176, .7); }

.g-help,
.g-feedback {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--g-text-3);
}

.g-feedback {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.g-feedback--error { color: var(--g-danger); }
.g-feedback--success { color: var(--g-success); }

/* Icon inside an input. */
.g-input-group { position: relative; }

.g-input-group > i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-gold);
    pointer-events: none;
}

.g-input-group > .g-input { padding-left: 2.75rem; }

/* Checkbox and diamond radio. */
.g-check,
.g-radio {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 var(--g-space-3);
    color: var(--g-text-2);
    cursor: pointer;
}

.g-check input,
.g-radio input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    background-color: #130b20;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid rgba(199, 154, 100, .55);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5);
    cursor: pointer;
    transition: background-color var(--g-dur-fast) var(--g-ease), border-color var(--g-dur-fast) var(--g-ease), box-shadow var(--g-dur-fast) var(--g-ease);
    -webkit-appearance: none;
    appearance: none;
}

.g-check input { border-radius: 3px; }

.g-check input:checked {
    background-color: var(--g-royal);
    background-image: var(--g-svg-check), var(--g-grad-royal);
    background-size: 14px 14px, 100% 100%;
    border-color: var(--g-gold-bright);
    box-shadow: var(--g-glow-sm);
}

.g-radio input {
    width: 17px;
    height: 17px;
    margin: 2px;
    transform: rotate(45deg);
    border-radius: 2px;
}

.g-radio input:checked {
    background-image: linear-gradient(135deg, var(--g-arcane-pale), var(--g-amethyst));
    background-size: 45% 45%;
    border-color: var(--g-gold-bright);
    box-shadow: var(--g-glow-sm);
}

.g-check input:hover,
.g-radio input:hover { border-color: var(--g-arcane); }

.g-check input:focus-visible,
.g-radio input:focus-visible {
    outline: 2px solid var(--g-arcane);
    outline-offset: 3px;
}

.g-fieldset {
    margin: 0 0 var(--g-space-6);
    padding: 0;
    border: 0;
}

.g-fieldset legend {
    float: none;
    width: auto;
    margin-bottom: var(--g-space-3);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--g-text-2);
}


/* ==========================================================================
   10. Overlays & small components
   ========================================================================== */

/* Badges */
.g-badge {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .35em .75em;
    font-family: var(--g-font-body);
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--g-arcane-pale);
    background: rgba(166, 92, 255, .14);
    border: 1px solid rgba(166, 92, 255, .35);
    border-radius: var(--g-radius-xs);
    white-space: nowrap;
}

.g-badge--gold { color: var(--g-gold-bright); background: rgba(199, 154, 100, .12); border-color: rgba(199, 154, 100, .45); }
.g-badge--success { color: var(--g-success); background: var(--g-success-bg); border-color: rgba(125, 220, 176, .35); }
.g-badge--danger { color: var(--g-danger); background: var(--g-danger-bg); border-color: rgba(255, 143, 166, .35); }

/* Alerts */
.g-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-3);
    margin: 0 0 var(--g-space-4);
    padding: var(--g-space-4) var(--g-space-5);
    color: var(--g-text);
    background: var(--g-info-bg);
    border: 1px solid rgba(197, 138, 255, .3);
    border-left: 3px solid var(--g-info);
    border-radius: var(--g-radius-sm);
}

.g-alert > i { margin-top: .2rem; color: var(--g-info); }
.g-alert--success { background: var(--g-success-bg); border-color: rgba(125, 220, 176, .3); border-left-color: var(--g-success); }
.g-alert--success > i { color: var(--g-success); }
.g-alert--warning { background: var(--g-warning-bg); border-color: rgba(240, 201, 149, .3); border-left-color: var(--g-warning); }
.g-alert--warning > i { color: var(--g-warning); }
.g-alert--danger { background: var(--g-danger-bg); border-color: rgba(255, 143, 166, .3); border-left-color: var(--g-danger); }
.g-alert--danger > i { color: var(--g-danger); }

/* Bootstrap dropdowns, themed through their CSS variables. */
.dropdown-menu {
    --bs-dropdown-bg: #1a0f2b;
    --bs-dropdown-color: var(--g-text-2);
    --bs-dropdown-border-color: rgba(199, 154, 100, .28);
    --bs-dropdown-border-radius: var(--g-radius-md);
    --bs-dropdown-padding-y: .5rem;
    --bs-dropdown-link-color: var(--g-text-2);
    --bs-dropdown-link-hover-color: var(--g-text);
    --bs-dropdown-link-hover-bg: rgba(166, 92, 255, .14);
    --bs-dropdown-link-active-color: var(--g-text);
    --bs-dropdown-link-active-bg: rgba(166, 92, 255, .28);
    --bs-dropdown-divider-bg: rgba(199, 154, 100, .16);
    --bs-dropdown-header-color: var(--g-gold);
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: .6rem;
    min-width: 13rem;
    background-image: linear-gradient(180deg, rgba(166, 92, 255, .08), transparent 40%);
    box-shadow: var(--g-shadow-lg), 0 0 0 1px rgba(166, 92, 255, .06), 0 0 30px rgba(166, 92, 255, .12);
}

.dropdown-menu.show { animation: g-drop-in var(--g-dur) var(--g-ease); }

.dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: var(--g-fs-sm);
    transition: background-color var(--g-dur-fast) var(--g-ease), color var(--g-dur-fast) var(--g-ease);
}

.dropdown-item i { width: 1.1em; color: var(--g-amethyst); text-align: center; }

.dropdown-header {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: var(--g-tracking-caps);
    text-transform: uppercase;
}

/* Bootstrap modals. The doubled selector outranks main.min.css on legacy pages. */
.modal {
    --bs-modal-bg: #1a0f2b;
    --bs-modal-color: var(--g-text-2);
    --bs-modal-border-color: rgba(199, 154, 100, .3);
    --bs-modal-border-radius: var(--g-radius-lg);
    --bs-modal-header-border-color: rgba(199, 154, 100, .16);
    --bs-modal-footer-border-color: rgba(199, 154, 100, .16);
    --bs-modal-padding: 1.75rem;
    --bs-modal-header-padding: 1.25rem 1.75rem;
}

.modal .modal-dialog .modal-content {
    color: var(--g-text-2);
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(166, 92, 255, .16), transparent 70%),
        var(--g-svg-lattice) center top / 56px 56px,
        linear-gradient(180deg, #23153a, #160d25);
    border: 1px solid rgba(199, 154, 100, .32);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg), 0 0 60px rgba(166, 92, 255, .15);
}

.modal .modal-dialog .modal-header {
    position: relative;
    border-bottom: 1px solid rgba(199, 154, 100, .16);
}

.modal .modal-dialog .modal-header::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 44px;
    height: 14px;
    transform: translateX(-50%);
    background: var(--g-svg-gems) center / contain no-repeat;
}

.modal .modal-title {
    font-family: var(--g-font-display);
    font-size: 1.35rem;
    letter-spacing: var(--g-tracking-display);
    color: var(--g-text);
}

.modal .modal-dialog .modal-body { padding: var(--bs-modal-padding); }

.modal .modal-footer { gap: var(--g-space-3); }

.modal .modal-dialog .btn-close {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0 0 0 auto;
    padding: 0;
    opacity: .8;
    background: transparent;
    border: 1px solid rgba(199, 154, 100, .35);
    border-radius: var(--g-radius-sm);
    box-shadow: none;
    color: var(--g-gold-bright);
}

.modal .modal-dialog .btn-close::before {
    content: "\00d7";
    font-size: 1.5rem;
    line-height: 1;
}

.modal .modal-dialog .btn-close:hover {
    opacity: 1;
    border-color: var(--g-arcane);
    box-shadow: var(--g-glow-sm);
}

.modal-backdrop,
.modal-backdrop.show {
    --bs-backdrop-bg: #05020a;
    background-color: rgba(5, 2, 10, .82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 1;
}

/* Numbered steps (used in the "how to start" modal). */
.g-steps {
    display: grid;
    gap: var(--g-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: g-step;
}

.g-steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--g-space-4);
    align-items: start;
    list-style: none;
    counter-increment: g-step;
}

.g-steps li::before {
    content: counter(g-step);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    font-family: var(--g-font-display);
    font-weight: 700;
    color: var(--g-gold-bright);
    background: linear-gradient(180deg, #3a2160, #1b0f2e);
    border: 1px solid rgba(199, 154, 100, .55);
    border-radius: 50%;
    box-shadow: var(--g-glow-sm);
}

.g-steps h3 { margin: .35rem 0 .25rem; font-size: 1.05rem; }
.g-steps p { margin: 0; font-size: var(--g-fs-sm); }

/* Tables */
.g-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--g-fs-sm);
    background: transparent;
    border: 0;
}

.g-table th,
.g-table td {
    padding: .85rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(199, 154, 100, .1);
}

.g-table thead th {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: var(--g-tracking-caps);
    text-transform: uppercase;
    color: var(--g-gold);
    background: rgba(11, 7, 19, .5);
    border-bottom-color: rgba(199, 154, 100, .3);
}

.g-table tbody tr { background: transparent; transition: background-color var(--g-dur-fast) var(--g-ease); }
.g-table tbody tr:hover { background: rgba(166, 92, 255, .07); }
.g-table td { color: var(--g-text-2); }
.g-table td strong { color: var(--g-text); }

/* Colour swatches (style guide). */
.g-swatch {
    display: grid;
    gap: .2rem;
    font-size: var(--g-fs-xs);
}

.g-swatch::before {
    content: "";
    display: block;
    height: 72px;
    margin-bottom: .5rem;
    border-radius: var(--g-radius-sm);
    background: var(--c);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--g-shadow-sm);
}

.g-swatch strong { color: var(--g-text); font-size: var(--g-fs-sm); }
.g-swatch code { color: var(--g-text-3); font-size: inherit; }


/* ==========================================================================
   11. Footer
   ========================================================================== */

.g-footer {
    position: relative;
    margin-top: var(--g-space-8);
    padding: var(--g-space-16) 0 0;
    background:
        radial-gradient(ellipse 60% 70% at 50% 0%, rgba(113, 53, 183, .18), transparent 70%),
        linear-gradient(180deg, rgba(11, 7, 19, 0), #07040d 40%);
    border-top: 1px solid rgba(118, 80, 53, .4);
}

.g-footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: min(720px, 80%);
    height: 1px;
    transform: translateX(-50%);
    background: var(--g-grad-line-gold);
}

.g-footer::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 44px;
    height: 14px;
    transform: translateX(-50%);
    background: var(--g-svg-gems) center / contain no-repeat;
}

.g-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.g-footer__brand img { width: 220px; height: auto; margin-bottom: var(--g-space-4); }

.g-footer__brand p { max-width: 44ch; font-size: var(--g-fs-sm); color: var(--g-text-3); }

.g-footer__nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--g-space-2) 0;
    margin: var(--g-space-8) 0;
    padding: 0;
    list-style: none;
}

.g-footer__nav li { display: flex; align-items: center; list-style: none; }

.g-footer__nav li + li::before {
    content: "";
    width: 5px;
    height: 5px;
    margin-inline: clamp(.75rem, 2vw, 1.5rem);
    transform: rotate(45deg);
    background: var(--g-bronze);
}

.g-footer__nav a {
    display: inline-block;
    padding: .4rem 0;
    font-family: var(--g-font-display);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: var(--g-tracking-ui);
    text-transform: uppercase;
    color: var(--g-text-2) !important;
}

.g-footer__nav a:hover { color: var(--g-gold-bright) !important; }

/* Wrapped rows would start with a stray separator, so small screens use spacing. */
@media (max-width: 767.98px) {
    .g-footer__nav ul { gap: .25rem 1.5rem; }
    .g-footer__nav li + li::before { display: none; }
}

.g-footer__social {
    display: flex;
    justify-content: center;
    gap: var(--g-space-3);
}

.g-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--g-space-3);
    margin-top: var(--g-space-12);
    padding-block: var(--g-space-5);
    font-size: var(--g-fs-xs);
    color: var(--g-text-3);
    border-top: 1px solid rgba(199, 154, 100, .1);
}

.g-footer__bar a { color: var(--g-text-3) !important; }
.g-footer__bar a:hover { color: var(--g-gold-bright) !important; }

@media (max-width: 575.98px) {
    .g-footer__bar { justify-content: center; text-align: center; }
}


/* ==========================================================================
   12. Patch notes (markup rendered by js/updates.js, also /updates/)
   ========================================================================== */

.patch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--g-space-6);
}

.patch-card {
    --g-edge: .3;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--g-text-2) !important;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--g-radius-md);
    background:
        var(--g-grad-surface) padding-box,
        var(--g-grad-edge) border-box;
    box-shadow: var(--g-shadow-md), var(--g-shadow-inset);
    transition: --g-edge var(--g-dur) var(--g-ease), transform var(--g-dur) var(--g-ease), box-shadow var(--g-dur) var(--g-ease);
}

.patch-card:hover {
    --g-edge: .75;
    color: var(--g-text-2) !important;
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: var(--g-shadow-lg), var(--g-shadow-inset), 0 0 40px rgba(166, 92, 255, .14);
}

.patch-cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--g-bg-2);
    border-bottom: 1px solid rgba(199, 154, 100, .16);
}

.patch-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--g-space-6); }

.patch-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--g-space-3);
    font-size: var(--g-fs-xs);
    letter-spacing: .06em;
    color: var(--g-text-3);
}

.patch-card h3 {
    margin: var(--g-space-4) 0 var(--g-space-3);
    font-family: var(--g-font-display);
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--g-text);
}

.patch-card p { font-size: var(--g-fs-sm); line-height: 1.7; color: var(--g-text-2); }

.patch-read {
    display: block;
    margin-top: auto;
    padding-top: var(--g-space-5);
    font-family: var(--g-font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: var(--g-tracking-ui);
    text-transform: uppercase;
    color: var(--g-gold-bright);
}

.patch-tag {
    display: inline-block;
    margin: 0 .25rem .25rem 0;
    padding: .3em .7em;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: var(--g-radius-xs);
    border: 1px solid transparent;
}

.patch-tag.new { color: var(--g-success); background: var(--g-success-bg); border-color: rgba(125, 220, 176, .3); }
.patch-tag.changed { color: var(--g-arcane-pale); background: var(--g-info-bg); border-color: rgba(197, 138, 255, .3); }
.patch-tag.fixed { color: var(--g-gold-bright); background: var(--g-warning-bg); border-color: rgba(240, 201, 149, .3); }
.patch-tag.note { color: var(--g-danger); background: var(--g-danger-bg); border-color: rgba(255, 143, 166, .35); }
.patch-tag.latest { color: #1a0f2b; background: var(--g-grad-gold); border-color: transparent; }

.patch-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--g-space-3);
    margin: 0;
    padding: var(--g-space-10) var(--g-space-6);
    text-align: center;
    color: var(--g-text-2);
    border: 1px dashed rgba(199, 154, 100, .3);
    border-radius: var(--g-radius-md);
    background: rgba(22, 13, 37, .6);
}

.patch-empty::before {
    content: "";
    flex: none;
    width: 14px;
    height: 17px;
    background: var(--g-gold);
    -webkit-mask: var(--g-svg-star) center / contain no-repeat;
    mask: var(--g-svg-star) center / contain no-repeat;
}

@media (max-width: 991.98px) { .patch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .patch-grid { grid-template-columns: 1fr; } }

/* /updates/ page shell (updates.css loads first; these override it). */
.patch-page {
    --accent: var(--g-gold-bright);
    --ink: var(--g-text);
    --muted: var(--g-text-2);
    font-family: var(--g-font-body);
}

.patch-page h1,
.patch-article h2 { font-family: var(--g-font-display); color: var(--g-text); letter-spacing: var(--g-tracking-display); }

.patch-top { border-bottom: 1px solid rgba(118, 80, 53, .4); padding-bottom: var(--g-space-6); margin-bottom: var(--g-space-10); }
.patch-logo { width: 180px; max-height: none; height: auto; }

.patch-eyebrow { color: var(--g-arcane); letter-spacing: var(--g-tracking-caps); }

.patch-button {
    color: var(--g-gold-bright);
    background: linear-gradient(180deg, #24163a, #150c24);
    border: 1px solid rgba(199, 154, 100, .5);
    border-radius: var(--g-radius-sm);
    font-family: var(--g-font-display);
    font-weight: 700;
    font-size: .8125rem;
    letter-spacing: var(--g-tracking-ui);
    text-transform: uppercase;
}

.patch-button:hover { color: var(--g-text); background: linear-gradient(180deg, #34224b, #1f1433); box-shadow: var(--g-glow-sm); }

.patch-toolbar input,
.patch-toolbar select {
    min-height: 48px;
    color: var(--g-text);
    background: linear-gradient(180deg, #110a1c, #180e28);
    border: 1px solid rgba(166, 92, 255, .24);
    border-radius: var(--g-radius-sm);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
}

.patch-toolbar input:focus,
.patch-toolbar select:focus {
    outline: none;
    border-color: var(--g-amethyst);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), 0 0 0 3px rgba(166, 92, 255, .28);
}

.patch-article {
    background:
        radial-gradient(ellipse 80% 30% at 50% 0%, rgba(166, 92, 255, .12), transparent 70%),
        var(--g-grad-surface);
    border: 1px solid rgba(199, 154, 100, .25);
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg);
}

.patch-article p,
.patch-article li { color: var(--g-text-2); }

.patch-article li.patch-note { color: var(--g-danger); }


/* ==========================================================================
   13. Legacy bridge
   --------------------------------------------------------------------------
   Re-skins the classes from main.min.css (and page-level <style> blocks)
   used by /play/, /deals/ and /store/, so those pages pick up the theme
   by adding this stylesheet, with no markup rewrites.
   ========================================================================== */

/* Page: the castle art, recoloured, fading into the violet void. */
body:not(.g-page) {
    color: var(--g-text-2);
    font-family: var(--g-font-body);
    background-color: var(--g-bg) !important;
    background-image:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(113, 53, 183, .25), transparent 70%),
        linear-gradient(180deg, rgba(11, 7, 19, .45) 0, rgba(11, 7, 19, .8) 520px, var(--g-bg) 900px),
        linear-gradient(180deg, #5b2a9c, #1d0c38),
        url("../images/hero-bg.jpg") !important;
    background-size: 100% 100%, 100% 100%, max(100%, 1650px) 900px, max(100%, 1650px) auto !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-blend-mode: normal, normal, color, normal;
}

:where(body:not(.g-page)) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-family: var(--g-font-display);
    letter-spacing: var(--g-tracking-display);
    color: var(--g-text);
}

:where(body:not(.g-page)) a { color: var(--g-text); }
:where(body:not(.g-page)) a:hover,
:where(body:not(.g-page)) a:focus { color: var(--g-gold-bright); }

.text-primary { color: var(--g-arcane) !important; }
.text-faded { color: var(--g-text-2); }
.text-white { color: var(--g-text); }
.text-danger { color: var(--g-danger) !important; }
.text-shadow { text-shadow: 0 6px 30px rgba(4, 1, 10, .9); }

hr { border-top-color: rgba(199, 154, 100, .25); }

/* Top bar & navbar */
.top-nav-bar {
    background: rgba(7, 4, 13, .92);
    border-bottom: 1px solid rgba(199, 154, 100, .1);
    box-shadow: none;
}

.top-nav-bar a:hover { color: var(--g-gold-bright); }

.navbar {
    background: rgba(11, 7, 19, .62);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(118, 80, 53, .45);
}

.navbar .navbar-nav .nav-link {
    font-family: var(--g-font-display);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: var(--g-tracking-ui);
    color: var(--g-text-2);
    transition: color var(--g-dur) var(--g-ease), text-shadow var(--g-dur) var(--g-ease);
}

.navbar .navbar-nav .nav-link:hover {
    color: var(--g-text);
    text-shadow: 0 0 14px rgba(197, 138, 255, .7);
}

.navbar .navbar-nav .nav-link.active { color: var(--g-gold-bright); }

.navbar .navbar-nav .nav-link.nav-flash { color: var(--g-arcane); animation: g-promo 2.4s ease-in-out infinite; }

.navbar .navbar-brand img { width: auto; height: 72px; }
.navbar .navbar-brand.d-lg-none img { height: 44px; }

.navbar .navbar-toggler {
    width: 44px;
    height: 44px;
    background: linear-gradient(180deg, #24163a, #150c24);
    border: 1px solid rgba(199, 154, 100, .38);
    border-radius: var(--g-radius-sm);
}

.navbar .navbar-toggler .navbar-toggler-icon { background-image: var(--g-svg-menu); }
.navbar .navbar-toggler:focus-visible { outline: 2px solid var(--g-arcane); outline-offset: 3px; }

@media (max-width: 992px) {
    .navbar .navbar-collapse {
        top: 100%;
        background: rgba(14, 8, 24, .97);
        border-bottom: 1px solid rgba(118, 80, 53, .5);
        box-shadow: 0 24px 40px rgba(4, 1, 10, .7);
    }
}

.home-hero { background-image: none; }
.home-hero::after { background: var(--g-grad-line-gold); height: 1px; bottom: 0; }

/* Framed containers and cards */
.main-container,
.media-container {
    padding: 1px;
    background: linear-gradient(160deg, rgba(240, 201, 149, .55), rgba(118, 80, 53, .35) 40%, rgba(166, 92, 255, .3) 70%, rgba(240, 201, 149, .4));
    border-radius: var(--g-radius-lg);
    box-shadow: var(--g-shadow-lg);
}

.main-container__inner {
    /* clip, not hidden: hidden would become the scroll container for the
       store's sticky sidebar and offset it inside the box. */
    overflow: clip;
    background: var(--g-bg-2);
    border-radius: calc(var(--g-radius-lg) - 1px);
}

.main-container::before,
.main-container::after,
.main-container__glow--top { background: rgba(166, 92, 255, .22); }

.content-box,
.card {
    color: var(--g-text-2);
    background: var(--g-grad-surface);
    border: 1px solid rgba(199, 154, 100, .18);
    border-radius: var(--g-radius-md);
    box-shadow: var(--g-shadow-inset);
}

.main-container__inner > .card { border: 0; border-radius: 0; }

.card-header {
    height: auto;
    min-height: 63px;
    background: linear-gradient(180deg, #2a1a40, #1d1230);
    border-bottom: 1px solid rgba(199, 154, 100, .28);
    text-shadow: none;
}

.card-header h4,
.card-header h5 {
    font-size: 1.15rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--g-grad-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card.download-card:hover {
    border-color: rgba(199, 154, 100, .6);
    box-shadow: var(--g-shadow-inset), 0 0 30px rgba(166, 92, 255, .18);
}

/* Buttons */
.button {
    padding: .6rem 1.25rem;
    font-family: var(--g-font-display);
    letter-spacing: .1em;
    color: var(--g-text);
    background: var(--g-grad-royal);
    border: 1px solid rgba(240, 201, 149, .55);
    border-radius: var(--g-radius-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
    text-shadow: 0 1px 2px rgba(18, 4, 38, .65);
    transition: filter var(--g-dur) var(--g-ease), box-shadow var(--g-dur) var(--g-ease), transform var(--g-dur-fast) var(--g-ease);
}

.button:hover,
.button:focus,
.button:active {
    color: var(--g-text);
    border-color: var(--g-gold-bright);
    filter: brightness(1.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), var(--g-glow-sm);
}

.button:active { transform: scale(.97); }
.button:focus-visible { outline: 2px solid var(--g-arcane); outline-offset: 3px; }

.download-card .button.is-disabled { color: var(--g-text-3); border-color: rgba(129, 113, 143, .4); filter: grayscale(.6); }

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: 52px;
    padding: .9rem 2.4rem;
    font-family: var(--g-font-display);
    letter-spacing: var(--g-tracking-ui);
    color: var(--g-text);
    background: var(--g-grad-royal);
    border: 1px solid rgba(240, 201, 149, .6);
    border-radius: var(--g-radius-sm);
    box-shadow: var(--g-shadow-md);
    animation: none;
}

.hero-button:hover { color: var(--g-text); filter: brightness(1.15); box-shadow: var(--g-shadow-md), var(--g-glow-md); }

/* Form controls */
input,
.form-control,
select,
.form-select {
    color: var(--g-text);
    background-color: #130b20;
    border: 1px solid rgba(166, 92, 255, .24);
    border-radius: var(--g-radius-sm);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
}

input:hover, .form-control:hover, select:hover, .form-select:hover,
input:active, .form-control:active, select:active, .form-select:active {
    color: var(--g-text);
    background-color: #130b20;
    border-color: rgba(166, 92, 255, .45);
}

input:focus, .form-control:focus, select:focus, .form-select:focus {
    color: var(--g-text);
    background-color: #160d25;
    border-color: var(--g-amethyst);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), 0 0 0 3px rgba(166, 92, 255, .28);
}

input::placeholder, .form-control::placeholder { color: var(--g-text-3); }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px #160d25 inset !important;
    box-shadow: 0 0 0 30px #160d25 inset !important;
    -webkit-text-fill-color: var(--g-text) !important;
}

.form-control:disabled,
.form-control[readonly],
.input-group-text {
    color: var(--g-arcane-pale);
    background-color: #120a1d;
    border-color: rgba(166, 92, 255, .12);
}

.input-group button {
    background: linear-gradient(180deg, #34224b, #1f1433);
    border: 1px solid rgba(199, 154, 100, .4);
    box-shadow: none;
}

.form-check-input { background-color: #130b20; border-color: rgba(199, 154, 100, .55); }

.form-check-input:checked { background-color: var(--g-royal); border-color: var(--g-gold-bright); }

.form-check-input:focus {
    border-color: var(--g-amethyst);
    box-shadow: 0 0 0 3px rgba(166, 92, 255, .28);
}

/* Tables, tabs, pagination */
table { background-color: transparent; border-color: rgba(199, 154, 100, .14); }
table tr:nth-child(even) { background-color: rgba(48, 32, 68, .35); }
table tr:hover { background-color: rgba(166, 92, 255, .07); }
table thead { color: var(--g-gold); background-color: rgba(11, 7, 19, .6); }

.nav-tabs .nav-item .nav-link { color: var(--g-text-2); background-color: var(--g-bg-2); }
.nav-tabs .nav-item .nav-link.active { color: var(--g-gold-bright); background-color: var(--g-surface); border-color: rgba(199, 154, 100, .25) rgba(199, 154, 100, .25) var(--g-gold); }
.nav-tabs .nav-item .nav-link:hover { background-color: var(--g-surface-2); border-color: var(--g-amethyst); }
.tab-content { background-color: var(--g-surface); border-color: rgba(199, 154, 100, .2); }

.pagination .page-item .page-link,
.page-link { color: var(--g-text-2); background-color: var(--g-bg-2); border-color: rgba(166, 92, 255, .15); }
.pagination .page-item .page-link:hover,
.page-link:hover,
.page-link:focus { color: var(--g-gold-bright); background-color: var(--g-surface); box-shadow: 0 0 0 3px rgba(166, 92, 255, .25); }
.pagination .page-item.active .page-link,
.page-item.active .page-link { color: var(--g-gold-bright); background-color: var(--g-surface-2); border-color: var(--g-gold); }

.alert-success { --bs-alert-color: var(--g-text); --bs-alert-bg: var(--g-success-bg); --bs-alert-border-color: rgba(125, 220, 176, .4); }
.alert-danger { --bs-alert-color: var(--g-text); --bs-alert-bg: var(--g-danger-bg); --bs-alert-border-color: rgba(255, 143, 166, .4); }
.alert-warning { --bs-alert-color: var(--g-text); --bs-alert-bg: var(--g-warning-bg); --bs-alert-border-color: rgba(240, 201, 149, .4); }
.alert-info { --bs-alert-color: var(--g-text); --bs-alert-bg: var(--g-info-bg); --bs-alert-border-color: rgba(197, 138, 255, .4); }

/* Store */
.store-cat-btn { color: var(--g-text-2); background: var(--g-bg-2); border: 1px solid rgba(166, 92, 255, .2); border-radius: var(--g-radius-sm); text-shadow: none; }
.store-cat-btn:hover { color: var(--g-text); background: var(--g-surface-2); border-color: rgba(166, 92, 255, .5); }
.store-cat-btn.active { color: var(--g-text); background: var(--g-grad-royal); border-color: var(--g-gold-bright); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), var(--g-glow-sm); }

.product-block { background: var(--g-grad-surface); border: 1px solid rgba(199, 154, 100, .16); border-radius: var(--g-radius-md); transition: border-color var(--g-dur) var(--g-ease), transform var(--g-dur) var(--g-ease), box-shadow var(--g-dur) var(--g-ease); }
.product-block:hover { border-color: rgba(199, 154, 100, .5); transform: translateY(-3px); box-shadow: var(--g-shadow-md), 0 0 30px rgba(166, 92, 255, .14); }
.product-block.new-product { border-color: rgba(125, 220, 176, .45); }
.product-block.sale-product { border-color: rgba(255, 143, 166, .45); }
.product-block .add-cart { border-radius: 0; }
.product-header-block { background-color: var(--g-surface-2); }
.product-image { background: radial-gradient(circle at 50% 40%, rgba(166, 92, 255, .25), transparent 70%), var(--g-bg-2); border: 1px solid rgba(199, 154, 100, .2); border-radius: var(--g-radius-sm); }
.product-block .product-icon,
.cart-product-img { color: var(--g-arcane); }
.product-badge { color: #1a0f2b; background: var(--g-grad-gold); font-weight: 700; letter-spacing: .1em; border-radius: 0 0 0 var(--g-radius-sm); }
.product-badge.new { color: #0b2a1d; background: var(--g-success); }
.product-badge.sale { color: #3a0d18; background: var(--g-danger); }
.product-price.new-price,
.top-donor-amount { color: var(--g-gold-bright); }
.product-desc { color: var(--g-text-3); }
.product-quantity input,
.product-quantity button { color: var(--g-text); background-color: var(--g-bg-2); border-color: rgba(166, 92, 255, .2); }
.product-quantity button:hover { background-color: var(--g-surface-2); }
.product-quantity button:hover i { color: var(--g-gold-bright); }

.cart-row,
.top-donor-row { background-color: var(--g-surface-2); border-color: rgba(166, 92, 255, .14); border-radius: var(--g-radius-sm); }
.cart-total { border-color: rgba(199, 154, 100, .25); }
.top-donor-rank-badge { background-color: var(--g-bg-2); }
.checkout-discount-code { color: var(--g-text); background: rgba(125, 220, 176, .15); border: 1px solid rgba(125, 220, 176, .4); border-radius: var(--g-radius-xs); }
.payment-methods label { background-color: var(--g-bg-2); border-radius: var(--g-radius-sm); }
.payment-methods [type=radio]:checked + img { outline-color: var(--g-amethyst); }
.deals-row { border-bottom-color: rgba(199, 154, 100, .14); }

.featured-product__background,
.custom-deals__background {
    background:
        radial-gradient(ellipse 60% 90% at 15% 50%, rgba(166, 92, 255, .3), transparent 70%),
        var(--g-svg-lattice) center / 56px 56px,
        linear-gradient(120deg, #2b1846, #1a0f2b 60%, #150c24);
}

.featured-product__image { background: radial-gradient(circle, rgba(166, 92, 255, .35), transparent 70%), var(--g-bg-2); border: 1px solid rgba(199, 154, 100, .35); border-radius: var(--g-radius-md); }
.featured-product__image i { color: var(--g-gold-bright); text-shadow: 0 0 24px rgba(240, 201, 149, .45); }

#checkoutModal .modal-header { background: linear-gradient(180deg, #2a1a40, #1d1230); text-shadow: none; }

.tos h5 { color: var(--g-gold-bright); }

/* Footer */
.footer {
    position: relative;
    padding: 0;
    background: none;
}

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(720px, 80%);
    height: 1px;
    transform: translateX(-50%);
    background: var(--g-grad-line-gold);
    z-index: 1;
}

.footer__inner {
    background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(113, 53, 183, .18), transparent 70%), #0a0612;
    border-top: 1px solid rgba(118, 80, 53, .4);
    border-bottom: 1px solid rgba(199, 154, 100, .1);
}

.footer__menu a { font-family: var(--g-font-display); font-size: .9375rem; letter-spacing: var(--g-tracking-ui); color: var(--g-text-2); }
.footer__menu a:hover { color: var(--g-gold-bright); }

.footer__menu--divider {
    width: 5px;
    height: 5px;
    background: var(--g-bronze);
    transform: rotate(45deg);
}

.footer__divider { background: var(--g-grad-line-violet); }

.footer img[src*="galanor-logo"] { width: 200px; height: auto; }

.footer__social {
    color: var(--g-gold-bright);
    background: linear-gradient(180deg, #24163a, #150c24);
    border: 1px solid rgba(199, 154, 100, .38);
    border-radius: var(--g-radius-sm);
}

.footer__social:hover { color: var(--g-text); border-color: var(--g-arcane); box-shadow: var(--g-glow-sm); filter: none; }

.footer__cc { background: #07040d; }


/* ==========================================================================
   14. Motion
   ========================================================================== */

@keyframes g-breathe {
    0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes g-spin { to { rotate: 360deg; } }

@keyframes g-rise {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@keyframes g-twinkle {
    0%, 70%, 100% { opacity: 0; transform: scale(.5); }
    80% { opacity: .9; transform: scale(1); }
    90% { opacity: .2; transform: scale(.8); }
}

@keyframes g-twinkle-soft {
    0%, 100% { opacity: .55; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.1); }
}

@keyframes g-promo {
    0%, 100% { color: var(--g-arcane); text-shadow: 0 0 6px rgba(197, 138, 255, .3); }
    50% { color: var(--g-arcane-pale); text-shadow: 0 0 16px rgba(197, 138, 255, .75); }
}

/* Shimmer: sweeps across once early in the cycle, then rests. Keeps all
   three .g-btn::after background positions in step. */
@keyframes g-shimmer {
    0% { background-position: 100% 0, 0 0, 0 0; }
    18%, 100% { background-position: 0% 0, 0 0, 0 0; }
}

@keyframes g-shimmer-single {
    0% { background-position: 100% 0; }
    18%, 100% { background-position: 0% 0; }
}

@keyframes g-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes g-drop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* Scroll reveal (enabled by js/scripts.js; never hides content without it). */
@media (prefers-reduced-motion: no-preference) {
    .g-reveal-ready [data-reveal] {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .9s var(--g-ease), transform .9s var(--g-ease);
        transition-delay: var(--g-reveal-delay, 0s);
    }

    .g-reveal-ready [data-reveal].is-revealed {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .g-sparkle,
    .g-hero__particles { display: none; }
    .g-hero__sigil { animation: none; }
}