/* welt3d.css: der WebGL-Schirm und das Wenige, was darueber liegt.
 *
 * Der 3D-Schirm ist ein EIGENES Canvas. Der bestehende Karten-Canvas
 * (#karte) bleibt unangetastet und liegt darunter: wer den 3D-Modus
 * verlaesst, sieht sofort wieder seine Karte, ohne dass irgendetwas neu
 * gemalt werden muesste.
 *
 * Alles hier haengt an .welt3dan am body. Solange die Klasse fehlt,
 * kostet diese Datei nichts. */

canvas.welt3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  touch-action: none;
  background: #0a0f1c;
}
canvas.welt3d[hidden] { display: none; }

/* Solange 3D laeuft, braucht die flache Karte nicht mehr gemalt zu
   werden. Sie bleibt stehen, sie ist nur nicht zu sehen. */
body.welt3dan #karte { visibility: hidden; }

/* Fadenkreuz. Zwei Striche, kein Bild, keine Datei. */
body.welt3dan::after {
  content: '';
  position: fixed;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  pointer-events: none;
  z-index: 6;
  background:
    linear-gradient(currentColor, currentColor) 50% 0 / 1.5px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 100% / 1.5px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 7px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 50% / 7px 1.5px no-repeat;
  color: rgba(255, 255, 255, 0.72);
  opacity: 0.9;
}
body.welt3dan[data-theme="pergament"]::after { color: rgba(60, 44, 22, 0.8); }

/* Kleine Anzeige unten links: Bildrate, Zeichenaufrufe, Figuren. Wer
   die Kosten nicht sieht, kann sie auch nicht abwaegen. */
.welt3dmess {
  position: fixed;
  left: 10px; bottom: 10px;
  z-index: 7;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(6, 10, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 7px;
  padding: 5px 8px;
  pointer-events: none;
  white-space: pre;
  letter-spacing: 0.02em;
}
body[data-theme="pergament"] .welt3dmess {
  color: rgba(50, 38, 20, 0.78);
  background: rgba(227, 211, 172, 0.72);
  border-color: rgba(70, 52, 28, 0.28);
}
.welt3dmess[hidden] { display: none; }

/* Hinweiszeile in der Mitte oben, wenn der Modus etwas sagen will. */
.welt3dsag {
  position: fixed;
  left: 50%; top: 14%;
  transform: translateX(-50%);
  z-index: 7;
  max-width: 74vw;
  text-align: center;
  font: 600 13px/1.5 system-ui, sans-serif;
  color: #fff;
  background: rgba(6, 10, 20, 0.62);
  border: 1px solid rgba(255, 216, 61, 0.35);
  border-radius: 10px;
  padding: 7px 13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.welt3dsag.an { opacity: 1; }

/* Auf dem Telefon ist der Platz knapp und die Rechenleistung auch.
   Die Messanzeige rueckt hoch ueber die Bedienleiste. */
@media (max-width: 720px), (pointer: coarse) {
  .welt3dmess { bottom: auto; top: 8px; left: 8px; font-size: 10px; }
  body.welt3dan::after { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
}

/* Wenn WebGL fehlt, sagt der Modus das und laesst den flachen
   Ego-Modus weiterlaufen. Diese Klasse macht den Knopf grau. */
.welt3d-fehlt { opacity: 0.4; pointer-events: none; }

/* Warnung, wenn eine Katastrophe naeher kommt. Sie steht bewusst gross
   und oben: wer unten in der Welt laeuft, sieht den Tornado sonst erst,
   wenn er in ihm steht. */
.w3-warnung{
  position:fixed; left:50%; top:64px; transform:translateX(-50%); z-index:125;
  padding:9px 20px; border-radius:0; pointer-events:none; text-align:center;
  clip-path:polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  background:rgba(120,40,10,.72); border:1px solid #ff8c1a;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 6px 30px rgba(0,0,0,.5);
}
.w3-warnung[hidden]{display:none}
.w3-warnung b{display:block; font-size:14px; color:#ffd83d; letter-spacing:1px}
.w3-warnung span{display:block; font-size:11px; color:#ffcfa8; margin-top:2px}
.w3-warnung.nah{
  background:rgba(170,30,10,.85); border-color:#ff3d1a;
  animation:w3Puls .6s ease-in-out infinite;
}
@keyframes w3Puls{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}