:root {
  --spacing-bottom-nav: 0px;
  --spacing-bottom-ad: 0px;
  --spacing-bottom: calc(var(--spacing-bottom-nav) + var(--spacing-bottom-ad));
  --spacing-bottom-sw: 0px;
  --space: 12px;
  --headerHeight: 60px;
  --headerBtnSize: 38px;
  --subHeaderHeight: 32px;
  --white: 0, 0%, 100%;
  --black: 0, 0%, 0%;
  --scrollbarColor: hsla(var(--fg-primary-hs), var(--fg-primary-l), 15%);
  --borderColor: var(--bg-tertiary);
  --borderColor-tap: var(--bg-tertiary-tap);
  --facebook-hsl: 221, 53%, 45%;
  --facebookColor: hsl(var(--facebook-hsl));
  --borderRadius: var(--space);
  --borderRadiusCircle: 50%;
  --borderRadiusCapsule: 999px;
  --userAvatarRadius: var(--borderRadiusCircle);
  --dropShadow: 0 0 10px var(--bg-primary);
  --font-h1: 32px;
  --font-h2: 20px;
  --font-h3: 18px;
  --font-subtitle1: 16px;
  --font-body1: 14px;
  --font-body2: 13px;
  --font-caption1: 11px;
  --font-caption2: 10px;
}

.closed.nav-bottom {
  --spacing-bottom-nav: 60px;
}

html,
body {
  height: 100%;
  font-family: var(--font), Sans-Serif;
}

body {
  font-size: var(--font-body2);
  color: var(--fg-secondary);
  background-color: var(--bg-primary);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-size-adjust: none;
  user-select: none;
}

a {
  text-decoration: none;
  color: inherit;
}

h1 {
  font-size: var(--font-h1);
}

h2 {
  font-size: var(--font-h2);
}

h3 {
  font-size: var(--font-h3);
}

h4 {
  font-size: var(--font-body1);
}

.loading {
  position: relative;
}
.loading:before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(var(--bg-secondary-hs), var(--bg-secondary-l), 50%);
}
.loading:after {
  content: "";
  border-radius: 50%;
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: min(80%, 16px);
  height: min(80%, 16px);
  border: 2px solid var(--accentColor);
  border-top-color: transparent;
  animation: rotate 0.5s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
#content {
  background-color: var(--bg-primary);
  height: 100%;
  display: flex;
  flex-direction: column;
  max-width: 600px;
  margin: auto;
}

#inner-content {
  opacity: 1;
  transition: opacity 0.25s ease;
  flex: 1;
  overflow: auto;
}
#inner-content.hide {
  opacity: 0;
}

#inner-content-spinner {
  opacity: 0;
  transition: opacity 0.25s ease;
}
#inner-content-spinner.show {
  opacity: 1;
}
#inner-content-spinner.loading:after {
  width: 50px;
  height: 50px;
  border-width: 5px;
  position: fixed;
}

.wrapper {
  margin: auto;
  max-width: 600px;
}
.wrapper--spaced {
  padding: calc(var(--space) * 1.5);
}

.card-title {
  display: flex;
  align-items: center;
  margin-bottom: calc(var(--space) * 1.5);
  gap: calc(var(--space) / 2);
}
.card-title .logo {
  width: 16px;
  height: 16px;
}
.card-title .title {
  font-size: var(--font-body2);
  font-weight: 500;
}
.card-title h3 {
  color: var(--fg-primary);
}

.card {
  background-color: var(--bg-secondary);
  border-radius: 12px;
  overflow: hidden;
}
.card:not(:last-child) {
  margin-bottom: calc(var(--space) * 2);
}

.card-item {
  padding: calc(var(--space) * 1.5);
  display: flex;
  align-items: center;
  position: relative;
  gap: var(--space);
}
.card-item:not(:last-child) {
  border-bottom: 1px solid var(--bg-primary);
}
.card-item.tap {
  background-color: var(--bg-secondary-tap);
}

.card-compact .card-item {
  padding: var(--space);
}

.cards {
  display: flex;
  gap: var(--space);
  align-items: flex-start;
}
.cards .card {
  flex-grow: 1;
  flex-basis: 0;
}

.tabs {
  padding: 0 calc(var(--space) * 1.5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid var(--bg-secondary);
  position: sticky;
  top: 0;
  background-color: var(--bg-primary);
  z-index: 9;
  box-shadow: var(--dropShadow);
  overflow-x: auto;
  gap: calc(var(--space) * 2);
}
.tabs .tab {
  font-size: var(--font-body1);
  font-weight: 650;
  color: var(--fg-tertiary);
  padding: var(--space) calc(var(--space) / 6);
}
.tabs .tab.active {
  color: var(--fg-primary);
  border-bottom: 2px solid var(--yellow-base);
  padding-bottom: calc(var(--space) - 2px);
}
.tabs .tab.tap:not(.active) {
  color: var(--fg-secondary);
}

.carousel {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.carousel .carousel-item {
  scroll-snap-align: start;
  vertical-align: top;
  scroll-snap-stop: always;
  flex: 1;
  min-width: 100%;
  padding: calc(var(--space) * 3) calc(var(--space) * 1.5) calc(var(--space) * 1.5) calc(var(--space) * 1.5);
}

.tabbed {
  height: 100%;
}

.carousel {
  height: 100%;
}
.carousel .carousel-item {
  overflow-y: auto;
}

/*****/
.hidden-scrollbar {
  scrollbar-width: none;
}

@media not all and (pointer: coarse) {
  .thin-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-tertiary) transparent;
  }
}
img[src*="dazn.png"] {
  filter: invert(1);
}

.profile .top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--space) * 1.5);
  margin-bottom: calc(var(--space) * 3);
}
.profile .top .player-photo {
  width: 60px;
  height: 68px;
  border-radius: var(--space);
  background-color: var(--bg-secondary);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.profile .top .player-photo img {
  width: 60px;
  height: 60px;
}
.profile .top .title {
  font-size: var(--font-h2);
  font-weight: bold;
  color: var(--fg-primary);
}
.profile .top .subtitle {
  margin-top: calc(var(--space) / 2);
  font-size: var(--font-body1);
  display: flex;
  align-items: center;
  gap: calc(var(--space) / 2);
}

.profile-tabbed .top {
  padding: calc(var(--space) * 1.5) calc(var(--space) * 1.5) calc(var(--space) * 3) calc(var(--space) * 1.5);
  margin-bottom: 0;
}

.empty {
  padding: calc(var(--space) * 2);
  text-align: center;
}
.empty img {
  width: 128px;
  margin-bottom: var(--space);
}
.empty p {
  font-size: var(--font-body2);
  color: var(--fg-tertiary);
}

.show-more {
  font-size: var(--font-body2);
  font-weight: 500;
  color: var(--fg-tertiary);
  justify-content: center;
  text-align: center;
}

button svg {
  display: block;
}

.round-games {
  margin-bottom: calc(var(--space) * 2);
}

.pull-to-refresh {
  position: fixed;
  top: -20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.pull-to-refresh.loading:before {
  background-color: transparent;
}
.pull-to-refresh.loading:after {
  width: 16px;
  height: 16px;
}
.pull-to-refresh.return {
  transition: top 0.5s;
}

a {
  -webkit-tap-highlight-color: transparent;
}

.btn {
  appearance: none;
  color: var(--fg-primary);
  cursor: pointer;
  border: 0;
  outline: 0;
  position: relative;
  display: block;
  background-color: transparent;
  -webkit-tap-highlight-color: transparent;
}
.btn:disabled {
  cursor: default;
}
.btn--block {
  width: 100%;
}
.btn .spinner {
  animation: spin 1s linear infinite;
  border-radius: 50%;
  border: 3px solid var(--accentColor);
  border-top-color: transparent;
  bottom: 0;
  display: none;
  height: 20px;
  left: calc(var(--space) * 2);
  margin: auto;
  position: absolute;
  top: 0;
  width: 20px;
}
.btn .spinner.show {
  display: block;
}

a.btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-primary-l {
  background-color: var(--fg-primary);
  color: var(--bg-primary);
  height: 40px;
  font-size: var(--font-body1);
  font-weight: bold;
  border-radius: var(--space);
}
.btn-primary-l.tap {
  background-color: var(--fg-primary-tap);
}

.btn-secondary-l {
  background-color: var(--bg-secondary);
  color: var(--fg-primary);
}
.btn-secondary-l.tap {
  background-color: var(--bg-secondary-tap);
}

.btn-secondary-m {
  background-color: var(--bg-secondary);
  color: var(--fg-primary);
  height: 36px;
  font-size: var(--font-body2);
  border-radius: 10px;
}
.btn-secondary-m.tap {
  background-color: var(--bg-secondary-tap);
}

.full-header {
  background-color: var(--bg-primary);
  padding: var(--space) calc(var(--space) * 1.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.25s ease;
  box-shadow: var(--dropShadow);
}
.full-header.hide {
  opacity: 0;
  transform: translateY(-100%);
  display: none;
}
.full-header .header-logo {
  height: 20px;
  display: block;
}
.full-header .btn-header {
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.full-header .btn-header svg {
  fill: var(--fg-primary);
}

.sub-header {
  background-color: var(--bg-primary);
  padding: var(--space) calc(var(--space) * 1.5);
  transition: all 0.25s ease;
  box-shadow: var(--dropShadow);
}
.sub-header.hide {
  opacity: 0;
  transform: translateY(-100%);
  display: none;
}
.sub-header .header-logo {
  height: 16px;
  margin: auto;
  display: block;
}
.sub-header .btn-header {
  width: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sub-header .btn-header svg {
  fill: var(--fg-primary);
}
.sub-header .header-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(var(--space) * 1.5);
}

.navbar {
  display: flex;
  background-color: var(--bg-primary);
  transition: all 0.25s ease;
  z-index: 2;
  box-shadow: var(--dropShadow);
}
.navbar.hide {
  opacity: 0;
  transform: translateY(100%);
  display: none;
}
.navbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-basis: 0;
  flex-grow: 1;
  font-size: var(--font-caption2);
  font-weight: bold;
  height: 64px;
  color: var(--fg-tertiary);
}
.navbar a svg {
  margin-bottom: calc(var(--space) / 2);
}
.navbar a.active {
  color: var(--fg-primary);
}
.navbar a.tap {
  background-color: var(--bg-primary-tap);
}

.dates {
  display: flex;
  align-items: center;
  overflow-x: auto;
  gap: calc(var(--space) / 3);
  padding: var(--space);
  position: sticky;
  top: 0;
  background-color: var(--bg-primary);
  z-index: 2;
  box-shadow: var(--dropShadow);
}
.dates .date {
  width: 78px;
  height: 58px;
  background-color: var(--bg-secondary);
  color: var(--fg-primary);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: calc(var(--space) / 6);
  text-transform: capitalize;
}
.dates .date.tap {
  background-color: var(--bg-secondary-tap);
}
.dates .date.active {
  background-color: var(--fg-primary);
  color: var(--bg-primary);
}
.dates .date.active .weekday {
  color: var(--fg-disabled);
}
.dates .date .weekday {
  font-size: var(--font-caption2);
  font-weight: 650;
  color: var(--fg-secondary);
}
.dates .date .day {
  font-size: var(--font-subtitle1);
  font-weight: bold;
}
.dates .date .month {
  font-size: var(--font-caption2);
  font-weight: 650;
}
.dates .btn-date {
  font-size: 24px;
  margin: 0 var(--space);
  filter: grayscale(1);
}

.games .card:not(:last-child) {
  margin-bottom: calc(var(--space) * 1.5);
}
.games .card-item {
  padding: calc(var(--space) * 1.5);
  justify-content: center;
}
.games .card-item .left,
.games .card-item .right {
  width: 20px;
}
.games .card-item .team-name {
  color: var(--fg-primary);
  font-size: var(--font-body1);
  font-weight: 500;
  flex-grow: 1;
  flex-basis: 0;
  hyphens: auto;
  -webkit-hyphens: auto;
  word-break: break-word;
  word-wrap: break-word;
}
.games .card-item .home-team {
  text-align: right;
}
.games .card-item .time {
  font-size: var(--font-body2);
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
}
.games .card-item .total-score {
  font-size: var(--font-caption1);
  font-weight: 500;
  margin-top: calc(var(--space) / 6);
}
.games .card-item .tv img {
  margin-top: calc(var(--space) / 2);
  max-height: 12px;
  max-width: 30px;
}
.games .card-item .mid {
  text-align: center;
  width: 40px;
}
.games .card-item .mid .score {
  font-weight: bold;
  color: var(--fg-primary);
  white-space: nowrap;
}
.games .card-item .mid .penalties {
  font-size: var(--font-caption2);
  color: var(--fg-secondary);
  font-weight: 500;
  margin-top: calc(var(--space) / 6);
  white-space: nowrap;
}
.games .card-item .btn-follow {
  margin-left: auto;
}
.games .card-item.playing .left {
  color: var(--red-base);
  font-size: var(--font-caption1);
  font-weight: 500;
}
.games .card-item.playing .left span {
  animation: pulse 1s step-start 0s infinite;
}

#date {
  display: none;
}

@keyframes pulse {
  50% {
    opacity: 0;
  }
}
.card-competitions .card-item .name {
  font-size: var(--font-body1);
  font-weight: 500;
  color: var(--fg-primary);
}
.card-competitions .card-item .btn-follow {
  position: absolute;
  right: var(--space);
  top: 50%;
  margin-top: -10px;
}

.card-table {
  overflow: hidden;
}
.card-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-body2);
}
.card-table tr:not(:last-child) {
  border-bottom: 1px solid var(--bg-primary);
}
.card-table tr.highlight {
  background-color: var(--bg-tertiary);
}
.card-table tr.tap {
  background-color: var(--bg-secondary-tap);
}
.card-table th, .card-table td {
  padding: var(--space);
}
.card-table th {
  color: var(--fg-secondary);
  font-weight: 500;
}
.card-table td {
  color: var(--fg-primary);
  font-weight: 500;
  position: relative;
}
.card-table .group-name {
  text-align: left;
}
.card-table .show-more {
  width: 100%;
  color: var(--fg-tertiary);
}
.card-table [class^=zone-] {
  position: absolute;
  left: 0;
  width: 4px;
  height: 100%;
  top: 0;
}
.card-table .zone-CL,
.card-table .zone-NR,
.card-table .zone-promo,
.card-table .zone-Lbt,
.card-table .zone-QFs,
.card-table .zone-8thF {
  background-color: var(--blue-base);
}
.card-table .zone-CL.qf,
.card-table .zone-NR.qf,
.card-table .zone-promo.qf,
.card-table .zone-Lbt.qf,
.card-table .zone-QFs.qf,
.card-table .zone-8thF.qf {
  background-color: var(--blue-dark);
}
.card-table .zone-EuroL,
.card-table .zone-EL,
.card-table .zone-P,
.card-table .zone-p,
.card-table .zone-Suda,
.card-table .zone-pos {
  background-color: var(--yellow-base);
}
.card-table .zone-releg {
  background-color: var(--red-base);
}
.card-table .zone-r {
  background-color: var(--orange-base);
}
.card-table .zone-UECL,
.card-table .zone-playoffs {
  background-color: var(--green-base);
}
.card-table .zone-promotion {
  background-color: var(--green-dark);
}

.playoffs {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.playoffs .round {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
}
.playoffs .round .game-wrapper {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  position: relative;
}
.playoffs .round .game {
  background-color: var(--bg-secondary);
  padding: var(--space);
  border-radius: var(--space);
  display: flex;
  align-items: center;
  gap: var(--space);
  position: relative;
  flex-direction: column;
}
.playoffs .round .game .teams {
  display: flex;
  gap: var(--space);
}
.playoffs .round .game .teams .team {
  display: flex;
  gap: calc(var(--space) / 2);
  flex-direction: column;
  align-items: center;
}
.playoffs .round .game .score {
  font-weight: bold;
  color: var(--fg-primary);
}

.playoffs .round-top:not(:first-child) .game:before {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  background-color: var(--bg-secondary);
  bottom: 100%;
  height: 12px;
}
.playoffs .round-top .game-wrapper:not(.no-lines):not(:only-child):after {
  content: "";
  position: absolute;
  top: calc(100% + 10px);
  width: 50%;
  height: 2px;
  background-color: var(--bg-secondary);
}
.playoffs .round-top .game-wrapper:not(.no-lines):nth-child(odd):after {
  left: 50%;
}
.playoffs .round-top .game-wrapper:not(.no-lines):nth-child(even):after {
  right: calc(50% - 2px);
}
.playoffs .round-top .game:after {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  background-color: var(--bg-secondary);
  top: 100%;
  height: 12px;
}

.playoffs .round-bottom:not(:last-child) .game:after {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  background-color: var(--bg-secondary);
  top: 100%;
  height: 12px;
}
.playoffs .round-bottom .game-wrapper:not(.no-lines):not(:only-child):after {
  content: "";
  position: absolute;
  bottom: calc(100% + 10px);
  width: 50%;
  height: 2px;
  background-color: var(--bg-secondary);
}
.playoffs .round-bottom .game-wrapper:not(.no-lines):nth-child(odd):after {
  left: 50%;
}
.playoffs .round-bottom .game-wrapper:not(.no-lines):nth-child(even):after {
  right: calc(50% - 2px);
}
.playoffs .round-bottom .game:before {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  background-color: var(--bg-secondary);
  bottom: 100%;
  height: 12px;
}

.game .top {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: calc(var(--space) * 1.5);
}
.game .top .team {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-basis: 0;
  flex-grow: 1;
}
.game .top .team .name {
  font-weight: 500;
  font-size: var(--font-body2);
  color: var(--fg-primary);
  margin-top: var(--space);
  text-align: center;
}
.game .top .mid {
  width: 160px;
  text-align: center;
}
.game .top .mid .total-score {
  font-size: var(--font-body1);
  font-weight: 500;
  margin-bottom: calc(var(--space) / 2);
}
.game .top .mid .date .time {
  font-weight: 500;
  color: var(--fg-primary);
  font-size: var(--font-h2);
  margin-bottom: calc(var(--space) / 2);
}
.game .top .mid .date .day {
  font-size: var(--font-body2);
}
.game .top .mid .date .day:first-letter {
  text-transform: uppercase;
}
.game .top .mid .score {
  font-size: var(--font-h2);
  font-weight: 500;
}
.game .top .mid .score .highlight {
  color: var(--fg-primary);
}
.game .top .mid .penalties {
  font-size: var(--font-body2);
  font-weight: 500;
  margin-top: calc(var(--space) / 2);
}
.game .top .mid .status {
  font-size: var(--font-body2);
  margin-top: var(--space);
}
.game .top .mid .status.playing {
  color: var(--red-base);
  font-weight: 500;
}
.game .top .mid .status.playing span {
  animation: pulse 1s step-start 0s infinite;
}

.game-info {
  padding: calc(var(--space) * 1.5);
  color: var(--fg-primary);
  font-weight: 500;
  font-size: var(--font-body2);
  margin-bottom: calc(var(--space) * 2);
}
.game-info .item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space);
}
.game-info .item:not(:last-child) {
  margin-bottom: var(--space);
}

.card-game-last-games .card-item {
  justify-content: center;
}
.card-game-last-games .score {
  font-weight: 650;
  font-size: var(--font-body2);
  color: var(--bg-primary);
  border-radius: calc(var(--space) / 3);
  height: 20px;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-game-last-games .score.won {
  background-color: var(--green-base);
}
.card-game-last-games .score.draw {
  background-color: var(--fg-secondary);
}
.card-game-last-games .score.lost {
  background-color: var(--red-base);
}

.best-players .best-player {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.best-players .best-player .name {
  font-size: var(--font-caption1);
  font-weight: 500;
  color: var(--fg-secondary);
}
.best-players .best-player .surname {
  font-size: var(--font-subtitle1);
  font-weight: 650;
  color: var(--fg-primary);
}
.best-players .best-player .rating {
  font-size: var(--font-h3);
  font-weight: 750;
  color: var(--fg-primary);
  margin-top: calc(var(--space) / 2);
}
.best-players .best-player .player-pic {
  background-color: var(--bg-primary);
  width: 54px;
  height: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: var(--space);
}
.best-players .best-player img {
  width: 52px;
  height: 52px;
}
.best-players .card-item:not(.best-player) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.best-players .card-item:not(.best-player) .name {
  font-size: var(--font-body2);
  font-weight: 500;
  color: var(--fg-primary);
}
.best-players .card-item:not(.best-player) .rating {
  font-size: var(--font-subtitle1);
  font-weight: 650;
  color: var(--fg-primary);
  white-space: nowrap;
}

.lineups {
  background-color: var(--green-shadow-primary);
  border-radius: var(--space);
  overflow: hidden;
  margin-bottom: calc(var(--space) * 2);
}
.lineups .team {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--green-shadow-tertiary);
  gap: var(--space);
  padding: calc(var(--space) * 1.5);
}
.lineups .team .name {
  font-size: var(--font-body1);
  font-weight: 500;
  color: var(--fg-primary);
}
.lineups .lineup {
  position: relative;
}
.lineups .lineup .bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0.2;
  width: 250px;
}
.lineups .lineup .bg.bg-bottom {
  top: auto;
  bottom: 0;
  transform: rotate(180deg);
}
.lineups .lineup .lines {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: var(--space);
  padding: var(--space);
  position: relative;
  z-index: 2;
  min-height: 320px;
}
.lineups .lineup .line {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
}
.lineups .middle {
  height: 2px;
  background-color: var(--fg-primary);
  opacity: 0.2;
  position: relative;
}
.lineups .middle:after {
  content: "";
  border-radius: 50%;
  border: 2px solid var(--fg-primary);
  position: absolute;
  width: 120px;
  height: 120px;
  left: 50%;
  top: 50%;
  margin-left: -60px;
  margin-top: -60px;
  box-sizing: border-box;
}

.lineups .player,
.bench .player {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.lineups .player.tap .name,
.bench .player.tap .name {
  background-color: var(--green-shadow-tertiary);
}
.lineups .player img,
.bench .player img {
  width: 30px;
  height: 30px;
}
.lineups .player .name,
.bench .player .name {
  background-color: var(--green-shadow-quaternary);
  width: 64px;
  border-radius: calc(var(--space) / 2);
  font-size: var(--font-caption2);
  font-weight: 500;
  color: var(--fg-primary);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: calc(var(--space) / 4) calc(var(--space) / 2);
  text-align: center;
}
.lineups .player .rating,
.bench .player .rating {
  background-color: var(--green-shadow-tertiary);
  width: 64px;
  border-radius: 0 0 calc(var(--space) / 2) calc(var(--space) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space) / 6);
  height: 18px;
}
.lineups .player:has(.rating) .name,
.bench .player:has(.rating) .name {
  border-radius: calc(var(--space) / 2) calc(var(--space) / 2) 0 0;
}
.lineups .player .events,
.bench .player .events {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.lineups .player .events .event,
.bench .player .events .event {
  margin-bottom: calc(var(--space) / 6);
}
.lineups .player .events img,
.bench .player .events img {
  width: 14px;
  height: 14px;
  display: block;
}

.statuses {
  overflow: hidden;
}
.statuses .player .name {
  font-size: var(--font-body2);
  font-weight: 500;
  color: var(--fg-primary);
  margin-bottom: calc(var(--space) / 2);
}
.statuses .player .category {
  font-size: var(--font-caption1);
  font-weight: 500;
}

.statuses .team,
.bench .team {
  background-color: var(--bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.statuses .team .name,
.bench .team .name {
  font-size: var(--font-body1);
  font-weight: 500;
  color: var(--fg-primary);
}

.game-stats {
  padding: var(--space);
  color: var(--fg-primary);
  font-size: var(--font-body1);
  font-weight: 650;
  text-align: center;
  margin-bottom: calc(var(--space) * 2);
}
.game-stats table {
  border-collapse: collapse;
}
.game-stats td {
  padding: calc(var(--space) / 2);
}
.game-stats .wide {
  width: 100%;
  font-size: var(--font-body2);
  font-weight: 500;
}
.game-stats .possession {
  display: flex;
  align-items: center;
  border-radius: var(--space);
  position: relative;
  overflow: hidden;
  gap: calc(var(--space) / 4);
}
.game-stats .possession .home-count,
.game-stats .possession .away-count {
  position: absolute;
}
.game-stats .possession .home-count {
  color: var(--bg-primary);
  left: var(--space);
}
.game-stats .possession .away-count {
  right: var(--space);
}
.game-stats .possession .home-bar,
.game-stats .possession .away-bar {
  height: 30px;
}
.game-stats .possession .home-bar {
  background-color: var(--yellow-base);
}
.game-stats .possession .away-bar {
  background-color: var(--red-base);
}

.game-events {
  padding: calc(var(--space) * 1.5);
}
.game-events .event {
  display: flex;
  align-items: center;
  gap: var(--space);
  font-size: var(--font-body1);
  font-weight: 500;
  color: var(--fg-primary);
}
.game-events .event:not(:last-child) {
  margin-bottom: calc(var(--space) * 1.5);
}
.game-events .center {
  text-align: center;
  justify-content: center;
}
.game-events .away {
  flex-direction: row-reverse;
  text-align: right;
}
.game-events .minute {
  width: 22px;
  text-align: center;
}
.game-events .icon,
.game-events .name {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) / 4);
}
.game-events img {
  width: 16px;
  height: 16px;
}
.game-events .sub_in .name {
  color: var(--green-base);
}
.game-events .sub_in .name span {
  color: var(--red-base);
}
.game-events small {
  color: var(--fg-secondary);
  font-size: var(--font-caption2);
}
.game-events .period {
  font-size: var(--font-body1);
  font-weight: 650;
  color: var(--fg-tertiary);
  text-transform: uppercase;
  position: relative;
}
.game-events .period .text {
  padding: 0 var(--space);
  background-color: var(--bg-secondary);
  position: relative;
  z-index: 2;
}
.game-events .period:after {
  content: "";
  border-bottom: 2px solid var(--fg-disabled);
  width: 100%;
  position: absolute;
}
.game-events .injuryTime {
  font-size: var(--font-caption1);
  font-weight: 500;
  color: var(--fg-secondary);
}

.bench {
  overflow: hidden;
}
.bench .team {
  background-color: var(--green-shadow-tertiary);
  border-bottom: 0;
}
.bench .players {
  padding: var(--space);
  background-color: var(--green-shadow-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  justify-content: center;
}

.scorers {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space);
  font-size: var(--font-body2);
  font-weight: 500;
  padding: 0 calc(var(--space) * 1.5) calc(var(--space) * 1.5) calc(var(--space) * 1.5);
}
.scorers .home,
.scorers .away {
  flex-basis: 0;
  flex-grow: 1;
}
.scorers .home {
  text-align: right;
}
.scorers img {
  width: 16px;
  height: 16px;
}
.scorers div:not(:last-child) {
  margin-bottom: calc(var(--space) / 4);
}

.card-commentary {
  padding: calc(var(--space) * 1.5);
  color: var(--fg-primary);
  font-size: var(--font-body2);
}
.card-commentary .time:not(:empty) {
  font-weight: 650;
  margin-bottom: var(--space);
}

.card-team-last-games {
  padding: calc(var(--space) * 1.5);
  display: flex;
  gap: var(--space);
  justify-content: space-between;
}
.card-team-last-games .game {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space) / 2);
}
.card-team-last-games .game .gameweek {
  font-size: var(--font-body2);
  font-weight: 500;
}
.card-team-last-games .game .score {
  font-weight: 650;
  font-size: var(--font-body2);
  color: var(--bg-primary);
  border-radius: calc(var(--space) / 3);
  height: 20px;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-team-last-games .game .score.won {
  background-color: var(--green-base);
}
.card-team-last-games .game .score.draw {
  background-color: var(--fg-secondary);
}
.card-team-last-games .game .score.lost {
  background-color: var(--red-base);
}

.team-next-game {
  display: flex;
  align-items: flex-start;
  gap: var(--space);
}
.team-next-game .card {
  padding: var(--space);
  flex-grow: 1;
  flex-basis: 0;
  margin-bottom: calc(var(--space) * 2);
}
.team-next-game .game {
  display: flex;
  gap: var(--space);
  align-items: center;
}
.team-next-game .teams {
  display: flex;
  gap: calc(var(--space) / 4);
  align-items: center;
}
.team-next-game .teams span {
  font-size: var(--font-caption2);
  font-weight: 500;
  color: var(--fg-tertiary);
}
.team-next-game .date {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) / 3);
}
.team-next-game .date .day {
  font-size: var(--font-body1);
  font-weight: 650;
  color: var(--fg-primary);
  white-space: nowrap;
}
.team-next-game .date .time {
  font-size: var(--font-caption1);
  font-weight: 500;
}
.team-next-game .wins {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) / 3);
}
.team-next-game .wins .count {
  font-size: var(--font-body1);
  font-weight: 650;
  color: var(--fg-primary);
}
.team-next-game .wins .side {
  font-size: var(--font-caption1);
  font-weight: 500;
}

.card-news {
  display: block;
  overflow: hidden;
}
.card-news img {
  width: 100%;
}
.card-news .meta {
  padding: calc(var(--space) * 1.5);
}
.card-news .title {
  font-size: var(--font-subtitle1);
  font-weight: 500;
  margin-bottom: var(--space);
  color: var(--fg-primary);
}
.card-news .date {
  font-size: var(--font-body2);
  font-weight: 500;
}

.card-team-best-players .position {
  font-size: var(--font-body2);
  font-weight: 500;
}
.card-team-best-players .photo {
  height: 30px;
  width: 28px;
  background-color: var(--bg-primary);
  border-radius: calc(var(--space) / 1.5);
  display: flex;
  align-items: flex-end;
}
.card-team-best-players .photo img {
  width: 28px;
  height: 28px;
}
.card-team-best-players .name {
  font-size: var(--body2);
  font-weight: 500;
  color: var(--fg-primary);
}
.card-team-best-players .rating {
  margin-left: auto;
  font-size: var(--font-body1);
  font-weight: 500;
  color: var(--fg-primary);
  display: flex;
  align-items: center;
  gap: calc(var(--space) / 2);
}
.card-team-best-players .big .photo {
  height: 60px;
  width: 52px;
}
.card-team-best-players .big .photo img {
  width: 52px;
  height: 52px;
}
.card-team-best-players .big .name {
  font-size: var(--body1);
}
.card-team-best-players .big .rating {
  font-size: var(--font-subtitle1);
  font-weight: 650;
}

.card-player-status {
  padding: var(--space);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space);
}
.card-player-status .icon img {
  width: 18px;
  height: 18px;
}
.card-player-status .description {
  font-size: var(--font-body1);
  font-weight: 500;
  color: var(--fg-primary);
}
.card-player-status .duration {
  font-size: var(--font-caption1);
  font-weight: 500;
  margin-top: calc(var(--space) / 2);
}

.personal-data {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space);
  margin-bottom: calc(var(--space) * 2);
}
.personal-data .item {
  border-radius: var(--space);
  padding: var(--space);
  background-color: var(--bg-secondary);
  flex-grow: 1;
  flex-basis: 0;
}
.personal-data .key {
  font-size: var(--font-caption1);
  font-weight: 500;
  margin-top: calc(var(--space) / 2);
}
.personal-data .value {
  font-size: var(--font-body1);
  font-weight: 650;
  color: var(--fg-primary);
}

.player-performance {
  display: flex;
  gap: calc(var(--space) / 2);
  align-items: flex-end;
  overflow-x: auto;
  direction: rtl;
  text-align: center;
  margin-bottom: calc(var(--space) * 2);
}
.player-performance .game {
  width: 32px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) / 2);
}
.player-performance .bar {
  border-radius: calc(var(--space) / 2) calc(var(--space) / 2) 0 0;
  padding: calc(var(--space) / 2) calc(var(--space) / 4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.player-performance .bar.bar-star {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.player-performance .rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space) / 6);
}
.player-performance .events {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space) / 6);
}
.player-performance .events img {
  width: 12px;
  height: 12px;
}
.player-performance .events .sub_in,
.player-performance .events .sub_out {
  transform: rotate(-90deg);
}
.player-performance .gameweek {
  font-size: var(--font-body2);
  font-weight: 500;
}

.card-player-games .game {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
}
.card-player-games .date {
  font-size: var(--font-caption1);
  font-weight: 500;
  width: 70px;
  text-align: center;
}
.card-player-games .teams {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) / 2);
  font-size: var(--font-body2);
  font-weight: 500;
  color: var(--fg-primary);
  margin-right: auto;
}
.card-player-games .teams .team {
  display: flex;
  align-items: center;
  gap: calc(var(--space) / 2);
}
.card-player-games .score {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) / 2);
  align-items: center;
  justify-content: center;
  font-size: var(--font-body2);
  font-weight: 650;
  color: var(--bg-primary);
  border-radius: calc(var(--space) / 3);
  width: 22px;
  height: 44px;
}
.card-player-games .score.won {
  background-color: var(--green-base);
}
.card-player-games .score.draw {
  background-color: var(--fg-secondary);
}
.card-player-games .score.lost {
  background-color: var(--red-base);
}
.card-player-games .rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space) / 6);
  width: 50px;
}

.search {
  background-color: var(--bg-secondary);
  border-radius: var(--space);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space);
  margin-bottom: calc(var(--space) * 2);
}
.search svg {
  stroke: var(--fg-secondary);
  margin-left: var(--space);
}
.search input {
  background-color: transparent;
  appearance: none;
  border: 0;
  font-size: var(--font-body1);
  outline: none;
  font-family: inherit;
  color: var(--fg-primary);
  width: 100%;
  padding: var(--space);
  user-select: initial;
}

.search-items .card-item .img {
  display: block;
}
.search-items .card-item .img-player {
  height: 20px;
  width: 20px;
  background-color: var(--bg-primary);
  border-radius: calc(var(--space) / 3);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.search-items .card-item .img-player img {
  width: 80%;
  height: 80%;
}
.search-items .card-item .name {
  font-size: var(--font-body1);
  font-weight: 500;
  color: var(--fg-primary);
}
.search-items .card-item .meta {
  margin-top: calc(var(--space) / 6);
  display: flex;
  align-items: center;
  gap: var(--space);
  font-size: var(--font-caption1);
  color: var(--fg-tertiary);
}
.search-items .card-item .btn-follow {
  margin-left: auto;
}

.login svg {
  margin: 0 auto;
  display: block;
}
.login p {
  font-size: var(--font-body1);
  font-weight: 500;
  color: var(--fg-primary);
  margin: calc(var(--space) * 3) 0;
}
.login .btn-login {
  width: 100%;
}

.user svg {
  display: block;
}
.user .card-item {
  color: var(--fg-primary);
  font-size: var(--font-body1);
}
.user .card-item .key {
  font-weight: 500;
}
.user .card-item .value {
  font-weight: 650;
  margin-left: auto;
}
.user .card-item .disabled {
  color: var(--fg-tertiary);
}
.user .btn-logout {
  width: 100%;
}

#select-language {
  appearance: none;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  border: 0;
}
#select-language:focus-visible {
  border: 0;
  outline: none;
}

.ad-bottom {
  width: 100%;
  text-align: center;
  overflow: hidden;
  max-height: 100px;
}

.ad-roba {
  text-align: center;
  margin: var(--space) auto;
  overflow: hidden;
  max-height: 300px;
  max-width: 300px;
}