/* ==========================================================================
   Rubbel-mechanic — a hidden message sits behind post-it #02, revealed
   when the canvas "tape" on top is erased enough. The sublayer starts at
   opacity 0 and fades in once the tape is gone. Label text lives in CSS,
   not HTML, to keep it out of view-source.
   ========================================================================== */
.rubbel-slot {
  position: relative;
}
/* Hidden message sits behind the post-it. Invisible until revealed. */
.rubbel-sublayer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(0,0,0,0.025) 0%, rgba(0,0,0,0.01) 100%);
  border: 1px dashed rgba(0,0,0,0.12);
  opacity: 0;
  transition: opacity 0.8s ease 0.35s;
}
.rubbel-sublayer.visible { opacity: 1; }
.rubbel-sublayer .sl-cap {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
/* Caption text lives in CSS, not HTML. */
.rubbel-sublayer .sl-cap::before { content: "— Codewort gefunden —"; }
.rubbel-sublayer .sl-id {
  font-family: 'Special Elite', monospace;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  color: var(--stamp-red);
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* The rubbel target gets an explicit tilt since it's no longer a direct
   nth-child(2) in .process-grid (it's wrapped in .rubbel-slot). */
.process-step.rubbel-target {
  transform: rotate(0.9deg);
  /* Muenz-Cursor auf dem GANZEN Zettel als Entdeckungs-Hinweis
     (Rubbellos-Geste — thematisch passend zur Schatzsuche). Frueher
     stand hier bewusst cursor:default, um nichts zu verraten; die
     Erfahrung zeigte aber, dass das Geheimnis SO gut versteckt war,
     dass es kaum jemand fand. Gekratzt werden kann weiterhin nur am
     Klebeband selbst — der Cursor ist reine Einladung. Hotspot 16/16
     = Muenzmitte, dort landet der Radier-Punkt. */
  cursor: url("/assets/cursor-muenze.png") 16 16, pointer;
}
/* Nach dem Aufdecken ist der Hinweis sinnlos — Cursor zurueck. */
.process-step.rubbel-target.falling,
body.spurensuche-solved .process-step.rubbel-target {
  cursor: default;
}
/* Hide the CSS pseudo-tape — the canvas provides the tape on this one */
.process-step.rubbel-target::before {
  display: none;
}
/* Canvas tape — positioned identically to the CSS pseudo-tape that applies
   to the other three post-its (from nth-child(2)::before rule). */
.process-step.rubbel-target .postit-tape {
  position: absolute;
  top: -11px;
  left: 52%;
  width: 72px;
  height: 24px;
  transform: translateX(-50%) rotate(3deg);
  cursor: url("/assets/cursor-muenze.png") 16 16, pointer;
  touch-action: none;
  z-index: 3;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
  transition: opacity 0.25s ease;
}
.process-step.rubbel-target .postit-tape.gone {
  opacity: 0;
  pointer-events: none;
}

/* Fall-animation for the post-it once the tape is gone */
.process-step.rubbel-target.falling {
  animation: processStepFall 1.4s cubic-bezier(0.55, 0.05, 0.68, 0.53) forwards;
  pointer-events: none;
}
@keyframes processStepFall {
  0%   { transform: rotate(0.9deg)  translate(0, 0);       opacity: 1; }
  20%  { transform: rotate(8.9deg)  translate(6px, 12px);  opacity: 1; }
  60%  { transform: rotate(40.9deg) translate(18px, 180px); opacity: 1; }
  100% { transform: rotate(95.9deg) translate(40px, 600px); opacity: 0; }
}

/* --- Rules section: post-its on corkboard --- */
.rules-section {
  max-width: 1480px;
  margin: 7rem auto 0;
  padding: 0 2rem;
}