* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: #111; color: #eee;
  font-family: -apple-system, system-ui, sans-serif;
  overflow: hidden; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

main {
  height: 100dvh;
  display: grid;
  grid-template-columns: 1fr clamp(64px, 19vmin, 136px);
  grid-template-rows: 1fr clamp(74px, 18vmin, 118px);
  grid-template-areas: "stage controls" "strip strip";
}

/* ---- camera stage ---- */
#stage { grid-area: stage; position: relative; background: #000; overflow: hidden; }
#cam, #onion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#onion { opacity: 0.35; pointer-events: none; }
#onion:not([src]) { display: none; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0.7; z-index: 2; }
#camError {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 20px;
  align-items: center; justify-content: center; background: #1c1c1c;
}

/* ---- buttons ---- */
button {
  border: none; background: #2e2e2e; color: #eee;
  font-size: 30px; cursor: pointer; position: relative;
}
button:disabled { opacity: 0.25; }
.round {
  width: clamp(42px, 10vmin, 68px); height: clamp(42px, 10vmin, 68px);
  font-size: clamp(20px, 4.6vmin, 30px);
  border-radius: 50%; display: grid; place-items: center;
}
.round.small {
  width: clamp(34px, 8vmin, 54px); height: clamp(34px, 8vmin, 54px);
  font-size: clamp(16px, 3.7vmin, 24px);
}
.round:active { transform: scale(0.9); }
.danger { background: #e53935; }
.save {
  background: #43a047;
  width: clamp(64px, 16vmin, 88px); height: clamp(64px, 16vmin, 88px);
  font-size: clamp(30px, 7vmin, 40px);
}

#btnOnion { opacity: 0.45; }
#btnOnion.active { opacity: 1; background: #3a3a56; }
#btnMic.hasAudio::after {
  content: "🎵"; position: absolute; right: -4px; bottom: -4px; font-size: 20px;
}
#btnMic.recording { background: #e53935; animation: pulse 1s infinite; }

#controls {
  grid-area: controls;
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-evenly; padding: clamp(4px, 1.2vmin, 10px) 2px;
  background: #1a1a1a;
}
#btnShutter {
  width: clamp(56px, 15vmin, 100px); height: clamp(56px, 15vmin, 100px);
  border-radius: 50%;
  background: #e53935; border: clamp(3px, 0.9vmin, 6px) solid #fff;
  box-shadow: 0 0 0 clamp(3px, 0.8vmin, 5px) rgba(229, 57, 53, 0.4);
}
#btnShutter:active { transform: scale(0.9); background: #ff6f60; }

/* ---- filmstrip ---- */
#stripWrap {
  grid-area: strip; display: flex; align-items: center; gap: clamp(4px, 1vmin, 8px);
  background: #1a1a1a; padding: clamp(4px, 1vmin, 8px); border-top: 2px solid #000;
  /* min-width: 0 stops the filmstrip's intrinsic width (all thumbs side by
     side) from blowing the grid wider than the viewport */
  min-width: 0;
}
#count {
  min-width: clamp(34px, 8vmin, 60px); text-align: center;
  font-size: clamp(20px, 5vmin, 36px); font-weight: 700; color: #ffc400;
}
#strip {
  flex: 1; min-width: 0; display: flex; gap: clamp(4px, 1vmin, 8px); align-items: center;
  height: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.thumb {
  flex: 0 0 auto; width: clamp(74px, 17.5vmin, 118px); height: clamp(55px, 13vmin, 88px);
  border-radius: 10px; overflow: hidden; padding: 0; background: #000;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- overlays ---- */
.overlay {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(0, 0, 0, 0.93);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 24px;
}
.hidden { display: none !important; }
.overlay-buttons { display: flex; gap: 28px; align-items: center; }
.dialog {
  background: #222; padding: 32px 44px; border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center; font-size: 20px; line-height: 1.4;
}
.big { font-size: 64px; line-height: 1; }
#exportWorking, #exportDone { display: flex; flex-direction: column; align-items: center; gap: 20px; }

#previewImg { max-width: 88vw; max-height: 68dvh; border-radius: 12px; background: #000; }
#playCanvas { width: 100%; height: 100%; object-fit: contain; }
#playOverlay { background: #000; }

#recDot {
  position: fixed; top: max(20px, env(safe-area-inset-top)); right: 24px;
  width: 24px; height: 24px; border-radius: 50%; background: #e53935;
  animation: pulse 1s infinite;
}
@keyframes pulse { 50% { opacity: 0.3; } }

#countdown {
  font-size: 40vh; font-weight: 800; color: #ffc400;
  z-index: 20; background: rgba(0, 0, 0, 0.6);
}

progress { width: 280px; height: 14px; accent-color: #ffc400; }

#toast {
  position: fixed; top: max(16px, env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); z-index: 30;
  background: #222; padding: 12px 26px; border-radius: 999px; font-size: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* max(..., env(safe-area-inset-top)): in the installed app the status bar
   overlays the page (black-translucent), which hid these completely */
#privacyLink {
  position: absolute; right: 10px; top: max(8px, env(safe-area-inset-top)); z-index: 4;
  font-size: 12px; color: #eee; opacity: 0.35; text-decoration: none;
}
#appVersion {
  position: absolute; right: 10px; top: calc(max(8px, env(safe-area-inset-top)) + 20px); z-index: 4;
  font-size: 11px; color: #eee; opacity: 0.5; cursor: pointer;
  padding: 3px 9px; border: 1px solid #666; border-radius: 999px;
}
#debugText {
  max-height: 62dvh; max-width: 92vw; overflow: auto;
  font: 11px/1.5 ui-monospace, Menlo, monospace;
  background: #000; color: #9e9; padding: 14px; border-radius: 10px;
  white-space: pre-wrap; word-break: break-all;
  user-select: text; -webkit-user-select: text;
}
#exportInfo {
  font-size: 13px; opacity: 0.55; font-variant-numeric: tabular-nums;
  cursor: pointer; text-decoration: underline dotted; /* tap → journal */
}
.exportPreview {
  width: 260px; max-width: 70vw; height: auto; border-radius: 12px;
}

/* ---- install banner (browser only, parent-facing) ---- */
#installBanner {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 5; display: flex; align-items: center; gap: 14px;
}
#btnInstall {
  display: flex; align-items: center; gap: 16px; text-align: left;
  background: #ffc400; color: #111; padding: 18px 26px; border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
#btnInstall .emoji { font-size: 40px; }
#btnInstall .text { display: flex; flex-direction: column; font-size: 22px; font-weight: 700; }
#btnInstall .text small { font-size: 15px; font-weight: 400; opacity: 0.7; }
#btnInstall:active { transform: scale(0.96); }

/* ---- portrait fallback ---- */
@media (orientation: portrait) {
  main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto clamp(74px, 18vmin, 118px);
    grid-template-areas: "stage" "controls" "strip";
  }
  #controls {
    flex-direction: row; flex-wrap: wrap;
    gap: clamp(2px, 1vmin, 8px); padding: clamp(4px, 1.2vmin, 8px);
  }
  #btnShutter { width: clamp(56px, 16vmin, 84px); height: clamp(56px, 16vmin, 84px); }
}