/* ============ CARD ============ */
.card-container {
  position: absolute;
  width: 240px;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  opacity: 0;
  pointer-events: none;
}
.card-container.flying {
  animation: cardFly 1.6s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes cardFly {
  0%   { opacity: 0; transform: translateY(80px) scale(0.3) rotateY(0deg) rotateZ(0deg); }
  20%  { opacity: 1; transform: translateY(-30px) scale(0.85) rotateY(540deg) rotateZ(-12deg); }
  55%  { opacity: 1; transform: translateY(-10px) scale(1.05) rotateY(1080deg) rotateZ(8deg); }
  80%  { opacity: 1; transform: translateY(2px) scale(1.0) rotateY(1440deg) rotateZ(-2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateY(1440deg) rotateZ(0deg); }
}

.card {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  border-radius: 16px;
  --mx: 0.5;
  --my: 0.5;
  transition: transform 0.3s ease;
}
.card-container.displayed .card {
  animation: cardIdle 4s ease-in-out infinite;
}
@keyframes cardIdle {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50%      { transform: translateY(-8px) rotateZ(0.5deg); }
}

.card-face {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  backface-visibility: hidden;
}

/* Card frame backgrounds by rarity */
.card-face.normal {
  background:
    linear-gradient(180deg, #4a5260 0%, #2a3040 100%);
  box-shadow:
    0 0 0 2px var(--c-normal-1) inset,
    0 0 0 5px #1a1f2a inset,
    0 0 30px -5px rgba(180, 200, 220, 0.3),
    0 20px 50px -10px rgba(0,0,0,0.6);
}
.card-face.rare {
  background:
    linear-gradient(180deg, #1a3a7a 0%, #0a1f4a 100%);
  box-shadow:
    0 0 0 2px var(--c-rare-2) inset,
    0 0 0 5px #0a1f4a inset,
    0 0 40px -2px var(--c-rare-1),
    0 20px 50px -10px rgba(0, 30, 100, 0.7);
}
.card-face.super {
  background:
    linear-gradient(180deg, #5e3a0a 0%, #2e1d05 100%);
  box-shadow:
    0 0 0 2px var(--c-super-2) inset,
    0 0 0 5px #2a1a05 inset,
    0 0 50px -2px var(--c-super-1),
    0 0 90px -10px var(--c-super-1),
    0 20px 60px -10px rgba(120, 60, 0, 0.7);
}
.card-face.infinite {
  background:
    linear-gradient(180deg, #1a0a2e 0%, #0a0a1f 50%, #2a0a1f 100%);
  box-shadow:
    0 0 0 2px #fff inset,
    0 0 0 5px #1a0a2e inset,
    0 0 60px -2px var(--c-inf-1),
    0 0 120px -10px var(--c-inf-2),
    0 0 180px -20px var(--c-inf-3),
    0 20px 60px -10px rgba(0,0,0,0.8);
}

/* Card content */
.card-header {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px 8px;
  z-index: 3;
}
.card-name {
  font-family: 'RocknRoll One', sans-serif;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.5);
}
.card-cost {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 17px;
  color: #fff;
  background: radial-gradient(circle at 30% 30%, #fff, #88c5ff 40%, #1850c0 100%);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.4) inset,
    0 0 0 2px rgba(0,0,0,0.4),
    0 2px 8px rgba(0,0,0,0.5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.card-art {
  position: relative;
  margin: 0 14px;
  height: 175px;
  border-radius: 8px;
  overflow: hidden;
  background: #06060c;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5) inset, 0 2px 8px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.card-art-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.card-face.normal .card-art-bg {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(180,200,220,0.25), transparent 60%),
    linear-gradient(180deg, #2a3040 0%, #0e1218 100%);
}
.card-face.rare .card-art-bg {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(78, 160, 255, 0.4), transparent 60%),
    linear-gradient(180deg, #0d2a6e 0%, #050818 100%);
}
.card-face.super .card-art-bg {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 200, 80, 0.5), transparent 60%),
    linear-gradient(180deg, #4a2d05 0%, #1a0d05 100%);
}
.card-face.infinite .card-art-bg {
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(255, 78, 205, 0.6),
      rgba(78, 205, 255, 0.6),
      rgba(255, 225, 78, 0.6),
      rgba(78, 255, 139, 0.6),
      rgba(176, 78, 255, 0.6),
      rgba(255, 78, 205, 0.6));
  animation: artSpin 8s linear infinite;
}
@keyframes artSpin { to { transform: rotate(360deg) scale(1.4); } }

.card-emoji {
  position: relative;
  z-index: 2;
  font-size: 110px;
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.7));
  animation: emojiPulse 3s ease-in-out infinite;
}
@keyframes emojiPulse {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.05) translateY(-3px); }
}

.card-type {
  font-family: 'RocknRoll One', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.7);
  text-align: center;
  margin: 8px 14px 4px;
  padding: 3px 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  z-index: 3;
  position: relative;
}

.card-flavor {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-line;
  color: rgba(255,255,255,0.7);
  text-align: center;
  margin: 6px 14px 4px;
  font-style: italic;
  z-index: 3;
  position: relative;
}

.card-stats {
  display: flex; justify-content: space-around;
  padding: 6px 14px 10px;
  z-index: 3;
  position: relative;
}
.stat {
  display: flex; flex-direction: column; align-items: center;
  font-family: 'Cinzel', serif;
}
.stat-label {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1px;
}
.stat-value {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.card-face.rare .stat-value     { color: var(--c-rare-2); text-shadow: 0 0 10px var(--c-rare-1); }
.card-face.super .stat-value    { color: var(--c-super-2); text-shadow: 0 0 10px var(--c-super-1); }
.card-face.infinite .stat-value {
  background: linear-gradient(90deg, var(--c-inf-1), var(--c-inf-2), var(--c-inf-3));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbowShift 3s linear infinite;
}

/* Holographic overlay (rare+) */
.holo-layer {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.6s ease;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(120, 200, 255, 0.4) 35%,
      rgba(255, 120, 220, 0.4) 50%,
      rgba(255, 240, 120, 0.4) 65%,
      transparent 100%
    );
  background-size: 300% 300%;
  background-position: calc(var(--mx) * 100%) calc(var(--my) * 100%);
  mix-blend-mode: color-dodge;
}
.shimmer-layer {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 119, 115, 0.5),
    rgba(255, 237, 95, 0.5),
    rgba(168, 255, 95, 0.5),
    rgba(131, 255, 247, 0.5),
    rgba(120, 148, 255, 0.5),
    rgba(216, 117, 255, 0.5),
    rgba(255, 119, 115, 0.5) 100%
  );
  background-size: 100% 200%;
  background-position: calc(var(--mx) * 100%) calc(var(--my) * 100%);
  mix-blend-mode: color-dodge;
  filter: brightness(1.05) contrast(1.3);
}
.card-face.rare     .holo-layer    { opacity: 0.55; }
.card-face.super    .holo-layer    { opacity: 0.7; }
.card-face.super    .shimmer-layer { opacity: 0.35; }
.card-face.infinite .holo-layer    { opacity: 0.85; }
.card-face.infinite .shimmer-layer { opacity: 0.6; animation: shimmerScroll 4s linear infinite; }
@keyframes shimmerScroll {
  from { background-position-y: 0%; }
  to   { background-position-y: 200%; }
}

/* Decorative corner ornaments */
.corner {
  position: absolute;
  width: 22px; height: 22px;
  z-index: 4;
  opacity: 0.7;
}
.corner.tl { top: 6px; left: 6px; }
.corner.tr { top: 6px; right: 6px; transform: scaleX(-1); }
.corner.bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.corner.br { bottom: 6px; right: 6px; transform: scale(-1,-1); }
.corner::before, .corner::after {
  content: ""; position: absolute;
  background: currentColor;
}
.corner::before { top: 0; left: 0; width: 22px; height: 1.5px; }
.corner::after  { top: 0; left: 0; width: 1.5px; height: 22px; }
.card-face.normal   .corner { color: var(--c-normal-2); }
.card-face.rare     .corner { color: var(--c-rare-2); }
.card-face.super    .corner { color: var(--c-super-2); }
.card-face.infinite .corner { color: #fff; }

/* Rarity tag */
.card-rarity-tag {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 7px;
  letter-spacing: 0.42em;
  z-index: 7;
  padding-left: 0.42em;
  text-transform: uppercase;
  white-space: nowrap;
}
.card-face.normal   .card-rarity-tag { color: rgba(255,255,255,0.38); }
.card-face.rare     .card-rarity-tag { color: var(--c-rare-2); }
.card-face.super    .card-rarity-tag { color: var(--c-super-2); }
.card-face.infinite .card-rarity-tag {
  background: linear-gradient(90deg, var(--c-inf-1), var(--c-inf-2), var(--c-inf-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card-face.normal   .card-rarity-tag { color: rgba(255,255,255,0.4); }
.card-face.rare     .card-rarity-tag { color: var(--c-rare-2); }
.card-face.super    .card-rarity-tag { color: var(--c-super-2); }
.card-face.infinite .card-rarity-tag {
  background: linear-gradient(90deg, var(--c-inf-1), var(--c-inf-2), var(--c-inf-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Outer card glow (idle) */
.card-glow {
  position: absolute;
  inset: -40px;
  border-radius: 30px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  filter: blur(35px);
  transition: opacity 1s ease;
}
.card-container.displayed .card-glow { opacity: 1; }
.card-container.displayed.rare     .card-glow { background: radial-gradient(circle, var(--c-rare-1), transparent 70%); }
.card-container.displayed.super    .card-glow {
  background: radial-gradient(circle, var(--c-super-1), transparent 70%);
  animation: superPulse 2s ease-in-out infinite;
}
@keyframes superPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.1); }
}
.card-container.displayed.infinite .card-glow {
  background: conic-gradient(from 0deg, var(--c-inf-1), var(--c-inf-2), var(--c-inf-3), var(--c-inf-4), var(--c-inf-5), var(--c-inf-1));
  animation: rotateGlow 4s linear infinite;
  opacity: 0.85;
}

/* ============ RARITY-BASED CARD SIZES ============ */
.card-container.super    { width: 248px; height: 368px; }
.card-container.infinite { width: 264px; height: 420px; }

/* Expand art area to fill the extra height */
.card-face.super             .card-art { height: 190px; }
.card-face.spell.super       .card-art { height: 215px; }
.card-face.infinite          .card-art { height: 210px; }
.card-face.spell.infinite    .card-art { height: 240px; }

/* ============ SPELL CARD OVERRIDES ============ */
.card-face.spell.normal {
  background: linear-gradient(180deg, #1e3028 0%, #0c1810 100%);
  box-shadow:
    0 0 0 2px rgba(100, 200, 100, 0.55) inset,
    0 0 0 5px #0c1810 inset,
    0 0 30px -5px rgba(60, 160, 60, 0.35),
    0 20px 50px -10px rgba(0,0,0,0.6);
}
.card-face.spell.rare {
  background: linear-gradient(180deg, #0a2a38 0%, #051420 100%);
  box-shadow:
    0 0 0 2px rgba(60, 200, 220, 0.7) inset,
    0 0 0 5px #051420 inset,
    0 0 40px -2px rgba(60, 200, 220, 0.45),
    0 20px 50px -10px rgba(0, 50, 70, 0.7);
}
.card-face.spell.super {
  background: linear-gradient(180deg, #380a0a 0%, #1c0404 100%);
  box-shadow:
    0 0 0 2px rgba(220, 80, 80, 0.7) inset,
    0 0 0 5px #1c0404 inset,
    0 0 50px -2px rgba(220, 80, 80, 0.5),
    0 0 90px -10px rgba(180, 40, 40, 0.35),
    0 20px 60px -10px rgba(80, 0, 0, 0.7);
}

.card-face.spell .card-stats { display: none; }
.card-face.spell .card-art   { height: 200px; }
.card-face.spell .card-flavor { font-size: 11px; margin-top: 10px; }

.card-face.spell .card-type {
  letter-spacing: 0.2em;
  border-top-color:    rgba(255,255,255,0.28);
  border-bottom-color: rgba(255,255,255,0.28);
}
.card-face.spell.normal .card-type { color: rgba(120, 220, 120, 0.95); }
.card-face.spell.rare   .card-type { color: rgba(60,  220, 235, 0.95); }
.card-face.spell.super  .card-type { color: rgba(235, 90,  90,  0.95); }

.card-face.spell.normal .corner { color: rgba(110, 200, 110, 0.75); }
.card-face.spell.rare   .corner { color: rgba(60,  200, 220, 0.75); }
.card-face.spell.super  .corner { color: rgba(220, 80,  80,  0.75); }

.card-face.spell.normal .card-art-bg {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(70, 180, 70, 0.35), transparent 60%),
    linear-gradient(180deg, #142018 0%, #080c08 100%);
}
.card-face.spell.rare .card-art-bg {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(50, 195, 215, 0.4), transparent 60%),
    linear-gradient(180deg, #082030 0%, #04080f 100%);
}
.card-face.spell.super .card-art-bg {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(210, 55, 55, 0.5), transparent 60%),
    linear-gradient(180deg, #2e0808 0%, #100404 100%);
}