/* ==========================================================================
   COPY THE PATTERN
   The four pads, their lit state, and the pattern strip. Shared chrome is in
   kids-common.css.
   ========================================================================= */

.game-btn.mode-simon { background: #7f77dd; }
.game-btn.mode-strip { background: #1d9e75; }

/* ===================== The four pads ===================== */

.pads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 400px;
  /* auto top and bottom so the block sits in the middle of whatever space is
     left under the header, with the feedback line directly beneath it. */
  margin: auto auto 0;
}

#simon-feedback {
  margin-bottom: auto;
}

.pad {
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(44px, 15vw, 72px);
  cursor: pointer;
  /* Dimmed at rest so lighting up is a change in brightness as well as size —
     the two together read as "this one" far more clearly than either alone,
     and brightness alone would be lost on a phone held in the sun. */
  filter: saturate(0.55) brightness(0.86);
  transition: filter 0.12s, transform 0.12s;
  padding: 0;
}

.pad-0 { background: #43a047; }
.pad-1 { background: #fdd835; }
.pad-2 { background: #ec407a; }
.pad-3 { background: #29b6f6; }

.pad.lit {
  filter: saturate(1.35) brightness(1.12);
  transform: scale(1.05);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85);
}

/* Taps are ignored while the sequence is playing, and the pads say so rather
   than silently swallowing them. */
.pads.playing .pad {
  cursor: default;
}

.pad.wrong {
  filter: saturate(0.3) brightness(0.7);
}

/* ===================== Simon status ===================== */

.watch-label {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 900;
  min-height: 30px;
  margin-bottom: 12px;
  color: var(--kids-ink);
}

.watch-label.your-turn {
  color: var(--kids-green);
}

/* One dot per step, filling in as the child taps — a four-year-old needs to see
   how much of the sequence is left without being able to count it. */
.step-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  min-height: 18px;
  margin-bottom: 14px;
}

.step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e3ddf5;
}

.step-dot.done {
  background: var(--kids-lilac);
}

/* ===================== Pattern strip ===================== */

/* One row, always. A repeating pattern that wraps onto a second line stops
   looking like a pattern — the whole point is that the eye runs along it — so
   the cells are sized to fit rather than allowed to overflow. The column count
   comes from JS because it depends on how long the strip is. */
.strip {
  display: grid;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 460px;
  margin: 0 auto 6px;
}

.strip-cell {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Scales with the cell rather than being fixed, so a seven-cell strip on a
     narrow phone still shows a recognisable animal. */
  font-size: clamp(18px, 6.5vw, 34px);
  min-width: 0;
}

.strip-cell.c0 { background: #43a047; }
.strip-cell.c1 { background: #fdd835; }
.strip-cell.c2 { background: #ec407a; }
.strip-cell.c3 { background: #29b6f6; }

.strip-cell.unknown {
  background: var(--kids-card);
  border: 3px dashed #b3aee6;
  color: #8a86b8;
  font-weight: 900;
}

/* Counting strips (expert): the pattern is in the numbers, so these are drawn
   plain rather than in one of the four pad colours — a coloured cell would
   suggest the colour meant something. Smaller text than an emoji cell, because
   "100" has to fit where a single animal did. */
.strip-cell.number {
  background: var(--kids-lilac-pale);
  border: 3px solid var(--kids-border);
  color: var(--kids-ink);
  font-weight: 900;
  font-size: clamp(13px, 4.4vw, 26px);
}

.strip-cell.filled {
  box-shadow: 0 0 0 4px var(--kids-green);
}

/* The answer pads under a strip: same colours, smaller, in one row. */
.strip-choices {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
}

.strip-choice {
  width: 72px;
  height: 72px;
  border: none;
  border-radius: 20px;
  font-size: 2.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.strip-choice:active {
  transform: scale(0.95);
}

.strip-choice.c0 { background: #43a047; }
.strip-choice.c1 { background: #fdd835; }
.strip-choice.c2 { background: #ec407a; }
.strip-choice.c3 { background: #29b6f6; }

.strip-choice.number {
  background: var(--kids-card);
  border: 3px solid var(--kids-border);
  color: var(--kids-ink);
  font-weight: 900;
  font-size: 1.6rem;
}

@media (max-width: 380px) {
  .pads {
    gap: 10px;
  }

  .strip {
    gap: 4px;
  }

  .strip-choice {
    width: 64px;
    height: 64px;
  }
}