:root {
  --bg: #0b0c11;
  --panel: #171a23;
  --panel-2: #1f2330;
  --border: #2b3040;
  --text: #eef1f7;
  --muted: #9aa3b8;
  --accent: #5da8ff;
  --accent-2: #ffd35a;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

#app {
  height: 100%;
  position: relative;
}

button {
  font-family: inherit;
}

/* ---------- Overlay-Screens (Start / Pause / Game Over) ---------- */

.overlay-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  transition: opacity 0.2s ease;
}

.overlay-screen.hidden {
  display: none;
}

#start-screen,
#gameover-screen {
  background: radial-gradient(ellipse at top, #1a1e2b 0%, var(--bg) 70%);
}

/* Setzt diese drei Popups deutlich vom laufenden Spiel dahinter ab (statt
   direkt auf transparentem Grund über dem Spielfeld zu schweben) — Pause,
   Update-Screen UND Quiz-Screen teilen sich denselben abgedunkelten/
   geblurrten Hintergrund. */
#pause-overlay,
#update-screen,
#quiz-screen {
  background: rgba(6, 7, 11, 0.82);
  backdrop-filter: blur(2px);
}

.screen-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: clamp(1rem, 3vw, 2rem);
  max-height: 92vh;
  max-width: min(720px, 94vw);
  width: 100%;
  overflow-y: auto;
  text-align: center;
}

h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 0 0 0.25rem;
  text-align: center;
}

.subtitle {
  color: var(--muted);
  text-align: center;
  margin: 0 0 1.25rem;
  font-size: clamp(0.9rem, 2vw, 1rem);
}

/* ---------- Modifikator-Auswahl ---------- */

.modifier-grid {
  display: flex;
  flex-direction: column;
  /* grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); */
  gap: 0.75rem;
}

.modifier-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  text-align: left;
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  border-radius: 0.65rem;
  padding: 0.75rem 0.9rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
}

.modifier-card:hover {
  border-color: var(--accent);
}

.modifier-card.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-2));
  transform: scaleX(0.997);
}

/* Checkbox-Icon links auf jeder Karte (aktuell nur Update-Screen-Typ 2
   "Auswahl") — macht sichtbar, dass Karten an-/abwählbar UND was gerade
   ausgewählt ist, statt sich nur auf Rahmenfarbe/Hintergrund zu verlassen. */
.modifier-card-checkbox {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1.5px solid var(--border);
  border-radius: 0.3rem;
  background: var(--panel);
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.modifier-card.selected .modifier-card-checkbox {
  background: var(--accent);
  border-color: var(--accent);
}

.modifier-card.selected .modifier-card-checkbox::after {
  content: '';
  position: absolute;
  left: 0.55rem;
  top: 0.09rem;
  width: 0.6rem;
  height: 1.1rem;
  border: solid #0b0c11;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.modifier-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.modifier-card-category {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.modifier-card-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.modifier-card-desc {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}

/* ---------- Update-Intervalle (Test-Werkzeug, siehe js/dev-screen-order-menu.js) ---------- */

.dev-interval-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.dev-interval-heading {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dev-interval-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.dev-interval-label {
  flex: 0 0 auto;
  min-width: 8.5rem;
  font-size: 0.9rem;
  color: var(--text);
}

.dev-interval-number {
  width: 3.6rem;
  background: var(--panel-2);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  text-align: right;
  flex: 0 0 auto;
}

.dev-interval-number:focus {
  outline: none;
  border-color: var(--accent);
}

/* Ein Regler mit zwei Knöpfen (Start/Ende) statt zwei getrennter Slider —
   siehe buildDualRangeSlider() in js/dev-screen-order-menu.js: zwei
   übereinandergelegte <input type="range"> mit unsichtbarer Spur, nur die
   Knöpfe selbst sind klickbar (pointer-events), darunter ein rein optischer
   Track mit gefülltem Bereich zwischen den beiden Werten. */
.dev-range-slider {
  position: relative;
  flex: 1 1 auto;
  min-width: 9rem;
  height: 1.2rem;
}

.dev-range-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--border);
  border-radius: 999px;
  pointer-events: none;
}

.dev-range-track-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--accent);
  border-radius: 999px;
}

.dev-range-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
  outline: none; /* Fokusring soll nur um den Knopf selbst erscheinen, nicht um das ganze (unsichtbare) Eingabefeld — siehe :focus-visible-Regeln unten. */
}

.dev-range-thumb::-webkit-slider-runnable-track {
  background: transparent;
  height: 100%;
}

.dev-range-thumb::-moz-range-track {
  background: transparent;
  height: 100%;
}

.dev-range-thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
}

.dev-range-thumb::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
}

.dev-range-thumb:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--border), 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent);
}

.dev-range-thumb:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--border), 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent);
}

.dev-interval-unit {
  color: var(--muted);
  font-size: 0.85rem;
}

.dev-interval-reset {
  align-self: flex-start;
  margin-top: 0.2rem;
}

/* Einzelner Regler (Wiederholungs-Anzahl, siehe buildSingleSlider() in
   js/dev-screen-order-menu.js) — anders als der Doppel-Regler der Intervalle
   reicht hier ein normal gestyltes natives <input type="range">, da es nur
   einen Knopf gibt (kein Klick-Konflikt zwischen zwei übereinandergelegten
   Inputs möglich). */
.dev-repeat-slider {
  width: 10rem;
  accent-color: var(--accent);
}

/* ---------- Reihenfolge-Menü (Update-Screen-Typen, per Drag-and-Drop) ---------- */

.order-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.order-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  border-radius: 0.65rem;
  padding: 0.65rem 0.9rem;
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.order-item-handle {
  flex: 0 0 auto;
  cursor: grab;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
}

.order-item-index {
  flex: 0 0 auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 1.5rem;
}

.order-item-label {
  font-weight: 600;
  font-size: 0.95rem;
}

/* SortableJS-eigene Klassen (siehe js/dev-screen-order-menu.js): Platzhalter
   an der Drop-Position, gerade gegriffenes Item, und dessen Drag-Klon —
   hier nur an das dunkle Theme angepasst, keine eigene DnD-Logik. */
.order-item.sortable-ghost {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel-2));
  opacity: 0.6;
}

.order-item.sortable-chosen {
  border-color: var(--accent);
}

.order-item.sortable-drag {
  opacity: 0.9;
}

.start-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.selection-count {
  color: var(--muted);
  font-size: 0.9rem;
}

.primary-button {
  background: var(--accent);
  color: #0b0c11;
  border: none;
  border-radius: 0.6rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.primary-button:hover {
  filter: brightness(1.1);
}

.primary-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

.secondary-button {
  background: var(--panel-2);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.secondary-button:hover {
  border-color: var(--accent);
}

.secondary-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--border);
}

/* ---------- Update-Screen (6 Typen: Liste / Auswahl / Diff / Chat / Community / Editor) ---------- */

/* .update-panel ist ein Flex-Column mit fester Maximalhöhe: der scrollbare
   Inhalt (Liste/Grid/Diff-Liste/Chat, je nach Screen-Typ) bekommt via
   flex:1 1 auto + min-height:0 den verfügbaren Platz und scrollt bei Bedarf
   selbst — der Install-Button in .update-footer bleibt dadurch immer sichtbar,
   statt mit dem ganzen Panel wegzuscrollen. */
.update-panel {
  display: flex;
  flex-direction: column;
  text-align: left;
  max-width: min(820px, 94vw);
  max-height: 92vh;
  /* Bezugsrahmen für das absolut positionierte .update-type-badge (siehe
     unten) sowie Verankerungspunkt für --type-color, die ui.js' showUpdateScreen()
     hier per Inline-Style setzt (ein einziges wiederverwendetes Panel für alle
     6 Typen, siehe UPDATE_TYPE_META in ui.js) — Fallback auf den normalen
     Rahmen, falls die Variable ausnahmsweise mal nicht gesetzt ist. Etwas
     breiterer Rand als das Standard-.screen-panel, damit die Typ-Farbe
     tatsächlich auffällt. */
  position: relative;
  border-width: 2px;
  border-color: var(--type-color, var(--border));
}

/* Griffiger Name des aktuellen Screen-Typs (siehe UPDATE_TYPE_META in ui.js) —
   sitzt INNERHALB der Padding-Box oben links (kein negativer Versatz: .screen-panel
   hat overflow-y:auto, das würde ein über den Rand hinausragendes Badge
   abschneiden). */
.update-type-badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--type-color, var(--accent));
  color: #10131a;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Die Überschrift ("Update verfügbar") ist allen 6 Update-Screen-Typen
   gemeinsam (siehe index.html #update-screen) und soll zentriert bleiben,
   auch wenn .update-panel für den darunterliegenden Inhalt (Liste/Diff/Chat)
   bewusst linksbündig ist. */
.update-panel h2 {
  text-align: center;
}

.update-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1 1 auto;
  min-height: 0;
}

.update-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.update-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
}

/* Typ 2 (Auswahl) zeigt zusätzlich einen Auswahlzähler links vom Button —
   gleiches Muster wie .start-footer/.selection-count auf dem Start-Screen. */
.update-footer-counted {
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Typ 1: Liste */

.update-mod-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Typ 2 (Auswahl): das geteilte .modifier-grid soll nur INNERHALB des
   Update-Panels scrollen, nicht auch auf dem Start-Screen. */
.update-panel .modifier-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.update-mod-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  border-radius: 0.65rem;
  padding: 0.7rem 0.9rem;
}

/* Typ 3: Diff-Ansicht */

.update-diff-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Eine Modifikation kann mehrere .update-diff-block ergeben (z. B. "Wechselnde
   Schwerkraft": ein Block für onTick, ein zweiter für den Gravity-Patch-Point)
   — kleinerer Abstand INNERHALB einer Modifikation als ZWISCHEN Modifikationen
   (.update-diff-list's gap), damit die Gruppierung sichtbar bleibt. */
.update-diff-mod {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.update-diff-note {
  padding: 0.6rem 0.9rem;
  margin: 0;
}

.update-diff-block {
  background: #0e1016;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
}

/* Kopfzeile zeigt die vom (fiktiven) Diff betroffenen Dateipfade — bleibt
   sichtbar, auch wenn der Code-Teil selbst breiter als das Panel ist. */
.update-diff-block-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}

.update-diff-file {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.76rem;
  color: var(--accent-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  padding: 0.15rem 0.5rem;
}

.update-diff-code {
  margin: 0;
  padding: 0.6rem 0.9rem;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.diff-line {
  display: block;
  color: var(--muted);
}

.diff-line.diff-add {
  color: #8fe07a;
  background: rgba(90, 200, 60, 0.1);
}

.diff-line.diff-del {
  color: #ef7c7c;
  background: rgba(220, 60, 60, 0.1);
}

/* ---------- Quiz-Screen (siehe js/quiz-screen.js) ---------- */

.quiz-table-wrap {
  overflow-x: auto;
}

.quiz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.quiz-table th,
.quiz-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.55rem 0.6rem;
  text-align: left;
}

.quiz-table thead th {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  border-bottom: 1.5px solid var(--border);
}

.quiz-td-text {
  color: var(--text);
}

.quiz-th-answer,
.quiz-td-answer {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

/* Hit Area der Antwort-Radios: deutlich größer als der sichtbare Radio-Kreis
   (siehe input-Regel unten), aber als eigenes quadratisches <label> um ihn
   herum statt durch einen vergrößerten Radio selbst — ein Klick auf das
   Label leitet nativ an das darin verschachtelte <input> weiter. */
.quiz-radio-hit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.quiz-radio-hit:hover {
  background: var(--panel-2);
}

.quiz-td-answer input[type='radio'] {
  margin: 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.quiz-bulk-unsure {
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0;
  cursor: pointer;
}

.quiz-bulk-unsure:hover {
  color: var(--accent);
}

.quiz-bulk-hint {
  font-weight: 600;
  font-size: 0.68rem;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
}

/* Typ 4: Chat */

.update-chat {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-height: 0;
}

/* Kompakte Auswahl-Karten (siehe update-screen-chat.js) — nebeneinander statt
   gestapelt wie .modifier-grid, damit dem Chat-Verlauf darunter mehr Höhe
   bleibt. Nur .chat-mod-grid/.chat-mod-card, .modifier-grid/.modifier-card
   selbst bleiben für den Multiple-Choice-Screen (Typ 2) unverändert. */
.chat-mod-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chat-mod-card {
  padding: 0.4rem 0.65rem;
  gap: 0.45rem;
}

/* .modifier-card.selected staucht die Karte leicht (scaleX) als Druck-Effekt
   — bei den kompakten Chat-Karten soll sich die Größe beim Auswählen aber
   nicht ändern. */
.chat-mod-card.selected {
  transform: none;
}

.chat-mod-card .modifier-card-checkbox {
  width: 1.15rem;
  height: 1.15rem;
}

.chat-mod-card.selected .modifier-card-checkbox::after {
  left: 0.32rem;
  top: 0.03rem;
  width: 0.32rem;
  height: 0.62rem;
  border-width: 0 2px 2px 0;
}

.chat-mod-card .modifier-card-title {
  font-size: 0.85rem;
}

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 38vh;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.chat-message {
  max-width: 85%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.65rem;
  font-size: 0.88rem;
  line-height: 1.4;
}

.chat-message-bot {
  align-self: flex-start;
  background: var(--panel-2);
  border: 1px solid var(--border);
}

.chat-message-user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 22%, var(--panel-2));
  border: 1px solid var(--accent);
}

.chat-input-row {
  display: flex;
  gap: 0.5rem;
}

.chat-input {
  flex: 1 1 auto;
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  color: var(--text);
  font-size: 0.9rem;
}

.chat-input:focus {
  outline: none;
  border-color: var(--accent);
}

.chat-send-button {
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.55rem 1rem;
  color: var(--text);
  cursor: pointer;
}

.chat-send-button:hover {
  border-color: var(--accent);
}

.chat-input:disabled,
.chat-send-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Vorübergehende "Assistent tippt…"-Blase, während auf die Antwort der
   echten Claude API gewartet wird (siehe update-screen-chat.js). */
.chat-message-pending {
  color: var(--muted);
  font-style: italic;
}

/* Der "Code-Änderungen anzeigen"-Button (siehe update-screen-chat.js)
   sitzt direkt unter dem Chat, wiederverwendet aber dasselbe Diff-Markup wie
   der Code-Editor-/Diff-Screen (.update-diff-list/.update-diff-mod/
   .editor-hook-diff) — per Default eingeklappt. */
.update-diff-list.hidden {
  display: none;
}

/* Typ 5: Community Support (siehe js/update-screen-community.js) */

.community-intro {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

.community-vote-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow-y: auto;
}

.community-mod-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.community-mod-card.community-installing {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
}

.community-vote-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
  min-width: 2.5rem;
}

.community-vote-button {
  background: transparent;
  border: 2px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.community-vote-button:hover {
  background: var(--panel);
}

/* Im "wird installiert"-Zustand ist der Kartenhintergrund selbst schon
   bläulich getönt (siehe .community-installing oben) — var(--border) allein
   verschwindet darin fast. Die Buttons bekommen daher denselben Blauton,
   aber heller/blasser gemischt, damit sie sich vom Hintergrund abheben. */
.community-mod-card.community-installing .community-vote-button {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.community-vote-up.voted {
  color: var(--accent);
}

.community-vote-down.voted {
  color: #ef7c7c;
}

.community-vote-score {
  font-weight: 700;
  font-size: 1rem;
}

.community-mod-content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 auto;
  position: relative;
}

.community-mod-badge {
  align-self: flex-start;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  width: fit-content;
}

/* Kein globales .hidden-Utility in diesem Stylesheet (siehe .overlay-screen.hidden/
   .preview-box.hidden weiter oben) — jede Komponente scoped ihr eigenes .hidden. */
.community-mod-badge.hidden {
  display: none;
}

/* Typ 6: Code Editor (siehe js/update-screen-editor.js) — Monaco Editor statt
   CodeMirror, siehe Kommentar dort zur AMD-Ladelogik (min/vs/loader.js). */

.update-panel-wide {
  max-width: min(1100px, 96vw);
}

.editor-hint {
  margin: 0;
}

.editor-fullscreen-entry {
  align-self: flex-start;
}

.editor-mod-header {
  background: transparent;
  border: none;
  padding: 0;
}

/* Inline-Diff PRO MODIFIKATION (GitLab-Stil: unveränderter Datei-Kontext
   auf-/zuklappbar, geänderter Teil direkt bearbeitbar, alle Hooks einer Mod
   in einem gemeinsamen Editor) — siehe buildModEditBlock() in
   update-screen-editor.js. Kompilierfehler werden über echte Monaco-
   Diagnosen (setModelMarkers) direkt im Editor angezeigt, kein eigenes
   Fehler-Element nötig. Etwas höher als die frühere reine Editier-Box, da
   hier mehrere Hunks + Monacos eigene "N hidden lines"-Auf-/Zuklapp-Zeilen
   gleichzeitig Platz brauchen. */
.editor-hook-diff {
  height: 380px;
  border-radius: 0 0 0.4rem 0.4rem;
  overflow: hidden;
}

/* Kleiner Link-artiger Button im Block-Header, öffnet dieselbe Stelle im
   Vollbild-Modus (siehe onOpenFullscreen() in update-screen-editor.js).
   margin-left: auto statt justify-content auf .update-diff-block-header zu
   ändern, da diese Klasse auch von update-screen-diff.js genutzt wird. */
.editor-hook-fullscreen-button {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
}

.editor-hook-fullscreen-button:hover {
  color: var(--accent);
}

/* Rein visuelle Markierung geschützter Zeilen (id/category/slot/Name-
   Beschreibung-Spread) innerhalb des editierbaren Bereichs — siehe
   findProtectedLineRanges()/buildModEditBlock() in update-screen-editor.js.
   Betrifft NICHT, was beim Installieren extrahiert/kompiliert wird (das
   bleibt der ganze Block); zeigt nur an, dass Änderungen an diesen Zeilen
   beim Installieren wieder verworfen werden. */
.editor-protected-line {
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
}

.editor-protected-glyph::before {
  content: '🔒';
  font-size: 0.7rem;
  opacity: 0.75;
  margin-left: 0.15rem;
}

/* ---------- Vollbild-IDE-Ansicht (Datei-Baum + Tabs) ---------- */

.editor-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  background: var(--bg);
}

.editor-fullscreen.hidden {
  display: none;
}

.editor-fullscreen-sidebar {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.editor-fullscreen-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.9rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel);
}

.editor-fullscreen-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.2rem;
}

.editor-fullscreen-close:hover {
  color: var(--text);
}

.editor-fullscreen-tree {
  padding: 0.4rem 0;
}

.editor-tree-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-right: 0.6rem;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-tree-row:hover {
  background: var(--panel-2);
}

.editor-tree-arrow {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.7rem;
  width: 0.8rem;
}

.editor-tree-file {
  color: var(--muted);
}

.editor-tree-children.hidden {
  display: none;
}

.editor-fullscreen-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.editor-fullscreen-tabs {
  display: flex;
  flex-wrap: wrap;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.editor-fullscreen-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.6rem 0.55rem 0.9rem;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
}

.editor-fullscreen-tab.active {
  color: var(--text);
  background: var(--bg);
}

.editor-fullscreen-tab-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0.1rem;
  border-radius: 0.2rem;
}

.editor-fullscreen-tab-close:hover {
  color: var(--text);
  background: var(--panel-2);
}

.editor-fullscreen-editor-host {
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- Spiel-Screen ---------- */

#game-screen.overlay-screen {
  align-items: stretch;
  justify-content: stretch;
  padding: clamp(0.5rem, 2vw, 1.25rem);
  background: var(--bg);
}

.game-layout {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  gap: 1.25rem;
}

.board-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Größe wird vollständig per JS gesetzt (render.js' updateCanvasBox()), nicht
   über CSS aspect-ratio/max-width/max-height: "Drehendes Spielfeld" (siehe
   modifiers.js) braucht bei 90°/270° eine zur Elternfläche TRANSPONIERTE
   Passform, die reine CSS-Prozentwerte (immer an einer fixen Achse des
   Elternelements) nicht ausdrücken können — siehe updateCanvasBox()'s
   Kommentar für Details. Bei 0°/180° reproduziert das exakt die volle
   verfügbare Höhe wie früher. */
#board-canvas {
  background: #12141c;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 20px 50px rgba(0, 0, 0, 0.35);
  /* "Drehendes Spielfeld" (modifiers.js) setzt hier per JS (render.js'
     applyBoardRotation()) transform:rotate(...) — diese transition macht
     jeden Wechsel zu einer schwungvollen Animation statt eines harten Sprungs. */
  transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.side-panel {
  flex: 0 0 clamp(180px, 22vw, 300px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}

.hud-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}

.hud-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.hud-label {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hud-value {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.preview-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.preview-box.hidden {
  display: none;
}

.preview-label {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mini-canvas {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #12141c;
  border-radius: 0.4rem;
}

.next-queue {
  display: flex;
  gap: 0.5rem;
}

.next-queue .mini-canvas {
  flex: 1 1 0;
}

#next-box.hidden-preview-active .next-queue {
  filter: blur(1px) brightness(0.5);
  position: relative;
}

.active-modifiers {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mod-pill-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mod-pill {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  color: var(--accent-2);
  cursor: default;
}

/* Permanente Anzeige bei aktivem Dev-Sequenz-Override (siehe
   js/user-state.js's devSequenceOverride, ui.updateDevSequenceOverlay()) —
   bekommt nur dann überhaupt HTML-Inhalt, siehe :empty unten, das den
   leeren Container automatisch versteckt (keine eigene "hidden"-Klasse
   nötig). Warnfarben umrandet (--accent-2, sonst Hinweis-/Achtung-Farbe im
   Projekt), damit im Spiel klar erkennbar bleibt, dass gerade eine
   Test-Sequenz statt der echten Studien-Sequenz läuft. */
#dev-sequence-overlay:empty {
  display: none;
}

#dev-sequence-overlay {
  background: var(--panel);
  border: 1px solid var(--accent-2);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#dev-sequence-overlay .preview-label {
  color: var(--accent-2);
}

.dev-sequence-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
}

.dev-sequence-item {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--muted);
}

.dev-sequence-item.current {
  color: var(--text);
  font-weight: 700;
}

.dev-sequence-count {
  font-variant-numeric: tabular-nums;
}

.controls-hint {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Start-Screen zeigt dieselben .control-hint-Einträge wie die Spiel-Sidebar,
   aber als zentriertes Zwei-Spalten-Raster statt in einer schmalen Spalte:
   jeder Hinweis eine eigene Zeile, Tasten-Badge und Beschreibung aber über
   alle Zeilen hinweg an derselben Spaltengrenze ausgerichtet (Badges
   rechtsbündig, Beschreibungen linksbündig) statt pro Zeile einzeln
   zentriert. grid-template-columns: auto auto sorgt dafür, dass sich die
   Spaltenbreite nach dem längsten Hinweis richtet — der bestimmt so, wo die
   Grenze verläuft; justify-content: center zentriert das Raster als Ganzes. */
#start-controls.controls-hint {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 0.6rem;
  row-gap: 0.45rem;
  justify-content: center;
  margin-top: 1.25rem;
}

#start-controls.controls-hint .control-hint {
  display: contents;
}

#start-controls.controls-hint kbd {
  justify-self: end;
}

#start-controls.controls-hint .control-hint-label {
  justify-self: start;
}

.control-hint kbd {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.75rem;
  color: var(--text);
}

/* ---------- Responsive: schmale Bildschirme (Handy Hochformat) ---------- */

@media (max-width: 720px) {
  .game-layout {
    flex-direction: column;
    gap: 0.75rem;
  }

  .side-panel {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
  }

  .hud-block {
    flex: 1 1 100%;
    flex-direction: row;
    justify-content: space-around;
  }

  .hud-stat {
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
  }

  .preview-box {
    flex: 1 1 auto;
    min-width: 90px;
  }

  .active-modifiers {
    flex: 1 1 100%;
  }

  .controls-hint {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ---------- Responsive: sehr niedrige Höhe (Handy Querformat) ---------- */

@media (max-height: 480px) and (orientation: landscape) {
  .side-panel {
    flex: 0 0 clamp(150px, 20vw, 240px);
    flex-direction: column;
  }

  .game-layout {
    flex-direction: row;
  }

  .controls-hint {
    display: none;
  }
}