/* Bundled, so the HUD looks the same everywhere instead of whatever the viewer has installed. */
@font-face { font-family: "HUD Condensed"; src: url("../../fonts/RobotoCondensed-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "HUD Condensed"; src: url("../../fonts/RobotoCondensed-Bold.ttf") format("truetype"); font-weight: 700; }
:root {
  --bg: #15171a; --panel: #1e2125; --line: #2c3036; --text: #d8dadd; --dim: #8a9099;
  --red: #d0453f; --blue: #4f8fc0; --red-soft: #d0453f33; --blue-soft: #4f8fc033;
  /* Team shades worked out ahead: color-mix() in a gradient is converted again on every paint. */
  --blue-d45: #244056; --blue-d55: #2b4f6a; --blue-d70: #376486; --blue-h30: #1f3343; --blue-w55: #9ec1dc; --blue-w60: #95bcd9; --blue-w80: #72a5cd; --blue-w85: #69a0c9;
  --red-d45: #5e1f1c; --red-d55: #722623; --red-d70: #92302c; --red-h30: #461d1d; --red-w55: #e59995; --red-w60: #e38f8c; --red-w80: #d96a65; --red-w85: #d7615c;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
/* Laid out for 1080p streams; --s scales the HUD, panel and markers with the window height. */
:root { --s: 1; }
body { display: grid; grid-template-rows: 1fr; }
#title { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; border-bottom: 1px solid var(--line); }
#title b { font-size: 15px; }
.hud, #scoreboard, #follow, #bgtoggle, #autozoom, #sidetoggle, #helptoggle, #settingstoggle, #help, #board, aside { zoom: var(--s); }
#status.ok { color: #7cc47f; } #status.bad { color: #e0a040; }
#age { color: var(--dim); margin-left: auto; }
main { display: grid; grid-template-columns: 1fr auto; min-height: 0; }
#stage { position: relative; min-height: 0; overflow: hidden; }
canvas#c { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
canvas#c:active { cursor: grabbing; }
/* The map picture under the canvas, placed by a transform the compositor applies. */
#bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #101214; }
#bg > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
html.overlay #bg { background: none; }
#banner { position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  padding: 6px 16px; border-radius: 4px; background: #000a; font-weight: 600; font-size: 15px;
  opacity: 0; transition: opacity .4s; pointer-events: none; }
aside { width: 380px; border-left: 1px solid var(--line); background: var(--panel); display: flex;
  flex-direction: column; min-height: 0; }
aside section { padding: 8px 10px; border-bottom: 1px solid var(--line); }
aside h3 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
/* Spectator HUD over the map: BLU down the left edge, RED down the right, like TF2. */
.hud { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column;
  gap: 3px; width: 250px; pointer-events: none; z-index: 2;
  font-family: "HUD Condensed", "Roboto Condensed", "Arial Narrow", sans-serif; }
#hud-blue { left: 10px; } #hud-red { right: 10px; }
.card { --team: var(--blue); --team-d45: var(--blue-d45); --team-d55: var(--blue-d55); --team-d70: var(--blue-d70); --team-h30: var(--blue-h30); --team-w55: var(--blue-w55); --team-w60: var(--blue-w60); --team-w80: var(--blue-w80); --team-w85: var(--blue-w85); position: relative; height: 40px; display: grid; align-items: center;
  grid-template-columns: 40px 1fr auto auto; background: #0b0c0ecc; overflow: hidden; }
#hud-red .card, #hud-red .charge { --team: var(--red); --team-d45: var(--red-d45); --team-d55: var(--red-d55); --team-d70: var(--red-d70); --team-h30: var(--red-h30); --team-w55: var(--red-w55); --team-w60: var(--red-w60); --team-w80: var(--red-w80); --team-w85: var(--red-w85); }
/* Fills stay full width and are revealed with clip-path, so the über stripes (a fixed
   24px tile) never stretch when health or charge changes. */
.card .fill { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path .25s linear;
  background: linear-gradient(90deg, var(--team-d70), var(--team-d45)); }
/* Overheal: a brighter wash growing left to right over the health fill, behind the text. */
.card .oh { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path .25s linear; opacity: .38;
  background: var(--team-w55); }
.card > :not(.fill):not(.oh) { position: relative; }
.card .ci { width: 40px; height: 40px; padding: 6px; background: var(--team); display: grid; place-items: center; font-weight: 800; }
.card .ci img { width: 28px; height: 28px; }
.card .nm { padding: 0 6px; min-width: 0; line-height: 1.05; }
.card .nm b { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; text-shadow: 0 1px 2px #000; }
.card .nm small { font-size: 11px; color: #ffffffa0; letter-spacing: .02em; }
.card .hp { padding: 0 9px; font-size: 26px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 #000a; font-variant-numeric: tabular-nums; }
.card .nm small { display: flex; align-items: center; gap: 4px; height: 14px; white-space: nowrap; overflow: hidden; }
.card .wp { height: 14px; width: auto; max-width: 56px; object-fit: contain; filter: drop-shadow(0 1px 1px #000); }
/* Status effects left of the health number, drawn like the badges on the map. */
.card .fx { display: flex; gap: 2px; }
.card .fx i { width: 11px; height: 15px; background: center / contain no-repeat; }
.card .fx .burn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 1c.6 2.6 4.6 4.6 4.6 8.6A4.6 4.6 0 0 1 6 14.6a4.6 4.6 0 0 1-4.6-5c0-2 1.2-3.2 2-4 .1 1.4.8 2.3 1.6 2.6C4.8 5.6 5.4 3 6 1z' fill='%23ff7a1a' stroke='%23000' stroke-opacity='.8' stroke-width='1.2'/%3E%3Cpath d='M6 7.5c.4 1.4 2.4 2.2 2.4 4.1A2.4 2.4 0 0 1 6 14a2.4 2.4 0 0 1-2.4-2.4c0-1.6 1.6-2.4 2.4-4.1z' fill='%23ffd23a'/%3E%3C/svg%3E"); }
.card .fx .jar { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 1.2C4 4.5 1.5 7.4 1.5 10.3a4.5 4.5 0 0 0 9 0C10.5 7.4 8 4.5 6 1.2z' fill='%23f2d627' stroke='%23000' stroke-opacity='.8' stroke-width='1.2'/%3E%3C/svg%3E"); }
.card .fx .milk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 1.2C4 4.5 1.5 7.4 1.5 10.3a4.5 4.5 0 0 0 9 0C10.5 7.4 8 4.5 6 1.2z' fill='%23fff' stroke='%23000' stroke-opacity='.8' stroke-width='1.2'/%3E%3C/svg%3E"); }
.card .fx .bleed { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 1.2C4 4.5 1.5 7.4 1.5 10.3a4.5 4.5 0 0 0 9 0C10.5 7.4 8 4.5 6 1.2z' fill='%23d22' stroke='%23000' stroke-opacity='.8' stroke-width='1.2'/%3E%3C/svg%3E"); }
.card .nm small span:empty { display: none; }
.card.over .hp { color: #9fd8ff; }
.card.low .hp { color: #ff6b5a; animation: pulse .7s infinite alternate; }
.card.dead { filter: grayscale(1) brightness(.55); }
.card.dead .hp { font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.card .tag { margin-right: 5px; padding: 0 4px; font-size: 9px; font-weight: 800;
  letter-spacing: .08em; color: #000; background: #fff; border-radius: 2px; }
.card.ub { box-shadow: inset 0 0 0 2px #fff8, 0 0 12px var(--team); }
.card.ub .fill { --stripe: var(--team-w80);
  background: linear-gradient(135deg, var(--stripe) 25%, var(--team) 25% 50%, var(--stripe) 50% 75%, var(--team) 75%) 0 0 / 24px 24px;
  animation: stripes 1s linear infinite; }
.charge { --team: var(--blue); --team-d45: var(--blue-d45); --team-d55: var(--blue-d55); --team-d70: var(--blue-d70); --team-h30: var(--blue-h30); --team-w55: var(--blue-w55); --team-w60: var(--blue-w60); --team-w80: var(--blue-w80); --team-w85: var(--blue-w85); position: relative; height: 30px; margin-top: 4px; background: #0b0c0ecc;
  display: flex; align-items: center; gap: 6px; padding: 0 8px; overflow: hidden; }
.charge .bar { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path .3s linear;
  background: var(--team-d55); }
.charge .segs { position: absolute; inset: 0; }
.charge .seg { position: absolute; top: 0; bottom: 0; width: 2px; background: #0b0c0e; }
.charge > span { position: relative; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #fff; text-transform: uppercase;
  text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.charge.releasing > span { background: #000b; padding: 1px 5px; border-radius: 2px; }
.charge .pct { margin-left: auto; font-size: 17px; font-variant-numeric: tabular-nums; }
.charge.ready .bar { background: linear-gradient(90deg, var(--team), var(--team-w60)); animation: pulse 1s infinite alternate; }
.charge.releasing { box-shadow: 0 0 14px var(--team); }
.charge.releasing .bar { --stripe: var(--team-w80);
  background: linear-gradient(135deg, var(--stripe) 25%, var(--team) 25% 50%, var(--stripe) 50% 75%, var(--team) 75%) 0 0 / 24px 24px;
  animation: stripes .6s linear infinite; }
.charge.dead { filter: grayscale(1) brightness(.55); }
.card { cursor: pointer; pointer-events: auto; }
.card:hover { filter: brightness(1.25); }
.card.followed { box-shadow: inset 0 0 0 2px #fff; }
#scoreboard { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
  font-family: "HUD Condensed", "Roboto Condensed", "Arial Narrow", sans-serif; }
.sb-row { display: flex; align-items: stretch; filter: drop-shadow(0 2px 6px #000a); }
.sb-team { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 54px; color: #fff; }
.sb-team.blue { background: linear-gradient(180deg, var(--blue-w85), var(--blue)); border-radius: 6px 0 0 6px; }
.sb-team.red { background: linear-gradient(180deg, var(--red-w85), var(--red)); border-radius: 0 6px 6px 0; }
.sb-team b { font-size: 38px; font-weight: 800; line-height: 1; min-width: 1.2ch; text-align: center; text-shadow: 0 2px 0 #0006; font-variant-numeric: tabular-nums; }
.sb-name { font-size: 12px; font-weight: 800; letter-spacing: .12em; opacity: .85; }
.sb-sub { position: absolute; top: 100%; left: 0; right: 0; text-align: center; font-style: normal; font-size: 12px; font-weight: 700;
  background: #000a; padding: 1px 0; font-variant-numeric: tabular-nums; }
.sb-sub:empty { display: none; }
.sb-timer { position: relative; display: grid; place-items: center; width: 120px; background: #14161acc; color: #fff; }
.sb-timer b { font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.sb-timer span { position: absolute; left: 0; right: 0; top: 3px; text-align: center; font-size: 9px; font-weight: 800; letter-spacing: .14em; color: #ffd166; line-height: 1; }
.sb-timer.low b { color: #ff6b5a; }
#scoreboard.koth .sb-timer { width: 170px; }
.sb-timer .kt { font-style: normal; font-size: 27px; }
.sb-timer .kt + .kt { margin-left: 12px; }
.sb-timer .kt.blue { color: var(--blue-w55); }
.sb-timer .kt.red { color: var(--red-w55); }
.sb-timer .kt.idle { opacity: .45; }
.sb-timer .kt.low { color: #ff6b5a; animation: pulse .7s infinite alternate; }
.sb-timer i { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-style: normal; font-size: 9px;
  font-weight: 800; letter-spacing: .1em; line-height: 1; color: #ffffffb3; font-variant-numeric: tabular-nums; }
.cps { display: flex; gap: 6px; }
/* Square like TF2's HUD; a capture fills it left to right. */
.cp { --own: #8a8a8a; --cap: transparent; --p: 0%; position: relative; width: 34px; height: 34px; border-radius: 4px;
  background: linear-gradient(90deg, var(--cap) var(--p), var(--own) var(--p)); box-shadow: 0 0 0 2px #000c, 0 2px 6px #0008;
  display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; text-shadow: 0 1px 2px #000; }
.cp.locked { filter: grayscale(.7) brightness(.7); }
.cp.locked::after { content: "🔒"; position: absolute; right: -6px; bottom: -6px; font-size: 11px; }
.cp.capping { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--own), 0 0 12px var(--cap); }
#follow { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: 5px 6px 5px 12px; background: #0b0c0ee6; border-radius: 16px; color: var(--dim); }
#follow b { color: #fff; }
#follow button, #bgtoggle button { border: 0; font: inherit; cursor: pointer; }
#follow button { width: 22px; height: 22px; border-radius: 50%; background: #ffffff1a; color: #fff; }
html.noside aside { display: none; }
html.nohud .hud, html.nohud #scoreboard, html.noscore #scoreboard { display: none; }
html.noside main { grid-template-columns: 1fr; grid-template-rows: 1fr; }
#sidetoggle, #helptoggle, #settingstoggle, #autozoom { position: absolute; right: 12px; z-index: 3; padding: 5px 10px; border: 0; border-radius: 6px;
  background: #0b0c0ee6; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
#sidetoggle, #helptoggle, #settingstoggle { top: 12px; font-size: 16px; line-height: 1; padding: 4px 0; width: 24px; text-align: center; }
#settingstoggle { font-size: 18px; padding: 3px 0; }
#helptoggle { right: 46px; }
#help { position: absolute; top: 44px; right: 12px; z-index: 4; padding: 10px 14px; border-radius: 6px;
  background: #0b0c0ef2; color: var(--text); font-size: 12px; }
#help table { border-collapse: collapse; }
#settingstoggle { right: 80px; }
#settings { position: absolute; top: 44px; right: 12px; z-index: 4; padding: 10px 14px; border-radius: 6px;
  background: #0b0c0ef2; color: var(--text); font-size: 12px; }
#settings label { display: flex; gap: 8px; align-items: center; padding: 2px 0; cursor: pointer; }
#settings label.master { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
#settings kbd { margin-left: auto; color: var(--dim); }
#help td { padding: 2px 0; }
#help kbd { display: inline-block; min-width: 18px; margin-right: 10px; padding: 1px 5px; border: 1px solid var(--line);
  border-radius: 4px; text-align: center; font: inherit; color: #fff; }
#autozoom { bottom: 52px; }
#bgtoggle { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; padding: 2px; border-radius: 6px; background: #0b0c0ee6; }
#bgtoggle button { padding: 4px 10px; border-radius: 4px; background: transparent; color: var(--dim); font-size: 12px; }
#bgtoggle button.on { background: #ffffff1f; color: #fff; }
/* Broadcast overlay (/overlay): only the map, on a transparent page for OBS. */
html.overlay, html.overlay body { background: transparent; }
html.overlay body { display: block; }
html.overlay header, html.overlay aside, html.overlay .hud, html.overlay #follow, html.overlay #bgtoggle, html.overlay #sidetoggle,
html.overlay #helptoggle, html.overlay #help, html.overlay #settingstoggle, html.overlay #settings,
html.overlay #empty, html.overlay #banner { display: none !important; }
html.overlay main { display: block; height: 100%; }
html.overlay #stage { position: fixed; inset: 0; border-radius: 14px; background: rgb(11 12 14 / var(--overlay-opacity, .82));
  box-shadow: inset 0 0 0 1px #ffffff1f; }
html.overlay canvas#c { cursor: default; pointer-events: none; }
html.overlay #scoreboard { top: 6px; transform: translateX(-50%) scale(.62); transform-origin: top center; }
@keyframes pulse { from { opacity: 1; } to { opacity: .55; } }
/* Moving exactly one 24px tile per cycle loops seamlessly. */
@keyframes stripes { from { background-position: 0 0; } to { background-position: 24px 0; } }
@media (max-width: 800px) { .hud { width: 150px; } .card .nm small, .card .tag { display: none; } }
#feed, #chat { overflow-y: auto; flex: 1; min-height: 80px; }
/* Rows scrolled out of view are skipped when the page is painted. */
#feed > div, #chat > div { content-visibility: auto; contain-intrinsic-size: auto 20px; }
#feed div { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#chat div { padding: 2px 0; overflow-wrap: anywhere; }
#chat .notice { color: var(--dim); }
#chat .voice { color: var(--dim); font-style: italic; }
#chat .srvtext { color: var(--dim); font-size: 11px; font-family: ui-monospace, monospace; }
#chat time { display: inline-block; min-width: 30px; color: var(--dim); font-size: 10px; font-variant-numeric: tabular-nums; }
.t-red { color: var(--red); } .t-blue { color: var(--blue); }
#feed div.ev { display: flex; align-items: center; gap: 5px; padding: 3px 7px; margin: 0 0 2px; border-radius: 3px;
  background: #0b0c0e8c; white-space: nowrap; overflow: hidden; }
#feed .ev time { color: var(--dim); font-size: 10px; font-variant-numeric: tabular-nums; min-width: 30px; }
#feed .ev .who { overflow: hidden; text-overflow: ellipsis; }
#feed .who[data-id] { cursor: pointer; } #feed .who[data-id]:hover { text-decoration: underline; }
#feed .ev.minor { background: transparent; color: var(--dim); font-size: 12px; }
#feed .ev.feign { opacity: .5; }
/* Round flow rows: team-coloured, bold, aligned like the rest and free to wrap. */
#feed .ev.big { font-weight: 700; padding: 5px 7px; color: #fff; white-space: normal; }
#feed .ev.big.red { background: var(--red-d55); }
#feed .ev.big.blue { background: var(--blue-d55); }
#feed .ev.big.none { background: #2c3036; }
#feed .ev.hot.red { background: var(--red-h30); }
#feed .ev.hot.blue { background: var(--blue-h30); }
#feed .killicon { zoom: .6; margin: 0 2px; flex: none; }
#feed .crit { filter: drop-shadow(0 0 3px #ff4b3a); }
.chip { flex: none; padding: 0 4px; border-radius: 2px; font-size: 9px; font-weight: 800; letter-spacing: .06em; color: #000; background: #ddd; }
.chip.dom { background: #ff6b5a; } .chip.rev { background: #ffd166; } .chip.air { background: #9ff0ff; } .chip.drop { background: #fff; }
.w { color: var(--dim); font-size: 11px; }
#empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); pointer-events: none; }
@media (max-width: 800px) { main { grid-template-columns: 1fr; grid-template-rows: 60vh auto; } }

/* Dead cards count down to the respawn. */
.card.dead .hp.rs { font-size: 20px; font-weight: 800; letter-spacing: 0; color: #c8ccd2; }

/* Time added to a round timer, floating down under the scoreboard. */
#scoreboard .added { position: absolute; left: 0; right: 0; top: 100%; text-align: center; font-size: 18px; font-weight: 800;
  color: #7dff8a; text-shadow: 0 1px 3px #000, 0 0 6px #000; pointer-events: none; z-index: 5; animation: added 2.6s ease-out forwards; }
#scoreboard .added.blue { right: 50%; } #scoreboard .added.red { left: 50%; }
@keyframes added { 0% { opacity: 0; transform: translateY(-6px); } 15% { opacity: 1; transform: translateY(4px); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

/* The scoreboard (hold Tab). */
#board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 12px; z-index: 20;
  padding: 12px; border-radius: 8px; background: #0b0c0ef2; box-shadow: 0 8px 30px #000a; color: var(--text); }
#board[hidden] { display: none; }
.bteam { width: 470px; }
.bhead { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 6px 6px 0 0; color: #fff; }
.bteam.blue .bhead { background: var(--blue); } .bteam.red .bhead { background: var(--red); }
.bhead b { font-size: 18px; letter-spacing: .08em; } .bhead span { font-size: 26px; font-weight: 800; } .bhead i { margin-left: auto; font-style: normal; font-size: 12px; opacity: .8; }
#board table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
#board th { font-size: 11px; font-weight: 700; color: var(--dim); text-align: right; padding: 6px 6px 4px; letter-spacing: .04em; }
#board td { text-align: right; padding: 4px 6px; border-top: 1px solid #ffffff12; }
#board .bn { text-align: left; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#board .bn small { color: var(--dim); font-weight: 700; }
#board .bc { width: 22px; padding-right: 0; } #board .bc img { width: 18px; height: 18px; vertical-align: middle; }
#board tr.dead td { opacity: .5; }

/* Killstreaks in the feed: kills within 10 s of each other. */
#feed .ev.streak { box-shadow: inset 3px 0 0 var(--streak); }
#feed .ev.s2 { --streak: #f59e0b; } #feed .ev.s3 { --streak: #f97316; } #feed .ev.s4 { --streak: #ef4444; }
#feed .chip.s2, #feed .chip.s3, #feed .chip.s4 { background: var(--streak); color: #111; }