/* ================= KARST – Höhlen-Prototyp ================= */
/* Art Direction: A (nasser Fels) + C (Zurückhaltung) –
   kalter, feuchter Kalkstein, eine warme Stirnlampe, Instrument-Typografie. */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #030405;
}

body {
  font-family: "Inter Tight", system-ui, -apple-system, sans-serif;
  color: #cdc9c0;
  cursor: crosshair;
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- Overlays (Titel / Pause) ---------- */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at 50% 60%, rgba(7, 9, 10, 0.88), rgba(2, 3, 3, 0.98) 75%);
  transition: opacity 1.6s ease;
  z-index: 10;
}

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

.title-inner { max-width: 34rem; padding: 2rem; }

h1 {
  font-size: clamp(2.8rem, 8vw, 5rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* Ausgleich für letter-spacing */
  color: #c7c3ba;
  animation: title-in 2.6s ease-out both;
}

@keyframes title-in {
  from { opacity: 0; letter-spacing: 0.46em; text-indent: 0.46em; }
  to   { opacity: 1; letter-spacing: 0.3em; text-indent: 0.3em; }
}

h2 {
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: #c7c3ba;
}

.subtitle {
  margin-top: 0.7rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: #6a6b66;
}

.intro-text {
  margin-top: 2.6rem;
  font-size: 0.96rem;
  font-weight: 300;
  line-height: 1.95;
  color: #8f8d86;
  animation: fade-in 2.4s ease 1.4s both;
}

.subtitle { animation: fade-in 2s ease 0.9s both; }
.controls-hint { animation: fade-in 2s ease 2.6s both; }

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.prompt {
  margin-top: 2.8rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #a7a49b;
  animation: pulse 2.6s ease-in-out infinite;
}

.controls-hint {
  margin-top: 1.6rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: #55554f;
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* ---------- End-Einblendung ---------- */
.endcard {
  position: fixed;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity 2.4s ease;
  pointer-events: none;
  z-index: 5;
}

.endcard.visible { opacity: 1; }
.endcard.hidden { display: none; }

.endcard h3 {
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #c5c1b7;
}

.endcard p {
  margin-top: 0.8rem;
  font-size: 0.86rem;
  font-weight: 300;
  color: #837f76;
}

.endcard .small {
  margin-top: 1.2rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #4d4c46;
}

/* ================= Expeditions-Screens ================= */

.overlay h2 {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: #c5c1b7;
}

.cave-list {
  margin: 1.6rem auto 1.2rem;
  max-width: 30rem;
  text-align: left;
}

.cave-row, .gear-row {
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(140, 138, 128, 0.14);
  border-radius: 2px;
  margin-bottom: 0.45rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.cave-row:hover, .gear-row:hover {
  border-color: rgba(180, 176, 164, 0.4);
  background: rgba(120, 118, 108, 0.06);
}

.cave-row.locked {
  cursor: default;
  opacity: 0.35;
}
.cave-row.locked:hover { border-color: rgba(140, 138, 128, 0.14); background: none; }

.cave-name {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c5c1b7;
}

.cave-meta {
  float: right;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: #6b6960;
}

.cave-brief {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 300;
  color: #837f76;
}

.gear-row { user-select: none; }

.gear-count {
  display: inline-block;
  width: 2rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  color: #c5c1b7;
}

.gear-name {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b0aca2;
}

.gear-note {
  float: right;
  font-size: 0.68rem;
  font-weight: 300;
  color: #6b6960;
}

.slots-line {
  margin-top: 1rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #837f76;
}

#descend-btn, #debrief-back {
  cursor: pointer;
  border: 1px solid rgba(180, 176, 164, 0.25);
  border-radius: 2px;
  display: inline-block;
  padding: 0.55rem 1.4rem;
  margin-top: 1.1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
#descend-btn:hover, #debrief-back:hover {
  border-color: rgba(210, 206, 194, 0.5);
  background: rgba(120, 118, 108, 0.08);
}

.debrief-block { margin: 1.4rem 0 0.4rem; }

.debrief-line {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: #979387;
  margin-top: 0.35rem;
}

.debrief-line.unlock { color: #b8c4c2; margin-top: 1rem; }

/* Toast: wie die Endkarte, aber weiter oben und kleiner */
.endcard.toast {
  top: 18%;
  transform: translate(-50%, 0);
  max-width: 30rem;
  pointer-events: none;
}
.endcard.toast p {
  margin-top: 0;
  font-size: 0.8rem;
}

/* Pause-Menü: Lautstärke & Stumm */
.pause-options {
  margin-top: 26px;
  display: flex;
  gap: 28px;
  justify-content: center;
  font: 12px 'IBM Plex Mono', monospace;
  color: rgba(210, 206, 194, 0.7);
}
.pause-options label { display: flex; align-items: center; gap: 8px; }
.pause-options input[type="range"] { width: 120px; accent-color: #8fa3b0; }
.pause-options input[type="checkbox"] { accent-color: #8fa3b0; }