/* Funquizo segment main bundle. Compatibility build: shared main-column CSS for category/hub pages. */

/* Shared page shell extracted from category templates. */
.segment-page-shell {
    width: min(1280px, calc(100% - 48px));
    max-width: none;
    margin: 0 auto;
    padding: .2rem 0 1rem;
    box-sizing: border-box;
}
.segment-page-shell--narrow {
    width: auto;
    max-width: 1000px;
}
.riddle-single-wrap.trivia-single-page {
    width: min(1280px, calc(100% - 48px));
    max-width: 1280px;
    padding-top: .75rem;
}
.riddle-single-wrap.riddle-single-page {
    width: min(1280px, calc(100% - 48px));
    max-width: 1280px;
    padding-top: .75rem;
}
.riddle-single-wrap.true-false-single-page {
    width: min(1280px, calc(100% - 48px));
    max-width: 1280px;
    padding-top: .75rem;
}
.riddle-single-wrap.true-false-single-page .trivia-hub-multiplayer {
    margin-top: 1.25rem;
}
.riddle-single-wrap.trivia-single-page .trivia-hub-multiplayer {
    margin-top: 1.25rem;
}
.riddle-single-wrap.trivia-single-page .trivia-hub-multiplayer + .riddle-section {
    margin-top: 1rem;
}
@media (max-width: 760px) {
    .riddle-single-wrap.trivia-single-page,
    .riddle-single-wrap.riddle-single-page,
    .riddle-single-wrap.true-false-single-page {
        width: calc(100% - 14px);
    }
}
.segment-page-hero {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 4rem;
}
.segment-page-intro {
    font-size: 1.1rem;
    color: #475569;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: calc(3rem - 10px);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* True/False category lists use the full available main-column width. */
.tf-category-content-section {
    width: 100%;
    max-width: none;
    margin: 0 auto;
}

.trivia-segment-questions {
    padding: 0;
}

/* ===== assets/css/category.css ===== */
    .primary-cta:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 25px 50px rgba(236, 72, 153, 0.5) !important;
        background: #f472b6 !important;
   }
    .seo-html-content h3 {
        font-size: 1.6rem;
        font-weight: 850;
        color: #1e293b;
        margin: 3rem 0 1.2rem;
        padding: 0;
        background: none;
        border: none;
        display: block;
    }
    .seo-html-content h3::after {
        display: none !important;
    }
    .seo-html-content p {
        margin-bottom: 1.5rem;
    }
    @media (max-width: 600px) {
        .container { padding-left: 1rem !important; padding-right: 1rem !important; }
        .category-page { padding: 1rem 0 !important; }
        .hero-section h1 { font-size: 2.2rem !important; }
        .hero-section .primary-cta { padding: 1.2rem 2.5rem !important; font-size: 1.4rem !important; width: 100%; box-sizing: border-box; }
        .interactive-card { padding: 1.5rem 0.75rem !important; border-radius: 20px !important; margin: 0 !important; width: 100% !important; box-sizing: border-box; }
        .interactive-card p { font-size: 1.2rem !important; margin-bottom: 1.5rem !important; line-height: 1.3 !important; }
        .example-buttons:not(.wyr-choice-layout), .example-results:not(.wyr-choice-layout) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.65rem !important; }
        .example-buttons:not(.wyr-choice-layout) > button { width: 100% !important; min-width: 0 !important; max-width: none !important; padding-left: .35rem !important; padding-right: .35rem !important; font-size: 1rem !important; }
        .riddle-example-badge { padding: .55rem 1.35rem !important; font-size: .75rem !important; letter-spacing: .06em !important; }
        .interactive-card .riddle-actions { flex-wrap: wrap !important; gap: .65rem !important; width: 100%; }
        .interactive-card .riddle-actions > div { flex: 1 1 0 !important; min-width: 0 !important; }
        .interactive-card .riddle-actions > .riddle-read-more { flex: 0 0 100% !important; order: 3; margin-top: .15rem; }
        .interactive-card .riddle-actions .hint-btn,
        .interactive-card .riddle-actions .answer-btn { width: 100% !important; min-width: 0 !important; max-width: none !important; font-size: 1rem !important; padding-left: .75rem !important; padding-right: .75rem !important; }
        .vote-btn:not(.wyr-choice) { padding: 1.2rem !important; border-radius: 16px !important; }
        .option-a, .option-b { padding: 1.2rem 0.75rem !important; }
        .pct-a, .pct-b { font-size: 2.2rem !important; }
        
        #conversion-cta { padding: 2rem 1rem !important; border-radius: 24px !important; }
        #conversion-cta h3 { font-size: 1.5rem !important; }
        #conversion-cta a { padding: 1.1rem 2rem !important; font-size: 1.1rem !important; width: 100%; box-sizing: border-box; }
        
        .seo-section { padding: 2rem 1rem !important; }
        .seo-section h2 { font-size: 1.8rem !important; margin-bottom: 1rem !important; margin-top: 2rem !important; }
        .seo-content-block { margin-bottom: 1.5rem !important; }
        .faq-section { padding: 2rem 1rem !important; }
        .faq-section h2 { margin-bottom: 1.5rem !important; }
        .faq-item { margin-bottom: 1rem !important; padding: 1.2rem !important; }
        .seo-test-image-container { float: none !important; margin-left: 0 !important; width: 100% !important; margin-bottom: 1.5rem !important; }
    }
                .explore-card:hover {
                    transform: translateY(-5px);
                    border-color: #6366f1;
                    box-shadow: 0 15px 30px rgba(99, 102, 241, 0.1);
                }
            
            .cta-buttons-container-test {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 1.25rem;
                margin-bottom: 2rem;
                max-width: 900px;
                margin-left: auto;
                margin-right: auto;
                padding: 0 1rem;
            }

            .funquizo-cta-test {
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                width: 345px;
                max-width: 100%;
                min-height: 84px;
                height: 84px;
                border-radius: 24px;
                padding: 0.5rem 1.5rem;
                font-family: 'Outfit', sans-serif;
                text-decoration: none;
                transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }

            .funquizo-cta-test.solo {
                background: #ec4899;
                color: white;
                box-shadow: 0 10px 20px rgba(236, 72, 153, 0.3);
            }

            .funquizo-cta-test.solo:hover {
                transform: translateY(-3px);
                box-shadow: 0 14px 28px rgba(236, 72, 153, 0.4);
            }

            .funquizo-cta-test.solo:active {
                transform: translateY(0);
            }

            .funquizo-cta-test .cta-title {
                font-size: 1.35rem;
                font-weight: 950;
                text-transform: uppercase;
                line-height: 1.2;
            }

            .funquizo-cta-test .cta-subtitle {
                font-size: 0.82rem;
                font-weight: 500;
                line-height: 1.1;
                margin-top: 0.15rem;
            }

            @media (max-width: 768px) {
                .cta-buttons-container-test {
                    flex-direction: column;
                    align-items: center;
                    gap: 1rem;
                }
                .funquizo-cta-test {
                    width: 100%;
                    max-width: 345px;
                }
            }
            
    .primary-cta {
        position: relative;
        z-index: 10;
    }
    .sub-card {
        text-decoration: none;
        background: white;
        padding: 2rem;
        border-radius: 20px;
        border: 2px solid #f1f5f9;
        text-align: center;
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .sub-card:hover {
        transform: translateY(-5px);
        border-color: var(--secondary);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }
    .vote-btn:not(.wyr-choice):hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        border-color: #6366f1 !important;
    }
    .vote-btn {
        position: relative;
        z-index: 5;
    }
.question-preview-card {
        background: white;
        border-radius: 12px;
        padding: 2.5rem;
        box-shadow: 0 10px 25px rgba(0,0,0,0.03);
        border: 1px solid #f1f5f9;
        border-left: 6px solid #6366f1;
        text-align: left;
        margin-bottom: 2rem;
    }
    .riddle-card-list {
        display: grid;
        gap: 2.5rem;
    }
    .seo-section {
        margin-top: 5rem;
        padding-top: 4rem;
        border-top: 1px solid #e2e8f0;
        line-height: 1.8;
        color: #334155;
    }
    .seo-section p { margin-bottom: 1.5rem; }
    .seo-section h2 { font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem; color: #1e293b; }
    .seo-section h3 { 
        font-size: 1.25rem; 
        font-weight: 800; 
        margin: 0; 
        padding: 1.5rem; 
        color: #1e293b; 
        background: #f8fafc; 
        border: 1px solid #e2e8f0; 
        border-radius: 12px; 
        cursor: pointer; 
        display: flex; 
        justify-content: space-between; 
        align-items: center;
        transition: all 0.2s;
        margin-top: 1rem;
    }
    .seo-section h3:hover { background: #f1f5f9; border-color: #cbd5e1; }
    .seo-section h3::after { content: '+'; font-size: 1.5rem; color: #94a3b8; font-weight: 400; }
    .seo-section h3.active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: var(--secondary); background: white; }
    .seo-section h3.active::after { content: '-'; color: var(--secondary); }
    
    .seo-content-block { 
        display: none; 
        padding: 1.5rem; 
        border: 1px solid #e2e8f0; 
        border-top: none; 
        border-bottom-left-radius: 12px; 
        border-bottom-right-radius: 12px; 
        background: white;
        margin-bottom: 1rem;
    }
    .seo-content-block p { margin: 0; }
    
    /* Pagination Styles */
    .pagination { display: flex; justify-content: center; gap: 0.4rem; margin-top: 4rem; flex-wrap: wrap; }
    .page-btn { 
        padding: 0.6rem 0.9rem; 
        border-radius: 8px; 
        border: 1px solid #e2e8f0; 
        text-decoration: none; 
        color: #475569; 
        font-weight: 700; 
        font-size: 0.85rem; 
        transition: all 0.2s; 
        min-width: 40px; 
        text-align: center;
    }
    .page-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
    .page-btn.active { background: white; color: #1e293b; border: 2px solid var(--secondary); }
    .q-option-box {
        padding: 1rem;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        color: #475569;
        font-weight: 700;
        font-size: 0.95rem;
        text-align: center;
        transition: all 0.2s;
        cursor: pointer;
    }
    .q-option-box:hover {
        background: #f8fafc;
        border-color: var(--secondary);
        color: var(--secondary);
        transform: translateY(-2px);
    }
    .seo-test-image-container {
        margin-bottom: 2rem;
        float: right;
        margin-left: 2rem;
        width: 380px;
    }

/* Would You Rather category and topic cards. The homepage owns a separate card family. */
.wyr-category-badge {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.segment-layout-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr) !important;
    gap: 1.5rem;
    align-items: start;
}
.segment-main-column { min-width: 0; grid-column: 1 !important; grid-row: 1 !important; order: 1; }
.segment-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 2;
}
.segment-sidebar-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 1rem;
    box-shadow: 0 10px 25px rgba(15,23,42,.05);
}
.segment-sidebar-section h2 {
    margin: 0 0 .75rem;
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 900;
}
.segment-sidebar-weekly { background: #fffbeb; border-color: #fde68a; }
.segment-sidebar-weekly-link { display: flex; align-items: center; gap: .55rem; color: #334155; text-decoration: none; font-size: .9rem; font-weight: 900; }
.segment-sidebar-weekly-icon { display: grid; place-items: center; width: 1.35rem; }
.segment-sidebar-weekly-link { align-items: flex-start; }
.segment-sidebar-weekly-icon { margin-top: .08rem; }
.segment-sidebar-weekly-copy b, .segment-sidebar-weekly-copy small { display: block; }
.segment-sidebar-weekly-copy small { margin-top: .18rem; color: #94a3b8; font-size: .76rem; font-weight: 400; line-height: 1.25; }
.segment-sidebar-section--friend_quiz .segment-sidebar-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .55rem; }
.segment-sidebar-section--friend_quiz .segment-sidebar-link > img { grid-column: 1 / -1; width: 100%; height: 88px; object-fit: cover; border-radius: 10px; }
.segment-sidebar-section--flag_quiz .segment-sidebar-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
.segment-sidebar-flag-visual { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; padding: .8rem; border-radius: 12px; background: linear-gradient(135deg, #eef2ff, #fdf2f8); }
.segment-sidebar-flag-visual img { display: block; width: 100%; height: 34px; object-fit: cover; border: 1px solid rgba(148,163,184,.35); border-radius: 6px; box-shadow: 0 3px 8px rgba(15,23,42,.08); }
.segment-sidebar-featured-quiz { border-color: #fdba74; background: #fffaf0; }
.segment-sidebar-featured-badge { display: inline-flex; align-items: center; width: fit-content; margin-bottom: .75rem; padding: .35rem .6rem; border-radius: 999px; background: #f59e0b; color: #fff; font-size: .68rem; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.segment-sidebar-featured-quiz h2 { margin-bottom: .35rem; font-size: 1.05rem; line-height: 1.25; }
.segment-sidebar-featured-quiz > p { margin: 0 0 .8rem; color: #475569; font-size: .78rem; line-height: 1.4; }
.segment-sidebar-featured-questions { display: grid; margin-bottom: .85rem; border-top: 1px solid #fed7aa; }
.segment-sidebar-featured-questions span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid #fed7aa; color: #334155; font-size: .72rem; font-weight: 700; line-height: 1.35; }
.segment-sidebar-featured-questions b { color: #ea580c; }
.segment-sidebar-featured-button { display: block; padding: .7rem .85rem; border-radius: 11px; background: #ea580c; color: #fff; text-align: center; text-decoration: none; font-size: .78rem; font-weight: 900; }
.segment-sidebar-featured-button:hover { background: #c2410c; color: #fff; }
.segment-sidebar-home-discover h2 { margin-bottom: .7rem; }
.segment-sidebar-home-discover-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.segment-sidebar-home-discover-links a { padding: .55rem .7rem; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #475569; text-decoration: none; font-size: .76rem; font-weight: 800; line-height: 1.2; }
.segment-sidebar-home-discover-links a:hover { border-color: #c4b5fd; background: #f5f3ff; color: #4338ca; }
.segment-sidebar-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    padding: .58rem .45rem;
    color: #334155;
    text-decoration: none;
    font-size: .86rem;
    font-weight: 800;
    border-radius: 10px;
}
.segment-sidebar-link:hover { background: #f8fafc; color: #4338ca; }
.segment-sidebar-section--discover .segment-sidebar-link { align-items: flex-start; }
.segment-sidebar-section--discover .segment-sidebar-icon { margin-top: .1rem; }
.segment-sidebar-link-copy { min-width: 0; }
.segment-sidebar-link-copy b, .segment-sidebar-link-copy small { display: block; }
.segment-sidebar-link-copy small { margin-top: .18rem; color: #94a3b8; font-size: .76rem; font-weight: 400; line-height: 1.25; }
.segment-sidebar-icon { width: 1.35rem; text-align: center; flex: 0 0 auto; }
.segment-sidebar-link > span:nth-last-child(2) { min-width: 0; overflow-wrap: anywhere; }
.segment-sidebar-arrow { margin-left: auto; color: #94a3b8; flex: 0 0 auto; }
.segment-sidebar-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.segment-sidebar-game-card { display: block; padding: .35rem; background: #f8fafc; border: 1px solid #e2e8f0; }
.segment-sidebar-game-card img { display: block; width: 100%; aspect-ratio: 1.55; object-fit: cover; border-radius: 8px; margin-bottom: .35rem; }
.segment-sidebar-game-card > span:not(.segment-sidebar-arrow) { display: block; font-size: .72rem; line-height: 1.2; }
.segment-sidebar-game-card .segment-sidebar-arrow { display: none; }

@media (max-width: 760px) {
    .riddle-hub-audience-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .55rem !important; }
    .riddle-hub-audience-link { min-height: 5.5rem; padding: .65rem .35rem; }
    .riddle-hub-audience-icon { font-size: 1.3rem; }
    .riddle-hub-audience-title { font-size: .95rem; line-height: 1.15; }
    .riddle-hub-audience-action { margin-top: .3rem; font-size: .68rem; }
    .segment-layout-grid { display: flex !important; flex-direction: column !important; }
    .segment-main-column { order: 1; }
    .segment-sidebar { order: 2; margin-top: 0; }
    .segment-sidebar-games { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
    .segment-sidebar-game-card { padding: .2rem; }
    .segment-sidebar-game-card img { border-radius: 5px; margin-bottom: .2rem; }
    .segment-sidebar-game-card > span:not(.segment-sidebar-arrow) { font-size: .6rem; line-height: 1.1; }
    .segment-layout-grid > :not(.segment-main-column):not(.segment-sidebar) { order: 3; }
    .segment-layout-grid > .riddle-hub-latest { order: 3; }
    .segment-layout-grid > .riddle-hub-discovery { order: 4; }
    .segment-layout-grid > .riddle-hub-seo-section { order: 5; }
}

/* Deal/category links stay below the main content, never in the sidebar column. */
.subcategory-seo-links { grid-column: 1 / -1 !important; width: 100%; box-sizing: border-box; }
.segment-compact-pagination { margin-bottom: 30px !important; }
.segment-compact-category-seo { grid-column: 1 !important; width: 100% !important; box-sizing: border-box; margin-top: 20px !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; }
.segment-compact-category-seo h4 { margin-bottom: 1rem !important; }
.segment-compact-category-seo > div { gap: .8rem !important; }
.segment-compact-lower-content { grid-column: 1 !important; width: 100% !important; box-sizing: border-box; margin-top: 20px !important; padding-top: 20px !important; border-top: 0 !important; }
.intent-pages-pillar { grid-column: 1 !important; max-width: none !important; width: 100% !important; margin: 0 0 30px !important; }
.intent-pages-pillar > div { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .intent-pages-pillar > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .intent-pages-pillar > div { grid-template-columns: 1fr !important; } }
.segment-compact-category-seo { margin-top: 0 !important; }
.related-games-cta-layout--wyr-subpage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr); gap: 2rem; align-items: center; }
.related-games-cta { display: flex; justify-content: center; align-items: center; min-height: 100%; }
@media (max-width: 700px) { .related-games-cta-layout--wyr-subpage { grid-template-columns: 1fr; } .related-games-cta { justify-content: flex-start; } }
.segment-sidebar-popular-riddles { padding: 1rem !important; background: #fffaff !important; border-color: #fbcfe8 !important; }
.segment-sidebar-popular-riddles .riddle-hub-section-heading { margin-bottom: .8rem; }
.segment-sidebar-popular-riddles .riddle-hub-section-heading h2 { font-size: 1.35rem; line-height: 1.1; }
.segment-sidebar-popular-riddles .riddle-hub-popular-list { gap: .65rem; }
.segment-sidebar-popular-riddles .riddle-hub-popular-card { padding: .7rem .75rem; gap: .65rem; border-radius: 14px; }
.segment-sidebar-popular-riddles .riddle-hub-popular-icon { width: 2rem; height: 2rem; border-radius: 10px; flex: 0 0 2rem; }
.segment-sidebar-popular-riddles .riddle-hub-popular-copy strong { font-size: .82rem; }
.segment-sidebar-popular-riddles .riddle-hub-popular-copy small { font-size: .72rem; }
.segment-sidebar-popular-riddles .riddle-hub-section-heading { justify-content: flex-start; text-align: left; }
.segment-sidebar-popular-riddles .riddle-hub-section-heading h2 { text-align: left; }
.segment-sidebar-popular-riddles .riddle-hub-popular-icon { display: none; }
.segment-sidebar-popular-riddles .riddle-hub-popular-copy strong { white-space: normal; overflow: visible; text-overflow: clip; display: block; -webkit-line-clamp: unset; }
.segment-layout-grid > .riddle-hub-discovery { grid-column: 1 !important; width: 100% !important; box-sizing: border-box; }
.segment-layout-grid > .seo-section { grid-column: 1 !important; width: 100% !important; box-sizing: border-box; }
.segment-lower-content { grid-column: 1 !important; width: 100% !important; box-sizing: border-box; }
.riddle-hub-seo-section { margin-top: 30px !important; padding-top: 0 !important; border-top: 0 !important; }
.age-seo-section { margin-top: 1rem !important; padding-top: 1rem !important; border-top: 0 !important; }
.age-related-section { margin-top: 1rem !important; padding-top: 1rem !important; padding-bottom: 2rem !important; border-top: 0 !important; }
.age-related-section .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .75rem !important; }
.age-related-section .explore-card { padding: 1.15rem .7rem !important; }
@media (max-width: 700px) {
    #example-game-footer { display: none !important; }
    .segment-lower-content { margin-top: 0 !important; padding-top: 0 !important; }
    .segment-lower-content > .seo-section { margin-top: 0 !important; padding-top: .5rem !important; border-top: 0 !important; }
    .segment-lower-content > .related-section { margin-top: .75rem !important; padding-top: .5rem !important; border-top: 0 !important; padding-bottom: 1.5rem !important; }
    .segment-lower-content .age-seo-section { margin-top: 0 !important; padding-top: .5rem !important; border-top: 0 !important; }
    .segment-lower-content .age-related-section { margin-top: 0 !important; padding-top: .5rem !important; border-top: 0 !important; }
        .segment-lower-content .age-seo-section h2 { margin-top: 0 !important; }
        .interactive-card .riddle-card-header { margin-bottom: 1.875rem !important; }
    .age-related-section > h2 { font-size: 1.8rem !important; line-height: 1.15 !important; margin-bottom: 1.25rem !important; }
    .age-related-section .explore-grid { gap: .75rem !important; padding: 0 .25rem !important; }
    .age-related-section .explore-card > div:first-child { font-size: .95rem !important; line-height: 1.2 !important; }
    .age-related-section .explore-card > div:last-child { font-size: .7rem !important; }
}
.riddle-hub-discovery .riddle-hub-eyebrow { display: none; }
.segment-compact-subcategory-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: .8rem !important; margin-top: 30px !important; }
.segment-compact-subcategory-grid .sub-card { padding: 1.1rem .7rem !important; min-height: 92px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.segment-compact-subcategory-grid .sub-card > div:first-child { margin: 0 !important; font-size: 1.05rem !important; text-align: center; }
.segment-compact-intro { margin-bottom: 30px !important; }
.deal-cta-area { margin-bottom: 30px !important; }
.wyr-cta-area { margin-bottom: 0 !important; }
.deal-top-disclaimer { margin-top: 0 !important; margin-bottom: 0 !important; }
.segment-compact-hero { margin-bottom: 30px !important; }
.segment-compact-example-heading { margin-top: 0 !important; }
@media (max-width: 900px) { .segment-compact-subcategory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .segment-compact-subcategory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 760px) {
    .segment-compact-subcategory-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: .2rem !important; }
    .segment-compact-subcategory-grid .sub-card { min-width: 0; min-height: 58px; padding: .45rem 0 !important; }
    .segment-compact-subcategory-grid .sub-card > div:first-child { font-size: .84rem !important; line-height: 1.1; overflow-wrap: anywhere; }
}

/* Exact outer width model used by /games/. */
main.container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.category-page {
    box-sizing: border-box;
    max-width: none !important;
    width: min(1280px, calc(100% - 48px)) !important;
    margin-inline: auto !important;
    padding: 0.5rem 0 3.5rem !important;
}
.segment-breadcrumbs {
    width: 100%;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    text-align: left;
}
@media (max-width: 760px) {
    .category-page { width: calc(100% - 14px) !important; }
}

.wyr-choice-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    column-gap: 1rem;
    margin-block-end: 1rem;
}

.interactive-card .example-buttons.wyr-choice-layout {
    margin-block-end: 0;
}

.interactive-card .wyr-choice {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-width: 0;
    min-height: 166px;
    padding: 2.5rem 2rem;
    border: 2px solid;
    border-radius: 20px;
    color: #1e293b;
    text-align: center;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.wyr-choice.option-a {
    background: linear-gradient(145deg, #f4f7ff 0%, #eef2ff 100%);
    border-color: #dbe4ff;
}

.wyr-choice.option-b {
    background: linear-gradient(145deg, #fff5fa 0%, #fff0f7 100%);
    border-color: #fbcfe8;
}

.wyr-choice-marker {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid;
    border-radius: 50%;
    background: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 3px 8px rgba(30, 41, 59, 0.08);
}

.option-a .wyr-choice-marker {
    border-color: #c7d2fe;
    color: #6366f1;
}

.option-b .wyr-choice-marker {
    border-color: #f9a8d4;
    color: #ec4899;
}

.wyr-choice-text {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
}

.wyr-or-divider {
    position: relative;
    z-index: 2;
    align-self: center;
    margin-block: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 28px;
    margin-inline: 0;
    padding: 0.35rem 0.75rem;
    border: 1px solid #d8deea;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: 0 5px 14px rgba(30, 41, 59, 0.1);
}

.wyr-or-divider::before,
.wyr-or-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 1rem;
    height: 2px;
    transform: translateY(-50%);
    pointer-events: none;
}

.wyr-or-divider::before {
    right: 100%;
    background: #dbe4ff;
}

.wyr-or-divider::after {
    left: 100%;
    background: #fbcfe8;
}

.wyr-choice-results {
    display: none;
}

.wyr-result {
    display: flex;
    min-height: 166px;
    padding: 2.5rem 1.5rem;
    border: 2px solid;
    border-radius: 20px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.wyr-result--a {
    background: #eef2ff;
    border-color: #dbe4ff;
}

.wyr-result--b {
    background: #fff0f7;
    border-color: #fbcfe8;
}

.wyr-result-percent {
    margin-block-end: 0.5rem;
    font-size: 3rem;
    font-weight: 800;
}

.wyr-result--a .wyr-result-percent { color: #6366f1; }
.wyr-result--b .wyr-result-percent { color: #ec4899; }

.wyr-result-label {
    color: #475569;
    font-size: 0.9rem;
    font-weight: 700;
}

@media (hover: hover) {
    .wyr-choice.option-a:hover {
        border-color: #a5b4fc;
        background: #eef2ff;
        box-shadow: 0 10px 24px rgba(99, 102, 241, 0.12);
    }

    .wyr-choice.option-b:hover {
        border-color: #ec4899;
        background: #fdf2f8;
        box-shadow: 0 10px 24px rgba(236, 72, 153, 0.12);
    }

    .wyr-choice.option-a:hover .wyr-choice-marker {
        border-color: #6366f1;
        background: #6366f1;
        color: #fff;
    }

    .wyr-choice.option-b:hover .wyr-choice-marker {
        border-color: #ec4899;
        background: #ec4899;
        color: #fff;
    }
}

.wyr-choice:focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 3px;
}

.wyr-choice.option-a:focus-visible .wyr-choice-marker {
    border-color: #6366f1;
    background: #6366f1;
    color: #fff;
}

.wyr-choice.option-b:focus-visible .wyr-choice-marker {
    border-color: #ec4899;
    background: #ec4899;
    color: #fff;
}

@media (max-width: 600px) {
    .wyr-choice-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 0;
    }

    .wyr-choice {
        min-height: 124px;
        padding: 1.5rem 1.625rem;
        border-radius: 18px;
        text-align: left;
    }

    .wyr-or-divider {
        margin-block: -0.35rem;
        margin-inline: auto;
    }

    .wyr-or-divider::before,
    .wyr-or-divider::after {
        display: none;
    }

    .wyr-result {
        min-height: 124px;
        padding: 1.5rem 1.625rem;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wyr-choice { transition: none; }
}

/* ===== assets/css/trivia-hub.css ===== */
.trivia-hub-explore,
.trivia-hub-latest,
.trivia-hub-multiplayer,
.trivia-hub-discovery {
    margin: 0 auto 5rem;
}

/* Mirror the Explore Riddle Categories heading exactly: 5rem section
   spacing, centered 1.8rem/850 heading and 2rem down to the cards. */
.trivia-hub-discovery {
    margin-top: calc(4rem - 30px);
    margin-bottom: calc(4rem - 30px);
}

/* This is the preceding sibling, so its bottom margin controls the actual
   visible gap above Discover something new when vertical margins collapse. */
.trivia-hub-explore {
    margin-bottom: calc(4rem - 30px);
}

.trivia-hub-discovery > .trivia-hub-section-heading {
    justify-content: center;
    margin: 0 0 2rem;
    text-align: center;
}

.trivia-hub-discovery > .trivia-hub-section-heading h2 {
    margin: 0;
    color: #1e293b;
    font-size: 1.8rem;
    line-height: normal;
    font-weight: 850;
    letter-spacing: normal;
}

/* Keep the main Explore heading aligned with the 1.8rem section scale. */
.trivia-hub-explore > .trivia-hub-section-heading h2 {
    font-size: 1.8rem;
}

/* Compact discovery heading spacing on the trivia hub. */
.trivia-hub-explore { margin-bottom: 1rem; }
.trivia-hub-discovery { margin-top: calc(1rem - 30px); margin-bottom: calc(4rem - 30px - 30px); }

.trivia-hub-latest,
.trivia-hub-featured-questions,
.trivia-hub-question-heading {
    max-width: 1000px;
}

.trivia-hub-hero h1 {
    max-width: 1120px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.trivia-hub-audience-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
    margin: 0 0 1.6rem;
}

.trivia-hub-audience-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 8.5rem;
    padding: 1.2rem;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #fff;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(30, 41, 59, 0.05);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.trivia-hub-audience-link:hover,
.trivia-hub-audience-link:focus-visible {
    transform: translateY(-3px);
    border-color: #c4b5fd;
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.1);
}

.trivia-hub-audience-link-title {
    color: #4338ca;
    font-size: 1.55rem;
    font-weight: 900;
}

.trivia-hub-audience-link-action {
    margin-top: 0.65rem;
    color: #475569;
    font-size: 0.86rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trivia-hub-section-heading {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.8rem;
}

.trivia-hub-explore > .trivia-hub-section-heading {
    justify-content: center;
    text-align: center;
}

.trivia-hub-section-heading h2,
.trivia-hub-question-heading h2,
.trivia-hub-multiplayer h2 {
    margin: 0;
    color: #1e293b;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.trivia-hub-eyebrow {
    color: #6d28d9;
    font-size: 1.45rem;
    font-weight: 850;
}

.trivia-hub-audience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
}

.trivia-hub-audience-panel {
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid #e9d5ff;
    border-radius: 24px;
    background: #fcfaff;
}

.trivia-hub-panel-heading {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
}

.trivia-hub-panel-heading h3 {
    margin: 0;
    color: #312e81;
    font-size: 1.2rem;
    font-weight: 850;
}

.trivia-hub-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 14px;
    background: #ede9fe;
    font-size: 1.3rem;
}

.trivia-hub-topic-list,
.trivia-hub-age-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.trivia-hub-topic-link,
.trivia-hub-age-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.45rem;
    box-sizing: border-box;
    border: 1px solid #ddd6fe;
    border-radius: 999px;
    background: white;
    color: #5b21b6;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.trivia-hub-topic-link:hover,
.trivia-hub-topic-link:focus-visible,
.trivia-hub-age-link:hover,
.trivia-hub-age-link:focus-visible {
    border-color: #8b5cf6;
    background: #f5f3ff;
    transform: translateY(-2px);
}

.trivia-hub-show-topics {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.8rem;
    border: 0;
    background: transparent;
    color: #4f46e5;
    padding: 0.25rem 0;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 850;
    cursor: pointer;
}

.trivia-hub-show-topics:hover,
.trivia-hub-show-topics:focus-visible {
    color: #312e81;
    text-decoration: underline;
}

.trivia-hub-age-block {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid #ede9fe;
}

.trivia-hub-age-block h4 {
    margin: 0 0 0.7rem;
    color: #475569;
    font-size: 0.86rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.trivia-hub-age-link {
    min-height: 2.15rem;
    padding: 0.4rem 0.7rem;
    color: #475569;
    border-color: #e2e8f0;
    font-size: 0.82rem;
}

.trivia-hub-question-heading {
    margin: 0 auto 1rem;
    text-align: center;
}

.trivia-hub-question-heading h2 {
    margin: 0;
    color: #1e293b;
    font-size: 1.8rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.02em;
}

/* Match the 2.2rem section headings used by the riddle and trivia hubs. */
.tf-hub-explore > .trivia-hub-section-heading h2 {
    font-size: 1.8rem;
}

.trivia-hub-latest-list {
    display: grid;
    gap: 1.1rem;
}

.trivia-hub-latest-card {
    padding: 1.35rem 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 35px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
}

.trivia-hub-latest-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.trivia-hub-latest-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    background: #f5f3ff;
    color: #6d28d9;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
}

.trivia-hub-latest-time {
    flex: 0 0 auto;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 750;
    white-space: nowrap;
}

.trivia-hub-latest-card h3 {
    margin: 0 0 1rem;
    color: #1e293b;
    font-size: 1.12rem;
    line-height: 1.45;
    font-weight: 800;
}

.trivia-hub-answer-button {
    min-height: 2.65rem;
    border: 1px solid #c4b5fd;
    border-radius: 12px;
    background: #fff;
    color: #4f46e5;
    padding: 0.55rem 0.95rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.trivia-hub-answer-button:hover,
.trivia-hub-answer-button:focus-visible {
    background: #f5f3ff;
}

.trivia-hub-answer {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.9rem;
    padding: 1rem 1.1rem;
    border-left: 3px solid #8b5cf6;
    border-radius: 0 14px 14px 0;
    background: #f8fafc;
    color: #334155;
}

.trivia-hub-answer[hidden],
.trivia-hub-extra-topic[hidden] {
    display: none !important;
}

.trivia-hub-answer span {
    font-weight: 750;
}

.trivia-hub-answer p {
    margin: 0.3rem 0 0;
    line-height: 1.55;
}

.trivia-hub-multiplayer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.7rem 1.8rem;
    border: 1px solid #c4b5fd;
    border-radius: 26px;
    background: linear-gradient(135deg, #faf5ff 0%, #eef2ff 100%);
}

.trivia-hub-multiplayer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.3rem;
    height: 3.3rem;
    border-radius: 18px;
    background: #ede9fe;
    font-size: 1.7rem;
}

.trivia-hub-multiplayer-copy .trivia-hub-eyebrow {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trivia-hub-multiplayer-copy h2 {
    font-size: clamp(1.35rem, 2.5vw, 1.9rem);
}

.trivia-hub-multiplayer-copy p {
    max-width: 660px;
    margin: 0.55rem 0 0;
    color: #475569;
    line-height: 1.5;
}

.trivia-hub-multiplayer-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin-top: 0.9rem;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 750;
}

.trivia-hub-multiplayer-steps span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.trivia-hub-multiplayer-steps b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #7c3aed;
    color: white;
    font-size: 0.72rem;
}

.trivia-hub-multiplayer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    border-radius: 14px;
    background: #7c3aed;
    color: white;
    padding: 0.75rem 1.15rem;
    font-size: 0.9rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.18s ease, background 0.18s ease;
}

.trivia-hub-multiplayer-cta:hover,
.trivia-hub-multiplayer-cta:focus-visible {
    background: #6d28d9;
    transform: translateY(-2px);
}

.trivia-hub-discovery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.trivia-hub-discovery-card {
    display: flex;
    flex-direction: column;
    min-height: 8.5rem;
    box-sizing: border-box;
    padding: 1.15rem;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: white;
    color: #1e293b;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.trivia-hub-discovery-card:hover,
.trivia-hub-discovery-card:focus-visible {
    border-color: #c4b5fd;
    box-shadow: 0 12px 25px rgba(79, 70, 229, 0.09);
    transform: translateY(-3px);
}

.trivia-hub-discovery-icon {
    font-size: 1.55rem;
}

.trivia-hub-discovery-name {
    margin-top: 0.7rem;
    font-size: 1rem;
    font-weight: 850;
}

.trivia-hub-discovery-action {
    margin-top: auto;
    padding-top: 1rem;
    color: #4f46e5;
    font-size: 0.84rem;
    font-weight: 800;
}

@media (max-width: 900px) {
    .trivia-hub-discovery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trivia-hub-multiplayer {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .trivia-hub-multiplayer-cta {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .trivia-hub-audience-grid {
        grid-template-columns: 1fr;
    }

    .trivia-hub-discovery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .55rem;
    }

    .trivia-hub-discovery-card {
        min-height: 6.6rem;
        padding: .7rem .35rem;
        border-radius: 15px;
        text-align: center;
        align-items: center;
    }

    .trivia-hub-discovery-icon { font-size: 1.25rem; }
    .trivia-hub-discovery-name { margin-top: .35rem; font-size: .78rem; line-height: 1.15; }
    .trivia-hub-discovery-action { padding-top: .45rem; font-size: .68rem; }
    .trivia-hub-discovery > .trivia-hub-section-heading { margin-bottom: 1rem; }
    .trivia-hub-discovery > .trivia-hub-section-heading h2 { font-size: 1.35rem; line-height: 1.15; }
    .trivia-hub-explore > .trivia-hub-section-heading h2 { font-size: 1.35rem; line-height: 1.15; }
    .trivia-hub-question-heading h2 { font-size: 1.35rem; line-height: 1.15; }
    .tf-hub-explore > .trivia-hub-section-heading h2 { font-size: 1.35rem; line-height: 1.15; }
    .trivia-hub-discovery { margin-bottom: calc(4rem - 30px - 20px - 30px); }

    .trivia-hub-audience-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
    }

    .trivia-hub-audience-link {
        min-height: 6rem;
        padding: .7rem .4rem;
        border-radius: 18px;
    }

    .trivia-hub-audience-link-title {
        font-size: 1.05rem;
        line-height: 1.15;
    }

    .trivia-hub-audience-link-action {
        margin-top: .4rem;
        font-size: .68rem;
        letter-spacing: .02em;
    }

    .trivia-hub-hero h1 {
        font-size: 2.55rem !important;
    }

    .trivia-hub-latest-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.55rem;
    }

    .trivia-hub-audience-panel,
    .trivia-hub-multiplayer {
        padding: 1.1rem;
        border-radius: 20px;
    }

    .trivia-hub-multiplayer {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .trivia-hub-multiplayer-cta {
        grid-column: auto;
        width: 100%;
    }

    .trivia-hub-multiplayer-steps {
        flex-direction: column;
        align-items: flex-start;
    }
}
.trivia-hub-subject-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    max-width: 980px;
    margin: 0 auto 3.5rem;
    padding: 0 1rem;
}

.trivia-hub-subject-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.65rem 1.35rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    text-decoration: none;
    font-weight: 800;
    font-size: 1rem;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.trivia-hub-subject-pill:hover {
    transform: translateY(-2px);
    background: #e2e8f0;
}

.trivia-hub-subject-pill--active {
    background: var(--secondary, #ec4899);
    color: #fff;
    box-shadow: 0 8px 18px rgba(236, 72, 153, 0.25);
}

.trivia-hub-subject-pill--active:hover {
    background: var(--secondary, #ec4899);
    color: #fff;
}

@media (max-width: 640px) {
    .trivia-hub-subject-nav { gap: 0.4rem; margin-bottom: 2.5rem; }
    .trivia-hub-subject-pill { min-height: 40px; padding: 0.55rem 1rem; font-size: 0.92rem; }
}

/* ===== assets/css/trivia-category.css ===== */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800;900&display=swap');

/* The question list owns the vertical spacing between cards. Keep this
   scoped to trivia category pages so CTA spacing changes cannot affect the
   rest of the site. */
.questions-list .fq-card-list--comfortable {
    row-gap: 2.5rem;
}

.trivia-lower-content { grid-column: 1 !important; width: 100%; box-sizing: border-box; }
.trivia-lower-seo { margin-top: 1rem !important; padding-top: 1rem !important; border-top: 0 !important; }
@media (max-width: 760px) {
    .trivia-lower-content { order: 3; margin-top: 0 !important; }
    .trivia-lower-seo { margin-top: 0 !important; padding-top: .5rem !important; border-top: 0 !important; }
    .trivia-audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .7rem !important; margin-top: 2rem !important; padding: 0 .35rem !important; }
    .trivia-audience-grid .sub-card { padding: 1.25rem .5rem !important; min-width: 0; }
    .trivia-audience-grid .sub-card > div:first-child { font-size: 1.05rem !important; line-height: 1.15; }
}

.trivia-question-badge-wrap { margin-bottom: 1.4rem !important; }
.question-preview-card.interactive-card.fq-card-item { padding: 2rem !important; }
.trivia-question-text { margin-bottom: 1.25rem !important; }
.trivia-question-link { margin-top: .625rem !important; }
.trivia-question-badge {
    padding: .58rem 1.35rem !important;
    font-size: .82rem !important;
    letter-spacing: .07em !important;
    line-height: 1.2 !important;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 700px) {
    .question-preview-card.interactive-card.fq-card-item { padding: 1.5rem 1rem !important; }
    .trivia-question-badge-wrap { margin-bottom: 1rem !important; }
    .trivia-question-badge { padding: .5rem .95rem !important; font-size: .74rem !important; letter-spacing: .045em !important; }
    .trivia-kids-cta-compact-bottom { margin-bottom: calc(2rem - 10px) !important; }
}

/* Curated artist quizzes: more prominent than ordinary topic filters. */
.music-quiz-packs,
.curated-quiz-packs {
    max-width: 900px;
    margin: 2rem auto 2.5rem;
    /* Keep ?quiz-packs=all#... aligned below the sticky site header. */
    scroll-margin-top: 5.5rem;
    padding: 1.5rem;
    border: 1px solid #eadcff;
    border-radius: 24px;
    background: #faf5ff;
}
.music-quiz-packs__header,
.curated-quiz-packs__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.music-quiz-packs__header h2,
.curated-quiz-packs__header h2 {
    margin: 0;
    color: #1e293b;
    font-size: 1.35rem;
    font-weight: 800;
}
.music-quiz-packs__header a,
.curated-quiz-packs__header a {
    color: #6d28d9;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.music-quiz-packs__header a:hover,
.curated-quiz-packs__header a:hover { text-decoration: underline; }
.curated-quiz-packs__footer {
    margin-top: 1rem;
    text-align: right;
}
.curated-quiz-packs__footer a {
    color: #6d28d9;
    font-size: .9rem;
    font-weight: 800;
    text-decoration: none;
}
.curated-quiz-packs__footer a:hover { text-decoration: underline; }
.music-quiz-packs__grid,
.curated-quiz-packs__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}
.music-quiz-pack-card,
.curated-quiz-pack-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-width: 0;
    padding: .85rem 1rem;
    border: 1px solid #e9d5ff;
    border-radius: 16px;
    background: #fff;
    color: #312e81;
    text-align: center;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.music-quiz-pack-card:hover,
.curated-quiz-pack-card:hover {
    border-color: #c4b5fd;
    box-shadow: 0 8px 18px rgba(124, 58, 237, .12);
    transform: translateY(-2px);
}
.music-quiz-pack-card__icon,
.curated-quiz-pack-card__icon { flex: 0 0 auto; font-size: 1.25rem; }
.music-quiz-pack-card__body,
.curated-quiz-pack-card__body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; align-items: center; gap: .2rem; }
.music-quiz-pack-card__body strong,
.curated-quiz-pack-card__body strong { display: -webkit-box; overflow: hidden; color: #1e293b; line-height: 1.2; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.music-quiz-pack-card__body span,
.curated-quiz-pack-card__body span { color: #475569; font-size: .82rem; font-weight: 700; }
@media (max-width: 760px) {
    .music-quiz-packs,
    .curated-quiz-packs { margin-inline: 1rem; padding: 1.15rem; }
    .music-quiz-packs__header,
    .curated-quiz-packs__header { align-items: flex-start; flex-direction: column; }
    .music-quiz-packs__grid,
    .curated-quiz-packs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .music-quiz-packs__grid,
    .curated-quiz-packs__grid { grid-template-columns: 1fr; }
}
                        
                        * {
                            box-sizing: border-box;
                            margin: 0;
                            padding: 0;
}
    .cta-buttons-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
        margin-bottom: 2.5rem;
        width: 100%;
        justify-content: center;
    }
    @media (min-width: 768px) {
        .cta-buttons-container {
            flex-direction: row;
        }
    }
    nav[aria-label="Sidnavigering"] a:hover,
    nav[aria-label="Page navigation"] a:hover { background: #f0fdf4 !important; border-color: #10b981 !important; color: #065f46 !important; }
    .sub-card {
        background: white;
        border: 2px solid #f1f5f9;
        border-radius: 25px;
        padding: 2.5rem;
        text-align: center;
        text-decoration: none;
        transition: all 0.2s ease;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.01), 0 2px 4px -1px rgba(0,0,0,0.005);
        display: block;
    }
    .sub-card:hover {
        transform: translateY(-5px);
        border-color: #e2e8f0;
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.02);
    }
    
    /* SEO Content Styles */
    .seo-section {
        margin-top: 5rem;
        padding-top: 4rem;
        border-top: 1px solid #e2e8f0;
        line-height: 1.8;
        color: #334155;
    }
    .seo-section p { margin-bottom: 1.5rem; }
    .seo-section h2 { font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem; color: #1e293b; }
    .seo-section h3 { 
        font-size: 1.25rem; 
        font-weight: 800; 
        margin: 0; 
        padding: 1.5rem; 
        color: #1e293b; 
        background: #f8fafc; 
        border: 1px solid #e2e8f0; 
        border-radius: 12px; 
        cursor: pointer; 
        display: flex; 
        justify-content: space-between; 
        align-items: center;
        transition: all 0.2s;
        margin-top: 1rem;
    }
    .seo-section h3:hover { background: #f1f5f9; border-color: #cbd5e1; }
    .seo-section h3::after { content: '+'; font-size: 1.5rem; color: #94a3b8; font-weight: 400; }
    .seo-section h3.active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: var(--secondary); background: white; }
    .seo-section h3.active::after { content: '-'; color: var(--secondary); }
    
    .seo-html-content h3 {
        font-size: 1.6rem;
        font-weight: 850;
        color: #1e293b;
        margin: 3rem 0 1.2rem;
        padding: 0;
        background: none;
        border: none;
        display: block;
    }
    .seo-html-content h3::after {
        display: none !important;
    }
    .seo-html-content p {
        margin-bottom: 1.5rem;
    }
    
    @media (max-width: 600px) {
        #conversion-cta { padding: 2rem 1rem !important; border-radius: 24px !important; }
        #conversion-cta h3 { font-size: 1.5rem !important; }
        #conversion-cta a { padding: 1.1rem 2rem !important; font-size: 1.1rem !important; width: 100%; box-sizing: border-box; }
    }
            .cta-buttons-container-test {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 1.25rem;
                margin-bottom: 2rem;
                max-width: 900px;
                margin-left: auto;
                margin-right: auto;
                padding: 0 1rem;
            }

            .funquizo-cta-test {
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                width: 345px;
                max-width: 100%;
                min-height: 84px;
                height: 84px;
                padding: 0.5rem 1.5rem;
                border-radius: 24px;
                font-family: 'Outfit', sans-serif;
                text-decoration: none;
                text-align: center;
                transition: all 0.2s ease-in-out;
                border: none;
                cursor: pointer;
            }

            .funquizo-cta-test .cta-title {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.4rem;
                font-size: 1.35rem;
                font-weight: 950;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                line-height: 1.2;
            }

            .funquizo-cta-test .cta-subtitle {
                font-size: 0.82rem;
                font-weight: 500;
                opacity: 0.85;
                text-transform: none;
                letter-spacing: 0.02em;
                line-height: 1.1;
                margin-top: 0.15rem;
            }

            .funquizo-cta-test.solo {
                background: #ec4899;
                color: white;
                box-shadow: 0 10px 20px rgba(236, 72, 153, 0.3);
            }

            .funquizo-cta-test.solo:hover {
                transform: translateY(-3px);
                box-shadow: 0 14px 28px rgba(236, 72, 153, 0.4);
            }

            .funquizo-cta-test.multi {
                background: #7c3aed;
                color: white;
                box-shadow: 0 10px 20px rgba(124, 58, 237, 0.25);
            }

            .funquizo-cta-test.multi:hover {
                transform: translateY(-3px);
                box-shadow: 0 14px 28px rgba(124, 58, 237, 0.35);
            }

            .cta-mobile-label {
                display: none;
            }

            .trivia-category-flow--has-curated-packs {
                display: flex;
                flex-direction: column;
            }
            .trivia-category-flow--has-curated-packs .trivia-category-flow__actions {
                order: 1;
            }
            .trivia-category-flow--has-curated-packs .music-taxonomy-hub {
                order: 2;
            }
            .trivia-category-flow--has-curated-packs .tags-section {
                order: 4;
            }
            .trivia-category-flow--has-curated-packs .trivia-category-flow__packs {
                order: 3;
            }

            /* Curated-pack categories use a compact multiplayer link on mobile. */
            @media (max-width: 768px) {
                .trivia-category-flow--has-curated-packs .cta-buttons-container-test {
                    margin-bottom: 1rem;
                }
                .trivia-category-flow--has-curated-packs .curated-quiz-packs {
                    margin-top: 1rem;
                }
                .trivia-category-flow--has-curated-packs .trivia-category-flow__packs {
                    order: 3;
                }
                .trivia-category-flow--has-curated-packs .tags-section {
                    order: 4;
                }
                .trivia-category-flow--has-curated-packs .funquizo-cta-test.multi {
                    width: auto;
                    min-height: 44px;
                    height: auto;
                    padding: .35rem .75rem;
                    border-radius: 999px;
                    background: transparent;
                    color: #6d28d9;
                    box-shadow: none;
                }
                .trivia-category-flow--has-curated-packs .funquizo-cta-test.multi:hover {
                    transform: none;
                    box-shadow: none;
                }
                .trivia-category-flow--has-curated-packs .funquizo-cta-test.multi .cta-title,
                .trivia-category-flow--has-curated-packs .funquizo-cta-test.multi .cta-subtitle {
                    display: none;
                }
                .trivia-category-flow--has-curated-packs .funquizo-cta-test.multi .cta-mobile-label {
                    display: inline-flex;
                    align-items: center;
                    gap: .35rem;
                    min-height: 44px;
                    font-size: .95rem;
                    font-weight: 800;
                    line-height: 1.25;
                }
                .cta-mobile-icon,
                .cta-mobile-arrow {
                    display: none !important;
                }
            }

            @media (max-width: 768px) {
                .cta-buttons-container-test {
                    flex-direction: column;
                    align-items: center;
                    gap: 1rem;
                }
                .funquizo-cta-test {
                    width: 100%;
                    max-width: 345px;
                }
            }
            
                        
                        body {
                            font-family: 'Outfit', 'Inter', sans-serif;
                            color: #0f172a;
                            background: #ffffff;
                            line-height: 1.4;
                        }
                        
                        .print-page {
                            width: 210mm;
                            height: 297mm;
                            padding: 15mm 20mm 25mm 20mm;
                            position: relative;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            page-break-after: always;
                            page-break-inside: avoid;
                        }
                        
                        .print-page:last-child {
                            page-break-after: avoid;
                        }
                        
                        .print-header {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            border-bottom: 2px solid #e2e8f0;
                            padding-bottom: 10px;
                            margin-bottom: 20px;
                            gap: 4px;
                        }
                        
                        .print-logo {
                            font-weight: 900;
                            font-size: 1.4rem;
                            color: #0284c7;
                            letter-spacing: -0.02em;
                            line-height: 1.2;
                        }
                        
                        .print-tagline {
                            font-size: 0.85rem;
                            color: #475569;
                            font-weight: 700;
                            text-transform: uppercase;
                            letter-spacing: 0.05em;
                        }
                        
                        .question-number-badge {
                            font-size: 3.8rem;
                            font-weight: 900;
                            color: #0284c7;
                            line-height: 1;
                            margin-top: 10px;
                            margin-bottom: 20px;
                            letter-spacing: -0.05em;
                        }
                        
                        .question-text-container {
                            margin-bottom: 35px;
                        }
                        
                        .question-text {
                            font-size: 2.3rem;
                            font-weight: 800;
                            color: #0f172a;
                            line-height: 1.35;
                            letter-spacing: -0.02em;
                        }
                        
                        .options-container {
                            display: flex;
                            flex-direction: column;
                            gap: 15px;
                            margin-bottom: 20px;
                        }
                        
                        .option-row {
                            display: flex;
                            align-items: stretch;
                            border: 2.5px solid #cbd5e1;
                            border-radius: 16px;
                            overflow: hidden;
                        }
                        
                        .option-badge {
                            background: #0284c7;
                            color: #ffffff;
                            font-weight: 900;
                            font-size: 2.2rem;
                            width: 70px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                        
                        .option-text {
                            padding: 20px 25px;
                            font-size: 1.55rem;
                            font-weight: 600;
                            color: #334155;
                            flex-grow: 1;
                            display: flex;
                            align-items: center;
                        }
                        
                        .print-footer {
                            position: absolute;
                            bottom: 25mm;
                            left: 20mm;
                            right: 20mm;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            border-top: 1px solid #e2e8f0;
                            padding-top: 10px;
                            font-size: 0.85rem;
                            color: #94a3b8;
                            font-weight: 600;
                        }
                        
                        .blankett-title {
                            font-size: 2.1rem;
                            font-weight: 900;
                            color: #0f172a;
                            text-align: center;
                            margin-bottom: 3px;
                            letter-spacing: -0.04em;
                        }
                        
                        .blankett-subtitle {
                            font-size: 1.05rem;
                            color: #475569;
                            text-align: center;
                            margin-bottom: 12px;
                            font-weight: 600;
                        }
                        
                        .participant-info {
                            display: grid;
                            grid-template-columns: 1fr 1fr;
                            gap: 25px;
                            margin-bottom: 35px;
                        }
                        
                        .info-field {
                            border-bottom: 2px solid #cbd5e1;
                            padding: 10px 0;
                        }
                        
                        .info-label {
                            font-size: 0.85rem;
                            font-weight: 800;
                            color: #0284c7;
                            text-transform: uppercase;
                            letter-spacing: 0.05em;
                            margin-bottom: 5px;
                        }
                        
                        .info-placeholder {
                            height: 25px;
                        }
                        
                        .grid-table {
                            width: 100%;
                            border-collapse: collapse;
                            margin-bottom: 20px;
                        }
                        
                        .grid-table th {
                            background: #f8fafc;
                            border: 2px solid #cbd5e1;
                            padding: 8px 10px;
                            font-size: 1.05rem;
                            font-weight: 800;
                            color: #334155;
                            text-align: center;
                        }
                        
                        .grid-table td {
                            border: 2px solid #cbd5e1;
                            padding: 6px 10px;
                            text-align: center;
                            font-size: 1.1rem;
                            font-weight: 700;
                        }
                        
                        .grid-q-num {
                            background: #f8fafc;
                            font-weight: 800;
                            color: #0284c7;
                            width: 12%;
                        }
                        
                        .grid-checkbox-col {
                            width: 18%;
                        }
                        
                        .grid-checkbox-box {
                            border: 2.5px solid #94a3b8;
                            width: 25px;
                            height: 25px;
                            margin: 0 auto;
                            border-radius: 6px;
                        }
                        
                        .facit-grid {
                            display: grid;
                            grid-template-columns: repeat(2, 1fr);
                            gap: 12px;
                            margin-top: 15px;
                        }
                        
                        .facit-card {
                            border: 1.5px solid #e2e8f0;
                            border-radius: 12px;
                            padding: 10px 14px;
                            background: #f8fafc;
                            page-break-inside: avoid;
                        }
                        
                        .facit-header {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            margin-bottom: 5px;
                        }
                        
                        .facit-num {
                            font-weight: 900;
                            font-size: 0.95rem;
                            color: #0284c7;
                        }
                        
                        .facit-badge {
                            background: #0284c7;
                            color: #ffffff;
                            font-weight: 950;
                            font-size: 0.9rem;
                            padding: 2px 7px;
                            border-radius: 6px;
                        }
                        
                        .facit-q-text {
                            font-size: 0.9rem;
                            font-weight: 700;
                            color: #334155;
                            margin-bottom: 4px;
                            line-height: 1.3;
                        }
                        
                        .facit-ans-text {
                            font-size: 0.9rem;
                            font-weight: 750;
                            color: #059669;
                            margin-bottom: 4px;
                        }
                        
                        .facit-expl {
                            font-size: 0.8rem;
                            color: #475569;
                            line-height: 1.35;
                        }
                        
                        @media print {
                            @page {
                                size: A4 portrait;
                                margin: 0;
                            }
                            
                            body {
                                -webkit-print-color-adjust: exact;
                                print-color-adjust: exact;
                            }
                            
                            .print-page {
                                border: none;
                                box-shadow: none;
                                margin: 0;
                                page-break-after: always;
                            }
                        }
                    

/* ===== assets/css/true-false-category.css ===== */
    .primary-cta {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 345px;
        max-width: 100%;
        min-height: 84px;
        height: 84px;
        border-radius: 24px;
        padding: 0.5rem 1.5rem;
        background: #ec4899;
        color: white;
        text-decoration: none;
        box-shadow: 0 10px 20px rgba(236, 72, 153, 0.3);
        font-family: 'Outfit', sans-serif;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .primary-cta:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 16px 32px rgba(236, 72, 153, 0.45);
    }
    .secondary-cta {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 345px;
        max-width: 100%;
        min-height: 84px;
        height: 84px;
        border-radius: 24px;
        padding: 0.5rem 1.5rem;
        background: #7c3aed;
        color: white;
        text-decoration: none;
        box-shadow: 0 10px 20px rgba(124, 58, 237, 0.25);
        font-family: 'Outfit', sans-serif;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .secondary-cta:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 16px 32px rgba(124, 58, 237, 0.4);
    }
    .cta-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 1.25rem;
        justify-content: center;
        align-items: center;
    }
    @media (max-width: 768px) {
        .cta-wrapper { flex-direction: column; align-items: stretch; }
        .primary-cta, .secondary-cta { width: 100%; }
    }
    .cta-title {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        font-size: 1.35rem;
        font-weight: 950;
        text-transform: uppercase;
        line-height: 1.2;
    }
    .cta-subtitle {
        font-size: 0.82rem;
        font-weight: 500;
        line-height: 1.1;
        margin-top: 0.15rem;
    }
    .sub-card {
        text-decoration: none;
        background: white;
        padding: 2.5rem 2rem;
        border-radius: 24px;
        border: 2px solid #f1f5f9;
        text-align: center;
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.01);
    }
    .sub-card:hover {
        transform: translateY(-5px);
        border-color: #6366f1;
        box-shadow: 0 15px 30px rgba(99, 102, 241, 0.08);
    }
    .sub-card .sub-title {
        font-weight: 900;
        color: #4338ca;
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
        letter-spacing: -0.02em;
    }
    .sub-card .sub-action {
        font-size: 0.85rem;
        color: #475569;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-top: 0.5rem;
    }
    .seo-section {
        margin-top: 5rem;
        padding-top: 4rem;
        border-top: 1px solid #e2e8f0;
        line-height: 1.8;
        color: #334155;
    }
    .seo-section p { margin-bottom: 1.5rem; }
    .seo-section h2 { font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem; color: #1e293b; }
    .seo-html-content h3 {
        font-size: 1.6rem;
        font-weight: 850;
        color: #1e293b;
        margin: 3rem 0 1.2rem;
        padding: 0;
        background: none;
        border: none;
        display: block;
    }
    .seo-html-content p {
        margin-bottom: 1.5rem;
    }
    .tf-preview-card {
        background: white;
        border-radius: 32px;
        padding: 3rem;
        box-shadow: 0 20px 40px rgba(0,0,0,0.04);
        border: 1px solid rgba(0,0,0,0.02);
        margin-bottom: 2.5rem;
        position: relative;
        transition: transform 0.3s, box-shadow 0.3s;
    }
    .tf-preview-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 25px 50px rgba(0,0,0,0.06);
    }
    .tf-btn {
        padding: 2rem;
        font-size: 1.1rem;
        font-weight: 900;
        border-radius: 25px;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border: 2px solid;
    }
    .tf-btn-true {
        background: #ecfdf5;
        border-color: #d1fae5;
        color: #065f46;
    }
    .tf-btn-false {
        background: #fff1f2;
        border-color: #ffe4e6;
        color: #9f1239;
    }
    .tf-btn-true:hover {
        background: #d1fae5;
        border-color: #10b981;
        transform: translateY(-2px);
    }
    .tf-btn-false:hover {
        background: #ffe4e6;
        border-color: #f43f5e;
        transform: translateY(-2px);
    }
    .tf-btn.selected-correct {
        background: #10b981 !important;
        color: white !important;
        border-color: #10b981 !important;
    }
    .tf-btn.selected-incorrect {
        background: #f43f5e !important;
        color: white !important;
        border-color: #f43f5e !important;
    }
    .tf-btn.disabled {
        pointer-events: none;
        opacity: 0.6;
    }
    .tf-btn.disabled.selected-correct, .tf-btn.disabled.selected-incorrect {
        opacity: 1;
    }
    .tf-read-more-wrap {
        width: 100%;
        margin-top: 1rem;
        text-align: center;
    }
    .tf-read-more-link {
        color: #4f46e5;
        text-decoration: underline;
        font-size: 13px;
        font-weight: 700;
        transition: opacity 0.2s;
    }
    .tf-read-more-link:hover {
        opacity: 0.8;
    }
    .explanation-box {
        margin-top: 1.5rem;
        padding: 1.5rem;
        background: #f8fafc;
        border-radius: 18px;
        border-left: 6px solid #6366f1;
        font-size: 1rem;
        color: #334155;
        line-height: 1.6;
        text-align: left;
        display: none;
        animation: slideDown 0.3s ease forwards;
    }
    .tf-community-stats {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e2e8f0;
        color: #475569;
        font-size: 0.95rem;
    }
    .tf-community-stats strong {
        color: #1e293b;
        font-size: 1rem;
    }
    .tf-community-stats span:first-of-type {
        color: #4f46e5;
        font-weight: 800;
    }
    .tf-community-stats span + span {
        font-weight: 600;
    }
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .tag-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0,0,0,0.05);
    }
    .pagination {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 4rem;
        flex-wrap: wrap;
    }
    .page-btn {
        padding: 0.6rem 1rem;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        text-decoration: none;
        color: #475569;
        font-weight: 700;
        font-size: 0.9rem;
        transition: all 0.2s;
        min-width: 44px;
        text-align: center;
    }
    .page-btn:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }
    .page-btn.active {
        background: #6366f1;
        color: white;
        border-color: #6366f1;
        box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
    }
    @media (max-width: 600px) {
        .tf-preview-card {
            padding: 2rem 1.5rem;
            border-radius: 24px;
        }
        .tf-btn {
            padding: 1rem;
            font-size: 1rem;
        }
        .primary-cta {
            width: 100%;
        }
    }

/* ===== assets/css/true-false-hub.css ===== */
.segment-question-section-heading {
    max-width: 1000px;
    margin: 3rem auto 1rem;
    text-align: center;
}
.segment-question-section-heading h2 {
    margin: 0;
    color: #1e293b;
    font-size: 1.8rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.02em;
}
.segment-question-section-heading.segment-compact-example-heading {
    margin-top: 0;
}
.tf-hub-cta-compact-bottom{margin-bottom:1rem!important}
.tf-hub-question-heading{margin-top:15px!important}
.tf-latest-choice-row{display:flex;flex-wrap:wrap;gap:.75rem}
.tf-latest-choice-row .tf-btn{width:auto;min-width:0;padding:.5rem 1.25rem;border-radius:14px;font-size:.85rem}
.tf-btn.correct-answered{background:#10b981!important;border-color:#10b981!important;color:#fff!important;pointer-events:none}
.tf-btn.incorrect-answered{background:#f43f5e!important;border-color:#f43f5e!important;color:#fff!important;pointer-events:none}
.tf-btn.disabled-btn{opacity:.6;pointer-events:none}
@media (max-width:768px){.tf-hub-cta-compact-bottom{margin-bottom:1rem!important}}

/* ===== assets/css/riddle-hub.css ===== */
.riddle-hub-explore,
.riddle-hub-latest,
.riddle-hub-popular,
.riddle-hub-discovery {
    max-width: 1000px;
    margin: 0 auto 5rem;
}

.riddle-hub-explore {
    margin-top: -15px;
    margin-bottom: calc(5rem - 60px);
}

.riddle-hub-content-section {
    margin-top: -15px !important;
}

/* Match the list-owned spacing used by the trivia question list. */
.riddle-card-list {
    display: grid;
    gap: 2.5rem;
}

.riddle-hub-section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    margin: 0 0 1.8rem;
    text-align: center;
}

.riddle-hub-section-heading h2 {
    margin: 0;
    color: #1e293b;
    font-size: 1.8rem;
    line-height: 1.15;
    font-weight: 900;
}

.riddle-hub-eyebrow { font-size: 1.45rem; }
.riddle-hub-example-badge { display: inline-flex; align-items: center; padding: .7rem 1.25rem; border-radius: 999px; background: #f5f3ff; color: #5b21b6; font-size: .9rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }

.riddle-hub-audience-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
    margin-bottom: 2.4rem;
}

.riddle-hub-audience-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 9rem;
    padding: 1.2rem;
    border: 1px solid #e9d5ff;
    border-radius: 22px;
    background: #fcfaff;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(30, 41, 59, .05);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.riddle-hub-audience-link:hover,
.riddle-hub-audience-link:focus-visible {
    transform: translateY(-3px);
    border-color: #c4b5fd;
    box-shadow: 0 12px 24px rgba(79, 70, 229, .1);
}

.riddle-hub-audience-icon { font-size: 1.7rem; margin-bottom: .3rem; }
.riddle-hub-audience-title { color: #4338ca; font-size: 1.45rem; font-weight: 900; }
.riddle-hub-audience-action { margin-top: .55rem; color: #475569; font-size: .86rem; font-weight: 850; text-transform: uppercase; }

.riddle-hub-audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.riddle-hub-audience-panel { min-width: 0; padding: 1.5rem; border: 1px solid #e9d5ff; border-radius: 24px; background: #fcfaff; }
.riddle-hub-panel-heading { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; }
.riddle-hub-panel-heading h3 { margin: 0; color: #312e81; font-size: 1.2rem; font-weight: 850; }
.riddle-hub-panel-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: #ede9fe; font-size: 1.35rem; }
.riddle-hub-topic-list { display: flex; flex-wrap: wrap; gap: .6rem; }
.riddle-hub-topic-link, .riddle-hub-age-link { display: inline-flex; align-items: center; gap: .25rem; padding: .6rem .85rem; border: 1px solid #ddd6fe; border-radius: 999px; background: #fff; color: #5b21b6; font-size: .9rem; font-weight: 800; text-decoration: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.riddle-hub-topic-link:hover, .riddle-hub-topic-link:focus-visible, .riddle-hub-age-link:hover, .riddle-hub-age-link:focus-visible { transform: translateY(-2px); border-color: #a78bfa; background: #f5f3ff; }
.riddle-hub-show-topics { display: block; margin: 1rem auto 0; padding: .35rem .6rem; border: 0; background: transparent; color: #4f46e5; font: inherit; font-size: .9rem; font-weight: 850; cursor: pointer; }
.riddle-hub-age-block { margin-top: 1.35rem; padding-top: 1.2rem; border-top: 1px solid #e9e7f5; }
.riddle-hub-age-block h4 { margin: 0 0 .8rem; color: #475569; font-size: .9rem; font-weight: 850; text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.riddle-hub-age-list { display: flex; flex-wrap: wrap; gap: .55rem; }
.riddle-hub-age-link { padding: .5rem .75rem; border-color: #e2e8f0; color: #475569; font-size: .82rem; }

.riddle-hub-intents { margin-top: 2.5rem; }
.riddle-hub-intents h3 { margin: 0 0 1.2rem; color: #1e293b; font-size: 1.45rem; font-weight: 850; text-align: center; }
.riddle-hub-intent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.riddle-hub-intent-link { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1.15rem 1.25rem; border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafc; color: #1e293b; font-weight: 750; text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.riddle-hub-intent-link:hover, .riddle-hub-intent-link:focus-visible { transform: translateY(-2px); border-color: #c4b5fd; box-shadow: 0 8px 18px rgba(79, 70, 229, .08); }
.riddle-hub-intent-link > span:last-child { color: #6366f1; font-size: 1.2rem; }

.riddle-hub-latest-list { display: grid; gap: 1.1rem; }
.riddle-hub-latest-card { padding: 1.5rem; border: 1px solid #e2e8f0; border-radius: 22px; background: #fff; box-shadow: 0 6px 16px rgba(30, 41, 59, .04); }
.riddle-hub-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.riddle-hub-badge { display: inline-flex; padding: .48rem .75rem; border-radius: 999px; background: #f5f3ff; color: #5b21b6; font-size: .82rem; font-weight: 650; }
.riddle-hub-time { color: #475569; font-size: .82rem; font-weight: 650; white-space: nowrap; }
.riddle-hub-latest-card h3 { margin: 0 0 1.1rem; color: #1e293b; font-size: 1.12rem; font-weight: 800; line-height: 1.45; }
.riddle-hub-latest-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.riddle-hub-answer-button { padding: .7rem 1rem; border: 1px solid #c4b5fd; border-radius: 12px; background: #fff; color: #4f46e5; font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; }
.riddle-hub-hint-button { border-color: #e2e8f0; color: #475569; }
.riddle-hub-answer-button-primary { background: #ec4899; border-color: #ec4899; color: #fff; }
.riddle-hub-answer-button:hover { transform: translateY(-1px); border-color: #a78bfa; }
.riddle-hub-answer-button-primary:hover { background: #db2777; border-color: #db2777; }
.riddle-hub-answer-button:focus-visible, .riddle-hub-text-link:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
.riddle-hub-answer { display: grid; gap: .4rem; margin-top: 1rem; padding: 1rem 1.1rem; border: 1px dashed #cbd5e1; border-radius: 16px; background: #f8fafc; color: #334155; line-height: 1.5; }
.riddle-hub-answer[hidden] { display: none; }
.riddle-hub-answer strong { color: #1e293b; }
.riddle-hub-latest-answer { border: 2px solid #10b981; background: #ecfdf5; color: #065f46; }
.riddle-hub-latest-answer strong { color: #059669; }
.riddle-hub-text-link { color: #4f46e5; font-weight: 800; text-decoration: none; }
.riddle-hub-latest-link { display: inline-block; margin-top: .95rem; }

.riddle-hub-popular { padding: 2.2rem; border: 1px solid #fbcfe8; border-radius: 30px; background: #fffaff; }
.riddle-hub-popular-list { display: grid; gap: .9rem; }
.riddle-hub-popular-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid #fbcfe8; border-radius: 18px; background: #fff; color: #1e293b; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.riddle-hub-popular-card:hover, .riddle-hub-popular-card:focus-visible { transform: translateY(-2px); border-color: #ec4899; background: #fff1f7; box-shadow: 0 8px 18px rgba(236, 72, 153, .1); }
.riddle-hub-popular-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid #fbcfe8; border-radius: 12px; background: #fff1f2; }
.riddle-hub-popular-card:hover .riddle-hub-popular-icon, .riddle-hub-popular-card:focus-visible .riddle-hub-popular-icon { background: #ec4899; border-color: #ec4899; }
.riddle-hub-popular-copy { display: grid; min-width: 0; gap: .25rem; flex: 1; }
.riddle-hub-popular-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.riddle-hub-popular-copy small { color: #94a3b8; font-weight: 750; }
.riddle-hub-popular-arrow { color: #ec4899; font-size: 1.3rem; font-weight: 900; }
.riddle-hub-popular-action { display: none; align-items: center; gap: .55rem; color: #db2777; font-size: .82rem; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.riddle-hub-popular-card:hover .riddle-hub-popular-arrow, .riddle-hub-popular-card:focus-visible .riddle-hub-popular-arrow { display: none; }
.riddle-hub-popular-card:hover .riddle-hub-popular-action, .riddle-hub-popular-card:focus-visible .riddle-hub-popular-action { display: inline-flex; }

.riddle-hub-discovery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.riddle-hub-discovery-card { display: grid; gap: .45rem; min-height: 8.5rem; padding: 1.1rem; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; color: #1e293b; text-decoration: none; }
.riddle-hub-discovery-icon { font-size: 1.7rem; }
.riddle-hub-discovery-name { font-weight: 850; }
.riddle-hub-discovery-action { align-self: end; color: #4f46e5; font-size: .85rem; font-weight: 800; }

@media (max-width: 760px) {
    .riddle-hub-audience-links, .riddle-hub-audience-grid, .riddle-hub-intent-grid { grid-template-columns: 1fr; }
    .riddle-hub-discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .riddle-hub-popular { padding: 1.2rem; }
}

@media (max-width: 520px) {
    .riddle-hub-card-meta { align-items: flex-start; flex-direction: column; gap: .5rem; }
    .riddle-hub-time { white-space: normal; }
    .riddle-hub-latest-card h3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .riddle-hub-discovery-grid { grid-template-columns: 1fr; }
    .riddle-hub-popular-copy strong { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
}

/* ===== assets/css/trivia-create-quiz-cta.css ===== */
.trivia-create-quiz-cta{max-width:900px;margin:4rem auto 1rem;padding:2rem 2.25rem;text-align:center;background:linear-gradient(135deg,#f5f3ff,#eef2ff);border:1px solid #ddd6fe;border-radius:24px}.trivia-create-quiz-cta h3{margin:0 0 .7rem;color:#475569;font-size:1.1rem}.trivia-create-quiz-cta h4{margin:0 0 .75rem;color:#1e293b;font-size:1.8rem;font-weight:900}.trivia-create-quiz-cta p{max-width:680px;margin:0 auto 1.35rem;color:#475569;line-height:1.65}.trivia-create-quiz-cta .creator-btn{display:inline-flex}@media(max-width:600px){.trivia-create-quiz-cta{margin-top:3rem;padding:1.5rem 1.1rem}.trivia-create-quiz-cta h4{font-size:1.5rem}}

/* ===== assets/css/trivia-create-quiz-cta-pink.css ===== */
.trivia-create-quiz-cta{margin-top:0!important;background:linear-gradient(135deg,#fdf2f8 0%,#fce7f3 100%);border-color:#f9a8d4;box-shadow:none}.trivia-create-quiz-cta h3{color:#be185d}.trivia-create-quiz-cta .creator-btn{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.2rem;border:0;border-radius:12px;background:#ec4899;color:#fff;text-decoration:none;font-weight:900;box-shadow:0 8px 18px rgba(236,72,153,.25);cursor:pointer}.trivia-create-quiz-cta .creator-btn:hover{background:#db2777;color:#fff;text-decoration:none}

/* ===== assets/css/music-taxonomy.css ===== */
.music-taxonomy-page {
    width: min(100% - 2rem, 1000px);
    margin: 0 auto;
    padding: .25rem 0 4rem;
}

.music-taxonomy-hero {
    max-width: 100%;
    margin-bottom: 2rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Keep taxonomy landing pages as compact as the main music hub. */
.music-taxonomy-hero > div {
    margin-bottom: 1.5rem !important;
}

.music-taxonomy-index-grid,
.music-taxonomy-packs__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}

.music-taxonomy-index-card,
.music-taxonomy-pack-card {
    min-width: 0;
    border: 1px solid #e9d5ff;
    border-radius: 18px;
    background: #fff;
    color: #1e293b;
    text-decoration: none;
    box-shadow: 0 7px 20px rgba(124, 58, 237, .06);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.music-taxonomy-index-card:hover,
.music-taxonomy-pack-card:hover {
    border-color: #c4b5fd;
    box-shadow: 0 12px 25px rgba(124, 58, 237, .12);
    transform: translateY(-2px);
}

.music-taxonomy-index-card {
    display: flex;
    min-height: 112px;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem;
    text-align: center;
}

.music-taxonomy-index-card strong { font-size: 1.1rem; }
.music-taxonomy-index-card span { margin-top: .3rem; color: #475569; font-size: .85rem; font-weight: 700; }

.music-taxonomy-packs {
    padding: 1.5rem;
    border: 1px solid #eadcff;
    border-radius: 24px;
    background: #faf5ff;
}

.music-taxonomy-packs__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.music-taxonomy-packs__header h2 { margin: 0; color: #1e293b; font-size: 1.4rem; font-weight: 900; }
.music-taxonomy-packs__header > span { color: #6d28d9; font-size: .9rem; font-weight: 800; }

.music-taxonomy-pack-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem;
}

.music-taxonomy-pack-card__icon { flex: 0 0 auto; font-size: 1.25rem; }
.music-taxonomy-pack-card__copy { display: flex; min-width: 0; flex-direction: column; gap: .2rem; }
.music-taxonomy-pack-card__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-taxonomy-pack-card__copy span { color: #475569; font-size: .82rem; font-weight: 700; }

.music-taxonomy-back {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}

.music-taxonomy-back a { color: #6d28d9; font-weight: 800; text-decoration: none; }
.music-taxonomy-back a:hover { text-decoration: underline; }

/* Hub entry cards on the main music page. */
.music-taxonomy-hub {
    max-width: 900px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
}

.music-taxonomy-hub > h2 { margin: 0 0 1rem; color: #1e293b; font-size: 1.45rem; font-weight: 900; text-align: left; }
.music-taxonomy-hub__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.music-taxonomy-hub__group { padding: 1.25rem; border: 1px solid #e2e8f0; border-radius: 20px; background: #fff; text-align: left; }
.music-taxonomy-hub__group h3 { margin: 0 0 .8rem; color: #1e293b; font-size: 1.05rem; }
.music-taxonomy-hub__links { display: flex; flex-wrap: wrap; gap: .55rem; }
.music-taxonomy-hub__links a { padding: .6rem .9rem; border-radius: 999px; background: #f5f3ff; color: #5b21b6; font-weight: 800; text-decoration: none; }
.music-taxonomy-hub__links a:hover { background: #ede9fe; }
.music-taxonomy-hub__more { display: inline-block; margin-top: 1rem; color: #6d28d9; font-size: .9rem; font-weight: 900; text-decoration: none; }
.music-taxonomy-hub__more:hover { text-decoration: underline; }

@media (max-width: 760px) {
    .music-taxonomy-hero { margin-top: 1.75rem; }
    .music-taxonomy-index-grid,
    .music-taxonomy-packs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .music-taxonomy-hub__groups { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .music-taxonomy-index-grid,
    .music-taxonomy-packs__grid { grid-template-columns: 1fr; }
    .music-taxonomy-packs { padding: 1rem; }
    .music-taxonomy-back { align-items: flex-start; flex-direction: column; }
}