:root{
  /* Pink airy theme */
  --pink-1:#ff7ac6;
  --pink-2:#ff4fb6;
  --pink-3:#ff99d6;
  --ink:#1a0b16;
  --ui-glass:rgba(255,255,255,.18);
  --ui-border:rgba(255,255,255,.25);
  --shadow:0 10px 30px rgba(255,80,180,.25);
  --radius:16px;
  --gap:.7rem;
  --video-fit: cover;
}

html,body{
  margin:0; height:100%;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 800px at 50% 20%, #ffd3f0 0%, #ffe6f7 30%, #fff 60%) fixed;
  color:var(--ink);
}

.app{
  position:fixed; inset:0; overflow:hidden;
  /* IMPORTANT: let default touch handling on the page.
     We capture only on .camera-frame. */
  touch-action:auto;
}

/* Semi-subtle vignette so the UI pops while tracing */
.app::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.18) 100%);
}

/* Camera frame container (responsive) */
.camera-frame {
  position: relative;
  width: 90%;
  max-width: 500px;
  aspect-ratio: 3/4;       /* JS will update to real stream AR */
  margin: 1rem auto;
  border: 4px solid var(--pink-2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(255, 80, 180, 0.3);
  /* Capture gestures only here */
  touch-action: none;
}

/* Camera video stays inside the frame */
.camera-frame video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: var(--video-fit);
  background:#000;
  filter: saturate(1.05) contrast(1.02);
}

/* Overlay image */
.camera-frame img#overlay{
  position:absolute; top:50%; left:50%;
  transform-origin:center center;
  max-width:none; max-height:none;
  pointer-events:none;
  opacity:.5; /* JS syncs with slider */
  will-change: transform, opacity;
}

/* Status pill */
.status{
  position:absolute; top:calc(env(safe-area-inset-top,0) + .6rem); left:50%;
  transform:translateX(-50%);
  color:#fff;
  background:linear-gradient(180deg, rgba(255,105,180,.9), rgba(255,60,160,.9));
  border:1px solid rgba(255,255,255,.35);
  padding:.35rem .75rem;
  border-radius:999px;
  font-size:.85rem; font-weight:600;
  z-index:10;
  box-shadow: var(--shadow);
}

/* UI tray */
.ui{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:100%; max-width:920px;
  padding: calc(env(safe-area-inset-bottom,0) + .9rem) .9rem .9rem;
  display:flex; flex-direction:column; gap:var(--gap); align-items:center;
  z-index:10;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.06) 25%, rgba(255,255,255,.10));
  border-top: 1px solid var(--ui-border);
  padding-left: max(.9rem, env(safe-area-inset-left,0));
  padding-right: max(.9rem, env(safe-area-inset-right,0));
}

/* Allow normal taps inside controls */
.ui, .ui *{ touch-action:auto; pointer-events:auto; }

.row{
  width:100%;
  display:flex; flex-wrap:wrap; gap:var(--gap);
  align-items:center; justify-content:center;
}

/* Aerial pink buttons */
button, .btn{
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--ui-border);
  background:
    radial-gradient(120% 120% at 30% 15%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.35) 60%, rgba(255,255,255,.25) 100%),
    linear-gradient(180deg, var(--pink-3), var(--pink-2));
  color:#2a0f22;
  border-radius: var(--radius);
  padding:.9rem 1.1rem;
  font-weight:800; letter-spacing:.2px;
  font-size:1rem;
  box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, var(--shadow);
  transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
}
button:active, .btn:active{ transform: translateY(1px) scale(.99); }
button:focus-visible, .btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

/* Hide raw file input when used inside a label button */
input[type="file"]{ display:none; }

/* Range slider – pink and chunky */
input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:min(78vw, 360px); height: 24px; background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:10px; border-radius:999px;
  background: linear-gradient(90deg, var(--pink-1), var(--pink-2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 2px 10px rgba(255,80,180,.25);
}
input[type="range"]::-moz-range-track{
  height:10px; border-radius:999px;
  background: linear-gradient(90deg, var(--pink-1), var(--pink-2));
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:26px; height:26px; margin-top:-8px; border-radius:50%;
  background: radial-gradient(circle at 30% 25%, #fff 0%, #ffe6f7 50%, #ffd0ef 100%);
  border:1px solid var(--ui-border);
  box-shadow: 0 2px 0 rgba(255,255,255,.8) inset, var(--shadow);
}
input[type="range"]::-moz-range-thumb{
  width:26px; height:26px; border:none; border-radius:50%;
  background: radial-gradient(circle at 30% 25%, #fff 0%, #ffe6f7 50%, #ffd0ef 100%);
  box-shadow: 0 2px 0 rgba(255,255,255,.8) inset, var(--shadow);
}

.label, #opacityVal, .hint{
  color:#3a1731;
  font-size:.95rem; font-weight:700;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.hint{ text-align:center; width:100%; margin-top:.2rem; opacity:.75; }

/* --- Sliding options panel --- */
.ui-toggle{
  position:absolute;
  left:50%;
  bottom: calc(100% - 12px);
  transform: translateX(-50%);
  z-index: 11;
  appearance:none; -webkit-appearance:none;
  border:1px solid var(--ui-border);
  border-radius: 999px;
  padding:.5rem .9rem;
  font-weight:800; font-size:.95rem;
  background:
    radial-gradient(120% 120% at 30% 15%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.35) 100%),
    linear-gradient(180deg, var(--pink-3), var(--pink-2));
  color:#2a0f22;
  box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, var(--shadow);
  display:flex; align-items:center; gap:.5rem;
}
.ui-toggle .chev{ display:inline-block; transition: transform .2s ease; }

.ui-panel{
  width:100%;
  overflow:hidden;
  transition: max-height .25s ease, opacity .2s ease, transform .25s ease;
  max-height: 600px;
  opacity: 1;
  transform: translateY(0);
}
.ui.collapsed .ui-panel{
  max-height: 0;
  opacity: .0;
  transform: translateY(6px);
}
.ui.collapsed .ui-toggle .chev{ transform: rotate(180deg); }

/* Make it comfy on phones */
@media (max-width: 480px){
  :root{ --radius:14px; }
  button, .btn{ padding:.85rem 1rem; font-size:.98rem; }
  .status{ font-size:.8rem; }
}

/* If the screen is tall/portrait or very narrow, show full camera frame (no crop) */
@media (max-aspect-ratio: 3/4), (max-width: 420px){
  :root{ --video-fit: contain; }
}

/* If landscape/short, keep cover for immersive tracing */
@media (min-aspect-ratio: 4/3){
  :root{ --video-fit: cover; }
}