/* =====================================================================
   aussen.css – Rahmen um die Leinwand des Aussengeländes.

   Eigene Datei neben style.css, nicht darin: an der Höhle wird parallel
   gearbeitet, und style.css ist eine der Dateien, in die dabei
   hineingeschrieben wird. Grundgerüst und Palette sind von dort
   übernommen, damit beide Seiten wie dasselbe Spiel aussehen.

   Draussen ist der Boot-Hintergrund NICHT schwarz, sondern der Dunst des
   Horizonts – sonst blitzt beim Laden die Höhle auf, in die man erst
   noch hineingehen soll.
   ===================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background: #b9c2c4;
  color: #d6d2c4;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}

#game {
  display: block;
  width: 100vw;
  height: 100vh;
  cursor: default;
}

body.locked #game {
  cursor: none;
}

/* ---------- Overlays ---------- */

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dunst statt Schwarz – der Kessel liegt im Tageslicht. */
  background: #10141a;
  z-index: 10;
  transition: opacity 0.6s ease;
}

.overlay.fading {
  opacity: 0;
  pointer-events: none;
}

.hidden {
  display: none !important;
}

.boot-inner {
  text-align: center;
  max-width: 34rem;
  padding: 2rem;
}

.boot-inner h1 {
  font-size: clamp(2.5rem, 9vw, 4.5rem);
  font-weight: 300;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: #e8e4d8;
}

.subtitle {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #6b6f74;
}

.tagline {
  margin-top: 1.4rem;
  font-size: 0.95rem;
  font-style: italic;
  color: #98a0a4;
}

.boot-status {
  margin-top: 2.2rem;
  font-size: 0.9rem;
  color: #8a8d90;
  min-height: 1.4em;
}

.boot-status.error {
  color: #b87a6a;
}

.boot-keys {
  margin-top: 1.8rem;
  font-size: 0.74rem;
  line-height: 1.9;
  color: #6b6f74;
}

.boot-keys b {
  color: #9aa3a7;
  font-weight: 500;
}

/* ---------- Messwerte (nur Entwicklung) ---------- */

.stats {
  position: fixed;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 20;
  padding: 0.4rem 0.6rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #cfd6d8;
  /* Draussen ist der Hintergrund hell – ohne den dunklen Kasten sind die
     Zahlen auf Kalk und Himmel gleichermassen unlesbar. */
  background: rgba(10, 14, 18, 0.62);
  border: 1px solid rgba(200, 210, 214, 0.16);
  white-space: pre;
  pointer-events: none;
}

/* ---------- Feldnotizen ----------

   Die Ausgabe des Steinwurfs und der Vermerke. Unten mittig, knapp,
   ohne Rahmen: es sind Sätze, keine Meldungen eines Systems.           */

.log {
  position: fixed;
  bottom: 5.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  width: min(46rem, calc(100vw - 3rem));
  text-align: center;
  pointer-events: none;
}

.log-line {
  margin-top: 0.3rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #f2efe6;
  /* Schlagschatten statt Kasten: der Text muss auf hellem Kalk und im
     schwarzen Portal gleich gut lesbar sein. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.7);
  transition: opacity 0.4s linear;
}

/* ---------- Aufforderung ---------- */

.prompt {
  position: fixed;
  bottom: 3.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 19;
  min-height: 1.4em;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #f2efe6;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  pointer-events: none;
}

.prompt.wide {
  padding: 0.7rem 1.1rem;
  background: rgba(10, 14, 18, 0.82);
  border: 1px solid rgba(200, 210, 214, 0.2);
  backdrop-filter: blur(3px);
}

.prompt b {
  color: #ffd9a8;
  font-weight: 600;
}

.prompt .dim {
  color: #a9b1b4;
  font-size: 0.82rem;
}

.prompt .typed {
  font-size: 1.15rem;
  color: #ffffff;
}

.prompt .caret {
  animation: blink 1.05s step-end infinite;
  color: #ffd9a8;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* ---------- Kataster ---------- */

.kataster {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 25;
  width: min(34rem, calc(100vw - 3rem));
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding: 1.6rem 1.8rem;
  background: rgba(10, 14, 18, 0.94);
  border: 1px solid rgba(200, 210, 214, 0.22);
  backdrop-filter: blur(6px);
}

.kataster h2 {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8a9296;
  margin-bottom: 1.1rem;
}

.kataster pre {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.85;
  color: #e2ded2;
  white-space: pre-wrap;
  margin-bottom: 1.1rem;
}

.kataster .dim {
  font-size: 0.74rem;
  color: #6b7276;
}

/* ---------- Sprungmarken (nur Entwicklungsvorschau) ---------- */

.places {
  position: fixed;
  bottom: 0.7rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.5rem;
  max-width: calc(100vw - 1.4rem);
  font-size: 0.72rem;
  background: rgba(10, 14, 18, 0.72);
  border: 1px solid rgba(200, 210, 214, 0.18);
  backdrop-filter: blur(3px);
}

.places-label {
  margin-right: 0.4rem;
  color: #7d8488;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.62rem;
}

.places a {
  padding: 0.2rem 0.5rem;
  color: #b6bec1;
  text-decoration: none;
  border-radius: 2px;
}

.places a:hover,
.places a:focus-visible {
  color: #ffffff;
  background: rgba(200, 210, 214, 0.16);
}

body.locked .places {
  opacity: 0;
  pointer-events: none;
}