@font-face {
  font-family: 'PLJA Oxanium';
  src: url('/fonts/live/oxanium-fb2851ce9276.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PLJA Space Grotesk';
  src: url('/fonts/live/spacegrotesk-22d6342a070f.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
.bc-page.bc-page.bc-page.bc-page, .hl-page.hl-page.hl-page {
  --bc-bg: #0f1014;
  --bc-panel: #191b22;
  --bc-line: #393c45;
  --bc-muted: #adb0ba;
  --bc-text: #f4f0e9;
  --bc-gold: #dda765;
  --bc-teal: #edd4a8;
  --font-body: 'PLJA Space Grotesk', 'Segoe UI', sans-serif;
  --font-heading: 'PLJA Oxanium', 'Segoe UI', sans-serif;
  font-family: var(--font-body);
  background: radial-gradient(ellipse at 10% 0, #dda7650a, transparent 40%), #0f1014;
}
.bc-page.bc-page.bc-page.bc-page :is(button, select, input) { font-family: var(--font-body); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-status.is-live::before,
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-return-live::before { background: #dda765; box-shadow: 0 0 8px #dda76550; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-return-live { color: #edd4a8; }
/* Shared official LIVE/replay presentation. Scale uses real layout dimensions,
   never a transform, so cards and controls keep their correct hit targets. */
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] {
  --bc-s: var(--bc-ui-scale, 1);
  --bc-card-h: calc(82px * var(--bc-s));
  --bc-card-name: calc(15px * var(--bc-s));
  --bc-card-hp: calc(24px * var(--bc-s));
  --bc-card-record: calc(20px * var(--bc-s));
  --bc-clock-size: calc(30px * var(--bc-s));
  --bc-centre-width: calc(190px * var(--bc-s));
  --bc-score-width: calc(174px * var(--bc-s));
  --bc-panel-bg: #191b22f5;
  --bc-panel-line: #ffffff24;
  --bc-gold: #dda765;
  font-variant-numeric: tabular-nums;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score {
  width: var(--bc-score-width);
  padding: calc(9px * var(--bc-s)) calc(12px * var(--bc-s));
  border: 1px solid var(--bc-panel-line);
  border-top: 2px solid #d9bd80;
  border-radius: 12px;
  background: var(--bc-panel-bg);
  box-shadow: 0 6px 24px #0005;
  color: #f5f7fc;
  line-height: 1;
  backdrop-filter: blur(12px);
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > strong {
  font-family: var(--font-heading);
  font-size: calc(36px * var(--bc-s));
  line-height: 1.15;
  gap: calc(12px * var(--bc-s));
  margin: calc(3px * var(--bc-s)) 0 calc(7px * var(--bc-s));
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > strong i {
  font-size: .6em;
  color: #9caec4;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score .bc-status {
  font-size: calc(10px * var(--bc-s));
  line-height: 1.2;
  letter-spacing: .1em;
  color: #d0d0d5;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score .bc-status.is-live {
  color: #dda765;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > div {
  display: flex;
  flex-direction: column;
  gap: calc(5px * var(--bc-s));
  border-top: 0;
  padding-top: 0;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > div > span {
  order: 2;
  font-size: calc(10px * var(--bc-s));
  color: #d0d0d5;
  letter-spacing: .04em;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-match-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2px * var(--bc-s));
  width: 100%;
  padding: calc(5px * var(--bc-s));
  background: #ffffff09;
  border: 1px solid #ffffff15;
  border-radius: 7px;
  white-space: nowrap;
  color: #fff0ca;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-match-clock > span {
  font-size: calc(9px * var(--bc-s));
  letter-spacing: .08em;
  line-height: 1;
  color: #d0d0d5;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-match-clock > b {
  font: 700 var(--bc-clock-size)/1.1 var(--font-heading, 'Segoe UI', sans-serif);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  padding: 0;
  color: #ffe7b3;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > small {
  display: block;
  font-size: calc(9px * var(--bc-s));
  color: #d0d0d5;
  line-height: 1.3;
  margin-top: calc(4px * var(--bc-s));
  white-space: normal;
  overflow-wrap: anywhere;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-side {
  min-width: 0;
  border: 1px solid var(--bc-panel-line);
  border-top: 2px solid var(--side);
  background: var(--bc-panel-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px #0004;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-team-name {
  height: calc(28px * var(--bc-s));
  min-height: 0;
  padding: 0 calc(10px * var(--bc-s));
  gap: 7px;
  font-size: calc(11px * var(--bc-s));
  background: #ffffff05;
  color: #e4eaf2;
  border-bottom: 1px solid var(--bc-panel-line);
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-team-name b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card {
  display: grid;
  grid-template-columns: calc(30px * var(--bc-s)) minmax(0, 1fr) auto;
  grid-template-rows: auto auto 4px;
  align-items: center;
  column-gap: calc(8px * var(--bc-s));
  row-gap: calc(3px * var(--bc-s));
  min-height: var(--bc-card-h);
  height: auto;
  width: 100%;
  padding: calc(7px * var(--bc-s)) calc(10px * var(--bc-s));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #f5f7fc;
  opacity: 1;
  container-type: inline-size;
  container-name: bc-card;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card + .bc-player-card {
  border-top: 1px solid var(--bc-panel-line);
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card[data-selected='true'] {
  background: color-mix(in srgb, var(--side) 14%, #232630);
  box-shadow: inset 3px 0 var(--side);
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card:hover {
  background-color: #343742;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card:focus-visible {
  outline: 2px solid #fff0ca;
  outline-offset: -3px;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card > .bc-avatar {
  width: calc(30px * var(--bc-s));
  height: calc(30px * var(--bc-s));
  border-radius: 7px;
  grid-column: 1;
  grid-row: 1;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-identity {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-identity > strong {
  font-size: var(--bc-card-name);
  line-height: 1.3;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-identity > strong svg {
  width: calc(12px * var(--bc-s));
  height: calc(12px * var(--bc-s));
  flex-shrink: 0;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-identity > span {
  font-size: calc(9px * var(--bc-s));
  line-height: 1.25;
  opacity: 1;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-vitals { display: contents; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-vitals > strong {
  font-family: var(--font-heading);
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: calc(3px * var(--bc-s));
  font-size: var(--bc-card-hp);
  line-height: 1;
  text-align: right;
  color: #f5f7fc;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-vitals > strong > small {
  font-size: calc(9px * var(--bc-s));
  line-height: 1;
  color: #d0d0d5;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-vitals .bc-eliminated {
  font-size: calc(9px * var(--bc-s));
  font-weight: 700;
  color: #ffb6b6;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-record-label {
  grid-column: 1 / 3;
  grid-row: 2;
  font-size: calc(9px * var(--bc-s));
  letter-spacing: .03em;
  color: #d0d0d5;
  text-align: left;
}
.bc-page.bc-page.bc-page.bc-page .bc-record-label-short { display: none; }
@container bc-card (max-width: 240px) {
  .bc-page.bc-page.bc-page.bc-page .bc-record-label-full { display: none; }
  .bc-page.bc-page.bc-page.bc-page .bc-record-label-short { display: inline; }
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-record {
  font-family: var(--font-heading);
  grid-column: 3;
  grid-row: 2;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: calc(5px * var(--bc-s));
  font-size: var(--bc-card-record);
  font-weight: 750;
  line-height: 1.1;
  color: #e7edf8;
  white-space: nowrap;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-record > i {
  font-size: .7em;
  color: #9caec4;
  font-weight: 400;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-health {
  grid-column: 1 / -1;
  grid-row: 3;
  height: 4px;
  margin: 0;
  background: #ffffff21;
  border-radius: 3px;
  overflow: hidden;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-health > i {
  display: block;
  height: 100%;
  background: var(--side);
  border-radius: inherit;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card[data-health-critical='true'] .bc-health-value { color: #ffbdad; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card[data-health-critical='true'] .bc-health > i { background: #ffad97; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card[data-health-known='false'] .bc-health { background: repeating-linear-gradient(90deg, #ffffff2b 0 4px, transparent 4px 8px); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card[data-alive='false'] { opacity: 1; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card[data-alive='false'] .bc-identity { opacity: .8; }

/* Keep the utility rails and all touch controls available at every scale. */
@media (min-width: 761px) and (min-height: 551px) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale][data-viewer-toolbar='true'] {
    --bc-top-side-reserve: max(60px, calc(env(safe-area-inset-left, 0px) + 56px), calc(env(safe-area-inset-right, 0px) + 56px));
    --hkc-safe-top: calc(max(12px, env(safe-area-inset-top, 0px)) + 168px * var(--bc-s));
  }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale][data-viewer-toolbar='true'][data-team='true'] {
    --hkc-safe-top: calc(max(12px, env(safe-area-inset-top, 0px)) + 208px * var(--bc-s));
  }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale][data-viewer-toolbar='true'] .bc-roster {
    top: max(12px, env(safe-area-inset-top, 0px));
    width: min(calc(1060px * var(--bc-s)), calc(100% - var(--bc-top-side-reserve) * 2));
    grid-template-columns: minmax(0, 1fr) var(--bc-centre-width) minmax(0, 1fr);
  }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale][data-viewer-toolbar='true'] .bc-score { top: max(12px, env(safe-area-inset-top, 0px)); }
}
@media (max-width: 760px) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] {
    --bc-card-h: calc(76px * var(--bc-s));
    --bc-card-name: calc(13px * var(--bc-s));
    --bc-card-hp: calc(20px * var(--bc-s));
    --bc-card-record: calc(17px * var(--bc-s));
    --bc-clock-size: calc(24px * var(--bc-s));
    --bc-score-width: calc(170px * var(--bc-s));
  }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card {
    grid-template-columns: calc(22px * var(--bc-s)) minmax(0, 1fr) auto;
    column-gap: calc(4px * var(--bc-s));
    padding: calc(6px * var(--bc-s));
  }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card > .bc-avatar { width: calc(22px * var(--bc-s)); height: calc(22px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-record-label { font-size: calc(8px * var(--bc-s)); letter-spacing: 0; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-team-name { font-size: calc(10px * var(--bc-s)); padding: 0 6px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(8px * var(--bc-s));
    padding: calc(6px * var(--bc-s));
  }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale][data-viewer-toolbar='true'] .bc-score {
    top: calc(var(--bc-viewer-toolbar-height) + 6px);
    left: 50%;
    transform: translateX(-50%);
  }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score .bc-status { grid-column: 1 / -1; font-size: calc(9px * var(--bc-s)); margin-bottom: 4px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > strong { align-self: center; font-size: calc(26px * var(--bc-s)); gap: calc(4px * var(--bc-s)); margin: 0; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > div { gap: 3px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-match-clock { padding: 3px 0; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-match-clock > span { font-size: calc(7px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > div > span { font-size: calc(8px * var(--bc-s)); line-height: 1.2; text-align: center; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > div > span > b { font-size: inherit; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > strong[data-long-score='true'] { font-size: calc(18px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > small { grid-column: 1 / -1; font-size: calc(8px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale][data-viewer-toolbar='true'] .bc-roster { gap: 6px; padding: 6px; }
}
/* A short landscape screen keeps the middle of the arena clear. */
@media (orientation: landscape) and (max-height: 550px) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] {
    --bc-card-h: calc(60px * var(--bc-s));
    --bc-card-name: calc(12px * var(--bc-s));
    --bc-card-hp: calc(19px * var(--bc-s));
    --bc-card-record: calc(16px * var(--bc-s));
    --bc-clock-size: calc(24px * var(--bc-s));
    --bc-score-width: calc(148px * var(--bc-s));
  }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-ui-scale][data-viewer-toolbar='true'] .bc-roster {
    top: calc(var(--bc-viewer-toolbar-height) + 6px);
    left: max(6px, env(safe-area-inset-left, 0px));
    right: max(6px, env(safe-area-inset-right, 0px));
    width: auto;
    transform: none;
    grid-template-columns: minmax(0, min(27%, calc(210px * var(--bc-s)))) minmax(var(--bc-score-width), 1fr) minmax(0, min(27%, calc(210px * var(--bc-s))));
    gap: 8px;
    padding: 0;
  }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-ui-scale][data-viewer-toolbar='true'] .bc-score {
    top: calc(var(--bc-viewer-toolbar-height) + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 8px;
  }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card { grid-template-rows: auto auto 3px; padding: calc(4px * var(--bc-s)) calc(6px * var(--bc-s)); row-gap: 2px; grid-template-columns: calc(22px * var(--bc-s)) minmax(0, 1fr) auto; column-gap: 4px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card > .bc-avatar { width: calc(22px * var(--bc-s)); height: calc(22px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-health { height: 3px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-team-name { height: calc(24px * var(--bc-s)); font-size: calc(10px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-record-label { font-size: calc(8px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > strong { font-size: calc(26px * var(--bc-s)); margin: 0 0 3px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score .bc-status { font-size: calc(8px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-match-clock { padding: 2px; }
}

.bc-page.bc-page.bc-page.bc-page .bc-ui-scale-control {
  border: 1px solid #ffffff25;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  background: #ffffff05;
}
.bc-page.bc-page.bc-page.bc-page .bc-ui-scale-heading, .bc-page.bc-page.bc-page.bc-page .bc-ui-scale-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bc-page.bc-page.bc-page.bc-page .bc-ui-scale-heading label { font-size: 14px; font-weight: 650; color: #f1f5fb; }
.bc-page.bc-page.bc-page.bc-page .bc-ui-scale-heading output { font-size: 18px; font-weight: 750; color: #ffe7b3; font-variant-numeric: tabular-nums; }
.bc-page.bc-page.bc-page.bc-page .bc-ui-scale-control input { display: block; width: 100%; height: 44px; margin: 2px 0; accent-color: #d9bd80; cursor: pointer; }
.bc-page.bc-page.bc-page.bc-page .bc-ui-scale-footer > span { font-size: 11px; color: #d0d0d5; }
.bc-page.bc-page.bc-page.bc-page .bc-ui-scale-footer button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid #ffffff25; border-radius: 7px; background: #1b2a3d; color: #f1f5fb; font-size: 12px; cursor: pointer; }
.bc-page.bc-page.bc-page.bc-page .bc-ui-scale-footer button:disabled { opacity: .55; cursor: default; }
.bc-page.bc-page.bc-page.bc-page .bc-ui-scale-control p { margin: 8px 0 0; color: #d0d0d5; font-size: 12px; line-height: 1.5; }
.bc-page.bc-page.bc-page.bc-page .bc-ui-scale-control :is(input, button):focus-visible { outline: 2px solid #ffe7b3; outline-offset: 3px; }

/* The same materials and typography carry through every part of the player. */
.bc-page.bc-page.bc-page.bc-page.bc-production .bc-player {
  border-radius: 18px;
  border: 1px solid #dda76538;
  background: #0c1420;
  box-shadow: 0 24px 70px #0005;
}
.bc-page.bc-page.bc-page.bc-page.bc-production .bc-matchbar {
  background: radial-gradient(ellipse at 0 0, #dda76512, transparent 65%), linear-gradient(110deg, #232630, #111217);
  border-bottom: 1px solid #dda76526;
  min-height: 76px;
  padding: 18px 24px;
}
.bc-page.bc-page.bc-page.bc-page.bc-production .bc-matchbar .bc-eyebrow { font-size: 10px; letter-spacing: .14em; color: #d2b884; }
.bc-page.bc-page.bc-page.bc-page.bc-production .bc-matchbar strong { font-size: 16px; font-weight: 650; line-height: 1.4; color: #f4f6fb; }
.bc-page.bc-page.bc-page.bc-page.bc-production .bc-wordmark { font-size: 28px; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-side {
  background: linear-gradient(125deg, #1b2a3bf7, #191b22f7);
  border-color: #d0d0d530;
  border-top-color: var(--side);
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-team-name { letter-spacing: .04em; color: var(--side); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card[data-selected='true'] { background: linear-gradient(105deg, color-mix(in srgb, var(--side) 16%, #232630), #232630); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-record {
  border: 1px solid #ffffff15;
  border-radius: 6px;
  padding: 2px calc(6px * var(--bc-s));
  background: #080f194f;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score {
  background: radial-gradient(ellipse at 50% 0, #dda76512, transparent 65%), linear-gradient(150deg, #232630f7, #111217f7);
  border-color: #dda76538;
  border-top-color: #dda765;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score .bc-status { justify-content: center; padding: 4px 8px; background: #ffffff09; border-radius: 4px; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score .bc-status::before { width: 5px; height: 5px; box-shadow: 0 0 7px currentColor; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-match-clock { border-color: #dda76524; background: linear-gradient(110deg, #dda7650c, #ffffff05); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > strong > span:first-child { color: #dda765; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > strong > span:last-child { color: #edd4a8; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] :is(.bc-viewer-actions > .bc-icon, .hsb-toggle) {
  border: 1px solid #d0d0d530;
  border-radius: 10px;
  background: linear-gradient(145deg, #232630f5, #111217f5);
  box-shadow: 0 3px 14px #0004;
  color: #dbe6f6 !important;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] :is(.bc-viewer-actions > .bc-icon, .hsb-toggle):hover { border-color: #dda76580; background: #343742; color: #ffe7b3 !important; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-viewer-toolbar-context { color: #dda765; font-size: max(10px, calc(10px * var(--bc-s))); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-viewer-toolbar-context small { color: #d0d0d5; font-size: max(10px, calc(10px * var(--bc-s))); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dock {
  border: 1px solid #d0d0d53b;
  border-radius: 13px;
  background: linear-gradient(130deg, #232630f5, #191b22f5);
  padding: 6px;
  gap: 6px;
  box-shadow: 0 8px 28px #0006;
  backdrop-filter: blur(12px);
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-perspectives { gap: 6px; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-perspectives > button {
  min-height: max(44px, calc(46px * var(--bc-s)));
  padding: 5px 10px 5px 6px;
  border-radius: 8px;
  gap: 8px;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-perspectives > button[aria-pressed='true'] {
  border-color: var(--side);
  background: linear-gradient(110deg, color-mix(in srgb, var(--side) 16%, #232630), #282a34);
  box-shadow: inset 0 0 0 1px #ffffff08;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-perspectives .bc-avatar { width: calc(30px * var(--bc-s)); height: calc(30px * var(--bc-s)); border-radius: 6px; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-perspectives button > span:not(.bc-avatar) { font-size: max(11px, calc(11px * var(--bc-s))); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-perspectives small { font-size: max(8px, calc(8px * var(--bc-s))); letter-spacing: .03em; color: #adb0ba; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dock .bc-icon { width: 44px; min-width: 44px; height: 44px; border-radius: 8px; color: #d8e4f3; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dock .bc-icon:hover { color: #ffe7b3; background: #ffffff0e; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dock .bc-icon > small { font-size: 8px; letter-spacing: 0; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-transport {
  background: linear-gradient(115deg, #232630, #111217 65%);
  border-top-color: #dda76524;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-timeline-track { height: 4px; background: #393c45; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-timeline-track > i { height: 4px; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-elapsed { background: linear-gradient(90deg, #c6a568, #ffe4ad); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-timeline input::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border: 2px solid #fff0cd; background: #dda765; box-shadow: 0 0 0 4px #dda76516; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-timeline input::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #fff0cd; background: #dda765; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-playback { gap: 5px; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-playback .bc-icon { width: 44px; height: 44px; border-radius: 9px; color: #d4e1f2; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-playback .bc-icon:hover { background: #ffffff0b; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-play { width: 44px; height: 44px; border-radius: 9px; background: linear-gradient(135deg, #f6dfae, #d4b477); box-shadow: 0 3px 12px #dda76512; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-playback time { font-size: max(11px, calc(11px * var(--bc-s))); color: #eef4ff; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-playback time > span { font-size: max(10px, calc(10px * var(--bc-s))); color: #d0d0d5; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] :is(.bc-speed select, .bc-map-select select, .bc-control-select select) { min-height: 44px; border-radius: 9px; background: #232630; border-color: #ffffff25; font-size: 12px; color: #eef4ff; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-return-live { min-height: 44px; border-radius: 8px; background: #dda76512; border: 1px solid #dda76540; padding: 0 10px; font-size: max(10px, calc(10px * var(--bc-s))); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-center-play { background: linear-gradient(135deg, #232630e8, #191b22e8); border-color: #dda765b0; box-shadow: 0 0 0 7px #dda7650e, 0 10px 36px #0005; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-center-play > span { font-size: 9px; letter-spacing: .08em; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-live-wait { background: radial-gradient(ellipse at 50% 42%, #dda76512, transparent 60%), linear-gradient(150deg, #232630, #0f1014); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-live-wait strong { font-size: clamp(18px, 2.2vw, 28px); letter-spacing: -.02em; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-live-wait p { font-size: 13px; max-width: 40ch; line-height: 1.6; color: #d0d0d5; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-connection { background: #07111ed9; backdrop-filter: blur(5px); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-connection small { font-size: 12px; max-width: 40ch; text-align: center; padding: 0 16px; line-height: 1.5; }
.bc-page.bc-page.bc-page.bc-page .bc-player-foot { background: #191b22; padding: 16px 22px; border-top-color: #ffffff1c; }
.bc-page.bc-page.bc-page.bc-page .bc-player-foot > span { font-size: 10px; color: #d0d0d5; letter-spacing: .05em; }
.bc-page.bc-page.bc-page.bc-page .bc-player-foot b { font-size: 10px; color: #9296a3; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dialog { border-color: #dda76545; border-radius: 16px; background: linear-gradient(150deg, #232630, #191b22 60%); box-shadow: 0 18px 80px #0009; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dialog > header { padding: 20px; background: #ffffff03; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dialog .bc-eyebrow { font-size: 9px; letter-spacing: .1em; color: #ddc38e; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dialog h2 { font-size: 27px; font-weight: 650; color: #f1f5fb; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dialog header .bc-icon { width: 44px; height: 44px; border: 1px solid #ffffff22; border-radius: 9px; background: #ffffff04; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-settings-tabs { padding: 6px 10px; gap: 3px; background: #11121760; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-settings-tabs button { min-height: 44px; border-radius: 7px; border: 1px solid transparent; font-size: 12px; color: #d0d0d5; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-settings-tabs button[aria-pressed='true'] { background: #dda76512; border-color: #dda76545; color: #ffe7b3; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-presets button { border-radius: 9px; padding: 8px; background: #111217; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-presets button[aria-pressed='true'] { border-color: #dda76590; background: linear-gradient(135deg, #dda76514, #191b22); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-presets strong { font-size: 12px; color: #eef4ff; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-presets small { color: #d0d0d5; font-size: 10px; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-toggle { min-height: 52px; padding-block: 12px; border-bottom-color: #ffffff15; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-toggle > span { font-size: 13px; color: #e3ecf8; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-toggle small { font-size: 11px; color: #adb0ba; line-height: 1.6; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dialog > footer { font-size: 11px; color: #d0d0d5; }

/* Portrait cards give nicknames a full line and group the numeric data below. */
@media (max-width: 760px) and (orientation: portrait) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card { grid-template-rows: auto auto auto 4px; min-height: calc(82px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-identity { grid-column: 2 / -1; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-vitals > strong { grid-row: 2; grid-column: 1 / 3; justify-self: start; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-record { grid-row: 3; grid-column: 1 / -1; justify-content: space-between; padding-inline: 4px; font-size: calc(16px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-record-label { grid-row: 2; grid-column: 3; text-align: right; font-size: calc(7px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-record-label-full { display: inline; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-record-label-short { display: none; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-health { grid-row: 4; }
}
@media (max-width: 760px) {
  .bc-page.bc-page.bc-page.bc-page.bc-production .bc-matchbar { min-height: 64px; padding: 12px; gap: 12px; }
  .bc-page.bc-page.bc-page.bc-page.bc-production .bc-matchbar strong { font-size: 12px; }
  .bc-page.bc-page.bc-page.bc-page.bc-production .bc-matchbar .bc-eyebrow { font-size: 8px; }
  .bc-page.bc-page.bc-page.bc-page.bc-production .bc-wordmark { font-size: 24px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dock { border-radius: 0; border-inline: 0; padding: 6px; gap: 4px; box-shadow: none; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-perspectives > button { min-width: 44px; min-height: 44px; padding: 4px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dock .bc-icon { width: 44px; min-width: 44px; height: 44px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-playback { gap: 3px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-playback time { margin-left: 4px; font-size: 11px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-playback time > span { font-size: 10px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-settings-tabs button { font-size: 11px; gap: 4px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dialog > header { padding: 16px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dialog h2 { font-size: 24px; }
}
@media (orientation: landscape) and (max-height: 550px) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-dock { border-radius: 0; box-shadow: none; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-perspectives > button { min-width: 44px; min-height: 44px; padding: 4px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-playback time { font-size: 11px; margin-left: 3px; }
}

.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale][data-pending='true'] .bc-score { display: none; }
@media (max-width: 760px) and (orientation: portrait) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score .bc-status { padding: 2px 6px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-ui-scale] .bc-viewport { min-height: calc(86px + 100px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-ui-scale] .bc-roster { max-height: 40dvh; flex: 0 1 auto; min-height: 0; grid-auto-rows: max-content; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c6a568 #191b22; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-perspectives .bc-avatar { width: 28px; height: 28px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-return-live { font-size: 10px; padding-inline: 4px; gap: 4px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-playback-secondary { gap: 4px; }
}
/* Surrounding live page follows the player material system. */
@media (orientation: landscape) and (max-height: 550px) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card { grid-template-rows: auto auto auto 3px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-identity { grid-column: 2 / -1; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-vitals > strong { grid-row: 2; grid-column: 1 / 3; justify-self: start; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-record { grid-row: 3; grid-column: 1 / -1; justify-content: space-between; padding-inline: 2px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-record-label { grid-row: 2; grid-column: 3; text-align: right; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-health { grid-row: 4; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-ui-scale] .bc-roster { max-height: calc(100dvh - var(--bc-viewer-toolbar-height) - 110px); grid-auto-rows: max-content; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(6px * var(--bc-s)); padding: 5px 8px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score .bc-status { grid-column: 1 / -1; font-size: calc(9px * var(--bc-s)); margin-bottom: 4px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > strong { font-size: calc(26px * var(--bc-s)); gap: calc(4px * var(--bc-s)); margin: 0; align-self: center; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > strong[data-long-score='true'] { font-size: calc(18px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > div { gap: 3px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > div > span { font-size: calc(8px * var(--bc-s)); line-height: 1.2; text-align: center; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > div > span > b { font-size: inherit; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-match-clock { padding: 3px 0; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-match-clock > span { font-size: calc(7px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-score > small { grid-column: 1 / -1; font-size: calc(8px * var(--bc-s)); }
}
.hl-page.hl-page.hl-page :is(.hl-broadcast, .hs-score, .hs-styles article, .hl-data-only) { background: linear-gradient(135deg, #232630, #191b22); border-color: #d0d0d530; border-radius: 16px; }
.hl-page.hl-page.hl-page .hl-match-heading { background: linear-gradient(110deg, #dda7650c, transparent); border-bottom-color: #dda76526; padding: 22px 26px; }
.hl-page.hl-page.hl-page .hl-status { color: #edd4a8; background: #dda7650c; border-color: #dda76538; border-radius: 8px; font-size: 12px; padding: 9px 12px; }
.hl-page.hl-page.hl-page .hl-status.is-stale { color: #ffe0a1; background: #dda7650b; border-color: #dda76538; }
.hl-page.hl-page.hl-page .hl-notice { padding-block: 10px; font-size: 11px; }
.hl-page.hl-page.hl-page .hl-series article { border-radius: 12px; border-color: #d0d0d530; }
.hl-page.hl-page.hl-page .hl-series article.is-current { border-color: #dda76588; box-shadow: inset 0 2px #dda765; }
.hl-page.hl-page.hl-page .hl-series article strong { color: #ffe0a1; }
.hl-page.hl-page.hl-page .hl-result-link { display: inline-flex; min-height: 44px; align-items: center; padding: 10px 14px; border: 1px solid #dda76540; border-radius: 9px; background: #dda76509; }
@media (max-width: 700px) {
  .hl-page.hl-page.hl-page .hl-match-heading { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] :is(.bc-dock, .bc-player-card, .bc-viewer-toolbar) { transition: none; }
}

/* Shrink the complete HUD below 80%, including its old fixed-size controls.
   Keep dialogs and the recovery control outside this scaling context. */
.bc-page.bc-page.bc-page.bc-page .bc-mobile-actions { display: none; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-small='true'] { --bc-s: .8; --bc-shrink: max(.125, calc(var(--bc-ui-scale) / .8)); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-small='true'] :is(.bc-score,.bc-roster,.bc-dock,.bc-transport,.bc-viewer-toolbar,.bc-corner-tools,.hc-game-hud,.bc-killfeed,.bc-center-play,.bc-stage-brand) { zoom: var(--bc-shrink); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-minimal='true'] .bc-mobile-actions { display: flex; }
.bc-page.bc-page.bc-page.bc-page .bc-mobile-actions { position: absolute; top: max(6px, env(safe-area-inset-top, 0px)); right: max(6px, env(safe-area-inset-right, 0px)); z-index: 46; gap: 4px; }
.bc-page.bc-page.bc-page.bc-page .bc-mobile-actions button { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; touch-action: manipulation; padding: 0; border: 1px solid #dda76545; border-radius: 9px; background: #191b22e8; color: #edd4a8; }
.bc-page.bc-page.bc-page.bc-page .bc-mobile-actions button:focus-visible { outline: 2px solid #edd4a8; outline-offset: 2px; }
/* These touch targets never follow HUD scaling: fullscreen, exit and settings
   must still work at 10%, including when the replay controls are folded. */

/* Mobile playback controls open in a drawer below the persistent broadcast HUD. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 550px) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-viewer-toolbar='true'] { display: block; --bc-viewer-toolbar-height: 0px; --bc-drawer-zoom: min(1,calc(var(--bc-ui-scale) / .8)); --bc-mobile-drawer-height: calc(var(--bc-transport-height,85px) + var(--bc-dock-height,68px)); --hkc-safe-top: 52px; --hkc-safe-bottom: 8px; --hkc-safe-inline: 8px; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-viewer-toolbar='true'] .bc-mobile-actions { display: flex; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-viewer-toolbar='true'] .bc-viewer-toolbar { display: none; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-viewer-toolbar='true'] .bc-viewport { display: block; width: 100%; grid-area: auto; min-height: 235px; aspect-ratio: 16 / 9; max-height: none; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-viewer-toolbar='true'] { display: block; height: var(--hc-fullscreen-height,100dvh) !important; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-viewer-toolbar='true'] .bc-viewport { height: 100%; min-height: 0; aspect-ratio: auto; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-viewer-toolbar='true'][data-mobile-panels='false'] :is(.bc-dock,.bc-transport) { display: none !important; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-viewer-toolbar='true'][data-mobile-panels='true'] .bc-dock { position: relative; inset: auto; transform: none; display: flex; width: 100%; opacity: 1; pointer-events: auto; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena[data-viewer-toolbar='true'][data-mobile-panels='true'] .bc-transport { position: relative; inset: auto; display: block; width: 100%; opacity: 1; pointer-events: auto; transform: none; }
  /* A zoomed element also scales its inset: convert measured screen pixels
     back to its local CSS pixels, rather than scaling the gap a second time. */
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-viewer-toolbar='true'][data-mobile-panels='true'] .bc-dock { position: absolute; inset: auto 0 calc(var(--bc-transport-height,85px) / var(--bc-drawer-zoom)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-viewer-toolbar='true'][data-mobile-panels='true'] .bc-transport { position: absolute; inset: auto 0 0; }
}

/* Finish the autumn palette in shared settings and tournament replay controls. */
.bc-page.bc-page.bc-page.bc-page {
  --accent: #dda765; --accent-2: #edd4a8; --card: #191b22;
  --text: #f4f0e9; --muted: #adb0ba; --border: #393c45;
}
.bc-page.bc-page.bc-page.bc-page .bc-ui-scale-footer button { background: #232630; border-color: #dda76540; color: #edd4a8; }
.bc-page.bc-page.bc-page.bc-page .bc-ui-scale-footer button:hover:enabled { background: #dda76518; border-color: #dda76580; }
.bc-page.bc-page.bc-page.bc-page .bc-preset-mini { background: linear-gradient(155deg,#393c45,#191b22 45%,#232630); }
.bc-page.bc-page.bc-page.bc-page .bc-preset-mini i { background: #dda765b0; }
.bc-page.bc-page.bc-page.bc-page .bc-preset-mini i:nth-child(2) { background: #edd4a8b0; }
.bc-page.bc-page.bc-page.bc-page .bc-toggle > i { background: #393c45; border-color: #595d66; }
.bc-page.bc-page.bc-page.bc-page .bc-toggle > i::before { background: #b9b9c1; }
.bc-page.bc-page.bc-page.bc-page .bc-toggle input:checked + i { background: #dda765; border-color: #dda765; }
.bc-page.bc-page.bc-page.bc-page .bc-toggle input:checked + i::before { background: #191b22; }
.bc-page.bc-page.bc-page.bc-page .bc-toggle input:focus-visible + i { outline-color: #edd4a8; }
.bc-page.bc-page.bc-page.bc-page :is(input[type=range],input[type=checkbox],input[type=radio]) { accent-color: #dda765; }
.bc-page.bc-page.bc-page.bc-page .bc-dialog :is(h2,h3,.bc-presets strong,.bc-toggle > span) { color: #f4f0e9; }
.bc-page.bc-page.bc-page.bc-page .bc-dialog header .bc-icon { color: #edd4a8; }
.bc-page.bc-page.bc-page.bc-page :is(.bc-control-select select,.bc-key-list kbd,.bc-camera-hint) { color: #d0d0d5; border-color: #393c45; }
.bc-page.bc-page.bc-page.bc-page .hq-control { background: #191b22; border-color: #393c45; color: #f4f0e9; }
.bc-page.bc-page.bc-page.bc-page .hq-option { background: #232630; border-color: #393c45; color: #d0d0d5; }
.bc-page.bc-page.bc-page.bc-page .hq-option small { color: #adb0ba; }
.bc-page.bc-page.bc-page.bc-page .hq-option:hover { background: #30323c; border-color: #dda76570; }
.bc-page.bc-page.bc-page.bc-page .hq-option:has(input:checked) { background: linear-gradient(120deg,#dda76520,#232630); border-color: #dda765; color: #edd4a8; }
.bc-page.bc-page.bc-page.bc-page .hq-option:has(input:checked) small { color: #edd4a8; }
.bc-page.bc-page.bc-page.bc-page .hq-caption p { color: #adb0ba; }
.bc-page.bc-page.bc-page.bc-page .hq-gamma { --card: #191b22; --border: #393c45; --accent: #dda765; }
.bc-page.bc-page.bc-page.bc-page .hc-audio-settings > div { background: #191b22fc; border-color: #dda76545; color: #f4f0e9; }
.bc-page.bc-page.bc-page.bc-page .hc-audio-settings > summary { color: #edd4a8; border-color: #393c45; }
.bc-page.bc-page.bc-page.bc-page .hc-audio-settings p { color: #adb0ba; }
.bc-page.bc-page.bc-page.bc-page .hc-three-tools .hc-audio-control { background: #191b22ed; border-color: #dda76540; }
.bc-page.bc-page.bc-page.bc-page .hc-three-tools .hc-audio-toggle { color: #d0d0d5; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] :is(.bc-dock .bc-icon,.bc-playback .bc-icon) { color: #d0d0d5; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-perspectives > button:not([aria-pressed=true]) { background: #191b22; border-color: #393c45; color: #d0d0d5; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-playback time { color: #f4f0e9; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-connection { background: #0f1014d9; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-identity > span { color: #edd4a8 !important; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] :is(.bc-score > strong i,.bc-player-record i) { color: #adb0ba; }
.bc-page.bc-page.bc-page.bc-page .hc-game-hud-force { color: #edd4a8bf; }
.bc-page.bc-page.bc-page.bc-page .bc-dialog :is(p,small,.bc-key-list) { color: #adb0ba; }
.bc-page.bc-page.bc-page.bc-page .bc-key-list kbd { background: #232630; border-color: #595d66; color: #edd4a8; }
.bc-page.bc-page.bc-page.bc-page .bc-compact-health { display: none; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-health { height: calc(5px * var(--bc-s)); min-height: 3px; background: #393c45; box-shadow: inset 0 0 0 1px #dda76535; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .bc-player-card[data-health-known=false] .bc-health { background: repeating-linear-gradient(90deg,#dda76588 0 4px,#393c45 4px 8px); }

/* Phones retain the desktop broadcast: two player columns around the score.
   Only playback controls fold away; the complete HUD follows the size slider. */
@media (max-width:760px), (orientation:landscape) and (max-height:550px) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] {
    --bc-centre-width: calc(160px * var(--bc-s));
    --bc-score-width: calc(148px * var(--bc-s));
    --hkc-safe-top: calc(8px + 164px * var(--bc-s));
    --hkc-safe-bottom: 60px;
  }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-roster {
    display: grid; position: absolute; inset: max(6px,env(safe-area-inset-top,0px)) auto auto 50%;
    width: min(calc(1060px * var(--bc-s)),calc(100% - 16px));
    grid-template-columns: minmax(0,1fr) var(--bc-centre-width) minmax(0,1fr);
    gap: calc(8px * var(--bc-s)); padding: 0; transform: translateX(-50%);
    max-height: none; overflow: visible; background: none; border-radius: 0;
  }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-roster > .bc-side:first-child { grid-column: 1; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-roster > .bc-side:last-child { grid-column: 3; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-score {
    inset: max(6px,env(safe-area-inset-top,0px)) auto auto 50%; transform: translateX(-50%);
    width: var(--bc-score-width); max-width: none; display: block;
    padding: calc(6px * var(--bc-s)); border-radius: 10px;
  }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-score > strong { display: flex; justify-content: center; font-size: calc(26px * var(--bc-s)); gap: calc(6px * var(--bc-s)); margin: calc(3px * var(--bc-s)) 0; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-score > strong[data-long-score=true] { font-size: calc(18px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-score > div { display: flex; flex-direction: column; gap: calc(3px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-score > .bc-status { display: flex; font-size: calc(9px * var(--bc-s)); margin-bottom: calc(3px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-score > small { display: block; font-size: calc(8px * var(--bc-s)); margin-top: calc(3px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-score > div > span { display: block; font-size: calc(8px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-match-clock { width: 100%; display: flex; padding: calc(3px * var(--bc-s)); border: 1px solid #dda76524; background: #dda7650c; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-match-clock > span { display: block; font-size: calc(7px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-match-clock > b { font-size: var(--bc-clock-size); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-score-avatars { display: flex; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-compact-health { display: none; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-mobile-actions { top: auto; right: max(8px,env(safe-area-inset-right,0px)); bottom: max(8px,env(safe-area-inset-bottom,0px)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-expanded[data-ui-scale][data-viewer-toolbar=true][data-mobile-panels=true] .bc-mobile-actions { bottom: calc(var(--bc-mobile-drawer-height) + max(8px,env(safe-area-inset-bottom,0px))); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .hc-game-hud { bottom: max(56px,env(safe-area-inset-bottom,0px)); }
}
/* The fallback follows the visible browser viewport as address bars, keyboards
   and orientation change. Native fullscreen uses the browser's own viewport. */
.bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded {
  inset: var(--hc-fullscreen-top,0px) auto auto var(--hc-fullscreen-left,0px) !important;
  width: var(--hc-fullscreen-width,100%) !important;
  height: var(--hc-fullscreen-height,100dvh) !important;
  margin: 0 !important;
  overscroll-behavior: contain;
}
@media (max-width:760px), (orientation:landscape) and (max-height:550px) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-ui-scale][data-viewer-toolbar=true] .bc-roster {
    width: min(calc(1060px * var(--bc-s)),calc(100% - 2 * max(8px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))));
  }
}
@media (max-width:760px) and (orientation:portrait) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] { --bc-centre-width: min(calc(104px * var(--bc-s)),31vw); --bc-score-width: min(calc(94px * var(--bc-s)),28vw); --bc-clock-size: calc(20px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true]:not(.bc-expanded) .bc-viewport { min-height: calc(88px + 210px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-player-card { padding-inline: calc(4px * var(--bc-s)); column-gap: calc(4px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-team-name { height: calc(22px * var(--bc-s)); padding-inline: calc(4px * var(--bc-s)); font-size: calc(8px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-player-record { font-size: min(calc(16px * var(--bc-s)),20cqi); gap: calc(2px * var(--bc-s)); padding: 0; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-score > strong { font-size: calc(22px * var(--bc-s)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-score > strong[data-long-score=true] { font-size: calc(12px * var(--bc-s)); }
}
@media (max-width:760px), (orientation:landscape) and (max-height:550px) {
  @container bc-card (max-width:120px) {
    .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-record-label { display: none; }
    .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .bc-player-vitals > strong { grid-column: 1 / -1; font-size: min(var(--bc-card-hp),28cqi); }
  }
}

/* Followed-player vitals stay inside the image, even with portrait cards.
   Scale their contents directly so safe-area offsets never shrink with zoom. */
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .hc-game-hud {
  --hc-v: var(--bc-ui-scale);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: calc(8px * var(--hc-v)); zoom: 1;
  inset: auto auto max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));
  width: min(calc(304px * var(--hc-v)),calc(100% - 16px)); padding: 0;
  font-family: var(--font-body); line-height: 1;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] :is(.hc-game-hud-left,.hc-game-hud-right) {
  display: flex; flex-direction: column; align-items: stretch;
  padding: calc(9px * var(--hc-v)); gap: calc(6px * var(--hc-v));
  border: 1px solid #dda76550; border-radius: calc(9px * var(--hc-v));
  background: linear-gradient(135deg,#232630ed,#111217ed); box-shadow: 0 3px 12px #0004;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .hc-game-hud-value {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline;
  gap: calc(4px * var(--hc-v)); height: auto; min-width: 0;
  margin: 0; color: #edd4a8; text-shadow: none;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .hc-game-hud-label {
  display: block !important; font-size: calc(9px * var(--hc-v)); letter-spacing: .07em;
  font-weight: 600; color: #edd4a8;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .hc-game-hud-fallback {
  display: block; position: static; visibility: visible; padding: 0;
  font: 650 calc(27px * var(--hc-v))/1 var(--font-heading);
  font-variant-numeric: tabular-nums; color: #fff1d9;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .hc-game-hud-bitmap { display: none; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .hc-game-hud-meter {
  display: block !important; grid-column: 1 / -1; height: calc(5px * var(--hc-v));
  overflow: hidden; border-radius: calc(2px * var(--hc-v)); background: #fff1d920;
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .hc-game-hud-meter > i {
  display: block; height: 100%; background: linear-gradient(90deg,#b77838,#ffdb98);
}
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .hc-game-hud-force .hc-game-hud-meter > i { background: linear-gradient(90deg,#bbaa8b,#fff1d9); }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .hc-game-hud-force { order: 0; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .hc-game-hud-style { order: 1; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] :is(.hc-game-hud-armor,.hc-game-hud-style) :is(.hc-game-hud-label,.hc-game-hud-fallback) { font-size: calc(9px * var(--hc-v)); color: #d0d0d5; letter-spacing: 0; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .hc-game-hud-health[data-critical=true] .hc-game-hud-fallback { color: #ffb1a1; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .hc-game-hud-health[data-critical=true] .hc-game-hud-meter > i { background: #ff8b73; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .hc-game-hud-value[data-known=false] .hc-game-hud-fallback { color: #adb0ba; }
.bc-page.bc-page.bc-page.bc-page .bc-arena[data-ui-scale] .hc-game-hud-value[data-known=false] .hc-game-hud-meter { background: repeating-linear-gradient(110deg,#dda76540 0 calc(3px * var(--hc-v)),#fff1d90b calc(3px * var(--hc-v)) calc(6px * var(--hc-v))); }
/* Desktop fullscreen keeps vitals above the transport when it is revealed.
   An embedded player's transport is outside its image, so needs no lift. */
@media (min-width:761px) and (min-height:551px) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-ui-scale] .hc-game-hud { bottom: calc(var(--bc-clearance,0px) + max(8px,env(safe-area-inset-bottom,0px))); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-ui-scale][data-transport=true] .hc-game-hud { bottom: calc(max(var(--bc-clearance,0px),var(--bc-hud-dock-clearance,0px)) + max(8px,env(safe-area-inset-bottom,0px))); }
}
@media (max-width:760px), (orientation:landscape) and (max-height:550px) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .hc-game-hud { bottom: max(8px,env(safe-area-inset-bottom,0px)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-expanded[data-ui-scale][data-viewer-toolbar=true][data-mobile-panels=true] .hc-game-hud { bottom: calc(var(--bc-mobile-drawer-height) + max(8px,env(safe-area-inset-bottom,0px))); }
}
@media (max-width:760px) and (orientation:portrait) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true] .hc-game-hud { bottom: calc(60px + env(safe-area-inset-bottom,0px)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-expanded[data-ui-scale][data-viewer-toolbar=true][data-mobile-panels=true] .hc-game-hud { bottom: calc(60px + var(--bc-mobile-drawer-height) + env(safe-area-inset-bottom,0px)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena[data-ui-scale][data-viewer-toolbar=true]:not(.bc-expanded) .bc-viewport { min-height: calc(120px + 260px * var(--bc-ui-scale)); }
}
/* A short landscape screen has no spare vertical strip with the drawer open.
   Put compact vitals in its empty centre, between portraits and tool buttons. */
@media (orientation:landscape) and (max-height:550px) and (min-width:600px) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-expanded[data-ui-scale][data-viewer-toolbar=true][data-mobile-panels=true] .hc-game-hud {
    --hc-v: min(1,var(--bc-ui-scale)); --hc-drawer-zoom: min(1,calc(var(--bc-ui-scale) / .8));
    left: 50%; bottom: calc(var(--bc-transport-height,85px) + 7px * var(--hc-drawer-zoom)); transform: translateX(-50%);
    width: min(calc(160px * var(--hc-v)),calc(100% - 470px * var(--hc-drawer-zoom))); z-index: 32;
  }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-mobile-panels=true] :is(.hc-game-hud-left,.hc-game-hud-right) { padding: calc(6px * var(--hc-v)); gap: 0; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-mobile-panels=true] .hc-game-hud-fallback { font-size: calc(18px * var(--hc-v)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-mobile-panels=true] .hc-game-hud-label { font-size: calc(8px * var(--hc-v)); letter-spacing: 0; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-mobile-panels=true] .hc-game-hud-meter { height: calc(3px * var(--hc-v)); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-expanded[data-mobile-panels=true] :is(.hc-game-hud-armor,.hc-game-hud-style) { display: none; }
}

/* Score-first player cards. Health is a separate, quiet meter row. */
.bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-player-card { grid-template-rows: auto auto; }
.bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-identity { grid-row: 1; grid-column: 2; }
.bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-player-vitals { display: flex; flex-direction: column; align-items: flex-end; gap: calc(3px * var(--bc-s)); grid-row: 1; grid-column: 3; min-width: 0; }
.bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-player-record { padding: 0; font-size: calc(28px * var(--bc-s)); gap: calc(5px * var(--bc-s)); color: #f4f0e9; line-height: 1; justify-content: flex-end; }
.bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-record-label { display: block; font-size: calc(7px * var(--bc-s)); line-height: 1.2; text-align: right; letter-spacing: .04em; color: #adb0ba; }
.bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-player-health { grid-row: 2; grid-column: 1 / -1; display: flex; align-items: center; gap: calc(8px * var(--bc-s)); min-width: 0; }
.bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-player-health > .bc-health { flex: 1; min-width: 0; }
.bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-health-value { display: flex; align-items: baseline; gap: calc(3px * var(--bc-s)); flex: none; margin: 0; font-family: var(--font-heading); font-size: calc(14px * var(--bc-s)); line-height: 1.2; color: #d5d1cb; white-space: nowrap; }
.bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-health-value > small { font-size: calc(8px * var(--bc-s)); color: #adb0ba; }
.bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-player-card[data-health-critical=true] .bc-health-value { color: #ffbdad; }
.bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-health-value > .bc-eliminated { color: #ffbdad; }
@container bc-card (max-width:180px) {
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-player-card { grid-template-rows: auto auto auto; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-identity { grid-column: 2 / -1; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-player-vitals { grid-row: 2; grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-player-record { font-size: min(calc(26px * var(--bc-s)),20cqi); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-player-health { grid-row: 3; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-health-value { font-size: min(calc(12px * var(--bc-s)),18cqi); }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-record-label-full { display: none; }
  .bc-page.bc-page.bc-page.bc-page .bc-arena.bc-arena.bc-arena[data-ui-scale] .bc-record-label-short { display: inline; }
}