/* --- twoSided: leaderboard + maps styles --- */

.twoSided {
  display: flex;
  flex-direction: column;
  gap: var(--osx-gap-y);
  --osx-hdr-trim: 50px;
}

/* --- twoSided team-count modes (set via Firebase osPtTeamCount) --- */
.twoSided.teams-12 {
  --osx-cols-h: 505px;
  --osx-hdr-h: 69px;
  --osx-row-h: 69px;
  --osx-row-size: 28px;
  --osx-hdr-size: 17px; /* 'POINTS' must fit the 78-unit score columns */
}

.twoSided.teams-18 {
  --osx-cols-h: 525px;
  --osx-hdr-h: 53px;
  --osx-row-h: 52px;
  --osx-row-size: 21px;
  --osx-hdr-size: 16px;
}

.osx-cols {
  display: flex;
  gap: var(--osx-col-gap);
  width: var(--osx-cols-w);
  height: var(--osx-cols-h);
}

.maps-wrapper {
  width: var(--maps-wrap-w);
  height: var(--maps-wrap-h);
  display: grid;
  /* --maps-cols is set by osPt.js; fewer than 6 columns are centred under the two tables */
  grid-template-columns: repeat(var(--maps-cols, 6), var(--maps-box-w));
  justify-content: center;
  grid-template-rows: repeat(3, 1fr);
  /* fill DOWN the columns: games 1-3 in the left column, 4-6 in the next, and so on */
  grid-auto-flow: column;
  gap: var(--maps-gap);
}

/* /live-graphics/mapsCount hides the games after the last one */
.maps-wrapper .map-cell.map-off { display: none; }

/* the tables start after the crown square, so the strip spans from there to the right edge */
.maps-wrapper.maps-partial {
  width: calc(var(--maps-wrap-w) - var(--osx-sq-w));
  margin-left: var(--osx-sq-w);
  justify-content: space-evenly; /* equal space left, between and right, across the width of the two tables */
}

.maps-wrapper.rows-1 {
  grid-template-rows: 1fr;
  height: var(--maps-box-h);
}

.maps-wrapper.rows-1 .map-cell:nth-child(n+7) {
  display: none;
}

.maps-wrapper.rows-2 {
  grid-template-rows: repeat(2, 1fr);
  height: calc(var(--maps-box-h) * 2 + var(--maps-gap));
}

.maps-wrapper.rows-2 .map-cell:nth-child(n+13) {
  display: none;
}

.map-cell {
  width: var(--maps-box-w);
  height: var(--maps-box-h);
  justify-self: start;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: row;
  gap: var(--maps-game-gap);
  border: var(--osx-border);
  overflow: hidden;
}

.map-cell .map-game {
  flex: 0 0 var(--maps-game-box-w);
  width: var(--maps-game-box-w);
  height: 100%;
  z-index: 2;
  background: var(--maps-game-bg);
  color: var(--maps-game-color);
  font-size: var(--maps-game-size);
  font-weight: 700;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.map-cell .map-thumb {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.map-cell .map-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: var(--maps-name-bg);
  color: var(--maps-name-color);
  font-size: var(--maps-name-size);
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  padding: 4px 6px;
}

.map-cell .map-thumb .map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.map-cell .map-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 1);
  opacity: 0;
}

.map-cell.completed .map-thumb::after {
  opacity: 0.5;
}

.map-cell .map-winner {
  position: absolute;
  left: calc(50% + var(--maps-logo-x));
  top: var(--maps-logo-y);
  transform: translateX(-50%);
  width: var(--maps-logo-size);
  height: var(--maps-logo-size);
  object-fit: contain;
  z-index: 2;
  display: none;
}

.osx-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.osx-hdr {
  height: var(--osx-hdr-h);
  border: var(--osx-border);
  margin-left: var(--osx-hdr-trim);
  background: var(--osx-hdr-bg);
  color: var(--osx-hdr-text);
  font-size: var(--osx-hdr-size);
  font-weight: 700;
  display: grid;
  grid-template-columns: calc(var(--osx-rank-w) - var(--osx-hdr-trim)) var(--osx-team-w) var(--osx-mp-w) var(--osx-booyah-w) var(--osx-elim-w) var(--osx-place-w) var(--osx-total-w);
  align-items: center;
  text-align: center;
}

.osx-hdr > span {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* # sits over the rank-number box (right end of the rank cell) */
.osx-hdr .osx-hdr-rank {
  padding: 0 calc(var(--osx-rank-pad-r) + var(--osx-rank-num-w) / 2 - 5px) 0 0;
  justify-content: flex-end;
}
/* two-line header labels come from the label's own width, not from cell padding */
.osx-hdr .osx-hdr-elim,
.osx-hdr .osx-hdr-place,
.osx-hdr .osx-hdr-total {
  width: min-content;
  justify-self: center;
  text-align: center;
}

.osx-hdr-booyah img.osx-booyah-img,
.osx-booyah img.osx-booyah-img {
  height: var(--osx-booyah);
  width: auto;
  object-fit: contain;
  display: block;
  margin: auto;
}

.osx-row {
  height: var(--osx-row-h);
  border: var(--osx-border);
  font-size: var(--osx-row-size);
  font-weight: 500;
  display: grid;
  grid-template-columns: var(--osx-rank-w) var(--osx-team-w) var(--osx-mp-w) var(--osx-booyah-w) var(--osx-elim-w) var(--osx-place-w) var(--osx-total-w);
  align-items: center;
  text-align: center;
}

.osx-row > span {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}


.osx-row .osx-rank,
.osx-row .osx-team {
  background: var(--osx-left-bg);
  color: var(--osx-left-text);
}

.osx-row .osx-num {
  background: var(--osx-right-bg);
  color: var(--osx-right-text);
}

.osx-txt {
  display: inline-block;
}

.osx-row .osx-rank {
  position: relative;
  gap: 0;
  font-size: 1.12em;
  justify-content: flex-end;
  padding: 0 var(--osx-rank-pad-r) 0 0;
}

/* rank movement indicator (from matches/Overall/teams/{tag}/rankDiff)
   pinned to the left of the rank cell; the rank number stays centered in flow */
.osx-move {
  display: flex;
  flex: 0 0 var(--osx-move-w);
  width: var(--osx-move-w);
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
}

.osx-move > span {
  text-align: center;
}

/* one line, arrow first: up = ▲ +2   down = ▼ -1 (markup order is "-1 ▼", so flip it) */
.osx-move .osx-arrow-down { order: -1; }

/* fixed-width rank number so the movement slot sits at the same x in every row
   (single-digit and double-digit ranks would otherwise shift the centered group) */
.osx-rank-num,
.osx-rank > .osx-txt {
  flex: 0 0 var(--osx-rank-num-w);
  width: var(--osx-rank-num-w);
  text-align: center;
}

.osx-move-num {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.osx-move-up { color: #22c55e; }
.osx-move-down { color: #ef4444; }
.osx-move-flat { color: #9ca3af; }

.osx-arrow {
  display: flex;
  flex-direction: column; /* 2-3 arrows are stacked one above the other */
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 0.75;
  white-space: nowrap;
}
.osx-arrow > i {
  display: block;
  font-style: normal;
}

.osx-arrow-up {
  color: #22c55e;
}

.osx-arrow-down {
  color: #ef4444;
}

/* crown lives in the empty square at the start of the row: centred in the
   one-row-wide space to the left of the strip. Shown for CR activated /
   won by CR teams and stays on screen (no blink). */
.osx-crown {
  position: absolute;
  top: 50%;
  left: calc(var(--osx-sq-w) / -2);
  right: auto;
  width: var(--osx-crown-size, 34px);
  height: var(--osx-crown-size, 34px);
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.osx-row.osx-row-wcr,
.osx-row.osx-row-wcr .osx-rank,
.osx-row.osx-row-wcr .osx-team,
.osx-row.osx-row-wcr .osx-num {
  background: var(--osx-wcr-row-bg);
  color: var(--osx-wcr-row-text);
}

.osx-team {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--osx-logo-gap);
  height: 100%;
  padding-left: var(--osx-name-x);
}

.osx-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--osx-logo);
  height: var(--osx-logo);
}

.osx-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.osx-name {
  text-align: left;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis; /* last resort, names shrink first (osxFitNames in osPt.js) */
}

/* --- twoSided animations --- */

@keyframes osx-hdr-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.osx-anim .osx-hdr {
  animation: osx-hdr-in var(--osx-anim-hdr-dur) cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--osx-anim-hdr-delay);
}

@keyframes maps-bg-sweep {
  0%   { width: var(--maps-game-w); transform: translateX(-101%) rotate(180deg); }
  12%  { width: var(--maps-game-w); transform: translateX(0) rotate(180deg); }
  20%  { width: var(--maps-game-w); transform: translateX(0) rotate(180deg); }
  50%  { width: 100%; transform: translateX(0) rotate(180deg); }
  62%  { width: 100%; transform: translateX(0) rotate(180deg); }
  100% { width: var(--maps-game-w); transform: translateX(0) rotate(180deg); }
}

@keyframes maps-img-show {
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

@keyframes maps-name-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.osx-anim .map-cell .map-game {
  animation: maps-bg-sweep var(--maps-anim-sweep-dur) cubic-bezier(0.45, 0, 0.25, 1) both;
  animation-delay: var(--maps-anim-sweep-delay);
}

.osx-anim .map-cell .map-thumb {
  animation: maps-img-show var(--maps-anim-sweep-dur) linear both;
  animation-delay: var(--maps-anim-sweep-delay);
}

.osx-anim .map-cell .map-name {
  animation: maps-name-up var(--maps-anim-name-dur) ease both;
  animation-delay: calc(var(--maps-anim-sweep-delay) + var(--maps-anim-sweep-dur) + var(--maps-anim-name-delay));
}

/* ============================================================
   twoSided column structure (art-driven)
   [ empty square ][ rank + change ][ logo + team ][ MP ][ booyah ][ ELIM ][ PLACE ][ TOTAL ]
   - the empty square is as wide as one row is tall (52px / 69px)
   - the strip (everything after the square) is what osRow2/osHeader2 are baked for
   - tracks are PROPORTIONS of the baked art (unit = px on the 831px, 12-team canvas), so the
     art stays aligned in both team-count modes. Digits: MP/booyah 2, elim/place/total 3.
   ============================================================ */
.twoSided {
  --osx-hdr-trim: var(--osx-sq-w);
  --t2-rank: 72fr;
  --t2-team: 417fr;
  --t2-mp: 54fr;
  --t2-booyah: 54fr;
  --t2-elim: 78fr;
  --t2-place: 78fr;
  --t2-total: 78fr;
  --t2-cols: minmax(0, var(--t2-rank)) minmax(0, var(--t2-team)) minmax(0, var(--t2-mp)) minmax(0, var(--t2-booyah)) minmax(0, var(--t2-elim)) minmax(0, var(--t2-place)) minmax(0, var(--t2-total));
}

.twoSided .osx-hdr,
.twoSided .osx-row {
  margin-left: var(--osx-sq-w);
  grid-template-columns: var(--t2-cols);
}

/* header "TEAM NAME" starts where the team names start */
.twoSided .osx-hdr .osx-hdr-team {
  justify-content: flex-start;
  padding-left: calc(var(--osx-name-x) + var(--osx-logo) + var(--osx-logo-gap));
}

/* ============================================================
   twoSided maps: ONE ROW, up to 8 portrait cards
   each card = [ GAME n bar ] / [ map image + booyah team logo ] / [ MAP NAME bar ]
   Colours only (theme page: mapsGameBg/Text, mapsNameBg/Text); no image backgrounds.
   ============================================================ */
.twoSided .maps-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-evenly;
  width: calc(var(--maps-wrap-w) - var(--osx-sq-w));
  height: var(--maps-box-h);
  margin-left: var(--osx-sq-w);
  gap: 6px; /* minimum space between cards */
}

.twoSided .map-cell {
  /* up to 8 cards keep their full width; more than that shrink evenly so ALL stay in ONE row */
  flex: 0 1 var(--maps-box-w);
  min-width: 0;
  height: var(--maps-box-h);
  display: block;
  border: 0;
  background: none;
  overflow: hidden;
}

.twoSided .map-cell .map-game,
.twoSided .map-cell .map-name {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--maps-bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  writing-mode: horizontal-tb;
  transform: none;
  z-index: 2;
  white-space: nowrap;
}

.twoSided .map-cell .map-game {
  top: 0;
  align-items: center; /* text stays centred in the bar: card middle while it covers the card, then rides up with it */
  overflow: hidden;
  background: var(--maps-game-bg);
  width: auto;
  color: var(--maps-game-color);
  font-size: var(--maps-game-size);
}

.twoSided .map-cell .map-name {
  bottom: 0;
  background: var(--maps-name-bg);
  color: var(--maps-name-color);
  font-size: var(--maps-name-size);
}

.twoSided .map-cell .map-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--maps-bar-h);
  bottom: var(--maps-bar-h);
  z-index: 1;
}

/* map image: --maps-card-img-x slides the picture left (-) / right (+) in px; the picture is cropped to fill the card, so it can only slide as far as the crop allows */
.twoSided .map-cell .map-thumb .map-img { object-fit: cover; object-position: calc(50% + var(--maps-card-img-x, 0px)) 50%; }

/* per-map picture position: --maps-x-<map> (px, set in the Layout Editor) adds to --maps-card-img-x */
.twoSided .map-cell .map-thumb .map-img[data-map="bermuda"] { object-position: calc(50% + var(--maps-card-img-x, 0px) + var(--maps-x-bermuda, 0px)) 50%; }
.twoSided .map-cell .map-thumb .map-img[data-map="kalahari"] { object-position: calc(50% + var(--maps-card-img-x, 0px) + var(--maps-x-kalahari, 0px)) 50%; }
.twoSided .map-cell .map-thumb .map-img[data-map="nexterra"] { object-position: calc(50% + var(--maps-card-img-x, 0px) + var(--maps-x-nexterra, 0px)) 50%; }
.twoSided .map-cell .map-thumb .map-img[data-map="purgatory"] { object-position: calc(50% + var(--maps-card-img-x, 0px) + var(--maps-x-purgatory, 0px)) 50%; }
.twoSided .map-cell .map-thumb .map-img[data-map="solara"] { object-position: calc(50% + var(--maps-card-img-x, 0px) + var(--maps-x-solara, 0px)) 50%; }
.twoSided .map-cell .map-thumb .map-img[data-map="random"] { object-position: calc(50% + var(--maps-card-img-x, 0px) + var(--maps-x-random, 0px)) 50%; }

.twoSided .map-cell .map-winner {
  left: 50%;
  top: 50%;
  /* booyah team logo: --maps-card-logo-x shifts it left (-) or right (+) from the centre, in px */
  transform: translate(calc(-50% + var(--maps-card-logo-x, 0px)), -50%);
}

/* map card animation (one card after another, left to right):
   1. everything hidden
   2. the GAME bar drops from the top and grows to cover the whole card; the map image loads under it
   3. the bar then shrinks back up to its place at the top while the map-name bar rises from the bottom
   timing: --maps-anim-sweep-delay (start) and --maps-anim-sweep-dur (length of one card) */
@keyframes maps-card-game {
  0%   { height: 0; }
  40%  { height: 100%; animation-timing-function: linear; }
  50%  { height: 100%; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100% { height: var(--maps-bar-h); }
}
@keyframes maps-card-name {
  0%, 50% { transform: translateY(100%); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100%    { transform: translateY(0); }
}
@keyframes maps-card-img {
  0%, 39% { opacity: 0; }
  40%, 100% { opacity: 1; }
}
.twoSided .map-cell:nth-child(1) { --i: 0; } .twoSided .map-cell:nth-child(2) { --i: 1; }
.twoSided .map-cell:nth-child(3) { --i: 2; } .twoSided .map-cell:nth-child(4) { --i: 3; }
.twoSided .map-cell:nth-child(5) { --i: 4; } .twoSided .map-cell:nth-child(6) { --i: 5; }
.twoSided .map-cell:nth-child(7) { --i: 6; } .twoSided .map-cell:nth-child(8) { --i: 7; }
.twoSided .map-cell:nth-child(9) { --i: 8; } .twoSided .map-cell:nth-child(10) { --i: 9; }
.twoSided .map-cell:nth-child(11) { --i: 10; } .twoSided .map-cell:nth-child(12) { --i: 11; }
.twoSided .map-cell:nth-child(13) { --i: 12; } .twoSided .map-cell:nth-child(14) { --i: 13; }
.twoSided .map-cell:nth-child(15) { --i: 14; } .twoSided .map-cell:nth-child(16) { --i: 15; }
.twoSided .map-cell:nth-child(17) { --i: 16; } .twoSided .map-cell:nth-child(18) { --i: 17; }
.osx-anim .twoSided .map-cell .map-game,
.osx-anim .twoSided .map-cell .map-thumb,
.osx-anim .twoSided .map-cell .map-name {
  animation-duration: var(--maps-anim-sweep-dur);
  animation-delay: calc(var(--maps-anim-sweep-delay) + var(--i, 0) * 0.08s);
  animation-fill-mode: both;
}
.osx-anim .twoSided .map-cell .map-game  { animation-name: maps-card-game; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.osx-anim .twoSided .map-cell .map-thumb { animation-name: maps-card-img;  animation-timing-function: linear; }
.osx-anim .twoSided .map-cell .map-name  { animation-name: maps-card-name; animation-timing-function: linear; }