/* ============================================================
   PORTABOOTH — styles
   Aesthetic: theatrical photobooth, warm "flash" coral on ink,
   film-strip motif, grain + spotlight depth. Kiosk-first.
   ============================================================ */

:root {
  --ink: #16110E;
  --ink-2: #211913;
  --cream: #F4E9DA;
  --flash: #FF5C3D;
  --electric: #22D3C5;
  --gold: #F4B740;
  --paper: #FBF4E9;
  --display-font: "Bricolage Grotesque", sans-serif;
  --body-font: "Hanken Grotesk", system-ui, sans-serif;
  --shadow: rgba(0,0,0,.45);
  --radius: 18px;
  --strip-gap: 14px;
  font-synthesis: none;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body-font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.display { font-family: var(--display-font); }

/* ---------- App shell ---------- */
#app {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  /* layered atmosphere: warm spotlight + vignette */
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--flash) 18%, transparent), transparent 55%),
    radial-gradient(90% 70% at 50% 120%, color-mix(in srgb, var(--electric) 12%, transparent), transparent 60%),
    var(--ink);
}

/* film grain overlay */
#app::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  z-index: 999;
}

/* curtain side rails */
#app::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 2px, transparent 2px 26px) left / 70px 100% no-repeat,
    repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 2px, transparent 2px 26px) right / 70px 100% no-repeat;
  opacity: .5;
  z-index: 0;
}

.screen {
  position: relative;
  z-index: 1;
  width: min(1100px, 94vw);
  height: min(760px, 92vh);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.screen.active { display: flex; animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }

@keyframes rise { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }

/* ---------- Wordmark ---------- */
.wordmark {
  font-family: var(--display-font);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: .92;
  display: inline-flex;
  align-items: baseline;
  gap: .04em;
}
.wordmark .dot { color: var(--flash); }

/* film strip decoration */
.filmstrip {
  display: flex; gap: 8px;
  padding: 8px; border-radius: 8px;
  background: #0d0a08;
  box-shadow: 0 10px 40px var(--shadow);
}
.filmstrip .frame {
  width: 64px; height: 80px; border-radius: 4px;
  background: linear-gradient(135deg, #2a201a, #160f0b);
  border: 2px solid color-mix(in srgb, var(--cream) 8%, transparent);
  position: relative; overflow: hidden;
}
.filmstrip .frame::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 50% 30%, rgba(255,92,61,.35), transparent 60%);
}

/* ---------- Attract screen ---------- */
#attract { gap: 34px; text-align: center; }
#attract .logo { font-size: clamp(58px, 11vw, 132px); }
#attract .tagline { font-size: clamp(16px, 2.4vw, 24px); color: color-mix(in srgb, var(--cream) 66%, transparent); letter-spacing:.02em; }
.kicker {
  font-size: 13px; letter-spacing:.32em; text-transform: uppercase;
  color: var(--electric); font-weight: 700;
}

.cta {
  margin-top: 4px;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 26px);
  color: var(--ink);
  background: var(--flash);
  border: none;
  padding: 18px 46px;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 14px 0 color-mix(in srgb, var(--flash) 65%, #000), 0 24px 50px color-mix(in srgb, var(--flash) 35%, transparent);
  transition: transform .12s ease, box-shadow .12s ease;
}
.cta:active { transform: translateY(8px); box-shadow: 0 6px 0 color-mix(in srgb, var(--flash) 65%, #000), 0 12px 28px color-mix(in srgb, var(--flash) 30%, transparent); }
.cta.pulse { animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }

/* ---------- Choice grids (mode / look / scene) ---------- */
.choose { width: 100%; gap: 26px; }
.choose h2 {
  font-family:var(--display-font); font-weight:800;
  font-size: clamp(26px, 4.4vw, 48px); text-align:center; letter-spacing:-.02em;
}
.choose .sub { text-align:center; color: color-mix(in srgb, var(--cream) 60%, transparent); margin-top:-14px; }

.grid { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; width:100%; }
.card {
  position: relative;
  width: 200px; min-height: 150px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--ink-2), #120d0a);
  border: 2px solid color-mix(in srgb, var(--cream) 10%, transparent);
  color: var(--cream);
  cursor: pointer;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  padding: 18px;
  text-align:left;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
  overflow:hidden;
}
.card:hover, .card.sel { transform: translateY(-4px); border-color: var(--flash); box-shadow: 0 18px 40px var(--shadow); }
.card .em { font-size: 40px; position:absolute; top:14px; left:16px; }
.card .name { font-family:var(--display-font); font-weight:700; font-size: 22px; }
.card .desc { font-size: 13px; color: color-mix(in srgb, var(--cream) 55%, transparent); margin-top:2px; }
.card.sel::after {
  content:"✓"; position:absolute; top:12px; right:14px;
  width:26px;height:26px;border-radius:50%; background:var(--flash); color:var(--ink);
  display:grid;place-items:center; font-weight:800; font-size:15px;
}

/* swatch preview chips for filters/scenes */
.swatch { width:200px; height:120px; border-radius:12px; margin-bottom:10px; overflow:hidden; position:relative; }

.row { display:flex; gap:14px; margin-top:8px; }
.btn {
  font-family:var(--body-font); font-weight:700; font-size:16px;
  padding: 14px 28px; border-radius: 100px; cursor:pointer; border:2px solid transparent;
  transition: transform .1s ease, background .15s ease, color .15s ease;
}
.btn:active { transform: translateY(2px); }
.btn-primary { background: var(--flash); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--cream); border-color: color-mix(in srgb, var(--cream) 25%, transparent); }
.btn-ghost:hover { border-color: var(--cream); }
.btn[disabled] { opacity:.4; cursor: default; }

/* ---------- Capture screen ---------- */
#capture { gap: 18px; }
.stage {
  position: relative;
  width: min(680px, 86vw);
  aspect-ratio: 4/3;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 22px 60px var(--shadow), 0 0 0 6px color-mix(in srgb, var(--cream) 6%, transparent);
}
#video, #liveCanvas { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; transform: scaleX(-1); }
#liveCanvas { display:none; }

.countdown {
  position:absolute; inset:0; display:none; place-items:center; z-index:5;
  background: radial-gradient(circle, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
.countdown.show { display:grid; }
.countdown .num {
  font-family:var(--display-font); font-weight:800;
  font-size: clamp(120px, 26vw, 280px); color: var(--cream);
  text-shadow: 0 8px 40px rgba(0,0,0,.6);
  animation: pop .9s ease both;
}
@keyframes pop { 0%{transform:scale(.4);opacity:0;} 30%{transform:scale(1.05);opacity:1;} 100%{transform:scale(.9);opacity:0;} }

.flash-overlay { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:6; }
.flash-overlay.fire { animation: flashfire .5s ease; }
@keyframes flashfire { 0%{opacity:0;} 8%{opacity:.95;} 100%{opacity:0;} }

.shotpips { display:flex; gap:10px; }
.shotpips .pip {
  width:54px; height:40px; border-radius:6px; border:2px solid color-mix(in srgb, var(--cream) 20%, transparent);
  background:#0d0a08; overflow:hidden;
}
.shotpips .pip img { width:100%; height:100%; object-fit:cover; transform: scaleX(-1); }

.cap-status { font-family:var(--display-font); font-weight:600; color: color-mix(in srgb, var(--cream) 70%, transparent); min-height:24px; }

/* ---------- Result screen ---------- */
#result { gap: 22px; flex-direction: row; flex-wrap: wrap; justify-content:center; }
.result-art {
  display:flex; align-items:center; justify-content:center;
  filter: drop-shadow(0 26px 50px rgba(0,0,0,.55));
}
.result-art img, .result-art canvas { max-height: 64vh; max-width: 46vw; border-radius: 8px; }
.result-side { display:flex; flex-direction:column; gap:14px; width: 280px; }
.result-side h2 { font-family:var(--display-font); font-weight:800; font-size: 34px; letter-spacing:-.02em; }
.result-side p { color: color-mix(in srgb, var(--cream) 60%, transparent); font-size:14px; margin-top:-8px; }
.action {
  display:flex; align-items:center; gap:12px;
  padding:15px 18px; border-radius:14px; cursor:pointer;
  background: var(--ink-2); border:2px solid color-mix(in srgb, var(--cream) 10%, transparent);
  font-weight:700; font-size:16px; color:var(--cream);
  transition: border-color .14s ease, transform .1s ease;
}
.action:hover { border-color: var(--flash); }
.action:active { transform: translateY(2px); }
.action .ic { font-size: 20px; }
.qr-wrap { display:flex; align-items:center; gap:14px; background:var(--paper); color:var(--ink); padding:12px; border-radius:14px; }
.qr-wrap canvas, .qr-wrap img { border-radius:6px; }
.qr-wrap .qr-label { font-size:12px; line-height:1.3; }

/* ---------- Loading / toast ---------- */
.loader { display:flex; flex-direction:column; align-items:center; gap:18px; }
.spinner {
  width:54px;height:54px;border-radius:50%;
  border:5px solid color-mix(in srgb, var(--cream) 15%, transparent); border-top-color: var(--flash);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
  position: fixed; bottom: 26px; left:50%; transform: translateX(-50%) translateY(40px);
  background: var(--cream); color: var(--ink); padding:12px 22px; border-radius:100px;
  font-weight:700; opacity:0; transition: all .3s ease; z-index: 1000; pointer-events:none;
}
.toast.show { opacity:1; transform: translateX(-50%) translateY(0); }

/* badge */
.privacy-badge {
  position: fixed; bottom: 14px; left: 16px; z-index: 2;
  font-size: 11px; letter-spacing:.04em; color: color-mix(in srgb, var(--cream) 40%, transparent);
  display:flex; align-items:center; gap:6px;
}
.privacy-badge .dot { width:7px;height:7px;border-radius:50%; background: var(--electric); }

.brand-foot {
  position: fixed; bottom: 14px; right: 18px; z-index:2;
  font-size: 12px; color: color-mix(in srgb, var(--cream) 40%, transparent); font-weight:600;
}
.brand-foot b { color: var(--cream); }

@media (max-width: 720px) {
  .result-art img, .result-art canvas { max-width: 86vw; max-height: 50vh; }
  .result-side { width: 86vw; }
  .card { width: 44vw; }
}

/* ============================================================
   THEMES ENGINE ADDITIONS — setup, onboarding, welcome media,
   per-theme decoration
   ============================================================ */

/* welcome media behind the attract content */
.welcome-media { position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:24px; }
.welcome-media img, .welcome-media video { width:100%; height:100%; object-fit:cover; }
.welcome-media::after { content:""; position:absolute; inset:0;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 82%, transparent), color-mix(in srgb, var(--ink) 28%, transparent)); }

/* setup button (kiosk chrome) */
/* minimalist icon-only chrome buttons */
.setup-btn { position:fixed; top:16px; right:16px; z-index:6; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0; gap:0; border-radius:50%;
  background: color-mix(in srgb, var(--cream) 8%, transparent); color:var(--cream);
  border:1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  cursor:pointer; font-family:var(--body-font); font-weight:700; font-size:18px; line-height:1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .15s ease, background .15s ease; }
.setup-btn:hover { border-color: var(--flash); background: color-mix(in srgb, var(--cream) 14%, transparent); }
.setup-btn span { display:none; }

/* onboarding notice */
/* compact, fixed to the bottom-left corner so it never covers the CTA/chrome */
.onboard { position:fixed; left:16px; bottom:44px; transform:translateY(220%); z-index:40;
  width:min(300px,78vw); display:flex; flex-direction:column; align-items:flex-start; gap:8px; background:var(--ink-2); color:var(--cream);
  border:1px solid color-mix(in srgb, var(--cream) 14%, transparent); border-radius:14px; padding:13px 14px;
  box-shadow:0 18px 44px var(--shadow); transition: transform .5s cubic-bezier(.2,.9,.2,1); }
.onboard.show { transform:translateY(0); }
.onboard-emoji { font-size:22px; }
.onboard-text { display:flex; flex-direction:column; gap:2px; }
.onboard-text b { font-family:var(--display-font); font-size:14px; }
.onboard-text span { font-size:12px; color: color-mix(in srgb, var(--cream) 60%, transparent); }
.onboard-actions { display:flex; flex-direction:row; align-items:center; gap:8px; }
.onboard-actions .btn { padding:8px 13px; font-size:13px; }
.onboard-x { background:none; border:none; color: color-mix(in srgb, var(--cream) 55%, transparent); cursor:pointer; font-size:12px; font-family:var(--body-font); }

/* setup overlay + panel */
.setup { position:fixed; inset:0; z-index:50; display:none; }
.setup.open { display:block; }
.setup-scrim { position:absolute; inset:0; background: color-mix(in srgb, #000 55%, transparent);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.setup-panel { position:absolute; top:0; right:0; height:100%; width:min(460px,94vw); background:var(--ink);
  border-left:1px solid color-mix(in srgb, var(--cream) 12%, transparent); display:flex; flex-direction:column;
  box-shadow:-20px 0 60px var(--shadow); animation: slideIn .35s cubic-bezier(.2,.9,.2,1) both; }
@keyframes slideIn { from { transform:translateX(40px); opacity:0; } to { transform:none; opacity:1; } }
.setup-head { display:flex; align-items:center; justify-content:space-between; padding:20px 22px;
  border-bottom:1px solid color-mix(in srgb, var(--cream) 10%, transparent); }
.setup-head h2 { font-size:22px; }
.setup-close { background:none; border:none; color:var(--cream); font-size:20px; cursor:pointer; opacity:.7; }
.setup-close:hover { opacity:1; }
.setup-body { padding:18px 22px 28px; overflow-y:auto; }
.su-section { margin-bottom:22px; }
.su-section h3 { font-family:var(--display-font); font-size:13px; text-transform:uppercase; letter-spacing:.1em;
  color: color-mix(in srgb, var(--cream) 55%, transparent); margin-bottom:12px; }
.su-field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.su-label { font-size:13px; color: color-mix(in srgb, var(--cream) 70%, transparent); }
.su-field input, .su-field select { background:var(--ink-2);
  border:1px solid color-mix(in srgb, var(--cream) 14%, transparent); color:var(--cream); border-radius:10px;
  padding:11px 12px; font-family:var(--body-font); font-size:15px; }
.su-field input:focus, .su-field select:focus { outline:none; border-color:var(--flash); }
.su-themes { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.su-theme { text-align:left; background:var(--ink-2); border:2px solid color-mix(in srgb, var(--cream) 10%, transparent);
  border-radius:14px; padding:12px; cursor:pointer; display:flex; flex-direction:column; gap:3px; transition: border-color .15s ease, transform .12s ease; }
.su-theme:hover { transform:translateY(-2px); }
.su-theme.sel { border-color:var(--flash); }
.su-theme-em { font-size:22px; }
.su-theme-name { font-family:var(--display-font); font-weight:700; font-size:15px; }
.su-theme-vibe { font-size:11px; color: color-mix(in srgb, var(--cream) 55%, transparent); }
.su-theme-dots { display:flex; gap:4px; margin-top:6px; }
.su-theme-dots i { width:14px; height:14px; border-radius:50%; display:block; }
.su-chips { display:flex; flex-wrap:wrap; gap:8px; }
.su-chip { display:flex; align-items:center; gap:6px; background:var(--ink-2);
  border:1px solid color-mix(in srgb, var(--cream) 14%, transparent); border-radius:100px; padding:8px 14px;
  font-size:14px; text-transform:capitalize; cursor:pointer; }
.su-actions { display:flex; gap:10px; margin-top:8px; }
.su-actions .btn { flex:1; }
.su-note { margin-top:12px; font-size:12px; color: color-mix(in srgb, var(--cream) 45%, transparent); text-align:center; }

/* per-theme decoration */
body[data-theme="kids"] #app::before { opacity:.18; background:
  radial-gradient(circle at 12% 20%, var(--gold) 0 6px, transparent 7px),
  radial-gradient(circle at 86% 14%, var(--flash) 0 7px, transparent 8px),
  radial-gradient(circle at 78% 82%, var(--electric) 0 6px, transparent 7px),
  radial-gradient(circle at 20% 84%, var(--flash) 0 5px, transparent 6px); }
body[data-theme="teens"] #app::before { opacity:.5; background:
  repeating-linear-gradient(45deg, color-mix(in srgb, var(--cream) 6%, transparent) 0 2px, transparent 2px 7px); }
body[data-theme="teens"] .wordmark { text-transform:uppercase; letter-spacing:0; }
body[data-theme="teens"] .cta { border-radius:4px; }
body[data-theme="luxury"] .filmstrip { box-shadow:0 10px 40px var(--shadow), 0 0 0 1px var(--gold); }
body[data-theme="wedding"] #app::before, body[data-theme="brand"] #app::before { opacity:.12; }

/* ============ P1: live background, AR props, install ============ */
.fx-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

.props-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin-top:8px; }
.prop-label { font-size:13px; color: color-mix(in srgb, var(--cream) 55%, transparent); margin-right:4px; }
.prop-chip { display:inline-flex; align-items:center; gap:6px; background:var(--ink-2); color:var(--cream);
  border:1px solid color-mix(in srgb, var(--cream) 14%, transparent); border-radius:100px; padding:7px 14px;
  font-family:var(--body-font); font-weight:600; font-size:14px; cursor:pointer; transition:border-color .14s ease, transform .1s ease; }
.prop-chip:hover { transform:translateY(-2px); }
.prop-chip.sel { border-color:var(--flash); }
.prop-chip .pe { font-size:18px; line-height:1; }

#fullscreenBtn { right:66px; }