*{
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  box-sizing:border-box;margin:0;padding:0;
}
html,body{
  width:100%;height:100%;touch-action:none;overscroll-behavior:none;overflow:hidden;
  background:#000;font-family:'Segoe UI',Arial,sans-serif;color:#fff;
}
.bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.bg-fallback{
  position:fixed;inset:0;z-index:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  color:#5f6672;font-size:15px;letter-spacing:1px;line-height:1.6;
  background:radial-gradient(circle at 50% 40%,#15181f,#000);
}
.bg-fallback small{color:#3a3f49;font-size:12px;}

.hud{
  position:fixed;top:0;left:0;right:0;height:34px;display:flex;align-items:center;
  justify-content:space-between;padding:0 14px;z-index:3;
  background:linear-gradient(#000a,#0000);font-size:13px;
}
.grp{display:flex;align-items:center;gap:8px;text-shadow:0 1px 3px #000;}
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px;}
.bars i{width:3px;background:#5f6672;border-radius:1px;}
.bars i:nth-child(1){height:4px;}.bars i:nth-child(2){height:7px;}
.bars i:nth-child(3){height:10px;}.bars i:nth-child(4){height:14px;}
.bars.l1 i:nth-child(-n+1),.bars.l2 i:nth-child(-n+2),
.bars.l3 i:nth-child(-n+3),.bars.l4 i:nth-child(-n+4){background:#37e07a;}
.conn.bad{color:#ff6b6b;}
.car{font-size:12px;color:#9aa0ad;}
.car.on{color:#37e07a;}
.car.off{color:#ff6b6b;}

.panel{
  position:fixed;bottom:14px;z-index:2;background:rgba(18,20,28,.34);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:12px 16px;
  text-align:center;box-shadow:0 8px 22px rgba(0,0,0,.4);
}
.right{right:16px;}
.pad{display:grid;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,50px);gap:6px;}
.pb{
  border-radius:12px;font-size:18px;color:#eef;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);cursor:pointer;touch-action:none;
}
.pb:active{background:rgba(55,224,122,.5);}
.pb.c{border-radius:50%;font-size:9px;font-weight:bold;letter-spacing:.5px;background:rgba(255,80,80,.35);}
.pb.c:active{background:rgba(255,80,80,.7);}

.leds{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:10px;}
.led{
  border:none;border-radius:16px;padding:7px 14px;font-size:11px;font-weight:bold;
  letter-spacing:.5px;color:#3a2f00;background:rgba(255,210,60,.85);cursor:pointer;touch-action:none;
}
.led.off{background:rgba(120,126,140,.7);color:#eef;}