/* ==========================================
   WELCOME SCREEN
========================================== */

.welcome-screen{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.96);

    backdrop-filter:blur(12px);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

/* ==========================================
   CARD
========================================== */

.welcome-card{

   position:relative;

   z-index:2;

    width:1000px;

    max-width:95%;

    min-height:620px;

    display:grid;

    grid-template-columns:1fr 1fr;

    background:#182235;

    border-radius:24px;

    overflow:hidden;

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

    box-shadow:0 30px 80px rgba(0,0,0,.45);

}

/* ==========================================
   LEFT PANEL
========================================== */

.welcome-left{

    background:linear-gradient(
        180deg,
        #2563eb,
        #1d4ed8
    );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:50px;

    text-align:center;

}

.welcome-logo{

    width:110px;

    margin-bottom:20px;

}

.welcome-left h1{

    color:white;

    font-size:42px;

    margin-top:15px;

}

.welcome-left p{

    color:#dbeafe;

    margin:15px 0 35px;

    font-size:18px;

}

/* ==========================================
   FEATURED GAME
========================================== */

.featured-game{

    width:100%;

    max-width:360px;

    border-radius:18px;

    box-shadow:0 20px 40px rgba(0,0,0,.35);

    transition:
        opacity .45s ease,
        transform .45s ease;

    opacity:1;

    transform:scale(1);

}

.featured-game.fade{

    opacity:0;

    transform:scale(.96);

}

.featured-title{

    color:white;

    margin-top:20px;

    font-size:26px;

    font-weight:700;

    transition:
        opacity .35s ease,
        transform .35s ease;

}

.featured-title.fade{

    opacity:0;

    transform:translateY(10px);

}

/* ==========================================
   RIGHT PANEL
========================================== */

.welcome-right{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:60px;

}

.welcome-right h2{

    color:white;

    font-size:34px;

    margin-bottom:35px;

}

/* ==========================================
   BUTTONS
========================================== */

.welcome-btn,
.oauth-btn,
.guest-btn{

    width:100%;

    padding:15px;

    margin-top:12px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:
        transform .25s,
        box-shadow .25s,
        background .25s;

}

.welcome-btn:hover,
.oauth-btn:hover,
.guest-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(37,99,235,.30);

}

.primary{

    background:#2563eb;

    color:white;

}

.primary:hover{

    background:#3b82f6;

}

.secondary{

    background:#334155;

    color:white;

}

.secondary:hover{

    background:#475569;

}

.oauth-btn{

    background:#1e293b;

    color:white;

}

.oauth-btn:hover{

    background:#334155;

}

.guest-btn{

    background:transparent;

    color:#60a5fa;

}

.guest-btn:hover{

    background:rgba(96,165,250,.10);

}

/* ==========================================
   DIVIDER
========================================== */

.welcome-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    margin:28px 0;

    color:#94a3b8;

    font-size:14px;

    font-weight:600;

}

.welcome-divider::before,
.welcome-divider::after{

    content:"";

    flex:1;

    height:1px;

    background:rgba(255,255,255,.08);

}

.welcome-divider span{

    padding:0 15px;

}

/* ==========================================
   ANIMATION
========================================== */

.welcome-card{

    animation:welcomeFade .6s ease;

}

@keyframes welcomeFade{

    from{

        opacity:0;

        transform:translateY(25px) scale(.96);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:900px){

    .welcome-card{

        grid-template-columns:1fr;

        width:95%;

        min-height:auto;

    }

    .welcome-left{

        display:none;

    }

    .welcome-right{

        padding:35px;

    }

    .welcome-right h2{

        text-align:center;

        font-size:30px;

    }

}

@media (max-width:500px){

    .welcome-right{

        padding:25px;

    }

    .welcome-right h2{

        font-size:26px;

    }

    .welcome-btn,
    .oauth-btn,
    .guest-btn{

        font-size:15px;

        padding:14px;

    }

}

/* ==========================================
   BACKGROUND
========================================== */

.welcome-background{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.welcome-background span{

    position:absolute;

    display:block;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(37,99,235,.12);

    filter:blur(60px);

    animation:float 18s infinite ease-in-out;

}

.welcome-background span:nth-child(1){

    top:-60px;
    left:-80px;

}

.welcome-background span:nth-child(2){

    top:15%;
    right:-120px;

    animation-duration:22s;

}

.welcome-background span:nth-child(3){

    bottom:-120px;
    left:10%;

    animation-duration:16s;

}

.welcome-background span:nth-child(4){

    bottom:15%;
    right:18%;

}

.welcome-background span:nth-child(5){

    top:45%;
    left:40%;

    animation-duration:24s;

}

.welcome-background span:nth-child(6){

    bottom:-70px;
    right:-80px;

}

@keyframes float{

    0%{

        transform:translateY(0) translateX(0);

    }

    50%{

        transform:translateY(-35px) translateX(20px);

    }

    100%{

        transform:translateY(0) translateX(0);

    }

}