/* Knobelbande Tresor knacken — Notizbuch-Look. Tokens aus 05-gemeinsam/design/knobelbande.css,
   Bedienung und Klassen: 03-spiele/tresor/CLAUDE.md
   Ohne JavaScript und im Druck stehen die leeren Code-Kästchen .tresor-blatt und die Hinweisliste. */

.tresor { margin: var(--abstand-5) 0; --rad-breite: clamp(2.9rem, 14vw, 3.5rem); }

/* --- Ohne JavaScript / Druck: leere Kästchen für den Code ------------------------------ */
.tresor-blatt { text-align: center; margin: var(--abstand-4) 0; }
.tresor-blatt__titel { margin: 0 0 var(--abstand-2); font-weight: 800; }
.tresor-blatt__felder { display: flex; justify-content: center; gap: var(--abstand-2); margin: 0; }
.tresor-blatt__feld {
  width: 3rem; height: 3.5rem;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-klein);
  background: var(--papier-weiss);
}
.tresor--aktiv .tresor-blatt { display: none; }

/* --- Ziffern-Kachel (Hinweise, Lösung) ------------------------------------------------- */
.tresor-ziffer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tippflaeche);
  height: var(--tippflaeche);
  padding: 0;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-klein);
  background: var(--papier-kraft);
  color: var(--tinte);
  font-family: var(--schrift-grund);
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* --- Hinweisliste ----------------------------------------------------------------------- */
.tresor-hinweise__titel { margin: var(--abstand-5) 0 var(--abstand-3); font-size: var(--groesse-h3); }
.tresor-hinweise { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-3); }
.tresor-hinweis {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "nr versuch marke" "satz satz satz";
  align-items: center;
  gap: var(--abstand-2) var(--abstand-3);
  padding: var(--abstand-3);
  background-color: var(--papier-weiss);
  background-image: linear-gradient(var(--linie) 1px, transparent 1px);
  background-size: 100% var(--zeile);
  border: 1px solid var(--papier-kante);
  border-left: 4px solid var(--farbe-art);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten-flach);
}
.tresor-hinweis__nr {
  grid-area: nr;
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border-radius: var(--radius-rund);
  background: var(--farbe-art);
  color: var(--tinte);
  font-family: var(--schrift-hand);
  font-size: var(--groesse-gross);
}
.tresor-hinweis__versuch { grid-area: versuch; display: flex; gap: var(--abstand-2); }
.tresor-hinweis__satz { grid-area: satz; }
.tresor-hinweis__marke {
  grid-area: marke;
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-rund);
  border: 2px solid currentColor;
}
.tresor-hinweis__marke .icon { width: 1.5rem; height: 1.5rem; stroke-width: 3; }
.tresor-hinweis__marke--passt { color: var(--erfolg); background: var(--erfolg-hell); }
.tresor-hinweis__marke--passt-nicht { color: var(--fehler); background: var(--fehler-hell); }
.tresor--geprueft .tresor-hinweis:has(.tresor-hinweis__marke--passt-nicht) { border-left-color: var(--fehler); }

@media (min-width: 40rem) {
  .tresor-hinweis { grid-template-columns: auto auto 1fr auto; grid-template-areas: "nr versuch satz marke"; }
}

/* Ziffern als Knöpfe zum Durchstreichen (Notiz: „raus“) */
.tresor-ziffer--knopf {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.tresor-ziffer--knopf:hover { background: var(--papier-alt); }
.tresor-ziffer--knopf:focus { outline: none; }
.tresor-ziffer--knopf:focus-visible { box-shadow: var(--fokus); }
.tresor-ziffer--knopf.ist-raus {
  background: var(--papier-weiss);
  color: var(--tinte-weich);
  border-style: dashed;
}
/* Bleistiftstrich quer über die Ziffer */
.tresor-ziffer--knopf.ist-raus::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; top: 50%;
  height: 3px;
  background: var(--rotstift);
  border-radius: 2px;
  transform: rotate(-35deg);
}
.tresor-hinweise__tipp { margin: var(--abstand-3) 0 0; color: var(--tinte-weich); font-size: var(--groesse-klein); }

/* --- Schloss: Schrank, Tür, Räder ------------------------------------------------------- */
.tresor__spiel { margin-bottom: var(--abstand-4); }
.tresor__schrank {
  position: relative;
  max-width: 24rem;
  margin: 0 auto;
  padding: var(--abstand-3);
  border: 3px solid var(--tinte);
  border-radius: var(--radius-mittel);
  background: var(--tinte-weich);
  box-shadow: var(--schatten-papier);
  perspective: 900px;
}
.tresor__innen {
  position: absolute;
  inset: var(--abstand-3);
  display: grid;
  place-items: center;
  border-radius: var(--radius-klein);
  background-color: var(--papier-alt);
  background-image:
    linear-gradient(var(--linie-karo) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie-karo) 1px, transparent 1px);
  background-size: 12px 12px;
  overflow: hidden;
}
.tresor__stempel { --stempel-drehung: -10deg; font-size: clamp(1.8rem, 9vw, 2.8rem); }
.tresor__tuer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-2);
  padding: var(--abstand-3) var(--abstand-5) var(--abstand-4);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-klein);
  background: var(--farbe-art);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--papier-weiss) 35%, transparent);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.3, 1.4, .5, 1);
  backface-visibility: hidden;
}
.tresor__schild {
  margin: 0;
  padding: 0 var(--abstand-2);
  background: var(--papier-weiss);
  border: 1px solid var(--tinte);
  border-radius: var(--radius-klein);
  font-family: var(--schrift-hand);
  font-size: var(--groesse-klein);
}
.tresor__griff {
  position: absolute;
  right: var(--abstand-1);
  top: 50%;
  width: .6rem; height: 3rem;
  margin-top: -1.5rem;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-rund);
  background: var(--papier-kraft);
}
.tresor__raeder { display: flex; justify-content: center; gap: var(--abstand-2); }
.tresor__rad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-1);
}
.tresor__dreh {
  display: grid; place-items: center;
  width: var(--rad-breite); height: var(--tippflaeche);
  padding: 0;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-klein);
  background: var(--papier-weiss);
  color: var(--tinte);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tresor__dreh:hover { background: var(--papier-alt); }
.tresor__dreh:active { transform: translateY(1px); }
.tresor__dreh:focus-visible { box-shadow: var(--fokus); outline: none; }
.tresor__dreh .icon { width: 1.4rem; height: 1.4rem; stroke-width: 3; }
.tresor__dreh--hoch .icon { transform: rotate(-90deg); }
.tresor__dreh--runter .icon { transform: rotate(90deg); }
/* Fenster des Rades: Ziffer zwischen zwei Schatten, als würde sich eine Rolle drehen */
.tresor__fenster {
  display: grid; place-items: center;
  width: var(--rad-breite); height: 4rem;
  border: 3px solid var(--tinte);
  border-radius: var(--radius-klein);
  background:
    linear-gradient(var(--tinte-weich), transparent 28%, transparent 72%, var(--tinte-weich)),
    var(--papier-weiss);
  background-blend-mode: soft-light;
  color: var(--tinte);
  font-size: 2.2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: ns-resize;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.tresor__fenster:focus { outline: none; }
.tresor__fenster:focus-visible { box-shadow: var(--fokus); }
.tresor__fenster.ist-gedreht { animation: tresor-dreh .18s ease-out; }
@keyframes tresor-dreh { from { transform: translateY(-6px); opacity: .4; } to { transform: none; opacity: 1; } }

.tresor__meldung { min-height: 1.5em; margin: var(--abstand-3) 0 0; text-align: center; font-weight: 700; }
.tresor__meldung--gut { color: var(--erfolg); }
.tresor__meldung--fehler { color: var(--fehler); }
.tresor__aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--abstand-3); margin-top: var(--abstand-3); }
.tresor__oeffnen { min-width: 10rem; }

/* Falsch: die Tür rappelt kurz */
.tresor__tuer.ist-gerappelt { animation: tresor-rappeln .35s ease-in-out; }
@keyframes tresor-rappeln {
  20% { transform: translateX(-4px); } 40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}

/* Richtig: die Tür springt auf (nach links aufgeklappt), dahinter der Stempel */
.tresor--offen .tresor__tuer { transform: rotateY(-100deg); pointer-events: none; }
.tresor--offen .tresor__schrank { border-color: var(--erfolg); }
/* Ohne frische Bewegung (Neuladen): sofort offen */
.tresor--offen:not(.tresor--frisch) .tresor__tuer { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .tresor__tuer, .tresor__fenster { transition: none; animation: none !important; }
  /* Offen ohne Drehung: Tür einfach weg */
  .tresor--offen .tresor__tuer { transform: none; visibility: hidden; }
}

/* --- Lösung ----------------------------------------------------------------------------- */
.tresor-loesung { display: flex; gap: var(--abstand-2); margin: var(--abstand-2) 0 var(--abstand-3); }
.tresor-weg { margin: 0; padding-left: 1.4em; }
.tresor-weg li + li { margin-top: var(--abstand-1); }

/* --- Druck: nur Kästchen und Hinweise, Lösung klein auf dem Kopf ----------------------- */
@media print {
  .raetsel__geloest { display: none !important; } /* ein leeres Blatt trägt keinen Gelöst-Stempel */
  .tresor--aktiv .tresor-blatt { display: block; }
  .tresor-blatt { margin: 4mm 0; }
  .tresor-blatt__feld { width: 14mm; height: 14mm; border: 1.5px solid #000; background: #fff; }
  .tresor-hinweise { gap: 1.5mm; }
  .tresor-hinweis {
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "nr versuch satz";
    padding: 1.5mm 2mm;
    background: #fff !important;
    border: 1px solid #000; border-left-width: 1px;
    box-shadow: none;
    break-inside: avoid;
  }
  .tresor-hinweis__nr { background: none; border: 1px solid #000; width: 7mm; height: 7mm; font-size: 11pt; }
  .tresor-hinweis__marke { display: none !important; }
  .tresor-ziffer { min-width: 7mm; height: 7mm; font-size: 12pt; border: 1px solid #000; background: #fff !important; color: #000 !important; }
  .tresor-ziffer--knopf.ist-raus { border-style: solid; }
  .tresor-ziffer--knopf.ist-raus::after { display: none; }
  .tresor-loesung--druck .tresor-ziffer { min-width: 6mm; height: 6mm; font-size: 10pt; }
  .tresor-loesung--druck { margin: 0 0 1mm; }
  .tresor-weg--druck { font-size: 8pt; line-height: 1.25; }
}