/* Start-Splash (seit 2026-09-29, zuerst Gravity 9). Steht als erstes Element im
   <body> und ist damit im ersten Bild da, bevor ein Modul laedt. Er verdeckt die
   Sprünge beim Start (englisch → Grafik → Sprache) und blendet aus, sobald das
   Spiel splash.ready() meldet, nie vor 1000 ms (sonst wirkt er zu kurz, splash.js MIN_MS).
   Die Flaeche blendet nicht ein, nur ihr Inhalt: sonst saehe man zuerst Schwarz.
   Sicherung ohne JS: Laedt kein Modul, geht er nach 2,5 s von selbst. Der Wert
   steht auch in splash.js (FAILSAFE_MS), beide gemeinsam aendern.
   Pro Spiel: --splash-bg und --splash-rim am Element, Logo und Wortmarke im HTML.
   Gestaltet wird pro Spiel nichts (Splash-Standard, docs/sichtbarkeit.md): auch die
   Wortmarke und ihre Schrift stehen hier. Das Spiel legt einen Preload auf
   jost-latin.woff2, sonst erscheint der Name im ersten Bild in der Ersatzschrift. */

/* Jost 300, der einzige Schnitt, den der Splash braucht. Gravity 9 nutzt ihn auch
   im Spiel und bezieht ihn von hier. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/jost-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/jost-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--splash-bg, #000);
  animation: splash-failsafe 400ms ease-out 2.5s forwards;
}
.splash > * { animation: splash-in 300ms ease-out both; }
.splash--gone { animation: splash-out 400ms ease-out forwards; }

.splash-logo {
  width: 200px;
  height: 200px;
  display: block;
  border-radius: 26px;
  outline: 2px solid var(--splash-rim, rgba(255, 255, 255, 0.35));
  outline-offset: -2px;
}

/* Wortmarke: Versalien in Jost Light, gesperrt, wie im OG-Banner. Gewählt
   2026-09-29, tools/html/start-splash-mockup.html, B. Die Sperrung auch links,
   sonst steht der Name um eine Sperrweite neben der Logo-Mitte. */
.splash-word {
  font: 300 22px 'Jost', system-ui, sans-serif;
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  /* --splash-ink nur fuer helle Gruende (seit Merge 9), sonst Creme. */
  color: var(--splash-ink, #f4f1ea);
}

/* Aufbau nach dem Kachel-Logo-Standard (2026-10-11, zuerst Gravity 9): die 9 frei auf dem
   Grund, darunter der Name-Baustein, beide inline aus dem Logo-Generator. Die 9 liegt auf
   einer 512er-Flaeche (Box 60 %, Leuchten ringsum), die negativen Raender ziehen den Leerraum
   ueber und unter der Box heraus, damit der Name nah an der 9 steht. */
.splash-nine {
  width: 320px;
  height: 320px;
  margin-block: -64px -58px;
  overflow: visible;
}
.splash-name {
  width: 230px;
  height: auto;
}

@keyframes splash-in { from { opacity: 0; transform: scale(0.96); } }
/* Zwei Namen für dieselben Keyframes: Bei gleichem Namen startete der Browser die
   Animation beim Klassenwechsel nicht neu, sondern übernahm nur das neue Timing.
   Nach 600 ms war die 400-ms-Ausblendung damit sofort vorbei, der Splash verschwand hart. */
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }
@keyframes splash-failsafe { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .splash > * { animation: none; }
  .splash, .splash--gone { animation-duration: 1ms; }
}