/*
 * fact-race — timed mental-fluency widget. Configurable deck of
 * facts (question + answer + optional distractors); pupil races to
 * answer as many as possible in `timeSeconds`. Personal best stored
 * per session — no public ranking (auto-memory rule on game widgets).
 * Pattern source: MFL flashcards (race mode).
 */

.maths-activity [hidden] { display: none !important; }

/* ---------- Start screen ---------- */

.maths-activity .fr-start {
    background: #fffaf0;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 14px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(20, 40, 80, 0.05);
    margin-bottom: 1rem;
}

.maths-activity .fr-start-icon {
    font-size: 3rem;
    color: var(--maths-primary, #2E7D32);
    margin-bottom: 0.5rem;
}

.maths-activity .fr-start-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    color: var(--maths-primary-dark, #1b5e20);
    margin-bottom: 0.5rem;
}

.maths-activity .fr-start-text {
    color: var(--maths-text, #1f2937);
    font-weight: 600;
    margin-bottom: 1rem;
}

.maths-activity .fr-start-meta {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.maths-activity .fr-start-meta-item {
    background: #fff8e1;
    border: 1px solid #f0c14b;
    border-radius: 999px;
    padding: 0.35rem 0.875rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    color: #4e342e;
    font-variant-numeric: tabular-nums;
}

.maths-activity .fr-start-btn { font-size: 1.15rem; padding: 0.75rem 1.75rem; }

/* ---------- Race screen ---------- */

.maths-activity .fr-race {
    background: #fffaf0;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 10px rgba(20, 40, 80, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.maths-activity .fr-status-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.maths-activity .fr-score {
    background: #fff;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 12px;
    padding: 0.5rem 0.875rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: 'Nunito', sans-serif;
    min-width: 110px;
}

.maths-activity .fr-score-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--maths-text-muted, #6b7280);
}

.maths-activity .fr-score-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--maths-primary-dark, #1b5e20);
    font-variant-numeric: tabular-nums;
}

.maths-activity .fr-time-value.fr-time-low { color: #c62828; }

.maths-activity .fr-question {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(2.25rem, 6vw, 4rem);
    color: var(--maths-ink, #1F2933);
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: #fff;
    border: 2px solid var(--maths-primary, #2E7D32);
    border-radius: 14px;
    padding: 1rem 2rem;
    min-width: 200px;
    box-shadow: 0 2px 10px rgba(20, 40, 80, 0.06);
}

.maths-activity .fr-answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 180px));
    gap: 0.625rem;
}

.maths-activity .fr-answer {
    background: #fff;
    border: 2px solid #cfd8dc;
    border-radius: 12px;
    padding: 0.875rem 1.25rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--maths-ink, #1F2933);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: background-color 100ms, border-color 100ms, transform 100ms;
}

.maths-activity .fr-answer:hover { background: #fff8e1; border-color: #f0c14b; }
.maths-activity .fr-answer.fr-right { background: #e8f5e9; border-color: #2E7D32; transform: scale(0.97); }
.maths-activity .fr-answer.fr-wrong {
    background: #ffebee; border-color: #c62828;
    animation: fr-shake 0.35s ease-in-out;
}

@keyframes fr-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    80% { transform: translateX(-3px); }
}

.maths-activity .fr-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.maths-activity .fr-input {
    width: min(320px, 80vw);
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--maths-primary, #2E7D32);
    border-radius: 12px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 2.75rem;
    line-height: 1.15;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.maths-activity .fr-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2); }

.maths-activity .fr-input.fr-wrong {
    background: #ffebee; border-color: #c62828;
    animation: fr-shake 0.35s ease-in-out;
}

.maths-activity .fr-submit-btn {
    background: var(--maths-primary, #2E7D32);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.625rem 1.25rem;
    font-weight: 800;
    cursor: pointer;
}

/* ---------- Number pad (IWB / touch) ---------- */

.maths-activity .fr-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

.maths-activity .fr-key {
    background: #fff;
    border: 2px solid #cfd8dc;
    border-radius: 12px;
    padding: 0.75rem 0;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    color: var(--maths-ink, #1F2933);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background-color 100ms, border-color 100ms, transform 80ms;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.maths-activity .fr-key:hover { background: #fff8e1; border-color: #f0c14b; }
.maths-activity .fr-key:active { transform: scale(0.94); }
.maths-activity .fr-key-back { color: #c62828; }
.maths-activity .fr-key-enter {
    background: var(--maths-primary, #2E7D32);
    border-color: var(--maths-primary, #2E7D32);
    color: #fff;
}
.maths-activity .fr-key-enter:hover {
    background: var(--maths-primary-dark, #1b5e20);
    border-color: var(--maths-primary-dark, #1b5e20);
}

/* ---------- Result screen ---------- */

.maths-activity .fr-result {
    background: #fffaf0;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 14px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(20, 40, 80, 0.05);
    margin-bottom: 1rem;
}

.maths-activity .fr-result-icon { font-size: 3rem; color: #f9a825; margin-bottom: 0.5rem; }

.maths-activity .fr-result-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    color: var(--maths-primary-dark, #1b5e20);
    margin-bottom: 1rem;
}

.maths-activity .fr-result-stats {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.maths-activity .fr-result-stat {
    background: #fff;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 12px;
    padding: 0.625rem 1rem;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.maths-activity .fr-result-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--maths-text-muted, #6b7280);
}

.maths-activity .fr-result-value {
    font-family: 'Nunito', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--maths-primary-dark, #1b5e20);
    font-variant-numeric: tabular-nums;
}

.maths-activity .fr-result-text {
    color: var(--maths-text, #1f2937);
    font-weight: 600;
    margin-bottom: 1rem;
}

.maths-activity .fr-restart-btn { background: var(--maths-primary, #2E7D32); color: #fff; border: none; border-radius: 10px; padding: 0.625rem 1.5rem; font-weight: 800; cursor: pointer; }

/* ---------- Mode chip + your-turn ---------- */

.maths-activity .fr-mode-chip {
    display: inline-block;
    background: var(--maths-primary, #2E7D32);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    margin-top: 0.25rem;
}

.maths-activity .fr-your-turn {
    margin-top: 1.25rem;
    background: #f1f8e9;
    border: 1px solid #aed581;
    border-radius: 14px;
    padding: 1rem 1.25rem;
}

.maths-activity .fr-your-turn-label {
    font-weight: 800;
    color: #33691e;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.maths-activity .fr-your-turn-list { margin: 0; padding-left: 1.25rem; color: #1f2937; font-weight: 600; }
.maths-activity .fr-your-turn-list li { margin-bottom: 0.25rem; }

/* Display mode — show first card frozen, hide all controls */
body.display-mode .activity-header .controls-container,
body.display-mode .fr-status-row,
body.display-mode .fr-input-row,
body.display-mode .fr-numpad,
body.display-mode .fr-your-turn { display: none !important; }
body.display-mode .fr-answer { cursor: default; pointer-events: none; }