/* Mission detail screen, shared by mission-1.html … mission-6.html.

   Night is the only look: each mission page carries `data-theme="night"` on
   <html>, matching index.html and styles-night.css, which swaps the navy and
   ice-blue values below over the burgundy and gold defaults. */

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

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

@font-face {
  font-family: "Great Vibes";
  src: url("assets/fonts/great-vibes-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --page-gutter: 1.05rem;
  --page-width: 28rem;
  --display: "Cormorant Garamond", "Bodoni MT", Didot, Georgia, "Times New Roman", serif;
  --body: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --script: "Great Vibes", "Segoe Script", "French Script MT", cursive;

  /* Burgundy and gold: the retired look, kept as the base defaults. */
  --text: #fdf4de;
  --text-dim: #dcc49c;
  --accent: #d9b56d;
  --accent-strong: #f4e2b0;
  --accent-deep: #8a5f23;
  --kicker-a: #f8e8bd;
  --kicker-b: #e0bb79;
  --kicker-c: #c09245;
  --title-a: #f9e7b6;
  --title-b: #e5be7b;
  --title-c: #b07f36;
  --card-bg: #fdf4de;
  --card-bg-2: #f8ecd0;
  --card-text: #33200f;
  --card-dim: #5f4938;
  --card-border: rgba(180, 134, 63, 0.55);
  --chip-bg: #170a06;
  --chip-text: #f4e2b0;
  --btn-bg: #fdf4de;
  --btn-text: #3b0711;
  --btn-border: rgba(201, 158, 84, 0.9);
  --btn-solid-bg: #1c0a06;
  --btn-solid-text: #f9e7b6;
  --glow: rgba(255, 205, 130, 0.35);
  --page-bg:
    radial-gradient(130% 50% at 50% -6%, #5f1020 0%, rgba(77, 12, 22, 0) 64%),
    radial-gradient(100% 46% at 50% 105%, #500e19 0%, rgba(66, 9, 17, 0) 72%),
    linear-gradient(180deg, #450b15 0%, #470b15 46%, #3c0711 100%);
}

html[data-theme="night"] {
  /* Navy and ice blue, matching index.html and styles-night.css. */
  --text: #e6f0ff;
  --text-dim: #c3d9f5;
  --accent: #9fdcff;
  --accent-strong: #eaf6ff;
  --accent-deep: #3f93c9;
  --kicker-a: #f2f8ff;
  --kicker-b: #b9d6f7;
  --kicker-c: #6f9fd0;
  --title-a: #f4f9ff;
  --title-b: #cfe4ff;
  --title-c: #86b8ea;
  --card-bg: #0c1c33;
  --card-bg-2: #091426;
  --card-text: #dceaff;
  --card-dim: #a3bcdb;
  --card-border: rgba(166, 204, 250, 0.42);
  --chip-bg: #050b14;
  --chip-text: #cfe7ff;
  --btn-bg: #0c1c33;
  --btn-text: #eaf6ff;
  --btn-border: rgba(126, 180, 240, 0.6);
  --btn-solid-bg: #071220;
  --btn-solid-text: #cfe7ff;
  --glow: rgba(120, 190, 250, 0.35);
  --page-bg:
    radial-gradient(120% 46% at 50% -8%, #102c4c 0%, rgba(9, 22, 40, 0) 62%),
    radial-gradient(100% 44% at 50% 104%, #0d2440 0%, rgba(6, 14, 26, 0) 72%),
    linear-gradient(180deg, #050a16 0%, #060d1c 46%, #04080f 100%);
}

* {
  box-sizing: border-box;
}

/* The mission screens hide unused buttons with the `hidden` attribute; keep it
   stronger than the `display` values below. */
[hidden] {
  display: none !important;
}

html {
  background: #24040a;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

html[data-theme="night"] {
  background: #03060d;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Light dust behind the card: warm bokeh by default, fine snow at night. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body::before {
  background-image:
    radial-gradient(circle at 7% 17%, rgba(255, 205, 130, 0.28) 0 2px, transparent 3px),
    radial-gradient(circle at 17% 9%, rgba(255, 224, 168, 0.22) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 93% 14%, rgba(255, 208, 138, 0.24) 0 2.2px, transparent 3.4px),
    radial-gradient(circle at 86% 27%, rgba(255, 224, 168, 0.16) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 9% 63%, rgba(255, 205, 130, 0.12) 0 2px, transparent 3.2px),
    radial-gradient(circle at 92% 69%, rgba(255, 205, 130, 0.12) 0 1.8px, transparent 3px),
    radial-gradient(circle at 15% 88%, rgba(255, 196, 118, 0.18) 0 2.8px, transparent 4.2px),
    radial-gradient(circle at 82% 92%, rgba(255, 214, 148, 0.18) 0 2.2px, transparent 3.4px);
  filter: blur(1px);
  opacity: 0.55;
}

html[data-theme="night"] body::before {
  background-image:
    radial-gradient(circle at 6% 15%, rgba(214, 235, 255, 0.5) 0 1.1px, transparent 2px),
    radial-gradient(circle at 16% 8%, rgba(198, 226, 255, 0.34) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 94% 12%, rgba(214, 235, 255, 0.42) 0 1.2px, transparent 2.1px),
    radial-gradient(circle at 87% 26%, rgba(198, 226, 255, 0.28) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 9% 62%, rgba(214, 235, 255, 0.22) 0 1.1px, transparent 2px),
    radial-gradient(circle at 92% 71%, rgba(214, 235, 255, 0.22) 0 1px, transparent 1.9px),
    radial-gradient(circle at 14% 87%, rgba(214, 235, 255, 0.3) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 83% 93%, rgba(214, 235, 255, 0.3) 0 1.2px, transparent 2.2px);
  filter: none;
  opacity: 0.75;
}

body::after {
  background:
    radial-gradient(78% 52% at 50% 33%, rgba(255, 219, 160, 0.045) 0%, transparent 70%),
    radial-gradient(130% 95% at 50% 44%, transparent 52%, rgba(18, 2, 7, 0.3) 100%);
}

html[data-theme="night"] body::after {
  background:
    radial-gradient(72% 46% at 50% 26%, rgba(110, 168, 240, 0.07) 0%, transparent 72%),
    radial-gradient(130% 95% at 50% 44%, transparent 50%, rgba(1, 4, 9, 0.55) 100%);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.page {
  position: relative;
  z-index: 1;
  width: min(100%, var(--page-width));
  margin: 0 auto;
  padding: 0 var(--page-gutter) 2.2rem;
}

/* ---------- Header ---------- */

.mission-head {
  position: relative;
  padding-bottom: 0.2rem;
  text-align: center;
}

.scene {
  position: relative;
  width: calc(100% + var(--page-gutter) * 2);
  margin-left: calc(var(--page-gutter) * -1);
  aspect-ratio: 39 / 10;
}

/* The ornament band fades out at its lower edge; the baubles hang past it,
   the way they do on the passport page. */
.scene__garland {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  filter: drop-shadow(0 10px 16px rgba(10, 0, 4, 0.28));
}

.scene__bauble {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(10, 0, 4, 0.35));
}

.scene__bauble--left {
  top: 74%;
  left: 1.03%;
  width: 12.82%;
}

.scene__bauble--right {
  top: 56%;
  left: 89.1%;
  width: 10.26%;
}

/* The night flight has no photograph at the top: a moon in a star field
   replaces the garland, drawn in CSS to keep the page image-light. */
html[data-theme="night"] .scene {
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 34%, rgba(168, 202, 255, 0.42) 0 4%, rgba(107, 159, 226, 0.14) 5%, transparent 34%),
    radial-gradient(60% 90% at 20% 12%, rgba(74, 168, 255, 0.16), transparent 68%),
    linear-gradient(180deg, #050a16 0%, #0a1830 58%, #0e2448 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 74%, transparent 100%);
}

html[data-theme="night"] .scene__garland,
html[data-theme="night"] .scene__bauble {
  display: none;
}

html[data-theme="night"] .scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 34%, rgba(220, 235, 255, 0.85) 0 1.2px, transparent 2px),
    radial-gradient(circle at 26% 66%, rgba(220, 235, 255, 0.5) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 38% 22%, rgba(220, 235, 255, 0.7) 0 1px, transparent 1.9px),
    radial-gradient(circle at 52% 58%, rgba(220, 235, 255, 0.45) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 64% 18%, rgba(220, 235, 255, 0.6) 0 1.1px, transparent 2px),
    radial-gradient(circle at 88% 72%, rgba(220, 235, 255, 0.5) 0 1px, transparent 1.9px),
    radial-gradient(circle at 8% 78%, rgba(220, 235, 255, 0.4) 0 0.9px, transparent 1.8px),
    radial-gradient(circle at 44% 84%, rgba(220, 235, 255, 0.35) 0 0.8px, transparent 1.7px);
}

html[data-theme="night"] .scene::after {
  content: "";
  position: absolute;
  top: 16%;
  right: 15%;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #ffffff 0%, #e8f1ff 52%, #aecaf1 100%);
  box-shadow:
    0 0 1.2rem rgba(150, 200, 255, 0.5),
    0 0 0 0.4rem rgba(168, 202, 255, 0.08);
}

.back {
  position: absolute;
  top: 0.55rem;
  left: calc(var(--page-gutter) * -1 + 0.85rem);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid rgba(244, 226, 176, 0.55);
  border-radius: 50%;
  background: rgba(23, 8, 5, 0.72);
  color: var(--accent-strong);
  text-decoration: none;
  box-shadow:
    0 0.35rem 0.9rem rgba(12, 1, 5, 0.4),
    inset 0 1px 0 rgba(255, 244, 212, 0.16);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

html[data-theme="night"] .back {
  border-color: rgba(166, 204, 250, 0.55);
  background: rgba(5, 11, 20, 0.72);
  color: var(--accent-strong);
}

.back svg {
  width: 1.15rem;
  height: 1.15rem;
}

.back:hover {
  border-color: var(--accent-strong);
  background: rgba(48, 16, 10, 0.86);
}

html[data-theme="night"] .back:hover {
  background: rgba(16, 34, 56, 0.9);
}

.back:active {
  transform: scale(0.96);
}

.kicker {
  margin: 0.1rem 0 0;
  background: linear-gradient(180deg, var(--kicker-a) 6%, var(--kicker-b) 52%, var(--kicker-c) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--accent-strong);
  font-family: var(--display);
  font-size: clamp(0.82rem, 3.4vw, 0.95rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 244, 212, 0.14);
}

.script {
  margin: 0.05rem 0 0;
  color: var(--accent);
  font-family: var(--script);
  font-size: clamp(1.75rem, 8.4vw, 2.15rem);
  font-weight: 400;
  line-height: 1.1;
  text-shadow:
    0 1px 0 rgba(255, 244, 212, 0.2),
    0 0 1.4rem var(--glow);
}

.mission-title {
  margin: 0.15rem 0 0;
  background: linear-gradient(180deg, var(--title-a) 5%, var(--title-b) 48%, var(--title-c) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--text);
  font-family: var(--display);
  font-size: clamp(1.32rem, 6.2vw, 1.62rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  text-transform: uppercase;
  text-wrap: balance;
}

.mission-count {
  margin: 0.28rem 0 0;
  color: var(--text-dim);
  font-family: var(--display);
  font-size: clamp(0.86rem, 3.5vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mission-name {
  margin: 0.3rem 0 0;
  color: var(--text-dim);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.95rem, 4vw, 1.08rem);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}

.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: min(9rem, 46%);
  margin: 0.5rem auto 0.75rem;
}

.rule span {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(217, 181, 109, 0.3) 25%, var(--accent));
}

.rule span:last-child {
  background: linear-gradient(90deg, var(--accent), rgba(217, 181, 109, 0.3) 75%, transparent);
}

.rule svg {
  width: 0.62rem;
  height: 0.62rem;
  flex: none;
  color: var(--accent-strong);
  filter: drop-shadow(0 0 5px var(--glow));
}

/* ---------- Mission body ---------- */

.mission-body {
  display: block;
}

.story {
  margin: 0 0 0.85rem;
  color: var(--text-dim);
  font-family: var(--display);
  font-size: clamp(1rem, 4.2vw, 1.1rem);
  font-style: italic;
  line-height: 1.4;
  text-align: center;
  text-wrap: pretty;
}

.brief {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 0.15rem;
  align-items: center;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  background: linear-gradient(180deg, var(--card-bg) 0%, var(--card-bg-2) 100%);
  box-shadow:
    0 0.9rem 1.8rem rgba(20, 3, 8, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

html[data-theme="night"] .brief {
  box-shadow:
    0 0.9rem 1.8rem rgba(0, 2, 6, 0.5),
    inset 0 1px 0 rgba(190, 222, 255, 0.12);
}

.brief__icon {
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--chip-text);
  box-shadow: inset 0 0 0 1px rgba(217, 181, 109, 0.36);
}

html[data-theme="night"] .brief__icon {
  box-shadow: inset 0 0 0 1px rgba(159, 220, 255, 0.3);
}

.brief__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.brief__title {
  grid-column: 2;
  margin: 0;
  color: var(--card-dim);
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.brief__task {
  grid-column: 2;
  margin: 0;
  color: var(--card-text);
  font-family: var(--display);
  font-size: clamp(1.02rem, 4.4vw, 1.16rem);
  font-weight: 500;
  line-height: 1.34;
  text-wrap: pretty;
}

/* ---------- Photo slot ---------- */

.shot {
  margin: 0.95rem 0 0;
}

.shot__frame {
  position: relative;
  aspect-ratio: 9 / 10;
  border: 1.5px solid var(--card-border);
  border-radius: 1rem;
  background: linear-gradient(158deg, #3a0c16 0%, #2a0710 50%, #1d050b 100%);
  box-shadow:
    0 0.9rem 1.8rem rgba(20, 3, 8, 0.4),
    inset 0 0 0 1px rgba(255, 244, 212, 0.08);
  overflow: hidden;
}

html[data-theme="night"] .shot__frame {
  background: linear-gradient(158deg, #17324f 0%, #0c1d31 50%, #060f1c 100%);
  box-shadow:
    0 0.9rem 1.8rem rgba(0, 2, 6, 0.5),
    inset 0 0 0 1px rgba(190, 222, 255, 0.1);
}

/* Four camera brackets, one pseudo-element, scaled with the frame. */
.shot__frame::before {
  content: "";
  position: absolute;
  inset: 0.6rem;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(var(--accent-strong), var(--accent-strong)) 0 0 / 1.5rem 1.5px no-repeat,
    linear-gradient(var(--accent-strong), var(--accent-strong)) 0 0 / 1.5px 1.5rem no-repeat,
    linear-gradient(var(--accent-strong), var(--accent-strong)) 100% 0 / 1.5rem 1.5px no-repeat,
    linear-gradient(var(--accent-strong), var(--accent-strong)) 100% 0 / 1.5px 1.5rem no-repeat,
    linear-gradient(var(--accent-strong), var(--accent-strong)) 0 100% / 1.5rem 1.5px no-repeat,
    linear-gradient(var(--accent-strong), var(--accent-strong)) 0 100% / 1.5px 1.5rem no-repeat,
    linear-gradient(var(--accent-strong), var(--accent-strong)) 100% 100% / 1.5rem 1.5px no-repeat,
    linear-gradient(var(--accent-strong), var(--accent-strong)) 100% 100% / 1.5px 1.5rem no-repeat;
  opacity: 0.85;
}

.shot__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  height: 100%;
  color: rgba(244, 226, 176, 0.66);
  background:
    radial-gradient(circle at 74% 22%, rgba(255, 226, 176, 0.34) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 24% 76%, rgba(255, 214, 148, 0.26) 0 2px, transparent 3.4px),
    radial-gradient(circle at 58% 44%, rgba(255, 226, 176, 0.18) 0 1.1px, transparent 2.1px),
    radial-gradient(78% 58% at 32% 18%, rgba(200, 120, 90, 0.26), transparent 64%);
}

html[data-theme="night"] .shot__placeholder {
  color: rgba(178, 208, 246, 0.62);
  background:
    radial-gradient(circle at 74% 22%, rgba(190, 224, 255, 0.35) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 24% 76%, rgba(170, 210, 250, 0.28) 0 1.8px, transparent 3.2px),
    radial-gradient(circle at 58% 44%, rgba(190, 224, 255, 0.18) 0 1px, transparent 2px),
    radial-gradient(78% 58% at 32% 18%, rgba(96, 154, 216, 0.28), transparent 64%);
}

.shot__icon {
  width: 2rem;
  height: 2rem;
  opacity: 0.7;
}

.shot__placeholder span {
  font-family: var(--body);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* The live preview and the captured frame fill the slot the same way, so what
   the guest frames is what the photo shows. */
.shot__video,
.shot__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A front camera is mirrored on screen; the capture is mirrored to match. A
   back camera is left alone, or the room would read backwards. */
.shot__frame[data-mirror="true"] .shot__video {
  transform: scaleX(-1);
}

/* Lens switch: only shown while previewing, and only when there is a second
   camera to switch to. */
.shot__flip {
  position: absolute;
  z-index: 3;
  top: 2.4rem;
  right: 0.9rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(6, 12, 22, 0.55);
  color: #ffffff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.35);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.shot__flip svg {
  width: 1.3rem;
  height: 1.3rem;
}

.shot__flip:hover {
  border-color: #ffffff;
  background: rgba(6, 12, 22, 0.78);
}

.shot__flip:active {
  transform: scale(0.94);
}

.shot__flip:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.shot__flip[disabled] {
  opacity: 0.55;
  pointer-events: none;
}

.shot__frame[data-state="live"] {
  border-color: var(--accent);
  box-shadow:
    0 0.9rem 1.8rem rgba(20, 3, 8, 0.4),
    0 0 1.4rem var(--glow);
}

html[data-theme="night"] .shot__frame[data-state="live"] {
  box-shadow:
    0 0.9rem 1.8rem rgba(0, 2, 6, 0.5),
    0 0 1.4rem var(--glow);
}

.shot__chip {
  position: absolute;
  z-index: 2;
  bottom: 0.85rem;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.34rem 0.85rem 0.34rem 0.7rem;
  border: 1px solid rgba(244, 226, 176, 0.45);
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-text);
  font-family: var(--display);
  font-size: clamp(0.82rem, 3.4vw, 0.92rem);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 0.35rem 0.9rem rgba(12, 1, 5, 0.45);
}

html[data-theme="night"] .shot__chip {
  border-color: rgba(159, 220, 255, 0.45);
}

.shot__chip svg {
  width: 0.82rem;
  height: 0.82rem;
  flex: none;
  color: var(--accent);
}

.shot__caption {
  margin: 0.6rem 0 0;
  text-align: center;
}

.shot__upload {
  display: block;
  color: var(--text-dim);
  font-family: var(--body);
  font-size: clamp(0.78rem, 3.2vw, 0.86rem);
  line-height: 1.4;
  text-wrap: pretty;
}

.shot__upload span {
  color: var(--accent-strong);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Camera status: permission problems, and the note after a photo is taken. */
.shot__status {
  display: block;
  margin-top: 0.35rem;
  color: var(--accent-strong);
  font-family: var(--body);
  font-size: clamp(0.76rem, 3.1vw, 0.84rem);
  line-height: 1.4;
  text-wrap: pretty;
}

.shot__status:empty {
  display: none;
}

/* ---------- Actions ---------- */

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 1rem;
}

/* A row with one button gives it the full width; a row with two splits it. */
.actions[data-count="1"] > .btn {
  grid-column: 1 / -1;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.55rem 0.6rem;
  border: 1.5px solid var(--btn-border);
  border-radius: 0.8rem;
  font-family: var(--display);
  font-size: clamp(1.02rem, 4.2vw, 1.15rem);
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.btn--ghost {
  background: var(--btn-bg);
  color: var(--btn-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0.3rem 0.8rem rgba(20, 3, 8, 0.3);
}

html[data-theme="night"] .btn--ghost {
  box-shadow:
    inset 0 1px 0 rgba(190, 222, 255, 0.14),
    0 0.3rem 0.8rem rgba(0, 2, 6, 0.45);
}

.btn--solid {
  background:
    radial-gradient(90% 150% at 50% 0%, rgba(255, 214, 148, 0.14), transparent 62%),
    var(--btn-solid-bg);
  color: var(--btn-solid-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 212, 0.16),
    0 0.45rem 1rem rgba(12, 1, 5, 0.4);
}

html[data-theme="night"] .btn--solid {
  background:
    radial-gradient(90% 150% at 50% 0%, rgba(120, 190, 250, 0.16), transparent 62%),
    var(--btn-solid-bg);
  box-shadow:
    inset 0 1px 0 rgba(190, 222, 255, 0.14),
    0 0.45rem 1rem rgba(0, 2, 6, 0.5);
}

.btn:hover {
  border-color: var(--accent-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0.5rem 1.2rem rgba(20, 3, 8, 0.4),
    0 0 1.1rem var(--glow);
}

.btn:active {
  transform: translateY(1px) scale(0.995);
}

/* Capture is disabled for the moment between the stream opening and the first
   video frame arriving. */
.btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.terms {
  margin: 0.7rem 0 0;
  color: var(--text-dim);
  font-size: clamp(0.72rem, 3vw, 0.8rem);
  line-height: 1.4;
  text-align: center;
  opacity: 0.85;
  text-wrap: pretty;
}

.terms__link {
  color: var(--accent-strong);
  font-weight: 600;
}

/* ---------- Mission complete ---------- */

/* The campaign's "Mission complete!" line: what finishing this chapter earns. */
.result {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 1.05rem 0 0;
  color: var(--text-dim);
  font-family: var(--display);
  font-size: clamp(0.98rem, 4.1vw, 1.08rem);
  line-height: 1.4;
  text-wrap: pretty;
}

.result svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  margin-top: 0.3rem;
  color: var(--accent-strong);
}

.result strong {
  color: var(--accent-strong);
  font-weight: 600;
}

/* ---------- Next chapter ---------- */

.next {
  margin-top: 1.25rem;
  padding: 0.85rem 0.9rem 0.9rem;
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 208, 138, 0.14) 0%, rgba(255, 208, 138, 0) 58%),
    linear-gradient(135deg, rgba(255, 244, 214, 0.07) 0%, rgba(255, 244, 214, 0.02) 100%);
}

html[data-theme="night"] .next {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(76, 138, 202, 0.28) 0%, rgba(76, 138, 202, 0) 58%),
    linear-gradient(135deg, rgba(12, 28, 51, 0.8) 0%, rgba(7, 18, 32, 0.8) 100%);
}

.next__title {
  margin: 0 0 0.22rem;
  color: var(--accent-strong);
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.next__text {
  margin: 0;
  color: var(--text);
  font-family: var(--display);
  font-size: clamp(1rem, 4.2vw, 1.1rem);
  line-height: 1.4;
  text-wrap: pretty;
}

.next__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  color: var(--accent-strong);
  font-family: var(--body);
  font-size: clamp(0.82rem, 3.4vw, 0.9rem);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 181, 109, 0.5);
  padding-bottom: 0.1rem;
  transition: border-color 180ms ease, color 180ms ease;
}

html[data-theme="night"] .next__link {
  border-bottom-color: rgba(159, 220, 255, 0.45);
}

.next__link:hover {
  color: #fff8e6;
  border-bottom-color: var(--accent-strong);
}

html[data-theme="night"] .next__link:hover {
  color: #f4fbff;
}

/* ---------- Focus ---------- */

.back:focus-visible,
.btn:focus-visible,
.next__link:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

/* ---------- Larger screens ---------- */

@media (min-width: 30rem) {
  .scene {
    width: calc(100% + var(--page-gutter) * 2 + 1rem);
    margin-left: calc(var(--page-gutter) * -1 - 0.5rem);
  }

  /* The band is narrower than a desktop viewport, so soften its side edges
     into the page instead of ending on a hard rectangle. */
  .scene__garland,
  html[data-theme="night"] .scene {
    -webkit-mask-image:
      linear-gradient(180deg, #000 0%, #000 82%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(180deg, #000 0%, #000 82%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-composite: intersect;
  }

  .back {
    left: calc(var(--page-gutter) * -1 - 0.5rem + 0.85rem);
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 22.5rem) {
  :root {
    --page-gutter: 0.8rem;
  }

  .back {
    width: 2.45rem;
    height: 2.45rem;
  }

  .brief {
    column-gap: 0.7rem;
    padding: 0.72rem 0.75rem;
  }

  .brief__icon {
    width: 2.35rem;
    height: 2.35rem;
  }

  .actions {
    gap: 0.45rem;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .back,
  .btn,
  .next__link,
  .shot__flip {
    transition: none;
  }

  .back:active,
  .btn:active,
  .shot__flip:active {
    transform: none;
  }
}