/* ===========================================================================
   MARA Spiele — gemeinsames Design
   Kindgerecht: grosse Flaechen, kraeftige Farben, klare Formen, keine Emojis.
   Wird von jeder Spielseite eingebunden.
   =========================================================================== */

:root {
  --ink: #23252e;
  --ink-soft: #5b6070;
  --paper: #ffffff;
  --paper-soft: #f4f1ea;

  --rot: #ff5d5d;
  --orange: #ff9f43;
  --gelb: #ffd23f;
  --gruen: #4ecb71;
  --tuerkis: #35c8c0;
  --blau: #4d9bff;
  --lila: #a97bff;
  --pink: #ff7ec1;
  --braun: #b07d52;

  --schatten: 0 4px 0 rgba(0, 0, 0, .13);
  --schatten-tief: 0 8px 22px rgba(30, 25, 60, .18);
  --rund: 20px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
  font-family: "Nunito", "Baloo 2", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Trebuchet MS", Roboto, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

body.spiel {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.hidden { display: none !important; }

/* ------------------------------------------------------------- Kopfzeile */
.kopf {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem max(.8rem, env(safe-area-inset-right)) .4rem max(.8rem, env(safe-area-inset-left));
}
.kopf h1 {
  font-size: 1.15rem;
  margin: 0;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kopf .abstand { flex: 1 1 auto; }

/* Auf schmalen Handys ist kein Platz fuer Titel + zwei Anzeigen + drei Knoepfe.
   Der Titel weicht dann, die Bedienelemente bleiben in voller Groesse. */
@media (max-width: 460px) {
  .kopf h1 { display: none; }
}

/* Runde Symbolschaltflaeche (Zuhause, Vollbild, Ton, Neu) */
.rund-btn {
  width: 2.9rem; height: 2.9rem;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--schatten);
  transition: transform .08s, background .15s;
}
.rund-btn:active { transform: translateY(3px); box-shadow: none; }
.rund-btn svg { width: 1.5rem; height: 1.5rem; }

/* Punkte-/Zeitanzeige */
.anzeige {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255, 255, 255, .75);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: var(--schatten);
  font-variant-numeric: tabular-nums;
}
.anzeige svg { width: 1.15rem; height: 1.15rem; opacity: .75; }

/* --------------------------------------------------------------- Buehne */
.buehne {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .3rem max(.6rem, env(safe-area-inset-right))
           max(.5rem, env(safe-area-inset-bottom)) max(.6rem, env(safe-area-inset-left));
}
.buehne canvas {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  display: block;
  border-radius: var(--rund);
  box-shadow: var(--schatten-tief);
  touch-action: none;
}

/* Hinweiszeile unter der Buehne */
.hinweis {
  flex: 0 0 auto;
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 .5rem;
  padding: 0 .8rem;
}

/* ------------------------------------------------------- Auswahl-Leisten */
.leiste {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center;
  padding: 0 .6rem .5rem;
}
.leiste .chip {
  border: none;
  border-radius: 999px;
  padding: .55rem 1rem;
  min-height: 2.75rem;
  font: inherit;
  font-weight: 800;
  font-size: .95rem;
  background: rgba(255, 255, 255, .75);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--schatten);
  display: inline-flex; align-items: center; gap: .35rem;
  transition: transform .08s;
}
.leiste .chip svg { width: 1.35rem; height: 1.35rem; }
.leiste .chip:active { transform: translateY(3px); box-shadow: none; }
.leiste .chip.aktiv { background: var(--ink); color: #fff; }

/* Einzeilige, seitlich schiebbare Variante — spart auf dem Handy viel Hoehe */
.leiste.rollbar {
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: flex-start;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  padding-left: max(.6rem, env(safe-area-inset-left));
  padding-right: max(.6rem, env(safe-area-inset-right));
}
.leiste.rollbar::-webkit-scrollbar { display: none; }
.leiste.rollbar .chip { flex: 0 0 auto; scroll-snap-align: center; }

/* ------------------------------------------------------------- Overlays */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20, 18, 40, .55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  animation: einblenden .25s ease;
}
@keyframes einblenden { from { opacity: 0 } to { opacity: 1 } }

.overlay .box {
  background: var(--paper);
  border-radius: 26px;
  padding: 1.6rem 1.5rem 1.4rem;
  text-align: center;
  max-width: 340px;
  width: 100%;
  box-shadow: var(--schatten-tief);
  animation: aufpoppen .3s cubic-bezier(.2, 1.3, .5, 1);
}
@keyframes aufpoppen { from { transform: scale(.8); opacity: 0 } to { transform: scale(1); opacity: 1 } }

.overlay .box h2 { margin: .4rem 0 .3rem; font-size: 1.4rem; font-weight: 800; }
.overlay .box p { margin: 0 0 .2rem; color: var(--ink-soft); font-weight: 600; }
.overlay .box .pokal { width: 5rem; height: 5rem; }

.gross-btn {
  margin-top: 1rem;
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: .95rem 1.4rem;
  font: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  background: var(--gruen);
  color: #10331f;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .16);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: transform .08s;
}
.gross-btn:active { transform: translateY(4px); box-shadow: none; }
.gross-btn svg { width: 1.3rem; height: 1.3rem; }
.gross-btn.zweit { background: var(--paper-soft); color: var(--ink); margin-top: .6rem; }

/* Sterne-Bewertung im Gewonnen-Fenster */
.sterne { display: flex; justify-content: center; gap: .25rem; margin: .5rem 0 .2rem; }
.sterne svg { width: 2.1rem; height: 2.1rem; color: #d8d4cc; }
.sterne svg.voll { color: var(--gelb); animation: sternPop .35s cubic-bezier(.2,1.5,.4,1) backwards; }
.sterne svg.voll:nth-child(2) { animation-delay: .12s; }
.sterne svg.voll:nth-child(3) { animation-delay: .24s; }
@keyframes sternPop { from { transform: scale(0) rotate(-40deg) } to { transform: scale(1) rotate(0) } }

/* ------------------------------------------------------------ Schublade
   Alles, was man nur ab und zu braucht (Bild aussuchen, Thema wechseln,
   speichern), liegt in einer Schublade. So bleibt der Spielbildschirm leer
   und ein kleines Kind sieht immer nur das, worum es gerade geht. */
.schub {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20, 18, 40, .5);
  backdrop-filter: blur(2px);
  display: flex; align-items: flex-end;
  animation: einblenden .2s ease;
}
.schub-inhalt {
  background: var(--paper); width: 100%;
  border-radius: 26px 26px 0 0;
  padding: .9rem .9rem calc(1rem + env(safe-area-inset-bottom));
  max-height: 88vh; overflow-y: auto;
  animation: hochfahren .26s cubic-bezier(.2, 1.1, .5, 1);
}
@keyframes hochfahren { from { transform: translateY(100%) } to { transform: translateY(0) } }
.schub-kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.schub-kopf h2 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.schub-kopf .abstand { flex: 1 1 auto; }

/* Auswahl mit Bildern statt Woertern — Grundmuster fuer alle Schubladen */
.bildgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: .6rem; }
.bildgitter button {
  border: none; border-radius: 18px; cursor: pointer; padding: .3rem;
  background: var(--paper-soft); box-shadow: var(--schatten);
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  transition: transform .1s;
}
.bildgitter button:active { transform: translateY(3px); box-shadow: none; }
.bildgitter button.aktiv { box-shadow: 0 0 0 3px var(--ink), var(--schatten); background: #fff; }
.bildgitter canvas, .bildgitter svg {
  width: 100%; height: auto; aspect-ratio: 1 / 1;
  border-radius: 13px; background: #fff;
}
.bildgitter span { font-size: .72rem; font-weight: 800; color: var(--ink-soft); }

/* Quer ist wenig Hoehe da — dann lieber mehr Spalten als Scrollen. */
@media (orientation: landscape) and (max-height: 560px) {
  .bildgitter { grid-template-columns: repeat(auto-fill, minmax(4.8rem, 1fr)); }
  .bildgitter span { font-size: .64rem; }
}

/* ------------------------------------------------------------ Startseite */
body.start {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.2rem max(1rem, env(safe-area-inset-right))
           max(1.4rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  overflow-y: auto;
}

/* --------------------------------------------------- Fehlgriff-Zeichen
   Erscheint da, wo daneben getippt wurde. Ueberall dasselbe Zeichen, damit
   ein Kind die Bedeutung nur einmal lernen muss. Sichtbar auch bei
   abgeschaltetem Ton — vorher war ein Fehlgriff dann voellig folgenlos. */
.daneben-marke {
  position: fixed; z-index: 90;
  width: 3rem; height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  pointer-events: none;
  color: #ff5d5d;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .3));
  animation: daneben-weg .56s cubic-bezier(.3, 1.4, .5, 1) forwards;
}
.daneben-marke svg { width: 100%; height: 100%; display: block; }
@keyframes daneben-weg {
  0%   { transform: scale(.4) rotate(-14deg); opacity: 0 }
  28%  { transform: scale(1.12) rotate(7deg); opacity: 1 }
  100% { transform: scale(1) rotate(0deg);    opacity: 0 }
}