/*======================================
    JEETO BIG SHOW DISPLAY SYSTEM
    display.css
======================================*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@300;400;500;600&display=swap');

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

html,
body{
    width:100%;
    min-height:100%;
}

body{

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

    background:radial-gradient(circle at top,#1f1f1f,#0b0b0b);

    color:#fff;

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

}


/*=========================
MAIN WRAPPER
=========================*/

.wrapper{

   width:100%;

    min-height:100vh;

    padding:8px;

    display:flex;
    flex-direction:column;

}


/*=========================
HEADER
=========================*/

.header{

    height:58px;

    background:#050505;

    border:2px solid #222;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:8px;

    box-shadow:0 0 20px rgba(0,255,0,.15);

}

.header h1{

    font-family:'Bebas Neue',sans-serif;

    font-size:38px;

    color:#32ff59;

    letter-spacing:4px;

    text-shadow:0 0 15px #00ff55;

}

@keyframes dangerBlink{

0%{
box-shadow:0 0 10px red;
}

50%{
box-shadow:0 0 45px red;
}

100%{
box-shadow:0 0 10px red;
}

}

.danger{

    animation:
        pulse .8s infinite,
        dangerBlink .4s infinite;

}
/*=========================
CONTENT
=========================*/

.content{

    flex:1;

    display:flex;

    gap:8px;
    

}


/*=========================
LEFT CARD
70%
=========================*/

.left{

    flex:7;

    display:flex;

    flex-direction:column;

    gap:8px;

}


/*=========================
RIGHT CARD
30%
=========================*/

.right{

    flex:3;

    display:flex;

}


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

.card{

    background:#171717;

    border:2px solid #2d2d2d;

    border-radius:15px;

    box-shadow:0 0 15px rgba(0,0,0,.5);

}


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

.game-card{

    flex:1;

}

.player-card{

    flex:1.2;

}

.timer-card{

    flex:1.7;

}

.prize-card{

    flex:1;

}


/*=========================
SECTION TITLE
=========================*/

.card-title{

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:'Bebas Neue';

    font-size:26px;

    letter-spacing:2px;

    color:#fff;

}


/*=========================
COLORS
=========================*/

.orange{

    background:linear-gradient(#ff9800,#ff6d00);

}

.blue{

    background:linear-gradient(#1976d2,#0d47a1);

}

.green{

    background:linear-gradient(#43a047,#1b5e20);

}

.gold{

    background:linear-gradient(#d4af37,#f3d46d);

    color:#111;

}


/*=========================
CONTENT AREA
=========================*/

.card-body{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    padding:8px;

}


/*=========================
GAME NAME
=========================*/

#game_name{

    font-size:38px;

    text-align:center;

    font-weight:600;

}


/*=========================
PLAYER
=========================*/

.avatar{

    width:65px;

    height:65px;

    border-radius:50%;

    background:#444;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    margin-bottom:10px;

}

#current_player{

    font-size:20px;

    font-weight:bold;

}


/*=========================
TIMER
=========================*/

#timer{

    font-family:'Bebas Neue';

    font-size:62px;

    letter-spacing:4px;

    color:#fff;

}


/*=========================
LAST 10 SECONDS
=========================*/

.danger{

    background:#b60000 !important;

    animation:pulse .8s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}


/*=========================
PRIZE
=========================*/

#prize{

    font-size:20px;

    font-weight:bold;

}


/*=========================
LEADERBOARD
=========================*/

.leaderboard{

    width:100%;

    display:flex;

    flex-direction:column;

}

.lb-header{

    height:48px;

    background:#0f0f0f;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:'Bebas Neue';

    font-size:28px;

    letter-spacing:2px;

    color:#32ff59;

}

.lb-body{

    flex:1;

    padding:6px;

}

.player-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px;

    border-bottom:1px solid #333;

    font-size:20px;

}

.rank{

    width:50px;

}

.name{

    flex:1;

}

.score{

    color:#3cff63;

    font-weight:bold;

}


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

@media(max-width:1200px){

.header h1{

font-size:38px;

}

#timer{

font-size:70px;

}

#game_name{

font-size:26px;

}

#current_player{

font-size:28px;

}

.player-row{

font-size:24px;

}

}

@media(max-width:900px){

.header h1{font-size:28px;}

#timer{font-size:60px;}

#game_name{font-size:28px;}

#current_player{font-size:20px;}

.player-row{font-size:18px;padding:6px 10px;}

}


/*====================================
MOBILE VIEW
====================================*/
@media (max-width:768px){

    body{
        overflow-y:auto;
    }

    .wrapper{
        width:100%;
        min-height:100vh;
        height:auto;
        padding:10px;
    }

    .content{
        display:flex;
        flex-direction:column !important;
        gap:10px;
    }

    .left,
    .right{
        width:100%;
        flex:none;
    }

    .right{
        min-height:500px;
    }

    .header h1{font-size:30px;}
    #timer{font-size:56px;}
    #game_name{font-size:26px;}
    #current_player{font-size:28px;}
    #prize{font-size:24px;}

    .player-row{
        font-size:18px;
        padding:8px 10px;
    }
}