/*
 * Coding Ireland proprietary interactive activity
 * Copyright (c) 2017-2026 Coding Ireland. All rights reserved.
 *
 * Part of the Coding Ireland online learning platform. Licensed for use only
 * as delivered on the platform. Copying, redistributing, or adapting this
 * file, in whole or in part, for use in any other product or service is not
 * permitted. Ref: CI-maths-estimation-game
 */
/*
 * estimation-game — digital version of the `estimation-jar` paper
 * activity. Show a stimulus (count of dots, length bar, capacity
 * fill, weight bar), pupils enter an estimate, reveal actual,
 * compute closeness score. Multi-round play.
 */

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

.maths-activity .eg-stage {
    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 .eg-round-meta {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 560px;
}

.maths-activity .eg-round-counter {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--maths-text-muted, #6b7280);
    background: #fff;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 999px;
    padding: 0.25rem 0.625rem;
}

.maths-activity .eg-round-question {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    color: var(--maths-primary-dark, #1b5e20);
    font-size: 1.1rem;
}

.maths-activity .eg-stimulus-wrap {
    width: 100%;
    max-width: 600px;
    background: #fff;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 2px 8px rgba(20, 40, 80, 0.04);
}

.maths-activity .eg-stimulus {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 350px;
    aspect-ratio: 600 / 320;
    display: block;
    margin: 0 auto;
}

.maths-activity .eg-stimulus .eg-dot {
    fill: #2e7d32;
    stroke: #1b5e20;
    stroke-width: 1;
}

.maths-activity .eg-stimulus .eg-bar {
    fill: #1565c0;
    stroke: #0d47a1;
    stroke-width: 1.5;
    rx: 4;
}

.maths-activity .eg-stimulus .eg-jug-body {
    fill: #ffffff;
    stroke: #4e342e;
    stroke-width: 2;
}

.maths-activity .eg-stimulus .eg-jug-liquid {
    fill: #4fc3f7;
    fill-opacity: 0.75;
}

.maths-activity .eg-stimulus .eg-bar-reference {
    fill: #1565c0;
    fill-opacity: 0.35;
    stroke: #0d47a1;
    stroke-opacity: 0.55;
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.maths-activity .eg-stimulus .eg-jug-reference-body {
    fill: #ffffff;
    stroke: #4e342e;
    stroke-opacity: 0.55;
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
}

.maths-activity .eg-stimulus .eg-jug-reference-liquid {
    fill: #4fc3f7;
    fill-opacity: 0.4;
}

.maths-activity .eg-stimulus .eg-reference-label {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 14px;
    fill: var(--maths-text-muted, #6b7280);
    dominant-baseline: middle;
}

.maths-activity .eg-stimulus .eg-emoji-text {
    font-family: 'Nunito', sans-serif;
    font-size: 36px;
    text-anchor: middle;
    dominant-baseline: middle;
}

.maths-activity .eg-stimulus .eg-mystery-text {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    fill: var(--maths-primary-dark, #1b5e20);
    text-anchor: middle;
    dominant-baseline: middle;
}

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

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

.maths-activity .eg-input {
    width: 110px;
    padding: 0.55rem 0.75rem;
    border: 2px solid var(--maths-border, #e0e7ef);
    border-radius: 10px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.maths-activity .eg-input:focus {
    outline: none;
    border-color: var(--maths-primary, #2E7D32);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.18);
}

.maths-activity .eg-unit {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    color: var(--maths-text-muted, #6b7280);
}

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

.maths-activity .eg-reveal-btn:hover { filter: brightness(1.08); }

.maths-activity .eg-result {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border: 2px solid var(--maths-primary, #2E7D32);
    border-radius: 14px;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.maths-activity .eg-result-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.maths-activity .eg-result-cell {
    background: #fffaf0;
    border-radius: 10px;
    padding: 0.5rem 0.625rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

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

.maths-activity .eg-result-value {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--maths-ink, #1F2933);
    font-variant-numeric: tabular-nums;
}

.maths-activity .eg-result-value.eg-actual { color: #d84315; }
.maths-activity .eg-result-value.eg-score { color: var(--maths-primary-dark, #1b5e20); }

.maths-activity .eg-next-btn {
    align-self: center;
}

.maths-activity .eg-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 .eg-callout {
    border-radius: 14px;
    padding: 1rem 1.125rem;
    margin-top: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.maths-activity .eg-callout.success { background: #e8f5e9; color: #1b5e20; border: 1px solid #66bb6a; }
.maths-activity .eg-callout.miss { background: #fff8e1; color: #8d4e0b; border: 1px solid #f0c14b; }

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

.maths-activity .eg-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 .eg-your-turn-list { margin: 0; padding-left: 1.25rem; color: #1f2937; font-weight: 600; }
.maths-activity .eg-your-turn-list li { margin-bottom: 0.25rem; }

/* Display mode — show the stimulus + a worked result (estimate / actual /
 * closeness). Hide the input row, Next button, transient callout and
 * challenge runner. Tighten the stimulus and result cards so a worked
 * round fits compactly. Your-turn prompts stay — those are
 * display-only discussion prompts.
 */
body.display-mode .eg-input-row,
body.display-mode .eg-next-btn,
body.display-mode .eg-callout,
body.display-mode #challengeRunner { display: none !important; }

body.display-mode .eg-stage {
    padding: 0.85rem;
    gap: 0.7rem;
    margin-bottom: 0.75rem;
}

body.display-mode .eg-stimulus-wrap {
    padding: 0.4rem;
}

body.display-mode .eg-stimulus {
    max-height: 220px;
}

body.display-mode .eg-result {
    padding: 0.6rem 0.85rem;
    gap: 0.4rem;
}

body.display-mode .eg-result-cell {
    padding: 0.4rem 0.5rem;
}

body.display-mode .eg-result-value {
    font-size: 1.25rem;
}