/* The pose tracker (stage/posetrack.js): one little picture per photo of a
   set. States are classes and read by colour and shape alone: pending is
   grey and faint (or a white shape, or a dark silhouette), current is the
   one being shot now, done is full colour, the badge is the print. 0.18:
   every moment has flavours keyed on data-* of #pose-track (lists in
   stage/posetrack-motion.js), scaled by --fx-amp from data-intensity. With every
   animation removed (reduced motion, #stage[data-still], intensity none)
   nothing is lost. Never on the photo.
   0.18: .pt-mini is the same row drawn small in the drawer (stage/posetrack-mini.js), inside .pt-screen. Timings follow docs/VFX-NOTES.md
   section 2; the arrive and leave totals are mirrored in posetrack-motion.js. */

:is(#pose-track, .pt-mini) {
  --fx-amp: .55; --dx: -1; --dy: 0;  /* timing and easing tokens: theme.css :root */
  --shade: drop-shadow(0 .15vh 0 rgba(0, 0, 0, .35)) drop-shadow(0 .9vh 1.2vh rgba(0, 0, 0, .32));  /* X1: contact + cast */
  position: absolute; margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: calc(var(--pose-size, 9vh) * .22);
  left: var(--pt-edge, 3vh); bottom: var(--pt-edge, 3vh); pointer-events: none;
}
:is(#pose-track, .pt-mini)[data-intensity="lively"] { --fx-amp: 1; }
:is(#pose-track, .pt-mini)[data-intensity="none"] { --fx-amp: 0; }
:is(#pose-track, .pt-mini)[data-corner="bottom-right"] { left: auto; right: var(--pt-edge, 3vh); --dx: 1; }
:is(#pose-track, .pt-mini)[data-corner="top-left"] { bottom: auto; top: var(--pt-edge, 3vh); }
:is(#pose-track, .pt-mini)[data-corner="top-right"] { left: auto; right: var(--pt-edge, 3vh); bottom: auto; top: var(--pt-edge, 3vh); --dx: 1; }
:is(#pose-track, .pt-mini)[data-corner="bottom"] { left: 50%; translate: -50% 0; --dx: 0; --dy: 1; }
:is(#pose-track, .pt-mini)[data-corner="top"] { left: 50%; translate: -50% 0; bottom: auto; top: var(--pt-edge, 3vh); --dx: 0; --dy: -1; }
:is(#pose-track, .pt-mini) li { position: relative; width: var(--pose-size, 9vh); height: var(--pose-size, 9vh); display: flex; align-items: center; justify-content: center; }
:is(#pose-track, .pt-mini) img, :is(#pose-track, .pt-mini) canvas { width: 100%; height: 100%; object-fit: contain; filter: var(--shade); }
:is(#pose-track, .pt-mini) li[data-thumb] canvas { border-radius: 14%; border: .4vh solid #fff; box-sizing: border-box; }
:is(#pose-track, .pt-mini) .fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: 50%; }
:is(#pose-track, .pt-mini) li[data-thumb] .fx { border-radius: 14%; }

/* 'plain': numbered circles, no files. */
:is(#pose-track, .pt-mini) { counter-reset: pose; }
:is(#pose-track, .pt-mini) li:not(.badge) { counter-increment: pose; }
:is(#pose-track, .pt-mini) li[data-plain]::before {
  content: counter(pose); display: flex; align-items: center; justify-content: center; width: 86%; height: 86%; border-radius: 50%;
  background: #fff; color: #111; border: .45vh solid #111; box-sizing: border-box; font-weight: 800; font-size: calc(var(--pose-size, 9vh) * .46); line-height: 1;
  font-variant-numeric: tabular-nums;
}
:is(#pose-track, .pt-mini) li.badge[data-plain]::before { content: "\2713"; background: #FFE14D; }
:is(#pose-track, .pt-mini) li[data-plain] .fx { inset: 7%; }

/* Waiting: pending, and current when current is 'none'. Every flavour keeps the drawing's line work:
   a waiting picture is still the picture, never a flat silhouette. */
:is(#pose-track, .pt-mini) li.pending, :is(#pose-track, .pt-mini) li.current { filter: grayscale(1); opacity: .4; }
:is(#pose-track, .pt-mini)[data-pending="outline"] :is(li.pending, li.current) { filter: grayscale(1); opacity: .7; }
:is(#pose-track, .pt-mini)[data-pending="outline"] :is(li.pending, [data-current="none"] li.current) :is(img, canvas) {
  filter: contrast(1.15) drop-shadow(.3vh 0 0 #fff) drop-shadow(-.3vh 0 0 #fff) drop-shadow(0 .3vh 0 #fff) drop-shadow(0 -.3vh 0 #fff) var(--shade);
}
:is(#pose-track, .pt-mini)[data-pending="outline"] :is(li.pending, li.current)[data-plain]::before { background: rgba(255, 255, 255, .5); border-color: #fff; }
:is(#pose-track, .pt-mini)[data-pending="dark"] :is(li.pending, li.current) { filter: grayscale(1) brightness(.5) contrast(1.2); opacity: .8; }
:is(#pose-track, .pt-mini)[data-pending="dark"] :is(li.pending, [data-current="none"] li.current) :is(img, canvas) { filter: drop-shadow(0 0 .2vh rgba(255, 255, 255, .8)) var(--shade); }
:is(#pose-track, .pt-mini)[data-pending="dark"] :is(li.pending, li.current)[data-plain]::before { background: #333; color: #ddd; border-color: #ddd; }
:is(#pose-track, .pt-mini)[data-pending="breathe"] li.pending { animation: pt-breathe-op calc(3.2s + var(--i) * 370ms) ease-in-out calc(var(--i) * -900ms) infinite alternate; }
@keyframes pt-breathe-op { from { opacity: .3; } to { opacity: .5; } }

/* Current: the one being shot now. */
:is(#pose-track, .pt-mini)[data-current="lift"] li.current { filter: grayscale(.35); opacity: .9; scale: calc(1 + .22 * var(--fx-amp)); translate: 0 calc(-1.2vh * var(--fx-amp)); transition: scale var(--t-3) var(--e-out), translate var(--t-3) var(--e-out); }
:is(#pose-track, .pt-mini)[data-current="pulse"] li.current { filter: grayscale(.2); opacity: .85; animation: pt-heart 1.1s var(--e-out) infinite; }
:is(#pose-track, .pt-mini)[data-current="ring"] li.current { filter: grayscale(.4); opacity: .9; }
:is(#pose-track, .pt-mini)[data-current="ring"] li.current .fx { border: .35vh dashed #fff; inset: -14%; animation: pt-turn 9s linear infinite; }
:is(#pose-track, .pt-mini)[data-current="spot"] li.current { filter: grayscale(.2); opacity: .95; }
:is(#pose-track, .pt-mini)[data-current="spot"] li.current::after {
  content: ""; position: absolute; inset: -30% -30% -45%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 250, 225, .6), rgba(255, 250, 225, 0)); animation: pt-spot 2.4s ease-in-out infinite alternate;
}
:is(#pose-track, .pt-mini)[data-current="bob"] li.current { filter: grayscale(.3); opacity: .85; animation: pt-bob 1.6s ease-in-out infinite alternate; }
@keyframes pt-heart { 0%, 60%, 100% { scale: 1; } 15% { scale: calc(1 + .16 * var(--fx-amp)); } 32% { scale: calc(1 + .06 * var(--fx-amp)); } }
@keyframes pt-turn { to { rotate: 1turn; } }
@keyframes pt-spot { from { opacity: .7; scale: .94; } to { opacity: 1; scale: 1.04; } }
@keyframes pt-bob { from { translate: 0 0; } to { translate: 0 calc(-1.4vh * var(--fx-amp)); } }

/* Done: full colour, and its life afterwards (on the picture, so the li is free for the taken moment). */
:is(#pose-track, .pt-mini) li.done { filter: none; opacity: 1; }
:is(#pose-track, .pt-mini)[data-done="float"] li.done:not([data-plain]):not([data-thumb])::after {
  content: ""; position: absolute; inset: -12%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 244, 200, .55), rgba(255, 244, 200, 0));
}
:is(#pose-track, .pt-mini)[data-done="float"] li.done > :is(img, canvas), :is(#pose-track, .pt-mini)[data-done="float"] li.done[data-plain]::before { animation: pt-float 3s ease-in-out calc(var(--i) * -700ms) infinite; }
:is(#pose-track, .pt-mini)[data-done="breathe"] li.done > :is(img, canvas), :is(#pose-track, .pt-mini)[data-done="breathe"] li.done[data-plain]::before { animation: pt-breathe calc(4s + var(--i) * 370ms) ease-in-out calc(var(--i) * -1.3s) infinite alternate; }
:is(#pose-track, .pt-mini)[data-done="drift"] li.done > :is(img, canvas) { animation: pt-drift calc(5s + var(--i) * 450ms) ease-in-out calc(var(--i) * -1.7s) infinite alternate; }
:is(#pose-track, .pt-mini)[data-done="shine"] li.done .fx {
  mask: var(--mask, none) center / contain no-repeat; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .75) 50%, transparent 58%) 150% 0 / 300% 100% no-repeat;
  animation: pt-glint 9s linear calc(var(--i) * 1.4s) infinite;
}
/* S3 connector draw: the line on to the next slot draws itself left to right
   and stays drawn, so with every animation removed the row still reads as a
   chain of photos taken. The last one draws on to the badge once it is up. */
:is(#pose-track, .pt-mini)[data-done="connect"] li.done:has(+ li:not([hidden]))::after {
  content: ""; position: absolute; left: 100%; top: 50%; z-index: -1;
  width: calc(var(--pose-size, 9vh) * .22); height: calc(var(--pose-size, 9vh) * .075);
  margin-top: calc(var(--pose-size, 9vh) * -.0375); border-radius: 999px;
  background: #FFF4C8; box-shadow: 0 .1vh .3vh rgba(0, 0, 0, .35);
  transform-origin: 0 50%; animation: pt-connect var(--t-3) linear both;
}
@keyframes pt-connect { from { scale: 0 1; } }
@keyframes pt-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(-7px * var(--fx-amp)); } }
@keyframes pt-breathe { from { scale: 1; } to { scale: calc(1 + .06 * var(--fx-amp)); } }
@keyframes pt-drift {
  from { filter: drop-shadow(0 .3vh .8vh rgba(0, 0, 0, .5)); translate: 0 0; }
  to { filter: drop-shadow(calc(.5vh * var(--fx-amp)) calc(1.1vh * var(--fx-amp)) 1vh rgba(0, 0, 0, .42)); translate: 0 calc(-.5vh * var(--fx-amp)); }
}
@keyframes pt-glint { 0%, 80% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

/* Taken: the moment of the shutter, once (class .just for 900 ms). */
:is(#pose-track, .pt-mini)[data-taken="classic"] li.just { transition: filter var(--t-2), opacity var(--t-2); }
:is(#pose-track, .pt-mini)[data-taken="bounce"] li.just { animation: pt-squash var(--t-5) var(--e-out) both; transform-origin: 50% 100%; }
:is(#pose-track, .pt-mini)[data-taken="flash"] li.just { animation: pt-flash .4s var(--e-out) both; }
:is(#pose-track, .pt-mini)[data-taken="ring"] li.just .fx::before, :is(#pose-track, .pt-mini)[data-taken="ring"] li.just .fx::after,
:is(#pose-track, .pt-mini)[data-taken="stamp"] li.just .fx::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; border: .45vh solid #FFF4C8; opacity: 0;
  animation: pt-ring var(--t-5) var(--e-out) both;
}
:is(#pose-track, .pt-mini)[data-taken="ring"] li.just .fx::after { border-width: .25vh; animation-delay: .12s; animation-duration: .6s; }
:is(#pose-track, .pt-mini)[data-taken="ring"] li.just { animation: pt-nudge var(--t-4) var(--e-out) both; }
:is(#pose-track, .pt-mini)[data-taken="pop"] li.just { animation: pt-slam var(--t-4) var(--e-over) both; }
:is(#pose-track, .pt-mini)[data-taken="pop"] li.just .fx { animation: pt-impact var(--t-3) linear both; }
:is(#pose-track, .pt-mini)[data-taken="stamp"] li.just { animation: pt-stamp var(--t-4) var(--e-hitstop) both; }
:is(#pose-track, .pt-mini)[data-taken="stamp"] li.just .fx::before { animation-delay: .1s; }
:is(#pose-track, .pt-mini)[data-taken="sticker"] li.just { animation: pt-slap var(--t-4) var(--e-hitstop) both; }
:is(#pose-track, .pt-mini)[data-taken="sticker"] li.done > :is(img, canvas) {
  filter: drop-shadow(.35vh 0 0 #fff) drop-shadow(-.35vh 0 0 #fff) drop-shadow(0 .35vh 0 #fff) drop-shadow(0 -.35vh 0 #fff) var(--shade);
}
:is(#pose-track, .pt-mini)[data-taken="burst"] li.just .fx::before {
  content: ""; position: absolute; inset: -70%; border-radius: 50%; opacity: 0;
  background:
    repeating-conic-gradient(from 0deg, transparent 0 13deg, #FFF4C8 13deg 16deg),
    repeating-conic-gradient(from 7deg, transparent 0 29deg, #fff 29deg 31deg);
  mask-image: radial-gradient(circle, transparent 0 30%, #000 46%, transparent 70%);
  animation: pt-fan .26s var(--e-out) both;
}
:is(#pose-track, .pt-mini)[data-taken="burst"] li.just { animation: pt-slam var(--t-3) var(--e-over) both; }
/* R8: the two neighbours on each side answer at 40 and 80 ms with a third of the amplitude. */
:is(#pose-track, .pt-mini):not([data-taken="classic"], [data-taken="handoff"]) li.just + li, :is(#pose-track, .pt-mini):not([data-taken="classic"], [data-taken="handoff"]) li:has(+ li.just) { animation: pt-nudge-sm var(--t-4) var(--e-out) 40ms both; }
:is(#pose-track, .pt-mini):not([data-taken="classic"], [data-taken="handoff"]) li.just + li + li, :is(#pose-track, .pt-mini):not([data-taken="classic"], [data-taken="handoff"]) li:has(+ li + li.just) { animation: pt-nudge-sm var(--t-4) var(--e-out) 80ms both; }
/* S4 handoff overlap: the one just taken settles back while the next one grows,
   220 ms each and overlapping by 80, so the two read as one handing over. */
:is(#pose-track, .pt-mini)[data-taken="handoff"] li.just { animation: pt-hand-out var(--t-3) var(--e-out) both; }
:is(#pose-track, .pt-mini)[data-taken="handoff"] li.just + li { animation: pt-hand-in var(--t-3) var(--e-out) 140ms both; }
@keyframes pt-hand-out { 0% { scale: calc(1 + .09 * var(--fx-amp)); } 55% { scale: calc(1 - .04 * var(--fx-amp)); } 100% { scale: 1; } }
@keyframes pt-hand-in { 55% { scale: calc(1 + .04 * var(--fx-amp)); } 100% { scale: 1; } }
@keyframes pt-nudge-sm { 35% { scale: calc(1 + .035 * var(--fx-amp)); translate: 0 calc(-.35vh * var(--fx-amp)); } }
@keyframes pt-fan { from { scale: .4; opacity: 0; } 40% { opacity: .9; } to { scale: 1.25; opacity: 0; } }
@keyframes pt-squash {
  0% { scale: 1; } 18% { scale: calc(1 + .16 * var(--fx-amp)) calc(1 - .2 * var(--fx-amp)); }
  45% { scale: calc(1 - .1 * var(--fx-amp)) calc(1 + .24 * var(--fx-amp)); translate: 0 calc(-1.6vh * var(--fx-amp)); }
  70% { scale: calc(1 + .05 * var(--fx-amp)) calc(1 - .06 * var(--fx-amp)); translate: 0 0; } 100% { scale: 1; }
}
@keyframes pt-flash {
  0% { filter: brightness(calc(1 + 1.4 * var(--fx-amp))) drop-shadow(0 0 1.2vh #FFF4C8); }
  100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}
@keyframes pt-ring { 0% { opacity: .95; scale: .7; } 100% { opacity: 0; scale: calc(1.3 + 1.1 * var(--fx-amp)); } }
@keyframes pt-nudge { 30% { scale: calc(1 + .1 * var(--fx-amp)); } }
@keyframes pt-slam { from { scale: calc(1 + .6 * var(--fx-amp)); opacity: 0; } }
@keyframes pt-impact { 0%, 30% { opacity: .85; background-color: #fff; } 100% { opacity: 0; background-color: #fff; } }
@keyframes pt-stamp { from { scale: calc(1 + .45 * var(--fx-amp)); rotate: calc(-7deg * var(--fx-amp)); opacity: 0; } }
@keyframes pt-slap { from { scale: calc(1 + .3 * var(--fx-amp)); translate: 0 calc(-1vh * var(--fx-amp)); opacity: .2; } }

/* The printing badge. Sets whose badge is drawn blank carry their word instead
   (stage/badge-word.js): the type is ours, so it is always spelled right and
   stays sharp at any size. It sizes itself down as the word gets longer, so a
   fourteen-letter word still sits inside the middle of the badge. */
:is(#pose-track, .pt-mini) li.badge { width: calc(var(--pose-size, 9vh) * 1.35); height: calc(var(--pose-size, 9vh) * 1.35); }
:is(#pose-track, .pt-mini) li.badge .pt-word {
  position: absolute; inset: 14% 10%; z-index: 2; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--word-font, "Bangers"), sans-serif; font-weight: 400; letter-spacing: .02em; line-height: 1; white-space: nowrap;
  font-size: min(calc(var(--pose-size, 9vh) * 1.7 / var(--word-len, 9)), calc(var(--pose-size, 9vh) * .34));
  color: #14162B; text-shadow: 0 0 .14em #fff, 0 0 .28em rgba(255, 255, 255, .8);
}
:is(#pose-track, .pt-mini) li.badge.pop { animation: pose-pop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pose-pop { from { scale: .2; opacity: 0; } to { scale: 1; opacity: 1; } }

/* Arriving: the row comes in one after another (class .arriving while it lasts). */
:is(#pose-track, .pt-mini).arriving li { animation-delay: calc(var(--i) * 90ms); animation-fill-mode: both; animation-iteration-count: 1; animation-direction: normal; }
:is(#pose-track, .pt-mini).arriving[data-arrive="fade"] li { animation-name: pt-in-fade; animation-duration: var(--t-4); animation-timing-function: var(--e-out); }
:is(#pose-track, .pt-mini).arriving[data-arrive="rise"] li { animation-name: pt-in-rise; animation-duration: var(--t-5); animation-timing-function: var(--e-anticipate); }
:is(#pose-track, .pt-mini).arriving[data-arrive="drop"] li { animation-name: pt-in-drop; animation-duration: var(--t-5); animation-timing-function: linear; transform-origin: 50% 100%; }
:is(#pose-track, .pt-mini).arriving[data-arrive="deal"] li { animation-name: pt-in-deal; animation-duration: var(--t-4); animation-timing-function: var(--e-out); }
:is(#pose-track, .pt-mini).arriving[data-arrive="pop"] li { animation-name: pt-in-pop; animation-duration: var(--t-4); animation-timing-function: var(--e-over); }
@keyframes pt-in-fade { from { opacity: 0; } }
@keyframes pt-in-rise { from { opacity: 0; translate: 0 calc(4vh * var(--fx-amp)); } 40% { opacity: 1; } }
@keyframes pt-in-drop {
  0% { opacity: 0; translate: 0 calc(-6vh * var(--fx-amp)); scale: calc(1 - .1 * var(--fx-amp)) calc(1 + .15 * var(--fx-amp)); animation-timing-function: var(--e-in); }
  55% { opacity: 1; translate: 0 0; scale: calc(1 + .18 * var(--fx-amp)) calc(1 - .18 * var(--fx-amp)); animation-timing-function: var(--e-out); }
  78% { scale: calc(1 - .04 * var(--fx-amp)) calc(1 + .05 * var(--fx-amp)); } 100% { scale: 1; }
}
@keyframes pt-in-deal { from { opacity: 0; translate: calc(var(--dx) * 8vh * var(--fx-amp)) calc(var(--dy) * 6vh * var(--fx-amp)); scale: .8; } }
@keyframes pt-in-pop { from { opacity: 0; scale: 0; } }

/* Leaving: the row goes, then posetrack.js clears it (class .leaving). Exits are a step shorter. */
:is(#pose-track, .pt-mini).leaving li { animation-delay: calc(var(--i) * 70ms); animation-fill-mode: both; animation-iteration-count: 1; animation-direction: normal; animation-duration: var(--t-3); animation-timing-function: var(--e-in); }
:is(#pose-track, .pt-mini).leaving li > *, :is(#pose-track, .pt-mini).leaving li::before, :is(#pose-track, .pt-mini).leaving li::after { animation: none; }
:is(#pose-track, .pt-mini).leaving[data-leave="fade"] li { animation-name: pt-out-fade; }
:is(#pose-track, .pt-mini).leaving[data-leave="sink"] li { animation-name: pt-out-sink; }
:is(#pose-track, .pt-mini).leaving[data-leave="shrink"] li { animation-name: pt-out-shrink; }
:is(#pose-track, .pt-mini).leaving[data-leave="slide"] li { animation-name: pt-out-slide; }
:is(#pose-track, .pt-mini).leaving[data-leave="pop"] li { animation-name: pt-out-pop; animation-timing-function: linear; }
@keyframes pt-out-fade { to { opacity: 0; } }
@keyframes pt-out-sink { to { opacity: 0; translate: 0 calc(3vh * var(--fx-amp)); } }
@keyframes pt-out-shrink { to { opacity: 0; scale: 0; } }
@keyframes pt-out-slide { to { opacity: 0; translate: calc(var(--dx) * 10vh * var(--fx-amp)) calc(var(--dy) * 8vh * var(--fx-amp)); } }
@keyframes pt-out-pop { 40% { scale: calc(1 + .2 * var(--fx-amp)); opacity: 1; } 100% { scale: 0; opacity: 0; } }

/* after 'ghost': the finished row waits on the idle screen, grey and faint. */
:is(#pose-track, .pt-mini)[data-ghost] li { filter: grayscale(1); opacity: .28; }
:is(#pose-track, .pt-mini)[data-ghost] li::after, :is(#pose-track, .pt-mini)[data-ghost] .fx { display: none; }

/* At the review the guest's buttons and the filmstrip come first: a row along
   the bottom steps up clear of them (--review-band, stage.css) for as long as
   the photo is up, wherever it sits on a tall screen, and drops back for the
   next guest. */
#stage[data-state="review"] #pose-track[data-corner^="bottom"] { bottom: max(var(--pt-edge, 3vh), var(--review-band, 12vh)); }

#stage[data-big] :is(#pose-track, .pt-mini) { --pose-size: 13vh !important; }
#stage[data-contrast] :is(#pose-track, .pt-mini) li.pending { opacity: .65; }
#stage[data-contrast] :is(#pose-track, .pt-mini)[data-done="float"] li.done::after { display: none; }
#stage[data-still] :is(#pose-track, .pt-mini) li, #stage[data-still] :is(#pose-track, .pt-mini) li *, #stage[data-still] :is(#pose-track, .pt-mini) li::before, #stage[data-still] :is(#pose-track, .pt-mini) li::after,
:is(#pose-track, .pt-mini)[data-intensity="none"] li, :is(#pose-track, .pt-mini)[data-intensity="none"] li *, :is(#pose-track, .pt-mini)[data-intensity="none"] li::before, :is(#pose-track, .pt-mini)[data-intensity="none"] li::after,
:is(#pose-track, .pt-mini)[data-ghost] li, :is(#pose-track, .pt-mini)[data-ghost] li *, :is(#pose-track, .pt-mini)[data-ghost] li::before { animation: none !important; transition: none !important; }
#stage[data-still] :is(#pose-track, .pt-mini) .fx::before, #stage[data-still] :is(#pose-track, .pt-mini) .fx::after,
:is(#pose-track, .pt-mini)[data-intensity="none"] .fx::before, :is(#pose-track, .pt-mini)[data-intensity="none"] .fx::after { display: none; }
@media (prefers-reduced-motion: reduce) { :is(#pose-track, .pt-mini) .fx::before, :is(#pose-track, .pt-mini) .fx::after { display: none; } }

/* 0.18 the drawer's miniature (output-track.js): a 16 : 9 stand-in screen with the row inside, and the
   bundled sets as tiles of their waiting, taken and printing pictures. */
.pt-screen { position: relative; width: 320px; max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid var(--ink, #14162B); border-radius: 8px; background: #3a3f4b; margin-bottom: 8px; }
.pt-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pt-set { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 2px solid var(--ink, #14162B); border-radius: 8px; background: var(--surface-2, #fff); color: var(--ink, #14162B); cursor: pointer; font: inherit; }
.pt-set[aria-pressed="true"] { background: var(--yellow, #FFE14D); box-shadow: 3px 3px 0 var(--ink, #14162B); }
.pt-set-pics { display: flex; align-items: center; gap: 4px; height: 40px; }
.pt-set-pics img { height: 36px; width: 36px; object-fit: contain; }
.pt-set-pics img.dim { filter: grayscale(1); opacity: .45; }
.pt-set-pics .pt-set-badge { position: relative; display: inline-flex; }
.pt-set-pics .pt-set-word {
  position: absolute; inset: 22% 6%; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--word-font, "Bangers"), sans-serif; font-size: 7px; line-height: 1; white-space: nowrap; color: #14162B;
}
.pt-set-plain { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #111; background: #fff; color: #111; font-weight: 800; }
.pt-set-name { font-size: 13px; font-weight: 700; text-align: center; }