/*
 Globales Styling für das Kartenspiel
*/

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

h1 {
    margin-bottom: 20px;
    color: #333;
}

/* Deck Styling */
/*
   Wir geben dem Deck die gleiche die gleiche Breite und Höhe wie die Karte (nach der Skalierung), damit es optisch zu
  zu den Karten passt. Ersetze die Standard-Hintergrundfarbe durch
  Transparenz und zeige stattdessen ein Kartenbild an. Du kannst die
  Abmessungen anpassen, damit sie besser zu deinem Layout passen.  Die Regel `.draw-image`
  sorgt dafür, dass das Bild das Deck ausfüllt und 
  Pointer-Ereignisse nicht behindert, so dass Klicks auf den Deck-Container eine Karte ziehen.
*/
.deck {
    width: 256px;
    height: 382px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    user-select: none;
    margin-bottom: 20px;
}

/* Schatteneffekt beim Hovern als optisches Feedback */
.deck:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Bild für das Kartendeck. */
.draw-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Für Elemente, die versteckt werden sollen, bis sie benötigt werden */

.hidden {
    display: none !important;
}

/* Container für den Kartenbereich */
.card-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Füge zusätzlichen Abstand über dem Kartenbereich hinzu, damit der Mauszeiger des Nutzers nicht direkt über der Karte ist, wenn sie zum ersten Mal erscheint.  
	Ohne diesen Abstand könnte die Karte sofort nach dem Ziehen gedreht werden, wenn der Mauszeiger ihre Position überlappt. */
    margin-top: 40px;
}

/* Container für die rotierende Karte */
.flip-card {
    /* Erlaube der Karte, sich dynamisch zu vergrößern. Das JavaScript wird explizite Abmessungen basierend auf der natürlichen Größe des Bildes setzen, 
	so dass das gesamte Kartenbild sichtbar ist, ohne abgeschnitten zu werden. */
    background-color: transparent;
    width: auto;
    height: auto;
    perspective: 1000px; /* für 3-dimensionale Perspektive */
}

/* Innenbereich drehen */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}


/* Beim Hovern Karte drehen: Wenn der Nutzer den Mauszeiger über den Kartencontainer bewegt,
   wird das innere Element um 180 Grad gedreht, um die Rückseite zu zeigen. Die Karte
   wird automatisch zurückgedreht, wenn der Mauszeiger den Bereich verlässt. */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Wenn die "flipped"-Klasse auf den inneren Wrapper angewendet wird (über JavaScript),
   wird sie ebenfalls gedreht. So können wir die Karte bei Mouseenter/Mouseleave-Events umdrehen
   Ereignissen umzudrehen, anstatt sich nur auf :hover zu verlassen, das möglicherweise nicht
   eingebetteten Kontexten nicht einheitlich unterstützt wird. */
.flip-card-inner.flipped {
    transform: rotateY(180deg);
}

/* Vorder- und Rückseite */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Randradius und Schatten entfernen, damit nur die Bilder sichtbar sind. */
    border-radius: 0;
    box-shadow: none;
}

/* Vorderseite stylen */
.flip-card-front {
    /* Transparenter Hintergrund und kein Padding, damit das vordere Bild nicht
       von einer weißen Box umgeben ist */
    background-color: transparent;
    color: #333;
    padding: 0;
}

/* Rückseite stylen */
.flip-card-back {
    /* Transparenter Hintergrund und kein Padding */
    background-color: transparent;
    color: #333;
    transform: rotateY(180deg);
    padding: 0;
}

/* Vorder- und Rückseitenbilder füllen den verfügbaren Platz aus, während das Seitenverhältnis erhalten bleibt */
#card-front-img,
#card-back-img {
    width: 100%;
    height: 100%;
    /* Das gesamte Bild in den Kartenbereich einschließen, damit nichts abgeschnitten wird */
    object-fit: contain;
    /* Entferne die Abrundung, damit die Kartenränder nur durch das Bild selbst definiert sind */
    border-radius: 0;
}

/* "Neu mischen"-Knopf */
.discard-btn {
    padding: 8px 16px;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    background-color: #e53935;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.discard-btn:hover {
    background-color: #f44336;
}

/* Bedienung unter dem Deck */
.controls {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Generelles Styling für die Knöpfe */
.control-btn {
    padding: 8px 16px;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Style für den "Nächste Karte"-Button */
#next-btn {
    background-color: #1976d2;
}

#next-btn:hover {
    background-color: #1e88e5;
}

/* Styling für den "Neu mischen"-Knopf */
#reshuffle-btn {
    background-color: #388e3c;
}

#reshuffle-btn:hover {
    background-color: #43a047;
}

/* Styling Textbox unter dem Deck */
.card-textbox {
    margin-top: 10px;
    max-width: 600px;
    width: 100%;
    min-height: 60px;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    font-size: 0.95rem;
    line-height: 1.4;
    color: #333;
}