/* =========================================================================
   FreePlinko Landing-page — White-paper layout
   Activated by adding `paper-mode` class to <body> on each landing page.
   Targets: ball-drop-game, free-plinko-game, plinko-app, blackjack,
            crash-or-cash, solitaire, video-poker
   Scope:  body wash + content modules (page-title, hero-badges, mini-card,
           feature-card, game-card, faq-item, cta-box etc.)
   Preserved: navbar, mobile menu, footer (kept in original brand-dark theme)
   Notes:   Uses !important sparingly because each landing page ships its
            own self-contained <style> block we don't want to rewrite.
   ========================================================================= */

/* ---------- Body wash ---------- */
body.paper-mode {
    background: #EEF0F4 !important;
    color: #1F2937 !important;
}

body.paper-mode::before {
    display: none !important;
}

/* ---------- Breadcrumb ---------- */
body.paper-mode .breadcrumb {
    color: #475569 !important;
    margin-top: 100px;
}
body.paper-mode .breadcrumb a {
    color: #6366F1 !important;
}
body.paper-mode .breadcrumb .current,
body.paper-mode .breadcrumb span {
    color: #64748B !important;
}

/* ---------- Page header (above the fold) ---------- */
body.paper-mode .page-header {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 18px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 32px rgba(15, 23, 42, 0.06);
    padding: 3rem 2.5rem !important;
    margin: 1.5rem auto 2rem !important;
    max-width: 880px;
}

body.paper-mode .page-title,
body.paper-mode h1.page-title {
    font-family: 'Orbitron', monospace;
    font-size: 2.1rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
}

body.paper-mode .page-subtitle {
    color: #475569 !important;
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
}

body.paper-mode .last-updated {
    color: #94A3B8 !important;
    font-size: 0.85rem !important;
}

/* ---------- Hero badges & pills ---------- */
body.paper-mode .hero-badges {
    margin: 1.25rem 0 1.5rem !important;
}

body.paper-mode .hero-badges .badge,
body.paper-mode .badge {
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    color: #1E293B !important;
}

body.paper-mode .pill-link {
    background: #EEF2FF !important;
    border: 1px solid #C7D2FE !important;
    color: #4F46E5 !important;
}

body.paper-mode .pill-link:hover {
    background: #E0E7FF !important;
    color: #4338CA !important;
}

/* ---------- Hero CTA buttons ---------- */
body.paper-mode .hero-cta,
body.paper-mode .play-now-btn,
body.paper-mode .cta-row a,
body.paper-mode a.cta {
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%) !important;
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    border: 1px solid transparent !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
}

body.paper-mode .hero-cta:hover,
body.paper-mode .play-now-btn:hover,
body.paper-mode .cta-row a:hover,
body.paper-mode a.cta:hover {
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

/* Secondary CTA (when used as a row of two) */
body.paper-mode .cta-back {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    color: #4F46E5 !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* ---------- Section / content blocks ---------- */
body.paper-mode .section,
body.paper-mode .content-section {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 18px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 32px rgba(15, 23, 42, 0.06);
    padding: 2.5rem !important;
    margin: 1.5rem auto !important;
    max-width: 880px;
    color: #1F2937 !important;
}

body.paper-mode .section h2,
body.paper-mode .content-section h2,
body.paper-mode .category-title {
    font-family: 'Inter', sans-serif !important;
    color: #0F172A !important;
    font-weight: 800 !important;
    font-size: 1.55rem !important;
    line-height: 1.3 !important;
    margin: 0 0 1.1rem !important;
    background: none !important;
    -webkit-text-fill-color: #0F172A !important;
    letter-spacing: -0.005em;
}

body.paper-mode .section h3,
body.paper-mode .content-section h3 {
    font-family: 'Inter', sans-serif !important;
    color: #1E293B !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    line-height: 1.35 !important;
    margin: 1.5rem 0 0.7rem !important;
    background: none !important;
    -webkit-text-fill-color: #1E293B !important;
}

body.paper-mode .section p,
body.paper-mode .content-section p,
body.paper-mode .two-col p {
    color: #1F2937 !important;
    font-size: 1.0625rem !important;
    line-height: 1.8 !important;
}

body.paper-mode .section strong,
body.paper-mode .content-section strong {
    color: #0F172A !important;
    font-weight: 700 !important;
}

body.paper-mode .section em,
body.paper-mode .content-section em {
    color: #1F2937 !important;
    font-style: italic;
}

body.paper-mode .section ul,
body.paper-mode .content-section ul,
body.paper-mode .section ol,
body.paper-mode .content-section ol {
    color: #1F2937 !important;
    font-size: 1.0625rem !important;
    line-height: 1.8 !important;
}

body.paper-mode .section li::marker,
body.paper-mode .content-section li::marker {
    color: #6366F1;
}

body.paper-mode .section a,
body.paper-mode .content-section a,
body.paper-mode .inline-link {
    color: #6366F1 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.35) !important;
}

body.paper-mode .section a:hover,
body.paper-mode .content-section a:hover,
body.paper-mode .inline-link:hover {
    color: #4F46E5 !important;
    border-bottom-color: #6366F1 !important;
}

/* CTA buttons inside sections — keep gradient + white text (must come AFTER .section a) */
body.paper-mode .section a.cta,
body.paper-mode .content-section a.cta,
body.paper-mode .section .cta-row a,
body.paper-mode .content-section .cta-row a {
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%) !important;
    color: #FFFFFF !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25) !important;
}

body.paper-mode .section a.cta:hover,
body.paper-mode .content-section a.cta:hover,
body.paper-mode .section .cta-row a:hover,
body.paper-mode .content-section .cta-row a:hover {
    color: #FFFFFF !important;
    border-bottom-color: transparent !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
    transform: translateY(-1px);
}

/* Pill links inside sections — keep their pill style */
body.paper-mode .section a.pill-link,
body.paper-mode .content-section a.pill-link,
body.paper-mode .section .internal-links a,
body.paper-mode .content-section .internal-links a {
    background: #EEF2FF !important;
    border: 1px solid #C7D2FE !important;
    border-bottom: 1px solid #C7D2FE !important;
    color: #4F46E5 !important;
}

body.paper-mode .section a.pill-link:hover,
body.paper-mode .content-section a.pill-link:hover {
    background: #E0E7FF !important;
    color: #4338CA !important;
    border-bottom-color: #C7D2FE !important;
}

/* Two-column inside white sections */
body.paper-mode .two-col {
    color: #1F2937 !important;
}

/* ---------- Mini cards (small inline info cards) ---------- */
body.paper-mode .mini-card {
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    color: #1F2937 !important;
    border-radius: 14px;
    box-shadow: none !important;
}

body.paper-mode .mini-card h3,
body.paper-mode .mini-card h4 {
    color: #0F172A !important;
    background: none !important;
    -webkit-text-fill-color: #0F172A !important;
}

body.paper-mode .mini-card p {
    color: #1F2937 !important;
}

/* ---------- Game slots / Game cards (homepage-style links) ---------- */
body.paper-mode .game-slot,
body.paper-mode .game-card {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    color: #1F2937 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    border-radius: 14px;
    transition: all 0.2s ease;
}

body.paper-mode .game-slot:hover,
body.paper-mode .game-card:hover {
    border-color: #C7D2FE !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.15) !important;
    transform: translateY(-2px);
}

body.paper-mode .game-card-title {
    color: #0F172A !important;
    background: none !important;
    -webkit-text-fill-color: #0F172A !important;
}

body.paper-mode .game-card-desc {
    color: #475569 !important;
}

body.paper-mode .game-card-emoji {
    /* keep as-is, emojis don't need theme tweaking */
}

/* ---------- Feature cards ---------- */
body.paper-mode .features-grid .feature-card,
body.paper-mode .feature-card {
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    color: #1F2937 !important;
    border-radius: 14px;
    box-shadow: none !important;
}

body.paper-mode .feature-card h3,
body.paper-mode .feature-card h4 {
    color: #0F172A !important;
    background: none !important;
    -webkit-text-fill-color: #0F172A !important;
}

body.paper-mode .feature-card p {
    color: #334155 !important;
}

/* ---------- Category cards (game category buckets) ---------- */
body.paper-mode .category-card {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    color: #1F2937 !important;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

body.paper-mode .category-card-title {
    color: #0F172A !important;
    background: none !important;
    -webkit-text-fill-color: #0F172A !important;
}

body.paper-mode .category-card-desc {
    color: #475569 !important;
}

body.paper-mode .category-card-count {
    color: #6366F1 !important;
    font-weight: 700;
}

body.paper-mode .category-card-games a {
    color: #4F46E5 !important;
}

/* ---------- Tag chips ---------- */
body.paper-mode .game-card-tag {
    background: #EEF2FF !important;
    color: #4F46E5 !important;
    border: 1px solid #C7D2FE !important;
}

/* Slight per-tag tint variations to keep category recognition */
body.paper-mode .tag-crash    { background: #FEF2F2 !important; color: #B91C1C !important; border-color: #FECACA !important; }
body.paper-mode .tag-card     { background: #ECFDF5 !important; color: #047857 !important; border-color: #A7F3D0 !important; }
body.paper-mode .tag-table    { background: #FEF3C7 !important; color: #92400E !important; border-color: #FDE68A !important; }
body.paper-mode .tag-classic  { background: #F1F5F9 !important; color: #1E293B !important; border-color: #E2E8F0 !important; }
body.paper-mode .tag-strategy { background: #EEF2FF !important; color: #4F46E5 !important; border-color: #C7D2FE !important; }
body.paper-mode .tag-slot     { background: #FAE8FF !important; color: #86198F !important; border-color: #F0ABFC !important; }
body.paper-mode .tag-number   { background: #ECFEFF !important; color: #0E7490 !important; border-color: #A5F3FC !important; }
body.paper-mode .tag-pairing,
body.paper-mode .tag-payout,
body.paper-mode .tag-variant,
body.paper-mode .tag-special,
body.paper-mode .tag-challenge { background: #F5F3FF !important; color: #6D28D9 !important; border-color: #DDD6FE !important; }

/* ---------- Internal links module ---------- */
body.paper-mode .internal-links {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 16px;
    padding: 2rem !important;
    color: #1F2937 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

body.paper-mode .internal-links h2,
body.paper-mode .internal-links h3 {
    color: #0F172A !important;
    background: none !important;
    -webkit-text-fill-color: #0F172A !important;
}

body.paper-mode .internal-links a {
    color: #6366F1 !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.35) !important;
}

body.paper-mode .internal-links a:hover {
    color: #4F46E5 !important;
    border-bottom-color: #6366F1 !important;
}

/* ---------- FAQ ---------- */
body.paper-mode .faq-item {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 12px;
    color: #1F2937 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

body.paper-mode .faq-item.open {
    border-color: #6366F1 !important;
}

body.paper-mode .faq-q {
    color: #0F172A !important;
    font-weight: 700 !important;
}

body.paper-mode .faq-q:hover {
    color: #4F46E5 !important;
}

body.paper-mode .faq-a,
body.paper-mode .faq-a p {
    color: #334155 !important;
    line-height: 1.75 !important;
}

body.paper-mode .faq-a a {
    color: #6366F1 !important;
}

/* ---------- CTA box (light variant) ---------- */
body.paper-mode .cta-box {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
    color: #0F172A !important;
    border-radius: 14px;
    /* Constrain width to match body sections so the box doesn't span full viewport */
    max-width: 880px;
    margin: 1.5rem auto !important;
    padding: 2.25rem 2rem !important;
    text-align: center;
}

body.paper-mode .cta-box h2 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.45rem !important;
    line-height: 1.3 !important;
    color: #0F172A !important;
    background: none !important;
    -webkit-text-fill-color: #0F172A !important;
    margin: 0 0 0.6rem !important;
}

body.paper-mode .cta-box p {
    color: #1E293B !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    max-width: 560px;
    margin: 0 auto 1.25rem !important;
}

body.paper-mode .cta-box a {
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-bottom: none !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
}

/* Secondary back link inside cta-box (e.g. "← Back to Pachinko Rush") */
body.paper-mode .cta-box .cta-back {
    display: inline-block;
    margin-top: 0.9rem;
    background: transparent !important;
    color: #6366F1 !important;
    border: 1px solid #C7D2FE !important;
    text-shadow: none !important;
    box-shadow: none !important;
    padding: 0.55rem 1.2rem !important;
    font-size: 0.95rem !important;
}

body.paper-mode .cta-box .cta-back:hover {
    background: #EEF2FF !important;
    color: #4338CA !important;
}

/* ---------- Footer (paper-mode variant) ---------- */
/* Match the navbar's dark navy so header + footer bookend the white-paper body. */
body.paper-mode .footer {
    background: rgba(10, 14, 26, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #94A3B8 !important;
}

body.paper-mode .footer .copyright-info p {
    color: #94A3B8 !important;
}

body.paper-mode .footer .copyright-info p:first-child {
    color: #FFFFFF !important;
    font-weight: 500;
}

body.paper-mode .footer .footer-links a {
    color: #3B82F6 !important;
}

body.paper-mode .footer .footer-links a:hover {
    color: #60A5FA !important;
    text-decoration: underline;
}

body.paper-mode .footer .footer-links span {
    color: #475569 !important;
}

/* ---------- Mobile tuning ---------- */
@media (max-width: 768px) {
    body.paper-mode .page-header,
    body.paper-mode .section,
    body.paper-mode .content-section,
    body.paper-mode .internal-links {
        padding: 2rem 1.4rem !important;
        border-radius: 14px;
        margin: 1rem auto 1.5rem !important;
    }
    body.paper-mode .breadcrumb {
        margin-top: 80px;
    }
    body.paper-mode .page-title,
    body.paper-mode h1.page-title {
        font-size: 1.6rem !important;
    }
    body.paper-mode .page-subtitle {
        font-size: 1rem !important;
    }
    body.paper-mode .section h2,
    body.paper-mode .content-section h2,
    body.paper-mode .category-title {
        font-size: 1.25rem !important;
    }
    body.paper-mode .section h3,
    body.paper-mode .content-section h3 {
        font-size: 1.08rem !important;
    }
    body.paper-mode .section p,
    body.paper-mode .content-section p,
    body.paper-mode .section ul,
    body.paper-mode .content-section ul,
    body.paper-mode .section ol,
    body.paper-mode .content-section ol {
        font-size: 1rem !important;
        line-height: 1.75 !important;
    }
    body.paper-mode .faq-q {
        font-size: 1rem !important;
    }
}
