/* =============================================
   Times Tables — the drill.
   A worksheet page, not a lesson: big numbers, wide targets, and a whole
   set visible at once so a child builds a rhythm down the page.
   ============================================= */

/* ===== the list of levels ===== */
.tt-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.5rem;
    margin-bottom: 1.4rem;
}
.tt-stat { display: flex; align-items: baseline; gap: 0.4rem; }
.tt-stat b {
    font-family: var(--font-main); font-weight: 900; font-size: 1.5rem; color: var(--dark);
}
.tt-stat span { font-family: var(--font-body); font-size: 0.85rem; color: var(--gray); }

/* ===== the group tiles ===== */
.tt-tiles { display: flex; flex-direction: column; gap: 1.1rem; }

.tt-tile {
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--shadow-sm);
}
.tt-tile-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; }
.tt-tile-emoji { font-size: 2rem; line-height: 1; }
.tt-tile-kicker {
    display: block; font-family: var(--font-main); font-weight: 800; font-size: 0.68rem;
    color: var(--purple); text-transform: uppercase; letter-spacing: 0.6px;
}
.tt-tile-title {
    font-family: var(--font-main); font-weight: 800; font-size: 1.25rem;
    color: var(--dark); margin: 0; line-height: 1.25;
}
.tt-tile-meta {
    display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
    font-family: var(--font-body); font-size: 0.82rem; color: var(--gray);
    padding-bottom: 0.8rem; margin-bottom: 0.4rem;
    border-bottom: 1.5px solid var(--border);
}
.tt-tile-meta .tt-bar { flex: 1; min-width: 6rem; }

/* The levels are a list to scan, not a grid of cards to wade through. Two
   columns once there are enough that one column would run off the screen. */
.tt-item-list { list-style: none; margin: 0; padding: 0; }
@media (min-width: 620px) {
    .tt-item-list { columns: 2; column-gap: 1.4rem; }
    .tt-item-list li { break-inside: avoid; }
}
.tt-item-list a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.2rem 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: var(--transition);
}
.tt-item-list a:hover { background: var(--purple-light); }
.tt-item-list a:focus-visible { outline: 3px solid rgba(108,99,255,0.5); outline-offset: 1px; }
.tt-item-emoji { font-size: 1.2rem; line-height: 1; grid-row: span 2; }
.tt-item-title {
    font-family: var(--font-main); font-weight: 700; font-size: 0.95rem;
    color: var(--purple);
}
.tt-item-meta {
    grid-column: 2; font-family: var(--font-body); font-size: 0.75rem; color: var(--gray);
}
.tt-item-mark {
    grid-row: span 2; font-family: var(--font-main); font-weight: 900;
    font-size: 1rem; color: var(--light-gray); width: 1rem; text-align: center;
}
.tt-item-list .is-done .tt-item-mark { color: var(--green); }
.tt-item-list .is-done .tt-item-title { color: var(--gray); }

/* ===== a set of questions ===== */
.tt-setbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem;
}
.tt-back {
    font-family: var(--font-main); font-weight: 700; font-size: 0.85rem;
    color: var(--purple); text-decoration: none;
}
.tt-pages { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tt-dot {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 0.35rem;
    border: 2px solid var(--border); border-radius: 8px;
    background: var(--white); text-decoration: none;
    font-family: var(--font-main); font-weight: 700; font-size: 0.8rem; color: var(--gray);
    transition: var(--transition);
}
.tt-dot.is-done { background: var(--mint); border-color: var(--mint); color: #0b6b4f; }
.tt-dot.is-here { background: var(--purple); border-color: var(--purple); color: var(--white); }

.tt-mode {
    font-family: var(--font-main); font-weight: 700; font-size: 0.9rem;
    padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); margin-bottom: 1rem;
}
.tt-mode-pick { background: var(--purple-light); color: var(--purple-dark); }
.tt-mode-skip { background: #e6f9f5; color: #0b6b4f; }
.tt-mode-back { background: #fdecef; color: #9b2242; }

/* ===== the skip-counting ladder ===== */
.tt-chain-intro {
    font-family: var(--font-body); font-size: 0.95rem; color: var(--gray);
    margin-bottom: 0.9rem;
}
.tt-chain-intro b { color: var(--dark); }
.tt-chain {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    background: var(--white); border: 2px solid var(--border);
    border-radius: var(--radius); padding: 1rem; margin-bottom: 1.1rem;
}
.tt-rung {
    display: inline-flex; flex-direction: column; align-items: center;
    justify-content: center; min-width: 3.6rem; padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-main); font-weight: 800; font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}
/* The rungs already counted read as solid ground to step off; the gaps are
   the work, so they get the white box and the colour. */
.tt-rung.is-given { background: var(--bg); color: var(--gray); }
.tt-rung.is-blank { padding: 0; }
.tt-rung-input { width: 4.2rem; }
.tt-rung.is-right .tt-rung-input { border-color: var(--green); background: #f2fdf8; }
.tt-rung.is-wrong .tt-rung-input { border-color: var(--coral); background: #fff5f5; }
.tt-rung-answer {
    font-family: var(--font-main); font-weight: 800; font-size: 0.8rem;
    color: var(--green); padding-top: 0.2rem;
}
.tt-rung-link { color: var(--light-gray); font-weight: 700; }
/* The jump between rungs is labelled on a count-back chain, so the
   repeated subtraction is visible rather than implied. */
.tt-rung-link.is-minus {
    font-family: var(--font-main); font-weight: 800; font-size: 0.78rem;
    color: var(--coral); white-space: nowrap;
}
.tt-mode-type { background: #fff4e0; color: #9a5b00; }

.tt-list {
    list-style: none; margin: 0 0 1.1rem; padding: 0;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.tt-q {
    display: grid;
    grid-template-columns: auto minmax(5.5rem, auto) 1fr auto;
    align-items: center;
    gap: 0.75rem;
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem;
}
.tt-q-right { border-color: var(--green); background: #f2fdf8; }
.tt-q-wrong { border-color: var(--coral); background: #fff5f5; }

.tt-q-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--dark); color: var(--white);
    font-family: var(--font-main); font-weight: 700; font-size: 0.78rem;
}
.tt-q-prompt {
    font-family: var(--font-main); font-weight: 800; font-size: 1.25rem;
    color: var(--dark); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.tt-q-mark {
    font-family: var(--font-main); font-weight: 900; font-size: 1.2rem;
    width: 1.2rem; text-align: center; color: var(--light-gray);
}
.tt-q-right .tt-q-mark { color: var(--green); }
.tt-q-wrong .tt-q-mark { color: var(--coral); }

.tt-q-help {
    grid-column: 1 / -1;
    font-family: var(--font-body); font-size: 0.85rem; color: var(--gray);
    line-height: 1.45; padding-top: 0.15rem;
}
.tt-q-help b { color: var(--dark); }

/* pick */
.tt-options { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tt-option {
    min-width: 64px; padding: 0.5rem 0.75rem;
    border: 2px solid var(--border); border-radius: var(--radius-sm);
    background: var(--white); cursor: pointer;
    font-family: var(--font-main); font-weight: 800; font-size: 1.05rem;
    color: var(--dark); font-variant-numeric: tabular-nums;
    transition: var(--transition);
}
.tt-option:hover:not(:disabled) { border-color: var(--purple); transform: translateY(-1px); }
.tt-option.is-chosen { background: var(--purple); border-color: var(--purple); color: var(--white); }
.tt-option.is-wrong { background: var(--coral); border-color: var(--coral); color: var(--white); }
.tt-option.is-answer { background: var(--green); border-color: var(--green); color: var(--white); }
.tt-option:disabled { cursor: default; }

/* type */
.tt-input {
    width: 7rem; padding: 0.5rem 0.7rem;
    border: 2px solid var(--border); border-radius: var(--radius-sm);
    background: var(--white); color: var(--dark);
    font-family: var(--font-main); font-weight: 800; font-size: 1.15rem;
    text-align: center; font-variant-numeric: tabular-nums;
    transition: var(--transition);
}
.tt-input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px var(--purple-light); }

/* ===== Fractions =====
   A drill that prints "1/2" makes a child parse the sum before they can start
   it. Stacked, the size of the piece is the first thing they see. */
.tt-frac {
    display: inline-flex; flex-direction: column; align-items: center;
    vertical-align: middle; line-height: 1.05; margin: 0 0.12em;
    font-variant-numeric: tabular-nums;
}
.tt-frac-n { border-bottom: 2px solid currentColor; padding: 0 0.22em 1px; }
.tt-frac-d { padding: 1px 0.22em 0; }
.tt-input-frac { font-variant-numeric: normal; }

/* The equivalence ladder: the bottoms are printed, the tops are the work, so
   each blank rung is an input sitting where a numerator goes. */
.tt-chain-equiv .tt-rung { min-width: 0; padding: 0.4rem 0.5rem; }
.tt-chain-equiv .tt-rung.is-blank { background: none; padding: 0.2rem 0.3rem; }
.tt-chain-equiv .tt-frac-n { border-bottom-width: 2px; padding-bottom: 3px; }
.tt-chain-equiv .tt-rung-input {
    width: 3rem; padding: 0.25rem 0.2rem; font-size: 1rem; margin-bottom: 3px;
}
.tt-chain-equiv .tt-frac { margin: 0; }
/* Second pass: the rung is two boxes, one over the other, so it still reads as
   a fraction while both halves are being asked for. */
/* The bar has to sit clear of both boxes, or two inputs in a column just look
   like two inputs in a column rather than a fraction. */
.tt-chain-equiv .tt-rung.is-pair .tt-frac-n {
    border-bottom: 2.5px solid var(--dark); padding: 0 0.35em 5px;
}
.tt-chain-equiv .tt-rung.is-pair .tt-frac-d { padding: 5px 0.35em 0; }
.tt-chain-equiv .tt-rung.is-pair .tt-rung-input { margin-bottom: 0; }

.tt-rung-link.is-equals {
    font-family: var(--font-main); font-weight: 800; font-size: 1.1rem;
    color: var(--light-gray);
}
.tt-chain-intro .tt-frac { font-size: 0.95rem; color: var(--dark); font-weight: 800; }

/* ===== check / result ===== */
.tt-btn {
    display: inline-block; cursor: pointer; text-decoration: none; text-align: center;
    font-family: var(--font-main); font-weight: 800; font-size: 0.95rem;
    padding: 0.7rem 1.3rem; border: none; border-radius: var(--radius-sm);
    background: var(--purple); color: var(--white); transition: var(--transition);
}
.tt-btn:hover:not(:disabled) { background: var(--purple-dark); }
.tt-btn:disabled { opacity: 0.45; cursor: default; }
.tt-btn-ghost { background: var(--bg); color: var(--gray); }
.tt-btn-ghost:hover { background: var(--border); color: var(--dark); }

.tt-check-row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.tt-check-hint { font-family: var(--font-body); font-size: 0.85rem; color: var(--gray); }

.tt-result {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--white); border: 2px solid var(--border);
    border-radius: var(--radius); padding: 1rem 1.2rem;
}
.tt-result.is-perfect { border-color: var(--green); background: #f2fdf8; }
.tt-result.is-perfect .tt-score { color: var(--green); }

/* ===== a clean page ===== */
.tt-cheer {
    font-size: 1.8rem; line-height: 1;
    animation: tt-cheer-pop 520ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
@keyframes tt-cheer-pop {
    0%   { transform: scale(0) rotate(-25deg); }
    60%  { transform: scale(1.25) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.tt-confetti {
    position: fixed; inset: 0;
    pointer-events: none;   /* never stands between a child and the next page */
    overflow: hidden;
    z-index: 200;
}
.tt-confetti i {
    position: absolute;
    width: 9px; height: 13px; margin: -6px 0 0 -4px;
    border-radius: 2px;
    animation: tt-confetti-fly 1200ms cubic-bezier(0.25, 0.7, 0.35, 1) var(--delay, 0ms) both;
}
.tt-confetti i.is-round { width: 9px; height: 9px; border-radius: 50%; }

/* Up and out first, then falling past where it started — a burst rather than
   a curtain, so it reads as coming from the score. */
@keyframes tt-confetti-fly {
    0%   { transform: translate(0, 0) rotate(0deg) scale(0.5); opacity: 1; }
    35%  { transform: translate(calc(var(--dx) * 0.55), var(--up)) rotate(calc(var(--rot) * 0.4)) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    /* The JS skips the confetti entirely; this covers the badge. */
    .tt-cheer { animation: none; }
}
.tt-score {
    font-family: var(--font-main); font-weight: 900; font-size: 1.6rem; color: var(--dark);
    font-variant-numeric: tabular-nums;
}
.tt-result-msg { font-family: var(--font-body); color: var(--gray); flex: 1; min-width: 12rem; }
.tt-result-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ===== level summary ===== */
.tt-done {
    background: var(--white); border: 2px solid var(--border);
    border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center;
}
.tt-done-emoji { font-size: 3rem; line-height: 1; }
.tt-done h2 {
    font-family: var(--font-main); font-weight: 800; font-size: 1.5rem;
    color: var(--dark); margin: 0.4rem 0 0.2rem;
}
.tt-done-score { font-family: var(--font-body); color: var(--gray); margin: 0 0 1rem; }
.tt-done-weak {
    font-family: var(--font-body); font-size: 0.9rem; color: var(--dark);
    background: var(--bg); border-radius: var(--radius-sm);
    padding: 0.8rem 1rem; margin-bottom: 1.2rem; line-height: 1.6;
}
.tt-done-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 600px) {
    .tt-q { grid-template-columns: auto auto 1fr auto; gap: 0.5rem; row-gap: 0.5rem; }
    .tt-q-prompt { font-size: 1.1rem; }
    /* A typed answer is two or three digits, so the box stays beside the
       question. Letting it fill the row made each question tall enough that
       only four of the six fitted on a phone screen, which defeats the point
       of putting a whole page up at once. */
    .tt-input { width: 100%; max-width: 6rem; font-size: 1.05rem; }
    /* The ladder wraps onto several lines on a phone; keep the rungs small
       enough that a run of them still reads as one chain. */
    .tt-chain { padding: 0.7rem; gap: 0.3rem; }
    .tt-rung { min-width: 2.9rem; padding: 0.4rem 0.35rem; font-size: 1rem; }
    .tt-rung-input { width: 3.4rem; }
    .tt-chain-equiv .tt-rung-input { width: 2.5rem; font-size: 0.95rem; }
    .tt-chain-equiv .tt-rung { padding: 0.3rem 0.3rem; font-size: 0.95rem; }
    .tt-chain-equiv .tt-rung.is-pair .tt-rung-input { width: 2.3rem; }
    .tt-rung-link { font-size: 0.8rem; }
    /* Four options genuinely do need the full width, so those drop to a row
       of their own. */
    .tt-options { grid-column: 1 / -1; }
    .tt-option { flex: 1; min-width: 58px; padding: 0.5rem 0.4rem; }
}