/* --- standard: shared root variables (osPt) --- */
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  width: 1920px; height: 1080px;
  overflow: hidden; background: transparent;
  font-family: var(--font-primary, 'Oswald', sans-serif);
}

:root {
  /* --- osPt layout --- */
  --osx-cols-w: 1820px;
  --osx-cols-h: 525px;
  --osx-col-gap: 20px;
  --osx-hdr-h: 53px;
  --osx-row-h: 52px;
  --osx-gap-y: 16px;
  --osx-x: 210px;
  --osx-y: 110px;
  --osx-rank-w: 130px;
  --osx-team-w: 370px;
  --osx-mp-w: 60px;
  --osx-booyah-w: 60px;
  --osx-elim-w: 90px;
  --osx-place-w: 90px;
  --osx-total-w: 90px;
  --osx-crown-size: 34px;
  --osx-sq-w: 44px;         /* empty square left of the strip (holds the crown) */
  --osx-move-w: 20px;       /* rank-change column (arrows are stacked, so it stays narrow) */
  --osx-rank-num-w: 38px;  /* rank number / crown box */
  --osx-rank-pad-r: 4px;   /* gap between that box and the cell's right edge */
  --osx-booyah: calc(var(--osx-hdr-h) - 10px);
  --osx-name-x: 12px;
  --osx-row-size: 21px;
  --osx-hdr-size: 16px;
  --osx-logo: calc(var(--osx-row-h) - 5px);
  --osx-logo-gap: 11px;
  --osx-hdr-bg: #1f2937;
  --osx-hdr-text: #ffffff;
  --osx-left-bg: #00499b;
  --osx-left-text: #ffffff;
  --osx-right-bg: #0f0f0f;
  --osx-right-text: #ffffff;
  --osx-border: 1px solid rgba(255,255,255,0.4);
  --booyahHighlight: #ffd700;
  --booyahText: #141414;

  /* --- osPt animations --- */
  --osx-anim-hdr-dur: 0.5s;
  --osx-anim-row-start: 0.8;
  --osx-anim-row-dur: 0.45s;
  --osx-anim-row-stagger: 0.08s;
  --osx-anim-text-dur: 0.35s;
  --osx-anim-text-stagger: 0.08s;
  --osx-anim-text-start: 0.8;
  --osx-anim-hide-dur: 1s;
  --osx-anim-hl-dur: 0.7s;
  --osx-wcr-row-bg: #301E10;
  --osx-wcr-row-text: #ffffff;

  /* --- maps wrapper --- */
  --maps-wrap-w: 1820px;
  --maps-wrap-h: 365px;
  --maps-gap: 10px;
  --maps-box-w: 212px;
  --maps-box-h: 285px;
  --maps-card-img-x: 0px;   /* slide the map picture left (-) / right (+) inside the card */
  /* per-map picture position, shows the characters; max slide is about +-65px */
  --maps-x-bermuda: -65px;
  --maps-x-kalahari: 65px;
  --maps-x-nexterra: 65px;
  --maps-x-purgatory: 65px;
  --maps-x-solara: 65px;
  --maps-x-random: 0px;
  --maps-card-logo-x: 0px;  /* booyah team logo offset from the centre */
  --maps-bar-h: 46px;      /* GAME bar (top) and map-name bar (bottom) */
  --maps-game-size: 24px;
  --maps-game-color: #ffffff;
  --maps-game-bg: #000000;
  --maps-name-bg: #000000;
  --maps-name-color: #ffffff;
  --maps-name-x: 20px;
  --maps-game-w: 56px;
  --maps-game-box-w: 56px;
  --maps-game-gap: 0px;
  --maps-name-size: 22px;
  --maps-logo-size: 96px;
  --maps-logo-y: 3px;
  --maps-logo-x: 18px;
  --maps-anim-sweep-delay: 0.5s;
  --maps-anim-sweep-dur: 1.2s;
  --maps-anim-name-delay: 0.15s;
  --maps-anim-name-dur: 0.4s;
  --osprm-top: 0px;
  /* oneSided: 940 table + 20 gap + 3x280 maps + 2x10 = 1820, i.e. 50px safe margin each side.
     Table height (hdr + 12 rows) = 56 + 12x57 = 740 = map grid height (6x115 + 5x10). */
  --one-row-w: 940px;
  --one-rank-w: 92px;
  --one-mp-w: 56px;
  --one-booyah-w: 56px;
  --one-elim-w: 84px;
  --one-place-w: 84px;
  --one-total-w: 88px;   /* team column = whatever is left */
  --one-gap: 20px;
  --one-hdr-h: 56px;
  --one-row-h: 57px;
  --one-row-size: 23px;
  --one-hdr-size: 17px;
  --one-maps-gap: 10px;
  --one-maps-box-w: 280px;
  --one-maps-box-h: 115px;
}

/* --- osPt page shell --- */
.osPrm {
  position: absolute;
  inset: 0;
  top: var(--osprm-top);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
}

.osx-wrap {
  position: relative;
}

/* --- osPt show/hide --- */
.osx-wrap {
  opacity: 0;
}

.osx-wrap.osx-showing {
  opacity: 1;
}

.osx-wrap.osx-showing.osx-hide {
  opacity: 0;
  transition: opacity var(--osx-anim-hide-dur) ease;
}