/* ============================================================================
   Scoreboard — Botpack.UnrealTournamentScoreboard's arrangement, in the DOM.

   The stock scoreboard is drawn with fonts, not sprites, so this is text; it
   reads the HUD's tokens (--ut-*) because it is a HUD surface and it is shown
   by the same key, never the menu's, which is a different subsystem.
   ========================================================================= */

.scoreboard {
  position: fixed; left: 50%; top: 12%; z-index: 8;
  width: min(760px, calc(100vw - 32px));
  transform: translateX(-50%);
  padding: 18px 20px;
  background: rgb(2 5 12 / .82);
  border-top: 2px solid var(--ut-gold, #ff0);
  color: var(--ut-white, #fff);
  font-family: var(--font-readout);
  pointer-events: none;
}
.scoreboard[hidden] { display: none; }

.scoreboard header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.scoreboard header small {
  color: var(--ut-gold, #ff0); font: 600 9px/1 var(--font-readout);
  letter-spacing: .2em; text-transform: uppercase;
}
.scoreboard h2 {
  margin: 4px 0 0; color: var(--ut-white, #fff);
  font: 700 17px/1 var(--font-display); letter-spacing: .12em;
}
.scoreboard header p { margin: 3px 0 0; color: #9aa6b6; font: 400 10px var(--font-readout); }
.scoreboard-teams { display: flex; gap: 8px; }
.scoreboard-teams span {
  padding: 4px 8px; border-bottom: 2px solid #ff7a6d;
  font: 600 13px var(--font-readout); font-variant-numeric: tabular-nums;
}
.scoreboard-teams span:nth-child(2) { border-color: #74b4ff; }

.score-columns, .score-row {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 28px 1fr 62px 58px 45px 42px 48px;
}
.score-columns {
  padding: 4px 10px; color: #8894a5;
  font: 600 9px var(--font-readout); letter-spacing: .12em; text-transform: uppercase;
}
.score-row {
  padding: 7px 10px; color: #ccd4de;
  font: 400 14px var(--font-readout); font-variant-numeric: tabular-nums;
}
.score-row:nth-child(odd) { background: rgb(255 255 255 / .04); }
.score-row.player { color: var(--ut-white, #fff); background: rgb(from var(--ut-hud, #00f) r g b / .22); }
.score-row.spectator { opacity: .55; }
.score-row b { color: #7f8b9c; font-weight: 400; }
.score-row strong { color: var(--ut-gold, #ff0); font-size: 19px; font-weight: 600; text-align: right; }
.score-row em { color: #8894a5; font-style: normal; text-align: right; }
.score-row small { color: #7f8b9c; text-align: right; }
.score-row .team-dot {
  display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: #888;
}
.score-row .team-dot.team-0 { background: #ff7a6d; }
.score-row .team-dot.team-1 { background: #74b4ff; }
.score-row .team-dot.team-2 { background: #79e58c; }
.score-row .team-dot.team-3 { background: #ffdd6b; }
.score-row .meta { grid-column: 2 / -1; display: flex; gap: 16px; padding-top: 3px; font-size: 9px; color: #8894a5; }
.score-row .meta em { color: var(--ut-gold, #ff0); }
.score-row .admin-mark { color: var(--ut-gold, #ff0); }

.scoreboard footer {
  display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgb(255 255 255 / .12);
  color: #9aa6b6; font: 400 11px var(--font-readout);
}
.scoreboard footer b { color: var(--ut-white, #fff); font-weight: 600; }

/* Team modes collapse the per-player columns, as the stock team scoreboard does. */
.scoreboard[data-mode="TDM"] .score-columns, .scoreboard[data-mode="CTF"] .score-columns,
.scoreboard[data-mode="DOM"] .score-columns, .scoreboard[data-mode="AS"] .score-columns {
  grid-template-columns: 1fr 1fr;
}
.scoreboard[data-mode="TDM"] .score-columns span:not(:first-child),
.scoreboard[data-mode="CTF"] .score-columns span:not(:first-child),
.scoreboard[data-mode="DOM"] .score-columns span:not(:first-child),
.scoreboard[data-mode="AS"] .score-columns span:not(:first-child) { display: none; }

.flag-status { display: flex; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgb(255 255 255 / .1); }
.flag-status span { padding: 3px 8px; border: 1px solid currentColor; font: 600 9px var(--font-readout); }
.flag-status .flag-home { color: #79e58c; }
.flag-status .flag-held { color: #ffdd6b; }
.flag-status .flag-dropped { color: #ff7a6d; }

@media (max-width: 640px) {
  .scoreboard { width: calc(100vw - 12px); padding: 12px; }
  .score-columns, .score-row { grid-template-columns: 22px 1fr 48px 42px 35px; }
  .score-columns span:nth-child(6), .score-columns span:nth-child(7) { display: none; }
  .score-row :nth-child(6), .score-row :nth-child(7) { display: none; }
}

@media (forced-colors: active) {
  .scoreboard { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .score-row.player { background: Highlight; color: HighlightText; }
}