/* Keep it Steady – Optik: tiefes Nachtblau, Türkis als Leitfarbe, dicke dunkle
   Konturen wie beim Grillspiel, damit beide Spiele erkennbar zur selben Seite
   gehören.

   Leitgedanke: Das Auge bleibt auf dem Turm – gefeiert wird dafür mit allem,
   was die Seite hat. Bei einer Combo blitzt der Schirm in der Farbe der Stufe
   auf, Konfetti fällt über die Seite, und bei jedem Sprung bebt sie kurz.
   Leuchtende Ränder um Bild und Fenster bleiben bewusst weg – sie zogen den
   Blick vom Turm weg. Geschriebene Zwischenrufe gibt es nicht mehr: Was
   passiert, ist zu sehen (siehe "Der ganze Bildschirm feiert mit").

   Kein einziges Bild und keine externe Schrift: Die Seite lädt nichts nach. */

:root {
  --kontur: #101a2c;
  --nacht: #0d1729;
  --nacht-tief: #080f1c;
  --karte: #16233c;
  --karte-hell: #1d2d4a;
  --papier: #eaf2ff;
  --tuerkis: #48e5c2;
  --gelb: #ffcf3f;
  --orange: #ff8a2b;
  --pink: #ff4d94;
  --blau: #8ab4ff;
  --rot: #ef4444;
  --gruen: #56d364;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-weight: 700;
  color: var(--papier);
  background:
    radial-gradient(circle at 50% 0%, rgba(72, 229, 194, 0.16) 0%, rgba(72, 229, 194, 0.04) 38%, rgba(0, 0, 0, 0) 64%),
    linear-gradient(180deg, #14213c 0%, var(--nacht) 45%, var(--nacht-tief) 100%) fixed;
  padding-bottom: 1.5rem;
  overflow-x: hidden;
}

/* Der Umschlag um Kopf, Spiel und Fuß. Er allein bebt – der Körper der Seite
   darf es nicht: Der trägt den Hintergrund am Fenster und ist Bezugsrahmen der
   festen Einblendungen, beide würden mitwandern. */
.seite { position: relative; }

/* ---------- Kopfzeile ---------- */

.kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  max-width: 1320px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
}

.kopf__marke {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kopf__zeichen {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 10px rgba(72, 229, 194, 0.7));
}

.kopf__titel {
  margin: 0;
  font-size: 2rem;
  letter-spacing: 0.02em;
  color: var(--tuerkis);
  text-shadow: 3px 3px 0 var(--kontur), 0 0 22px rgba(72, 229, 194, 0.5);
}

.kopf__werte {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wert {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 0.35rem 0.7rem;
  color: var(--kontur);
  background: var(--papier);
  border: 4px solid var(--kontur);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--kontur);
  text-decoration: none;
}

.wert__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.65;
}

.wert b {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

/* Punktestand: die wichtigste Zahl der Seite, entsprechend groß. Bei jedem
   Bonus setzt das Spiel kurz die Klasse "wert--stoss" – die Zahl springt an
   und fällt zurück. Mehr Bewegung braucht es außerhalb der Leinwand nicht. */
.wert--punkte {
  background: linear-gradient(180deg, #ffffff, #cdf6ec);
  min-width: 132px;
}

.wert--punkte b { font-size: 1.7rem; }

.wert--stoss { animation: stoss 0.34s ease-out; }

@keyframes stoss {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); box-shadow: 0 4px 0 var(--kontur), 0 0 26px rgba(255, 207, 63, 0.85); }
  100% { transform: scale(1); }
}

.wert--best { background: linear-gradient(180deg, #ffffff, #ffeeba); }

/* Combo: erscheint erst ab ×2 und pocht, solange sie steht. Die Farbe wandert
   mit der Höhe – Gelb, Orange, Pink –, damit man am Rand des Blickfelds sieht,
   wie viel gerade auf dem Spiel steht. */
.wert--kombo {
  color: var(--kontur);
  background: linear-gradient(180deg, #ffe89a, var(--gelb));
  animation: pochen 0.9s ease-in-out infinite;
}

.wert--kombo b { font-size: 1.55rem; }

.wert--kombo[data-stufe="3"] { background: linear-gradient(180deg, #ffd08a, var(--orange)); }
.wert--kombo[data-stufe="4"] { background: linear-gradient(180deg, #ff9ec4, var(--pink)); color: #2b0a1a; }
.wert--kombo[data-stufe="5"] {
  background: linear-gradient(180deg, #b8ffe9, var(--tuerkis));
  animation: pochen 0.45s ease-in-out infinite;
}

@keyframes pochen {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

.wert--link,
.wert--knopf {
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.wert--link:hover,
.wert--knopf:hover { background: #ffffff; }

.wert--knopf:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kontur); }

.wert--knopf[aria-pressed="true"] { background: linear-gradient(180deg, #ffffff, #cdf6ec); }

/* Sprachwahl: sieht aus wie die übrigen Karten der Kopfzeile, ist aber ein
   echtes <select>. Damit bedient sie sich auf dem Telefon mit dem Rad des
   Systems und am Rechner mit der Tastatur, ohne dass hier eine eigene
   Aufklappliste nachgebaut werden müsste. */
.wert--sprache { position: relative; cursor: pointer; }

/* Ein kleiner Pfeil verrät, dass hier etwas aufklappt – ohne ihn sähe die
   Karte aus wie die Anzeigen daneben. */
.wert--sprache::after {
  content: "▾";
  position: absolute;
  inset-inline-end: 0.4rem;
  bottom: 0.34rem;
  font-size: 0.75rem;
  opacity: 0.55;
  pointer-events: none;
}

.sprachwahl {
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  max-width: 8.5rem;
  padding: 0;
  padding-inline-end: 0.8rem;   /* Platz für den Pfeil */
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: center;
  /* Sonst setzt iOS eine eigene, hier viel zu hohe Schaltfläche darüber. */
  -webkit-appearance: none;
  appearance: none;
}

.sprachwahl:focus-visible { outline: 3px solid var(--kontur); outline-offset: 2px; }

/* Die Liste selbst zeichnet das System – dort gilt das Dunkel der Seite
   nicht, also ausdrücklich dunkle Schrift auf hellem Grund. */
.sprachwahl option { color: #101828; background: #ffffff; }

/* Rechts-nach-links (Arabisch): Kopfzeile, Listen und Fuß drehen sich mit.
   Leinwand, Bildschirmfeier und die Combo-Zahl bleiben, wie sie sind – dort
   stehen Zeichen und Ziffern, keine Sätze. */
[dir="rtl"] .buehne,
[dir="rtl"] .bildschirm,
[dir="rtl"] #anzeigeKombo { direction: ltr; }

/* Die Stufenleiste läuft dort von rechts nach links leer. */
[dir="rtl"] .fortschritt__fuellung { inset: 0 0 0 auto; }

/* Pause und Neigung gibt es nur auf Geräten ohne Tastatur und ohne Maus.
   Am Rechner pausiert die Leertaste, und geneigt wird dort ohnehin nichts. */
.wert--tippen { display: none; }

/* Schlaegt sowohl ".wert" als auch die Ausnahme fuer Tippgeraete unten. */
.wert[hidden] { display: none; }

.steuerung--tippen { display: none; }

@media (hover: none) and (pointer: coarse) {
  .wert--tippen { display: flex; }
  /* Ohne Tastatur nützt der Hinweis auf die Leertaste nichts. */
  .steuerung--maus { display: none; }
  .steuerung--tippen { display: inline; }
}

/* ---------- Aufbau ---------- */

.spiel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1rem;
  align-items: start;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.karte {
  background: var(--karte);
  border: 5px solid var(--kontur);
  border-radius: 20px;
  box-shadow: 0 6px 0 var(--kontur);
  padding: 0.9rem;
}

.karte__titel {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tuerkis);
}

.spalte-liste {
  display: grid;
  gap: 1rem;
}

.karte--liste { padding: 0.8rem; }
.karte--steuerung { padding: 0.6rem 0.9rem; }

.steuerung {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.8;
  color: #c3d3ee;
  text-align: center;
}

/* ---------- Stufenleiste ---------- */

.fortschritt {
  position: relative;
  height: 32px;
  margin-bottom: 0.7rem;
  background: var(--nacht-tief);
  border: 4px solid var(--kontur);
  border-radius: 12px;
  overflow: hidden;
}

.fortschritt__fuellung {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, #2bb99b, var(--tuerkis));
  transition: width 0.12s linear;
}

/* Ein Lichtstreifen wandert über die Leiste, solange gespielt wird. Das hält
   die Leiste im Blick, ohne dass sich ihre Zahlen ändern müssen. */
.fortschritt__fuellung::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 65%);
  transform: translateX(-100%);
  animation: wandern 1.8s linear infinite;
}

@keyframes wandern {
  to { transform: translateX(100%); }
}

.fortschritt__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--papier);
  text-shadow: 0 2px 0 var(--kontur), 0 0 6px var(--kontur);
}

/* ---------- Spielfläche ---------- */

.buehne {
  position: relative;
  border: 5px solid var(--kontur);
  border-radius: 16px;
  overflow: hidden;
  background: var(--nacht-tief);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6), 0 0 34px rgba(72, 229, 194, 0.14);
}

.buehne__leinwand {
  display: block;
  width: 100%;
  height: auto;
  /* Wischen soll die Wippe neigen und nicht die Seite scrollen. */
  touch-action: none;
  cursor: ew-resize;
}

/* Die Hinweiszeile trägt nur noch Rückmeldungen der Seite selbst. Ist nichts
   zu melden – und das ist der Normalfall –, ist sie gar nicht da. */
.meldung {
  margin: 0.7rem 0 0;
  min-height: 1.5em;
  text-align: center;
  font-size: 0.95rem;
  color: var(--gelb);
}

.meldung[hidden] { display: none; }

/* ---------- Bestenliste ---------- */

.besten {
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.28rem;
}

.besten li {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  font-size: 0.88rem;
  background: var(--nacht-tief);
  border: 3px solid var(--kontur);
  border-radius: 10px;
}

.besten--ich {
  background: linear-gradient(90deg, #1c4a41, #17392f);
  border-color: var(--tuerkis);
  box-shadow: 0 0 14px rgba(72, 229, 194, 0.4);
}

/* Die Liste neben dem Spiel steht schmaler als die in der Einblendung. */
.besten--klein li { padding: 0.26rem 0.4rem; font-size: 0.82rem; }

.besten__platz { text-align: center; }

.besten__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.besten__punkte {
  color: var(--gelb);
  font-variant-numeric: tabular-nums;
}

.besten li:nth-child(1) { border-color: var(--gelb); }
.besten li:nth-child(2) { border-color: #cfd8e8; }
.besten li:nth-child(3) { border-color: var(--orange); }

.besten__hinweis {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: #a9bcd9;
  text-align: center;
}

.besten__klein {
  margin: 0.8rem 0 0;
  font-size: 0.74rem;
  font-weight: 400;
  opacity: 0.68;
}

.overlay__box--besten .besten {
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 0.2rem;
}

/* ---------- Knöpfe ---------- */

.knopf {
  font: inherit;
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  color: var(--kontur);
  background: var(--papier);
  border: 4px solid var(--kontur);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--kontur);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.knopf:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--kontur); }
.knopf--gruen { background: linear-gradient(180deg, #8bf39a, var(--gruen)); }
.knopf--gelb { background: linear-gradient(180deg, #ffe89a, var(--gelb)); }
.knopf--grau { background: linear-gradient(180deg, #e7eefb, #c5d2e6); }
.knopf--gross { font-size: 1.3rem; padding: 0.8rem 2rem; }
.knopf--klein { font-size: 0.85rem; padding: 0.45rem 0.8rem; border-width: 3px; box-shadow: 0 4px 0 var(--kontur); }
.knopf--voll { width: 100%; }

/* ---------- Einblendungen ---------- */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(8, 15, 28, 0.86);
  backdrop-filter: blur(3px);
  z-index: 20;
}

/* Ein- und ausgeblendet wird durchgehend über das Attribut "hidden" – so
   steht in der Seite genau eine Wahrheit, und Vorlesegeräte lesen die
   verdeckten Einblendungen nicht mit. */
.overlay[hidden] { display: none; }

.overlay__box {
  max-width: 520px;
  width: 100%;
  padding: 1.6rem;
  text-align: center;
  background: var(--karte-hell);
  border: 5px solid var(--kontur);
  border-radius: 22px;
  box-shadow: 0 8px 0 var(--kontur), 0 0 60px rgba(72, 229, 194, 0.18);
  animation: auftritt 0.28s cubic-bezier(0.18, 1.3, 0.5, 1);
}

@keyframes auftritt {
  from { transform: scale(0.86) translateY(14px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.overlay__titel {
  margin: 0 0 0.8rem;
  font-size: 1.7rem;
  color: var(--tuerkis);
  text-shadow: 2px 2px 0 var(--kontur);
}

.overlay__pitch {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.55;
  color: #d6e2f7;
}

.overlay__knoepfe {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.overlay__klein {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.7;
}

/* ---------- Start: Namensfeld ---------- */

.start {
  display: grid;
  gap: 0.5rem;
  justify-items: stretch;
}

.start__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tuerkis);
  text-align: left;
}

.start__feld {
  font: inherit;
  font-size: 1.15rem;
  text-align: center;
  padding: 0.6rem 0.8rem;
  color: var(--kontur);
  background: var(--papier);
  border: 4px solid var(--kontur);
  border-radius: 14px;
}

.start__feld:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(72, 229, 194, 0.55);
}

/* ---------- Spielende: nur der Punktestand ---------- */

.overlay__box--ende { max-width: 460px; }

.badge {
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0.35rem 0.9rem;
  font-size: 0.95rem;
  color: var(--kontur);
  background: linear-gradient(180deg, #ffe89a, var(--gelb));
  border: 4px solid var(--kontur);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--kontur);
  animation: pochen 0.7s ease-in-out infinite;
}

.badge[hidden] { display: none; }

.ende__label {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tuerkis);
}

.ende__punkte {
  margin: 0.1rem 0 0;
  font-size: 4.2rem;
  line-height: 1.05;
  color: var(--gelb);
  font-variant-numeric: tabular-nums;
  text-shadow: 4px 4px 0 var(--kontur), 0 0 34px rgba(255, 207, 63, 0.55);
}

.ende__rang {
  margin: 0.35rem 0 0;
  min-height: 1.3em;
  font-size: 0.95rem;
  color: var(--papier);
}

.teilen {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

/* ---------- Der ganze Bildschirm feiert mit ---------- */

/* Bei einer Combo bleibt es nicht bei der Leinwand: Der Schirm blitzt auf,
   Konfetti fällt über die Seite und die Zahl schlägt groß durch.

   Leuchtende Ränder – Lampen ums Fenster, farbiger Schein an den Kanten,
   glühender Rahmen um die Spielfläche – waren einmal hier und sind wieder
   heraus: Sie zogen den Blick vom Turm weg, und genau der soll gehalten
   werden.

   Zwei Sorten Bewegung: Der Dauerzustand (Farbe der Stufenleiste, bei der
   höchsten Stufe Titel und Atmen der Seite) hängt allein an "data-kombo" am
   Körper der Seite, die Farbe der laufenden Stufe steht dort als --kombo. Die
   einzelnen Schläge (Blitz, Beben, Konfetti, Zahl) setzt das Spiel als
   einmalige Animationen.

   Die ganze Lage nimmt keine Klicks an: Gespielt wird darunter unverändert
   weiter. */

.bildschirm {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}

/* Das Aufblitzen. Farbe und Deckkraft setzt das Spiel, hier steht nur der
   Verlauf: hart an, weich aus. */
.bildschirm__blitz {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(255, 255, 255, 0.3);
}

.bildschirm__blitz--an { animation: blitzen 0.5s ease-out; }

@keyframes blitzen {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Konfetti: Schnipsel, die das Spiel einzeln einsetzt und die sich nach dem
   Fall selbst wieder abmelden. Maße, Farbe, Drift und Drehung stehen am
   Element. */
.bildschirm__konfetti { position: absolute; inset: 0; }

.schnipsel {
  position: absolute;
  top: -8vh;
  border-radius: 3px;
  animation-name: schnipselfall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes schnipselfall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate3d(var(--drift, 0px), 118vh, 0) rotate(var(--dreh, 360deg)); opacity: 0; }
}

/* Die Combo-Zahl, quer über den ganzen Schirm – Ziffern statt Worte. Sie
   bleibt durchscheinend: Gespielt wird währenddessen weiter, der Turm darf
   nicht hinter ihr verschwinden. */
.bildschirm__zahl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3.5rem, 15vw, 11rem);
  letter-spacing: 0.02em;
  opacity: 0;
  text-shadow: 5px 5px 0 var(--kontur), 0 0 46px currentColor;
}

.bildschirm__zahl--an { animation: zahlschlag 0.8s cubic-bezier(0.16, 1.1, 0.3, 1); }

@keyframes zahlschlag {
  0%   { opacity: 0; transform: scale(0.35); }
  16%  { opacity: 0.72; transform: scale(1.1); }
  55%  { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.55); }
}

/* Der Dauerzustand nach Combo-Stufe. Kein Leuchten an Rändern und Rahmen –
   die Farbe der Stufe färbt allein die Stufenleiste, bei der höchsten Stufe
   auch den Titel. */
body[data-kombo] .fortschritt__fuellung {
  background: linear-gradient(90deg, var(--kombo-hauch), var(--kombo));
}

body[data-kombo="5"] .kopf__titel {
  color: var(--kombo);
  text-shadow: 3px 3px 0 var(--kontur), 0 0 28px var(--kombo-weich);
}

/* Die höchste Stufe atmet mit der ganzen Seite – kaum messbar, aber deutlich
   zu spüren. */
body[data-kombo="5"] .seite { animation: hauptgewinn 0.52s ease-in-out infinite; }

@keyframes hauptgewinn {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.006); }
}

/* Beben: bei jeder Combo-Stufe kurz, bei der höchsten Stufe, einer neuen Wippe
   und beim Absturz kräftig. Steht nach der Combo-Animation, damit es sie
   überstimmt, solange es läuft. */
.seite.beben { animation: beben 0.4s ease-in-out; }
.seite.beben--stark { animation: bebenstark 0.64s ease-in-out; }

@keyframes beben {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  20%      { transform: translate3d(-6px, 2px, 0) rotate(-0.3deg); }
  40%      { transform: translate3d(5px, -2px, 0) rotate(0.26deg); }
  60%      { transform: translate3d(-4px, 1px, 0) rotate(-0.18deg); }
  80%      { transform: translate3d(2px, -1px, 0) rotate(0.1deg); }
}

@keyframes bebenstark {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  12%      { transform: translate3d(-13px, 4px, 0) rotate(-0.7deg); }
  26%      { transform: translate3d(12px, -4px, 0) rotate(0.62deg); }
  40%      { transform: translate3d(-10px, 3px, 0) rotate(-0.5deg); }
  54%      { transform: translate3d(8px, -3px, 0) rotate(0.4deg); }
  68%      { transform: translate3d(-6px, 2px, 0) rotate(-0.28deg); }
  82%      { transform: translate3d(3px, -1px, 0) rotate(0.14deg); }
}

/* ---------- Fuß ---------- */

.fuss {
  max-width: 1320px;
  margin: 1.2rem auto 0;
  padding: 0 1.25rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.6;
}

.fuss a { color: var(--papier); }

.taste {
  display: inline-block;
  padding: 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--kontur);
  background: var(--papier);
  border-radius: 5px;
  border-bottom: 2px solid #98a8c4;
}

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 980px) {
  .spiel { grid-template-columns: minmax(0, 1fr); }
  .kopf__titel { font-size: 1.5rem; }
  .wert { min-width: 74px; padding: 0.3rem 0.5rem; }
  .wert b { font-size: 1.05rem; }
  .wert--punkte { min-width: 104px; }
  .wert--punkte b { font-size: 1.35rem; }
}

/* Auf dem Telefon zählt jeder Pixel Höhe für die Spielfläche. Die Kopfzeile
   wird deshalb einzeilig und schmal: Der Titel steht schon im Fuß, die Werte
   reichen klein. */
@media (max-width: 620px) {
  .kopf {
    padding: 0.5rem 0.6rem;
    gap: 0.4rem;
  }
  .kopf__marke { width: 100%; justify-content: center; }
  .kopf__zeichen { font-size: 1.2rem; }
  .kopf__titel { font-size: 1.15rem; }
  .kopf__werte { gap: 0.3rem; width: 100%; justify-content: center; }
  .spiel { padding: 0 0.6rem; gap: 0.6rem; }
  .karte { padding: 0.5rem; border-radius: 16px; }
  .wert {
    min-width: 0;
    padding: 0.25rem 0.45rem;
    border-width: 3px;
    border-radius: 10px;
    box-shadow: 0 3px 0 var(--kontur);
  }
  .wert__label { font-size: 0.55rem; }
  .wert b { font-size: 0.95rem; }
  .wert--punkte { min-width: 92px; }
  .wert--punkte b { font-size: 1.2rem; }
  .wert--link { display: none; }        /* der Fuß führt zurück */
  .fortschritt { height: 26px; }
  .fortschritt__text { font-size: 0.75rem; }
  .meldung { font-size: 0.85rem; margin-top: 0.5rem; }
  .ende__punkte { font-size: 3.2rem; }
}

/* Wer Bewegung reduziert haben will, bekommt keine Dauerbewegung außerhalb
   der Leinwand. Das Spiel selbst lebt von Bewegung – die lässt sich nicht
   abschalten. */
@media (prefers-reduced-motion: reduce) {
  .fortschritt__fuellung { transition: none; }
  .fortschritt__fuellung::after,
  .wert--kombo,
  .badge { animation: none; }
  .overlay__box { animation: none; }
  .wert--stoss { animation: none; }

  /* Die Feier bleibt – aber ruhig: Farbe und ein Aufblitzen ja, Konfetti,
     Beben und Atmen nein. Beben und Konfetti lässt das Spiel dann schon von
     sich aus weg (ruhigeAnzeige). */
  body[data-kombo="5"] .seite,
  .bildschirm__zahl--an,
  .seite.beben,
  .seite.beben--stark { animation: none; }
  .schnipsel { display: none; }
  .bildschirm__zahl--an { opacity: 0; }
}

/* ---------- Text unter dem Spiel ----------

   Er steht bewusst unter der Spielfläche und nicht daneben: Wer spielen will,
   sieht ihn nie; wer wissen will, worum es geht, scrollt einmal. Leiser
   gesetzt als das Spiel darüber – gleiche Breite, gleiche Ränder. */

.info {
  max-width: 1320px;
  margin: 2.5rem auto 0;
  padding: 0 1.25rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--papier);
  opacity: 0.82;
}

.info h2 {
  margin: 0 0 0.6rem;
  font-size: 1.35rem;
  line-height: 1.25;
}

.info h3 {
  margin: 1.8rem 0 0.5rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

.info p { margin: 0 0 0.9rem; max-width: 68ch; }

.info__liste {
  margin: 0;
  padding-left: 1.2rem;
  max-width: 68ch;
}

.info__liste li { margin: 0.3rem 0; }

.info__fragen { margin: 0; max-width: 68ch; }
.info__fragen dt { font-weight: 700; margin-top: 0.9rem; }
.info__fragen dd { margin: 0.2rem 0 0; }

/* Von rechts nach links (Arabisch) kippen Einzüge auf die andere Seite. */
[dir="rtl"] .info__liste { padding-left: 0; padding-right: 1.2rem; }