/* Transparent image assets; sizing preserves composition, text and hit boxes. */
.generated-art{display:inline-block;position:relative;width:100%;height:100%;vertical-align:middle;pointer-events:none;flex-shrink:0}
.generated-art>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.art-fallback{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;color:#ed1a3d;line-height:1;font-size:1.1em}
.art-ready>.art-fallback{display:none}.art-failed>img{display:none}
.icon-button{padding:calc(var(--u)*1.3)}
.icon-button .generated-art{display:block}
.icon-button .art-sound-off,.icon-button.muted .art-sound-on{display:none}
.icon-button.muted .art-sound-off{display:block}
.icon-button .art-fallback{font-size:calc(var(--u)*1.8);color:#b60d2d}
.close-button .art-fallback{font-size:calc(var(--u)*4.8)}
.duration-clock>.generated-art{width:calc(var(--u)*18);height:calc(var(--u)*18)}
.duration-clock>strong,.instruction-clock>strong{left:49%;top:59%;color:#fff;background:transparent;text-shadow:0 1px 3px #0008;z-index:1;pointer-events:none;font-variant-numeric:tabular-nums}
.duration-clock>strong{font-size:calc(var(--u)*4)}
.instruction-clock>strong{font-size:calc(var(--u)*6.8)}
.duration-clock:has(.art-failed)>strong,.instruction-clock:has(.art-failed)>strong{color:#ed1a3d;text-shadow:none}
.instruction-clock{filter:drop-shadow(0 calc(var(--u)*.7) calc(var(--u)*.5) #0002)}
.tier>.generated-art{width:calc(var(--u)*10);height:calc(var(--u)*10);filter:drop-shadow(0 calc(var(--u)*.3) calc(var(--u)*.3) #0002)}
.time-up-card>.generated-art{display:block;width:calc(var(--u)*31);height:calc(var(--u)*31);margin:0 auto calc(var(--u)*5)}
.reward-heading .generated-art{filter:drop-shadow(0 calc(var(--u)*.5) calc(var(--u)*.4) #0002)}
.accessory-hero{display:none;width:calc(var(--u)*25);height:calc(var(--u)*23);filter:drop-shadow(0 calc(var(--u)*.8) calc(var(--u)*.7) #65340924)}
.accessory-result .accessory-hero{display:block;animation:propReveal .65s cubic-bezier(.12,.75,.23,1) both}
.accessory-result .result-art>.celebration-orb{display:none}
@keyframes propReveal{from{opacity:0;transform:translateY(12%) scale(.72) rotate(-9deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){.accessory-result .accessory-hero{animation:none}}