/* Kurvenflitzer – ergänzt ../css/tv.css (Weinrot-Dashboard) */


.mini-join { display: none !important; }

/* ---------- Gemeinsame Anzeige ---------- */
.hud { top: 0; bottom: 0; display: block; }
.hud .time {
  position: absolute; left: 50%; top: calc(2.4 * var(--u)); transform: translateX(-50%);
  flex-direction: row; align-items: center; gap: calc(.8 * var(--u)); min-width: 0;
  padding: calc(.6 * var(--u)) calc(.6 * var(--u)) calc(.6 * var(--u)) calc(2.2 * var(--u)); border-radius: 999px;
}
.hud .time .label { display: none; }
.hud .time .value { font-size: calc(3 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.hud .time .gap { background: var(--wine-600); color: var(--cream); border-radius: 999px; padding: calc(.6 * var(--u)) calc(1.4 * var(--u)); font-weight: 600; font-size: calc(1.6 * var(--u)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud .time .gap:empty { display: none; }
.minimap {
  position: absolute; right: calc(2.4 * var(--u)); top: calc(2.4 * var(--u));
  width: calc(22 * var(--u)); height: calc(22 * var(--u));
  background: var(--glass); border-radius: calc(3 * var(--u)); box-shadow: var(--shadow);
}
body.split .minimap { right: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
body.split .hud .time { top: calc(50% + 9.5 * var(--u)); }
body.split .hud .time .gap { display: none; }
body.split.three .minimap { left: 75%; top: 75%; width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
body.split.three .hud .time { left: 75%; top: calc(75% + 18 * var(--u)); }
body.st-race .corner, body.st-race .status, body.st-countdown .corner, body.st-countdown .status, body.st-results .status { opacity: 0; pointer-events: none; }

/* ---------- Anzeige pro Spieler ---------- */
/* Rückspiegel: das Bild zeichnet WebGL genau in dieses Feld, hier nur der Rahmen */
.pmirror {
  position: absolute; left: 50%; top: calc(9 * var(--u)); transform: translateX(-50%) scale(.9); opacity: 0;
  width: calc(46 * var(--u)); height: calc(14 * var(--u)); border-radius: calc(1.2 * var(--u));
  box-shadow: 0 0 0 calc(.8 * var(--u)) var(--wine-800), 0 0 0 calc(1.1 * var(--u)) var(--wine-500), 0 calc(1.6 * var(--u)) calc(3 * var(--u)) rgba(42, 14, 17, .45);
  transition: opacity .25s, transform .25s;
}
.pmirror::after { content: ''; position: absolute; left: 50%; top: calc(-2.2 * var(--u)); width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); transform: translateX(-50%); background: var(--wine-800); border-radius: calc(.4 * var(--u)); }
.pmirror.show { opacity: 1; transform: translateX(-50%) scale(1); }
body.split .pmirror { top: calc(3.6 * var(--u)); width: calc(40 * var(--u)); height: calc(12.5 * var(--u)); }
.phud.mirror-on .pfx { top: calc(25.5 * var(--u)); }
body.split .phud.mirror-on .pfx { top: calc(19 * var(--u)); }

#phuds { position: absolute; inset: 0; pointer-events: none; }
.phud { position: absolute; overflow: hidden; opacity: 0; transition: opacity .4s; }
.phud.show { opacity: 1; }
body.split .phud { box-shadow: inset 0 0 0 calc(.3 * var(--u)) var(--wine-800); }
.pleft { position: absolute; left: calc(2.4 * var(--u)); top: calc(2.4 * var(--u)); display: flex; flex-direction: column; gap: calc(1.2 * var(--u)); align-items: flex-start; }
.ptag {
  display: inline-flex; align-items: center; gap: calc(1 * var(--u));
  font-weight: 700; font-size: calc(2.2 * var(--u)); color: #fff;
  background: var(--c); border-radius: 999px; padding: calc(.5 * var(--u)) calc(2 * var(--u)) calc(.5 * var(--u)) calc(.5 * var(--u));
  box-shadow: 0 6px 16px rgba(42, 14, 17, .35);
}
.ptag .src { width: calc(3.8 * var(--u)); height: calc(3.8 * var(--u)); border-radius: 50%; background: var(--wine-800); display: grid; place-items: center; }
.ptag .src svg { width: 55%; height: 55%; }
.pstats { display: flex; align-items: flex-end; gap: calc(2 * var(--u)); background: var(--glass); border-radius: calc(2.8 * var(--u)); padding: calc(1.4 * var(--u)) calc(2.2 * var(--u)); box-shadow: var(--shadow); }
.pstats .lbl { font-size: calc(1.3 * var(--u)); color: var(--text-mute); }
.pstats .num { font-size: calc(5.4 * var(--u)); font-weight: 800; line-height: 1; color: #fff; }
.pstats .num small { font-size: .4em; color: var(--text-mute); font-weight: 600; margin-left: .15em; }
.pstats .sep { width: 1px; align-self: stretch; background: var(--wine-500); }
.pchange { font-weight: 700; font-size: calc(1.4 * var(--u)); padding: calc(.3 * var(--u)) calc(1 * var(--u)); border-radius: 999px; margin-bottom: calc(.9 * var(--u)); opacity: 0; transition: opacity .3s; }
.pchange.up { background: var(--green); color: #1f4a28; opacity: 1; }
.pchange.down { background: var(--coral); color: #fff; opacity: 1; }

.pbottom { position: absolute; left: calc(2.4 * var(--u)); bottom: calc(2.4 * var(--u)); display: flex; flex-direction: column; gap: calc(1 * var(--u)); align-items: flex-start; }
.pcoins {
  display: inline-flex; align-items: center; gap: calc(.9 * var(--u));
  background: var(--cream); color: var(--wine-600); border-radius: 999px; padding: calc(.7 * var(--u)) calc(2 * var(--u)) calc(.7 * var(--u)) calc(.9 * var(--u));
  font-weight: 800; font-size: calc(2.6 * var(--u)); box-shadow: 0 calc(.6 * var(--u)) 0 var(--cream-dark);
}
.pcoins svg { width: calc(3 * var(--u)); height: calc(3 * var(--u)); }
.pcoins.bump { animation: bump .32s cubic-bezier(.3, 1.6, .5, 1); }
.pturbo { display: inline-flex; align-items: center; gap: calc(1.2 * var(--u)); background: var(--glass); border-radius: 999px; padding: calc(.9 * var(--u)) calc(2 * var(--u)) calc(.9 * var(--u)) calc(1.2 * var(--u)); box-shadow: var(--shadow); font-weight: 600; font-size: calc(1.6 * var(--u)); color: #fff; }
.pturbo svg { width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); }
.pturbo .seg { display: flex; gap: calc(.4 * var(--u)); }
.pturbo .seg i { width: calc(2 * var(--u)); height: calc(1.3 * var(--u)); border-radius: calc(.4 * var(--u)); background: var(--wine-600); transition: background .2s; }
.pturbo .seg i.on { background: var(--cream); }
.pturbo.boosting { background: var(--blue); }
.pturbo.boosting .seg i { background: #fff; }

.speedo {
  position: absolute; right: calc(2.4 * var(--u)); bottom: calc(2.4 * var(--u));
  width: calc(20 * var(--u)); height: calc(20 * var(--u)); display: grid; place-items: center;
  background: var(--glass); border-radius: 50%; box-shadow: var(--shadow);
}
.speedo svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(135deg); }
.speedo .track { fill: none; stroke: var(--wine-600); stroke-width: 9; stroke-dasharray: 235.6 314.2; stroke-linecap: round; }
.speedo .bar { fill: none; stroke: var(--coral); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 314.2; transition: stroke .3s; }
.speedo.boosting .bar { stroke: var(--blue); }
.speedo .ticks { stroke: #c99696; stroke-width: 2; stroke-linecap: round; }
.speed-num { position: relative; text-align: center; line-height: 1; }
.speed-num b { display: block; font-weight: 800; font-size: calc(5.2 * var(--u)); font-variant-numeric: tabular-nums; color: #fff; }
.speed-num small { font-size: calc(1.4 * var(--u)); color: var(--text-mute); }

.pwheel {
  position: absolute; left: 50%; top: 50%; width: calc(13 * var(--u)); height: calc(13 * var(--u));
  transform: translate(-50%, -50%) scale(.8); color: var(--cream); opacity: 0;
  filter: drop-shadow(0 6px 16px rgba(42, 14, 17, .45)); transition: opacity .3s, transform .3s;
}
.pwheel.show { opacity: .95; transform: translate(-50%, -50%) scale(1); animation: wiggle 1.2s ease-in-out infinite; }
@keyframes wiggle { 25% { rotate: -18deg; } 75% { rotate: 18deg; } }

/* Start-Ampel */
.lights {
  position: absolute; left: 50%; top: 24%; transform: translateX(-50%);
  display: flex; gap: calc(2 * var(--u)); padding: calc(1.6 * var(--u)) calc(2.4 * var(--u));
  background: var(--glass); border-radius: 999px; box-shadow: var(--shadow);
  opacity: 0; transition: opacity .3s;
}
body.split .lights { top: 50%; transform: translate(-50%, -50%); }
.lights.show { opacity: 1; }
.lights span { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--wine-600); transition: background .15s, box-shadow .15s; }
.lights span.on { background: var(--coral); box-shadow: 0 0 calc(3 * var(--u)) var(--coral); }
.lights.go span { background: var(--green); box-shadow: 0 0 calc(3 * var(--u)) var(--green); }

/* ---------- Items ---------- */
.pitems { display: none; align-items: center; gap: calc(.8 * var(--u)); background: var(--glass); border-radius: 999px; padding: calc(.7 * var(--u)) calc(1.6 * var(--u)) calc(.7 * var(--u)) calc(.7 * var(--u)); box-shadow: var(--shadow); }
.pitems.show { display: inline-flex; }
.pitems .islot { width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); border-radius: 50%; background: var(--wine-600); display: grid; place-items: center; box-shadow: inset 0 0 0 calc(.35 * var(--u)) var(--wine-500); }
.pitems .islot.full { background: var(--c); box-shadow: inset 0 0 0 calc(.35 * var(--u)) rgba(255, 255, 255, .5), 0 calc(.4 * var(--u)) 0 var(--wine-800); }
.pitems .islot svg { width: 58%; height: 58%; }
.pitems .hint { font-size: calc(1.4 * var(--u)); font-weight: 600; color: var(--text-mute); white-space: nowrap; }
.pitems.has .hint { color: var(--cream); animation: nudge 1.4s ease-in-out infinite; }
.pitems.has .hint::before { content: '↓↓ '; }
@keyframes nudge { 50% { transform: translateY(calc(.5 * var(--u))); } }

.pfx {
  position: absolute; left: 50%; top: calc(13 * var(--u)); transform: translate(-50%, -20%) scale(.9); opacity: 0;
  display: flex; align-items: center; gap: calc(1.2 * var(--u)); padding: calc(.7 * var(--u)) calc(2.4 * var(--u)) calc(.7 * var(--u)) calc(.7 * var(--u));
  background: var(--c, var(--coral)); color: #fff; border-radius: 999px; font-weight: 700; font-size: calc(2.2 * var(--u)); white-space: nowrap;
  box-shadow: 0 calc(.6 * var(--u)) 0 var(--wine-800), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(42, 14, 17, .35);
  transition: opacity .25s, transform .25s;
}
body.split .pfx { top: calc(17 * var(--u)); }
.pfx.show { opacity: 1; transform: translate(-50%, 0) scale(1); animation: fxpulse 1s ease-in-out infinite; }
@keyframes fxpulse { 50% { transform: translate(-50%, 0) scale(1.04); } }
.pfx .ic { width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); border-radius: 50%; background: var(--wine-800); display: grid; place-items: center; }
.pfx .ic svg { width: 60%; height: 60%; }
.pfx .cr { display: flex; gap: calc(.5 * var(--u)); }
.pfx .cr:empty { display: none; }
.pfx .cr i { width: calc(1.8 * var(--u)); height: calc(1.8 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .35); }
.pfx .cr i.on { background: #fff; }

/* Item-Menü (beide Arme runter) */
.paim {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  background: radial-gradient(ellipse at 50% 60%, rgba(61, 20, 24, .55), rgba(42, 14, 17, .88));
}
.paim.show { opacity: 1; visibility: visible; }
.aim-head { position: absolute; left: 0; right: 0; top: 5%; text-align: center; }
.aim-title { font-weight: 800; font-size: calc(4.6 * var(--u)); color: #fff; }
.aim-sub { margin-top: calc(.4 * var(--u)); font-size: calc(1.7 * var(--u)); color: var(--text-soft); }
.aim-targets, .aim-items { position: absolute; inset: 0; }
.aim-t {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: calc(.6 * var(--u));
  background: var(--wine-700); border-radius: calc(2.4 * var(--u)); padding: calc(1.6 * var(--u)) calc(1 * var(--u)) calc(1.4 * var(--u));
  box-shadow: inset 0 0 0 calc(.35 * var(--u)) var(--wine-500), 0 calc(1.2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .3);
  color: #fff; transition: transform .15s, box-shadow .15s, background .15s;
}
.aim-t b { font-size: calc(2 * var(--u)); font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aim-t .pl { font-size: calc(1.4 * var(--u)); color: var(--text-mute); font-weight: 600; }
.aim-t .kd { width: calc(6 * var(--u)); height: calc(3.6 * var(--u)); border-radius: calc(1.8 * var(--u)) calc(1.8 * var(--u)) calc(.8 * var(--u)) calc(.8 * var(--u)); background: var(--c); box-shadow: inset 0 calc(-.6 * var(--u)) 0 rgba(0, 0, 0, .2); }
.aim-t .ring { position: absolute; left: calc(1.4 * var(--u)); right: calc(1.4 * var(--u)); bottom: calc(.8 * var(--u)); height: calc(.7 * var(--u)); border-radius: 999px; background: var(--wine-800); overflow: hidden; opacity: 0; }
.aim-t .ring::after { content: ''; position: absolute; inset: 0; width: calc(var(--d, 0) * 100%); background: var(--cream); border-radius: inherit; }
.aim-t.hover .ring { opacity: 1; }
.aim-t.hover { transform: translate(-50%, -50%) scale(1.1); background: var(--wine-600); box-shadow: inset 0 0 0 calc(.45 * var(--u)) var(--cream), 0 calc(1.2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .3); }
.aim-i {
  position: absolute; transform: translate(-50%, -50%); width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%;
  background: var(--c); display: grid; place-items: center; box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgba(255, 255, 255, .45), 0 calc(.8 * var(--u)) 0 var(--wine-800);
  transition: left .05s linear, top .05s linear, transform .2s;
}
.aim-i svg { width: 52%; height: 52%; }
.aim-i span { position: absolute; top: 104%; font-size: calc(1.6 * var(--u)); font-weight: 700; color: #fff; white-space: nowrap; }
.aim-i.hover { transform: translate(-50%, -50%) scale(1.12); }
.aim-i.grabbed { transform: translate(-50%, -50%) scale(.85) rotate(-8deg); box-shadow: inset 0 0 0 calc(.5 * var(--u)) #fff, 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .45); z-index: 2; transition: transform .2s; }
.aim-i.grabbed span { display: none; }
.aim-cursor { position: absolute; width: calc(6 * var(--u)); height: calc(6 * var(--u)); transform: translate(-30%, -20%); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); z-index: 3; }
.aim-cursor svg { width: 100%; height: 100%; }

/* 3-2-1 nach dem Item-Menü: Autopilot gibt das Steuer zurück */
.phand { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u)); opacity: 0; transition: opacity .2s; pointer-events: none; }
.phand.show { opacity: 1; }
.phand b { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--wine-600); font-size: calc(8 * var(--u)); font-weight: 800; box-shadow: 0 calc(.8 * var(--u)) 0 var(--coral-dark), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(42, 14, 17, .35); }
.phand.tick b { animation: hb .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hb { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
.phand span { background: var(--glass); color: #fff; font-weight: 700; font-size: calc(2 * var(--u)); padding: calc(.7 * var(--u)) calc(2 * var(--u)); border-radius: 999px; box-shadow: var(--shadow); white-space: nowrap; }

/* Schutz nach einem Treffer (20 s) */
.pfx.safe { background: var(--glass); animation: none; transform: translate(-50%, 0) scale(.85); box-shadow: var(--shadow); }
.pfx.safe .ic { background: var(--green); }
.aim-t .sf { position: absolute; left: 50%; bottom: calc(-1.2 * var(--u)); transform: translateX(-50%); font-style: normal; font-size: calc(1.3 * var(--u)); font-weight: 700; white-space: nowrap; background: var(--green); color: #1f4a28; border-radius: 999px; padding: calc(.2 * var(--u)) calc(1 * var(--u)); }
.aim-t .sf:empty { display: none; }
.aim-t.safe { opacity: .5; filter: grayscale(.6); }


body.capture #ui { display: none !important; }