/* COMMON */
.lobby-bg,
.lobby-bg-center {
    padding-top: 40px;
    min-height: calc(100vh - 40px);
    background: url('/images/lobby/lobby-stars-bg.jpg') repeat-y;
    background-size: 100% auto;
    animation: lobby-bg-ani 10s ease-in-out infinite;
}

.lobby-bg-center {
    display: flex;
    align-items: center;
}

@keyframes lobby-bg-ani {
    0% { background-position: 0 0; }
    50% { background-position: 0 -30px; }
    100% { background-position: 0 0; }
}

.lobby-window-title-wrapper {
    display: flex;
    justify-content: center;
    margin: 1.3rem 0 1rem;
}
.lobby-window-title {
    font-size: 3rem;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

/* END OF COMMON */


/* CASINO */

.lobby-wrapper {
    display: flex;
    align-items: center;
    margin: 5rem 6rem;
    perspective: 500px;
}

body[dir='rtl'] .lobby-wrapper {
    flex-direction: row-reverse;
}

.lobby-element {
    position: relative;
    margin: 1em;
    border-radius: 15px;
    cursor: pointer;
    animation: lobby-element-float 10s ease-in-out infinite;
}

@keyframes lobby-element-float {
    0% { margin-top: 0px; }
    50% { margin-top: 15px; }
    100% { margin-top: 0px; }
}

.lobby-element:first-child {
    transform: rotateY(30deg) scaleX(0.7);
    transform-origin: left;
}

.lobby-element:first-child + div {
    transform: translateZ(-200px);
}

.lobby-element:last-child {
    transform: rotateY(-30deg) scaleX(0.7);
    transform-origin: right;
}

.lobby-element-img {
    position: relative;
}
.lobby-element img {
    width: 100%;
    border-radius: 13px;
    vertical-align: top;
}

.lobby-element-name {
    display: block;
    width: 100%;
    font-size: 1em;
    color: #fff;
    text-align: center;
    padding: 0.5em 0;
}

.lobby-logo {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    
}

.logo-ezugi {
    background: url('/images/lobby/casino_ezugi_logo.png') no-repeat;
    background-size: 200px;
    width: 200px;
    height: 90px;
}

.logo-luckystreak {
    background: url('/images/lobby/casino_luckystreak_logo.png') no-repeat;
    background-size: 300px;
    width: 300px;
    height: 90px;
}

.lobby-element:hover {
    transform: rotateY(0deg) translateZ(0px)!important;
    transition: 0.25s;
    box-shadow: 0 0 80px 10px #00c3ff;
    border: 2px solid #00c3ff;
}

.lobby-element:hover > .lobby-logo {
    transform: translateX(-50%) scale(1.4);
    transition: 0.5s;
}

/* END OF CASINO */

/* SLOTS */

.lobby-wrapper-slots {
    display: flex;
    align-items: center;
    margin: 4.5rem 6rem;
    perspective: 900px;
    flex-wrap: wrap;
    justify-content: center;
}

.lobby-element-slots {
    position: relative;
    margin: 1em;
    border-radius: 5px;
    /* border: 2px solid #008ab5; */
    border: 2px solid #003748;
    cursor: pointer;
    cursor: pointer;}

.lobby-element-slots:hover {
    transform: scale(1.1);
    transition: 0.25s;
    border: 2px solid #00c3ff;
    box-shadow: 0 0 50px 10px #00c3ff;
    z-index: 2;
}

.lobby-element-slots img {
    width: 25rem;
    height: 13.75rem;
    vertical-align: top;
    border-radius: 3px;
}


.lobby-slot-games-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 5rem;
}

.lobby-element-slot-game,
.lobby-element-casino-game {
    margin: 0.5em;
    border: 2px solid transparent;
    cursor: pointer;
}

.lobby-element-slot-game img,
.lobby-element-casino-game img  {
    position: relative;
    display: block;
    border: 2px solid transparent;
    background-color: #000;
}

.lobby-element-casino-game img  {
    width: 18rem; 
    height: 13.5rem;
}

.lobby-element-slot-game img  {
    width: 287px;
    height: 193px;
}

.lobby-element-slot-game:hover img,
.lobby-element-casino-game:hover img {
    animation: lobby-element-slot-ani 5s linear 1;
    border: 2px solid #00c3ff;
    box-shadow: 0 0 80px 10px #00c3ff;
    transform: scale(1.2);
    transition: 0.25s;
    z-index: 2;
}

.lobby-element-casino-game:hover .lobby-element-name {
    position: relative;
    width: unset;
    padding: 0.5em 2em;
    z-index: 2;
    background: linear-gradient(to right, #0000, #000,#0000);
    transform: rotateX(1turn) scale(1.2) translateY(-1rem);
    transform-origin: top;
    white-space: nowrap;
    transition: 0.5s;
}

/* END OF SLOTS */