/* (a copy of ui/shared/cards.css for the account site's store - 2026-11-08: keep the two the same) */
/* Bohemian Banners' cards (ui/shared/cards.js): a card is 250 x 350 at --kc (1 at size m), its frame by rarity, its print's dress. */
.kc { --kc: 1; --edge: #6d6a66; --edge-hi: #a9a49c; --ink-c: #2b1d12; position: relative; flex: none; width: calc(250 * var(--u) * var(--kc)); height: calc(350 * var(--u) * var(--kc));
  border-radius: calc(12 * var(--u) * var(--kc)); padding: calc(9 * var(--u) * var(--kc)); background: linear-gradient(150deg, var(--edge-hi), var(--edge) 45%, #2a2622);
  box-shadow: 0 calc(6 * var(--u) * var(--kc)) calc(16 * var(--u) * var(--kc)) rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .18); font-family: var(--serif); color: var(--ink-c);
  user-select: none; overflow: hidden; isolation: isolate; }
.kc.sz-s { --kc: .56; }
.kc.sz-h { --kc: .56; }
.kc.sz-b { --kc: .38; }
.kc.sz-b .kc-frame { grid-template-rows: calc(44 * var(--u) * var(--kc)) calc(150 * var(--u) * var(--kc)) auto minmax(0, 1fr) calc(26 * var(--u) * var(--kc)); }
.kc.sz-b .kc-type { font-size: calc(8 * var(--u)); }
.kc.sz-b .kc-nm { font-size: calc(15 * var(--u) * var(--kc) * 1.25); }
.kc.sz-l { --kc: 1.55; }
/* the ability in a word on a card of the table (2026-11-01) */
.kc-abbr { position: absolute; left: 0; right: 0; bottom: calc(26 * var(--u) * var(--kc)); z-index: 3; padding: calc(1 * var(--u)) calc(2 * var(--u)); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--sans); font-size: calc(10.5 * var(--u)); line-height: 1.15; color: #fff3d6; background: rgb(29 24 20 / .86); }
.kc.r-U { --edge: #3f6a58; --edge-hi: #9cc4b0; }
.kc.r-R { --edge: #2c4a7a; --edge-hi: #e3c47a; }
.kc.r-E { --edge: #4a2a62; --edge-hi: #f0cf7a; }
/* legendary (2026-10-31): crimson and gold, a heraldic double rule inside the frame, the name on a crimson band */
.kc.r-L { --edge: #7d1f16; --edge-hi: #ffdf86; background: linear-gradient(150deg, #fff0bd, #d9b062 20%, #8a2318 46%, #4e130d 68%, #e7c77e 90%); }
.kc.r-L .kc-frame { box-shadow: inset 0 0 0 calc(2 * var(--u) * var(--kc)) #7d1f16, inset 0 0 0 calc(3.5 * var(--u) * var(--kc)) #e7c77e; }
.kc.r-L .kc-top { background: linear-gradient(180deg, rgb(125 31 22 / .92), rgb(125 31 22 / .6)); }
.kc.r-L .kc-nm { color: #ffe7a8; text-shadow: 0 1px 2px #000; }
.kc.r-L .kc-pw { background: radial-gradient(circle at 35% 30%, #ffe7a0, #c9a35b 55%, #6a4a12); color: #3a1208; text-shadow: 0 1px 0 rgb(255 255 255 / .5); border-color: #7d1f16; }
.kc.r-L .kc-art { border-color: #7d1f16; box-shadow: inset 0 0 calc(18 * var(--u) * var(--kc)) rgb(0 0 0 / .55), 0 0 0 calc(1.5 * var(--u) * var(--kc)) #e7c77e; }
.kc-lg { position: absolute; inset: calc(4 * var(--u) * var(--kc)); z-index: 3; pointer-events: none; border-radius: calc(5 * var(--u) * var(--kc));
  border: calc(3 * var(--u) * var(--kc)) double rgb(231 199 126 / .8); }
.kc.miss { filter: grayscale(1) brightness(.45); }
.kc-frame { position: relative; height: 100%; border-radius: calc(7 * var(--u) * var(--kc)); background: linear-gradient(175deg, #efe4c8, #d9caa2); overflow: hidden;
  display: grid; grid-template-rows: calc(44 * var(--u) * var(--kc)) calc(150 * var(--u) * var(--kc)) auto minmax(0, 1fr) calc(26 * var(--u) * var(--kc)); box-shadow: inset 0 0 0 calc(2 * var(--u) * var(--kc)) rgb(43 29 18 / .55); }
.kc.tac .kc-frame { background: linear-gradient(175deg, #e4e8ec, #c3ccd4); }

.kc-top { grid-row: 1; display: flex; align-items: center; gap: calc(8 * var(--u) * var(--kc)); padding: 0 calc(10 * var(--u) * var(--kc)) 0 calc(6 * var(--u) * var(--kc)); z-index: 2;
  background: linear-gradient(180deg, rgb(255 255 255 / .35), transparent); }
.kc-pw { flex: none; width: calc(36 * var(--u) * var(--kc)); height: calc(36 * var(--u) * var(--kc)); border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-size: calc(22 * var(--u) * var(--kc)); color: #fff4dc; background: radial-gradient(circle at 35% 30%, #c9473a, #8f2a20 60%, #4e130d);
  border: calc(2 * var(--u) * var(--kc)) solid #e7c77e; box-shadow: 0 calc(2 * var(--u) * var(--kc)) calc(4 * var(--u) * var(--kc)) rgb(0 0 0 / .5); text-shadow: 0 1px 1px #000; }
.kc-pw.tac { background: radial-gradient(circle at 35% 30%, #5a7c9a, #2f4f7f 60%, #182a44); font-size: calc(16 * var(--u) * var(--kc)); }
.kc-pw.up { background: radial-gradient(circle at 35% 30%, #5aa06a, #2f6b3f 60%, #173a20); }
.kc-pw.down { background: radial-gradient(circle at 35% 30%, #707070, #4a4a4a 60%, #222); }
.kc-nm { font-family: var(--display); font-size: calc(17 * var(--u) * var(--kc)); line-height: 1.02; text-transform: uppercase; letter-spacing: .02em; color: #2b1d12; }
.kc-art { grid-row: 2; position: relative; margin: 0 calc(8 * var(--u) * var(--kc)); border-radius: calc(4 * var(--u) * var(--kc)); overflow: hidden;
  border: calc(2 * var(--u) * var(--kc)) solid #3b2a1c; box-shadow: inset 0 0 calc(18 * var(--u) * var(--kc)) rgb(0 0 0 / .55); }
.kc-art .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.kc-art .arms { position: absolute; left: 50%; top: 50%; height: 86%; transform: translate(-50%, -48%); filter: drop-shadow(0 calc(3 * var(--u) * var(--kc)) calc(4 * var(--u) * var(--kc)) rgb(0 0 0 / .6)); }
.kc-type { grid-row: 3; display: flex; justify-content: space-between; gap: calc(6 * var(--u) * var(--kc)); margin: calc(5 * var(--u) * var(--kc)) calc(10 * var(--u) * var(--kc)) 0;
  padding-bottom: calc(3 * var(--u) * var(--kc)); border-bottom: 1px solid rgb(43 29 18 / .3); font-family: var(--sans); font-size: calc(10.5 * var(--u) * var(--kc)); letter-spacing: .1em; text-transform: uppercase; color: #6a5440; }
.kc-rows { white-space: nowrap; }
.kc-text { grid-row: 4; padding: calc(6 * var(--u) * var(--kc)) calc(12 * var(--u) * var(--kc)); font-size: calc(13 * var(--u) * var(--kc)); line-height: 1.22; overflow: hidden; }
.kc-text p { margin: 0 0 calc(4 * var(--u) * var(--kc)); }
.kc-text .fl { font-style: italic; color: #6a5440; font-size: calc(11.5 * var(--u) * var(--kc)); }
.kc-foot { grid-row: 5; display: flex; align-items: center; gap: calc(8 * var(--u) * var(--kc)); padding: 0 calc(10 * var(--u) * var(--kc)); font-family: var(--sans); font-size: calc(10 * var(--u) * var(--kc));
  letter-spacing: .08em; color: #6a5440; background: linear-gradient(0deg, rgb(0 0 0 / .08), transparent); }
.kc-set { flex: 1; }
.kc-gl { font-size: calc(13 * var(--u) * var(--kc)); }
.kc-gl.g-C { color: #3a3a3a; } .kc-gl.g-U { color: #2f6b55; } .kc-gl.g-R { color: #2c5aa0; } .kc-gl.g-E { color: #9a5cc8; text-shadow: 0 0 3px #f0cf7a; }
.kc-gl.g-L { color: #b8261a; text-shadow: 0 0 3px #ffd978, 0 0 1px #ffd978; }
.kc-count { position: absolute; right: calc(14 * var(--u) * var(--kc)); top: calc(56 * var(--u) * var(--kc)); z-index: 6; min-width: calc(30 * var(--u)); padding: calc(2 * var(--u)) calc(7 * var(--u));
  border-radius: calc(10 * var(--u)); background: #1d1814; color: var(--gilt-hi); font-family: var(--sans); font-size: calc(13 * var(--u)); text-align: center; border: 1px solid var(--gilt-dim); }
.kc.sz-s .kc-type { font-size: calc(9 * var(--u)); }

/* foil: a sheen across the card that moves */
.kc-sheen { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; mix-blend-mode: color-dodge; opacity: .55;
  background: linear-gradient(115deg, transparent 20%, rgb(255 120 180 / .45) 32%, rgb(120 220 255 / .5) 42%, rgb(255 240 140 / .5) 52%, rgb(160 255 170 / .4) 60%, transparent 72%);
  background-size: 250% 250%; animation: kc-sheen 5s ease-in-out infinite alternate; }
@keyframes kc-sheen { from { background-position: 100% 0; } to { background-position: 0 100%; } }
.kc.p-foil { box-shadow: 0 calc(6 * var(--u) * var(--kc)) calc(16 * var(--u) * var(--kc)) rgb(0 0 0 / .6), 0 0 calc(10 * var(--u) * var(--kc)) rgb(170 220 255 / .35), inset 0 0 0 1px rgb(255 255 255 / .3); }

/* showcase: the art over the whole card, a gilt frame, the words on smoked glass */
.kc.p-show { background: linear-gradient(150deg, #fff0b8, #c9a35b 40%, #7a5a22 70%, #f3dc94); }
.kc.p-show .kc-frame { background: #222; }
.kc.p-show .kc-art { position: absolute; inset: 0; margin: 0; border: 0; border-radius: 0; z-index: 0; }
.kc.p-show .kc-art .arms { height: 52%; top: 40%; }
.kc.p-show .kc-top, .kc.p-show .kc-type, .kc.p-show .kc-text, .kc.p-show .kc-foot { position: relative; z-index: 2; }
.kc.p-show .kc-nm { color: #fff4dc; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.kc.p-show .kc-top { background: linear-gradient(180deg, rgb(0 0 0 / .55), transparent); }
.kc.p-show .kc-text { margin: 0 calc(8 * var(--u) * var(--kc)); border-radius: calc(4 * var(--u) * var(--kc)); background: rgb(20 14 10 / .62); color: #f3e8cc; backdrop-filter: blur(2px); }
.kc.p-show .kc-text .fl { color: #d4c39a; }
.kc.p-show .kc-type { color: #f3dc94; border-color: rgb(243 220 148 / .4); text-shadow: 0 1px 2px #000; }
.kc.p-show .kc-foot { color: #f3dc94; background: linear-gradient(0deg, rgb(0 0 0 / .65), transparent); }

/* overnumbered: black and gold, numbered past the set */
.kc.p-over, .kc.p-seal { background: linear-gradient(150deg, #fff3c4, #d4af55 30%, #6a4a12 60%, #ffe9a0 85%, #8a6a22); }
.kc.p-over .kc-frame, .kc.p-seal .kc-frame { background: radial-gradient(120% 90% at 50% 20%, #2a2016, #0e0a07); box-shadow: inset 0 0 0 calc(2 * var(--u) * var(--kc)) #c9a35b; }
.kc.p-over .kc-nm, .kc.p-seal .kc-nm { color: #f3dc94; text-shadow: 0 1px 2px #000; }
.kc.p-over .kc-type, .kc.p-seal .kc-type { color: #c9a35b; border-color: rgb(201 163 91 / .4); }
.kc.p-over .kc-text, .kc.p-seal .kc-text { color: #eadcb8; }
.kc.p-over .kc-text .fl, .kc.p-seal .kc-text .fl { color: #b8a57a; }
.kc.p-over .kc-foot, .kc.p-seal .kc-foot { color: #f3dc94; }
.kc.p-over .kc-art, .kc.p-seal .kc-art { border-color: #c9a35b; }
.kc.p-over .kc-top, .kc.p-seal .kc-top { background: linear-gradient(180deg, rgb(201 163 91 / .25), transparent); }
.kc.p-over .kc-sheen, .kc.p-seal .kc-sheen { mix-blend-mode: overlay; opacity: .7; background: linear-gradient(115deg, transparent 25%, rgb(255 230 150 / .7) 45%, rgb(255 255 255 / .6) 50%, rgb(255 230 150 / .7) 55%, transparent 75%); background-size: 250% 250%; }

/* sealed: the king's wax seal and his hand */
.kc-seal { position: absolute; right: calc(10 * var(--u) * var(--kc)); bottom: calc(30 * var(--u) * var(--kc)); z-index: 4; width: calc(52 * var(--u) * var(--kc)); height: calc(52 * var(--u) * var(--kc));
  border-radius: 46% 54% 50% 48%; display: grid; place-items: center; background: radial-gradient(circle at 38% 34%, #d0483a, #9b2a1f 55%, #5e140d);
  box-shadow: 0 calc(2 * var(--u) * var(--kc)) calc(5 * var(--u) * var(--kc)) rgb(0 0 0 / .6), inset 0 0 0 calc(4 * var(--u) * var(--kc)) rgb(0 0 0 / .18); transform: rotate(-12deg); }
.kc-seal span { font-size: calc(24 * var(--u) * var(--kc)); color: #f2b4a8; text-shadow: 0 -1px 0 rgb(0 0 0 / .5); }
.kc-sig { position: absolute; left: calc(14 * var(--u) * var(--kc)); bottom: calc(30 * var(--u) * var(--kc)); z-index: 4; font-family: var(--hand); font-size: calc(22 * var(--u) * var(--kc));
  color: #f3dc94; transform: rotate(-6deg); text-shadow: 0 1px 2px #000; }

.kc.sz-h .kc-text { font-size: calc(19 * var(--u) * var(--kc)); }

/* ---- the rarities made to be felt (2026-10-31, the owner: "i feel foil effect & differences between rarity isn't big enough, higher
   rarities should be waow effect?"): common matte stone, uncommon a cool silver line, rare a gold glint running round its edge, epic a
   violet aurora round it and sparks in its art, legendary a blazing gold rim, rays behind its arms and a slow breath of light. The
   moving rims turn (a transform: cheap); the breathing glows only on the cards shown large (not the catalogue's small ones). */
.kc { --mx: .5; --my: .5; transition: transform 160ms ease-out; }
.kc.r-C { --edge: #5e5b57; --edge-hi: #8f8a82; }
.kc.r-C .kc-frame { filter: saturate(.92); }
.kc.r-U { --edge: #2f5a4a; --edge-hi: #c8e6d8; }
.kc.r-U::after { content: ""; position: absolute; inset: calc(3 * var(--u) * var(--kc)); border-radius: calc(10 * var(--u) * var(--kc)); pointer-events: none; z-index: 1;
  border: 1px solid rgb(220 245 235 / .55); }
/* the turning rim: a conic light behind the frame (the frame hides all but the edge) */
.kc.r-R::before, .kc.r-E::before, .kc.r-L::before { content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; z-index: -1; pointer-events: none;
  animation: kc-spin 4.5s linear infinite; }
.kc.r-R::before { background: conic-gradient(from 0deg, transparent 0 58%, #ffe7a0 70%, #fffbe8 75%, #ffe7a0 80%, transparent 92%); }
.kc.r-E::before { background: conic-gradient(from 0deg, #b77cff, #ff8ad8, #ffd98a, #8ae0ff, #b77cff); opacity: .85; animation-duration: 6s; }
.kc.r-L::before { background: conic-gradient(from 0deg, #ffd978, #fff6d6, #ff9a4a, #ffd978, #b8261a, #ffd978, #fff6d6, #ffd978); animation-duration: 3.2s; }
@keyframes kc-spin { to { transform: rotate(360deg); } }
.kc.r-R { --edge: #1f3d6e; --edge-hi: #e3c47a; }
.kc.r-E { --edge: #3b1d55; --edge-hi: #f0cf7a; }
.kc.r-E .kc-gl.g-E, .kc.r-L .kc-gl.g-L { animation: kc-twinkle 1.6s ease-in-out infinite alternate; }
@keyframes kc-twinkle { from { filter: brightness(1); } to { filter: brightness(1.8) drop-shadow(0 0 3px #ffe7a0); } }
/* the epic's and the legendary's sparks in the art */
.kc.r-E .kc-art::after, .kc.r-L .kc-art::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(1.5px 1.5px at 18% 22%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 72% 16%, #ffe7a0 50%, transparent 51%),
    radial-gradient(2px 2px at 84% 64%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 30% 78%, #e6c8ff 50%, transparent 51%),
    radial-gradient(2px 2px at 54% 40%, #fff6d6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 10% 56%, #fff 50%, transparent 51%);
  animation: kc-sparks 2.4s ease-in-out infinite alternate; }
@keyframes kc-sparks { 0% { opacity: .25; transform: translateY(0); } 100% { opacity: 1; transform: translateY(-4%); } }
/* the legendary's rays turning behind its arms */
.kc.r-L .kc-art::before { content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, rgb(255 220 130 / 0) 0deg 9deg, rgb(255 220 130 / .3) 9deg 13deg); animation: kc-spin 40s linear infinite; }
.kc.r-L .kc-art .arms, .kc.r-E .kc-art .arms { z-index: 2; }
/* the breath of light on the large cards */
.kc.r-E:not(.sz-s):not(.sz-b):not(.miss) { animation: kc-breathE 2.6s ease-in-out infinite alternate; }
.kc.r-L:not(.sz-s):not(.sz-b):not(.miss) { animation: kc-breathL 2s ease-in-out infinite alternate; }
@keyframes kc-breathE { from { box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgb(0 0 0 / .6), 0 0 calc(8 * var(--u)) rgb(183 124 255 / .35); }
  to { box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgb(0 0 0 / .6), 0 0 calc(26 * var(--u)) rgb(183 124 255 / .75); } }
@keyframes kc-breathL { from { box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgb(0 0 0 / .6), 0 0 calc(10 * var(--u)) rgb(255 200 90 / .45); }
  to { box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgb(0 0 0 / .6), 0 0 calc(34 * var(--u)) rgb(255 170 70 / .9), 0 0 calc(8 * var(--u)) rgb(255 240 190 / .8); } }
.kc.miss::before, .kc.miss .kc-art::before, .kc.miss .kc-art::after { animation: none; opacity: 0; }

/* foil, far brighter: a holographic rainbow in colour-dodge, a fine glitter over it; under the pointer the rainbow follows it */
.kc.p-foil .kc-sheen { opacity: .62;
  background: linear-gradient(115deg, transparent 12%, rgb(255 90 170 / .55) 24%, rgb(255 210 90 / .55) 34%, rgb(120 255 160 / .5) 44%, rgb(90 200 255 / .6) 54%, rgb(190 120 255 / .55) 64%, transparent 78%),
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0) 0 3px, rgb(255 255 255 / .12) 3px 4px);
  background-size: 300% 300%, 100% 100%; animation-duration: 3.6s; }
.kc.p-foil .kc-sheen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: overlay; opacity: .3;
  background: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%) 0 0 / 23px 29px, radial-gradient(1px 1px at 60% 70%, #fff 50%, transparent 51%) 0 0 / 31px 19px;
  animation: kc-glitter 1.8s steps(6) infinite; }
@keyframes kc-glitter { to { background-position: 23px 29px, -31px 19px; } }
.kc.p-foil { box-shadow: 0 calc(6 * var(--u) * var(--kc)) calc(16 * var(--u) * var(--kc)) rgb(0 0 0 / .6), 0 0 calc(12 * var(--u) * var(--kc)) rgb(170 220 255 / .38), inset 0 0 0 1px rgb(255 255 255 / .35); }

/* under the pointer: the card leans toward it, a glare where it points, the sheen moved by it */
.kc-glare { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity 200ms;
  background: radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgb(255 255 255 / .38), rgb(255 255 255 / .08) 35%, transparent 60%); mix-blend-mode: soft-light; }
.kc.lit .kc-glare { opacity: 1; }
.kc.lit:not(.sz-s):not(.sz-b) { transform: perspective(calc(900 * var(--u))) rotateY(calc((var(--mx) - .5) * 16deg)) rotateX(calc((.5 - var(--my)) * 16deg)) scale(1.02); }
.kc.lit .kc-sheen { animation-play-state: paused; background-position: calc(var(--mx) * 100%) calc(var(--my) * 100%), 0 0; }
.kc.lit.r-R .kc-glare, .kc.lit.r-E .kc-glare, .kc.lit.r-L .kc-glare { mix-blend-mode: overlay; }