/* Grundlegendes Layout */
body{
    margin:0;
    padding:0;
    overflow:hidden;
    font-family:Arial, sans-serif;
}
canvas{
    display:block;
    z-index:0;
    position:absolute;
    top:0;
    left:0;
}
#startBackground{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
    background:#70c5ce;
    background-size:cover;
    background-position:center;
}

/* Info Block oben */
#infoBlock{
    position:absolute;
    top:5%;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    z-index:10;
}

#title{
    font-size:36px;
    font-weight:bold;
    color:red;
    margin-bottom:10px;
    -webkit-text-stroke: 2px gold; /* Schwarz umranden */
    text-stroke: 2px black;
}

#currentHighscoreDisplay{
    font-size:28px;
    font-weight:bold;
    color:red;
    margin-bottom:5px;
    -webkit-text-stroke:1px white;
    text-stroke:1px white;
}

#currentScoreDisplay{
    font-size:28px;
    font-weight:bold;
    color:red;
    margin-bottom:5px;
    -webkit-text-stroke:1px white;
    text-stroke:1px white;
}

#currentPlayer{
    font-size:22px;
    font-weight:bold;
    color:black;
    margin-bottom:15px;
    -webkit-text-stroke:1px white;
    text-stroke:1px white;
}

/* Highscore Container (oben) */
#scoreContainer{
    position:absolute;
    top:28%;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    z-index:10;
}

#scoreContainer .highscore{
    color:red;
    font-size:26px;
    font-weight:bold;
    margin-top:5px;
    -webkit-text-stroke:1px white;
    text-stroke:1px white;
}

#scoreContainer .highscore .name{
    font-size:20px;
}

/* Username / PIN Eingabe */
#usernameContainer{
    position:absolute;
    top:45%;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    z-index:10;
}

#usernameContainer input{
    font-size:24px;
    padding:8px;
    margin:5px;
    width:200px;
}

#usernameContainer button{
    font-size:24px;
    padding:10px 20px;
    margin-top:10px;
    font-weight:bold;
    color:black;
    border:none;
    border-radius:12px;
    cursor:pointer;
}

/* Game Over Buttons */
#gameOverButtons{
    position:absolute;
    top:60%;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    display:none;
    z-index:10;
}

#gameOverButtons button{
    font-size:24px;
    padding:10px 20px;
    margin:0 10px;
    font-weight:bold;
    color:black;
    border:none;
    border-radius:12px;
    cursor:pointer;
}

#restartBtn{
    background:yellow;
}
#restartBtn:hover{
    background:orange;
}
#exitBtn{
    background:red;
}
#exitBtn:hover{
    background:darkred;
}

/* Highscore Tabelle */
#highscoreTable{
    margin-top:20px;
    border-collapse: collapse;
    width:300px;
    margin-left:auto;
    margin-right:auto;
    background-color:white; /* Weißer Hintergrund */
    color:black;
    font-weight:bold;
    text-shadow:1px 1px 2px #000;
}

#highscoreTable th, #highscoreTable td{
    border:1px solid #000;
    padding:8px;
    text-align:center;
}

#highscoreTable th{
    background-color:#ccc;
}

#highscoreTable tr:nth-child(odd){
    background-color:#f0f0f0;
}