*{box-sizing:border-box}body{margin:0;background:#21150f;color:#fff5e4;font:15px system-ui}
canvas{width:100vw;height:100dvh;display:block;touch-action:none}
header,footer{position:fixed;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
header{top:20px}footer{bottom:20px;justify-content:center}
strong,output,button,small{background:#201710e8;border:1px solid #d6ad805c;border-radius:8px;padding:9px 13px}
button{color:inherit;font:inherit;pointer-events:auto;cursor:pointer}
@media(max-width:620px){header,footer{left:10px;right:10px}small{font-size:11px}}

/* ===== Camera Control Panel ===== */

#camera-panel {
  position: fixed;
  z-index: 20;
  top: 85px;
  right: 20px;
  width: min(280px, 38vw);
  padding: 14px;
  background: rgba(25, 23, 20, 0.92);
  color: #fff5e4;
  border: 1px solid #8c694b;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.camera-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
}

#camera-status {
  color: #aaa;
  font-size: 10px;
}

.camera-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: #100e0c;
}

#camera-video,
#hand-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  display: none;
}

#hand-overlay {
  pointer-events: none;
}

#camera-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #d4b18b;
  font-size: 13px;
}

#camera-placeholder span {
  font-size: 30px;
}

#gesture-status {
  margin: 12px 0;
  padding: 9px;
  text-align: center;
  background: #35291f;
  border-radius: 7px;
  font-size: 12px;
}

#camera-panel button {
  width: 100%;
  padding: 9px;
  margin-top: 7px;
  border: 1px solid #b28a61;
  border-radius: 7px;
  background: #805634;
  color: white;
}

#camera-panel button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 620px) {
  #camera-panel {
    top: 75px;
    right: 10px;
    width: 155px;
    padding: 9px;
  }

  .camera-heading {
    font-size: 9px;
  }

  #camera-panel button {
    font-size: 11px;
    padding: 7px;
  }

  #gesture-status {
    font-size: 10px;
  }
}