:root {
  --purple: #6a2bd4;
  --purple-deep: #3a1378;
  --purple-ink: #1c0b3d;
  --gold: #f5b81c;
  --gold-deep: #c98a00;
  --white: #ffffff;
  --black: #08060d;
  --panel: #120a24;
  --panel-2: #1d1138;
  --line: rgba(255, 255, 255, 0.12);
  --muted: #b9aed6;
  --good: #2fd27a;
  --bad: #ff4d5e;
  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-body: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}

* { box-sizing: border-box; }

.display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }

/* ---------- player cards (overlay, host preview) ---------- */
.card {
  position: relative;
  background: linear-gradient(160deg, var(--panel-2), var(--panel) 70%);
  border: 3px solid var(--gold);
  border-radius: 10px;
  overflow: hidden;
  color: var(--white);
  font-family: var(--font-body);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.card .stripe { height: 10px; background: var(--team, var(--purple)); }
.card .head { display: flex; align-items: center; gap: 14px; padding: 14px 18px 6px; }
.card .badge {
  flex: none; display: grid; place-items: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--team, var(--purple));
  border: 3px solid var(--white);
  font-family: var(--font-display); font-size: 26px;
}
.card .badge.photo {
  overflow: hidden; place-items: end center;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.25), transparent 70%), var(--team, var(--purple));
}
.card .badge.photo img { width: 112%; height: 112%; object-fit: cover; object-position: top center; }
.card .name { font-family: var(--font-display); font-size: 40px; line-height: 1; text-transform: uppercase; }
.card .sub { font-size: 24px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.card .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 8px 12px 12px; }
.card .stat { background: rgba(255, 255, 255, 0.05); padding: 8px 8px 6px; text-align: center; }
.card .stat b { display: block; font-family: var(--font-display); font-size: 40px; color: var(--gold); line-height: 1.05; }
.card .stat span { font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.card .meter { margin: 0 18px 14px; height: 12px; background: rgba(255, 255, 255, 0.1); border-radius: 6px; overflow: hidden; }
.card .meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.card .tag {
  position: absolute; top: 20px; right: 14px;
  padding: 4px 10px; border-radius: 4px;
  font-family: var(--font-display); font-size: 20px;
  background: var(--bad); color: var(--white);
}
.card .tag.q { background: var(--gold); color: var(--black); }
.card.missing .stats { display: none; }
.card .missing-note { padding: 4px 18px 16px; font-size: 22px; color: var(--muted); }