/* Reset & font */
* {margin:0;padding:0;box-sizing:border-box;}
body {font-family: 'Roboto', sans-serif; background:#121212; color:#fff; line-height:1.6;}
a {color:#ffcc00;text-decoration:none;}
a:hover {text-decoration:underline;}

/* Header */
header {
    background:#1f1f1f; 
    padding:20px; 
    text-align:center; 
    font-size:2em; 
    font-weight:bold;
    position:relative;
}
#server-info {
    font-size:0.8em; 
    color:#ccc; 
    margin-top:5px;
}

/* Container */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
}

/* Info banner */
.info-banner {
    background-color: #292929;
    color: #ffcc00;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 0.9em;
}

/* Player card tabel */
.player-card {
    display: grid;
    grid-template-columns: 50px 2fr 1fr 1fr; /* Rank | Name | Kills | Hours */
    align-items: center;
    background-color: #1e1e1e;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 12px;
    transition: background 0.3s, transform 0.2s;
}
.player-card:hover {
    background-color: #2a2a2a;
    transform: scale(1.02);
}
.player-card div { text-align:center; font-size:0.95em; }
.player-card .name { text-align:left; font-weight:bold; color:#ffcc00; }

/* Grafice */
canvas {background:#1e1e1e; border-radius:8px; padding:10px; margin-bottom:30px;}

/* Responsive */
@media(max-width:768px){
    .player-card {
        grid-template-columns: 1fr;
        text-align:left;
        padding:15px;
    }
    .player-card div { margin:5px 0; }
}