/* Spiele-Seite: Fließtext wie die Anlass-Seiten, dazu ein kleines Wandbild
   je Spiel. Die Bausteine (.wall-item, .is-note, .is-doodle …) kommen aus
   styles.css — hier steht nur, was diese Seite zusätzlich braucht. */

.games {
  max-width: 680px;
  margin: 0 auto;
  padding-bottom: 64px;
}
.games h1 {
  margin: 18px 0 8px;
}
.games .lede {
  margin-top: 6px;
  font-size: 23px;
}
.games .whatis {
  margin-top: 18px;
  max-width: 620px;
  font-size: 24px;
  line-height: 1.5;
  color: rgba(34, 28, 15, 0.78);
}

.game {
  margin-top: 52px;
}
.game h2 {
  font-size: 40px;
  line-height: 1.05;
  margin: 10px 0 0;
}
.game p {
  font-size: 22px;
  line-height: 1.5;
  margin-top: 14px;
}
.game .rules {
  font-family: var(--mono);
  font-size: 17px;
  color: rgba(34, 28, 15, 0.62);
  margin-top: 10px;
}

/* Das Wandbild zum Spiel: Korkbrett wie in der App, alles handgesetzt. */
.game-board {
  position: relative;
  height: 300px;
  margin-top: 22px;
  border-radius: 18px;
  overflow: hidden;
  background: #efe3c8;
  background-image: radial-gradient(rgba(34, 28, 15, 0.14) 1.4px, transparent 1.6px);
  background-size: 24px 24px;
}
@media (max-width: 720px) {
  .game-board {
    height: 340px;
  }
  .game h2 {
    font-size: 32px;
  }
}
.game-board .wall-item.is-note {
  font-size: 15px;
}
.game-board img {
  display: block;
  border-radius: 3px;
}
/* Die Verblass-Stufen (.fade-2 / .fade-3) stehen in styles.css — sie werden
   auch im Abschnitt „das jetzt" auf public.html gebraucht. */