.mq-broadcast {
  --ct: #7dc9ef;
  --t: #e7bb70;
  --muted: #92999d;
  --line: #ffffff10;
  color: #edf0f1;
  background: #111415;
  border: 1px solid #ffffff18;
  border-radius: 12px;
  overflow: hidden;
  font:
    13px Roboto,
    Arial,
    sans-serif;
  margin: 24px 0;
  font-variant-numeric: tabular-nums;
}
.mq-broadcast * {
  box-sizing: border-box;
}
.mq-broadcast button {
  font: inherit;
  cursor: pointer;
  color: inherit;
}
.mq-broadcast button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}
.mq-broadcast svg {
  flex-shrink: 0;
  vertical-align: middle;
}
.mq-broadcast .is-ct {
  --team: var(--ct);
}
.mq-broadcast .is-t {
  --team: var(--t);
}
.mq-broadcast-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 27px 30px;
  background: radial-gradient(ellipse at 50% -70%, #52656e35, transparent 70%);
  border-bottom: 1px solid var(--line);
}
.mq-broadcast-eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.8px;
  color: var(--muted);
}
.mq-broadcast-eyebrow i {
  margin: 0 6px;
  font-style: normal;
  color: #555;
}
.mq-broadcast h2 {
  font:
    500 29px Oswald,
    sans-serif;
  margin: 7px 0 0;
  letter-spacing: 0.2px;
}
.mq-broadcast-score {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 21px;
  font:
    500 44px Oswald,
    sans-serif;
}
.mq-broadcast-score > span {
  color: var(--team);
}
.mq-broadcast-score > i {
  font:
    300 25px Roboto,
    sans-serif;
  color: #72797d;
}
.mq-broadcast-score small {
  flex-basis: 100%;
  margin-top: 7px;
  font:
    500 9px Roboto,
    sans-serif;
  letter-spacing: 1.5px;
  color: #a9b0b4;
}
.mq-broadcast-score small i {
  margin: 0 7px;
}
.mq-broadcast-status {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.mq-broadcast-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  letter-spacing: 1.1px;
  color: #bec9cd;
  border: 1px solid #ffffff18;
  border-radius: 4px;
  padding: 5px 8px;
}
.mq-broadcast-status strong {
  font-size: 23px;
  letter-spacing: 1px;
}
.mq-broadcast-status small {
  color: var(--muted);
  font-size: 10px;
}
.mq-broadcast-arena {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.65fr) minmax(
      220px,
      1fr
    );
  align-items: stretch;
}
.mq-broadcast-team {
  padding: 22px 16px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--team) 5%, transparent),
    transparent 45%
  );
}
.mq-broadcast-team header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 3px 18px;
}
.mq-broadcast-side {
  border: 1px solid color-mix(in srgb, var(--team) 40%, transparent);
  color: var(--team);
  display: grid;
  place-items: center;
  width: 30px;
  height: 34px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
}
.mq-broadcast-team h3 {
  font-size: 13px;
  margin: 0 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 145px;
}
.mq-broadcast-team header small {
  color: var(--muted);
  font-size: 10px;
}
.mq-broadcast-team header > b {
  margin-left: auto;
  font:
    500 28px Oswald,
    sans-serif;
  color: var(--team);
}
.mq-broadcast-columns {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: 0.8px;
  color: #899095;
  padding: 0 4px 10px;
}
.mq-broadcast-player {
  padding: 12px 10px 10px;
  background: #ffffff03;
  border: 1px solid #ffffff08;
  border-left: 2px solid color-mix(in srgb, var(--team) 55%, transparent);
  border-radius: 5px;
  margin-bottom: 7px;
}
.mq-broadcast-player-top {
  display: flex;
  align-items: center;
  gap: 7px;
}
.mq-broadcast-player-top strong {
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mq-broadcast-number {
  color: var(--team);
  font-size: 9px;
}
.mq-broadcast-kad {
  margin-left: auto;
  white-space: nowrap;
  font-size: 11px;
}
.mq-broadcast-kad i {
  font-size: 9px;
  color: #647078;
  margin: 0 2px;
  font-style: normal;
}
.mq-broadcast-loadout {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  min-height: 20px;
}
.mq-broadcast-health {
  color: var(--team);
  font-size: 12px;
  white-space: nowrap;
}
.mq-broadcast-health small {
  font-size: 8px;
  color: #7d898f;
}
.mq-broadcast-gun {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: #c5cbcf;
}
.mq-broadcast-gun small {
  font-size: 8px;
  text-transform: uppercase;
}
.mq-broadcast-money {
  font-size: 10px;
  color: #aeb9be;
  min-width: 36px;
  text-align: right;
}
.mq-broadcast-hp {
  height: 2px;
  background: #ffffff0b;
  margin: 7px 0;
}
.mq-broadcast-hp i {
  display: block;
  background: var(--team);
  width: var(--hp);
  height: 100%;
  opacity: 0.8;
}
.mq-broadcast-player-extra {
  display: flex;
  justify-content: space-between;
  color: #78868d;
  font-size: 8px;
}
.mq-broadcast-player-extra b {
  font-weight: 500;
  color: #a6b0b5;
}
.mq-broadcast-player-extra i {
  margin: 0 4px;
  font-style: normal;
}
.mq-broadcast-player.is-dead {
  border-left-color: #52595d;
  background: #ffffff01;
}
.mq-broadcast-player.is-dead .mq-broadcast-loadout,
.mq-broadcast-player.is-dead .mq-broadcast-hp {
  opacity: 0.3;
}
.mq-broadcast-player.is-dead .mq-broadcast-player-top strong {
  color: #828a8f;
}
.mq-broadcast-stage {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 35%, #2b3b4120, transparent 70%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 31px,
      #ffffff02 32px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 31px,
      #ffffff02 32px
    );
}
.mq-broadcast-stage-heading {
  display: flex;
  justify-content: space-between;
  color: #95a3ab;
  font-size: 9px;
  letter-spacing: 1px;
}
.mq-broadcast-stage-heading span:last-child {
  letter-spacing: 0;
  color: #d4dce0;
}
.mq-broadcast-map {
  width: 100%;
  flex: 1;
  min-height: 280px;
  margin: 15px auto;
  overflow: visible;
}
.mq-map-site text {
  fill: #d6c19580;
  font:
    bold 4px Roboto,
    Arial;
}
.mq-map-shot {
  stroke: #ebf2f49e;
  stroke-width: 0.25;
  stroke-dasharray: 0.8 0.8;
}
.mq-map-death circle {
  fill: #151a20;
  stroke: var(--team);
  stroke-width: 0.3;
}
.mq-map-death path {
  stroke: var(--team);
  stroke-width: 0.7;
}
.mq-map-origin {
  color: var(--team);
  background: #182229;
  border: 1px solid currentColor;
  border-radius: 20%;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.mq-map-origin svg {
  width: 75%;
  height: 75%;
}
.mq-map-bomb rect {
  fill: #bd6430;
  stroke: #ffd9a0;
  stroke-width: 0.3;
}
.mq-map-bomb text {
  fill: white;
  font:
    bold 2.5px Roboto,
    Arial;
}
.mq-broadcast-selection {
  padding: 14px 10px;
  border: 1px solid #ffffff12;
  background: #14191dcc;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  font-size: 11px;
}
.mq-broadcast-selection > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.mq-broadcast-selection small {
  color: #819199;
}
.mq-broadcast-event-round {
  font-size: 9px;
  color: #a0afb7;
  border: 1px solid #ffffff18;
  border-radius: 3px;
  padding: 5px;
}
.mq-broadcast-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 13px;
  font-size: 8px;
  color: #8b989f;
}
.mq-broadcast-map-legend span:last-child {
  flex-basis: 100%;
  color: #66747c;
}
.mq-broadcast-log {
  padding: 21px 26px 25px;
  border-top: 1px solid var(--line);
}
.mq-broadcast-log > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 17px;
}
.mq-broadcast-log h3 {
  font:
    500 19px Oswald,
    sans-serif;
  margin: 5px 0 0;
}
.mq-broadcast-log header button {
  background: transparent;
  border: 1px solid #ffffff17;
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 10px;
  color: #b6c0c5;
}
.mq-broadcast-log header button:disabled {
  opacity: 0.4;
  cursor: default;
}
.mq-broadcast-events {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mq-broadcast-event {
  background: #ffffff02;
  border: 1px solid #ffffff07;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  padding: 10px 12px;
  min-height: 51px;
  min-width: 0;
}
.mq-broadcast-event:hover {
  background: #ffffff06;
}
.mq-broadcast-event.is-selected {
  border-color: #9db6c54d;
  background: #799ab40b;
}
.mq-broadcast-event-time {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #c7d1d6;
  font-size: 10px;
}
.mq-broadcast-event-time small {
  font-size: 8px;
  color: #6b7d87;
}
.mq-broadcast-event-content {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  color: var(--team);
  font-size: 11px;
}
.mq-broadcast-weapon {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #c0c9ce;
}
.mq-broadcast-weapon small {
  font-size: 8px;
  text-transform: uppercase;
}
.mq-broadcast-event-location {
  margin-left: auto;
  font-size: 8px;
  color: #7e929d;
  white-space: nowrap;
}
.mq-broadcast-event-arrow {
  color: #526977;
}
.mq-broadcast-tabs {
  display: none;
}
.mq-broadcast-wait {
  position: relative;
  text-align: center;
  background: radial-gradient(ellipse at 50% 25%, #ab393313, transparent 65%), #111213;
}
.mq-broadcast-wait-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black, transparent 75%);
  pointer-events: none;
}
.mq-broadcast-wait-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 42px 24px 35px;
}
.mq-broadcast-delay-emblem {
  width: 100px;
  height: 100px;
  display: grid;
  place-content: center;
  border: 1px solid #e6534945;
  outline: 7px solid #c3412e08;
  border-radius: 50%;
  background: radial-gradient(circle, #56282038, #151414);
  margin: 26px 0 24px;
  box-shadow: 0 0 50px #c3412e0c, inset 0 0 20px #ffffff03;
}
.mq-broadcast-delay-emblem > svg {display: none;}
.mq-broadcast-delay-emblem > span {font: 500 36px Oswald, sans-serif; line-height: 1;}
.mq-broadcast-delay-emblem small {display:block; margin-top:8px; font:500 8px Roboto, sans-serif; letter-spacing:2px; color:#b9948e;}
.mq-broadcast.mq-broadcast-wait h2 {max-width: 650px; margin:0; font-size:30px; line-height:1.3; text-wrap:balance; text-align:center;}
.mq-broadcast.mq-broadcast-wait p {
  color: #a1a3a5;
  max-width: 410px;
  margin: 14px auto 24px;
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
  text-wrap: balance;
}
.mq-broadcast-wait-status {display:inline-flex; align-items:center; gap:9px; color:#c4c6c8; font-size:9px; letter-spacing:1.3px;}
.mq-broadcast-wait-status i {width:5px; height:5px; border-radius:50%; background:#e66d61; box-shadow:0 0 0 4px #e66d6112;}
.mq-broadcast-wait-footer {position:relative; display:flex; justify-content:space-between; gap:12px; padding:16px 24px; border-top:1px solid #ffffff0a; color:#939597; font-size:10px;}
.mq-broadcast-wait-footer span {display:flex; align-items:center; gap:7px;}
.mq-match-view-switch {display:flex; width:fit-content; gap:4px; margin:0 0 18px; padding:4px; background:#ffffff04; border:1px solid #ffffff14; border-radius:7px;}
.mq-match-view-switch button {border:0; border-radius:4px; padding:10px 18px; color:#999; background:transparent; font:500 12px Roboto,Arial,sans-serif; cursor:pointer;}
.mq-match-view-switch button[aria-pressed="true"] {background:#ffffff0d; color:#fff; box-shadow:inset 0 -2px #d93633;}
.mq-match-view-switch button:focus-visible {outline:2px solid #e3736d; outline-offset:2px;}
@media(max-width:600px) {
  .mq-broadcast-wait-content {padding:32px 20px;}
  .mq-broadcast.mq-broadcast-wait h2 {font-size:25px;}
  .mq-broadcast.mq-broadcast-wait p {font-size:12px; max-width:290px;}
  .mq-broadcast-wait-footer {padding:15px 16px; font-size:9px; flex-wrap:wrap; justify-content:center;}
  .mq-match-view-switch {width:100%;}
  .mq-match-view-switch button {flex:1; min-height:42px;}
}
.mq-broadcast-map-unavailable {
  margin: auto;
  text-align: center;
  color: #9aa9b0;
  padding: 60px 10px;
}
.mq-broadcast [hidden] {
  display: none;
}
@media (min-width: 1600px) {
  .mq-broadcast-arena {
    grid-template-columns: minmax(250px, 1fr) minmax(400px, 1.8fr) minmax(
        250px,
        1fr
      );
  }
  .mq-broadcast-team {
    padding: 26px 22px;
  }
  .mq-broadcast-player {
    padding: 14px 12px;
  }
}
@media (max-width: 1000px) {
  .mq-broadcast-arena {
    grid-template-columns: 1fr 1fr;
  }
  .mq-broadcast-stage {
    grid-column: 1/-1;
    grid-row: 1;
    border: 0;
    border-bottom: 1px solid var(--line);
  }
  .mq-broadcast-map {
    max-width: 520px;
    height: 350px;
    flex: none;
  }
  .mq-broadcast-team h3 {
    max-width: 220px;
  }
}
@media (max-width: 600px) {
  .mq-broadcast {
    margin: 15px 0;
    border-radius: 8px;
  }
  .mq-broadcast-top {
    padding: 17px 14px;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }
  .mq-broadcast-top > div:first-child {
    grid-column: 1;
  }
  .mq-broadcast h2 {
    font-size: 25px;
  }
  .mq-broadcast-eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .mq-broadcast-score {
    grid-row: 2;
    grid-column: 1;
    text-align: left;
    justify-content: flex-start;
    gap: 0 15px;
    font-size: 34px;
  }
  .mq-broadcast-score small {
    text-align: left;
    font-size: 8px;
  }
  .mq-broadcast-status {
    grid-row: 1/3;
    grid-column: 2;
    gap: 9px;
  }
  .mq-broadcast-status strong {
    font-size: 27px;
  }
  .mq-broadcast-badge {
    font-size: 8px;
  }
  .mq-broadcast-tabs {
    display: flex;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 0 12px;
    gap: 16px;
  }
  .mq-broadcast-tabs button {
    border: 0;
    background: none;
    padding: 15px 5px;
    color: #92a0a8;
    font-size: 11px;
    border-bottom: 2px solid transparent;
  }
  .mq-broadcast-tabs button[aria-pressed="true"] {
    color: #fff;
    border-bottom-color: #d93633;
  }
  .mq-broadcast-arena {
    display: block;
  }
  .mq-broadcast-stage {
    padding: 19px 14px;
  }
  .mq-broadcast-map {
    height: auto;
    min-height: 245px;
    max-height: 320px;
    margin: 20px 0;
  }
  .mq-broadcast-selection {
    font-size: 10px;
  }
  .mq-broadcast-map-legend {
    gap: 11px;
  }
  .mq-broadcast-map-legend span:last-child {
    font-size: 8px;
  }
  .mq-broadcast-team {
    padding: 20px 16px;
  }
  .mq-broadcast-team h3 {
    max-width: 230px;
  }
  .mq-broadcast-player {
    padding: 13px 12px;
  }
  .mq-broadcast-log {
    padding: 20px 13px;
  }
  .mq-broadcast-events {
    grid-template-columns: 1fr;
  }
  .mq-broadcast-event {
    padding: 11px 9px;
    gap: 10px;
  }
  .mq-broadcast-event-content {
    font-size: 10px;
  }
  .mq-broadcast-event-location {
    display: none;
  }
  .mq-broadcast-event-arrow {
    margin-left: auto;
  }
  .mq-broadcast-log header button {
    font-size: 9px;
    padding: 8px;
  }
  .mq-broadcast[data-broadcast-panel="overview"] .mq-broadcast-team,
  .mq-broadcast[data-broadcast-panel="stats"] .mq-broadcast-stage,
  .mq-broadcast[data-broadcast-panel="stats"] .mq-broadcast-log,
  .mq-broadcast[data-broadcast-panel="events"] .mq-broadcast-arena {
    display: none;
  }
  .mq-broadcast[data-broadcast-panel="overview"]
    .mq-broadcast-event:nth-child(n + 4) {
    display: none;
  }
}
.mq-broadcast-event-content b,
.mq-broadcast-selection b {
  color: var(--team);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .mq-broadcast * {
    scroll-behavior: auto;
    transition: none;
    animation: none;
  }
}