/* ── Opening overlay ── */
.opening-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 50% 40% at 50% 45%, rgba(139, 44, 255, 0.28), transparent 55%),
    radial-gradient(ellipse at center, rgba(8, 2, 18, 0.96), rgba(5, 6, 11, 0.98));
  backdrop-filter: blur(16px);
}

.opening-brand {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(520px, 70vw);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transform: translate(-50%, -50%);
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 40px rgba(139, 44, 255, 0.4));
}

.opening-brand img {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.opening-brand span {
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 92px);
  font-style: italic;
  font-weight: 800;
  line-height: 0.9;
  white-space: nowrap;
  color: #fff;
}

.opening-overlay.is-active { display: flex; }

.opening-stage {
  position: relative;
  width: min(960px, 96vw);
  text-align: center;
  z-index: 2;
}

.opening-case {
  position: relative;
  width: 260px;
  height: 200px;
  margin: 0 auto 40px;
  display: grid;
  place-items: center;
}

.opening-case::before {
  content: "";
  position: absolute;
  inset: 10% 0;
  background: radial-gradient(ellipse, rgba(139, 44, 255, 0.55), rgba(184, 76, 255, 0.22), transparent 70%);
  filter: blur(28px);
  z-index: 0;
  animation: glow-breathe 2s ease-in-out infinite;
}

.opening-case img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 40px rgba(139, 44, 255, 0.5))
    drop-shadow(0 0 70px rgba(61, 8, 124, 0.35));
}

.opening-overlay.stage-glow .opening-case {
  animation: case-open-pulse 1s ease-in-out infinite alternate;
}

.opening-overlay.stage-glow .opening-case img {
  filter:
    drop-shadow(0 0 70px rgba(139, 44, 255, 0.85))
    drop-shadow(0 0 50px rgba(184, 76, 255, 0.45));
}

@keyframes case-open-pulse {
  from { transform: scale(1) rotate(0deg); }
  to { transform: scale(1.1) rotate(1deg); }
}

.opening-overlay.stage-flash {
  animation: screen-flash 0.22s ease-out;
}

@keyframes screen-flash {
  0% { background-color: rgba(139, 44, 255, 0.12); }
  100% { background-color: transparent; }
}

.roulette-stage { display: none; width: 100%; }
.opening-overlay.stage-roulette .opening-case { display: none; }
.opening-overlay.stage-roulette .opening-status { opacity: 0; }
.opening-overlay.stage-roulette .roulette-stage { display: block; animation: reveal-up 0.4s var(--ease-out); }

.roulette-frame {
  position: relative;
  height: 168px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(124, 60, 255, 0.4);
  background: rgba(10, 12, 22, 0.85);
  box-shadow:
    0 0 80px rgba(124, 60, 255, 0.22),
    0 0 40px rgba(245, 185, 66, 0.08),
    inset 0 0 40px rgba(0, 0, 0, 0.4);
}

.roulette-frame::before,
.roulette-frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.roulette-frame::before { left: 0; background: linear-gradient(90deg, #070912, transparent); }
.roulette-frame::after { right: 0; background: linear-gradient(270deg, #070912, transparent); }

.roulette-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 120px;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, var(--accent-gold), var(--accent-purple));
  box-shadow: 0 0 24px var(--accent-purple), 0 0 12px var(--accent-gold);
  z-index: 3;
  pointer-events: none;
}

.roulette-marker::before,
.roulette-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

.roulette-marker::before {
  top: -10px;
  border-bottom: 10px solid var(--accent-gold);
}

.roulette-marker::after {
  bottom: -10px;
  border-top: 10px solid var(--accent-purple);
}

.roulette-strip {
  display: flex;
  gap: 12px;
  padding: 24px 16px;
  width: max-content;
  will-change: transform;
}

.roulette-item {
  width: 128px;
  height: 120px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  display: grid;
  place-items: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.roulette-item img {
  width: 96px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(124, 60, 255, 0.2));
}

.roulette-item.rarity-mythic {
  border-color: rgba(255, 159, 28, 0.55);
  box-shadow: 0 0 28px rgba(255, 159, 28, 0.2);
}
.roulette-item.rarity-legendary { border-color: rgba(245, 185, 66, 0.5); box-shadow: 0 0 20px rgba(245, 185, 66, 0.15); }
.roulette-item.rarity-epic { border-color: rgba(217, 70, 239, 0.45); }
.roulette-item.rarity-rare { border-color: rgba(139, 92, 246, 0.45); }
.roulette-item.rarity-uncommon { border-color: rgba(76, 141, 255, 0.45); }

.roulette-item.is-center {
  border-color: rgba(245, 185, 66, 0.7);
  box-shadow: 0 0 32px rgba(245, 185, 66, 0.25);
  transform: scale(1.04);
}

/* ── Result modal ── */
.result-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(ellipse 50% 45% at 50% 48%, rgba(124, 60, 255, 0.22), transparent 55%),
    rgba(4, 6, 14, 0.9);
  backdrop-filter: blur(20px);
}

.result-modal.is-active { display: flex; }

.result-card {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100dvh - 48px);
  padding: 36px 32px;
  border-radius: var(--radius-xl);
  background: var(--bg-glass);
  border: 1px solid color-mix(in srgb, var(--r-color, var(--accent-purple)) 40%, var(--border-subtle));
  backdrop-filter: blur(16px);
  text-align: center;
  overflow: hidden;
  animation: result-in 0.55s var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 80px color-mix(in srgb, var(--r-color, var(--accent-purple)) 22%, transparent);
}

.result-card.is-legendary {
  border-color: rgba(245, 185, 66, 0.55);
  box-shadow: var(--shadow-glow-gold-strong), 0 0 120px rgba(124, 60, 255, 0.22);
}

.result-card .label,
.result-card h2,
.result-card .skin,
.result-card .value,
.result-card .rarity-label,
.result-actions {
  position: relative;
  z-index: 1;
}

.result-card .label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 700;
}

.result-card h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  margin-bottom: 4px;
}

.result-card .skin { font-size: 17px; color: var(--text-secondary); margin-bottom: 24px; }

.result-card .weapon-img {
  position: relative;
  z-index: 1;
  width: min(300px, 80vw);
  height: 210px;
  object-fit: contain;
  margin: 0;
  filter:
    drop-shadow(0 20px 50px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 36px color-mix(in srgb, var(--r-color, var(--accent-purple)) 55%, transparent));
}

.result-card.is-legendary .weapon-img {
  animation: weapon-reveal 1.2s var(--ease-spring);
  filter: drop-shadow(0 0 60px rgba(245, 185, 66, 0.55)) drop-shadow(0 0 90px rgba(245, 185, 66, 0.25));
}

@keyframes weapon-reveal {
  0% { transform: scale(0.6) rotate(-5deg); opacity: 0; }
  70% { transform: scale(1.06) rotate(1deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.result-card .value {
  font-size: 36px;
  font-weight: 800;
  color: var(--accent-gold);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(245, 185, 66, 0.5);
}

.result-card .rarity-label { margin-bottom: 28px; }

.result-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
.result-actions .btn { width: 100%; }

@keyframes result-in {
  from { opacity: 0; transform: scale(0.88) translateY(30px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.result-modal.is-legendary .result-card {
  animation: result-in 0.55s var(--ease-out), subtle-shake 0.5s 0.55s;
}

@keyframes subtle-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* Keep every result action on screen on small portrait phones. */
@media (max-height: 760px), (max-width: 600px) {
  .result-modal { padding: 8px; }
  .result-card {
    max-height: calc(100dvh - 16px);
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .result-card .label { margin-bottom: 4px; }
  .result-card h2 { font-size: clamp(22px, 5vw, 30px); }
  .result-card .skin { font-size: 13px; margin-bottom: 6px; }
  .result-card .weapon-img { height: clamp(70px, 20dvh, 140px); }
  .result-weapon { margin-bottom: 6px; overflow: hidden; }
  .result-card .value { font-size: 26px; margin-bottom: 4px; }
  .result-card .rarity-label { margin-bottom: 8px; }
  .result-actions { gap: 5px; }
  .result-actions .btn { min-height: 36px; height: auto; padding: 5px 8px; font-size: 12px; }
}

/* Short landscape phones: image and result details share a row; actions stay below. */
@media (orientation: landscape) and (max-height: 520px) {
  .result-modal { padding: 4px; }
  .result-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "weapon label"
      "weapon title"
      "weapon skin"
      "weapon value"
      "weapon rarity"
      "actions actions";
    gap: 2px 10px;
    align-items: center;
    width: min(780px, 100%);
    max-height: calc(100dvh - 8px);
    padding: 8px 10px;
    overflow-y: auto;
  }
  .result-card .label { grid-area: label; margin: 0; font-size: 9px; }
  .result-card h2 { grid-area: title; margin: 0; font-size: clamp(18px, 4.5vh, 26px); }
  .result-card .skin { grid-area: skin; margin: 0; font-size: 11px; }
  .result-weapon { grid-area: weapon; margin: 0; min-width: 0; overflow: hidden; }
  .result-card .weapon-img { width: min(100%, 280px); height: clamp(60px, 37dvh, 150px); }
  .result-card .value { grid-area: value; margin: 0; font-size: clamp(19px, 6vh, 28px); }
  .result-card .rarity-label { grid-area: rarity; margin: 0; }
  .result-card .rarity-label .badge { padding: 2px 7px; font-size: 9px; }
  .result-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 4px;
  }
  .result-actions .btn {
    min-width: 0;
    min-height: 36px;
    height: auto;
    padding: 4px 6px;
    font-size: clamp(9px, 1.7vw, 12px);
    line-height: 1.1;
    white-space: normal;
  }
}

@media (orientation: landscape) and (max-height: 280px) {
  .result-card { padding: 4px 8px; }
  .result-card .label,
  .result-card .skin { display: none; }
  .result-card .weapon-img { height: clamp(50px, 30dvh, 90px); }
  .result-actions .btn { min-height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .result-modal.is-legendary .result-card { animation: result-in 0.3s var(--ease-out); }
  .opening-overlay.stage-glow .opening-case { animation: none; }
  .case-float, .case-platform__ring, .case-platform__glow { animation: none; }
}