/* A small, opt-in joke in the margin. Nothing moves before a click. */
.portrait-frame { position: relative; aspect-ratio: auto; }
.portrait-button { display: block; position: relative; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 2px; background: none; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.portrait-craft { display: block; position: relative; width: 100%; height: 100%; transform-origin: 50% 50%; }
.portrait-craft .portrait { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait-button:focus-visible, .portrait-reset:focus-visible { outline: 2px solid var(--accent, #a0c79a); outline-offset: 6px; }
.portrait-hint { display: flex; align-items: start; gap: 0.25rem; width: 145px; margin: 0.65rem 0 0 calc(100% - 145px); color: var(--muted, #a7a7a0); font: 400 0.625rem/1.5 var(--font-label, monospace); }
.portrait-hint svg { flex: 0 0 22px; width: 22px; height: 26px; margin-top: -2px; fill: none; stroke: currentColor; stroke-width: 1; }
.portrait-hint span { max-width: 110px; }
.portrait-status { position: absolute; top: 24px; left: 0; right: 0; margin: 0; color: var(--muted, #a7a7a0); text-align: center; font: 400 0.7rem/1.6 var(--font-label, monospace); }
.portrait-status:empty { display: none; }
.portrait-reset { position: absolute; top: 90px; left: 0; width: 100%; min-height: 44px; padding: 0.25rem 0; border: 0; background: none; color: var(--accent, #a0c79a); cursor: pointer; font: 400 0.65rem/1.5 var(--font-label, monospace); text-decoration: underline; text-underline-offset: 4px; }
.portrait-reset[hidden] { display: none; }
.portrait-frame[data-portrait-state="arming"] .portrait-hint,
.portrait-frame[data-portrait-state="launching"] .portrait-hint,
.portrait-frame[data-portrait-state="away"] .portrait-hint { visibility: hidden; }
.portrait-frame[data-portrait-state="arming"] .portrait-reset,
.portrait-frame[data-portrait-state="launching"] .portrait-reset { top: calc(100% - 44px); }
.portrait-effects { position: fixed; inset: 0; z-index: 100; overflow: hidden; pointer-events: none; contain: strict; }
.portrait-spark { position: absolute; width: 3px; height: 3px; background: var(--accent, #a0c79a); }
.portrait-spark-bone { background: var(--text, #ecece6); }
.portrait-flight { position: absolute; display: block; isolation: isolate; transform-origin: 50% 50%; }
.portrait-flight > img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: 2px; object-fit: cover; object-position: 22% center; }
.portrait-boosters { position: absolute; z-index: 0; top: 36%; left: -17%; width: 134%; height: 96%; overflow: visible; transform-origin: 50% 0; }
.portrait-booster-flame { transform-origin: 50% 66%; }
@media (max-width: 460px) {
  .portrait-hint { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .portrait-craft { transform: none; }
  .portrait-spark, .portrait-flight { display: none; }
}