/* =========================================================================
 * Tanda Kamera — css/camera.css
 * Area kamera, panel overlay metadata, alert, dan splash.
 *
 * Tinggi panel overlay TIDAK ditentukan di sini — js/layout.js menghitungnya
 * sebagai nilai piksel agar identik dengan hasil render canvas.
 * ========================================================================= */

.stage-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

body[data-orient="portrait"]  #stage { --ar-w: 2; --ar-h: 3; }
body[data-orient="landscape"] #stage { --ar-w: 3; --ar-h: 2; }

/* Ukuran eksak (lebar & tinggi) dihitung js/layout.js lewat fitStage();
   aspect-ratio di bawah hanya cadangan sebelum JS berjalan. */
#stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar-w) / var(--ar-h);
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  isolation: isolate;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(148, 163, 184, 0.18);
}

.stage-media {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #05070d;
}
.stage-media.mirrored { transform: scaleX(-1); }

/* --------------------------- Panel overlay ----------------------------- */

/*
 * Ada DUA kontainer keterangan di index.html: satu untuk potret, satu untuk
 * lanskap. Masing-masing punya kelas sendiri sehingga bentuknya bisa diatur
 * terpisah. Hanya satu yang tampil, dipilih lewat body[data-orient].
 *
 * ukuran height / padding / gap diisi inline oleh applyPreviewLayout().
 * Sengaja TANPA transisi: layout diukur langsung setelah nilai ini di-set,
 * dan animasi akan membuat pengukuran membaca nilai antar-frame.
 */
.live-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* POTRET — mini map di kiri, teks mengisi sisanya */
.live-overlay--portrait {
  flex-direction: row;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* LANSKAP — sama seperti potret, tetapi sudut & bingkai disesuaikan agar
   proporsinya pas pada foto mendatar */
.live-overlay--landscape {
  flex-direction: row;
  border-radius: 0 0 var(--radius) var(--radius);
}
.live-overlay--landscape .mini-map-wrap { border-radius: 9px; }

/* ------------------------------- Mini map ------------------------------ */

.mini-map-wrap {
  position: relative;
  flex: 0 0 auto;
  /* width & height diisi inline oleh applyPreviewLayout() */
  border-radius: 10px;
  overflow: hidden;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.mini-map { width: 100%; height: 100%; }

.mini-map--off .mini-map { display: none; }

.map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  font-size: 9.5px;
  line-height: 1.25;
  text-align: center;
  color: #94a3b8;
}
.map-fallback i { font-size: 15px; }

.map-expand {
  position: absolute;
  right: 3px;
  top: 3px;
  z-index: 900; /* di atas kontrol Leaflet (z-index 800) */
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 8px;
  color: #fff;
  background: rgba(2, 6, 23, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 7px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.map-expand:hover {
  background: rgba(2, 6, 23, 0.9);
  border-color: rgba(245, 158, 11, 0.7);
}

/* ------------------------------- Teks ---------------------------------- */

.ov-accent {
  flex: 0 0 auto;
  width: var(--ovaccent);
  /* Bayangan garis vertikal ini di canvas memakai tinggi dalam panel yang
     sama, jadi tingginya tidak boleh bergantung pada tinggi peta. */
  height: calc(100% - 2 * var(--ovpad, 8.8px));
  min-height: 0;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--brand), rgba(245, 158, 11, 0.1));
}

.ov-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* gap 0 dan line-height eksplisit: tinggi tiap baris ditentukan rumus yang
     SAMA dengan canvas (--ovlh), supaya posisi teks di pratinjau identik
     dengan hasil jepretan. */
  gap: 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.ov-line {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--ovlh, 1.3);
}

.ov-l1 { font-size: calc(var(--ovf) * 1.16); font-weight: 700; letter-spacing: 0.01em; }
.ov-l2 { font-size: calc(var(--ovf) * 0.99); font-weight: 500; color: #e6edf5; }
.ov-l3 {
  font-size: calc(var(--ovf) * 0.95);
  font-weight: 500;
  color: #cbd5e1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ov-l4 {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: calc(var(--ovf) * 0.98);
  font-weight: 600;
}
.ov-l4 span { overflow: hidden; text-overflow: ellipsis; }

/* --------------------------- Alert & splash ---------------------------- */

.alert-box {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.82);
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: slide-down 0.25s ease;
}
.alert-icon { font-size: 16px; color: var(--brand-soft); margin-top: 1px; }
.alert-content { min-width: 0; flex: 1 1 auto; }
.alert-content h3 { margin: 0 0 2px; font-size: 12.5px; font-weight: 700; color: #f8fafc; }
.alert-content p { margin: 0; font-size: 11.5px; line-height: 1.45; color: #cbd5e1; }
.alert-box.is-err { border-color: rgba(239, 68, 68, 0.5); }
.alert-box.is-err .alert-icon { color: #fca5a5; }

.splash {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(2, 6, 23, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 12px;
  color: #cbd5e1;
  transition: opacity 0.35s ease;
}
.splash.is-hidden { opacity: 0; pointer-events: none; }

.spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(148, 163, 184, 0.25);
  border-top-color: var(--brand);
  animation: spin 0.9s linear infinite;
}

.flash {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.flash.is-on { animation: flash 0.32s ease-out; }