/* ============================================
   CZN Card Component
   --------------------------------------------
   The card uses font-size as a scale unit.
   Change `font-size` on .czn-card to resize
   the entire card proportionally.
   ============================================ */

.czn-card {
  position: relative;
  font-size: 11px;
  width: 18.2em;
  height: 27.4em;
  border-radius: 1em;
  cursor: pointer;
  transition: filter 0.3s ease;
  padding-left: 0.42em;
}

@media (max-width: 1680px) {
  .czn-card { font-size: 11px; }
}

@media (max-width: 1520px) {
  .czn-card { font-size: 9px; }
}

@media (max-width: 1024px) {
  .czn-card { font-size: 8px; }
}

@media (max-width: 768px) {
  .czn-card { font-size: 7px; }
}

@media (max-width: 480px) {
  .czn-card { font-size: 8px; }
}

.czn-card .engraving-slot-icons {
  position: absolute;
  left: 1.7em;
  top: 25%;
  transform: translateY(-50%);
  width: 2em;
  z-index: 90;
  pointer-events: none;
}

.engraving-slot-base {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 0;
}

.engraving-slot-overlay {
  position: absolute;
  width: 100%;
  left: 0;
  z-index: 0;
}

.engraving-slot-top {
  top: 6%;
  width: 80%;
  left: 10%;
  z-index: 2;
}

.engraving-slot-bottom {
  bottom: 3%;
  width: 80%;
  left: 10%;
  z-index: 1;
}

.czn-card:hover {
  filter: brightness(1.1);
}

/* All direct overlays inside the card are absolutely positioned */
.czn-card > img,
.czn-card > p,
.czn-card > div {
  position: absolute;
}

/* ---------- Base illustration ---------- */
.card-illustration {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* border-radius: 0.8em; */
  position: relative;
  z-index: 0;
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}

/* ---------- Element border (frame left of card) ---------- */
.card-element-border {
  height: 27.6em;
  left: -0.4em;
  bottom: -0.1em;
  z-index: 10;
}

/* ---------- Rarity decorations ---------- */
.card-rarity-icon {
  height: 4.1em;
  left: -0.44em;
  bottom: 22.1em;
  z-index: 20;
}

.card-rarity-title {
  width: max-content;
  left: -0.3em;
  bottom: 24.5em;
  z-index: 5;
  filter: brightness(3.5);
}

.card-rarity-sub {
  width: 1.5em;
  height: 5.5em;
  left: 17.3em;
  bottom: 21.5em;
  z-index: 20;
  filter: brightness(1.1);
}

/* ---------- Cost & energy ---------- */
.card-energy-line {
  width: 2.8em;
  left: 1.2em;
  bottom: 22.1em;
  z-index: 20;
}

.card-cost {
  font-size: 3.3em;
  left: 0.1em;
  bottom: 6.65em;           /* adjusted because em is now 3.3x larger */
  width: 1.4em;
  text-align: center;
  z-index: 20;
}

/* ---------- Card type (Attack, Defense, etc.) ---------- */
.card-type-icon {
  width: 1.8em;
  height: 1.8em;
  left: 4.2em;
  bottom: 22.4em;
  z-index: 20;
  filter: brightness(1.1);
}

.card-type-text {
  font-size: 1.4em;
  color: white;
  left: 4.5em;
  bottom: 15.85em;          /* adjusted for parent em scale */
  white-space: nowrap;
  z-index: 20;
  text-shadow:
    0.125em 0.125em 0.25em rgba(0, 0, 0, 1),
    0.0625em 0.0625em 0.15em rgba(0, 0, 0, 0.9);
}

/* ---------- Card name ---------- */
.card-name {
  font-size: 1.7em;
  left: 2.47em;             /* 4.2em ÷ 1.7em scaling */
  bottom: 13.94em;
  width: 8em;
  overflow: hidden;
  white-space: nowrap;
  z-index: 20;
}

/* ---------- Effect text (bottom of card) ---------- */
.card-effect {
  position: absolute;
  left: 0.8em;
  bottom: 2.4em;
  width: 16.8em;
  text-align: center;
  padding-bottom: 0.4em;
  z-index: 10;
}

.card-effect p {
  font-size: 1.3em;
  color: white;
  margin: 0;
  line-height: 1.1;
  text-shadow:
    0.125em 0.125em 0.25em rgba(0, 0, 0, 1),
    0.0625em 0.0625em 0.15em rgba(0, 0, 0, 0.9);
}

/* Epiphany logo */
.card-epiphany-logo {
  position: absolute;
  top: 4.8em;
  left: 0.9em;
  width: 3.7em;
  height: 3.7em;
  object-fit: contain;
  z-index: 25;
}

/* Filter to not show count for ego */
.czn-card[data-origin="ego"] .card-cost,
.czn-card[data-origin="ego"] .card-energy-line {
  display: none;
}

.czn-card[data-origin="ego"] .card-name {
  top: 48%;
  transform: translateY(-20%);
  bottom: auto;
  width: 14em;
  left: 2.5em;
  font-size: 1.27em;
}

.card-ego-subtitle {
  display: flex;
  align-items: center;
  font-size: 0.64em;
  color: rgb(255, 255, 255);
  font-weight: 300;
  letter-spacing: 0.1em;
  margin-top: -0.3em;
  border-bottom: 0.1em solid rgb(255, 255, 255);
  padding-bottom: 0.3em;
  width: 100px;
}

.card-ego-logo {
  height: 2em;
  width: auto;
  filter: brightness(1.05);
}

.card-ego-multi {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.02em;
  z-index: 20;
  left: 0.8em;
  top: 1.1em;
}

.card-ego-multi-icon {
  width: 2em;
  height: auto;
  filter: brightness(1.5) saturate(1.5) drop-shadow(0 0 0.3em rgba(100, 200, 255, 0.9));
}


.card-element-border-wrap {
  position: absolute;
  left: 0em;
  bottom: -0.19em;
  padding-right: 0.5em;
  z-index: 10;
}

.czn-card[data-origin="ego"] .card-element-border-wrap::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0.1em;
  bottom: 0.2em;
  width: 0.1em;
  background: white;
}

.card-ego-stars {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.01em;
  z-index: 20;
  left: 0.28em;
  bottom: 10.5em;
}

.card-ego-star {
  margin-top: -0.8em;
  width: 1.8em;
  height: auto;
}

.czn-card[data-origin="ego"] .card-effect {
  left: 3.1em;
  bottom: 6.7em;
  width: 15em;
  text-align: left;
}

.czn-card[data-origin="ego"] .card-effect p {
  font-size: 1.1em;
  text-align: left;
}

.czn-card[data-origin="ego"] .card-illustration {
  border-radius: 0.5em;
}

 /* Collapse Cards */

.czn-card[data-origin="collapse"] .card-illustration {
  transform: translateX(-0.3em);
}

 .card-cost-collapse {
  font-size: 1.2em;
  background: rgb(150, 45, 255);
  border-radius: 0.2em;
  padding: 0.2em 0.2em 0.01em 0.2em;
  display: inline-flex;
  align-items: center;
  width: auto;
}

.card-cost-max {
  font-size: 1em;
  /* opacity: 0.8; */
}

.czn-card[data-origin="collapse"] .card-cost {
  bottom: auto;
  top: 3em;
  left: 1em;
}

.card-collapse-icon {
  position: absolute;
  width: 2.5em;
  height: auto;
  z-index: 20;
  left: 1.4em;
  top: 1.4em;
}

.card-frame-collapse {
  position: absolute;
  z-index: 15;
  width: 5.1em;
  height: auto;
}

.card-frame-collapse-normal {
  top: 0.3em;
  left: 0.1em;
}

.card-frame-collapse-inverted {
  transform: scaleX(-1);
  bottom: 0;
    width: 5.12em;
  left: 13.1em;
  top: auto;
}

/* Animation Video Illustration */

.card-video {
  position: absolute;
  top: 0;
  left: 0.82em;
  width: 95.5%;
  height: 100%;
  border-radius: 1em;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

.card-copy-overlay {
  position: absolute;
  right: -0.3em;
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
  top: 0;
  height: 100%;
  z-index: 85;
  pointer-events: none;
}
.card-effect p.card-talent {
  font-size: 1.3em;
  color: #eeda76;
  margin-bottom: 0.1em;
  text-shadow:
    0.125em 0.125em 0.25em rgba(0, 0, 0, 1),
    0.0625em 0.0625em 0.15em rgba(0, 0, 0, 0.9);
}

.card-element-unique-border {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 20;
  pointer-events: none;
}

.card-unique-deco {
  position: absolute;
  pointer-events: none;
  z-index: 30;
  width: 1em;
  left: -0.02em;
  filter: brightness(0.8);
  animation: deco-pulse 2s ease-in-out infinite;
}

@keyframes deco-pulse {
  0%, 100% { filter: brightness(0.7); }
  50%       { filter: brightness(1) drop-shadow(0 0 0.3em rgba(255, 255, 255, 0.6)); }
}