@font-face {
  font-family: "Broadcast Figures";
  src: url("./assets/fonts/BarlowCondensed-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.broadcast-board.ingame-board {
  --ig-table-left:26%;
  --ig-table-width:48%;
  --ig-table-height:calc(11.75cqw + var(--ig-table-border, 2px));
  --ig-bottom-opacity:.94;
  --ig-panel: var(--cast-bg, #101419);
  --ig-raised: var(--cast-panel, #1c242d);
  --ig-line: var(--cast-rule, #424c58);
  --ig-text: var(--cast-ink, #f4f5f3);
  --ig-muted: var(--cast-muted, #b2bbc3);
  --ig-accent: var(--cast-accent, #c6d4e3);
  --ig-blue: #73b9d5;
  --ig-red: #e08185;
  --ig-number: "Broadcast Sans", "Broadcast Figures", sans-serif;
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  color: var(--ig-text);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
  text-shadow: none;
}
.ingame-board::before {
  display: none;
}
.ingame-board :is(.ingame-blue, .blue) {
  --ig-side: var(--ig-blue);
}
.ingame-board :is(.ingame-red, .red) {
  --ig-side: var(--ig-red);
}
.ingame-update-status {
  position: absolute;
  z-index: 20;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 4px;
  background: rgba(20, 23, 30, .85);
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  pointer-events: none;
}
.ingame-topbar {
  position: absolute;
  top: 0;
  left: 22%;
  width: 56%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8cqw minmax(0, 1fr);
  background: var(--ig-panel);
  border-bottom: 1px solid var(--ig-line);
}
.ingame-top-side {
  min-width: 0;
  position: relative;
  border-top: 2px solid var(--ig-side);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ingame-team-identity {
  position: relative;
  height: 2.6cqw;
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  padding: 0 0.8cqw;
}
.ingame-seal {
  display: grid;
  place-items: center;
  width: 1.9cqw;
  height: 1.9cqw;
  flex: none;
  color: var(--ig-text);
}
.ingame-seal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ingame-seal svg {
  width: 1.55cqw;
  height: 1.55cqw;
}
.ingame-team-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.25cqw;
  font-family: var(--cast-heading, "Microsoft YaHei", sans-serif);
  font-weight: 400;
  letter-spacing: 0.04em;
  padding-inline: 0.12em;
}
.ingame-series {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4cqw;
  color: var(--ig-muted);
}
.ingame-series b {
  font:
    500 1.65cqw/1 "Broadcast Display",
    sans-serif;
  color: var(--ig-accent);
}
.ingame-top-side-right .ingame-team-identity {
  flex-direction: row-reverse;
}
.ingame-top-side-right .ingame-series {
  flex-direction: row-reverse;
  margin-left: 0;
  margin-right: auto;
}
.ingame-team-stats {
  display: flex;
  align-items: center;
  gap: 1cqw;
  padding: 0.05cqw 0.8cqw 0.2cqw;
  height: 1.3cqw;
}
.ingame-stat,
.ingame-team-gold {
  display: flex;
  align-items: center;
  gap: 0.3cqw;
  font: 600 0.92cqw/1 var(--ig-number);
}
.ingame-team-stats svg {
  width: 0.75cqw;
  height: 0.75cqw;
  color: var(--ig-muted);
}
.ingame-team-stats .ingame-stat svg {
  width: 1.05cqw;
  height: 1.05cqw;
  flex: none;
  color: var(--ig-text);
}
.ingame-team-gold {
  margin-left: auto;
  color: var(--ig-text);
  font-size: 1.15cqw;
}
.ingame-team-gold svg {
  color: var(--ig-accent);
}
.ingame-top-side-right .ingame-team-stats {
  flex-direction: row-reverse;
}
.ingame-top-side-right .ingame-team-gold {
  flex-direction: row-reverse;
  margin-left: 0;
  margin-right: auto;
}
.ingame-scoreboard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  border-inline: 1px solid var(--ig-line);
  background: var(--ig-panel);
}
.ingame-kills {
  height: 2.5cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55cqw;
}
.ingame-kills b {
  min-width: 2.35cqw;
  text-align: center;
  color: var(--ig-text);
  font:
    500 2.25cqw/1 "Broadcast Display",
    sans-serif;
}
.ingame-kills svg {
  width: 0.8cqw;
  height: 0.8cqw;
  color: var(--ig-accent);
}
.ingame-match-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  height: 1.35cqw;
}
.ingame-match-time > span {
  font-size: 0.48cqw;
  color: var(--ig-muted);
}
.ingame-clock {
  font: 600 0.92cqw/1 var(--ig-number);
  letter-spacing: 0.03em;
}
.ingame-objectives {
  position: absolute;
  top: 4.2cqw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0;
  background: var(--ig-panel);
}
.ingame-objective {
  display: flex;
  align-items: center;
  gap: 0.35cqw;
  padding: 0.2cqw 0.5cqw;
  background: var(--ig-panel);
  white-space: nowrap;
}
.ingame-objective img {
  width: 1.1cqw;
  height: 1.1cqw;
  object-fit: contain;
}
.ingame-objective strong {
  font-size: 0.62cqw;
  font-weight: 500;
}
.ingame-objective b {
  padding-left: 0.3cqw;
  color: var(--ig-accent);
  font: 600 0.9cqw/1 var(--ig-number);
}
.ingame-players {
  position: absolute;
  top: 18.8cqw;
  width: 9.45%;
  display: flex;
  flex-direction: column;
  gap: 0.25cqw;
}
.ingame-players.left {
  left: 0;
}
.ingame-players.right {
  right: 0;
}
.ingame-player {
  position: relative;
  display: grid;
  grid-template-columns: 3.6cqw 5.05cqw;
  gap: 0.2cqw 0.3cqw;
  padding: 0.25cqw;
  background: var(--ig-panel);
  border-bottom: 1px solid var(--ig-line);
}
.ingame-player.right {
  grid-template-columns: 5.05cqw 3.6cqw;
}
.ingame-player-name {
  grid-column: 1/-1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7cqw;
  line-height: 1.5;
  font-weight: 500;
}
.ingame-player.right .ingame-player-name {
  text-align: right;
}
.ingame-player-portrait {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  width: 3.6cqw;
  height: 3.6cqw;
  overflow: hidden;
  background: var(--ig-raised);
}
.ingame-player.right .ingame-player-portrait {
  grid-column: 2;
}
.ingame-player-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ingame-level {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  min-width: 0.85cqw;
  height: 0.85cqw;
  padding: 0 0.1cqw;
  background: #101419;
  color: #fff;
  font: 600 0.7cqw/1 var(--ig-number);
}
.ingame-player.right .ingame-level {
  left: auto;
  right: 0;
}
.ingame-respawn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #10141966;
  color: #fff;
  font: 600 1.7cqw/1 var(--ig-number);
}
.ingame-player.is-respawning,
.ingame-lane-row.is-respawning {
  filter: grayscale(1);
}
.ingame-board[data-layout] .ingame-lane-team[data-panel] .ingame-lane-row.is-respawning { background:var(--ig-surface, var(--material-surface, var(--ig-panel))); }
.ingame-unknown {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--ig-muted);
  font-size: 1.3cqw;
}
.ingame-skills {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(2, 1.55cqw);
  grid-template-columns: repeat(3, 1.55cqw);
  grid-auto-flow: column;
  gap: 0.2cqw;
  align-content: center;
}
.ingame-player.right .ingame-skills {
  grid-column: 1;
  direction: rtl;
}
.ingame-player:not(:has(.ingame-player-name)) .ingame-player-portrait,
.ingame-player:not(:has(.ingame-player-name)) .ingame-skills {
  grid-row: 1;
}
.ingame-skill {
  position: relative;
  display: block;
  width: 1.55cqw;
  height: 1.55cqw;
  background: var(--ig-raised);
  overflow: hidden;
  border-radius: 50%;
  direction: ltr;
}
.ingame-skill img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ingame-skill b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #10141966;
  color: #fff;
  font: 600 0.9cqw/1 var(--ig-number);
}
.ingame-lanes {
  --ig-row-height: 2.35cqw;
  --ig-table-line: color-mix(in srgb, var(--ig-line) 75%, var(--ig-text));
  position: absolute;
  left: 26%;
  bottom: 0;
  width: 48%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.8cqw minmax(0, 1fr);
  gap: 0;
  background: var(--ig-line);
  border-top: 2px solid var(--ig-accent);
}
.ingame-lane-team {
  min-width: 0;
  background: var(--ig-panel);
  padding: 0;
}
.ingame-lane-row {
  display: grid;
  grid-template-columns: 2.1cqw 2.5cqw minmax(0, 1fr) 4.1cqw;
  align-items: center;
  gap: 0.35cqw;
  height: 2.35cqw;
  padding: 0 .3cqw;
  border-bottom: 1px solid var(--ig-table-line);
}
.ingame-lane-row:last-child {
  border-bottom: 0;
}
.ingame-lane-identity {
  display: block;
  position: relative;
  width: 2.1cqw;
  height: 2.1cqw;
}
.ingame-lane-hero,
.ingame-lane-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ingame-lane-placeholder {
  display: grid;
  place-items: center;
  color: var(--ig-muted);
  background: var(--ig-raised);
  font-size: 0.9cqw;
}
.ingame-lane-gold {
  color: var(--ig-accent);
  font: 600 0.96cqw/1 var(--ig-number);
  white-space: nowrap;
}
.ingame-items {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.12cqw;
}
.ingame-item {
  width: 1.55cqw;
  height: 1.55cqw;
  flex: none;
  background: transparent;
  border-radius: 50%;
  overflow: hidden;
}
.ingame-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ingame-lane-kda {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.08cqw;
  white-space: nowrap;
  font: 600 0.9cqw/1 var(--ig-number);
}
.ingame-lane-kda span {
  min-width: 0.72cqw;
  text-align: center;
}
.ingame-lane-kda i {
  color: var(--ig-muted);
  font-style: normal;
  font-size: 0.65cqw;
}
.ingame-lane-team:last-child .ingame-lane-row {
  direction: rtl;
}
.ingame-lane-team:last-child .ingame-lane-row > * {
  direction: ltr;
}
.ingame-lane-team:last-child .ingame-items {
  flex-direction: row-reverse;
}
.ingame-lane-team:last-child .ingame-lane-kda {
  justify-content: flex-start;
}
.ingame-board .ingame-edit-target {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.ingame-board .ingame-edit-target:hover {
  background: #ffffff16;
}
.ingame-board .ingame-edit-target:focus-visible {
  outline: 2px solid var(--ig-accent);
  outline-offset: -2px;
  background: #ffffff16;
}
.ingame-board[data-layout="bottom"] .ingame-lanes {
  --ig-row-height: 2.75cqw;
  left: 24%;
  width: 52%;
}
.ingame-board[data-layout="bottom"] .ingame-lane-row {
  height: 2.75cqw;
  padding-inline: .15cqw;
  grid-template-columns: minmax(10cqw, 1fr) 1.65cqw 2.5cqw 4.85cqw 3.6cqw;
  grid-template-rows: 1fr 1fr;
  column-gap: 0.25cqw;
  row-gap: 0;
}
.ingame-board[data-layout="bottom"] .ingame-lane-row > :is(.ingame-items, .ingame-bottom-abilities, .ingame-lane-identity, .ingame-bottom-player) {
  grid-row: 1 / 3;
}
.ingame-board[data-layout="bottom"] .ingame-items { grid-column: 1; }
.ingame-board[data-layout="bottom"] .ingame-bottom-abilities { grid-column: 2; }
.ingame-board[data-layout="bottom"] .ingame-lane-identity { grid-column: 3; }
.ingame-board[data-layout="bottom"] .ingame-bottom-player { grid-column: 4; }
.ingame-board[data-layout="bottom"] .ingame-lane-gold {
  grid-column: 5; grid-row: 1; align-self: end; text-align: center; line-height: 1.25;
}
.ingame-board[data-layout="bottom"] .ingame-lane-kda {
  grid-column: 5; grid-row: 2; align-self: start; justify-content: center; line-height: 1.4; font-size: .78cqw;
}
.ingame-board[data-layout="bottom"] .ingame-lane-identity {
  width: 2.5cqw;
  height: 2.5cqw;
}
.ingame-bottom-player {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  row-gap: .08cqw;
  height: 2.5cqw;
}
.ingame-bottom-player:not(:has(> strong)) .ingame-bottom-skills { grid-row: 1 / -1; align-self: center; }
.ingame-bottom-player > strong {
  grid-row: 1;
  align-self: end;
  font-size: 0.74cqw;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.ingame-bottom-abilities {
  position: relative;
  align-self: stretch;
  align-content: center;
  padding-left: .5cqw;
  grid-template-rows: repeat(2, 1.15cqw);
  grid-template-columns: 1.15cqw;
  gap: .15cqw;
}
.ingame-bottom-abilities::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: var(--ig-table-line);
}
.ingame-lane-team:last-child .ingame-bottom-abilities { padding-left: 0; padding-right: .5cqw; }
.ingame-lane-team:last-child .ingame-bottom-abilities::before { left: auto; right: 0; }
.ingame-bottom-abilities .ingame-skill { width: 1.15cqw; height: 1.15cqw; }
.ingame-bottom-skills {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  grid-template-rows: 1.1cqw;
  grid-template-columns: repeat(4, 1.1cqw);
  grid-auto-flow: column;
  gap: .15cqw;
}
.ingame-bottom-skills .ingame-skill {
  width: 1.1cqw;
  height: 1.1cqw;
}
.ingame-bottom-skills .ingame-skill b {
  font-size: 0.74cqw;
}
.ingame-lane-team:last-child .ingame-bottom-player {
  text-align: right;
}
.ingame-lane-team:last-child .ingame-bottom-skills {
  direction: rtl;
}

.ingame-ultimate-dot {
  position: absolute;
  top: 0.12cqw;
  left: 0.12cqw;
  z-index: 1;
  width: 0.55cqw;
  height: 0.55cqw;
  border: 0.1cqw solid #d7e1de;
  border-radius: 50%;
  background: #182321;
  box-shadow: 0 0 0 0.08cqw #17201c;
}
.ingame-ultimate-dot.right { left: auto; right: 0.12cqw; }
.ingame-ultimate-dot.ready { background: #5fe292; border-color: #a0f7bb; }
.ingame-ultimate-dot.unknown { border-color: #89928d; }
.ingame-board[data-style="arena"] .ingame-topbar {
  width: 62%;
  left: 19%;
}
.ingame-board[data-style="arena"] .ingame-kills {
  background: var(--ig-text);
  color: var(--ig-panel);
}
.ingame-board[data-style="arena"] .ingame-kills :is(b, svg) {
  color: var(--ig-panel);
}
.ingame-board[data-style="jade"] .ingame-scoreboard {
  background: var(--ig-accent);
  color: var(--ig-panel);
}
.ingame-board[data-style="jade"] .ingame-scoreboard :is(b, svg, span, time) {
  color: var(--ig-panel);
}
.ingame-board[data-style="challenger"] .ingame-topbar {
  border-bottom: 3px solid var(--ig-accent);
}
.ingame-board:not(.cast-still) .ingame-topbar {
  animation: castHeadIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ingame-board:not(.cast-still) .ingame-lane-row > * {
  animation: castReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.ingame-board:not(.cast-still) .ingame-players {
  animation: castReveal 0.6s ease-out 0.25s both;
}
@media (prefers-reduced-motion: reduce) {
  .ingame-board * {
    animation: none !important;
    transition: none !important;
  }
}
.scene-thumb.ingame {
  background: #0b1521;
  border-color: #8a7448;
}
.ingame-mini {
  width: 100%;
  display: grid;
  gap: 3px;
}
.ingame-mini i {
  display: block;
  height: 4px;
  background: linear-gradient(
    90deg,
    #4b8fcb 0 40%,
    #d6b46f 40% 60%,
    #bb5364 60%
  );
}
.ingame-source .small-tag.connected {
  color: #39785e;
  border-color: #8ebba4;
  background: #eff8f2;
}
.ingame-mismatch {
  display: block;
  margin-top: 0.5rem;
  color: #a7414d;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}
:root[data-theme="dark"] .ingame-source .small-tag.connected {
  color: #a8dec1;
  border-color: #46755b;
  background: #1b3025;
}
:root[data-theme="dark"] .ingame-mismatch {
  color: #f0919c;
}

@media (max-width: 540px) {
  .scene-rail {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .scene-thumb {
    width: min(59px, 100%);
  }
}

/* Cup suites carry the same pearl fascia and violet time strip into the game. */
.ingame-board:is([data-style="challenger"], [data-style="spring"]) {
  --ig-blue: #476b88;
  --ig-red: #a65770;
}
.ingame-board:is([data-style="challenger"], [data-style="spring"]) .ingame-topbar {
  background: linear-gradient(100deg, #fff, #efebf5 48%, #fff);
  border-bottom: 2px solid #8061ad;
}
.ingame-board:is([data-style="challenger"], [data-style="spring"]) .ingame-scoreboard {
  background: linear-gradient(145deg, #faf9fc, #e3d9f0);
}
.ingame-board:is([data-style="challenger"], [data-style="spring"]) .ingame-match-time {
  background: #6743a7;
  color: #fff;
}
.ingame-board[data-style="spring"] .ingame-match-time { background: #30223f; }
.ingame-board[data-style="summer"] .ingame-match-time { background: #633044; color: #fff; }
.ingame-board[data-style="jade"] .ingame-scoreboard :is(b, svg, span, time) { color: #f5f8f3; }

.ingame-board:is([data-style="challenger"], [data-style="spring"], [data-style="summer"]) .ingame-match-time :is(time, span) { color: #fff; }

.ingame-lane-identity .ingame-respawn { font-size: .85cqw; }

/* Both teams and the shared comparison column follow the same five lane rows. */
.ingame-board .ingame-lane-team[data-panel="left"] { grid-column: 1; grid-row: 1; }
.ingame-board .ingame-lane-team[data-panel="right"] { grid-column: 3; grid-row: 1; }
.ingame-gold-differences {
  grid-column: 2; grid-row: 1; background: var(--material-surface, var(--ig-panel));
  border-inline: 1px solid var(--ig-table-line);
}
.ingame-gold-difference {
  position: relative;
  height: var(--ig-row-height); display: grid; place-items: center;
  padding-inline: .7cqw; border-bottom: 1px solid var(--ig-table-line);
  color: var(--ig-side, var(--ig-muted)); font: 600 .85cqw/1 var(--ig-number);
}
.ingame-gold-difference:last-child { border-bottom: 0; }
.ingame-gap-pointer {
  position: absolute;
  top: .2cqw; bottom: .2cqw;
  width: .16cqw;
  background: currentColor;
}
.ingame-gap-pointer::after {
  content: "";
  position: absolute;
  top: 50%; transform: translateY(-50%);
  border-block: .33cqw solid transparent;
}
.ingame-gold-difference[data-direction="left"] .ingame-gap-pointer { left: .35cqw; }
.ingame-gold-difference[data-direction="left"] .ingame-gap-pointer::after { right: 100%; border-right: .3cqw solid currentColor; }
.ingame-gold-difference[data-direction="right"] .ingame-gap-pointer { right: .35cqw; }
.ingame-gold-difference[data-direction="right"] .ingame-gap-pointer::after { left: 100%; border-left: .3cqw solid currentColor; }

.ingame-board[data-material="enhanced"] { --ig-table-border:0px; }
.ingame-board[data-scoreboard-layout="bottom"] { --ig-table-left:24%; --ig-table-width:52%; --ig-table-height:calc(13.75cqw + var(--ig-table-border, 2px)); }
/* Background plates remain slightly transparent; figures and portraits stay opaque. */
.ingame-board[data-style][data-layout] .ingame-lanes { background:transparent; }
.ingame-board[data-style][data-layout] .ingame-lanes > section { background:transparent; }
.ingame-board[data-layout] .ingame-lane-team[data-panel] .ingame-lane-row.is-respawning { background:transparent; backdrop-filter:grayscale(1); }
/* Black panels carry level and equipment notifications through the same vertical motion. */
.ingame-portrait-event { position:absolute; inset:0; overflow:hidden; z-index:2; pointer-events:none; }
.ingame-portrait-event-panel {
  display:grid; place-items:center; width:100%; height:100%;
  color:#fff; background:#000; font:600 1.8cqw/1 var(--ig-number);
  animation:ingameLevelUp 1.4s cubic-bezier(.2,.6,.3,1) both;
}
.ingame-lane-identity .ingame-portrait-event-panel { font-size:1.4cqw; }
.ingame-portrait-event-panel[data-kind="equipment"] { animation-name:ingameEquipmentPurchase; animation-duration:1.9s; }
.ingame-portrait-event-panel > img { display:block; width:84%; height:84%; object-fit:contain; }
@keyframes ingameEquipmentPurchase {
  0% { transform:translateY(100%); }
  10.526316%, 89.473684% { transform:translateY(0); }
  100% { transform:translateY(-100%); }
}

@keyframes ingameLevelUp {
  0% { transform:translateY(100%); }
  14.285714%, 85.714286% { transform:translateY(0); }
  100% { transform:translateY(-100%); }
}

.ingame-board[data-layout].is-teamfight .ingame-topbar { left:23%; width:54%; }
.ingame-board.is-teamfight .ingame-team-identity { height:2cqw; }
.ingame-board.is-teamfight .ingame-team-name { font-size:1cqw; }
.ingame-board.is-teamfight .ingame-seal { width:1.5cqw; height:1.5cqw; }
.ingame-board.is-teamfight .ingame-series b { font-size:1.4cqw; }
.ingame-board.is-teamfight .ingame-team-stats { height:1.1cqw; padding-bottom:.15cqw; }
.ingame-board.is-teamfight .ingame-team-gold { font-size:1cqw; }
.ingame-board.is-teamfight .ingame-kills { height:1.9cqw; }
.ingame-board.is-teamfight .ingame-kills b { font-size:1.7cqw; }
.ingame-board.is-teamfight .ingame-match-time { height:1.1cqw; }
/* Combat cards use only a framed portrait, top abilities and an outer skill column. */
.ingame-board[data-layout].is-teamfight .ingame-players { width:4.9%; gap:.55cqw; }
.ingame-board[data-layout].is-teamfight .ingame-players .ingame-player {
  grid-template-columns:.825cqw 3.6cqw; grid-template-rows:1.725cqw 3.6cqw;
  justify-content:center; gap:.2cqw; height:5.525cqw; padding:0; border:0; background:transparent; box-shadow:none;
}
.ingame-board[data-layout].is-teamfight .ingame-player.right { grid-template-columns:3.6cqw .825cqw; }
.ingame-board.is-teamfight .ingame-player .ingame-player-portrait { grid-column:2; grid-row:2; border:1px solid var(--ig-side); }
.ingame-board.is-teamfight .ingame-player.right .ingame-player-portrait { grid-column:1; }
.ingame-board.is-teamfight .ingame-combat-abilities {
  grid-column:2; grid-row:1; justify-self:center; width:3.6cqw;
  grid-template-columns:repeat(2,1.725cqw); grid-template-rows:1.725cqw;
  grid-auto-flow:column; gap:.15cqw;
}
.ingame-board.is-teamfight .ingame-player.right .ingame-combat-abilities { grid-column:1; }
.ingame-board.is-teamfight .ingame-combat-abilities .ingame-skill { width:1.725cqw; height:1.725cqw; }
.ingame-board.is-teamfight .ingame-combat-equipment {
  grid-column:1; grid-row:2; align-self:start; align-content:start;
  grid-template-columns:.825cqw; grid-template-rows:none; grid-auto-rows:.825cqw; grid-auto-flow:row; gap:.1cqw;
}
.ingame-board.is-teamfight .ingame-player.right .ingame-combat-equipment { grid-column:2; }
.ingame-board.is-teamfight .ingame-combat-equipment .ingame-skill { width:.825cqw; height:.825cqw; }
.ingame-board[data-layout].is-teamfight .ingame-players .ingame-player .ingame-skills { padding:0; }
.ingame-board[data-layout="bottom"].is-teamfight .ingame-players {
  top:auto; bottom:0; width:26.5%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.5cqw;
}
.ingame-board[data-layout="bottom"].is-teamfight .ingame-players.left { left:22.5%; }
.ingame-board[data-layout="bottom"].is-teamfight .ingame-players.right { right:22.5%; }

/* Side rankings temporarily take the selected status column's place. */
.ingame-board[data-layout="sides"] .ingame-chart.chart-ranking { left:0; top:18.8cqw; translate:none; }
.ingame-board[data-layout="sides"] .ingame-chart.chart-ranking[data-position="right"] { left:auto; right:0; }
.ingame-board[data-layout="sides"] .ig-gold-ranking :is(img,.ig-chart-portrait) { border-radius:50%; }

.ingame-table-backdrop { position:absolute; left:var(--ig-table-left); bottom:0; width:var(--ig-table-width); height:var(--ig-table-height); opacity:var(--ig-bottom-opacity); background:var(--ig-surface, var(--material-surface, var(--ig-panel))); pointer-events:none; }
.ingame-lanes > section { position:relative; }
.ingame-board[data-mode-motion="details-out"] :is(.ingame-lanes,.ingame-players) { animation:ingameDetailsOut .16s ease-in both; }
.ingame-board[data-mode-motion="combat-in"] .ingame-player { animation:ingameCombatIn .16s ease-out calc(var(--combat-order) * .02s) both; }
.ingame-board[data-mode-motion="combat-out"] .ingame-player { animation:ingameCombatOut .14s ease-in both; }
.ingame-board[data-mode-motion="details-in"] .ingame-lanes { animation:ingameDetailsIn .1s ease-out both; }
.ingame-board[data-mode-motion="details-in"] :is(.ingame-lane-row,.ingame-player) {
  --row-entry:-4cqw;
  animation:ingameRowIn .2s ease-out calc(.1s + var(--lane-index) * .025s) both;
}
.ingame-board[data-mode-motion="details-in"] :is(.ingame-lane-team[data-panel="right"] .ingame-lane-row,.ingame-player.right) { --row-entry:4cqw; }
@keyframes ingameDetailsOut { to { transform:translateY(110%); opacity:0; } }
@keyframes ingameCombatIn { from { transform:translateY(2.4cqw); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes ingameCombatOut { to { transform:translateY(110%); opacity:0; } }
@keyframes ingameDetailsIn { from { transform:translateY(100%); } to { transform:translateY(0); } }
@keyframes ingameRowIn { from { transform:translateX(var(--row-entry)); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* The shared plate stays mounted while table and chart contents change. */
.ingame-board[data-statistics-motion="out"]:not([data-statistics-scope="side"]) :is(.ingame-lane-row > *,.ingame-gold-difference > *),
.ingame-board[data-layout="bottom"][data-statistics-motion="out"] .ingame-player > * { animation:ingamePanelContentOut .16s ease-in both; }
.ingame-board[data-statistics-motion="out"] .ingame-chart > * { animation:ingamePanelContentOut .16s ease-in both; }
.ingame-board[data-statistics-motion="in"] .ingame-chart > * { animation:ingamePanelContentIn .22s ease-out both; }
.ingame-board[data-statistics-motion="in"]:not([data-statistics-scope="side"]) :is(.ingame-lane-row > *,.ingame-gold-difference > *) {
  animation:ingamePanelContentIn .2s ease-out calc(var(--lane-index,0) * .025s) both;
}
.ingame-board[data-layout="bottom"][data-statistics-motion="in"] .ingame-player > * { animation:ingamePanelContentIn .16s ease-out calc(var(--combat-order) * .02s) both; }
.ingame-board.has-statistics-transition[data-mode-motion="idle"] :is(.ingame-lanes,.ingame-players),
.ingame-board.has-statistics-transition[data-statistics-motion="idle"][data-mode-motion="idle"] .ingame-lane-row > * { animation:none; }
@keyframes ingamePanelContentOut { to { opacity:0; clip-path:inset(0 0 100%); } }
@keyframes ingamePanelContentIn { from { opacity:0; clip-path:inset(100% 0 0); } to { opacity:1; clip-path:inset(0); } }
.ingame-board[data-layout="sides"] :is(.ingame-players,.chart-ranking) { --ig-sidebar-shift:-115%; }
.ingame-board[data-layout="sides"] :is(.ingame-players.right,.chart-ranking[data-position="right"]) { --ig-sidebar-shift:115%; }
.ingame-board[data-layout="sides"] .ingame-players[data-ranking-motion="hidden"] { visibility:hidden; pointer-events:none; }
.ingame-board[data-layout="sides"][data-statistics-motion] .ingame-players[data-ranking-motion="out"],
.ingame-board[data-layout="sides"][data-statistics-motion="out"] .ingame-chart.chart-ranking { animation:ingameSidebarOut .16s ease-in both; }
.ingame-board[data-layout="sides"][data-statistics-motion] .ingame-players[data-ranking-motion="in"],
.ingame-board[data-layout="sides"][data-statistics-motion="in"] .ingame-chart.chart-ranking { animation:ingameSidebarIn .22s cubic-bezier(.2,.65,.3,1) both; }
.ingame-board[data-layout="sides"][data-statistics-motion] .ingame-chart.chart-ranking > * { animation:none; }
@keyframes ingameSidebarOut { to { transform:translateX(var(--ig-sidebar-shift)); opacity:0; } }
@keyframes ingameSidebarIn { from { transform:translateX(var(--ig-sidebar-shift)); opacity:0; } to { transform:translateX(0); opacity:1; } }
@media (prefers-reduced-motion:reduce) {
  .ingame-board[data-layout="sides"][data-statistics-motion] :is(.ingame-players[data-ranking-motion],.ingame-chart.chart-ranking) { animation:none; }
  .ingame-board[data-statistics-motion] :is(.ingame-chart > *,.ingame-lane-row > *,.ingame-gold-difference > *,.ingame-player > *) { animation:none; }
}