/* HUD overlays. Self-contained: fixed pixels, own colours, works on a transparent page in OBS. */
.hud { --h-bg: rgba(8,5,14,.86); --h-line: rgba(217,70,239,.45); --h-fg: #f5f0ff; --h-dim: #a99fc0; --h-acc: #d946ef; --h-acc2: #7c3aed; --h-up: #4ade80; --h-down: #fb7185;
  --h-cut: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 18px; color: var(--h-fg); font: 700 22px/1.15 "Manrope", system-ui, sans-serif;
  background: var(--h-bg); border: 1px solid var(--h-line); padding: 16px 22px; clip-path: var(--h-cut); white-space: nowrap; text-align: left; }
.hud *, .hud *::before { box-sizing: border-box; }
.hud i, .hud em { font-style: normal; }
.hud .up, .hud .up b, .hud .w { color: var(--h-up); }
.hud .down, .hud .down b, .hud .l { color: var(--h-down); }
.h-icon { width: 84px; height: 84px; flex: none; object-fit: contain; filter: drop-shadow(0 0 14px rgba(217,70,239,.45)); }
.h-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.h-line { display: flex; align-items: baseline; gap: 14px; }
.h-name { font: 400 24px "Dela Gothic One", "Manrope", sans-serif; }
.h-name i { color: var(--h-dim); font: 700 16px "JetBrains Mono", monospace; margin-left: 6px; }
.h-rank { font: 400 26px "Dela Gothic One", "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .5px; }
.h-rr { font: 700 20px "JetBrains Mono", monospace; color: var(--h-dim); }
.h-rr b { color: var(--h-fg); font-size: 1.35em; }
.h-top { font: 700 18px "JetBrains Mono", monospace; color: var(--h-acc); }
.h-bar { display: block; height: 8px; min-width: 200px; background: rgba(255,255,255,.1); }
.h-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--h-acc2), var(--h-acc)); box-shadow: 0 0 12px var(--h-acc); }
.h-stats { display: flex; gap: 22px; align-items: flex-end; }
.h-wl { font: 700 24px "JetBrains Mono", monospace; }
.h-stat { display: inline-flex; flex-direction: column; gap: 2px; }
.h-stat b { font: 700 24px "JetBrains Mono", monospace; }
.h-stat i { font: 700 11px "JetBrains Mono", monospace; letter-spacing: 1.5px; text-transform: uppercase; color: var(--h-dim); }
.h-l5 { display: inline-flex; gap: 5px; }
.h-l5 i, .h-game > i { width: 28px; height: 28px; display: grid; place-items: center; font: 700 13px "JetBrains Mono", monospace; color: #0b0612; background: var(--h-dim); }
.h-l5 i.w, .h-game > i.w { background: var(--h-up); color: #0b0612; }
.h-l5 i.l, .h-game > i.l { background: var(--h-down); color: #0b0612; }
.h-game { display: inline-flex; align-items: center; gap: 10px; font: 700 17px "JetBrains Mono", monospace; color: var(--h-dim); }
.h-game b { color: var(--h-fg); }
.h-arc .bg { stroke: rgba(255,255,255,.12); }
.h-arc .fg { stroke: var(--h-acc); stroke-linecap: butt; filter: drop-shadow(0 0 6px var(--h-acc)); }
.h-dial { position: relative; display: grid; place-items: center; flex: none; }

/* 1 full */
.hud-full { padding: 20px 26px; gap: 22px; }
.hud-full .h-icon { width: 120px; height: 120px; }
/* 2 compact */
.hud-compact { gap: 20px; padding: 12px 20px; }
.hud-compact .h-icon { width: 64px; height: 64px; }
.hud-compact .h-bar { min-width: 160px; height: 6px; }
/* 3 card */
.hud-card { flex-direction: column; text-align: center; padding: 26px 30px; gap: 12px; min-width: 300px; }
.hud-card .h-icon { width: 140px; height: 140px; }
.hud-card .h-bar { align-self: stretch; }
.hud-card .h-line, .hud-card .h-stats { justify-content: center; }
/* 4 strip */
.hud-strip { gap: 24px; padding: 10px 24px; clip-path: none; border-width: 0 0 2px; border-color: var(--h-acc); background: linear-gradient(90deg, rgba(8,5,14,.92), rgba(30,12,48,.86)); }
.hud-strip .h-icon { width: 52px; height: 52px; }
.hud-strip .h-stat { flex-direction: row; align-items: baseline; gap: 7px; }
/* 5 mini */
.hud-mini { gap: 12px; padding: 8px 16px; }
.hud-mini .h-icon { width: 44px; height: 44px; }
.hud-mini .h-wl { font-size: 20px; }
/* 6 vertical */
.hud-vertical { flex-direction: column; gap: 12px; padding: 22px 18px; width: 190px; text-align: center; white-space: normal; }
.hud-vertical .h-icon { width: 110px; height: 110px; }
.hud-vertical .h-rank { font-size: 20px; }
.hud-vertical .h-bar { min-width: 0; align-self: stretch; }
.hud-vertical .h-stat { align-items: center; }
/* 7 cam: a caption under the webcam */
.hud-cam { width: 480px; padding: 10px 16px; gap: 14px; clip-path: none; border-width: 0; border-left: 4px solid var(--h-acc); background: linear-gradient(90deg, rgba(8,5,14,.94), rgba(8,5,14,.55)); }
.hud-cam .h-icon { width: 56px; height: 56px; }
.hud-cam .h-col { gap: 3px; flex: 1; }
.hud-cam .h-name { font-size: 19px; overflow: hidden; text-overflow: ellipsis; }
.hud-cam .h-rank { font: 700 15px "JetBrains Mono", monospace; color: var(--h-dim); }
.hud-cam .h-rr { font-size: 14px; }
.hud-cam .h-stat i { display: none; }
/* 8 badge */
.hud-badge { flex-direction: column; gap: 4px; width: 170px; height: 170px; justify-content: center; border-radius: 50%; clip-path: none; padding: 10px; border-width: 2px; }
.hud-badge .h-icon { width: 78px; height: 78px; }
.hud-badge .h-wl { font-size: 17px; }
/* 9 gauge */
.hud-gauge { flex-direction: column; gap: 12px; padding: 24px 28px 20px; text-align: center; }
.hud-gauge .h-dial { width: 260px; height: 139px; }
.hud-gauge .h-dial .h-arc { position: absolute; inset: 0; }
.hud-gauge .h-dial .h-icon { width: 86px; height: 86px; margin-top: 22px; }
.hud-gauge .h-dial .h-rr { position: absolute; bottom: -4px; background: var(--h-bg); padding: 0 8px; }
/* 10 feed */
.hud-feed { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 22px; border-width: 0 0 0 3px; border-color: var(--h-acc); clip-path: none; }
.hud-feed .h-icon { width: 46px; height: 46px; align-self: center; }
.hud-feed .h-line { align-items: center; }
/* 11 ring */
.hud-ring { gap: 20px; padding: 16px 26px 16px 16px; }
.hud-ring .h-dial { width: 150px; height: 150px; }
.hud-ring .h-dial .h-arc { position: absolute; inset: 0; }
.hud-ring .h-dial .h-icon { width: 92px; height: 92px; }
/* 12 ticker */
.hud-ticker { width: 900px; padding: 10px 0; overflow: hidden; clip-path: none; border-width: 1px 0; display: block; }
.hud-ticker .h-track { display: flex; width: max-content; animation: h-run 28s linear infinite; }
.hud-ticker .h-run { display: flex; align-items: center; gap: 26px; padding-right: 60px; }
.hud-ticker .h-icon { width: 40px; height: 40px; }
.hud-ticker .h-name, .hud-ticker .h-rank { font-size: 20px; }
.hud-ticker .h-stat { flex-direction: row; align-items: baseline; gap: 7px; }
@keyframes h-run { to { transform: translateX(-50%); } }
/* 13 pill */
.hud-pill { gap: 14px; padding: 8px 24px 8px 10px; border-radius: 999px; clip-path: none; }
.hud-pill .h-icon { width: 50px; height: 50px; }
.hud-pill .h-rank { font-size: 20px; }
.hud-pill .h-stat i { display: none; }
/* 14 line: text only */
.hud-line { background: none; border: 0; clip-path: none; padding: 4px 6px; gap: 16px; text-shadow: 0 2px 6px #000, 0 0 2px #000; }
.hud-line .h-rank { font-size: 22px; }
.hud-line .h-stat { flex-direction: row; align-items: baseline; gap: 7px; }
.hud-line .h-stat i { color: var(--h-fg); opacity: .75; }

/* scenes: the whole 1920x1080 frame */
.scene { width: 1920px; height: 1080px; flex-direction: column; justify-content: center; gap: 44px; padding: 80px; border: 0; clip-path: none; text-align: center;
  background: radial-gradient(900px 600px at 50% 20%, rgba(124,58,237,.35), transparent 70%), radial-gradient(700px 500px at 80% 90%, rgba(217,70,239,.22), transparent 70%), #05030a; }
.s-kick { font: 700 24px "JetBrains Mono", monospace; letter-spacing: 8px; text-transform: uppercase; color: var(--h-acc); }
.s-head { display: flex; align-items: center; gap: 36px; text-align: left; }
.scene .h-icon { width: 200px; height: 200px; }
.scene .h-name { font-size: 54px; }
.scene .h-name i { font-size: 26px; }
.scene .h-rank { font-size: 44px; }
.scene .h-rr { font-size: 30px; }
.scene .h-top { font-size: 30px; }
.scene .h-stats { gap: 60px; }
.scene .h-stat b, .scene .h-wl { font-size: 46px; }
.scene .h-stat i { font-size: 16px; }
.scene .h-l5 i, .scene .h-game > i { width: 48px; height: 48px; font-size: 20px; }
.scene .h-game { font-size: 28px; gap: 16px; }
.s-foot { align-items: center; gap: 40px; justify-content: center; }
.s-grid { display: grid; grid-template-columns: repeat(6, 220px); gap: 16px; }
.s-cell { border: 1px solid var(--h-line); background: rgba(8,5,14,.7); padding: 26px 10px; display: flex; flex-direction: column; gap: 8px; clip-path: var(--h-cut); }
.s-cell b { font: 400 54px "Dela Gothic One", "Manrope", sans-serif; }
.s-cell i { font: 700 15px "JetBrains Mono", monospace; letter-spacing: 3px; text-transform: uppercase; color: var(--h-dim); }
.s-brb { font: 400 120px/1.05 "Dela Gothic One", "Manrope", sans-serif; text-transform: uppercase; max-width: 1700px; white-space: normal; overflow-wrap: anywhere;
  background: linear-gradient(90deg, #fff, var(--h-acc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-table { width: 1100px; display: flex; flex-direction: column; gap: 6px; }
.s-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; padding: 16px 28px; background: rgba(8,5,14,.7); border: 1px solid rgba(255,255,255,.08); font: 700 30px "JetBrains Mono", monospace; text-align: left; }
.s-row.s-th { background: none; border: 0; font-size: 16px; letter-spacing: 3px; text-transform: uppercase; color: var(--h-dim); padding-bottom: 4px; }
.s-empty { padding: 40px; color: var(--h-dim); font-size: 28px; }

@media (prefers-reduced-motion: reduce) { .hud-ticker .h-track { animation: none; } }