/* src/css/main.css */

canvas {
  display: block;
  margin: 0 auto;
  background: #000;
  aspect-ratio: 2 / 3;
  width: 100%;       /* canvas займет всю ширину родителя, сохраняя пропорцию */
  height: auto;      /* браузер сам посчитает высоту по aspect-ratio и ширине */
  max-width: 480px;  /* максимум — сколько захочешь, например 480px, 720px */
  max-height: 720px; /* можно убрать, если max-width достаточно */
  object-fit: contain;
  box-sizing: border-box;
}

.lut-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-text);
  font-size: var(--indicator-font-size);
  opacity: 0;
  background: var(--indicator-bg);
  pointer-events: none;
  transition: opacity var(--transition-duration) ease;
  z-index: 20;
}
.lut-indicator.show {
  opacity: var(--indicator-opacity);
}

.lut-index {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-secondary);
  font-size: 12px;
  z-index: 20;
}

.film-button-container {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 20;
}

.capture-button-container {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
}

.capture-button {
  width: var(--capture-button-size);
  height: var(--capture-button-size);
  border-radius: 50%;
  border: 2px solid var(--color-text);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-duration) ease;
  cursor: pointer;
}
.capture-button:active {
  outline: none;
  scale: 0.95;
}

.switch-camera-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 20;
  width: 40px;
  height: 40px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
}
.switch-camera-btn:active {
  background: rgba(255, 221, 0, 0.4);
}