/* ============================================================
   GAMING THEME — Design System
   ============================================================ */

/* --- Fonts ------------------------------------------------- */
/* Fonts are self-hosted (wwwroot/fonts) and declared inline in App.razor's <head>, not @import-ed here: an @import only starts after this file has downloaded. */

/* --- Tokens ------------------------------------------------ */
:root {
    --bg-base:        #09090b;
    --bg-surface:     #111116;
    --bg-elevated:    #18181f;
    --bg-card:        #1c1c28;

    --accent:         #7c3aed;
    --accent-dim:     #6d28d9;
    --accent-glow:    rgba(124, 58, 237, 0.25);
    --accent-cyan:    #06b6d4;
    --accent-cyan-glow: rgba(6, 182, 212, 0.2);

    --score-great:    #22c55e;
    --score-good:     #84cc16;
    --score-mixed:    #eab308;
    --score-poor:     #f97316;
    --score-bad:      #ef4444;

    --text-primary:   #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-muted:     #8a8a96;   /* 4.9:1 on the card background, 5.8:1 on the page: WCAG AA for small text */

    --border:         rgba(255, 255, 255, 0.07);
    --border-bright:  rgba(255, 255, 255, 0.14);

    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  20px;

    --transition: all 0.2s ease;
}

/* --- Reset / Base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body.gn-body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* --- Site header ------------------------------------------ */
/* Logo, search, sections, account. The search field is the one bold element:
   it sits right after the logo and its button is the only solid colour in the
   bar (cyan for "find"; violet stays the account colour). Everything in here
   except the account island is static HTML, opened and closed by <html
   data-nav|data-search="open"> (the inline script in App.razor), so no control
   waits for the Blazor circuit.

   The blur lives on a pseudo-element: a backdrop-filter on the header itself
   would make it the containing block of its fixed children (the drawer, the
   phone search sheet and the sign-in dialog). */
.gn-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.gn-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(9, 9, 11, 0.86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.gn-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: 60px;
    padding: 0 2rem;
}

.gn-nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.gn-nav-logo:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 4px; border-radius: var(--radius-sm); }
.gn-nav-logo-mark { display: block; flex-shrink: 0; }

/* Scoped to the wordmark so the monogram's inner <text> isn't recolored. */
.gn-nav-logo-text span { color: var(--accent-cyan); }

/* The search field takes the room the links leave. */
.gn-nav-search {
    flex: 1 1 22rem;
    min-width: 0;
    max-width: 38rem;
}

/* Sections: full-height links, the current one marked on the header's bottom
   edge in the logo's own gradient. */
.gn-nav-links {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    flex: none;
    margin-left: auto;
}

.gn-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.8rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease;
}

.gn-nav-link:hover,
.gn-nav-link.active { color: var(--text-primary); }

.gn-nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent));
}

.gn-nav-link:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: -6px;
    border-radius: var(--radius-md);
}

/* "Browse": a <details>, so it opens with no script. */
.gn-nav-more { position: relative; display: flex; }
.gn-nav-more > summary { list-style: none; user-select: none; }
.gn-nav-more > summary::-webkit-details-marker { display: none; }
.gn-nav-more > summary svg { transition: transform 0.15s ease; }
.gn-nav-more[open] > summary { color: var(--text-primary); }
.gn-nav-more[open] > summary svg { transform: rotate(180deg); }

.gn-nav-more-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 17rem;
    padding: 0.375rem;
    background: var(--bg-card);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    animation: gn-slide-down 0.14s ease;
}

.gn-nav-more-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    text-decoration: none;
}

.gn-nav-more-item:hover,
.gn-nav-more-item:focus-visible { background: var(--bg-elevated); outline: none; }
.gn-nav-more-name { color: var(--text-primary); font-size: 0.9rem; font-weight: 600; }
.gn-nav-more-item.active .gn-nav-more-name { color: var(--accent-cyan); }
.gn-nav-more-hint { color: var(--text-muted); font-size: 0.78rem; }

/* Account island (AccountMenu.razor). */
.gn-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.gn-nav-signin.gn-btn-ghost { border-color: transparent; padding-inline: 0.7rem; }

/* Signed-in visitor, circuit not yet connected (App.razor sets data-auth): a
   quiet pill holds the space where the account menu will render. */
html[data-auth="pending"] .gn-nav-actions > .gn-btn { display: none; }
html[data-auth="pending"] .gn-nav-actions::after {
    content: "";
    width: 112px;
    height: 32px;
    border-radius: 16px;
    background: var(--bg-elevated);
}

/* Menu and search buttons: phones and tablets. 44px targets, no tap delay. */
.gn-nav-burger,
.gn-nav-search-btn {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.gn-nav-burger:hover,
.gn-nav-search-btn:hover,
html[data-nav="open"] .gn-nav-burger { color: var(--text-primary); background: var(--bg-elevated); }

.gn-nav-burger:focus-visible,
.gn-nav-search-btn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; }

.gn-nav-burger .gn-ico-close { display: none; }
html[data-nav="open"] .gn-nav-burger .gn-ico-menu { display: none; }
html[data-nav="open"] .gn-nav-burger .gn-ico-close { display: block; }

/* The drawer and its scrim exist in every page; <html data-nav="open"> shows them. */
.gn-drawer,
.gn-scrim { display: none; }

.gn-drawer-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 0.875rem;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
}

.gn-drawer-link:hover,
.gn-drawer-link.active { color: var(--text-primary); background: var(--bg-elevated); }
.gn-drawer-link.active { box-shadow: inset 3px 0 0 var(--accent-cyan); }
.gn-drawer-link:focus-visible,
.gn-drawer-chip:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; }

.gn-drawer-label {
    margin: 0.875rem 0.875rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.gn-drawer-browse {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0 0.375rem;
}

.gn-drawer-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.gn-drawer-chip:hover,
.gn-drawer-chip.active { color: var(--text-primary); border-color: var(--accent-cyan); }

/* Small laptops and tablets in landscape: links and field share a tight bar. */
@media (max-width: 1239.98px) {
    .gn-nav { gap: 1rem; padding: 0 1.25rem; }
    .gn-nav-link { padding: 0 0.6rem; }
    .gn-nav-link.active::after { left: 0.6rem; right: 0.6rem; }
    .gs-header .gs-key { display: none; }
}

/* Home page, bar layout only: the hero carries the search while it is on
   screen, so the header's copy stays out of the way and returns once the hero
   has scrolled under the bar (search.js sets data-hero). It keeps its place in
   the layout, so nothing moves when it appears. */
@media (min-width: 760.02px) {
    .gn-nav-search { transition: opacity 0.18s ease, visibility 0.18s; }
    .gn-nav-search.is-deferred:not(:focus-within) { opacity: 0; visibility: hidden; }
    html[data-hero="out"] .gn-nav-search.is-deferred { opacity: 1; visibility: visible; }
}

/* Tablets and phones: the sections move into the drawer. */
@media (max-width: 1099.98px) {
    .gn-nav { gap: 0.75rem; padding: 0 1.25rem 0 0.75rem; }
    .gn-nav-links { display: none; }
    .gn-nav-burger { display: inline-flex; }
    .gn-nav-search { max-width: none; }

    html[data-nav="open"] .gn-drawer {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 2;
        max-height: calc(100vh - 60px);
        max-height: calc(100dvh - 60px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0.5rem 1rem 1.25rem;
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border);
        animation: gn-slide-down 0.18s ease;
    }

    html[data-nav="open"] .gn-scrim {
        display: block;
        position: fixed;
        inset: 60px 0 0 0;
        z-index: 1;
        background: rgba(0, 0, 0, 0.55);
        animation: gn-fade-in 0.15s ease;
    }
}

/* Phones: the field becomes a sheet opened by the search button. */
@media (max-width: 760px) {
    .gn-nav { gap: 0.25rem; padding: 0 0.625rem 0 0.375rem; }
    .gn-nav-logo { margin-left: 0.125rem; }
    .gn-nav-search { display: none; }
    .gn-nav-search-btn { display: inline-flex; margin-left: auto; }
    /* Two classes: .gn-btn and .gn-username set display further down the file. */
    .gn-nav-actions .gn-nav-signin { display: none; }   /* "Join" stays; the dialog offers both */
    .gn-nav-actions .gn-username { display: none; }     /* avatar only */

    html[data-search="open"] .gn-nav-search {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 3;
        max-width: none;
        padding: 0.375rem 0.5rem 0;
        background: var(--bg-base);
        animation: gn-fade-in 0.12s ease;
    }
}

@media (max-width: 640px) {
    .gn-nav { height: 56px; }
    html[data-nav="open"] .gn-drawer { top: 56px; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); }
    html[data-nav="open"] .gn-scrim { inset: 56px 0 0 0; }
}

@media (max-width: 350px) {
    .gn-nav-logo-text { display: none; }   /* the mark alone on the narrowest phones */
}

@media (prefers-reduced-motion: reduce) {
    .gn-nav-more-menu,
    html[data-nav="open"] .gn-drawer,
    html[data-nav="open"] .gn-scrim,
    html[data-search="open"] .gn-nav-search { animation: none; }
}

@keyframes gn-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes gn-slide-down {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* --- Buttons ---------------------------------------------- */
.gn-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.125rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    text-decoration: none;
}

.gn-btn-primary {
    background: var(--accent);
    color: #fff;
}

.gn-btn-primary:hover {
    background: var(--accent-dim);
    box-shadow: 0 0 20px var(--accent-glow);
}

.gn-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-bright);
}

.gn-btn-ghost:hover {
    color: var(--text-primary);
    border-color: var(--border-bright);
    background: var(--bg-elevated);
}

.gn-btn-sm {
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
}

/* --- Hero ------------------------------------------------- */
.gn-hero {
    position: relative;
    padding: 5rem 2rem 4rem;
    text-align: center;
    overflow: hidden;
}

.gn-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgba(124, 58, 237, 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 80% 60%, rgba(6, 182, 212, 0.12) 0%, transparent 60%);
    pointer-events: none;
}

.gn-hero-eyebrow {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-cyan);
    margin-bottom: 0.75rem;
}

.gn-hero-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}

.gn-hero-title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gn-hero-subtitle {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto 2.5rem;
}

/* --- Search bar ------------------------------------------- */
.gn-search {
    position: relative;
    max-width: 540px;
    margin: 0 auto;
}

.gn-search-input {
    width: 100%;
    padding: 0.875rem 1.25rem 0.875rem 3rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-xl);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: var(--transition);
    outline: none;
}

.gn-search-input::placeholder { color: var(--text-muted); }

.gn-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    background: var(--bg-card);
}

.gn-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

/* --- Stats row -------------------------------------------- */
.gn-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 2.5rem 2rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
}

.gn-stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.gn-stat-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --- Section ---------------------------------------------- */
.gn-section {
    padding: 3.5rem 2rem;
    max-width: 1280px;
    margin: 0 auto;
}

/* Page body under a hero (releases, trending, company): same width and gutters
   as a section, less top padding because the hero already provides the air.
   Was never defined, so those pages ran edge to edge. */
.gn-container {
    padding: 2rem 2rem 3rem;
    max-width: 1280px;
    margin: 0 auto;
}

.gn-section-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 2rem;
}

.gn-section-meta {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-right: auto;
}

.gn-section-meta a { color: var(--accent-cyan); text-decoration: none; }
.gn-section-meta a:hover { text-decoration: underline; }

.gn-section-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.01em;
}

.gn-section-title::after {
    content: '';
    display: block;
    width: 2.5rem;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-cyan));
    border-radius: 2px;
    margin-top: 0.35rem;
}

.gn-section-link {
    font-size: 0.8125rem;
    color: var(--accent-cyan);
    text-decoration: none;
    margin-left: auto;
    font-weight: 500;
}

.gn-section-link:hover { text-decoration: underline; }

/* --- Game card --------------------------------------------
   Cover, title, one meta line, platform glyphs, one status line (price or
   followers). The card is an article: the link covers cover and text, the
   quick-add button sits over the cover's top-left corner. */
.gn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
}
/* minmax(0, …) everywhere: a card's one-line meta must never widen its column */
.gn-grid > * { min-width: 0; }

.gn-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: visible;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
    color: inherit;
    display: flex;
    flex-direction: column;
}
.gn-card:hover, .gn-card:focus-within {
    border-color: var(--border-bright);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.gn-card-link { display: flex; flex-direction: column; flex: 1; min-width: 0; color: inherit; text-decoration: none; border-radius: inherit; overflow: hidden; }
.gn-card-link:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

.gn-card-cover {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--bg-elevated);
}
.gn-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gn-card-cover-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700;
    color: rgba(255,255,255,0.6); text-align: center; padding: 1rem; letter-spacing: 0.04em;
}
.gn-card-score { position: absolute; top: 0.5rem; right: 0.5rem; }
.gn-card-soon { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.2rem 0.5rem; border-radius: var(--radius-md); background: rgba(9, 9, 11, 0.8); border: 1px solid var(--border-bright); color: var(--accent-cyan); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em; backdrop-filter: blur(4px); }

.gn-card-body { padding: 0.75rem 0.875rem 0.875rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 0; }
.gn-card-title {
    font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.2; letter-spacing: 0.01em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em;
}
.gn-card-meta { display: flex; gap: 0.5rem; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; min-width: 0; overflow: hidden; }
.gn-card-dev { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gn-card-date { flex: none; }
.gn-plat { display: flex; gap: 0.3rem; margin-top: 0.1rem; color: var(--text-secondary); }
.gn-plat-glyph { display: inline-flex; width: 1.35rem; height: 1.35rem; align-items: center; justify-content: center; border-radius: 5px; background: var(--bg-elevated); border: 1px solid var(--border); }
.gn-plat-glyph svg { width: 13px; height: 13px; }
.gn-card-status { margin-top: auto; padding-top: 0.2rem; font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; }
.gn-card-price { font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; color: var(--score-great); }

/* quick add: a round button over the cover, visible on hover/focus (always on touch) */
.gn-card-add {
    position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2;
    width: 2rem; height: 2rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(9, 9, 11, 0.8); border: 1px solid var(--border-bright); color: #fff;
    cursor: pointer; opacity: 0; transition: opacity var(--transition), background var(--transition);
    backdrop-filter: blur(4px);
}
.gn-card-add svg { width: 14px; height: 14px; }
.gn-card:hover .gn-card-add, .gn-card:focus-within .gn-card-add, .gn-card-add.is-set, .gn-card-menu-open .gn-card-add { opacity: 1; }
.gn-card-add:hover { background: var(--accent); border-color: var(--accent); }
.gn-card-add.is-set { background: var(--accent); border-color: var(--accent); }
.gn-card-add:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; opacity: 1; }
.gn-card-add-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: gn-pulse 0.8s ease-in-out infinite alternate; }
@keyframes gn-pulse { from { opacity: 0.3; } to { opacity: 1; } }
.gn-card-add-menu {
    position: absolute; top: 2.9rem; left: 0.5rem; z-index: 3; min-width: 11rem;
    display: flex; flex-direction: column; padding: 0.3rem;
    background: var(--bg-elevated); border: 1px solid var(--border-bright); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.gn-card-add-menu button { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; border: 0; border-radius: 7px; background: none; color: var(--text-primary); font: inherit; font-size: 0.82rem; text-align: left; cursor: pointer; }
.gn-card-add-menu button::before { content: ""; width: 0.9rem; height: 0.9rem; border-radius: 4px; border: 1.5px solid var(--border-bright); flex: none; }
.gn-card-add-menu button.on::before { background: var(--accent); border-color: var(--accent); }
.gn-card-add-menu button:hover { background: var(--bg-card); }
.gn-card-add-menu button:disabled { opacity: 0.6; cursor: wait; }
@media (hover: none) { .gn-card-add { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gn-card, .gn-card:hover { transform: none; transition: none; } }

/* --- Score badge ------------------------------------------ */
.gn-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    border: 2px solid currentColor;
    flex-shrink: 0;
}

.gn-score-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.4rem;
    border-radius: var(--radius-lg);
}

.gn-score-great { color: var(--score-great); background: rgba(34, 197, 94, 0.12); }
.gn-score-good  { color: var(--score-good);  background: rgba(132, 204, 22, 0.12); }
.gn-score-mixed { color: var(--score-mixed); background: rgba(234, 179, 8, 0.12); }
.gn-score-poor  { color: var(--score-poor);  background: rgba(249, 115, 22, 0.12); }
.gn-score-bad   { color: var(--score-bad);   background: rgba(239, 68, 68, 0.12); }

/* --- Tag / Badge ------------------------------------------ */
.gn-tag {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;            /* 24px tap target (WCAG 2.5.8) for the linked chips */
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    font-size: 0.7375rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
}

.gn-tag-genre {
    background: rgba(124, 58, 237, 0.18);
    color: #c4b5fd;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.gn-tag-theme {
    background: rgba(6, 182, 212, 0.12);
    color: #67e8f9;
    border: 1px solid rgba(6, 182, 212, 0.25);
}

.gn-tag-platform {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-bright);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

.gn-tag-mode {
    background: rgba(16, 185, 129, 0.12);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

/* --- Featured game (horizontal card) ---------------------- */
.gn-featured {
    position: relative;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition);
    text-decoration: none;      /* the whole card is one link; nothing inside is underlined */
    color: var(--text-primary);
}

/* The game's key art fills the card behind the text, fading into the card
   surface so the facts stay readable. The memorable element of the home page. */
.gn-featured-backdrop {
    position: absolute;
    inset: 0;
    background: var(--featured-art, none) center / cover no-repeat;
    opacity: 0;
}
.gn-featured-has-art .gn-featured-backdrop { opacity: 0.65; }
.gn-featured-has-art .gn-featured-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(28, 28, 40, 0.05) 0%, rgba(28, 28, 40, 0.78) 50%, rgba(28, 28, 40, 0.97) 100%);
}
.gn-featured-cover, .gn-featured-body { position: relative; z-index: 1; }

.gn-featured-score {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.gn-featured-score-label { font-size: 0.9rem; color: var(--text-secondary); }

.gn-featured-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
    gap: 0.75rem 2rem;
    margin: 0.25rem 0 0;
}
.gn-featured-facts div { display: flex; flex-direction: column; gap: 0.15rem; }
.gn-featured-facts dt { font-size: 0.78rem; color: var(--text-muted); }
.gn-featured-facts dd { margin: 0; font-size: 0.95rem; color: var(--text-primary); font-weight: 500; }

.gn-featured-cta {
    align-self: flex-start;
    margin-top: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-bright);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 600;
    transition: var(--transition);
}
.gn-featured:hover .gn-featured-cta { border-color: var(--accent); background: rgba(124, 58, 237, 0.18); }

.gn-featured:hover {
    border-color: var(--border-bright);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.gn-featured-cover {
    position: relative;
    overflow: hidden;
}

.gn-featured-cover-placeholder {
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
}

.gn-featured-body {
    padding: 2rem 2rem 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.gn-featured-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-cyan);
}

.gn-featured-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    color: var(--text-primary);   /* sits inside a link: never the browser's default blue */
}


/* Links inside running text must not rely on colour alone, and unclassed links
   in hub-page paragraphs must not fall back to the browser's blue. */
.gn-footer-bottom p a, .gn-footer-bottom p a:hover { text-decoration: underline; }
main.gn-container p a:not([class]) { color: var(--accent-cyan); text-decoration: underline; }

.gn-featured-summary {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 60ch;
    margin: 0;
}

.gn-featured-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* --- Design System Swatches ------------------------------- */
.gn-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}

.gn-swatch {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
}

.gn-swatch-color {
    height: 56px;
}

.gn-swatch-label {
    padding: 0.4rem 0.6rem;
    background: var(--bg-elevated);
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-family: 'Inter', monospace;
}

/* --- Divider ---------------------------------------------- */
.gn-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0;
}

/* --- Footer ----------------------------------------------- */
.gn-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin-top: 3rem;
}

.gn-footer a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.gn-footer a:hover { color: var(--accent-cyan); }

/* ── Legal pages (Terms, Privacy) ───────────────────────────── */
.legal-page {
    max-width: 780px;
    margin: 2rem auto 4rem;
    padding: 0 2rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.9375rem;
}

.legal-page section { margin-top: 2.5rem; }
.legal-page section:first-of-type { margin-top: 1.5rem; }

.legal-page h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.35rem;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
    letter-spacing: 0.3px;
}

.legal-page h3 {
    font-size: 1rem;
    color: var(--text-primary);
    margin: 1.25rem 0 0.5rem;
    font-weight: 600;
}

.legal-page p  { margin: 0 0 0.75rem; }
.legal-page ul { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.legal-page li { margin-bottom: 0.35rem; }
.legal-page a  {
    color: var(--accent-cyan);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-page a:hover { color: var(--text-primary); }

.legal-notice {
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.1rem;
    margin: 1.5rem 0 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.legal-todo {
    background: var(--bg-elevated);
    border-left: 3px solid var(--accent-cyan);
    padding: 0.75rem 1rem;
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0;
    font-size: 0.875rem;
}
.legal-table th,
.legal-table td {
    border: 1px solid var(--border);
    padding: 0.6rem 0.85rem;
    text-align: left;
    vertical-align: top;
    color: var(--text-secondary);
}
.legal-table th {
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.3px;
}
.legal-table td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.legal-table td:nth-child(2) { white-space: nowrap; }

/* ── Danger button (account deletion, etc.) ─────────────────── */
.gn-btn-danger {
    background: #b91c1c;
    color: #fff;
    border: 1px solid #991b1b;
}
.gn-btn-danger:hover:not(:disabled) { background: #dc2626; }
.gn-btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Account settings page ──────────────────────────────────── */
.acct-page {
    max-width: 720px;
    margin: 2rem auto 4rem;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.acct-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.75rem 1.5rem;
}

.acct-card-head { margin-bottom: 1.25rem; }

.acct-card-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.35rem;
    color: var(--text-primary);
    margin: 0 0 0.35rem;
    letter-spacing: 0.3px;
}

.acct-card-desc {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.45;
}

.acct-card-danger { border-color: rgba(185, 28, 28, 0.45); }

.acct-profile-row {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.acct-profile-meta { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }

.acct-kv {
    display: flex;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.acct-kv strong {
    color: var(--text-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acct-msg {
    border-radius: var(--radius-md);
    padding: 0.6rem 0.85rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}
.acct-msg-ok {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}

.acct-warning {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.35);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 1rem;
}

.acct-hint {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0;
}

/* Pending-deletion banner — red tint so the user can't miss that their
   account is on its way out. Appears above everything else on the page so
   the Cancel button is the first interactive control they encounter. */
.acct-pending-banner {
    background: rgba(185, 28, 28, 0.1);
    border: 1px solid rgba(185, 28, 28, 0.45);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    color: var(--text-secondary);
}

.acct-pending-head {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.acct-pending-head > svg {
    color: #fca5a5;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.acct-pending-head strong { color: #fca5a5; display: block; }

.acct-pending-head p {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    line-height: 1.55;
}
.acct-pending-head p strong { color: var(--text-primary); display: inline; }

.acct-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

@@media (max-width: 640px) {
    .acct-page { padding: 0 1rem; margin: 1rem auto 3rem; }
    .acct-card { padding: 1.25rem; }
    .acct-profile-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .acct-actions { flex-direction: column-reverse; }
    .acct-actions .gn-btn { width: 100%; }
}

.gn-footer-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2.5rem 2rem 1.75rem;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
    gap: 2.5rem;
}

.gn-footer-col {
    min-width: 0;
}

.gn-footer-brand { padding-right: 1rem; }

.gn-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.875rem;
}

.gn-footer-logo-mark { flex-shrink: 0; }

.gn-footer-wordmark {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    line-height: 1;
}

.gn-footer-wordmark span {
    background: linear-gradient(135deg, var(--accent-cyan) 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gn-footer-tagline {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
    letter-spacing: 0.2px;
}

.gn-footer-blurb {
    margin: 0;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 32ch;
}

.gn-footer-heading {
    font-family: 'Rajdhani', system-ui, sans-serif;
    font-size: 0.75rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.gn-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    line-height: 1.4;
}

.gn-footer-hint {
    color: var(--text-muted);
    font-size: 0.7875rem;
    line-height: 1.5;
    padding-top: 0.25rem;
}

/* Data-source attributions read like plain text otherwise — IGDB and ITAD
   terms both call for a clickable link back, so underline these explicitly
   and override the footer-wide text-decoration: none. */
.gn-footer a.gn-footer-attribution {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--border-bright);
}

.gn-footer a.gn-footer-attribution:hover {
    text-decoration-color: var(--accent-cyan);
}

.gn-footer-attribution-logo {
    height: 14px;
    width: auto;
    flex-shrink: 0;
}

.gn-footer-bottom {
    border-top: 1px solid var(--border);
    padding: 1rem 2rem 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.75rem;
}

.gn-footer-bottom p { margin: 0; }

.gn-footer-disclaimer {
    max-width: 60ch;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: right;
}

/* --- Facet index (listing page internal linking) ---------- */
.gl-facet-index {
    max-width: 1280px;
    margin: 2rem auto 0;
    padding: 2rem 1.25rem;
    border-top: 1px solid var(--border);
}

.gl-facet-index-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}

.gl-facet-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem 2.5rem;
}

.gl-facet-index-heading {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 0.65rem;
}

.gl-facet-index-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 1.25rem;
}

.gl-facet-index-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    break-inside: avoid;
    padding: 0.22rem 0;
}

.gl-facet-index-list a {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color .15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gl-facet-index-list a:hover { color: var(--accent); }

.gl-facet-index-count {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    .gl-facet-index-list { columns: 1; }
}

/* ============================================================
   GAME DETAIL PAGE
   ============================================================ */

/* --- Backdrop hero ---------------------------------------- */
.gd-backdrop {
    position: relative;
    height: 340px;
    overflow: hidden;
}

@media (min-width: 1440px) {
    .gd-backdrop { height: 400px; }
}

.gd-backdrop-art {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
    filter: blur(2px) brightness(0.45) saturate(1.2);
    transform: scale(1.05);
}

.gd-backdrop-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,  rgba(9,9,11,0.3) 0%, rgba(9,9,11,0.0) 30%, rgba(9,9,11,0.85) 80%, #09090b 100%),
        linear-gradient(to right,   rgba(9,9,11,0.8) 0%, transparent 60%);
}

.gd-backdrop-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 2rem 2rem;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 2rem;
}

/* --- Cover art -------------------------------------------- */
.gd-cover-wrap {
    flex-shrink: 0;
    width: 160px;
    position: relative;
    z-index: 2;
}

.gd-cover {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-bright);
    box-shadow: 0 24px 64px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06);
    overflow: hidden;
    display: block;
}

.gd-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.04em;
}

/* --- Header info ------------------------------------------ */
.gd-header-info {
    flex: 1;
    padding-bottom: 0.5rem;
    min-width: 0;
}

.gd-breadcrumb {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.gd-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.gd-breadcrumb a:hover { color: var(--text-secondary); }

.gd-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}

.gd-tagline {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 0.75rem;
}

.gd-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.gd-meta-sep { color: var(--text-muted); }

.gd-meta-developer { color: var(--accent-cyan); font-weight: 500; }

/* --- Score group ------------------------------------------ */
.gd-scores {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.gd-score-block {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.gd-score-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.3;
}

.gd-score-count {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.gd-score-sep {
    width: 1px;
    height: 2.5rem;
    background: var(--border-bright);
}

/* --- Content layout --------------------------------------- */
.gd-body {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
    /* Wrap long words / URLs inside descriptions, storylines, meta rows
       so text never pushes the grid or flex parent wider than its track. */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Tab nav and tab content both align with the body edge — no indent.
   Cover protrusion (16px) is cleared vertically by .gd-tabs-offset. */
.gd-offset {
    padding-left: 0;
}

/* --- Tab navigation --------------------------------------- */
.gd-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2.5rem;
}

.gd-tab {
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    margin-bottom: -1px;
}

.gd-tab:hover { color: var(--text-secondary); }
a.gd-tab { text-decoration: none; display: inline-block; }

/* Game page sections: all five are in the HTML (crawlers and deep links see
   everything), one is shown. Before the circuit connects the URL fragment picks
   it (:target); once interactive (.gd-interactive) the server-set .active class
   alone decides, because Blazor's pushState navigation does not refresh :target. */
.gd-panel { display: none; scroll-margin-top: 4.5rem; }
.gd-panel.active { display: block; }
.gd-body:not(.gd-interactive) .gd-panel:target { display: block; }
.gd-body:not(.gd-interactive):has(.gd-panel:target) .gd-panel.active:not(:target) { display: none; }
.gd-body:not(.gd-interactive):has(.gd-panel:target) .gd-tab.active { color: var(--text-muted); border-bottom-color: transparent; }
.gd-body:not(.gd-interactive):has(#overview:target) .gd-tab[href$="#overview"],
.gd-body:not(.gd-interactive):has(#media:target)    .gd-tab[href$="#media"],
.gd-body:not(.gd-interactive):has(#releases:target) .gd-tab[href$="#releases"],
.gd-body:not(.gd-interactive):has(#ratings:target)  .gd-tab[href$="#ratings"] {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}

.gd-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}

/* --- Two-column layout ------------------------------------ */
.gd-columns {
    display: grid;
    /* minmax(0, 1fr) prevents the main column from expanding past its share
       when content (long words, URLs) would otherwise push the sidebar off-screen. */
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.5rem;
    align-items: start;
}

.gd-columns > * { min-width: 0; }

/* --- Summary / description -------------------------------- */
/* Facts-in-prose paragraph under the summary (release, platforms, price, length, players). */
.gd-facts {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: -0.5rem 0 1.5rem;
    overflow-wrap: break-word;
}

/* Position badge on hub cards (trending rank). */
.gn-card-rank {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    pointer-events: none;
}

/* Release calendar: month navigation and platform chips in the hero. */
/* Hero controls, all centred under the title: month pair (equal widths, arrows
   at the outer edges), platform chips, and the Highlights / Every release switch. */
.rl-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; max-width: 26rem; margin: 0 auto 0.9rem; }
.rl-nav-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.9rem; border: 1px solid var(--border-bright); border-radius: 8px; color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-nav-btn:hover { color: var(--text-primary); background: var(--bg-elevated); }
.rl-nav-btn span { font-size: 1.2rem; line-height: 1; }
.rl-platforms { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
.rl-platforms .dl-chip { text-decoration: none; }
.rl-footnote { color: var(--text-muted); font-size: 0.8rem; text-align: center; margin: 3rem auto 0; max-width: 40rem; }
.rl-footnote a { color: inherit; }
.rl-empty { color: var(--text-secondary); max-width: 40rem; margin: 0 auto; padding: 2rem 0; }
/* Highlights / Every release switch: two links, the active one filled. */
.rl-view { display: inline-flex; margin-top: 0.9rem; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.rl-view-opt { padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 0.85rem; color: var(--text-secondary); text-decoration: none; }
.rl-view-opt.active { background: var(--accent); color: #fff; }
.rl-view-opt:not(.active):hover { color: var(--text-primary); }

/* A month as a column of days: the date hangs in a rail on the left (the
   calendar spine), cards and the ledger share one left edge on the right. */
/* The date as a calendar leaf: a tile with the day number large and the weekday
   under it. Today gets the accent ring, past days fade, so a month reads at a
   glance. The same tile marks each game in the "most anticipated" strip. */
.rl-date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 4.25rem; height: 4.25rem; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border-bright); line-height: 1; flex: none; }
.rl-date-num { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 2rem; letter-spacing: -0.02em; color: var(--text-primary); }
.rl-date-wd { font-size: 0.74rem; font-weight: 600; color: var(--accent-cyan); margin-top: 0.15rem; }
.rl-date.is-today { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.rl-date.is-past { opacity: 0.55; }
.rl-date.is-past .rl-date-wd { color: var(--text-muted); }

.rl-day { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 1.25rem; margin-top: 2rem; }
.rl-rail { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.rl-rail-line { flex: 1; width: 2px; border-radius: 1px; background: linear-gradient(var(--border-bright), transparent); min-height: 1.5rem; }
.rl-day:last-of-type .rl-rail-line { display: none; }
.rl-day-quiet .rl-date { background: transparent; }

/* Most anticipated: five compact cards, cover left, calendar leaf + title right. */
.rl-top { margin-top: 1.5rem; padding: 1.25rem 1.25rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(124, 58, 237, 0.08), transparent 70%), var(--bg-surface); }
.rl-top-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rl-top-title { font-family: 'Rajdhani', sans-serif; font-size: 1.4rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.rl-top-sub { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.rl-top-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.rl-top-card { display: flex; gap: 0.75rem; align-items: stretch; padding: 0.6rem; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border); color: inherit; text-decoration: none; min-width: 0; height: 100%; }
.rl-top-card:hover { border-color: var(--border-bright); background: var(--bg-card); }
.rl-top-card:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.rl-top-cover { width: 72px; height: 96px; object-fit: cover; border-radius: 6px; flex: none; background: var(--bg-card); }
.rl-top-cover-empty { display: flex; align-items: center; justify-content: center; font-family: 'Rajdhani', sans-serif; font-weight: 700; color: var(--text-muted); }
.rl-top-body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.rl-top-body .rl-date { width: 3rem; height: 3rem; border-radius: 8px; }
.rl-top-body .rl-date-num { font-size: 1.35rem; }
.rl-top-body .rl-date-wd { font-size: 0.62rem; }
.rl-top-name { font-weight: 600; font-size: 0.9rem; line-height: 1.25; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rl-top-meta { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .rl-top-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rl-day-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rl-day-body { min-width: 0; }
.rl-day-body .gn-grid + .rl-ledger { margin-top: 1rem; }

/* The ledger: the day's other releases as one line each, no covers. */
.rl-ledger > summary { cursor: pointer; list-style: none; color: var(--text-secondary); font-size: 0.9rem; padding: 0.4rem 0; display: inline-flex; align-items: center; gap: 0.45rem; }
.rl-ledger > summary::-webkit-details-marker { display: none; }
.rl-ledger > summary::before { content: ""; width: 0.45rem; height: 0.45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.rl-ledger[open] > summary::before { transform: rotate(45deg); }
.rl-ledger > summary:hover { color: var(--text-primary); }
.rl-ledger > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.rl-day-quiet .rl-ledger > summary { padding-top: 0.55rem; }
.rl-ledger-list { list-style: none; margin: 0.25rem 0 0; padding: 0; border-top: 1px solid var(--border); }
.rl-ledger-list li { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; align-items: baseline; }
.rl-ledger-list a { color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-ledger-list a:hover { color: var(--accent-cyan); }
.rl-ledger-platforms, .rl-ledger-dev { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .rl-ledger > summary::before { transition: none; } }
@media (max-width: 640px) {
    .rl-day { grid-template-columns: 1fr; row-gap: 0.6rem; margin-top: 1.5rem; }
    .rl-rail { flex-direction: row; align-items: center; gap: 0.75rem; position: sticky; top: 0; background: var(--bg-base); padding: 0.35rem 0; z-index: 1; }
    .rl-rail .rl-date { width: 3.5rem; height: 3.5rem; }
    .rl-rail .rl-date-num { font-size: 1.6rem; }
    .rl-rail-line { flex: 1; width: auto; height: 2px; min-height: 0; background: linear-gradient(90deg, var(--border-bright), transparent); }
    .rl-top { padding: 1rem; }
    .rl-top-list { display: flex; overflow-x: auto; gap: 0.6rem; padding-bottom: 0.25rem; scrollbar-width: none; }
    .rl-top-list::-webkit-scrollbar { display: none; }
    .rl-top-list > li { flex: 0 0 78%; }
    .rl-ledger-list li { grid-template-columns: minmax(0, 1fr) auto; }
    .rl-ledger-dev { display: none; }
}

.gd-summary {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0 0 1.5rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.gd-description {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.8;
    overflow-wrap: break-word;
    word-break: break-word;
}

.gd-description p { margin: 0 0 1rem; }

.gd-read-more {
    background: none;
    border: none;
    color: var(--accent-cyan);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}

/* --- Screenshots ------------------------------------------ */
.gd-screenshots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.gd-screenshot {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

.gd-screenshot:hover { border-color: var(--border-bright); transform: scale(1.02); }

.gd-screenshot-placeholder {
    width: 100%;
    height: 100%;
}

.gd-screenshot-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.gd-screenshot:hover .gd-screenshot-overlay { opacity: 1; }

/* --- Credits --------------------------------------------- */








/* --- Related games (horizontal scroll) -------------------- */
.gd-related-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border-bright) transparent;
    margin-top: 1.5rem;
}

.gd-related-scroll::-webkit-scrollbar { height: 4px; }
.gd-related-scroll::-webkit-scrollbar-track { background: transparent; }
.gd-related-scroll::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

.gd-related-card {
    flex: 0 0 155px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
}

.gd-related-card:hover {
    border-color: var(--border-bright);
    transform: translateY(-3px);
}

.gd-related-cover {
    aspect-ratio: 3 / 4;
    position: relative;
}

.gd-related-body {
    padding: 0.625rem;
}

.gd-related-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gd-related-year {
    font-size: 0.7375rem;
    color: var(--text-muted);
}

/* --- Sidebar cards ---------------------------------------- */
.gd-sidebar-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.gd-attribution {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.25rem 0;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
}
.gd-igdb-link { width: 100%; justify-content: center; margin-bottom: 0.5rem; }
.gd-attribution-line { margin: 0; }

.gd-attribution a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--border-bright);
    transition: color 0.15s ease;
}

.gd-attribution a:hover { color: var(--accent-cyan); }

.gd-sidebar-title,
h2.gd-sidebar-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 0.875rem;
}

.gd-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8375rem;
}

.gd-detail-row:last-child { border-bottom: none; padding-bottom: 0; }
.gd-detail-row:first-child { padding-top: 0; }

.gd-detail-key { color: var(--text-muted); flex-shrink: 0; }
.gd-detail-val { color: var(--text-primary); text-align: right; font-weight: 500; }

/* --- Platform releases ------------------------------------ */
.gd-platform-release {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8375rem;
}

.gd-platform-release:last-child { border-bottom: none; padding-bottom: 0; }
.gd-platform-release:first-child { padding-top: 0; }

.gd-platform-name { font-weight: 500; color: var(--text-primary); }
.gd-platform-date { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; flex: none; color: var(--text-muted); font-size: 0.8rem; text-align: right; }
.gd-platform-date > span, .gd-platform-first > span:first-child { white-space: nowrap; }
.gd-platform-first { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.gd-platform-release > div:first-child { min-width: 0; padding-right: 0.75rem; }
.gd-platform-status { padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--accent-cyan-glow); color: var(--accent-cyan); font-size: 0.68rem; font-weight: 600; white-space: nowrap; }
.gd-platform-full { color: var(--text-secondary); white-space: nowrap; }

/* --- Company card ----------------------------------------- */
.gd-company {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.gd-company:last-child { border-bottom: none; }
.gd-company:hover .gd-company-name { color: var(--accent-cyan); }

.gd-company-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
    border: 1px solid var(--border-bright);
    color: #fff;
}

.gd-company-name { font-size: 0.875rem; font-weight: 500; }
.gd-company-role { font-size: 0.75rem; color: var(--text-muted); }

/* --- External link ---------------------------------------- */
.gd-ext-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.8375rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    transition: var(--transition);
}

.gd-ext-link:hover {
    border-color: var(--border-bright);
    color: var(--text-primary);
    background: var(--bg-card);
}

.gd-ext-icon { display: flex; align-items: center; flex-shrink: 0; opacity: 0.85; transition: opacity var(--transition); }
.gd-ext-text  { flex: 1; }
.gd-ext-link:hover .gd-ext-icon { opacity: 1; }

/* Brand accent colours on the icon */
.gd-ext-link--steam      .gd-ext-icon { color: #1b9bcc; }
.gd-ext-link--epicgames  .gd-ext-icon { color: #2eff7a; }
.gd-ext-link--gog        .gd-ext-icon { color: #86328a; }
.gd-ext-link--youtube    .gd-ext-icon { color: #ff0000; }
.gd-ext-link--twitch     .gd-ext-icon { color: #9146ff; }
.gd-ext-link--twitter    .gd-ext-icon { color: #e7e9ea; }
.gd-ext-link--facebook   .gd-ext-icon { color: #1877f2; }
.gd-ext-link--instagram  .gd-ext-icon { color: #e1306c; }
.gd-ext-link--reddit     .gd-ext-icon { color: #ff4500; }
.gd-ext-link--discord    .gd-ext-icon { color: #5865f2; }
.gd-ext-link--itch       .gd-ext-icon { color: #fa5c5c; }
.gd-ext-link--official   .gd-ext-icon { color: var(--accent); }
.gd-ext-link--playstation .gd-ext-icon { color: #2d7cf6; }
.gd-ext-link--xbox        .gd-ext-icon { color: #52b043; }
.gd-ext-link--nintendo    .gd-ext-icon { color: #ff3c3c; }
.gd-ext-link--apple       .gd-ext-icon { color: #e7e9ea; }
.gd-ext-link--googleplay  .gd-ext-icon { color: #34d399; }
.gd-ext-link--humble      .gd-ext-icon { color: #ff5d5d; }
.gd-ext-link--kickstarter .gd-ext-icon { color: #05ce78; }
.gd-ext-link--patreon     .gd-ext-icon { color: #ff424d; }
.gd-ext-link--tiktok      .gd-ext-icon { color: #e7e9ea; }
.gd-ext-link--amazon      .gd-ext-icon { color: #ff9900; }
.gd-ext-link--wiki        .gd-ext-icon { color: var(--text-secondary); }
.gd-ext-link--bluesky     .gd-ext-icon { color: #1185fe; }
.gd-ext-link--wikipedia   .gd-ext-icon { color: #e7e9ea; }
.gd-ext-link--wikia       .gd-ext-icon { color: #fa005a; }
.gd-store-link { display: inline-flex; align-items: center; gap: 0.4rem; }
.gd-store-icon svg { width: 14px; height: 14px; }

/* --- Rating badge ----------------------------------------- */
.gd-rating-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 2px solid var(--border-bright);
    border-radius: var(--radius-md);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
}

.gd-rating-badge .rating-system { font-size: 0.55rem; letter-spacing: 0.05em; color: var(--text-muted); }
.gd-rating-badge .rating-value  { font-size: 1.1rem; line-height: 1; }

/* ============================================================
   GAMES LISTING PAGE  (gl-*)
   ============================================================ */

/* --- Listing Hero ----------------------------------------- */
.gl-hero {
    position: relative;
    padding: 3rem 2rem 2.5rem;
    text-align: center;
    background:
        radial-gradient(ellipse 80% 60% at 50% -20%, rgba(124,58,237,0.28) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 80% 80%, rgba(6,182,212,0.1) 0%, transparent 60%);
    border-bottom: 1px solid var(--border);
}

.gl-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}

.gl-search-form {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    max-width: 600px;
    margin: 1.5rem auto 0;
}

.gl-search-form .gn-search { flex: 1; margin: 0; }

/* --- Active filter chips bar ------------------------------ */
.gl-chips-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 2rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.gl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1;
}

.gl-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-xl);
    background: rgba(124, 58, 237, 0.18);
    border: 1px solid rgba(124, 58, 237, 0.35);
    color: #c4b5fd;
    font-size: 0.775rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.gl-chip:hover { background: rgba(124, 58, 237, 0.28); border-color: rgba(124,58,237,0.55); }
.gl-chip span  { color: #a78bfa; font-size: 0.9rem; line-height: 1; }





.gl-clear-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.gl-clear-btn:hover { color: var(--text-secondary); }

/* --- Two-column layout ------------------------------------ */
.gl-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 0;
    max-width: 1440px;
    margin: 0 auto;
    align-items: start;
    min-height: 60vh;
}

/* --- Sidebar ---------------------------------------------- */
/* The column surface is a pseudo-element that stretches the whole row, so
   the sidebar itself can be as tall as its content (and stick when it fits). */
.gl-layout::before {
    content: "";
    grid-column: 1;
    grid-row: 1;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
}

.gl-sidebar {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    padding: 0.5rem 0 2rem;
}

/* Added by gfStickyFit while the whole sidebar fits under the navbar: it then
   follows the visitor down the page. No inner scroll area in either state. */
.gl-sidebar.gl-sidebar-fits {
    position: sticky;
    top: 60px; /* below navbar */
    align-self: start;
}

/* Sidebar body wraps filter groups (flex child on mobile, plain block on desktop) */
.gl-sidebar-body { display: block; }

/* Mobile-only sidebar header, footer, backdrop — hidden on desktop */
.gl-sidebar-header,
.gl-sidebar-footer,
.gl-sidebar-backdrop { display: none; }

/* --- Filter groups as pills --------------------------------
   A group is a title row and a wrap of toggle pills (name + compact count).
   Selected = filled accent. Secondary groups fold behind a header row that
   shows what is selected while closed. */
.gl-sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.25rem 0.4rem; }
.gl-sidebar-top-title { font-family: 'Rajdhani', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }

.gl-fg { padding: 0.6rem 1.25rem 0.9rem; border-bottom: 1px solid var(--border); }
.gl-fg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.55rem; }
.gl-fg-title { margin: 0; font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; color: var(--text-primary); }
.gl-fg-clear { background: none; border: 0; padding: 0; font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--accent-cyan); cursor: pointer; white-space: nowrap; }
.gl-fg-clear:hover { text-decoration: underline; }
.gl-fg-clear:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 3px; }

/* collapsible header */
.gl-fg-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.25rem 0; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--text-primary); }
.gl-fg-toggle-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.gl-fg-summary { font-size: 0.75rem; color: var(--accent-cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-fg-chevron { flex: none; width: 0.5rem; height: 0.5rem; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(-45deg); transition: transform 0.15s; margin-right: 0.25rem; }
.gl-fg.is-open .gl-fg-chevron { transform: rotate(45deg); }
.gl-fg-toggle:hover .gl-fg-title { color: var(--accent-cyan); }
.gl-fg-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.gl-fg-toggle + .gl-fg-body { margin-top: 0.6rem; }

.gl-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gl-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 2rem; padding: 0.3rem 0.7rem;
    border-radius: 999px; border: 1px solid var(--border-bright);
    background: var(--bg-elevated); color: var(--text-secondary);
    font: inherit; font-size: 0.8125rem; font-weight: 500; line-height: 1.2;
    cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition);
    max-width: 100%;
}
.gl-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-pill-count { font-size: 0.7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gl-pill:hover { color: var(--text-primary); border-color: var(--accent); }
.gl-pill:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.gl-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.gl-pill.active .gl-pill-count { color: rgba(255, 255, 255, 0.75); }
.gl-pill-score { min-width: 3.1rem; justify-content: center; font-variant-numeric: tabular-nums; }
.gl-fg-more { margin-top: 0.55rem; background: none; border: 0; padding: 0; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.gl-fg-more:hover { color: var(--text-primary); }
.gl-fg-more:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 3px; }
.gl-fg-empty { display: block; font-size: 0.8rem; color: var(--text-muted); padding: 0.25rem 0; }

/* --- Filter search box ------------------------------------ */
.gl-filter-search-wrap { padding: 0 0 0.6rem; }
.gl-filter-search {
    width: 100%;
    height: 2.25rem; padding: 0 0.7rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-bright);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
    outline: none;
    transition: var(--transition);
}
.gl-filter-search::placeholder { color: var(--text-muted); }
.gl-filter-search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }

/* --- Year range inputs ------------------------------------- */
.gl-year-row { display: flex; align-items: flex-end; gap: 0.5rem; margin-top: 0.6rem; }
.gl-year-field { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.72rem; color: var(--text-muted); }
.gl-year-dash { color: var(--text-muted); padding-bottom: 0.55rem; }
.gl-year-input {
    width: 100%; height: 2.1rem; padding: 0 0.6rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-bright);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
    outline: none;
    transition: var(--transition);
    -moz-appearance: textfield;
}
.gl-year-input::-webkit-inner-spin-button,
.gl-year-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.gl-year-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }

/* --- Main results area ------------------------------------- */
.gl-main {
    padding: 1.5rem 2rem 3rem;
    min-width: 0;
}

/* --- Results bar ------------------------------------------ */
.gl-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.gl-results-count {
    font-size: 0.875rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.gl-results-count strong { color: var(--text-primary); font-weight: 600; }

.gl-shimmer-inline {
    display: inline-block;
    width: 60px;
    height: 1em;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--bg-card) 50%, var(--bg-elevated) 100%);
    background-size: 200% 100%;
    animation: gl-shimmer 1.4s linear infinite;
}

.gl-sort-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8375rem;
    color: var(--text-muted);
}

.gl-sort-select {
    appearance: none;
    -webkit-appearance: none;
    height: 2.25rem;
    background: var(--bg-elevated)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a96' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
        no-repeat right 0.7rem center;
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.8375rem;
    font-family: inherit;
    line-height: 1;
    padding: 0 2rem 0 0.75rem;
    cursor: pointer;
    outline: none;
    transition: var(--transition);
}

.gl-sort-select:focus { border-color: var(--accent); }
.gl-sort-select option { background: var(--bg-elevated); }

/* --- Skeleton loading ------------------------------------- */
.gl-skeleton { pointer-events: none; }

/* Counts are hidden while the sidebar still shows catalogue-wide numbers
   (the contextual ones arrive right after the circuit connects) */
.gl-facets-pending .gl-pill-count { visibility: hidden; }

/* Previous results stay visible, dimmed, while the next query runs */
.gl-grid-loading {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.gl-skeleton-cover {
    aspect-ratio: 3 / 4;
    background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--bg-card) 50%, var(--bg-elevated) 100%);
    background-size: 200% 100%;
    animation: gl-shimmer 1.4s linear infinite;
}

.gl-skeleton-line {
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--bg-card) 50%, var(--bg-elevated) 100%);
    background-size: 200% 100%;
    animation: gl-shimmer 1.4s linear infinite;
}

.gl-skeleton-title { height: 1rem; width: 85%; margin-bottom: 0.4rem; }
.gl-skeleton-sub   { height: 0.75rem; width: 55%; }

@keyframes gl-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* --- Empty state ------------------------------------------ */
.gl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 5rem 2rem;
    text-align: center;
    color: var(--text-muted);
}

.gl-empty p { font-size: 0.9375rem; margin: 0; }

/* --- Pagination ------------------------------------------- */
.gl-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.gl-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-bright);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.8375rem;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}

.gl-page-btn:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--accent);
    background: rgba(124,58,237,0.1);
}

.gl-page-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

.gl-page-btn:disabled,
.gl-page-btn[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Anchor form of pagination controls — same look, no underline. */
a.gl-page-btn            { text-decoration: none; }
a.gl-page-btn:hover      { text-decoration: none; }

.gl-page-ellipsis {
    color: var(--text-muted);
    padding: 0 0.25rem;
    font-size: 0.9rem;
    line-height: 2.25rem;
}

/* --- Card meta helper ------------------------------------- */

/* --- Mobile filter toggle button (listing page) ----------- */
/* Hidden on desktop, shown on mobile via media query */
.gl-mobile-filter-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.875rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-bright);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.8375rem;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}
.gl-mobile-filter-btn.active {
    border-color: var(--accent);
    color: var(--accent-cyan);
    background: rgba(124,58,237,0.1);
}
.gl-mobile-filter-btn svg { flex-shrink: 0; }

/* Game Detail — tab area top offset (controls cover-overlap padding) */
.gd-tabs-offset { padding-top: 1.75rem; }

/* Game Detail — release row grid */
.gd-release-row {
    display: grid;
    grid-template-columns: 1fr 120px 110px 80px;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: 0.8375rem;
}

/* ============================================================
   RESPONSIVE — TABLET  (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
    /* Listing layout: sidebar stacks above results */
    .gl-layout { grid-template-columns: 1fr; }

    .gl-layout::before { display: none; }
    .gl-sidebar,
    .gl-sidebar.gl-sidebar-fits {
        position: static;
        grid-column: auto;
        grid-row: auto;
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border);
        top: auto;
    }

    .gl-search-form { flex-direction: column; }
    .gl-search-form .gn-search { max-width: 100%; }

    /* Detail page columns → single column */
    .gd-columns { grid-template-columns: minmax(0, 1fr); }

    /* Backdrop cover a little smaller */
    .gd-cover-wrap { width: 140px; }
    .gd-backdrop   { height: 300px; }
    .gd-offset     { padding-left: 0; }
    .gd-tabs-offset { padding-top: 1.5rem; }

    /* Screenshots/Artwork grids — reduce artwork columns for tablet */
    .gd-screenshots { grid-template-columns: repeat(3, 1fr) !important; }
    .gd-body { padding: 0 1.25rem 3rem; }
    .gd-related-card { flex: 0 0 140px; }
}

/* ============================================================
   RESPONSIVE — MOBILE PORTRAIT  (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {

    /* The header's own rules, phone ones included, are in the "Site header" block. */

    /* ── Buttons ─────────────────────────────────────────── */
    .gn-btn { padding: 0.4rem 0.875rem; font-size: 0.8rem; }
    .gn-btn-sm { padding: 0.3rem 0.65rem; font-size: 0.775rem; }

    /* ── Card grid: 2 columns on phone ───────────────────── */
    .gn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }

    /* ── Footer ──────────────────────────────────────────── */
    .gn-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding: 2rem 1.25rem 1.5rem;
    }
    .gn-footer-brand { grid-column: 1 / -1; padding-right: 0; }
    .gn-footer-bottom {
        padding: 1rem 1.25rem 1.25rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .gn-footer-disclaimer { text-align: left; }

    /* ===================================================== */
    /* GAME DETAIL PAGE                                       */
    /* ===================================================== */

    /* Backdrop becomes a container that grows to fit its content.
       The blurred art + gradient (inset: 0) fill the whole backdrop. */
    .gd-backdrop {
        height: auto;
        min-height: 200px;
    }

    /* Stronger gradient on mobile so text is readable across the whole stack. */
    .gd-backdrop-gradient {
        background:
            linear-gradient(to bottom,
                rgba(9,9,11,0.45) 0%,
                rgba(9,9,11,0.75) 55%,
                #09090b 100%);
    }

    /* Content flows naturally in a vertical column inside the backdrop,
       instead of being absolute-pinned to the bottom (which caused clipping). */
    .gd-backdrop-content {
        position: relative;
        top: auto;
        bottom: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1.25rem 1rem 1.25rem;
    }

    /* Cover sits at the top of the stack, no vertical shift */
    .gd-cover-wrap {
        width: 110px;
        transform: none;
    }

    /* Header info takes the full column width */
    .gd-header-info {
        width: 100%;
        padding-bottom: 0;
    }

    /* Title & meta adapt to narrow space */
    .gd-title    { font-size: clamp(1.4rem, 6vw, 1.9rem); margin-bottom: 0.4rem; }
    .gd-tagline  { display: none; }
    .gd-breadcrumb { margin-bottom: 0.375rem; font-size: 0.7rem; }
    .gd-meta-row { font-size: 0.75rem; gap: 0.25rem 0.5rem; margin-bottom: 0.75rem; }
    .gd-scores   { gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
    .gn-score-lg { width: 2.75rem; height: 2.75rem; font-size: 1.1rem; }
    .gd-score-sep { display: none; }

    /* Action buttons go full-width and stack nicely */
    .gd-header-info > div:last-child {
        width: 100%;
    }
    .gd-header-info > div:last-child .gn-btn {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }

    /* Body: full-width, tight padding */
    .gd-body   { padding: 1rem 1rem 3rem; }
    /* Drop the left offset on mobile — content uses the full viewport width. */
    .gd-offset { padding-left: 0; }
    .gd-tabs-offset { padding-top: 0; }

    /* Tabs: scrollable row, no wrap, hide scrollbar but keep swipe */
    .gd-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 0;
        scrollbar-width: none;
        margin-bottom: 1.5rem;
    }
    .gd-tabs::-webkit-scrollbar { display: none; }
    .gd-tab  { padding: 0.75rem 0.875rem; font-size: 0.8125rem; white-space: nowrap; flex-shrink: 0; }

    /* Overview columns: single column, sidebar goes below */
    .gd-columns { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }

    /* Screenshots/Artwork: 2 columns regardless of inline style */
    .gd-screenshots { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem; }

    /* Description/summary: readable size on mobile */
    .gd-summary     { font-size: 0.95rem; line-height: 1.65; }
    .gd-description { font-size: 0.9rem; line-height: 1.7; }

    /* Related scroll: smaller cards */
    .gd-related-card { flex: 0 0 130px; }

    /* Sidebar cards full-width + readable padding */
    .gd-sidebar-card { margin-bottom: 0.875rem; padding: 1rem; }
    .gd-sidebar-title { margin-bottom: 0.75rem; }

    /* Credits: tighter layout */

    /* Release row: stack into 2-column grid on mobile */
    .gd-release-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem 1rem;
    }
    .gd-release-row > :nth-child(3),
    .gd-release-row > :nth-child(4) {
        font-size: 0.775rem;
        color: var(--text-muted);
    }

    /* Section titles inside tabs */
    .gd-body .gn-section-title { font-size: 1.1rem; }

    /* ===================================================== */
    /* LISTING PAGE                                           */
    /* ===================================================== */

    /* Hero */
    .gl-hero       { padding: 1.5rem 1rem 1.25rem; }
    .gl-hero-inner .gn-hero-eyebrow { display: none; }

    /* Sidebar becomes a full-screen overlay sheet when toggled; the sheet has
       its own header, so the desktop title row is hidden */
    .gl-sidebar-top { display: none; }
    .gl-sidebar {
        display: none;
        border-bottom: none;
        border-right: none;
    }
    .gl-sidebar.gl-sidebar-open,
    .gl-sidebar.gl-sidebar-open.gl-sidebar-fits {
        display: flex;
        flex-direction: column;
        position: fixed;
        align-self: auto;                     /* let top/bottom stretch the sheet */
        top: 56px;                            /* below mobile nav */
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 85;
        padding: 0;
        background: var(--bg-surface);
        border: none;
        animation: gl-sheet-up 0.22s ease;
    }
    .gl-sidebar.gl-sidebar-open .gl-sidebar-body {
        display: block;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.25rem 0 0.5rem;
    }

    /* Sidebar header + footer become visible on mobile */
    .gl-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.875rem 1.25rem;
        border-bottom: 1px solid var(--border);
        background: var(--bg-surface);
        position: sticky;
        top: 0;
        z-index: 2;
    }
    .gl-sidebar-header-title {
        font-family: 'Rajdhani', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: 0.01em;
    }
    .gl-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: var(--radius-md);
        border: 1px solid var(--border);
        background: var(--bg-elevated);
        color: var(--text-secondary);
        cursor: pointer;
        padding: 0;
        transition: var(--transition);
    }
    .gl-sidebar-close:hover {
        color: var(--text-primary);
        border-color: var(--border-bright);
    }

    .gl-sidebar-footer {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        background: var(--bg-surface);
        position: sticky;
        bottom: 0;
    }
    .gl-sidebar-clear-btn {
        flex-shrink: 0;
        padding: 0.75rem 0.875rem;
        background: transparent;
        border: 1px solid var(--border-bright);
        color: var(--text-secondary);
        font-size: 0.875rem;
        font-family: inherit;
        font-weight: 500;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: var(--transition);
    }
    .gl-sidebar-clear-btn:hover:not(:disabled) {
        color: var(--text-primary);
        border-color: var(--border-bright);
        background: var(--bg-elevated);
    }
    .gl-sidebar-clear-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }
    .gl-sidebar-apply-btn {
        flex: 1;
        justify-content: center;
        padding: 0.85rem 1.25rem;
        font-size: 0.95rem;
    }

    /* Backdrop behind the sheet */
    .gl-sidebar-backdrop {
        display: block;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(2px);
        z-index: 84;
        animation: gn-fade-in 0.15s ease;
    }

    @keyframes gl-sheet-up {
        from { transform: translateY(18px); opacity: 0; }
        to   { transform: translateY(0);     opacity: 1; }
    }

    /* Tap-friendly filter items on touch screens */
    .gl-pill { min-height: 2.5rem; padding: 0.45rem 0.9rem; font-size: 0.9rem; }
    .gl-fg { padding: 0.85rem 1.25rem 1.1rem; }
    .gl-fg-toggle { padding: 0.4rem 0; }
    .gl-year-input { padding: 0.625rem 0.75rem; font-size: 16px; }
    .gl-filter-search { padding: 0.625rem 0.75rem; font-size: 16px; }

    /* Show mobile filter toggle button */
    .gl-mobile-filter-btn { display: flex; }

    /* Main area */
    .gl-main { padding: 1rem 0.875rem 2rem; }

    /* Results bar */
    /* Results bar on phones: the count on its own line, then the Filters
       button and the sort dropdown side by side at the same height. */
    .gl-results-bar { gap: 0.625rem; }
    .gl-results-count { order: -1; flex: 1 0 100%; }
    .gl-mobile-filter-btn { flex: 0 0 auto; }
    .gl-sort-wrap { flex: 1 1 auto; min-width: 0; }
    .gl-sort-wrap label { display: none; } /* hide "Sort:" label */
    .gl-sort-select { width: 100%; }

    /* Active chips: smaller text */
    .gl-chip { font-size: 0.725rem; padding: 0.2rem 0.5rem; }
    .gl-chips-bar { padding: 0.5rem 1rem; }

    /* Pagination: compact */
    .gl-pagination { gap: 0.25rem; margin-top: 1.75rem; }
    .gl-page-btn   { min-width: 2rem; height: 2rem; padding: 0 0.5rem; font-size: 0.775rem; }
    .gl-page-ellipsis { line-height: 2rem; }

    /* Empty state */
    .gl-empty { padding: 3rem 1rem; }
}

/* ── Lightbox ──────────────────────────────────────────────────────────────── */
.gd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.93);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    animation: lb-fade-in 0.15s ease;
}

@keyframes lb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.gd-lightbox-backdrop {
    position: absolute;
    inset: 0;
    cursor: zoom-out;
}

.gd-lightbox-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: min(90vw, 1400px);
    max-height: 90vh;
    pointer-events: none;
}

.gd-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: 82vh;
    border-radius: var(--radius-md);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
    pointer-events: auto;
    cursor: zoom-in;
    animation: lb-zoom-in 0.18s ease;
}

/* Full-size view: the content box becomes a scrollable viewport the size of
   the screen and the image keeps its natural pixels. Touch scrolls it; the
   browser's own pinch zoom still works on top. */
.gd-lightbox-zoomed {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    pointer-events: auto;
    cursor: zoom-out;
}
.gd-lightbox-zoomed .gd-lightbox-img {
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    cursor: zoom-out;
    animation: none;
}

@keyframes lb-zoom-in {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.gd-lightbox-counter {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
    pointer-events: auto;
}

.gd-lightbox-close {
    position: fixed;
    top: 1.1rem;
    right: 1.1rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    z-index: 2;
}
.gd-lightbox-close:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }

.gd-lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    z-index: 2;
}
.gd-lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.gd-lightbox-nav:disabled { opacity: 0.2; cursor: default; }
.gd-lightbox-prev { left: 1.1rem; }
.gd-lightbox-next { right: 1.1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH MODAL — one column, the heading in the display face, inputs tall enough
   to hit, social sign-in as full rows. Under 520px it becomes a bottom sheet.
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-backdrop {
    position: fixed; inset: 0;
    background: rgba(5, 5, 8, 0.72);
    backdrop-filter: blur(4px);
    z-index: 900;
    animation: auth-fade-in 0.18s ease;
}

.auth-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 901;
    width: min(440px, calc(100vw - 2rem));
    background: var(--bg-card);
    border: 1px solid var(--border-bright);
    border-radius: 18px;
    padding: 1.25rem 1.75rem 1.75rem;
    animation: auth-slide-up 0.22s ease;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    outline: none;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

@keyframes auth-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes auth-slide-up { from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); }
                           to   { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .auth-backdrop, .auth-modal { animation: none; } }

.auth-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.auth-wordmark { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); }
.auth-wordmark span { color: var(--accent-cyan); }
.auth-modal-close {
    background: none; border: 1px solid transparent; cursor: pointer;
    color: var(--text-muted); width: 2.1rem; height: 2.1rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: color var(--transition), background var(--transition);
}
.auth-modal-close:hover { color: var(--text-primary); background: var(--bg-elevated); }
.auth-modal-close:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

/* Sign in | Create account */
.auth-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border); margin-bottom: 1.25rem; }
.auth-mode { padding: 0.5rem 0; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.auth-mode.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.auth-mode:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

.auth-title { font-family: 'Rajdhani', sans-serif; font-size: 1.75rem; font-weight: 700; line-height: 1.1; margin: 0 0 0.3rem; color: var(--text-primary); }
.auth-sub { margin: 0 0 1.1rem; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; }

/* form */
.auth-form { display: flex; flex-direction: column; gap: 0.9rem; }
.auth-field { display: flex; flex-direction: column; gap: 0.35rem; }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.auth-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); }
.auth-hint { font-weight: 400; color: var(--text-muted); font-size: 0.75rem; }
.auth-hint::before { content: "· "; }
.auth-input {
    padding: 0 0.9rem; height: 2.75rem;
    background: var(--bg-elevated); border: 1px solid var(--border-bright);
    border-radius: 10px; color: var(--text-primary);
    font: inherit; font-size: 0.95rem; outline: none; transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%; box-sizing: border-box;
}
.auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.auth-input:disabled { opacity: 0.6; }
.auth-input::placeholder { color: var(--text-muted); }
.auth-pw { position: relative; }
.auth-pw .auth-input { padding-right: 3.6rem; }
.auth-pw-toggle { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 0.3rem 0.5rem; border-radius: 6px; color: var(--text-muted); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.auth-pw-toggle:hover { color: var(--text-primary); background: var(--bg-card); }
.auth-pw-toggle:focus-visible { outline: 2px solid var(--accent-cyan); }

.auth-error {
    margin: 0;
    background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px; padding: 0.6rem 0.85rem;
    color: #fca5a5; font-size: 0.8375rem; line-height: 1.45;
}
.auth-notice { margin: 0; background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.4); color: #bbf7d0; border-radius: 10px; padding: 0.6rem 0.85rem; font-size: 0.85rem; line-height: 1.45; }

.auth-submit {
    margin-top: 0.15rem;
    height: 2.9rem; padding: 0 1.5rem;
    background: var(--accent); border: none; border-radius: 10px;
    color: #fff; font: inherit; font-size: 0.95rem; font-weight: 700;
    cursor: pointer; transition: background var(--transition), opacity var(--transition);
    width: 100%;
}
.auth-submit:hover:not(:disabled) { background: #8b5cf6; }
.auth-submit:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.auth-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* divider */
.auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; color: var(--text-muted); font-size: 0.78rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* social sign-in: one full-width row per provider */
.auth-social { display: flex; flex-direction: column; gap: 0.5rem; }
.auth-social-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    height: 2.75rem; padding: 0 1rem;
    background: var(--bg-elevated); border: 1px solid var(--border-bright);
    border-radius: 10px; color: var(--text-primary);
    font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.auth-social-btn:hover { background: var(--bg-card); }
.auth-social-btn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.auth-google:hover   { border-color: #4285f4; }
.auth-discord:hover  { border-color: #5865f2; }
.auth-facebook:hover { border-color: #1877f2; }
.auth-twitter:hover  { border-color: #e7e9ea; }

.auth-consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.45; cursor: pointer; }
.auth-consent input { margin-top: 0.2rem; accent-color: var(--accent); flex: none; width: 1rem; height: 1rem; }
.auth-consent a, .auth-consent-note a { color: var(--accent-cyan); }
.auth-consent-note { margin: 0.9rem 0 0; font-size: 0.75rem; color: var(--text-muted); line-height: 1.45; text-align: center; }

.auth-link { background: none; border: none; color: var(--accent-cyan); cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0; }
.auth-link:hover { text-decoration: underline; }
.auth-link:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; border-radius: 3px; }
.auth-back { align-self: center; margin-top: 0.25rem; }
.auth-text { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.auth-page { max-width: 32rem; }
.auth-page .gn-section-title { margin-bottom: 1.25rem; }

@media (max-width: 520px) {
    .auth-modal {
        top: auto; bottom: 0; left: 0; transform: none;
        width: 100vw; max-height: calc(100vh - 2.5rem);
        border-radius: 18px 18px 0 0; border-bottom: 0;
        padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
        animation: auth-sheet-up 0.22s ease;
    }
    @keyframes auth-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ── User avatar / dropdown in nav ──────────────────────────────────────── */
.gn-user-menu {
    position: relative; display: flex; align-items: center;
    gap: 0.5rem; cursor: pointer; padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md); transition: background var(--transition);
}
.gn-user-menu:hover { background: var(--bg-elevated); }

.gn-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--border-bright);
    flex-shrink: 0;
}
.gn-avatar-initials {
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0;
}
.gn-username {
    font-size: 0.875rem; font-weight: 600; color: var(--text-primary);
    max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.gn-user-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--bg-card); border: 1px solid var(--border-bright);
    border-radius: var(--radius-md); min-width: 200px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 200;
    padding: 0.375rem 0; animation: auth-fade-in 0.12s ease;
}
.gn-user-dropdown-email {
    padding: 0.5rem 1rem; font-size: 0.78rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gn-dropdown-divider { border: none; border-top: 1px solid var(--border); margin: 0.25rem 0; }
.gn-dropdown-item {
    display: block; width: 100%; padding: 0.5rem 1rem;
    background: none; border: none; text-align: left;
    color: var(--text-secondary); font-size: 0.875rem;
    cursor: pointer; transition: background var(--transition), color var(--transition);
    text-decoration: none;
    font-family: inherit;
    box-sizing: border-box;
}
.gn-dropdown-item:hover { background: var(--bg-elevated); color: var(--text-primary); }

/* ── "In Library" / "On Wishlist" active button states ────────────────────── */
.gn-btn-active {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.45);
}
.gn-btn-active:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.45);
}
/* Swap label to "Remove from Library" on hover */
.gn-btn-active:hover > span::after {
    content: " — remove";
    color: inherit;
    opacity: 0.7;
    font-weight: 500;
}

.gn-btn-active-wishlist {
    background: rgba(124, 58, 237, 0.18);
    color: #c4b5fd;
    border-color: rgba(124, 58, 237, 0.55);
}
.gn-btn-active-wishlist:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.55);
}
.gn-btn-active-wishlist:hover > span::after {
    content: " — remove";
    opacity: 0.7;
    font-weight: 500;
}

.gn-btn:disabled { opacity: 0.55; cursor: progress; }

/* ── Reviews tab ──────────────────────────────────────────────────────────── */
.rv-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.rv-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}
.rv-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.04;
    pointer-events: none;
}
.rv-card-great::before { background: var(--score-great); }
.rv-card-good::before  { background: var(--score-good);  }
.rv-card-mixed::before { background: var(--score-mixed); }
.rv-card-poor::before  { background: var(--score-poor);  }
.rv-card-bad::before   { background: var(--score-bad);   }

.rv-card-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.rv-ring-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    flex-shrink: 0;
}
.rv-ring-wrap svg {
    transform: rotate(-90deg);
}
.rv-ring-num {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.rv-ring-score {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.rv-ring-denom {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}
.rv-verdict {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.rv-verdict-great { color: var(--score-great); }
.rv-verdict-good  { color: var(--score-good);  }
.rv-verdict-mixed { color: var(--score-mixed); }
.rv-verdict-poor  { color: var(--score-poor);  }
.rv-verdict-bad   { color: var(--score-bad);   }

.rv-count {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.rv-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 22ch;
}

/* comparison bars */
.rv-compare {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}
.rv-compare-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}
.rv-bar-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr 2.5rem;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.875rem;
}
.rv-bar-row:last-child { margin-bottom: 0; }
.rv-bar-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: right;
}
.rv-bar-track {
    background: var(--surface-2);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}
.rv-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.rv-bar-val {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* score guide */
.rv-guide {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
}
.rv-guide-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}
.rv-guide-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.625rem;
}
.rv-guide-row:last-child { margin-bottom: 0; }
.rv-guide-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rv-guide-range {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 3rem;
}
.rv-guide-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.rv-guide-active {
    background: var(--bg-elevated);
    border-radius: 6px;
    margin: -0.25rem -0.5rem;
    padding: 0.25rem 0.5rem;
}

/* no scores state */
.rv-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}
.rv-empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.rv-empty-msg  { font-size: 0.9rem; line-height: 1.6; }

@media (max-width: 600px) {
    .rv-hero { grid-template-columns: 1fr; }
    .rv-bar-row { grid-template-columns: 4rem 1fr 2rem; gap: 0.625rem; }
}

/* ============================================================
   HOME PAGE
   ============================================================ */

/* --- Hero ------------------------------------------------- */
/* The home hero: copy and search on the left, the "right now" board on the
   right. The board is the one bold element of the page: three real games with
   their covers, one per thing the catalogue answers (a deal, a release date,
   what people play). Everything below it is the quiet grid the rest of the
   site already uses. */
.gh-hero {
    padding: 4.5rem 2rem 3.5rem;
    text-align: left;
    overflow: visible;      /* the search suggestions drop below the hero */
}

.gh-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 3.5rem;
    align-items: center;
}

.gh-hero-copy { min-width: 0; }

.gh-hero .gn-hero-title {
    font-size: clamp(2.25rem, 4.2vw, 3.4rem);
    max-width: 20ch;
    margin-bottom: 1rem;
}

.gh-hero .gn-hero-subtitle {
    margin: 0 0 1.75rem;
    max-width: 52ch;
}

.gh-hero-search {
    max-width: 560px;
    margin: 0 0 1rem;
}

.gh-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* --- The board -------------------------------------------- */
.gh-board {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
}

.gh-board-title {
    margin: 0 0 0.125rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
}

.gh-tile {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 0.875rem;
    align-items: center;
    padding: 0.75rem 1rem 0.75rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.gh-tile:hover { border-color: var(--border-bright); background: var(--bg-card); }
.gh-tile:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

.gh-tile-cover {
    width: 56px;
    height: 75px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--bg-card);
    flex: none;
}

.gh-tile-cover-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    color: var(--text-muted);
}

.gh-tile-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.gh-tile-kicker { font-size: 0.75rem; color: var(--text-muted); }

.gh-tile-name {
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gh-tile-meta {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gh-tile-big {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-align: right;
}

.gh-tile-deal { color: var(--score-great); }
.gh-tile-rank { color: var(--accent-cyan); }

.gh-tile .rl-date { width: 3.5rem; height: 3.5rem; }
.gh-tile .rl-date-num { font-size: 1.6rem; }

/* The catalogue API did not answer (page answers 503 while prerendering). */
.gn-unavailable { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 50vh; gap: 0.75rem; padding: 2rem 1rem; }
.gn-unavailable h1 { font-family: 'Rajdhani', sans-serif; font-size: 1.5rem; margin: 0; color: var(--text-primary); }
.gn-unavailable p { margin: 0; color: var(--text-muted); max-width: 44ch; }

/* --- Sections --------------------------------------------- */
.gh-section { padding-top: 2.75rem; padding-bottom: 1rem; }
.gh-section:last-of-type { padding-bottom: 4rem; }

.gh-upcoming { margin: 0; }
.gh-browse-platforms { margin-top: 2.5rem; }

/* --- Row (game card grid) --------------------------------- */
.gh-row {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

@media (min-width: 900px) {
    .gh-row {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* --- Genre grid ------------------------------------------- */
.gh-genre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.875rem;
}

.gh-genre-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.125rem 1.25rem;
    min-height: 92px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition);
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.gh-genre-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, var(--accent-glow) 0%, transparent 55%);
    opacity: 0.35;
    transition: opacity var(--transition);
    z-index: -1;
}

.gh-genre-card:hover {
    border-color: var(--border-bright);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.gh-genre-card:hover::before { opacity: 0.9; }

.gh-genre-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.gh-genre-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

/* --- Platform chips --------------------------------------- */
.gh-platform-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.gh-platform-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-bright);
    border-radius: 999px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.8375rem;
    transition: var(--transition);
}

.gh-platform-chip:hover {
    color: var(--text-primary);
    border-color: var(--accent);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.gh-platform-name { font-weight: 500; }

.gh-platform-count {
    color: var(--text-muted);
    font-size: 0.75rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--border-bright);
}

/* --- CTA -------------------------------------------------- */
.gh-cta-section {
    padding-bottom: 5rem;
}

.gh-cta {
    position: relative;
    padding: 3.5rem 2rem;
    border-radius: var(--radius-xl);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--border-bright);
    background: var(--bg-card);
}

.gh-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 0% 0%, rgba(124, 58, 237, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 100% 100%, rgba(6, 182, 212, 0.25) 0%, transparent 60%);
    z-index: -1;
}

.gh-cta-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 0.75rem;
    letter-spacing: -0.01em;
}

.gh-cta-text {
    color: var(--text-secondary);
    font-size: 1rem;
    max-width: 520px;
    margin: 0 auto 1.75rem;
}

/* ============================================================
   INDEX LISTING PAGES — Platforms / Genres / Companies / People
   ============================================================ */

.li-summary {
    margin-bottom: 1.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}

.li-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.875rem;
}

.li-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.125rem 1.25rem;
    min-height: 100px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.li-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, var(--accent-glow) 0%, transparent 55%);
    opacity: 0.3;
    z-index: -1;
    transition: opacity var(--transition);
}

.li-card:hover {
    border-color: var(--border-bright);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.li-card:hover::before { opacity: 0.85; }

.li-card-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin-bottom: 0.375rem;
    display: block;
}

.li-card-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

/* --- Browse pages: groups, tile meta, genre covers, letters ------ */
.li-group { margin-top: 2.5rem; }
.li-group:first-child { margin-top: 0; }
.li-group-head { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1rem; }
.li-group-note { font-size: 0.85rem; color: var(--text-muted); }
.li-card-meta { display: block; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; margin-bottom: 0.45rem; }
.li-tag-trending { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: rgba(6, 182, 212, 0.14); color: var(--accent-cyan); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; }
.li-letters { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: -0.25rem 0 1rem; }
.li-letter { min-width: 2rem; height: 2rem; padding: 0 0.5rem; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.li-letter:hover:not(:disabled) { background: var(--bg-elevated); color: var(--text-primary); }
.li-letter.active { background: var(--accent); color: #fff; }
.li-letter:disabled { opacity: 0.3; cursor: default; }
.li-letter:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.li-pills .gl-pill { text-decoration: none; }
.li-grid-genres { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.li-card-genre { min-height: 150px; justify-content: flex-start; }
.li-genre-covers { display: flex; margin-bottom: 0.9rem; }
.li-genre-covers img { width: 48px; height: 64px; object-fit: cover; border-radius: 5px; border: 2px solid var(--bg-card); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); background: var(--bg-elevated); }
.li-genre-covers img + img { margin-left: -14px; }
.li-card:hover .li-genre-covers img + img { margin-left: -6px; }
.li-genre-covers img { transition: margin var(--transition); }
.li-card-genre .li-card-meta { flex: 1; }

/* --- Trending: platform chips and the top three ------------------ */
.tr-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
.tr-chips .dl-chip { text-decoration: none; }
.tr-top { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tr-top-card { position: relative; display: flex; gap: 1rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--bg-card); border: 1px solid var(--border); color: inherit; text-decoration: none; height: 100%; min-width: 0; transition: border-color var(--transition), transform var(--transition); }
.tr-top-card:hover { border-color: var(--border-bright); transform: translateY(-2px); }
.tr-top-card:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.tr-top-rank { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 1; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.95rem; line-height: 1; padding: 0.25rem 0.45rem; border-radius: 6px; background: var(--accent); color: #fff; }
.tr-top-cover { width: 120px; height: 160px; object-fit: cover; border-radius: 8px; flex: none; background: var(--bg-elevated); }
.tr-top-body { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.tr-top-title { font-family: 'Rajdhani', sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 1.15; color: var(--text-primary); }
.tr-top-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-muted); }
.tr-top-score { position: static; width: auto; height: auto; font-size: 0.78rem; padding: 0.15rem 0.45rem; }
.tr-top-summary { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tr-top-cta { margin-top: auto; font-size: 0.8rem; font-weight: 600; color: var(--accent-cyan); }
@media (max-width: 1000px) { .tr-top { grid-template-columns: 1fr; } .tr-top-summary { -webkit-line-clamp: 2; } }
@media (max-width: 640px) { .tr-top-cover { width: 84px; height: 112px; } }

/* --- Company variant: logo + text ------------------------- */
.li-card-company {
    flex-direction: row;
    align-items: center;
    gap: 0.875rem;
    min-height: 84px;
}

.li-company-logo {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    flex-shrink: 0;
    border: 1px solid var(--border-bright);
    letter-spacing: 0.02em;
}

.li-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.li-card-company .li-card-title {
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Coming Soon state ------------------------------------ */
.li-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 5rem 2rem;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.li-coming-soon::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 60% at 50% 0%, rgba(124, 58, 237, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 100% 100%, rgba(6, 182, 212, 0.15) 0%, transparent 60%);
    z-index: -1;
}

.li-coming-soon-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-bright);
    color: var(--accent-cyan);
    margin-bottom: 0.5rem;
}

.li-coming-soon-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.01em;
}

.li-coming-soon-text {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    max-width: 520px;
    line-height: 1.7;
    margin: 0 0 1rem;
}

.li-coming-soon-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
}

@media (max-width: 720px) {
    .li-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.625rem; }
    .li-coming-soon { padding: 3rem 1.25rem; }
}

/* ============================================================
   RESPONSIVE — HOMEPAGE  (tablet & mobile)
   ============================================================ */

/* Tablet (≤ 900px) */
@media (max-width: 900px) {
    .gn-section { padding: 2.5rem 1.25rem; }
    .gn-container { padding: 1.5rem 1.25rem 2.5rem; }
    .gn-hero    { padding: 3.5rem 1.25rem 3rem; }
    .gh-hero    { padding: 3rem 1.25rem 2.5rem; }
    .gh-hero-inner { grid-template-columns: 1fr; gap: 2rem; }
    .gh-hero .gn-hero-title { max-width: none; }
    .gh-row     { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
    .gh-genre-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .gn-featured-body { padding: 1.5rem; }
    .gn-featured-title { font-size: 1.5rem; }
    .gd-screenshots { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile (≤ 640px) */
@media (max-width: 640px) {
    /* Section spacing */
    .gn-section { padding: 2rem 0.875rem; }
    .gn-container { padding: 1.25rem 1rem 2rem; }

    /* Hero */
    .gn-hero,
    .gh-hero {
        padding: 2.5rem 1rem 2rem;
    }
    .gn-hero-eyebrow { font-size: 0.7rem; }
    .gn-hero-subtitle { font-size: 0.95rem; margin-bottom: 1.5rem; }
    .gh-hero-links .gn-btn { flex: 1 1 calc(50% - 0.5rem); justify-content: center; }
    .gh-tile { gap: 0.75rem; padding: 0.625rem 0.75rem 0.625rem 0.625rem; }
    .gh-tile-big { font-size: 1.6rem; }
    .gh-tile .rl-date { width: 3rem; height: 3rem; }
    .gh-tile .rl-date-num { font-size: 1.35rem; }
    .gh-section { padding-top: 2rem; }
    .gh-section .gn-section-meta { display: none; }   /* the header keeps title and link only */
    .gh-upcoming { display: flex; overflow-x: auto; gap: 0.6rem; padding-bottom: 0.25rem; scrollbar-width: none; }
    .gh-upcoming::-webkit-scrollbar { display: none; }
    .gh-upcoming > li { flex: 0 0 78%; }

    /* Section header */
    .gn-section-header { gap: 0.5rem; margin-bottom: 1.25rem; }
    .gn-section-title  { font-size: 1.25rem; }
    .gn-section-link   { font-size: 0.75rem; }

    /* Row of cards already becomes 2-col via .gn-grid override */
    .gh-row { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

    /* Genre/Platform grids */
    .gh-genre-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.625rem;
    }
    .gh-genre-card { padding: 0.875rem 1rem; min-height: 78px; }
    .gh-genre-name { font-size: 1rem; }

    .gh-platform-grid { gap: 0.5rem; }
    .gh-platform-chip { padding: 0.5rem 0.875rem; font-size: 0.8rem; }

    /* CTA */
    .gh-cta { padding: 2.25rem 1.25rem; border-radius: var(--radius-lg); }
    .gh-cta-section { padding-bottom: 3rem; }
    .gh-cta-text { font-size: 0.9rem; margin-bottom: 1.25rem; }

    /* Touch-friendly search input */
    .gn-search-input {
        padding: 0.75rem 1rem 0.75rem 2.75rem;
        font-size: 16px;   /* prevent iOS zoom on focus */
    }

    /* Listing index pages */
    .li-summary { font-size: 0.78rem; margin-bottom: 1rem; }

    /* Card cover on very narrow screens */
    .gn-card-title { font-size: 0.9rem; }
    .gn-card-meta  { font-size: 0.75rem; }
    .gn-card-body  { padding: 0.625rem; gap: 0.375rem; }
}

/* Small phones (≤ 380px) */
@media (max-width: 380px) {
    .gh-hero-links .gn-btn { flex: 1 1 auto; width: 100%; }
    .gn-hero-title { font-size: clamp(1.9rem, 9vw, 2.5rem); }
    .gh-genre-grid { grid-template-columns: repeat(2, 1fr); }
    .li-grid { grid-template-columns: repeat(2, 1fr); }
}

/* FocusOnNavigate moves focus to the h1 after every navigation; Chrome draws
   its default ring on a programmatically focused heading. Keyboard users never
   tab to a heading, so the ring carries no information there. */
h1:focus,
h1[tabindex]:focus-visible { outline: none; }   /* beats the [tabindex] ring below */

/* Buttons, inputs and selects do not inherit the page font by default. */
button, input, select, textarea { font: inherit; }

/* Keyboard focus, same ring everywhere; mouse clicks do not show it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.gn-card:focus-visible { outline-offset: 0; border-radius: var(--radius-lg); }

/* Prevent any accidental horizontal overflow. `clip` (not `hidden`) keeps
   the root as the scroll container, so position: sticky on the navbar and
   the listing sidebar keeps working. */
html, body { overflow-x: clip; }
img, video, iframe { max-width: 100%; height: auto; }

/* ============================================================
   SEARCH FORM (gs-*) — SiteSearch.razor + wwwroot/js/search.js
   A field with a real Search button, in the header (also the phone
   sheet) and in the home hero. Static HTML: see SiteSearch.razor.
   ============================================================ */

.gs {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    border-radius: 10px;
    transition: box-shadow 0.15s ease;
}

.gs:focus-within { box-shadow: 0 0 0 3px var(--accent-cyan-glow); }

.gs-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-bright);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.gs:focus-within .gs-field { border-color: var(--accent-cyan); background: var(--bg-card); }

.gs-icon {
    position: absolute;
    left: 0.8rem;
    color: var(--text-muted);
    pointer-events: none;
}

.gs-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 0.5rem 0 2.5rem;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.9rem;
    -webkit-appearance: none;
    appearance: none;
}

.gs-input::placeholder { color: var(--text-muted); }
/* The field shows focus (border and glow above); the input's own ring would
   draw a second, smaller box inside it. */
.gs-input:focus-visible { outline: none; }
.gs-input::-webkit-search-cancel-button,
.gs-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* "/" focuses the search; shown only where there is a keyboard and nothing typed. */
.gs-key {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.5rem;
    padding: 0 0.3rem;
    border: 1px solid var(--border-bright);
    border-bottom-width: 2px;
    border-radius: 5px;
    color: var(--text-muted);
    font: 600 0.72rem/1 'Inter', system-ui, sans-serif;
}

.gs-focus .gs-key,
.gs-has-text .gs-key { display: none; }

.gs-clear {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 0.35rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.gs-clear[hidden] { display: none; }
.gs-clear:hover { color: var(--text-primary); background: var(--bg-base); }
.gs-clear:focus-visible { outline: 2px solid var(--accent-cyan); }

.gs-submit {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.95rem;
    border: 0;
    border-radius: 0 10px 10px 0;
    background: var(--accent-cyan);
    color: #031b22;                      /* 7:1 on the cyan */
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.15s ease;
}

.gs-submit:hover { background: #22d3ee; }
.gs-submit:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.gs-back { display: none; }

/* --- Suggestions ------------------------------------------ */
.gs-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 5;
    max-height: min(34rem, 72vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.375rem;
    background: var(--bg-card);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.gs-panel[hidden] { display: none; }
.gs-panel[aria-busy="true"] .gs-row { opacity: 0.55; }
.gs-header .gs-panel { min-width: 24rem; }

.gs-note {
    padding: 1rem 0.875rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.gs-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
}

.gs-row:hover,
.gs-row.active,
.gs-all:hover,
.gs-all.active { background: var(--bg-elevated); }

.gs-row.active,
.gs-all.active { box-shadow: inset 2px 0 0 var(--accent-cyan); }

.gs-cover {
    width: 36px;
    height: 48px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-base);
}

.gs-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.gs-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font: 700 0.75rem 'Rajdhani', sans-serif;
}

.gs-meta { display: flex; flex-direction: column; min-width: 0; }

.gs-title {
    overflow: hidden;
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-sub {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-year {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.gs-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.25rem;
    padding: 0.7rem 0.75rem;
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    color: var(--accent-cyan);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

.gs-all-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gs-all-key {
    flex: none;
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--border-bright);
    border-bottom-width: 2px;
    border-radius: 5px;
    color: var(--text-muted);
    font: 600 0.68rem/1.3 'Inter', system-ui, sans-serif;
}

@media (hover: none) {
    .gs-key,
    .gs-all-key { display: none; }
}

/* --- Home hero: the same form, larger ---------------------- */
.gs-hero { border-radius: 14px; }
.gs-hero .gs-field { border-radius: 14px 0 0 14px; }
.gs-hero .gs-icon { left: 1rem; }
.gs-hero .gs-input { height: 50px; padding-left: 2.9rem; font-size: 1rem; }
.gs-hero .gs-submit { padding: 0 1.3rem; border-radius: 0 14px 14px 0; font-size: 0.95rem; }

/* --- The narrowest phones: the button keeps its icon, drops the word */
@media (max-width: 379.98px) {
    .gs-header .gs-submit { padding: 0 0.8rem; }
    .gs-header .gs-submit-label { display: none; }
}

/* --- Phones: the header form is the sheet ------------------ */
@media (max-width: 760px) {
    .gs-header {
        flex-wrap: wrap;
        align-content: flex-start;
        height: 100%;
        border-radius: 0;
    }
    .gs-header:focus-within { box-shadow: none; }

    .gs-header .gs-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 44px;
        height: 44px;
        margin-right: 0.125rem;
        padding: 0;
        border: 0;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        touch-action: manipulation;
    }

    .gs-header .gs-field { flex: 1 1 0; height: 44px; }
    .gs-header .gs-input { height: 42px; font-size: 16px; }   /* 16px: no zoom on focus in iOS */
    .gs-header .gs-submit { height: 44px; }

    .gs-header .gs-panel {
        position: static;
        flex: 1 1 100%;
        min-width: 0;
        max-height: calc(100vh - 60px);
        max-height: calc(100dvh - 60px);
        margin-top: 0.5rem;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .gs-header .gs-row { padding: 0.55rem 0.5rem; }
    .gs-hero .gs-input { font-size: 16px; }
    .gs-hero .gs-submit { padding: 0 1rem; }
}

/* ============================================================
   DEALS PAGE (dl-*)
   ============================================================ */

.dl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 2rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 60px;
    z-index: 50;
    backdrop-filter: blur(10px);
}

.dl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}
@media (max-width: 640px) {
    .dl-filter-bar { padding: 0.75rem 1rem; gap: 0.6rem; }
    .dl-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.2rem; scrollbar-width: none; flex-basis: 100%; }
    .dl-chips::-webkit-scrollbar { display: none; }
}

.dl-chip {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition);
    white-space: nowrap;
}

.dl-chip:hover {
    color: var(--text-primary);
    border-color: var(--border-bright);
}

.dl-chip-count {
    margin-left: 0.4rem;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
}
.dl-chip.active .dl-chip-count { color: inherit; opacity: 0.8; }

.dl-chip.active {
    background: rgba(124, 58, 237, 0.2);
    border-color: var(--accent);
    color: #c4b5fd;
}

.dl-controls { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.dl-search, .dl-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: inherit;
    padding: 0.4rem 0.75rem;
    height: 2.1rem;
}
/* The deals search: field and Search button joined, like the site search (gs-*). */
.dl-search-box { display: flex; align-items: stretch; margin: 0; padding: 0; }
.dl-search-field { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.dl-search { width: 14rem; padding-right: 2rem; border-right: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.dl-search-go {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    height: 2.1rem;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--accent-cyan);
    color: #031b22;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}
.dl-search-go:hover { background: #22d3ee; }
.dl-search-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 640px) {
    .dl-controls { width: 100%; }
    .dl-search-box { flex: 1 1 100%; }
    .dl-search { flex: 1 1 auto; width: auto; min-width: 0; height: 2.5rem; font-size: 16px; }   /* 16px: no zoom on focus in iOS */
    .dl-search-go { height: 2.5rem; padding: 0 0.9rem; }
    .dl-select { flex: 1 1 0; min-width: 0; }
}
.dl-search-clear { position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; border: 0; border-radius: 50%; background: var(--bg-card); color: var(--text-secondary); font-size: 1rem; line-height: 1; cursor: pointer; }
.dl-search-clear:hover { color: var(--text-primary); background: var(--border-bright); }
.dl-search-clear:focus-visible { outline: 2px solid var(--accent-cyan); }
.dl-inline-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-cyan); cursor: pointer; }
.dl-inline-link:hover { text-decoration: underline; }
.dl-empty-search { min-height: 0; padding: 2rem 1.5rem 1.5rem; }
.dl-search::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.dl-fallback { margin-top: 1.5rem; }
.dl-fallback .gn-section-title { font-size: 1.2rem; }
.dl-fallback-text { margin: 0.35rem 0 1rem; font-size: 0.85rem; color: var(--text-muted); }
.dl-select { cursor: pointer; }
.dl-search:focus-visible, .dl-select:focus-visible { outline: none; border-color: var(--accent-cyan); }

/* Worth it / Every deal, in the hero under the intro. */
.dl-view { display: inline-flex; margin-top: 0.25rem; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.dl-view-opt { padding: 0.35rem 0.9rem; border-radius: 999px; border: 0; background: transparent; font: inherit; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; }
.dl-view-opt.active { background: var(--accent); color: #fff; }
.dl-view-opt:not(.active):hover { color: var(--text-primary); }
.dl-view-opt:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

/* --- Deal card: the game is the card, the store is the button --------- */
.dl-card { display: flex; flex-direction: column; cursor: default; overflow: hidden; }
.dl-card .gn-card-cover { position: relative; }
.dl-cover-link { display: block; }
/* Store banners are landscape: shown whole over a blurred copy of themselves
   instead of cropped to the portrait frame (titles used to lose their first letters). */
.dl-cover-banner { background-color: var(--bg-elevated); background-size: cover; background-position: center; }
.dl-cover-banner::before { content: ""; position: absolute; inset: 0; background: inherit; filter: blur(16px) brightness(0.55); transform: scale(1.2); }
.dl-cover-banner img { position: relative; object-fit: contain; }
.dl-intro { margin-bottom: 1rem; }
.dl-card .gn-card-body { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.dl-title { display: block; color: inherit; text-decoration: none; }
.dl-title:hover { color: var(--accent-cyan); }
.dl-meta { display: flex; gap: 0.6rem; flex-wrap: wrap; min-height: 1.1em; }
.dl-buy {
    margin-top: auto;
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-bright);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.85rem; font-weight: 600;
    text-decoration: none;
}
.dl-buy:hover { border-color: var(--accent); background: rgba(124, 58, 237, 0.15); }
.dl-buy:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.dl-buy-ext { font-size: 0.8em; color: var(--text-muted); }
.dl-card-free .dl-buy { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.5); }
.dl-card-free .dl-discount-badge { background: linear-gradient(135deg, #fde047 0%, #ca8a04 100%); color: #422006; box-shadow: 0 4px 16px rgba(250, 204, 21, 0.35); }
.gn-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dl-discount-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
    color: #052e16;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-md);
    letter-spacing: 0.02em;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
}

.dl-store-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(9, 9, 11, 0.85);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--border-bright);
    backdrop-filter: blur(6px);
}

.dl-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: 'Rajdhani', sans-serif;
}

.dl-price-new {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--score-great);
    letter-spacing: 0.01em;
}

.dl-price-old {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.dl-ending {
    color: var(--score-poor);
    font-size: 0.725rem;
    font-weight: 500;
}

/* --- Empty / error state (centered card) ------------------ */
.dl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 50vh;
    padding: 3.5rem 1.5rem;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.dl-empty::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 60% at 50% 0%,   rgba(124, 58, 237, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 100% 100%, rgba(6,   182, 212, 0.15) 0%, transparent 60%);
    z-index: -1;
}

.dl-empty-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-bright);
    color: var(--accent-cyan);
    margin-bottom: 0.5rem;
}

.dl-empty-icon-warn { color: var(--score-poor); }

.dl-empty-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.01em;
}

.dl-empty-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    max-width: 520px;
    line-height: 1.7;
    margin: 0 0 0.75rem;
}

.dl-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
}

@media (max-width: 640px) {
    .dl-filter-bar { padding: 0.75rem 1rem; gap: 0.75rem; top: 56px; }
    .dl-range { min-width: 0; flex: 1; }
    .dl-chips { gap: 0.3rem; }
    .dl-chip  { font-size: 0.775rem; padding: 0.3rem 0.7rem; }
    .dl-empty { min-height: 40vh; padding: 2.5rem 1.25rem; }
    .dl-empty-icon { width: 68px; height: 68px; }
}


/* ── Game detail: IGDB extras (price card, store links, videos, languages, related rows) ── */
.gd-price-card { border: 1px solid rgba(34,197,94,.35); background: linear-gradient(160deg, rgba(34,197,94,.10), rgba(34,197,94,.02)); }
.gd-price-best { display:flex; align-items:baseline; gap:.5rem; margin:.25rem 0 .35rem; }
.gd-price-now  { font-size:1.6rem; font-weight:700; color:var(--score-great); line-height:1; }
.gd-price-was  { font-size:.8rem; color:var(--text-muted); text-decoration:line-through; }
.gd-price-cut  { font-size:.72rem; font-weight:600; padding:.15rem .45rem; border-radius:999px; background:rgba(34,197,94,.18); color:var(--score-great); }
.gd-price-row  { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.45rem 0; border-top:1px solid var(--border); font-size:.8rem; text-decoration:none; color:var(--text-secondary); }
.gd-price-row:hover { color:var(--text-primary); }
.gd-price-row strong { color:var(--text-primary); font-variant-numeric:tabular-nums; }
/* "Show all N" sits in the tag cloud and looks like a tag, but is a button */
.gd-tags-toggle { font-size:0.72rem; color:var(--accent-cyan); background:transparent; border:1px dashed var(--border-bright); padding:0.2rem 0.55rem; border-radius:4px; cursor:pointer; }
.gd-tags-toggle:hover { color:var(--text-primary); border-color:var(--accent); }

.gd-store-links { display:flex; flex-wrap:wrap; gap:.4rem; }
.gd-store-link  { font-size:.74rem; padding:.3rem .6rem; border-radius:6px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-secondary); text-decoration:none; transition:color .15s, border-color .15s; }
.gd-store-link:hover { color:var(--text-primary); border-color:var(--accent-dim); }
.gd-ttb { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-top:.35rem; }
.gd-ttb-cell { text-align:center; padding:.5rem .25rem; border-radius:6px; background:var(--surface-2); border:1px solid var(--border); }
.gd-ttb-val { font-size:1rem; font-weight:600; color:var(--text-primary); }
.gd-ttb-key { font-size:.66rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-top:.15rem; }
.gd-videos { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gd-video  { position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; cursor:pointer; background:#000; border:1px solid var(--border); }
.gd-video img { width:100%; height:100%; object-fit:cover; opacity:.85; transition:opacity .15s, transform .2s; }
.gd-video:hover img { opacity:1; transform:scale(1.03); }
.gd-video-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.gd-video-play span { width:3.25rem; height:3.25rem; border-radius:50%; background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; }
.gd-video-name { position:absolute; left:0; right:0; bottom:0; padding:.5rem .6rem; font-size:.74rem; color:#fff; background:linear-gradient(transparent, rgba(0,0,0,.75)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* The lightbox content box has pointer-events: none so the backdrop's click-to-
   close shows through; the video frame must take clicks itself or the play
   button is unreachable and the cursor stays the backdrop's magnifier. */
.gd-video-frame { position:relative; width:min(960px, 92vw); aspect-ratio:16/9; background:#000; border-radius:10px; overflow:hidden; pointer-events:auto; cursor:default; }
.gd-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.gd-lang-table { width:100%; border-collapse:collapse; font-size:.76rem; }
.gd-lang-table th { text-align:center; font-weight:500; color:var(--text-muted); font-size:.66rem; text-transform:uppercase; letter-spacing:.04em; padding:.25rem 0; }
.gd-lang-table th:first-child, .gd-lang-table td:first-child { text-align:left; }
.gd-lang-table td { padding:.3rem 0; border-top:1px solid var(--border); color:var(--text-secondary); text-align:center; }
.gd-lang-yes { color:var(--score-great); font-weight:600; }
.gd-lang-no  { color:var(--text-muted); opacity:.5; }
.gd-mp-grid { display:flex; flex-wrap:wrap; gap:.3rem; justify-content:flex-end; }
@media (max-width: 720px) { .gd-videos { grid-template-columns:repeat(2,1fr); } .gd-ttb { grid-template-columns:repeat(3,1fr); } }