/* Scoreboard & Seitenspalten-Inhalte: Rangliste (.leaderboard/#hud/.card),
   Herzen/Zuege, Offline-/Ausgeschieden-Zustaende, Item-Legende, Zuschauerliste. */

#hud{
  display:flex;
  flex-direction:column;
  gap:10px;
  justify-content:flex-start;
}
.card{
  --pc:var(--p0);
  position:relative;
  width:100%;
  display:flex; align-items:center; gap:10px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:8px 10px; transition:box-shadow .2s, border-color .2s, transform .3s, opacity .92;
}
.card.animating {
  transition: transform 0.4s ease-in-out, box-shadow 0.2s, border-color 0.2s;
}
.card.active{
  border-color:var(--pc); opacity:1;
  box-shadow:0 0 0 1px var(--pc), 0 0 15px rgba(120,170,255,.25);
}
@keyframes cardReveal{
  from{opacity:0; transform:translateX(-16px) scale(.95)}
  to{opacity:.92; transform:none}
}
.card.reveal{animation:cardReveal .42s ease backwards}
.turn-arrow{
  position:absolute; left:-15px; top:50%;
  transform:translateY(-50%) translateX(-4px);
  color:var(--pc); font-size:14px; line-height:1;
  opacity:0; transition:opacity .2s, transform .2s; pointer-events:none;
  text-shadow:0 0 8px var(--pc);
}
.card.active .turn-arrow{opacity:1; transform:translateY(-50%)}
.rank-badge{
  position:absolute; top:-8px; left:-8px; width:22px; height:22px;
  background:var(--panel2); border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--ink); box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.mdot{
  width:18px; height:18px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 28%, #fff 0%, var(--pc) 36%, #000 165%);
  box-shadow:0 2px 3px rgba(0,0,0,.5);
}
/* Krone über der Murmel des letzten Rundensiegers (nur in der Lobby vergeben). */
.mdot.is-winner{ position:relative; overflow:visible; }
.mdot.is-winner::before{
  content:'👑'; position:absolute; left:50%; top:-10px;
  transform:translateX(-50%) rotate(-8deg); transform-origin:bottom center;
  font-size:13px; line-height:1; pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55));
}
.cmembers{display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-width:0}
.pmember{display:flex; align-items:center; gap:8px; min-width:0}
.pname{font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.pname em{font-style:normal; font-size:9px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 3px; margin-left:3px; vertical-align:1px}
.pturns{
  margin-left:auto; flex:none; min-width:38px; text-align:center;
  font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:.3px;
  color:var(--ink); background:rgba(255,255,255,.07);
  border:1.5px solid var(--line); border-radius:9px; padding:1px 7px;
  transition:background .15s, color .15s, transform .15s, border-color .15s;
}
.pmember.now .pname{color:#fff}
.pmember.now .pturns{background:var(--pc); color:#0a1626; border-color:transparent; transform:scale(1.1)}
/* Feste Breite (tabular-nums ⇒ jede Ziffer gleich breit): der Score darf die rechte Kante
   von .cmembers – und damit die Herz-Position – NICHT verschieben, egal ob '60' oder '120'. */
.cpts{
  font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; flex:none;
  min-width:3.2ch; text-align:right;
}

.plives{margin-left:auto; flex:none; display:flex; gap:4px; align-items:center; line-height:1}
.heart{
  font-size:19px; color:#ff4d6d; line-height:1; display:inline-block; transform-origin:center;
  text-shadow:0 0 6px rgba(255,60,100,.55), 0 1px 2px rgba(0,0,0,.5);
  transition:color .2s;
}
.heart.lost{color:rgba(255,255,255,.14); text-shadow:none}
/* Letztes verbleibendes Herz: dramatisch pulsierend */
.heart.last{color:#ff2d55; animation:heart-pulse .85s ease-in-out infinite}
@keyframes heart-pulse{
  0%,100%{transform:scale(1);   text-shadow:0 0 5px rgba(255,45,85,.5),  0 1px 2px rgba(0,0,0,.5)}
  50%    {transform:scale(1.28); text-shadow:0 0 14px rgba(255,45,85,.95), 0 0 22px rgba(255,45,85,.5)}
}
/* Ein Herz geht verloren: kurz aufblitzen, zerspringen, dann ausgrauen */
.heart.losing{animation:heart-lose .6s ease-out both}
@keyframes heart-lose{
  0%  {transform:scale(1.35) rotate(0);    color:#ff2d55; opacity:1;   text-shadow:0 0 16px rgba(255,45,85,1)}
  25% {transform:scale(1.5)  rotate(-8deg); color:#ff2d55; opacity:1}
  55% {transform:scale(.55)  rotate(10deg); color:#ff4d6d; opacity:.7}
  100%{transform:scale(1)    rotate(0);    color:rgba(255,255,255,.14); opacity:1; text-shadow:none}
}
.ko-tag{
  margin-left:auto; flex:none; font-size:8.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:1px 5px;
}
.pmember.benched{opacity:.45}
.pmember.benched .pturns{opacity:.6}
.pmember.benched .pname::after{content:'⏸'; font-size:10px; color:var(--muted); margin-left:5px; vertical-align:1px}
.pmember.eliminated{opacity:.5}
.pmember.eliminated .pname{text-decoration:line-through; color:var(--muted)}
.card.eliminated{opacity:.5; filter:grayscale(.6)}
.rrow.eliminated{opacity:.55}
.rrow .cpts.ko{font-size:16px; color:var(--muted)}

.off-ico{display:none; align-items:center; flex:none; color:#ff6b6b; margin-left:2px}
.pmember.offline{opacity:.55}
.pmember.offline .pname{color:#ffb0b0}
.pmember.offline .off-ico{display:inline-flex}
.card.offline{
  opacity:.62; border-color:rgba(255,93,93,.42);
  box-shadow:inset 0 0 0 1px rgba(255,93,93,.2), 0 0 14px rgba(255,93,93,.12);
}
.card.offline .mdot{filter:grayscale(.45)}

#itemLegend{
  background:rgba(15,22,34,.92); border:1px solid var(--line); border-radius:14px;
  padding:13px 15px; font-size:13px; line-height:1.45;
  backdrop-filter:blur(4px); box-shadow:0 6px 24px rgba(0,0,0,.45);
  width:100%;
}
.leg-title{
  font-family:var(--display); font-weight:900; font-size:13px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.leg-row{display:flex; gap:9px; align-items:flex-start; margin-bottom:5px}
.leg-row:last-child{margin-bottom:0}
.leg-ico{width:20px; font-size:15px; text-align:center; flex:none}
.leg-txt{color:var(--muted)}
.leg-txt b{font-weight:700; color:var(--ink)}

#spectators{
  display:flex; flex-direction:column; gap:6px;
}
#spectators[hidden]{ display:none !important; }
.spec-row{
  display:flex; align-items:center; gap:7px;
  background:var(--panel); border:1px dashed var(--line); border-radius:10px;
  padding:5px 9px; opacity:.62;
}
.spec-eye{font-size:12px; flex:none; filter:grayscale(.4)}
.spec-nm{
  font-size:12.5px; font-weight:600; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1;
}
.spec-tag{
  flex:none; font-style:normal; font-size:8.5px; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:5px; padding:1px 4px;
}

.leaderboard {
  background: rgba(15, 22, 34, 0.92);
  border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 15px;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
}
.leaderboard .leg-title { margin-bottom: 10px; }