/* schoepfung.css: die Entstehungserzaehlung als Blatt.

   Wie geschichte.css: kein einziger fester Farbwert, nur die Variablen aus
   style.css. Sonst leuchtet das Blatt im Pergament-Theme dunkelblau. Alles
   unter .sch- gescopet, damit nichts aus dem Rest des Spiels umgefaerbt
   wird.

   Die Gestaltung folgt einem alten Buchsatz und nicht einem Formular: eine
   Kopfzeile mit Namen und Beinamen, ein Initial, breite Zeilenabstaende,
   Knoepfe erst ganz unten. Ein Text, den man vorlesen soll, muss aussehen
   wie etwas, das man vorliest. */

/* ---- Das Blatt ---- */
.sch-blatt{
  position:relative;
  padding:16px 17px 14px;
  border:1px solid var(--glasrand);
  border-radius:16px;
  background:var(--glas2);
  box-shadow:inset 0 1px 0 var(--glanz), 0 6px 20px rgba(0,0,0,.20);
  overflow:hidden;
}
/* Schmaler Streifen an der Kante. Markiert das Blatt als Blatt, ohne dass
   ein Rahmen aus einer anderen Farbwelt noetig waere. */
.sch-blatt::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--gelb), var(--lila));
  opacity:.75;
}

/* ---- Kopf: Weltname, Beiname, Muster ---- */
.sch-kopf{
  display:flex; flex-direction:column; gap:2px;
  padding-bottom:11px; margin-bottom:12px;
  border-bottom:1px solid var(--glasrand);
}
.sch-kopf i{
  font-style:normal; font-size:9px; letter-spacing:3px;
  text-transform:uppercase; color:var(--mut);
}
.sch-kopf h2{
  margin:1px 0 0; font-size:24px; line-height:1.1; letter-spacing:2px;
  color:var(--gelb);
  text-shadow:0 0 20px color-mix(in srgb, var(--gelb) 40%, transparent);
}
.sch-kopf b{font-size:12px; font-weight:400; font-style:italic; color:var(--les); line-height:1.45}
.sch-kopf span{
  margin-top:5px; align-self:flex-start;
  font-size:9px; letter-spacing:2px; text-transform:uppercase;
  color:var(--cyan); border:1px solid var(--glasrand);
  border-radius:20px; padding:2px 9px; background:var(--glanz);
}

/* ---- Der Text ---- */
.sch-text{display:flex; flex-direction:column; gap:11px}
.sch-p{
  margin:0; font-size:12.5px; line-height:1.78; color:var(--les);
  text-align:left; hyphens:auto;
}
/* Initial im ersten Absatz. Ein Buchstabe reicht als Signal "das ist eine
   Erzaehlung und keine Statuszeile". */
.sch-erst::first-letter{
  float:left; font-size:34px; line-height:.86; padding:2px 7px 0 0;
  color:var(--gelb); font-weight:700;
}
.sch-p + .sch-p{padding-top:10px; border-top:1px solid var(--glanz)}

.sch-leer{font-size:11px; color:var(--dim); margin:0; line-height:1.6}

/* ---- Knoepfe ---- */
.sch-knoepfe{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}
.sch-b{flex:1 1 auto; min-width:118px; font-size:11px; white-space:nowrap}

/* ---- Enge Schublade und kleine Geraete ---- */
@media (max-width:520px){
  .sch-blatt{padding:13px 13px 11px; border-radius:13px}
  .sch-kopf h2{font-size:20px; letter-spacing:1px}
  .sch-p{font-size:12px; line-height:1.72}
  .sch-erst::first-letter{font-size:28px}
  .sch-b{flex:1 1 100%}
}

/* Vorlesen laeuft: der Knopf zeigt es an, damit niemand zweimal drueckt
   und zwei Stimmen uebereinander redet. */
.sch-b.spricht{
  border-color:var(--cyan);
  box-shadow:0 0 0 1px var(--cyan), 0 0 14px color-mix(in srgb, var(--cyan) 45%, transparent);
}

/* Reduzierte Bewegung respektieren: das Blatt hat keine noetige Animation,
   aber der Schweif der Knopf-Uebergaenge darf trotzdem weg. */
@media (prefers-reduced-motion:reduce){
  .sch-b{transition:none}
}