/* =========================================================================
   SCHMEDI — das Spiel hinter dem Auge

   Liegt ueber allem. Wird erst sichtbar, wenn man das Auge erwischt hat.
   Die Farben kommen aus kosmos.css, damit es aussieht wie der Rest.
   ========================================================================= */

/* Das Auge ist anklickbar. Es weicht trotzdem aus - das ist der Witz.
   Nach ein paar Sekunden Jagd gibt es auf, sonst findet es nie jemand.

   ACHTUNG z-index: .auge liegt auf 1, der Seiteninhalt (.seite) auf 2.
   Das Auge schwebt also HINTER dem Text, und dort kommt kein Klick an.
   Darum wird es nur in dem Moment nach vorne geholt, in dem man es auch
   fangen soll - sonst bliebe das Aussehen der Seite nicht, wie es war.
   Unter der Kopfzeile (z-index 40) bleibt es in jedem Fall. */
.auge {
  pointer-events: auto;
  cursor: pointer;
}
.auge.gibt-auf,
.auge.tippbar {
  z-index: 39;
}
.auge.gibt-auf {
  animation: auge-zappeln 520ms ease-in-out 2;
}
@keyframes auge-zappeln {
  0%, 100% { rotate: 0deg; }
  25%      { rotate: -7deg; }
  75%      { rotate: 7deg; }
}

/* Kleiner Hinweis, der neben dem Auge auftaucht, wenn es aufgibt */
.auge-hinweis {
  position: fixed;
  z-index: 60;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgb(7 5 16 / 0.86);
  border: var(--rand);
  padding: 0.45rem 0.7rem;
  pointer-events: none;
  opacity: 0;
  translate: 0 0.4rem;
  transition: opacity 240ms, translate 240ms;
}
.auge-hinweis.da { opacity: 1; translate: 0 0; }

/* ----------------------------------------------------------- Die Buehne */

.spiel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: rgb(4 3 10 / 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms, visibility 240ms;
}
.spiel.offen { opacity: 1; visibility: visible; }

.spiel__feld {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.spiel__zu {
  position: absolute;
  top: max(0.9rem, env(safe-area-inset-top));
  right: 0.9rem;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: var(--rand);
  color: var(--bone);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
}
.spiel__zu:hover { background: rgb(239 230 221 / 0.1); border-color: var(--bone); }

/* ------------------------------------------------------------ Die Tafeln */

.spiel__tafel {
  position: absolute;
  z-index: 2;
  width: min(92%, 27rem);
  padding: 2rem 1.6rem 1.8rem;
  text-align: center;
  background: rgb(7 5 16 / 0.92);
  border: var(--rand);
  backdrop-filter: blur(8px);
}
.spiel__tafel[hidden] { display: none; }

.spiel__tafel h2 {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 80%;
  text-transform: uppercase;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 0.88;
  margin: 0 0 0.7rem;
  color: var(--bone);
}
.spiel__tafel p {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.4rem;
  line-height: 1.9;
}
.spiel__zahlen {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  margin-bottom: 1.4rem;
}
.spiel__zahl {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 82%;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--magenta);
}
.spiel__zahl span {
  display: block;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-top: 0.5rem;
}
.spiel__rekord { color: var(--filament); }

.spiel__knoepfe { display: grid; gap: 0.6rem; }
.spiel__knopf {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--magenta);
  background: none;
  color: var(--bone);
  cursor: pointer;
  transition: background 160ms;
}
.spiel__knopf:hover { background: rgb(255 47 160 / 0.16); }
.spiel__knopf--leise { border-color: rgb(239 230 221 / 0.22); color: var(--muted); }
.spiel__knopf--leise:hover { background: rgb(239 230 221 / 0.07); }

@media (prefers-reduced-motion: reduce) {
  .spiel { transition: none; }
  .auge.gibt-auf { animation: none; }
}