* {
    box-sizing: border-box;
}

:root {
    --navy: #19123d;
    --blue: #4058b4;
    --magenta: #a71c60;
    --pink: #df80bb;
    --orange: #ff972f;
    --cream: #fff8f2;
    --white: #ffffff;
    --pale-blue: #edf2ff;
    --pale-pink: #fff0f7;
    --pale-orange: #fff1df;
    --shadow: 0 12px 30px rgba(25, 18, 61, 0.15);
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 0%, rgba(223, 128, 187, .20), transparent 28%),
        radial-gradient(circle at 90% 0%, rgba(64, 88, 180, .16), transparent 30%),
        var(--cream);
    color: var(--navy);
    font-family: "Baloo 2", sans-serif;
}

button, a {
    -webkit-tap-highlight-color: transparent;
}

.site-header {
    padding: 10px 24px;
    background: var(--white);
    border-bottom: 5px solid var(--orange);
    box-shadow: 0 4px 18px rgba(25, 18, 61, .10);
}

.header-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(190px, 280px) 1fr;
    gap: 24px;
    align-items: center;
}

.brand {
    display: block;
}

.brand img {
    display: block;
    width: min(175px, 100%);
    height: auto;
}

.advertising-slot {
    min-height: 72px;
    border: 2px dashed #b9b4cc;
    border-radius: 14px;
    background: #faf9fd;
    color: #77718c;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.1;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.advertising-slot:hover {
    transform: translateY(-1px);
    border-color: var(--blue);
    background: var(--pale-blue);
}

.advertising-slot span {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.advertising-slot strong {
    margin-top: 5px;
    font-family: "Baloo 2", sans-serif;
    color: var(--navy);
    font-size: 1.15rem;
}

.advertising-slot small {
    margin-top: 4px;
    font-size: .72rem;
}

.page-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 20px auto;
}

.screen {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.start-screen {
    min-height: 560px;
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    background: var(--white);
}

.start-copy {
    padding: 40px 48px;
}

.eyebrow {
    color: var(--magenta);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .20em;
}

.start-copy h1 {
    margin: 5px 0 0;
    max-width: 720px;
    font: 700 clamp(2.2rem, 5vw, 4rem)/.98 "Baloo 2", sans-serif;
}

.quiz-code {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--navy);
    color: var(--white);
    font: 700 .8rem/1 "Baloo 2", sans-serif;
    letter-spacing: .10em;
}

.intro {
    max-width: 680px;
    margin: 20px 0 22px;
    font-size: 1.08rem;
    line-height: 1.55;
}

.quiz-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 0 0 24px;
}

.meta-card {
    min-height: 84px;
    padding: 13px 14px;
    border-radius: 15px;
    background: var(--pale-blue);
    border: 2px solid #dce3ff;
}

.meta-card:nth-child(2) { background: var(--pale-pink); border-color: #f4d5e7; }
.meta-card:nth-child(3) { background: var(--pale-orange); border-color: #ffe0bd; }
.meta-card:nth-child(4) { background: #eef8e9; border-color: #d8e9ce; }

.meta-card span,
.result-meta span {
    display: block;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .13em;
    opacity: .72;
}

.meta-card strong {
    display: block;
    margin-top: 5px;
    font: 600 1.05rem/1.05 "Baloo 2", sans-serif;
}

.primary-button,
.next-button {
    border: 0;
    border-radius: 13px;
    padding: 14px 25px;
    font: 800 1rem "Baloo 2", sans-serif;
    letter-spacing: .05em;
    cursor: pointer;
}

.primary-button {
    background: var(--orange);
    color: var(--navy);
    box-shadow: 0 5px 0 #cf6e0c;
}

.primary-button:hover {
    transform: translateY(-1px);
}

.results-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--navy);
    border-radius: 13px;
    padding: 12px 23px;
    background: var(--white);
    color: var(--navy);
    font: 800 1rem "Baloo 2", sans-serif;
    letter-spacing: .05em;
    text-decoration: none;
}

.secondary-button:hover {
    background: var(--pale-blue);
    transform: translateY(-1px);
}

.start-note {
    display: inline-block;
    margin: 0 0 0 14px;
    font-size: .88rem;
    font-weight: 700;
}

.start-art {
    position: relative;
    min-height: 560px;
    padding: 38px 28px;
    background:
        radial-gradient(circle at 50% 28%, rgba(255,255,255,.22), transparent 24%),
        var(--blue);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.start-art::before,
.start-art::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 18px solid rgba(255,255,255,.08);
}

.start-art::before {
    width: 300px;
    height: 300px;
    top: -120px;
    right: -120px;
}

.start-art::after {
    width: 230px;
    height: 230px;
    bottom: -100px;
    left: -100px;
}

.lightbulb {
    width: 145px;
    height: 145px;
    border-radius: 50% 50% 46% 46%;
    background: var(--orange);
    color: var(--navy);
    display: grid;
    place-items: center;
    font: 700 5.5rem/1 "Baloo 2", sans-serif;
    transform: rotate(-5deg);
    box-shadow: 0 14px 0 rgba(25,18,61,.25);
    z-index: 1;
}

.art-title {
    margin-top: 25px;
    text-align: center;
    font: 700 clamp(2.5rem, 5vw, 4rem)/.82 "Baloo 2", sans-serif;
    letter-spacing: .02em;
    z-index: 1;
}

.art-strip {
    margin-top: 25px;
    padding: 9px 13px;
    border-radius: 999px;
    background: var(--magenta);
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .08em;
    z-index: 1;
}

.quiz-screen {
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.quiz-topline {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: end;
    padding: 4px 4px 14px;
}

.quiz-title {
    margin: 4px 0 2px;
    font: 700 clamp(2rem, 4vw, 3.3rem)/.98 "Baloo 2", sans-serif;
}

.quiz-code-small {
    margin-top: 4px;
    font-size: .68rem;
}

.scoreboard {
    display: flex;
    gap: 10px;
}

.score-box {
    min-width: 112px;
    padding: 12px 18px;
    text-align: center;
    background: var(--blue);
    color: var(--white);
    border-radius: 15px;
    box-shadow: 0 5px 0 rgba(25,18,61,.20);
}

.score-box span {
    display: block;
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .16em;
}

.score-box strong {
    display: block;
    margin-top: 1px;
    font: 700 2rem/1 "Baloo 2", sans-serif;
}

.timer-box {
    background: var(--orange);
    color: var(--navy);
    min-width: 145px;
}

.timer-box strong {
    font-size: 2.35rem;
}

.timer-box.warning {
    background: #ffd25e;
}

.timer-box.danger {
    background: #f35d5d;
    color: var(--white);
}

.progress-track {
    height: 10px;
    margin-bottom: 16px;
    background: #ddd9e8;
    border-radius: 99px;
    overflow: hidden;
}

.progress-bar {
    width: 10%;
    height: 100%;
    background: linear-gradient(90deg, var(--magenta), var(--pink), var(--orange));
    transition: width .25s ease;
}

.question-card {
    padding: 26px;
    background: var(--white);
    border: 3px solid var(--navy);
    border-radius: 22px;
    box-shadow: 0 8px 0 var(--blue);
}

.question-heading {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    margin-bottom: 18px;
}

.question-heading > span:first-child {
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.think-fast {
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--pale-orange);
    color: #a65c05;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .10em;
}

.question-card h2 {
    margin: 0 0 22px;
    max-width: 980px;
    font: 600 clamp(1.45rem, 3vw, 2.15rem)/1.15 "Baloo 2", sans-serif;
}

.answer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.answer-button {
    min-height: 66px;
    padding: 14px 18px;
    text-align: left;
    border: 2px solid #d7d4e2;
    border-radius: 13px;
    background: #fbfaff;
    color: var(--navy);
    font: 700 1rem/1.25 "Baloo 2", sans-serif;
    cursor: pointer;
    transition: .15s ease;
}

.answer-button:hover:not(:disabled) {
    border-color: var(--blue);
    background: var(--pale-blue);
    transform: translateY(-1px);
}

.answer-button.correct {
    border-color: #3f9b57;
    background: #e8f7ea;
}

.answer-button.incorrect {
    border-color: #c94b4b;
    background: #fdeaea;
}

.answer-button:disabled {
    cursor: default;
}

.feedback {
    margin-top: 15px;
    padding: 12px 14px;
    border-radius: 11px;
    font-weight: 800;
}

.correct-feedback {
    background: #e8f7ea;
    color: #276b37;
}

.incorrect-feedback {
    background: #fdeaea;
    color: #8f3030;
}

.question-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.next-button {
    background: var(--navy);
    color: var(--white);
}

.next-button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.question-image-area {
    margin: 0 0 22px;
}

.future-image-placeholder {
    min-height: 220px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: var(--pale-blue);
    border: 2px dashed var(--blue);
    color: var(--blue);
    font: 600 1.3rem "Baloo 2", sans-serif;
    letter-spacing: .05em;
}

.results-screen {
    min-height: 550px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 80% 20%, rgba(223,128,187,.22), transparent 28%),
        var(--navy);
    color: var(--white);
    border: 4px solid var(--magenta);
}

.results-inner {
    width: min(680px, 100%);
    padding: 50px 30px;
    text-align: center;
}

.results-inner .eyebrow {
    color: var(--pink);
}

.results-inner h1 {
    margin: 5px 0;
    font: 700 clamp(2.4rem, 7vw, 4.5rem)/.95 "Baloo 2", sans-serif;
}

.final-score {
    margin: 20px 0 6px;
    color: var(--orange);
    font: 700 clamp(4rem, 10vw, 6.5rem)/.9 "Baloo 2", sans-serif;
}

.results-inner p {
    margin: 0 auto 25px;
    max-width: 550px;
    font-size: 1.05rem;
}

.result-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 28px;
}

.result-meta > div {
    padding: 12px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 12px;
    background: rgba(255,255,255,.07);
}

.result-meta strong {
    display: block;
    margin-top: 4px;
    font: 600 1.15rem "Baloo 2", sans-serif;
}

.site-footer {
    width: min(1180px, calc(100% - 32px));
    margin: 20px auto 25px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    color: #77718c;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .10em;
}

[hidden] {
    display: none !important;
}

@media (max-width: 820px) {
    .header-inner {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .brand img {
        width: 155px;
        margin: 0 auto;
    }

    .advertising-slot {
        min-height: 60px;
    }

    .start-screen {
        grid-template-columns: 1fr;
    }

    .start-art {
        min-height: 330px;
        padding: 25px;
    }

    .quiz-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .quiz-topline {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .scoreboard {
        width: 100%;
    }

    .score-box,
    .timer-box {
        flex: 1;
    }
}

@media (max-width: 600px) {
    .site-header {
        padding: 8px 15px;
    }

    .page-shell {
        width: min(100% - 18px, 1180px);
        margin-top: 12px;
    }

    .start-copy {
        padding: 28px 22px;
    }

    .start-copy h1 {
        font-size: 2.35rem;
    }

    .quiz-meta,
    .answer-grid,
    .result-meta {
        grid-template-columns: 1fr;
    }

    .start-note {
        display: block;
        margin: 15px 0 0;
    }

    .question-card {
        padding: 19px;
    }

    .question-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .quiz-title {
        font-size: 2.15rem;
    }

    .score-box {
        padding: 10px 12px;
        min-width: 0;
    }

    .score-box strong {
        font-size: 1.75rem;
    }

    .timer-box strong {
        font-size: 2rem;
    }

    .next-button,
    .primary-button {
        width: 100%;
    }

    .site-footer {
        flex-direction: column;
        text-align: center;
    }
}


/* V6 quiz selector */
.quiz-picker-label{display:block;margin:0 0 .45rem;font-weight:800;font-size:.78rem;letter-spacing:.08em;color:var(--ink,#17221F)}
.quiz-picker{display:block;width:100%;max-width:560px;margin:0 0 1.1rem;padding:.85rem 1rem;border:2px solid #17221F;border-radius:12px;background:#fff;color:#17221F;font:inherit;font-weight:700;box-shadow:4px 4px 0 #C7F000}
.quiz-picker:focus{outline:3px solid #C7F000;outline-offset:3px}

.quiz-question-image{display:block;max-width:100%;max-height:360px;margin:0 auto;border-radius:14px;object-fit:contain}

/* V10 category-first quiz browsing */
.category-screen, .quiz-list-screen { background: #fff; padding: clamp(24px, 4vw, 48px); }
.browse-heading { margin-bottom: 26px; }
.browse-heading h1 { margin: 6px 0 8px; font-family: "Baloo 2", sans-serif; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; color: var(--navy); }
.browse-heading p { margin: 0; max-width: 650px; font-size: 1.05rem; color: #5f5a78; }
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.category-card { --card-bg: #edf2ff; --card-border: #cdd8ff; border: 2px solid var(--card-border); border-radius: 20px; padding: 22px 20px 18px; min-height: 205px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; background: var(--card-bg); color: var(--navy); cursor: pointer; box-shadow: 0 5px 0 rgba(25,18,61,.07); transition: transform .18s ease, box-shadow .18s ease; font: inherit; }
.category-card:hover:not(:disabled) { transform: translateY(-4px); box-shadow: 0 10px 0 rgba(25,18,61,.08); }
.category-card:focus-visible, .back-button:focus-visible, .quiz-card-button:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.category-icon { font-size: 2.15rem; line-height: 1; margin-bottom: 14px; }
.category-card-name { font-family: "Baloo 2", sans-serif; font-size: 1.28rem; font-weight: 600; line-height: 1.15; }
.category-card-description { margin-top: 8px; font-size: .88rem; line-height: 1.4; color: #55506e; }
.category-card-count { margin-top: auto; padding-top: 14px; font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.category-card.orange { --card-bg:#fff1df; --card-border:#ffd8a8; }
.category-card.pink { --card-bg:#fff0f7; --card-border:#f2c6df; }
.category-card.purple { --card-bg:#f0eaff; --card-border:#d8c8ff; }
.category-card.green { --card-bg:#eaf7e8; --card-border:#c8e5c3; }
.category-card.yellow { --card-bg:#fff8d9; --card-border:#f0e29a; }
.category-card.teal { --card-bg:#e3f7f4; --card-border:#b9e6df; }
.category-card.red { --card-bg:#ffeded; --card-border:#f5c4c4; }
.category-card.coming-soon { opacity: .72; cursor: not-allowed; }
.back-button { border: 0; background: var(--pale-blue); color: var(--navy); border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: 900; cursor: pointer; margin-bottom: 22px; }
.quiz-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.quiz-choice-card { min-width: 0; border: 2px solid #e3e0ed; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; background: #fff; box-shadow: 0 5px 0 rgba(25,18,61,.06); }
.quiz-choice-card.card-tone-0 { background: #f4f6ff; border-color: #d8dfff; }
.quiz-choice-card.card-tone-1 { background: #fff5e9; border-color: #ffe0bb; }
.quiz-choice-card.card-tone-2 { background: #fff1f8; border-color: #f4d5e7; }
.quiz-choice-card.card-tone-3 { background: #eef9ed; border-color: #d2e9ce; }
.quiz-choice-card.card-tone-4 { background: #f3edff; border-color: #ded2ff; }
.quiz-choice-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quiz-choice-icon { font-size: 1.6rem; }
.quiz-choice-code { font-size: .72rem; font-weight: 900; letter-spacing: .08em; color: #716b88; }
.quiz-choice-card h2 { font-family: "Baloo 2", sans-serif; font-size: 1.4rem; line-height: 1.18; margin: 18px 0; flex: 1; }
.quiz-choice-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.quiz-choice-meta span { background: rgba(255,255,255,.8); border: 1px solid rgba(25,18,61,.10); padding: 6px 9px; border-radius: 999px; font-size: .72rem; font-weight: 900; }
.quiz-card-button { width: 100%; margin-top: auto; }
@media (max-width: 900px) { .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quiz-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .category-screen, .quiz-list-screen { padding: 23px 17px; border-radius: 18px; } .category-grid, .quiz-card-grid { grid-template-columns: 1fr; gap: 12px; } .category-card { min-height: 165px; padding: 18px; } .category-icon { margin-bottom: 10px; } .quiz-choice-card { padding: 18px; } }


/* VERSION 11 — Charcoal & Bold Colours theme */
:root {
    --navy: #18181B;
    --blue: #20C9C3;
    --magenta: #FF8A35;
    --pink: #FF8A35;
    --orange: #FFD447;
    --cream: #18181B;
    --white: #24242B;
    --pale-blue: #303038;
    --pale-pink: #382B31;
    --pale-orange: #3B3024;
    --ink: #F5F5F5;
    --shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

body {
    background:
        radial-gradient(circle at 8% 0%, rgba(32, 201, 195, .10), transparent 28%),
        radial-gradient(circle at 92% 0%, rgba(255, 138, 53, .10), transparent 30%),
        #18181B;
    color: #F5F5F5;
}

.site-header {
    background: #202027;
    border-bottom-color: #FF8A35;
    box-shadow: 0 4px 18px rgba(0,0,0,.3);
}

.advertising-slot {
    border-color: #555560;
    background: #292930;
    color: #D0D0D7;
}
.advertising-slot:hover { border-color: #20C9C3; background: #303038; }
.advertising-slot strong { color: #FFD447; }

.screen { box-shadow: var(--shadow); }
.category-screen, .quiz-list-screen {
    background: #222229;
    border: 1px solid #3D3D46;
}
.browse-heading h1 { color: #F8F8FA; }
.browse-heading p { color: #D0D0D7; }
.eyebrow { color: #20C9C3; }

/* Bold category cards: dark foundations with vivid colour accents. */
.category-card {
    --card-bg: #2B2B33;
    --card-border: #50505B;
    background: var(--card-bg);
    border-color: var(--card-border);
    color: #F8F8FA;
    box-shadow: 0 5px 0 rgba(0,0,0,.22);
}
.category-card .category-card-description { color: #D3D3DB; }
.category-card .category-card-count { color: #FFD447; }
.category-card.blue { --card-bg: #252F3D; --card-border: #20C9C3; }
.category-card.orange { --card-bg: #3B2B21; --card-border: #FF8A35; }
.category-card.pink { --card-bg: #392630; --card-border: #FF78B8; }
.category-card.purple { --card-bg: #30263F; --card-border: #B99AFF; }
.category-card.green { --card-bg: #24382F; --card-border: #69D99A; }
.category-card.yellow { --card-bg: #39331F; --card-border: #FFD447; }
.category-card.teal { --card-bg: #203737; --card-border: #20C9C3; }
.category-card.red { --card-bg: #3B2528; --card-border: #FF7474; }
.category-card:hover:not(:disabled) { box-shadow: 0 10px 0 rgba(0,0,0,.28); }
.category-card:focus-visible, .back-button:focus-visible, .quiz-card-button:focus-visible,
.answer-button:focus-visible, .primary-button:focus-visible, .next-button:focus-visible {
    outline: 3px solid #FFD447;
    outline-offset: 3px;
}
.category-card.coming-soon { opacity: .68; }

.back-button {
    background: #303038;
    color: #F8F8FA;
    border: 1px solid #555560;
}
.back-button:hover { background: #3A3A44; }

.quiz-choice-card {
    background: #292930;
    border-color: #484852;
    color: #F8F8FA;
    box-shadow: 0 5px 0 rgba(0,0,0,.22);
}
.quiz-choice-card.card-tone-0 { background: #252F3D; border-color: #20C9C3; }
.quiz-choice-card.card-tone-1 { background: #3B2B21; border-color: #FF8A35; }
.quiz-choice-card.card-tone-2 { background: #392630; border-color: #FF78B8; }
.quiz-choice-card.card-tone-3 { background: #24382F; border-color: #69D99A; }
.quiz-choice-card.card-tone-4 { background: #30263F; border-color: #B99AFF; }
.quiz-choice-code { color: #E1E1E8; }
.quiz-choice-meta span {
    background: #18181B;
    border-color: #50505B;
    color: #F5F5F5;
}

.start-screen { background: #222229; }
.start-copy { color: #F5F5F5; }
.start-copy h1, .quiz-title { color: #F8F8FA; }
.intro, .start-note { color: #D0D0D7; }
.quiz-picker-label { color: #F5F5F5; }
.quiz-picker {
    border-color: #20C9C3;
    background: #303038;
    color: #F8F8FA;
    box-shadow: 4px 4px 0 #FF8A35;
}
.quiz-picker option { background: #303038; color: #F8F8FA; }
.quiz-picker:focus { outline-color: #FFD447; }
.quiz-code { background: #20C9C3; color: #18181B; }
.meta-card, .meta-card:nth-child(2), .meta-card:nth-child(3), .meta-card:nth-child(4) {
    background: #303038;
    border-color: #4A4A55;
    color: #F5F5F5;
}
.meta-card:nth-child(2) { border-top: 3px solid #FF78B8; }
.meta-card:nth-child(3) { border-top: 3px solid #FF8A35; }
.meta-card:nth-child(4) { border-top: 3px solid #FFD447; }

.primary-button {
    background: #FF8A35;
    color: #18181B;
    box-shadow: 0 5px 0 #C95C16;
}
.primary-button:hover { background: #FFA45F; }
.secondary-button {
    border-color: #20C9C3;
    background: #303038;
    color: #F8F8FA;
}
.secondary-button:hover { background: #3B3B45; }

.start-art {
    background:
        radial-gradient(circle at 50% 28%, rgba(255,255,255,.16), transparent 24%),
        #245C60;
}
.lightbulb { background: #FFD447; color: #18181B; }
.art-strip { background: #FF8A35; color: #18181B; }

.quiz-screen { color: #F5F5F5; }
.score-box { background: #20C9C3; color: #18181B; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.timer-box { background: #FFD447; color: #18181B; }
.timer-box.warning { background: #FFB347; }
.timer-box.danger { background: #FF7474; color: #18181B; }
.progress-track { background: #3D3D46; }
.progress-bar { background: linear-gradient(90deg, #20C9C3, #FFD447, #FF8A35); }
.question-card {
    background: #24242B;
    color: #F8F8FA;
    border-color: #20C9C3;
    box-shadow: 0 8px 0 #303038;
}
.question-card h2 { color: #F8F8FA; }
.think-fast { background: #3B3024; color: #FFD447; }
.answer-button {
    border-color: #50505B;
    background: #303038;
    color: #F8F8FA;
}
.answer-button:hover:not(:disabled) { border-color: #20C9C3; background: #263B3B; }
.answer-button.correct { border-color: #69D99A; background: #20392D; color: #DDFBE8; }
.answer-button.incorrect { border-color: #FF7474; background: #40272B; color: #FFE3E3; }
.correct-feedback { background: #20392D; color: #BFF3D1; border: 1px solid #69D99A; }
.incorrect-feedback { background: #40272B; color: #FFDADA; border: 1px solid #FF7474; }
.next-button { background: #20C9C3; color: #18181B; }
.next-button:hover:not(:disabled) { background: #58E1DB; }
.future-image-placeholder { background: #303038; border-color: #20C9C3; color: #80E9E4; }

.results-screen {
    background:
        radial-gradient(circle at 80% 20%, rgba(255,138,53,.16), transparent 28%),
        #202027;
    border-color: #FF8A35;
}
.results-inner .eyebrow { color: #20C9C3; }
.final-score { color: #FFD447; }
.result-meta > div { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
.result-meta span { color: #D0D0D7; }
.site-footer { color: #B8B8C2; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ACCESSIBILITY FIX — high-contrast quiz results */
.results-screen,
.results-screen .results-inner {
    color: #F8F8FA;
}

.results-screen .results-inner .eyebrow {
    color: #20C9C3;
}

.results-screen .results-inner h1,
.results-screen .results-inner p {
    color: #F8F8FA;
}

.results-screen .final-score {
    color: #FFD447;
}

.results-screen .result-meta > div {
    background: #303038;
    border-color: #62626E;
}

.results-screen .result-meta span {
    color: #E1E1E8;
    opacity: 1;
}

.results-screen .result-meta strong {
    color: #FFFFFF;
}

/* FONT SIZE IMPROVEMENTS — clearer reading across the site */
body {
    font-size: 17px;
}

/* Homepage category cards: clearer descriptions and quiz counts */
.category-card-name {
    font-size: 1.35rem;
}

.category-card .category-card-description {
    font-size: 1rem;
    line-height: 1.45;
}

.category-card .category-card-count {
    font-size: .9rem;
    line-height: 1.35;
}

/* Browse-quiz cards: slightly larger supporting details */
.quiz-choice-code {
    font-size: .9rem;
}

.quiz-choice-meta span {
    font-size: .82rem;
}

/* Quiz answer options: larger, easier-to-read text */
.answer-button {
    font-size: 1.15rem;
    line-height: 1.35;
    min-height: 72px;
}

@media (max-width: 600px) {
    .answer-button {
        font-size: 1.1rem;
        min-height: 68px;
    }
}

/* HOMEPAGE — FEATURED QUIZ PROMOTIONS */

.featured-section {
    margin: 0 0 38px;
}

.featured-heading {
    margin-bottom: 18px;
}

.featured-heading h2 {
    margin: 5px 0 6px;
    font-family: "Baloo 2", sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.15;
    color: #F8F8FA;
}

.featured-heading p {
    margin: 0;
    color: #D0D0D7;
}

.featured-quiz-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.featured-quiz-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px;
    border: 2px solid #50505B;
    border-radius: 17px;
    background: #292930;
    color: #F8F8FA;
    box-shadow: 0 5px 0 rgba(0,0,0,.22);
}

.featured-quiz-card h3 {
    margin: 14px 0 5px;
    font-family: "Baloo 2", sans-serif;
    font-size: 1.3rem;
    line-height: 1.2;
}

.featured-quiz-card p {
    margin: 0 0 18px;
    color: #D3D3DB;
    font-size: .9rem;
}

.featured-label {
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.featured-label.new {
    background: #20C9C3;
    color: #18181B;
}

.featured-label.featured {
    background: #FF78B8;
    color: #18181B;
}

.featured-label.popular {
    background: #FFD447;
    color: #18181B;
}

.featured-play-button {
    width: 100%;
    margin-top: auto;
}

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

@media (max-width: 560px) {
    .featured-quiz-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .featured-quiz-card {
        padding: 18px;
    }
}

/* QUIZ SHARING PANELS */

.share-panel {
    margin-top: 28px;
    padding: 20px;
    border: 2px solid #50505B;
    border-radius: 16px;
    background: #303038;
    color: #F8F8FA;
}

.share-panel h2 {
    margin: 0 0 6px;
    font-family: "Baloo 2", sans-serif;
    font-size: 1.35rem;
    color: #FFD447;
}

.share-panel p {
    margin: 0 0 16px;
    color: #D3D3DB;
}

.share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border: 1px solid #20C9C3;
    border-radius: 9px;
    background: #24242B;
    color: #F8F8FA;
    font-family: "Nunito Sans", sans-serif;
    font-size: .85rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.share-button:hover {
    background: #20C9C3;
    color: #18181B;
}

.share-status {
    margin: 12px 0 0 !important;
    color: #69D99A !important;
    font-size: .85rem;
}

@media (max-width: 560px) {
    .share-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .share-button {
        text-align: center;
    }
}