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

body{
    min-height:100vh;
    overflow-x:hidden;
    font-family:Tahoma,sans-serif;

    background:
    radial-gradient(circle at top,
    #0f1c3f 0%,
    #081225 40%,
    #020617 100%);

    color:white;
}

/* ========================= */
/* APP */
/* ========================= */

.app{
    width:100%;
    position:relative;
    z-index:10;
}

/* ========================= */
/* TOP MENU */
/* ========================= */

.top-menu-container{
    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:10px 60px;

    background:
    rgba(10,15,30,.88);

    backdrop-filter:blur(14px);

    border-bottom:
    1px solid rgba(255,255,255,.05);

    z-index:999;
}

.topMenu{
    display:flex;
    gap:12px;

    overflow-x:auto;
    scrollbar-width:none;
}

.topMenu::-webkit-scrollbar{
    display:none;
}

.topMenu button{
    flex:1;
    min-width:190px;
    height:48px;

    border:none;
    border-radius:16px;

    background:
    linear-gradient(135deg,#22c55e,#16a34a);

    color:white;

    font-size:15px;
    font-weight:bold;

    cursor:pointer;

    transition:.25s;

    box-shadow:
    0 4px 20px rgba(34,197,94,.18);
}

.topMenu button:hover{
    transform:translateY(-2px);
    filter:brightness(1.05);
}

/* ========================= */
/* ARROWS */
/* ========================= */

.scroll-left,
.scroll-right{
    position:absolute;

    top:50%;
    transform:translateY(-50%);

    width:38px;
    height:38px;

    border:none;
    border-radius:50%;

    background:#111827;
    color:white;

    cursor:pointer;

    z-index:50;
}

.scroll-left{
    left:10px;
}

.scroll-right{
    right:10px;
}

/* ========================= */
/* MENU BUTTON */
/* ========================= */

.menu-btnv{
    position:fixed;

    top:18px;
    left:15px;

    width:48px;
    height:48px;

    border:none;
    border-radius:14px;

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

    color:white;

    font-size:24px;

    cursor:pointer;

    backdrop-filter:blur(12px);

    z-index:1001;
}

/* ========================= */
/* SIDE MENU */
/* ========================= */

.side-menu{
    position:fixed;

    top:0;
    left:-300px;

    width:280px;
    height:100%;

    background:#0f172a;

    transition:.3s;

    z-index:1000;

    padding:20px;

    box-shadow:
    10px 0 40px rgba(0,0,0,.45);
}

.side-menu.open{
    left:0;
}

.user-box{
    text-align:center;
    margin-bottom:30px;
}

.user-box img{
    width:85px;
    height:85px;

    border-radius:50%;

    border:3px solid #22c55e;
}

.side-menu a,
.side-menu button{
    display:block;

    width:100%;

    margin:10px 0;
    padding:14px;

    border:none;
    border-radius:16px;

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

    color:white;

    text-decoration:none;

    cursor:pointer;
}

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

.card-background{
    position:fixed;

    top:95px;
    left:18px;

    width:150px;

    padding:16px;

    border-radius:24px;

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

    backdrop-filter:blur(16px);

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

    text-align:center;

    z-index:100;

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

.card{
    width:70px;
    display:block;
    margin:auto;
}

.days_001{
    margin-top:12px;
}

#days_1{
    font-size:42px;
    font-weight:bold;

    color:#4ade80;
}

#button_ursalf{
    width:100%;

    margin-top:14px;
    padding:12px;

    border:none;
    border-radius:14px;

    background:
    linear-gradient(135deg,#3b82f6,#2563eb);

    color:white;

    font-size:14px;
    font-weight:bold;

    cursor:pointer;
}

/* ========================= */
/* HISTORY */
/* ========================= */

.history-box{
    position:fixed;

    top:95px;
    right:18px;

    width:150px;
    height:240px;

    border-radius:24px;

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

    backdrop-filter:blur(16px);

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

    overflow:hidden;

    z-index:100;
}

#j1{
    text-align:center;

    padding:18px;

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

    font-size:20px;
}

.history-content{
    height:170px;

    overflow-y:auto;

    padding:12px;

    font-size:14px;
}

/* ========================= */
/* SCENE */
/* ========================= */

.scene{
    position:relative;

    width:100%;
    max-width:1000px;

    margin:auto;

    padding-top:90px;
}

.platform{
    width:100%;

    aspect-ratio:16/9;

    background-image:url("base008.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center bottom;
}

/* ========================= */
/* CHARACTER */
/* ========================= */

.background_01{
    position:absolute;

    left:50%;
    bottom:25.5vw;

    transform:translateX(-50%);

    width:28vw;
    height:28vw;

    min-width:140px;
    min-height:140px;

    max-width:250px;
    max-height:250px;

    z-index:10;
}
@media (min-width:1280px){

    .background_01{
        bottom:19vw;
    }

}
@media (width:1280px){

    .background_01{
        bottom:20vw;
    }

}
@media (max-width:768px){

    .background_01{
        bottom:30vw;
    }

}
@media (width:768px){

    .background_01{
        bottom:25vw;
    }

}



.background_1,
.background{
    position:absolute;

    width:100%;
    height:100%;

    object-fit:contain;
}

.background{
    filter:brightness(0);
}

/* ========================= */
/* MAIN PANEL */
/* ========================= */

.border{
    position:relative;

    width:92%;
    max-width:560px;

    margin:
    -120px auto 40px auto;

    padding:15px;

    border-radius:28px;

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

    backdrop-filter:blur(18px);

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

    z-index:20;

    box-shadow:
    0 20px 60px rgba(0,0,0,.45);
}

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

.botton_border,
.botton_border_0,
.error{
    width:100%;

    margin:8px 0;
    padding:16px;

    border:none;
    border-radius:18px;

    color:white;

    font-size:18px;
    font-weight:bold;

    cursor:pointer;

    transition:.25s;
}




.botton_border{
    background:
    linear-gradient(135deg,#16a34a,#22c55e);
}

.botton_border_0{
    background:
    linear-gradient(135deg,#2563eb,#3b82f6);
}

.error{
    background:
    linear-gradient(135deg,#dc2626,#ef4444);
}

.botton_border:hover,
.botton_border_0:hover,
.error:hover{
    transform:translateY(-2px);
}

/* ========================= */
/* STATS */
/* ========================= */

.aa,
.cc{
    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;

    margin:8px 0;
    padding:18px;

    border-radius:18px;

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

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

.aa span,
.cc span{
    font-size:28px;
    font-weight:bold;

    color:#4ade80;
}

.aa h2,
.cc h2{
    font-size:17px;
    font-weight:500;
}

/* ========================= */
/* POPUPS */
/* ========================= */

.popup,
.popup1,
.popup-box{
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    display:none;

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

    background:
    rgba(0,0,0,.7);

    z-index:9999;
}

.popup-content,
.popup-content1,
.popup-card{
    width:92%;
    max-width:420px;

    padding:24px;

    border-radius:28px;

    background:
    linear-gradient(145deg,#111827,#1e293b);

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

    text-align:center;
}

#message{
    width:100%;
    height:130px;

    margin-top:15px;
    padding:14px;

    border:none;
    border-radius:18px;

    resize:none;

    background:#0f172a;

    color:white;
}

.save_1,
.save_2,
.save_3{
    width:120px;
    height:45px;

    margin-top:18px;

    border:none;
    border-radius:14px;

    background:
    linear-gradient(135deg,#22c55e,#16a34a);

    color:white;

    font-size:16px;
    font-weight:bold;

    cursor:pointer;
}

/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width:768px){

    .top-menu-container{
        padding:10px 55px;
    }

    .platform{
        height:420px;
    }

    

    .card-background{
        width:115px;

        top:90px;
        left:8px;

        padding:10px;
    }

    .history-box{
        width:115px;
        height:190px;

        top:90px;
        right:8px;
    }

    .card{
        width:50px;
    }

    #days_1{
        font-size:30px;
    }

    .border{
        width:95%;

        margin-top:-80px;
    }

    .aa,
    .cc{
        padding:15px;
    }

    .aa span,
    .cc span{
        font-size:22px;
    }

    .aa h2,
    .cc h2{
        font-size:15px;
    }

    .topMenu button{
        min-width:150px;
        font-size:14px;
    }
}
/*sense*/