:root{
  --bg:#0a0c0b;
  --fg:#e8eae6;
  --dim:#9aa39b;
  --accent:#8fd14f;
  --accent2:#3f7d20;
  --warn:#e0a63a;
  --panel:rgba(12,15,13,.86);
  --line:rgba(143,209,79,.22);
  --font: ui-sans-serif, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--font)}
canvas#view{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none !important}

/* ---------------- Boot ---------------- */
#boot{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 40%, #16201a 0%, #070908 70%);}
.boot-inner{text-align:center;max-width:min(560px,86vw)}
.boot-logo{font-size:clamp(34px,7vw,64px);font-weight:800;letter-spacing:.14em;line-height:1}
.boot-logo span{color:var(--accent)}
.boot-sub{margin-top:10px;color:var(--dim);font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.boot-barwrap{margin:28px auto 12px;width:100%;height:3px;background:rgba(255,255,255,.09);border-radius:2px;overflow:hidden}
#boot-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width .25s ease}
#boot-status{color:var(--dim);font-size:12px;font-family:var(--mono);min-height:1.4em}
#boot-err{display:none;margin-top:16px;padding:10px 14px;border:1px solid #a33;border-radius:6px;
  background:rgba(160,40,40,.14);color:#ffb4b4;font-family:var(--mono);font-size:12px;text-align:left;white-space:pre-wrap}

/* ---------------- Overlays ---------------- */
.overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:rgba(4,6,5,.78);backdrop-filter:blur(14px) saturate(.8)}
.menu-panel{width:min(420px,90vw);padding:30px 28px;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.menu-panel.wide{width:min(900px,94vw);max-height:88vh;overflow:auto}
.menu-title{font-size:30px;font-weight:800;letter-spacing:.12em}
.menu-title.small{font-size:19px;letter-spacing:.08em;margin-bottom:16px}
.menu-title span{color:var(--accent)}
.menu-sub{color:var(--dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:6px 0 22px}
.btn{display:block;width:100%;margin:8px 0;padding:12px 16px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--fg);
  font:inherit;font-size:14px;text-align:left;text-decoration:none;transition:.14s}
.btn:hover{background:rgba(143,209,79,.14);border-color:var(--line);transform:translateX(2px)}
.btn.primary{background:linear-gradient(90deg,var(--accent2),#6aa832);border-color:transparent;font-weight:700;color:#0a0f06}
.btn.primary:hover{filter:brightness(1.12)}
.btn.ghost{background:transparent;color:var(--dim)}
.menu-hint{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
  color:var(--dim);font-size:11.5px;line-height:1.9}
.menu-hint b{color:var(--fg);background:rgba(255,255,255,.08);padding:1px 6px;border-radius:4px;font-family:var(--mono);font-size:11px}
.auth-slot{margin-bottom:18px;min-height:44px}

/* ---------------- Settings ---------------- */
.set-row{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.set-row label{flex:0 0 210px;font-size:13px;color:var(--dim)}
.set-row .ctl{flex:1;display:flex;align-items:center;gap:10px}
.set-row input[type=range]{flex:1;accent-color:var(--accent)}
.set-row select{background:#141915;color:var(--fg);border:1px solid rgba(255,255,255,.14);
  border-radius:6px;padding:6px 10px;font:inherit;font-size:13px}
.set-row .val{width:64px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--accent)}
.set-group{margin:18px 0 6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* ---------------- Referenzen ---------------- */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:16px}
.ref-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;cursor:zoom-in;
  border:1px solid rgba(255,255,255,.1)}

/* ---------------- HUD ---------------- */
#hud{position:fixed;inset:0;z-index:50;pointer-events:none;user-select:none}
#crosshair{position:absolute;left:50%;top:50%;translate:-50% -50%;width:22px;height:22px}
#crosshair span{position:absolute;left:50%;top:50%;translate:-50% -50%;width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.82);box-shadow:0 0 0 1.5px rgba(0,0,0,.55);transition:.12s}
#crosshair.active span{width:11px;height:11px;background:var(--accent)}

#prompt{position:absolute;left:50%;top:calc(50% + 46px);translate:-50% 0;
  padding:7px 14px;border-radius:8px;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);font-size:13.5px;white-space:nowrap}
#prompt b{display:inline-block;min-width:19px;text-align:center;margin-right:7px;
  background:var(--accent);color:#0a0f06;border-radius:4px;padding:1px 6px;font-family:var(--mono);font-size:12px}

#toolbelt{position:absolute;left:50%;bottom:26px;translate:-50% 0;display:flex;gap:9px}
.tool-slot{width:60px;height:60px;border-radius:10px;background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.13);display:grid;place-items:center;position:relative;
  backdrop-filter:blur(5px);transition:.15s}
.tool-slot .ico{font-size:25px;filter:grayscale(.5) brightness(.85)}
.tool-slot .key{position:absolute;top:3px;left:5px;font-size:9.5px;color:var(--dim);font-family:var(--mono)}
.tool-slot .nm{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:8.5px;color:var(--dim);
  letter-spacing:.04em;text-transform:uppercase}
.tool-slot.sel{border-color:var(--accent);background:rgba(143,209,79,.15);transform:translateY(-5px)}
.tool-slot.sel .ico{filter:none}
.tool-slot .fuel{position:absolute;left:6px;right:6px;bottom:14px;height:2px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden}
.tool-slot .fuel i{display:block;height:100%;background:var(--accent);width:100%}

#toast-stack{position:absolute;right:22px;top:22px;display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.toast{padding:8px 14px;border-radius:8px;background:rgba(0,0,0,.66);backdrop-filter:blur(8px);
  border-left:2px solid var(--accent);font-size:13px;animation:tin .3s ease;max-width:330px}
.toast.warn{border-left-color:var(--warn)}
@keyframes tin{from{opacity:0;transform:translateX(22px)}}

#perf{position:absolute;left:12px;top:10px;font-family:var(--mono);font-size:10.5px;
  color:rgba(255,255,255,.42);line-height:1.55;white-space:pre;text-shadow:0 1px 2px #000}

/* ---------------- Touch-Bedienung ---------------- */
/* Sichtbar allein ueber body.touch. Die Klasse setzt HUD.js aus
   input.touchGeraet — Input.js entscheidet, ob ein Touchgeraet vorliegt.
   Eine zusaetzliche Media Query waere eine zweite Wahrheit, die von der
   ersten abweichen kann (Notebook mit Touchscreen, Emulation im Testlauf). */
#touch-hilfe, #touch-aktion, .touch-nur { display: none }
/* Der Tastaturhinweis im Menue nuetzt am Telefon nichts und wird ersetzt. */
body.touch .touch-nur { display: block }
body.touch .menu-hint:not(.touch-nur) { display: none }

body.touch #touch-hilfe{position:absolute;left:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:3px;pointer-events:none;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.30)}

body.touch #touch-aktion{position:absolute;display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  right:calc(14px + env(safe-area-inset-right,0px));
  bottom:calc(18px + env(safe-area-inset-bottom,0px))}
#touch-aktion .t-reihe{display:flex;align-items:flex-end;gap:10px}
#touch-aktion .t-reihe:empty{display:none}
/* Die zweite Taste blendet HUD.js aus, wenn das gefuehrte Werkzeug keine
   Zweitfunktion hat. Ausdruecklich hier, damit die Regel oben (die eine
   Groesse setzt) nicht mit dem hidden-Attribut in Streit geraet. */
#touch-aktion button[hidden]{display:none}
/* 54 px liegen ueber den 44 px, die als kleinste sicher treffbare Flaeche gelten. */
#touch-aktion button{width:54px;height:54px;min-width:54px;min-height:54px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.42);
  color:var(--fg);font:inherit;font-size:12.5px;pointer-events:auto;touch-action:none;
  backdrop-filter:blur(6px);-webkit-tap-highlight-color:transparent}
#touch-aktion button:active{background:rgba(143,209,79,.30);border-color:var(--accent)}
/* Umschalttasten (Ducken, Lauf) rasten ein — halten und gleichzeitig laufen
   ist mit zwei Daumen nicht moeglich. */
#touch-aktion button.an{background:rgba(143,209,79,.26);border-color:var(--accent);color:var(--accent)}
#touch-aktion button.gross{width:82px;height:82px;min-width:82px;min-height:82px;font-size:13px;
  border-color:rgba(143,209,79,.55);background:rgba(143,209,79,.16)}
#touch-aktion button.kontext{width:auto;height:54px;padding:0 20px;border-radius:27px;
  max-width:56vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;
  border-color:var(--accent);background:rgba(143,209,79,.20)}

/* Die Werkzeugleiste wandert nach oben: unten liegen die beiden Daumenzonen
   fuer Laufen und Umsehen, dort wuerde jeder Griff versehentlich umschalten. */
body.touch #toolbelt{top:calc(8px + env(safe-area-inset-top,0px));bottom:auto;gap:10px}
body.touch .tool-slot{width:58px;height:58px;pointer-events:auto;touch-action:none;
  -webkit-tap-highlight-color:transparent}
body.touch .tool-slot.sel{transform:translateY(4px)}
body.touch .tool-slot .key{display:none}
body.touch #prompt{top:calc(50% + 54px)}
body.touch #perf{font-size:9.5px}
#hud::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.34) 100%)}