/* Gemeinsame Optik der Spiele auf CT-112 im Homelab-Hausstil.
   Tokens aus config/design/hausstil.css.
   Unterstützt hell und dunkel (Klasse .dark / .dark-mode). */
@import url(/shared/hausstil.css);

:root {
  --ui-font: var(--hs-font);
  --ui-font-mono: var(--hs-font-mono);

  --ui-bg: var(--hs-bg);
  --ui-text: var(--hs-text);
  --ui-text-soft: var(--hs-text-2);
  --ui-text-faint: var(--hs-text-3);

  --ui-surface: var(--hs-surface);
  --ui-surface-2: var(--hs-surface-2);
  --ui-board: var(--hs-surface);
  --ui-hole: var(--hs-sunken);
  --ui-line: var(--hs-line);
  --ui-line-strong: var(--hs-line-strong);

  /* Hauptknopf in Blau (#0a66e0) */
  --ui-btn: var(--hs-accent);
  --ui-btn-hover: var(--hs-accent-hover);
  --ui-btn-active: var(--hs-accent);
  --ui-btn-text: var(--hs-on-accent);
  --ui-btn-shadow: var(--hs-shadow);

  /* Nebenknöpfe / Chips */
  --ui-chip: var(--hs-sunken);
  --ui-chip-hover: var(--hs-surface-2);

  /* Spielsteine (Apple-Farben Rot & Orange) */
  --ui-p1: #ff3b30;
  --ui-p1d: #d70015;
  --ui-p2: #ff9500;
  --ui-p2d: #c97500;
  --ui-accent: var(--hs-accent);
}

html.dark-mode-pre,
body.dark-mode,
:root.dark {
  --ui-bg: var(--hs-bg);
  --ui-text: var(--hs-text);
  --ui-text-soft: var(--hs-text-2);
  --ui-text-faint: var(--hs-text-3);

  --ui-surface: var(--hs-surface);
  --ui-surface-2: var(--hs-surface-2);
  --ui-board: var(--hs-surface);
  --ui-hole: var(--hs-sunken);
  --ui-line: var(--hs-line);
  --ui-line-strong: var(--hs-line-strong);

  --ui-btn: var(--hs-accent);
  --ui-btn-hover: var(--hs-accent-hover);
  --ui-btn-active: var(--hs-accent);
  --ui-btn-text: var(--hs-on-accent);
  --ui-btn-shadow: var(--hs-shadow);

  --ui-chip: var(--hs-sunken);
  --ui-chip-hover: var(--hs-surface-2);

  --ui-p1: #ff453a;
  --ui-p1d: #d70015;
  --ui-p2: #ff9f0a;
  --ui-p2d: #c97500;
  --ui-accent: var(--hs-accent);
}

/* Systemfont & Spielseiten-Hintergrund (Pastell-Verlauf) für alle Elemente */
body, button, input, select, textarea {
  font-family: var(--ui-font);
}

body,
body.c4,
body.poker,
body.sol,
body.mines,
body.wortel,
body.soko,
body.sudoku,
body.bj,
body.freecell,
body.snake,
body.tetris {
  background: var(--hs-wallpaper) !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

/* ---------- Spielewechsel-Leiste (alle Seiten) ---------- */
.gameswitch {
  display: flex; gap: 6px; justify-content: center; align-items: center;
  flex-wrap: wrap; max-width: min(96vw, 1150px);
  padding: 8px 10px; margin: 0 auto 10px;
  font: 500 var(--hs-fs-s)/1 var(--ui-font);
}
.gameswitch a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 12px; border-radius: var(--hs-r-pill);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  color: var(--ui-text); background: var(--ui-chip);
  border: 1px solid var(--ui-line);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.gameswitch a:hover {
  background: var(--ui-surface);
  border-color: var(--ui-line-strong);
}
.gameswitch a.home-link {
  font-weight: 600;
  border-color: var(--ui-line-strong);
}
.gameswitch a.active {
  background: var(--ui-btn);
  color: var(--ui-btn-text);
  border-color: var(--ui-btn);
  box-shadow: var(--ui-btn-shadow);
}
.gameswitch kbd {
  font: 600 var(--hs-fs-xs)/1 var(--ui-font-mono);
  color: var(--ui-text-soft); border: 1px solid var(--ui-line);
  border-radius: 4px; padding: 4px 6px; margin-left: 2px;
  background: var(--ui-chip); cursor: pointer; user-select: none; flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.gameswitch kbd:hover {
  color: var(--ui-text); background: var(--ui-surface);
}

@media (max-width: 768px) {
  .gameswitch {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 6px 10px; gap: 5px;
  }
  .gameswitch::-webkit-scrollbar { display: none; }
  .gameswitch a { padding: 6px 10px; font-size: 12px; }
}
@media (hover: none) and (pointer: coarse) {
  .gameswitch kbd { display: none; }
}

/* ---------- Einheitliche Knöpfe & Steuerelemente ---------- */
/* Standard: flacher Nebenknopf in --hs-sunken mit --hs-text, ohne Verlauf */
.control-btn,
body.c4 .control-btn,
body.poker .control-btn,
body.sol .control-btn,
body.mines .control-btn,
body.wortel .control-btn,
body.soko .control-btn,
body.sudoku .control-btn,
body.bj .control-btn,
body.freecell .control-btn,
body.snake .control-btn,
body.tetris .control-btn,
.undo-button,
.stats-button,
.help-button,
.tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hs-sunken) !important;
  background-image: none !important;
  color: var(--hs-text) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  height: 40px !important;
  font: 600 var(--hs-fs-s)/40px var(--ui-font) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important; /* Hüpfer verboten */
  transition: background .15s ease, border-color .15s ease, opacity .15s ease !important;
  box-sizing: border-box !important;
}

.control-btn::before,
body.snake .control-btn::before,
body.tetris .control-btn::before {
  display: none !important;
}

.control-btn:hover:not(:disabled),
body.c4 .control-btn:hover:not(:disabled),
body.poker .control-btn:hover:not(:disabled),
body.sol .control-btn:hover:not(:disabled),
body.mines .control-btn:hover:not(:disabled),
body.wortel .control-btn:hover:not(:disabled),
body.soko .control-btn:hover:not(:disabled),
body.sudoku .control-btn:hover:not(:disabled),
body.bj .control-btn:hover:not(:disabled),
body.freecell .control-btn:hover:not(:disabled),
body.snake .control-btn:hover:not(:disabled),
body.tetris .control-btn:hover:not(:disabled),
.undo-button:hover,
.stats-button:hover,
.tool-btn:hover:not(:disabled) {
  background: var(--hs-surface-2) !important;
  border-color: var(--hs-line-strong) !important;
  color: var(--hs-text) !important;
  transform: none !important;
}

.control-btn:active:not(:disabled),
body.c4 .control-btn:active:not(:disabled),
body.poker .control-btn:active:not(:disabled),
body.sol .control-btn:active:not(:disabled),
body.mines .control-btn:active:not(:disabled),
body.wortel .control-btn:active:not(:disabled),
body.soko .control-btn:active:not(:disabled),
body.sudoku .control-btn:active:not(:disabled),
body.bj .control-btn:active:not(:disabled),
body.freecell .control-btn:active:not(:disabled),
body.snake .control-btn:active:not(:disabled),
body.tetris .control-btn:active:not(:disabled) {
  background: var(--hs-sunken) !important;
  transform: none !important;
}

.control-btn:disabled,
body.c4 .control-btn:disabled,
body.poker .control-btn:disabled,
body.sol .control-btn:disabled,
body.mines .control-btn:disabled,
body.wortel .control-btn:disabled,
body.soko .control-btn:disabled,
body.sudoku .control-btn:disabled,
body.bj .control-btn:disabled,
body.freecell .control-btn:disabled,
body.snake .control-btn:disabled,
body.tetris .control-btn:disabled {
  opacity: 0.38 !important;
  cursor: default !important;
  box-shadow: none !important;
}

/* Nur der Hauptknopf („Neu“ / „Neues Spiel“) in Akzent-Blau mit --hs-on-accent */
.control-btn.primary,
#newGame.control-btn,
#restartBtn.control-btn,
#new.control-btn,
.restart-button,
#playAgainBtn.control-btn {
  background: var(--hs-accent) !important;
  background-image: none !important;
  color: var(--hs-on-accent) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--hs-shadow) !important;
}

.control-btn.primary:hover:not(:disabled),
#newGame.control-btn:hover:not(:disabled),
#restartBtn.control-btn:hover:not(:disabled),
#new.control-btn:hover:not(:disabled),
.restart-button:hover,
#playAgainBtn.control-btn:hover:not(:disabled) {
  background: var(--hs-accent-hover) !important;
  color: var(--hs-on-accent) !important;
  border-color: transparent !important;
  transform: none !important;
}

.control-btn.primary:active:not(:disabled),
#newGame.control-btn:active:not(:disabled),
#restartBtn.control-btn:active:not(:disabled),
#new.control-btn:active:not(:disabled) {
  background: var(--hs-accent) !important;
  color: var(--hs-on-accent) !important;
  transform: none !important;
}

/* Thema-Knopf in allen Spielen: 38x38 rund, flacher Nebenknopf, SVG zentriert */
#darkToggle,
.theme-btn,
.control-btn.round,
body.poker .control-btn.round,
body.sol .control-btn.round,
body.c4 .control-btn.round,
body.bj .control-btn.round,
body.freecell .control-btn.round,
body.mines .control-btn.round,
body.snake .control-btn.round,
body.soko .control-btn.round,
body.sudoku .control-btn.round,
body.tetris .control-btn.round,
body.wortel .control-btn.round {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--hs-sunken) !important;
  background-image: none !important;
  color: var(--hs-text) !important;
  border: 1px solid var(--hs-line) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

#darkToggle:hover,
.theme-btn:hover,
.control-btn.round:hover {
  background: var(--hs-surface-2) !important;
  border-color: var(--hs-line-strong) !important;
  color: var(--hs-text) !important;
}

#darkToggle svg,
.theme-btn svg,
.control-btn.round svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Sekundärknöpfe & Runder Toggle */
.control-btn.secondary {
  background: var(--hs-sunken) !important;
  color: var(--hs-text) !important;
  border: 1px solid var(--hs-line) !important;
}
.control-btn.secondary:hover {
  background: var(--hs-surface-2) !important;
  border-color: var(--hs-line-strong) !important;
}

/* Poker: Einsatz 20 auf grünem Filz und Aktions-Knöpfe */
body.poker .seat .bet {
  font-size: 11px !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  min-height: 14px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

body.poker .action-panel .control-btn {
  background: var(--hs-surface) !important;
  color: var(--hs-text) !important;
  border: 1px solid var(--hs-line-strong) !important;
  opacity: 1 !important;
  box-shadow: var(--hs-shadow) !important;
}
body.poker .action-panel .control-btn:hover:not(:disabled) {
  background: var(--hs-surface-2) !important;
}
body.poker .action-panel #checkCallBtn {
  background: var(--hs-accent) !important;
  color: var(--hs-on-accent) !important;
  border-color: transparent !important;
}
body.poker .action-panel #checkCallBtn:hover:not(:disabled) {
  background: var(--hs-accent-hover) !important;
  color: var(--hs-on-accent) !important;
}
body.poker .action-panel .control-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Chip-Buttons / Filter / Segmente */
.chip-btn,
body.c4 .chip-btn,
body.sol .chip-btn,
body.mines .chip-btn,
body.soko .chip-btn,
body.sudoku .chip-btn,
body.bj .chip-btn {
  border: 1px solid var(--ui-line) !important;
  cursor: pointer !important;
  border-radius: var(--hs-r-pill) !important;
  padding: 6px 14px !important;
  font: 600 var(--hs-fs-s)/1 var(--ui-font) !important;
  color: var(--ui-text-soft) !important;
  background: var(--ui-chip) !important;
  transform: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}
.chip-btn:hover,
body.c4 .chip-btn:hover,
body.sol .chip-btn:hover,
body.mines .chip-btn:hover,
body.soko .chip-btn:hover,
body.sudoku .chip-btn:hover,
body.bj .chip-btn:hover {
  background: var(--ui-chip-hover) !important;
  color: var(--ui-text) !important;
}
.chip-btn.on,
body.c4 .chip-btn.on,
body.sol .chip-btn.on,
body.mines .chip-btn.on,
body.soko .chip-btn.on,
body.sudoku .chip-btn.on,
body.bj .chip-btn.on {
  color: var(--hs-accent) !important;
  background: var(--hs-surface) !important;
  border-color: var(--hs-accent) !important;
}

/* Touch-Steuerungen & Numpads: dezent in --hs-sunken, nie blau */
.dpad-btn,
body.soko .dpad-btn,
body.snake .dpad-btn,
.touch-btn,
body.tetris .touch-btn,
.num-btn,
body.sudoku .num-btn,
.face-btn,
body.mines .face-btn {
  background: var(--hs-sunken) !important;
  background-image: none !important;
  color: var(--hs-text) !important;
  border: 1px solid var(--hs-line) !important;
  box-shadow: none !important;
  transform: none !important;
}

.dpad-btn:hover:not(:disabled),
body.soko .dpad-btn:hover:not(:disabled),
body.snake .dpad-btn:hover:not(:disabled),
.touch-btn:hover:not(:disabled),
body.tetris .touch-btn:hover:not(:disabled),
.num-btn:hover:not(:disabled),
body.sudoku .num-btn:hover:not(:disabled),
.face-btn:hover:not(:disabled),
body.mines .face-btn:hover:not(:disabled) {
  background: var(--hs-surface-2) !important;
  border-color: var(--hs-line-strong) !important;
  color: var(--hs-text) !important;
  transform: none !important;
}

.dpad-btn:active:not(:disabled),
.touch-btn:active:not(:disabled),
.num-btn:active:not(:disabled),
.face-btn:active:not(:disabled) {
  background: var(--hs-sunken) !important;
  transform: none !important;
}

.touch-btn.accent {
  background: var(--hs-sunken) !important;
  background-image: none !important;
  color: var(--hs-text) !important;
  border-color: var(--hs-line-strong) !important;
}

/* Auswahllisten (Selects) */
select,
body.c4 select,
body.poker select,
body.sol select,
body.mines select,
body.soko select,
body.sudoku select,
body.bj select {
  height: 40px !important;
  border-radius: 10px !important;
  padding: 0 32px 0 14px !important;
  font: 600 var(--hs-fs-s)/1 var(--ui-font) !important;
  color: var(--ui-text) !important;
  background-color: var(--ui-chip) !important;
  border: 1px solid var(--ui-line) !important;
  cursor: pointer !important;
  appearance: none !important;
  box-shadow: var(--ui-btn-shadow) !important;
  transform: none !important;
}
select:hover,
body.c4 select:hover,
body.poker select:hover,
body.sol select:hover,
body.mines select:hover,
body.soko select:hover,
body.sudoku select:hover,
body.bj select:hover {
  background-color: var(--ui-surface) !important;
  border-color: var(--ui-line-strong) !important;
  transform: none !important;
}

/* Fokus-Ring */
:focus-visible {
  outline: 2px solid var(--ui-accent) !important;
  outline-offset: 2px !important;
}

/* ---------- 4 Gewinnt Spielfläche ---------- */
body.c4 {
  margin: 0; min-height: 100dvh;
  background: var(--ui-bg); color: var(--ui-text);
  font: 16px/1.4 var(--ui-font);
  display: flex; flex-direction: column; align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
  gap: 10px; user-select: none; -webkit-tap-highlight-color: transparent;
}
body.c4 * { box-sizing: border-box; }
body.c4 h1 {
  font-size: 32px; font-weight: 600; margin: 0; line-height: 1.1;
  color: var(--ui-text); letter-spacing: -0.5px;
}
body.c4 .control-panel {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  max-width: min(94vw, 620px);
}
body.c4 .status {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 30px; font-size: 16px; font-weight: 600; text-align: center;
  color: var(--ui-text);
}
body.c4 .chip { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); }
body.c4 .chip.p1 { background: var(--ui-p1); }
body.c4 .chip.p2 { background: var(--ui-p2); }
body.c4 .thinking { color: var(--ui-text-soft); font-weight: 400; }
body.c4 .countdown { color: var(--ui-text-soft); font-weight: 400; font-size: 15px; }

body.c4 .wrap { width: min(94vw, 62vh, 460px); }
body.c4 .hover {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2.2%; padding: 0 2.2%; height: 9%; margin-bottom: 1.5%;
}
body.c4 .ghost { border-radius: 50%; aspect-ratio: 1; width: 100%; opacity: 0; transition: opacity .12s; align-self: end; }
body.c4 .ghost.on { opacity: .4; }
body.c4 .board {
  background: var(--ui-surface); border: 1px solid var(--ui-line);
  border-radius: var(--hs-r-m); padding: 2.2%;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2.2%;
  box-shadow: var(--hs-shadow-raised);
}
body.c4 .col { display: grid; grid-template-rows: repeat(6, 1fr); cursor: pointer; }
body.c4 .cell { aspect-ratio: 1; padding: 6%; }
body.c4 .disc {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--ui-hole); border: 1px solid var(--ui-line);
}
body.c4 .disc.p1, body.c4 .disc.p2 {
  border-color: transparent;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.15);
}
body.c4 .disc.p1 { background: var(--ui-p1); }
body.c4 .disc.p2 { background: var(--ui-p2); }
body.c4 .disc.drop { animation: c4drop .38s cubic-bezier(.45,.05,.35,1.25); }
@keyframes c4drop {
  from { transform: translateY(var(--from, -420%)); }
  60%  { transform: translateY(0); }
  78%  { transform: translateY(-9%); }
  to   { transform: translateY(0); }
}
body.c4 .disc.win { animation: c4pulse 1s ease-in-out infinite; outline: 3px solid var(--ui-accent); outline-offset: -3px; }
@keyframes c4pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }

body.c4 .score { display: flex; gap: 14px; align-items: center; color: var(--ui-text-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
body.c4 .score b { color: var(--ui-text); font-size: 16px; }
body.c4 .hint { color: var(--ui-text-soft); font-size: 12.5px; text-align: center; max-width: 470px; line-height: 1.8; }
body.c4 kbd {
  font: 600 11px/1 var(--ui-font-mono);
  color: var(--ui-text); background: var(--ui-chip);
  border: 1px solid var(--ui-line);
  border-radius: 4px; padding: 3px 6px; margin: 0 1px;
}

/* ---------- 2048 Anpassungen an Hausstil ---------- */
.score-container, .best-container, .moves-container {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  font-family: var(--ui-font) !important;
}
.score-container:after, .best-container:after, .moves-container:after {
  color: var(--ui-text-soft) !important;
  font-family: var(--ui-font) !important;
}
.game-container {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--hs-r-m) !important;
  box-shadow: var(--hs-shadow-raised) !important;
}
.grid-cell {
  background: var(--ui-hole) !important;
  border-radius: 6px !important;
}
.heading h1.title {
  color: var(--ui-text) !important;
  font-family: var(--ui-font) !important;
  font-weight: 600 !important;
}
.game-intro, .game-explanation {
  color: var(--ui-text-soft) !important;
}

/* Modals / Dialoge */
#stats-overlay {
  background: rgba(17, 17, 19, 0.45) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}
#stats-modal {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--hs-r-l) !important;
  box-shadow: var(--hs-shadow-raised) !important;
  font-family: var(--ui-font) !important;
}
#stats-modal h2 {
  color: var(--ui-text) !important;
}
.stat-item {
  background: var(--ui-chip) !important;
  border-radius: 8px !important;
}
.stat-value {
  color: var(--ui-text) !important;
  font-variant-numeric: tabular-nums !important;
}
.stat-label {
  color: var(--ui-text-soft) !important;
}