/* Sheeptastical Landing Page
   Look kommt aus dem Spiel: Comic-Outline #241f2e, Wollweiss #f7f3e8,
   Daemmerhimmel. Die Inhalte sind Sticker, die ueber der lebenden Welt kleben. */

@font-face {
  font-family: 'Sheep';
  src: url('fonts/Sheep.ttf') format('truetype');
  font-display: swap;
}

/* WICHTIG: ueberall, wo die Sheep-Schrift gesetzt wird, gehoert
   `font-variant-ligatures: no-common-ligatures` dazu (in @font-face
   selbst waere die Eigenschaft wirkungslos, das ist keine
   Schrift-Beschreibung).

   Die Schrift bringt eine eingebaute Ligatur mit, die "Sheep" mit
   grossem S zu "Sheep!" macht -- offenbar ein Osterei des
   Schriftgestalters. Aus dem Markennamen wird dadurch ungefragt
   "Sheep!tastical". Der Titel im Hero faellt nicht darauf herein, weil
   main.js ihn Buchstabe fuer Buchstabe in eigene Spans zerlegt und eine
   Ligatur so gar nicht entstehen kann; ueberall sonst schon.

   Gemessen bei 100 px: "Sheep" wird mit Ligatur 240 px breit statt 228.
   Sie steckt in den GEWOEHNLICHEN Ligaturen (liga), nicht in den
   kontextuellen -- `no-contextual` allein hilft nicht. Mit abgeschaltet
   wird die ee-Verbindung, bei "Shee" ein Unterschied von 171 zu 178 px,
   der praktisch nicht auffaellt. */

:root {
  --ink: #241f2e;
  --wool: #f7f3e8;
  --dim: #b9b3c6;
  --grass: #6faf54;
  --grass-dark: #548a42;
  --gold: #e8c86a;
  --crystal: #b478e8;
  --flood: #6f4a1f;
  --flood-hi: #9b6f35;
  --sky-hi: #707a9c;

  --panel: rgba(24, 26, 50, 0.9);
  --panel-dark: rgba(12, 13, 30, 0.92);

  --shadow: 5px 6px 0 rgba(12, 10, 22, 0.55);
  --shadow-sm: 3px 4px 0 rgba(12, 10, 22, 0.5);
  --r: 20px;

  --body: ui-rounded, 'SF Pro Rounded', 'Segoe UI', Roboto, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #1b2138;
  color: var(--wool);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
}

/* Jedes Element mit data-art bekommt sein Original-SVG als Hintergrund */
[data-art] {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.sheepfont {
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ----------------------------------------------------------- lebende Welt */

#world {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  /* Fallback, solange das Canvas noch nichts gezeichnet hat */
  background: linear-gradient(#4d5878, #707a9c 55%, #a9a3b4);
}

main,
footer {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------- HUD */

.hud {
  position: fixed;
  z-index: 5;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 0;
  /* --vw ist die echte Fensterbreite ohne Scrollleiste, s. main.js */
  width: var(--vw, 100%);
  padding: 0 calc(env(safe-area-inset-right, 0px) + 12px) 0 calc(env(safe-area-inset-left, 0px) + 12px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

/* Der Hoehenmesser bekommt dieselbe Kapsel wie die Knoepfe: auf hellem Himmel
   war die blanke Zahl kaum zu sehen. */
.hud-alt {
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: 26px;
  line-height: 1;
  color: var(--wool);
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  height: 34px;
  padding: 0 13px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(28, 30, 54, 0.8);
  box-shadow: var(--shadow-sm);
  align-self: flex-start;
  /* Zahl und Einheit auf einer Grundlinie in der Kapsel */
  align-items: center;
}

.hud-alt-unit {
  font-size: 15px;
  color: var(--dim);
  transform: translateY(2px);
}

.hud-btns {
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(28, 30, 54, 0.8);
  color: var(--wool);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
}

.chip:active {
  transform: translate(3px, 4px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.chip-icon {
  width: 40px;
  padding: 0;
  justify-content: center;
}

/* Die Groessenangaben stehen hier mit drin: der Ton-Knopf bekommt sein Bild
   per JS und traegt kein data-art, greift also nicht ueber die Sammelregel. */
.chip-art {
  width: 22px;
  height: 22px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.55;
  transition: opacity 0.15s;
}

.chip[aria-pressed='true'] .chip-art {
  opacity: 1;
}

.chip-label {
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: 15px;
  letter-spacing: 0.03em;
}

/* ------------------------------------------------------------------ HERO */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* Der Titel sitzt oben: darunter braucht das Schaf Platz zum Fliegen */
  padding: max(78px, 11vh) 18px 92px;
  text-align: center;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
  pointer-events: none;
}

.hero-inner a {
  pointer-events: auto;
}

/* Weicher Schleier, damit der Titel ueber der lebenden Welt lesbar bleibt.
   Sitzt bewusst im Hero und nicht am Textblock: ein ueberstehendes
   Pseudo-Element zieht das Dokument seitlich auf, und auf dem Handy laesst
   sich die Seite dann nach links schieben. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    ellipse 90% 42% at 50% 34%,
    rgba(12, 14, 32, 0.6) 0%,
    rgba(12, 14, 32, 0.34) 46%,
    rgba(12, 14, 32, 0) 74%
  );
  pointer-events: none;
}

/* Wortmarke: jeder Buchstabe eine Regenbogenfarbe, dicke Outline hinten,
   Fuellung vorn. Kipp-Bewegung und Glitzer sind aus der MenuScene uebernommen
   (Container-Tween -1,5 bis 1,5 Grad, dazu Sternenstaub im 140-ms-Takt). */

.wordmark-wrap {
  position: relative;
  margin-bottom: 14px;
}

.spark {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  background: var(--star) center / contain no-repeat;
  animation: sparkle var(--dur) ease-out forwards;
}

@keyframes sparkle {
  0% {
    transform: translate(var(--x), var(--y)) rotate(var(--a)) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x), calc(var(--y) - 14px)) rotate(calc(var(--a) + 140deg))
      scale(var(--s));
    opacity: 0;
  }
}

.wordmark {
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: clamp(38px, 13.2vw, 104px);
  font-weight: 400;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.012em;
  white-space: nowrap;
  display: flex;
  justify-content: center;
}

.wordmark .l {
  position: relative;
  display: inline-block;
  animation: wave 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.09s);
}

.wordmark .l .stroke,
.wordmark .l .fill {
  display: block;
}

.wordmark .l .stroke {
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 0.13em var(--ink);
  text-stroke: 0.13em var(--ink);
}

.wordmark .l .fill {
  position: relative;
  color: var(--c);
}

.wordmark .l .stroke {
  text-shadow: 0 5px 0 rgba(12, 10, 22, 0.35);
}

@keyframes wave {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.07em);
  }
}

.claim {
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: clamp(21px, 6.2vw, 34px);
  text-wrap: balance;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--wool);
  text-shadow: 0 3px 0 rgba(12, 10, 22, 0.5);
}

.sub {
  margin: 0 auto 22px;
  max-width: 30ch;
  color: #ded9ea;
  font-size: 15.5px;
  text-shadow: 0 1px 3px rgba(12, 10, 22, 0.65);
}

/* Der Knopf in den Spielmodus: das dickste Element der Seite */

.playbtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 26px 12px 20px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(var(--grass), var(--grass-dark));
  color: var(--wool);
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: 25px;
  cursor: pointer;
  box-shadow: 6px 7px 0 rgba(12, 10, 22, 0.55);
  text-shadow: 0 2px 0 rgba(12, 10, 22, 0.45);
  pointer-events: auto;
  transition: transform 0.12s, box-shadow 0.12s;
  animation: breathe 3.2s ease-in-out infinite;
}

.playbtn:active {
  transform: translate(5px, 6px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  animation: none;
}

.playbtn-art {
  width: 26px;
  height: 26px;
  display: block;
}

@keyframes breathe {
  0%,
  88%,
  100% {
    transform: scale(1);
  }
  94% {
    transform: scale(1.045);
  }
}

/* Store-Knoepfe */

.stores {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.store {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 12px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--wool);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.12s, box-shadow 0.12s;
}

.store:active {
  transform: translate(4px, 5px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.store-art {
  width: 26px;
  height: 26px;
  display: block;
  flex: none;
}

.store-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  text-align: left;
}

.store-txt small {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.66;
}

/* Zwei Klassen, damit die Regel gewinnt: ".panel strong" faerbt fetten
   Text wollweiss und steht weiter unten in dieser Datei. Der Knopf ist
   selbst wollweiss, der Store-Name stand dort also unsichtbar drauf. Im
   Hero fiel das nicht auf, weil die Knoepfe da in keinem Panel liegen. */
.store .store-txt strong {
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
}

/* Store-Badges
   -----------------------------------------------------------------------
   Die Bilder sind die unveraenderten Vorlagen von Apple und Google (s.
   assets/badges/LIESMICH.md). Deshalb hier BEWUSST kein Rahmen, kein
   Schatten und keine Sticker-Optik wie am Rest der Seite: beide
   Marken-Richtlinien verlangen die Vorlage so, wie sie ist. Der Link
   darf sich bewegen, das Badge selbst nicht.

   Groessen: das Apple-Badge ist 119,66 x 40 und bringt keinen Schutzraum
   mit. Das Google-Badge ist 646 x 250, sichtbar sind davon aber nur
   646 x 192 -- oben und unten stecken je 29 px Schutzraum schon im Bild.
   Beide gleich hoch zu setzen liesse Google kleiner wirken, deshalb der
   Faktor 250/192 = 1,302 auf die Bildhoehe. Sichtbar sind sie damit
   exakt gleich hoch. */

.badge {
  --badge-h: 42px;
  display: inline-flex;
  align-items: center;
  /* Schutzraum, damit nichts an die Marke stoesst; zugleich groessere
     Tippflaeche als das Bild allein */
  padding: 6px;
  text-decoration: none;
  transition: transform 0.12s;
}

.badge img {
  display: block;
  height: var(--badge-h);
  width: auto;
}

.badge img[data-badge='googleplay'] {
  height: calc(var(--badge-h) * 1.302);
}

.badge:active {
  transform: translate(2px, 3px);
}

/* Die echte Mini-Version liegt als Vollbild-Rahmen ueber der Seite. Der
   iframe entsteht erst beim Tippen, vorher kostet die Demo nichts. */

.gameframe {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--vw, 100%);
  z-index: 6;
  background: #12142c;
  touch-action: none;
}

.gameframe[hidden] {
  display: none;
}

.gameframe-slot,
.gameframe iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.gameframe-load {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(84%, 420px);
  margin: 0;
  /* text-align nicht vergessen: der Block ist mittig, der Text darin war es
     ohne diese Zeile nicht, und bei zwei Zeilen faellt das sofort auf. */
  text-align: center;
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: clamp(26px, 7.5vw, 38px);
  line-height: 1.2;
  color: var(--wool);
  pointer-events: none;
  transition: opacity 0.3s;
  animation: pumpen 1.6s ease-in-out infinite;
}

@keyframes pumpen {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
  }
}

.gameframe.ready .gameframe-load {
  opacity: 0;
}

/* Unten rechts, weil das Spiel oben links seine Anzeigen hat, oben rechts die
   Pause und unten links den Ton-Knopf. */
.playclose {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(28, 30, 54, 0.86);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  z-index: 2;
}

.playclose:active {
  transform: translate(3px, 4px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.close-art {
  width: 26px;
  height: 26px;
  display: block;
}

/* Pups-Anzeige waehrend des Selbstfliegens, gebaut wie die Bar im Spiel */

.scrollcue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: 14px;
  color: var(--wool);
  opacity: 0.75;
  text-shadow: 0 2px 4px rgba(12, 10, 22, 0.7);
  pointer-events: none;
}

.cue-art {
  width: 15px;
  height: 15px;
  display: block;
  transform: rotate(180deg);
  animation: bob 1.8s ease-in-out infinite;
}

@keyframes bob {
  0%,
  100% {
    transform: rotate(180deg) translateY(0);
  }
  50% {
    transform: rotate(180deg) translateY(-4px);
  }
}

/* ------------------------------------------------------- Inhalts-Sticker */

.band {
  padding: 10vh 16px;
  display: flex;
  justify-content: center;
}

.panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding: 26px 20px 24px;
  border: 3px solid var(--ink);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.panel.dark {
  background: var(--panel-dark);
}

.panel.tilt-l {
  transform: rotate(-0.7deg);
}

.panel.tilt-r {
  transform: rotate(0.6deg);
}

/* Das Hereinklappen haengt an der .js-Klasse: faellt JavaScript aus, stehen
   die Sticker einfach da, statt unsichtbar zu bleiben. */
.js .panel {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.js .panel.seen {
  opacity: 1;
}

.js .panel.tilt-l.seen {
  transform: translateY(0) rotate(-0.7deg);
}

.js .panel.tilt-r.seen {
  transform: translateY(0) rotate(0.6deg);
}

/* Hoehen-Marke am Sticker: die Abschnitte sind Stationen im Aufstieg */
.panel::before {
  content: attr(data-alt);
  position: absolute;
  top: -15px;
  right: 16px;
  padding: 2px 11px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--wool);
  color: var(--ink);
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: 15px;
  line-height: 1.5;
  box-shadow: var(--shadow-sm);
}

.panel h2 {
  margin: 0 0 10px;
  font-size: clamp(27px, 8vw, 40px);
  line-height: 1.05;
  font-weight: 400;
  color: var(--wool);
  text-shadow: 0 3px 0 rgba(12, 10, 22, 0.4);
}

.panel p {
  margin: 0 0 14px;
  color: #e2ddef;
}

.panel p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: 17px;
}

/* Der fette Auftakt eines Absatzes hebt sich vom Rest ab */
.panel strong {
  color: var(--wool);
  font-weight: 700;
}

.panel em {
  font-style: normal;
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: 1.25em;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.aside {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 2px dashed rgba(247, 243, 232, 0.22);
  font-size: 14px;
  color: var(--dim);
}

/* Schritte */

.steps,
.foes,
.worlds,
.skins,
.more,
.items,
.faq {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* FAQ: gleiche Sprache wie die Schritte, nur ohne Symbolspalte */
.faq li {
  padding: 14px 0;
  border-top: 2px dashed rgba(247, 243, 232, 0.18);
}

.faq li:first-child {
  border-top: 0;
}

.faq h3 {
  margin: 0;
  font-size: 23px;
  font-weight: 400;
  color: var(--wool);
}

.faq p {
  margin: 2px 0 0;
  font-size: 14.5px;
  color: var(--dim);
}

.steps li {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 2px dashed rgba(247, 243, 232, 0.18);
}

.steps li:first-child {
  border-top: 0;
}

.step-art {
  grid-row: 1 / span 2;
  width: 54px;
  height: 54px;
  display: block;
}

.step-art.wide {
  width: 62px;
  margin-left: -4px;
}

.steps h3,
.foes h3,
.worlds h3,
.skins h3 {
  margin: 0;
  font-size: 23px;
  font-weight: 400;
  color: var(--wool);
}

.steps p {
  margin: 2px 0 0;
  font-size: 14.5px;
  color: var(--dim);
}

/* Flut-Streifen */

.floodstrip {
  height: 46px;
  margin-top: 4px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: repeating-linear-gradient(
      -50deg,
      rgba(255, 255, 255, 0.07) 0 10px,
      rgba(0, 0, 0, 0) 10px 20px
    ),
    linear-gradient(var(--flood-hi), var(--flood));
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.14), var(--shadow-sm);
}

/* Items */

.items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.items li {
  padding: 11px 11px 12px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: rgba(247, 243, 232, 0.06);
}

.item-art {
  width: 34px;
  height: 34px;
  display: block;
  margin-bottom: 5px;
}

.items b {
  display: block;
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: 18px;
  font-weight: 400;
  color: var(--wool);
  line-height: 1.15;
}

.items span:last-child {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--dim);
  line-height: 1.35;
}

/* Gegner */

.foes {
  display: grid;
  gap: 10px;
}

.foes li {
  display: grid;
  grid-template-columns: 62px 1fr;
  column-gap: 13px;
  align-items: center;
  padding: 11px 12px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: rgba(247, 243, 232, 0.06);
}

.foe-art {
  grid-row: 1 / span 2;
  width: 62px;
  height: 50px;
  display: block;
  object-fit: contain;
}

.foes p {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--dim);
}

/* Welten: jede Karte zeigt ihre echte Kulisse aus dem Spiel */

.worlds {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.worlds li {
  position: relative;
  padding: 0 12px 13px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: color-mix(in srgb, var(--c) 20%, rgba(16, 18, 38, 0.86));
  overflow: hidden;
}

.world-pic {
  position: relative;
  height: 92px;
  margin: 0 -12px 8px;
  background: linear-gradient(
    color-mix(in srgb, var(--c) 34%, rgba(16, 18, 38, 0.2)),
    color-mix(in srgb, var(--c) 12%, rgba(16, 18, 38, 0.55))
  );
  border-bottom: 3px solid var(--ink);
}

.world-pic span {
  position: absolute;
  display: block;
  background-position: bottom center;
}

.w-tree {
  left: 8%;
  bottom: 16px;
  width: 46px;
  height: 60px;
}

.w-plat {
  left: 50%;
  bottom: 8px;
  width: 78%;
  height: 22px;
  transform: translateX(-50%);
}

.w-foe {
  right: 14%;
  bottom: 24px;
  width: 40px;
  height: 34px;
}

.worlds h3 {
  font-size: 20px;
}

.worlds p {
  margin: 3px 0 0;
  font-size: 13px;
  color: #ded9ea;
  line-height: 1.35;
}

/* Skins */

.skins {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.skins li {
  padding: 10px 10px 12px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: rgba(247, 243, 232, 0.06);
  text-align: center;
}

.skin-art {
  width: 88px;
  height: 62px;
  display: block;
  margin: 0 auto 4px;
}

.skins h3 {
  font-size: 19px;
}

.skins p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--dim);
  line-height: 1.35;
}

.inline-art {
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: -2px;
}

/* Endlos-Liste */

.more li {
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 13px;
  padding: 13px 0;
  border-top: 2px dashed rgba(247, 243, 232, 0.18);
}

.more li:first-child {
  border-top: 0;
}

.more-art {
  grid-row: 1 / span 2;
  width: 42px;
  height: 42px;
  display: block;
}

.more b {
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: 20px;
  font-weight: 400;
  color: var(--wool);
}

.more span:last-child {
  font-size: 14px;
  color: var(--dim);
}

/* Am Handy sind die Store-Knoepfe der Aufruf der Seite, nicht Beiwerk:
   volle Breite, groesseres Symbol, Daumen-Zielflaeche ueber 44 px. */

.stores-gross {
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.store-gross {
  justify-content: center;
  padding: 14px 22px 14px 18px;
  gap: 12px;
}

.store-gross .store-art {
  width: 34px;
  height: 34px;
}

.store-gross .store-txt strong {
  font-size: 25px;
}

.store-gross .store-txt small {
  font-size: 12px;
}

/* Passende Plattform zuerst (main.js setzt die Klasse). Nur die
   Reihenfolge, kein Ausblenden und kein Abdunkeln: wer auf dem iPhone
   fuer jemand anderen nachschaut, braucht Android genauso, und ein
   halbtransparenter Knopf sieht aus wie ein kaputter. */
.store-gross.fremd,
.badge-gross.fremd {
  order: 2;
}

/* QR am Rechner, Knoepfe am Handy
   -----------------------------------------------------------------------
   Ein QR-Code hilft nur, wenn ein ZWEITES Geraet ihn scannen kann. Auf dem
   Handy zeigt er auf den Bildschirm, den man gerade in der Hand haelt, und
   ist damit reine Deko. Deshalb tragen beide Fassungen im Store-Abschnitt
   eine Klasse, und die Media Query entscheidet.

   Gefragt wird nach dem ZEIGEGERAET, nicht nach der Breite allein: ein
   schmales Browserfenster am Rechner kann weiter scannen, ein grosses
   Tablet nicht. Die Breite bleibt als zweite Bedingung drin, weil
   Touch-Notebooks pointer: coarse melden, dort aber beides ginge. */

/* Die Klassen stehen an Elementen, die schon ein display mitbringen
   (.qrs und .stores sind flex). Deshalb ueberall der Elementtyp bzw. die
   zweite Klasse davor: gleiche Spezifitaet wuerde nur nach Reihenfolge
   entscheiden, und die Grundregeln stehen weiter oben in dieser Datei. */

p.nur-finger,
.stores.nur-finger {
  display: none;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  p.nur-zeiger,
  .qrs.nur-zeiger {
    display: none;
  }
  p.nur-finger {
    display: block;
  }
  .stores.nur-finger {
    display: flex;
  }
}

/* Am Handy sind die Badges der Aufruf der Seite, nicht Beiwerk:
   untereinander, groesser, mit reichlich Luft zum Tippen. */

.stores-gross {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.badge-gross {
  --badge-h: 54px;
  padding: 8px;
}



/* QR */

.qrs {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 11px 11px 9px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--wool);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.12s, box-shadow 0.12s;
}

.qr:active {
  transform: translate(4px, 5px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.qr img {
  display: block;
  width: 122px;
  height: 122px;
  image-rendering: pixelated;
}

.qr b {
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: 18px;
  font-weight: 400;
}

/* ==================================================================
   SCHALTER: was der Store-Abschnitt vor dem Start zeigt
   ------------------------------------------------------------------
   Die Seite geht live, BEVOR die Apps im Store sind. Zwei Dinge duerfen
   deshalb noch nicht zu sehen sein:

   1. Die offiziellen Badges von Apple und Google. Auf ihnen steht
      "Laden im App Store" bzw. "Jetzt bei Google Play", also ein
      Versprechen auf einen Download, den es noch nicht gibt.
   2. Die QR-Codes. Sie zeigen auf sheeptastical.com/android bzw. /ios,
      und diese beiden Pfade gibt es noch nicht -- sie liefen also ins
      Leere, und ein toter QR-Code ist schlimmer als keiner.

   Stattdessen stehen ueberall die selbstgezeichneten "bald"-Knoepfe,
   auch am Rechner, wo sonst die Codes saessen.

   ZUM STORE-START: diesen ganzen Block loeschen. Darunter liegt alles
   unveraendert bereit -- Badges, QR-Codes, die Media Query, die
   Sprachumschaltung und die Plattform-Sortierung. Nichts davon wurde
   ausgebaut, nur ueberschrieben.

   Steht bewusst GANZ AM ENDE der Store-Regeln: die Komponenten und die
   Media Query bringen ihr eigenes display mit, und bei gleicher
   Spezifitaet gewinnt die spaetere Regel.
   ================================================================== */

.store {
  display: inline-flex;
}

.badge {
  display: none;
}

.qrs {
  display: none;
}

/* Die Knopf-Leiste ist sonst nur auf Finger-Geraeten sichtbar */
.stores.nur-finger {
  display: flex;
}

/* Weder der Scann-mich-Text noch der Ein-Tipp-Text passen jetzt: der
   eine erklaert Codes, die nicht da sind, der andere verspricht einen
   Download, den es nicht gibt. */
p.nur-zeiger,
p.nur-finger {
  display: none;
}

p.nur-vorstart {
  display: block;
}

/* --------------------------------------------------------------- Footer */

footer {
  padding: 30px 18px calc(34px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background: linear-gradient(rgba(10, 11, 26, 0) 0%, rgba(10, 11, 26, 0.9) 45%);
}

.foot-art {
  width: 74px;
  height: 52px;
  display: block;
  margin: 0 auto 10px;
}

footer p {
  margin: 0 0 6px;
  font-size: 14px;
}

footer a {
  color: var(--wool);
  text-decoration: none;
  border-bottom: 2px solid rgba(247, 243, 232, 0.3);
}

footer a:hover {
  border-bottom-color: var(--grass);
}

footer small {
  color: rgba(185, 179, 198, 0.65);
  font-size: 12.5px;
}

/* --------------------------------------------------------- groessere Displays */

@media (min-width: 720px) {
  body {
    font-size: 17px;
  }

  .band {
    padding: 13vh 24px;
  }

  .panel {
    max-width: 620px;
    padding: 32px 30px 30px;
  }

  .steps li {
    grid-template-columns: 64px 1fr;
  }

  .step-art {
    width: 64px;
    height: 64px;
  }

  .items {
    grid-template-columns: repeat(3, 1fr);
  }

  .worlds,
  .skins {
    grid-template-columns: repeat(4, 1fr);
  }

  .foes {
    grid-template-columns: repeat(3, 1fr);
  }

  .foes li {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .foe-art {
    grid-row: auto;
    width: 74px;
    height: 58px;
  }

}

/* ------------------------------------------------------------ Ruhemodus */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .wordmark .l,
  .playbtn,
  .gameframe-load,
  .cue-art {
    animation: none;
  }

  .spark {
    display: none;
  }

  .js .panel {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------- Rechtstexte */

/* Impressum und Datenschutz sind eigene, ruhige Seiten: kein Canvas,
   keine lebende Welt, keine Animation. Sie sollen lesbar sein und ohne
   JavaScript vollstaendig funktionieren -- eine Pflichtangabe, die erst
   ein Skript nachlaedt, ist keine. */

body.recht {
  background: linear-gradient(#2b3150, #1b2138 60%);
  min-height: 100vh;
}

.rechtseite {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 26px) 18px 60px;
}

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 8px 16px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(28, 30, 54, 0.8);
  box-shadow: var(--shadow-sm);
  color: var(--wool);
  text-decoration: none;
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: 17px;
}

.zurueck:active {
  transform: translate(3px, 4px);
  box-shadow: none;
}

.rechtstext {
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 26px 22px;
  margin-bottom: 22px;
}

.rechtstext h1 {
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 400;
  margin: 0 0 6px;
}

.rechtstext h2 {
  font-family: 'Sheep', 'Trebuchet MS', var(--body);
  font-variant-ligatures: no-common-ligatures;
  font-size: clamp(21px, 5.4vw, 27px);
  font-weight: 400;
  margin: 30px 0 8px;
  color: var(--wool);
}

.rechtstext h2:first-of-type {
  margin-top: 20px;
}

.rechtstext h3 {
  font-size: 16px;
  margin: 20px 0 4px;
  color: var(--wool);
}

.rechtstext p,
.rechtstext li {
  color: var(--dim);
  font-size: 15.5px;
  line-height: 1.62;
}

.rechtstext ul {
  padding-left: 20px;
  margin: 6px 0;
}

.rechtstext a {
  color: var(--wool);
}

.rechtstext address {
  font-style: normal;
  color: var(--wool);
  line-height: 1.62;
  font-size: 15.5px;
}

/* Stand-Zeile und der Hinweis, dass die deutsche Fassung gilt */
.rechtstext .stand {
  font-size: 13px;
  opacity: 0.7;
  margin-top: 26px;
}

/* Die englische Fassung steht unter der deutschen. Ohne JavaScript sind
   beide sichtbar, das ist Absicht: eine Pflichtangabe darf nicht davon
   abhaengen, dass ein Skript laeuft. Der Sprachschalter blendet nur die
   jeweils andere aus. */
html[data-lang='de'] .nur-en,
html[data-lang='en'] .nur-de {
  display: none;
}

/* ------------------------------------------------------------- 404 */

/* Eigene Seite, weil Cloudflare Pages eine 404.html im Wurzelverzeichnis
   von sich aus fuer unbekannte Pfade ausliefert. Bewusst ohne Canvas und
   ohne main.js: eine Fehlerseite soll sofort da sein und auch dann
   funktionieren, wenn irgendetwas anderes klemmt. Den Sprachschalter
   bringt recht.js mit, dieselbe Mechanik wie bei den Rechtstexten. */

.vierhundertvier {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 90px 22px 60px;
}

.vv-schaf {
  width: clamp(140px, 38vw, 200px);
  height: auto;
  border-radius: 26px;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  margin-bottom: 22px;
  /* Sanftes Treiben: das Schaf ist ja irgendwo da oben abgehauen */
  animation: treiben 5.5s ease-in-out infinite;
}

@keyframes treiben {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-12px) rotate(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vv-schaf {
    animation: none;
  }
}

.vierhundertvier h1 {
  font-size: clamp(30px, 9vw, 52px);
  font-weight: 400;
  margin: 0 0 8px;
  color: var(--wool);
  text-shadow: 0 3px 0 rgba(12, 10, 22, 0.5);
}

.vierhundertvier p {
  margin: 0 auto 26px;
  max-width: 30ch;
  color: var(--dim);
  font-size: 16px;
  line-height: 1.6;
}

/* Der Zurueck-Knopf ist der Spiel-Knopf der Startseite, nur als Link */
.vierhundertvier .playbtn {
  text-decoration: none;
}