/* Kogni collectible material system.
   Independently authored with layered gradients, masks and tilt-derived light. */

.player-card {
  --map-shift-x: 0px;
  --map-shift-y: 0px;
  --content-shift-x: 0px;
  --content-shift-y: 0px;
  --sticker-shift-x: 0px;
  --sticker-shift-y: 0px;
  --edge-laminate-x: 50%;
  --edge-laminate-y: 50%;
  --edge-laminate-inverse-x: 50%;
  --edge-laminate-inverse-y: 50%;
  --card-shadow-x: 0px;
  --card-shadow-y: 34px;
  --surface-energy: .18;
  --text-holo-energy: 0;
  perspective: 980px;
}

.kogni-card {
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  --card-primary: #45efd0;
  --card-secondary: #9b63ff;
  --card-gradient: linear-gradient(142deg,#08c7b7 0%,#4167e8 28%,#6b45ea 45%,#d83cad 68%,#ff763f 100%);
  --card-ink: #fffaf2;
  --card-muted: rgba(255,250,242,.68);
  --card-wash: rgba(5,6,10,.32);
  --card-shine: .62;
  --card-tilt: .72;
  --card-radius: 28px;
  --texture-zoom: 250%;
  --foil-x: 50%;
  --foil-y: 50%;
  --foil-texture-x: 50%;
  --foil-texture-y: 50%;
  position: relative;
  width: min(360px,84vw);
  aspect-ratio: 5 / 8;
  outline: none;
  transform: translateZ(0);
  touch-action: pan-y;
}

.kogni-card .player-card-inner {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: var(--card-radius);
  color: var(--card-ink);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-origin: 50% 50%;
}

.kogni-card .card-player,
.kogni-card .card-metrics,
.kogni-card .card-footer,
.kogni-card .back-identity,
.kogni-card .back-ledger { position: absolute; }

.kogni-card .card-player { top: 31%; left: 8%; right: 8%; z-index: 4; }
.kogni-card .card-player p { margin: 0 0 7px; color: var(--card-muted); font: 700 9px ui-monospace,monospace; letter-spacing: .15em; }
.kogni-card .card-player h2 { margin: 0; color: var(--card-ink); font: 900 clamp(50px,5.5vw,72px)/.9 "Arial Narrow",Impact,sans-serif; }
.kogni-card .card-player > span { display: inline-block; margin-top: 9px; border-radius: 999px; color: var(--card-ink); font: 700 8px ui-monospace,monospace; letter-spacing: .12em; }

.kogni-card .card-metrics {
  top: 49%;
  left: 8%;
  right: 8%;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}

.kogni-card .card-metrics > div { min-width: 0; min-height: 64px; padding: 11px 10px; border-radius: 11px; display: grid; align-content: center; gap: 4px; }
.kogni-card .card-metrics span { color: var(--card-muted); font: 700 7px ui-monospace,monospace; letter-spacing: .12em; }
.kogni-card .card-metrics strong { color: var(--card-ink); font: 790 21px/1 "Arial Narrow",Arial,sans-serif; }
.kogni-card .card-metrics small { display: none; }

.kogni-card .card-footer {
  left: 8%;
  right: 8%;
  bottom: 6.5%;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.kogni-card .card-footer > b { display: none; }
.kogni-card .card-footer > div:nth-child(2),
.kogni-card.is-back .card-footer > div { display: grid; gap: 3px; }
.kogni-card .card-footer span { color: var(--card-muted); font: 650 6px ui-monospace,monospace; }
.kogni-card .card-footer strong { color: var(--card-ink); font: 700 7px ui-monospace,monospace; letter-spacing: .08em; }
.kogni-card .agent-stack { display: flex; }
.kogni-card .agent-stack span { width: 23px; height: 23px; margin-left: -5px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--card-ink) 42%,transparent); border-radius: 50%; background: color-mix(in srgb,var(--card-wash) 78%,transparent); color: var(--card-ink); font: 700 6px ui-monospace,monospace; }
.kogni-card .agent-stack span:first-child { margin-left: 0; }

.kogni-card .back-identity { top: 9%; left: 8%; right: 8%; }
.kogni-card .back-identity > span { color: var(--card-muted); font: 700 8px ui-monospace,monospace; letter-spacing: .12em; }
.kogni-card .back-identity h2 { margin: 7px 0 2px; color: var(--card-ink); font: 900 52px/.95 "Arial Narrow",Impact,sans-serif; }
.kogni-card .back-identity p { margin: 0; color: var(--card-muted); font-size: 11px; }
.kogni-card .back-ledger { top: 28%; bottom: 15%; left: 8%; right: 8%; display: grid; grid-template-rows: .9fr 1fr 1fr 1.25fr; gap: 9px; }
.kogni-card .back-ledger section { min-height: 0; padding: 12px 13px; border-radius: 12px; display: grid; align-content: center; gap: 4px; }
.kogni-card .back-ledger section > span { color: var(--card-muted); font: 700 7px ui-monospace,monospace; letter-spacing: .1em; }
.kogni-card .back-ledger section > strong { color: var(--card-ink); font-size: 13px; }
.kogni-card .back-ledger section > small { color: var(--card-muted); font-size: 8px; }
.kogni-card .back-ledger section > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.kogni-card .back-ledger section > div b { display: grid; gap: 2px; color: var(--card-ink); font-size: 10px; }
.kogni-card .back-ledger section > div small { color: var(--card-muted); font: 700 7px ui-monospace,monospace; }
.kogni-card .back-story p { margin: 2px 0 0; color: var(--card-ink); font-size: 10px; line-height: 1.4; }

.player-card-inner {
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-wash) 78%, transparent), transparent 27%, transparent 66%, color-mix(in srgb, var(--card-wash) 92%, transparent)),
    linear-gradient(145deg, rgba(255,255,255,.1), transparent 26%, rgba(0,0,0,.12) 78%, rgba(255,255,255,.05)),
    var(--card-gradient);
  box-shadow:
    var(--card-shadow-x) var(--card-shadow-y) 92px rgba(0,0,0,.69),
    0 8px 18px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.52),
    inset 0 0 34px rgba(255,255,255,.075);
  transition: transform 240ms cubic-bezier(.2,.75,.25,1), box-shadow 240ms ease;
}

.player-card.is-tilting .player-card-inner {
  transition: transform 48ms linear, box-shadow 90ms linear;
  will-change: transform, box-shadow;
}

/* Depth 0 — substrate, scenery and color atmosphere. */
.card-background-plane {
  position: absolute;
  z-index: 0;
  inset: -2.5%;
  overflow: hidden;
  border-radius: inherit;
  transform: translate3d(var(--map-shift-x), var(--map-shift-y), 0) scale(1.055);
  transition: transform 260ms cubic-bezier(.2,.75,.25,1);
  pointer-events: none;
}

.player-card.is-tilting .card-background-plane {
  transition: transform 55ms linear;
  will-change: transform;
}

.card-map-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: var(--map-material-opacity,.77);
  mix-blend-mode: luminosity;
  filter: var(--map-material-filter,saturate(88%) contrast(116%) brightness(.92));
}

.card-background-plane > span,
.card-background-plane::before,
.card-background-plane::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.card-background-plane > span {
  z-index: 2;
  background:
    radial-gradient(ellipse at var(--foil-x) var(--foil-y), rgba(255,255,255,.18), transparent 27%),
    radial-gradient(ellipse at 78% 14%, rgba(255,255,255,.26), transparent 34%),
    radial-gradient(ellipse at 18% 70%, color-mix(in srgb, var(--card-primary) 28%, transparent), transparent 46%);
  mix-blend-mode: soft-light;
}

.card-background-plane::before {
  z-index: 3;
  background: linear-gradient(122deg, color-mix(in srgb, var(--card-primary) 30%, transparent), transparent 42%, color-mix(in srgb, var(--card-secondary) 32%, transparent));
  mix-blend-mode: color;
  opacity: .76;
}

.card-background-plane::after {
  z-index: 4;
  background:
    linear-gradient(180deg, rgba(3,4,8,.03) 0 25%, rgba(3,4,8,.18) 48%, rgba(3,4,8,.38) 100%),
    linear-gradient(90deg, rgba(2,3,6,.18), transparent 24%, transparent 76%, rgba(2,3,6,.16));
}

.player-card:not(.has-map) .card-background-plane::before { opacity: .38; }
.background-player .card-background-plane::before { opacity: .7; mix-blend-mode: overlay; }
.background-blank .card-background-plane::after { opacity: .46; }

/* Let the scenery behave like a printed substrate, leaving room for the subject holo. */
.finish-matte .card-map-background { --map-material-opacity: .56; --map-material-filter: saturate(62%) contrast(108%) brightness(.79); }
.finish-soft-glow .card-map-background { --map-material-opacity: .68; --map-material-filter: saturate(78%) contrast(110%) brightness(.87); }
.finish-metallic .card-map-background { --map-material-opacity: .64; --map-material-filter: saturate(56%) contrast(128%) brightness(.8); }
.finish-aurora .card-map-background { --map-material-opacity: .6; --map-material-filter: saturate(82%) contrast(116%) brightness(.81); }
.finish-glitter .card-map-background { --map-material-opacity: .56; --map-material-filter: saturate(74%) contrast(122%) brightness(.74); }

/* Ranked Player Card banners stay in the scenery layer, but print more clearly than maps. */
.card-map-background.card-ranked-banner-background {
  --map-material-opacity: .94;
  --map-material-filter: saturate(104%) contrast(110%) brightness(.94);
  mix-blend-mode: normal;
  object-position: 50% 32%;
}
.mode-ranked.has-banner .card-background-plane > span { opacity: .7; }
.mode-ranked.has-banner .card-background-plane::before {
  background: linear-gradient(122deg,color-mix(in srgb,var(--card-primary) 88%,white 12%),color-mix(in srgb,var(--card-secondary) 88%,white 12%) 52%,color-mix(in srgb,var(--card-primary) 88%,white 12%));
  opacity: .42;
  mix-blend-mode: hue;
}
.mode-ranked.has-banner .card-background-plane::after {
  background:
    linear-gradient(180deg,rgba(3,4,8,.015) 0 28%,rgba(3,4,8,.1) 52%,rgba(3,4,8,.28) 100%),
    linear-gradient(90deg,rgba(2,3,6,.1),transparent 22%,transparent 78%,rgba(2,3,6,.08));
}

/* Depth 2 — hero artwork, with its own contact glow and parallax. */
.card-agent-plane {
  position: absolute;
  z-index: 1;
  inset: 0;
  transform: none;
  pointer-events: none;
}

.card-agent-plane > span {
  position: absolute;
  top: 4%;
  right: -4%;
  width: 76%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--card-secondary) 35%, rgba(255,255,255,.12)), transparent 67%);
  filter: blur(11px);
  opacity: .8;
  transform: translateZ(2px);
}

.card-agent-art,
.studio-player-card .card-agent-art {
  top: 4.5%;
  right: -11%;
  width: 86%;
  height: 45%;
  opacity: .66;
  object-fit: contain;
  filter: drop-shadow(0 17px 24px rgba(3,4,8,.48)) drop-shadow(0 2px 2px rgba(255,255,255,.12));
  -webkit-mask-image: linear-gradient(to bottom, #000 0 70%, rgba(0,0,0,.88) 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 70%, rgba(0,0,0,.88) 80%, transparent 100%);
  transform: translateZ(12px) rotate(3deg);
}

.background-player .card-agent-plane,
.background-blank .card-agent-plane { display: none; }
.is-back .card-agent-plane { display: none; }

/* Depth 1 — printed information lifted above the substrate. */
.card-content-plane {
  position: absolute;
  z-index: 10;
  inset: 0;
  transform: translate3d(var(--content-shift-x), var(--content-shift-y), 22px);
  transform-style: preserve-3d;
  transition: transform 250ms cubic-bezier(.2,.75,.25,1);
  pointer-events: none;
}

.player-card.is-tilting .card-content-plane {
  transition: transform 52ms linear;
  will-change: transform;
}

.back-identity h2 {
  letter-spacing: -.055em;
  -webkit-text-stroke: .35px color-mix(in srgb, var(--card-ink) 50%, transparent);
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--card-ink) 35%, transparent),
    0 3px 0 rgba(2,3,7,.28),
    0 9px 24px rgba(2,3,8,.42);
}

.card-player h2,
.studio-player-card .card-player h2 {
  letter-spacing: -.055em;
  -webkit-text-stroke: .35px color-mix(in srgb,var(--card-ink) 62%,transparent);
  text-shadow:
    0 1px 0 color-mix(in srgb,var(--card-ink) 42%,transparent),
    .045em .055em 0 color-mix(in srgb,var(--card-secondary) 24%,rgba(2,3,7,.72)),
    0 .13em .3em rgba(2,3,8,.38);
}

.card-player > span {
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--card-ink) 28%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-ink) 11%, transparent), color-mix(in srgb, var(--card-wash) 82%, transparent));
  box-shadow: 0 5px 12px rgba(2,3,8,.18), inset 0 1px 0 color-mix(in srgb, var(--card-ink) 18%, transparent);
  backdrop-filter: blur(5px) saturate(115%);
}

.card-metrics > div,
.studio-player-card .card-metrics > div,
.studio-player-card .card-metrics > div:nth-child(4),
.studio-player-card .card-metrics > div:nth-child(5),
.studio-player-card .card-metrics > div:nth-child(6),
.back-ledger section {
  border: 1px solid color-mix(in srgb, var(--card-ink) 13%, transparent);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--card-ink) 12%, transparent), transparent 42%),
    color-mix(in srgb, var(--card-wash) 82%, transparent);
  box-shadow:
    0 8px 18px rgba(2,3,8,.23),
    inset 0 1px 0 color-mix(in srgb, var(--card-ink) 22%, transparent),
    inset 0 -1px 0 rgba(0,0,0,.24);
  backdrop-filter: blur(7px) saturate(120%);
}

.card-metrics strong,
.studio-player-card .card-metrics strong,
.back-ledger section > strong,
.back-ledger section > div b {
  text-shadow: 0 1px 0 color-mix(in srgb, var(--card-ink) 24%, transparent), 0 4px 10px rgba(2,3,8,.32);
}

.agent-stack span {
  box-shadow: 0 5px 12px rgba(2,3,8,.26), inset 0 1px 0 color-mix(in srgb, var(--card-ink) 23%, transparent);
}

/* Physical finish stack — surface, foil and moving reflection. */
.card-surface-texture,
.card-foil-pattern,
.card-shine,
.card-glitter-microfield {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.card-surface-texture { z-index: 5; }
.card-foil-pattern { z-index: 6; opacity: 0; }
.card-shine { z-index: 7; opacity: 0; background: none; }
.card-glitter-microfield { z-index: 7; display: none; opacity: 0; }

.card-surface-texture::before,
.card-surface-texture::after,
.card-foil-pattern::before,
.card-foil-pattern::after,
.card-shine::before,
.card-shine::after,
.card-glitter-microfield::before,
.card-glitter-microfield::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Matte — embossed mineral paper: offset shadow/highlight grains create real tooth. */
.finish-matte .card-surface-texture {
  display: block;
  opacity: .86;
  mix-blend-mode: soft-light;
  background:
    url('/assets/foil-grain.svg') center / 138% 138%,
    repeating-radial-gradient(ellipse at 18% 23%,rgba(255,255,255,.2) 0 .48px,rgba(0,0,0,.18) .72px 1.15px,transparent 1.45px 4.2px),
    repeating-radial-gradient(ellipse at 76% 62%,rgba(0,0,0,.22) 0 .6px,rgba(255,255,255,.14) .85px 1.3px,transparent 1.55px 5.1px);
  background-size: 138% 138%,6px 8px,9px 7px;
  filter: grayscale(45%) contrast(174%) saturate(56%);
}

.finish-matte .card-surface-texture::before {
  inset: -1%;
  opacity: .27;
  mix-blend-mode: multiply;
  background: url('/assets/foil-grain.svg') center / 140% 140%;
  filter: brightness(0) contrast(220%);
  transform: translate(.8px,1.05px);
}

.finish-matte .card-surface-texture::after {
  inset: -1%;
  opacity: .34;
  mix-blend-mode: screen;
  background:
    url('/assets/foil-grain.svg') center / 140% 140%,
    repeating-linear-gradient(4deg,transparent 0 7px,rgba(255,255,255,.12) 7.4px 7.9px,transparent 8.2px 17px);
  filter: brightness(158%) contrast(188%);
  transform: translate(-.65px,-.8px);
}

.finish-matte .card-foil-pattern {
  opacity: calc(.12 + var(--surface-energy) * .16);
  mix-blend-mode: overlay;
  background:
    repeating-radial-gradient(ellipse,rgba(255,255,255,.12) 0 .55px,rgba(0,0,0,.09) .9px 1.25px,transparent 1.5px 5px),
    linear-gradient(118deg,rgba(255,255,255,.16),transparent 31% 68%,rgba(0,0,0,.22));
  background-size: 8px 6px,100% 100%;
  filter: contrast(155%);
}

.finish-matte .card-shine {
  display: block;
  opacity: calc(var(--card-shine) * .055);
  mix-blend-mode: soft-light;
  background: linear-gradient(112deg,transparent 19%,rgba(255,255,255,.13) 36%,rgba(255,255,255,.48) 49%,rgba(0,0,0,.12) 58%,transparent 77%);
  background-size: 230% 100%;
  background-position: var(--foil-x) 50%;
  filter: blur(.7px) contrast(142%);
}

/* Soft glow — satin laminate with diffuse edge bloom, never a pointer hotspot. */
.finish-soft-glow .card-surface-texture {
  opacity: .42;
  mix-blend-mode: soft-light;
  background:
    repeating-radial-gradient(circle, rgba(255,255,255,.13) 0 .35px, transparent .75px 3px),
    linear-gradient(135deg, rgba(255,255,255,.09), transparent 42%, rgba(0,0,0,.08));
  background-size: 7px 9px, 100% 100%;
}

.finish-soft-glow .card-foil-pattern {
  opacity: .42;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 77% 15%, color-mix(in srgb, var(--card-secondary) 28%, transparent), transparent 40%),
    radial-gradient(ellipse at 18% 78%, color-mix(in srgb, var(--card-primary) 24%, transparent), transparent 46%);
}

.finish-soft-glow .card-shine {
  display: block;
  opacity: calc(var(--card-shine) * .26);
  mix-blend-mode: screen;
  background: linear-gradient(112deg, transparent 17%, rgba(255,255,255,.06) 35%, rgba(255,255,255,.5) 49%, rgba(255,255,255,.08) 63%, transparent 82%);
  background-size: 250% 130%;
  background-position: var(--foil-x) var(--foil-y);
  filter: blur(1.6px);
}

/* Metallic — microfaceted radiant stock with crossed silver diffraction. */
.finish-metallic .card-surface-texture {
  opacity: .76;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 .42px,rgba(0,0,0,.11) .72px 1.25px,transparent 1.55px 3.7px),
    linear-gradient(96deg,rgba(255,255,255,.08),rgba(0,0,0,.08) 43%,rgba(255,255,255,.1));
  background-size: 100% 4px,100% 100%;
  filter: contrast(142%) saturate(62%);
}

.finish-metallic .card-surface-texture::before {
  opacity: .34;
  mix-blend-mode: hard-light;
  background:
    conic-gradient(from 45deg at 50% 50%,rgba(255,255,255,.34) 0 25%,rgba(16,19,25,.18) 0 50%,rgba(255,255,255,.08) 0 75%,rgba(5,7,12,.12) 0) 0 0 / 5% 3.125%,
    conic-gradient(from 225deg at 50% 50%,transparent 0 25%,rgba(255,255,255,.18) 0 50%,transparent 0 75%,rgba(0,0,0,.15) 0) 2.5% 1.5625% / 5% 3.125%;
  filter: contrast(152%);
}

.finish-metallic .card-surface-texture::after {
  opacity: .24;
  background:
    linear-gradient(90deg,rgba(255,255,255,.16) 0 .6px,transparent .8px) 0 0 / 5% 100%,
    linear-gradient(0deg,rgba(0,0,0,.14) 0 .6px,transparent .8px) 0 0 / 100% 3.125%;
  mix-blend-mode: overlay;
}

.finish-metallic .card-foil-pattern {
  opacity: calc(.3 + var(--surface-energy) * .48);
  mix-blend-mode: color-dodge;
  background:
    radial-gradient(farthest-corner ellipse at var(--foil-x) var(--foil-y),rgba(255,255,255,.42) 0 8%,rgba(210,225,232,.18) 22%,rgba(33,39,47,.24) 62%,transparent 112%),
    repeating-linear-gradient(45deg,rgba(9,12,17,.32) 0 1.05%,rgba(105,116,124,.12) 1.08% 2.1%,rgba(235,242,244,.3) 2.13% 3.15%,rgba(124,137,145,.11) 3.18% 4.2%,rgba(5,8,13,.28) 4.23% 6.3%),
    repeating-linear-gradient(-45deg,rgba(4,7,12,.3) 0 1.05%,rgba(136,149,157,.12) 1.08% 2.1%,rgba(245,250,251,.28) 2.13% 3.15%,rgba(112,126,135,.1) 3.18% 4.2%,rgba(8,11,16,.27) 4.23% 6.3%);
  background-size: cover,210% 210%,210% 210%;
  background-position: center,var(--foil-texture-x) var(--foil-texture-y),var(--foil-texture-x) var(--foil-texture-y);
  background-blend-mode: exclusion,darken,color-dodge;
  filter: brightness(.76) contrast(190%) saturate(118%);
}

.finish-metallic .card-shine {
  display: block;
  opacity: calc(var(--card-shine) * .54);
  mix-blend-mode: color-dodge;
  background:
    repeating-linear-gradient(55deg,rgba(255,169,168,.28) 0 10%,rgba(167,219,255,.3) 18%,rgba(255,220,164,.28) 30%,rgba(165,255,226,.28) 43%,rgba(243,175,255,.3) 56%,rgba(164,229,255,.27) 70%,rgba(255,169,168,.28) 84%),
    radial-gradient(farthest-corner ellipse at var(--foil-x) var(--foil-y),rgba(255,255,255,.62) 0 5%,rgba(224,238,241,.16) 24%,rgba(26,31,38,.28) 78%,transparent 130%);
  background-size: 400% 100%,330% 280%;
  background-position: calc(100% - var(--foil-texture-x)) var(--foil-texture-y),var(--foil-x) var(--foil-y);
  background-blend-mode: hard-light,screen;
  filter: brightness(.78) contrast(230%) saturate(165%);
}

.finish-metallic .card-shine::before {
  opacity: .58;
  mix-blend-mode: overlay;
  background:
    url('/assets/foil-grain.svg') center / 15% 15%,
    radial-gradient(farthest-corner ellipse at var(--foil-x) var(--foil-y),rgba(255,255,255,.42),rgba(78,88,98,.22) 36%,transparent 78%);
  background-position: center,var(--foil-x) var(--foil-y);
  background-blend-mode: color-dodge;
  filter: brightness(.74) contrast(210%) saturate(65%);
}

.finish-metallic .card-shine::after {
  opacity: .46;
  mix-blend-mode: color-dodge;
  background: repeating-linear-gradient(55deg,transparent 0 12%,rgba(255,255,255,.48) 13% 13.5%,transparent 14.5% 27%);
  background-size: 280% 100%;
  background-position: calc(100% - var(--foil-x)) var(--foil-y);
  filter: blur(.35px) contrast(175%);
}

/* Aurora — wide spectral atmosphere and a restrained prismatic film. */
.finish-aurora .card-surface-texture {
  opacity: .62;
  mix-blend-mode: screen;
  animation: none;
  background:
    radial-gradient(ellipse at 15% 12%, rgba(76,255,217,.25), transparent 34%),
    radial-gradient(ellipse at 84% 27%, rgba(95,132,255,.3), transparent 39%),
    radial-gradient(ellipse at 22% 72%, rgba(244,87,255,.25), transparent 43%),
    radial-gradient(ellipse at 78% 88%, rgba(255,205,99,.2), transparent 38%);
  filter: saturate(132%) contrast(108%);
}

.finish-aurora .card-foil-pattern {
  opacity: .62;
  mix-blend-mode: color-dodge;
  background:
    repeating-linear-gradient(118deg, rgba(82,255,223,.24) 0 10%, rgba(98,139,255,.2) 17%, rgba(242,90,255,.23) 29%, rgba(255,207,104,.2) 40%, rgba(82,255,223,.22) 53%),
    linear-gradient(104deg, transparent 17%, rgba(255,255,255,.24) 47%, transparent 73%);
  background-size: 310% 250%, 240% 100%;
  background-position: var(--foil-x) var(--foil-y), var(--foil-texture-x) 50%;
  background-blend-mode: overlay;
  filter: saturate(150%) contrast(112%);
}

.finish-aurora .card-shine {
  display: block;
  opacity: calc(var(--card-shine) * .3);
  mix-blend-mode: screen;
  background: linear-gradient(112deg, transparent 20%, rgba(91,255,222,.22) 34%, rgba(255,255,255,.5) 48%, rgba(245,111,255,.25) 61%, transparent 80%);
  background-size: 260% 150%;
  background-position: var(--foil-x) var(--foil-y);
  -webkit-mask-image: url('/assets/foil-grain.svg');
  mask-image: url('/assets/foil-grain.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
}

/* Glitter — dense polar clumps stay fixed while each grain receives moving spectrum. */
.finish-glitter .card-surface-texture {
  opacity: .78;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse at 9% 8%,rgba(255,218,132,.26) 0 8%,rgba(255,117,203,.13) 16%,transparent 29%),
    radial-gradient(ellipse at 83% 16%,rgba(103,255,223,.25) 0 7%,rgba(93,144,255,.14) 17%,transparent 31%),
    radial-gradient(ellipse at 27% 45%,rgba(151,255,200,.22) 0 9%,rgba(255,205,91,.12) 20%,transparent 34%),
    radial-gradient(ellipse at 79% 59%,rgba(241,100,255,.23) 0 8%,rgba(255,169,100,.13) 20%,transparent 35%),
    radial-gradient(ellipse at 39% 87%,rgba(95,215,255,.24) 0 8%,rgba(177,112,255,.14) 20%,transparent 35%),
    linear-gradient(128deg,rgba(80,255,219,.09),rgba(255,213,124,.1) 24%,rgba(255,102,211,.09) 49%,rgba(89,145,255,.1) 72%,rgba(148,255,202,.08));
  filter: saturate(154%) contrast(114%);
}

.finish-glitter .card-surface-texture::before {
  inset: -5%;
  opacity: .38;
  mix-blend-mode: screen;
  background:
    repeating-conic-gradient(from 11deg at 51% 49%,rgba(88,255,222,.2) 0 7deg,rgba(255,219,128,.22) 7deg 15deg,rgba(255,104,215,.2) 15deg 23deg,rgba(104,157,255,.22) 23deg 31deg,rgba(166,255,211,.18) 31deg 40deg),
    radial-gradient(ellipse at center,rgba(255,255,255,.18),transparent 63%);
  background-size: 135% 135%,100% 100%;
  background-position: var(--foil-texture-x) var(--foil-texture-y),center;
  filter: blur(4.5px) saturate(165%);
  transform: scale(1.05);
}

.finish-glitter .card-surface-texture::after {
  opacity: .74;
  mix-blend-mode: normal;
  background:
    repeating-conic-gradient(from 17deg at 43% 52%,#78ffe0 0 7deg,#ffe189 7deg 14deg,#ff79dc 14deg 21deg,#80a7ff 21deg 28deg,#c99cff 28deg 35deg,#9affcf 35deg 43deg);
  background-size: 38% 29%;
  background-position: center;
  -webkit-mask: url('/assets/glitter-clumps.png') center / var(--texture-zoom) var(--texture-zoom) no-repeat;
  mask: url('/assets/glitter-clumps.png') center / var(--texture-zoom) var(--texture-zoom) no-repeat;
  filter: contrast(148%) saturate(228%) brightness(104%);
}

.finish-glitter .card-foil-pattern {
  opacity: calc(.3 + var(--surface-energy) * .58);
  mix-blend-mode: hard-light;
  background:
    repeating-conic-gradient(from 25deg at 47% 54%,rgba(71,255,216,.5) 0 6deg,rgba(255,211,107,.68) 6deg 13deg,rgba(255,83,207,.62) 13deg 20deg,rgba(83,139,255,.58) 20deg 27deg,rgba(199,117,255,.56) 27deg 34deg,rgba(121,255,191,.5) 34deg 42deg),
    linear-gradient(118deg,transparent 8%,rgba(73,255,217,.46) 21%,rgba(255,219,121,.72) 34%,rgba(255,255,255,.94) 45%,rgba(246,93,232,.68) 57%,rgba(87,142,255,.48) 72%,transparent 92%);
  background-size: 46% 37%,300% 210%;
  background-position: var(--foil-texture-x) var(--foil-texture-y),var(--foil-x) var(--foil-y);
  background-blend-mode: hard-light,screen;
  -webkit-mask: url('/assets/glitter-clumps.png') center / var(--texture-zoom) var(--texture-zoom) no-repeat;
  mask: url('/assets/glitter-clumps.png') center / var(--texture-zoom) var(--texture-zoom) no-repeat;
  filter: contrast(172%) saturate(240%) brightness(108%);
}

.finish-glitter .card-foil-pattern::before {
  inset: -3%;
  opacity: calc(.2 + var(--surface-energy) * .64);
  mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle,rgba(255,255,255,.98) 0 .8px,rgba(255,233,158,.72) .9px 1.35px,transparent 1.7px) 0 0 / 17px 19px,
    radial-gradient(circle,rgba(126,255,229,.96) 0 .72px,rgba(123,160,255,.56) .9px 1.4px,transparent 1.75px) 7px 11px / 23px 21px,
    radial-gradient(circle,rgba(255,119,224,.92) 0 .68px,rgba(255,255,255,.5) .86px 1.3px,transparent 1.7px) 13px 4px / 29px 27px;
  background-position:
    var(--foil-texture-x) var(--foil-texture-y),
    calc(100% - var(--foil-texture-x)) var(--foil-texture-y),
    var(--foil-texture-x) calc(100% - var(--foil-texture-y));
  filter: drop-shadow(0 0 1.2px rgba(255,255,255,.9)) contrast(210%) saturate(175%);
  transition: opacity 70ms linear,background-position 46ms linear;
}

.finish-glitter .card-foil-pattern::after {
  inset: -4%;
  opacity: calc(.1 + var(--surface-energy) * .48);
  mix-blend-mode: screen;
  background:
    linear-gradient(90deg,transparent 45%,rgba(255,255,255,.92) 49% 51%,transparent 55%) 0 0 / 31px 37px,
    linear-gradient(0deg,transparent 45%,rgba(255,245,202,.86) 49% 51%,transparent 55%) 0 0 / 31px 37px;
  background-position:
    var(--foil-texture-x) calc(100% - var(--foil-texture-y)),
    calc(100% - var(--foil-texture-x)) var(--foil-texture-y);
  filter: blur(.18px) drop-shadow(0 0 1.6px rgba(255,255,255,.84));
  transition: opacity 70ms linear,background-position 42ms linear;
}

.finish-glitter .card-shine {
  display: block;
  opacity: var(--foil-opacity, calc(var(--card-shine) * .38));
  mix-blend-mode: screen;
  background:
    repeating-conic-gradient(from 31deg at 50% 50%,transparent 0 8deg,rgba(255,255,255,.9) 8deg 12deg,rgba(255,230,151,.42) 12deg 18deg,transparent 18deg 31deg),
    linear-gradient(112deg,transparent 18% 31%,rgba(255,255,255,.15) 38%,rgba(255,255,255,.98) 46%,rgba(255,224,145,.38) 52%,transparent 61% 78%);
  background-size: 42% 33%,340% 220%;
  background-position: var(--foil-texture-x) var(--foil-texture-y),var(--foil-x) var(--foil-y);
  -webkit-mask: url('/assets/glitter-clumps.png') center / var(--texture-zoom) var(--texture-zoom) no-repeat;
  mask: url('/assets/glitter-clumps.png') center / var(--texture-zoom) var(--texture-zoom) no-repeat;
  filter: contrast(205%) saturate(145%) brightness(134%);
}

/* A full-surface glitter field: dense clumps travel under one moving light gate. */
.finish-glitter .card-glitter-microfield {
  display: block;
  --glitter-field-size: max(100%,calc(var(--texture-zoom) - 45%));
  opacity: calc(.48 + var(--surface-energy) * .5);
  mix-blend-mode: screen;
  background:
    repeating-conic-gradient(from 9deg at 48% 52%,rgba(91,255,222,.72) 0 7deg,rgba(255,219,129,.76) 7deg 14deg,rgba(255,106,218,.72) 14deg 21deg,rgba(105,155,255,.74) 21deg 28deg,rgba(167,255,209,.7) 28deg 36deg),
    url('/assets/glitter-micrograin.png');
  background-size: 18px 26px,18px 26px;
  background-position: var(--foil-texture-x) var(--foil-texture-y),calc(100% - var(--foil-texture-x)) var(--foil-texture-y);
  -webkit-mask-image: url('/assets/glitter-clumps.png'),linear-gradient(116deg,transparent 4% 18%,rgba(0,0,0,.32) 29%,rgba(0,0,0,.78) 39%,#000 48% 62%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.24) 84%,transparent 96%);
  -webkit-mask-size: var(--glitter-field-size) var(--glitter-field-size),290% 220%;
  -webkit-mask-position: var(--foil-texture-x) var(--foil-texture-y),var(--foil-x) var(--foil-y);
  -webkit-mask-repeat: no-repeat,no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: url('/assets/glitter-clumps.png'),linear-gradient(116deg,transparent 4% 18%,rgba(0,0,0,.32) 29%,rgba(0,0,0,.78) 39%,#000 48% 62%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.24) 84%,transparent 96%);
  mask-size: var(--glitter-field-size) var(--glitter-field-size),290% 220%;
  mask-position: var(--foil-texture-x) var(--foil-texture-y),var(--foil-x) var(--foil-y);
  mask-repeat: no-repeat,no-repeat;
  mask-composite: intersect;
  filter: contrast(156%) saturate(218%) brightness(112%);
  transition: opacity 62ms linear,background-position 42ms linear;
}

.finish-glitter .card-glitter-microfield::before,
.finish-glitter .card-glitter-microfield::after,
.finish-glitter .card-glitter-microfield > i {
  position: absolute;
  inset: -8%;
  display: block;
  content: "";
  pointer-events: none;
  transition: opacity 56ms linear,background-position 38ms linear;
}

.finish-glitter .card-glitter-microfield::before {
  opacity: calc(.25 + var(--surface-energy) * .46);
  mix-blend-mode: color-dodge;
  background: linear-gradient(116deg,transparent 9% 31%,rgba(86,255,224,.22) 34%,rgba(255,255,255,.96) 39% 41%,rgba(255,221,135,.42) 45%,transparent 50% 72%);
  background-size: 340% 215%;
  background-position: var(--foil-x) var(--foil-y);
  filter: drop-shadow(0 0 1px rgba(255,255,255,.92));
}

.finish-glitter .card-glitter-microfield::after {
  opacity: calc(.16 + var(--surface-energy) * .38);
  mix-blend-mode: hard-light;
  background: linear-gradient(35deg,transparent 14% 39%,rgba(255,104,220,.34) 42%,rgba(255,255,255,.88) 45% 47%,rgba(112,158,255,.42) 51%,transparent 56% 84%);
  background-size: 310% 260%;
  background-position: calc(100% - var(--foil-x)) var(--foil-y);
  filter: drop-shadow(0 0 1px rgba(207,155,255,.7));
}

.finish-glitter .card-glitter-microfield > i:nth-child(1) {
  opacity: calc(.16 + var(--surface-energy) * .33);
  mix-blend-mode: screen;
  background: linear-gradient(149deg,transparent 18% 35%,rgba(119,255,229,.36) 39%,rgba(255,234,157,.84) 43% 45%,transparent 51% 82%);
  background-size: 285% 225%;
  background-position: var(--foil-texture-x) calc(100% - var(--foil-texture-y));
}

.finish-glitter .card-glitter-microfield > i:nth-child(2) {
  opacity: calc(.14 + var(--surface-energy) * .3);
  mix-blend-mode: color-dodge;
  background: linear-gradient(74deg,transparent 20% 40%,rgba(125,157,255,.36) 43%,rgba(255,255,255,.92) 46% 48%,rgba(255,113,221,.42) 51%,transparent 56% 80%);
  background-size: 360% 195%;
  background-position: calc(100% - var(--foil-texture-x)) calc(100% - var(--foil-texture-y));
}

.finish-glitter .card-glitter-microfield > i:nth-child(3) {
  opacity: calc(.13 + var(--surface-energy) * .28);
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at 34% 48%,rgba(255,255,255,.94) 0 1.5%,rgba(255,221,139,.36) 4%,transparent 12%);
  background-size: 176% 138%;
  background-position: var(--foil-x) calc(100% - var(--foil-y));
}

.finish-glitter .card-glitter-microfield > i:nth-child(4) {
  opacity: calc(.1 + var(--surface-energy) * .26);
  mix-blend-mode: hard-light;
  background: repeating-linear-gradient(102deg,transparent 0 17%,rgba(255,255,255,.8) 18% 18.7%,transparent 19.5% 37%);
  background-size: 240% 180%;
  background-position: calc(100% - var(--foil-x)) var(--foil-y);
}

.player-card.is-tilting .card-foil-pattern,
.player-card.is-tilting .card-shine,
.player-card.is-tilting .card-glitter-microfield { will-change: opacity, background-position; }

.finish-glitter.is-tilting .card-foil-pattern::before,
.finish-glitter.is-tilting .card-foil-pattern::after,
.finish-glitter.is-tilting .card-glitter-microfield::before,
.finish-glitter.is-tilting .card-glitter-microfield::after,
.finish-glitter.is-tilting .card-glitter-microfield > i { will-change: opacity,background-position; }

/* Material picker uses the same visual vocabulary as the card. */
.finish-preset-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 9px;
}

.finish-preset {
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #111216;
  color: #aaa8b1;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.finish-preset:hover,
.finish-preset:focus-visible { border-color: rgba(255,255,255,.42); transform: translateY(-2px); }
.finish-preset.is-selected { border-color: var(--orange); background: rgba(255,151,55,.075); box-shadow: 0 0 0 2px rgba(255,151,55,.14); }
.finish-preset > span { position: relative; display: block; height: 52px; overflow: hidden; border-radius: 5px; background: linear-gradient(135deg,#159f94,#4f5fda 40%,#b249c9 68%,#ef7148); }
.finish-preset > span::before,
.finish-preset > span::after,
.finish-preset i { content: ""; position: absolute; inset: 0; display: block; }
.finish-preset strong { display: block; margin-top: 7px; overflow: hidden; font: 700 7px/1 ui-monospace,monospace; letter-spacing: .04em; text-align: center; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.finish-preview-matte > span::after { opacity:.6; background: repeating-radial-gradient(circle,rgba(255,255,255,.2) 0 .5px,transparent .8px 3px); background-size:5px 7px; mix-blend-mode:soft-light; }
.finish-preview-soft-glow > span::after { background:linear-gradient(115deg,transparent 16%,rgba(255,255,255,.65) 50%,transparent 82%); filter:blur(2px); }
.finish-preview-metallic > span::before { background:repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 1px,transparent 1px 3px); mix-blend-mode:overlay; }
.finish-preview-metallic > span::after { background:linear-gradient(115deg,transparent 24%,rgba(255,255,255,.78) 50%,transparent 76%); mix-blend-mode:screen; }
.finish-preview-aurora > span::after { background:linear-gradient(115deg,rgba(82,255,222,.45),rgba(104,135,255,.35),rgba(242,93,255,.42),rgba(255,205,104,.36)); mix-blend-mode:color-dodge; }
.finish-preview-glitter > span::before { background:url('/assets/foil-grain.svg') center/cover; mix-blend-mode:overlay; }
.finish-preview-glitter > span::after { background:linear-gradient(115deg,transparent 16%,rgba(97,255,225,.45),rgba(255,230,150,.55),rgba(255,255,255,.8),rgba(244,111,255,.5),transparent 84%); mix-blend-mode:color-dodge; }

.studio-preview .kogni-card { width: min(360px,100%); }
.public-card-gallery .kogni-card { width: 100%; }

@media (max-width: 900px) {
  .studio-preview .kogni-card { width: min(330px,82vw); }
}

@media (max-width: 560px) {
  .finish-preset-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .finish-preset > span { height: 48px; }
  .kogni-card { width: min(320px,86vw); }
}

@media (prefers-reduced-motion: reduce) {
  .card-background-plane,
  .card-agent-plane,
  .card-content-plane { transform: none !important; transition: none !important; }
  .card-foil-pattern,
  .card-shine,
  .card-glitter-microfield,
  .card-glitter-microfield::before,
  .card-glitter-microfield::after,
  .card-glitter-microfield > i,
  .card-agent-sticker-holo,
  .card-agent-sticker-glare { background-position: 50% 50% !important; transition: none !important; will-change: auto !important; }
  .finish-glitter .card-foil-pattern { opacity: .32; }
}

/* Mobile keeps the first physical layers, but drops secondary animated grain traces. */
@media (pointer: coarse) {
  .finish-glitter .card-foil-pattern::before,
  .finish-glitter .card-foil-pattern::after,
  .finish-glitter .card-glitter-microfield::before,
  .finish-glitter .card-glitter-microfield::after,
  .finish-glitter .card-glitter-microfield > i { display: none; }
  .finish-glitter .card-surface-texture::before { opacity: .18; filter: blur(2px) saturate(130%); }
  .player-card.is-tilting .card-foil-pattern,
  .player-card.is-tilting .card-glitter-microfield { will-change: background-position; }
}

.card-export-host .finish-glitter .card-foil-pattern::before,
.card-export-host .finish-glitter .card-foil-pattern::after,
.card-export-host .finish-glitter .card-glitter-microfield::before,
.card-export-host .finish-glitter .card-glitter-microfield::after,
.card-export-host .finish-glitter .card-glitter-microfield > i { display: block !important; }