/**
 * SpinFakta Skin — "Data Terminal Dark"
 *
 * Premium dark skin for the whole portal: deep slate surfaces, restrained
 * amber/blue accents, high-saturation reserved for data elements (RTP,
 * volatility, ratings). Loads AFTER all other stylesheets — removing this
 * file (and its enqueue) restores the light theme untouched.
 *
 * @package SpinFakta
 * @since 3.5.0
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
    /* Theme tokens consumed by plugin blocks.css (--sfb-* fallbacks) */
    --sf-surface:  #121C30;
    --sf-border:   #1F2B45;
    --sf-dark:     #E6EDF7;   /* semantic: strong text */
    --sf-light:    #0E1729;
    --sf-gray-50:  #0E1729;
    --sf-gray-100: #1B2740;
    --sf-gray-200: #243352;
    --sf-gray-300: #33425E;
    --sf-gray-400: #7C8BA3;
    --sf-gray-500: #93A3BB;
    --sf-gray-600: #B3C0D4;
    --sf-gray-700: #C9D4E4;
    --sf-gray-800: #DCE4F0;
    --sf-gray-900: #E6EDF7;
    --sf-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --sf-shadow-md: 0 4px 10px -1px rgb(0 0 0 / 0.5);
    --sf-shadow-lg: 0 12px 24px -4px rgb(0 0 0 / 0.55);
}

.sf-portal {
    /* Skin-local tokens */
    --skin-bg:        #0B1120;
    --skin-bg-soft:   #0E1729;
    --skin-card:      #121C30;
    --skin-card-2:    #16213A;
    --skin-line:      #1F2B45;
    --skin-line-soft: #182338;
    --skin-text:      #E6EDF7;
    --skin-text-2:    #B3C0D4;
    --skin-text-3:    #7C8BA3;
    --skin-amber:     #F59E0B;
    --skin-amber-2:   #FBBF24;
    --skin-blue:      #3B82F6;
    --skin-green:     #34D399;
    --skin-red:       #F87171;

    background: var(--skin-bg);
    color: var(--skin-text-2);

    /* GP variable overrides inside portal */
    --contrast: #E6EDF7;
    --contrast-2: #B3C0D4;
    --contrast-3: #7C8BA3;
    --base: #121C30;
    --base-2: #0E1729;
    --base-3: #0B1120;
}

::selection { background: rgba(245, 158, 11, 0.35); color: #FFF; }

/* Skin file only loads on portal pages — safe to recolor body (prevents
   white flash on overscroll) */
body { background: #0B1120; }

/* Generated covers: end the gradient lighter than the card surface and add
   a hairline so covers stay legible on dark cards */
.sf-cover {
    background: linear-gradient(140deg, var(--sfc, #1E40AF) -15%, #1A2747 140%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Image containers: enforce cover + center so no letterbox/stretch.
   object-position:center is already the default but explicit here for
   any override. The cover-system-burned-in titles are a separate task. */
.sf-hero__img,
.sf-gc__img,
.sf-sub__img,
.sf-ai__img,
.sf-related__img,
.sf-archive-card__img {
    object-fit: cover;
    object-position: center;
}

/* Hero bg container: fixed height to prevent stretch */
.sf-hero__bg {
    overflow: hidden;
}

/* Article thumb containers: enforce fixed aspect-ratio so images don't stretch */
.sf-ai__thumb {
    overflow: hidden;
    flex-shrink: 0;
}

/* Game card vis: ensure contain height so partial images aren't exposed */
.sf-gc__vis {
    overflow: hidden;
}

/* ==========================================================================
   2. Left nav — harmonize with slate palette
   ========================================================================== */

.sf-nav {
    background: #0A0F1D;
    border-right: 1px solid var(--skin-line-soft, #182338);
    scrollbar-color: #243352 transparent;
}
.sf-nav::-webkit-scrollbar-thumb { background: #243352; }
.sf-nav__group { border-bottom-color: #16203A; }
.sf-nav__label { color: #7C8BA3; } /* BUG-13: was #5B6B85=3.54:1 → #7C8BA3=5.45:1 */
.sf-nav__link { color: #93A3BB; }
.sf-nav__link:hover { background: #131D33; color: #E6EDF7; }
.sf-nav__link--active { background: #16213A; }
.sf-nav__count { color: #7C8BA3; } /* BUG-13: was #5B6B85 → #7C8BA3=5.45:1 */
.sf-nav__burger:hover { background: #16213A; }

@media (max-width: 640px) {
    .sf-nav { border-bottom-color: #182338; }
    .sf-nav__link { border-color: #243352; }
}

/* ==========================================================================
   3. Center feed
   ========================================================================== */

.sf-main { background: var(--skin-bg); }

.sf-masthead {
    background: linear-gradient(135deg, #101B33 0%, #15213C 55%, #1A2747 100%);
    border: 1px solid #223153;
    border-left: 4px solid var(--skin-amber);
}

.sf-sec__head { border-bottom-color: var(--skin-line); }
.sf-sec__title { color: var(--skin-text); }
.sf-sec__more { color: var(--skin-amber); }
.sf-sec__more:hover { color: var(--skin-amber-2); }

/* Hero sub cards */
.sf-sub { background: var(--skin-card); border-color: var(--skin-line); }
.sf-sub:hover { border-color: #2C3D63; box-shadow: 0 4px 14px rgba(0,0,0,0.45); }
.sf-sub__prov { color: var(--skin-text-3); }
.sf-sub__title { color: var(--skin-text); }
.sf-sub__meta { color: var(--skin-green); font-weight: 600; }

/* Game cards */
.sf-gc { background: var(--skin-card); border-color: var(--skin-line); }
.sf-gc:hover {
    border-color: #2C3D63;
    box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 0 1px rgba(245,158,11,0.12);
}
.sf-gc__name { color: var(--skin-text); }

/* Data tags — translucent, data-first saturation */
.sf-t--blue { color: #7EB1FF; background: rgba(59,130,246,0.14); }
.sf-t--high { color: #F89B9B; background: rgba(248,113,113,0.13); }
.sf-t--med  { color: #FBBF24; background: rgba(245,158,11,0.13); }
.sf-t--low  { color: #4ADE9D; background: rgba(52,211,153,0.13); }

/* News feed */
.sf-news-feed { background: var(--skin-card); border-color: var(--skin-line); }
.sf-news { border-bottom-color: var(--skin-line-soft); }
.sf-news:hover { background: var(--skin-card-2); }
.sf-news__time { color: var(--skin-text-3); }
.sf-news__title { color: var(--skin-text); }
.sf-news__excerpt { color: var(--skin-text-3); }

/* Article feed */
.sf-ai { border-bottom-color: var(--skin-line-soft); }
.sf-ai__thumb { background: var(--skin-card-2); }
.sf-ai__title { color: var(--skin-text); }
.sf-ai__title a:hover { color: var(--skin-amber); }
.sf-ai__desc { color: var(--skin-text-3); }
.sf-ai__meta { color: var(--skin-text-3); }

/* Guide grid */
.sf-gd { background: var(--skin-card); border-color: var(--skin-line); }
.sf-gd:hover { border-color: #2C3D63; box-shadow: 0 4px 14px rgba(0,0,0,0.45); }
.sf-gd__title { color: var(--skin-text); }
.sf-gd__desc { color: var(--skin-text-3); }

/* ==========================================================================
   4. Right sidebar
   ========================================================================== */

.sf-aside {
    background: var(--skin-bg-soft);
    border-left-color: var(--skin-line-soft);
    scrollbar-color: #243352 transparent;
}
.sf-aside::-webkit-scrollbar-thumb { background: #243352; }

.sf-w { background: var(--skin-card); border-color: var(--skin-line); }
.sf-w__title { color: var(--skin-text); }
.sf-w__empty { color: var(--skin-text-3); }

.sf-w--tg { background: linear-gradient(135deg, #101B33, #15213C); border-color: #223153; }

.sf-w__rank-item { border-bottom-color: var(--skin-line-soft); }
.sf-w__rank-num--rest { background: #1B2740; color: #93A3BB; }
.sf-w__rank-title { color: var(--skin-text); }
.sf-w__rank-title:hover { color: var(--skin-amber); }
.sf-w__rank-sub { color: var(--skin-text-3); }

.sf-w__releases li { border-bottom-color: var(--skin-line-soft); }
.sf-w__releases strong { color: var(--skin-text); }
.sf-w__releases span { color: var(--skin-text-3); }

.sf-w__cats li { border-bottom-color: var(--skin-line-soft); }
.sf-w__cats a { color: var(--skin-text-2); }
.sf-w__cats a:hover { color: var(--skin-amber); }
.sf-w__cats span { color: var(--skin-text-3); }

.sf-w__prov a { color: var(--skin-text-2); }
.sf-w__prov a:hover { color: var(--skin-text); }
.sf-w__num { color: var(--skin-text-3); }

/* Star ratings */
.sf-stars__star { color: #3D506A; } /* BUG-03: was #33425E=1.69:1 → #3D506A=2.3:1 (decorative) */
.sf-stars__star--filled { color: var(--skin-amber); }
.sf-stars__count { color: var(--skin-text-3); }

/* ==========================================================================
   5. Breadcrumb (shared single + archive)
   ========================================================================== */

.sf-breadcrumb { color: var(--skin-text-3); }
.sf-breadcrumb a { color: var(--skin-amber); }
.sf-breadcrumb a:hover { color: var(--skin-amber-2); }
.sf-breadcrumb__sep { color: #7C8BA3; } /* BUG-02: was #33425E=1.87:1 → #7C8BA3=4.92:1 */
.sf-breadcrumb__current { color: var(--skin-text-2); }

/* ==========================================================================
   6. Archive pages
   ========================================================================== */

.sf-archive-header { border-bottom-color: var(--skin-line); }
.sf-archive-header__title { color: var(--skin-text); }
.sf-archive-header__desc { color: var(--skin-text-2); }

.sf-archive-card { background: var(--skin-card); border-color: var(--skin-line); }
.sf-archive-card:hover {
    border-color: #2C3D63;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.sf-archive-card__thumb { background: var(--skin-card-2); }
.sf-archive-card__title { color: var(--skin-text); }
.sf-archive-card__excerpt { color: var(--skin-text-3); }
.sf-archive-card__date { color: var(--skin-text-3); }

.sf-archive-pagination .page-numbers {
    background: var(--skin-card);
    border-color: var(--skin-line);
    color: var(--skin-text-2);
}
.sf-archive-pagination .page-numbers:hover { background: var(--skin-card-2); color: var(--skin-text); }
.sf-archive-pagination .page-numbers.current {
    background: var(--skin-amber);
    border-color: var(--skin-amber);
    color: #0B1120;
}

.sf-archive-empty { color: var(--skin-text-3); }
.sf-archive-empty h2 { color: var(--skin-text-2); }

/* ==========================================================================
   7. Single post / game pages
   ========================================================================== */

.sf-article { border-bottom-color: var(--skin-line); }
.sf-article__title { color: var(--skin-text); }
.sf-article__meta { color: var(--skin-text-3); }
.sf-article__updated { color: var(--skin-green); }

.sf-game-stats { background: var(--skin-card); border-color: var(--skin-line); }
.sf-game-stats__label { color: var(--skin-text-3); }
.sf-game-stats__value { color: var(--skin-text); }
.sf-game-stats__value--rtp { color: var(--skin-green); }

.sf-article__content { color: var(--skin-text-2); }
.sf-article__content h2 { color: var(--skin-text); border-bottom-color: var(--skin-line); }
.sf-article__content h3 { color: var(--skin-text); }
.sf-article__content ul,
.sf-article__content ol { color: var(--skin-text-2); }
.sf-article__content strong { color: var(--skin-text); }
.sf-article__content em { color: var(--skin-text-2); }
.sf-article__content a { color: var(--skin-amber); }
.sf-article__content a:hover { color: var(--skin-amber-2); }
.sf-article__content blockquote {
    background: rgba(245, 158, 11, 0.07);
    color: var(--skin-text-2);
}

.sf-article__tag { background: #1B2740; color: var(--skin-text-2); }
.sf-article__tag:hover { background: #243352; color: var(--skin-text); }

.sf-related__title { color: var(--skin-text); }
.sf-related__card { background: var(--skin-card); border-color: var(--skin-line); }
.sf-related__card:hover { border-color: #2C3D63; box-shadow: 0 4px 14px rgba(0,0,0,0.45); }
.sf-related__thumb { background: var(--skin-card-2); }
.sf-related__name { color: var(--skin-text); }
.sf-related__date { color: var(--skin-text-3); }

/* ==========================================================================
   8. Footer — harmonize with slate
   ========================================================================== */

.sf-footer { background: #0A0F1D; border-top: 1px solid #182338; }
.sf-footer__bottom { border-top-color: #16203A; }

/* BUG-12: footer links #666 on #0A0F1D = 3.33:1 → #7C8BA3 = 5.45:1 */
.sf-footer__links a { color: var(--skin-text-3, #7C8BA3); }
.sf-footer__links a:hover { color: var(--skin-amber, #F59E0B); }

/* ==========================================================================
   9. Plugin shortcode blocks — dark patches for hardcoded values
   ========================================================================== */

/* Volatility badges: translucent dark variants */
.sf-vol--low         { background-color: rgba(52, 211, 153, 0.15); color: #4ADE9D; }
.sf-vol--low-medium  { background-color: rgba(52, 211, 153, 0.12); color: #6EE7B7; }
.sf-vol--medium      { background-color: rgba(245, 158, 11, 0.15); color: #FBBF24; }
.sf-vol--medium-high { background-color: rgba(249, 115, 22, 0.15); color: #FB923C; }
.sf-vol--high        { background-color: rgba(248, 113, 113, 0.15); color: #F89B9B; }
.sf-vol--very-high   { background-color: rgba(248, 113, 113, 0.22); color: #FCA5A5; }

/* RTP "low" indicator: brighter red for dark surfaces */
.sf-review-card__value--low { color: var(--skin-red, #F87171); }

/* Table hover tints: amber glow instead of near-invisible blue on dark bg
   WCAG: amber overlay at 0.16 produces clearly visible highlight on #0B1122 */
.sf-comparison__row:hover,
.sf-comparison__row:hover .sf-comparison__cell--sticky,
.sf-data-table__row:hover { background-color: rgba(245, 158, 11, 0.16); }

/* FAQ open state */
.sf-faq__item--open { box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35); }

/* ── Contrast Fixes (WCAG AA) ────────────────────────────────────────────── */

/* 1. TG CTA button: amber bg, force deep-dark text (#0F172A) for contrast.
      Without this, --sfb-dark resolves to #E6EDF7 (light) via skin token
      remapping → 1.7:1 on amber. Fix: hardcode to #0F172A → ~8:1. */
.sf-tg-cta__button,
.sf-tg-cta__button:hover,
.sf-tg-cta__button:focus,
.sf-tg-cta__button:active {
    color: #0F172A !important;
    font-weight: 700;
}

/* 2. Sidebar TG "Gabung Komunitas" button: same amber bg issue */
.sf-w__tg-btn,
.sf-w__tg-btn:hover,
.sf-w__tg-btn:focus {
    color: #0F172A !important;
    font-weight: 700;
}

/* 3. FAQ question hover: was --sfb-primary (#1E40AF) = invisible on dark bg.
      Change to amber which is visible on both dark surfaces. */
.sf-faq__question:hover,
.sf-faq__question:focus-visible {
    color: var(--skin-amber, #F59E0B) !important;
}

/* 4. FAQ accordion: open-state icon was primary blue (invisible).
      Shift to amber. */
.sf-faq__item--open .sf-faq__icon {
    color: var(--skin-amber, #F59E0B);
}

/* 5. FAQ answer links: primary blue on dark bg is invisible.
      Use amber-2 for slightly brighter readable link color. */
.sf-faq__answer-inner a {
    color: var(--skin-amber-2, #FBBF24);
}
.sf-faq__answer-inner a:hover {
    color: #FCD34D;
}

/* 6. General a:hover inside portal: ensure amber, not dark --contrast value */
.sf-portal .sf-article__content a:hover,
.sf-portal .entry-content a:hover,
.sf-portal .sf-page__content a:hover {
    color: var(--skin-amber-2, #FBBF24);
}

/* 7. Verdict card: netral label (#64748B) and kicker (#64748B) on dark surface
      → contrast ~3.5:1. Lift to gray-400 level (#7C8BA3 → 4.7:1). */
.sf-verdict--netral .sf-verdict__label {
    color: var(--skin-text-3, #7C8BA3);
}
.sf-verdict__kicker {
    color: var(--skin-text-3, #7C8BA3);
}

/* 8. Verdict claim block: when --sfb-gray-50 resolves to #0E1729 (dark),
      ensure text stays fully bright */
.sf-verdict__claim {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--skin-text, #E6EDF7);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 9. Review card label: lift muted label slightly for dark bg */
.sf-review-card__label {
    color: var(--skin-text-3, #7C8BA3);
}

/* 10. Review card row dividers: adapt to dark surface */
.sf-review-card__row {
    border-bottom-color: var(--skin-line, #1F2B45);
}

/* 11. Comparison table even-row on dark: use subtle dark-card bg */
.sf-comparison__row:nth-child(even),
.sf-data-table--striped .sf-data-table__row:nth-child(even) {
    background-color: var(--skin-card-2, #16213A);
}
.sf-comparison__row:nth-child(even) .sf-comparison__cell--sticky {
    background-color: var(--skin-card-2, #16213A);
}

/* 12. focus-visible ring: use amber on dark for better visibility */
.sf-faq__question:focus-visible {
    outline-color: var(--skin-amber, #F59E0B);
}

/* ==========================================================================
   10. Static pages (portal page template)
   ========================================================================== */

.sf-page__content { color: var(--skin-text-2); }
.sf-page__content h2,
.sf-page__content h3,
.sf-page__content strong { color: var(--skin-text); }
.sf-page__content a { color: var(--skin-amber); }

/* ==========================================================================
   11. Fact-check elements
   ========================================================================== */

/* RTP truth notice on game pages */
.sf-rtp-notice {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
    color: var(--skin-text-2, #B3C0D4);
}
.sf-rtp-notice__icon { color: #FBBF24; }
.sf-rtp-notice__body strong { color: #E6EDF7; }
.sf-rtp-notice__body a { color: #FBBF24; }

/* Highlighted nav link for the fact-check hub */
.sf-nav__link--hot { color: #FBBF24; }
.sf-nav__link--hot svg { opacity: 1; }
.sf-nav__link--hot:hover { color: #FCD34D; }

/* ==========================================================================
   12. P0 Critical Fix — Sidebar TG button on non-homepage portal pages
   ========================================================================== */
/* BUG-01 P0: .sf-w__tg-btn background only defined in homepage.css (front-page only).
   On game-library/archive/single pages it inherits dark parent #101B33 → text #0F172A = 1.04:1.
   Fix: globalise the amber background in skin-dark.css (loaded on ALL portal pages). */
.sf-w__tg-btn {
    background-color: var(--skin-amber, #F59E0B) !important;
    color: #0F172A !important;
    font-weight: 700;
}
.sf-w__tg-btn:hover,
.sf-w__tg-btn:focus {
    background-color: var(--skin-amber-2, #FBBF24) !important;
    color: #0F172A !important;
}

/* ==========================================================================
   13. P2 Contrast Fixes — badges & pagination (BUG-07, BUG-08)
   ========================================================================== */
/* BUG-07: category badge #FFF on #F59E0B amber bg = 2.15:1. Fix: dark text → 8.3:1 */
.sf-article__category,
.sf-article__cat-badge,
.sf-gc__badge {
    color: #0F172A !important;
}
/* BUG-08: pagination current #FFF on #F59E0B = 2.15:1 → dark text */
.page-numbers.current {
    color: #0F172A !important;
}

/* ==========================================================================
   14. P2 Contrast Fixes — footer bottom text (BUG-09, BUG-10, BUG-11)
   ========================================================================== */
/* BUG-09: footer bottom text #555 on #141414 = 2.47:1 → #888 = 4.8:1 */
.sf-footer__bottom .sf-container > span,
.sf-footer__bottom-inner > span { color: #888888; }
/* BUG-10: footer disclaimer #444 on #141414 = 1.89:1 → #777 = 4.8:1 */
.sf-footer__disclaimer { color: #777777; }
/* BUG-11: footer links already fixed by BUG-12 rule above (#7C8BA3 = 5.45:1) */

/* ==========================================================================
   15. P3 — nav group label contrast (BUG-13)
   ========================================================================== */
/* BUG-13: nav group label #5B6B85 on #0A0F1D = 3.54:1 → #7C8BA3 = 5.45:1 */
.sf-nav__group-label,
.sf-nav__group-count { color: var(--skin-text-3, #7C8BA3); }