/* games-703 · DRAW
   Aus tokens.css wird NUR --accent und --accent-ink ueberschrieben.
   Alles andere hier sind EIGENE Variablen (--sea/--land/--coast/--truth/...),
   die die geteilte Familie nicht anfassen. */

:root { --hue: 262; }

:root {

  /* Karten-Palette (eigen) */
  /* Land traegt die Form, Wasser ist das Papier. Umgekehrt liest das Auge
     die Meeresflaeche als Koerper und die Kueste wird unlesbar. */
  --sea:    var(--paper);
  --land:   var(--paper-3);
  --coast:  var(--line-strong);
  --tick:   var(--ink-3);
  /* --truth (die echte Geometrie) kommt aus tokens.css */
}

[hidden] { display: none !important; }

/* ---- Kopf: Piktogramm + ein Satz + der Tipp ---------------------------- */
.head {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  width: 100%;
}
/* Der Tipp-Knopf ist ABWESEND, wenn das Item keinen Tipp hat -- der Container
   faellt dann mit zusammen, damit kein Loch im Kopf steht. */
.hintRow { display: flex; justify-content: center; }
.hintRow:empty { display: none; }
.head .hint { margin: 0; max-width: 34ch; text-align: center; text-wrap: balance; }
.glyph {
  width: 46px; height: 46px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--paper-2);
  color: var(--ink);
}
.glyph svg { width: 26px; height: 26px; overflow: visible; }
.glyph svg [data-s] {
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.glyph svg [data-f] { fill: currentColor; stroke: none; }

/* Piktogramm zeichnet sich beim Rundenstart selbst -> das ist die Anleitung */
.glyph[data-anim] svg [data-draw] {
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: gdraw 620ms var(--ease-o) 120ms forwards;
}
.glyph[data-anim] svg [data-pop] {
  transform-origin: 12px 12px;
  animation: gpop 520ms var(--ease-o) both;
}
.glyph[data-anim] svg [data-fade] { animation: gfade 420ms var(--ease) 260ms both; }
@keyframes gdraw { to { stroke-dashoffset: 0; } }
@keyframes gpop  { from { transform: scale(1.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes gfade { from { opacity: 0; } to { opacity: 1; } }

.prompt { color: var(--ink); }

/* ---- Die Karte ---------------------------------------------------------- */
.board {
  position: relative;
  flex: 0 0 auto;
  width: 300px; height: 300px;          /* JS setzt die echte Groesse */
  border-radius: var(--r-md);
  background: var(--sea);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  transform-origin: 50% 0;
  transition: transform var(--d-slow) var(--ease-o);
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
.board canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#ink { cursor: crosshair; }
/* Uebersichts-Inset (Esteban #724): unten links, wo weder Griff noch Geister-
   Hand liegen. Der eine erlaubte Kasten neben Board und Map: Papier, Haarlinie,
   10 px Ecken. Schluckt keine Zeiger-Ereignisse, liegt ueber der Tinte. */
.board .inset {
  inset: auto auto 10px 10px;
  width: 104px; height: 52px;
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  pointer-events: none;
}

/* ---- Dock --------------------------------------------------------------- */
.dock .row { display: flex; align-items: center; gap: var(--s2); }
.btn.grow { flex: 1 1 auto; }
.btn.icon {
  flex: 0 0 auto; width: var(--tap); height: var(--tap);
  padding: 0; display: grid; place-items: center; border-radius: var(--r-full);
}
.btn.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn.icon[data-off] { opacity: .3; pointer-events: none; }

/* ---- Reveal-Sheet ------------------------------------------------------- */
/* Der Weiter-Knopf bleibt immer sichtbar; nur der Inhalt darueber rollt, falls
   Rechenweg + Verteilung + Beleg auf einem kurzen Schirm nicht aufgehen. */
/* 62dvh ist gerechnet, nicht geraten: darueber bleiben der Karte im offenen
   Sheet weniger als 200 px, und die Karte IST die Aufloesung. */
.sheet { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--s3);
  /* Das Blatt ist so hoch wie sein Inhalt, nichts rollt; die Karte nimmt den
     Rest und schrumpft auf kurzen Schirmen (liftBoard). */
  max-height: calc(100dvh - 240px); }
#shapeBar, #napkin, #fact { display: none !important; }
/* Die Verteilung: die Statistik, die Esteban sehen will. Kraeftiger als die
   Grundform, ohne Hinweiszeile. */
.dist { margin: var(--s2) 0 var(--s3); }
.dist .dist__svg { height: 56px; }
.dist .dist__area { fill: color-mix(in oklab, var(--accent) 18%, var(--paper)); stroke: var(--accent); stroke-width: .9; }
.dist .dist__note { display: none; }
/* Die Karte ist die Aufloesung; das Blatt traegt eine Zahl, ein Urteil, eine
   Zeile Einordnung, einen Fakt. (#709, Esteban: Party-Spiel, nichts scrollt) */
.sheet__verdict { margin: 0; }
.beat .dist__note { display: none; }   /* Esteban #709: kein "simulated"-Zusatz */

.sheet__scroll {
  display: grid; gap: var(--s2); align-content: start;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
/* Reicht der Platz nicht, wird die Schnittkante weich -- sonst sieht ein
   abgeschnittener Block aus wie ein Block, der zu Ende ist. Kurz gehalten,
   damit die angeschnittene Zeile noch lesbar bleibt: DAS ist der Hinweis,
   nicht der Verlauf selbst. Was unten liegt, ist der Beleg-Fakt samt Quelle --
   der einzige Block hier, der auch nach dem Wischen noch dasselbe sagt. */
.sheet[data-more] .sheet__scroll {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
}
/* Das zufahrende Sheet liegt auf z-index 20 und damit UEBER der Karte. Solange
   es nach "Next" 640 ms lang nach unten faehrt, schluckte es die Beruehrungen
   auf dem unteren Drittel der Karte (gemessen: 0 ms nach Next traf die Probe
   das Sheet statt #ink, bei 100 ms noch immer nicht die Karte). Sobald
   data-open weg ist, wird es fuer den Finger durchlaessig. */
.sheet:not([data-open]) { pointer-events: none; }
.sheet__fact { margin: 0; line-height: 1.45; }

/* Die Kopfzahl. Kein erfundenes Verhaeltnis: bei DRAW ist die Abweichung
   selbst die Groesse, die keine Erklaerung braucht. */
.factor { margin: 0; align-items: baseline; }
.factor__dir { text-transform: none; }

/* EIN Balken. Der Ort steht schon als Kilometerzahl darueber -- ein zweiter
   Balken fuer denselben Wert waere doppelt. */
.bar { display: grid; gap: 5px; }
.bar .label { display: flex; justify-content: space-between; align-items: baseline; }
.bar .label b { color: var(--ink); font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums; }
.bar i { display: block; height: 6px; border-radius: var(--r-full); background: var(--paper-3); overflow: hidden; }
/* scaleX statt width: Breite zu animieren erzwingt Layout in jedem Frame.
   Der Kind-Selektor ist Pflicht: `.bar b` traf auch das <b> in der Beschriftung
   und zog dessen Prozentzahl auf scaleX(0) -- unsichtbar, aber im DOM. */
.bar i > b {
  display: block; height: 100%; width: 100%;
  background: var(--truth);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--d-slow) var(--ease-o);
}

.dist { margin: 0; }
.dist .dist__svg { height: 40px; }
/* Wer gut gezeichnet hat, landet direkt auf dem Median -- dann ueberlagern sich
   in der geteilten Achse die Marke `you` und der Median-Wert zu einem Brei.
   Zweizeilig statt uebereinander. Lokale Korrektur, _shared bleibt unberuehrt. */
/* Der Vorbehalt haengt bei DRAW schon am Satz ueber der Kurve (fillSheet).
   Hier unten steht er ein zweites Mal, darum darf er leise sein. */
.dist .dist__note { margin-top: 0; }

/* Die Kopfzahl ist der Fokus. Das Urteil darunter kommentiert sie, also darf
   es nicht gleich gross sein -- vorher schrie es die Zahl nieder. */

.sheet #next { margin-top: var(--s1); }

/* ---- Tagesabschluss: alle fuenf Runden auf einen Blick ------------------- */
.summary {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  width: 100%; text-align: center;
}
.summary .mega { margin: 0; }
.summary__cap {
  margin: -6px 0 var(--s2); font-size: var(--t-xs); color: var(--ink-3);
  font-weight: 500;
}
.strip { display: grid; gap: 0; width: 100%; }
/* Die Miniaturkarte ist das, woran man die Runde wiedererkennt -- sie bleibt
   und bekommt in der Familien-Zeile eine dritte Spalte. */
.strip .srow {
  grid-template-columns: 44px 1fr auto;
  padding: var(--s2) 0; text-align: left;
}
.strip .srow:first-child { border-top: 1px solid var(--line); }
.strip .srow:last-child { border-bottom: 1px solid var(--line); }
.strip canvas {
  width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--sea); box-shadow: inset 0 0 0 1px var(--line);
}
.srow__what { min-width: 0; }
.srow__what b { display: block; font-size: var(--t-sm); font-weight: 650;
  letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow__what span { font-size: var(--t-xs); color: var(--ink-3); }
.strip .srow[data-worst] .srow__what b,
.strip .srow[data-worst] .srow__f { color: var(--accent); }
.summary__line {
  margin: var(--s2) 0 0; max-width: 30ch; font-size: var(--t-md); font-weight: 500;
  color: var(--ink-2); line-height: 1.4; text-wrap: balance;
}

/* ---- Zustaende ---------------------------------------------------------- */
/* Reveal: der Kopf verschwindet optisch, bleibt aber im Fluss stehen, damit
   die Karte darueber gleiten kann ohne dass das Layout springt. */
.app[data-reveal] .head { opacity: 0; pointer-events: none; }
.head { transition: opacity var(--d-mid) var(--ease); }

.app[data-done] .head,
.app[data-done] .board { display: none; }
.app:not([data-done]) .summary { display: none; }

/* Kurzer Bildschirm: die Karte darf schrumpfen, der Rest wird leiser.
   Was faellt, faellt in dieser Reihenfolge: erst der Beleg-Fakt (er steht auch
   hinter dem Quellen-Link), dann der Kopf-Tipptext. Rechenweg und Verteilung
   bleiben -- das sind die Bausteine, wegen denen der Umbau stattfand. */
@media (max-height: 620px) {
  /* Auf einem flachen Schirm (Handy quer) geht das Piktogramm ganz weg. Es ist
     die wortlose Anleitung, aber der Satz darunter sagt dasselbe -- und ohne
     diese 50 px passt die Karte nicht mehr in den Ausschnitt, ohne die Schale
     zu sprengen. Erste Wahl bleibt: lieber kein Bild als eine rollende Seite. */
  .glyph { display: none; }
  .head { gap: var(--s2); }
  .sheet, .sheet__scroll { gap: var(--s2); }
  .sheet { max-height: 82dvh; }
  .sheet__fact { display: none; }
  .head .hint { font-size: var(--t-xs); }
}