/* =========================================
   NERDZAP FREE GAMES - /free-games/ page, sidebar widget and article card
   ========================================= */

.fg-stats { margin: 0 0 25px 0; }
.fg-live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #4ade80; margin-right: 6px; vertical-align: middle;
    animation: fgPulse 1.8s ease-out infinite;
}
@keyframes fgPulse {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
    100% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
}

/* Filters */
.fg-filters { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; justify-content: space-between; padding: 18px 20px; }
.fg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-chip {
    appearance: none; font-family: inherit; cursor: pointer;
    padding: 7px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
    background: rgba(255, 255, 255, 0.05); color: #cbd5e1; border: 1px solid var(--border-color);
}
.fg-chip:hover { border-color: var(--accent-primary); }
.fg-chip.active { background: rgba(249, 115, 22, 0.12); color: var(--accent-primary); border-color: var(--accent-primary); }
.fg-deck-toggle { font-size: 0.9rem; }

/* Section headings */
.fg-heading { color: white; font-size: 1.5rem; margin: 10px 0 15px 0; }
.fg-empty { margin: 0 0 30px 0; }

/* Card grid */
.fg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-bottom: 35px; }
.fg-card {
    display: flex; flex-direction: column; min-width: 0;
    background: rgba(15, 23, 42, 0.6); border: 2px solid var(--border-color); border-radius: 12px;
    overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: border-color 0.2s, transform 0.2s;
}
.fg-card:hover { border-color: var(--accent-primary); transform: translateY(-2px); }
.fg-card[hidden] { display: none !important; }
.fg-img { position: relative; display: block; aspect-ratio: 16 / 9; background: #0b1220; overflow: hidden; }
.fg-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.fg-card:hover .fg-img img { transform: scale(1.04); }
.fg-store, .fg-tag {
    position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 6px;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
    background: rgba(0, 0, 0, 0.75); color: white; backdrop-filter: blur(4px);
}
.fg-tag { left: auto; right: 10px; background: rgba(234, 179, 8, 0.9); color: #000; }
.fg-store-epic { background: rgba(32, 32, 32, 0.9); }
.fg-store-steam { background: rgba(23, 26, 33, 0.92); color: #66c0f4; }
.fg-store-gog { background: rgba(134, 50, 142, 0.92); }
.fg-store-prime { background: rgba(0, 168, 225, 0.92); }

.fg-body { display: flex; flex-direction: column; gap: 10px; padding: 15px 16px 16px; flex: 1; }
.fg-title { color: white; font-size: 1.1rem; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.fg-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; font-size: 0.85rem; }
.fg-price s { color: var(--text-muted); }
.fg-price strong { color: #4ade80; font-size: 0.95rem; }
.fg-time { color: #fbbf24; font-weight: 700; font-variant-numeric: tabular-nums; }
.fg-time[data-status="upcoming"] { color: #93c5fd; }

.fg-compats { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-compat {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px;
    font-size: 0.74rem; line-height: 1.4; color: #e2e8f0; text-decoration: none;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap;
}
.fg-compat strong { font-weight: 800; }
.fg-compat-label { color: var(--text-muted); }
.fg-compat-verified { border-color: rgba(74, 222, 128, 0.35); }
.fg-compat-verified strong { color: #4ade80; }
.fg-compat-playable { border-color: rgba(250, 204, 21, 0.35); }
.fg-compat-playable strong { color: #facc15; }
.fg-compat-unsupported { border-color: rgba(248, 113, 113, 0.35); }
.fg-compat-unsupported strong { color: #f87171; }
.fg-compat-unknown strong { color: #94a3b8; }
.fg-pdb:hover { border-color: var(--accent-primary); }
.fg-pdb-platinum strong { color: #b4c7dc; }
.fg-pdb-gold strong { color: #cfb53b; }
.fg-pdb-silver strong { color: #a6a6a6; }
.fg-pdb-bronze strong { color: #cd7f32; }
.fg-pdb-borked strong { color: #f87171; }
.fg-pdb-native strong { color: #4ade80; }
.fg-nocompat { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
/* Short blurb for games with no Steam data (from GamerPower), cut to 3 lines */
.fg-desc {
    margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--text-muted);
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.fg-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: auto; }
.fg-actions .tl-btn { width: auto; }
.fg-link { color: var(--accent-primary); font-size: 0.85rem; font-weight: 700; text-decoration: none; }
.fg-link:hover { text-decoration: underline; }
.fg-hint { font-size: 0.8rem; color: #93c5fd; text-decoration: none; }
.fg-hint:hover { text-decoration: underline; }

/* Compact grid for the long tail of small giveaways */
.fg-grid-compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.fg-grid-compact .fg-title { font-size: 0.95rem; }
.fg-grid-compact .fg-body { padding: 12px 13px 13px; gap: 8px; }

.fg-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: #cbd5e1; font-size: 0.92rem; }
.fg-legend .fg-compat { margin-right: 8px; }

@media (max-width: 650px) {
    .fg-grid, .fg-grid-compact { grid-template-columns: 1fr; }
    .fg-filters { padding: 15px; }
}

/* ---------- Sidebar widget (desktop sidebar on articles + landing pages) ---------- */
.fg-widget .sidebar-widget-title { display: flex; align-items: center; gap: 8px; }
.fg-widget-list { display: flex; flex-direction: column; gap: 12px; }
.fg-widget-item { display: flex; gap: 10px; text-decoration: none; align-items: center; }
.fg-widget-item[hidden] { display: none; }
.fg-widget-thumb { width: 80px; height: 45px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: #0b1220; }
.fg-widget-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-widget-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fg-widget-title { font-size: 0.85rem; line-height: 1.3; color: #e2e8f0; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fg-widget-item:hover .fg-widget-title { color: var(--accent-primary); }
.fg-widget-sub { font-size: 0.72rem; color: var(--text-muted); }
.fg-widget-sub .fg-time { font-weight: 700; }
.fg-widget-all { display: block; margin-top: 14px; font-size: 0.8rem; font-weight: 800; color: var(--accent-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; }
.fg-widget-all:hover { text-decoration: underline; }

/* ---------- Inline article card ---------- */
.fg-inline {
    margin: 30px 0; padding: 18px 20px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.08), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(74, 222, 128, 0.3);
}
.fg-inline-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fg-inline-title { color: white; font-weight: 800; font-size: 1.05rem; }
.fg-inline-all { color: var(--accent-primary); font-weight: 800; font-size: 0.85rem; text-decoration: none; }
.fg-inline-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.fg-inline-item { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.fg-inline-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; display: block; background: #0b1220; margin: 0 !important; }
.fg-inline-name { color: #e2e8f0; font-weight: 700; font-size: 0.88rem; line-height: 1.3; }
.fg-inline-sub { color: var(--text-muted); font-size: 0.75rem; }

/* Prime Gaming / Luna */
.fg-store-prime { background: rgba(0, 168, 225, 0.92); }
.fg-trial {
    display: block; font-size: 0.82rem; font-weight: 700; text-decoration: none;
    color: #fbbf24; padding: 8px 10px; border-radius: 8px;
    background: rgba(251, 191, 36, 0.08); border: 1px dashed rgba(251, 191, 36, 0.4);
}
.fg-trial:hover { background: rgba(251, 191, 36, 0.15); }
.fg-disclosure { font-size: 0.78rem; margin: -20px 0 35px 0; }

/* Store tags: colour-coded so each store is recognisable at a glance */
.fg-store { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.15); }
.fg-store-epic { background: #f5f5f5; color: #111; }
.fg-store-steam { background: #1b2838; color: #66c0f4; border-color: #66c0f4; }
.fg-store-gog { background: #86328a; color: #fff; }
.fg-store-prime { background: #00a8e1; color: #fff; }
.fg-store-itch { background: #fa5c5c; color: #fff; }
.fg-store-indiegala { background: #d61f2c; color: #fff; }
.fg-store-stove { background: #ff6b00; color: #fff; }
.fg-store-ubisoft { background: #0070ff; color: #fff; }
.fg-store-ea { background: #ff4747; color: #fff; }
.fg-store-xbox { background: #107c10; color: #fff; }
.fg-store-battlenet { background: #148eff; color: #fff; }
.fg-store-other { background: #475569; color: #fff; }

/* "Coming soon" cards sit in the main grid, greyed out */
.fg-card-soon { opacity: 0.6; border-style: dashed; }
.fg-card-soon:hover { opacity: 0.9; }
.fg-card-soon .fg-img img { filter: grayscale(0.85); }
.fg-tag-soon { background: rgba(147, 197, 253, 0.95); color: #0b1220; }

/* Steam user review score */
.fg-reviews { font-size: 0.82rem; font-weight: 800; color: #e2e8f0; }
.fg-reviews span { font-weight: 600; color: var(--text-muted); }

/* Hero summary line and Prime trial link */
.fg-summary { font-size: 0.98rem; color: #cbd5e1; max-width: 680px; margin: 0 auto 10px auto; line-height: 1.6; }
.fg-summary strong { color: white; }
.fg-inline-trial { color: #fbbf24; font-weight: 800; }

/* Store / Steam Deck sub-page navigation */
.fg-hubnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 25px 0; }
a.fg-chip { text-decoration: none; display: inline-block; }

/* Compact top of /free-games/: games visible on first load */
.fg-hero { padding: 10px 20px 14px !important; text-align: center; }
.fg-badge { display: inline-block; margin-bottom: 10px; }
.fg-h1 { font-size: 2.7rem !important; letter-spacing: -1.5px; margin: 0 0 8px 0 !important; line-height: 1.1; }
.fg-lede { font-size: 1.05rem; color: #cbd5e1; margin: 0 auto 10px auto; max-width: 760px; }
.fg-statline { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; max-width: 760px; margin-left: auto !important; margin-right: auto !important; margin: 0; font-size: 0.92rem; color: var(--text-muted); }
.fg-statline strong { color: white; font-variant-numeric: tabular-nums; }
.fg-filters { display: block; padding: 12px 16px; margin-bottom: 18px; }
.fg-filter-row { display: flex; flex-wrap: wrap; gap: 10px 15px; align-items: center; justify-content: space-between; }
.fg-filters .fg-chip { padding: 5px 12px; font-size: 0.8rem; }
.fg-deck-toggle { font-size: 0.85rem; }
.fg-browse { margin-top: 8px; font-size: 0.8rem; color: var(--text-muted); }
.fg-browse a { color: var(--accent-primary); text-decoration: none; font-weight: 700; }
.fg-browse a:hover { text-decoration: underline; }
#fg-app > .fg-heading:first-of-type { margin-top: 0; }
@media (max-width: 650px) {
    .fg-h1 { font-size: 2rem !important; }
    .fg-lede { font-size: 0.95rem; }
    .fg-statline { font-size: 0.85rem; gap: 4px 12px; }
}
/* Beat the site-wide .hero p rules */
.fg-hero p.fg-lede { max-width: 760px !important; font-size: 1.05rem !important; line-height: 1.5 !important; margin: 0 auto 8px auto !important; }
.fg-hero p.fg-statline { max-width: 760px !important; font-size: 0.92rem !important; line-height: 1.5 !important; margin: 0 auto !important; }
@media (max-width: 650px) {
    .fg-hero p.fg-lede { font-size: 0.95rem !important; }
    .fg-hero p.fg-statline { font-size: 0.85rem !important; }
}

/* Compact stats pill under the heading */
.fg-statbar {
    display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 2px auto 0;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); border-radius: 999px;
    font-size: 0.8rem; color: var(--text-muted); overflow: hidden;
}
.fg-stat { padding: 5px 12px; white-space: nowrap; }
.fg-stat + .fg-stat { border-left: 1px solid var(--border-color); }
.fg-stat strong { color: white; font-variant-numeric: tabular-nums; }
@media (max-width: 650px) {
    .fg-statbar { border-radius: 12px; font-size: 0.75rem; }
    .fg-stat { padding: 4px 9px; }
}
.fg-about .fg-browse { font-size: 0.9rem; }
/* Stats pill + donate button share one centred row; the button is sized to match the pill */
.fg-hero-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; margin-top: 2px; }
.fg-hero-row .fg-statbar { margin: 0; flex-wrap: nowrap; }
.fg-hero-row .beer-btn-global {
    height: 30px; padding: 0 14px; font-size: 0.8rem; border-radius: 999px; gap: 5px; max-width: none; white-space: nowrap;
}
.fg-hero-row .beer-icon { font-size: 1.15em; transform: translateY(-1px); }
@media (max-width: 650px) {
    .fg-hero-row .fg-statbar { border-radius: 999px; }
    .fg-hero-row .beer-btn-global { height: 28px; font-size: 0.75rem; padding: 0 12px; }
}

/* Sidebar widget heading links to the tracker */
.fg-widget-head { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.fg-widget-head:hover { color: var(--accent-primary); }

/* RSS icon beside the beer button (same icon as articles) */
.fg-hero-row .fg-rss-icon {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.04); color: var(--accent-primary);
}
.fg-hero-row .fg-rss-icon:hover { color: #fff; border-color: var(--accent-primary); }
@media (max-width: 650px) { .fg-hero-row .fg-rss-icon { width: 28px; height: 28px; } }

/* Feed links land on a game's card: keep it clear of the sticky header and highlight it */
.fg-card { scroll-margin-top: 90px; }
.fg-card:target { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.fg-hero-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
@media (max-width: 650px) {
    .fg-hero-row { gap: 8px 6px; }
    .fg-hero-row .fg-stat { padding: 4px 8px; }
    .fg-hero-actions { gap: 6px; }
    .fg-hero-row .beer-btn-global { padding: 0 10px; }
}