/* ===== Card Base ===== */
.card {
  --rX: 0;
  --rY: 0;
  --shine-x: 50%;
  --shine-y: 50%;
  --shine-opacity: 0;
  position: relative;
  border-radius: 18px;
  overflow: visible;
  aspect-ratio: 1427/2000;
  height: auto;
  padding-bottom: 0;
  cursor: pointer;
  isolation: isolate;
  transform-style: preserve-3d;
  transform: perspective(800px);
}

.card-frame {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(80, 40, 40, .06), 0 4px 16px rgba(80, 40, 40, .08);
  overflow: hidden;
  border: 1.5px solid rgba(212, 114, 122, .10);
  transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.card.tilt--active .card-frame {
  transition: none;
}

/* Cursor-following shine overlay for 3D depth */
.card-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(
    circle at var(--shine-x) var(--shine-y),
    rgba(255, 255, 255, .45) 0%,
    rgba(255, 255, 255, .15) 25%,
    transparent 60%
  );
  opacity: var(--shine-opacity);
  transition: opacity 0.3s ease;
  mix-blend-mode: soft-light;
}

.card-3d {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  z-index: 1;
}

.card-inner {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  transform-style: preserve-3d;
  transition: transform var(--flipMs) cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

.card.flipped .card-inner { transform: rotateY(180deg); }

/* ===== Faces ===== */
.face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  backface-visibility: hidden;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--blush), var(--bg-warm));
  transform-style: preserve-3d;
}

.face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face.back { transform: rotateY(180deg); }

.card:hover .card-frame {
  box-shadow: 0 8px 32px rgba(80, 40, 40, .14);
}

/* ===== Locked ===== */
.card.locked .face img { filter: grayscale(.7) blur(5px) brightness(.85); }
.card.locked .rarity { opacity: .65; }

.locked .lock-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  background: rgba(255, 255, 255, .80);
  backdrop-filter: blur(6px);
  border: 1.5px solid var(--rose-soft);
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: var(--rose);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ===== Rarity Tag ===== */
.rarity {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  backdrop-filter: blur(8px);
  color: var(--rarity);
  border: 1.5px solid color-mix(in srgb, var(--rarity) 25%, transparent);
}

.rarity .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background-color: var(--rarity);
  box-shadow: 0 0 6px color-mix(in srgb, var(--rarity) 50%, transparent);
}

/* Rarity row assignments */
.card[data-row="1"] { --rarity: var(--common); }
.card[data-row="2"] { --rarity: var(--rare); }
.card[data-row="3"] { --rarity: var(--epic); }
.card[data-row="4"] { --rarity: var(--legendary); }
.card[data-row="5"] { --rarity: var(--artifact); }

/* ===== Shine Sweep ===== */
.card .shine { color: var(--rarity); }

.shine {
  position: absolute;
  inset: calc(-1 * var(--sweep-overscan));
  transform: rotate(var(--sweep-tilt)) translateX(-120%);
  background: linear-gradient(
    90deg,
    color-mix(in oklab, currentColor 0%, transparent) 0%,
    color-mix(in oklab, currentColor 20%, transparent) calc(50% - var(--sweep-band)),
    color-mix(in oklab, currentColor 65%, white 20%) 50%,
    color-mix(in oklab, currentColor 20%, transparent) calc(50% + var(--sweep-band)),
    color-mix(in oklab, currentColor 0%, transparent) 100%
  );
  filter: blur(1px);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}

.shine.play { opacity: 1; animation: sweep var(--sweep-speed) ease-out forwards; }

@keyframes sweep {
  from { transform: rotate(var(--sweep-tilt)) translateX(-120%); }
  to   { transform: rotate(var(--sweep-tilt)) translateX(120%); }
}

/* ===== Golden Legendary ===== */
.card.golden .card-frame {
  border-color: var(--gold-soft);
  box-shadow: 0 4px 24px rgba(201, 168, 76, .20);
}

.card.golden,
.card.golden.legendary {
  --rarity: var(--gold);
}

.card.golden .shine {
  color: var(--rarity);
  background: linear-gradient(
    90deg,
    rgba(201, 168, 76, 0) 0%,
    rgba(201, 168, 76, 0.20) calc(50% - var(--sweep-band) - 6px),
    #fff7cc 48%,
    #e8c84c 50%,
    #fff0a3 52%,
    rgba(201, 168, 76, 0.20) calc(50% + var(--sweep-band) + 6px),
    rgba(201, 168, 76, 0) 100%
  );
}

.card.golden::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 18px 4px rgba(201, 168, 76, .18);
}

/* ===== Artifact Tier ===== */
.card.artifact .card-frame {
  border-color: color-mix(in srgb, var(--artifact) 30%, transparent);
  box-shadow: 0 4px 28px rgba(212, 106, 142, .16);
  background: linear-gradient(145deg, #fff5f8, #fff0f2);
}

.card.artifact {
  --rarity: var(--artifact);
}

.card.artifact .shine {
  color: var(--artifact);
  background: linear-gradient(
    90deg,
    rgba(212, 106, 142, 0) 0%,
    rgba(212, 106, 142, 0.22) calc(50% - var(--sweep-band) - 4px),
    #ffe0ec 48%,
    #f0a0c0 50%,
    #ffe8f0 52%,
    rgba(212, 106, 142, 0.22) calc(50% + var(--sweep-band) + 4px),
    rgba(212, 106, 142, 0) 100%
  );
}

.card.artifact::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 20px 5px rgba(212, 106, 142, .12);
}

/* ===== Letter Card (Year 2: same width, double height — spans 2 rows in col 2) ===== */
.grid--year2 .card.letter-card {
  aspect-ratio: unset;
  grid-column: 2;
  grid-row: 1 / 3;
  height: 100%;
}

.grid--year2 .card.letter-card .card-frame {
  position: absolute;
  inset: 0;
}

/* ===== Hover Lift ===== */
.card.hovering { z-index: 10; }

/* ===== Burn Effect (Reset) ===== */
.card.burning {
  pointer-events: none;
  z-index: 5;
}

.burn-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: inherit;
  overflow: visible;
  pointer-events: none;
}

.burn-ash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-conic-gradient(
      rgba(60, 30, 15, .18) 0% 25%, transparent 0% 50%
    ) 0 0 / 5px 5px,
    radial-gradient(ellipse at 40% 35%, rgba(120, 50, 10, .25), transparent 60%),
    linear-gradient(160deg, #0e0a08 0%, #1c1210 25%, #2e1d18 50%, #1a0f0b 75%, #0e0a08 100%);
  mask: radial-gradient(
    circle at var(--burn-x) var(--burn-y),
    black var(--burn-r),
    transparent calc(var(--burn-r) + 0.5px)
  );
  -webkit-mask: radial-gradient(
    circle at var(--burn-x) var(--burn-y),
    black var(--burn-r),
    transparent calc(var(--burn-r) + 0.5px)
  );
}

.burn-ember {
  position: absolute;
  inset: -30px;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--burn-x) var(--burn-y),
    transparent calc(var(--burn-r) - 14px),
    rgba(80, 20, 0, .3) calc(var(--burn-r) - 10px),
    rgba(200, 80, 10, .5) calc(var(--burn-r) - 6px),
    rgba(255, 160, 30, .7) calc(var(--burn-r) - 3px),
    rgba(255, 220, 80, .95) calc(var(--burn-r) - 1px),
    rgba(255, 255, 180, 1) var(--burn-r),
    rgba(255, 180, 40, .85) calc(var(--burn-r) + 2px),
    rgba(255, 100, 20, .7) calc(var(--burn-r) + 5px),
    rgba(200, 50, 0, .4) calc(var(--burn-r) + 10px),
    rgba(100, 20, 0, .15) calc(var(--burn-r) + 18px),
    transparent calc(var(--burn-r) + 28px)
  );
  filter: blur(1.5px);
  mix-blend-mode: screen;
}

.burn-heat {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  mask: radial-gradient(
    circle at var(--burn-x) var(--burn-y),
    transparent var(--burn-r),
    black calc(var(--burn-r) + 20px),
    black calc(var(--burn-r) + 60px),
    transparent calc(var(--burn-r) + 90px)
  );
  -webkit-mask: radial-gradient(
    circle at var(--burn-x) var(--burn-y),
    transparent var(--burn-r),
    black calc(var(--burn-r) + 20px),
    black calc(var(--burn-r) + 60px),
    transparent calc(var(--burn-r) + 90px)
  );
  background: linear-gradient(rgba(120, 60, 0, .25), rgba(80, 30, 0, .15));
  mix-blend-mode: multiply;
}

.burn-spark {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffe880;
  box-shadow: 0 0 4px 1px rgba(255, 200, 60, .9), 0 0 8px 2px rgba(255, 100, 0, .5);
  opacity: 0;
  will-change: transform, opacity;
}

.card.burn-done {
  transition: opacity .4s ease-out, transform .4s ease-out;
  opacity: 0;
  transform: scale(.90);
}