/* ============================================================
   Bet & Drink — globaler Custom-Layer
   Quelle: workstation/design-system.md (verbindlich)
   Ergaenzt Tailwind via CDN. Tailwind-Tokens (siehe HTML-Inline-
   Config) referenzieren die hier definierten CSS-Variables.
   ============================================================ */

/* ============================================================
   0) ALPINE & VIEW-INFRASTRUKTUR (vorhanden, beibehalten)
   ============================================================ */
[x-cloak] { display: none !important; }

/* Verhindert iOS-Pull-to-Refresh-Bounce in URL-Bar */
html, body {
  overscroll-behavior-y: contain;
}

/* Safe-Area-Padding-Helper (wird auf der bestehenden Bottom-Nav
   genutzt, bis die View-Items auf .tab-bar umgezogen sind). */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================================
   1) THEME-VARIABLES — Live (default) und Reveal
   ============================================================ */
:root {
  /* Live (dunkel) */
  --c-base:    11 11 14;     /* #0B0B0E */
  --c-card:    22 22 27;     /* #16161B */
  --c-faint:   42 42 51;     /* #2A2A33 */
  --c-ink:     244 244 240;  /* #F4F4F0 */
  --c-ink-sec: 139 139 149;  /* #8B8B95 */
  --c-ink-mut: 90 90 101;    /* #5A5A65 */

  color-scheme: dark;
}

body.reveal {
  /* Sonntag-Finale (warmes Beige, schwarzer Text) */
  --c-base:    239 230 210;  /* #EFE6D2 */
  --c-card:    255 252 242;  /* #FFFCF2 */
  --c-faint:   42 42 51;     /* #2A2A33 — bewusst gleich, dunkler Beleg-Look */
  --c-ink:     11 11 14;     /* #0B0B0E */
  --c-ink-sec: 90 90 101;    /* #5A5A65 — auf hell weniger Kontrast noetig */
  --c-ink-mut: 139 139 149;  /* #8B8B95 */

  color-scheme: light;
}

/* Smooth Switch beim Phasenwechsel (250 ms, ease-out).
   Nur Color-Properties — kein Layout-Shift, kein Flackern. */
body, body * {
  transition:
    background-color 250ms ease-out,
    color 250ms ease-out,
    border-color 250ms ease-out;
}
/* Status-Stempel sind invariant und sollen "gepraegt" wirken — keine Animation. */
.stamp { transition: none !important; }

/* ============================================================
   2) GLOBALE BASICS
   ============================================================ */
html, body {
  background: rgb(var(--c-base));
  color: rgb(var(--c-ink));
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  /* iOS Safe-Areas — Tab-Bar braucht Bottom-Padding auf Geraeten mit Home-Indicator */
  padding-bottom: env(safe-area-inset-bottom);
}

/* Tabular Numbers ueberall, wo Mono benutzt wird */
.font-mono,
[class*="font-mono"] {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Mono-Caps-Compound — extrem haeufig, daher als Helper */
.mono-caps {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* ============================================================
   3) STATUS-STEMPEL — die 5 Varianten
   ============================================================ */
.stamp {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-width: 1.5px;
  border-style: solid;
  border-radius: 2px;
  background: transparent;
  white-space: nowrap;
  /* Default-Rotation; pro Variante ueberschrieben fuer Streuung */
  transform: rotate(-1.5deg);
  user-select: none;
}

.stamp.gilt    { color: #7BC950; border-color: #7BC950; transform: rotate(-1.5deg); }
.stamp.pend    { color: #F2C200; border-color: #F2C200; transform: rotate( 1deg);   }
.stamp.aktiv   { color: rgb(var(--c-ink)); border-color: rgb(var(--c-ink)); transform: rotate(-1deg); }
.stamp.lost    { color: #D14B3C; border-color: #D14B3C; transform: rotate(-2deg); }
.stamp.verwurf { color: #C2382A; border-color: #C2382A; transform: rotate( 2deg); }

/* `aktiv` ist die einzige theme-aware Stempel-Variante — sie nutzt ink,
   damit sie im Reveal automatisch von off-white zu near-black wird.
   Andere Stempel-Farben sind absichtlich invariant. */

/* ============================================================
   4) TRENNLINIEN — Kassenbon-Mechanik
   ============================================================ */
.divider-dashed {
  border: 0;
  border-top: 1px dashed rgb(var(--c-faint));
  margin: 0;
}
.divider-solid {
  border: 0;
  border-top: 1px solid rgb(var(--c-faint));
  margin: 0;
}

/* ============================================================
   5) POT-HEADER — Cursor-Blink
   ============================================================ */
.pot-cursor::after {
  content: '_';
  display: inline-block;
  margin-left: 0.06em;
  animation: cursor-blink 1.0s step-end infinite;
  color: #F2C200;
  font-weight: 800;
}
@keyframes cursor-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ============================================================
   6) FOCUS-RING — accessibility
   ============================================================ */
*:focus { outline: none; }

*:focus-visible {
  outline: 2px solid #F2C200;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Inverse Focus-Ring auf gefuellten Accent-CTAs (sonst Gelb-auf-Gelb unsichtbar) */
.btn-primary:focus-visible {
  outline-color: rgb(var(--c-ink));
}

/* ============================================================
   7) BUTTONS — drei Stufen
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 18px;
  background: #F2C200;
  color: #0B0B0E;
  border: 0;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease-out, transform 60ms ease-out;
}
.btn-primary:hover  { background: #D9AE00; }
.btn-primary:active { background: #C29B00; transform: translateY(1px); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  background: #F2C200;
  transform: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 18px;
  background: transparent;
  color: rgb(var(--c-ink));
  border: 1.5px solid rgb(var(--c-ink));
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.btn-secondary:hover  { background: rgb(var(--c-ink)); color: rgb(var(--c-base)); }
.btn-secondary:active { background: rgb(var(--c-ink) / 0.85); }
.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Voting-Trio: outlined, je Status eingefaerbt */
.btn-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 12px;
  background: transparent;
  border-width: 1.5px;
  border-style: solid;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.btn-vote.yes     { color: #7BC950; border-color: #7BC950; }
.btn-vote.no      { color: #D14B3C; border-color: #D14B3C; }
.btn-vote.abstain { color: rgb(var(--c-ink-sec)); border-color: rgb(var(--c-ink-sec)); }
.btn-vote:hover.yes      { background: #7BC950; color: #0B0B0E; }
.btn-vote:hover.no       { background: #D14B3C; color: #F4F4F0; }
.btn-vote:hover.abstain  { background: rgb(var(--c-ink-sec)); color: rgb(var(--c-base)); }
.btn-vote:active         { transform: translateY(1px); }
.btn-vote.is-selected.yes     { background: #7BC950; color: #0B0B0E; }
.btn-vote.is-selected.no      { background: #D14B3C; color: #F4F4F0; }
.btn-vote.is-selected.abstain { background: rgb(var(--c-ink-sec)); color: rgb(var(--c-base)); }
.btn-vote:disabled,
.btn-vote[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   8) CHAT-BUBBLES
   ============================================================ */
.bubble {
  display: block;
  max-width: 82%;
  padding: 10px 12px;
  border-radius: 4px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.bubble.user {
  margin-left: auto;
  background: rgba(242, 194, 0, 0.15); /* #F2C200 / 15 % */
  color: #F4E4A8;
  border: 1px solid rgba(242, 194, 0, 0.3);
}
.bubble.assistant {
  margin-right: auto;
  background: rgb(var(--c-card));
  color: rgb(var(--c-ink));
  border: 1px solid rgb(var(--c-faint));
}
/* Reveal-Modus: User-Bubble bleibt gelblich (Wiedererkennung),
   aber Text-Kontrast braucht Override (Beige-on-Gelblich sonst zu schwach).
   Quelle: workstation/views/chat.md §2.1 + §6. */
body.reveal .bubble.user {
  color: #5A3A00;
}

/* 8.1) SPEZIAL-BUBBLES — Wettvorschlag, Quittung, Coach, Typing, Error
   Quelle: workstation/views/chat.md §2.3 – §2.7 */
.bubble--proposal,
.bubble--receipt,
.bubble--coach {
  max-width: 92%;
  margin-right: auto;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  white-space: normal;
}
.bubble--proposal { border-color: rgba(242, 194, 0, 0.5); }
.bubble--receipt  { border-color: rgb(var(--c-faint)); }
.bubble--coach    { border-color: rgba(209, 75, 60, 0.4); }

.proposal__header,
.receipt__header,
.coach__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.proposal__content,
.receipt__content,
.coach__content {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: rgb(var(--c-ink));
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.proposal__sep,
.receipt__sep { margin: 2px 0; }

.proposal__meta,
.receipt__meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 12px;
  margin: 0;
}
.proposal__row,
.receipt__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.proposal__row dt,
.receipt__row dt { margin: 0; }
.proposal__row dd,
.receipt__row dd { margin: 0; line-height: 1.2; }

.proposal__reason {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: rgb(var(--c-ink-sec));
  font-style: italic;
  margin: 0;
}

.proposal__cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 4px;
}
.proposal__cta .btn-primary,
.proposal__cta .btn-secondary {
  height: 44px;
  padding: 0 14px;
}

.bubble--proposal.is-spent {
  opacity: 0.6;
  pointer-events: none;
}
.bubble--proposal.is-spent .proposal__cta { display: none; }

/* 8.2) COACH-BUBBLE — Verwerfungs-Header in Status-Rot, Vorschlags-Quote in Akzent */
.coach__header { color: #D14B3C; }

.coach__quote {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-left: 2px solid #F2C200;
  background: rgba(242, 194, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 0 4px 4px 0;
}
.coach__quote p {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  color: rgb(var(--c-ink));
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.coach__quote .btn-secondary.coach__adopt {
  height: 36px;
  align-self: flex-start;
  padding: 0 12px;
  font-size: 11px;
}

/* 8.3) TYPING-INDIKATOR — drei eckige Mono-Pixel, gestaffelt step-end */
.bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 12px 14px;
  width: auto;
  max-width: 60px;
  margin-right: auto;
}
.typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.typing-dots span {
  display: block;
  width: 6px;
  height: 6px;
  background: rgb(var(--c-ink-sec));
  border-radius: 0;
}
.typing-dots span:nth-child(1) { animation: typing-blink 1.0s step-end infinite;       }
.typing-dots span:nth-child(2) { animation: typing-blink 1.0s step-end infinite 0.16s; }
.typing-dots span:nth-child(3) { animation: typing-blink 1.0s step-end infinite 0.32s; }

@keyframes typing-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}

/* 8.4) ERROR-BUBBLE — User-Bubble mit Retry-Hint */
.bubble--error {
  border-color: rgba(209, 75, 60, 0.6);
}
.bubble--error__retry {
  display: block;
  margin-top: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #D14B3C;
  cursor: pointer;
  text-align: right;
  width: 100%;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.bubble--error__retry:hover { text-decoration: underline; }

/* ============================================================
   8.5) CHAT-VIEW — Stream + Input Layout
   Quelle: workstation/views/chat.md §1.2 + §4.1
   ============================================================ */
.chat-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.chat-stream {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-input {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
  border-top: 1px dashed rgb(var(--c-faint));
  /* Hinweis: <main> traegt bereits pb-[56px+env(safe-area-inset-bottom)],
     daher hier KEIN safe-area-Padding mehr — wuerde sonst doppelt zaehlen
     und einen leeren Streifen ueber der Tab-Bar erzeugen. */
  padding: 10px 12px;
  background: rgb(var(--c-base));
}
.chat-input__field {
  min-height: 48px;
  max-height: 144px;
  resize: none;
  width: 100%;
  padding: 12px 14px;
  background: rgb(var(--c-card));
  color: rgb(var(--c-ink));
  border: 1px solid rgb(var(--c-faint));
  border-radius: 4px;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;             /* 16 px verhindert iOS-Auto-Zoom beim Fokus */
  line-height: 1.4;
  transition: border-color 120ms ease-out;
  -webkit-appearance: none;
  appearance: none;
}
.chat-input__field::placeholder {
  color: rgb(var(--c-ink-mut));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chat-input__field:focus {
  outline: none;
  border-color: #F2C200;
}
.chat-input__send {
  height: 48px;
  padding: 0 18px;
  white-space: nowrap;
}
.chat-input.is-disabled .chat-input__field {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   8.6) CHAT-EMPTY-STATE — zentriert, Beispiel-Liste
   Quelle: workstation/views/chat.md §3
   ============================================================ */
.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px 16px;
  text-align: center;
}
.chat-empty .empty-state { padding: 0; }
.chat-empty__hints {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
}
.chat-empty__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgb(var(--c-ink-mut));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  list-style: none;
  padding: 0;
  margin: 0;
}
.chat-empty__list li::before {
  content: '\b7\00a0'; /* · + nbsp */
  color: rgb(var(--c-ink-mut));
}

/* ============================================================
   8.7) CHAT-STREAM-JUMP — flüchtige "neue Nachricht"-Pille
   Einzige border-radius-9999px-Stelle in der Chat-View (vgl. Toast-Ausnahme).
   Quelle: workstation/views/chat.md §7
   ============================================================ */
.chat-stream__jump {
  position: sticky;
  bottom: 8px;
  align-self: center;
  background: rgb(var(--c-card));
  color: #F2C200;
  border: 1px solid #F2C200;
  border-radius: 9999px;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 5;
}
.chat-stream__jump:hover { background: rgb(var(--c-card) / 0.9); }

/* ============================================================
   9) TAB-BAR
   ============================================================ */
.tab-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  display: grid;
  /* automatisch gleiche Spalten je nach Anzahl Buttons (4-6 erwartet) */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: rgb(var(--c-base));
  border-top: 1px solid rgb(var(--c-faint));
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 50;
}
.tab-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 56px;
  background: transparent;
  border: 0;
  border-top: 2px solid transparent;
  margin-top: -1px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--c-ink-sec));
  cursor: pointer;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.tab-bar__icon {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
}
.tab-bar__btn.is-active {
  color: #F2C200;
  border-top-color: #F2C200;
}
.tab-bar__btn:active {
  background: rgb(var(--c-ink) / 0.04);
}

/* ============================================================
   10) BET-CARD (Tippschein-Zeile)
   ============================================================ */
.bet-card {
  background: rgb(var(--c-card));
  border-radius: 4px;
  padding: 14px 14px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 8px;
  border: 1px solid transparent;
  transition: border-color 120ms ease-out;
}
.bet-card:hover {
  border-color: rgb(var(--c-faint));
}
/* Liste: gestrichelte Trennlinie zwischen Cards (statt eigene Borders pro Card) */
.bet-list > .bet-card + .bet-card {
  border-top: 1px dashed rgb(var(--c-faint));
  margin-top: 0;
  border-radius: 0;
}
.bet-card__text   { font-family: 'Outfit', sans-serif; font-size: 15px; line-height: 1.45; color: rgb(var(--c-ink)); }
.bet-card__meta   { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: rgb(var(--c-ink-sec)); text-align: right; white-space: nowrap; }
.bet-card__meta-row { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }

/* +BEWEIS-Tag */
.tag-evidence {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F2C200;
  padding: 2px 4px;
  border: 1px solid #F2C200;
  border-radius: 2px;
}

/* ============================================================
   11) CODENAME / TIER
   ============================================================ */
.codename {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.codename::before {
  content: '\25B8\00a0'; /* ▸ + nbsp */
  color: #F2C200;
  font-weight: 700;
}

.tier {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: #F2C200;
  letter-spacing: 0.04em;
}
.tier.t3 { font-weight: 800; }

/* ============================================================
   12) LEERE LISTEN — Terminal-Comment-Look
   ============================================================ */
.empty-state {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  color: rgb(var(--c-ink-mut));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 24px 16px;
  text-align: center;
}
.empty-state::before {
  content: '// ';
  color: rgb(var(--c-ink-mut));
}

/* ============================================================
   13) SKELETONS — Lade-Zustand
   ============================================================ */
.skeleton {
  background: rgb(var(--c-card));
  border-radius: 4px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.3; }
}
.skeleton--text  { height: 14px; width: 100%; }
.skeleton--title { height: 22px; width: 60%; }
.skeleton--pot   { height: 44px; width: 140px; }

/* ============================================================
   14) TOASTS — Ausnahme von der Eckigkeit
   ============================================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: rgb(var(--c-card));
  color: rgb(var(--c-ink));
  border: 1px solid rgb(var(--c-faint));
  border-radius: 9999px;
  padding: 10px 18px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 100;
}
.toast.is-win    { border-color: #7BC950; color: #7BC950; }
.toast.is-lose   { border-color: #D14B3C; color: #D14B3C; }
.toast.is-streak { border-color: #F2C200; color: #F2C200; }

/* ============================================================
   15) SCROLLBAR (Desktop) — dezent, Wettschein-Optik
   ============================================================ */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { background: rgb(var(--c-faint)); border-radius: 0; }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* ============================================================
   16) APP-SHELL — Tab-Bar im Mobile-Streifen positionieren
   Override aus design-system.md §9: Tab-Bar folgt App-Container
   (max-width 480px, zentriert), nicht dem Viewport-Rand.
   Quelle: workstation/views/app-shell.md §7.
   ============================================================ */
.tab-bar {
  left: 50%;
  right: auto;
  width: 100%;
  max-width: 480px;
  transform: translateX(-50%);
}

/* ============================================================
   17) POT-HEADER — LED-Flicker beim Pot-Update
   600 ms Opacity-Animation, layout-stabil, kein Glow/Scale.
   Trigger: SSE-Event `pot_updated` setzt `pot.isPulsing = true`.
   Quelle: workstation/views/app-shell.md §2.7.
   ============================================================ */
.is-pulsing {
  animation: pot-flicker 600ms ease-out 1;
}
@keyframes pot-flicker {
  0%   { opacity: 1; }
  20%  { opacity: 0.55; }
  40%  { opacity: 1; }
  60%  { opacity: 0.75; }
  100% { opacity: 1; }
}

/* ============================================================
   18) REVEAL-MODE-OVERRIDES fuer App-Shell
   - Aktiv-Tab Color: ink statt accent (Kontrast-Compliance auf Beige)
   - Codename-Praefix `▸`: ink statt accent (Lesbarkeit auf Beige)
   - Border-Top des aktiven Tabs bleibt accent (Marken-Recognition).
   Quelle: workstation/views/app-shell.md §3.5 + §5.3.
   ============================================================ */
body.reveal .tab-bar__btn.is-active {
  color: rgb(var(--c-ink));
}
body.reveal .codename::before {
  color: rgb(var(--c-ink));
}

/* ============================================================
   19) REDUCED-MOTION — accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .pot-cursor::after { animation: none; opacity: 1; }
  .skeleton { animation: none; opacity: 0.5; }
  .is-pulsing { animation: none; }
  .typing-dots span { animation: none !important; opacity: 1 !important; }
}

/* ============================================================
   20) PRINT — minimaler Reset (kein Use-Case, aber nicht-katastrophal)
   ============================================================ */
@media print {
  body { background: white !important; color: black !important; }
  .tab-bar, .toast, .btn-primary, .btn-secondary, .btn-vote { display: none !important; }
}

/* ============================================================
   21) FILTER-TABS — Wetten-Tab (lokal, NICHT Bottom-Tab-Bar)
   Bottom-Border (Strich nach unten) zeigt: dieser Filter
   gehoert zur Liste DARUNTER. Tab-Bar (oben Strich) gehoert
   dagegen zum Inhalt darueber.
   Quelle: workstation/views/bets-mine.md §3.3 + §3.4
   ============================================================ */
.filter-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 4px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--c-ink-sec));
  cursor: pointer;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.filter-tab.is-active        { color: #F2C200; border-bottom-color: #F2C200; }
.filter-tab:active           { background: rgb(var(--c-ink) / 0.04); }
/* Reveal: ink-Text + accent-Border, gleiche Asymmetrie wie Bottom-Tab-Bar (§18) */
body.reveal .filter-tab.is-active { color: rgb(var(--c-ink)); }

/* ============================================================
   22) BET-CARD — Tap-Feedback + Line-Clamp
   Ergaenzung zu §10. Card ist Click-Target (oeffnet Detail-Modal).
   Quelle: workstation/views/bets-mine.md §4.7 + §4.8
   ============================================================ */
.bet-card { cursor: pointer; user-select: none; }
.bet-card:active { transform: translateY(0.5px); }
@media (prefers-reduced-motion: reduce) {
  .bet-card:active { transform: none; }
}
.bet-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
}
/* Zwei-Zeilen-Stack im Meta-Bereich (Tier·Einsatz oben, Stempel·Tag unten) */
.bet-card__meta { display: flex; flex-direction: column; gap: 6px; }

/* ============================================================
   23) MINI-SCORECARD — Reveal-Override fuer Punkte-Wert
   Live: Accent-Gelb (positives Spiel-Signal). Reveal: ink, weil
   Accent auf Beige nur 2.1:1 Kontrast liefert (WCAG-fail).
   Quelle: workstation/views/bets-mine.md §2.6
   ============================================================ */
body.reveal .scorecard__points {
  color: rgb(var(--c-ink));
}

/* ============================================================
   24) BOTTOM-SHEET (Detail / Erfuellen / Beweis-Nachreichen)
   Eine Sheet mit drei Modi (mode-swap), klebt am Bottom des
   App-Containers (max-width 480px, zentriert). Backdrop
   bg-base/70, kein Blur. Top-Radius 4px, Bottom 0.
   Quelle: workstation/views/bets-mine.md §6.1 + §9.1
   ============================================================ */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(var(--c-base) / 0.70);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: rgb(var(--c-card));
  border-top: 1px solid rgb(var(--c-faint));
  border-left: 1px solid rgb(var(--c-faint));
  border-right: 1px solid rgb(var(--c-faint));
  border-radius: 4px 4px 0 0;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  /* Safe-Area-Padding-Bottom — Footer-Buttons sitzen nicht unter Home-Indicator */
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 201;
}
.sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
  flex-shrink: 0;
}
.sheet__close {
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--c-ink-sec));
  transition: color 120ms ease-out;
}
.sheet__close:hover { color: rgb(var(--c-ink)); }
.sheet__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 16px;
}
.sheet__footer {
  flex-shrink: 0;
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgb(var(--c-faint));
}
.sheet__footer .btn-primary,
.sheet__footer .btn-secondary { flex: 1 1 0%; }

/* ============================================================
   25) BEWEIS-UPLOAD — Drop-Area + States
   Vier States: idle / selected / uploading / error.
   Quelle: workstation/views/bets-mine.md §7.5
   ============================================================ */
.upload-drop {
  display: block;
  margin-top: 8px;
  padding: 24px 16px;
  border: 2px dashed rgb(var(--c-faint));
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.upload-drop:hover,
.upload-drop:focus-within { border-color: #F2C200; }
.upload-drop input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.upload-drop__hint   { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(var(--c-ink-sec)); }
.upload-drop__sub    { display: block; margin-top: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(var(--c-ink-mut)); }

.upload-drop.is-uploading { border-color: #F2C200; }
.upload-drop.is-uploading .upload-drop__hint { color: #F2C200; }

.upload-preview {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  align-items: flex-start;
}
.upload-preview__thumb {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background: rgb(var(--c-base));
  border: 1px solid rgb(var(--c-faint));
  border-radius: 4px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-preview__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.upload-preview__thumb-icon {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgb(var(--c-ink-sec));
  text-transform: uppercase;
}
.upload-preview__body { flex: 1 1 auto; min-width: 0; }
.upload-preview__name {
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: rgb(var(--c-ink));
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-preview__size {
  margin-top: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--c-ink-sec));
}
.upload-preview__remove {
  margin-top: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D14B3C;
}
.upload-preview__remove:hover { text-decoration: underline; }

.upload-error {
  margin-top: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D14B3C;
}

/* ============================================================
   26) WITNESS-CHECKLIST — Multi-Select fuer Zeugen
   Quelle: workstation/views/bets-mine.md §7.6
   ============================================================ */
.witness-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; }
.witness-list label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
}
.witness-list input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #F2C200;
  flex-shrink: 0;
}
.witness-list span {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  color: rgb(var(--c-ink));
}

/* ============================================================
   27) WETT-ECHO — read-only Wett-Text im Fulfill/Add-Evidence
   Quelle: workstation/views/bets-mine.md §7.4
   ============================================================ */
.bet-echo {
  background: rgb(var(--c-base));
  border: 1px solid rgb(var(--c-faint));
  border-radius: 4px;
  padding: 12px;
  margin-top: 8px;
}
.bet-echo__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--c-ink-sec));
}
.bet-echo__text {
  margin: 4px 0 0;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgb(var(--c-ink));
}

/* ============================================================
   28) DETAIL-META-DL — Wettschein-Stammdaten in zwei Spalten
   Quelle: workstation/views/bets-mine.md §6.4
   ============================================================ */
.detail-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 12px;
  row-gap: 8px;
  margin: 0;
}
.detail-meta dt {
  margin: 0;
  align-self: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--c-ink-sec));
}
.detail-meta dd {
  margin: 0;
  align-self: center;
  text-align: right;
}
.detail-section { margin-top: 16px; }
.detail-section__label {
  display: block;
  margin-top: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--c-ink-sec));
}
.detail-section__quote {
  margin: 8px 0 0;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgb(var(--c-ink));
  font-style: italic;
}
.detail-section__witnesses {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-section__witnesses li {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  color: rgb(var(--c-ink));
}
.detail-section__evidence-img {
  display: block;
  margin-top: 8px;
  max-width: 200px;
  width: 100%;
  border: 1px solid rgb(var(--c-faint));
  border-radius: 4px;
}

/* ============================================================
   29) PHASE-LOCK-HINT — Disabled-Hint im Footer bei phase != live
   Quelle: workstation/views/bets-mine.md §10.5
   ============================================================ */
.phase-lock-hint {
  display: block;
  margin: 0 16px 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #D14B3C;
}

/* ============================================================
   30) LEADERBOARD — Tier-Block, Listen-Zeile, Streak, Live-Dot
   Quelle: workstation/views/leaderboard.md (Visual-Spec)
   ============================================================ */

/* Live-Dot — wiederverwendbar (Pot-Header, Public-Voting etc.) */
.lb-live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  /* Einzige Ausnahme zur Eckigkeitsregel — Punkt ist per definitionem rund. */
  border-radius: 9999px;
  background: #F2C200;
  animation: cursor-blink 1.0s step-end infinite;
}
.lb-live-dot.is-stale {
  opacity: 0.3;
  animation: none;
  background: rgb(var(--c-ink-mut));
}

/* Tier-Block-Container — Spacing kommt aus dem Header */
.lb-tier { /* keine Defaults */ }

.lb-tier__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 0 8px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Solider Trenner zwischen Tiers (zwischen Tier-Bloecken statt dashed wie zw. Zeilen) */
.lb-tier:not(:first-child) .lb-tier__header {
  border-top: 1px solid rgb(var(--c-faint));
  margin-top: 4px;
}
.lb-tier__label       { color: rgb(var(--c-ink)); }
.lb-tier__consequence { color: rgb(var(--c-ink-sec)); }
/* BOTTOM 3 Konsequenz-Label dunkelrot — Strafe muss Aufmerksamkeit haben.
   Theme-invariant (Rot bleibt Rot, auch im Reveal). */
.lb-tier[data-tier="bottom3"] .lb-tier__consequence {
  color: #D14B3C;
  font-weight: 700;
}

/* Listen-Container */
.lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Gestrichelte Trennung zwischen Zeilen innerhalb eines Tiers */
.lb-list > .lb-row + .lb-row {
  border-top: 1px dashed rgb(var(--c-faint));
}

/* Listen-Zeile */
.lb-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: baseline;
  padding: 12px 12px 12px 12px;
  /* Reservespace fuer Self-Highlight-Border — verhindert Layout-Shift */
  border-left: 3px solid transparent;
  margin-left: -3px;
  transition: border-color 120ms ease-out, background-color 200ms ease-out;
}
.lb-row__rank {
  grid-column: 1; grid-row: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  color: rgb(var(--c-ink-sec));
  letter-spacing: 0.04em;
}
.lb-row__name {
  grid-column: 2; grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0; /* Flexbox-Truncate-Fix */
}
/* Codename selbst kann brechen (nie Ellipsis — Identitaet darf nicht abgeschnitten werden) */
.lb-row .codename { word-break: break-word; }

.lb-row__stats {
  grid-column: 3;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.lb-row__points {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  color: rgb(var(--c-ink));
}
.lb-row__bets {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgb(var(--c-ink-mut));
  text-transform: uppercase;
}
.lb-row__self-hint {
  grid-column: 2; grid-row: 2;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #F2C200;
  text-transform: uppercase;
  font-weight: 600;
}

/* Self-Highlight (3-fach: Border-Left, Bg-Tint, "// DU"-Sublabel) */
.lb-row.is-self {
  border-left-color: #F2C200;
  background: rgba(242, 194, 0, 0.06);
}
body.reveal .lb-row.is-self {
  background: rgba(242, 194, 0, 0.12);
}

/* Flash-Animation bei Rank-Up — kein FLIP-Reorder, nur dezenter Bg-Flash */
.lb-row.is-flash {
  animation: lb-row-flash 1.5s ease-out;
}
@keyframes lb-row-flash {
  0%   { background: rgba(242, 194, 0, 0.30); }
  60%  { background: rgba(242, 194, 0, 0.18); }
  100% { background: rgba(242, 194, 0, 0); }
}
/* Self + Flash kombiniert: Self-Bg ist persistent, Flash ueberlagert kurz */
.lb-row.is-self.is-flash {
  animation: lb-row-flash-on-self 1.5s ease-out;
}
@keyframes lb-row-flash-on-self {
  0%   { background: rgba(242, 194, 0, 0.30); }
  60%  { background: rgba(242, 194, 0, 0.18); }
  100% { background: rgba(242, 194, 0, 0.06); }
}
body.reveal .lb-row.is-self.is-flash {
  animation-name: lb-row-flash-on-self-reveal;
}
@keyframes lb-row-flash-on-self-reveal {
  0%   { background: rgba(242, 194, 0, 0.40); }
  60%  { background: rgba(242, 194, 0, 0.25); }
  100% { background: rgba(242, 194, 0, 0.12); }
}
@media (prefers-reduced-motion: reduce) {
  .lb-row.is-flash { animation: none; }
}

/* Streak-Mini-Stempel — Wettschein-Manierismus, leicht schief */
.lb-streak {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 2px 5px;
  border: 1px solid #F2C200;
  border-radius: 2px;
  background: transparent;
  color: #F2C200;
  white-space: nowrap;
  transform: rotate(-1deg);
  /* theme-invariant — Streak bleibt im Reveal Accent */
}

/* ============================================================
   31) PUBLIC CHALLENGES — Card-Varianten + Destructive-CTA
   Quelle: workstation/views/public-challenges.md §5 + §6
   ============================================================ */

/* Spec §5.1: Eigene Card umrandet sich mit 1 px Accent. Fremd-Cards
   bleiben transparent (Default aus .bet-card §10). Border-Style explicit
   solid setzen, damit die Listen-Trennlinie (.bet-list > +; siehe §10)
   nicht den Top-Border-Style auf dashed zwingt. */
.bet-card.pc-card--own,
.bet-list > .bet-card + .bet-card.pc-card--own {
  border: 1px solid #F2C200;
}
.bet-card.pc-card--own:hover {
  border-color: #F2C200; /* kein Hover-Wechsel */
}

/* Spec §6.2: Destructive Confirm-Button (Aufgegeben). Override des
   Primary-Bgs auf Lose-Rot. Einzige Stelle in der App, an der ein
   Primary-CTA nicht Accent-Gelb traegt. Mit Tailwind-`!`-Override
   waere das auch im Markup moeglich; hier zentral, weil mehrfach
   auftretender Pattern wahrscheinlich (siehe Spec-Kommentar). */
.btn-primary.pc-btn-destructive {
  background: #D14B3C;
  color: #F4F4F0;
}
.btn-primary.pc-btn-destructive:hover  { background: #B23A2D; }
.btn-primary.pc-btn-destructive:active { background: #9A2F25; }

/* Spec §4.6 — Disabled Vote-Buttons: opacity + cursor reichen visuell,
   aber pointer-events: none verhindert auch versehentliches Aktiv-
   Werden bei Race-Window (Frist abgelaufen, aber UI-Tick noch nicht
   durch). Nativ blockiert `disabled` schon den Click — diese Regel
   ist Defense-in-Depth fuer aria-disabled-Faelle. */
.btn-vote:disabled,
.btn-vote[aria-disabled="true"] {
  pointer-events: none;
}

/* ============================================================
   32) ADMIN-VIEW HELPERS (provisorisch)
   Quelle: workstation/views/admin.md §12.
   Wandern in der naechsten Design-System-Iteration zurueck nach
   design-system.md (Manierismus 4.11 Modus-Stempel, 4.12 Queue-
   Item, §2.7 Resolve-Button). Bis dahin leben sie hier.
   ============================================================ */

/* 32.1) ADMIN-MARK — Modus-Stempel im Admin-Header
   Variante der .stamp-DNA, etwas schwerer/groesser. Theme-aware via --c-ink. */
.admin-mark {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 2px solid rgb(var(--c-ink));
  border-radius: 2px;
  background: transparent;
  color: rgb(var(--c-ink));
  transform: rotate(-2deg);
  white-space: nowrap;
  user-select: none;
}

/* 32.2) RESOLVE-BUTTON-TRIO — outlined, drei Status-Farben.
   Eigene Klasse statt .btn-vote-Recycling: Voting = Meinung,
   Resolve = Urteil. Hover fuellt den Button (Stempel knallt). */
.btn-resolve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 8px;
  background: transparent;
  border-width: 1.5px;
  border-style: solid;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms ease-out, color 120ms ease-out, transform 60ms ease-out;
  white-space: nowrap;
}
.btn-resolve.gilt    { color: #7BC950; border-color: #7BC950; }
.btn-resolve.lost    { color: #D14B3C; border-color: #D14B3C; }
.btn-resolve.verwurf { color: #C2382A; border-color: #C2382A; }
.btn-resolve.gilt:hover     { background: #7BC950; color: #0B0B0E; }
.btn-resolve.lost:hover     { background: #D14B3C; color: #F4F4F0; }
.btn-resolve.verwurf:hover  { background: #C2382A; color: #F4F4F0; }
.btn-resolve:active         { transform: translateY(1px); }
.btn-resolve:disabled,
.btn-resolve[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.btn-resolve:focus-visible  { outline: 2px solid #F2C200; outline-offset: 2px; }

/* 32.3) QUEUE-SECTION-HEADER — `==== TITEL (n) ====`-Optik */
.queue-section-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgb(var(--c-faint));
  margin-bottom: 12px;
}

/* 32.4) QUEUE-LIST + QUEUE-ITEM */
.queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.queue-item {
  background: rgb(var(--c-card));
  border: 1px solid rgb(var(--c-faint));
  border-radius: 4px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.queue-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.queue-item__text {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: rgb(var(--c-ink));
  margin: 0;
}
.queue-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
}
.queue-item__detail {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgb(var(--c-faint));
}
.queue-item__witnesses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.queue-item__note {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.queue-item__actions {
  /* Nutzt grid-cols-3 vom Markup; hier nur fuer Konsistenz, falls jemand das CSS-Helper nutzt. */
}
.queue-item__witness-call {
  align-self: flex-end;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--c-ink-mut));
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  transition: color 120ms ease-out;
}
.queue-item__witness-call:hover { color: #F2C200; }

/* Compact-Variante fuer Reveal-Queue */
.queue-item--compact {
  padding: 10px 14px;
  gap: 8px;
}
.queue-item--compact .btn-resolve {
  height: 36px;
  padding: 0 10px;
  font-size: 11px;
}

/* 32.5) WITNESS-ZEILE — Status-Color via [data-state] */
.witness {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.witness[data-state='confirm']  { color: #7BC950; }
.witness[data-state='deny']     { color: #D14B3C; }
.witness[data-state='open']     { color: rgb(var(--c-ink-mut)); }
.witness__icon {
  font-size: 11px;
  font-weight: 800;
}

/* 32.6) EVIDENCE-THUMB — 64x64 mit Hover-Accent */
.evidence-thumb {
  width: 64px;
  height: 64px;
  border-radius: 2px;
  border: 1.5px solid rgb(var(--c-faint));
  background: rgb(var(--c-base));
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.evidence-thumb img,
.evidence-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.evidence-thumb__icon {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgb(var(--c-ink-sec));
}
.evidence-thumb:hover  { border-color: #F2C200; }
.evidence-thumb:focus-visible { outline: 2px solid #F2C200; outline-offset: 2px; }

/* 32.7) VOTE-TALLY — farbcodierte Counts (yes/no/abstain) */
.vote-tally {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
}
.vote-tally__yes  { color: #7BC950; font-weight: 600; }
.vote-tally__no   { color: #D14B3C; font-weight: 600; }
.vote-tally__abst { color: rgb(var(--c-ink-sec)); font-weight: 500; }
.vote-tally__sep  { color: rgb(var(--c-ink-mut)); }

/* 32.8) NOTE-INPUT — Resolve-Notiz-Textarea */
.note-input {
  width: 100%;
  background: rgb(var(--c-base));
  border: 1px solid rgb(var(--c-faint));
  border-radius: 4px;
  padding: 8px 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: rgb(var(--c-ink));
  resize: vertical;
  min-height: 32px;
}
.note-input:focus { outline: none; border-color: #F2C200; }
.note-input::placeholder { color: rgb(var(--c-ink-mut)); }

/* 32.9) ADMIN-RANK — Rank-Praefix im Final-Board (#01, #02, …) */
.admin-rank {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: rgb(var(--c-ink-sec));
  letter-spacing: 0.04em;
  margin-right: 6px;
}

/* ============================================================
   33) REVEAL — CROSSFADE BEIM PHASEN-WECHSEL
   600 ms statt der globalen 250 ms — der Beleg-Moment wird
   inszeniert, nicht beilaeufig getoggelt.
   Quelle: workstation/views/reveal.md §1.2
   ============================================================ */
body.reveal,
body.reveal * {
  transition:
    background-color 600ms cubic-bezier(0.4, 0, 0.2, 1),
    color            600ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color     600ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* .stamp behaelt seinen "transition: none !important" (siehe §3) */

/* ============================================================
   34) REVEAL — RANG-STEMPEL (1./2./3.PLATZ + VERLIERER)
   Erweiterung von §3. rank-1 mit dickerer Border (Sieger-Stempel).
   rank-2 und rank-3 theme-aware (ink). rank-bottom invariant rot.
   Quelle: workstation/views/reveal.md §6.3 + §10.1
   ============================================================ */
.stamp.rank-1      { color: #7BC950; border-color: #7BC950; border-width: 2px; transform: rotate(-2.5deg); }
.stamp.rank-2      { color: rgb(var(--c-ink)); border-color: rgb(var(--c-ink)); transform: rotate( 1.5deg); }
.stamp.rank-3      { color: rgb(var(--c-ink)); border-color: rgb(var(--c-ink)); transform: rotate(-1deg); }
.stamp.rank-bottom { color: #D14B3C; border-color: #D14B3C; transform: rotate( 2deg); }

/* ============================================================
   35) REVEAL — DIVIDER-DOUBLE (Beleg-Doppellinie um die Endsumme)
   Quelle: workstation/views/reveal.md §10.2
   ============================================================ */
.divider-double {
  border: 0;
  border-top: 3px double rgb(var(--c-faint));
  margin: 16px 0;
}

/* ============================================================
   36) REVEAL — PERFORIERTER TEAR-OFF (Bondrucker-Rand)
   CSS-Mask, theme-aware via var(--c-card). Aeltere Browser ohne
   Mask-Support sehen einen flachen Streifen — akzeptabel.
   Quelle: workstation/views/reveal.md §10.4
   ============================================================ */
.beleg-tear {
  height: 16px;
  background-color: rgb(var(--c-card));
  -webkit-mask-image: radial-gradient(circle at 8px 0, transparent 6px, black 6px);
          mask-image: radial-gradient(circle at 8px 0, transparent 6px, black 6px);
  -webkit-mask-size: 16px 16px;
          mask-size: 16px 16px;
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
}
.beleg-tear--top {
  -webkit-mask-position: 0 -8px;
          mask-position: 0 -8px;
}
.beleg-tear--bottom {
  -webkit-mask-position: 0  8px;
          mask-position: 0  8px;
}

/* ============================================================
   37) REVEAL — RANK-LIST + RANK-ROW
   Drei-Zeilen-Layout pro Spieler (Rang/Name/Stempel, Codename,
   Punkte). Self-Highlight: 3 px Akzent-Border-Left, kein Bg.
   Quelle: workstation/views/reveal.md §6 + §12
   ============================================================ */
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-list > .rank-row + .rank-row {
  border-top: 1px dashed rgb(var(--c-faint));
}
.rank-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  column-gap: 12px;
  padding: 14px 0;
  /* Reservespace fuer Self-Highlight-Border — verhindert Layout-Shift */
  border-left: 3px solid transparent;
  margin-left: -3px;
  padding-left: 3px;
  transition: border-color 120ms ease-out;
}
.rank-row.is-me {
  border-left-color: #F2C200;
  padding-left: 12px;
}
/* Hilfs-Span fuer Spalten-Span 2-3 (Codename, Punkte-Zeile) */
.rank-row__span2 { grid-column: span 2 / span 2; }

/* ============================================================
   38) REVEAL — REAL-NAME + CODENAME-STRUCK + STEMPEL-ANIMATION
   Drei Sub-Phasen: Strikethrough (200 ms), Echtname-Einfaden
   (300 ms ab 200 ms), Stempel-Knall (100 ms ab 500 ms).
   Quelle: workstation/views/reveal.md §8
   ============================================================ */
.real-name {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: rgb(var(--c-ink));
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: inline-block;
}
.real-name.is-revealing {
  opacity: 0;
  animation: name-rise 300ms ease-out forwards;
  animation-delay: 200ms;
}
@keyframes name-rise {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.codename--struck {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: rgb(var(--c-ink-mut));
  /* Strike-Linie als animierbare Background-Image-Linie */
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 60%;
  background-repeat: no-repeat;
  background-size: 100% 1.5px; /* Endzustand */
  display: inline-block;
}
.codename--struck::before {
  content: '\25B8\00a0';
  color: rgb(var(--c-ink-mut));
  font-weight: 500;
}
.codename--struck.is-revealing {
  background-size: 0% 1.5px; /* Pre-State: Linie nicht gezogen */
  animation: strike-through 200ms ease-out forwards;
}
@keyframes strike-through {
  0%   { background-size: 0% 1.5px; }
  100% { background-size: 100% 1.5px; }
}

.stamp.is-revealing {
  opacity: 0;
  animation: stamp-down 100ms ease-out forwards;
  animation-delay: 500ms;
}
@keyframes stamp-down {
  0%   { opacity: 0; transform: rotate(-30deg) scale(0.8); }
  100% { opacity: 1; }
}

/* ============================================================
   39) REVEAL — POT-ROW (Quittungs-Tabellenzeile)
   Drei-Spalten-Flex mit dotted-leader-lines (Border-Bottom auf
   Flex-Spacern, kein content-Pseudo). Quelle: §7 + §10.5
   ============================================================ */
.pot-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  margin: 6px 0;
}
.pot-row__label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--c-ink));
  white-space: nowrap;
  flex-shrink: 0;
}
.pot-row__leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted rgb(var(--c-faint));
  height: 0;
  align-self: center;
  margin-top: 8px;
  min-width: 16px;
}
.pot-row__leader--short {
  flex: 0 0 32px;
}
.pot-row__share {
  font-size: 13px;
  font-weight: 500;
  color: rgb(var(--c-ink-sec));
  white-space: nowrap;
  flex-shrink: 0;
  width: 48px;
  text-align: right;
}
.pot-row__amount {
  font-size: 18px;
  font-weight: 600;
  color: rgb(var(--c-ink));
  white-space: nowrap;
  flex-shrink: 0;
  width: 96px;
  text-align: right;
}
.pot-row--total .pot-row__label,
.pot-row--total .pot-row__amount {
  font-weight: 700;
}
.pot-row--total .pot-row__amount {
  font-size: 22px;
}

/* ============================================================
   40) REVEAL — BELEG-CONTAINER + HEADER
   Quelle: workstation/views/reveal.md §2 + §3
   ============================================================ */
.beleg-container {
  background: rgb(var(--c-card));
}
.beleg-header h1 {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  color: rgb(var(--c-ink));
  margin: 0;
}

/* ============================================================
   41) REVEAL — REDUCED-MOTION
   Endzustand muss ohne Animation konsistent sein. Strikethrough
   liegt persistent als background-image, real-name hat default
   opacity:1 — die is-revealing-Klassen ueberschreiben nur den
   Pre-State, der bei Reduced-Motion via §19 sofort uebersprungen
   wird.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .codename--struck.is-revealing { background-size: 100% 1.5px; }
  .real-name.is-revealing,
  .stamp.is-revealing            { opacity: 1; }
}

/* ============================================================
   POKAL — vergebener Pokal in der Liste durchgestrichen
   ============================================================ */
.pokal__title--struck {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: rgb(var(--c-ink-mut));
}
.bet-card.pokal--awarded {
  opacity: 0.65;
}

/* Vote-Button im Pokal-Detail: ausgewählter Kandidat = accent border */
.pokal-vote--selected {
  border-color: #F2C200 !important;
  background: rgba(242, 194, 0, 0.08) !important;
}

/* ============================================================
   LOG-VIEW — Status-Border-Marker links pro Eintrag
   ============================================================ */
.log-item--win     { border-left: 3px solid #5C8A3F; }
.log-item--lose    { border-left: 3px solid #D14B3C; }
.log-item--pending { border-left: 3px solid rgb(var(--c-faint)); }
.log-item--neutral { border-left: 3px solid rgb(var(--c-ink-mut)); }