/* WAX cards, same look and same hover effects as on waxtcg.com.
   Sizes are in cqw (% of the card width) so a card looks the same at any size.
   These colours are the WAX rarities: they don't follow the site theme. */

@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --hdrift { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

.rarity--demo { --rc: #9aa3b5; }
.rarity--single { --rc: #5fd4a8; }
.rarity--hit { --rc: #5aa9ff; }
.rarity--or { --rc: #ffc94d; }
.rarity--platine { --rc: #d9e4ff; }
.rarity--diamant { --rc: #ff6bd6; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 18px; }
html[data-cards='compact'] .card-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 12px; }

/* the cell moves on hover, the card inside does the shine.
   Cards off screen aren't drawn (content-visibility): drawing stops at the cell edge,
   hence the padding cancelled by the margin, room for the hover glow */
.card-cell {
  min-width: 0;
  margin: -34px;
  padding: 34px;
  border-radius: 8px;
  pointer-events: none;
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}
.card-cell > * { pointer-events: auto; }
/* a long collection only has the rows near the screen in the page (app.js): those cells keep the
   same containment but are always drawn, so every row has the real size of a card */
.card-grid.is-windowed { overflow-anchor: none; }
.card-grid.is-windowed > .card-cell { content-visibility: visible; contain: layout style paint; }
.card-cell:hover { transform: translateY(-4px) rotate(-0.6deg); }

.tcg {
  --rc: #9aa3b5;
  --frame: linear-gradient(150deg, #6a707c 0%, #2c3037 48%, #555b66 100%);
  --band-ink: rgb(255 255 255 / 0.82);
  --glitter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 11 -7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --title: 'Archivo', 'Arial Narrow', sans-serif;
  --label: 'Geist Mono', ui-monospace, monospace;
  --body: 'Geist', system-ui, sans-serif;
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 88;
  border-radius: 5% / 3.6%;
  container-type: inline-size;
  transition: box-shadow 250ms ease;
}
.tcg--single { --rc: #5fd4a8; --frame: linear-gradient(150deg, #3f9a7c 0%, #12352c 50%, #2f7d63 100%); }
.tcg--hit { --rc: #5aa9ff; --frame: linear-gradient(150deg, #4d8ee0 0%, #0f2546 50%, #3870b8 100%); }
.tcg--or {
  --rc: #ffc94d;
  --band-ink: #2a1a00;
  --frame: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.06) 0 1px, transparent 1px 3px), linear-gradient(135deg, #7a5200 0%, #ffd76a 28%, #fff3c4 44%, #c8901a 62%, #6b4300 100%);
  --foil: conic-gradient(from var(--angle), #6b4300, #ffd76a, #fff6cf, #c8901a, #ffe28f, #7a4f00, #ffd76a, #6b4300);
}
.tcg--platine {
  --rc: #d9e4ff;
  --band-ink: #1b2030;
  --frame: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px), linear-gradient(135deg, #5f6884 0%, #e9efff 32%, #fff 46%, #9aa3bf 62%, #444b62 100%);
  --foil: conic-gradient(from var(--angle), #7f8aa8, #fff, #b8c4e6, #ffd6f5, #e9f0ff, #a7f3ff, #fff, #7f8aa8);
}
.tcg--diamant {
  --rc: #ff6bd6;
  --band-ink: #26062a;
  --frame: repeating-conic-gradient(from 45deg, rgb(255 255 255 / 0.07) 0 25%, transparent 0 50%) 0 0 / 5cqw 5cqw, linear-gradient(135deg, #ff6bd6 0%, #7df9ff 30%, #b98bff 55%, #fff3b0 78%, #ff6bd6 100%);
  --foil: conic-gradient(from var(--angle), #ff6bd6, #7df9ff, #b98bff, #fff, #ffd36e, #7affc4, #ff6bd6);
}

.tcg__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 5cqw;
  background: var(--frame);
  box-shadow: inset 0 0 0 0.4cqw rgb(255 255 255 / 0.22), 0 1.2cqw 0 color-mix(in srgb, var(--rc) 30%, #000), 0 10px 22px -10px rgb(0 0 0 / 0.85);
  user-select: none;
}

/* thin foil border on the rare ones, it turns on hover */
.tcg--or::before, .tcg--platine::before, .tcg--diamant::before {
  position: absolute;
  inset: 0;
  z-index: 8;
  padding: 1cqw;
  border-radius: 5cqw;
  content: '';
  background: var(--foil);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.tcg__art {
  position: absolute;
  top: 3cqw;
  left: 3cqw;
  width: 94cqw;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 3cqw;
  background: #050505;
  box-shadow: 0 0 0 0.5cqw rgb(0 0 0 / 0.45);
}
.tcg__art img, .tcg__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tcg__fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--rc);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 35%, #111), #050505 70%);
  font: 900 30cqw/1 var(--title);
  font-stretch: 62%;
}

.tcg__holo, .tcg__shine { position: absolute; inset: 0; pointer-events: none; }
.tcg__holo {
  z-index: 2;
  mix-blend-mode: color-dodge;
  opacity: 0.16;
  background:
    var(--glitter) center / 110px,
    repeating-linear-gradient(115deg, #ff7eb3 0%, #ffd36e 8%, #7affc4 16%, #6ec8ff 24%, #b98bff 32%, #ff7eb3 40%) 50% 50% / 300% 300%;
}
.tcg--or .tcg__holo {
  background:
    var(--glitter) center / 120px,
    linear-gradient(115deg, transparent 20%, rgb(255 215 106 / 0.6) 40%, rgb(255 246 207 / 0.9) 50%, rgb(255 215 106 / 0.6) 60%, transparent 80%) 50% 50% / 250% 250%;
}
.tcg--diamant .tcg__holo {
  opacity: 0.34;
  background:
    var(--glitter) center / 110px,
    repeating-conic-gradient(from 45deg, rgb(255 255 255 / 0.28) 0 25%, transparent 0 50%) center / 9cqw 9cqw,
    repeating-linear-gradient(115deg, #ff7eb3 0%, #ffd36e 8%, #7affc4 16%, #6ec8ff 24%, #b98bff 32%, #ff7eb3 40%) calc(50% + var(--hdrift)) calc(50% + var(--hdrift)) / 300% 300%;
}

/* light sweep, from hit upwards */
.tcg__shine {
  z-index: 3;
  background-image: linear-gradient(105deg, transparent 46%, rgb(255 255 255 / 0.35) 50%, transparent 54%);
  background-position: 100% 0;
  background-size: 300% 100%;
}
.tcg--or .tcg__shine { background-image: linear-gradient(105deg, transparent 45.3%, rgb(255 236 170 / 0.75) 50%, transparent 54.7%); }
.tcg--platine .tcg__shine { background-image: linear-gradient(105deg, transparent 45.3%, rgb(255 255 255 / 0.7) 50%, transparent 54.7%); }
.tcg--diamant .tcg__shine { background-image: linear-gradient(105deg, transparent 44.7%, rgb(255 190 245 / 0.6) 48.7%, rgb(170 245 255 / 0.7) 51.3%, transparent 55.3%); }

/* top: serial number or limited edition */
.tcg__top {
  position: absolute;
  z-index: 7;
  top: 5.5cqw;
  right: 5.5cqw;
  left: 5.5cqw;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2cqw;
  pointer-events: none;
}
.tcg__serial, .tcg__count, .tcg__value {
  display: inline-flex;
  height: 6.4cqw;
  min-height: 13px;
  align-items: center;
  gap: 0.4cqw;
  padding: 0 2.2cqw;
  border-radius: 1.4cqw;
  color: #fff;
  background: rgb(8 8 8 / 0.82);
  box-shadow: inset 0 0 0 0.25cqw rgb(255 255 255 / 0.16), 0 0.8cqw 2.4cqw rgb(0 0 0 / 0.55);
  font: 800 max(8px, 3.9cqw)/1 var(--label);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tcg__serial small { color: rgb(255 255 255 / 0.55); font-size: 0.72em; font-weight: 600; }
.tcg__count { position: absolute; right: 4cqw; height: 5.6cqw; font-size: max(7px, 3.5cqw); letter-spacing: 0.08em; }
/* the market quote, bottom left: small, and readable on every frame */
.tcg__value { position: absolute; left: 4cqw; height: 5.6cqw; gap: 0.8cqw; padding: 0 1.8cqw; font-size: max(7px, 3.5cqw); font-variant-numeric: tabular-nums; }
.tcg__value .cur-icon { width: 1.15em; height: 1.15em; vertical-align: 0; }

.tcg__edition {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  margin-left: auto;
  border-radius: 1.6cqw;
  color: #0a0a0a;
  background:
    linear-gradient(110deg, transparent 38%, rgb(255 255 255 / 0.9) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat,
    var(--glitter) center / 90px,
    repeating-linear-gradient(120deg, #ffb3e0 0%, #ffe98a 7%, #a8ffd6 14%, #9fdcff 21%, #cfb3ff 28%, #ffb3e0 35%) 0 0 / 300% 300%,
    #e9e6de;
  background-blend-mode: normal, overlay, normal, normal;
  box-shadow: inset 0 0 0 0.3cqw rgb(255 255 255 / 0.95), 0 0 0 0.35cqw rgb(0 0 0 / 0.55), 0 1.2cqw 3.4cqw rgb(0 0 0 / 0.7);
  font-family: var(--label);
  line-height: 1;
  white-space: nowrap;
}
.tcg__edition-word {
  display: grid;
  place-items: center;
  padding: 0 1.4cqw;
  border-right: 0.25cqw solid rgb(0 0 0 / 0.35);
  color: #f5f3ee;
  background: rgb(10 10 10 / 0.88);
  font-size: max(5px, 2.1cqw);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-align: center;
}
.tcg__edition-n { display: flex; align-items: baseline; gap: 0.4cqw; padding: 1cqw 1.8cqw 0.9cqw; font-size: max(9px, 6cqw); font-weight: 800; letter-spacing: -0.02em; }
.tcg__edition-n small { font-size: 0.42em; font-weight: 700; opacity: 0.7; }
.tcg__edition-n em { font-size: 0.5em; font-style: normal; font-weight: 800; opacity: 0.7; }
.tcg--edition .tcg__face::after {
  position: absolute;
  inset: 1.2cqw;
  z-index: 6;
  border-radius: 4cqw;
  content: '';
  box-shadow: inset 0 0 0 0.35cqw #ece9e1, inset 0 0 0 0.7cqw rgb(0 0 0 / 0.35), 0 0 0 0.3cqw rgb(0 0 0 / 0.35);
  pointer-events: none;
}
@container (max-width: 260px) {
  .tcg__edition-word { display: none; }
}

/* title + artist under the art */
.tcg__id {
  position: absolute;
  inset: 99.5cqw 3cqw 12cqw;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  padding: 1.5cqw 3.5cqw;
  border-radius: 3cqw;
  background: rgb(8 8 8 / 0.74);
  text-align: center;
  pointer-events: none;
}
.tcg__title {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font: 900 8.6cqw/0.95 var(--title);
  font-stretch: 62%;
  text-shadow: 0 0.5cqw 2cqw rgb(0 0 0 / 0.7);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.tcg__artist {
  max-width: 100%;
  overflow: hidden;
  color: rgb(255 255 255 / 0.78);
  font: 600 4.6cqw/1.2 var(--body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* bottom band: rarity and the ◉ tier */
.tcg__band {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 7;
  display: flex;
  height: 12cqw;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.tcg__rarity { color: var(--band-ink); font: 800 max(7px, 4.2cqw)/1 var(--label); letter-spacing: 0.22em; text-transform: uppercase; }
.tcg__tier { letter-spacing: 0; }

/* Top Single: flat colour, full-width cover, white plate and a round seal */
.tcg--ts { --flat: #6b717c; }
.tcg--ts.tcg--single { --flat: #1c9a72; }
.tcg--ts.tcg--hit { --flat: #2e6fd6; }
.tcg--ts.tcg--or { --flat: #d49a12; }
.tcg--ts.tcg--platine { --flat: #9aa6c6; }
.tcg--ts.tcg--diamant { --flat: #d64aa8; }
.tcg--ts .tcg__face { background: var(--flat); }
.tcg__lines {
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(circle at 12% 104%, transparent 0 2.2cqw, rgb(255 255 255 / 0.22) 2.2cqw 2.45cqw),
    repeating-linear-gradient(0deg, transparent 0 2.6cqw, rgb(255 255 255 / 0.16) 2.6cqw 2.8cqw) 0 100cqw / 100% 14cqw no-repeat,
    radial-gradient(circle at 100% 100%, rgb(255 255 255 / 0.18), transparent 50%);
}
.tcg__cover { position: absolute; top: 0; left: 0; width: 100cqw; aspect-ratio: 1; overflow: hidden; }
.tcg__cover::after {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--flat) 55%, transparent) 76%, var(--flat) 97%);
}
.tcg__seal {
  position: absolute;
  top: 3.6cqw;
  right: 3.6cqw;
  z-index: 7;
  display: grid;
  width: 18cqw;
  aspect-ratio: 1;
  place-content: center;
  justify-items: center;
  gap: 0.3cqw;
  border-radius: 50%;
  color: #2a2d36;
  background:
    radial-gradient(circle at 25% 20%, rgb(255 255 255 / 0.95), transparent 38%),
    var(--glitter) center / 60px,
    repeating-conic-gradient(from var(--angle), rgb(255 110 200 / 0.75) 0deg, rgb(255 220 100 / 0.75) 24deg, rgb(90 255 190 / 0.75) 48deg, rgb(90 190 255 / 0.75) 72deg, rgb(180 120 255 / 0.75) 96deg, rgb(255 110 200 / 0.75) 120deg),
    repeating-radial-gradient(circle, rgb(255 255 255 / 0.25) 0 0.4cqw, transparent 0.4cqw 0.9cqw),
    radial-gradient(circle, #e9eaee, #a9adb8 70%, #7d818d);
  background-blend-mode: normal, overlay, hard-light, overlay, normal;
  box-shadow: inset 0 0 0 1.7cqw rgb(255 255 255 / 0.7), inset 0 0 0 1.95cqw rgb(60 64 78 / 0.35);
  filter: drop-shadow(0 1cqw 1.6cqw rgb(0 0 0 / 0.45));
  line-height: 1;
  text-align: center;
  text-shadow: 0 0.25cqw rgb(255 255 255 / 0.85), 0 -0.2cqw rgb(0 0 0 / 0.25);
  /* round with a serrated edge */
  -webkit-mask: radial-gradient(circle, #000 0 64%, transparent 64.5%), repeating-conic-gradient(#000 0 7.5deg, transparent 7.5deg 15deg);
  mask: radial-gradient(circle, #000 0 64%, transparent 64.5%), repeating-conic-gradient(#000 0 7.5deg, transparent 7.5deg 15deg);
}
.tcg__seal b { font-size: 5.4cqw; }
.tcg__seal small { max-width: 10cqw; font: 800 max(4px, 1.7cqw)/1.1 var(--label); letter-spacing: 0.04em; }
.tcg__plate {
  position: absolute;
  inset: 91cqw 8cqw 14.5cqw;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  padding: 2cqw 4cqw;
  border-radius: 2.4cqw;
  color: #0a0a0a;
  background: #fbfaf7;
  box-shadow: inset 0 0 0 0.3cqw rgb(0 0 0 / 0.08), 0 1.4cqw 3.6cqw rgb(0 0 0 / 0.35);
  text-align: center;
}
.tcg__type {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  margin-right: -0.42em;
  color: color-mix(in srgb, var(--flat) 75%, #000);
  font: 700 max(5px, 2.2cqw)/1 var(--label);
  letter-spacing: 0.42em;
}
.tcg__type::before, .tcg__type::after { width: 5cqw; height: 0.25cqw; content: ''; background: currentColor; opacity: 0.6; }
.tcg__plate .tcg__title { color: #0a0a0a; font-size: 9.6cqw; line-height: 0.92; text-shadow: none; }
.tcg__plate .tcg__artist { color: #4a4a4a; font-size: max(6px, 3.4cqw); }
.tcg--ts .tcg__top { top: 4cqw; right: 22cqw; left: 4cqw; justify-content: flex-start; }
.tcg--ts .tcg__edition { margin-left: 0; }
.tcg--ts .tcg__rarity { color: #fff; text-shadow: 0 0.3cqw rgb(0 0 0 / 0.25); }
.tcg--ts.tcg--or .tcg__rarity, .tcg--ts.tcg--platine .tcg__rarity { color: #1a1a1a; text-shadow: none; }
.tcg__ts-serial { position: absolute; left: 5cqw; color: rgb(255 255 255 / 0.85); font: 700 max(6px, 2.8cqw)/1 var(--label); }
.tcg--ts.tcg--or .tcg__ts-serial, .tcg--ts.tcg--platine .tcg__ts-serial { color: rgb(0 0 0 / 0.6); }

/* sparkles (or, platine, diamant), only visible on hover */
.tcg__sparkles { position: absolute; inset: 0; z-index: 9; opacity: 0; pointer-events: none; transition: opacity 400ms; }
.tcg__sparkles i {
  position: absolute;
  width: 5cqw;
  aspect-ratio: 1;
  margin: -2.5cqw 0 0 -2.5cqw;
  opacity: 0;
  background:
    radial-gradient(circle, #fff 0 10%, transparent 35%),
    linear-gradient(90deg, transparent 47%, #fff 50%, transparent 53%),
    linear-gradient(transparent 47%, #fff 50%, transparent 53%);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 70%);
  mask: radial-gradient(circle, #000 15%, transparent 70%);
}

/* hover, and always on the card shown big (.viewer__card) */
:is(.card-cell:hover, .viewer__card) .tcg::before { animation: foil-spin 4s linear infinite; }
:is(.card-cell:hover, .viewer__card) .tcg--diamant::before { animation-duration: 3.2s; }
:is(.card-cell:hover, .viewer__card) .tcg__shine { animation: shine 3.4s ease-in-out infinite; }
:is(.card-cell:hover, .viewer__card) .tcg--diamant .tcg__holo { animation: holo-drift 7s ease-in-out infinite alternate; }
:is(.card-cell:hover, .viewer__card) .tcg__sparkles { opacity: 1; }
:is(.card-cell:hover, .viewer__card) .tcg__sparkles i { animation: twinkle 2.6s ease-in-out infinite; }
:is(.card-cell:hover, .viewer__card) .tcg__edition { animation: edition-sheen 3.2s ease-in-out infinite; }
:is(.card-cell:hover, .viewer__card) .tcg__seal { animation: foil-spin 5s linear infinite; }
:is(.card-cell:hover, .viewer__card) .tcg--hit { box-shadow: 0 0 30px -8px #5aa9ff; }
:is(.card-cell:hover, .viewer__card) .tcg--or { box-shadow: 0 0 36px -6px rgb(255 201 77 / 0.8); }
:is(.card-cell:hover, .viewer__card) .tcg--platine { box-shadow: 0 0 36px -6px rgb(217 228 255 / 0.8); }
:is(.card-cell:hover, .viewer__card) .tcg--diamant { box-shadow: 0 0 40px -6px rgb(255 107 214 / 0.9); }
/* shown big, the card leans towards the pointer like the Kyara ones */
.viewer__card .tcg { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 250ms ease; }
.viewer__card .tcg.is-tilting { transition: transform 80ms linear, box-shadow 250ms ease; }

@keyframes foil-spin { to { --angle: 360deg; } }
@keyframes shine {
  0% { background-position: 100% 0; }
  45%, 100% { background-position: 0 0; }
}
@keyframes holo-drift {
  0% { --hdrift: -45%; }
  100% { --hdrift: 45%; }
}
/* opacity and transform only: the graphics card runs them, no restyle on every frame */
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes edition-sheen {
  0%, 30% { background-position: 130% 0, 50%, 0 0, 0 0; }
  70%, 100% { background-position: -30% 0, 50%, 100% 100%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .card-cell, .card-cell:hover, .viewer__card .tcg { transform: none; }
  :is(.card-cell:hover, .viewer__card) .tcg *, :is(.card-cell:hover, .viewer__card) .tcg::before { animation: none !important; }
}