/* ==========================================================================
   NUMBER ADVENTURES
   Layout for the four question types. Shared chrome (screens, top bar, score
   pill, chips, answer buttons, settings, confetti) lives in kids-common.css.
   ========================================================================= */

/* Each mode gets its own colour so a child recognises which game they picked
   before they can read its name. */
.game-btn.mode-count { background: #7f77dd; }
.game-btn.mode-add { background: #1d9e75; }
.game-btn.mode-missing { background: #e08a2e; }
.game-btn.mode-compare { background: #3f8ecc; }
/* The two for older children. Their own colours rather than falling back to
   the default, which is the same purple as "Count them" — two buttons at
   opposite ends of the menu looking identical is exactly the sort of thing a
   child reads as "I have already done that one". */
.game-btn.mode-times { background: #b0508f; }
.game-btn.mode-share { background: #3c8f8a; }

#scr-play {
  align-items: stretch;
}

/* ===================== Count / add ===================== */

/* A soft panel behind whatever is being counted, so the things to count read as
   one group on a tray rather than as marks floating on the page. */
.tray {
  background: var(--kids-card);
  border: 3px solid #efe9e0;
  border-radius: 24px;
  padding: 18px 14px;
  width: 100%;
  max-width: 440px;
}

/* A grid rather than a wrapping flex row, and never more than five to a row.
   Left to wrap freely, seventeen apples come out as a ragged block that has to
   be counted one at a time; in rows of five a child can see three full rows and
   two over, which is how the counting is taught in the first place. The column
   count is set from JS, because it is min(5, howMany) and CSS cannot express
   that against a runtime value.

   The 34px floor is the point below which counting stops being comfortable for
   the children this is for; .dense drops it only once there are enough items
   that fitting them matters more. */
.count-stage,
.sum-group {
  display: grid;
  justify-content: center;
  align-content: center;
  justify-items: center;
  gap: 6px 10px;
  line-height: 1.1;
}

.count-stage {
  font-size: clamp(34px, 12vw, 58px);
}

.count-stage.dense {
  font-size: clamp(28px, 8.5vw, 42px);
}

/* The two groups stack, with the operator between them, rather than sitting
   side by side. Side by side looks more like a written sum, but two groups of
   up to ten in rows of five will not fit across a 390px phone: they either
   overflow the tray or have to shrink past the point where the pictures can be
   counted. Stacked, each group gets the full width and the whole thing stays
   one screen high even at 10 + 10. */
.sum-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.sum-group {
  font-size: clamp(26px, 8vw, 40px);
}

.sum-group.dense {
  font-size: clamp(22px, 6.5vw, 34px);
}

/* The group being taken away is greyed rather than removed, so "take away" is
   something a child can see happening instead of having to imagine it. */
.sum-group.gone .item {
  opacity: 0.28;
  text-decoration: line-through;
}

.sum-op {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--kids-ink-soft);
  flex-shrink: 0;
  line-height: 1;
}

/* ===================== Sums written in figures =====================
   Used for times tables, sharing out, and for adding once the numbers are too
   big to draw. One line, sized to fill the tray, so it reads as a sum rather
   than as a sentence. */
.figure-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2.5vw, 14px);
  flex-wrap: nowrap;
}

.figure-num,
.figure-op,
.figure-unknown {
  font-weight: 900;
  line-height: 1;
}

.figure-num {
  font-size: clamp(34px, 11vw, 58px);
  color: var(--kids-ink);
}

.figure-op {
  font-size: clamp(26px, 8vw, 44px);
  color: var(--kids-ink-soft);
}

/* The gap the child is filling, marked out rather than left as another digit */
.figure-unknown {
  font-size: clamp(34px, 11vw, 58px);
  color: var(--kids-lilac);
}

/* ===================== Number line ===================== */

.number-line {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.line-cell {
  width: 60px;
  height: 66px;
  border-radius: 16px;
  border: 3px solid var(--kids-border);
  background: var(--kids-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--kids-ink);
}

.line-cell.gap {
  border-style: dashed;
  border-color: #e08a2e;
  background: #fff5e8;
  color: #e08a2e;
}

.line-cell.filled {
  border-style: solid;
  border-color: var(--kids-green);
  background: #e4f6ef;
  color: var(--kids-green);
}

/* ===================== Compare ===================== */

.compare-stage {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.compare-side {
  flex: 1;
  max-width: 190px;
  min-height: 170px;
  border-radius: 20px;
  border: 4px solid var(--kids-border);
  background: var(--kids-card);
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.compare-items {
  display: grid;
  justify-items: center;
  gap: 5px 7px;
  font-size: clamp(26px, 8vw, 38px);
  line-height: 1.1;
}

/* Above twenty the two sides show the numbers themselves rather than a heap of
   emoji nobody could count. Deliberately huge: at this size the comparison is
   still meant to be made at a glance. */
.compare-figure {
  font-size: clamp(48px, 16vw, 76px);
  font-weight: 900;
  color: var(--kids-ink);
  line-height: 1;
}

.compare-items.dense {
  font-size: clamp(20px, 6vw, 30px);
}

.compare-side:active {
  transform: scale(0.97);
}

.compare-side.right-answer {
  border-color: var(--kids-green);
  background: #e4f6ef;
}

.compare-side.wrong-answer {
  border-color: var(--kids-red);
  background: #fdecea;
}

@media (max-width: 380px) {
  .line-cell {
    width: 50px;
    height: 58px;
    font-size: 1.5rem;
  }

  .compare-side {
    min-height: 130px;
  }
}