/*
Theme Name:  Games-Juegos Arcade
Theme URI:   https://games-juegos.com/
Author:      Games-Juegos
Description: Original dark-arcade theme for Games-Juegos.com — mobile-first game grids, category navigation, secure HTML5 game player, server-rendered templates. Requires the Games-Juegos Core plugin.
Version:     1.0.0
Requires at least: 6.5
Requires PHP: 8.2
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: games-juegos
Tags:        dark, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   1. Design tokens
   ========================================================================= */
:root {
        --gj-bg:            #0a0813;
        --gj-bg-2:          #0e0b19;
        --gj-surface:       #151024;
        --gj-surface-2:     #1b1530;
        --gj-surface-3:     #221a3c;
        --gj-border:        #2a2143;
        --gj-border-strong: #3a2f5c;
        --gj-text:          #f2efff;
        --gj-text-dim:      #a79fc9;
        --gj-text-faint:    #716a97;

        --gj-amber:         #fbbf24;
        --gj-amber-strong:  #f59e0b;
        --gj-amber-soft:    rgba(251, 191, 36, 0.14);
        --gj-fuchsia:       #e879f9;
        --gj-emerald:       #34d399;
        --gj-rose:          #fb7185;

        --gj-radius:        14px;
        --gj-radius-sm:     9px;
        --gj-shadow:        0 10px 30px rgba(0, 0, 0, 0.45);
        --gj-shadow-amber:  0 10px 32px rgba(251, 191, 36, 0.16);
        --gj-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        --gj-shell:         1240px;
        --gj-header-h:      64px;
}

/* =========================================================================
   2. Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
        margin: 0;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        background:
                radial-gradient(1200px 500px at 85% -150px, rgba(232, 121, 249, 0.07), transparent 60%),
                radial-gradient(900px 420px at 0% -120px, rgba(251, 191, 36, 0.06), transparent 60%),
                var(--gj-bg);
        color: var(--gj-text);
        font-family: var(--gj-font);
        font-size: 16px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gj-amber); text-decoration: none; }
a:hover { text-decoration: underline; }

input, button, select, textarea { font: inherit; }

::selection { background: var(--gj-amber); color: #1c1206; }

:focus-visible {
        outline: 2px solid var(--gj-amber);
        outline-offset: 2px;
        border-radius: 4px;
}

.gj-shell {
        width: 100%;
        max-width: var(--gj-shell);
        margin-inline: auto;
        padding-inline: 1rem;
}
@media (min-width: 640px) { .gj-shell { padding-inline: 1.5rem; } }

main.site-main { flex: 1 0 auto; width: 100%; }

/* Screen-reader helpers (WP standard) */
.screen-reader-text {
        border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
        height: 1px; width: 1px; margin: -1px; overflow: hidden;
        padding: 0; position: absolute !important; word-wrap: normal !important;
}
.skip-link:focus {
        clip: auto; clip-path: none; height: auto; width: auto;
        left: 1rem; top: 1rem; z-index: 1000; padding: 0.6rem 1rem;
        background: var(--gj-amber); color: #1c1206; font-weight: 700;
        border-radius: var(--gj-radius-sm);
}

/* Thin dark scrollbars (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gj-bg-2); }
::-webkit-scrollbar-thumb { background: var(--gj-border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--gj-text-faint); }

/* =========================================================================
   3. Header
   ========================================================================= */
.site-header {
        position: sticky;
        top: 0;
        z-index: 60;
        background: rgba(10, 8, 19, 0.86);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--gj-border);
}

.site-header__inner {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-height: var(--gj-header-h);
}

.site-logo {
        display: inline-flex;
        align-items: baseline;
        gap: 0.4rem;
        font-size: 1.22rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: var(--gj-text);
        white-space: nowrap;
        padding: 0.4rem 0;
}
.site-logo:hover { text-decoration: none; }
.site-logo .site-logo__accent { color: var(--gj-amber); }
.site-logo .site-logo__tag {
        font-size: 0.56rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--gj-text-faint);
        border: 1px solid var(--gj-border-strong);
        padding: 0.15rem 0.4rem;
        border-radius: 999px;
        align-self: center;
}

.site-nav { margin-left: 0.5rem; }
.site-nav ul { display: flex; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
        display: inline-block;
        padding: 0.5rem 0.7rem;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        color: var(--gj-text-dim);
        font-weight: 600;
        font-size: 0.93rem;
        border-radius: var(--gj-radius-sm);
        transition: color 120ms ease, background 120ms ease;
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
        color: var(--gj-amber);
        background: var(--gj-amber-soft);
        text-decoration: none;
}

.site-header__search { margin-left: auto; }
.site-header__search form { display: flex; gap: 0.4rem; align-items: center; }
.site-header__search input[type="search"] {
        width: 10.5rem;
        padding: 0.55rem 0.95rem;
        min-height: 44px;
        border-radius: 999px;
        border: 1px solid var(--gj-border-strong);
        background: var(--gj-surface);
        color: var(--gj-text);
        transition: width 160ms ease, border-color 160ms ease;
}
.site-header__search input[type="search"]::placeholder { color: var(--gj-text-faint); }
.site-header__search input[type="search"]:focus {
        border-color: var(--gj-amber);
        outline: none;
}
@media (min-width: 900px) {
        /* Search flexes within the header's remaining space — a fixed 14rem
           input overflowed by 7px at 1280px viewports with full nav. */
        .site-header__search {
                min-width: 0;
                flex: 0 1 auto;
        }
        .site-header__search form { min-width: 0; }
        .site-header__search input[type="search"] { width: min(14rem, 100%); } /* Fits the "Search games…" placeholder without clipping. */
        .site-header__search input[type="search"]:focus { width: min(16rem, 100%); }
}
@media (max-width: 900px) { .site-header__search input[type="search"] { width: 7.5rem; } }

.nav-toggle {
        display: none;
        margin-left: auto;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: var(--gj-radius-sm);
        border: 1px solid var(--gj-border-strong);
        background: var(--gj-surface);
        color: var(--gj-text);
        cursor: pointer;
}

@media (max-width: 767px) {
        .site-header__inner { position: relative; gap: 0.5rem; }
        .nav-toggle { display: inline-flex; margin-left: 0; flex: 0 0 auto; order: 3; }
        .site-nav {
                display: none;
                position: absolute;
                top: 100%;
                left: -1rem;
                right: -1rem;
                background: var(--gj-bg-2);
                border-bottom: 1px solid var(--gj-border);
                box-shadow: var(--gj-shadow);
                padding: 0.5rem 1rem 0.9rem;
                margin: 0;
        }
        .site-nav.is-open { display: block; }
        .site-nav ul { flex-direction: column; gap: 0.2rem; }
        .site-nav a { width: 100%; }
        /* Search flexes to fill the space the logo and toggle leave free —
           the fixed 7.5rem input caused horizontal overflow at 320-375px. */
        .site-header__search {
                margin-left: auto;
                order: 2;
                flex: 1 1 auto;
                min-width: 0;
        }
        .site-header__search form { min-width: 0; }
        .site-header__search input[type="search"] { width: 100%; min-width: 0; }
        .site-logo { flex: 0 1 auto; }
}
@media (max-width: 480px) {
        /* Free ~60px: drop the decorative pill, keep the wordmark. */
        .site-logo .site-logo__tag { display: none; }
}

/* =========================================================================
   4. Buttons, badges, chips
   ========================================================================= */
.gj-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        min-height: 44px;
        padding: 0.55rem 1.15rem;
        border-radius: 999px;
        border: 1px solid transparent;
        font-weight: 700;
        font-size: 0.93rem;
        cursor: pointer;
        transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}
.gj-btn:hover { text-decoration: none; }
.gj-btn--primary { background: linear-gradient(180deg, var(--gj-amber), var(--gj-amber-strong)); color: #1c1206; box-shadow: var(--gj-shadow-amber); }
.gj-btn--primary:hover { transform: translateY(-1px); }
.gj-btn--ghost { background: transparent; color: var(--gj-text-dim); border-color: var(--gj-border-strong); }
.gj-btn--ghost:hover { color: var(--gj-amber); border-color: var(--gj-amber); }

.gj-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.18rem 0.6rem;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 700;
        background: var(--gj-surface-2);
        color: var(--gj-text-dim);
        border: 1px solid var(--gj-border);
        white-space: nowrap;
}
.gj-badge--amber { color: var(--gj-amber); border-color: rgba(251, 191, 36, 0.35); background: var(--gj-amber-soft); }
.gj-badge--emerald { color: var(--gj-emerald); border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.12); }
.gj-badge--fuchsia { color: var(--gj-fuchsia); border-color: rgba(232, 121, 249, 0.35); background: rgba(232, 121, 249, 0.12); }

/* =========================================================================
   5. Section headers + homepage hero
   ========================================================================= */
.gj-section { margin-top: 2.4rem; }
.gj-section__head {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
}
.gj-section__title {
        margin: 0;
        font-size: 1.28rem;
        font-weight: 800;
        letter-spacing: 0.01em;
        display: flex;
        align-items: center;
        gap: 0.6rem;
}
.gj-section__title::before {
        content: "";
        width: 4px;
        height: 1.15em;
        border-radius: 4px;
        background: linear-gradient(180deg, var(--gj-amber), var(--gj-fuchsia));
        flex: none;
}
.gj-section__link {
        margin-left: auto;
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--gj-text-dim);
        display: inline-flex;
        align-items: center;
        min-height: 44px;
}
.gj-section__link:hover { color: var(--gj-amber); }

.gj-hero {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        margin-top: 1.4rem;
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr;
        padding: 1.7rem 1.2rem 1.5rem;
        border: 1px solid var(--gj-border);
        border-radius: var(--gj-radius);
        background:
                radial-gradient(720px 300px at 12% -20%, rgba(251, 191, 36, 0.10), transparent 60%),
                radial-gradient(640px 300px at 88% 0%, rgba(232, 121, 249, 0.08), transparent 60%),
                var(--gj-bg-2);
        box-shadow: var(--gj-shadow);
}
@media (min-width: 900px) {
        .gj-hero { grid-template-columns: 1.7fr 1fr; }
}

/* Visible H1 value proposition above the hero cards (SEO + a11y). */
.gj-hero__heading { grid-column: 1 / -1; }
.gj-hero__heading h1 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.18;
        letter-spacing: 0.01em;
        color: var(--gj-text);
}
@media (min-width: 640px) {
        .gj-hero__heading h1 { font-size: 1.95rem; }
}
.gj-hero__accent { color: var(--gj-amber); }
.gj-hero__heading-sub {
        display: block;
        margin-top: 0.45rem;
        font-size: 0.95rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        color: var(--gj-text-dim);
}
.gj-hero__primary {
        position: relative;
        border-radius: var(--gj-radius);
        overflow: hidden;
        border: 1px solid var(--gj-border-strong);
        background: var(--gj-surface);
        min-height: 260px;
        display: flex;
        align-items: flex-end;
        box-shadow: var(--gj-shadow);
}
.gj-hero__primary img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gj-hero__primary::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(10, 8, 19, 0) 30%, rgba(10, 8, 19, 0.92) 100%);
}
.gj-hero__body { position: relative; z-index: 1; padding: 1.2rem 1.3rem 1.3rem; }
.gj-hero__title { margin: 0.5rem 0 0.3rem; font-size: 1.6rem; font-weight: 800; line-height: 1.15; }
@media (min-width: 640px) { .gj-hero__title { font-size: 2rem; } }
.gj-hero__title a { color: var(--gj-text); }
.gj-hero__title a:hover { color: var(--gj-amber); text-decoration: none; }
.gj-hero__meta { color: var(--gj-text-dim); font-size: 0.92rem; margin: 0 0 0.9rem; }

.gj-hero__side { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .gj-hero__side { grid-template-columns: 1fr 1fr; }
        .gj-hero__side .gj-hero-card:first-child { grid-column: 1 / -1; } }
.gj-hero-card {
        position: relative;
        border-radius: var(--gj-radius-sm);
        overflow: hidden;
        border: 1px solid var(--gj-border);
        background: var(--gj-surface);
        min-height: 130px;
        display: flex;
        align-items: flex-end;
}
.gj-hero-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gj-hero-card::after {
        content: "";
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(10, 8, 19, 0) 20%, rgba(10, 8, 19, 0.9) 100%);
}
.gj-hero-card__title {
        position: relative; z-index: 1;
        padding: 0.6rem 0.85rem 0.7rem;
        margin: 0;
        font-size: 0.97rem;
        font-weight: 700;
}
.gj-hero-card__title a { color: var(--gj-text); }
.gj-hero-card__title a:hover { color: var(--gj-amber); text-decoration: none; }

/* =========================================================================
   6. Game grid + cards
   ========================================================================= */
.gj-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
}
@media (min-width: 640px)  { .gj-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 900px)  { .gj-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1180px) { .gj-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); } }

.gj-card {
        position: relative;
        display: flex;
        flex-direction: column;
        border-radius: var(--gj-radius);
        border: 1px solid var(--gj-border);
        background: var(--gj-surface);
        overflow: hidden;
        transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.gj-card:hover,
.gj-card:focus-within {
        transform: translateY(-3px);
        border-color: rgba(251, 191, 36, 0.55);
        box-shadow: var(--gj-shadow-amber);
}

.gj-card__thumb {
        position: relative;
        aspect-ratio: 16 / 10;
        background: var(--gj-surface-2);
        overflow: hidden;
}
.gj-card__thumb img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform 200ms ease;
}
.gj-card:hover .gj-card__thumb img { transform: scale(1.045); }
.gj-card__thumb--empty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        background:
                radial-gradient(120px 60px at 70% 20%, rgba(232, 121, 249, 0.16), transparent 70%),
                radial-gradient(120px 60px at 20% 80%, rgba(251, 191, 36, 0.14), transparent 70%),
                var(--gj-surface-2);
        color: var(--gj-text-faint);
        font-weight: 800;
        font-size: 1.15rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-align: center;
        padding: 0.4rem;
        word-break: break-word;
}

.gj-card__badges {
        position: absolute;
        top: 0.5rem;
        inset-inline-start: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        z-index: 1;
}
.gj-card__badges .gj-badge { backdrop-filter: blur(4px); background: rgba(21, 16, 36, 0.82); }

.gj-card__body { padding: 0.6rem 0.7rem 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1; }
.gj-card__title {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}
.gj-card__title a { color: var(--gj-text); }
.gj-card__title a:hover { color: var(--gj-amber); text-decoration: none; }
/* Stretched link: the title link's ::after covers the whole card, so the
   tap/click target is the full card (far above the 44px minimum) instead of
   a 17px-tall line of text. The category link re-stacks above it. */
.gj-card__title a::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
}
.gj-card__title a:focus-visible { outline: none; }
.gj-card__title a:focus-visible::after {
        border: 2px solid var(--gj-amber);
        border-radius: var(--gj-radius);
}
.gj-card__meta {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        flex-wrap: wrap;
        margin-top: auto;
        font-size: 0.75rem;
        color: var(--gj-text-faint);
}
.gj-card__meta .gj-card__category {
        position: relative;
        z-index: 2;
        color: var(--gj-fuchsia);
        font-weight: 600;
        padding: 0.25rem 0;
        margin: -0.25rem 0;
}
.gj-card__meta .gj-card__plays { display: inline-flex; align-items: center; gap: 0.25rem; }

.gj-card__rating { display: inline-flex; gap: 0.1rem; color: var(--gj-amber); font-size: 0.78rem; }
.gj-card__rating .is-dim { color: var(--gj-border-strong); }

/* =========================================================================
   7. Category cards (front page)
   ========================================================================= */
.gj-cat-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
}
@media (min-width: 640px)  { .gj-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .gj-cat-grid { grid-template-columns: repeat(4, 1fr); } }

.gj-cat-card {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.9rem 1rem;
        min-height: 74px;
        border-radius: var(--gj-radius);
        border: 1px solid var(--gj-border);
        background: var(--gj-surface);
        transition: transform 140ms ease, border-color 140ms ease;
}
.gj-cat-card:hover { transform: translateY(-2px); border-color: rgba(251, 191, 36, 0.55); }
.gj-cat-card__glyph {
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 1.05rem;
        color: #1c1206;
        text-transform: uppercase;
}
.gj-cat-card__name { margin: 0; font-size: 1rem; font-weight: 700; color: var(--gj-text); }
.gj-cat-card:hover .gj-cat-card__name { color: var(--gj-amber); text-decoration: none; }
.gj-cat-card__count { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--gj-text-faint); }

/* =========================================================================
   8. Game player
   ========================================================================= */
.gj-player {
        position: relative;
        width: 100%;
        background: #000;
        border-radius: var(--gj-radius);
        overflow: hidden;
        border: 1px solid var(--gj-border-strong);
        box-shadow: var(--gj-shadow);
}
.gj-player__frame {
        position: relative;
        aspect-ratio: var(--gj-player-ar, 16 / 9);
        /* Tall/portrait ratios: cap the rendered height by constraining the
           width (ratio preserved). Landscape ratios never hit the cap. */
        max-width: min(100%, calc(82vh * var(--gj-player-ar, 1.78)));
        margin-inline: auto;
}
.gj-player__frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        background: #000;
}
.gj-player.is-portrait { max-width: min(100%, 480px); margin-inline: auto; }

/* Click-to-play gate: keeps bots/crawlers out of play metrics and gives a
   real user intent signal before the iframe loads. */
.gj-player__gate {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.9rem;
        background:
                radial-gradient(400px 200px at 50% 30%, rgba(251, 191, 36, 0.12), transparent 70%),
                var(--gj-bg-2);
        cursor: pointer;
        border: 0;
        width: 100%;
        text-align: center;
        padding: 1rem;
}
.gj-player__gate-btn {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, var(--gj-amber), var(--gj-amber-strong));
        color: #1c1206;
        box-shadow: 0 0 0 10px rgba(251, 191, 36, 0.14), var(--gj-shadow-amber);
        transition: transform 140ms ease, box-shadow 140ms ease;
}
.gj-player__gate:hover .gj-player__gate-btn { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(251, 191, 36, 0.18), var(--gj-shadow-amber); }
.gj-player__gate-icon { width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 15px 0 15px 25px; }
.gj-player__gate-title { color: var(--gj-text); font-weight: 800; font-size: 1.05rem; }
.gj-player__gate-hint { color: var(--gj-text-faint); font-size: 0.82rem; }

.gj-player__loading {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: none;
        align-items: center;
        justify-content: center;
        background: var(--gj-bg-2);
}
.gj-player.is-loading .gj-player__loading { display: flex; }
.gj-player__spinner {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 4px solid var(--gj-border-strong);
        border-top-color: var(--gj-amber);
        animation: gj-spin 0.9s linear infinite;
}
@keyframes gj-spin { to { transform: rotate(360deg); } }

.gj-player__bar {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        flex-wrap: wrap;
        padding: 0.6rem 0.9rem;
        border-top: 1px solid var(--gj-border);
        background: var(--gj-surface);
}
.gj-player__bar-title {
        font-weight: 700;
        font-size: 0.92rem;
        color: var(--gj-text);
        margin-right: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 55%;
}
.gj-player__bar .gj-btn { min-height: 44px; padding: 0.4rem 1rem; font-size: 0.85rem; }

/* Unavailable state (honest, never fake) */
.gj-player__error {
        position: relative;
        aspect-ratio: 16 / 9;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        text-align: center;
        padding: 1.5rem;
        background:
                radial-gradient(300px 150px at 50% 20%, rgba(251, 113, 133, 0.1), transparent 70%),
                var(--gj-bg-2);
}
.gj-player__error h2 { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--gj-rose); }
.gj-player__error p { margin: 0; color: var(--gj-text-dim); font-size: 0.92rem; max-width: 46ch; }

/* =========================================================================
   9. Single game page
   ========================================================================= */
.gj-game-head { margin-top: 1.4rem; }
.gj-game-title { margin: 0.35rem 0 0.5rem; font-size: 1.65rem; font-weight: 800; line-height: 1.15; letter-spacing: 0.005em; }
@media (min-width: 640px) { .gj-game-title { font-size: 2.1rem; } }
.gj-game-meta {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex-wrap: wrap;
        margin: 0 0 1.1rem;
        color: var(--gj-text-dim);
        font-size: 0.9rem;
}
.gj-game-meta .gj-divider { color: var(--gj-border-strong); }

.gj-game-body {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.2rem;
        margin-top: 2rem;
        padding-bottom: 1rem;
}
@media (min-width: 1024px) {
        .gj-game-body { grid-template-columns: minmax(0, 1fr) 320px; }
}

.gj-block {
        border: 1px solid var(--gj-border);
        border-radius: var(--gj-radius);
        background: var(--gj-surface);
        padding: 1.2rem 1.3rem;
        margin-bottom: 1.2rem;
}
.gj-block > h2 {
        margin: 0 0 0.6rem;
        font-size: 1.08rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 0.55rem;
}
.gj-block > h2::before {
        content: "";
        width: 4px; height: 1.05em;
        border-radius: 4px;
        background: linear-gradient(180deg, var(--gj-amber), var(--gj-fuchsia));
        flex: none;
}
.gj-block p { margin: 0 0 0.75rem; color: var(--gj-text-dim); }
.gj-block p:last-child { margin-bottom: 0; }
.gj-block ul, .gj-block ol { margin: 0 0 0.75rem; padding-left: 1.3rem; color: var(--gj-text-dim); }
.gj-block a { color: var(--gj-amber); }
.gj-block--prose > div { color: var(--gj-text-dim); }
.gj-block--prose > div p:last-child { margin-bottom: 0; }

/* Game information table — only known facts are rendered */
.gj-info-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.gj-info-table th,
.gj-info-table td {
        text-align: left;
        padding: 0.55rem 0.1rem;
        border-bottom: 1px solid var(--gj-border);
        vertical-align: top;
}
.gj-info-table tr:last-child th,
.gj-info-table tr:last-child td { border-bottom: 0; }
.gj-info-table th { color: var(--gj-text-faint); font-weight: 600; white-space: nowrap; padding-right: 1rem; }
.gj-info-table td { color: var(--gj-text); font-weight: 600; }

/* Sidebar of the game page */
.gj-game-side .gj-block { position: sticky; top: calc(var(--gj-header-h) + 1rem); }

/* =========================================================================
   10. Breadcrumbs
   ========================================================================= */
.gj-crumbs {
        margin-top: 1.1rem;
        font-size: 0.82rem;
        color: var(--gj-text-faint);
}
.gj-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; }
.gj-crumbs li { display: flex; align-items: center; gap: 0.3rem; }
.gj-crumbs li + li::before { content: "/"; color: var(--gj-border-strong); }
.gj-crumbs a { color: var(--gj-text-dim); }
.gj-crumbs a:hover { color: var(--gj-amber); }
.gj-crumbs [aria-current="page"] { color: var(--gj-text); font-weight: 600; }

/* =========================================================================
   11. Archive / search headers, pagination, empty states
   ========================================================================= */
.gj-archive-head { margin-top: 1.6rem; }
.gj-archive-head h1 { margin: 0.3rem 0 0.4rem; font-size: 1.7rem; font-weight: 800; }
.gj-archive-head .gj-archive-count { color: var(--gj-text-faint); font-size: 0.88rem; margin: 0; }
.gj-archive-desc { color: var(--gj-text-dim); margin: 0.6rem 0 0; max-width: 72ch; }

.gj-pagination { margin: 2rem 0 1rem; }
.gj-pagination ul.page-numbers {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
}
.gj-pagination .page-numbers {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0 0.6rem;
        border-radius: 10px;
        border: 1px solid var(--gj-border-strong);
        background: var(--gj-surface);
        color: var(--gj-text-dim);
        font-weight: 700;
        font-size: 0.9rem;
}
.gj-pagination a.page-numbers:hover { border-color: var(--gj-amber); color: var(--gj-amber); text-decoration: none; }
.gj-pagination .page-numbers.current { background: var(--gj-amber); border-color: var(--gj-amber); color: #1c1206; }

.gj-empty {
        margin: 2.4rem 0;
        padding: 2.2rem 1.4rem;
        text-align: center;
        border: 1px dashed var(--gj-border-strong);
        border-radius: var(--gj-radius);
        color: var(--gj-text-dim);
        background: var(--gj-bg-2);
}
.gj-empty h2 { margin: 0 0 0.4rem; font-weight: 800; color: var(--gj-text); }
.gj-empty p { margin: 0 0 1rem; }
.gj-empty .gj-btn { margin: 0 auto; }

.gj-notice {
        margin-top: 1.8rem;
        padding: 0.9rem 1.1rem;
        border-radius: var(--gj-radius-sm);
        border: 1px solid rgba(251, 191, 36, 0.35);
        background: var(--gj-amber-soft);
        color: var(--gj-text);
        font-size: 0.92rem;
}
.gj-notice a { color: var(--gj-amber); font-weight: 700; }

/* 404 */
.gj-404 { text-align: center; padding: 4rem 1rem 3rem; }
.gj-404__code {
        font-size: 5.4rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.04em;
        background: linear-gradient(120deg, var(--gj-amber), var(--gj-fuchsia), var(--gj-amber));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin: 0;
}
.gj-404 h1 { font-size: 1.4rem; margin: 0.6rem 0 0.3rem; }
.gj-404 p { color: var(--gj-text-dim); margin: 0 0 1.4rem; }

/* =========================================================================
   12. Footer (sticky via flex column body)
   ========================================================================= */
.site-footer {
        margin-top: auto;
        border-top: 1px solid var(--gj-border);
        background: var(--gj-bg-2);
        padding: 2.4rem 0 1.4rem;
        padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
}
.site-footer__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.8rem;
}
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__brand p { color: var(--gj-text-dim); font-size: 0.9rem; margin: 0.6rem 0 0; max-width: 40ch; }
.site-footer h3 {
        margin: 0 0 0.7rem;
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gj-text-faint);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul ul { padding-left: 0.7rem; }
.site-footer li { margin: 0.15rem 0; }
.site-footer a { color: var(--gj-text-dim); font-size: 0.92rem; display: inline-flex; align-items: center; min-height: 32px; }
.site-footer a:hover { color: var(--gj-amber); }
.site-footer__copy {
        margin-top: 2rem;
        padding-top: 1.1rem;
        border-top: 1px solid var(--gj-border);
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.2rem;
        align-items: center;
        justify-content: space-between;
        color: var(--gj-text-faint);
        font-size: 0.8rem;
}

/* =========================================================================
   13. Utilities + motion preferences
   ========================================================================= */
.gj-hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
        }
        .gj-card:hover, .gj-card:focus-within { transform: none; }
}

/* =========================================================================
   14. Ad slots (Phase 2) — labeled reserved real estate, never fake ads.
   The strip wrapper collapses when the plugin outputs nothing (CSS :empty,
   the helper prints no whitespace between the tags on purpose).
   ========================================================================= */
.gj-ad-strip { margin: 1.15rem 0; }
.gj-ad-strip:empty { display: none; margin: 0; }

.gj-ad {
        min-height: 96px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.9rem 1rem;
        border: 1px dashed var(--gj-border-strong);
        border-radius: var(--gj-radius-sm);
        background:
                repeating-linear-gradient(45deg, rgba(167, 159, 201, 0.035) 0 10px, transparent 10px 20px),
                var(--gj-bg-2);
        color: var(--gj-text-faint);
        text-align: center;
}
.gj-ad__label {
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
}
.gj-ad__hint { font-size: 0.75rem; }
.gj-ad--before_game,
.gj-ad--after_game { min-height: 140px; }

/* =========================================================================
   15. Hero artwork (Phase 2) — CSS-only arcade decoration.
   Pixel grid backdrop + drifting glow orbs + a hand-mapped pixel coin
   (box-shadow pixel art). Presentational only: no images, no fake content,
   neutralized by the global reduced-motion rules.
   ========================================================================= */
.gj-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
                linear-gradient(rgba(167, 159, 201, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(167, 159, 201, 0.05) 1px, transparent 1px);
        background-size: 34px 34px;
        -webkit-mask-image: radial-gradient(ellipse 95% 85% at 30% -5%, #000 0%, transparent 78%);
        mask-image: radial-gradient(ellipse 95% 85% at 30% -5%, #000 0%, transparent 78%);
        pointer-events: none;
}

.gj-hero__orb {
        position: absolute;
        border-radius: 999px;
        pointer-events: none;
        z-index: -1;
}
.gj-hero__orb--amber {
        width: 130px;
        height: 130px;
        top: -46px;
        right: 16%;
        background: radial-gradient(circle at 38% 38%, rgba(251, 191, 36, 0.32), rgba(251, 191, 36, 0.05) 68%, transparent);
        animation: gj-orb-drift 11s ease-in-out infinite alternate;
}
.gj-hero__orb--fuchsia {
        width: 180px;
        height: 180px;
        bottom: -70px;
        left: -50px;
        background: radial-gradient(circle at 60% 40%, rgba(232, 121, 249, 0.22), rgba(232, 121, 249, 0.04) 66%, transparent);
        animation: gj-orb-drift 14s ease-in-out infinite alternate-reverse;
}
@keyframes gj-orb-drift {
        from { transform: translate3d(0, 0, 0) scale(1); }
        to   { transform: translate3d(18px, 12px, 0) scale(1.07); }
}

/* Pixel coin — box-shadow pixel art on a 10x10 grid (7px cells). */
.gj-hero__coin {
        --cA: #fbbf24;
        --cD: #b45309;
        --cL: #fde68a;
        position: absolute;
        top: 1.3rem;
        right: 1.6rem;
        width: 7px;
        height: 7px;
        background: transparent;
        pointer-events: none;
        filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.35));
        animation: gj-coin-bob 4.5s ease-in-out infinite;
        z-index: -1;
        box-shadow:
                21px 0 0 0 var(--cD), 28px 0 0 0 var(--cD), 35px 0 0 0 var(--cD), 42px 0 0 0 var(--cD),
                14px 7px 0 0 var(--cD), 21px 7px 0 0 var(--cA), 28px 7px 0 0 var(--cA), 35px 7px 0 0 var(--cA), 42px 7px 0 0 var(--cA), 49px 7px 0 0 var(--cD),
                7px 14px 0 0 var(--cD), 14px 14px 0 0 var(--cA), 21px 14px 0 0 var(--cL), 28px 14px 0 0 var(--cA), 35px 14px 0 0 var(--cA), 42px 14px 0 0 var(--cA), 49px 14px 0 0 var(--cA), 56px 14px 0 0 var(--cD),
                0 21px 0 0 var(--cD), 7px 21px 0 0 var(--cA), 14px 21px 0 0 var(--cA), 21px 21px 0 0 var(--cA), 28px 21px 0 0 var(--cD), 35px 21px 0 0 var(--cD), 42px 21px 0 0 var(--cA), 49px 21px 0 0 var(--cA), 56px 21px 0 0 var(--cA), 63px 21px 0 0 var(--cD),
                0 28px 0 0 var(--cD), 7px 28px 0 0 var(--cA), 14px 28px 0 0 var(--cA), 21px 28px 0 0 var(--cD), 28px 28px 0 0 var(--cA), 35px 28px 0 0 var(--cA), 42px 28px 0 0 var(--cD), 49px 28px 0 0 var(--cA), 56px 28px 0 0 var(--cA), 63px 28px 0 0 var(--cD),
                0 35px 0 0 var(--cD), 7px 35px 0 0 var(--cA), 14px 35px 0 0 var(--cA), 21px 35px 0 0 var(--cD), 28px 35px 0 0 var(--cA), 35px 35px 0 0 var(--cA), 42px 35px 0 0 var(--cD), 49px 35px 0 0 var(--cA), 56px 35px 0 0 var(--cA), 63px 35px 0 0 var(--cD),
                0 42px 0 0 var(--cD), 7px 42px 0 0 var(--cA), 14px 42px 0 0 var(--cA), 21px 42px 0 0 var(--cA), 28px 42px 0 0 var(--cD), 35px 42px 0 0 var(--cD), 42px 42px 0 0 var(--cA), 49px 42px 0 0 var(--cA), 56px 42px 0 0 var(--cA), 63px 42px 0 0 var(--cD),
                7px 49px 0 0 var(--cD), 14px 49px 0 0 var(--cA), 21px 49px 0 0 var(--cA), 28px 49px 0 0 var(--cA), 35px 49px 0 0 var(--cA), 42px 49px 0 0 var(--cA), 49px 49px 0 0 var(--cA), 56px 49px 0 0 var(--cD),
                14px 56px 0 0 var(--cD), 21px 56px 0 0 var(--cA), 28px 56px 0 0 var(--cA), 35px 56px 0 0 var(--cA), 42px 56px 0 0 var(--cA), 49px 56px 0 0 var(--cD),
                21px 63px 0 0 var(--cD), 28px 63px 0 0 var(--cD), 35px 63px 0 0 var(--cD), 42px 63px 0 0 var(--cD);
}
@keyframes gj-coin-bob {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50%      { transform: translateY(-7px) rotate(6deg); }
}
@media (max-width: 640px) {
        .gj-hero__coin { transform: scale(0.72); transform-origin: top right; top: 1rem; right: 1rem; }
}

/* Hero CTA row (always rendered; links only to pages that exist). */
.gj-hero__ctas {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem;
        margin-top: 1.05rem;
}

@media (prefers-reduced-motion: reduce) {
        .gj-hero__orb,
        .gj-hero__coin { animation: none; }
}

/* =========================================================================
   16. Engagement — rating widget, favorites, provider thumbs (Phase 5)
   ========================================================================= */

/* Rate-this-game bar under the player. */
.gj-rate {
        margin-top: 0.9rem;
        padding: 0.75rem 0.95rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.65rem 1.1rem;
        background: var(--gj-surface);
        border: 1px solid var(--gj-border);
        border-radius: var(--gj-radius);
}
.gj-rate__display {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        flex-wrap: wrap;
        min-width: 0;
}
.gj-rate__summary { color: var(--gj-text-dim); font-size: 0.88rem; }
.gj-rate__summary [data-gj-rating-avg] { color: var(--gj-text); font-weight: 700; }

/* Interactive stars (revealed by JS; static display without). */
.gj-rate__stars {
        display: inline-flex;
        gap: 0.15rem;
        padding: 0.2rem 0.35rem;
        border-radius: var(--gj-radius-sm);
        background: var(--gj-surface-2);
        border: 1px solid var(--gj-border);
}
.gj-rate__stars button {
        appearance: none;
        background: none;
        border: 0;
        padding: 0.25rem;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.35rem;
        line-height: 1;
        color: var(--gj-border-strong);
        cursor: pointer;
        border-radius: 6px;
        transition: color 120ms ease, transform 120ms ease;
}
.gj-rate__stars button.is-lit,
.gj-rate__stars button:hover { color: var(--gj-amber); }
.gj-rate__stars button:hover { transform: scale(1.14); }
.gj-rate__stars button:focus-visible {
        outline: 2px solid var(--gj-amber);
        outline-offset: 1px;
}
.gj-rate.is-busy .gj-rate__stars { opacity: 0.6; pointer-events: none; }
.gj-rate__mine { margin: 0; color: var(--gj-text-faint); font-size: 0.82rem; }
.gj-rate__hint { margin: 0.15rem 0 0; color: var(--gj-text-faint); font-size: 0.8rem; }
.gj-rate__error {
        margin: 0;
        flex-basis: 100%;
        color: var(--gj-rose);
        font-size: 0.85rem;
}

/* Favorite toggle in the player bar. */
.gj-fav-btn.is-fav { color: var(--gj-amber); border-color: rgba(251, 191, 36, 0.55); }
.gj-fav-btn.is-fav svg { fill: var(--gj-amber); }

/* Heart overlay on game cards. */
.gj-card__fav {
        position: absolute;
        top: 0.5rem;
        inset-inline-end: 0.5rem;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        appearance: none;
        cursor: pointer;
        color: var(--gj-text);
        background: rgba(21, 16, 36, 0.82);
        border: 1px solid var(--gj-border-strong);
        border-radius: 10px;
        backdrop-filter: blur(4px);
        transition: color 130ms ease, border-color 130ms ease, transform 130ms ease;
}
.gj-card__fav:hover { transform: scale(1.08); color: var(--gj-amber); }
.gj-card__fav:focus-visible { outline: 2px solid var(--gj-amber); outline-offset: 2px; }
.gj-card__fav.is-fav {
        color: var(--gj-amber);
        border-color: rgba(251, 191, 36, 0.65);
        background: rgba(59, 42, 10, 0.88);
}
.gj-card__fav.is-fav svg { fill: var(--gj-amber); }

/* Provider thumbnails: prefer the imported image, degrade to the
   typographic fallback when the provider CDN fails (never a broken img). */
.gj-card__thumb > a + .gj-card__thumb--empty { display: none; }
.gj-card__thumb.gj-thumb-failed > a { display: none; }
.gj-card__thumb.gj-thumb-failed .gj-card__thumb--empty {
        display: flex;
        animation: gj-fav-in 220ms ease;
}

/* Favorites page. */
.gj-favorites { margin-top: 1.4rem; }
.gj-favorites__loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
        padding: 3rem 1rem;
        color: var(--gj-text-dim);
}
.gj-favorites__loading p { margin: 0; font-size: 0.92rem; }
.gj-card--removed { opacity: 0.75; }
.gj-card--removed .gj-card__thumb--empty {
        border: 1px dashed var(--gj-border-strong);
        border-radius: var(--gj-radius-sm);
}
@keyframes gj-fav-in {
        from { opacity: 0; }
        to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
        .gj-rate__stars button,
        .gj-card__fav { transition: none; transform: none; }
        .gj-card__thumb.gj-thumb-failed .gj-card__thumb--empty { animation: none; }
}

/* Mobile refinements. */
@media (max-width: 640px) {
        .gj-rate { padding: 0.65rem 0.75rem; }
        .gj-rate__stars button { min-width: 40px; min-height: 40px; font-size: 1.2rem; }
        .gj-card__fav { width: 34px; height: 34px; }
}


/* =========================================================================
   Player side bars — ads in the letterbox areas beside the game.
   Width self-adapts: clamp( 0 … 200px, free space beside the frame ).
   Hidden until there is guaranteed room; never overlaps the game frame
   (the frame is centered with margin-inline:auto inside this section).
   ========================================================================= */
.gj-player { position: relative; }

.gj-player__side {
        container-type: inline-size;
        display: flex;
        align-items: center;
        position: absolute;
        top: 8px;
        bottom: 74px; /* keep clear of the bottom bar */
        width: clamp(0px, calc((100% - 82vh * var(--gj-player-ar, 1.78)) / 2 - 28px), 200px);
        overflow: hidden;
}

.gj-player__side--left  { left: 0;  justify-content: flex-start; }
.gj-player__side--right { right: 0; justify-content: flex-end; }

/* The ad renders only when its bar is wide enough (>=170px) — never clipped. */
@container (min-width: 170px) {
        .gj-player__side .gj-ad {
                display: flex;
                width: 160px;
                min-height: 600px;
                max-height: 92%;
                gap: 0.4rem;
                padding: 0.8rem 0.6rem;
                text-align: center;
                background: rgba(255, 255, 255, 0.04);
                color: var(--gj-text-dim, #9aa7bd);
                border: 1px dashed rgba(255, 255, 255, 0.12);
                border-radius: 12px;
        }
        .gj-player__side .gj-ad__label { font-size: 0.68rem; letter-spacing: 0.12em; }
        .gj-player__side .gj-ad__hint  { font-size: 0.66rem; }
}

/* Real ad code (iframe/ins) inside the bars fills the slot height. */
@container (min-width: 170px) {
        .gj-player__side .gj-ad iframe,
        .gj-player__side .gj-ad ins { width: 160px !important; }
}


/* =========================================================================
   Side skyscraper ad zones (site-wide). Only on wide desktops — the zones
   live OUTSIDE the 1240px content shell so they can never overlap the game
   or content. Pointer events stay on the ad itself.
   ========================================================================= */
.gj-side-ads {
        display: none;
        pointer-events: none;
        position: fixed;
        inset: 96px 0 auto 0;
        z-index: 40;
}

.gj-side-ad {
        pointer-events: auto;
        position: absolute;
        top: 0;
        width: 160px;
}

.gj-side-ad--left  { left:  calc(50% - 620px - 176px); }
.gj-side-ad--right { right: calc(50% - 620px - 176px); }

.gj-side-ad .gj-ad {
        width: 160px;
        min-height: 600px;
        gap: 0.4rem;
        padding: 0.8rem 0.6rem;
        text-align: center;
}

.gj-side-ad .gj-ad__label { font-size: 0.68rem; letter-spacing: 0.12em; }
.gj-side-ad .gj-ad__hint  { font-size: 0.66rem; }

@media (min-width: 1600px) {
        .gj-side-ads { display: block; }
}

@media (max-width: 1599.98px) {
        .gj-side-ads { display: none !important; }
}