/* =====================================================================
   Mausefalle — zentrale Design-Tokens
   ===================================================================== */
:root {
  /* ---- Farben (helles Schema) ---- */
  --bg: #eaf1f8;
  --panel: #ffffff;
  --ink: #16263a;
  --accent: #1f6fd6;
  --accent-dark: #14529e;
  --wall: #3d5a7a;
  --stone: #6b7e93;
  --trap: #c0392b;
  --grid-line: #16334d;          /* Gitterlinien dunkelblau (helles Schema) */
  --focus: #0b66d6;
  --cell-bg: #ffffff;            /* Zellhintergrund (hell) = weiß */
  --cell-hi: #dbeafe;            /* Maus-Feld-Hervorhebung (hell, blau) */
  --editor-hover: #dbe7f5;
  --cheese-bg: #fff09e;          /* Käse-Feld (hell) */
  --header-bg: #14529e;          /* Kopfzeile/Navigation (helles Schema) */
  --header-ink: #ffffff;
  --header-sub: #c7dcf2;         /* Untertitel auf farbigem Header */

  /* ---- Maße & Raster ---- */
  --cell: 80px;                  /* Zellgröße; JS liest sie für --grid-w aus */
  /* --grid-w wird zur Laufzeit aus --cell berechnet (6*80 + 5*3 + 2*3 = 501px) */
  --grid-w: 501px;
  --gutter-w: 3em;               /* Breite der Zeilennummern-Spalte */

  /* ---- Typografie ---- */
  --font-sans: "Segoe UI", system-ui, sans-serif;
  --font-mono: "Cascadia Code", "Consolas", monospace;
  --fs-xs: .85rem;
  --fs-sm: .95rem;
  --fs-code: 1.05rem;            /* Inline-Code / Tasten */
  --fs-md: 1rem;
  --fs-lg: 1.1rem;               /* Code-Editor & Gutter */
  --fs-xl: 1.25rem;             /* Symbol-Buttons */
  --fs-2xl: 1.5rem;             /* Überschriften (mobile) */
  --fs-h1: 2rem;
  --fs-cell: 2rem;               /* Symbole im Raster */
  --fw-base: 500;
  --lh: 1.5;
  --tracking: 0.2px;

  /* ---- Abstände ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;

  /* ---- Form & Rahmen ---- */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-pill: 999px;
  --border-w: 2px;
  --border-w-table: 1px;

  /* ---- Fokus ---- */
  --focus-w: 3px;
  --focus-offset: 2px;
  --focus-cell-w: 7px;           /* nach innen liegender Rahmen in Zellen */

  /* ---- Animation ---- */
  --transition-fast: .15s ease;
  --transition-theme: .2s ease;

  /* ---- Schatten ---- */
  --shadow-header: 0 2px 8px rgba(0, 0, 0, .18);
  --shadow-card: 0 3px 10px rgba(0, 0, 0, .12);

  /* ---- Code-Hintergrund (dunkel, in allen Schemata identisch) ---- */
  --code-bg: #2b2b2b;
  --code-ink: #eaeaea;
}

/* ===== Dunkles Theme ===== */
[data-theme="dark"] {
  --bg: #101620;
  --panel: #1a2433;
  --ink: #eef3f9;
  --accent: #4ea3ff;
  --accent-dark: #1f6fd6;
  --wall: #aebfd6;
  --stone: #8fa3bf;
  --trap: #ff6b6b;
  --grid-line: #cdd9e8;
  --focus: #3597ff;
  --cell-bg: #1f2b3b;
  --cell-hi: #1f4a7a;
  --editor-hover: #28384c;
  --cheese-bg: #fff09e;
  --header-bg: #0f2238;
  --header-ink: #eef3f9;
  --header-sub: #9fb6cf;
}

/* Dunkles Schema: warme/cremefarbene Elemente durch Blautöne ersetzen.
   Das Code-Eingabefeld bleibt transparent; die dunkle Highlight-Ebene
   (#code-highlight) liefert Hintergrund und Textfarbe in allen Schemata. */
[data-theme="dark"] .hint { color: var(--accent); }
[data-theme="dark"] code { background: var(--editor-hover); }
[data-theme="dark"] .help-table th { background: #233143; }
[data-theme="dark"] .help-table { color: #eef3f9; }

/* ===== Kontrastverstärktes Schema (Schwarz/Weiß-Symbole) ===== */
[data-theme="contrast"] {
  --bg: #ffffff;
  --panel: #ffffff;
  --ink: #000000;
  --accent: #000000;
  --accent-dark: #000000;
  --wall: #000000;
  --stone: #666666;
  --trap: #d00707;              /* Falle weiterhin rot markiert (Hintergrund) */
  --grid-line: #000000;         /* Gitterlinien schwarz */
  --focus: #0000ee;
  --cell-bg: #ffffff;
  --cell-hi: #ffffff;           /* Maus-Feld: weiß, Markierung über Rahmen (s.u.) */
  --editor-hover: #e6e6e6;
  --cheese-bg: #fff09e;         /* Käse-Feld weiterhin gelb markiert (Hintergrund) */
  --header-bg: #000000;
  --header-ink: #ffffff;
  --header-sub: #cccccc;
}

/* ===== Kontrast-Dunkel (Schwarz/Weiß-Symbole auf dunklem Grund) ===== */
[data-theme="contrast-dark"] {
  --bg: #000000;
  --panel: #000000;
  --ink: #ffffff;
  --accent: #ffffff;
  --accent-dark: #ffffff;
  --wall: #ffffff;
  --stone: #bbbbbb;
  --trap: #ff4d4d;              /* Falle weiterhin rot markiert (Hintergrund) */
  --grid-line: #ffffff;         /* Gitterlinien weiß */
  --focus: #ffe600;
  --cell-bg: #000000;
  --cell-hi: #000000;           /* Maus-Feld: schwarz, Markierung über Rahmen (s.u.) */
  --editor-hover: #1c1c1c;
  --cheese-bg: #ffe600;         /* Käse-Feld weiterhin gelb markiert (Hintergrund) */
  --header-bg: #000000;
  --header-ink: #ffffff;
  --header-sub: #cccccc;
  --code-bg: #000000;           /* Code-Hintergrund dunkel */
  --code-ink: #ffffff;
}

/* Symbole durch Schwarz/Weiß-Zeichen ersetzen */
[data-theme="contrast"] .cell.stone::after { content: "\25CF"; color: #ffffff; }   /* ● schwarzer Stein */
[data-theme="contrast"] .cell.trap { background: #ff0000; }                        /* Falle: rot */
[data-theme="contrast"] .cell.trap.reveal::after { content: "\2715"; color: #ffffff; font-weight: 900; } /* ✕ fettes weißes Symbol */
[data-theme="contrast"] .cell.cheese {                                             /* SVG-Dreieck (Stroke+Fill), für Screenreader unsichtbar */
  background-color: #ffd800;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpolygon points='50,10 94,86 6,86' fill='%23ffffff' stroke='%23000' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 66% auto;
}
[data-theme="contrast"] .cell.cheese::before,
[data-theme="contrast"] .cell.cheese::after { content: none; }
[data-theme="contrast"] .cell.wheat { background: #ffffff; }                       /* Weizen-Feld: weiß */
[data-theme="contrast"] .cell.wheat::after { content: "\2733"; color: #ff7a00; font-weight: 900; }  /* ✳ Weizen (kräftiges Orange) */
[data-theme="contrast"] .cell.nest { background: #4a2f17; }                        /* Zelle dunkelbraun gefüllt */
[data-theme="contrast"] .cell.nest::after  { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 62%; height: 62%; border-radius: 50%; background: #ffffff; -webkit-text-stroke: 0; }  /* hellbrauner Kreis, mittig, kein Stroke */

/* Emoji-Konturschatten aus dem hellen/dunklen Schema im Kontrastmodus entfernen
   (dort gelten nur die zeichenbasierten Symbole mit -webkit-text-stroke). */
[data-theme="contrast"] .cell.stone::after,
[data-theme="contrast"] .cell.trap.reveal::after,
[data-theme="contrast"] .cell.wheat::after,
[data-theme="contrast"] .cell.nest::after,
[data-theme="contrast"] .cell.cheese::after { filter: none; }
[data-theme="contrast"] .cell .mouse .m-emoji { display: none; }                   /* buntes Maus-Emoji ausblenden */
[data-theme="contrast"] .cell .mouse .m-arrow { color: #ffffff; font-weight: 900; } /* Pfeil weiß, dick */
[data-theme="contrast"] .cell.mouse-here { background: #1667d1; border: 4px solid #d1e3fa; } /* Maus-Feld: schwarzer Rahmen statt Blau */
[data-theme="contrast"] .cell.dead { background: #000; }
[data-theme="contrast"] .cell.dead .mouse { color: #fff; }                         /* 💀 weiß auf schwarz */
[data-theme="contrast"] #grid-editor .cell.start::before { content: "\25B6"; color: #000; } /* ▶ Start schwarz */

/* Größere Symbole mit schwarzer Kontur (Kontur liegt hinter der Füllung) */
[data-theme="contrast"] .cell::after,
[data-theme="contrast"] .cell .mouse,
[data-theme="contrast"] #grid-editor .cell.start::before {
  font-size: var(--fs-cell);
  -webkit-text-stroke: 7px #000;
  paint-order: stroke fill;
}

a { color: var(--accent); text-decoration: underline; }
a:hover { text-decoration: none; }
a:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }

* { box-sizing: border-box; }

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-sans);
  font-weight: var(--fw-base);
  background: var(--bg);
  color: var(--ink);
  line-height: var(--lh);
  letter-spacing: var(--tracking);
  transition: background-color var(--transition-theme), color var(--transition-theme);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--accent-dark); color: #fff;
  padding: var(--sp-2) 14px; z-index: 100;
}
.skip-link:focus { left: var(--sp-2); top: var(--sp-2); }

.app-header {
  text-align: center;
  padding: 18px var(--sp-4) 0;
  background: var(--header-bg);
  color: var(--header-ink);
  box-shadow: var(--shadow-header);
}
.header-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--layout-max, 1100px);
  margin: 0 auto;
}
.header-row h1 { grid-column: 2; margin: 0; text-align: center; font-size: var(--fs-h1); color: var(--header-ink); }
#theme-toggle { grid-column: 3; justify-self: end; }
.subtitle { margin: var(--sp-1) 0 0; color: var(--header-sub); }

/* Theme-Toggle im Header: Symbol-frei, heller Kontrast auf farbigem Hintergrund */
.app-header .btn {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}
.app-header .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .24); }

/* Tabs – integrierte Unterstrich-Reiter im Header */
.tabs {
  display: flex; gap: var(--sp-1); justify-content: center;
  margin-top: var(--sp-4);
}
.tab-btn {
  font-size: var(--fs-md); padding: var(--sp-3) var(--sp-5); cursor: pointer;
  letter-spacing: var(--tracking);
  background: transparent; border: none; border-bottom: 3px solid transparent;
  color: rgba(255, 255, 255, .72); border-radius: 0; font-weight: 600;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab-btn:hover { color: #fff; }
.tab-btn.active { color: #fff; border-bottom-color: #fff; }
.tab-btn:focus-visible { outline: var(--focus-w) solid #fff; outline-offset: var(--focus-offset); }

.panel { padding: var(--sp-3) var(--sp-4) var(--sp-5); }
.panel[hidden] { display: none; }

.layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) var(--grid-w);
  gap: var(--sp-5);
  max-width: var(--layout-max, 1100px);
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .app-header { padding: var(--sp-3) var(--sp-4) 0; }
  .header-row h1 { font-size: var(--fs-2xl); }
  .tabs { flex-wrap: wrap; margin-top: var(--sp-2); }
  .tab-btn { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
}
@media (max-width: 480px) {
  .cell { font-size: 1.5rem; }
  .controls { justify-content: center; }
}

/* Rechte Spalte fest so breit wie das Raster -> Breite bleibt beim Laufen stabil */
.col-right { width: 100%; max-width: var(--grid-w); }

h2 { margin-top: var(--sp-2); }

/* ===== Code-Editor ===== */
/* Farbige Highlight-Ebene hinter transparentem Textfeld.
   Beide Elemente MÜSSEN in allen Maßen identisch sein, damit Text und
   Cursor deckungsgleich über der Einfärbung liegen. */
.code-editor { position: relative; display: flex; flex-direction: column; }

/* Vergrößern-Button oben rechts im Code-Editor.
   ID-Selektor, damit die Akzentfarbe die .btn-Regel (später im Stylesheet)
   übertrifft – sonst wäre der Button im Dunkel-/Kontrast-Theme unsichtbar. */
#btn-expand-code {
  position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 10;
  width: 36px; height: 36px; padding: 0; line-height: 1; font-size: var(--fs-xl);
  background: var(--accent); color: var(--bg); border: var(--border-w) solid var(--accent-dark);
}
#btn-expand-code:hover:not(:disabled) { background: var(--accent-dark); }
/* Kontrastmodus: Button hartkodiert schwarz/weiß erzwingen (unabhängig von
   var(--accent)), sonst fällt er auf die .btn-Regel (weißer Hintergrund) zurück. */
[data-theme="contrast"] #btn-expand-code {
  background: #000000; color: #ffffff; border-color: #000000;
}
[data-theme="contrast"] #btn-expand-code:hover:not(:disabled) { background: #333333; }

/* Fast-Vollbild-Modus: Code-Editor überlagert das gesamte Fenster */
.code-editor.code-expanded {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg); padding: var(--sp-2);
  display: flex; flex-direction: column;
}
.code-editor.code-expanded .editor-body { flex: 1; min-height: 0; }
.code-editor.code-expanded #code-highlight,
.code-editor.code-expanded textarea#code {
  padding-top: 48px;             /* Platz für den Schließen-Button */
  min-height: 0; height: 100%;
}
/* Kontrastmodus: Cursor über dem (weißen) Codefenster muss schwarz bleiben */
[data-theme="contrast"] .code-editor.code-expanded textarea#code { caret-color: #000000; }

.code-editor textarea#code,
#code-highlight {
  display: block;
  margin: 0;
  width: 100%;
  min-height: 260px;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  line-height: var(--lh);
  letter-spacing: var(--tracking);
  padding: var(--sp-3);
  border: var(--border-w) solid var(--grid-line);
  border-radius: 0 var(--radius) var(--radius) 0;
  tab-size: 4;
  white-space: pre;
  overflow-x: auto;
}

/* Zeilennummern-Spalte (Gutter) – eigene Spalte links vom Editor,
   damit der Code beim horizontalen Scrollen nicht darunter rutscht */
.editor-body { position: relative; display: flex; align-items: stretch; }
/* Fokusrahmen umschließt Gutter UND Eingabefeld gemeinsam (nicht nur das Textfeld) */
.code-editor .editor-body:focus-within {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}
.editor-surface { position: relative; flex: 1; min-width: 0; }
.gutter {
  position: relative; flex: none;
  width: var(--gutter-w);
  box-sizing: border-box;
  padding: var(--sp-3) var(--sp-2) var(--sp-3) 0;
  overflow: hidden;
  text-align: right;
  white-space: pre;
  font-family: var(--font-mono);
  font-size: var(--fs-lg); line-height: var(--lh); letter-spacing: var(--tracking);
  color: #fff;
  background: var(--code-bg);
  border: var(--border-w) solid var(--grid-line);
  border-right: 1px solid var(--grid-line);
  border-radius: var(--radius) 0 0 var(--radius);
  user-select: none;
}
.code-editor.code-expanded .gutter { padding-top: 48px; }
[data-theme="contrast"] .gutter {
  background: #fff; color: #000;
  border-color: var(--grid-line); border-right-color: var(--grid-line);
}

/* Die farbige Ebene (nur Anzeige, für Screenreader ausgeblendet) */
#code-highlight {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: hidden;
  border-color: transparent;     /* Rahmen zeichnet das Textfeld darüber */
  background: var(--code-bg);
  color: var(--code-ink);
  pointer-events: none;
  z-index: 0;
}

/* Das echte Eingabefeld: transparent, nur der Cursor bleibt sichtbar */
textarea#code {
  position: relative;
  z-index: 1;
  background: transparent;
  color: transparent;
  caret-color: var(--code-ink);
  resize: vertical;
  overflow: auto;
}
textarea#code::placeholder { color: #9aa7b4; opacity: 1; }
/* Fokusrahmen liegt am Gesamtbereich (.editor-body:focus-within), damit er
   Gutter und Textfeld gemeinsam umschließt – hier keinen eigenen Rahmen. */
textarea#code:focus-visible { outline: none; }

.hint { font-size: var(--fs-sm); color: #000000; margin: var(--sp-2) 0; }
code, kbd {
  background: var(--editor-hover);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  white-space: nowrap;
}
kbd { color: inherit; }

/* ===== Buttons ===== */
.controls { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin: var(--sp-3) 0; }
.control-panel {
  margin: 0; padding: var(--sp-2) var(--sp-3);
  border: var(--border-w) solid var(--grid-line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
  background: var(--editor-hover);
  justify-content: center;
}
.btn {
  font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); cursor: pointer;
  border: var(--border-w) solid var(--accent-dark); background: var(--panel);
  color: var(--accent-dark); border-radius: var(--radius); font-weight: 600;
  letter-spacing: var(--tracking);
}
.btn:hover:not(:disabled) { background: var(--editor-hover); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); }
.btn-primary:hover:not(:disabled) { background: var(--accent); }
/* Schrittmodus aktiv (engagiert): bleibt optisch hervorgehoben */
.btn.active { background: var(--accent); color: #fff; border-color: var(--accent-dark); }
.btn.active:hover:not(:disabled) { background: var(--accent-dark); }
/* Dunkles Schema: Rahmen + Schrift der Standard-Buttons in hellem Akzent
   (besserer Kontrast auf dunklem Hintergrund). Primary/Active ausgenommen,
   damit deren weiße Schrift nicht mit dem Akzent-Hintergrund kollidiert. */
[data-theme="dark"] .btn:not(.btn-primary):not(.active) {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-small { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); }
.btn:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }

/* Reine Symbol-Buttons (Ausführen/Stopp/Zurücksetzen): quadratisch, kein Text */
.icon-btn {
  width: 44px; height: 44px; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xl);
  letter-spacing: 0;             /* sonst rückt das Symbol durch .btn-Abstand nach links */
}
/* Eingebettete SVG-Steuerungssymbole (play/stop/reload/step) */
.icon-btn .ctrl-icon { width: 1.4rem; height: 1.4rem; display: block; }
/* In den dunklen Schemata sollen die Symbole weiß sein … */
[data-theme="dark"] .ctrl-icon,
[data-theme="contrast-dark"] .ctrl-icon { color: #ffffff; }
/* … außer der Play-Button (btn-run): der hat in den dunklen Schemata
   einen weißen Hintergrund, daher muss das Symbol schwarz sein. */
[data-theme="dark"] #btn-run .ctrl-icon,
[data-theme="contrast-dark"] #btn-run .ctrl-icon { color: #000000; }

.announce-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); cursor: pointer; user-select: none;
}
/* natives Checkbox visuell ausblenden, aber fokussier-/ankündigbar halten */
.announce-toggle input {
  position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0;
}
/* gleitender Schalter (Schieberegler) */
.switch {
  position: relative; flex: none;
  width: 42px; height: 22px; border-radius: var(--radius-pill);
  background: var(--editor-hover); border: var(--border-w) solid var(--grid-line);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-dark); transition: transform var(--transition-fast), background var(--transition-fast);
}
.announce-toggle input:checked + .switch {
  background: var(--accent); border-color: var(--accent-dark);
}
.announce-toggle input:checked + .switch::after {
  transform: translateX(20px); background: #fff;
}
.announce-toggle input:focus-visible + .switch {
  outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset);
}

.save-load h3 { flex-basis: 100%; margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-md); }

/* Status (Käse / Weizen / Nest) – eine Zeile direkt über den Steuerungs-Buttons */
.status-bar {
  flex-basis: 100%;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--sp-1) var(--sp-5);
  margin-bottom: var(--sp-2); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--grid-line);
  font-size: var(--fs-sm); white-space: nowrap;
}
.status-item { white-space: nowrap; }
.status-item strong { font-variant-numeric: tabular-nums; }

/* ===== Spielfeld-Raster ===== */
.grid-row { display: contents; }
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 3px; background: var(--grid-line); padding: 3px;
  border-radius: 0; width: 100%; max-width: var(--grid-w);
  box-shadow: var(--shadow-card);
}
.cell {
  background: var(--cell-bg); display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-cell); position: relative; cursor: default;
  border: none; padding: 0; overflow: hidden;
  aspect-ratio: 1 / 1;
}
.cell .coord {
  /* Nur für Screenreader: visuell ausgeblendet, bleibt aber im Zugriff,
     da die volle Information ohnehin im aria-label der Zelle steckt. */
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.cell.stone { background: var(--stone); }
.cell.stone::after { content: "🪨"; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .35)); }
.cell.trap.reveal::after { content: "🪤"; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .35)); }
.cell.cheese { background: var(--cheese-bg); }
.cell.cheese::after { content: "🧀"; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .3)); }
.cell.wheat { background: #eaf6d8; }
.cell.wheat::after { content: "🌽"; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .3)); }
.cell.nest { background: #f3e2c7; }
.cell.nest::after { content: "🪹"; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .3)); }
.cell .mouse {
  font-size: var(--fs-cell); line-height: 1; white-space: nowrap;
  transition: transform var(--transition-fast);
  z-index: 2;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .3));
}
/* Richtungspfeil ➜ (U+279C, zeigt von sich aus nach rechts) je Blickrichtung drehen */
.cell .mouse .m-arrow { display: inline-block; transition: transform var(--transition-fast); }
.cell .mouse .m-arrow.dir-0 { transform: rotate(270deg); }    /* oben */
.cell .mouse .m-arrow.dir-1 { transform: rotate(0deg); }     /* rechts */
.cell .mouse .m-arrow.dir-2 { transform: rotate(90deg); }    /* unten */
.cell .mouse .m-arrow.dir-3 { transform: rotate(180deg); }   /* links */
.cell.mouse-here { background: #005fcc; }
.cell.mouse-here .mouse { color: #fff; font-weight: 800; }
/* Unter der Maus den Käse ausblenden, damit sich Symbole nicht überlappen
   und die Zellränder nicht überschritten werden (nur die Maus ist sichtbar). */
.cell.mouse-here.cheese::after { content: none; }
.cell.mouse-here.wheat::after { content: none; }
.cell.mouse-here.nest::after { content: none; }
.cell.trap { background: #d00707; }
.cell.dead { background: #d00707; }
/* Auf dem toten Feld nur den Totenkopf zeigen, das Fallen-Symbol ausblenden */
.cell.dead.trap.reveal::after { content: none; }

.cell:focus-visible {
  outline: var(--focus-cell-w) solid var(--focus);
  outline-offset: calc(-1 * var(--focus-cell-w));
  z-index: 3;
}
#grid-editor .cell { cursor: pointer; }
#grid-editor .cell:hover { background: var(--editor-hover); }
#grid-editor .cell.start::before {
  content: "🐭"; position: absolute; font-size: var(--fs-cell);
}

/* ===== Ausgabe ===== */
.output {
  margin-top: var(--sp-3); padding: var(--sp-4);
  background: var(--accent-dark); border: var(--border-w) solid var(--accent-dark);
  border-radius: var(--radius); min-height: 48px; font-size: var(--fs-md);
  color: #ffffff;
  white-space: pre-wrap;
}
.output.error { background: #fbe3e3; border-color: var(--trap); color: #7a1616; font-weight: 600; }
.output.success { background: #e3f5e3; border-color: #2b8a2b; color: #1c5c1c; font-weight: 600; }
.output.gameover { background: var(--code-bg); border-color: #000; color: #ff6b6b; font-weight: 700; font-size: var(--fs-md); }
[data-theme="dark"] .output.gameover { background: #4a1414; border-color: #ff6b6b; color: #ffd2d2; }
[data-theme="contrast"] .output { background: #ffffff; border: var(--border-w) solid #000000; color: #000000; }

/* Objektübersicht (P): echte Bulletpoints */
.pos-list { margin: 0; padding-left: 1.3em; list-style: disc; }
.pos-list li { margin: var(--sp-1) 0; }

/* ===== Editor-Felder (Level-Editor) ===== */
/* Gemeinsame Karte für Werkzeug-, Startrichtungs- und Rastergrößen-Auswahl */
.tool-picker,
.dir-picker,
.mode-picker {
  border: var(--border-w) solid var(--grid-line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}
.tool-picker label,
.mode-picker label { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; cursor: pointer; }
.editor-fields .mode-picker label { display: flex; align-items: center; flex-direction: row; justify-content: flex-start; gap: var(--sp-2); padding: var(--sp-1) 0; cursor: pointer; }
.tool-picker .tool-hint { margin: var(--sp-2) 0 0; }

.editor-fields { margin: var(--sp-3) 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.editor-fields label { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-sm); max-width: 320px; }
.editor-fields input,
.editor-fields select,
.save-load input,
.save-load select {
  padding: var(--sp-2); border: var(--border-w) solid var(--grid-line); border-radius: var(--radius-sm); font-size: var(--fs-sm);
}
/* Startrichtung-Auswahl */
.dir-picker { margin: 0; }
.dir-picker legend { font-weight: 600; padding: 0 var(--sp-1); }
.editor-fields .field-row {
  display: flex; align-items: flex-start; justify-content: flex-start;
  gap: var(--sp-3); font-size: var(--fs-sm); max-width: none;
}
.field-label { white-space: nowrap; }
.select-wrap { position: relative; flex: none; }
.editor-fields .select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%; padding: var(--sp-2) 34px var(--sp-2) var(--sp-3);
  border: var(--border-w) solid var(--grid-line); border-radius: var(--radius-sm);
  background-color: var(--panel); color: var(--ink);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.select-wrap::after {
  content: ""; position: absolute; right: var(--sp-3); top: 50%;
  width: 0; height: 0; transform: translateY(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--ink); pointer-events: none;
}
.editor-fields .select:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }
.mode-picker { margin-top: var(--sp-2); }
.save-load { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.save-load input, .save-load select { min-width: 140px; }
/* Titel des Blattes (Schwellkopie) – eigene Zeile über den Buttons */
.title-field { flex-basis: 100%; display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-1); }
.title-field label { font-weight: 600; }
.title-field .text-input { width: 100%; max-width: 420px; }
.title-field .hint { margin: 0; }

/* ===== Hilfe ===== */
.help-table { border-collapse: collapse; width: 100%; max-width: 720px; margin: var(--sp-3) auto; background: var(--panel); }
.help-table caption { text-align: left; font-weight: 700; padding: var(--sp-2) 0; }
.help-table th, .help-table td { border: var(--border-w-table) solid var(--grid-line); padding: var(--sp-2) var(--sp-3); text-align: left; }
.help-table th { background: var(--accent-dark); color: #fff;}
/* Kontrastschema: weiße Kopfzeile mit deutlicher Trennlinie zur Datenzeile */
[data-theme="contrast"] .help-table th {
  background: var(--ink);
  color: var(--bg);
}
.code-block {
  background: var(--code-bg); color: var(--code-ink); padding: var(--sp-4); border-radius: var(--radius);
  font-family: var(--font-mono); overflow-x: auto; max-width: 720px;
  margin: var(--sp-3) auto;
}

/* Syntax-Highlighting der Codebeispiele UND des Eingabefelds – gilt nur im
   hellen und dunklen Schema (Farbtöne auf dunklem Codehintergrund). Im
   Kontrastschema werden alle Token weiter unten wieder vereinheitlicht. */
.syntax .tok-comment { color: #7ea770; font-style: italic; }
.syntax .tok-string  { color: #e8a06a; }
.syntax .tok-num     { color: #b5cea8; }
.syntax .tok-keyword { color: #6ab0f3; font-weight: 700; }
.syntax .tok-cmd     { color: #e6d271; }
.syntax .tok-sensor  { color: #56cbb0; }

/* Kontrastschema: KEIN Syntax-Highlighting – alle Token einheitlich einfärben */
[data-theme="contrast"] #code-highlight { background: #ffffff; color: #000000; }
[data-theme="contrast"] textarea#code { caret-color: #000000; }
[data-theme="contrast"] textarea#code::placeholder { color: #333333; }
[data-theme="contrast"] .syntax .tok-comment,
[data-theme="contrast"] .syntax .tok-string,
[data-theme="contrast"] .syntax .tok-num,
[data-theme="contrast"] .syntax .tok-keyword,
[data-theme="contrast"] .syntax .tok-cmd,
[data-theme="contrast"] .syntax .tok-sensor {
  color: inherit; font-style: normal; font-weight: 400;
}

/* Kontrastschema: keine grauen Hinterlegungen hinter Inline-Code/Tasten –
   schwarze Schrift auf weißem Grund, zur Abgrenzung nur ein dünner Rahmen. */
[data-theme="contrast"] code,
[data-theme="contrast"] kbd {
  background: transparent;
  color: #000000;
  border: 1px solid #000000;
}

/* Hilfe-Seite: Inhalt auf komfortable Breite zentrieren, damit Überschriften
   und Tabellen nicht am Viewport-Rand kleben */
#panel-help { max-width: 760px; margin: 0 auto; }
#panel-help h2 { margin-top: var(--sp-1); }

.app-footer { text-align: center; padding: var(--sp-4); color: var(--ink); font-size: var(--fs-xs); }

/* ===== Kontrast-Dunkel: Element-Overrides (Invertierung von Kontrast) ===== */
[data-theme="contrast-dark"] .hint { color: var(--ink); }
[data-theme="contrast-dark"] .skip-link { background: #fff; color: #000; }
[data-theme="contrast-dark"] .btn-primary { background: #fff; color: #000; border-color: #fff; }
[data-theme="contrast-dark"] .btn.active { background: #fff; color: #000; border-color: #fff; }

/* Zellen: weiße Symbole mit schwarzem Kontur auf dunklem Grund */
[data-theme="contrast-dark"] .cell.stone::after { content: "\25CF"; color: #ffffff; filter:none;}   /* ● schwarzer Stein */
[data-theme="contrast-dark"] .cell.trap { background: #ff0000; }                        /* Falle: rot */
[data-theme="contrast-dark"] .cell.trap.reveal::after { content: "\2715"; color: #ffffff; font-weight: 900; filter: none; } /* ✕ fettes weißes Symbol */
[data-theme="contrast-dark"] .cell.dead.trap.reveal::after { content: none; } /* auf Falle gestorben: nur Totenkopf */
[data-theme="contrast-dark"] .cell.cheese {                                             /* SVG-Dreieck (Stroke+Fill), für Screenreader unsichtbar */
  background-color: #ffd800;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cpolygon points='50,10 94,86 6,86' fill='%23ffffff' stroke='%23000' stroke-width='8' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 66% auto;
}
[data-theme="contrast-dark"] .cell.cheese::before,
[data-theme="contrast-dark"] .cell.cheese::after { content: none; }
[data-theme="contrast-dark"] .cell.wheat { background: var(--bg); }                       /* Weizen-Feld: schwarz */
[data-theme="contrast-dark"] .cell.wheat::after { content: "\2733"; color: #ff7a00; font-weight: 900; filter: none; }  /* ✳ Weizen (kräftiges Orange) */
[data-theme="contrast-dark"] .cell.nest { background: #4a2f17; }                        /* Zelle dunkelbraun gefüllt */
[data-theme="contrast-dark"] .cell.nest::after  { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 62%; height: 62%; border-radius: 50%; background: #fff; -webkit-text-stroke: 0; }  /* weißer Kreis, mittig, kein Stroke */
/* Belegtes Feld: Symbol ausblenden, nur die Maus bleibt sichtbar (wie Kontrast-Schema) */
[data-theme="contrast-dark"] .cell.mouse-here.wheat::after { content: none; }
[data-theme="contrast-dark"] .cell.mouse-here.nest::after { content: none; }
[data-theme="contrast-dark"] .cell.mouse-here.cheese { background-image: none; }
[data-theme="contrast-dark"] .cell .mouse .m-emoji { display: none; }                   /* buntes Maus-Emoji ausblenden */
[data-theme="contrast-dark"] .cell .mouse .m-arrow { color: #fff; font-weight: 900;}  /* Pfeil weiß, dick */
[data-theme="contrast-dark"] .cell.mouse-here { background: #1667d1; border: 4px solid #d1e3fa; } /* Maus-Feld: weißer Rahmen */
[data-theme="contrast-dark"] .cell.dead { background: #000; }
[data-theme="contrast-dark"] .cell.dead .mouse { color: #fff; }                         /* 💀 weiß auf schwarz */
[data-theme="contrast-dark"] #grid-editor .cell.start::before { content: "\25B6"; color: #000; } /* ▶ Start schwarz */
/* Größere Symbole mit schwarzem Kontur (Kontur liegt hinter der Füllung) */
[data-theme="contrast-dark"] .cell::after,
[data-theme="contrast-dark"] .cell .mouse,
[data-theme="contrast-dark"] #grid-editor .cell.start::before {
  font-size: var(--fs-cell);
  -webkit-text-stroke: 7px var(--bg);;
  paint-order: stroke fill;
}

/* Syntax-Highlighting aus (einfarbig, erbt --ink) */
[data-theme="contrast-dark"] .syntax .tok-comment,
[data-theme="contrast-dark"] .syntax .tok-string,
[data-theme="contrast-dark"] .syntax .tok-num,
[data-theme="contrast-dark"] .syntax .tok-keyword,
[data-theme="contrast-dark"] .syntax .tok-cmd,
[data-theme="contrast-dark"] .syntax .tok-sensor {
  color: inherit; font-style: normal; font-weight: 400;
}

/* Inline-Code/Tasten: weiße Schrift auf dunklem Grund, dünner Rahmen */
[data-theme="contrast-dark"] code,
[data-theme="contrast-dark"] kbd {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}

/* Ausgabe */
[data-theme="contrast-dark"] .output { background: #000; border: 2px solid #fff; color: #fff; }
[data-theme="contrast-dark"] .output.error { background: #3a0d0d; border-color: var(--trap); color: #ffd2d2; }
[data-theme="contrast-dark"] .output.success { background: #0d2e0d; border-color: #2bff2b; color: #c8ffc8; }
[data-theme="contrast-dark"] .output.gameover { background: #000; border-color: #fff; color: #ff6b6b; }

/* Hilfetabelle: dunkle Kopfzeile mit heller Trennlinie */
[data-theme="contrast-dark"] .help-table th {
  background: #000;
  border-bottom: 3px solid #fff;
}

@media (prefers-reduced-motion: reduce) {
  .cell .mouse { transition: none; }
}