.bh-mobile-wrap { position:relative; }
#view-projects { background:transparent; overflow:hidden; }
.dark #view-projects { background:transparent; }
#bh-sim { position:relative; background:#000000; overflow:hidden; }
.dark #bh-sim { background:#000000; }
#bh-sim canvas { display:block; width:100%; height:100%; }
/* The whole simulation is a solid-black block in every theme: a black background sits
   behind the canvas so the section reads pure black. The page meets it with a HARD
   edge (no gradient) — white page -> black sim -> white footer in light mode. */
.bh-mobile-wrap { background:#000000; }
/* Light mode only: drop the always-black block clear of the project text so its hard
   top edge lands cleanly below the list (in dark mode that overlap is black-on-black). */
html:not(.dark) .bh-mobile-wrap { margin-top:0 !important; }
.bh-mobile-wrap { display:flex; flex-direction:column; }
.bh-controls {
  position:absolute; top:220px; left:50%; transform:translateX(-50%);
  max-width:640px; width:calc(100% - 40px); box-sizing:border-box;
  background:rgba(0,0,0,0.85);
  padding:12px 14px; border-radius:12px;
  z-index:100; color:#ffffff; font-family:monospace;
}
.bh-controls label { display:block; margin:10px 0 4px; font-size:14px; transition:opacity 0.3s; }
.bh-controls input[type=range] {
  -webkit-appearance:none; appearance:none;
  width:100%; height:18px; margin:0; cursor:pointer;
  background:transparent; outline:none; transition:opacity 0.3s;
  --bh-fill:0%;
}
/* Filled region runs from the knob leftward, full colour at the knob and
   fading out toward the left; the rest of the track keeps its plain colour. */
.bh-controls input[type=range]::-webkit-slider-runnable-track {
  height:6px; border-radius:999px;
  background:linear-gradient(90deg, rgba(13,48,44,0.95), rgba(35,129,118,0.95)) left/var(--bh-fill) 100% no-repeat, rgba(255,255,255,0.18);
}
.bh-controls input[type=range]::-moz-range-track {
  height:6px; border-radius:999px;
  background:linear-gradient(90deg, rgba(13,48,44,0.95), rgba(35,129,118,0.95)) left/var(--bh-fill) 100% no-repeat, rgba(255,255,255,0.18);
}
.bh-controls input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; margin-top:-4px; border-radius:50%;
  background:#fff; border:2px solid #1b645b; box-shadow:0 1px 3px rgba(0,0,0,0.5);
  transition:transform 0.12s;
}
.bh-controls input[type=range]::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px solid #1b645b; box-shadow:0 1px 3px rgba(0,0,0,0.5);
  transition:transform 0.12s;
}
.bh-controls input[type=range]:hover::-webkit-slider-thumb { transform:scale(1.15); }
.bh-controls input[type=range]:hover::-moz-range-thumb { transform:scale(1.15); }
.bh-controls .value { float:right; font-weight:bold; color:#ffffff; }
.bh-controls .disabled-slider label,
.bh-controls .disabled-slider input[type=range] { opacity:0.35; pointer-events:none; }
.bh-controls .bh-btn-row { display:flex; gap:8px; margin-bottom:10px; align-items:center; }
.bh-controls .bh-icon-btn {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:8px; cursor:pointer;
  transition:background 0.15s, border-color 0.15s, transform 0.1s;
  flex-shrink:0;
}
.bh-controls .bh-icon-btn:hover { background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.38); }
.bh-controls .bh-icon-btn:active { transform:scale(0.91); }
.bh-controls .bh-icon-btn svg { width:17px; height:17px; display:block; }
.bh-controls .bh-trail-btn {
  display:flex; align-items:center; gap:6px;
  height:40px; padding:0 13px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:8px; cursor:pointer;
  color:#fff; font-size:13px; font-family:monospace;
  transition:background 0.15s, border-color 0.15s, transform 0.1s;
}
.bh-controls .bh-trail-btn:hover { background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.38); }
.bh-controls .bh-trail-btn:active { transform:scale(0.95); }
.bh-controls .bh-trail-btn svg { width:14px; height:14px; flex-shrink:0; }
.bh-controls h2 { font-size:15px; margin-bottom:8px; }
.bh-controls .bh-btn-row { margin-bottom:8px; }
.bh-controls .bh-icon-btn { width:34px; height:34px; }
.bh-controls .bh-trail-btn { height:34px; padding:0 10px; font-size:12px; }
.bh-controls .bh-sliders {
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(4, auto); grid-auto-flow:column; gap:0 14px;
}
.bh-controls .bh-sliders label { margin:4px 0 2px; font-size:12px; }
.bh-controls .bh-sliders input[type=range] { height:18px; }

body:has(#view-projects.active) footer {
  position: relative;
  z-index: 10;
}
/* Projects view in light mode: footer matches the always-black simulation above it. */
html:not(.dark) body:has(#view-projects.active) footer {
  background: #000000;
}
html:not(.dark) body:has(#view-projects.active) footer .text-black\/45 {
  color: rgba(255,255,255,0.45);
}
html:not(.dark) body:has(#view-projects.active) footer a:hover {
  color: #ffffff;
}

html[lang="en"] .lang-de,
html[lang="de"] .lang-en {
  display: none !important;
}