.polyfan-marquee {
  --h: 360px;                 /* match the height you rendered */
  height: var(--h);
  background-image: url('/polyfan_scroller.png');
  background-repeat: repeat-x;
  background-size: auto var(--h); /* lock height, natural width */
  animation: pf-scroll 60s linear infinite;
  /* optional: mask/overlay for readability */
  position: relative;
}

.mark {
  display: inline-block;
  width: 48px;     /* adjust to suit your header */
  height: 48px;
  background-image: url("AFL_Polyfans_ShieldLogo_RainbowWordmark_Centered.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@keyframes pf-scroll {
  from { background-position: 0 0; }
  to   { background-position: -100% 0; } /* smooth left scroll */
}

/* ===== Polyfan Generator Modal ===== */
.pf-modal[hidden] { display: none !important; }
.pf-modal {
  position: fixed; inset: 0; z-index: 1000;
}
.pf-modal__backdrop {
  position: absolute; inset: 0; background: rgba(10, 27, 43, 0.55);
  backdrop-filter: blur(4px);
  animation: pf-fade-in .2s ease-out;
}
.pf-modal__dialog {
  position: relative;
  max-width: 980px;
  margin: 4vh auto;
  background: #fff;
  border: 1px solid #E6EBF0;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  padding: clamp(16px, 3vw, 28px);
  animation: pf-pop-in .18s ease-out;
}
.pf-modal__close {
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid #E6EBF0; background: #fff; cursor: pointer;
  font-size: 22px; line-height: 32px;
}
.pf-modal__title { margin: 0 0 6px; font-size: clamp(22px, 3vw, 28px); font-weight: 800; }
.pf-modal__intro { margin: 0 0 18px; color: #5D6B7A; }

.pf-form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; align-items: end; margin-bottom: 18px;
}
@media (max-width: 800px) { .pf-form { grid-template-columns: 1fr; } }
.pf-field label { display:block; font-weight: 700; margin-bottom: 6px; }
.pf-field select {
  width: 100%; height: 44px; border-radius: 10px; border: 1px solid #E6EBF0;
  padding: 0 12px; background: #fff; font-weight: 600;
}

/* Prevent any hidden img from flashing a broken icon */
#pf-output[hidden] { display: none !important; }

/* When #pf-output has no src, hide it */
#pf-output:not([src]) { display: none !important; }

/* Keep your original grid but center all children and span across both columns */
.pf-result {
  display: grid;
  grid-template-columns: 1fr 1fr; /* as you had */
  gap: 18px;
  align-items: center;
  justify-items: center;          /* NEW: center children in their cells */
  margin-top: 20px;
  text-align: center;
}
@media (max-width: 900px) {
  .pf-result { grid-template-columns: 1fr; }
}
/* Make all direct children (anticipation, image, error) span full width and center */
.pf-result > * {
  grid-column: 1 / -1;            /* NEW: span both columns */
  justify-self: center;           /* NEW: just in case */
}

/* Your desired image look, just cap display size and keep rounded edges */
#pf-output {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;               /* cap at ~400px as requested */
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px solid #E6EBF0;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  object-fit: cover;
}

/* Make the anticipation box match the final image footprint so no jump */
#pf-anticipation {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}

#pf-output {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;       /* tighter cap for modal display */
  aspect-ratio: 1 / 1;    /* always square */
  border-radius: 16px;    /* rounded edges */
  border: 1px solid #E6EBF0;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  object-fit: cover;
}

.pf-error { color: #B00020; font-weight: 600; }

.pf-anticipation {
  position: relative;
  width: 100%; max-width: 520px; aspect-ratio: 1 / 1;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #f2f4f7, #e9edf3);
  border: 1px solid #E6EBF0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 16px 40px rgba(0,0,0,.08);
  animation: pf-breathe 2s ease-in-out infinite;
}
.pf-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: pf-sheen 1.6s ease-in-out infinite;
  mix-blend-mode: screen;
}
.pf-loader {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-weight: 800; color: #7a8694; letter-spacing: .3px;
}

@keyframes pf-pop-in { from { transform: translateY(8px) scale(.98); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes pf-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes pf-breathe { 0% { filter: saturate(.9) brightness(1.02) } 50% { filter: saturate(1.05) brightness(1.07) } 100% { filter: saturate(.9) brightness(1.02) } }
@keyframes pf-sheen { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }

.pf-bounce-in {
  animation: pf-bounce .55s cubic-bezier(.2, .8, .2, 1.1);
}
@keyframes pf-bounce {
  0% { transform: scale(.92); opacity: 0 }
  50% { transform: scale(1.03); opacity: 1 }
  100% { transform: scale(1.0); }
}

#pf-share-preview[hidden] { display: none !important; }
#pf-share-preview {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px solid #E6EBF0;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  object-fit: cover;
}