@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=EB+Garamond:wght@400;500;600;700&display=swap');

/* =========================================================
   DOCTRINE CHALLENGE
   Rich Illuminated Bible Edition
   ========================================================= */

:root {
    --ink: #2d2a24;
    --muted: #6f6658;

    --ivory: #fffaf0;
    --parchment: #f3e5c5;
    --parchment-light: #fff9e8;
    --parchment-deep: #d9c08b;

    --green: #31583f;
    --green-dark: #203f2d;
    --green-deep: #173323;

    --gold: #a87925;
    --gold-bright: #d8b85c;
    --gold-pale: #ead79a;
    --gold-dark: #684719;

    --blue-soft: #e8edf0;
    --green-soft: #e5f0e5;
    --red-soft: #f5e3df;

    --shadow: 0 18px 55px rgba(42, 31, 15, .28);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    padding: 0;

    color: var(--ink);
    font-family:
        "Palatino Linotype",
        "Book Antiqua",
        Palatino,
        Georgia,
        "Times New Roman",
        serif;

    background: #3b2a18;
    position: relative;
}

/* A very soft veil keeps the background magnificent without competing
   with the game itself. */
body::before {
    content: none;
}

/* =========================================================
   Main illuminated page
   ========================================================= */

#gameContainer {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 6px 6.5vw 18px;
    position: relative;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 1;
}

/* Inner engraved frame */
#gameContainer::before,
#gameContainer::after {
    content: none;
}

/* =========================================================
   Header
   ========================================================= */

#statusBar::before {
    content: none;
}

#gameTitle {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 300px);
    margin: 0;
    z-index: 5;
    color: #173b2a;
    font-family: 'Cinzel Decorative', 'Palatino Linotype', Georgia, serif;
    font-size: clamp(2.7rem, 5vw, 4.15rem);
    font-weight: 700;
    letter-spacing: .015em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    text-shadow:
        0 1px 0 #fffdf2,
        0 2px 1px rgba(126,87,25,.18);
}

#gameTitle::before,
#gameTitle::after {
    content: none;
}


/* =========================================================
   Header elements — no status-bar wrapper
   ========================================================= */

#questionNumber,
#score {
    position: absolute;
    top: 1.0cqw;
    min-height: 3.0cqw;
    padding: .55cqw 1.0cqw .45cqw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.05cqw;
    line-height: 1.1;
    white-space: nowrap;
    z-index: 10;
}

#questionNumber {
    left: 0;
    background-image: url("plaque.png");
}

#score {
    right: 0;
    background-image: url("plaque.png");
}

#gameTitle {
    position: absolute;
    top: 10.95cqw;
    left: 50%;
    width: 92%;
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
    z-index: 5;
    color: #173b2a;
    font-family: 'Cinzel Decorative', 'Palatino Linotype', Georgia, serif;
    font-size: 4.25cqw;
    font-weight: 700;
    letter-spacing: .015em;
    line-height: .95;
    text-align: center;
    white-space: nowrap;
    text-shadow:
        0 1px 0 #fffdf2,
        0 2px 1px rgba(126,87,25,.18);
}

/* =========================================================
   Dividers
   ========================================================= */

hr {
    border: 0;
    height: 38px;
    margin: 18.0cqw auto 8px;
    background: url("ornamental_divider.png") center / 245px auto no-repeat;
    opacity: 1;
}

/* =========================================================
   Question
   ========================================================= */

#question {
    max-width: 900px;
    margin: 0 auto 16px;
    color: #173b2a;
    font-family: 'EB Garamond', 'Palatino Linotype', Georgia, serif;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
    text-align: center;
}

#question::before {
    content: "❧";
    margin-right: 11px;
    color: var(--gold);
}

#question::after {
    content: "❧";
    margin-left: 11px;
    color: var(--gold);
}

/* =========================================================
   Scripture panel
   ========================================================= */

#passage {
    margin-top: 4.25cqw;
    width: min(860px, 78vw);
    max-width: 860px;
    min-height: 310px;
    margin: 0 auto;
    padding: calc(42px + 1.15cqw) 48px 30px;
    position: relative;
    box-sizing: border-box;
    background: url("passage_parchment.png") center / 100% 100% no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.15rem;
    line-height: 1.38;
    text-align: left;
}

/* Passage ornamentation is supplied by passage_parchment.png. */

#passage.long-passage {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1rem;
    line-height: 1.35;
    padding-top: 30px;
    padding-bottom: 24px;
}

/* =========================================================
   Answer cards
   ========================================================= */

#answers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: min(900px, 82vw);
    max-width: 900px;
    margin: 18px auto 0;
    padding: 0;
    box-sizing: border-box;
}

.answer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 82px;
    height: 82px;
    padding: 10px 14px;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: url("answer_card.png") center / 100% 100% no-repeat;
    color: #173b2a;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: none;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: normal;
    transition: transform .16s ease, filter .16s ease;
}

.answer:hover:not(:disabled) {
    transform: translateY(-3px);
    filter: brightness(1.035) drop-shadow(0 7px 9px rgba(67,48,24,.20));
}

.answer:focus-visible {
    outline: 3px solid rgba(49,88,63,.3);
    outline-offset: 3px;
}

.answer.selected {
    filter: brightness(1.03) drop-shadow(0 4px 7px rgba(40,65,50,.16));
}

.answer.correct {
    filter: brightness(1.04) saturate(.92);
    color: #234d2c;
}

.answer.incorrect {
    filter: sepia(.08) saturate(.72) brightness(.98);
    color: #78382f;
}

.answer:disabled {
    cursor: default;
    opacity: .98;
}

/* =========================================================
   Submit
   ========================================================= */

#submitButton {
    display: none !important;
}


#submitButton:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.04) drop-shadow(0 7px 12px rgba(28,53,38,.28));
}

#submitButton:disabled {
    filter: grayscale(.65) brightness(.92);
    cursor: not-allowed;
}

/* =========================================================
   Modals
   ========================================================= */

.modalOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;

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

    padding: 20px;

    background:
        radial-gradient(circle at center, rgba(32,45,36,.32), rgba(20,25,21,.72));

    backdrop-filter: blur(4px);
}

.modalOverlay.show {
    display: flex;
}

.modalBox {
    width: min(660px, 100%);
    max-height: min(88vh, 730px);
    overflow-y: auto;

    position: relative;
    padding: 30px 32px 23px;

    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.92), transparent 36%),
        linear-gradient(145deg, #fffdf5, #f3e4c3 58%, #fff9e9);

    border: 2px solid var(--gold-dark);
    border-radius: 3px;

    box-shadow:
        0 0 0 5px rgba(235,215,157,.88),
        0 0 0 7px rgba(104,71,25,.7),
        0 28px 80px rgba(20,22,18,.46);

    animation: modalAppear .18s ease-out;
}

.modalBox::before {
    content: "";
    position: absolute;
    inset: 8px;

    border: 1px solid rgba(104,71,25,.55);
    box-shadow: inset 0 0 25px rgba(125,91,36,.08);

    pointer-events: none;
}

#feedback,
#results {
    position: relative;
    z-index: 1;
}

#feedback {
    margin: 0;
    padding: 3px 8px 9px;

    font-size: 1rem;
    line-height: 1.52;
}

#feedback h2 {
    margin: 0 0 14px;

    color: var(--green-dark);

    font-family:
        "Palatino Linotype",
        "Book Antiqua",
        Palatino,
        Georgia,
        serif;

    font-size: 1.7rem;
    font-variant: small-caps;
    letter-spacing: .04em;

    text-align: center;
}

#feedback h3 {
    margin: 17px 0 6px;
    color: var(--green);
    font-size: 1.08rem;
}

#feedback p {
    margin: 7px 0;
}

#feedback hr {
    margin: 15px 8%;
}

/* =========================================================
   Comparison
   ========================================================= */

.comparisonPanel {
    position: relative;
    z-index: 1;
    margin: 14px 0 4px;
    padding-top: 5px;
}

.comparisonGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.comparisonCard {
    position: relative;
    overflow: hidden;

    padding: 14px 16px;

    border: 1px solid var(--gold);
    border-radius: 3px;

    background: rgba(255,253,247,.82);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 4px 10px rgba(67,48,24,.09);
}

.comparisonCard h3 {
    margin: 0 0 9px;

    font-family:
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: 1rem;
    font-variant: small-caps;
    letter-spacing: .04em;
    text-align: center;
}

.comparisonWrong {
    border-color: #a9645a;
    background: linear-gradient(145deg, #fff9f6, #f3ded8);
}

.comparisonWrong h3 {
    color: #78382f;
}

.comparisonCorrect {
    border-color: #58815f;
    background: linear-gradient(145deg, #f7fbf3, #dfebdc);
}

.comparisonCorrect h3 {
    color: #234d2c;
}

.comparisonDoctrine {
    margin: 0 0 9px;

    color: var(--green-dark);
    font-size: 1.08rem;
    font-weight: bold;
    text-align: center;
}

.comparisonCard p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   Modal actions
   ========================================================= */

.modalActions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;

    position: relative;
    z-index: 1;
}

#moreButton,
#okayButton,
#playAgainButton {
    min-width: 118px;
    margin: 11px auto 0;
    padding: 10px 21px;

    border: 1px solid var(--gold);
    border-radius: 3px;

    background:
        linear-gradient(180deg, #3c684b, #23432f);

    color: #fff9e7;

    font-family:
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: .92rem;
    font-weight: bold;
    letter-spacing: .04em;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.17),
        0 4px 10px rgba(28,53,38,.20);

    transition:
        transform .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}

#moreButton {
    background:
        linear-gradient(180deg, #ead79d, #c8a85e);
    color: var(--green-dark);
}

#moreButton:hover,
#okayButton:hover,
#playAgainButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(40,45,32,.24);
}

#moreButton:hover {
    background: linear-gradient(180deg, #f1e2b2, #d2b66b);
}

#okayButton:hover,
#playAgainButton:hover {
    background: linear-gradient(180deg, #4a7658, #2a5139);
}

#moreButton:focus-visible,
#okayButton:focus-visible,
#playAgainButton:focus-visible {
    outline: 3px solid rgba(168,121,37,.32);
    outline-offset: 3px;
}

/* =========================================================
   Results
   ========================================================= */

#results {
    text-align: center;
    padding: 4px 8px 9px;
}

#results h2 {
    margin: 0 0 10px;

    color: var(--green-dark);

    font-family:
        "Palatino Linotype",
        "Book Antiqua",
        Palatino,
        Georgia,
        serif;

    font-size: 2rem;
    font-variant: small-caps;
    letter-spacing: .045em;
}

#results .finalScore {
    margin: 8px 0 15px;

    color: var(--gold-dark);

    font-family:
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: 2.2rem;
    font-weight: bold;
}

#results .rating {
    color: var(--green);
    font-size: 1.38rem;
    font-weight: bold;
}

#results .message {
    max-width: 500px;
    margin: 11px auto 0;
    line-height: 1.55;
}

#results .bestScore {
    color: var(--gold-dark);
    font-weight: bold;
}

.reviewButton {
    display: block;
    margin: 12px auto 0;
    padding: 9px 18px;

    border: 1px solid var(--gold);
    border-radius: 3px;

    background: var(--parchment);
    color: var(--green-dark);

    font-family:
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-weight: bold;
    cursor: pointer;
}

/* =========================================================
   Animation
   ========================================================= */

.comparisonPanel {
    animation: comparisonReveal .22s ease-out;
}

@keyframes comparisonReveal {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================================================
   Responsive
   ========================================================= */






#correctionModal .modalBox {
    width: min(900px, 94%);
    max-height: min(88vh, 760px);
    overflow-y: auto;
    position: relative;
    padding: 34px 44px 28px;
    box-sizing: border-box;
    background: #fff9e8;
    border: 4px double var(--gold-dark);
    border-radius: 0;
    box-shadow: 0 18px 55px rgba(30,25,18,.38);
    color: var(--ink);
}

#correctionModal .modalBox::before {
    content: "";
    display: block;
    position: absolute;
    inset: 10px;
    border: 1px solid var(--gold);
    box-shadow: none;
    pointer-events: none;
}

/* The answer graphic supplies the visual surface; live modal text sits on it. */
#correctionModal #feedback,
#correctionModal #comparisonPanel,
#correctionModal .modalActions {
    position: relative;
    z-index: 2;
}

/* The game now submits as soon as a choice is clicked. */
#submitButton {
    display: none !important;
}


/* Correction and results typography */
#feedback,
#results {
    font-family: 'EB Garamond', Georgia, serif;
}

#feedback h2,
#results h2 {
    font-family: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
    font-weight: 700;
}

#resultsModal .modalBox {
    background: #fff9e8;
    border: 4px double var(--gold-dark);
    border-radius: 0;
    box-shadow: 0 18px 55px rgba(30,25,18,.38);
}

#resultsModal .modalBox::before {
    border: 1px solid var(--gold);
    box-shadow: none;
}

/* =========================================================
   RESPONSIVE STAGE
   The entire game is a single proportional canvas.  It scales
   to fit both very wide displays and narrow screens without
   changing the arrangement or dropping content.
   Phones are intended to be used in landscape orientation.
   ========================================================= */

html, body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
}

body {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 16:10 is the design canvas used by the artwork.  The canvas
   becomes no wider than the viewport and no taller than the viewport. */
#gameContainer {
    width: min(100vw, 160dvh);
    height: min(100dvh, 62.5vw);
    aspect-ratio: 16 / 10;
    min-height: 0;
    margin: 0;
    padding: 0 6.5% 1.2%;
    overflow: hidden;
    position: relative;

    /* The background is part of the responsive game canvas.
       100% 100% makes the artwork resize with the canvas instead
       of being independently cropped by the browser viewport. */
    background: url("background.png") center center / 100% 100% no-repeat;
}

/* Container query units make every measurement below relative to the
   actual game canvas, not to the browser window. */
#gameContainer {
    container-type: size;
}

#gameTitle {
    /* Everything is tied to the 16:10 game canvas, not the browser window. */
    top: 10.95cqw;
    left: 50%;
    width: 92%;
    max-width: none;
    margin: 0;
    transform: translateX(-50%);
    font-size: 4.25cqw;
    line-height: .95;
    white-space: nowrap;
    text-align: center;
}

hr {
    height: 3.0cqw;
    margin: 18.0cqw auto .6cqw;
    background-size: 18cqw auto;
}

#question {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 1.2cqw;
    font-size: clamp(1rem, 1.85cqw, 1.45rem);
    line-height: 1.15;
}

#question::before {
    margin-right: .7cqw;
}

#question::after {
    margin-left: .7cqw;
}

#passage {
    width: 82%;
    max-width: none;
    min-height: 0;
    height: 26cqw;
    margin: 0 auto;
    padding: 4cqw 3.1cqw 2.0cqw;
    font-size: clamp(.85rem, 1.42cqw, 1.15rem);
    line-height: 1.34;
}

#passage.long-passage {
    height: 26cqw;
    padding: 4cqw 3.1cqw 1.5cqw;
    font-size: clamp(.78rem, 1.22cqw, 1rem);
    line-height: 1.28;
}

#answers {
    width: 82%;
    max-width: none;
    margin: 1.4cqw auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.0cqw;
}

.answer {
    min-width: 0;
    min-height: 0;
    height: 7.0cqw;
    padding: .8cqw 1.0cqw;
    font-size: clamp(.78rem, 1.35cqw, 1.2rem);
    line-height: 1.05;
}

/* Keep the four-card arrangement all the way down to a landscape phone.
   Only an extremely narrow portrait viewport gets a fallback, since the
   intended phone orientation is landscape. */
.modalOverlay {
    padding: 1.5cqw;
}

.modalBox,
#correctionModal .modalBox {
    width: min(58cqw, 900px);
    max-width: 92vw;
    max-height: 88dvh;
    padding: 2.2cqw 3cqw 1.8cqw;
}

.comparisonGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.0cqw;
}

#feedback,
#results {
    font-size: clamp(.82rem, 1.2cqw, 1rem);
}

#feedback h2,
#results h2 {
    font-size: clamp(1.2rem, 2.5cqw, 2rem);
}

#moreButton,
#okayButton,
#playAgainButton,
.reviewButton {
    min-width: 10cqw;
    padding: .7cqw 1.4cqw;
    font-size: clamp(.72rem, 1.05cqw, .92rem);
}

/* =========================================================
   PHONE PORTRAIT DESIGN — FIXED TO background-phone.png
   =========================================================
   The phone artwork is 862 x 1825.

   The artwork supplies the parchment, plaques, scroll, and
   answer cards. The HTML supplies only live text.

   The passage and answer grid are absolutely positioned so
   passage length cannot push the answer cards downward.
   Existing .long-passage is used for longer scripture.
   ========================================================= */

@media (max-width: 700px) and (orientation: portrait) {

    html,
    body {
        width: 100%;
        min-width: 0;
        min-height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    body {
        background: #21150c;
        overflow-y: auto;
    }

    #gameContainer {
        position: relative;
        width: 100vw;
        min-height: 211.601vw; /* 1825 / 862 */
        height: 211.601vw;
        margin: 0;
        padding: 0;
        overflow: hidden;
        aspect-ratio: 862 / 1825;
        container-type: size;

        background:
            url("background-phone.png") center top / 100% 100% no-repeat;
    }

    /* ---------- TOP PLAQUES ---------- */

    #questionNumber,
    #score {
        position: absolute;
        z-index: 20;
        top: 12.2vw;

        min-height: 9.2vw;
        box-sizing: border-box;
        padding: 1.35vw 1vw 1vw;

        font-family: 'EB Garamond', Georgia, serif;
        font-size: 2.75vw;
        line-height: 1.05;
        white-space: nowrap;
        text-align: center;
    }

    #questionNumber { left: 7vw; }
    #score { right: 7vw; }

    /* ---------- TITLE ---------- */

    #gameTitle {
        position: absolute;
        z-index: 12;

        top: 27vw;
        left: 50%;
        width: 70vw;
        max-width: 70vw;
        margin: 0;
        transform: translateX(-50%);

        font-family: 'Cinzel Decorative', 'Palatino Linotype', Georgia, serif;
        font-size: 6.9vw;
        font-weight: 700;
        line-height: 1.02;
        letter-spacing: .01em;
        text-align: center;
        color: #173b2a;
        white-space: normal;

        text-shadow:
            0 1px 0 #fff9e8,
            0 2px 1px rgba(75,48,18,.22);
    }

    #gameTitle::before,
    #gameTitle::after {
        content: none;
    }

    /* Divider is already painted into the background. */
    hr {
        display: none;
    }

    /* ---------- PROMPT ---------- */

    #question {
        position: absolute;
        z-index: 12;

        top: 57vw;
        left: 50%;
        width: 64vw;
        max-width: 64vw;
        margin: 0;
        transform: translateX(-50%);

        font-family: 'EB Garamond', 'Palatino Linotype', Georgia, serif;
        font-size: 3.85vw;
        font-weight: 700;
        line-height: 1.10;
        text-align: center;
        color: #173b2a;
    }

    #question::before,
    #question::after {
        margin: 0;
    }

    /* ---------- SCRIPTURE SCROLL ----------

       Source artwork:
       scroll top    ≈ 580px
       scroll bottom ≈ 1245px
       usable text width ≈ 475px

       580px / 862 = 67.3vw, so the live text starts near
       the top of the painted scroll instead of being pushed
       down by the old translateY(79vw).
    */

    #passage {
        position: absolute;
        z-index: 10;

        top: 66vw;
        left: 50%;
        width: 67vw;
        max-width: 67vw;
        height: 65.5vw;
        min-height: 0;

        margin: 0;
        transform: translateX(-50%);
        box-sizing: border-box;

        background: transparent;

        /* Keeps text inside the rolled parchment edges. */
        padding: 7vw 7vw 4.5vw;

        font-family: 'EB Garamond', Georgia, serif;
        font-size: 3.05vw;
        line-height: 1.18;
        font-weight: 400;
        color: var(--ink);
        text-align: left;

        overflow: hidden;
    }

    /*
       Long scripture:

       The previous CSS used 3.15vw / 1.34 and therefore let
       lengthy passages run out of the scroll. This version
       deliberately reduces both type size and line spacing.
    */
    #passage.long-passage {
        top: 66vw;
        height: 65.5vw;

        padding-top: 6.5vw;
        padding-bottom: 3.5vw;

        font-size: 2.55vw;
        line-height: 1.08;
    }

    /* ---------- ANSWER CARDS ----------

       The card graphics are already in background-phone.png.
       These elements contain only the clickable live text.
    */

    #answers {
        position: absolute;
        z-index: 12;

        top: 147vw;
        left: 50%;
        width: 56.7vw;
        max-width: 56.7vw;

        margin: 0;
        padding: 0;
        transform: translateX(-50%);

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.8vw;
        row-gap: 3vw;
    }

    .answer {
        width: 100%;
        min-width: 0;
        height: 14.5vw;
        min-height: 14.5vw;
        box-sizing: border-box;

        padding: 13vw 1.5vw 1.5vw;

        background: transparent;

        font-family: 'EB Garamond', Georgia, serif;
        font-size: 3.05vw;
        font-weight: 700;
        line-height: 1.06;
        text-align: center;
        color: #173b2a;

        overflow: visible;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* ---------- PHONE MODALS ---------- */

    .modalOverlay {
        padding: 4vw;
    }

    .modalBox,
    #correctionModal .modalBox {
        width: 90vw;
        max-width: 90vw;
        max-height: 88dvh;
        padding: 5vw;
    }

    .comparisonGrid {
        grid-template-columns: 1fr;
        gap: 3vw;
    }

    #moreButton,
    #okayButton,
    #playAgainButton,
    .reviewButton {
        min-width: 30vw;
        padding: 2.5vw 4vw;
        font-size: 3vw;
    }
}