.loader {
  --sz: 50%;
  position: absolute;
  height: var(--sz);
  aspect-ratio: 1/1;
  top: calc(var(--sz) / 2);
  left: 3.5%;
  transform-origin: center;
  animation: loader-rotate 4s linear infinite;
  --r: 8%;
}
.loader div {
  position: absolute;
  top: calc(50% - var(--r));
  left: calc(50% - var(--r));
  aspect-ratio: 1/1;
  height: calc(var(--r) * 2);
  border-radius: 50%;
  background-color: white;
  box-shadow: 1px 1px 2px #111, 0 0 1em #111111, 0 0 0.2em #111;
  transform: rotateZ(calc(var(--i) * 45deg)) translateX(208.3333333333%);
}
@keyframes loader-rotate {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(359deg);
  }
}

.ntchange__loader {
  display: flex;
  height: var(--dvh);
  justify-content: center;
  align-items: center;
}

.card {
  width: 100vw;
  height: var(--dvh);
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  z-index: 6;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-image: url("../img/LB/stars-title.webp");
  background-size: contain;
}
.card.Red {
  background-image: url("../img/LB/stars-title-red.webp");
}
.card.Blue {
  background-image: url("../img/LB/stars-title-blue.webp");
}
.card.pguard, .card.titulUp {
  background-image: url("../img/LB/stars-title-guard.webp");
}
.card__icon {
  position: relative;
}
.card__icon > div {
  position: absolute;
  z-index: 7;
  width: 6vw;
  top: calc(6vw / -2);
  left: calc(50% - 6vw / 2);
  aspect-ratio: 1/1;
  border: solid 2px white;
  border-radius: 20%;
  background-color: #111;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card__wrapper {
  display: flex;
  justify-content: center;
  border: solid min(2px, 0.3vmin) white;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(13, 13, 13, 0.5);
  backdrop-filter: blur(5px);
  box-shadow: 0px 0px 51px 4px rgba(30, 30, 30, 0.7) inset;
  text-shadow: 1px 1px 2px #111, 0 0 1em #111111, 0 0 0.2em #111;
}
.card .btn-close {
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 100;
}
.card__img {
  height: 100vmin;
  max-height: 512px;
  aspect-ratio: 1/1;
  mask-image: linear-gradient(to right, black 90%, transparent 100%);
}
.card__img img {
  transform: rotateY(180deg);
}
.card__img.King {
  mask-image: linear-gradient(to right, black 70%, transparent 100%);
}
.card__img.Kardinal {
  mask-image: linear-gradient(to right, black 60%, transparent 90%);
}
.card__img.Courter {
  mask-image: linear-gradient(to right, black 70%, transparent 90%);
}
.card__info {
  max-width: 450px;
  width: 90vmin;
  padding-right: min(8vmin, 20px);
}
.card__info.titulChange {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card__loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
@media (orientation: portrait) {
  .card__loader {
    height: calc(0.5 * var(--dvh));
  }
}
.card__title {
  margin-bottom: min(16vmin, 40px);
}
.card__titul {
  font-size: 300%;
  text-align: center;
}
.card__name {
  text-align: center;
}
.card__rating {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: min(4vmin, 20px);
  overflow: hidden;
}
.card__rating th,
.card__rating td {
  padding: min(4vmin, 10px) min(8vmin, 20px);
  font-weight: normal;
}
.card__rating thead {
  background-color: #041501;
}
.card__rating .green {
  background-color: var(--primary-color);
}
.card__rating .red {
  background-color: var(--secondary-color);
}
.card__rating_row1 {
  background: rgba(13, 13, 13, 0.7);
}
.card__rating_row2 {
  background: rgba(4, 21, 1, 0.7);
}
.card__description_1, .card__description_2, .card__description_3, .card__description-alt_1, .card__description-alt_2, .card__description-alt_3 {
  padding: min(16vmin, 20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: min(4vmin, 20px);
  margin: min(16vmin, 20px) 0;
  background-color: rgba(73, 35, 5, 0.8);
}
.card__description_1.pguard, .card__description_1.titulUp, .card__description_2.pguard, .card__description_2.titulUp, .card__description_3.pguard, .card__description_3.titulUp, .card__description-alt_1.pguard, .card__description-alt_1.titulUp, .card__description-alt_2.pguard, .card__description-alt_2.titulUp, .card__description-alt_3.pguard, .card__description-alt_3.titulUp {
  background-color: rgba(4, 21, 1, 0.8);
}
.card__description_2 {
  color: yellow;
}
.card__description_2.pguard {
  background-color: var(--primary-color);
}
.card__description_plate {
  margin-bottom: 3vmin;
}
.card__description_text.acent {
  color: #ecdf71;
}
.card__value {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: var(--primary-color);
  border-radius: min(2vmin, 10px);
  padding: 0.3vmin 0.6vmin;
  display: flex;
  justify-content: center;
  font-size: 80%;
  color: yellow;
}
.card__auth {
  display: flex;
  justify-content: center;
  margin-top: 6vmin;
}
.card__buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 6vmin;
}
.card__buttons .btn-ok {
  width: 30%;
  background-color: var(--secondary-color);
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.card__buttons .btn-ok.pguard {
  background-color: var(--primary-color);
}
@media (orientation: portrait) {
  .card__buttons .btn-ok {
    aspect-ratio: 4/1;
    height: auto;
  }
  .card__buttons .btn-ok.pguard {
    aspect-ratio: 3/1;
    height: auto;
  }
}
.card__buttons .btn-ok .check-mark {
  text-align: center;
  width: calc(100% - min(5.5vmin, 20px));
  height: 100%;
  left: calc(50% - (100% - min(5.5vmin, 20px)) / 2);
  bottom: 15%;
  top: auto;
}
.card__buttons .btn-ok:active .check-mark, .card__buttons .btn-ok:hover .check-mark {
  bottom: 32%;
}
.card__buttons .btn-lb-wrapper {
  position: relative;
  width: 35%;
}
@media (orientation: portrait) {
  .card__buttons .btn-lb-wrapper {
    aspect-ratio: 4/1.3;
    height: auto;
  }
}
.card__buttons .btn-lb-wrapper .leaderBoard__btn {
  border-radius: 12px 12px 0 0;
  height: 100%;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: none;
  left: 0;
}

@media (orientation: landscape) and (max-height: 512px) {
  .card__wrapper {
    border: none;
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    padding-right: 0;
  }
  .card__description {
    background-color: rgba(73, 35, 5, 0.8);
    padding: min(16vmin, 20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: min(4vmin, 20px);
    margin: min(16vmin, 20px) 0;
  }
  .card__description.pguard {
    background-color: rgba(4, 21, 1, 0.8);
  }
  .card__description_1, .card__description_2, .card__description_3 {
    margin: 0;
    border: none;
    padding: 0;
    background: none;
  }
  .card__description_1.pguard, .card__description_2.pguard, .card__description_3.pguard {
    background: none;
  }
  .card__description_1 {
    margin-bottom: 2vmin;
  }
  .card__description_1.pguard {
    margin-bottom: 0;
  }
}
@media (orientation: landscape) and (max-height: 470px) {
  .card__description-alt {
    overflow-y: auto;
  }
  .card__description-alt_1, .card__description-alt_2, .card__description-alt_3 {
    border: none;
    background: none !important;
  }
  .card .titulChange {
    width: 60%;
  }
}
@media (orientation: landscape) and (max-height: 440px) {
  .card .btn-close {
    right: 50%;
    margin-right: 0;
  }
  .card__info {
    overflow: auto;
  }
  .card__titul {
    font-size: 230%;
  }
  .card__title {
    margin-bottom: min(8vmin, 20px);
  }
  .card__description {
    margin: 0;
    border: none;
    border-radius: 0;
  }
  .card__rating {
    border: none;
    border-radius: 0;
    width: 100%;
  }
  .card__rating th,
  .card__rating td {
    padding: 2vmin 8vmin;
    font-weight: normal;
  }
  .card__rating_row1 {
    background: rgba(4, 21, 1, 0.7);
  }
  .card__title {
    margin-bottom: 4vmin;
  }
}
@media (orientation: portrait) {
  .card {
    font-size: 110%;
  }
  .card .btn-close {
    margin-right: 0;
  }
  .card__icon {
    position: absolute;
    top: 0;
    left: 0;
  }
  .card__icon > div {
    top: 0;
    left: 0;
    width: min(20vmin, 512px);
    border-top-left-radius: 0;
  }
  .card__wrapper {
    flex-direction: column;
    justify-content: flex-start;
    border: none;
    border-radius: 0%;
    height: var(--dvh);
  }
  .card__img {
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: var(--dvh);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  }
  .card__img.King, .card__img.Kardinal, .card__img.Courter {
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  }
  .card__titul {
    font-size: 150%;
  }
  .card__info {
    width: 100vw;
    max-width: 100vw;
    padding-right: 0;
    position: absolute;
    bottom: 0;
    min-height: calc(var(--dvh) - 100vw);
  }
  .card__title {
    margin-bottom: 0;
    background-color: var(--primary-color);
    padding-bottom: 2vmin;
    padding-top: 2vmin;
  }
  .card__rating {
    border: none;
    border-radius: 0;
    width: 100%;
    border-collapse: collapse;
  }
  .card__rating th {
    font-weight: normal;
    padding: 3vmin 8vmin;
  }
  .card__rating_row2 {
    background: #041501;
  }
  .card__rating_row2 td {
    padding: 0 8vmin 6vmin 8vmin;
  }
  .card__rating_row1 {
    background: #041501;
  }
  .card__rating_row1 td {
    padding: 0vmin 8vmin 3vmin 8vmin;
  }
  .card__description {
    background-color: rgba(73, 35, 5, 0.8);
    padding: min(16vmin, 20px);
    border: none;
    border-radius: 0;
    margin: 0;
  }
  .card__description.pguard {
    padding: 0;
    background-color: #041501;
  }
  .card__description_1, .card__description_2, .card__description_3 {
    margin: 0;
    border: none;
    padding: 0;
    background: none;
  }
  .card__description_1.pguard, .card__description_2.pguard, .card__description_3.pguard {
    padding: min(16vmin, 20px);
    background: none;
  }
  .card__description_1 {
    margin-bottom: 4vmin;
  }
  .card__description_1.pguard {
    margin-bottom: 0;
  }
  .card__description_2.pguard {
    background-color: var(--primary-color);
    border-radius: 0;
  }
  .card__description-alt_1 {
    margin-top: 0 !important;
  }
}
.logotitul {
  font-size: 200%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logotitul .generalIcon {
  --base-w: calc(min(16vmin, 20px) * 3.5);
  left: 70%;
  top: 5%;
  background-image: none !important;
  animation: none !important;
}
.logotitul .generalIcon.Clown,
.logotitul .generalIcon.Cansler,
.logotitul .generalIcon.King,
.logotitul .generalIcon.Courter,
.logotitul .generalIcon.Guard,
.logotitul .generalIcon.Kardinal,
.logotitul .generalIcon.Writer {
  padding-top: 20%;
  background-color: #111;
  border: 2px solid white;
  clip-path: none;
  border-radius: 0 0 20% 20%;
}
.logotitul .generalIcon.Clown img,
.logotitul .generalIcon.Cansler img,
.logotitul .generalIcon.King img,
.logotitul .generalIcon.Courter img,
.logotitul .generalIcon.Guard img,
.logotitul .generalIcon.Kardinal img,
.logotitul .generalIcon.Writer img {
  width: 80%;
}
.logotitul .generalIcon.Cansler img {
  width: 75%;
}
.logotitul .generalIcon.Guard img {
  width: 65%;
  filter: drop-shadow(0 0 1px white);
}
.logotitul .generalIcon.Kardinal {
  padding-top: 30%;
}
.logotitul .generalIcon.Kardinal img {
  width: 65%;
}
.logotitul__icon {
  filter: drop-shadow(0 0 15px #111);
}
.logotitul__text {
  background-color: var(--primary-color);
  padding-left: calc(min(16vmin, 20px) * 3.5);
  padding-right: 5vmin;
  border-radius: 0 12px 12px 0;
  border: solid 2px white;
}
.logotitul__text.Guard {
  font-size: 80%;
  line-height: 200%;
}

.leaderBoard {
  width: 100vw;
  height: var(--dvh);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(1vw, 10px);
}
@media (orientation: portrait) {
  .leaderBoard {
    flex-direction: block;
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: 0.2s linear;
    font-size: 110%;
  }
}
.leaderBoard__center {
  position: relative;
  width: 0;
  height: 100%;
  z-index: 3;
}
@media (orientation: portrait) {
  .leaderBoard__center {
    display: none;
  }
}
.leaderBoard__center .btn-close {
  left: calc(min(14vmin, 65px) / -2);
  width: min(14vmin, 65px);
}
.leaderBoard__left {
  position: relative;
  height: 100%;
}
@media (orientation: portrait) {
  .leaderBoard__left {
    display: none;
  }
}
.leaderBoard__left .horn {
  --base-h: 20vmin;
  top: 15%;
  left: -20vmin;
  transform: rotateY(180deg) rotateZ(-45deg);
}
.leaderBoard__left .menestrel {
  position: absolute;
  width: 35vmin;
  aspect-ratio: 626/940;
  background-image: url("../img/LB/menestrel.png");
  background-repeat: no-repeat;
  background-size: contain;
  top: 44%;
  left: -25vmin;
  transform: rotateY(180deg);
}
.leaderBoard__right {
  position: relative;
  height: 100%;
  z-index: -1;
}
@media (orientation: portrait) {
  .leaderBoard__right {
    display: none;
  }
}
.leaderBoard__right .horn {
  --base-h: 20vmin;
  top: 15%;
  right: -20vmin;
  transform: rotateZ(-45deg);
}
.leaderBoard__right .menestrel {
  position: absolute;
  width: 35vmin;
  aspect-ratio: 626/940;
  background-image: url("../img/LB/menestrel.png");
  background-repeat: no-repeat;
  background-size: contain;
  top: 44%;
  right: -25vmin;
}
@media (orientation: portrait) {
  .leaderBoard__general {
    position: absolute;
    top: 0;
    transform: rotateY(-180deg);
    backface-visibility: hidden;
  }
}
@media (orientation: portrait) {
  .leaderBoard__royal {
    position: absolute;
    top: 0;
    backface-visibility: hidden;
    transform: rotateY(0deg);
  }
}
@media (orientation: portrait) {
  .leaderBoard.backside {
    transform: rotateY(180deg);
  }
}
.leaderBoard__switcher {
  display: none;
}
@media (orientation: portrait) {
  .leaderBoard__switcher {
    display: block;
    position: absolute;
    top: calc(var(--dvh) - calc(0.08 * var(--dvh)) + 4px);
    aspect-ratio: 2.3;
    height: calc(0.08 * var(--dvh));
    left: calc(50vw - 2.3 * calc(0.08 * var(--dvh)) / 2);
    background-color: var(--primary-color);
    z-index: 3;
    border-radius: 10px 10px 0 0;
    border: solid 2px rgba(255, 255, 0, 0.604);
    border-bottom: none;
    box-shadow: 1px 1px 2px #111, 0 0 1em #111111, 0 0 0.2em #111;
    cursor: pointer;
    overflow: visible;
  }
  .leaderBoard__switcher .arrow {
    height: 80%;
    object-fit: contain;
    position: absolute;
    left: 10%;
    top: 13%;
    z-index: 5;
  }
  .leaderBoard__switcher .toLb {
    position: absolute;
    left: 30%;
    bottom: -30%;
    width: calc(calc(0.08 * var(--dvh)) * 1.8);
    height: calc(calc(0.08 * var(--dvh)) * 1.8);
    border-radius: 80%;
    border: 2px solid #111;
  }
}

.grid, .item__body, .item__header {
  display: grid;
  grid-template-columns: minmax(var(--min-numb-col-w), min-content) 1.1fr 1.7fr 0.7fr 0.9fr;
  align-items: center;
  width: 100%;
}

.board {
  --min-numb-col-w: 4vw;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 30vw;
  min-width: max-content;
  border-radius: min(8vmin, 24px);
  height: calc(0.9 * var(--dvh));
  overflow: hidden;
  box-shadow: 0px 0px 51px 4px black;
}
@media (orientation: portrait) {
  .board {
    --min-numb-col-w: 10vw;
  }
}
.board__close {
  position: absolute;
  width: 100vw;
  height: 0;
  top: 0;
  left: calc(100% - min(12vmin, 40px) - 20px);
  z-index: 3;
}
@media (orientation: landscape) {
  .board__close {
    display: none;
  }
}
@media (orientation: portrait) {
  .board {
    width: 100vw;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
}
.board__wrapper {
  backdrop-filter: blur(5px);
  background: rgba(13, 13, 13, 0.5);
}
.board__header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--dvh) * 0.02) 0;
  font-size: min(5.6vmin, 24px);
  position: relative;
}
@media (orientation: portrait) {
  .board__header {
    padding-top: min(12vmin, 40px);
    overflow: hidden;
  }
}
.board__title {
  padding: 0.5vmin;
  width: 100%;
  text-align: center;
  border-width: 1px 0;
  text-shadow: 1px 1px 2px #111, 0 0 1em #111111, 0 0 0.2em #111;
}
.board__body {
  padding-top: 2vmin;
}

.leaderBoard__general .board__body {
  background: rgba(13, 13, 13, 0.5);
  backdrop-filter: blur(5px);
  box-shadow: 0px 0px 51px 4px rgba(30, 30, 30, 0.7) inset;
}
.leaderBoard__general .board::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30%;
  background: linear-gradient(to top, rgb(13, 13, 13) 30%, transparent 90%);
  z-index: 3;
}
@media (orientation: portrait) {
  .leaderBoard__general .board::before {
    bottom: none;
    height: calc(0.3 * var(--dvh));
    top: calc(0.7 * var(--dvh));
    background: linear-gradient(to top, rgb(13, 13, 13) 50%, transparent 100%);
  }
}

.item {
  width: 100%;
  text-align: center;
}
.item__header {
  display: grid;
  grid-template-columns: minmax(var(--min-numb-col-w), min-content) 2.8fr 0.7fr 0.9fr;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.item__body {
  padding: calc(0.0125 * var(--dvh)) 0;
}
.item > div {
  padding: 0% 0.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item > div.item__name {
  justify-content: flex-start;
  max-width: 30vw;
  text-align: left;
}
.item__numb {
  margin-left: 5px;
}
.item.item__header > div.item__name {
  justify-content: center;
  text-align: center;
  max-width: 100%;
}
.item__icon img {
  height: calc(0.07 * var(--dvh));
  transform: rotateY(180deg);
  border-radius: 50%;
  animation: opacity 2s ease;
  margin-right: 5px;
}
.item__titul {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(0.07 * var(--dvh));
}
.item__titul_general {
  align-self: stretch;
  height: auto;
}
.item .rating {
  flex-direction: column;
  width: fit-content;
  border: solid 2px white;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1/1;
  background: linear-gradient(to top, var(--secondary-color) 0%, var(--secondary-color) 50%, var(--primary-color));
}
.item .rating__procent, .item .rating__count {
  width: 100%;
  padding: 0 min(5px, 0.5vw);
}
@media (orientation: portrait) {
  .item .rating__procent, .item .rating__count {
    padding: 0 1vw;
  }
}
.item .rating__procent {
  background-color: var(--primary-color);
}
.item .rating__count {
  font-size: 60%;
  background-color: var(--secondary-color);
}
.item__selected {
  color: var(--primary-color-2);
}
.item__selected .rating {
  color: white;
  border: solid 2px yellow;
}

.leaderBoard__royal .board {
  background: rgba(13, 13, 13, 0.5);
  backdrop-filter: blur(5px);
}
.leaderBoard__royal .board .item__body {
  cursor: pointer;
  transition: all 0.5s ease-in-out;
}
.leaderBoard__royal .board .item__body:hover {
  background-color: #111;
}
@media (orientation: portrait) {
  .leaderBoard__royal .board {
    background: rgba(13, 13, 13, 0.8);
  }
  .leaderBoard__royal .board::after {
    content: "";
    position: absolute;
    top: 100%;
    width: 100vw;
    height: calc(0.1 * var(--dvh));
    background-image: url("../img/LB/stars-title.webp");
    background-size: cover;
    background-position: bottom;
    z-index: -1;
  }
  .leaderBoard__royal .board.Red::after {
    background-image: url("../img/LB/stars-title-red.webp");
  }
  .leaderBoard__royal .board.Blue::after {
    background-image: url("../img/LB/stars-title-blue.webp");
  }
}
.leaderBoard__royal .board .royalIcon {
  width: 65%;
  height: 65%;
  object-fit: contain;
  animation: opacity 2s ease;
}
.leaderBoard__royal .board .King {
  width: 60%;
  height: 60%;
  margin-top: -10%;
}
.leaderBoard__royal .board .Courter {
  width: 75%;
  height: 75%;
}
.leaderBoard__royal .board .Guard {
  width: 75%;
  height: 75%;
  margin-left: -10%;
}
.leaderBoard__royal .board .Clown {
  width: 70%;
  height: 70%;
  margin-left: -10%;
}
.leaderBoard__royal .board .Writer {
  width: 70%;
  height: 70%;
}

.generalIcon {
  animation: opacity 2s ease;
  --base-w: calc(0.055 * var(--dvh));
  --base-h: calc(var(--base-w) / 5 * 6);
  height: 97%;
  aspect-ratio: 4/5;
  justify-content: center;
  align-items: center;
  gap: 0.5vmin;
  background-size: cover;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  margin-top: 6%;
}
.generalIcon.Red {
  background-color: var(--btn-color-red);
  background-image: url("../img/LB/Red/texture.png");
}
.generalIcon.Blue {
  background-color: var(--btn-color-blue);
  background-image: url("../img/LB/Blue/texture.png");
}
.generalIcon .star {
  width: 30%;
  height: 30%;
  position: absolute;
  background-repeat: no-repeat;
}
.generalIcon .star__full {
  background-image: url("../img/star.svg");
}
.generalIcon .star__empty {
  background-image: url("../img/nostar.svg");
}
.generalIcon .star__1 {
  top: 15%;
  left: 12%;
}
.generalIcon .star__2 {
  top: 15%;
  right: 12%;
}
.generalIcon .star__3 {
  top: 45%;
  left: 35%;
}

.leaderBoard__royal .board__header {
  background-image: url("../img/LB/stars-title.webp");
  background-size: cover;
}
.leaderBoard__royal .board__header.Red {
  background-image: url("../img/LB/stars-title-red.webp");
}
.leaderBoard__royal .board__header.Blue {
  background-image: url("../img/LB/stars-title-blue.webp");
}
@media (orientation: portrait) {
  .leaderBoard__royal .board__header {
    background-position: bottom;
  }
}