/* Standalone Trigonometry styling; only affects Trigonometry. */
#trigSidesDiagramContainer[hidden],#trigSidesAnswers[hidden]{display:none!important}
#trigSidesDiagramContainer{width:100%;max-width:430px;margin:2px auto 0;box-sizing:border-box}
#trigSidesDiagram{display:flex;align-items:center;justify-content:center;min-height:0}
#trigSidesDiagram svg{display:block;width:100%;max-width:400px;height:auto;overflow:visible}
#trigSidesAnswers {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    max-width: 920px;
    margin: 0 auto 14px;
}
#trigSidesAnswers .trig-generator-answer {
    flex: 0 0 auto;
    width: 280px;           /* BUTTON WIDTH */
    min-height: 55px;      /* BUTTON HEIGHT */
    padding: 10px 15px;
    box-sizing: border-box;

    border: 2px solid #15518e;
    border-bottom: 7px solid #174778;
    border-radius: 16px;

    background: linear-gradient(180deg, #55adf3, #1873c8);
    color: white;
    font: normal 20px Arial, sans-serif;

    box-shadow: 0 7px 0 #b85eaa;
    cursor: url("Jake hovering over.png") 16 16, pointer !important;
    transition: transform .12s, background .12s;
}
#trigSidesAnswers .trig-generator-answer:hover{background:linear-gradient(180deg,#78c4ff,#247fdd)}
#trigSidesAnswers .trig-generator-answer:active{transform:translateY(5px);box-shadow:0 2px 0 #b85eaa}
#trigSidesAnswers .trig-generator-answer.trig-correct{background:linear-gradient(#a8f0b9,#39b96a);border-color:#16803c;color:#07552c}
#trigSidesAnswers .trig-generator-answer.trig-incorrect{background:linear-gradient(#ffe3e3,#e88282);border-color:#aa3333;color:#672020}
#trigGeneratorNote{margin:0 auto}
.trig-explanation{max-width:700px;margin:8px auto;padding:10px 16px;text-align:left;font-family:Arial,sans-serif;box-sizing:border-box}
.trig-answer-title{color:#16803c;font-weight:700;font-size:23px;text-align:center;margin:6px 0 20px}
.trig-work-step{margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid #ddd}
.trig-work-note{font-size:16px;line-height:1.4;color:#333;margin-bottom:7px;font-weight:normal}
.trig-work-math{font-size:23px;line-height:1.5;overflow-x:auto;padding:4px 2px 8px;font-weight:normal}
.trig-work-math mjx-container{margin:0!important}
#trigonometrySection .trig-choice{background:linear-gradient(#55a9ec,#116cc1);color:white;border:2px solid #226aaf;border-radius:15px;box-shadow:0 8px 0 #b85eaa;cursor:url("Jake hovering over.png") 16 16,pointer!important}
#trigonometrySection .trig-choice.selected {
    background: linear-gradient(#4e9fe5, #0961b3);
    outline: none;
    outline-offset: 0;
}
#trigonometrySection .trig-choice:not(.selected){background:linear-gradient(#74b6ed,#3e86c7)}
#trigonometrySection .trig-choice:active{transform:translateY(5px);box-shadow:0 2px 0 #b85eaa}
@media(max-width:600px){#trigSidesDiagramContainer{max-width:350px}#trigSidesAnswers{gap:8px}#trigSidesAnswers .trig-generator-answer{font-size:17px;min-height:55px;}.trig-explanation{padding:8px}.trig-work-math{font-size:19px}}

/* ==========================================
   TRIGONOMETRY — ANSWER & EXPLANATION FIX
   ========================================== */

/* Reduce gap below triangle */
#trigDiagramContainer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#trigDiagramContainer svg {
    max-height: 260px;
}

/* Compact explanation */
.trig-explanation {
    max-width: 620px;
    margin: 12px auto;
    padding: 15px 20px;
    background: #f0fff4;
    border: 2px solid #24934d;
    border-radius: 14px;
    box-sizing: border-box;
}

/* Correct answer */
.trig-answer-title {
    color: #16803c;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 15px;
}

/* Worked steps */
.trig-work-step {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #cce5d4;
}

.trig-work-step:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Step description */
.trig-work-note {
    font-size: 15px;
    color: #333;
    margin-bottom: 5px;
}

/* Maths equations */
.trig-work-math {
    font-size: 22px;
    line-height: 1.5;
    overflow: visible !important;
}

/* Remove unnecessary scrolling */
.trig-work-math mjx-container {
    margin: 0 !important;
    overflow: visible !important;
}
#trigChoices button.trig-correct {
    background: linear-gradient(#baffce, #55d987) !important;
    border-color: #16803c !important;
    box-shadow: 0 6px 0 #16803c !important;
    color: #07552c !important;
}

#trigChoices button.trig-incorrect {
    background: linear-gradient(#ffdada, #ff8585) !important;
    border-color: #b42323 !important;
    box-shadow: 0 6px 0 #b42323 !important;
}
/* ==========================================
   TRIGONOMETRY — SIDE-BY-SIDE LAYOUT
   ========================================== */

/* Only apply to multiple-choice questions */
#game:has(#trigChoices:not([hidden])) {
    --trig-layout-width: 760px;
}

/* Triangle on the left */
#game:has(#trigChoices:not([hidden])) #trigDiagramContainer {
    width: 48% !important;
    max-width: 360px !important;
    margin: 5px 0 5px auto !important;
    padding: 0 !important;
}

/* Smaller triangle */
#game:has(#trigChoices:not([hidden])) #trigDiagramContainer svg {
    width: 100% !important;
    max-height: 230px !important;
}

/* Blue buttons on the right */
#game:has(#trigChoices:not([hidden])) #trigChoices {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: 220px !important;
    max-width: 40% !important;

    gap: 12px !important;
    margin: 0 !important;
}

/* Smaller blue buttons */
#trigChoices button {
    width: 100% !important;
    min-height: 48px !important;
    padding: 8px 16px !important;
    font-size: 18px !important;
}

/* Hide choices when inactive */
#trigChoices[hidden] {
    display: none !important;
}
/* Arrange triangle and buttons horizontally */
#trigQuestionLayout {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 35px;
    width: 100%;
    max-width: 850px;
    margin: 5px auto;
}

/* Correct triangle alignment */
#trigQuestionLayout #trigDiagramContainer {
    flex: 1 1 55%;
    width: auto !important;
    max-width: 420px !important;
    margin: 0 !important;
}

/* Correct button alignment */
#trigQuestionLayout #trigChoices:not([hidden]) {
    flex: 0 0 220px;
    max-width: 220px !important;
}

/* Keep numerical questions centred */
#trigQuestionLayout:has(#trigChoices[hidden]) {
    justify-content: center;
}

#trigQuestionLayout:has(#trigChoices[hidden])
#trigDiagramContainer {
    flex: 0 1 220px;
}

/* Mobile screens */
@media (max-width: 600px) {

    #trigQuestionLayout {
        flex-direction: column;
        gap: 12px;
    }

    #trigQuestionLayout #trigDiagramContainer {
        width: 100% !important;
    }

    #trigQuestionLayout #trigChoices:not([hidden]) {
        width: 100% !important;
        max-width: 320px !important;
        flex: none;
    }
}

/* Blue answer buttons — pressed-down effect */
#trigSidesAnswers .trig-generator-answer {
    position: relative;
    transform: translateY(0);
    box-shadow: 0 7px 0 #b85eaa;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Button moves down when clicked */
#trigSidesAnswers .trig-generator-answer:active {
    transform: translateY(7px);
    box-shadow: 0 0 0 #b85eaa;
}

/* Keep selected answer pressed down */
#trigSidesAnswers .trig-generator-answer.trig-correct,
#trigSidesAnswers .trig-generator-answer.trig-incorrect {
    transform: translateY(7px);
    box-shadow: 0 0 0 #b85eaa;
}
/* Smooth 3D topic button movement */
button[data-mouse-tilt-ready="true"],
a[data-mouse-tilt-ready="true"] {
    transition: transform 0.08s ease-out !important;
    transform-origin: center center !important;
}
/* UNIVERSAL 3D BUTTON TILT */

button,
.worksheet-tab,
.game-box,
.trig-choice,
.topic-tab,
[role="button"] {
    transform-origin: center center;
    transform-style: preserve-3d;
}

.mouse-tilting {
    transition: transform 0.08s ease-out !important;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .mouse-tilting {
        transition: none !important;
    }
}