/* Spielbretter, die Kinder UND Erwachsene sehen.
 *
 * Mau-Mau und „Mensch ärgere dich nicht" laufen über zwei Geräte —
 * eines davon kann Omas Tablet im Elternbereich sein. Damit beide
 * Seiten gleich aussehen, stehen die Stile hier und nicht in einer der
 * beiden Oberflächen. */

/* ------------------------------------------------ Kartenspiele (Mau-Mau) */
.spielkarte {
  width: 4.6rem;
  height: 6.4rem;
  border-radius: 12px;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: 0 0 auto;
  transition: transform .12s ease;
}
button.spielkarte:active { transform: translateY(3px) scale(.97); }
button.spielkarte:not(:disabled):hover { transform: translateY(-4px); }
.spielkarte--klein { width: 3.4rem; height: 4.8rem; }
.spielkarte--matt { opacity: .38; filter: grayscale(.5); }
.spielkarte__zeichen {
  font-size: 2.1rem;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
.spielkarte--klein .spielkarte__zeichen { font-size: 1.6rem; }

.maumau__tisch {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: flex-end;
  margin: 1rem 0;
}
.maumau__hand {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: .8rem;
  background: rgba(255, 255, 255, .55);
  border-radius: var(--r-lg);
  min-height: 7rem;
}
.maumau__wunsch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  max-width: 24rem;
  margin: 1.5rem auto;
}

/* ------------------------------------- Mensch ärgere dich nicht */
.madn { display: grid; place-items: center; }
.madn svg { width: min(88vw, 22rem); height: auto; }
.wuerfel {
  width: 5.5rem; height: 5.5rem;
  border-radius: var(--r);
  border: none;
  background: #fff;
  box-shadow: var(--shadow-lg, 0 6px 20px rgba(0,0,0,.18));
  font-size: 3.2rem;
  line-height: 1;
  cursor: pointer;
}
.wuerfel:disabled { opacity: .45; cursor: default; }
.wuerfel:not(:disabled):active { transform: scale(.94); }

.figurwahl {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: .6rem 0;
}
.figurknopf {
  display: grid;
  justify-items: center;
  gap: .1rem;
  min-width: 5rem;
  padding: .6rem .5rem;
  border: none;
  border-radius: var(--r);
  color: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
  font: inherit;
  font-size: 1.4rem;
}
.figurknopf small { font-size: .72rem; font-weight: 700; }


/* „Oma möchte mit dir spielen!"
 *
 * Ein Ruf füllt den ganzen Bildschirm — genau wie ein Gruß. Vorher landete
 * eine Einladung nur als Zahl an der Glocke, und ein Fünfjähriger hätte
 * selbst zu „Zusammen spielen" navigieren müssen. Das findet niemand.
 * Einen Code gibt es hier nicht: Der Platz ist reserviert, die App kennt
 * den Code und benutzt ihn selbst. */
.spielruf {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(20, 30, 45, .72);
  backdrop-filter: blur(3px);
  animation: spielruf-auf .25s ease;
}
@keyframes spielruf-auf {
  from { opacity: 0; }
  to { opacity: 1; }
}
.spielruf__karte {
  width: min(92vw, 24rem);
  padding: 1.8rem 1.4rem;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  text-align: center;
  animation: spielruf-hoch .3s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes spielruf-hoch {
  from { transform: translateY(24px) scale(.94); }
  to { transform: translateY(0) scale(1); }
}
.spielruf__wer {
  font-size: 1.3rem;
  font-weight: 800;
  margin-top: .9rem;
  line-height: 1.3;
}
.spielruf__spiel {
  margin-top: .3rem;
  font-size: 1.05rem;
  color: #5a6b7d;
}

/* Was eine Karte auslöst, steht klein in der Ecke — die Karte selbst
   bleibt erkennbar, so wie ein echtes Blatt. */
.spielkarte { position: relative; }
.spielkarte__hinweis {
  position: absolute;
  bottom: .2rem;
  right: .25rem;
  font-size: .8rem;
  font-weight: 800;
  background: rgba(255, 255, 255, .9);
  color: #1d2733;
  border-radius: 6px;
  padding: 0 .2rem;
}

/* „Wirklich aufhören?"
 *
 * Ein Fehltipp beendet das Spiel für beide — der andere sitzt dann vor
 * einem leeren Bildschirm. Der harmlose Knopf ist der auffällige, und wer
 * danebentippt, spielt weiter. */
.aufhoeren {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(20, 30, 45, .6);
  backdrop-filter: blur(2px);
}
.aufhoeren__karte {
  width: min(92vw, 22rem);
  padding: 1.6rem 1.3rem;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .3);
  text-align: center;
}
.aufhoeren__ico { font-size: 2.8rem; line-height: 1; }
.aufhoeren__karte h2 { margin: .6rem 0 .3rem; font-size: 1.25rem; }
.aufhoeren__karte p { margin: 0; color: #5a6b7d; }

.aufhoeren--gross .aufhoeren__karte { width: min(94vw, 25rem); padding: 2rem 1.5rem; }
.aufhoeren--gross .aufhoeren__ico { font-size: 3.6rem; }
.aufhoeren--gross .aufhoeren__karte h2 { font-size: 1.5rem; }
.aufhoeren--gross .aufhoeren__karte p { font-size: 1.05rem; }

/* Beim Frage-Rennen sieht auch der Wartende, was gerade passiert ist. */
.quizletzte {
  display: grid;
  gap: .15rem;
  padding: .7rem .9rem;
  border-radius: var(--r, 14px);
  margin: .6rem 0;
  font-size: .95rem;
}
.quizletzte--gut { background: #d8f5e6; }
.quizletzte--schlecht { background: #ffe3e3; }
.quizletzte b { font-size: 1rem; }
.quizletzte small { opacity: .8; }