body {
    background-color: #1e1e1e; /* Dunkelgrauer Hintergrund */
    color: #ffffff; /* Heller Text */
}


.player-dropzone {
    width: 100%;  /* Die Zone nimmt die gesamte Breite ein */
    min-width: 500px;
    min-height: 120px; /* Mehr Platz für Karten */
    padding: 10px; /* Mehr Platz für besseres Drag & Drop */
    background-color: #2d2d2d; /* Dunkler Hintergrund für Dark Mode */
    border: 2px dashed #ffffff40; /* Optional: Sichtbare Begrenzung */
    display: flex;
    justify-content: flex-start; /* Karten links beginnen */
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
}

#deck {
    display: flex;
    flex-direction: row;  /* Suits nebeneinander */
    align-items: flex-start;
    justify-content: center;
    background-color: #3d3d3d;
    min-height: 200px; /* Mindestens 200px Höhe */
    overflow-y: auto; /* Scrollen aktivieren, falls zu viele Karten */
    width: 100%;
}

#stack {
    display: flex;
    flex-direction: column;  /* Tricks übereinander  */
    align-items: flex-start;
    justify-content: center;
    /*background-color: #3d3d3d; */
    min-height: 200px; /* Mindestens 200px Höhe */
    overflow-y: auto; /* Scrollen aktivieren, falls zu viele Karten */
    width: 100%;
}

#stack .trick:first-child {
    margin-top: 0px;
}

#stack .trick:last-child {
    margin-top: 40px;
}

/* Jeder Stich ist eine Zeile */
.trick {
    display: flex;
    flex-direction: row; /* Karten werden horizontal gestapelt */
    align-items: top; /* Zentriert die Karten */
    justify-content: flex-start;
    min-width: 100px; /* Stellt sicher, dass jede Spalte genug Platz hat */
    margin-top: -80px;
    padding: 0;
}

/* Karten-Stacking: Die erste Karte hat keinen negativen Abstand */
.trick .card:first-child {
    margin-left: 0;
}

/* Alle weiteren Karten überlappen leicht horizontal */
.trick .card:not(:first-child) {
    margin-left: -40px;
}

/* Jede Suit (Farbe) ist eine Spalte */
.deck-suit {
    display: flex;
    flex-direction: column; /* Karten werden vertikal gestapelt */
    align-items: center; /* Zentriert die Karten */
    justify-content: flex-start;
    min-width: 100px; /* Stellt sicher, dass jede Spalte genug Platz hat */
    margin: 0;
    padding: 0;
}

/* Karten-Stacking: Die erste Karte hat keinen negativen Abstand */
.deck-suit .card:first-child {
    margin-top: 0;
}

/* Alle weiteren Karten überlappen leicht vertikal */
.deck-suit .card:not(:first-child) {
    margin-top: -40px;
}

.hidden {
    display: none;
}

.player-dropzone h2 {
    width: 150px; /* Stellt sicher, dass der Name nicht überlappt */
    text-align: center;
}

.player-dropzone .card {
    position: relative;
    margin-left: -40px; /* Überlappung */
    width: 80px;
    height: 110px;
}

.player-dropzone .card:first-child {
    margin-left: 0;
}


.player-dropzone .card:hover {
    z-index: 10;  /* Hover-Effekt: Bringt Karte in den Vordergrund */
    transform: scale(1.1); /* Vergrößert Karte leicht */
}

.card {
    border: 1px solid #444; /* Leichte Umrandung für Karten */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Subtile Schatten */
    width: 80px;
    height: 110px;
    display: inline-block;
    background-size: cover;
    margin: 2px;
    cursor: pointer;
}

.last-trick {
    transform: translateY(20px);  /* Verschiebt den letzten Stich nach unten */
}


.overlay {
    color: white;  /* Kontraststarker Text */
    font-weight: bold;
    padding: 5px;
    border-radius: 5px;
}

.player-dropzone .best_card {
    border: 3px solid green;
    margin-left: 0px;
}
.legal {
    border: 3px solid gray;
}
.card:hover {
    transform: translateY(-10px) rotate(-3deg) scale(1.4);
    transition: 0.2s ease-in-out;
}

.player-dropzone.full {
    background-color: #3d3d3d; /* Dunklere Farbe für volle Zonen */
    border: 2px solid red; /* Zeigt an, dass keine Karten mehr hinzugefügt werden können */
}

.suit-btn {
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
}

header {
    height: 80px;
    padding: 10px 0;
}

.flex.items-start {
    margin-left: 90px !important;
}


.flex.items-start:not(:first-child) {
    margin-left: 90px;
}