/* HOW LIKELY · spielspezifische Schicht (#843).
   Aus tokens.css kommt alles; hier nur die eine Farbton-Zeile und die Buehne (Feld «einer von N» + Zehnerskala). */

:root { --hue: 18; }

.app { touch-action: none; }
.stage { -webkit-user-select: none; user-select: none; }
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline-color: var(--accent); }

/* ---- Kopf: die Frage, darunter der Rahmen (Gruppe, Ort, Zeitraum) ---------------------------------------------- */
.hl-head { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--s2); width: 100%; }
.hl-head .prompt { margin: 0; text-wrap: balance; transition: color var(--d-mid) var(--ease); }
/* im Reveal und am Tagesende steht alles oben (nicht mittig): so wird die Buehne EINMAL gemessen und rutscht danach nicht */
.app[data-rv] .stage, .app[data-phase="done"] .stage { justify-content: flex-start; }
.app[data-rv] .hl-head .prompt { font-size: var(--t-md); font-weight: 550; color: var(--ink-2); max-width: 30ch; }
.app[data-rv] .hl-head .prompt .satz__name { font-size: inherit; }

/* ---- Die Buehne: links das Feld, rechts die Skala ------------------------------------------------------------- */
.hl-field {
  flex: 1 1 auto; width: 100%; min-height: 240px;
  display: grid; grid-template-columns: minmax(0, 1fr) 84px; column-gap: var(--s2);
  cursor: ns-resize;
}
.hl-field[hidden] { display: none; }
/* die Scheibe ist immer rund und ganz: min(Breite, Hoehe) des Kastens (howlikely.js geom) */
.hl-crowd { position: relative; min-width: 0; min-height: 0; height: 100%; }
.hl-dots { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Duell: die Anzeigetafel schwebt oben auf dem Feld, die Scheibe rueckt darunter (nichts liegt auf dem «you»-Ring) */
.hl-crowd:has(.vs--float) .hl-dots { top: 52px; height: calc(100% - 52px); }
/* Die eine Zahl unter dem Feld, darunter ihr Nenner */
.hl-readout { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.hl-read { margin: 0; display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-read__pre { font-size: var(--t-lg); font-weight: 500; color: var(--ink-2); }
.hl-read__n { font-size: clamp(2.25rem, 10vw, 3rem); font-weight: 700; letter-spacing: var(--tight); color: var(--ink); line-height: 1; }
/* Raten: die Zahl ist ein Eingabefeld (gestrichelte Unterlinie sagt «antippen und tippen»); Reveal: die feste Zahl */
.app[data-phase="guess"] .hl-read__n { display: none; }
.app:not([data-phase="guess"]) .hl-read__in { display: none; }
.hl-read__in .numfield { background: none; height: auto; min-height: 0; padding: 0; border-radius: 0; box-shadow: none; }
.hl-read__in .numfield:focus-within { box-shadow: none; }
.hl-read__in .numfield__in {
  font: inherit; font-size: clamp(2.25rem, 10vw, 3rem); font-weight: 700; letter-spacing: var(--tight); line-height: 1.05;
  color: var(--ink); text-align: left; padding: 0 0 2px; min-width: 0; caret-color: var(--accent);
  border-bottom: 2px dashed var(--line-strong); transition: border-color var(--d-fast) var(--ease);
}
.hl-read__in .numfield__in:hover { border-bottom-color: var(--ink-3); }
.hl-read__in .numfield__in:focus { border-bottom-color: var(--accent); }
.hl-per { margin: 0; font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); text-align: center; text-wrap: balance; }
.hl-per:empty { display: none; }
.app[data-phase="done"] .hl-readout { display: none; }

/* Die Skala: Spieler-Punkte links (0-34), Achse bei 40, Ticks 36-44, Beschriftung ab 52 */
.hl-ruler { position: relative; height: 100%; min-height: 220px; touch-action: none; }
.app[data-rv] .hl-ruler { min-height: 0; }   /* im Reveal bestimmt fitStage die Hoehe, die Skala darf nicht darueber hinausdruecken */
.hl-ruler::before { content: ""; position: absolute; left: 30px; top: 14px; bottom: 14px; width: 1px; background: var(--line-strong); }
.hl-tick { position: absolute; left: 0; right: 0; height: 0; }
.hl-tick i { position: absolute; left: 25px; width: 11px; height: 1px; background: var(--line-strong); }
.hl-tick b {
  position: absolute; left: 42px; transform: translateY(-50%);
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: opacity var(--d-fast) var(--ease);
}
.hl-tick.is-dim b { opacity: 0; }

.hl-line { position: absolute; left: 0; width: 38px; height: 0; pointer-events: none; }
.hl-line[hidden], .hl-tag[hidden] { display: none; }
.hl-line--you { border-top: 2px dashed var(--accent); margin-top: -1px; }
.hl-line--real { border-top: 2px solid var(--ink); margin-top: -1px; }
.hl-line--them { border-top: 2px dotted var(--ink-2); margin-top: -1px; }

.hl-tag { position: absolute; right: -12px; z-index: 3; transform: translateY(-50%); pointer-events: none; white-space: nowrap; }   /* rechtsbuendig: lange Zahlen laufen nie aus dem Schirm */
.hl-pill {
  display: inline-block; font-style: normal; padding: 3px 8px 4px; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px var(--paper);
}
.hl-tag--you .hl-pill { background: var(--accent); color: var(--accent-ink); }
.hl-tag--real .hl-pill { background: var(--ink); color: var(--paper); }
.hl-tag--them .hl-pill { background: var(--ink-2); color: var(--paper); }

.hl-grab {
  position: absolute; left: 30px; width: 36px; height: 36px; border-radius: var(--r-full);
  transform: translate(-50%, -50%); z-index: 4; pointer-events: none;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 3px var(--paper), 0 2px 6px rgba(14, 14, 17, .14), 0 8px 18px rgba(14, 14, 17, .12);
}
.app[data-rv] .hl-grab { opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }

/* Spieler: kleine Punkte links der Achse, auf der Hoehe ihres Tipps */
.hl-people { position: absolute; left: 0; top: 0; bottom: 0; width: 24px; pointer-events: none; }
.hl-people i { position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--ink-3); opacity: .5; }
.hl-people.is-in i { animation: hl-in 420ms var(--ease-o) both; animation-delay: var(--d, 0ms); }
@keyframes hl-in { from { opacity: 0; transform: translateX(-6px); } }

/* Multiplayer: Mitspieler als Ringe links der Achse, Namen links daneben (Treffer gruen) */
.hl-mps { position: absolute; inset: 0; pointer-events: none; z-index: 4; }   /* ueber den Schildern: die Ringe sitzen links davon im Spieler-Band */
.hl-mp { position: absolute; left: 7px; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; border: 2px solid var(--ink-2); background: var(--paper); animation: hl-in 380ms var(--ease-o) both; animation-delay: var(--d, 0ms); }
.hl-mp.is-spot { border-color: var(--good); }
.hl-mpn { position: absolute; right: calc(100% + 2px); transform: translateY(-50%); padding: 1px 7px 2px; border-radius: var(--r-full); background: var(--paper-2); font-size: var(--t-micro); font-weight: 600; color: var(--ink-2); white-space: nowrap; max-width: 8em; overflow: hidden; text-overflow: ellipsis; animation: hl-fade 300ms var(--ease-o) both; }
.hl-mpn.is-spot { color: var(--good); }

/* ---- Zahlenzeile im Dock --------------------------------------------------------------------------------------- */
.hl-numrow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: var(--s3); }
.hl-numrow[hidden] { display: none; }
.hl-numrow__b { display: flex; justify-content: center; }
.hl-numpre { font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); margin-right: 6px; white-space: nowrap; }
.hl-numrow .numfield__in { width: 8ch; min-width: 0; text-align: left; }

/* ---- Knopf ueber dem Blatt: die Shell legt das Blatt (z 20) ueber alles, das Spiel hebt das Dock darueber ---------- */
.dock { position: relative; z-index: 30; }
.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; }
.dock > button { position: relative; z-index: 1; }
.sheet { max-height: calc(100dvh - 260px); overflow-y: auto; overscroll-behavior: contain; }

/* ---- Das Blatt (Rezept der Familie): Zahl · Vergleich · Haarlinie · Spieler-Satz | Mehr dazu ›  ---------------- */
.hl-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); align-items: baseline; }
.hl-body > * { grid-column: 1 / -1; }
.hl-body .factor { margin: 0; }
.hl-body .factor--spot > span:first-child { white-space: nowrap; font-size: min(var(--t-mega), 11.5vw); }
.hl-body > .hl-like { margin: var(--s2) 0 0; font-size: var(--t-md); font-weight: 500; color: var(--ink); line-height: 1.35; text-wrap: balance; }
.hl-body > .hl-like:empty { display: none; }
.hl-body > #beat, .hl-body > #src { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); align-self: start; }
.hl-body > #beat { grid-column: 1; font-size: var(--t-sm); line-height: 1.35; padding-right: var(--s4); }
.hl-body > #beat[hidden] { display: block; visibility: hidden; }
.hl-body > #src { grid-column: 2; min-height: 0; padding-bottom: 0; text-align: right; white-space: nowrap; font-size: var(--t-sm); line-height: 1.35; }
.hl-why { margin-top: var(--s3); }
.hl-why > summary { cursor: pointer; list-style: none; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); padding: 6px 0; }
.hl-why > summary::-webkit-details-marker { display: none; }
.hl-why > summary::after { content: " ›"; }
.hl-why[open] > summary::after { content: " ‹"; }
.hl-why > summary:hover { color: var(--ink); }
.hl-meta { margin: 0; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.hl-meta > span { display: block; }
.hl-meta .hl-caveat { margin-top: var(--s2); font-size: var(--t-xs); color: var(--ink-3); }
.hl-meta a { color: inherit; text-underline-offset: 3px; }
.sheet { padding-bottom: calc(var(--tap) + var(--s5) + var(--s5) + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .hl-body { grid-template-columns: auto 1fr auto; column-gap: var(--s5); row-gap: var(--s1); align-items: end; }
  .hl-body > .factor { grid-column: 1; grid-row: 1; }
  .hl-body > .hl-like { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; font-size: var(--t-lg); max-width: 36ch; }
  .hl-body > #beat { grid-column: 1; grid-row: 2; margin: 0; padding: 0; border: 0; font-size: var(--t-md); }
  .hl-body > #src { grid-column: 3; grid-row: 1; align-self: start; margin: 0; padding: 0; border: 0; }
  .hl-body > .hl-why { grid-row: 3; }
  .hl-field { grid-template-columns: minmax(0, 1fr) 120px; max-width: 980px; margin-inline: auto; }
}

/* Weiter: Blatt schliesst beschleunigend, die alte Runde blendet aus, die neue gleitet herein */
.sheet:not([data-open]) { transition: transform 280ms cubic-bezier(.5, 0, .75, 0), visibility 0s linear 280ms; }
.stage.is-leave > :is(.hl-head, .hl-field, .hl-done) { opacity: 0; transform: translateY(-8px); transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.stage.is-enter > :is(.hl-head, .hl-field) { animation: hl-enter 460ms var(--ease-o) both; }
.stage.is-enter > .hl-field { animation-delay: 60ms; }
@keyframes hl-enter { from { opacity: 0; transform: translateY(10px); } }

/* ---- Tagesende: fuenf Skalen auf EINER Zehnerskala ------------------------------------------------------------- */
.hl-done { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.hl-done[hidden] { display: none; }
.hl-day { position: relative; flex: 1 1 auto; width: 100%; max-width: 640px; margin-top: var(--s2); min-height: 230px; }   /* #843: wie How sweet? die Buehne fuellt, darunter die Karten der Familie */
.hl-dg { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); pointer-events: none; }
.hl-dg b { position: absolute; left: 0; transform: translateY(-50%); padding-right: 4px; background: var(--paper); font-size: var(--t-micro); font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hl-dc { position: absolute; top: 0; bottom: 0; appearance: none; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: inherit; border-radius: var(--r-sm); }
.hl-dc:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hl-dc__miss { position: absolute; width: 2px; background: var(--accent-line); }
.hl-dc__real { position: absolute; height: 0; border-top: 2.5px solid var(--ink); margin-top: -1px; border-radius: 2px; }
.hl-dc__you { position: absolute; height: 0; border-top: 2.5px dashed var(--accent); margin-top: -1px; }
.hl-dc__f { position: absolute; left: 2px; right: 2px; text-align: center; font-size: var(--t-xs); font-weight: 600; line-height: 1.15; color: var(--ink-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hl-dc.is-dim .hl-dc__real, .hl-dc.is-dim .hl-dc__you, .hl-dc.is-dim .hl-dc__miss { opacity: .38; }
.hl-dc.is-on .hl-dc__f { color: var(--ink); }
.hl-dc.is-spot .hl-dc__f { color: var(--good); }
.hl-dtitle { position: absolute; left: 50%; top: 0; transform: translateX(-50%); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 12px 4px; border-radius: var(--r-full); background: var(--paper-2); font-size: var(--t-sm); font-weight: 600; color: var(--ink); pointer-events: none; }
.hl-dtag { left: 0; right: auto; }
.hl-dtag[data-side="l"] { transform: translate(-100%, -50%); }
.hl-day.is-switch .hl-dc.is-on .hl-dc__real { animation: hl-grow 420ms var(--ease-o) both; transform-origin: center; }
.hl-day.is-switch .hl-dc.is-on .hl-dc__you { animation: hl-grow 360ms var(--ease-o) 100ms both; transform-origin: center; }
.hl-day.is-switch .hl-dtag { animation: hl-fade 300ms var(--ease-o) 140ms both; }
@keyframes hl-grow { from { transform: scaleX(0); } }
@keyframes hl-fade { from { opacity: 0; } }
/* Tageszahl und «Besser als n %» (game.js dayEnd) auf EINER Zeile, wie in allen Spielen; Beschriftung + Spruch bleiben im DOM */
.hl-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: var(--s3); row-gap: 0; }
.hl-tot { margin: 0; }
.hl-total .mega { display: inline; font-size: var(--t-xl); }
.hl-total .daybeat { margin: 0; }
.hl-total .label { display: none; }
.hl-line-preview { display: none; }
@media (max-width: 899px) {
  .hl-total .mega { font-size: var(--t-lg); }
  .hl-total .daybeat { font-size: var(--t-sm); }
  .hl-total.is-spot .mega { font-size: var(--t-sm); }
  .hl-total.is-spot { column-gap: 6px; }
}
@media (max-width: 380px) { .hl-total .daybeat { font-size: var(--t-xs); } .hl-total { column-gap: var(--s2); } }
.pips .pip[data-hot] { transform: scale(1.8); }
.pips .pip { transition: transform var(--d-mid) var(--ease-o); }
.hl-share-note { margin: 0; font-size: var(--t-sm); color: var(--ink-3); text-align: center; min-height: 1.2em; }

/* Kurze Schirme: das Feld gibt zuerst nach, nie der Text */
@media (max-height: 700px) {
  .hl-read__n { font-size: var(--t-xl); }
  /* im Reveal gibt der Kopf und das Blatt Platz her, damit die Skala mit beiden Linien sichtbar bleibt */
  .hl-body > .hl-why { display: none; }
  .hl-body > .hl-like { font-size: var(--t-sm); }
  .app[data-rv] .hl-read__n { font-size: var(--t-xl); }
  .app[data-rv] .hl-read__pre { font-size: var(--t-md); }
  .hl-body > #beat, .hl-body > #src { margin-top: var(--s3); padding-top: var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
  .hl-people.is-in i, .stage.is-enter > *, .hl-day.is-switch * { animation: none !important; }
}