.prereg-section { padding:28px 20px 64px; color:#fff; background:#1b1e23; }
.prereg-inner { padding:38px 36px 30px; border-top:1px solid #ffffff20; background:radial-gradient(ellipse at 50% 30%,#53498523,transparent 65%); }
.prereg-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:32px; }
.prereg-eyebrow { color:#eac477; font-size:.75rem; letter-spacing:.2em; font-weight:700; margin-bottom:8px; }
.prereg-heading h2 { font-size:clamp(25px,3vw,36px); line-height:1.3; color:#fff; }
.prereg-subtitle { color:#c5c7d0; font-size:.9rem; margin-top:10px; }
.prereg-rewards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; list-style:none; }
.prereg-reward { min-width:0; text-align:center; }
.prereg-tier { color:#b8bdcb; font-size:.78rem; margin-bottom:13px; }
.prereg-tier b { color:#f4e0b9; font-size:23px; margin-right:3px; }
.prereg-stamp { padding:9px; max-width:160px; margin:0 auto; background:#f9f4e9; border:3px dashed #1b1e23; filter:drop-shadow(0 6px 8px #0004); transform:rotate(-3deg); transition:transform .2s; }
.prereg-reward:nth-child(even) .prereg-stamp { transform:rotate(3deg); }
.prereg-reward:hover .prereg-stamp { transform:translateY(-4px) rotate(0); }
.prereg-art { aspect-ratio:1/1.13; position:relative; display:grid; place-items:center; overflow:hidden; border:1px solid #ffffff6b; background:radial-gradient(circle,#ffffff40 1px,transparent 1.5px) 0 0/8px 8px,linear-gradient(140deg,hsl(var(--reward-hue) 70% 66%),#e75a9e); }
.prereg-art::before { content:""; position:absolute; width:180%; height:30px; background:#ffffff23; transform:rotate(-35deg); }
.prereg-art img { width:76%; height:auto; max-height:112px; object-fit:contain; position:relative; filter:drop-shadow(0 4px 2px #26154266); }
.prereg-sample-tag { position:absolute; top:4px; left:6px; color:#fff; font-size:.6rem; letter-spacing:.03em; z-index:1; }
.prereg-quantity { position:absolute; bottom:0; right:5px; color:#fff; font-size:26px; line-height:1.3; font-weight:700; text-shadow:2px 2px 0 #201b37,-1px -1px 0 #201b37,1px -1px 0 #201b37,-1px 1px 0 #201b37; }
.prereg-reward h3 { color:#f4f3f8; font-size:.86rem; font-weight:600; line-height:1.5; margin:14px 0 0; }
.prereg-reward.is-reached .prereg-stamp { background:#ffe5a3; }
.prereg-progress-wrap { margin:24px 0 24px; }
.prereg-progress { height:12px; border-radius:999px; background:#17181c; border:1px solid #ffffff26; box-shadow:inset 0 2px 3px #0009; overflow:hidden; }
.prereg-progress > span { position:relative; height:100%; display:block; border-radius:999px; background:linear-gradient(180deg,#ff7076 0%,#ff182b 32%,#f30019 67%,#bf0013 100%); box-shadow:inset 0 -1px 2px #8b001970; transition:width .5s ease; }
.prereg-progress > span::after { content:""; position:absolute; top:1px; left:3px; right:3px; height:35%; border-radius:999px; background:linear-gradient(180deg,#fffffff0,#ffffff30); pointer-events:none; }
.prereg-ticks { position:relative; min-height:26px; margin-top:12px; font-size:1rem; font-weight:600; line-height:1.5; color:#e3e5eb; }
.prereg-ticks > span { position:absolute; transform:translateX(-50%); }
.prereg-ticks > span:first-child { transform:none; }
.prereg-ticks > span:last-child { transform:translateX(-100%); }
.prereg-notes { text-align:center; color:#bdc2cf; font-size:.8rem; line-height:1.9; }
.prereg-notes small { display:block; color:#dfbf84; margin-top:8px; font-size:.74rem; }
@media(max-width:760px) {
 .prereg-section { padding:16px 12px 36px; }
 .prereg-inner { padding:28px 8px 16px; }
 .prereg-heading { align-items:flex-start; gap:18px; flex-direction:column; }
 .prereg-rewards { gap:24px 14px; grid-template-columns:repeat(6,minmax(0,1fr)); }
 .prereg-reward { grid-column:span 2; }
 .prereg-reward:nth-child(4) { grid-column:2 / span 2; }
 .prereg-reward:nth-child(5) { grid-column:4 / span 2; }
 .prereg-stamp { padding:6px; }
 .prereg-reward h3 { font-size:.76rem; }
 .prereg-quantity { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) { .prereg-stamp,.prereg-progress > span { transition:none; } }

/* Milestones replace the hero action, on the existing game background. */
.hero .prereg-section { margin-top:34px; padding:0; background:transparent; text-align:left; }
.hero .prereg-inner { width:100%; padding:28px 0 0; background:none; }
.hero .prereg-heading { text-shadow:0 2px 6px #0009; }
.hero .prereg-notes { text-shadow:0 1px 4px #000b; }
@media(max-width:760px) {
 .hero .prereg-section { margin-top:26px; }
 .hero .prereg-inner { padding-top:24px; }
}


/* Unreached rewards stay monochrome; reached rewards gently come to life. */
.prereg-reward:not(.is-reached) .prereg-stamp {
  filter:grayscale(1) drop-shadow(0 6px 8px #0004);
}
.prereg-reward:not(.is-reached) .prereg-tier b { color:#c7c9ce; }
.prereg-reward.is-reached .prereg-art img {
  animation:prereg-item-float 4s ease-in-out infinite;
}
.prereg-reward.is-reached .prereg-art::before {
  animation:prereg-reward-shimmer 6s ease-in-out infinite;
}
@keyframes prereg-item-float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-4px); }
}
@keyframes prereg-reward-shimmer {
  0%,100% { transform:translateY(24px) rotate(-35deg); opacity:.35; }
  50% { transform:translateY(-24px) rotate(-35deg); opacity:.85; }
}
@media(prefers-reduced-motion:reduce) {
  .prereg-reward.is-reached .prereg-art img,
  .prereg-reward.is-reached .prereg-art::before { animation:none; }
  .prereg-reward:hover .prereg-stamp { transform:rotate(-3deg); }
  .prereg-reward:nth-child(even):hover .prereg-stamp { transform:rotate(3deg); }
}

/* Mixed reward bundles list each quantity without an ambiguous shared badge. */
.prereg-reward-detail { color:#e3e5eb; font-size:.76rem; line-height:1.6; margin-top:3px; }


/* The final milestone is a larger portrait reward card. */
.prereg-rewards { grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.65fr); align-items:end; }
.prereg-reward[data-featured] .prereg-stamp { max-width:250px; padding:7px; border:2px solid #ff86b5; border-radius:12px; background:#ed4286; transform:none; }
.prereg-reward[data-featured] .prereg-art { display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:auto; min-height:320px; padding:12px 9px 16px; border:1px solid #ffffff50; border-radius:6px; background:radial-gradient(circle,#ffffff30 1px,transparent 1.5px) 0 0/7px 7px,linear-gradient(150deg,#ff8fc0,#e43980 58%,#ab2665); }
.prereg-reward[data-featured] .prereg-art::before { top:35%; }
.prereg-reward[data-featured] .prereg-art img { width:100%; height:250px; max-height:none; object-fit:contain; z-index:1; }
.prereg-reward[data-featured] .prereg-art h3 { position:relative; z-index:1; color:#fff; font-size:1.03rem; line-height:1.35; margin:8px 0 0; text-shadow:0 2px 3px #70163b88; }
.prereg-reward[data-featured] .prereg-quantity { position:relative; z-index:1; right:auto; bottom:auto; margin-top:5px; font-size:27px; }
.prereg-reward[data-featured]:hover .prereg-stamp { transform:translateY(-4px); }
@media(max-width:760px) {
 .prereg-rewards { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 14px; }
 .prereg-reward,.prereg-reward:nth-child(4) { grid-column:span 2; }
 .prereg-reward[data-featured] { grid-column:1 / -1; width:100%; max-width:270px; justify-self:center; }
 .prereg-reward[data-featured] .prereg-art { min-height:340px; }
 .prereg-reward[data-featured] .prereg-art img { height:270px; }
}
@media(prefers-reduced-motion:reduce) { .prereg-reward[data-featured]:hover .prereg-stamp { transform:none; } }

/* Share the heading's vertical space with the final portrait card. */
@media(min-width:761px) {
 .prereg-inner { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.65fr); column-gap:24px; }
 .prereg-heading { grid-column:1 / 5; grid-row:1; align-self:start; margin-bottom:24px; }
 .prereg-rewards { display:contents; }
 .prereg-reward { grid-row:2; align-self:end; }
 .prereg-reward:nth-child(1) { grid-column:1; }
 .prereg-reward:nth-child(2) { grid-column:2; }
 .prereg-reward:nth-child(3) { grid-column:3; }
 .prereg-reward:nth-child(4) { grid-column:4; }
 .prereg-reward[data-featured] { grid-column:5; grid-row:1 / 3; align-self:end; }
 .prereg-progress-wrap { grid-column:1 / -1; grid-row:3; }
 .prereg-notes { grid-column:1 / -1; grid-row:4; }
}