/*
 * Dschungel-Tempel Pinball — Spielseiten-Stil.
 *
 * WICHTIG: keine globalen Regeln mehr. Die Prototyp-Fassung setzte `body` und
 * einen `*`-Reset — eingebettet in das Bananario-Layout hätte das die ganze
 * Seite eingefärbt. Dieselbe Falle wie beim Banana-Slots-Port; alles steht
 * deshalb unter .pb-box / .pb-regeln.
 */

.pb-box { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }

/*
 * flex: 0 1 auto + min-width: 0 — der Tisch MUSS schrumpfen duerfen.
 * Das <canvas> traegt width="600" als Attribut; damit ist die
 * Idealbreite des Containers 600 px, und mit flex: 0 0 auto blieb er
 * auch dann 600 breit, wenn nur 343 da waren — gemessen 241 px
 * horizontaler Ueberlauf auf dem Handy.
 */
.pb-tisch {
  position: relative;
  flex: 0 1 auto; min-width: 0;
  /* Der Container bekommt DIESELBE Rechnung wie der Canvas. Ohne sie war
     er 600 px breit (die Attributbreite des <canvas>), auch wenn der
     Canvas nur 342 anzeigte — dadurch passte die Aufgabenliste nicht mehr
     daneben und brach unter den Tisch um. */
  width: min(600px, 100%, calc(100dvh - 220px) * 0.6);
}
.pb-tisch > * { max-width: 100%; }

.pb-tisch #flCanvas {
  display: block;
  /* 100% gehoert in die Liste: auf schmalen, hohen Bildschirmen ist die
     Hoehenrechnung grosszuegig, aber die Breite reicht nicht. */
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #12180f;
  box-shadow: 0 22px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.12);
  touch-action: none;
}

.pb-tisch .fl-hud {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; gap: 10px; pointer-events: none;
}
.pb-tisch .fl-hud-zeile {
  flex: 1; background: rgba(10,16,8,.78); border: 1px solid rgba(212,175,90,.35);
  border-radius: 9px; padding: 5px 9px; text-align: center;
}
.pb-tisch .fl-hud-zeile span { display: block; font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: #9db08c; }
.pb-tisch .fl-hud-zeile b { display: block; font-size: 1.1rem; color: #ffd766;
  font-variant-numeric: tabular-nums; }

.pb-tisch .fl-aufgabe-box { margin-top: 10px; }
.pb-tisch .fl-aufgabe {
  text-align: center; font-size: .95rem;
  padding: 7px 12px; border-radius: 9px;
  background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.10);
}
.pb-tisch .fl-aufgabe.laeuft { border-color: #6f9a4a; background: rgba(111,154,74,.16); }
.pb-tisch .fl-aufgabe.finale { border-color: #d4af5a; background: rgba(212,175,90,.20); }

.pb-tisch .fl-balken-huelle {
  height: 6px; margin-top: 5px; border-radius: 999px;
  background: rgba(0,0,0,.12); overflow: hidden;
}
.pb-tisch .fl-balken-huelle[hidden] { display: none; }
.pb-tisch .fl-balken {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #ff8a3d, #ffd766);
  transition: width .12s linear;
}
.pb-tisch .fl-status { margin-top: 10px; text-align: center; min-height: 1.5em; font-size: .92rem; }

.pb-seite { flex: 1 1 300px; min-width: 280px; }
.pb-seite h2 { font-size: 1.05rem; margin: 0 0 8px; }
.pb-seite h2:not(:first-child) { margin-top: 22px; }

.pb-seite .fl-tasten { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0; }
.pb-seite .fl-tasten dt {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.14);
  border-radius: 5px; padding: 1px 7px; font-size: .82rem; white-space: nowrap;
}
.pb-seite .fl-tasten dd { margin: 0; font-size: .9rem; }
.pb-seite .fl-tasten dd em { font-style: normal; font-size: .82rem; display: block; opacity: .75; }
.pb-seite .fl-hinweis { font-size: .88rem; margin: 10px 0; }

/* Aufgabenliste mit Fortschritt je Aufgabe */
.fl-modi { list-style: none; padding-left: 0; margin: 0; }
.fl-modi-zeile {
  margin-bottom: 7px; padding: 6px 9px;
  border-radius: 8px; border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}
.fl-modi-zeile.laeuft { border-color: #6f9a4a; background: rgba(111,154,74,.14); }
.fl-modi-zeile.fertig { border-color: rgba(212,175,90,.55); background: rgba(212,175,90,.14); }
.fl-modi-zeile.fertig .fl-modi-text { text-decoration: line-through; opacity: .6; }
.fl-modi-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fl-modi-kopf b { font-weight: 600; font-size: .9rem; }
.fl-modi-status {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .76rem; white-space: nowrap; opacity: .8;
}
.fl-modi-text { font-size: .8rem; margin-top: 1px; opacity: .8; }
.fl-modi-balken {
  height: 4px; margin-top: 5px; border-radius: 999px;
  background: rgba(0,0,0,.10); overflow: hidden;
}
.fl-modi-balken i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6f9a4a, #b6f06a);
  transition: width .15s linear;
}
.fl-modi-zeile.fertig .fl-modi-balken i { background: linear-gradient(90deg, #b8862c, #ffd766); }

.pb-regeln { margin-top: 2rem; max-width: 68ch; }
.pb-regeln h2 { margin-top: 1.6rem; }
.pb-regeln h3 { margin-top: 1.1rem; font-size: 1rem; }

@media (max-width: 760px) {
  .pb-tisch { width: min(100%, calc(100dvh - 280px) * 0.6); }
  .pb-box { gap: 18px; }
}

/* ── Vollbild und Touch-Bedienung ───────────────────────────────────
 * Der Tisch ist 600×1000, also 0,6 — fast genau das Format eines
 * Hochkant-Handys. Im Vollbild wird er deshalb auf die Bildschirmhöhe
 * eingepasst; die Flipper bedient man über zwei große Flächen unten.
 */
/* Knopfleiste unter dem Tisch. Der Vollbild-Knopf saß vorher in der
   Tischecke — dort lag er genau auf der rechten Anzeigetafel. */
.pb-knoepfe { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pb-knoepfe .btn { flex: 1 1 auto; }

.pb-touch { display: none; }

/* Zustandsklasse statt :fullscreen — ein Selektor mit gemischten Präfixen
   wird von manchen Browsern komplett verworfen. */
/*
 * Im Vollbild wird der Tisch OBEN ausgerichtet, nicht mittig.
 *
 * Gemessen bleiben bei 422x914 oben und unten je 105 px frei — zusammen
 * 210 px, genug fuer die Bedienleiste. Mittig zentriert war der Platz auf
 * beide Seiten verteilt, und die Leiste ragte unten in den Tisch hinein.
 * Oben ausgerichtet sammelt sich der ganze Rest unter dem Tisch.
 */
.pb-tisch.pb-fs,
.pb-tisch.pb-pseudo-fs {
  position: fixed; inset: 0; z-index: 9999;
  width: auto; max-width: none;
  background: #0b1208;
  display: flex; align-items: flex-start; justify-content: center;
  margin: 0; padding: 0;
}
.pb-tisch.pb-fs #flCanvas,
.pb-tisch.pb-pseudo-fs #flCanvas {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  border-radius: 0; box-shadow: none;
}
.pb-tisch.pb-fs .fl-aufgabe-box,
.pb-tisch.pb-pseudo-fs .fl-aufgabe-box,
.pb-tisch.pb-fs .fl-status,
.pb-tisch.pb-pseudo-fs .fl-status,
/* Die Knopfleiste MUSS hier verschwinden: als Flex-Kind neben dem Canvas
   verschob sie den Tisch aus der Mitte (gemessen 82 px frei links statt
   194) — und damit stimmte die Breite der Seitenflaechen nicht mehr.
   Im Vollbild uebernehmen die Touch-Knoepfe ihre Aufgabe. */
.pb-tisch.pb-fs .pb-knoepfe,
.pb-tisch.pb-pseudo-fs .pb-knoepfe { display: none; }

.pb-tisch.pb-fs .pb-touch,
.pb-tisch.pb-pseudo-fs .pb-touch {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0;
  gap: 8px; padding: 6px; pointer-events: none;
  /* Reicht der Platz einmal nicht (sehr breite, flache Bildschirme),
     liegt die Leiste ueber dem Tisch — dann soll man hindurchsehen. */
  align-items: flex-end;
}
.pb-touch-flip, .pb-touch-plunge {
  pointer-events: auto; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; user-select: none;
  border: 1px solid rgba(212,175,90,.35); border-radius: 12px;
  background: rgba(10,16,8,.28); color: rgba(255,215,102,.8);
  font-size: 20px; cursor: pointer;
  backdrop-filter: blur(2px);
}
.pb-touch-flip { flex: 1 1 0; height: 72px; }
.pb-touch-plunge { flex: 0 0 92px; height: 72px; font-size: 13px; }
.pb-touch-flip:active, .pb-touch-plunge:active { background: rgba(111,154,74,.55); }

.pb-steuerung { margin-top: 1.4rem; max-width: 68ch; }
.pb-steuerung h2 { margin-bottom: .6rem; }

.pb-touch-neu {
  pointer-events: auto; touch-action: manipulation; user-select: none;
  flex: 0 0 58px; height: 72px; font-size: 12px; cursor: pointer;
  border: 1px solid rgba(212,175,90,.35); border-radius: 12px;
  background: rgba(10,16,8,.28); color: rgba(255,215,102,.8);
  backdrop-filter: blur(2px);
}
.pb-touch-neu:active { background: rgba(111,154,74,.55); }

/*
 * Breitere Bildschirme: Der Tisch ist dort HOEHENbegrenzt, unter ihm bleibt
 * kein Platz — dafuer links und rechts. Ab einem Seitenverhaeltnis von 3/5
 * (dem Format des Tisches) wandern die Flipperflaechen deshalb an die Seiten.
 *
 * Die freie Breite je Seite ist berechenbar: Der Tisch ist 60dvh breit
 * (Hoehe x 0,6), es bleibt (100vw - 60dvh) / 2. Das Minimum von 56 px sorgt
 * dafuer, dass die Flaechen auch im Grenzfall greifbar bleiben; sie sind
 * durchsichtig, ragen also allenfalls sichtbar ueber den Tischrand.
 */
@media (min-aspect-ratio: 3/5) {
  .pb-tisch.pb-fs .pb-touch,
  .pb-tisch.pb-pseudo-fs .pb-touch {
    top: 0; pointer-events: none; padding: 0;
  }
  .pb-tisch.pb-fs .pb-touch-flip,
  .pb-tisch.pb-pseudo-fs .pb-touch-flip {
    position: fixed; top: 8px; bottom: 8px; height: auto;
    width: max(56px, calc((100vw - 60dvh) / 2 - 12px));
    display: flex; align-items: center; justify-content: center;
  }
  .pb-tisch.pb-fs .pb-touch-flip.pb-links,
  .pb-tisch.pb-pseudo-fs .pb-touch-flip.pb-links  { left: 6px; }
  .pb-tisch.pb-fs .pb-touch-flip.pb-rechts,
  .pb-tisch.pb-pseudo-fs .pb-touch-flip.pb-rechts { right: 6px; }

  /* Abschuss und Neustart bleiben unten mittig, aber schmal */
  .pb-tisch.pb-fs .pb-touch-plunge,
  .pb-tisch.pb-pseudo-fs .pb-touch-plunge { flex: 0 0 92px; height: 54px; }
  .pb-tisch.pb-fs .pb-touch-neu,
  .pb-tisch.pb-pseudo-fs .pb-touch-neu { flex: 0 0 58px; height: 54px; }
  .pb-tisch.pb-fs .pb-touch,
  .pb-tisch.pb-pseudo-fs .pb-touch {
    justify-content: flex-end; gap: 8px; top: auto; bottom: 6px;
    right: 6px; left: auto;
    width: max(56px, calc((100vw - 60dvh) / 2 - 12px));
  }
  /* Die Flipperflaeche endet ueber den Knoepfen, damit beide nebeneinander
     in dieselbe Spalte passen. */
  .pb-tisch.pb-fs .pb-touch-flip.pb-rechts,
  .pb-tisch.pb-pseudo-fs .pb-touch-flip.pb-rechts { bottom: 70px; }
}

/*
 * GRENZBAND um das Tischformat (0,52 bis 0,72).
 *
 * Hier fuellt der Tisch den Bildschirm fast vollstaendig — gemessen bleiben
 * bei 360x640 nur 40 px unter ihm und bei 600x900 nur 30 px daneben. Fuer
 * eine sichtbare Leiste reicht das nicht, und der Tisch soll nicht kleiner
 * werden. Also verschwindet stattdessen die Bedienung: Die Flipper liegen
 * als UNSICHTBARE Flaechen ueber den unteren Bildschirmhaelften — so wird
 * es an Handy-Flippern ohnehin gemacht, man tippt einfach links oder rechts.
 * Nur beim Druecken leuchtet kurz ein schmaler Rand auf.
 *
 * Abschuss und Neustart sitzen oben mittig auf dem Holzrand: zwischen den
 * beiden Anzeigetafeln (Canvas-x 168 bis 432) ist dort immer Platz frei.
 */
@media (min-aspect-ratio: 13/25) and (max-aspect-ratio: 18/25) {
  .pb-tisch.pb-fs .pb-touch,
  .pb-tisch.pb-pseudo-fs .pb-touch {
    inset: 0; width: auto; padding: 0;
    justify-content: center; align-items: flex-start; gap: 6px;
  }
  .pb-tisch.pb-fs .pb-touch-flip,
  .pb-tisch.pb-pseudo-fs .pb-touch-flip {
    position: fixed; top: 45%; bottom: 0; height: auto; width: 50%;
    border: none; background: transparent; backdrop-filter: none;
    color: transparent; border-radius: 0;
  }
  .pb-tisch.pb-fs .pb-touch-flip.pb-links,
  .pb-tisch.pb-pseudo-fs .pb-touch-flip.pb-links  { left: 0; right: auto; }
  .pb-tisch.pb-fs .pb-touch-flip.pb-rechts,
  .pb-tisch.pb-pseudo-fs .pb-touch-flip.pb-rechts { right: 0; left: auto; }
  /* Rueckmeldung beim Druecken: schmaler Streifen am aeusseren Rand */
  .pb-tisch.pb-fs .pb-touch-flip:active,
  .pb-tisch.pb-pseudo-fs .pb-touch-flip:active {
    background: linear-gradient(to right, rgba(182,240,106,.30), transparent 22%);
  }
  .pb-tisch.pb-fs .pb-touch-flip.pb-rechts:active,
  .pb-tisch.pb-pseudo-fs .pb-touch-flip.pb-rechts:active {
    background: linear-gradient(to left, rgba(182,240,106,.30), transparent 22%);
  }
  /* Abschuss und Neu als flache Chips oben mittig */
  .pb-tisch.pb-fs .pb-touch-plunge,
  .pb-tisch.pb-pseudo-fs .pb-touch-plunge,
  .pb-tisch.pb-fs .pb-touch-neu,
  .pb-tisch.pb-pseudo-fs .pb-touch-neu {
    position: relative; margin-top: 6px;
    height: 34px; flex: 0 0 auto; padding: 0 14px; font-size: 12px;
    background: rgba(10,16,8,.55);
  }
}