:root {
  /* Responsive Basiswerte - Standard für Desktop */
  --card-width: 100px;
  --card-height: 140px;
  --card-gap: 15px;
  --bg-color: #2e7d32;
  --card-radius: 8px;
}

body {
  background-color: var(--bg-color);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  touch-action: none; /* Verhindert Scrolling auf Mobile */
}

.game-container {
  padding: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Responsivität für Mobile Landscape und kleinere Screens */
@media (max-width: 800px), (max-height: 600px) {
  :root {
    --card-width: 12vw; /* Dynamische Breite */
    --card-height: 16.8vw; /* 1.4 ratio */
    --card-gap: 2vw;
    --card-radius: 4px;
  }

  .game-container {
    padding: 5px;
  }

  .top-row {
    margin-bottom: 15px !important;
  }
}

/* Speziell für Smartphones im Landscape Modus - Optimiertes Layout */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    /* Viel größere Karten durch Seit-Layout */
    --card-height: 25vh;
    --card-width: 17.8vh; /* Ratio ~0.71 */
    --card-gap: 1.5vh;
    --card-radius: 4px;
  }

  .game-container {
    flex-direction: row; /* Layout: [Leiste] [Tableau] */
    padding: 5px;
    align-items: flex-start;
  }

  .top-row {
    flex-direction: column;
    width: auto;
    height: 100%;
    margin-bottom: 0;
    margin-right: 8vh; /* Mehr Abstand zum Tableau */
    justify-content: flex-start;
    gap: 2vh;
    flex-shrink: 0;
  }

  /* Linke Spalte: Stock/Waste oben, Foundations darunter */

  .stock-pile-area {
    /* Stock & Waste nebeneinander */
    width: calc(var(--card-width) * 2 + var(--card-gap));
    justify-content: space-between;
  }

  .foundation-area {
    /* Foundations als 2x2 Grid */
    display: flex;
    flex-wrap: wrap;
    width: calc(var(--card-width) * 2 + var(--card-gap));
    gap: var(--card-gap);
    justify-content: space-between;
  }

  .tableau-row {
    flex-grow: 1;
    width: auto;
    height: 100%;
    padding-right: 1vh;
    /* Tableau füllt den Rest des Bildschirms */
  }

  .card {
    font-size: 12px;
  }
  .foundation {
    font-size: 1.5rem;
  }
}

/* --- Layouts --- */
.top-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.stock-pile-area,
.foundation-area {
  display: flex;
  gap: var(--card-gap);
}

.tableau-row {
  display: flex;
  justify-content: space-between;
}

.pile {
  width: var(--card-width);
  height: var(--card-height);
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--card-radius);
  position: relative;
  box-sizing: border-box;
}

/* Leere Foundation Platzhalter */
.foundation {
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

@media (max-width: 600px) {
  .foundation {
    font-size: 1.2rem;
  }
}

/* --- Karten Design --- */
.card {
  width: var(--card-width);
  height: var(--card-height);
  background-color: white;
  border-radius: var(--card-radius);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  cursor: grab;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease; /* Animationen */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 14px;
}

.card.dragging {
  z-index: 1000 !important;
  cursor: grabbing;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
  transform: scale(1.05); /* Leicht vergrößern beim Ziehen */
  transition: none; /* Keine Verzögerung beim Ziehen */
}

.card.red {
  color: #d32f2f;
}
.card.black {
  color: #212121;
}

.card-top,
.card-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.card-bottom {
  transform: rotate(180deg);
}

.card-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}

/* Rückseite der Karte */
.card.back {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 5px,
    #465298 5px,
    #465298 10px
  );
  border: 2px solid white;
  cursor: default;
}

.card.back * {
  display: none; /* Inhalt verstecken wenn umgedreht */
}

/* Tableau Stapelung */
.tableau .card {
  /* Position wird via JS gesetzt für den Fächer-Effekt */
}

/* Nachziehstapel Button Effekt */
#stock .card {
  cursor: pointer;
}

/* Reset Button im Stock wenn leer */
.refresh-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: none; /* Standardmäßig aus */
}

/* Utility */
.hidden {
  display: none !important;
}

#win-message {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  z-index: 2000;
}