/* games-703 · CITY
   Kartografische Ruhe auf Papier. Ein Feld, ein Griff, ein Knopf.
   Aus den geteilten Tokens wird NUR --accent / --accent-ink neu gesetzt. */

:root { --hue: 235; }

/* Browser-Flaechen, die sonst niemandem gehoeren */
::selection { background: var(--accent-line); color: var(--ink); }
:root { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }

.app { overflow: clip; }

/* ---- Topbar ------------------------------------------------------------ */
.topbar__meta { gap: var(--s3); }
/* Das Tagesblatt (.done) liegt auf z-index 30 ueber der GANZEN App, also auch
   ueber der Topbar. Dort sitzt der Nochmal-Knopf -- ohne diese Zeile ist er
   nach dem Tagesende begraben und das Spiel nur einmal spielbar. */
.topbar { position: relative; z-index: 31; }

/* ---- Buehne ------------------------------------------------------------ */
.stage {
  justify-content: center;
  gap: var(--s5);
  padding-bottom: clamp(0px, 5vh, 44px);   /* optische Mitte, nicht geometrische */
  transition: transform var(--d-slow) var(--ease-o);
}
/* Der Abstand kommt aus dem Buehnen-Gap, nicht aus dem 1em-Margin, das ein
   <p> vom Browser mitbringt. Sonst rechnet zwei Stellen dasselbe. */
.prompt {
  margin-block: 0;
  transition: opacity var(--d-mid) var(--ease);
  min-height: 2.5em;
}
.prompt b { font-weight: 800; color: var(--accent); }

/* ---- Das Feld ---------------------------------------------------------- */
.field {
  position: relative;
  width: var(--field, 320px);
  height: var(--field, 320px);
  flex: 0 0 auto;
  touch-action: none;
  cursor: grab;
}
.field:active { cursor: grabbing; }
.field canvas { width: 100%; height: 100%; border-radius: 2px; }

/* Griff: sitzt an der Aussenecke von B und wandert mit */
.grip {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: grid; place-items: center;
  border: 0; padding: 0;
  border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink);
  box-shadow: var(--shadow-2);
  cursor: grab;
  transition: opacity var(--d-mid) var(--ease), transform var(--d-fast) var(--ease);
  will-change: transform;
}
.grip::after {                       /* Ziehflaeche, groesser als der Punkt */
  content: ""; position: absolute; inset: -14px; border-radius: inherit;
}
.grip:active { transform: scale(.9); }
.grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Ping in Runde 1 — sagt "hier anfassen", ohne ein Wort.
   Laeuft, bis der Spieler zum ersten Mal zieht, dann nie wieder. */
.grip[data-hint]::before {
  content: ""; position: absolute; inset: -3px;
  border-radius: inherit; border: 2px solid var(--accent);
  animation: ping 2200ms var(--ease-o) infinite;
}
@keyframes ping {
  0%   { transform: scale(1);    opacity: .85; }
  70%  { transform: scale(2.15); opacity: 0; }
  100% { transform: scale(2.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .grip[data-hint]::before { display: none; } }

/* ---- Definitionszeile: immer sichtbar, nie ausblendbar ------------------ */
.basis {
  margin: 0;
  font-size: var(--t-xs); font-weight: 500;
  color: var(--ink-3);
  text-align: center;
  transition: opacity var(--d-mid) var(--ease);
}

/* ---- Werkzeuge: Tipp links, Zahlenfeld rechts, beide ueber dem Knopf ----
   Deutsch ist laenger (#724): «Tipp heute gebraucht» neben «1.10 × Ho Chi
   Minh City» passt nicht mehr in 342 px. Statt den Knopf zweizeilig zu
   quetschen, bricht die Zeile: Tipp oben links, Zahlenfeld unten rechts.
   layout() misst das Dock, das Feld weicht von selbst aus. */
.tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  min-height: 40px;
}
.tools .hintbtn { white-space: nowrap; }
.tools .numfield { margin-left: auto; }
.tools .numfield__unit { white-space: nowrap; }
.dock .hint { margin: 0 0 var(--s2); }

/* ---- Reveal-Sheet ------------------------------------------------------ */
.sheet { max-height: 80dvh; overflow: auto; overscroll-behavior: contain; }
.sheet .dock { padding-top: var(--s4); }

/* Der Faktor ist die Ueberschrift des Reveals. Keine Punktzahl daneben:
   "2.4x too big" braucht keine Uebersetzung, eine Zahl von 0 bis 100 immer. */
.factor { margin-bottom: 2px; }
.beat { margin: 0; }
/* Zwei Stellen aus --ink-3 nach --ink-2 gezogen (3.2:1 auf 7.5:1, dunkel
   4.0:1 auf 7.2:1): die Pflicht-Beschriftung der simulierten Wolke und die
   Richtung des Fehlers. Beides muss gelesen werden koennen; die Hierarchie
   traegt weiter Groesse und Gewicht. Lokal, damit _shared unangetastet
   bleibt — gehoert eigentlich in base.css (siehe Bericht). */
.dist__note { color: var(--ink-2); }
.factor__dir { color: var(--ink-2); }

/* Die eigene Marke sitzt oft dicht an der Wahrheit, dann ueberschreiben sich
   die zwei Beschriftungen. Statt zu hoffen, bekommt "you" eine eigene Zeile
   unter der Achse — kollidieren kann dort nichts mehr. */

.tally {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--s2) var(--s4);
  align-items: end;
  padding: var(--s3) 0 var(--s4);
  margin-top: var(--s3);
  border-bottom: 1px solid var(--line);
}
.tally__cell { display: grid; gap: 1px; min-width: 0; }
.tally__cell--you { text-align: right; }
.tally__cell--you .tally__sw { justify-self: end; }
.tally__sw {
  width: 22px; height: 8px; border-radius: 2px;
  border: 1px solid var(--line-strong);
  margin-bottom: 3px;
}
.tally__sw[data-sw="a"] { background: color-mix(in srgb, var(--ink) 16%, transparent); }
.tally__sw[data-sw="b"] {
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  border-color: var(--accent);
}
/* Gestrichelt wie der Geist auf der Karte und wie die eigene Linie in der
   Verteilung: ein Zeichen, drei Orte. */
.tally__sw[data-sw="you"] {
  background: transparent;
  border: 1px dashed var(--accent);
}
.tally__name {
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tally__num {
  font-size: var(--t-lg); font-weight: 650; letter-spacing: var(--tight);
  font-variant-numeric: tabular-nums; line-height: 1.1;
  white-space: nowrap;
}
.tally__num i { font-style: normal; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); margin-left: 3px; }

.sheet .napkin p { margin: 0; }

/* ---- Tagesabschluss ---------------------------------------------------- */
.done {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s2);
  padding: var(--s6) var(--s4) 118px;
  background: var(--paper);
  overflow: hidden;
  animation: rise var(--d-slow) var(--ease-o) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.done > * { flex: 0 0 auto; }
.done__label {
  margin: 0;
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-3);
}
.done .mega { margin: 0; color: var(--ink); }
.done .mega .unit { margin-left: 2px; }
.done__sub {
  margin: 0 0 var(--s3);
  font-size: var(--t-sm); color: var(--ink-2);
}

/* Alle fuenf Runden auf einen Blick, ohne Aufklappen und ohne Scrollen. */
.summary { max-width: 320px; margin-inline: auto; }
.srow { padding: var(--s3) 0; }
.srow__f[data-dir="spot"] { color: var(--good); font-size: var(--t-sm); }

.done .dock {
  position: absolute; left: var(--s4); right: var(--s4);
  bottom: max(var(--s5), env(safe-area-inset-bottom));
  max-width: 320px; margin-inline: auto;
}
.done .share { width: 100%; }

/* ---- Toast ------------------------------------------------------------- */
.toast {
  position: absolute; left: 50%; bottom: 92px; z-index: 40;
  transform: translate(-50%, 8px);
  margin: 0; padding: 9px var(--s4);
  border-radius: var(--r-full);
  background: var(--ink); color: var(--paper);
  font-size: var(--t-sm); font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-mid) var(--ease), transform var(--d-mid) var(--ease-o);
}
.toast[data-on] { opacity: 1; transform: translate(-50%, 0); }

/* ---- Zustaende --------------------------------------------------------- */
/* Im Reveal steigt die Karte nach oben, das Sheet faehrt von unten ein.
   Eine Bewegung, zwei Richtungen — rein ueber transform, kein Layout-Tween.
   Den Weg rechnet city.js aus, damit die Karte immer ueber dem Sheet steht. */
.app[data-phase="reveal"] .prompt,
.app[data-phase="reveal"] .basis { opacity: 0; }
.app[data-phase="reveal"] .grip  { opacity: 0; pointer-events: none; }
.app[data-phase="reveal"] > .dock { opacity: 0; pointer-events: none; }
.app > .dock { transition: opacity var(--d-mid) var(--ease); }

/* ---- Kurze Buehne ------------------------------------------------------
   Auf 620 px Hoehe passt der volle Reveal nicht mehr in 80 dvh. Ein Sheet,
   das scrollt, versteckt den Weiter-Knopf — also wird der Block gestaucht,
   nicht abgeschnitten: jeder der fuenf Teile bleibt sichtbar. */
@media (max-height: 620px) {
  .stage { gap: var(--s3); padding-bottom: 0; }
  .prompt { min-height: 0; }
  .tools { min-height: 34px; }
  .done { padding-top: var(--s4); padding-bottom: 92px; gap: var(--s1); }
  .done__sub { margin-bottom: var(--s2); }
  .srow { padding: var(--s2) 0; }

  .sheet {
    padding-top: var(--s4);
    padding-bottom: max(var(--s4), env(safe-area-inset-bottom));
  }
  .factor { font-size: var(--t-xl); }
  .beat { font-size: var(--t-xs); }
  .tally { padding: var(--s2) 0; margin-top: var(--s2); }
  .tally__num { font-size: var(--t-md); }
  .dist { margin: var(--s2) 0; }
  .dist__svg { height: 34px; }
  .napkin { margin-top: var(--s2); padding: var(--s2) var(--s3); line-height: 1.45; }
  .sheet__src { margin-top: var(--s2); }
  .sheet .dock { padding-top: var(--s2); }
}