@property --crate-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.crate {
  --crate-color: #8a93a6;
  --crate-bg-top: #1c2130;
  --crate-bg-bottom: #12151d;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 10px;
  border-radius: 10px;
  border: 1px solid #2a3040;
  background:
    radial-gradient(120% 80% at 50% 38%, color-mix(in srgb, var(--crate-color) 30%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, var(--crate-bg-top) 0%, var(--crate-bg-bottom) 100%);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s, border-color .22s;
}

.crate::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 26px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--crate-color) 45%, transparent), transparent);
  z-index: -1;
  opacity: .6;
  transition: opacity .22s;
}

.crate > .crate-art,
.crate > .crate-name,
.crate > .crate-tier {
  position: relative;
  z-index: 1;
}

.crate:hover:not(:disabled) {
  transform: translateY(-5px) scale(1.02);
  border-color: color-mix(in srgb, var(--crate-color) 70%, #fff);
  box-shadow:
    0 14px 28px -12px color-mix(in srgb, var(--crate-color) 75%, transparent),
    inset 0 0 22px -10px var(--crate-color);
}

.crate:hover:not(:disabled)::after { opacity: 1; }

.crate:hover:not(:disabled) .crate-art svg {
  animation: crate-bob 1.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--crate-color) 55%, transparent)) brightness(1.08);
}

.crate:disabled,
.crate:disabled:hover {
  opacity: .45;
  filter: grayscale(.4);
  cursor: not-allowed;
  transform: none;
  border-color: #2a3040;
}

.crate-art {
  width: 100%;
}

.crate-art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transition: filter .22s;
}

.crate-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

.crate-tier {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  border: 1px solid var(--crate-color);
  background: color-mix(in srgb, var(--crate-color) 28%, #000);
  box-shadow: 0 0 10px -2px var(--crate-color);
}

.crate.tier-special,
.crate.tier-legendary {
  border: 2px solid transparent;
  animation: crate-spin 4s linear infinite;
}

.crate.tier-special {
  --crate-bg-top: #1f1730;
  --crate-bg-bottom: #120e1a;
  background:
    radial-gradient(120% 80% at 50% 38%, color-mix(in srgb, var(--crate-color) 40%, transparent) 0%, transparent 62%) padding-box,
    linear-gradient(180deg, var(--crate-bg-top) 0%, var(--crate-bg-bottom) 100%) padding-box,
    conic-gradient(from var(--crate-angle), var(--crate-color), transparent 25%, #ffffffaa 38%, transparent 50%, var(--crate-color) 72%, transparent 88%, var(--crate-color)) border-box;
}

.crate.tier-legendary {
  --crate-bg-top: #1d1840;
  --crate-bg-bottom: #0d0a22;
  animation: crate-spin 3s linear infinite, crate-legendary-pulse 2.4s ease-in-out infinite;
  background:
    radial-gradient(120% 80% at 50% 38%, rgba(182, 155, 255, .45) 0%, transparent 62%) padding-box,
    linear-gradient(180deg, var(--crate-bg-top) 0%, var(--crate-bg-bottom) 100%) padding-box,
    conic-gradient(from var(--crate-angle), #ff6ad5, #c774e8, #ad8cff, #8795e8, #94d0ff, #7ff3d6, #ffe9a8, #ff6ad5) border-box;
}

.crate.tier-special:hover:not(:disabled),
.crate.tier-legendary:hover:not(:disabled) {
  border-color: transparent;
}

.crate.tier-legendary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: crate-shimmer 3.2s ease-in-out infinite;
}

.crate.tier-legendary .crate-tier {
  color: #2a1a00;
  border-color: #fff1b8;
  background: linear-gradient(110deg, #b8862a 0%, #ffe9a8 35%, #fff8de 50%, #e4ae39 70%, #9c6a18 100%);
  background-size: 200% 100%;
  animation: crate-shimmer 2.4s linear infinite;
  box-shadow: 0 0 14px -2px #e4ae39;
}

.crate.tier-legendary .crate-name {
  background: linear-gradient(90deg, #fff4c4, #efe2ff, #c8ecff, #fff4c4);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: crate-shimmer 4s linear infinite;
}

.crate-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.crate-particle {
  --crate-particle-color: var(--crate-color);
  position: absolute;
  bottom: -6px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--crate-particle-color);
  box-shadow: 0 0 6px 1px var(--crate-particle-color);
  opacity: 0;
  animation: crate-rise var(--t) linear var(--d) infinite;
}

.crate[data-case="neon"] .crate-particle:nth-child(odd) { --crate-particle-color: #22e6ff; }
.crate[data-case="neon"] .crate-particle:nth-child(even) { --crate-particle-color: #ff2bd6; }
.crate[data-case="inferno"] .crate-particle { --crate-particle-color: #ff8a2a; border-radius: 40% 60% 50% 50%; }
.crate[data-case="inferno"] .crate-particle:nth-child(3n) { --crate-particle-color: #ffd36a; }
.crate[data-case="celestial"] .crate-particle {
  --crate-particle-color: #fff1c4;
  border-radius: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  width: calc(var(--s) * 2);
  height: calc(var(--s) * 2);
}
.crate[data-case="celestial"] .crate-particle:nth-child(odd) { --crate-particle-color: #c9b2ff; }

.modal-crate-art .crate-art,
.modal-crate-art.crate-art {
  max-width: 220px;
  margin: 0 auto 6px;
}

.crate-open {
  --crate-color: #fff;
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--crate-color) 30%, transparent) 0%, rgba(8, 10, 14, .88) 70%);
  animation: crate-open-fade 900ms ease forwards;
}

.crate-open-art {
  width: min(240px, 60%);
  animation: crate-open-in 900ms cubic-bezier(.2, .8, .2, 1) forwards;
}

.crate-open-art svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6));
}

.crate-open .crate-lid {
  transform-box: fill-box;
  transform-origin: 100% 100%;
  animation: crate-lid-pop 900ms cubic-bezier(.3, .7, .3, 1) forwards;
}

.crate-open-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--crate-color) 28%, transparent 70%);
  opacity: 0;
  animation: crate-open-flash 900ms ease-out forwards;
}

.crate-open-special .crate-open-flash { width: 360px; height: 360px; margin: -180px 0 0 -180px; }
.crate-open-legendary .crate-open-flash {
  width: 440px;
  height: 440px;
  margin: -220px 0 0 -220px;
  background: radial-gradient(circle, #fff 0%, #ffe9a8 18%, var(--crate-color) 38%, transparent 70%);
}

@keyframes crate-spin {
  to { --crate-angle: 360deg; }
}

@keyframes crate-legendary-pulse {
  0%, 100% { box-shadow: 0 0 14px -6px #ad8cff, inset 0 0 18px -12px #ffe9a8; }
  50% { box-shadow: 0 0 26px -4px #ad8cff, inset 0 0 26px -10px #ffe9a8; }
}

@keyframes crate-shimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

@keyframes crate-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(-1deg); }
}

@keyframes crate-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: .9; }
  100% { transform: translate(var(--drift), -170px); opacity: 0; }
}

@keyframes crate-open-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes crate-open-in {
  0% { transform: scale(.6) translateY(12px); opacity: 0; }
  20% { transform: scale(1.06); opacity: 1; }
  28% { transform: scale(1); }
  33% { transform: translateX(-3px) rotate(-2deg); }
  38% { transform: translateX(3px) rotate(2deg); }
  43% { transform: translateX(-2px) rotate(-1deg); }
  48% { transform: none; }
  100% { transform: scale(1.12); }
}

@keyframes crate-lid-pop {
  0%, 45% { transform: none; opacity: 1; }
  70% { transform: translate(14px, -46px) rotate(28deg); opacity: 1; }
  100% { transform: translate(30px, -84px) rotate(52deg); opacity: 0; }
}

@keyframes crate-open-flash {
  0%, 42% { transform: scale(.2); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .crate,
  .crate::before,
  .crate-particle,
  .crate .crate-tier,
  .crate .crate-name,
  .crate:hover .crate-art svg {
    animation: none !important;
  }
}