/* ASI_GAMES_FULL_V1 */

#asi-game-control-guide-v1 {
    display: none !important;
}

.asi-game-start-controls-v2 {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin:5px 0 13px;
}

.asi-game-control-side-v2 {
    display:flex;
    align-items:center;
    gap:7px;
    color:#fff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.03em;
}

.asi-game-control-divider-v2 {
    width:1px;
    height:26px;
    background:rgba(255,255,255,.22);
}

.asi-game-touch-v2 {
    position:relative;
    width:32px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:21px;
    animation:asiTap 1.05s ease-in-out infinite;
}

.asi-game-touch-v2::after {
    content:'';
    position:absolute;
    width:21px;
    height:21px;
    border:1px solid rgba(255,255,255,.6);
    border-radius:50%;
    opacity:0;
    animation:asiTouchRing 1.05s ease-out infinite;
}

.asi-game-touch-v2[data-motion="drag"] {
    animation:asiDrag 1.35s ease-in-out infinite;
}

.asi-game-touch-v2[data-motion="swipe"] {
    animation:asiSwipe 1.2s ease-in-out infinite;
}

.asi-game-key-group-v2 {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:3px;
}

.asi-game-key-v2 {
    min-width:25px;
    height:25px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.4);
    border-bottom-width:3px;
    border-radius:6px;
    background:rgba(15,23,42,.65);
    color:#fff;
    font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;
    box-shadow:0 3px 8px rgba(0,0,0,.2);
}

#asi-game-speed-full-v1 {
    position:absolute;
    left:50%;
    top:18%;
    transform:translate(-50%,-50%);
    z-index:3;
    pointer-events:none;
    user-select:none;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:clamp(46px,15vw,90px);
    line-height:1;
    font-weight:1000;
    letter-spacing:-.08em;
    color:rgba(255,255,255,.055);
    text-shadow:0 0 30px rgba(255,255,255,.04);
    transition:
        color .18s ease,
        transform .18s ease;
}

#asi-game-speed-full-v1.asi-speed-burst {
    color:rgba(255,255,255,.32);
    transform:translate(-50%,-50%) scale(1.18);
    text-shadow:0 0 30px rgba(34,211,238,.35);
}

@keyframes asiTap {
    0%,100% { transform:translateY(-3px) scale(1); }
    50% { transform:translateY(4px) scale(.9); }
}

@keyframes asiTouchRing {
    0%,35% { opacity:0; transform:scale(.4); }
    55% { opacity:.75; transform:scale(.7); }
    100% { opacity:0; transform:scale(1.4); }
}

@keyframes asiDrag {
    0%,100% { transform:translateX(-8px); }
    50% { transform:translateX(8px); }
}

@keyframes asiSwipe {
    0%,100% { transform:translateY(7px); }
    50% { transform:translateY(-7px); }
}

@media(max-width:370px) {
    .asi-game-start-controls-v2 {
        gap:7px;
    }

    .asi-game-control-side-v2 {
        gap:4px;
        font-size:9px;
    }

    .asi-game-key-v2 {
        min-width:22px;
        height:23px;
        padding:0 4px;
        font-size:8px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .asi-game-touch-v2,
    .asi-game-touch-v2::after {
        animation:none !important;
    }
}


/* ============================================================
   ASI_ARCADE_CARD_GALLERY_V1

   Fixed-height game gallery.
   More games do not make the public profile endlessly taller.
   ============================================================ */

#arcade-vertical-list {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px !important;

    max-height:430px;
    overflow-y:auto;
    overflow-x:hidden;

    padding:2px 3px 8px;

    scrollbar-width:thin;
    scrollbar-color:
        rgba(168,85,247,.45)
        transparent;

    overscroll-behavior:contain;
}


#arcade-vertical-list.hidden {
    display:none !important;
}


#arcade-vertical-list::-webkit-scrollbar {
    width:5px;
}


#arcade-vertical-list::-webkit-scrollbar-track {
    background:transparent;
}


#arcade-vertical-list::-webkit-scrollbar-thumb {
    background:rgba(168,85,247,.45);
    border-radius:999px;
}


/*
 * GAME CARD
 */

#arcade-vertical-list > .glass-panel {
    position:relative;

    min-width:0;
    min-height:190px;

    padding:9px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;

    gap:8px;

    border-radius:18px !important;

    overflow:hidden;

    background:
        linear-gradient(
            155deg,
            rgba(30,41,59,.88),
            rgba(15,23,42,.92)
        );

    border:
        1px solid
        rgba(168,85,247,.25) !important;

    box-shadow:
        0 8px 24px rgba(2,6,23,.24);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


#arcade-vertical-list > .glass-panel:active {
    transform:scale(.975);
}


@media (hover:hover) {

    #arcade-vertical-list > .glass-panel:hover {
        transform:translateY(-2px);

        border-color:
            rgba(168,85,247,.65) !important;

        box-shadow:
            0 12px 30px rgba(2,6,23,.38),
            0 0 18px rgba(168,85,247,.09);
    }
}


/*
 * Existing card's main content container.
 */

#arcade-vertical-list
>
.glass-panel
>
div:first-child {

    width:100%;

    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;

    gap:8px !important;
}


/*
 * THE GAME SCREEN
 *
 * This reuses the existing icon container.
 */

#arcade-vertical-list
>
.glass-panel
>
div:first-child
>
div:first-child {

    width:100% !important;
    height:105px !important;

    flex:none !important;

    border-radius:13px !important;

    position:relative;

    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;

    border:
        1px solid
        rgba(148,163,184,.22) !important;

    box-shadow:
        inset 0 0 28px rgba(2,6,23,.42),
        0 4px 14px rgba(2,6,23,.24);
}


/*
 * Screen grid.
 */

#arcade-vertical-list
>
.glass-panel
>
div:first-child
>
div:first-child::before {

    content:'';

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        18px 18px;

    opacity:.7;

    pointer-events:none;
}


/*
 * Very subtle screen sheen / scan.
 */

#arcade-vertical-list
>
.glass-panel
>
div:first-child
>
div:first-child::after {

    content:'';

    position:absolute;

    left:0;
    right:0;

    height:25%;

    top:-30%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.06),
            transparent
        );

    animation:
        asiArcadeScreenScanV1
        4.6s linear infinite;

    pointer-events:none;
}


@keyframes asiArcadeScreenScanV1 {

    from {
        top:-30%;
    }

    to {
        top:110%;
    }
}


/*
 * Existing game icon becomes screen object.
 */

#arcade-vertical-list
>
.glass-panel
>
div:first-child
>
div:first-child
>
i {

    font-size:29px !important;

    filter:
        drop-shadow(
            0 0 12px
            currentColor
        );

    animation:
        asiArcadeObjectFloatV1
        2.3s ease-in-out infinite;

    z-index:3;
}


@keyframes asiArcadeObjectFloatV1 {

    0%,100% {
        transform:
            translateY(2px)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-5px)
            rotate(2deg);
    }
}


/*
 * Text beneath screen.
 */

#arcade-vertical-list
>
.glass-panel
>
div:first-child
>
div:nth-child(2) {

    width:100%;
    min-width:0;
}


#arcade-vertical-list
>
.glass-panel
>
div:first-child
>
div:nth-child(2)
>
div:first-child {

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:5px !important;
}


#arcade-vertical-list h4 {

    font-size:12px !important;

    font-weight:800 !important;

    color:#f8fafc !important;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


#arcade-vertical-list p {

    font-size:9px !important;

    line-height:1.35 !important;

    color:#94a3b8 !important;

    display:-webkit-box;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;

    min-height:24px;
}


/*
 * ENDLESS / personal-best badge.
 */

#arcade-vertical-list
[id^="game-card-best-"] {

    max-width:74px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:7px !important;

    padding:
        2px 6px !important;
}


/*
 * Existing right-side Play icon becomes the bottom card footer.
 */

#arcade-vertical-list
>
.glass-panel
>
div:last-child {

    position:absolute;

    right:9px;
    bottom:8px;

    width:25px;
    height:25px;

    padding:0 !important;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:8px;

    color:#d8b4fe !important;

    background:
        rgba(168,85,247,.13);

    border:
        1px solid
        rgba(168,85,247,.22);
}


/*
 * Add tiny gamepad mark without adding HTML.
 */

#arcade-vertical-list
>
.glass-panel
>
div:last-child::before {

    content:'🎮';

    position:absolute;

    right:30px;

    font-size:10px;

    opacity:.55;
}


/*
 * Small phones remain two-column because that keeps the
 * arcade compact, but reduce screen/card dimensions slightly.
 */

@media (max-width:370px) {

    #arcade-vertical-list {
        gap:7px !important;

        max-height:390px;
    }


    #arcade-vertical-list > .glass-panel {

        min-height:172px;

        padding:7px !important;
    }


    #arcade-vertical-list
    >
    .glass-panel
    >
    div:first-child
    >
    div:first-child {

        height:91px !important;
    }


    #arcade-vertical-list
    >
    .glass-panel
    >
    div:first-child
    >
    div:first-child
    >
    i {

        font-size:25px !important;
    }
}


@media (prefers-reduced-motion:reduce) {

    #arcade-vertical-list
    >
    .glass-panel
    >
    div:first-child
    >
    div:first-child::after,

    #arcade-vertical-list
    >
    .glass-panel
    >
    div:first-child
    >
    div:first-child
    >
    i {

        animation:none !important;
    }
}



/* ============================================================
   ASI_ARCADE_HORIZONTAL_V3

   Horizontal mobile carousel.
   Current card ~78%, next card visibly peeks into view.
   ============================================================ */

#arcade-vertical-list {
    display:flex !important;
    flex-direction:row !important;
    align-items:stretch !important;

    width:100% !important;

    gap:10px !important;

    max-height:none !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:
        2px
        2px
        10px
        2px !important;

    scroll-snap-type:x mandatory;
    scroll-padding-left:2px;

    -webkit-overflow-scrolling:touch;

    overscroll-behavior-x:contain;

    scrollbar-width:none;
}


#arcade-vertical-list.hidden {
    display:none !important;
}


#arcade-vertical-list::-webkit-scrollbar {
    display:none;
}


#arcade-vertical-list > .glass-panel {
    flex:
        0
        0
        78% !important;

    width:
        78% !important;

    min-width:
        78% !important;

    max-width:
        78% !important;

    min-height:
        205px !important;

    scroll-snap-align:start;
}


/*
 * Screen section of each game card.
 */

#arcade-vertical-list
>
.glass-panel
>
div:first-child
>
div:first-child {

    height:
        120px !important;
}


/*
 * Let the next card clearly indicate that the carousel continues.
 */

#arcade-vertical-list > .glass-panel:last-child {
    margin-right:
        22% !important;
}


@media(max-width:370px) {

    #arcade-vertical-list {
        gap:
            8px !important;
    }


    #arcade-vertical-list > .glass-panel {

        flex-basis:
            77% !important;

        width:
            77% !important;

        min-width:
            77% !important;

        max-width:
            77% !important;

        min-height:
            188px !important;
    }


    #arcade-vertical-list
    >
    .glass-panel
    >
    div:first-child
    >
    div:first-child {

        height:
            105px !important;
    }
}



/* ============================================================
   ASI_ARCADE_HORIZONTAL_FORCE_V1
   Final arcade layout authority.
   ============================================================ */

#arcade-vertical-list {
    display:flex !important;
    flex-flow:row nowrap !important;
    grid-template-columns:none !important;

    width:100% !important;

    overflow-x:scroll !important;
    overflow-y:hidden !important;

    gap:10px !important;

    max-height:none !important;

    padding:2px 2px 10px 2px !important;

    scroll-snap-type:x mandatory !important;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;
}


#arcade-vertical-list::-webkit-scrollbar {
    display:none !important;
}


#arcade-vertical-list.hidden {
    display:none !important;
}


#arcade-vertical-list > .glass-panel {
    display:flex !important;

    flex:
        0 0
        78% !important;

    width:
        78% !important;

    min-width:
        78% !important;

    max-width:
        78% !important;

    scroll-snap-align:start !important;
}


/*
 * Never allow the former 2-column grid rules to win.
 */
#arcade-vertical-list.grid,
#arcade-vertical-list.grid-cols-2 {
    display:flex !important;
    grid-template-columns:none !important;
}


/*
 * Only the new external speed display may be visible.
 */

#asi-game-speed-v1 {
    display:none !important;
}


#asi-game-speed-full-v1 {
    display:block !important;
}


@media(max-width:370px) {

    #arcade-vertical-list > .glass-panel {

        flex-basis:
            77% !important;

        width:
            77% !important;

        min-width:
            77% !important;

        max-width:
            77% !important;
    }
}



/* ============================================================
   ASI_ARCADE_SCROLLBAR_V1

   Clean horizontal arcade:
   - cards provide their own surface
   - no carousel background
   - no shadow beneath cards
   - persistent horizontal scrollbar below
   ============================================================ */

#arcade-vertical-list {
    background:
        transparent !important;

    background-color:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;

    border-radius:
        0 !important;

    /*
     * Native scrollbar hidden because ASI uses its own
     * persistent scrollbar below.
     */

    scrollbar-width:
        none !important;

    padding-bottom:
        4px !important;
}


#arcade-vertical-list::-webkit-scrollbar {
    display:
        none !important;
}


/*
 * Cards themselves remain the entire visible surface.
 * No shadow spilling underneath into the scrollbar area.
 */

#arcade-vertical-list > .glass-panel {
    box-shadow:
        none !important;

    margin-bottom:
        0 !important;
}


/*
 * Persistent ASI horizontal scrollbar.
 */

#asi-arcade-scrollbar-v1 {
    position:
        relative;

    width:
        100%;

    height:
        5px;

    margin:
        6px 0 1px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        rgba(168,85,247,.10);

    user-select:
        none;

    touch-action:
        none;
}


#asi-arcade-scrollbar-thumb-v1 {
    position:
        absolute;

    left:
        0;

    top:
        0;

    height:
        100%;

    width:
        25%;

    border-radius:
        inherit;

    background:
        rgba(168,85,247,.55);

    box-shadow:
        none;

    transform:
        translateX(0);

    transition:
        background .15s ease;
}


#asi-arcade-scrollbar-v1:hover
#asi-arcade-scrollbar-thumb-v1 {

    background:
        rgba(168,85,247,.78);
}


@media(max-width:370px) {

    #asi-arcade-scrollbar-v1 {
        height:
            4px;

        margin-top:
            5px;
    }
}



/* ============================================================
   ASI_ARCADE_SCROLLBAR_V2
   Clearly visible horizontal arcade scrollbar.
   ============================================================ */

#arcade-vertical-list {
    cursor:grab !important;
    user-select:none !important;
}


#arcade-vertical-list.asi-arcade-dragging-v1 {
    cursor:grabbing !important;

    scroll-snap-type:
        none !important;
}


#arcade-vertical-list img,
#arcade-vertical-list i,
#arcade-vertical-list svg {
    pointer-events:none;
}


#asi-arcade-scrollbar-v1 {
    display:block !important;

    position:relative !important;

    width:calc(100% - 4px) !important;

    height:7px !important;

    margin:
        8px
        2px
        2px !important;

    border-radius:
        999px !important;

    overflow:hidden !important;

    background:
        rgba(168,85,247,.18) !important;

    border:
        1px solid
        rgba(168,85,247,.14) !important;

    opacity:
        1 !important;

    visibility:
        visible !important;
}


#asi-arcade-scrollbar-thumb-v1 {
    display:block !important;

    position:absolute !important;

    left:0 !important;
    top:0 !important;

    height:100% !important;

    min-width:36px !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            90deg,
            rgba(168,85,247,.82),
            rgba(217,70,239,.82)
        ) !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    box-shadow:
        none !important;

    will-change:
        transform,width;
}


@media(hover:hover) {

    #asi-arcade-scrollbar-v1:hover
    #asi-arcade-scrollbar-thumb-v1 {

        background:
            linear-gradient(
                90deg,
                rgba(168,85,247,1),
                rgba(217,70,239,1)
            ) !important;
    }
}


@media(max-width:370px) {

    #asi-arcade-scrollbar-v1 {
        height:
            6px !important;

        margin-top:
            7px !important;
    }
}



/* ============================================================
   ASI_ARCADE_HIDE_SCROLLBAR_V1

   Carousel remains horizontally draggable/swipeable.
   Only the visual scrollbar is removed.
   ============================================================ */

#arcade-vertical-list {
    scrollbar-width:
        none !important;

    -ms-overflow-style:
        none !important;
}


#arcade-vertical-list::-webkit-scrollbar {
    display:
        none !important;

    width:
        0 !important;

    height:
        0 !important;
}


/*
 * Hide custom ASI scrollbar added previously.
 * Desktop drag and mobile swipe remain active.
 */

#asi-arcade-scrollbar-v1,
#asi-arcade-scrollbar-thumb-v1 {
    display:
        none !important;

    visibility:
        hidden !important;

    opacity:
        0 !important;

    width:
        0 !important;

    height:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;
}


/*
 * Keep carousel itself clean.
 */

#arcade-vertical-list {
    background:
        transparent !important;

    box-shadow:
        none !important;

    border:
        none !important;
}