/* WHERE FROM · nur was dieses Spiel braucht. Die Familie kommt aus ../_shared/.
   Abgeleitet von where.css (#736): dieselbe Karte, dieselbe Geste, dasselbe Blatt.
   Neu ist nur die Logo-Kachel oben. */

:root { --hue: 110; }

: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 Logo: echt, in Farbe, auf Weiss + der Name ------------------- */
.subject {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s3);
}
/* Die Kachel ist in beiden Themen weiss (--logo-paper): Logos sind von ihren
   Inhabern auf Weiss gezeichnet, ein schwarzes Wortzeichen auf dunklem Papier
   waere unsichtbar. Die Kachel ist die einzige Flaeche der Familie, die nicht
   dem Thema folgt, und sie tut es aus einem Grund, der im Bild selbst liegt. */
/* Gemessen #736: als Grid mit `height: 100%` loeste die Bild-Hoehe nicht auf (Barclays 223 px in
   einer 99-px-Kachel, ueber dem Namen). Darum Flex, feste Kachel-Masse, `overflow: hidden`, und das
   Bild bekommt max-Masse statt 100 %. */
.logo {
  width: clamp(150px, 46vw, 200px);
  height: clamp(72px, 22vw, 96px);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 16px;
  background: var(--logo-paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: opacity var(--d-mid) var(--ease), transform var(--d-mid) var(--ease);
}
.logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
/* Optische Groesse nach Form (data-shape aus dem Seitenverhaeltnis, wherefrom.js):
   Wortmarke = volle Breite, aber hoechstens 70 % Hoehe · Symbol = 72 % Hoehe · dazwischen 80 % Hoehe. */
.logo[data-shape="wide"]   img { max-height: 70%; }
.logo[data-shape="mid"]    img { max-height: 80%; max-width: 88%; }
.logo[data-shape="square"] img { max-height: 72%; max-width: 60%; }
.logo__q { font-size: var(--t-xl); font-weight: 700; color: var(--accent); }   /* nur im OG-Bild (?og=1) */
.logo:empty { opacity: 0; }
.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; }
.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); }
}
.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. Die Kachel gibt sie her. */
body.has-hint .logo { width: clamp(120px, 34vw, 160px); height: clamp(56px, 16vw, 72px); }

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

.sheet {
  bottom: calc(var(--dockh) + max(var(--s4), env(safe-area-inset-bottom)));
  padding-bottom: var(--s5);
  max-height: 44dvh; overflow-y: auto; overscroll-behavior: contain;
}
.sheet:not([data-open]) {
  box-shadow: none;
  transform: translateY(calc(102% + var(--dockh, 96px) + 48px));
}

/* ---- Die Waehrung: Distanz + Band-Wort --------------------------------- */
.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); }

/* 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 ---------------------------------------------------- */
.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); }
  .logo { width: clamp(120px, 34vw, 160px); height: clamp(56px, 16vw, 72px); padding: 8px 12px; }
  .sheet__fact { font-size: var(--t-xs); }
  .sheet {
    max-height: 58vh; overflow-y: auto;
    overscroll-behavior: contain; scrollbar-width: thin;
  }
  .sheet::-webkit-scrollbar { width: 4px; }
  .sheet::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
  /* Auf einer kurzen Buehne faehrt das Motiv beim Reveal nach oben hinaus (wie bei Where das Tier);
     Logo UND Name werden ausgeblendet, sonst steht der Name in der Topbar (gemessen 1440x700). */
  body.is-revealed .subject { opacity: 0; }
  .subject { transition: opacity var(--d-mid) var(--ease); }
}
@media (max-height: 620px) {
  .mapwrap { aspect-ratio: 1.95 / 1; }
  .factor { font-size: var(--t-lg); margin-bottom: var(--s2); }
  .crowdline, .napkin, .sheet__verdict { 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 (wie Where, Esteban #725) ------------ */
@media (min-width: 900px) and (min-height: 700px) {
  .logo { width: clamp(180px, 22vh, 240px); height: clamp(84px, 11vh, 112px); }
  .mapwrap { aspect-ratio: 1.85 / 1; max-height: min(60vh, 600px); }
  .cross { width: 92px; height: 92px; margin: -46px 0 0 -46px; }
}