/* =========================================================================
   theme.css — Dirks Tic-Tac-Toe.

   Die Palette stammt aus dem Einstiegssatz der Startseite: „Wenn man Joan
   Miró gebeten hätte, ein Tic-Tac-Toe zu entwerfen …“. Miró arbeitete mit
   wenigen, gesättigten Farben auf gebrochenem Weiß — Zinnoberrot,
   Kobaltblau, Kadmiumgelb und Schwarz. Genau diese vier bestimmen die
   Seite; die Level-Grafiken der App sind aus derselben Welt.

   Die geometrischen Formen im Kopfbereich sind reine CSS-Pseudo-Elemente:
   kein Bild, kein zusätzlicher Ladevorgang.
   ========================================================================= */

:root {
  /* Zinnoberrot als Akzent */
  --accent: light-dark(#b32617, #f0937f);
  --accent-hover: light-dark(#8a1c10, #f7b6a7);
  --on-accent: light-dark(#ffffff, #1a0d0a);

  --miro-blue: light-dark(#1c47a8, #8fb0f2);
  --miro-yellow: light-dark(#d99400, #f2c14e);
  --miro-black: light-dark(#141210, #f4f1eb);

  /* Etwas wärmerer Grund als die neutrale Vorgabe — Papier, nicht Bildschirm */
  --bg: light-dark(#fcfaf6, #131110);
  --surface: light-dark(#ffffff, #1b1917);
  --surface-2: light-dark(#f4efe6, #221f1c);
  --border: light-dark(#e0d8ca, #302c28);
  --border-strong: light-dark(#c6bba7, #423d37);
}

/* -------------------------------------------------------------------------
   Kopfbereich
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-2xl);
}

/* Zwei Formen, mehr nicht: ein Kreis in Kobaltblau, ein Balken in Gelb.
   Beide liegen hinter dem Inhalt und sind rein dekorativ. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.hero::before {
  inline-size: 22rem;
  block-size: 22rem;
  border-radius: 50%;
  background: var(--miro-blue);
  opacity: 0.12;
  inset-block-start: -7rem;
  inset-inline-end: -6rem;
}

.hero::after {
  inline-size: 9rem;
  block-size: 2.5rem;
  border-radius: 999px;
  background: var(--miro-yellow);
  opacity: 0.22;
  inset-block-end: 2rem;
  inset-inline-start: -3rem;
  rotate: -18deg;
}

.hero__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 58rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  }
}

.hero h1 {
  font-size: var(--step-5);
}

/* Die Level-Grafik ist das Bild, um das es geht — sie steht ohne Rahmen
   und ohne Karte, wie ein aufgehängtes Blatt. */
.hero__level {
  inline-size: 100%;
  max-inline-size: 24rem;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.hero__get {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Level-Galerie
   ------------------------------------------------------------------------- */

.levels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

/* Die Level-Galerie ist ein eigenständiger Block und bekommt denselben
   Abstand wie Abbildungen und Kartenraster in base.css. Dort kann sie
   nicht stehen, weil base.css produktneutral bleibt. */
.prose > * + .levels,
.prose > .levels + * {
  margin-block-start: var(--space-l);
}

.levels figure {
  margin: 0;
  display: grid;
  gap: var(--space-2xs);
}

.levels img {
  inline-size: 100%;
  border-radius: var(--radius);
  background: var(--surface);
}

.levels figcaption {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

/* -------------------------------------------------------------------------
   Die drei Gegner
   ------------------------------------------------------------------------- */

/* Jede Stufe bekommt eine der drei Miró-Farben — die Reihenfolge zeigt,
   dass die Schwierigkeit steigt, ohne dass Farbe allein die Information
   trägt: die Stufe steht daneben im Text. */
.opponent {
  border-block-start: 4px solid var(--border-strong);
}

.opponent:nth-child(1) { border-block-start-color: var(--miro-yellow); }
.opponent:nth-child(2) { border-block-start-color: var(--miro-blue); }
.opponent:nth-child(3) { border-block-start-color: var(--accent); }

.opponent .eyebrow {
  color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   Sprachweiche
   ------------------------------------------------------------------------- */

.language-choice {
  min-block-size: 70svh;
  display: grid;
  place-items: center;
  text-align: center;
}

/* Der Kasten der Sprachweiche ist weder .section noch .prose, die
   Rhythmus-Regeln aus base.css greifen hier also nicht. Ohne die folgenden
   Zeilen stoßen Bild, Überschrift und Satz ohne jeden Abstand aneinander. */
.language-choice > * > * + * {
  margin-block-start: var(--space-s);
}

.language-choice img + h1 {
  margin-block-start: var(--space-m);
}

.language-choice ul {
  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: center;
}

.language-choice .button {
  font-size: var(--step-1);
  padding: var(--space-s) var(--space-xl);
}