/* ==========================================================
   Pumping Pumo – Rahmen rund um das Spielfeld

   Das Spiel selbst wird komplett im Canvas gezeichnet. Hier steht,
   wie das Spielfeld auf dem Bildschirm sitzt – und alles, was als
   normales HTML darueber liegt: Hoehenanzeige, Startbild, Pause.

   Die Holz- und Pergamentbilder dafuer (ui-*.png) schneidet
   bilder-bauen.ps1 aus assets\44.png heraus.

   ⚠️ JEDER Name faengt mit "jump-" an, und es gibt hier KEINE Regel
   auf *, html oder body. Diese Datei wird nach app\module\jump
   kopiert und liegt dort in derselben Seite wie die Karte — eine
   Regel ohne Vorsatz wuerde der ganzen App das Aussehen verstellen.
   Was der Seitenkoerper beim Alleinstart braucht, steht in standalone.css.
   ========================================================== */

/* Der Rahmen fuellt seinen Platz und stellt die Buehne mittig hinein.
   Das Wischen, Zoomen und blaue Markieren wird hier abgestellt und
   nicht mehr am Seitenkoerper – ausserhalb des Spiels soll die App
   sich ja normal verhalten. */
#jump-rahmen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0e1020;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* Die Buehne ist das Spielfeld. Ihre Groesse setzt game.js,
   damit das Seitenverhaeltnis auf Handy und Tablet passt. */
#jump-buehne {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, .6);
}

#jump-flaeche { display: block; }

/* Alles, was diese Klasse traegt, ist ausgeblendet. */
.jump-hidden {
  opacity: 0;
  pointer-events: none;
}


/* ---------- Anzeige oben ---------- */

#jump-anzeige {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: calc(2px + env(safe-area-inset-top)) 8px 0;
  pointer-events: none;          /* Tippen geht durch die Anzeige hindurch */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Die Kopfzeile: Wackelpudding-Zaehler, Holzschild mit der Hoehe, und
   rechts der Weg zurueck zur Karte. Das Schild haengt an Seilen und
   gehoert deshalb ganz nach oben; der Zaehler wird etwas tiefer
   gesetzt, damit er auf einer Linie mit dem BRETT sitzt und nicht mit
   den Seilen.

   ⚠️ Rechts sass bis zum 15.09.2026 der Stern-Zaehler. Sterne werden
   nicht mehr gezaehlt (fundament-kein-stern) – ihre Wirkung ist
   unveraendert. Der Platz traegt jetzt den Rueckweg. */
#jump-kopf {
  width: 100%;
  max-width: 430px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
}

#jump-feldPudding, #jump-feldSchild, #jump-feldZurueck {
  position: relative;
  flex: none;
}

#jump-feldPudding {
  width: 27%;
  aspect-ratio: 300 / 135;
  background: url(ui-head-pudding.png) no-repeat center / 100% 100%;
  margin-top: 4.5%;
}

#jump-feldSchild {
  width: 37%;
  aspect-ratio: 390 / 171;
  background: url(ui-head-sign.png) no-repeat center / 100% 100%;
}

/* Gleich breit wie das Puddingfeld, damit das Schild mittig bleibt –
   auch wenn hier gar kein Knopf steht (Alleinstart). */
#jump-feldZurueck {
  width: 27%;
  display: flex;
  justify-content: flex-end;
  margin-top: 4.5%;
}

/* Der Rueckweg ist ein runder Holzknopf – dasselbe Bild wie auf der
   Karte. Es liegt bei den Bildern der App, nicht bei denen des
   Spiels: beide Wege fuehren zur selben Karte, und zwei Kopien
   desselben Knopfes waeren zwei Wahrheiten. */
#jump-zurueck {
  width: clamp(34px, 9vw, 46px);
  aspect-ratio: 1;
  background: url(../../bilder/button-back.png) no-repeat center / contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45));
  pointer-events: auto;          /* die Anzeige selbst laesst Tipper durch */
}

/* Die Zahl steht NICHT mittig in ihrem Feld: links sitzt das Symbol.
   Am Bild abgemessen beginnt die freie Flaeche beim Wackelpudding bei
   rund 50 % – die Zahl sitzt in der Mitte des Restes. */
.jump-counter span {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

#jump-puddingzahl {
  left: 73%;
  font-size: clamp(14px, 4.3vw, 23px);
  color: #5b3310;
  text-shadow: 0 1px 0 rgba(255, 245, 220, .55);
}

/* Oben am Schild sind die Seile – die Zahl gehoert auf das Brett
   darunter, nicht in die Mitte des Bildes. */
#jump-hoehe {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  white-space: nowrap;

  font-size: clamp(17px, 5.2vw, 28px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: #ffeec9;
  text-shadow: 0 2px 0 rgba(74, 40, 16, .8);
}

#jump-hoehe small {
  font-size: .55em;
  font-weight: 700;
  margin-left: .12em;
  opacity: .8;
}

#jump-bestwert {
  margin-top: 4px;
  font-size: clamp(10px, 3vw, 13px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  opacity: .9;
}


/* ---------- Knoepfe ---------- */

/* "bedienung" heisst: hier wird getippt. game.js laesst solche
   Tipper nicht als Sprung durchgehen. */
.jump-control {
  border: 0;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
  transition: transform .12s ease, opacity .2s ease;
}

.jump-control:active { transform: scale(.92); }

/* Pause und Ton stehen nebeneinander unter der Kopfzeile, rechts.
   Sie sitzen IN der Anzeige, damit sie beim Wachsen des Bildschirms
   mit der Kopfzeile mitwandern statt auf fester Hoehe zu kleben.
   Der Abstand rechts haelt sie vom Rand weg – die Wand ist gut 7 %
   der Breite, sonst klebten die Knoepfe auf den Ranken. */
#jump-knoepfe {
  align-self: flex-end;
  margin: 6px 9% 0 0;
  display: flex;
  gap: 8px;
  pointer-events: auto;          /* die Anzeige selbst laesst Tipper durch */
}

#jump-pause, #jump-ton {
  width: clamp(32px, 8.6vw, 44px);
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45));
}

#jump-pause { background-image: url(ui-pause.png); }
#jump-ton   { background-image: url(ui-sound-on.png); }

/* Ausgeschaltet: durchgestrichener Lautsprecher, etwas blasser. */
#jump-ton.aus {
  background-image: url(ui-sound-off.png);
  opacity: .72;
}

/* Ausgeblendete Knoepfe sollen keinen Platz mehr beanspruchen,
   sonst haengt der Ton-Knopf schief. */
#jump-knoepfe .jump-hidden { display: none; }

.jump-button {
  width: clamp(64px, 19vw, 88px);
  aspect-ratio: 132 / 133;
  background-image: url(ui-resume.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
  animation: jump-pulsieren 1.8s ease-in-out infinite;
}


/* ---------- Tafeln: Startbild und Pause ---------- */

/* Die Pergamentrolle wird als dehnbarer Rahmen benutzt. Oben und
   unten sitzen die aufgerollten Enden – die duerfen NICHT mitwachsen,
   sonst werden sie lang gezogen. Deshalb border-image: es haelt die
   vier Ecken und Raender fest und dehnt nur die Mitte.
   Die Zahlen sind Bildpunkte in ui-scroll.png (360 x 316). */
.jump-scroll {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(78%, 340px);

  border-style: solid;
  border-width: 38px 26px 38px 26px;
  border-image: url(ui-scroll.png) 78 55 78 55 fill stretch;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Unten etwas mehr Luft: sonst legt sich die letzte Zeile auf die
     aufgerollte Kante und wird unleserlich. */
  padding: 2px 12px 16px;
  text-align: center;
  color: #4a2d12;
  transition: opacity .25s ease;
}

.jump-scroll h1 {
  margin: 0;
  font-size: clamp(23px, 7.4vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #7a3f12;
  text-shadow: 0 1px 0 rgba(255, 245, 215, .75);
}

.jump-scroll p {
  margin: 0;
  font-size: clamp(13px, 3.9vw, 16px);
  line-height: 1.55;
  font-weight: 600;
}

.jump-scroll small {
  font-size: clamp(10px, 3vw, 12.5px);
  opacity: .62;
  line-height: 1.4;
}

/* ---------- Der Wuerfel-Bonus ---------- */

/* Der Wuerfel liegt auf demselben Pergament wie Startbild und Pause –
   er ist ein Halt im Spiel, kein eigener Ort. */
#jump-wuerfelbild {
  display: block;
  width: clamp(84px, 25vw, 118px);
  height: auto;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .3));
}

/* Die drei Zeilen behalten ihre Hoehe, auch solange sie leer sind.
   Sonst waechst und schrumpft die Tafel bei jedem Wurf, und der
   Wuerfel huepft dabei auf und ab. */
#jump-wuerfelrechnung,
#jump-wuerfelgewinn {
  font-weight: 800;
  line-height: 1.25;
  min-height: 1.25em;
}

#jump-wuerfelrechnung {
  font-size: clamp(15px, 4.6vw, 19px);
  color: #7a3f12;
}

/* Das Pink des Wackelpuddings – er ist ja der Gewinn. */
#jump-wuerfelgewinn {
  font-size: clamp(17px, 5.2vw, 22px);
  color: #b3255f;
}

#jump-wuerfelhinweis { min-height: 1.35em; }

@keyframes jump-pulsieren {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* Wer lieber ohne Bewegung spielt, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .jump-button { animation: none; }
  .jump-control { transition: none; }
}