.case-opening-overlay {
  /* Reads the shared tokens from design-system.css, which loads first. */
  --case-lime: var(--brand-400, #d9ff57);
  --case-ink: #0b100b;
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(217, 255, 87, .12), transparent 28%),
    rgba(2, 5, 4, .82);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  animation: case-overlay-in .35s ease-out both;
}

.case-opening-overlay.is-closing {
  animation: case-overlay-out .25s ease-in both;
}

.case-opening-panel {
  position: relative;
  width: min(100%, 430px);
  min-height: 570px;
  overflow: hidden;
  border: 1px solid rgba(217, 255, 87, .26);
  border-radius: 30px;
  padding: 22px 18px 18px;
  color: #f4f8e6;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(38, 52, 21, .98), rgba(8, 14, 10, .98) 62%),
    #0b100b;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .58),
    0 0 0 1px rgba(255, 255, 255, .04) inset,
    0 0 80px rgba(217, 255, 87, .08);
  animation: case-panel-in .5s cubic-bezier(.18, .9, .25, 1.2) both;
}

.case-opening-panel::before,
.case-opening-panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
}

.case-opening-panel::before {
  width: 260px;
  height: 260px;
  top: 132px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(217, 255, 87, .14), transparent 68%);
}

.case-opening-panel::after {
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 78px;
  background: linear-gradient(90deg, transparent, rgba(217, 255, 87, .28), transparent);
  transition: opacity .2s ease;
}

/* The divider is a backdrop for the scanning stage only — once the reward
   badge is revealed it lands at a fixed distance from the panel's bottom
   edge regardless of what's showing there, cutting straight across the
   badge. Fade it out for the result view instead of leaving it fixed. */
.case-opening-panel:has(.case-opening-result.is-visible)::after {
  opacity: 0;
}

.case-opening-topline {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #d9ff57;
  letter-spacing: .18em;
  font-size: 9px;
  font-weight: 900;
}

.case-opening-close {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
  color: #aab39d;
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: .2s ease;
}

.case-opening-close:hover {
  color: #f4f8e6;
  border-color: rgba(217, 255, 87, .35);
  background: rgba(217, 255, 87, .12);
}

.case-opening-heading {
  position: relative;
  z-index: 2;
  margin: 28px 0 0;
  font-size: clamp(25px, 7vw, 34px);
  letter-spacing: -.04em;
}

.case-opening-subheading {
  position: relative;
  z-index: 2;
  margin: 8px auto 0;
  max-width: 270px;
  color: #96a28c;
  font-size: 11px;
  line-height: 1.55;
}

.case-opening-stage {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 300px;
  margin: 5px auto 0;
  place-items: center;
}

/* The result view (badge + heading + text + button) is taller than the
   300px the scanning stage needs, but it's positioned absolutely, so it
   can't grow this box itself — without extra room here the claim button
   ends up flush against the panel's bottom edge. */
.case-opening-stage:has(.case-opening-result.is-visible) {
  min-height: 336px;
}

.case-opening-aura {
  position: absolute;
  width: 215px;
  height: 215px;
  border: 1px solid rgba(217, 255, 87, .22);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(217, 255, 87, .025), 0 0 0 46px rgba(217, 255, 87, .018);
  animation: case-aura-pulse 2.2s ease-in-out infinite;
}

.case-opening-aura::before,
.case-opening-aura::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(217, 255, 87, .25);
  border-radius: 50%;
  animation: case-spin 10s linear infinite;
}

.case-opening-aura::after {
  inset: 42px;
  border-style: solid;
  border-color: rgba(217, 255, 87, .15) transparent;
  animation-duration: 6s;
  animation-direction: reverse;
}

.case-crate {
  position: relative;
  display: grid;
  width: 150px;
  height: 150px;
  place-items: center;
  border: 1px solid rgba(238, 255, 170, .58);
  border-radius: 28px;
  color: #192207;
  background:
    linear-gradient(135deg, rgba(255, 255, 218, .9), rgba(151, 196, 49, .94) 54%, rgba(74, 103, 28, .98));
  box-shadow:
    0 20px 35px rgba(0, 0, 0, .38),
    0 0 35px rgba(217, 255, 87, .22),
    inset 0 2px 0 rgba(255, 255, 255, .7),
    inset 0 -14px 24px rgba(40, 64, 8, .2);
  transform: rotate(-7deg);
  animation: case-crate-float 2.8s ease-in-out infinite;
}

.case-crate::before,
.case-crate::after {
  content: "";
  position: absolute;
  background: rgba(28, 43, 6, .34);
}

.case-crate::before {
  width: 100%;
  height: 8px;
  top: 46px;
  box-shadow: 0 48px 0 rgba(28, 43, 6, .3);
}

.case-crate::after {
  width: 8px;
  height: 100%;
  left: 47px;
  box-shadow: 48px 0 0 rgba(28, 43, 6, .25);
}

.case-crate-label {
  position: relative;
  z-index: 1;
  display: grid;
  width: 66px;
  height: 66px;
  place-items: center;
  border: 2px solid rgba(25, 34, 7, .5);
  border-radius: 18px;
  background: rgba(238, 255, 170, .35);
  box-shadow: 0 3px 0 rgba(255, 255, 255, .28) inset;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.08em;
}

.case-crate-label::after {
  content: "DROP";
  position: absolute;
  bottom: 7px;
  font-size: 6px;
  letter-spacing: .2em;
}

.case-scanline {
  position: absolute;
  z-index: 3;
  width: 165px;
  height: 2px;
  border-radius: 50%;
  background: var(--case-lime);
  box-shadow: 0 0 16px 5px rgba(217, 255, 87, .52);
  opacity: .8;
  animation: case-scan 1.7s ease-in-out infinite;
  transition: opacity .2s ease;
}

/* Nothing stops the sweep once the reward is revealed, so it keeps drifting
   across the panel and crosses straight through the result text. Freeze and
   hide it as soon as the result view takes over. */
.case-opening-stage:has(.case-opening-result.is-visible) .case-scanline {
  animation-play-state: paused;
  opacity: 0;
}

.case-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--case-lime);
  box-shadow: 0 0 12px 2px rgba(217, 255, 87, .55);
  opacity: 0;
}

.case-particle:nth-child(1) { --x: -130px; --y: -90px; animation-delay: .04s; }
.case-particle:nth-child(2) { --x: 132px; --y: -62px; animation-delay: .13s; }
.case-particle:nth-child(3) { --x: -164px; --y: 12px; animation-delay: .2s; }
.case-particle:nth-child(4) { --x: 160px; --y: 33px; animation-delay: .28s; }
.case-particle:nth-child(5) { --x: -102px; --y: 104px; animation-delay: .35s; }
.case-particle:nth-child(6) { --x: 106px; --y: 104px; animation-delay: .44s; }
.case-particle:nth-child(7) { --x: -45px; --y: -142px; animation-delay: .5s; }
.case-particle:nth-child(8) { --x: 36px; --y: -142px; animation-delay: .61s; }
.case-opening-stage.is-bursting .case-particle {
  animation: case-particle-burst .8s cubic-bezier(.2, .9, .3, 1) forwards;
}

.case-opening-stage.is-bursting .case-crate {
  animation: case-crate-burst .72s cubic-bezier(.15, .8, .25, 1) both;
}

.case-opening-stage.is-bursting .case-opening-aura {
  animation: case-aura-burst .72s ease-out both;
}

.case-opening-status {
  position: absolute;
  bottom: 2px;
  color: #c6d39d;
  letter-spacing: .12em;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  transition: opacity .2s ease;
}

/* Pinned to the stage's bottom edge for the scanning phase; once the result
   view takes over (and needs more stage height than scanning does — see
   above) this caption is no longer covered and peeks out under the button. */
.case-opening-stage:has(.case-opening-result.is-visible) .case-opening-status {
  opacity: 0;
}

.case-opening-progress {
  position: absolute;
  right: 20%;
  bottom: -18px;
  left: 20%;
  height: 3px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, .1);
  transition: opacity .2s ease;
}

/* Same as the scanline/status caption: this is scanning-phase furniture
   pinned to the stage's bottom edge, never hidden once the result replaces
   the scanning animation. */
.case-opening-stage:has(.case-opening-result.is-visible) .case-opening-progress {
  opacity: 0;
}

.case-opening-progress span {
  display: block;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: var(--case-lime);
  box-shadow: 0 0 12px rgba(217, 255, 87, .8);
  animation: case-progress 1.55s ease-in-out forwards;
}

.case-opening-result {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 100%;
  inset: 0;
  padding-top: 12px;
  opacity: 0;
  pointer-events: none;
  transform: scale(.8) translateY(14px);
}

.case-opening-result.is-visible {
  opacity: 1;
  pointer-events: auto;
  animation: case-result-in .65s cubic-bezier(.16, 1, .3, 1) both;
}

.case-opening-result-badge {
  display: grid;
  width: 148px;
  height: 148px;
  margin: 0 auto;
  place-items: center;
  border: 1px solid rgba(217, 255, 87, .62);
  border-radius: 42px;
  color: #efffa4;
  background: radial-gradient(circle at 35% 25%, #728d2a, #1d2b0e 68%);
  box-shadow: 0 0 0 12px rgba(217, 255, 87, .05), 0 0 58px rgba(217, 255, 87, .3), inset 0 1px rgba(255, 255, 255, .3);
  font-size: 31px;
  font-weight: 950;
  letter-spacing: -.08em;
}

.case-opening-result-badge small {
  display: block;
  margin-top: 3px;
  color: #c9dc86;
  font-size: 9px;
  letter-spacing: .18em;
}

.case-opening-result h3 {
  margin: 28px 0 0;
  font-size: 27px;
  letter-spacing: -.04em;
}

.case-opening-result p {
  margin: 8px 0 0;
  color: #9eac91;
  font-size: 11px;
}

.case-opening-claim {
  min-width: 190px;
  margin-top: 24px;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  color: #182006;
  background: var(--case-lime);
  box-shadow: 0 9px 24px rgba(217, 255, 87, .18);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  transition: .2s ease;
}

.case-opening-claim:hover {
  background: #efffa4;
  box-shadow: 0 12px 30px rgba(217, 255, 87, .28);
  transform: translateY(-2px);
}

@keyframes case-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes case-overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes case-panel-in { from { opacity: 0; transform: translateY(32px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes case-aura-pulse { 0%, 100% { transform: scale(.94); opacity: .6; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes case-spin { to { transform: rotate(360deg); } }
@keyframes case-crate-float { 0%, 100% { transform: translateY(3px) rotate(-7deg); } 50% { transform: translateY(-9px) rotate(5deg); } }
@keyframes case-scan { 0%, 100% { transform: translateY(-70px); opacity: 0; } 20%, 80% { opacity: .85; } 50% { transform: translateY(70px); opacity: 1; } }
@keyframes case-progress { from { width: 5%; } to { width: 100%; } }
@keyframes case-particle-burst { 0% { opacity: 0; transform: translate(0, 0) scale(.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.35); } }
@keyframes case-crate-burst { 0% { transform: rotate(-7deg) scale(1); } 42% { transform: rotate(5deg) scale(1.12); } 100% { opacity: 0; transform: rotate(0deg) scale(1.65); filter: brightness(1.8); } }
@keyframes case-aura-burst { to { opacity: 0; transform: scale(1.45); } }
@keyframes case-result-in { from { opacity: 0; transform: scale(.72) translateY(20px); } 60% { transform: scale(1.04) translateY(-3px); } to { opacity: 1; transform: scale(1) translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .case-opening-overlay,
  .case-opening-panel,
  .case-opening-aura,
  .case-crate,
  .case-scanline,
  .case-opening-progress span {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-height: 700px) {
  .case-opening-panel {
    min-height: min(570px, calc(100dvh - 28px));
    padding-top: 14px;
  }
  .case-opening-heading { margin-top: 16px; }
  .case-opening-stage { min-height: 250px; }
  .case-opening-result h3 { margin-top: 16px; }
}