/* Replay components shared by the replay viewer and decision practice (ui/replayStage.js, ui/topHeroBar.js,
   ui/matchPlayerSelect.js). Built only on --dl-* tokens; the canvas reads the same tokens via theme/read-theme.js. */

/* ---------- Map stage ---------- */
.dl-stage { position: relative; aspect-ratio: 1 / 1; width: 100%; background: var(--dl-bg-void); border: 1px solid var(--dl-line); border-radius: var(--dl-radius-sm); overflow: hidden; box-shadow: var(--dl-shadow-2); }
.dl-stage__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.dl-stage__corner { position: absolute; width: 14px; height: 14px; border: 0 solid var(--dl-brass-dim); z-index: 2; pointer-events: none; }
.dl-stage__corner--tl { left: 6px; top: 6px; border-width: 1px 0 0 1px; }
.dl-stage__corner--tr { right: 6px; top: 6px; border-width: 1px 1px 0 0; }
.dl-stage__corner--bl { left: 6px; bottom: 6px; border-width: 0 0 1px 1px; }
.dl-stage__corner--br { right: 6px; bottom: 6px; border-width: 0 1px 1px 0; }
.dl-stage__slot { position: absolute; z-index: 3; display: flex; gap: 6px; align-items: center; pointer-events: none; }
.dl-stage__slot > * { pointer-events: auto; }
.dl-stage__slot:empty { display: none; }
.dl-stage__slot--top { top: 8px; left: 50%; transform: translateX(-50%); }
.dl-stage__slot--tl { top: 64px; left: 10px; }
.dl-stage__slot--tr { top: 64px; right: 10px; max-width: 46%; }
.dl-stage__slot--bottom { left: 10px; right: 10px; bottom: 10px; }
.dl-stage__clock { font-family: var(--dl-font-numeric); font-size: var(--dl-text-xl); font-weight: 600; color: var(--dl-text); }
.dl-stage__phase { font-family: var(--dl-font-label); font-size: var(--dl-text-xs); font-weight: 700; letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-brass-bright); }
.dl-stage__phase:empty { display: none; }
.dl-stage__pov { font-family: var(--dl-font-label); font-size: var(--dl-text-xs); font-weight: 700; letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-stage__pov[data-team="0"] { color: var(--dl-amber-bright); }
.dl-stage__pov[data-team="1"] { color: var(--dl-sapphire-bright); }

.dl-glass { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: color-mix(in srgb, var(--dl-bg-void) 78%, transparent); backdrop-filter: blur(4px); border: 1px solid var(--dl-line); border-radius: var(--dl-radius-xs); }

.dl-maptip { position: absolute; z-index: 5; max-width: 320px; padding: 6px 9px; pointer-events: none; background: color-mix(in srgb, var(--dl-bg-void) 92%, transparent); border: 1px solid var(--dl-line-brass); border-radius: var(--dl-radius-xs); box-shadow: var(--dl-shadow-2); font-size: var(--dl-text-xs); color: var(--dl-text); }
.dl-maptip[hidden] { display: none; }

/* ---------- Top hero bar (in-game top HUD) ---------- */
.dl-topbar { display: flex; align-items: flex-start; gap: 10px; padding: 5px 8px 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--dl-bg-void) 92%, transparent), color-mix(in srgb, var(--dl-bg-void) 55%, transparent)); border: 1px solid var(--dl-line); border-top: 0; border-radius: 0 0 var(--dl-radius-sm) var(--dl-radius-sm); }
.dl-topbar[hidden], .dl-topbar[data-empty="true"] .dl-topbar__team { display: none; }
.dl-topbar__team { display: flex; gap: 4px; }
.dl-topbar__center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; align-self: stretch; padding: 0 6px; border-inline: 1px solid var(--dl-line-faint); }
.dl-topbar__clock { font-family: var(--dl-font-numeric); font-size: var(--dl-text-lg); font-weight: 600; color: var(--dl-text); line-height: 1.1; }
.dl-topbar__sample { font-family: var(--dl-font-label); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--dl-warn); }
.dl-topbar__sample:empty { display: none; }
.dl-topbar__hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 38px; }
.dl-topbar__hero .dl-hero__portrait { width: 34px; height: 34px; border-radius: var(--dl-radius-xs); font-size: 12px; box-shadow: 0 0 0 1px var(--dl-bg-ink), 0 0 0 2px var(--dl-hero-ring); }
.dl-topbar__hero[data-self] .dl-hero__portrait { box-shadow: 0 0 0 1px var(--dl-bg-ink), 0 0 0 2px var(--dl-self), var(--dl-glow-brass); }
.dl-topbar__hp { position: relative; display: block; width: 34px; height: 4px; background: color-mix(in srgb, var(--dl-text) 10%, var(--dl-bg-void)); border-radius: 1px; overflow: hidden; }
.dl-topbar__hp > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 1%); background: var(--dl-pos); }
.dl-topbar__team--enemy .dl-topbar__hp > i { background: var(--dl-neg); }
.dl-topbar__hero[data-low] .dl-topbar__hp > i { background: var(--dl-warn); }
.dl-topbar__hp[data-unavailable] { background: repeating-linear-gradient(135deg, transparent 0 2px, var(--dl-text-faint) 2px 3px); }
.dl-topbar__respawn { position: absolute; top: 0; left: 2px; width: 34px; height: 34px; display: grid; place-items: center; font-family: var(--dl-font-numeric); font-size: var(--dl-text-lg); font-weight: 700; color: var(--dl-text); text-shadow: 0 1px 2px var(--dl-black); pointer-events: none; }
.dl-topbar__respawn:empty { display: none; }
.dl-topbar__hero[data-state="dead"] .dl-hero__portrait { filter: grayscale(1) brightness(.45); }
.dl-topbar__hero[data-state="dead"] .dl-topbar__hp { visibility: hidden; }
.dl-topbar__hero[data-state="hidden"] { opacity: .5; }
.dl-topbar__hero[data-state="hidden"] .dl-hero__portrait { filter: grayscale(.85) brightness(.7); }
.dl-topbar__hero[data-state="hidden"] .dl-topbar__hp { background: var(--dl-line-faint); }
.dl-topbar[data-stale="true"] .dl-topbar__team { opacity: .8; }

/* ---------- Self HUD ---------- */
.dl-selfhud { display: flex; align-items: stretch; gap: 14px; padding: 8px 10px; }
.dl-selfhud[hidden] { display: none; }
.dl-selfhud__vitals { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 170px; }
.dl-selfhud__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--dl-font-numeric); font-size: var(--dl-text-sm); color: var(--dl-text); }
.dl-selfhud__key { display: inline-flex; align-items: center; gap: 4px; font-family: var(--dl-font-label); font-size: 10px; letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-muted); }
.dl-selfhud__key .dl-icon { color: var(--dl-souls); width: 12px; height: 12px; }
.dl-selfhud__sep { width: 1px; background: var(--dl-line); }
.dl-selfhud__slots { display: flex; gap: 4px; align-items: center; }
.dl-selfhud__slot { display: grid; place-items: center; width: 46px; height: 46px; padding: 2px; border-radius: var(--dl-radius-xs); background: linear-gradient(180deg, color-mix(in srgb, var(--dl-spirit) 18%, transparent), var(--dl-surface-2)); border: 1px solid var(--dl-spirit-dark); }
.dl-selfhud__slot[data-ult] { border-color: var(--dl-brass); box-shadow: inset 0 0 0 1px var(--dl-brass-deep); }
.dl-selfhud__slotname { font-family: var(--dl-font-label); font-size: 9.5px; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; text-align: center; color: var(--dl-text); }
.dl-meter { position: relative; display: block; height: 7px; border-radius: 1px; background: color-mix(in srgb, var(--dl-text) 8%, transparent); overflow: hidden; }
.dl-meter > i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 1%); background: var(--dl-pos); }
.dl-meter[data-unavailable="true"] { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--dl-text-faint) 3px 4px); }

/* ---------- Transport ---------- */
.dl-transport { display: flex; align-items: center; gap: var(--dl-space-3); padding: var(--dl-space-2) var(--dl-space-3); background: var(--dl-surface-1); border: 1px solid var(--dl-line); border-radius: var(--dl-radius-sm); }
.dl-transport__play { width: 34px; height: 34px; padding: 0; justify-content: center; }
.dl-transport__icon { display: inline-grid; place-items: center; }
.dl-transport__scrub { flex: 1; min-width: 120px; accent-color: var(--dl-brass); }
.dl-transport__time { font-family: var(--dl-font-numeric); font-size: var(--dl-text-sm); color: var(--dl-text-2); white-space: nowrap; }
.dl-transport__status { font-size: var(--dl-text-xs); color: var(--dl-text-muted); min-width: 0; white-space: nowrap; }
.dl-transport__status:empty { display: none; }

/* ---------- Labelled form field ---------- */
.dl-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dl-field__label { font-family: var(--dl-font-label); font-size: var(--dl-text-xs); font-weight: 700; letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-muted); }
.dl-field__control { height: 30px; padding: 0 8px; background: var(--dl-surface-sunken); color: var(--dl-text); border: 1px solid var(--dl-line-brass); border-radius: var(--dl-radius-sm); font: inherit; font-size: var(--dl-text-sm); }
.dl-field__control option, .dl-field__control optgroup { background: var(--dl-surface-1); color: var(--dl-text); }