:root{
  --bg: #030504;
  --phosphor: #7CFF9E;
  --phosphor-dim: #2A6B3E;
  --amber: #FFB347;
  --scanline: rgba(124,255,158,0.03);
  --font: 'Courier New', monospace;
  --bar-h: 76px;
  --side-gap: 28px;
}
html,body{
  margin:0; padding:0; height:100%; background:#000;
  overflow:hidden; font-family:var(--font);
}
#wrap{
  display:flex; flex-direction:column;
  width:100vw; height:100vh;
  padding:0 var(--side-gap);
  box-sizing:border-box;
  background:#000;
}
#topbar{
  position:relative; flex:0 0 var(--bar-h); height:var(--bar-h);
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 5%;
  box-sizing:border-box;
  background:#000;
}
#bottombar{
  position:relative; flex:0 0 var(--bar-h); height:var(--bar-h);
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center;
  padding:0 5%;
  box-sizing:border-box;
  background:#000;
}
#stage{
  position:relative; flex:1 1 auto;
  width:100%; min-height:0;
  background:var(--bg);
  overflow:hidden;
}
canvas{
  display:block;
  width:100%; height:100%;
  background:var(--bg);
  box-shadow: 0 0 60px rgba(124,255,158,0.08) inset;
}
#overlay{
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom, var(--scanline) 0px, var(--scanline) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode: screen;
}
/* HUD-Slot: bis zu 4 Spieler (0/1 oben, 2/3 unten). Inaktiv = gedimmt, nur "SPIELER X";
   aktiv setzt JS die Schifffarbe inline (color) und blendet die Balken (.pmeters) ein. */
.phud{
  font-size:13px; letter-spacing:2px;
  color:var(--phosphor-dim);
  text-shadow: 0 0 6px currentColor;
  pointer-events:none;
  white-space:nowrap;
  min-width:0;                 /* darf im Grid unter die Inhaltsbreite schrumpfen (statt zu überlaufen) */
}
.p-left{ text-align:left; }
.p-right{ text-align:right; }
.phud:not(.active) .pmeters{ display:none; } /* inaktiver Slot zeigt nur den Namen */
/* Beide Messwerte stehen im Markup einheitlich in der Reihenfolge ENERGY, SHIELD;
   der rechte Slot spiegelt sie nur optisch (row-reverse), damit die Balken zur
   Bildschirmmitte zeigen. Themes können diese Spiegelung abschalten. */
/* Alles hängt an der Schriftlinie: Beschriftung, Balken und Spielername sitzen auf
   derselben Grundlinie (baseline statt center), damit der Balken exakt im Textblock steht. */
.pmeters{
  display:inline-flex; align-items:baseline; gap:16px;
  vertical-align:baseline; margin:0 14px;
}
.p-right .pmeters{ flex-direction:row-reverse; }
.meter{ display:inline-flex; align-items:baseline; gap:8px; }
/* Zweifarbiger Balken ohne Rahmen: der leere Anteil ist ein gedimmter Ton der Spielerfarbe
   (Track), der gefüllte Anteil die volle Spielerfarbe → Verhältnis auf einen Blick lesbar.
   Höhe = Versalhöhe der HUD-Schrift (1cap), Unterkante = Grundlinie (Flex-Baseline eines
   Elements ohne eigenen Text ist seine Unterkante) → der Balken deckt sich exakt mit den
   Großbuchstaben daneben. 9px bleibt als Fallback für Browser ohne cap-Einheit.
   --bar-lift gleicht Schriften aus, deren Großbuchstaben nicht bis auf die Grundlinie
   reichen (Pixelfonts haben unten oft eine leere Zeile): Der Balken wird um genau diesen
   Betrag kürzer *und* angehoben, bleibt oben also bündig und rutscht unten mit hoch. */
.bar{
  position:relative; display:inline-block;
  width:64px; height:9px; height:calc(1cap - var(--bar-lift, 0px));
  bottom:var(--bar-lift, 0px);
  overflow:hidden;
  background:color-mix(in srgb, currentColor 22%, #000);
}
.bar-fill{
  position:absolute; top:0; bottom:0; left:0; width:100%;
  background:currentColor; box-shadow:0 0 6px currentColor;
  transition:width .12s linear;
}
.p-right .bar-fill{ left:auto; right:0; }
#center-msg{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  color:var(--phosphor); font-size:22px; letter-spacing:4px;
  text-shadow: 0 0 10px currentColor;
  text-align:center; pointer-events:none;
  display:none;
}
#title{
  text-align:center;
  color:var(--phosphor); font-size:16px; letter-spacing:8px;
  text-shadow:0 0 10px currentColor; pointer-events:none;
}

#settings-overlay{
  position:fixed; inset:0; z-index:30;
  background:rgba(0,5,2,0.82);
  display:none; align-items:center; justify-content:center;
}
#settings-overlay.open{ display:flex; }

#settings-panel{
  width:min(520px, 90vw); max-height:86vh; overflow:auto;
  background:#050a06; border:1px solid var(--phosphor-dim);
  box-shadow:0 0 40px rgba(124,255,158,0.15);
  padding:26px 30px; color:var(--phosphor);
  box-sizing:border-box;
}
#settings-panel h2{
  margin:0 0 14px; font-size:20px; letter-spacing:8px; text-align:center;
  text-shadow:0 0 10px currentColor;
}
#story-text{
  font-size:12.5px; line-height:1.7; color:var(--phosphor-dim);
  margin:0 0 22px; text-align:left;
}
.s-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:15px; font-size:12px; letter-spacing:1px;
  gap:14px;
  /* Rahmen/Padding immer präsent (transparent), damit der Fokus-Zustand nicht umbricht. */
  border-left:2px solid transparent; padding-left:10px; margin-left:-12px;
  transition:border-color .12s, background-color .12s;
}
.s-row.focused{
  border-left-color:var(--phosphor);
  background:color-mix(in srgb, var(--phosphor) 8%, var(--bg));
}
.s-row > label:first-child{ color:var(--phosphor-dim); flex:0 0 auto; }
.s-row input[type=text]{
  background:#000; border:1px solid var(--phosphor-dim); color:var(--phosphor);
  font-family:inherit; font-size:12px; padding:6px 8px; width:150px;
  letter-spacing:1px; box-sizing:border-box;
}
.s-row input[type=text]:focus{ outline:none; border-color:var(--phosphor); }

.s-options{ display:flex; gap:6px; }
.s-options button{
  background:#000; border:1px solid var(--phosphor-dim); color:var(--phosphor-dim);
  font-family:inherit; font-size:12px; padding:6px 11px; cursor:pointer;
}
.s-options button.active{
  border-color:var(--phosphor); color:var(--phosphor);
  text-shadow:0 0 6px currentColor;
}
.s-options.compact{ flex-wrap:wrap; gap:5px; justify-content:flex-end; }
.s-options.compact button{ padding:2px; line-height:0; }
.s-options.compact canvas{ display:block; width:40px; height:40px; }

.switch{ position:relative; display:inline-block; width:38px; height:20px; flex:0 0 auto; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch .slider{
  position:absolute; inset:0; background:#000; border:1px solid var(--phosphor-dim);
  cursor:pointer; transition:.15s;
}
.switch .slider::before{
  content:''; position:absolute; width:12px; height:12px; left:2px; top:2px;
  background:var(--phosphor-dim); transition:.15s;
}
.switch input:checked + .slider{ border-color:var(--phosphor); }
.switch input:checked + .slider::before{
  transform:translateX(16px); background:var(--phosphor); box-shadow:0 0 6px var(--phosphor);
}
.switch input:disabled + .slider{ opacity:0.35; cursor:not-allowed; }

#settings-hint{
  font-size:10px; letter-spacing:1px; color:var(--phosphor-dim);
  margin:-6px 0 16px; text-align:right;
}

.s-actions{
  display:flex; justify-content:space-between; margin-top:22px;
  gap:10px;
}
/* Einheitliche Aktions-Buttons (Start-, Options- und Abbruch-Dialog teilen Look + Fokus). */
.s-actions button{
  flex:1; border:1px solid var(--phosphor-dim); color:var(--phosphor);
  background:color-mix(in srgb, var(--phosphor) 6%, var(--bg));
  font-family:inherit; font-size:11px; letter-spacing:2px; padding:11px; cursor:pointer;
  transition:border-color .12s, box-shadow .12s, background-color .12s;
}
#btn-apply, #btn-start, #btn-quit-no{ border-color:var(--phosphor); text-shadow:0 0 6px currentColor; }
.s-actions button:hover{ background:color-mix(in srgb, var(--phosphor) 12%, var(--bg)); }
.s-actions button.focused{
  border-color:var(--phosphor);
  background:color-mix(in srgb, var(--phosphor) 18%, var(--bg));
  box-shadow:0 0 16px rgba(124,255,158,0.25);
}
.s-actions button:disabled{ opacity:0.4; cursor:not-allowed; text-shadow:none; }
.s-actions button:disabled:hover{ background:color-mix(in srgb, var(--phosphor) 6%, var(--bg)); }

/* ---------- Startbildschirm (Attract-Mode dahinter sichtbar) ---------- */
#start-overlay{
  position:fixed; inset:0; z-index:25;
  display:none; align-items:center; justify-content:center;
  background:rgba(3,5,4,0.35);
}
#start-overlay.open{ display:flex; }
#start-content{
  width:min(1040px, 94vw); text-align:center; box-sizing:border-box;
  padding:34px 30px 30px;
  background:rgba(5,10,6,0.72); border:1px solid var(--phosphor-dim);
  box-shadow:0 0 40px rgba(124,255,158,0.15);
  display:flex; flex-direction:column; gap:42px;
  max-height:94vh; overflow:auto;
}
#start-title{
  margin:0 0 22px; font-size:32px; letter-spacing:12px;
  color:var(--phosphor); text-shadow:0 0 14px currentColor;
}
#start-content #story-text{ text-align:left; margin:0 auto; max-width:760px; }

/* Spielerkarten (von links nach rechts) */
#player-cards{ display:flex; gap:14px; justify-content:center; align-items:stretch; }
/* Einheitliche Zustände (Karten + Start-Buttons teilen dieselbe Logik):
   Ruhe   = deckender, leicht angehobener Hintergrund + gedimmter Rahmen
   Fokus  = deutlich hellerer Hintergrund + voller Rahmen (+ Glow bei Phosphor)
   So ist jederzeit klar, welches Element den Fokus hat. */
.pcard{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:14px 8px;
  background:color-mix(in srgb, var(--phosphor) 6%, var(--bg));
  border:1px solid var(--phosphor-dim);
  cursor:pointer; transition:border-color .12s, box-shadow .12s, background-color .12s;
}
.pcard.focused{
  border-color:var(--phosphor);
  background:color-mix(in srgb, var(--phosphor) 18%, var(--bg));
  box-shadow:0 0 16px rgba(124,255,158,0.25);
}
/* „Aus": nicht die Karte deaktivieren (Fokus muss sichtbar bleiben), sondern nur
   die inneren Anzeigen ausgrauen. */
.pcard.off .pc-name,
.pcard.off canvas,
.pcard.off .pc-model,
.pcard.off .pc-mode{ filter:grayscale(1); opacity:0.5; }

/* Namenszeile */
.pc-namerow{ display:flex; align-items:center; justify-content:center; width:100%; }
.pcard .pc-name{
  width:100%; box-sizing:border-box;
  background:transparent; border:1px solid transparent; color:var(--phosphor);
  font-family:inherit; font-size:11px; text-align:center; letter-spacing:1px;
  padding:4px 3px; text-transform:uppercase;
}
.pcard .pc-name:focus{ outline:none; border-color:var(--phosphor); }

/* Modell-Auswahl: Vorschau zwischen zwei Pfeilen (◄ ►) */
.pc-modelrow{ display:flex; align-items:center; justify-content:center; gap:6px; }
.pcard canvas{ width:72px; height:72px; }
.pcard .pc-model{ font-size:12px; letter-spacing:1px; color:var(--phosphor); }

/* Modus-Auswahl: Text zwischen Auf/Ab-Pfeilen (▲ ▼) */
.pc-moderow{ display:flex; align-items:center; justify-content:center; gap:6px; }
.pcard .pc-mode{
  font-size:10px; letter-spacing:1px; color:var(--phosphor-dim);
  border:1px solid var(--phosphor-dim); padding:3px 7px;
}

/* Auswahl-Pfeile: nur sichtbar, wenn in die Karte navigiert wurde */
.pc-arrow{
  visibility:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--phosphor-dim); cursor:pointer;
  font-family:inherit; font-size:15px; line-height:1; padding:2px 4px;
}
.pc-arrow svg{ display:block; }
.pc-arrow:hover{ color:var(--phosphor); }
.pcard.editing .pc-arrow{ visibility:visible; }

#start-actions{
  width:100%; max-width:320px; margin:0 auto;
  flex-direction:column; align-items:stretch;
}
/* Start-Buttons: nur Layout (Aussehen + Fokus kommen aus .s-actions button). */
#start-actions button{ flex:none; width:100%; }

/* HUD-Leisten nur im laufenden Spiel zeigen (Layout bleibt stabil per visibility) */
#wrap:not(.in-game) #topbar,
#wrap:not(.in-game) #bottombar{ visibility:hidden; }

/* Attractscreen: vollflächiges Sternenfeld ohne grünen Rand-Glow des Canvas */
#wrap:not(.in-game) canvas{ box-shadow:none; }

/* Startbildschirm: Leisten und seitliches Padding ausblenden -> Canvas füllt das ganze Fenster */
#wrap.attract{ padding:0; }
#wrap.attract #topbar,
#wrap.attract #bottombar{ display:none; }

/* ---------- Abbruch-Rückfrage (über dem pausierten Spiel) ---------- */
#confirm-overlay{
  position:fixed; inset:0; z-index:35;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,5,2,0.55);
}
#confirm-overlay.open{ display:flex; }
#confirm-panel{
  width:min(440px, 90vw); box-sizing:border-box; text-align:center;
  background:#050a06; border:1px solid var(--phosphor-dim);
  box-shadow:0 0 40px rgba(124,255,158,0.15);
  padding:28px 30px;
}
#confirm-panel h2{
  margin:0 0 22px; font-size:18px; letter-spacing:6px;
  color:var(--phosphor); text-shadow:0 0 10px currentColor;
}

/* ---------- 8-Bit-Theme: harte Kanten, kein Glow, keine Scanlines, pixelige Skalierung ---------- */
:root[data-theme="8bit"] canvas{ image-rendering:pixelated; box-shadow:none; }
:root[data-theme="8bit"] #overlay{ display:none; }
:root[data-theme="8bit"] .phud,
:root[data-theme="8bit"] #title,
:root[data-theme="8bit"] #center-msg,
:root[data-theme="8bit"] #start-title,
:root[data-theme="8bit"] #settings-panel h2,
:root[data-theme="8bit"] #confirm-panel h2,
:root[data-theme="8bit"] .s-options button.active{ text-shadow:none; }
/* weiche Glow-Schatten durch harte Block-Schatten ersetzen */
:root[data-theme="8bit"] #settings-panel,
:root[data-theme="8bit"] #start-content,
:root[data-theme="8bit"] #confirm-panel{ box-shadow:4px 4px 0 var(--phosphor-dim); }
:root[data-theme="8bit"] .bar-fill{ box-shadow:none; }
:root[data-theme="8bit"] .pcard.focused,
:root[data-theme="8bit"] .s-row.focused,
:root[data-theme="8bit"] .s-actions button.focused{ box-shadow:none; } /* Fokus nur über Rahmenfarbe */

/* 8-Bit-Pixelfont (Press Start 2P) ist groß/breit → Größen & Laufweite anpassen, damit nichts überläuft.
   Werte sind konservativ; visuell im Browser ggf. nachschärfen. */
:root[data-theme="8bit"] #start-title{ font-size:22px; letter-spacing:2px; }
:root[data-theme="8bit"] #title{ font-size:24px; letter-spacing:4px; } /* Faktor 2 gegenüber 12px */
:root[data-theme="8bit"] #settings-panel h2,
:root[data-theme="8bit"] #confirm-panel h2{ font-size:13px; letter-spacing:3px; }
:root[data-theme="8bit"] #story-text{ font-size:8px; line-height:2; }
/* 8-Bit-HUD: Schrift Faktor 1.75 (8px → 14px), Beschriftungen auf „E“/„S“ gekürzt und
   in beiden Slots gleich sortiert (erst E, dann S) — der Pixelfont ist zu breit für
   ENERGY/SHIELD, und die Kürzel sollen unabhängig von der HUD-Position gleich stehen. */
/* --bar-lift: Press Start 2P lässt unter den Großbuchstaben eine Pixelzeile Luft bis zur
   Grundlinie — ohne Korrektur stünde der Balken unten 2px tiefer als der Text. */
:root[data-theme="8bit"] .phud{ --hud-fs:14px; --bar-lift:2px; font-size:var(--hud-fs); letter-spacing:0; }
:root[data-theme="8bit"] .p-right .pmeters{ flex-direction:row; } /* keine Spiegelung */
:root[data-theme="8bit"] .mlbl{ font-size:0; }                    /* Langtext aus … */
:root[data-theme="8bit"] .mlbl::after{ content:attr(data-abbr); font-size:var(--hud-fs); } /* … Kürzel stattdessen */
:root[data-theme="8bit"] .pcard .pc-name{ font-size:8px; letter-spacing:1px; }
:root[data-theme="8bit"] .pcard .pc-model{ font-size:8px; }
:root[data-theme="8bit"] .pcard .pc-mode{ font-size:7px; letter-spacing:0; padding:4px 6px; }
/* 8-Bit: Pfeile sind SVG-Pixeldreiecke (start-screen.js) → nur etwas mehr Abstand */
:root[data-theme="8bit"] .pc-arrow{ padding:0 6px; }
:root[data-theme="8bit"] .s-row,
:root[data-theme="8bit"] .s-options button,
:root[data-theme="8bit"] .s-row input[type=text]{ font-size:9px; }
:root[data-theme="8bit"] .s-actions button{ font-size:9px; letter-spacing:1px; }
:root[data-theme="8bit"] #settings-hint{ font-size:8px; }

/* ---------- Vector-Theme: modernes HD-Chrome ----------
   Zwei Unterschiede zu Phosphor/8-Bit:
   1. VOLLFLÄCHIGES SPIELFELD — die beiden HUD-Leisten stehen nicht mehr über/unter der Bühne,
      sondern liegen als absolut positionierte Overlays darüber; #stage füllt das ganze Fenster.
      (game.js hängt an onThemeChange ein resize(), damit das Canvas dem sofort folgt.)
   2. GLAS-OPTIK — abgerundete, weich hinterlegte Flächen mit Blur statt harter Phosphor-Kästen. */
:root[data-theme="vector"]{
  --glass: rgba(10,16,32,0.62);
  --glass-line: rgba(120,200,255,0.20);
  --scrim: rgba(4,7,18,0.72);
}
:root[data-theme="vector"] #wrap{ position:relative; padding:0; }
:root[data-theme="vector"] #stage{ position:absolute; inset:0; }
:root[data-theme="vector"] #topbar,
:root[data-theme="vector"] #bottombar{
  position:absolute; left:0; right:0; z-index:6;
  background:transparent; padding:0 clamp(18px, 3vw, 48px);
  pointer-events:none;
}
:root[data-theme="vector"] #topbar{ top:0; }
:root[data-theme="vector"] #bottombar{ bottom:0; }
/* Weicher Verlauf unter dem HUD, damit die Schrift auch über hellen Partikeln lesbar bleibt. */
:root[data-theme="vector"] #topbar::before,
:root[data-theme="vector"] #bottombar::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
}
:root[data-theme="vector"] #topbar::before{ background:linear-gradient(to bottom, var(--scrim), transparent); }
:root[data-theme="vector"] #bottombar::before{ background:linear-gradient(to top, var(--scrim), transparent); }

/* HUD als schwebende Glas-Pille (nur belegte Slots; leere bleiben schlichter Text). */
:root[data-theme="vector"] .phud{
  display:inline-flex; align-items:center; gap:14px;
  font-size:12px; letter-spacing:2px; text-shadow:0 0 14px currentColor;
}
:root[data-theme="vector"] .p-left{ justify-self:start; }
:root[data-theme="vector"] .p-right{ justify-self:end; }
/* Bewusst OHNE backdrop-filter: Das HUD liegt über einem Canvas, das jeden Frame neu gezeichnet
   wird, und seine Balken ändern jeden Frame ihre Breite — ein Blur-Hintergrund müsste dadurch pro
   Frame neu aus der Bühne gelesen werden (Compositor-Last, die in der Frame-Messung NICHT als
   update/render auftaucht, sich aber als ausgelassene Frames zeigt). Deckendes Glas tut es hier
   genauso: über dem dunklen Sternenfeld ist der Unterschied kaum zu sehen. */
:root[data-theme="vector"] .phud.active{
  padding:9px 18px; border-radius:999px;
  background:rgba(10,16,32,0.80);
  border:1px solid color-mix(in srgb, currentColor 34%, transparent);
  box-shadow:0 8px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
:root[data-theme="vector"] .bar{ border-radius:999px; width:78px; }
:root[data-theme="vector"] .bar-fill{ border-radius:999px; box-shadow:0 0 10px currentColor; }
:root[data-theme="vector"] #title{
  font-size:13px; letter-spacing:10px; font-weight:600;
  color:color-mix(in srgb, var(--phosphor) 70%, transparent); text-shadow:0 0 18px currentColor;
}
:root[data-theme="vector"] canvas{ box-shadow:inset 0 0 220px rgba(0,0,0,0.55); }
:root[data-theme="vector"] #overlay{ display:none; }  /* keine Scanlines im HD-Look */
:root[data-theme="vector"] #center-msg{
  font-size:26px; letter-spacing:6px; font-weight:800; text-shadow:0 0 24px currentColor;
}

/* Menüs: Glasflächen mit weichen Ecken statt Phosphor-Kästen. */
:root[data-theme="vector"] #settings-panel,
:root[data-theme="vector"] #start-content,
:root[data-theme="vector"] #confirm-panel{
  border-radius:20px; border:1px solid var(--glass-line);
  background:rgba(8,13,28,0.80);
  box-shadow:0 30px 80px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
:root[data-theme="vector"] #start-overlay{ background:rgba(7,11,24,0.45); }
:root[data-theme="vector"] #settings-overlay{ background:rgba(7,11,24,0.78); }
:root[data-theme="vector"] #confirm-overlay{ background:rgba(7,11,24,0.6); }
:root[data-theme="vector"] #start-title{ font-size:34px; letter-spacing:14px; font-weight:800; }
/* Fließtext in einer Lesetype — Orbitron ist eine Display-Schrift und liest sich als Absatz zäh. */
:root[data-theme="vector"] #story-text{
  font-family:'Segoe UI', system-ui, sans-serif; font-size:13.5px; line-height:1.8;
  color:color-mix(in srgb, var(--phosphor) 55%, #9FB3C8);
}
:root[data-theme="vector"] .pcard{ border-radius:16px; border-color:var(--glass-line); }
:root[data-theme="vector"] .pcard.focused{ box-shadow:0 0 0 1px var(--phosphor), 0 12px 34px rgba(0,0,0,0.5); }
:root[data-theme="vector"] .pcard .pc-mode{ border-radius:999px; padding:4px 10px; }
:root[data-theme="vector"] .s-options button{ border-radius:10px; letter-spacing:1px; }
:root[data-theme="vector"] .s-actions button{ border-radius:12px; font-weight:600; }
:root[data-theme="vector"] .s-row input[type=text]{ border-radius:8px; }
:root[data-theme="vector"] .switch .slider{ border-radius:999px; }
:root[data-theme="vector"] .switch .slider::before{ border-radius:50%; }
/* Orbitron läuft breiter als Courier — Größen/Laufweiten leicht zurücknehmen. */
:root[data-theme="vector"] .s-row,
:root[data-theme="vector"] .s-options button{ font-size:11px; }
:root[data-theme="vector"] .s-actions button{ font-size:10.5px; letter-spacing:2px; }
:root[data-theme="vector"] .pcard .pc-name{ font-size:10.5px; }
:root[data-theme="vector"] .pcard .pc-model{ font-size:11px; letter-spacing:1px; }
:root[data-theme="vector"] .pcard .pc-mode{ font-size:9px; }

/* ---------- Backstage: Gameplay-Editor (F9) ----------
   Seitliche Schublade über allem; das Spiel läuft dahinter weiter, damit Änderungen
   sofort im laufenden Betrieb (oder im Attract-Mode) beurteilt werden können. */
#backstage{
  position:fixed; top:0; right:0; bottom:0; z-index:60;
  width:min(420px, 96vw);
  display:none; flex-direction:column;
  background:rgba(3,8,5,0.94);
  border-left:1px solid var(--phosphor-dim);
  box-shadow:-12px 0 40px rgba(0,0,0,0.6);
  color:var(--phosphor); font-family:var(--font);
}
#backstage.open{ display:flex; }
#bs-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--phosphor-dim);
}
#bs-title{ font-size:13px; letter-spacing:5px; text-shadow:0 0 8px currentColor; }
#bs-filter{
  flex:1; min-width:0;
  background:#000; border:1px solid var(--phosphor-dim); color:var(--phosphor);
  font-family:inherit; font-size:10px; letter-spacing:1px; padding:5px 7px;
}
#bs-filter:focus{ outline:none; border-color:var(--phosphor); }
#bs-close{
  background:transparent; border:1px solid var(--phosphor-dim); color:var(--phosphor);
  font-family:inherit; font-size:13px; line-height:1; padding:3px 8px; cursor:pointer;
}
#bs-body{ flex:1 1 auto; overflow:auto; padding:6px 14px 14px; }

.bs-group{ margin:12px 0 0; }
.bs-group > summary{
  cursor:pointer; list-style:none;
  font-size:10px; letter-spacing:3px; color:var(--phosphor);
  padding:6px 0 6px 2px; border-bottom:1px solid var(--phosphor-dim);
}
.bs-group > summary::-webkit-details-marker{ display:none; }
.bs-group > summary::before{ content:'▸ '; opacity:0.7; }
.bs-group[open] > summary::before{ content:'▾ '; }

/* Eine Parameterzeile: Beschriftung + aktueller Wert, darunter Schieber, Zahlenfeld und Reset.
   Versteckt wird sie aus zwei Gründen: Filtertext (.hidden) oder fehlendes Theme-Merkmal
   (.off-theme — z.B. Blockgrößen bei einem Vektor-Theme). */
.bs-row{ padding:7px 0 8px; border-bottom:1px solid rgba(124,255,158,0.08); }
.bs-row.hidden,
.bs-row.off-theme{ display:none; }
.bs-group.off-theme,
.bs-group.empty{ display:none; }
.bs-row.changed .bs-label{ color:var(--amber); }
.bs-labelrow{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:5px; }
.bs-label{ font-size:10px; letter-spacing:1px; color:var(--phosphor); }
.bs-key{ font-size:9px; letter-spacing:0; color:var(--phosphor-dim); }
.bs-inputs{ display:flex; align-items:center; gap:7px; }
.bs-inputs input[type=range]{ flex:1; min-width:0; accent-color:var(--phosphor); height:16px; }
.bs-inputs input[type=number]{
  width:74px; flex:0 0 auto;
  background:#000; border:1px solid var(--phosphor-dim); color:var(--phosphor);
  font-family:inherit; font-size:10px; padding:4px 5px;
}
.bs-inputs input[type=number]:focus{ outline:none; border-color:var(--phosphor); }
.bs-inputs input[type=checkbox]{ accent-color:var(--phosphor); width:16px; height:16px; }
.bs-undo{
  flex:0 0 auto; background:transparent; border:1px solid transparent;
  color:var(--phosphor-dim); font-family:inherit; font-size:11px; cursor:pointer; padding:2px 5px;
}
.bs-undo:hover{ color:var(--phosphor); border-color:var(--phosphor-dim); }

/* Stufen-Umschalter der Bot-Profile und Theme-Umschalter der Optik */
#bs-levels, #bs-themes{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
#bs-themes{ margin-bottom:10px; }
#bs-levels button, #bs-themes button{
  flex:1; background:#000; border:1px solid var(--phosphor-dim); color:var(--phosphor-dim);
  font-family:inherit; font-size:9px; letter-spacing:1px; padding:5px 4px; cursor:pointer;
}
#bs-levels button.active, #bs-themes button.active{ border-color:var(--phosphor); color:var(--phosphor); }

/* Kopfzeile des Optik-Abschnitts: nennt die Merkmale, aus denen sich die Regler-Auswahl ergibt. */
#bs-fxhead{
  margin:20px 0 2px; padding:6px 0 4px 2px;
  font-size:9px; letter-spacing:2px; color:var(--amber);
  border-top:1px solid var(--phosphor-dim);
}

#bs-foot{ border-top:1px solid var(--phosphor-dim); padding:10px 14px 12px; }
#bs-status{ font-size:9px; letter-spacing:1px; color:var(--phosphor-dim); margin-bottom:8px; min-height:12px; }
.bs-actions{ display:flex; gap:6px; align-items:center; margin-top:6px; }
.bs-exlabel{
  flex:0 0 66px; font-size:8px; letter-spacing:1px; color:var(--phosphor-dim);
}
.bs-actions button{
  flex:1; background:color-mix(in srgb, var(--phosphor) 6%, var(--bg));
  border:1px solid var(--phosphor-dim); color:var(--phosphor);
  font-family:inherit; font-size:9px; letter-spacing:1px; padding:8px 4px; cursor:pointer;
}
.bs-actions button:hover{ background:color-mix(in srgb, var(--phosphor) 14%, var(--bg)); }

:root[data-theme="8bit"] #backstage{ box-shadow:none; }
:root[data-theme="8bit"] #bs-title{ text-shadow:none; font-size:9px; letter-spacing:2px; }
:root[data-theme="8bit"] .bs-label,
:root[data-theme="8bit"] .bs-group > summary{ font-size:8px; letter-spacing:1px; }
:root[data-theme="8bit"] .bs-key,
:root[data-theme="8bit"] .bs-inputs input[type=number],
:root[data-theme="8bit"] .bs-actions button,
:root[data-theme="8bit"] #bs-levels button,
:root[data-theme="8bit"] #bs-status,
:root[data-theme="8bit"] .bs-exlabel,
:root[data-theme="8bit"] #bs-fxhead,
:root[data-theme="8bit"] #bs-filter{ font-size:7px; letter-spacing:0; }

:root[data-theme="vector"] #backstage{
  background:rgba(6,10,22,0.90); border-left:1px solid var(--glass-line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
:root[data-theme="vector"] .bs-actions button,
:root[data-theme="vector"] #bs-levels button,
:root[data-theme="vector"] #bs-themes button,
:root[data-theme="vector"] #bs-filter,
:root[data-theme="vector"] .bs-inputs input[type=number]{ border-radius:8px; }

/* Schwarzblende beim Themewechsel */
#theme-fade{
  position:fixed; inset:0; z-index:100;
  background:#000; opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
#theme-fade.on{ opacity:1; }