/* ==========================================================================
   Math Stars theme + the selectors only this game uses.

   Loaded after game-core.css. Redefining the identity tokens here also
   re-points the legacy --ss-* aliases, since custom properties resolve at
   use time.
   ========================================================================== */

:root {
    --game-accent: #1565C0;
    --game-accent-light: #42A5F5;
    --game-highlight: #D4A017;
}

/* ---------- Problem display ---------- */
.ms-problem {
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    margin: 0.5rem 0 1rem;
    letter-spacing: 0.02em;
}

.ms-problem-prompt {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--game-muted);
    margin-bottom: 0.75rem;
}

/* The vertical algorithm, the way it's written on paper. */
.ms-stacked {
    display: inline-block;
    text-align: right;
    font-variant-numeric: tabular-nums;
    min-width: 5ch;
}

.ms-stacked-row { padding: 0 0.25rem; }

.ms-stacked-op {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
}

.ms-op { color: var(--game-highlight); }

.ms-stacked-rule {
    border-bottom: 4px solid var(--game-text);
    margin-top: 0.35rem;
    height: 0;
}

/* ---------- Fractions ---------- */
/* Rendered as a real stacked fraction; the spoken form sits beside it in a
   visually-hidden span so a screen reader says "three fourths". */
.ms-frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 0.15em;
    font-size: 0.72em;
    line-height: 1.05;
}

.ms-frac-num, .ms-frac-den { padding: 0 0.15em; }

.ms-frac-bar {
    display: block;
    width: 100%;
    min-width: 1.1em;
    border-bottom: 3px solid currentColor;
    margin: 0.08em 0;
}

/* ---------- Counting objects ---------- */
.ms-objects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.9rem;
    color: var(--game-highlight);
    margin: 0.5rem auto 0;
    max-width: 320px;
}

/* Ten-frame: two rows of five, the standard early-years arrangement. */
.ms-objects-tenframe {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem;
    max-width: 260px;
}

.ms-objects-tenframe i {
    border: 2px solid var(--game-border);
    border-radius: 8px;
    padding: 0.35rem 0;
}

.ms-objects-scatter i:nth-child(odd)  { transform: translateY(-6px) rotate(-8deg); }
.ms-objects-scatter i:nth-child(even) { transform: translateY(5px) rotate(7deg); }

/* ---------- Answer entry ---------- */
.ms-answer-preview {
    min-height: 2.4rem;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--game-highlight);
}

.ms-answer-input {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* The numeric pad is a 4-wide grid, so its keys shouldn't stretch the way the
   10-wide QWERTY row does. */
.ss-keyboard .kb-row .kb-key { max-width: 84px; }

/* Operator keys, shown only when the answer IS a sign ("8 ? 3 = 5"). The glyphs
   are small at body size and are the entire answer, so they get more room and
   weight than a digit. */
.ss-keyboard .kb-row .kb-key-op {
    max-width: 96px;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--game-highlight);
}

/* ---------- Speed Round countdown ---------- */
.ms-countdown {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--game-muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.25rem;
}

.ms-countdown-urgent {
    color: var(--game-accent-light);
    animation: ms-pulse 0.6s ease-in-out infinite;
}

@keyframes ms-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

/* An option removed by the 50/50 hint. */
.mc-option.mc-eliminated {
    opacity: 0.25;
    text-decoration: line-through;
}

@media (prefers-reduced-motion: reduce) {
    .ms-countdown-urgent { animation: none; }
    .ms-objects-scatter i { transform: none; }
}