html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: "Trebuchet MS", sans-serif;
}

/* GANZER SEITENHINTERGRUND */
body {
    background-image: url("../assets/leaderbackground.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #111;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* FRAME – GROSSES LEADERBOARD */
.frame {
    position: relative;
    width: 722px;
    height: 750px;
    background-image: url("../assets/Leaderboard_table.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* SCHWARZER BEREICH – NEU AUSGERICHTET */
.table-area {
    position: absolute;
    top: 150px; /* unter dem LEADERBOARD-Holz */
    left: 70px; /* weg vom Steinrand */
    right: 70px;
    bottom: 110px; /* über den farbigen Steinen */

    overflow-y: auto;
}

/* TABELLE */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

tr {
    height: 50px;
    background: linear-gradient(
            rgba(59, 36, 22, 0.95),
            rgba(42, 23, 14, 0.95)
    );
}

td {
    padding: 10px;
    color: #f3d38a;
}

/* SPALTEN */
.rank {
    width: 42px;
    background: rgba(168, 106, 43, 0.9);
    border-radius: 4px;
    text-align: center;
}

.name {
    width: 100%;
}

.score {
    width: 50px;
    text-align: right;
}

/* SCROLLBAR */
.table-area::-webkit-scrollbar {
    width: 8px;
}

.table-area::-webkit-scrollbar-thumb {
    background: #8a5a2b;
    border-radius: 4px;
}