/* [project]/components/card/card.css [app-client] (css) */
@property --P {
  syntax: "<length>";
  inherits: true;
  initial-value: 0;
}

.card {
  --w: 200px;
  --u: calc(var(--w) / 100);
  --F: max(3px, calc(var(--u) * 2.6));
  --R: calc(var(--u) * 7.5);
  --Ri: calc(var(--u) * 5);
  --kl: max(1px, calc(var(--u) * .4));
  --kc: var(--rc, #8d8880);
  --S: calc(var(--u) * 2.4);
  --rw: max(1px, calc(var(--u) * .55));
  --cn: calc(var(--F) * 2.4);
  --cc: calc(var(--R) - (var(--R) - var(--F) / 2) * .7071 - var(--cn) / 2);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 .55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --hk: max(26px, calc(var(--u) * 18));
  --bf: max(11px, calc(var(--u) * 8.4));
  --bp: max(2px, calc(var(--u) * 1.5));
  --nl: 12;
  --nk: 1;
  --nw: 82;
  --nmin: 12px;
  --nfx: max(var(--nmin), calc(var(--u) * 10.4));
  --nf: max(var(--nmin), min(var(--nfx), calc(var(--u) * var(--nw) / var(--nl) / .64 * var(--nk))));
  --mf: max(9px, calc(var(--u) * 5.1));
  --mpv: 0px;
  --cf: max(8.5px, calc(var(--u) * 5));
  --cpv: max(2px, calc(var(--u) * 1.1));
  --px: calc(var(--u) * 5.4);
  --pb: max(6px, calc(var(--u) * 4.4));
  --gp: max(2px, calc(var(--u) * 1.6));
  --rowM: max(3px, calc(var(--u) * 2.2));
  --rowH: max(calc(var(--cf) + var(--cpv) * 2 + 2px), calc(var(--mf) * 1.15 + var(--mpv) * 2));
  --P0: calc(var(--pb) + var(--nfx) * 1.05 + var(--gp) + var(--S) + var(--rw));
  --P1: calc(var(--P0) + var(--rowM) + var(--rowH));
  --P: var(--P1);
  --Pr: var(--P1);
  width: var(--w);
  height: calc(var(--w) * 1.4);
  border-radius: var(--R);
  isolation: isolate;
  color: var(--color-bone);
  font-family: var(--font-sans);
  text-align: left;
  box-shadow: var(--glow, 0 0 0 1px #0009), 0 calc(var(--u) * 6) calc(var(--u) * 10) calc(var(--u) * -5) #000000d9;
  flex: none;
  position: relative;
}

.card, .cback {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.card img, .cback img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.card .hit {
  inset: min(-3px, calc(var(--u) * -3));
  z-index: -1;
  pointer-events: inherit;
  background: none;
  position: absolute;
}

.card.sm {
  --bf: 13px;
  --bp: 2.5px;
}

.card.xs {
  --S: calc(var(--u) * 3);
  --bf: 10px;
  --bp: 2px;
  --nmin: 10px;
  --nfx: max(10px, calc(var(--u) * 9.4));
  --pb: 6px;
  --px: 5px;
  --gp: 2px;
  --rowM: 0px;
  --rowH: 0px;
}

.fr {
  border-radius: inherit;
  contain: paint;
  background: var(--frame);
  position: absolute;
  inset: 0;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff6b, inset 0 -1px #0006, inset 0 0 0 1px #00000059;
}

.fr .sw, .fr .ir {
  aspect-ratio: 1;
  pointer-events: none;
  width: 190%;
  margin: -95% 0 0 -95%;
  position: absolute;
  top: 50%;
  left: 50%;
}

.fr .sw {
  background: var(--sweep, none);
  opacity: calc(var(--sweep-o, 0) * .55);
  transform: rotate(calc(40deg + var(--tx, 0) * 40deg));
}

.fr .ir {
  opacity: calc(var(--irid, 0) * .9);
  mix-blend-mode: multiply;
  transform: rotate(calc(-30deg - var(--tx, 0) * 40deg));
  background: conic-gradient(#ffc6d6, #bcdcff, #d9c9ff, #bff5df, #ffe7a8, #ffc6d6);
}

.fr .sp {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.fr .sp:after {
  content: "";
  position: absolute;
  inset: 0;
}

.win {
  inset: var(--F);
  border-radius: var(--Ri);
  contain: paint;
  background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, var(--rc) 30%, #15151b), #0a0a0d 75%);
  box-shadow: 0 0 0 var(--kl) var(--kc), 0 0 0 calc(var(--kl) + 1px) #08080a99;
  position: absolute;
  overflow: hidden;
}

.win .ini {
  font: 400 calc(var(--u) * 30)/1 var(--font-display);
  color: #f1ebdf38;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0 0 32%;
}

.win img {
  image-rendering: auto;
  width: 100%;
  top: var(--sy, 0%);
  height: calc(100% - var(--sy, 0%));
  object-fit: cover;
  object-position: var(--op, 50% 16%);
  display: block;
  position: relative;
}

.win img.broken {
  visibility: hidden;
}

.card.zm .win img, .card.zm .win canvas.upx {
  transform: scale(var(--az, 1));
  transform-origin: var(--op, 50% 16%);
}

.win img.up {
  object-fit: none;
}

.win canvas.upx {
  left: 0;
  top: var(--sy, 0%);
  width: 100%;
  height: calc(100% - var(--sy, 0%));
  object-fit: cover;
  object-position: var(--op, 50% 16%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s linear;
  display: block;
  position: absolute;
}

.win canvas.upx[data-on] {
  opacity: 1;
}

.win canvas.upx[data-instant] {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .win canvas.upx {
    transition: none;
  }
}

.win .tone {
  pointer-events: none;
  opacity: calc(var(--tone-o, 0) * .3);
  background: radial-gradient(circle at center, var(--tone-c, transparent) 0 26%, transparent 30%) 0 0/max(4px, calc(var(--u) * 2.6)) max(4px, calc(var(--u) * 2.6));
  position: absolute;
  inset: 0;
  -webkit-mask: radial-gradient(74% 58% at 50% 34%, #0000 56%, #000 100%);
  mask: radial-gradient(74% 58% at 50% 34%, #0000 56%, #000 100%);
}

.card:not(.holo):not(.hid):not(.v-full) .win:before {
  content: "";
  z-index: 1;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: soft-light;
  background: var(--grain) 0 0/160px 160px;
  position: absolute;
  inset: 0;
}

.win:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(#08080a42 0, #0000 12% 56%, #08080a9e 80%);
  position: absolute;
  inset: 0;
}

.plate {
  left: var(--F);
  right: var(--F);
  bottom: var(--F);
  height: var(--P);
  border-radius: 0 0 var(--Ri) var(--Ri);
  position: absolute;
}

.pl-bg {
  border-radius: inherit;
  background: var(--rule, var(--color-line-2));
  clip-path: polygon(0 var(--S), 100% 0, 100% 100%, 0 100%);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.pl-bg:before {
  content: "";
  background: var(--plate, #0b0b0e);
  clip-path: polygon(0 calc(var(--S) + var(--rw)), 100% var(--rw), 100% 100%, 0 100%);
  position: absolute;
  inset: 0;
}

.pl-tone {
  opacity: var(--pl-tone-o, calc(var(--tone-o, 0) * .28));
  background: radial-gradient(circle at center, var(--pl-tone-c, var(--tone-c, transparent)) 0 24%, transparent 28%) 0 0/max(3.5px, calc(var(--u) * 2.2)) max(3.5px, calc(var(--u) * 2.2));
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(100deg, #0000 38%, #000 100%);
  mask: linear-gradient(100deg, #0000 38%, #000 100%);
}

.pl-band {
  width: 64%;
  opacity: var(--band-o, 0);
  clip-path: polygon(34% 0, 100% 0, 66% 100%, 0 100%);
  background: linear-gradient(90deg, #d4142f0d, #d4142fbf 70%, #ff2e4af2);
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8%;
}

.wm {
  right: calc(var(--u) * -2);
  bottom: calc(var(--u) * -9);
  font: 400 calc(var(--u) * 40)/1 var(--font-brush);
  color: var(--wmc, transparent);
  opacity: var(--wmo, 0);
  pointer-events: none;
  position: absolute;
}

.pl-c {
  z-index: 6;
  height: 100%;
  padding: 0 var(--px) var(--pb);
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
  position: relative;
}

.nm {
  font: 400 var(--nf)/1.02 var(--font-display);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--nmc, var(--color-bone));
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-shrink: 0;
  display: block;
  overflow: hidden;
}

.nm .ns {
  display: none;
}

.ft {
  justify-content: space-between;
  align-items: center;
  gap: max(4px, calc(var(--u) * 2));
  margin-top: var(--rowM);
  min-width: 0;
  display: flex;
}

.md {
  min-width: 0;
  font: 600 var(--mf)/1.15 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mdc, var(--color-muted));
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: auto;
  display: block;
  overflow: hidden;
}

.code {
  font: 700 var(--cf)/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--codec, var(--color-bone));
  padding: var(--cpv) max(3px, calc(var(--u) * 1.6));
  border: 1px solid var(--codeb, #f1ebdf3d);
  background: var(--codebg, #f1ebdf0d);
  white-space: nowrap;
  border-radius: 3px;
  flex: none;
}

.card.sm .code {
  letter-spacing: .05em;
  padding-inline: 3px;
}

.card.sm .ft {
  gap: 3px;
}

.cn {
  z-index: 3;
  width: var(--cn);
  height: var(--cn);
  pointer-events: none;
  color: var(--orn, transparent);
  position: absolute;
  overflow: visible;
}

.cn.tl {
  top: var(--cc);
  left: var(--cc);
}

.cn.tr {
  top: var(--cc);
  right: var(--cc);
  transform: scaleX(-1);
}

.cn.bl {
  bottom: var(--cc);
  left: var(--cc);
  transform: scaleY(-1);
}

.cn.br {
  bottom: var(--cc);
  right: var(--cc);
  transform: scale(-1);
}

.card:is(.r-C, .r-U, .r-R) .cn {
  display: none;
}

.card.sm.r-UR {
  --band-o: 1;
}

.badge {
  z-index: 6;
  top: var(--F);
  left: var(--F);
  align-items: center;
  gap: calc(var(--u) * 1.4);
  padding: var(--bp) calc(var(--u) * 4.2) var(--bp) calc(var(--u) * 3.2);
  background: var(--badge-bg, var(--rc));
  color: var(--rc-ink, #08080a);
  border-top-left-radius: var(--Ri);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--u) * 2.8) 100%, 0 100%);
  box-shadow: var(--badge-sh, none);
  display: flex;
  position: absolute;
}

.badge b {
  font: 400 var(--bf)/1 var(--font-display);
  letter-spacing: .04em;
}

.badge i {
  font: 400 calc(var(--u) * 6.4)/1 var(--font-brush);
  opacity: .9;
  font-style: normal;
}

.card.sm .badge {
  padding-right: 7px;
}

.card.xs .badge {
  padding-right: 6px;
}

.card.sm .badge i, .card.xs .badge i {
  display: none;
}

.htag {
  z-index: 6;
  left: var(--F);
  top: calc(var(--F) + var(--bf) + var(--bp) * 2 + max(2px, calc(var(--u) * 1.2)));
  font: 700 max(7.5px, calc(var(--u) * 4.3))/1 var(--font-mono);
  letter-spacing: .14em;
  padding: max(2px, calc(var(--u) * 1.2)) max(3px, calc(var(--u) * 1.8));
  color: #16061f;
  background: linear-gradient(90deg, #2ef2ff, #c8ff3d, #ff3d9a);
  border-radius: 0 2px 2px 0;
  position: absolute;
}

.card.sm .htag, .card.xs .htag {
  letter-spacing: 0;
  border-radius: 0 3px 3px 0;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  font-size: 0;
  display: grid;
}

.card.sm .htag:after, .card.xs .htag:after {
  content: "✦";
  font: 700 11px/1 var(--font-sans);
  color: #16061f;
}

.pn {
  z-index: 6;
  top: calc(var(--F) + var(--u) * 2.8);
  right: calc(var(--F) + var(--u) * 2.8);
  align-items: flex-end;
  gap: max(1px, calc(var(--u) * .6));
  flex-direction: column;
  display: flex;
  position: absolute;
}

.pn b {
  font: 700 max(9px, calc(var(--u) * 5.6))/1 var(--font-mono);
  padding: max(2px, calc(var(--u) * 1.2)) max(3px, calc(var(--u) * 1.8));
  color: var(--color-bone);
  background: #08080ad1;
  border: 1px solid #f1ebdf42;
  border-radius: 3px;
}

.pn small {
  font: 700 max(7px, calc(var(--u) * 3.5))/1 var(--font-mono);
  letter-spacing: .14em;
  padding: max(1.5px, calc(var(--u) * .9)) max(3px, calc(var(--u) * 1.4));
  background: #08080ad1;
  border-radius: 2px;
}

.pn.first b {
  background: var(--color-crimson-btn);
  color: #fff;
  border-color: #ff8a99;
}

.pn.first small {
  color: #ffb3be;
}

.pn.low b {
  background: var(--color-steel);
  color: #08080a;
  border-color: #d6e6fb;
}

.pn.low small {
  color: var(--color-steel);
}

.pn.mile b {
  background: var(--color-bone);
  color: #08080a;
  box-shadow: 0 0 0 max(1px, calc(var(--u) * .7)) var(--color-bone);
  border-color: #08080a;
}

.pn.mile small {
  color: var(--color-bone);
}

.card.sm .pn small, .card.xs .pn small, .card.xs .pn {
  display: none;
}

.vtag {
  z-index: 6;
  left: calc(var(--F) + var(--u) * 3);
  bottom: calc(var(--F) + var(--P) + var(--u) * 2);
  font: 700 max(7.5px, calc(var(--u) * 4.2))/1 var(--font-mono);
  letter-spacing: .14em;
  padding: max(2px, calc(var(--u) * 1.2)) max(3px, calc(var(--u) * 1.8));
  color: var(--color-bone);
  box-shadow: max(1px, calc(var(--u) * .8)) max(1px, calc(var(--u) * .8)) 0 var(--color-crimson-btn);
  background: #08080a;
  border: 1px solid #f1ebdf66;
  position: absolute;
}

.glare {
  z-index: 7;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: var(--go, 0);
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 18%), #ffffffb3, #ffffff24 26%, transparent 56%);
  transition: opacity .3s;
  position: absolute;
  inset: 0;
}

.card.live .glare {
  transition: none;
}

.rim {
  z-index: 8;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--rim, #ffffff1a), inset 0 1px 0 #ffffff52;
  position: absolute;
  inset: 0;
}

.hanko {
  z-index: 6;
  width: var(--hk);
  height: var(--hk);
  right: calc(var(--F) + var(--u) * 2.5);
  bottom: calc(var(--F) + var(--P) - var(--u) * 5);
  filter: drop-shadow(0 2px 2px #0009);
  pointer-events: none;
  position: absolute;
  overflow: visible;
  rotate: -9deg;
}

.card.xs .hanko {
  --hk: 22px;
}

.card.thunk .hanko {
  animation: cv3-thunk var(--first-print-beat, .6s) cubic-bezier(.2,1.25,.35,1) both;
}

.card.thunk:after {
  content: "";
  z-index: 6;
  pointer-events: none;
  width: var(--hk);
  height: var(--hk);
  right: calc(var(--F) + var(--u) * 2.5);
  bottom: calc(var(--F) + var(--P) - var(--u) * 5);
  border-radius: 18%;
  animation: .7s ease-out .2s both cv3-inkring;
  position: absolute;
  box-shadow: 0 0 0 2px #ff2e4ae6, 0 0 18px #ff2e4acc;
}

.r-U .fr .sp, .r-SR .fr .sp, .r-UR .fr .sp {
  mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent calc(var(--gx, 30%) - 9%), #ffffff2e calc(var(--gx, 30%) - 3%), #fffffff2 calc(var(--gx, 30%) - 0.6%), #ffffff4d calc(var(--gx, 30%) + 1.2%), transparent calc(var(--gx, 30%) + 7%)),
    radial-gradient(48% 34% at var(--gx, 30%) var(--gy, 18%), #ffffffb3, #ffffff1f 55%, transparent 75%);
}

.r-U .fr .sp:after, .r-SR .fr .sp:after, .r-UR .fr .sp:after {
  mix-blend-mode: multiply;
  background: radial-gradient(70% 55% at calc(100% - var(--gx, 30%)) calc(100% - var(--gy, 18%)), #0000008c, transparent 70%);
}

.r-R .fr .sp {
  mix-blend-mode: screen;
  opacity: .55;
  background: linear-gradient(90deg, transparent calc(var(--gx, 30%) - 26%), #dcebff59 calc(var(--gx, 30%) - 9%), #fffffff2 var(--gx, 30%), #dcebff59 calc(var(--gx, 30%) + 9%), transparent calc(var(--gx, 30%) + 26%));
}

.r-R .fr .sp:after {
  background: linear-gradient(90deg, transparent calc(100% - var(--gx, 30%) - 8%), #fff6 calc(100% - var(--gx, 30%)), transparent calc(100% - var(--gx, 30%) + 8%));
  mix-blend-mode: screen;
  opacity: .6;
}

.r-L .fr .sp {
  mix-blend-mode: multiply;
  background: linear-gradient(115deg, transparent calc(var(--gx, 30%) - 46%), #ffb8cf calc(var(--gx, 30%) - 28%), #a9cdff calc(var(--gx, 30%) - 12%), #fff var(--gx, 30%), #a8f0d2 calc(var(--gx, 30%) + 12%), #ffe09a calc(var(--gx, 30%) + 28%), #d8b8ff calc(var(--gx, 30%) + 42%), transparent calc(var(--gx, 30%) + 58%));
}

.r-L .fr .sp:after {
  mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent calc(var(--gx, 30%) - 6%), #fff var(--gx, 30%), transparent calc(var(--gx, 30%) + 6%));
}

.card.lay-art {
  --P: var(--P0);
  --Pr: var(--P0);
}

.card.lay-art .pl-c {
  overflow: hidden;
}

.card.lay-art .pn small {
  display: none;
}

.card.lay-art.sm .pn {
  opacity: .95;
}

.card.lay-art .ft {
  opacity: 0;
  max-height: 0;
  transition: transform .22s var(--ease-out), opacity .18s linear;
  margin-top: 0;
  overflow: hidden;
  transform: translateY(40%);
}

.card.lay-art:is(:hover, :focus-within, .peek):not(.calm), .cl:focus-visible:not(.quiet) > .card.lay-art:not(.calm) {
  --P: var(--P1);
}

.card.lay-art:is(:hover, :focus-within, .peek):not(.calm) .ft, .cl:focus-visible:not(.quiet) > .card.lay-art:not(.calm) .ft {
  opacity: 1;
  max-height: 4em;
  margin-top: var(--rowM);
  transform: none;
}

.card.lay-art .hanko {
  bottom: calc(var(--F) + var(--P) + var(--u) * 1.5);
}

.card.calm {
  --rowM: 0px;
  --rowH: 0px;
}

.card.calm .ft, .card.xs .ft, .card.xs .wm {
  display: none;
}

.card.xs .pl-c {
  padding: 0 var(--px) var(--pb);
}

.card.xs.has-s {
  --nl: var(--nls);
}

.card.xs.has-s .nm .nf {
  display: none;
}

.card.xs.has-s .nm .ns {
  display: inline;
}

.card.v-full {
  --F: max(5px, calc(var(--u) * 4.5));
  --nmin: 11px;
  --nfx: max(11px, calc(var(--u) * 7.4));
  --nw: 74;
  --S: 0px;
  --rw: 0px;
  --gp: calc(var(--u) * 2);
  --pb: max(4px, calc(var(--u) * 2.6));
  --px: calc(var(--u) * 3);
  --mpv: max(2px, calc(var(--u) * 1.2));
  --rowM: max(3px, calc(var(--u) * 2));
  --tagH: calc(var(--nfx) * 1.12 + max(1.5px, var(--u)) + max(1px, calc(var(--u) * .9)) + max(1px, calc(var(--u) * .55)) * 2);
  --P0: calc(var(--pb) + var(--tagH) + var(--gp));
}

.card.v-full .fr {
  background: #08080a;
}

.card.v-full .win {
  border-radius: inherit;
  box-shadow: none;
  inset: 0;
}

.card.v-full .win img, .card.v-full .win canvas.upx {
  object-position: var(--op, 50% 0);
}

.card.v-full .win:after {
  background: none;
}

.card.v-full .pl-bg, .card.v-full .wm, .card.v-full .cn {
  display: none;
}

.card.v-full .plate {
  --nmc: #08080a;
  --mdc: var(--color-bone);
  --codec: #fff;
  --codeb: #ffffff73;
  --codebg: #08080ae0;
}

.card.v-full .pl-c {
  align-items: flex-start;
  overflow: visible;
}

.card.v-full .nm {
  letter-spacing: .015em;
  max-width: 100%;
  padding: max(1.5px, var(--u)) max(4px, calc(var(--u) * 2.2)) max(1px, calc(var(--u) * .9));
  background: var(--color-bone);
  border: max(1px, calc(var(--u) * .55)) solid #08080a;
  box-shadow: max(1.5px, calc(var(--u) * .9)) max(1.5px, calc(var(--u) * .9)) 0 var(--fa-sh, var(--rc));
  transform-origin: 0 100%;
  line-height: 1.12;
  rotate: -1.5deg;
}

.card.v-full.r-L {
  --fa-sh: var(--color-crimson-btn);
}

.card.v-full .ft {
  justify-content: flex-start;
  max-width: 100%;
}

.card.v-full .md {
  letter-spacing: .06em;
  padding: var(--mpv) max(4px, calc(var(--u) * 2));
  background: #08080a;
  flex: 0 auto;
  font-weight: 700;
}

.card.v-full .etch {
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .34;
  background: repeating-linear-gradient(135deg, #ffffff80 0 1px, #0000 1px 4px);
  position: absolute;
  inset: 0;
  -webkit-mask: radial-gradient(78% 62% at 50% 38%, #00000073 30%, #000 100%);
  mask: radial-gradient(78% 62% at 50% 38%, #00000073 30%, #000 100%);
}

.card.v-full .edge {
  z-index: 8;
  border-radius: inherit;
  pointer-events: none;
  padding: max(1.5px, calc(var(--u) * .9));
  background: linear-gradient(150deg, #fff, color-mix(in srgb, var(--rc) 70%, #fff) 22%, color-mix(in srgb, var(--rc) 80%, #3a3a44) 46%, #fff 58%, color-mix(in srgb, var(--rc) 75%, #fff) 80%, #fff);
  -webkit-mask-composite: xor;
  position: absolute;
  inset: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor, source-over;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.card.v-full .vtag {
  bottom: calc(var(--F) + var(--P) + var(--u) * 2.4);
  font-size: max(8.5px, calc(var(--u) * 5.2));
  letter-spacing: .16em;
  padding: max(2px, calc(var(--u) * 1.5)) max(4px, calc(var(--u) * 2.6));
  background: var(--color-crimson-btn);
  color: #fff;
  box-shadow: max(1px, calc(var(--u) * .8)) max(1px, calc(var(--u) * .8)) 0 #08080a;
  border-color: #fff;
}

.card.v-ink .win {
  background: #f1ebdf;
}

.card.v-ink .win img {
  filter: grayscale() contrast(1.55) brightness(1.08);
  mix-blend-mode: multiply;
}

.card.v-ink .win .halft {
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .5;
  background: radial-gradient(circle, #f1ebdf 0 22%, transparent 26%) 0 0/max(3px, calc(var(--u) * 1.8)) max(3px, calc(var(--u) * 1.8));
  position: absolute;
  inset: 0;
}

.card.v-ink .win .spot {
  pointer-events: none;
  mix-blend-mode: lighten;
  background: linear-gradient(160deg, #5a0614, #2a0309 60%, #08080a);
  position: absolute;
  inset: 0;
}

.card.v-ink .win:after {
  background: linear-gradient(#0000 60%, #08080a99 78%);
}

.card.v-ink .wm {
  opacity: .3;
  color: var(--color-crimson);
}

.card.hid.r-C, .card.hid {
  --rc: #55555f;
  --kc: #3a3a44;
  --frame: linear-gradient(160deg,#2c2c33,#1d1d22);
  --hair: #f1ebdf1a;
  --rule: #2f2f38;
  --plate: #0e0e11;
}

.hid .win {
  background: repeating-linear-gradient(-45deg, #f1ebdf09 0 2px, #0000 2px 9px), linear-gradient(#17171c, #101014);
}

.hid .h-art {
  justify-content: center;
  align-items: center;
  gap: calc(var(--u) * 4);
  padding: 0 calc(var(--u) * 9) calc(var(--P) * .9);
  text-align: center;
  flex-direction: column;
  display: flex;
  position: absolute;
  inset: 0;
}

.hid .h-art svg {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  color: #6f6f7a;
}

.hid .h-art p {
  font: 700 max(9px, calc(var(--u) * 5.4))/1.25 var(--font-sans);
  letter-spacing: .04em;
  color: #a29b8f;
  text-transform: uppercase;
}

.hid .badge {
  color: #a29b8f;
  background: #2f2f38;
}

.hid .redact {
  height: max(10px, calc(var(--u) * 8));
  background: #2a2a32;
  border-radius: 2px;
  width: 72%;
  display: block;
}

.hid .redact.s {
  height: max(6px, calc(var(--u) * 4));
  width: 46%;
  margin-top: max(3px, calc(var(--u) * 2));
}

.cback {
  --w: 200px;
  --u: calc(var(--w) / 100);
  --R: calc(var(--u) * 7.5);
  --F: max(5px, calc(var(--u) * 4.5));
  width: var(--w);
  height: calc(var(--w) * 1.4);
  border-radius: var(--R);
  isolation: isolate;
  box-shadow: 0 0 0 1px #000, 0 calc(var(--u) * 6) calc(var(--u) * 10) calc(var(--u) * -5) #000000d9;
  flex: none;
  position: relative;
}

.cb-in {
  border-radius: inherit;
  background: radial-gradient(70% 55% at 50% 46%, #1b1b22, #09090c 80%);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.cb-lines {
  background: repeating-conic-gradient(from 0deg at 50% 46%, #f1ebdf13 0 .9deg, transparent .9deg 6deg), radial-gradient(circle, #f1ebdf12 1px, transparent 1.4px) 0 0/max(4px, calc(var(--u) * 3)) max(4px, calc(var(--u) * 3));
  position: absolute;
  inset: -10%;
  -webkit-mask: radial-gradient(closest-side at 50% 46%, #0000 26%, #000 80%);
  mask: radial-gradient(closest-side at 50% 46%, #0000 26%, #000 80%);
}

.cb-bw {
  inset: var(--F);
  border-radius: max(3px, calc(var(--u) * 2.6));
  position: absolute;
  overflow: hidden;
}

.cb-band {
  height: calc(var(--u) * 13);
  background: linear-gradient(90deg, var(--color-crimson-deep), var(--color-crimson-btn) 40%, var(--color-crimson-btn) 60%, var(--color-crimson-deep));
  box-shadow: 0 0 0 max(1.5px, calc(var(--u) * 1.2)) #000;
  position: absolute;
  top: 57%;
  left: -30%;
  right: -30%;
  transform: rotate(-16deg);
}

.cb-frame {
  inset: var(--F);
  border-radius: max(3px, calc(var(--u) * 2.6));
  box-shadow: inset 0 0 0 max(2px, calc(var(--u) * 1.2)) #08080ae6;
  border: 1px solid #f1ebdf4d;
  position: absolute;
}

.cb-seal {
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 54);
  margin: calc(var(--u) * -27) 0 0 calc(var(--u) * -25);
  filter: drop-shadow(calc(var(--u) * 1.4) calc(var(--u) * 1.8) 0 #000);
  position: absolute;
  top: 46%;
  left: 50%;
  rotate: -5deg;
}

.cb-seal svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  overflow: visible;
}

.cb-seal .k {
  font: 400 calc(var(--u) * 27)/1 var(--font-brush);
  color: #0a0a0c;
  place-items: center;
  padding-bottom: 6%;
  display: grid;
  position: absolute;
  inset: 0;
}

.cb-logo {
  left: 50%;
  top: calc(var(--F) + var(--u) * 7);
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  margin-left: calc(var(--u) * -6.5);
  position: absolute;
}

.cb-word {
  left: 0;
  right: 0;
  bottom: calc(var(--F) + var(--u) * 6);
  text-align: center;
  font: 400 max(10px, calc(var(--u) * 7.6))/1 var(--font-display);
  letter-spacing: .18em;
  color: var(--color-bone);
  position: absolute;
}

.cb-word i {
  color: var(--color-crimson);
  font-style: normal;
}

.cback .cn {
  --cn: calc(var(--u) * 14);
  --cc: 0px;
  --orn: var(--color-crimson);
  color: var(--color-crimson);
}

.cb-date {
  z-index: 2;
  left: 50%;
  bottom: calc(var(--F) + var(--u) * 17.5);
  align-items: center;
  column-gap: calc(var(--u) * 2.6);
  padding: calc(var(--u) * 2) calc(var(--u) * 4.2) calc(var(--u) * 2) calc(var(--u) * 2.2);
  color: #14100c;
  white-space: nowrap;
  clip-path: polygon(calc(var(--u) * 1.6) 0,calc(100% - var(--u) * 1.6) 0,100% calc(var(--u) * 1.6),100% calc(100% - var(--u) * 1.6),calc(100% - var(--u) * 1.6) 100%,calc(var(--u) * 1.6) 100%,0 calc(100% - var(--u) * 1.6),0 calc(var(--u) * 1.6));
  box-shadow: inset 0 0 0 max(1px, calc(var(--u) * .5)) #f6f0e3, inset 0 0 0 max(1.5px, calc(var(--u) * .9)) #14100cbf;
  background: linear-gradient(#f6f0e3, #e6dcc8);
  grid-template-columns: auto auto;
  display: grid;
  position: absolute;
  translate: -50%;
  rotate: -3deg;
}

.cb-date:before {
  content: "引";
  width: calc(var(--u) * 8.4);
  height: calc(var(--u) * 8.4);
  font: 400 calc(var(--u) * 5.6)/1 var(--font-brush);
  color: #fff;
  background: var(--color-crimson-btn);
  border-radius: max(1px, calc(var(--u) * .8));
  grid-row: 1 / span 2;
  place-items: center;
  display: grid;
  rotate: 4deg;
}

.cb-date small {
  font: 700 max(7px, calc(var(--u) * 3.3))/1.1 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #4a443c;
}

.cb-date b {
  font: 400 max(10px, calc(var(--u) * 6.4))/1 var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #14100c;
  margin-top: calc(var(--u) * .6);
}

.cback {
  --tc: transparent;
  --ti: 0;
}

.cb-aura {
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 0 max(1.5px, calc(var(--u) * 1)) var(--tc), 0 0 calc(var(--u) * 10) calc(var(--u) * 1) var(--tc), 0 0 calc(var(--u) * 30) color-mix(in srgb, var(--tc) 60%, transparent);
  position: absolute;
  inset: 0;
}

.cb-tint {
  opacity: calc(var(--ti) * .9);
  background: radial-gradient(55% 42% at 50% 46%, color-mix(in srgb, var(--tc) 60%, transparent), transparent 75%);
  position: absolute;
  inset: 0;
}

.cback.tell .cb-aura {
  opacity: var(--ti);
  animation: 2.2s ease-in-out infinite tell;
}

.cback.tell .cb-frame {
  border-color: color-mix(in srgb, var(--tc) calc(var(--ti) * 85%), #f1ebdf4d);
}

.t-C {
  --tc: var(--color-rarity-c);
  --ti: .12;
}

.t-U {
  --tc: var(--color-rarity-u);
  --ti: .4;
}

.t-R {
  --tc: var(--color-rarity-r);
  --ti: .6;
}

.t-SR {
  --tc: var(--color-rarity-sr);
  --ti: .8;
}

.t-UR {
  --tc: var(--color-rarity-ur);
  --ti: 1;
}

.t-UR .cb-aura {
  animation-duration: 1.4s;
}

.t-L {
  --tc: var(--color-rarity-l);
  --ti: 1;
}

.t-L .cb-aura {
  box-shadow: 0 0 calc(var(--u) * 7) calc(var(--u) * 1) #fff, 0 0 calc(var(--u) * 20) #7fb2eeb3, 0 0 calc(var(--u) * 40) #ff2e4a66;
  animation-duration: 1.1s;
}

.cback .glare {
  z-index: 9;
}

.card .sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.card[data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

/* Shared relief: the illustration slides behind the physical frame.
   Independent transforms preserve the card's existing art zoom and variants.
   Duel cards already use the equivalent holo-cards.css treatment. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.lite) .card:not(.holo-card):not([data-maq-notilt]) .win img,
  html:not(.lite) .card:not(.holo-card):not([data-maq-notilt]) .win canvas.upx {
    translate: calc(var(--relief-x, var(--tx, 0)) * var(--u) * -2)
      calc(var(--relief-y, var(--ty, 0)) * var(--u) * -2);
    scale: calc(1 + clamp(0, var(--go, 0), 1) * .065);
    transition: scale var(--dur-base, 240ms) var(--ease-out);
  }
  html:not(.lite) .card:not(.holo-card):not([data-maq-notilt]).live {
    will-change: transform;
    box-shadow: var(--glow, 0 0 0 1px #0009),
      0 2px 0 color-mix(in srgb, var(--rc, #b1d9fb) 60%, #fff),
      0 5px 0 #15212c,
      calc(var(--relief-x, 0) * var(--u) * -3)
      calc(var(--u) * 8) calc(var(--u) * 14) calc(var(--u) * -4) #0008;
  }
  html:not(.lite) .card:not(.holo-card):not([data-maq-notilt]) > .glare {
    background: radial-gradient(ellipse at var(--gx, 50%) var(--gy, 50%),
        #ffffffb0, #ffffff22 24%, transparent 55%),
      linear-gradient(125deg, transparent 28%, #d0f5ff66 45%, transparent 63%);
    background-size: 100% 100%, 220% 220%;
    background-position: center, var(--gx, 50%) var(--gy, 50%);
    mix-blend-mode: screen;
    opacity: calc(var(--go, 0) * .4);
  }
}

.cback.off .cb-aura {
  animation-play-state: paused;
}

@keyframes tell {
  50% {
    opacity: calc(var(--ti) * .45);
  }
}

@keyframes cv3-thunk {
  0% {
    opacity: 0;
    transform: scale(1.9) rotate(-10deg);
  }

  55% {
    opacity: 1;
    transform: scale(.9);
  }

  78% {
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes cv3-inkring {
  0% {
    opacity: .9;
    transform: scale(.9) rotate(-9deg);
  }

  100% {
    opacity: 0;
    transform: scale(1.7) rotate(-9deg);
  }
}

html.lite .fr .sw {
  transform: rotate(40deg);
}

html.lite .fr .ir {
  mix-blend-mode: normal;
  opacity: .22;
  transform: rotate(-30deg);
}

html.lite .card {
  box-shadow: 0 0 0 1px #0009, 0 calc(var(--u) * 5) calc(var(--u) * 6) calc(var(--u) * -4) #000c;
}

html.lite .card:not(.live) .glare {
  display: none;
}

html.lite .glare {
  mix-blend-mode: normal;
  opacity: calc(var(--go, 0) * .35);
}

@media (prefers-reduced-motion: reduce) {
  .cback.tell .cb-aura, .card.thunk .hanko, .card.thunk:after {
    animation: none;
  }

  .fr .sw {
    transform: rotate(40deg);
  }

  .card.lay-art .ft {
    transition: none;
  }
}