/*
 * ten-frame — infant subitising / number-bonds tool. One or two 5×2
 * frames, chunky tap/drag counters in two colours, live digit + word
 * readout. Built for 4–8 year olds on the IWB: huge touch targets,
 * instant visual feedback, minimal text.
 */

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

.maths-activity .tf-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 .tf-prompt {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--maths-primary-dark, #1b5e20);
    text-align: center;
    max-width: 640px;
}

/* ---------- Frames ---------- */

.maths-activity .tf-frames {
    --tf-cell: clamp(52px, 9vw, 104px);
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
    touch-action: none;
}

.maths-activity .tf-frames.tf-two-frames {
    --tf-cell: clamp(44px, 6.5vw, 84px);
}

.maths-activity .tf-frame {
    display: grid;
    grid-template-columns: repeat(5, var(--tf-cell));
    grid-auto-rows: var(--tf-cell);
    gap: 6px;
    padding: 10px;
    background: #fff;
    border: 3px solid #37474f;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(20, 40, 80, 0.06);
}

.maths-activity .tf-cell {
    background: #f7fafc;
    border: 2px solid #b0bec5;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.maths-activity .tf-cell:hover { border-color: #78909c; }

.maths-activity .tf-counter {
    width: 78%;
    height: 78%;
    border-radius: 50%;
    box-shadow: inset 0 4px 6px rgba(255, 255, 255, 0.45),
                inset 0 -4px 6px rgba(0, 0, 0, 0.18),
                0 2px 4px rgba(0, 0, 0, 0.2);
}

.maths-activity .tf-counter-red {
    background: radial-gradient(circle at 35% 30%, #ef5350, #c62828);
    border: 3px solid #b71c1c;
}

.maths-activity .tf-counter-yellow {
    background: radial-gradient(circle at 35% 30%, #ffee58, #f9a825);
    border: 3px solid #f57f17;
}

.maths-activity .tf-counter.tf-locked { cursor: default; }
.maths-activity .tf-cell:has(.tf-locked) { cursor: default; }

/* Subitising flash — counters and readout hidden until Reveal */
.maths-activity .tf-flashed .tf-counter { visibility: hidden; }
.maths-activity .tf-flashed .tf-readout { visibility: hidden; }

.maths-activity .tf-reveal-btn {
    background: var(--maths-primary, #2E7D32);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0.8rem 1.8rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    cursor: pointer;
}

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

/* ---------- Live count readout ---------- */

.maths-activity .tf-readout {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-family: 'Nunito', sans-serif;
    font-variant-numeric: tabular-nums;
}

.maths-activity .tf-count-digit {
    font-weight: 800;
    font-size: 3.25rem;
    line-height: 1;
    color: var(--maths-ink, #1F2933);
}

.maths-activity .tf-count-word {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--maths-text-muted, #6b7280);
}

/* ---------- Counter tray ---------- */

.maths-activity .tf-tray {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--maths-border, #e0e7ef);
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
}

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

.maths-activity .tf-pot {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 3px dashed #b0bec5;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    padding: 0;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.maths-activity .tf-pot.is-active {
    border: 4px solid var(--maths-primary, #2E7D32);
    background: #e8f5e9;
}

.maths-activity .tf-pot-counter {
    width: 70%;
    height: 70%;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.45),
                inset 0 -3px 5px rgba(0, 0, 0, 0.18);
}

.maths-activity .tf-pot-red .tf-pot-counter {
    background: radial-gradient(circle at 35% 30%, #ef5350, #c62828);
    border: 3px solid #b71c1c;
}

.maths-activity .tf-pot-yellow .tf-pot-counter {
    background: radial-gradient(circle at 35% 30%, #ffee58, #f9a825);
    border: 3px solid #f57f17;
}

/* Floating counter that follows the finger during a drag */
.tf-ghost {
    position: fixed;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 999;
    opacity: 0.9;
}

.tf-ghost.tf-counter-red {
    background: radial-gradient(circle at 35% 30%, #ef5350, #c62828);
    border: 3px solid #b71c1c;
}

.tf-ghost.tf-counter-yellow {
    background: radial-gradient(circle at 35% 30%, #ffee58, #f9a825);
    border: 3px solid #f57f17;
}

/* ---------- Check + feedback ---------- */

.maths-activity .tf-check-btn {
    background: var(--maths-primary, #2E7D32);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0.8rem 2rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    cursor: pointer;
}

.maths-activity .tf-check-btn:hover { filter: brightness(1.08); }
.maths-activity .tf-check-btn.is-correct { background: #1b5e20; }
.maths-activity .tf-check-btn.is-miss { background: #ef6c00; }

.maths-activity .tf-feedback {
    border-radius: 14px;
    padding: 0.875rem 1.25rem;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.maths-activity .tf-feedback.tf-correct {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px solid #66bb6a;
}

.maths-activity .tf-feedback.tf-miss {
    background: #fff8e1;
    color: #8d4e0b;
    border: 1px solid #f0c14b;
}

.maths-activity .tf-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;
}

/* ---------- Display mode ----------
 * Non-interactive teaching surface: show the frames + readout only.
 * The Reveal button stays — it ends a subitising flash. Tray, Check,
 * feedback and the challenge runner are hidden; cells don't invite taps.
 */
body.display-mode .tf-tray,
body.display-mode .tf-check-row,
body.display-mode .tf-feedback,
body.display-mode .tf-prompt,
body.display-mode #challengeRunner { display: none !important; }

body.display-mode .tf-cell { cursor: default; }
body.display-mode .tf-cell:hover { border-color: #b0bec5; }

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

body.display-mode .tf-frames {
    --tf-cell: clamp(40px, 6vw, 72px);
}

body.display-mode .tf-frames.tf-two-frames {
    --tf-cell: clamp(34px, 4.5vw, 60px);
}

body.display-mode .tf-count-digit { font-size: 2.25rem; }
body.display-mode .tf-count-word { font-size: 1.15rem; }