/*
 * Lossboard Web-App: Layout und Bausteine im Design „Spielbrett“ (Plan 0.5c, brand/spielbrett/tokens.md).
 * Tokens und Grundkomponenten (Karte, Button, Platz-Marke, Chip, Spielerreihe, Formular, Spielfigur,
 * Banderole, Waage) kommen aus /assets/lossboard.css. Immer hell, weiße Karten mit Brettrand und
 * Unterkante, keine Verläufe, kein Glow. Eine Spalte wie in der App, auch am Desktop.
 */

html {
  scroll-padding-bottom: 130px;
}
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Kopf */
.wa-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--table) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.wa-topbar {
  max-width: 560px;
  margin: 0 auto;
  min-height: 56px;
  padding: 8px 20px;
  padding-top: calc(8px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: 12px;
}
.wa-logo {
  display: inline-flex;
}
.wa-logo img {
  display: block;
  height: 26px;
  width: auto;
}
.wa-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
.wa-nav-link,
.wa-lang {
  color: var(--muted);
  text-decoration: none;
  font: 700 13px/1 var(--font-text);
  padding: 8px 10px;
  border-radius: var(--r-full);
  border: 0;
  background: transparent;
  cursor: pointer;
}
.wa-nav-link[aria-current='page'],
.wa-nav-link:hover,
.wa-lang:hover {
  color: var(--text);
}
.wa-nav-link[aria-current='page'] {
  background: var(--board);
  box-shadow: 0 2px 0 var(--rim);
}

/* Inhalt: eine Spalte, Seitenrand 20 (mobil 16), Platz für die Tab-Leiste */
.wa-main {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 4px 20px 40px;
  display: grid;
  gap: 16px;
  align-content: start;
  outline: none;
  /* Wischen und seitliche Übergänge erzeugen kein waagerechtes Scrollen (clip statt hidden: sticky bleibt) */
  overflow-x: clip;
}
@media (max-width: 420px) {
  .wa-main,
  .wa-topbar {
    padding-inline: 16px;
  }
}
html.has-tabs .wa-main {
  padding-bottom: calc(132px + env(safe-area-inset-bottom));
}
.wa-main[aria-busy='true'] {
  cursor: progress;
}
.wa-main.is-waiting > * {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.wa-loading {
  padding: 40px 0;
  text-align: center;
}

.wa-footer {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 20px 40px;
  border-top: 2px solid var(--line);
  font: 600 13px/19px var(--font-text);
  color: var(--muted);
}
html.has-tabs .wa-footer {
  padding-bottom: calc(132px + env(safe-area-inset-bottom));
}
.wa-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 8px;
}
.wa-footer-links a {
  color: var(--muted);
  text-decoration: none;
}
.wa-footer-links a:hover {
  color: var(--text);
}
.wa-footer p {
  margin: 0;
}

/* Typografie in der App */
.wa-title {
  font: 600 28px/34px var(--font-head);
  letter-spacing: -0.2px;
  margin: 0;
  overflow-wrap: anywhere;
}
.wa-h2 {
  font: 600 20px/26px var(--font-head);
  margin: 0 0 10px;
}
.wa-h3 {
  font: 700 15px/22px var(--font-text);
  margin: 8px 0;
}
.wa-eyebrow {
  font: 800 13px/17px var(--font-text);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sky-dark);
  margin: 0 0 6px;
}
.wa-strong {
  font-weight: 700;
}
.wa-grow {
  flex: 1;
  min-width: 0;
}
.wa-pre {
  white-space: pre-wrap;
  margin: 0;
}
.wa-more {
  color: var(--sky-dark);
  font-weight: 700;
  text-decoration: none;
  justify-self: start;
}
.wa-section {
  display: grid;
  gap: 8px;
}
.wa-section > .wa-h2 {
  margin-bottom: 4px;
}
.wa-stack {
  display: grid;
  gap: 16px;
}
.wa-two {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 380px) {
  .wa-two {
    grid-template-columns: 1fr;
  }
}
.wa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.wa-actions-split {
  justify-content: space-between;
}
.wa-actions-split .btn-primary {
  margin-left: auto;
}
.wa-inline-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.wa-inline-form .field {
  flex: 1 1 200px;
}
.wa-slot:empty {
  display: none;
}
.card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}
.card > .card-title {
  margin: 0;
}
.wa-danger {
  color: var(--muted);
}
.wa-danger:hover {
  color: var(--text);
}

/* Meldungen: neutral, Fehler in Tomate dunkel auf hellem Rot, Erfolg in Wiese */
.wa-alert {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--r-l);
  border: 2px solid var(--rim);
  background: var(--board);
  font: 600 14px/20px var(--font-text);
}
.wa-alert-error {
  border-color: transparent;
  background: var(--tomato-soft);
  color: var(--tomato-dark);
}
.wa-alert-ok {
  border-color: transparent;
  background: var(--meadow-soft);
  color: var(--meadow-dark);
}
.wa-alert-info {
  color: var(--text);
}
.wa-alert a {
  color: var(--sky-dark);
}

/* Kopf einer Challenge: Titel, Runde, Zähler-Plakette */
.wa-chead {
  display: grid;
  gap: 10px;
  padding-top: 8px;
}
.wa-chead-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.wa-chead-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.wa-chead-over {
  margin-bottom: 2px;
}
.wa-chead-sub {
  margin: 0;
  color: var(--muted);
  font: 600 15px/20px var(--font-text);
}
.wa-chead-note {
  margin-top: 0;
}

/* Zähler-Plakette: Fläche Brettrand, Sanduhr Tomate, Überzeile und Wert. „Heute“ in Tomate. */
.sb-plaque {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  border-radius: 14px;
  background: var(--rim);
  box-shadow: 0 3px 0 var(--rim-dark);
  color: var(--text);
}
.sb-plaque svg {
  width: 22px;
  height: 22px;
  color: var(--tomato);
  flex: none;
}
.sb-plaque-over {
  display: block;
  font: 800 13px/17px var(--font-text);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.sb-plaque-value {
  display: block;
  font: 600 17px/22px var(--font-head);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sb-plaque.is-today {
  background: var(--tomato);
  box-shadow: 0 3px 0 var(--tomato-dark);
  color: var(--on-accent);
}
.sb-plaque.is-today svg,
.sb-plaque.is-today .sb-plaque-over {
  color: var(--on-accent);
}
@media (max-width: 360px) {
  .sb-plaque {
    padding: 6px 10px;
    gap: 6px;
  }
  .sb-plaque svg {
    width: 18px;
    height: 18px;
  }
}

/* Brett: 362 × 300, Rand 4 Brettrand, Radius 26, Strecke als S-Kurve, Figuren darüber */
.sb-board {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 362 / 300;
  width: 100%;
  border: 4px solid var(--rim);
  border-radius: var(--r-board);
  background: var(--board);
  box-shadow:
    0 6px 0 var(--rim),
    0 12px 22px rgb(43 33 24 / 0.06);
  overflow: hidden;
  isolation: isolate;
}
.sb-board > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sb-board-figs {
  position: absolute;
  inset: 0;
}
.sb-fig {
  position: absolute;
  width: calc(28 / 362 * 100cqw);
  height: calc(36 / 362 * 100cqw);
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.sb-fig .figur {
  width: 100%;
  height: 100%;
}
.sb-fig .figur-ini {
  font-size: calc(9 / 362 * 100cqw);
}
.sb-fig.is-me {
  width: calc(40 / 362 * 100cqw);
  height: calc(52 / 362 * 100cqw);
}
.sb-fig.is-me .figur-ini {
  font-size: calc(12 / 362 * 100cqw);
}
.sb-fig.is-small {
  width: calc(22 / 362 * 100cqw);
  height: calc(29 / 362 * 100cqw);
}
.sb-fig.is-small .figur-ini {
  font-size: calc(7.5 / 362 * 100cqw);
}
.sb-fig-inner {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
}
.sb-ring {
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: -5%;
  height: 22%;
  border: max(1.5px, calc(2 / 362 * 100cqw)) solid var(--sky);
  border-radius: 50%;
}
.sb-crown {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 78%;
  transform: translate(-50%, 8%);
  color: var(--gold);
}
.sb-crown svg {
  display: block;
  width: 100%;
  height: auto;
}
.sb-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 3px 10px 4px;
  border-radius: var(--r-full);
  background: var(--sky);
  color: var(--on-accent);
  font: 600 calc(12 / 362 * 100cqw) / 1.35 var(--font-text);
  font-size: clamp(13px, calc(14 / 362 * 100cqw), 15px);
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--sky-dark);
}
.sb-bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--sky);
  border-bottom: 0;
}
.sb-more {
  position: absolute;
  transform: translate(-50%, 0);
  min-width: 26px;
  padding: 2px 7px;
  border-radius: var(--r-full);
  border: 2px solid var(--rim);
  background: var(--board);
  color: var(--text);
  font: 700 13px/17px var(--font-text);
  cursor: pointer;
  z-index: 400;
}
.sb-goal-label {
  position: absolute;
  right: calc(18 / 362 * 100cqw);
  top: calc(14 / 362 * 100cqw);
  text-align: right;
}
.sb-goal-label .overline {
  font-size: clamp(13px, calc(13 / 362 * 100cqw), 14px);
}
.sb-goal-label b {
  display: block;
  font: 600 clamp(13px, calc(15 / 362 * 100cqw), 17px) / 1.3 var(--font-head);
  font-variant-numeric: tabular-nums;
}
.sb-board-text {
  font: 800 13px var(--font-text);
  letter-spacing: 0.09em;
}

/* Hinweis-Zeile über dem Brett (Wiegetag offen, nachtragen) */
.sb-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 14px;
  border-radius: var(--r-l);
  background: var(--sky-soft);
  border: 2px solid rgb(47 155 234 / 0.5);
  font: 700 14px/20px var(--font-text);
}
.sb-hint.is-done {
  background: var(--board);
  border-color: var(--rim);
  padding-block: 6px;
}
.sb-hint .card-sub {
  flex: 1 1 180px;
  color: var(--text);
}

/* Eigene Karte (Entwurf und Ende): weiße Karte mit Figur */
.own-card {
  background: var(--board);
  border: 2px solid var(--rim);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rim);
}
.own-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
}
.own-mid {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-width: 0;
}
.own-place {
  font: 600 22px/28px var(--font-head);
  margin: 0;
}
.own-value {
  text-align: right;
  display: grid;
  gap: 2px;
}
.own-value b,
.wa-own-value {
  font: 600 32px/38px var(--font-head);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sky-dark);
}
.own-value span {
  font: 600 13px/18px var(--font-text);
  color: var(--muted);
}
.own-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 0 18px 16px;
}
.own-action .card-sub {
  flex: 1 1 180px;
}

/* Kompakte Infozeilen (Team, Format, Anstupser) */
.wa-infos {
  display: grid;
  background: var(--board);
  border: 2px solid var(--rim);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rim);
  padding: 2px 16px;
}
.wa-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 2px solid var(--line);
  font: 700 14px/20px var(--font-text);
  color: var(--text);
  text-decoration: none;
}
.wa-info:last-child {
  border-bottom: 0;
}
.wa-info b {
  font: 600 16px/20px var(--font-head);
}
.wa-info .wa-progressbar {
  flex: 1 0 100%;
}
.wa-chev {
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}
.wa-dot,
.wa-team-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: none;
}
.wa-progressbar {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--track);
  overflow: hidden;
}
.wa-progressbar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sky);
  transition: width 0.6s var(--ease-spring);
}
.wa-progressbar.is-lavender i,
.wa-progressbar.is-gold i {
  background: var(--gold);
}

/* Leaderboard: weiße Karte, Spielerreihen */
.wa-board {
  background: var(--board);
  border: 2px solid var(--rim);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rim);
  padding: 10px 0;
  overflow: hidden;
}
.lb-section {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 2px 16px 6px;
}
.lb-section h2 {
  font: 600 17px/22px var(--font-head);
  margin: 0;
}
.lb-section span {
  font: 600 13px/18px var(--font-text);
  color: var(--muted);
}
.lb-foot {
  margin: 6px 16px 2px;
  font: 600 13px/18px var(--font-text);
  color: var(--muted);
}
.wa-board > .wa-slot {
  margin: 8px 16px 0;
}
.rank-row .figur-mini {
  margin-left: -4px;
}
.rank-row.is-paused .rank-name {
  color: var(--muted);
}
.badge-open {
  border-style: dashed;
}
.rank-open {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.wa-marks {
  display: block;
  font: 600 13px/18px var(--font-text);
  color: var(--lilac-dark);
}
.wa-nudge,
.wa-nudged {
  cursor: pointer;
}
.wa-nudged {
  color: var(--muted);
  cursor: default;
}
.team-row {
  display: grid;
  gap: 0;
}
.team-row .rank-row {
  padding-bottom: 2px;
}
.team-row.is-mine .rank-row {
  background: var(--tomato-soft);
}
.team-row.is-mine.is-b .rank-row {
  background: var(--lilac-soft);
}
.team-members {
  margin: 0;
  padding: 0 16px 10px 82px;
  font: 600 13px/18px var(--font-text);
  color: var(--muted);
}
.wa-agreement {
  background: var(--board);
  border: 2px solid var(--rim);
  border-radius: var(--r-l);
  padding: 12px 16px;
}
.wa-agreement summary {
  cursor: pointer;
  font: 700 14px/20px var(--font-text);
  color: var(--muted);
}
.wa-agreement p {
  margin-top: 8px;
  color: var(--text);
}
.wa-draft .wa-actions {
  margin-top: 4px;
}

/* Tab-Leiste: Rang · Log · + Wiegen (Waage) · Erfolge · Ich */
.wa-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr 1fr 96px 1fr 1fr;
  align-items: end;
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: var(--board);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: 0 -3px 14px rgb(43 33 24 / 0.07);
}
@media (min-width: 600px) {
  .wa-tabs {
    bottom: 16px;
    border-radius: var(--r-sheet);
    left: 16px;
    right: 16px;
    padding-bottom: 10px;
    box-shadow:
      0 4px 0 var(--rim),
      0 -3px 14px rgb(43 33 24 / 0.07);
  }
}
.wa-tab {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--muted);
  text-decoration: none;
  font: 700 13px/17px var(--font-text);
  padding: 6px 0 4px;
  -webkit-tap-highlight-color: transparent;
}
.wa-tab svg {
  width: 26px;
  height: 26px;
  display: block;
}
.wa-tab-mark {
  display: none;
}
.wa-tab[aria-current='page'] {
  color: var(--sky-dark);
}
.wa-tab[aria-current='page'] svg {
  color: var(--sky);
}
.wa-tab:hover {
  color: var(--text);
}
.wa-tab-center {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-top: -34px;
  color: var(--tomato-dark);
  font: 700 13px/16px var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.wa-tab-center .waage {
  width: 60px;
  height: 60px;
  transition: transform 0.5s var(--ease-spring);
  filter: drop-shadow(0 6px 8px rgb(43 33 24 / 0.16));
}
.wa-tab-center:active .waage,
.wa-tab-center.is-pressed .waage {
  transform: scale(0.97) translateY(3px);
  transition-duration: 0s;
}
.wa-tab-center.is-result .waage {
  color: var(--gold);
}
.wa-tab-center.is-result {
  color: var(--gold-dark);
}
.waage .waage-needle {
  transform-origin: 32px 25.5px;
  transform-box: view-box;
}
.waage.is-weighing {
  animation: sb-weigh-body 0.5s var(--ease-spring);
}
.waage.is-weighing .waage-needle {
  animation: sb-weigh-needle 0.7s ease-out;
}
@keyframes sb-weigh-body {
  from {
    transform: scale(1.04, 0.92) translateY(3px);
  }
  to {
    transform: none;
  }
}
@keyframes sb-weigh-needle {
  0% {
    transform: rotate(-70deg);
  }
  45% {
    transform: rotate(18deg);
  }
  70% {
    transform: rotate(-8deg);
  }
  100% {
    transform: none;
  }
}
@media (hover: hover) {
  .wa-tab-center:hover .waage .waage-needle {
    transform: rotate(-24deg);
    transition: transform 0.35s var(--ease-spring);
  }
}

/* Bottom-Sheet (Wiegen, Sprüche) */
html.has-sheet,
html.has-sheet body {
  overflow: hidden;
}
.wa-sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.wa-scrim {
  position: absolute;
  inset: 0;
  background: rgb(43 33 24 / 0.45);
  opacity: 0;
}
.wa-sheet {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  max-height: calc(100dvh - 40px - env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  background: var(--board);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: var(--shadow-sheet);
  padding-bottom: env(safe-area-inset-bottom);
  will-change: transform;
  outline: none;
}
.wa-sheet-head {
  flex: none;
  padding: 10px 24px 0;
  touch-action: none;
  cursor: grab;
}
.wa-sheet-layer.is-dragging .wa-sheet-head {
  cursor: grabbing;
}
.wa-sheet-grabber {
  width: 40px;
  height: 5px;
  border-radius: 3px;
  margin: 0 auto 16px;
  background: var(--rim);
}
.wa-sheet-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
}
.wa-sheet-title {
  margin: 0;
  font: 600 20px/26px var(--font-head);
  text-align: left;
}
.wa-sheet-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: var(--table);
  color: var(--muted);
  cursor: pointer;
}
.wa-sheet-close svg {
  width: 18px;
  height: 18px;
}
.wa-sheet-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 24px 24px;
  display: grid;
  gap: 16px;
  align-content: start;
}
.wa-sheet-layer:not(.is-scrollable) .wa-sheet-body {
  touch-action: none;
}
.wa-sheet-layer:not(.is-scrollable) .wa-sheet-body :is(input, select, textarea, button, label, summary) {
  touch-action: manipulation;
}
.wa-sheet-layer.is-reduced .wa-sheet,
.wa-sheet-layer.is-reduced .wa-scrim {
  transition: opacity 0.2s ease;
}

/* Wiegen: Stepper, privat, Prognose */
.wa-weigh {
  display: grid;
  gap: 16px;
}
.wa-weigh-date {
  margin: -6px 0 0;
  color: var(--muted);
  font: 600 14px/20px var(--font-text);
}
.wa-stepper {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  gap: 10px;
  align-items: start;
}
.wa-stepbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 56px;
  height: 56px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--rim);
  background: var(--board);
  color: var(--text);
  box-shadow: 0 4px 0 var(--rim);
  cursor: pointer;
  transition:
    transform 0.5s var(--ease-spring),
    box-shadow 0.1s ease;
}
.wa-stepbtn svg {
  width: 24px;
  height: 24px;
}
.wa-stepbtn:active {
  transform: scale(0.94) translateY(2px);
  box-shadow: 0 2px 0 var(--rim);
  transition-duration: 0s;
}
.wa-weight {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}
.wa-weight-inputs {
  display: flex;
  gap: 8px;
}
.wa-unit-input {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}
.wa-unit-input .input {
  padding-right: 44px;
}
.wa-unit {
  position: absolute;
  right: 14px;
  color: var(--muted);
  font: 600 14px/1 var(--font-head);
  pointer-events: none;
}
.wa-weight-big .wa-unit-input .input {
  min-height: 60px;
  background: transparent;
  border-color: transparent;
  text-align: center;
  font: 600 48px/56px var(--font-head);
  letter-spacing: -0.5px;
  padding: 0 34px 0 0;
}
.wa-weight-big .wa-unit-input .input:focus {
  border-color: transparent;
  box-shadow: inset 0 -3px 0 var(--sky-soft);
  border-radius: 0;
}
.wa-weight-big .wa-unit {
  font: 600 20px/1 var(--font-head);
  right: 0;
  top: 30px;
}
.wa-weight-big .wa-segment {
  justify-self: center;
}
.wa-private {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 0;
  padding: 6px 16px;
  border-radius: var(--r-full);
  background: var(--table);
  font: 600 14px/20px var(--font-text);
  color: var(--muted);
}
.wa-private svg {
  width: 16px;
  height: 16px;
}
.wa-forecast {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 2px solid rgb(47 155 234 / 0.5);
  background: var(--sky-soft);
  border-radius: var(--r-xl);
}
.wa-forecast .card-sub {
  color: var(--sky-dark);
}
.wa-forecast-value {
  margin: 2px 0 0;
  font: 600 20px/26px var(--font-head);
}
.wa-forecast-value b {
  font-weight: 600;
}
.wa-forecast-sub {
  margin: 2px 0 0;
  font: 600 13px/18px var(--font-text);
  color: var(--muted);
}
.wa-weigh-rule {
  margin: 0;
  text-align: center;
  font: 600 13px/18px var(--font-text);
  color: var(--muted);
}
.wa-otherday summary {
  cursor: pointer;
  color: var(--sky-dark);
  font: 700 13px/18px var(--font-text);
  text-align: center;
  list-style: none;
}
.wa-otherday summary::-webkit-details-marker {
  display: none;
}
.wa-otherday[open] summary {
  margin-bottom: 10px;
}
.wa-weigh-done {
  display: grid;
  gap: 4px;
  text-align: center;
}
.wa-weigh-score {
  margin: 0;
  display: grid;
  gap: 2px;
}
.wa-weigh-score span {
  font: 600 13px/18px var(--font-text);
  color: var(--muted);
}
.wa-weigh-result:empty {
  display: none;
}
.wa-weigh-page {
  border: 2px solid var(--rim);
  background: var(--board);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rim);
  padding: 20px;
}
.wa-codeword {
  text-align: center;
  padding: 12px;
  border: 2px dashed var(--rim);
  border-radius: var(--r-l);
}
.wa-codeword-value {
  margin: 4px 0;
  font: 600 24px/30px var(--font-head);
  letter-spacing: 0.08em;
  color: var(--sky-dark);
}

/* Umschalter kg, lb, st */
.wa-segment {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-full);
  background: var(--table);
  border: 2px solid var(--rim);
  justify-self: start;
}
.wa-segment-item {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 700 13px/1 var(--font-text);
  padding: 7px 12px;
  border-radius: var(--r-full);
  cursor: pointer;
}
.wa-segment-item[aria-checked='true'] {
  background: var(--sky);
  color: var(--on-accent);
}

/* Optionen (Radio) */
.wa-options {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.wa-options legend {
  margin-bottom: 8px;
}
.wa-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 2px solid var(--rim);
  border-radius: var(--r-l);
  background: var(--board);
  cursor: pointer;
}
.wa-option:has(input:checked) {
  border-color: var(--sky);
  background: var(--sky-soft);
}
.wa-option input {
  margin: 3px 0 0;
  accent-color: var(--sky);
  flex: none;
}
.wa-option strong {
  display: block;
  font-weight: 700;
}
.check-hint {
  display: block;
  color: var(--muted);
  font-size: 13px;
}
.wa-textarea {
  min-height: 110px;
  resize: vertical;
}
.wa-templates {
  display: grid;
  gap: 8px;
}
.wa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wa-chips .chip,
.wa-filters .chip {
  cursor: pointer;
}

/* Schalter (Namen/Werte, Mitteilungen) */
.wa-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font: 600 14px/20px var(--font-text);
  min-height: 36px;
}
.wa-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.wa-switch-track {
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  border-radius: 14px;
  background: var(--rim);
  transition: background-color 0.2s ease;
}
.wa-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--board);
  box-shadow: 0 2px 0 rgb(43 33 24 / 0.12);
  transition: transform 0.35s var(--ease-spring);
}
.wa-switch input:checked + .wa-switch-track {
  background: var(--meadow);
}
.wa-switch input:checked + .wa-switch-track::after {
  transform: translateX(18px);
}
.wa-switch input:focus-visible + .wa-switch-track {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}
.wa-switches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.wa-switches li {
  border-bottom: 2px solid var(--line);
  padding: 4px 0;
}

/* Match-Log: Ereigniskarten mit Kopf in Artfarbe */
.wa-log-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}
.wa-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wa-log {
  display: grid;
  gap: 18px;
}
/* Tag im Log: klebende Überschrift (Heute, Gestern, Mo 20.10.), darunter kompakte Karten */
.wa-log-day {
  display: grid;
  gap: 8px;
}
.wa-log-dayhead {
  position: sticky;
  top: calc(56px + env(safe-area-inset-top));
  z-index: 5;
  margin: 0;
  padding: 6px 0;
  font: 600 17px/22px var(--font-head);
  background: color-mix(in srgb, var(--table) 94%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wa-log-item,
.wa-log-group {
  --kind: var(--sky);
  background: var(--board);
  border: 2px solid var(--rim);
  border-radius: var(--r-l);
  box-shadow: 0 2px 0 var(--rim);
}
.wa-log-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
}
.wa-log-item:is([data-kind='week_winner'], [data-kind='team_week_winner']) {
  --kind: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 55%, var(--rim));
}
.wa-log-item[data-kind='shout'] {
  --kind: var(--pink);
}
.wa-log-icon {
  display: grid;
  place-items: center;
  width: 32px;
  min-height: 38px;
  border-radius: 10px;
}
.wa-log-icon .figur {
  width: 26px;
  height: 34px;
}
a.wa-log-icon:hover .figur {
  transform: translateY(-2px);
}
.wa-log-icon .figur {
  transition: transform 0.3s var(--ease-spring);
}
.wa-log-symbol {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--kind) 16%, var(--board));
  color: color-mix(in srgb, var(--kind) 75%, var(--text));
}
.wa-log-symbol svg {
  width: 20px;
  height: 20px;
}
.wa-log-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.wa-log-text {
  margin: 0;
  font: 600 15px/21px var(--font-text);
}
.wa-log-text b,
.wa-name-link {
  font-weight: 800;
}
.wa-name-link {
  color: inherit;
  text-decoration: none;
}
.wa-name-link:hover {
  text-decoration: underline;
}
.wa-log-text .is-me {
  color: var(--sky-dark);
}
.wa-log-text b.is-up {
  color: var(--meadow-dark);
}
.wa-log-text b.is-badge {
  color: var(--meadow-dark);
}
.wa-log-text b.is-gold {
  color: var(--gold-dark);
}
.wa-log-time {
  margin-left: 8px;
  color: var(--muted);
  font: 600 13px/21px var(--font-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wa-log-sub {
  margin: 0;
  font: 600 14px/20px var(--font-text);
  color: var(--muted);
}
.wa-log-quote {
  margin: 0;
  font: 600 18px/24px var(--font-head);
  color: var(--text);
}
.wa-log-sticker {
  margin: 0;
  font: 700 15px/22px var(--font-text);
}
.wa-log-sticker span {
  font-size: 26px;
  vertical-align: middle;
}
.wa-log-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.wa-log-foot:empty {
  display: none;
}
/* Zusammengefasst: „Deniz, Ben und 2 weitere haben gewogen“, aufklappbar */
.wa-log-group-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-l);
}
/* Figuren überlappend gestapelt wie Avatare, damit der Text nicht weit eingerückt ist */
.wa-log-stack {
  display: flex;
  padding-right: 2px;
}
.wa-log-stack .figur {
  width: 18px;
  height: 23px;
}
.wa-log-stack .figur + .figur {
  margin-left: -9px;
}
.wa-log-more {
  color: var(--sky-dark);
  font: 700 14px/20px var(--font-text);
}
.wa-log-group-items {
  display: grid;
  gap: 6px;
  padding: 0 8px 8px;
}
.wa-log-group-items[hidden] {
  display: none;
}
.wa-log-group-items .wa-log-item {
  box-shadow: none;
  border-width: 1.5px;
}
/* Leerer Zustand: kleine Figur auf einem Feld, Text, nächster Schritt */
.wa-empty-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 22px 16px;
  text-align: center;
}
.wa-empty-art {
  position: relative;
  display: grid;
  place-items: end center;
  width: 64px;
  height: 60px;
}
.wa-empty-field {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 18px;
  border-radius: 50%;
  background: var(--sky-soft);
  border: 3px solid var(--sky);
}
.wa-empty-art .figur {
  position: relative;
  width: 32px;
  height: 42px;
  margin-bottom: 6px;
  animation: sb-idle 2.8s ease-in-out infinite;
}
@keyframes sb-idle {
  0%,
  70%,
  100% {
    transform: none;
  }
  80% {
    transform: translateY(-8px);
  }
  90% {
    transform: scale(1.04, 0.95);
  }
}
.wa-empty-text {
  margin: 0;
  max-width: 34ch;
  color: var(--muted);
  font: 600 15px/21px var(--font-text);
}
.wa-reply {
  min-height: 36px;
  padding: 4px 14px;
  font-size: 14px;
}
/* Im Log kompakter: Spielstein 32, Anzahl daneben */
.wa-log-foot .wa-reactions {
  gap: 6px;
  align-items: center;
}
.wa-log-foot .wa-stone {
  grid-auto-flow: column;
  align-items: center;
  gap: 4px;
  min-height: 36px;
}
.wa-log-foot .wa-stone-face {
  width: 32px;
  height: 32px;
  font-size: 16px;
  box-shadow: 0 2px 0 var(--rim);
}
.wa-mvp {
  position: relative;
  margin-top: 22px;
  padding: 34px 18px 16px;
  background: var(--board);
  border: 2px solid var(--rim);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rim);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
}
.wa-mvp .banderole {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
}
.wa-mvp-name {
  margin: 0;
  font: 600 22px/28px var(--font-head);
}
.wa-mvp-value {
  margin: 0;
  font: 600 17px/22px var(--font-head);
}

/* Reaktions-Spielsteine: Ø 40, Anzahl darunter, eigene Himmel hell mit Rand Himmel */
.wa-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  position: relative;
}
.wa-stone {
  display: grid;
  justify-items: center;
  gap: 2px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font: 500 13px/16px var(--font-head);
  -webkit-tap-highlight-color: transparent;
}
.wa-stone-face {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--rim);
  background: var(--board);
  box-shadow: 0 3px 0 var(--rim);
  font-size: 19px;
  line-height: 1;
  transition: transform 0.4s var(--ease-spring);
}
.wa-stone:active .wa-stone-face {
  transform: scale(0.92) translateY(2px);
  transition-duration: 0s;
}
.wa-stone.is-mine {
  color: var(--sky-dark);
}
.wa-stone.is-mine .wa-stone-face {
  background: var(--sky-soft);
  border-color: var(--sky);
  box-shadow: 0 3px 0 rgb(47 155 234 / 0.35);
}
.wa-react-add .wa-stone-face {
  border-style: dashed;
  color: var(--muted);
  font: 600 20px/1 var(--font-head);
  box-shadow: none;
}
.wa-react-picker {
  flex-basis: 100%;
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 2px solid var(--rim);
  border-radius: var(--r-full);
  background: var(--board);
  width: max-content;
  max-width: 100%;
}
.wa-react-picker[hidden] {
  display: none;
}
.wa-react-pick {
  border: 0;
  background: transparent;
  font-size: 22px;
  width: 40px;
  height: 36px;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: transform 0.4s var(--ease-spring);
}
.wa-react-pick:hover {
  background: var(--table);
}
.wa-react-pick:active {
  transform: scale(0.9);
  transition-duration: 0s;
}
.wa-empty {
  padding: 24px 0;
  text-align: center;
}

/* Sprüche und Sticker im Sheet */
.wa-shout-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wa-shout {
  cursor: pointer;
  white-space: normal;
  text-align: left;
  min-height: 34px;
  font-size: 13px;
}
.wa-sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
}
.wa-sticker {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 2px solid var(--rim);
  border-radius: var(--r-l);
  background: var(--board);
  color: var(--muted);
  font: 700 13px/17px var(--font-text);
  box-shadow: 0 3px 0 var(--rim);
  cursor: pointer;
}
.wa-sticker:hover {
  border-color: var(--pink);
  color: var(--text);
}
.wa-sticker-emoji {
  font-size: 28px;
  line-height: 1;
}

/* Erfolge: Spielmarken Ø 72 */
.wa-badges-card {
  gap: 16px;
}
.wa-badges-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.wa-badges-head h2 {
  margin: 0;
  font: 600 20px/26px var(--font-head);
}
.wa-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 8px;
}
.wa-badge {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
}
.sb-token {
  position: relative;
  width: 72px;
  height: 72px;
  color: var(--gold);
  flex: none;
}
.sb-token > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sb-token-face {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--board);
  box-shadow: inset 0 0 0 2.5px currentColor;
  display: grid;
  place-items: center;
}
.sb-token-face svg {
  width: 28px;
  height: 28px;
}
.sb-token-text {
  font: 600 22px/1 var(--font-head);
}
.sb-token.is-locked {
  color: var(--rim);
}
.sb-token.is-locked .sb-token-face {
  background: var(--table-hi);
  color: var(--muted);
  box-shadow: inset 0 0 0 2.5px var(--rim-dark);
}
.sb-token.is-flip {
  animation: sb-flip 0.7s var(--ease-spring);
}
@keyframes sb-flip {
  from {
    transform: perspective(400px) rotateY(180deg);
  }
  to {
    transform: none;
  }
}
.wa-badge-name {
  font: 600 14px/18px var(--font-text);
}
.wa-badge.is-locked .wa-badge-name {
  color: var(--muted);
}
.wa-badge-sub {
  font: 600 13px/18px var(--font-text);
  color: var(--muted);
}
.wa-badge-sub.is-progress {
  color: var(--sky-dark);
}
.wa-record-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.wa-record-tile {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 14px 6px;
  text-align: center;
  background: var(--board);
  border: 2px solid var(--rim);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rim);
  min-width: 0;
}
.wa-record-tile b {
  font: 600 26px/32px var(--font-head);
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wa-record-tile b.is-none {
  color: var(--muted);
}
.wa-record-tile span {
  font: 600 13px/18px var(--font-text);
  color: var(--muted);
}
@media (max-width: 380px) {
  .wa-record-tile b {
    font-size: 21px;
  }
}
.wa-joker {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
}
.wa-joker-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--gold-soft);
  color: var(--gold);
}
.wa-joker-icon svg {
  width: 26px;
  height: 26px;
}
.wa-records,
.wa-mvps,
.wa-results,
.wa-daylist,
.wa-menu,
.wa-team-members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.wa-records li,
.wa-mvps li,
.wa-results li,
.wa-daylist li {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 2px solid var(--line);
  font: 600 15px/20px var(--font-text);
}
.wa-records li:last-child,
.wa-mvps li:last-child,
.wa-results li:last-child,
.wa-daylist li:last-child {
  border-bottom: 0;
}
.wa-records li span {
  color: var(--muted);
}
.wa-records b,
.wa-daylist b,
.wa-mvps b {
  font: 600 16px/20px var(--font-head);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wa-records b.is-cyan,
.wa-mvps .wa-grow b.is-me {
  color: var(--sky-dark);
}
.wa-records b.is-lavender {
  color: var(--gold-dark);
}

/* Ich: Profil und Menü */
.wa-profile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px;
}
.wa-profile-name {
  margin: 0;
  font: 600 22px/28px var(--font-head);
  overflow-wrap: anywhere;
}
.wa-profile-sub {
  margin: 0 0 6px;
  font: 600 15px/20px var(--font-text);
  color: var(--muted);
}
.wa-menu {
  background: var(--board);
  border: 2px solid var(--rim);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rim);
  padding: 6px 16px;
}
.wa-menu-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  color: var(--text);
  text-decoration: none;
  font: 700 16px/22px var(--font-text);
}
.wa-menu li + li .wa-menu-row {
  border-top: 2px solid var(--line);
}
.wa-menu-row .muted {
  font: 600 14px/20px var(--font-text);
}
.wa-menu-row:hover .wa-grow {
  color: var(--sky-dark);
}
.wa-menu-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sky-soft);
  color: var(--sky);
}
.wa-menu-icon svg {
  width: 20px;
  height: 20px;
}
.wa-menu-icon.is-tomato {
  background: var(--tomato-soft);
  color: var(--tomato);
}
.wa-menu-icon.is-meadow {
  background: var(--meadow-soft);
  color: var(--meadow-dark);
}
.wa-menu-icon.is-gold {
  background: var(--gold-soft);
  color: var(--gold-dark);
}
.wa-menu-icon.is-lilac {
  background: var(--lilac-soft);
  color: var(--lilac);
}
.wa-menu-icon.is-neutral {
  background: var(--table);
  color: var(--muted);
}

/* Persönliches Ziel: Spur 12 hoch mit Meilensteinen Ø 20 */
.wa-goal {
  display: grid;
  gap: 12px;
}
.wa-goal-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.wa-goal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 600 20px/26px var(--font-head);
}
.wa-goal-title svg {
  width: 24px;
  height: 24px;
  color: var(--sky);
}
.wa-goal-pct {
  font: 600 20px/26px var(--font-head);
  color: var(--sky-dark);
}
.wa-goal-track {
  position: relative;
  height: 20px;
  margin: 4px 10px;
}
.wa-goal-track::before,
.wa-goal-fill {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  height: 12px;
  border-radius: 6px;
}
.wa-goal-track::before {
  right: 0;
  background: var(--track);
}
.wa-goal-fill {
  background: var(--sky);
  transition: width 0.8s var(--ease-spring);
}
.wa-goal-stone {
  position: absolute;
  top: 0;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  background: var(--board);
  border: 3px solid var(--rim);
}
.wa-goal-stone.is-reached {
  background: var(--sky);
  border-color: var(--sky-dark);
}
.wa-milestones {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wa-goal-form {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

/* 1v1 */
.wa-duel .duel-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 12px;
  align-items: center;
}
.duel-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duel-value {
  font: 600 16px/20px var(--font-head);
  font-variant-numeric: tabular-nums;
}
.duel-bar {
  height: 12px;
  border-radius: 6px;
  background: var(--track);
  overflow: hidden;
}
.duel-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--silver);
}
.duel-row.is-self .duel-bar i {
  background: var(--sky);
}
.duel-row.is-self .duel-name,
.duel-row.is-self .duel-value {
  color: var(--sky-dark);
}
.duel-tip {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--r-l);
  background: var(--meadow-soft);
  color: var(--meadow-dark);
  font: 700 13px/18px var(--font-text);
}
.wa-record {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 4px 0;
  color: var(--muted);
  font-size: 14px;
}

/* Teams */
.wa-teams {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.wa-team {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 2px solid var(--rim);
  border-radius: var(--r-card);
  background: var(--board);
  box-shadow: var(--shadow-rim);
}
.wa-team.is-mine {
  border-color: var(--sky);
}
.wa-team-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wa-team .field-hint {
  margin: 0;
}
.wa-team-members li {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  font: 600 14px/20px var(--font-text);
  border-top: 2px solid var(--line);
}
.wa-team-members li.is-me {
  color: var(--sky-dark);
}
.wa-team .btn {
  justify-self: start;
}
.wa-team-pick .wa-team-dot {
  vertical-align: 0;
}

/* Wochenbericht */
.wa-report {
  display: grid;
  gap: 14px;
}
.wa-report-img {
  width: 100%;
  height: auto;
  border-radius: var(--r-l);
  border: 2px solid var(--rim);
  display: block;
}
.wa-report-text {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-l);
  background: var(--table-hi);
  border: 2px solid var(--rim);
  font: 400 14px/1.6 var(--font-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Rückblick: Story-Karten nebeneinander */
.wa-stories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
}
@media (min-width: 600px) {
  .wa-stories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.wa-story {
  display: grid;
  gap: 8px;
  align-content: start;
}
.wa-story .wa-actions .btn {
  flex: 1 1 auto;
  padding-inline: 10px;
}
.wa-story-img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-l);
  border: 2px solid var(--rim);
  background: var(--board);
  box-shadow: 0 4px 0 var(--rim);
  display: block;
}
.wa-story-text {
  aspect-ratio: 9 / 16;
  border-radius: var(--r-l);
  border: 2px solid var(--rim);
  background: var(--board);
  padding: 20px;
  display: grid;
  align-content: center;
  gap: 8px;
}
.wa-story-hero {
  font: 600 40px/1.1 var(--font-head);
  margin: 0;
}

/* Organisator */
.wa-org-table td.is-ok {
  color: var(--meadow-dark);
  font-weight: 800;
}
.wa-org-mark {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
}
.wa-org-mark svg,
.wa-org-legend svg {
  width: 16px;
  height: 16px;
}
.wa-org-photo {
  color: var(--sky-dark);
}
.wa-org-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: center;
}
.wa-org-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wa-org-legend .is-ok {
  color: var(--meadow-dark);
}
.wa-chip-check {
  width: 13px;
  height: 13px;
  margin-right: 3px;
  vertical-align: -2px;
}
.wa-org-table th,
.wa-org-table td {
  text-align: center;
  white-space: nowrap;
}
.wa-org-table td:nth-child(2),
.wa-org-table th:nth-child(2) {
  text-align: left;
}

/* Erinnerungen */
.wa-reminders > .wa-stack > div {
  display: grid;
  gap: 8px;
}

/* Tabellen */
.wa-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wa-table {
  border-collapse: collapse;
  width: 100%;
  font: 600 14px/20px var(--font-text);
  font-variant-numeric: tabular-nums;
}
.wa-table th {
  text-align: left;
  font: 800 13px/17px var(--font-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 6px;
  border-bottom: 2px solid var(--line);
}
.wa-table td {
  padding: 10px 6px;
  border-bottom: 2px solid var(--line);
}

/* Diagramme */
.wa-chart-box {
  display: grid;
  gap: 8px;
}
.wa-chart-title {
  font: 700 13px/18px var(--font-text);
  color: var(--muted);
  margin: 8px 0 0;
}
.wa-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.wa-chart-grid line {
  stroke: var(--line);
  stroke-width: 1.5;
}
.wa-chart-grid line.is-zero {
  stroke: var(--rim);
}
.wa-chart-grid text,
.wa-bar-label {
  fill: var(--muted);
  font: 600 13px var(--font-text);
}
.wa-chart-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wa-chart-line.is-main {
  stroke: var(--sky);
}
.wa-chart-line.is-raw {
  stroke: var(--silver);
  stroke-width: 2;
}
.wa-chart-line.is-dots-only {
  stroke: none;
}
.wa-chart-area.is-main {
  fill: var(--sky-soft);
}
.wa-chart-dots circle {
  fill: var(--board);
  stroke-width: 2.5;
}
.wa-chart-dots.is-main circle {
  stroke: var(--sky);
}
.wa-chart-dots.is-raw circle {
  stroke: var(--silver);
}
.wa-bar-track {
  fill: var(--track);
}
.wa-bar {
  fill: var(--meadow);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.wa-bar.is-open {
  fill: var(--meadow-soft);
}
.wa-bar-value {
  fill: var(--text);
  font: 600 13px var(--font-head);
}
.wa-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font: 600 13px/18px var(--font-text);
  color: var(--muted);
}
.wa-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wa-swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--silver);
}
.wa-swatch.is-main {
  background: var(--sky);
}
.wa-together {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
.wa-together-label {
  color: var(--muted);
}
.wa-big-value {
  font: 600 32px/38px var(--font-head);
  color: var(--text);
}
.wa-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.wa-tile {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 2px;
  padding: 14px 6px;
  border: 2px solid var(--rim);
  border-radius: var(--r-card);
  background: var(--board);
  box-shadow: var(--shadow-rim);
  min-width: 0;
}
.wa-tile-label {
  order: 2;
  font: 600 13px/18px var(--font-text);
  color: var(--muted);
}
.wa-tile-value {
  font: 600 22px/28px var(--font-head);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Start und Liste der Challenges */
.wa-hero {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding-top: 16px;
}
.wa-hero h1 {
  font: 600 34px/40px var(--font-head);
  letter-spacing: -0.5px;
  margin: 0;
}
.wa-hero p {
  margin: 0;
}
.wa-hero-figs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.wa-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.wa-challenge {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 14px;
  padding: 14px 16px;
  background: var(--board);
  border: 2px solid var(--rim);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-rim);
  color: var(--text);
  text-decoration: none;
}
.wa-challenge > .figur {
  grid-row: span 2;
}
.wa-challenge > .wa-chev {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.wa-challenge-name {
  font: 600 17px/22px var(--font-head);
  grid-column: 2;
}
.wa-challenge-sub {
  color: var(--muted);
  font: 600 13px/18px var(--font-text);
  grid-column: 2;
}
.wa-challenge:hover .wa-challenge-name {
  color: var(--sky-dark);
}
.wa-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 2px solid var(--line);
}
.wa-row.is-self {
  color: var(--sky-dark);
}
.wa-code {
  font: 600 17px/1 var(--font-head);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wa-code-text {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.wa-link-box {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--r-l);
  background: var(--table-hi);
  border: 2px dashed var(--rim);
  font: 600 14px/20px var(--font-text);
  overflow-wrap: anywhere;
}
.wa-recovery {
  margin: 0;
  font: 600 22px/1.3 var(--font-head);
  letter-spacing: 0.06em;
  color: var(--sky-dark);
}
.wa-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.wa-helplines {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  font-size: 14px;
}
.wa-facts {
  margin: 0;
  display: grid;
  gap: 0;
}
.wa-facts div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 2px solid var(--line);
  font: 600 14px/20px var(--font-text);
}
.wa-facts dt {
  color: var(--muted);
}
.wa-facts dd {
  margin: 0;
  text-align: right;
}
.wa-preview {
  gap: 8px;
}
.wa-price-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 14px;
}
.wa-accept {
  margin: 0;
}

/* Anlegen: Schritte als Brett-Felder */
.wa-steps-head {
  display: grid;
  gap: 4px;
  padding-top: 8px;
}
.wa-progress {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  gap: 6px;
}
.wa-progress li {
  flex: 1;
  height: 12px;
  border-radius: 6px;
  background: var(--track);
}
.wa-progress li.is-done {
  background: var(--sky);
}

/* Gruppe */
.wa-members {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.wa-member {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 2px solid var(--line);
  flex-wrap: wrap;
}
.wa-member.is-gone {
  color: var(--muted);
}
.wa-member-name {
  display: block;
  font-weight: 700;
}
.wa-member-sub {
  display: block;
  color: var(--muted);
  font: 600 13px/18px var(--font-text);
}
.wa-name-hidden {
  border-color: var(--lilac);
}

/* Ergebnis: Podest aus Kacheln (104 breit, Höhen 184/144/116, Radius 16, Unterkante 8) */
.wa-result {
  display: grid;
  gap: 18px;
}
.wa-result-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.wa-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  min-height: 300px;
  padding-top: 16px;
}
.wa-step {
  display: grid;
  gap: 0;
  align-content: end;
  justify-items: center;
  min-width: 0;
}
.wa-step-figs {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2px;
  margin-bottom: -6px;
  position: relative;
  z-index: 1;
}
.wa-step-figs .figur {
  width: 38px;
  height: 49px;
}
.wa-step-figs .figur.figur-l {
  width: 46px;
  height: 60px;
}
.wa-step-block {
  width: 100%;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 2px;
  padding: 12px 6px;
  border-radius: var(--r-l);
  background: var(--silver);
  color: var(--on-accent);
  box-shadow: 0 8px 0 var(--text);
  margin-bottom: 8px;
  transform-origin: 50% 100%;
  text-align: center;
}
.wa-step-place {
  font: 600 48px/52px var(--font-head);
}
.wa-step-person {
  display: grid;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}
.wa-step-name {
  font: 600 17px/22px var(--font-head);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-step-value {
  font: 600 15px/20px var(--font-head);
  font-variant-numeric: tabular-nums;
}
.wa-step-1 .wa-step-block {
  height: 184px;
  background: var(--gold);
}
.wa-step-2 .wa-step-block {
  height: 144px;
  background: var(--silver);
}
.wa-step-3 .wa-step-block {
  height: 116px;
  background: var(--bronze);
}
.wa-step.is-empty {
  visibility: hidden;
}
.wa-stayed {
  border-top: 0;
}
@media (max-width: 380px) {
  .wa-step-place {
    font-size: 38px;
    line-height: 42px;
  }
  .wa-step-name {
    font-size: 15px;
  }
}

/* Reduzierte Bewegung: nur Überblendungen */
@media (prefers-reduced-motion: reduce) {
  .is-pressed,
  .btn.is-pressed,
  .rank-row.is-pressed,
  .wa-tab-center:active .waage,
  .wa-stepbtn:active {
    transform: none;
  }
  .waage.is-weighing,
  .waage.is-weighing .waage-needle,
  .sb-token.is-flip {
    animation: none;
  }
}

/* Mehr Kontrast: klare Kanten */
@media (prefers-contrast: more) {
  .wa-header {
    background: var(--table);
    border-bottom: 2px solid var(--text);
  }
  .wa-tabs,
  .wa-sheet,
  .card,
  .wa-board {
    border-color: var(--text);
  }
  .wa-chart-grid text {
    fill: var(--text);
  }
}

.wa-chev svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* ---------- Plan 0.7: Spielfiguren antippen, Vorschau, Auffächern, Detailseite ---------- */

.sb-board.is-interactive .sb-fig {
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
}
.sb-board.is-interactive .sb-fig::before {
  /* größere Trefferfläche, mindestens 44 px */
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(44px, 130%);
  height: max(44px, 115%);
  transform: translateX(-50%);
}
.sb-board.is-interactive .sb-fig .figur {
  transition: transform 0.3s var(--ease-spring);
  transform-origin: 50% 100%;
}
@media (hover: hover) {
  .sb-board.is-interactive .sb-fig:hover .figur {
    transform: translateY(-4px) scale(1.06);
  }
}
.sb-board.is-interactive .sb-fig:active .figur {
  transform: scale(0.94);
  transition-duration: 0.08s;
}
.sb-board .sb-fig:focus-visible {
  outline: none;
}
.sb-board .sb-fig:focus-visible .figur {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 10px;
}
.sb-board.is-fanned .is-fanned-away {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Vorschau (Hover, Fokus, langes Drücken) */
.sb-peek {
  position: fixed;
  z-index: 70;
  display: grid;
  gap: 1px;
  max-width: min(280px, calc(100vw - 16px));
  padding: 8px 12px 9px;
  border-radius: 14px;
  background: var(--text);
  color: var(--on-accent);
  box-shadow: 0 8px 18px rgb(43 33 24 / 0.22);
  pointer-events: none;
  animation: sb-peek-in 0.18s ease-out;
}
.sb-peek b {
  font: 600 16px/20px var(--font-head);
}
.sb-peek span {
  font: 600 14px/19px var(--font-text);
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 0.86);
}
.sb-peek::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--peek-arrow, 50%);
  margin-left: -7px;
  border: 7px solid transparent;
  border-top-color: var(--text);
  border-bottom: 0;
}
@keyframes sb-peek-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* Auffächern: Figuren im Bogen mit Namen */
.sb-fan {
  position: absolute;
  inset: 0;
  z-index: 950;
}
.sb-fan-scrim {
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 0);
  transition: background 0.2s ease;
}
.sb-fan.is-open .sb-fan-scrim {
  background: rgb(255 248 238 / 0.9);
}
.sb-fan.is-closing .sb-fan-scrim {
  background: rgb(255 255 255 / 0);
}
.sb-fan-item {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 64px;
  text-decoration: none;
  color: var(--text);
  transform: translate(-50%, -100%);
  transition:
    transform 0.42s var(--ease-spring),
    opacity 0.2s ease;
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
}
.sb-fan.is-open .sb-fan-item {
  opacity: 1;
}
.sb-fan.is-closing .sb-fan-item {
  opacity: 0;
  transition-duration: 0.2s;
}
.sb-fan-item .figur {
  width: 34px;
  height: 44px;
  transition: transform 0.3s var(--ease-spring);
}
.sb-fan-item:hover .figur,
.sb-fan-item:focus-visible .figur {
  transform: translateY(-3px) scale(1.08);
}
.sb-fan-item:focus-visible {
  outline: none;
}
.sb-fan-item:focus-visible .sb-fan-name {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}
.sb-fan-name {
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--board);
  border: 2px solid var(--rim);
  box-shadow: 0 2px 0 var(--rim);
  font: 700 13px/17px var(--font-text);
}
.sb-fan-item.is-me .sb-fan-name {
  background: var(--sky-soft);
  border-color: var(--sky);
  color: var(--sky-dark);
}
.wa-fieldlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.wa-fieldlist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-m);
  border: 2px solid var(--rim);
  color: var(--text);
  text-decoration: none;
  font: 700 15px/20px var(--font-text);
}
.wa-fieldlist-row b {
  font: 600 14px/20px var(--font-text);
  color: var(--muted);
}

/* Leaderboard: ganze Reihe führt zur Detailseite */
.rank-row {
  position: relative;
}
.rank-link {
  color: inherit;
  text-decoration: none;
}
.rank-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.rank-link:focus-visible {
  outline: none;
}
.rank-row:has(.rank-link:focus-visible) {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}
.rank-row .wa-nudge,
.rank-row .wa-nudged {
  position: relative;
  z-index: 1;
}
@media (hover: hover) {
  .rank-row:has(.rank-link):hover {
    background: var(--table-hi);
  }
  .rank-row:has(.rank-link):hover .figur-mini {
    transform: translateY(-2px);
  }
}
.rank-row .figur-mini {
  transition: transform 0.3s var(--ease-spring);
}

/* Detailseite */
.wa-backrow {
  margin-bottom: -8px;
}
.wa-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 6px 12px 6px 6px;
  margin-left: -6px;
  border-radius: var(--r-full);
  color: var(--sky-dark);
  text-decoration: none;
  font: 700 15px/20px var(--font-text);
}
.wa-back:hover {
  background: var(--board);
}
.wa-back-chev svg {
  display: block;
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
}
.wa-person {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}
.wa-person-fig {
  display: grid;
  place-items: center;
  width: 76px;
  height: 92px;
  border-radius: var(--r-l);
  background: var(--table-hi);
  border: 2px solid var(--rim);
}
.wa-person-fig .figur {
  width: 46px;
  height: 60px;
}
.wa-person-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.wa-person-place {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 600 20px/26px var(--font-head);
}
.wa-person-move {
  padding: 2px 10px;
  border-radius: var(--r-full);
  background: var(--table);
  color: var(--muted);
  font: 700 13px/18px var(--font-text);
}
.wa-person-move.is-up {
  background: var(--meadow-soft);
  color: var(--meadow-dark);
}
.wa-person-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.wa-person-pct {
  font: 600 32px/38px var(--font-head);
  font-variant-numeric: tabular-nums;
}
.wa-person-kg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  font: 600 15px/21px var(--font-text);
}
.wa-person-actions {
  margin-top: -4px;
}
.wa-person-actions .chip {
  min-height: 44px;
  padding-inline: 16px;
  font-size: 15px;
}
.wa-person-streak {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wa-streak-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  background: var(--table);
  color: var(--muted);
}
.wa-streak-icon.is-on {
  background: var(--meadow-soft);
  color: var(--meadow-dark);
}
.wa-streak-icon svg {
  width: 26px;
  height: 26px;
}
.wa-person-joker {
  display: grid;
  justify-items: end;
  gap: 4px;
}
.wa-jokers {
  display: flex;
  gap: 4px;
}
.wa-joker-dot {
  color: var(--rim);
}
.wa-joker-dot.is-left {
  color: var(--lilac);
}
.wa-joker-dot svg {
  display: block;
  width: 20px;
  height: 20px;
}
.wa-duel-record {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.wa-duel-record .is-win b {
  color: var(--meadow-dark);
}
.wa-duel-record .is-loss b {
  color: var(--tomato-dark);
}
.wa-person-duel .banderole {
  margin-top: 26px;
}
.wa-privacy .wa-switch {
  margin-top: 8px;
}

/* Diagramme: Ziel-Linie gestrichelt, Ablesen per Zeigen/Ziehen */
.wa-chart-goal line {
  stroke: var(--meadow-dark);
  stroke-width: 1.6;
  stroke-dasharray: 5 5;
}
.wa-chart-goal text {
  fill: var(--meadow-dark);
  font: 700 13px var(--font-text);
}
.wa-chart.is-scrubbable {
  touch-action: pan-y;
  cursor: crosshair;
  border-radius: 10px;
}
.wa-scrub line {
  stroke: var(--text);
  stroke-opacity: 0.35;
  stroke-width: 1.2;
}
.wa-scrub circle {
  fill: var(--board);
  stroke: var(--sky);
  stroke-width: 3;
}
.wa-scrub rect {
  fill: var(--text);
}
.wa-scrub text {
  fill: var(--on-accent);
  font: 700 13px var(--font-text);
  font-variant-numeric: tabular-nums;
}

/* Tab-Leiste: Indikator folgt dem Wischen */
.wa-tab-ind {
  position: absolute;
  left: 0;
  bottom: calc(6px + env(safe-area-inset-bottom));
  height: 4px;
  width: 28px;
  border-radius: 2px;
  background: var(--sky);
  pointer-events: none;
  transform: translateX(var(--ind-x, 0));
  transition: transform 0.35s var(--ease-spring);
}
.wa-tabs.is-swiping .wa-tab-ind {
  transition: none;
}
@media (min-width: 600px) {
  .wa-tab-ind {
    bottom: 6px;
  }
}
.wa-main.is-swiping > :not(.wa-tabs):not(.wa-chead) {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .sb-fan-item,
  .sb-fan-scrim,
  .wa-tab-ind,
  .sb-board.is-interactive .sb-fig .figur,
  .rank-row .figur-mini {
    transition: none;
  }
  .sb-peek,
  .wa-empty-art .figur {
    animation: none;
  }
  .sb-board.is-interactive .sb-fig:hover .figur,
  .sb-fan-item:hover .figur {
    transform: none;
  }
}
.sb-board.is-fanned .sb-bubble,
.sb-board.is-fanned .sb-goal-label {
  opacity: 0;
  transition: opacity 0.15s ease;
}