/* ============================================================================
   _game-hero.css — Zone 1: CINEMATIC hero + shared type scale + games hub
   ============================================================================
   The hero is a cinematic stage: the game cover fills the panel as a blurred,
   scrim-darkened backdrop (game-store / streaming style), with the H1 + answer
   overlaid in bold refined type — NOT a boxed thumbnail on a gray card.

   This file also declares the ONE tight, dashboard-density type + spacing scale
   used across every zone (hero, calculator console, result readout, editorial)
   so nothing reads "zoomed in". Custom properties resolve at use-time, so the
   later zone files consume these regardless of stylesheet order.

   Tokens only for themed surfaces (they flip light/dark via theme-vars.css).
   The cinematic scrim + overlaid text sit over photographic cover ART, so they
   use theme-independent black/white keyword mixes — the correct, legible
   treatment in BOTH themes (as on every streaming/store hero).
   ============================================================================ */

.fps-calculator-page {
    /* ---- Type scale (rem base; vw+rem clamps keep zoom a11y) ---------- */
    --fps-fs-eyebrow: 0.6875rem;   /* 11px — micro uppercase labels        */
    --fps-fs-xs:      0.75rem;     /* 12px — meta, captions, freshness      */
    --fps-fs-sm:      0.8125rem;   /* 13px — small labels, chips            */
    --fps-fs-base:    0.875rem;    /* 14px — default body / controls        */
    --fps-fs-md:      0.9375rem;   /* 15px — article body                   */
    --fps-fs-lg:      1.0625rem;   /* 17px — lead / H3                      */
    --fps-fs-h2:      clamp(1.125rem, 0.7vw + 0.95rem, 1.375rem);  /* 18–22 */
    --fps-fs-h1:      clamp(1.5rem, 1.8vw + 1rem, 2.25rem);        /* 24–36 */
    --fps-fs-display: clamp(2.5rem, 5vw + 1.25rem, 4rem);         /* big FPS */

    /* ---- Spacing rhythm (tight) -------------------------------------- */
    --fps-rhythm: clamp(1.25rem, 2.4vw, 1.75rem);  /* between zones        */
    --fps-pad:    clamp(1rem, 2.2vw, 1.5rem);       /* panel padding        */
    --fps-pad-sm: clamp(0.75rem, 1.5vw, 1rem);
    --fps-gap:    clamp(0.75rem, 1.6vw, 1.125rem);  /* inner gaps           */

    /* ---- Console control heights (compact on desktop) ---------------- */
    --fps-control-h: 40px;
    --fps-segment-h: 32px;
}

/* Mobile: bump the console controls back up to comfortable ≥44px tap targets. */
@media (max-width: 640px) {
    .fps-calculator-page {
        --fps-control-h: 44px;
        --fps-segment-h: 40px;
    }
}

.fps-game-hero {
    margin-bottom: 0;
}

/* Keep the site-standard breadcrumb, just tighten its rhythm above the stage. */
.fps-game-hero .breadcrumb {
    margin-bottom: clamp(0.75rem, 1.6vw, 1rem);
    font-size: var(--fps-fs-sm);
}

/* ---------- Cinematic stage ------------------------------------------- */

.fps-game-hero__stage {
    position: relative;
    isolation: isolate;               /* own stacking context for layers  */
    display: flex;
    overflow: hidden;
    min-height: clamp(240px, 30vw, 360px);
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
    /* Depth + a soft brand-tinted bottom bleed so the band melts into the page
       rather than ending on a hard box edge. */
    box-shadow: var(--shadow-md),
                0 28px 52px -28px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

/* Layer 1 — cover as blurred, darkened backdrop fill (LCP element). */
.fps-game-hero__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    transform: scale(1.12);           /* hide blur bleed at the edges      */
    filter: blur(18px) saturate(1.15) brightness(0.82);
    background: var(--bg-tertiary);
}

/* Layer 2 — scrim: dark bottom + darker left for legibility, brand tint.
   Over photographic ART, so black/white keyword mixes are correct in BOTH
   themes (a themed --bg-* would go white in light mode over the photo). */
.fps-game-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to top,
            color-mix(in srgb, black 90%, transparent) 0%,
            color-mix(in srgb, black 55%, transparent) 42%,
            color-mix(in srgb, black 14%, transparent) 100%),
        linear-gradient(to right,
            color-mix(in srgb, black 72%, transparent) 0%,
            color-mix(in srgb, black 18%, transparent) 58%,
            transparent 100%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--brand-primary) 34%, transparent),
            transparent 62%);
}

/* Layer 3 — ambient WebGL particles above the scrim, below the text.
   Transparent + pointer-events:none; empty box when fps-hero-3d.js skips.
   screen blend makes the accent points glow softly over the dark scrim. */
.fps-game-hero__accent {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.7;
}

.fps-game-hero__accent-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Layer 4 — overlaid layout: sharp cover poster (left) + content (right),
   both anchored to the bottom of the cinematic stage. */
.fps-game-hero__layout {
    position: relative;
    z-index: 3;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    gap: clamp(1rem, 2.5vw, 2rem);
    width: 100%;
    padding: clamp(1.25rem, 3.5vw, 2.5rem);
}

/* Sharp cover poster — the crisp, framed cover the client wanted back, sitting
   OVER the blurred atmospheric backdrop. This is the LCP element. */
.fps-game-hero__poster {
    flex-shrink: 0;
    width: clamp(88px, 14vw, 172px);
    align-self: flex-end;
}

.fps-game-hero__poster-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-lg);
    /* Crisp frame over the photographic backdrop → theme-independent white/black
       mixes, correct in BOTH themes. Faint white ring + layered shadow. */
    border: 1px solid color-mix(in srgb, white 22%, transparent);
    box-shadow: 0 18px 40px color-mix(in srgb, black 58%, transparent),
                0 6px 16px color-mix(in srgb, black 42%, transparent),
                inset 0 0 0 1px color-mix(in srgb, white 10%, transparent);
    background: var(--bg-tertiary);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
    .fps-game-hero__poster-img:hover {
        transform: scale(1.02);
    }
}

.fps-game-hero__content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1.4vw, 0.875rem);
    max-width: 60ch;
}

.fps-game-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Glass chips over the cinematic backdrop (theme-independent, always legible).
   The band is always dark imagery, so white-alpha reads correctly in BOTH
   themes; a faint inset top highlight sells the glass. */
.fps-game-hero__meta li {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6875rem;
    background: color-mix(in srgb, white 8%, transparent);
    border: 1px solid color-mix(in srgb, white 14%, transparent);
    border-radius: var(--radius-full);
    font-size: var(--fps-fs-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, white 90%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.fps-game-hero__title {
    font-family: var(--font-display);
    font-size: var(--fps-fs-h1);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: white;
    margin: 0;
    text-shadow: 0 2px 18px color-mix(in srgb, black 55%, transparent);
}

/* Answer sentence — tight lead, always-light over the scrim. */
.fps-game-hero__answer {
    font-size: var(--fps-fs-md);
    line-height: 1.55;
    color: color-mix(in srgb, white 86%, transparent);
    margin: 0;
    max-width: 56ch;
    text-shadow: 0 1px 12px color-mix(in srgb, black 45%, transparent);
    /* Keep the overlay compact; the full copy lives in the editorial below. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Provenance line — small, letter-spaced sans (no monospace), white/60, with
   the dot separators supplied by the template copy. */
.fps-game-hero__freshness {
    font-family: var(--font-display);
    font-size: var(--fps-fs-xs);
    letter-spacing: 0.04em;
    color: color-mix(in srgb, white 60%, transparent);
    margin: 0.125rem 0 0;
}

/* Honour reduced-motion at the CSS layer too (JS already skips; this keeps
   the static gradient/backdrop looking intentional, never an empty canvas). */
@media (prefers-reduced-motion: reduce) {
    .fps-game-hero__accent {
        display: none;
    }

    .fps-game-hero__poster-img {
        transition: none;
    }

    .fps-game-hero__poster-img:hover {
        transform: none;
    }
}

/* ============================================================================
   GAMES HUB — browse-all-games grid (/fps-calculator/games/)
   ============================================================================
   Replaces the calculator UI on the hub route: H1 + intro + a fluid card grid,
   one entry per game. Auto-fill grid needs no media query.
   ============================================================================ */

.fps-games-hub {
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.fps-games-hub__title {
    font-family: var(--font-display);
    font-size: var(--fps-fs-h1);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm);
}

.fps-games-hub__intro {
    font-size: var(--fps-fs-md);
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
    max-width: 62ch;
}

.fps-games-hub__grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.fps-games-hub__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.fps-games-hub__card:hover,
.fps-games-hub__card:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.fps-games-hub__card-image {
    position: relative;
    width: 100%;
}

.fps-games-hub__card-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.fps-games-hub__card-year {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    padding: 0.125rem 0.5rem;
    background: color-mix(in srgb, var(--bg-secondary) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    color: var(--text-primary);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.fps-games-hub__card-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.fps-games-hub__empty {
    color: var(--text-muted);
    font-size: var(--fps-fs-md);
}

@media (prefers-reduced-motion: reduce) {
    .fps-games-hub__card {
        transition: none;
    }
}