/* ================================================================
   styles.css — Pincho Look: Granit, Chalk, Flechte, Alpenglühen.
   Bewusst ein einziges dunkles Theme (Trainings-App, früh/spät genutzt),
   kein Hell/Dunkel-Umschalten.
   ================================================================= */

:root {
  --bg: #0c0e12;
  --surface: #1b2028;
  --surface-2: #232a34;
  --line: #3a4250;
  --line-soft: #2a3140;
  --ink: #f2efe6;
  --ink-dim: #96a0ae;
  --ink-faint: #8f97a5;
  --accent: #4fc3ff;
  --accent-rgb: 79, 195, 255;
  --accent-ink: #06202f;
  --accent2: #ff6b47;
  --danger: #ff6b6b;
  --accent-glow: #9fe4ff;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  .anim-in { animation: riseIn .38s cubic-bezier(.2, .8, .3, 1) both; }
}
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.85); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes softPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .35); } 50% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); } }

/* Sehr dunkler, marmorierter Untergrund: mehrere weiche, unregelmässige
   Flecken (radial-gradient) plus ein paar feine, schräge "Adern"
   (repeating-linear-gradient) über der Grundfarbe — bewusst kein Bild,
   damit nichts nachgeladen werden muss und es mit dem Cache/Offline-Modus
   mitgeht. */
html, body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 620px at 10% 6%, rgba(255, 255, 255, 0.05), transparent 60%),
    radial-gradient(ellipse 760px 900px at 92% 18%, rgba(120, 175, 220, 0.06), transparent 55%),
    radial-gradient(ellipse 680px 520px at 22% 78%, rgba(255, 255, 255, 0.035), transparent 60%),
    radial-gradient(ellipse 1000px 720px at 78% 96%, rgba(90, 145, 195, 0.05), transparent 55%),
    repeating-linear-gradient(123deg, rgba(255, 255, 255, 0.022) 0px, rgba(255, 255, 255, 0.022) 1px, transparent 2px, transparent 130px),
    repeating-linear-gradient(34deg, rgba(255, 255, 255, 0.016) 0px, rgba(255, 255, 255, 0.016) 1px, transparent 2px, transparent 175px);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { padding-bottom: calc(64px + var(--safe-bottom)); }

a { color: inherit; }
button, input, select, textarea { font-family: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

.display { font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif; letter-spacing: .02em; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.shell { max-width: 640px; margin: 0 auto; padding: 0 16px 32px; }

.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + var(--safe-top)) 16px 14px;
  background: linear-gradient(var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 18px;
}
.topbar .brand { display: flex; flex-direction: column; gap: 2px; }
.topbar .mark { position: relative; font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .04em; padding-left: 14px; }
.topbar .mark::before {
  content: ''; position: absolute; left: 0; top: 1px; bottom: 1px; width: 5px;
  background: linear-gradient(180deg, var(--accent), var(--accent2)); transform: skewX(-14deg);
}
.topbar .mark em { font-style: normal; color: var(--accent); }
.app-tagline { font-size: 10px; color: var(--ink-faint); padding-left: 14px; min-height: 12px; }
.topbar .who { display: flex; align-items: center; gap: 10px; }
.topbar .who .name { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-dim); }
.topbar .logout {
  background: none; border: 1px solid var(--line); color: var(--ink-faint); font-size: 11px;
  padding: 6px 10px; cursor: pointer; transition: color .15s, border-color .15s, transform .15s;
}
.topbar .logout:hover { color: var(--ink); border-color: var(--ink-faint); }
.topbar .logout:active { transform: scale(.94); }

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: var(--safe-bottom);
}
.bottomnav a {
  position: relative; flex: 1; text-align: center; padding: 12px 4px 10px; text-decoration: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-faint);
  transition: color .2s;
}
.bottomnav a.active { color: var(--accent); }
.nav-dot {
  position: absolute; top: 6px; right: 18%; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent2);
  box-shadow: 0 0 6px 1px rgba(255, 107, 71, .6);
}
.nav-indicator {
  position: absolute; top: -1px; height: 2px; background: var(--accent);
  box-shadow: 0 0 8px 1px rgba(var(--accent-rgb), .6);
  transition: left .28s cubic-bezier(.3, .8, .3, 1), width .28s cubic-bezier(.3, .8, .3, 1);
}

/* ---------- Sections ---------- */
.sec-head { display: flex; align-items: baseline; gap: 12px; margin: 28px 0 14px; }
.sec-head:first-child { margin-top: 0; }
.sec-title { position: relative; font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .03em; margin: 0; padding-left: 12px; }
.sec-title::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px;
  background: var(--accent); transform: skewX(-14deg);
}
.sec-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.sec-chevron { color: var(--ink-faint); font-size: 14px; flex-shrink: 0; }

/* ---------- Cards / lists ---------- */
.card { background: var(--surface); border: 1px solid var(--line); padding: 16px; margin-bottom: 12px; }
.card-title { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
.card-value { font-family: 'Bebas Neue', sans-serif; font-size: 26px; margin: 0; }
.card-sub { font-size: 13px; color: var(--ink-dim); margin: 6px 0 0; }

.list { display: flex; flex-direction: column; gap: 8px; }
.list-empty { color: var(--ink-faint); font-size: 13px; padding: 18px 0; text-align: center; border: 1px dashed var(--line); }

/* ---------- Buttons ---------- */
.btn {
  display: block; width: 100%; font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: .05em;
  background: linear-gradient(135deg, var(--accent-glow), var(--accent) 65%); color: var(--accent-ink); border: none; padding: 13px; text-align: center;
  cursor: pointer; box-shadow: 0 4px 16px -4px rgba(var(--accent-rgb), .5);
  transition: transform .13s ease, box-shadow .13s ease, opacity .13s ease;
}
.btn:not(:disabled):hover { box-shadow: 0 6px 20px -4px rgba(var(--accent-rgb), .65); }
.btn:not(:disabled):active { transform: scale(.97); box-shadow: 0 2px 8px -2px rgba(var(--accent-rgb), .5); }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn.ghost { background: none; border: 1px solid var(--line); color: var(--ink-dim); box-shadow: none; }
.btn.small { width: auto; padding: 8px 14px; font-size: 14px; display: inline-block; }
.btn.danger { background: var(--danger); color: #2a0000; box-shadow: 0 4px 16px -4px rgba(255, 107, 107, .5); }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  padding: 11px 12px; font-size: 14px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.field textarea { resize: vertical; min-height: 64px; }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
.kg-field { position: relative; display: flex; align-items: center; }
.kg-field input { width: 100%; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); padding: 11px 34px 11px 12px; font-size: 14px; }
.kg-field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.kg-field span { position: absolute; right: 12px; font-size: 12px; color: var(--ink-faint); pointer-events: none; }

/* ---------- Campus-Board (Sätze bauen) ---------- */
.stepper-row { display: flex; align-items: center; gap: 10px; }
.stepper-btn {
  width: 44px; height: 44px; border: 2px solid var(--accent); background: var(--surface-2); color: var(--accent);
  font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.stepper-num {
  flex: 1; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 26px; font-weight: 700;
  color: var(--ink); background: var(--surface-2); border: 2px solid var(--line); padding: 8px 0;
}
.campus-ref { width: 100%; height: 130px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); margin: 10px 0 4px; position: relative; cursor: pointer; }
.campus-ref img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.campus-ref-label {
  position: absolute; bottom: 0; left: 0; right: 0; background: rgba(12, 14, 18, .75); color: var(--ink-dim);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px;
}
.campus-ref-line {
  position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px;
  background: var(--accent); box-shadow: 0 0 6px 1px rgba(var(--accent-rgb), .8);
  pointer-events: none;
}
.arrow { color: var(--ink-faint); font-size: 20px; flex-shrink: 0; }
.pattern-btn {
  width: 52px; height: 44px; border: 2px solid var(--line); background: var(--surface-2); color: var(--ink-dim);
  font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}
.pattern-btn.up { border-color: var(--accent); color: var(--accent); }
.pattern-btn.down { border-color: var(--accent2); color: var(--accent2); }
.pattern-strip {
  display: flex; gap: 8px; flex-wrap: wrap; min-height: 46px; align-items: center;
  border: 2px dashed var(--line); padding: 8px 10px; margin: 10px 0 14px;
}
.pattern-pill {
  font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 16px; padding: 6px 12px;
  border: 2px solid var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .1);
}
.pattern-pill.down { border-color: var(--accent2); color: var(--accent2); background: rgba(255, 107, 71, .1); }
.pattern-clear { margin-left: auto; color: var(--ink-faint); font-family: 'IBM Plex Mono', monospace; font-size: 12px; cursor: pointer; }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 8px 14px;
  border: 1px solid var(--line); color: var(--ink-dim); background: none; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, transform .12s;
}
.chip.active { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.chip[disabled] { opacity: .3; cursor: not-allowed; }
.chip:not([disabled]):active { transform: scale(.95); }
.chip .emoji { font-size: 15px; margin-right: 5px; vertical-align: -3px; }

/* ---------- Login ----------
   Der ganze Bildschirm ist der Rahmen fürs Logo (echter Splash-Eindruck
   beim Öffnen), nicht nur ein grösseres Bild in einer sonst normal
   fliessenden, kleinen Box — deshalb min-height:100dvh + vertikal
   zentriert statt nur ein bisschen Padding oben. */
.login-shell {
  min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 560px; margin: 0 auto; padding: 24px 20px; text-align: center;
}
.login-logo { display: block; width: min(85vw, 440px); max-width: 100%; margin: 0 auto 4px; }
.login-tag { color: var(--ink-dim); font-size: 14px; margin: 0 0 32px; }
.login-hint { font-size: 12px; color: var(--ink-faint); margin-top: 10px; text-align: center; }

/* ---------- Wochenplan ---------- */
.day-row { border: 1px solid var(--line); padding: 10px 12px; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.day-row.today { border-color: var(--accent); background: rgba(var(--accent-rgb), .05); }
.day-row .d { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-faint); width: 26px; flex-shrink: 0; }
.day-row .fields { flex: 1; display: flex; gap: 8px; }
.day-row input { flex: 1; background: none; border: none; color: var(--ink); font-size: 13px; padding: 4px 0; }
.day-row input:focus { outline: none; border-bottom: 1px solid var(--accent); }
.day-row select { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-faint); font-size: 10px; padding: 4px; }
.tag-pill { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .06em; color: var(--accent); border: 1px solid var(--accent); padding: 2px 6px; white-space: nowrap; }

/* ---------- Log ---------- */
.log-item { border: 1px solid var(--line); padding: 10px 12px; }
.log-item .top { display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-faint); }
.log-item .top .type { color: var(--accent); }
.log-item .note { font-size: 13px; color: var(--ink); margin-top: 4px; }

.ex-log-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.ex-log-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-dim); }
.ex-log-row .mono { color: var(--ink); }

.ex-row { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); padding: 8px 10px; margin-bottom: 6px; }
.ex-row-name { flex: 1; font-size: 12.5px; color: var(--ink); }
.ex-row-input { width: 52px; flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); padding: 6px 4px; font-size: 12px; text-align: center; }
.ex-row-remove { flex-shrink: 0; background: none; border: 1px solid var(--line); color: var(--ink-faint); width: 26px; height: 26px; cursor: pointer; }
.ex-row-step { flex-shrink: 0; background: none; border: 1px solid var(--accent); color: var(--accent); width: 22px; height: 22px; line-height: 1; cursor: pointer; font-size: 13px; }

/* ---------- Log: Freestyle (Übung wählen, Satz für Satz erfassen) ---------- */
.fs-last-value { font-size: 11.5px; color: var(--accent); margin: 2px 0 10px; }
.fs-target-value { font-size: 11.5px; color: var(--ink-dim); margin: 2px 0 6px; }
.hist-table-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 6px; }
.hist-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.hist-table th, .hist-table td { text-align: center; padding: 5px 4px; font-size: 11.5px; border-bottom: 1px solid var(--line); }
.hist-table th { color: var(--ink-faint); font-weight: 500; }
.hist-table td { color: var(--ink-dim); }
.hist-table .hist-row-label { text-align: left; color: var(--ink-faint); }
.hist-table tr:last-child td { border-bottom: none; }
.hist-table td:nth-child(2), .hist-table th:nth-child(2) { color: var(--accent); }
.fs-sticky-bar {
  position: sticky; z-index: 4;
  background: var(--surface-2); border: 1px solid var(--accent); padding: 10px 12px 12px;
  margin-bottom: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.fs-sticky-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--ink); font-weight: 600; margin-bottom: 8px;
}
.fs-sticky-input .field label { color: var(--ink); font-weight: 600; }
.fs-sticky-input #fs-add-set { margin-top: 2px; }
.fs-group { border: 1px solid var(--line); padding: 8px 10px; margin-bottom: 8px; }
.fs-group.active { border-color: var(--accent); }
.fs-group-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.fs-set-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-dim); padding: 4px 0; }
.fs-set-row span:first-child { flex: 0 0 52px; color: var(--ink-faint); }
.fs-rest-timer {
  text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--accent2);
  background: rgba(255, 107, 71, .1); border: 1px solid var(--accent2); padding: 8px; margin-bottom: 12px;
}
.fs-work-timer {
  text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 40px; line-height: 1;
  color: var(--accent); margin-bottom: 10px;
}
.fs-captured-duration { text-align: center; font-size: 12px; color: var(--ink-dim); margin-bottom: 8px; }
/* Gewicht/Wdh: die Beschriftung (was trage ich hier ein) soll auffallen,
   nicht primär die Zahl selbst — Label darum hell statt im sonst üblichen
   gedämpften Feld-Label-Grau, Zahl bewusst kleiner als vorher. */
#fs-weight, #fs-reps {
  font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: .02em;
  color: var(--ink); text-align: center;
}

/* ---------- Fingerboard: Schnelltraining ---------- */
.quickstart-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.quickstart-grid[hidden] { display: none; }
.qs-card { border: 1px solid var(--line); background: var(--surface); padding: 14px; transition: border-color .18s, transform .18s; }
.qs-card:hover { border-color: var(--line-soft); transform: translateY(-2px); }
.qs-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qs-name { font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: .02em; }
.qs-badge { flex-shrink: 0; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 2px 6px; }
.qs-note { font-size: 12.5px; color: var(--ink-dim); margin-top: 6px; line-height: 1.5; }
.qs-meta { font-size: 11px; color: var(--ink-faint); margin: 8px 0 12px; }
.qs-card .btn { margin: 0; }

/* ---------- Fingerboard ---------- */
.board-visual { border: 1px solid var(--line); background: var(--surface-2); padding: 10px; margin-bottom: 6px; }

.board-photo-wrap { position: relative; width: 100%; margin: 0 auto; }
.board-photo-wrap img { width: 100%; display: block; }
.board-hotspot {
  position: absolute; width: 6.5%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .1);
  cursor: pointer; padding: 0;
}
.board-hotspot.active { border-color: var(--accent); background: rgba(var(--accent-rgb), .38); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .2); }
.board-hotspot.active-left { border-color: var(--accent); background: rgba(var(--accent-rgb), .38); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .2); }
.board-hotspot.active-right { border-color: var(--accent2); background: rgba(255, 107, 71, .38); box-shadow: 0 0 0 4px rgba(255, 107, 71, .2); }
.board-hotspot.active-left.active-right { box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .2), 0 0 0 8px rgba(255, 107, 71, .2); }

/* ---------- Ablauf-Übersicht (Stat-Kacheln + Zeitleiste) ---------- */
.stat-tiles { display: flex; gap: 10px; margin-bottom: 16px; }
.stat-tile { flex: 1; background: var(--surface); border: 1px solid var(--line); padding: 12px; text-align: center; }
.stat-tile .num { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: var(--accent); line-height: 1; }
.stat-tile .lbl { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }

.timeline { display: flex; flex-direction: column; }
.timeline-item { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(:last-child)::before {
  content: ''; position: absolute; left: 12px; top: 26px; bottom: -2px; border-left: 2px dotted var(--line);
}
.timeline-badge {
  position: relative; z-index: 1; flex-shrink: 0; width: 25px; height: 25px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-family: 'Bebas Neue', sans-serif; font-size: 13px;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.timeline-badge.exercise { background: var(--accent2); color: #2a0d05; }
.timeline-card { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); padding: 10px; display: flex; gap: 10px; align-items: center; }
.timeline-thumb { flex-shrink: 0; position: relative; width: 58px; height: 26px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.timeline-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.timeline-thumb .dot { position: absolute; width: 9%; height: 4.5%; border-radius: 50%; background: rgba(var(--accent-rgb), .78); border: 1px solid var(--accent-ink); transform: translate(-50%, -50%); }
.timeline-thumb .dot.dot-alt { background: rgba(255, 107, 71, .78); border-color: #2a0d05; }
.timeline-thumb-emoji { display: flex; align-items: center; justify-content: center; font-size: 16px; width: 58px; height: 26px; }
.timeline-card .info { flex: 1; min-width: 0; }
.timeline-card .title { font-size: 13px; color: var(--ink); font-weight: 600; }
.timeline-card .sub { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; }
.timeline-edit { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.timeline-remove { flex-shrink: 0; align-self: flex-start; background: none; border: 1px solid var(--line); color: var(--ink-faint); width: 24px; height: 24px; cursor: pointer; }
.timeline-move { flex-shrink: 0; align-self: flex-start; display: flex; flex-direction: column; gap: 3px; }
.timeline-move-btn { background: none; border: 1px solid var(--line); color: var(--ink-faint); width: 24px; height: 19px; line-height: 1; font-size: 9px; padding: 0; cursor: pointer; }
.timeline-move-btn:disabled { opacity: .25; cursor: not-allowed; }
.timeline-drag-handle {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 28px; margin-left: -4px; color: var(--ink-faint); font-size: 17px; letter-spacing: -1px;
  cursor: grab; touch-action: none; user-select: none;
}
.timeline-drag-handle:active { cursor: grabbing; color: var(--ink); }
.timeline-item.dragging { z-index: 1000; box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .55); opacity: .96; }
.timeline-item.dragging .timeline-card { background: var(--surface-2); }
.timeline-drag-placeholder { border: 2px dashed var(--accent); border-radius: 2px; background: rgba(var(--accent-rgb), .07); }

.timer-box { text-align: center; margin: 6px 0 18px; }
.timer-box .big { font-family: 'Bebas Neue', sans-serif; font-size: 88px; line-height: 1; color: var(--accent); }
.timer-box .big.rest { color: var(--ink-dim); }
.timer-box .phase { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .15em; color: var(--ink-faint); text-transform: uppercase; margin-top: 2px; }

.timer-controls { display: flex; gap: 10px; }
.timer-controls .btn { flex: 1; }

/* ---------- Challenges ---------- */
.challenge-card { position: relative; border: 1px solid var(--line); background: var(--surface); padding: 16px; margin-bottom: 14px; overflow: hidden; }
.challenge-card.expired { opacity: .5; }
.stamp {
  position: absolute; top: 12px; right: -8px; transform: rotate(8deg);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em;
  color: var(--accent2); border: 1px solid var(--accent2); padding: 3px 8px;
  background: rgba(255, 107, 71, .08);
}
.stamp.done { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
.chal-from { font-size: 13px; color: var(--ink-dim); margin: 0 0 10px; padding-right: 60px; }
.chal-from b { color: var(--ink); }
.exlist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.exlist .ex { border: 1px solid var(--line); padding: 8px 10px; font-size: 12px; color: var(--ink-dim); }
.exlist .ex b { color: var(--ink); font-weight: 600; }
.exlist .ex.core { border-left: 2px solid var(--accent); }
.crew { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.crew .p { font-family: 'IBM Plex Mono', monospace; font-size: 10px; border: 1px solid var(--line); color: var(--ink-faint); padding: 4px 8px; }
.crew .p.done { border-color: var(--accent); color: var(--accent); }
.crew .p.expired { border-color: var(--ink-faint); color: var(--ink-faint); text-decoration: line-through; }
.chal-actions { display: flex; gap: 8px; }
.chal-actions .btn { flex: 1; }
.chal-duration-row { margin: 8px 0 0; }
.chal-duration-row .chip { font-size: 10px; padding: 5px 9px; }

/* Übungs-Raster (Einzelauswahl) — Ersatz für ein langes <select>-Dropdown
   in Fingerboard/Log/Freestyle: erst Körperregion am Bild oder als Chip
   antippen, dann erscheinen nur die Übungen dafür (siehe
   clickableBodyMapSvg/exercisePickerBodyHtml in app.js). */
.ex-body-map { width: clamp(100px, 17vh, 200px); margin: 4px auto 10px; display: block; }
.body-zone { cursor: pointer; }
.body-zone rect, .body-zone ellipse { fill: var(--ink-faint); opacity: .35; transition: fill .15s, opacity .15s; }
.body-zone:active rect, .body-zone:active ellipse { opacity: .6; }
.body-zone.active rect, .body-zone.active ellipse { fill: var(--accent); opacity: .9; }
.ex-supergroup-row { margin-bottom: 12px; }
.ex-pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.ex-pick-btn {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.3; padding: 9px 8px;
  border: 1px solid var(--line); color: var(--ink-dim); background: none; cursor: pointer;
  text-align: left; white-space: normal; transition: border-color .13s, color .13s, background .13s;
}
.ex-pick-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .1); }

/* ---------- Toast ---------- */
#toast-root { position: fixed; bottom: calc(76px + var(--safe-bottom)); left: 16px; right: 16px; z-index: 20; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 10px 16px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  max-width: 400px; text-align: center;
}
.toast.err { border-color: var(--danger); color: var(--danger); }
.toast.ok { border-color: var(--accent); color: var(--accent); }

/* ---------- Ablauf-Vollbild ----------
   Eigenständiges, fixed-positioniertes Overlay (an document.body gehängt,
   nicht Teil von #app) — deckt den ganzen Bildschirm ab, solange ein
   Fingerboard-Ablauf läuft. */
.fb-overlay {
  position: fixed; inset: 0; z-index: 50;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 700px 500px at 15% 8%, rgba(255, 255, 255, 0.045), transparent 60%),
    radial-gradient(ellipse 650px 700px at 90% 85%, rgba(120, 175, 220, 0.05), transparent 55%),
    repeating-linear-gradient(123deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 2px, transparent 130px);
  display: flex; flex-direction: column; align-items: stretch;
  padding: calc(10px + var(--safe-top)) 18px calc(10px + var(--safe-bottom));
  overflow: hidden;
}
.fb-overlay.hidden { display: none; }

/* ---------- Übungsinfo-Sheet (lang drücken auf eine Übung im Raster) ---------- */
.info-sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .6);
  display: flex; align-items: flex-end; justify-content: center;
}
.info-sheet-backdrop.hidden { display: none; }
.info-sheet-card {
  position: relative; width: 100%; max-width: 480px;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 20px 18px calc(20px + var(--safe-bottom));
  max-height: 80vh; overflow-y: auto;
  animation: riseIn .22s ease both;
}
.info-sheet-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: 1px solid var(--line); color: var(--ink-faint);
  width: 30px; height: 30px; font-size: 14px; line-height: 1; cursor: pointer;
}
.info-sheet-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .02em; margin-bottom: 10px; padding-right: 36px; }
.ex-howto { font-size: 13px; color: var(--ink-dim); line-height: 1.5; margin-bottom: 12px; }
.fb-overlay-close {
  position: absolute; top: calc(14px + var(--safe-top)); right: 16px; z-index: 2;
  background: none; border: 1px solid var(--line); color: var(--ink-faint);
  width: 34px; height: 34px; font-size: 15px; line-height: 1; cursor: pointer;
}
/* Alles muss ohne Scrollen aufs Display passen — statt einer festen
   Blockgrösse mit "justify-content:center" (die auf kurzen Screens
   überläuft) verteilt space-evenly den verfügbaren Platz auf alle Kinder,
   und Figur/Ring/Countdown unten sind in vh geklammert statt fix in px,
   damit sie sich automatisch verkleinern statt abzuschneiden. */
.fb-overlay-inner {
  display: flex; flex-direction: column; align-items: center; gap: clamp(3px, 1.1vh, 14px);
  max-width: 420px; width: 100%; margin: 0 auto; flex: 1; min-height: 0;
  justify-content: space-evenly; overflow: hidden;
}

.fb-progress-text { font-size: 11px; color: var(--ink-dim); text-align: center; }

/* Hang/Pause-Visual: Ring füllt sich mit dem Fortschritt INNERHALB des
   aktuellen Schritts, daneben ein Strichmännchen, das hängt (Hang) oder
   sich lockert (Pause) — statt einer abstrakten Gesamt-Fortschrittsanzeige. */
.fb-hang-visual { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 18px); }
.fb-phase-figure { width: clamp(56px, 13vh, 90px); flex-shrink: 0; }
.fb-phase-figure .ex-figure { width: 100%; height: auto; display: block; }
.fb-hang-figure { transform-origin: 50% 10%; animation: figSway 1.7s ease-in-out infinite; }
.fb-arm-shake { transform-origin: 49.5% 32.5%; animation: figShake .9s ease-in-out infinite; }
@keyframes figSway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes figShake { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

.fb-timer-ring { position: relative; width: clamp(80px, 17vh, 168px); height: clamp(80px, 17vh, 168px); flex-shrink: 0; }
.fb-timer-ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 7; }
.ring-fg {
  fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 326.7; transition: stroke-dashoffset .95s linear;
}
.ring-fg.rest { stroke: var(--ink-dim); }
.fb-timer-ring .big {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(26px, 7vh, 52px); color: var(--accent); line-height: 1;
}
.fb-timer-ring .big.rest { color: var(--ink-dim); }
.fb-timer-ring .big.rest-warn { color: var(--accent2); animation: bigWarnPulse .6s ease-in-out infinite; }
.ring-fg.rest-warn { stroke: var(--accent2); animation: ringWarnPulse .6s ease-in-out infinite; }
@keyframes bigWarnPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes ringWarnPulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Vorbereitungs-Countdown (5..1) vor einem Hang-Satz: grosse Zahl, die bei
   jedem Tick neu einschwingt (neues DOM-Element pro Sekunde durch den
   vollen Re-Render triggert die Animation von selbst); in den letzten
   3 Sekunden wechselt sie auf die "Achtung"-Farbe und schlägt stärker aus. */
.fb-precount {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(56px, 16vh, 108px); line-height: 1;
  color: var(--accent); margin: 2px 0; animation: popIn .35s cubic-bezier(.25, 1.4, .4, 1) both;
}
.fb-precount-tense { color: var(--accent2); animation: precountTick .5s cubic-bezier(.25, 1.4, .4, 1) both; }
@keyframes precountTick { 0% { opacity: 0; transform: scale(1.4); } 60% { opacity: 1; transform: scale(.95); } 100% { transform: scale(1); } }

.fb-overlay-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.fb-stage-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.fb-stage-title { font-family: 'Bebas Neue', sans-serif; font-size: 26px; text-align: center; letter-spacing: .02em; }
.fb-stage-sub { font-size: 12px; color: var(--ink-dim); text-align: center; }

/* Check-in während der letzten Pause eines Satzes — läuft nebenher, ohne
   den Ablauf zu unterbrechen (siehe openBlockCheckin in app.js). Bewusst
   sehr kräftig/gross: das Handy liegt beim Training meist am Boden, aus
   der Distanz oder im Vorbeigehen abgelesen — kein Platz für zurückhaltende
   Feinschrift. */
.fb-checkin { width: 100%; max-width: 320px; border: 2px solid var(--accent); background: rgba(var(--accent-rgb), .1); padding: clamp(10px, 2.2vh, 18px); box-sizing: border-box; }
.fb-checkin[hidden] { display: none; }
.fb-checkin-label {
  font-family: 'IBM Plex Mono', monospace; font-size: clamp(12px, 3.2vw, 15px); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; text-align: center;
}
.fb-checkin-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fb-chip {
  width: clamp(46px, 13vw, 62px); height: clamp(46px, 13vw, 62px); border: 3px solid var(--line); background: var(--surface-2); color: var(--ink);
  font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: clamp(18px, 5vw, 24px); cursor: pointer; transition: all .15s;
}
.fb-chip.ok { border-color: var(--accent); color: #04141c; background: var(--accent); box-shadow: 0 0 14px -2px rgba(var(--accent-rgb), .7); }
.fb-chip.fail { border-color: var(--danger); color: #1a0606; background: var(--danger); text-decoration: line-through; box-shadow: 0 0 14px -2px rgba(255, 107, 107, .6); }
.fb-checkin-row { display: flex; gap: 10px; }
.fb-checkin-row input[type="text"] {
  width: 88px; text-align: center; background: var(--surface-2); border: 3px solid var(--accent); color: var(--ink);
  padding: clamp(9px, 2vh, 14px) 8px; font-size: clamp(20px, 6vw, 26px); font-weight: 700; box-sizing: border-box;
}
.fb-checkin-row .kg-field { flex: 1; }
.fb-checkin-row .kg-field input { border: 3px solid var(--accent); font-size: clamp(20px, 6vw, 26px); font-weight: 700; padding: clamp(9px, 2vh, 14px) 44px clamp(9px, 2vh, 14px) 12px; }
.fb-checkin-row .kg-field span { font-size: 14px; font-weight: 700; color: var(--ink); }

/* Übersicht auf dem "Ablauf geschafft!"-Screen */
.fb-summary-headline { font-size: 13px; color: var(--accent); margin-bottom: 2px; text-align: center; }
.fb-summary-list { width: 100%; max-width: 280px; max-height: 22vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; }
.fb-summary-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-dim); border-bottom: 1px solid var(--line); padding: 4px 2px; }
.fb-stage-next { font-size: clamp(14px, 3.8vw, 18px); font-weight: 700; color: var(--ink); text-align: center; min-height: 16px; }
.fb-stage-btn { width: 100%; max-width: 280px; margin-top: 0; padding: clamp(7px, 1.8vh, 13px); }

.fb-transport { display: flex; align-items: center; gap: clamp(8px, 2.5vw, 14px); margin-top: 0; }
.fb-transport-btn {
  background: none; border: 1px solid var(--line); color: var(--ink-dim);
  width: clamp(48px, 10vh, 68px); height: clamp(42px, 9vh, 56px); font-size: 22px; cursor: pointer;
  transition: border-color .13s, color .13s, transform .13s;
}
.fb-transport-btn:disabled { opacity: .3; cursor: not-allowed; }
.fb-transport-btn:not(:disabled):active { border-color: var(--accent); color: var(--accent); transform: scale(.93); }
.fb-transport-btn.fb-play {
  width: clamp(58px, 12vh, 84px); height: clamp(50px, 11vh, 72px); font-size: 28px;
  border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .1);
}
.fb-transport-btn.fb-play:disabled { border-color: var(--line); color: var(--ink-dim); background: none; }

.fb-hang-visual.fb-paused .fb-hang-figure,
.fb-hang-visual.fb-paused .fb-arm-shake,
.fb-hang-visual.fb-paused .fig-a,
.fb-hang-visual.fb-paused .fig-b { animation-play-state: paused; }
/* Höhe statt Breite begrenzen — bei voller Container-Breite (bis 420px)
   würde die quadratische Figur sonst so hoch werden, dass Ring/Timer und
   die Buttons darunter nicht mehr ohne Scrollen aufs Display passen. */
.fb-stage-figure { width: 100%; display: flex; justify-content: center; }
.fb-stage-figure .timeline-thumb { width: auto; max-width: 100%; height: auto; max-height: 19vh; }
.fb-stage-figure .ex-figure { width: auto; max-width: 100%; height: auto; max-height: 19vh; display: block; }
.fb-stage-figure .ex-figure-emoji { font-size: clamp(48px, 10vh, 96px); text-align: center; line-height: 1.2; }

/* Campus-Arbeitssatz: statt einer generischen Deko-Figur zeigt dieser
   Block gross, was gerade zählt — Bewegungsart/Starthand als Klartext,
   plus welche Sprossen bzw. welches Muster dran ist. Muss auch aus
   einiger Distanz (Handy liegt am Boden) sofort erkennbar sein. Wichtiger
   als "mitten in der Bewegung ablesbar" ist aber: in den paar Sekunden
   davor merkbar, denn während der Bewegung schaut niemand aufs Handy. */
.campus-work-figure { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.campus-armline { text-align: center; }
.campus-armline-mode { font-family: 'Bebas Neue', sans-serif; font-size: clamp(19px, 4.5vh, 26px); letter-spacing: .02em; color: var(--ink); }
.campus-armline-hand {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin-left: 8px;
}
.campus-work-move {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 9vh, 76px); line-height: 1;
  color: var(--accent); display: flex; align-items: center; gap: 10px;
}
.campus-work-arrow { color: var(--ink-dim); font-size: .7em; }

/* Leiter-Grafik für Muster-Sätze: bildet den Weg am Board ab (welche
   Sprossen, in welcher Reihenfolge) statt abstrakter Vorzeichen-Kacheln —
   leichter zu merken in dem einen Blick, bevor man zum Board läuft. */
.campus-ladder-row { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 20px); }
.campus-ladder-svg { height: clamp(120px, 22vh, 190px); width: auto; overflow: visible; }
.campus-route { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.campus-route-step { display: flex; align-items: center; gap: 8px; font-size: clamp(12px, 3vw, 14px); color: var(--ink-dim); }
.campus-route-step b { color: var(--ink); font-family: 'Bebas Neue', sans-serif; font-size: 1.3em; font-weight: normal; letter-spacing: .02em; }
.campus-route-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.campus-route-dot.up { background: var(--accent); }
.campus-route-dot.down { background: var(--accent2); }

/* Von/Zu/Schrittweite-Baukasten (Campus-Add-Panel) */
.campus-step-hint { font-size: 11.5px; color: var(--ink-faint); margin: 6px 0 10px; }
.campus-step-preview {
  border: 1px dashed var(--line); background: var(--surface-2); padding: 10px 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.campus-step-preview .label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.campus-step-preview .route { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: var(--accent); letter-spacing: .02em; }
.campus-step-preview.error { color: var(--danger); font-size: 12.5px; justify-content: flex-start; text-align: left; }

/* Zielmuskeln-Übersicht: ein Körper-Umriss (vorne links, hinten rechts),
   Zonen werden je Übung ein-/ausgeblendet statt neu gezeichnet. */
.fb-muscle-block { margin-top: 0; text-align: center; }
.muscle-map { width: clamp(70px, 11vh, 150px); margin: 0 auto; display: block; }
.muscle-head { fill: var(--ink-faint); opacity: .3; }
.muscle-zone rect, .muscle-zone ellipse { fill: var(--ink-faint); opacity: .28; transition: fill .2s, opacity .2s; }
.muscle-zone.secondary rect, .muscle-zone.secondary ellipse { fill: var(--accent); opacity: .5; }
.muscle-zone.primary rect, .muscle-zone.primary ellipse { fill: var(--accent); opacity: .95; }
.fb-muscle-label { font-size: 10.5px; color: var(--ink-dim); margin-top: 6px; max-width: 260px; margin-left: auto; margin-right: auto; }

.fb-overlay-done { align-items: center; text-align: center; position: relative; overflow: hidden; }
.fb-done-emoji { font-size: 64px; animation: popIn .5s cubic-bezier(.25, 1.4, .4, 1) both; }
.fb-overlay-done .fb-stage-title { animation: riseIn .4s ease .1s both; }
.fb-overlay-done .fb-stage-sub { animation: riseIn .4s ease .18s both; }
.fb-overlay-done .fb-stage-btn { animation: riseIn .4s ease .26s both; }
.confetti-piece {
  position: absolute; top: -12px; width: 8px; height: 14px; opacity: .9;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  to { transform: translateY(115vh) rotate(var(--spin)); opacity: .3; }
}

/* ---------- Übungs-Strichmännchen (fig-*) ----------
   Farb-Code: gedämpft = bleibt fix, hell = bewegter Körperteil, Lime =
   der eigentliche Arbeitspunkt. Gestrichelte Linie + Pfeil zeigt die
   Bewegungsrichtung — verhindert z. B. Verwechslungen mit einer Drehung. */
.fig-pose { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.fig-pose circle { fill: var(--ink); stroke: none; }
.fig-pose.fig-fixed { stroke: var(--ink-faint); }
.fig-pose.fig-fixed circle { fill: var(--ink-faint); }
.fig-joint { fill: var(--ink-faint); }
.fig-joint.fig-mid { fill: var(--ink); }
.fig-joint.fig-hi { fill: var(--accent); }
.fig-motion { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 5 6; fill: none; opacity: .55; }
.fig-arrow { fill: var(--accent); opacity: .8; }
.fig-rig { stroke: var(--ink-dim); stroke-width: 3.5; fill: none; stroke-dasharray: 1 7; stroke-linecap: round; }
.fig-rig-dot { fill: var(--accent); stroke: none; }
.ex-figure-caption {
  font-size: 12.5px; color: var(--ink); text-align: center; max-width: 280px;
  margin: 2px auto 0; line-height: 1.45;
}
.fig-a { animation-name: figPoseA; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.fig-b { animation-name: figPoseB; animation-timing-function: ease-in-out; animation-iteration-count: infinite; opacity: 0; }
@keyframes figPoseA { 0%, 15% { opacity: 1; } 40%, 60% { opacity: 0; } 85%, 100% { opacity: 1; } }
@keyframes figPoseB { 0%, 15% { opacity: 0; } 40%, 60% { opacity: 1; } 85%, 100% { opacity: 0; } }
.fig-static { animation: figPulse 2.4s ease-in-out infinite; }
@keyframes figPulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }

@media (prefers-reduced-motion: reduce) {
  .fig-a { animation: none; opacity: 1; }
  .fig-b { animation: none; opacity: 0; }
  .fig-static { animation: none; }
  .fb-hang-figure, .fb-arm-shake { animation: none; }
  .ring-fg { transition: none; }
  .ring-fg.rest-warn, .fb-timer-ring .big.rest-warn { animation: none; }
  .fb-precount, .fb-precount-tense { animation: none; }
  .anim-in, .fb-done-emoji, .fb-overlay-done .fb-stage-title,
  .fb-overlay-done .fb-stage-sub, .fb-overlay-done .fb-stage-btn { animation: none; opacity: 1; transform: none; }
  .confetti-piece { display: none; }
  .qs-card:hover { transform: none; }
}