/* Math & sports games inside the Practice Club window (css/movers.css owns the window, header and result):
   the picture of each question (groups, jerseys, clocks, chart) and its three answers. The clue a wrong
   answer reveals stays hidden until the stage gets data-hint. */
.mx-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mx-scene {
  align-self: center;
  max-width: 100%;
}
.mx-count,
.mx-step,
.mx-clock-tip {
  visibility: hidden;
}
.mv-stage[data-hint="on"] :is(.mx-count, .mx-step, .mx-clock-tip) {
  visibility: visible;
}
.mx-count,
.mx-step {
  padding: 2px 10px;
  border: 2px solid var(--ad-purple-edge);
  border-radius: 999px;
  background: var(--ad-purple-face);
  color: var(--ad-purple-ink);
  font-weight: 800;
}

/* Equal groups: one card per bag, basket or nest, with its things inside. */
.mx-groups {
  --gap: 10px;
  --cols: var(--groups);
  align-self: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  width: 100%;
}
/* The rows split evenly: --cols groups per row, and a last short row stays centered. */
.mx-group {
  flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  max-width: 170px;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 84px;
  padding: 6px 10px 8px;
  border: 3px solid var(--ad-gold-edge);
  border-radius: 20px;
  background: var(--ad-tint-gold);
}
.mx-holder {
  font-size: 30px;
  line-height: 1;
}
.mx-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 96px;
  gap: 2px;
  font-size: 26px;
  line-height: 1.1;
}

/* Number patterns: jerseys in a row; the hidden one is gold with a dashed edge. */
.mx-jerseys {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mx-jersey {
  width: 92px;
  height: auto;
}
.mx-jersey-cloth {
  fill: var(--ad-blue-face);
  stroke: var(--ad-blue-edge);
  stroke-width: 4;
  stroke-linejoin: round;
}
.mx-jersey-number {
  fill: var(--ad-blue-ink);
  font-size: 34px;
  font-weight: 900;
}
.mx-jersey[data-gap] .mx-jersey-cloth {
  fill: var(--ad-gold-face);
  stroke: var(--ad-gold-edge);
  stroke-dasharray: 9 6;
}
.mx-jersey[data-gap] .mx-jersey-number {
  fill: var(--ad-gold-ink);
}
.mx-step {
  font-size: calc(15px * var(--text-scale, 1));
}

/* Clocks: a white face, a short dark hour hand and a long red minute hand. */
.mx-clocks {
  display: flex;
  justify-content: center;
  gap: 28px;
}
.mx-clock {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 0;
}
.mx-clock-face {
  width: 190px;
  height: 190px;
}
.mx-clock-rim {
  fill: var(--ad-surface);
  stroke: var(--ad-line-blue);
  stroke-width: 6;
}
.mx-clock-tick {
  stroke: var(--ad-line);
  stroke-width: 3;
  stroke-linecap: round;
}
.mx-clock-number {
  fill: var(--ad-ink-deep);
  font-size: 22px;
  font-weight: 800;
}
.mx-clock-scene {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.mx-clock-tip {
  display: flex;
  gap: 10px;
  margin: 0;
}
.mx-clock-tip > span {
  padding: 2px 10px;
  border: 2px solid var(--ad-purple-edge);
  border-radius: 999px;
  background: var(--ad-purple-face);
  color: var(--ad-purple-ink);
  font-weight: 800;
}
.mx-clock-tip small {
  font-weight: 600;
}
.mx-clock-tip small::before {
  content: " · ";
}
.mx-hand-hour,
.mx-hand-minute {
  stroke-linecap: round;
}
.mx-hand-hour {
  stroke: var(--ad-ink-deep);
  stroke-width: 9;
}
.mx-hand-minute {
  stroke: var(--ad-coral-ink);
  stroke-width: 5;
}
.mx-clock-pin {
  fill: var(--ad-ink-deep);
}
.mx-clock-label,
.mx-chart-name {
  display: grid;
  font-weight: 800;
  text-align: center;
}
:is(.mx-clock-label, .mx-chart-name, .mx-pick) small {
  color: var(--ad-ink-muted);
  font-weight: 600;
  font-size: 0.78em;
}

/* Charts: an icon and a name, then one symbol per vote; bar charts draw their symbols as squares. */
.mx-chart {
  display: grid;
  gap: 6px;
  min-width: min(100%, 520px);
  margin: 0;
  padding: 8px 14px 10px;
  border: 2px solid var(--ad-line-blue);
  border-radius: 18px;
  background: var(--ad-surface);
}
.mx-chart-title {
  font-weight: 800;
  text-align: center;
}
.mx-chart-title small {
  color: var(--ad-ink-muted);
  font-weight: 600;
}
.mx-chart-title small::before {
  content: " · ";
}
.mx-chart-rows {
  display: grid;
  gap: 4px;
}
.mx-chart-row {
  display: grid;
  grid-template-columns: 36px 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--ad-soft);
}
.mv-stage[data-hint="on"] .mx-chart-row[data-focus] {
  border-color: var(--ad-purple-edge);
}
.mx-chart-icon {
  font-size: 28px;
  text-align: center;
}
.mx-chart-name {
  justify-items: start;
  text-align: left;
}
.mx-chart-symbols {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 26px;
  line-height: 1.1;
}
.mx-chart[data-kind="picture"] .mx-sym {
  color: var(--ad-gold-edge);
}
.mx-chart[data-kind="bar"] .mx-sym {
  width: 26px;
  height: 26px;
  border: 2px solid var(--ad-mint-ink);
  border-radius: 5px;
  background: var(--ad-mint-face);
  font-size: 0;
}
/* The key matters most in a pictograph (one star is two students), so it reads in full ink. */
.mx-chart-key {
  margin: 0;
  font-weight: 800;
  text-align: center;
}
.mx-chart-key small {
  color: var(--ad-ink-muted);
  font-weight: 600;
}
.mx-chart-key small::before {
  content: " · ";
}

/* Pictures are drawn as the game's illustrations (js/ui/illustrations.js): the same box before and after they load. */
:is(.mx-holder, .mx-item, .mx-chart-icon, .mx-pick-icon) {
  width: 1.1em;
  height: 1.1em;
  line-height: 1.1;
}
.mx-chart-icon {
  justify-self: center;
}
.mx-key-sym {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  vertical-align: -0.25em;
}
.mx-chart[data-kind="picture"] .mx-sym {
  display: grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  line-height: 1;
}
/* A wrong answer also marks the title and the key: "read the title" and "look at the key" show where. */
.mx-chart-title,
.mx-chart-key {
  justify-self: center;
  padding: 2px 12px;
  border-radius: 999px;
}
.mv-stage[data-hint="on"] :is(.mx-chart-title, .mx-chart-key) {
  background: var(--ad-tint-gold);
  box-shadow: 0 0 0 3px var(--ad-gold-edge);
}

/* Bar graphs: vertical bars on an axis that counts to --max; the plot is --plot tall. */
.mx-bars {
  --plot: 180px;
  display: grid;
  gap: 4px;
  min-width: min(100%, 520px);
  margin: 0;
  padding: 8px 14px 10px;
  border: 2px solid var(--ad-line-blue);
  border-radius: 18px;
  background: var(--ad-surface);
}
.mx-bars-label {
  margin: 0;
  color: var(--ad-ink-muted);
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 800;
}
.mx-bars-label small {
  font-weight: 600;
}
.mx-bars-label small::before {
  content: " · ";
}
.mx-bars-plot {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  grid-template-rows: var(--plot) auto;
  column-gap: 6px;
}
/* The axis is as tall as the inside of the field (its bottom border is the zero line), so every number lines up with its gridline. */
.mx-bars-axis {
  position: relative;
  align-self: start;
  height: calc(var(--plot) - 3px);
}
.mx-bars-tick {
  position: absolute;
  right: 0;
  bottom: calc(var(--n) / var(--max) * 100%);
  transform: translateY(50%);
  color: var(--ad-ink-muted);
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 800;
  line-height: 1;
}
.mx-bars-field {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  border-bottom: 3px solid var(--ad-ink-muted);
  border-left: 3px solid var(--ad-ink-muted);
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(100% / var(--max) - 1px),
    var(--ad-edge) calc(100% / var(--max) - 1px),
    var(--ad-edge) calc(100% / var(--max))
  );
}
.mx-bar-col {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mx-bar-col[data-tone="0"] {
  --bar-face: var(--ad-blue-face);
  --bar-edge: var(--ad-blue-edge);
}
.mx-bar-col[data-tone="1"] {
  --bar-face: var(--ad-mint-face);
  --bar-edge: var(--ad-mint-edge);
}
.mx-bar-col[data-tone="2"] {
  --bar-face: var(--ad-gold-face);
  --bar-edge: var(--ad-gold-edge);
}
.mx-bar-col[data-tone="3"] {
  --bar-face: var(--ad-coral-face);
  --bar-edge: var(--ad-coral-edge);
}
.mx-bar {
  position: relative;
  width: 58%;
  max-width: 84px;
  height: calc(var(--value) / var(--max) * 100%);
  border: 3px solid var(--bar-edge);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--bar-face);
}
.mx-bar .mx-count {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -4px);
}
.mx-bars-guide {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(var(--value) / var(--max) * 100%);
  left: 0;
  border-top: 3px dashed var(--ad-purple-edge);
  pointer-events: none;
}
.mv-stage[data-hint="on"] .mx-bars-guide[data-focus] {
  display: block;
}
.mv-stage[data-hint="on"] .mx-bar-col[data-focus] .mx-bar {
  box-shadow: 0 0 0 3px var(--ad-purple-edge);
}
/* Questions that read or compare bars keep the numbers hidden: the guide lines are the clue. */
.mv-stage[data-hint="on"] .mx-bars[data-reveal="guide"] .mx-count {
  visibility: hidden;
}
.mx-bars-names {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  padding-top: 4px;
}
.mx-bars-name {
  display: grid;
  justify-items: center;
  min-width: 0;
  text-align: center;
}
.mx-bars-name .mx-chart-name {
  justify-items: center;
  text-align: center;
}

/* Three answers like A, B and C on the sheet: big numbers and times, two lines at most for long ones. */
.mx-picks {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mx-pick {
  justify-content: center;
  gap: 2px;
  min-height: 104px;
  padding: 10px 12px;
  border-radius: 30px;
}
.mx-pick-text {
  font-size: calc(34px * var(--text-scale, 1));
  font-weight: 900;
  line-height: 1.1;
}
.mx-pick[data-long] .mx-pick-text {
  font-size: calc(24px * var(--text-scale, 1));
}
.mx-pick[data-long="sentence"] {
  padding-top: 28px;
}
.mx-pick[data-long="sentence"] .mx-pick-text {
  font-size: calc(19px * var(--text-scale, 1));
  font-weight: 800;
}
.mx-pick-icon {
  font-size: 36px;
}

/* Tablet landscape (docs/css-components.md): answers and pictures at least double the desktop size where
   the window has room; the answer row is 132 px tall like a challenge answer. */
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px) {
  .mx-pick {
    min-height: 132px;
  }
  .mx-pick-text {
    font-size: calc(46px * var(--text-scale, 1));
  }
  .mx-pick[data-long] .mx-pick-text {
    font-size: calc(32px * var(--text-scale, 1));
  }
  .mx-pick[data-long="sentence"] .mx-pick-text {
    font-size: calc(24px * var(--text-scale, 1));
  }
  .mx-bars {
    --plot: 170px;
  }
  .mx-bars-tick {
    font-size: calc(14px * var(--text-scale, 1));
  }
  .mx-pick-icon {
    font-size: 48px;
  }
  .mx-pick .mv-letter {
    font-size: 22px;
  }
  .mx-group {
    min-width: 104px;
  }
  .mx-holder {
    font-size: 54px;
  }
  .mx-items {
    max-width: 100%;
    font-size: 44px;
  }
  .mx-jersey {
    width: 118px;
  }
  .mx-clock-face {
    width: 220px;
    height: 220px;
  }
  .mx-chart-row {
    grid-template-columns: 44px 140px minmax(0, 1fr) auto;
  }
  .mx-chart-icon,
  .mx-chart-symbols {
    font-size: 32px;
  }
  .mx-chart[data-kind="bar"] .mx-sym {
    width: 32px;
    height: 32px;
  }
}

/* Phone: one answer per row and smaller pictures, so the question and its answers fit the width. */
@media (max-width: 520px) {
  .mx-picks {
    grid-template-columns: minmax(0, 1fr);
  }
  .mx-pick {
    flex-direction: row;
    min-height: 66px;
    padding: 8px 12px 8px 56px;
  }
  .mx-pick .mv-letter {
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
  }
  .mx-pick-text {
    font-size: calc(28px * var(--text-scale, 1));
  }
  .mx-pick[data-long] .mx-pick-text {
    font-size: calc(20px * var(--text-scale, 1));
  }
  .mx-pick[data-long="sentence"] {
    padding-top: 8px;
  }
  .mx-pick[data-long="sentence"] .mx-pick-text {
    font-size: calc(16px * var(--text-scale, 1));
  }
  .mx-bars {
    --plot: 140px;
    min-width: 0;
    padding: 6px 8px;
  }
  .mx-bars-name {
    font-size: 12px;
  }
  .mx-groups {
    --gap: 8px;
    --cols: var(--cols-phone);
  }
  .mx-group {
    min-width: 0;
    padding: 4px 6px 6px;
  }
  .mx-holder {
    font-size: 30px;
  }
  .mx-items {
    max-width: 100%;
    font-size: 24px;
  }
  .mx-jerseys {
    gap: 2px;
  }
  .mx-jersey {
    width: 54px;
  }
  .mx-step {
    padding: 1px 4px;
    font-size: 11px;
  }
  .mx-clocks {
    gap: 12px;
  }
  .mx-clock-face {
    width: 150px;
    height: 150px;
  }
  .mx-chart {
    min-width: 0;
    padding: 6px 8px;
  }
  .mx-chart-row {
    grid-template-columns: 28px 74px minmax(0, 1fr) auto;
    gap: 4px;
    padding: 2px 4px;
  }
  .mx-chart-icon,
  .mx-chart-symbols {
    font-size: 19px;
  }
  .mx-chart[data-kind="bar"] .mx-sym {
    width: 18px;
    height: 18px;
  }
}

/* Phone landscape: the picture on the left, the question and its answers on the right. */
@media (orientation: landscape) and (max-height: 500px) {
  .mx-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 4px 14px;
  }
  .mx-stage > :is(.mv-card, .mx-picks) {
    grid-column: 2;
  }
  .mx-stage > .mx-scene {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .mx-stage .mv-label {
    font-size: calc(17px * var(--text-scale, 1));
  }
  .mx-groups {
    --cols: var(--cols-phone);
  }
  .mx-picks {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .mx-pick {
    flex-direction: row;
    min-height: 48px;
    padding: 4px 10px 4px 36px;
  }
  .mx-pick .mv-letter {
    top: 50%;
    transform: translateY(-50%);
  }
  .mx-pick-text {
    font-size: calc(24px * var(--text-scale, 1));
  }
  .mx-pick[data-long] .mx-pick-text {
    font-size: calc(18px * var(--text-scale, 1));
  }
  .mx-pick[data-long="sentence"] {
    padding-top: 4px;
  }
  .mx-pick[data-long="sentence"] .mx-pick-text {
    font-size: calc(14px * var(--text-scale, 1));
  }
  .mx-bars {
    --plot: 110px;
  }
  .mx-clock-face {
    width: 140px;
    height: 140px;
  }
  .mx-jersey {
    width: 56px;
  }
}