/* ============================================================
   Global Variables & Base
   ============================================================ */

:root {
  /* Bildwelt wie auf steptale.de: Papier, Tinte, Wald. Waldgrün für Aktionen,
     Bernstein für alles, was man bekommt, Glut für Angriffe und Warnungen.
     Jeder Monat kann diese drei überschreiben (config/month-theme.js). */
  --paper: #fbf5e6;
  --paper-white: #fdf9ef;
  --paper-sunk: #f1e7d0;
  --ink: #2a231a;
  --ink-soft: #6a5b45;
  --forest: #2f5d46;
  --forest-strong: #244a37;
  --on-forest: #f7f1e3;
  --amber: #c98a1b;
  --on-amber: #2a1b06;
  --ember: #a84f24;
  /* Ränder von Flächen: zart statt schwarz. Kräftige Ränder nur, wo etwas
     ausgewählt oder hervorgehoben ist. */
  --edge: rgba(42, 35, 26, 0.14);
  --edge-strong: rgba(42, 35, 26, 0.32);
  --sky: #c9ebff;
  --accent2: #2f6fa8;
  --accent4: var(--forest);
  --shadow: rgba(60, 40, 20, 0.15);

  --avatar-size: clamp(48px, 6.5vw, 80px);
  --avatar-ring: clamp(2px, 0.4vw, 3.5px);
  --label-font: clamp(11px, 2.6vw, 14px);

  --track-base-w: clamp(14px, 3.5vw, 28px);
  --track-sketch1-w: clamp(4px, 1.2vw, 6.5px);
  --track-sketch2-w: clamp(2px, 0.8vw, 3px);
  --flag-offset: calc(var(--track-base-w) * 0.8);
  --panel-width: 320px;

  --zoom: 1;
  --inv-zoom: 1;
  --avatar-zoom: 1;
  --tx: 0px;
  --ty: 0px;

  /* Systemleisten-Abstände.
     Die Android-Hülle überschreibt diese Werte mit den tatsächlich gemessenen
     Insets; env() bleibt der Rückfall für den Browser und für iOS. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --font-ui: "Google Sans Flex", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Piazzolla", Georgia, serif;
  --font-hand: "Patrick Hand", cursive;

  --surface: #fdf9ef;
  --surface-soft: #f6ecd4;
  --surface-blue: #eef8ff;
  --surface-green: #eaf8ef;
  --surface-orange: #fff1dd;
  --surface-red: #ffe9e6;

  --border-soft: var(--edge);

  --shadow-low: 0 2px 6px -2px rgba(60, 40, 20, 0.18);
  --shadow-mid: 0 6px 14px -6px rgba(60, 40, 20, 0.28);
  --shadow-high: 0 16px 32px -14px rgba(60, 40, 20, 0.4);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-variation-settings: "ROND" 40;
  overscroll-behavior-y: contain;
}

/* Überschriften und Namen von Orten und Monaten in der Buchschrift. */
h1, h2, h3,
.header-tier-title,
.box > h2,
.box > h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

button,
input,
select {
  font-family: var(--font-ui);
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;

  /* Randlos gezeichnet reicht die App bis unter Status- und Navigationsleiste.
     Ohne diesen Abstand verdecken die Navigationsknöpfe die untere Leiste. */
  box-sizing: border-box;
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

.hidden {
  display: none !important;
}

/* Handwritten gezielt weiterverwenden */
#pqTitle,
#pqDesc,
#pqSummary,
.quest-card-title,
.tooltip,
.profile-badge-month {
  font-family: var(--font-hand);
}

/* ============================================================
   Safe Area
   ============================================================ */

.safe-area-top {
  height: var(--safe-top);
  background: var(--paper);
  flex-shrink: 0;
}

/* ============================================================
   Header & Account
   ============================================================ */

/* Die Kopfzeile ist Bedienung, nicht Inhalt, und gehört darüber.
   Sie trug zwar z-index: 100, aber ohne position ist der wirkungslos — das
   Konto-Menü lag dadurch unter der Quest-Karte (850). Modale Fenster stehen
   bei 9000 und bleiben weiterhin oben. */
header.main-header {
  position: relative;
  z-index: 1000;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border-bottom: 1px solid var(--edge);
  flex-shrink: 0;
}

.header-tier {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.header-tier-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--edge);
  overflow: hidden;
  background: var(--paper-white);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-tier-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-tier-text {
  min-width: 0;
  line-height: 1.2;
}

.header-tier-title {
  font-weight: bold;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-tier-sub {
  font-size: 12px;
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#accountWrap {
  position: relative;
  flex-shrink: 0;
}

#accountBtn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--paper-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}

#accountLabel {
  display: none;
}

#accountAvatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ddd;
  background-size: cover;
  background-position: center;
}

/* ── Account-Menü ────────────────────────────────────────────────────
   Gegliedert statt aufgereiht: Wer bin ich, welche Gruppe, mein Konto,
   Kleingedrucktes. Jede Gruppe von Einträgen hat eine eigene Fläche,
   damit das Auge die Struktur sieht, bevor es liest.
   ------------------------------------------------------------------ */

#accountMenu {
  position: absolute;
  right: 0;
  top: 44px;
  display: none;
  width: 290px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 200;
  padding: 8px;
  background: var(--paper-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.16);
  font-size: 14px;
  animation: amDrop 160ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes amDrop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.am-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  margin-bottom: 4px;
  border: none;
  border-radius: 12px;
  background: none;
  text-align: left;
  color: inherit;
}

.am-identity.is-actionable:hover { background: rgba(0, 0, 0, 0.045); }
.am-identity:disabled { cursor: default; }

.am-identity-arrow {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-left: auto;
  opacity: 0;
  transition: opacity 120ms ease;
}

.am-identity.is-actionable .am-identity-arrow,
.am-identity.is-actionable > svg { opacity: 0.4; }

.am-identity > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-left: auto;
  opacity: 0;
}

.am-identity-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e2e2e2 center/cover no-repeat;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.am-identity-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.am-identity-name {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.am-identity-sub {
  font-size: 12px;
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.am-section {
  padding: 6px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.am-section-label {
  padding: 6px 8px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.45;
}

#accountMenu button,
#accountMenu .am-item {
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* Die aktuelle Gruppe: der wichtigste Knopf im Menü. */
.am-group {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf4, #fff8e4);
  text-align: left;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.am-group:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.am-group:active { transform: scale(0.985); }

.am-group-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.am-group-name {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.am-group-sub {
  font-size: 12px;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lucide ersetzt <i data-lucide> durch <svg>; beide Formen treffen. */
.am-group .lu,
.am-group > svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: 0.4;
}

.am-switch { margin-top: 4px; }

.am-switch-label {
  padding: 8px 8px 2px;
  font-size: 12px;
  opacity: 0.45;
}

.am-switch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 10px;
  background: none;
  text-align: left;
}

.am-switch-item:hover { background: rgba(0, 0, 0, 0.045); }

.am-switch-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  flex: 0 0 auto;
}

.am-switch-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.am-switch-name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.am-switch-sub {
  font-size: 12px;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.am-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 10px;
  background: none;
  text-align: left;
}

.am-item:hover { background: rgba(0, 0, 0, 0.045); }
.am-item .lu,
.am-item > svg,
.am-primary > svg,
.go-link > svg,
.go-cta > svg,
.go-leave > svg,
.go-row-actions button > svg {
  flex: 0 0 auto;
  opacity: 0.75;
}

.am-item > svg { width: 17px; height: 17px; opacity: 0.55; }
.am-primary > svg { width: 18px; height: 18px; opacity: 1; }
.am-item-quiet { opacity: 0.75; font-size: 13.5px; }

.am-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}

.am-primary:hover { filter: brightness(1.12); }

.am-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 10px 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 12px;
  opacity: 0.55;
}

.am-foot a { color: inherit; text-decoration: none; }
.am-foot a:hover { text-decoration: underline; }

.am-foot button {
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  font-size: 12px;
  color: #ae3a22;
}

/* ============================================================
   Tabs
   ============================================================ */

.tabs {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  background: rgba(255, 253, 245, 0.9);
  border-bottom: 2px dashed rgba(0, 0, 0, 0.06);
}

.tab-btn {
  flex: 1;
  min-height: 46px;
  padding: 7px 0;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--ink);
  font-family: var(--font-ui);
  cursor: pointer;
  opacity: 0.45;
  transition:
    opacity 150ms ease,
    background 150ms ease,
    transform 90ms ease,
    border-color 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.tab-btn svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.6;
  pointer-events: none;
}

.tab-btn.active {
  opacity: 1;
  border-bottom-color: var(--forest);
  background: rgba(47, 93, 70, 0.07);
}

.tab-btn:active {
  transform: scale(0.94);
}

/* Leisten, die selbst seitwärts scrollen: Am Ende übernimmt das Wischen
   zwischen den Tabs (tab-swipe.js). Ohne Dehnen am Rand, sonst zieht die
   Leiste sichtbar mit, während schon der Tab wechselt. */
.act-ladder,
.sv-chart,
.pq-history-selector,
.bounty-chain-steps {
  overscroll-behavior-x: none;
}

/* ============================================================
   Layout & Panels
   ============================================================ */

.layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

aside.panel {
  background: var(--paper);
  padding: 10px;
  overflow-y: auto;
  min-height: 0;
}

aside.panel:first-child {
  border-right: 2px dashed rgba(0, 0, 0, 0.06);
}

aside.panel:last-child {
  border-left: 2px dashed rgba(0, 0, 0, 0.06);
}

.panel h2 {
  margin: 4px 0 8px;
  font-size: clamp(16px, 4.4vw, 20px);
}

.panel .list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.panel .card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 5px 7px;
  border: 2px dashed rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: var(--paper-white);
}

.panel .card .pic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--edge);
}

.panel .card .name,
.panel .card .count {
  font-size: 13px;
}

.panel .card .count {
  font-weight: bold;
}

.controls {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.controls button {
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 5px 9px;
  background: var(--paper-white);
  cursor: pointer;
}

@media (min-width: 901px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(240px, var(--panel-width)) 1fr minmax(240px, var(--panel-width));
    grid-template-rows: 1fr;
  }
}

@media (max-width: 900px) {
  .layout {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  aside.panel {
    display: none;
  }

  #challengeView > main.stage,
  #challengeView > .mobile-panel-top,
  #challengeView > .sync-bar-wrap,
  #challengeView > .mobile-panel-bottom {
    width: 100%;
  }
}

/* ============================================================
   Map Stage
   ============================================================ */

main.stage {
  position: relative;
  overflow: hidden;

  /* Bei Zoom 1 reagiert die Karte nicht auf einfaches Ziehen — dann gehört
     die senkrechte Achse dem Scrollen der Seite. Beides schaltet
     updateTouchAction() beim Zoomen um.

     overscroll-behavior gehört ausdrücklich NICHT hierher: Die Stage ist
     wegen overflow:hidden ein Scroll-Container ohne Scrollweg. Mit "contain"
     endet jede Wischbewegung, die auf der Karte beginnt, sofort an ihr,
     statt die Seite darunter zu scrollen. */
  touch-action: pan-y;
  background: var(--paper-sunk);
  width: 100%;
  aspect-ratio: 1;
  flex-shrink: 0;
  margin: 0;
}

html.map-zooming .map-canvas,
html.map-zooming .map-backdrop {
  will-change: transform;
}

.map-canvas {
  position: absolute;
  inset: 0;
  background: center center no-repeat;
  background-size: contain;
  transform: translate(var(--tx), var(--ty)) scale(var(--zoom));
  transform-origin: 0 0;
}

/* Unscharfe Fortsetzung der Karte hinter ihren Rändern (map-backdrop.js).
   Dreimal so groß wie die Karte, mit ihr verschoben und gezoomt: Der
   Ursprung liegt dort, wo die linke obere Ecke der Karte sitzt. */
.map-backdrop {
  display: none;
}

@media (max-width: 900px) {
  .map-backdrop {
    display: block;
    position: absolute;
    left: calc(-1 * var(--world, 0px));
    top: calc(-1 * var(--world, 0px));
    width: calc(3 * var(--world, 0px));
    height: calc(3 * var(--world, 0px));
    background: center / 100% 100% no-repeat;
    transform: translate(var(--tx), var(--ty)) scale(var(--zoom));
    transform-origin: var(--world, 0px) var(--world, 0px);
    pointer-events: none;
  }
}

#mapOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 800;
  opacity: 0.8;
}

#scene {
  width: 100%;
  height: 100%;
  display: block;
}

/* Tageszeit (ui/daylight.js): Färbung über der gemalten Karte, unter allem,
   was darauf liegt. Die Leinwände sind halb so groß wie die Karte und
   werden gestreckt; das macht die Lichter zusätzlich weich. */
.map-sky {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.map-shade { mix-blend-mode: multiply; }
.map-glow { mix-blend-mode: screen; }

/* Was auf der Karte steht, dunkelt nachts ein wenig mit; Avatare,
   Münzen und Power-Ups bleiben hell, weil man sie finden soll. */
html.has-daylight .marker,
html.has-daylight #animalQuestLayer {
  filter: brightness(calc(1 - 0.32 * var(--night, 0)));
}

/* Truhen und Wegsteine ohne Sonderregel: genau so gefärbt wie die Karte an
   ihrer Stelle, samt Lichtinsel (ui/daylight.js setzt --shade-c aus der
   Färbungs-Leinwand). Die Farbe wird nur auf das Bild multipliziert. */
.map-box,
.milestone-stone {
  isolation: isolate;
}
html.has-daylight .map-box::after,
html.has-daylight .milestone-stone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--shade-c, #fff);
  mix-blend-mode: multiply;
  pointer-events: none;
}
html.has-daylight .map-box::after {
  -webkit-mask: var(--chest-img) center / 100% 100% no-repeat;
  mask: var(--chest-img) center / 100% 100% no-repeat;
}
html.has-daylight .milestone-stone::after {
  border-radius: 50%;
}
html.has-daylight #mapOverlay {
  filter: url(#mapTint);
}
html.has-daylight .map-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(var(--day-tint, 255 255 255));
  mix-blend-mode: multiply;
}

/* Kerzenschein um jeden Avatar, sobald es dämmert. Liegt hinter Bild und
   Skin (z-index -1 im Avatar), innen durchsichtig, damit der Ring frei
   bleibt, und flackert kaum merklich. */
.avatar::after {
  content: '';
  position: absolute;
  inset: -62%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(255, 200, 128, 0) 40%,
    rgba(255, 200, 124, 0.42) 44%,
    rgba(255, 178, 96, 0.2) 62%,
    rgba(255, 164, 82, 0.07) 82%,
    rgba(255, 160, 80, 0) 100%);
  opacity: 0;
  pointer-events: none;
}
html.has-daylight .avatar::after {
  opacity: calc(var(--night, 0) * 0.85);
  animation: candleFlicker 3.7s ease-in-out infinite;
}
.avatar:nth-child(3n+1)::after { animation-delay: -1.3s; animation-duration: 4.3s; }

/* Glühwürmchenglas: ein hellerer, grünlich-gelber Schein. Nur zu sehen,
   zählt nicht als Licht für Talisman-Boni. */
.avatar.has-firefly-glow::after {
  inset: -95%;
  background: radial-gradient(circle closest-side,
    rgba(230, 255, 140, 0) 30%,
    rgba(232, 255, 150, 0.72) 33%,
    rgba(214, 245, 120, 0.38) 50%,
    rgba(200, 240, 100, 0.14) 74%,
    rgba(200, 240, 100, 0) 100%);
}
html.has-daylight .avatar.has-firefly-glow::after {
  opacity: var(--night, 0);
}
.avatar:nth-child(3n+2)::after { animation-delay: -2.6s; animation-duration: 3.1s; }

/* Glühwürmchen am Weg (ui/fireflies.js), nur nachts. Die Ebene bildet
   keinen eigenen Stapel: Jeder Punkt (b) hat seinen Stapelwert nach Tiefe. */
#firefliesLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}
html.is-night #firefliesLayer {
  display: block;
}
#firefliesLayer b {
  position: absolute;
  width: 0;
  height: 0;
  opacity: calc((var(--night, 0) - 0.3) * 1.45);
}
#firefliesLayer i {
  position: absolute;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #f4ffb0;
  box-shadow: 0 0 4px 2px rgba(230, 255, 120, 0.75), 0 0 12px 5px rgba(200, 255, 90, 0.3);
  animation: fireflyDrift var(--dur, 7s) ease-in-out infinite alternate, fireflyBlink var(--blink, 2.4s) ease-in-out infinite;
}

/* Schein der Lichter (ui/daylight.js), nach Tiefe einsortiert wie die
   Glühwürmchen. Hell auf hell (screen) über allem, was dahinter liegt. */
#lightsLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.map-light {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle closest-side, var(--c0) 0%, var(--c1) 40%, transparent 100%);
  opacity: var(--night, 0);
}
@keyframes fireflyDrift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * -0.4)); }
  100% { transform: translate(var(--dx), var(--dy)); }
}
@keyframes fireflyBlink {
  0%, 100% { opacity: 0.15; }
  45% { opacity: 1; }
  60% { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  #firefliesLayer i { animation: none; opacity: 0.8; }
}

@keyframes candleFlicker {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(1.035); }
  33% { transform: scale(0.985); }
  52% { transform: scale(1.02); }
  71% { transform: scale(0.99); }
  86% { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  html.has-daylight .avatar::after { animation: none; }
}

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

#trackBase,
#trackSketch1,
#trackSketch2 {
  opacity: 0;
}

@media (min-width: 901px) {
  main.stage {
    aspect-ratio: auto;
    flex: 1;
    min-height: 0;
  }
}

/* ============================================================
   Sync Bar
   ============================================================ */

/* Hier lief ein Fortschrittsbalken auf den naechsten Sync zu.
   Darauf handelt niemand — und die Haelfte, die man wirklich wissen will,
   naemlich wie aktuell die Ansicht ist, wurde berechnet und weggeworfen
   (die Variable stand da, benutzt wurde sie nie). Geblieben ist eine leise
   Zeile mit dem Stand. Der Quota-Schutz haengt ohnehin nicht hieran,
   sondern an der Sperre je Viertelstunde in sync-bar.js. */
.sync-bar-wrap {
  flex-shrink: 0;
  padding: 0 10px;
  background: rgba(255, 253, 245, 0.9);
  border-bottom: 1.5px dashed rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 20px;
}

.sync-bar-text {
  font-size: 12px;
  white-space: nowrap;
  opacity: 0.45;
  text-align: right;
}

.sync-bar-text.is-stale { opacity: 0.75; color: #a8641f; }

/* ============================================================
   Quest Card
   ============================================================ */

.quest-card {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  z-index: 850;
  background: rgba(255, 253, 245, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform 120ms ease;
  max-width: 400px;
  pointer-events: auto;
}

.quest-card:active {
  transform: scale(0.97);
}

.quest-card.hidden {
  display: none !important;
}

.quest-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--edge);
  background: #ffebcd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.quest-card-body {
  flex: 1;
  min-width: 0;
}

.quest-card-label {
  font-size: 11px;
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quest-card-title {
  font-weight: bold;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quest-card-timer {
  font-size: 12px;
  opacity: 0.6;
}

.quest-card-arrow {
  font-size: 16px;
  opacity: 0.3;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .quest-card {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin: 4px 0 10px;
    max-width: none;
  }

  .mini-lb {
    padding-bottom: 16px;
  }
}

/* ============================================================
   Wochenserie

   Die Karte sagt in einer Zeile, wo man steht. Laut wird sie nur,
   wenn etwas abzuholen ist — eine Karte, die immer blinkt, wird
   nicht mehr gelesen.
   ============================================================ */

.streak-card {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 2px 0 10px;
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--paper-white);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 200ms ease;
}

.streak-card:active { transform: scale(0.98); }
.streak-card.hidden { display: none; }

/* Die Flamme als Kachel über die ganze Höhe, darunter die Tage in Folge. */
.streak-card-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--amber) 22%, var(--paper-white));
  color: var(--ember);
}

.streak-card-icon svg {
  width: 22px;
  height: 22px;
}

.streak-card-count {
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.streak-card-count:empty { display: none; }

.streak-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.streak-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.streak-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.streak-card-claim {
  flex-shrink: 0;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--on-amber);
  font-weight: 700;
  font-size: 12.5px;
}

.streak-card-claim[hidden] { display: none; }

.streak-card-bar {
  height: 6px;
  margin: 6px 0 5px;
  border-radius: 999px;
  background: var(--paper-sunk);
  overflow: hidden;
}

.streak-card-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--amber);
  transition: width 460ms cubic-bezier(0.22, 0.9, 0.36, 1);
}

.streak-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.streak-card-sub {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.streak-card-sub svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.streak-card-sub b {
  color: var(--ink);
}

/* Der Fuss traegt nur den Abholknopf und verschwindet mit ihm. Flex muss
   hier stehen, weil [hidden] sonst gegen die Anzeigeregel verliert. */
.streak-foot {
  display: flex;
  justify-content: center;
  padding: 12px 16px 16px;
}

.streak-foot[hidden] { display: none; }

/* Die Frage nach einer Luecke. Steht ueber der Leiter, weil nichts
   weitergeht, bevor sie beantwortet ist. */
.streak-gap {
  margin: 14px 16px 4px;
  padding: 12px 14px;
  border: 2px solid #b4881c;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffaf0, #fff3dc);
}

.streak-gap[hidden] { display: none; }

.streak-gap-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.streak-gap-title { font-weight: bold; font-size: 14.5px; }
.streak-gap-when { font-size: 12px; opacity: 0.6; }

.streak-gap-text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
}

.streak-gap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}

/* Beide Wege gleich gross: Der Rasttag ist ein Vorrat, ueber den man
   verfuegt, keine Rettung, die man dankbar annimmt. */
.streak-gap-use,
.streak-gap-skip {
  flex: 1 1 auto;
  min-width: 9rem;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: bold;
  cursor: pointer;
}

.streak-gap-use { background: #3d7a4e; color: #fff; }
.streak-gap-use:disabled { background: #eee; color: #999; cursor: not-allowed; }
.streak-gap-skip { background:var(--paper-white); }

.streak-gap-note {
  margin-top: 9px;
  font-size: 12px;
  opacity: 0.6;
  line-height: 1.4;
}

/* Eine offene Frage ist dringender als eine wartende Belohnung. */
.streak-card.has-gap { border-color: #b4881c; }
.streak-card.has-gap .streak-card-icon { background: #ffe9bd; color: #8a6410; }

.streak-progress { padding: 12px 16px 0; }

.streak-progress-bar {
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: var(--paper-sunk);
  overflow: hidden;
}

.streak-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--amber);
  transition: width 520ms cubic-bezier(0.22, 0.9, 0.36, 1);
}

.streak-progress-fill.is-full {
  background: var(--forest);
}

.streak-progress-note {
  margin-top: 5px;
  font-size: 12px;
  opacity: 0.65;
  text-align: center;
}

/* Sieben Punkte statt einer Zahl: Man sieht auf einen Blick, wie weit
   die Woche ist, ohne zu rechnen. */
.streak-dots { display: flex; gap: 4px; flex-shrink: 0; }

.streak-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  background: var(--paper-sunk);
  box-shadow: inset 0 0 0 1.5px var(--edge-strong);
}

.streak-dot.is-done { background: var(--amber); box-shadow: none; }
.streak-dot.is-final { box-shadow: inset 0 0 0 1.5px var(--amber); }
.streak-dot.is-final.is-done { background: var(--amber); }

/* Offene Sprossen: ein ruhiges Pulsieren am Rand, kein Farbalarm. */
.streak-card.has-pending {
  border-color: var(--amber);
  animation: streakWaiting 2.4s ease-in-out infinite;
}

.streak-card.has-pending .streak-card-icon {
  background: color-mix(in srgb, var(--amber) 34%, var(--paper-white));
}

@keyframes streakWaiting {
  0%, 100% { box-shadow: 0 4px 14px var(--shadow); }
  50% { box-shadow: 0 4px 14px var(--shadow), 0 0 0 3px rgba(226, 135, 58, 0.25); }
}

@media (prefers-reduced-motion: reduce) {
  .streak-card.has-pending { animation: none; }
}

/* ── Das Blatt ───────────────────────────────────────────── */

.streak-supplies {
  display: flex;
  gap: 8px;
  padding: 0 16px 10px;
  border-bottom: 2px dashed rgba(0, 0, 0, 0.08);
}

.streak-supply {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background:var(--paper-white);
  font-weight: bold;
  font-size: 14px;
  transition: transform 160ms cubic-bezier(0.3, 1.4, 0.5, 1);
}

.streak-supply.is-bumped { transform: scale(1.18); }
.streak-supply-max { font-weight: normal; opacity: 0.45; font-size: 12px; }
.streak-supply-rest { margin-left: auto; color: #3d7a4e; }

.streak-ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.2rem, 1fr));
  gap: 7px;
  padding: 14px 16px 6px;
}

.streak-rung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 4px 7px;
  border: 2px solid rgba(0, 0, 0, 0.16);
  border-radius: 12px;
  background: #fbf9f2;
  text-align: center;

  /* Ungeholtes tritt zurück, statt zu verschwinden: Man soll sehen, was
     kommt, ohne es mit dem zu verwechseln, was man schon hat. */
  opacity: 0.55;
  transition: opacity 260ms ease, border-color 260ms ease, transform 200ms ease;
}

.streak-rung.is-done {
  opacity: 1;
  border-color: var(--edge-strong);
  background:var(--paper-white);
}

.streak-rung.is-final {
  border-style: dashed;
  background: linear-gradient(160deg, #f6f1ff, #fffdf5);
}

.streak-rung.is-final.is-done { border-style: solid; border-color: var(--amber); }

.streak-rung.is-claimable {
  opacity: 1;
  border-color: #c2571d;
  animation: streakRungWaiting 1.8s ease-in-out infinite;
}

@keyframes streakRungWaiting {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Der Moment des Einlösens. */
.streak-rung.is-firing {
  animation: streakRungFire 420ms cubic-bezier(0.3, 1.5, 0.5, 1);
  border-color: var(--ink);
  opacity: 1;
}

@keyframes streakRungFire {
  0% { transform: scale(1); }
  40% { transform: scale(1.16); box-shadow: 0 0 0 5px rgba(226, 135, 58, 0.3); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(226, 135, 58, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .streak-rung.is-claimable,
  .streak-rung.is-firing { animation: none; }
}

.streak-rung-day {
  font-size: 11px;
  font-weight: bold;
  opacity: 0.45;
}

.streak-rung-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 28px;
}

.streak-rung-label {
  font-size: 11px;
  line-height: 1.25;
  opacity: 0.75;
}

.streak-note {
  padding: 10px 16px 4px;
  font-size: 12px;
  opacity: 0.65;
  text-align: center;
  line-height: 1.4;
}

/* Farben der Belohnungszeichen. */
.rw-ic { display: inline-flex; }
.rw-key { color: #b4881c; }
.rw-coin { color: #d4a017; }
.rw-shard { color: #6b4fbb; }
.rw-powerup { color: #2f7fb5; }
.rw-rest { color: #3d7a4e; }
.rw-img { display: block; object-fit: contain; }

/* ── Aktivitaetsstufen im Statistik-Tab ──────────────────── */

.act-today {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background:var(--paper-white);
}

.act-today-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.act-today-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: #f4f9ff;
  color: #2f7fb5;
}

.act-today-label { font-weight: bold; font-size: 15px; }
.act-today-line { font-size: 12px; opacity: 0.6; line-height: 1.3; }

.act-today-steps {
  margin-left: auto;
  font-size: 20px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

/* Der Balken misst von Stufe zu Stufe, nicht von null — wer knapp ueber
   einer Schwelle steht, soll das sehen und keinen fast vollen Balken. */
.act-bar {
  height: 9px;
  margin-top: 10px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: #f0ede4;
  overflow: hidden;
}

.act-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--forest);
  transition: width 520ms cubic-bezier(0.22, 0.9, 0.36, 1);
}

.act-bar-note { margin-top: 5px; font-size: 12px; opacity: 0.65; }

/* Die Leiter als Kette. Waagerecht scrollbar, weil zehn Stufen in kein
   Raster passen, ohne dass die Reihenfolge verlorengeht — und die
   Reihenfolge ist hier die Aussage. */
.act-ladder {
  display: flex;
  gap: 5px;
  margin-top: 12px;

  /* Platz oben, damit die angehobene Stufe nicht am Rand des Scrollbereichs
     abgeschnitten wird. */
  padding: 6px 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}

.act-ladder::-webkit-scrollbar { display: none; }

.act-chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 5.2rem;
  padding: 6px 5px 5px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--paper-white);
  text-align: center;
  opacity: 0.5;
  transition: opacity 200ms ease, border-color 200ms ease, transform 200ms ease;
}

/* Der Name gehoert dazu: Eine Zahl allein sagt nicht, was sie bedeutet. */
.act-chip-label {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2;
}

.act-chip.is-done { opacity: 1; border-color: var(--edge-strong); background: var(--paper-white); }

.act-chip.is-here {
  border-color: var(--forest);
  box-shadow: inset 0 0 0 1px var(--forest);
  background: var(--paper-white);
  transform: translateY(-2px);
}

.act-chip-icon { display: inline-flex; color: #2f7fb5; }

.act-chip-from {
  font-size: 11px;
  font-weight: bold;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.act-chip.is-here .act-chip-from { opacity: 1; }

/* ── Verlauf: Hoehenlinien der Aktivitaetsstufen ─────────── */

.sv-chart { position: relative; }

.sv-guides {
  position: absolute;
  inset: 0 0 20px 0;
  pointer-events: none;
}

.sv-guide {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 0;
}

.sv-guide-line {
  flex: 1;
  height: 0;
  border-top: 1px dashed rgba(0, 0, 0, 0.14);
}

/* Die Stufensymbole saßen links über dem ersten Balken; die Zahl rechts
   reicht, die Stufen stehen darunter unter "Aktivität". */
.sv-guide-icon {
  display: none;
  color: rgba(47, 127, 181, 0.75);
  background: var(--paper-white, #fff);
  border-radius: 3px;
}

.sv-guide-value {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: rgba(0, 0, 0, 0.35);
  background: var(--paper-white, #fff);
  padding: 0 2px;
  border-radius: 3px;
}

/* Die einzige Linie, an der wirklich etwas haengt: ab hier gibt es den
   Schluessel und die Serie zaehlt den Tag. */
.sv-guide.is-goal .sv-guide-line { border-top: 1.5px dashed var(--amber); }
.sv-guide.is-goal .sv-guide-value { color: var(--ink); font-weight: bold; }

/* ── Verlauf: Stufe und Stunden im Detail ────────────────── */

.sv-level {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
  font-size: 12px;
}

.sv-level-icon { display: inline-flex; color: #2f7fb5; }
.sv-level-label { font-weight: bold; }
.sv-level-line { opacity: 0.55; }

.sv-hours { margin-top: 8px; }

.sv-hours-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  opacity: 0.55;
  margin-bottom: 4px;
}

.sv-hours-read {
  font-weight: bold;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sv-hours-row {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 34px;
}

.sv-hour {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;

  /* Waagerecht streichen liest die Stunden ab, senkrecht scrollt die Seite. */
  touch-action: pan-y;
}

.sv-hour.active .sv-hour-bar { background: linear-gradient(180deg, #ffb64a, #e8873a); }
.sv-hour:focus-visible { outline: 2px solid var(--accent2); outline-offset: 1px; }

.sv-hour-bar {
  width: 100%;
  min-height: 1px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #5f8f73, var(--forest));
}

.sv-hours-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 10.5px;
  opacity: 0.4;
  font-variant-numeric: tabular-nums;
}

/* Die Beute fliegt zu ihrem Zaehler. */
.streak-flier {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
  transition:
    transform 420ms cubic-bezier(0.4, 0, 0.3, 1),
    opacity 120ms ease 320ms;
}

.streak-flier.is-flying {
  transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.7);
  opacity: 0;
}

/* ============================================================
   Mobile Challenge Flow & Mobile Panels
   ============================================================ */

.mobile-panel-top,
.mobile-panel-bottom {
  flex-shrink: 0;
  padding: 6px 10px;
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}

.mobile-panel-top {
  border-bottom: 1.5px dashed rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: visible;
}

.mobile-panel-bottom {
  border-top: 1.5px dashed rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: visible;
  flex: 0 0 auto;
}

#mobileChallengeFlow {
  display: none;
}

#challengeView.hidden,
#challengeView.hidden #mobileChallengeFlow {
  display: none !important;
}

@media (min-width: 901px) {
  .mobile-panel-top,
  .mobile-panel-bottom,
  .sync-bar-wrap {
    display: none;
  }

  #mobileChallengeFlow {
    display: contents;
  }
}

@media (max-width: 900px) {
  #leftPanel,
  #rightPanel {
    display: none !important;
  }

  /* Spalte statt Block, und der Fluss nimmt sich den Rest.
     Mit height: 100% auf dem Fluss beanspruchte er die volle Hoehe des
     Rahmens — alles, was darueber eingehaengt wird, etwa das Banner zum
     ablaufenden Testzeitraum, schob ihn nach unten aus dem overflow: hidden
     heraus. Sichtbar war das nur ganz unten: Der letzte Platz im Leaderboard
     liess sich nicht mehr erreichen. */
  #challengeView {
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
  }

  /* ── Karte zuerst ──────────────────────────────────────────────
     Die Karte füllt alles zwischen Kopfzeile und Tab-Leiste. Darüber
     schweben oben die Vorräte (mobile-panel-top) und unten ein Blatt mit
     Woche, Photo-Contest und Rangliste (mobile-panel-bottom), das man
     hochziehen kann. Die Karte selbst ist ein Quadrat, so groß, dass kein
     Rand frei bleibt; man verschiebt sie mit dem Finger (gestures.js). */
  #mobileChallengeFlow {
    display: block;
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  main.stage {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    touch-action: none;
  }

  .map-canvas {
    right: auto;
    bottom: auto;
    width: var(--world, 100%);
    height: var(--world, 100%);
  }

  .sync-bar-wrap {
    display: none;
  }

  .mobile-panel-top {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 950;
    padding: 0;
    background: none;
    border: 0;
    overflow: visible;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: none;
  }

  .mobile-panel-top > * {
    pointer-events: auto;
  }

  /* Das eigene Profil steht schon oben rechts in der Kopfzeile. */
  .mobile-panel-top .profile-chip {
    display: none;
  }

  .mobile-panel-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 960;
    height: 82%;
    padding: 0 12px 10px;
    background: var(--paper);
    border-top: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 28px -18px rgba(40, 25, 10, 0.55);
    overflow: hidden;
    overscroll-behavior: contain;
    will-change: transform;
  }

  .mobile-panel-bottom.is-open {
    overflow-y: auto;
  }

  .sheet-handle {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: calc(100% + 24px);
    height: 22px;
    margin: 0 -12px 4px;
    padding: 0;
    border: 0;
    background: var(--paper);
    cursor: pointer;
    touch-action: none;
  }

  .sheet-handle span {
    width: 38px;
    height: 4px;
    border-radius: 4px;
    background: var(--edge-strong);
  }

  /* Tab-Leiste unten, mit Beschriftung. */
  .tabs {
    order: 20;
    border-bottom: 0;
    border-top: 1px solid var(--edge);
    background: var(--paper);
  }

  .tab-btn {
    flex-direction: column;
    gap: 2px;
    min-height: 54px;
    border-bottom: 0;
    border-top: 3px solid transparent;
    opacity: 0.6;
  }

  .tab-btn.active {
    border-top-color: var(--forest);
    border-bottom-color: transparent;
    color: var(--forest);
  }
}

/* Beschriftung unter den Tab-Symbolen (auf großen Bildschirmen daneben). */
.tab-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

@media (min-width: 901px) {
  .tab-btn { gap: 8px; }
  .tab-label { font-size: 13px; }
  .sheet-handle { display: none; }
}

/* ============================================================
   Mobile Chips & Mini Leaderboard
   ============================================================ */

.profile-chip,
.mobile-pu-chip {
  display: flex;
  align-items: center;
  background: var(--paper-white);
  border: 1px solid var(--edge);
  border-radius: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.profile-chip {
  gap: 6px;
  padding: 4px 8px 4px 4px;
  max-width: 160px;
}

.profile-chip-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--edge);
  flex-shrink: 0;
}

.profile-chip-name {
  font-size: 12px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-pu-chip {
  gap: 4px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
}

.mini-lb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0 10px;
}

.mini-lb-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--paper-white);
  border: 1px solid var(--edge);
  border-radius: 14px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}

.mini-lb-card.is-me {
  background: var(--paper-white);
  border-color: var(--forest);
  box-shadow: inset 0 0 0 1px var(--forest);
}

.mini-lb-rank {
  font-weight: bold;
  min-width: 22px;
  text-align: center;
  font-size: 14px;
}

.mini-lb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 2px solid var(--ring, var(--edge));
  flex-shrink: 0;
}

.mini-lb-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: 15px;
  font-weight: 500;
}

.mini-lb-steps {
  opacity: 0.5;
  font-size: 12px;
  white-space: nowrap;
}

@media (min-width: 901px) {
  .mini-lb {
    display: none;
  }
}

/* ============================================================
   Profile Card
   ============================================================ */

#profileCard {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

#profilePic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ddd;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--edge);
  cursor: pointer;
  flex-shrink: 0;
}

#displayName {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  min-width: 0;
}

#displayName[aria-readonly="true"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  outline: 0 !important;
  cursor: default !important;
  pointer-events: none !important;
  color: inherit;
}

#displayName:not([aria-readonly="true"]) {
  border: 1px solid var(--edge);
  background: var(--paper-white);
  padding: 4px 8px;
  border-radius: 8px;
}

#editNameBtn {
  min-width: 38px;
  height: 34px;
  padding: 0 10px !important;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--paper-white);
  font-family: var(--font-ui);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  font-size: 13px;
}

#editNameBtn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

/* ============================================================
   Avatars, Skins & Map Elements
   ============================================================ */

.avatar {
  position: absolute;
  width: var(--avatar-size);
  height: var(--avatar-size);
  transform: translate(-50%, -50%) scale(var(--avatar-zoom));
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 12px 20px var(--shadow), 0 1px 3px rgba(0, 0, 0, 0.2);
  border: var(--avatar-ring) solid var(--ink);
  pointer-events: auto;
  cursor: pointer;
  transition:
    left 600ms ease,
    top 600ms ease,
    width 150ms ease,
    height 150ms ease;
  will-change: left, top, width, height;
}

.avatar .img,
.avatar-ghost .img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}

.avatar .tag {
  position: absolute;
  bottom: calc(var(--avatar-size) * -0.35);
  left: 50%;
  transform: translateX(-50%);
  background: #fff9e8;
  border: calc(var(--avatar-ring) * 0.7) solid var(--ink);
  border-radius: 10px;
  padding: 2px 6px;
  font-size: var(--label-font);
  white-space: nowrap;
  box-shadow: 0 3px 7px var(--shadow);
  display: none;
  z-index: 3;
}

.avatar.expanded .tag {
  display: block;
}

.avatar.mini {
  width: 28px;
  height: 28px;
}

.avatar.mini .tag,
.avatar.mini .profile-btn {
  display: none;
}

.avatar .profile-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: var(--paper-white);
  box-shadow: 0 3px 8px var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  z-index: 4;
}

.avatar.has-shield {
  box-shadow:
    0 0 0 4px rgba(100, 180, 255, 0.6),
    0 0 14px 6px rgba(100, 180, 255, 0.3) !important;
}

.avatar.is-cloaked {
  opacity: 0.4;
  filter: saturate(0.3);
}

.avatar.is-cloaked .tag::after {
  content: ' 🦎';
}



.avatar-ghost {
  position: absolute;
  width: var(--avatar-size);
  height: var(--avatar-size);
  transform: translate(-50%, -50%) scale(var(--avatar-zoom));
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.32;
  filter: saturate(0.9) blur(0.2px);
  z-index: 1;
}

.avatar-ghost.ghost-2 {
  opacity: 0.22;
}

.avatar-ghost.ghost-3 {
  opacity: 0.14;
}

/* Der Stapel eines Avatars, von hinten nach vorn:
   0  Hintergrund des Skins
   1  Hintergrund der Spendierhosen
   2  Rueckseite der Krone (hintere Zacken, Innenrand)
   3  das Bild selbst
   4  die Spendierhosen
   5  der Skin
   20 Vorderseite der Krone
   Der Skin liegt vor den Hosen, weil er die Wahl ist und die Hosen der
   Zusatz — verdeckt wird immer der Zusatz. Die Krone umschliesst den Kopf:
   hinten hinter dem Bild, vorn vor allem anderen. */
.avatar > .img,
.lb-pic-wrap > .pic,
.avatar-photo {
  position: relative;
  z-index: 3;
}

.avatar-skin-layer {
  position: absolute;
  inset: -50%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.avatar-skin-bg { z-index: 0; }
.avatar-sponsor-bg { z-index: 1; }
.avatar-sponsor-fg { z-index: 4; }
.avatar-skin-fg { z-index: 5; }

/* Die Krone. Beide Bilder sind deckungsgleich auf demselben Quadrat.
   Werte im Vergleich gerendert ausgesucht: Bei 82 % Breite sass sie
   obendrauf wie aufgestellt, ab 104 % verschwinden Stirn und Ohren und der
   dunkle Innenrand klafft. Bei 96 % liegt das Band auf dem Kopf — getragen,
   nicht abgestellt. Die Neigung kippt um die Mitte des Bandes, damit beide
   Ebenen gemeinsam kippen und die hinteren Zacken nicht verrutschen;
   ganz gerade wirkte sie steif. */
.avatar-crown-layer {
  position: absolute;
  left: 2%;
  width: 96%;
  top: -52%;
  height: 96%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(-10deg);
  transform-origin: 50% 74%;
  pointer-events: none;
}

.avatar-crown-bg { z-index: 2; }

.avatar-crown-fg {
  z-index: 20;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
}

/* Die Krone ragt ueber den Kreis hinaus. */
.has-crown { overflow: visible; }

.skin-gold > .img,
.skin-gold > .pic,
.skin-gold {
  border-radius: 100%;
  box-shadow:
    0 0 0 3px rgba(255, 215, 0, 0.7),
    0 0 18px 6px rgba(255, 215, 0, 0.35);
}

.skin-neon > .img,
.skin-neon > .pic,
.skin-neon {
  border-radius: 100%;
  box-shadow:
    0 0 0 3px rgba(0, 255, 200, 0.7),
    0 0 18px 6px rgba(0, 255, 200, 0.35);
}

.skin-dots > .img,
.skin-dots > .pic,
.skin-dots {
  border-radius: 100%;
  outline: 3px dotted #ff3f8e;
}

/* Tracks */

.track-base {
  stroke: var(--paper);
  stroke-width: var(--track-base-w);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.15));
}

.track-sketched {
  stroke: #313131;
  stroke-width: var(--track-sketch1-w);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.track-sketched.alt {
  stroke: #2a2a2a;
  stroke-width: var(--track-sketch2-w);
  stroke-dasharray: 10 8;
  opacity: 0.9;
}

/* Flags & Markers */

.marker {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Start: kleine Fahne in der Hervorhebungsfarbe des Monats, mit dem Fuß am Start. */
.start-flag {
  display: block;
  width: calc(var(--avatar-size) * 0.42);
  height: auto;
  transform: translate(28%, -38%) scale(var(--inv-zoom));
  transform-origin: 25% 92%;
  overflow: visible;
}

.start-flag-shadow { fill: rgba(40, 25, 10, 0.28); }
.start-flag-pole { stroke: #4a3a28; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.start-flag-cloth { fill: var(--ember); stroke: #4a3a28; stroke-width: 1.2; stroke-linejoin: round; }

/* Ziel: das Tier des Monats in einem Kreis. */
.goal-host {
  display: block;
  width: calc(var(--avatar-size) * 0.72);
  height: calc(var(--avatar-size) * 0.72);
  border-radius: 50%;
  background: var(--paper-white) center / cover no-repeat;
  border: 3px solid var(--amber);
  box-shadow: 0 4px 10px rgba(40, 25, 10, 0.35);
  transform: scale(var(--avatar-zoom));
}

.goal-host.is-empty {
  background: var(--amber);
}

/* Wegsteine: flach auf dem Pfad; die Zahl nur herangezoomt oder angetippt. */
.milestone-stone {
  position: absolute;
  width: 14px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 35%, #d9cfbd 0%, #a89a83 60%, #7d6f5a 100%);
  box-shadow: 0 1.5px 0 rgba(40, 25, 10, 0.35);
  transform: translate(-50%, -50%) scale(var(--inv-zoom));
  cursor: pointer;
  pointer-events: auto;
}

/* Größere Fläche zum Antippen als der Stein selbst. */
.milestone-stone::before {
  content: "";
  position: absolute;
  inset: -12px;
}

.milestone-label {
  position: absolute;
  left: 50%;
  bottom: 140%;
  transform: translateX(-50%);
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(251, 245, 230, 0.95);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(40, 25, 10, 0.3);
  opacity: 0;
  transition: opacity 180ms ease-out;
  pointer-events: none;
}

.map-zoomed .milestone-label,
.milestone-stone.is-told .milestone-label {
  opacity: 1;
}

/* Collectibles */

.coin,
.spawn-pu {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.coin {
  width: 20px;
  height: 20px;
  background: url("/img/supplies/coin.webp") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(40, 25, 10, 0.3));
  animation: coinSpin 2.2s linear infinite;
}

.coin.collected-my {
  opacity: 0.35;
  filter: grayscale(0.2);
}

.spawn-pu {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  border: 2px solid #313131;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  background: var(--paper-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  animation: puBounce 1500ms ease-in-out infinite;
}

.spawn-pu.mystery::before {
  content: "?";
  font-weight: bold;
  color: #282828;
}

/* Map Effects */

#mapEffectsLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9300;
  overflow: hidden;
  contain: layout paint;
}

.confetti {
  position: absolute;
  width: 4px;
  height: 6px;
  border-radius: 2px;
  background: #ff3f8e;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: transform, opacity;
  animation: confettiPop 720ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

.effect-glow {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 230, 120, 0.42) 0%,
    rgba(255, 193, 7, 0.22) 42%,
    rgba(255, 193, 7, 0) 72%
  );
  box-shadow:
    0 0 0 2px rgba(255, 210, 80, 0.35),
    0 0 18px rgba(255, 193, 7, 0.36);
  animation: pulseGlow 850ms ease-out forwards;
  will-change: transform, opacity;
}

.tooltip {
  position: fixed;
  z-index: 1000;
  background: var(--paper-white);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 4px 8px;
  font-size: 12px;
  box-shadow: 0 3px 8px var(--shadow);
  pointer-events: none;
  white-space: nowrap;
  max-width: min(90vw, 340px);
}

.zoom-hint {
  position: absolute;
  top: 8px;
  right: 8px;

  /* Unter die Kopfzeile (900): Der Hinweis sitzt genau dort, wo das
     Konto-Menue aufklappt, und verdeckte es mit seinen fruehreren 1000.
     Über den Randhinweisen auf Avatare (880), damit er lesbar bleibt. */
  z-index: 890;
  background: var(--paper-white);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 3px 7px;
  font-size: 12px;
  box-shadow: 0 3px 8px var(--shadow);
  pointer-events: none;
  display: none;
  display: none;
}

/* Auf dem Handy liegen oben die Vorräte; der Hinweis sitzt unten mittig
   über dem Blatt. */
@media (max-width: 900px) {
  .zoom-hint {
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(var(--sheet-peek, 90px) + 10px);
    transform: translateX(-50%);
    white-space: nowrap;
  }
}

.map-trap {
  z-index: 100;
  transition: opacity 300ms ease;
}

#eventFeed > div {
  max-width: 240px;
}

#stampedeBanner {
  backdrop-filter: blur(4px);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/* PU Icon Colors */

.pu-chip-tailwind svg { color: #2196f3; }
.pu-chip-slimetrail svg { color: #4caf50; }
.pu-chip-banana svg { color: #ff9800; }
.pu-chip-lasso svg { color: #795548; }
.pu-chip-cloak svg { color: #9c27b0; }
.pu-chip-shield svg { color: #03a9f4; }
.pu-chip-stampede svg { color: #8d6e63; }
.pu-chip-trackreader svg { color: #ff5722; }

/* ============================================================
   Animations
   ============================================================ */

@keyframes coinSpin {
  0% { transform: translate(-50%, -50%) rotateY(0); }
  50% { transform: translate(-50%, -50%) rotateY(180deg); }
  100% { transform: translate(-50%, -50%) rotateY(360deg); }
}

@keyframes puBounce {
  0% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-2px); }
  100% { transform: translate(-50%, -50%) translateY(0); }
}

@keyframes confettiPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) scale(0.45) rotate(0deg);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate(var(--dx, 0px), var(--dy, -14px))
      scale(0.85)
      rotate(var(--rot, 180deg));
  }
}

@keyframes pulseGlow {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.25);
  }
}

@keyframes slimeGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

@keyframes stampedePulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .confetti,
  .effect-glow {
    animation-duration: 1ms !important;
  }
}

/* ============================================================
   Stats View
   ============================================================ */

.Stats {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.stat-card {
  background: var(--paper-white);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 7px;
  cursor: pointer;
}

.stat-card.active {
  background: #ffe;
}

.stat-card.full {
  grid-column: 1 / -1;
  cursor: default;
}

/* Kartentitel in der Buchschrift, wie Rucksack und Rangliste. */
.stat-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.subtle {
  font-size: 12px;
  color: #555;
  opacity: 0.7;
  margin-top: 3px;
}

/* ============================================================
   Photo Quest Base
   ============================================================ */

.switch-btn {
  padding: 5px 9px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--paper-white);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}

.switch-btn.active {
  background: #ffe;
}

.pq-display {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 8px auto 0;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--edge);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5));
}

.pq-display video,
.pq-display img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  pointer-events: none;
}

.round-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: var(--paper-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.round-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.round-btn.hidden {
  display: none !important;
}

.round-btn svg {
  width: 20px;
  height: 20px;
  stroke: #222;
  stroke-width: 2;
  fill: none;
}

.pq-captionbar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}

.pq-captionbar input {
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 4px 7px;
  background: var(--paper-white);
}

.pq-savebar {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  flex-direction: column;
  gap: 5px;
}

.pq-status {
  margin-top: 5px;
  font-size: 12px;
  opacity: 0.8;
  text-align: center;
}

#pqWinners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}



/* Camera Controls */

.pq-camera-menu-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 20;
  background: rgba(255, 253, 245, 0.94);
  backdrop-filter: blur(6px);
}

.pq-camera-menu-btn.active {
  background: var(--surface-blue);
}

.pq-camera-popover {
  position: absolute;
  top: 58px;
  right: 10px;
  z-index: 30;
  width: min(300px, calc(100% - 20px));
  border: 1px solid var(--edge);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-high);
  padding: 10px;
}

.pq-camera-popover-title {
  font-size: 13px;
  font-weight: 800;
  opacity: 0.65;
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.pq-camera-popover-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

#pqCameraSelect {
  min-width: 0;
  flex: 1;
  min-height: 40px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--paper-white);
  color: var(--ink);
  padding: 7px 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-low);
}

#pqRefreshCamerasBtn {
  min-width: 42px;
  height: 40px;
  padding: 0 10px;
}

#pqCamBtn,
#bountyCaptureBtn {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 10;
  width: 58px;
  height: 58px;
  border-width: 3px;
  box-shadow: var(--shadow-mid);
}

#pqCamBtn svg,
#bountyCaptureBtn svg {
  width: 25px;
  height: 25px;
}

#pqRetakeIcon,
#bountyRetakeBtn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 10;
}

#pqCameraControls:not(.pq-camera-popover) {
  display: none !important;
}

/* ============================================================
   Modals & Onboarding
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9000 !important;
  padding: 16px;
}

#monthTransitionModal,
#challengeSummaryDialog {
  z-index: 9100 !important;
}

.modal.active {
  display: flex;
}

.modal .box {
  background: var(--paper-white);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 24px var(--shadow);
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}

.modal .row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(180deg, var(--paper-sunk) 0%, var(--paper) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}

/* Die Karte des Monats dahinter (onboarding.js), unscharf und unter einem
   Papierschleier, damit die Karte im Vordergrund lesbar bleibt. Sie wandert
   langsam, als schaue man über den Weg. */
.onboarding-overlay::before,
.onboarding-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.onboarding-overlay::before {
  inset: -6%;
  background: var(--ob-map, none) center / cover no-repeat;
  filter: blur(3px) saturate(0.9);
  opacity: 0;
  transition: opacity 900ms ease;
  animation: obDrift 38s ease-in-out infinite alternate;
}

.onboarding-overlay.has-map::before { opacity: 1; }

.onboarding-overlay::after {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(251, 245, 230, 0.35) 0%, rgba(251, 245, 230, 0.7) 75%),
    linear-gradient(180deg, rgba(251, 245, 230, 0.1), rgba(241, 231, 208, 0.45));
}

.onboarding-card { position: relative; z-index: 1; }

@keyframes obDrift {
  from { transform: scale(1.04) translate(-1.5%, -1%); }
  to { transform: scale(1.1) translate(1.5%, 1.5%); }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-overlay::before { animation: none; }
}

.onboarding-overlay.hidden,
.ob-step.hidden {
  display: none !important;
}

.onboarding-card {
  background: var(--paper-white);
  border: 1px solid var(--edge);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  padding: 22px 18px 16px;
  max-width: 400px;
  width: 100%;
}

.ob-text {
  text-align: center;
  opacity: 0.8;
  margin: 0 0 16px;
}

.ob-fineprint {
  font-size: 12.5px;
  margin: 12px 0 8px;
}

.ob-quote {
  text-align: center;
  font-style: italic;
  margin: 0 0 12px;
}

/* Dialoge, die das Onboarding öffnet (Gruppe gründen, beitreten, einladen),
   liegen über ihm. Sonst gingen sie hinter dem Onboarding auf, unsichtbar,
   und der Knopf schien nichts zu tun. */
body.ob-open #groupSetupModal,
body.ob-open #inviteModal {
  z-index: 10000 !important;
}

.ob-btn {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

.ob-btn.ob-primary {
  background: var(--accent4);
  color: var(--paper-white);
  font-weight: bold;
}

.ob-btn.ob-secondary {
  background: var(--paper-white);
  flex: 1;
}

.ob-btn.ob-skip {
  background: transparent;
  border: none;
  box-shadow: none;
  opacity: 0.7;
  flex: 1;
  text-decoration: underline;
}

.ob-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 12px;
}

.ob-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  transition: all 200ms;
}

.ob-dot.active {
  background: var(--accent4);
  transform: scale(1.3);
}

/* ============================================================
   Buttons
   ============================================================ */

.ck-btn {
  min-height: 42px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 8px 14px;
  background: var(--paper-white);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  transition:
    transform 90ms ease,
    box-shadow 90ms ease,
    background 120ms ease,
    opacity 120ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.ck-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.5;
  flex-shrink: 0;
}

.ck-btn:active:not(:disabled) {
  transform: translateY(2px) scale(0.985);
}

.ck-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.ck-btn-primary {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--on-forest);
}

.ck-btn-secondary {
  background: var(--paper-white);
}

.ck-btn-soft {
  background: var(--surface-soft);
}

.ck-btn-cheer {
  background: var(--surface-orange);
}

/* Gefährliches (Gruppe verlassen) ist ein leiser Textknopf in der
   Hervorhebungsfarbe, keine rosa Pille. */
.ck-btn-danger {
  background: transparent;
  border-color: transparent;
  color: var(--ember);
  padding-left: 4px;
  padding-right: 4px;
}

.ck-btn-ghost {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  opacity: 0.78;
}

.ck-btn-icon {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
}

.ck-btn-small {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 13px;
}

/* ============================================================
   Profile Modal
   ============================================================ */

.profile-dialog {
  width: min(92vw, 460px);
  border-radius: var(--radius-xl) !important;
  padding: 18px !important;
  background: var(--surface);
  box-shadow: var(--shadow-high) !important;
}

.profile-dialog-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.profile-dialog #pmPic {
  width: 92px !important;
  height: 92px !important;
  border-radius: 50%;
  border: 3.5px solid var(--pm-ring, var(--edge)) !important;
  box-shadow: 0 6px 14px -6px rgba(40, 25, 10, 0.5);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.profile-dialog-main {
  flex: 1;
  min-width: 0;
}

.profile-dialog #pmName {
  font-family: var(--font-display);
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: 1.05;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}

.profile-steps-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--paper-sunk);
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 700;
}

.profile-steps-chip svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.profile-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.profile-primary-actions .ck-btn {
  flex: 1 1 auto;
}

.profile-section {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1.5px dashed rgba(40, 40, 40, 0.14);
}

.profile-section-title {
  font-size: 13px;
  font-weight: 800;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  margin-bottom: 8px;
}

.profile-dialog-footer {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.profile-badges-title {
  font-weight: 800;
  margin-bottom: 8px;
}

.profile-badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.profile-badge-card {
  width: 70px;
  height: 84px;
  border: 1px solid var(--edge);
  border-radius: 15px;
  background: var(--paper-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  padding: 5px;
  font-family: var(--font-ui);
  position: relative;
  transition: transform 90ms ease, box-shadow 90ms ease;
}

.profile-badge-card:active {
  transform: scale(0.96);
}

.profile-badge-card.rank-1 {
  background: #fff4bd;
}

.profile-badge-card.rank-2 {
  background: #f1f3f5;
}

.profile-badge-card.rank-3 {
  background: #ffe1c2;
}

.profile-badge-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(40, 40, 40, 0.18);
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-badge-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-badge-rank {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.profile-badge-month {
  font-size: 12px;
  opacity: 0.65;
  line-height: 1;
}

.profile-stat-pill {
  border: 2px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  background: var(--paper-white);
  padding: 4px 9px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.profile-stat-pill i {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

/* ============================================================
   Edit Profile Modal
   ============================================================ */


/* ============================================================
   PQ History Cards
   ============================================================ */

.pq-history-card {
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
  background: var(--paper-white);
}

.pq-history-card .pq-h-title {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 4px;
}

.pq-history-card .pq-h-results {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.pq-history-card .pq-h-entry {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  font-size: 12px;
}

.pq-history-card .pq-h-entry img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ============================================================
   Bounty Board
   ============================================================ */

/* Die Palette des Bretts gilt auch fuer den Leser einer Reihe. Der haengt im
   body — ausserhalb des Bretts waren --paper-light und --paper-deep nicht
   definiert, der ganze Papierhintergrund damit ungueltig und das Blatt
   durchsichtig. Nur die Farben, nicht der Rest dieses Blocks: Padding,
   Holz und isolation gehoeren dem Brett allein. */
.chain-modal {
  --ink: #1a120a;
  --ink-soft: #2a1f12;
  --paper: #e8d4a3;
  --paper-light: #f0e0b8;
  --paper-deep: #c9ad77;
}

#BoardView.bounty-board {
  --ink: #1a120a;
  --ink-soft: #2a1f12;
  --paper: #e8d4a3;
  --paper-light: #f0e0b8;
  --paper-deep: #c9ad77;
  --paper-edge: #8a6936;
  --stamp-red: #9a2418;
  --stamp-gray: #3a3530;
  --season: #7a3a12;

  --board-bg: #25201a;
  --board-bg-accent: #2e271f;
  --board-text-muted: #a89177;
  --board-text-strong: #e8d3a8;

  position: relative;
  padding: 14px 14px 60px;
  color: var(--ink);
  font-family: "IM Fell English", Georgia, serif;
  overflow-y: auto;
  isolation: isolate;
  background-color: var(--board-bg);
  background-image: radial-gradient(ellipse 80% 60% at 50% 0%, #2e271f91, transparent 70%),
                    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(0, 0, 0, 0.4), transparent 70%),
                    url(/img/bounties/_board_bg.webp);
  background-position: center top;
  background-attachment: local;
  background-repeat: repeat-y;
  background-size: 100% auto;
}

#BoardView.bounty-board::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.6;
  z-index: -1;
}

.paper-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

#BoardView .bounty-status {
  position: relative;
  z-index: 3;
  min-height: 20px;
  color: var(--board-text-muted);
  font-family: "IM Fell English", serif;
  font-style: italic;
  font-size: 12px;
  padding: 0 4px;
  margin-bottom: 10px;
  opacity: 1;
}

#BoardView .bounty-status:not(:empty) {
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(ellipse 60% 40% at 22% 14%, rgba(140, 90, 40, 0.22), transparent 60%),
    radial-gradient(ellipse 40% 30% at 78% 24%, rgba(120, 70, 30, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 35% at 16% 78%, rgba(150, 100, 50, 0.22), transparent 60%),
    radial-gradient(ellipse 35% 25% at 84% 88%, rgba(130, 80, 40, 0.2), transparent 60%),
    radial-gradient(circle 1px at 12% 18%, rgba(80, 50, 20, 0.5), transparent 70%),
    radial-gradient(circle 1px at 64% 32%, rgba(80, 50, 20, 0.4), transparent 70%),
    radial-gradient(circle 1px at 32% 72%, rgba(80, 50, 20, 0.45), transparent 70%),
    radial-gradient(ellipse at 50% 40%, var(--paper-light) 0%, var(--paper) 55%, var(--paper-deep) 100%);
  filter: url(#paperRoughen);
  box-shadow:
    inset 0 0 60px rgba(120, 80, 30, 0.18),
    inset 0 0 6px rgba(80, 40, 10, 0.25);
  padding: 2em;
}

#BoardView .bounty-status:not(:empty):before {
  content: "💬 ";
}

#BoardView .bounty-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 6px 0 20px;
  min-height: 60vh;
}

#BoardView .bounty-card.poster {
  --tilt: -0.8deg;
  position: relative;
  color: var(--ink);
  font-family: "IM Fell English", serif;
  transform: rotate(var(--tilt));
  transition: transform 0.25s ease, filter 0.25s ease;
  filter:
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.8))
    drop-shadow(0 5px 2px rgba(0, 0, 0, 0.4));
  isolation: isolate;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

#BoardView .bounty-card.poster::before {
  display: none;
}

#BoardView .poster:nth-child(2n) { --tilt: 1.1deg; }
#BoardView .poster:nth-child(3n) { --tilt: -1.4deg; }
#BoardView .poster:nth-child(4n) { --tilt: 0.7deg; }
#BoardView .poster:nth-child(5n) { --tilt: -0.4deg; }

#BoardView .sheet,
#BoardView .bounty-paper {
  position: relative;
  color: var(--ink);
  background:
    radial-gradient(ellipse 60% 40% at 22% 14%, rgba(140, 90, 40, 0.22), transparent 60%),
    radial-gradient(ellipse 40% 30% at 78% 24%, rgba(120, 70, 30, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 35% at 16% 78%, rgba(150, 100, 50, 0.22), transparent 60%),
    radial-gradient(ellipse 35% 25% at 84% 88%, rgba(130, 80, 40, 0.2), transparent 60%),
    radial-gradient(circle 1px at 12% 18%, rgba(80, 50, 20, 0.5), transparent 70%),
    radial-gradient(circle 1px at 64% 32%, rgba(80, 50, 20, 0.4), transparent 70%),
    radial-gradient(circle 1px at 32% 72%, rgba(80, 50, 20, 0.45), transparent 70%),
    radial-gradient(ellipse at 50% 40%, var(--paper-light) 0%, var(--paper) 55%, var(--paper-deep) 100%);
  filter: url(#paperRoughen);
  box-shadow:
    inset 0 0 60px rgba(120, 80, 30, 0.18),
    inset 0 0 6px rgba(80, 40, 10, 0.25);
}

#BoardView .sheet {
  padding: 36px 18px 18px;
}

#BoardView .sheet::before,
#BoardView .bounty-paper::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(60, 30, 10, 0.45);
  pointer-events: none;
}

#BoardView .sheet::after,
#BoardView .bounty-paper::after {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(60, 30, 10, 0.22);
  pointer-events: none;
}

#BoardView .nail {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a847a 0%, #4a443c 30%, #221f1c 70%, #000 100%);
  box-shadow:
    inset 0 -2px 3px rgba(0, 0, 0, 0.7),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    0 3px 4px rgba(0, 0, 0, 0.55);
  z-index: 4;
}

#BoardView .nail::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2a2622, #000 70%);
}

/* Bounty Typography */

#BoardView .poster-eyebrow,
#BoardView .bounty-kicker {
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
  opacity: 0.75;
}

#BoardView .poster-eyebrow {
  letter-spacing: 0.36em;
  margin: 0 0 2px;
}

#BoardView .bounty-kicker {
  letter-spacing: 0.34em;
  margin: 0 0 3px;
}

#BoardView .poster-headline,
#BoardView .bounty-title {
  font-family: "IM Fell DW Pica SC", "Cinzel", serif;
  font-weight: 400;
  line-height: 0.95;
  text-align: center;
  color: var(--ink);
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.4);
}

#BoardView .poster-headline {
  font-size: clamp(30px, 8vw, 42px);
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}

#BoardView .bounty-title {
  font-size: clamp(31px, 8vw, 44px);
  letter-spacing: 0.05em;
  margin: 0 0 7px;
}

#BoardView .poster-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
  color: rgba(40, 20, 5, 0.65);
  font-size: 12px;
}

#BoardView .poster-rule::before,
#BoardView .poster-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(40, 20, 5, 0.45);
}

#BoardView .poster-rule-glyph {
  font-family: "Cinzel", serif;
  letter-spacing: 0.3em;
  font-size: 11px;
  text-transform: uppercase;
}

#BoardView .poster-target-wrap {
  text-align: center;
  margin: 2px 0 10px;
}

#BoardView .poster-target {
  font-family: "IM Fell DW Pica SC", serif;
  font-size: clamp(18px, 5vw, 22px);
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

#BoardView .poster-target-subtitle {
  font-family: "IM Fell English", Georgia, serif;
  font-size: clamp(13px, 3.5vw, 15px);
  line-height: 1.05;
  text-align: center;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  opacity: 0.78;
  margin-top: 1px;
}

/* Bounty Poster Content */

#BoardView .poster-art {
  position: relative;
  height: 160px;
  margin: 6px auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#BoardView .poster-art img {
  max-height: 100%;
  max-width: 78%;
  width: auto;
  height: auto;
  filter: sepia(0.35) contrast(1.1) brightness(0.94);
  mix-blend-mode: multiply;
}

#BoardView .poster-art-placeholder {
  width: 160px;
  height: 140px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Caveat", cursive;
  font-size: 14px;
  color: rgba(40, 20, 5, 0.55);
  text-align: center;
  line-height: 1.2;
  white-space: pre-line;
}

#BoardView .poster-art-placeholder svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}

#BoardView .poster-art-placeholder span {
  position: relative;
  padding: 0 14px;
}

#BoardView .poster-story {
  font-family: "Caveat", cursive;
  font-size: 18px;
  line-height: 1.28;
  color: var(--ink-soft);
  margin: 6px 6px 12px;
  white-space: pre-wrap;
}

#BoardView .poster-reward {
  margin: 12px -4px 4px;
  border-top: 1px dashed rgba(50, 25, 5, 0.55);
  border-bottom: 1px dashed rgba(50, 25, 5, 0.55);
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

#BoardView .reward-label {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.75;
}

#BoardView .reward-value {
  font-family: "IM Fell DW Pica SC", serif;
  font-size: clamp(20px, 5.4vw, 24px);
  letter-spacing: 0.06em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#BoardView .reward-value .coin {
  width: 22px;
  height: 22px;
  background: url("/img/supplies/coin.webp") center / contain no-repeat;
  filter: sepia(0.25) drop-shadow(0 1px 1px rgba(60, 30, 5, 0.35));
  display: inline-block;
  position: relative;
  animation: none;
  transform: none;
  border: none;
}

#BoardView .reward-extra {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: "IM Fell English", serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-soft);
  opacity: 0.85;
}

#BoardView .signature {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-direction: row-reverse;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(40, 20, 5, 0.7);
  border-top: 1px solid rgba(60, 30, 5, 0.22);
  padding-top: 6px;
}

#BoardView .signature .by {
  font-style: italic;
  font-family: "IM Fell English", serif;
  font-size: 12px;
  line-height: 1.2;
}

#BoardView .signature .age {
  font-family: "Caveat", cursive;
  font-size: 15px;
  text-align: right;
  flex-shrink: 0;
}

/* Bounty Submit */

#BoardView .submit {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--edge);
  background: linear-gradient(180deg, #f5e2af 0%, #d9bd7d 100%);
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 0 rgba(120, 80, 30, 0.5),
    0 3px 0 rgba(60, 30, 5, 0.6),
    0 6px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#BoardView .submit:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -3px 0 rgba(120, 80, 30, 0.5),
    0 1px 0 rgba(60, 30, 5, 0.6),
    0 3px 5px rgba(0, 0, 0, 0.25);
}

#BoardView .submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

#BoardView .submit i,
#BoardView .submit svg {
  width: 16px;
  height: 16px;
}

/* Bounty States */

#BoardView .season {
  position: relative;
  margin: 6px -8px 6px;
  padding: 6px 14px;
  background: linear-gradient(180deg, #c5811e 0%, #8e5510 100%);
  color: #fff4d8;
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.35),
    0 2px 3px rgba(0, 0, 0, 0.35);
}

#BoardView .season::before,
#BoardView .season::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
}

#BoardView .season::before {
  left: 0;
  border-width: 6px 0 0 10px;
  border-color: transparent transparent transparent #4a2c08;
}

#BoardView .season::after {
  right: 0;
  border-width: 6px 10px 0 0;
  border-color: transparent #4a2c08 transparent transparent;
}

#BoardView .rare-ribbon {
  position: absolute;
  top: 14px;
  right: -2px;
  background: linear-gradient(180deg, #9a2418, #6a0f08);
  color: #fce6c2;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 4px 10px 4px 12px;
  z-index: 3;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 200, 160, 0.25);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7px 50%);
}

#BoardView .wax {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c44638 0%, #8a1d14 55%, #5a0e0a 100%);
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.5),
    inset 0 2px 3px rgba(255, 200, 180, 0.25),
    0 3px 4px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel", serif;
  color: rgba(255, 230, 200, 0.85);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.04em;
  transform: rotate(-8deg);
  z-index: 3;
  clip-path: polygon(
    50% 0%, 62% 6%, 74% 2%, 82% 12%, 94% 14%, 96% 26%,
    104% 38%, 96% 50%, 100% 62%, 92% 74%, 96% 86%, 84% 92%,
    74% 100%, 62% 94%, 50% 100%, 38% 94%, 26% 100%, 16% 92%,
    6% 86%, 8% 74%, 0% 62%, 4% 50%, -2% 38%, 4% 26%,
    6% 14%, 18% 12%, 26% 2%, 38% 6%
  );
}

#BoardView .wax.sealed-wax {
  background: radial-gradient(circle at 35% 35%, #3a3530 0%, #1a1816 60%, #000 100%);
}

#BoardView .wax-mark {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

#BoardView .claim-photo {
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  width: 72%;
  aspect-ratio: 1 / 1;
  background: #1a120a;
  background-size: cover;
  background-position: center;
  border: 5px solid var(--paper-light);
  box-shadow: 0 0px 1px rgba(0, 0, 0, 0.5),
    0 2px 2px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  z-index: 2;
  pointer-events: none;
  /* filter: saturate(0.5); */
  filter: sepia(0.4) saturate(0.6);
}

#BoardView .stamp {
  position: absolute;
  top: 80%;
  left: 50%;
  /* transform: translate(-50%, -50%) rotate(-11deg); */
  padding: 7px 18px;
  border: 4px double currentColor;
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(22px, 7vw, 30px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 6;
  opacity: 0.9;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.04 0.08' numOctaves='3' seed='4'/><feDisplacementMap in='SourceGraphic' scale='8'/></filter><rect width='100%' height='100%' fill='black' filter='url(%23g)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.04 0.08' numOctaves='3' seed='4'/><feDisplacementMap in='SourceGraphic' scale='8'/></filter><rect width='100%' height='100%' fill='black' filter='url(%23g)'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background: color-mix(in hsl, var(--paper), transparent 20%);
}

#BoardView .stamp.claimed {
  color: var(--stamp-red);
  transform: translate(-50%, -50%) rotate(-9deg);
}

#BoardView .stamp.abandoned {
  color: var(--stamp-gray);
  transform: translate(-50%, -50%) rotate(-14deg);
  opacity: 0.55;
}

#BoardView .stamp.sealed {
  color: var(--ink-soft);
  font-size: 18px;
  letter-spacing: 0.32em;
  border-width: 3px;
  padding: 6px 14px;
  transform: translate(-50%, -50%) rotate(-6deg);
  top: 78%;
}

#BoardView .poster.claimed .sheet {
  filter: url(#paperRoughen) sepia(0.18);
}

#BoardView .poster.abandoned .sheet {
  filter: url(#paperRoughen) grayscale(0.45) brightness(0.92);
}

#BoardView .claim-msg {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(80, 40, 10, 0.07);
  border: 1px solid rgba(80, 40, 10, 0.18);
  font-family: "Caveat", cursive;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink-soft);
  text-align: center;
}

#BoardView .claim-msg strong {
  display: block;
  font-family: "IM Fell DW Pica SC", serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
  font-weight: 400;
}

#BoardView .abandoned-msg {
  opacity: 0.78;
}

#BoardView .poster.sealed .sheet {
  background: radial-gradient(ellipse at 50% 40%, #d4b885 0%, #a88a52 60%, #6e5424 100%);
  color: #3a280e;
}

#BoardView .poster.sealed .poster-headline,
#BoardView .poster.sealed .poster-target,
#BoardView .poster.sealed .poster-target-subtitle,
#BoardView .poster.sealed .poster-eyebrow {
  color: #3a280e;
}

#BoardView .poster.sealed .poster-story {
  color: #4a3414;
}

#BoardView .poster.sealed .poster-art img {
  opacity: 0.6;
  filter: sepia(0.4) brightness(0.7) contrast(1.1);
}

/* Bounty Empty */

#BoardView .bounty-empty {
  border: 1px dashed rgba(232, 211, 168, 0.28);
  border-radius: 6px;
  background: rgba(20, 14, 10, 0.35);
  padding: 22px;
  text-align: center;
  color: var(--board-text-muted);
  font-family: "IM Fell English", serif;
  opacity: 1;
}

#BoardView .bounty-empty-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--board-text-strong);
  font-family: "Cinzel", serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#BoardView .bounty-empty-title i,
#BoardView .bounty-empty-title svg {
  width: 18px;
  height: 18px;
}

#BoardView .bounty-empty-text {
  margin-top: 7px;
  font-size: 13px;
  opacity: 0.78;
}

/* Bounty Header */

#BoardView .bounty-head {
  max-width: 1240px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 4px auto 18px;
  padding: 6px 4px 2px;
}

#BoardView .bounty-head-paper,
#BoardView .bounty-shots {
  border: none;
  border-radius: 0;
  clip-path: none;
  filter:
    url(#paperRoughen)
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}

#BoardView .bounty-head-paper {
  flex: 1 1 auto;
  min-width: 0;
  padding: 28px 22px 20px;
  transform: rotate(-0.7deg);
}

#BoardView .bounty-shots {
  flex: 0 0 auto;
  min-width: 124px;
  padding: 22px 14px 16px;
  transform: rotate(1.1deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  font-family: "IM Fell English", serif;
}

#BoardView .bounty-sub {
  font-family: "Caveat", cursive;
  font-size: clamp(16px, 4.2vw, 20px);
  line-height: 1.25;
  color: var(--ink-soft);
  text-align: center;
  margin: 8px auto 0;
  max-width: 720px;
  display: none;
}

#BoardView .bounty-shots-label {
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.75;
}

#BoardView .bounty-shots-value {
  font-family: "IM Fell DW Pica SC", "Cinzel", serif;
  font-size: 31px;
  font-weight: 400;
  line-height: 0.55;
  color: var(--ink);
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45);
  margin: 0 0 10px;
}

#BoardView .bounty-shots-value small {
  font-family: "IM Fell English", serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-soft);
  opacity: 0.7;
}

#BoardView .bounty-shots-next {
  margin-top: 7px;
  padding-top: 6px;
  width: 100%;
  border-top: 1px solid rgba(50, 25, 5, 0.42);
  font-family: "IM Fell English", serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0.82;
  display: none;
}

#BoardView .bounty-head-paper > .nail,
#BoardView .bounty-shots > .nail {
  top: 10px;
  width: 10px;
  height: 10px;
}

#BoardView .bounty-head-paper > .nail::after,
#BoardView .bounty-shots > .nail::after {
  inset: 4px;
}

/* Bounty Responsive */

@media (min-width: 480px) {
  #BoardView .sheet {
    padding: 42px 22px 22px;
  }
}

@media (min-width: 700px) {
  #BoardView.bounty-board {
    padding: 24px 30px 70px;
  }

  #BoardView .bounty-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 26px;
  }

  #BoardView .poster:hover {
    transform: rotate(0deg) translateY(-3px);
    filter:
      drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55))
      drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
    z-index: 5;
  }
}

@media (min-width: 1100px) {
  #BoardView.bounty-board {
    padding: 34px 50px 80px;
  }

  #BoardView .bounty-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 38px;
    max-width: 1240px;
    margin: 0 auto;
  }

  #BoardView .bounty-head,
  #BoardView .bounty-status {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 560px) {
  #BoardView .bounty-head {
    gap: 10px;
    margin-bottom: 14px;
    padding-inline: 0;
  }

  #BoardView .bounty-head-paper {
    padding: 28px 15px 16px;
  }

  #BoardView .bounty-shots {
    min-width: 104px;
    padding: 22px 10px 14px;
  }

  #BoardView .bounty-title {
    font-size: clamp(28px, 8vw, 36px);
  }

  #BoardView .bounty-sub {
    font-size: 16px;
  }

  #BoardView .bounty-shots-value {
    font-size: 27px;
  }

  #BoardView .bounty-shots-value small {
    font-size: 12px;
  }
}

/* ============================================================
   Photo Quest Redesign
   ============================================================ */

.photoquest-redesign {
  --pq-ink: #2a221b;
  --pq-ink-soft: #4a3d31;
  --pq-paper: #fbf3e2;
  --pq-card: #fffaf0;
  --pq-warm: #ffefc7;
  --pq-leaf: #4f7a3a;
  --pq-gold: #c8932a;
  --pq-rust: #b35a2a;
  --pq-rule: rgba(60, 40, 15, 0.18);

  /* Im Stil der übrigen App: dieselben Schriften (die Handschrift wird zur
     App-Schrift, Titel in der Buchschrift) und dasselbe Papier. */
  --font-hand: var(--font-ui);

  background: var(--paper);
  color: var(--pq-ink);
  padding: 14px;
}

.pq-new-hero {
  position: relative;
  padding: 4px 2px 10px;
}

.pq-new-stamp {
  position: absolute;
  top: 6px;
  right: 2px;
  transform: rotate(10deg);
  background: var(--pq-rust);
  color: #fff7e1;
  font-family: var(--font-hand);
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.pq-new-week {
  font-family: var(--font-hand);
  font-size: 13px;
  color: #6b4a1f;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  opacity: 0.85;
}

.pq-new-giver-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 5px;
}

.pq-new-avatar,
.pq-history-animal {
  border-radius: 50%;
  border: 3px solid var(--pq-ink);
  background: radial-gradient(circle at 35% 30%, #ffe1a6, #d49c3f);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.pq-new-avatar {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18), inset 0 0 0 3px var(--paper-white);
}

.pq-new-avatar img,
.pq-history-animal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pq-new-avatar img {
  border-radius: 50%;
  display: block;
}

.pq-new-avatar svg,
.pq-new-avatar i {
  width: 30px;
  height: 30px;
  stroke-width: 2.6;
}

.pq-new-ribbon {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pq-ink);
  color: #fff7e1;
  font-family: var(--font-hand);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 8px;
  letter-spacing: 0.4px;
  white-space: nowrap;
  display: none;
}

.pq-new-speech {
  flex: 1;
  min-width: 0;
  position: relative;
  background: #fffdf2;
  border: 2px solid var(--pq-ink);
  border-radius: 4px 14px 14px 14px;
  padding: 10px 12px 12px;
  box-shadow: 3px 4px 0 rgba(60, 40, 15, 0.18);
}

.pq-new-speech::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 12px;
  width: 14px;
  height: 14px;
  background: #fffdf2;
  border-left: 2px solid var(--pq-ink);
  border-bottom: 2px solid var(--pq-ink);
  transform: rotate(45deg);
}

.pq-new-speaker {
  font-family: var(--font-hand);
  font-size: 14px;
  color: #6b4a1f;
  opacity: 0.85;
  margin-bottom: 2px;
}

.pq-new-title {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  margin: 2px 0 4px;
}

.pq-new-desc {
  font-size: 14px;
  line-height: 1.4;
  color: var(--pq-ink-soft);
  margin: 0;
}

.pq-new-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1.5px dashed var(--pq-rule);
}

.pq-new-meta-cell {
  text-align: center;
  padding: 4px 2px;
}

.pq-new-label {
  font-family: var(--font-hand);
  font-size: 12px;
  color: var(--pq-ink-soft);
  opacity: 0.75;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.pq-new-value {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  color: var(--pq-ink);
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

.pq-new-value svg,
.pq-new-value i {
  width: 18px;
  height: 18px;
}

.pq-new-timer .pq-new-value {
  color: var(--pq-rust);
}

.pq-reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f1e1b3;
  border: 1.5px solid var(--pq-ink);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 800;
}

.pq-reward-chip svg {
  width: 14px;
  height: 14px;
}

.pq-coin {
  font-size: 15px;
  line-height: 1;
}

.pq-status-strip {
  margin-top: 12px;
  background: var(--pq-warm);
  border: 1.5px dashed var(--pq-ink);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-hand);
  font-size: 15px;
  color: var(--pq-ink);
}

.pq-status-strip.done {
  background: #d9eccb;
}

.pq-status-strip svg,
.pq-status-strip i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Eigene Photo-Quest-Einreichung */

.photoquest-redesign .pq-my-submission {
  position: relative;
  margin-top: 12px;
  padding: 10px;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 239, 199, 0.95), transparent 42%),
    var(--pq-card);
  border: 2px solid var(--pq-ink);
  border-radius: 14px;
  box-shadow: 3px 4px 0 rgba(60, 40, 15, 0.18);
  color: var(--pq-ink);
  overflow: hidden;
}

/* kleine Foto-Ecken / Scrapbook-Look */
.photoquest-redesign .pq-my-submission::before,
.photoquest-redesign .pq-my-submission::after {
  content: "";
  position: absolute;
  width: 46px;
  height: 16px;
  background: rgba(255, 247, 225, 0.82);
  border: 1px solid rgba(60, 40, 15, 0.16);
  box-shadow: 0 1px 2px rgba(60, 40, 15, 0.08);
  z-index: 2;
  pointer-events: none;
}

.photoquest-redesign .pq-my-submission::before {
  top: 42px;
  left: -10px;
  transform: rotate(-34deg);
}

.photoquest-redesign .pq-my-submission::after {
  top: 42px;
  right: -10px;
  transform: rotate(34deg);
}

.photoquest-redesign .pq-my-submission-head {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1.5px dashed var(--pq-rule);
}

.photoquest-redesign .pq-my-submission-label {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.1;
  color: var(--pq-ink);
}

.photoquest-redesign .pq-my-submission-label::before {
  content: "✓ ";
  color: var(--pq-leaf);
}

.photoquest-redesign .pq-my-submission-meta {
  margin-top: 2px;
  font-family: var(--font-hand);
  font-size: 13px;
  line-height: 1.15;
  color: var(--pq-ink-soft);
  opacity: 0.78;
}

.photoquest-redesign .pq-my-submission-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-height: min(58vh, 620px);
  object-fit: contain;
  background:
    linear-gradient(45deg, rgba(60, 40, 15, 0.055) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(60, 40, 15, 0.055) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(60, 40, 15, 0.055) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(60, 40, 15, 0.055) 75%),
    #1b1712;
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  border: 2px solid var(--pq-ink);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 3px 0 rgba(60, 40, 15, 0.16);
}

.photoquest-redesign .pq-my-submission-caption {
  position: relative;
  z-index: 3;
  margin-top: 9px;
  padding: 7px 10px;
  background: #fff8e0;
  border: 1.5px dashed var(--pq-ink);
  border-radius: 10px;
  font-family: var(--font-hand);
  font-size: 15px;
  line-height: 1.25;
  color: var(--pq-ink-soft);
  white-space: pre-wrap;
}

/* Abstand zur CTA, wenn die Karte sichtbar ist */
.photoquest-redesign .pq-my-submission:not(.hidden) + .pq-new-cta-row {
  margin-top: 14px;
}

/* Kleine Screens */
@media (max-width: 420px) {
  .photoquest-redesign .pq-my-submission {
    padding: 9px;
    border-radius: 12px;
  }

  .photoquest-redesign .pq-my-submission-label {
    font-size: 14px;
  }

  .photoquest-redesign .pq-my-submission-meta {
    font-size: 12.5px;
  }

  .photoquest-redesign .pq-my-submission-caption {
    font-size: 14.5px;
  }
}

.pq-new-cta-row {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.pq-new-cta {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border: 2.5px solid var(--pq-ink);
  border-radius: 12px;
  background: var(--pq-rust);
  color: #fff7e1;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(60, 40, 15, 0.5);
}

.pq-new-cta:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(60, 40, 15, 0.5);
}

.pq-new-cta svg,
.pq-new-cta i {
  width: 18px;
  height: 18px;
}

.pq-new-display {
  margin-top: 14px;
  max-width: 560px;
}

.pq-new-savebar {
  margin-top: 8px;
}

.pq-section-head {
  margin: 24px 0 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 2px;
}

.pq-section-head h3 {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 18px;
  margin: 0;
}

.pq-section-line {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--pq-ink) 0 4px, transparent 4px 8px);
  opacity: 0.45;
  transform: translateY(-3px);
}

.pq-section-meta {
  font-family: var(--font-hand);
  font-size: 14px;
  color: var(--pq-ink-soft);
  opacity: 0.7;
}

/* Photo Quest History Selector */

.pq-history-selector {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 14px 12px;
  margin: 0 -14px;
}

.pq-history-tab {
  flex-shrink: 0;
  width: 122px;
  background: var(--pq-card);
  border: 2px solid var(--pq-ink);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(60, 40, 15, 0.3);
  text-align: left;
  font-family: var(--font-ui);
  color: var(--pq-ink);
}

.pq-history-tab.active {
  background: var(--pq-warm);
  box-shadow: 0 4px 0 var(--pq-rust);
}

.pq-history-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ddd center / cover no-repeat;
  border: 1.5px solid var(--pq-ink);
  border-radius: 7px;
  position: relative;
}

.pq-history-rank {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--pq-ink);
  color: #fff7e1;
  font-family: var(--font-hand);
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
}

.pq-history-crown {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--pq-gold);
  border: 1.5px solid var(--pq-ink);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pq-ink);
}

.pq-history-crown svg {
  width: 12px;
  height: 12px;
}

.pq-history-week {
  font-family: var(--font-hand);
  font-size: 12px;
  color: var(--pq-ink-soft);
  opacity: 0.8;
  margin-top: 6px;
  line-height: 1.1;
}

.pq-history-title {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.15;
  margin-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Photo Quest History Detail */

.pq-history-panel {
  margin-top: 4px;
}

.pq-history-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 2px 10px;
  border-bottom: 1.5px dashed var(--pq-rule);
}

.pq-history-animal {
  width: 38px;
  height: 38px;
  border-width: 2.5px;
  overflow: hidden;
}

.pq-history-status {
  font-family: var(--font-hand);
  font-size: 12px;
  background: #d9eccb;
  border: 1.5px solid var(--pq-ink);
  border-radius: 999px;
  padding: 2px 8px;
}

.pq-history-summary {
  background: #fff8e0;
  border: 1.5px dashed var(--pq-ink);
  border-radius: 10px;
  padding: 8px 10px 8px 12px;
  font-family: var(--font-hand);
  font-size: 14.5px;
  line-height: 1.35;
  margin-bottom: 12px;
}

/* Photo Quest Podium */

.pq-podium {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  align-items: end;
  gap: 6px;
  margin: 6px 0 14px;
}

.pq-podium-card {
  position: relative;
  border: 2px solid var(--pq-ink);
  border-radius: 10px 10px 4px 4px;
  background: var(--pq-warm);
  padding: 8px 6px 10px;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-ui);
}

.pq-podium-card.gold {
  transform: translateY(-6px);
  background: #fff1c2;
  box-shadow: 0 4px 0 var(--pq-gold);
}

.pq-podium-card.silver {
  background: #efe7d3;
}

.pq-podium-card.bronze {
  background: #f0d9c0;
}

.pq-podium-card.selected {
  z-index: 5;
  box-shadow:
    0 0 0 2.5px var(--pq-ink),
    0 6px 0 var(--pq-rust),
    0 10px 18px rgba(60, 40, 15, 0.22);
}

.pq-podium-card.gold.selected {
  transform: translateY(-8px);
}

.pq-podium-card.silver.selected,
.pq-podium-card.bronze.selected {
  transform: translateY(-2px);
}

.pq-podium-card.selected::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-right: 2px solid var(--pq-ink);
  border-bottom: 2px solid var(--pq-ink);
  transform: translateX(-50%) rotate(45deg);
  z-index: 6;
}

.pq-podium-card.selected .pq-podium-rank {
  box-shadow:
    0 0 0 2px #fff7e1,
    0 0 0 4px var(--pq-rust);
}

.pq-podium-rank {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pq-ink);
  color: #fff7e1;
  font-weight: 800;
  font-size: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff7e1;
  box-shadow: 0 0 0 2px var(--pq-ink);
}

.pq-podium-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ddd center / cover no-repeat;
  border: 1.5px solid var(--pq-ink);
  border-radius: 6px;
}

.pq-podium-name {
  font-weight: 800;
  font-size: 12px;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  height: 2em;
  line-break: anywhere;
}

.pq-podium-score {
  font-family: var(--font-hand);
  font-size: 12px;
  opacity: 0.75;
}

/* Photo Quest Runners & Result Detail */

.pq-runners {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1.5px dashed var(--pq-rule);
}

.pq-runner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fffaf0;
  border: 1.5px solid var(--pq-rule);
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
}

.pq-runner.me {
  background: #fff1c2;
  border-color: var(--pq-gold);
}

.pq-runner-rank {
  font-family: var(--font-hand);
  font-size: 13px;
  width: 26px;
  opacity: 0.8;
}

.pq-runner-photo {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: #ddd center / cover no-repeat;
  border: 1.5px solid rgba(60, 40, 15, 0.55);
  flex-shrink: 0;
}

.pq-runner-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pq-runner-score {
  font-family: var(--font-hand);
  font-size: 13px;
  opacity: 0.75;
}

.pq-result-detail {
  background: #fffdf2;
  border: 2px solid var(--pq-ink);
  border-radius: 12px;
  padding: 10px;
  margin: 8px 0 10px;
  box-shadow: 0 4px 0 rgba(60, 40, 15, 0.18);
}

.pq-result-detail-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #ddd center / cover no-repeat;
  border: 1.5px solid var(--pq-ink);
  border-radius: 8px;
}

.pq-result-detail-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
}

.pq-result-detail-rank {
  font-weight: 800;
  font-size: 13px;
  color: #fff7e1;
  background: var(--pq-ink);
  border-radius: 999px;
  padding: 2px 10px;
}

.pq-result-detail-name {
  font-weight: 800;
  font-size: 16px;
  flex: 1;
  min-width: 0;
}

.pq-result-detail-score {
  font-weight: 800;
  font-size: 18px;
  color: var(--pq-rust);
}

.pq-result-caption {
  margin-top: 8px;
  background: #f1e1b3;
  border: 1.5px solid var(--pq-ink);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--font-hand);
  font-size: 15px;
}

.pq-result-comment {
  margin-top: 10px;
  padding: 8px 10px;
  background: #fff8e0;
  border: 1.5px dashed var(--pq-ink);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.4;
}

.pq-empty {
  text-align: center;
  padding: 20px 12px;
  font-family: var(--font-hand);
  color: var(--pq-ink-soft);
  opacity: 0.75;
}

/* Loader */

.is-loading-value {
  position: relative;
  color: transparent !important;
  min-width: 4ch;
  display: inline-block;
  border-radius: 8px;
  overflow: hidden;
}

.is-loading-value::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.06),
    rgba(0,0,0,0.14),
    rgba(0,0,0,0.06)
  );
  animation: ckSkeleton 1.1s infinite linear;
}

@keyframes ckSkeleton {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.subtle-loading {
  opacity: 0.65;
}
/* Kurz hervorheben, wenn man über "Heute" hierher springt. */
#activityCard.is-highlighted {
  animation: ckHighlight 1.2s ease;
}

@keyframes ckHighlight {
  0% { box-shadow: 0 0 0 0 rgba(47, 111, 237, 0); }
  25% { box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.22); }
  100% { box-shadow: 0 0 0 0 rgba(47, 111, 237, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #activityCard.is-highlighted { animation: none; }
}

/* ── Statistik: Tagesverlauf ─────────────────────────────────────────── */

.sv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.sv-range { display: flex; gap: 4px; }

.sv-range-btn {
  border: 1px solid var(--edge);
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.sv-range-btn.active { background: var(--ink); color: var(--paper); }

.sv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 10px;
}

.sv-legend span { display: inline-flex; align-items: center; gap: 5px; }

.sv-swatch {
  width: 11px;
  height: 11px;
  border: 1px solid var(--edge);
  border-radius: 3px;
  display: inline-block;
}

.sv-walked { background: var(--forest); }
.sv-bonus  { background: #ffd23f; }
.sv-malus  { background: #ff6b6b; }

/* Kein Balken, sondern eine gestrichelte Lücke: fehlende Daten sind
   etwas anderes als null gelaufene Schritte. */
.sv-nodata { background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.25) 2px, rgba(0,0,0,0.25) 4px); }

.sv-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 150px;
  overflow-x: auto;
  padding-bottom: 20px;

  /* Beide Achsen: "pan-x" allein gab die senkrechte Achse nicht frei — wer
     den Finger auf dem Verlauf hatte, konnte die Seite nicht scrollen. Der
     Browser entscheidet nach der Richtung der Bewegung. */
  touch-action: pan-x pan-y;
}

.sv-col {
  flex: 1 0 14px;
  min-width: 14px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.sv-col:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

.sv-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}

.sv-seg { width: 100%; border: 1px solid var(--edge); border-bottom: 0; }
.sv-seg.walked { background: var(--forest); }
.sv-seg.bonus  { background: #ffd23f; border-radius: 5px 5px 0 0; }
.sv-seg.walked.top { border-radius: 5px 5px 0 0; }

.sv-seg.malus {
  background: #ff6b6b;
  border: 2px dashed var(--ink);
  border-top: 0;
  opacity: 0.85;
}

.sv-gap {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0,0,0,0.22) 2px, rgba(0,0,0,0.22) 4px);
}

/* Der gewaehlte Tag als hinterlegtes Band statt als Rahmen.
   Der Rahmen lag mit negativen Abstaenden ausserhalb der Spalte und wurde vom
   Scrollbereich oben und unten abgeschnitten — sichtbar blieb ein
   angeschnittenes Rechteck. Ein Band kann nicht ueberstehen. */
.sv-col.active { background: rgba(0, 178, 255, 0.13); border-radius: 6px; }
.sv-col.active .sv-seg { filter: brightness(1.06) saturate(1.1); }

.sv-col.active .sv-tick {
  font-weight: bold;
  opacity: 1;
  color: var(--ink);
}

.sv-tick {
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10.5px;
  opacity: 0.6;
  white-space: nowrap;
}

.sv-detail {
  border-top: 1px dashed rgba(0,0,0,0.15);
  padding-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  min-height: 4.2em;
}

.sv-detail-date { font-weight: bold; margin-bottom: 4px; }

.sv-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sv-row .v { font-variant-numeric: tabular-nums; }
.sv-note { opacity: 0.7; font-size: 12.5px; margin-top: 4px; }
.sv-plus { color: #0a8f5f; }
.sv-minus { color: #c0392b; }

/* ── Icons ───────────────────────────────────────────────────────────── */

.lu, .lu svg { display: inline-block; vertical-align: -0.15em; flex: none; }
.lu svg { width: 100%; height: 100%; stroke-width: 2; }

.has-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rank-gold   { color: #d4a017; }
.rank-silver { color: #98a2ad; }
.rank-bronze { color: #b06a3b; }

.rank-num { font-variant-numeric: tabular-nums; opacity: 0.75; }

.icon-coin  { color: #d4a017; }
.icon-flame { color: #e8590c; }
.icon-crown { color: #d4a017; }
.icon-sponsor { color: #e07b39; }

/* Schalter fuer die Zusatzschichten des Avatars (Krone, Spendierhosen). */
.ep-layer-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  background:var(--paper-white);
}

/* Der Rahmen der Profilvorschau ist so gross wie das Bild. Alle Ebenen
   (Skin, Hosen, Krone) sind relativ zu ihm positioniert. */
.ep-preview-frame {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto;
}

.ep-layer-toggle.is-on { background: #fffdf0; }

.ep-layer-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ein Schalter sagt an/aus ohne Verb. Die Beschriftung nennt nur noch die
   Sache — "Krone anzeigen" war als Zustand gemeint und wurde als
   Aufforderung gelesen. */
.ep-switch {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: #e6e2d8;
  transition: background 180ms ease;
}

.ep-layer-toggle.is-on .ep-switch { background: var(--forest); }

.ep-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:var(--paper-white);
  border: 1px solid var(--edge);
  box-sizing: border-box;
  transition: transform 180ms cubic-bezier(0.3, 1.3, 0.5, 1);
}

.ep-layer-toggle.is-on .ep-switch-knob { transform: translateX(18px); }

@media (prefers-reduced-motion: reduce) {
  .ep-switch,
  .ep-switch-knob { transition: none; }
}

/* Die Spendierhosen hatten hier einen schimmernden Ring, solange es kein
   Bild für sie gab. Jetzt gibt es eins, und es liegt als eigene Ebene im
   Avatar-Stapel — der Ring wäre nur noch Kitsch daneben. */

/* ============================================================
   Ladezustände: Gerüste, Punkte, Spinner

   Grundsatz: Ein Gerüst zeigt die Form dessen, was gleich kommt,
   und ersetzt niemals bereits sichtbaren Inhalt. Bewegung nur so
   viel, dass klar ist: Es passiert etwas.
   ============================================================ */

.sk {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
}

.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.09),
    rgba(0, 0, 0, 0)
  );
  animation: ckSkeleton 1.3s infinite linear;
}

.sk-line { height: 12px; }
.sk-line + .sk-line { margin-top: 8px; }
.sk-title { height: 20px; border-radius: 6px; }
.sk-thumb { height: 104px; border-radius: 10px; }

.sk-pill {
  display: inline-block;
  vertical-align: middle;
  height: 14px;
  width: 52px;
}

.sk-w25 { width: 25%; }
.sk-w40 { width: 40%; }
.sk-w55 { width: 55%; }
.sk-w70 { width: 70%; }
.sk-w85 { width: 85%; }
.sk-w100 { width: 100%; }

.sk-card {
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: var(--paper-white);
  padding: 10px;
}

.sk-row {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.sk-strip {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 132px;
  padding: 4px 0;
}

.sk-bar {
  flex: 1;
  border-radius: 6px 6px 3px 3px;
}

/* Der Übergang vom Gerüst zum Inhalt: Einträge kommen nacheinander herein. */
.ck-appear {
  animation: ckAppear 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--ck-appear-delay, 0ms);
}

@keyframes ckAppear {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.sk-circle { border-radius: 50%; }

.sk-btn {
  width: 74px;
  height: 28px;
  border-radius: 10px;
}

/* Shop-Karte im Ladezustand: dieselbe Form wie die echte Karte. */
.sk-shop-card {
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 10px;
  background:var(--paper-white);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sk-shop-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sk-shop-head .sk-line { flex: 1; }

.sk-shop-desc { min-height: 46px; }

.sk-shop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

/* Auf Papier wirken neutrale Graustufen wie Schmutz. */
#BoardView .sheet .sk,
#BoardView .bounty-paper .sk {
  background: rgba(70, 45, 20, 0.13);
}

#BoardView .sheet .sk::after,
#BoardView .bounty-paper .sk::after {
  background: linear-gradient(
    90deg,
    rgba(255, 250, 235, 0),
    rgba(255, 250, 235, 0.38),
    rgba(255, 250, 235, 0)
  );
}

/* Leaderboard-Zeile im Ladezustand. */
.mini-lb-card.is-skeleton { cursor: default; }

/* Die Sprechblase denkt nach. */
.dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 1em;
  vertical-align: middle;
}

.dots > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.25;
  animation: ckDot 1.25s ease-in-out infinite;
}

.dots > span:nth-child(2) { animation-delay: 0.16s; }
.dots > span:nth-child(3) { animation-delay: 0.32s; }

@keyframes ckDot {
  0%, 65%, 100% { opacity: 0.22; transform: translateY(0); }
  30% { opacity: 0.8; transform: translateY(-3px); }
}

.ck-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--ink);
  animation: ckSpin 0.75s linear infinite;
  vertical-align: -3px;
}

@keyframes ckSpin {
  to { transform: rotate(360deg); }
}

.ck-loading-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .sk::after,
  .dots > span,
  .ck-spinner,
  .ck-appear {
    animation: none;
  }

  .dots > span { opacity: 0.45; }
}

/* ============================================================
   Gruppenübersicht

   Als Sheet von unten statt als Dialog in der Mitte: Der Inhalt
   ist lang, und auf dem Handy gehört Langes an den Daumen. Die
   Reihenfolge folgt der Frage, die jemand beim Öffnen hat —
   wer sind wir, bis wann läuft Plus, wer ist dabei, was kann
   ich tun. Das Verlassen steht zuletzt und abgesetzt.
   ============================================================ */

.go-modal {
  align-items: flex-end;
  padding: 0;
}

@media (min-width: 620px) {
  .go-modal { align-items: center; padding: 24px; }
}

.go-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: 92dvh;
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  /* backwards, nicht both: Nach dem Auffahren muss die Animation den
     transform wieder freigeben, sonst ueberschreibt ihr Endkeyframe den
     Inline-transform des Wischens (Animationen schlagen Inline-Styles). */
  animation: goRise 260ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

@media (min-width: 620px) {
  .go-sheet { border-radius: 20px; animation-name: goFade; }
}

@keyframes goRise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes goFade {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

.go-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--paper-white);
}

.go-head-title {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.go-close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  color: inherit;
}

.go-close:hover { background: rgba(0, 0, 0, 0.1); }

.go-body {
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.go-card {
  padding: 14px;
  background: var(--paper-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
}

.go-identity { padding-bottom: 12px; }

.go-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.go-name {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.go-name-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 9px;
  background:var(--paper-white);
}

.go-icon-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
  color: inherit;
}

.go-icon-btn:hover { background: rgba(0, 0, 0, 0.1); }
.go-icon-ok { background: rgba(46, 107, 76, 0.16); }

.go-meta {
  margin-top: 6px;
  font-size: 12.5px;
  opacity: 0.6;
}

/* ── Plus ──────────────────────────────────────────────────── */

.go-plus { border-width: 1px; }
.go-plus-active { background: linear-gradient(180deg, #fffdf2, #fff6dd); border-color: rgba(190, 150, 40, 0.35); }
.go-plus-trial { background: linear-gradient(180deg, #f6fbff, #e9f4ff); border-color: rgba(60, 130, 190, 0.3); }
.go-plus-grace { background: linear-gradient(180deg, #fff8f3, #ffeee2); border-color: rgba(190, 110, 50, 0.35); }
.go-plus-off,
.go-plus-muted { background: var(--paper-white); }

.go-plus-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.go-plus-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.06);
}

.go-plus-title {
  display: block;
  font-weight: 650;
  font-size: 15px;
}

.go-plus-text {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  opacity: 0.7;
  line-height: 1.45;
}

.go-pay-lines {
  margin: 12px 0 0;
  border-top: 1px dashed rgba(0, 0, 0, 0.14);
}

.go-pay-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
}

.go-pay-line + .go-pay-line { border-top: 1px dashed rgba(0, 0, 0, 0.09); }

.go-pay-label { opacity: 0.65; white-space: nowrap; }
.go-pay-month { opacity: 0.75; font-weight: 600; }

.go-pay-value {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  text-align: right;
}

.go-payer {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(46, 107, 76, 0.14);
  font-size: 12px;
  font-weight: 600;
}

.go-pay-none { opacity: 0.45; font-size: 12.5px; }

.go-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}

.go-cta:hover { filter: brightness(1.14); }
.go-cta:active { transform: scale(0.985); }

.go-cta-hint {
  margin-top: 7px;
  font-size: 12px;
  text-align: center;
  opacity: 0.55;
  line-height: 1.45;
}

/* ── Mitglieder ────────────────────────────────────────────── */

.go-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.go-section-head h3,
.go-zone h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.5;
}

.go-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: none;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.05);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  color: inherit;
}

.go-link:hover { background: rgba(0, 0, 0, 0.1); }

.go-members {
  list-style: none;
  margin: 0;
  padding: 0;
}

.go-member {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}

.go-member + .go-member { border-top: 1px solid rgba(0, 0, 0, 0.06); }

.go-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e4e4e4 center/cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.go-member-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.go-member-name {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14.5px;
  font-weight: 600;
}

.go-member-sub {
  font-size: 12px;
  opacity: 0.55;
}

.go-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.go-badge-admin { background: rgba(60, 110, 180, 0.16); color: #2d568e; }
.go-badge-sponsor { background: rgba(46, 107, 76, 0.16); color: #26654a; }
.go-badge-me { background: rgba(0, 0, 0, 0.07); opacity: 0.7; }

.go-row-menu {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  opacity: 0.45;
  color: inherit;
}

.go-row-menu:hover { background: rgba(0, 0, 0, 0.06); opacity: 0.9; }

.go-row-actions {
  position: absolute;
  right: 0;
  top: calc(100% - 4px);
  z-index: 5;
  min-width: 224px;
  padding: 5px;
  background: var(--paper-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  animation: amDrop 140ms ease both;
}

.go-row-actions button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.go-row-actions button:hover:not(:disabled) { background: rgba(0, 0, 0, 0.05); }
.go-row-actions button:disabled { opacity: 0.35; cursor: not-allowed; }
.go-row-actions .go-danger { color: #ae3a22; }
.go-row-actions .go-danger:hover { background: rgba(174, 58, 34, 0.08); }

.go-empty { padding: 14px 0; opacity: 0.5; }

/* ── Gruppe verlassen ──────────────────────────────────────── */

.go-zone {
  border-color: rgba(174, 58, 34, 0.22);
  background: rgba(174, 58, 34, 0.035);
}

.go-zone p {
  margin: 6px 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0.7;
}

.go-leave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  border: 1px solid rgba(174, 58, 34, 0.4);
  border-radius: 11px;
  background: transparent;
  color: #ae3a22;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.go-leave:hover { background: rgba(174, 58, 34, 0.08); }

.go-status {
  display: none;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 13px;
  line-height: 1.45;
}

.go-status.is-visible { display: block; }
.go-status.is-error { background: rgba(174, 58, 34, 0.1); color: #ae3a22; }

@media (prefers-reduced-motion: reduce) {
  .go-sheet,
  .go-row-actions,
  #accountMenu {
    animation: none;
  }
}

/* ============================================================
   Auftragsreihen

   Ein Faden über dem Brett: Woher die Reihe kommt, wie weit sie
   ist, und wer welches Glied gelöst hat. Beim Abschluss wird
   daraus eine Bildergeschichte — die Fotos der Gruppe, in der
   Reihenfolge, in der sie entstanden sind.
   ============================================================ */

/* Die Reihe ist ein Zettel wie die anderen: Papier, Doppelrahmen und Nagel
   kommen von .sheet, Neigung und Schatten von hier. */
.bounty-chain {
  position: relative;
  margin: 4px 4px 22px;
  transform: rotate(-0.5deg);
  filter:
    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.8))
    drop-shadow(0 5px 2px rgba(0, 0, 0, 0.4));
  font-family: "IM Fell English", Georgia, serif;
}

#BoardView .chain-sheet { padding: 34px 20px 18px; }

.bounty-chain .poster-eyebrow { margin-bottom: 4px; }

.bounty-chain-next {
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  text-align: center;
  opacity: 0.7;
  line-height: 1.4;
}

.bounty-chain-next:empty { display: none; }

.chain-read {
  display: block;
  margin: 10px auto 0;
  padding: 4px 10px;
  border: 0;
  border-bottom: 1px dashed rgba(60, 30, 10, 0.5);
  background: none;
  font-family: "IM Fell English", Georgia, serif;
  font-size: 15px;
  font-style: italic;
  color: var(--ink);
  cursor: pointer;
}

/* Der Leser: die Reihe als Geschichte, Kapitel fuer Kapitel.
   Er haengt im body, nicht im Brett — #BoardView isoliert seinen Stapel,
   und darin lag er unter der Kopfzeile. Das Papier traegt er deshalb
   selbst, statt es von #BoardView .sheet zu erben. */
.modal.chain-modal {
  padding: 16px;

  /* Dunkel genug, dass das Brett zurueckweicht: Gelesen wird der Zettel,
     nicht das Holz drumherum. */
  background: rgba(18, 10, 4, 0.84);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: chainFade 200ms ease both;
}

.chain-modal.is-leaving { animation: chainFadeOut 180ms ease both; }

@keyframes chainFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes chainFadeOut { to { opacity: 0; } }

.chain-reader {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;

  /* Feste Hoehe statt der des Inhalts. Vorher sprang das Blatt beim
     Blaettern zwischen fast bildschirmhoch und halb so hoch. Lange
     Kapitel scrollen jetzt darin, kurze stehen mittig. */
  height: min(82dvh, 700px);
  padding: 18px 20px 14px;
  color: var(--ink);
  font-family: "IM Fell English", Georgia, serif;

  background:
    radial-gradient(ellipse 60% 40% at 22% 14%, rgba(140, 90, 40, 0.18), transparent 60%),
    radial-gradient(ellipse 40% 30% at 78% 24%, rgba(120, 70, 30, 0.14), transparent 60%),
    radial-gradient(ellipse 50% 35% at 16% 78%, rgba(150, 100, 50, 0.18), transparent 60%),
    radial-gradient(ellipse 35% 25% at 84% 88%, rgba(130, 80, 40, 0.16), transparent 60%),
    radial-gradient(circle 1px at 12% 18%, rgba(80, 50, 20, 0.5), transparent 70%),
    radial-gradient(circle 1px at 64% 32%, rgba(80, 50, 20, 0.4), transparent 70%),
    radial-gradient(circle 1px at 32% 72%, rgba(80, 50, 20, 0.45), transparent 70%),
    radial-gradient(ellipse at 50% 40%, var(--paper-light) 0%, var(--paper) 55%, var(--paper-deep) 100%);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.55),
    inset 0 0 60px rgba(120, 80, 30, 0.18),
    inset 0 0 6px rgba(80, 40, 10, 0.25);

  /* Vom Brett genommen: kommt naeher und richtet sich gerade. */
  animation: chainLift 260ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

/* Der Doppelrahmen der Aushaenge. */
.chain-reader::before,
.chain-reader::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(60, 30, 10, 0.4);
}

.chain-reader::before { inset: 8px; }
.chain-reader::after { inset: 11px; border-color: rgba(60, 30, 10, 0.2); }

@keyframes chainLift {
  from { opacity: 0; transform: translateY(14px) rotate(-1.2deg) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .modal.chain-modal,
  .chain-modal.is-leaving,
  .chain-reader { animation: none; }
}

.chain-reader-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 8px;
  border-bottom: 1px dashed rgba(60, 30, 10, 0.25);
}

.chain-reader-eyebrow {
  flex: 1;
  min-width: 0;
  padding-left: 30px;
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.7;
}

/* Immer erreichbar: Er steht im Kopf des Blattes, nicht im scrollenden
   Text. */
.chain-reader-close {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1.5px solid rgba(60, 30, 10, 0.5);
  border-radius: 50%;
  background: rgba(255, 252, 240, 0.6);
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.chain-reader-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 12px 4px 12px;
  text-align: center;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* Unten kommt noch etwas: Der Text laeuft sichtbar aus, statt hart an der
   Kante zu enden. */
.chain-reader-body.has-more {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 44px), transparent);
}

.chain-reader-page { margin: auto 0; }

.chain-reader-body.turn-left { animation: chainTurnLeft 260ms ease both; }
.chain-reader-body.turn-right { animation: chainTurnRight 260ms ease both; }

@keyframes chainTurnLeft {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes chainTurnRight {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chain-reader-body.turn-left,
  .chain-reader-body.turn-right { animation: none; }
}

.chain-reader-kicker {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.6;
}

.chain-reader-title {
  margin: 4px 0 12px;
  font-family: "Cinzel", serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.chain-reader-text {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}

.chain-reader-sign {
  margin-top: 4px;
  font-style: italic;
  text-align: right;
  opacity: 0.75;
}

.chain-reader-hint {
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: 12px;
  opacity: 0.55;
}

/* Das Foto in seinem eigenen Seitenverhaeltnis. Vorher auf 4:3
   zugeschnitten — das Motiv war nicht mehr ganz zu sehen. */
.chain-reader-figure {
  margin: 14px 0 6px;
}

.chain-reader-photo {
  display: block;
  max-width: 100%;

  /* Hochkant-Fotos sonst so hoch, dass die Antwort des Auftraggebers erst
     nach langem Scrollen kommt — und die gehoert zum Kapitel dazu. */
  max-height: 36dvh;
  margin: 0 auto;
  object-fit: contain;
  border: 6px solid #fbf6e9;
  outline: 1px solid rgba(60, 30, 10, 0.35);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transform: rotate(-1deg);
  background: #e9e2cf;
}

.chain-reader-photo.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 160px;
  font-size: 13px;
  opacity: 0.55;
  transform: none;
}

.chain-reader-figure figcaption {
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  opacity: 0.65;
}

/* Die Antwort des Auftraggebers: das Kapitelende, auf das der naechste
   Zettel Bezug nimmt. */
.chain-reader-reply {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid rgba(60, 30, 10, 0.35);
  font-size: 15px;
  font-style: italic;
  line-height: 1.45;
  text-align: left;
  background: rgba(255, 250, 235, 0.45);
}

.chain-reader-open {
  margin-top: 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  opacity: 0.75;
}

.chain-reader-active {
  margin-top: 10px;
  padding: 8px 16px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.chain-reader-veiled { padding: 24px 0 10px; }

.chain-reader-veil-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  border: 2px dashed rgba(60, 30, 10, 0.45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel", serif;
  font-size: 26px;
  opacity: 0.6;
}

.chain-reader-veiled .chain-reader-text { text-align: center; }

.chain-reader-nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(60, 30, 10, 0.3);
}

.chain-reader-prev,
.chain-reader-next {
  width: 40px;
  height: 40px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.chain-reader-prev:disabled,
.chain-reader-next:disabled { opacity: 0.25; cursor: default; }

.chain-reader-dots { display: flex; gap: 7px; }

.chain-reader-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1.5px solid rgba(60, 30, 10, 0.55);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.chain-reader-dot.is-claimed { background: #2e6b4c; border-color: #2e6b4c; }
.chain-reader-dot.is-active { background: #e8b431; border-color: #b4881c; }
.chain-reader-dot.is-pending { border-style: dashed; }
.chain-reader-dot.is-prologue { background: rgba(60, 30, 10, 0.35); }
.chain-reader-dot.is-ending { background: #b4881c; border-color: #8a6614; border-radius: 2px; transform: rotate(45deg); }
.chain-reader-dot.is-ending.is-current { transform: rotate(45deg) scale(1.45); }

/* Das Ende: alle Funde der Reihe als kleine Bilderreihe über dem Text. */
.chain-end-photos {
  display: flex;
  justify-content: center;
  margin: 6px 0 14px;
}
.chain-end-photo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: center / cover no-repeat #e9dcc0;
  border: 3px solid #fbf5e6;
  box-shadow: 0 2px 6px rgba(60, 30, 10, 0.25);
  margin-left: -10px;
}
.chain-end-photo:first-child { margin-left: 0; }
.chain-end-photo:nth-child(odd) { transform: rotate(-4deg); }
.chain-end-photo:nth-child(even) { transform: rotate(5deg) translateY(3px); }
.chain-end-wait { font-style: italic; opacity: 0.8; }
.chain-reader-dot.is-current { transform: scale(1.45); box-shadow: 0 0 0 2px rgba(255, 250, 235, 0.9); }

.bounty-chain-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.bounty-chain-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.bounty-chain-count {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  white-space: nowrap;
}

.bounty-chain-premise {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.85;
}

/* Der Faden: die Glieder als Kette, verbunden durch eine Linie. */
.bounty-chain-steps {
  position: relative;
  display: flex;
  gap: 6px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.bounty-chain-steps::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 26px;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.25) 0 6px,
    transparent 6px 11px
  );
  z-index: 0;
}

/* Die Glieder teilen sich die Breite, statt fest 84 Pixel zu nehmen. Mit
   dem Innenrand des Papiers passten vier feste Glieder nicht mehr in die
   Reihe, und das letzte war angeschnitten. Erst unter 58 Pixeln je Glied
   wird gescrollt. */
.chain-step {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.chain-step-dot {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: var(--paper-white) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 2px 6px var(--shadow);
}

.chain-step.is-claimed .chain-step-dot {
  border-color: #2e6b4c;
  box-shadow: 0 0 0 2px rgba(46, 107, 76, 0.25), 0 2px 6px var(--shadow);
}

/* Die Nummer verschwindet nur, wenn wirklich ein Bild daliegt.
   Vorher stand hier color: transparent fuer jedes geloeste Glied — lud das
   Bild nicht, blieb ein leerer weisser Kreis ohne jede Angabe. */
.chain-step-dot.has-photo { color: transparent; }

.chain-step {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
}

.chain-step.is-claimed { cursor: pointer; }
.chain-step.is-claimed:active .chain-step-dot { transform: scale(0.94); }
.chain-step.is-claimed:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }
.chain-step-dot { transition: transform 140ms ease; }

.chain-step.is-active .chain-step-dot {
  background: #fffbe6;
  border-width: 3px;
  animation: chainPulse 2.2s ease-in-out infinite;
}

.chain-step.is-pending .chain-step-dot {
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.05) 0 5px,
    transparent 5px 10px
  );
  color: rgba(0, 0, 0, 0.35);
  border-style: dashed;
}

@keyframes chainPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.5), 0 2px 6px var(--shadow); }
  50% { box-shadow: 0 0 0 6px rgba(255, 179, 0, 0), 0 2px 6px var(--shadow); }
}

.chain-step-name {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.chain-step-who {
  font-family: var(--font-ui);
  font-size: 11px;
  opacity: 0.55;
}

/* Kennzeichnung am Aushang selbst */
.poster-chain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 2px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.poster-chain::before,
.poster-chain::after {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .chain-step.is-active .chain-step-dot { animation: none; }
}

/* ============================================================
   Gruppen-Setup

   Der erste Bildschirm ist eine Wahl, kein Formular: zwei
   gleichwertige Wege, jeder mit einem Satz erklärt. Erst danach
   kommt das Feld, das zum gewählten Weg gehört.
   ============================================================ */

.gs-box {
  max-width: 420px;
  width: 100%;
}

.gs-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gs-hero {
  text-align: center;
  margin-bottom: 6px;
}

.gs-hero > svg,
.gs-hero .lu {
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
}

.gs-hero h2 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.gs-hero p {
  margin: 6px 0 0;
  font-size: 13.5px;
  opacity: 0.75;
  line-height: 1.5;
}

/* Die beiden Wege: gleiches Gewicht, damit keiner vorgegeben wirkt. */
.gs-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--paper-white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.gs-option:hover { border-color: var(--edge-strong); }
.gs-option:active { transform: scale(0.985); }

.gs-option-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
}

.gs-option-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.gs-option-title {
  font-weight: bold;
  font-size: 15px;
}

.gs-option-sub {
  font-size: 12.5px;
  opacity: 0.65;
  line-height: 1.35;
}

.gs-option > svg:last-child,
.gs-option > .lu:last-child {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: 0.35;
}

.gs-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 4px;
  margin-bottom: 2px;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
}

.gs-back:hover { background: rgba(0, 0, 0, 0.05); opacity: 1; }
.gs-back > svg, .gs-back .lu { width: 16px; height: 16px; }

.gs-title {
  margin: 0;
  font-size: 19px;
  font-weight: bold;
}

.gs-lead {
  margin: 0;
  font-size: 13.5px;
  opacity: 0.75;
  line-height: 1.5;
}

.gs-label {
  font-size: 11px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.gs-input-row {
  display: flex;
  gap: 6px;
}

.gs-view input[type="text"] {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 11px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  box-sizing: border-box;
  background: var(--paper-white);
  color: inherit;
}

.gs-paste {
  flex: 0 0 auto;
  width: 46px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--paper-white);
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gs-paste:hover { background: rgba(0, 0, 0, 0.05); }

.gs-primary {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--accent4);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: bold;
}

.gs-primary:disabled { opacity: 0.6; cursor: default; }

.gs-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  border: 2px dashed var(--ink);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: inherit;
}

.gs-secondary:hover { background: rgba(0, 0, 0, 0.04); }
.gs-secondary > svg, .gs-secondary .lu { width: 18px; height: 18px; }

.gs-hint {
  font-size: 12.5px;
  opacity: 0.7;
  line-height: 1.45;
  min-height: 1em;
}

.gs-error {
  display: none;
  padding: 9px 11px;
  border-radius: 8px;
  background: rgba(174, 58, 34, 0.1);
  color: #ae3a22;
  font-size: 13px;
  line-height: 1.45;
}

.gs-error.is-visible { display: block; }

.gs-note {
  padding: 9px 11px;
  border-radius: 8px;
  background: rgba(0, 192, 130, 0.1);
  font-size: 12.5px;
  line-height: 1.5;
}

/* Der Sucher: quadratisch, mit einem Rahmen, der zeigt, wohin der Code soll. */
.gs-scanner {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  border: 1px solid var(--edge);
}

.gs-scanner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gs-scanner-frame {
  position: absolute;
  inset: 18%;
  border-radius: 10px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: -1px;
}

.gs-scanner-frame::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  animation: gsScanLine 2.4s ease-in-out infinite;
}

@keyframes gsScanLine {
  0%, 100% { transform: translateY(-46px); opacity: 0.35; }
  50% { transform: translateY(46px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-scanner-frame::after { animation: none; }
}

/* ============================================================
   Kisten

   Auf der Karte stehen nur die Kisten, die noch vor einem
   liegen — eingesammelte verschwinden, statt als Geist stehen
   zu bleiben. Die drei Stufen unterscheiden sich in der
   Silhouette, nicht nur in der Farbe: Auf 20 Pixel und bunter
   Karte trägt Farbe allein zu wenig.
   ============================================================ */

/* Kisten auf der Strecke: das kleine Truhenbild, am Pfad stehend. Sie
   wachsen beim Zoomen mit, aber langsamer als die Karte (wie Profilbilder). */
.map-box {
  position: absolute;
  width: 26px;
  aspect-ratio: 480 / 501;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -70%) scale(var(--avatar-zoom, 1));
  transform-origin: 50% 70%;
  cursor: pointer;
  pointer-events: auto;
}

.map-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 1.5px rgba(40, 25, 10, 0.45));
  pointer-events: none;
}

.map-box.tier-gold { width: 30px; }

/* Die Kiste zieht ins Inventar. */
.box-fly {
  position: absolute;
  width: 30px;
  aspect-ratio: 480 / 501;
  background: center / contain no-repeat;
  filter: drop-shadow(0 3px 3px rgba(40, 25, 10, 0.4));
  pointer-events: none;
  z-index: 9400;
  animation: boxFly 860ms cubic-bezier(0.34, 0.9, 0.4, 1) forwards;
}

.box-fly.tier-wood { background-image: url("/img/chests/wood-sm.webp"); }
.box-fly.tier-iron { background-image: url("/img/chests/iron-sm.webp"); }
.box-fly.tier-gold { background-image: url("/img/chests/gold-sm.webp"); }

@keyframes boxFly {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  25% { transform: translate(-50%, calc(-50% - 22px)) scale(1.35) rotate(-8deg); opacity: 1; }
  100% { transform: translate(-50%, calc(-50% - 120px)) scale(0.25) rotate(14deg); opacity: 0; }
}

/* ── Kistenchip im Inventar ──────────────────────────────── */

.box-chip {
  border-color: #8a6b2f !important;
  background: linear-gradient(180deg, #fff6e0, #ffe9bd) !important;
  font-weight: bold;
}

.box-chip.tier-iron {
  border-color: #6d7a80 !important;
  background: linear-gradient(180deg, #f2f5f6, #dde4e7) !important;
}

.box-chip.tier-gold {
  border-color: #b8860b !important;
  background: linear-gradient(180deg, #fff6cf, #ffe083) !important;
  box-shadow: 0 0 0 2px rgba(255, 196, 40, 0.35);
}

.box-chip-icon {
  width: 14px;
  height: 12px;
  flex: 0 0 auto;
  border:1px solid var(--edge);
  border-radius: 3px 3px 2px 2px;
  background: #b98a4b;
  position: relative;
}

.box-chip-icon::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 3px;
  height: 1.5px;
  background: rgba(0, 0, 0, 0.45);
}

.box-chip.tier-iron .box-chip-icon { background: #9fa8ad; }
.box-chip.tier-gold .box-chip-icon { background: #e8b431; }

/* ── Shop: Guthaben ─────────────────────────────────────────────────── */

.shop-balance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.shop-balance-item {
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--paper-white);
}

.shop-balance-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.shop-balance-value {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 24px;
  font-weight: bold;
}

.shop-balance-note {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.65;
  line-height: 1.35;
}

.icon-shard { color: #6b4fbb; display: inline-flex; }

/* ── Shop: Abteilungen und Karten ───────────────────────────────────── */

.shop-section-head { margin: 18px 0 8px; }
.shop-section-head:first-of-type { margin-top: 6px; }

.shop-section-title { font-weight: bold; font-size: 16px; }

.shop-section-sub {
  font-size: 12px;
  opacity: 0.6;
  line-height: 1.35;
  margin-top: 1px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 8px;
}

/* Skin-Karten sind schmaler: Das Bild traegt sie, nicht der Text. */
.shop-grid-skins { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }

.shop-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background:var(--paper-white);
}

.shop-card-head { display: flex; align-items: center; gap: 8px; }

.shop-card-name { font-weight: bold; text-align: center; font-size: 13.5px; }
.shop-card-name-inline { flex: 1; text-align: left; font-size: 14px; }

.shop-card-sub {
  font-size: 12px;
  opacity: 0.6;
  text-align: center;
  line-height: 1.3;
}

.shop-card-desc {
  font-size: 12px;
  opacity: 0.75;
  line-height: 1.3;
  min-height: 46px;
}

.shop-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.shop-price {
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: bold;
}

.shop-buy {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  background: var(--forest);
  color: var(--on-forest);
  cursor: pointer;
}

/* Nicht kaufbar hat zwei Gruende, und sie sehen verschieden aus: zu teuer
   ist grau, schon im Besitz ist bestaetigend, gesperrt ist eine Bedingung. */
.shop-buy.is-off { cursor: not-allowed; background: var(--paper-sunk); color: var(--ink-soft); }
.shop-buy-owned { background: var(--paper-sunk); color: var(--ink-soft); cursor: default; }
.shop-buy-locked { background: #f4efe2; color: #8a7a55; }

/* Die Vorschau: das eigene Profilbild mit dem Skin. Die Bühne ist doppelt
   so groß wie das Bild — genau so groß wie die Skin-Ebenen (inset: -50 %),
   damit auch hohe Hüte innerhalb der Karte bleiben. */
.shop-skin-stage {
  width: 112px;
  height: 112px;
  margin: -6px auto 2px;
  display: grid;
  place-items: center;
}

.shop-skin-frame {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.shop-skin-photo {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--edge);
  border-radius: 50%;
  object-fit: cover;
  background: #ece7da;
  box-sizing: border-box;
}

.shop-skin-photo.is-empty { background: linear-gradient(160deg, #f1ece0, #ddd3bf); }

/* Der Rasttag ist kein Power-Up. Er steht im selben Raster, aber in eigener
   Farbe — damit niemand ihn aus Versehen fuer Nachschub haelt. */
.shop-card-rest {
  border-color: #3d7a4e;
  background: linear-gradient(180deg, #fbfff9, #eef7ef);
}

/* Besessenes bleibt in der Auslage, tritt aber zurueck. */
.shop-card.is-owned { opacity: 0.62; }

.shop-empty {
  padding: 12px;
  border: 2px dashed rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  font-size: 12.5px;
  opacity: 0.7;
  line-height: 1.4;
}

/* ── Shop: Scherben eintauschen ─────────────────────────────────────── */

.shop-exchange {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--paper-white);
}

.shop-ex-rate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 20px;
  font-weight: bold;
}

.shop-ex-num { font-variant-numeric: tabular-nums; }
.shop-ex-arrow { display: inline-flex; opacity: 0.45; }

.shop-ex-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.shop-ex-step {
  width: 38px;
  height: 38px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background:var(--paper-white);
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.shop-ex-step:disabled { opacity: 0.35; cursor: not-allowed; }

.shop-ex-value {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 62px;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.shop-ex-foot { margin-top: 0; }

.shop-ex-note {
  font-size: 12px;
  opacity: 0.65;
  text-align: center;
  line-height: 1.35;
}

/* ============================================================
   Rucksack

   Was man besitzt, an einem Ort. Die Kiste wird ausgewählt,
   nicht nebenbei angetippt: Sie rückt in den Fokus, zeigt was
   sie kostet, und wird dort geöffnet.
   ============================================================ */

.inv-modal {
  align-items: flex-end;
  padding: 0;
}

@media (min-width: 620px) {
  .inv-modal { align-items: center; padding: 24px; }
}

.inv-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  max-height: 92dvh;
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  /* backwards, nicht both — siehe .go-sheet: sonst friert der Endkeyframe
     den transform ein und das Blatt folgt dem Finger nicht. */
  animation: invRise 260ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

@media (min-width: 620px) {
  .inv-sheet { border-radius: 20px; }
}


@keyframes invRise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

.inv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 2px dashed rgba(0, 0, 0, 0.1);
  background: var(--paper-white);
}

.inv-head-title { font-weight: bold; font-size: 16px; }

.inv-close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.inv-body {
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inv-card {
  padding: 13px;
  background: var(--paper-white);
  border: 1px solid var(--edge);
  border-radius: 14px;
}

.inv-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.inv-section-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
}

.inv-count { font-size: 12px; opacity: 0.5; }

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 8px;
}

.inv-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px 8px;
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: var(--paper);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.inv-item:hover { border-color: var(--edge-strong); }
.inv-item:active { transform: scale(0.96); }

.inv-item-name { font-size: 12px; font-weight: bold; text-align: center; line-height: 1.2; }

.inv-item-cost {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  opacity: 0.7;
}

.inv-item-cost.is-free { opacity: 0.45; }

.inv-pu-icon { display: inline-flex; }

.inv-empty {
  margin: 0;
  font-size: 12.5px;
  opacity: 0.65;
  line-height: 1.5;
}

.inv-supplies {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  text-align: center;
}

.inv-supply {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  padding: 6px 4px;
  border: 0;
  border-radius: 12px;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 150ms ease;
}

.inv-supply.is-active {
  background: var(--paper-sunk);
}

/* Erklärung unter dem angetippten Vorrat: klappt auf, die Spitze zeigt
   auf ihn (--caret-x, inventory-sheet.js). */
.inv-supply-info {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.inv-supply-info.is-open {
  grid-template-rows: 1fr;
}

.inv-supply-info-inner {
  position: relative;
  min-height: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
}

.inv-supply-info.is-open .inv-supply-info-inner {
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--paper-sunk);
  overflow: visible;
}

.inv-supply-info.is-open .inv-supply-info-inner::before {
  content: "";
  position: absolute;
  top: -7px;
  left: calc(var(--caret-x, 50%) - 7px);
  border-style: solid;
  border-width: 0 7px 7px;
  border-color: transparent transparent var(--paper-sunk);
}

.inv-supply-info p {
  margin: 0;
}

.inv-supply-go {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--forest);
  cursor: pointer;
}

.inv-supply-value { font-size: 18px; font-weight: bold; }
.inv-supply-label { font-size: 11px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.04em; }

.inv-hint {
  margin: 0;
  padding: 0 4px;
  font-size: 12px;
  opacity: 0.6;
  line-height: 1.5;
}

/* ── Die Kiste selbst ────────────────────────────────────── */

/* Die Truhe als Bild (img/chests/<stufe>-<zustand>.webp). Klein nur zu,
   groß im Fokus mit drei übereinanderliegenden Zuständen. */
.chest {
  position: relative;
  display: inline-block;
  width: 46px;
  aspect-ratio: 480 / 501;
}

.chest-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 2px 2px rgba(40, 25, 10, 0.25));
}

.chest-lg {
  width: 158px;
  margin-top: 18px;
  transform-origin: 50% 92%;
}

.chest-lg .chest-frame {
  filter: none;
}

/* Zustände: nur einer ist sichtbar, gewechselt wird hart (Bild für Bild). */
.chest-lg .f-ajar,
.chest-lg .f-open { opacity: 0; }
.chest-lg.is-ajar .f-closed { opacity: 0; }
.chest-lg.is-ajar .f-ajar { opacity: 1; }
.inv-focus.is-open .chest-lg .f-closed,
.inv-focus.is-open .chest-lg .f-ajar { opacity: 0; }
.inv-focus.is-open .chest-lg .f-open { opacity: 1; }

/* Warmes Licht aus der Öffnung, über dem Bild. Beim Spalt schwach, offen
   kräftig; es lässt auch das Innere der Eisentruhe golden leuchten. */
.chest-light {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 22%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 120, 0.85), rgba(255, 190, 70, 0.35) 55%, rgba(255, 190, 70, 0));
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.chest-lg.is-ajar .chest-light { opacity: 0.55; top: 34%; height: 20%; }
.inv-focus.is-open .chest-light { opacity: 1; }

/* Bereit zum Öffnen: die Truhe schwebt leicht. Ihr Schatten ist im Bild. */
.inv-focus-stage.is-ready .chest-lg:not(.is-rumbling):not(.is-struck) {
  animation: chestIdle 2.8s ease-in-out infinite;
}


@keyframes chestIdle {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

/* Aufspringen: ein kurzer Satz nach oben, dann federt sie zurück. */
.inv-focus.is-open .chest-lg {
  animation: chestPop 560ms cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

@keyframes chestPop {
  0% { transform: scale(1, 1); }
  18% { transform: scale(1.08, 0.92); }
  45% { transform: scale(0.96, 1.07) translateY(-10px); }
  100% { transform: scale(1, 1) translateY(0); }
}

/* Lichtstrahlen hinter der offenen Truhe: drehen sich langsam und
   verblassen. Gold strahlt länger und heller. */
.chest-rays {
  position: absolute;
  top: 34%;
  left: 50%;
  width: 300px;
  height: 300px;
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 140, 0.55) 0deg 7deg, rgba(255, 220, 140, 0) 7deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 100%);
  mask: radial-gradient(closest-side, #000 18%, transparent 100%);
  opacity: 0;
  scale: 0.4;
  pointer-events: none;
}

.inv-focus.is-open .chest-rays {
  animation: chestRays 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.inv-focus.tier-gold.is-open .chest-rays {
  background: repeating-conic-gradient(from 0deg, rgba(255, 205, 80, 0.7) 0deg 6deg, rgba(255, 205, 80, 0) 6deg 18deg);
  animation-duration: 3.4s;
}

@keyframes chestRays {
  0% { opacity: 0; scale: 0.4; rotate: 0deg; }
  15% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.15; rotate: 50deg; }
}

/* Funken (sparkBurst in inventory-sheet.js). */
.chest-sparks {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 4;
}

.chest-sparks i {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8dc 0 30%, #ffd36a 45%, rgba(255, 190, 60, 0) 72%);
  opacity: 0;
  animation: chestSpark 900ms cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}

@keyframes chestSpark {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); }
}

/* Der Einschlag eines Schlüssels. */
.chest.is-struck { animation: chestStruck 260ms cubic-bezier(0.3, 1.4, 0.5, 1); }

/* Zwischen letztem Schlüssel und Aufspringen: Es arbeitet in der Kiste.
   Zwei Animationen hintereinander: chestRumbleIn schwillt einmalig von fast
   nichts auf volle Stärke an, danach übernimmt die Dauerschleife. Von 0 auf
   100 zu starten nahm der Szene den Spannungsaufbau. Der Skalierungsfaktor
   --rf staffelt beide über dieselben Keyframes. */
.chest.is-rumbling {
  animation:
    chestRumbleIn 520ms cubic-bezier(0.45, 0, 0.75, 0.4) both,
    chestRumble 260ms linear infinite;
}

@property --rf {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

@keyframes chestRumbleIn {
  from { --rf: 0.12; }
  to { --rf: 1; }
}

@keyframes chestRumble {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(calc(-1.5px * var(--rf)), calc(1px * var(--rf))) rotate(calc(-1.2deg * var(--rf))); }
  45% { transform: translate(calc(1.5px * var(--rf)), calc(-1px * var(--rf))) rotate(calc(1deg * var(--rf))); }
  70% { transform: translate(calc(-1px * var(--rf)), calc(-1.5px * var(--rf))) rotate(calc(0.6deg * var(--rf))); }
}

@keyframes chestStruck {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.12) rotate(-4deg); }
  65% { transform: scale(0.97) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ── Fokus auf eine Kiste ────────────────────────────────── */

.inv-focus {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;

  /* Kopf oben, Kiste im freien Raum dazwischen, Bedienung unten am Daumen. */
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  padding: 14px 16px 18px;
  background: var(--paper);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
}

.inv-focus-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inv-focus-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.inv-focus.is-in { opacity: 1; transform: none; }

/* Beim Zurückgehen tritt die Ansicht zurück, statt zu verschwinden — die
   Beute steht noch, während der Rucksack darunter schon wieder da ist. */
.inv-focus.is-out {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 180ms ease, transform 200ms ease;
  pointer-events: none;
}

.inv-focus-back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 5px 5px;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
}

.inv-focus-back:hover { background: rgba(0, 0, 0, 0.05); opacity: 1; }
.inv-focus-back:disabled { opacity: 0.3; cursor: default; }

.inv-focus-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 170px;
  perspective: 620px;
}

/* Auf hohen Bildschirmen stand die Kiste klein in viel leerem Papier. Die
   Bühne wächst mit; Schlüssel- und Beuteflüge rechnen mit den sichtbaren
   Maßen und landen trotzdem am Schloss. */
@media (min-height: 680px) {
  /* Etwas unter der Mitte: Über der Kiste schwebt nach dem Öffnen die Beute,
     und erst Kiste und Beute zusammen sollen mittig stehen. */
  .inv-focus-stage { scale: 1.45; padding-top: 70px; }
}

/* Mittig hinter der Kiste, nicht unter ihr: Die Bühne zentriert die Kiste,
   also muss das Licht dorthin, wo sie steht. */
.inv-focus-glow {
  position: absolute;

  /* Etwas über der Kiste: Dort schwebt die Beute, und dorthin soll das Licht
     führen. Genau auf Truhenhöhe sieht es aus, als stünde sie in Flammen. */
  top: 33%;
  left: 50%;
  width: 190px;
  height: 190px;
  transform: translate(-50%, -50%) scale(0.7);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 120, 0.55), rgba(255, 214, 120, 0) 68%);
  opacity: 0;
  transition: opacity 400ms ease, transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.inv-focus.tier-gold .inv-focus-glow { background: radial-gradient(circle, rgba(255, 196, 40, 0.6), rgba(255, 196, 40, 0) 68%); }
.inv-focus.is-open .inv-focus-glow {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


.inv-focus-name {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: bold;

  /* Gleicht die Breite des Zurück-Knopfes aus, damit der Name wirklich
     mittig sitzt und nicht nur ungefähr. */
  margin-right: 74px;
}

/* Die Schlüsselreihe: Was fehlt, sieht man, ohne zu rechnen. */
.inv-keys {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Der gezeichnete Schlüssel. Er hängt senkrecht mit dem Bart nach unten —
   so liegt er auch im Bild, und die Flugbewegung dreht ihn von dort weg. */
.key-img {
  display: inline-block;
  width: 26px;
  height: 26px;
  background: url("/img/supplies/key.webp") center/contain no-repeat;
}

.key-sm { width: 13px; height: 13px; }
.key-md { width: 22px; height: 22px; }

.inv-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 40px;
  transition: opacity 200ms ease, transform 200ms ease, filter 200ms ease;
}

/* Fehlende Schlüssel bleiben als Umriss stehen: Man soll sehen, wie viele
   es sein müssten, nicht nur wie viele man hat. */
.inv-key.is-missing {
  opacity: 0.22;
  filter: grayscale(1);
}

.inv-key.is-spent { opacity: 0.12; transform: scale(0.8); }

/* Nach dem Aufschliessen verschwindet die Reihe. Zwölf Prozent Deckkraft
   sind kein Zustand, sondern ein Rest. */
.inv-keys.is-used {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}

/* Die Zielkarte hält sich zurück, bis das Stück angekommen ist. */
.inv-item.is-awaiting { opacity: 0.35; }

.inv-keys-note { font-size: 12px; opacity: 0.65; text-align: center; transition: opacity 260ms ease; }
.inv-focus.is-open .inv-keys-note { opacity: 0; }

/* Zwei Phasen, zwei Geschwindigkeiten.
   Zuerst hebt sich der Schlüssel und dreht sich gemächlich, bis er auf das
   Schloss zeigt. Erst danach schießt er los. Beides in einem Zug sah aus,
   als würfe man ihn hin. */
.inv-key-flier {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
  /* Langsam ausholen, kurz stehen, dann los. Der starke Ease macht aus der
     Drehung eine Bewegung statt einer Rotation. */
  transition: transform 220ms cubic-bezier(0.16, 0.9, 0.24, 1);
}

.inv-key-flier.is-aiming {
  transform:
    translate(-50%, calc(-50% - 10px))
    rotate(var(--ka, 0deg))
    scale(1.14);
}

.inv-key-flier.is-flying {
  /* Kurz und scharf: Das Zielen war die Bewegung, das hier ist der Stoß. */
  transition:
    transform 60ms cubic-bezier(0.6, 0, 0.85, 0.35),
    opacity 60ms ease 35ms;

  transform:
    translate(calc(-50% + var(--kx)), calc(-50% + var(--ky)))
    rotate(var(--ka, 0deg))
    scale(0.62);

  opacity: 0;
}

.inv-open {
  width: 100%;
  max-width: 260px;
  margin-top: 4px;
  padding: 13px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--accent4);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}

.inv-open:disabled { opacity: 0.45; cursor: default; }

/* Die Beute schwebt aus der Kiste. */
/* Nebeneinander, nicht uebereinander: "Lasso, 3 Muenzen, 2 Scherben" ist ein
   Fund, drei Zeilen sind eine Liste. Die Hoehe kommt erst ins Spiel, wenn die
   Breite nicht reicht — dann bricht die Reihe um. */
.inv-loot {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 6px 10px;
  width: max-content;
  max-width: 300px;
  pointer-events: none;
}

/* Im seitlichen Rucksack ist weniger Breite: Bühne nur leicht vergrößern,
   damit die Fundstücke in einer Reihe über der Truhe Platz haben. */
@media (min-height: 680px) {
  .inv-side .inv-focus-stage { scale: 1.15; padding-top: 56px; }
}

.inv-loot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  opacity: 0;
  animation: invLootUp 640ms cubic-bezier(0.22, 0.9, 0.36, 1) var(--delay, 0ms) forwards;
}

@keyframes invLootUp {
  0% { opacity: 0; transform: translateY(24px) scale(0.5); }
  65% { opacity: 1; transform: translateY(-70px) scale(1.12); }
  100% { opacity: 1; transform: translateY(-62px) scale(1); }
}

.inv-loot-icon { display: inline-flex; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.28)); }

.inv-loot-text {
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  text-shadow: 0 1px 0 var(--paper), 0 0 6px var(--paper);
}

/* Der Hinweis gehoert nicht in die Reihe, sondern darunter. */
.inv-loot-note,
.inv-loot-error {
  flex-basis: 100%;
  font-size: 12px;
  opacity: 0.7;
  text-align: center;
  max-width: 220px;
  line-height: 1.4;
}

.inv-loot-error { color: #ae3a22; opacity: 1; }

/* ── Rucksack-Knopf in der Chip-Reihe ────────────────────── */

.bag-chip { font-weight: 600; }

/* Kein Leuchten, kein Farbwechsel: Dass etwas drin ist, sagt der Zähler.
   Ein glühender Knopf sieht billig aus und lenkt von der Karte ab. */
.bag-chip.has-boxes {
  border-color: var(--ink) !important;
}

.bag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 1px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper-white);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .inv-sheet,
  .inv-loot-item,
  .chest.is-struck { animation: none; }

  .chest-rays,
  .chest-sparks,
  .inv-key-flier,
  .inv-focus { transition: none; }

  .inv-loot-item { opacity: 1; }
}

/* ── Beute fliegt zu ihrer Anzeige ──────────────────────────────────
   Zwei Phasen: kurz auseinanderstieben, damit die Bahnen nicht
   deckungsgleich liegen, dann beschleunigt ins Ziel. Jede Ankunft
   zählt die Zahl weiter und gibt ihr einen Stups.
   ------------------------------------------------------------------ */

.loot-fly {
  position: absolute;
  z-index: 8;
  transform: translate(-50%, -50%) scale(0.85);
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
  transition: transform 110ms cubic-bezier(0.22, 0.9, 0.36, 1);
}

.loot-fly.kind-coins { color: #d79b1b; }
.loot-fly.kind-shards { color: #6b4fbb; }
.loot-fly.kind-powerup { color: var(--ink); }

.loot-fly.is-spread {
  transform:
    translate(calc(-50% + var(--sx)), calc(-50% + var(--sy)))
    scale(1.25)
    rotate(-12deg);
}

.loot-fly.is-homing {
  transition:
    transform 220ms cubic-bezier(0.55, 0, 0.85, 0.4),
    opacity 220ms ease 140ms;

  transform:
    translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)))
    scale(0.45)
    rotate(16deg);

  opacity: 0.2;
}

/* Der Stups an der Anzeige. */
.inv-supply.is-bumped .inv-supply-value {
  animation: supplyBump 320ms cubic-bezier(0.3, 1.5, 0.5, 1);
}

@keyframes supplyBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.32); color: var(--accent4); }
  100% { transform: scale(1); }
}

.inv-supply-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.inv-item.is-bumped {
  animation: supplyBump 340ms cubic-bezier(0.3, 1.5, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
  .loot-fly,
  .inv-supply.is-bumped .inv-supply-value,
  .inv-item.is-bumped { animation: none; transition: none; }
}

/* Während man das Blatt wegzieht, tritt der Hintergrund zurück. */
.inv-modal,
.go-modal {
  background: rgba(0, 0, 0, calc(0.4 * (1 - var(--sheet-progress, 0))));
  transition: background 120ms linear;
}

.inv-sheet,
.go-sheet {
  will-change: transform;
  touch-action: pan-y;
  transform-origin: center bottom;
}

/* Während der Finger zieht, gibt es keine Übergänge — sonst hinkt das Blatt
   der Hand hinterher. */
.inv-sheet.is-dragging,
.go-sheet.is-dragging {
  transition: none !important;
}

/* Ein Griff, an dem man sieht, dass sich hier ziehen lässt. */
.inv-head::before,
.go-head::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 38px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.18);
}

.inv-head,
.go-head {
  position: relative;
  padding-top: 16px;
}

/* ── Melden ──────────────────────────────────────────────────────────
   Ein unaufdringlicher Textknopf an Fotos und KI-Texten, darunter ein
   schlichter Dialog. Er soll auffindbar sein, aber nicht zum Melden
   einladen: Die Gruppen sind Freundeskreise. */
.report-link {
  border: none;
  background: none;
  padding: 2px 4px;
  font: inherit;
  font-size: 12px;
  color: inherit;
  opacity: 0.55;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.report-link:hover { opacity: 0.9; }

.modal.report-modal { z-index: 9300 !important; }

.report-box {
  width: min(420px, 92vw);
  display: grid;
  gap: 8px;
}

.report-title { font-weight: bold; font-size: 17px; }
.report-label { font-size: 13px; font-weight: bold; margin-top: 4px; }

.report-choices { display: grid; gap: 4px; }

.report-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.report-choice input { accent-color: var(--ink); }
.report-choice:has(input:checked) { border-color: var(--ink); background: rgba(0, 0, 0, 0.04); }

.report-note {
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

.report-hint { margin: 0; font-size: 12.5px; line-height: 1.5; opacity: 0.75; }
.report-msg { font-size: 13px; min-height: 1em; }

.report-actions { display: flex; gap: 8px; justify-content: flex-end; }

.report-actions button {
  padding: 9px 14px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.report-actions .report-send { background: var(--ink); color: var(--paper-white); }
.report-actions button:disabled { opacity: 0.5; }

/* Auf Aushängen unter der Signatur, in der Farbe der Tinte. */
#BoardView .poster-report { display: flex; justify-content: flex-end; margin-top: 2px; color: rgba(40, 20, 5, 0.75); }
.chain-reader-report { display: flex; justify-content: flex-end; margin-top: 8px; }
.pq-report-row { display: flex; justify-content: flex-end; margin-top: 6px; }

/* Hinweis auf die Regeln neben dem Einreichen. Leise, aber immer da. */
.photo-rules-note { font-size: 12px; opacity: 0.65; margin-right: auto; }
.photo-rules-note a { color: inherit; }
.pq-rules-note { margin: 6px 2px 0; }

/* ── Aufträge der Tiere am Weg ───────────────────────────────────────
   Ein Zettel mit Wachssiegel neben dem gemalten Tier. Versiegelt wartet er
   ruhig; ist man beim Tier, wippt er und lässt sich öffnen. */
.aq-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border:1px solid var(--edge);
  border-radius: 6px 6px 6px 2px;
  background: #f4e4bf;
  color: #4a2f12;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
}

/* Das Siegel. */
.aq-marker::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #a3261d;
  border:1px solid var(--edge);
}

.aq-marker.phase-ahead { opacity: 0.9; }

.aq-marker.phase-here {
  background: #fff6dc;
  animation: aqWiggle 1.8s ease-in-out infinite;
}

.aq-marker.phase-here::after { background: #e0a526; }

@keyframes aqWiggle {
  0%, 100% { transform: translate(-50%, -100%) rotate(0); }
  15% { transform: translate(-50%, -108%) rotate(-7deg); }
  30% { transform: translate(-50%, -100%) rotate(5deg); }
  45% { transform: translate(-50%, -100%) rotate(0); }
}

/* Der Zettel am Brett leuchtet kurz auf, wenn man von der Karte kommt. */
.bounty-card.aq-flash .sheet { animation: aqFlash 1.6s ease-out; }

@keyframes aqFlash {
  0% { box-shadow: 0 0 0 0 rgba(224, 165, 38, 0.9); }
  100% { box-shadow: 0 0 0 18px rgba(224, 165, 38, 0); }
}

/* Auf dem Aushang: wann man dem Tier begegnet. */
#BoardView .poster-animal {
  margin-top: 6px;
  font-size: 13px;
  text-align: center;
  font-style: italic;
  color: rgba(40, 20, 5, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .aq-marker.phase-here { animation: none; }
}

/* Pokal an Skins, die man als Monatsbelohnung verdient hat. */
.ep-skin-earned {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: #ffd700;
  color: var(--ink);
}

/* Bananenschale: hier ablegen oder nach hinten werfen (powerups.js). */
.banana-placement {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.banana-placement-title {
  font-weight: 700;
}

.banana-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--paper-white);
  cursor: pointer;
}

.banana-option:has(input:checked) {
  border-color: var(--forest);
  box-shadow: inset 0 0 0 1px var(--forest);
}

.banana-option input {
  margin-top: 3px;
  accent-color: var(--forest);
}

.banana-option span {
  display: grid;
  gap: 1px;
}

.banana-option small {
  color: var(--ink-soft);
  font-size: 12.5px;
}

/* Kopfzeile: Tag, Platz und Schritte als eigene kleine Felder (header.js). */
.header-tier-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}

.hdr-day {
  color: var(--ink-soft);
}

.hdr-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--paper-sunk);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.5;
}

.hdr-steps svg {
  width: 12px;
  height: 12px;
}

.header-tier-title[data-group]:not([data-group=""])::before {
  content: attr(data-group);
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* Über der Karte: Vorratsleiste mit Rucksack am Ende, darunter laufende
   Wirkungen (mobile-panel.js). */
.store-bar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(251, 245, 230, 0.96);
  box-shadow: 0 6px 16px -8px rgba(40, 25, 10, 0.55);
}

.store-item,
.store-bag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 9px 0 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.store-item:active,
.store-bag:active {
  background: var(--paper-sunk);
}

/* Ein Vorrat ist gewachsen (ui/count.js): kurzes Aufleuchten, Symbol hüpft. */
.store-item.is-bumped { animation: storeBump 620ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.store-item.is-bumped > :first-child { animation: storeIconHop 620ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes storeBump {
  0% { background: transparent; }
  25% { background: rgba(201, 138, 27, 0.22); }
  100% { background: transparent; }
}
@keyframes storeIconHop {
  0%, 100% { transform: none; }
  30% { transform: translateY(-3px) scale(1.18); }
}


.store-bag {
  margin-left: 2px;
  padding: 0 11px 0 9px;
  background: var(--forest);
  color: var(--on-forest);
}

.store-bag:active {
  background: var(--forest-strong);
}

/* Ungeöffnete Kisten: ein Punkt am Rucksack statt eines Rings um ihn. */
.store-bag {
  position: relative;
}

.store-bag.has-boxes::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--amber);
}

.effect-row {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  gap: 6px;
}

.effect-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: rgba(251, 245, 230, 0.94);
  font-size: 12px;
  box-shadow: 0 4px 12px -8px rgba(40, 25, 10, 0.55);
}

.effect-mark b {
  font-variant-numeric: tabular-nums;
}

/* Neuigkeiten (ui/news.js): ein Platz für die wichtigste Meldung, die
   Bilder der übrigen gestapelt daneben; die Glocke öffnet den Verlauf. */
.news-ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-basis: 100%;
  max-width: 420px;
  margin-top: 2px;
  padding: 6px 8px;
  border: 0;
  border-radius: 14px;
  background: rgba(251, 245, 230, 0.97);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  box-shadow: 0 8px 20px -10px rgba(40, 25, 10, 0.6);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 240ms ease-out, transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.news-ticker.is-in {
  opacity: 1;
  transform: none;
}

main.stage > .news-ticker {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 900;
}

.news-stack {
  display: inline-flex;
  flex-shrink: 0;
}

.news-stack-pic,
.news-pic {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--paper-sunk);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 2px rgba(251, 245, 230, 0.97);
  color: var(--ink-soft);
}

.news-stack-pic + .news-stack-pic {
  margin-left: -10px;
}

.news-stack-pic img,
.news-pic img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.news-stack-pic svg,
.news-pic svg {
  width: 15px;
  height: 15px;
}

.news-text {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-more {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--paper-sunk);
  font-weight: 700;
  font-size: 12px;
}

.news-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.news-bell svg {
  width: 20px;
  height: 20px;
}

.news-bell.has-unread::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 2px var(--paper);
}

.news-body {
  padding: 4px 16px 18px;
}

.news-day {
  margin: 14px 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.news-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--edge);
  font-size: 14px;
  line-height: 1.35;
}

.news-item .news-pic {
  width: 30px;
  height: 30px;
  box-shadow: none;
}

.news-item.is-new .news-item-text {
  font-weight: 600;
}

.news-item.is-against .news-pic.is-icon,
.news-item.is-against .news-item-text {
  color: var(--ember);
}

.news-item-time {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.news-empty {
  margin: 18px 0;
  color: var(--ink-soft);
}

/* Power-Up-Szenen auf der Karte (ui/pu-anim.js). */
.pu-anim-layer {
  position: absolute;
  inset: 0;
  /* Über Avataren und Vordergrund: Szenen sollen zu sehen sein. */
  z-index: 9200;
  pointer-events: none;
}

.pu-anim {
  position: absolute;
  width: 0;
  height: 0;
  transform: scale(var(--inv-zoom));
}

.pu-anim-inner {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  translate: -50% -50%;
  filter: drop-shadow(0 2px 3px rgba(40, 25, 10, 0.35));
}

.pu-wind { color: #2f7fc4; }
.pu-banana, .pu-slip { color: #d99a00; }
.pu-cloak { color: #8e3aa6; }
.pu-herd { color: #7a5a44; }

.pu-shield {
  width: calc(var(--avatar-size) * 1.35);
  height: calc(var(--avatar-size) * 1.35);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 195, 247, 0.08) 55%, rgba(79, 195, 247, 0.35) 72%, rgba(3, 145, 209, 0.0) 74%);
  box-shadow: inset 0 0 0 3px rgba(3, 145, 209, 0.75);
}

.pu-slime {
  width: 16px;
  height: 11px;
  border-radius: 50%;
  background: rgba(76, 175, 80, 0.75);
  filter: none;
}

.pu-reveal {
  width: calc(var(--avatar-size) * 1.2);
  height: calc(var(--avatar-size) * 1.2);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(230, 74, 25, 0.7);
  filter: none;
}

.pu-rope {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

/* Lasso (ui/pu-anim.js): Seil aus drei Strichen, Kontur, Hanf und Drall. */
.pu-rope .rope-under,
.pu-rope .rope-line,
.pu-rope .rope-twist {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pu-rope .rope-under { stroke: #3e2614; stroke-width: 6.5; }
.pu-rope .rope-line { stroke: #d2a26a; stroke-width: 4; }
.pu-rope ellipse.rope-line { stroke-width: 3; filter: drop-shadow(0 0 0.6px #3e2614) drop-shadow(0 0 0.6px #3e2614); }
.pu-rope .rope-twist { stroke: #e2b47a; stroke-width: 1.3; stroke-dasharray: 3 4; }
.pu-rope .rope-step { fill: #ffe08a; filter: drop-shadow(0 0 2px rgba(255, 200, 80, 0.9)); }
.pu-rope .rope-spark { fill: #ffd25a; filter: drop-shadow(0 0 2.5px rgba(255, 120, 30, 0.95)); }
.pu-rope.is-fire .rope-under { stroke: #7a1d08; stroke-width: 6.5; opacity: 0.85; }
.pu-rope.is-fire .rope-line { stroke-width: 3.8; }
.pu-rope.is-fire .rope-twist { stroke: #fff2b0; animation: ropeBurn 0.35s linear infinite; }
@keyframes ropeBurn { to { stroke-dashoffset: -14; } }

/* Rucksack: ausgewähltes Power-Up mit Erklärung und Knopf (inventory-sheet.js). */
.inv-item.is-selected {
  border-color: var(--forest);
  box-shadow: inset 0 0 0 2px var(--forest);
}

.inv-pu-detail {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--paper-sunk);
}

.inv-pu-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inv-pu-detail-head h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.inv-pu-desc,
.inv-pu-target,
.inv-pu-blocker,
.inv-pu-error {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.inv-pu-target b { color: var(--ink); }
.inv-pu-blocker { color: var(--ember); font-weight: 600; }
.inv-pu-error { color: var(--ember); }
.inv-pu-error:empty { display: none; }

.inv-pu-use {
  justify-self: stretch;
  max-width: none;
  border-radius: 999px;
  background: var(--forest);
  color: var(--on-forest);
}

.inv-pu-use:disabled {
  opacity: 0.5;
}

/* Rangliste: Treppchen für die ersten drei, Balken bis zum Ziel (leaderboard.js). */
.lb-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  padding: 34px 4px 0;
  margin-bottom: 8px;
}

.lb-step {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.lb-step-pic {
  position: relative;
  width: 50px;
  height: 50px;
  margin-bottom: 4px;
}

.lb-step-1 .lb-step-pic {
  width: 60px;
  height: 60px;
}

.lb-step-pic .mini-lb-avatar {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 2px solid var(--ring, var(--ink));
}

.lb-step-name {
  max-width: 100%;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-step-steps {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.lb-step-block {
  display: grid;
  place-items: start center;
  width: 100%;
  margin-top: 4px;
  padding-top: 4px;
  border-radius: 10px 10px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: #fbf5e6;
}

.lb-step-1 .lb-step-block { height: 66px; background: var(--amber); color: var(--on-amber); }
.lb-step-2 .lb-step-block { height: 48px; background: #9a8a72; }
.lb-step-3 .lb-step-block { height: 38px; background: #a8683a; }

.mini-lb-namewrap {
  display: grid;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.mini-lb-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mini-lb-fx {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--forest);
}

.mini-lb-fx .fx-stack .fx-ic {
  width: 17px;
  height: 17px;
}

.mini-lb-bar {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: var(--paper-sunk);
  overflow: hidden;
}

.mini-lb-bar > i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--forest);
}

/* Laden: Power-Ups als Ware im Regal (shop.js). */
.shop-card-pu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

.shop-pu-art {
  display: grid;
  place-items: center;
  height: 64px;
  margin-bottom: 4px;
  border-radius: 12px;
  /* Ein ruhiges Feld, die Farbe trägt nur das Symbol. Pastellflächen in
     sechs Farben ließen das Regal wie eine Bonbontüte wirken. */
  background: var(--paper-sunk);
}

.pu-art-tailwind { color: #2196f3; }
.pu-art-shield { color: #0391d1; }
.pu-art-banana { color: #e08600; }
.pu-art-slimetrail { color: #3f9a43; }
.pu-art-lasso { color: #795548; }
.pu-art-cloak { color: #9c27b0; }
.pu-art-stampede { color: #8d6e63; }
.pu-art-trackreader { color: #e64a19; }

.shop-card-pu .shop-card-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  text-align: left;
}

.shop-card-line {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}

.shop-card-pu .shop-card-desc {
  display: none;
  font-size: 12.5px;
  line-height: 1.4;
}

.shop-card-pu.is-expanded .shop-card-desc { display: block; }
.shop-card-pu.is-expanded .shop-card-line { display: none; }

.shop-buy-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* ── Rucksack links neben der Karte ─────────────────────────────────
   Auf dem Handy kommt der Rucksack von links herein, mit dem Finger
   (Karte über den Rand nach rechts ziehen) oder über den Knopf in der
   Vorratsleiste. Er bleibt im Bereich der Karte, zwischen Kopfzeile und
   Tab-Leiste; rechts schaut ein Streifen der Karte heraus. Gesteuert von
   inventory-sheet.js (setSideX, --side-open 0…1). */
.inv-modal.inv-side {
  position: absolute;
  inset: 0;
  z-index: 980 !important;
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
  background: rgba(30, 20, 10, calc(0.32 * var(--side-open, 1)));
}

.inv-side .inv-sheet {
  width: calc(100% - 56px);
  max-width: 400px;
  height: 100%;
  max-height: none;
  border-radius: 0 20px 20px 0;
  box-shadow: 10px 0 30px -12px rgba(40, 25, 10, 0.45);
  animation: none;
  touch-action: pan-y;
}

.inv-side .inv-head {
  padding-top: 14px;
}

/* Kein Griff oben: Dieses Blatt schiebt man seitwärts. Stattdessen eine
   senkrechte Kerbe am rechten Rand. */
.inv-side .inv-head::before {
  display: none;
}

.inv-side .inv-sheet::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 4px;
  height: 38px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--edge-strong);
  pointer-events: none;
}

.inv-side .inv-close {
  display: grid;
  place-items: center;
}

.inv-side .inv-body {
  flex: 1;
  min-height: 0;
}

/* Zoomleiste beim senkrechten Wischen am Kartenrand (gestures.js), genau
   im Streifen, in dem das Wischen zoomt. */
.edge-zoom {
  position: absolute;
  left: 3px;
  z-index: 870;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 24px;
  padding: 8px 0;
  background: var(--paper-white);
  border: 1px solid var(--edge);
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--shadow);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.edge-zoom.is-right {
  left: auto;
  right: 3px;
  transform: translateX(8px);
}

.edge-zoom.is-on {
  opacity: 1;
  transform: none;
}

.edge-zoom-sign {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-soft);
}

.edge-zoom-track {
  position: relative;
  flex: 1;
  width: 4px;
  border-radius: 2px;
  background: var(--paper-sunk);
}

.edge-zoom-track i {
  position: absolute;
  left: 50%;
  top: calc(var(--t, 0.5) * 100%);
  width: 16px;
  height: 16px;
  border: 2px solid var(--paper-white);
  border-radius: 50%;
  background: var(--forest);
  box-shadow: 0 1px 4px var(--shadow);
  transform: translate(-50%, -50%);
}

/* ── Was gerade wirkt (features/active-effects.js) ───────────────── */
button.effect-mark {
  border: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

.fx-ic {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

/* Mehrere Effekte: die Bilder überlappen sich wie Karten auf der Hand. */
.fx-stack {
  display: inline-flex;
  align-items: center;
}

.fx-stack .fx-ic {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper-white);
  box-shadow: 0 0 0 1.5px var(--paper);
}

.fx-stack .fx-ic + .fx-ic {
  margin-left: -6px;
}

/* Die Summe aller Boni: groß, ohne Kasten; ein Tipp erklärt sie. */
.fx-overall {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: 10px;
  width: 100%;
  padding: 6px 4px 2px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.fx-overall-value {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--forest);
}

.fx-overall.is-malus .fx-overall-value {
  color: var(--ember);
}

.fx-overall-label {
  font-size: 14px;
  color: var(--ink-soft);
}

.fx-overall-info {
  align-self: center;
  color: var(--ink-soft);
}

.fx-explain {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fx-explain.is-open {
  grid-template-rows: 1fr;
}

.fx-explain-inner {
  min-height: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
}

.fx-explain.is-open .fx-explain-inner {
  margin: 4px 0 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--paper-sunk);
}

.fx-explain p {
  margin: 0;
}

.fx-explain p + p {
  margin-top: 6px;
}

.fx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.fx-row + .fx-row {
  border-top: 1px solid var(--edge);
}

.fx-row > .fx-ic {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--paper-sunk);
}

.fx-main {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.fx-title {
  font-size: 14px;
}

.fx-source {
  font-size: 12px;
  color: var(--ink-soft);
}

.fx-time {
  display: block;
  height: 3px;
  margin-top: 4px;
  border-radius: 3px;
  background: var(--paper-sunk);
  overflow: hidden;
}

.fx-time > i {
  display: block;
  height: 100%;
  background: var(--forest);
}

.fx-row.is-guard .fx-time > i { background: var(--ink-soft); }
.fx-row.is-malus .fx-time > i { background: var(--ember); }

.fx-side {
  display: grid;
  justify-items: end;
  gap: 2px;
  flex-shrink: 0;
}

.fx-pct {
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--forest);
}

.fx-row.is-malus .fx-pct { color: var(--ember); }

.fx-left {
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.fx-empty {
  margin: 8px 4px 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Im Rucksack: eine Zeile, die zu "Was gerade wirkt" führt. */
.inv-fx {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.inv-fx-text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.inv-fx-text small {
  font-size: 12px;
  color: var(--ink-soft);
}

.inv-fx .fx-stack .fx-ic {
  width: 26px;
  height: 26px;
  background: var(--paper-sunk);
}

.pm-effects {
  margin-top: 12px;
}

/* Avatare jenseits des Rands (ui/offscreen.js): klein am Rand, mit einem
   Pfeil in ihre Richtung. */
.offscreen-layer {
  position: absolute;
  inset: 0;
  z-index: 880;
  pointer-events: none;
}

.offscreen-pin {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease;
}

.offscreen-pin.is-in {
  opacity: 1;
}

.offscreen-pin > * {
  transition: scale 220ms cubic-bezier(0.34, 1.4, 0.64, 1);
  scale: 0.6;
}

.offscreen-pin.is-in > * {
  scale: 1;
}

.offscreen-face {
  position: absolute;
  inset: 0;
  border: 2px solid var(--ring, var(--ink));
  border-radius: 50%;
  background: var(--paper) center / cover no-repeat;
  box-shadow: 0 2px 6px rgba(40, 25, 10, 0.4);
}

.offscreen-pin.is-me .offscreen-face {
  box-shadow: 0 0 0 2px var(--paper-white), 0 2px 6px rgba(40, 25, 10, 0.4);
}

/* Der Pfeil sitzt außen am Kreis und dreht sich mit ihm um die Mitte. */
.offscreen-arrow {
  position: absolute;
  inset: 0;
  transform: rotate(var(--angle, 0rad));
}

.offscreen-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -8px;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--ring, var(--ink));
  transform: translateY(-50%);
  filter: drop-shadow(0 1px 1px rgba(40, 25, 10, 0.35));
}

/* Tiere am Weg (ui/animal-spots.js): unsichtbare Tippflächen über den
   gemalten Tieren, gleich groß auf dem Bildschirm. */
.animal-spot {
  position: absolute;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%) scale(var(--inv-zoom));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Rückmeldung auf den Tipp: ein heller Kreis auf dem Punkt des Tiers. */
.animal-flash {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(251, 245, 230, 0.45);
  transform: translate(-50%, -50%) scale(var(--inv-zoom));
  pointer-events: none;
  animation: animalFlash 500ms ease-out forwards;
}

@keyframes animalFlash {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

/* Gezeichnete Umrisse: unsichtbare Fläche plus breiter Rand als Toleranz
   (gleich breit auf dem Bildschirm). */
.animal-masks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.animal-masks,
.animal-mask,
.animal-spot {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.animal-mask {
  fill: transparent;
  stroke: transparent;
  stroke-width: 14px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
  cursor: pointer;
}

/* Mit gezogenem Bereich: wächst mit der Karte, wie das gemalte Tier. */
.animal-spot.has-area {
  transform: none;
}

/* Das Revier eines Tiers, leuchtend auf dem Pfad. */
.territory polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.territory-glow {
  stroke: var(--territory, var(--amber));
  stroke-width: 18;
  opacity: 0.35;
}

.territory-line {
  stroke: var(--territory, var(--amber));
  stroke-width: 5;
}

.territory {
  transition: opacity 380ms ease;
}

.territory.is-out {
  opacity: 0;
}

/* Die Karte am Tier hängt in der Karte und gleicht den Zoom aus. Abstand
   zum Tier: --reach (halbe Größe des gezogenen Bereichs, Kartenpunkte, wächst
   mit dem Zoom) plus --reach-screen (Tippkreis ohne Bereich, Bildschirm). */
.animal-card-anchor {
  position: absolute;
  z-index: 9600;
  width: 0;
  height: 0;
  pointer-events: none;
}

.animal-card {
  position: absolute;
  display: grid;
  gap: 1px;
  width: max-content;
  max-width: 210px;
  padding: 5px 11px 6px;
  border-radius: 12px;
  background: rgba(251, 245, 230, 0.96);
  box-shadow: 0 2px 8px rgba(40, 25, 10, 0.3);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.3;
  pointer-events: auto;
  transform-origin: center;
  animation: animalCardIn 200ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes animalCardIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Der Abstand zum Tier wächst mit dem Zoom mit (--reach · Zoom), die Karte
   selbst bleibt gleich groß. */
.animal-card-anchor.side-top .animal-card {
  left: 0;
  bottom: calc(var(--reach) * var(--zoom) + var(--reach-screen, 0px) + 10px);
  translate: -50% 0;
}

.animal-card-anchor.side-bottom .animal-card {
  left: 0;
  top: calc(var(--reach) * var(--zoom) + var(--reach-screen, 0px) + 10px);
  translate: -50% 0;
}

.animal-card-anchor.side-left .animal-card {
  top: 0;
  right: calc(var(--reach) * var(--zoom) + var(--reach-screen, 0px) + 10px);
  translate: 0 -50%;
}

.animal-card-anchor.side-right .animal-card {
  top: 0;
  left: calc(var(--reach) * var(--zoom) + var(--reach-screen, 0px) + 10px);
  translate: 0 -50%;
}

.animal-card-anchor {
  transform: scale(var(--inv-zoom));
}

.animal-card-name {
  font-size: 13px;
}

.animal-card-name span {
  font-weight: 500;
  color: var(--ink-soft);
}

.animal-card-me {
  color: var(--ink-soft);
}

.animal-card-quest {
  display: grid;
  gap: 1px;
  margin: 5px -5px -2px;
  padding: 6px 6px 5px;
  border: 0;
  border-top: 1px solid var(--edge);
  background: none;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.animal-card-quest b { color: var(--forest); font-weight: 650; }

.icon-talisman {
  color: var(--amber);
}

.fx-row.is-resting {
  opacity: 0.65;
}

/* ── Talismane (features/talismans-ui.js) ───────────────────────── */
.tal-art {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(40, 25, 10, 0.25));
}

.tal-art.is-empty {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-sunk);
  filter: none;
}

/* Der getragene Talisman: oben Bild, Name und Stufe nebeneinander, die
   Wirkung darunter über die ganze Breite. */
.tal-worn {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.tal-worn-head {
  display: flex;
  gap: 12px;
  align-items: center;
}

.tal-worn-title {
  display: grid;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.tal-chev {
  flex-shrink: 0;
  color: var(--ink-soft);
}

.tal-detail {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--paper-sunk);
  font-size: 13px;
  line-height: 1.45;
}

.tal-detail p {
  margin: 0;
}

.tal-detail-head {
  display: flex;
  gap: 10px;
  align-items: center;
}

.tal-detail-extra.is-later {
  color: var(--ink-soft);
}

.tal-detail-desc,
.tal-detail-note {
  color: var(--ink-soft);
}

.tal-detail-note {
  font-size: 12px;
}

.tal-detail .tal-btn {
  justify-self: end;
  margin-top: 4px;
}

.tal-option.is-open {
  border-color: var(--forest);
  box-shadow: inset 0 0 0 1px var(--forest);
}

.tal-option.is-locked {
  opacity: 0.6;
}

.tal-name {
  font-family: var(--font-display);
  font-size: 16px;
}

.tal-where,
.tal-focus,
.tal-level {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}

.tal-focus {
  color: var(--ink);
}

.tal-bar {
  display: block;
  height: 4px;
  margin-top: 2px;
  border-radius: 4px;
  background: var(--paper-sunk);
  overflow: hidden;
}

.tal-bar > i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--amber);
}

.tal-none,
.tal-lock {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink-soft);
}

.tal-switch {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--forest);
  cursor: pointer;
}

.tal-choose {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--edge);
}

.tal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.tal-option {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--paper-white);
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.tal-option-name {
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

.tal-option-level {
  font-size: 12px;
  color: var(--ink-soft);
}

.tal-confirm {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--paper-sunk);
  font-size: 13px;
  line-height: 1.45;
}

.tal-confirm p {
  margin: 0 0 10px;
}

.tal-confirm-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.tal-btn {
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--forest);
  color: var(--on-forest);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.tal-btn.is-secondary {
  background: none;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--edge-strong);
}

.tal-btn:disabled {
  opacity: 0.5;
}

/* Enthüllung: über dem ganzen Rucksack, der Talisman steigt ins Licht. */
.tal-reveal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--paper);
  opacity: 0;
  transition: opacity 260ms ease;
  overflow: hidden;
}

.tal-reveal.is-in {
  opacity: 1;
}

.tal-reveal-rays {
  position: absolute;
  top: 34%;
  left: 50%;
  width: 360px;
  height: 360px;
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 120, 0.5) 0deg 6deg, rgba(255, 210, 120, 0) 6deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 100%);
  mask: radial-gradient(closest-side, #000 20%, transparent 100%);
  animation: talRays 14s linear infinite;
  pointer-events: none;
}

@keyframes talRays {
  to { rotate: 360deg; }
}

.tal-reveal-body {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 300px;
  text-align: center;
}

.tal-reveal-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
}

.tal-reveal-art {
  margin: 4px 0 6px;
  transform: translateY(16px) scale(0.6);
  opacity: 0;
  transition: transform 700ms cubic-bezier(0.3, 1.45, 0.5, 1) 120ms, opacity 300ms ease 120ms;
}

.tal-reveal.is-in .tal-reveal-art {
  transform: none;
  opacity: 1;
  animation: talFloat 3.2s ease-in-out 900ms infinite;
}

@keyframes talFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}

.tal-reveal-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
}

.tal-reveal-desc,
.tal-reveal-effect {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.tal-reveal-effect {
  color: var(--ink);
}

.tal-reveal .tal-confirm-row {
  justify-content: center;
  margin-top: 10px;
}

.tal-reveal-msg {
  min-height: 1em;
  margin: 0;
  font-size: 12.5px;
  color: var(--ember);
}

@media (prefers-reduced-motion: reduce) {
  .tal-reveal-rays,
  .tal-reveal.is-in .tal-reveal-art { animation: none; }
}


/* ── Fotos-Tab im Stil der App ───────────────────────────────────────
   Der Tab hatte einen eigenen Bastelstil: dicke Tintenränder, harte
   versetzte Schatten, Handschrift. Hier zurückgenommen auf das, was der Rest
   der App macht: dünne Ränder, flache Flächen, Pillen-Knöpfe. Die Farben
   (Rost als Akzent) bleiben. */
.photoquest-redesign .pq-new-title,
.photoquest-redesign #pqTitle {
  font-family: var(--font-display);
  font-weight: 600;
}

.photoquest-redesign .pq-new-speech,
.photoquest-redesign .pq-my-submission,
.photoquest-redesign .pq-history-tab {
  border-width: 1px;
  border-color: var(--edge-strong);
  box-shadow: none;
}

.photoquest-redesign .pq-new-speech::before {
  border-left-width: 1px;
  border-bottom-width: 1px;
  border-color: var(--edge-strong);
}

.photoquest-redesign .pq-new-avatar {
  border-width: 2px;
  box-shadow: inset 0 0 0 2px var(--paper-white);
}

.photoquest-redesign .pq-new-stamp {
  border: 0;
  box-shadow: none;
}

.photoquest-redesign .pq-status-strip,
.photoquest-redesign .pq-my-submission-caption {
  border: 0;
  background: var(--paper-sunk);
}

.photoquest-redesign .pq-reward-chip,
.photoquest-redesign .pq-history-thumb,
.photoquest-redesign .pq-history-crown {
  border-width: 1px;
}

.photoquest-redesign .pq-my-submission-img {
  border-width: 1px;
  box-shadow: none;
}

.photoquest-redesign .pq-new-cta {
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-weight: 700;
}

.photoquest-redesign .pq-new-cta:active {
  transform: scale(0.98);
  box-shadow: none;
}

.photoquest-redesign .pq-history-tab.active {
  border-color: var(--pq-rust);
  box-shadow: inset 0 0 0 1px var(--pq-rust);
}

.photoquest-redesign .pq-section-line {
  height: 1px;
  background: var(--edge);
}

.photoquest-redesign .pq-podium-card,
.photoquest-redesign .pq-result-detail {
  border-width: 1px;
  border-color: var(--edge-strong);
  box-shadow: none;
}

.photoquest-redesign .pq-podium-card.gold,
.photoquest-redesign .pq-podium-card.selected {
  border-color: var(--pq-gold);
  box-shadow: inset 0 0 0 1px var(--pq-gold);
}

/* Nur, wenn man selbst nicht im Bild ist (offscreen.js). */
html.me-offscreen .zoom-hint {
  display: block;
}

/* Beschriftung an Dingen auf der Karte (ui/map-label.js), wie die Wegsteine. */
.map-label {
  position: absolute;
  z-index: 9500;
  width: 0;
  height: 0;
  transform: translateY(calc(-1 * var(--lift, 0px))) scale(var(--inv-zoom));
  transform-origin: 0 0;
  pointer-events: none;
}

.map-label-pill {
  position: absolute;
  left: 0;
  bottom: 6px;
  translate: calc(-50% + var(--dx, 0px)) 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(251, 245, 230, 0.96);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(40, 25, 10, 0.3);
  opacity: 0;
  transition: opacity 160ms ease, translate 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.map-label.is-in .map-label-pill {
  opacity: 1;
  translate: calc(-50% + var(--dx, 0px)) 0;
}

/* Statistik: drei Zahlen oben, ruhig und gut lesbar. Die Uhrzeit des
   letzten Abgleichs steht klein darunter. */
.stat-tile {
  display: grid;
  gap: 2px;
  padding: 9px 10px 8px;
  cursor: default;
}

.stat-tile-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.stat-tile-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.stat-tile .subtle {
  margin-top: 0;
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0.8;
}

.sv-range-btn {
  font-weight: 600;
}

/* ============================================================
   Monatsabschluss (features/month-recap.js)
   Seiten zum Blättern über der verwischten Karte des Monats.
   ============================================================ */

.mr {
  position: fixed;
  inset: 0;
  z-index: 9200;
  color: #fbf5e6;
  overflow: hidden;
  opacity: 0;
  transition: opacity 280ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mr.is-in { opacity: 1; }
.mr.is-out { opacity: 0; }

.mr-bg {
  position: absolute;
  inset: -12%;
  background: center / cover no-repeat #2a231a;
  filter: blur(14px) saturate(1.15) brightness(0.62);
  transform: scale(1.06);
  transition: opacity 260ms ease;
  animation: mrDrift 28s ease-in-out infinite alternate;
}
.mr-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% 30%, rgba(20, 14, 6, 0.05), rgba(20, 14, 6, 0.55)),
    linear-gradient(180deg, rgba(20, 14, 6, 0.35), rgba(20, 14, 6, 0.1) 30%, rgba(20, 14, 6, 0.45));
}
@keyframes mrDrift {
  from { transform: scale(1.06) translate(-1.5%, -1%); }
  to { transform: scale(1.12) translate(1.5%, 1%); }
}

.mr-progress {
  position: absolute;
  top: calc(var(--safe-top) + 10px);
  left: 14px;
  right: 58px;
  display: flex;
  gap: 5px;
  z-index: 2;
}
.mr-progress span {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(251, 245, 230, 0.28);
  overflow: hidden;
}
.mr-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: #fbf5e6;
  transition: width 380ms ease;
}
.mr-progress .is-done i,
.mr-progress .is-now i { width: 100%; }

.mr-close {
  position: absolute;
  top: calc(var(--safe-top) + 2px);
  right: 8px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: #fbf5e6;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.mr-stage {
  position: absolute;
  inset: calc(var(--safe-top) + 34px) 0 calc(var(--safe-bottom) + 12px);
  display: flex;
  justify-content: center;
}
.mr-page {
  width: min(440px, 100%);
  padding: 8px 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  overflow-y: auto;
}

.mr-in {
  opacity: 0;
  transform: translateY(14px);
  animation: mrIn 560ms cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(var(--d, 0) * 120ms + 60ms);
}
.from-left .mr-in { transform: translateY(0) translateX(-16px); }
@keyframes mrIn { to { opacity: 1; transform: none; } }

.mr-kicker {
  font: 600 12px/1.2 var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 245, 230, 0.78);
  margin-bottom: 6px;
}
.mr-title {
  font: 600 clamp(34px, 10vw, 46px)/1.05 var(--font-display);
  margin: 4px 0 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.mr-title.is-small { font-size: clamp(24px, 7vw, 32px); margin-bottom: 8px; }
.mr-sub { font: 400 16px/1.4 var(--font-ui); color: rgba(251, 245, 230, 0.86); margin-bottom: 14px; }

.mr-host {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(251, 245, 230, 0.9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  background: #fbf5e6;
  margin: 6px 0 8px;
}
.mr-host.is-large { width: 150px; height: 150px; }
.mr-host img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mr-big {
  font: 700 clamp(46px, 15vw, 64px)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-top: 6px;
  color: #ffe1a3;
  text-shadow: 0 2px 22px rgba(255, 190, 90, 0.35);
}
.mr-big-label { font: 500 15px/1.35 var(--font-ui); color: rgba(251, 245, 230, 0.9); }
.mr-note {
  font: 400 14.5px/1.45 var(--font-ui);
  color: rgba(251, 245, 230, 0.82);
  max-width: 34ch;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.mr-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.mr-chips span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(251, 245, 230, 0.14);
  box-shadow: inset 0 0 0 1px rgba(251, 245, 230, 0.22);
  font: 600 13px/1 var(--font-ui);
}
.mr-hint { margin-top: 26px; font: 500 12.5px/1 var(--font-ui); color: rgba(251, 245, 230, 0.6); }

/* Karten in Papier, wie in der App */
.mr-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: rgba(251, 245, 230, 0.96);
  color: var(--ink);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}
.mr-card b { display: block; font: 600 15.5px/1.3 var(--font-ui); }
.mr-card small { display: block; font: 500 12px/1.35 var(--font-ui); color: var(--ink-soft); }
.mr-card em { display: block; font: italic 400 13.5px/1.4 var(--font-display); color: var(--ink-soft); margin-top: 2px; }

.mr-reward { margin-top: 18px; }
.mr-reward-img {
  width: 54px;
  height: 54px;
  flex: none;
  background: center / 150% no-repeat;
  border-radius: 12px;
  background-color: var(--paper-sunk);
}
.mr-reward-img.is-locked { filter: grayscale(1); opacity: 0.55; }
.mr-reward.is-won { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 0 0 2px #e8b431; }

/* Eigenes Bild, mit gewonnenem Skin */
.mr-me {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 18px 0 6px;
}
.mr-me.has-layers { margin: 64px 0 22px; }
.mr-me .mr-me-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: center / cover no-repeat #fbf5e6;
  border: 3px solid #fbf5e6;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.mr-me.is-won::before {
  content: '';
  position: absolute;
  inset: -60%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 214, 140, 0.55), rgba(255, 214, 140, 0) 70%);
  animation: mrGlow 2.6s ease-in-out infinite alternate;
}
@keyframes mrGlow { from { opacity: 0.6; transform: scale(0.94); } to { opacity: 1; transform: scale(1.04); } }

/* Podest */
.mr-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
}
.mr-pod { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.mr-pod b { font: 600 14px/1.2 var(--font-ui); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-pod small { font: 500 12px/1.2 var(--font-ui); color: rgba(251, 245, 230, 0.78); font-variant-numeric: tabular-nums; }
.mr-pod-pic {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: center / cover no-repeat #fbf5e6;
  border: 3px solid #fbf5e6;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  margin-bottom: 4px;
}
.mr-pod.is-1 .mr-pod-pic { width: 80px; height: 80px; border-color: #e8b431; }
.mr-pod-block {
  width: 100%;
  margin-top: 6px;
  border-radius: 12px 12px 4px 4px;
  background: rgba(251, 245, 230, 0.16);
  box-shadow: inset 0 0 0 1px rgba(251, 245, 230, 0.22);
  display: grid;
  place-items: center;
  font: 700 22px/1 var(--font-display);
  color: rgba(251, 245, 230, 0.9);
}
.mr-pod.is-1 .mr-pod-block { height: 104px; background: rgba(232, 180, 49, 0.32); }
.mr-pod.is-2 .mr-pod-block { height: 74px; }
.mr-pod.is-3 .mr-pod-block { height: 52px; }

/* Momente */
.mr-moments { display: grid; gap: 10px; width: 100%; margin-top: 10px; }
.mr-moment-icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--paper-sunk);
  color: var(--forest);
}
.mr-moment-photo {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 12px;
  background: center / cover no-repeat var(--paper-sunk);
}

/* Brief */
.mr-letter {
  width: 100%;
  text-align: left;
  background: #fbf5e6;
  color: var(--ink);
  border-radius: 6px;
  padding: 22px 22px 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  position: relative;
}
.mr-letter h2 { font: 600 21px/1.2 var(--font-display); margin: 0 0 10px; }
.mr-letter-body {
  max-height: 46vh;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.mr-letter.is-open .mr-letter-body {
  max-height: 58vh;
  overflow-y: auto;
  -webkit-mask-image: none;
  mask-image: none;
  user-select: text;
}
.mr-letter p { font: 400 15.5px/1.55 var(--font-display); margin: 0 0 10px; }
.mr-letter-sign { font: italic 500 16px/1 var(--font-display); text-align: right; margin-top: 6px; color: var(--ink-soft); }
.mr-letter-sign::before { content: '— '; }

.mr-quote {
  font: italic 400 18px/1.45 var(--font-display);
  margin: 6px 0 18px;
  max-width: 30ch;
  color: #fbf5e6;
}

.mr-btn {
  margin-top: 10px;
  min-width: 220px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: #fbf5e6;
  color: var(--ink);
  font: 700 16px/1 var(--font-ui);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}
.mr-btn.is-ghost {
  background: rgba(251, 245, 230, 0.14);
  color: #fbf5e6;
  box-shadow: inset 0 0 0 1px rgba(251, 245, 230, 0.35);
  min-width: 0;
  padding: 11px 18px;
  font-size: 14px;
}
.mr-link {
  margin-top: 10px;
  border: 0;
  background: none;
  color: rgba(251, 245, 230, 0.82);
  font: 500 14px/1.3 var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .mr-bg, .mr-me.is-won::before { animation: none; }
  .mr-in { animation-duration: 1ms; animation-delay: 0ms; }
}

/* Wer bei einem Moment dabei war (features/recap-moments.js) */
.rm-people {
  display: inline-flex;
  flex: none;
  align-items: center;
}
.rm-pic {
  width: var(--s, 30px);
  height: var(--s, 30px);
  border-radius: 50%;
  background: center / cover no-repeat var(--paper-sunk);
  box-shadow: 0 0 0 2px var(--paper-white);
}
.rm-pic + .rm-pic { margin-left: calc(var(--s, 30px) * -0.32); }

/* ============================================================
   Zusammenfassung eines Monats (features/month-summary.js)
   ============================================================ */

.ms {
  position: fixed;
  inset: 0;
  z-index: 9150;
  background: var(--paper);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 240ms ease, transform 240ms ease;
}
.ms.is-in { opacity: 1; transform: none; }
.ms-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; }

.ms-hero {
  position: relative;
  overflow: hidden;
  color: #fbf5e6;
  text-align: center;
  padding: calc(var(--safe-top) + 26px) 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ms-hero-bg {
  position: absolute;
  inset: -10%;
  background: center / cover no-repeat #2a231a;
  filter: blur(12px) saturate(1.1) brightness(0.55);
  z-index: 0;
}
.ms-hero > :not(.ms-hero-bg) { position: relative; z-index: 1; }
.ms-close {
  position: absolute !important;
  top: calc(var(--safe-top) + 6px);
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: #fbf5e6;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ms-host {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(251, 245, 230, 0.9);
  background: #fbf5e6;
  margin-bottom: 8px;
}
.ms-kicker { font: 600 11.5px/1.2 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(251, 245, 230, 0.78); }
.ms-title { font: 600 32px/1.1 var(--font-display); margin: 4px 0 2px; }
.ms-sub { font: 400 14px/1.3 var(--font-ui); color: rgba(251, 245, 230, 0.82); }
.ms-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(420px, 100%);
  margin-top: 16px;
}
.ms-stats span {
  display: grid;
  gap: 2px;
  padding: 9px 6px;
  border-radius: 12px;
  background: rgba(251, 245, 230, 0.13);
  box-shadow: inset 0 0 0 1px rgba(251, 245, 230, 0.2);
}
.ms-stats b { font: 700 18px/1.1 var(--font-display); font-variant-numeric: tabular-nums; color: #ffe1a3; }
.ms-stats small { font: 500 11.5px/1.2 var(--font-ui); color: rgba(251, 245, 230, 0.8); }

.ms-body {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 6px 16px calc(var(--safe-bottom) + 28px);
}
.ms-sec { margin-top: 22px; }
.ms-sec-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 9px;
  font: 600 18px/1.2 var(--font-display);
  color: var(--ink);
}
.ms-sec-title svg { color: var(--forest); }
.ms-sec-title small { margin-left: auto; font: 500 12.5px/1 var(--font-ui); color: var(--ink-soft); }

.ms-list { display: grid; gap: 8px; }
.ms-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper-white);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--edge);
  padding: 11px 13px;
  color: var(--ink);
}
.ms-card b { display: block; font: 600 15px/1.3 var(--font-ui); }
.ms-card small { display: block; font: 500 12.5px/1.35 var(--font-ui); color: var(--ink-soft); }
.ms-card em { display: block; font: italic 400 14px/1.4 var(--font-display); color: var(--ink-soft); margin-top: 1px; }
.ms-card > span:not(.rm-people):not(.ms-av):not(.ms-icon):not(.ms-bounty-img):not(.ms-reward):not(.ms-bounty-who) { flex: 1; min-width: 0; }
.ms-hint { margin: 7px 2px 0; font: 400 13px/1.4 var(--font-ui); color: var(--ink-soft); }

.ms-av {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: center / cover no-repeat var(--paper-sunk);
}
.ms-av.is-sm { width: 30px; height: 30px; }
.ms-me-text { flex: 1; }
.ms-reward {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 12px;
  background: center / 150% no-repeat var(--paper-sunk);
  filter: grayscale(1);
  opacity: 0.5;
}
.ms-reward.is-won { filter: none; opacity: 1; box-shadow: 0 0 0 2px var(--amber); }

.ms-icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--paper-sunk);
  color: var(--forest);
}

.ms-letter {
  background: var(--paper-white);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--edge);
  padding: 18px 18px 14px;
}
.ms-letter h4 { font: 600 19px/1.25 var(--font-display); margin: 0 0 10px; }
.ms-letter p { font: 400 15.5px/1.6 var(--font-display); margin: 0 0 10px; color: var(--ink); }
.ms-letter-sign { font: italic 500 15px/1 var(--font-display); text-align: right; color: var(--ink-soft); }
.ms-letter-sign::before { content: '— '; }

.ms-chain { display: block; padding: 0; }
.ms-chain summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
}
.ms-chain summary::-webkit-details-marker { display: none; }
.ms-chain summary > span:not(.rm-people) { flex: 1; min-width: 0; }
.ms-chev { color: var(--ink-soft); transition: transform 160ms ease; }
.ms-chain[open] .ms-chev { transform: rotate(180deg); }
.ms-chain-end { padding: 0 15px 8px; }
.ms-chain-end p { font: 400 15px/1.55 var(--font-display); margin: 0 0 9px; }

.ms-hunters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.ms-hunter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 4px;
  border-radius: 999px;
  background: var(--paper-white);
  box-shadow: inset 0 0 0 1px var(--edge);
  font: 600 13px/1 var(--font-ui);
}
.ms-hunter small { color: var(--amber); font-weight: 700; }
.ms-bounty-img {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 10px;
  background: center / contain no-repeat var(--paper-sunk);
}
.ms-bounty-who { display: grid; justify-items: center; gap: 2px; flex: none; max-width: 76px; }
.ms-bounty-who small { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ms-lb { display: grid; gap: 0; padding: 4px 6px; }
.ms-lb-row {
  display: grid;
  grid-template-columns: 26px 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 10px;
}
.ms-lb-row + .ms-lb-row { box-shadow: 0 -1px 0 var(--edge); }
.ms-lb-row.is-me { background: color-mix(in srgb, var(--amber) 12%, transparent); }
.ms-lb-rank { font: 700 15px/1 var(--font-display); color: var(--ink-soft); text-align: center; }
.ms-lb-name { font: 600 14.5px/1.2 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-lb-steps { font: 600 14px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.ms-goal { color: var(--forest); vertical-align: -2px; }

.ms-pq { display: block; }
.ms-pq-title { margin-bottom: 2px; }
.ms-pq-desc { margin-bottom: 6px; }
.ms-pq-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0 2px; }
.ms-pq-row + .ms-pq-row { box-shadow: 0 -1px 0 var(--edge); }
.ms-pq-row img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: none; }
.ms-pq-row > span:last-child { flex: 1; min-width: 0; }
.ms-pq-row small { margin-top: 3px; }
.ms-pq-rank {
  width: 54px; height: 54px; flex: none; border-radius: 10px;
  display: grid; place-items: center; background: var(--paper-sunk);
  font: 700 18px/1 var(--font-display); color: var(--ink-soft);
}

/* Wirkung eines Talismans als zwei Listen (features/talismans-ui.js):
   "Überall" und dort, wo er voll wirkt. */
.tal-fx {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  text-align: left;
}
.tal-fx-group {
  border-radius: 10px;
  padding: 7px 10px 8px;
  background: var(--paper-sunk);
}
.tal-fx-group.is-zone {
  background: color-mix(in srgb, var(--amber) 14%, var(--paper-white));
}
.tal-fx-head {
  display: block;
  font: 650 11.5px/1.3 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 3px;
}
.tal-fx ul {
  margin: 0;
  padding: 0 0 0 16px;
  font: 500 13.5px/1.4 var(--font-ui);
  color: var(--ink);
}
.tal-fx li + li { margin-top: 2px; }
.tal-fx-later {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.tal-fx.is-compact .tal-fx-group { padding: 5px 9px 6px; }
.tal-fx.is-compact ul { font-size: 12.5px; }
.tal-detail .tal-fx-group { background: var(--paper-white); }
.tal-detail .tal-fx-group.is-zone { background: color-mix(in srgb, var(--amber) 10%, var(--paper-white)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 30%, transparent); }
.tal-reveal .tal-fx { width: min(300px, 100%); margin: 2px auto 0; }
.tal-worn[aria-expanded="true"] .tal-where { display: none; }

/* Startbild (ui/boot.js): wie der Startbildschirm der Android-App, bis die
   Karte steht. */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--paper);
  transition: opacity 380ms ease;
}
.boot-screen img {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  animation: bootBreath 2.4s ease-in-out infinite;
}
.boot-screen.is-gone { opacity: 0; pointer-events: none; }
.boot-dots { display: flex; gap: 7px; }
.boot-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--forest);
  opacity: 0.25;
  animation: bootDot 1.2s ease-in-out infinite;
}
.boot-dots i:nth-child(2) { animation-delay: 0.2s; }
.boot-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes bootBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes bootDot { 0%, 100% { opacity: 0.25; } 40% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  .boot-screen img, .boot-dots i { animation: none; }
}

/* Neue Karte: erst zeigen, wenn das Bild da ist, dann weich einblenden. */
.map-canvas.is-loading { opacity: 0; }
.map-canvas { transition: opacity 320ms ease; }

/* Vordergrund nach Tiefe (ui/occluders.js). Die Ebene selbst bildet keinen
   eigenen Stapel, damit ihre Teile zwischen die Avatare sortiert werden. */
#occludersLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.occluder {
  position: absolute;
  background: var(--sprite) center / 100% 100% no-repeat;
  pointer-events: none;
  /* Wie das frühere Vordergrundbild: Wer dahinter steht, scheint leicht durch. */
  opacity: 0.8;
}
html.has-daylight .occluder {
  filter: url(#mapTint);
}
/* Nachts: dieselbe Färbung samt Lichtinseln wie die Karte darunter
   (ui/daylight.js, shareShade). Bild mal Färbung, beschnitten auf das Bild. */
html.has-daylight.has-shade-img .occluder {
  filter: none;
  background-image: var(--sprite), var(--shade-img);
  background-size: 100% 100%, var(--shade-w) var(--shade-h);
  background-position: 0 0, var(--ox, 0) var(--oy, 0);
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  -webkit-mask: var(--sprite) 0 0 / 100% 100% no-repeat;
  mask: var(--sprite) 0 0 / 100% 100% no-repeat;
}

/* ============================================================
   Der Morgen danach (features/dawn.js): beim ersten Öffnen am Tag, was
   seit dem letzten Besuch passiert ist. Die Karte bleibt darüber hell,
   damit man die Profilbilder ihr Stück ablaufen sieht.
   ============================================================ */
.inv-modal.dawn-modal {
  background: rgba(30, 20, 8, calc(0.2 * (1 - var(--sheet-progress, 0))));
}

.dawn-sheet {
  padding: 18px 16px calc(14px + var(--safe-bottom));
  gap: 12px;
  overflow-y: auto;
  max-height: 72dvh;
}

.dawn-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dawn-host {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--paper-sunk) center / cover no-repeat;
  border: 2px solid var(--paper-white);
  box-shadow: 0 0 0 1px var(--edge), var(--shadow-low);
  animation: dawnHost 520ms cubic-bezier(0.2, 0.9, 0.3, 1.25) backwards;
}

.dawn-head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dawn-kicker {
  font-size: 12.5px;
  color: var(--ink-soft);
}

.dawn-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}

.dawn-say {
  position: relative;
  margin: 0;
  padding: 10px 14px;
  background: var(--paper-white);
  border: 1px solid var(--edge);
  border-radius: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--ink);
  animation: dawnRowIn 420ms cubic-bezier(0.22, 0.61, 0.36, 1) 160ms backwards;
}

/* Spitze der Sprechblase zum Gastgeber hin. */
.dawn-say::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: var(--paper-white);
  border-left: 1px solid var(--edge);
  border-top: 1px solid var(--edge);
  transform: rotate(45deg);
}

.dawn-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 2px 0;
}

.dawn-hero-num {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.dawn-plus {
  font-size: 0.62em;
  vertical-align: 0.28em;
  margin-right: 1px;
  opacity: 0.8;
}

.dawn-hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.dawn-hero-label {
  font-size: 13px;
  color: var(--ink-soft);
}

.dawn-rank {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--paper-sunk);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 200ms ease, transform 420ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.dawn-rank.is-in { opacity: 1; transform: none; }
.dawn-rank.is-up { background: var(--forest); color: var(--on-forest); }
.dawn-rank.is-down { background: rgba(168, 79, 36, 0.14); color: var(--ember); }

.dawn-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dawn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  background: var(--paper-white);
  border: 1px solid var(--edge);
  border-radius: 14px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  animation: dawnRowIn 440ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(700ms + var(--i, 0) * 140ms);
}

.dawn-row-text {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.3;
}

.dawn-row-text b { font-weight: 700; }

.dawn-row-text small {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.dawn-row-icon { flex: 0 0 auto; color: var(--ink-soft); }
.dawn-row.is-good .dawn-row-icon { color: var(--forest); }
.dawn-row.is-bad .dawn-row-icon { color: var(--ember); }

.dawn-row-num {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
}

.dawn-pics {
  display: inline-flex;
  flex: 0 0 auto;
}

.dawn-pic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--paper-sunk) center / cover no-repeat;
  border: 2px solid var(--paper-white);
  box-shadow: 0 0 0 1px var(--edge);
}

.dawn-pic + .dawn-pic { margin-left: -12px; }

.dawn-row.is-chest { cursor: pointer; }
.dawn-row.is-chest:active { background: var(--paper-sunk); }

.dawn-chest {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
  animation: dawnChest 1.6s ease-in-out 1.4s 2;
}

.dawn-row-go {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--on-forest);
  font-size: 13px;
  font-weight: 700;
}

.dawn-go {
  min-height: 48px;
  margin-top: 2px;
  border: 0;
  border-radius: 14px;
  background: var(--forest);
  color: var(--on-forest);
  font: inherit;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  animation: dawnRowIn 440ms cubic-bezier(0.22, 0.61, 0.36, 1) 1100ms backwards;
}

.dawn-go:active { background: var(--forest-strong); }

@keyframes dawnRowIn {
  from { opacity: 0; transform: translateY(10px); }
}

@keyframes dawnHost {
  from { opacity: 0; transform: scale(0.5) rotate(-12deg); }
}

@keyframes dawnChest {
  0%, 100% { transform: none; }
  15% { transform: rotate(-6deg); }
  30% { transform: rotate(5deg); }
  45% { transform: rotate(-3deg); }
  60% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dawn-host, .dawn-say, .dawn-row, .dawn-go, .dawn-chest { animation: none; }
  .dawn-rank { transition: none; }
}

/* Mittige Dialoge wachsen von der Stelle, an der getippt wurde, zur Mitte
   (ui/tap-origin.js). Der Hintergrund blendet weich ein. */
.modal.active:not(.inv-modal):not(.go-modal):not(#monthTransitionModal):not(#bountyCameraModal) {
  animation: modalFade 200ms ease-out backwards;
}

.modal.active:not(#monthTransitionModal):not(#bountyCameraModal) > .box {
  animation: dialogIn 300ms cubic-bezier(0.2, 0.9, 0.3, 1.12) backwards;
}

@keyframes modalFade {
  from { background-color: rgba(0, 0, 0, 0); }
}

@keyframes dialogIn {
  from {
    opacity: 0;
    transform:
      translate(calc((var(--tap-x, 50vw) - 50vw) * 0.85), calc((var(--tap-y, 58vh) - 50vh) * 0.85))
      scale(0.55);
  }
  60% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .modal.active, .modal.active > .box { animation: none !important; }
}

/* ============================================================
   Freunde einladen (features/invite.js): QR-Code, Link, Teilen.
   ============================================================ */
.modal .box.invite-box {
  position: relative;
  width: min(360px, 100%);
  padding: 22px 20px 18px;
  border-radius: 20px;
  background: var(--paper);
  text-align: center;
}

.invite-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--paper-sunk);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
}

.invite-title {
  margin: 2px 0 6px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  color: var(--ink);
}

.invite-text {
  margin: 0 auto 14px;
  max-width: 280px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.invite-qr {
  width: 200px;
  height: 200px;
  margin: 0 auto 12px;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--edge);
}

.invite-qr svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: inviteQrIn 360ms ease-out;
}

.invite-qr.is-loading {
  background:
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%) 0 0 / 200% 100%,
    var(--paper-sunk);
  animation: inviteShimmer 1.2s linear infinite;
}

@keyframes inviteShimmer { to { background-position: -200% 0, 0 0; } }
@keyframes inviteQrIn { from { opacity: 0; transform: scale(0.94); } }

.invite-link {
  margin: 0 auto 14px;
  padding: 8px 12px;
  max-width: 100%;
  border-radius: 10px;
  background: var(--paper-white);
  border: 1px dashed var(--edge-strong);
  font-size: 13px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  user-select: all;
}

.invite-actions {
  display: flex;
  gap: 8px;
}

.invite-btn {
  flex: 1;
  min-height: 46px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--paper-white);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.invite-btn.is-primary {
  border-color: transparent;
  background: var(--forest);
  color: var(--on-forest);
}

.invite-btn:active { filter: brightness(0.95); }
.invite-btn.is-done { background: var(--forest-strong); color: var(--on-forest); }
.invite-btn[hidden] { display: none; }

.modal:not(.is-ready) .invite-btn { opacity: 0.55; pointer-events: none; }

.invite-hint {
  margin-top: 10px;
  min-height: 16px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* Zahlen, die sich ändern oder untereinander stehen, mit gleich breiten
   Ziffern: Beim Hochzählen und in Listen flattert nichts. */
.stat-tile-value,
.mini-lb-steps,
.store-item,
.dawn-row-text b,
.header-tier-sub {
  font-variant-numeric: tabular-nums;
}

/* Gemalte Vorräte (ui/icons.js, ART_ICONS): Münze, Scherbe, Schlüssel. */
.art-icon {
  display: inline-block;
  flex: 0 0 auto;
  object-fit: contain;
  vertical-align: -0.22em;
  user-select: none;
  -webkit-user-drag: none;
}

/* ============================================================
   Mittige Dialoge im Stil der App (.box.dlg): Papier, eine Überschrift,
   ein Satz, ein klarer Hauptknopf. Für Schritte, Profil, Power-Ups.
   ============================================================ */
.modal .box.dlg {
  position: relative;
  width: min(380px, 100%);
  padding: 22px 20px 18px;
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
}

.dlg-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--paper-sunk);
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
  z-index: 2;
}

.dlg-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--paper-sunk);
  color: var(--forest);
}

.dlg-title {
  margin: 0 0 12px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
}

.dlg-text {
  margin: -4px 0 14px;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.dlg-label {
  display: block;
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

.dlg-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.dlg-btn {
  flex: 1;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--paper-white);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.dlg-btn.is-primary {
  border-color: transparent;
  background: var(--forest);
  color: var(--on-forest);
}

.dlg-btn:active { filter: brightness(0.95); }
.dlg-btn[hidden] { display: none; }

.dlg-more {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.dlg-more summary {
  cursor: pointer;
  list-style: none;
  text-align: center;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.dlg-more summary::-webkit-details-marker { display: none; }
.dlg-more p { margin: 8px 0 0; line-height: 1.45; text-align: center; }

/* Schritte verbinden (features/steps.js) */
.steps-state {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--paper-white);
  border: 1px solid var(--edge);
}

.steps-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(201, 138, 27, 0.18);
}

.steps-state.is-ok .steps-dot { background: var(--forest); box-shadow: 0 0 0 4px rgba(47, 93, 70, 0.18); }
.steps-state.is-info .steps-dot { background: var(--ink-soft); box-shadow: 0 0 0 4px rgba(106, 91, 69, 0.15); }

.steps-state-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
  line-height: 1.4;
}

.steps-state-text b { font-size: 15px; }
.steps-state-text span { color: var(--ink-soft); }

/* Profil bearbeiten (features/profile.js) */
.modal .box.ep-dlg {
  width: min(420px, 100%);
  max-height: 90dvh;
  overflow-y: auto;
}

.ep-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 176px;
  margin: 0 -4px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper-sunk);
}

.ep-stage::before {
  content: "";
  position: absolute;
  inset: -8px;
  background: var(--ep-map, none) 50% 55% / cover no-repeat;
  filter: blur(1.5px) saturate(0.95);
}

.ep-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(251, 245, 230, 0.05) 30%, rgba(251, 245, 230, 0.45) 100%);
}

.ep-stage .ep-preview-frame { z-index: 1; }

.ep-preview {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--paper-sunk) center / cover no-repeat;
  border: 3.5px solid var(--ink);
  box-shadow: 0 8px 18px -6px rgba(40, 25, 10, 0.55);
}

.ep-photo-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(253, 249, 239, 0.94);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 12px -6px rgba(40, 25, 10, 0.6);
  cursor: pointer;
}

.ep-photo-btn[hidden] { display: none; }

.ep-input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--edge-strong);
  border-radius: 12px;
  background: var(--paper-white);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.ep-input:focus { outline: 2px solid var(--forest); outline-offset: 1px; }

.ep-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ep-color-btn {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper-white);
  box-shadow: inset 0 0 0 7px var(--c), inset 0 0 0 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 140ms ease;
}

.ep-color-btn.selected {
  transform: scale(1.12);
  box-shadow: inset 0 0 0 7px var(--c), 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}

.ep-color-btn.selected::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--ink);
}

.ep-skins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}

.ep-skin-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 6px;
  border: 1px solid var(--edge);
  border-radius: 14px;
  background: var(--paper-white);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
}

.ep-skin-btn.selected {
  border-color: var(--forest);
  box-shadow: inset 0 0 0 1.5px var(--forest);
  background: #f3f0df;
}

.ep-mini-frame {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  margin: 10px 0 8px;
}

.ep-mini-photo {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--paper-sunk) center / cover no-repeat;
  border: 2.5px solid var(--ink);
}

.ep-skin-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
}

.ep-skin-earned {
  position: absolute;
  top: 5px;
  right: 6px;
  color: var(--amber);
}

/* Erstes Power-Up (features/powerups.js) */
.modal .box.pu-tut { width: min(400px, 100%); max-height: 88dvh; overflow-y: auto; }

.pu-tut-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pu-tut-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--paper-white);
  border: 1px solid var(--edge);
  animation: dawnRowIn 360ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(120ms + var(--i, 0) * 50ms);
}

.pu-tut-row.is-owned { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }

.pu-tut-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--paper-sunk);
}

.pu-tut-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-soft);
}

.pu-tut-text b { font-size: 14.5px; color: var(--ink); }

.pu-tut-have {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--on-forest);
  font-size: 12px;
  font-weight: 700;
}

/* Spurenlesen (features/powerups.js) */
.tr-head-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 8px;
  background: var(--paper-sunk);
}

.tr-body { padding: 4px 16px calc(16px + var(--safe-bottom)); }

.tr-intro {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

.tr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: var(--paper-white);
  border: 1px solid var(--edge);
  animation: dawnRowIn 380ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(150ms + var(--i, 0) * 70ms);
}

.tr-row.is-me { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }

.tr-rank {
  flex: 0 0 auto;
  width: 22px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-soft);
}

.tr-pic {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--paper-sunk) center / cover no-repeat;
  box-shadow: 0 0 0 1px var(--edge);
}

.tr-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.tr-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 700;
}

.tr-mark {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--paper-sunk);
}

.tr-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.tr-steps {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.pu-tut-more {
  margin-top: 6px;
  animation: dawnRowIn 360ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(120ms + var(--i, 0) * 50ms);
}

.pu-tut-more-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

.pu-tut-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pu-tut-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 7px;
  border-radius: 999px;
  background: var(--paper-white);
  border: 1px solid var(--edge);
  font-size: 13px;
}

.ep-color-btn { outline: 1px solid var(--edge); outline-offset: 0; }
.ep-color-btn.selected { outline: 0; }