.jp-front { position: relative; isolation: isolate; container-type: inline-size; width: 100%; aspect-ratio: 3/2; overflow: hidden; color: #14324d; }
.jp-front * { box-sizing: border-box; }
.jp-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.jp-season { position: absolute; left: 8%; top: 40%; width: 84%; height: 40%; object-fit: cover; z-index: 1; }
.jp-route { position: absolute; left: 16%; top: 52%; width: 68%; height: 19%; z-index: 2; overflow: visible; }
.jp-road { stroke: #173b4f; stroke-width: 13; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.jp-mint { stroke: #a6ddbc; stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.jp-start, .jp-finish { fill: #fff8e8; stroke: #173b4f; stroke-width: 4; }
.jp-finish { fill: #a6ddbc; }
.jp-facts { position: absolute; z-index: 3; top: 24%; left: 7%; width: 86%; padding: 1cqw; background: #fff5dddc; }
.jp-cities { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 1.5cqw; font: 900 3.8cqw/1.04 Georgia, serif; text-transform: uppercase; }
.jp-cities strong { font: inherit; overflow-wrap: anywhere; }
.jp-cities strong:last-child { text-align: right; }
.jp-cities > span { color: #b30c3e; }
.jp-front .jp-meta { margin: 1.1cqw 0 0; font: 800 1.9cqw/1.2 system-ui,sans-serif; text-align: center; text-transform: uppercase; }
.jp-collected { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.jp-icons { position: absolute; inset: 0; }
.jp-icons img { position: absolute; display: block; width: 4.7cqw; height: 4.7cqw; object-fit: contain; transform: translate(-50%,-50%) rotate(var(--jp-tilt)); pointer-events: auto; }
.jp-custom { position: absolute; top: 87%; left: 21%; width: 58%; height: 10%; display: flex; flex-wrap: wrap; justify-content: center; align-content: start; gap: .6cqw; min-height: 0; overflow: auto; scrollbar-width: thin; font: 700 1.8cqw/1.25 Georgia,serif; pointer-events: auto; }
.jp-custom span { padding: .4cqw .8cqw; background: #fff6dce8; border: 1px solid #bca66f; border-radius: .5cqw; overflow-wrap: anywhere; max-width: 100%; }
.jp-custom:focus-visible { outline: 2px solid #0a3161; outline-offset: 2px; }
/* The completed postcard keeps the same appearance in every presentation. */
.jp-front .jp-facts { background: none; text-shadow: 0 1px 2px #fff4d4; }
.jp-front .jp-meta { font-size: 2.45cqw; font-weight: 900; letter-spacing: .025em; }
.jp-front .jp-custom span { padding: .1cqw .8cqw; border: .25cqw dashed #805632; border-radius: .3cqw; background: #fff2d4b8; color: #684426; text-transform: uppercase; letter-spacing: .04em; }
/* Approved values are loaded from postcard-layouts.json for both views. */
.jp-front :is(.jp-facts, .jp-cities) { display: contents; }
.jp-front :is(.jp-cities > *, .jp-meta) { position: absolute; z-index: 3; margin: 0; }
.jp-front .jp-icons img { transform: rotate(var(--jp-tilt)); }
.jp-front .jp-custom { top: 0; left: 0; width: 100%; height: 100%; padding: 58cqw 21% 0; overflow: visible; pointer-events: none; }
.jp-front .jp-custom span { pointer-events: auto; }
.jp-front .jp-custom span:nth-child(-n+2) { position: absolute; font-size: 1.8cqw; }
.promises-postcard-side.promises-journey-postcard-front.jp-host { display: block; padding: 0; min-height: 0; aspect-ratio: 3/2; }
/* The scrapbook stage has a bounded grid height. Fit the complete artwork
   inside that stage instead of making a full-width card that gets cropped. */
.promises-postcard-flip-stage:has(.jp-front) { container-type: size; display: grid; place-items: start center; }
.promises-postcard-flip-stage .promises-journey-postcard-front.jp-host { width: min(100%, 150cqh); height: auto; max-height: 100%; border: 0; }
.promises-postcard-record:has(.jp-front) .promises-postcard-record-header > p { display: none; }
.promises-collection-viewer-card:has(.jp-front) { height: calc(100dvh - 24px); min-height: 0; max-height: calc(100dvh - 24px); }
.promises-collection-viewer.is-postcards:has(.jp-front) { padding: 12px; }
.promises-collection-viewer-card:has(.jp-front) .promises-collection-viewer-header { padding: 12px 70px 12px 24px; }
.promises-collection-viewer-card:has(.jp-front) .promises-collection-viewer-header h2 { font-size: 24px; line-height: 1.1; }
.promises-collection-viewer-card:has(.jp-front) :is(.promises-kicker, .promises-collection-viewer-context) { display: none; }
.promises-postcard-record:has(.jp-front) { gap: 6px; }
.promises-postcard-record:has(.jp-front) .promises-postcard-record-header h3 { font-size: 18px; line-height: 1.2; }
.promises-postcard-record:has(.jp-front) .promises-postcard-side-status { margin: 0; font-size: 12px; line-height: 1.2; }
/* The completion presentation is viewport-sized, independent of the long game. */
html:has(#there-yet-arrival:not([hidden]) .jp-front) { overflow: hidden; }
#there-yet-arrival:has(.jp-front) { position: fixed; inset: 0; z-index: 1100; padding: 12px; overflow: auto; overscroll-behavior: contain; }
#there-yet-arrival:has(.jp-front) .there-yet-arrival-card { box-sizing: border-box; width: min(820px, 100%, calc((100dvh - 180px) * 1.5)); max-height: none; overflow: visible; padding: 12px; margin: 0; }
#there-yet-arrival .there-yet-arrival-card h2 { font-size: 28px; line-height: 1.1; margin: 0 0 8px; padding-right: 38px; }
#there-yet-arrival .there-yet-journey-postcard { width: 100%; margin: 0; }
#there-yet-arrival .there-yet-keepsake-actions { margin-top: 8px; padding-top: 8px; gap: 6px; }
#there-yet-arrival .there-yet-trip-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
#there-yet-arrival .game-action-button { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px; font-size: 12px; line-height: 1.2; text-align: center; }
#there-yet-arrival .there-yet-keepsake-note { font-size: 12px; line-height: 1.3; }
/* Completion-only fitting: preserve approved artwork boxes and saved content. */
#there-yet-arrival .jp-cities strong,
#there-yet-arrival .jp-meta {
  overflow-wrap: normal;
  word-break: normal;
  overflow: hidden;
}
#there-yet-arrival .jp-custom {
  top: 81%; left: 18%; width: 64%; height: 17%;
  padding: 1cqw;
  gap: 1.5cqw;
  overflow: auto;
}
#there-yet-arrival .jp-custom span {
  position: relative !important;
  left: auto !important; top: auto !important;
  width: auto !important; height: auto !important;
  max-width: calc(50% - 1.5cqw);
  padding: .45cqw .8cqw;
  flex: 0 1 auto;
  text-align: center;
}
@media (max-width: 900px) {
  #there-yet-arrival:has(.jp-front) { align-items: start; padding-top: max(10px, env(safe-area-inset-top)); }
}
@media (max-width: 600px) {
  #there-yet-arrival:has(.jp-front) { padding: max(8px, env(safe-area-inset-top)) 6px 8px; }
  #there-yet-arrival:has(.jp-front) .there-yet-arrival-card { width: min(100%, calc((100dvh - 190px) * 1.5)); padding: 8px; }
  #there-yet-arrival .there-yet-arrival-card h2 { font-size: 24px; margin-bottom: 6px; }
  #there-yet-arrival .there-yet-trip-actions { grid-template-columns: 1fr; gap: 6px; }
  #there-yet-arrival .game-action-button { min-height: 36px; padding: 7px; }
}