:root{
  --ink:#f0f6ff;
  --muted:#a2b1d9;
  --accent:#ff5ea2;
  --accent-2:#00ffd0;
  --btn-edge:#0f1230;
  --warn:#ffdf6e;

 
  --glass-bg: rgba(255,255,255,0.10);
  --glass-stroke: rgba(255,255,255,0.35);
  --glass-shadow: 0 10px 30px rgba(0,0,0,0.35);
  --glass-blur: 18px;
  --glass-sat: 140%;
  --glass-spot: radial-gradient(300px 300px at var(--spot-x,50%) var(--spot-y,40%),
                                rgba(255,255,255,0.18) 0%,
                                rgba(255,255,255,0.06) 35%,
                                rgba(255,255,255,0.00) 60%);
  --preview-inset: 3px;
}

html,body{height:100%;}
*,
*::before,
*::after{ box-sizing:border-box; }

body{
  margin:0;
  color:var(--ink);
  font-family:"Press Start 2P", system-ui, sans-serif;
  background:#000 url("background_img.png") no-repeat center top / cover;
  min-height:100vh;
}

.wrap{max-width:1100px;margin:0 auto;padding:24px;}
h1{font-size:20px;letter-spacing:1px;margin:0 0 18px;text-shadow:2px 2px 0 #000;}
.bar{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0 20px;}

.pill{
  display:inline-flex;align-items:center;gap:8px;padding:10px 12px;
  background:var(--glass-bg);border-radius:8px;border:1px solid var(--glass-stroke);
  box-shadow:var(--glass-shadow);backdrop-filter:blur(12px) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(12px) saturate(var(--glass-sat));
  font-size:10px;color:#fff;
}

.card{
  background:var(--glass-bg);border:1px solid var(--glass-stroke);box-shadow:var(--glass-shadow);
  border-radius:16px;padding:16px;backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  position:relative;overflow:hidden;
}
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0) 30%), var(--glass-spot);
  mix-blend-mode:screen;
}

.tabbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.btn{
  cursor:pointer;background:linear-gradient(#4551a7,#2c367e);
  border:1px solid var(--glass-stroke); color:white; padding:12px 14px; font-size:12px;
  box-shadow:0 2px 0 rgba(255,255,255,0.18) inset, var(--glass-shadow);
  border-radius:6px; text-transform:uppercase; letter-spacing:0.5px; transition:transform .05s ease;
}
.btn.secondary{background:linear-gradient(#38407a,#242a63)}
.btn.danger{background:linear-gradient(#b34c5e,#7d2e3d)}
.btn:active{transform:translateY(2px)}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(100%)}

label small{color:var(--muted);font-size:9px;display:block;margin-top:6px;line-height:1.4}
input[type="number"], input[type="range"], select{
  width:100%; background:#0f1333; border:2px solid #0a0d24; color:var(--ink); padding:10px; border-radius:6px;
  box-shadow:inset 0 0 0 4px #000; font:inherit; font-size:12px;
}
input[type="file"]{display:none}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.thumb{
  position:relative;aspect-ratio:1/1;background:#0b0f2c;border:3px solid #000; border-radius:6px; overflow:hidden;
  box-shadow:0 0 0 3px #111632;
}
.thumb img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}

.status{text-transform:none;font-size:10px;color:var(--warn)}
.flex{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:12px 0}

.drop{
  background:var(--glass-bg);border:1px solid var(--glass-stroke);
  border-radius:10px; padding:16px;text-align:center;color:var(--muted);
  box-shadow:inset 0 0 0 4px #000;
}
.drop.drag{border-color:var(--accent); color:#fff;}

video, canvas{width:100%;background:#000;border:4px solid #000;border-radius:10px;box-shadow:0 0 0 4px #111632}

.countdown{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:56px;color:#fff;text-shadow:4px 4px 0 #000;pointer-events:none;
}

/* Square preview that will crops the live video */
.camera-wrap{
  position:relative;width:512px;height:512px;max-width:100%;margin:0 auto;overflow:hidden;border-radius:10px;
}
#video{
  position:relative;display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;clip-path: inset(var(--preview-inset));
}
.email-link{color: rgb(0, 174, 255)}

/* Frame preview overlay */
.frame-preview{ position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.frame-preview img{ width:100%; height:100%; object-fit:contain; image-rendering:pixelated; }

.progress{height:14px;background:rgba(255,255,255,0.08);border:1px solid var(--glass-stroke);border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 4px #000}
.progress > div{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));}
.result img{max-width:100%;border:4px solid #000;border-radius:10px;box-shadow:0 0 0 4px #111632;image-rendering:pixelated}
.hint{color:whitesmoke;font-size:10px;line-height:1.5}
.tag{background:#10163a;border:2px solid #0a0f2c;border-radius:6px;padding:6px 8px;font-size:9px}
a.link{color:var(--accent);text-decoration:none}
footer{margin:32px 0 12px;color:white;font-size:8px;text-align:center}

/* Form sizing tweaks */
#shot-count, #interval-secs, #precount-secs, #camera-delay{ width:8ch; max-width:100%; display:inline-block; }
#camera-section label{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; font-size:12px; }
#camera-section input[type="number"], #camera-section select{ width:100%; max-width:500px; box-sizing:border-box; }

/* Frame picker */
.frame-chooser{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.frame-thumb{
  position:relative; width:72px; height:72px; border-radius:10px; overflow:hidden;
  border:2px solid #0a0d24; box-shadow:inset 0 0 0 4px #000; background:rgba(255,255,255,0.08); cursor:pointer;
}
.frame-thumb img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.frame-thumb.none::before{content:'None'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:10px;}
.frame-thumb.selected{ outline:3px solid var(--accent); outline-offset:2px; }