* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    text-decoration: none;
}

@font-face {
    font-family: 'Inter Tight';
    src: url('/fonts/InterTight-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Inter Tight';
    src: url('/fonts/InterTight-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'instrument-font';
    src: url('/fonts/InstrumentSerif-Italic.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

:root {
    --background: #ffffff;
    --color-dark_black: #1b1d1e;
    --border-color: color-mix(in oklab, var(--color-dark_black) 10%, transparent);
    --blue_gradient: #d9f3fc;
    --yellow_gradient: #fdf1d3;
    --color-purple_blue: #4928fd;
}

a {
    text-decoration: none;
    color: #000;
}

body {
    background-color: var(--background);
    font-family: 'Inter Tight', sans-serif;
    color: #000;
}

::-webkit-scrollbar {
    display: none;
}

.instrument-font {
    font-family: 'instrument-font', serif;
}

main {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right,
            var(--blue_gradient),
            white,
            var(--yellow_gradient));
}

.main-section {
    width: 100%;
    height: 100%;
    max-width: 400px;
    background-color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    /* padding: 0px 16px; */
    overflow: hidden;
}



.ad-container {
    /* border-top: 1px solid var(--border-color); */
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    margin-bottom: 16px;
    align-items: center;
    /* display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; */
}

.ad-name {
    font-size: 10px;
    color: #88888873;
    letter-spacing: 3px;
    margin-bottom: 2px;
}

.main-div {
    position: relative;
    width: 100%;
    text-align: center;
    /* padding: 0px 16px; */
}

/* .main-section::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    z-index: -10;
    filter: blur(48px);
    background: white;
} */

.click_btn_option:hover .cat_img {
    filter: brightness(0) invert(1);

}

.cat_img {
    width: 20px;
    height: 20px;
    /* filter: brightness(0) invert(1); */
}

@media (max-width: 346px) {
    .cat_img {
        width: 15px;
        height: 15px;
    }
}

.play_btn_txt {
    display: flex;
    line-height: 18px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.play_btn_txt img {
    width: 28px;
    height: 28px;
}

.choose_game {
    background-color: white;
    margin-bottom: 16px;
    padding: 16px;
    width: 100%;
    border-radius: 15px;
    border: 1px solid rgba(27, 29, 30, 0.1);

}

.give-coin {
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 4px;
}

.redeem-coin {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

#coin {
    font-weight: 600;
}


.earn-coin-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    font-size: 14px;
    text-transform: uppercase;
    position: relative;

}

.earn-coin-btn button {
    cursor: pointer;
    background: var(--color-purple_blue);
    color: #fff;
    border: none;
    height: 42px;
    /* padding: 10px 0px; */
    height: 46px;
    font-family: 'Inter Tight', sans-serif;
    width: 100%;
    border-radius: 393px;
    border-color: rgba(27, 29, 30, 0.1);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    z-index: 1;

}

.earn-coin-btn button img {
    width: 24px;
    height: 24px;
}

.earn-coin-btn button::before,
.earn-coin-btn button::after,
.play::before,
.play::after {
    content: '';
    position: absolute;
    cursor: pointer;
    top: 0;
    left: -150%;
    height: 100%;
    width: 10%;
    background: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: shimmer 2s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

#earnCoinBtn img {
    transition: transform 0.5s ease;
}

#earnCoinBtn span {
    display: inline-block;
    transition: transform 0.5s ease;
}

.earn-coin-btn:hover #earnCoinBtn img {
    transform: translateX(140px);
}

.earn-coin-btn:hover #earnCoinBtn span {
    transform: translateX(-35px);
}

.ad-tag-earn {
    position: absolute;
    top: 0;
    right: -10px;
    color: #8a8e91;
    font-size: 10px;
    letter-spacing: 0px;
    text-transform: capitalize;
}

@keyframes shimmer {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

.section1 {
    padding: 10px 0px;
}

.section1 div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section1 h1 {
    font-size: 28px;
    font-weight: 500;
}

.section1 h1 span {
    display: block;
}

.choose-category {
    border: 1px solid rgba(27, 29, 30, 0.1);
    border-radius: 12px;
    padding: 16px;
    background-color: white;

}

.categories {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-top: 12px;
    gap: 12px;
}



.categories .cat {
    background-color: transparent;
    color: black;
    border: 1px solid var(--color-dark_black);
    border-radius: 100px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 14px;
    gap: 10px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}

.categories .cat:hover {
    background-color: var(--color-dark_black);
    transition: all 0.1s ease-in-out;
    color: #fff;

}

.content-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0px;
}

.user-content {
    display: flex;
    align-items: end;
    justify-content: center;
    flex-direction: column;
}

.game-section {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    padding: 16px 0px;
}

.game-card {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-color: white;
    /*background: linear-gradient(90deg,#cdeffb 0%, #ffffff 33.23%,  #ffffff 65.77%, #fdeecb 100%);
    */
    backdrop-filter: blur(200px);
    border: 1px solid rgba(27, 29, 30, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 16px;

}

/* .game-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
} */

.game-img {
    width: 100%;
    position: relative;
    aspect-ratio: 16/9;

}


.game-img img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    /* border-top-left-radius: 12px;
    border-top-right-radius: 12px; */

}

.game-content {
    /* padding: 0px 10px 10px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap: 4px; */
}

.game-name {
    text-align: left;
}

.game-name h2 {
    font-size: 16px;
    font-weight: 500;
    color: #1b1d1e;
}


.liveuser {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.4s ease-in-out;
}

.liveuser-dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #00ff73 0%, #007d32 100%);
    box-shadow: 0 0 6px #00ff73;
    animation: pulse 1.5s infinite;
}

.liveuser-number {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.2px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 6px #00ff73;
    }

    50% {
        transform: scale(1.3);
        box-shadow: 0 0 12px #00ff73;
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 6px #00ff73;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}





.cat-title {
    border: 1px solid var(--color-dark_black);
    background-color: white;
    margin: 10px 0px;
    padding: 16px 0px;
    border-radius: 12px;

}

.cat-title div {
    font-weight: 500;
}

/* .play{
    padding: 2px 0px;
    width: 100%;
}
.play-btn{
    background-color: var(--color-purple_blue);
    color: white;
    border: 1px solid var(--color-purple_blue);
    border-radius: 100px;
    padding: 10px 0px;
} */

.play {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-purple_blue);
    /*purple_blue*/
    color: white;
    font-weight: 500;
    border-radius: 9999px;
    border: 1px solid var(--color-purple_blue);
    padding: 8px 20px;
    width: 100%;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
    overflow: hidden;
    position: relative;
}

.click_btn1 {
    background-color: var(--color-purple_blue);
    width: 100%;
    letter-spacing: 1px;
    font-size: 14px;
    padding: 8px 20px;
    height: 46px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 600;
    color: white;
    border-radius: 9999px;
    border: none;
}

.resp_about_section {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 0px 16px;
}

.about_section {
    margin-top: 20px;
}

.about_section h1 {
    margin: auto;
    margin-bottom: 15px;
    color: #0009;
    font-size: 24px;
}

.about_section p {
    text-align: start;
    color: #1b1d1e99;
    font-size: 16px;
    margin-bottom: 10px;
}

.resp_footer {
    border: 1px solid #e5e7eb;
    width: 100%;
}

footer {
    padding: 7px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

footer a {
    color: black;
}

.play:hover {
    background-color: transparent;
    color: var(--color-purple_blue);
}

.play-btn {
    transition: transform 0.3s ease-in-out;
    text-align: start;
}


.play-icon {
    transition: transform 0.3s ease-in-out;
    display: flex;
}

.play:hover .play-btn {
    transform: translateX(200px);

}

.play:hover .play-icon {
    transform: translateX(-255px) rotate(45deg);

}

/* SVG Colors */
.rect {
    fill: white;
    transition: fill 0.1s ease-in-out;

}

.path1,
.path2 {
    stroke: #1b1d1e;
    transition: stroke 0.1s ease-in-out;
}

.play:hover .rect {
    fill: var(--color-purple_blue);
}

.play:hover .path1,
.play:hover .path2 {
    stroke: white;
}



.img-loader,
.img-loader::after {
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
}



.img-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 0;
    padding-top: 20%;
}

.img-loader::after {
    content: "";
    width: 100%;
    height: 100%;
    border: 5px solid #dcdddb;
    border-top-color: #48a8ff;
    border-radius: 50%;
    -webkit-animation: .75s ease-out infinite loading;
    animation: .75s ease-out infinite loading;
    box-sizing: border-box;
}

.popup {
    align-items: center;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.popup-data {
    background: #fff;
    padding: 20px 20px 20px;
    border-radius: 15px;
    text-align: center;
    max-width: 370px;
    width: 90%;
    position: relative;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.popup-data .oops-img {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: auto;
}

.popup-data .main-text {
    font-weight: bold;
    font-size: 16px;
    color: #222;
    margin: 50px 0 10px;
}

.popup-data .sub-text {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
}

.watch-btn-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.watch-btn {
    background: var(--color-purple_blue);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 393px;
    width: 100%;
    font-size: 14px;
    cursor: pointer;
    height: 46px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    z-index: 1;

}

.watch-btn::before, .watch-btn::after {

    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    height: 100%;
    width: 10%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
    animation: shimmer 2s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

.ad-tag {
    position: absolute;
    top: 0;
    right: -15px;
    color: #000;
    font-size: 10px;
    letter-spacing: 0px;
    text-transform: capitalize;
}

.popup-data .skip-btn {
    margin-top: 8px;
    background: none;
    border: none;
    color: #666;
    width: fit-content;
    margin: 8px auto 0px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
}


.toast-message {
    display: none;
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    color: #000;
    border: 1px solid white;
    box-shadow: 0 1px 2px #0000001a;
    padding: 12px 10px;
    border-radius: 8px;
    font-size: 15px;
    z-index: 9999;
    max-width: 90vw;
    width: max-content;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    text-align: center;
    text-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.toast-message.show {
    display: flex;
    animation: fadeOut 3s forwards;
}

@keyframes fadeOut {
    0%, 80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

@keyframes loading {
    0% {
        transform: rotate(0turn);
    }

    100% {
        transform: rotate(1turn);
    }
}



@media(max-width:500px) {
    .main-section {
        max-width: 500px;
    }



}

@media(max-width:500px) {
    .play:hover .play-btn {
        transform: translateX(250px);
    }

    .play:hover .play-icon {
        transform: translateX(-300px) rotate(45deg);
    }
}

@media(max-width:420px) {
    .play:hover .play-btn {
        transform: translateX(200px);

    }

    .play:hover .play-icon {
        transform: translateX(-250px) rotate(45deg);

    }
}

@media(max-width:400px) {
    .game-section {
        grid-template-columns: repeat(1, 1fr);
        gap: 12px;
    }

}



@media(max-width:370px) {
    .play:hover .play-btn {
        transform: translateX(160px);

    }

    .play:hover .play-icon {
        transform: translateX(-210px) rotate(45deg);

    }
}

@media(max-width:330px) {
    .play:hover .play-btn {
        transform: translateX(130px);
    }

    .play:hover .play-icon {
        transform: translateX(-180px) rotate(45deg);
    }
}

@media(max-width:300px) {
    .play:hover .play-btn {
        transform: translateX(100px);
    }

    .play:hover .play-icon {
        transform: translateX(-150px) rotate(45deg);

    }
}