.trophy{--metal:#f2bd2c;z-index:31;pointer-events:none;text-align:center;justify-items:center;gap:10px;width:min(420px,100% - 32px);display:grid;position:fixed;top:34%;left:50%;translate:-50% -50%}.trophy[data-tier="2"]{--metal:#c9cfd8}.trophy[data-tier="3"]{--metal:#cd7f32}.trophy .cup{filter:drop-shadow(0 10px 24px #00000073);width:clamp(110px,30vw,170px);height:auto;position:relative}.trophy .rays{aspect-ratio:1;background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--metal) 55%, transparent) 0deg 9deg, transparent 9deg 24deg);border-radius:50%;width:clamp(240px,70vw,380px);position:absolute;top:clamp(55px,15vw,85px);left:50%;translate:-50% -50%;-webkit-mask:radial-gradient(circle,#000 18%,#0000 68%);mask:radial-gradient(circle,#000 18%,#0000 68%)}.trophy .confetti{position:absolute;top:clamp(55px,15vw,85px);left:50%}.trophy .confetti i{opacity:0;border-radius:2px;width:8px;height:13px;margin:-6px -4px;position:absolute}.trophy .words{border-radius:var(--radius);border:2px solid var(--metal);background:var(--panel);max-width:100%;color:var(--ink);box-shadow:0 0 0 5px color-mix(in srgb, var(--metal) 35%, transparent), 0 16px 48px #0006;gap:2px;padding:10px 22px 12px;display:grid;position:relative}.trophy .words strong{color:var(--metal);font-size:30px;font-weight:800;line-height:1.1}.trophy .words span{overflow-wrap:anywhere}.trophy.pop{animation:.5s ease-in 4.7s forwards trophy-out}.trophy.pop .cup{animation:.7s cubic-bezier(.2,1.4,.4,1) both trophy-in,2.4s ease-in-out .7s infinite trophy-sway}.trophy.pop .rays{animation:.6s ease-out both trophy-rays-in,14s linear infinite trophy-spin}.trophy.pop .confetti i{animation:trophy-burst 1.6s cubic-bezier(.1, .8, .3, 1) calc(.25s + var(--d)) forwards}.trophy.pop .words{animation:.5s ease-out .35s both trophy-words}@keyframes trophy-in{0%{opacity:0;rotate:-18deg;scale:.2}60%{opacity:1}to{rotate:0deg;scale:1}}@keyframes trophy-sway{0%,to{rotate:-3deg}50%{rotate:3deg}}@keyframes trophy-rays-in{0%{opacity:0;scale:.4}to{opacity:1;scale:1}}@keyframes trophy-spin{to{rotate:360deg}}@keyframes trophy-burst{0%{opacity:1;transform:translate(0)rotate(0)}70%{opacity:1}to{opacity:0;transform:translate(var(--x), calc(var(--y) + 70px)) rotate(var(--r))}}@keyframes trophy-words{0%{opacity:0;translate:0 12px}to{opacity:1;translate:0}}@keyframes trophy-out{to{opacity:0}}@media (prefers-reduced-motion:reduce){.trophy.pop .cup,.trophy.pop .rays,.trophy.pop .words{animation:none}.trophy.pop .confetti{display:none}}
