/* ---------- time-lapse scene ---------- */
.scene-wrap {
  border-radius: 8px; overflow: hidden; background: #0b1a3a;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
#scene { display: block; width: 100%; height: auto; }

.sign-t { font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: .06em; fill: #3b2a1a; }

.hud-time { font-family: var(--mono); font-size: 34px; font-weight: 500; fill: #fff; }
.hud-phase { font-family: var(--sans); font-size: 12.5px; fill: #fff; opacity: .78; }
.hud-label { font-family: var(--sans); font-size: 10.5px; letter-spacing: .12em; fill: #fff; opacity: .7; }
.hud-chamber { font-family: var(--mono); font-size: 22px; font-weight: 500; fill: #fff; }

/* cast */
.member .name { font-family: var(--sans); font-weight: 600; font-size: 12.5px; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 3px; stroke-linejoin: round; }
.member .state { font-family: var(--sans); font-size: 10.5px; fill: #fff; opacity: .85; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 3px; stroke-linejoin: round; }
.member .pct { font-family: var(--mono); font-weight: 500; font-size: 13px; fill: #fff; text-anchor: middle; }

.member .body-group { transform-origin: 0 0; }
.member.fuming .body-group { animation: shake .18s linear infinite; }
@keyframes shake {
  0% { transform: translate(-1.2px, 0) rotate(-.6deg); }
  50% { transform: translate(1.2px, 0) rotate(.6deg); }
  100% { transform: translate(-1.2px, 0) rotate(-.6deg); }
}
.steam { opacity: 0; }
.member.fuming .steam { animation: puff 1.1s ease-out infinite; }
.member.fuming .steam.s2 { animation-delay: .35s; }
.member.fuming .steam.s3 { animation-delay: .7s; }
@keyframes puff {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  25% { opacity: .9; }
  100% { opacity: 0; transform: translate(0, -34px) scale(1.4); }
}
.bird { animation: flap .5s ease-in-out infinite alternate; transform-origin: center; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }

/* controls */
.controls {
  display: flex; align-items: center; gap: 18px; margin: 18px 0 6px; flex-wrap: wrap;
}
.controls .play {
  min-width: 104px; height: 40px; border-radius: 20px; border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0 18px;
}
.controls .play:hover { background: #2a2a2a; }
.slider-wrap { flex: 1 1 320px; position: relative; padding-top: 18px; }
.slider-marks { position: absolute; top: 0; left: 0; right: 0; height: 16px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.slider-marks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
#scrub { width: 100%; margin: 0; accent-color: var(--accent); cursor: pointer; }
.controls label { font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.controls select { font: inherit; font-size: 13px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--axis); background: #fff; }
.backlink { margin: 22px 0 0; font-size: 14px; color: var(--ink-2); }

@media (max-width: 640px) {
  .card { padding: 24px 16px 24px; }
  .hud-time { font-size: 30px; }
}