.k3 { --mx: .3; --my: .2; position: relative; width: 15em; aspect-ratio: 63 / 88; border-radius: .9em; overflow: hidden; isolation: isolate; color: #fff; font-family: "Nunito", sans-serif; transition: transform .2s ease-out; transform-style: preserve-3d; }
.k3 svg text.n { font-family: "Barlow Condensed", sans-serif; font-weight: 800; }
.k3 .artbg { position: absolute; inset: -10%; background-size: cover; background-position: center 25%; filter: blur(.7em) saturate(1.15); }
.k3 .art { position: absolute; left: 50%; top: var(--t); height: calc(var(--z) * 100%); aspect-ratio: var(--ar, 3 / 4); transform: translateX(-50%); background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, #000 80%, transparent);
  mask-composite: intersect; }
.k3 .nm { font: 800 1.55em/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; }
.k3 .sub { margin-top: .15em; font: 600 italic .86em/1.1 "Barlow Condensed", sans-serif; letter-spacing: .02em; }
.k3 .foot { display: flex; justify-content: space-between; font: 700 .5em "Nunito", sans-serif; letter-spacing: .08em; text-transform: uppercase; }

/* ===== A · CRISTAL ===== */
.kg { background: #0c0a10; box-shadow: 0 .8em 1.8em #000b, 0 0 0 .06em #ffffff22; }
.kg::after { content: ""; position: absolute; inset: .32em; border-radius: .66em; border: .06em solid #ffffff66; pointer-events: none; z-index: 8; }
.kg .glare { position: absolute; inset: 0; z-index: 7; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(60% 45% at calc(var(--mx) * 100%) calc(var(--my) * 100%), #ffffffaa, transparent 70%); }
.kg .chip { position: absolute; top: .65em; width: 2.45em; height: 2.45em; border-radius: 50%; z-index: 4; backdrop-filter: blur(.35em) saturate(1.5); -webkit-backdrop-filter: blur(.35em) saturate(1.5);
  background: linear-gradient(160deg, #ffffff55, #ffffff10 55%, color-mix(in srgb, var(--d) 40%, transparent)); box-shadow: inset 0 0 0 .06em #ffffffaa, inset 0 .12em .2em #ffffff66, 0 .15em .4em #0006; }
.kg .chip.cost { left: .65em; } .kg .chip.rar { right: .65em; }
.kg .chip svg { width: 100%; height: 100%; }
.kg .panel { position: absolute; left: .55em; right: .55em; bottom: .55em; top: 57%; border-radius: .7em; padding: .7em .85em .55em; z-index: 3; display: flex; flex-direction: column;
  backdrop-filter: blur(.55em) saturate(1.6) brightness(.85); -webkit-backdrop-filter: blur(.55em) saturate(1.6) brightness(.85);
  background: linear-gradient(180deg, color-mix(in srgb, var(--b) 38%, transparent), color-mix(in srgb, var(--d) 72%, transparent));
  box-shadow: inset 0 0 0 .06em #ffffff59, inset 0 .1em 0 #ffffff40, 0 .3em 1em #0007; }
.kg .head { display: flex; align-items: center; gap: .4em; }
.kg .names { flex: 1; min-width: 0; }
.kg .nm { text-shadow: 0 .05em .3em #0006; }
.kg .sub { color: color-mix(in srgb, var(--l) 80%, #fff); opacity: .9; }
.kg .stats { display: flex; gap: .25em; flex-shrink: 0; }
.kg .stats svg { width: 2.35em; filter: drop-shadow(0 .08em .15em #0008); }
.kg .ring { fill: #ffffff1f; stroke: #fff; stroke-width: 2.4; }
.kg .ring.atk { fill: color-mix(in srgb, #ffb84a 45%, transparent); } .kg .ring.hp { fill: color-mix(in srgb, #ff4a6a 45%, transparent); }
.kg .rule { height: .06em; margin: .55em 0 .5em; background: linear-gradient(90deg, #ffffffaa, #ffffff22); }
.kg .tx { flex: 1; display: flex; align-items: center; font-weight: 800; font-size: .82em; line-height: 1.32; text-shadow: 0 .05em .2em #0007; }
.kg .tx b.kw { display: inline-block; padding: .05em .5em; margin-right: .25em; border-radius: 99em; font: 700 italic .92em "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; background: #ffffff2e; box-shadow: inset 0 0 0 .07em #ffffffaa; }
.kg .foot { opacity: .75; }

/* ===== B · LÍNEA FINA ===== */
.kl { --paper: color-mix(in srgb, var(--l) 55%, #fffaf3); background: var(--paper); color: var(--d); box-shadow: 0 .8em 1.8em #000a; }
.kl::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.kl::after { content: ""; position: absolute; inset: .3em; border-radius: .68em; border: .05em solid var(--b); opacity: .7; pointer-events: none; z-index: 8; }
.kl .win { position: absolute; left: .62em; right: .62em; top: .62em; height: 60%; border-radius: .58em; overflow: hidden; z-index: 1; box-shadow: 0 0 0 .05em var(--b), 0 .15em .4em #0003; }
.kl .cost, .kl .rar { position: absolute; top: .25em; width: 2.3em; z-index: 3; filter: drop-shadow(0 .1em .15em #0003); }
.kl .cost { left: .25em; } .kl .rar { right: .25em; }
.kl .disc { fill: var(--paper); stroke: var(--b); stroke-width: 1.6; } .kl .hair { fill: none; stroke: var(--b); stroke-width: .9; opacity: .6; }
.kl .head { position: absolute; left: 1em; right: .85em; top: 65.4%; display: flex; align-items: center; gap: .4em; z-index: 2; }
.kl .names { flex: 1; min-width: 0; }
.kl .nm { color: var(--d); }
.kl .sub { color: var(--b); }
.kl .stats { display: flex; gap: .2em; flex-shrink: 0; }
.kl .stats svg { width: 2.25em; }
.kl .o { fill: var(--paper); stroke: var(--b); stroke-width: 1.8; } .kl .o.thin { fill: none; stroke-width: .9; opacity: .55; }
.kl .rule { position: absolute; left: 1em; right: 1em; top: 75.6%; height: .05em; background: linear-gradient(90deg, transparent, var(--b) 15%, var(--b) 85%, transparent); opacity: .6; z-index: 2; }
.kl .rule i { position: absolute; left: 50%; top: 50%; width: .42em; height: .42em; transform: translate(-50%, -50%) rotate(45deg); background: var(--paper); border: .05em solid var(--b); }
.kl .tx { position: absolute; left: 1.1em; right: 1.1em; top: 78.5%; bottom: 1.2em; display: flex; align-items: center; z-index: 2; font-weight: 700; font-size: .82em; line-height: 1.38; color: color-mix(in srgb, var(--d) 85%, #000); }
.kl .tx b.kw { font: 700 italic 1em "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--b); margin-right: .15em; }
.kl .tx b.kw::after { content: " —"; }
.kl .foot { position: absolute; left: 1.2em; right: 1.2em; bottom: .85em; z-index: 2; color: var(--b); opacity: .9; }

/* ===== C · FOIL HOLOGRÁFICO ===== */
.kf { --foil: conic-gradient(from calc(var(--mx) * 360deg) at 50% 50%, #ffd6f2, #9ef0ff, #fff3b0, #d4b8ff, #ffc2d9, #9ef0ff, #ffd6f2); background: #0a0810; box-shadow: 0 .8em 1.8em #000b; }
.kf .scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--d) 55%, transparent) 58%, color-mix(in srgb, var(--d) 92%, #000) 74%, color-mix(in srgb, var(--d) 96%, #000)); }
.kf .holo { position: absolute; inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: color-dodge; opacity: .28;
  background: repeating-linear-gradient(115deg, #ff9ad5 0, #8ff5ff 6%, #fff1a0 12%, #c49bff 18%, #ff9ad5 24%); background-size: 220% 220%; background-position: calc(var(--mx) * 100%) calc(var(--my) * 100%);
  -webkit-mask: radial-gradient(70% 55% at calc(var(--mx) * 100%) calc(var(--my) * 100%), #000, transparent 75%); mask: radial-gradient(70% 55% at calc(var(--mx) * 100%) calc(var(--my) * 100%), #000, transparent 75%); }
.kf .foilframe { position: absolute; inset: .3em; border-radius: .68em; padding: .1em; z-index: 7; pointer-events: none; background: var(--foil);
  -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); }
.kf .cost, .kf .rar { position: absolute; top: .7em; width: 2.45em; z-index: 4; filter: drop-shadow(0 .12em .2em #0009); }
.kf .cost { left: .7em; } .kf .rar { right: .7em; }
.kf .fhex { fill: color-mix(in srgb, var(--d) 70%, transparent); stroke: url(#foilg); stroke-width: 2.6; }
.kf .fsun { fill: color-mix(in srgb, #ffb84a 55%, var(--d)); stroke: url(#foilg); stroke-width: 2; }
.kf .fsh { fill: color-mix(in srgb, #ff4a6a 50%, var(--d)); stroke: url(#foilg); stroke-width: 2.4; }
.kf .fin { fill: none; stroke: #ffffff70; stroke-width: 1; }
.kf .stats { position: absolute; right: .7em; top: 56%; display: flex; gap: .15em; z-index: 4; }
.kf .stats svg { width: 2.55em; filter: drop-shadow(0 .1em .2em #000a); }
.kf .names { position: absolute; left: 1em; right: 1em; top: 67.5%; z-index: 4; }
.kf .nm { font-size: 1.6em; background: linear-gradient(100deg, #fff 30%, color-mix(in srgb, var(--l) 70%, #fff) 50%, #fff 70%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .06em .1em #0008); }
.kf .sub { color: color-mix(in srgb, var(--m) 70%, #fff); }
.kf .tx { position: absolute; left: 1em; right: 1em; top: 77%; bottom: 1.2em; display: flex; align-items: center; z-index: 4; font-weight: 800; font-size: .82em; line-height: 1.32; text-shadow: 0 .06em .25em #000a; }
.kf .tx b.kw { display: inline-block; padding: .04em .5em; margin-right: .25em; border-radius: .25em; font: 700 italic .92em "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; background: color-mix(in srgb, var(--b) 75%, transparent); box-shadow: inset 0 0 0 .07em #ffffff8c; }
.kf .foot { position: absolute; left: 1.2em; right: 1.2em; bottom: .9em; z-index: 4; opacity: .7; }

.k3 .tx b.kw { white-space: nowrap; }

/* ===== D · HALO ===== */
.kh { background: #0d0b12; box-shadow: 0 .8em 1.8em #000b, inset 0 0 0 .05em #ffffff1f; }
.kh .glow { position: absolute; left: -10%; right: -10%; top: -6%; height: 78%; background-size: cover; background-position: center 30%; filter: blur(1.4em) saturate(1.6); opacity: .75; }
.kh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, #0d0b12 72%); z-index: 0; }
.kh .win { position: absolute; left: .8em; right: .8em; top: .8em; height: 59%; border-radius: .7em; overflow: hidden; z-index: 1; box-shadow: 0 0 0 .05em #ffffff40, 0 .5em 1.4em color-mix(in srgb, var(--b) 60%, transparent); }
.kh .cost, .kh .rar { position: absolute; top: .4em; width: 2.2em; z-index: 3; filter: drop-shadow(0 .12em .2em #0009); }
.kh .cost { left: .4em; } .kh .rar { right: .4em; }
.kh .cd { fill: color-mix(in srgb, var(--d) 85%, #000); stroke: color-mix(in srgb, var(--l) 70%, #fff); stroke-width: 2.2; }
.kh .nm { position: absolute; left: 1em; right: 1em; top: 65%; z-index: 2; text-align: center; font-size: 1.5em; letter-spacing: .06em; text-shadow: 0 0 .6em color-mix(in srgb, var(--b) 70%, transparent); }
.kh .stats { position: absolute; left: 0; right: 0; top: 72.6%; z-index: 2; display: flex; justify-content: center; gap: .45em; }
.kh .pill { display: flex; align-items: center; gap: .05em; height: 1.75em; padding: 0 .6em 0 .45em; border-radius: 99em; box-shadow: inset 0 0 0 .06em #ffffff59; }
.kh .pill.atk { background: linear-gradient(180deg, #e99a2a, #8a4a08); color: #ffe7b8; } .kh .pill.hp { background: linear-gradient(180deg, #e8405e, #7a0c22); color: #ffd0da; }
.kh .pill .ic { width: 1.05em; } .kh .pill .nv { width: .9em; }
.kh .tx { position: absolute; left: 1.2em; right: 1.2em; top: 82%; bottom: 1em; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: .8em; line-height: 1.35; color: #e9e2f2; }
.kh .tx b.kw { display: inline-block; padding: .06em .5em .04em; margin-right: .3em; border-radius: .3em; font: 700 italic .95em "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #fff; background: color-mix(in srgb, var(--b) 55%, transparent); box-shadow: inset 0 0 0 .07em color-mix(in srgb, var(--m) 80%, #fff); vertical-align: .05em; }

/* ===== E · DIAGONAL ===== */
.kd { background: #0d0b12; box-shadow: 0 .8em 1.8em #000b; }
.kd::after { content: ""; position: absolute; inset: .3em; border-radius: .66em; border: .05em solid #ffffff55; pointer-events: none; z-index: 8; }
.kd .slab { position: absolute; inset: 0; z-index: 2; clip-path: polygon(0 66%, 100% 56%, 100% 100%, 0 100%);
  backdrop-filter: blur(.28em) saturate(1.5); -webkit-backdrop-filter: blur(.28em) saturate(1.5);
  background: linear-gradient(170deg, color-mix(in srgb, var(--b) 50%, transparent) 0%, color-mix(in srgb, var(--d) 62%, transparent) 55%, color-mix(in srgb, var(--d) 74%, transparent) 100%); }
.kd .slabline { position: absolute; inset: 0; z-index: 3; clip-path: polygon(0 66%, 100% 56%, 100% 56.6%, 0 66.6%); background: linear-gradient(90deg, #ffffffcc, #ffffff33); }
.kd .cost, .kd .rar { position: absolute; top: .7em; width: 2.3em; z-index: 4; filter: drop-shadow(0 .12em .2em #0009); }
.kd .cost { left: .7em; } .kd .rar { right: .7em; }
.kd .pg { fill: color-mix(in srgb, var(--d) 80%, #000); stroke: #fff; stroke-width: 2.4; }
.kd .pa { fill: #ffc04a; stroke: #fff; stroke-width: 2.4; } .kd .ph { fill: #e8344e; stroke: #fff; stroke-width: 2.4; }
.kd .stats { position: absolute; right: .7em; top: 48%; z-index: 4; display: flex; gap: .15em; }
.kd .stats svg { width: 2.45em; filter: drop-shadow(0 .12em .2em #0009); }
.kd .nm { position: absolute; left: .95em; right: 1em; top: 67.8%; z-index: 4; font-size: 1.62em; font-style: italic; transform: skewX(-6deg); text-shadow: 0 .06em .25em #0007; }
.kd .tx { position: absolute; left: 1.1em; right: 1.1em; top: 77.5%; bottom: 1em; z-index: 4; display: flex; align-items: center; font-weight: 800; font-size: .82em; line-height: 1.32; text-shadow: 0 .05em .25em #000c, 0 0 .6em #0008; }
.kd .tx b.kw { display: inline-block; padding: .04em .5em; margin-right: .25em; font: 700 italic .92em "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .06em; background: #fff; color: var(--d); transform: skewX(-8deg); }

/* ===== F · TIPOGRÁFICA ===== */
.kt { background: #0b0a10; box-shadow: 0 .8em 1.8em #000b; }
.kt .scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #0004 0%, transparent 18%, transparent 46%, color-mix(in srgb, var(--d) 75%, transparent) 62%, color-mix(in srgb, var(--d) 95%, #000) 78%); }
.kt .hair { position: absolute; inset: .45em; border-radius: .55em; border: .04em solid #ffffff8c; z-index: 6; pointer-events: none; }
.kt .cost { position: absolute; left: .75em; top: .75em; width: 2.5em; z-index: 4; filter: drop-shadow(0 .1em .2em #0008); }
.kt .hc { fill: #0000004d; stroke: #fff; stroke-width: 1.2; }
.kt .rar { position: absolute; right: .8em; top: .8em; width: 2.4em; z-index: 4; filter: drop-shadow(0 .1em .2em #0009); }
.kt .nm { position: absolute; left: 1em; right: 1em; top: 62.5%; z-index: 4; text-align: center; font-size: 1.45em; letter-spacing: .14em; font-weight: 700; }
.kt .line { position: absolute; left: 38%; right: 38%; top: 70.6%; height: .05em; background: #ffffffb3; z-index: 4; }
.kt .tx { position: absolute; left: 1.6em; right: 1.6em; top: 71.5%; bottom: 3.6em; z-index: 4; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: .8em; line-height: 1.35; color: #f2ecf6; }
.kt .tx b.kw { display: inline-block; margin-right: .1em; padding: .3em .55em; border-radius: .22em; font: 800 .9em/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .09em; color: #1a1206; background: #ffd23f; box-shadow: 0 .08em .25em #0008; text-shadow: none; text-box: trim-both cap alphabetic; vertical-align: .02em; }
.kt .bn { position: absolute; bottom: .75em; z-index: 4; display: flex; align-items: center; gap: .05em; filter: drop-shadow(0 .1em .25em #000a); }
.kt .bn.atk { left: .85em; color: #ffc861; } .kt .bn.hp { right: .85em; color: #ff6680; }
.kt .bn .nv { width: 2em; } .kt .bn .ic { width: 1.45em; }