/* workout3d.css — Overlay & HUD für das 3D Workout-Replay (additiv) */

/* Trigger-Button (sitzt in den App-Detail-Modals) */
.wk3-open-btn {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: #fff; border: none; border-radius: 999px; padding: 10px 20px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.35);
  transition: transform .14s ease, box-shadow .14s ease;
}
.wk3-open-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(124, 58, 237, 0.45); }
.laps-section h3 .wk3-open-btn { float: right; margin-top: -4px; }

/* Geist-Rennen-Button (in den App-Detail-Modals) */
.wk3-ghost-btn {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; margin-left: 8px;
  color: #fff; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: 10px 18px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.3);
  transition: transform .14s ease, box-shadow .14s ease;
}
.wk3-ghost-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(14, 165, 233, 0.45); }

#wk3Toast {
  position: fixed; z-index: 10000; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(12, 18, 28, 0.82); color: #eef2f8; font-family: Inter, system-ui, sans-serif;
  font-size: 14px; font-weight: 700; padding: 16px 26px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

#wk3Overlay {
  --wk-glass: rgba(12, 18, 28, 0.55);
  --wk-border: rgba(255, 255, 255, 0.10);
  --wk-ink: #eef2f8;
  --wk-ink2: #9aa7bd;
  --wk-grad: linear-gradient(135deg, #7c3aed, #a855f7);
  position: fixed; inset: 0; z-index: 9999; display: none;
  background: #05080d;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--wk-ink);
}
#wk3Overlay.show { display: block; }
#wk3Canvas { position: absolute; inset: 0; }

/* gemeinsame Glas-Optik */
#wk3Overlay .wk3-title,
#wk3Overlay .wk3-rep,
#wk3Overlay .wk3-m,
#wk3Overlay .wk3-split,
#wk3Overlay .wk3-ctrl,
#wk3Overlay .wk3-close {
  background: var(--wk-glass);
  border: 1px solid var(--wk-border);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}

.wk3-top { position: absolute; top: 22px; left: 22px; right: 22px; display: flex; align-items: center; gap: 12px; }
.wk3-title { font-size: 15px; font-weight: 800; padding: 11px 18px; border-radius: 999px; }
.wk3-rep { font-size: 13px; font-weight: 700; color: var(--wk-ink2); padding: 11px 18px; border-radius: 999px; }
.wk3-rep b { color: var(--wk-ink); font-size: 18px; font-variant-numeric: tabular-nums; }
.wk3-close { margin-left: auto; width: 42px; height: 42px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--wk-ink2); cursor: pointer; transition: all .15s ease; }
.wk3-close:hover { color: #fff; border-color: #ef4444; }

.wk3-metrics { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); display: grid; gap: 12px; }
.wk3-m { border-radius: 16px; padding: 14px 18px; min-width: 132px; }
.wk3-m span { display: block; font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.wk3-m label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wk-ink2); }

.wk3-splits { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 196px; max-height: 64vh; overflow: auto; display: grid; gap: 6px; }
.wk3-split { border-radius: 10px; padding: 9px 13px; font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px; transition: all .15s ease; }
.wk3-split span { color: var(--wk-ink2); }
.wk3-split b { color: var(--wk-ink); font-variant-numeric: tabular-nums; font-size: 11px; }
.wk3-split.cur { border-color: transparent; background: var(--wk-grad); }
.wk3-split.cur span, .wk3-split.cur b { color: #fff; }

.wk3-ctrl { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 7px; border-radius: 999px; }
.wk3-ctrl > button, .wk3-spd button { font: inherit; font-size: 13px; font-weight: 700; border: none; background: transparent; color: var(--wk-ink2); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: all .14s ease; }
.wk3-ctrl > button:hover, .wk3-spd button:hover { color: #fff; }
.wk3-spd { display: inline-flex; gap: 2px; }
.wk3-spd button { padding: 8px 11px; }
.wk3-spd button.active { background: var(--wk-grad); color: #fff; }

@media (max-width: 720px) {
  .wk3-metrics { top: auto; bottom: 84px; transform: none; grid-template-columns: 1fr 1fr; left: 16px; right: 16px; }
  .wk3-splits { display: none; }
  .wk3-m { min-width: 0; }
}

/* ---- Geist-Rennen Leaderboard ---- */
#wk3Overlay .wk3-race { display: none; }
#wk3Overlay.race .wk3-splits { display: none; }
#wk3Overlay.race .wk3-race {
  display: grid; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 214px; gap: 6px; max-height: 70vh; overflow: auto; align-content: start;
}
.wk3-race-hd { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wk-ink2); padding: 2px 2px 6px; }
.wk3-rank {
  display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 10px; font-size: 12px;
  background: var(--wk-glass); border: 1px solid var(--wk-border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.wk3-rank.you { border-color: transparent; background: linear-gradient(135deg, rgba(124,58,237,.92), rgba(168,85,247,.92)); }
.wk3-pos { width: 14px; font-weight: 800; color: var(--wk-ink2); font-variant-numeric: tabular-nums; }
.wk3-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 8px currentColor; }
.wk3-lbl { flex: 1; font-weight: 600; color: var(--wk-ink); }
.wk3-gap { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--wk-ink2); }
.wk3-rank.you .wk3-pos, .wk3-rank.you .wk3-lbl, .wk3-rank.you .wk3-gap { color: #fff; }