*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    height:100vh;
    overflow:hidden;

    background:transparent;

    font-family:Inter,Arial,sans-serif;

}


/* =========================
   PREVIEW AREA
========================= */


.stage{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    padding-right:30px;

}



.preview{

    height:100%;

    display:flex;

    gap:18px;

}



/* =========================
   COLUMNS
========================= */


.column{

    width:230px;

    overflow:hidden;

    mask-image:
    linear-gradient(
        to bottom,
        transparent,
        black 14%,
        black 86%,
        transparent
    );

}



.track{

    display:flex;

    flex-direction:column;

    gap:18px;

}



.up .track{

    animation:up 30s linear infinite;

}



.down .track{

    animation:down 34s linear infinite;

}



.column:hover .track{

    animation-play-state:paused;

}



/* =========================
   GAME CARDS
========================= */


.game{

    height:150px;

    border-radius:18px;

    background:#111;

    border:

    1px solid rgba(255,255,255,.08);


    display:flex;

    align-items:flex-end;

    justify-content:center;


    position:relative;

    overflow:hidden;


    transition:

    transform .25s cubic-bezier(.22,1,.36,1),

    border-color .25s ease,

    box-shadow .25s ease;

}



.game.active{

    transform:

    translateY(-6px)

    scale(1.035);

}



.game img{


    position:absolute;

    inset:0;


    width:100%;

    height:100%;


    object-fit:cover;


    transition:

    transform .3s ease,

    filter .3s ease;

}



.game:hover img{

    transform:scale(1.07);

}



/* dark overlay */

.game::after{

    content:"";

    position:absolute;

    inset:0;


    background:

    linear-gradient(

        to top,

        rgba(0,0,0,.85),

        rgba(0,0,0,.35) 45%,

        transparent 75%

    );


}



/* hover shine */

.game::before{

    content:"";

    position:absolute;

    inset:0;


    background:

    radial-gradient(

        circle at 50% 0%,

        rgba(255,255,255,.12),

        transparent 70%

    );


    opacity:0;

    transition:.25s ease;


    z-index:1;

}



.game:hover::before{

    opacity:1;

}



.game:hover{

    border-color:

    rgba(255,255,255,.22);


    box-shadow:

    0 18px 35px rgba(0,0,0,.45);

}



/* =========================
   TITLES
========================= */


.game span{

    position:relative;

    z-index:2;


    padding:12px 10px;


    font-size:13.5px;


    color:white;


    font-weight:600;


    letter-spacing:-.01em;


    text-shadow:

    0 2px 5px rgba(0,0,0,.8);

}



/* =========================
   ANIMATIONS
========================= */


@keyframes up{


    from{

        transform:translateY(0);

    }


    to{

        transform:translateY(-50%);

    }

}



@keyframes down{


    from{

        transform:translateY(-50%);

    }


    to{

        transform:translateY(0);

    }

}