:root { --card-height: 1.6; }

.featured-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(9px, 1.1vw, 15px);
  width: min(100%, 1140px);
}

.word-card, .face-down {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / var(--card-height);
  min-width: 0;
  padding: 0;
  text-align: left;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  box-shadow: 0 7px 15px #0206129c;
  touch-action: manipulation;
  transition: box-shadow 150ms ease;
}

.word-card:focus-visible, .face-down:focus-visible {
  outline: 2px solid var(--tier, #f2cc87);
  outline-offset: 3px;
}

@media (hover: hover) {
  .word-card:hover, .face-down:hover {
    box-shadow: 0 7px 21px rgba(var(--tier-rgb, 221, 181, 110), .37);
  }
}

.card-face {
  position: absolute;
  inset: 0;
  display: block;
  isolation: isolate;
  container-type: inline-size;
  overflow: hidden;
  color: var(--text);
  text-align: center;
}

.card-frame {
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid transparent;
  border-image-source: var(--card-frame-image);
  border-image-slice: var(--frame-slice) fill;
  border-image-width: var(--frame-width);
  border-image-repeat: stretch;
  pointer-events: none;
}

.card-face.is-golden { --rose-width: 33%; }
.card-face.is-golden:is(.tier-epic, .tier-legendary) { --rose-width: 35%; }
.card-face.is-golden .card-frame {
  filter: grayscale(.92) sepia(.89) saturate(1.48) contrast(1.11) brightness(1.18);
}
.card-face.is-golden.tier-legendary .card-frame {
  filter: sepia(.46) saturate(1.2) contrast(1.08) brightness(1.16);
}
.golden-ornaments {
  position: absolute; z-index: 1; inset: 0;
  pointer-events: none;
}
.golden-ornaments::before, .golden-ornaments::after {
  content: ""; position: absolute; bottom: 1.25%; width: var(--rose-width); aspect-ratio: 1;
  background: url("/assets/cards/frames/golden-rose-corner.webp") left bottom / contain no-repeat;
  filter: drop-shadow(0 2px 1px #241404ba);
}
.golden-ornaments::before { left: .75%; }
.golden-ornaments::after { right: .75%; transform: scaleX(-1); }

.card-face .word-art {
  position: absolute;
  inset: 0;
  display: block;
  clip-path: var(--card-aperture);
  overflow: hidden;
  background: var(--tier-dark);
}

.card-back img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
}

.card-face .word-art :is(img, video), .card-face .word-art::after {
  position: absolute;
  inset: var(--art-top) auto auto var(--art-left);
  display: block;
  width: var(--art-width);
  height: var(--art-height);
  object-fit: cover;
  user-select: none;
}
.legend-motion {
  opacity: 0; pointer-events: none; transition: opacity 140ms ease;
}
.legend-motion.is-playing { opacity: 1; }
.card-face .word-art::after {
  content: "";
  box-shadow: inset 0 0 3.5cqw #02030c99;
  background: linear-gradient(180deg, #11102438, transparent 20%, transparent 78%, #0b071a75);
  pointer-events: none;
}

.card-face .copies {
  position: absolute;
  z-index: 1;
  top: 22%;
  right: 13%;
  padding: 1px 5px;
  border-radius: 4px;
  background: #121a2be8;
  color: #f0f2fb;
  font-size: 11px;
}

.card-face .card-grade-mark {
  position: absolute;
  z-index: 3;
  isolation: isolate;
  top: var(--grade-y);
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(28px, 23cqw, 116px);
  height: clamp(12px, 8.4cqw, 40px);
  clip-path: polygon(0 50%, 10% 23%, 21% 23%, 28% 0, 72% 0, 79% 23%, 90% 23%, 100% 50%,
    90% 77%, 79% 77%, 72% 100%, 28% 100%, 21% 77%, 10% 77%);
  --grade-inlay: #cbbcab;
  --grade-enamel: color-mix(in srgb, var(--grade-fill), var(--grade-inlay) 13%);
  background: linear-gradient(176deg, #fff2c9 2%, var(--grade-rim) 27%, #573822 53%, var(--grade-rim) 77%, #e8c697 98%);
  color: var(--grade-ink);
  font: 800 clamp(8.5px, 5.65cqw, 26px)/1 var(--serif);
  letter-spacing: .045em;
  text-shadow: 0 1px 1px #0b0809, 0 0 .42em color-mix(in srgb, var(--grade-inlay) 35%, transparent);
}
.card-face .card-grade-mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: clamp(1px, .43cqw, 2.5px);
  clip-path: inherit;
  background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--grade-inlay) 34%, transparent), transparent 69%),
    linear-gradient(176deg, color-mix(in srgb, var(--grade-enamel), white 8%), var(--grade-enamel) 61%, #140f15);
}
.card-face .card-grade-mark::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 14% 50%, var(--grade-inlay) 0 .1em, transparent .15em),
    radial-gradient(ellipse at 86% 50%, var(--grade-inlay) 0 .1em, transparent .15em);
}
.card-grade-mark[data-grade="B"] { --grade-inlay: #b7cbd8; }
.card-grade-mark[data-grade="A"] { --grade-inlay: #7fbbf2; }
.card-grade-mark[data-grade="S"] { --grade-inlay: #c69aee; }
.card-grade-mark[data-grade="SS"] { --grade-inlay: #e1ad65; }
.card-face.is-golden .card-grade-mark {
  --grade-rim: #d2a453;
  --grade-fill: #302017;
  --grade-ink: #fff0c8;
}
.card-face .card-grade-mark[data-grade="SSS"] {
  --grade-inlay: #fff0b4;
  --grade-rim: #e9bc60;
  width: clamp(31px, 25cqw, 126px);
  color: #fff7db;
  letter-spacing: .08em;
}

.tier-badge-grade {
  border-inline-start: 1px solid rgba(var(--tier-rgb), .35);
  padding-inline-start: .5em;
  font-weight: 800;
  letter-spacing: .045em;
}

.card-face .word-meta {
  position: absolute;
  z-index: 2;
  inset: var(--caption-top) 11.5% var(--caption-bottom);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2px, 1.35cqw, 6px);
  overflow: hidden;
}

.card-face .word-meta > strong, .card-face .word-definition {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.card-face .word-meta > strong {
  flex: none;
  color: color-mix(in srgb, var(--tier) 60%, #fff7e8);
  font: 700 clamp(9px, 8.3cqw, 43px)/1.04 var(--serif);
  text-shadow: 0 1px 4px #01040c;
}
.card-face .word-meta:has(.word-phrase) { gap: clamp(1px, .65cqw, 4px); }
.card-face .word-meta > .word-phrase { font-size: clamp(8px, 5.5cqw, 32px); }
.card-face.is-golden .word-meta > strong { color: #ffe7a9; }

.card-face .word-definition {
  -webkit-line-clamp: 1;
  min-height: 0;
  color: #cbd0dd;
  font: 500 clamp(7.5px, 5.4cqw, 18px)/1.22 var(--sans, system-ui);
}
.card-face .word-phrase + .word-definition {
  font-size: clamp(7.5px, 4.6cqw, 18px);
  line-height: 1.16;
}

.card-face .word-footer { display: flex; align-items: center; justify-content: center; gap: .45em; }
.card-face .tier-badge {
  padding: 0; border: 0; background: transparent; letter-spacing: .045em; line-height: 1;
  font-size: clamp(7px, 4.1cqw, 12px);
}
.card-face .tier-badge svg { width: .85em; height: .85em; }
.card-face .golden-mark {
  padding: 0 0 0 .5em; border: 0; border-inline-start: 1px solid #98703b; border-radius: 0; background: transparent;
  font-size: clamp(7px, 4.1cqw, 12px); line-height: 1;
}
@container (max-width: 156px) {
  .card-face .word-meta { gap: 1px; }
  .card-face .word-footer {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@container (min-width: 270px) {
  .card-face .word-definition { -webkit-line-clamp: 2; }
  .card-face .word-phrase + .word-definition { -webkit-line-clamp: 1; }
}

.card-back {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #0e1830;
  overflow: hidden;
}

.card-back img { object-fit: fill; }
.card-back-caption {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 9px;
  border: 1px solid #d5af6c82;
  border-radius: 4px;
  background: #0b1429ed;
  color: #ffe0a8;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.card-back-caption svg { width: 12px; height: 12px; }
.card-back-dialog {
  position: relative;
  aspect-ratio: 1 / var(--card-height);
  border-radius: 9px;
}

.card-back-dialog { width: min(300px, 76vw, 43dvh); margin: 0 auto; }

.card-turn-model, .card-turn-side {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card-turn-model { transform-style: preserve-3d; }
.card-turn-side { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-turn-front { transform: translateZ(1.3px); }
.card-turn-back { transform: rotateY(180deg) translateZ(1.3px); }
.card-turn-edge {
  position: absolute;
  inset: 5px auto 5px 0;
  width: 2.6px;
  border-radius: 2px;
  transform: translateX(-50%) rotateY(90deg);
  background: linear-gradient(180deg, var(--tier, #dab473), #47324a 62%, var(--tier, #dab473));
}

.word-card-turning { perspective: 760px; }
.word-card-turning .card-turn-model {
  animation: turn-in-slot 430ms cubic-bezier(.28, .15, .22, 1) var(--slot-pause, 0ms) both;
}
.word-card-turning.tier-epic { --slot-pause: 235ms; }
.word-card-turning.tier-legendary { --slot-pause: 395ms; }

@keyframes turn-in-slot {
  0% { transform: rotateY(180deg); }
  57% { transform: rotateY(-12deg) scale(1.04); }
  100% { transform: rotateY(0deg); }
}

@media (max-width: 680px) {
  .featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .word-card-turning .card-turn-model { animation: none !important; }
}