/* Kyara cards, same look as on kyara.games: calm at rest like in their collection,
   tilt + holo + glare on hover like in their card viewer.
   Kyara rarity colours, they don't follow the site theme. */

@property --ky-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.rarity--c { --rc: #b5b1bb; }
.rarity--u { --rc: #3fbf7f; }
.rarity--r { --rc: #4d9bff; }
.rarity--e { --rc: #b072ff; }
.rarity--l { --rc: #f5c518; }
.rarity--m { --rc: #ff4d2e; }

.card-grid--kyara { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
html[data-cards='compact'] .card-grid--kyara { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

/* cards off screen aren't drawn (content-visibility, like on kyara.games). Drawing stops at the cell
   edge, hence the padding cancelled by the margin: room for the shadow, the lift and the badge */
.card-cell--kyara {
  position: relative;
  margin: -10px -14px -20px;
  padding: 10px 14px 20px;
  border-radius: 14px;
  pointer-events: none;
  transition: transform 180ms;
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}
html[data-cards='compact'] .card-cell--kyara { contain-intrinsic-size: auto 230px; }
.card-cell--kyara > * { pointer-events: auto; }
.card-cell--kyara:hover { transform: translateY(-5px); }

/* ×2, ×3… on the corner of the card */
.card-cell__count {
  position: absolute;
  z-index: 6;
  top: 2px;
  right: 6px;
  display: flex;
  min-width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border: 3px solid var(--bg);
  border-radius: 999px;
  color: var(--bg);
  background: var(--text);
  font: 13px var(--mono);
}

.ky {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  --disp: 'Unbounded', system-ui, sans-serif;
  --body: 'Zen Kaku Gothic New', 'Yu Gothic', 'Hiragino Sans', 'Noto Sans JP', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 5 / 7;
  flex-direction: column;
  gap: 6px;
  padding: 7px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  color: #f4f1ec;
  /* neutral frame until the rarity is known */
  background: #34313b;
  box-shadow: inset 0 0 0 2px #5a5662, 0 6px 14px #00000073;
  font-family: var(--body);
  text-align: left;
  container-type: inline-size;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* 3D only while hovered (or shown big), otherwise every card gets its own GPU layer */
:is(.card-cell--kyara:hover, .viewer__card) .ky { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }
.ky.is-tilting { transition: transform 80ms linear; }

.ky__top { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 6px 0; }
.ky__name {
  min-width: 0;
  overflow: hidden;
  font: 700 clamp(11px, 7.6cqi, 18px)/1.15 var(--disp);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ky__gem {
  display: flex;
  width: 22px;
  height: 22px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #0e0d12;
  background: #5a5662;
  font: 900 11px var(--disp);
}

.ky__art {
  position: relative;
  z-index: 1;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  border-radius: 10px;
  background: repeating-linear-gradient(135deg, #ffffff0a 0 8px, #0000 8px 16px) #1c1a23;
}
.ky__art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  opacity: 0;
  transition: opacity 120ms ease-out;
}
.ky__art img.is-in { opacity: 1; }
/* shimmer while the picture loads */
.ky__art.is-waiting::before {
  position: absolute;
  inset: 0;
  content: '';
  background: linear-gradient(100deg, #0000 20%, #ffffff17 50%, #0000 80%);
  pointer-events: none;
  transform: translate(-100%);
  animation: ky-wait 1.3s ease-in-out infinite;
}
.ky__art::after { position: absolute; inset: 0; content: ''; background: linear-gradient(#0000 66%, #0a080eb3); pointer-events: none; }
.ky__native {
  position: absolute;
  z-index: 1;
  top: 6px;
  right: 6px;
  max-height: calc(100% - 28px);
  overflow: hidden;
  color: #ffffff24;
  font-size: clamp(18px, 16cqi, 40px);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 8px #00000073;
  writing-mode: vertical-rl;
  pointer-events: none;
}
.ky__num { position: absolute; z-index: 1; bottom: 6px; left: 8px; color: #ffffffb8; font: 11px var(--mono); }
/* the median price of its sales, bottom right of the art */
.ky__value {
  position: absolute;
  z-index: 1;
  right: 6px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  background: #0a080ed1;
  box-shadow: inset 0 0 0 1px #ffffff2e;
  font: 600 clamp(9px, 6cqi, 12px)/1.25 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ky__type { padding: 0 6px; overflow: hidden; color: #f4f1ecc7; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ky__stats {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #0006;
  font: clamp(9px, 6.4cqi, 13px) var(--mono);
  white-space: nowrap;
}

/* frames */
.ky--c { background: #34313b; box-shadow: inset 0 0 0 2px #5a5662, 0 6px 14px #00000073; }
.ky--c .ky__gem { background: #b5b1bb; }
.ky--u { background: #1f3b2e; box-shadow: inset 0 0 0 2px #3fbf7f, 0 6px 14px #00000073; }
.ky--u .ky__gem { background: #3fbf7f; }
.ky--r { background: #1b2c4a; box-shadow: inset 0 0 0 2px #4d9bff, 0 6px 14px #00000073; }
.ky--r .ky__gem { background: #4d9bff; }
.ky--e { background: #2e1c47; box-shadow: inset 0 0 0 2px #b072ff, 0 6px 14px #00000073; }
.ky--e .ky__gem { background: #b072ff; }
.ky--l { background: linear-gradient(160deg, #5a4510, #221a05 60%, #4a390c); box-shadow: inset 0 0 0 2px #f5c518, 0 6px 14px #00000073; }
.ky--l .ky__gem { background: #f5c518; }
.ky--m { background: conic-gradient(from var(--ky-spin), #ff4d2e, #f5c518, #3fbf7f, #4dd6ff, #b072ff, #ff4d9e, #ff4d2e); box-shadow: 0 6px 14px #00000073; }
.ky--m::before { position: absolute; z-index: -1; inset: 4px; border-radius: 10px; content: ''; background: #14101c; }
.ky--m .ky__gem { background: #fff; }
.ky--heritage { box-shadow: 0 0 0 2px #c9a24a, 0 6px 14px #00000073; }

/* light sweep on Rare and the foil ones (Épique and up), only on hover or shown big */
:is(.card-cell--kyara:hover, .viewer__card) :is(.ky--r, .ky--foil)::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  content: '';
  pointer-events: none;
  animation: ky-shine 5s ease-in-out infinite alternate;
}
:is(.card-cell--kyara:hover, .viewer__card) .ky--r::after { background: linear-gradient(115deg, #0000 40%, #aad2ff29 50%, #0000 60%) 0 0 / 300% 300%; }
:is(.card-cell--kyara:hover, .viewer__card) .ky--foil::after {
  mix-blend-mode: screen;
  background: linear-gradient(115deg, #0000 35%, #fff3 46%, #ff78dc29 50%, #78dcff29 54%, #0000 65%) 0 0 / 300% 300%;
  animation-duration: 3.6s;
}
:is(.card-cell--kyara:hover, .viewer__card) .ky--m { animation: ky-spin 5s linear infinite; }

/* "遺 Héritage" ribbon of retired cards */
.ky__heritage { position: absolute; z-index: 4; top: 38%; right: -2px; left: -2px; display: flex; justify-content: center; pointer-events: none; }
.ky__heritage span {
  padding: 3px 12px;
  color: #1a1204;
  background: linear-gradient(90deg, #6b4e12, #c9a24a, #6b4e12);
  box-shadow: 0 4px 12px #00000080;
  font: 900 10px var(--disp);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* holo follows the pointer, glare on top */
.ky__holo, .ky__glare { position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 300ms; }
.ky__holo {
  z-index: 4;
  mix-blend-mode: color-dodge;
  background-image: url('https://kyara.games/textures/foil.webp'), repeating-linear-gradient(110deg, #ff3d6e 0%, #ffcf3d 7%, #3dffa0 14%, #3dc8ff 21%, #a65bff 28%, #ff3d6e 35%);
  background-size: 256px 256px, 400% 400%;
  background-position: calc(var(--mx) * 0.3) calc(var(--my) * 0.3), var(--mx) var(--my);
  background-blend-mode: multiply;
  filter: brightness(0.55) contrast(1.6) saturate(1.3);
}
.ky--l .ky__holo {
  background-image: url('https://kyara.games/textures/glitter.webp'), url('https://kyara.games/textures/foil.webp'), repeating-linear-gradient(115deg, #2a1c02 0%, #b8860b 6%, #ffe08a 10%, #fff6d6 12%, #d9a521 16%, #2a1c02 24%);
  background-size: 160px 160px, 256px 256px, 400% 400%;
  background-position: calc(var(--mx) * -0.4) calc(var(--my) * -0.4), calc(var(--mx) * 0.3) calc(var(--my) * 0.3), var(--mx) var(--my);
  background-blend-mode: screen, multiply;
  filter: brightness(0.7) contrast(1.5) saturate(1.2);
}
.ky--m .ky__holo {
  background-image: url('https://kyara.games/textures/glitter.webp'), url('https://kyara.games/textures/foil.webp'), repeating-linear-gradient(125deg, #ff3d3d 0%, #fc3 4%, #54f434 8%, #29edff 12%, #775cff 16%, #ff47e0 20%, #ff3d3d 24%);
  background-size: 180px 180px, 256px 256px, 500% 500%;
  background-position: calc(var(--mx) * -0.5) calc(var(--my) * -0.5), calc(var(--mx) * 0.3) calc(var(--my) * 0.3), var(--mx) var(--my);
  background-blend-mode: screen, multiply;
  filter: brightness(0.62) contrast(2) saturate(1.6);
}
.ky--m .ky__holo::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: '';
  background: repeating-linear-gradient(55deg, #0000 0%, #ffffff59 3%, #0000 6% 14%) 0 0 / 300% 300%;
  background-position: calc(100% - var(--mx)) calc(100% - var(--my));
  mix-blend-mode: overlay;
}
.ky__glare { z-index: 5; mix-blend-mode: overlay; background: radial-gradient(farthest-corner circle at var(--mx) var(--my), #ffffffbf 0%, #ffffff2e 28%, #00000059 90%); }
.ky.is-tilting .ky__holo { opacity: 0.55; }
.ky--l.is-tilting .ky__holo { opacity: 0.8; }
.ky--m.is-tilting .ky__holo { opacity: 0.75; }
.ky.is-tilting .ky__glare { opacity: 1; }

@keyframes ky-spin { to { --ky-spin: 360deg; } }
@keyframes ky-shine {
  0% { background-position: 100% 0; }
  100% { background-position: 0 100%; }
}
@keyframes ky-wait { to { transform: translate(100%); } }

@media (max-width: 720px) {
  .card-grid--kyara { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; }
}
@media (max-width: 600px) {
  .card-grid--kyara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-cards='compact'] .card-grid--kyara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .card-cell--kyara, .card-cell--kyara:hover, :is(.card-cell--kyara:hover, .viewer__card) .ky { transform: none; }
  :is(.card-cell--kyara:hover, .viewer__card) .ky, :is(.card-cell--kyara:hover, .viewer__card) .ky::after, .ky__art.is-waiting::before { animation: none; }
}