/* games-703 · shared shell (Neubau #709)
   ------------------------------------------------------------------------
   THESIS: Ein Reveal ist eine Zahl, die man versteht, bevor man liest. Alles
   darunter ist eine ruhige Liste, keine Sammlung von Karten. Refused: der
   Hero-Metrik-Baukasten (grosse Zahl, Label, Stat-Kacheln, Akzent ueberall)
   und das Blatt, das hochgeschoben wird und dann einfach dasteht.
   OWN-WORLD: Weisses Blatt mit Griff, eine Schrift (Onest), drei Tinten,
   ein Akzent je Spiel aus einem Farbton gerechnet, Haarlinien statt Kaesten,
   Ziffern tabellarisch, Ecken 28/16/10.
   STORY: Der Spieler sieht sofort, wie weit er daneben lag; liest im zweiten
   Blick, was die Wahrheit ist; im dritten, wie er selbst haette rechnen
   koennen. Dann drueckt er den einen Knopf.
   FIRST VIEWPORT (Reveal): Blatt faehrt aus dem Fuss, Griff oben, die Zahl
   zaehlt in 640 ms hoch, das Richtungswort erscheint daneben, dann kommen
   die Zeilen im Abstand von 55 ms von unten: der Satz mit der Wahrheit, die
   Verteilung, der Rechenweg, der Fakt, die Quelle. Der Knopf sitzt am Fuss.
   FORM: Mobile-App-Onboarding, vom Auftraggeber gepinnt (#709); der Wurf
   c472e83b (impeccable concept-seed) tritt hinter das Pinning zurueck.
   FINISH: unreviewed and undocumented is unfinished; this build ends with
   the finish review, the verdict, DESIGN.md, and every shipping raster
   carrying its provenance.
   ------------------------------------------------------------------------
   Jedes Spiel lebt in .stage und darf dort alles. Ausserhalb von .stage
   nichts umbauen. Die Reveal-Bausteine unten sind die EINE Rangfolge; ein
   Spiel fuellt sie, keins baut sie neu. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "tnum" 1;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  caret-color: var(--accent);
  accent-color: var(--accent);
}
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--accent-line); color: var(--ink); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }

/* ---- App-Rahmen -------------------------------------------------------- */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  padding:
    max(var(--s3), env(safe-area-inset-top))
    max(var(--s5), env(safe-area-inset-right))
    max(var(--s4), env(safe-area-inset-bottom))
    max(var(--s5), env(safe-area-inset-left));
  overflow: hidden;
}

/* ---- Topbar: Name links, Zustand rechts ------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 36px;
  flex: 0 0 auto;
}
.topbar__name {
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.topbar__meta {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--ink-3);
}

/* ---- Marken-Zeile: die Hauptdomain, immer oben (Esteban #721) ------------
   Unter jeder Topbar steht roughly.is (Link zurueck auf den Hub) und rechts die
   Tagesnummer (#244). Wird von game.js eingesetzt, kein Spiel fasst sie an. */
/* ---- Rechner / grosser Bildschirm (Esteban #725, alle Spiele) ---------------------------
   Handy-first bleibt (390 px Referenz). Ab 900 x 700 px bekommt jedes Spiel die breite Spalte;
   Knopf-Zeile und Tipp bleiben in Handy-Breite. Was ein Spiel auf seiner Buehne damit macht,
   steht in seiner eigenen CSS (Where?: Karte folgt dem Kasten). */
@media (min-width: 900px) and (min-height: 700px) {
  .app { max-width: 780px; }
  .dock { max-width: 460px; margin-inline: auto; width: 100%; }
}
.brandbar {
  /* #725: drei Spalten, Haus links, Punkte in der Mitte, Tage rechts */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: var(--s3); min-height: 22px; margin-top: -2px;
  flex: 0 0 auto;
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-3);
}
.brandbar__home {
  display: inline-flex; align-items: center; gap: 7px;
  color: inherit; text-decoration: none; border-radius: var(--r-full);
  transition: color var(--d-fast) var(--ease);
}
.brandbar__home svg { width: 12px; height: 12px; display: block; }
.brandbar__home:hover, .brandbar__home:focus-visible { color: var(--ink); outline: none; }
.brandbar__day { font-variant-numeric: tabular-nums; }
.brandbar__nav { display: inline-flex; align-items: center; gap: 2px; justify-self: end; }
/* Die fuenf Punkte in der Marken-Zeile: doppelt so gross wie in der Topbar (Esteban #725) */
.pips--brand { gap: 8px; justify-self: center; }
.pips--brand .pip { width: 11px; height: 11px; }
.pips--brand .pip[data-now] { transform: scale(1.25); }
/* Schalter in der Spiel-Zeile (#725): sitzen in der Topbar-Meta vor dem Neustart */
.topbar__tools { display: inline-flex; align-items: center; gap: 2px; }
.topbar__tools .langbtn, .topbar__tools .themebtn, .topbar__tools .roombtn { height: 30px; min-width: 30px; }
/* Rechtsbuendig mit dem Tages-Pfeil: beide Symbol-Mitten 6 px vom rechten Rand (Esteban #725) */
.topbar__tools .themebtn { margin-right: -9px; }
.brandbar__nav { margin-right: -9px; width: 76px; justify-content: space-between; }  /* feste Breite: «‹» faellt auf die EN-Linie, «›» auf die Mond-Linie, egal wie breit die Tagesnummer ist */
.brandbar__step {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: var(--r-full); color: var(--ink-3); text-decoration: none;
  font-size: 17px; line-height: 1;
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
a.brandbar__step:hover, a.brandbar__step:focus-visible { color: var(--ink); background: var(--paper-2); outline: none; }
.brandbar__step[data-off] { opacity: .25; }
/* Rueckweg (Esteban #724: schneller zurueck auf die Startseite): der Winkel
   macht aus dem Domain-Wort einen sichtbaren Link, die Zeile ist 32 px hoch. */
.brandbar__home {
  /* #725 (vierte Runde, Esteban «flush + geiler Hover»): die Pille beginnt EXAKT an der Linie des
     Spielnamens und ist 30 px hoch wie die Schalter rechts. Hover: die Pille fuellt sich mit dem
     Akzent des Spiels, hebt sich, und ein Pfeil «←» schiesst von links herein, waehrend der Text
     nach rechts gleitet; Federung ueber die Kurve, nicht ueber Laenge. */
  /* Fuenfte Runde (Esteban): der TEXT «roughly.is» steht in Ruhe UND beim Hover exakt unter dem
     Spielnamen. Ruhe: Pille um ihr Polster nach links (Text bei 24 px). Hover: Pille waechst weiter
     nach links in den Rand (bis 4 px vor der Kante), der Pfeil fuellt genau diesen Zuwachs, der
     Text bleibt stehen. */
  min-height: 30px; padding: 0 11px; margin-left: -11px; gap: 0;
  background: var(--paper-2); color: var(--ink-2); font-weight: 600;
  will-change: transform;
  transition: background var(--d-mid) var(--ease), color var(--d-mid) var(--ease), margin-left .28s cubic-bezier(.2, .9, .25, 1.15), padding-left .28s cubic-bezier(.2, .9, .25, 1.15),
              transform var(--d-mid) var(--ease), box-shadow var(--d-mid) var(--ease);
}
.brandbar__arrow {
  display: inline-grid; place-items: center; width: 0; height: 16px; opacity: 0; overflow: visible;
  transform: translateX(-14px) scale(.5);
  transition: width .28s cubic-bezier(.2, .9, .25, 1.15), opacity .18s var(--ease),
              transform .34s cubic-bezier(.2, 1.1, .25, 1.35);
}
.brandbar__arrow svg { width: 15px; height: 15px; display: block; }
.brandbar__home:hover, .brandbar__home:focus-visible {
  margin-left: -20px; padding-left: 4px;
  background: var(--accent); color: var(--accent-ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px var(--accent), 0 1px 0 var(--accent-line);
}
.brandbar__home:hover .brandbar__arrow, .brandbar__home:focus-visible .brandbar__arrow { width: 16px; opacity: 1; transform: none; }
.brandbar__home:active { transform: translateY(0) scale(.98); }
@media (prefers-reduced-motion: reduce) { .brandbar__home, .brandbar__arrow { transition: none; } }
/* Schalter Sprache + Thema (Esteban #724), dieselbe Stille wie die Tages-Pfeile */

.themebtn, .langbtn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px;
  border-radius: var(--r-full); color: var(--ink-3);
  font: inherit; font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.themebtn:hover, .langbtn:hover, .themebtn:focus-visible, .langbtn:focus-visible { color: var(--ink); background: var(--paper-2); outline: none; }
.themebtn svg { display: block; }
/* Sprach-Menue (#725): Knopf mit Code + Winkel, Liste als kleines Blatt darunter. */
.brandbar__home { justify-self: start; }
.langmenu { position: relative; display: inline-flex; }
.langbtn { grid-auto-flow: column; gap: 3px; }
.langbtn__chev { width: 10px; height: 10px; display: block; }
.langmenu__list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 150px; padding: 4px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}
.langmenu__list[hidden] { display: none; }
.langmenu__item {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px;
  border-radius: 10px; font: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); text-align: left;
}
.langmenu__item:hover, .langmenu__item:focus-visible { background: var(--paper-2); color: var(--ink); outline: none; }
.langmenu__item[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.langmenu__code { font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em; color: var(--ink-3); min-width: 22px; }
/* Zwei Sprachen im selben HTML: nur die eine ist sichtbar (boot.js setzt <html lang>). */
html[lang="de"] [data-l="en"], html:not([lang="de"]) [data-l="de"] { display: none !important; }
/* Challenge- oder Archiv-Zeile unter der Marke */
.challenge {
  margin: var(--s2) 0 0; padding: var(--s2) var(--s4);
  border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent);
  font-size: var(--t-sm); font-weight: 500; text-align: center;
  flex: 0 0 auto;
}
.challenge b { font-weight: 700; }

/* ---- roughly+ (#728): das Wort traegt den Regenbogen der zehn Spiel-Farbtoene und er LAEUFT (Esteban:
   animiert), dieselbe Bewegung wie .rb__over auf der Landing (Verlauf 200 % breit, faehrt durch, 3.2 s).
   --acl/--acc = dieselbe Formel wie --accent in tokens.css (hell/dunkel). Der Verlauf endet mit seiner
   Startfarbe, darum ist der Lauf nahtlos. */
:root { --acl: 50%; --acc: 0.17; --rb: linear-gradient(90deg, oklch(var(--acl) var(--acc) 40), oklch(var(--acl) var(--acc) 262), oklch(var(--acl) var(--acc) 150), oklch(var(--acl) var(--acc) 300), oklch(var(--acl) var(--acc) 75), oklch(var(--acl) var(--acc) 350), oklch(var(--acl) var(--acc) 235), oklch(var(--acl) var(--acc) 178), oklch(var(--acl) var(--acc) 205), oklch(var(--acl) var(--acc) 320), oklch(var(--acl) var(--acc) 40)); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --acl: 78%; --acc: 0.14; } }
html[data-theme="dark"] { --acl: 78%; --acc: 0.14; }
@keyframes rb-run { from { background-position: 0 0; } to { background-position: -200% 0; } }
.plus {
  font-weight: 700; white-space: nowrap;
  display: inline-block; line-height: 1.25; padding: 0 .04em .06em; margin: 0 -.04em -.06em;   /* Unterlaengen (g, y) bleiben im Farbbereich */
  background: var(--rb); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: rb-run 3.2s linear infinite;
}
/* Regenbogen-Rand (Ring wie auf der Landing, hier als Linie): Flaeche in Papier, Rand im Verlauf, laeuft mit. */
.rbring {
  border: 1.5px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--rb) border-box;
  background-size: auto, 200% 100%;
  animation: rb-run 9s linear infinite;   /* Esteban #728: der Rand laeuft langsam, das Wort behaelt sein Tempo */
}
/* Das Wort ohne Regenbogen, wo schon einer im Bild ist (Esteban: nicht viermal). */
.plusq { font-weight: 700; white-space: nowrap; color: var(--ink); }
a.plus, a.plusq { text-decoration: none; }
/* roughly+ mit Wirkung (.plusfx, an einem <a> oder an einem <span>): Regenbogen in Ruhe (Variante B). Hover = Halo + schnellere Farben, beides
   WEICH: die schnelle Schicht liegt als zweite Kopie darueber und blendet ein/aus (Tempo kann man nicht
   ueberblenden, zwei Kopien schon), der Halo blendet mit. Zurueck ebenso sanft. */
.plusfx { position: relative; display: inline-block; isolation: isolate; background: none; color: var(--ink); -webkit-text-fill-color: currentColor; animation: none; line-height: 1.25; padding: 0 .04em .06em; margin: 0 -.04em -.06em; }
.plusfx .plus__ink { position: relative; opacity: 0; }
.plusfx .plus__rb, .plusfx .plus__rb2 {
  position: absolute; inset: 0; pointer-events: none; white-space: nowrap;
  padding: 0 .04em .06em;
  background: var(--rb); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: rb-run 3.2s linear infinite;
}
/* Einfahrt wie bei der weissen Pille: dieselbe Kurve (langsamer Start, dann Zug), 1.1 s, hin und zurueck */
/* Hinein und hinaus dieselbe Kurve (0.45 s, kurzer Moment, dann Zug), damit das Weggehen so weich ist wie das
   Kommen. Der Halo waechst aus der MITTE des Worts heraus (Skalierung von 35 % auf 100 %), nicht als Flaeche. */
.plusfx .plus__rb2 { animation-duration: 1.1s; opacity: 0; transition: opacity .45s cubic-bezier(.5, 0, .15, 1); }
.plusfx::after {
  content: ""; position: absolute; inset: -4px -10px; z-index: -1; border-radius: var(--r-full);
  background: var(--rb); background-size: 200% 100%; filter: blur(12px); opacity: 0;
  transform: scale(.35); transform-origin: center;
  animation: rb-run 3.2s linear infinite;
  transition: opacity .45s cubic-bezier(.5, 0, .15, 1), transform .45s cubic-bezier(.5, 0, .15, 1);
}
.plusfx:hover::after, .plusfx:focus-visible::after { opacity: .24; transform: scale(1); }
html[data-theme="light"] .plusfx:hover::after, html[data-theme="light"] .plusfx:focus-visible::after { opacity: .2; }
.plusfx:hover .plus__rb2, .plusfx:focus-visible .plus__rb2 { opacity: 1; }
.plusfx:focus-visible { outline: none; }
/* roughly+ in Tinte (wo schon ein Regenbogen im Bild ist): Hover = der Regenbogen faehrt langsam von links
   ins Wort, wie auf der Pille «roughly+ entdecken» und in der Landing-Navigation; Verlassen = faehrt hinaus. */
a.plusq { position: relative; display: inline-block; color: var(--ink); line-height: 1.25; padding: 0 .04em .06em; margin: 0 -.04em -.06em; }
a.plusq .plusq__rb {
  position: absolute; inset: 0; pointer-events: none; white-space: nowrap; padding: 0 .04em .06em;
  background: var(--rb); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: rb-run 3.2s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, #000 0 40%, transparent 60% 100%); mask-image: linear-gradient(90deg, #000 0 40%, transparent 60% 100%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position 1.1s cubic-bezier(.45, .05, .2, 1), mask-position 1.1s cubic-bezier(.45, .05, .2, 1);
}
a.plusq .plusq__ink {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 40%, #000 60% 100%); mask-image: linear-gradient(90deg, transparent 0 40%, #000 60% 100%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position 1.1s cubic-bezier(.45, .05, .2, 1), mask-position 1.1s cubic-bezier(.45, .05, .2, 1);
}
a.plusq:hover .plusq__rb, a.plusq:focus-visible .plusq__rb, a.plusq:hover .plusq__ink, a.plusq:focus-visible .plusq__ink { -webkit-mask-position: 0 0; mask-position: 0 0; }
a.plusq:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .plusfx .plus__rb, .plusfx .plus__rb2, .plusfx::after, a.plusq .plusq__rb, a.plusq .plusq__ink { transition: none; animation: none !important; } }
/* Regenbogen-Rand (Ring wie auf der Landing, hier als Linie): Flaeche in Papier, Rand im Verlauf, laeuft mit. */
/* ---- Archiv-Zeile (#728, Esteban dritte Runde: etwas groesser, schoener): eine Pille mit Regenbogen-Rand
   unter der Marken-Zeile. Datum in Tinte, Satz in Tinte 2, roughly+ laeuft. ---- */
.archline {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  margin: var(--s3) auto 0; padding: 8px 16px 9px; width: fit-content; max-width: 100%;
  border-radius: var(--r-full); flex: 0 0 auto;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); line-height: 1.3; text-align: center;
}
.archline b { font-weight: 600; color: var(--ink); }
/* Zeile 2 (Esteban #728): grau, eine Stufe kleiner, das Wort bleibt am Stueck */
.archline > span { font-size: var(--t-xs); color: var(--ink-2); white-space: normal; }
.archline > span .plus { white-space: nowrap; }
/* Am gesperrten Archivtag: nur EIN Regenbogen (das Wort), die Pille bleibt still. */
.archline--quiet { background: var(--paper-2); flex-direction: row; gap: 6px; }
.archline .plus { font-size: 1.02em; }

/* ---- Archiv-Feldchen (#728, Esteban: wie die Batterie-Warnung, Spiel dahinter sichtbar, kein Schleier).
   Dritte Runde: schoener. Weiche Karte, roughly+ gross und laufend, der Weg zu roughly+ als Pille mit
   Regenbogen-Rand, «Lieber heute spielen» leise darunter. Der Rahmen faengt Tipps neben dem Feld ab. ---- */
.gate { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--s5); }
.gate__card {
  width: 344px; max-width: 100%; padding: var(--s6) var(--s5) var(--s5);
  background: var(--paper); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(14, 14, 17, .22), 0 4px 14px rgba(14, 14, 17, .08);
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  text-align: center;
  animation: gate-in var(--d-mid) var(--ease-o) both;
}
.gate__card:focus { outline: none; }
@keyframes gate-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.gate__kicker { margin: 0; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); letter-spacing: .01em; }
.gate__title { margin: 0; font-size: 2.1rem; letter-spacing: -0.035em; line-height: 1.05; }
.gate__text { margin: 2px 0 var(--s4); font-size: var(--t-md); line-height: 1.4; color: var(--ink-2); }
.gate__more {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 52px; padding: 0 28px; border-radius: var(--r-full);
  background: var(--ink); color: var(--paper);
  font-size: var(--t-md); font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform var(--d-fast) var(--ease);
}
/* Hover (Esteban #728): der Regenbogen faehrt langsam von links in die Pille, wie beim Abschluss-Knopf
   der Blog-Posts (Maske gleitet 1.1 s, der Verlauf laeuft darunter durch); Verlassen = Zug faehrt hinaus. */
.gate__more::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--rb); background-size: 200% 100%;
  animation: rb-run 3.2s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, #000 0 40%, transparent 60% 100%); mask-image: linear-gradient(90deg, #000 0 40%, transparent 60% 100%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position 1.1s cubic-bezier(.45, .05, .2, 1), mask-position 1.1s cubic-bezier(.45, .05, .2, 1);
}
.gate__more:hover::before, .gate__more:focus-visible::before { -webkit-mask-position: 0 0; mask-position: 0 0; }
.gate__more:hover, .gate__more:focus-visible { transform: translateY(-1px); outline: none; }
.gate__more:active { transform: scale(.98); }
.gate__more .plusq { color: inherit; }
@media (prefers-reduced-motion: reduce) { .gate__more::before { animation: none; transition: none; } }
.gate__ok {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 var(--s4);
  border-radius: var(--r-full); font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); text-decoration: none; cursor: pointer;
}
.gate__ok:hover, .gate__ok:focus-visible { color: var(--ink); background: var(--paper-2); outline: none; }

/* ---- Werkzeugzeile ------------------------------------------------------ */
.tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); width: 100%;
  padding-bottom: var(--s3);
}
.tools:empty { display: none; }
.tools > :only-child { margin-inline: auto; }

/* ---- Nochmal spielen ---------------------------------------------------- */
.replay {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
  width: 32px; height: 32px; margin-right: -6px;
  border-radius: var(--r-full);
  color: var(--ink-3);
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.replay:hover, .replay:focus-visible { color: var(--ink); background: var(--paper-2); outline: none; }
.replay:active { transform: rotate(-90deg); transition: transform var(--d-mid) var(--ease-o); }

/* ---- Fortschritt: Punkte ---------------------------------------------- */
.pips { display: flex; gap: 5px; }
.pip {
  width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--paper-3);
  transition: background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.pip[data-on]  { background: var(--line-strong); }
.pip[data-now] { background: var(--accent); transform: scale(1.4); }
/* #725: Abschluss = Aufblitzen im Akzent + Ring, der nach aussen laeuft; der naechste Punkt federt herein */
.pip { position: relative; }
.pip[data-done] { animation: pipdone .55s var(--ease) both; }
.pip[data-done]::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  border: 2px solid var(--accent); opacity: 0; animation: pipring .7s cubic-bezier(.2, .7, .2, 1) both;
}
.pip[data-enter] { animation: pipenter .5s cubic-bezier(.2, 1.2, .3, 1.4) both; }
@keyframes pipdone { 0% { background: var(--accent); transform: scale(1.4); } 45% { background: var(--accent); transform: scale(1.9); } 100% { background: var(--line-strong); transform: scale(1); } }
@keyframes pipring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes pipenter { 0% { transform: scale(.4); opacity: .4; } 100% { transform: scale(1.4); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pip[data-done], .pip[data-done]::after, .pip[data-enter] { animation: none; } }

/* ---- Buehne ------------------------------------------------------------ */
.stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--s4);
  min-height: 0;
  padding-block: var(--s4);
}
.stage > .play { flex: 1 1 auto; width: 100%; min-height: 0; }

/* ---- Prompt: EIN kurzer Satz ------------------------------------------- */
.prompt {
  flex: 0 0 auto;
  text-align: center;
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
  max-width: 24ch;
  margin-inline: auto;
}
.prompt small {
  display: block;
  margin-top: var(--s1);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}

/* ---- Die eine grosse Zahl --------------------------------------------- */
.mega {
  font-size: var(--t-mega);
  font-weight: 700;
  letter-spacing: var(--tight);
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
.unit { font-size: .32em; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }

/* ---- Dock: genau EIN Primaerknopf ------------------------------------- */
.dock {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: var(--s2);
  padding-top: var(--s3);
}
[hidden] { display: none !important; }

.btn {
  appearance: none; border: 0; cursor: pointer;
  min-height: 52px;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em;
  transition: transform var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease),
              background var(--d-fast) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .35; pointer-events: none; }
.btn--ghost {
  background: transparent; color: var(--ink-2);
  font-weight: 500; min-height: 44px; padding: var(--s2) var(--s4);
}
.btn--quiet { background: var(--paper-2); color: var(--ink); }
:where(.btn, .share, .hintbtn, .numfield, .replay):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* ======================================================================
   DAS BLATT (Reveal-Sheet): faehrt aus dem Fuss, traegt einen Griff
   ====================================================================== */
.sheet {
  position: absolute; top: auto; right: 0; bottom: 0; left: 0; z-index: 20;
  padding: var(--s6) var(--s5) max(var(--s5), env(safe-area-inset-bottom));
  background: var(--paper);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-up);
  transform: translateY(102%);
  transition: transform var(--d-slow) var(--ease-o);
}
.sheet[data-open] { transform: translateY(0); }
/* Der Griff: sagt "das ist ein Blatt, das kam von unten". */
.sheet::after {
  content: ""; position: absolute; top: 10px; left: 50%;
  width: 36px; height: 5px; margin-left: -18px;
  border-radius: var(--r-full); background: var(--line);
}

/* ---- Gestaffelter Auftritt der Zeilen ----------------------------------
   Die Zeilen kommen NACH dem Blatt, im Abstand von 55 ms, 10 px von unten.
   Ohne JS, ohne Eingriff ins Spiel. Bloecke mit [data-stage] steuern ihren
   Auftritt selbst (WHERE) und werden hier uebersprungen. */
.sheet[data-open] > :not(.sheet__scroll, .sheet__body, .sheet__fade, .sheet__foot, [data-stage], [hidden]),
.sheet[data-open] :is(.sheet__scroll, .sheet__body, #roundBlock, #doneBlock) > :not([data-stage], [hidden]) {
  animation: rv-in 460ms var(--ease-o) both;
  animation-delay: calc(140ms + var(--rv-i, 0) * 55ms);
}
.sheet[data-open] :nth-child(1) { --rv-i: 0; }
.sheet[data-open] :nth-child(2) { --rv-i: 1; }
.sheet[data-open] :nth-child(3) { --rv-i: 2; }
.sheet[data-open] :nth-child(4) { --rv-i: 3; }
.sheet[data-open] :nth-child(5) { --rv-i: 4; }
.sheet[data-open] :nth-child(6) { --rv-i: 5; }
.sheet[data-open] :nth-child(7) { --rv-i: 6; }
.sheet[data-open] :nth-child(8) { --rv-i: 7; }
.sheet[data-open] :nth-child(9) { --rv-i: 8; }
.sheet[data-open] :nth-child(n+10) { --rv-i: 9; }
@keyframes rv-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ======================================================================
   DIE RANGFOLGE IM BLATT (Squint-Test: man sieht genau EINS, die Zahl)
     1  .factor        die Zahl mit dem Wort daneben
     2  der Satz       .sheet__verdict / .said / .sheet__line / .rv__truth
     3  .beat + .dist  wo man unter den anderen liegt, mit Kurve
     4  .napkin        der Rechenweg, als Zeile, ohne Kasten
     5  .sheet__fact   der Fakt, leiser
     6  .sheet__src    die Quelle, eine tippbare Zeile
   FARB-REGEL: Text nur in --ink / --ink-2 / --ink-3. Der Akzent gehoert
   im Blatt genau EINER Sache: der eigenen Marke in der Kurve.
   ====================================================================== */

/* 1 · Die Zahl. */
.factor {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--s3);
  margin: 0 0 var(--s2);
  font-size: var(--t-mega); font-weight: 700; letter-spacing: var(--tight);
  line-height: .95; font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* Unter der Zahl gibt es GENAU EINE Textbehandlung: 17 px, normal, Tinte 2.
   Kein Fett im Satz, keine zweite Groesse, keine Farbe. Die Hierarchie ist
   der Sprung von der Zahl zum Rest, nichts sonst (Esteban #709). */
.factor__dir, .sheet__verdict, .said, .sheet__line, .rv__truth, .truthline, .belong,
.sg-said, .crowdline, .beat, .sheet__fact, .napkin, .introline {
  font-size: var(--t-md); font-weight: 400; letter-spacing: 0; line-height: 1.4;
  color: var(--ink-2); text-wrap: pretty;
}
/* Das Urteil ist die eine Zeile in voller Tinte. */
.sheet__verdict, .rv__truth, .truthline { color: var(--ink); font-weight: 500; }
/* Der Fakt-Absatz ist aus dem Blatt raus (Esteban #709): die Quelle ist ein
   Link mit dem Artikelnamen, wer mehr will, tippt. */
.sheet__fact { display: none; }
:is(.sheet__verdict, .said, .sheet__line, .rv__truth, .belong, .sg-said, .beat, .napkin) b {
  font-weight: 400; color: inherit;
}
.factor--spot { color: var(--good); }
.factor--spot .factor__dir { color: var(--good); }

/* 2 · Der Satz: die eigene Antwort neben der Wahrheit. */
.sheet__verdict, .said, .sheet__line, .rv__truth, .truthline, .belong, .sg-said, .crowdline {
  margin: 0 0 var(--s2);
}

/* 3 · Die Einordnung und die Kurve. */
.beat { margin: 0; font-variant-numeric: tabular-nums; }
.dist { position: relative; width: 100%; margin: var(--s3) 0 var(--s4); }
.dist__svg { width: 100%; height: 44px; display: block; overflow: visible; }
.dist__area { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: .7; }
.dist__truth { stroke: var(--ink); stroke-width: .9; }
.dist__mine  { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 2.5 2; }
/* Zwei Zeilen Platz: die eigene Marke weicht in die zweite, wenn sie sonst
   auf einer Quantil-Marke laege. Die Hoehe ist immer da, damit nichts springt. */
.dist__axis { position: relative; height: 2.4em; margin-top: 4px; }
.dist__tick {
  position: absolute; transform: translateX(-50%);
  font-size: var(--t-xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dist__tick.is-truth, .dist__tick.is-mine { color: var(--ink-2); }
.dist__tick.is-row2 { top: 1.15em; }
.dist__note { display: none; }   /* kein Simulations-Hinweis (Esteban #709) */

/* 4 · Der Rechenweg: eine Zeile mit Haarlinie darueber, kein Kasten. */
.napkin { display: none; }   /* der Rechenweg ist aus dem Blatt raus (Esteban #709) */
.napkin__label { display: none; }

/* 5 · Der Fakt: leiser, derselbe Rhythmus. */
.sheet__fact { margin: 0; padding: var(--s2) 0 var(--s3); }
.napkin + .sheet__fact { padding-top: 0; }

/* 6 · Die Quelle: eine tippbare Zeile mit Winkel rechts. */
.sheet__src {
  display: block; width: 100%; min-height: 32px; padding: var(--s2) 0 0;
  font-size: var(--t-xs); font-weight: 500; letter-spacing: 0;
  color: var(--ink-3); text-decoration: none;
  transition: color var(--d-fast) var(--ease);
}
.sheet__src::after { content: " \203A"; }
.sheet__src:hover, .sheet__src:focus-visible { color: var(--ink); outline: none; }

/* Knopf im Blatt: volle Breite, am Fuss. */
.sheet .btn { display: block; width: 100%; margin-top: var(--s3); flex: 0 0 auto; }
.sheet__fade {
  flex: 0 0 auto; position: relative; z-index: 1;
  height: 28px; margin-top: -28px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--paper));
}

/* ---- Tipp: einer pro Tag --------------------------------------------- */
.hintbtn {
  appearance: none; cursor: pointer; border: 0;
  padding: 0 var(--s4); min-height: 36px;
  border-radius: var(--r-full);
  background: var(--paper-2); color: var(--ink-2);
  font-size: var(--t-sm); font-weight: 500;
  transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.hintbtn:hover:not(:disabled) { color: var(--ink); }
.hintbtn:disabled { opacity: .5; cursor: default; }
.hintbox, .hint {
  margin: var(--s2) 0 0; padding: 0;
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45;
  text-align: center; text-wrap: balance;
}

/* ---- Zahleneingabe neben der Geste ------------------------------------ */
.numfield {
  display: inline-flex; align-items: baseline; gap: var(--s2);
  min-height: 44px; padding: var(--s2) var(--s4);
  background: var(--paper-2);
  border: 0; border-radius: var(--r-full);
  transition: box-shadow var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.numfield:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.numfield__in {
  appearance: none; border: 0; background: transparent; padding: 0;
  width: 6ch; min-width: 6ch; max-width: 11ch; field-sizing: content;
  color: var(--ink); font: inherit; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right;
}
.numfield__in:focus { outline: none; }
.numfield__in::placeholder { color: var(--ink-3); font-weight: 400; }
.numfield__unit { font-size: var(--t-sm); color: var(--ink-3); font-weight: 500; }

/* ---- Teilen ------------------------------------------------------------- */
.share {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  appearance: none; cursor: pointer;
  min-height: 52px; padding: var(--s3) var(--s5);
  border: 0; border-radius: var(--r-full);
  background: var(--ink); color: var(--paper);
  font-size: var(--t-md); font-weight: 600;
  transition: transform var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease);
}
.share:active { transform: scale(.98); }
.share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
             stroke-linecap: round; stroke-linejoin: round; }
.share[data-done] { background: var(--good); color: var(--good-ink); }

/* ---- Tagesabschluss: alle Runden als Liste ----------------------------- */
.summary { display: flex; flex-direction: column; width: 100%; }
.srow {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-top: 1px solid var(--line);
}
.srow:last-child { border-bottom: 1px solid var(--line); }
.srow__what { font-size: var(--t-md); color: var(--ink); line-height: 1.3; }
.srow__f {
  font-size: var(--t-md); font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--ink);
}
.srow__f[data-dir="low"]::before  { content: '‹ '; color: var(--ink-3); font-weight: 400; }
.srow__f[data-dir="high"]::before { content: '› '; color: var(--ink-3); font-weight: 400; }
.srow__f[data-dir="spot"] { color: var(--good); }

/* ---- Regel-Linie mit Beschriftung --------------------------------------- */
.rule { position: relative; width: 100%; border-top: 1px dashed var(--line-strong); }
.rule::after {
  content: attr(data-label);
  position: absolute; top: -.75em; left: 0;
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-3);
  background: var(--paper); padding-right: var(--s2);
}

/* ---- Kleinteile ---------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 4px var(--s3); border-radius: var(--r-full);
  background: var(--paper-2); color: var(--ink-2);
  font-size: var(--t-xs); font-weight: 500;
}
.chip--accent { background: var(--accent-soft); color: var(--accent); }
.label { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); }
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Motion-Respekt ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---- Kurze Buehne (Landscape-Handy) -------------------------------------- */
@media (max-height: 620px) {
  :root { --t-mega: 2.75rem; }
  .stage { gap: var(--s3); padding-block: var(--s2); }
  .prompt { font-size: var(--t-md); }
  .sheet { padding-top: var(--s5); }
}

/* Alte Reveal-Klassen aus #703, damit nichts bricht */
.rv { display: flex; flex-direction: column; gap: var(--s2); }
.rv__head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.rv__num { font-size: var(--t-mega); font-weight: 700; letter-spacing: var(--tight); line-height: .95;
           font-variant-numeric: tabular-nums; color: var(--ink); }
.rv__num--spot { color: var(--good); }
.rv__dir { font-size: var(--t-md); font-weight: 500; color: var(--ink-2); }
.rv__mine { font-size: var(--t-sm); color: var(--ink-3); }
.rv__rule { height: 1px; background: var(--line); margin: var(--s4) 0 0; }

/* ---- Geister-Hand (#721): zeigt die Geste vor, bis der Spieler anfasst ---- */
.ghost {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  width: 0; height: 0; opacity: 0;
  transition: opacity var(--d-mid) var(--ease);
}
.ghost[data-on] { opacity: 1; }
.ghost svg {
  position: absolute; left: -10px; top: -6px; width: 44px !important; height: 52px !important; max-width: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  transition: transform var(--d-fast) var(--ease);
  transform-origin: 30% 20%;
}
.ghost__hand { fill: var(--paper); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.ghost[data-press] svg { transform: scale(.88) translate(2px, 3px); }
.ghost__ring {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px;
  border-radius: var(--r-full); border: 2px solid var(--accent);
  opacity: 0; transform: scale(.4);
  transition: opacity var(--d-fast) var(--ease), transform var(--d-mid) var(--ease-o);
}
.ghost[data-press] .ghost__ring { opacity: .9; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .ghost { display: none; } }

/* Easter Egg (#721): eine leise Zeile unter der Zahl */
.egg { margin: calc(-1 * var(--s2)) 0 var(--s2); font-size: var(--t-sm); font-weight: 600; color: var(--accent); }


/* Einheiten-/Waehrungs-Knopf (#730). Bleibt fuer Spiele, die spaeter doch einen
   eigenen Knopf wollen; How expensive? nutzt stattdessen die Anzeigen selbst. */
.unithost { display: inline-flex; align-items: center; }
.unitbtn {
  font: inherit; font-size: .72rem; font-variant-numeric: tabular-nums;
  line-height: 1; padding: .32em .55em; min-width: 2.9em;
  border: 1px solid var(--line); border-radius: .5em;
  background: transparent; color: var(--ink-2); cursor: pointer; opacity: .8;
  transition: opacity .15s ease, border-color .15s ease;
}
.unitbtn:hover, .unitbtn:focus-visible { opacity: 1; border-color: var(--accent); }

/* ----------------------------------------------------------------------
   Waehrungs-Menue (#730). Direktwahl statt Durchklicken: Esteban wollte die
   Waehrung SEHEN und WAEHLEN, nicht viermal tippen, bis die richtige kommt.
   `position: fixed` ist Absicht, nicht Bequemlichkeit: die Anker sitzen im
   Regler und im Ergebnis-Blatt, beide mit eigenem Ueberlauf und z-index.
   Ein absolut positioniertes Menue wuerde dort abgeschnitten.
   ---------------------------------------------------------------------- */
.moneymenu {
  position: fixed;
  z-index: 60;                        /* ueber dem Blatt (20) */
  min-width: 12.5rem;
  padding: .3rem;
  display: flex; flex-direction: column; gap: 1px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md, .6rem);
  box-shadow: 0 10px 30px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06);
}
.moneymenu[hidden] { display: none; }
.moneymenu__item {
  display: grid;
  grid-template-columns: 2.9rem 1fr auto;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem .6rem;
  border: 0; border-radius: .4rem;
  background: transparent;
  color: var(--ink-2);
  font: inherit; font-size: var(--t-sm);
  text-align: left; cursor: pointer;
}
.moneymenu__item:hover, .moneymenu__item:focus-visible { background: var(--paper-2); color: var(--ink); outline: none; }
.moneymenu__item[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.moneymenu__item[aria-checked="true"] .moneymenu__code { color: var(--accent); }
.moneymenu__code { font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.moneymenu__name { color: inherit; }
.moneymenu__src { font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }