/* Content styles of the place-value lesson (digit cells, the train of wagons). The page frame is the shared player. */
:root {
  --bg: #fff8ec;
  --card: #ffffff;
  --ink: #2b2540;
  --muted: #7a7490;
  --accent: #ff7a59;
  --accent-ink: #ffffff;
  --blue: #3b82f6;
  --green: #22a06b;
  --yellow: #ffd166;
  --purple: #8b5cf6;
  --line: #eadfcb;
  --done: var(--yellow);
  --topic-bg: var(--blue);
}
.card {
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 28px;
  width: min(1000px, 100%);
  padding: 24px 32px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.card h1 {
  font-size: clamp(26px, 4.2vw, 44px);
  margin: 0 0 16px;
  line-height: 1.15;
}
.body {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: clamp(20px, 2.8vw, 30px);
  line-height: 1.4;
}
.body svg { max-width: 100%; height: auto; }
.body p { margin: 0; }

/* helpers available to slide content */
.big { font-size: 1.8em; font-weight: 800; letter-spacing: .02em; }
.huge { font-size: 2.6em; font-weight: 800; }
.hl { background: var(--yellow); border-radius: 10px; padding: 0 .25em; }
.c-accent { color: var(--accent); }
.c-blue { color: var(--blue); }
.c-green { color: var(--green); }
.c-purple { color: var(--purple); }
.row { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; }
.box {
  border: 3px solid var(--line); border-radius: 18px; padding: 12px 20px; background: #fffdf7;
}
.tip {
  border: 3px dashed var(--green); border-radius: 18px; padding: 10px 20px; color: var(--green); font-weight: 700;
}

.small { font-size: .75em; color: var(--muted); }
.wrong { color: #d6336c; text-decoration: line-through; font-weight: 800; }
.wrong-soft { color: var(--muted); }
.expr { font-size: 1.5em; font-weight: 800; letter-spacing: .02em; }
.tag {
  display: inline-block; border-radius: 10px; padding: 0 .35em; font-weight: 800;
  color: #fff; background: var(--wc, var(--muted));
}

/* digit cells */
.cell {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--cw); height: calc(var(--cw) * 1.2);
  font-size: calc(var(--cw) * .72); font-weight: 800; line-height: 1;
  background: #fff; border: 3px solid var(--wc, var(--line)); border-radius: 12px;
}
.cell.empty { border-style: dashed; background: transparent; }
.cell.zero { background: var(--yellow); }
.cell.q { color: var(--muted); border-style: dashed; }
.digits { --cw: clamp(26px, 6.5vw, 62px); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

/* the train: one wagon = one group of three digits */
.w-mld { --wc: var(--purple); }
.w-mln { --wc: var(--blue); }
.w-tys { --wc: var(--green); }
.w-j   { --wc: var(--accent); }
.train {
  --cw: clamp(22px, 5vw, 54px);
  display: flex; align-items: flex-start; justify-content: center; gap: clamp(4px, 1.2vw, 14px);
  width: 100%;
}
.loco { font-size: calc(var(--cw) * 1.5); line-height: 1; margin-top: calc(var(--cw) * .45); }
.wagon { display: flex; flex-direction: column; align-items: center; }
.wname {
  font-size: clamp(10px, 1.7vw, 17px); font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--wc); margin-bottom: 4px;
}
.cells {
  display: flex; gap: 4px; padding: 6px;
  background: color-mix(in srgb, var(--wc) 16%, #fff);
  border: 3px solid var(--wc); border-radius: 16px;
  position: relative; margin-bottom: 12px;
}
.cells::before, .cells::after {   /* wheels */
  content: ""; position: absolute; bottom: -12px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 3px solid #fff;
}
.cells::before { left: 16%; }
.cells::after { right: 16%; }
.sdj { display: flex; gap: 4px; }
.sdj span { width: var(--cw); font-size: clamp(11px, 1.6vw, 16px); font-weight: 700; color: var(--muted); }
.wsay {
  width: 0; min-width: 100%; margin-top: 6px;
  font-size: clamp(12px, 2vw, 21px); line-height: 1.25; font-weight: 600;
}
.wsay b { color: var(--wc); }

/* single place-value table (thousands / hundreds / tens / ones) */
.places { --cw: clamp(40px, 8vw, 70px); display: flex; gap: clamp(6px, 1.5vw, 16px); justify-content: center; }
.place { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: clamp(64px, 12vw, 110px); }
.plabel { font-size: clamp(12px, 1.8vw, 18px); font-weight: 700; color: var(--muted); }

.steps { text-align: left; margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: .7em; }
.steps li::marker { font-weight: 800; color: var(--accent); }

.abbr {
  display: grid; grid-template-columns: repeat(4, auto); gap: .6em 1em;
  align-items: center; justify-items: start; text-align: left;
}
.abbr.three { grid-template-columns: auto auto auto; font-size: 1.2em; font-weight: 800; }
.abbr .n { font-weight: 800; white-space: nowrap; }
.abbr .n i { font-style: normal; background: var(--yellow); border-radius: 8px; padding: 0 .12em; }

.caption {
  width: min(1000px, 100%);
  margin: 10px auto 0;
  padding: 0 24px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  min-height: 1.4em;
}

@media (max-width: 600px) {
  button.nav { font-size: 18px; padding: 12px 18px; }
  .card { padding: 16px; border-radius: 20px; }
  .topic { display: none; }
  .loco { display: none; }
  main { padding: 0 8px; }
  .card { padding: 14px 8px; }
  .train { --cw: 4.6vw; gap: 3px; }
  .train .cells { padding: 3px; gap: 2px; border-width: 2px; border-radius: 10px; }
  .train .cell { border-width: 2px; border-radius: 6px; }
  .train .sdj { gap: 2px; }
  .train .cells { margin-bottom: 8px; }
  .train .cells::before, .train .cells::after { width: 9px; height: 9px; border-width: 2px; bottom: -8px; }
  footer { gap: 8px; padding: 12px 8px 14px; }
  button.nav { font-size: 16px; padding: 12px 14px; }
  .abbr { grid-template-columns: auto auto; }
  .abbr.three { grid-template-columns: auto auto auto; font-size: 1em; }
}

.start-emoji { font-size: 90px; }