html,
body {
  height: 100%;
  background-color: #18181b;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

[x-cloak] {
  display: none !important;
}

.safe-area-top {
  padding-top: env(safe-area-inset-top);
}

.safe-area-top-offset {
  margin-top: calc(env(safe-area-inset-top) * -1);
}

.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Abstand nach unten inklusive Geräte-Sicherheitsbereich (Home-Indikator).
   Nicht mit Tailwinds pb-* auf demselben Element kombinieren: .safe-area-bottom
   setzt dieselbe Eigenschaft und gewinnt, weil app.css außerhalb von Tailwinds
   Cascade-Layer liegt – das pb-* fällt dann ersatzlos weg. */
.safe-area-bottom-gap {
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
}

/* Untere Leiste: überall gleich hoch. Maßgeblich ist die Spielansicht, deren
   Leiste durch den „Spieler“-Knopf (Symbol mit Beschriftung darunter) höher
   ausfällt als eine reine Knopfreihe. Ohne diese Mindesthöhe sind die Leisten im
   Setup flacher und die Leiste springt beim Start der Runde sichtbar.
   75px = Höhe des „Spieler“-Knopfs (51px) plus py-3 der Zeile (2 × 12px).
   Wer den Wert ändert, muss die festen Abstände in app.js mitziehen: das
   padding-bottom der Seiteninhalte und die bottom-Werte der schwebenden
   Warnleisten (renderMaxWarningBar, Spielerzahl-Hinweis im Setup). */
.bottom-bar-row {
  min-height: 75px;
}

/* Preset-Kachel in der Querleiste „Presets für N Spieler“ (Rollenauswahl).
   Größe und Textbegrenzung stehen bewusst hier statt als Tailwind-Utilities:
   `w-[240px]` und `line-clamp-2` kämen in der ganzen App nur an dieser einen Stelle
   vor, und der Tailwind-CDN-Build erzeugt ihre Regeln erst, nachdem die Kacheln im
   DOM stehen. In dem Moment dazwischen hatte die Kachel keine feste Breite, wurde
   also so breit wie die einzeilige Beschreibung – und das aspect-ratio zog die Höhe
   mit. Die Reihe war beim ersten Öffnen dadurch riesig und sprang erst beim nächsten
   Rendern zurecht. app.css kommt per <link> und gilt sofort. */
.preset-card {
  width: 240px;
  flex: 0 0 auto;
  aspect-ratio: 3/2;
}

.preset-card-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2lh;
}

/* Einklappbare Kästen auf der Rollenkarte beim Austeilen (rollenverteilung.js):
   „Weitere Hinweise“ und „Biblischer Kontext“ sind dort <details> und starten
   zugeklappt. Bewusst nur dort – im Rollen-Detailfenster der App bleibt alles
   offen. Der eigene Pfeil ersetzt das Standard-Dreieck des Browsers; die Regeln
   stehen hier statt als Tailwind-Utilities, weil sie Pseudo-Elemente und den
   [open]-Zustand brauchen und der Tailwind-CDN-Build erst nach dem DOM-Einbau
   greift. app.css kommt per <link> und gilt sofort. */
.rv-collapse > summary {
  list-style: none;
  cursor: pointer;
}

.rv-collapse > summary::-webkit-details-marker {
  display: none;
}

.rv-collapse > summary .rv-collapse-chevron {
  transition: transform 150ms ease;
}

.rv-collapse[open] > summary .rv-collapse-chevron {
  transform: rotate(180deg);
}