@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');

#logo-container {
    text-align: center; /* Zentriert Logo und Titel */
    margin-top: 20px; /* Abstand nach oben */
}

#hambierburg-logo {
    width: 150px; /* Einheitliche Logo-Größe */
    height: auto; /* Seitenverhältnis beibehalten */
}

body {
    font-family: 'Pirata One', cursive;
    background-color: #0a2239; /* Maritimes Dunkelblau */
    color: #f5a623; /* Bier-Gelb */
    text-align: center;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 48px; /* Titelgröße */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    margin: 0; /* Entfernt zusätzlichen Abstand */
}

button {
    background-color: #603813; /* Bierbraun */
    color: white;
    padding: 10px 20px;
    margin: 10px;
    font-size: 20px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #8b5e3b; /* Helles Malzbraun */
}

.hidden {
    display: none;
}

#game-container {
    margin-top: 20px;
    padding: 20px;
    border: 2px solid #f5a623;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

.card {
    width: 226px; /* Neue Kartengröße */
    height: 315px; /* Neue Kartengröße */
    background-image: url('assets/cards.png');
    background-size: 2940px 1260px; /* Angepasste Größe des Spritesheets */
    display: inline-block;
    margin: 5px; /* Verhindert Überlappungen */
    border-radius: 8px; /* Abgerundete Ecken */
}

/* Kartenpositionen */

/* Herz (1. Reihe) */
.ace-hearts { background-position: 0px 0px; }
.two-hearts { background-position: -226px 0px; }
.three-hearts { background-position: -452px 0px; }
.four-hearts { background-position: -678px 0px; }
.five-hearts { background-position: -904px 0px; }
.six-hearts { background-position: -1130px 0px; }
.seven-hearts { background-position: -1356px 0px; }
.eight-hearts { background-position: -1582px 0px; }
.nine-hearts { background-position: -1808px 0px; }
.ten-hearts { background-position: -2035px 0px; }
.jack-hearts { background-position: -2262px 0px; }
.queen-hearts { background-position: -2488px 0px; }
.king-hearts { background-position: -2714px 0px; }

/* Pik (2. Reihe) */
.ace-spades { background-position: 0px -315px; }
.two-spades { background-position: -226px -315px; }
.three-spades { background-position: -452px -315px; }
.four-spades { background-position: -678px -315px; }
.five-spades { background-position: -904px -315px; }
.six-spades { background-position: -1130px -315px; }
.seven-spades { background-position: -1356px -315px; }
.eight-spades { background-position: -1582px -315px; }
.nine-spades { background-position: -1808px -315px; }
.ten-spades { background-position: -2035px -315px; }
.jack-spades { background-position: -2262px -315px; }
.queen-spades { background-position: -2488px -315px; }
.king-spades { background-position: -2714px -315px; }

/* Karo (3. Reihe) */
.ace-diamonds { background-position: 0px -630px; }
.two-diamonds { background-position: -226px -630px; }
.three-diamonds { background-position: -452px -630px; }
.four-diamonds { background-position: -678px -630px; }
.five-diamonds { background-position: -904px -630px; }
.six-diamonds { background-position: -1130px -630px; }
.seven-diamonds { background-position: -1356px -630px; }
.eight-diamonds { background-position: -1582px -630px; }
.nine-diamonds { background-position: -1808px -630px; }
.ten-diamonds { background-position: -2035px -630px; }
.jack-diamonds { background-position: -2262px -630px; }
.queen-diamonds { background-position: -2488px -630px; }
.king-diamonds { background-position: -2714px -630px; }

/* Kreuz (4. Reihe) */
.ace-clubs { background-position: 0px -945px; }
.two-clubs { background-position: -226px -945px; }
.three-clubs { background-position: -452px -945px; }
.four-clubs { background-position: -678px -945px; }
.five-clubs { background-position: -904px -945px; }
.six-clubs { background-position: -1130px -945px; }
.seven-clubs { background-position: -1356px -945px; }
.eight-clubs { background-position: -1582px -945px; }
.nine-clubs { background-position: -1808px -945px; }
.ten-clubs { background-position: -2035px -945px; }
.jack-clubs { background-position: -2262px -945px; }
.queen-clubs { background-position: -2488px -945px; }
.king-clubs { background-position: -2714px -945px; }