/* Trading cards: legacy, box-score and collecting lines (cardgame-legacy.js) and grading slabs.
   Fonts come from css/fonts.css (family names = file names). */

/* trade deadline: the old team's colours on a diagonal behind the player */
.lx-tdl-d { position: absolute; inset: 2.4cqw; border-radius: 2.2cqw; z-index: 0; pointer-events: none;
	background: linear-gradient(135deg, var(--f0) 0 42%, transparent 42.2%), linear-gradient(135deg, var(--f1) 0 46%, transparent 46.2%); opacity: .95; }
.ins-tdl .tc-portrait { z-index: 1; }
.ins-tdl .tc-title-t b { font-family: "Retro", var(--sans); font-weight: 400; letter-spacing: .04em; }
/* hometown hero: brick wall */
.lx-hh-d { position: absolute; inset: 2.4cqw; border-radius: 2.2cqw; z-index: 0; pointer-events: none; opacity: .35;
	background: repeating-linear-gradient(0deg, transparent 0 4.6cqw, rgba(0, 0, 0, .5) 4.6cqw 5cqw), repeating-linear-gradient(90deg, transparent 0 9.6cqw, rgba(0, 0, 0, .5) 9.6cqw 10cqw); }
.ins-hh .tc-portrait { z-index: 1; }
.ins-hh .tc-series b { font-family: "BrickWall", var(--sans); font-style: normal; line-height: 1.2; }
/* records, torch, contracts */
.ins-rbk .tc-now-big b, .ins-tor .tc-now-big b { font-family: "MadeLikesSlab", var(--sans); font-style: normal; }
.ins-max .tc-series b, .ins-bar .tc-series b { font-family: "MadeLikesSlab", var(--sans); font-style: normal; }
.ins-clu .tc-series b, .ins-irn .tc-series b { font-family: "NeonLights", var(--sans); font-style: normal; line-height: 1.25; color: #ffe9f9; text-shadow: 0 0 1cqw #ff4fd8, 0 0 2.4cqw #ff4fd8; }
.ins-opn .tc-series b, .ins-cls .tc-series b { font-family: "Retro", var(--sans); font-style: normal; }
/* autograph and relic: below the chin, at the plate's edge */
.lx-auto { position: absolute; right: 4cqw; top: 73cqw; width: 46cqw; padding: 1.4cqw 2cqw 1cqw; z-index: 3; border-radius: 1.4cqw; background: linear-gradient(180deg, #fffdf6, #efe7d2); color: #10245a; box-shadow: 0 .8cqw 2cqw rgba(0, 0, 0, .45); transform: rotate(-2deg); }
.lx-auto span { display: block; font-family: "MadeLikesScript", cursive; line-height: 1.35; white-space: nowrap; overflow: hidden; }
.lx-auto i { display: block; font-style: normal; font-size: 1.7cqw; font-weight: 800; letter-spacing: .12em; border-top: .25cqw solid rgba(16, 36, 90, .35); margin-top: .4cqw; padding-top: .4cqw; white-space: nowrap; }
.lx-relic { position: absolute; left: 4cqw; top: 70cqw; width: 20cqw; height: 15cqw; z-index: 3; border-radius: 1.4cqw; display: flex; align-items: flex-end; justify-content: center; padding-bottom: .6cqw;
	background: repeating-linear-gradient(45deg, var(--r0) 0 .9cqw, color-mix(in srgb, var(--r0) 70%, #000) .9cqw 1.8cqw), var(--r0); box-shadow: inset 0 0 0 .6cqw var(--r1), 0 .8cqw 1.6cqw rgba(0, 0, 0, .5); }
.lx-relic span { font-size: 1.7cqw; font-weight: 900; letter-spacing: .14em; color: #fff; background: rgba(0, 0, 0, .5); padding: .2cqw .8cqw; border-radius: .6cqw; }
/* masterpiece: a painted canvas in a gilt frame */
.ins-gm .tc-front { background: linear-gradient(135deg, #5a3a0a, #e8c25a 25%, #7a5512 50%, #f6dc8c 75%, #5a3a0a) !important; }
.ins-gm .tc-bg { background: radial-gradient(70% 50% at 50% 30%, color-mix(in srgb, var(--c0) 18%, #f3e3c0), color-mix(in srgb, var(--c0) 40%, #b98a4e) 60%, color-mix(in srgb, var(--base) 55%, #4a2a10)) !important; filter: saturate(1.1); }
.lx-gm-d { position: absolute; inset: 2.4cqw; border-radius: 2.2cqw; z-index: 0; pointer-events: none; box-shadow: inset 0 0 0 1.4cqw #3a2406, inset 0 0 0 1.9cqw #e8c25a;
	background: repeating-radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .05) 0 .6cqw, transparent .6cqw 1.4cqw); }
.ins-gm .tc-portrait { z-index: 1; }
.ins-gm .tc-series b, .ins-gm .tc-ln { font-family: "AidaSerifCondensed", serif; font-style: normal; }
.ins-gm .tc-sub, .ins-gm .tc-fn { font-family: "AidaSerifOblique", serif; }
/* puzzle back: one big picture, a third of it per card */
.lx-pz-back { padding: 0 !important; }
.tc .lx-pz-back .lx-pz-win { position: absolute; inset: 2.4cqw; overflow: hidden; border-radius: 2.2cqw; }
.lx-pz-art { position: absolute; width: 300%; height: 300%; background: radial-gradient(60% 50% at 50% 40%, color-mix(in srgb, var(--p0) 70%, #fff), var(--p0) 60%, color-mix(in srgb, var(--p0) 50%, #000)); color: var(--p1); }
.lx-pz-sun { position: absolute; left: 50%; top: 42%; width: 180cqw; height: 180cqw; transform: translate(-50%, -50%); border-radius: 50%;
	background: repeating-conic-gradient(color-mix(in srgb, var(--p1) 30%, transparent) 0 8deg, transparent 8deg 16deg); }
.lx-pz-logo { position: absolute; left: 50%; top: 38%; width: 120cqw; height: 120cqw; transform: translate(-50%, -50%); object-fit: contain; opacity: .9; }
.lx-pz-yr { position: absolute; left: 0; right: 0; top: 4%; text-align: center; font-family: "HX Olde", serif; font-size: 60cqw; line-height: 1; color: var(--p1); text-shadow: 0 1cqw 0 rgba(0, 0, 0, .4); }
.lx-pz-name { position: absolute; left: 0; right: 0; top: 64%; text-align: center; font-family: "MadeLikesSlab", var(--sans); font-size: 48cqw; line-height: 1; color: #fff; text-shadow: 0 1.4cqw 0 rgba(0, 0, 0, .5); white-space: nowrap; }
.lx-pz-region { position: absolute; left: 0; right: 0; top: 57%; text-align: center; font-family: "MadeLikesSlab", var(--sans); font-size: 16cqw; letter-spacing: .3em; color: var(--p1); }
.lx-pz-word { position: absolute; left: 0; right: 0; top: 85%; text-align: center; font-family: "Retro", var(--sans); font-size: 30cqw; letter-spacing: .1em; color: var(--p1); }
.tc .lx-pz-back .lx-pz-tag { position: absolute; left: 4cqw; bottom: 4cqw; z-index: 2; font-size: 2.2cqw; font-weight: 900; letter-spacing: .1em; background: rgba(0, 0, 0, .6); color: #fff; padding: .4cqw 1.4cqw; border-radius: 1cqw; max-width: 88cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* grading slab (Workshop): a clear case and a label above the card */
.tc.tc-slab { margin-top: 13%; }
.tc.tc-slab::before { content: ""; position: absolute; left: -3.5%; right: -3.5%; top: -12%; bottom: -3%; border-radius: 4%; z-index: -1;
	background: linear-gradient(160deg, rgba(235, 244, 255, .55), rgba(190, 210, 235, .35)); border: 2px solid rgba(170, 190, 215, .9); box-shadow: 0 6px 18px rgba(0, 0, 0, .25), inset 0 0 0 3px rgba(255, 255, 255, .5); }
.tc-slab-label { position: absolute; left: 0; right: 0; top: -10.5%; height: 8%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr 1fr; align-items: center; padding: 0 4%;
	background: linear-gradient(180deg, #fff, #f0f0f0); border: 2px solid #c8102e; border-radius: 3px; color: #111; font-family: "MadeLikesSlab", var(--sans); container-type: inline-size; }
.tc-slab-co { font-size: 5.5cqw; letter-spacing: .08em; color: #c8102e; }
.tc-slab-w { font-size: 6cqw; font-weight: 700; }
.tc-slab-label b { grid-row: 1 / 3; grid-column: 2; font-size: 15cqw; line-height: 1; }
.tc-grade-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin: 10px 0; }
.tc-grade-row .tc-cell { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.tc-grade-tag { display: inline-block; font-family: "MadeLikesSlab", var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 0 5px; border: 1.5px solid #c8102e; border-radius: 3px; background: #fff; color: #111; white-space: nowrap; }