/* ---------------------------------------------------------------- collectible card (premium TCG style) */

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

.dyk-card {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  --frame: linear-gradient(135deg, #f6f8fc 0%, #a3adc2 22%, #eef2f8 45%, #7d879e 70%, #f2f5fa 100%);
  --frame-edge: #6b7590;
  --face: radial-gradient(ellipse at 50% 18%, #2c3a66 0%, #141b38 55%, #0b1024 100%);
  --accent: #dfe6f3;
  --accent-deep: #8f9bb6;
  --glow: rgba(190, 210, 255, 0.35);
  position: relative;
  width: 280px;
  max-width: 100%;
  aspect-ratio: 63 / 88;
  padding: 0.6em;
  border-radius: 1.25em;
  background: var(--frame);
  box-shadow:
    0 0 0 1px var(--frame-edge),
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35),
    0 22px 50px rgba(0, 0, 0, 0.55),
    0 0 40px var(--glow);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.15s ease-out;
  font-size: 15px;
  font-family: var(--font-ui);
  text-align: center;
  isolation: isolate;
}

.mini-card .dyk-card {
  width: 100%;
  font-size: 1em;
}

.dyk-card.rarity-gold {
  --frame: linear-gradient(135deg, #fff7d1 0%, #e8b23a 18%, #fff2b0 38%, #b8780c 58%, #ffe08a 78%, #a8690a 100%);
  --frame-edge: #7a4b06;
  --face: radial-gradient(ellipse at 50% 18%, #5a2d82 0%, #2a1250 55%, #150828 100%);
  --accent: #ffe7a0;
  --accent-deep: #d39a2a;
  --glow: rgba(255, 196, 70, 0.45);
}

.dyk-card.rarity-legendary {
  --frame: conic-gradient(from var(--spin), #3d7bff, #a040ff, #ff3fa4, #ff8a1f, #ffd84a, #3ee07a, #3d7bff);
  --frame-edge: #2a0f5a;
  --face: radial-gradient(ellipse at 50% 18%, #3b1a8c 0%, #1a0c4a 55%, #0a0424 100%);
  --accent: #ffffff;
  --accent-deep: #ff7ad1;
  --glow: rgba(170, 110, 255, 0.6);
  animation: legendary-spin 6s linear infinite;
}

@keyframes legendary-spin {
  to {
    --spin: 360deg;
  }
}

.dyk-card-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.75em 0.75em 0.6em;
  border-radius: 0.8em;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0 1px, transparent 1.5px) 0 0 / 14px 14px,
    var(--face);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 3px rgba(0, 0, 0, 0.35),
    inset 0 0 24px rgba(0, 0, 0, 0.55);
}

/* corner ornaments */
.dyk-card-corners {
  position: absolute;
  inset: 0.35em;
  pointer-events: none;
  --c: var(--accent);
  background:
    linear-gradient(var(--c), var(--c)) top left / 1.2em 2px,
    linear-gradient(var(--c), var(--c)) top left / 2px 1.2em,
    linear-gradient(var(--c), var(--c)) top right / 1.2em 2px,
    linear-gradient(var(--c), var(--c)) top right / 2px 1.2em,
    linear-gradient(var(--c), var(--c)) bottom left / 1.2em 2px,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 1.2em,
    linear-gradient(var(--c), var(--c)) bottom right / 1.2em 2px,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 1.2em;
  background-repeat: no-repeat;
  opacity: 0.55;
}

.dyk-card-head {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.55em;
  border-radius: 0.55em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.dyk-card-gem {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.35em;
  rotate: 45deg;
  font-size: 0.85em;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 0 10px var(--glow), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.dyk-card-gem::first-letter {
  rotate: -45deg;
}

.dyk-card-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.12em;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-align: left;
  background: linear-gradient(180deg, #ffffff 30%, var(--accent) 60%, var(--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
}

.dyk-card-num {
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  opacity: 0.85;
}

.dyk-card-art {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0.6em;
  background: radial-gradient(circle at 50% 45%, rgba(255, 220, 150, 0.45), rgba(80, 40, 160, 0.25) 45%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow:
    0 0 0 2px var(--accent-deep),
    0 0 0 3px rgba(0, 0, 0, 0.6),
    inset 0 0 26px rgba(0, 0, 0, 0.65);
}

.dyk-card-rays {
  position: absolute;
  inset: -40%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.09) 0deg 6deg, transparent 6deg 18deg);
  animation: rays-turn 30s linear infinite;
}

@keyframes rays-turn {
  to {
    rotate: 360deg;
  }
}

.dyk-card-art .art {
  position: relative;
  width: 80%;
  height: 80%;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5));
}

.dyk-card-art.has-image {
  background: #000;
}

.dyk-card-art.has-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dyk-card-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 78% 30%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 64% 76%, #fff 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 30% 70%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 88% 64%, #fff 0 1.2px, transparent 2px);
  animation: dust-twinkle 3s ease-in-out infinite;
}

@keyframes dust-twinkle {
  50% {
    opacity: 0.35;
  }
}

.dyk-card-points {
  position: absolute;
  right: 0.45em;
  bottom: 0.45em;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.22em 0.65em;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 700;
  color: #3a1d02;
  background: linear-gradient(180deg, #fff1b0, #e6a91f);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.dyk-card-ribbon {
  position: relative;
  align-self: center;
  margin: 0.05em 0;
  padding: 0.28em 1.6em;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1a0c3a;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.rarity-legendary .dyk-card-ribbon {
  background: var(--rainbow);
}

.dyk-card-fact {
  margin: 0;
  padding: 0.55em 0.7em;
  border-radius: 0.5em;
  font-family: var(--font-book);
  font-size: 0.86em;
  font-style: italic;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.dyk-card-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4em;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.8;
}

.dyk-card-foot img {
  width: 1.9em;
}

/* foil, sheen and glare layers */
.dyk-card-holo,
.dyk-card-sheen,
.dyk-card-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.dyk-card-holo {
  opacity: 0;
  mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.35), transparent 35%),
    repeating-linear-gradient(115deg, rgba(61, 123, 255, 0.55) 0%, rgba(255, 63, 164, 0.55) 6%, rgba(255, 216, 74, 0.55) 12%, rgba(62, 224, 122, 0.55) 18%, rgba(61, 123, 255, 0.55) 24%),
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0 0.6px, transparent 1px) 0 0 / 6px 6px;
  background-size: 100% 100%, 260% 260%, 6px 6px;
  background-position: center, var(--mx) var(--my), 0 0;
}

.rarity-gold .dyk-card-holo {
  opacity: 0.28;
}

.rarity-legendary .dyk-card-holo {
  opacity: 0.62;
}

.dyk-card-sheen {
  opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, transparent 60%);
  background-size: 250% 100%;
  animation: sheen 4.5s ease-in-out infinite;
}

.rarity-gold .dyk-card-sheen,
.rarity-legendary .dyk-card-sheen {
  opacity: 1;
}

@keyframes sheen {
  0%,
  60% {
    background-position: 120% 0;
  }
  100% {
    background-position: -40% 0;
  }
}

.dyk-card-glare {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.4), transparent 45%);
  mix-blend-mode: overlay;
}

/* ---------------------------------------------------------------- reveal ceremony */

.reveal-layer {
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 45%, rgba(255, 200, 80, 0.35), rgba(5, 4, 20, 0.95) 60%);
  backdrop-filter: blur(8px);
}

.reveal-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.reveal-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 38px);
  color: var(--gold);
  text-shadow: 0 0 24px rgba(255, 212, 77, 0.7);
  animation: note-in 0.6s var(--ease-pop);
}

.reveal-flip {
  position: relative;
  width: min(300px, 76vw);
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  transition: transform 1.1s var(--ease-pop);
  animation: reveal-spin-in 0.9s var(--ease-out);
}

.reveal-flip .dyk-card {
  width: 100%;
  font-size: clamp(14px, 4.4vw, 17px);
}

.reveal-flip.is-flipped {
  transform: rotateY(180deg);
}

.reveal-back,
.reveal-front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.reveal-back {
  display: grid;
  place-items: center;
  border-radius: 18px;
  border: 5px solid #e6b450;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.07) 0 10deg, transparent 10deg 20deg),
    radial-gradient(circle, #5a2ad8, #1a0a4a);
  box-shadow: 0 0 60px rgba(255, 200, 80, 0.7);
}

.reveal-back img {
  width: 62%;
}

.reveal-front {
  transform: rotateY(180deg);
}

@keyframes reveal-spin-in {
  from {
    transform: translateY(80px) scale(0.4) rotateZ(-20deg);
    opacity: 0;
  }
}

.reveal-keep {
  font-size: 19px;
  opacity: 0;
  animation: fade-up 0.5s ease 1.8s forwards;
}

@keyframes fade-up {
  from {
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.burst-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 12px currentColor;
  animation: burst 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes burst {
  to {
    transform: translate(var(--dx), var(--dy)) scale(0.2);
    opacity: 0;
  }
}


/* ---------------------------------------------------------------- inventory hover + selection animation */

.inv-slot .dyk-card {
  cursor: pointer;
  transition: transform 0.15s ease-out, translate 0.35s var(--ease-pop), box-shadow 0.35s;
}

.inv-slot .dyk-card:hover,
.inv-slot .dyk-card:focus-visible {
  translate: 0 -10px;
  box-shadow:
    0 0 0 1px var(--frame-edge),
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    0 30px 60px rgba(0, 0, 0, 0.6),
    0 0 70px var(--glow);
}

.inv-slot .dyk-card.is-lifted {
  visibility: hidden;
}

.card-inspect {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 16px;
}

.inspect-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(60, 30, 140, 0.55), rgba(3, 2, 14, 0.92) 65%);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.card-inspect.is-open .inspect-backdrop {
  opacity: 1;
}

.inspect-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  pointer-events: none;
}

.inspect-stage > * {
  pointer-events: auto;
}

.inspect-flip {
  --w: min(340px, 74vw, 52vh);
  position: relative;
  width: var(--w);
  aspect-ratio: 63 / 88;
  transform-style: preserve-3d;
}

.card-inspect.is-settled .inspect-flip {
  animation: inspect-float 3.2s ease-in-out infinite;
}

@keyframes inspect-float {
  50% {
    translate: 0 -12px;
  }
}

.inspect-back,
.inspect-front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.inspect-back {
  transform: rotateY(180deg);
  display: grid;
  place-items: center;
  border-radius: 1.25em;
  border: 5px solid #e6b450;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.07) 0 10deg, transparent 10deg 20deg),
    radial-gradient(circle, #5a2ad8, #1a0a4a);
  box-shadow: 0 0 50px rgba(255, 200, 80, 0.6);
}

.inspect-back img {
  width: 62%;
}

.inspect-front .dyk-card {
  width: 100%;
  font-size: calc(var(--w) * 0.0536);
}

.inspect-glow {
  position: absolute;
  left: 50%;
  top: calc(min(340px, 74vw, 52vh) * 0.7);
  width: 140%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 110, 0.45), rgba(160, 64, 255, 0.18) 40%, transparent 68%);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.card-inspect.is-settled .inspect-glow {
  opacity: 1;
  animation: glow-breathe 2.6s ease-in-out infinite;
}

@keyframes glow-breathe {
  50% {
    scale: 1.12;
    opacity: 0.7;
  }
}

.inspect-shock {
  position: absolute;
  left: 50%;
  top: calc(min(340px, 74vw, 52vh) * 0.7);
  width: 120px;
  height: 120px;
  translate: -50% -50%;
  border-radius: 50%;
  border: 4px solid rgba(255, 230, 160, 0.9);
  box-shadow: 0 0 30px rgba(255, 210, 110, 0.8), inset 0 0 20px rgba(255, 210, 110, 0.6);
  opacity: 0;
}

.card-inspect.is-settled .inspect-shock {
  animation: shockwave 0.9s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes shockwave {
  from {
    opacity: 1;
    scale: 0.4;
  }
  to {
    opacity: 0;
    scale: 6;
  }
}

.inspect-stage .burst-spark {
  top: calc(min(340px, 74vw, 52vh) * 0.7);
}

.inspect-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.4s ease 0.15s, translate 0.4s var(--ease-pop) 0.15s;
}

.card-inspect.is-settled .inspect-actions {
  opacity: 1;
  translate: 0 0;
}

.inspect-actions button {
  min-height: 48px;
  font-size: 17px;
}