@font-face {
  font-family: "Knewave Campaign";
  src: url("assets/master-creative-library/fonts/Knewave-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --brown: #4b1c13;
  --deep: #240e09;
  --green: #064629;
  --green-dark: #032d1b;
  --ivory: #fff2d2;
  --gold: #f4bf54;
  --muted: #e4cda5;
  color-scheme: dark;
}

html { background: var(--green-dark); }
body { background: radial-gradient(circle at 50% 45%, #155438, #032b19 72%); overflow-x: hidden; }
[hidden] { display: none !important; }
.campaign-shell { max-width: none; padding: 0; min-height: 100svh; }

/* Opening: the supplied masters remain intact and their action is a real button. */
.campaign-shell:not(.in-journey) .masthead,
.campaign-shell:not(.in-journey) .page-footer { display: none; }
.opening {
  display: grid;
  place-items: center;
  flex: 1;
  width: 100%;
  min-height: 100svh;
  max-height: none;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  background: radial-gradient(circle, #155638 0%, #052f1d 75%);
  box-shadow: none;
}
.master-stage {
  position: relative;
  width: min(100vw, 177.68svh);
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  box-shadow: 0 0 60px #001b0f7a;
}
.master-picture,
.master-picture img { display: block; width: 100%; height: 100%; }
.master-picture img { object-fit: fill; }
.master-start,
.master-terms {
  position: absolute;
  z-index: 2;
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.master-start { left: 65.5%; top: 83%; width: 25%; height: 8.2%; min-height: 44px; }
.master-terms { left: 91.7%; top: 89.5%; width: 8%; height: 6%; min-height: 36px; }
.master-start:hover,
.master-terms:hover { border-color: #ffe3a3; box-shadow: 0 0 20px #f2bd5d77; }
.master-start:focus-visible,
.master-terms:focus-visible { outline: 4px solid #fff; outline-offset: 2px; border-color: var(--gold); }

/* The journey is a responsive page layout built from independent campaign assets. */
.campaign-shell.in-journey { background: radial-gradient(circle at top, #185538, #073821 50%, #042d1b); }
.campaign-shell.in-journey .masthead {
  width: 100%;
  min-height: 84px;
  padding: 15px clamp(18px, 3vw, 48px);
  gap: 16px;
  background: #073b24;
  border-top: 12px solid transparent;
  border-bottom: 2px solid #dbab43;
  border-image: url("assets/master-creative-library/vectors/floral-border-tile.svg") 20 repeat;
}
.campaign-shell.in-journey .brand img { width: clamp(120px, 12vw, 174px); }
.campaign-shell.in-journey .header-caption { margin-left: auto; margin-right: 0; line-height: 0; }
.campaign-shell.in-journey .header-caption img { width: clamp(55px, 6vw, 78px); height: 50px; object-fit: contain; }
.campaign-shell.in-journey .guide-button { color: var(--ivory); font-weight: 700; font-size: 12px; }
.campaign-shell.in-journey .page-footer {
  padding-inline: clamp(20px, 4vw, 52px);
  border-top: 1px solid #d7a44b70;
  background: #062e1d;
  color: #f1d2a0;
}
.campaign-shell.in-journey .journey-screen {
  width: min(100%, 1360px);
  margin: 0 auto;
  padding: clamp(22px, 3vw, 42px) clamp(16px, 3.5vw, 52px) 55px;
}
.campaign-shell.in-journey .step-navigation { margin-bottom: 23px; }
.campaign-shell.in-journey .step-navigation li.current > span,
.campaign-shell.in-journey .step-navigation li.done > span { background: #aa3e16; border-color: var(--gold); }
.campaign-shell.in-journey .back-button { color: #ffe5ad; }
.campaign-shell.in-journey .dialog-eyebrow { color: #f3c15e; font-weight: 800; }
.campaign-shell.in-journey h2:not(#terms-title):not(#privacy-title):not(#guide-title):not(#camera-title) {
  font-family: "Knewave Campaign", Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.12;
  color: var(--ivory);
  text-shadow: 3px 4px 0 #4b1c13;
}
.campaign-shell.in-journey h2 em { color: #ffd47e; font-style: normal; }
.campaign-shell.in-journey .section-intro { color: #f0dcc0; }
.campaign-shell.in-journey .registration-layout { max-width: 1200px; grid-template-columns: .82fr 1.18fr; gap: clamp(22px, 4vw, 56px); }
.campaign-shell.in-journey .registration-art {
  min-height: 720px;
  padding: 0;
  border: 2px solid #d8a548;
  border-radius: 18px;
  background: #062e1d;
  box-shadow: 0 18px 44px #001b124a;
}
.campaign-shell.in-journey .registration-art:after { inset: 8px; border-color: #f4cf8055; border-radius: 10px; }
.campaign-shell.in-journey .registration-art > img { object-position: center 18%; }
.campaign-shell.in-journey .registration-art > div { background: linear-gradient(transparent, #032b1cea 48%, #032b1c); }
.campaign-shell.in-journey .registration-art h2 { color: #fff5d9; }
.campaign-shell.in-journey .registration-panel,
.campaign-shell.in-journey .pieces-panel {
  background: linear-gradient(#0d492d, #07351f);
  border: 2px solid #d5a54d;
  box-shadow: inset 0 0 0 5px #093c25, inset 0 0 0 6px #efd08655, 0 16px 36px #001c1255;
}
.campaign-shell.in-journey .registration-panel { padding: clamp(23px, 3vw, 38px); }
.campaign-shell.in-journey .field input,
.campaign-shell.in-journey .phone-field {
  min-height: 52px;
  background: #032d1d;
  border-color: #cfaa69;
  color: #fff6e2;
  border-radius: 8px;
}
.campaign-shell.in-journey .field input::placeholder { color: #c8b695; }
.campaign-shell.in-journey .field-note,
.campaign-shell.in-journey .session-note,
.campaign-shell.in-journey .consent-row { color: #ead4ae; }
.campaign-shell.in-journey .photo-preview { border-color: #e6bf72; background: #082b1c; }
.campaign-shell.in-journey .quiet-button { border-color: #e6bd71; color: #fff0c9; background: #113e27; }
.campaign-shell.in-journey .quiet-button:hover { background: #1a5837; }
.campaign-shell.in-journey .start-button {
  min-height: 58px;
  background: #781d0f;
  color: #fff4d9;
  border: 2px solid #f5c265;
  border-radius: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px #00180d55;
}
.campaign-shell.in-journey .start-button:hover { background: #9a2b13; }
.campaign-shell.in-journey .button-arrow { background: #9b3517; }
.campaign-shell.in-journey .start-button:disabled { opacity: .55; cursor: not-allowed; }
.campaign-shell.in-journey .choice-heading h2,
.campaign-shell.in-journey .game-heading h2 { font-size: clamp(34px, 4.4vw, 58px); }
.campaign-shell.in-journey .pattern-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.campaign-shell.in-journey .pattern-card { background: #11442b; border: 2px solid #d5a34c; border-radius: 14px; }
.campaign-shell.in-journey .pattern-card.selected { background: #1e5938; border-color: #ffe09c; box-shadow: 0 0 0 3px #ffe09c44; }
.campaign-shell.in-journey .pattern-art { background: #0d3725; border-color: #e0bd75; }
.campaign-shell.in-journey .pattern-copy strong { color: #fff2d5; }
.campaign-shell.in-journey .pattern-copy small { color: #d9c29d; }
.campaign-shell.in-journey .participant-chip { background: #0a3b25; border-color: #cba151; }
.campaign-shell.in-journey .board-shell { background: #103f29; border: 2px solid #d6a74c; box-shadow: inset 0 0 0 6px #0b3824; }
.campaign-shell.in-journey .placement-cell { background-color: #94180f; }
.campaign-shell.in-journey .placement-cell:not(:disabled):hover { background-color: #b32314; }
.campaign-shell.in-journey .pieces-panel { border-radius: 14px; }
.campaign-shell.in-journey .puzzle-piece { border-color: #d6aa62; }
.campaign-shell.in-journey .puzzle-piece.active-piece { border-color: #ffe29b; }
.campaign-shell.in-journey .completion-panel h3,
.campaign-shell.in-journey .tray-heading h3 { color: #fff1d0; }
.guide-dialog { background: #0a3e27; border-color: #e5b757; }
.guide-dialog .dialog-inner { background: #08371f; border-color: #e8bf6570; }
.guide-dialog h2 { font-family: "Knewave Campaign", Arial, sans-serif; font-weight: 400; }
.guide-dialog .dialog-action { background: #7b200e; color: #fff3d6; border: 2px solid #f0c366; border-radius: 12px; font-weight: 800; }
.keepsake-dialog { width: min(96vw, 650px); max-height: 95dvh; overflow: auto; color: #fff1d0; }
.keepsake-dialog .dialog-inner { padding: clamp(16px, 3vw, 28px); }
.keepsake-dialog h2 { margin: 4px 0 8px; }
.keepsake-status { margin: 0 0 12px; color: #e9cf99; }
.keepsake-dialog canvas { display: block; width: min(100%, 450px); height: auto; margin: 0 auto 16px; border: 1px solid #daa950; border-radius: 8px; }
.keepsake-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.keepsake-actions button { min-height: 48px; }
.completion-panel #choose-another { margin-top: 10px; }

@media (orientation: portrait) {
  .master-stage { width: min(100vw, 56.28svh); aspect-ratio: 941 / 1672; }
  .master-start { left: 29%; top: 90.5%; width: 42%; height: 5%; min-height: 44px; }
  .master-terms { left: 81.5%; top: 94.5%; width: 17%; height: 4%; min-height: 36px; }
}

/* A Full HD portrait kiosk is a portrait composition, even though it is wider than a phone. */
@media (orientation: portrait) and (min-width: 761px) {
  .campaign-shell.in-journey .journey-screen { width: min(100%, 990px); }
  .campaign-shell.in-journey .registration-layout {
    display: flex;
    flex-direction: column;
    max-width: 900px;
    gap: 24px;
  }
  .campaign-shell.in-journey .registration-art {
    min-height: 0;
    height: clamp(330px, 33svh, 560px);
  }
  .campaign-shell.in-journey .registration-art > img { object-position: center 22%; }
  .campaign-shell.in-journey .registration-art > div { padding-top: 70px; }
  .campaign-shell.in-journey .pattern-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .campaign-shell.in-journey .placement-layout {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  .campaign-shell.in-journey .board-shell { width: min(100%, 720px); margin-inline: auto; }
  .campaign-shell.in-journey .pieces-panel { width: 100%; }
  .campaign-shell.in-journey .piece-tray { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (orientation: landscape) and (min-width: 1500px) and (max-height: 1200px) {
  .campaign-shell.in-journey .masthead { min-height: 76px; padding-block: 10px; }
  .campaign-shell.in-journey .journey-screen { padding-top: 18px; padding-bottom: 0; }
  .campaign-shell.in-journey .step-navigation { margin-bottom: 14px; }
  .campaign-shell.in-journey .choice-section { max-width: 1000px; }
  .campaign-shell.in-journey .choice-heading { margin-bottom: 18px; }
  .campaign-shell.in-journey .pattern-grid { gap: 14px; }
  .campaign-shell.in-journey .pattern-copy { padding-block: 9px 6px; }
  .campaign-shell.in-journey .choice-bottom { margin-top: 16px; padding-top: 12px; }
  .campaign-shell.in-journey .game-section { max-width: 1100px; }
  .campaign-shell.in-journey .game-heading { margin-bottom: 18px; }
  .campaign-shell.in-journey .placement-layout { gap: 42px; }
}

@media (max-width: 760px) {
  .campaign-shell.in-journey .masthead { min-height: 70px; padding: 10px 15px; border-top-width: 9px; }
  .campaign-shell.in-journey .brand img { width: 122px; }
  .campaign-shell.in-journey .header-caption { display: block; margin-left: auto; margin-right: 0; }
  .campaign-shell.in-journey .header-caption img { width: 48px; height: 38px; }
  .campaign-shell.in-journey .guide-button { font-size: 10px; gap: 4px; padding-left: 0; }
  .campaign-shell.in-journey .guide-icon { width: 23px; height: 23px; }
  .campaign-shell.in-journey .journey-screen { padding: 18px 15px 40px; }
  .campaign-shell.in-journey .registration-layout { display: flex; flex-direction: column; gap: 0; }
  .campaign-shell.in-journey .registration-art {
    display: block;
    min-height: 210px;
    height: clamp(210px, 55vw, 285px);
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
  }
  .campaign-shell.in-journey .registration-art > img { object-position: center 13%; }
  .campaign-shell.in-journey .registration-art > div { padding: 70px 20px 16px; }
  .campaign-shell.in-journey .registration-art h2 { font-size: 25px; }
  .campaign-shell.in-journey .registration-art > div > p:last-child { display: none; }
  .campaign-shell.in-journey .registration-art .dialog-eyebrow { margin-bottom: 7px; }
  .campaign-shell.in-journey .registration-panel { padding: 24px 20px 28px; border-radius: 0 0 14px 14px; }
  .campaign-shell.in-journey .registration-panel h2 { font-size: clamp(32px, 9vw, 42px); }
  .campaign-shell.in-journey .pattern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .campaign-shell.in-journey .pattern-card { border-radius: 11px; }
  .campaign-shell.in-journey .pattern-copy strong { font-size: 11px; }
  .campaign-shell.in-journey .pattern-copy small { font-size: 9px; }
  .campaign-shell.in-journey .placement-layout { display: flex; flex-direction: column; }
  .campaign-shell.in-journey .board-shell,
  .campaign-shell.in-journey .pieces-panel { width: 100%; }
  .campaign-shell.in-journey .page-footer .preview-note { display: none; }
}

@media (max-width: 360px) {
  .campaign-shell.in-journey .masthead { gap: 5px; }
  .campaign-shell.in-journey .brand img { width: 106px; }
  .campaign-shell.in-journey .header-caption img { width: 42px; }
  .campaign-shell.in-journey .guide-button { font-size: 9px; }
  .campaign-shell.in-journey .registration-panel { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .opening *, .journey-screen * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Completed participant journey: six letter choices, celebration, personal card. */
.campaign-shell.in-journey .step-navigation ol { gap: clamp(10px, 2vw, 28px); }
.campaign-shell.in-journey .letter-pattern-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campaign-shell.in-journey .pattern-number {
  font: 400 clamp(24px, 3vw, 38px)/1 "Knewave Campaign", Arial, sans-serif;
  color: #ffd47e;
  min-width: 1em;
}
.campaign-shell.in-journey .signature-pattern {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 12px;
  max-width: 580px;
}
.signature-pattern .pattern-art { width: 104px; flex: 0 0 104px; }
.signature-pattern .pattern-copy { padding: 0; }
.signature-pattern .pattern-copy strong { margin-block: 8px; font-size: 17px; }
.signature-pattern .pattern-check { width: 24px; height: 24px; top: 6px; right: 6px; }
.celebration-section, .keepsake-section { max-width: 1120px; margin-inline: auto; }
.celebration-layout, .keepsake-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.film-frame, .keepsake-display { margin: 0; min-width: 0; text-align: center; }
.film-frame video {
  display: block;
  width: 100%;
  max-height: 74svh;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #032619;
  border: 2px solid #d7a64d;
  border-radius: 16px;
  box-shadow: 0 18px 48px #001b1266;
}
.film-frame figcaption, .keepsake-display figcaption { color: #d9c49f; font-size: 11px; line-height: 1.7; padding-top: 12px; }
.celebration-copy h2, .keepsake-copy h2 { font-size: clamp(38px, 4.4vw, 64px); text-wrap: balance; }
.celebration-copy .section-intro, .keepsake-copy .section-intro { max-width: 42ch; }
.completed-design { display: flex; gap: 18px; align-items: center; margin-block: 28px; padding-block: 20px; border-block: 1px solid #deb45c66; }
.completed-design img { width: 100px; height: 100px; border-radius: 9px; border: 1px solid #e0b35e; }
.completed-design span, .delivery-number > span { display: block; font-size: 10px; letter-spacing: .12em; color: #e7bf73; }
.completed-design strong { display: block; font-size: 18px; margin-block: 8px; color: #fff1d0; }
.completed-design p { font-size: 11px; line-height: 1.7; color: #e4cda5; }
.journey-slogan { display: block; width: min(100%, 360px); height: auto; margin-block: 24px; }
.film-note { font-size: 11px; line-height: 1.8; max-width: 45ch; color: #e4cda5; }
.celebration-actions, .keepsake-end-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 20px; }
.celebration-actions .start-button, .keepsake-end-actions .start-button { margin: 0; width: min(100%, 370px); font-size: 12px; }
.text-photo:focus-visible, .back-button:focus-visible, .quiet-button:focus-visible { outline: 3px solid #ffe09c; outline-offset: 4px; }
.campaign-shell.in-journey button:active:not(:disabled) { transform: translateY(1px); }
.keepsake-display { padding: 13px; background: #052d1c; border: 1px solid #d7a64d; border-radius: 15px; box-shadow: 0 18px 48px #001b1255; }
.keepsake-display canvas { display: block; width: 100%; height: auto; max-height: 74svh; object-fit: contain; border-radius: 7px; }
.keepsake-loading { display: grid; align-content: center; justify-items: center; aspect-ratio: 3 / 4; color: #f3d799; background: radial-gradient(circle, #1b5838, #06311f); border-radius: 7px; }
.keepsake-loading > span { font-size: 54px; margin-bottom: 18px; }
.keepsake-loading > p { font-size: 13px; padding-inline: 16px; }
.keepsake-copy .keepsake-status { margin-block: 18px 24px; font-size: 13px; }
.whatsapp-panel { border-block: 1px solid #dfb45c77; padding-block: 24px; }
.delivery-heading { display: flex; align-items: center; gap: 14px; }
.delivery-symbol { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border: 1px solid #e3be77; border-radius: 50%; font-size: 24px; color: #f8d891; }
.delivery-heading h3 { color: #fff2d2; font-size: 22px; line-height: 1.3; font-weight: 600; }
.whatsapp-panel > p:not(.field-note) { font-size: 13px; line-height: 1.8; color: #ead8b7; margin-top: 15px; }
.delivery-number { background: #052f1d; border-left: 2px solid #efbc5e; padding: 14px 18px; margin-top: 18px; }
.delivery-number strong { display: block; color: #fff0cd; font-size: 23px; font-variant-numeric: tabular-nums; margin-top: 7px; letter-spacing: .04em; }
.whatsapp-panel .delivery-state { font-weight: 600; color: #f6d791; }
.keepsake-end-actions + .field-note { margin-top: 20px; max-width: 46ch; }
@media (orientation: landscape) and (min-width: 1500px) and (max-height: 1200px) {
  .campaign-shell.in-journey .choice-section { max-width: 1300px; }
  .campaign-shell.in-journey .letter-pattern-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .campaign-shell.in-journey .letter-pattern-grid .pattern-copy { display: block; }
  .campaign-shell.in-journey .letter-pattern-grid .pattern-number { display: block; margin-bottom: 8px; }
  .campaign-shell.in-journey .signature-pattern { margin-top: 24px; }
}
@media (orientation: portrait) {
  .celebration-layout, .keepsake-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .film-frame { width: min(100%, 480px); margin-inline: auto; }
  .film-frame video { max-height: 47svh; }
  .keepsake-display { width: min(100%, 680px); margin-inline: auto; }
  .keepsake-display canvas { max-height: 57svh; }
  .celebration-copy, .keepsake-copy { width: min(100%, 680px); margin-inline: auto; }
}
@media (max-width: 760px) {
  .campaign-shell.in-journey .step-navigation { flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
  .campaign-shell.in-journey .step-navigation ol { gap: 9px; margin-left: auto; }
  .campaign-shell.in-journey .step-navigation li { font-size: 8px; }
  .campaign-shell.in-journey .letter-pattern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaign-shell.in-journey .pattern-number { font-size: 28px; }
  .campaign-shell.in-journey .signature-pattern { gap: 12px; padding: 9px; }
  .signature-pattern .pattern-art { width: 82px; flex-basis: 82px; }
  .signature-pattern .pattern-copy strong { font-size: 14px; }
  .signature-pattern .pattern-copy small { font-size: 9px; }
  .celebration-layout, .keepsake-layout { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .film-frame { width: min(100%, 330px); }
  .film-frame video { max-height: 59svh; }
  .keepsake-display canvas { max-height: none; }
  .celebration-copy h2, .keepsake-copy h2 { font-size: clamp(35px, 10vw, 52px); }
  .completed-design { margin-block: 22px; padding-block: 16px; }
  .completed-design img { width: 80px; height: 80px; }
  .completed-design strong { font-size: 15px; }
  .delivery-heading h3 { font-size: 20px; }
  .celebration-actions .start-button, .keepsake-end-actions .start-button { width: 100%; }
}
@media (orientation: portrait) and (min-width: 761px) {
  .keepsake-display { width: min(100%, 580px); }
  .keepsake-layout { gap: 24px; }
}
/* Keep source pieces and the board within reach on a phone. */
.puzzle-piece { touch-action: none; user-select: none; cursor: grab; }
.puzzle-piece:active:not(:disabled) { cursor: grabbing; }
.puzzle-drag-ghost, .puzzle-coach {
  position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none;
  background-size: 300% 300%; border: 2px solid #ffe09c; border-radius: 8px;
  box-shadow: 0 8px 24px #001b12aa; opacity: .94;
}
.puzzle-coach { opacity: 0; }
.coach-hand { position: absolute; width: 36px; height: 42px; bottom: -22px; right: -15px; color: #ffe09c; filter: drop-shadow(0 2px 3px #001b12); }
.coach-hand svg { width: 100%; height: 100%; }
.hint-preview { position: absolute; inset: 0; background-size: 300% 300%; opacity: .3; pointer-events: none; }
.campaign-shell.in-journey .hint-piece, .campaign-shell.in-journey .hint-cell,
.coach-origin, .coach-destination { outline: 3px solid #ffe09c; outline-offset: -3px; animation: puzzle-glow 1.6s ease-in-out infinite; }
.campaign-shell.in-journey .drop-target { outline: 4px solid #fff1ba; outline-offset: -4px; }
@keyframes puzzle-glow { 50% { box-shadow: inset 0 0 0 3px #ffe09c, 0 0 15px #ffe09c99; } }
@media (max-width: 760px) {
  .campaign-shell.in-journey .game-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 12px; align-items: center; }
  .campaign-shell.in-journey .game-heading h2 { font-size: 27px; }
  .game-heading .dialog-eyebrow { display: none; }
  .game-heading .section-intro { margin-top: 5px; font-size: 11px; line-height: 1.5; }
  .game-heading .quiet-button { width: 85px; padding: 6px; margin: 0; font-size: 9px; }
  .campaign-shell.in-journey .placement-layout { gap: 12px; align-items: center; }
  .campaign-shell.in-journey .board-shell { width: min(100%, 244px); padding: 8px; border-radius: 10px; }
  .board-legend { margin-top: 8px; }
  .campaign-shell.in-journey .pieces-panel { padding: 12px; }
  .tray-heading { margin-bottom: 8px; }
  .tray-heading h3 { font-size: 18px; }
  .tray-heading > span { font-size: 10px; }
  .piece-tray { width: min(100%, 220px); margin-inline: auto; gap: 7px; }
  .placement-status { margin-top: 9px; min-height: 34px; line-height: 1.5; }
  .puzzle-tools { margin-top: 6px; }
  .puzzle-tools > button { padding: 8px; }
}
@media (max-width: 380px) {
  .campaign-shell.in-journey .board-shell { width: 220px; }
  .piece-tray { width: 196px; }
}
/* Wide landscape screens use a responsive board and tray instead of phone sizing. */
@media (orientation: landscape) and (min-width: 1500px) and (max-height: 1200px) {
  .campaign-shell.in-journey .game-section { max-width: min(94vw, 1680px); }
  .campaign-shell.in-journey .placement-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }
  .campaign-shell.in-journey .board-shell {
    width: min(100%, min(68svh, 760px));
    justify-self: center;
  }
  .campaign-shell.in-journey .pieces-panel { width: 100%; }
  .campaign-shell.in-journey .pieces-panel:has(.completion-panel:not([hidden])) :is(.tray-heading, .piece-tray, .placement-status, .puzzle-tools) { display: none; }
  .campaign-shell.in-journey .pieces-panel:has(.completion-panel:not([hidden])) .completion-panel { margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hint-piece, .hint-cell, .coach-origin, .coach-destination { animation: none !important; }
}

/* Phone journey: natural page scrolling, readable fields and reachable actions. */
.campaign-shell.in-journey .field input[aria-invalid="true"] { border-color: #ffb9a2; }
@media (max-width: 760px) {
  .campaign-shell.in-journey .journey-screen { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .campaign-shell.in-journey .registration-art { min-height: 0; height: auto; aspect-ratio: 1672 / 941; }
  .campaign-shell.in-journey .registration-art > div { display: none; }
  .campaign-shell.in-journey .registration-panel { padding-block: 20px 24px; }
  .campaign-shell.in-journey .registration-panel h2 { font-size: 28px; }
  .campaign-shell.in-journey .field input { font-size: 16px; scroll-margin-block: 16px; }
  .registration-panel .section-intro { font-size: 14px; line-height: 1.5; }
  .registration-panel .field > label, .photo-heading > label { font-size: 14px; }
  .registration-panel .field-note, .registration-panel .session-note { font-size: 12px; line-height: 1.5; }
  .registration-panel .consent-row { font-size: 13px; line-height: 1.6; padding-block: 8px; min-height: 44px; }
  .registration-panel .form-error { font-size: 13px; color: #ffd1bf; line-height: 1.5; }
  .campaign-shell.in-journey .text-photo, .campaign-shell.in-journey .inline-link { min-height: 44px; }
  .registration-panel .inline-link { display: inline-flex; align-items: center; }
  .campaign-shell.in-journey .photo-heading > span { font-size: 11px; }
  .campaign-shell.in-journey .choice-bottom { position: sticky; bottom: 0; z-index: 2; background: #073821; padding: 12px 8px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 18px #03261988; border-radius: 12px; }
  .campaign-shell.in-journey .pattern-copy strong { font-size: 13px; }
  .campaign-shell.in-journey .pattern-copy small { font-size: 11px; }
  .campaign-shell.in-journey .game-heading .quiet-button { min-height: 44px; }
  .campaign-shell.in-journey .film-frame video { max-height: 52svh; }
  .celebration-copy h2, .keepsake-copy h2 { font-size: 30px; }
  .celebration-copy .section-intro, .keepsake-copy .section-intro { font-size: 14px; line-height: 1.6; }
  .celebration-copy .completed-design, .celebration-copy .journey-slogan, .celebration-copy .film-note { display: none; }
  .celebration-copy .dialog-eyebrow, .keepsake-copy .dialog-eyebrow { display: none; }
  .campaign-shell.in-journey .keepsake-display { width: min(100%, 300px); }
  .keepsake-end-actions + .field-note, .whatsapp-panel .field-note { font-size: 12px; line-height: 1.5; }
  .app-toast { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .guide-dialog { max-height: calc(100dvh - 24px); }
}

/* Preserve the whole shrine and Alpona in portrait, rather than cropping a tall poster. */
.registration-art > picture { position: absolute; inset: 0; display: block; }
.registration-art > picture > img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
@media (orientation: portrait) {
  .campaign-shell.in-journey .registration-art { min-height: 0; height: auto; aspect-ratio: 1672 / 941; }
  .registration-art > picture > img { object-fit: contain; object-position: center; }
  .registration-art > picture::after { content: ''; position: absolute; left: 63%; right: 4%; top: 8%; bottom: 35%; background: url("assets/master-creative-library/transparent/title-shield-reconstructed.png") center / contain no-repeat; }
  .campaign-shell.in-journey .registration-art > div { display: none; }
  .camera-dialog { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; padding: 8px; border-radius: 0; }
  .camera-dialog .dialog-inner { height: 100%; display: flex; flex-direction: column; padding: clamp(22px, 3vw, 40px); }
  .camera-dialog .dialog-eyebrow { margin-bottom: 12px; }
  .camera-dialog h2 { font-size: clamp(30px, 4vw, 52px); }
  .camera-dialog .camera-view { flex: 1; min-height: 0; aspect-ratio: auto; margin-top: 18px; }
  .camera-dialog .camera-view video { object-fit: contain; }
  .camera-dialog .camera-status { font-size: clamp(12px, 1.5vw, 18px); }
  .camera-dialog .camera-actions button { min-height: 48px; font-size: clamp(14px, 1.6vw, 20px); }
}
@media (orientation: portrait) and (min-width: 761px) {
  .campaign-shell.in-journey .journey-screen:has(#participant-form) { display: flex; flex-direction: column; }
  .campaign-shell.in-journey .registration-layout { flex: 1; width: 100%; margin: 0 auto; }
  .campaign-shell.in-journey .registration-panel { flex: 1; display: flex; flex-direction: column; }
  .registration-panel form { flex: 1; display: flex; flex-direction: column; }
  .registration-panel .form-submit { margin-top: auto; }
  .registration-panel .field > label, .registration-panel .photo-heading > label { font-size: 18px; }
  .campaign-shell.in-journey .registration-panel .field input { min-height: 64px; font-size: 20px; }
  .registration-panel .section-intro, .registration-panel .consent-row { font-size: 18px; }
  .registration-panel .field-note, .registration-panel .session-note { font-size: 16px; }
  .registration-panel .photo-heading > span { font-size: 14px; }
  .registration-panel .quiet-button, .registration-panel .text-photo, .registration-panel .form-submit { font-size: 16px; }
  .registration-panel .photo-preview { width: 104px; height: 104px; }
}

/* White Alpona puzzle: visible guide and generous touch targets. */
.campaign-shell.in-journey .placement-cell,.campaign-shell.in-journey .placement-cell:not(:disabled):hover {background-color:#321a12;}
.board-preview {position:absolute;inset:0;background-size:300% 300%;opacity:.22;pointer-events:none;}
.placement-cell.placed .board-preview {display:none;}
.placement-cell .cell-number {position:relative;z-index:1;}
.artwork-celebration {margin:0;text-align:center;}
.artwork-celebration img {display:block;width:100%;max-width:600px;margin:auto;border-radius:16px;animation:copy-enter .8s ease both;}
.artwork-celebration video {display:block;width:min(100%,450px,40.5svh);aspect-ratio:9/16;margin:auto;border-radius:16px;background:#351709;}
.artwork-celebration figcaption {margin-top:12px;color:var(--gold);font-size:14px;}
@media(prefers-reduced-motion:reduce){.artwork-celebration img{animation:none;}}

/* Carry the shrine into the unused side gutters on wide landscape displays. */
@media (orientation: landscape) and (min-width: 1800px) and (min-height: 800px) {
  .campaign-shell.in-journey .journey-screen { position: relative; }
  .campaign-shell.in-journey .journey-screen::before,
  .campaign-shell.in-journey .journey-screen::after {
    content: "";
    position: absolute;
    top: 70px;
    width: 11vw;
    height: min(76svh, 820px);
    background: url("assets/master-creative-library/transparent/carved-side-pillar-reconstructed.png") center bottom / auto 100% no-repeat;
    opacity: .55;
    pointer-events: none;
  }
  .campaign-shell.in-journey .journey-screen::before { right: 100%; }
  .campaign-shell.in-journey .journey-screen::after { left: 100%; transform: scaleX(-1); }
}