/* ego.css: die Bedienung des Ego-Modus.

   Eigene Datei, damit style.css unberuehrt bleibt. Es werden nur die
   Variablen benutzt, die dort schon fuer alle drei Ansichten gesetzt
   sind (--glas, --glas2, --glasrand, --glanz, --cyan, --gelb, --txt,
   --mut, --les, --unschaerfe). Dadurch faerbt der Modus automatisch
   mit, wenn man auf Pergament oder Nacht wechselt, ohne eine einzige
   feste Farbe. Ausnahme ist der Schleier am Bildrand: der ist immer
   dunkel, weil er nicht Bedienung ist, sondern Kameralinse. */

.ego{
  position:fixed; right:16px; bottom:74px; z-index:44;
  width:236px; padding:10px; border-radius:14px;
  display:flex; flex-direction:column; gap:7px;
}
.ego[hidden]{ display:none; }

.ego-kopf{
  display:flex; align-items:center; gap:7px;
  font-size:11px; letter-spacing:1.2px; color:var(--mut);
  padding-bottom:6px; border-bottom:1px solid var(--glasrand);
}
.ego-kopf i{ font-style:normal; font-size:15px; }
.ego-kopf b{ color:var(--cyan); }
/* Wen du gerade bist. Steht ganz rechts und darf lang werden, ohne
   die Zeile zu sprengen. */
.ego-kopf span{
  margin-left:auto; color:var(--txt); font-size:12px; letter-spacing:0;
  max-width:118px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.ego-reihe{ display:flex; gap:6px; }

.ego-b{
  flex:1; font:inherit; font-size:12px; line-height:1;
  color:var(--les); background:color-mix(in srgb, var(--glasrand) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--glasrand) 45%, transparent);
  border-radius:10px; padding:8px 6px; cursor:pointer; white-space:nowrap;
  display:flex; align-items:center; justify-content:center; gap:5px;
  transition:background .16s, color .16s, transform .1s;
}
.ego-b:hover{ color:var(--txt); background:color-mix(in srgb, var(--cyan) 16%, transparent); }
.ego-b:active{ transform:scale(.96); }
.ego-b.weit{ width:100%; }

/* Was gerade laeuft, leuchtet. Ohne das muss man lesen statt sehen. */
.ego-b.an{
  color:var(--txt);
  background:linear-gradient(180deg, var(--glanz), transparent 65%),
             color-mix(in srgb, var(--cyan) 26%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cyan) 55%, transparent),
             0 0 14px color-mix(in srgb, var(--cyan) 28%, transparent);
}
/* Besessenheit ist der Modus mit Einsatz, der bekommt die Warnfarbe. */
.ego-b.an[data-ego="besessen"]{
  background:linear-gradient(180deg, var(--glanz), transparent 65%),
             color-mix(in srgb, var(--gelb) 30%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gelb) 60%, transparent),
             0 0 14px color-mix(in srgb, var(--gelb) 30%, transparent);
}

.ego-tasten{
  font-size:10px; line-height:1.5; color:var(--mut);
  border-top:1px solid var(--glasrand); padding-top:6px;
}
.ego-tasten b{ color:var(--les); font-weight:600; }

/* ---- Der Griff, der den Modus ueberhaupt oeffnet ----
   Liegt am rechten Rand, gegenueber dem Reglergriff. */
.egogriff{
  position:fixed; right:0; top:52%; z-index:41;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  font:inherit; font-size:11px; letter-spacing:2px;
  color:var(--les); cursor:pointer;
  padding:14px 6px; border-radius:12px 0 0 12px;
  background:var(--glas2); border:1px solid var(--glasrand); border-right:0;
  -webkit-backdrop-filter:blur(var(--unschaerfe)); backdrop-filter:blur(var(--unschaerfe));
}
.egogriff:hover{ color:var(--txt); box-shadow:0 0 16px color-mix(in srgb, var(--cyan) 25%, transparent); }
body.egoan .egogriff{ color:var(--cyan); }

/* ---- Wenn der Modus laeuft ----
   Die Karte ist jetzt eine Kamera. Alles, was zur Draufsicht gehoert,
   stoert dabei nur, also faellt es weg statt halb dazuliegen. */
body.egoan #zoomleiste,
body.egoan #ansichten,
body.egoan .padzeiger{ opacity:0; pointer-events:none; }

/* Linse statt Bildschirm: ein dunkler Rand, der zur Mitte hin
   verschwindet. Ein einziger Verlauf, kostet nichts und macht aus einer
   flachen Flaeche einen Blick durch etwas hindurch. */
body.egoan::after{
  content:''; position:fixed; inset:0; z-index:9; pointer-events:none;
  background:radial-gradient(ellipse at 50% 52%,
    rgba(0,0,0,0) 46%, rgba(0,0,0,.28) 78%, rgba(0,0,0,.55) 100%);
}

/* Bei Besessenheit kommt ein Puls dazu. Er sagt ohne Worte: das hier
   ist ein Koerper, der sterben kann. Sehr langsam, sonst nervt er nach
   einer Minute. */
body.egoan.egobesessen::after{
  animation:egopuls 5.2s ease-in-out infinite;
}
@keyframes egopuls{
  0%,100%{ box-shadow:inset 0 0 120px rgba(255,95,109,.06); }
  50%{ box-shadow:inset 0 0 120px rgba(255,95,109,.16); }
}
@media (prefers-reduced-motion:reduce){
  body.egoan.egobesessen::after{ animation:none; }
}

/* Auf schmalen Schirmen rueckt die Tafel nach unten in die Mitte,
   sonst deckt sie das halbe Bild zu. */
@media (max-width:900px){
  .ego{ right:8px; left:8px; bottom:8px; width:auto; }
  .ego-tasten{ display:none; }
  .egogriff{ padding:10px 5px; }
}

/* Im Pergament ist Cyan keine Farbe, die es gibt. Dort traegt die
   Tusche, genau wie bei der Ansichtsleiste. */
body[data-theme="nacht"] .ego-b.an,
body[data-theme="nacht"] .ego-b.an[data-ego="besessen"]{
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75);
}