/* ============================================================
   AMRIT GITA — QUIZ
   File: css/quiz.css
   Scope: quiz.html only
============================================================ */


/* ============================================================
   PAGE
============================================================ */

body.quiz-page {
    background: #fbf6ec;
}


body.quiz-page [hidden] {
    display: none !important;
}


body.quiz-page .quiz-main {
    position: relative;
    overflow: hidden;
}


body.quiz-page .quiz-small-label {
    display: block;

    margin-bottom: 8px;

    color: var(--ag-gold-dark);

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}



/* ============================================================
   HERO
============================================================ */

body.quiz-page .quiz-hero {
    position: relative;

    min-height: 610px;

    display: flex;
    align-items: center;

    padding:
        calc(var(--ag-header-height) + 48px)
        0
        78px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 79% 38%,
            rgba(218, 156, 56, 0.18),
            transparent 29%
        ),
        radial-gradient(
            circle at 12% 80%,
            rgba(217, 152, 50, 0.07),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #fdf9f1 0%,
            #f8eddd 100%
        );
}


body.quiz-page .quiz-hero::after {
    content: "ॐ";

    position: absolute;

    right: 7%;
    top: 46%;

    color: rgba(179, 120, 31, 0.045);

    font-family:
        "Nirmala UI",
        "Mangal",
        serif;

    font-size: clamp(180px, 20vw, 330px);

    line-height: 1;

    transform: translateY(-50%);

    pointer-events: none;
}


body.quiz-page .quiz-hero-glow {
    position: absolute;

    width: 650px;
    height: 650px;

    right: -240px;
    top: -210px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(217, 145, 31, 0.16),
            transparent 69%
        );

    pointer-events: none;
}



/* ============================================================
   BREADCRUMB
============================================================ */

body.quiz-page .quiz-back-row {
    position: relative;
    z-index: 4;

    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 38px;
}


body.quiz-page .quiz-back-link {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: var(--ag-text-muted);

    font-size: 11px;
    font-weight: 750;

    transition:
        color var(--ag-transition),
        transform var(--ag-transition);
}


body.quiz-page
.quiz-back-link:first-child:hover {
    color: var(--ag-saffron-dark);

    transform: translateX(-3px);
}


body.quiz-page
.quiz-back-link:last-child:hover {
    color: var(--ag-saffron-dark);
}


body.quiz-page .quiz-back-divider {
    color: rgba(98, 75, 48, 0.30);

    font-size: 11px;
}



/* ============================================================
   HERO CONTENT
============================================================ */

body.quiz-page .quiz-hero-content {
    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(310px, 0.85fr);

    align-items: center;

    gap: 70px;
}


body.quiz-page .quiz-hero-copy {
    max-width: 760px;
}


body.quiz-page .quiz-kicker {
    width: fit-content;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 19px;

    padding: 10px 15px;

    border:
        1px solid
        rgba(187, 127, 30, 0.24);

    border-radius: 999px;

    color: #986019;

    background:
        rgba(255, 251, 243, 0.72);

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}


body.quiz-page
.quiz-kicker span:first-child {
    color: #be7713;

    font-size: 13px;
}


body.quiz-page
.quiz-hero-copy h1 {
    margin-bottom: 20px;

    color: var(--ag-text);

    font-size: clamp(50px, 5.7vw, 78px);
    font-weight: 850;

    line-height: 1;

    letter-spacing: -0.055em;
}


body.quiz-page
.quiz-hero-copy > p {
    max-width: 650px;

    margin-bottom: 29px;

    color: var(--ag-text-soft);

    font-size: 15px;

    line-height: 1.82;
}



/* ============================================================
   HERO META
============================================================ */

body.quiz-page .quiz-range-meta {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 20px;

    padding: 14px 18px;

    border: 1px solid var(--ag-border);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.66);

    backdrop-filter: blur(8px);
}


body.quiz-page
.quiz-range-meta > div {
    min-width: 75px;

    display: flex;
    flex-direction: column;
}


body.quiz-page
.quiz-range-meta span {
    margin-bottom: 3px;

    color: var(--ag-text-muted);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


body.quiz-page
.quiz-range-meta strong {
    color: var(--ag-text);

    font-size: 13px;
}


body.quiz-page .quiz-range-divider {
    width: 1px;
    height: 32px;

    background: var(--ag-border);
}



/* ============================================================
   HERO VISUAL
============================================================ */

body.quiz-page .quiz-hero-visual {
    position: relative;

    width: 355px;
    height: 355px;

    justify-self: center;

    display: flex;
    align-items: center;
    justify-content: center;
}


body.quiz-page .quiz-hero-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    transform: translate(-50%, -50%);
}


body.quiz-page .quiz-hero-orbit-outer {
    width: 345px;
    height: 345px;

    border:
        1px solid
        rgba(184, 125, 29, 0.22);
}


body.quiz-page
.quiz-hero-orbit-outer::before {
    content: "";

    position: absolute;

    inset: 12px;

    border:
        1px dotted
        rgba(184, 125, 29, 0.17);

    border-radius: inherit;
}


body.quiz-page .quiz-hero-orbit-inner {
    width: 260px;
    height: 260px;

    border:
        1px dashed
        rgba(184, 125, 29, 0.27);

    animation:
        quizOrbitRotation
        30s
        linear
        infinite;
}


body.quiz-page .quiz-hero-center {
    position: relative;
    z-index: 4;

    width: 182px;
    height: 182px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(184, 125, 29, 0.30);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #ffffff,
            #fff2dd
        );

    box-shadow:
        0 25px 68px
        rgba(91, 55, 16, 0.13);
}


body.quiz-page
.quiz-hero-center > span {
    margin-bottom: 3px;

    color: rgba(179, 111, 15, 0.60);

    font-size: 29px;
}


body.quiz-page
.quiz-hero-center strong {
    color: var(--ag-saffron-dark);

    font-family:
        Georgia,
        serif;

    font-size: 46px;
    font-weight: 500;

    line-height: 1;
}


body.quiz-page
.quiz-hero-center small {
    margin-top: 7px;

    color: var(--ag-gold-dark);

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}



/* ============================================================
   MESSAGE
============================================================ */

body.quiz-page .quiz-message-section {
    background: #ffffff;
}


body.quiz-page .quiz-page-message {
    margin-top: 18px;

    padding: 14px 17px;

    border-radius: 13px;

    font-size: 11px;
    font-weight: 750;

    line-height: 1.6;
}


body.quiz-page .quiz-message-info {
    border:
        1px solid
        rgba(184, 130, 40, 0.20);

    color: #875917;

    background: #fff7e7;
}


body.quiz-page .quiz-message-success {
    border:
        1px solid
        rgba(65, 129, 83, 0.20);

    color: #39734a;

    background: #eef8f1;
}


body.quiz-page .quiz-message-error {
    border:
        1px solid
        rgba(161, 62, 50, 0.18);

    color: #973e32;

    background: #fff2ef;
}



/* ============================================================
   LOADING
============================================================ */

body.quiz-page .quiz-loading-section {
    padding: 80px 0 115px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbf6ec
        );
}


body.quiz-page .quiz-loading-shell {
    width: min(900px, 100%);

    margin-inline: auto;

    padding: 38px 40px;

    border: 1px solid var(--ag-border);

    border-radius: 29px;

    background: #ffffff;

    box-shadow:
        0 20px 55px
        rgba(72, 45, 17, 0.07);
}


body.quiz-page .quiz-loading-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 35px;
}


body.quiz-page
.quiz-loading-top span,
body.quiz-page
.quiz-loading-question,
body.quiz-page
.quiz-loading-option {
    background:
        linear-gradient(
            90deg,
            #eadfce 20%,
            #faf4ea 50%,
            #eadfce 80%
        );

    background-size: 220% 100%;

    animation:
        quizSkeletonMove
        1.3s
        linear
        infinite;
}


body.quiz-page
.quiz-loading-top span {
    display: block;

    height: 11px;

    border-radius: 999px;
}


body.quiz-page
.quiz-loading-top span:first-child {
    width: 100px;
}


body.quiz-page
.quiz-loading-top span:last-child {
    width: 60px;
}


body.quiz-page .quiz-loading-question {
    width: 78%;
    height: 27px;

    margin-bottom: 31px;

    border-radius: 999px;
}


body.quiz-page .quiz-loading-option {
    height: 68px;

    margin-bottom: 13px;

    border-radius: 17px;
}



/* ============================================================
   GENERIC STATES
============================================================ */

body.quiz-page .quiz-state-section {
    padding: 90px 0 115px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbf6ec
        );
}


body.quiz-page .quiz-state-card {
    width: min(690px, 100%);

    margin-inline: auto;

    padding: 58px 48px;

    border: 1px solid var(--ag-border);

    border-radius: 30px;

    background: #ffffff;

    box-shadow:
        0 24px 68px
        rgba(72, 45, 17, 0.09);

    text-align: center;
}


body.quiz-page .quiz-state-symbol {
    width: 74px;
    height: 74px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin:
        0 auto
        21px;

    border:
        1px solid
        var(--ag-border-gold);

    border-radius: 50%;

    color: #ae6d11;

    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #fae8ca
        );

    font-size: 25px;
    font-weight: 850;
}


body.quiz-page
.quiz-state-card h2 {
    max-width: 560px;

    margin:
        0 auto
        12px;

    color: var(--ag-text);

    font-size: clamp(28px, 3.5vw, 42px);

    line-height: 1.13;

    letter-spacing: -0.038em;
}


body.quiz-page
.quiz-state-card > p {
    max-width: 510px;

    margin: 0 auto;

    color: var(--ag-text-soft);

    font-size: 13px;

    line-height: 1.8;
}


body.quiz-page
.quiz-state-card > button,
body.quiz-page
.quiz-state-button {
    min-height: 47px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 25px;

    padding: 0 21px;

    border: 0;

    border-radius: 13px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--ag-saffron),
            var(--ag-saffron-dark)
        );

    box-shadow:
        0 12px 30px
        rgba(190, 87, 5, 0.18);

    font-size: 10px;
    font-weight: 850;

    cursor: pointer;

    transition:
        transform var(--ag-transition),
        box-shadow var(--ag-transition);
}


body.quiz-page
.quiz-state-card > button:hover,
body.quiz-page
.quiz-state-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 36px
        rgba(190, 87, 5, 0.24);
}


body.quiz-page
.quiz-locked-state-card {
    background:
        radial-gradient(
            circle at top right,
            rgba(169, 125, 69, 0.06),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f5f0ea
        );
}



/* ============================================================
   INTRO
============================================================ */

body.quiz-page .quiz-intro-section {
    padding: 82px 0 110px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbf6ec
        );
}


body.quiz-page .quiz-intro-layout {
    width: min(1020px, 100%);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        255px;

    align-items: start;

    gap: 27px;

    margin-inline: auto;
}


body.quiz-page .quiz-intro-card {
    padding: 40px 42px;

    border: 1px solid var(--ag-border);

    border-radius: 28px;

    background: #ffffff;

    box-shadow:
        0 20px 58px
        rgba(72, 45, 17, 0.075);
}


body.quiz-page
.quiz-intro-card h2 {
    max-width: 680px;

    margin-bottom: 14px;

    color: var(--ag-text);

    font-size: clamp(31px, 3.7vw, 46px);

    line-height: 1.1;

    letter-spacing: -0.043em;
}


body.quiz-page
.quiz-intro-card > p {
    max-width: 700px;

    margin-bottom: 31px;

    color: var(--ag-text-soft);

    font-size: 13px;

    line-height: 1.82;
}



/* ============================================================
   RULES
============================================================ */

body.quiz-page .quiz-rules {
    display: grid;

    gap: 11px;

    margin-bottom: 31px;
}


body.quiz-page .quiz-rule {
    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    align-items: center;

    gap: 15px;

    padding: 15px 16px;

    border:
        1px solid
        rgba(115, 86, 53, 0.08);

    border-radius: 16px;

    background: #fcfaf6;

    transition:
        border-color 180ms ease,
        background 180ms ease;
}


body.quiz-page
.quiz-rule:hover {
    border-color:
        rgba(183, 124, 33, 0.18);

    background: #fffaf1;
}


body.quiz-page .quiz-rule-number {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(183, 124, 33, 0.21);

    border-radius: 50%;

    color: #9a6216;

    background: #fff8ea;

    font-family:
        Georgia,
        serif;

    font-size: 10px;
    font-weight: 700;
}


body.quiz-page
.quiz-rule strong {
    display: block;

    margin-bottom: 3px;

    color: var(--ag-text);

    font-size: 12px;
}


body.quiz-page
.quiz-rule small {
    color: var(--ag-text-muted);

    font-size: 9px;

    line-height: 1.55;
}



/* ============================================================
   BEGIN BUTTON
============================================================ */

body.quiz-page .quiz-begin-button {
    min-height: 49px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 0 23px;

    border: 0;

    border-radius: 14px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #e57c11,
            #ba5005
        );

    box-shadow:
        0 13px 31px
        rgba(181, 78, 5, 0.21);

    font-size: 11px;
    font-weight: 850;

    cursor: pointer;

    transition:
        transform var(--ag-transition),
        box-shadow var(--ag-transition);
}


body.quiz-page
.quiz-begin-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 18px 37px
        rgba(181, 78, 5, 0.27);
}



/* ============================================================
   INTRO SIDE
============================================================ */

body.quiz-page .quiz-intro-side {
    display: grid;

    gap: 15px;
}


body.quiz-page .quiz-intro-score-card {
    padding: 28px 22px;

    border:
        1px solid
        rgba(184, 126, 34, 0.20);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #fffdf8,
            #f7ead4
        );

    text-align: center;

    box-shadow:
        0 14px 38px
        rgba(77, 48, 17, 0.055);
}


body.quiz-page
.quiz-intro-score-card span {
    display: block;

    margin-bottom: 9px;

    color: var(--ag-text-muted);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


body.quiz-page
.quiz-intro-score-card strong {
    display: block;

    color: var(--ag-saffron-dark);

    font-family:
        Georgia,
        serif;

    font-size: 34px;
    font-weight: 500;

    line-height: 1.1;
}


body.quiz-page
.quiz-intro-score-card small {
    display: block;

    margin-top: 8px;

    color: var(--ag-text-muted);

    font-size: 8px;
}


body.quiz-page .quiz-intro-note {
    display: grid;

    grid-template-columns:
        36px
        minmax(0, 1fr);

    gap: 12px;

    padding: 18px;

    border:
        1px solid
        rgba(184, 126, 34, 0.15);

    border-radius: 18px;

    background: #fff9ee;
}


body.quiz-page
.quiz-intro-note > span {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #9b6417;

    background:
        rgba(255, 255, 255, 0.75);

    font-size: 15px;
}


body.quiz-page
.quiz-intro-note p {
    margin: 0;

    color: #765b3d;

    font-size: 9px;

    line-height: 1.65;
}



/* ============================================================
   PLAY
============================================================ */

body.quiz-page .quiz-play-section {
    padding: 75px 0 105px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbf6ec
        );
}


body.quiz-page .quiz-play-shell {
    width: min(940px, 100%);

    margin-inline: auto;
}



/* ============================================================
   QUIZ TOP BAR
============================================================ */

body.quiz-page .quiz-play-topbar {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 28px;

    margin-bottom: 19px;

    padding: 16px 19px;

    border: 1px solid var(--ag-border);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.88);

    box-shadow:
        0 10px 28px
        rgba(70, 45, 20, 0.04);
}


body.quiz-page .quiz-question-progress {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 20px;
}


body.quiz-page .quiz-question-progress-copy {
    min-width: 90px;
}


body.quiz-page
.quiz-question-progress-copy > span {
    display: block;

    margin-bottom: 2px;

    color: var(--ag-text-muted);

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
}


body.quiz-page
.quiz-question-progress-copy strong {
    color: var(--ag-text);

    font-size: 13px;
}


body.quiz-page .quiz-progress-track {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: #eadfce;
}


body.quiz-page
.quiz-progress-track span {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #c69546,
            var(--ag-saffron)
        );

    transition:
        width 350ms ease;
}


body.quiz-page .quiz-live-score {
    min-width: 66px;

    padding-left: 18px;

    border-left:
        1px solid
        var(--ag-border);

    text-align: right;
}


body.quiz-page
.quiz-live-score span {
    display: block;

    margin-bottom: 2px;

    color: var(--ag-text-muted);

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
}


body.quiz-page
.quiz-live-score strong {
    color: var(--ag-text);

    font-size: 15px;
}



/* ============================================================
   QUESTION CARD
============================================================ */

body.quiz-page .quiz-question-card {
    position: relative;

    overflow: hidden;

    padding: 39px 41px;

    border:
        1px solid
        rgba(163, 111, 31, 0.16);

    border-radius: 29px;

    background:
        radial-gradient(
            circle at top right,
            rgba(221, 154, 49, 0.07),
            transparent 27%
        ),
        #ffffff;

    box-shadow:
        0 24px 68px
        rgba(73, 45, 17, 0.08);
}


body.quiz-page
.quiz-question-card::after {
    content: "✦";

    position: absolute;

    right: 28px;
    top: 21px;

    color:
        rgba(181, 114, 16, 0.10);

    font-size: 29px;

    pointer-events: none;
}


body.quiz-page .quiz-question-heading {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 19px;
}


body.quiz-page .quiz-question-type {
    color: #9b6418;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}


body.quiz-page .quiz-question-topic {
    min-height: 25px;

    display: inline-flex;
    align-items: center;

    padding: 0 10px;

    border-radius: 999px;

    color: #80643d;

    background: #f8efe2;

    font-size: 8px;
    font-weight: 750;
}


body.quiz-page .quiz-question-text {
    position: relative;
    z-index: 2;

    max-width: 790px;

    margin-bottom: 31px;

    color: var(--ag-text);

    font-size: clamp(25px, 3vw, 37px);
    font-weight: 760;

    line-height: 1.28;

    letter-spacing: -0.032em;
}



/* ============================================================
   OPTIONS
============================================================ */

body.quiz-page .quiz-options {
    position: relative;
    z-index: 2;

    display: grid;

    gap: 12px;
}


body.quiz-page .quiz-option {
    width: 100%;

    min-height: 72px;

    display: grid;

    grid-template-columns:
        46px
        minmax(0, 1fr)
        30px;

    align-items: center;

    gap: 15px;

    padding: 12px 16px;

    border:
        1px solid
        rgba(110, 81, 49, 0.12);

    border-radius: 18px;

    color: var(--ag-text);

    background: #fdfbf8;

    text-align: left;

    cursor: pointer;

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}


body.quiz-page
.quiz-option:hover:not(:disabled) {
    transform: translateY(-2px);

    border-color:
        rgba(185, 123, 27, 0.31);

    background: #fffaf1;

    box-shadow:
        0 11px 27px
        rgba(94, 59, 18, 0.06);
}


body.quiz-page .quiz-option-marker {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(156, 108, 37, 0.17);

    border-radius: 13px;

    color: #8c6736;

    background: #ffffff;

    font-family:
        Georgia,
        serif;

    font-size: 12px;
    font-weight: 700;

    transition:
        color 180ms ease,
        background 180ms ease,
        border-color 180ms ease;
}


body.quiz-page .quiz-option-text {
    color: var(--ag-text);

    font-size: 13px;
    font-weight: 600;

    line-height: 1.6;
}


body.quiz-page .quiz-option-state {
    width: 22px;
    height: 22px;

    justify-self: end;

    border:
        1px solid
        rgba(122, 96, 68, 0.22);

    border-radius: 50%;

    background: #ffffff;

    transition:
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


body.quiz-page .quiz-option.selected {
    border-color:
        rgba(211, 124, 14, 0.50);

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fff1d9
        );

    box-shadow:
        0 12px 30px
        rgba(164, 93, 7, 0.07);
}


body.quiz-page
.quiz-option.selected
.quiz-option-marker {
    color: #ffffff;

    border-color: var(--ag-saffron);

    background:
        linear-gradient(
            135deg,
            var(--ag-saffron),
            var(--ag-saffron-dark)
        );
}


body.quiz-page
.quiz-option.selected
.quiz-option-state {
    border-color: var(--ag-saffron);

    background: var(--ag-saffron);

    box-shadow:
        inset
        0
        0
        0
        5px
        #fff4e6;
}


body.quiz-page .quiz-option.answered {
    border-color:
        rgba(193, 125, 20, 0.38);

    background: #fff8eb;
}


body.quiz-page .quiz-option:disabled {
    cursor: default;
}


body.quiz-page
.quiz-option:disabled:not(.answered) {
    opacity: 0.68;
}



/* ============================================================
   OPTIONAL CORRECT / WRONG STATES
============================================================ */

body.quiz-page .quiz-option.correct {
    border-color:
        rgba(59, 132, 79, 0.40);

    background: #eef8f1;
}


body.quiz-page
.quiz-option.correct
.quiz-option-marker {
    color: #ffffff;

    border-color: #4e8a5f;

    background: #4e8a5f;
}


body.quiz-page .quiz-option.incorrect {
    border-color:
        rgba(172, 67, 52, 0.34);

    background: #fff2ef;
}


body.quiz-page
.quiz-option.incorrect
.quiz-option-marker {
    color: #ffffff;

    border-color: #a94b3f;

    background: #a94b3f;
}



/* ============================================================
   ANSWER FEEDBACK
============================================================ */

body.quiz-page .quiz-feedback-card {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        45px
        minmax(0, 1fr);

    align-items: start;

    gap: 14px;

    margin-top: 21px;

    padding: 16px 18px;

    border:
        1px solid
        rgba(178, 120, 29, 0.16);

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #fff9ed,
            #f8ead4
        );
}


body.quiz-page .quiz-feedback-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(181, 120, 25, 0.20);

    border-radius: 50%;

    color: #9f6514;

    background:
        rgba(255, 255, 255, 0.75);

    font-size: 14px;
    font-weight: 850;
}


body.quiz-page
.quiz-feedback-card strong {
    display: block;

    margin-bottom: 4px;

    color: var(--ag-text);

    font-size: 12px;
}


body.quiz-page
.quiz-feedback-card p {
    margin: 0;

    color: var(--ag-text-soft);

    font-size: 10px;

    line-height: 1.65;
}


body.quiz-page
.quiz-feedback-card.correct {
    border-color:
        rgba(63, 129, 81, 0.18);

    background: #eef8f1;
}


body.quiz-page
.quiz-feedback-card.incorrect {
    border-color:
        rgba(167, 66, 50, 0.18);

    background: #fff3f0;
}



/* ============================================================
   QUESTION ACTIONS
============================================================ */

body.quiz-page .quiz-question-actions {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 12px;

    margin-top: 27px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(105, 80, 50, 0.08);
}


body.quiz-page
.quiz-submit-answer-button,
body.quiz-page
.quiz-next-question-button {
    min-height: 47px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 22px;

    border: 0;

    border-radius: 13px;

    font-size: 10px;
    font-weight: 850;

    cursor: pointer;

    transition:
        transform var(--ag-transition),
        box-shadow var(--ag-transition),
        opacity var(--ag-transition);
}


body.quiz-page
.quiz-submit-answer-button {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--ag-saffron),
            var(--ag-saffron-dark)
        );

    box-shadow:
        0 12px 28px
        rgba(190, 87, 5, 0.19);
}


body.quiz-page
.quiz-next-question-button {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #d98a1c,
            #ac5d08
        );

    box-shadow:
        0 12px 28px
        rgba(157, 83, 8, 0.18);
}


body.quiz-page
.quiz-submit-answer-button:not(:disabled):hover,
body.quiz-page
.quiz-next-question-button:hover {
    transform: translateY(-2px);
}


body.quiz-page
.quiz-submit-answer-button:disabled {
    color: #9a9188;

    background: #e7e0d9;

    box-shadow: none;

    cursor: not-allowed;
}



/* ============================================================
   QUESTION DOTS
============================================================ */

body.quiz-page .quiz-question-dots {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 24px;
}


body.quiz-page .quiz-question-dot {
    width: 8px;
    height: 8px;

    border-radius: 999px;

    background: #d9cdbd;

    transition:
        width 220ms ease,
        background 220ms ease;
}


body.quiz-page
.quiz-question-dot.current {
    width: 27px;

    background:
        linear-gradient(
            90deg,
            var(--ag-gold),
            var(--ag-saffron)
        );
}


body.quiz-page
.quiz-question-dot.answered:not(.current) {
    background: #c28a37;
}



/* ============================================================
   SUBMITTING
============================================================ */

body.quiz-page .quiz-submit-loader {
    position: relative;

    width: 70px;
    height: 70px;

    margin:
        0 auto
        22px;

    border:
        2px solid
        rgba(183, 122, 28, 0.13);

    border-radius: 50%;
}


body.quiz-page
.quiz-submit-loader span {
    position: absolute;

    inset: -2px;

    border:
        2px solid
        transparent;

    border-top-color:
        var(--ag-saffron);

    border-radius: 50%;

    animation:
        quizLoaderRotation
        0.9s
        linear
        infinite;
}



/* ============================================================
   RESULT
============================================================ */

body.quiz-page .quiz-result-section {
    padding: 80px 0 110px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbf6ec
        );
}


body.quiz-page .quiz-result-shell {
    position: relative;

    width: min(1030px, 100%);

    display: grid;

    grid-template-columns:
        290px
        minmax(0, 1fr);

    align-items: center;

    gap: 45px;

    margin-inline: auto;

    padding: 46px 50px;

    overflow: hidden;

    border:
        1px solid
        rgba(175, 117, 27, 0.18);

    border-radius: 31px;

    background:
        radial-gradient(
            circle at top left,
            rgba(213, 151, 54, 0.09),
            transparent 29%
        ),
        #ffffff;

    box-shadow:
        0 25px 70px
        rgba(70, 43, 16, 0.09);
}


body.quiz-page
.quiz-result-shell::after {
    content: "ॐ";

    position: absolute;

    right: -20px;
    bottom: -55px;

    color:
        rgba(178, 118, 29, 0.04);

    font-family:
        "Nirmala UI",
        "Mangal",
        serif;

    font-size: 180px;

    line-height: 1;

    pointer-events: none;
}



/* ============================================================
   RESULT RING
============================================================ */

body.quiz-page .quiz-result-visual {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;
}


body.quiz-page .quiz-result-ring {
    position: relative;

    width: 220px;
    height: 220px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(190, 129, 34, 0.22);

    border-radius: 50%;

    background:
        conic-gradient(
            from 45deg,
            rgba(201, 139, 42, 0.30),
            rgba(223, 116, 13, 0.75),
            rgba(201, 139, 42, 0.30)
        );

    box-shadow:
        0 22px 55px
        rgba(101, 64, 17, 0.11);
}


body.quiz-page
.quiz-result-ring::before {
    content: "";

    position: absolute;

    inset: 9px;

    border-radius: inherit;

    background: #fffaf1;
}


body.quiz-page .quiz-result-ring-inner {
    position: relative;
    z-index: 2;

    width: 168px;
    height: 168px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(181, 122, 30, 0.16);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #ffffff,
            #fff5e6
        );
}


body.quiz-page
.quiz-result-ring-inner strong {
    color: var(--ag-saffron-dark);

    font-family:
        Georgia,
        serif;

    font-size: 42px;
    font-weight: 500;

    line-height: 1;
}


body.quiz-page
.quiz-result-ring-inner span {
    margin-top: 6px;

    color: var(--ag-text-muted);

    font-size: 8px;
    font-weight: 850;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}



/* ============================================================
   RESULT COPY
============================================================ */

body.quiz-page .quiz-result-copy {
    position: relative;
    z-index: 2;
}


body.quiz-page
.quiz-result-copy h2 {
    margin-bottom: 12px;

    color: var(--ag-text);

    font-size: clamp(34px, 4vw, 52px);

    line-height: 1.08;

    letter-spacing: -0.045em;
}


body.quiz-page
.quiz-result-copy > p {
    max-width: 640px;

    margin-bottom: 26px;

    color: var(--ag-text-soft);

    font-size: 13px;

    line-height: 1.8;
}



/* ============================================================
   RESULT STATS
============================================================ */

body.quiz-page .quiz-result-stats {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-bottom: 26px;
}


body.quiz-page
.quiz-result-stats > div {
    padding: 15px 16px;

    border:
        1px solid
        rgba(111, 84, 52, 0.08);

    border-radius: 15px;

    background:
        rgba(252, 250, 246, 0.90);
}


body.quiz-page
.quiz-result-stats span {
    display: block;

    margin-bottom: 5px;

    color: var(--ag-text-muted);

    font-size: 8px;
    font-weight: 800;

    text-transform: uppercase;
}


body.quiz-page
.quiz-result-stats strong {
    color: var(--ag-text);

    font-size: 17px;
}



/* ============================================================
   RESULT ACTIONS
============================================================ */

body.quiz-page .quiz-result-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 11px;
}


body.quiz-page
.quiz-result-primary-button,
body.quiz-page
.quiz-result-secondary-button {
    min-height: 47px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 21px;

    border-radius: 13px;

    font-size: 10px;
    font-weight: 850;

    cursor: pointer;

    transition:
        transform var(--ag-transition),
        box-shadow var(--ag-transition),
        border-color var(--ag-transition);
}


body.quiz-page
.quiz-result-primary-button {
    border: 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--ag-saffron),
            var(--ag-saffron-dark)
        );

    box-shadow:
        0 12px 29px
        rgba(190, 87, 5, 0.19);
}


body.quiz-page
.quiz-result-secondary-button {
    border:
        1px solid
        var(--ag-border);

    color: var(--ag-text);

    background: #ffffff;
}


body.quiz-page
.quiz-result-primary-button:hover,
body.quiz-page
.quiz-result-secondary-button:hover {
    transform: translateY(-2px);
}



/* ============================================================
   PASSED RESULT
============================================================ */

body.quiz-page
.quiz-result-shell.quiz-result-passed {
    border-color:
        rgba(58, 127, 77, 0.20);

    background:
        radial-gradient(
            circle at top left,
            rgba(71, 142, 91, 0.10),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f4faf5
        );
}


body.quiz-page
.quiz-result-passed
.quiz-result-ring {
    border-color:
        rgba(61, 131, 80, 0.22);

    background:
        conic-gradient(
            from 45deg,
            #95c2a0,
            #4f8d60,
            #95c2a0
        );
}


body.quiz-page
.quiz-result-passed
.quiz-result-ring::before {
    background: #f4fbf6;
}


body.quiz-page
.quiz-result-passed
.quiz-result-ring-inner {
    border-color:
        rgba(74, 139, 92, 0.16);

    background:
        radial-gradient(
            circle,
            #ffffff,
            #edf8f0
        );
}


body.quiz-page
.quiz-result-passed
.quiz-result-ring-inner strong {
    color: #467c56;
}



/* ============================================================
   FAILED RESULT
============================================================ */

body.quiz-page
.quiz-result-shell.quiz-result-failed {
    border-color:
        rgba(170, 89, 46, 0.18);

    background:
        radial-gradient(
            circle at top left,
            rgba(187, 93, 48, 0.07),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #fff8f3
        );
}


body.quiz-page
.quiz-result-failed
.quiz-result-ring {
    background:
        conic-gradient(
            from 45deg,
            #dfb08d,
            #bd6f47,
            #dfb08d
        );
}


body.quiz-page
.quiz-result-failed
.quiz-result-ring::before {
    background: #fff7f2;
}


body.quiz-page
.quiz-result-failed
.quiz-result-ring-inner {
    background:
        radial-gradient(
            circle,
            #ffffff,
            #fff2eb
        );
}


body.quiz-page
.quiz-result-failed
.quiz-result-ring-inner strong {
    color: #a75a38;
}



/* ============================================================
   RESULT REFLECTION
============================================================ */

body.quiz-page .quiz-result-reflection {
    width: min(1030px, 100%);

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    align-items: center;

    gap: 17px;

    margin:
        20px auto
        0;

    padding: 20px 23px;

    border:
        1px solid
        rgba(184, 126, 34, 0.16);

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #f7ebda
        );
}


body.quiz-page
.quiz-result-reflection > span {
    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(184, 126, 34, 0.19);

    border-radius: 50%;

    color: #9b6316;

    background:
        rgba(255, 255, 255, 0.70);

    font-size: 18px;
}


body.quiz-page
.quiz-result-reflection strong {
    display: block;

    margin-bottom: 4px;

    color: var(--ag-text);

    font-size: 12px;
}


body.quiz-page
.quiz-result-reflection p {
    margin: 0;

    color: #765a39;

    font-size: 10px;

    line-height: 1.65;
}



/* ============================================================
   SAVED RESULT MODE
============================================================ */

body.quiz-page.quiz-saved-result-mode {
    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(207, 151, 62, 0.10),
            transparent 28%
        ),
        #fbf6ec;
}


body.quiz-page.quiz-saved-result-mode
.quiz-main {
    min-height:
        calc(
            100vh -
            var(--ag-header-height)
        );
}


body.quiz-page.quiz-saved-result-mode
.quiz-result-section {
    position: relative;

    min-height:
        calc(
            100vh -
            var(--ag-header-height)
        );

    display: flex;
    align-items: center;

    padding:
        calc(var(--ag-header-height) + 65px)
        0
        90px;

    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(216, 157, 64, 0.12),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #fdf9f1,
            #fbf6ec
        );
}


body.quiz-page.quiz-saved-result-mode
.quiz-result-section::before {
    content: "✦";

    position: absolute;

    left: 9%;
    top: 22%;

    color:
        rgba(184, 122, 27, 0.08);

    font-size: 42px;

    pointer-events: none;
}


body.quiz-page.quiz-saved-result-mode
.quiz-result-section::after {
    content: "ॐ";

    position: absolute;

    right: 6%;
    bottom: 3%;

    color:
        rgba(181, 120, 27, 0.045);

    font-family:
        "Nirmala UI",
        "Mangal",
        serif;

    font-size: clamp(180px, 20vw, 300px);

    pointer-events: none;
}


body.quiz-page.quiz-saved-result-mode
.quiz-result-shell {
    width: min(960px, 100%);

    grid-template-columns:
        270px
        minmax(0, 1fr);

    padding: 52px 54px;

    border-color:
        rgba(62, 125, 80, 0.20);

    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(75, 143, 94, 0.09),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f4faf5
        );

    box-shadow:
        0 30px 85px
        rgba(66, 45, 23, 0.11);
}


body.quiz-page.quiz-saved-result-mode
.quiz-result-shell::before {
    content: "COMPLETED";

    position: absolute;

    right: 25px;
    top: 23px;

    padding: 7px 11px;

    border:
        1px solid
        rgba(66, 130, 84, 0.18);

    border-radius: 999px;

    color: #477c56;

    background:
        rgba(238, 248, 241, 0.86);

    font-size: 8px;
    font-weight: 850;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


body.quiz-page.quiz-saved-result-mode
.quiz-result-ring {
    width: 215px;
    height: 215px;

    border-color:
        rgba(61, 131, 80, 0.24);

    background:
        conic-gradient(
            from 45deg,
            #9cc6a6,
            #4f8c60,
            #9cc6a6
        );

    box-shadow:
        0 24px 58px
        rgba(57, 113, 73, 0.14);
}


body.quiz-page.quiz-saved-result-mode
.quiz-result-ring::before {
    background: #f4fbf6;
}


body.quiz-page.quiz-saved-result-mode
.quiz-result-ring-inner {
    background:
        radial-gradient(
            circle,
            #ffffff,
            #edf8f0
        );
}


body.quiz-page.quiz-saved-result-mode
.quiz-result-ring-inner strong {
    color: #477d57;
}


body.quiz-page.quiz-saved-result-mode
.quiz-result-copy
.quiz-small-label {
    color: #477d57;
}


body.quiz-page.quiz-saved-result-mode
.quiz-result-stats > div {
    border-color:
        rgba(68, 129, 85, 0.10);

    background:
        rgba(247, 252, 248, 0.90);
}


body.quiz-page.quiz-saved-result-mode
.quiz-result-primary-button {
    background:
        linear-gradient(
            135deg,
            #d67b18,
            #b65708
        );
}



/* ============================================================
   END NOTE
============================================================ */

body.quiz-page .quiz-end-section {
    padding: 5px 0 105px;

    background: #fbf6ec;
}


body.quiz-page .quiz-end-card {
    display: grid;

    grid-template-columns:
        100px
        minmax(0, 1fr);

    align-items: center;

    gap: 35px;

    padding: 40px 45px;

    border: 1px solid var(--ag-border);

    border-radius: 27px;

    background:
        linear-gradient(
            135deg,
            #fffdf9,
            #f7ecda
        );
}


body.quiz-page .quiz-end-symbol {
    width: 92px;
    height: 92px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        var(--ag-border-gold);

    border-radius: 50%;

    color: var(--ag-gold-dark);

    background:
        rgba(255, 255, 255, 0.72);

    font-size: 23px;
}


body.quiz-page
.quiz-end-card h2 {
    margin-bottom: 9px;

    color: var(--ag-text);

    font-size: clamp(27px, 3vw, 39px);

    line-height: 1.14;

    letter-spacing: -0.035em;
}


body.quiz-page
.quiz-end-card p {
    max-width: 730px;

    margin: 0;

    color: var(--ag-text-soft);

    font-size: 12px;

    line-height: 1.8;
}



/* ============================================================
   TABLET / SMALL LAPTOP
============================================================ */

@media (max-width: 1024px) {

    body.quiz-page .quiz-hero {
        min-height: auto;

        padding:
            calc(var(--ag-header-height) + 45px)
            0
            70px;
    }


    body.quiz-page
    .quiz-hero-content {
        grid-template-columns: 1fr;

        gap: 48px;

        text-align: center;
    }


    body.quiz-page
    .quiz-hero-copy {
        margin-inline: auto;
    }


    body.quiz-page
    .quiz-kicker,
    body.quiz-page
    .quiz-range-meta {
        margin-left: auto;
        margin-right: auto;
    }


    body.quiz-page
    .quiz-hero-copy > p {
        margin-left: auto;
        margin-right: auto;
    }


    body.quiz-page .quiz-hero-visual {
        width: 310px;
        height: 310px;
    }


    body.quiz-page
    .quiz-hero-orbit-outer {
        width: 300px;
        height: 300px;
    }


    body.quiz-page
    .quiz-hero-orbit-inner {
        width: 225px;
        height: 225px;
    }


    body.quiz-page
    .quiz-hero-center {
        width: 160px;
        height: 160px;
    }


    body.quiz-page
    .quiz-intro-layout {
        grid-template-columns:
            minmax(0, 1fr)
            220px;
    }


    body.quiz-page
    .quiz-result-shell {
        grid-template-columns:
            240px
            minmax(0, 1fr);

        gap: 35px;

        padding: 40px 38px;
    }


    body.quiz-page
    .quiz-result-ring {
        width: 195px;
        height: 195px;
    }


    body.quiz-page
    .quiz-result-ring-inner {
        width: 148px;
        height: 148px;
    }


    body.quiz-page.quiz-saved-result-mode
    .quiz-result-shell {
        grid-template-columns:
            230px
            minmax(0, 1fr);

        padding: 45px 38px;
    }

}



/* ============================================================
   TABLET
============================================================ */

@media (max-width: 768px) {

    body.quiz-page
    .quiz-intro-layout {
        grid-template-columns: 1fr;
    }


    body.quiz-page
    .quiz-intro-side {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);
    }


    body.quiz-page
    .quiz-play-topbar {
        grid-template-columns: 1fr;
    }


    body.quiz-page
    .quiz-question-progress {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    body.quiz-page
    .quiz-live-score {
        display: flex;

        align-items: center;
        justify-content: space-between;

        padding: 12px 0 0;

        border-left: 0;

        border-top:
            1px solid
            var(--ag-border);

        text-align: left;
    }


    body.quiz-page
    .quiz-result-shell,
    body.quiz-page.quiz-saved-result-mode
    .quiz-result-shell {
        grid-template-columns: 1fr;

        text-align: center;
    }


    body.quiz-page
    .quiz-result-stats {
        max-width: 550px;

        margin-left: auto;
        margin-right: auto;
        margin-bottom: 25px;
    }


    body.quiz-page
    .quiz-result-actions {
        justify-content: center;
    }


    body.quiz-page.quiz-saved-result-mode
    .quiz-result-shell::before {
        position: static;

        width: fit-content;

        grid-column: 1;

        justify-self: center;

        margin-bottom: -12px;
    }

}



/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 640px) {

    body.quiz-page .quiz-hero {
        padding:
            calc(var(--ag-header-height) + 35px)
            0
            58px;
    }


    body.quiz-page
    .quiz-hero-content {
        text-align: left;
    }


    body.quiz-page
    .quiz-kicker,
    body.quiz-page
    .quiz-range-meta {
        margin-left: 0;
        margin-right: 0;
    }


    body.quiz-page
    .quiz-hero-copy h1 {
        font-size:
            clamp(
                40px,
                12vw,
                55px
            );
    }


    body.quiz-page
    .quiz-hero-copy > p {
        margin-left: 0;
        margin-right: 0;

        font-size: 13px;
    }


    body.quiz-page .quiz-range-meta {
        width: 100%;

        justify-content: space-between;

        gap: 10px;

        padding: 13px 14px;
    }


    body.quiz-page
    .quiz-range-meta > div {
        min-width: 0;
    }


    body.quiz-page
    .quiz-hero-visual {
        width: 260px;
        height: 260px;

        margin-inline: auto;
    }


    body.quiz-page
    .quiz-hero-orbit-outer {
        width: 250px;
        height: 250px;
    }


    body.quiz-page
    .quiz-hero-orbit-inner {
        width: 190px;
        height: 190px;
    }


    body.quiz-page
    .quiz-hero-center {
        width: 135px;
        height: 135px;
    }


    body.quiz-page
    .quiz-hero-center strong {
        font-size: 36px;
    }


    body.quiz-page
    .quiz-loading-shell {
        padding: 27px 20px;
    }


    body.quiz-page
    .quiz-state-card {
        padding: 44px 23px;

        border-radius: 24px;
    }


    body.quiz-page
    .quiz-intro-card {
        padding: 30px 22px;

        border-radius: 22px;
    }


    body.quiz-page
    .quiz-intro-card h2 {
        font-size:
            clamp(
                29px,
                8vw,
                38px
            );
    }


    body.quiz-page
    .quiz-intro-side {
        grid-template-columns: 1fr;
    }


    body.quiz-page
    .quiz-question-card {
        padding: 29px 20px;

        border-radius: 23px;
    }


    body.quiz-page
    .quiz-question-text {
        margin-bottom: 24px;

        font-size:
            clamp(
                22px,
                7vw,
                29px
            );
    }


    body.quiz-page .quiz-option {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            24px;

        min-height: 67px;

        gap: 11px;

        padding: 11px 12px;

        border-radius: 15px;
    }


    body.quiz-page
    .quiz-option-marker {
        width: 37px;
        height: 37px;

        border-radius: 11px;

        font-size: 10px;
    }


    body.quiz-page
    .quiz-option-text {
        font-size: 12px;
    }


    body.quiz-page
    .quiz-feedback-card {
        grid-template-columns:
            39px
            minmax(0, 1fr);

        padding: 14px;
    }


    body.quiz-page
    .quiz-feedback-icon {
        width: 37px;
        height: 37px;
    }


    body.quiz-page
    .quiz-question-actions {
        flex-direction: column;

        align-items: stretch;
    }


    body.quiz-page
    .quiz-submit-answer-button,
    body.quiz-page
    .quiz-next-question-button {
        width: 100%;
    }


    body.quiz-page
    .quiz-result-shell,
    body.quiz-page.quiz-saved-result-mode
    .quiz-result-shell {
        padding: 34px 22px;

        border-radius: 24px;
    }


    body.quiz-page
    .quiz-result-ring,
    body.quiz-page.quiz-saved-result-mode
    .quiz-result-ring {
        width: 180px;
        height: 180px;
    }


    body.quiz-page
    .quiz-result-ring-inner {
        width: 136px;
        height: 136px;
    }


    body.quiz-page
    .quiz-result-ring-inner strong {
        font-size: 35px;
    }


    body.quiz-page
    .quiz-result-copy h2 {
        font-size:
            clamp(
                30px,
                9vw,
                40px
            );
    }


    body.quiz-page
    .quiz-result-stats {
        grid-template-columns: 1fr;
    }


    body.quiz-page
    .quiz-result-actions {
        flex-direction: column;
    }


    body.quiz-page
    .quiz-result-primary-button,
    body.quiz-page
    .quiz-result-secondary-button {
        width: 100%;
    }


    body.quiz-page
    .quiz-result-reflection {
        grid-template-columns: 1fr;

        text-align: center;
    }


    body.quiz-page
    .quiz-result-reflection > span {
        margin-inline: auto;
    }


    body.quiz-page
    .quiz-end-card {
        grid-template-columns: 1fr;

        gap: 21px;

        padding: 34px 24px;

        text-align: center;
    }


    body.quiz-page
    .quiz-end-symbol {
        margin-inline: auto;
    }


    body.quiz-page.quiz-saved-result-mode
    .quiz-result-section {
        padding:
            calc(var(--ag-header-height) + 35px)
            0
            65px;
    }

}



/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    body.quiz-page
    .quiz-back-row {
        flex-wrap: wrap;
    }


    body.quiz-page
    .quiz-range-meta {
        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    body.quiz-page
    .quiz-range-divider {
        display: none;
    }


    body.quiz-page
    .quiz-range-meta > div {
        text-align: center;
    }


    body.quiz-page
    .quiz-rule {
        grid-template-columns:
            42px
            minmax(0, 1fr);

        padding: 13px;
    }


    body.quiz-page
    .quiz-rule-number {
        width: 38px;
        height: 38px;
    }


    body.quiz-page
    .quiz-question-card {
        padding: 26px 16px;
    }


    body.quiz-page
    .quiz-question-heading {
        flex-direction: column;

        align-items: flex-start;
    }


    body.quiz-page
    .quiz-option {
        grid-template-columns:
            36px
            minmax(0, 1fr)
            20px;

        gap: 9px;
    }


    body.quiz-page
    .quiz-option-marker {
        width: 34px;
        height: 34px;
    }


    body.quiz-page.quiz-saved-result-mode
    .quiz-result-shell {
        padding:
            30px
            17px;
    }

}



/* ============================================================
   TOUCH
============================================================ */

@media (hover: none) and (pointer: coarse) {

    body.quiz-page
    .quiz-option:hover,

    body.quiz-page
    .quiz-begin-button:hover,

    body.quiz-page
    .quiz-submit-answer-button:hover,

    body.quiz-page
    .quiz-next-question-button:hover,

    body.quiz-page
    .quiz-result-primary-button:hover,

    body.quiz-page
    .quiz-result-secondary-button:hover,

    body.quiz-page
    .quiz-state-card > button:hover,

    body.quiz-page
    .quiz-state-button:hover {
        transform: none;
    }

}



/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    body.quiz-page
    .quiz-hero-orbit-inner,

    body.quiz-page
    .quiz-submit-loader span,

    body.quiz-page
    .quiz-loading-top span,

    body.quiz-page
    .quiz-loading-question,

    body.quiz-page
    .quiz-loading-option {
        animation: none !important;
    }


    body.quiz-page * {
        scroll-behavior: auto !important;
    }

}



/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes quizOrbitRotation {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


@keyframes quizLoaderRotation {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes quizSkeletonMove {

    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }

}