/* Dark 2048 Theme — Hausstil Integration */
@import url(/shared/hausstil.css);

html:has(body.dark-mode),
body.dark-mode {
  background: var(--hs-wallpaper) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  color: var(--hs-text) !important;
  font-family: var(--hs-font) !important;
}

body.dark-mode .container {
  color: var(--hs-text);
}

body.dark-mode .heading h1.title {
  color: var(--hs-text) !important;
  font-family: var(--hs-font) !important;
}

body.dark-mode .game-container {
  background: var(--hs-surface) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-r-m) !important;
  box-shadow: var(--hs-shadow-raised) !important;
}

body.dark-mode .grid-cell {
  background: var(--hs-sunken) !important;
  border-radius: 6px !important;
}

/* Score boxes */
body.dark-mode .score-container,
body.dark-mode .best-container,
body.dark-mode .moves-container {
  background: var(--hs-surface) !important;
  color: var(--hs-text) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: 8px !important;
  font-family: var(--hs-font) !important;
}

body.dark-mode .score-container:after,
body.dark-mode .best-container:after,
body.dark-mode .moves-container:after {
  color: var(--hs-text-2) !important;
  font-family: var(--hs-font) !important;
}

body.dark-mode .game-intro,
body.dark-mode .game-explanation,
body.dark-mode p {
  color: var(--hs-text-2);
}

body.dark-mode a {
  color: var(--hs-accent);
}

/* Control-Buttons im Dark Mode */
body.dark-mode .control-btn {
  background: var(--hs-sunken) !important;
  color: var(--hs-text) !important;
  border: 1px solid var(--hs-line) !important;
  box-shadow: none !important;
}
body.dark-mode .control-btn:hover:not(:disabled) {
  background: var(--hs-surface-2) !important;
  border-color: var(--hs-line-strong) !important;
}
body.dark-mode .control-btn.primary,
body.dark-mode #restartBtn,
body.dark-mode .restart-button {
  background: var(--hs-accent) !important;
  color: var(--hs-on-accent) !important;
  border-color: transparent !important;
  border-radius: var(--hs-r-s) !important;
  box-shadow: var(--hs-shadow) !important;
  transform: none !important;
  font-family: var(--hs-font) !important;
}
body.dark-mode .control-btn.primary:hover:not(:disabled),
body.dark-mode #restartBtn:hover:not(:disabled),
body.dark-mode .restart-button:hover {
  background: var(--hs-accent-hover) !important;
  color: var(--hs-on-accent) !important;
  transform: none !important;
}

/* Dark tiles with readable colors */
body.dark-mode .tile.tile-2 .tile-inner    { background: #2c3e50 !important; color: #f9f6f2 !important; }
body.dark-mode .tile.tile-4 .tile-inner    { background: #34495e !important; color: #f9f6f2 !important; }
body.dark-mode .tile.tile-8 .tile-inner    { background: #e74c3c !important; color: #f9f6f2 !important; }
body.dark-mode .tile.tile-16 .tile-inner   { background: #e67e22 !important; color: #f9f6f2 !important; }
body.dark-mode .tile.tile-32 .tile-inner   { background: #f39c12 !important; color: #f9f6f2 !important; }
body.dark-mode .tile.tile-64 .tile-inner   { background: #f1c40f !important; color: #1d1d1f !important; }
body.dark-mode .tile.tile-128 .tile-inner  { background: #2ecc71 !important; color: #f9f6f2 !important; }
body.dark-mode .tile.tile-256 .tile-inner  { background: #1abc9c !important; color: #f9f6f2 !important; }
body.dark-mode .tile.tile-512 .tile-inner  { background: #3498db !important; color: #f9f6f2 !important; }
body.dark-mode .tile.tile-1024 .tile-inner { background: #9b59b6 !important; color: #f9f6f2 !important; }
body.dark-mode .tile.tile-2048 .tile-inner { background: #e91e63 !important; color: #f9f6f2 !important; }
body.dark-mode .tile.tile-super .tile-inner { background: #8e44ad !important; color: #f9f6f2 !important; }

/* Statistik-Fenster im Dark Mode */
body.dark-mode #stats-overlay {
  background: rgba(17, 17, 19, 0.6) !important;
  backdrop-filter: var(--glass-blur) !important;
}
body.dark-mode #stats-modal {
  background: var(--hs-surface) !important;
  color: var(--hs-text) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-r-l) !important;
  box-shadow: var(--hs-shadow-raised) !important;
}
body.dark-mode #stats-modal h2 { color: var(--hs-text) !important; }
body.dark-mode .stat-item     { background: var(--hs-sunken) !important; }
body.dark-mode .stat-value    { color: var(--hs-text) !important; font-variant-numeric: tabular-nums; }
body.dark-mode .stat-label    { color: var(--hs-text-2) !important; }