/* =====================================================================
   GYM PAGES — Math Gym hub, games (mental math, be perfect, triangulate),
   mock generator, rankings tables.
   Depends on the design tokens in /assets/css/style.css.
   ===================================================================== */

/* ---- Muted activity accents (one quiet accent per activity) ---------- */
.gym-page,
.gym-main {
    --accent-practice: var(--brand);
    --accent-potd: #8a5a2c;
    --accent-games: #3f6b4f;
    --accent-resources: #2f6b7a;
    --accent-mock: #44607a;
    --accent-zen: #5f6672;
}

.dark .gym-page,
.dark .gym-main {
    --accent-practice: #d99a9c;
    --accent-potd: #d3ab76;
    --accent-games: #8fc7a5;
    --accent-resources: #84c1d1;
    --accent-mock: #9db8d6;
    --accent-zen: #aab3c7;
}

/* =====================================================================
   HUB — /mathgym
   Maroon Constructivist hero band: solid brand field, ink edges, hard
   shadow, oversized display heading + numeric stat slabs.
   ===================================================================== */
.gym-hero {
    background: var(--brand);
    border: var(--border-bold) solid var(--structure);
    box-shadow: var(--shadow-e3);
    color: #f4f1ea;
    padding: var(--sp-8);
    margin-bottom: var(--sp-8);
}

.gym-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-75);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244, 241, 234, 0.82);
    margin-bottom: var(--sp-3);
}

.gym-hero__kicker::before {
    content: "";
    width: 0.7em;
    height: 0.7em;
    background: #f4f1ea;
    flex: 0 0 auto;
}

.gym-hero h1 {
    color: #f4f1ea;
    font-size: var(--fs-400);
    font-weight: var(--fw-display);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: var(--sp-4);
}

.gym-hero__lead {
    color: rgba(244, 241, 234, 0.9);
    font-size: var(--fs-1125);
    line-height: var(--line-base);
    max-width: 56ch;
    margin-bottom: var(--sp-6);
}

.gym-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.gym-hero__cta .btn {
    min-height: 44px;
    font-weight: 700;
    padding: var(--sp-2) var(--sp-6);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.gym-hero__cta .btn-light {
    color: var(--brand);
    border: var(--border-thick) solid var(--structure);
}

.gym-hero__stats {
    display: grid;
    gap: var(--sp-3);
}

.gym-stat {
    background: #f4f1ea;
    border: var(--border-thick) solid var(--structure);
    box-shadow: var(--shadow-hard);
    padding: var(--sp-4) var(--sp-5);
}

.gym-stat__value {
    display: block;
    font-size: var(--fs-400);
    font-weight: var(--fw-display);
    line-height: 0.9;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--brand);
}

.gym-stat__label {
    display: block;
    color: var(--structure);
    font-size: var(--fs-875);
    font-weight: 600;
    margin-top: var(--sp-1);
}

.dark .gym-hero {
    background: var(--brand);
    border-color: var(--structure);
}

.dark .gym-stat {
    background: var(--dark-surface);
    border-color: var(--structure);
}

.dark .gym-stat__value {
    color: var(--dark-link) !important;
}

.dark .gym-stat__label {
    color: var(--dark-text) !important;
}

/* ---- Activity tiles -------------------------------------------------- */
.gym-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-5);
}

.gym-tile {
    --tile-accent: var(--brand);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: var(--border-thick) solid var(--structure);
    border-top: var(--border-bold) solid var(--tile-accent);
    box-shadow: var(--shadow-hard);
    padding: var(--sp-6);
    transition: box-shadow 0.16s ease, transform 0.16s ease;
}

.gym-tile:hover,
.gym-tile:focus-within {
    box-shadow: 7px 7px 0 var(--structure);
    transform: translate(-3px, -3px);
}

.gym-tile--practice  { --tile-accent: var(--accent-practice); }
.gym-tile--potd      { --tile-accent: var(--accent-potd); }
.gym-tile--games     { --tile-accent: var(--accent-games); }
.gym-tile--resources { --tile-accent: var(--accent-resources); }
.gym-tile--mock      { --tile-accent: var(--accent-mock); }
.gym-tile--zen       { --tile-accent: var(--accent-zen); }

.gym-tile__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.gym-tile__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: var(--border-thick) solid var(--structure);
    background: color-mix(in srgb, var(--tile-accent) 14%, var(--surface));
    color: var(--tile-accent);
    font-size: var(--fs-150);
}

/* Fallback where color-mix is unavailable */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .gym-tile__icon {
        background: var(--surface-2);
    }
}

.gym-tile__title {
    font-size: var(--fs-125);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0;
    color: var(--text-strong);
}

.gym-tile__desc {
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
}

.gym-tile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.gym-tile__actions:last-child {
    margin-bottom: 0;
}

.gym-tile__foot {
    margin-top: auto;
}

/* Small category chips (links) */
.gym-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: var(--sp-1) var(--sp-4);
    border: var(--border-thick) solid var(--structure);
    background: var(--surface);
    color: var(--text-strong);
    font-size: var(--fs-875);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.gym-chip:hover,
.gym-chip:focus-visible {
    border-color: rgba(116, 31, 34, 0.45);
    background: var(--rose-50);
    color: var(--brand);
}

.dark .gym-chip {
    background: var(--dark-surface-2);
    color: var(--dark-text) !important;
}

.dark .gym-chip:hover,
.dark .gym-chip:focus-visible {
    border-color: var(--structure);
    background: var(--dark-surface);
    color: var(--dark-link) !important;
}

.gym-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* Static "supported contest" tags (not links) */
.gym-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-3);
    border: var(--border-thin) solid var(--structure);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: var(--fs-75);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dark .gym-tag {
    background: var(--dark-surface-2);
    color: var(--dark-muted) !important;
}

/* Feature list inside tiles */
.gym-tile__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-4);
}

.gym-tile__list li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    color: var(--text-muted);
}

.gym-tile__list li:last-child {
    margin-bottom: 0;
}

.gym-tile__list .gym-tile__list-name {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--tile-accent);
}

/* Category accordion inside the practice tile */
.gym-accordion .accordion-item {
    border: var(--border-thick) solid var(--structure);
    overflow: hidden;
    background: var(--surface);
}

.gym-accordion .accordion-item + .accordion-item {
    margin-top: var(--sp-2);
}

.gym-accordion .accordion-button {
    font-weight: 600;
    color: var(--text-strong);
    background: var(--surface);
    box-shadow: none;
    padding: var(--sp-3) var(--sp-4);
}

.gym-accordion .accordion-button:not(.collapsed) {
    color: var(--brand);
    background: var(--rose-50);
}

.gym-accordion .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.gym-accordion .accordion-body {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.dark .gym-accordion .accordion-item,
.dark .gym-accordion .accordion-button {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

.dark .gym-accordion .accordion-button:not(.collapsed) {
    color: var(--dark-link);
    background: var(--dark-surface-2);
}

.dark .gym-accordion .accordion-button::after {
    filter: invert(1) brightness(1.6);
}

/* =====================================================================
   SHARED GAME-PAGE PRIMITIVES
   ===================================================================== */
.gym-head {
    margin-bottom: var(--sp-6);
}

.gym-head .con-eyebrow {
    margin-bottom: var(--sp-2);
}

.gym-head h1 {
    font-size: var(--fs-300);
    font-weight: var(--fw-display);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: var(--sp-1);
}

.gym-head__sub {
    color: var(--text-muted);
    margin: 0;
    max-width: 70ch;
}

/* Elapsed-time pill (JS toggles inline display; width keeps pill shape) */
.gym-timer {
    align-items: center;
    width: fit-content;
    font-size: var(--fs-200) !important;
    font-weight: var(--fw-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    padding: var(--sp-2) var(--sp-5);
    border: var(--border-thick) solid var(--structure);
    background: var(--brand);
    color: #f4f1ea;
    box-shadow: var(--shadow-hard);
    margin-bottom: var(--sp-4);
}

.dark .gym-timer {
    background: var(--brand);
    border-color: var(--structure);
    color: #f4f1ea;
}

/* Generic surface panel (config forms, explanations) */
.gym-panel {
    background: var(--surface);
    border: var(--border-thick) solid var(--structure);
    box-shadow: var(--shadow-hard);
    padding: var(--sp-6);
    margin-bottom: var(--sp-5);
}

.gym-panel__title {
    font-size: var(--fs-125);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--brand);
    margin-bottom: var(--sp-3);
}

.dark .gym-panel {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

.dark .gym-panel__title {
    color: var(--dark-link) !important;
}

.gym-panel--explain span {
    display: block;
    line-height: 1.6;
}

.gym-panel--explain span + span {
    margin-top: var(--sp-1);
}

.gym-config .form-control,
.gym-config .form-select {
    min-height: 56px;
}

/* Action rows under setup forms */
.gym-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.gym-actions .btn {
    min-height: 44px;
    font-weight: 700;
    padding-left: var(--sp-6);
    padding-right: var(--sp-6);
}

.gym-actions__note {
    color: var(--text-muted);
    font-size: var(--fs-875);
}

/* Quiet informational note (replaces gradient boxes) */
.gym-note {
    background: var(--surface-2);
    border: var(--border-thin) solid var(--structure);
    border-left: var(--border-bold) solid var(--brand);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-5);
    max-width: 70ch;
    line-height: 1.6;
}

.dark .gym-note {
    background: var(--dark-surface-2);
    border-color: var(--structure);
    border-left-color: var(--brand);
    color: var(--dark-text);
}

/* Score / result summary */
.gym-score {
    background: var(--rose-50);
    border: var(--border-thick) solid var(--structure);
    border-left: var(--border-bold) solid var(--brand);
    box-shadow: var(--shadow-hard);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-4);
}

.gym-score__headline {
    display: block;
    font-size: var(--fs-200);
    font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: var(--sp-2);
    color: var(--text-strong);
}

.gym-score__line {
    display: block;
    font-size: var(--fs-1125);
    color: var(--text-muted);
}

.gym-score__line b {
    font-variant-numeric: tabular-nums;
}

.gym-score__line--correct b { color: var(--status-ac); }
.gym-score__line--wrong b   { color: var(--status-wa); }
.gym-score__line--blank b   { color: #997404; }

.dark .gym-score {
    background: var(--dark-surface);
    border-color: var(--dark-border);
}

.dark .gym-score__line--correct b { color: var(--dark-success) !important; }
.dark .gym-score__line--wrong b   { color: var(--dark-danger) !important; }
.dark .gym-score__line--blank b   { color: var(--dark-warning) !important; }

/* The score box is filled by JS; never show it empty. */
#score.gym-score:empty {
    display: none !important;
}

/* =====================================================================
   MENTAL MATH — drill table + inputs
   ===================================================================== */
#drills:empty {
    display: none;
}

table#drills {
    overflow: hidden;
    margin-top: 0;
    margin-bottom: var(--sp-4);
    border: var(--border-thick) solid var(--structure);
}

table#drills th {
    background: var(--structure);
    color: var(--surface);
    font-size: var(--fs-75);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--sp-3) var(--sp-4);
}

table#drills td {
    vertical-align: middle;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-1125);
}

.dark table#drills th {
    background: var(--structure);
    color: var(--dark-bg);
}

.drill-input {
    width: 100%;
    min-height: 44px;
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: 0;
    border: var(--border-thick) solid var(--structure);
    font-size: var(--fs-1125);
    font-variant-numeric: tabular-nums;
    background: var(--surface);
    color: var(--text-strong);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.drill-input:focus {
    outline: none;
    background: var(--surface);
    border: var(--border-thick) solid var(--brand);
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.dark .drill-input {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

.dark .drill-input:focus {
    background: var(--dark-surface-2);
    border-color: rgba(123, 215, 255, 0.65);
}

#mentalmath #submit-answers-btn,
#clear-drills {
    margin-bottom: var(--sp-4);
}

/* =====================================================================
   BE PERFECT — single-drill panel
   ===================================================================== */
#drills.bp-stage {
    display: block;
    padding: var(--sp-8);
    text-align: center;
    background: var(--surface) !important;
}

#drills.bp-stage.hidden {
    display: none;
}

.dark #drills.bp-stage {
    background: var(--dark-surface) !important;
}

#drills.bp-stage .bp-question {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

#drills.bp-stage #answer {
    width: 100%;
    padding: var(--sp-3);
    font-size: 2.5em;
    font-weight: 800;
    border: var(--border-heavy) solid var(--structure);
    min-height: 60px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#drills.bp-stage #answer:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.dark #drills.bp-stage #answer {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

.bp-drill-count {
    display: inline-block;
    margin-top: var(--sp-4);
    padding: var(--sp-1) var(--sp-4);
    background: var(--surface-2);
    border: var(--border-thick) solid var(--structure);
    color: var(--text-muted);
    font-size: var(--fs-875);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dark .bp-drill-count {
    background: var(--dark-surface-2);
    border-color: var(--dark-border);
    color: var(--dark-muted);
}

/* =====================================================================
   TRIANGULATE
   ===================================================================== */
.tri-countdown {
    font-size: var(--fs-1125);
    margin-bottom: var(--sp-3);
}

.triangulate-time-left {
    display: inline-block;
    font-family: ui-monospace, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
    font-size: var(--fs-1125);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand);
    background-color: var(--rose-50);
    border: var(--border-thick) solid var(--structure);
    padding: var(--sp-1) var(--sp-3);
    letter-spacing: 0.04em;
}

.dark .triangulate-time-left {
    color: var(--dark-link) !important;
    background-color: var(--dark-surface-2);
    border-color: var(--structure);
}

.tri-launch {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    margin: var(--sp-4) 0 var(--sp-6);
}

.tri-launch .btn {
    min-height: 48px;
    font-size: var(--fs-125);
    font-weight: 700;
    padding: var(--sp-3) var(--sp-8);
}

.tri-panel {
    background: var(--surface);
    border: var(--border-thick) solid var(--structure);
    box-shadow: var(--shadow-hard);
    padding: var(--sp-5);
}

.dark .tri-panel {
    background: var(--dark-surface) !important;
    border-color: var(--structure) !important;
    color: var(--dark-text) !important;
}

.tri-panel--score {
    text-align: center;
    border-left: var(--border-bold) solid var(--brand);
}

.tri-panel--score h2 {
    font-size: var(--fs-200);
    font-weight: var(--fw-display);
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: var(--sp-3);
}

.dark .tri-panel--score h2 {
    color: var(--dark-text) !important;
}

.tri-panel--score p {
    font-size: var(--fs-1125);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--sp-1);
}

.tri-panel--guide #text {
    font-size: var(--fs-125);
    font-weight: 700;
    margin-bottom: var(--sp-2);
}

.tri-panel--guide #explanation {
    font-size: var(--fs-100);
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}

.dark .tri-panel--guide #explanation {
    color: var(--dark-muted) !important;
}

.tri-panel--guide #stats {
    font-size: var(--fs-1125);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-strong);
    margin-bottom: var(--sp-2);
}

#submit {
    font-weight: 700;
    margin-top: var(--sp-2);
}

/* Canvas keeps a light background in both modes: the game draws
   black strokes directly on it. Square ink frame + hard shadow. */
canvas#game {
    display: block;
    margin: var(--sp-5) auto 0;
    background-color: #f4f4f4;
    border: var(--border-heavy) solid var(--structure);
    box-shadow: var(--shadow-hard);
    cursor: crosshair;
    max-width: 100%;
}

/* =====================================================================
   MOCK GENERATOR
   ===================================================================== */
.mock-hero {
    background: var(--surface);
    border: var(--border-thick) solid var(--structure);
    border-left: var(--border-bold) solid var(--brand);
    box-shadow: var(--shadow-hard);
    padding: var(--sp-6);
    margin-bottom: var(--sp-6);
}

.mock-hero__title {
    font-weight: var(--fw-display);
    font-size: var(--fs-250);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-2);
}

.mock-hero__subtitle {
    font-size: var(--fs-100);
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
    max-width: 70ch;
}

.mock-hero__highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-5);
    display: grid;
    gap: var(--sp-2);
}

.mock-hero__highlights li {
    padding-left: var(--sp-5);
    position: relative;
}

.mock-hero__highlights li::before {
    content: "\f00c"; /* fa-check */
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    color: var(--brand);
    font-size: var(--fs-875);
}

.mock-hero__alert {
    margin-bottom: 0;
    box-shadow: none;
}

.dark .mock-hero {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    border-left-color: var(--dark-link);
    color: var(--dark-text);
}

.dark .mock-hero__subtitle {
    color: var(--dark-muted);
}

.dark .mock-hero__highlights li::before {
    color: var(--dark-link);
}

.mock-steps {
    margin-top: 0;
}

.mock-step {
    background: var(--surface);
    border: var(--border-thick) solid var(--structure);
    border-top: var(--border-bold) solid var(--brand);
    box-shadow: var(--shadow-hard);
    height: 100%;
}

.mock-step__counter {
    font-weight: 800;
    color: var(--brand) !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--fs-75);
}

.mock-step__title {
    font-weight: 600;
    font-size: var(--fs-1125);
    margin-top: var(--sp-2);
}

.mock-step__description {
    color: var(--text-muted);
    margin-bottom: 0;
}

.dark .mock-step {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

.dark .mock-step__counter {
    color: var(--dark-link) !important;
}

.dark .mock-step__description {
    color: var(--dark-muted);
}

.mock-panel {
    background: var(--surface);
    border: var(--border-thick) solid var(--structure);
    box-shadow: var(--shadow-hard);
    height: 100%;
}

.mock-panel__title {
    font-weight: 600;
    font-size: var(--fs-1125);
}

.mock-panel__hint {
    color: var(--text-muted);
    margin-bottom: var(--sp-5);
}

.mock-panel__label {
    display: block;
    margin-bottom: var(--sp-1);
}

.mock-form-group {
    margin-bottom: var(--sp-5);
}

.mock-form-group .form-select {
    margin-bottom: 2px;
}

.dark .mock-panel {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
}

.dark .mock-panel__hint {
    color: var(--dark-muted);
}

.mock-selection {
    margin-top: var(--sp-6);
}

#submit-mock {
    width: 100%;
    margin-top: var(--sp-5);
    font-weight: 600;
}

.answer-choice {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dark .answer-choice {
    color: var(--dark-text) !important;
    background-color: var(--dark-surface-2) !important;
    border-color: var(--dark-border) !important;
}

/* ---- Mock runner (generated contest) ---- */
.mock-runner {
    display: flex;
    gap: var(--sp-5);
    align-items: flex-start;
}

.mock-runner__problems {
    flex: 4.25;
    overflow-x: auto;
    min-width: 0;
}

.mock-runner__sidebar {
    flex: 1.1;
    position: sticky;
    top: var(--sp-4);
}

.problem-card {
    border: var(--border-thick) solid var(--structure);
    box-shadow: var(--shadow-hard);
}

.problem-card .card-img-top {
    border: var(--border-thin) solid var(--structure) !important;
    background: #fff;
    height: 100%;
}

.dark .problem-card {
    background: var(--dark-surface);
    color: var(--dark-text);
}

.dark .mock-runner__sidebar {
    background: var(--dark-surface) !important;
    color: var(--dark-text);
}

.mock-answers__title {
    font-weight: 700;
    margin-bottom: var(--sp-3);
}

#timer {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 900 !important;
    font-size: var(--fs-200) !important;
    font-variant-numeric: tabular-nums;
    padding: var(--sp-2) var(--sp-4);
    border: var(--border-thick) solid var(--structure);
    background: var(--brand) !important;
    color: #f4f1ea !important;
    box-shadow: var(--shadow-hard);
    margin-bottom: var(--sp-2);
}

.dark #timer {
    background: var(--brand) !important;
    border-color: var(--structure);
    color: #f4f1ea !important;
}

#dropdowns {
    height: 500px;
    overflow-y: auto;
}

#dropdowns .answer-choice {
    min-height: 44px;
    margin-bottom: 2px;
}

.mock-answer-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
}

.mock-answer-row__num {
    flex: 0.75;
    font-size: var(--fs-1125);
    font-weight: 700;
}

.mock-answer-row .answer-choice {
    flex: 3;
}

#submit-answers-btn {
    width: 100%;
    margin-top: var(--sp-5);
    font-weight: 700;
    min-height: 48px;
}

/* =====================================================================
   RANKINGS TABLES (POTD / Mental Math / Triangulate)
   ===================================================================== */
.gym-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: var(--sp-4) 0 var(--sp-5);
}

.gym-toolbar .btn {
    min-height: 44px;
    font-weight: 700;
    padding-left: var(--sp-5);
    padding-right: var(--sp-5);
}

.lb-wrap {
    overflow-x: auto;
}

.lb-table {
    border: var(--border-thick) solid var(--structure);
    overflow: hidden;
    margin-top: 0;
}

.lb-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--structure);
    color: var(--surface);
    border-bottom: var(--border-thick) solid var(--structure);
    font-size: var(--fs-75);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: var(--sp-3) var(--sp-4);
}

.lb-table tbody td {
    vertical-align: middle;
    padding: var(--sp-3) var(--sp-4);
}

.lb-table tbody tr:nth-of-type(even) > * {
    background-color: rgba(15, 23, 42, 0.025);
}

.lb-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lb-table tbody tr.lb-rank-1 > td:first-child,
.lb-table tbody tr.lb-rank-2 > td:first-child,
.lb-table tbody tr.lb-rank-3 > td:first-child {
    border-left: var(--border-bold) solid transparent;
    font-weight: 800;
}

.lb-table tbody tr.lb-rank-1 > td:first-child { border-left-color: var(--rank-gold); }
.lb-table tbody tr.lb-rank-2 > td:first-child { border-left-color: #9aa3b2; }
.lb-table tbody tr.lb-rank-3 > td:first-child { border-left-color: var(--rank-bronze); }

.lb-empty {
    text-align: center;
    padding: var(--sp-10) var(--sp-4);
    color: var(--text-muted);
}

.lb-empty .lb-empty-icon {
    display: block;
    font-size: var(--fs-200);
    opacity: 0.45;
    margin-bottom: var(--sp-2);
}

.dark .lb-table {
    border-color: var(--structure);
}

.dark .lb-table thead th {
    background: var(--structure);
    color: var(--dark-bg);
    border-bottom-color: var(--structure);
}

.dark .lb-table tbody tr:nth-of-type(even) > * {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.dark .lb-empty {
    color: var(--dark-muted);
}

/* =====================================================================
   RESPONSIVE + MOTION PREFERENCES
   ===================================================================== */
@media (max-width: 991.98px) {
    .gym-hero {
        padding: var(--sp-6);
    }

    .gym-stat__value {
        font-size: var(--fs-150);
    }
}

@media (max-width: 767.98px) {
    .mock-runner {
        flex-direction: column;
    }

    .mock-runner__problems,
    .mock-runner__sidebar {
        flex: 1 1 auto;
        width: 100%;
    }

    .mock-runner__sidebar {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .gym-hero h1 {
        font-size: var(--fs-200);
    }

    .gym-head h1 {
        font-size: var(--fs-150);
    }

    .gym-grid {
        grid-template-columns: 1fr;
    }

    .gym-hero__cta .btn,
    .gym-actions .btn,
    .tri-launch .btn {
        width: 100%;
        justify-content: center;
    }

    #drills.bp-stage #answer {
        font-size: 2em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gym-tile,
    .gym-chip,
    .drill-input,
    .answer-choice {
        transition: none;
    }

    .gym-tile:hover,
    .gym-tile:focus-within {
        transform: none;
    }
}