/* ==================================================================
   JAGDMODUS (Einsatzansicht) — radikal reduzierte Ansicht für den
   Jagd-Samstag: Countdown, Schatz-Chips, Hinweisfoto, Hinweis-Leiste,
   Funkprotokoll. Mobile-first, hoher Kontrast (Sonnenlicht), keine
   Deko. Logik in js/24-jagdmodus.js.

   Aktivierung: body.jagdmodus-aktiv blendet alle normalen Seiten-
   Bestandteile aus und zeigt #jagdmodus. Die Lightbox bleibt aktiv
   (Foto-Zoom funktioniert auch im Jagdmodus).
   ================================================================== */

/* Umschaltung: alles außer Jagdmodus + Lightbox verschwindet */
#jagdmodus { display: none; }
body.jagdmodus-aktiv > :not(#jagdmodus):not(#lightbox):not(script) {
  display: none !important;
}
body.jagdmodus-aktiv #jagdmodus { display: block; }

/* ---------- Hero-Einstiegsknopf (nur bei laufender Jagd) ---------- */
/* V1 · Aktenstempel — gefüllt rot, gerade. Nur bei laufender Jagd
   sichtbar (Attribut hidden wird in js/24-jagdmodus.js gesetzt).
   Der Wrapper zentriert den Button unter der Statistik-Zeile;
   ist der Button hidden, kollabiert der Wrapper (kein Leerraum). */
/* ---------- Jagdmodus-Einstieg: die Countdown-Box selbst ----------
   Bei laufender Jagd setzt js/24-jagdmodus.js .cd-jagd-entry auf
   #hero-countdown: Die Box wird klickbar, die Lupen-Illustration
   liegt als Requisit auf der Ecke (Affordance: dasselbe Werkzeug
   fuehrt gleich die Uebergangs-Animation aus) und die Hinweiszeile
   erklaert den Klick. Ohne laufende Jagd ist von alldem nichts
   sichtbar — die Box bleibt der normale Countdown. */
.hero-countdown { position: relative; }
.cd-lupe {
  display: none;
  position: absolute;
  right: -30px;
  bottom: -26px;
  width: 92px;
  transform: rotate(-18deg);
  filter: drop-shadow(3px 5px 7px rgba(26, 22, 19, 0.35));
  pointer-events: none;
  z-index: 3;
  transition: transform 0.25s ease;
}
@keyframes jm-blink { 50% { opacity: 0.3; } }
.hero-countdown.cd-jagd-entry { cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.hero-countdown.cd-jagd-entry .cd-lupe { display: block; animation: cd-lupe-bob 3.2s ease-in-out infinite; }
.hero-countdown.cd-jagd-entry:hover { border-color: var(--stamp-red); box-shadow: 0 0 0 1px rgba(184, 39, 39, 0.25), var(--shadow-soft); }
.hero-countdown.cd-jagd-entry:hover .cd-lupe,
.hero-countdown.cd-jagd-entry:focus-visible .cd-lupe { transform: rotate(-10deg) translate(-7px, -7px); animation: none; }
@keyframes cd-lupe-bob { 0%, 100% { transform: rotate(-18deg) translateY(0); } 50% { transform: rotate(-16deg) translateY(-4px); } }

/* ---------- Lupen-Cinematic (Aktivierung) ----------
   Vollbild-Overlay, das js/24-jagdmodus.js beim Einstieg baut:
   Lupe fliegt herein, rastet mittig ein, Kamera taucht in die
   Linse (Lupe skaliert riesig, Schwarz blendet ein), darunter
   wechselt der Modus, Schwarz blendet wieder aus. Bewusst OHNE
   Sound — der Swish passte nicht zum Charakter des Uebergangs. */
.lupe-cine { position: fixed; inset: 0; z-index: 400; cursor: default; }
.lupe-cine-lens { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; filter: drop-shadow(8px 14px 16px rgba(15, 11, 6, 0.4)); }
.lupe-cine-black { position: absolute; inset: 0; background: #0c0a07; opacity: 0; }
body.jagdmodus-aktiv #jagdmodus { animation: jm-cine-settle 0.55s ease; }
/* Opacity-only (kein transform): ein transform auf #jagdmodus würde die
   fixe Kopfzeile an den Container binden statt ans Viewport und damit das
   feste Positionieren brechen. */
@keyframes jm-cine-settle { from { opacity: 0.4; } to { opacity: 1; } }

/* ---------- Grundgerüst ---------- */
#jagdmodus {
  font-family: var(--font-mono);
  color: var(--ink);
  /* Desktop deutlich breiter (vorher pauschal 560px — auf grossen
     Monitoren wirkte die Einsatzansicht gequetscht). Mobile behaelt
     die kompakte Spalte. Ticker und Funkprotokoll unten spiegeln
     dieselbe Breite. */
  max-width: min(920px, 94vw);
  margin: 0 auto;
  /* Oben Platz für die fixe Kopfzeile (~60px), unten für den fixen
     Ticker. */
  padding-top: 60px;
  padding-bottom: calc(3.4rem + env(safe-area-inset-bottom, 0px));
}

/* Kopfzeile */
/* Kopfzeile — FEST am oberen Rand, scrollt NICHT mit. position:fixed
   (statt sticky) hält sie immer ganz oben im Viewport. Weil #jagdmodus
   eine zentrierte Spalte ist, bekommt die fixe Leiste dieselbe max-width
   und Zentrierung, damit sie bündig über dem Inhalt sitzt. Der Inhalt
   darunter bekommt oben Abstand (padding-top am #jagdmodus), damit nichts
   unter der Leiste verschwindet. */
.jm-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  max-width: min(920px, 94vw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  background: var(--ink);
  color: var(--paper);
}
.jm-ident { display: flex; align-items: center; gap: 0.7rem; }
.jm-logo {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--paper);
}
.jm-brand { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.1em; line-height: 1.15; }
.jm-exit {
  font-family: var(--font-mono);
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper);
  background: none; border: 1px solid rgba(239, 231, 212, 0.45);
  padding: 0.5rem 0.8rem; cursor: pointer; white-space: nowrap;
}

/* Countdown */
.jm-countdown { text-align: center; padding: 1.3rem 1rem 1.1rem; border-bottom: 2px solid var(--ink); }
.jm-countdown .jm-cd-label { font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint); }
.jm-countdown .jm-cd-time {
  font-size: clamp(2.6rem, 13vw, 3.6rem);
  font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em; line-height: 1.1; margin-top: 0.15rem;
}
.jm-countdown .jm-cd-bar { height: 5px; background: var(--paper-deep); border: 1px solid rgba(26,22,19,0.35); margin-top: 0.7rem; }
.jm-countdown .jm-cd-bar i { display: block; height: 100%; width: 0%; background: var(--stamp-red); }
.jm-countdown .jm-cd-sub { margin-top: 0.5rem; font-size: 0.82rem; color: var(--ink-faint); }

/* Schatz-Chips */
.jm-nav {
  display: flex; gap: 6px;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  border-bottom: 1px solid rgba(26,22,19,0.15);
  scrollbar-width: none;
}
.jm-nav::-webkit-scrollbar { display: none; }
.jm-chip {
  position: relative;
  flex: 0 0 auto;
  min-width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 1rem; font-weight: 500;
  border: 1.5px solid rgba(26,22,19,0.35);
  background: var(--paper-deep);
  color: var(--ink-soft);
  cursor: pointer;
}
/* Gefundener Schatz: dasselbe kraeftige rote X wie im Chronik-Streifen,
   damit die Fund-Kennzeichnung ueberall einheitlich ist. Nummer bleibt sichtbar. */
.jm-chip.jm-found {
  color: var(--ink-soft);
}
.jm-chip.jm-found::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 62'%3E%3Cline x1='16' y1='15' x2='48' y2='47' stroke='%23b82727' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='48' y1='15' x2='16' y2='47' stroke='%23b82727' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.jm-chip.jm-active { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 700; }

/* Aktueller Schatz */
.jm-case { padding: 1.1rem 1rem 0; }
.jm-case-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; margin-bottom: 0.8rem; }
.jm-case-title { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; }
.jm-case-title small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 0.3rem;
}
.jm-status {
  font-family: var(--font-display);
  font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--stamp-red); border: 2px solid var(--stamp-red);
  padding: 0.35em 0.65em; transform: rotate(3deg); white-space: nowrap;
}
.jm-status.jm-found { color: #3f6b3a; border-color: #3f6b3a; }

/* Hinweisfoto */
.jm-photo {
  position: relative;
  border: 1px solid rgba(26,22,19,0.35);
  background: var(--paper-deep);
  /* Höher als vorher (war 4/3), damit auch Hochkant-Hinweisfotos
     vollständig hineinpassen. Zusammen mit object-fit:contain wird das
     komplette Bild gezeigt statt oben/unten beschnitten. */
  aspect-ratio: 3 / 4;
  max-height: 68vh;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-in;
  padding: 0;
  width: 100%;
  overflow: hidden;
  /* Vertikales Scrollen bleibt möglich, horizontale Wischgesten fangen
     wir selbst ab (Hinweis-Navigation, js/24). */
  touch-action: pan-y;
  user-select: none;
}
.jm-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* contain statt cover: das GANZE Bild ist sichtbar, nichts wird
     abgeschnitten. Ränder füllt der Papphintergrund. */
  object-fit: contain;
}
.jm-photo .jm-photo-ph {
  color: var(--ink-faint);
  font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
  text-align: center; line-height: 2;
  padding: 0 1rem;
}
.jm-photo .jm-photo-tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--ink); color: var(--paper);
  font-size: 0.72rem; letter-spacing: 0.16em;
  padding: 0.35em 0.6em;
}
.jm-photo .jm-photo-zoom {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper);
  background: rgba(26, 22, 19, 0.55);
  padding: 0.3em 0.6em;
}
.jm-photo.jm-empty { cursor: default; }
.jm-photo.jm-empty .jm-photo-tag,
.jm-photo.jm-empty .jm-photo-zoom { display: none; }

/* Hinweis-Leiste (horizontal scrollbar) */
.jm-prev-label { font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); padding-top: 1rem; }
.jm-prev {
  display: flex; gap: 8px;
  padding: 0.7rem 0 1.1rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.jm-prev::-webkit-scrollbar { display: none; }
.jm-prev button {
  flex: 0 0 auto;
  width: 92px; height: 66px;
  border: 1px solid rgba(26,22,19,0.35);
  background: var(--paper-deep);
  font-family: var(--font-mono);
  font-size: 0.8rem; color: var(--ink-soft);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.jm-prev button small { font-size: 0.66rem; color: var(--ink-faint); letter-spacing: 0.06em; }
.jm-prev button.jm-current { border: 2px solid var(--ink); font-weight: 700; }
.jm-prev button.jm-pending { border-style: dashed; color: rgba(26,22,19,0.3); background: transparent; cursor: default; }
.jm-prev button.jm-pending small { color: rgba(26,22,19,0.25); }

/* Live-Ticker (eingeklappt: nur neuestes Event) */
.jm-ticker {
  position: fixed; bottom: 0; left: 0; right: 0;
  max-width: min(920px, 94vw); margin: 0 auto;
  background: var(--paper-deep);
  border: 0; border-top: 2px solid var(--ink);
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  font-size: 0.86rem; color: var(--ink-soft);
  display: flex; align-items: center; gap: 0.6rem;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--font-mono);
  z-index: 30;
}
.jm-ticker .jm-dot { color: var(--stamp-red); animation: jm-blink 1.6s ease-in-out infinite; flex: 0 0 auto; }
.jm-ticker .jm-ticker-txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-ticker .jm-ticker-more { flex: 0 0 auto; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }

/* Funkprotokoll (Vollbild, gleitet von unten herein) */
.jm-log {
  position: fixed; inset: 0; z-index: 60;
  max-width: min(920px, 94vw); margin: 0 auto;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  visibility: hidden;
  transition:
    transform 0.38s cubic-bezier(0.32, 0.72, 0.25, 1),
    visibility 0s linear 0.38s;
}
.jm-log.jm-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0.25, 1);
}
.jm-log-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.8rem 1rem;
  background: var(--ink); color: var(--paper);
}
.jm-log-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.1em; }
.jm-log-close {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper); background: none;
  border: 1px solid rgba(239, 231, 212, 0.45);
  padding: 0.5rem 0.8rem; cursor: pointer;
}
.jm-log-list { flex: 1; overflow-y: auto; padding: 0.4rem 0 2rem; }
.jm-log-item {
  display: flex; gap: 0.9rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px dashed rgba(26,22,19,0.15);
  font-size: 0.9rem; line-height: 1.55;
}
.jm-log-item time { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.jm-log-item.jm-fund time { color: #3f6b3a; }
.jm-log-item.jm-hinweis time { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .jm-log, .jm-log.jm-open { transition: none; }
  .cd-lupe,
  .hero-countdown.cd-jagd-entry .cd-lupe,
  body.jagdmodus-aktiv #jagdmodus,
  .jm-ticker .jm-dot { animation: none; }
}