/* ============================================================
   CCG CARDS CSS — OMEGA UNIFIED CARD SYSTEM (CANONICAL)
   Phase P38 — THUMBNAIL CONTAINMENT LOCK
   Phase WOW-G3 — CARD BEAUTY PASS (LOCKED)
   W5 — GLOBAL QA POLISH (SAFE)
   W7.7 — BROWSE INDEX FINAL QA LOCK
   ------------------------------------------------------------
   • Preserves ALL thumbnail isolation contracts
   • Zero JS impact
   • Zero layout bleed between pages
   • Browse Index fully locked (thumb + typography)
============================================================ */


.ccg-card,
.game-card,
.composer-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 10px;
}

.ccg-card:hover,
.game-card:hover,
.composer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

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

.ccg-card img,
.game-card img,
.composer-card img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ============================================================
   SHARED CARD BASE (STRUCTURE + SURFACE)
============================================================ */

.ccg-game-card,
.ccg-card,
.ccg-genre-tile,
.ccg-feature-card {
    position: relative;
    z-index: 0;
    isolation: isolate;

    background:
        radial-gradient(
            120% 80% at 50% -10%,
            rgba(var(--ccg-neon-blue-rgb), 0.18),
            rgba(12, 14, 30, 0.92) 55%,
            rgba(0, 0, 0, 0.98)
        );

    border-radius: var(--ccg-panel-radius);
    border: 1px solid var(--ccg-panel-border);
    overflow: hidden;

    /* 🔒 CONTAINMENT SEAL */
    contain: layout paint;

    box-shadow:
        var(--ccg-depth-card),
        0 0 18px rgba(var(--ccg-neon-blue-rgb),0.18),
        0 0 30px rgba(var(--ccg-neon-purple-rgb),0.12),
        inset 0 0 0 1px rgba(255,255,255,0.05);

    transition:
        transform var(--ccg-hover-duration) var(--ccg-ease-out-lux),
        box-shadow var(--ccg-hover-duration) var(--ccg-ease-out-lux),
        border-color var(--ccg-hover-duration) var(--ccg-ease-out-lux),
        filter var(--ccg-hover-duration) var(--ccg-ease-out-lux);
}


/* ------------------------------------------------------------
   CARD SURFACE DEPTH (GLASS + CRT DISCIPLINE)
------------------------------------------------------------ */

.ccg-game-card::before,
.ccg-card::before,
.ccg-genre-tile::before,
.ccg-feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(
            120% 90% at 50% 0%,
            rgba(255,255,255,0.08),
            transparent 55%
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 2px,
            rgba(255,255,255,0.02) 3px
        );

    opacity: 0.6;
}


/* ------------------------------------------------------------
   CARD EDGE VIGNETTE
------------------------------------------------------------ */

.ccg-game-card::after,
.ccg-card::after,
.ccg-genre-tile::after,
.ccg-feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background:
        radial-gradient(
            120% 90% at 50% 50%,
            transparent 55%,
            rgba(0,0,0,0.55) 100%
        );
}

.ccg-game-card > *,
.ccg-card > *,
.ccg-genre-tile > *,
.ccg-feature-card > * {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------
   Thumbnail Layout Stability (global)
------------------------------------------------------------ */

.ccg-game-card__thumb,
.ccg-card__thumb,
.ccg-feature-card__thumb {
    aspect-ratio: 16 / 9;
    display: block;
    width: 100%;
}

.ccg-game-card__thumb img,
.ccg-card__thumb img,
.ccg-feature-card__thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* ============================================================
   HOVER / FOCUS — CINEMATIC LIFT (W5 TUNED)
============================================================ */

.ccg-game-card:hover,
.ccg-card:hover,
.ccg-genre-tile:hover,
.ccg-feature-card:hover,
.ccg-game-card:focus-within,
.ccg-card:focus-within,
.ccg-genre-tile:focus-within,
.ccg-feature-card:focus-within {
    transform: translateY(-2px) scale(1.008);
    filter: brightness(1.03);

    box-shadow:
        var(--ccg-depth-card-hover);

    border-color: var(--ccg-panel-border-strong);
    will-change: transform, box-shadow;
}

.ccg-feature-card {
    box-shadow:
        var(--ccg-depth-featured),
        inset 0 0 0 1px rgba(255,255,255,0.04);
}

@media (hover: hover) and (pointer: fine) {
    .ccg-game-card:hover,
    .ccg-card:hover,
    .ccg-genre-tile:hover,
    .ccg-feature-card:hover,
    .ccg-game-card:focus-within,
    .ccg-card:focus-within,
    .ccg-genre-tile:focus-within,
    .ccg-feature-card:focus-within {
        transform: translate3d(1px, -2px, 0) scale(1.008);
        box-shadow:
            var(--ccg-depth-card-hover),
            0 0 22px rgba(var(--ccg-neon-blue-rgb),0.24),
            0 0 36px rgba(var(--ccg-neon-purple-rgb),0.16);
    }
}

body[data-ccg-mode="c64"] .ccg-game-card:hover,
body[data-ccg-mode="c64"] .ccg-card:hover,
body[data-ccg-mode="c64"] .ccg-genre-tile:hover,
body[data-ccg-mode="c64"] .ccg-feature-card:hover,
body[data-ccg-mode="c64"] .ccg-game-card:focus-within,
body[data-ccg-mode="c64"] .ccg-card:focus-within,
body[data-ccg-mode="c64"] .ccg-genre-tile:focus-within,
body[data-ccg-mode="c64"] .ccg-feature-card:focus-within {
    box-shadow:
        0 16px 38px rgba(0,0,0,0.88),
        0 0 22px rgba(0,170,255,0.26);
    border-color: rgba(0,170,255,0.32);
}

body[data-ccg-mode="amiga"] .ccg-game-card:hover,
body[data-ccg-mode="amiga"] .ccg-card:hover,
body[data-ccg-mode="amiga"] .ccg-genre-tile:hover,
body[data-ccg-mode="amiga"] .ccg-feature-card:hover,
body[data-ccg-mode="amiga"] .ccg-game-card:focus-within,
body[data-ccg-mode="amiga"] .ccg-card:focus-within,
body[data-ccg-mode="amiga"] .ccg-genre-tile:focus-within,
body[data-ccg-mode="amiga"] .ccg-feature-card:focus-within {
    box-shadow:
        0 14px 32px rgba(0,0,0,0.86),
        0 0 10px rgba(148,170,200,0.18);
    border-color: rgba(148,170,200,0.34);
}


/* ============================================================
   KEYBOARD FOCUS VISIBILITY (W5)
============================================================ */

.ccg-game-card:focus-visible,
.ccg-card:focus-visible,
.ccg-genre-tile:focus-visible,
.ccg-feature-card:focus-visible {
    outline: none;

    box-shadow:
        inset 0 0 0 2px rgba(var(--accent-rgb), 0.45),
        0 12px 30px rgba(0,0,0,0.80);
}


/* ============================================================
   MODE-AWARE GLOW BALANCE (FEATURED ONLY)
============================================================ */

body[data-ccg-mode="c64"] .ccg-feature-card:hover {
    box-shadow:
        0 22px 48px rgba(0,0,0,0.90),
        0 0 36px rgba(0,170,255,0.34);
}

body[data-ccg-mode="amiga"] .ccg-feature-card:hover {
    box-shadow:
        0 20px 44px rgba(0,0,0,0.9),
        0 0 14px rgba(148,170,200,0.22);
}


/* ============================================================
   MOBILE TAP FEEDBACK (NO FLOAT)
============================================================ */

@media (max-width: 768px) {
    .ccg-game-card:hover,
    .ccg-card:hover,
    .ccg-genre-tile:hover,
    .ccg-feature-card:hover {
        transform: none;
        filter: none;
    }

    .ccg-game-card:active,
    .ccg-card:active,
    .ccg-genre-tile:active,
    .ccg-feature-card:active {
        transform: scale(0.985);

        box-shadow:
            0 12px 26px rgba(0,0,0,0.86),
            0 0 24px rgba(var(--accent-rgb), 0.32);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccg-game-card:hover,
    .ccg-card:hover,
    .ccg-genre-tile:hover,
    .ccg-feature-card:hover,
    .ccg-game-card:focus-within,
    .ccg-card:focus-within,
    .ccg-genre-tile:focus-within,
    .ccg-feature-card:focus-within {
        transform: none;
        filter: contrast(1.02) brightness(1.01);
    }

    .ccg-page--games-index .ccg-game-card__btn:hover,
    .ccg-page--games-index .ccg-game-card__btn:focus-visible {
        transform: none;
    }
}


/* ============================================================
   MASTER THUMBNAIL CONTRACT — GLOBAL (UNTOUCHED)
============================================================ */

.ccg-card img,
.ccg-game-card img,
.ccg-genre-tile img,
.ccg-feature-card img {
    display: block;
    width: 100%;
    height: auto;
}


/* ============================================================
   GENRES INDEX (STATIC TILES — SAFE)
============================================================ */

.ccg-page--genres-index .ccg-genre-grid .ccg-card.ccg-genre-card {
    max-width: 360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.ccg-page--genres-index
.ccg-genre-grid
.ccg-card.ccg-genre-card > img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center;
    background: rgba(0,0,0,0.35);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 8px 18px rgba(0,0,0,0.55);
}

.ccg-page--genres-index
.ccg-genre-grid
.ccg-card.ccg-genre-card > span {
    padding: 12px 14px 14px;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================
   COLLECTIONS INDEX (DYNAMIC CARDS — SAFE)
============================================================ */

.ccg-page--collections-index .ccg-card {
    max-width: 360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.ccg-page--collections-index .ccg-card .ccg-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(0,0,0,0.4);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        inset 0 0 16px rgba(0,0,0,0.45);
}

.ccg-page--collections-index .ccg-card .ccg-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}


/* ============================================================
   W7.7 — BROWSE INDEX FINAL QA LOCK (THUMB + TYPOGRAPHY)
   Scope: .ccg-page--games-index ONLY
============================================================ */

.ccg-page--games-index a.ccg-game-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    width: 100%;
    max-width: 360px;
    margin: 0 auto;

    text-decoration: none !important;
    color: inherit !important;
}

.ccg-page--games-index a.ccg-game-card *,
.ccg-page--games-index a.ccg-game-card:link,
.ccg-page--games-index a.ccg-game-card:visited,
.ccg-page--games-index a.ccg-game-card:hover,
.ccg-page--games-index a.ccg-game-card:active {
    text-decoration: none !important;
    color: inherit !important;
}

.ccg-page--games-index .ccg-game-card__thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    max-height: 200px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.35);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        inset 0 0 18px rgba(0,0,0,0.5);
}

.ccg-page--games-index .ccg-game-card__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ccg-page--games-index .ccg-game-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.game-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    flex: 1;
    grid-column: 1 / -1;
}

.ccg-game-card__title,
.ccg-game-card__meta {
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.ccg-page--games-index .ccg-game-card__title {
    margin: 0 0 6px;

    font-family: var(--ccg-font-main);
    font-size: 0.92rem;
    letter-spacing: 0.12em;
    line-height: 1.3;

    color: rgba(255,255,255,0.92) !important;

    text-shadow:
        0 0 16px rgba(var(--accent-rgb),0.55),
        0 14px 34px rgba(0,0,0,0.90);
}

.ccg-page--games-index .ccg-game-card__meta {
    font-family: var(--ccg-font-body);
    font-size: 0.84rem;
    letter-spacing: 0.06em;
    color: rgba(232,236,255,0.72) !important;
    line-height: 1.35;
}

.ccg-page--games-index .ccg-game-card__actions {
    width: 100%;
    display: flex;
    justify-content: center;
}

.ccg-page--games-index .ccg-game-card__btn {
    width: 100%;
    max-width: 180px;
    padding: 12px 18px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(var(--accent-rgb),0.95), rgba(255,255,255,0.14));
    border-color: rgba(var(--accent-rgb), 0.85);
    box-shadow:
        0 12px 26px rgba(0,0,0,0.85),
        0 0 28px rgba(var(--accent-rgb),0.55),
        inset 0 1px 0 rgba(255,255,255,0.25);
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
    transition:
        transform var(--ccg-hover-duration) var(--ccg-ease-out-lux),
        box-shadow var(--ccg-hover-duration) var(--ccg-ease-out-lux),
        filter var(--ccg-hover-duration) var(--ccg-ease-out-lux);
}

.ccg-page--games-index .ccg-game-card__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.35), rgba(255,255,255,0));
    opacity: 0.75;
    transition: transform var(--ccg-hover-duration) var(--ccg-ease-out-lux),
        opacity var(--ccg-hover-duration) var(--ccg-ease-out-lux);
    transform: translateX(-8%);
}

.ccg-page--games-index .ccg-game-card__btn:hover,
.ccg-page--games-index .ccg-game-card__btn:focus-visible {
    transform: translateY(-1px);
    box-shadow:
        0 16px 34px rgba(0,0,0,0.9),
        0 0 38px rgba(var(--accent-rgb),0.7),
        inset 0 1px 0 rgba(255,255,255,0.35);
}

.ccg-page--games-index .ccg-game-card__btn:hover::after,
.ccg-page--games-index .ccg-game-card__btn:focus-visible::after {
    opacity: 1;
    transform: translateX(6%);
}

@media (max-width: 768px) {
    .ccg-page--games-index .ccg-game-card__thumb {
        max-height: 180px;
    }
}

/* ============================================================
   Mobile Visual Reliability Safeguard
   • Mobile only
   • Prevents View Game buttons from being hidden or clipped
============================================================ */

@media (max-width: 640px) {
    .ccg-page--games-index .ccg-game-card__actions {
        position: relative;
        z-index: 4;
        overflow: visible;
        flex-shrink: 0;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .ccg-page--games-index .ccg-game-card__btn {
        position: relative;
        z-index: 5;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateZ(0);
        flex-shrink: 0;
    }
}


/* ============================================================
   W9 — SINGLE GAME RELATED CARDS (WOW-ONLY, SCOPED)
   Scope: .ccg-page--single-game ONLY
============================================================ */

.ccg-page--single-game .related-carousel .ccg-game-card {
    box-shadow:
        0 14px 36px rgba(0,0,0,0.82),
        inset 0 0 0 1px rgba(255,255,255,0.06);
    min-width: 260px;
    scroll-snap-align: start;
    contain: paint;
}

.ccg-page--single-game .related-carousel .ccg-game-card__thumb--related {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(0,0,0,0.35);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        inset 0 0 16px rgba(0,0,0,0.45);
}

.ccg-page--single-game .related-carousel .ccg-game-card__thumb--related img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ccg-page--single-game .related-carousel .ccg-game-card:hover {
    transform: translateY(-2px) scale(1.01);

    box-shadow:
        0 18px 44px rgba(0,0,0,0.9),
        0 0 22px rgba(var(--accent-rgb), 0.26);

    border-color: rgba(var(--accent-rgb), 0.32);
}

.ccg-page--single-game .related-carousel .ccg-game-card::before {
    opacity: 0.68;
}

.ccg-page--single-game .related-carousel .ccg-game-card::after {
    opacity: 0.72;
}

/* ------------------------------------------------------------
   Phase 5 — RELATED GAMES THUMBNAIL NORMALISATION (SCOPED)
------------------------------------------------------------ */

.ccg-page--single-game .related-carousel .related-card {
    overflow: hidden;
    contain: paint;
}

.ccg-page--single-game .related-carousel .related-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 180px;
    object-fit: cover;
    object-position: center;
    display: block;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 8px 18px rgba(0,0,0,0.55);
}

/* ------------------------------------------------------------
   Phase 4B — RELATED CAROUSEL UNIFORMITY LOCK (SCOPED)
------------------------------------------------------------ */

.ccg-page--single-game .related-carousel {
    --related-card-height: 236px;
    --related-thumb-height: 140px;
    --related-title-line-height: 1.25;
    contain: none;
}

.ccg-page--single-game .related-carousel .related-carousel__viewport {
    min-height: calc(var(--related-card-height) + 18px);
    contain: none;
}

.ccg-page--single-game .related-carousel .related-carousel__track {
    align-items: stretch;
    min-height: calc(var(--related-card-height) + 14px);
    contain: none;
}

.ccg-page--single-game .related-carousel .related-card {
    height: var(--related-card-height);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
}

.ccg-page--single-game .related-carousel .related-card img {
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    background: rgba(0,0,0,0.45);
}

.ccg-page--single-game .related-carousel .related-card span {
    line-height: var(--related-title-line-height);
    height: calc(var(--related-title-line-height) * 2em);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (max-width: 720px) {
    .ccg-page--single-game .related-carousel {
        --related-card-height: 200px;
    }

    .ccg-page--single-game .related-carousel .related-carousel__viewport,
    .ccg-page--single-game .related-carousel .related-carousel__track {
        min-height: auto;
    }

    .ccg-page--single-game .related-carousel .related-carousel__track {
        align-items: flex-start;
    }

    .ccg-page--single-game .related-carousel .related-card {
        justify-content: center;
        padding: 10px;
        height: auto;
    }

    .ccg-page--single-game .related-carousel .related-card img {
        align-self: center;
    }

    .ccg-page--single-game .related-carousel .related-card span {
        height: auto;
        display: block;
        overflow: visible;
        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
        white-space: normal;
    }
}