/* Prize marquee (fix-80, loop fixed in fix-82): individual prize cards
   sliding past one by one, Magic Eden "Top Pack Pulls" style. Pure CSS
   motion; JS only fills the honest state line from SHITY_PRIZES.
 *
 * Loop construction (fix-82): the track holds TWO identical groups, both
   in the static HTML. One set is exactly 900px wide by construction:
   5 cards x 168px + 4 gaps x 12px + 12px trailing padding. The keyframes
   travel exactly that 900px in pixels, never a percentage, so the wrap
   lands the second set exactly where the first one started.
 *
 * Two traps the first version fell into, do not reintroduce:
 * - .mq-art needs a definite width. With only aspect-ratio, the img's
 *   width:100% counts as auto during max-content sizing, so every card
 *   contributed its 480px natural width: each group measured 2470px,
 *   the track 4940px, and translateX(-50%) travelled 2470px, leaving
 *   ~15s of empty track in every 24s pass (and a layer far too wide
 *   for the iOS compositor, which painted it in ghosts and fragments).
 * - No will-change: transform. On iOS it pinned that oversized layer
 *   and produced stale, doubled painting. A plain animated transform
 *   is composited fine at this size. */
.mq { margin: 14px 0 2px; }
.mq-label { font-size: 15px; font-weight: 800; margin: 0 0 8px; }
.mq-viewport { overflow: hidden; touch-action: pan-y; }
.mq-track { display: flex; flex-wrap: nowrap; width: max-content; animation: mq-scroll 24s linear infinite; }
.mq-group { display: flex; flex: 0 0 auto; gap: 12px; padding-right: 12px; }
.mq-card { flex: 0 0 168px; display: flex; flex-direction: column; gap: 3px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; padding-bottom: 10px; text-decoration: none; color: var(--text); }
.mq-art { display: block; width: 166px; aspect-ratio: 8 / 5; overflow: hidden; }
.mq-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-name { font-size: 15px; font-weight: 800; padding: 8px 10px 0; }
.mq-line { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 10px; }
.mq-state { font-size: 12px; font-weight: 700; color: var(--gold); padding: 0 10px; }
@keyframes mq-scroll { from { transform: translateX(0); } to { transform: translateX(-900px); } }
.mq-viewport:hover .mq-track,
.mq.mq-hold .mq-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; }
  .mq-viewport { overflow-x: auto; }
}