/* ══════════════════════════════════════════════════════════════════
   SPRITEBIT — Stylesheet
   Aufbau:  1 Tokens · 2 Basis · 3 Bausteine · 4 Layout · 5 Panels
            6 Bühne · 7 Farben · 8 Modale · 9 Vollbild · 10 Responsive
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ─────────────────────────────────────────────────── */
:root {
  /* Flächen — von hinten nach vorne */
  --bg:          #121214;
  --surface-1:   #1a1a1e;
  --surface-2:   #202026;
  --surface-3:   #292930;
  --surface-4:   #33333c;

  /* Linien */
  --line:        #2b2b33;
  --line-strong: #3d3d47;

  /* Text */
  --text:        #e6e6ea;
  --text-muted:  #9a9aa6;
  --text-dim:    #6c6c78;

  /* Akzente */
  --accent:        #6ea8fe;
  --accent-bg:     #17253c;
  --accent-line:   #2d4870;
  --primary:       #6ed49a;
  --primary-bg:    #142a20;
  --primary-line:  #245c40;
  --danger:        #f28b82;
  --danger-bg:     #2e1618;
  --danger-line:   #5c2a2c;

  /* Maße */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --r-sm: 4px;  --r-md: 6px;  --r-lg: 10px;

  --fs-xs: 10px; --fs-sm: 11px; --fs-md: 12px; --fs-lg: 14px; --fs-xl: 16px;

  --rail-w: 268px;
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', Consolas, 'SF Mono', monospace;

  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);

  /* Schachbrett für Transparenz-Anzeige */
  --checker:
    linear-gradient(45deg, #3a3a44 25%, transparent 25%),
    linear-gradient(-45deg, #3a3a44 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #3a3a44 75%),
    linear-gradient(-45deg, transparent 75%, #3a3a44 75%);
}

/* ── 2 · Basis ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-md)/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol { margin: 0; }
ol { padding-left: 1.2em; }
code { font-family: var(--mono); font-size: 0.95em; color: var(--accent); }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Schlanke Scrollbars in allen scrollenden Bereichen */
.rail, .panel-body, .sprite-list, .color-list, #editor-canvas-area, .modal--scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-4) transparent;
}
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

/* ── 3 · Bausteine ──────────────────────────────────────────────── */

/* Buttons */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-muted);
  font: 600 var(--fs-sm)/1 var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover:not(:disabled) { background: var(--surface-3); color: var(--text); border-color: var(--line-strong); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.38; cursor: not-allowed; }

.btn.is-active { background: var(--surface-4); color: var(--text); border-color: var(--line-strong); }

.btn--primary { background: var(--primary-bg); color: var(--primary); border-color: var(--primary-line); }
.btn--primary:hover:not(:disabled) { background: #1a3a2b; color: #8ee7b4; border-color: #2f7452; }

.btn--accent { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-line); }
.btn--accent:hover:not(:disabled) { background: #1d3050; color: #9cc4ff; border-color: #3a5c8c; }

.btn--danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.btn--danger:hover:not(:disabled) { background: #3a1c1e; color: #ffa8a0; }

.btn--danger-soft { color: var(--danger); }
.btn--danger-soft:hover:not(:disabled) { background: var(--danger-bg); border-color: var(--danger-line); }

.btn--block { width: 100%; }
.btn.is-ok { background: var(--primary-bg); color: var(--primary); border-color: var(--primary-line); }
.btn.is-set { border-color: var(--primary-line); color: var(--primary); }

.btn-group { display: inline-flex; gap: 2px; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.btn-group .btn:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.btn-row > .btn { flex: 1 1 auto; }

/* Icon-Buttons (Sprite-Aktionen, Modal schließen) */
.icon-btn {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-dim);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); border-color: var(--line); }
.icon-btn.is-danger:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }

/* Eingabefelder */
.input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: var(--text);
  font: 400 var(--fs-sm)/1.3 var(--font);
}
.input:hover { border-color: var(--line-strong); }
.input:focus { outline: none; border-color: var(--accent); }
.input--sm { width: auto; padding: 4px 6px; font-size: var(--fs-sm); }
.input--num {
  width: 52px;
  padding: 4px 6px;
  font-family: var(--mono);
  text-align: right;
}
.input--num::-webkit-outer-spin-button,
.input--num::-webkit-inner-spin-button { appearance: none; margin: 0; }
select.input { cursor: pointer; }

input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 4px;
  appearance: none;
  border-radius: 2px;
  background: var(--surface-4);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: grab;
}

input[type="color"] {
  width: 30px; height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: none;
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; }

.hidden-color-input {
  position: absolute;
  width: 0; height: 0;
  opacity: 0;
  pointer-events: none;
}

.file-input {
  width: 100%;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.file-input::file-selector-button {
  margin-right: var(--sp-2);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-muted);
  font: 600 var(--fs-sm) var(--font);
  cursor: pointer;
}
.file-input::file-selector-button:hover { background: var(--surface-3); color: var(--text); }

/* Checkboxen */
.check {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.check input { accent-color: var(--accent); cursor: pointer; }

/* Licht-Panel: Richtungen als 3×3-Feld, in der Mitte die Sonne. */
.light-dirs { display: grid; grid-template-columns: repeat(3, 32px); gap: 2px; }
.light-dirs .btn { min-width: 0; padding: 4px 0; justify-content: center; }
.light-dirs .btn.is-active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }
.light-sun { display: grid; place-items: center; }
.light-stale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-bg);
  font-size: var(--fs-sm);
}
.light-stale[hidden] { display: none; }
.light-preview-note {
  margin: 0;
  padding: var(--sp-1) var(--sp-2);
  border-left: 2px solid var(--accent);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.light-preview-note[hidden] { display: none; }
.light-sun::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.check.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* Felder (Label + Steuerelement) */
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field--inline { flex-direction: row; align-items: center; gap: var(--sp-2); }
.field-label {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.field-controls { display: flex; align-items: center; gap: var(--sp-2); }
/* In den schmalen Spalten darf keine Zeile herauslaufen: umbrechen erlauben
   und den Kindern das Schrumpfen gestatten. Ohne min-width:0 verweigert ein
   Flex-Kind das Kleinerwerden unter seine Inhaltsbreite. */
.rail .field--inline,
.rail .field-controls { flex-wrap: wrap; }
.rail .field--inline > *,
.rail .field-controls > * { min-width: 0; }
.rail .field-controls .input--sm { flex: 1 1 6rem; }
.rail .field-controls .btn { flex: 1 1 auto; white-space: nowrap; }
.field-value {
  min-width: 38px;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: right;
}
.field-unit { font-size: var(--fs-xs); color: var(--text-dim); }
.help-formats {
  display: grid;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--line);
  color: var(--text-muted);
}
.field-note {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-dim);
}

/* Badges + Meldungen */
.badge {
  padding: 2px 7px;
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.badge--builtin { background: var(--surface-3); color: var(--text-dim); }
.badge--custom  { background: var(--primary-bg); color: var(--primary); }

.msg {
  padding: 7px 9px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.msg--ok    { background: var(--primary-bg); color: var(--primary); border: 1px solid var(--primary-line); }
.msg--error { background: var(--danger-bg);  color: var(--danger);  border: 1px solid var(--danger-line); }

.empty-note {
  padding: var(--sp-4) var(--sp-2);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  text-align: center;
}
.panel-hint {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-dim);
}

/* Transparenz-Kachel */
.is-transparent {
  background-image: var(--checker) !important;
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-color: var(--surface-2) !important;
}

/* ── 4 · Layout ─────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); }
.brand-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: inherit;
  text-decoration: none;
}
.brand-link:hover .brand-name { color: var(--accent); }
.brand-bit { color: var(--primary); }
.brand-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.2px;
}
/* Projektname in der Kopfzeile (js/projectsui.js) — öffnet die Projektliste */
.project-btn {
  appearance: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 10px;
  margin-left: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font: 600 var(--fs-sm)/1.2 var(--font);
  cursor: pointer;
}
.project-btn:hover { background: var(--surface-3); border-color: var(--line-strong); }
/* Fenster „Projekte“ */
.proj-new { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.proj-new .input { flex: 1; }
.proj-list { display: grid; gap: 4px; margin-top: var(--sp-3); }
.proj-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.proj-row.is-current { border-color: var(--accent-line); background: var(--accent-bg); }
.proj-info { display: grid; gap: 2px; flex: 1; min-width: 0; }
.proj-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-meta { font-size: var(--fs-sm); color: var(--text-muted); }
.proj-acts { display: flex; align-items: center; gap: 4px; flex: none; }
.proj-badge { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); padding: 0 6px; }
.doc-title {
  padding-left: var(--sp-3);
  border-left: 1px solid var(--line);
  font-size: var(--fs-md);
  color: var(--text-muted);
}
.save-indicator {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.25s;
}
.save-indicator.on { opacity: 1; }

/* ── Menüleiste (js/menubar.js) ──────────────────────────────────────
   Wie in jedem Programm: Titel nebeneinander, darunter ein Aufklapp-Menü
   mit Einträgen und Tastenkürzeln rechts. Bewusst ohne Akzentfarben —
   die Kopfzeile soll ruhig sein, die Farbe gehört der Zeichnung. */
.menubar { display: flex; align-items: center; gap: 2px; margin-left: var(--sp-2); }
.mb-menu { position: relative; }
.mb-title {
  appearance: none;
  padding: 5px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-md);
  cursor: pointer;
}
.mb-title:hover, .mb-title.is-open { background: var(--surface-3); color: var(--text); }
.mb-title:focus-visible { outline: 2px solid var(--line-strong); outline-offset: 1px; }
.mb-drop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  min-width: 15rem;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: var(--shadow-lg);
}
.mb-drop[hidden] { display: none; }
.mb-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: 6px 10px 6px 26px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-md);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.mb-item[hidden] { display: none; }
.mb-item > span { flex: 1 1 auto; }
.mb-item kbd {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.mb-item:hover:not(:disabled), .mb-item:focus-visible { background: var(--surface-3); outline: none; }
.mb-item:disabled { color: var(--text-dim); cursor: default; }
/* Häkchen für Auswahl-Einträge (Hintergrund, Sprache). */
.mb-item[aria-checked="true"]::before {
  content: '✓';
  position: absolute;
  left: 9px;
  color: var(--text);
}
.mb-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.mb-label {
  padding: 4px 10px 2px 26px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mb-group { display: flex; flex-direction: column; }
/* Untermenü (js/menubar.js): Kopf mit Pfeil, Liste rechts daneben. */
.mb-sub { position: relative; }
.mb-subtitle::after {
  content: '';
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}
.mb-sub.is-open > .mb-subtitle { background: var(--surface-3); }
.mb-subdrop {
  position: absolute;
  top: -5px;
  left: calc(100% + 9px);
  z-index: 71;
  display: none;
  flex-direction: column;
  min-width: 13rem;
  padding: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: var(--shadow-lg);
}
/* Brücke über die Lücke, damit die Maus auf dem Weg nicht herausfällt. */
.mb-subdrop::before { content: ''; position: absolute; top: 0; bottom: 0; left: -11px; width: 11px; }
.mb-subdrop--left { left: auto; right: calc(100% + 9px); }
.mb-subdrop--left::before { left: auto; right: -11px; }
.mb-sub.is-open > .mb-subdrop { display: flex; }
/* Schmal (Handy): Untermenü klappt eingerückt unter seinem Kopf auf. */
@media (max-width: 640px) {
  .mb-subdrop, .mb-subdrop--left { position: static; min-width: 0; padding: 0 0 0 12px; border: 0; box-shadow: none; }
  .mb-subtitle::after { transform: rotate(135deg); }
}
.doc-title { margin-left: var(--sp-2); }
.save-indicator { color: var(--text-dim); }

#workspace {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--rail-w);
  gap: 1px;
  flex: 1;
  min-height: 0;
  background: var(--line);
}

.rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
}

/* ── 5 · Panels ─────────────────────────────────────────────────── */
.panel { border-bottom: 1px solid var(--line); }
.panel:last-child { border-bottom: none; }

.panel-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3);
  background: var(--surface-1);
}
.panel-title {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.panel-badge {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--surface-3);
  color: var(--text-dim);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
}
.panel-badge:empty { display: none; }

.panel-toggle {
  appearance: none;
  width: 20px; height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.panel-toggle::before { content: '▾'; display: block; transition: transform 0.15s; }
.panel-toggle:hover { background: var(--surface-3); color: var(--text); }
.panel.collapsed .panel-toggle::before { transform: rotate(-90deg); }

.panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  /* Oben braucht es eigenen Abstand: der Kopf hat zwar Innenabstand, der
     endet aber mit seiner Hintergrundflaeche direkt an der Kante. Ohne das
     klebt das erste Bedienelement an der Ueberschrift. */
  padding: var(--sp-3) var(--sp-3) var(--sp-3);
}
.panel.collapsed .panel-body { display: none; }

/* Sprite-Liste */
.sprite-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-height: 46vh;
  overflow-y: auto;
}
.sprite-card {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.sprite-card:hover { background: var(--surface-2); }
.sprite-card.is-active {
  background: var(--surface-2);
  border-color: var(--accent-line);
}
.sprite-thumb {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background-image: var(--checker);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-color: var(--surface-2);
  overflow: hidden;
}
.sprite-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.sprite-name {
  overflow: hidden;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sprite-sub {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}
.sprite-acts {
  display: flex;
  gap: 1px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s;
}
.sprite-card:hover .sprite-acts,
.sprite-card:focus-within .sprite-acts,
.sprite-card.is-active .sprite-acts { opacity: 1; }

/* Code-Panel */
.code-out, .code-in {
  width: 100%;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #0e0e11;
  color: #c8d4e0;
  font: 400 var(--fs-sm)/1.5 var(--mono);
  white-space: pre;
  overflow: auto;
  resize: vertical;
  tab-size: 2;
}
.code-out { height: 170px; }
.code-in  { height: 190px; }
.code-out:focus, .code-in:focus { outline: none; border-color: var(--accent); }

/* Die Zeile trug PNG, PDF und Spritesheet nebeneinander — in der schmalen
   Spalte lief der letzte Knopf aus dem Panel heraus. Jetzt darf sie
   umbrechen, und die Knoepfe duerfen unter ihre Wunschbreite schrumpfen
   (ohne min-width:0 verweigert ein Flex-Kind das Kleinerwerden). */
.export-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.export-row .btn {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
.export-row .field { flex: 1 1 100%; }

/* ── 6 · Bühne ──────────────────────────────────────────────────── */
#stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}

#stage-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.stage-ident { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }

/* Reiter der geöffneten Sprites (js/tabs.js) — Karteireiter wie in
   Grafikprogrammen: oben rund, unten gerade. Sie stehen links in der Kopfzeile
   statt des Namens, sitzen auf deren Unterkante und überdecken die Linie;
   der aktive hat unten die Farbe der Fläche darunter und geht so in sie
   über. Passen nicht alle hin, scrollt die Reihe seitlich (Mausrad, am
   Handy wischen). --head-pad-y ist das Polster der Kopfzeile, damit die
   Reiter genau bis an ihre Unterkante reichen. */
#stage-head { --head-pad-y: var(--sp-2); --tab-below: var(--bg); }
/* Steht oben eine Leiste (Werkzeuge, Farben), geht der Reiter in sie über. */
#stage:has(> .bar-zone[data-zone="top"] > :is(#toolbar, #color-bar, #timeline)) > #stage-head { --tab-below: var(--surface-1); }
#stage-head:has(> .sprite-tabs) > .stage-ident { display: none; }
.sprite-tabs {
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  gap: var(--sp-1);
  flex: 1 1 0;
  min-width: 0;
  margin-block: calc(-1 * var(--head-pad-y)) calc(-1 * var(--head-pad-y) - 1px);
  padding-top: var(--sp-1);
}
.tab-list {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-list::-webkit-scrollbar { display: none; }
/* Passen nicht alle Reiter hin (js/tabs.js), laufen sie am Rand aus — so
   sieht man, dass die Reihe weitergeht, und kein Reiter endet hart am +. */
.tab-list.is-cut-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.tab-list.is-cut-start { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.tab-list.is-cut-start.is-cut-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.sprite-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  max-width: 200px;
  height: 26px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  user-select: none;
}
.sprite-tab:hover { color: var(--text); background: var(--surface-3); }
.sprite-tab.is-active {
  height: 28px;
  border-color: var(--line-strong);
  border-top: 2px solid var(--accent);
  border-bottom-color: var(--tab-below);
  background: var(--tab-below);
  color: var(--text);
  font-weight: 600;
}
.sprite-tab:not(:has(.tab-close)) { padding-right: 10px; }
.sprite-tab.is-dragging { opacity: 0.4; }
.sprite-tab.is-drop-before { box-shadow: inset 2px 0 0 var(--accent); }
.sprite-tab.is-drop-after  { box-shadow: inset -2px 0 0 var(--accent); }
.tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-close {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.55;
}
.tab-close:hover { opacity: 1; background: var(--surface-4); }
.tab-close .ui-ico { width: 12px; height: 12px; }
/* Unten wie die Reiter und mittig auf ihrer Höhe (26 px Reiter, 22 px Knopf)
   — mittig in der ganzen Leiste stand es höher als die Reiter. */
.tab-new { flex: none; align-self: flex-end; margin-bottom: 2px; }
/* Finger: etwas mehr Fläche, aber die Reiter sollen sich nicht vordrängen. */
@media (pointer: coarse) {
  .sprite-tab { height: 30px; padding-left: 12px; }
  .sprite-tab.is-active { height: 32px; }
  .tab-close { width: 24px; height: 24px; }
}
.stage-title {
  overflow: hidden;
  font-size: var(--fs-lg);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage-dims { font-family: var(--mono); font-size: var(--fs-sm); color: var(--text-dim); }
.stage-head-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-left: auto;
}
.stage-head-right input[type="range"] { width: 84px; flex: none; }

/* Werkzeugleiste */
#toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}
.tool-group { display: flex; align-items: center; gap: var(--sp-2); }
.tool-sep { width: 1px; height: 22px; background: var(--line); }

.tool-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-muted);
  font: 600 var(--fs-sm)/1 var(--font);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.tool-btn:hover { background: var(--surface-2); color: var(--text); }
.tool-btn.is-active {
  background: var(--accent-bg);
  border-color: var(--accent-line);
  color: var(--accent);
}
.tool-ico { font-size: var(--fs-lg); line-height: 1; }

.size-btns { display: flex; gap: 2px; }
.brush-sz {
  appearance: none;
  min-width: 24px;
  padding: 4px 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-dim);
  font: 600 var(--fs-sm)/1 var(--mono);
  cursor: pointer;
}
.brush-sz:hover { background: var(--surface-3); color: var(--text); }
.brush-sz.is-active { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent); }

#toolbar input[type="range"] { width: 100px; flex: none; }

/* Farb-Schnellwahl */
/* Aktuelle Farbe + Schnellwahl in einer Zeile. Die aktuelle Farbe gehört
   hierher und nicht in die Farben-Schublade — man muss sie immer sehen. */
/* Hex-Feld neben der aktuellen Farbe */
.cc-hex-input {
  width: 6.5rem;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--text);
  font: inherit;
  font-family: var(--mono);
  font-size: var(--fs-sm);
}
.cc-hex-input:focus { border-color: var(--accent-line); outline: none; }
#color-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
#color-bar .current-color {
  width: auto;
  min-width: 11rem;
  flex: none;
  padding: 3px var(--sp-2) 3px 3px;
}
#quick-palette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
}
.qp-swatch {
  position: relative;
  width: 30px; height: 30px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
}
.qp-swatch:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.qp-swatch.is-active {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
}
.qp-idx {
  position: absolute;
  right: 2px; bottom: 0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  text-shadow:
     0 1px 1px rgba(0,0,0,0.9),  0 -1px 1px rgba(0,0,0,0.9),
     1px 0 1px rgba(0,0,0,0.9), -1px  0 1px rgba(0,0,0,0.9);
  pointer-events: none;
}
.qp-sep { width: 1px; height: 22px; margin: 0 var(--sp-1); background: var(--line); }

/* Timeline (js/frames.js) — Transport, Vorschaubilder, Bearbeiten, Tempo */
#timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  flex-shrink: 0;
  min-width: 0;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}
#timeline .btn { padding: 5px 8px; }
/* Trennlinie unter den Vorschaubildern (js/frames.js makeThumbGrip):
   ziehen = Größe der Bilder. Liegt im Raster in der Zeile der Bilder, unten
   bündig, und klebt mit ihnen oben, wenn die Ebenen scrollen. */
.tl-grip {
  grid-column: 1 / -1;
  align-self: end;
  position: sticky;
  top: calc(var(--tl-tagh, 0px) + var(--tl-cell, 44px) - 4px);
  z-index: 3;
  height: 7px;
  margin-bottom: -5px;
  cursor: row-resize;
  background: linear-gradient(var(--line-strong), var(--line-strong)) center / 100% 1px no-repeat;
}
.tl-grip:hover, .is-resizing-ui .tl-grip { background: linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat; }
.tl-grip[hidden] { display: none; }
/* Rand der Timeline zur Zeichenfläche hin (js/frames.js makeHeightGrip):
   ziehen = Höhe, also mehr oder weniger Ebenen-Zeilen. Die Vorschaubilder
   behalten ihre Größe. Unten angedockt an der Oberkante, sonst unten. */
#timeline:not(.is-floating) { position: relative; }
.tl-hgrip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  height: 6px;
  cursor: row-resize;
  touch-action: none;
  background: linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat;
  opacity: 0;
  transition: opacity 120ms;
}
.bar-zone[data-zone="bottom"] > #timeline > .tl-hgrip { top: -1px; bottom: auto; }
.tl-hgrip:hover, .tl-hgrip.is-active { opacity: 1; }
.tl-hgrip[hidden] { display: none; }
/* Das Raster (js/frames.js): links je Ebene eine Beschriftung, oben je
   Frame ein Bildchen, darunter je Ebene und Frame eine Zelle. Es steht in
   einer eigenen Zeile unter den Knöpfen und nimmt die ganze Breite.
   Spaltenbreite und Anzahl setzt js/frames.js (--tl-cell, --tl-n, --tl-l).
   Ab sechs Ebenen scrollt es auch nach unten — die Kopfzeile und die
   Ebenen-Spalte kleben dabei am Rand. */
.tl-frames {
  --tl-lw: 148px;
  --tl-row: 22px;
  order: 99;
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: var(--tl-lw) repeat(var(--tl-n, 1), var(--tl-cell, 44px));
  grid-template-rows: var(--tl-cell, 44px) repeat(var(--tl-l, 1), var(--tl-row));
  gap: 2px;
  min-width: 0;
  max-height: calc(var(--tl-tagh, 0px) + var(--tl-cell, 44px) + 6 * (var(--tl-row) + 2px) + 6px);
  padding-bottom: 2px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.tl-corner {
  position: sticky;
  left: 0; top: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 0 4px 2px 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--surface-1);
}
.tl-corner-btns { display: flex; gap: 2px; }
/* Reiter und Wegweiser gibt es nur am Handy (Abschnitt 17). */
.tl-mtabs, .tl-corner-frames { display: none; }
.tl-corner-btns .icon-btn { width: 22px; height: 22px; padding: 0; }
.tl-corner-btns svg { width: 13px; height: 13px; }
.tl-layer.is-dragging { z-index: 4; opacity: 0.9; box-shadow: var(--shadow-md); cursor: grabbing; }
.tl-rename { flex: 1 1 auto; min-width: 0; height: 18px; padding: 0 4px; font-size: var(--fs-xs); }
.tl-layer {
  position: sticky;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0 6px 0 2px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: 2px 0 0 var(--surface-1);
  font-size: var(--fs-xs);
  color: var(--text-dim);
  cursor: pointer;
  /* Senkrecht ziehen ordnet die Ebene um — gescrollt wird über die Zellen. */
  touch-action: pan-x;
}
.tl-layer:hover { color: var(--text); }
.tl-layer.is-active { background: var(--accent-bg); color: var(--accent); }
.tl-layer.is-hidden .tl-lname { opacity: 0.45; }
.tl-lname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-eye, .tl-lock, .tl-cont { flex: none; width: 20px; height: 20px; padding: 0; }
.tl-eye svg, .tl-lock svg, .tl-cont svg { width: 13px; height: 13px; }
.tl-lock, .tl-cont { opacity: 0.45; }
.tl-lock.is-on, .tl-cont.is-on { opacity: 1; color: var(--accent); }
/* Zelle: ein Punkt — gefüllt, wenn die Ebene in diesem Frame etwas enthält. */
.tl-cel {
  appearance: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer;
  touch-action: pan-x pan-y;
}
.tl-cel::after {
  content: '';
  width: 7px; height: 7px;
  border: 1.5px solid var(--text-dim);
  border-radius: 50%;
  opacity: 0.6;
}
.tl-cel.is-filled::after { background: var(--text-dim); opacity: 1; }
.tl-cel.is-hidden::after { opacity: 0.3; }
.tl-cel:hover { background: var(--surface-3); }
.tl-cel.is-row, .tl-cel.is-col { background: var(--surface-3); }
.tl-cel.is-marked { background: var(--accent-bg); }
.tl-cel.is-active { box-shadow: inset 0 0 0 1px var(--accent); }
/* Bereich (Shift / Ziehen) und wohin er beim Ziehen fiele. */
.tl-cel.is-range { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent-line); }
.tl-cel.is-drop { box-shadow: inset 0 0 0 2px var(--accent); }
.tl-cel.is-drop.is-drop-bad { box-shadow: inset 0 0 0 2px var(--danger); }
.tl-frames.is-copying .tl-cel.is-drop::before { content: '+'; position: absolute; top: 0; right: 3px; font-size: 10px; line-height: 1; color: var(--accent); }
/* Verknüpfte Zellen: ein Strich zum Nachbarn, der dasselbe Bild zeigt (●━●).
   Er reicht über die 2 px Lücke zwischen den Zellen hinweg. */
.tl-cel { position: relative; }
.tl-cel.is-linked::after { border-style: solid; }
.tl-cel.link-l { background-image: linear-gradient(var(--text-dim), var(--text-dim)); background-repeat: no-repeat; background-size: calc(50% + 2px) 2px; background-position: -2px 50%; }
.tl-cel.link-r { background-image: linear-gradient(var(--text-dim), var(--text-dim)); background-repeat: no-repeat; background-size: 50% 2px; background-position: 100% 50%; }
.tl-cel.link-l.link-r { background-size: calc(100% + 2px) 2px; background-position: -2px 50%; }
.tl-cel.is-active.link-l, .tl-cel.is-active.link-r { background-image: linear-gradient(var(--accent), var(--accent)); }
.tl-cel.is-active::after { border-color: var(--accent); }
.tl-cel.is-active.is-filled::after { background: var(--accent); }
.tl-frame {
  appearance: none;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--tl-cell, 44px);
  height: var(--tl-cell, 44px);
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  cursor: pointer;
  touch-action: pan-x pan-y;
}
/* Die Bildchen kleben beim Scrollen nach unten oben fest — unter den Tags. */
.tl-frame { position: sticky; top: var(--tl-tagh, 0px); z-index: 2; }
/* Frame-Tags (js/frames.js, js/tags.js): ein Balken je Tag über seinen Frames. */
.tl-tag {
  position: sticky;
  z-index: 2;
  min-width: 0;
  height: 16px;
  padding: 0 6px;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--tag) 30%, var(--surface-1));
  box-shadow: inset 3px 0 0 var(--tag);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 16px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  cursor: pointer;
}
.tl-tag:hover { background: color-mix(in srgb, var(--tag) 45%, var(--surface-1)); }
.tag-editor {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 15rem;
  padding: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
}
.tag-editor[hidden] { display: none; }
.tg-row { display: flex; align-items: center; gap: var(--sp-2); }
.tg-row .field-label { width: 4.5rem; flex: none; }
.tg-row input[type="number"] { width: 3.5rem; }
.tg-row select { flex: 1 1 auto; }
.tg-colors { display: flex; flex-wrap: wrap; gap: 4px; }
.tg-swatch { width: 22px; height: 22px; padding: 0; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.tg-swatch.is-active { border-color: var(--text); }
.tg-actions { justify-content: flex-end; flex-wrap: wrap; }
.tl-frame canvas {
  display: block;
  image-rendering: pixelated;
  background:
    repeating-conic-gradient(var(--surface-3) 0% 25%, transparent 0% 50%) 0 0 / 8px 8px;
}
/* Die Nummer liegt auf dem Bild statt darunter: das spart die ganze Zeile
   und das Bildchen bekommt den Platz. Der Verlauf hält sie auch über hellen
   Pixeln lesbar. */
.tl-n {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3px 0 1px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font: 600 10px/1 var(--mono);
  color: var(--text-dim);
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.tl-frame.has-dur .tl-n::after { content: ' ⏱'; }
.tl-frame:hover { border-color: var(--line-strong); }
/* Mehrfachauswahl (Strg/Shift): gefuellt statt umrandet — so bleibt der
   aktive Frame auch innerhalb einer Auswahl erkennbar (js/frames.js). */
.tl-frame.is-marked { border-color: var(--accent-line); background: var(--accent-bg); }
.tl-frame.is-marked .tl-n { color: var(--accent); }
.tl-frame.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tl-frame.is-active .tl-n { color: var(--accent); }
.tl-frame.is-dragging { z-index: 2; opacity: 0.85; cursor: grabbing; box-shadow: var(--shadow-md); }
#tl-play.is-active, #tl-onion.is-active,
#tl-multi.is-active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-line); }
/* Mehrfachauswahl gibt es am Rechner ueber Strg und Shift — der Knopf ist
   nur fuer Finger da (styles.css, Abschnitt Responsive). */
#tl-multi { display: none; }
/* Schattieren umdrehen: nur für Finger — mit Maus macht das der Rechtsklick,
   auch im schmalen Fenster (js/app.js shadeUp). */
#shade-rev-btn { display: none; }
@media (pointer: coarse) { #shade-rev-btn { display: inline-flex; } }
.tl-num input { width: 4.5rem; }
/* Deckkraft: drei Stellen, das „%" direkt dahinter statt hinter der
   breiten Wertspalte. */
#tl-op-field { gap: var(--sp-1); }
#tl-op-field input { width: 3.5rem; }
#tl-op-field .field-value { min-width: 0; }
/* Sprungfeld: hier stehen nur Frame-Nummern, drei Stellen reichen. Das
   "/ n" klebt direkt am Feld statt hinter der breiten Wertspalte. */
.tl-go-field { gap: var(--sp-1); margin-left: auto; }
.tl-go-field input { width: 3.5rem; }
/* "/ 21" bleibt zusammen: wird die Zeile eng (ab zwei Stellen plus
   Scrollbalken in der Frame-Reihe), rutschte die Zahl sonst unter den
   Schrägstrich. */
#tl-total { min-width: 0; text-align: left; white-space: nowrap; }
#timeline.is-vertical .tl-num { flex-direction: row; }

/* Ohne Vorschaubilder (Timeline-Menü): nur die Nummer in der Kopfzeile. */
.tl-frames.no-thumbs .tl-frame { height: 18px; padding: 0; }
.tl-frames.no-thumbs .tl-frame canvas { display: none; }
.tl-frames.no-thumbs .tl-n { position: static; padding: 0; background: none; }

/* Timeline-Menü (js/tlmenu.js): am breiten Fenster ein Fenster am Knopf. */
#tl-settings[aria-expanded="true"] { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-line); }
.tl-menu {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 20rem;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
}
.tl-menu[hidden] { display: none; }
.tl-menu-head { display: flex; align-items: center; justify-content: space-between; }
.tm-sec { display: flex; flex-direction: column; gap: var(--sp-2); }
.tm-sec[hidden] { display: none; }
.tm-sec + .tm-sec { padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.tm-h {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.tm-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.tm-seg .btn.is-active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-line); }
.tl-menu input[type="range"] { flex: 1 1 auto; min-width: 0; }
.tl-menu #tl-dur { width: 5rem; }
#tm-reset { align-self: flex-start; }

/* Farbzeile umsortieren (js/qpdrag.js): angehobenes Feld, Strich am Ziel. */
.qp-swatch.is-lifted, .qp-mini.is-lifted { opacity: 0.45; transform: scale(0.92); }
.qp-swatch.is-drop-l, .qp-mini.is-drop-l { box-shadow: -3px 0 0 var(--accent); }
.qp-swatch.is-drop-r, .qp-mini.is-drop-r { box-shadow: 3px 0 0 var(--accent); }
#qp-sort { padding: 5px 8px; flex: none; }

/* Anfasser einer Auswahl (js/scale.js) */
#editor-canvas-wrap[data-handle="nw"], #editor-canvas-wrap[data-handle="se"] { cursor: nwse-resize; }
#editor-canvas-wrap[data-handle="ne"], #editor-canvas-wrap[data-handle="sw"] { cursor: nesw-resize; }
#editor-canvas-wrap[data-handle="n"],  #editor-canvas-wrap[data-handle="s"]  { cursor: ns-resize; }
#editor-canvas-wrap[data-handle="e"],  #editor-canvas-wrap[data-handle="w"]  { cursor: ew-resize; }
#editor-canvas-wrap.is-tile-mode #brush-cursor { display: none; }
#gd-show.is-active, #gd-lock.is-active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-line); }

/* Vorschau-Panel (js/preview.js) — der ganze Sprite, ohne Gitter.
   Das Schachbrett liegt auf dem BILD, nicht auf der Box: es zeigt genau die
   Fläche des Sprites und was darin transparent ist — egal, wie groß man das
   Panel zieht. Ein Feld je Sprite-Pixel (--chk setzt js/preview.js), der
   feine Rahmen zeigt den Rand auch bei fast leerem Sprite. */
.preview-box {
  display: grid;
  place-items: center;
  min-height: 96px;
  max-height: 40vh;
  overflow: auto;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
#preview-canvas {
  display: block;
  image-rendering: pixelated;
  background:
    repeating-conic-gradient(var(--surface-3) 0% 25%, var(--surface-2) 0% 50%) 0 0 / var(--chk, 12px) var(--chk, 12px);
  outline: 1px solid var(--line-strong);
}

/* Ebenen-Panel (js/layers.js) — oberste Ebene oben */
.layer-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 40vh;
  overflow-y: auto;
}
.ly-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--surface-2);
  cursor: pointer;
  touch-action: pan-x;
}
.ly-row:hover { border-color: var(--line-strong); }
.ly-row.is-active { border-color: var(--accent-line); background: var(--accent-bg); }
.ly-row.is-hidden .ly-thumb,
.ly-row.is-hidden .ly-name { opacity: 0.45; }
.ly-row.is-dragging { position: relative; z-index: 2; opacity: 0.85; box-shadow: var(--shadow-md); cursor: grabbing; }
.ly-row .icon-btn { flex: none; }
.ly-lock.is-on { color: var(--accent); }
/* Masken-Bildchen neben dem Ebenen-Bildchen (js/layers.js). */
.ly-mask {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  cursor: pointer;
}
.ly-mask[hidden] { display: none; }
.ly-mask canvas { image-rendering: pixelated; }
.ly-mask.is-editing { border-color: #ff6b6b; box-shadow: 0 0 0 1px #ff6b6b; }
.ly-mask.is-off canvas { opacity: 0.35; }
.ly-mask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.ly-mask-actions [hidden] { display: none; }
#ly-mask-edit.is-active { border-color: #ff6b6b; color: #ff9b9b; }
/* Körperteil: Rolle und Gelenk der aktiven Ebene (js/rig.js). Die Auswahl
   nimmt den Platz, der übrig bleibt — der Gelenk-Knopf behält seine Breite. */
.ly-part-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.ly-part-actions [hidden] { display: none; }
.ly-part-actions select { flex: 1 1 7rem; min-width: 0; }
/* Freies Teil: Ausschlag und Takt stehen je in einer eigenen Zeile, damit
   die Regler breit genug bleiben, um sie zu treffen. */
.ly-free { display: flex; flex: 1 0 100%; align-items: center; gap: var(--sp-2); }
.ly-free input { flex: 1 1 auto; min-width: 0; }
.ly-free .field-value { flex: none; min-width: 3em; text-align: right; }
/* Gelenk setzen: dieselbe gelbe Marke wie der Ring auf der Fläche. */
#ly-part-pivot.is-active { border-color: #ffcc33; color: #ffcc33; }
#editor-canvas-wrap.is-pivot-pick #editor-canvas { cursor: crosshair; }

/* „Bewegung erzeugen“ (js/rigui.js): links die Einstellungen, rechts die
   laufende Vorschau. Schmal untereinander — der Dialog soll aufs Handy passen. */
/* Breiter als ein gewöhnlicher Dialog: links die Einstellungen, rechts die
   Vorschau — nebeneinander sieht man gleich, was der Regler tut. */
.modal.rig-modal { width: min(560px, calc(100vw - 32px)); max-width: none; }
.rig-gen { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; }
.rig-gen-form { flex: 1 1 15rem; min-width: 0; }
.rig-gen-preview {
  display: grid;
  justify-items: center;
  gap: var(--sp-1);
  flex: 0 0 auto;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  background: repeating-conic-gradient(var(--surface-3) 0% 25%, transparent 0% 50%) 0 0 / 8px 8px;
}
/* Anhalten und Bild für Bild: der Regler nimmt die Breite der Vorschau. */
.rig-scrub { display: flex; align-items: center; gap: var(--sp-1); width: 100%; }
.rig-scrub input { flex: 1 1 auto; min-width: 0; }
/* Pixel bleiben Pixel, auch wenn die Vorschau hochskaliert ist. */
#rig-preview { image-rendering: pixelated; }
/* Maske bearbeiten: roter Rahmen um die Zeichenfläche. */
#editor-canvas-wrap.is-mask-edit #editor-canvas { outline: 2px solid #ff6b6b; outline-offset: 2px; }
.ly-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background:
    repeating-conic-gradient(var(--surface-3) 0% 25%, transparent 0% 50%) 0 0 / 8px 8px;
}
.ly-thumb canvas { display: block; image-rendering: pixelated; }
.ly-name { flex: 1; min-width: 0; overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.ly-op { flex: none; font: 600 10px/1 var(--mono); color: var(--text-dim); }
.ly-rename { flex: 1; min-width: 0; }
.ly-actions { align-self: flex-start; }

/* Zeichenfläche */
#editor-canvas-area {
  display: grid;
  place-items: safe center;
  flex: 1;
  min-height: 0;
  padding: var(--sp-5);
  overflow: auto;
}
#editor-canvas-wrap {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  cursor: crosshair;
  line-height: 0;
}
#editor-canvas { display: block; position: relative; z-index: 1; touch-action: none; image-rendering: pixelated; }
/* Kachelmodus: Kopien hinter dem Bild, über den Rand von #editor-canvas-wrap
   hinaus (Lage und Größe setzt js/render.js). */
#editor-tiled { position: absolute; z-index: 0; touch-action: none; image-rendering: pixelated; }
#editor-tiled[hidden] { display: none; }
/* Gitterlinien über dem Canvas: eine Linie links und oben je Zelle, die
   letzte rechts und unten als Rand. --cell setzt js/render.js. */
#editor-gridlines {
  position: absolute;
  left: 0; top: 0;
  z-index: 1;
  pointer-events: none;
  --line: rgba(255, 255, 255, 0.07);
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: var(--cell, 16px) var(--cell, 16px);
  box-shadow: inset -1px -1px 0 var(--line);
}
#editor-gridlines.is-light { --line: rgba(0, 0, 0, 0.09); }
#editor-gridlines[hidden] { display: none; }
#editor-canvas-wrap.is-eyedrop,
#editor-canvas-wrap[data-tool="eraser"],
#editor-canvas-wrap[data-tool="wand"] { cursor: cell; }
#editor-canvas-wrap[data-tool="select"],
#editor-canvas-wrap[data-tool="lasso"],
#editor-canvas-wrap[data-tool="line"],
#editor-canvas-wrap[data-tool="rect"],
#editor-canvas-wrap[data-tool="ellipse"] { cursor: crosshair; }
#editor-canvas-wrap[data-tool="magic"] { cursor: cell; }
/* Hand-Werkzeug: greifen statt zeichnen (js/view.js setzt .is-pannable auf
   der Flaeche drumherum, damit auch neben dem Bild geschoben wird). */
#editor-canvas-wrap[data-tool="pan"] { cursor: grab; }
#editor-canvas-area.is-panning #editor-canvas-wrap[data-tool="pan"] { cursor: grabbing; }
#editor-canvas-wrap.is-move { cursor: move; }

/* Auswahl-Buttons in der Werkzeugleiste — kompakter als normale Buttons */
#select-group .btn,
#mirror-group .btn,
#shape-group .btn,
#shade-group .btn { padding: 5px 8px; }
#shade-gen-count { width: 3.4rem; }
/* Pinselform (js/brushshape.js): zwei kleine Icon-Knöpfe hinter der Größe. */
#brush-shape .btn { padding: 5px 7px; }
#brush-shape[hidden] { display: none; }
#brush-square-btn.is-active, #brush-round-btn.is-active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-line); }

/* Schattieren (js/shade.js): die Farbreihe als kleine Felder. */
.shade-ramp { display: flex; align-items: center; gap: 3px; min-height: 22px; }
.shade-sw {
  width: 22px; height: 22px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.shade-sw:hover { border-color: var(--text); }
.shade-empty { font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap; }
#shade-rev-btn.is-active, #shade-soft-btn.is-active,
#sel-op-new.is-active, #sel-op-add.is-active, #sel-op-sub.is-active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-line); }
/* Farben der Reihe in Farbzeile, Palette und Bildfarben: ein Strich
   darunter. Die Markierung der Malfarbe tritt beim Schattieren zurück —
   sie spielt dann keine Rolle. */
:is(.qp-swatch, .qp-mini, .pal-sw, .fc-swatch).in-shade {
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  position: relative;
  z-index: 2;
}
.is-shading :is(.qp-swatch, .qp-mini, .pal-sw, .fc-swatch).is-active:not(.in-shade) { box-shadow: none; }

/* Die Werkzeugleiste ist lang geworden — bei schmalen Fenstern umbrechen
   statt abschneiden. */
#toolbar { flex-wrap: wrap; row-gap: var(--sp-2); }

/* Zweite Zeile am Rechner: Symmetrie, dahinter die Einstellungen des
   Werkzeugs (Groesse, Staerke, Toleranz, Clean Stroke, Gefuellt, Auswahl).
   Vorher haengten die Einstellungen hinten an der ersten Zeile und rutschten
   je nach Fensterbreite hin und her; ein Umbruch nur vor ihnen machte
   dagegen eine dritte Zeile auf, sobald Symmetrie aus Platzmangel schon in
   Zeile zwei stand. Jetzt beginnt Zeile zwei mit Symmetrie — eine
   dritte gibt es nur, wenn Zeile zwei wirklich voll ist. Brechen schon die
   Werkzeuge um, entfällt der Umbruch (js/toolwrap.js, .is-tools-wrapped):
   Symmetrie läuft dann in Zeile zwei hinter ihnen weiter.
   Der Umbruch ist ein leeres Element, eine ganze Zeile breit; der
   Trennstrich davor waere das letzte in Zeile eins und faellt weg.
   Am Handy (bis 1100 px) stecken die Einstellungen in einer eigenen Zeile
   (js/layout.js) — dort bricht hier nichts um. */
.tool-break { display: none; }
@media (min-width: 1100.02px) {
  #toolbar > .tool-break { display: block; flex-basis: 100%; height: 0; }
  #toolbar > .tool-sep--mirror { display: none; }
  /* Senkrecht angedockt ist alles eine Spalte — kein Umbruch. */
  #toolbar.is-vertical > .tool-break,
  #toolbar.is-tools-wrapped > .tool-break { display: none; }
  #toolbar.is-vertical > .tool-sep--mirror,
  #toolbar.is-tools-wrapped > .tool-sep--mirror { display: block; }
  /* Ohne Einstellung (Hand, Fuellen) stuende der Strich allein am Ende. */
  #toolbar:not(:has(> #brush-size-group:not([hidden]), > #strength-group:not([hidden]),
               > #tolerance-group:not([hidden]), > #pixel-perfect-group:not([hidden]),
               > #shape-group:not([hidden]), > #shade-group:not([hidden]), > #select-group:not([hidden]))) > .tool-sep--opts {
    display: none;
  }
}

#template-overlay {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 2;
  width: 100%; height: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  pointer-events: none;
}
#brush-cursor {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
#brush-cursor.tool-eraser { border-color: var(--danger); }
#brush-cursor.tool-spray { border-style: dashed; }

#info-bar {
  flex-shrink: 0;
  min-height: 26px;
  padding: 5px var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--surface-1);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* ── 7 · Farb-Panel ─────────────────────────────────────────────── */
.current-color {
  display: flex;
  position: relative;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.current-color:hover { border-color: var(--accent-line); background: var(--surface-2); }
.cc-swatch {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}
.cc-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.cc-label {
  overflow: hidden;
  font-size: var(--fs-xs);
  color: var(--text-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-hex { font-family: var(--mono); font-size: var(--fs-md); color: var(--text); }
.cc-pick { color: var(--text-dim); }
.current-color:hover .cc-pick { color: var(--accent); }

.palette-picker { display: flex; align-items: center; gap: var(--sp-1); }
.palette-picker .input { flex: 1; }
.palette-picker .pal-status { flex: 1; }

/* Paletten-Auswahl (js/palpicker.js): Suche, Filter, klappbare Gruppen,
   jede Palette mit Farbstreifen. */
.pp { display: flex; flex-direction: column; gap: var(--sp-2); }
.pp-tools { display: flex; flex-direction: column; gap: var(--sp-1); }
.pp-filter { display: flex; gap: 2px; }
.pp-chip {
  flex: 1;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-dim);
  font: 600 var(--fs-xs)/1.4 var(--font);
  cursor: pointer;
}
.pp-chip:hover { color: var(--text); }
.pp-chip[aria-pressed="true"] { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent); }
.pp-list {
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.pp-group + .pp-group { border-top: 1px solid var(--line); }
.pp-group-head {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  width: 100%;
  padding: 6px var(--sp-2);
  border: 0;
  background: var(--surface-2);
  color: var(--text-muted);
  font: 700 var(--fs-xs)/1 var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 1;
}
.pp-group-head:hover { color: var(--text); }
.pp-caret::before { content: '▾'; display: inline-block; width: 1em; transition: transform 0.15s; }
.pp-group-head[aria-expanded="false"] .pp-caret::before { transform: rotate(-90deg); }
.pp-count { margin-left: auto; color: var(--text-dim); font-family: var(--mono); letter-spacing: 0; }
.pp-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "name active size" "strip strip strip";
  align-items: center;
  gap: 3px var(--sp-2);
  width: 100%;
  padding: 5px var(--sp-2);
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font: 500 var(--fs-sm)/1.2 var(--font);
  text-align: left;
  cursor: pointer;
}
.pp-item:hover { background: var(--surface-2); color: var(--text); }
.pp-item.is-selected { background: var(--accent-bg); border-left-color: var(--accent); color: var(--text); }
.pp-name { grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-active {
  grid-area: active;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--primary-bg);
  color: var(--primary);
  font-size: var(--fs-xs);
}
.pp-size { grid-area: size; font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-dim); }
.pp-strip { grid-area: strip; display: flex; height: 7px; border-radius: 2px; overflow: hidden; }
.pp-strip i { flex: 1; }
.pp-none { margin: 0; padding: var(--sp-3); color: var(--text-dim); font-size: var(--fs-sm); }

/* Paletten-Raster: Vorschau der angezeigten Palette. 8 Spalten bei kleinen
   Paletten, 16 ab 16 Farben — 256 Farben sind dann genau 16 × 16. */
.pal-status { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.pal-status.is-preview { color: var(--accent); }
.pal-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr));
  gap: 2px;
}
.pal-sw {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  cursor: pointer;
}
.pal-sw:hover { border-color: var(--text-muted); transform: scale(1.12); position: relative; z-index: 1; }
.pal-sw.is-active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent); position: relative; z-index: 2; }
/* Leeres Feld am Ende: neue Farbe hinzufügen. */
.pal-add {
  display: grid;
  place-items: center;
  border-style: dashed;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-md);
  line-height: 1;
}
.pal-add:hover { color: var(--text); background: var(--surface-3); }
/* Rechtsklick-Menü eines Farbfelds (render.js) — sieht aus wie die Menüleiste. */
.pal-menu { position: fixed; top: 0; left: 0; min-width: 11rem; }
.pal-menu .mb-item { padding-left: 10px; }
.pal-menu .mb-item:disabled { color: var(--text-dim); cursor: default; background: transparent; }
.pal-pick { min-height: 1.2em; margin: 0; font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-dim); }

/* ── 8 · Modale + Toast ─────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
}
.modal-overlay.open { display: flex; }

.modal {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 400px;
  max-width: 100%;
  max-height: 90vh;
  padding: var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.modal--sm { width: 340px; }
.modal--lg { width: 560px; }

.modal-head { display: flex; align-items: center; gap: var(--sp-2); }
.modal-head .modal-title { flex: 1; }
/* Hilfe → „Was ist neu?“ (js/whatsnew.js) */
.news-body { display: grid; gap: var(--sp-2); max-width: 52ch; }
.news-version { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.news-version:first-child { margin-top: 0; }
.news-list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--sp-1); line-height: 1.45; }
.modal-title { font-size: var(--fs-xl); font-weight: 700; }
.modal-intro--sub {
  margin-top: calc(var(--sp-2) * -1);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.modal-intro { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); }

.form-row { display: flex; flex-direction: column; gap: var(--sp-1); }
/* Author-display schlägt das hidden-Attribut — darum explizit ausblenden. */
.form-row[hidden] { display: none; }
.form-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.form-note { font-weight: 400; color: var(--text-dim); }

.modal-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); }
.modal-actions .btn { flex: 1; padding: 9px 12px; font-size: var(--fs-md); }

/* Bis zu 255 Zeilen — die Liste scrollt, Name und Knöpfe bleiben stehen. */
.pal-rows { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 46vh; overflow-y: auto; }
.pal-color-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.pal-idx {
  width: 14px;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-dim);
}
/* Name der Farbe — sieht aus wie Text, bis man hineinklickt. */
.pal-name {
  flex: 1;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
}
.pal-name::placeholder { color: var(--text-muted); }
.pal-name:hover { border-color: var(--line); }
.pal-name:focus { border-color: var(--accent-line); background: var(--surface-1); outline: none; }
.pal-hex { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-dim); }

/* Material je Palettenfarbe (nur bei „JSON (Spiel)“) */
.material-box { display: flex; flex-direction: column; gap: var(--sp-1); }
.material-box[hidden] { display: none; }
.material-head { font-size: var(--fs-sm); font-weight: 700; color: var(--text-muted); }
.material-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--sp-1); }
.material-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-1);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.material-row select { flex: 1; min-width: 0; }
.material-swatch {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* Hilfe-Inhalte */
.help-h {
  margin-top: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--accent);
}
.help-list { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-md); color: var(--text-muted); }
.help-list b, .help-ol b { color: var(--text); }
.help-ol { font-size: var(--fs-md); line-height: 1.8; color: var(--text-muted); }
.help-shortcuts { display: flex; flex-direction: column; gap: 2px; }
.sc-row {
  display: flex;
  gap: var(--sp-3);
  padding: 3px 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--line);
}
.sc-row b { flex: 0 0 160px; color: var(--text); }
.sc-row span { color: var(--text-dim); }
.kbd {
  padding: 1px 5px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--text);
}

/* Toast */
/* ── Rückfrage und Hinweis ──────────────────────────────────────
   Vorher sahen beide gleich aus: ein kleiner Kasten unten mit 12px-Text.
   Eine Rückfrage wurde dadurch leicht übersehen — und wer sie übersieht,
   wartet auf etwas, das nie passiert. Jetzt trägt die Rückfrage die
   Aufmerksamkeit, die sie verlangt, und der Hinweis bleibt beiläufig. */
#confirm-toast {
  display: none;
  position: fixed;
  z-index: 200;
}
#confirm-toast.visible { display: flex; }

#confirm-toast-box {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}
#confirm-toast-msg { margin: 0; flex: 1; color: var(--text); }
#confirm-toast-btns { display: flex; gap: var(--sp-2); flex-shrink: 0; }

/* ── Rückfrage: mittig, abgedunkelter Hintergrund, nicht zu übersehen ── */
#confirm-toast.is-confirm {
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(8, 8, 12, 0.62);
  animation: confirmIn 0.14s ease-out;
}
#confirm-toast.is-confirm #confirm-toast-box {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-5);
  width: min(420px, 100%);
  padding: var(--sp-5);
  animation: confirmBoxIn 0.16s ease-out;
}
#confirm-toast.is-confirm #confirm-toast-msg {
  font-size: var(--fs-xl);
  line-height: 1.45;
}
#confirm-toast.is-confirm #confirm-toast-btns { justify-content: flex-end; }
#confirm-toast.is-confirm .btn { padding: 9px 18px; font-size: var(--fs-lg); }

/* ── Hinweis: unten, beiläufig, verschwindet von selbst ── */
#confirm-toast.is-info {
  bottom: var(--sp-5);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px));
  animation: infoIn 0.18s ease-out;
}
#confirm-toast.is-info #confirm-toast-box {
  padding: var(--sp-4) var(--sp-5);
}
#confirm-toast.is-info #confirm-toast-msg {
  font-size: var(--fs-lg);
  line-height: 1.5;
}

@keyframes confirmIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirmBoxIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes infoIn       { from { opacity: 0; transform: translate(-50%, 12px); }
                          to   { opacity: 1; transform: translate(-50%, 0); } }
/* Auf dem Handy steht der Hinweis ueber die volle Breite — er wird nicht
   per translateX zentriert, also darf die Animation ihn nicht verschieben. */
@keyframes infoInMobile { from { opacity: 0; transform: translateY(12px); }
                          to   { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #confirm-toast, #confirm-toast-box { animation: none; }
}

/* ── Bitty, der Helfer (js/helper.js, Figur aus js/bitty.js) ──────────
   Sitzt rechts in der Kopfzeile; die Sprechblase liegt über den Panels,
   aber unter Dialogen und Rückfragen. Bewusst ruhig gehalten: keine
   Signalfarben; die Tour umrandet in Bittys Blau (--accent). */
.bitty-btn {
  appearance: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  /* ragt oben und unten in den Rand der Kopfzeile — sie wird nicht höher */
  margin-block: -6px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: none;
  cursor: pointer;
}
.bitty-btn:hover, .bitty-btn[aria-expanded="true"] { background: var(--surface-3); border-color: var(--line); }
.bitty-btn canvas { width: 32px; height: 32px; image-rendering: pixelated; }
/* Vollbild: die Kopfzeile ist weg — Bitty sitzt dann in der Werkzeugleiste
   (js/fullscreen.js), rechts am Ende der ersten Zeile bzw. unten in der Spalte. */
#toolbar > .bitty-btn { margin: 0 0 0 auto; width: 36px; height: 36px; }
#toolbar > .bitty-btn canvas { width: 28px; height: 28px; }
#toolbar.is-vertical > .bitty-btn { margin: 0 auto; }
@media (max-width: 1100px) {
  /* Am Handy ist die Kopfzeile voll mit Menütiteln */
  .bitty-btn { width: 34px; height: 34px; margin-block: -4px; }
  .bitty-btn canvas { width: 28px; height: 28px; }
}

.bitty-bubble {
  position: fixed;
  z-index: 90;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: var(--shadow-md);
  animation: bittyIn 0.16s ease-out;
}
.bitty-bubble[hidden] { display: none; }
/* Zipfel: zeigt nach oben aufs Ziel, bei .is-above nach unten */
.bitty-bubble::before {
  content: '';
  position: absolute;
  left: calc(var(--tail-x, 50%) - 6px);
  top: -7px;
  width: 12px; height: 12px;
  background: inherit;
  border: inherit;
  border-right: 0; border-bottom: 0;
  transform: rotate(45deg);
}
.bitty-bubble.is-above::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.bitty-bubble.no-tail::before { display: none; }
.bitty-step {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.bitty-text {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.5;
}
.bitty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
/* Suche in der Blase */
.bitty-bubble:has(.bitty-search:not([hidden])) { width: min(340px, calc(100vw - 16px)); }
.bitty-search[hidden], .bitty-body[hidden], .bitty-results[hidden], .bitty-none[hidden] { display: none; }
.bitty-q { width: 100%; }
.bitty-search + .bitty-body { margin-top: var(--sp-3); }
.bitty-results {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
  max-height: min(320px, 50vh);
  overflow-y: auto;
}
.bitty-hit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-2);
  padding: 6px var(--sp-2);
  border-radius: var(--r-md);
  cursor: pointer;
}
.bitty-hit[aria-selected="true"] { background: var(--surface-4); }
.bitty-kind {
  grid-row: span 2;
  align-self: start;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.bitty-hit-name { font-size: var(--fs-md); color: var(--text); }
.bitty-hit-sub {
  font-size: var(--fs-sm);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bitty-none { margin: var(--sp-2) 0 0; font-size: var(--fs-md); color: var(--text-muted); }

/* „Welche Formate gehen?“ unter einem Import-Fehler */
.bitty-help-link { margin-top: var(--sp-2); }
.bitty-help-link[hidden] { display: none; }

/* Tour und Suche: Markierung und Blase im Blau von Bitty */
.bitty-bubble.is-tour { border-color: var(--accent); }
.bitty-flash {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Rahmen um das, was die Tour gerade zeigt: eigene Ebene über der Seite,
   damit kein Rand ihn abschneidet (helper.js, placeRing). Unter der Blase. */
.bitty-ring {
  position: fixed;
  z-index: 89;
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  pointer-events: none;
}
.bitty-ring[hidden] { display: none; }
@keyframes bittyIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .bitty-bubble { animation: none; }
}

/* ── 9 · Vollbild ───────────────────────────────────────────────── */
/* Im Vollbild verschwindet nur die Kopfzeile — Dock, angepinnte Panels
   und schwebende Fenster bleiben, damit man weiterarbeiten kann. */
body.editor-fullscreen #topbar { display: none; }

/* ── Vollbild (js/fullscreen.js) ─────────────────────────────────────
   Weg sind Menüleiste, Kopfzeile über der Fläche und die Seitenleisten;
   Werkzeugleiste, Farbzeile und Timeline bleiben. Die Seitenleisten liegen
   dann über der Fläche und gleiten herein, wenn die Maus an den Rand kommt
   (body.fs-peek-left / -right). */
body.editor-fullscreen #stage-head { display: none; }
.fs-exit, .fs-grip { display: none; }
body.editor-fullscreen .fs-exit {
  display: inline-flex;
  position: fixed;
  top: 10px; right: 10px;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, right 0.18s ease;
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
}
body.editor-fullscreen .fs-exit.is-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 1100.02px) {
  /* overflow: die versteckte rechte Leiste liegt rechts neben dem Fenster —
     ohne Abschneiden gäbe es einen waagerechten Scrollbalken. */
  body.editor-fullscreen #workspace { grid-template-columns: minmax(0, 1fr); overflow: hidden; }
  body.editor-fullscreen .rail {
    position: absolute;
    top: 0; bottom: 0;
    z-index: 45;
    box-shadow: var(--shadow-lg);
    transition: transform 0.18s ease;
  }
  body.editor-fullscreen #rail-left { left: 0; transform: translateX(calc(-100% - 12px)); }
  body.editor-fullscreen #rail-right { right: 0; transform: translateX(calc(100% + 12px)); }
  body.editor-fullscreen.fs-peek-left #rail-left,
  body.editor-fullscreen.fs-peek-right #rail-right { transform: none; }
  /* Griffe nur ohne Maus: ein schmaler Streifen mitten am Rand. */
  @media (pointer: coarse) {
    body.editor-fullscreen .fs-grip {
      display: block;
      position: fixed;
      top: 50%;
      z-index: 46;
      width: 14px;
      height: 64px;
      margin-top: -32px;
      padding: 0;
      border: 1px solid var(--line-strong);
      background: var(--surface-2);
      opacity: 0.8;
    }
    .fs-grip--left { left: 0; border-left: 0; border-radius: 0 var(--r-md) var(--r-md) 0; }
    .fs-grip--right { right: 0; border-right: 0; border-radius: var(--r-md) 0 0 var(--r-md); }
    body.fs-peek-left .fs-grip--left, body.fs-peek-right .fs-grip--right { display: none; }
  }
}

/* ── 10 · Responsive ────────────────────────────────────────────── */
@media (max-width: 1280px) {
  :root { --rail-w: 232px; }
  .tool-name { display: none; }
}

@media (max-width: 1000px) {
  #app { height: auto; min-height: 100vh; }
  #workspace { grid-template-columns: 1fr; }
  .rail { overflow: visible; }
  #rail-left { order: 2; }
  #stage { order: 1; }
  #rail-right { order: 3; }
  #editor-canvas-area { padding: var(--sp-3); }
  .sprite-list { max-height: none; }
}

@media (max-width: 680px) {
  .doc-title { display: none; }
  .modal { padding: var(--sp-4); }
  .sc-row { flex-direction: column; gap: 0; }
  .sc-row b { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── 11 · Dock: Seitenleisten als Icon-Spalte ───────────────────────
   Beide Leisten sind bei jeder Fenstergröße eine schmale Icon-Spalte
   (js/dock.js). Ein Panel öffnet sich als Schublade über der Zeichen-
   fläche, links nach rechts aufgehend, rechts nach links. Steht bewusst
   nach Abschnitt 10, damit es dessen "alles untereinander" ablöst. */
.rail-dock, .dock-close { display: none; }

.dock-btn {
  appearance: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.dock-btn svg { width: 18px; height: 18px; }
.dock-btn:hover { background: var(--surface-3); color: var(--text); }
.dock-btn.is-active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-line); }
.dock-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Angepinnt (oder in einer Zone, schwebend): blauer Punkt unten rechts — wie in der Desktop-App. */
.dock-btn { position: relative; }
.dock-btn.is-pinned::after {
  content: ''; position: absolute; right: 3px; bottom: 3px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

:root {
  --dock-w: 48px;
  --drawer-w: min(320px, calc(100vw - 2 * var(--dock-w) - 24px));
}
#app { height: 100vh; height: 100dvh; min-height: 0; }
#workspace { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; }
#rail-left, #stage, #rail-right { order: 0; }

.rail { position: relative; overflow: visible; flex-direction: row; }
.rail-dock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  width: var(--dock-w);
  flex: none;
  padding: var(--sp-2) 0;
}
#rail-right .rail-dock { order: 2; }
.rail > .panel { display: none; }
.rail > .panel.is-shown {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 30;
  width: var(--drawer-w);
  overflow-y: auto;
  background: var(--bg);
  border-inline: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
#rail-left > .panel.is-shown { left: 100%; }
#rail-right > .panel.is-shown { right: 100%; }
.rail > .panel.is-shown .panel-head { position: sticky; top: 0; z-index: 1; }
.rail > .panel.is-shown .panel-body { display: flex; }
.rail .panel-toggle { display: none; }
.dock-close { display: inline-grid; }
.sprite-list { max-height: none; }

/* ── 12 · Icons und Menü ────────────────────────────────────────────
   Alle Icons kommen aus js/icons.js (Linien-SVG, in currentColor). */
.ui-ico { display: block; flex: none; width: 16px; height: 16px; }
.ico, .tool-ico { display: inline-grid; place-items: center; }
.btn:has(.ico) { gap: 6px; }
.btn:has(.ico):not(:has(.btn-label)) { padding-inline: 8px; }

@media (max-width: 1279.98px) {
  /* Werkzeugleiste: Auswahl-Aktionen und Vollbild nur als Icon, der Name
     steht im Tooltip. Sonst schiebt sich die Reihe rechts hinaus. */
  #select-group .btn-label,
  #fullscreen-btn .btn-label { display: none; }
}

/* ── 13 · Bildfarben ────────────────────────────────────────────────
   Freie Farben im Sprite (eigener Hex statt Paletten-Index). Der Knopf
   hinter der Schnellwahl zeigt die Anzahl, die Liste klappt darunter auf. */
.free-colors { position: relative; }
.free-colors-btn { gap: var(--sp-2); padding: 4px 10px 4px 4px; }
.free-colors-btn.is-active { border-color: var(--accent-line); color: var(--accent); }
.fc-preview {
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}
.free-colors-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: min(22rem, calc(100vw - 2rem));
  padding: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.fc-head { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.4; }
.fc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
  gap: 4px;
  max-height: 14rem;
  overflow-y: auto;
}
.fc-swatch {
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.fc-swatch:hover { transform: translateY(-1px); border-color: var(--text-muted); }
.fc-swatch.is-active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent); }

/* ── 14 · Anpinnen, schwebende Fenster (js/layout.js) ──────────────── */
/* Angepinnte Panels: eine Spalte zwischen Dock und Zeichenfläche. */
.rail-pins {
  display: none;
  position: relative;
  flex-direction: column;
  width: var(--pins-w, 280px);
  min-height: 0;
  overflow-y: auto;
  background: var(--bg);
}
.rail.has-pins .rail-pins { display: flex; }
#rail-left .rail-pins  { order: 1; border-left: 1px solid var(--line); }
#rail-right .rail-pins { order: 1; border-right: 1px solid var(--line); }
.rail-pins > .panel { flex: none; }
.rail-pins .panel-toggle { display: block; }
.pins-resizer {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 6;
  width: 7px;
  cursor: col-resize;
}
.rail.has-pins .pins-resizer { display: block; }
#rail-left  .pins-resizer { left: calc(var(--dock-w) + var(--pins-w, 280px) - 4px); }
#rail-right .pins-resizer { left: -4px; }
.pins-resizer:hover,
.is-resizing-ui .pins-resizer { background: var(--accent-line); }

/* Panel-Kopf ist der Griff zum Lösen und Verschieben. */
.panel-head { touch-action: none; }
.rail > .panel.is-shown .panel-head,
.rail-pins .panel-head,
.panel.is-floating .panel-head { cursor: grab; }
.panel-pin[aria-pressed="true"] { color: var(--accent); }
.rail-pins .dock-close,
.panel.is-floating .panel-float { display: none; }

/* Schwebende Ebene über der Arbeitsfläche. */
#float-layer { position: absolute; inset: 0; z-index: 35; pointer-events: none; }
#float-layer > * { pointer-events: auto; }
.drop-hint {
  position: absolute;
  background: var(--accent-bg);
  border: 2px solid var(--accent);
  border-radius: var(--r-md);
  opacity: 0.7;
}

.panel.is-floating,
#toolbar.is-floating,
#color-bar.is-floating,
#timeline.is-floating {
  position: absolute;
  min-width: 180px;
  min-height: 44px;
  overflow: auto;
  resize: both;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.panel.is-floating { display: flex; flex-direction: column; min-height: 90px; background: var(--bg); }
.panel.is-floating .panel-head { position: sticky; top: 0; z-index: 1; }
.panel.is-floating .panel-body { display: flex; }
.panel.is-floating .panel-toggle { display: none; }
#toolbar.is-floating, #color-bar.is-floating, #timeline.is-floating { border-bottom: 1px solid var(--line-strong); }

/* Griff + Pin vorn an Werkzeugleiste und Farbzeile. */
.bar-handle { display: flex; align-items: center; gap: 2px; margin-inline-end: var(--sp-1); }
.bar-handle { cursor: grab; touch-action: none; }
.bar-title { display: none; }

/* Leisten in der Panel-Spalte (angepinnt oder als Gast) sehen aus wie ein
   Panel: Kopf mit Titel links und Fenster/Pin rechts, darunter der Inhalt,
   der in der Breite umbricht — nicht eine schmale senkrechte Leiste mitten
   in der breiten Spalte. */
.rail-pins > #toolbar,
.rail-pins > #color-bar,
.rail-pins > #timeline,
.bar-zone--side > #toolbar,
.bar-zone--side > #color-bar,
.bar-zone--side > #timeline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
}
.rail-pins > #toolbar > .bar-handle,
.rail-pins > #color-bar > .bar-handle,
.rail-pins > #timeline > .bar-handle,
.bar-zone--side > #toolbar > .bar-handle,
.bar-zone--side > #color-bar > .bar-handle,
.bar-zone--side > #timeline > .bar-handle {
  flex: 1 1 100%;
  order: -1;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin: 0 calc(-1 * var(--sp-3));
  padding: var(--sp-3);
}
.rail-pins .bar-title,
.bar-zone--side .bar-title,
.is-floating > .bar-handle .bar-title {
  display: block;
  flex: 1;
  margin-inline-end: auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.is-floating > .bar-handle { flex: 1 1 100%; justify-content: flex-end; }
.rail-pins .tool-group,
.rail-pins #quick-palette,
.bar-zone--side .tool-group,
.bar-zone--side #quick-palette { flex-wrap: wrap; }
.rail-pins > #timeline > .tl-frames,
.bar-zone--side > #timeline > .tl-frames { flex: 1 1 100%; min-width: 0; }
/* In der Spalte als Icon-Raster — mit Namen stünde je Zeile nur ein Werkzeug. */
.rail-pins > #toolbar .tool-name,
.bar-zone--side > #toolbar .tool-name { display: none; }
.rail-pins > #toolbar .tool-sep,
.bar-zone--side > #toolbar .tool-sep { display: none; }
/* Werkzeuge in der Spalte: ein gleichmäßiges Raster aus gleich großen
   Zellen. Vorher brach jede Gruppe für sich um — Hand oder Zauberstab
   standen allein in einer Zeile. Die Werkzeug-Gruppen lösen sich dafür auf
   (display: contents), alles andere (Kopf, Symmetrie, Optionen) bekommt
   eine ganze Zeile. */
.rail-pins > #toolbar,
.rail-pins > #toolbar.is-guest,
.bar-zone--side > #toolbar,
.bar-zone--side > #toolbar.is-guest {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  align-items: center;
}
:is(.rail-pins, .bar-zone--side) > #toolbar > .tool-group:has(> .tool-btn) { display: contents; }
:is(.rail-pins, .bar-zone--side) > #toolbar > :not(.tool-group:has(> .tool-btn), .bitty-btn) { grid-column: 1 / -1; }
:is(.rail-pins, .bar-zone--side) > #toolbar .tool-btn { justify-content: center; width: 100%; }
.bar-pin[aria-pressed="true"] { color: var(--accent); }

body.is-dragging-ui, body.is-dragging-ui * { cursor: grabbing !important; user-select: none; }
body.is-resizing-ui, body.is-resizing-ui * { cursor: col-resize !important; }

@keyframes panelFlash { from { box-shadow: inset 0 0 0 2px var(--accent); } to { box-shadow: inset 0 0 0 2px transparent; } }
.panel.is-flash { animation: panelFlash 0.9s ease-out; }

/* "Farbe zeigen" — Schalter neben der aktuellen Farbe. */
#show-color-btn.is-active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-line); }
.fc-more { margin: var(--sp-2) 0 0; }

/* Gast: ein geöffnetes, nicht angepinntes Panel unten in der Spalte der
   angepinnten (js/dock.js). Sieht aus wie angepinnt, schließt sich aber
   beim Klick daneben. */
.rail-pins > .panel.is-guest { border-top: 1px solid var(--accent-line); }
.rail-pins > .panel.is-guest .panel-body { display: flex; }
.rail-pins > .panel.is-guest .panel-toggle { display: none; }
.rail-pins > .panel.is-guest .dock-close { display: inline-grid; }
/* Dasselbe in der seitlichen Spalte der angepinnten Leisten. */
.bar-zone--side > .panel.is-guest { flex: none; border-top: 1px solid var(--accent-line); background: var(--surface-1); }
.bar-zone--side > .panel.is-guest .panel-body { display: flex; }
.bar-zone--side > .panel.is-guest .panel-toggle { display: none; }
.bar-zone--side > .panel.is-guest .dock-close { display: inline-grid; }
.bar-zone--side > #toolbar.is-guest,
.bar-zone--side > #color-bar.is-guest,
.bar-zone--side > #timeline.is-guest { display: flex; border-top: 1px solid var(--accent-line); }

/* ── 15 · Andock-Zonen für Werkzeugleiste und Farbzeile ─────────────
   Oben und unten liegen die Leisten waagerecht, links und rechts neben
   der Zeichenfläche senkrecht (js/layout.js setzt sie in die Zonen). */
.bar-zone { display: flex; flex-direction: column; flex-shrink: 0; }
.bar-zone:not(:has(> *)) { display: none; }
#stage-body { display: flex; flex: 1; min-height: 0; }
#stage-body > #editor-canvas-area { flex: 1; min-width: 0; }

.bar-zone[data-zone="bottom"] > #toolbar,
.bar-zone[data-zone="bottom"] > #color-bar,
.bar-zone[data-zone="bottom"] > #timeline { border-bottom: 0; border-top: 1px solid var(--line); }

/* Senkrecht: links/rechts der Zeichenfläche und als Schublade im Dock.
   js/layout.js setzt dafür .is-vertical an die Leiste. */
/* Seitliche Zone: eine Spalte wie die Panel-Spalte, die Leisten darin
   untereinander und panelartig (Regeln unten bei .rail-pins). */
.bar-zone--side { flex-direction: column; width: 17rem; overflow-y: auto; background: var(--surface-1); }
/* Griff für die Breite (js/layout.js) — schmal, über dem Rand, nimmt keinen
   Platz; weg, solange die Zone leer ist. Am Handy gibt es keine Seitenzonen. */
.zone-resizer {
  flex: none;
  position: relative;
  z-index: 6;
  width: 7px;
  margin: 0 -3px;
  cursor: col-resize;
}
.zone-resizer:hover,
.is-resizing-ui .zone-resizer { background: var(--accent-line); }
.bar-zone:not(:has(> *)) + .zone-resizer,
.zone-resizer:has(+ .bar-zone:not(:has(> *))) { display: none; }
.bar-zone[data-zone="left"]  { border-right: 1px solid var(--line); }
.bar-zone[data-zone="right"] { border-left: 1px solid var(--line); }
.bar-zone--side > * + * { border-top: 1px solid var(--line); }
#toolbar.is-vertical,
#color-bar.is-vertical,
#timeline.is-vertical {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-bottom: 0;
}
.is-vertical .bar-handle { flex-direction: row; justify-content: center; margin: 0 0 var(--sp-1); }
.is-vertical .tool-group { flex-direction: column; align-items: stretch; }
.is-vertical .tool-sep { width: auto; height: 1px; }
.is-vertical .tool-name { display: none; }
.is-vertical .tool-btn { justify-content: center; }
.is-vertical .field-label { text-align: center; }
.is-vertical .btn-group { flex-direction: column; }
.is-vertical .btn-group .btn { border-radius: var(--r-md); }
.is-vertical .field--inline { flex-direction: column; }
#brush-size { width: 110px; }
/* Kacheln (js/tilemap.js) */
#tile-on:not([hidden]), #tile-off:not([hidden]) { display: flex; flex-direction: column; gap: var(--sp-2); }
#tile-on .field-note, #tile-off .field-note { margin: 0; }
/* Vorschau groß und mittig, die Knöpfe darunter gleich breit. Erst wenn
   das Panel schmal wird, schrumpft die Vorschau. */
.tile-xf { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }
.tile-xf-prev { width: min(128px, 100%); height: auto; aspect-ratio: 1; image-rendering: pixelated; border: 1px solid var(--border); border-radius: 4px; }
.tile-xf-btns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; }
.tile-xf-btns .btn { min-width: 0; padding-inline: 2px; justify-content: center; text-align: center; }
.tile-list { display: flex; flex-wrap: wrap; gap: 4px; max-height: 260px; overflow-y: auto; padding: 2px; }
.tile-item {
  position: relative;
  display: grid;
  place-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 6px);
  background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 8px 8px;
  cursor: pointer;
}
.tile-item canvas { image-rendering: pixelated; display: block; }
.tile-item span {
  position: absolute; right: 1px; bottom: 0;
  font-size: 9px; line-height: 1; padding: 1px 2px; border-radius: 3px;
  background: rgba(0, 0, 0, 0.55); color: #fff;
}
.tile-item:hover { border-color: var(--text-dim); }
.tile-item.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line); }
.tile-info { font-variant-numeric: tabular-nums; }
/* Kachelsatz-Bibliothek (js/tilemap.js): unter einem Strich, wie ein eigener Abschnitt. */
.tile-lib { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.tile-lib [hidden] { display: none !important; }
.gd-layout-row { display: flex; gap: var(--sp-1); }
.gd-even { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.gd-even .input--num { width: 3.5rem; }
.gd-even > .field-label { flex: 1 1 100%; }
.gd-layout-row > .input { flex: 1; min-width: 0; }
.gd-layout-row > .btn { flex: 0 0 auto; }
#gd-layout-del { width: 32px; padding-inline: 0; }
.input--calc { width: 5.5rem; font-variant-numeric: tabular-nums; }
#brush-size-num { width: 3.5rem; }
.is-vertical #brush-size { width: 100%; }
.is-vertical #quick-palette { flex-direction: column; flex-wrap: nowrap; }
.is-vertical .qp-sep { width: 22px; height: 1px; }
/* Timeline in der schmalen Spalte: die Gruppen sind kurz (drei Knoepfe) und
   stehen nebeneinander statt untereinander — sonst wird aus der Leiste ein
   Stapel aus sieben vollbreiten Knopf-Zeilen. Die Frames liegen als Streifen
   ueber die volle Breite dazwischen. */
#timeline.is-vertical {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* Ohne feste Breite zieht sich die umbrechende Reihe so breit wie ihr
     laengster Inhalt — die Spalte waere dann breiter als die Zeichenflaeche. */
  width: 16rem;
}
/* Im Raster bleibt fuer die Ebenen nur Auge und Name. */
#timeline.is-vertical .tl-frames { --tl-lw: 84px; }
#timeline.is-vertical .tl-lock,
#timeline.is-vertical .tl-cont { display: none; }
#timeline.is-vertical .tl-go-field { margin-left: 0; }
#timeline.is-vertical > * { flex: none; }
#timeline.is-vertical > .bar-handle,
#timeline.is-vertical > .tl-frames { flex: 1 1 100%; }
#timeline.is-vertical .btn-group { flex-direction: row; }
#timeline.is-vertical .btn-group .btn { flex: 1 1 0; }
/* Die drei Zahlenfelder stehen untereinander — dann muessen sie auch
   uebereinander stehen: Beschriftung rechtsbuendig in einer festen Spalte,
   alle Eingabefelder gleich breit und an derselben Kante. Zentriert sahen
   die Zeilen aus, als haette sie jemand zufaellig hingeschoben. */
#timeline.is-vertical .tl-num {
  flex: 1 1 100%;
  justify-content: flex-start;
  gap: var(--sp-2);
}
#timeline.is-vertical .tl-num .field-label { flex: none; width: 4rem; text-align: right; }
#timeline.is-vertical .tl-num input { width: 4rem; }
#timeline.is-vertical .tl-num .field-value { flex: none; min-width: 0; text-align: left; }

#color-bar.is-vertical .current-color { min-width: 0; padding: 3px; }
#color-bar.is-vertical .cc-info,
#color-bar.is-vertical .cc-pick,
#color-bar.is-vertical .btn-label { display: none; }
.is-vertical .free-colors-btn { padding: 4px; justify-content: center; }
.bar-zone[data-zone="right"] .free-colors-list,
#rail-right .free-colors-list { left: auto; right: 0; }
.bar-zone[data-zone="bottom"] .free-colors-list { top: auto; bottom: calc(100% + 6px); }

/* Leiste als Schublade im Dock: zu, bis man das Icon anklickt. */
/* IDs mit im Selektor: #toolbar/#color-bar setzen display selbst per ID. */
.rail > #toolbar.is-bar-drawer,
.rail > #color-bar.is-bar-drawer,
.rail > #timeline.is-bar-drawer { display: none; }
.rail > #toolbar.is-bar-drawer.is-shown,
.rail > #color-bar.is-bar-drawer.is-shown,
.rail > #timeline.is-bar-drawer.is-shown {
  display: flex;
  position: absolute;
  top: 0;
  z-index: 30;
  max-height: 100%;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-top: 0;
  box-shadow: var(--shadow-lg);
}
#rail-left  > .is-bar-drawer.is-shown { left: 100%; }
#rail-right > .is-bar-drawer.is-shown { right: 100%; }
.rail-pins > #toolbar.is-guest,
.rail-pins > #color-bar.is-guest,
.rail-pins > #timeline.is-guest { display: flex; border-top: 1px solid var(--accent-line); }

/* Dock-Icon beim Ziehen */
.dock-ghost {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-md);
}
.dock-btn { touch-action: none; }

/* Verschieben mit Leertaste / mittlerer Maustaste (js/app.js initPan) */
#editor-canvas-area.is-pannable,
#editor-canvas-area.is-pannable #editor-canvas { cursor: grab; }
#editor-canvas-area.is-panning,
#editor-canvas-area.is-panning #editor-canvas { cursor: grabbing; }

/* Schablone: zeigt, welches Bild geladen ist (js/template.js syncTplStatus) */
.tpl-status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
}
.tpl-status img {
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: var(--r-sm);
  background: var(--surface-3);
}
.tpl-status-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tpl-status-text b { overflow: hidden; font-size: var(--fs-md); text-overflow: ellipsis; white-space: nowrap; }

/* ── 16 · Farbzeile: weitere Palettenfarben und Bildfarben ──────────
   0–9 groß (Tasten), danach kleine Felder; Bildfarben ebenso. */
.qp-more, .fc-top { display: flex; flex-wrap: wrap; gap: 2px; max-width: 18rem; }
.qp-mini {
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  cursor: pointer;
}
.qp-mini:hover { border-color: var(--text-muted); }
.qp-mini.is-active { border-color: var(--text); box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px var(--accent); }
.qp-all { padding: 4px 8px; font-size: var(--fs-sm); }
.free-colors { display: flex; align-items: center; gap: var(--sp-2); }
.fc-top:empty { display: none; }
.fc-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.is-vertical .qp-more, .is-vertical .fc-top { max-width: 34px; justify-content: center; }
.is-vertical .free-colors { flex-direction: column; }

/* Bild -> Palette: Vorher/Nachher nebeneinander, pixelgenau vergroessert */
.reduce-preview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.reduce-preview figure { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); margin: 0; }
.reduce-preview canvas {
  width: 100%;
  max-height: 34vh;
  object-fit: contain;
  image-rendering: pixelated;
  background-image: var(--checker);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.reduce-preview figcaption { font-size: var(--fs-sm); color: var(--text-muted); }
.reduce-swatches { max-height: 9rem; overflow-y: auto; }
.reduce-swatches .pal-sw { cursor: default; }
.reduce-swatches .pal-sw:hover { transform: none; }

/* Hilfe -> Sicherung */
.backup-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); }
.backup-row span { flex: 1 1 12rem; color: var(--text-muted); }

/* Hilfe: Links zu Impressum und Datenschutz ganz unten */
.help-legal { margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-dim); }
.help-legal a { color: var(--text-muted); }

/* Finger auf der Zeichenfläche: Zoomen und Verschieben macht js/app.js
   (initPinch) selbst — sonst zoomt der Browser die ganze Seite. */
@media (pointer: coarse) {
  #editor-canvas-area { touch-action: none; }
}

/* Sehr schmale Handys: Schriftzug weg, damit die vier Menütitel und Bitty
   in eine Zeile passen (siehe Handy-Abschnitt unten). */
@media (max-width: 359.98px) {
  .brand-name { display: none; }
}

/* ── 17 · Handy (js/layout.js MOBILE) ─────────────────────────────────
   Die Zeichenfläche bekommt den ganzen Rest. Beide Docks liegen als eine
   Leiste ganz unten, Panels öffnen sich als Blatt von unten. Werkzeugleiste
   und Farbzeile sitzen einzeilig darüber und scrollen waagerecht.
   Anpinnen und Schweben gibt es hier nicht (layout.js macht Schubladen
   daraus, ohne die gespeicherte Anordnung zu ändern). */
@media (max-width: 1100px) {
  :root { --mbar-h: 48px; }

  #topbar { gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); }
  /* Am Handy: der Schriftzug, die vier Menütitel daneben — kein Sprite-Name,
     kein Speicher-Hinweis. Die Menüs werden fingerfreundlich hoch und
     bleiben im Bild. Nur wo selbst das nicht passt, fällt der Schriftzug
     weg (unten, schmaler als 360 px). */
  .doc-title, .save-indicator, .project-btn { display: none; }
  .menubar { margin-left: 0; gap: 0; }
  .mb-title { padding: 8px 9px; }
  .mb-item { padding-top: 11px; padding-bottom: 11px; }
  .mb-menu:last-child .mb-drop, .mb-menu:nth-last-child(2) .mb-drop { left: auto; right: 0; }
  .mb-drop { max-width: calc(100vw - 16px); }

  /* Unten stehen beide Dock-Spalten nebeneinander in einer Zeile. Die linke
     nimmt nur, was ihre Icons brauchen, die rechte den Rest — und scrollt in
     sich, statt ihre letzten Icons aus dem Bild zu schieben. */
  #workspace {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  #stage { grid-column: 1 / -1; grid-row: 1; }
  #rail-left  { grid-column: 1; grid-row: 2; }
  #rail-right { grid-column: 2; grid-row: 2; }
  .rail { min-width: 0; padding-bottom: env(safe-area-inset-bottom); }
  .rail-dock {
    flex-direction: row;
    /* Nicht breiter werden als die Spalte: sonst stehen die letzten Icons
       ausserhalb des Bildes statt in der Zeile zu scrollen. */
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: var(--mbar-h);
    padding: 0 var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rail-dock .dock-btn { flex: none; width: 40px; height: 40px; }
  /* Die Icons fuellen die Leiste komplett aus. Mit `touch-action: none`
     (siehe Abschnitt Dock) schluckten sie jeden Wisch, und die Leiste liess
     sich nicht mehr scrollen. Waagerecht scrollt jetzt der Browser; zum
     Umsortieren haelt man ein Icon kurz fest (js/layout.js makeDraggable). */
  .rail-dock .dock-btn { touch-action: pan-x; }
  /* Die linke Gruppe darf die Zeile nicht komplett belegen: `auto` nimmt sich
     sonst die ganze Breite und fuer die rechte Spalte bleibt nichts uebrig. */
  #rail-left { max-width: 50vw; }
  /* Kein Abstand zwischen den beiden Spalten — er sah aus wie ein Trenner,
     hinter dem Icons liegen. */
  #rail-left .rail-dock { padding-inline-end: 0; }
  #rail-right .rail-dock { padding-inline-start: 0; }
  .rail-pins, .pins-resizer { display: none !important; }

  /* Schublade → Blatt von unten über der Dock-Leiste. Stehen unten schon
     angepinnte Leisten, beginnt das Blatt darüber: --mpins-h ist ihre Hoehe
     (js/layout.js syncMobilePins), ohne sie 0. */
  #workspace > .rail > [data-dock].is-shown {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: calc(var(--mbar-h) + var(--mpins-h, 0px) + env(safe-area-inset-bottom));
    width: auto;
    max-height: 70dvh;
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    border-bottom: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  #workspace > .rail > #toolbar.is-shown,
  #workspace > .rail > #color-bar.is-shown,
  #workspace > .rail > #timeline.is-shown { padding: var(--sp-3); }
  /* Panels werden hier nicht angepinnt; Leisten schon — nur der Griff fehlt. */
  .panel-pin, .panel-float, .bar-float { display: none !important; }
  .bar-handle { margin-inline-end: 0; }

  /* Kopf der Bühne in einer Zeile. */
  #stage-head { flex-wrap: nowrap; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); --head-pad-y: var(--sp-1); }
  /* Reiter am Handy: eigene Zeile unter den Knöpfen, wischbar — erst ab
     zwei offenen Sprites, sonst kostete sie nur Höhe (dann steht oben wie
     bisher der Name). */
  #stage-head:has(> .sprite-tabs:not(.is-single)) { flex-wrap: wrap; row-gap: var(--sp-1); }
  .sprite-tabs { order: 99; flex-basis: 100%; margin-top: 0; padding-top: 0; }
  .sprite-tabs.is-single { display: none; }
  #stage-head:has(> .sprite-tabs.is-single) > .stage-ident { display: flex; }
  .stage-ident { flex: 1 1 auto; }
  .stage-dims { display: none; }
  .stage-head-right { flex-wrap: nowrap; gap: var(--sp-2); }
  .stage-head-right .field-label,
  #cell-size-val { display: none; }
  .stage-head-right input[type="range"] { width: 64px; }

  /* Werkzeugleiste und Farbzeile: je eine Zeile, waagerecht scrollbar. */
  #toolbar, #color-bar, #timeline {
    flex-wrap: nowrap;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    overflow-x: auto;
    scrollbar-width: none;
  }
  /* Weicher Rand dort, wo die Reihe weitergeht (js/layout.js). */
  .tl-frames.is-more-l, .rail-dock.is-more-l, #toolbar.is-more-l, #color-bar.is-more-l, #timeline.is-more-l {
    mask-image: linear-gradient(to right, transparent, #000 24px);
  }
  .tl-frames.is-more-r, .rail-dock.is-more-r, #toolbar.is-more-r, #color-bar.is-more-r, #timeline.is-more-r {
    mask-image: linear-gradient(to left, transparent, #000 24px);
  }
  .tl-frames.is-more-l.is-more-r,
  .rail-dock.is-more-l.is-more-r,
  #toolbar.is-more-l.is-more-r, #color-bar.is-more-l.is-more-r, #timeline.is-more-l.is-more-r {
    mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
  #toolbar::-webkit-scrollbar, #color-bar::-webkit-scrollbar, #timeline::-webkit-scrollbar,
  .rail-dock::-webkit-scrollbar { display: none; }
  #toolbar > *, #color-bar > *, #timeline > * { flex: none; }
  /* Die Frames scrollen selbst — die Leiste drumherum nicht doppelt. */
  #timeline > .tl-frames { flex: 1 1 auto; min-width: 96px; scrollbar-width: none; }
  #timeline > .tl-frames::-webkit-scrollbar { display: none; }

  /* Timeline: oben die Knoepfe und Felder (umbrechend), darunter das
     Raster ueber die ganze Breite. */
  #timeline {
    flex-wrap: wrap;
    gap: var(--sp-1);
    overflow-x: hidden;
  }
  /* Das Raster steht in seiner eigenen Zeile unter den Knoepfen; die
     Ebenen-Spalte ist schmal (Auge und Name), die Zeilen fingerhoch. */
  /* Die Ebenen-Spalte ist breit genug für Auge, Schloss, Durchgehend und
     einen kurzen Namen. */
  #timeline > .tl-frames { flex: 1 1 100%; --tl-lw: 140px; --tl-row: 30px; max-height: calc(var(--tl-cell, 44px) + 4 * 32px + 6px); }

  /* Reiter (js/frames.js initMobileTabs): oben stehen nur Griff, Abspielen,
     die Reiter Frames · Ebenen · Zellen und das ⚙. Darunter die Knöpfe des
     offenen Reiters, ganz unten das Raster. So steht nie „+ Kopie Papierkorb"
     zweimal ohne Erklärung untereinander. */
  #timeline > * { order: 3; }
  #timeline > .bar-handle { order: -2; }
  #timeline > .tl-transport { display: contents; }
  #tl-play { order: -1; }
  #timeline > .tl-mtabs { order: 0; display: flex; flex: 1 1 auto; min-width: 0; }
  #timeline > #tl-settings { order: 1; }
  #timeline::after { content: ''; order: 2; flex: 1 1 100%; height: 0; }
  #tl-first, #tl-prev, #tl-next, #tl-last { order: 3; }
  #timeline > .tl-frames { order: 99; }
  .tl-mtabs {
    gap: 2px;
    padding: 2px;
    border-radius: var(--r-md);
    background: var(--surface-2);
  }
  .tl-mtab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 34px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  .tl-mtab[aria-selected="true"] { background: var(--accent-bg); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
  #timeline[data-mtab="frames"] :is(.tl-lyops, #tl-op-field, .tl-celops),
  #timeline[data-mtab="layers"] :is(#tl-first, #tl-prev, #tl-next, #tl-last, .tl-edit, #tl-onion, #tl-tag, #tl-go-field, #tl-fps-field, .tl-celops),
  #timeline[data-mtab="cels"] :is(#tl-first, #tl-prev, #tl-next, #tl-last, .tl-edit, #tl-onion, #tl-tag, #tl-go-field, #tl-fps-field, .tl-lyops, #tl-op-field) { display: none; }
  /* Ecke des Rasters: Wegweiser statt Knöpfe — die Ebenen-Knöpfe stehen
     im Reiter „Ebenen". */
  #timeline .tl-corner { justify-content: space-between; padding: 2px 4px 4px 6px; }
  #timeline .tl-corner-frames { display: block; align-self: flex-end; }
  #timeline .tl-corner-frames::after { content: ' →'; }
  #timeline .tl-corner-label::after { content: ' ↓'; }
  #timeline .tl-corner-btns { display: none; }
  #timeline :is(.tl-eye, .tl-lock, .tl-cont) { width: 26px; height: 26px; }
  /* Timeline-Menü am Handy: ein Blatt von unten über die ganze Breite. */
  .tl-menu {
    left: 0 !important; right: 0; bottom: 0; top: auto !important;
    width: auto;
    max-height: 75vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  }
  .tl-menu .btn { min-height: 38px; }
  .tl-go-field { margin-left: 0; }
  /* Die zweite Zeile soll eine bleiben: enge Felder und kleinere Knoepfe
     (siehe unten) schaffen den Platz dafuer — und damit auch fuer "ms" und
     ein kurzes "F" vor der Frame-Nummer. Ohne die beiden Hinweise stuenden
     dort drei nackte Zahlen nebeneinander. */
  /* Die Pfeilchen im Zahlenfeld trifft auf dem Handy niemand — ohne sie
     passen drei Felder mit Beschriftung in eine Zeile. */
  #timeline .tl-num input { width: 2.4rem; }
  #timeline .tl-num input::-webkit-inner-spin-button,
  #timeline .tl-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  #timeline .tl-num input { -moz-appearance: textfield; appearance: textfield; }
  #timeline .tl-num .field-value { min-width: 0; }
  #timeline .tl-num .field-label { display: none; }
  #timeline #tl-fps-field .field-label,
  #timeline #tl-op-field .field-label { display: inline; }
  /* Beim Sprungfeld bleibt nur der Anfangsbuchstabe stehen: "Frame" waere
     hier zu lang, drei nackte Zahlen nebeneinander zu wenig. */
  #timeline #tl-go-field .field-label {
    display: inline;
    font-size: 0;
  }
  #timeline #tl-go-field .field-label::after {
    content: 'F';
    font-size: var(--fs-xs);
  }
  .tool-group { flex: none; }
  /* Die Trennstriche kosten in der scrollenden Zeile nur Platz und schieben
     Icons aus dem Bild — der Abstand zwischen den Gruppen reicht. */
  .tool-sep { display: none; }
  /* Symmetrie steht in der Leiste — die Icons sprechen für sich, die
     Beschriftung würde die ohnehin knappe Zeile nur länger machen. */
  #mirror-group .field-label { display: none; }
  /* Tippziele: ein Finger braucht rund 44 px. Lieber laenger scrollen als
     danebentippen — die Leisten scrollen hier ohnehin waagerecht. */
  #toolbar .tool-btn,
  #toolbar .btn,
  #toolbar .icon-btn,
  #color-bar .btn,
  #color-bar .icon-btn,
  #color-bar .qp-swatch,
  .rail-dock .dock-btn,
  #color-bar .current-color { min-width: 44px; min-height: 44px; }
  /* Die Kopfzeile der Bühne (Rückgängig, Dunkel/Hell, Zoom, Vollbild) steht
     über allem und scrollt nicht — mit 44 px nahm sie viel Platz weg. Mit
     der Maus reichen 32 px, am Finger 38 px. */
  #stage-head .btn,
  #stage-head .icon-btn { min-width: 32px; min-height: 32px; }
  @media (pointer: coarse) {
    #stage-head .btn,
    #stage-head .icon-btn { min-width: 38px; min-height: 38px; }
  }
  .stage-head-right .btn-group .btn { padding-inline: 6px; }
  /* Das + bei den Reitern bleibt so klein wie am Rechner (22 px) — es soll
     nicht größer wirken als die Reiter daneben. */
  #stage-head .icon-btn.tab-new { min-width: 0; min-height: 0; }
  /* Die Timeline-Knoepfe duerfen etwas kleiner sein: sie stehen in zwei
     ruhigen Zeilen und nicht in einer scrollenden Reihe — dafuer passt die
     zweite Zeile am Stueck aufs Display. */
  #timeline .btn,
  #timeline .icon-btn { min-width: 38px; min-height: 38px; }
  /* Ausnahme: Auge, Schloss und Durchgehend in den Ebenen-Zeilen — drei
     mal 38 px passten nicht in die Spalte; die Zeile ist 30 px hoch. */
  #timeline .tl-layer .icon-btn { min-width: 0; min-height: 0; }
  /* Finger statt Strg/Shift: der Schalter fuer die Mehrfachauswahl. Dafuer
     fallen die Schritt-Knoepfe weg — den Nachbar-Frame tippt man direkt an,
     und die Leiste bleibt zweizeilig. */
  #tl-multi { display: inline-grid; }
  /* Die Frames sind die Ausnahme von den 44 px: sie stehen in einer eigenen
     Zeile und man muss mehrere auf einmal sehen, sonst scrollt man blind.
     34 px bleiben treffsicher genug (js/frames.js CELL_MIN_TOUCH). */
  #timeline .tl-frame { min-width: 34px; min-height: 34px; }
  /* Die Griff-Knoepfe sitzen schmal am Anfang jeder Leiste — sie bekommen
     die Hoehe, aber nicht die volle Breite, sonst kostet jede Leiste 44 px. */
  #toolbar > .bar-handle .icon-btn,
  #color-bar > .bar-handle .icon-btn,
  #timeline > .bar-handle .icon-btn { min-width: 32px; min-height: 44px; }
  .tool-btn { padding: 8px; }
  #toolbar .field-label { white-space: nowrap; }
  #color-bar .current-color { min-width: 44px; padding: 3px; }
  #color-bar .cc-info, #color-bar .cc-pick,
  #color-bar #show-color-btn .btn-label { display: none; }
  #quick-palette { flex-wrap: nowrap; }

  /* ── Toast auf dem Handy ──────────────────────────────────────────
     Der Hinweis sass unter der Dock-Leiste und den angepinnten Leisten —
     halb verdeckt und mit Rand mitten im Nichts. Jetzt steht er sauber
     darueber, ueber die volle Breite. Die Rueckfrage bekommt Knoepfe, die
     man trifft: nebeneinander, gleich breit, nicht am rechten Rand. */
  #confirm-toast.is-info {
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: calc(var(--mbar-h) + var(--mpins-h, 0px) + env(safe-area-inset-bottom) + var(--sp-2));
    max-width: none;
    transform: none;
    animation: infoInMobile 0.18s ease-out;
  }
  #confirm-toast.is-info #confirm-toast-box { padding: var(--sp-3) var(--sp-4); }
  #confirm-toast.is-info #confirm-toast-msg { font-size: var(--fs-md); line-height: 1.45; }

  #confirm-toast.is-confirm { padding: var(--sp-3); }
  #confirm-toast.is-confirm #confirm-toast-box {
    gap: var(--sp-4);
    padding: var(--sp-4);
    max-height: calc(100dvh - 2 * var(--sp-3));
    overflow-y: auto;
  }
  #confirm-toast.is-confirm #confirm-toast-msg { font-size: var(--fs-lg); }
  #confirm-toast.is-confirm #confirm-toast-btns > .btn { flex: 1 1 0; min-height: 44px; }
  #confirm-toast.is-confirm .btn { padding: 10px 12px; font-size: var(--fs-md); }

  /* Im scrollenden Streifen würde die Liste abgeschnitten — als Blatt. */
  #color-bar .free-colors-list {
    position: fixed;
    top: auto;
    left: var(--sp-2);
    right: var(--sp-2);
    bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom) + var(--sp-2));
    width: auto;
  }

  #editor-canvas-area { padding: var(--sp-2); }
  /* Die Statuszeile kostete eine ganze Zeile Hoehe, obwohl sie meist leer
     ist — auf dem Handy schwebt sie als Pille ueber dem unteren Rand der
     Zeichenflaeche und verschwindet, sobald nichts zu melden ist. */
  #stage-body { position: relative; }
  #info-bar {
    position: absolute;
    left: 50%;
    bottom: var(--sp-2);
    z-index: 5;
    min-height: 0;
    max-width: calc(100% - 2 * var(--sp-3));
    padding: 4px 10px;
    transform: translateX(-50%);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #info-bar:empty { display: none; }

  /* Werkzeug-Optionen: eigene Zeile über den Leisten (js/layout.js). */
  /* Die Leiste scrollt waagerecht — der Knopf zur Options-Zeile
     (Größe, Stärke, Toleranz) klebt am rechten Rand und scrollt nicht weg. */
  #toolbar > .tool-opts-btn {
    display: inline-grid;
    flex: none;
    position: sticky;
    right: 0;
    margin-inline-start: auto;
    z-index: 2;
    background: var(--surface-1);
    box-shadow: -6px 0 6px -4px var(--surface-1);
  }
  /* Ohne Optionen zum aktiven Werkzeug gibt es nichts aufzuklappen. */
  #toolbar > .tool-opts-btn[hidden] { display: none; }
  #toolbar > .tool-opts-btn.is-active { background: var(--accent-bg); color: var(--accent); }
  #tool-opts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    flex-shrink: 0;
    padding: var(--sp-2) var(--sp-3);
    border-top: 1px solid var(--line);
    background: var(--surface-1);
  }
  /* Werkzeugleiste als Schublade: die Zeile schwebt darüber (bottom setzt js/layout.js). */
  #tool-opts.is-over-drawer {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 31;
    border: 1px solid var(--line-strong);
    border-bottom: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  /* Eine Werkzeuggruppe steht am Rechner in einer Zeile. In der schmalen
     Options-Zeile passt sie nicht am Stueck: ohne Umbruch waechst sie ueber
     den Rand hinaus, die Zeile wird breiter als das Display und die
     Beschriftung (GROESSE, FARBREIHE) steht heraus. Darum darf hier jede
     Gruppe umbrechen — und keine breiter werden als die Zeile. */
  #tool-opts > .tool-group {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
  }
  /* Die Farbreihe (js/shade.js) kann viele Felder haben — sie bricht mit. */
  #tool-opts .shade-ramp { flex-wrap: wrap; }
  #tool-opts[hidden], #tool-opts > [hidden] { display: none; }
  #tool-opts #brush-size { width: 120px; }
  #tool-opts .brush-sz { min-width: 32px; padding: 7px 6px; }
  #tool-opts input[type="range"] { width: 120px; }
}
.tool-opts-btn { display: none; }

/* ── Sehr schmale Geraete (Telefon hochkant) ────────────────────────
   Bis hierher passt die Timeline einzeilig in die zweite Zeile. Darunter
   wird es eng, und zwei Dinge gehen zuerst: die Schritt-Knoepfe (den
   Nachbar-Frame tippt man direkt an) und das Sprung-Feld (eine Frame-Nummer
   tippt am Telefon niemand, es ist aber das breiteste Element). Springen
   uebernehmen dort die beiden Knoepfe an den Enden. */
@media (max-width: 500px) {
  #tl-prev, #tl-next, #tl-go-field { display: none; }
}

/* Farbe ersetzen (Panel „Feinschliff“): Von/Nach mit kleinem Farbfeld. */
.recolor-row { flex-wrap: wrap; }
.recolor-pick { display: inline-flex; align-items: center; gap: 6px; }
.recolor-chip {
  width: 14px; height: 14px; border-radius: 3px;
  border: 1px solid var(--border, rgba(127,127,127,.5));
  background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 6px 6px;
}
.recolor-chip.is-unset { background: none; border-style: dashed; }
.recolor-row { position: relative; }
.recolor-pop {
  position: absolute; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; padding: 6px;
  background: var(--surface-1, #222); border: 1px solid var(--border, rgba(127,127,127,.5));
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.recolor-pop[hidden] { display: none; }
.recolor-opt { width: 20px; height: 20px; padding: 0; cursor: pointer; }
.recolor-opt.is-active { outline: 2px solid var(--accent, #6af); outline-offset: 1px; }

/* Eigener Pinsel (js/stamp.js): Vorschau in der Options-Zeile und am Zeiger. */
.stamp-preview { image-rendering: pixelated; background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 6px 6px; border-radius: 3px; }
#brush-cursor.is-stamp { background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; opacity: .75; }

/* Gespeicherte Pinsel (js/brushlib.js): Liste unter dem Knopf. */
.brushlib-group { position: relative; }
.brushlib-pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, auto); gap: 6px; padding: 8px;
  background: var(--surface-1, #222); border: 1px solid var(--border, rgba(127,127,127,.5));
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.brushlib-pop[hidden] { display: none; }
.brushlib-item { position: relative; }
.brushlib-pick {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0; cursor: pointer;
  border: 1px solid var(--border, rgba(127,127,127,.5)); border-radius: 4px;
  background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface-3) 0 50%) 0 0 / 8px 8px;
}
.brushlib-pick:hover { outline: 2px solid var(--accent, #6af); }
.brushlib-pick img { image-rendering: pixelated; }
.brushlib-del {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; padding: 0;
  border-radius: 50%; border: none; cursor: pointer; font-size: 12px; line-height: 18px;
  background: var(--surface-3, #444); color: inherit;
}
.brushlib-del:hover { background: var(--danger, #e66); color: #fff; }

/* Palettendateien (js/palfile.js): Formate unter „Speichern …“. */
.pal-file-row { position: relative; }
.pal-export-pop {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--surface-1, #222); border: 1px solid var(--border, rgba(127,127,127,.5));
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.pal-export-pop[hidden] { display: none; }
.pal-export-pop .btn { justify-content: flex-start; white-space: nowrap; }

/* Richtung des Verlaufs beim Schattieren (js/shade.js softLevel). */
.shade-dir .btn { min-width: 30px; justify-content: center; }
.shade-dir[hidden] { display: none; }

/* Einstellungen (Menü „Bearbeiten“, Strg+,): links die Themen, ein
   Trennstrich, rechts die Einstellungen des gewählten Themas (wie Photoshop). */
.settings-modal { width: min(680px, calc(100vw - 32px)); max-width: none; }
.settings-body { display: flex; min-height: 300px; margin-top: 4px; }
.settings-nav {
  display: flex; flex-direction: column; gap: 2px; flex: 0 0 160px;
  padding: 4px 12px 4px 0; border-right: 1px solid var(--border, rgba(127,127,127,.35));
}
.settings-tab {
  text-align: left; padding: 8px 10px; border: none; border-radius: 6px; cursor: pointer;
  background: none; color: var(--text-muted, inherit); font: inherit;
}
.settings-tab:hover { background: var(--surface-2); color: var(--text, inherit); }
.settings-tab[aria-selected="true"] { background: var(--surface-3); color: var(--text, inherit); font-weight: 700; }
.settings-panes { flex: 1; min-width: 0; padding: 4px 0 4px 20px; }
.settings-pane[hidden] { display: none; }
.settings-h { margin: 0 0 14px; font-size: var(--fs-lg); font-weight: 700; }
.settings-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.settings-row--top { align-items: flex-start; }
.settings-row .field-label { min-width: 120px; }
.settings-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.settings-brushes { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-brushes:empty { display: none; }
/* Schmal: Themen oben als Zeile, Trennstrich darunter. */
@media (max-width: 560px) {
  .settings-body { flex-direction: column; min-height: 0; }
  .settings-nav { flex-direction: row; flex: none; overflow-x: auto; padding: 0 0 8px; border-right: none; border-bottom: 1px solid var(--border, rgba(127,127,127,.35)); }
  .settings-tab { white-space: nowrap; }
  .settings-panes { padding: 14px 0 4px; }
  /* Beschriftung über den Knöpfen, Knopfgruppen brechen um statt herauszuragen. */
  .settings-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .settings-row .field-label { min-width: 0; }
  .settings-pane .btn-group { flex-wrap: wrap; }
}

/* Knopfgruppen in den Einstellungen dürfen umbrechen (lange Beschriftungen). */
.settings-pane .btn-group { max-width: 100%; flex-wrap: wrap; }