/* ============================================================
 * SECTION II.a — UNSERE FINDER (FINDER WALL)
 * ============================================================
 * A corkboard-style pinboard between the case folders (II) and
 * the tickets section (III). Renders one polaroid per case (12
 * total). Empty cases show a placeholder gradient, claimed cases
 * show the finder's uploaded photo. Caption underneath always
 * shows "Akte {n}". This visually pairs with the evidence-board
 * in the rules section — same cork material, same polaroid +
 * red push-pin construction.
 * ============================================================ */
.finder-wall-section {
  padding: 4rem 1.5rem 5rem;
  max-width: 1280px;
  margin: 0 auto;
}

.finder-pinboard {
  position: relative;
  padding: 3rem 2rem;
  /* Gleiche nahtlos kachelbare Korkfoto-Textur wie .evidence-board
     (assets/kork.webp, seam-korrigiert) — ersetzt das alte CSS-
     generierte Kork aus Radial-Gradient-Punkten. 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;
  overflow: visible;
}
/* Leichter Multiply-Schleier für Tiefe — identisch zum Evidence Board.
   Das Korkfoto trägt die eigentliche Textur, hier nur eine dezente
   Vertiefung der Poren (ersetzt das frühere SVG-Turbulence-Noise). */
.finder-pinboard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  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;
}
/* Inner border — subtle paper liner inside the wooden frame */
.finder-pinboard::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(60, 30, 10, 0.18);
  pointer-events: none;
  z-index: 1;
}

/* Photo grid — 6 columns on desktop (2 rows × 6 = 12 polaroids).
   Falls back to 4/3 columns on smaller viewports so the polaroids
   stay readable. */
.finder-photos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2.5rem 1.4rem;
  padding: 1rem 0.5rem;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) {
  .finder-photos { grid-template-columns: repeat(4, 1fr); gap: 2rem 1.2rem; }
}
@media (max-width: 540px) {
  .finder-photos { grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1rem; }
}

/* Polaroid — same construction as .eb-photo on the evidence-board */
.finder-polaroid {
  /* Illustrierter Sofortbild-Rahmen (assets/polaroid.webp). Das
     Foto und die Kalam-Beschriftung sind weiterhin HTML und werden
     absolut ueber das vermessene Fotofenster bzw. den unteren Rand
     der Illustration gelegt (Insets aus der Pixel-Vermessung des
     Assets: Fenster top 6.4% / right 8.2% / bottom 22% / left 6.8%).
     KEINE background-color darunter (ragt sonst als gerader Saum
     hinter den minimal bestossenen Ecken hervor — siehe Notizzettel). */
  background: url("/assets/polaroid.webp") center / 100% 100% no-repeat;
  aspect-ratio: 561 / 700;
  padding: 0;
  box-shadow:
    3px 4px 10px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  z-index: 2;
  /* Default cursor is the regular pointer — only polaroids with
     real finder photos get the zoom-in cursor (see .has-photo
     rule below). Placeholder polaroids aren't clickable. */
}
.finder-polaroid.has-photo {
  cursor: zoom-in;
}
/* Per-instance tilt — 8-pattern rotation cycle gives an organic
   pinned-by-hand look that doesn't feel mechanical even with
   12 photos. */
.finder-polaroid:nth-child(8n+1) { transform: rotate(-2.5deg) translateY(2px); }
.finder-polaroid:nth-child(8n+2) { transform: rotate(1.8deg)  translateY(-3px); }
.finder-polaroid:nth-child(8n+3) { transform: rotate(-1.2deg) translateY(6px); }
.finder-polaroid:nth-child(8n+4) { transform: rotate(2.4deg)  translateY(0); }
.finder-polaroid:nth-child(8n+5) { transform: rotate(-2deg)   translateY(4px); }
.finder-polaroid:nth-child(8n+6) { transform: rotate(1.4deg)  translateY(-2px); }
.finder-polaroid:nth-child(8n+7) { transform: rotate(-1.8deg) translateY(8px); }
.finder-polaroid:nth-child(8n)   { transform: rotate(2.2deg)  translateY(2px); }
/* Hover — lift + straighten + boost shadow */
.finder-polaroid:hover {
  transform: rotate(0deg) 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;
}
/* Red push-pin — illustrierter Nadelkopf */
.finder-polaroid::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;
}

/* Photo area — square aspect ratio. Real images get object-fit:cover. */
.finder-polaroid-img {
  display: block;
  /* Deckungsgleich mit dem Fotofenster der Rahmen-Illustration */
  position: absolute;
  top: 6.1%;
  right: 6.8%;
  bottom: 20.7%;
  left: 6.4%;
  width: auto;
  height: auto;
  background: linear-gradient(135deg, #6a8a5a 0%, #95b878 100%);
  overflow: hidden;
}
.finder-polaroid-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder gradients — 8 different palettes cycle through the
   empty/anonymous polaroids so the wall doesn't look monotonous
   while waiting for finder uploads. */
.finder-polaroid-img.placeholder-0 { background: linear-gradient(135deg, #6a8a5a 0%, #95b878 100%); }
.finder-polaroid-img.placeholder-1 { background: linear-gradient(135deg, #aa6a5a 0%, #c08877 100%); }
.finder-polaroid-img.placeholder-2 { background: linear-gradient(135deg, #5a6a8a 0%, #788aaa 100%); }
.finder-polaroid-img.placeholder-3 { background: linear-gradient(135deg, #8a7a4a 0%, #b8a275 100%); }
.finder-polaroid-img.placeholder-4 { background: linear-gradient(135deg, #6a5a8a 0%, #8878aa 100%); }
.finder-polaroid-img.placeholder-5 { background: linear-gradient(135deg, #5a7a6a 0%, #85a395 100%); }
.finder-polaroid-img.placeholder-6 { background: linear-gradient(135deg, #8a4a6a 0%, #b87598 100%); }
.finder-polaroid-img.placeholder-7 { background: linear-gradient(135deg, #4a6a8a 0%, #7595b8 100%); }

/* Caption on the wider lower polaroid border — the classic spot
   where someone would handwrite a note on a real Polaroid. */
.finder-polaroid-caption {
  font-family: 'Kalam', cursive;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  text-align: center;
  /* Im unteren Beschriftungsrand der Rahmen-Illustration (22% Band) */
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 7.5%;
  margin: 0;
  line-height: 1;
}

/* ============================================================
   MOBILE: Pinnwand wird durch Polaroid-Stapel ersetzt.
   Pinnwand-DOM bleibt erhalten (für JS-Datenextraktion).
   ============================================================ */
.finder-mobile-stack { display: none; }

@media (max-width: 700px) {
  .finder-pinboard { display: none; }
  .finder-mobile-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1rem 2.5rem;
    min-height: 460px;
  }
}

.fms-counter {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-soft, #5f4620);
  text-transform: uppercase;
  min-height: 1em;
}
.fms-stack {
  position: relative;
  width: 280px;
  height: 360px;
}
.fms-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;
  padding: 0 1rem;
  transition: opacity 300ms ease;
}
.fms-hint.is-faded { opacity: 0; }

/* Karte — Basis. Festes random-Tilt pro Karte, ändert sich nie. */
.fms-card {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  transform: rotate(var(--tilt, 0deg));
}
/* Wenn der Stack wischbar ist (aktive Jagd), Cursor und Touch-
   Verhalten anpassen. Sonst (passiver Stapel im 'past'/'planned'-
   Zustand) bleibt er reine Anzeige. */
.fms-stack.is-swipable .fms-card { cursor: pointer; touch-action: pan-y; }
.fms-card.flying-left,
.fms-card.flying-right {
  transition: transform 480ms cubic-bezier(0.4, 0.0, 0.2, 1),
              opacity 480ms ease;
}
.fms-card.flying-left  { transform: translateX(-150%) rotate(-22deg) !important; opacity: 0 !important; pointer-events: none; }
.fms-card.flying-right { transform: translateX(150%)  rotate(22deg)  !important; opacity: 0 !important; pointer-events: none; }

/* Polaroid */
.fms-polaroid {
  width: 240px;
  height: 300px;
  background: #fffaee;
  padding: 14px 14px 50px;
  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;
}
.fms-polaroid-frame {
  width: 100%;
  flex: 1;
  background: #1a1410;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fms-polaroid-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Platzhalter ohne reales Bild: gradient pro Akte (matched mit
   .placeholder-N der Pinnwand). Index aus JS gesetzt. */
.fms-polaroid-frame.is-placeholder { position: relative; }
.fms-polaroid-frame.placeholder-0 { background: linear-gradient(135deg, #8a9b7e, #6f8470); }
.fms-polaroid-frame.placeholder-1 { background: linear-gradient(135deg, #9b8a7e, #806a5c); }
.fms-polaroid-frame.placeholder-2 { background: linear-gradient(135deg, #7e8a9b, #6c7e94); }
.fms-polaroid-frame.placeholder-3 { background: linear-gradient(135deg, #9b7e8a, #8a6470); }
.fms-polaroid-frame.placeholder-4 { background: linear-gradient(135deg, #8e9b7e, #7a8a6e); }
.fms-polaroid-frame.placeholder-5 { background: linear-gradient(135deg, #7e7e9b, #6c6c8a); }
.fms-polaroid-frame.placeholder-6 { background: linear-gradient(135deg, #9b9b7e, #8a8a6e); }
.fms-polaroid-frame.placeholder-7 { background: linear-gradient(135deg, #7e9b9b, #6c8a8a); }
.fms-polaroid-cap {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Caveat', 'Kalam', cursive;
  font-size: 22px;
  color: #5f4620;
}
/* Der "neuer Fund"-Marker erscheint links oben, wenn der Polaroid
   einen echten Fund-Foto hat. Subtil, kein bunter Stempel. */
.fms-polaroid-newmark {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--stamp-red, #b82727);
  border: 1px solid currentColor;
  padding: 2px 6px;
  text-transform: uppercase;
  background: rgba(255, 250, 230, 0.9);
  transform: rotate(-3deg);
  z-index: 1;
}

/* Tatort-Notice am Stapel-Boden: erscheint wenn ALLE Karten weg sind */
.fms-empty {
  width: 240px;
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  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;
}
.fms-empty-stamp {
  display: inline-block;
  border: 2px solid var(--stamp-red, #b82727);
  color: var(--stamp-red, #b82727);
  font-size: 11px;
  letter-spacing: 0.22em;
  padding: 5px 14px;
  text-transform: uppercase;
  transform: rotate(-3deg);
  font-weight: 600;
}

@media (max-width: 700px) {
  .finder-pinboard {
    padding: 2rem 1.2rem;
  }
}