:root{
  --bg:#0b0e13;
  --panel:rgba(17,21,28,.72);
  --line:rgba(255,255,255,.10);
  --fg:#e8edf5;
  --dim:#93a0b3;
  --accent:#59e0ff;
  --accent-2:#ff5d8f;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);
  font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;user-select:none}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;color:var(--fg)}
#hud > *{pointer-events:auto}
#brand{position:absolute;top:14px;left:16px;pointer-events:none}
.brand-title{font-weight:800;letter-spacing:.18em;font-size:18px}
.brand-title .dot{color:var(--accent)}
.brand-sub{color:var(--dim);font-size:11px;letter-spacing:.08em;margin-top:2px}

/* barra modi */
#modes{position:absolute;top:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);
  padding:6px;border-radius:12px;backdrop-filter:blur(8px)}
.mode{appearance:none;border:0;background:transparent;color:var(--dim);
  font:inherit;font-size:12px;letter-spacing:.06em;padding:7px 12px;border-radius:9px;
  cursor:pointer;transition:.15s}
.mode:hover{color:var(--fg)}
.mode.is-active{background:linear-gradient(180deg,rgba(89,224,255,.18),rgba(89,224,255,.05));
  color:var(--fg);box-shadow:inset 0 0 0 1px rgba(89,224,255,.35)}

/* preset */
#presets{position:absolute;right:14px;top:70px;display:flex;flex-direction:column;gap:6px}
.preset{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--dim);
  font:inherit;font-size:11px;letter-spacing:.05em;padding:7px 10px;border-radius:9px;
  cursor:pointer;backdrop-filter:blur(8px);text-align:left;min-width:78px;transition:.15s}
.preset:hover{color:var(--fg);border-color:rgba(89,224,255,.4)}
.preset.is-on{color:var(--fg);border-color:rgba(89,224,255,.6);
  background:linear-gradient(180deg,rgba(89,224,255,.16),rgba(89,224,255,.04))}

/* pannello controlli */
#panel{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:10px;backdrop-filter:blur(8px);width:172px}
.panel-group{display:flex;align-items:center;gap:8px;min-height:30px}
.tgl,.ghost{appearance:none;border:1px solid var(--line);background:transparent;color:var(--dim);
  font:inherit;font-size:12px;padding:7px 10px;border-radius:9px;cursor:pointer;flex:1;
  letter-spacing:.04em;transition:.15s}
.tgl.is-on{color:var(--fg);border-color:rgba(89,224,255,.5);
  background:linear-gradient(180deg,rgba(89,224,255,.14),rgba(89,224,255,.04))}
.tgl:not(.is-on){opacity:.85}
.ghost:hover,.tgl:hover{color:var(--fg)}
.slider label{color:var(--dim);font-size:11px;letter-spacing:.06em;width:38px}
input[type=range]{flex:1;accent-color:var(--accent);height:20px;cursor:pointer}
#fov-val{color:var(--dim);font-size:11px;width:34px;text-align:right;font-variant-numeric:tabular-nums}
.hint{color:var(--dim);font-size:11px;line-height:1.35;letter-spacing:.02em;min-height:14px}

/* joystick */
#joystick{position:fixed;left:18px;bottom:190px;width:118px;height:118px;pointer-events:auto}
#joy-base{position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--line);background:var(--panel)}
#joy-knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:rgba(89,224,255,.28);border:1px solid rgba(89,224,255,.6)}

/* loader */
#loader{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;z-index:9;transition:opacity .5s}
#loader.done{opacity:0;pointer-events:none}
.loader-ring{width:46px;height:46px;border-radius:50%;
  border:2px solid transparent;border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{color:var(--dim);font-size:12px;letter-spacing:.28em}

/* toast */
#toast{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--line);color:var(--fg);
  padding:9px 14px;border-radius:10px;font-size:12px;letter-spacing:.04em;
  backdrop-filter:blur(8px)}

/* mobile: preset sotto i modi, pannello compatto */
@media (max-width:640px){
  #modes{top:auto;bottom:14px;left:50%;transform:translateX(-50%)}
  #panel{left:auto;right:10px;top:64px;bottom:auto;width:auto;flex-direction:row;
    flex-wrap:wrap;max-width:calc(100vw - 20px)}
  .panel-group{min-height:auto}
  .slider{display:none}
  #presets{right:10px;top:110px;flex-direction:row;flex-wrap:wrap;max-width:calc(100vw - 20px)}
  .preset{min-width:64px}
  #joystick{bottom:170px}
}