/* ECHO · Telefon. Dunkel im Ruhezustand, im Anruf ein Bildschirm wie am Handy:
   oben wer anruft, unten Lautsprecher, Stumm und der grüne bzw. rote Knopf. */

:root {
  --bg: #000;
  --fg: #F3EEE4;
  --muted: rgba(243, 238, 228, 0.55);
  --gruen: #3FB27F;
  --rot: #E5484D;
  --font: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

/* Hochkant bleibt hochkant: Dreht das System doch (automatisches Drehen an), dreht die Seite zurück.
   data-drehung setzt telefon.js aus screen.orientation.angle. */
html[data-drehung="90"] body,
html[data-drehung="270"] body {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vh;
  height: 100vw;
}
html[data-drehung="90"] body { transform: translate(-50%, -50%) rotate(-90deg); }
html[data-drehung="270"] body { transform: translate(-50%, -50%) rotate(90deg); }

.ebene {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vmax;
  padding: 8vmax 16px;
  text-align: center;
}

h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(2.4rem, 12vmin, 4.5rem);
  letter-spacing: 0.04em;
}

.klein { margin: 0; color: var(--muted); font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; }
.hinweis { margin: 0; color: var(--muted); font-size: 1.3rem; line-height: 1.4; }

.leise { opacity: 0.6; }
.telefon-id { letter-spacing: 0.1em; }

body[data-zustand="start"] #start { display: flex; }
body[data-zustand="ruhe"] #ruhe { display: flex; }
body[data-zustand="fehler"] #fehler { display: flex; }

/* Vorgeladene Werkstatt (telefon.js): unsichtbar, aber ausgelegt (damit Schrift und Skripte schon geladen sind).
   Nach dem PIN füllt sie den Bildschirm; das Netz des Telefons (tor.js, z-index 9999) liegt kurz darüber. */
#werkstatt-rahmen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 50;
  background: #000;
}
#werkstatt-rahmen.offen { visibility: visible; pointer-events: auto; }
#fehler-text { color: #e8a0a0; max-width: 32ch; }

/* ── Sperrbildschirm (Ruhe) ──
   Stromsparen: dunkel und gedämpft, die Uhr wandert jede Minute ein paar Pixel (kein Einbrennen).
   Berührung: kurz hell, ein Ring an der Stelle des Fingers, der Pfeil zeigt nach oben. */
body[data-zustand="pin"] #pin { display: flex; }

#ruhe {
  justify-content: space-between;
  padding: max(14vmax, env(safe-area-inset-top)) 16px max(6vmax, env(safe-area-inset-bottom));
  touch-action: none;
}
.sperre-oben, .sperre-unten {
  display: grid;
  justify-items: center;
  gap: 1.2vmax;
  opacity: 0.32;
  transition: opacity 1.2s ease, transform 0.25s ease-out;
}
#ruhe.wach .sperre-oben, #ruhe.wach .sperre-unten { opacity: 1; transition: opacity 0.25s ease, transform 0.25s ease-out; }
#ruhe.ziehen .sperre-oben, #ruhe.ziehen .sperre-unten { transition: opacity 0.25s ease; }
.uhr {
  margin: 1vmax 0 0;
  font-size: clamp(5rem, 27vmin, 9.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.datum { margin: 0; font: 1.15rem system-ui, sans-serif; color: var(--fg); opacity: 0.85; }
#ruhe .gruppe-text { margin-top: 2vmax; color: var(--fg); font-size: 1.5rem; }
.sperre-unten .hinweis { font: 1rem system-ui, sans-serif; }
.sperre-unten .pfeil { width: 30px; height: 30px; fill: var(--fg); }
#ruhe.wach .pfeil { animation: aufwaerts 1.4s ease-in-out infinite; }
/* Versteckte Verbindungsanzeige: hell und mit dem Server verbunden → grüner Pfeil */
.sperre-unten .pfeil { transition: fill 0.4s; }
body.verbunden #ruhe.wach .sperre-unten .pfeil { fill: var(--gruen); }

/* Netz hinter dem Sperrbildschirm (netz.js): bei Berührung Wellen wie ein kleines Beben */
#netz { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sperre-oben, .sperre-unten { position: relative; z-index: 1; }

/* ── PIN ── */
#pin {
  justify-content: space-between;
  padding: max(12vmax, env(safe-area-inset-top)) 16px max(6vmax, env(safe-area-inset-bottom));
  font-family: system-ui, sans-serif;
}
.pin-kopf { display: grid; justify-items: center; gap: 2vmax; }
.schloss { width: 28px; height: 28px; fill: var(--muted); }
#pin-punkte { display: flex; gap: 18px; }
#pin-punkte span { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--fg); transition: background 0.1s; }
#pin-punkte span.voll { background: var(--fg); }
#pin-punkte.falsch { animation: wackeln 0.4s ease-in-out; }
@keyframes wackeln {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-12px); }
  40%, 80% { transform: translateX(12px); }
}
.pin-meldung { margin: 0; min-height: 1.4em; color: #e8a0a0; font-size: 1rem; max-width: 30ch; }
.pin-meldung.ok { color: var(--gruen); }
/* Die Tasten reagieren beim Berühren (telefon.js). Keine Verkleinerung beim Drücken: Sonst landet ein Tipp
   am Rand beim Loslassen neben der Taste und zählt nicht. Tipps in die Lücken nimmt die nächste Taste. */
#pin-tasten { display: grid; grid-template-columns: repeat(3, 78px); gap: 18px 28px; justify-content: center; touch-action: none; }
#pin-tasten button {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 0;
  background: rgba(243, 238, 228, 0.12);
  color: var(--fg);
  font: 400 2rem system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.25s;
}
#pin-tasten button.gedrueckt { background: rgba(243, 238, 228, 0.42); transition: none; }
#pin-tasten button.wort.gedrueckt { background: rgba(243, 238, 228, 0.18); }
#pin-tasten button.wort { background: none; font-size: 1rem; }
#pin-tasten button#pin-loeschen { font-size: 1.6rem; }

@media (prefers-reduced-motion: reduce) {
  #ruhe.wach .pfeil, #pin-punkte.falsch { animation: none; }
}

/* ── Anruf-Bildschirm ── */

body[data-zustand="klingeln"] #anruf,
body[data-zustand="verbinden"] #anruf,
body[data-zustand="gespraech"] #anruf,
body[data-zustand="beendet"] #anruf { display: flex; }

#anruf {
  justify-content: space-between;
  padding: max(10vmax, env(safe-area-inset-top)) 16px max(7vmax, env(safe-area-inset-bottom));
}
.anruf-kopf { display: grid; gap: 1.2vmax; justify-items: center; }
#anruf .gruppe-text { color: var(--fg); font-size: 1.5rem; }
#anruf-status { font-variant-numeric: tabular-nums; min-height: 1.4em; font-family: system-ui, sans-serif; font-size: 1.05rem; }
.anruf-fuss { display: grid; gap: 4vmax; justify-items: center; width: 100%; }
#steuerung { display: flex; justify-content: center; gap: 48px; }
body:not([data-zustand="gespraech"]):not([data-zustand="verbinden"]) #steuerung { visibility: hidden; }

/* Runde Tasten: Kreis mit Symbol, Beschriftung darunter */
.taste {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: 0.95rem system-ui, sans-serif;
  cursor: pointer;
}
.taste .kreis {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(243, 238, 228, 0.16);
  transition: background 0.15s, transform 0.1s;
}
.taste:active .kreis { transform: scale(0.94); }
.taste svg { width: 32px; height: 32px; fill: currentColor; }
.taste[aria-pressed="true"] .kreis { background: var(--fg); color: #000; }
.taste:disabled { opacity: 0.35; }

#hoerer .kreis { width: 84px; height: 84px; color: #fff; background: var(--gruen); }
#hoerer svg { width: 38px; height: 38px; }
#hoerer .auf { display: none; }
body[data-zustand="verbinden"] #hoerer .kreis,
body[data-zustand="gespraech"] #hoerer .kreis { background: var(--rot); }
body[data-zustand="verbinden"] #hoerer .ab,
body[data-zustand="gespraech"] #hoerer .ab { display: none; }
body[data-zustand="verbinden"] #hoerer .auf,
body[data-zustand="gespraech"] #hoerer .auf { display: block; }
body[data-zustand="beendet"] #hoerer { visibility: hidden; }

/* Klingeln: der grüne Knopf pocht und schickt Wellen aus */
body[data-zustand="klingeln"] #hoerer .kreis { animation: pochen 1.2s ease-in-out infinite; }
@keyframes pochen {
  0%, 100% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(63, 178, 127, 0.6); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 22px rgba(63, 178, 127, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-zustand="klingeln"] #hoerer .kreis { animation: none; }
}

/* Annehmen: tippen oder den grünen Knopf nach oben wischen. Der Pfeil zeigt, wohin. */
#hoerer { position: relative; transition: transform 0.25s ease-out; }
#hoerer.ziehen { transition: none; }
body[data-zustand="klingeln"] #hoerer { touch-action: none; }
#hoerer .pfeil {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  fill: var(--gruen);
  animation: aufwaerts 1.4s ease-in-out infinite;
}
body[data-zustand="klingeln"] #hoerer .pfeil { display: block; }
#hoerer.ziehen .pfeil { animation: none; opacity: 0; }
@keyframes aufwaerts {
  0% { transform: translateY(12px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(-14px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #hoerer .pfeil { animation: none; }
}

/* Zustandspunkt: nur mit ?punkt sichtbar, für Tests am Tisch */
#punkt {
  position: fixed;
  left: 50%;
  bottom: 12px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #222;
  display: none;
}
body.punkt #punkt { display: block; }
body[data-zustand="verbinden"] #punkt { background: #806128; }
body[data-zustand="gespraech"] #punkt { background: #1d4d37; }
body[data-zustand="fehler"] #punkt { background: #6E2A2A; }

/* ── Diagnose ── */

html.diag, body.diag { overflow: auto; height: auto; min-height: 100%; background: #0E0F12; -webkit-user-select: text; user-select: text; }
#diag {
  padding: 16px;
  font-family: system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  max-width: 720px;
  margin: 0 auto;
}
#diag h1 { font-family: var(--font); font-size: 2rem; margin: 8px 0 4px; }
#diag h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 24px 0 8px; }
#diag table { width: 100%; border-collapse: collapse; }
#diag td { padding: 6px 4px; border-bottom: 1px solid #23252b; vertical-align: top; }
#diag td:first-child { width: 42%; color: var(--muted); }
#diag .ja { color: #6fd39f; }
#diag .nein { color: #e07a7a; }
#diag .offen { color: #e0c07a; }
#diag button {
  font: inherit;
  margin: 4px 6px 4px 0;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #3a3d45;
  background: #1a1c21;
  color: var(--fg);
}
#diag pre { white-space: pre-wrap; word-break: break-word; background: #15161A; padding: 8px; border-radius: 6px; font-size: 13px; }