/* WHERE · nur was dieses Spiel braucht. Die Familie kommt aus ../_shared/. */

:root { --hue: 150; }

:root {
  --dockh: 76px;
  --lift: 0px;
}

::selection { background: var(--accent-soft); color: var(--ink); }

/* ---- Topbar-Zusatz ----------------------------------------------------- */
.meta-score { font-weight: 650; color: var(--ink-2); }
.meta-score:empty { display: none; }

/* ---- Buehne ------------------------------------------------------------ */
.stage {
  justify-content: center;
  gap: clamp(var(--s4), 4vh, var(--s6));
  transition: transform var(--d-slow) var(--ease-o);
  will-change: transform;
}
body.is-revealed .stage { transform: translateY(calc(-1 * var(--lift))); }

/* ---- Das Tier: Silhouette + Name --------------------------------------- */
.subject {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s3);
}
.sil {
  width: clamp(72px, 25vw, 112px);
  aspect-ratio: 1 / 1;
  color: var(--ink);
}
.sil svg { width: 100%; height: 100%; display: block; }
.prompt { margin: 0; }

/* ---- Die Karte --------------------------------------------------------- */
.mapwrap {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1.22 / 1;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.mapwrap.is-grabbing { cursor: grabbing; }
.mapwrap canvas { position: absolute; inset: 0; }

/* ---- Fadenkreuz: fest in der Mitte, die Karte bewegt sich darunter ------ */
.cross {
  position: absolute; left: 50%; top: 50%;
  width: 76px; height: 76px; margin: -38px 0 0 -38px;
  color: var(--ink);
  pointer-events: none;
  transition: opacity var(--d-mid) var(--ease), transform var(--d-mid) var(--ease);
}
.cross svg { width: 100%; height: 100%; }
.cross[data-off] { opacity: 0; transform: scale(.8); }

/* ---- Zoom: zwei stille Knoepfe ----------------------------------------- */
.zoom {
  position: absolute; right: 10px; bottom: 10px;
  display: flex; flex-direction: column; gap: 6px;
  transition: opacity var(--d-mid) var(--ease);
}
body.is-revealed .zoom, body.is-done .zoom { opacity: 0; pointer-events: none; }
body.is-done .stage { padding-bottom: calc(var(--s4) + var(--donepad, 0px)); }
.zbtn {
  position: relative;
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--paper);
  color: var(--ink-3);
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.zbtn::after { content: ''; position: absolute; inset: -8px; }  /* 52px Trefferflaeche */
.zbtn svg { width: 17px; height: 17px; }
.zbtn:active { transform: scale(.92); color: var(--ink); }
.zbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Knopf + Tipp ------------------------------------------------------ */
.dock { position: relative; z-index: 30; }
.btn.is-pulse { animation: pulse 900ms var(--ease) 1; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  38%      { transform: scale(1.035); }
}
/* Der Tipp gehoert an die Stelle, an der man sich entscheidet: direkt
   ueber den Knopf. Ist keiner da, ist die Zeile weg, nicht leer. */
.hintrow { display: flex; justify-content: center; }
.hintrow:empty { display: none; }
.dock .hint {
  margin: 0; width: 100%;
  padding: var(--s2) var(--s4);
  text-align: center; text-wrap: balance;
}
/* Der Tipp kostet keine Punkte, aber Hoehe. Das Tier gibt sie her. */
body.has-hint .sil { width: clamp(50px, 15vw, 72px); }

/* ---- Reveal-Sheet: klein. Die Karte ist die Aufloesung. ---------------- */
.sheet { padding-top: var(--s5); }
.factor { margin-bottom: var(--s1); }
.crowdline { margin: 0 0 var(--s2); }
.crowdline .dist__note { display: none; }   /* Esteban #709: kein "simulated"-Zusatz */
.sheet__fact { display: block; padding: 0; }   /* traegt nur noch den Quell-Link */
.sheet__fact #fact { display: none; }
body.is-revealed .hintrow { display: none; }

/* ---- Reveal-Sheet (Altbestand) ----------------------------------------- */
/* Die Karte IST die Aufloesung: das Blatt nimmt nie mehr als 60 % der
   Hoehe, der Rest rollt in sich. */
.sheet {
  /* Das Blatt endet UEBER dem Dock statt dahinter: sonst liegt die letzte
     Zeile (die Quelle) unter dem Knopf. */
  bottom: calc(var(--dockh) + max(var(--s4), env(safe-area-inset-bottom)));
  padding-bottom: var(--s5);
  max-height: 42dvh; overflow-y: auto; overscroll-behavior: contain;
}
.sheet:not([data-open]) {
  box-shadow: none;
  /* Geschlossen ganz unter das Dock: das Blatt sitzt `bottom: dockh + s4`, darum reicht
     translateY(102%) nicht, die letzte Runde las unter dem Knopf durch (#721 Befund). */
  transform: translateY(calc(102% + var(--dockh, 96px) + 48px));
}

.sci {
  margin: 0 0 var(--s1);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* ---- Die Waehrung: Distanz + Band-Wort --------------------------------- */
/* Gleiche Form wie der Faktor der Schwester-Spiele, aber KEIN Verhaeltnis:
   bei Distanzen gibt es keinen Bezugswert, gegen den ein Faktor Sinn ergibt.
   Kurze Baender stehen neben der Zahl, lange brechen unter ihr um. */
.factor { flex-wrap: wrap; row-gap: 2px; margin: 0 0 var(--s3); line-height: 1.02; }
.factor__dir { flex: 1 1 15ch; line-height: 1.35; }


.napkin { margin: 0 0 var(--s3); }

.sheet__fact { margin: 0 0 var(--s3); }
.introline {
  margin: 0 0 var(--s3);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--accent);
}

/* Gestaffelter Auftritt im Sheet */
[data-stage] {
  opacity: 0; transform: translateY(6px);
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
[data-stage][data-in] { opacity: 1; transform: none; }

/* ---- Tagesabschluss ---------------------------------------------------- */
/* Fuenf Zeilen ueber der Weltkarte, auf der alle fuenf Pins, alle fuenf
   Gebiete und die Geodaeten dazwischen gleichzeitig stehen. */
.summary { margin: 0 0 var(--s3); }
.srow { padding: var(--s2) 0; }
.srow__what { color: var(--ink); font-weight: 550; }

.donefoot {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s4);
}
.share { flex: 1 1 auto; }
.share:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.share:disabled { opacity: .6; pointer-events: none; }
.daytag {
  flex: 0 0 auto; margin: 0; text-align: right;
  font-size: var(--t-xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---- Enge Buehne ------------------------------------------------------- */
@media (max-height: 700px) {
  .stage { gap: var(--s3); }
  .sil { width: clamp(58px, 17vw, 78px); }
  .sheet__fact { font-size: var(--t-xs); }
  /* Auf einer kurzen Buehne darf das Blatt nie die ganze Flaeche nehmen.
     Es wird gedeckelt und rollt -- so bleibt der Karte immer ihre Haelfte,
     und trotzdem faellt kein Inhalt weg (Rechenweg, Fakt, Quelle). */
  .sheet {
    max-height: 56vh; overflow-y: auto;
    overscroll-behavior: contain; scrollbar-width: thin;
  }
  .sheet::-webkit-scrollbar { width: 4px; }
  .sheet::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
  /* Die Buehne faehrt hier so weit hoch, dass die Silhouette oben in die
     Topbar ragt. Sie ausblenden statt wegnehmen: Opazitaet aendert die
     Hoehen nicht, auf denen der Ausschnitt gerechnet wurde. Der Name bleibt. */
  body.is-revealed .sil { opacity: 0; }
  .sil { transition: opacity var(--d-mid) var(--ease); }
}
@media (max-height: 620px) {
  .mapwrap { aspect-ratio: 1.95 / 1; }
  .sci { display: none; }
  .factor { font-size: var(--t-lg); margin-bottom: var(--s2); }
  .crowdline, .napkin { font-size: var(--t-xs); }
  .napkin { padding: var(--s2) var(--s3); margin-bottom: var(--s2); }
  .dist__note, .sheet__fact, .summary { margin-bottom: var(--s2); }
  .srow { padding: 5px 0; }
  .srow__what, .srow__f { font-size: var(--t-xs); }
  .donefoot { margin-top: var(--s3); }
  .dock .hint { font-size: var(--t-xs); padding: 6px var(--s3); }
}

/* ---- Rechner / grosser Bildschirm (Esteban #725: «auf dem PC wird die Weltkarte so klein») ----
   Die Familie ist Handy-first (390 px Referenz). Auf einem breiten, hohen Bildschirm bekommt
   Where? eine breitere Spalte und eine Karte, die dem Bildschirm folgt: die Welt ist bei Zoom 1
   so breit wie der Kasten (where.js kScale), also waechst sie mit ihm. Knopf und Tipp bleiben in
   Handy-Breite, damit der gruene Knopf nicht zur Wand wird. Im Landing-iframe (390 px) greift
   das nicht. */
@media (min-width: 900px) and (min-height: 700px) {
  .sil { width: clamp(96px, 13vh, 140px); }
  .mapwrap { aspect-ratio: 1.85 / 1; max-height: min(60vh, 600px); }
  .cross { width: 92px; height: 92px; margin: -46px 0 0 -46px; }
}