:root{
  --bg0:#06110e;
  --bg1:#0a2a20;
  --text:#eef6f3;
  --muted: rgba(238,246,243,0.72);
  --gold:#f3c56a;
  --gold2:#f0a6b2;
  --shadow: 0 20px 60px rgba(0,0,0,0.45);

  /* Display knobs (defaults) */
  --frame-inset: 0px;     /* remove heart border */
  --frame-alpha: 0;       /* remove heart border */
  --heart-clip: polygon(
    10% 8%,
    38% 8%,
    50% 20%,
    62% 8%,
    90% 8%,
    100% 22%,
    100% 78%,
    50% 100%,
    0% 78%,
    0% 22%
  );
  --bg-video-scale: 0.92;
  --fg-y: 74%;
  --fg-scale: 0.92;
}
*{ box-sizing:border-box; }
html,body{ min-height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 700px at 50% 20%, rgba(35,140,105,0.25), transparent 60%),
    radial-gradient(900px 500px at 50% 55%, rgba(0,0,0,0.65), transparent 70%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}

/* ---------- Uploader layout ---------- */
.fioh-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:44px 18px 32px;
  gap:20px;
}

.fioh-header{
  width:min(940px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}

.fioh-logo-large img{
  width:min(170px, 34vw);
  height:auto;
  border-radius:999px;                /* circle again */
  background: rgba(0,0,0,0.22);
  padding:10px;
  border:1px solid rgba(255,255,255,0.10);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.55));
}

.fioh-title{
  margin:0;
  letter-spacing:0.26em;
  font-weight:800;
  font-size:40px;                     /* slightly smaller/more elegant */
  color:var(--gold);
}

.fioh-subtitle{
  margin:0;
  font-size:16px;
  color:var(--text);
  opacity:0.92;
}

.fioh-wait-banner{
  margin-top:6px;
  font-size:14px;
  color:var(--muted);
  min-height:18px;
}

.fioh-main{ width:min(940px, 100%); display:flex; justify-content:center; }

.uploader-card{
  width:min(800px, 100%);
  padding:26px 24px 22px;
  border-radius:26px;
  background: var(--glass);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.uploader-title{
  margin:0 0 10px;
  font-size:34px;
  font-weight:800;
}

.uploader-copy{
  margin:0 0 16px;
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
}

/* ---------- Dropzone + preview-in-place ---------- */
.dropzone{
  position:relative;
  border-radius:22px;
  border:2px dashed rgba(243,197,106,0.35);
  background: rgba(0,0,0,0.16);
  padding:20px;
  min-height:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.dropzone.is-dragover{
  border-color: rgba(243,197,106,0.7);
  background: rgba(243,197,106,0.08);
}

.file-input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.dropzone-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  pointer-events:none;
}

.dropzone-plus{
  width:54px;
  height:54px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:900;
  color:var(--gold);
  border:1px solid rgba(243,197,106,0.5);
  background: rgba(0,0,0,0.25);
}

.dropzone-text-main{
  font-size:19px;
  font-weight:800;
}

.dropzone-text-sub{
  font-size:14px;
  color:var(--muted);
}

.dropzone-preview{
  position:absolute;
  inset:12px;
  border-radius:18px;
  overflow:hidden;
  background: rgba(0,0,0,0.42);
  border:1px solid rgba(255,255,255,0.10);
}

.dropzone-preview img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.dropzone-preview-label{
  position:absolute;
  left:12px;
  top:10px;
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,0.86);
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.10);
  z-index:2;
}

.dropzone-preview-hint{
  position:absolute;
  right:12px;
  bottom:10px;
  font-size:13px;
  color:rgba(255,255,255,0.78);
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.10);
  z-index:2;
}

.hidden{ display:none !important; }

/* ---------- Form rows ---------- */
.permission-row{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:15px;
  color:rgba(255,255,255,0.92);
}
.permission-row input{ margin-top:4px; }
.required{ color:#ff6b8b; font-weight:900; }

.upload-status{
  margin-top:14px;
  min-height:20px;
  color:rgba(255,255,255,0.85);
  font-size:14px;
}

.primary-button{
  width:100%;
  margin-top:12px;
  padding:14px 16px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-weight:800;
  font-size:18px;
  color:#1b1b1b;
  background: linear-gradient(90deg, var(--gold), var(--gold2));
  box-shadow: 0 16px 40px rgba(0,0,0,0.40);
}
.primary-button:disabled{
  opacity:0.45;
  cursor:not-allowed;
}

.primary-button.secondary{
  width:auto;
  min-width:220px;
  display:inline-flex;
  justify-content:center;
}

/* ---------- Footer ---------- */
.fioh-footer{
  width:min(940px, 100%);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:4px 6px 24px;
  color:var(--muted);
}

.link-button{
  border:none;
  background:none;
  color:rgba(243,197,106,0.92);
  cursor:pointer;
  font-weight:800;
  padding:0;
  text-decoration:underline;
  text-underline-offset:3px;
}

.link-button.subtle{
  color:rgba(255,255,255,0.78);
  font-weight:700;
}

.footer-email{ width:min(620px, 100%); }

.text-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}
.text-field span{
  font-size:14px;
  color:rgba(255,255,255,0.78);
}
.muted{ color:rgba(255,255,255,0.55); font-weight:600; }

.text-field input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.28);
  color:rgba(255,255,255,0.92);
  outline:none;
}
.text-field input:focus{
  border-color: rgba(243,197,106,0.55);
  box-shadow: 0 0 0 4px rgba(243,197,106,0.10);
}

.footer-details{
  width:min(820px, 100%);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  background: rgba(0,0,0,0.18);
  padding:10px 12px;
}
.footer-details summary{
  cursor:pointer;
  font-weight:800;
  color:rgba(255,255,255,0.80);
}
.footer-details-body{
  margin-top:10px;
  color:rgba(255,255,255,0.72);
  font-size:14px;
  line-height:1.5;
}
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* ---------- Modal (centered + darker box) ---------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.78);
  z-index:1000;
}

.modal{
  position:fixed;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  z-index:1001;
  width:min(92vw, 760px);
  max-height:min(84vh, 760px);
  overflow:auto;
}

.modal-content{
  border-radius:22px;
  padding:22px 22px 18px;
  background: rgba(0,0,0,var(--frame-alpha,0.86));
  border:1px solid rgba(255,255,255,0.10);
  box-shadow: 0 26px 70px rgba(0,0,0,0.60);
}

.modal-intro{ color:rgba(255,255,255,0.78); }

.guidelines-list{
  margin:12px 0 18px 18px;
  color:rgba(255,255,255,0.92);
  line-height:1.55;
}

/* =========================
   DISPLAY PAGE (projector)
   ========================= */
.display-body{
  margin:0;
  height:100vh;
  overflow:hidden;
  background:#000;
}

/* Hide status bar unless debug mode */
.display-body .display-status-bar { display:none !important; }
.display-body.debug .display-status-bar { display:flex !important; }

.display-root{
  position:relative;
  width:100vw;
  height:100vh;
}

.display-background-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  filter: brightness(0.75) contrast(1.05);
}

.display-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:22px;
}

.display-heart-frame{
  position:relative;
  width:min(92vw, 160vh);
  aspect-ratio: 1.35 / 1;
}

/* Black heart “border” behind images */
.display-heart-frame::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--frame-alpha,0.86));
  clip-path: var(--heart-clip);
  z-index:1;
}

/* The actual viewport where images go */
.display-image-viewport{
  position:absolute;
  inset: var(--frame-inset);
  clip-path: var(--heart-clip);
  overflow:hidden;
  z-index:2;

  /* IMPORTANT: transparent so PNG cutouts look clean */
  background: transparent;
}

/* If you still have .display-heart-glow in HTML, kill it */
.display-heart-glow{ display:none !important; }

/* Image layers injected by JS */
.display-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-position: 50% 50%;
}

/* Blurred fill behind (covers empty space nicely) */
.display-image-blur{
  object-fit: cover;
  transform: scale(1.12);
  filter: blur(22px) saturate(1.12);
  opacity: 0.40; /* set to 0 for “pure cutout” */
}

/* Foreground cutout */
.display-image-foreground{
  object-fit: contain; /* THIS prevents face-cropping */
  transform: scale(var(--fg-scale, 0.98));
  filter: drop-shadow(0 16px 36px rgba(0,0,0,0.55));
  opacity:0;
  transition: opacity 900ms ease;
}
.display-image-foreground.is-active{
  opacity:1;
}

.display-status-bar{
  width:min(96vw, 1200px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:16px;
  background: rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78);
}

.display-status-text{
  font-size:14px;
  font-weight:650;
}

.display-brand-mark{
  font-size:13px;
  color: rgba(255,255,255,0.62);
}
/* ===== FIOH DISPLAY TUNING ===== */

/* Background video zoom-out is driven by a CSS var (set in production-config.js) */
.display-background-video{
  transform: scale(var(--bg-video-scale, 1));
  transform-origin: center;
}

/* Foreground should NEVER crop faces; also bias downward to avoid top-notch */
.display-image-foreground,
#projector-image-a,
#projector-image-b{
  object-fit: contain !important;
  object-position: 50% var(--fg-y, 55%) !important;
}

/* Blur plate fills the heart nicely */
.display-image-blur,
#projector-image-blur{
  object-fit: cover !important;
  object-position: 50% var(--fg-y, 55%) !important;
}

/* IMPORTANT: keep the inset border (do NOT force inset:0) */