/* geschichte.css: die Erzaehlschicht in der Schublade.
   Nutzt nur die Variablen aus style.css, damit die Schicht in allen drei
   Ansichten mitgeht: Neon, Pergament, Nacht. Kein eigener Farbwert, der
   im Pergament dann dunkelblau leuchtet. Alles unter .ge- gescopet,
   damit nichts aus dem Rest des Spiels umgefaerbt wird. */

/* ---- Kopf: der Schalter und der Stil ---- */
.ge-kopf{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ge-schalter{
  display:flex; align-items:center; gap:7px; font-size:12px; color:var(--txt);
  letter-spacing:1px; cursor:pointer; user-select:none;
}
.ge-schalter input{width:15px; height:15px; accent-color:var(--gelb); cursor:pointer}
.ge-kopf select{
  flex:1; min-width:120px; background:var(--glas2); color:var(--txt);
  border:1px solid var(--glasrand); border-radius:12px; padding:5px 9px;
  font-family:inherit; font-size:12px; cursor:pointer;
}
.ge-hinweis{font-size:11px; color:var(--les); line-height:1.55; margin:0}

/* ---- Weltname. Das Schild ueber allem ---- */
.ge-welt{
  display:flex; flex-direction:column; gap:3px; padding:11px 13px;
  border:1px solid var(--glasrand); border-radius:14px; background:var(--glas2);
  box-shadow:inset 0 1px 0 var(--glanz);
}
.ge-welt b{
  font-size:19px; letter-spacing:2px; color:var(--gelb); line-height:1.15;
  text-shadow:0 0 18px color-mix(in srgb, var(--gelb) 45%, transparent);
}
.ge-welt span{font-size:11px; color:var(--les); line-height:1.5}

.ge-block{padding-top:11px; border-top:1px solid var(--glasrand)}
.ge-block h3{
  font-size:11px; letter-spacing:3px; color:var(--cyan);
  text-transform:uppercase; margin:0 0 8px;
}
.ge-leer{font-size:11px; color:var(--dim); margin:0}

/* ---- Besetzung. Jede Zeile ist ein echtes Wesen, darum anklickbar ---- */
.ge-rolle{
  display:block; width:100%; text-align:left; margin-bottom:5px; cursor:pointer;
  background:var(--glanz); border:1px solid transparent; border-left:2px solid var(--lila);
  border-radius:0 9px 9px 0; padding:6px 9px; font-family:inherit; color:var(--txt);
  transition:background .15s, border-color .15s, transform .1s;
}
.ge-rolle:hover{background:var(--glas2); border-color:var(--cyan); border-left-color:var(--cyan)}
.ge-rolle:active{transform:scale(.985)}
.ge-rolle i{
  display:block; font-style:normal; font-size:9px; letter-spacing:2px;
  text-transform:uppercase; color:var(--mut);
}
.ge-rolle b{display:block; font-size:13px; color:var(--txt); margin:1px 0}
.ge-rolle span{display:block; font-size:10px; color:var(--les)}

/* ---- Aufgaben mit Fortschritt ---- */
.ge-quest{
  border:1px solid var(--glasrand); border-radius:11px; padding:8px 10px;
  margin-bottom:7px; background:var(--glanz);
}
.ge-quest b{display:block; font-size:12px; color:var(--gelb); line-height:1.35}
.ge-quest span{display:block; font-size:10px; color:var(--les); line-height:1.5; margin:3px 0 6px}
.ge-quest em{display:block; font-style:normal; font-size:10px; color:var(--mut); margin-top:4px}
.ge-bar{
  height:5px; background:var(--tief); border-radius:4px; overflow:hidden;
  border:1px solid var(--glasrand);
}
.ge-bar i{
  display:block; height:100%; width:0; background:var(--cyan);
  box-shadow:0 0 8px var(--cyan); transition:width .4s;
}

/* ---- Die Chronik im gewaehlten Ton ---- */
.ge-zeilen{display:flex; flex-direction:column; gap:3px; max-height:210px; overflow-y:auto}
.ge-zeile{
  font-size:11px; line-height:1.45; color:var(--mut); padding:5px 8px;
  border-left:2px solid var(--dim); background:var(--glanz); border-radius:0 6px 6px 0;
}
.ge-zeile span{display:block; font-size:9px; color:var(--dim); letter-spacing:1px}
.ge-zeile.gut{border-left-color:var(--gruen); color:var(--gutTxt)}
.ge-zeile.schlecht{border-left-color:var(--rot); color:var(--schlechtTxt)}
.ge-zeile.start{border-left-color:var(--gelb); color:var(--gelb)}

/* ---- Der grosse Knopf und der fertige Text ---- */
.ge-knopf{width:100%; margin-top:11px}
.ge-text{
  margin-top:11px; padding:12px 14px; border-radius:14px;
  border:1px solid var(--gelb); background:var(--glas2);
  font-size:12px; line-height:1.72; color:var(--les);
  max-height:340px; overflow-y:auto;
  box-shadow:inset 0 1px 0 var(--glanz);
}

/* Beschriftungen auf der Karte zeichnet der Renderer selbst ins Canvas.
   Hier stehen nur die Farbwerte dafuer, damit sie mit der Ansicht wechseln
   und nicht im Renderer als feste Hex-Werte festhaengen. */
:root{
  --ge-ort:var(--gelb);
  --ge-land:var(--les);
  --ge-welt:var(--cyan);
  --ge-schatten:rgba(0,0,0,.75);
}