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

:root {
  --paper: #fffdf5;
  --paper-white: #fffdf5;
  --ink: #282828;
  --sky: #c9ebff;
  --accent2: #00b2ff;
  --accent4: #00c082;
  --shadow: rgba(0, 0, 0, 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;
  --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: "Baloo 2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-hand: "Patrick Hand", cursive;

  --surface: #fffef8;
  --surface-soft: #fff8df;
  --surface-blue: #eef8ff;
  --surface-green: #eaf8ef;
  --surface-orange: #fff1dd;
  --surface-red: #ffe9e6;

  --border-soft: rgba(40, 40, 40, 0.14);

  --shadow-low: 0 2px 5px rgba(0, 0, 0, 0.10);
  --shadow-mid: 0 4px 10px rgba(0, 0, 0, 0.13);
  --shadow-high: 0 10px 28px rgba(0, 0, 0, 0.18);

  --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);
  overscroll-behavior-y: contain;
}

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,
.marker .badge,
.flag .banner,
.tooltip,
.profile-badge-month {
  font-family: var(--font-hand);
}

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

.safe-area-top {
  height: var(--safe-top);
  background: linear-gradient(180deg, #e8f7e4 0%, rgba(255, 253, 245, 0.95) 100%);
  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: 900;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background:
    radial-gradient(circle at 15% 100%, rgba(0, 192, 130, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 85% 100%, rgba(0, 178, 255, 0.06) 0%, transparent 40%),
    linear-gradient(180deg, rgba(255, 253, 245, 0.97), rgba(255, 253, 245, 0.88));
  backdrop-filter: blur(6px);
  border-bottom: 2.5px solid rgba(0, 0, 0, 0.06);
  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: 2.5px solid var(--ink);
  overflow: hidden;
  background: var(--paper-white);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px var(--shadow);
}

.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: 11px;
  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: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper-white);
  box-shadow: 0 3px 8px var(--shadow);
  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: 11px;
  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: 11.5px;
  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: 6px;
  flex-wrap: wrap;
  padding: 10px 10px 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 11.5px;
  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: 11.5px;
  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(--accent4);
  background: rgba(0, 192, 130, 0.07);
}

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

/* ============================================================
   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);
  box-shadow: 0 3px 10px var(--shadow);
}

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

.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: 2px solid var(--ink);
  border-radius: 10px;
  padding: 5px 9px;
  background: var(--paper-white);
  box-shadow: 0 3px 8px var(--shadow);
  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: linear-gradient(170deg, #d4f0d4 0%, #c9ebff 30%, #eaffff 65%, var(--paper) 100%);
  width: 100%;
  aspect-ratio: 1;
  flex-shrink: 0;
  margin: 0;
}

.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;
}

#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;
}

.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: 10px;
  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: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: 0 6px 20px var(--shadow);
  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: 2px solid var(--ink);
  background: #ffebcd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px var(--shadow);
}

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

.quest-card-label {
  font-size: 10px;
  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: 11px;
  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: center;
  gap: 10px;
  margin: 4px 0 8px;
  padding: 8px 12px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: var(--paper-white);
  box-shadow: 0 4px 14px var(--shadow);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 200ms ease;
}

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

.streak-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: #fff4e3;
  color: #c2571d;
}

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

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

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

.streak-card-title { font-weight: bold; font-size: 14px; }
.streak-card-sub { font-size: 11.5px; opacity: 0.6; line-height: 1.3; }

/* Schmaler Balken auf der Karte, breiter im Blatt: Beide messen die Woche,
   nicht den Tag — der Tagesfortschritt steht im Statistik-Tab. */
.streak-card-bar {
  height: 5px;
  margin: 4px 0 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.09);
  overflow: hidden;
}

.streak-card-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8873a, #d4a017);
  transition: width 460ms cubic-bezier(0.22, 0.9, 0.36, 1);
}

/* 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: 2px solid var(--ink);
  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: #fff; }

.streak-gap-note {
  margin-top: 9px;
  font-size: 11.5px;
  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: 2px solid var(--ink);
  border-radius: 999px;
  background: #f0ede4;
  overflow: hidden;
}

.streak-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8873a, #d4a017);
  transition: width 520ms cubic-bezier(0.22, 0.9, 0.36, 1);
}

.streak-progress-fill.is-full {
  background: linear-gradient(90deg, #8b6fd4, #6b4fbb);
}

.streak-progress-note {
  margin-top: 5px;
  font-size: 11.5px;
  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: 3px; margin-left: auto; }

.streak-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.3);
  background: transparent;
}

.streak-dot.is-done { background: #e8873a; border-color: #b4581c; }
.streak-dot.is-final { width: 9px; height: 9px; }
.streak-dot.is-final.is-done { background: #6b4fbb; border-color: #4a3585; }

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

.streak-card.has-pending .streak-card-icon {
  background: #ffd9a8;
}

@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: 2px solid var(--ink);
  border-radius: 999px;
  background: #fff;
  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(--ink);
  background: #fff;
}

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

.streak-rung.is-final.is-done { border-style: solid; border-color: #6b4fbb; }

.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: 10px;
  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: 10px;
  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: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
}

.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: 2px solid var(--ink);
  background: #f4f9ff;
  color: #2f7fb5;
}

.act-today-label { font-weight: bold; font-size: 15px; }
.act-today-line { font-size: 11.5px; 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: 2px solid var(--ink);
  border-radius: 999px;
  background: #f0ede4;
  overflow: hidden;
}

.act-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #4aa3df, #00c082);
  transition: width 520ms cubic-bezier(0.22, 0.9, 0.36, 1);
}

.act-bar-note { margin-top: 5px; font-size: 11.5px; 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: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  background: #fbf9f2;
  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: 10.5px;
  font-weight: bold;
  line-height: 1.2;
}

.act-chip.is-done { opacity: 1; border-color: rgba(0, 0, 0, 0.3); background: #fff; }

.act-chip.is-here {
  border-color: var(--ink);
  background: #eefaf4;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px var(--shadow);
}

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

.act-chip-from {
  font-size: 10px;
  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);
}

.sv-guide-icon {
  display: inline-flex;
  color: rgba(47, 127, 181, 0.75);
  background: var(--paper-white, #fff);
  border-radius: 3px;
}

.sv-guide-value {
  font-size: 9px;
  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 rgba(0, 192, 130, 0.75); }
.sv-guide.is-goal .sv-guide-icon { color: #00996a; }
.sv-guide.is-goal .sv-guide-value { color: #00996a; 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: 11px;
  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, #4aa3df, #2f7fb5);
}

.sv-hours-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 9px;
  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;
  }

  #mobileChallengeFlow {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

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

  #mobileChallengeFlow > .mobile-panel-bottom {
    flex: 0 0 auto;
    overflow: visible;
  }

  main.stage {
    aspect-ratio: 1 / 1;
    width: 100%;
    flex: 0 0 auto !important;
  }
}

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

.profile-chip,
.mobile-pu-chip {
  display: flex;
  align-items: center;
  background: var(--paper-white);
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 2px 6px var(--shadow);
  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: 1.5px solid var(--ink);
  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: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 3px 8px var(--shadow);
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}

.mini-lb-card.is-me {
  background: #fffde7;
  border-color: var(--ink);
}

.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(--ink);
  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;
}

.mini-lb-gap {
  font-size: 11px;
  opacity: 0.4;
  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: 2px solid var(--ink);
  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: 2px solid var(--ink);
  background: var(--paper-white);
  box-shadow: 0 3px 8px var(--shadow);
  padding: 4px 8px;
  border-radius: 8px;
}

#editNameBtn {
  min-width: 38px;
  height: 34px;
  padding: 0 10px !important;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-white);
  box-shadow: var(--shadow-low);
  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(--inv-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: 2px solid var(--ink);
  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(--inv-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 */

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

.flag .pole {
  width: 3px;
  height: 28px;
  background: #4b4b4b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-left: 8px;
}

.flag .banner {
  width: 40px;
  height: 18px;
  background: #fffde0;
  border: 2px solid #4b4b4b;
  border-radius: 5px 9px 9px 5px;
  transform-origin: left center;
  transform: rotate(-4deg);
  margin-top: -30px;
  margin-left: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-shadow: 0 3px 7px var(--shadow);
}

.marker {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.marker .badge {
  background: var(--paper-white);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 13px;
  box-shadow: 0 3px 8px var(--shadow);
}

/* Collectibles */

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

.coin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff59e 0%, #ffd54f 60%, #fbc02d 100%);
  border: 1px solid #8a6b00;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  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: 960;
  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: 2px solid var(--ink);
  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. */
  z-index: 860;
  background: var(--paper-white);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 3px 7px;
  font-size: 12px;
  box-shadow: 0 3px 8px var(--shadow);
  pointer-events: none;
  display: none;
}

.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: 2px solid var(--ink);
  border-radius: 10px;
  padding: 7px;
  box-shadow: 0 3px 8px var(--shadow);
  cursor: pointer;
}

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

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

.stat-title {
  font-weight: bold;
}

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

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

.switch-btn {
  padding: 5px 9px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-white);
  cursor: pointer;
  box-shadow: 0 3px 8px var(--shadow);
  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: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 6px 16px var(--shadow);
  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: 2px solid var(--ink);
  background: var(--paper-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px var(--shadow);
}

.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: 2px solid var(--ink);
  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: 2px solid var(--ink);
  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: 2px solid var(--ink);
  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: 2px solid var(--ink);
  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(--sky) 0%, #eaffff 60%, var(--paper) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

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

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

.ob-btn {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 3px 8px var(--shadow);
}

.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: 2px solid var(--ink);
  border-radius: 14px;
  padding: 8px 14px;
  background: var(--paper-white);
  color: var(--ink);
  box-shadow: var(--shadow-mid);
  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);
  box-shadow: var(--shadow-low);
}

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

.ck-btn-primary {
  background: var(--accent4);
  color: var(--paper-white);
}

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

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

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

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

.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: 3px solid var(--ink) !important;
  box-shadow: var(--shadow-mid);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

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

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

.profile-steps-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--surface-green);
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--shadow-low);
}

.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: 2px solid var(--ink);
  border-radius: 15px;
  background: var(--paper-white);
  box-shadow: var(--shadow-mid);
  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);
  box-shadow: var(--shadow-low);
}

.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
   ============================================================ */

.ep-color-btn,
.ep-skin-btn {
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  box-shadow: 0 2px 6px var(--shadow);
  transition: transform 100ms, border-color 100ms;
}

.ep-color-btn {
  width: 32px;
  height: 32px;
}

.ep-skin-btn {
  width: 48px;
  height: 48px;
  background-size: cover;
  background-position: center;
  background-color: var(--paper-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
}

.ep-color-btn:hover,
.ep-skin-btn:hover {
  transform: scale(1.1);
}

.ep-color-btn.selected,
.ep-skin-btn.selected {
  border-color: var(--ink);
  transform: scale(1.15);
}

.edit-profile-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

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

/* ============================================================
   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);
  box-shadow: 0 2px 8px var(--shadow);
}

.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: 9.5px;
  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: 11px;
}

#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: 10px;
  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: 10px;
  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: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f3d076, #b88826 60%, #6a4a14 100%);
  box-shadow:
    inset 0 -1px 1px rgba(0, 0, 0, 0.4),
    0 1px 1px rgba(0, 0, 0, 0.3);
  display: inline-block;
  position: relative;
  animation: none;
  transform: none;
  border: none;
}

#BoardView .reward-value .coin::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(60, 30, 5, 0.5);
}

#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: 11.5px;
  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: 2px solid var(--ink);
  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: 10.5px;
  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: 9.5px;
  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: 11px;
  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);

  background:
    radial-gradient(circle at 20% 0%, rgba(240, 220, 166, 0.7), transparent 46%),
    var(--pq-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: 11px;
  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: 11px;
  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: 2px solid var(--ink);
  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: 11.5px;
  opacity: 0.75;
  margin-bottom: 10px;
}

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

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

.sv-walked { background: #00c082; }
.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: 2px solid var(--ink); border-bottom: 0; }
.sv-seg.walked { background: #00c082; }
.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: 10px;
  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: 2px solid var(--ink);
  border-radius: 12px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 2px 6px var(--shadow);
}

/* 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: 70px;
  height: 70px;
  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: 2px solid var(--ink);
  border-radius: 999px;
  background: #e6e2d8;
  transition: background 180ms ease;
}

.ep-layer-toggle.is-on .ep-switch { background: #00c082; }

.ep-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink);
  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: #fff;
  box-shadow: 0 3px 8px var(--shadow);
  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: #fff;
}

.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: 11.5px;
  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: 10.5px;
  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: 10px;
  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: 10.5px;
  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: 2px solid var(--ink);
  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: 2px solid var(--ink);
  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-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: 2px solid var(--ink);
  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: 10.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.chain-step-who {
  font-family: var(--font-ui);
  font-size: 10px;
  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: 10px;
  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: 2px solid var(--ink);
  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 { box-shadow: 0 4px 12px var(--shadow); }
.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: 2px solid var(--ink);
  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: 2px solid var(--ink);
  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: 2px solid var(--ink);
  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: 2px solid var(--ink);
}

.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.
   ============================================================ */

.map-box {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 2px solid #282828;
  border-radius: 4px 4px 3px 3px;
  background: #b98a4b;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  pointer-events: auto;
  font: inherit;
  color: inherit;

  /* Kommende Kisten sind zurückgenommen, aber nicht blass: Man soll auf
     einen Blick sehen, was noch vor einem liegt. */
  opacity: 0.85;
  filter: saturate(0.75);

  /* Sobald es Bilder gibt, ersetzt background-image die Farbflächen —
     Größe, Rahmen und Schatten bleiben wie hier. */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Deckelfuge und Schlossbeschlag machen die Silhouette auch ohne Farbe
   lesbar — auf 20 Pixel ist die Form alles, was ankommt. */
.map-box::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 6px;
  height: 2px;
  background: rgba(0, 0, 0, 0.5);
}

.map-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 5px;
  height: 8px;
  transform: translateX(-50%);
  border: 1px solid #282828;
  border-radius: 1px;
  background: #f2d089;
}

.map-box.tier-iron {
  background: #9fa8ad;
  border-radius: 6px 6px 3px 3px;
}

.map-box.tier-gold {
  background: linear-gradient(160deg, #ffe08a, #e8b431 60%, #c9941c);
  border-radius: 8px 8px 3px 3px;
  width: 23px;
  height: 23px;
  opacity: 0.95;
}

.map-box.tier-gold::after { background: #fff3c4; height: 9px; }

/* Die Kiste zieht ins Inventar. */
.box-fly {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid #282828;
  border-radius: 4px 4px 3px 3px;
  background: #b98a4b;
  pointer-events: none;
  z-index: 940;
  animation: boxFly 860ms cubic-bezier(0.34, 0.9, 0.4, 1) forwards;
}

.box-fly.tier-iron { background: #9fa8ad; }
.box-fly.tier-gold { background: linear-gradient(160deg, #ffe08a, #e8b431 60%, #c9941c); }

@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: 1.5px solid #282828;
  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: 2px solid var(--ink);
  border-radius: 14px;
  background: #fffde7;
  box-shadow: 0 4px 12px var(--shadow);
}

.shop-balance-shards { background: #f3f0ff; }

.shop-balance-label {
  font-size: 11px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.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: 11.5px;
  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: 11.5px;
  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: 2px solid var(--ink);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 8px var(--shadow);
}

.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: 11px;
  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: 5px 12px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  background: var(--accent4);
  color: #fff;
  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: #eee; color: #999; }
.shop-buy-owned { background: #e0e0e0; color: #666; 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: 2.5px solid var(--ink);
  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: 2px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(135deg, #fffdf0, #f3f0ff);
  box-shadow: 0 4px 12px var(--shadow);
}

.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: 2px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  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: 11.5px;
  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: 2px solid var(--ink);
  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 { box-shadow: 0 4px 12px var(--shadow); }
.inv-item:active { transform: scale(0.96); }

.inv-item-name { font-size: 11.5px; font-weight: bold; text-align: center; line-height: 1.2; }

.inv-item-cost {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  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;
}

.inv-supply-value { font-size: 18px; font-weight: bold; }
.inv-supply-label { font-size: 10.5px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.04em; }

.inv-hint {
  margin: 0;
  padding: 0 4px;
  font-size: 11.5px;
  opacity: 0.6;
  line-height: 1.5;
}

/* ── Die Kiste selbst ────────────────────────────────────── */

.chest {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 34px;
}

.chest-lg { width: 122px; height: 96px; }

.chest-base,
.chest-lid {
  position: absolute;
  left: 0;
  right: 0;
  border: 2px solid #282828;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.chest-base {
  bottom: 0;
  height: 62%;
  border-radius: 2px 2px 6px 6px;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 8%, transparent 8% 92%, rgba(0, 0, 0, 0.16) 92%),
    linear-gradient(180deg, #c89a58, #a9772f);
}

/* Beschläge und Schloss. Ohne sie ist es ein Kasten, keine Truhe. */
.chest-base::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -14%;
  width: 26%;
  height: 46%;
  transform: translateX(-50%);
  border: 2px solid #282828;
  border-radius: 2px;
  background:
    radial-gradient(circle at 50% 62%, #282828 0 12%, transparent 12%),
    linear-gradient(180deg, #f2d089, #cfa040);
}

.chest-lid {
  top: 0;
  height: 42%;
  border-radius: 999px 999px 2px 2px;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 8%, transparent 8% 92%, rgba(0, 0, 0, 0.16) 92%),
    linear-gradient(180deg, #e6bb75, #c89a58);
  transform-origin: bottom center;
  transition: transform 460ms cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* Eine Fuge, damit Deckel und Unterteil nicht wie ein Block wirken. */
.chest-lid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: rgba(0, 0, 0, 0.38);
}

.chest.tier-iron .chest-base {
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 9%, transparent 9% 91%, rgba(0, 0, 0, 0.18) 91%),
    linear-gradient(180deg, #b6c0c5, #8d989e);
}

.chest.tier-iron .chest-lid {
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 9%, transparent 9% 91%, rgba(0, 0, 0, 0.18) 91%),
    linear-gradient(180deg, #d3dade, #b6c0c5);
}

.chest.tier-gold .chest-base {
  background-image:
    linear-gradient(90deg, rgba(120, 70, 0, 0.22) 0 9%, transparent 9% 91%, rgba(120, 70, 0, 0.22) 91%),
    linear-gradient(180deg, #f0c24a, #cf9a1c);
}

.chest.tier-gold .chest-lid {
  background-image:
    linear-gradient(90deg, rgba(120, 70, 0, 0.22) 0 9%, transparent 9% 91%, rgba(120, 70, 0, 0.22) 91%),
    linear-gradient(180deg, #ffe8a2, #f0c24a);
}

.chest.tier-gold .chest-base::after {
  background:
    radial-gradient(circle at 50% 62%, #3a2a05 0 12%, transparent 12%),
    linear-gradient(180deg, #fff3c4, #e8bf5c);
}

/* 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: 38%;
  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.is-open .chest-lid { transform: rotateX(-118deg) translateY(-2px); }

.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/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; }

/* 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: 2px solid var(--ink);
  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 16px;
  width: max-content;
  max-width: min(84vw, 360px);
  pointer-events: none;
}

.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(-62px) scale(1.12); }
  100% { opacity: 1; transform: translateY(-54px) 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: 11.5px;
  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-lid,
  .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: 2px solid var(--ink);
  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: 2px solid #282828;
  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: 1.5px solid #282828;
}

.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: 2px solid var(--ink);
  border-radius: 50%;
  background: #ffd700;
  color: var(--ink);
}