@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&display=swap');

/* ============================================================================
 * Kreide — Skarns Tafel, die Quote und der Ruf (17.09.2026, #690)
 * ----------------------------------------------------------------------------
 * Konzept: https://claude.ai/artifact/VbjMPjbQPDSxpmcEh9Y151 (dritte Fassung)
 * Demonstriert in: library-community.html, Kapitel „Skarns Haus"
 * Helfer: js/ui/kreide.js (TC.Kreide.striche, TC.Kreide.zahl)
 * Tokens: css/tokens.css Abschnitt K2 (Kreide, Schiefer, Papier)
 *
 * ⚠️ DER @import STEHT GANZ OBEN, UND DAS MUSS SO BLEIBEN. Ein @import gilt
 * nur am Anfang eines Stilblatts; steht davor auch nur eine Regel, wird er
 * still ignoriert, und die Tafel fällt auf eine Systemschrift (§10, die
 * Messfalle mit dem konkatenierten Prüfstand).
 *
 * AUFBAU
 *   <section class="tc-kreidetafel">
 *     <header class="tc-kreidetafel__kopf">
 *       <h3 class="tc-kreidetafel__titel">…</h3>
 *       <span class="tc-kreidetafel__klein">…</span>
 *     </header>
 *     <div class="tc-kreidetafel__ereignis">
 *       <div class="tc-kreidetafel__ereignis-kopf">
 *         <span class="tc-kreidetafel__name">…</span>
 *         <span class="tc-kreidetafel__wann">…</span>
 *       </div>
 *       <div class="tc-kreidetafel__frage">
 *         <span class="tc-kreidetafel__text">Wer gewinnt?</span>
 *         <span class="tc-kreidetafel__quoten">
 *           <button class="tc-quote" type="button" aria-pressed="false">
 *             <small class="tc-quote__wofuer">Timmay</small>
 *             <b class="tc-quote__wert">1,7</b>
 *           </button>
 *         </span>
 *       </div>
 *     </div>
 *   </section>
 *
 *   <div class="tc-ruf" role="img" aria-label="…">
 *     <div class="tc-ruf__kopf">
 *       <span class="tc-ruf__rang">Zocker</span>
 *       <span class="tc-ruf__naechst">noch 2 Striche bis Kenner</span>
 *     </div>
 *     <span class="tc-ruf__striche">…TC.Kreide.striche(7, {offen: 2})…</span>
 *   </div>
 *
 * ZUSTÄNDE DER QUOTE
 *   aria-pressed="true" / .is-gewaehlt   liegt auf dem Deckel
 *   .is-meine      hier steht schon ein Schein von dir (bleibt voll lesbar:
 *                  gesperrt und unwichtig sind zwei Dinge, CLAUDE.md §7h)
 *   :disabled      nimmt nichts mehr an (Buchschluss, eigene Partie …)
 *   .is-nachgekreidet  neuer Wert wird hingeschrieben, der alte steht als
 *                  .tc-quote__alt durchgestrichen darüber
 * ========================================================================== */

/* ── Die Tafel ─────────────────────────────────────────────────────────── */
.tc-kreidetafel {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-3, 12px);
  padding: var(--tc-space-4, 16px);

  color: var(--tc-kreide);
  background:
    radial-gradient(60% 40% at 18% 12%, var(--tc-kreide-staub), transparent 70%),
    radial-gradient(50% 35% at 82% 88%, var(--tc-kreide-staub), transparent 70%),
    var(--tc-schiefer);
  border: 5px solid var(--tc-schiefer-rahmen);
  border-radius: var(--tc-radius-md, 8px);
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.45),
    0 2px 10px rgba(0, 0, 0, 0.35);
}

.tc-kreidetafel__kopf,
.tc-kreidetafel__ereignis-kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px var(--tc-space-3, 12px);
}

.tc-kreidetafel__titel {
  margin: 0;
  font-family: var(--tc-font-kreide);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--tc-kreide);
  /* Kreide ist nie ganz scharf. Ein Pixel Weichzeichnung, kein Leuchten. */
  text-shadow: 0 0 1px rgba(239, 233, 220, 0.45);
}

.tc-kreidetafel__klein,
.tc-kreidetafel__wann {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-xs, 0.72rem);
  color: var(--tc-kreide-leise);
  font-variant-numeric: tabular-nums;
}

.tc-kreidetafel__ereignis {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2, 8px);
  padding-top: var(--tc-space-3, 12px);
  border-top: 1px dashed var(--tc-schiefer-linie);
}

.tc-kreidetafel__name {
  min-width: 0;
  font-family: var(--tc-font-kreide);
  font-size: 1.22rem;
  line-height: 1.2;
  color: var(--tc-kreide);
  text-shadow: 0 0 1px rgba(239, 233, 220, 0.4);
}

/* Frage links, Quoten rechts — und ab 560px untereinander, sonst drückt eine
   lange Frage die Quoten aus der Tafel (§10, „1fr schrumpft nicht"). */
.tc-kreidetafel__frage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--tc-space-2, 8px) var(--tc-space-3, 12px);
  align-items: center;
}

.tc-kreidetafel__text {
  min-width: 0;
  font-size: var(--tc-text-sm, 0.82rem);
  color: var(--tc-kreide-leise);
}

.tc-kreidetafel__quoten {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--tc-space-2, 8px);
}

@media (max-width: 560px) {
  .tc-kreidetafel__frage { grid-template-columns: minmax(0, 1fr); }
  .tc-kreidetafel__quoten { justify-content: flex-start; }
}

/* ── Was sonst an der Tafel steht (17.09.2026, beim Einbau in Skarns Raum) ─
   Hinweis unter dem Titel, eine Notiz unter der Frage (Bilanz), der Grund,
   wenn statt Quoten nichts angenommen wird, wer schon gesetzt hat, und ein
   Fortschrittsbalken in Kreide für Hobbyziele. */
.tc-kreidetafel__hinweis {
  margin: 0;
  font-size: var(--tc-text-xs, 0.72rem);
  line-height: 1.5;
  color: var(--tc-kreide-leise);
}

.tc-kreidetafel__notiz {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--tc-kreide-leise);
}

/* Der Grund steht dort, wo sonst die Quoten stünden — über die ganze Zeile.
   Ein fehlender Knopf ohne Grund sieht aus wie ein Fehler (CLAUDE.md §7h). */
.tc-kreidetafel__grund {
  grid-column: 1 / -1;
  font-family: var(--tc-font-kreide);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--tc-kreide-leise);
}

.tc-kreidetafel__wetter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.tc-kreidetafel__wer {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.72rem;
  color: var(--tc-kreide-leise);
  border: 1px dashed var(--tc-schiefer-linie);
  border-radius: var(--tc-radius-full, 999px);
}
.tc-kreidetafel__wer b { color: var(--tc-kreide); font-weight: 700; }
.tc-kreidetafel__wer.is-meine {
  color: var(--tc-highlight);
  border-color: var(--tc-highlight);
  border-style: solid;
}

.tc-kreidetafel__balken {
  position: relative;
  display: block;
  height: 22px;
  border: 1px dashed rgba(239, 233, 220, 0.35);
  border-radius: var(--tc-radius-sm, 4px);
  overflow: hidden;
}
.tc-kreidetafel__balken-fuell {
  position: absolute;
  inset: 0 auto 0 0;
  background:
    repeating-linear-gradient(-45deg,
      rgba(239, 233, 220, 0.30) 0 4px,
      rgba(239, 233, 220, 0.12) 4px 8px);
}
.tc-kreidetafel__balken-text {
  position: relative;
  display: block;
  padding: 0 8px;
  font-family: var(--tc-font-kreide);
  font-size: 0.9rem;
  line-height: 20px;
  color: var(--tc-kreide);
}

.tc-kreidetafel__leer {
  margin: 0;
  font-family: var(--tc-font-kreide);
  font-size: 1.05rem;
  color: var(--tc-kreide-leise);
}

/* Der Weg in ein anderes Haus (18.09.2026, #740). Skarns Tafeln nannten den
   Fehdestein, Krenks Wand und den Termin, ohne dorthin zu führen — die Daten
   verbanden die Häuser längst, die Oberfläche nicht. Ein Link in Kreide:
   klein, gestrichelt unterstrichen, mit Pfeil; eine Zeile unter dem
   Ereignis, rechts, damit er die Quoten nicht verdrängt. Touch-Höhe über
   das Flex-Item selbst (Heuristik 5), nicht über eine unsichtbare Fläche. */
.tc-kreidetafel__weg {
  display: inline-block;
  align-self: flex-end;
  min-height: var(--tc-touch-min, 36px);
  line-height: var(--tc-touch-min, 36px);
  padding: 0 4px;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-xs, 0.72rem);
  color: var(--tc-kreide-leise);
  text-decoration: underline dashed;
  text-underline-offset: 3px;
  transition: color var(--tc-motion-normal);
}

/* Der Pfeil als inline-block: Nur so erbt er die gestrichelte Linie nicht —
   als Flex-Kind war er mit unterstrichen (im Browser gemessen). */
.tc-kreidetafel__weg::after {
  content: '\2192';
  display: inline-block;
  margin-left: 6px;
  text-decoration: none;
}

.tc-kreidetafel__weg:hover,
.tc-kreidetafel__weg:focus-visible {
  color: var(--tc-kreide);
  outline: none;
}

.tc-kreidetafel__weg:focus-visible {
  box-shadow: 0 0 0 2px var(--tc-highlight);
  border-radius: var(--tc-radius-sm, 4px);
}

/* Angesprungen (Werkbank „darauf wetten", Meldung): kurz aufleuchten, damit
   man nach dem Scrollen weiß, welche Zeile gemeint war. */
.tc-kreidetafel__ereignis.ist-gemeint {
  border-radius: var(--tc-radius-sm, 4px);
  box-shadow: 0 0 0 2px var(--tc-highlight);
  transition: box-shadow var(--tc-motion-normal);
}

/* ── Die Quote ─────────────────────────────────────────────────────────── */
/* Ein <button>: bringt Browser-Fläche, Rahmen und Schrift mit, deshalb setzt
   die Komponente alle fünf selbst (§10, „Eine Klasse, die für ein <span>
   gebaut wurde, sieht am <button> anders aus"). */
.tc-quote {
  appearance: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 68px;
  min-height: 44px;
  padding: 4px 12px;

  font: inherit;
  line-height: 1.1;
  color: var(--tc-kreide);
  background: transparent;
  border: 1px solid var(--tc-schiefer-linie);
  border-radius: var(--tc-radius-md, 8px);
  cursor: pointer;

  transition:
    background-color var(--tc-motion-fast),
    border-color var(--tc-motion-fast),
    color var(--tc-motion-fast);
}

.tc-quote__wofuer {
  font-family: var(--tc-font-body);
  font-size: 0.7rem;
  color: var(--tc-kreide-leise);
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-quote__wert {
  font-family: var(--tc-font-kreide);
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tc-kreide);
}

.tc-quote:hover,
.tc-quote:focus-visible {
  border-color: var(--tc-kreide-leise);
  background: var(--tc-kreide-staub);
}
.tc-quote:focus-visible {
  outline: 2px solid var(--tc-kreide);
  outline-offset: 2px;
}

/* Angekreidet: liegt auf dem Deckel. Kreide auf Schiefer wird umgedreht —
   so sieht man den Tipp auch aus dem Augenwinkel. */
.tc-quote[aria-pressed="true"],
.tc-quote.is-gewaehlt {
  background: var(--tc-kreide);
  border-color: var(--tc-kreide);
}
.tc-quote[aria-pressed="true"] .tc-quote__wofuer,
.tc-quote[aria-pressed="true"] .tc-quote__wert,
.tc-quote.is-gewaehlt .tc-quote__wofuer,
.tc-quote.is-gewaehlt .tc-quote__wert {
  color: var(--tc-schiefer);
}

/* Hier steht schon ein Schein von dir. Die Seite bleibt voll lesbar, sie ist
   die wichtigste Auskunft der Zeile. */
.tc-quote.is-meine {
  border-color: var(--tc-highlight);
  box-shadow: inset 0 0 0 1px var(--tc-highlight);
  cursor: default;
}
.tc-quote.is-meine .tc-quote__wofuer { color: var(--tc-highlight); }

.tc-quote:disabled:not(.is-meine) {
  cursor: not-allowed;
  border-style: dashed;
}
.tc-quote:disabled:not(.is-meine) .tc-quote__wert {
  color: var(--tc-kreide-leise);
  font-weight: 400;
}
.tc-quote:disabled:hover { background: transparent; }

/* Nachgekreidet: Skarn hat die Quote geändert. Der alte Wert bleibt sichtbar
   durchgestrichen, der neue wird hingeschrieben. */
.tc-quote__alt {
  font-family: var(--tc-font-kreide);
  font-size: 0.9rem;
  color: var(--tc-kreide-leise);
  text-decoration: line-through;
  text-decoration-color: rgba(239, 233, 220, 0.6);
}
.tc-quote.is-nachgekreidet .tc-quote__wert {
  animation: tc-kreide-schreiben 480ms var(--tc-ease-out, ease-out) both;
}

@keyframes tc-kreide-schreiben {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ── Der Ruf ───────────────────────────────────────────────────────────── */
.tc-ruf {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2, 8px);
  padding: var(--tc-space-3, 12px) var(--tc-space-4, 16px);
  color: var(--tc-kreide);
  background:
    radial-gradient(70% 60% at 15% 20%, var(--tc-kreide-staub), transparent 70%),
    var(--tc-schiefer);
  border: 1px solid var(--tc-schiefer-linie);
  border-radius: var(--tc-radius-md, 8px);
}

/* Auf der Tafel braucht der Ruf keinen eigenen Kasten. */
.tc-kreidetafel .tc-ruf {
  padding: 0;
  background: none;
  border: 0;
}

.tc-ruf__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px var(--tc-space-3, 12px);
}

.tc-ruf__rang {
  font-family: var(--tc-font-kreide);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--tc-kreide);
  text-shadow: 0 0 1px rgba(239, 233, 220, 0.45);
}

.tc-ruf__naechst {
  font-size: var(--tc-text-xs, 0.72rem);
  color: var(--tc-kreide-leise);
  font-variant-numeric: tabular-nums;
}

.tc-ruf__striche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  min-height: 32px;
}

/* Ein Bündel: vier senkrechte Striche, der fünfte quer. */
.tc-ruf__buendel {
  position: relative;
  display: inline-flex;
  gap: 5px;
  padding: 0 3px;
}

.tc-ruf__strich {
  display: block;
  width: 3px;
  height: 26px;
  border-radius: 2px;
  background: var(--tc-kreide);
  opacity: 0.92;
}
/* Von Hand gezogen steht kein Strich genau senkrecht. */
.tc-ruf__strich:nth-child(4n+2) { transform: rotate(3deg); }
.tc-ruf__strich:nth-child(4n+3) { transform: rotate(-2deg); }
.tc-ruf__strich:nth-child(4n+4) { transform: rotate(4deg); }

.tc-ruf__quer {
  position: absolute;
  left: -5px;
  right: -5px;
  top: 12px;
  height: 3px;
  border-radius: 2px;
  background: var(--tc-kreide);
  transform: rotate(-24deg);
}

/* Die Striche, die bis zum nächsten Rang fehlen: nur vorgezeichnet. */
.tc-ruf__buendel--offen .tc-ruf__strich {
  width: 0;
  background: none;
  border-left: 2px dashed rgba(239, 233, 220, 0.32);
  opacity: 1;
}

/* Frisch gezogen: wächst von oben nach unten, der Querstrich von links.
   ⚠️ Über clip-path, nicht über transform. Die Striche tragen ihre Neigung
   als transform — eine Animation auf transform mit `both` hielte am Ende
   `scaleY(1)` fest und nähme ihnen die Neigung. */
.tc-ruf__strich.is-neu {
  animation: tc-kreide-strich 420ms var(--tc-ease-out, ease-out) both;
}
.tc-ruf__quer.is-neu {
  animation: tc-kreide-quer 420ms var(--tc-ease-out, ease-out) 120ms both;
}
@keyframes tc-kreide-strich {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes tc-kreide-quer {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ── Reduzierte Bewegung (§9) ──────────────────────────────────────────── */
/* Beides sind Einblendungen, deren Endzustand zählt — also kollabieren
   statt wegfallen, sonst bliebe der neue Wert unsichtbar. */
@media (prefers-reduced-motion: reduce) {
  .tc-quote,
  .tc-quote.is-nachgekreidet .tc-quote__wert,
  .tc-ruf__strich.is-neu,
  .tc-ruf__quer.is-neu,
  .tc-kreidetafel__weg {
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    animation-delay: -1ms;
  }
}