* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}
body { 
  background: #000; 
  overflow: hidden; 
  font-family: 'Segoe UI', sans-serif; }

#canvas3d { 
  position: fixed; 
  inset: 0; 
  z-index: 0; }

#cam-wrap {
  position: fixed; 
  bottom: 20px; 
  right: 20px; 
  z-index: 10;
  border: 2px solid rgba(255,255,255,.25); 
  border-radius: 12px; 
  overflow: hidden;
  width: 220px; 
  height: 165px; 
  background: #111;
}
#video {
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transform: scaleX(-1); 
}
#cam-overlay { 
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
}

#hud {
  position: fixed; 
  top: 20px; 
  left: 50%; 
  transform: translateX(-50%);
  z-index: 10; 
  display: flex; 
  gap: 16px;
}
.hand-card {
  background: rgba(0,0,0,.6); 
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px; 
  padding: 10px 18px; 
  min-width: 130px; 
  text-align: center;
  backdrop-filter: blur(8px); transition: border-color .3s;
}
.hand-card.open   { 
  border-color: #00e5ff; 
}
.hand-card.closed { 
  border-color: #ff4081; 
}
.hand-label { 
  font-size: 11px; 
  color: #aaa; 
  text-transform: uppercase; 
  letter-spacing: 1px;
 }
.hand-state { 
  font-size: 20px; 
  font-weight: 700; 
  color: #fff; 
  margin-top: 4px; 
}
.hand-dist {
  font-size: 11px;
  color: #888;
  margin-top: 2px;
}

#panel-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 20;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  font-size: 13px;
}

#panel {
  position: fixed;
  top: 60px;
  right: 20px;
  z-index: 20;
  width: 260px;
  background: rgba(10, 10, 10, .85);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: 16px;
  backdrop-filter: blur(12px);
  display: none;
  flex-direction: column;
  gap: 12px;
}

#panel.visible {
  display: flex;
}

.ctrl-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ctrl-label {
  font-size: 12px;
  color: #aaa;
  display: flex;
  justify-content: space-between;
}
.ctrl-label span {
  color: #fff;
}

input[type=range] {
  width: 100%;
  accent-color: #00e5ff;
  cursor: pointer;
}

.ctrl-sep {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.preset-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.preset-btn {
  flex: 1;
  padding: 7px 4px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  transition: background .2s;
}
.preset-btn:hover {
  background: rgba(255, 255, 255, .18);
}
.preset-btn.active {
  background: rgba(0, 229, 255, .2);
  border-color: #00e5ff;
}

.section-title {
  font-size: 11px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#cam-error {
  position: fixed;
  bottom: 200px;
  right: 20px;
  z-index: 30;
  background: rgba(255, 64, 81, .85);
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  display: none;
  max-width: 220px;
}