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


:root{

    --orange:#ff9800;
    --gold:#ffd700;
    --dark:#101010;
    --card:#1d1d1dcc;
    --white:#ffffff;

}



body{

    font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

    background:
    radial-gradient(circle at top,#3b2600,#101010 55%);

    color:white;

    min-height:100vh;

    padding-bottom:90px;

    overflow-x:hidden;

}



/* HEADER */


.hero{

    text-align:center;

    padding:35px 20px 25px;

    background:
    linear-gradient(
        180deg,
        rgba(255,152,0,.35),
        transparent
    );

}



.hero h1{

    font-size:34px;

    line-height:1.15;

    margin-top:15px;

    text-shadow:
    0 0 20px rgba(255,152,0,.8);

}



.hero p{

    margin-top:10px;

    opacity:.8;

    font-size:18px;

}



.beer-animation{

    font-size:70px;

    animation:
    beerFloat 2s infinite ease-in-out;

}



@keyframes beerFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

}





/* PODIUM */


.podium{

    display:flex;

    justify-content:center;

    align-items:end;

    gap:10px;

    padding:20px;

}



.podium-card{

    width:30%;

    max-width:120px;

    text-align:center;

    padding:15px 5px;

    border-radius:20px 20px 5px 5px;

    background:
    linear-gradient(
        180deg,
        #333,
        #111
    );

    animation:
    slideUp .5s ease;

}



.podium-card img{

    width:50px;

}



.podium-first{

    height:170px;

    background:
    linear-gradient(
        #ffd700,
        #9b7400
    );

    color:black;

}



.podium-second{

    height:130px;

    background:
    linear-gradient(
        #ddd,
        #777
    );

    color:black;

}



.podium-third{

    height:100px;

    background:
    linear-gradient(
        #cd7f32,
        #704000
    );

}



@keyframes slideUp{

    from{

        transform:
        translateY(50px);

        opacity:0;

    }

    to{

        transform:
        translateY(0);

        opacity:1;

    }

}





/* STAT BUTTONS */


.stat-tabs{

    display:grid;

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

    gap:8px;

    padding:10px;

}



.stat-tabs button{

    background:
    rgba(255,152,0,.2);

    color:white;

    border:

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

    border-radius:15px;

    padding:12px 5px;

    font-size:13px;

}





/* PLAYER CARDS */


#ranking{

    padding:15px;

}



.player-card{

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

    backdrop-filter:blur(12px);

    border:

    1px solid rgba(255,255,255,.12);

    border-radius:25px;

    margin-bottom:15px;

    padding:18px;

    display:flex;

    flex-direction:column;

    gap:12px;

    transition:
    transform .45s ease,
    box-shadow .45s ease;

}



.player-card:hover{

    transform:scale(1.03);

}



.player-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:22px;

    font-weight:bold;

}



.rank{

    font-size:28px;

}



.score{

    font-size:32px;

    color:var(--orange);

}



.progress{

    height:12px;

    background:#333;

    border-radius:20px;

    overflow:hidden;

}



.progress-bar{

    height:100%;

    width:0;

    background:

    linear-gradient(
        90deg,
        #ff9800,
        #ffd700
    );

    transition:
    width .7s ease;

}



.actions{

    display:flex;

    justify-content:center;

}



.plus{

    width:70px;

    height:70px;

    border-radius:50%;

    border:none;

    background:

    linear-gradient(
        145deg,
        #ff9800,
        #ff5722
    );

    color:white;

    font-size:32px;

    font-weight:bold;

    box-shadow:

    0 0 20px rgba(255,152,0,.6);

}



.plus:active{

    transform:scale(.85);

}





/* FIRST PLACE EFFECT */


.first-place{

    box-shadow:

    0 0 30px gold;

    animation:

    glow 1.5s infinite alternate;

}



@keyframes glow{

    from{

        box-shadow:
        0 0 10px gold;

    }

    to{

        box-shadow:
        0 0 35px gold;

    }

}





/* FLOATING EMOJIS */


.float-effect{

    position:fixed;

    font-size:50px;

    animation:

    flyUp 1.2s forwards;

    pointer-events:none;

}



@keyframes flyUp{

    from{

        transform:
        translateY(0)
        scale(1);

        opacity:1;

    }

    to{

        transform:
        translateY(-250px)
        scale(1.5);

        opacity:0;

    }

}





/* CONFETTI */


.confetti-piece{

    position:fixed;

    top:-20px;

    animation:

    fall 3s linear forwards;

}



@keyframes fall{

    to{

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

        opacity:0;

    }

}





/* BOTTOM NAV */


.bottom-nav{

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    height:75px;

    background:

    rgba(15,15,15,.95);

    backdrop-filter:blur(10px);

    display:flex;

    justify-content:space-around;

    align-items:center;

    border-top:

    1px solid rgba(255,255,255,.1);

    z-index:100;

}



.bottom-nav button,
.bottom-nav a{

    background:none;

    border:none;

    color:white;

    text-decoration:none;

    font-size:25px;

    display:flex;

    flex-direction:column;

    align-items:center;

}



.bottom-nav span{

    font-size:11px;

}





/* MOBILE OPTIMIERUNG */


@media(min-width:700px){

    #ranking{

        max-width:600px;

        margin:auto;

    }


    .player-card{

        flex-direction:row;

        align-items:center;

        justify-content:space-between;

    }

}