/* ==========================================================================
   Gamarium · the trading card in Arcade Bright (5:7). One anatomy everywhere:
     frame (bright rarity colour, soft glow, ink outline)
     ├ name plate (white sticker, Lilita name) + faceted rarity gem
     ├ art window: game scene + the 3D subject (rises out of the top edge), Vault Boost ribbon
     ├ type pill: set emblem + "GRAMBIE · EPIC" (lg)
     ├ stats box: +GP/h, level stars, next level / requirement + bar
     └ footer: 003 / 027 · Season 1 (lg)
   Sizes: --lg (sheet, reveal), --sm (grid), --xs (minis). Lengths are in cqw of the card.
   ========================================================================== */

.kc, .kcback {
  --ol: max(2px, 1.15cqw); --ol2: max(3px, 2.3cqw);
  --f1: #E3E9F5; --f2: #9AA8C6; --f3: #6C7A9C;            /* common: steel blue */
  --g1: #FFFFFF; --g2: #C9D2E2; --g3: #8792AA; --g4: #4E576C;
  --rc: #7D8BAE; --rhue: 140, 155, 190;
}
.kc.r-rare { --f1: #C8EBFF; --f2: #4DB2FF; --f3: #1C77E0; --g1: #E6F4FF; --g2: #5FA8FF; --g3: #1F5FD6; --g4: #0B2A73; --rc: #1C86E0; --rhue: 56, 160, 255; }
.kc.r-epic { --f1: #E4D9FF; --f2: #9C78FF; --f3: #5A2EE0; --g1: #F6EEFF; --g2: #B98BFF; --g3: #7B3EE6; --g4: #3A1489; --rc: #6A3CF5; --rhue: 140, 100, 255; }
.kc.r-legendary { --f1: #FFF4C2; --f2: #FFC531; --f3: #F08C0C; --g1: #FFF8E2; --g2: #FFCB5C; --g3: #E08A1C; --g4: #8A4A08; --rc: #E58A0C; --rhue: 255, 186, 60; }
.kc.r-rookie { --f1: #D5F8E4; --f2: #53E895; --f3: #16A85A; --g1: #F0FFF6; --g2: #7BE8AA; --g3: #1FBF67; --g4: #0E6B3A; --rc: #16A85A; --rhue: 46, 212, 122; }

.kc {
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; padding: 0; text-align: left; color: var(--ink);
  border-radius: 7cqw; container-type: inline-size; isolation: isolate;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1); -webkit-tap-highlight-color: transparent;
}
button.kc:active { transform: scale(.96) translateY(1px); transition-duration: .1s; }
.kc-frame { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; border: var(--ol) solid var(--ink); box-shadow: 0 var(--ol2) 0 var(--ink);
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, var(--f1) 0%, var(--f2) 34%, var(--f3) 100%); }
.kc-frame::before { content: ""; position: absolute; left: 3cqw; right: 3cqw; top: 1.4cqw; height: 13cqw; border-radius: 5cqw 5cqw 8cqw 8cqw;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }

/* name plate + gem */
.kc-plate { position: absolute; z-index: 4; left: 4.6cqw; right: 4.6cqw; top: 4.2cqw; height: 13.4cqw; display: flex; align-items: center; gap: 1.5cqw;
  padding: 0 1.4cqw 0 3.6cqw; border-radius: 4.4cqw; background: #fff; border: max(1.5px, .85cqw) solid var(--ink); box-shadow: 0 max(1.5px, .9cqw) 0 var(--ink); }
.kc-name { flex: 1; min-width: 0; font: 400 7.6cqw/1 var(--f-d); letter-spacing: .02em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: .3cqw; }
.kc-gem { flex: none; width: 10cqw; height: 10cqw; filter: drop-shadow(0 .5cqw 0 rgba(42, 22, 82, .55)); }
.kc-gem svg { display: block; width: 100%; height: 100%; }

/* art window */
.kc-win { position: absolute; z-index: 2; left: 4.6cqw; right: 4.6cqw; top: 21cqw; height: 75.6cqw; }
.kc-scene { position: absolute; inset: 0; border-radius: 4.4cqw; background: #2A1652 center / cover no-repeat; overflow: hidden; }
.kc-scene::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(90% 70% at 50% 42%, transparent 55%, rgba(20, 8, 50, .45) 100%); }
.kc-win::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 4.4cqw; pointer-events: none; border: max(1.5px, .85cqw) solid var(--ink);
  box-shadow: inset 0 0 0 .7cqw rgba(255, 255, 255, .35); }
.kc-artclip { position: absolute; z-index: 2; left: .85cqw; right: .85cqw; bottom: .85cqw; top: -11cqw; overflow: hidden; border-radius: 0 0 3.6cqw 3.6cqw; pointer-events: none; }
.kc-art { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; max-width: none; }
.kc-art--cover { height: 100%; width: 100%; object-fit: cover; }
/* The Throne: retro pixel art (the game's own sprites), scaled with nearest-neighbour so every pixel stays a crisp square */
.kc--px .kc-art, .kc--px .kc-scene { image-rendering: pixelated; }
.kc-lockb { position: absolute; z-index: 4; left: 50%; top: 50%; width: 22cqw; height: 22cqw; margin: -11cqw 0 0 -11cqw; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: max(1.5px, .9cqw) solid var(--ink); box-shadow: 0 max(2px, 1.2cqw) 0 var(--ink); color: var(--ink); }
.kc-lockb svg { width: 50%; height: 50%; stroke-width: 2.8; }
.kc-trait { position: absolute; z-index: 4; left: 3cqw; top: 3cqw; width: 15cqw; height: 15cqw; border-radius: 50%; display: grid; place-items: center;
  background: var(--g-orange); border: max(1.5px, .8cqw) solid var(--ink); box-shadow: 0 .9cqw 0 var(--ink); color: #fff; }
.kc-trait svg { width: 56%; height: 56%; filter: drop-shadow(0 .5cqw 0 var(--ink)); }
.kc-trait.tr-colony { background: var(--g-green); }
.kc-trait.tr-aura { background: var(--g-violet); }

/* Vault Boost ribbon (SPEC 17) */
.kc-vb { position: absolute; z-index: 5; left: -3cqw; right: -3cqw; bottom: 5cqw; height: 12cqw; display: flex; align-items: center; justify-content: center; gap: 1.4cqw;
  transform: rotate(-4deg); border-radius: 2cqw; border: max(1.5px, .85cqw) solid var(--ink); box-shadow: 0 .9cqw 0 var(--ink);
  background: repeating-linear-gradient(120deg, rgba(255, 255, 255, .22) 0 2cqw, rgba(255, 255, 255, 0) 2cqw 4cqw), linear-gradient(180deg, #FFE27A, #FFB20C);
  font: 400 6.6cqw/1 var(--f-d); letter-spacing: .03em; color: #fff; -webkit-text-stroke: max(2.5px, 1.5cqw) var(--ink); paint-order: stroke fill; white-space: nowrap; }
.kc-vb svg { width: 7cqw; height: 7cqw; color: #fff; filter: drop-shadow(.4cqw .4cqw 0 var(--ink)) drop-shadow(-.4cqw -.4cqw 0 var(--ink)); }
.kc-vb b { font-weight: 400; color: #FFF6C8; }
.kc.is-locked .kc-vb { filter: saturate(.9); }

/* type pill (lg) */
.kc-type { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); top: 99cqw; height: 7.4cqw; display: flex; align-items: center; gap: 1.6cqw;
  padding: 0 3cqw 0 .9cqw; border-radius: 4cqw; background: #fff; border: .75cqw solid var(--ink); white-space: nowrap; }
.kc-emb { width: 5.4cqw; height: 5.4cqw; border-radius: 1.6cqw; object-fit: cover; border: .5cqw solid var(--ink); flex: none; }
.kc-type span { font: 900 3.5cqw/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }

/* stats box */
.kc-stats { position: absolute; z-index: 2; left: 4.6cqw; right: 4.6cqw; top: 101cqw; bottom: 5.4cqw; border-radius: 4.4cqw; padding: 0 3cqw;
  display: flex; flex-direction: column; justify-content: center; gap: 2cqw;
  background: #fff; border: max(1.5px, .85cqw) solid var(--ink); box-shadow: 0 max(1.5px, .9cqw) 0 var(--ink); }
.kc-s1 { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.kc-yield { display: inline-flex; align-items: center; gap: 1cqw; white-space: nowrap; }
.kc-yield svg { width: 7.4cqw; height: 7.4cqw; color: var(--gold); filter: drop-shadow(.35cqw .35cqw 0 var(--ink)) drop-shadow(-.35cqw -.35cqw 0 var(--ink)) drop-shadow(.35cqw -.35cqw 0 var(--ink)) drop-shadow(-.35cqw .35cqw 0 var(--ink)); }
.kc-yield b { font: 400 9.4cqw/1 var(--f-d); letter-spacing: .01em; color: var(--ink); }
.kc-yield small { font: 900 3.9cqw/1 var(--f-ui); color: var(--ink-2); }
.kc-lv { display: inline-flex; align-items: center; gap: 1.2cqw; }
.kc-pip { width: 5cqw; height: 5cqw; background: #E6DEF4; clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 61%, 81% 98%, 50% 77%, 19% 98%, 29% 61%, 0 38%, 37% 35%); }
.kc-pip.on { background: linear-gradient(180deg, #FFE27A, #F59A0C); }
.kc-lv em { margin-left: 1.2cqw; font: 900 3.6cqw/1 var(--f-ui); font-style: normal; letter-spacing: .08em; color: var(--ink-2); }
.kc-s2 { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; font: 800 3.9cqw/1.2 var(--f-ui); color: var(--ink-2); white-space: nowrap; }
.kc-s2 span:first-child { overflow: hidden; text-overflow: ellipsis; }
.kc-s2 b { color: var(--ink); font-weight: 900; }
.kc-s2 em { font-style: normal; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; flex: none; }
.kc-bar { display: block; height: 3.4cqw; border-radius: 2cqw; background: #EFE8FA; border: .6cqw solid var(--ink); overflow: hidden; }
.kc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(180deg, var(--f2), var(--f3)); }
.kc-req { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; font: 400 clamp(10px, 9cqw, 20px)/1 var(--f-d); color: var(--ink); }
.kc-req svg { width: 7.6cqw; height: 7.6cqw; color: var(--ink-2); stroke-width: 2.8; }

/* footer (lg) */
.kc-foot { position: absolute; z-index: 2; left: 7cqw; right: 7cqw; bottom: 1.6cqw; height: 3.6cqw; display: flex; align-items: center; justify-content: space-between;
  font: 900 2.7cqw/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(42, 22, 82, .65); }
.kc-foot img { width: 3.6cqw; height: 3.6cqw; }

/* finish: gold sweep + sparkles (legendary), glare under the finger (lg) */
.kc-foil { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6; display: none; }
.kc.r-legendary:not(.is-locked) .kc-foil { display: block; mix-blend-mode: soft-light; overflow: hidden;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%); background-size: 300% 100%; animation: gold-sweep 3.6s cubic-bezier(.5, 0, .3, 1) infinite; }
.kc--lg.r-epic:not(.is-locked) .kc-foil, .kc--lg.r-rare:not(.is-locked) .kc-foil { display: block; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 120, 220, .5) 38%, rgba(90, 230, 255, .5) 48%, rgba(255, 240, 120, .45) 58%, transparent 72%);
  background-size: 260% 260%; animation: foil-drift 7s ease-in-out infinite alternate; }
@keyframes gold-sweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -20% 0; } }
@keyframes foil-drift { from { background-position: 10% 20%; } to { background-position: 80% 70%; } }
.kc-spark { position: absolute; z-index: 7; width: 7cqw; height: 7cqw; pointer-events: none; background: #FFF6DA; opacity: 0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: twinkle 2.6s ease-in-out infinite; }
.kc-spark.s1 { right: 16cqw; top: 1cqw; animation-delay: .2s; }
.kc-spark.s2 { left: 1cqw; top: 58cqw; animation-delay: 1.1s; width: 5.6cqw; height: 5.6cqw; }
.kc-spark.s3 { right: 1.4cqw; bottom: 34cqw; animation-delay: 1.9s; width: 5cqw; height: 5cqw; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3); } 40% { opacity: 1; transform: scale(1); } 70% { opacity: 0; transform: scale(.6); } }
.kc-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 8; opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
  background: radial-gradient(55% 40% at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%); }
.kc.is-tilting { transition: transform .08s linear; }
.kc.is-tilting .kc-glare { opacity: 1; }

/* locked */
.kc.is-locked .kc-frame { background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #F1ECF8, #CFC6E0 40%, #ADA2C6); }
.kc.is-locked .kc-gem { filter: saturate(.2) brightness(1.05) drop-shadow(0 .5cqw 0 rgba(42, 22, 82, .4)); }
.kc.is-locked .kc-scene { filter: grayscale(.85) brightness(.55); }
.kc.is-locked .kc-name { color: var(--ink-2); }
.kc.is-locked .kc-art--cover { filter: grayscale(1) brightness(.25); }
.kc.is-locked .kc-yield svg { color: #D6CEE6; }
.kc.is-locked .kc-yield b { color: var(--ink-3); }
.kc.is-locked .kc-bar i { background: linear-gradient(180deg, #A07CFF, #6A3CF5); }
/* a Coming soon card (MineCrown before launch): "Soon" instead of a percentage, an empty bar */
.kc-req--soon { color: var(--sky-d); }
.kc-req--soon svg { color: var(--sky-d); }
.kc-bar--soon { opacity: .5; }
/* the next game's teaser (SPEC 27): its silhouettes keep our eclipse's warm gold (the locked grey stays off its scene) */
.kc--tease.is-locked .kc-scene { filter: none; }
.kc--tease .kc-name { letter-spacing: .12em; }

/* ---------- grid size ------------------------------------------------------------ */
.kc--sm .kc-plate { height: 15.6cqw; top: 4cqw; padding: 0 1cqw 0 3cqw; }
.kc--sm .kc-name { font-size: clamp(10.5px, 10cqw, 24px); }
.kc--sm .kc-gem { width: 12cqw; height: 12cqw; }
.kc--sm .kc-win { top: 22.6cqw; height: 75.6cqw; }
.kc--sm .kc-stats { top: 103.4cqw; bottom: 6cqw; gap: 1.6cqw; padding: 0 2.4cqw; }
.kc--sm .kc-s1 { justify-content: center; flex-direction: column; gap: 1.6cqw; }
.kc--sm .kc-yield b { font-size: clamp(11px, 11.6cqw, 26px); }
.kc--sm .kc-yield small { font-size: clamp(8px, 7cqw, 15px); }
.kc--sm .kc-yield svg { width: 9.6cqw; height: 9.6cqw; }
.kc--sm .kc-pip { width: 7.6cqw; height: 7.6cqw; }
.kc--sm .kc-lv { gap: 1.6cqw; }
.kc--sm .kc-lockb { width: 28cqw; height: 28cqw; margin: -14cqw 0 0 -14cqw; }
.kc--sm .kc-bar { height: 5cqw; margin: 0 1cqw; }
.kc--sm .kc-vb { font-size: clamp(8px, 8.6cqw, 18px); height: 14cqw; bottom: 4cqw; }
.kc--sm .kc-vb svg { width: 8.6cqw; height: 8.6cqw; }

/* ---------- minis ------------------------------------------------------------------ */
.kc--xs { --ol: max(1.5px, 2cqw); --ol2: max(2px, 3.4cqw); border-radius: 9cqw; }
.kc--xs .kc-plate, .kc--xs .kc-type, .kc--xs .kc-foot, .kc--xs .kc-spark, .kc--xs .kc-vb { display: none; }
.kc--xs .kc-win { top: 6cqw; left: 6cqw; right: 6cqw; height: 98cqw; }
.kc--xs .kc-win::after { border-width: 1.6cqw; border-radius: 6cqw; }
.kc--xs .kc-scene { border-radius: 6cqw; }
.kc--xs .kc-artclip { top: 1.6cqw; left: 1.6cqw; right: 1.6cqw; bottom: 1.6cqw; border-radius: 4.6cqw; }
.kc--xs .kc-art { bottom: -2cqw; }
.kc--xs .kc-stats { top: 108cqw; bottom: 7cqw; left: 6cqw; right: 6cqw; border-width: 1.6cqw; border-radius: 6cqw; box-shadow: none; padding: 0; display: grid; place-items: center; }
.kc--xs .kc-yield, .kc--xs .kc-s2, .kc--xs .kc-req, .kc--xs .kc-bar { display: none; }
.kc--xs .kc-s1 { justify-content: center; }
.kc--xs .kc-pip { width: 12cqw; height: 12cqw; }
.kc--xs .kc-lv { gap: 2cqw; }
.kc--xs .kc-lv em { display: none; }
.kc--xs .kc-lockb { width: 40cqw; height: 40cqw; margin: -20cqw 0 0 -20cqw; border-width: 1.6cqw; box-shadow: 0 2cqw 0 var(--ink); }
.kc--xs .kc-trait { display: none; }

/* ---------- the Arena fight strip ----------------------------------------------------- */
.kc-fight { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.kc-fight > span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 1.4cqw; height: 13cqw; border-radius: 3.6cqw;
  border: max(1.5px, .8cqw) solid var(--ink); font: 400 clamp(11px, 9.6cqw, 24px)/1 var(--f-d); color: #fff;
  -webkit-text-stroke: max(2.5px, 1.6cqw) var(--ink); paint-order: stroke fill; font-variant-numeric: tabular-nums; }
.kc-fight svg { width: 7cqw; height: 7cqw; color: #fff; stroke-width: 2.8; filter: drop-shadow(.4cqw .4cqw 0 var(--ink)) drop-shadow(-.4cqw -.4cqw 0 var(--ink)) drop-shadow(.4cqw -.4cqw 0 var(--ink)) drop-shadow(-.4cqw .4cqw 0 var(--ink)); }
.kc-fight .f-atk { background: var(--g-orange); }
.kc-fight .f-hp { background: var(--g-green); }
.kc--sm .kc-stats:has(.kc-fight) { padding: 0 2cqw; }
.kc--sm .kc-fight > span { height: 18cqw; font-size: clamp(11px, 11cqw, 26px); }
.kc--sm .kc-fight svg { width: 8.6cqw; height: 8.6cqw; }
.kc--lg .kc-fight > span { height: 14cqw; font-size: 8.4cqw; }
.kc--xs .kc-stats:has(.kc-fight) { top: 102cqw; bottom: 4cqw; background: transparent; border: 0; }
.kc--xs .kc-fight { width: 100%; padding: 0; gap: 3cqw; }
.kc--xs .kc-fight > span { height: 28cqw; font-size: 17cqw; border-width: 1.6cqw; border-radius: 7cqw; -webkit-text-stroke-width: 3.5cqw; gap: 1cqw; }
.kc--xs .kc-fight svg { width: 13cqw; height: 13cqw; }

/* ---------- card back (reveal flip, coming-soon mystery cards) ----------------------- */
.kcback { position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; border-radius: 7cqw; container-type: inline-size; isolation: isolate; }
.kcback .kc-frame { background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0) 0 31%, rgba(255, 255, 255, .26) 35%, rgba(255, 255, 255, .08) 41%, rgba(255, 255, 255, 0) 50%), radial-gradient(circle at 50% 42%, #B9A2FF, #7B4DFF 45%, #4B1FC9 100%); }
.tb-face { position: absolute; inset: 0; z-index: 2; }
.tb-ring { position: absolute; left: 50%; top: 46%; width: 54cqw; height: 54cqw; margin: -27cqw 0 0 -27cqw; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #fff, #F1EBFF); border: max(1.5px, 1cqw) solid var(--ink); box-shadow: 0 max(2px, 1.6cqw) 0 var(--ink); }
.tb-ring img { width: 76%; filter: drop-shadow(0 1.4cqw 0 rgba(42, 22, 82, .3)); }
.tb-word { position: absolute; left: 0; right: 0; bottom: 13cqw; text-align: center; font: 400 8cqw/1 var(--f-d); letter-spacing: .08em; color: #fff;
  -webkit-text-stroke: max(2.5px, 1.8cqw) var(--ink); paint-order: stroke fill; }
.tb-tag { position: absolute; left: 50%; top: 9cqw; transform: translateX(-50%) rotate(-3deg); padding: 1.8cqw 4cqw; border-radius: 3cqw; white-space: nowrap;
  font: 400 6.4cqw/1 var(--f-d); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--gold); border: max(1.5px, .8cqw) solid var(--ink); box-shadow: 0 .8cqw 0 var(--ink); }
.kcback--sm .tb-word { font-size: clamp(9px, 9cqw, 20px); }
.kcback--sm .tb-tag { font-size: clamp(9px, 8cqw, 16px); }
.kcback--xs { border-radius: 9cqw; }
.kcback--xs .kc-frame { --ol: max(1.5px, 2cqw); --ol2: max(2px, 3.4cqw); }
.kcback--xs .tb-word, .kcback--xs .tb-tag { display: none; }
.kcback--xs .tb-ring { width: 62cqw; height: 62cqw; margin: -31cqw 0 0 -31cqw; top: 50%; border-width: 2cqw; }

@media (prefers-reduced-motion: reduce) { .kc-foil, .kc-spark { animation: none !important; } }

/* ---------- big card (sheet, reveal): type pill + taller stats box + footer ------------- */
.kc--lg .kc-win { top: 20.4cqw; }
.kc--lg .kc-type { top: 98.6cqw; }
.kc--lg .kc-stats { top: 108.6cqw; bottom: 7.4cqw; gap: 2.2cqw; padding: 0 4cqw; }
.kc--lg .kc-foot { bottom: 1.9cqw; }