/* SUGAR · spielspezifische Schicht.
   Aus tokens.css wird NUR --accent und --accent-ink ueberschrieben.
   Alles andere hier sind eigene, spiel-lokale Variablen (--sg-*). */

:root { --hue: 350; }

.app {
  /* Zucker ist weiss. Auf warmem Papier traegt ihn ein feiner Schatten. */
  --sg-face:  var(--paper);
  --sg-top:   var(--paper);
  --sg-side:  var(--paper-3);
  --sg-edge:  rgba(22, 21, 15, .18);
  --sg-lit:   rgba(255, 255, 255, .95);
  --sg-well:  var(--paper-2);
  --sg-well-edge: rgba(22, 21, 15, .13);
  --sg-warm:  var(--warn);   /* ueber der Tageslinie */
  --sg-hot:   var(--bad);    /* ueber der 10-%-Linie */
  --sg-ghost: var(--line);
  --sg-drop:  rgba(22, 21, 15, .13);
}

.app { touch-action: none; }
/* Der Daumen zieht auf .stage. Ohne das hier legt der Browser waehrend des
   ersten Zuges eine Text-Auswahl an (selectstart). Beim naechsten Druck auf
   dieselbe Stelle gilt ihm das als Ziehen dieser Auswahl: er feuert dragstart
   und danach pointercancel -- G.pullField beendet die Geste und der Rest des
   Zuges kommt nie an. Gemessen: ab Runde 2 wurden von 18 pointermove-Events
   noch 2 zugestellt. Das war das "nach der ersten Runde klemmt es". */
.stage { -webkit-user-select: none; user-select: none; }
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline-color: var(--accent); }

/* ======================================================================
   Kopf: Piktogramm + Name + Portion. Eine Zeile Text, sonst Bild.
   ====================================================================== */
.sg-head {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  transition: gap var(--d-mid) var(--ease);
}
.sg-pict { width: 88px; height: 88px; }
.sg-pict svg { width: 100%; height: 100%; overflow: visible; }
.sg-head .prompt { margin: 0; }

/* Der Tipp sitzt beim Gegenstand, nicht beim Knopf: er sagt etwas ueber
   DIESE Portion. Er kostet nichts und es gibt ihn nur einmal am Tag. */
.sg-head .hint {
  margin: 0; max-width: 30ch; text-align: center;
  padding: var(--s2) var(--s3); font-size: var(--t-xs);
}
.app[data-phase="reveal"] .sg-head .hint,
.app[data-phase="done"]   .sg-head .hint { display: none; }

/* Reveal + Tagesabschluss: der Kopf tritt zurueck, das Bild bekommt den Platz */
.app[data-phase="reveal"] .sg-head { flex-direction: row; gap: var(--s3); align-items: center; }
.app[data-phase="reveal"] .sg-pict { width: 40px; height: 40px; }
/* Bei 40 px traegt nur noch die Silhouette; das Kennzeichen waere ein Fleck. */
.app[data-phase="reveal"] .pmark { display: none; }
.app[data-phase="reveal"] .prompt { font-size: var(--t-md); text-align: left; max-width: none; }
.app[data-phase="reveal"] .prompt small { display: inline; margin: 0 0 0 .5em; }

/* ======================================================================
   Das Feld: die eine Buehne. Boden unten, Stapel waechst nach oben.
   ====================================================================== */
.sg-field {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 132px;
  max-height: 430px;
  align-self: stretch;
}

/* Die Stapel leben links; rechts bleibt eine schmale Gasse fuer die
   Linien-Etiketten. Sonst schneidet "A DAY" mitten in die Wuerfel. */
.sg-stacks { position: absolute; inset: 0 46px; }

/* Bodenlinie: der Stapel steht auf etwas. */
.sg-field::after {
  content: ""; position: absolute; left: 46px; right: 46px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}

/* --- Die zwei Saeulen ------------------------------------------------- */
.sg-col {
  position: absolute; bottom: 0;
  display: flex; align-items: flex-end; justify-content: center;
  transition: left var(--d-slow) var(--ease-o), width var(--d-slow) var(--ease-o),
              opacity var(--d-mid) var(--ease), filter var(--d-mid) var(--ease);
}
.sg-col--you   { left: 0;    width: 100%; }
.sg-col--truth { left: 52%;  width: 48%; opacity: 0; pointer-events: none; }
.app[data-phase="reveal"] .sg-col--you   { left: 0;   width: 48%; }
.app[data-phase="reveal"] .sg-col--truth { left: 52%; width: 48%; opacity: 1; }
.app[data-phase="reveal"] .sg-col--you   { filter: saturate(.72) opacity(.82); }
.sg-col svg { overflow: visible; }

/* --- Label unter den Saeulen ----------------------------------------- */
.sg-tag {
  position: absolute; bottom: -20px; left: 0; width: 100%;
  text-align: center; opacity: 0;
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-3);
  transition: opacity var(--d-mid) var(--ease);
}
.app[data-phase="reveal"] .sg-tag { opacity: 1; }
.app[data-phase="reveal"] .sg-field { margin-bottom: 22px; }

/* --- Die Tageslinie --------------------------------------------------- */
.sg-rule {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1.5px dashed var(--line-strong);
  pointer-events: none;
  transition: bottom var(--d-mid) var(--ease), opacity var(--d-mid) var(--ease);
}
.sg-rule > i {
  position: absolute; right: 0; top: -.55em; font-style: normal;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0;
  color: var(--ink-3);
  background: var(--paper); padding: 0 0 0 7px; white-space: nowrap;
}
.sg-rule--soft { border-top-style: dotted; opacity: 0; }
.app[data-phase="reveal"] .sg-rule--soft { opacity: 1; }
.sg-rule[data-dim] { opacity: .3; }
.sg-rule[data-flash] { animation: sg-flash var(--d-slow) var(--ease-o) 1; }
@keyframes sg-flash {
  0%   { border-top-color: var(--line-strong); filter: none; }
  18%  { border-top-color: var(--sg-hot); filter: drop-shadow(0 0 10px var(--sg-warm)); }
  100% { border-top-color: var(--line-strong); filter: none; }
}

/* --- Die gestrichelte Linie des eigenen Tipps ------------------------- */
.sg-mark {
  position: absolute; left: 0; right: 0; height: 0; opacity: 0;
  border-top: 2px dashed var(--ink-3);
  transition: opacity var(--d-mid) var(--ease);
  pointer-events: none;
}
.app[data-phase="reveal"] .sg-mark { opacity: 1; }

/* ======================================================================
   Der Zieh-Hinweis: kein Satz, eine Bewegung.
   ====================================================================== */
.sg-hint {
  position: absolute; left: 50%; bottom: 32%; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  pointer-events: none; color: var(--ink-3);
  transition: opacity var(--d-mid) var(--ease);
}
.sg-hint i {
  display: block; width: 4px; height: 4px; border-radius: var(--r-full);
  background: currentColor; opacity: .3;
  animation: sg-rise 2200ms var(--ease-o) infinite;
}
.sg-hint i:nth-child(1) { animation-delay: 0ms; }
.sg-hint i:nth-child(2) { animation-delay: 130ms; }
.sg-hint i:nth-child(3) { animation-delay: 260ms; }
.sg-hint svg { color: currentColor; opacity: .7; animation: sg-rise 2200ms var(--ease-o) infinite; animation-delay: 390ms; }
@keyframes sg-rise {
  0%, 62%, 100% { transform: translateY(0);    opacity: .16; }
  22%           { transform: translateY(-14px); opacity: .62; }
  46%           { transform: translateY(-26px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-hint i, .sg-hint svg { animation: none; opacity: .45; }
}

/* ======================================================================
   Reveal-Sheet
   --------------------------------------------------------------------
   Die Shell legt das Sheet ueber alles (z-index 20) -- auch ueber den
   Knopf. Also hebt das Spiel den Dock darueber und haelt im Sheet unten
   genau so viel Platz frei, dass nie Text unter dem Knopf verschwindet.
   ====================================================================== */
.dock { position: relative; z-index: 30; }
/* Das Sheet scrollt, der Knopf steht fest darueber. Ohne diesen Sockel
   laeuft der Text unter dem Knopf durch und taucht darunter wieder auf --
   das liest sich wie ein Fehler statt wie "hier geht es weiter".
   Der Verlauf oben sagt, dass der Text weitergeht; der deckende Teil
   darunter beendet ihn sauber. */
.dock::before {
  content: ""; position: absolute; pointer-events: none;
  left: calc(var(--s4) * -1); right: calc(var(--s4) * -1);
  top: -34px; bottom: calc((var(--s4) + env(safe-area-inset-bottom)) * -1);
  background: linear-gradient(to bottom, transparent 0, var(--paper) 34px);
}
.app[data-phase="guess"] .dock::before,
.app[data-phase="done"] .dock::before { display: none; }
/* Der Sockel ist absolut positioniert und wuerde die statischen Knoepfe
   sonst ueberdecken. */
.dock > button { position: relative; z-index: 1; }
.sheet {
  max-height: calc(100dvh - 260px); overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: calc(var(--tap) + var(--s6) + env(safe-area-inset-bottom));
}
.sg-sheet-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s1);
}
/* Der Faktor ist die Ueberschrift des Reveals. Der Satz darunter traegt die
   beiden Zahlen und ist bewusst leiser -- sonst konkurrieren zwei Kopfzeilen. */
.sg-said { color: var(--ink); font-weight: 500; margin: 0 0 var(--s2); }
.sg-place {
  font-size: var(--t-xs); color: var(--ink-2); line-height: 1.45;
  margin: var(--s1) 0 0; max-width: 40ch;
}
.sg-why, .sg-place { display: none !important; }
.sg-why > summary {
  list-style: none; cursor: pointer; display: inline-block;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .01em;
  color: var(--ink-3); padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.sg-why > summary::-webkit-details-marker { display: none; }
.sg-why > summary::after { content: " +"; font-weight: 700; }
.sg-why[open] > summary::after { content: " –"; }
.sg-why > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.sg-meta {
  font-size: var(--t-xs); color: var(--ink-3); line-height: 1.6;
  margin: var(--s3) 0 0; max-width: 46ch;
}
.sg-meta a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--line); }
.sg-caveat { display: block; margin-top: var(--s2); }
.sheet__fact .sg-note {
  display: block; margin-top: var(--s2);
  color: var(--ink-3); font-size: var(--t-xs);
}

/* ======================================================================
   Der Vorlauf-Streifen: Tipp links, Zahleneingabe in der Mitte.
   Die Geste bleibt der Kern; getippt wird, wo eine Zahl praeziser ist.
   Drei Spalten, damit das Feld mittig steht, ob es einen Tipp gibt oder nicht.
   ====================================================================== */
.sg-numrow {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: var(--s2);
  min-height: 36px; margin-bottom: var(--s1);
}
.sg-numrow__a { justify-self: start; }
.sg-numrow__b { justify-self: center; }
/* #724: «Tipp · 1 pro Tag» ist laenger als «Hint · 1 a day» und brach in der
   linken Spalte auf zwei Zeilen um, der Streifen wurde 80 px hoch. Eine Zeile,
   auch wenn dafuer das Zahlenfeld ein paar Pixel aus der Mitte rueckt: die
   linke 1fr-Spalte waechst auf die Knopfbreite, die rechte gibt nach. */
.sg-numrow .hintbtn { white-space: nowrap; }
.sg-numrow .numfield { font-size: var(--t-sm); }
.sg-numrow .numfield__in { width: 4.5ch; min-width: 4.5ch; }

/* ======================================================================
   Tagesabschluss: der Tageswert, darunter alle fuenf Runden auf einen Blick.
   ====================================================================== */
.sg-done { display: flex; flex-direction: column; align-items: center; gap: var(--s5); width: 100%; }
.sg-total { text-align: center; }
.sg-total .mega { display: block; }
.sg-total .label { display: block; margin-top: var(--s2); }
.summary { max-width: 340px; }
.srow__what i { font-style: normal; color: var(--ink-3); }
.sg-line-preview {
  font-size: var(--t-sm); color: var(--ink-2); text-align: center;
  max-width: 26ch; margin: 0 auto; text-wrap: balance; line-height: 1.4;
}
.sg-share-note { font-size: var(--t-xs); color: var(--ink-3); text-align: center; min-height: 1.2em; margin: 0; }

/* ======================================================================
   Enger Bildschirm
   ====================================================================== */
@media (max-height: 700px) {
  .sg-pict { width: 64px; height: 64px; }
  .sg-head { gap: var(--s2); }
}
@media (max-height: 620px) {
  .sg-pict { width: 48px; height: 48px; }
  /* Die Sheet-Hoehe rechnet fitSheet() aus; hier steht nur, wieviel Buehne
     mindestens stehen bleiben muss, damit der Vergleich zweier Stapel
     ueberhaupt noch ein Vergleich ist. */
  .sg-field { min-height: 120px; }
  .sheet { padding-top: var(--s5); }
  .sg-done { gap: var(--s4); }
  .srow { padding: var(--s2) 0; }
  .sg-head .hint { padding: 6px var(--s3); }
  .sg-numrow { min-height: 32px; }
}

/* Fokus sichtbar halten, auch auf dem Ziehfeld */
.sg-field:focus-visible, .stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-md); }

/* ---- Rechner (Esteban #725): das Feld darf hoeher, das Bild groesser ---- */
@media (min-width: 900px) and (min-height: 700px) {
  .sg-field { max-height: 620px; }
  .sg-pict { width: 120px; height: 120px; }
}