*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

body{
    background:#111827;
    color:#fff;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

header{
    padding:20px;
}

.panel{
    display:flex;
    justify-content:space-between;
    gap:15px;
}

.coins,
.level{
    background:#1f2937;
    padding:15px 22px;
    border-radius:18px;
    font-size:24px;
    font-weight:bold;
    box-shadow:0 0 25px rgba(0,170,255,.25);
}

main{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

#clickButton{

    width:230px;
    height:230px;

    border:none;
    border-radius:50%;

    font-size:90px;

    cursor:pointer;

    background:linear-gradient(145deg,#ffd000,#ff9800);

    box-shadow:
        0 0 50px rgba(255,170,0,.7),
        inset 0 0 30px rgba(255,255,255,.4);

    transition:.12s;

}

#clickButton:hover{

    transform:scale(1.04);

}

#clickButton:active{

    transform:scale(.93);

}

.stats{

    margin-top:40px;

    font-size:24px;

    text-align:center;

    line-height:42px;

}

footer{

    display:flex;

    gap:15px;

    padding:20px;

}

footer button{

    flex:1;

    border:none;

    border-radius:18px;

    background:#2563eb;

    color:white;

    padding:18px;

    font-size:22px;

    cursor:pointer;

    transition:.2s;

}

footer button:hover{

    background:#1d4ed8;

}

.modal{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

}

.hidden{

    display:none;

}

.window{

    width:92%;

    max-width:420px;

    max-height:80vh;

    overflow:auto;

    background:#1f2937;

    border-radius:22px;

    padding:25px;

}

.window h2{

    text-align:center;

    margin-bottom:20px;

}

.item{

    background:#374151;

    border-radius:15px;

    padding:18px;

    margin-bottom:15px;

}

.item h3{

    margin-bottom:10px;

}

.item p{

    margin-bottom:10px;

    color:#ddd;

}

.buyBtn{

    width:100%;

    border:none;

    border-radius:10px;

    background:#10b981;

    color:white;

    padding:13px;

    cursor:pointer;

    font-size:18px;

}

.buyBtn:hover{

    background:#059669;

}

.closeBtn{

    width:100%;

    margin-top:15px;

    border:none;

    border-radius:12px;

    background:#ef4444;

    color:white;

    padding:15px;

    cursor:pointer;

    font-size:18px;

}

.popup{

    position:absolute;

    color:#ffe600;

    font-size:26px;

    font-weight:bold;

    animation:popup .8s linear forwards;

    pointer-events:none;

}

@keyframes popup{

0%{

opacity:1;

transform:translateY(0);

}

100%{

opacity:0;

transform:translateY(-90px);

}

}

@media(max-width:500px){

#clickButton{

width:180px;
height:180px;
font-size:70px;

}

.stats{

font-size:20px;

}

footer button{

font-size:18px;

}

}