/*
 * Colours with a meaning, used the same way everywhere:
 * blue = x-values, red = function values f(x). Nothing else in the game is blue or red.
 */
:root {
  color-scheme: only light;
  --paper: #fff6e0;
  --card: #ffffff;
  --ink: #23303d;
  --soft-ink: #5b6b7b;
  --line: #d6dde5;
  --x: #1463d6;
  --fx: #d42a3c;
  --figure: #2fb59a;
  --figure-dark: #1b4d43;
  --gold: #f6b93b;
  --gold-dark: #c98a12;
  --good: #1c8a4d;
  --good-soft: #e3f6ea;
  --warn: #9a4b06;
  --warn-soft: #ffeccc;
  --road: #ecc777;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* A chip dragged past the right edge must not make the page scroll sideways. */
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

#app {
  max-width: 960px;
  margin: 0 auto;
  padding: 12px max(12px, env(safe-area-inset-right)) 24px max(12px, env(safe-area-inset-left));
}

[hidden] {
  display: none !important;
}

button,
a {
  touch-action: manipulation;
}

button {
  font: inherit;
  color: inherit;
}

.too-old {
  margin: 20vh auto;
  max-width: 28em;
  text-align: center;
}

/* ---------- start page: title and path ---------- */

.title {
  text-align: center;
  margin: 6px 0 2px;
}

.title h1 {
  margin: 0;
  font-size: clamp(1.7rem, 7vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.title p {
  margin: 0;
  color: var(--soft-ink);
  font-weight: 600;
}

.lead {
  text-align: center;
  margin: 8px auto 4px;
  max-width: 34em;
}

.map {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}

.map-road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.road,
.road-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.road {
  stroke: var(--road);
  stroke-width: 30;
}

.road-line {
  stroke: #fff;
  stroke-width: 3;
  stroke-dasharray: 3 11;
  opacity: 0.9;
}

.map-start,
.node,
.goal,
.map-figure {
  position: absolute;
  transform: translate(-50%, -50%);
}

.map-start {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--card);
  border: 2px solid var(--road);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--soft-ink);
}

.node {
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  border: 4px solid #fff;
  font-size: 1.4rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(35, 48, 61, 0.25);
}

.node--bonus {
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
}

.node--exam {
  border-radius: 16px;
  font-size: 1.1rem;
}

.node.is-gesperrt {
  background: #d9d5c7;
  color: #8f8b7e;
  cursor: default;
  box-shadow: none;
}

.node.is-offen {
  background: var(--figure);
  color: #fff;
  animation: beckon 1.6s ease-in-out infinite;
}

.node.is-geschafft {
  background: var(--gold);
  border-color: #ffe9ad;
  color: #5a3b00;
}

@keyframes beckon {
  0%, 100% { box-shadow: 0 3px 0 rgba(35, 48, 61, 0.25), 0 0 0 0 rgba(47, 181, 154, 0.55); }
  50% { box-shadow: 0 3px 0 rgba(35, 48, 61, 0.25), 0 0 0 12px rgba(47, 181, 154, 0); }
}

.goal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--card);
  border: 5px solid var(--gold);
  line-height: 1;
}

.goal small {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--soft-ink);
}

.goal strong {
  font-size: 1.7rem;
  font-weight: 800;
}

.goal.is-reached {
  background: var(--gold);
  border-color: #ffe9ad;
  animation: shine 1.8s ease-in-out infinite;
}

@keyframes shine {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246, 185, 59, 0.7); }
  50% { box-shadow: 0 0 0 16px rgba(246, 185, 59, 0); }
}

.map-figure {
  width: 54px;
  height: 50px;
  /* stands on top of its stop */
  transform: translate(-50%, -100%);
  margin-top: -22px;
  transition: left 0.7s ease-in-out, top 0.7s ease-in-out;
  pointer-events: none;
}

.footer {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}

.quiet {
  border: 0;
  background: none;
  padding: 10px 6px;
  font-size: 0.85rem;
  color: var(--soft-ink);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- the figure ---------- */

.figure-picture {
  display: block;
  overflow: visible;
}

.figure-shadow {
  fill: rgba(35, 48, 61, 0.18);
}

.figure-ball {
  fill: var(--figure);
  stroke: var(--figure-dark);
  stroke-width: 2;
}

.figure-foot {
  fill: var(--figure-dark);
}

.figure-arm {
  fill: none;
  stroke: var(--figure-dark);
  stroke-width: 3.2;
  stroke-linecap: round;
}

.figure-shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.65);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.figure-eye {
  fill: #fff;
  stroke: var(--figure-dark);
  stroke-width: 1;
}

.figure-pupil {
  fill: #16242e;
}

.figure-mouth {
  fill: none;
  stroke: #16242e;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.figure-cheek {
  fill: #ffb3a1;
  opacity: 0.85;
}

.figure-body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.figure-arm--up,
.figure[data-pose="cheer"] .figure-arm--down {
  display: none;
}

.figure[data-pose="cheer"] .figure-arm--up {
  display: inline;
}

.figure[data-pose="cheer"] .figure-body {
  animation: hop 0.55s ease-in-out infinite alternate;
}

.figure[data-pose="slide"] .figure-body {
  transform: rotate(-16deg);
}

@keyframes hop {
  from { transform: translateY(0); }
  to { transform: translateY(-7px); }
}

/* ---------- station frame ---------- */

.station-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.station-bar h1 {
  line-height: 1.15;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
}

.station-bar h1 span {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--soft-ink);
}

.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--card);
  border: 2px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.task {
  max-width: 34em;
  margin: 14px auto 8px;
  padding: 12px 16px;
  border: 3px solid var(--gold);
  border-radius: 16px;
  background: var(--card);
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
}

.task:empty {
  display: none;
}

/* a new task flashes once, so that it is read before anything else */
.task.is-new {
  animation: new-task 1.2s ease-out;
}

@keyframes new-task {
  from { background: #ffe9ad; transform: scale(1.03); }
}

.feedback {
  margin: 0 0 8px;
  min-height: 2.9em;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.95rem;
}

.feedback:empty {
  background: none;
}

.feedback.is-hint:not(:empty) {
  background: var(--warn-soft);
  color: var(--warn);
}

.feedback.is-cheer:not(:empty) {
  background: var(--good-soft);
  color: var(--good);
}

.finished {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--card);
  border: 3px solid var(--gold);
  box-shadow: 0 4px 14px rgba(35, 48, 61, 0.18);
  scroll-margin: 12px;
}

.finished .figure-picture {
  width: 52px;
  height: 48px;
  flex: none;
}

.finished strong {
  flex: 1;
  font-size: 1.1rem;
}

.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--figure-dark);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.text-page section {
  max-width: 40em;
}

.text-page h2 {
  margin: 18px 0 4px;
  font-size: 1.05rem;
}

.text-page p {
  margin: 0;
}

/* ---------- formulas ---------- */

.formula,
.formula-text {
  font-family: "Cambria Math", "STIX Two Math", Cambria, "Times New Roman", Times, serif;
}

.formula {
  font-size: 1.3em;
  white-space: nowrap;
}

.var {
  font-style: italic;
}

.x-value {
  color: var(--x);
  fill: var(--x);
  font-weight: 700;
}

.fx-value {
  color: var(--fx);
  fill: var(--fx);
  font-weight: 700;
}

.frac {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  vertical-align: middle;
  text-align: center;
  margin: 0 0.12em;
}

.frac-top {
  padding: 0 0.3em 0.12em;
}

.frac-bottom {
  padding: 0.12em 0.3em 0;
  border-top: 2px solid currentColor;
}

.formula sup {
  font-size: 0.7em;
  line-height: 0;
}

/* ---------- value table ---------- */

.values {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  flex: none;
}

.values th,
.values td {
  padding: 0;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

/* the row heads x and f(x) */
.values th {
  min-width: 56px;
  padding: 0 8px;
  background: #f3efe2;
  border-right: 2px solid var(--ink);
}

.values td + td {
  border-left: 1px solid var(--line);
}

.values tr:last-child th,
.values tr:last-child td {
  border-bottom: 0;
}

.cell {
  display: block;
  width: 100%;
  min-width: 50px;
  height: 46px;
  border: 0;
  background: none;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
}

.cell:disabled {
  cursor: default;
  opacity: 1;
}

.cell.x-value {
  color: var(--x);
}

.cell.fx-value {
  color: var(--fx);
}

.values td.is-done {
  background: var(--good-soft);
}

.values td.is-lit {
  background: #ffe58a;
}

/* ---------- coordinate system ---------- */

.board {
  display: block;
  width: 100%;
  height: auto;
  max-height: 64vh;
  max-height: 64dvh;
  background: var(--card);
  border-radius: 12px;
  border: 2px solid var(--line);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.board.is-tappable {
  cursor: crosshair;
}

.board-grid line {
  stroke: #dfe6ee;
  stroke-width: 1;
}

.board-axes line {
  stroke: var(--ink);
  stroke-width: 1.6;
}

.board-axes polygon {
  fill: var(--ink);
}

.tick {
  font-size: 11px;
  fill: var(--soft-ink);
}

.formula-text {
  font-size: 14px;
  fill: var(--ink);
}

.axis-name {
  font-size: 13.5px;
}

.formula-text .var {
  font-style: italic;
}

.point circle {
  fill: var(--ink);
  stroke: #fff;
  stroke-width: 1.5;
}

.point--named circle {
  fill: var(--gold);
  stroke: var(--ink);
}

.point-label,
.line-label {
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3.5px;
  stroke-linejoin: round;
  font-weight: 700;
}

.point-label tspan,
.line-label tspan {
  stroke: #fff;
}

.board-line line {
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}

.board-line.is-candidate line {
  stroke: var(--gold-dark);
  stroke-width: 6;
}

.board-miss {
  fill: none;
  stroke: var(--warn);
  stroke-width: 3;
  stroke-linecap: round;
  animation: fade-out 0.7s ease-in forwards;
}

@keyframes fade-out {
  to { opacity: 0; }
}

.gold circle {
  fill: var(--gold);
  stroke: var(--gold-dark);
  stroke-width: 1.5;
}

.gold path {
  fill: none;
  stroke: #fff3c4;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.gold.is-collected {
  animation: collected 0.6s ease-out forwards;
}

@keyframes collected {
  to { opacity: 0; transform: translateY(-26px); }
}

.cloud {
  fill: #e8f1f8;
  stroke: #c5d5e3;
  stroke-width: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- layouts inside a station ---------- */

.stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.stacked .board {
  max-width: 440px;
  max-height: 52vh;
  max-height: 52dvh;
}

.stacked--tight .board {
  max-height: 44vh;
  max-height: 44dvh;
}

/* The equations of Level 6 are written below the picture; it leaves them room. */
.stacked--work .board {
  max-height: 36vh;
  max-height: 36dvh;
}

.asking {
  margin: 0;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  border-radius: 14px;
  padding: 2px 10px;
}

.asking.is-glowing {
  background: #fff3c4;
  box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(246, 185, 59, 0.8);
}

.formula {
  display: inline-block;
}

.solved {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--soft-ink);
}

.work {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ---------- chips, slots, trays ---------- */

.tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
}

.chip {
  /* placing.js relies on this: a finger on a chip drags it instead of scrolling the page */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  /* narrow enough for four bubbles side by side on a phone */
  padding: 4px 8px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 3px 0 var(--ink);
  cursor: grab;
}

.chip--number {
  font-size: 1.3rem;
  font-weight: 700;
  padding: 2px 6px;
}

.chip.is-picked {
  background: #fff3c4;
  box-shadow: 0 3px 0 var(--ink), 0 0 0 4px var(--gold);
}

.chip.is-dragging {
  z-index: 20;
  cursor: grabbing;
  box-shadow: 0 10px 18px rgba(35, 48, 61, 0.35);
}

.chip.is-gliding {
  pointer-events: none;
}

.chip.is-locked {
  cursor: default;
  border-color: var(--good);
  background: var(--good-soft);
  box-shadow: none;
}

.slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  min-width: 50px;
  min-height: 50px;
  margin: 2px;
  border: 2px dashed #7b8da0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.slot.is-filled {
  border-color: transparent;
  background: none;
}

.slot.is-candidate {
  border-color: var(--gold-dark);
  background: #fff3c4;
}

.tray--points {
  gap: 6px;
  flex-wrap: nowrap;
}

.point-card {
  display: inline-flex;
  align-items: center;
  padding: 3px 5px;
  border-radius: 14px;
  background: #f3efe2;
}

.point-card .formula {
  font-size: 1.1em;
}

.place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  border-radius: 14px;
  border: 2px dotted #c9c2ac;
  margin: 0 1px;
}

.place .chip--number {
  min-width: 44px;
  min-height: 44px;
}

.chip--term {
  padding: 2px 8px;
  border-style: dashed;
  box-shadow: none;
  font: inherit;
}

.cell-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  font-size: 1.25rem;
  font-weight: 700;
  opacity: 0.4;
}

.values td > .chip {
  margin: 2px;
}

/* ---------- Level 2: cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 78px;
  padding: 8px 4px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
}

.card .formula {
  font-size: 1.1em;
}

.card:disabled {
  cursor: default;
  box-shadow: none;
  color: var(--ink);
}

.card.is-wrong {
  border-color: #c9c2ac;
  background: #f3efe2;
}

.card.is-right {
  border-color: var(--good);
  background: var(--good-soft);
}

.card-graph {
  width: 52px;
  height: 52px;
}

.card-axes {
  fill: none;
  stroke: #b8c2cc;
  stroke-width: 1;
}

.card-graph polyline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-name {
  font-size: 0.85rem;
  color: var(--soft-ink);
}

/* ---------- Level 4: help ---------- */

.help {
  width: 100%;
  max-width: 30em;
  padding: 0 12px;
  border-radius: 14px;
  background: var(--card);
  border: 2px solid var(--line);
}

.help summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 700;
  cursor: pointer;
}

.help p {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

/* ---------- Level 6: the rearrangement written down ---------- */

.derivation {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 1.1rem;
}

.derivation li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  animation: write 0.4s ease-out;
}

.derivation .stroke {
  color: var(--soft-ink);
}

/* a result to remember: m in Level 4, b in Level 6 */
.result-box {
  display: inline-flex;
  align-items: center;
  margin: 2px 0;
  padding: 6px 18px;
  border: 3px solid var(--gold-dark);
  border-radius: 12px;
  background: #fff7dd;
  font-size: 1.2rem;
  font-weight: 700;
  animation: write 0.4s ease-out;
}

.derivation .result-box {
  justify-self: start;
}

@keyframes write {
  from { opacity: 0; transform: translateY(-6px); }
}

/* ---------- Prüfung 1: steps ---------- */

.tray--steps {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 10px 0;
}

.chip--step {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  min-height: 58px;
  padding: 4px 12px;
  text-align: left;
}

.place--step {
  display: flex;
  min-width: 0;
  min-height: 62px;
  margin: 0;
}

.chip--step small {
  font-size: 0.78rem;
  color: var(--soft-ink);
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 8px;
}

.steps li {
  counter-increment: step;
  display: flex;
  align-items: center;
  gap: 8px;
}

.steps li::before {
  content: counter(step);
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
}

.slot--step {
  flex: 1;
  min-height: 62px;
  margin: 0;
  justify-content: stretch;
}

.slot--step > .chip {
  width: 100%;
}

/* ---------- wide screens ---------- */

@media (min-width: 720px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Steps on the left, the numbered lines beside them: short ways, and no step changes its width. */
  .ordering {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
    margin-top: 14px;
  }

  .ordering .tray--steps {
    margin: 0;
  }
}

/* ---------- Level 4: the slope triangle ---------- */

.slope-triangle {
  opacity: 0;
  transition: opacity 0.6s ease-in;
}

.slope-triangle.is-shown {
  opacity: 1;
}

.slope-triangle polygon {
  fill: rgba(246, 185, 59, 0.28);
}

.slope-triangle line {
  stroke-width: 4;
  stroke-linecap: round;
}

.slope-run {
  stroke: var(--x);
}

.slope-rise {
  stroke: var(--fx);
}

/* ---------- the demonstration of a movement (demo.js) ---------- */

.stage-area {
  position: relative;
}

.demo {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

.demo-hand,
.demo-chip,
.demo-ring {
  position: absolute;
  left: 0;
  top: 0;
}

/* The margins put the fingertip of the picture on the point the hand is moved to. */
.demo-hand {
  width: 34px;
  height: 39px;
  margin: -4px 0 0 -13px;
  filter: drop-shadow(0 2px 2px rgba(35, 48, 61, 0.35));
}

.demo-hand path {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.demo-chip {
  width: 46px;
  height: 40px;
  margin: -20px 0 0 -23px;
  border: 2px dashed var(--ink);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
}

.demo-ring {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid var(--gold-dark);
  border-radius: 50%;
}