:root {
  --amber:  #e0a14a;
  --amber-2:#ffd9a0;
  --cream:  #f3ede2;
  --ink:    #0d0d0f;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); }

/* ---- Campaign branding (transparent, top-middle) -------------------- */
/* `env(...) + 20px` rather than `env(..., 20px)`: the second argument is only
   a fallback for browsers without safe-area support, and every target browser
   HAS it — reporting 0px on a device with no notch, which pinned this to the
   very top edge. Adding keeps the offset on notched and flat screens alike. */
#title {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 20px); left: 0; right: 0;
  z-index: 6; text-align: center; pointer-events: none;
  font-family: 'Playfair Display', Georgia, serif;
}
/* Shown by boot.js only once the campaign logo actually decodes. */
#title-logo {
  display: none; max-width: 46%; max-height: 58px;
  object-fit: contain; margin: 0 auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.6));
}
/* The campaign name. Shown alongside the logo, instead of it, or not at all,
   per the campaign's nameOnFilters flag (boot.js). */
#title .name {
  font-size: 26px; font-weight: 600; color: var(--cream);
  letter-spacing: .5px; text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
/* Only when both are up: the logo's box hugs its artwork, so without this the
   name crowds it. boot.js adds .has-logo once the logo decodes. */
#title.has-logo .name { margin-top: 6px; }

/* ---- Tracking indicator (subtle, top-right) ------------------------- */
#status {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 20px); right: 14px; z-index: 6;
  display: flex; align-items: center; gap: 7px;
  font: 11px/1 ui-monospace, monospace; letter-spacing: .4px;
  color: var(--cream); text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
#status .dot { width: 8px; height: 8px; border-radius: 50%; background: #e07a5a; transition: background .25s; }
#status.live .dot { background: #66d08a; }

/* ---- Bottom filter scroller ----------------------------------------- */
#scrim {
  position: fixed; left: 0; right: 0; bottom: 0; height: 215px; z-index: 4;
  pointer-events: none;
  background: linear-gradient(to top, rgba(13,13,15,.72), rgba(13,13,15,0));
}
#filterbar {
  position: fixed; left: 0; right: 0; z-index: 5;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 108px);
  display: flex; gap: 10px; padding: 4px 16px;
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#filterbar::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; scroll-snap-align: center;
  padding: 11px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(243,237,226,.22);
  background: rgba(13,13,15,.42); backdrop-filter: blur(8px);
  color: var(--cream); font: 12px/1 ui-monospace, monospace;
  letter-spacing: .8px; text-transform: uppercase; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .12s;
}
.chip:active { transform: scale(.96); }
.chip.active {
  background: var(--amber); color: var(--ink);
  border-color: var(--amber); font-weight: 700;
}

/* ---- Capture (shutter + flash + preview) ---------------------------- */
#shutter {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 6;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  width: 68px; height: 68px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 4px solid var(--cream);
  box-shadow: 0 2px 16px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; touch-action: none;
}
#shutter::after {
  content: ''; width: 48px; height: 48px; border-radius: 50%;
  background: var(--amber); transition: transform .12s;
}
#shutter:active::after { transform: scale(.86); }
/* Recording: red center that morphs toward a rounded square (stop affordance). */
#shutter.recording { border-color: #ff4b4b; }
#shutter.recording::after { background: #ff4b4b; border-radius: 10px; transform: scale(.66); }

/* Recording indicator — pill with a pulsing dot + elapsed time, top-center. */
#rec-indicator {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 8;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  display: none; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; background: rgba(13,13,15,.7);
  color: var(--cream); font: 12px/1 ui-monospace, monospace; letter-spacing: .5px;
}
#rec-indicator.show { display: flex; }
#rec-indicator .dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4b4b; animation: recpulse 1s infinite; }
@keyframes recpulse { 50% { opacity: .3; } }

#flash { position: fixed; inset: 0; z-index: 9; background: #fff; opacity: 0; pointer-events: none; }
#flash.fire { animation: flash .4s ease-out; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: .85; } 100% { opacity: 0; } }

#capture-preview {
  position: fixed; inset: 0; z-index: 12; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; background: rgba(13,13,15,.92);
  font-family: ui-sans-serif, system-ui, sans-serif;
}
#capture-preview.show { display: flex; }
#cap-x {
  position: absolute; z-index: 2; cursor: pointer;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(243,237,226,0); background: rgba(243,237,226,0);
  color: var(--cream); font: 24px/1 ui-sans-serif, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#cap-x:active { background: rgba(243,237,226,.18); }
#capture-img, #capture-video {
  max-width: 86%; max-height: 64%; border-radius: 14px;
  border: 1px solid rgba(224,161,74,.5); box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
#capture-video { background: #000; }
#capture-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cap-btn {
  padding: 12px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(243,237,226,.25); background: rgba(243,237,226,.06);
  color: var(--cream); font: 13px/1 ui-monospace, monospace;
  letter-spacing: .6px; text-transform: uppercase;
}
.cap-btn.primary { background: var(--amber); color: var(--ink); border-color: var(--amber); font-weight: 700; }

/* ---- Loading / error overlay ---------------------------------------- */
#overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; background: var(--ink); color: var(--cream);
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  transition: opacity .5s ease; text-align: center; padding: 24px;
}
#overlay.hidden { opacity: 0; pointer-events: none; }
#overlay .ring {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(243,237,226,.18); border-top-color: var(--amber);
  animation: spin .9s linear infinite;
}
#overlay h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; font-weight: 600; margin: 0; }
#overlay p  { font-size: 13px; color: #9a958c; margin: 0; max-width: 320px; line-height: 1.5; }
#overlay .err { color: #e07a5a; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Splash / loading screen --------------------------------------- */
#splash {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center;
  background: #0a0a0c; color: var(--cream); text-align: center;
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
  padding:
    calc(env(safe-area-inset-top, 0px) + 10vh) 28px
    calc(env(safe-area-inset-bottom, 0px) + 8vh);
  transition: opacity .45s ease;
}
#splash.hidden { opacity: 0; pointer-events: none; }

/* Campaign splash background. Absolutely positioned so it never disturbs the
   flex layout above it; starts transparent and fades in only after the image
   decodes (boot.js adds .ready), so a slow or 404'd image just leaves the
   flat #0a0a0c behind it. */
#splash-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 0; transition: opacity .6s ease;
}
#splash-bg.ready { opacity: 1; }
/* Legibility scrim. Deliberately light through the middle: campaign art is
   often a dark photo already (the stock galaxy image sits at a median
   luminance of 30/255), and a heavy scrim crushes it to near-black. Text
   legibility is carried mostly by the localized shadows below, so this only
   has to lift the top and bottom edges. Only paints once there IS an image. */
#splash-scrim {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0; transition: opacity .6s ease;
  background: linear-gradient(
    to bottom,
    rgba(10,10,12,.45) 0%,
    rgba(10,10,12,.12) 32%,
    rgba(10,10,12,.18) 70%,
    rgba(10,10,12,.66) 100%);
}
#splash-bg.ready ~ #splash-scrim { opacity: 1; }
/* Lift the real content above both layers. */
#splash-logo, #splash-title, #splash-start, #splash-hint { position: relative; z-index: 2; }

#splash-logo {
  display: none;                         /* boot.js reveals it once it decodes */
  max-width: 62%; max-height: 32vh; object-fit: contain; margin-top: 2vh;
}
/* Over a photo, separation comes from localized shadows rather than from
   darkening the whole image. The doubled shadow acts as a tight scrim that
   hugs the glyphs, so the art behind stays bright. */
#splash-bg.ready ~ #splash-logo { filter: drop-shadow(0 4px 18px rgba(0,0,0,.6)); }
#splash-bg.ready ~ #splash-title {
  text-shadow: 0 2px 10px rgba(0,0,0,.95), 0 0 30px rgba(0,0,0,.8);
}
#splash-bg.ready ~ #splash-hint { text-shadow: 0 1px 8px rgba(0,0,0,.95); }
/* Sits under #splash-logo when the campaign shows both. The margin doubles as
   the gap below the logo and as breathing room at the top when the name is
   alone, so it is not conditioned on .has-logo the way #title's is. */
#splash-title {
  margin-top: 26px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px; font-weight: 600; letter-spacing: .4px;
}
#splash-start {
  margin-top: auto;                      /* pin to bottom-center */
  padding: 16px 46px; border-radius: 999px; cursor: pointer; border: none;
  background: var(--amber); color: var(--ink);
  font: 700 15px/1 ui-monospace, monospace; letter-spacing: 1px; text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(224,161,74,.35);
  -webkit-tap-highlight-color: transparent; transition: background .2s, opacity .2s;
}
#splash-start:active { transform: translateY(1px); }
#splash-start:disabled {
  background: rgba(243,237,226,.14); color: rgba(243,237,226,.5);
  box-shadow: none; cursor: default;
}
#splash-hint {
  margin-top: 14px; min-height: 16px;
  font: 12px/1 ui-monospace, monospace; letter-spacing: .5px; color: #9a958c;
}