/* YESTERDAY · Spiel-Schicht.
   Aus den geteilten Tokens werden NUR --accent und --accent-ink gesetzt.
   Alles Weitere ist mit --y- praefixiert und lebt nur hier. */

:root { --hue: 320; }

:root {

  --y-bar:      var(--line-strong);   /* die 89 gewoehnlichen Tage */
  --y-card-bg:  var(--paper);
  --y-spark-h:  46px;
  --y-card-min: auto;      /* auf hohen Buehnen inhaltsgross; die kurzen
                              Buehnen unten setzen einen echten Wert */
}

.y-ico { display: inline-block; flex: 0 0 auto; }

/* ---- Topbar ------------------------------------------------------------ */
.y-date {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.y-streak {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--t-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.y-streak[data-zero] { background: var(--paper-2); color: var(--ink-3); }
.y-streak[data-bump] { transform: scale(1.16); }
.y-streak b { font-size: var(--t-sm); line-height: 1; }

/* ---- Kopf: die Frage, und nach der Antwort nichts mehr ------------------
   Beantwortet faellt der Kopf ueber grid-template-rows in sich zusammen
   (dieselbe Technik wie die aufklappende Sparkline) und gibt seine Hoehe
   an den Rechenweg unter dem Brett weiter. */
.y-head {
  flex: 0 0 auto;
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--d-mid) var(--ease);
}
.y-head__in { min-height: 0; overflow: hidden; }
.prompt {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 74px;                                  /* haelt das Brett ruhig,
                                                        egal ob 2 oder 3 Zeilen */
  transition: opacity var(--d-mid) var(--ease);
}
.y-head[data-mode="why"] { grid-template-rows: 0fr; }
.y-head[data-mode="why"] .prompt { opacity: 0; pointer-events: none; }
/* Beim Ketten-Ruck faehrt der Kopf hart auf, sonst laeuft seine Hoehen-
   Animation gegen die Karten-Bewegung. Gegenstueck zu .y-board[data-swap]. */
.y-head[data-swap], .y-head[data-swap] .prompt { transition: none !important; }

/* ---- Brett ------------------------------------------------------------- */
.y-board {
  flex: 0 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%;
  min-height: 0;
}
.y-board[data-busy] { pointer-events: none; }
.y-board[data-swap], .y-board[data-swap] * { transition: none !important; }

/* ---- Karte ------------------------------------------------------------- */
.y-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s1);
  width: 100%;
  min-height: var(--y-card-min);
  padding: var(--s5) var(--s4);
  border: 0;
  border-radius: var(--r-md);
  background: var(--paper-2);
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--d-fast) var(--ease),
    opacity   var(--d-mid)  var(--ease),
    border-color var(--d-mid) var(--ease),
    box-shadow var(--d-mid) var(--ease);
}
.y-card:active   { transform: scale(.988); }
.y-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
  .y-card:hover { background: var(--paper-3); }
}

.y-card__name {
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: var(--tight);
  line-height: 1.15;
  text-wrap: balance;
}
.y-card__desc {
  font-size: var(--t-sm);
  color: var(--ink-3);
  line-height: 1.3;
  text-wrap: balance;
  max-width: 30ch;
}

/* die eine grosse Zahl -- oder drei Bloecke, wo noch keine steht */
.y-card__num {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin-top: var(--s2);
  min-height: 40px;
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: var(--tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.y-card__num .y-unit {
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-3);
  transform: translateY(-2px);
}
.y-card__num .y-hidden { color: var(--line); align-self: center; }

/* Sparkline: klappt beim Reveal auf */
.y-card__spark {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows var(--d-slow) var(--ease-o);
}
.y-card__spark > span { overflow: hidden; min-height: 0; }
.y-card[data-open] .y-card__spark { grid-template-rows: 1fr; }
.y-card__sparkIn {
  display: block;
  padding-top: var(--s3);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--d-slow) var(--ease-o);
}
.y-card[data-wipe] .y-card__sparkIn { clip-path: inset(0 0 0 0); }

.y-spark { display: block; width: 100%; height: var(--y-spark-h); }
.y-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 5px;
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.y-foot b { font-weight: 650; color: var(--ink-2); }

/* Zustaende nach dem Tippen */
.y-card[data-won] { box-shadow: inset 0 0 0 2px var(--accent); }
.y-card[data-won] .y-card__num { color: var(--accent); }
.y-card[data-lost] { opacity: .58; }

.y-card__pick {
  position: absolute; top: -9px; left: var(--s4);
  padding: 2px 9px;
  border-radius: var(--r-full);
  background: var(--ink); color: var(--paper);
  font-size: var(--t-xs); font-weight: 600;
  opacity: 0; transition: opacity var(--d-mid) var(--ease);
  pointer-events: none;
}
.y-card[data-picked] .y-card__pick { opacity: 1; }

/* Ketten-Bewegung */
.y-card[data-fly] { transition: transform var(--d-mid) var(--ease-i), opacity var(--d-mid) var(--ease); }
.y-card[data-slide] { transition: transform var(--d-slow) var(--ease-o); }
.y-card[data-enter] { opacity: 0; transform: translateY(22px); }

/* ---- Der Trenner: die Frage als Glyphe, dann der Faktor ---------------- */
.y-vs {
  position: relative;
  flex: 0 0 auto;
  display: grid; place-items: center;
  min-height: 46px;
  width: 100%;
}
.y-vs__line {
  position: absolute; left: 8%; right: 8%; top: 50%;
  border-top: 1px solid var(--line);
}
.y-vs__mid {
  position: relative;
  display: flex; align-items: center; gap: var(--s3);
  padding-inline: var(--s2);
  background: var(--paper);          /* knockt die Haarlinie weg */
}
.y-vs__dot {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink-3);
  transition: color var(--d-mid) var(--ease), border-color var(--d-mid) var(--ease),
              background var(--d-mid) var(--ease), transform var(--d-mid) var(--ease-o);
}
.y-vs[data-good] .y-vs__dot { color: var(--good); border-color: var(--good); transform: scale(1.12); }
.y-vs[data-bad]  .y-vs__dot { color: var(--bad);  border-color: var(--bad);  transform: scale(1.12); }

/* Der Faktor in der gemeinsamen Optik (.factor / .factor__dir), nur eine
   Spur kleiner: die zwei Aufrufzahlen auf den Karten bleiben die groessten
   Zahlen des Reveals. */
.y-vs__f {
  font-size: var(--t-lg);
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--d-mid) var(--ease-o), transform var(--d-mid) var(--ease-o);
}
.y-vs__f[data-in] { opacity: 1; transform: none; }

/* ---- Der Rechenweg unter dem Brett ------------------------------------ */
.y-nap {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--d-mid) var(--ease-o), transform var(--d-mid) var(--ease-o);
}
.y-nap[data-in] { opacity: 1; transform: none; }
.y-nap { display: block; }          /* Ausnahme von .napkin{display:none}: hier ist es der Reveal-Satz */
.y-nap p { margin: 0; }
.y-nap p.y-nap__why, .y-nap p.y-nap__src { display: none; }
.y-nap p.y-nap__rule { text-wrap: pretty; }
.y-nap p.y-nap__why {
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  text-wrap: pretty;
}
.y-nap p.y-nap__src {
  margin-top: var(--s1);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* ---- Dock -------------------------------------------------------------- */
.dock { align-items: center; }
.dock .btn { width: 100%; }
.y-skip {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: auto;
  font-size: var(--t-sm); font-weight: 500;
  color: var(--ink-3);
}
.y-skip__dot {
  width: 5px; height: 5px; border-radius: var(--r-full);
  background: var(--accent);
}
#next { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ---- Abschluss --------------------------------------------------------- */
/* Ein Lauf kann drei oder vierzig Runden lang sein. Darum: Kopf und
   Teilen-Knopf stehen fest, nur die Rundenliste dazwischen rollt. Der Deckel
   laesst die Topbar frei, damit der Nochmal-Knopf erreichbar bleibt. */
.y-end {
  text-align: center;
  display: flex; flex-direction: column;
  /* Der Deckel laesst die Topbar frei: dort sitzt der Nochmal-Knopf, und der
     muss auch nach einem 40-Runden-Lauf erreichbar bleiben. 40px = Topbar-
     Mindesthoehe 32 plus Luft, dazu der obere Rand der App. */
  max-height: calc(100% - 40px - max(var(--s3), env(safe-area-inset-top)));
}
.y-end__top { flex: 0 0 auto; }
.y-end__scroll {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Nur wenn die Liste laenger ist als der Platz: die Unterkante verblasst,
   damit die halb sichtbare Zeile als "da kommt noch was" liest und nicht als
   abgeschnitten. */
.y-end__scroll[data-more] {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
.y-end .label { margin: 0; }
.y-end .mega { margin: 2px 0 0; color: var(--accent); }
.y-ramp { margin: var(--s4) 0 var(--s4); }
.y-ramp svg { display: block; width: 100%; height: 54px; }
.y-end__tone {
  margin: 0 auto var(--s2);
  max-width: 26ch;
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--tight);
  text-wrap: balance;
}
.y-end__meta {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Alle Runden auf einen Blick. Kategorie statt Titel: die Liste ist
   spoilerfrei, auch ueber die Schulter gelesen. */
.summary { text-align: left; margin: var(--s4) 0 var(--s5); gap: 0; }
.srow__what { display: block; text-wrap: pretty; }   /* Fluss, damit lange
                                                        Paare sauber umbrechen */
.y-sn {
  display: inline-block;
  min-width: 1.7ch; margin-right: var(--s2); text-align: right;
  font-size: var(--t-xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.y-tag {
  white-space: nowrap;
  font-size: var(--t-xs); font-weight: 500;
  color: var(--ink-3);
}
.srow[data-y="skip"] .srow__what, .srow[data-y="skip"] .srow__f { opacity: .5; }
.srow[data-y="lost"] .y-sn, .srow[data-y="lost"] .y-tag { color: var(--bad); }
.srow[data-y="lost"] .srow__f { color: var(--bad); }

.y-end .share { width: 100%; flex: 0 0 auto; }

/* ---- Kurze Buehne ------------------------------------------------------ */
@media (max-height: 760px) {
  .prompt { min-height: 62px; }
  .y-nap { padding: var(--s2) var(--s3); }
  .y-ramp { margin: var(--s3) 0; }
}
@media (max-height: 700px) {
  :root { --y-spark-h: 36px; --y-card-min: 150px; }
  .prompt { min-height: 54px; }
  .y-card { padding: var(--s3) var(--s4); }
  .y-card__num { font-size: var(--t-lg); min-height: 34px; margin-top: var(--s1); }
  .y-vs { min-height: 38px; }
  .y-vs__f { font-size: var(--t-md); }
  .y-ramp svg { height: 42px; }
  .y-end .mega { font-size: var(--t-xl); }
  .summary { margin: var(--s3) 0 var(--s4); }
  .srow { padding: var(--s2) 0; }
}
@media (max-height: 620px) {
  :root { --y-spark-h: 28px; --y-card-min: 118px; }
  .prompt { min-height: 44px; }
  .y-card__desc { font-size: var(--t-xs); }
  .y-card__num { font-size: var(--t-lg); min-height: 28px; }
  .y-vs__f { font-size: var(--t-md); }
  .y-nap { font-size: var(--t-xs); line-height: 1.45; }
  .y-nap .napkin__label { display: none; }   /* der Block erklaert sich selbst */
  .y-end .mega { font-size: var(--t-xl); }
}

/* ---- Bewegung aus ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .y-card__sparkIn { clip-path: none; }
  .y-card[data-enter] { opacity: 1; transform: none; }
  .y-nap { opacity: 1; transform: none; }
  .y-vs__f { opacity: 1; transform: none; }
}