/* SCALE - spielspezifische Schicht.
   Aus tokens.css wird NUR --accent / --accent-ink ueberschrieben.
   Alles andere hier sind neue Klassen, die in .stage leben. */

:root { --hue: 40; }

/* Browser-Oberflaechen mitfaerben, nicht dem Default ueberlassen */
::selection { background: var(--accent-soft); color: var(--ink); }
html { scrollbar-color: var(--line-strong) transparent; }

/* ---------------------------------------------------------------- Buehne ---- */
/* Der Prompt ist hier ein leiser Hinweis, kein Titel: das Bild fuehrt. */
.stage .prompt {
  font-size: var(--t-md);
  font-weight: 550;
  letter-spacing: 0;
  color: var(--ink-2);
  max-width: 24ch;
}

.scene {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.fig-ref  { fill: var(--ink-3); }
.fig-tgt  { fill: var(--accent); }
.fig-cut  { fill: var(--paper); }
.fig-ghost{ fill: var(--accent); opacity: .17; }
/* Der Geister-Stapel: wie viele Referenzen hoch ist das Ziel. Liegt als helle
   Leiter AUF dem Ziel, sonst verschwindet er hinter der vollen Flaeche. */
.fig-stack{ fill: var(--paper); opacity: .32; }
.fig-stack .fig-seam { fill: var(--ink); }   /* Fugen zwischen den Stapel-Kopien (#718) */

.ground   { fill: var(--line-strong); }
.guideline{ stroke: var(--accent); stroke-width: 1.25; stroke-dasharray: 3 4; opacity: .8; fill: none; }
.truthline{ stroke: var(--accent); stroke-width: 2; fill: none; stroke-linecap: round; }
.leader   { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.loupe-ring { fill: var(--paper); stroke: var(--line-strong); stroke-width: 1; }
.caliper  { stroke: var(--ink); stroke-width: 1.25; fill: none; }

/* ---------------------------------------------------------------- Namen ----- */
.tag {
  position: absolute;
  transform: translateX(-50%);
  /* nie breiter als die eigene Haelfte -- sonst kollidieren die beiden Namen,
     egal wie sorgfaeltig sie positioniert werden */
  max-width: min(15ch, 47%);
  text-align: center;
  font-size: var(--t-xs);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--ink-2);
  pointer-events: none;
  text-wrap: balance;
}
.tag--tgt { color: var(--accent); }
.tag b { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Ziehgriff ---- */
.handle {
  position: absolute;
  width: var(--tap); height: var(--tap);
  margin: calc(var(--tap) / -2) 0 0 calc(var(--tap) / -2);
  padding: 0;
  border: 0; background: none;
  display: grid; place-items: center;
  cursor: ns-resize;
  touch-action: none;
  /* #718 Esteban: der schwebende Kreis liest sich als Fehler. Ziehen geht auf der
     ganzen Buehne; der Knopf bleibt nur fuer die Tastatur und zeigt sich bei Fokus. */
  opacity: 0;
}
.handle:focus-visible { opacity: 1; }
.handle::before {
  content: '';
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(22,21,15,.18), 0 4px 14px rgba(22,21,15,.16),
              0 0 0 3px var(--paper);
  transition: transform var(--d-fast) var(--ease);
}
.handle svg {
  position: absolute; width: 14px; height: 14px;
  stroke: var(--accent-ink); stroke-width: 2; stroke-linecap: round;
  fill: none; pointer-events: none;
}
.handle:active::before, .handle[data-grab]::before { transform: scale(1.18); }
.handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-full); }

/* Der einzige inszenierte Bewegungs-Moment: der Griff atmet, bis er benutzt wurde */
.handle[data-idle]::before { animation: breathe 2.4s var(--ease) infinite; }
@keyframes breathe {
  0%, 68%, 100% { transform: scale(1);    box-shadow: 0 1px 2px rgba(22,21,15,.18), 0 4px 14px rgba(22,21,15,.16), 0 0 0 3px var(--paper); }
  34%           { transform: scale(1.14); box-shadow: 0 1px 2px rgba(22,21,15,.18), 0 6px 18px rgba(22,21,15,.20), 0 0 0 3px var(--paper); }
}
@media (prefers-reduced-motion: reduce) { .handle[data-idle]::before { animation: none; } }

/* ------------------------------------------------------------- Werkzeuge --- */
/* Eine Zeile unter der Buehne: der Tipp links, die Zahleneingabe rechts.
   Fehlt der Tipp fuer dieses Item, steht dort nichts -- kein ausgegrauter
   Knopf, kein Platzhalter. */
.tools {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--tap);
}
.tools .numfield { margin-left: auto; }
.dock .hint { margin: 0 0 var(--s2); }

/* ---------------------------------------------------------------- Sheet ----- */
/* Der Reveal traegt seit #703 Faktor, Verteilung, Rechenweg UND Quelle. Auf
   einem kurzen Schirm ist das mehr, als unter die Buehne passt. Also scrollt
   der Inhalt in sich, und der Weiter-Knopf bleibt aussen vor -- sonst kann er
   unter den Rand rutschen und die Runde ist nicht mehr zu verlassen. */
.sheet {
  display: flex; flex-direction: column;
  max-height: 66vh; max-height: 66dvh;
}
.sheet__scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Weiche Kante, solange unten noch etwas liegt. Ohne sie sieht ein
   abgeschnittener Satz nach Defekt aus statt nach "da kommt noch was".
   Wird per JS gesetzt, damit sie am Ende des Scrollens verschwindet. */
.sheet__fade {
  flex: 0 0 auto; position: relative; z-index: 1;
  height: 26px; margin-top: -26px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--paper));
}
/* Der Verlauf allein reicht nicht: gemessen faellt die Schnittkante oft genau
   in eine Leerzeile zwischen zwei Bloecken, und dann verblasst nichts und der
   Spieler sieht keinen Grund zu scrollen. Das Winkelchen sagt es unabhaengig
   vom Inhalt -- und verschwindet mit dem Verlauf, sobald man unten ist. */
.sheet__fade::after {
  content: '';
  position: absolute; left: 50%; bottom: 1px;
  width: 9px; height: 9px; margin-left: -5px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
  opacity: .6;
}
/* Die Wolke steht jetzt unter dem Rechenweg und braucht unten weniger Luft,
   damit Fakt und Quelle naeher an die Kante ruecken. */
.dist { margin-bottom: var(--s3); }

/* Der Faktor ist die Hauptzahl des Reveals. Punkte gibt es nicht mehr:
   sie waren exakt 100/Faktor, also dieselbe Zahl ein zweites Mal. */
.factor { margin: 0 0 var(--s1); }
.factor__dir { white-space: nowrap; }

/* Die eigene Antwort neben der Wahrheit */
.said { margin: 0 0 var(--s3); font-variant-numeric: tabular-nums; }

/* Liegt die eigene Antwort nahe der Wahrheit, fallen ihre beiden Achsen-Marken
   uebereinander und ergeben Buchstabensalat (gemessen bei 1.08x: "1you9").
   Die eigene Marke bekommt darum ihre eigene Zeile unter den Zahlen; die
   gestrichelte Linie in der Kurve haelt die Verbindung. */

/* Die Einordnung gehoert sichtbar zur simulierten Wolke, nicht daneben:
   der Hinweis darunter muss beides decken. */
.dist__beat { margin: var(--s2) 0 0; font-size: var(--t-md); font-weight: 400; color: var(--ink-2); }
.dist .dist__note { display: none; }   /* Esteban #709: kein Simulations-Hinweis */
.row__name em { display: none !important; }   /* die Messbasis bleibt im DOM, das Blatt zeigt Name und Wert */

.rows { display: grid; gap: var(--s2); margin: 0 0 var(--s4); }
.row {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center;
  gap: var(--s3);
}
.row__ico { width: 26px; height: 22px; display: block; overflow: visible; }
.row__ico .fig-ref { fill: var(--ink-3); }
.row__ico .fig-tgt { fill: var(--accent); }
.row__name { font-size: var(--t-sm); font-weight: 600; color: var(--ink); min-width: 0; }
.row__name em { display: block; font-style: normal; font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); }
.row__val {
  font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: var(--tight); color: var(--ink); white-space: nowrap;
}

.sheet .btn { display: block; width: 100%; margin-top: var(--s3); flex: 0 0 auto; }
#napkin, #fact { display: none !important; }

/* ------------------------------------------------------------ Endbildschirm - */
.final { display: flex; flex-direction: column; align-items: center; gap: var(--s3); width: 100%; }
.final p { margin: 0; }
.final .mega { color: var(--ink); }
.final .label { margin-top: calc(var(--s3) * -1 + var(--s1)); }

/* Alle fuenf Runden auf einen Blick -- das ist das Tagesergebnis, nicht ein
   Anhang darunter. Deshalb bekommt es Luft und die Faktoren stehen rechts
   buendig, damit man die Reihe von oben nach unten lesen kann. */
.summary { margin-top: var(--s2); }
.srow__what b { color: var(--ink); font-weight: 650; }

.quip {
  text-align: center; font-size: var(--t-sm); color: var(--ink-2);
  max-width: 30ch; line-height: 1.5; text-wrap: balance;
}
.toast {
  min-height: 1.1em; text-align: center;
  font-size: var(--t-xs); font-weight: 600; color: var(--good);
  max-width: 32ch; line-height: 1.4;
}
.dock .share { width: 100%; }

/* ------------------------------------------------------------ Kurze Buehne -- */
@media (max-height: 620px) {
  .tag { font-size: var(--t-micro); }
  /* NICHT hoeher als sonst, sondern niedriger: auf einem kurzen Schirm frisst
     ein hohes Blatt genau die Buehne, auf der Schaetzung und Wahrheit
     nebeneinander stehen (gemessen: 82dvh liess 60 px Buehne uebrig, die
     Figuren waren weg). Der Inhalt scrollt lieber laenger. */
  .sheet { max-height: 62vh; max-height: 62dvh; }
  .final { gap: var(--s2); }
  .srow { padding: var(--s2) 0; }
  .quip { display: none; }   /* die Pointe kostet Platz, den die Reihe braucht */
}