/* =====================================================
   CENTRAL BUTTON STYLE CONTROLS
   Edit these variables to adjust repeated button effects.
   ===================================================== */
:root {
    /* Standard 3D edge and shadow */
    --mr-3d-edge-depth: 10px;
    --mr-3d-edge-color: #B85EAA;
    --mr-3d-shadow-y: 8px;
    --mr-3d-shadow-blur: 10px;
    --mr-3d-shadow-color: #00000018;

    /* Hover / raised state */
    --mr-3d-hover-edge-depth: 9px;
    --mr-3d-hover-shadow-y: 13px;
    --mr-3d-hover-shadow-blur: 18px;
    --mr-3d-hover-shadow-color: #00000020;

    /* Pressed state */
    --mr-3d-pressed-edge-depth: 1px;
    --mr-3d-pressed-shadow-y: 2px;
    --mr-3d-pressed-shadow-blur: 4px;
    --mr-3d-pressed-shadow-color: #00000012;
    --mr-topic-pressed-shadow-color: #00000018;

    /* Reused button-face gloss gradient */
    --mr-button-face-gradient: linear-gradient(
        180deg,
        #FFFFFF35 0%,
        #FFFFFF00 55%,
        #00000008 100%
    );

    /* Reused moving shine streak */
    --mr-button-shine-gradient: linear-gradient(
        110deg,
        #FFFFFF00 0%,
        #FFFFFF20 30%,
        #FFFFFFCC 50%,
        #FFFFFF20 70%,
        #FFFFFF00 100%
    );
    --mr-button-shine-width: 55%;
    --mr-button-shine-duration: 2000ms;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 40px;
    cursor: url("Jake moving.png"), auto;
}
.container {
    max-width: 700px;
    margin: auto;
    background-color: white;
    padding: 30px;
    text-align: center;
    border: 3px solid #333;
    border-radius: 10px;
}
h1 {
    color: #1d5fa7;
}
.top-bar {
    display: flex;
    justify-content: space-around;
    font-size: 18px;
    font-weight: bold;
}
h2 {
    font-size: 25px;
    margin: 30px 0;
}
#answer {
    display: block;
    font-size: 25px;
    width: 200px;
    padding: 10px;
    margin: 0 auto;
    text-align: center;
}
button {
    font-size: 18px;
    padding: 10px 20px;
    margin: 5px;
    cursor: url("Jake hovering over.png"), pointer;
}
#feedback {
    font-size: 22px;
    font-weight: bold;
    min-height: 30px;
}
#nextButton {
    background-color: #4CAF50;
    color: white;
}
#restartButton {
    background-color: #555;
    color: white;
}
#starTally {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin: 10px;
}
.star {
    width: 35px;
    height: 35px;
}

/* ==================== MAIN MENU ==================== */
.menu {
    text-align: center;
    padding-top: 0px;
}
.menu h1 {
    font-size: 40px;
    color: #000000;
}
.game-options {
    justify-content: center;
    margin-top: 60px;
}
.game-box {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 70px;
    background-color: #FCDCF7;
    border: 3px solid #ED82E0;
    border-radius: 15px;
    cursor: url("Jake hovering over.png"), pointer;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.game-box h2 {
    font-size: 20px;
    color: #000000;
    font-weight: normal;
    margin: 10px 0;
}
.game-box:hover {
    background-color: #F5BBF0;
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.game-box p {
    font-size: 18px;
    margin: 10px 0;
}
#menuButton {
    background-color: #777;
    color: white;
}
.progress-container {
    width: 100%;
    height: 10px;
    background-color: #ddd;
    margin: 10px 0 20px 0;
    overflow: hidden;
}
#progressBar {
    width: 100%;
    height: 100%;
    background-color: #1d5fa7;
}
#countdownOverlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(80, 80, 80, 0.75);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}
html,
body {
    margin: 0;
    min-height: 100%;
}
#countdownText {
    font-size: 150px;
    font-weight: bold;
    color: white;
}
#game[hidden] {
    display: none !important;
}
body {
    background-color: #F2FFB0;
    background-image:
        linear-gradient(18deg, #ccecff 25%, transparent 25%),
        linear-gradient(-18deg, #ccecff 25%, transparent 25%),
        linear-gradient(18deg, transparent 75%, #ccecff 75%),
        linear-gradient(-18deg, transparent 75%, #ccecff 75%);
    background-size: 80px 80px;

    animation: moveCheckerboard 5s linear infinite;
}
@keyframes moveCheckerboard {
    from {
        background-position: 0 0, 0 40px, 40px -40px, -40px 0;
    }

    to {
        background-position: 80px 80px, 80px 120px, 120px 40px, 40px 80px;
    }
}

/* ==================== TOPIC HEADINGS ==================== */
.topic-heading {
    margin-top: 50px;
    font-size: 35px;
}

/* ==================== TOPIC SELECTOR ==================== */
.topic-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}
.topic-tab {
    flex: 1;
    padding: 15px;
    font-size: 20px;
    border: 2px solid #000;
    background: white;
    cursor: url("Jake hovering over.png"), pointer;
}
.topic-tab:disabled {
    cursor: default;
}

/* ==================== QUIZ DROPDOWNS ==================== */
.quiz-dropdown {
    margin-bottom: 10px;
    border: 2px solid #000;
    background: white;
}
.quiz-dropdown summary {
    padding: 18px;
    font-size: 22px;
    font-weight: normal;
}
.quiz-dropdown summary:hover,
.upcoming details summary:hover,
.topic-tab:hover {
    transition: background-color 0.4s ease;
    background-color: #F5BB12;
    cursor: url("Jake hovering over.png"), pointer;;
}
.quiz-options {
    display: flex;
    gap: 20px;
    padding: 20px;
    border-top: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
}
.quiz-options:has(.game-box) {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
}
.quiz-options:has(.game-box) .game-box {
    flex: 1;
    min-width: 0;
}

/* ==================== UPCOMING FEATURES ==================== */
.upcoming {
    margin-top: 60px;
    background: white;
}
.upcoming details {
    border-top: 1px solid #ccc;
}
.upcoming summary {
    padding: 15px 5px;
    font-size: 20px;
}
.upcoming li {
    margin-bottom: 7px;
}
.upcoming {
    margin: 80px auto 30px;
    max-width: 900px;
    background-color: white;
    border: 4px solid #000000;
    border-radius: 15px;
    padding: 30px;
    text-align: left;
}
.upcoming h2 {
    text-align: center;
    font-size: 25px;
    margin-top: 0;
    margin-bottom: 10px;
}
.upcoming h3 {
    color: #1d5fa7;
    font-size: 24px;
    border-bottom: 2px solid #dddddd;
    padding-bottom: 6px;
    margin-top: 30px;
}
.upcoming ul {
    columns: 2;
    margin-bottom: 25px;
    padding-left: 25px;
}
.upcoming li {
    margin: 8px 0;
    font-size: 18px;
}

/* ==================== ALGEBRA ==================== */
.quiz-sub-dropdown {
    margin: 5px 0;
    border-top: 1px solid #ccc;
}
.algebra-options {
    padding: 15px 25px 20px;
}
.algebra-options label {
    display: block;
    font-size: 18px;
    margin-bottom: 15px;
}
.topic-heading {
    margin-bottom: 10px;
}
.topic-heading + .quiz-dropdown {
    margin-top: 0;
}
.algebra-buttons {
    display: flex;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}
.algebra-buttons button {
    flex: 1;
    min-width: 0;
    min-height: 70px;
    background-color: #FCDCF7;
    color: #000000;
    border: 3px solid #ED82E0;
    border-radius: 15px;
    font-size: 20px;
    font-weight: normal;
    cursor: url("Jake hovering over.png"), pointer;
    transition: 0.2s;
}
.algebra-buttons button:hover {
    background-color: #F5BBF0;
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ==================== TIMER OPTION LAYOUT ==================== */
.coordinate-buttons {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
    align-items: stretch;
}
.coordinate-buttons .game-box {
    flex: 1 1 0;
    min-width: 0;
}

/* ==================== CARTESIAN PLANE ==================== */
.coordinate-options {
    padding: 20px 25px;
}
.coordinate-options label {
    display: block;
    font-size: 18px;
    margin-bottom: 12px;
}
.coordinate-answer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 35px;
    margin: 20px;
}
.coordinate-answer input {
    width: 70px;
    font-size: 30px;
    text-align: center;
    padding: 8px;
}
.cartesian-plane {
    display: block;
    margin: 20px auto;
    max-width: 500px;
    width: 100%;
    height: auto;
}
.coordinate-buttons button {
    flex: 1;
    min-height: 70px;
    background-color: #FCDCF7;
    border: 3px solid #ED82E0;
    border-radius: 15px;
    font-size: 20px;
    cursor: url("Jake hovering over.png"), pointer;
    transition: 0.2s;
}
.coordinate-buttons button:hover {
    background-color: #F5BBF0;
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ==================== FONT ==================== */
@font-face {
    font-family: "Vremyafwf";
    src: url("Vremyafwf.ttf") format("opentype");
}
.menu h1,
.topic-heading,
.quiz-dropdown summary,
.quiz-sub-dropdown summary {
    font-family: "Vremyafwf", sans-serif;
}
#game,
#game input,
#game button,
#question {
    font-family: Arial, sans-serif;
}
@font-face {
    font-family: "BubbleStacked";
    src: url("BubbleStacked.ttf") format("truetype");
}
.menu h1 {
    font-family: "BubbleStacked", sans-serif;
}
.quiz-sub-dropdown summary {
    padding: 15px 25px;
    font-size: 20px;
    cursor: url("Jake hovering over.png"), pointer;
    font-family: Arial, sans-serif;
}


/* ==================== METRIC CONVERSION SUB-DROPDOWNS ==================== */
#measurementQuizzes .quiz-options {
    display: block;
    padding: 0;
}
#measurementQuizzes .quiz-sub-dropdown {
    width: 100%;
    margin: 0;
    border-top: 1px solid #ccc;
}
#measurementQuizzes .quiz-sub-dropdown summary {
    padding: 18px 25px;
    font-size: 20px;
    cursor: url("Jake hovering over.png"), pointer;
}
#measurementQuizzes .quiz-sub-dropdown .coordinate-buttons {
    display: flex;
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}
input[type="checkbox"],
input[type="radio"],
input[type="range"],
label {
    cursor: url("Jake hovering over.png"), pointer;
}


/* ==================== COLLECTING LIKE TERMS ==================== */
#collectingTerms {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 10px auto 25px;
    accent-color: #ED82E0;
}
#collectingTermsValue {
    color: #1d5fa7;
}
#algebraQuizzes .algebra-options > label {
    display: block;
    margin: 15px 0;
}
#algebraQuizzes .algebra-buttons {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
#algebraQuizzes .algebra-buttons button {
    flex: 1;
    min-width: 0;
    min-height: 70px;
    background-color: #FCDCF7;
    color: #000000;
    border: 3px solid #ED82E0;
    border-radius: 15px;
    font-size: 20px;
    font-weight: normal;
    cursor: url("Jake hovering over.png"), pointer;
    transition: 0.2s;
}
#algebraQuizzes .algebra-buttons button:hover {
    background-color: #F5BBF0;
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}



/* ==================== ENDLESS MODE OPTIONS ==================== */
.endless-option {
    user-select: none;
}
button.endless-option {
    background-color: #FCDCF7;
    color: #000000;
    border: 3px solid #ED82E0;
    border-radius: 15px;
    font-size: 20px;
    font-weight: normal;
    min-height: 70px;
    transition: 0.2s;
    cursor: url("Jake hovering over.png"), pointer;
}
button.endless-option:hover {
    background-color: #F5BBF0;
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
#game.endless-mode .progress-container {
    display: none;
}


/* ==================== MULTIPLICATION QUESTION HISTORY ==================== */
#questionHistory {
    margin-top: 25px;
    padding: 15px;
    border-top: 1px solid #ccc;
    text-align: center;
}
#questionHistory h3 {
    margin: 10px 0 15px;
    font-size: 22px;
}
#questionTimeFilter {
    margin: 10px;
    padding: 8px;
    font-size: 16px;
    cursor: url("Jake hovering over.png"), pointer;
}
.question-history-table {
    width: 100%;
    overflow-x: auto;
    margin-top: 15px;
}
#questionHistory table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}
#questionHistory th,
#questionHistory td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}
#questionHistory th {
    background-color: #FCDCF7;
    border-bottom: 3px solid #ED82E0;
}
#questionHistory tbody tr:nth-child(even) {
    background-color: #fff4fd;
}
#questionHistory tbody tr:hover {
    background-color: #fce8f8;
}


#revealButton,
#questionTimeFilter {
    cursor: url("Jake hovering over.png"), pointer;
}
.jake-dropdown {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif;
}
.jake-dropdown-button {
    padding: 10px;
    min-width: 178px;
    font-size: 16px;
    text-align: left;
    background: #eee;
    border: 1px solid #999;
    border-radius: 4px;
    cursor: url("Jake hovering over.png"), pointer;
}
.jake-dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    z-index: 1000;
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 4px;
    box-shadow: 0 4px 8px #0003;
}
.jake-dropdown-options[hidden] {
    display: none;
}
.jake-dropdown-options button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: white;
    text-align: left;
    white-space: nowrap;
    font-size: 16px;
    cursor: url("Jake hovering over.png"), pointer;
}
.jake-dropdown-options button:hover,
.jake-dropdown-options button:focus {
    background: #f2d8ef;
}


.directed-explanation {
    text-align: center;
    line-height: 1.5;
    margin: 16px auto;
}
.directed-explanation p {
    margin: 10px 0;
}
.directed-explanation .math-step {
    font-size: 1.15em;
    font-weight: 600;
    margin: 14px 0;
}
.directed-explanation .math-answer {
    white-space: nowrap;
}
.directed-terms-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px;
}
.directed-terms-option input[type="range"] {
    width: min(400px, 85%);
    accent-color: #e875dc;
}


.place-value-explanation {
    text-align: center;
    line-height: 1.6;
    margin: 18px auto;
}
.place-value-explanation p {
    margin: 12px 0;
}
.place-value-explanation .spaced-decimal {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: monospace;
    font-size: 1.7em;
    font-weight: bold;
    margin: 18px 0 0;
}
.decimal-char {
    display: inline-block;
    width: 34px;
    text-align: center;
}
.place-value-explanation svg {
    display: block;
    margin: -2px auto 8px;
    max-width: 100%;
    overflow: visible;
}
.place-value-explanation .math-step {
    font-size: 1.3em;
    font-weight: bold;
    margin: 18px 0;
}


/* ==================== ROUNDING SETTINGS ==================== */
#roundingDropdown .rounding-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    padding: 15px 25px;
}
#roundingDropdown .rounding-setting {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}
#roundingDropdown .rounding-setting label {
    font-weight: bold;
    font-size: 15px;
}
#roundingDropdown .rounding-setting select {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #bbb;
    border-radius: 5px;
    background: white;
    color: #222;
    font: inherit;
}
#roundingDropdown .rounding-setting select:focus-visible {
    outline: 2px solid #1d5fa7;
    outline-offset: 2px;
}
@media (max-width: 600px) {
    #roundingDropdown .rounding-options {
        padding: 12px 16px;
    }

    #roundingDropdown .rounding-setting {
        width: 100%;
        min-width: 0;
    }
}

#roundingDropdown .rounding-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#roundingDropdown .rounding-choice {
    padding: 9px 13px;
    border: 1px solid #c5cbd3;
    border-radius: 7px;
    background: white;
    color: #222;
    font: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
#roundingDropdown .rounding-choice:hover {
    border-color: #1d5fa7;
    background: #eff6ff;
}
#roundingDropdown .rounding-choice.active {
    background: #1d5fa7;
    color: white;
    border-color: #1d5fa7;
}
#roundingDropdown .rounding-choice:focus-visible {
    outline: 2px solid #1d5fa7;
    outline-offset: 2px;
}
#roundingDropdown .rounding-setting-label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

#question {
    display: block;
    width: 100%;
    padding: 12px;
    margin: 20px auto;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: normal;
}
#question mjx-container {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal !important;
}
#game {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}
@media (max-width: 700px) {
    #question {
        font-size: clamp(20px, 4vw, 30px);
        padding: 8px;
    }
}
#question {
    font-weight: normal !important;
}

.scientific-answer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 600px;
    margin: 28px auto;
}
.scientific-answer-container input {
    box-sizing: border-box;
    width: 180px;
    min-width: 0;
    height: 58px;
    padding: 10px;
    font-size: 25px;
    text-align: center;
    border: 2px solid #777;
    border-radius: 5px;
}
.scientific-times {
    font-size: 28px;
    white-space: nowrap;
}
.scientific-close {
    font-size: 28px;
}
@media (max-width: 500px) {
    .scientific-answer-container {
        gap: 7px;
    }

    .scientific-answer-container input {
        width: 120px;
        font-size: 21px;
    }
}



#question {
    font-weight: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}
#roundingScientificExponentSignChoice {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.rounding-explanation {
    font-weight: normal !important;
}
.rounding-explanation p {
    font-weight: normal !important;
}
.rounding-explanation p strong {
    font-weight: bold !important;
}
.rounding-explanation .final-math-answer {
    font-weight: normal !important;
}
.rounding-explanation .final-math-answer strong {
    font-weight: normal !important;
}

.classify-data-options {
    max-width: 420px;
}
.classify-data-option:disabled {
    opacity: 0.7;
}


.classify-data-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin: 24px auto;
    width: min(90%, 420px);
}

.classify-data-option {
    width: 100%;
    min-height: 46px;
    padding: 12px;
    font-size: 17px;
    border: 1px solid #d889c9;
    border-radius: 5px;
    background: #f9d9f2;
    color: #222;
}

.classify-data-option:hover:not(:disabled) {
    background: #f2bde7;
}

.classify-data-option.correct {
    background: #ccebd1;
    border-color: #6baa79;
}

.classify-data-option.incorrect {
    background: #f4caca;
    border-color: #d77;
}

.classify-data-option:disabled {
    cursor: default;
}
.classify-data-option {
    cursor: url("Jake hovering over.png"), pointer !important;
}

/* Mean, Median, Mode and Range */
.quiz-description {
    text-align: center;
    margin: 20px 10px;
    font-size: 16px;
}

.game-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 25px 20px;
}

.game-options .game-box {
    min-height: 75px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9dafa;
    border: 3px solid #ed75df;
    border-radius: 15px;
    cursor: pointer;
    text-align: center;
}

.game-options .game-box h2 {
    font-size: 20px;
    font-weight: normal;
    margin: 10px;
}

@media (max-width: 650px) {
    .game-options {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.statistics-options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.statistics-option {
    padding: 10px 16px;
    min-width: 70px;
    border: 1px solid #c5ceda;
    border-radius: 8px;
    background: white;
    color: black;
    font-size: 16px;
}

.statistics-option.selected {
    background: #2162ad;
    border-color: #2162ad;
    color: white;
}

.statistics-option:hover {
    border-color: #2162ad;
}

/* Show Jake when hovering over Mean, Median, Mode and Range */
.statistics-option {
    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

/* Keep Jake visible over the pink game buttons */
.game-box,
.game-box *,
#thirtySecondMeanMedianModeRange,
#hundredSecondMeanMedianModeRange {
    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

/* Match the game title to the main logo font */
#game > h1 {
    font-family: "BubbleStacked", sans-serif !important;
    font-size: 28px !important;
    font-weight: normal !important;
    color: #1d5fa7;
}


#questionFontControl {
    margin: 12px auto;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

#questionFontSlider {
    display: block;
    width: min(300px, 80%);
    margin: 8px auto;
    accent-color: #1d5fa7;
    cursor: pointer;
}

#question {
    font-size: 36px;
}



/* ==================== AREA OPTIONS ==================== */
#area2DShapesDropdown .area-options,
#compositeShapesDropdown .area-options {
    padding: 15px 25px 20px;
    border-top: 1px solid #ccc;
}
#area2DShapesDropdown .area-setting-label,
#compositeShapesDropdown .area-setting-label {
    display: block;
    margin: 0 0 12px;
    font-weight: bold;
    font-size: 15px;
    text-align: left;
}
#area2DShapesDropdown .area-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#area2DShapesDropdown .area-choice {
    padding: 9px 13px;
    border: 1px solid #c5cbd3;
    border-radius: 7px;
    background: white;
    color: #222;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
#area2DShapesDropdown .area-choice:hover {
    border-color: #1d5fa7;
    background: #eff6ff;
}
#area2DShapesDropdown .area-choice.active {
    background: #1d5fa7;
    color: white;
    border-color: #1d5fa7;
}
#area2DShapesDropdown .area-choice:focus-visible {
    outline: 2px solid #1d5fa7;
    outline-offset: 2px;
}
#area2DShapesDropdown .area-formula-setting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    text-align: left;
}
#area2DShapesDropdown .area-formula-setting label {
    font-weight: bold;
    font-size: 15px;
}
#area2DShapesDropdown .area-formula-setting select {
    padding: 9px 12px;
    border: 1px solid #c5cbd3;
    border-radius: 7px;
    background: white;
    color: #222;
    font: inherit;
    font-size: 16px;
}

#areaMainDropdown,
#areaMainDropdown label,
#areaMainDropdown select,
#areaMainDropdown button,
#areaMainDropdown summary,
#areaMainDropdown .area-options {
    cursor: url("Jake moving.png"), auto;
}

#areaMainDropdown button,
#areaMainDropdown select,
#areaMainDropdown summary,
#areaMainDropdown input,
#areaMainDropdown label {
    cursor: url("Jake hovering over.png"), pointer !important;
}
#areaFormulaDisplay {
    max-width: 650px;
    margin: 12px auto;
    padding: 12px 16px;
    background: #e8f4ff;
    border: 2px solid #1766a6;
    border-radius: 8px;
    color: #173b5c;
    font-size: 20px;
    text-align: center;
}


#areaDiagram {
    display: none;
    width: 100%;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    margin: 10px auto;
    overflow: visible;
}

#areaDiagram:not([hidden]) {
    display: flex;
    min-height: 250px;
    align-items: center;
    justify-content: center;
}

#areaDiagram svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow: visible;
    margin: auto;
}
.area-explanation {
    max-width: 650px;
    margin: 12px auto;
    padding: 14px;
    background: #eef8e9;
    border: 1px solid #8ab879;
    border-radius: 8px;
    color: #183d1c;
    text-align: left;
    line-height: 1.6;
}
#answer,
#checkButton,
#revealButton {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    margin-bottom: 8px;
}
#areaFormulaDisplay:empty {
    display: none;
}

/* ==================== TEACHER FOOTER ==================== */
.teacher-footer {
    margin: 70px auto 0;
    padding: 40px 20px 25px;
    text-align: center;
    background: linear-gradient(45deg, #f0ffb3, #d9f2ff);
    color: #17365d;
    border-top: 5px solid #ed82e0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 20px rgba(23, 54, 93, 0.12);
}
/* Footer logo */
.footer-logo {
    margin: 0 auto 15px;
    text-align: center;
}

.footer-logo img {
    display: block;
    width: 130px;
    height: 130px;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 50%;
}
.teacher-footer h3 {
    margin: 8px 0;
    color: #17365d;
    font-size: 30px;
    letter-spacing: 1px;
}
.footer-role {
    margin: 8px 0 15px;
    color: #315b7d;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 3px;
}
.teacher-footer a {
    color: #17365d;
    font-size: 16px;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.teacher-footer a:hover {
    color: #c34eb5;
    text-decoration: underline;
}
.footer-line {
    width: 90px;
    height: 3px;
    margin: 22px auto;
    background: #ed82e0;
    border-radius: 5px;
}
.footer-tagline {
    margin: 0;
    color: #315b7d;
    font-size: 15px;
    font-style: italic;
}
@media (max-width: 500px) {
    .teacher-footer {
        padding: 30px 15px 20px;
    }

    .teacher-footer a {
        font-size: 14px;
    }
}



/* ==================== SELECTED TOPIC HIGHLIGHT ==================== */

/* Selected top-level topic */
.topic-tab.active,
.topic-tab.active:hover {
    background-color: #F8D362 !important;
    transition: background-color 0.2s ease;
}

/* Highlight only the most recently opened main quiz */
.quiz-dropdown[open] > summary {
    background-color: #F8D362;
}

.quiz-dropdown.active-quiz > summary {
    background-color: #F8D362;
}

/* Highlight only the most recently opened subtopic */
.quiz-sub-dropdown[open] > summary {
    background-color: #F8D362;
}

.quiz-sub-dropdown.active-subtopic > summary {
    background-color: #F8D362;
}

/* Normal hover colour */
.topic-tab:not(.active):hover,
.quiz-dropdown > summary:hover,
.quiz-sub-dropdown > summary:hover {
    background-color: #F8D362;
}



/* ==================== ULTRA-SMOOTH DROPDOWNS ==================== */

/* Smooth colour transitions */
.quiz-dropdown > summary,
.quiz-sub-dropdown > summary,
.topic-tab {
    transition:
        background-color 450ms cubic-bezier(0.16, 1, 0.3, 1),
        color 350ms ease;
}

/* Smoothly reveal dropdown contents */
.quiz-dropdown::details-content,
.quiz-sub-dropdown::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transform: translateY(-8px);

    transition:
        block-size 550ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 350ms ease-in-out,
        transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
        content-visibility 550ms allow-discrete;
}

/* Opening */
.quiz-dropdown[open]::details-content,
.quiz-sub-dropdown[open]::details-content {
    block-size: auto;
    opacity: 1;
    transform: translateY(0);
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .quiz-dropdown,
    .quiz-sub-dropdown,
    .quiz-dropdown::details-content,
    .quiz-sub-dropdown::details-content,
    .quiz-dropdown > summary,
    .quiz-sub-dropdown > summary,
    .topic-tab {
        transition: none !important;
        transform: none !important;
    }
}



/* ==========================================
   ROUNDED BOXES & 3D HOVER EFFECTS
   ========================================== */

/* Smooth transitions for interactive elements */
button,
.topic-tab,
.quiz-dropdown,
.quiz-sub-dropdown,
.quiz-dropdown > summary,
.quiz-sub-dropdown > summary,
input,
select,
textarea {
    transition:
        transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 220ms ease,
        background-color 250ms ease,
        border-color 250ms ease;
}

/* Rounded main topic tabs */
.topic-tab {
    border-radius: 14px;
}

/* Main topic hover lift */

/* Quiz and subtopic heading boxes */

/* Lift dropdown headings on hover */

/* Keep open dropdown headings stable */
.quiz-dropdown[open] > summary,
.quiz-sub-dropdown[open] > summary {
    border-radius: 12px;
}

/* Game mode buttons */
button {
    border-radius: 14px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
    transform: translateY(0);
}

/* Button hover lift */
button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 7px 0 rgba(0, 0, 0, 0.10),
                0 10px 18px rgba(0, 0, 0, 0.10);
}

/* Button press effect */
button:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

/* Rounded answer boxes and dropdown inputs */
input,
select,
textarea {
    border-radius: 10px;
}

/* Rounded cards and diagram panels */
.card,
.question-box,
#areaDiagram,
#areaFormulaDisplay {
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Avoid hover animations on touch devices */
@media (hover: none) {
    .topic-tab:hover,
    .quiz-dropdown > summary:hover,
    .quiz-sub-dropdown > summary:hover,
    button:hover:not(:disabled) {
        transform: none;
        box-shadow: 0 3px 0 rgba(0, 0, 0, 0.10);
    }
}

/* Accessibility: respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
    button,
    .topic-tab,
    .quiz-dropdown,
    .quiz-sub-dropdown,
    .quiz-dropdown > summary,
    .quiz-sub-dropdown > summary,
    input,
    select,
    textarea {
        transition: none !important;
    }
}

/* =========================================
   MR NAHAS MATH GENERATOR — QUIZ DROPDOWNS
   Rounded corners, 3D shadows and no outer box
   ========================================= */








/* =========================================
   DROPDOWN FIX — ALL TOPICS AND SUBTOPICS
   ========================================= */

/* Quiz list containers */
#numberQuizzes,
#measurementQuizzes,
#algebraQuizzes,
#statisticsQuizzes,
.quiz-list,
.quiz-container,
.topic-content {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    padding: 12px 4px 14px !important;
    box-sizing: border-box;
}

/* Transparent wrappers.
   Small padding prevents the first heading's
   margin from collapsing outside its wrapper. */
.quiz-dropdown,
.quiz-sub-dropdown {
    display: flow-root;
    position: relative;
    top: auto;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    margin: 0;
    padding: 1px 0 0 !important;
    box-sizing: border-box;
}

/* Individual rounded headings */
.quiz-dropdown > summary,
.quiz-sub-dropdown > summary {
    display: list-item;
    box-sizing: border-box;
    width: calc(100% - 12px);
    max-width: calc(100% - 12px);
    margin: 8px 6px 14px !important;
    padding: 18px 16px;

    color: #000;
    background: #fff;
    border: 2px solid #111;
    border-radius: 15px;

    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18);

    cursor: pointer;
    top: auto;
    transform: translateY(0);

    transition:
        transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 280ms ease,
        background-color 280ms ease;
}

/* Hover lift */
.quiz-dropdown > summary:hover,
.quiz-sub-dropdown > summary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 7px 0 rgba(0, 0, 0, 0.14),
        0 10px 14px rgba(0, 0, 0, 0.07);
    z-index: 2;
}

/* Press effect */
.quiz-dropdown > summary:active,
.quiz-sub-dropdown > summary:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

/* Selected headings */
.quiz-dropdown.active-quiz > summary,
.quiz-sub-dropdown.active-subtopic > summary {
    background: #FFF2A8 !important;
}

/* Unselected hover colour */
.quiz-dropdown:not(.active-quiz) > summary:hover,
.quiz-sub-dropdown:not(.active-subtopic) > summary:hover {
    background: #F5BB12;
}

/* Subtopic indentation */
.quiz-sub-dropdown {
    margin-left: 12px;
    margin-right: 12px;
    min-width: 0;
}

/* Keyboard accessibility */
.quiz-dropdown > summary:focus-visible,
.quiz-sub-dropdown > summary:focus-visible {
    outline: 3px solid #2878c8;
    outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .quiz-dropdown > summary,
    .quiz-sub-dropdown > summary {
        transition: none !important;
        transform: none !important;
    }
}


/* =========================================
   EXPANDING CONTAINER FOR THE ACTIVE TOPIC
   ========================================= */

/* =========================================
   EXPANDING CONTAINERS — HEX COLOURS ONLY
   ========================================= */

/* Main open topic container */
.quiz-dropdown[open] {
    background: #FEF8E7 !important;
    border: 2px solid #000000 !important;
    border-radius: 20px !important;

    padding: 4px 5px 8px !important;
    margin: 10px 3px 14px !important;

    box-sizing: border-box;
    overflow: visible !important;

    box-shadow:
        0 4px 0 #00000012,
        inset 0 0 12px #FFFFFF33;

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

/* Open subtopic container */
.quiz-sub-dropdown[open] {
    background: #FFFFFF33 !important;
    border: 1px solid #FFFFFFBF !important;
    border-radius: 16px !important;

    padding: 3px 3px 6px !important;
    margin: 8px 8px 12px !important;

    box-sizing: border-box;
    overflow: visible !important;

    box-shadow: 0 3px 0 #0000000D;
}

/* Keep individual headings above the frame */
.quiz-dropdown > summary,
.quiz-sub-dropdown > summary {
    position: relative;
    z-index: 1;
}

/* Closed containers remain invisible */
.quiz-dropdown:not([open]),
.quiz-sub-dropdown:not([open]) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Smooth transitions */
.quiz-dropdown,
.quiz-sub-dropdown {
    transition:
        background-color 250ms ease,
        border-color 250ms ease;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .quiz-dropdown,
    .quiz-sub-dropdown {
        transition: none !important;
    }
}








/* =========================================
   MR NAHAS — 3D BUTTONS WITH EDGE AND SHINE
   WHITE COLOURS — HEX ONLY
   ========================================= */

/* Apply to buttons, game boxes, topic tabs and dropdown headings */
button:not(:disabled),
.game-box,
.topic-tab,
.quiz-dropdown > summary,
.quiz-sub-dropdown > summary {
    --btn-face: #FFFFFF;
    --btn-edge: #BDBDBD;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    border: 2px solid #242622;
    border-radius: 14px;

    background-color: var(--btn-face);
    background-image: var(--mr-button-face-gradient);

    box-shadow:
        0 var(--mr-3d-edge-depth) 0 var(--btn-edge),
        0 var(--mr-3d-shadow-y) var(--mr-3d-shadow-blur) var(--mr-3d-shadow-color);

    transform: translateY(0);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease;

    cursor: pointer;
}

/* Moving shine across the FRONT */
button:not(:disabled)::after,
.game-box::after,
.topic-tab::after,
.quiz-dropdown > summary::after,
.quiz-sub-dropdown > summary::after {
    content: "";
    position: absolute;

    top: -40%;
    left: -130%;
    width: var(--mr-button-shine-width);
    height: 180%;

    background: var(--mr-button-shine-gradient);

    transform: skewX(-22deg);
    pointer-events: none;
    z-index: 2;

}

/* Shine sweeps across once on hover */
button:not(:disabled):hover::after,
.game-box:hover::after,
.topic-tab:hover::after,
.quiz-dropdown > summary:hover::after,
.quiz-sub-dropdown > summary:hover::after {
    animation: mr-shine var(--mr-button-shine-duration)
               cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes mr-shine {
    from {
        left: -130%;
    }
    to {
        left: 150%;
    }
}

/* Raised 3D effect */
button:not(:disabled):hover,
.game-box:hover,
.topic-tab:hover,
.quiz-dropdown > summary:hover,
.quiz-sub-dropdown > summary:hover {
    transform: translateY(-3px);

    box-shadow:
        0 var(--mr-3d-hover-edge-depth) 0 var(--btn-edge),
        0 var(--mr-3d-hover-shadow-y) var(--mr-3d-hover-shadow-blur) var(--mr-3d-hover-shadow-color);

    filter: brightness(1.03);
}

/* Press down onto the coloured base */
button:not(:disabled):active,
.game-box:active,
.topic-tab:active,
.quiz-dropdown > summary:active,
.quiz-sub-dropdown > summary:active {
    transform: translateY(5px);

    box-shadow:
        0 var(--mr-3d-pressed-edge-depth) 0 var(--btn-edge),
        0 var(--mr-3d-pressed-shadow-y) var(--mr-3d-pressed-shadow-blur) var(--mr-3d-pressed-shadow-color);

    transition-duration: 70ms;
}

/* Yellow 3D style for main topic tabs */
.topic-tab {
    --btn-face: #FFFFFF;
    --btn-edge: #000000;
}

/* Preserve the selected yellow dropdown headings */
.quiz-dropdown.active-quiz > summary,
.quiz-sub-dropdown.active-subtopic > summary {
    background-color: #FFD000;
}

/* Keyboard focus */
button:not(:disabled):focus-visible,
.topic-tab:focus-visible,
.quiz-dropdown > summary:focus-visible,
.quiz-sub-dropdown > summary:focus-visible {
    outline: 3px solid #2878C8;
    outline-offset: 4px;
}

/* Disabled buttons */
button:disabled {
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* Touchscreen behaviour */
@media (hover: none) {
    button:not(:disabled):hover,
    .game-box:hover,
    .topic-tab:hover,
    .quiz-dropdown > summary:hover,
    .quiz-sub-dropdown > summary:hover {
        transform: none;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    button:not(:disabled),
    button:not(:disabled)::after,
    .game-box,
    .game-box::after,
    .topic-tab,
    .topic-tab::after,
    .quiz-dropdown > summary,
    .quiz-dropdown > summary::after,
    .quiz-sub-dropdown > summary,
    .quiz-sub-dropdown > summary::after {
        transition: none !important;
    }
}



/* =========================================
   MAIN TOPIC TABS — PRESSED TOGGLE EFFECT
   ========================================= */

.topic-tab {
    transform: translateY(0);
    box-shadow:
        0 var(--mr-3d-edge-depth) 0 var(--mr-3d-edge-color),
        0 var(--mr-3d-shadow-y) var(--mr-3d-shadow-blur) var(--mr-3d-shadow-color);

    transition:
        transform 250ms ease,
        box-shadow 250ms ease,
        background-color 250ms ease,
        filter 250ms ease;
}

/* Keep the normal hover state raised */
.topic-tab:hover {
    transform: translateY(0);
    box-shadow:
        0 var(--mr-3d-edge-depth) 0 var(--mr-3d-edge-color),
        0 var(--mr-3d-shadow-y) var(--mr-3d-shadow-blur) var(--mr-3d-shadow-color);
}

/* Keep the selected topic pressed down */
.topic-tab.active,
.topic-tab.selected,
.topic-tab[aria-pressed="true"] {
    transform: translateY(5px);
    box-shadow:
        0 var(--mr-3d-pressed-edge-depth) 0 var(--mr-3d-edge-color),
        0 var(--mr-3d-pressed-shadow-y) var(--mr-3d-pressed-shadow-blur) var(--mr-topic-pressed-shadow-color);
    filter: brightness(0.97);
}

/* Keep selected topic pressed when hovered */
.topic-tab.active:hover,
.topic-tab.selected:hover,
.topic-tab[aria-pressed="true"]:hover {
    transform: translateY(5px);
    box-shadow:
        0 var(--mr-3d-pressed-edge-depth) 0 var(--mr-3d-edge-color),
        0 var(--mr-3d-pressed-shadow-y) var(--mr-3d-pressed-shadow-blur) var(--mr-topic-pressed-shadow-color);
}


/* =========================================
   JAKE CURSOR — ALL BUTTONS AND DROPDOWNS
   ========================================= */



/* =========================================
   MR NAHAS — CONSISTENT PINK GAME MODES
   ========================================= */

button:not(:disabled),
.game-box,
.topic-tab {
    --btn-face: #FFFFFF;
    --btn-edge: #000000;
}

/* Force all 30s, 100s and Endless mode buttons pink */
button:not(:disabled):not(.topic-tab),
.game-box:not(.topic-tab) {
    background-color: #FCDCF7;
    background-image: var(--mr-button-face-gradient);
    border: 2px solid #242622;
    border-radius: 14px;

    box-shadow:
        0 var(--mr-3d-edge-depth) 0 var(--mr-3d-edge-color),
        0 var(--mr-3d-shadow-y) var(--mr-3d-shadow-blur) var(--mr-3d-shadow-color);
}

/* Keep the pink 3D shadow on hover */
button:not(:disabled):not(.topic-tab):hover,
.game-box:not(.topic-tab):hover {
    box-shadow:
        0 var(--mr-3d-hover-edge-depth) 0 var(--mr-3d-edge-color),
        0 var(--mr-3d-hover-shadow-y) var(--mr-3d-hover-shadow-blur) var(--mr-3d-hover-shadow-color);
}

/* Press down */
button:not(:disabled):not(.topic-tab):active,
.game-box:not(.topic-tab):active {
    box-shadow:
        0 var(--mr-3d-pressed-edge-depth) 0 var(--mr-3d-edge-color),
        0 var(--mr-3d-pressed-shadow-y) var(--mr-3d-pressed-shadow-blur) var(--mr-3d-pressed-shadow-color);
}





/* =========================================
   JAKE CURSOR — ALL BUTTONS AND DROPDOWNS
   ========================================= */

button,
.game-box,
.topic-tab,
.quiz-dropdown > summary,
.quiz-sub-dropdown > summary,
button *,
.game-box *,
.topic-tab *,
.quiz-dropdown > summary *,
.quiz-sub-dropdown > summary * {
    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

/* Prevent shine from interfering with the cursor */
button::after,
.game-box::after,
.topic-tab::after,
.quiz-dropdown > summary::after,
.quiz-sub-dropdown > summary::after {
    pointer-events: none !important;
}




/* =========================================
   GLOBAL FIX — ALL GAME MODE BUTTONS
   Same pink fill, black border and 3D base
   ========================================= */

.game-box,
.game-box:hover,
.game-box:focus,
.game-box:active,
.game-box.endless-option,
.coordinate-buttons .game-box {
    box-sizing: border-box !important;

    background-color: #FCDCF7 !important;
    background-image: var(--mr-button-face-gradient) !important;

    color: #000000 !important;
    border: 2px solid #242622 !important;
    border-radius: 14px !important;

    box-shadow:
        0 var(--mr-3d-edge-depth) 0 var(--mr-3d-edge-color),
        0 var(--mr-3d-shadow-y) var(--mr-3d-shadow-blur) var(--mr-3d-shadow-color) !important;

    cursor: pointer !important;
}

/* Same hover effect everywhere */
.game-box:hover,
.game-box.endless-option:hover {
    box-shadow:
        0 var(--mr-3d-hover-edge-depth) 0 var(--mr-3d-edge-color),
        0 var(--mr-3d-hover-shadow-y) var(--mr-3d-hover-shadow-blur) var(--mr-3d-hover-shadow-color) !important;

    filter: brightness(1.03);
}

/* Same pressed effect everywhere */
.game-box:active,
.game-box.endless-option:active {
    box-shadow:
        0 var(--mr-3d-pressed-edge-depth) 0 var(--mr-3d-edge-color),
        0 var(--mr-3d-pressed-shadow-y) var(--mr-3d-pressed-shadow-blur) var(--mr-3d-pressed-shadow-color) !important;

    transition-duration: 70ms;
}

/* Prevent the shine layer interfering with hovering */
.game-box::after,
.game-box.endless-option::after {
    pointer-events: none !important;
}

/* Jake cursor — use your existing image */
.game-box,
.game-box *,
.game-box.endless-option,
.game-box.endless-option * {
    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}


/* =========================================
   ALGEBRA — MATCH MEASUREMENT MODE BUTTONS
   ========================================= */

#algebraQuizzes .game-box,
#algebraQuizzes .game-box:hover,
#algebraQuizzes .game-box:focus,
#algebraQuizzes .game-box:active,
#algebraQuizzes button:not(:disabled),
#algebraQuizzes button:not(:disabled):hover,
#algebraQuizzes button:not(:disabled):active {
    box-sizing: border-box !important;
    background-color: #FCDCF7 !important;

    background-image: var(--mr-button-face-gradient) !important;

    color: #000000 !important;
    border: 2px solid #242622 !important;
    border-radius: 14px !important;

    box-shadow:
        0 var(--mr-3d-edge-depth) 0 var(--mr-3d-edge-color),
        0 var(--mr-3d-shadow-y) var(--mr-3d-shadow-blur) var(--mr-3d-shadow-color) !important;

    cursor: pointer !important;
}

/* Algebra hover shadow */
#algebraQuizzes .game-box:hover,
#algebraQuizzes button:not(:disabled):hover {
    box-shadow:
        0 var(--mr-3d-hover-edge-depth) 0 var(--mr-3d-edge-color),
        0 var(--mr-3d-hover-shadow-y) var(--mr-3d-hover-shadow-blur) var(--mr-3d-hover-shadow-color) !important;
}

/* Algebra pressed shadow */
#algebraQuizzes .game-box:active,
#algebraQuizzes button:not(:disabled):active {
    box-shadow:
        0 var(--mr-3d-pressed-edge-depth) 0 var(--mr-3d-edge-color),
        0 var(--mr-3d-pressed-shadow-y) var(--mr-3d-pressed-shadow-blur) var(--mr-3d-pressed-shadow-color) !important;
}

/* Keep Jake and the shine working */
#algebraQuizzes .game-box,
#algebraQuizzes button,
#algebraQuizzes .game-box *,
#algebraQuizzes button * {
    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

#algebraQuizzes .game-box::after,
#algebraQuizzes button::after {
    pointer-events: none !important;
}


/* =========================================
   JAKE CURSOR — ENTIRE BUTTON AREA
   ========================================= */

button,
button *,
.game-box,
.game-box *,
.topic-tab,
.topic-tab *,
.quiz-dropdown > summary,
.quiz-dropdown > summary *,
.quiz-sub-dropdown > summary,
.quiz-sub-dropdown > summary * {
    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

/* Ensure the shine never interferes with hovering */
button::before,
button::after,
.game-box::before,
.game-box::after,
.topic-tab::before,
.topic-tab::after,
.quiz-dropdown > summary::before,
.quiz-dropdown > summary::after,
.quiz-sub-dropdown > summary::before,
.quiz-sub-dropdown > summary::after {
    pointer-events: none !important;
}


/* =========================================
   JAKE CURSOR — ALL GAME MODE BUTTONS
   ========================================= */

button,
button *,
.game-box,
.game-box *,
.coordinate-buttons,
.coordinate-buttons *,
.game-options,
.game-options *,
.algebra-buttons,
.algebra-buttons *,
.quiz-options,
.quiz-options * {
    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

/* Stop shine overlays blocking the cursor */
button::before,
button::after,
.game-box::before,
.game-box::after {
    pointer-events: none !important;
}


/* =========================================
   FINAL FIX — JAKE OVER EVERY GAME MODE
   Overrides conflicting cursor: pointer rules
   ========================================= */

/* Game mode cards */
.coordinate-buttons .game-box,
.coordinate-buttons .game-box:hover,
.coordinate-buttons .game-box:focus,
.coordinate-buttons .game-box:active,
#algebraQuizzes .coordinate-buttons .game-box,
#algebraQuizzes .coordinate-buttons .game-box:hover,
#algebraQuizzes .coordinate-buttons .game-box:focus,
#algebraQuizzes .coordinate-buttons .game-box:active,
.game-options .game-box,
.game-options .game-box:hover,
.game-options .game-box:focus,
.game-options .game-box:active,

/* Game modes built as actual buttons */
.coordinate-buttons button,
.coordinate-buttons button:hover,
.coordinate-buttons button:focus,
.coordinate-buttons button:active,
#algebraQuizzes .algebra-buttons button,
#algebraQuizzes .algebra-buttons button:hover,
#algebraQuizzes .algebra-buttons button:focus,
#algebraQuizzes .algebra-buttons button:active,

/* Text and other content inside the modes */
.coordinate-buttons .game-box *,
#algebraQuizzes .game-box *,
.game-options .game-box * {
    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

/* =========================================
   MATCH ALL SELECTED YELLOW COLOURS
   ========================================= */

.topic-tab.active,
.topic-tab.active:hover,
.quiz-dropdown[open] > summary,
.quiz-dropdown.active-quiz > summary,
.quiz-sub-dropdown[open] > summary,
.quiz-sub-dropdown.active-subtopic > summary,
.quiz-dropdown > summary:hover,
.quiz-sub-dropdown > summary:hover {
    background-color: #FFBF00 !important;

    background-image: var(--mr-button-face-gradient) !important;
}

/* Statistics options: visible selected and unselected states */
#statisticsQuizzes .statistics-option {
    background-color: #FFFFFF !important;
    color: #2162AD !important;
    border: 1px solid #2162AD !important;
    border-bottom: 5px solid #D889C9 !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 0 #D889C9 !important;
}

#statisticsQuizzes .statistics-option.selected {
    background-color: #2162AD !important;
    color: #FFFFFF !important;
    border-color: #2162AD !important;
    border-bottom-color: #D889C9 !important;
}

#statisticsQuizzes .statistics-option:hover {
    border-bottom-color: #D889C9 !important;
    transform: translateY(-2px);
}

#statisticsQuizzes .statistics-option {
    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

/* =========================================
   STATISTICS — GRAPHS SECTION
   ========================================= */

#graphsDropdown {
    width: 100%;
    box-sizing: border-box;
}

/* Content inside each graph topic */
#graphsDropdown .graphs-options {
    box-sizing: border-box;
    width: calc(100% - 24px);
    margin: 0 12px 18px;
    padding: 20px 24px;

    background-color: #FFFFFF;
    border: 2px solid #D889C9;
    border-radius: 12px;

    text-align: left;
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
}

/* Remove unnecessary paragraph spacing */
#graphsDropdown .graphs-options p {
    margin: 0;
}

/* Consistent nested dropdown spacing */
#graphsDropdown .quiz-sub-dropdown {
    width: 100%;
    box-sizing: border-box;
}

/* Responsive spacing on smaller screens */
@media (max-width: 600px) {
    #graphsDropdown .graphs-options {
        width: calc(100% - 16px);
        margin: 0 8px 14px;
        padding: 14px;
        font-size: 16px;
    }
}

/* ================================================
   STEM-AND-LEAF PLOT GENERATOR
   ================================================ */

#statisticsQuizzes .stem-leaf-table {
    margin: 15px auto;
    border-collapse: collapse;
}

#statisticsQuizzes .stem-leaf-table th,
#statisticsQuizzes .stem-leaf-table td {
    padding: 6px 12px;
    color: #222222;
}

#statisticsQuizzes .stem-leaf-table th:last-child,
#statisticsQuizzes .stem-leaf-table td:last-child {
    border-left: 2px solid #2162AD;
}

#statisticsQuizzes #thirtySecondStemLeaf,
#statisticsQuizzes #hundredSecondStemLeaf {
    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}


/* =========================================
   UPCOMING FEATURES — MATCH SUBTOPIC DESIGN
   ========================================= */

/* Remove the old divider lines */
.upcoming details {
    border: none !important;
    margin: 0;
    padding: 1px 0 0;
}

/* Rounded 3D headings */
.upcoming details > summary {
    display: list-item;
    position: relative;
    box-sizing: border-box;
    width: calc(100% - 12px);
    margin: 8px 6px 14px !important;
    padding: 18px 16px;

    background-color: #FFFFFF;
    background-image: var(--mr-button-face-gradient);
    color: #000000;

    border: 2px solid #242622;
    border-radius: 15px;

    box-shadow:
        0 var(--mr-3d-edge-depth) 0 #BDBDBD,
        0 var(--mr-3d-shadow-y)
          var(--mr-3d-shadow-blur)
          var(--mr-3d-shadow-color);

    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform 180ms ease,
                box-shadow 180ms ease,
                filter 180ms ease;
}

/* Glossy shine layer */
.upcoming details > summary::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -130%;
    width: var(--mr-button-shine-width);
    height: 180%;

    background: var(--mr-button-shine-gradient);
    transform: skewX(-22deg);
    pointer-events: none;
    z-index: 2;
    animation: none;
}

/* Shine sweeps once on each hover */
.upcoming details > summary:hover::after {
    animation: upcoming-shine-once
        var(--mr-button-shine-duration)
        cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes upcoming-shine-once {
    from { left: -130%; }
    to   { left: 150%; }
}

/* Raised hover effect */
.upcoming details > summary:hover {
    transform: translateY(-3px);
    box-shadow:
        0 var(--mr-3d-hover-edge-depth) 0 #BDBDBD,
        0 var(--mr-3d-hover-shadow-y)
          var(--mr-3d-hover-shadow-blur)
          var(--mr-3d-hover-shadow-color);
    filter: brightness(1.03);
}

/* Press effect */
.upcoming details > summary:active {
    transform: translateY(5px);
    box-shadow: 0 var(--mr-3d-pressed-edge-depth) 0 #BDBDBD;
}

/* Keyboard accessibility */
.upcoming details > summary:focus-visible {
    outline: 3px solid #2878C8;
    outline-offset: 4px;
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
    .upcoming details > summary,
    .upcoming details > summary::after {
        animation: none !important;
        transition: none !important;
    }
}


/* Remove pink tint from Algebra buttons */
.algebra-buttons button,
#algebraQuizzes .algebra-buttons button {
    background-color: #FBE28D !important;
    background-image: none !important;
}

/* Keep the yellow colour when hovering */
.algebra-buttons button:hover,
#algebraQuizzes .algebra-buttons button:hover {
    background-color: #FBE28D !important;
    background-image: none !important;
}

/* Remove pink 3D edge from main topic tabs */
.topic-tab {
    --mr-3d-edge-color: #BDBDBD;
}



/* ================================
   SAFARI MATHJAX EQUATION FIX
   Prevent numbers and equations
   from breaking across lines
   ================================ */

#question {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    line-height: 1.6;
}

#question mjx-container {
    max-width: 100%;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    white-space: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
}

/* Keep equation characters together */
#question mjx-container mjx-math {
    white-space: nowrap !important;
}

/* Ensure the game container does not clip equations */
#game {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

/* =========================================
   FIX — ALGEBRA GAME MODE BUTTONS PINK
   ========================================= */

#algebraQuizzes .algebra-buttons button,
#algebraQuizzes .game-options .game-box,
#algebraQuizzes .coordinate-buttons .game-box {
    background-color: #FCDCF7 !important;
    background-image: var(--mr-button-face-gradient) !important;
    color: #000000 !important;
}

/* Keep pink when hovering */
#algebraQuizzes .algebra-buttons button:hover,
#algebraQuizzes .game-options .game-box:hover,
#algebraQuizzes .coordinate-buttons .game-box:hover {
    background-color: #F5BBF0 !important;
    background-image: var(--mr-button-face-gradient) !important;
}



/* ==========================================
   FIXED 3D PRESS EFFECT — FOUR MAIN TOPIC TABS
   ========================================== */

/* Normal raised state — preserve original colours */
.topic-selector .topic-tab {
    --topic-edge-depth: 7px;

    box-shadow:
        0 var(--topic-edge-depth) 0 #000000,
        0 8px 10px rgba(0, 0, 0, 0.12) !important;

    transform: translateY(0) !important;

    transition:
        transform 70ms ease,
        box-shadow 70ms ease !important;
}

/* Hover: retain the existing hover colour */
.topic-selector .topic-tab:hover {
    transform: translateY(0) !important;

    box-shadow:
        0 7px 0 #000000,
        0 8px 10px rgba(0, 0, 0, 0.12) !important;
}

/* Pressed: face moves down as the black base compresses */
.topic-selector .topic-tab:active {
    transform: translateY(6px) !important;

    box-shadow:
        0 1px 0 #000000,
        0 2px 3px rgba(0, 0, 0, 0.10) !important;

    transition-duration: 50ms !important;
}
/* Keep the selected main topic button pressed down */
.topic-selector .topic-tab.active,
.topic-selector .topic-tab.active:hover {
    transform: translateY(6px) !important;

    box-shadow:
        0 1px 0 #000000,
        0 2px 3px rgba(0, 0, 0, 0.10) !important;

    transition: transform 70ms ease, box-shadow 70ms ease !important;
}




/* ==================== SUBSTITUTION ==================== */

#substitutionDropdown .substitution-content {
    padding: 20px;
}

#substitutionDropdown .quiz-description {
    text-align: center;
    margin: 10px 0 20px;
}

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

#substitutionDropdown .substitution-options {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin: 25px 0;
}

/* DEFAULT BUTTON — WHITE */
#substitutionDropdown .substitution-options button.substitution-choice {
    appearance: none;
    -webkit-appearance: none;

    flex: 1 1 0;
    min-width: 120px;
    min-height: 55px;

    padding: 12px 18px;

    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    color: #111111 !important;

    border: 1px solid #c5cbd4 !important;
    border-bottom: 6px solid #b65aa9 !important;
    border-radius: 12px !important;

    box-shadow: none !important;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: normal;

    cursor: url("Jake hovering over.png") 16 16, pointer !important;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.1s ease;
}

/* HOVER — LIGHT BLUE */
#substitutionDropdown .substitution-options button.substitution-choice:hover {
    background: #e6f2ff !important;
    background-color: #e6f2ff !important;
}

/* SELECTED — BLUE */
#substitutionDropdown .substitution-options button.substitution-choice.selected {
    background: #2061a8 !important;
    background-color: #2061a8 !important;
    background-image: none !important;

    color: #ffffff !important;

    border: 1px solid #2061a8 !important;
    border-bottom: 6px solid #b65aa9 !important;
}

/* SELECTED HOVER */
#substitutionDropdown .substitution-options button.substitution-choice.selected:hover {
    background: #18518f !important;
    background-color: #18518f !important;
}

/* PRESSED EFFECT */
#substitutionDropdown .substitution-options button.substitution-choice:active {
    transform: translateY(4px);
    border-bottom-width: 2px !important;
}

/* ==================== SETTINGS ==================== */

#substitutionDropdown .substitution-settings {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px 30px;
    margin: 20px 0 25px;
}

#substitutionDropdown .substitution-setting {
    display: flex;
    align-items: center;
    gap: 10px;

    font-family: Arial, sans-serif;
    font-size: 17px;

    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

#substitutionDropdown .substitution-setting input {
    width: 19px;
    height: 19px;
    accent-color: #268ac9;
}

/* ==================== GAME MODES ==================== */

#substitutionDropdown .game-options {
    margin: 20px 0 10px;
}

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

@media (max-width: 600px) {

    #substitutionDropdown .substitution-options {
        flex-direction: column;
        gap: 12px;
    }

    #substitutionDropdown .substitution-options button.substitution-choice {
        width: 100%;
        flex: none;
    }
}

/* ==================== SUBSTITUTION QUESTION DISPLAY ==================== */

.substitution-question-layout {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

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

    gap: 22px;
    padding: 10px 5px;

    text-align: center;
}

.substitution-given-line,
.substitution-expression-line {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    white-space: nowrap;
    line-height: 1.5;
    font-size: 42px;
}

.substitution-given-line mjx-container,
.substitution-expression-line mjx-container {
    margin: 0 !important;
    max-width: none;
}

/* Smaller screens */
@media (max-width: 600px) {
/* ==================== SUBSTITUTION QUESTION DISPLAY ==================== */

.substitution-question-layout {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

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

    gap: 20px;
    padding: 10px 0;

    text-align: center;
}

.substitution-given-line,
.substitution-expression-line {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    gap: 12px;
    white-space: nowrap;

    /* JS controls the actual size */
    font-size: inherit;

    line-height: 1.5;
}

.substitution-given-line mjx-container,
.substitution-expression-line mjx-container {
    margin: 0 !important;
    max-width: none;
}

@media (max-width: 600px) {
    .substitution-question-layout {
        gap: 12px;
    }

    .substitution-given-line,
    .substitution-expression-line {
        gap: 8px;
    }
}
}

/* ==================== SUBSTITUTION EXPLANATIONS ==================== */

.substitution-explanation {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;
    text-align: left;
    font-family: Arial, sans-serif;
}

.substitution-final-answer {
    text-align: center;
    color: #16803c;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 28px;
}

.substitution-working-step {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.substitution-working-step:last-child {
    border-bottom: none;
}

.substitution-step-title {
    font-size: 21px;
    font-weight: bold;
    color: #2061a8;
    margin-bottom: 10px;
}

.substitution-step-description {
    font-size: 17px;
    line-height: 1.6;
    color: #333333;
    margin-bottom: 14px;
}

.substitution-step-maths {
    font-size: 24px;
    text-align: center;
    padding: 10px 0;
    overflow-x: auto;
}

.substitution-step-maths mjx-container {
    margin: 0 !important;
}

@media (max-width: 600px) {
    .substitution-explanation {
        padding: 10px;
    }

    .substitution-step-title {
        font-size: 19px;
    }

    .substitution-step-description {
        font-size: 15px;
    }

    .substitution-step-maths {
        font-size: 20px;
    }
}

/* ==================== SUBSTITUTION WORKING ==================== */

.substitution-explanation {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;
}

.substitution-final-answer {
    text-align: center;
    color: #16803c;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 25px;
}

.substitution-working-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.substitution-working-line {
    width: 100%;
    text-align: left;
}

.substitution-working-note {
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: normal;
    color: #555;
    margin-bottom: 6px;
}

.substitution-working-maths {
    font-size: 27px;
    line-height: 1.5;
    padding-left: 20px;
    overflow-x: auto;
}

.substitution-working-maths mjx-container {
    margin: 0 !important;
}

@media (max-width: 600px) {
    .substitution-working-maths {
        font-size: 22px;
        padding-left: 5px;
    }

    .substitution-working-note {
        font-size: 14px;
    }
}

/* =========================================
   PYTHAGORAS — MATCH AREA DESIGN
========================================= */

/* 1. QUESTION TYPE BUTTONS */

.pythagoras-subtopics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 12px 20px;

    width: 100%;
    margin: 22px auto 30px;
    padding: 0 25px;
    box-sizing: border-box;
}

.pythagoras-subtopics .pythagoras-choice {
    --btn-edge: #B85EAA;
    --btn-face: #ffffff;

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

    width: auto;
    min-height: 56px;
    padding: 10px 18px;
    margin: 0 0 10px;

    background-color: var(--btn-face);
    color: #000000 !important;

    border: 2px solid #242622;
    border-radius: 11px;

    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.25;
    text-align: center;

    box-shadow:
        0 var(--mr-3d-edge-depth) 0 var(--btn-edge),
        0 8px 10px #00000018;

    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

/* Selected — blue with BLACK text */

.pythagoras-subtopics .pythagoras-choice.selected {
    --btn-face: #2164A9;

    background-color: #2164A9;
    color: #000000 !important;
    border-color: #2164A9;
}

/* Unselected — white */

.pythagoras-subtopics .pythagoras-choice:not(.selected) {
    --btn-face: #ffffff;

    background-color: #ffffff;
    color: #000000 !important;
    border-color: #cccccc;
}

/* Keep existing 3D button hover and press behaviour */

.pythagoras-subtopics .pythagoras-choice:hover {
    filter: brightness(1.05);
}


/* =========================================
   2. QUESTION SETTINGS — NO OUTER PANEL
========================================= */

.pythagoras-settings {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;

    gap: 16px 24px;

    width: 100%;
    margin: 15px auto 25px;
    padding: 0 25px;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    box-sizing: border-box;
}

/* Hide the redundant heading */

.pythagoras-settings h3 {
    display: none;
}

/* Labels above dropdowns */

.pythagoras-setting-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;

    gap: 8px;
    margin: 0;

    color: #000000;
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: bold;
    text-align: left;
}

/* Blue dropdown styling */

.pythagoras-setting-row select {
    width: 220px;
    max-width: 100%;
    min-height: 48px;

    padding: 10px 14px;

    background: #e8f4ff;
    color: #175b9e;

    border: 2px solid #79bce8;
    border-radius: 10px;

    box-shadow: 0 4px 0 #b4d9f0;

    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: normal;

    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

.pythagoras-setting-row select:hover {
    background: #d7ecff;
    border-color: #2164A9;
}

.pythagoras-setting-row select:focus-visible {
    outline: 2px solid #2164A9;
    outline-offset: 3px;
}

.pythagoras-setting-row select option {
    background: #ffffff;
    color: #175b9e;
}


/* =========================================
   3. GAME MODES — SAME AS AREA
========================================= */

.pythagoras-game-options {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;

    gap: 30px;

    width: 100%;
    margin: 20px auto 35px;
    padding: 0 25px;

    box-sizing: border-box;
}

/* Use the website's existing 3D button variables */

.pythagoras-game-options .pythagoras-game-box {
    --btn-face: #FCDCF7;
    --btn-edge: #B85EAA;

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

    width: 0;
    min-width: 0;
    min-height: 105px;

    padding: 15px 12px;
    margin: 0;

    background-color: var(--btn-face);
    color: #000000;

    border: 3px solid #242622;
    border-radius: 20px;

    box-shadow:
        0 var(--mr-3d-edge-depth) 0 var(--btn-edge),
        0 var(--mr-3d-shadow-y)
          var(--mr-3d-shadow-blur)
          var(--mr-3d-shadow-color);

    font-family: Arial, sans-serif;
    font-size: 28px;
    font-weight: normal;
    text-align: center;

    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

.pythagoras-game-options .pythagoras-game-box:hover {
    background-color: #F5BBF0;
    transform: translateY(-3px);

    box-shadow:
        0 var(--mr-3d-hover-edge-depth) 0 var(--btn-edge),
        0 var(--mr-3d-hover-shadow-y)
          var(--mr-3d-hover-shadow-blur)
          var(--mr-3d-hover-shadow-color);
}

.pythagoras-game-options .pythagoras-game-box:active {
    transform: translateY(5px);

    box-shadow:
        0 var(--mr-3d-pressed-edge-depth) 0 var(--btn-edge),
        0 var(--mr-3d-pressed-shadow-y)
          var(--mr-3d-pressed-shadow-blur)
          var(--mr-3d-pressed-shadow-color);
}


/* =========================================
   4. MOBILE
========================================= */

@media (max-width: 650px) {

    .pythagoras-subtopics {
        padding: 0 12px;
        gap: 10px;
    }

    .pythagoras-subtopics .pythagoras-choice {
        font-size: 15px;
        min-height: 48px;
        padding: 10px 12px;
    }

    .pythagoras-settings {
        padding: 0 12px;
        gap: 15px;
    }

    .pythagoras-setting-row {
        flex: 1 1 180px;
    }

    .pythagoras-setting-row select {
        width: 100%;
    }

    .pythagoras-game-options {
        gap: 10px;
        padding: 0 8px;
    }

    .pythagoras-game-options .pythagoras-game-box {
        min-height: 75px;
        padding: 10px 5px;
        font-size: clamp(14px, 3.5vw, 20px);
    }
}

/* =========================================
   PYTHAGORAS — MATCH AREA BUTTONS EXACTLY
========================================= */

/* Compact buttons like Square, Rectangle, Triangle */

.pythagoras-subtopics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 12px 20px;

    padding: 0 25px;
    margin: 20px 0 25px;
    box-sizing: border-box;
}

.pythagoras-subtopics .pythagoras-choice {
    --btn-face: #ffffff;
    --btn-edge: #B85EAA;

    flex: 0 0 auto;
    width: auto;
    min-height: 0;

    padding: 9px 13px;
    margin: 0 0 10px;

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;

    color: #222222 !important;
    background-color: #ffffff;

    border: 1px solid #c5cbd3;
    border-radius: 7px;

    box-shadow: 0 10px 0 #B85EAA;
}

/* Selected = same blue and WHITE text as Area */

.pythagoras-subtopics .pythagoras-choice.selected {
    --btn-face: #1d5fa7;
    --btn-edge: #B85EAA;

    background-color: #1d5fa7 !important;
    color: #ffffff !important;

    border-color: #1d5fa7;
}

/* Unselected = white */

.pythagoras-subtopics .pythagoras-choice:not(.selected) {
    --btn-face: #ffffff;

    background-color: #ffffff !important;
    color: #222222 !important;
    border-color: #c5cbd3;
}

/* No oversized minimum widths */

.pythagoras-choice-content,
.pythagoras-choice-title {
    font-size: inherit;
    font-weight: inherit;
}


/* =========================================
   GAME MODES — USE AREA'S EXISTING STYLE
========================================= */

.pythagoras-game-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 30px;
    width: 100%;

    margin: 25px auto 35px;
    padding: 0 25px;

    box-sizing: border-box;
}

/* Same proportions as Area */

.pythagoras-game-options .game-box {
    --btn-face: #FCDCF7;
    --btn-edge: #B85EAA;

    width: auto;
    min-width: 0;
    min-height: 100px;

    margin: 0;

    background-color: #FCDCF7;
    border: 3px solid #242622;
    border-radius: 20px;

    box-shadow: 0 10px 0 #B85EAA;
}

/* Same font as Area */

.pythagoras-game-options .game-box h2 {
    font-family: Arial, sans-serif;
    font-size: 28px;
    font-weight: normal;
    color: #000000;

    margin: 10px 0;
}

/* Same hover effect */

.pythagoras-game-options .game-box:hover {
    background-color: #F5BBF0;
}

/* Same pressed effect */

.pythagoras-game-options .game-box:active {
    transform: translateY(5px);
    box-shadow: 0 5px 0 #B85EAA;
}


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

@media (max-width: 650px) {

/* =========================================
   PYTHAGORAS GAME MODES — MATCH AREA
========================================= */

.pythagoras-game-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;

    width: 100%;
    padding: 0 25px;
    margin: 25px auto 40px;

    box-sizing: border-box;
}

/* Allow existing game-box CSS to control appearance */

.pythagoras-game-options .game-box {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Prevent the unwanted shine overlay */

.pythagoras-game-options .game-box::before,
.pythagoras-game-options .game-box::after {
    display: none !important;
}

/* Mobile */

@media (max-width: 650px) {
    .pythagoras-game-options {
        gap: 10px;
        padding: 0 10px;
    }
}s
}

/* ==========================================
   TRIGONOMETRY
========================================== */

#trigonometryContent[hidden] {
    display: none !important;
}

.trigonometry-content {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 8px 20px;
}

.trigonometry-description {
    text-align: center;
    font-size: 16px;
    margin: 10px auto 24px;
    line-height: 1.5;
}

/* TOPIC GROUPS */

.trig-topic-group {
    margin: 0 0 25px;
    padding: 0;
}

.trig-topic-group h3 {
    font-size: 19px;
    margin: 0 0 10px;
    color: #222;
}

.trig-topic-group h4 {
    font-size: 15px;
    margin: 17px 0 10px;
    color: #222;
}

.trig-topic-description {
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 13px;
    color: #444;
}

/* BLUE SELECTABLE OPTIONS */

.trig-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 12px 0 18px;
}

.trig-choice {
    appearance: none;
    -webkit-appearance: none;

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

    min-height: 38px;
    padding: 9px 14px;

    background: linear-gradient(
        to bottom,
        #75b7f1 0%,
        #428ed6 55%,
        #2473bf 100%
    );

    border: 1px solid #2569a8;
    border-radius: 12px;

    box-shadow:
        0 6px 0 #c86cbb,
        0 8px 12px rgba(0,0,0,0.10);

    color: white;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;

    cursor: url("Jake hovering over.png") 16 16, pointer !important;

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

/* SELECTED */

.trig-choice.selected {
    background: linear-gradient(
        to bottom,
        #438fda,
        #1763b1
    );

    border-color: #12518f;

    color: #fff;

    box-shadow:
        0 6px 0 #b94fae,
        0 8px 12px rgba(0,0,0,0.12);
}

/* DESELECTED */

.trig-choice:not(.selected) {
    background: linear-gradient(
        to bottom,
        #d8ebfc,
        #b5d6f3
    );

    border-color: #85b8e5;

    color: #25629d;

    box-shadow:
        0 6px 0 #d6a0d1,
        0 8px 12px rgba(0,0,0,0.06);
}

/* HOVER */

.trig-choice:hover {
    filter: brightness(1.08);
}

/* PRESSED */

.trig-choice:active {
    transform: translateY(5px);

    box-shadow:
        0 1px 0 #b94fae,
        0 2px 4px rgba(0,0,0,0.12);
}

/* KEYBOARD FOCUS */

.trig-choice:focus-visible {
    outline: 3px solid #f0bd34;
    outline-offset: 3px;
}

/* SETTINGS */

.trig-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 25px 0;
}

.trig-setting {
    display: flex;
    flex-direction: column;
    gap: 7px;

    flex: 0 1 180px;
}

.trig-setting label {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.trig-setting select {
    width: 100%;
    min-height: 42px;

    padding: 9px 12px;

    background: #e7f3ff;
    color: #0757a3;

    border: 1px solid #78b8f0;
    border-radius: 8px;

    box-shadow: 0 3px 0 #a3d2f7;

    font-family: inherit;
    font-size: 14px;

    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

/* GAME MODES */

.trig-game-heading {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    margin: 24px 0 14px;
}

/* Existing .game-options and .game-box CSS
   controls the pink 3D game buttons. */

/* RESPONSIVE */

@media (max-width: 600px) {

    .trigonometry-content {
        padding: 10px 4px 18px;
    }

    .trig-options {
        gap: 10px;
    }

    .trig-choice {
        font-size: 12px;
        padding: 9px 11px;
    }

    .trig-setting {
        flex: 1 1 145px;
    }

    .trig-topic-group h3 {
        font-size: 17px;
    }
}

/* ==========================================
   TRIGONOMETRY BLUE SELECTABLE BUTTONS
   Match Pythagoras topic selection
========================================== */

/* SELECTED - BLUE */
#trigonometrySection button.trig-choice.selected {
    appearance: none;
    -webkit-appearance: none;

    background: linear-gradient(
        to bottom,
        #438fda 0%,
        #1763b1 100%
    ) !important;

    color: white !important;
    border: 2px solid #2169a9 !important;
    border-radius: 13px !important;

    box-shadow:
        0 7px 0 #b65aaa,
        0 9px 12px rgba(0, 0, 0, 0.12) !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;

    min-height: 40px;
    width: auto;

    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

/* DESELECTED - WHITE */
#trigonometrySection button.trig-choice:not(.selected) {
    appearance: none;
    -webkit-appearance: none;

    background: linear-gradient(
        to bottom,
        #ffffff,
        #f3f7fc
    ) !important;

    color: #111 !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 13px !important;

    box-shadow:
        0 7px 0 #d18ac3,
        0 9px 12px rgba(0, 0, 0, 0.10) !important;

    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 10px 14px !important;

    min-height: 40px;
    width: auto;

    cursor: url("Jake hovering over.png") 16 16, pointer !important;
}

/* HOVER */
#trigonometrySection button.trig-choice:hover {
    filter: brightness(1.08);
}

/* PRESSED */
#trigonometrySection button.trig-choice:active {
    transform: translateY(5px) !important;

    box-shadow:
        0 2px 0 #b65aaa,
        0 3px 5px rgba(0, 0, 0, 0.12) !important;
}

/* BLUE BUTTON LAYOUT */
#trigonometrySection .trig-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    margin: 15px 0 25px;
}
/* TOP LEFT RESTART AND MENU BUTTONS */

.game-top-controls {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px 15px;
}

.game-top-controls button {
    font-size: 16px;
    padding: 10px 18px;
    min-width: 110px;
}

/* Keep the controls above the question tracker */
#game .top-bar {
    margin-top: -10px;
}
/* Reduce gap above the game title */
#game {
    padding-top: 0px !important;
}

.game-top-controls {
    margin-top: 10 !important;
    margin-bottom: -10px !important;
}
/* TOP LEFT CONTROLS */

.game-top-controls {
    display: grid !important;
    grid-template-columns: 180px 150px !important;
    grid-template-rows: auto auto !important;
    column-gap: 15px !important;
    row-gap: 10px !important;
    justify-content: start !important;
    align-items: start !important;
}

/* Return to Menu */
#menuButton {
    grid-column: 1;
    grid-row: 1;
}

/* Restart */
#restartButton {
    grid-column: 2;
    grid-row: 1;
}

/* Font slider directly below Restart */
#questionFontControl {
    grid-column: 1 !important;
    grid-row: 2 !important;

    position: static !important;
    width: 200px !important;
    margin: 0 !important;
    text-align: center !important;
}

#questionFontControl label {
    display: block;
    font-size: 14px;
    white-space: nowrap;
}

#questionFontSlider {
    display: block;
    width: 180px !important;
    margin: 6px auto 0 !important;
}
/* Give the controls and logo separate space */
#game .game-top-controls {
    margin-bottom: -10px !important;
}

/* Centre the logo below the controls */
#game > h1 {
    margin: 1px auto 0px !important;
    text-align: center;
}

/* Space between logo and question tracker */
#game .top-bar {
    margin-top: 0px !important;
}