:root {
  --bg: #0c0e11;
  --card: #141820;
  --text: #e8eef7;
  --muted: #9fb0c0;
  --accent: #6aa9ff;
  --border: #263043;

  /* Sidebar-Größen */
  --hud-width: 300px; /* schlankes Panel */
  --hud-peek: 16px;   /* sichtbarer Griff bei eingeklappter Sidebar */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.page { max-width: 980px; margin: 24px auto; padding: 0 16px 48px; }
h1, h2, h3 { margin: 8px 0 12px; }
p, small, label { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 16px 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0; }
.inline { display: inline-flex; gap: 8px; align-items: center; }
.group { padding: 8px 12px; background: #0f131b; border-radius: 8px; border: 1px solid var(--border); }
.hidden { display: none; }
.checkbox { display: inline-flex; align-items: center; gap: 6px; }

.balls { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ball { background: #0f131b; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.ball h3 { margin: 0 0 8px; color: var(--text); }
.alpha { margin-left: 8px; }

button { background: var(--accent); color: #06101e; border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer; font-weight: 600; }
button:hover { filter: brightness(1.05); }
input, select { background: #0d1117; color: var(--text); border: 1px solid var(--border); padding: 6px 8px; border-radius: 6px; }
input[type="color"] { padding: 0; height: 30px; width: 46px; border: none; background: transparent; }

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 10; }
.overlay-content { width: min(520px, 92vw); background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.overlay.hidden { display: none; }

#c { position: fixed; inset: 0; display: block; width: 100vw; height: 100vh; }

/* Schlanke, vertikale Sidebar links */
.hud {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
  color: var(--text);
  /* Kein zusätzlicher Innenabstand hier, alles in .panel */
}

.panel {
  position: relative;
  height: 100vh;
  width: min(var(--hud-width), 92vw);
  background: rgba(20, 24, 32, 0.8);
  backdrop-filter: blur(6px);
  border-right: 1px solid var(--border);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 10px 12px;
  padding-right: calc(12px + var(--hud-peek)); /* Platz für den Griff */
  box-shadow: 6px 0 18px rgba(0,0,0,0.25);
  transform: translateX(0);
  transition: transform 220ms ease;
  overflow-y: auto;
}

/* Eingeklappt: Panel fast ganz außerhalb, Griff bleibt sichtbar */
.hud.collapsed .panel {
  transform: translateX(calc(-100% + var(--hud-peek)));
}

/* Griff/Toggle: bleibt immer sichtbar (nimmt den rechten Rand der Sidebar ein) */
.hud-collapse {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--hud-peek);
  min-width: var(--hud-peek);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: none;
  border-left: 1px solid var(--border);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-collapse:hover { background: rgba(255,255,255,0.08); }

/* Chevron als Indikator */
.hud-collapse .chevron {
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(135deg); /* zeigt nach links (eingeklappt = expandierbar) */
  transition: transform 220ms ease;
}

/* Wenn ausgeklappt, Chevron nach rechts drehen (zum Einklappen) */
.hud:not(.collapsed) .hud-collapse .chevron {
  transform: rotate(-45deg); /* zeigt nach rechts */
}

/* Feintuning innerhalb des Panels */
.hud .row { margin: 6px 0; }
details summary { cursor: pointer; margin-top: 6px; }

/* Bestehende Karten etc. bleiben unverändert */