/* ============================================================
   🌙 Schnüddels Solitaire – Dark Theme (v1.0)
   ------------------------------------------------------------
   - sanfter Dark Mode, farblich auf Original abgestimmt
   - behält alle Layout-Maße & Strukturen bei
   - überlagert Hintergrund mit 80 % Schwarz
   - keine Invertierung der Kartenbilder!
   ============================================================ */

/* ---------- Grundfarben ---------- */
body {
  background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)),
              url('./img/background.png') center/cover fixed no-repeat;
  color: #e8e8e8;
}

/* Panels & Container */
.header,
.modalBox,
.slot,
.iconbtn {
  background-color: #1a1f1a !important;
  border-color: #2c3d2e !important;
  color: #e8e8e8 !important;
}

.stats {
  color: #cfdccf;
}

/* Spielfeld-Slots */
.slot {
  background-color: #1b1f1b !important;
  border-color: #314f38 !important;
}

/* Karten */
.card {
  background-color: #2b2b2b !important;
  border-color: #444 !important;
}
.card.back {
  background-color: #252525 !important;
  background-image: url('./img/cover.png'); /* Cover bleibt unverändert */
  border-color: #3a3a3a !important;
}

/* Kartenfarben */
.red   { color: #e66a6a !important; }
.black { color: #eaeaea !important; }

/* Joker- und Bildkarten leicht aufhellen */
.faceImg { filter: brightness(0.95) contrast(1.1); }

/* Buttons */
.iconbtn {
  background-color: #2b3c2b !important;
  border-color: #406040 !important;
  color: #dfffe0 !important;
}
.iconbtn:hover {
  background-color: #355a45 !important;
  border-color: #4b7a55 !important;
}

/* Foundation- und Tableau-Umrandungen */
.rightFoundation .slot,
.leftStack .slot {
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

/* Glow-Effekt */
.glow {
  outline: 3px solid #45b893 !important;
  filter: drop-shadow(0 0 8px #45b893);
}

/* Overlay (Pause) */
#overlay {
  background: rgba(0,0,0,0.8);
  color: #fff;
}

/* Modals */
.modal {
  background: rgba(0,0,0,0.6);
}
.modalBox {
  background: #1c1f1c !important;
  border: 1px solid #2c3c2d !important;
  color: #e8e8e8 !important;
}

/* Footer & Werbung */
footer {
  background: #121512 !important;
  border-top: 1px solid #2c3d2e !important;
  color: #cfcfcf !important;
}
footer a { color: #6fffc0 !important; }

.ad-banner {
  background: #1c1f1c !important;
  border-color: #333 !important;
  color: #a8a8a8 !important;
  box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

/* Schnell-Button */
.quickBtn {
  background-color: #1c3f2e !important;
  border-color: #356f58 !important;
  color: #e8ffe8 !important;
  box-shadow: 0 0 8px rgba(0,0,0,0.6);
}

/* Scrollbarer Datenschutz-Text */
#privacyModal .modalBox {
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-color: #555 #1a1a1a;
  scrollbar-width: thin;
}

/* Sanfte Übergänge */
body, .header, .slot, .card, .iconbtn, footer, .modalBox {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}