/* ================================
   Kalbe Product Memory Challenge
   Commit #1 - Splash Screen
================================ */

:root{

    /* Brand */

    --primary:#005BAC;
    --secondary:#00A859;

    /* Background */

    --bg:#F4F9FD;
    --bg-soft:#EDF6FE;
    --white:#FFFFFF;

    /* Text */

    --text:#1E2A3A;
    --text-light:#6B7280;

    /* Border */

    --border:#E5EEF8;

    /* Radius */

    --radius-sm:12px;
    --radius-md:20px;
    --radius-lg:28px;

    /* Shadow */

    --shadow-sm:0 4px 10px rgba(0,91,172,.05);
    --shadow-md:0 10px 24px rgba(0,91,172,.10);
    --shadow-lg:0 18px 45px rgba(0,91,172,.16);

    /* Animation */

    --transition:.25s ease;

}

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{

    width:100%;
    min-height:100%;

    font-family:'Poppins',sans-serif;

    background:linear-gradient(
        180deg,
        #F4F9FD,
        #EAF5FB
    );

    overflow:hidden;

}

body{

    display:flex;

    justify-content:center;

    align-items:center;

}

.d-none{
    display: none!important;
}


/* ==========================
      PHONE FRAME
========================== */

.phone-frame{

    width:100%;

    max-width:520px;

    height:100vh;

    max-height:100vh;

    background:#fff;

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

    position:relative;

    box-shadow:var(--shadow-lg);

}


/* HP asli */

@media(max-width:420px){

.phone-frame{

    width:100vw;
    height:100vh;

    border-radius:0;

}

}

/* ==========================
   Small Screen (Fold / SE)
========================== */

@media (max-width:360px){

    #game-board{

        grid-template-columns:repeat(3,1fr);

        gap:16px;

    }

}


@media (min-width:768px){

.phone-frame{

    max-width:700px;

}

#game-board{

        max-width:620px;

        gap:20px;

    }

}

section{

    animation:fade .45s ease;

}

@keyframes fade{

from{

opacity:0;
transform:translateY(15px);

}

to{

opacity:1;
transform:translateY(0);

}

}


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

#app{

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

}

section{

    width:100%;

}


/* ==========================
     SPLASH SCREEN
========================== */

#splash-screen{

    width:100%;
    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:clamp(24px,6vw,24px);

    text-align:center;

    position:relative;
    overflow: hidden;

}


/* Logo */

.logo-wrapper{

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:0;

}

.kalbe-logo{

    width:170px;

    margin-bottom:20px;

}

/*.sub-brand{

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:10px;

    margin:10px;

}

.diabetasol{

    width:120px;

    margin-bottom:8px;

}

.entrasol{

    width:80px;

}*/

.sub-brand{

    display:flex;

    align-items:center;

    gap:18px;

}

.diabetasol{
    height:20px;
}

.entrasol{
    height:24px;
}

.brand-divider{

    width:1px;

    height:26px;

    background:#D7DEE7;

}

.title-wrapper{

    margin-top:20px;

}

/*Divider*/
.splash-divider{

    width:200px;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #005BAC,
        transparent
    );

    margin:20px auto 22px;

    opacity:.2;

}


/* Title */

h1{

    color:var(--primary);

    font-size:clamp(28px,6vw,38px);

    line-height:1.2;

    font-weight:600;

    letter-spacing:-0.5px;

}


p{

    margin-top:16px;

    color:var(--text-light);

    font-size:clamp(14px,3vw,16px);

    line-height:1.7;

}

.title-wrapper p{

    max-width:290px;

    margin-left:auto;

    margin-right:auto;

}


/* Button */

#startButton{

    margin-top:36px;

    width:100%;

    max-width:320px;

    height:60px;

    border:none;

    border-radius:var(--radius-md);

    cursor:pointer;

    font-size:18px;

    font-weight:700;

    color:#fff;

    letter-spacing:.2px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:var(--shadow-md);

    transition:var(--transition);

}


#startButton:hover{

    transform:
        translateY(-4px)
        scale(1.02);

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

}


#startButton:active{

    transform:scale(.98);

}


/* Footer */

.footer-text{

    position:absolute;

    bottom:18px;

    font-size:13px;

    color:#97A4B4;

}


/* ==========================
      COUNTDOWN
========================== */

#countdown-screen{

    position:absolute;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(4px);

    -webkit-backdrop-filter:blur(4px);

    z-index:9999;

}


#countdownNumber{

    font-size:clamp(100px,24vw,120px);

    font-weight:800;

    color:#FFFFFF;

    text-shadow:

        0 6px 18px rgba(0,91,172,.35),

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

}

@keyframes countPulse{

    0%{

        transform:scale(.45);

        opacity:0;

    }

    40%{

        transform:scale(1.15);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/* ==========================
      GAME SCREEN
========================== */

#game-screen{

    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

    padding:20px;

}


.game-header{

    background:#fff;

    border-radius:0 0 18px 18px;

    overflow:hidden;

    width:100%;

    max-width:560px;

    margin:auto;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.header-topbar{

    height:12px;

    background:#005BAC;

}

.header-brand{

    padding:20px 22px 18px;

    text-align:center;

    background:linear-gradient(
        180deg,
        #F7FBFF,
        #EDF6FE
    );

}

.header-logo{

    width:clamp(100px,18vw,150px);

    margin-bottom:8px;

}

.game-title{

    margin:0;

    color:#005BAC;

    font-size:clamp(22px,4vw,26px);

    line-height:1.18;

    font-weight:600;

    letter-spacing:-0.5px;
    z-index:2;

}

.header-divider{

    height:6px;

    background:#E8F2FC;

}

.header-title{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        180deg,
        #F6FBFF,
        #EEF7FC
    );

    padding:16px 18px 14px;

    border-bottom:3px solid #DCECF8;

}


.game-stats{

    display:flex;

    justify-content:space-between;

    gap:16px;

    padding:8px 14px 12px;

}

/*.stat-item{

    flex:1;

    height:clamp(62px,10vw,92px);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    background:#fff;

    border:2px solid #E4EEF8;

    border-radius:24px;

    box-shadow:
        0 3px 10px rgba(0,91,172,.04);

}*/

.stat-item{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:56px;

    background:#fff;

    border:1px solid #E3EDF7;

    border-radius:16px;

    box-shadow:0 4px 10px rgba(0,91,172,.05);

}

.stat-icon{

    flex:0 0 24px;

    width:24px;

    height:24px;

}

.timer-item{

    flex:1;

}

.score-item{

    flex:1;

}

.match-item{

    flex:1.35;

}



#matched{

    display:inline-block;

    width:60px;

    text-align:center;

    font-size:20px;

    font-weight:600;

    font-variant-numeric: tabular-nums;

}

#timer{

    color:#005BAC;

    font-size:clamp(14px,5vw,16px);

    font-weight:600;

    text-align:left;

    font-variant-numeric:tabular-nums;
}

#score,
#matched{

    color:#005BAC;

    font-size:clamp(14px,5vw,16px);

    font-weight:600;

    font-variant-numeric:tabular-nums;

}

/*.stat-item{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    background:#FFFFFF;

    border:1px solid #E3EDF7;

    border-radius:16px;

    height:56px;

    box-shadow:0 4px 10px rgba(0,91,172,.05);

}*/

.timer-item{

    width:96px;

}

.score-item{

    width:98px;

}

.match-item{

    flex:1.4;

}

#game-board{

    flex:1;

    display:grid;

    grid-template-columns:repeat(4,minmax(65px,1fr));

    gap:clamp(10px,2vw,16px);

    width:100%;

    max-width:620px;

    margin:0 auto;

    padding:18px;

    overflow-y:auto;

}

/* =====================================
        SPLASH DECORATION
===================================== */

.bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(10px);

    opacity:.25;

}

.bg-circle-1{

    width:clamp(120px,28vw,180px);

    height:clamp(120px,28vw,180px);

    background:#00A651;

    top:-20px;

    right:-40px;


}

.bg-circle-2{

    width:clamp(160px,28vw,220px);

    height:clamp(160px,28vw,220px);

    background:#005BAC;

    left:-100px;

    bottom:250px;

}

.bg-circle-3{

    width:clamp(80px,28vw,120px);

    height:clamp(80px,28vw,120px);

    background:#7BC143;

    right:20px;

    bottom:180px;

}

/* ===================================
        MEMORY BOARD
=================================== */

#game-board{

    flex:1;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:clamp(10px,2vw,16px);

    padding:16px;

    align-content:start;

}

.memory-card{

    width:100%;

    aspect-ratio:1/1;

    border-radius:8px;

    background:linear-gradient(
        100deg,
        #00A651,
        #005BAC
        
    );

    box-shadow:0 10px 25px rgba(0,0,0,.12);

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.25s;

}

.memory-card:hover{

    transform:translateY(-4px);

}

.card-back{

    color:white;

    font-size:42px;

    font-weight:700;

}

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

.memory-card{

    width:100%;

    aspect-ratio:1;

    perspective:1000px;

    cursor:pointer;

    box-shadow:

        0 6px 18px rgba(0,0,0,.08);

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

}

.card-inner{

    width:100%;
    height:100%;

    position:relative;

    transform-style:preserve-3d;

    transition:
        transform .42s cubic-bezier(.25,.8,.25,1);

}

.card-front,
.card-back{

    position:absolute;

    width:100%;
    height:100%;

    border-radius:8px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

}

/* FRONT */

.card-front{

    transform:rotateY(180deg);

    background:white;

    border:2px solid #E5EEF8;

}



.product-image{

    width:88%;

    height:88%;

    object-fit:contain;

    user-select:none;

    pointer-events:none;

}

/* BACK */

.card-back{
    background: linear-gradient(135deg, #d6fce9, #f3f9ff);
    justify-content:center;
}

.back-logo{

    width:80%;

    height:auto;

    object-fit:contain;

    transition:.25s;

    margin-bottom:4px;

}

.memory-card:hover .back-logo{

    transform:scale(1.05);

}

.card-back span{

    color:white;

    font-size:10px;

    font-weight:600;

}

/* ===========================
        FLIP
=========================== */

.memory-card.flipped .card-inner{

    transform:rotateY(180deg);

}

.memory-card.matched{

    animation:matchPop .35s ease;

}

@keyframes matchPop{

    0%{

        transform:scale(1);

    }

    40%{

        transform:scale(.95);

    }

    70%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

.memory-card.matched{

    box-shadow:

        0 0 18px rgba(0,166,81,.35);

}

.memory-card.wrong{

    animation:shake .28s;

}

@keyframes shake{

    0%{

        transform:translateX(0);

    }

    25%{

        transform:translateX(-4px);

    }

    50%{

        transform:translateX(4px);

    }

    75%{

        transform:translateX(-2px);

    }

    100%{

        transform:translateX(0);

    }

}

.score-pop{

    animation:scorePop .3s;

}

@keyframes scorePop{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.25);

    }

    100%{

        transform:scale(1);

    }

}

.danger{

    color:#E53935;

    animation:pulse .9s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.12);

    }

    100%{

        transform:scale(1);

    }

}

/* ===================================
        MODAL
=================================== */

#win-modal,
#lose-modal{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(5px);

    z-index:9999;

    animation:fadeIn .3s ease;

}

#win-modal.show,
#lose-modal.show{

    display:flex;

}

.header-win span img{

    width:72px;

    height:auto;

    margin-bottom:12px;

}

.header-lose span img{

    width:68px;

    height:auto;

    margin-bottom:12px;

}

#win-modal h2,
#lose-modal h2{

    margin-bottom:12px;

    color:#005BAC;

}

#win-modal p,
#lose-modal p{

    margin-bottom:24px;

    color:#474444;

    font-size:clamp(20px,7vw,24px);

    font-weight:500;

    line-height:1.6;

}

#win-modal>div,
#lose-modal>div{

    width:300px;

    background:#fff;

    border-radius:24px;

    padding:32px;

    text-align:center;

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

}

.modal-card{

    width:300px;

    background:#fff;

    border-radius:24px;

    padding:30px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.2);

    animation:popup .25s ease;

}

@keyframes popup{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.memory-card.matched{

    animation:matchPop .35s ease;

}

@keyframes matchPop{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

/* ===========================
   MODAL BUTTON
=========================== */

.modal-card button{

    width:100%;

    height:60px;

    border:none;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

    font-size:18px;

    font-weight:600;

    letter-spacing:.3px;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 10px 30px rgba(0,91,172,.25);

}

.modal-card button:hover{

    transform:
        translateY(-4px)
        scale(1.02);

}

.modal-card button:active{

    transform:scale(.98);

}

/*card hover desktop*/
.memory-card{

    transition:
        transform .2s,
        box-shadow .2s;

}

.memory-card:hover{

    transform:translateY(-3px);

}

#win-screen, #lose-screen {
    height: 100%;
}

.win-content, .lose-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
    text-align: center;
}

.wrap-btn{
    margin: 16px 0;
}

.win-button, .lose-button{
    padding: 0 24px;
    height: 60px;
    border: none;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .3px;
    cursor: pointer;
    transition: .25s;
    box-shadow: 0 10px 30px rgba(0, 91, 172, .25);
}
.lose-button{
    background: linear-gradient(135deg, #9f9f9f, #6c6c6c);
}
.header-error{
    color: #E53935;
}
.phone-frame.home-index #splash-screen{
    overflow-x: hidden;
    overflow-y: auto;
}
.phone-frame.home-index #app{
    height: auto;
    min-height: 100vh;
}
.wrap-btn-index{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0;
}
.btn-index {
    padding: 16px 24px;
    min-width: 300px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    border: 1px solid;
    border-color: #444;
    border-radius: 100px;
}
.btn-index:hover, .btn-index:focus{
    box-shadow: 0 10px 30px rgba(0, 91, 172, .25);
}

/* ===========================
        CONFETTI
=========================== */

#confetti-container{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:10000;

}

.confetti{

    position:absolute;

    width:10px;

    height:18px;

    opacity:.9;

    animation:fall 3s linear forwards;

}

@keyframes fall{

    0%{

        transform:
            translateY(-30px)
            rotate(0deg);

        opacity:1;

    }

    100%{

        transform:
            translateY(100vh)
            rotate(720deg);

        opacity:0;

    }

}

@keyframes dangerBlink{

    0%{

        opacity:1;

    }

    50%{

        opacity:.35;

    }

    100%{

        opacity:1;

    }

}

.prize-text{

    font-size:24px;

    font-weight:700;

    /*animation:prizeGlow 1.4s ease-in-out infinite;*/
      animation:prizePulse 1.2s ease-in-out infinite;

}

.lose-text{

    font-size:22px;

    font-weight:700;

    /*animation:prizeGlow 1.4s ease-in-out infinite;*/
      animation:losePulse 1.2s ease-in-out infinite;

}

@keyframes prizePulse{

    0%{
        color:#00A651;

        transform:scale(1);

        text-shadow:none;

    }

    50%{
        color:#00A651;

        transform:scale(1.08);

        /*text-shadow:
            0 0 12px rgba(0,166,81,.35);*/
        text-shadow:none;

    }

    100%{
        color:#00A651;

        transform:scale(1);

        text-shadow:none;

    }

}

@keyframes losePulse{

    0%{
        color:#ea1e1e;

        transform:scale(1);

        text-shadow:none;

    }

    50%{
        color:#ea1e1e;

        transform:scale(1.08);

        /*text-shadow:
            0 0 12px rgba(0,166,81,.35);*/
        text-shadow:none;

    }

    100%{
        color:#ea1e1e;

        transform:scale(1);

        text-shadow:none;

    }

}

.result-brand{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

    margin:28px 0;

}

.result-kalbe{

    width:120px;

}

.result-sub-brand{

    display:flex;

    align-items:center;

    gap:18px;

}

.diabetasolLogo{
    height:20px;
}

.entrasolLogo{
    height:24px;
}

.divider{

    width:1px;

    height:26px;

    background:#D7DEE7;

}

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

@media (max-width:360px){

    html{

        font-size:14px;

    }

}

@media (min-width:768px){

    .phone-frame{

        max-width:680px;

    }

}