:root {
  --hintergrund: #f4f1ea;
  --text: #22201c;
  --gedaempft: #6b665c;
  --richtig: #2e7d32;
  --falsch: #b3261e;
  --akzent: #3d5a80;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hintergrund: #1c1b19;
    --text: #ece8df;
    --gedaempft: #a39d90;
    --richtig: #7cc47f;
    --falsch: #f28b82;
    --akzent: #98b4d4;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font: 1rem/1.4 system-ui, sans-serif;
}

main {
  /* Brett so breit wie möglich, aber samt Text ohne Scrollen auf einen Handybildschirm. */
  width: min(100vw, 34rem);
  width: min(100vw, 34rem, 100dvh - 13rem);
  min-width: min(100vw, 17rem);
  margin: 0 auto;
  padding: 0.5rem;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--gedaempft);
}

h1 { margin: 0; font-size: 1rem; font-weight: 600; }

.aufgabe { margin: 0.4rem 0; font-size: 1.15rem; font-weight: 600; }

/* Ziehen auf dem Brett darf die Seite nicht scrollen. */
.brett { touch-action: none; user-select: none; -webkit-user-select: none; }

.ergebnis p { margin: 0.4rem 0; }
.urteil { font-size: 1.15rem; font-weight: 700; }
.urteil.richtig { color: var(--richtig); }
.urteil.falsch { color: var(--falsch); }
.partie { color: var(--gedaempft); }
.partie a { color: var(--akzent); }

button {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.8rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--akzent);
  color: var(--hintergrund);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}