/* =============================================================
   theme-frontend.css
   All frontend (non-admin) page styles.
   Builds on theme-common.css tokens.

   SECTIONS
   ─────────────────────────────────────────────────────────────
   1.  FRONTEND VARIABLES
   2.  NAVIGATION
   3.  MOBILE OFFCANVAS MENU
   4.  HERO  (landing page dark banner)
   5.  SECTIONS  (page-level layout wrappers)
   6.  HOW-IT-WORKS  (3-step strip)
   7.  PACKAGE CARDS  (shared: landing + store index)
   8.  HEAT-LEVEL MODIFIERS  (data-heat attribute variants)
   9.  STORE PAGE  (filter bar, alerts, credits CTA)
   10. STORE DETAILS  (hero image, sidebar, card previews)
   11. CUMULATIVE ACCESS TIERS  (sidebar tier list + card includes note)
   12. LANDING CTA  (bottom sign-up banner)
   13. FOOTER
   14. UTILITY  (shared helpers used across pages)
   15. ANIMATIONS
   16. RESPONSIVE  (mobile overrides, ≤ 640 px)
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   1. FRONTEND VARIABLES
   All colour, spacing, and sizing tokens specific to the
   frontend pages. Adjust here — views never hardcode values.
   ───────────────────────────────────────────────────────────── */
/* Override brand colour for frontend pages only (admin keeps #A61C3C) */
:root {
    --primary-crimson:      #be185d;
    --primary-crimson-dark: #9d1252;
}

:root {
    /* ── Hero ──────────────────────────────────────────────── */
    --fn-hero-bg:               linear-gradient(135deg, #0b0b0d 0%, #121214 50%, #0b0b0d 100%);
    --fn-hero-glow-truth:       rgba(74, 48, 109, 0.22);
    --fn-hero-glow-dare:        rgba(122, 31, 41, 0.2);
    --fn-hero-title-gradient:   linear-gradient(135deg, #fda4af, #c5a07d, #f5c842);
    --fn-hero-text:             rgba(240, 232, 245, 0.75);

    /* ── Buttons (hero / CTA) ──────────────────────────────── */
    --fn-btn-cta-bg:            linear-gradient(155deg, #881337, #be185d);
    --fn-btn-cta-shadow:        0 8px 28px rgba(190, 24, 93, 0.4);
    --fn-btn-ghost-bg:          rgba(197, 160, 125, 0.08);
    --fn-btn-ghost-bg-hover:    rgba(197, 160, 125, 0.16);
    --fn-btn-ghost-border:      rgba(197, 160, 125, 0.3);
    --fn-btn-ghost-color:       rgba(197, 160, 125, 0.9);
    --fn-btn-outline-hover-bg:  var(--primary-crimson);

    /* ── Heat badges (landing hero strip) ─────────────────── */

    --fn-heat-warm-border:      rgba(96, 165, 250, 0.35);
    --fn-heat-warm-color:       #60a5fa;
    --fn-heat-hot-border:       rgba(251, 146, 60, 0.35);
    --fn-heat-hot-color:        #fb923c;
    --fn-heat-scorching-border: rgba(253, 164, 175, 0.4);
    --fn-heat-scorching-color:  #fda4af;

    /* ── Heat thumbnails (package card images) ─────────────── */
    --fn-thumb-warm-bg:         linear-gradient(135deg, #1e3a5f, #2563eb);
    --fn-thumb-hot-bg:          linear-gradient(135deg, #7c2d12, #ea580c);
    --fn-thumb-scorching-bg:    linear-gradient(135deg, #4a0020, #be185d);
    --fn-thumb-height:          300px;
    --fn-thumb-text:            rgba(255, 255, 255, 0.85);

    /* ── Nav ───────────────────────────────────────────────── */
    --fn-nav-height:            60px;
    --fn-nav-link-size:         0.88rem;
    --fn-credits-badge-bg:      rgba(197, 160, 125, 0.1);
    --fn-credits-badge-border:  rgba(197, 160, 125, 0.28);

    /* ── Mobile menu ───────────────────────────────────────── */
    --fn-mobile-credits-bg:     rgba(197, 160, 125, 0.1);
    --fn-mobile-credits-border: rgba(197, 160, 125, 0.25);
    --fn-mobile-divider:        rgba(197, 160, 125, 0.12);
    --fn-mobile-link-color:     rgba(240, 232, 245, 0.5);

    /* ── Package cards ─────────────────────────────────────── */
    --fn-pkg-card-pad:          22px;
    --fn-pkg-ribbon-bg:         #5a9e6f;
    --fn-pkg-price-free:        #5a9e6f;
    --fn-pkg-price-owned:       #5a9e6f;

    /* ── Card type (Truth / Dare) previews ─────────────────── */
    --fn-truth-bg:              rgba(74, 48, 109, 0.35);
    --fn-truth-border:          rgba(74, 48, 109, 0.5);
    --fn-truth-color:           #c4b5fd;
    --fn-dare-bg:               rgba(122, 31, 41, 0.35);
    --fn-dare-border:           rgba(122, 31, 41, 0.5);
    --fn-dare-color:            #fda4af;

    /* ── Feedback states ───────────────────────────────────── */
    --fn-success-bg:            rgba(90, 158, 111, 0.12);
    --fn-success-border:        rgba(90, 158, 111, 0.3);
    --fn-success-color:         #5a9e6f;
    --fn-warn-bg:               rgba(224, 92, 0, 0.08);
    --fn-warn-border:           rgba(224, 92, 0, 0.25);
    --fn-warn-color:            #e05c00;

    /* ── Spacing ───────────────────────────────────────────── */
    --fn-section-pad:           clamp(48px, 8vw, 80px);
    --fn-hero-pad:              clamp(60px, 10vw, 120px);

    /* ── Border radii ──────────────────────────────────────── */
    --fn-radius-sm:             8px;
    --fn-radius-md:             12px;
    --fn-radius-lg:             16px;
    --fn-radius-pill:           20px;

    /* ── Store details hero ────────────────────────────────── */
    --fn-details-hero-height:   clamp(200px, 30vw, 320px);
    --fn-details-overlay:       linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
    --fn-locked-overlay:        linear-gradient(to bottom, transparent, var(--bg-page) 60%);

    /* ── Bottom CTA ────────────────────────────────────────── */
    --fn-cta-bg:                linear-gradient(135deg, #0b0b0d, #121214);
    --fn-cta-glow:              rgba(197, 160, 125, 0.12);
    --fn-cta-text:              #f0e8f5;
    --fn-cta-muted:             rgba(197, 160, 125, 0.7);
}


/* ─────────────────────────────────────────────────────────────
   2. NAVIGATION
   ───────────────────────────────────────────────────────────── */
.fn-nav {
    position:      sticky;
    top:           0;
    z-index:       100;
    background:    #121214;
    border-bottom: 1px solid rgba(197, 160, 125, 0.12);
}

.fn-nav__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          var(--fn-nav-height);
}

.fn-nav__brand {
    text-decoration: none;
    display:         flex;
    align-items:     center;
}

.fn-nav__logo {
    height:  42px;
    width:   auto;
    display: block;
    filter:  brightness(3) saturate(0.65);
}

.fn-nav__links {
    display:     flex;
    align-items: center;
    gap:         24px;
}

.fn-nav__link {
    font-size:       var(--fn-nav-link-size);
    font-weight:     600;
    color:           rgba(240, 232, 245, 0.72);
    text-decoration: none;
    transition:      color 0.2s ease;
}

.fn-nav__link:hover {
    color: #c5a07d;
}

.fn-credits-badge {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    background:      var(--fn-credits-badge-bg);
    border:          1px solid var(--fn-credits-badge-border);
    border-radius:   var(--fn-radius-pill);
    padding:         5px 14px;
    font-size:       0.82rem;
    font-weight:     700;
    color:           #c5a07d;
    text-decoration: none;
    transition:      background-color 0.2s ease, border-color 0.2s ease;
}

.fn-credits-badge:hover {
    background:   rgba(197, 160, 125, 0.2);
    border-color: rgba(197, 160, 125, 0.5);
    color:        #c5a07d;
}

.fn-nav__logout {
    background:  none;
    border:      none;
    font-size:   0.82rem;
    color:       rgba(240, 232, 245, 0.4);
    cursor:      pointer;
    font-family: inherit;
    padding:     0;
    transition:  color 0.2s ease;
}

.fn-nav__logout:hover {
    color: rgba(240, 232, 245, 0.85);
}

.fn-hamburger {
    background: none;
    border:     none;
    cursor:     pointer;
    color:      rgba(240, 232, 245, 0.8);
    padding:    4px;
}


/* ─────────────────────────────────────────────────────────────
   3. MOBILE OFFCANVAS MENU
   ───────────────────────────────────────────────────────────── */
.fn-offcanvas-bar {
    background: var(--midnight-charcoal);
}

.fn-offcanvas-close {
    color: white;
}

.fn-offcanvas-inner {
    margin-top: 24px;
}

.fn-offcanvas-brand {
    display:       block;
    margin-bottom: 24px;
}

.fn-offcanvas-logo {
    height:  56px;
    width:   auto;
    display: block;
    filter:  brightness(3) saturate(0.65);
}

.fn-mobile-credits {
    background:    var(--fn-mobile-credits-bg);
    border:        1px solid var(--fn-mobile-credits-border);
    border-radius: var(--fn-radius-md);
    padding:       12px 16px;
    margin-bottom: 20px;
}

.fn-mobile-credits__label {
    font-size:      0.72rem;
    color:          var(--fn-mobile-link-color);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.fn-mobile-credits__amount {
    font-size:   1.4rem;
    font-weight: 900;
    color:       #c5a07d;
}

.fn-mobile-nav {
    list-style:      none;
    padding:         0;
    margin:          0;
    display:         flex;
    flex-direction:  column;
    gap:             4px;
}

.fn-mobile-nav__link {
    display:         block;
    padding:         12px 8px;
    color:           white;
    text-decoration: none;
    font-weight:     600;
    border-radius:   var(--fn-radius-sm);
    transition:      background-color 0.2s ease;
}

.fn-mobile-nav__link:hover {
    background: rgba(255, 255, 255, 0.06);
    color:      white;
}

.fn-mobile-nav__link--credits {
    color: var(--primary-crimson);
}

.fn-mobile-nav__link--credits:hover {
    color: var(--primary-crimson);
}

.fn-mobile-nav__link svg { vertical-align: middle; }

.fn-mobile-divider {
    margin-top:    24px;
    padding-top:   16px;
    border-top:    1px solid var(--fn-mobile-divider);
}

.fn-mobile-logout {
    background:  none;
    border:      none;
    color:       var(--fn-mobile-link-color);
    cursor:      pointer;
    font-family: inherit;
    font-size:   0.88rem;
    padding:     0;
    transition:  color 0.2s ease;
}

.fn-mobile-logout:hover {
    color: white;
}

.fn-mobile-auth-list {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.fn-mobile-auth-link {
    display:         block;
    padding:         12px 16px;
    text-decoration: none;
    font-weight:     600;
    border-radius:   10px;
    text-align:      center;
    transition:      background-color 0.2s ease;
}

.fn-mobile-auth-link--login {
    color:  white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.fn-mobile-auth-link--login:hover {
    background: rgba(255, 255, 255, 0.06);
    color:      white;
}

.fn-mobile-auth-link--register {
    background: var(--primary-crimson);
    color:      white;
}

.fn-mobile-auth-link--register:hover {
    background: var(--primary-crimson-dark);
    color:      white;
}


/* ─────────────────────────────────────────────────────────────
   4. HERO  (split layout: copy left, model right)
   ───────────────────────────────────────────────────────────── */
.fn-hero {
    background:  var(--fn-hero-bg);
    position:    relative;
    overflow:    hidden;
    min-height:  clamp(520px, 78vh, 820px);
    display:     flex;
    align-items: center;
}

/* Lace texture overlay */
.fn-hero__bg {
    position:            absolute;
    inset:               0;
    background-image:    url('/images/site/pattern1.png');
    background-size:     cover;
    background-position: center;
    opacity:             0.14;
}

.fn-hero__glow {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 70% at 8%  50%, rgba(122, 31, 41, 0.5)   0%, transparent 60%),
        radial-gradient(ellipse 40% 55% at 80% 85%, rgba(74,  48, 109, 0.28) 0%, transparent 65%);
}

/* Two-column grid: text | model */
.fn-hero__content {
    position:              relative;
    z-index:               1;
    display:               grid;
    grid-template-columns:  1fr 1fr;
    align-items:           center;
    gap:                   0;
    padding-top:           clamp(52px, 7vw, 90px);
    padding-bottom:        clamp(40px, 6vw, 80px);
    width:                 100%;
}

.fn-hero__copy { padding-right: 24px; }

/* Main headline — italic Playfair, left-aligned */
.fn-hero__title {
    font-family:   'Playfair Display', serif;
    font-size:     clamp(2.2rem, 4.8vw, 3.8rem);
    font-weight:   700;
    font-style:    italic;
    color:         #ffffff;
    margin-bottom: 18px;
    line-height:   1.18;
    animation:     fn-fade-up 0.6s ease 0.1s both;
}

.fn-hero__subtitle {
    font-size:   clamp(0.95rem, 1.8vw, 1.1rem);
    color:       var(--fn-hero-text);
    max-width:   400px;
    margin:      0 0 30px;
    line-height: 1.65;
    animation:   fn-fade-up 0.6s ease 0.2s both;
}

.fn-hero__cta-group {
    display:   flex;
    gap:       12px;
    flex-wrap: wrap;
    animation: fn-fade-up 0.6s ease 0.3s both;
}

.fn-hero__btn-primary {
    display:         inline-block;
    padding:         14px 34px;
    background:      var(--fn-btn-cta-bg);
    color:           white;
    font-weight:     700;
    font-size:       1rem;
    border-radius:   12px;
    text-decoration: none;
    box-shadow:      var(--fn-btn-cta-shadow);
    transition:      transform 0.2s ease, box-shadow 0.2s ease;
}
.fn-hero__btn-primary:hover {
    transform:  translateY(-2px);
    box-shadow: 0 12px 36px rgba(190, 24, 93, 0.55);
    color:      white;
}

.fn-hero__btn-ghost {
    display:         inline-block;
    padding:         14px 34px;
    background:      var(--fn-btn-ghost-bg);
    color:           var(--fn-btn-ghost-color);
    font-weight:     600;
    font-size:       1rem;
    border-radius:   12px;
    text-decoration: none;
    border:          1px solid var(--fn-btn-ghost-border);
    transition:      background-color 0.2s ease, color 0.2s ease;
}
.fn-hero__btn-ghost:hover {
    background: var(--fn-btn-ghost-bg-hover);
    color:      #c5a07d;
}

/* Heat badge strip */
.fn-heat-badges {
    display:   flex;
    gap:       10px;
    flex-wrap: wrap;
    margin-top: 28px;
    animation: fn-fade-up 0.6s ease 0.4s both;
}

.fn-heat-badge {
    padding:       5px 16px;
    border-radius: var(--fn-radius-pill);
    border:        1px solid;
    font-size:     0.78rem;
    font-weight:   700;
}

.fn-heat-badge--warm      { border-color: var(--fn-heat-warm-border);      color: var(--fn-heat-warm-color);      }
.fn-heat-badge--hot       { border-color: var(--fn-heat-hot-border);       color: var(--fn-heat-hot-color);       }
.fn-heat-badge--scorching { border-color: var(--fn-heat-scorching-border); color: var(--fn-heat-scorching-color); }

/* Model image — right column, fades out at bottom */
.fn-hero__image {
    display:         flex;
    justify-content: flex-end;
    align-items:     flex-end;
    overflow:        visible;
}

.fn-hero__model {
    height:             clamp(380px, 70vh, 700px);
    width:              auto;
    display:            block;
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 96%);
    mask-image:         linear-gradient(to bottom, black 55%, transparent 96%);
    animation:          fn-fade-up 0.8s ease 0.15s both;
}


/* ─────────────────────────────────────────────────────────────
   5. SECTIONS  (page-level layout wrappers)
   ───────────────────────────────────────────────────────────── */
.fn-section {
    padding:            var(--fn-section-pad) 0;
   
}

.fn-section--alt {
    background: var(--bg-surface-alt);
}

.fn-section--dark {
    background: #0b0b0d;
    position:   relative;
}
.fn-section--dark::before {
    content:             '';
    position:            absolute;
    inset:               0;
   
    opacity:             0.05;
    pointer-events:      none;
}

.fn-section__title {
    font-family:   'Playfair Display', serif;
    font-size:     clamp(1.6rem, 4vw, 2.2rem);
    text-align:    center;
    margin-bottom: 10px;
    color:         var(--text-primary);
}

.fn-section__subtitle {
    text-align:    center;
    color:         var(--text-secondary);
    font-size:     0.95rem;
    margin-bottom: clamp(32px, 5vw, 52px);
}


/* ─────────────────────────────────────────────────────────────
   6. HOW-IT-WORKS  (3-step strip)
   ───────────────────────────────────────────────────────────── */
.fn-step-card {
    padding: 28px 24px;
    text-align: center;
    height: 100%;
    background-color: var(--bg-page);
  
}

.fn-step-card__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--fn-btn-cta-bg);
    border: 1px solid rgba(197, 160, 125, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.fn-step-icon {
    width:      38px;
    height:     38px;
    object-fit: contain;
    display:    block;
}

.fn-step-card__number {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      #c5a07d;
    color:           #0b0b0d;
    font-size:       0.78rem;
    font-weight:     700;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   12px;
}

.fn-step-card__title {
    font-size:     1.05rem;
    font-weight:   700;
    margin-bottom: 8px;
    color:         var(--text-primary);
}

.fn-step-card__desc {
    font-size:   0.88rem;
    color:       var(--text-secondary);
    line-height: 1.65;
    margin:      0;
}


/* ─────────────────────────────────────────────────────────────
   7. PACKAGE CARDS  (shared: landing page + store index)
   ───────────────────────────────────────────────────────────── */
.fn-pkg-card {
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    height:         100%;
    position:       relative;
}

/* Thumbnail area — always the same height */
.fn-pkg-card__thumbnail {
    height:     var(--fn-thumb-height);
    flex-shrink: 0;
    overflow:    hidden;
    position:    relative;
}

.fn-pkg-card__thumbnail img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* Video — fills thumbnail, hidden until hover adds is-playing */
.fn-pkg-card__video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    opacity:    0;
    transition: opacity 0.3s ease;
    z-index:    1;
}

.fn-pkg-card__video.is-playing {
    opacity: 1;
}

.fn-pkg-card__thumb-fallback {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             6px;
}

.fn-pkg-card__thumb-icon {
    font-size: 2rem;
    display:   block;
}

.fn-pkg-card__thumb-label {
    font-size:      0.78rem;
    font-weight:    700;
    color:          var(--fn-thumb-text);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Card body */
.fn-pkg-card__body {
    padding:        var(--fn-pkg-card-pad);
    flex:           1;
    display:        flex;
    flex-direction: column;
}

.fn-pkg-card__meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   10px;
}

.fn-pkg-card__heat-label {
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.fn-pkg-card__img-heat .fn-pkg-card__heat-label {
    color:       rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.fn-pkg-card__count {
    font-size: 0.72rem;
    color:     var(--text-secondary);
}

.fn-pkg-card__title {
    font-size:     1.05rem;
    font-weight:   700;
    margin:        0 0 8px;
    color:         var(--text-primary);
}

.fn-pkg-card__desc {
    font-size:   0.85rem;
    color:       var(--text-secondary);
    line-height: 1.6;
    margin:      0 0 20px;
    flex:        1;
}

.fn-pkg-card__footer {
    margin-top:  auto;
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         8px;
    flex-wrap:   wrap;
}

.fn-pkg-card__price {
    font-size:   0.85rem;
    font-weight: 700;
}

.fn-pkg-card__price--free   { color: var(--fn-pkg-price-free);           }
.fn-pkg-card__price--owned  { color: var(--fn-pkg-price-owned);          }
.fn-pkg-card__price--credits { color: var(--primary-crimson);            }

/* "Owned" diagonal ribbon */
.fn-pkg-ribbon {
    position:       absolute;
    top:            14px;
    right:          -22px;
    background:     var(--fn-pkg-ribbon-bg);
    color:          white;
    font-size:      0.62rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding:        3px 30px;
    transform:      rotate(35deg);
    box-shadow:     0 2px 6px rgba(0, 0, 0, 0.2);
    z-index:        2;
}

/* Action buttons on package cards */
.fn-btn-details {
    padding:         7px 14px;
    background:      var(--bg-surface-alt);
    color:           var(--text-secondary);
    font-size:       0.78rem;
    font-weight:     600;
    border-radius:   var(--fn-radius-sm);
    text-decoration: none;
    border:          1px solid var(--border-color);
    transition:      border-color 0.2s ease, color 0.2s ease;
}

.fn-btn-details:hover {
    border-color: #c5a07d;
    color:        #c5a07d;
}

.fn-btn-unlock {
    padding:       7px 14px;
    background:    var(--primary-crimson);
    color:         white;
    font-size:     0.78rem;
    font-weight:   700;
    border-radius: var(--fn-radius-sm);
    border:        none;
    cursor:        pointer;
    transition:    background-color 0.2s ease, transform 0.15s ease;
    font-family:   inherit;
}

.fn-btn-unlock:hover {
    background: var(--primary-crimson-dark);
    transform:  translateY(-1px);
}

/* View button (used on landing page package cards) */
.fn-btn-view {
    padding:         8px 18px;
    background:      var(--primary-crimson);
    color:           white;
    font-size:       0.82rem;
    font-weight:     700;
    border-radius:   var(--fn-radius-sm);
    text-decoration: none;
    transition:      background-color 0.2s ease;
}

.fn-btn-view:hover {
    background: var(--primary-crimson-dark);
    color:      white;
}

/* Outline "view all" / CTA link-button */
.fn-btn-outline {
    display:         inline-block;
    padding:         12px 32px;
    border:          2px solid var(--primary-crimson);
    color:           var(--primary-crimson);
    font-weight:     700;
    border-radius:   10px;
    text-decoration: none;
    font-size:       0.95rem;
    transition:      background-color 0.2s ease, color 0.2s ease;
}

.fn-btn-outline:hover {
    background: var(--primary-crimson);
    color:      white;
}


/* ─────────────────────────────────────────────────────────────
   8. HEAT-LEVEL MODIFIERS  (data-heat attribute variants)
   Applied via  data-heat="warm|hot|scorching"  on elements.
   Keeps all heat-related colours out of inline styles.
   ───────────────────────────────────────────────────────────── */

/* Thumbnail background gradients */
[data-heat="warm"]      { background: var(--fn-thumb-warm-bg);      }
[data-heat="hot"]       { background: var(--fn-thumb-hot-bg);       }
[data-heat="scorching"] { background: var(--fn-thumb-scorching-bg); }

/* Heat label colour (on .fn-pkg-card__heat-label) */
.fn-pkg-card__heat-label[data-heat="warm"]      { color: var(--fn-heat-warm-color);      }
.fn-pkg-card__heat-label[data-heat="hot"]       { color: var(--fn-heat-hot-color);       }
.fn-pkg-card__heat-label[data-heat="scorching"] { color: var(--fn-heat-scorching-color); }

/* Store details hero heat badge */
.fn-pkg-hero__heat-badge[data-heat="warm"]      { color: var(--fn-heat-warm-color);      border-color: var(--fn-heat-warm-color);      }
.fn-pkg-hero__heat-badge[data-heat="hot"]       { color: var(--fn-heat-hot-color);       border-color: var(--fn-heat-hot-color);       }
.fn-pkg-hero__heat-badge[data-heat="scorching"] { color: var(--fn-heat-scorching-color); border-color: var(--fn-heat-scorching-color); }


/* ─────────────────────────────────────────────────────────────
   9. STORE PAGE  (filter bar, alerts, credits CTA)
   ───────────────────────────────────────────────────────────── */
.fn-page-header {
    padding:    48px 0 40px;
    background: #0b0b0d;
}

.fn-page-header__title {
    font-family:   'Playfair Display', serif;
    font-size:     clamp(1.8rem, 5vw, 2.8rem);
    font-weight:   900;
    color:         white;
    margin-bottom: 8px;
}

.fn-page-header__subtitle {
    color:     rgba(197, 160, 125, 0.7);
    font-size: 0.95rem;
    margin:    0;
}

.fn-store-content {
    padding-top:    32px;
    padding-bottom: 60px;
}

/* Filter bar */
.fn-filter-bar {
    display:       flex;
    gap:           8px;
    flex-wrap:     wrap;
    margin-bottom: 28px;
}

.fn-filter-btn {
    display:         inline-block;
    padding:         8px 18px;
    border-radius:   var(--fn-radius-pill);
    font-size:       0.85rem;
    font-weight:     600;
    text-decoration: none;
    border:          1px solid var(--border-color);
    background:      var(--bg-surface);
    color:           var(--text-secondary);
    transition:      background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.fn-filter-btn:hover {
    border-color: var(--primary-crimson);
    color:        var(--primary-crimson);
}

.fn-filter-help-link {
    margin-left:     auto;
    font-size:       0.78rem;
    color:           rgba(197, 160, 125, 0.6);
    text-decoration: none;
    align-self:      center;
    white-space:     nowrap;
    transition:      color 0.2s;
}
.fn-filter-help-link:hover { color: #c5a07d; }

.fn-filter-btn--active {
    background:   var(--primary-crimson);
    color:        white;
    border-color: var(--primary-crimson);
}

.fn-filter-btn--active:hover {
    background: var(--primary-crimson-dark);
    color:      white;
}

/* Success / feedback alerts */
.fn-alert-success {
    background:    var(--fn-success-bg);
    border:        1px solid var(--fn-success-border);
    border-radius: 10px;
    padding:       14px 18px;
    margin-bottom: 24px;
    color:         var(--fn-success-color);
    font-weight:   600;
}

.fn-alert-warning {
    background:    var(--fn-warn-bg);
    border:        1px solid var(--fn-warn-border);
    border-radius: 10px;
    padding:       12px 16px;
    margin-bottom: 12px;
    font-size:     0.85rem;
    color:         var(--fn-warn-color);
    text-align:    center;
}

/* Empty state */
.fn-empty-state {
    text-align: center;
    padding:    60px 20px;
    color:      var(--text-secondary);
}

.fn-empty-state__icon {
    font-size:     2.5rem;
    margin-bottom: 12px;
    display:       block;
}

.fn-empty-state__text {
    font-size: 1rem;
    margin:    0;
}

/* Buy credits CTA at bottom of store */
.fn-credits-cta {
    margin-top:    48px;
    padding:       28px;
    text-align:    center;
    background:    rgba(197, 160, 125, 0.04);
    border:        1px solid rgba(197, 160, 125, 0.1);
    border-radius: 16px;
}

.fn-credits-cta__text {
    font-size:     0.95rem;
    color:         var(--text-secondary);
    margin-bottom: 16px;
}

.fn-credits-cta__actions {
    display:         flex;
    gap:             10px;
    justify-content: center;
    flex-wrap:       wrap;
}

.fn-btn-buy-credits {
    padding:         10px 24px;
    background:      var(--primary-crimson);
    color:           white;
    font-weight:     700;
    font-size:       0.9rem;
    border-radius:   10px;
    text-decoration: none;
    transition:      background-color 0.2s ease;
}

.fn-btn-buy-credits:hover {
    background: var(--primary-crimson-dark);
    color:      white;
}

.fn-btn-secondary-link {
    padding:         10px 24px;
    background:      var(--bg-surface-alt);
    color:           var(--text-primary);
    font-weight:     600;
    font-size:       0.9rem;
    border-radius:   10px;
    text-decoration: none;
    border:          1px solid var(--border-color);
    transition:      border-color 0.2s ease, color 0.2s ease;
}

.fn-btn-secondary-link:hover {
    border-color: var(--primary-crimson);
    color:        var(--primary-crimson);
}


/* ─────────────────────────────────────────────────────────────
   10. STORE DETAILS  (hero image, sidebar, card previews)
   ───────────────────────────────────────────────────────────── */

/* Full-bleed hero */
.fn-pkg-hero {
    position: relative;
    height:   var(--fn-details-hero-height);
    overflow: hidden;
}

.fn-pkg-hero__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    0.85;
    display:    block;
}

.fn-pkg-hero__overlay {
    position:   absolute;
    inset:      0;
    background: var(--fn-details-overlay);
}

.fn-pkg-hero__content {
    position: absolute;
    bottom:   0;
    left:     0;
    right:    0;
    padding:  24px 20px;
}

.fn-pkg-hero__back {
    color:           rgba(255, 255, 255, 0.7);
    font-size:       0.82rem;
    text-decoration: none;
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    margin-bottom:   12px;
    transition:      color 0.2s ease;
}

.fn-pkg-hero__back:hover {
    color: #c5a07d;
}

.fn-pkg-hero__meta {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}

.fn-pkg-hero__heat-badge {
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background:     rgba(0, 0, 0, 0.35);
    padding:        4px 12px;
    border-radius:  var(--fn-radius-pill);
    border:         1px solid;
}

.fn-pkg-hero__title {
    font-family: 'Playfair Display', serif;
    font-size:   clamp(1.5rem, 5vw, 2.4rem);
    font-weight: 900;
    color:       white;
    margin:      0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Sidebar */
.fn-pkg-sidebar {
    padding:  28px;
    position: sticky;
    top:      76px;
}

.fn-pkg-sidebar__band {
    height:        4px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.fn-pkg-sidebar__stats {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
    margin-bottom:         24px;
}

.fn-pkg-sidebar__stat {
    background:    var(--bg-surface-alt);
    border-radius: 10px;
    padding:       14px;
    text-align:    center;
}

.fn-pkg-sidebar__stat-value {
    font-size:   1.6rem;
    font-weight: 900;
    color:       #c5a07d;
    display:     block;
}

.fn-pkg-sidebar__stat-label {
    font-size:      0.7rem;
    color:          var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.fn-pkg-sidebar__desc {
    font-size:     0.88rem;
    color:         var(--text-secondary);
    line-height:   1.7;
    margin-bottom: 24px;
}

/* Owned state panel */
.fn-pkg-owned {
    background:    var(--fn-success-bg);
    border:        1px solid var(--fn-success-border);
    border-radius: var(--fn-radius-md);
    padding:       16px;
    text-align:    center;
    margin-bottom: 12px;
}

.fn-pkg-owned__icon {
    font-size:     1.2rem;
    margin-bottom: 4px;
}

.fn-pkg-owned__label {
    font-weight: 700;
    color:       var(--fn-success-color);
}

/* Credit cost panel */
.fn-credit-cost {
    background:    var(--bg-surface-alt);
    border-radius: var(--fn-radius-md);
    padding:       16px;
    text-align:    center;
    margin-bottom: 16px;
}

.fn-credit-cost__label {
    font-size:      0.72rem;
    color:          var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom:  4px;
}

.fn-credit-cost__amount {
    font-size:   1.8rem;
    font-weight: 900;
    color:       #c5a07d;
    display:     block;
}

.fn-credit-cost__balance {
    font-size:  0.78rem;
    color:      var(--text-secondary);
    margin-top: 4px;
}

.fn-credit-cost__balance strong {
    color: var(--text-primary);
}

.fn-credit-cost__balance strong.insufficient {
    color: var(--fn-warn-color);
}

/* Purchase button */
.fn-btn-purchase {
    width:         100%;
    padding:       13px;
    background:    var(--primary-crimson);
    color:         white;
    font-weight:   700;
    border-radius: var(--fn-radius-md);
    border:        none;
    cursor:        pointer;
    font-size:     0.95rem;
    font-family:   inherit;
    margin-bottom: 10px;
    transition:    background-color 0.2s ease, transform 0.15s ease;
}

.fn-btn-purchase:hover {
    background: var(--primary-crimson-dark);
    transform:  translateY(-1px);
}

.fn-btn-purchase:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
    transform: none;
}

/* Play now button (when owned) */
.fn-btn-play {
    display:         block;
    padding:         13px;
    background:      var(--primary-crimson);
    color:           white;
    font-weight:     700;
    border-radius:   var(--fn-radius-md);
    text-decoration: none;
    text-align:      center;
    font-size:       0.95rem;
    transition:      background-color 0.2s ease;
}

.fn-btn-play:hover {
    background: var(--primary-crimson-dark);
    color:      white;
}

.fn-btn-back-link {
    display:         block;
    padding:         11px;
    text-align:      center;
    font-size:       0.85rem;
    color:           var(--text-secondary);
    text-decoration: none;
    transition:      color 0.2s ease;
}

.fn-btn-back-link:hover {
    color: var(--text-primary);
}

/* Card preview section header */
.fn-preview-header {
    font-size:     1.1rem;
    font-weight:   700;
    color:         var(--text-primary);
    margin-bottom: 16px;
}

.fn-preview-count {
    color:     var(--text-secondary);
    font-weight: 400;
    font-size: 0.9rem;
}

/* Truth / Dare type breakdown badges */
.fn-type-badges {
    display:       flex;
    gap:           10px;
    margin-bottom: 20px;
    flex-wrap:     wrap;
}

.fn-type-badge {
    padding:       6px 16px;
    border-radius: var(--fn-radius-pill);
    border:        1px solid;
    font-size:     0.82rem;
    font-weight:   700;
}

.fn-type-badge--truth {
    background: var(--fn-truth-bg);
    border-color: var(--fn-truth-border);
    color: var(--text-primary );
}


.fn-type-badge--dare {
    background: var(--fn-dare-bg);
    border-color: var(--fn-dare-border);
    color: var(--text-primary );
}

/* Individual card preview rows */
.fn-card-previews {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.fn-card-preview {
    background:    var(--bg-surface);
    border:        1px solid var(--border-color);
    border-radius: var(--fn-radius-md);
    padding:       14px 16px;
    display:       flex;
    gap:           12px;
    align-items:   flex-start;
    transition:    border-color 0.2s ease;
}

.fn-card-preview:hover {
    border-color: rgba(197, 160, 125, 0.45);
}

.fn-card-preview__badge {
    flex-shrink:    0;
    padding:        3px 10px;
    border-radius:  6px;
    font-size:      0.65rem;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top:     3px;
}

.fn-card-preview__badge--truth {
    background: var(--fn-truth-bg);
    color: var(--text-primary);
}
.fn-card-preview__badge--dare {
    background: var(--fn-dare-bg);
    color: var(--text-primary);
}

.fn-card-preview__text {
    margin:      0;
    font-size:   0.88rem;
    color:       var(--text-primary);
    line-height: 1.6;
}

/* Locked / blurred cards */
.fn-card-locked {
    filter:         blur(4px);
    user-select:    none;
    pointer-events: none;
    opacity:        0.6;
}

.fn-locked-wrapper {
    position: relative;
    margin-top: 4px;
}

.fn-locked-overlay {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    background:      var(--fn-locked-overlay);
    border-radius:   var(--fn-radius-md);
    padding:         20px;
    text-align:      center;
}

.fn-locked-overlay__icon {
    font-size:     1.6rem;
    margin-bottom: 8px;
}

.fn-locked-overlay__text {
    font-size:     0.88rem;
    color:         var(--text-secondary);
    margin-bottom: 16px;
}


/* ─────────────────────────────────────────────────────────────
   11. CUMULATIVE ACCESS TIERS
   Sidebar section on Details page ("What you unlock") +
   compact includes note on Index grid cards.
   ───────────────────────────────────────────────────────────── */

/* ── Sidebar tier list ─────────────────────────────────────── */
.fn-access-tiers {
    margin:        0 0 20px;
    padding:       14px 16px;
    background:    var(--bg-surface-alt);
    border-radius: var(--fn-radius-md);
}

.fn-access-tiers__heading {
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--text-secondary);
    margin-bottom:  10px;
}

.fn-access-tier {
    display:     flex;
    align-items: baseline;
    gap:         8px;
    padding:     5px 0;
}

.fn-access-tier + .fn-access-tier {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.fn-access-tier__icon {
    font-size:   0.9rem;
    flex-shrink: 0;
    line-height: 1;
    position:    relative;
    top:         1px;
}

.fn-access-tier__name {
    font-size:   0.82rem;
    font-weight: 700;
    min-width:   74px;
    flex-shrink: 0;
}

.fn-access-tier__desc {
    font-size: 0.78rem;
    color: var(--text-primary );
    line-height: 1.4;
}

.fn-access-tier--warm .fn-access-tier__name {
    color: var(--text-primary);
}
.fn-access-tier--hot .fn-access-tier__name {
    color: var(--text-primary);
}
.fn-access-tier--scorching .fn-access-tier__name {
    color: var(--text-primary);
}

/* Word pool bonus row — Scorching only */
.fn-access-tier--bonus {
    margin-top:    8px;
    padding:       9px 10px;
    background:    rgba(197, 160, 125, 0.07);
    border:        1px solid rgba(197, 160, 125, 0.2);
    border-radius: var(--fn-radius-sm);
    align-items:   flex-start;
    gap:           10px;
}

.fn-access-tier--bonus .fn-access-tier__name {
    color: #c5a07d;
}

.fn-access-tier--bonus .fn-access-tier__desc {
    color: rgba(197, 160, 125, 0.75);
}

/* ── Index grid card — compact includes note ───────────────── */
.fn-pkg-card__includes {
    margin:      2px 0 8px;
    font-size:   0.72rem;
    color:       var(--text-secondary);
    line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────
   12. LANDING CTA  (bottom sign-up banner)
   ───────────────────────────────────────────────────────────── */
.fn-bottom-cta {
    padding:   clamp(56px, 9vw, 96px) 20px;
    background: var(--fn-cta-bg);
    text-align: center;
    position:   relative;
    overflow:   hidden;
}

.fn-bottom-cta__glow {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    background:     radial-gradient(ellipse 50% 70% at 50% 50%, var(--fn-cta-glow) 0%, transparent 70%);
}

.fn-bottom-cta__content {
    position: relative;
    z-index:  1;
}

.fn-bottom-cta__emoji {
    font-size:     2.5rem;
    margin-bottom: 12px;
    display:       block;
}

.fn-bottom-cta__title {
    font-family:   'Playfair Display', serif;
    font-size:     clamp(1.8rem, 5vw, 2.8rem);
    font-weight:   900;
    color:         var(--fn-cta-text);
    margin-bottom: 12px;
}

.fn-bottom-cta__desc {
    color:       var(--fn-cta-muted);
    font-size:   1rem;
    margin:      0 auto 32px;
    max-width:   400px;
    line-height: 1.6;
}

.fn-bottom-cta__btn {
    display:         inline-block;
    padding:         16px 44px;
    background:      var(--fn-btn-cta-bg);
    color:           white;
    font-weight:     700;
    font-size:       1.1rem;
    border-radius:   14px;
    text-decoration: none;
    box-shadow:      var(--fn-btn-cta-shadow);
    transition:      transform 0.2s ease;
}

.fn-bottom-cta__btn:hover {
    transform: translateY(-2px);
    color:     white;
}


/* ─────────────────────────────────────────────────────────────
   12. FOOTER
   ───────────────────────────────────────────────────────────── */
.game-footer {
    background:  #0b0b0d;
    border-top:  1px solid rgba(197, 160, 125, 0.1);
    padding:     22px 0;
}

.fn-footer-text {
    margin: 0;
    color:  rgba(197, 160, 125, 0.4);
}

.fn-footer-links {
    display:         flex;
    justify-content: center;
    gap:             20px;
    flex-wrap:       wrap;
    margin-bottom:   10px;
}

.fn-footer-link {
    font-size:       0.72rem;
    color:           rgba(197, 160, 125, 0.4);
    text-decoration: none;
    transition:      color 0.2s;
}
.fn-footer-link:hover { color: rgba(197, 160, 125, 0.8); }

/* ── LEGAL PAGES ─────────────────────────────────────────── */
.fn-legal-content { max-width: 780px; margin: 0 auto; }

.fn-legal-section {
    margin-bottom:  28px;
    padding-bottom: 28px;
    border-bottom:  1px solid var(--border-color);
}
.fn-legal-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.fn-legal-section h2 {
    font-family:   'Playfair Display', serif;
    font-size:     1.15rem;
    font-weight:   700;
    color:         var(--text-primary);
    margin-bottom: 10px;
}

.fn-legal-section p,
.fn-legal-section li {
    font-size:   0.9rem;
    color:       var(--text-secondary);
    line-height: 1.75;
}

.fn-legal-section ul {
    padding-left:  20px;
    margin-top:    8px;
}
.fn-legal-section li { margin-bottom: 4px; }

.fn-legal-section strong { color: var(--text-primary); }

.fn-legal-section a {
    color: #c5a07d;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fn-legal-age-banner {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       18px 20px;
    background:    rgba(190, 24, 93, 0.1);
    border:        1px solid rgba(190, 24, 93, 0.3);
    border-radius: var(--fn-radius-md);
    color:         #fda4af;
    font-size:     0.95rem;
    margin-bottom: 28px;
}

.fn-legal-age-icon { font-size: 2rem; flex-shrink: 0; }

.fn-legal-note {
    background:    rgba(197, 160, 125, 0.06);
    border-radius: var(--fn-radius-md);
    padding:       14px 18px !important;
}
.fn-legal-note p { font-size: 0.78rem !important; color: var(--text-secondary); }


/* ─────────────────────────────────────────────────────────────
   13. UTILITY  (shared helpers used across frontend pages)
   ───────────────────────────────────────────────────────────── */

/* Always-visible animation base */
.fn-animate {
    animation: fn-fade-up 0.6s ease both;
}

.fn-animate--d1 { animation-delay: 0.1s; }
.fn-animate--d2 { animation-delay: 0.2s; }
.fn-animate--d3 { animation-delay: 0.3s; }
.fn-animate--d4 { animation-delay: 0.4s; }
.fn-animate--d5 { animation-delay: 0.5s; }

/* Gradient text helper (brand colour) */
.fn-gradient-text {
    background:              var(--fn-hero-title-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

/* Stat band colour for sidebar (data-heat sets background via section 8) */
.fn-sidebar-band {
    height:        4px;
    border-radius: 4px;
    margin-bottom: 20px;
}


/* ─────────────────────────────────────────────────────────────
   14. ANIMATIONS
   ───────────────────────────────────────────────────────────── */
@keyframes fn-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fn-flicker {
    0%, 100% { transform: scale(1)   rotate(-2deg); }
    50%       { transform: scale(1.1) rotate(2deg);  }
}


/* ─────────────────────────────────────────────────────────────
   15. CREDIT SHOP
   ───────────────────────────────────────────────────────────── */

.fn-credit-shop {
    padding: 48px 0 80px;
}

.fn-credit-pkgs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 24px;
    margin: 40px 0;
}

.fn-credit-pkg {
    background:    var(--surface-card);
    border:        1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding:       32px 24px 28px;
    text-align:    center;
    position:      relative;
    transition:    border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.fn-credit-pkg:hover {
    border-color: var(--primary-crimson);
    transform:    translateY(-4px);
    box-shadow:   0 12px 40px rgba(166, 28, 60, 0.18);
}

.fn-credit-pkg--featured {
    border-color: var(--primary-crimson);
}

.fn-credit-pkg__badge {
    position:      absolute;
    top:           -13px;
    left:          50%;
    transform:     translateX(-50%);
    background:    var(--primary-crimson);
    color:         #fff;
    font-size:     11px;
    font-weight:   700;
    padding:       3px 16px;
    border-radius: 20px;
    white-space:   nowrap;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fn-credit-pkg__name {
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--text-muted);
    margin-bottom:  14px;
}

.fn-credit-pkg__amount {
    font-size:     52px;
    font-weight:   900;
    color:         var(--text-primary);
    line-height:   1;
    margin-bottom: 2px;
}

.fn-credit-pkg__unit {
    font-size:     13px;
    color:         var(--text-muted);
    margin-bottom: 20px;
    font-weight:   500;
}

.fn-credit-pkg__price {
    font-size:     30px;
    font-weight:   800;
    color:         var(--primary-crimson);
    margin-bottom: 6px;
    line-height:   1;
}

.fn-credit-pkg__tagline {
    font-size:     13px;
    color:         var(--text-muted);
    margin-bottom: 24px;
    min-height:    18px;
}

.fn-credit-pkg__btn {
    display:         block;
    width:           100%;
    padding:         12px 16px;
    background:      var(--primary-crimson);
    color:           #fff;
    font-size:       14px;
    font-weight:     700;
    border:          none;
    border-radius:   var(--radius-md);
    cursor:          pointer;
    transition:      background 0.2s, transform 0.15s;
    text-align:      center;
}

.fn-credit-pkg__btn:hover {
    background:  #c41d4a;
    transform:   scale(1.02);
    color:       #fff;
}

.fn-balance-bar {
    background:    var(--surface-card);
    border:        1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding:       16px 24px;
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 8px;
}

.fn-balance-bar__label {
    color:       var(--text-muted);
    font-size:   14px;
    flex:        1;
}

.fn-balance-bar__amount {
    font-size:   20px;
    font-weight: 800;
    color:       var(--text-primary);
}

.fn-credit-faq {
    margin-top:    48px;
    padding-top:   40px;
    border-top:    1px solid var(--border-subtle);
}

.fn-credit-faq__title {
    font-size:     20px;
    font-weight:   700;
    color:         var(--text-primary);
    margin-bottom: 24px;
}

.fn-credit-faq__item {
    margin-bottom: 20px;
}

.fn-credit-faq__q {
    font-size:     14px;
    font-weight:   700;
    color:         var(--text-primary);
    margin-bottom: 6px;
}

.fn-credit-faq__a {
    font-size:  14px;
    color:      var(--text-muted);
    line-height: 1.6;
}

/* Success / Cancel pages */
.fn-payment-result {
    min-height:      60vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         60px 20px;
}

.fn-payment-result__card {
    background:    var(--surface-card);
    border:        1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding:       48px 40px;
    text-align:    center;
    max-width:     480px;
    width:         100%;
}

.fn-payment-result__icon {
    font-size:     56px;
    margin-bottom: 20px;
    line-height:   1;
}

.fn-payment-result__title {
    font-size:     26px;
    font-weight:   800;
    color:         var(--text-primary);
    margin-bottom: 12px;
}

.fn-payment-result__body {
    font-size:     15px;
    color:         var(--text-muted);
    line-height:   1.7;
    margin-bottom: 32px;
}

.fn-payment-result__actions {
    display:        flex;
    gap:            12px;
    justify-content: center;
    flex-wrap:      wrap;
}

/* ─────────────────────────────────────────────────────────────
   17. HEAT LEVEL POPOVER + LEVELS PAGE
   ───────────────────────────────────────────────────────────── */

/* ── Popover panel (shown on hover over heat labels / badges) ── */
.fn-heat-popover {
    width:         280px;
    background:    #1a1a1e;
    border:        1px solid rgba(197, 160, 125, 0.2);
    border-radius: var(--fn-radius-md);
    padding:       16px;
    box-shadow:    0 12px 40px rgba(0, 0, 0, 0.55);
}

.fn-heat-popover--warm      { border-top: 3px solid var(--fn-heat-warm-color);      }
.fn-heat-popover--hot       { border-top: 3px solid var(--fn-heat-hot-color);       }
.fn-heat-popover--scorching { border-top: 3px solid var(--fn-heat-scorching-color); }

.fn-heat-popover__header {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 8px;
}

.fn-heat-popover__icon { font-size: 1.1rem; }

.fn-heat-popover__name {
    font-size:   0.9rem;
    font-weight: 800;
    color:       var(--text-primary);
}

.fn-heat-popover__desc {
    font-size:   0.78rem;
    color:       var(--text-secondary);
    line-height: 1.55;
    margin:      0 0 12px;
}

.fn-heat-popover__examples {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin-bottom:  12px;
}

.fn-heat-popover__ex-group {
    display:        flex;
    flex-direction: column;
    gap:            3px;
}

.fn-heat-popover__ex-label {
    font-size:      0.62rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          rgba(197, 160, 125, 0.5);
    margin-bottom:  2px;
}

.fn-heat-popover__ex-item {
    font-size:   0.75rem;
    color:       var(--text-secondary);
    line-height: 1.45;
    padding-left: 10px;
    position:    relative;
}
.fn-heat-popover__ex-item::before {
    content:  "·";
    position: absolute;
    left:     0;
    color:    rgba(197, 160, 125, 0.4);
}

.fn-heat-popover__link {
    font-size:       0.72rem;
    font-weight:     600;
    color:           #c5a07d;
    text-decoration: none;
}
.fn-heat-popover__link:hover {
    text-decoration: underline;
    color:           #c5a07d;
}

/* Trigger indicator */
.fn-heat-label--hoverable {
    cursor:        help;
    border-bottom: 1px dotted currentColor;
}

/* ── Heat Levels full page ─────────────────────────────────── */
.fn-heat-levels-page {
    padding: clamp(40px, 7vw, 72px) 0 clamp(48px, 8vw, 80px);
}

.fn-hl-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
    margin-bottom:         56px;
}

.fn-hl-card {
    background:     var(--bg-surface);
    border:         1px solid var(--border-color);
    border-radius:  var(--fn-radius-lg);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
}

.fn-hl-card__header {
    padding:         28px 24px 22px;
    display:         flex;
    flex-direction:  column;
    gap:             6px;
    min-height:      200px;
    justify-content: flex-end;
}

/* Per-level images — more specific than the generic [data-heat] gradient rule */
.fn-hl-card__header[data-heat="warm"] {
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%),
        url('/images/site/warm.png') top center / cover no-repeat;
}
.fn-hl-card__header[data-heat="hot"] {
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%),
        url('/images/site/hot.png') top center / cover no-repeat;
}
.fn-hl-card__header[data-heat="scorching"] {
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.6) 100%),
        url('/images/site/scorching.png') top center / cover no-repeat;
}

.fn-hl-card__level-num {
    font-size:      0.62rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color:          rgba(255, 255, 255, 0.45);
}

.fn-hl-card__title-row {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.fn-hl-card__icon { font-size: 1.8rem; }

.fn-hl-card__name {
    font-family: 'Playfair Display', serif;
    font-size:   1.6rem;
    font-weight: 700;
    font-style:  italic;
    color:       white;
    margin:      0;
}

.fn-hl-card__body {
    padding:        24px;
    flex:           1;
    display:        flex;
    flex-direction: column;
}

.fn-hl-card__desc {
    font-size:     0.9rem;
    color:         var(--text-secondary);
    line-height:   1.65;
    margin:        0 0 20px;
}

.fn-hl-card__section { margin-bottom: 18px; }

.fn-hl-card__section-title {
    font-size:      0.62rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          rgba(197, 160, 125, 0.5);
    margin-bottom:  8px;
}

.fn-hl-card__examples {
    list-style:     none;
    padding:        0;
    margin:         0;
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.fn-hl-card__examples li {
    font-size:    0.83rem;
    color:        var(--text-primary);
    line-height:  1.5;
    padding-left: 14px;
    position:     relative;
}

.fn-hl-card__examples li::before {
    content:  "·";
    position: absolute;
    left:     0;
    color:    rgba(197, 160, 125, 0.45);
}

.fn-hl-card__btn {
    display:         inline-block;
    margin-top:      auto;
    padding-top:     20px;
    font-size:       0.82rem;
    font-weight:     700;
    text-decoration: none;
    transition:      opacity 0.2s;
}

.fn-hl-card__btn--warm      { color: var(--fn-heat-warm-color);      }
.fn-hl-card__btn--hot       { color: var(--fn-heat-hot-color);       }
.fn-hl-card__btn--scorching { color: var(--fn-heat-scorching-color); }
.fn-hl-card__btn:hover      { opacity: 0.75;                         }

/* How levels stack section */
.fn-hl-stacking {
    text-align: center;
    max-width:  580px;
    margin:     0 auto;
}

.fn-hl-stacking__title {
    font-family:   'Playfair Display', serif;
    font-size:     1.35rem;
    font-weight:   700;
    color:         var(--text-primary);
    margin-bottom: 10px;
}

.fn-hl-stacking__desc {
    font-size:     0.88rem;
    color:         var(--text-secondary);
    line-height:   1.65;
    margin-bottom: 24px;
}

.fn-hl-stacking__tiers {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.fn-hl-tier {
    display:       grid;
    grid-template-columns: 24px 90px 1fr;
    align-items:   center;
    gap:           12px;
    padding:       12px 20px;
    border-radius: var(--fn-radius-md);
    background:    var(--bg-surface);
    border:        1px solid var(--border-color);
    text-align:    left;
}

.fn-hl-tier__icon { font-size: 1rem; }

.fn-hl-tier__name {
    font-size:   0.82rem;
    font-weight: 700;
}

.fn-hl-tier__desc {
    font-size:   0.78rem;
    color:       var(--text-secondary);
}

.fn-hl-tier--warm      .fn-hl-tier__name { color: var(--fn-heat-warm-color);      }
.fn-hl-tier--hot       .fn-hl-tier__name { color: var(--fn-heat-hot-color);       }
.fn-hl-tier--scorching .fn-hl-tier__name { color: var(--fn-heat-scorching-color); }

@media (max-width: 960px) {
    .fn-hl-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
}


/* ─────────────────────────────────────────────────────────────
   16. RESPONSIVE  (mobile overrides, ≤ 640 px)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .fn-hero { min-height: auto; }
    .fn-hero__content { grid-template-columns: 1fr; padding-top: 52px; padding-bottom: 44px; }
    .fn-hero__copy    { padding-right: 0; }
    .fn-hero__image   { display: none; }

    .fn-pkg-card__thumbnail { height: 200px; }

    .fn-pkg-hero { height: clamp(160px, 45vw, 220px); }

    .fn-pkg-sidebar { position: static; }

    .fn-filter-btn { font-size: 0.8rem; padding: 7px 14px; }

    .fn-credits-cta { padding: 20px; }

    .fn-credit-pkgs { grid-template-columns: 1fr 1fr; gap: 16px; }
    .fn-credit-pkg__amount { font-size: 40px; }
    .fn-payment-result__card { padding: 36px 24px; }

    .fn-profile-stat { padding: 14px; }
    .fn-profile-stat__val { font-size: 1.4rem; }
    .fn-session-row { flex-wrap: wrap; gap: 6px; }
}


/* ─────────────────────────────────────────────────────────────
   16. PROFILE PAGE
   ───────────────────────────────────────────────────────────── */
.fn-profile-stat {
    padding:    20px;
    text-align: center;
    height:     100%;
}
.fn-profile-stat__val {
    font-size:     1.9rem;
    font-weight:   900;
    color:         #c5a07d;
    display:       block;
    line-height:   1;
    margin-bottom: 6px;
}
.fn-profile-stat__lbl {
    font-size:      0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          var(--text-secondary);
    display:        block;
    margin-bottom:  4px;
}
.fn-profile-stat__link {
    display:         block;
    margin-top:      6px;
    font-size:       0.72rem;
    color:           #c5a07d;
    text-decoration: none;
}
.fn-profile-stat__link:hover { text-decoration: underline; }

.fn-profile-card { padding: 22px; }

.fn-profile-card__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   16px;
    padding-bottom:  12px;
    border-bottom:   1px solid var(--border-color);
}
.fn-profile-card__title {
    font-size:   1rem;
    font-weight: 700;
    color:       var(--text-primary);
    margin:      0;
    font-family: 'Poppins', sans-serif;
}
.fn-profile-card__link {
    font-size:       0.78rem;
    color:           #c5a07d;
    text-decoration: none;
}
.fn-profile-card__link:hover { text-decoration: underline; }
.fn-profile-card__meta {
    font-size:  0.72rem;
    color:      var(--text-secondary);
}

.fn-profile-empty {
    font-size:  0.88rem;
    color:      var(--text-secondary);
    font-style: italic;
    margin:     0;
}
.fn-profile-empty a { color: #c5a07d; }

/* Owned pack rows */
.fn-profile-packs { display: flex; flex-direction: column; gap: 8px; }

.fn-profile-pack-row {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 12px;
    background:    var(--bg-surface-alt);
    border-radius: var(--fn-radius-md);
}
.fn-profile-pack-heat  { font-size: 1.1rem; flex-shrink: 0; }
.fn-profile-pack-name  { flex: 1; font-weight: 600; font-size: 0.88rem; color: var(--text-primary); }
.fn-profile-pack-count { font-size: 0.72rem; color: var(--text-secondary); flex-shrink: 0; }

/* Session history */
.fn-profile-sessions { display: flex; flex-direction: column; }

.fn-session-row {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       10px 0;
    border-bottom: 1px solid var(--border-color);
    font-size:     0.84rem;
}
.fn-session-row:last-child { border-bottom: none; }

.fn-session-heat   { flex-shrink: 0; min-width: 82px; color: var(--text-primary); font-weight: 600; }
.fn-session-counts { flex: 1; color: var(--text-secondary); font-size: 0.78rem; }
.fn-session-meta   { flex-shrink: 0; color: var(--text-secondary); font-size: 0.72rem; min-width: 36px; text-align: right; }

/* Referral */
.fn-referral-code {
    font-family:    'Poppins', sans-serif;
    font-size:      1.5rem;
    font-weight:    800;
    letter-spacing: 0.18em;
    color:          #c5a07d;
    text-align:     center;
    padding:        14px;
    background:     rgba(197, 160, 125, 0.07);
    border:         1px solid rgba(197, 160, 125, 0.22);
    border-radius:  var(--fn-radius-md);
    margin-bottom:  10px;
}
.fn-profile-hint {
    font-size:     0.78rem;
    color:         var(--text-secondary);
    margin-bottom: 6px;
    line-height:   1.5;
}
.fn-referral-url {
    font-size:     0.68rem;
    color:         var(--text-secondary);
    word-break:    break-all;
    padding:       8px 10px;
    background:    var(--bg-surface-alt);
    border-radius: var(--fn-radius-sm);
    margin-bottom: 8px;
}
.fn-btn-copy {
    width:         100%;
    padding:       10px;
    background:    rgba(197, 160, 125, 0.1);
    border:        1px solid rgba(197, 160, 125, 0.25);
    border-radius: var(--fn-radius-md);
    color:         #c5a07d;
    font-family:   inherit;
    font-size:     0.85rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.15s;
}
.fn-btn-copy:hover { background: rgba(197, 160, 125, 0.18); }

/* Preferences */
.fn-pref-group  { margin-bottom: 16px; }
.fn-pref-label  {
    display:        block;
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--text-secondary);
    margin-bottom:  8px;
    font-family:    'Poppins', sans-serif;
}

.fn-heat-select { display: flex; gap: 6px; }

.fn-heat-opt {
    flex:          1;
    text-align:    center;
    padding:       8px 4px;
    border-radius: var(--fn-radius-md);
    border:        1.5px solid var(--border-color);
    font-size:     0.76rem;
    font-weight:   600;
    cursor:        pointer;
    color:         var(--text-secondary);
    background:    var(--bg-surface-alt);
    transition:    all 0.15s;
    font-family:   'Poppins', sans-serif;
}
.fn-heat-opt input     { display: none; }
.fn-heat-opt:hover     { border-color: rgba(197,160,125,0.4); color: var(--text-primary); }
.fn-heat-opt--active   { border-color: #c5a07d; background: rgba(197,160,125,0.1); color: #c5a07d; }

.fn-pref-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         11px 0;
    border-bottom:   1px solid var(--border-color);
}
.fn-pref-row + .fn-btn-purchase { margin-top: 14px; }
.fn-pref-row__label { font-size: 0.88rem; color: var(--text-primary); font-weight: 500; }

.fn-pref-toggle { position: relative; width: 44px; height: 24px; cursor: pointer; flex-shrink: 0; }
.fn-pref-toggle input { opacity: 0; width: 0; height: 0; }
.fn-pref-toggle__slider {
    position:      absolute;
    inset:         0;
    background:    var(--bg-surface-alt);
    border:        1px solid var(--border-color);
    border-radius: 24px;
    transition:    0.25s;
}
.fn-pref-toggle__slider::before {
    content:       '';
    position:      absolute;
    width:         18px;
    height:        18px;
    left:          2px;
    top:           2px;
    background:    white;
    border-radius: 50%;
    transition:    0.25s;
    box-shadow:    0 1px 4px rgba(0,0,0,0.2);
}
.fn-pref-toggle input:checked + .fn-pref-toggle__slider             { background: #c5a07d; border-color: #c5a07d; }
.fn-pref-toggle input:checked + .fn-pref-toggle__slider::before     { transform: translateX(20px); }

/* Account */
.fn-account-rows   { margin-bottom: 12px; }
.fn-account-row    { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-color); }
.fn-account-row:last-child { border-bottom: none; }
.fn-account-label  { color: var(--text-secondary); font-size: 0.78rem; }
.fn-account-value  { color: var(--text-primary); font-size: 0.85rem; font-weight: 500; }


/* ─────────────────────────────────────────────────────────────
   AGE GATE MODAL
   ───────────────────────────────────────────────────────────── */
.age-gate-dialog    { max-width: 460px; padding: 2.5rem 2rem; }

.age-gate-icon      {
    display:        inline-block;
    font-size:      2rem;
    font-weight:    800;
    letter-spacing: 0.04em;
    color:          var(--primary-crimson);
    border:         3px solid var(--primary-crimson);
    border-radius:  50%;
    width:          72px;
    height:         72px;
    line-height:    66px;
    margin-bottom:  1.25rem;
}

.age-gate-title     {
    font-family:    'Playfair Display', serif;
    font-size:      1.7rem;
    color:          var(--text-dark);
    margin-bottom:  0.75rem;
}

.age-gate-body      {
    color:          #9980aa;
    font-size:      0.95rem;
    line-height:    1.6;
    margin-bottom:  0;
}

.age-gate-actions   {
    display:        flex;
    gap:            12px;
    justify-content: center;
    margin-top:     1.75rem;
    flex-wrap:      wrap;
}


/* ─────────────────────────────────────────────────────────────
   REGISTER PAGE
   ───────────────────────────────────────────────────────────── */
.reg-referral-input { text-transform: uppercase; letter-spacing: 0.1em; }

.reg-age-hint       { margin-top: 4px; }
.reg-age-ok         { color: #6abf69; }
.reg-age-under      { color: var(--primary-crimson); }

.reg-tos-wrap       { }
.reg-tos-label      { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.reg-tos-text       { color: #9980aa; line-height: 1.5; }
.reg-tos-link       { color: var(--primary-crimson); }
.reg-tos-cb {
    appearance:    none;
    -webkit-appearance: none;
    flex-shrink:   0;
    width:         22px;
    height:        22px;
    margin-top:    2px;
    border:        2px solid var(--border-color-strong, #6b5c7a);
    border-radius: 4px;
    background:    var(--bg-input, #fff);
    cursor:        pointer;
    transition:    background 0.15s, border-color 0.15s;
}
.reg-tos-cb:checked {
    background:    var(--primary-crimson);
    border-color:  var(--primary-crimson);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8l4 4 7-7'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: center;
    background-size:     14px;
}


/* =============================================================
   HISTORY PAGE
   ============================================================= */
.fn-history-tabs { margin-bottom: 24px; }

.fn-history-badge {
    display:       inline-block;
    background:    rgba(197,160,125,0.18);
    color:         #c5a07d;
    font-size:     0.68rem;
    font-weight:   700;
    padding:       1px 6px;
    border-radius: 10px;
    margin-left:   4px;
    vertical-align: middle;
}

.fn-history-name  { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.fn-history-desc  { font-size: 0.87rem; color: var(--text-primary); }
.fn-history-source { font-size: 0.78rem; color: #9980aa; }
.fn-history-date   { font-size: 0.78rem; color: #9980aa; }
.fn-history-amount { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.fn-history-link   { color: var(--primary-crimson); }

.fn-history-credits {
    font-size:   0.9rem;
    font-weight: 700;
}
.fn-history-credits--positive { color: #6abf69; }
.fn-history-credits--negative { color: var(--primary-crimson); }

.fn-history-empty {
    text-align:  center;
    padding:     48px 20px;
    color:       #9980aa;
    font-size:   0.9rem;
}
.fn-history-empty__icon { font-size: 2.5rem; margin-bottom: 12px; }

.fn-heat-chip {
    display:       inline-block;
    font-size:     0.72rem;
    font-weight:   600;
    padding:       2px 8px;
    border-radius: 10px;
}
.fn-heat-chip--warm      { background: rgba(255,200,100,0.15); color: #c8a040; }
.fn-heat-chip--hot       { background: rgba(255,100,50,0.15);  color: #e06030; }
.fn-heat-chip--scorching { background: rgba(220,50,50,0.15);   color: #d03030; }
.fn-heat-chip--vanilla   { background: rgba(180,180,220,0.15); color: #9980aa; }

/* ── SVG heat icon support ─────────────────────────────────── */
.fn-heat-badge svg, .fn-pkg-card__heat-label svg, .fn-pkg-hero__heat-badge svg,
.fn-heat-chip svg, .fn-heat-opt svg, .fn-profile-pack-heat svg, .fn-session-heat svg,
.fn-heat-popover__icon svg, .fn-hl-card__icon svg, .fn-hl-tier__icon svg,
.fn-access-tier__icon svg, .fn-pkg-card__thumb-icon svg { vertical-align: middle; }

.fn-pkg-card__thumb-icon svg { width: 2.5rem; height: 2.5rem; display: block; }

.fn-heat-popover--warm      .fn-heat-popover__icon,
.fn-hl-card__header[data-heat="warm"]      .fn-hl-card__icon,
.fn-hl-tier--warm      .fn-hl-tier__icon,
.fn-access-tier--warm  .fn-access-tier__icon { color: var(--fn-heat-warm-color); }

.fn-heat-popover--hot       .fn-heat-popover__icon,
.fn-hl-card__header[data-heat="hot"]       .fn-hl-card__icon,
.fn-hl-tier--hot       .fn-hl-tier__icon,
.fn-access-tier--hot   .fn-access-tier__icon { color: var(--fn-heat-hot-color); }

.fn-heat-popover--scorching .fn-heat-popover__icon,
.fn-hl-card__header[data-heat="scorching"] .fn-hl-card__icon,
.fn-hl-tier--scorching .fn-hl-tier__icon,
.fn-access-tier--scorching .fn-access-tier__icon { color: var(--fn-heat-scorching-color); }

.fn-pkg-card__thumbnail[data-heat="warm"]      .fn-pkg-card__thumb-icon { color: var(--fn-heat-warm-color); }
.fn-pkg-card__thumbnail[data-heat="hot"]       .fn-pkg-card__thumb-icon { color: var(--fn-heat-hot-color); }
.fn-pkg-card__thumbnail[data-heat="scorching"] .fn-pkg-card__thumb-icon { color: var(--fn-heat-scorching-color); }

/* ── REV'S PRIVATE STOCK (Profile/RevCards) ─────────────────── */
.fn-revcard-retired .fn-history-name {
    opacity: 0.45;
    text-decoration: line-through;
}