/* Fixed master: 5:7. All finishes share category, nameplate and footer geometry. */
.lc-card {
  --_card-frame: var(--card-frame, #123b40);
  --_card-line: var(--card-line, #fa8068);
  --_card-paper: var(--card-paper, #f4e8c9);
  --_card-ink: var(--card-ink, #102f34);
  --_card-light: var(--card-light, #fff5d9);
  --_card-display: var(--card-display, Impact, 'Arial Narrow', 'Helvetica Neue', sans-serif);
  position: relative;
  display: grid;
  grid-template-rows: 7.5% 62.5% 18% 12%;
  aspect-ratio: 5 / 7;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 3.1%;
  isolation: isolate;
  container-type: inline-size;
  overflow: hidden;
  border: 2px solid #09282f;
  border-radius: 5.5% / 3.9%;
  background: var(--_card-frame);
  color: var(--_card-paper);
  box-shadow: 0 4px 0 #071f25, 0 12px 20px #001a2526, inset 0 1px 0 #ffffff40;
  cursor: pointer;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s;
  text-align: left;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.lc-card *, .lc-card *:before, .lc-card *:after { box-sizing: border-box; }
.lc-card:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 6px 0 #071f25, 0 20px 30px #001a2540; }
.lc-card:active { transform: translateY(-1px); }
.lc-card:focus-visible { outline: 3px solid var(--_card-line); outline-offset: 5px; }
.lc-card__edge { position: absolute; z-index: 5; inset: 2%; border: 1.4px solid var(--_card-line); border-radius: 4% / 2.9%; pointer-events: none; }
.lc-card__top { display: flex; align-items: center; justify-content: space-between; gap: 4%; padding: 0 3%; position: relative; z-index: 2; min-width: 0; }
.lc-card__category { font-size: 3.5cqw; font-weight: 900; text-transform: uppercase; letter-spacing: .11em; white-space: nowrap; }
.lc-card__series { font-size: 2.6cqw; font-weight: 700; letter-spacing: .06em; color: var(--_card-line); white-space: nowrap; }
.lc-card__art { position: relative; min-height: 0; overflow: hidden; background: #284c51; border: 1px solid var(--_card-line); border-radius: 1.5% 1.5% 0 0; }
.lc-card__illustration { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lc-card__foil { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.lc-card__name { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2%; padding: 2% 3%; position: relative; z-index: 2; min-width: 0; background: var(--_card-frame); border: 1px solid var(--_card-line); border-top: 0; text-align: center; }
.lc-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; font-family: var(--_card-display); font-weight: 400; font-size: 9cqw; line-height: .98; letter-spacing: .015em; text-transform: uppercase; color: var(--_card-light); text-shadow: 0 2px 0 #09293170; overflow-wrap: normal; }
.lc-card__title--long { font-size: 7.6cqw; }
.lc-card__subtitle { font-size: 3.2cqw; font-weight: 600; line-height: 1.3; color: var(--_card-paper); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 3%; }
.lc-card__footer { display: grid; grid-template-columns: 19% 1fr auto; align-items: center; gap: 4%; padding: 3% 3% 0; position: relative; z-index: 2; min-width: 0; }
.lc-card__seal { display: grid; place-items: center; aspect-ratio: 1; width: 65%; font-family: var(--_card-display); font-size: 7cqw; line-height: 1; color: var(--_card-frame); background: var(--_card-line); border-radius: 15%; transform: rotate(-6deg); }
.lc-card__finish { display: flex; align-items: center; gap: 7%; font-size: 3cqw; letter-spacing: .06em; font-weight: 900; white-space: nowrap; }
.lc-card__finish i { font-style: normal; color: var(--_card-line); font-size: 5cqw; line-height: 1; }
.lc-card__number { font-family: var(--_card-display); font-size: 7cqw; line-height: 1; font-weight: 400; white-space: nowrap; }
.lc-card__number small { font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 3cqw; font-weight: 700; color: var(--_card-paper); opacity: .6; }
.lc-card--holo { box-shadow: 0 4px 0 #071f25, -6px 0 20px #57cecf28, 7px 0 20px #dc8fda26, inset 0 1px 0 #ffffff40; }
.lc-card--holo .lc-card__foil { opacity: .27; mix-blend-mode: screen; background: linear-gradient(118deg, transparent 20%, #5ee5db80 30%, #bf9bed90 45%, #ffe4a260 60%, transparent 75%); background-size: 230% 100%; background-position: 80% 0; transition: background-position .6s; }
.lc-card--holo:hover .lc-card__foil { background-position: 10% 0; }
.lc-card--holo .lc-card__edge { border-color: #a6d7cf; }
.lc-card--full { --_card-line: var(--card-full-line, #dfbb78); }
.lc-card--full .lc-card__art { position: absolute; inset: 3.1%; border-radius: 3%; z-index: -1; border: 0; }
.lc-card--full .lc-card__art:after { content: ''; position: absolute; inset: 0; background: linear-gradient(#102f3470, transparent 22% 56%, #102f34a0 70%, #102f34f0 90%); }
.lc-card--full .lc-card__top { grid-row: 1; }
.lc-card--full .lc-card__name { grid-row: 3; background: #123b40d9; border-top: 1px solid var(--_card-line); }
.lc-card--full .lc-card__footer { grid-row: 4; }
.lc-card--masked .lc-card__illustration { filter: grayscale(1) brightness(.2); }
.lc-card--masked .lc-card__unknown { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--_card-display); font-size: 50cqw; color: #f4e8c933; }
.lc-card--masked .lc-card__title { font-size: 7cqw; color: #aec4bb; }
.lc-card--large { max-width: 360px; }
@media (prefers-reduced-motion: reduce) { .lc-card, .lc-card * { transition: none !important; } .lc-card:hover { transform: none; } }

.lc-card.lc-card--printed {
  display: block;
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.lc-card--printed > img { display: block; width: 100%; height: auto; }

/* A continuous pearlescent coating follows the viewing angle. */
.print-foil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(114deg,
    transparent 20%, rgb(108 193 213 / .14) 32%,
    rgb(132 216 207 / .56) 40%, rgb(177 171 232 / .62) 47%,
    rgb(238 182 200 / .49) 53%, rgb(248 221 163 / .38) 58%,
    rgb(160 207 216 / .13) 66%, transparent 78%);
  background-size: 240% 155%;
  background-position: var(--gx, 50%) var(--gy, 50%);
  mix-blend-mode: soft-light;
  opacity: .54;
  transition: background-position .34s ease-out, opacity .34s ease-out;
}
.is-inspected .print-foil {
  opacity: .78;
  transition: background-position .12s ease-out, opacity .34s ease-out;
}
/* A second, stationary pearl reflection reads even on dark printed artwork. */
.lc-card--foil-print::before {
  content: "";
  z-index: 1; pointer-events: none; mix-blend-mode: screen;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(123deg,
    transparent 9%, rgb(83 209 222 / .29) 23%,
    rgb(190 158 244 / .31) 33%, rgb(255 214 177 / .28) 41%,
    transparent 55%, rgb(96 196 196 / .15) 76%, transparent 92%);
}
.lc-card--foil-print.is-inspected::before { opacity: 0; }
.lc-card--foil-print::before { transition: opacity .34s ease-out; }

@media (prefers-reduced-motion: no-preference) {
  .lc-card--foil-print::before {
    background-size:155% 135%;
    animation:pearl-drift 8s ease-in-out infinite alternate;
  }
  .lc-card--foil-print[data-card-id="13"]::before { animation-delay:-3s; }
  .lc-card--foil-print[data-card-id="14"]::before { animation-delay:-5s; }
  .lc-card--foil-print[data-card-id="15"]::before { animation-delay:-2s; }
  .lc-card--foil-print[data-card-id="16"]::before { animation-delay:-6s; }
  .lc-card--foil-print.is-inspected::before { animation-play-state:paused; }
}
@keyframes pearl-drift {
  from { background-position:30% 42%; }
  to { background-position:72% 58%; }
}


.foil-lettering { position:absolute; inset:66.6667% 0 0; width:100%; height:33.3333%; pointer-events:none; z-index:2; }
@media(prefers-reduced-motion:no-preference) {
  .foil-spectrum { animation:letter-spectrum 10s ease-in-out infinite alternate; }
  @keyframes letter-spectrum { from { transform:translateX(-64px); } to { transform:translateX(88px); } }
}

@media (prefers-reduced-motion:no-preference) {
  .is-inspected .foil-spectrum { animation:none; transform:translateX(calc((var(--gx, 50%) - 50%) * 0.65)); transition:transform .2s ease-out; }
}