/* ======================================================
   CASES SECTION - Premium Redesign
   ====================================================== */

/* == SECTION BASE == */
#cases {
  background: linear-gradient(180deg, #0a0714 0%, #0d0820 40%, #110a2a 70%, #0a0714 100%);
  position: relative;
  overflow: hidden;
}

/* Animated nebula/aurora overlay */
#cases .section-video-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 30%, rgba(123,95,255,.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 70%, rgba(255,80,180,.06) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(60,120,255,.05) 0%, transparent 60%);
  animation: nebulaShift 15s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}
@keyframes nebulaShift {
  0% { opacity: .6; transform: scale(1) translate(0, 0); }
  33% { opacity: .8; transform: scale(1.05) translate(2%, -1%); }
  66% { opacity: .7; transform: scale(1.02) translate(-1%, 2%); }
  100% { opacity: .9; transform: scale(1.08) translate(1%, -2%); }
}

/* == FLOATING AMBIENT PARTICLES (CSS-only) == */
.cases-ambient-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.cases-ambient-particles .amb-p {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: ambientFloat linear infinite;
}
@keyframes ambientFloat {
  0% { opacity: 0; transform: translateY(100%) translateX(0) scale(0); }
  10% { opacity: .6; }
  50% { transform: translateY(50%) translateX(20px) scale(1); opacity: .4; }
  90% { opacity: .2; }
  100% { opacity: 0; transform: translateY(-10%) translateX(-10px) scale(.5); }
}

/* == SECTION HEADER == */
.section-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(90deg, #c8a2ff, #ff80c8, #80b0ff, #c8a2ff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: labelGradient 4s ease-in-out infinite;
  margin-bottom: 10px;
  position: relative;
  z-index: 3;
}
@keyframes labelGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.section-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: .08em;
  text-shadow:
    0 0 40px rgba(123,95,255,.4),
    0 0 80px rgba(123,95,255,.15),
    0 2px 20px rgba(0,0,0,.5);
  position: relative;
  z-index: 3;
}

.section-desc {
  font-family: 'Barlow', sans-serif;
  font-size: .88rem;
  color: rgba(200,200,232,.45);
  margin-top: 20px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  position: relative;
  z-index: 3;
}

/* == ORNAMENTAL DIVIDER (enhanced) == */
.section-divider {
  width: 220px;
  height: 24px;
  margin: 20px auto 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123,95,255,.6), transparent);
}
.section-divider .divider-gem {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #7B5FFF, #ff80c8);
  transform: rotate(45deg);
  margin: 0 12px;
  box-shadow:
    0 0 12px rgba(123,95,255,.7),
    0 0 24px rgba(123,95,255,.3),
    0 0 40px rgba(255,128,200,.15);
  animation: gemPulse 2s ease-in-out infinite;
}
@keyframes gemPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(123,95,255,.7), 0 0 24px rgba(123,95,255,.3); transform: rotate(45deg) scale(1); }
  50% { box-shadow: 0 0 18px rgba(123,95,255,.9), 0 0 36px rgba(123,95,255,.5), 0 0 50px rgba(255,128,200,.2); transform: rotate(45deg) scale(1.15); }
}

/* == CASE GRID (Redesigned v2) == */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 36px;
  margin-bottom: 50px;
  position: relative;
  z-index: 3;
  perspective: 1200px;
}

/* == CHEST CARD (Premium Glassmorphism + Holographic v2) == */
.case-card {
  position: relative;
  cursor: pointer;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(28,20,60,.88), rgba(14,10,35,.94));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0;
  overflow: visible;
  transition: transform .45s cubic-bezier(.25,.8,.25,1), box-shadow .45s ease, border-color .45s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(123,95,255,.1);
  isolation: isolate;
  opacity: 0;
  animation: cardEntrance .7s ease forwards;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), 0 0 0 rgba(123,95,255,0);
}
.case-card:nth-child(1) { animation-delay: .1s; }
.case-card:nth-child(2) { animation-delay: .2s; }
.case-card:nth-child(3) { animation-delay: .3s; }
.case-card:nth-child(4) { animation-delay: .4s; }
@keyframes cardEntrance {
  0% { opacity: 0; transform: translateY(40px) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Holographic shine overlay */
.case-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,.02) 35%,
    rgba(255,255,255,.06) 40%,
    rgba(255,255,255,.02) 45%,
    transparent 60%
  );
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  z-index: 10;
}

/* Inner glow ring */
.case-card::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.03);
  pointer-events: none;
  z-index: 1;
}

.case-card:hover {
  transform: translateY(-14px) scale(1.04);
  box-shadow:
    0 24px 70px rgba(100,40,200,.35),
    0 10px 40px rgba(0,0,0,.45),
    0 0 90px rgba(123,95,255,.15);
  border-color: rgba(123,95,255,.2);
}
.case-card:hover::before {
  opacity: 1;
  animation: holoShine 1.8s ease-in-out forwards;
}
@keyframes holoShine {
  0% { background-position: 200% 0; opacity: 0; }
  30% { opacity: 1; }
  100% { background-position: -200% 0; opacity: 0; }
}

/* Rarity top glow line (enhanced v2) */
.case-rarity-bar {
  width: 100%;
  height: 3px;
  border-radius: 18px 18px 0 0;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.case-rarity-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: barShimmer 3s ease-in-out infinite;
}
@keyframes barShimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}
.rarity-common .case-rarity-bar { background: linear-gradient(90deg, transparent, #b0b0b0, transparent); }
.rarity-rare .case-rarity-bar { background: linear-gradient(90deg, transparent, #4488ff, transparent); box-shadow: 0 0 20px rgba(68,136,255,.7), 0 0 40px rgba(68,136,255,.3); }
.rarity-epic .case-rarity-bar { background: linear-gradient(90deg, transparent, #cc44ff, transparent); box-shadow: 0 0 20px rgba(180,60,255,.7), 0 0 40px rgba(180,60,255,.3); }
.rarity-legendary .case-rarity-bar { background: linear-gradient(90deg, transparent, #ffd700, transparent); box-shadow: 0 0 20px rgba(255,210,0,.7), 0 0 40px rgba(255,210,0,.3); }

/* Rarity card glow borders */
.rarity-rare { border-color: rgba(68,136,255,.15); }
.rarity-rare:hover { box-shadow: 0 24px 70px rgba(40,100,255,.4), 0 0 110px rgba(68,136,255,.18); border-color: rgba(68,136,255,.3); }
.rarity-epic { border-color: rgba(204,68,255,.15); }
.rarity-epic:hover { box-shadow: 0 24px 70px rgba(160,40,255,.4), 0 0 110px rgba(204,68,255,.18); border-color: rgba(204,68,255,.3); }
.rarity-legendary { border-color: rgba(255,215,0,.18); }
.rarity-legendary:hover { box-shadow: 0 24px 70px rgba(200,160,0,.4), 0 0 110px rgba(255,215,0,.2); border-color: rgba(255,215,0,.35); }

/* Animated border glow for legendary */
.rarity-legendary {
  animation: cardEntrance .7s ease forwards, legendaryBorderGlow 3s ease-in-out infinite;
}
@keyframes legendaryBorderGlow {
  0%, 100% { border-color: rgba(255,215,0,.22); }
  50% { border-color: rgba(255,215,0,.45); }
}

/* Legendary card extra sparkle effect */
.rarity-legendary .case-info::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,215,0,.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,180,50,.04) 0%, transparent 50%);
  animation: legendaryAmbient 4s ease-in-out infinite alternate;
  pointer-events: none;
  border-radius: 0 0 16px 16px;
}
@keyframes legendaryAmbient {
  0% { opacity: .3; }
  100% { opacity: .8; }
}

/* == CHEST ICON AREA (enhanced) == */
.chest-icon-wrap {
  width: 100%;
  padding: 35px 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 155px;
}

/* Aura glow behind chest */
.chest-icon-wrap::before {
  content: '';
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  filter: blur(35px);
  opacity: .3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: auraBreath 3s ease-in-out infinite;
}
@keyframes auraBreath {
  0%, 100% { opacity: .25; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .45; transform: translate(-50%, -50%) scale(1.15); }
}
.rarity-common .chest-icon-wrap::before { background: rgba(160,160,160,.4); }
.rarity-rare .chest-icon-wrap::before { background: rgba(60,120,255,.5); }
.rarity-epic .chest-icon-wrap::before { background: rgba(160,40,255,.5); }
.rarity-legendary .chest-icon-wrap::before { background: rgba(255,180,0,.5); }

/* Magic circle ring around chest */
.chest-icon-wrap::after {
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 1px dashed rgba(123,95,255,.15);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: magicCircleRotate 12s linear infinite;
  pointer-events: none;
}
@keyframes magicCircleRotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.rarity-rare .chest-icon-wrap::after { border-color: rgba(68,136,255,.2); }
.rarity-epic .chest-icon-wrap::after { border-color: rgba(204,68,255,.2); }
.rarity-legendary .chest-icon-wrap::after { border-color: rgba(255,215,0,.2); }

.chest-svg-icon {
  width: 105px;
  height: 105px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.6));
  animation: chestIconFloat 3.5s ease-in-out infinite;
  transition: transform .4s cubic-bezier(.25,.8,.25,1), filter .3s;
}
.case-card:hover .chest-svg-icon {
  animation: chestIconFloatHover 1.8s ease-in-out infinite;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.7)) brightness(1.1);
}
@keyframes chestIconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(.5deg); }
  50% { transform: translateY(-8px) rotate(0deg); }
  75% { transform: translateY(-4px) rotate(-.5deg); }
}
@keyframes chestIconFloatHover {
  0%, 100% { transform: translateY(-4px) scale(1.06) rotate(0deg); }
  25% { transform: translateY(-8px) scale(1.08) rotate(1deg); }
  50% { transform: translateY(-12px) scale(1.1) rotate(0deg); }
  75% { transform: translateY(-8px) scale(1.08) rotate(-1deg); }
}

/* Particle ring around chest */
.chest-particles {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 1;
}
.chest-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
}
.rarity-common .chest-particle { background: #b0b0b0; box-shadow: 0 0 4px #a0a0a0; }
.rarity-rare .chest-particle { background: #4488ff; box-shadow: 0 0 6px #4488ff; }
.rarity-epic .chest-particle { background: #cc44ff; box-shadow: 0 0 6px #cc44ff; }
.rarity-legendary .chest-particle { background: #ffd700; box-shadow: 0 0 6px #ffd700; }
.case-card:hover .chest-particle {
  animation: orbParticle 2.2s ease-in-out infinite;
}
@keyframes orbParticle {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  30% { opacity: .9; }
  50% { opacity: .7; transform: scale(1.8) rotate(180deg); }
  100% { opacity: 0; transform: scale(0) rotate(360deg); }
}

/* == OLD 3D CHEST (hidden) == */
.chest-wrap { display: none; }
.chest-3d, .chest-body, .chest-face, .chest-front, .chest-side, .chest-lid, .chest-lid-side,
.chest-lock, .chest-glow, .chest-rune { display: none; }

/* == CASE INFO (v2) == */
.case-info {
  width: 100%;
  padding: 0 22px 24px;
  text-align: center;
  position: relative;
}
/* Subtle separator between icon and info */
.case-info::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123,95,255,.12), transparent);
}

.case-tier-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px;
  backdrop-filter: blur(4px);
  position: relative;
  overflow: hidden;
}
.case-tier-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  animation: badgeShine 3s ease-in-out infinite;
}
@keyframes badgeShine {
  0%, 80%, 100% { left: -100%; }
  40% { left: 100%; }
}
.rarity-common .case-tier-badge {
  background: rgba(160,160,160,.06);
  color: rgba(160,160,160,.7);
  border: 1px solid rgba(160,160,160,.15);
}
.rarity-rare .case-tier-badge {
  background: rgba(68,136,255,.08);
  color: rgba(100,160,255,.8);
  border: 1px solid rgba(68,136,255,.25);
  box-shadow: 0 0 10px rgba(68,136,255,.1);
}
.rarity-epic .case-tier-badge {
  background: rgba(204,68,255,.08);
  color: rgba(210,120,255,.8);
  border: 1px solid rgba(204,68,255,.25);
  box-shadow: 0 0 10px rgba(204,68,255,.1);
}
.rarity-legendary .case-tier-badge {
  background: rgba(255,215,0,.08);
  color: rgba(255,220,80,.8);
  border: 1px solid rgba(255,215,0,.25);
  box-shadow: 0 0 10px rgba(255,215,0,.1);
  animation: legendBadgePulse 2s ease-in-out infinite;
}
@keyframes legendBadgePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,215,0,.1); }
  50% { box-shadow: 0 0 18px rgba(255,215,0,.25); }
}

.case-name {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: rgba(240,225,255,.95);
  letter-spacing: .08em;
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.case-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.case-price .coin-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe66d, #c8941e);
  box-shadow: 0 0 8px rgba(200,150,0,.6);
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  animation: coinSpin 4s linear infinite;
}
@keyframes coinSpin {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}
.case-price .coin-icon::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
}
.case-price .coin-amount { color: rgba(194,150,68,.95); }

/* == OPEN BUTTON (Premium v2) == */
.btn-open-case {
  width: 100%;
  padding: 13px 0;
  background: linear-gradient(135deg, rgba(100,40,180,.28), rgba(60,20,120,.38));
  border: 1px solid rgba(160,80,255,.22);
  border-radius: 10px;
  color: rgba(215,175,255,.95);
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .35s cubic-bezier(.25,.8,.25,1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.btn-open-case::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,.1) 50%, transparent 75%);
  transition: left .6s;
}
.btn-open-case:hover::before { left: 100%; }
.btn-open-case:hover {
  background: linear-gradient(135deg, rgba(130,60,220,.5), rgba(90,35,160,.6));
  border-color: rgba(185,110,255,.55);
  box-shadow: 0 6px 28px rgba(130,60,220,.4), 0 0 45px rgba(130,60,220,.12);
  transform: translateY(-3px);
  color: #fff;
}
.btn-open-case:active {
  transform: translateY(0);
  box-shadow: 0 2px 12px rgba(130,60,220,.25);
}

/* Rarity-specific buttons */
.rarity-rare .btn-open-case {
  background: linear-gradient(135deg, rgba(40,80,180,.3), rgba(20,50,120,.4));
  border-color: rgba(68,136,255,.25);
  color: rgba(150,190,255,.95);
}
.rarity-rare .btn-open-case:hover {
  background: linear-gradient(135deg, rgba(60,110,220,.5), rgba(35,70,160,.6));
  border-color: rgba(100,160,255,.6);
  box-shadow: 0 4px 24px rgba(60,110,220,.35), 0 0 40px rgba(68,136,255,.1);
}
.rarity-epic .btn-open-case {
  background: linear-gradient(135deg, rgba(120,30,180,.3), rgba(80,15,130,.4));
  border-color: rgba(204,68,255,.25);
  color: rgba(220,160,255,.95);
}
.rarity-epic .btn-open-case:hover {
  background: linear-gradient(135deg, rgba(160,50,220,.5), rgba(110,30,170,.6));
  border-color: rgba(220,100,255,.6);
  box-shadow: 0 4px 24px rgba(160,50,220,.35), 0 0 40px rgba(204,68,255,.1);
}
.rarity-legendary .btn-open-case {
  background: linear-gradient(135deg, rgba(160,100,10,.3), rgba(120,70,5,.4));
  border-color: rgba(255,200,0,.3);
  color: rgba(255,225,100,.95);
}
.rarity-legendary .btn-open-case:hover {
  background: linear-gradient(135deg, rgba(200,130,20,.5), rgba(160,90,10,.6));
  border-color: rgba(255,215,0,.65);
  box-shadow: 0 4px 24px rgba(220,160,0,.35), 0 0 40px rgba(255,215,0,.15);
}

/* == PREVIEW BUTTON (v2) == */
.btn-preview {
  width: 100%;
  padding: 9px 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px;
  color: rgba(175,135,255,.35);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 10px;
  transition: all .3s cubic-bezier(.25,.8,.25,1);
}
.btn-preview:hover {
  background: rgba(123,95,255,.06);
  color: rgba(200,165,255,.7);
  border-color: rgba(123,95,255,.18);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(123,95,255,.08);
}

/* ====================================================
   CASE OPENING MODAL (Premium Redesign v2)
   ==================================================== */
.case-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4,2,15,.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: modalFadeIn .4s ease;
  overflow: hidden;
}
.case-modal-overlay.active { display: flex; }

/* Video background in case opening modal */
.case-modal-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
  filter: saturate(0.5) brightness(0.35) sepia(0.2);
  z-index: 0;
  pointer-events: none;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Animated particles in modal bg */
.case-modal-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(123,95,255,.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,80,180,.06) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(60,120,255,.05) 0%, transparent 50%);
  animation: nebulaShift 20s ease-in-out infinite alternate;
  pointer-events: none;
}

.case-modal {
  width: 92%;
  max-width: 760px;
  background: linear-gradient(170deg, rgba(22,16,50,.96), rgba(10,6,28,.98));
  border-radius: 24px;
  border: 1px solid rgba(123,95,255,.18);
  padding: 0;
  position: relative;
  box-shadow:
    0 40px 120px rgba(0,0,0,.7),
    0 0 100px rgba(123,95,255,.1),
    inset 0 1px 0 rgba(255,255,255,.04);
  animation: modalSlideIn .5s cubic-bezier(.25,.8,.25,1);
  overflow: hidden;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(40px) scale(.93); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Animated gradient top bar */
.case-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 5%, #ff80c8 20%, #7B5FFF 40%, #80b0ff 60%, #7B5FFF 80%, transparent 95%);
  background-size: 200% 100%;
  animation: modalBarShimmer 3s ease-in-out infinite;
  border-radius: 24px 24px 0 0;
  z-index: 5;
}
@keyframes modalBarShimmer {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
/* Subtle inner glow */
.case-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.03);
  pointer-events: none;
  z-index: 0;
}

/* Modal inner padding wrapper */
.case-modal .modal-header,
.case-modal .strip-container,
.case-modal .case-result {
  position: relative;
  z-index: 2;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  color: rgba(200,180,230,.5);
  font-size: 1rem;
  cursor: pointer;
  transition: all .3s cubic-bezier(.25,.8,.25,1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(8px);
}
.modal-close:hover {
  background: rgba(255,60,60,.12);
  border-color: rgba(255,60,60,.3);
  color: #ff6060;
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 0 20px rgba(255,60,60,.15);
}

.modal-header {
  text-align: center;
  padding: 32px 32px 24px;
}
.modal-case-name {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: transparent;
  background: linear-gradient(180deg, #fff 30%, rgba(200,180,255,.8) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: .1em;
  filter: drop-shadow(0 0 20px rgba(123,95,255,.4));
  text-transform: uppercase;
}
.modal-case-rarity {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-top: 8px;
  opacity: .7;
}

/* == STRIP AREA (Redesigned) == */
.strip-container {
  position: relative;
  height: 130px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(10,6,28,.6) 100%);
  border: 1px solid rgba(123,95,255,.1);
  margin: 0 28px 8px;
  box-shadow:
    inset 0 2px 12px rgba(0,0,0,.4),
    0 4px 20px rgba(0,0,0,.3);
}
.strip-container::before,
.strip-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 5;
  pointer-events: none;
}
.strip-container::before {
  left: 0;
  background: linear-gradient(90deg, rgba(10,6,28,.98), rgba(10,6,28,.6), transparent);
}
.strip-container::after {
  right: 0;
  background: linear-gradient(-90deg, rgba(10,6,28,.98), rgba(10,6,28,.6), transparent);
}

/* Center indicator (enhanced) */
.strip-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  z-index: 6;
  background: linear-gradient(180deg, #ffd700, #ffcc00 40%, #ffaa00 60%, #ffd700);
  box-shadow: 0 0 20px rgba(255,200,0,.7), 0 0 40px rgba(255,200,0,.3), 0 0 60px rgba(255,200,0,.15);
  animation: indicatorPulse 1.5s ease-in-out infinite;
}
@keyframes indicatorPulse {
  0%,100% { box-shadow: 0 0 15px rgba(255,200,0,.6), 0 0 30px rgba(255,200,0,.25); }
  50% { box-shadow: 0 0 25px rgba(255,200,0,.8), 0 0 50px rgba(255,200,0,.4), 0 0 70px rgba(255,200,0,.15); }
}
.strip-indicator::before,
.strip-indicator::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
}
.strip-indicator::before {
  top: -2px;
  border-top-color: #ffd700;
  filter: drop-shadow(0 0 6px rgba(255,200,0,.6));
}
.strip-indicator::after {
  bottom: -2px;
  border-bottom-color: #ffd700;
  filter: drop-shadow(0 0 6px rgba(255,200,0,.6));
}

.strip-track {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  will-change: transform;
}

.strip-item {
  width: 120px;
  height: 130px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-right: 1px solid rgba(255,255,255,.03);
  position: relative;
  overflow: hidden;
  transition: background .3s, transform .3s;
}
.strip-item::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .1;
}
.strip-item[data-rarity="common"]::before { background: linear-gradient(180deg, rgba(160,160,160,.15), transparent 70%); }
.strip-item[data-rarity="rare"]::before { background: linear-gradient(180deg, rgba(68,136,255,.2), transparent 70%); }
.strip-item[data-rarity="epic"]::before { background: linear-gradient(180deg, rgba(204,68,255,.2), transparent 70%); }
.strip-item[data-rarity="legendary"]::before { background: linear-gradient(180deg, rgba(255,215,0,.25), transparent 70%); }

.strip-item-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.6));
  transition: transform .3s ease;
}
.strip-item-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .58rem;
  font-weight: 700;
  color: rgba(200,180,230,.75);
  text-align: center;
  max-width: 105px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .06em;
  line-height: 1.2;
}

/* == RESULT DIVIDER == */
.result-divider {
  width: 80%;
  max-width: 400px;
  height: 1px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, transparent, rgba(123,95,255,.3), transparent);
  position: relative;
}
.result-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background: rgba(123,95,255,.5);
  box-shadow: 0 0 8px rgba(123,95,255,.4);
}

/* == RESULT REVEAL (Premium v2) == */
.case-result {
  text-align: center;
  padding: 28px 32px 36px;
  display: none;
  position: relative;
}
.case-result.revealed { display: block; animation: resultRevealIn .7s cubic-bezier(.25,.8,.25,1); }
@keyframes resultRevealIn {
  0% { opacity: 0; transform: scale(.6) translateY(20px); }
  60% { transform: scale(1.04) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.result-glow {
  width: 160px;
  height: 160px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: resultGlowPulse 2.5s ease-in-out infinite;
  border: 2px solid rgba(123,95,255,.15);
}
/* Rotating ring around result */
.result-glow::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(123,95,255,.2);
  animation: magicCircleRotate 8s linear infinite;
  pointer-events: none;
}
/* Inner subtle ring */
.result-glow::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(123,95,255,.06);
  animation: magicCircleRotate 15s linear infinite reverse;
  pointer-events: none;
}
@keyframes resultGlowPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(123,95,255,.2), 0 0 80px rgba(123,95,255,.08); border-color: rgba(123,95,255,.15); }
  50% { box-shadow: 0 0 60px rgba(123,95,255,.35), 0 0 120px rgba(123,95,255,.12); border-color: rgba(123,95,255,.25); }
}
.result-glow img {
  width: 95px;
  height: 95px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.6));
  animation: resultIconPulse 2.5s ease-in-out infinite;
}
@keyframes resultIconPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.03) rotate(.5deg); }
  50% { transform: scale(1.06) rotate(0deg); }
  75% { transform: scale(1.03) rotate(-.5deg); }
}

.result-rarity {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: inline-block;
  padding: 5px 18px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.result-name {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 0 25px rgba(123,95,255,.3);
  margin-bottom: 8px;
  animation: resultNameGlow 2.5s ease-in-out infinite alternate;
}
@keyframes resultNameGlow {
  0% { text-shadow: 0 0 20px rgba(123,95,255,.2), 0 2px 10px rgba(0,0,0,.3); }
  100% { text-shadow: 0 0 40px rgba(123,95,255,.45), 0 0 80px rgba(123,95,255,.15), 0 2px 10px rgba(0,0,0,.3); }
}
.result-desc {
  font-family: 'Barlow', sans-serif;
  font-size: .75rem;
  color: rgba(200,180,230,.45);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Result close button - styled as premium */
.case-result .btn-open-case {
  margin-top: 20px !important;
  background: linear-gradient(135deg, rgba(100,40,180,.25), rgba(60,20,120,.35)) !important;
  border: 1px solid rgba(160,80,255,.2) !important;
  border-radius: 12px !important;
  padding: 14px 0 !important;
  font-size: .75rem !important;
  letter-spacing: .15em !important;
  backdrop-filter: blur(8px);
  transition: all .3s cubic-bezier(.25,.8,.25,1) !important;
}
.case-result .btn-open-case:hover {
  background: linear-gradient(135deg, rgba(130,60,220,.4), rgba(90,35,160,.5)) !important;
  border-color: rgba(185,110,255,.5) !important;
  box-shadow: 0 6px 30px rgba(130,60,220,.3), 0 0 50px rgba(130,60,220,.1) !important;
  transform: translateY(-3px) !important;
}

/* Result rarity-specific colors (enhanced) */
.result-glow[data-rarity="common"] {
  background: radial-gradient(circle, rgba(160,160,160,.08), transparent 70%);
  border-color: rgba(160,160,160,.12);
}
.result-glow[data-rarity="common"]::before { border-color: rgba(160,160,160,.15); }
.result-glow[data-rarity="rare"] {
  background: radial-gradient(circle, rgba(68,136,255,.12), transparent 70%);
  border-color: rgba(68,136,255,.2);
}
.result-glow[data-rarity="rare"]::before { border-color: rgba(68,136,255,.2); }
.result-glow[data-rarity="epic"] {
  background: radial-gradient(circle, rgba(204,68,255,.15), transparent 70%);
  border-color: rgba(204,68,255,.2);
}
.result-glow[data-rarity="epic"]::before { border-color: rgba(204,68,255,.2); }
.result-glow[data-rarity="legendary"] {
  background: radial-gradient(circle, rgba(255,215,0,.18), transparent 70%);
  border-color: rgba(255,215,0,.25);
}
.result-glow[data-rarity="legendary"]::before { border-color: rgba(255,215,0,.25); }

.result-rarity[data-rarity="common"] { color: #b0b0b0; background: rgba(160,160,160,.06); border: 1px solid rgba(160,160,160,.15); }
.result-rarity[data-rarity="rare"] { color: #6ab0ff; background: rgba(68,136,255,.08); border: 1px solid rgba(68,136,255,.2); box-shadow: 0 0 12px rgba(68,136,255,.1); }
.result-rarity[data-rarity="epic"] { color: #dd88ff; background: rgba(204,68,255,.08); border: 1px solid rgba(204,68,255,.2); box-shadow: 0 0 12px rgba(204,68,255,.1); }
.result-rarity[data-rarity="legendary"] { color: #ffe066; background: rgba(255,215,0,.08); border: 1px solid rgba(255,215,0,.22); box-shadow: 0 0 15px rgba(255,215,0,.12); }
.result-rarity[data-rarity="uncommon"] { color: #70e090; background: rgba(80,200,120,.08); border: 1px solid rgba(80,200,120,.2); }

/* Legendary result extra effects */
.result-glow[data-rarity="legendary"] {
  animation: resultGlowPulse 2.5s ease-in-out infinite, legendaryResultGlow 3s ease-in-out infinite;
}
@keyframes legendaryResultGlow {
  0%, 100% { box-shadow: 0 0 50px rgba(255,215,0,.3), 0 0 100px rgba(255,215,0,.12); border-color: rgba(255,215,0,.25); }
  50% { box-shadow: 0 0 80px rgba(255,215,0,.5), 0 0 150px rgba(255,215,0,.2); border-color: rgba(255,215,0,.4); }
}

/* Epic result glow */
.result-glow[data-rarity="epic"] {
  animation: resultGlowPulse 2.5s ease-in-out infinite, epicResultGlow 3s ease-in-out infinite;
}
@keyframes epicResultGlow {
  0%, 100% { box-shadow: 0 0 40px rgba(204,68,255,.2), 0 0 80px rgba(204,68,255,.08); }
  50% { box-shadow: 0 0 60px rgba(204,68,255,.35), 0 0 120px rgba(204,68,255,.15); }
}

/* == RP RAIN ANIMATION == */
.rp-rain-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}
.rp-coin {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe66d, #c8941e);
  box-shadow: 0 0 8px rgba(200,150,0,.5);
  animation: rpFall linear forwards;
}
@keyframes rpFall {
  0% { opacity: 1; transform: translateY(-20px) rotate(0deg); }
  80% { opacity: .8; }
  100% { opacity: 0; transform: translateY(100vh) rotate(720deg); }
}

.rp-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd700;
  box-shadow: 0 0 6px #ffd700;
  animation: rpSparkle 1s ease-out forwards;
}
@keyframes rpSparkle {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0); }
}

/* == BEAM EFFECT == */
.reveal-beam {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: 0;
  transform: translateX(-50%);
  background: linear-gradient(0deg, rgba(123,95,255,.8), transparent);
  filter: blur(2px);
  animation: beamRise .6s ease-out forwards;
  pointer-events: none;
}
@keyframes beamRise {
  0% { height: 0; opacity: 0; }
  50% { opacity: 1; }
  100% { height: 100%; opacity: 0; }
}

/* == LEGENDARY SHINE OVERLAY == */
.legendary-shine-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255,215,0,.05) 45%,
    rgba(255,215,0,.1) 50%,
    rgba(255,215,0,.05) 55%,
    transparent 70%
  );
  background-size: 300% 300%;
  animation: legendaryShine 4s ease-in-out infinite;
  pointer-events: none;
  border-radius: 16px;
  z-index: 0;
}
@keyframes legendaryShine {
  0% { background-position: 200% 200%; }
  100% { background-position: -200% -200%; }
}

/* ====================================================
   PREVIEW MODAL (Redesigned v2)
   ==================================================== */
.preview-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4,2,15,.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: modalFadeIn .4s ease;
  padding: 20px;
}
.preview-modal-overlay.active { display: flex; }

.preview-modal {
  width: 92%;
  max-width: 680px;
  background: linear-gradient(170deg, rgba(22,16,50,.96), rgba(10,6,28,.98));
  border-radius: 24px;
  border: 1px solid rgba(123,95,255,.18);
  padding: 0;
  position: relative;
  box-shadow:
    0 40px 120px rgba(0,0,0,.7),
    0 0 80px rgba(123,95,255,.08),
    inset 0 1px 0 rgba(255,255,255,.04);
  animation: modalSlideIn .5s cubic-bezier(.25,.8,.25,1);
  overflow: hidden;
}
/* Animated top accent bar */
.preview-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(123,95,255,.6), rgba(180,130,255,.8), rgba(123,95,255,.6), transparent);
  background-size: 200% 100%;
  animation: shimmerBar 3s linear infinite;
}

/* Preview modal header */
.preview-modal .modal-header {
  padding: 32px 32px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(123,95,255,.08);
}

/* Preview items scrollable container */
.preview-items-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 55vh;
  overflow-y: auto;
  padding: 8px 24px 24px;
}
.preview-items-grid::-webkit-scrollbar { width: 5px; }
.preview-items-grid::-webkit-scrollbar-track { background: rgba(255,255,255,.02); border-radius: 3px; }
.preview-items-grid::-webkit-scrollbar-thumb { background: rgba(123,95,255,.25); border-radius: 3px; }
.preview-items-grid::-webkit-scrollbar-thumb:hover { background: rgba(123,95,255,.4); }

/* Rarity group separator header */
.preview-rarity-sep {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 18px 8px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.preview-rarity-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .2;
}

/* Inner grid for items within a rarity group */
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}

/* Individual preview item card */
.preview-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.preview-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,.05);
  transition: background .25s;
}
.preview-item:hover {
  background: rgba(123,95,255,.08);
  border-color: rgba(123,95,255,.2);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* Rarity-specific preview item borders */
.preview-item.rarity-legendary { border-color: rgba(255,215,0,.15); }
.preview-item.rarity-legendary::before { background: linear-gradient(90deg, transparent, rgba(255,215,0,.5), transparent); }
.preview-item.rarity-legendary:hover { border-color: rgba(255,215,0,.35); box-shadow: 0 8px 30px rgba(255,215,0,.1); }

.preview-item.rarity-epic { border-color: rgba(204,68,255,.12); }
.preview-item.rarity-epic::before { background: linear-gradient(90deg, transparent, rgba(204,68,255,.4), transparent); }
.preview-item.rarity-epic:hover { border-color: rgba(204,68,255,.3); box-shadow: 0 8px 30px rgba(204,68,255,.08); }

.preview-item.rarity-rare { border-color: rgba(68,136,255,.1); }
.preview-item.rarity-rare::before { background: linear-gradient(90deg, transparent, rgba(68,136,255,.35), transparent); }
.preview-item.rarity-rare:hover { border-color: rgba(68,136,255,.25); box-shadow: 0 8px 30px rgba(68,136,255,.08); }

.preview-item.rarity-uncommon { border-color: rgba(80,200,120,.08); }
.preview-item.rarity-uncommon::before { background: linear-gradient(90deg, transparent, rgba(80,200,120,.3), transparent); }
.preview-item.rarity-uncommon:hover { border-color: rgba(80,200,120,.2); }

.preview-item img, .preview-item-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.preview-item-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  color: rgba(220,200,245,.75);
  text-align: center;
  letter-spacing: .04em;
  line-height: 1.2;
}
.preview-item-rar {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Preview modal close button override */
.preview-modal .modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
}

/* == RESPONSIVE (enhanced) == */
@media (max-width: 768px) {
  .cases-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
  }
  .case-card:hover {
    transform: translateY(-6px) scale(1.01);
  }
  .chest-svg-icon { width: 85px; height: 85px; }
  .chest-icon-wrap { min-height: 130px; padding: 25px 15px 15px; }
  .strip-container { height: 110px; margin: 0 16px 8px; }
  .strip-item { width: 100px; height: 110px; }
  .modal-header { padding: 24px 20px 18px; }
  .modal-case-name { font-size: 1.15rem; }
  .case-result { padding: 20px 20px 28px; }
  .result-glow { width: 130px; height: 130px; }
  .result-glow img { width: 80px; height: 80px; }
  .result-name { font-size: 1.2rem; }
  .preview-items-grid { padding: 8px 16px 20px; }
  .preview-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .preview-item { padding: 12px 8px 10px; }
  .preview-item img, .preview-item-icon { width: 40px; height: 40px; }
}

@media (max-width: 480px) {
  .cases-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .case-card:hover {
    transform: translateY(-4px);
  }
  .section-title { letter-spacing: .04em; }
  .chest-svg-icon { width: 75px; height: 75px; }
  .strip-item { width: 85px; height: 90px; }
  .strip-container { height: 90px; margin: 0 12px 8px; }
  .strip-item-icon { width: 40px; height: 40px; }
  .result-glow { width: 110px; height: 110px; }
  .result-glow img { width: 70px; height: 70px; }
  .result-name { font-size: 1rem; }
  .modal-header { padding: 20px 16px 14px; }
  .case-result { padding: 16px 16px 24px; }
}

@media (min-width: 1400px) {
  .cases-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* == CUSTOM SCROLLBAR FOR SECTION == */
#cases ::-webkit-scrollbar { width: 4px; }
#cases ::-webkit-scrollbar-track { background: transparent; }
#cases ::-webkit-scrollbar-thumb { background: rgba(123,95,255,.2); border-radius: 2px; }

/* == BACKGROUND PARTICLES (modal) == */
.case-open-bg-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bgp {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  opacity: 0;
  animation: bgpFloat linear infinite;
}
@keyframes bgpFloat {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  15% { opacity: .6; }
  50% { opacity: .4; transform: translateY(-50vh) scale(1); }
  100% { opacity: 0; transform: translateY(-100vh) scale(0.3); }
}

/* == RESULT PARTICLES == */
.result-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}
.rp {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: rpExplode ease-out forwards;
}
@keyframes rpExplode {
  0% { opacity: 1; transform: scale(0) translateY(0); }
  30% { opacity: .9; transform: scale(1.2) translateY(-20px); }
  100% { opacity: 0; transform: scale(0.3) translateY(-80px); }
}
.rp-sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
  animation: rpSparkleAnim ease-out forwards;
}
@keyframes rpSparkleAnim {
  0% { opacity: 1; transform: scale(0); }
  50% { opacity: .8; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(0); }
}
.result-beam {
  position: absolute;
  bottom: 30%;
  height: 0;
  opacity: 0;
  animation: resultBeamRise ease-out forwards;
}
@keyframes resultBeamRise {
  0% { height: 0; opacity: 0; }
  30% { opacity: .7; }
  100% { height: 40vh; opacity: 0; }
}

/* == STRIP ITEM RARITY BACKGROUNDS (enhanced) == */
.strip-item.rarity-common { background: linear-gradient(180deg, rgba(160,160,160,.06), rgba(160,160,160,.02)); }
.strip-item.rarity-uncommon { background: linear-gradient(180deg, rgba(80,200,120,.08), rgba(80,200,120,.02)); }
.strip-item.rarity-rare { background: linear-gradient(180deg, rgba(68,136,255,.1), rgba(68,136,255,.03)); border-right-color: rgba(68,136,255,.06); }
.strip-item.rarity-epic { background: linear-gradient(180deg, rgba(204,68,255,.1), rgba(204,68,255,.03)); border-right-color: rgba(204,68,255,.06); }
.strip-item.rarity-legendary { background: linear-gradient(180deg, rgba(255,215,0,.12), rgba(255,215,0,.03)); border-right-color: rgba(255,215,0,.06); }

/* Strip item rarity top accent */
.strip-item.rarity-rare::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, rgba(68,136,255,.4), transparent); }
.strip-item.rarity-epic::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, rgba(204,68,255,.4), transparent); }
.strip-item.rarity-legendary::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, rgba(255,215,0,.5), transparent); }

/* == STRIP ITEM SHINE + CORNER == */
.strip-item-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,.04) 50%, transparent 60%);
  pointer-events: none;
}
.strip-item-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent rgba(255,255,255,.03) transparent transparent;
}
.strip-item-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.strip-item-rar {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .45rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* == RESULT ICON IMG == */
.result-icon-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
  animation: resultIconPulse 2s ease-in-out infinite;
}

/* == REDUCED MOTION == */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}