/* ============================================================
   MN30 disposable camera, the guest page.
   The invitation is the design authority: warm charcoal night
   above, the cream tablecloth below, split by its long arc, with
   the Old Fashioned orange as the one saturated colour. Here the
   live window takes the coupe's place on that horizon, and the
   orange belongs to the shutter alone.
   ============================================================ */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/jost-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/cormorant-garamond-300-italic-latin.woff2) format("woff2");
}

:root {
  --night: #3a3935;
  --night-deep: #2c2b28;
  --plastic: #1d1c1a;
  --cloth: #f6f0e1;
  --cloth-shade: #e9e1cc;
  --ink: #2a2a28;
  --ink-soft: #655e52;
  --cream: #fbf6ea;
  --cream-soft: rgba(251, 246, 234, 0.7);
  --drink: #e2662a;
  --drink-deep: #b84f1e;
  --flame: #e9b04f;
  --flame-core: #fcefb4;
  --oxblood: #7b2d2d;
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* everything that is not the window: deck, dial, controls, padding */
  --chrome: 252px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--night); }
body.camera {
  color: var(--cream);
  font: 400 16px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.fatal { margin: max(40px, env(safe-area-inset-top)) 16px 0; padding: 14px 16px; background: var(--night-deep); border-left: 3px solid var(--drink); border-radius: 4px; }
.fatal-open { display: block; margin: 12px 16px 0; min-height: 48px; line-height: 48px; border-radius: 12px; background: var(--cream); color: var(--ink); font-weight: 500; text-align: center; text-decoration: none; }

/* ---------- the body ---------- */
.body {
  --finder-w: min(calc(100vw - 32px), calc((100vh - var(--chrome)) * 0.75));
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(8px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom));
  overflow: hidden;
}
@supports (overflow: clip) { .body { overflow: clip; } }
@supports (height: 100svh) {
  .body {
    --finder-w: min(calc(100vw - 32px), calc((100svh - var(--chrome) - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 0.75));
    min-height: 100svh;
  }
}

/* ---------- the top deck: maker's badge, flash, counter ---------- */
.deck { width: var(--finder-w); height: 52px; display: flex; align-items: center; gap: 10px; flex: none; }
.deck .mark { height: 36px; width: auto; display: block; }
.deck-space { flex: 1; }
.deck-btn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 50%; padding: 0; }
.deck-btn svg { width: 22px; height: 22px; }
.deck-btn .bolt { fill: none; stroke: var(--cream-soft); stroke-width: 1.6; stroke-linejoin: round; }
.deck-btn .slash { stroke: var(--cream-soft); stroke-width: 1.6; stroke-linecap: round; }
.deck-btn[aria-pressed="true"] .bolt { fill: var(--flame); stroke: var(--flame); }
.deck-btn[aria-pressed="true"] .slash { display: none; }

.counter-wrap { display: flex; align-items: center; gap: 8px; }
.ready svg { width: 13px; height: 20px; display: block; }
.ready .flame-outer { fill: var(--flame); transition: fill 200ms ease; }
.ready .flame-inner { fill: var(--flame-core); transition: fill 200ms ease; }
.ready.lit svg { transform-origin: 50% 90%; animation: flicker 2.6s ease-in-out infinite; }
.ready.charging .flame-outer { fill: #7a705f; }
.ready.charging .flame-inner { fill: #958a76; }
.ready.out .flame-outer { fill: #55504a; }
.ready.out .flame-inner { fill: #625c55; }
@keyframes flicker {
  0%, 100% { transform: scale(1, 1); }
  40% { transform: scale(0.95, 1.07); }
  70% { transform: scale(1.03, 0.96); }
}

/* The frame counter is a printed drum behind a small window, like the one on top of every
   disposable: the numbers roll past an orange index as the film advances. */
.counter { width: 46px; height: 34px; padding: 4px; border-radius: 9px; background: var(--plastic); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 0 rgba(0, 0, 0, 0.25); }
.counter-window { position: relative; height: 26px; border-radius: 5px; overflow: hidden; background: linear-gradient(#cfc6b1, var(--cloth) 34%, var(--cloth) 66%, #cfc6b1); }
.counter-window::after { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 8px; margin-top: -4px; background: var(--drink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.drum { transition: transform 380ms cubic-bezier(0.3, 0.7, 0.2, 1); will-change: transform; }
.drum span { display: block; height: 26px; line-height: 26px; text-align: center; padding-left: 3px; color: var(--ink); font: 600 17px/26px var(--sans); font-variant-numeric: tabular-nums; }
.counter-label { color: var(--cream-soft); font-size: 14px; letter-spacing: 0.01em; }

/* ---------- the window ---------- */
.finder-wrap { position: relative; width: var(--finder-w); flex: none; margin-top: 2px; }
/* The invitation's horizon: the tablecloth rises behind the window's lower third. */
.finder-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 64%;
  width: 150vw;
  height: 260vh;
  transform: translateX(-50%);
  background: var(--cloth);
  border-radius: 50% / 130px;
  pointer-events: none;
}
.finder { position: relative; z-index: 1; padding: 7px; border-radius: 24px; background: var(--plastic); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 22px 36px -18px rgba(29, 28, 26, 0.55); }
.window { position: relative; touch-action: pan-y; aspect-ratio: 3 / 4; border-radius: 17px; overflow: hidden; background: #0f0f0e; isolation: isolate; }
.window > video, .window > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.window > video { object-fit: cover; opacity: 0.001; }
.window > video.raw { opacity: 1; }
.window > video.mirror { transform: scaleX(-1); }
.window > canvas { opacity: 0; transition: opacity 260ms ease; }
.window.live > canvas { opacity: 1; }
.window.live > video.raw { opacity: 1; }

.stamp { position: absolute; z-index: 2; pointer-events: none; filter: drop-shadow(0 0 2px rgba(255, 106, 20, 0.9)) drop-shadow(0 0 5px rgba(255, 106, 20, 0.45)); opacity: 0; transition: opacity 260ms ease; }
.window.live .stamp { opacity: 1; }
.stamp svg { display: block; width: 100%; height: auto; }

.curtain { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; }
.curtain.shut { animation: curtain 190ms ease-out; }
@keyframes curtain { 0% { opacity: 1; } 35% { opacity: 1; } 100% { opacity: 0; } }

.film-flash { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; margin: -0.6em 0 0; text-align: center; font: italic 300 40px/1.2 var(--display); color: var(--cream); text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55); opacity: 0; pointer-events: none; }
.film-flash.show { animation: film 1100ms ease forwards; }
@keyframes film { 0% { opacity: 0; transform: translateY(6px); } 18% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; } }

.status { position: absolute; z-index: 4; top: 10px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 24px); margin: 0; padding: 6px 11px; border-radius: 7px; background: rgba(29, 28, 26, 0.78); color: var(--cream); font-size: 14px; line-height: 1.35; text-align: center; }
.status:empty { display: none; }

/* ---------- panes inside the window ---------- */
.pane { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 22px; text-align: center; background: var(--night-deep); }
.pane-title { margin: 0; text-wrap: balance; font: italic 300 27px/1.15 var(--display); color: var(--cream); max-width: 15em; }
.pane-note { margin: 0; color: var(--cream-soft); font-size: 15px; max-width: 26em; }
.pane-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; width: min(100%, 260px); }
.pane-btn { min-height: 46px; border-radius: 12px; border: 0; background: var(--cream); color: var(--ink); font-weight: 500; font-size: 16px; }
.pane-btn.quiet { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(251, 246, 234, 0.45); }

.preopen { justify-content: flex-start; padding-top: 12%; background: var(--night); }
.scene { width: 76%; height: auto; overflow: visible; }
.scene-glass path { fill: none; stroke: var(--cream); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.scene-drink { fill: var(--drink); }
.scene-swizzle { stroke: var(--cream); stroke-width: 3.4; stroke-linecap: round; }
.scene-flame { transform-box: fill-box; }
.scene-flame .flame-outer { fill: var(--flame); }
.scene-flame .flame-inner { fill: var(--flame-core); }
.scene-flame { animation: flicker 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.preopen .pane-title { margin-top: 6px; font-size: 24px; }
.countdown { font: italic 300 clamp(40px, 13vw, 58px)/1 var(--display); color: var(--flame); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }

.cloth-note { position: relative; z-index: 1; width: var(--finder-w); margin: 22px 0 0; color: var(--ink-soft); text-align: center; font-size: 15px; }

/* ---------- on the tablecloth: film dial and controls ---------- */
.live { position: relative; z-index: 1; width: var(--finder-w); flex: none; }
.dial { display: flex; gap: 18px; overflow-x: auto; padding: 14px 4px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dial::-webkit-scrollbar { display: none; }
.dial > :first-child { margin-left: auto; }
.dial > :last-child { margin-right: auto; }
.dial button { position: relative; flex: none; min-height: 44px; padding: 10px 2px 6px; border: 0; background: none; color: var(--ink-soft); font: italic 300 21px/1 var(--display); white-space: nowrap; transition: color 160ms ease; }
.dial button[aria-checked="true"] { color: var(--ink); }
/* the orange chevron under the monogram, reused as the dial's index */
.dial button[aria-checked="true"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 11px; height: 6px; margin-left: -5.5px; background: var(--drink); clip-path: polygon(0 0, 100% 0, 50% 100%); }

.controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 6px; }
.side-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 70px; min-height: 64px; padding: 6px 4px; border: 0; background: none; color: var(--ink); border-radius: 14px; }
.side-btn:first-child { justify-self: start; }
.side-btn:last-child { justify-self: end; }
.side-btn svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.side-label { font-size: 13px; font-weight: 500; white-space: nowrap; }
.side-btn:disabled { opacity: 0.38; cursor: default; }
.roll-count { position: absolute; top: 2px; right: 10px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--ink); color: var(--cloth); font: 600 11px/19px var(--sans); text-align: center; font-variant-numeric: tabular-nums; }

.shutter { width: 86px; height: 86px; padding: 5px; border-radius: 50%; border: 3px solid var(--ink); background: var(--cloth); touch-action: manipulation; }
.shutter-face { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--drink); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.13), inset 0 2px 0 rgba(255, 255, 255, 0.18); transition: transform 90ms ease, background-color 90ms ease; }
.shutter:active .shutter-face, .shutter.pressed .shutter-face { transform: scale(0.9); background: var(--drink-deep); }
.shutter[disabled] { cursor: default; border-color: #b9b09c; }
.shutter[disabled] .shutter-face { background: #d8cfbb; box-shadow: none; }
.shutter.done .shutter-face { background: #d8cfbb; }

/* ---------- flash, scrim, roll sheet ---------- */
.flash-fill { position: fixed; inset: 0; z-index: 60; background: #fffdf6; opacity: 0; pointer-events: none; transition: opacity 70ms ease; }
.flash-fill.on { opacity: 1; }
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(29, 28, 26, 0.55); }
.sheet {
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 0;
  max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 auto; max-width: 560px;
  padding: 18px 20px max(22px, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: var(--cloth); color: var(--ink);
  animation: sheet 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sheet h2 { margin: 0; font: italic 300 31px/1.1 var(--display); color: var(--ink); }
.sheet-close { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); font-weight: 500; font-size: 16px; }
.sheet-summary { margin: 4px 0 14px; color: var(--ink-soft); font-size: 15px; }
.shots { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.shot { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: 12px; background: #fffaf0; box-shadow: inset 0 0 0 1px var(--cloth-shade); }
/* An undeveloped frame carries the emblem: the mark is what "sealed until the reveal" looks like. */
.shot .frame { flex: none; width: 46px; height: 58px; border-radius: 4px; background: var(--night) url(/assets/coupe-mark.svg) center / 26px auto no-repeat; box-shadow: inset 0 0 0 3px #fffaf0, inset 0 0 0 4px var(--cloth-shade); }
.shot.failed .frame { opacity: 0.45; }
.shot .meta { flex: 1; min-width: 0; font-size: 15px; line-height: 1.35; }
.shot .meta b { font-weight: 500; }
.shot .meta small { display: block; color: var(--ink-soft); font-size: 13px; }
.shot.failed .meta small { color: var(--oxblood); }
.delete { min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink-soft); font-size: 14px; font-weight: 500; }
.field { display: grid; gap: 6px; margin: 0 0 16px; }
.field span { font-size: 14px; color: var(--ink-soft); }
.field input { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid #d3cab5; background: #fffaf0; color: var(--ink); font: 400 17px var(--sans); }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 10px; border-radius: 12px; border: 0; box-shadow: inset 0 0 0 1.5px var(--ink); background: none; color: var(--ink); font-weight: 500; font-size: 15px; text-decoration: none; text-align: center; }
.sheet-note { margin: 16px 0 0; font-size: 15px; color: var(--ink); }
.sheet-warn { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #f3e2c8; color: var(--ink); font-size: 14px; }
.fineprint { margin: 12px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }

/* ---------- small phones ---------- */
@media (max-width: 360px) {
  .dial { gap: 14px; }
  .dial button { font-size: 19px; }
  .side-btn { min-width: 60px; }
}

/* ---------- held sideways: window left, controls right, all night ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --chrome: 24px; }
  .body {
    --finder-w: calc((100vh - 24px) * 4 / 3);
    display: grid;
    grid-template-columns: auto minmax(150px, 210px);
    grid-template-rows: auto 1fr;
    grid-template-areas: "finder deck" "finder live";
    column-gap: 18px;
    justify-content: center;
    align-items: start;
    padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
  }
  @supports (height: 100svh) { .body { --finder-w: calc((100svh - 24px) * 4 / 3); } }
  .finder-wrap { grid-area: finder; width: min(var(--finder-w), calc(100vw - 260px)); margin: 0; }
  .finder-wrap::before { display: none; }
  .window { aspect-ratio: 4 / 3; }
  .deck { grid-area: deck; width: auto; }
  .live { grid-area: live; width: auto; align-self: stretch; display: flex; flex-direction: column; }
  .cloth-note { grid-area: live; width: auto; color: var(--cream-soft); text-align: left; }
  .dial { flex-direction: column; gap: 0; padding: 0; overflow: visible; }
  .dial > :first-child, .dial > :last-child { margin: 0; }
  .dial button { color: var(--cream-soft); text-align: left; padding: 8px 0 8px 16px; font-size: 20px; }
  .dial button[aria-checked="true"] { color: var(--cream); }
  .dial button[aria-checked="true"]::before { top: 50%; left: 0; margin: -5.5px 0 0; width: 6px; height: 11px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .controls { grid-template-columns: auto auto auto; justify-content: start; gap: 10px; margin-top: auto; }
  .side-btn { color: var(--cream); min-width: 54px; }
  .side-btn svg { stroke: var(--cream); }
  .roll-count { background: var(--cream); color: var(--ink); }
  .shutter { border-color: var(--cream); background: var(--night); }
  .controls .shutter { order: -1; }
}

@keyframes film-still { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ready.lit svg, .scene-flame { animation: none; }
  .drum, .window > canvas, .stamp, .shutter-face { transition: none; }
  .film-flash.show { animation: film-still 1100ms steps(1, end) forwards; }
  .curtain.shut { animation-duration: 120ms; }
  .sheet { animation: none; }
}