/* =========================================================
   Evidence Board (former "corkboard") — free positioning
   ---------------------------------------------------------
   Elements are absolutely positioned rather than in a grid so
   real photos, post-its and red strings can sit freely on the
   board like a real detective's pinboard. The board itself has
   a fixed height to keep layout predictable; on mobile it falls
   back to a simple vertical stack.
   ========================================================= */
.evidence-board {
  position: relative;
  padding: 2rem;
  /* Nahtlos kachelbare Korkfoto-Textur (assets/kork.webp, 800px,
     seam-korrigiert). Wiederholt sich über die volle Boardhöhe.
     Grundfarbe als Fallback, falls das Bild nicht lädt. */
  background-color: #c89a68;
  background-image: url("/assets/kork.webp");
  background-size: 400px 400px;
  background-repeat: repeat;
  box-shadow:
    inset 0 0 50px rgba(60, 30, 10, 0.3),
    inset 0 2px 0 rgba(255, 220, 170, 0.1),
    0 10px 24px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  /* Fixed height so absolute child positions remain predictable.
     `visible` overflow lets post-its pinned near the edge extend
     beyond the board — same way a note can stick out past a real
     corkboard's wooden frame. */
  height: 660px;
  overflow: visible;
}
.evidence-board::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 3px;
  /* Leichter Multiply-Schleier für Tiefe — das Korkfoto trägt die
     eigentliche Textur, hier nur eine dezente Vertiefung der Poren. */
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(60, 30, 10, 0.14) 100%);
  mix-blend-mode: multiply;
  opacity: 0.6;
  pointer-events: none;
}
.evidence-board::after {
  content: "";
  position: absolute; inset: 8px;
  border: 1px solid rgba(60, 30, 10, 0.18);
  pointer-events: none;
}

/* Post-its on the evidence board — absolute positioning via inline style */
.evidence-board .post-it {
  position: absolute;
  width: 250px;
  min-height: 0;
  padding: 1.35rem 1.05rem 1.2rem;
  font-size: 1.06rem;
  display: block;
  text-align: center;
  /* Default transform comes from --tilt. On hover we override with
     straightened + scaled + lifted version. */
  transition: transform 0.22s ease, box-shadow 0.22s ease, z-index 0s;
}
.evidence-board .post-it:hover {
  /* Straighten, grow 15%, lift, and shoot to the very top of the
     stacking context so no thread or neighbor can overlap it. */
  transform: rotate(0deg) scale(1.15) translateY(-4px);
  box-shadow:
    4px 8px 18px rgba(0, 0, 0, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.22);
  z-index: 20;
  cursor: default;
}

/* =========================================================
   Photo cards — polaroids pinned to the board
   ========================================================= */
.eb-photo {
  position: absolute;
  background: #f4ecd6;
  padding: 10px 10px 28px;
  transform: rotate(var(--tilt, 0deg));
  box-shadow:
    3px 4px 10px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
  /* Photos are zoomable via lightbox */
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.eb-photo:hover {
  /* Straighten the polaroid on hover + lift it slightly */
  transform: rotate(calc(var(--tilt, 0deg) * 0.3)) translateY(-3px) scale(1.04);
  box-shadow:
    4px 7px 16px rgba(0, 0, 0, 0.4),
    0 3px 6px rgba(0, 0, 0, 0.25);
  z-index: 5;
}
.eb-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.eb-photo .eb-caption {
  margin-top: 8px;
  text-align: center;
  font-family: 'Kalam', cursive;
  font-size: 0.82rem;
  color: var(--ink);
}
.eb-photo .eb-caption-stamp {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stamp-red);
}

/* Push-pin on photos — illustrierter Nadelkopf, wie auf den Post-its */
.eb-photo::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px;
  background: url("/assets/pin-rot.webp") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
  z-index: 4;
}
.eb-photo.pin-yellow::before { background-image: url("/assets/pin-gelb.webp"); }
.eb-photo.pin-blue::before   { background-image: url("/assets/pin-blau.webp"); }
.eb-photo.pin-green::before  { background-image: url("/assets/pin-gruen.webp"); }
.eb-photo.pin-red::before    { background-image: url("/assets/pin-rot.webp"); }

/* Red marker circles drawn over the map */
.eb-map-marker {
  position: absolute;
  border: 3px solid rgba(138, 40, 24, 0.9);
  border-radius: 50%;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

/* =========================================================
   Diamond cluster — three evidence photos overlapping,
   presented as a grouped set of related preziosen
   ========================================================= */
.eb-diamond-cluster {
  position: absolute;
  width: 360px;
  height: 200px;
}
.eb-photo.eb-photo-small {
  padding: 7px 7px 18px;  /* tighter polaroid border */
}
.eb-photo.eb-photo-small .eb-caption {
  font-size: 0.7rem;
  margin-top: 4px;
}

/* Smaller accent post-its wedged between the photo row and main post-it rows */
.evidence-board .post-it.eb-mini-note {
  width: 170px;
  padding: 0.85rem 0.75rem 0.7rem;
  font-size: 0.82rem;
}
.eb-cluster-label {
  position: absolute;
  /* Sits directly on the lower edge of the diamond polaroids rather
     than floating below — feels more like a pinned caption. */
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stamp-red);
  background: #f4ecd6;
  padding: 4px 12px;
  box-shadow: 2px 3px 5px rgba(0,0,0,0.2);
  z-index: 4;
}

/* =========================================================
   Stecknadel-Vorrat — kleiner Haufen bunter Pins, unten
   rechts ins Brett gesteckt. Rein dekorativ (aria-hidden,
   pointer-events: none). Jede Nadel positioniert sich über
   --px/--py innerhalb des Stash-Containers, --ps skaliert
   den Kopf leicht für natürliche Größenvariation.
   ========================================================= */
.eb-pin-stash {
  position: absolute;
  right: 40px;
  bottom: 14px;
  width: 104px;
  height: 68px;
  pointer-events: none;
  z-index: 2;
}
.eb-stash-pin {
  position: absolute;
  left: var(--px, 0);
  top: var(--py, 0);
  width: calc(16px * var(--ps, 1));
  height: calc(16px * var(--ps, 1));
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
/* Illustrierte Nadelkoepfe — identisch zu Post-its/Polaroids */
.eb-stash-pin.pin-red    { background-image: url("/assets/pin-rot.webp"); }
.eb-stash-pin.pin-blue   { background-image: url("/assets/pin-blau.webp"); }
.eb-stash-pin.pin-green  { background-image: url("/assets/pin-gruen.webp"); }
.eb-stash-pin.pin-yellow { background-image: url("/assets/pin-gelb.webp"); }
/* Ein paar Nadeln stecken leicht schräg im Kork — hinter dem Kopf
   blitzt ein Stück der Metallnadel hervor. */
.eb-stash-pin.eb-stash-tilted::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 9px;
  top: 62%;
  left: 74%;
  transform: rotate(36deg);
  transform-origin: top center;
  border-radius: 1.5px;
  background: linear-gradient(180deg, #e2e2e2 0%, #9a9a9a 70%, #6f6f6f 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: -1;
}

/* =========================================================
   Red strings — SVG overlay connecting pinned elements
   ========================================================= */
.eb-thread-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.eb-thread-svg .eb-string {
  stroke: #9a2822;
  stroke-width: 2.5;
  fill: none;
  /* Kein drop-shadow-Filter: Chromium zeichnet den bei jedem Repaint
     der animierten Linien neu und lässt Schatten-Reste stehen (Flackern
     + "Extensions"). Ein weicher SVG-Schatten übernimmt das (siehe
     <filter> im Board-Markup / JS), der wird nur einmal gerastert. */
}
.eb-thread-svg .eb-string-knot {
  fill: #9a2822;
}
/* Chromium-Stabilisierung: das Thread-SVG auf eine eigene, statische
   Compositing-Ebene legen, damit die Linien nicht bei jedem Frame des
   Boards neu gerastert werden. */
.eb-thread-svg {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* =========================================================
   MOBILE: Pinnwand wird durch Karten-Stapel ersetzt.
   Pinnwand-DOM bleibt erhalten (für JS-Datenextraktion),
   wird aber komplett verborgen. Der Stapel ist standardmäßig
   versteckt und nur auf Mobile sichtbar.
   ========================================================= */
.rules-mobile-stack { display: none; }

@media (max-width: 900px) {
  .evidence-board { display: none; }
  /* Sicherheitsnetz gegen eine vom Desktop-Pfad gesetzte
     Inline-Hoehe des Skalier-Wrappers (siehe js/14) */
  .board-fit { height: auto !important; }
  .rules-mobile-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 1rem 2rem;
  }
}

/* Stapel-Komponenten */
.rms-counter {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-soft, #5f4620);
  text-transform: uppercase;
}
.rms-stack {
  position: relative;
  width: 280px;
  height: 360px;
}
.rms-hint {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(60, 40, 20, 0.55);
  text-align: center;
  margin-top: 4px;
  transition: opacity 300ms ease;
}
.rms-hint.is-faded { opacity: 0; }
.rms-reset {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  padding: 10px 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ink, #2a1f0f);
  color: var(--paper, #f4ecd8);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  margin-top: 8px;
}
.rms-reset:hover { background: var(--ink-soft, #5f4620); }

/* Karte — Basis. Jede Karte bekommt beim Erzeugen einen festen,
   zufälligen --tilt der sich nie ändert. Es gibt keine Layer-Klassen
   mehr — der Stapel-Effekt entsteht durch z-index, alle Karten liegen
   in identischer Box-Position übereinander, jede mit eigenem Tilt. */
.rms-card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  transform: rotate(var(--tilt, 0deg));
}
/* Transition NUR auf der Wegfliege-Klasse — sonst gibt es bei keinem
   Zustandswechsel der unteren Karten irgendeine Animation. Sie liegen
   einfach so, wie sie beim Laden gelegt wurden. */
.rms-card.flying-left,
.rms-card.flying-right {
  transition: transform 480ms cubic-bezier(0.4, 0.0, 0.2, 1),
              opacity 480ms ease;
}
.rms-card.flying-left  { transform: translateX(-150%) rotate(-22deg) !important; opacity: 0 !important; pointer-events: none; }
.rms-card.flying-right { transform: translateX(150%)  rotate(22deg)  !important; opacity: 0 !important; pointer-events: none; }
/* Empty-Karte am Stapel-Boden: nicht klickbar */
.rms-card-empty { pointer-events: none; cursor: default; }

/* Notiz-Karte (Pergament-Look mit Klebeband) */
.rms-note {
  width: 250px;
  min-height: 260px;
  background: linear-gradient(135deg, #fce889 0%, #f5d655 100%);
  padding: 30px 22px;
  font-family: 'Kalam', 'Patrick Hand', cursive;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink, #2a1f0f);
  border: 1px solid rgba(150,110,60,0.18);
  box-shadow:
    2px 3px 6px rgba(0, 0, 0, 0.22),
    4px 8px 14px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.rms-note p { margin: 0; }
.rms-note em { font-style: italic; color: var(--stamp-red, #b82727); font-weight: 400; }
.rms-note strong { font-weight: 600; }
.rms-note a { color: inherit; text-decoration: underline; }
.rms-note.tone-green { background: linear-gradient(135deg, #c8e6a0 0%, #a8d178 100%); }
.rms-note.tone-pink  { background: linear-gradient(135deg, #f8c8d8 0%, #f099b3 100%); }
.rms-note.tone-blue  { background: linear-gradient(135deg, #b8d4e8 0%, #8db8d8 100%); }

/* Foto-Karte (Polaroid-Look) */
.rms-photo {
  width: 250px;
  height: 300px;
  background: #fffaee;
  padding: 14px 14px 40px;
  border: 1px solid rgba(150,110,60,0.25);
  box-shadow:
    2px 3px 6px rgba(0, 0, 0, 0.22),
    4px 8px 14px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
}
.rms-photo-frame {
  width: 100%;
  flex: 1;
  background: #1a1410;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  gap: 4px;
}
.rms-photo-frame img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.rms-photo-frame.is-cluster img {
  width: 30%;
  max-height: 90%;
  object-fit: cover;
}
.rms-photo-cap {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Caveat', 'Kalam', cursive;
  font-size: 16px;
  color: #5f4620;
}

/* End-Zustand */
.rms-empty {
  width: 250px;
  height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--ink-soft, #5f4620);
  text-align: center;
  padding: 0 1.5rem;
  cursor: default;
}


/* ==================================================================
   Fit-to-Width fuer das Regel-Board
   Das Board hat eine feste Design-Breite (1480px). js/14-evidence-board.js
   (drawEvidenceThreads) skaliert es per transform proportional auf die
   verfuegbare Breite und setzt die Wrapper-Hoehe entsprechend, damit auf
   schmalen Laptops alle Post-its sichtbar bleiben statt rechts abzulaufen.
   ================================================================== */
.board-fit { width: 100%; overflow: hidden; }
.evidence-board { width: 1480px; transform-origin: top left; will-change: transform; }