.css-gad-1,.css2 {
    flex-shrink: 0
}

.css-4,.css-5,.css3 {
    display: flex
}

.css-4,.css1,.css3,.game-plug {
    position: relative
}

.css1 {
    width: var(--game-w-1);
    height: var(--game-h-1);
    aspect-ratio: 4/3;
    scroll-snap-align: start;
    border-radius: 9px
}

:root {
    --ddr-w: 167px;
    --ddr-h: 126px;
    --ddr-w: 170px;
    --ddr-h: 100px
}

.css-ads-2 {
    grid-area: adr2;
    justify-content: flex-end
}

.css-ads-u-1 {
    background: #141124;
    border-radius: 9px;
    grid-area: ad1
}

.css-4 {
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: flex-start
}

.css-5 {
    width: auto;
    height: auto;
    overflow: hidden;
    align-items: flex-start;
    justify-content: center
}

.game-ad-label {
    font-size: 9px;
    opacity: .5;
    transform: none
}

.css1 {
    width: var(--ddr-w);
    height: var(--ddr-h)
}

.css3 {
    grid-area: game;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scroll-margin-top: 100px
}

.css-ads-1 {
    grid-area: adr
}

.css-gad-1 {
    width: 300px;
    height: 600px
}

.css-gad-3 {
    width: 728px;
    height: 90px;
    flex-shrink: 0
}

.css-ads-2 {
    display: none
}

.css-ads-u-1 .css-5 {
    margin-left: 3px
}

.css-4.css-ads-1 {
    justify-content: flex-start
}

.css-6 {
    display: grid;
    gap: 10px;
    margin: 0 10px;
    justify-content: center;
    grid-auto-flow: dense;
    grid-auto-rows: minmax(var(--ddr-h),auto)
}

.css-ads-u-1 {
    grid-area: ad1;
    justify-content: center
}

.game-plug {
    width: 100%;
    margin: 0;
    height: 660px;
    overflow: hidden
}

@media only screen and (min-width: 1921px) {
    .css-6 {
        grid-template-columns:repeat(10,var(--ddr-w));
        grid-template-areas: ". . game game game game game game . ." ". . game game game game game game adr adr" ". . game game game game game game adr adr" ". . game game game game game game adr adr" ". . game game game game game game adr adr" ". . game game game game game game adr adr" ". . ad1 ad1 ad1 ad1 ad1 . adr adr" ". . . . . . . . adr2 adr2" ". . . . . . . . adr2 adr2" ". . . . . . . . adr2 adr2"
    }

    .css3 .game-plug {
        height: calc(var(--ddr-h) * 6 + 12px * 4);
        width: calc(var(--ddr-w) * 6 + 10px * 5)
    }

    .css-ads-2 {
        display: flex
    }

    .css-gad-1 {
        width: 300px;
        height: 600px
    }

    .css-gad-2 {
        width: 300px;
        height: 250px
    }
}

@media only screen and (max-width: 1920px) and (min-width:1865px) {
    .css-6 {
        grid-template-columns:repeat(10,var(--ddr-w));
        grid-template-areas: ". . game game game game game game adr adr" ". . game game game game game game adr adr" ". . game game game game game game adr adr" ". . game game game game game game adr adr" ". . game game game game game game adr adr" ". . game game game game game game adr adr" ". . ad1 ad1 ad1 ad1 ad1 . adr2 adr2" ". . . . . . . . adr2 adr2" ". . . . . . . . adr2 adr2" ". . . . . . . . . ."
    }

    .css3 {
        height: calc(var(--ddr-h) * 6 + 15px * 4);
        width: calc(var(--ddr-w) * 6 + 10px * 5)
    }

    .css-ads-2 {
        display: flex
    }

    .css-gad-1 {
        width: 300px;
        height: 600px
    }

    .css-gad-2 {
        width: 300px;
        height: 250px
    }
}

@media only screen and (max-width: 1864px) and (min-width:1687px) {
    .css-6 {
        grid-template-columns:repeat(auto-fill,minmax(var(--ddr-w),0fr));
        grid-template-areas: ". . game game game game game adr adr" ". . game game game game game adr adr" ". . game game game game game adr adr" ". . game game game game game adr adr" ". . game game game game game adr adr" ". . ad1 ad1 ad1 ad1 ad1 adr adr" ". . . . . . . adr2 adr2" ". . . . . . . adr2 adr2" ". . . . . . . adr2 adr2" ". . . . . . . . ."
    }

    :root {
        --ddr-w: 170px;
        --ddr-h: 100px
    }

    .css3 .game-plug {
        height: calc(var(--ddr-h) * 5 + 15px * 3);
        width: calc(var(--ddr-w) * 5 + 10px * 4)
    }

    .css-ads-2 {
        display: flex
    }

    .css-gad-1 {
        width: 300px;
        height: 600px
    }

    .css-gad-2 {
        width: 300px;
        height: 250px
    }
}

@media only screen and (max-width: 1686px) and (min-width:1508px) {
    :root {
        --ddr-w:170px;
        --ddr-h: 100px
    }

    .css-6 {
        grid-template-columns: repeat(auto-fill,minmax(var(--ddr-w),0fr));
        grid-template-areas: ". game game game game game adr adr" ". game game game game game adr adr" ". game game game game game adr adr" ". game game game game game adr adr" ". game game game game game adr adr" ". ad1 ad1 ad1 ad1 ad1 adr adr" ". . . . . . adr2 adr2" ". . . . . . adr2 adr2" ". . . . . . adr2 adr2" ". . . . . . . ."
    }

    .css3 .game-plug {
        height: calc(var(--ddr-h) * 5 + 15px * 3);
        width: calc(var(--ddr-w) * 5 + 10px * 4)
    }

    .css-5 {
        overflow: visible
    }

    .css-ads-2 {
        display: flex
    }

    .css-gad-1 {
        width: 300px;
        height: 600px
    }

    .css-gad-2 {
        width: 300px;
        height: 250px
    }
}

@media only screen and (max-width: 1507px) and (min-width:1390px) {
    :root {
        --ddr-w:155px;
        --ddr-h: 100px
    }

    .css-6 {
        grid-template-columns: repeat(8,var(--ddr-w));
        grid-template-areas: ". game game game game game adr adr" ". game game game game game adr adr" ". game game game game game adr adr" ". game game game game game adr adr" ". game game game game game adr adr" ". ad1 ad1 ad1 ad1 ad1 adr adr" ". . . . . . adr2 adr2" ". . . . . . adr2 adr2" ". . . . . . adr2 adr2" ". . . . . . . ." ". . . . . . . ."
    }

    .css3 .game-plug {
        height: calc(var(--ddr-h) * 5 + 15px * 3);
        width: calc(var(--ddr-w) * 5 + 10px * 4)
    }

    .css-ads-1,.css-ads-2 {
        display: flex
    }

    .css-gad-1 {
        width: 300px;
        height: 600px
    }

    .css-gad-2 {
        width: 300px;
        height: 250px
    }
}

@media only screen and (max-width: 1392px) and (min-width:1197px) {
    .css3 .game-plug,.game-block.play-game {
        width:calc(var(--ddr-w) * 5 + 10px * 4)
    }

    :root {
        --ddr-w: 153px;
        --ddr-h: 80px
    }

    .css-6 {
        grid-template-columns: repeat(7,var(--ddr-w));
        grid-template-areas: "game game game game game adr2 adr2" "game game game game game adr2 adr2" "game game game game game adr2 adr2" "game game game game game adr adr" "ad1 ad1 ad1 ad1 ad1 adr adr" ". . . . . adr adr" ". . . . . adr adr" ". . . . . adr adr" ". . . . . adr adr" ". . . . . . ."
    }

    .css3 .game-plug {
        height: calc(var(--ddr-h) * 5 + 15px * 3)
    }

    .game-block.play-game {
        height: calc(var(--ddr-h) * 5 + 20px * 3)
    }

    .css-ads-1,.css-ads-2 {
        display: flex
    }

    .css-gad-1 {
        width: 300px;
        height: 600px;
        flex-shrink: 0
    }

    .css-gad-2 {
        width: 300px;
        height: 250px;
        flex-shrink: 0
    }
}

@media only screen and (max-width: 1196px) and (min-width:1038px) {
    :root {
        --ddr-w:153px;
        --ddr-h: 80px
    }

    .css-6 {
        grid-template-columns: repeat(6,var(--ddr-w));
        grid-template-areas: "game game game game game ." "game game game game game ." "game game game game game ." "game game game game game ." "game game game game game ." "ad1 ad1 ad1 ad1 ad1 ." ". . . . . ." ". . . .  adr adr" ". . . .  adr adr" ". . . .  adr adr" ". . . .  adr adr" ". . . .  adr adr" ". . . .  adr adr" ". . . .  adr adr"
    }

    .css3 .game-plug {
        height: calc(var(--ddr-h) * 5 + 20px * 2);
        width: calc(var(--ddr-w) * 5 + 13px * 3)
    }

    .css-gad-2 {
        width: 300px;
        height: 600px;
        flex-shrink: 0
    }
}

@media only screen and (max-width: 1037px) and (min-width:896px) {
    :root {
        --ddr-w:153px;
        --ddr-h: 80px
    }

    .css-6 {
        grid-template-columns: repeat(5,var(--ddr-w));
        grid-template-areas: "game game game game game" "game game game game game" "game game game game game" "game game game game game" "game game game game game" ". . . . . " ". . .  adr adr" ". . .  adr adr" ". . .  adr adr" ". . .  adr adr" ". . .  adr adr" ". . .  adr adr" ". . .  adr adr"
    }

    .css3 .game-plug {
        height: calc(var(--ddr-h) * 5 + 20px * 2);
        width: calc(var(--ddr-w) * 5 + 15px * 3)
    }

    .css-ads-u-1 {
        display: none
    }

    .css-gad-2 {
        width: 300px;
        height: 600px;
        flex-shrink: 0
    }
}

@media only screen and (max-width: 895px) {
    :root {
        --ddr-w:180px;
        --ddr-h: 90px
    }

    .css-6 {
        grid-template-columns: repeat(3,var(--ddr-w));
        grid-template-areas: "game game game" "game game game" "game game game" ". . ." ". . ." ". . ."
    }

    .css3 {
        min-height: calc(var(--ddr-h) * 3 + 30px * 3);
        min-width: calc(var(--ddr-w) * 3 + 10px * 3)
    }

    .game-plug {
        height: calc(var(--ddr-h) * 3 + 30px * 3)
    }

    .css-ads-1,.css-ads-2,.css-ads-u-1 {
        display: none
    }
}

.butlist {
    display: none;
    position: absolute;
    z-index: 1;
    height: 38px;
    margin-right: 12px;
    bottom: 5px;
    border-radius: 10px;
    background: #141124;
    right: 1px
}

.gamep,.play_svg,.rate svg,.tooltip {
    position: relative
}

.tooltip {
    display: inline-block
}

.tooltip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 5px);
    border: 5px solid transparent;
    border-top-color: #2e1b3e
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 15px);
    padding: 8px 15px;
    background-color: #2e1b3e;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    width: max-content
}

.tooltip:hover::after,.tooltip:hover::before {
    opacity: 1;
    visibility: visible;
    font-size: 11px;
    font-weight: 400
}

.rate {
    margin-top: 10px;
    font-size: 14px
}

.rate svg {
    margin-right: 10px;
    line-height: 20px;
    top: -2px
}

.play_svg {
    top: -1px;
    width: 22px;
    height: 22px;
    fill: #15002f
}

.gamep {
    background: #340b55;
    overflow: hidden
}

.gamep::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 300%;
    height: 100%;
    background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 100%);
    animation: 2s infinite shimmer2
}

@keyframes shimmer2 {
    0% {
        left: -150%
    }

    100% {
        left: 100%
    }
}

.age {
    position: absolute;
    bottom: 15px;
    right: 15px
}

.tooltip::after,.tooltip::before {
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden
}

.toppg {
    margin-top: 15px
}

hr {
    border: 0;
    height: 1px;
    background-color: #4f3f8d;
    box-shadow: 0 4px 6px rgba(0,0,0,.3)
}