@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500&display=swap');

@font-face {
  font-family: "Mona Sans";
  src: url("https://assets.codepen.io/64/Mona-Sans.woff2")
      format("woff2 supports variations"),
    url("https://assets.codepen.io/64/Mona-Sans.woff2")
      format("woff2-variations");
  font-weight: 100 1000;
}

:root {
  --icon-scale: 0;
  --icon-rotation: 0;
  --icon-opacity: 0;

  --color-pale-pink: hsl(272 16% 56.99%);
  --color-dark-purple: hsl(269.35 100% 21%);
  --color-light-purple: hsl(269.99 100% 40%);
  --color-bubblegum-pink: hsl(300deg 97% 68%);
}

@supports (color: color(display-p3 0 0 0)) {
  :root {
    --color-pale-pink: color(display-p3 0.56 0.5 0.63);
    --color-dark-purple: color(display-p3 0.19 0.01 0.41);
    --color-light-purple: color(display-p3 0.37 0.01 0.78);
    --color-bubblegum-pink: color(display-p3 0.94 0.36 1);
  }
}

*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  outline: calc(var(--debug) * 1px) dotted
    hsl(calc(var(--debug) * 10 * 1deg) 60% 60%);
}

html,
body,
main {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: hsl(271deg 100% 96%);
  font-family: "Mona Sans", sans-serif;
}
svg {
    height: inherit;
    border-width: 0 !important;
    border-style: none !important;
}
.fixed-bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f7fafc;
  border-top: 1px solid #e2e8f0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.fixed-bottom-tabs a {
  display: block;
  padding: 0.5rem 1rem;
  text-sm;
  font-medium;
  color: #4a5568;
  text-decoration: none;
  border-radius: 0.375rem;
}

.fixed-bottom-tabs a:hover {
  background-color: #edf2f7;
}
.icon-baskground{
  background-color: rgba(238, 238, 238, 0.2);
  border-radius: 37px;
  width: 37px;
  height: 37px;
}

.game-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    transition: all 0.5s ease; /* Definiujemy animację dla wszystkich właściwości, 0.5s, z łagodnym przejściem */
}

.game-card:hover {
    transform: scale(1.02); /* Skalowanie tylko przy najechaniu */
    cursor: pointer;
}

.game-card:hover {
    cursor: pointer
}

.game-card:before {
    content: "";
    display: block;
    position: relative;
    width: 100%;
    padding-top: 59%;
    border-radius: 1.0666666667rem;
}

@media(max-width: 768px) {
    .game-card:before {
        padding-top:75%
    }
}

@media(max-width: 768px) {
    .game-card {
        border-radius:1.0666666667rem
    }
}

@media(min-width: 769px) {
    .game-card {
        border-radius:1.6rem
    }
}

@media(min-width: 1025px) {
    .game-card {
        border-radius:.8888888889rem
    }
}

.game-card__video-wr {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1
}

@media(max-width: 768px) {
    .game-card__video-wr {
        border-radius:1.0666666667rem
    }
}

@media(min-width: 769px) {
    .game-card__video-wr {
        border-radius:1.6rem
    }
}

@media(min-width: 1025px) {
    .game-card__video-wr {
        border-radius:.8888888889rem
    }
}

.game-card__video {
    min-width: 100%;
    width: 100%;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate3d(-50%,-50%,0)
}

.game-card__color-bg {
    position: absolute;
    top: -2%;
    left: -2%;
    width: 104%;
    height: 104%;
    background: linear-gradient(180deg,rgba(0,98,74,0) 50%,rgba(0,8,83,.9) 70%),linear-gradient(180deg,rgb(var(--game-card-bg)),rgba(0,98,74,0) 15%),linear-gradient(180deg,rgba(0,98,74,0) 60%,rgba(var(--game-card-bg),.6) 70%,rgba(var(--game-card-bg),.9) 90%);
    background-blend-mode: saturation;
    border-radius: 1.0666666667rem;
}

@media(max-width: 768px) {
    .game-card__color-bg {
        border-radius:1.0666666667rem
    }
}

@media(min-width: 769px) {
    .game-card__color-bg {
        border-radius:1.6rem
    }
}

@media(min-width: 1025px) {
    .game-card__color-bg {
        border-radius:.8888888889rem
    }
}

.game-card__button {
    display: flex;
    align-items: center;
    position: absolute;
    transition: background .2s ease-in-out;
    width: 100%;
    box-sizing: border-box;
}

.game-card .game-card__button {
    background-image: linear-gradient(139.13deg, rgba(45, 44, 64, .8) 13.23%, rgba(38, 37, 54, .8) 81.86%);
    border: 1px solid rgb(55 56 86 / var(--tw-border-opacity, 1));
}

@media(max-width: 768px) {
    .game-card__button {
        width:calc(100% - 1.06667rem);
        bottom: .5333333333rem;
        left: .5333333333rem;
        padding: .2666666667rem;
        border-radius: .5333333333rem
    }

    .game-card.hover .game-card__button {
        background: #0b1134
    }
}

@media(min-width: 769px) {
    .game-card__button {
        width:calc(100% - 1.6rem);
        bottom: .8rem;
        left: .8rem;
        padding: .4rem;
        border-radius: .8rem
    }
}

@media(min-width: 1025px) {
    .game-card__button {
        width:calc(100% - .88889rem);
        bottom: .4444444444rem;
        left: .4444444444rem;
        padding: .2222222222rem;
        border-radius: .4444444444rem
    }
}

.game-card__img-wr {
    flex-shrink: 0;
    overflow: hidden
}

.game-card__video-wr .game-card__video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media(max-width: 768px) {
    .game-card__img-wr {
        border-radius:.5333333333rem;
        margin-right: .8rem
    }
}

@media(min-width: 769px) {
    .game-card__img-wr {
        border-radius:.8rem;
        margin-right: 1.2rem
    }
}

@media(min-width: 1025px) {
    .game-card__img-wr {
        border-radius:.4444444444rem;
        margin-right: .6666666667rem
    }
}

@media(max-width: 768px) {
    .game-card__img {
        width:5rem;
        height: 4.7rem
    }
}

@media(min-width: 769px) {
    .game-card__img {
        width:7.5rem;
        height: 5.8rem
    }
}

@media(min-width: 1025px) {
    .game-card__img {
        width:4.1666666667rem;
        height: 3.6666666667rem
    }
}

.game-card__about {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1; /* Zajmuje dostępną przestrzeń, ale nie więcej */
    min-width: 0; /* Kluczowe: pozwala na ucinanie w flexboxie */
    box-sizing: border-box;
}
.game-card__title {
    font-weight: 500;
    overflow: hidden; /* Ukrywa nadmiar tekstu */
    white-space: nowrap; /* Zapobiega zawijaniu */
    text-overflow: ellipsis; /* Dodaje trzy kropki */
    transition: color .2s ease-in-out;
}

.game-card .game-card__title {
    color: #90a7ff;
}

@media (max-width: 768px) {
    .game-card__title {
        font-size: .9333333333rem;
        line-height: 1.3333333333rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .game-card.hover .game-card__title {
        color: #90a7ff;
    }
}

@media (min-width: 769px) {
    .game-card__title {
        font-size: 1.6rem;
        line-height: 2rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media (min-width: 1025px) {
    .game-card__title {
        font-size: .8888888889rem;
        line-height: 1.1111111111rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

.game-card__provider {
    color: hsla(0, 0%, 100%, .8);
    font-weight: 400;
    overflow: hidden; /* Ukrywa nadmiar tekstu */
    white-space: nowrap; /* Zapobiega zawijaniu */
    text-overflow: ellipsis; /* Dodaje trzy kropki */
}

@media (max-width: 768px) {
    .game-card__provider {
        font-size: .8rem;
        line-height: 1.3333333333rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media (min-width: 769px) {
    .game-card__provider {
        font-size: 1.4rem;
        line-height: 2rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media (min-width: 1025px) {
    .game-card__provider {
        font-size: .7777777778rem;
        line-height: 1.1111111111rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

.game-card__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Nie pozwala się kurczyć, chroni przestrzeń */
    opacity: 0;
    visibility: hidden;
    transition: all .2s ease-in-out;
}

.game-card .game-card__nav {
    opacity: 1;
    visibility: unset;
    margin: 0 1.2rem;
}

.text-coins{
    font-size: 13px;
    font-weight: 900;
    font-family: 'Mona Sans';
}
@media (min-width: 769px) {
    .text-coins{
    font-size: 18px;
    font-weight: 900;
    font-family: 'Mona Sans';
}
}
@media (min-width: 1025px) {
    .text-coins{
    font-size: 13px;
    font-weight: 900;
    font-family: 'Mona Sans';
}
}
.game-card__nav-coins{
    color: rgb(237, 184, 24);
}
.game-card__nav-os{
    color: #e5e7eb;
    font-size: 11px;
    display: inline-flex;
}
@media (min-width: 769px) {
    .game-card__nav-os{
    color: #e5e7eb;
    font-size: 17px;
}
@media (min-width: 1025px) {
    .game-card__nav-os{
    color: #e5e7eb;
    font-size: 11px;
}
}
.game-card__nav-rate{
    font-size: .5rem;
}
@media (min-width: 769px) {
    .game-card__nav-rate{
    font-size: 1rem;
}
}
@media (min-width: 1025px) {
    .game-card__nav-rate{
    font-size: 1rem;
}
}
}
.game-card .game-card__nav {
    opacity: 1;
    visibility: unset;
    margin: 0 1.2rem;
}

@media(max-width: 768px) {
    .game-card__nav {
        width:1.3333333333rem;
        height: 1.3333333333rem;
        margin: 0 .8rem
    }

    .game-card .game-card__nav {
        opacity: 1;
        visibility: unset;
        margin: 0 1.2rem;
    }
}

@media(min-width: 769px) {
    .game-card__nav {
        width:2rem;
        height: 2rem;
        margin: 0 1.2rem
    }
}

@media(min-width: 1025px) {
    .game-card__nav {
        width:1.1111111111rem;
        margin: 0 .6666666667rem
    }
}
@media(max-width: 768px) {
    .swiper-slide {
        width:100%;
        max-height: 12.4666666667rem
    }
}

@media(min-width: 769px) {
    .swiper-slide {
        width:35rem;
    }
}

@media(min-width: 1025px) {
    .swiper-slide {
        width:35rem;
        max-height: 13.4444444444rem;
        margin: 0 .8888888889rem 0 0
    }

    .swiper-slide:last-child {
        margin: 0
    }
}
.offers {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* Domyślnie 1 kolumna */
    gap: 1.5rem; /* Odstęp między ofertami */
    justify-content: center; /* Wyśrodkowanie siatki */
    max-width: 1200px; /* Maksymalna szerokość kontenera */
    margin-left: auto; /* Wyśrodkowanie w poziomie */
    margin-right: auto;
    width: 100%; /* Zapewnia pełne wykorzystanie dostępnej przestrzeni */
}

.game-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%; /* Zapobiega przekraczaniu szerokości */
    box-sizing: border-box; /* Uwzględnia padding i border */
    margin: 0; /* Usuwa wszelkie marginesy, które mogą zakłócać układ */
}

/* Dla ekranów powyżej 1025px - 2 kolumny */
@media (min-width: 1025px) {
    .offers {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 kolumny */
    }
    .game-card {
        border-radius: 0.8888888889rem;
    }
}

/* Dla ekranów poniżej 1024px - 1 kolumna */
@media (max-width: 1024px) {
    .offers {
        grid-template-columns: repeat(1, minmax(0, 1fr)); /* 1 kolumna */
    }
}

/* Dostosowanie dla mniejszych ekranów */
@media (max-width: 768px) {
    .offers {
        gap: 1rem; /* Mniejszy odstęp dla mniejszych ekranów */
    }
    .game-card {
        border-radius: 1.0666666667rem;
    }
}

/* Jeśli używasz Swiper.js, dostosuj style swiper-slide */
.swiper-slide {
    width: 100% !important; /* Nadpisz stałą szerokość */
    margin: 0 !important; /* Usuń marginesy, które mogą zakłócać grid */
}
@media (max-width: 768px) {
    .content-container:before {
        width: 24.333333rem;
        height: 27rem;
    }
}
.providers-filter__tabs {
    display: flex;
    align-items: center;
    background: rgba(51,61,108,.2);
    position: relative;
    z-index: 1
}

@media(max-width: 768px) {
    .providers-filter__tabs {
        margin-bottom:1.0666666667rem;
        border-radius: .5333333333rem;
    }
}

@media(min-width: 769px) {
    .providers-filter__tabs {
        margin-bottom:1.6rem;
        border-radius: .8rem;
    }
}

@media(min-width: 1025px) {
    .providers-filter__tabs {
        margin-bottom:.8888888889rem;
        border-radius: .4444444444rem;
        width: 900px;
        margin: auto;
    }
}

.providers-filter__tabs-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 0;
}

.no-touch .providers-filter__tabs-button {
    cursor: pointer;
}

.providers-filter__title-text {
    font-weight: 500;
    color: hsla(0,0%,100%,.5);
    white-space: nowrap;
    transition: all .2s ease-in-out;
}

.providers-filter__button--show-filter .providers-filter__title-text {
    overflow: hidden;
    width: 0;
}

@media(max-width: 768px) {
    .providers-filter__title-text {
        font-size:1.0666666667rem;
        line-height: 1.3333333333rem;
        border-radius: .5333333333rem;
        padding: .5333333333rem 1.0666666667rem;
    }

    .bottom-menu .providers-filter__title-text {
        font-size: .8rem;
        line-height: 1.0666666667rem;
        text-align: center;
    }
}

@media(min-width: 769px) {
    .providers-filter__title-text {
        font-size:1.6rem;
        line-height: 2rem;
        border-radius: .8rem;
        padding: .8rem 1.2rem;
    }
}

@media(min-width: 1025px) {
    .providers-filter__title-text {
        font-size:.8888888889rem;
        line-height: 1.1111111111rem;
        border-radius: .4444444444rem;
        padding: .4444444444rem .6666666667rem;
    }
}

.providers-filter__title-text--active {
    color: #fff;
    background-color: #333d6c;
}

.providers-filter__button {
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    align-content: space-between;
    border-radius: .4444444444rem;
    background: rgba(51,61,108,.2);
    cursor: pointer;
}
/* Styl dla popupu */
#offerPopup {
    transition: opacity 0.3s ease-in-out;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
}
#offerPopup::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}
#offerPopup.hidden {
    opacity: 0;
    pointer-events: none;
}
#offerPopup:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* Styl dla przycisku powrotu */
.popup-back {
    position: absolute;
    top: 0.5rem; /* Odstęp od góry */
    left: 0.5rem; /* Odstęp od lewej */
    display: flex;
    align-items: center;
    color: white; /* Kolor tekstu i ikony */
    font-size: 1rem; /* Rozmiar tekstu */
    font-weight: 500; /* Średnia waga czcionki */
    cursor: pointer; /* Kursor wskazujący */
    transition: color 0.2s ease-in-out; /* Płynna zmiana koloru przy najechaniu */
}

.popup-back:hover {
    color: #90a7ff; /* Kolor przy najechaniu, dopasowany do game-card__title */
}

.popup-back i {
    margin-right: 0.25rem; /* Odstęp między ikoną a tekstem */
    font-size: 1.2rem; /* Nieco większa ikona dla lepszej widoczności */
}

/* Animacja dla game-card__button w popupie */
.popup-game-card {
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    margin-bottom: 1rem; /* Odstęp od informacji poniżej */
    position: relative; /* Dla pozycjonowania absolutnego game-card__button */
}

@media (min-width: 1025px) {
    .popup-game-card {
        width: 50%; /* Szerokość 50% dla ekranów > 1025px */
        margin: 0 auto; /* Wyśrodkowanie poziome */
    }
}

.popup-game-card.active {
    transform: translateY(0);
    opacity: 1;
}

/* Styl dla game-card__button w popupie */
.popup-game-card .game-card__button {
    display: flex;
    align-items: center;
    background-image: linear-gradient(139.13deg, rgba(45, 44, 64, 0.8) 13.23%, rgba(38, 37, 54, 0.8) 81.86%);
    border: 1px solid rgb(55 56 86 / var(--tw-border-opacity, 1));
    transition: background 0.2s ease-in-out;
    width: 100%;
    box-sizing: border-box;
    position: relative; /* Zastępuje position: absolute, aby pasowało do popupu */
    padding: 0.4rem; /* Domyślne wypełnienie, będzie nadpisywane w media queries */
    border-radius: 0.8rem; /* Domyślny promień, będzie nadpisywany */
}

/* Responsywne style dla game-card__button */
@media (max-width: 768px) {
    .popup-game-card .game-card__button {
        width: calc(100% - 1.06667rem);
        padding: 0.2666666667rem;
        border-radius: 0.5333333333rem;
    }
}

@media (min-width: 769px) {
    .popup-game-card .game-card__button {
        width: calc(100% - 1.6rem);
        padding: 0.4rem;
        border-radius: 0.8rem;
    }
}

@media (min-width: 1025px) {
    .popup-game-card .game-card__button {
        width: calc(100% - 0.88889rem);
        padding: 0.2222222222rem;
        border-radius: 0.4444444444rem;
    }
}

/* Styl dla game-card__img-wr */
.popup-game-card .game-card__img-wr {
    flex-shrink: 0;
    overflow: hidden;
}

@media (max-width: 768px) {
    .popup-game-card .game-card__img-wr {
        border-radius: 0.5333333333rem;
        margin-right: 0.8rem;
    }
}

@media (min-width: 769px) {
    .popup-game-card .game-card__img-wr {
        border-radius: 0.8rem;
        margin-right: 1.2rem;
    }
}

@media (min-width: 1025px) {
    .popup-game-card .game-card__img-wr {
        border-radius: 0.4444444444rem;
        margin-right: 0.6666666667rem;
    }
}

/* Styl dla game-card__img */
@media (max-width: 768px) {
    .popup-game-card .game-card__img {
        width: 5rem;
        height: 4.7rem;
    }
}

@media (min-width: 769px) {
    .popup-game-card .game-card__img {
        width: 7.5rem;
        height: 5.8rem;
    }
}

@media (min-width: 1025px) {
    .popup-game-card .game-card__img {
        width: 4.1666666667rem;
        height: 3.6666666667rem;
    }
}

/* Styl dla game-card__about */
.popup-game-card .game-card__about {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

/* Styl dla game-card__title */
.popup-game-card .game-card__title {
    font-weight: 500;
    color: #90a7ff; /* Kolor zgodny z .game-card .game-card__title */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 0.2s ease-in-out;
}

@media (max-width: 768px) {
    .popup-game-card .game-card__title {
        font-size: 0.9333333333rem;
        line-height: 1.3333333333rem;
    }
}

@media (min-width: 769px) {
    .popup-game-card .game-card__title {
        font-size: 1.6rem;
        line-height: 2rem;
    }
}

@media (min-width: 1025px) {
    .popup-game-card .game-card__title {
        font-size: 0.8888888889rem;
        line-height: 1.1111111111rem;
    }
}

/* Styl dla game-card__provider */
.popup-game-card .game-card__provider {
    color: hsla(0, 0%, 100%, 0.8);
    font-weight: 400;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .popup-game-card .game-card__provider {
        font-size: 0.8rem;
        line-height: 1.3333333333rem;
    }
}

@media (min-width: 769px) {
    .popup-game-card .game-card__provider {
        font-size: 1.4rem;
        line-height: 2rem;
    }
}

@media (min-width: 1025px) {
    .popup-game-card .game-card__provider {
        font-size: 0.7777777778rem;
        line-height: 1.1111111111rem;
    }
}

/* Styl dla game-card__nav-rate */
.popup-game-card .game-card__nav-rate {
    font-size: 0.5rem;
}

@media (min-width: 769px) {
    .popup-game-card .game-card__nav-rate {
        font-size: 1rem;
    }
}

@media (min-width: 1025px) {
    .popup-game-card .game-card__nav-rate {
        font-size: 1rem;
    }
}

/* Styl dla game-card__nav */
.popup-game-card .game-card__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 1; /* Zapewnia widoczność w popupie */
    visibility: visible;
    margin: 0 1.2rem;
}

@media (max-width: 768px) {
    .popup-game-card .game-card__nav {
        width: 1.3333333333rem;
        height: 1.3333333333rem;
        margin: 0 0.8rem;
    }
}

@media (min-width: 769px) {
    .popup-game-card .game-card__nav {
        width: 2rem;
        height: 2rem;
        margin: 0 1.2rem;
    }
}

@media (min-width: 1025px) {
    .popup-game-card .game-card__nav {
        width: 1.1111111111rem;
        margin: 0 0.6666666667rem;
    }
}

/* Styl dla game-card__nav-os */
.popup-game-card .game-card__nav-os {
    color: #e5e7eb;
    font-size: 11px;
    display: inline-flex;
}

@media (min-width: 769px) {
    .popup-game-card .game-card__nav-os {
        font-size: 17px;
    }
}

@media (min-width: 1025px) {
    .popup-game-card .game-card__nav-os {
        font-size: 11px;
    }
}

/* Styl dla game-card__nav-coins i text-coins */
.popup-game-card .game-card__nav-coins {
    color: rgb(237, 184, 24); /* Kolor zgodny z .game-card__nav-coins */
}

.popup-game-card .text-coins {
    font-size: 13px;
    font-weight: 900;
    font-family: 'Mona Sans';
    color: rgb(237, 184, 24); /* Kolor zgodny z .game-card__nav-coins */
}

@media (min-width: 769px) {
    .popup-game-card .text-coins {
        font-size: 18px;
    }
}

@media (min-width: 1025px) {
    .popup-game-card .text-coins {
        font-size: 13px;
    }
}

/* Animacje dla informacji w popupie */
.popup-info > * {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.popup-info.active h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}
.popup-info.active .title-specialtext {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}
.popup-info.active .desc-specialtext {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}
.popup-info.active #popupDescription {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}
.popup-info.active #popupRequirements {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}
.popup-info.active #popupDescriptionSection {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}
.popup-info.active #popupOs {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}
.popup-info.active .text-center {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
}

/* Styl dla klikalnego game-card */
.game-card {
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}
.game-card:hover {
    transform: scale(1.05);
}
.popup-content:before {
    content: "";
    position: absolute;
    background-color: #525dc2;
    filter: blur(5.75rem);
    border-radius: 100%;
    opacity: .4;
    width: 43.3333333333rem;
    height: 40rem;
    left: -9rem;
    top: -14.72222rem;
    transform: translateZ(0);
}
@media (max-width: 768px) {
    .popup-content:before {
        width: 24.333333rem;
        height: 27rem;
    }
}
.tab-content{
    min-height: 500px;
}

/* Animacje casonowe */
.narrow-container {
    width: 84%;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
.bg-nav-menu-gradient {
    background-image: linear-gradient(139.13deg, rgba(45, 44, 64, .8) 13.23%, rgba(38, 37, 54, .8) 81.86%);
}
.border-primary-border-light-100 {
    --tw-border-opacity: 1;
    border-color: rgb(55 56 86 / var(--tw-border-opacity, 1));
}
.rounded-3xl {
    border-radius: 1.5rem;
}
.w-12 {
    width: 3rem;
}
.h-52 {
    height: 13rem;
}
.h-28 {
    height: 7rem;
}
.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}
.max-h-full {
    max-height: 100%;
}
.pb-28 {
    padding-bottom: 7rem;
}
.h-1\/2 {
    height: 50%;
}
.clip-fade-long-right {
    -webkit-mask-image: linear-gradient(270deg, rgba(0, 0, 0, .04) 2%, #000 8%);
    mask-image: linear-gradient(270deg, rgba(0, 0, 0, .04) 2%, #000 8%);
}
.min-w-\[5rem\] {
    min-width: 5rem;
}
.mb-1\.5 {
    margin-bottom: .375rem;
}
.text-secondary-text-light {
    --tw-text-opacity: 1;
    color: rgb(155 157 206 / var(--tw-text-opacity, 1));
}
.mb-1 {
    margin-bottom: .25rem;
}
.duration-500 {
    transition-duration: .5s;
}
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}
.rounded-xl {
    border-radius: .75rem;
}
.left-0 {
    left: 0;
}
.w-10 {
    width: 2.5rem;
}
.w-11 {
    width: 2.625rem;
}
.w-max {
    width: -moz-max-content;
    width: max-content !important;
}
.\!w-3\.5 {
    width: .875rem !important;
}
.max-w-\[330px\] {
    max-width: 330px;
}
.h-10 {
    height: 2.5rem;
}
.h-11 {
    height: 2.625rem;
}
.h-\[76px\] {
    height: 76px;
}
.z-\[1\] {
    z-index: 1;
}
.z-\[3\] {
    z-index: 3;
}
.-mr-1 {
    margin-right: -.25rem;
}
.w-\[calc\(100\%-10\.5rem\)\] {
    width: calc(100% - 10.5rem);
}
.text-secondary-text {
    --tw-text-opacity: 1;
    color: rgb(226 228 240 / var(--tw-text-opacity, 1));
}
.border-t-primary-border-light-100 {
    --tw-border-opacity: 1;
    border-top-color: rgb(55 56 86 / var(--tw-border-opacity, 1));
}
.border-t {
    border-top-width: 1px;
}
.container {
    max-width: calc(71rem + 44px);
}
.container, .wide-container {
    width: 100%;
    margin: 0 auto;
    padding-left: 22px;
    padding-right: 22px;
}
.default-btn.gold {
    --tw-text-opacity: 1;
    color: rgb(255 204 120 / var(--tw-text-opacity, 1));
}
.default-btn:not(.sm) {
    border-width: 2px;
}
.btn:not(.gold-btn), .btn:not(.gold-btn) img, .btn:not(.gold-btn) span, .btn:not(.gold-btn) svg {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}
.btn[disabled] {
    pointer-events: none;
}
.pr-0\.5 {
    padding-right: .125rem;
}
.bg-primary-bg-light-425 {
    --tw-bg-opacity: 1;
    background-color: rgb(46 44 64 / var(--tw-bg-opacity, 1));
}
.\!absolute {
    position: absolute !important;
}
.swiper-arrow-disabled {
    pointer-events: none;
}
.default-btn {
    border-color: rgba(221, 217, 255, .12);
    background-color: rgba(58, 55, 79, .5);
}

:disabled {
    cursor: default;
}
.default-btn span {
    text-shadow: 1px 1px 3px rgba(30, 12, 143, .24);
}
.pointer-events-none {
    pointer-events: none;
}
.default-btn.active .icon-svg-gradient, .default-btn[disabled] .icon-svg-current {
    opacity: 1;
}
.default-btn.gold--icon .icon-svg-current {
    opacity: 0;
}
.default-btn .icon-svg-current {
    opacity: 1;
}
.swiper-arrow-disabled path {
    stroke: #6b7280;
}
.icon-svg-current, .icon-svg-gradient {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s;
}
@media (min-width: 768px) {
    .icon-svg-current {
        opacity: 0;
    }
}
.default-btn[disabled] .icon-svg-gradient {
    opacity: 0;
}
.default-btn.gold--icon .icon-svg-gradient {
    opacity: 1;
}
.default-btn .icon-svg-gradient, .default-btn.active .icon-svg-current {
    opacity: 0;
}
.clip-fade-short-full {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .1) 2%, #000 4%, #000 96%, rgba(0, 0, 0, .1) 98%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .1) 2%, #000 4%, #000 96%, rgba(0, 0, 0, .1) 98%);
}
.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.\!px-5 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}
.bottom-0 {
    bottom: 0;
}
.swiper-pointer-events {
    touch-action: pan-y;
}
.swiper-android .swiper-slide, .swiper-wrapper {
    transform: translateZ(0);
}
.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}
.transition-\[width\2c transform\] {
    transition-property: width, transform;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

.shadow-gold-btn {
    --tw-shadow: 0px 0px 40px 3px rgba(255, 170, 43, .2), 1px 1px 0px 0px hsla(0, 0%, 100%, .6) inset;
    --tw-shadow-colored: 0px 0px 40px 3px var(--tw-shadow-color), inset 1px 1px 0px 0px var(--tw-shadow-color);
}
.shadow-gold-block--primary, .shadow-gold-btn {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.bg-gold-btn-gradient {
    background-image: linear-gradient(135deg, #ffde8b, #ffb762 85.94%);
}
.text-primary-color-dark {
    --tw-text-opacity: 1;
    color: rgb(89 56 10 / var(--tw-text-opacity, 1));
}
.bg-gradient-alone--gold {
    background-image: linear-gradient(135deg, #ffde8b, #ffb762 85.94%);
}
.btn-categories .icon-svg-current {
    opacity: 1
}

.btn-categories .icon-svg-gradient,.btn-categories.active .icon-svg-current {
    opacity: 0;
}

.btn-categories.active .icon-svg-gradient {
    opacity: 1
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}
.default-btn.white {
    --tw-text-opacity: 1;
    color: rgb(226 228 240 / var(--tw-text-opacity, 1));
}
.text-current {
    color: #e2e4f0;
}
.text-current-active {
    color: #59380a;
}
.text-primary-color {
    --tw-text-opacity: 1;
    color: rgb(255 204 120 / var(--tw-text-opacity, 1));
}
.swiper-slide-we {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}
.flex-row-reverse {
    flex-direction: row-reverse;
}
.bg-primary-bg\/80 {
    background-color: rgb(39 11 2 / 20%);
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.overflow-auto {
    overflow: auto;
}
.will-change-\[width\2c transform\] {
    will-change: width, transform;
}
.h-\[3px\] {
    height: 3px;
}
.after\:content-\[\"\"\]:after, .after\:content-\[\'\'\]:after {
    --tw-content: "";
    content: var(--tw-content);
}
.after\:will-change-\[opacity\]:after {
    content: var(--tw-content);
    will-change: opacity;
}
.after\:transition-all:after {
    content: var(--tw-content);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

.after\:opacity-0:after {
    content: var(--tw-content);
    opacity: 0;
}
.after\:rounded-full:after {
    content: var(--tw-content);
    border-radius: 9999px;
}
.after\:w-full:after {
    content: var(--tw-content);
    width: 100%;
}
.after\:h-full:after {
    content: var(--tw-content);
    height: 100%;
}
.after\:-z-10:after {
    content: var(--tw-content);
    z-index: -10;
}
.after\:top-0:after {
    content: var(--tw-content);
    top: 0;
}
.after\:left-0:after {
    content: var(--tw-content);
    left: 0;
}
.after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
}
.after\:pointer-events-none:after {
    content: var(--tw-content);
    pointer-events: none;
}
.shadow-xl-200 {
    --tw-shadow: 0px -12px 50px #161722;
    --tw-shadow-colored: 0px -12px 50px var(--tw-shadow-color);
}
.shadow-white-inset, .shadow-xl-200 {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.bg-primary-bg\/\[\.84\] {
    background-color: rgba(22, 23, 34, .84);
}
.mobile-nav-link {
    position: relative;
}
.shadow-blue-btn {
    --tw-shadow: 0px 1px 3px #081058, 0px 0px 40px 3px rgba(87, 134, 255, .4), inset 1px 1px 0px rgba(238, 249, 255, .3);
    --tw-shadow-colored: 0px 1px 3px var(--tw-shadow-color), 0px 0px 40px 3px var(--tw-shadow-color), inset 1px 1px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.bg-blue-btn-gradient {
    background-image: linear-gradient(135deg, #65ddf8, #6355ff 85.94%);
}
.before\:content-\[\"\"\]:before, .before\:content-\[\'\'\]:before {
    --tw-content: "";
    content: var(--tw-content);
}
.before\:bg-secondary-border-thin\/\[\.12\]:before {
    content: var(--tw-content);
    background-color: rgba(221, 217, 255, .12);
}

.before\:w-full:before {
    content: var(--tw-content);
    width: 100%;
}
.before\:h-px:before {
    content: var(--tw-content);
    height: 2px;
}
.before\:top-0:before {
    content: var(--tw-content);
    top: 0;
}
.before\:left-0:before {
    content: var(--tw-content);
    left: 0;
}
.before\:absolute:before {
    content: var(--tw-content);
    position: absolute;
}
/* Domyślne :after dla nieaktywnych zakładek */
.mobile-nav-link:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 0.25rem;
    width: 0.625rem;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: 1rem;
    background-color: currentColor;
    opacity: 0;
    content: "";
}

/* Ukryj :after dla aktywnej zakładki dolnej */
.tab-bottom.active:after {
    display: none; /* lub opacity: 0, ale display: none jest bardziej jednoznaczne */
}

/* Definiuj :before dla aktywnej zakładki dolnej */
.tab-bottom.active:before {
    position: absolute;
    bottom: -10px;
    left: 50%;
    height: .25rem;
    width: .625rem;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: 1rem;
    background-color: #e2e4f0;
    --tw-content: "";
    content: var(--tw-content);
}

.bottom-tab-active .tab-indicator {
    opacity: 0 !important; /* Nadpisz style inline */
}
.backdrop-blur-\[5px\], .backdrop-blur-lg {
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

/* Styl dla zawartości zakładek */
.tab-content {
    display: block;
}

.tab-content.hidden {
    display: none;
}
.swiper-slider {
    transform: translateZ(0);
    backface-visibility: hidden;
}
.swiper-slider {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}
.lt-2\:overflow-hidden {
        overflow: hidden;
}
.lt-2\:min-h-\[300px\] {
        min-height: 300px;
}
.lt\:object-\[130\%_center\] {
        -o-object-position: 130% center;
        object-position: 130% center;
}
.object-contain {
    -o-object-fit: contain;
    object-fit: contain;
}
.max-w-none {
    max-width: none;
}
.lt\:w-\[60\%\] {
    width: 60%;
}
.pb-18 {
    padding-bottom: 4.25rem;
}
.lt\:text-\[max\(24px\2c min\(4\.2vw\2c 32px\)\)\] {
    font-size: max(24px, min(4.2vw, 32px));
}
.transition-chat-visible {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .3s;
}
.\!leading-\[1\.175\] {
    line-height: 1.175 !important;
}
.font-thin {
    font-weight: 100;
}
.self-start {
    align-self: flex-start;
}
.gold-btn.md {
    height: 2.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.gold-btn:before {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9;
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    background-image: linear-gradient(135deg, #fff2d2, #ffb762 85.94%);
    opacity: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s;
    will-change: opacity;
    --tw-content: "";
    content: var(--tw-content);
}
.gold-btn.active:after {
    opacity: 1;
}
.gold-btn.active:after {
    opacity: 1;
}
.after\:content-\[\"\"\]:after, .after\:content-\[\'\'\]:after {
    --tw-content: "";
    content: var(--tw-content);
}
.after\:will-change-\[opacity\]:after {
    content: var(--tw-content);
    will-change: opacity;
}
.after\:transition-all:after {
    content: var(--tw-content);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}
.after\:opacity-0:after {
    content: var(--tw-content);
    opacity: 0;
}
.after\:rounded-full:after {
    content: var(--tw-content);
    border-radius: 9999px;
}
.after\:w-full:after {
    content: var(--tw-content);
    width: 100%;
}
.after\:h-full:after {
    content: var(--tw-content);
    height: 100%;
}
.after\:-z-10:after {
    content: var(--tw-content);
    z-index: -10;
}
.after\:top-0:after {
    content: var(--tw-content);
    top: 0;
}
.after\:left-0:after {
    content: var(--tw-content);
    left: 0;
}
.after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
}
.after\:pointer-events-none:after {
    content: var(--tw-content);
    pointer-events: none;
}
.gold-btn:after {
    background-image: linear-gradient(135deg, #ffde8b, #ffb762 85.94%) !important;
    --tw-shadow: 0px 0px 40px 3px rgba(255, 170, 43, .2), 1px 1px 0px 0px hsla(0, 0%, 100%, .6) inset !important;
    --tw-shadow-colored: 0px 0px 40px 3px var(--tw-shadow-color), inset 1px 1px 0px 0px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    transition-duration: .2s !important;
}
.gold-btn.md span {
    font-size: .875rem;
    line-height: 1.25rem;
}
.gold-btn.active span {
    --tw-text-opacity: 1;
    color: rgb(89 56 10 / var(--tw-text-opacity, 1));
}
.xl-max\:home-slider-mask {
    -webkit-mask-image: linear-gradient(270deg, #d9d9d9 62.8%, hsla(0, 0%, 45%, 0));
    mask-image: linear-gradient(270deg, #d9d9d9 62.8%, hsla(0, 0%, 45%, 0));
}
.lt-2\:w-\[470px\] {
    width: 470px;
}
.lt-2\:-right-\[86px\] {
    right: -86px;
}
.w-\[380px\] {
    width: 380px;
}
.h-\[86\%\] {
    height: 86%;
}
.bottom-\[15\%\] {
    bottom: 15%;
}
.-right-\[96px\] {
    right: -96px;
}
/* Nowe reguły CSS (dodane na końcu) */
@media (min-width: 768px) {
    .hero-banner__bg img {
        object-fit: cover; /* Tło wypełnia kontener */
        object-position: center; /* Wyśrodkowanie */
        width: 100%; /* Pełna szerokość */
        left: 0; /* Przesunięcie na lewo, aby wypełnić kontener */
    }
}

/* Powiększenie czcionki o 20% */
.relative.block.z-10.font-thin {
    font-size: 1.2rem; /* 20% większy od text-xl (1rem * 1.2) */
}
@media (min-width: 1024px) {
    .relative.block.z-10.font-thin {
        font-size: max(28.8px, min(5.04vw, 38.4px)); /* 20% większy od max(24px, min(4.2vw, 32px)) */
    }
}
@media (min-width: 768px) {
    .relative.block.z-10.font-thin {
        font-size: max(2.4rem, min(4.56vw, 3rem)); /* 20% większy od max(2rem, min(3.8vw, 2.5rem)) */
    }
}
@media (min-width: 1024px) {
    .relative.block.z-10.font-thin {
        font-size: max(2.7rem, min(4.32vw, 3.36rem)); /* 20% większy od max(2.25rem, min(3.6vw, 2.8rem)) */
    }
}
.m-xl\:text-\[2\.8rem\] {
    font-size: 3.36rem; /* 20% większy od 2.8rem */
}

/* Powiększenie przycisku o 20% */
.gold-btn.md {
    height: 3rem; /* 20% większy od 2.5rem (2.5 * 1.2) */
    padding-left: 1.2rem; /* 20% większy od 1rem */
    padding-right: 1.2rem; /* 20% większy od 1rem */
}
.gold-btn.md span {
    font-size: 1.05rem; /* 20% większy od .875rem (.875 * 1.2) */
    line-height: 1.5rem; /* 20% większy od 1.25rem */
}

/* Powiększenie zdjęcia persony o 20% */
.hero-banner__persona {
    width: 456px; /* 20% większy od 380px (380 * 1.2) */
}
.lt-2\:w-\[470px\] {
    width: 564px; /* 20% większy od 470px (470 * 1.2) */
}
@media (min-width: 768px) {
    .hero-banner__persona {
        width: 936px; /* 20% większy od 780px (780 * 1.2) */
    }
}
.padding-1rem{
    padding: 1rem;
}
.pb-in{
    margin-bottom: 60px;
}
@media (min-width: 1024px) {
    .bann {
        padding: 50px;
    }
}
@media (min-width: 1024px) {
    .bann-img {
        object-position: 299px !important;
    }
}
/* Style dla kontenera strony */
.container-wheel {
    max-width: calc(71rem + 44px);
    width: 100%;
    margin: 0 auto;
    padding-left: 22px;
    padding-right: 22px;
}

/* Style dla przycisków */
.btn:not(.gold-btn),
.btn:not(.gold-btn) img,
.btn:not(.gold-btn) span,
.btn:not(.gold-btn) svg {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.15s;
}

.blue-btn {
    --border-radious: 100px;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.2s;
}

.blue-btn:after {
    border-radius: var(--border-radious) !important;
    background-image: linear-gradient(135deg, #65ddf8, #6355ff 85.94%) !important;
    opacity: 1 !important;
    --tw-shadow: 0px 1px 3px #081058, 0px 0px 40px 3px rgba(87, 134, 255, 0.4), inset 1px 1px 0px rgba(238, 249, 255, 0.3) !important;
    --tw-shadow-colored: 0px 1px 3px var(--tw-shadow-color), 0px 0px 40px 3px var(--tw-shadow-color), inset 1px 1px 0px var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    transition-duration: 0.2s !important;
}

.blue-btn:before {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9;
    height: 100%;
    width: 100%;
    border-radius: var(--border-radious);
    background-image: linear-gradient(135deg, #9eebfc, #6355ff 85.94%);
    opacity: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.2s;
    will-change: opacity;
    --tw-content: "";
    content: var(--tw-content);
}

@media (hover: hover) {
    .blue-btn:hover:before {
        opacity: 1;
    }
}

.blue-btn:active:before {
    opacity: 1;
}

.blue-btn span {
    text-shadow: 1px 1px 3px rgba(30, 12, 143, 0.24);
}

.roulette-btn {
    border-width: 2px;
    border-color: hsla(19, 63%, 72%, 0.3);
    background-image: linear-gradient(0deg, transparent -75%, rgba(0, 0, 0, 0.55) 53.96%);
    --tw-text-opacity: 1;
    color: rgb(190 136 112 / var(--tw-text-opacity, 1));
}

.roulette-btn:active {
    border-color: hsla(19, 63%, 72%, 0.6);
}

@media (hover: hover) {
    .roulette-btn:hover {
        border-color: hsla(19, 63%, 72%, 0.6);
    }
}

/* Style dla cieni tekstu */
.t-shadow-gold--fivefold {
    text-shadow: 0 4px 0 rgba(255, 94, 58, 0.66), 0 6px 1px rgba(0, 0, 0, 0.15), 1px 10px 9px rgba(113, 53, 34, 0.7), 0 7px 4px rgba(135, 61, 19, 0.6);
}

.t-shadow-gold--sevenfold {
    text-shadow: 0 4px 0 rgba(255, 153, 58, 0.66), 1px 10px 9px rgba(113, 67, 34, 0.7), 0 5px 1px rgba(77, 52, 30, 0.55), 0 7px 4px rgba(135, 75, 19, 0.6);
}

.t-shadow-wheel-text--primary {
    text-shadow: 1px 1px 1px hsla(49, 86%, 83%, 0.7);
}

.t-shadow-wheel-text--secondary {
    text-shadow: 1px 1px 2px rgba(255, 250, 207, 0.5);
}

/* Nadpisz style dla tła obrazkowego */
.main-bg-image {
    position: absolute;
    top: 37%; /* Centrowanie pionowe względem viewportu */
    left: 50%; /* Centrowanie poziome względem viewportu */
    transform: translate(-50%, -50%); /* Wyśrodkowanie w obu osiach */
    max-width: 100%; /* Zapobiega przewijaniu poziomemu */
    z-index: 0;
    overflow: hidden; /* Obcina nadmiar obrazka */
    display: flex; /* Użyj flexbox do centrowania obrazka */
    justify-content: center; /* Centrowanie poziome obrazka */
    align-items: center; /* Centrowanie pionowe obrazka */
}

.main-bg-image picture {
    display: block;
    width: auto; /* Zachowuje oryginalną szerokość obrazka */
    height: auto; /* Zachowuje oryginalną wysokość obrazka */
}

.main-bg-image img {
    width: auto !important; /* Zachowuje oryginalną szerokość, nadpisuje max-width: 100% */
    height: auto !important; /* Zachowuje oryginalną wysokość */
    max-width: none !important; /* Wyłącza globalne max-width: 100% */
    display: block;
}
.background-main{
    background:#161722;
    padding-bottom: 4rem;
}


/* Style obramowania i tła */
.border-wheel-available-br\/\[\.1\] { border-color: hsla(0, 1%, 41%, 0.1); }
.border-wheel-switch-br { --tw-border-opacity: 1; border-color: rgb(65 44 44 / var(--tw-border-opacity, 1)); }
.bg-wheel-available-bg\/\[\.7\] { background-color: rgba(28, 23, 31, 0.7); }
.bg-wheel-switch-bg\/\[\.9\] { background-color: rgba(33, 25, 37, 0.9); }
.bg-wheel-switch-tab-hover { --tw-bg-opacity: 1; background-color: rgb(44 41 47 / var(--tw-bg-opacity, 1)); }
.bg-wheel-switch-tab-primary-bg { --tw-bg-opacity: 1; background-color: rgb(255 176 72 / var(--tw-bg-opacity, 1)); }
.bg-gold-gradient-text--fivefold { background-image: linear-gradient(180deg, #ffedc7, #ffe8c5 81.25%); }
.bg-wheel-switch-tab-secondary-bg { background-image: linear-gradient(180deg, #6248ff, #c448ff); }
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }


.text-main-100 { --tw-text-opacity: 1; color: rgb(226 228 240 / var(--tw-text-opacity, 1)); }
.text-main-400\/\[\.5\] { color: rgba(94, 97, 126, 0.5); }
.text-orange-100 { --tw-text-opacity: 1; color: rgb(255 184 119 / var(--tw-text-opacity, 1)); }
.text-transparent { color: transparent; }
.text-wheel-text-primary { --tw-text-opacity: 1; color: rgb(255 229 222 / var(--tw-text-opacity, 1)); }
.text-wheel-text-quaternary { --tw-text-opacity: 1; color: rgb(140 55 29 / var(--tw-text-opacity, 1)); }
.text-wheel-text-secondary { --tw-text-opacity: 1; color: rgb(181 178 178 / var(--tw-text-opacity, 1)); }
.text-wheel-text-tertiary { --tw-text-opacity: 1; color: rgb(189 126 31 / var(--tw-text-opacity, 1)); }

/* Style przezroczystości */
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }

/* Style cieni */
.shadow-wheel-tab--hover { --tw-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); --tw-shadow-colored: 0px 4px 4px 0px var(--tw-shadow-color); }
.shadow-wheel-tab--hover, .shadow-wheel-tab--primary { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-wheel-tab--primary { --tw-shadow: 0px 0px 12px 0px #ffcf85 inset, 0px 0px 12px 0px rgba(255, 163, 56, 0.7); --tw-shadow-colored: inset 0px 0px 12px 0px var(--tw-shadow-color), 0px 0px 12px 0px var(--tw-shadow-color); }
.shadow-wheel-tab--secondary { --tw-shadow: 0px 0px 12px 0px rgba(108, 56, 255, 0.7), 0px 0px 12px 0px #ff85f3 inset; --tw-shadow-colored: 0px 0px 12px 0px var(--tw-shadow-color), inset 0px 0px 12px 0px var(--tw-shadow-color); }
.shadow-wheel-tab--secondary { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }

/* Style rozmycia tła */
.backdrop-blur { --tw-backdrop-blur: blur(8px); }
.backdrop-blur, .backdrop-blur-\[5px\] { -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.backdrop-blur-\[5px\] { --tw-backdrop-blur: blur(5px); }

/* Style przejść */
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.ease-linear { transition-timing-function: linear; }
.will-change-\[opacity\] { will-change: opacity; }

/* Style SVG */
.svg-full svg { height: 100%; width: 100%; }

/* Style dla pseudoelementów */
.after\:pointer-events-none:after { content: var(--tw-content); pointer-events: none; }
.after\:absolute:after { content: var(--tw-content); position: absolute; }
.after\:bottom-0:after { content: var(--tw-content); bottom: 0; }
.after\:left-0:after { content: var(--tw-content); left: 0; }
.after\:left-1\/2:after { content: var(--tw-content); left: 50%; }
.after\:top-0:after { content: var(--tw-content); top: 0; }
.after\:top-1\/2:after { content: var(--tw-content); top: 50%; }
.after\:-z-10:after { content: var(--tw-content); z-index: -10; }
.after\:-z-\[1\]:after { content: var(--tw-content); z-index: -1; }
.after\:z-\[2\]:after { content: var(--tw-content); z-index: 2; }
.after\:h-\[248px\]:after { content: var(--tw-content); height: 248px; }
.after\:h-\[94\%\]:after { content: var(--tw-content); height: 94%; }
.after\:h-full:after { content: var(--tw-content); height: 100%; }
.after\:w-\[94\%\]:after { content: var(--tw-content); width: 94%; }
.after\:w-full:after { content: var(--tw-content); width: 100%; }
.after\:-translate-x-1\/2:after { --tw-translate-x: -50%; }
.after\:-translate-x-1\/2:after, .after\:-translate-y-1\/2:after { content: var(--tw-content); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.after\:-translate-y-1\/2:after { --tw-translate-y: -50%; }
.after\:rounded-\[0_1\.5rem_1\.5rem_0\]:after { content: var(--tw-content); border-radius: 0 1.5rem 1.5rem 0; }
.after\:rounded-\[1\.5rem_0_0_1\.5rem\]:after { content: var(--tw-content); border-radius: 1.5rem 0 0 1.5rem; }
.after\:rounded-full:after { content: var(--tw-content); border-radius: 9999px; }
.after\:border:after { content: var(--tw-content); border-width: 1px; }
.after\:border-transparent:after { content: var(--tw-content); border-color: transparent; }
.after\:bg-\[\#0E0A12\]\/\[\.8\]:after { content: var(--tw-content); background-color: rgba(14, 10, 18, 0.8); }
.after\:bg-primary-bg-dark-1100:after { content: var(--tw-content); --tw-bg-opacity: 1; background-color: rgb(1 0 19 / var(--tw-bg-opacity, 1)); }
.after\:opacity-0:after { content: var(--tw-content); opacity: 0; }
.after\:blur-\[5px\]:after { --tw-blur: blur(5px); }
.after\:blur-\[5px\]:after { content: var(--tw-content); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
.after\:transition-all:after { content: var(--tw-content); transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.after\:will-change-\[opacity\]:after { content: var(--tw-content); will-change: opacity; }
.after\:content-\[\"\"\]:after { --tw-content: ""; content: var(--tw-content); }
.after\:border-gradient__wheel-tab--hover:after { content: var(--tw-content); -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; }
.after\:border-gradient__wheel-tab--hover:after { background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.1), rgba(68, 88, 102, 0) 19.88%) border-box; }
.after\:border-gradient__wheel-tab--primary:after { background: linear-gradient(180deg, #ffe2b9, #ffbc60 19.88%) border-box; }
.after\:border-gradient__wheel-tab--primary:after, .after\:border-gradient__wheel-tab--secondary:after { content: var(--tw-content); -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; }
.after\:border-gradient__wheel-tab--secondary:after { background: linear-gradient(180deg, #ffe2b9, #8960ff 19.88%) border-box; }

/* Interakcje grupowe */
.group:active .group-active\:opacity-0 { opacity: 0; }
.group:active .group-active\:opacity-100 { opacity: 1; }
@media (hover: hover) {
    .group:hover .better-hover\:group-hover\:opacity-0 { opacity: 0; }
    .group:hover .better-hover\:group-hover\:opacity-100 { opacity: 1; }
}

/* Media queries */
@media (max-width: 349px) {
    .s-max\:px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
}

@media (max-width: 479px) {
    .lt-max\:hidden { display: none; }
}

@media (max-width: 767px) {
    .md-max\:-mx-\[10px\] { margin-left: -10px; margin-right: -10px; }
    .md-max\:mb-3 { margin-bottom: 0.75rem; }
    .md-max\:mr-3 { margin-right: 0.75rem; }
    .md-max\:hidden { display: none !important; }
    .md-max\:min-w-\[80px\] { min-width: 80px; }
    .md-max\:-rotate-45 { --tw-rotate: -45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
    .md-max\:rotate-\[-42deg\] { --tw-rotate: -42deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
    .md-max\:flex-col { flex-direction: column; }
    .md-max\:items-center { align-items: center; }
    .md-max\:justify-center { justify-content: center; }
    .md-max\:self-center { align-self: center; }
}

@media (min-width: 768px) {
    .md\:-left-\[6\%\] { left: -6%; }
    .md\:-top-\[9\%\] { top: -9%; }
    .md\:-top-\[6\.5rem\] { top: -6.5rem; }
    .md\:left-0 { left: 0; }
    .md\:mx-auto { margin-left: auto; margin-right: auto; }
    .md\:mb-4 { margin-bottom: 1rem; }
    .md\:mb-6 { margin-bottom: 1.5rem; }
    .md\:mb-8 { margin-bottom: 2rem; }
    .md\:ml-auto { margin-left: auto; }
    .md\:mr-6 { margin-right: 1.5rem; }
    .md\:hidden { display: none; }
    .md\:h-\[120\%\] { height: 120%; }
    .md\:h-\[142px\] { height: 142px; }
    .md\:h-\[32px\] { height: 32px; }
    .md\:h-\[460px\] { height: 460px; }
    .md\:h-\[min\(87\.5\%\2c 34rem\)\] { height: min(87.5%, 34rem); }
    .md\:w-\[120\%\] { width: 120%; }
    .md\:w-\[204px\] { width: 204px; }
    .md\:w-\[460px\] { width: 460px; }
    .md\:w-\[min\(90\%\2c 34\.875rem\)\] { width: min(90%, 34.875rem); }
    .md\:w-full { width: 100%; }
    .md\:max-w-\[240px\] { max-width: 240px; }
    .md\:max-w-\[326px\] { max-width: 326px; }
    .md\:-translate-x-\[69\%\] { --tw-translate-x: -69%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
    .md\:translate-y-\[65\%\] { --tw-translate-y: 65%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
    .md\:-rotate-90 { --tw-rotate: -90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
    .md\:rotate-\[5deg\] { --tw-rotate: 5deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
    .md\:flex-col { flex-direction: column; }
    .md\:items-end { align-items: flex-end; }
    .md\:justify-between { justify-content: space-between; }
    .md\:px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
    .md\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
    .md\:pt-8 { padding-top: 2rem; }
    .md\:text-right { text-align: right; }
    .md\:text-\[20px\] { font-size: 20px; }
    .md\:text-\[24px\] { font-size: 24px; }
    .md\:text-\[32px\] { font-size: 32px; }
    .after\:md\:h-\[10\.75rem\]:after { content: var(--tw-content); height: 10.75rem; }
}

@media (max-width: 1023px) {
    .lg-max\:hidden { display: none !important; }
}

@media (min-width: 1024px) {
    .lg\:mb-18 { margin-bottom: 4.25rem; }
    .lg\:hidden { display: none !important; }
    .lg\:h-12 { height: 3rem; }
    .lg\:h-\[14rem\] { height: 14rem; }
    .lg\:h-\[38\.875rem\] { height: 38.875rem; }
    .lg\:w-\[38\.875rem\] { width: 38.875rem; }
    .lg\:w-full { width: 100%; }
    .lg\:max-w-\[20\.25rem\] { max-width: 20.25rem; }
    .lg\:pb-16 { padding-bottom: 4rem; }
    .lg\:text-3xl { font-size: 2rem; }
    .lg\:text-\[1\.5625rem\] { font-size: 1.5625rem; }
    .lg\:text-\[2\.5rem\] { font-size: 2.5rem; }
    .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
}

/* Styl dla koła */
.wheel-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(79.5%, 30.75rem);
    height: min(79.5%, 30.75rem);
    z-index: 1;
    will-change: transform;
    transform-origin: center center;
    transition: none !important; /* Wyłącz wszystkie transition */
}

/* Styl dla aktywnego przycisku Spin */
#btn-wheel-spin {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    transition: opacity 0.3s ease-linear, transform 0.2s ease;
    cursor: pointer;
    z-index: 2;
}

/* Efekt hover */
@media (hover: hover) {
    #btn-wheel-spin:hover {
        transform: scale(0.95);
    }
}

/* Efekt kliknięcia */
#btn-wheel-spin:active {
    transform: scale(0.9);
}

/* Styl dla tekstu w przycisku */
#btn-wheel-spin .text-[max\(16px\,min\(4\.9vw\,20px\)\)] {
    position: absolute;
    font-size: max(16px, min(4.9vw, 20px));
    font-weight: 900;
    text-transform: uppercase;
    z-index: 2;
}

/* Gradient tekstu */
#btn-wheel-spin .bg-gold-gradient-text--fivefold {
    background-image: linear-gradient(180deg, #ffedc7, #ffe8c5 81.25%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: opacity 0.2s ease;
}

/* Cień fivefold */
#btn-wheel-spin .t-shadow-gold--fivefold {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    text-shadow: 0 4px 0 rgba(255, 94, 58, 0.66), 0 6px 1px rgba(0, 0, 0, 0.15), 1px 10px 9px rgba(113, 53, 34, 0.7), 0 7px 4px rgba(135, 61, 19, 0.6);
    transition: opacity 0.2s ease;
}

/* Cień sevenfold */
#btn-wheel-spin .t-shadow-gold--sevenfold {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    text-shadow: 0 4px 0 rgba(255, 153, 58, 0.66), 1px 10px 9px rgba(113, 67, 34, 0.7), 0 5px 1px rgba(77, 52, 30, 0.55), 0 7px 4px rgba(135, 75, 19, 0.6);
    transition: opacity 0.2s ease;
    opacity: 0;
}

/* Efekty hover dla tekstu */
@media (hover: hover) {
    #btn-wheel-spin:hover .t-shadow-gold--fivefold {
        opacity: 0;
    }
    #btn-wheel-spin:hover .t-shadow-gold--sevenfold {
        opacity: 1;
    }
}

/* Efekty kliknięcia dla tekstu */
#btn-wheel-spin:active .t-shadow-gold--fivefold {
    opacity: 0;
}
#btn-wheel-spin:active .t-shadow-gold--sevenfold {
    opacity: 1;
}

/* Styl dla obrazków w przycisku */
#btn-wheel-spin img[src*="wheel-button--hover"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    transition: opacity 0.2s ease;
    opacity: 0;
    z-index: 1;
}

#btn-wheel-spin img[src*="wheel-button--active"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1;
}

/* Efekty hover dla obrazków */
@media (hover: hover) {
    #btn-wheel-spin:hover img[src*="wheel-button--hover"] {
        opacity: 0;
    }
    #btn-wheel-spin:hover img[src*="wheel-button--active"] {
        opacity: 1;
    }
}

/* Efekty kliknięcia dla obrazków */
#btn-wheel-spin:active img[src*="wheel-button--hover"] {
    opacity: 0;
}
#btn-wheel-spin:active img[src*="wheel-button--active"] {
    opacity: 1;
}

/* Styl dla nieaktywnego przycisku */
#btn-wheel-spin--disable {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    transition: opacity 0.3s ease-linear;
    z-index: 1;
}

#btn-wheel-spin--disable span {
    position: absolute;
    font-size: max(16px, min(4.9vw, 20px));
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(94, 97, 126, 0.5);
}

#btn-wheel-spin--disable img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
/* Skalowanie głównego kontenera o 20% */
.container-wheel {
    transform: scale(0.7);
    transform-origin: center top; /* Punkt odniesienia skalowania */
    margin-top: -1.6rem; /* 20% mniejszy od -2rem (-mt-8 * 0.8) */
    margin-bottom: -200px;
    padding-top: 1.6rem; /* 20% mniejszy od 2rem (pt-8 * 0.8) */
    width: 100%; /* Pełna szerokość */
    max-width: calc(71rem); /* Oryginalne max-width */
    margin-left: auto; /* Wyśrodkowanie lewo-prawo */
    margin-right: auto; /* Wyśrodkowanie lewo-prawo */
    position: relative;
    z-index: 5; /* Wyższy priorytet niż tło */
}

/* Neutralizacja skalowania dla przycisków i poprawa pozycjonowania */
#bp-btn__login, #btn-wheel-spin, #btn-wheel-spin--disable {
    transform: scale(1); /* Przywraca oryginalny rozmiar */
    z-index: 10; /* Wyższy priorytet dla przycisków */
}

/* Skalowanie głównego kontenera o 20% */
.container-wheel {
    transform: scale(0.7);
    transform-origin: center top; /* Punkt odniesienia skalowania */
    margin-top: -1.6rem; /* 20% mniejszy od -2rem (-mt-8 * 0.8) */
    padding-top: 1.6rem; /* 20% mniejszy od 2rem (pt-8 * 0.8) */
    width: 100%; /* Pełna szerokość */
    max-width: calc(71rem); /* Oryginalne max-width */
    margin-left: auto; /* Wyśrodkowanie lewo-prawo */
    margin-right: auto; /* Wyśrodkowanie lewo-prawo */
    position: relative;
    z-index: 5; /* Wyższy priorytet niż tło */
}

/* Neutralizacja skalowania dla innych przycisków */
#bp-btn__login, #btn-wheel-spin {
    transform: scale(1); /* Przywraca oryginalny rozmiar */
    z-index: 10; /* Wyższy priorytet */
}

/* Specyficzne style dla #btn-wheel-spin--disable */
#btn-wheel-spin--disable {
    top: 50%; /* Centrowanie w pionie */
    left: 50%; /* Centrowanie w poziomie */
    transform: translate(-50%, -50%); /* Centrowanie bez dodatkowego skalowania */
    margin: 0; /* Usunięcie marginesów */
    position: absolute;
    z-index: 10; /* Wyższy priorytet */
}

/* Dostosowanie czcionki w #btn-wheel-spin--disable */
#btn-wheel-spin--disable span {
    font-size: min(4.9vw, calc(16px * 0.7)); /* Responsywna czcionka, 80% od 16px */
}
@media (min-width: 768px) {
    #btn-wheel-spin--disable span {
        font-size: calc(24px * 0.7); /* 80% od 24px */
    }
}
@media (min-width: 1024px) {
    #btn-wheel-spin--disable span {
        font-size: calc(2rem * 0.7); /* 80% od 2rem (text-3xl) */
    }
}

/* Dostosowanie obrazu w #btn-wheel-spin--disable */
#btn-wheel-spin--disable img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Poprawka dla pseudoelementu ::after */
.container-wheel::after {
    height: 198.4px; /* 248px * 0.8 */
    z-index: 2; /* Niższy priorytet niż przyciski i wheel-container */
}

/* Dostosowanie dla responsywnych rozdzielczości */
@media (min-width: 768px) {
    .container-wheel {
        transform: rotate(0deg) scale(0.7);
        transform-origin: center top;
        margin-top: -1.6rem;
        padding-top: 1.6rem;
        width: 100%;
        max-width: calc(71rem);
        margin-left: auto;
        margin-right: auto;
        z-index: 5;
    }
    .container-wheel::after {
        height: 8.6rem; /* 10.75rem * 0.8 */
        z-index: 2;
    }
}

/* Poprawka dla tła sekcji */
.background-main {
    z-index: 0; /* Tło poniżej .container-wheel */
}

/* Zapewnienie prawidłowego pozycjonowania wheel-container */
.wheel-container {
    position: relative;
    z-index: 3; /* Wyższy niż ::after, ale niższy niż przyciski */
}
/* Wyłącz transition podczas animacji */
.wheel-container {
  transition: none !important;
}
@media (max-width: 1023px) {
    .main-bg-image {
        height: 75vh;
        top: 34%;
    }
}
@media (max-width: 768px) {
    .main-bg-image {
        height: 106vh;
        top: 52%;
    }
}
@media (max-width: 1023px) {
    .container-wheel {
        margin-bottom: -155px;
    }
}
@media (max-width: 768px) {
    .container-wheel {
         margin-bottom: -228px;
    }
}
.wheel-pointer {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 60px;
    z-index: 10;
}
.top-9 {
    top: 9rem;
}
@media (min-width: 768px) {
    .md\:-top-36 {
        top: -9rem;
    }
}
.blur-sm{
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    --tw-blur: blur(4px);
}
.main-bg-images {
    pointer-events: none;
    position: absolute;
    top: -7.75rem;
    left: 0;
    z-index: -1;
    display: flex
;
    width: 100%;
    justify-content: center;
    overflow: hidden;
}
.pb-6 {
    padding-bottom: 1.5rem;
}
.min-w-\[12\.9375rem\] {
    min-width: 12.9375rem;
}
.w-\[12\.9375rem\] {
    width: 12.9375rem;
}
.h-\[12\.9375rem\] {
    height: 12.9375rem;
}
.-mb-2 {
    margin-bottom: -.5rem;
}
.backdrop-blur-lg {
    --tw-backdrop-blur: blur(16px);
}
.backdrop-blur-\[5px\], .backdrop-blur-lg {
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.shadow-shop-card, .shadow-support-chat {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-shop-card {
    --tw-shadow: 0px 4px 4px 0px rgba(0, 0, 0, .3);
    --tw-shadow-colored: 0px 4px 4px 0px var(--tw-shadow-color);
}
.py-2\.5 {
    padding-top: .625rem;
    padding-bottom: .625rem;
}
.bg-shop-secondary-500\/\[\.2\] {
    background-color: rgba(36, 80, 153, .2);
}
.rounded-2xl {
    border-radius: 1rem;
}
.bottom-4 {
    bottom: 1rem;
}
.mb-\[2px\] {
    margin-bottom: 2px;
}
.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}
.bg-shop-card-text {
    background-image: linear-gradient(180deg, #84cbff 21.46%, #ffe3ce 76.19%);
}
.shop-text-shadow--primary {
    text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 3px 0 hsla(0, 0%, 100%, .3), 0 5px 12px rgba(3, 14, 34, .5);
}
.text-\[1\.5rem\] {
    font-size: 1.5rem;
}
.blur-\[50px\], .blur-\[6px\] {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-\[50px\] {
    --tw-blur: blur(50px);
}
.bg-shop-shadow-primary\/\[\.5\] {
    background-color: rgba(110, 168, 255, .5);
}
.w-\[78\%\] {
    width: 78%;
}
.h-\[78\%\] {
    height: 78%;
}
.ml-1\.5 {
    margin-left: .375rem;
}
.text-shop-primary-50 {
    --tw-text-opacity: 1;
    color: rgb(191 205 255 / var(--tw-text-opacity, 1));
}
.text-2xs {
    font-size: .5rem;
}
.px-2\.5 {
    padding-left: .625rem;
    padding-right: .625rem;
}
.bg-shop-primary-100\/\[\.13\] {
    background-color: rgba(136, 144, 243, .13);
}
.border-shop-primary-600\/\[\.6\] {
    border-color: rgba(59, 65, 129, .6);
}
.pr-2 {
    padding-right: .5rem;
}
.h-\[4\.125rem\] {
    height: 4.125rem;
}
.text-primary-color-light-450 {
    --tw-text-opacity: 1;
    color: rgb(255 192 107 / var(--tw-text-opacity, 1));
}
.text-primary-color-dark {
    --tw-text-opacity: 1;
    color: rgb(89 56 10 / var(--tw-text-opacity, 1));
}
.pt-\[7px\] {
    padding-top: 7px;
}
.pb-\[6px\] {
    padding-bottom: 6px;
}
.px-\[8px\] {
    padding-left: 8px;
    padding-right: 8px;
}
.ml-\[6px\] {
    margin-left: 6px;
}
.before\:border-shop-primary-500\/\[\.35\]:before {
    content: var(--tw-content);
    border-color: rgb(55 56 86);
}
.before\:border-2:before {
    content: var(--tw-content);
}
.before\:rounded-3xl:before {
    content: var(--tw-content);
    border-radius: 1.5rem;
}
.before\:w-full:before {
    content: var(--tw-content);
    width: 100%;
    border-color: rgb(55 56 86);
}
.bg-shop-card {
    background-image: linear-gradient(139.13deg, rgba(45, 44, 64, 0.8) 13.23%, rgba(38, 37, 54, 0.8) 81.86%);
    transition: transform 0.2s ease-in-out;
}
@media (min-width: 768px) {
    .md\:leading-none {
        line-height: 1;
    }
}
@media (min-width: 768px) {
    .md\:text-\[3\.125rem\] {
        font-size: 3.125rem;
    }
}
.leading-\[36px\] {
    line-height: 36px;
}
.text-\[30px\] {
    font-size: 30px;
}
.bg-gold-gradient-text--sevenfold {
    background-image: linear-gradient(180deg, #ee8e57 18.75%, #fff8b9 45.98%, #ffd687 73.22%);
}
.t-shadow-gold--100 {
    text-shadow: 0 3px 0 rgba(133, 48, 22, .6), 0 5px 0 #e39145, 0 8px 12px rgba(3, 14, 34, .6), 0 10px 12px rgba(239, 147, 91, .2);
}
.pb-4 {
    padding-bottom: 1rem;
}
.border-primary-border-tint\/\[\.15\] {
    border-color: rgba(127, 128, 158, .15);
}
.border-b {
    border-bottom-width: 1px;
}
.text-main-200 {
    --tw-text-opacity: 1;
    color: rgb(182 185 212 / var(--tw-text-opacity, 1));
}
.pb-4\.5 {
    padding-bottom: 1.125rem;
}

.bg-main-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(44 45 65 / var(--tw-bg-opacity, 1));
}
.pl-3 {
    padding-left: .75rem;
}

.w-\[calc\(100\%-2\.75rem\)\] {
    width: calc(100% - 2.75rem);
}
.text-main-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-green-200 {
    --tw-text-opacity: 1;
    color: rgb(95 201 114 / var(--tw-text-opacity, 1));
}
.start-btn{
    background-image: linear-gradient(135deg, #fff2d2, #ffb762 85.94%);
    border-radius: 9999px;
    --tw-text-opacity: 1;
    color: rgb(89 56 10 / var(--tw-text-opacity, 1));
}
.first\:rounded-\[24px_4px_4px_24px\]:first-child {
    border-radius: 24px 4px 4px 24px;
}
.last\:rounded-\[4px_24px_24px_4px\]:last-child {
    border-radius: 4px 24px 24px 4px;
}
.text-add-100 {
    --tw-text-opacity: 1;
    color: rgb(221 217 255 / var(--tw-text-opacity, 1));
}
.\!text-main-600 {
    --tw-text-opacity: 1 !important;
    color: rgb(32 32 49 / var(--tw-text-opacity, 1)) !important;
}
.bg-tab-primary--default {
    background-image: linear-gradient(180deg, rgba(45, 50, 99, .5), rgba(64, 70, 130, .5));
}
.before\:bg-tab-primary--hover:before {
    content: var(--tw-content);
    background-image: linear-gradient(180deg, #2d3263, #404682);
}

.os-filter-button.active::after {
    content: '';
    background-image: linear-gradient(139.13deg, rgba(45, 44, 64, .8) 13.23%, rgba(38, 37, 54, .8) 81.86%);
    border: 1px solid rgb(55 56 86 / var(--tw-border-opacity, 1));
    opacity: 1 !important;
}
#popupQrCode {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 2rem;
}

#qrCodeContainer {
    display: inline-block;
    width: 200px;
    height: 200px;
    background: #ffffff; /* Białe tło dla kodu QR */
    padding: 10px; /* Opcjonalna ramka wokół kodu */
    border-radius: 8px; /* Zaokrąglone rogi */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Cień dla lepszej widoczności */
}
.survey-card-color-bg {
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}
@media (min-width: 1025px) {
    .survey-card-color-bg {
        border-radius: 0.8888888889rem;
    }
}

.survey-card-color-bg {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
}
.survey-card-color-bg .game-card__button {
    background-image: linear-gradient(139.13deg, rgba(45, 44, 64, .8) 13.23%, rgba(38, 37, 54, .8) 81.86%);
    border: 1px solid rgb(55 56 86 / var(--tw-border-opacity, 1));
}
.survey-card-color-bg .game-card__title {
    color: #90a7ff;
}
.survey-card-color-bg .game-card__nav {
    opacity: 1;
    visibility: unset;
    margin: 0 1.2rem;
}
.survey-card-color-bg:hover {
    transform: scale(1.05);
}

.survey-card-color-bg:hover {
    cursor: pointer;
}
.popup-win{
    background-color: rgb(57 47 44);
    border: 1px solid rgb(77 61 50);
    color: white;
    width: 60%;
}
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #191925; /* Tło */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Na wierzchu wszystkich elementów */
    transition: opacity .5s ease, visibility .5s ease;
}
.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 4px solid #FFF;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-bottom: 4px solid #ffcc78;
  border-left: 4px solid transparent;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
.loader-container.hiddens {
    opacity: 0;
    visibility: hidden;
}
.wheel-container-background{
    min-width: 100%;
    background: #000;
}
   .revert-tailwind {
     all: initial;
   }
   .revert-tailwind > * {
     all: revert;
}