html,body{
  margin:0;
  height:100%;
  background:#04030a;
  overflow:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.hud{
  position:fixed;
  left:12px;
  right:12px;
  top:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  pointer-events:none;
  user-select:none;
}

.hudLeft{ pointer-events:none; }
.badge{
  display:inline-block;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.9);
  letter-spacing:.18em;
  font-size:12px;
  text-transform:uppercase;
}
.sub{
  margin-top:8px;
  color:rgba(255,255,255,.62);
  font-size:12px;
  letter-spacing:.04em;
}

.hudRight{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  pointer-events:auto;
}

.btn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.26);
  color:rgba(255,255,255,.86);
  border-radius:999px;
  padding:10px 12px;
  font-size:12px;
  letter-spacing:.08em;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.22);
}
.btn.toggle{
  display:flex;
  gap:10px;
  align-items:center;
}
.btn.toggle input{
  accent-color:#67d4ff;
}

.slider{
  width:160px;
  accent-color:#67d4ff;
  cursor:pointer;
}

@media (max-width: 720px){
  .sub{ display:none; }
  .slider{ width:120px; }
}