/* ============================================================
   QLWEB — live Quake Live dashboard
   6bit.ch design language: flat #101010, deltarune everywhere,
   1px dotted cyan/magenta chrome, minimal and sharp.
   ============================================================ */

:root {
  --bg:      #101010;
  --panel:   rgba(16, 16, 16, 0.69);
  --text:    #f0f0f0;
  --bright:  #ffffff;
  --dim:     #9a9a9a;
  --faint:   #5a5a5a;

  --magenta: #ff00ff;
  --cyan:    #00ffff;

  /* game data hues (scoreboard team blocks, feed ^ codes context) */
  --red:     #ff4d4d;
  --blue:    #4d9fff;
  --green:   #37d95c;
  --yellow:  #ffd52a;
  --purple:  #b269ff;

  /* one font everywhere; vars kept for history */
  --font-d: "deltarune", monospace;
  --font-m: "deltarune", monospace;

  /* stat columns size to their widest value (max-content) — the digit
     allowances self-adjust to the actual font, so the header icons and
     the values below always share the same column geometry; the name
     column takes everything that is left */
  --sb-cols: minmax(0, 1fr) max-content max-content max-content max-content;
}

@font-face {
  font-family: "deltarune";
  src: url("fonts/inconreg.ttf") format('truetype');
  font-display: swap;
}

/* ---------- reset ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "deltarune", monospace;
}
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { scrollbar-color: #2a2a2a #101010; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "deltarune", monospace;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  background-color: var(--bg);
}

::selection { background: var(--magenta); color: #101010; }
:focus-visible { outline: 1px dotted var(--magenta); outline-offset: 1px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a2a; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

a {
  color: var(--bright);
  text-decoration: none;
  border-bottom: 1px dotted var(--magenta);
}
a:hover { color: var(--magenta); }

/* ---------- topbar ---------- */
.topbar {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 12px 1rem .75rem;
}

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 6px;
  background: none;
  border: 1px dotted var(--magenta);
  border-radius: 0;
  color: var(--bright);
  cursor: pointer;
}
.menu-btn img,
.menu-btn svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
}
.menu-btn:hover { color: var(--cyan); }

.brand {
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--bright);
  user-select: none;
  white-space: nowrap;
}
.brand em {
  font-style: normal;
  color: var(--cyan);
}

.tabs {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  flex-direction: column;
  gap: 8px;
  min-width: 230px;
  padding: 10px 12px;
  background-color: rgba(10, 10, 10, 0.95);
  border: 1px dotted var(--magenta);
  z-index: 30;
}
.tabs.open { display: flex; }
.tab-group {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.tab-group-label {
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--faint);
  text-transform: lowercase;
  min-width: 42px; /* all lines' tabs start at the same x */
}
.tab {
  appearance: none;
  border: 1px dotted var(--cyan);
  background: transparent;
  color: var(--dim);
  font-size: 13px;
  padding: 3px 8px;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s, background .15s;
}
.tab:hover { color: var(--magenta); }
.tab.active {
  color: var(--bright);
  background: linear-gradient(90deg, rgba(255, 0, 255, 0.2) 0%, rgba(10, 10, 10, 0) 100%);
}
.tab-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
}
.tab.is-offline .tab-dot {
  background: var(--faint);
}
.tab-placeholder {
  cursor: default;
}
.tab-players {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.tab-players-img { height: 7px; width: auto; display: block; }
.tab-players-num {
  font-size: 10px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.tab-placeholder:hover { color: var(--dim); }
@keyframes dotpulse { 50% { opacity: .35; } }

/* ---------- layout: single centered column, like the parent ---------- */
.layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  padding: 0 1rem 1rem;
  flex-grow: 1;
}
.col-main, .col-side {
  display: contents;
}

/* ---------- panels ---------- */
.panel {
  border: 1px dotted var(--cyan);
  background-color: var(--panel);
}

.board-panel {
  order: 1;
  flex: 1 1 360px;
  border-color: var(--magenta);
  container-type: inline-size;
  container-name: board;
}

/* ---------- header panel ---------- */
.head-panel {
  order: 2;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 6px;
}
.head-top {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 4px;
}
.hostname {
  margin: 0;
  min-width: 0;
  font-weight: 400;
  font-size: 21px;
  letter-spacing: .02em;
  color: var(--bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.head-watch { display: flex; justify-content: center; }
.head-badges { display: flex; gap: 6px; justify-content: end; flex-wrap: wrap; }
.mappool-pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px 12px;
  background-color: rgba(10, 10, 10, 0.95);
  border: 1px dotted var(--magenta);
  z-index: 30;
}
.mappool-map {
  font-size: 12.5px;
  color: var(--dim);
  letter-spacing: .03em;
}
.mappool-empty { font-size: 12.5px; color: var(--faint); }
.play-btn {
  font: inherit;
  font-size: 13px;
  background: none;
  cursor: pointer;
  letter-spacing: .12em;
  padding: 1px 10px;
  color: var(--bright);
  border: 1px dotted var(--magenta);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.play-btn:hover {
  color: #101010;
  background: linear-gradient(90deg, rgba(255, 0, 255, 0.9) 0%, rgba(10, 10, 10, 0) 100%);
}
.watch-btn {
  font-size: 14px;
  letter-spacing: .14em;
  padding: 3px 14px;
  border: 1px dotted #0ff;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.22);
}
.watch-btn:hover {
  color: #101010;
  background: linear-gradient(90deg, rgba(0, 255, 255, 0.85) 0%, rgba(10, 10, 10, 0) 100%);
}
.watch-btn.watch-active {
  color: #101010;
  background: linear-gradient(90deg, rgba(0, 255, 255, 0.85) 0%, rgba(10, 10, 10, 0) 100%);
}
.watch-btn.watch-denied {
  border-color: #f33;
  color: #f33;
}


.map-window {
  padding: 2px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}
.game-line {
  text-align: center;
  font-size: 21px;
  letter-spacing: .06em;
  color: var(--bright);
  padding: 4px 0 8px;
}
.head-foot {
  padding: 8px 12px 12px;
  text-align: center;
}
.clock-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 36px; /* clock and warmup badge swap in this slot; fixed height = no layout jump */
}
.head-foot .limits,
.head-foot .players-count {
  text-align: center;
  margin-top: 4px;
}
.map-img,
.map-video {
  display: block;
  width: auto;
  height: min(62vh, 56.25vw); /* ~2/3 viewport height; never taller than a
                                  16:9 video at full width (narrow screens) */
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border: 1px dotted var(--cyan);
  background: var(--bg);
}
.map-img {
  object-fit: cover;
  image-rendering: pixelated;
}
.clock {
  font-variant-numeric: tabular-nums;
  font-size: 25.5px;
  color: var(--bright);
  letter-spacing: .04em;
}
.warmup {
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--yellow);
  border: 1px dotted var(--yellow);
  padding: 2px 10px;
  animation: glow 1s ease-in-out infinite alternate;
}
@keyframes glow {
  from { text-shadow: 0 0 4px var(--yellow); }
  to   { text-shadow: 0 0 10px var(--yellow); }
}

.limits, .players-count {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--dim);
}
.limits b, .players-count b { color: var(--text); font-weight: 500; }
.limits span + span::before { content: ' · '; color: var(--faint); }
.players-count span + span::before { content: ' · '; color: var(--faint); }

/* ---------- score strip ---------- */
.duel-side {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 104px;
}
/* duel strip: scores anchored at the center so '21' vs '8' sit equally
   distant from the VS; the extra name-score distance moves the name */
.score-strip.is-duel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 20px;
}
.score-strip.is-duel .duel-side {
  justify-content: flex-end; /* red packs right, blue (row-reverse) packs left */
  gap: 11.5px; /* 10 * 1.15 */
  min-width: 0;
}
.score-strip.is-duel .team-score.red { justify-content: flex-end; }
.score-strip.is-duel .team-score.blue { justify-content: flex-start; }
/* dead duelers: icon flanks the name on the outer side, name dims */
.duel-side.dead .ds-name-wrap { opacity: .5; }
.duel-side .dead-icon { height: 16px; }
.duel-side .ds-name-wrap {
  min-width: 0;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duel-side.blue { flex-direction: row-reverse; }
.duel-side .ds-name-wrap {
  font-size: 24.9px; /* 29.3 * 0.85 — the name is the wrap; .ds-name never exists in the DOM */
  line-height: 1;
}
.duel-side .ds-score {
  font-size: 25.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

/* spectators: yellow spec tag */

/* ca team head: label + rule in the name column, pictograms over their columns */
.sb-head-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sb-head-name .g-line { flex: 1; width: auto; }
.sb-group-head .h-icon { justify-content: center; }

/* tab: red live marker while the stream shows this server */
.tab.is-live::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--red);
  vertical-align: middle;
  animation: livepulse 1.6s ease-in-out infinite;
}
@keyframes livepulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* duel detail: shared weapon rows — one pictogram centered per row,
   left player's count flanking left, right player's flanking right */
.duel-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
}
.duel-detail .dc-row {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  align-items: center;
  column-gap: 10px;
  padding: 3px 0;
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.duel-detail .dc-count { font-size: 17.25px; font-weight: 700; color: var(--bright); } /* 15 * 1.15 */
.duel-detail .dc-count.left { justify-self: end; }
.duel-detail .dc-count.right { justify-self: start; }
.duel-detail .dc-count.is-zero { color: var(--faint); font-weight: 400; }
.duel-detail .dc-row .wi-holder { display: inline-flex; justify-self: center; }
.duel-detail .dc-row .wi-img { height: 13px; width: auto; display: block; }
.duel-detail .dc-label {
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--faint);
  justify-self: center;
  min-width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.duel-detail .dc-icon { height: 13px; width: auto; display: block; }
.duel-detail .dc-sep {
  display: block;
  width: 48px;
  height: 0;
  margin: 5px auto;
  border-top: 1px dotted rgba(0, 255, 255, .35);
}
.duel-detail .dc-empty {
  display: block;
  text-align: center;
  color: var(--faint);
  font-size: 12px;
}
.duel-specs-head {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--faint);
  padding: 10px 12px 2px;
}

/* duel board: spectator list only — the duelers live in the strip;
   the score column stays but stays empty for spectators */

.score-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 44px;
  padding: 4px 12px;
  border-bottom: 1px dotted rgba(255, 0, 255, .25);
  container-type: inline-size;
}

/* the inline red-vs-blue layout needs ~730px: below that, the round
   bricks stack under their team name on BOTH sides (any viewport) */
@container (max-width: 729px) {
  /* .score-strip prefix keeps these ahead of the base pips ordering rules */
  .score-strip .team-score { flex-wrap: wrap; row-gap: 3px; justify-content: center; }
  .score-strip .team-score .round-pips,
  .score-strip .team-score.blue .round-pips { flex-basis: 100%; justify-content: center; gap: 3px; order: 4; }
  .score-strip .pip { width: 8px; }
}
.score-strip:empty { display: none; }
.strip-offline {
  width: 100%;
  text-align: center;
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--red);
}

.team-score {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 104px;
  padding: 4px 10px;
}
.team-score.red  { color: var(--red); }
.team-score.blue { color: var(--blue); }
.team-score .round-pips { order: 1; }
.team-score .ts-name {
  order: 2;
  font-size: 15px;
  letter-spacing: .1em;
}
.team-score .ts-num {
  order: 3;
  font-size: 25.5px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.team-score.blue .ts-num { order: 1; }
.team-score.blue .ts-name { order: 2; }
.team-score.blue .round-pips { order: 3; flex-direction: row-reverse; }

.round-pips {
  display: flex;
  gap: 4px;
}
.pip {
  width: 12px;
  height: 4px;
  background: var(--faint);
  opacity: .4;
}
.pip.on-red  { background: var(--red);  opacity: 1; }
.pip.on-blue { background: var(--blue); opacity: 1; }

.score-vs {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.score-vs .vs {
  font-size: 15px;
  color: var(--faint);
}
.score-vs .vs-bar {
  width: 48px;
  height: 0;
  border-top: 1px dotted var(--cyan);
}

/* ---------- scoreboard ---------- */
.board-panel.is-offline .scoreboard { opacity: .55; }

.scoreboard {
  /* the master grid: the name column takes the leftovers, the stat
     columns hug their widest value — every header icon and row cell
     shares this one set of tracks via subgrid */
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content max-content max-content;
  gap: 0 25px;
}
.sb-grid-head,
.sb-item,
.sb-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  gap: 0 25px;   /* must match the master scoreboard: the adopted tracks
                    position by the subgrid's own gap */
  padding: 4px 12px;
  align-items: center;
}
.sb-grid-head {
  letter-spacing: .1em;
  color: var(--faint);
  text-transform: uppercase;
  border-bottom: 1px dotted rgba(0, 255, 255, .35);
  padding-top: 8px;
  padding-bottom: 4px;
}
.sb-grid-head .h-name,
.sb-grid-head .h-score { font-size: 10.5px; }
.sb-grid-head .h-name { text-align: left; }
.h-icon { display: inline-flex; justify-content: center; }  /* grid items stretch: the img centers in its column */
.sb-grid-head .h-score { display: flex; justify-content: flex-end; text-align: right; }
.h-icon-img { height: 13px; width: auto; display: block; }
.sb-grid-head .h-icon-text { font-size: 9px; letter-spacing: .08em; color: var(--faint); }
.sb-grid-head.race-head .h-score { justify-content: center; }
.sb-score.race-time { text-align: center; }
.sb-duo,
.duel-detail,
.duel-specs-head,
.sb-empty { grid-column: 1 / -1; }


.sb-team-col {
  display: grid;
  grid-template-columns: var(--sb-cols);
  gap: 0 25px;
  align-items: center;
}
.sb-group-head {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
  gap: 0 25px;
  padding: 8px 12px 3px;
  letter-spacing: .1em;
}
.sb-group-head .sb-head-name { font-size: 13.5px; }
.sb-group-head .g-score { font-size: 13.5px; }
.sb-group-head .g-score {
  text-align: right;
  margin-left: auto;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.sb-group-head .g-line {
  flex: 1;
  height: 0;
  border-top: 1px dotted rgba(240, 240, 240, .25);
}
.sb-group-head.red  { color: var(--red); }
.sb-group-head.blue { color: var(--blue); }
.sb-group-head.spec { color: var(--dim); }
.sb-group-head.free { color: var(--magenta); }

/* RED | BLUE side by side (team modes) */
.sb-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
  align-items: start;
}
.sb-duo .sb-team-col.red  { border-right: 1px dotted rgba(240, 240, 240, .18); padding-right: 14px; min-height: 100%; }
.sb-duo .sb-team-col.blue { padding-left: 2px; }

.sb-item { border-bottom: 1px dotted rgba(0, 255, 255, .15); }
.sb-item:last-child { border-bottom: 0; }

.sb-row {
  cursor: default;
  transition: background .12s;
}
.sb-row.expandable { cursor: pointer; }
.sb-row.expandable:hover {
  background: linear-gradient(90deg, rgba(255, 0, 255, 0.2) 0%, rgba(10, 10, 10, 0) 100%);
}
.sb-row:focus-visible { outline-offset: -1px; }

.sb-score {
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  text-align: right;
  color: var(--bright);
}
.sb-row.lead .sb-name-text { font-size: 19px; }
.sb-row.lead .sb-score { color: #ffffff; font-size: 21px; }
.sb-skull { color: var(--red); margin-right: 4px; }

.sb-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sb-name.has-medals {
  justify-content: space-between;
}
.sb-name-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-medals {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.sb-medal {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.sb-medal img {
  width: 15px;
  height: 15px;
  display: block;
}
.sb-medal-count {
  font-size: 11.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sb-medal-overflow {
  display: none;
  font-size: 11.5px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.sb-ping {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 13px;
  color: var(--dim);
}
.sb-ping, .sb-elo, .sb-dmg { text-align: center; }
.sb-elo { font-variant-numeric: tabular-nums; }
.sb-ping.p-good { color: var(--green); }
.sb-ping.p-mid  { color: var(--yellow); }
.sb-ping.p-bad  { color: var(--red); }


.sb-row.dead .sb-name { opacity: .5; }
.dead-holder { display: inline-flex; align-items: center; }
.sb-name .dead-holder { margin-left: 6px; }
.dead-icon { height: 13px; width: auto; display: block; }

/* expanded weapon panel */
.sb-weapons {
  display: none;
  padding: 8px 12px 10px 74px;
  border-top: 1px dotted rgba(0, 255, 255, .3);
}
.sb-item.open .sb-weapons { display: block; grid-column: 1 / -1; animation: unfold .15s ease-out both; }
@keyframes unfold {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.w-row {
  display: grid;
  grid-template-columns: 30px 140px 1fr 46px;
  gap: 12px;
  align-items: center;
  padding: 2px 0;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.w-short {
  font-size: 13px;
  color: var(--magenta);
}
.w-nums { color: var(--dim); white-space: nowrap; }
.w-nums b { color: var(--text); font-weight: 500; }
.w-bar {
  position: relative;
  height: 6px;
  border: 1px dotted rgba(0, 255, 255, .4);
  overflow: hidden;
}
.w-bar i {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: var(--cyan);
}
.w-acc {
  text-align: right;
  color: var(--text);
}
.w-total {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px dotted rgba(0, 255, 255, .3);
  font-size: 12px;
  color: var(--dim);
  text-transform: uppercase;
}
.w-total b { color: var(--magenta); font-weight: 500; }

/* empty states */
.sb-empty {
  padding: 28px 16px;
  text-align: center;
}
.sb-empty .big {
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--faint);
}
.sb-empty.err .big { color: var(--red); }
.sb-empty .sub {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--faint);
  text-transform: uppercase;
}
.sb-empty .sub.hot { color: var(--magenta); animation: dotpulse 1.1s ease-in-out infinite; }

/* ---------- game feed (single qlpycon-style window) ---------- */
.feed {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  min-height: 100px;
}
.events-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  order: 3;
  flex: 1 1 360px;
  border-color: var(--magenta);
  /* floor = panel head (~26px) + 10 feed lines (292px) + borders;
     below this the page scrolls instead of the feed escaping its box */
  min-height: 332px;
}
/* constant dark fade over the bottom of the feed — older messages recede */
.events-panel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 104px; /* 90 * 1.15 */
  background: linear-gradient(to bottom, transparent, rgba(4, 6, 8, 0.94)); /* 0.82 * 1.15 */
  pointer-events: none;
  z-index: 2;
}
.events-panel .feed {
  flex: 1 1 0;
  min-height: 330px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.kf-item, .tk-item { min-width: 0; }
.kf-time, .tk-chip { flex: none; }
.kf-text, .tk-text {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.feed-empty {
  padding: 18px 10px;
  text-align: center;
  color: var(--faint);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.kf-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 3px 6px 3px 8px;
  margin: 3px 0;
  border-left: 1px dotted var(--red);
  animation: kfin .2s ease-out both;
}
@keyframes kfin {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.kf-time {
  flex: none;
  font-size: 10.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.kf-text {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13.5px;
}
.tk-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 3px 6px 3px 8px;
  margin: 2px 0;
  border-left: 1px dotted rgba(240, 240, 240, .25);
  animation: kfin .2s ease-out both;
}
.tk-chip {
  flex: none;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--dim);
  border: 1px dotted rgba(0, 255, 255, .35);
  padding: 0 5px;
}
.tk-text {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13.5px;
  color: var(--text);
}
.tk-item.k-gameon .tk-text, .tk-item.k-gameover .tk-text {
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--bright);
  font-weight: 500;
}
.tk-item.k-gameon, .tk-item.k-gameover {
  border-left: 0;
  border-top: 1px dotted var(--cyan);
  border-bottom: 1px dotted var(--cyan);
  padding-left: 8px;
}
.kf-item.is-warmup { opacity: .55; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .layout { gap: 1rem; }
  .tab { font-size: 9px; } /* another ~15% down on mobile */
  .sb-weapons { padding-left: 12px; }
  .team-score .ts-num { font-size: 21px; }

  /* scoreboard: tighter columns and slightly smaller type buy the name
     and medals room; medal badges cap at three, the rest collapse into
     the +k chip. The score column widens to 4ch: the mobile score type
     (14px) needs more than 3ch of the 12.5px row font */
  .sb-grid-head,
  .sb-row {
    gap: 0 10px;
    font-size: 12.5px;
  }
  .sb-score { font-size: 14px; }
  .sb-row.lead .sb-score { font-size: 18px; }
  .sb-row.lead .sb-name-text { font-size: 16px; }
  .sb-medal img { width: 12px; height: 12px; }
  .sb-medal:nth-child(n + 4) { display: none; }
  .sb-medal-overflow { display: inline-flex; }

  .sb-duo { grid-template-columns: 1fr; gap: 0; }
  .sb-duo .sb-team-col.red { border-right: 0; padding-right: 0; min-height: 0; }
}

/* the scoreboard sits in a narrow column beside the video on wide screens:
   compact it by CONTAINER width, not viewport width */
@container board (max-width: 620px) {
  .sb-weapons { padding-left: 12px; }
  .team-score .ts-num { font-size: 21px; }

  .sb-duo { grid-template-columns: 1fr; gap: 0; }
  .sb-duo .sb-team-col.red { border-right: 0; padding-right: 0; min-height: 0; }
}

/* --- tablet/portrait and mid-width landscape: video on top, the player
   board and feed side by side below; their row absorbs the leftover
   viewport height (no dead space in the live container) --- */
@media (min-width: 640px) and ((orientation: portrait) or (max-width: calc(66vh * 16 / 9 + 470px))) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'video video'
      'board feed';
  }
  .head-panel { grid-area: video; }
  .board-panel { grid-area: board; }
  .events-panel { grid-area: feed; }
  .map-img, .map-video { width: auto; height: min(62vh, 56.25vw); max-width: 100%; }
}

/* --- wide landscape: video left and bigger, the board over the feed in
   one column on the right --- */
@media (orientation: landscape) and (min-width: calc(72vh * 16 / 9 + 470px)) {
  .layout {
    display: grid;
    grid-template-columns: auto minmax(380px, 620px);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'video board'
      'video feed';
  }
  .head-panel { grid-area: video; }
  .board-panel { grid-area: board; }
  .events-panel { grid-area: feed; }
  .map-img, .map-video { width: auto; height: min(72vh, 56.25vw); max-width: 100%; }
}

/* when the panels stack (portrait, or the viewport is too narrow for the
   video plus the board column — the boundary follows the viewport height
   because the video's width does), the live window leads */
@media (orientation: portrait),
       (max-width: calc(62vh * 16 / 9 + 392px)) {
  .head-panel { order: 1; }
  .board-panel { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}