/* Poster formats for social: exact pixel frame, no resampling. Safe areas:
   Reels 250px top / 430 bottom, TikTok 130 / 484, both ~140 clear on the right. */

body[data-format] {
  background: #05070a;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-format] #scene {
  position: static;
  width: var(--frame-w);
  height: var(--frame-h);
  flex: 0 0 auto;
}

body[data-format] #topbar,
body[data-format] #legend,
body[data-format] #timeline,
body[data-format] #viewctl {
  display: none;
}

body[data-format] #poster { display: flex; }

#poster {
  position: fixed;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: var(--frame-w);
  height: var(--frame-h);
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  pointer-events: none;
  color: #fff;
}

body[data-format="1x1"] { --frame-w: 1080px; --frame-h: 1080px; --safe-top: 56px; --safe-bottom: 56px; --safe-left: 56px; --safe-right: 56px; }
body[data-format="4x5"] { --frame-w: 1080px; --frame-h: 1350px; --safe-top: 64px; --safe-bottom: 72px; --safe-left: 60px; --safe-right: 60px; }
body[data-format="9x16"] { --frame-w: 1080px; --frame-h: 1920px; --safe-top: 250px; --safe-bottom: 440px; --safe-left: 60px; --safe-right: 150px; }

.poster-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }

.poster-title {
  font: 500 26px/1.25 "Inter", system-ui, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  max-width: 58%;
}

.poster-year {
  font: 250 132px/0.82 "Inter", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
  text-align: right;
}

.poster-count {
  display: block;
  margin-top: 10px;
  font: 400 22px/1.2 "Inter", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.68);
}

.poster-foot { display: flex; flex-direction: column; gap: 18px; }

/* One gradient strip with a few anchors, the convention in this genre, rather
   than a list of eight swatches that nobody reads on a phone. */
.ramp { height: 16px; width: 100%; }

.ramp-marks {
  display: flex;
  justify-content: space-between;
  font: 400 21px/1 "Inter", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.78);
}

.ramp-marks span:nth-child(2) { color: #fff; }

.poster-progress { height: 3px; width: 100%; background: rgba(255, 255, 255, 0.16); }
.poster-progress i { display: block; height: 100%; width: 0; background: #fff; }

.poster-credit {
  font: 400 18px/1.45 "Inter", system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.42);
}

body[data-format="9x16"] .poster-title { font-size: 30px; max-width: 100%; }
body[data-format="9x16"] .poster-head { flex-direction: column; align-items: flex-start; gap: 40px; }
body[data-format="9x16"] .poster-year { font-size: 168px; text-align: left; }
body[data-format="9x16"] .poster-count { font-size: 26px; }