* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: system-ui, -apple-system, sans-serif;
}

.app-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}

/* Landscape Layout */
@media (orientation: landscape) {
  .app-container {
    background-image: url('asset/landscape_design.jpeg');
  }

  /* Camera Area in Chest */
  #cameraArea {
    position: absolute;
    top: 24.5%;
    left: 6.9%;
    width: 31.5%;
    height: 36.3%;
    background: #000;
    overflow: hidden;
  }

  /* Buttons */
  #flagBtn {
    top: 3.5%;
    left: 37.5%;
    width: 4%;
    height: 6%;
  }

  #startBtn {
    top: 15.5%;
    left: 48.5%;
    width: 14%;
    height: 17%;
  }

  #captureBtn {
    top: 15.5%;
    left: 65%;
    width: 14%;
    height: 17%;
  }

  #transformBtn {
    top: 15.5%;
    left: 81.5%;
    width: 14%;
    height: 17%;
  }

  #keyholeBtn {
    top: 62.5%;
    left: 21%;
    width: 3.5%;
    height: 5%;
  }

  /* Progress Bar */
  #progressContainer {
    position: absolute;
    top: 37%;
    left: 53.3%;
    width: 37.7%;
    height: 6.8%;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 10px;
    overflow: hidden;
  }

  /* Results Slots */
  .result-slot {
    width: 16.3%;
    height: 45%;
    top: 51.5%;
  }

  #result1 {
    left: 45.9%;
  }

  #result2 {
    left: 64.4%;
  }

  #result3 {
    left: 82.7%;
  }
}

/* Portrait Layout */
@media (orientation: portrait) {
  .app-container {
    background-image: url('asset/portrait_design.jpeg');
  }

  /* Camera Area */
  #cameraArea {
    position: absolute;
    top: 17.3%;
    left: 16.5%;
    width: 67%;
    height: 23.3%;
    background: #000;
  }

  /* Buttons */
  #flagBtn {
    top: 3.5%;
    left: 82%;
    width: 9%;
    height: 4%;
  }

  #startBtn {
    top: 49%;
    left: 8.5%;
    width: 26%;
    height: 9%;
  }

  #captureBtn {
    top: 49%;
    left: 37%;
    width: 26%;
    height: 9%;
  }

  #transformBtn {
    top: 49%;
    left: 65.5%;
    width: 26%;
    height: 9%;
  }

  #keyholeBtn {
    top: 41.5%;
    left: 47.5%;
    width: 5%;
    height: 4%;
  }

  /* Progress Bar */
  #progressContainer {
    position: absolute;
    top: 59.5%;
    left: 17.5%;
    width: 65.5%;
    height: 4%;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 10px;
    overflow: hidden;
  }

  /* Results Slots */
  .result-slot {
    width: 28.8%;
    height: 25.5%;
    top: 69.8%;
  }

  #result1 {
    left: 3.4%;
  }

  #result2 {
    left: 35.7%;
  }

  #result3 {
    left: 68.1%;
  }
}

/* Common Styles */
.overlay-element {
  position: absolute;
  z-index: 5;
}

video,
#previewImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

#previewImg[hidden] {
  display: none !important;
}

.transparent-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
}

/* Debug Mode Styles */
.debug-mode .transparent-btn {
  background: rgba(255, 0, 0, 0.3) !important;
  border: 2px solid red !important;
}

.debug-mode #keyholeBtn {
  background: rgba(0, 255, 0, 0.3) !important;
  border: 2px solid green !important;
}

.transparent-btn:disabled {
  cursor: not-allowed;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  font-size: 1.2rem;
  text-align: center;
  z-index: 10;
}

#progressBar {
  height: 100%;
  width: 0%;
  background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
  transition: width 0.3s ease;
}

#progressText {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  color: #e88504;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
  font-size: 1.9rem;
}

.img-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-code {
  position: absolute;
  bottom: 8%;
  right: 8%;
  background: #fff;
  padding: 4px;
  /* Increased padding for better quiet zone */
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-code img,
.qr-code canvas {
  width: 64px !important;
  height: 64px !important;
  display: block;
  image-rendering: pixelated;
}

.hidden {
  display: none !important;
}

/* Modal Styles */
.modal {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  max-width: 90%;
  max-height: 90%;
  border: 5px solid #fff;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.close-modal {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.close-modal:hover {
  color: #bbb;
}