/* Das gewählte Landschaftsmotiv färbt auch das eigentliche Spielbrett. */
html[data-background="garden"] .board-frame {
  background: linear-gradient(145deg, #347b65, #173f34);
}

html[data-background="ocean"] .board-frame {
  background: linear-gradient(145deg, #267e91, #123d57);
}

html[data-background="night"] .board-frame {
  background: radial-gradient(circle at 50% 35%, #37415f, #171d32 60%, #0c1020);
  box-shadow: inset 0 0 0 1px rgba(173, 190, 255, .18), inset 0 12px 35px rgba(130, 151, 255, .08);
}

/* Separater Oberflächenmodus: unabhängig vom Landschaftshintergrund. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] .game-shell,
html[data-theme="dark"] .modal-card {
  color: #e8eee9;
  background: rgba(27, 34, 38, .96);
  border-color: rgba(255, 255, 255, .14);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] .modal-card h2 { color: #f2eee1; }
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] #status,
html[data-theme="dark"] footer,
html[data-theme="dark"] .modal-card > p { color: #b3c3bb; }
html[data-theme="dark"] .stats span,
html[data-theme="dark"] .level-button { background: #303d3a; color: #e8eee9; }
html[data-theme="dark"] .stats small { color: #9eb0a7; }
html[data-theme="dark"] .stats strong,
html[data-theme="dark"] footer a { color: #79c8aa; }
html[data-theme="dark"] button.secondary {
  color: #d9ebe2;
  background: #344b44;
  box-shadow: 0 3px 0 #1d2d28;
}
html[data-theme="dark"] .progress-line { background: #394540; }
html[data-theme="dark"] input,
html[data-theme="dark"] select { color: #eef4ef; background: #25302e; border-color: #52635d; }
html[data-theme="dark"] .score-list li { border-color: #42504b; }
.modal { z-index: 200000; }
.toolbar-link {
  display: inline-flex;
  align-items: center;
  min-height: 39px;
  padding: 9px 14px;
  color: white;
  border-radius: 10px;
  background: var(--jade);
  box-shadow: 0 3px 0 var(--jade-dark);
  font-weight: 700;
  text-decoration: none;
}
.toolbar-link.secondary { color: var(--jade-dark); background: #dce9df; box-shadow: 0 3px 0 #a7c4b1; }
html[data-theme="dark"] .toolbar-link.secondary { color: #d9ebe2; background: #344b44; box-shadow: 0 3px 0 #1d2d28; }

.mode-grid { display: grid; gap: 10px; margin-top: 18px; }
.mode-button {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  color: var(--ink);
  text-align: left;
  background: #e8efe5;
  box-shadow: 0 3px 0 #b5c7b8;
}
.mode-button strong { font-size: 1rem; }
.mode-button small { color: #60756e; font-weight: 500; }
.mode-button.active { outline: 3px solid var(--gold); background: #fff4cf; }
html[data-theme="dark"] .mode-button { color: #e8eee9; background: #303d3a; box-shadow-color: #1d2925; }
html[data-theme="dark"] .mode-button small { color: #b3c3bb; }
html[data-theme="dark"] .mode-button.active { background: #4c4935; }
.deadlock-icon { color: #d69a39; font-size: 2.8rem; }
.penalty-note { padding: 9px; border-radius: 9px; background: #fff0cf; color: #79551c !important; font-weight: 700; }
html[data-theme="dark"] .penalty-note { background: #493d28; color: #f2cc82 !important; }

/* Manuell umschaltbare Vorschau für Smartphone und Desktop. */
html[data-layout="mobile"] .game-shell {
  width: min(480px, calc(100% - 12px));
  margin: 6px auto;
  padding: 15px;
  border-radius: 18px;
}
html[data-layout="mobile"] .game-header { align-items: flex-start; flex-direction: column; }
html[data-layout="mobile"] h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
html[data-layout="mobile"] .stats { width: 100%; }
html[data-layout="mobile"] .stats span { flex: 1; min-width: 75px; }
html[data-layout="mobile"] .toolbar { display: grid; grid-template-columns: repeat(2, 1fr); }
html[data-layout="mobile"] .toolbar button { width: 100%; padding-inline: 8px; }
html[data-layout="mobile"] .board-frame { min-height: 440px; }
html[data-layout="mobile"] footer { line-height: 1.5; }
html[data-layout="mobile"] .level-grid { grid-template-columns: repeat(2, 1fr); }

html[data-layout="desktop"] .game-shell { width: min(1800px, calc(100% - 20px)); max-width: 1800px; }

.landscape-prompt {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 12000;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  color: #effaf5;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 14px;
  background: rgba(18, 47, 38, .95);
  box-shadow: 0 10px 35px rgba(0, 0, 0, .35);
}
.landscape-prompt[hidden] { display: none; }
.landscape-prompt span { font-weight: 700; }
.landscape-prompt button { padding: 7px 10px; }
.landscape-prompt .prompt-close {
  width: 30px;
  height: 30px;
  padding: 0;
  color: #dce9e2;
  background: transparent;
  box-shadow: none;
  font-size: 1.35rem;
}

/* Querformat-Vollbild: Das Brett erhält den gesamten verbleibenden Platz. */
:fullscreen body { overflow: hidden; }
:fullscreen .game-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none !important;
  height: 100vh;
  margin: 0;
  padding: clamp(10px, 2vw, 24px);
  border: 0;
  border-radius: 0;
}
:fullscreen .game-header { flex: 0 0 auto; }
:fullscreen .toolbar { margin-block: 10px 7px; }
:fullscreen #status { margin-block: 6px; }
:fullscreen .board-frame {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  place-items: center;
}
:fullscreen footer { flex: 0 0 auto; margin-top: 7px; }

/* Safari auf iPad erlaubt den echten Browser-Vollbildmodus oft nicht.
   Dieser Ersatz nutzt dann die komplette sichtbare Webseite. */
html.theater-mode body { overflow: hidden; }
html.theater-mode .game-shell {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none !important;
  height: 100dvh;
  margin: 0;
  padding: clamp(10px, 2vw, 24px);
  border: 0;
  border-radius: 0;
}
html.theater-mode .game-header { flex: 0 0 auto; }
html.theater-mode .toolbar { margin-block: 10px 7px; }
html.theater-mode #status { margin-block: 6px; }
html.theater-mode .board-frame { display: grid; flex: 1 1 auto; min-height: 0; place-items: center; }
html.theater-mode footer { flex: 0 0 auto; margin-top: 7px; }

html.controls-collapsed body { overflow: hidden; }
html.controls-collapsed .game-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none !important;
  height: 100dvh;
  margin: 0;
  padding: 6px;
  border: 0;
  border-radius: 0;
}
html.controls-collapsed .game-header,
html.controls-collapsed .progress-line,
html.controls-collapsed #status,
html.controls-collapsed footer { display: none; }
html.controls-collapsed .toolbar {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 190000;
  display: block !important;
  width: auto;
  margin: 0;
  transform: translateX(-50%);
}
html.controls-collapsed .toolbar > :not(#panel-toggle) { display: none; }
html.controls-collapsed #panel-toggle {
  display: block;
  padding: 5px 14px;
  border-radius: 0 0 12px 12px;
  opacity: .88;
}
html.controls-collapsed .board-frame {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  place-items: center;
  border-radius: 10px;
}

@media (orientation: landscape) and (max-height: 650px) {
  :fullscreen .eyebrow,
  :fullscreen .subtitle,
  :fullscreen footer,
  html.theater-mode .eyebrow,
  html.theater-mode .subtitle,
  html.theater-mode footer { display: none; }
  :fullscreen h1 { font-size: 1.8rem; }
  :fullscreen .stats span { padding-block: 4px; }
  :fullscreen .game-header { flex-direction: row; align-items: center; }
  :fullscreen .toolbar {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 3px;
  }
  :fullscreen .toolbar button { flex: 0 0 auto; width: auto !important; padding-block: 6px; }
  html.theater-mode h1 { font-size: 1.8rem; }
  html.theater-mode .stats span { padding-block: 4px; }
  html.theater-mode .game-header { flex-direction: row; align-items: center; }
  html.theater-mode .toolbar { display: flex !important; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  html.theater-mode .toolbar button { flex: 0 0 auto; width: auto !important; padding-block: 6px; }
  .landscape-prompt { right: 8px; bottom: 8px; }
}

/* Auf echten Tablets nutzt auch die manuell gewählte Mobile-Ansicht im
   Querformat die volle Breite statt einer schmalen Handy-Vorschau. */
@media (pointer: coarse) and (orientation: landscape) {
  html[data-layout="mobile"] .game-shell {
    width: calc(100% - 12px);
    max-width: none;
  }
  html[data-layout="mobile"] .game-header { flex-direction: row; align-items: center; }
  html[data-layout="mobile"] .toolbar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  html[data-layout="mobile"] .toolbar button { flex: 0 0 auto; width: auto; }
}