/* Pro design catalog: animated wheel stages (12 effects), style/celebration galleries. */

/* ---------- Stage ---------- */
body.has-stage .wheel-stage { background: var(--stage-bg); }
body.has-stage .orbit { border-color: rgba(var(--fx, 255, 255, 255), 0.22); }
body.has-stage .spark { color: rgba(var(--fx, 255, 255, 255), 0.85); }
body.has-stage[data-fx="flow"] .wheel-stage { background-size: 300% 300%; animation: auroraShift 14s ease infinite; }
body.has-stage .wheel-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
body[data-fx="rays"] .wheel-stage::after { inset: -70%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(var(--fx), 0.11) 0 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 14%, transparent 62%); mask-image: radial-gradient(circle, #000 14%, transparent 62%); animation: rotate 70s linear infinite; }
body[data-fx="stars"] .wheel-stage::after { background-image: radial-gradient(1.6px 1.6px at 12% 22%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 28% 70%, #fff, transparent 60%), radial-gradient(1.8px 1.8px at 46% 14%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 63% 82%, #fff, transparent 60%), radial-gradient(1.6px 1.6px at 78% 30%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 90% 64%, #fff, transparent 60%), radial-gradient(1px 1px at 8% 88%, #cfe, transparent 60%), radial-gradient(1.4px 1.4px at 54% 46%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 36% 38%, #fde68a, transparent 60%), radial-gradient(1.4px 1.4px at 70% 58%, #bae6fd, transparent 60%); animation: twinkle 2.8s ease-in-out infinite alternate; }
body[data-fx="bubbles"] .wheel-stage::after { background-image: radial-gradient(circle, transparent 54%, rgba(var(--fx), 0.5) 57%, rgba(var(--fx), 0.08) 62%, transparent 64%), radial-gradient(circle, transparent 54%, rgba(var(--fx), 0.4) 57%, rgba(var(--fx), 0.06) 62%, transparent 64%), radial-gradient(circle, transparent 54%, rgba(var(--fx), 0.45) 57%, rgba(var(--fx), 0.08) 62%, transparent 64%); background-size: 70px 70px, 110px 110px, 50px 50px; background-position: 0 0, 35px 40px, 12px 70px; animation: riseBg 16s linear infinite; }
body[data-fx="snow"] .wheel-stage::after { background-image: radial-gradient(3px 3px at 20px 30px, rgba(255, 255, 255, 0.95), transparent), radial-gradient(2px 2px at 60px 90px, rgba(255, 255, 255, 0.9), transparent), radial-gradient(2.6px 2.6px at 120px 50px, rgba(255, 255, 255, 0.9), transparent), radial-gradient(1.8px 1.8px at 90px 140px, rgba(255, 255, 255, 0.85), transparent); background-size: 160px 160px, 200px 200px, 130px 130px, 170px 170px; animation: fallBg 10s linear infinite; }
body[data-fx="embers"] .wheel-stage::after { background-image: radial-gradient(2.4px 2.4px at 20px 30px, #ffb347, transparent), radial-gradient(1.8px 1.8px at 70px 100px, #ff7b54, transparent), radial-gradient(2.2px 2.2px at 120px 60px, #ffd166, transparent), radial-gradient(1.6px 1.6px at 50px 150px, #ff9f1c, transparent); background-size: 150px 150px, 190px 190px, 130px 130px, 170px 170px; animation: emberBg 8s linear infinite; }
body[data-fx="drift"] .wheel-stage::after { background-image: radial-gradient(3.5px 3.5px at 22px 40px, #ff6fb5, transparent), radial-gradient(3px 3px at 80px 110px, #5ce1e6, transparent), radial-gradient(3.5px 3.5px at 140px 60px, #ffde59, transparent), radial-gradient(2.8px 2.8px at 100px 160px, #c77dff, transparent), radial-gradient(3px 3px at 40px 130px, #7bf1a8, transparent); background-size: 180px 180px, 220px 220px, 150px 150px, 200px 200px, 170px 170px; animation: driftBg 22s linear infinite; opacity: 0.9; }
body[data-fx="fireflies"] .wheel-stage::after { background-image: radial-gradient(3px 3px at 15% 30%, #fef08a, transparent 70%), radial-gradient(2.5px 2.5px at 40% 72%, #bef264, transparent 70%), radial-gradient(3px 3px at 62% 24%, #fde047, transparent 70%), radial-gradient(2.5px 2.5px at 84% 60%, #bef264, transparent 70%), radial-gradient(3px 3px at 26% 54%, #fef9c3, transparent 70%), radial-gradient(2.5px 2.5px at 72% 84%, #fde047, transparent 70%); filter: drop-shadow(0 0 4px #fde047); animation: twinkle 2.2s ease-in-out infinite alternate, floatY 6s ease-in-out infinite; }
body[data-fx="grid"] .wheel-stage::after { background-image: linear-gradient(rgba(var(--fx), 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--fx), 0.13) 1px, transparent 1px); background-size: 38px 38px; -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 78%); mask-image: radial-gradient(circle, #000 28%, transparent 78%); animation: gridMove 3.5s linear infinite; }
body[data-fx="sparkle"] .wheel-stage::after { background: linear-gradient(115deg, transparent 38%, rgba(var(--fx), 0.24) 50%, transparent 62%); background-size: 260% 100%; animation: shimmer 4.5s ease-in-out infinite; }
body[data-fx="pulse"] .wheel-stage::after { background: radial-gradient(circle at 50% 50%, transparent 34%, rgba(var(--fx), 0.16) 35%, rgba(var(--fx), 0.04) 40%, transparent 44%); animation: pulseRing 3.2s ease-out infinite; }
@keyframes twinkle { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes riseBg { to { background-position: 0 -700px, 35px -620px, 12px -580px; } }
@keyframes fallBg { to { background-position: 40px 160px, -60px 200px, 30px 130px, -40px 170px; } }
@keyframes emberBg { to { background-position: 30px -150px, -40px -190px, 20px -130px, -30px -170px; } }
@keyframes driftBg { to { background-position: 60px 180px, -50px 220px, 40px 150px, -60px 200px, 30px 170px; } }
@keyframes gridMove { to { background-position: 0 38px, 38px 0; } }
@keyframes shimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes pulseRing { from { transform: scale(0.55); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* The celebration canvas becomes a popover so it can sit above the winner dialog. */
#celebration[popover] { position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; pointer-events: none; }

/* ---------- Style gallery ---------- */
.style-visual { position: relative; display: grid; place-items: center; padding: 14px; border-radius: 16px; margin-bottom: 12px; overflow: hidden; width: 100%; }
.style-visual canvas { width: 130px; height: 130px; margin: 0 !important; }
.style-visual[data-fx="flow"] { background-size: 300% 300% !important; animation: auroraShift 14s ease infinite; }
.style-choice { transition: transform 0.35s var(--spring, ease), box-shadow 0.3s, border-color 0.25s; position: relative; }
.style-choice:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.45); }
.style-choice:hover canvas { animation: rotate 6s linear infinite; }
.style-choice.pro-card .style-visual::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(246, 169, 75, 0.7); pointer-events: none; }
.style-choice strong { margin-top: 2px; }
.style-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) { .style-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .style-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .style-visual canvas { width: 100px; height: 100px; } }

/* ---------- Celebration gallery ---------- */
.celeb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.celeb-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 14px; border-radius: 18px; border: 1px solid var(--border, #e5ecec); background: var(--surface-solid, #fff); text-align: left; transition: transform 0.35s var(--spring, ease), box-shadow 0.3s, border-color 0.25s; animation: rise 0.45s var(--ease, ease) both; }
.celeb-card:nth-child(4n + 2) { animation-delay: 0.04s; } .celeb-card:nth-child(4n + 3) { animation-delay: 0.08s; } .celeb-card:nth-child(4n) { animation-delay: 0.12s; }
.celeb-card:hover { transform: translateY(-5px); box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.4); border-color: var(--pri-glow, #9bd); }
.celeb-card.on { border-color: var(--pri, #167d73); background: var(--pri-soft, #eef8f6); box-shadow: 0 0 0 2px var(--pri-glow, #9bd); }
.celeb-card.pro-card { border-color: rgba(246, 169, 75, 0.55); }
.celeb-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 14px; font-size: 25px; background: var(--pri-soft, #eef8f6); transition: transform 0.5s var(--spring, ease); }
.celeb-card:hover .celeb-icon { transform: scale(1.18) rotate(-8deg); }
.celeb-card strong { font: 700 14px/1.25 "DM Sans", sans-serif; }
.celeb-card small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.celeb-card .template-pro { left: auto; right: 10px; top: 10px; font-style: normal; }
.celeb-field { margin: 14px 0; }
.celeb-field .soft-button { width: 100%; text-align: left; padding: 11px 14px; }
.tpl-meta { font-size: 12.5px !important; font-weight: 600; text-align: center; color: var(--pri-text) !important; }
@media (max-width: 880px) { .celeb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .celeb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }