:root {
  --pefl-page-bg: rgb(211, 247, 189);
  --pefl-text: #000000;
  --pefl-link: rgb(80, 101, 122);
  --pefl-link-hover: rgb(80, 101, 122);
  --pefl-link-hover-bg: rgb(231, 219, 82);
  --blue: #174491;
  --bg: var(--pefl-page-bg);
  --text: var(--pefl-text);
  --muted: #555555;
  --line: #d7d7d7;
  --card: rgb(211, 247, 189);
  --soft: rgb(176, 221, 151);
  --red: #bd2b2b;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; background: var(--bg); color: var(--text); font-size: 13px; line-height: 1.45; }
a { color: var(--pefl-link); text-decoration: underline; }
a:visited { color: var(--pefl-link); }
a:hover { color: var(--pefl-link-hover); background: var(--pefl-link-hover-bg); text-decoration: underline; }
header { background: var(--soft); border-bottom: 1px solid var(--line); }
.nav { max-width: 1180px; margin: 0 auto; padding: 18px 28px; display: flex; gap: 20px; align-items: center; }
.nav a { color: var(--pefl-link); text-decoration: underline; font-weight: 650; }
main { max-width: 1180px; margin: 28px auto; padding: 0 28px 40px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 22px; font-weight: 900; letter-spacing: -.02em; }
h2 { font-size: 24px; font-weight: 900; }
h3 { color: var(--blue); font-size: 16px; font-weight: 850; }
p { margin-top: 6px; }
.muted { color: var(--muted); }
.card { background: var(--card); border-radius: 18px; padding: 24px; box-shadow: 0 6px 24px rgba(0,0,0,.18); margin-bottom: 24px; }
.top-card { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; }
.upload-form { display: inline; }
.action-link { color: var(--pefl-link) !important; text-decoration: underline; font-weight: 700; cursor: pointer; white-space: nowrap; }
.action-link:hover { color: var(--pefl-link-hover) !important; background: var(--pefl-link-hover-bg); }
.action-link.danger { color: var(--red) !important; }
.file-btn input { display: none; }
select { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; box-sizing: border-box; padding: 7px 10px; border: 1px solid #cfd6e4; border-radius: 10px; background: rgb(211, 247, 189); color: var(--text); }
.main-layout { display: grid; grid-template-columns: minmax(520px, 1fr) minmax(620px, 1fr); gap: 24px; align-items: start; }
.draw-board { min-width: 0; }
.board-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; font-weight: 700; }
.draw-rows, .team-list { display: table; width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; background: var(--card); }
.draw-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); align-items: center; column-gap: 10px; min-height: 44px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--card); }
.draw-row:first-child, .team-card:first-child { border-top: 1px solid var(--line); }
.draw-row.active { background: var(--soft); }
.slot { display: inline-flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.slot.left { justify-content: flex-end; text-align: right; }
.slot.right { justify-content: flex-start; text-align: left; }
.team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.dash { text-align: center; color: var(--muted); font-weight: 900; white-space: nowrap; }
.empty { color: var(--muted); font-weight: 400; }
.pots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-self: start; }
.pot { margin-bottom: 0; }
.pot-title { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; background: var(--soft); padding: 10px; margin: -4px -4px 12px; font-weight: 850; }
.team-card { display: grid; grid-template-columns: 30px minmax(0,1fr) 60px; align-items: center; gap: 10px; min-height: 39px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--card); }
.team-card.drawn { opacity: .38; }
.rating { color: var(--muted); min-width: 28px; text-align: right; font-weight: 750; }
.flag-icon { width: 24px; height: 18px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.14); background-size: cover; display: inline-block; }
.flag-placeholder { width: 24px; height: 18px; border-radius: 2px; background: rgba(0,0,0,.08); display: inline-block; }
.notice { color: var(--muted); padding: 10px 0; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12px; background: var(--card); }
th, td { padding: 10px; border-bottom: 1px solid var(--line); text-align: center; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; background: var(--soft); }
@media (max-width: 1120px) { .main-layout { grid-template-columns: 1fr; } .pots { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .top-card, .board-head { align-items: stretch; flex-direction: column; } .admin-actions { justify-content: flex-start; } .pots { grid-template-columns: 1fr; } .draw-row { grid-template-columns: minmax(0,1fr); gap: 6px; } .dash { display: none; } .slot.left, .slot.right { justify-content: flex-start; text-align: left; } }

.results-list {
  display: grid;
  gap: 24px;
}

.result-board {
  margin-bottom: 0;
}

.result-rows {
  margin-top: 12px;
}

.result-row .slot.left {
  justify-content: flex-end;
  text-align: right;
}

.result-row .slot.right {
  justify-content: flex-start;
  text-align: left;
}

.slot-empty {
  min-height: 18px;
}

.result-rows .draw-row:first-child {
  border-top: 0;
}

.league-table {
  display: grid;
  gap: 0;
  margin-top: 12px;
  overflow-x: auto;
}

.league-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) repeat(var(--opponent-cols, 8), minmax(135px, 1fr));
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  min-width: max-content;
}

.league-row:first-child {
  border-top: 1px solid var(--line);
}

.league-header {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--soft);
  font-weight: 850;
}

.league-row > div {
  padding: 9px 10px;
  border-right: 1px solid var(--line);
}

.league-row > div:last-child {
  border-right: 0;
}

.league-row.active {
  background: var(--soft);
}

.league-team,
.opponent-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.opponent-cell span:not(.fi):not(.venue) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.venue {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin-left: auto;
}

.empty-cell {
  min-height: 37px;
}

.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.group-card {
  background: var(--card);
}

.team-card.active {
  background: var(--soft);
}

.league-live {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.league-current-team {
  border-bottom: 1px solid var(--line);
  padding: 8px 0 18px;
}

.current-team-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.current-team-title .flag-icon,
.current-team-title .flag-placeholder {
  width: 34px;
  height: 24px;
}

.league-opponent-list {
  display: grid;
  gap: 0;
}

.league-opponent-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 90px;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}

.league-opponent-row:first-child {
  border-top: 1px solid var(--line);
}

.league-opponent-row.active,
.team-card.current-team,
.team-card.selected-opponent {
  background: var(--soft);
}

.opponent-number,
.venue {
  color: var(--muted);
  font-weight: 700;
}

.opponent-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.league-results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
  margin-top: 18px;
}

.league-results-list {
  display: grid;
  gap: 18px;
}

.league-result-team {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.league-result-team:first-child {
  border-top: 0;
  padding-top: 0;
}

.league-result-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 10px;
}

.league-result-opponents {
  display: grid;
  gap: 0;
}

.league-result-opponent {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 90px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}

.result-pots {
  display: grid;
  gap: 18px;
}

.team-card a {
  font-weight: 750;
}

@media (max-width: 1120px) {
  .league-results-layout {
    grid-template-columns: 1fr;
  }

  .result-pots {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px) {
  .current-team-title {
    font-size: 24px;
  }

  .league-opponent-row,
  .league-result-opponent {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .league-opponent-row .venue,
  .league-result-opponent .venue {
    grid-column: 2;
  }

  .result-pots {
    grid-template-columns: 1fr;
  }
}

.league-result-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--soft);
  padding: 10px 12px;
  margin-bottom: 0;
}

.league-result-title-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 900;
}

.league-result-title a {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.league-result-opponent:last-child {
  border-bottom: 0;
}

.league-result-team {
  scroll-margin-top: 18px;
}

.result-board {
  scroll-margin-top: 18px;
}

@media (max-width: 820px) {
  .league-result-title {
    align-items: flex-start;
    flex-direction: column;
  }
}

.result-tournament {
  padding-top: 0;
}

.result-summary {
  list-style: none;
  cursor: pointer;
  margin: 0 -24px;
  padding: 24px 24px 0;
}

.result-summary::-webkit-details-marker {
  display: none;
}

.result-summary .board-head {
  align-items: center;
}

.result-toggle {
  color: var(--pefl-link);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

.result-tournament[open] .result-toggle::before {
  content: "свернуть";
}

.result-tournament:not([open]) .result-toggle::before {
  content: "развернуть";
}

.result-tournament:not([open]) .board-head {
  border-bottom: 0;
  padding-bottom: 0;
}

.team-card {
  grid-template-columns: 30px minmax(0,1fr) 48px;
}

.rating {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}

.result-summary .board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px 120px;
  column-gap: 24px;
}

.result-summary .board-head > div:nth-child(2) {
  justify-self: start;
  min-width: 360px;
}

.result-summary .result-toggle {
  justify-self: end;
  align-self: center;
}

.groups-grid .team-card {
  grid-template-columns: 30px minmax(0, 1fr);
}

@media (max-width: 820px) {
  .result-summary .board-head {
    display: flex;
  }

  .result-summary .board-head > div:nth-child(2) {
    min-width: 0;
  }
}

.league-results-layout .pot-title,
.league-result-title {
  min-height: 54px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.league-results-layout .pot-title {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Results league-phase symmetry: left team blocks and right pot blocks use the same row rhythm. */
.league-results-layout .league-result-title,
.league-results-layout .pot-title {
  height: 72px;
  min-height: 72px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.league-results-layout .league-result-opponents,
.league-results-layout .team-list {
  margin-top: 0;
}

.league-results-layout .league-result-opponent,
.league-results-layout .team-card {
  height: 52px;
  min-height: 52px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

.league-results-layout .pot-title {
  margin-left: 0;
  margin-right: 0;
}

/* Compact synchronized result layout. */
.league-results-list,
.result-pots {
  gap: 0;
}

.league-results-layout .league-result-title,
.league-results-layout .pot-title {
  height: 42px;
  min-height: 42px;
  padding-top: 0;
  padding-bottom: 0;
}

.league-results-layout .league-result-opponent,
.league-results-layout .team-card {
  height: 32px;
  min-height: 32px;
  padding-top: 0;
  padding-bottom: 0;
}

.league-results-layout .flag-icon,
.league-results-layout .flag-placeholder {
  width: 22px;
  height: 16px;
}

.league-result-title-main {
  font-size: 16px;
}

.league-result-team {
  padding-top: 0;
}

/* Compact live league-phase draw. */
.league-live {
  gap: 0;
}

.league-current-team {
  border-bottom: 0;
  padding: 0;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.current-team-title {
  font-size: 18px;
  gap: 8px;
}

.current-team-title .flag-icon,
.current-team-title .flag-placeholder {
  width: 24px;
  height: 18px;
}

.league-opponent-row {
  min-height: 32px;
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
}

.league-opponent-row:first-child {
  border-top: 1px solid var(--line);
}

.league-opponent-list {
  margin-top: 0;
}

.league-opponent-list .flag-icon,
.league-opponent-list .flag-placeholder,
.completed-league-block .flag-icon,
.completed-league-block .flag-placeholder {
  width: 22px;
  height: 16px;
}

.completed-league-block {
  margin-top: 18px;
}

.completed-league-team {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}

.completed-team-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  margin-bottom: 6px;
}

.completed-opponents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 12px;
}

.completed-opponents span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.team-card.selected-opponent {
  background: var(--soft);
}

/* Live view uses the same compact row rhythm as the results page. */
.main-layout .pots .team-card,
.league-live .league-opponent-row {
  height: 32px;
  min-height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

.main-layout .pots .flag-icon,
.main-layout .pots .flag-placeholder,
.league-live .flag-icon,
.league-live .flag-placeholder {
  width: 22px;
  height: 16px;
}

.league-current-team {
  margin-bottom: 10px;
}

.league-live .league-opponent-row:first-child {
  border-top: 0;
}


/* Group-stage live layout: groups first, pots in a row underneath. */
.main-layout.group-stage-layout {
  grid-template-columns: 1fr;
}

.main-layout.group-stage-layout .draw-board {
  width: 100%;
}

.main-layout.group-stage-layout .groups-grid {
  margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.main-layout.group-stage-layout .pots {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.main-layout.group-stage-layout .pots .pot {
  margin-bottom: 0;
}


/* Group-stage live rows use the same compact standard height as other draw tables. */
.main-layout.group-stage-layout .groups-grid .team-card,
.main-layout.group-stage-layout .pots .team-card {
  height: 32px;
  min-height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

.main-layout.group-stage-layout .groups-grid .flag-icon,
.main-layout.group-stage-layout .groups-grid .flag-placeholder,
.main-layout.group-stage-layout .pots .flag-icon,
.main-layout.group-stage-layout .pots .flag-placeholder {
  width: 22px;
  height: 16px;
}

/* Mobile knockout pairs: keep each pair on one horizontal row, like desktop. */
@media (max-width: 820px) {
  .draw-row,
  .draw-row.result-row {
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
    gap: 4px;
    min-height: 32px;
    padding: 6px 4px;
  }

  .draw-row .dash,
  .draw-row.result-row .dash {
    display: block;
    width: 20px;
    text-align: center;
  }

  .draw-row .slot.left,
  .draw-row.result-row .slot.left {
    justify-content: flex-end;
    text-align: right;
  }

  .draw-row .slot.right,
  .draw-row.result-row .slot.right {
    justify-content: flex-start;
    text-align: left;
  }

  .draw-row .slot,
  .draw-row.result-row .slot {
    gap: 5px;
    min-width: 0;
    overflow: hidden;
  }

  .draw-row .team-name,
  .draw-row.result-row .team-name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .draw-row .flag-icon,
  .draw-row .flag-placeholder,
  .draw-row.result-row .flag-icon,
  .draw-row.result-row .flag-placeholder {
    flex: 0 0 auto;
    width: 20px;
    height: 14px;
  }
}

/* Mobile results summary: align tournament and stage titles to the left. */
@media (max-width: 820px) {
  .result-summary .board-head {
    align-items: flex-start;
    text-align: left;
  }

  .result-summary .board-head > div,
  .result-summary .board-head > div:nth-child(2) {
    width: 100%;
    justify-self: stretch;
    text-align: left;
    min-width: 0;
  }

  .result-summary .board-head h2,
  .result-summary .board-head h3,
  .result-summary .board-head .label {
    text-align: left;
  }

  .result-summary .result-toggle {
    align-self: flex-start;
    justify-self: start;
  }
}

/* Strong mobile override for collapsed/expanded result tournament headers. */
@media (max-width: 820px) {
  .result-summary,
  .result-summary .board-head,
  .result-summary .board-head * {
    text-align: left !important;
  }

  .result-summary .board-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .result-summary .board-head > div,
  .result-summary .board-head > div:nth-child(2) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: auto !important;
    align-self: stretch !important;
  }

  .result-summary .board-head h2,
  .result-summary .board-head h3,
  .result-summary .board-head .label {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .result-summary .result-toggle {
    display: inline-block !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}


/* Mobile league-phase rows: keep opponent, name and pot label vertically centered. */
@media (max-width: 820px) {
  .league-opponent-row,
  .league-result-opponent {
    grid-template-columns: 32px minmax(0, 1fr) 78px !important;
    align-items: center !important;
    min-height: 32px !important;
    height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .league-opponent-row .venue,
  .league-result-opponent .venue {
    grid-column: auto !important;
    align-self: center !important;
    justify-self: end !important;
    text-align: right !important;
    margin-left: 0 !important;
  }

  .league-opponent-row .opponent-main,
  .league-result-opponent .opponent-main,
  .league-live .team-card,
  .league-results-layout .team-card,
  .main-layout .pots .team-card {
    align-items: center !important;
  }

  .opponent-number {
    align-self: center !important;
  }
}

/* Completed league-phase rows belong under the pots, not inside the draw board. */
.pots .completed-league-block {
  grid-column: 1 / -1;
  margin-top: 0;
}

.pots .completed-league-block .pot-title {
  margin-top: -4px;
}

.pots .completed-league-team {
  min-height: 32px;
}

/* Mobile league-phase results: keep the “back to tournament start” link inside the team header. */
@media (max-width: 820px) {
  .league-results-layout .league-result-title {
    height: auto !important;
    min-height: 42px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 4px 8px !important;
  }

  .league-results-layout .league-result-title-main {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .league-results-layout .league-result-title-main span:last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .league-results-layout .league-result-title a {
    flex: 0 0 auto !important;
    align-self: center !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
}


/* Composite placeholders from previous round: flag team vs team flag. */
.composite-team {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
}

.composite-team .team-name {
  min-width: 0;
  max-width: 100%;
}

.vs-label {
  color: var(--muted);
  font-weight: 700;
  flex: 0 0 auto;
}

.slot-composite.left,
.slot-composite.right {
  justify-content: center;
  text-align: center;
}

.team-card.composite-card {
  grid-template-columns: minmax(0, 1fr) 48px;
}

.team-card.composite-card .composite-team-name {
  min-width: 0;
  overflow: hidden;
}

.team-card.composite-card .rating {
  grid-column: 2;
}

@media (max-width: 820px) {
  .composite-team {
    gap: 4px;
  }

  .composite-team .flag-icon,
  .composite-team .flag-placeholder {
    width: 20px;
    height: 14px;
  }
}


/* Stacked display for placeholder ties from previous rounds. */
.composite-team-stacked {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  line-height: 1.12;
}

.composite-team-part {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
}

.composite-team-part .team-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-card.composite-card {
  min-height: 46px;
  height: auto;
  padding-top: 4px;
  padding-bottom: 4px;
}

.draw-row:has(.slot-composite),
.draw-row.result-row:has(.slot-composite) {
  min-height: 54px;
}

.slot-composite .composite-team-stacked {
  width: 100%;
}

@media (max-width: 820px) {
  .team-card.composite-card {
    min-height: 44px !important;
    height: auto !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }

  .draw-row:has(.slot-composite),
  .draw-row.result-row:has(.slot-composite) {
    min-height: 52px;
  }

  .composite-team-part {
    gap: 4px;
  }
}


/* Keep composite placeholders close to the dash in draw rows. */
.slot-composite.left {
  justify-content: flex-end;
  text-align: left;
}

.slot-composite.right {
  justify-content: flex-start;
  text-align: left;
}

.slot-composite.left .composite-team-stacked,
.slot-composite.right .composite-team-stacked {
  width: auto;
  max-width: 100%;
}

.slot-composite.left .composite-team-stacked {
  align-items: flex-start;
}

/* Pairs in pot rows need enough vertical room for the stacked two-line format. */
.pots .team-card.composite-card,
.result-pots .team-card.composite-card {
  grid-template-columns: minmax(0, 1fr) 48px;
  min-height: 46px !important;
  height: auto !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.pots .team-card.composite-card .composite-team-name,
.result-pots .team-card.composite-card .composite-team-name {
  min-width: 0;
  overflow: hidden;
}

.pots .team-card.composite-card .rating,
.result-pots .team-card.composite-card .rating {
  align-self: center;
}


/* Composite placeholders: spacing and away-side flag order. */
.composite-team-part {
  gap: 10px;
}

.pots .team-card.composite-card .composite-team-part,
.result-pots .team-card.composite-card .composite-team-part {
  gap: 10px;
}

.slot-composite.left {
  justify-content: flex-end;
  text-align: left;
}

.slot-composite.right {
  justify-content: flex-start;
  text-align: left;
}

.slot-composite.left .composite-team-stacked,
.slot-composite.right .composite-team-stacked {
  width: auto;
  max-width: 100%;
  align-items: flex-start;
}

.slot-composite.right .composite-team-part {
  justify-content: flex-start;
}

@media (max-width: 820px) {
  .composite-team-part,
  .pots .team-card.composite-card .composite-team-part,
  .result-pots .team-card.composite-card .composite-team-part {
    gap: 8px;
  }
}

/* Align composite placeholders in pot rows with regular team-name indentation. */
.pots .team-card.composite-card .composite-team-part,
.result-pots .team-card.composite-card .composite-team-part {
  gap: 16px;
}

@media (max-width: 820px) {
  .pots .team-card.composite-card .composite-team-part,
  .result-pots .team-card.composite-card .composite-team-part {
    gap: 14px;
  }
}


/* Exact alignment for two-line placeholder pairs: the text starts at the same x-position as regular teams. */
.composite-team-stacked {
  display: grid;
  row-gap: 2px;
  align-items: center;
  justify-content: stretch;
}

.composite-team-stacked.composite-left {
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
}

.composite-team-stacked.composite-right {
  grid-template-columns: minmax(0, 1fr) 30px;
  column-gap: 10px;
}

.composite-team-part {
  display: contents;
}

.composite-team-stacked .flag-icon,
.composite-team-stacked .flag-placeholder {
  align-self: center;
}

.composite-team-stacked.composite-right .flag-icon,
.composite-team-stacked.composite-right .flag-placeholder {
  justify-self: end;
}

.composite-team-stacked .team-name {
  align-self: center;
}

.vs-label {
  display: none;
}

.pots .team-card.composite-card .composite-team-part,
.result-pots .team-card.composite-card .composite-team-part {
  gap: 0;
}

@media (max-width: 820px) {
  .composite-team-stacked.composite-left,
  .composite-team-stacked.composite-right {
    column-gap: 8px;
  }
}

/* Draw/result rows use regular single-team spacing for composite placeholders; pot rows keep their own alignment. */
.draw-row .slot-composite .composite-team-stacked.composite-left,
.draw-row.result-row .slot-composite .composite-team-stacked.composite-left {
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 7px;
}

.draw-row .slot-composite .composite-team-stacked.composite-right,
.draw-row.result-row .slot-composite .composite-team-stacked.composite-right {
  grid-template-columns: minmax(0, 1fr) 24px;
  column-gap: 7px;
}

@media (max-width: 820px) {
  .draw-row .slot-composite .composite-team-stacked.composite-left,
  .draw-row.result-row .slot-composite .composite-team-stacked.composite-left {
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 5px;
  }

  .draw-row .slot-composite .composite-team-stacked.composite-right,
  .draw-row.result-row .slot-composite .composite-team-stacked.composite-right {
    grid-template-columns: minmax(0, 1fr) 20px;
    column-gap: 5px;
  }
}

/* In draw rows, align composite placeholder team names toward the dash; flags stay next to names. */
.draw-row .slot-composite .composite-team-stacked.composite-left,
.draw-row.result-row .slot-composite .composite-team-stacked.composite-left {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  row-gap: 2px;
}

.draw-row .slot-composite .composite-team-stacked.composite-right,
.draw-row.result-row .slot-composite .composite-team-stacked.composite-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 2px;
}

.draw-row .slot-composite .composite-team-part,
.draw-row.result-row .slot-composite .composite-team-part {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
}

@media (max-width: 820px) {
  .draw-row .slot-composite .composite-team-part,
  .draw-row.result-row .slot-composite .composite-team-part {
    gap: 5px;
  }
}

/* v46: qualifier label for previous-round placeholders. */
.composite-qualifier {
  grid-column: 1 / -1;
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
}

.composite-team-stacked.composite-left .composite-qualifier {
  text-align: left;
}

.composite-team-stacked.composite-right .composite-qualifier {
  text-align: right;
}

.draw-row .slot-composite .composite-qualifier,
.draw-row.result-row .slot-composite .composite-qualifier {
  max-width: 100%;
  font-size: 9px;
}

.draw-row .slot-composite.left .composite-qualifier,
.draw-row.result-row .slot-composite.left .composite-qualifier {
  text-align: right;
}

.draw-row .slot-composite.right .composite-qualifier,
.draw-row.result-row .slot-composite.right .composite-qualifier {
  text-align: left;
}

.team-card.composite-card {
  min-height: 58px !important;
}

.draw-row:has(.slot-composite),
.draw-row.result-row:has(.slot-composite) {
  min-height: 64px;
}

@media (max-width: 820px) {
  .composite-qualifier {
    font-size: 8px;
  }

  .team-card.composite-card {
    min-height: 54px !important;
  }

  .draw-row:has(.slot-composite),
  .draw-row.result-row:has(.slot-composite) {
    min-height: 60px;
  }
}

.transition-notice {
  white-space: pre-line;
}

/* v48: keep transition status line breaks in the top broadcast block */
#statusText {
  white-space: pre-line;
}

/* v51: animated movement from pots to draw area */
.flying-team {
  position: fixed;
  z-index: 9999;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
  color: #000;
  font-weight: 700;
  transition: left .75s ease, top .75s ease, width .75s ease, height .75s ease, opacity .75s ease, transform .75s ease;
  pointer-events: none;
}

.fly-target-pending {
  opacity: 0;
  visibility: hidden;
}

.fly-target-arrived {
  animation: draw-arrived-pulse .45s ease;
}

@keyframes draw-arrived-pulse {
  0% { background-color: var(--soft); }
  100% { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .flying-team,
  .fly-target-arrived {
    transition: none;
    animation: none;
  }
}

/* v55: replay list and playback speed control */
.replay-list-card:empty {
  display: none;
}

.replay-list-card {
  display: grid;
  gap: 10px;
}

.replay-list-link {
  display: block;
  width: fit-content;
  font-size: 15px;
  font-weight: 850;
}

.replay-top-card,
.replay-speed-card {
  width: 100%;
}

.replay-speed-card {
  padding-top: 18px;
  padding-bottom: 18px;
}

.replay-speed-card .label {
  margin-bottom: 10px;
}

.replay-speed-slider {
  width: 100%;
  direction: rtl;
  accent-color: var(--pefl-link);
}

.replay-speed-scale {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
}