:root {
  /* Auf der Quest ist die CSS-Pixel-Dichte hoch → größere Basiswerte */
  --fs: clamp(16px, 2.2vh, 20px);
  --fs-sm: clamp(14px, 1.9vh, 18px);
  --btn-h: 44px;          /* fingerfreundlich */
  --gap: .55rem;

  --bg: rgba(0,0,0,.65);
  --fg: #fff;
  --muted: #cbd5e1;
  --accent: #22ff88;
  --btn: #111827;
  --btnb: #374151;
}

html,body{
  margin:0; padding:0; overflow:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--fs); line-height:1.25;
  -webkit-user-select: none; user-select: none;  /* verhindert Textselect in XR */
}

#hud.panel{
  position:fixed; left:12px; top:12px; z-index: 9999;
  color:var(--fg); background:var(--bg); backdrop-filter: blur(6px);
  border:1px solid #334155; border-radius:12px;
  padding:12px 14px; max-width:min(94vw, 980px);
  pointer-events:auto;  /* wichtig für DOM Overlay */
}

.title{font-size:1.05em; margin:0 .5rem 0 0}
.build{opacity:.75; font-size: .85em}
#hint{margin:.35rem 0 .6rem 0; color:#e5e7eb; font-size:1em}

.controls{display:flex; flex-direction:column; gap: var(--gap)}
.row{display:flex; align-items:center; gap:.6rem}
.wrap{flex-wrap:wrap}
.row.between{justify-content:space-between}

.lb{font-size:1em; opacity:.95; display:flex; align-items:center; gap:.4rem}
.chk{font-size:1em; opacity:.95; display:flex; align-items:center; gap:.35rem}

.site-header{display:flex; flex-direction:column; gap:.35rem;}
.tagline{margin:0; font-size:.9em; color:var(--muted);}

.controls section{border-top:1px solid #334155; padding-top:.6rem; display:flex; flex-direction:column; gap:.5rem}
.controls section:first-of-type{border-top:none; padding-top:0}
.controls h2{margin:0; font-size:1em; color:var(--accent)}

.btn{
  background:var(--btn); color:#e5e7eb; border:1px solid var(--btnb);
  padding:0 .8rem; border-radius:12px; cursor:pointer;
  height: var(--btn-h); min-width: 88px; font-size:1em;
}
.btn:hover{border-color:#6b7280}

select{
  background:#0b1020; color:#e5e7eb; border:1px solid #334155;
  border-radius:10px; padding:0 .6rem; height: var(--btn-h);
  font-size:1em; min-width: 120px;
}
input[type="checkbox"]{ width:22px; height:22px }

canvas{ touch-action: none; } /* verhindert ungewolltes Scrollen/Zoom */

/* Fallback-Dropdowns */
.dd{position:relative;}
.dd-list{
  display:none; position:absolute; left:0; top:calc(100% + 2px);
  background:var(--btn); border:1px solid var(--btnb);
  border-radius:10px; list-style:none; padding:0; margin:0;
  z-index:1000;
}
.dd.open .dd-list{display:block;}
.dd-list li{padding:.25rem .6rem; cursor:pointer;}
.dd-list li:hover{background:#1f2937;}

select {
  -webkit-user-select: auto;
  user-select: auto;
}

.four-hint {
  position:absolute;
  top:0;
  right:0;
  width:50%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.four-hint img {
  max-width:100%;
  height:auto;
}

@media (max-width: 600px) {
  .four-hint {
    position:static;
    width:100%;
    margin-top:1rem;
  }
}