/* Quantum Cards · Infinite PowerDeck · Pack Open Theater
   "Like a breath from an angel" — soft ethereal open · rare FX · reduced-motion safe */

:root {
  --qc-gold: #C9A84C;
  --qc-gold-l: #F0D78C;
  --qc-gold-d: #8A6E2F;
  --qc-blue: #5B8CFF;
  --qc-blue-g: #B8F0FF;
  --qc-angel: #FFF8F0;
  --qc-angel-soft: rgba(255, 248, 240, 0.55);
  --qc-halo: rgba(255, 236, 200, 0.35);
  --qc-purple: #A78BFA;
  --qc-epic: #FF6BCB;
  --qc-bg: #03010a;
  --qc-panel: rgba(12, 10, 24, 0.88);
  --qc-text: #F7F1E4;
  --qc-muted: #9A8B72;
  --qc-line: rgba(232, 201, 106, 0.28);
  --qc-common: #B8C0D0;
  --qc-uncommon: #8EB4FF;
  --qc-rare: #F0D78C;
  --qc-epic-c: #D4B4FF;
  --qc-legend: #FFE9A8;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--qc-bg);
  color: var(--qc-text);
  font-family: Outfit, system-ui, sans-serif;
  min-height: 100%;
  overflow-x: hidden;
}

.qc-stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 48px;
  background:
    radial-gradient(ellipse 70% 45% at 50% 8%, rgba(255, 248, 240, 0.14), transparent 55%),
    radial-gradient(ellipse 90% 55% at 50% 25%, rgba(184, 240, 255, 0.12), transparent 58%),
    radial-gradient(ellipse 60% 40% at 50% 85%, rgba(201, 168, 76, 0.1), transparent 55%),
    radial-gradient(circle at 50% 50%, #0e0a1c 0%, var(--qc-bg) 72%);
  animation: qc-stage-breath 7.5s ease-in-out infinite;
}

/* Idle sacred breath — the whole room inhales */
@keyframes qc-stage-breath {
  0%, 100% {
    filter: brightness(1) saturate(1);
    background-position: center top, center, center, center;
  }
  50% {
    filter: brightness(1.06) saturate(1.08);
  }
}

/* Soft angel light veil */
.qc-angel-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 35% at 50% 0%, rgba(255, 248, 240, 0.18), transparent 70%),
    radial-gradient(ellipse 40% 25% at 20% 40%, rgba(184, 240, 255, 0.06), transparent 70%),
    radial-gradient(ellipse 40% 25% at 80% 40%, rgba(240, 215, 140, 0.06), transparent 70%);
  animation: qc-veil-breath 8s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.85;
}
@keyframes qc-veil-breath {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.03); }
}

/* Soft wing light behind pack */
.qc-wings {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(720px, 95vw);
  height: min(280px, 40vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}
.qc-wings::before,
.qc-wings::after {
  content: "";
  position: absolute;
  top: 10%;
  width: 46%;
  height: 90%;
  border-radius: 50% 50% 40% 40%;
  background:
    radial-gradient(ellipse at 60% 40%, rgba(255, 248, 240, 0.35), transparent 65%),
    radial-gradient(ellipse at 40% 60%, rgba(184, 240, 255, 0.18), transparent 70%);
  filter: blur(8px);
}
.qc-wings::before {
  left: 0;
  transform: rotate(-18deg) skewY(6deg);
  transform-origin: right center;
}
.qc-wings::after {
  right: 0;
  transform: rotate(18deg) skewY(-6deg);
  transform-origin: left center;
}
.qc-stage.is-charging .qc-wings,
.qc-stage.is-fracture .qc-wings,
.qc-stage.is-rare .qc-wings {
  opacity: 1;
  animation: qc-wing-breath 3.2s ease-in-out infinite;
}
@keyframes qc-wing-breath {
  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.05); }
}

.qc-halo {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(340px, 72vw);
  height: min(340px, 72vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(255, 248, 240, 0.28) 0%, rgba(240, 215, 140, 0.12) 35%, transparent 68%);
  box-shadow: 0 0 80px rgba(255, 248, 240, 0.15);
}
.qc-stage.is-charging .qc-halo {
  opacity: 1;
  animation: qc-halo-breath 2.4s ease-in-out infinite;
}
.qc-stage.is-fracture .qc-halo,
.qc-stage.is-rare .qc-halo {
  opacity: 1;
  animation: qc-halo-bloom 1.2s ease-out forwards;
}
@keyframes qc-halo-breath {
  0%, 100% { transform: translate(-50%, -50%) scale(0.88); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}
@keyframes qc-halo-bloom {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1.55); opacity: 0; }
}

.qc-stage.is-rare {
  background:
    radial-gradient(ellipse 80% 50% at 50% 12%, rgba(255, 248, 240, 0.28), transparent 52%),
    radial-gradient(ellipse 90% 60% at 50% 30%, rgba(255, 230, 160, 0.2), transparent 55%),
    radial-gradient(ellipse 70% 50% at 50% 70%, rgba(184, 240, 255, 0.14), transparent 55%),
    radial-gradient(circle at 50% 50%, #161028 0%, #060310 75%);
  animation: qc-rare-breathe 5.5s ease-in-out infinite;
}

@keyframes qc-rare-breathe {
  0%, 100% { filter: brightness(1) saturate(1.05); }
  50% { filter: brightness(1.1) saturate(1.15); }
}

.qc-topbar {
  width: min(960px, 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  z-index: 20;
}
.qc-brand {
  font-family: Cinzel, serif;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qc-gold);
}
.qc-nav a {
  color: var(--qc-gold-l);
  text-decoration: none;
  font-family: Rajdhani, sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 12px;
}
.qc-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 30;
}
.qc-btn {
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  border-radius: 10px;
  border: 1px solid var(--qc-line);
  background: rgba(0, 0, 0, 0.45);
  color: var(--qc-gold-l);
  padding: 10px 14px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s, background 0.2s;
}
.qc-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(201, 168, 76, 0.2); }
.qc-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.qc-btn-primary {
  background: linear-gradient(135deg, var(--qc-gold-d), var(--qc-gold), var(--qc-gold-l));
  color: #0a0610;
  border: 0;
  box-shadow: 0 6px 28px rgba(201, 168, 76, 0.45);
}
.qc-btn-ghost { background: transparent; }

.qc-hero-copy {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 22px;
  z-index: 10;
}
.qc-hero-copy .eyebrow {
  font-family: Rajdhani, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qc-gold);
  margin-bottom: 8px;
}
.qc-hero-copy h1 {
  font-family: Cinzel, serif;
  font-size: clamp(26px, 5vw, 40px);
  line-height: 1.15;
  margin: 0 0 10px;
}
.qc-hero-copy p {
  color: var(--qc-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
.qc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--qc-line);
  font-size: 12px;
  color: var(--qc-blue-g);
  background: rgba(91, 140, 255, 0.08);
}
.qc-status-pill.warn { color: #ffb4b4; border-color: rgba(255, 120, 120, 0.35); background: rgba(80, 20, 20, 0.35); }
.qc-status-pill.paid { color: #9dffa8; border-color: rgba(120, 255, 160, 0.35); background: rgba(20, 60, 30, 0.4); }

/* Arena */
.qc-arena {
  position: relative;
  width: min(920px, 100%);
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 1400px;
  z-index: 5;
}

/* Energy field / particles canvas host */
.qc-fx-layer {
  position: absolute;
  inset: -40px;
  pointer-events: none;
  overflow: hidden;
  border-radius: 24px;
  z-index: 1;
}
#qc-particles { position: absolute; inset: 0; width: 100%; height: 100%; }

.qc-runes {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(91, 140, 255, 0.25);
  box-shadow: 0 0 60px rgba(91, 140, 255, 0.15), inset 0 0 40px rgba(201, 168, 76, 0.08);
  opacity: 0;
  transform: scale(0.7) rotate(0deg);
  z-index: 2;
  pointer-events: none;
}
.qc-runes::before,
.qc-runes::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px dashed rgba(201, 168, 76, 0.35);
}
.qc-runes::after {
  inset: 24%;
  border-style: solid;
  border-color: rgba(124, 240, 255, 0.2);
}
.qc-stage.is-charging .qc-runes {
  opacity: 1;
  animation: qc-rune-spin 8s linear infinite, qc-rune-pulse 1.4s ease-in-out infinite;
}
.qc-stage.is-fracture .qc-runes {
  opacity: 1;
  animation: qc-rune-fracture 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes qc-rune-spin {
  to { transform: scale(1) rotate(360deg); }
}
@keyframes qc-rune-pulse {
  0%, 100% { box-shadow: 0 0 40px rgba(91, 140, 255, 0.2), inset 0 0 30px rgba(201, 168, 76, 0.1); }
  50% { box-shadow: 0 0 90px rgba(124, 240, 255, 0.45), inset 0 0 50px rgba(201, 168, 76, 0.25); }
}
@keyframes qc-rune-fracture {
  0% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
  40% { opacity: 1; transform: scale(1.15) rotate(25deg); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.6) rotate(80deg); filter: blur(8px); }
}

/* Pack */
.qc-pack-wrap {
  position: relative;
  z-index: 8;
  width: min(280px, 70vw);
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: transform 0.35s ease;
}
.qc-pack-wrap.is-opened {
  pointer-events: none;
  opacity: 0;
  transform: scale(1.2) translateY(-24px);
  filter: blur(8px) brightness(1.6);
  transition: 1s cubic-bezier(0.22, 0.7, 0.25, 1);
}

.qc-pack {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid var(--qc-line);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 30px 80px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(91, 140, 255, 0.25);
  background: #0a0614;
  transform-style: preserve-3d;
}
.qc-pack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.1) contrast(1.05);
}
.qc-pack-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 45%,
    transparent 60%
  );
  transform: translateX(-120%);
  animation: qc-sheen 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes qc-sheen {
  0%, 40% { transform: translateX(-120%); }
  70%, 100% { transform: translateX(120%); }
}
.qc-pack-glow {
  position: absolute;
  inset: -28%;
  background:
    radial-gradient(circle, rgba(255, 248, 240, 0.4) 0%, rgba(240, 215, 140, 0.22) 40%, transparent 68%);
  opacity: 0.7;
  animation: qc-pack-glow 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes qc-pack-glow {
  0%, 100% { opacity: 0.4; transform: scale(0.96); }
  50% { opacity: 0.9; transform: scale(1.1); }
}

.qc-stage.is-charging .qc-pack-wrap {
  animation: qc-pack-inhale 2.2s ease-in-out infinite;
}
@keyframes qc-pack-inhale {
  0%, 100% { transform: scale(1) translateY(0); filter: brightness(1) drop-shadow(0 0 20px rgba(255, 248, 240, 0.15)); }
  50% { transform: scale(1.045) translateY(-6px); filter: brightness(1.12) drop-shadow(0 0 40px rgba(255, 248, 240, 0.4)); }
}
.qc-stage.is-fracture .qc-pack-wrap {
  animation: qc-pack-exhale 1.05s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}
@keyframes qc-pack-exhale {
  0% { transform: scale(1); filter: brightness(1); opacity: 1; }
  35% { transform: scale(1.12); filter: brightness(1.55); opacity: 1; }
  100% { transform: scale(1.35) translateY(-20px); opacity: 0; filter: brightness(2.2) blur(6px); }
}
.qc-pack-wrap:hover:not(.is-opened) {
  transform: translateY(-6px) scale(1.02);
  filter: drop-shadow(0 12px 40px rgba(255, 248, 240, 0.18));
}

/* Angel breath flash — soft white-gold, not a harsh strobe */
.qc-flash {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 252, 245, 0.95) 0%, rgba(255, 236, 200, 0.55) 18%, rgba(184, 240, 255, 0.25) 38%, transparent 68%);
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  mix-blend-mode: screen;
}
.qc-stage.is-flash .qc-flash {
  animation: qc-angel-flash 1.1s cubic-bezier(0.22, 0.8, 0.25, 1) forwards;
}
.qc-stage.is-time-slow {
  animation: qc-time-slow 2.4s ease-in-out;
}
@keyframes qc-angel-flash {
  0% { opacity: 0; filter: blur(12px); }
  18% { opacity: 0.92; filter: blur(0); }
  55% { opacity: 0.45; filter: blur(2px); }
  100% { opacity: 0; filter: blur(16px); }
}
@keyframes qc-time-slow {
  0% { filter: saturate(1) brightness(1); }
  25% { filter: saturate(1.15) brightness(1.12); }
  55% { filter: saturate(1.25) brightness(1.18); }
  100% { filter: saturate(1) brightness(1); }
}

/* Soft breath mist rising */
.qc-breath-mist {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: min(480px, 90vw);
  height: 55%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 248, 240, 0.22), transparent 60%),
    radial-gradient(ellipse at 30% 70%, rgba(184, 240, 255, 0.1), transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(240, 215, 140, 0.1), transparent 55%);
  filter: blur(18px);
}
.qc-stage.is-charging .qc-breath-mist {
  opacity: 1;
  animation: qc-mist-rise 2.8s ease-in-out infinite;
}
.qc-stage.is-fracture .qc-breath-mist {
  opacity: 1;
  animation: qc-mist-exhale 1s ease-out forwards;
}
@keyframes qc-mist-rise {
  0%, 100% { transform: translateX(-50%) translateY(12px) scaleY(0.92); opacity: 0.35; }
  50% { transform: translateX(-50%) translateY(-18px) scaleY(1.08); opacity: 0.85; }
}
@keyframes qc-mist-exhale {
  0% { transform: translateX(-50%) translateY(0) scale(1); opacity: 0.9; }
  100% { transform: translateX(-50%) translateY(-80px) scale(1.35); opacity: 0; }
}

/* Revealed cards row */
.qc-reveal-row {
  position: relative;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 320px;
  align-items: flex-end;
  padding: 20px 0;
}

.qc-card-slot {
  width: min(160px, 28vw);
  aspect-ratio: 5 / 7;
  perspective: 1000px;
  opacity: 0;
  transform: translateY(40px) scale(0.85);
}
.qc-card-slot.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.qc-card-slot.is-focus {
  transform: translateY(-18px) scale(1.18);
  z-index: 15;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.qc-flip {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.qc-card-slot.is-flipped .qc-flip {
  transform: rotateY(180deg);
}
.qc-face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
  overflow: hidden;
  border: 2px solid var(--qc-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.qc-face-back {
  background: #0a0614;
}
.qc-face-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qc-face-front {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(91, 140, 255, 0.25), transparent 55%),
    linear-gradient(165deg, #14101f 0%, #08050f 100%);
  padding: 10px;
}
.qc-face-front .qc-rarity-bar {
  height: 4px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.qc-face-front .qc-art {
  flex: 1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.06), transparent 60%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.qc-face-front .qc-glyph {
  font-size: clamp(42px, 8vw, 64px);
  filter: drop-shadow(0 0 18px rgba(124, 240, 255, 0.55));
  animation: qc-glyph-float 3s ease-in-out infinite;
}
@keyframes qc-glyph-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.qc-face-front .qc-meta {
  margin-top: 8px;
}
.qc-face-front .qc-name {
  font-family: Cinzel, serif;
  font-size: 12px;
  color: var(--qc-gold-l);
  line-height: 1.25;
}
.qc-face-front .qc-rarity-label {
  font-family: Rajdhani, sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qc-muted);
  margin-top: 2px;
}
.qc-face-front .qc-serial {
  font-size: 9px;
  color: rgba(240, 234, 214, 0.45);
  margin-top: 4px;
  font-family: ui-monospace, monospace;
}

/* Rarity themes */
.qc-rarity-common .qc-rarity-bar { background: var(--qc-common); }
.qc-rarity-common .qc-glyph { color: var(--qc-common); filter: drop-shadow(0 0 12px rgba(154, 163, 181, 0.4)); }
.qc-rarity-uncommon .qc-rarity-bar { background: var(--qc-uncommon); }
.qc-rarity-uncommon .qc-glyph { color: var(--qc-uncommon); }
.qc-rarity-uncommon .qc-face-front {
  box-shadow: 0 0 24px rgba(91, 140, 255, 0.35);
  border-color: rgba(91, 140, 255, 0.5);
}
.qc-rarity-rare .qc-rarity-bar { background: linear-gradient(90deg, var(--qc-gold-d), var(--qc-gold-l)); }
.qc-rarity-rare .qc-glyph { color: var(--qc-gold-l); filter: drop-shadow(0 0 20px rgba(201, 168, 76, 0.7)); }
.qc-rarity-rare .qc-face-front {
  box-shadow: 0 0 36px rgba(201, 168, 76, 0.55);
  border-color: rgba(201, 168, 76, 0.75);
  animation: qc-gold-edge 2s ease-in-out infinite;
}
.qc-rarity-epic .qc-rarity-bar { background: linear-gradient(90deg, #7c3aed, #e879f9); }
.qc-rarity-epic .qc-glyph { color: #e9d5ff; filter: drop-shadow(0 0 22px rgba(192, 132, 252, 0.8)); }
.qc-rarity-epic .qc-face-front {
  box-shadow: 0 0 40px rgba(192, 132, 252, 0.55);
  border-color: rgba(216, 180, 254, 0.7);
}
.qc-rarity-legendary .qc-rarity-bar { background: linear-gradient(90deg, #ffd700, #fff7aa, #ffd700); }
.qc-rarity-legendary .qc-glyph {
  color: #ffe566;
  filter: drop-shadow(0 0 28px rgba(255, 215, 0, 0.95));
  animation: qc-glyph-float 2s ease-in-out infinite, qc-legend-pulse 1.2s ease-in-out infinite;
}
.qc-rarity-legendary .qc-face-front {
  box-shadow: 0 0 0 2px #ffd700, 0 0 50px rgba(255, 215, 0, 0.75), 0 0 90px rgba(124, 240, 255, 0.35);
  border-color: #ffd700;
  animation: qc-gold-edge 1.4s ease-in-out infinite;
}
@keyframes qc-gold-edge {
  0%, 100% { box-shadow: 0 0 24px rgba(201, 168, 76, 0.4); }
  50% { box-shadow: 0 0 48px rgba(255, 215, 0, 0.75); }
}
@keyframes qc-legend-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Impact text — soft sacred whisper, not shout */
.qc-impact {
  position: absolute;
  top: 11%;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  font-family: Cinzel, serif;
  font-size: clamp(22px, 5vw, 40px);
  font-weight: 600;
  color: var(--qc-angel);
  text-shadow:
    0 0 20px rgba(255, 248, 240, 0.9),
    0 0 48px rgba(240, 215, 140, 0.55),
    0 0 80px rgba(184, 240, 255, 0.35);
  opacity: 0;
  z-index: 25;
  pointer-events: none;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.qc-impact.is-show {
  animation: qc-impact-breath 1.8s cubic-bezier(0.22, 0.7, 0.25, 1) forwards;
}
@keyframes qc-impact-breath {
  0% { opacity: 0; transform: translateX(-50%) scale(0.9) translateY(16px); letter-spacing: 0.08em; filter: blur(6px); }
  25% { opacity: 1; transform: translateX(-50%) scale(1.02) translateY(0); letter-spacing: 0.22em; filter: blur(0); }
  70% { opacity: 0.95; transform: translateX(-50%) scale(1) translateY(-4px); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.04) translateY(-18px); filter: blur(4px); }
}

.qc-whisper {
  font-family: Cinzel, serif;
  font-size: clamp(13px, 2.4vw, 16px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 248, 240, 0.55);
  text-align: center;
  margin: 0 0 8px;
  animation: qc-whisper-fade 6s ease-in-out infinite;
}
@keyframes qc-whisper-fade {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}

/* Panel below */
.qc-panel {
  width: min(720px, 100%);
  margin-top: 12px;
  background: var(--qc-panel);
  border: 1px solid var(--qc-line);
  border-radius: 16px;
  padding: 18px 20px;
  z-index: 10;
}
.qc-panel h2 {
  font-family: Cinzel, serif;
  font-size: 16px;
  color: var(--qc-gold-l);
  margin: 0 0 10px;
}
.qc-odds {
  font-size: 12px;
  color: var(--qc-muted);
  line-height: 1.55;
}
.qc-odds strong { color: var(--qc-gold-l); }
.qc-collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.qc-collection .mini {
  border: 1px solid var(--qc-line);
  border-radius: 10px;
  padding: 8px;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.35);
}
.qc-collection .mini .n { color: var(--qc-gold-l); font-family: Cinzel, serif; font-size: 12px; }
.qc-fine {
  font-size: 11px;
  color: var(--qc-muted);
  margin-top: 12px;
  line-height: 1.5;
}
.qc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  justify-content: center;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .qc-pack-sheen,
  .qc-pack-glow,
  .qc-stage.is-charging .qc-runes,
  .qc-stage.is-charging .qc-pack-wrap,
  .qc-glyph,
  .qc-rarity-rare .qc-face-front,
  .qc-rarity-legendary .qc-face-front,
  .qc-stage.is-rare,
  .qc-stage,
  .qc-angel-veil,
  .qc-wings,
  .qc-halo,
  .qc-breath-mist,
  .qc-whisper {
    animation: none !important;
  }
  .qc-flip { transition-duration: 0.2s; }
  .qc-card-slot.is-in { transition-duration: 0.15s; }
  .qc-pack-wrap:hover:not(.is-opened) { transform: none; }
}

.qc-stage.reduce-motion .qc-pack-sheen,
.qc-stage.reduce-motion .qc-pack-glow,
.qc-stage.reduce-motion .qc-runes,
.qc-stage.reduce-motion .qc-pack-wrap,
.qc-stage.reduce-motion .qc-glyph,
.qc-stage.reduce-motion .qc-angel-veil,
.qc-stage.reduce-motion .qc-wings,
.qc-stage.reduce-motion .qc-halo,
.qc-stage.reduce-motion .qc-breath-mist {
  animation: none !important;
}
.qc-stage.reduce-motion .qc-flip { transition-duration: 0.15s; }