/* ConductJemp: Bühne mit Kamera, Schlagfigur und Spur */
.view { max-width: 980px; margin: 0 auto; padding-bottom: 32px; }
.top { max-width: 980px; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0 12px; }
.seg svg { display: block; }
.seg button { display: inline-flex; align-items: center; justify-content: center; }

.stagewrap { position: relative; aspect-ratio: 4 / 3; max-height: calc(100vh - 230px); width: 100%; margin: 0 auto; background: var(--surface); border-radius: 18px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
@supports (aspect-ratio: 4 / 3) { .stagewrap { max-width: calc((100vh - 230px) * 4 / 3); } }
#video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: .32; filter: saturate(.4); }
#video:not([src]):not(.on) { display: none; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.beatnum { position: absolute; left: 18px; top: 10px; font: 700 64px/1 var(--font-display); color: var(--brass); opacity: 0; transition: opacity .5s; pointer-events: none; font-variant-numeric: tabular-nums; }
.beatnum.on { opacity: .95; transition: none; }
.beatnum.muted { color: var(--muted); }
.start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #0f1311cc; }
.start .pbtn { gap: 8px; }
.err { color: var(--bad); font-size: 13px; max-width: 40ch; text-align: center; padding: 0 16px; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.stats > div { background: var(--surface); border-radius: 12px; padding: 8px 12px; }
.stats b { display: block; font: 600 22px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.stats b.ok { color: var(--ok); }
.stats b.bad { color: var(--bad); }

.result { margin-top: 12px; background: var(--surface); border-radius: 16px; padding: 14px 16px; }
.result .rhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.result h2 { font-size: 22px; }
.result .nums { display: flex; gap: 18px; font: 500 13px var(--font-mono); color: var(--muted); flex-wrap: wrap; }
.result .nums b { color: var(--fg); }
.result svg { display: block; width: 100%; height: 110px; margin-top: 10px; }
.result .curve { fill: none; stroke: var(--brass); stroke-width: 2; vector-effect: non-scaling-stroke; }
.result .grid { stroke: var(--line2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.result .dot-bad { fill: var(--bad); }
.result .actions { margin-top: 10px; display: flex; gap: 8px; }

@media (max-width: 640px) {
  .stats b { font-size: 18px; }
  .stats > div { padding: 6px 10px; }
  .beatnum { font-size: 48px; }
}
@media (max-width: 440px) { .top { gap: 8px; } .top .brand span { display: none; } }
.bar-r { display: flex; gap: 8px; }
#handSeg button { font: 600 13px var(--font-mono); min-width: 34px; }
.legal-foot { display: flex; justify-content: flex-end; gap: 2px; margin-top: 14px; }
a.gbtn { text-decoration: none; }