:root{
  --accent:#ffb84d;
  --panel:rgba(0,0,0,.55);
  --panel2:rgba(0,0,0,.35);
  --fg:#cfe3ff;
  --bd:rgba(150,200,255,.25);
}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:#fff;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#hudTop{
  position:fixed;left:10px;top:10px;z-index:5;
  padding:8px 10px;border-radius:10px;background:var(--panel2);backdrop-filter:blur(6px);
  border:1px solid var(--bd); font-size:12px; user-select:none; pointer-events:none;
  max-width:min(520px, calc(100vw - 20px));
  line-height:1.25;
}
#hudTop .mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
#statOut{white-space:pre-line}
#hudBottom{
  position:fixed;left:10px;right:10px;bottom:10px;z-index:6;
  display:grid;gap:10px 14px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  align-items:center;padding:10px 12px;border-radius:14px;
  background:var(--panel);backdrop-filter:blur(8px);
  border:1px solid var(--bd); font-size:12px; user-select:none;
}
#hudBottom h4{grid-column:1/-1;margin:2px 0 4px;color:#ffd17a;font-weight:650;letter-spacing:.03em}
.sl{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chk{display:inline-flex;align-items:center;gap:.45rem}
input[type=range]{width:100%}
select,button{
  all:unset;background:rgba(14,22,36,.6);
  padding:6px 8px;border-radius:10px;border:1px solid var(--bd);cursor:pointer;
}
button.primary{background:var(--accent);color:#111;font-weight:700;border:0}
#hint{grid-column:1/-1;opacity:.85}
#hint kbd{font:12px ui-monospace,monospace;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:.1em .35em;border-radius:.4em}
/* touch pads & buttons (mobile) */
.pad{position:fixed;width:36vmin;height:36vmin;border-radius:50%;
     border:1px solid var(--bd); background:rgba(12,18,28,.35);
     left:3vmin;bottom:3vmin;z-index:7;touch-action:none}
.pad.r{left:auto;right:3vmin}
.thumb{position:absolute;width:28%;height:28%;border-radius:50%;left:36%;top:36%;
       background:rgba(120,180,255,.35);border:1px solid rgba(150,200,255,.35)}
.btnset{position:fixed;right:3vmin;bottom:42vmin;display:grid;gap:.6vmin;z-index:7}
.btn{all:unset;padding:.7em 1em;border-radius:.9em;border:1px solid var(--bd);
     background:rgba(12,18,28,.45);color:var(--fg);font-size:12px;min-width:4.5em;text-align:center}
@media (pointer:fine){ .pad,.btnset{display:none} }