/* Trading cards (tc-) and the pack opener (pk-).
   A card is self-contained (its own team-color surfaces and white text), so it
   reads the same in both themes; only the surrounding UI uses theme variables.
   Everything inside a card is sized in cqw (the card is a size container), so
   one design scales from binder thumbnails (which show less) to the big dialog card. */

/* ---- tier colors (tags, glows, gems) ---------------------------------------- */
.tier-common { --tier: #8b95a1; --tier-ink: #fff; }
.tier-uncommon { --tier: #9fb0bf; --tier-ink: #10161c; }
.tier-rare { --tier: #d9a62e; --tier-ink: #241800; }
.tier-epic { --tier: #a35bff; --tier-ink: #fff; }
.tier-legendary { --tier: #ff7a2f; --tier-ink: #1f0b00; }
.tier-mythic { --tier: #e8c25a; --tier-ink: #e8c25a; }
.tc-tier-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .03em; background: var(--tier); color: var(--tier-ink); vertical-align: middle; white-space: nowrap; }
.tc-tier-tag.tier-mythic { background: #101012; border: 1px solid #e8c25a; }
.tc-tier-tag.tier-epic { background: linear-gradient(110deg, #8a4dff, #d06bff, #6a8cff); }
.tc-tier-tag.tier-legendary { background: linear-gradient(110deg, #ff9a3d, #ffd36b, #ff6b3d); }
.tc-kind-tag { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid var(--line); color: var(--text); background: var(--panel-2); vertical-align: middle; }
.tc-kind-tag.par-r { background: linear-gradient(110deg, #ff9ed2, #9ef3ff, #fff59e, #c6a6ff); color: #1b1030; border-color: transparent; }
.tc-kind-tag.par-g { background: linear-gradient(180deg, #ffe08a, #c89324); color: #2a1d00; border-color: transparent; }
.tc-kind-tag.par-b { background: #0d0d0f; color: #e8c25a; border-color: #e8c25a; }
.tc-value-line { margin-top: 4px; }

/* ---- the card ------------------------------------------------------------------ */
.tc {
	--tcw: 230px; --acc: #ffffff;
	width: var(--tcw); aspect-ratio: 5 / 7; position: relative; flex: 0 0 auto;
	container-type: inline-size; border-radius: 5% / 3.6%;
	font-family: var(--sans); color: #fff; text-align: left; line-height: 1.15;
	-webkit-tap-highlight-color: transparent; user-select: none;
	isolation: isolate; /* the shadow (cards-fx.css: .tc::before) sits under the card, not under the page */
}
.tc-sm { --tcw: 150px; }
.tc-md { --tcw: 230px; }
.tc-lg { --tcw: min(380px, calc(100vw - 48px)); }
.tc[role="button"] { cursor: pointer; }
.tc:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.tc-tilt { width: 100%; height: 100%; transform-style: preserve-3d; }
.tc-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.tc.flipped .tc-flip { transform: rotateY(180deg); }
/* Only the face showing takes clicks: a hidden face can still sit on top in 3D and swallow them (the back's Full stats button). */
.tc:not(.flipped) .tc-back, .tc.flipped .tc-side:not(.tc-back) { pointer-events: none; }
.tc-side { position: absolute; inset: 0; border-radius: 5cqw; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tc-back { transform: rotateY(180deg); }
.tc-show-back .tc-back { transform: none; }
.tc-static .tc-flip, .tc-static .tc-tilt { transition: none; }

/* frame material by rarity */
.tc-front { background: #f1ede4; box-shadow: inset 0 0 0 .5cqw rgba(0, 0, 0, .12); }
.tier-uncommon .tc-front { background: linear-gradient(135deg, #7f8b96, #f4f7fa 24%, #a3afba 44%, #eef2f5 64%, #77838e); }
.tier-rare .tc-front { background: linear-gradient(135deg, #7c5c12, #f8e08e 22%, #b8892a 44%, #fff1b8 62%, #94701c); }
.tier-epic .tc-front { background: linear-gradient(115deg, #ff7eb3, #7afcff, #feff9c, #b28dff, #ff7eb3, #7afcff); background-size: 300% 300%; }
.tier-legendary .tc-front { background: linear-gradient(115deg, #a8741a, #ffe7a0, #ff9a5a, #fff3c4, #c98a1c, #ffd36b, #a8741a); background-size: 300% 300%; }
.tier-mythic .tc-front { background: linear-gradient(140deg, #0b0b0d, #2b2a2f 40%, #0b0b0d 60%, #1d1c20); }
/* The frame drift runs only on the handled card and the big dialog card, never across a grid. */
.tc-hover.tier-epic .tc-front, .tc-lg.tier-epic .tc-front { animation: tc-drift 9s linear infinite; }
.tc-hover.tier-legendary .tc-front, .tc-lg.tier-legendary .tc-front { animation: tc-drift 7s linear infinite; }
.tc-hover.par-o .tc-front, .tc-lg.par-o .tc-front { animation: tc-drift 6s linear infinite; }
@keyframes tc-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* team surface inside the frame */
.tc-bg {
	position: absolute; inset: 2.8cqw; border-radius: 3.4cqw; overflow: hidden;
	background:
		radial-gradient(70% 45% at 50% 34%, color-mix(in srgb, var(--c1) 38%, transparent), transparent 72%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .055) 0 1.6cqw, transparent 1.6cqw 3.6cqw),
		linear-gradient(172deg, var(--c0) 0%, var(--base) 42%, var(--deep) 100%);
	box-shadow: inset 0 0 0 .45cqw rgba(255, 255, 255, .22);
}
.tier-mythic .tc-bg {
	background:
		radial-gradient(70% 45% at 50% 32%, rgba(232, 194, 90, .22), transparent 70%),
		repeating-linear-gradient(135deg, rgba(232, 194, 90, .06) 0 .6cqw, transparent .6cqw 3cqw),
		linear-gradient(172deg, color-mix(in srgb, var(--base) 60%, #1c1b20) 0%, color-mix(in srgb, var(--deep) 65%, #0d0d10) 60%, #050506 100%);
	box-shadow: inset 0 0 0 .55cqw #c9a646, inset 0 0 0 1.3cqw rgba(0, 0, 0, .6), inset 0 0 0 1.6cqw rgba(201, 166, 70, .5);
}
.tier-mythic .tc-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 36%, var(--c0), transparent 75%); opacity: .28; }

/* parallax layer (moves against the tilt) */
.tc-par { position: absolute; inset: 2.8cqw; border-radius: 3.4cqw; overflow: hidden; pointer-events: none; transform: translate(calc(var(--px, 0) * -6cqw), calc(var(--py, 0) * -5cqw)); }
.tc-water {
	position: absolute; top: 1cqw; right: -1cqw; font-size: 62cqw; line-height: .8; font-weight: 900; font-style: italic;
	letter-spacing: -.06em; color: rgba(255, 255, 255, .09); white-space: nowrap;
}
.tier-mythic .tc-water { color: rgba(232, 194, 90, .08); }
.tc-trophy { position: absolute; left: 50%; top: 18cqw; transform: translateX(-50%); font-size: 58cqw; line-height: 1; opacity: .16; filter: grayscale(.2) drop-shadow(0 0 4cqw rgba(255, 220, 120, .6)); }

/* portrait: drawn face or real photo */
.tc-portrait { position: absolute; left: 18cqw; top: 9cqw; width: 64cqw; height: 96cqw; transform: translate(calc(var(--px, 0) * 2.5cqw), calc(var(--py, 0) * 1.5cqw)); }
.tc-portrait .face { width: 100% !important; height: 100% !important; background: transparent; border-radius: 0; }
.tc-portrait .face-svg svg { filter: drop-shadow(0 1.2cqw 1.6cqw rgba(0, 0, 0, .35)); }
.tc-portrait.tc-has-photo { left: 2.8cqw; right: 2.8cqw; width: auto; top: 16cqw; height: 70cqw; overflow: hidden;
	background: radial-gradient(60% 70% at 50% 62%, color-mix(in srgb, var(--c1) 55%, transparent), transparent 75%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); }
.tc-photo { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); object-fit: cover; object-position: 50% 0; filter: drop-shadow(0 1cqw 2cqw rgba(0, 0, 0, .45)); }

.tc-top { position: absolute; left: 6.5cqw; right: 6.5cqw; top: 6.5cqw; display: flex; align-items: flex-start; gap: 2cqw; }
.tc-ovr { display: flex; flex-direction: column; align-items: center; min-width: 14cqw; padding: 1.3cqw 1.6cqw 1cqw; border-radius: 2.4cqw; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .5); backdrop-filter: blur(2px); }
.tc-ovr b { font-size: 10cqw; font-weight: 900; line-height: 1; letter-spacing: -.03em; text-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .4); }
.tc-ovr span { font-size: 2.5cqw; font-weight: 800; letter-spacing: .16em; opacity: .85; margin-top: .4cqw; }
.tc-ovr i { font-style: normal; font-size: 2.4cqw; font-weight: 800; letter-spacing: .06em; margin-top: .8cqw; padding: .2cqw 1.2cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .16); white-space: nowrap; }
.tc-pos { display: flex; flex-direction: column; align-items: flex-start; padding-top: .8cqw; text-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .5); }
.tc-pos b { font-size: 5.4cqw; font-weight: 900; line-height: 1; }
.tc-pos span { font-size: 3cqw; font-weight: 700; opacity: .85; margin-top: .6cqw; }
.tc-pos .tc-rc { margin-top: 1.2cqw; opacity: 1; font-size: 2.8cqw; font-weight: 900; letter-spacing: .04em; padding: .4cqw 1.3cqw; border-radius: 1cqw 1cqw 1cqw 0; background: #fff; color: #c8102e; text-shadow: none; box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .35); }
.tc-topright { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1.2cqw; }
.tc-team { display: inline-flex; align-items: center; gap: 1cqw; font-size: 3.6cqw; font-weight: 900; letter-spacing: .04em; padding: .9cqw 2.1cqw; border-radius: 1.8cqw; border: .5cqw solid; background: #444; color: #fff; box-shadow: 0 .5cqw 1.4cqw rgba(0, 0, 0, .3); }
.tc-logo { width: 6cqw; height: 6cqw; object-fit: contain; display: block; }
.tc-team-logo { padding: .7cqw 1.6cqw .7cqw 1cqw; }
.tc-label { font-size: 2.6cqw; font-weight: 800; letter-spacing: .2em; opacity: .85; text-shadow: 0 .3cqw .8cqw rgba(0, 0, 0, .5); }

/* skill radar */
.tc-radar { position: absolute; right: 5cqw; top: 54cqw; width: 25cqw; height: 25cqw; border-radius: 50%; background: radial-gradient(circle, rgba(0, 0, 0, .55), rgba(0, 0, 0, .35) 70%); box-shadow: 0 0 0 .35cqw rgba(255, 255, 255, .22); }
.tc-radar-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tc-radar-grid { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: .8; }
.tc-radar-shape { fill: color-mix(in srgb, var(--acc) 55%, transparent); stroke: var(--acc); stroke-width: 1.6; stroke-linejoin: round; }
.tc-radar-lbl { fill: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .02em; opacity: .9; }

.tc-plate {
	position: absolute; left: 2.8cqw; right: 2.8cqw; top: 82cqw; padding: 6cqw 6cqw 1.4cqw;
	background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) 5cqw, rgba(0, 0, 0, .74) 100%);
}
.tc-plate::before { content: ""; position: absolute; left: 6cqw; top: 4.4cqw; width: 12cqw; height: .8cqw; border-radius: 1cqw; background: var(--acc); }
.ins .tc-plate::before, .par .tc-plate::before { display: none; }
.tc-fn { font-size: 3.5cqw; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1.2cqw; }
.tc-ln { font-size: var(--ln-fs, 11cqw); font-weight: 900; text-transform: uppercase; line-height: .98; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .5cqw 1.2cqw rgba(0, 0, 0, .5); }
.tc-sub { font-size: 2.8cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1cqw; }
.tier-mythic .tc-ln, .tier-mythic .tc-ovr b { color: #f1d27a; background: linear-gradient(180deg, #fff1bf, #e8c25a 55%, #b8892a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
.tier-mythic .tc-ovr { box-shadow: inset 0 0 0 .5cqw #c9a646; }

/* insert / parallel ribbon */
.tc-ribbon { position: absolute; left: 5cqw; top: 0; display: inline-flex; align-items: center; gap: 1.2cqw; max-width: calc(100% - 10cqw); padding: .9cqw 2.4cqw .9cqw 1.4cqw; border-radius: 1.4cqw; font-size: 2.7cqw; letter-spacing: .12em; white-space: nowrap; overflow: hidden; background: var(--rib, linear-gradient(90deg, var(--c0), var(--base))); color: var(--rib-ink, #fff); box-shadow: 0 .6cqw 1.6cqw rgba(0, 0, 0, .45), inset 0 0 0 .3cqw rgba(255, 255, 255, .35); }
.tc-ribbon b { font-weight: 900; }
.tc-ribbon span:last-child { opacity: .85; font-weight: 700; letter-spacing: .08em; }
.tc-rib-i { font-size: 3.4cqw; line-height: 1; letter-spacing: 0; }

.tc-stats { position: absolute; left: 2.8cqw; right: 2.8cqw; top: 111.5cqw; padding: 1.6cqw 4cqw 1.8cqw; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(0, 0, 0, .74); border-top: .5cqw solid rgba(255, 255, 255, .16); }
.tc-st { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.tc-st b { font-size: 5.2cqw; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tc-st span { font-size: 2.3cqw; font-weight: 800; letter-spacing: .14em; opacity: .7; }
.tc-foot { position: absolute; left: 2.8cqw; right: 2.8cqw; bottom: 2.8cqw; height: 13.5cqw; padding: 0 4.6cqw; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; background: rgba(0, 0, 0, .74); border-radius: 0 0 3.4cqw 3.4cqw; }
.tc-acc { display: flex; gap: 1cqw; flex-wrap: wrap; overflow: hidden; max-height: 11cqw; min-width: 0; }
.tc-pill { display: inline-flex; align-items: center; gap: .7cqw; font-size: 2.6cqw; font-weight: 800; padding: .5cqw 1.5cqw .5cqw 1cqw; border-radius: 99px; background: rgba(255, 255, 255, .16); white-space: nowrap; letter-spacing: .02em; }
.tc-pill i { font-style: normal; font-size: 3cqw; line-height: 1; }
.tc-pill-champ { background: linear-gradient(180deg, #ffe08a, #d4a52a); color: #2a1d00; }
.tc-pill-mvp { background: linear-gradient(180deg, #ff9b6a, #e0531f); color: #fff; }
.tc-pill-gold { background: rgba(255, 214, 102, .22); color: #ffe39a; }
.tc-pill-hof { background: #111; color: #f1d27a; box-shadow: inset 0 0 0 .35cqw #c9a646; }
.tc-serial { display: flex; align-items: center; gap: 1.2cqw; font-size: 2.5cqw; font-weight: 700; font-family: var(--mono); opacity: .85; white-space: nowrap; flex: 0 0 auto; }
.tc-gem { width: 3.2cqw; height: 3.2cqw; transform: rotate(45deg); border-radius: .5cqw; background: var(--tier); box-shadow: 0 0 1.6cqw var(--tier); }
.tier-epic .tc-gem { background: linear-gradient(135deg, #ff7eb3, #7afcff, #b28dff); }

/* foil and glare: cards-fx.css */

/* ---- parallels ----------------------------------------------------------------- */
.par-r .tc-front { background: conic-gradient(from 210deg, #ff7eb3, #ffcf7e, #fbff8c, #7afcbf, #7ad8ff, #b28dff, #ff7eb3); }
.par-r .tc-bg::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 120%, rgba(255, 255, 255, .09) 0 1cqw, transparent 1cqw 2.4cqw); }
.par-r { --rib: linear-gradient(90deg, #ff7eb3, #ffd27e, #7afcbf, #7ad8ff, #b28dff); --rib-ink: #1b1030; }
.par-g .tc-front { background: linear-gradient(135deg, #8a5d07, #ffe58f 18%, #c08a1c 36%, #fff3c4 52%, #a36f0e 70%, #ffd76a 86%, #7b5205); box-shadow: inset 0 0 0 .6cqw #5a3c00; }
.par-g .tc-bg { box-shadow: inset 0 0 0 .55cqw #ffd76a, inset 0 0 0 1.2cqw rgba(0, 0, 0, .35); }
.par-g { --rib: linear-gradient(180deg, #ffe58f, #c08a1c); --rib-ink: #2a1d00; }
.par-b .tc-front { background: linear-gradient(140deg, #000, #1b1b1f 30%, #000 55%, #141417); box-shadow: inset 0 0 0 .6cqw #e8c25a; }
.par-b .tc-bg { background: radial-gradient(70% 45% at 50% 34%, color-mix(in srgb, var(--c0) 45%, transparent), transparent 70%), linear-gradient(172deg, #17171b, #050506); box-shadow: inset 0 0 0 .5cqw #e8c25a; }
.par-b { --rib: #050506; --rib-ink: #e8c25a; }
.par-b .tc-ribbon { box-shadow: 0 0 0 .35cqw #e8c25a, 0 .6cqw 2cqw rgba(232, 194, 90, .45); }
.par-b .tc-ln { color: #f1d27a; }

/* ---- inserts ------------------------------------------------------------------- */
.ins-as { --rib: linear-gradient(90deg, #0b3d91, #c8102e); }
.ins-as .tc-bg { background:
	radial-gradient(2px 2px at 20% 20%, #fff, transparent), radial-gradient(2px 2px at 70% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 12% 55%, #fff, transparent),
	radial-gradient(70% 45% at 50% 34%, color-mix(in srgb, var(--c1) 38%, transparent), transparent 72%),
	linear-gradient(160deg, var(--c0) 0%, var(--base) 50%, var(--deep) 100%); }
.ins-po { --rib: linear-gradient(90deg, #1a1a1a, #3a3a3a); }
.ins-po .tc-bg { background:
	repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 .4cqw, transparent .4cqw 10cqw),
	radial-gradient(70% 45% at 50% 34%, color-mix(in srgb, var(--c1) 40%, transparent), transparent 72%),
	linear-gradient(172deg, var(--c0), var(--deep) 70%, #000); }
.ins-aw { --rib: linear-gradient(180deg, #ffe08a, #c99a2e); --rib-ink: #2a1d00; }
.ins-aw .tc-front { background: linear-gradient(135deg, #7c5c12, #f8e08e 22%, #b8892a 44%, #fff1b8 62%, #94701c); }
.ins-aw .tc-bg { box-shadow: inset 0 0 0 .6cqw #ffd76a, inset 0 0 6cqw rgba(255, 215, 106, .35); }
.ins-leg { --rib: linear-gradient(90deg, #3b2a17, #8a6a3a); --rib-ink: #f6e7c8; }
.ins-leg .tc-front { background: linear-gradient(135deg, #3b2a17, #c9a46a 25%, #6b4e2a 50%, #e6cfa0 75%, #3b2a17); }
.ins-leg .tc-bg { background: radial-gradient(70% 45% at 50% 34%, rgba(246, 231, 200, .35), transparent 72%), linear-gradient(172deg, color-mix(in srgb, var(--base) 60%, #6b4e2a), color-mix(in srgb, var(--deep) 55%, #2a1d10) 80%); }
.ins-leg .tc-portrait { filter: sepia(.45) contrast(1.05); }
.ins-icon { --rib: linear-gradient(90deg, var(--c1), var(--c2)); --rib-ink: var(--on1); }
.ins-icon .tc-front { background: linear-gradient(135deg, var(--c0), var(--c1) 50%, var(--c0)); }
.ins-icon .tc-bg { box-shadow: inset 0 0 0 .9cqw var(--c1), inset 0 0 0 1.5cqw rgba(0, 0, 0, .4); }
.ins-icon .tc-water { color: color-mix(in srgb, var(--c1) 22%, transparent); }
.ins-rb { --rib: linear-gradient(90deg, #00e0ff, #7a00ff); }
.ins-rb .tc-bg { background:
	repeating-linear-gradient(120deg, rgba(0, 224, 255, .12) 0 .8cqw, transparent .8cqw 6cqw),
	radial-gradient(70% 45% at 50% 34%, rgba(0, 224, 255, .3), transparent 72%),
	linear-gradient(172deg, var(--base), var(--deep) 60%, #000); }

/* ---- back ------------------------------------------------------------------------ */
.tc-back { display: flex; flex-direction: column; gap: 1.8cqw; padding: 6cqw 6cqw 4.5cqw; background: #f1ede4; }
.tc-back-bg { position: absolute; inset: 2.8cqw; border-radius: 3.4cqw; z-index: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 1cqw, transparent 1cqw 2.4cqw), linear-gradient(170deg, var(--base), var(--deep) 55%, #07090c); box-shadow: inset 0 0 0 .45cqw rgba(255, 255, 255, .22); }
.tier-uncommon .tc-back { background: linear-gradient(135deg, #7f8b96, #f4f7fa 24%, #a3afba 44%, #eef2f5 64%, #77838e); }
.tier-rare .tc-back, .ins-aw .tc-back { background: linear-gradient(135deg, #7c5c12, #f8e08e 22%, #b8892a 44%, #fff1b8 62%, #94701c); }
.tier-epic .tc-back { background: linear-gradient(115deg, #ff7eb3, #7afcff, #feff9c, #b28dff); }
.tier-legendary .tc-back { background: linear-gradient(115deg, #a8741a, #ffe7a0, #ff9a5a, #fff3c4, #c98a1c); }
.tier-mythic .tc-back, .par-b .tc-back { background: linear-gradient(140deg, #0b0b0d, #2b2a2f 40%, #0b0b0d); }
.par-g .tc-back { background: linear-gradient(135deg, #8a5d07, #ffe58f 18%, #c08a1c 36%, #fff3c4 52%, #7b5205); }
.par-r .tc-back { background: conic-gradient(from 210deg, #ff7eb3, #ffcf7e, #fbff8c, #7afcbf, #7ad8ff, #b28dff, #ff7eb3); }
.ins-leg .tc-back { background: linear-gradient(135deg, #3b2a17, #c9a46a 25%, #6b4e2a 50%, #e6cfa0 75%, #3b2a17); }
.tier-mythic .tc-back-bg, .par-b .tc-back-bg { background: linear-gradient(170deg, #1c1b20, #050506); box-shadow: inset 0 0 0 .55cqw #c9a646; }
.tc-back > *:not(.tc-back-bg) { position: relative; z-index: 1; }
.tc-back-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2cqw; padding-bottom: 1.6cqw; border-bottom: .4cqw solid rgba(255, 255, 255, .2); }
.tc-back-id { min-width: 0; }
.tc-back-name { font-size: 6cqw; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-back-sub { font-size: 2.6cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-top: 1cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-back-num { font-size: 8cqw; font-weight: 900; font-style: italic; opacity: .35; line-height: 1; }
.tc-hist { display: flex; gap: .5cqw; border-radius: 1cqw; overflow: hidden; min-height: 5.2cqw; }
.tc-hist-seg { flex: 1 1 0; min-width: 7cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .4cqw .6cqw; font-size: 2.1cqw; line-height: 1.05; opacity: .72; overflow: hidden; white-space: nowrap; }
.tc-hist-seg b { font-size: 2.5cqw; font-weight: 900; }
.tc-hist-seg.on { opacity: 1; box-shadow: inset 0 -.7cqw 0 #fff; }
.tc-bio { display: grid; grid-template-columns: auto 1fr; gap: .5cqw 3cqw; margin: 0; font-size: 2.8cqw; }
.tc-bio dt { font-size: 2.2cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .65; align-self: center; }
.tc-bio dd { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-tbl { width: 100%; border-collapse: collapse; font-size: 2.55cqw; font-variant-numeric: tabular-nums; }
.tc-tbl th, .tc-tbl td { padding: .45cqw .35cqw; text-align: right; }
.tc-tbl thead th { font-size: 2.1cqw; letter-spacing: .06em; opacity: .65; border-bottom: .3cqw solid rgba(255, 255, 255, .2); }
.tc-tbl thead th:first-child, .tc-tbl tbody th { text-align: left; }
.tc-tbl tbody th { font-weight: 800; }
.tc-tbl .tc-c-tm { text-align: left; opacity: .8; }
.tc-tbl tbody tr + tr { border-top: .25cqw solid rgba(255, 255, 255, .08); }
.tc-tbl tr.on { background: rgba(255, 255, 255, .16); }
.tc-tbl tr.tc-tot { border-top: .35cqw solid rgba(255, 255, 255, .3); font-weight: 800; }
.tc-more-note { font-size: 2.2cqw; opacity: .6; margin-top: -1cqw; text-align: right; }
.tc-awards { font-size: 2.6cqw; line-height: 1.35; }
.tc-k { font-size: 2.1cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .65; margin-right: 1.6cqw; }
.tc-notes { margin: 0; padding: 0; list-style: none; font-size: 2.5cqw; display: flex; flex-direction: column; gap: .5cqw; }
.tc-notes li::before { content: "▸ "; color: var(--acc); }
.tc-blurb { margin: 0; font-size: 2.7cqw; line-height: 1.35; opacity: .92; flex: 1 1 auto; overflow: hidden; }
.tc-scout { font-style: italic; opacity: .9; }
.tc-back-foot { display: flex; justify-content: space-between; gap: 2cqw; font-size: 2.2cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.tc-back-foot span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* thumbnails show less */
@container (max-width: 200px) {
	.tc-radar, .tc-st:nth-child(5), .tc-ovr i, .tc-label, .tc-sub, .tc-fn { display: none; }
	.tc-stats { grid-template-columns: repeat(4, 1fr); }
	.tc-st b { font-size: 6.2cqw; }
	.tc-st span { font-size: 3cqw; }
	.tc-pill { font-size: 3.4cqw; padding: .5cqw 1.4cqw; }
	.tc-pill span { display: none; }
	.tc-pill i { font-size: 4.4cqw; }
	.tc-serial { font-size: 3.2cqw; }
	.tc-ribbon { font-size: 3.6cqw; top: 1cqw; }
	.tc-ribbon span:last-child { display: none; }
	.tc-ln { font-size: max(var(--ln-fs, 11cqw), 9cqw); }
	.tc-pos .tc-rc { font-size: 4cqw; }
}
@container (max-width: 260px) {
	.tc-bio, .tc-blurb, .tc-awards { font-size: 3.6cqw; }
	.tc-tbl { font-size: 3.4cqw; }
	.tc-tbl .tc-c-fg, .tc-tbl .tc-c-per, .tc-tbl .tc-xrow, .tc-notes, .tc-scout, .tc-more-note, .tc-bio dt:nth-of-type(n+3), .tc-bio dd:nth-of-type(n+3) { display: none; }
	.tc-hist-seg span { display: none; }
	.tc-back-name { font-size: 7cqw; }
}

/* ghosts (missing cards) and empty slots: theme-aware */
.tc-ghost, .tc-empty-slot { filter: none; border: 2px dashed var(--line); background: var(--panel-2); color: var(--dim); border-radius: 10px; cursor: pointer; padding: 0; font: inherit; }
.tc-ghost:hover, .tc-empty-slot:hover { border-color: var(--tier, var(--accent)); color: var(--text); }
.tc-ghost-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px; text-align: center; }
.tc-ghost-q { font-size: 34px; font-weight: 900; opacity: .35; line-height: 1; }
.tc-ghost-name { font-weight: 700; color: var(--text); font-size: 13px; line-height: 1.2; }
.tc-ghost-sub { font-size: 12px; }
.tc-ghost-tier { font-size: 11px; font-weight: 700; color: var(--tier); }
.tier-uncommon .tc-ghost-tier, .tier-mythic .tc-ghost-tier { color: var(--dim); }
.tc-empty-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.tc-empty-slot span:first-child { font-size: 34px; line-height: 1; }
.tc-missing { background: var(--panel-2); border-radius: 10px; color: var(--dim); }
.tc-export-host { position: fixed; left: -10000px; top: 0; pointer-events: none; }

/* ---- page ------------------------------------------------------------------------ */
.tc-wallet { display: flex; gap: 6px; flex-wrap: wrap; }
.tc-chip { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 13px; white-space: nowrap; }
.tc-h2 { margin: 22px 0 6px; }
.tc-kicker { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.tc-cotd { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; padding: 18px; background: linear-gradient(120deg, var(--accent-soft), transparent 70%), var(--panel); }
.tc-cotd-text { flex: 1 1 260px; min-width: 0; }
.tc-cotd-text h2 { margin: 4px 0 8px; }
.tc-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tc-pack { display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); min-width: 0; }
.tc-pack-info { flex: 1 1 auto; min-width: 0; }
.tc-pack-info h3 { margin: 0 0 4px; }
.tc-pack-info p { margin: 0 0 8px; }
.tc-pack-art {
	flex: 0 0 78px; height: 116px; border-radius: 6px; position: relative; overflow: hidden; color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	background: linear-gradient(160deg, #e2662a, #8f2f0c); box-shadow: 0 6px 14px rgba(0, 0, 0, .25), inset 0 0 0 2px rgba(255, 255, 255, .18);
}
.tc-pack-art::before, .tc-pack-art::after { content: ""; position: absolute; left: 0; right: 0; height: 7px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 4px, transparent 4px 8px); }
.tc-pack-art::before { top: 0; }
.tc-pack-art::after { bottom: 0; }
.tc-pack-team .tc-pack-art { background: linear-gradient(160deg, #2f6fd6, #142f66); }
.tc-pack-era .tc-pack-art { background: linear-gradient(160deg, #3fa57a, #145238); }
.tc-pack-draft .tc-pack-art { background: linear-gradient(160deg, #7b5cd6, #34206e); }
.tc-pack-legends .tc-pack-art { background: linear-gradient(115deg, #ff7eb3, #7afcff, #feff9c, #b28dff); color: #1b1030; }
.tc-pack-logo { font-size: 28px; line-height: 1; }
.tc-pack-name { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; text-align: center; padding: 0 4px; }
.tc-pack .tc-field select { max-width: 100%; }
.tc-pack-buy { margin-top: 8px; flex-wrap: wrap; gap: 6px; }
.tc-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
.tc-field select { max-width: 100%; }
.tc-odds { margin-top: 8px; font-size: 12px; }
.tc-odds summary { cursor: pointer; color: var(--link); }
.tc-odds ul { margin: 6px 0; padding-left: 18px; }
.tc-odds li { margin: 2px 0; }
.tc-recent { display: flex; flex-direction: column; gap: 14px; }
.tc-row-cards { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 10px; }

.tc-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 140; display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.tc-toast { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 9px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); transition: opacity .35s, transform .35s; }
.tc-toast-gold { border-left-color: var(--gold); }
.tc-toast-good { border-left-color: var(--good); }
.tc-toast.out { opacity: 0; transform: translateY(8px); }

/* binder */
.tc-rarity-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.tc-rs { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.tc-rs-gem { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); background: var(--tier); margin-right: 7px; border-radius: 2px; }
.tc-rs.tier-mythic .tc-rs-gem { background: #111; box-shadow: 0 0 0 1.5px #e8c25a; }
.tc-rs-label { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-controls { flex-wrap: wrap; gap: 8px; align-items: center; }
.tc-controls select, .tc-search { max-width: 100%; }
.tc-search { padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); min-width: 0; width: 180px; }
.tc-binder-info { justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.tc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 12px; justify-items: center; }
.tc-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tc-count { position: absolute; top: -6px; right: -6px; z-index: 2; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 1px 7px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.tc-cell-cap { color: var(--dim); }
.tc-more { display: flex; justify-content: center; margin-top: 18px; }

/* sets */
.tc-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.tc-set { display: flex; gap: 12px; align-items: center; text-align: left; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; min-width: 0; }
.tc-set:hover { border-color: var(--accent); }
.tc-set.done { border-color: var(--gold); background: linear-gradient(120deg, rgba(184, 134, 11, .12), transparent 60%), var(--panel); }
.tc-set-badge { flex: 0 0 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; background: var(--c0, #59606a); box-shadow: inset 0 0 0 3px var(--c1, rgba(255, 255, 255, .5)); letter-spacing: -.02em; overflow: hidden; }
.tc-set.done .tc-set-badge { font-size: 22px; }
.tc-set-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.tc-set-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-set-bar { display: block; height: 6px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.tc-set-bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.tc-set.done .tc-set-bar span { background: var(--gold); }
.tc-set-bar.big { height: 10px; margin: 6px 0; }
.tc-setlist { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }

/* starting five */
.tc-five { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 14px; }
.tc-five-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tc-five-pos { font-weight: 900; letter-spacing: .08em; color: var(--dim); }
.tc-five-off { color: var(--bad); font-size: 12px; }
.tc-five-score { margin-top: 14px; }
.tc-five-big { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.tc-five-big b { font-size: 40px; line-height: 1; color: var(--accent); }
.tc-five-big span { font-size: 18px; font-weight: 700; }

/* trophies */
.tc-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--c0, var(--panel-2)); color: #fff; box-shadow: inset 0 0 0 2px var(--c1, var(--line)); }
.tc-ach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 16px; }
.tc-ach li { display: flex; align-items: center; gap: 10px; padding: 6px 0; opacity: .6; }
.tc-ach li.done { opacity: 1; }
.tc-ach-icon { font-size: 18px; }
.tc-ach-r { margin-left: auto; white-space: nowrap; }

/* ---- modal, viewer ---------------------------------------------------------------- */
.tc-modal { position: fixed; inset: 0; z-index: 130; background: rgba(6, 9, 14, .72); display: flex; align-items: center; justify-content: center; padding: 12px; }
.tc-modal-box { background: var(--panel); color: var(--text); border-radius: 14px; padding: 14px 16px 18px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; max-width: min(780px, 100%); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.tc-modal-wide .tc-modal-box { width: min(1040px, 100%); max-width: none; }
.tc-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.tc-modal-head strong { font-size: 16px; }
.tc-grid-modal { max-height: none; }
.tc-viewer { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
.tc-stage { display: flex; justify-content: center; padding: 8px 6px 14px; }
.tc-viewer-side { flex: 1 1 220px; min-width: 0; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.tc-viewer-actions { flex-wrap: wrap; gap: 6px; }
.tc-viewer-extra:empty { display: none; }
.tc-card-page { padding: 18px; }

/* ---- pack opening ------------------------------------------------------------------- */
.tc-modal-pack .tc-modal-box { width: min(1240px, 100%); max-width: none; background: radial-gradient(120% 80% at 50% 0%, var(--accent-soft), transparent 70%), var(--panel); }
.pk-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pk-hint { margin: 0; }
.pk-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 100%; }
.pk-card { --pkw: 210px; width: var(--pkw); aspect-ratio: 5 / 7; position: relative; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1100px; animation: pk-deal .55s cubic-bezier(.2, .8, .25, 1.1) both; animation-delay: calc(var(--i) * 110ms); border-radius: 12px; }
.pk-card .tc { --tcw: 100%; }
.pk-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3, .7, .2, 1); }
.pk-card.revealed .pk-flip { transform: rotateY(180deg); }
.pk-cover, .pk-real { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pk-real { transform: rotateY(180deg); }
.pk-cover {
	border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff;
	background:
		radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .25), transparent 45%),
		repeating-conic-gradient(from 0deg at 50% 42%, rgba(255, 255, 255, .07) 0 8deg, transparent 8deg 16deg),
		linear-gradient(160deg, #e2662a, #7e270a);
	box-shadow: inset 0 0 0 6px #f4ead8, inset 0 0 0 8px rgba(0, 0, 0, .25), 0 10px 24px rgba(0, 0, 0, .3);
	transition: transform .2s;
}
.pk-card:hover:not(.revealed) .pk-cover { transform: translateY(-4px); }
.pk-cover-ball { font-size: 46px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.pk-cover-name { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 0 14px; }
.pk-new, .pk-dupe { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 11px; font-weight: 900; letter-spacing: .1em; padding: 2px 9px; border-radius: 999px; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.pk-new { background: #19b36b; color: #fff; }
.pk-dupe { background: var(--panel); color: var(--dim); border: 1px solid var(--line); }
/* The halo of a rare pull is a pseudo-element whose opacity fades (a compositor animation); the old
   one animated filter: drop-shadow on the whole card, which re-rasterised it every frame. */
.pk-card.revealed:is(.tier-rare, .tier-epic, .tier-legendary, .tier-mythic, .pk-moment, .pk-ultra)::before {
	content: ""; position: absolute; inset: 3% 4%; z-index: -1; border-radius: 5% / 3.6%; pointer-events: none; box-shadow: 0 0 20px 3px var(--tier); opacity: 0; animation: pk-glow-rare 1.4s ease-out .5s both;
}
.pk-card.revealed:is(.tier-epic, .tier-legendary, .tier-mythic, .pk-moment, .pk-ultra)::before { box-shadow: 0 0 30px 6px var(--tier); animation: pk-glow 1.8s ease-out .5s both; }
.pk-card.revealed.tier-epic::after, .pk-card.revealed.tier-legendary::after, .pk-card.revealed.tier-mythic::after {
	content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, var(--tier) 0%, transparent 62%); opacity: 0; animation: pk-burst 1.6s ease-out .45s both;
}
.pk-still, .pk-still .pk-flip, .pk-still .pk-real, .pk-still::after, .pk-still::before { animation: none !important; transition: none !important; }
.pk-still.revealed::before { opacity: .55 !important; }
@keyframes pk-deal { from { opacity: 0; transform: translateY(-60px) rotate(-10deg) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes pk-glow { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: .55; } }
@keyframes pk-glow-rare { 0% { opacity: 0; } 40% { opacity: .9; } 100% { opacity: .4; } }
@keyframes pk-burst { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .75; } 100% { opacity: 0; transform: scale(1.25); } }
.pk-actions { justify-content: center; }
.pk-summary { text-align: center; }
.pk-summary .row { justify-content: center; flex-wrap: wrap; gap: 8px; }
.tc-set-done { color: var(--gold); font-weight: 700; }

@media (max-width: 820px) {
	.tc-rarity-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.pk-grid { gap: 12px 10px; }
	.pk-card { --pkw: calc(50% - 6px); }
	.tc-shop { grid-template-columns: minmax(0, 1fr); }
	.tc-pack-art { flex-basis: 64px; height: 96px; }
	.tc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tc-grid .tc-sm, .tc-grid .tc-cell { --tcw: min(160px, 100%); width: var(--tcw); }
	.tc-cell { width: 100%; }
	.tc-cell .tc { --tcw: 100%; max-width: 170px; }
	.tc-search { width: 100%; }
	.tc-five { gap: 10px; justify-content: center; }
	.tc-five .tc-sm { --tcw: 128px; }
	.tc-modal { padding: 6px; }
	.tc-modal-box { padding: 12px 10px 16px; }
	.tc-cotd { justify-content: center; }
	.tc-sets { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.tc-front, .tc-foil, .pk-card, .pk-real, .pk-card::after, .pk-card::before { animation: none !important; }
	.tc-flip, .pk-flip, .tc-tilt { transition: none !important; }
}

/* ---- new sections ------------------------------------------------------------------- */
.tc-tabs .tabs { flex-wrap: wrap; }
.tc-chip-btn { cursor: pointer; font: inherit; font-size: 13px; color: var(--text); border-color: var(--gold); background: linear-gradient(120deg, rgba(184, 134, 11, .16), transparent 70%), var(--panel); }
.tc-up { color: var(--good); font-size: 12px; }
.tc-down { color: var(--bad); font-size: 12px; }
.tc-binder-top { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin-bottom: 12px; }
.tc-binder-top .tc-rarity-strip { flex: 1 1 520px; margin: 0; min-width: 0; }
.tc-valuebox { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 170px; }
.tc-big { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tc-trend svg { display: block; width: 140px; height: 30px; }
.pk-par { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 11px; font-weight: 900; letter-spacing: .06em; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: #111; color: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.pk-par-r { background: linear-gradient(110deg, #ff9ed2, #9ef3ff, #fff59e, #c6a6ff); color: #1b1030; }
.pk-par-g { background: linear-gradient(180deg, #ffe08a, #c89324); color: #2a1d00; }
.pk-par-b { background: #050506; color: #e8c25a; box-shadow: 0 0 0 1px #e8c25a, 0 3px 10px rgba(232, 194, 90, .5); }
.pk-cover-hot { background:
	radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .35), transparent 45%),
	repeating-conic-gradient(from 0deg at 50% 42%, rgba(255, 255, 255, .1) 0 8deg, transparent 8deg 16deg),
	linear-gradient(160deg, #6b2ad6, #1d0b52); }
.tc-pack-night .tc-pack-art { background: linear-gradient(160deg, #1f2a44, #0b1020); }
.tc-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 10px; }
.tc-player-cards p { margin: 4px 0 0; }

/* market */
.tc-market-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.tc-market-head > p { flex: 1 1 300px; margin: 0; }
.tc-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; margin-bottom: 12px; }
.tc-offer { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tc-offer.done { opacity: .6; }
.tc-offer-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.tc-offer-cards { display: flex; align-items: center; justify-content: center; gap: 10px; }
.tc-offer-cards .tc-sm { --tcw: 128px; }
.tc-offer-arrow { font-size: 26px; color: var(--dim); }
.tc-offer-coins { width: 128px; aspect-ratio: 5 / 7; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed var(--line); border-radius: 10px; font-size: 18px; }

/* challenges and pass */
.tc-pass-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tc-pass-head h2 { margin: 2px 0 4px; }
.tc-pass-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.tc-pass-tile { border: 1px solid var(--line); border-radius: 8px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; background: var(--panel-2); min-width: 0; }
.tc-pass-tile b { font-size: 15px; white-space: nowrap; }
.tc-pass-tile .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tc-pass-tile.got { opacity: .55; }
.tc-pass-tile.now { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); background: linear-gradient(160deg, rgba(184, 134, 11, .18), transparent), var(--panel); }
.tc-chals { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.tc-chal { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; min-width: 0; }
.tc-chal.ready { border-color: var(--gold); }
.tc-chal.done { opacity: .65; }
.tc-chal-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* battle */
.tc-battle-setup .controls { align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.tc-bt { display: flex; flex-direction: column; gap: 12px; }
.tc-bt-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tc-bt-score { display: flex; align-items: baseline; gap: 8px; font-weight: 700; }
.tc-bt-score b { font-size: 28px; color: var(--accent); }
.tc-bt-score i { font-style: normal; color: var(--dim); }
.tc-bt-cat { font-size: 15px; }
.tc-bt-hand { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.tc-bt-duel { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.tc-bt-vs { font-size: 28px; color: var(--dim); }
.tc-win .tc { --tc-glow: 0 0 14px var(--good); }
.tc-win .tc-cell-cap { color: var(--good); }
.tc-bt-log { margin: 0; padding-left: 20px; font-size: 13px; color: var(--dim); }
.tc-bt-log li.win { color: var(--good); }
.tc-bt-log li.loss { color: var(--bad); }

/* showcase */
.tc-showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: 14px; justify-content: center; margin: 8px 0 14px; }
.tc-show-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.tc-show-slot .tc { --tcw: 100%; max-width: 170px; }
.tc-show-export { display: inline-flex; flex-direction: column; gap: 16px; padding: 24px; background: radial-gradient(120% 80% at 50% 0%, #2a2f3a, #0d0f14); color: #fff; font-family: var(--sans); }
.tc-show-title { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.tc-show-title b { font-size: 22px; }
.tc-show-title span { opacity: .7; }
.tc-show-wall { display: grid; grid-template-columns: repeat(3, 230px); gap: 16px; }
.tc-show-empty { border: 2px dashed rgba(255, 255, 255, .2); border-radius: 12px; filter: none; }

/* stats */
.tc-bars { display: flex; flex-direction: column; gap: 6px; }
.tc-bar-row { display: grid; grid-template-columns: minmax(0, 150px) 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.tc-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-bar-n { text-align: right; min-width: 64px; }

@media (max-width: 560px) {
	.tc-pass-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.tc-offers, .tc-chals { grid-template-columns: minmax(0, 1fr); }
	.tc-offer-cards .tc-sm, .tc-offer-coins { --tcw: 118px; width: 118px; }
	.tc-showcase { gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tc-bt-hand .tc-sm { --tcw: 118px; }
	.tc-bar-row { grid-template-columns: minmax(0, 110px) 1fr auto; }
}
@media (prefers-reduced-motion: reduce) {
	.tc-par, .tc-portrait { transform: none !important; transition: none !important; }
}

/* =====================================================================
   Team logos, team-colored frames, new parallels and the themed inserts
   ===================================================================== */
/* Team-colored frame on plain season cards; a team-color pinstripe inside the frame. */
.tier-common:not(.par):not(.ins) .tc-front { background: linear-gradient(135deg, var(--c0), color-mix(in srgb, var(--c1) 70%, var(--c0)) 50%, var(--c0)); box-shadow: inset 0 0 0 .5cqw rgba(255, 255, 255, .35); }
.tc:not(.ins):not(.par):not(.tier-mythic) .tc-bg { box-shadow: inset 0 0 0 .45cqw var(--c1), inset 0 0 0 .9cqw rgba(0, 0, 0, .3); }
/* Logo watermark behind the portrait. */
.tc-water-logo { position: absolute; left: 50%; top: 38%; width: 74cqw; height: 74cqw; object-fit: contain; transform: translate(-50%, -50%) rotate(-8deg); opacity: .16; filter: saturate(.6) drop-shadow(0 0 2cqw rgba(0, 0, 0, .3)); }
.tier-mythic .tc-water-logo, .par-b .tc-water-logo { filter: grayscale(1) sepia(1) saturate(3) hue-rotate(5deg); opacity: .12; }
.ins-mo .tc-water-logo { opacity: .24; top: 34%; }
.tc-back-num { display: flex; align-items: center; gap: 2cqw; }
.tc-back-logo { width: 9cqw; height: 9cqw; object-fit: contain; opacity: 1; filter: drop-shadow(0 .3cqw .6cqw rgba(0, 0, 0, .4)); }

/* Sweep of light across every insert and parallel; follows the pointer on hover. */
.ins .tc-front::after, .par .tc-front::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit; mix-blend-mode: soft-light;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 48%, rgba(255, 255, 255, .15) 52%, transparent 62%);
	background-size: 260% 100%; background-position: 70% 0;
}
.tc-lg.ins .tc-front::after, .tc-lg.par .tc-front::after { animation: tc-sweep 5.5s ease-in-out infinite; }
.tc-hover.ins .tc-front::after, .tc-hover.par .tc-front::after { animation: none; background-position: calc(160% - var(--mx, 50%) * 1.2) 0; }
@keyframes tc-sweep { 0%, 35% { background-position: 140% 0; } 75%, 100% { background-position: -40% 0; } }

/* Parallels: Blue /99 (prizm), Orange /25 (lava refractor). */
.par-p .tc-front { background: conic-gradient(from 160deg, #0a2a6b, #2f7cff, #8fd3ff, #1b4fd8, #6fe3ff, #0a2a6b); }
.par-p .tc-bg::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(60deg, rgba(143, 211, 255, .12) 0 .5cqw, transparent .5cqw 3cqw), repeating-linear-gradient(-60deg, rgba(143, 211, 255, .1) 0 .5cqw, transparent .5cqw 3cqw); }
.par-p { --rib: linear-gradient(90deg, #1b4fd8, #6fe3ff); --rib-ink: #04112e; }
.par-o .tc-front { background: linear-gradient(125deg, #5a1600, #ff6a00 22%, #ffd08a 38%, #ff4d00 56%, #ffb347 74%, #6a1a00); background-size: 220% 220%; }
.par-o .tc-bg { box-shadow: inset 0 0 0 .55cqw #ff8a2a, inset 0 0 5cqw rgba(255, 106, 0, .4); }
.par-o { --rib: linear-gradient(90deg, #ff4d00, #ffb347); --rib-ink: #2a0b00; }
.tc-kind-tag.par-p, .pk-par-p { background: linear-gradient(110deg, #1b4fd8, #6fe3ff); color: #04112e; border-color: transparent; }
.tc-kind-tag.par-o, .pk-par-o { background: linear-gradient(110deg, #ff4d00, #ffb347); color: #2a0b00; border-color: transparent; }
.par-p .tc-back { background: conic-gradient(from 160deg, #0a2a6b, #2f7cff, #8fd3ff, #1b4fd8, #0a2a6b); }
.par-o .tc-back { background: linear-gradient(125deg, #5a1600, #ff6a00 30%, #ffd08a 50%, #ff4d00 70%, #6a1a00); }

/* ---- Moment cards: headline, big stat callout, team logo, starburst ---- */
.ins-mo { --rib: linear-gradient(90deg, #ff2d55, #ff9f0a); --rib-ink: #fff; }
.ins-mo .tc-front { background: linear-gradient(150deg, #0b0f1e, color-mix(in srgb, var(--c0) 60%, #0b0f1e) 45%, #ff2d55 80%, #ff9f0a); }
.ins-mo .tc-bg { background:
	repeating-conic-gradient(from 0deg at 50% 36%, rgba(255, 255, 255, .07) 0 5deg, transparent 5deg 12deg),
	radial-gradient(60% 40% at 50% 36%, color-mix(in srgb, var(--c1) 45%, transparent), transparent 75%),
	linear-gradient(175deg, color-mix(in srgb, var(--c0) 70%, #05070f), #05070f 85%);
	box-shadow: inset 0 0 0 .6cqw #ff9f0a, inset 0 0 0 1.2cqw rgba(0, 0, 0, .45); }
.tc-mo { position: absolute; right: 3.5cqw; top: 52cqw; width: 33cqw; padding: 2cqw 2.2cqw 2.2cqw; border-radius: 2.6cqw; text-align: center;
	background: linear-gradient(160deg, rgba(10, 12, 24, .82), rgba(10, 12, 24, .6)); box-shadow: inset 0 0 0 .4cqw rgba(255, 159, 10, .9), 0 1cqw 3cqw rgba(0, 0, 0, .5); backdrop-filter: blur(3px); }
.tc-mo-head { font-size: 2.6cqw; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; line-height: 1.15; color: #ffd27a; }
.tc-mo-big { margin-top: 1cqw; font-size: 10.5cqw; font-weight: 900; line-height: 1; letter-spacing: -.03em; white-space: nowrap;
	background: linear-gradient(180deg, #fff, #ffd27a 60%, #ff9f0a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tc-mo-big:has(+ .tc-mo-unit) { min-height: 1em; }
.tc-mo-unit { margin-top: .8cqw; font-size: 2.2cqw; font-weight: 800; letter-spacing: .14em; opacity: .85; }
.ins-mo .tc-sub { color: #ffd27a; opacity: 1; }
.ins-mo .tc-back { background: linear-gradient(150deg, #0b0f1e, #ff2d55 70%, #ff9f0a); }
.tc-mo-back { margin: 1.6cqw 0; padding: 1.4cqw 2cqw; border-radius: 1.6cqw; font-size: 2.7cqw; line-height: 1.35; background: rgba(255, 159, 10, .16); box-shadow: inset .6cqw 0 0 #ff9f0a; }
.tc-mo-back b { color: #ffd27a; }

/* ---- Autograph and patch panels ---- */
.tc-auto { position: absolute; right: 4cqw; top: 73cqw; width: 38cqw; padding: 1.6cqw 2cqw 1.2cqw; border-radius: 1.6cqw; background: linear-gradient(180deg, #fbf7ec, #ece3cc); color: #13204d; box-shadow: 0 .8cqw 2cqw rgba(0, 0, 0, .45), inset 0 0 0 .35cqw rgba(0, 0, 0, .12); transform: rotate(-3deg); }
.tc-auto span { display: block; font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive; font-size: 6.4cqw; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.tc-auto i { display: block; font-style: normal; font-size: 1.7cqw; font-weight: 800; letter-spacing: .14em; opacity: .6; margin-top: .4cqw; border-top: .25cqw solid rgba(19, 32, 77, .35); padding-top: .4cqw; }
.tc-patch { position: absolute; left: 5cqw; top: 58cqw; width: 19cqw; height: 19cqw; border-radius: 2cqw; display: grid; place-items: center; overflow: hidden;
	background: repeating-linear-gradient(90deg, var(--c0) 0 1.2cqw, color-mix(in srgb, var(--c0) 80%, #000) 1.2cqw 2cqw), var(--c0);
	box-shadow: 0 0 0 .7cqw #e9e4d6, 0 0 0 1cqw rgba(0, 0, 0, .35), 0 1cqw 2cqw rgba(0, 0, 0, .45); }
.tc-patch::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, var(--c1) 38% 50%, transparent 50% 58%, var(--c2) 58% 66%, transparent 66%); opacity: .9; }
.tc-patch span { position: relative; font-size: 8cqw; font-weight: 900; color: #fff; -webkit-text-stroke: .35cqw var(--c1); text-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .5); }

/* ---- Duo: partner portrait in a roundel ---- */
.tc-duo-mate { position: absolute; left: 3cqw; top: 60cqw; width: 22cqw; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.tc-duo-mate .tc-duo-face { position: relative; left: auto; top: auto; width: 22cqw; height: 22cqw; transform: none; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, var(--c1), var(--c0)); box-shadow: 0 0 0 .7cqw #fff, 0 0 0 1.2cqw var(--c0), 0 1cqw 2cqw rgba(0, 0, 0, .5); -webkit-mask-image: none; mask-image: none; }
.tc-duo-mate .tc-duo-face.tc-has-photo { left: auto; right: auto; top: auto; height: 22cqw; }
.tc-duo-name { margin-top: 1.4cqw; font-size: 2.8cqw; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; padding: .3cqw 1.4cqw; border-radius: 1cqw; background: rgba(0, 0, 0, .6); white-space: nowrap; }
.ins-duo .tc-front { background: linear-gradient(135deg, var(--c0) 0 49.5%, #fff 49.5% 50.5%, var(--c1) 50.5%); }
.ins-duo .tc-bg { background: linear-gradient(118deg, color-mix(in srgb, var(--c0) 85%, #000) 0 50%, color-mix(in srgb, var(--c1) 55%, #000) 50%); box-shadow: inset 0 0 0 .6cqw #fff; }
.ins-duo { --rib: linear-gradient(90deg, var(--c0), var(--c1)); --rib-ink: #fff; }

/* ---- the other themed inserts ---- */
.ins-rk { --rib: linear-gradient(90deg, #00c2a8, #b3ff6b); --rib-ink: #002a22; }
.ins-rk .tc-front { background: linear-gradient(135deg, #004d40, #00e5b8 30%, #e8ffd0 50%, #00c2a8 70%, #004d40); }
.ins-rk .tc-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(179, 255, 107, .35) 0 .6cqw, transparent .7cqw) 0 0 / 7cqw 7cqw; }
.ins-dg { --rib: linear-gradient(90deg, #8fe9ff, #e3f9ff, #8fb8ff); --rib-ink: #06223a; }
.ins-dg .tc-front { background: conic-gradient(from 45deg, #bff4ff, #6ab8ff, #f2fdff, #7fd6ff, #c9b8ff, #bff4ff); }
.ins-dg .tc-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(60deg, rgba(255, 255, 255, .12) 25%, transparent 25% 75%, rgba(255, 255, 255, .12) 75%) 0 0 / 9cqw 15.6cqw, linear-gradient(-60deg, rgba(255, 255, 255, .1) 25%, transparent 25% 75%, rgba(255, 255, 255, .1) 75%) 0 0 / 9cqw 15.6cqw; }
.ins-im { --rib: linear-gradient(90deg, #3a3f47, #9aa3ad); --rib-ink: #fff; }
.ins-im .tc-front { background: repeating-linear-gradient(90deg, #6b737c 0 .3cqw, #8b939c .3cqw .6cqw, #5d646c .6cqw 1cqw); box-shadow: inset 0 0 0 .6cqw #2c3036; }
.ins-im .tc-bg { box-shadow: inset 0 0 0 .6cqw #c3cad2, inset 0 0 0 1.4cqw rgba(0, 0, 0, .45); }
.ins-ss { --rib: linear-gradient(90deg, #00b84a, #c6ff3d); --rib-ink: #062a10; }
.ins-ss .tc-front { background: linear-gradient(135deg, #04361a, #19d36a 35%, #d7ff7a 50%, #19d36a 65%, #04361a); }
.ins-ss .tc-bg::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 36%, rgba(198, 255, 61, .14) 0 .5cqw, transparent .5cqw 6cqw); }
.ins-rp { --rib: linear-gradient(90deg, #3a0ca3, #7209b7); --rib-ink: #fff; }
.ins-rp .tc-front { background: linear-gradient(135deg, #14052e, #5a189a 40%, #c77dff 55%, #3c096c 75%, #14052e); }
.ins-rp .tc-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 60%, rgba(199, 125, 255, .2) 62% 68%, transparent 70%) 0 0 / 10cqw 10cqw; }
.ins-ph { --rib: linear-gradient(90deg, #d00000, #ffba08); --rib-ink: #fff; }
.ins-ph .tc-front { background: linear-gradient(0deg, #370617, #d00000 30%, #f48c06 60%, #ffba08 80%, #fff3b0); background-size: 100% 200%; background-position: 0 50%; }
.tc-hover.ins-ph .tc-front, .tc-lg.ins-ph .tc-front { animation: tc-flame 3.5s ease-in-out infinite alternate; }
.ins-ph .tc-bg { box-shadow: inset 0 0 0 .6cqw #ffba08, inset 0 -10cqw 10cqw -4cqw rgba(244, 140, 6, .5); }
@keyframes tc-flame { from { background-position: 0 100%; } to { background-position: 0 0; } }
.ins-dy { --rib: linear-gradient(90deg, #240046, #c9a646); --rib-ink: #fff; }
.ins-dy .tc-front { background: linear-gradient(135deg, #240046, #c9a646 25%, #3c096c 50%, #f1d27a 75%, #240046); }
.ins-dy .tc-bg { box-shadow: inset 0 0 0 .6cqw #f1d27a, inset 0 0 0 1.4cqw #240046, inset 0 0 0 1.7cqw #c9a646; }
.ins-tb { --rib: linear-gradient(90deg, #7a4e1d, #d9b77a); --rib-ink: #fff8ea; }
.ins-tb .tc-front { background: #efe2c4; box-shadow: inset 0 0 0 .6cqw #7a4e1d, inset 0 0 0 1.4cqw #efe2c4, inset 0 0 0 1.7cqw #7a4e1d; }
.ins-tb .tc-bg { filter: sepia(.55); background: radial-gradient(rgba(0, 0, 0, .14) 22%, transparent 24%) 0 0 / 2cqw 2cqw, linear-gradient(172deg, var(--c0), var(--deep)); }
.ins-tb .tc-portrait { filter: sepia(.6) contrast(1.08) saturate(.8); }
.ins-hof { --rib: linear-gradient(90deg, #4a2c0a, #d4a35a); --rib-ink: #fff4dc; }
.ins-hof .tc-front { background: linear-gradient(135deg, #3d2408, #cd8f3c 22%, #ffe1a6 40%, #9c6224 58%, #f0c27a 78%, #3d2408); }
.ins-hof .tc-bg { background: radial-gradient(70% 45% at 50% 34%, rgba(255, 225, 166, .35), transparent 72%), linear-gradient(172deg, color-mix(in srgb, var(--base) 60%, #2a1a08), color-mix(in srgb, var(--deep) 55%, #120a02)); box-shadow: inset 0 0 0 .6cqw #f0c27a, inset 0 0 0 1.4cqw rgba(0, 0, 0, .5); }
.ins-fw { --rib: linear-gradient(90deg, #6d597a, #e56b6f, #eaac8b); --rib-ink: #fff; }
.ins-fw .tc-front { background: linear-gradient(180deg, #355070, #6d597a 30%, #b56576 55%, #e56b6f 75%, #eaac8b); }
.ins-fw .tc-portrait { filter: saturate(.75); }
.ins-hof .tc-back, .ins-dy .tc-back { background: linear-gradient(135deg, #3d2408, #cd8f3c 30%, #9c6224 60%, #3d2408); }
.ins-ph .tc-back { background: linear-gradient(0deg, #370617, #d00000 50%, #ffba08); }

/* Pack reveal: rarer pulls get a bigger burst. */
.pk-card.revealed.tier-mythic::after, .pk-card.revealed.pk-moment::after, .pk-card.revealed.pk-v-b::after, .pk-card.revealed.pk-v-o::after {
	content: ""; position: absolute; inset: -18%; z-index: -1; pointer-events: none; border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, rgba(255, 210, 122, .55) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%);
	animation: pk-rays 6s linear infinite;
}
.pk-card.revealed.pk-moment::after { background: repeating-conic-gradient(from 0deg, rgba(255, 45, 85, .5) 0 6deg, transparent 6deg 18deg); }
@keyframes pk-rays { to { transform: rotate(360deg); } }
.tc-cell-dl { margin-left: 4px; padding: 0 6px; font-size: 11px; line-height: 18px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; }
.tc-cell-dl:hover { border-color: var(--accent); }
.tc-team-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; padding: 6px 10px; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--c0) 22%, var(--panel)), var(--panel)); border: 1px solid var(--line); font-weight: 700; }
.tc-team-group img { width: 28px; height: 28px; object-fit: contain; }
.tc-team-group span { font-weight: 400; color: var(--muted); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
	.ins .tc-front::after, .par .tc-front::after, .ins-ph .tc-front, .par-o .tc-front, .pk-card::after { animation: none !important; }
}
.tc-static .tc-front::after { animation: none; display: none; }

/* ---- licensed display fonts for the special inserts (base cards keep the UI font) ---- */
@font-face { font-family: "TC Freshman"; src: url("../fonts/Freshman.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "TC Varsity"; src: url("../fonts/varsity_regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "TC Excluded"; src: url("../fonts/Excluded.ttf") format("truetype"); font-style: normal; font-display: swap; }
@font-face { font-family: "TC Excluded"; src: url("../fonts/ExcludedItalic.ttf") format("truetype"); font-style: italic; font-display: swap; }
@font-face { font-family: "TC Excelsior"; src: url("../fonts/ExcelsiorSans.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "TC Ferro"; src: url("../fonts/FerroRosso.ttf") format("truetype"); font-display: swap; }
/* clean labels on every insert / parallel */
.ins .tc-ribbon, .par .tc-ribbon, .ins .tc-mo-unit, .ins .tc-duo-name { font-family: "TC Excelsior", var(--sans); }
/* collegiate / throwback / rookie */
.ins-tb .tc-ln, .ins-rk .tc-ln, .ins-dg .tc-ln, .ins-tb .tc-patch span { font-family: "TC Varsity", var(--sans); font-weight: 400; letter-spacing: .02em; }
.ins-tb .tc-ribbon b, .ins-rk .tc-ribbon b, .ins-dg .tc-ribbon b { font-family: "TC Freshman", var(--sans); font-weight: 400; letter-spacing: .06em; }
/* premium / legend */
.ins-leg .tc-ln, .ins-hof .tc-ln, .ins-dy .tc-ln, .ins-icon .tc-ln, .ins-fw .tc-ln { font-family: "TC Ferro", var(--sans); font-weight: 400; letter-spacing: .01em; font-size: calc(var(--ln-fs, 11cqw) * .8); }
/* modern / prizm */
.ins-mo .tc-ln, .ins-rb .tc-ln, .ins-ss .tc-ln, .ins-rp .tc-ln, .ins-ph .tc-ln, .ins-duo .tc-ln, .ins-im .tc-ln, .ins-as .tc-ln, .ins-po .tc-ln, .ins-aw .tc-ln, .par .tc-ln, .ins-mo .tc-mo-big { font-family: "TC Excluded", var(--sans); font-style: italic; font-weight: 400; letter-spacing: 0; }
/* back: per-game and shooting line */
.tc-line { margin: 1.4cqw 0 .6cqw; padding: 1cqw 1.4cqw 1.2cqw; border-radius: 1.6cqw; background: rgba(0, 0, 0, .3); }
.tc-line-k { display: block; font-size: 2.1cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: .6cqw; }
.tc-line-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6cqw .4cqw; }
.tc-line-grid div { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.tc-line-grid b { font-size: 3.3cqw; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tc-line-grid span { font-size: 1.8cqw; font-weight: 800; letter-spacing: .08em; opacity: .7; }
/* workshop */
.tc-forge-rows { display: flex; flex-direction: column; gap: 8px; }
.tc-forge-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tc-forge-row .btn { margin-left: auto; }
.tc-forge-arrow { color: var(--muted); }
.tc-forge-result { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tc-missions { display: flex; flex-direction: column; gap: 8px; }
.tc-mission { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.tc-mission.done { opacity: .65; }
@media (max-width: 560px) { .tc-mission { grid-template-columns: minmax(0, 1fr) auto; } .tc-mission .tc-set-bar { grid-column: 1 / -1; } }

/* =====================================================================
   Program design (Diamond-Dynasty / flagship-card language)
   Full-bleed art inside a clean tier frame; a series plate (the program),
   a team badge, a title bar for the card's honor, a big name bar.
   Backs are cardboard with a stat table, a trophy case and a fact panel.
   These rules override the older layout above.
   ===================================================================== */
.tc { --frame: linear-gradient(135deg, #6b3f1d, #c98a4f 30%, #f0c08a 50%, #a8683a 70%, #5a3216); --frame-ink: #2a1606; --edge: #e2a86a; --title: linear-gradient(90deg, #2b2f38, #474d5a); --title-ink: #fff; }
.tc.tier-uncommon { --frame: linear-gradient(135deg, #6f7781, #e9eef3 28%, #9aa4ae 48%, #f7f9fb 64%, #727b85); --frame-ink: #1a1f25; --edge: #dfe6ec; }
.tc.tier-rare { --frame: linear-gradient(135deg, #7c5c12, #f8e08e 22%, #b8892a 44%, #fff1b8 62%, #94701c); --frame-ink: #2a1d00; --edge: #f3d27a; }
.tc.tier-epic { --frame: linear-gradient(135deg, #3b6f9e, #dff6ff 22%, #8fd0ff 40%, #ffffff 55%, #6fa8e0 72%, #c9ecff 88%, #3b6f9e); --frame-ink: #082040; --edge: #bfe8ff; }
.tc.tier-legendary { --frame: linear-gradient(135deg, #6a0f12, #e0452c 25%, #ffcf6a 45%, #ff7a2f 62%, #9a1a14); --frame-ink: #2a0500; --edge: #ffb35a; }
.tc.tier-mythic { --frame: linear-gradient(140deg, #050506, #2b2a2f 40%, #050506 60%, #1d1c20); --frame-ink: #e8c25a; --edge: #e8c25a; }

/* frame: the tier material, unless an insert/parallel paints its own */
.tc:not(.ins):not(.par) .tc-front { background: var(--frame); box-shadow: inset 0 0 0 .4cqw rgba(0, 0, 0, .25); animation: none; }
.tc-front::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
	background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .0) 0 3cqw, rgba(255, 255, 255, .14) 3cqw 3.3cqw); mix-blend-mode: overlay; }

/* full-bleed art: team colors, light rays, a fine halftone */
.tc-bg, .tc-par { inset: 2.4cqw; border-radius: 2.2cqw; }
.tc:not(.ins):not(.par):not(.tier-mythic) .tc-bg {
	background:
		radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .0) 0 30%, rgba(0, 0, 0, .0) 30%),
		radial-gradient(rgba(0, 0, 0, .16) 28%, transparent 30%) 0 0 / 1.6cqw 1.6cqw,
		repeating-conic-gradient(from -8deg at 72% 22%, rgba(255, 255, 255, .07) 0 6deg, transparent 6deg 16deg),
		radial-gradient(80% 55% at 60% 30%, color-mix(in srgb, var(--c1) 55%, transparent), transparent 70%),
		linear-gradient(160deg, var(--c0) 0%, var(--base) 48%, var(--deep) 100%);
	box-shadow: inset 0 0 0 .35cqw rgba(255, 255, 255, .5), inset 0 0 0 .8cqw rgba(0, 0, 0, .25);
}
.tc-water { top: 8cqw; right: -3cqw; font-size: 70cqw; color: rgba(255, 255, 255, .08); }
.tc-water-logo { top: 32%; left: 62%; width: 82cqw; height: 82cqw; opacity: .14; }
.tc-mark-trophy.tc-trophy-art { position: absolute; left: 50%; top: 10cqw; width: 70cqw; transform: translateX(-50%); opacity: .22; }
.tc-trophy-art svg { width: 100%; height: auto; }
.tc-trophy-art .m1, .tc-trophy-art .m3 { fill: #ffe39a; } .tc-trophy-art .m2 { stroke: #ffe39a; }

/* portrait: big, bottom-anchored, breaking the art box */
.tc-portrait { left: 4cqw; top: 13cqw; width: 92cqw; height: 104cqw; }
.tc-portrait.tc-has-photo { left: 2.4cqw; right: 2.4cqw; top: 12cqw; height: 92cqw; background: none;
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent 100%); }

/* top: series plate and team badge */
.tc-top { left: 2.4cqw; right: 4.4cqw; top: 4.4cqw; align-items: flex-start; gap: 2cqw; z-index: 2; }
.tc-series { display: flex; flex-direction: column; padding: 1.2cqw 6cqw 1.3cqw 3cqw; max-width: 66cqw; min-width: 0;
	background: linear-gradient(180deg, #14171d, #05070a); border-top: .6cqw solid var(--edge); clip-path: polygon(0 0, 100% 0, calc(100% - 4cqw) 100%, 0 100%);
	box-shadow: 0 .8cqw 1.6cqw rgba(0, 0, 0, .4); }
.tc-series b { font-family: "TC Excluded", var(--sans); font-style: italic; font-weight: 400; font-size: 5.4cqw; line-height: 1; letter-spacing: .02em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-series span { font-family: "TC Excelsior", var(--sans); font-size: 2.4cqw; letter-spacing: .2em; color: var(--edge); margin-top: .5cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-topright { margin-left: auto; gap: 1.4cqw; align-items: center; }
.tc .tc-team { width: 15cqw; height: 15cqw; padding: 0; border-radius: 50%; justify-content: center; border: .7cqw solid var(--edge); font-size: 3.4cqw; box-shadow: 0 .8cqw 1.8cqw rgba(0, 0, 0, .45); overflow: hidden; }
.tc .tc-team.tc-team-logo { background: #fff !important; }
.tc .tc-team .tc-logo { width: 11cqw; height: 11cqw; }
.tc .tc-team.tc-team-logo .tc-team-abbr { display: none; }
.tc-mark { display: block; line-height: 0; }
.tc-mark svg { width: 100%; height: 100%; overflow: visible; }
.tc-mark text { font-family: "TC Excelsior", var(--sans); font-weight: 700; font-size: 6px; fill: #fff; letter-spacing: .04em; }
.tc-mark text.big { font-size: 15px; font-weight: 900; }
.tc-emblem { width: 13cqw; filter: drop-shadow(0 .6cqw 1cqw rgba(0, 0, 0, .5)); }
.tc-mark-cup .m1 { fill: #f1c84b; } .tc-mark-cup .m2 { stroke: #f1c84b; } .tc-mark-cup .m3 { fill: #0b3d91; } .tc-mark-cup .m4 { fill: #fff6d0; }
.tc-mark-rc .m3 { fill: #fff; } .tc-mark-rc .m1 { fill: #c8102e; }
.tc-mark-hof .m3 { fill: #c9a646; } .tc-mark-hof .m1 { fill: #1a140a; } .tc-mark-hof .m4 { fill: #e8c25a; }

/* bottom: banner, title bar, name bar, stats, footer: one flowing plate */
.tc .tc-plate { top: auto; left: 2.4cqw; right: 2.4cqw; bottom: 2.4cqw; padding: 12cqw 0 0; display: flex; flex-direction: column; z-index: 2;
	border-radius: 0 0 2.2cqw 2.2cqw; overflow: hidden;
	background: linear-gradient(180deg, transparent 0, transparent 6.4cqw, rgba(5, 7, 10, .6) 11cqw, rgba(5, 7, 10, .92) 20cqw); }
.tc .tc-plate::before { display: none; }
.tc-banner { align-self: flex-start; display: inline-flex; align-items: center; gap: 1.2cqw; margin: 0 0 -.2cqw 3.4cqw; padding: .8cqw 3.6cqw .7cqw 2cqw; max-width: calc(100% - 8cqw);
	background: #c8102e; color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 2.4cqw) 100%, 0 100%); white-space: nowrap; overflow: hidden; }
.tc-banner b { font-family: "TC Excelsior", var(--sans); font-size: 2.7cqw; letter-spacing: .14em; font-weight: 700; }
.tc-banner span { font-size: 2.3cqw; font-weight: 700; letter-spacing: .12em; opacity: .85; }
.tc-banner .tc-mark { width: 3cqw; } .tc-banner .m1 { fill: #fff; }
.tc-banner.b-as { background: linear-gradient(90deg, #0b3d91, #1f63d8); }
.tc-banner.b-hof { background: linear-gradient(90deg, #8a6a1f, #e8c25a); color: #1a1205; }
.tc-banner.b-leader { background: linear-gradient(90deg, #c8102e, #ff4d3d); }
.tc-title { display: flex; align-items: center; gap: 1.6cqw; padding: 1cqw 3.4cqw; min-height: 7cqw; background: var(--title); color: var(--title-ink); box-shadow: inset 0 .3cqw 0 rgba(255, 255, 255, .35), inset 0 -.3cqw 0 rgba(0, 0, 0, .35); }
.tc-title .tc-mark { width: 4.6cqw; flex: 0 0 auto; }
.tc-title .m1, .tc-title .m3 { fill: currentColor; } .tc-title .m2 { stroke: currentColor; }
.tc-title-t { display: flex; flex-direction: column; min-width: 0; }
.tc-title-t b { font-family: "TC Excelsior", var(--sans); font-weight: 700; font-size: 3.2cqw; letter-spacing: .1em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-title-t span { font-size: 2.1cqw; font-weight: 800; letter-spacing: .1em; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-mvp .tc-title, .t-award .tc-title { --title: linear-gradient(90deg, #8a6a1f, #f4dc8a 35%, #c9a646 60%, #fff1bf 80%, #a87b16); --title-ink: #241800; }
.t-champ .tc-title { --title: linear-gradient(90deg, #1b1b1f, #3a3a42 40%, #1b1b1f); --title-ink: #f1d27a; }
.t-all .tc-title { --title: linear-gradient(90deg, #0b3d91, #2f6fd6); }
.t-as .tc-title { --title: linear-gradient(90deg, #0b3d91, #c8102e); }
.t-mile .tc-title { --title: linear-gradient(90deg, #00a3c4, #5b2bd6); }
.tc-namebar { display: flex; align-items: stretch; gap: 2.4cqw; padding: 2.2cqw 3.4cqw 0; }
.tc .tc-pos { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 11cqw; padding: .8cqw 1.2cqw; background: var(--frame); color: var(--frame-ink); text-shadow: none; border-radius: .8cqw; }
.tc .tc-pos b { font-family: "TC Excelsior", var(--sans); font-weight: 700; font-size: 4.4cqw; line-height: 1; }
.tc .tc-pos span { font-size: 2.3cqw; font-weight: 800; margin-top: .4cqw; opacity: .8; }
.tc-names { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; }
.tc .tc-fn { margin: 0; font-size: 3.2cqw; letter-spacing: .18em; font-weight: 700; opacity: .85; }
.tc .tc-ln { font-family: "UX Condensed", "Arial Narrow", var(--sans); font-weight: 400; font-size: var(--ln-fs, 12cqw); line-height: .9; letter-spacing: .01em; padding-top: .3em; margin-top: -.3em; text-shadow: 0 .4cqw 0 rgba(0, 0, 0, .5); }
.tc .tc-sub { margin: 1cqw 3.4cqw 0; font-size: 2.4cqw; letter-spacing: .1em; opacity: .75; }
.tc .tc-stats { position: static; margin: 1.6cqw 3.4cqw 0; padding: 1cqw 0; background: none; border-top: .3cqw solid rgba(255, 255, 255, .22); border-bottom: .3cqw solid rgba(255, 255, 255, .22); }
.tc .tc-st b { font-size: 4.2cqw; }
.tc .tc-st span { font-size: 2cqw; }
.tc .tc-foot { position: static; height: auto; padding: 1.2cqw 3.4cqw 1.6cqw; background: none; border-radius: 0; justify-content: flex-start; gap: 1.4cqw; font-size: 2.2cqw; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tc .tc-foot .tc-tiername { opacity: .75; }
.tc .tc-foot .tc-serial { margin-left: auto; font-family: var(--mono); letter-spacing: 0; font-size: 2.3cqw; opacity: .8; }
.tc .tc-gem { width: 2.6cqw; height: 2.6cqw; }
.tc .tc-ribbon, .tc .tc-radar, .tc .tc-mo, .tc .tc-trophy { display: none; }

/* NOW (moments): photo first, a caption bar with the event, a print run */
.tc-now { margin: 1.6cqw 3.4cqw 0; display: grid; grid-template-columns: auto 1fr; gap: .4cqw 2.4cqw; align-items: center; }
.tc-now-big { grid-row: span 2; display: flex; flex-direction: column; align-items: center; padding: .6cqw 2cqw; background: #fff; color: #0b0f1e; border-radius: .6cqw; }
.tc-now-big b { font-family: "TC Excluded", var(--sans); font-style: italic; font-weight: 400; font-size: 7cqw; line-height: 1; white-space: nowrap; }
.tc-now-big span { font-size: 1.7cqw; font-weight: 900; letter-spacing: .1em; max-width: 24cqw; text-align: center; }
.tc-now-cap { font-size: 2.5cqw; line-height: 1.25; font-weight: 600; }
.tc-now-run { font-size: 2cqw; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ff9f0a; }
.ins-mo .tc-front { background: #fff; box-shadow: inset 0 0 0 .4cqw rgba(0, 0, 0, .2); }
.ins-mo .tc-series { background: #e4002b; border-top-color: #fff; }
.ins-mo .tc-series span { color: #fff; }

/* League leaders panel */
.tc-leaders { margin: 1.4cqw 3.4cqw 0; display: flex; flex-direction: column; gap: .5cqw; }
.tc-leaders-k { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; padding: .6cqw 1.6cqw; background: #c8102e; color: #fff; }
.tc-leaders-k b { font-family: "TC Excelsior", var(--sans); font-size: 2.7cqw; letter-spacing: .12em; }
.tc-leaders-k span { font-size: 2cqw; font-weight: 800; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tc-leaders-row { display: grid; grid-template-columns: 3cqw 9cqw minmax(0, 1fr) auto; gap: 1.4cqw; align-items: center; font-size: 2.6cqw; padding: .2cqw 1cqw; opacity: .8; }
.tc-leaders-row.me { opacity: 1; background: rgba(255, 255, 255, .14); font-weight: 800; }
.tc-leaders-row i { font-style: normal; font-weight: 900; }
.tc-leaders-tm { font-size: 2cqw; font-weight: 900; text-align: center; padding: .2cqw 0; border-radius: .4cqw; }
.tc-leaders-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-leaders-row b { font-variant-numeric: tabular-nums; }

/* Refractor parallels: clean colored border, sheen across the art */
.par .tc-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .22) 35%, transparent 45%, rgba(255, 255, 255, .12) 60%, transparent 70%); mix-blend-mode: screen; }
.par .tc-series { border-top-color: currentColor; }
.par-g .tc-series span, .par-o .tc-series span, .par-p .tc-series span { color: #fff; font-family: var(--mono); letter-spacing: .1em; font-size: 2.8cqw; }

/* Heritage (throwback): cream border, rounded photo window, pennant name */
.ins-tb .tc-bg, .ins-tb .tc-par { inset: 5cqw 5cqw 36cqw; border-radius: 6cqw; }
.ins-tb .tc-portrait.tc-has-photo { left: 5cqw; right: 5cqw; top: 12cqw; height: 87cqw; }
.ins-tb .tc-plate { background: none; color: #3b2412; padding-top: 0; }
.ins-tb .tc-plate .tc-stats, .ins-tb .tc-plate .tc-foot { border-color: rgba(59, 36, 18, .35); }
.ins-tb .tc-ln { color: var(--c0); text-shadow: none; }
.ins-tb .tc-series { background: var(--c0); }
/* Stadium (franchise icon): borderless photo, small foil name */
.ins-icon .tc-bg, .ins-icon .tc-par { inset: 0; border-radius: 5cqw; }
.ins-icon .tc-plate { left: 0; right: 0; bottom: 0; }
.ins-icon .tc-ln { font-size: calc(var(--ln-fs, 12cqw) * .6) !important; background: linear-gradient(180deg, #fff1bf, #c9a646); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }

/* ---- backs: cardboard, stat table, trophy case, fact panel ---- */
.tc .tc-side.tc-back { display: flex; flex-direction: column; gap: 1.4cqw; padding: 5.4cqw 5.4cqw 4.6cqw; background: linear-gradient(160deg, var(--bk, var(--base)), color-mix(in srgb, var(--bk, var(--base)) 45%, #000)); color: #1d1a16; }
.tc .tc-back-bg { inset: 2.4cqw; border-radius: 2.2cqw; background:
	radial-gradient(color-mix(in srgb, var(--bk, var(--c0)) 10%, transparent) 20%, transparent 22%) 0 0 / 1.2cqw 1.2cqw,
	linear-gradient(180deg, color-mix(in srgb, var(--bk, var(--c0)) 9%, #f8f5ef), color-mix(in srgb, var(--bk, var(--c0)) 17%, #ece6db)); box-shadow: inset 0 0 0 .4cqw rgba(60, 30, 10, .35); }
.tc .tc-back-head { align-items: center; gap: 2.4cqw; padding: 0 0 1.2cqw; border-bottom: .6cqw solid var(--bk2, var(--bk, var(--base))); }
.tc-bk-no { flex: 0 0 auto; width: 11cqw; height: 11cqw; border-radius: 50%; background: var(--bk,var(--base)); color: var(--bk-on,#fff); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.tc-bk-no span { font-size: 1.8cqw; font-weight: 800; letter-spacing: .1em; }
.tc-bk-no b { font-size: 3.8cqw; font-weight: 900; }
.tc .tc-back-id { flex: 1 1 auto; }
.tc .tc-back-name { font-family: "UX Condensed", "Arial Narrow", var(--sans); font-weight: 400; font-size: 7cqw; letter-spacing: .02em; color: var(--bk,var(--base)); }
.tc .tc-back-sub { font-size: 2.4cqw; opacity: .85; }
.tc .tc-back-logo { width: 9cqw; height: 9cqw; }
.tc-bk-bio { font-size: 2.2cqw; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; }
.tc-bk-k { font-family: "TC Excelsior", var(--sans); font-size: 2.3cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bk,var(--base)); }
.tc-bk-tblhead { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.tc-full-btn { font: inherit; font-size: 2.3cqw; font-weight: 800; letter-spacing: .06em; padding: .5cqw 1.8cqw; border-radius: 1cqw; border: .3cqw solid var(--bk,var(--base)); background: var(--bk-on,#fff); color: var(--bk,var(--base)); cursor: pointer; }
.tc-full-btn:focus-visible { outline: .6cqw solid #c8102e; outline-offset: .3cqw; }
.tc .tc-tbl { font-size: 2.45cqw; }
.tc .tc-tbl thead th { background: var(--bk,var(--base)); color: var(--bk-on,#fff); opacity: 1; border: 0; padding: .7cqw .35cqw; }
.tc .tc-tbl tbody tr + tr { border-top: .2cqw solid rgba(60, 30, 10, .15); }
.tc .tc-tbl tr.on { background: color-mix(in srgb, var(--bk2, #c8102e) 22%, transparent); font-weight: 800; }
.tc .tc-tbl tr.tc-tot { border-top: .4cqw solid var(--bk,var(--base)); font-weight: 900; }
.tc .tc-blurb { flex: 0 0 auto; font-size: 2.5cqw; line-height: 1.3; opacity: 1; }
.tc-bk-panels { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2cqw; margin-top: auto; }
.tc-cabinet, .tc-fact { border: .35cqw solid var(--bk,var(--base)); border-radius: 1.2cqw; padding: 1cqw 1.6cqw 1.4cqw; background: rgba(255, 248, 235, .55); min-width: 0; }
.tc-cab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8cqw; margin-top: .8cqw; }
.tc-cab { display: flex; flex-direction: column; align-items: center; padding: .5cqw .2cqw; border-radius: .8cqw; background: var(--bk,var(--base)); color: var(--bk-on,#fff); min-width: 0; }
.tc-cab b { font-size: 4cqw; line-height: 1; font-weight: 900; }
.tc-cab span { font-size: 1.7cqw; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tc-cab.c-mvp, .tc-cab.c-gold { background: linear-gradient(180deg, #f4dc8a, #c9a646); color: #241800; }
.tc-cab.c-champ { background: #1b1b1f; color: #f1d27a; }
.tc-cab-none { font-size: 2.3cqw; margin-top: .8cqw; opacity: .8; }
.tc-cab-hof { margin-top: .8cqw; text-align: center; font-size: 2cqw; font-weight: 900; letter-spacing: .18em; padding: .3cqw; background: #1a140a; color: #e8c25a; border-radius: .6cqw; }
.tc-fact p { margin: .6cqw 0 0; font-size: 2.35cqw; line-height: 1.3; }
.tc .tc-back-foot { opacity: .75; font-size: 1.9cqw; }
.tc .tc-mo-back { margin: 0; background: rgba(228, 0, 43, .12); box-shadow: inset .6cqw 0 0 #e4002b; font-size: 2.4cqw; }
.tc .tc-mo-back b { color: #a3001f; }
.tc-back .tc-hist, .tc-back .tc-line, .tc-back .tc-notes { display: none; }

/* full stats window inside the back */
.tc .tc-back > .tc-fullstats { position: absolute; inset: 4cqw; z-index: 6; display: flex; flex-direction: column; border-radius: 1.6cqw; background: #fbefdc; color: #23180f; box-shadow: 0 0 0 .5cqw var(--bk,var(--base)), 0 2cqw 5cqw rgba(0, 0, 0, .45); overflow: hidden; }
.tc .tc-back > .tc-fullstats[hidden] { display: none; }
.tc-full-head { display: flex; justify-content: space-between; align-items: center; padding: 1.4cqw 2cqw; background: var(--bk,var(--base)); color: #fff; font-size: 2.8cqw; }
.tc-full-x { font: inherit; font-size: 2.4cqw; font-weight: 800; padding: .4cqw 1.6cqw; border-radius: 1cqw; border: .3cqw solid #fff; background: transparent; color: #fff; cursor: pointer; }
.tc-full-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; user-select: text; }
.tc-full-scroll:focus-visible { outline: .5cqw solid #c8102e; outline-offset: -.5cqw; }
.tc .tc-tbl-full { width: max-content; min-width: 100%; font-size: 2.6cqw; border-collapse: separate; border-spacing: 0; }
.tc .tc-tbl-full th, .tc .tc-tbl-full td { padding: .7cqw 1.2cqw; white-space: nowrap; }
.tc-tbl-full thead th { position: sticky; top: 0; z-index: 2; }
.tc-tbl-full tbody th, .tc-tbl-full thead th:first-child { position: sticky; left: 0; z-index: 1; background: #f1dcc0; }
.tc-tbl-full thead th:first-child { z-index: 3; background: #0d5960; }
.tc-tbl-full tbody tr:nth-child(even) td { background: rgba(18, 112, 122, .07); }

/* thumbnails show less */
@container (max-width: 200px) {
	.tc-series b { font-size: 7cqw; }
	.tc-series span, .tc-title-t span, .tc-banner span, .tc .tc-sub, .tc .tc-fn, .tc-now-cap, .tc-now-run, .tc-leaders-row:not(.me), .tc .tc-foot .tc-tiername { display: none; }
	.tc-title-t b { font-size: 4.2cqw; }
	.tc-banner b { font-size: 3.6cqw; }
	.tc .tc-st b { font-size: 5.6cqw; } .tc .tc-st span { font-size: 2.8cqw; }
	.tc .tc-pos b { font-size: 5.6cqw; } .tc .tc-pos span { display: none; }
	.tc .tc-team { width: 19cqw; height: 19cqw; } .tc .tc-team .tc-logo { width: 14cqw; height: 14cqw; }
	.tc .tc-foot .tc-serial { font-size: 3.2cqw; }
	.tc-full-btn, .tc-bk-bio, .tc .tc-blurb, .tc-fact { display: none; }
	.tc-bk-panels { grid-template-columns: 1fr; }
}
@container (max-width: 260px) {
	.tc .tc-tbl { font-size: 3.2cqw; }
	.tc .tc-tbl .tc-c-fg, .tc .tc-tbl .tc-c-per { display: none; }
	.tc-cab span { font-size: 2.2cqw; } .tc-cab b { font-size: 5cqw; }
	.tc-cab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tc-fact p, .tc .tc-blurb { font-size: 3cqw; }
	.tc-bk-k { font-size: 3cqw; }
	.tc .tc-back-name { font-size: 9cqw; }
}
@media (prefers-reduced-motion: reduce) { .tc-front::before { animation: none; } }
.tc .tc-team:not(.tc-team-logo) .tc-logo { display: none; }
.tc .tc-ln { line-height: 1.16; padding-top: 0; margin-top: -.08em; }
.tc .tc-fit-off { display: none !important; }
.tc .tc-side { font-family: "Helvetica Neue", Arial, system-ui, sans-serif; }
.tc-mark-ball .m1 { fill: #e8702a !important; } .tc-mark-ball .m2 { stroke: #2a1406 !important; }
/* NOW-style game programs (moments and the box-score programs) */
.tc .tc-front.is-now { background: #fff; box-shadow: inset 0 0 0 .4cqw rgba(0, 0, 0, .2); }
.is-now .tc-series { background: #e4002b; border-top-color: #fff; }
.is-now .tc-series span { color: #fff; }
.ins-ra .tc-front.is-now { background: linear-gradient(135deg, #0d1b2a, #415a77 40%, #e0e1dd 55%, #415a77 70%, #0d1b2a); }
.ins-ra .tc-series { background: linear-gradient(90deg, #0d1b2a, #1b263b); border-top-color: #9ad1ff; }
.ins-duel .tc-front.is-now { background: linear-gradient(90deg, var(--c0) 0 50%, #111 50%); }
.ins-pf .tc-front.is-now, .ins-rob .tc-front.is-now { background: linear-gradient(135deg, #2b2f38, #c9cfd8 40%, #2b2f38); }
.t-rare .tc-title { --title: linear-gradient(90deg, #0d1b2a, #2a4a7a 50%, #0d1b2a); --title-ink: #cfe8ff; }
.t-duel .tc-title { --title: linear-gradient(90deg, #c8102e, #111 50%, #0b3d91); }
.t-streak .tc-title { --title: linear-gradient(90deg, #ff6a00, #c8102e); }
.t-debut .tc-title { --title: linear-gradient(90deg, #1f2a44, #3c5a8a); }
.t-rob .tc-title { --title: linear-gradient(90deg, #3a3a3a, #6a6a6a); --title-ink: #ffd6d6; }
.tc .tc-box { font-size: 2.3cqw; }
.tc .tc-box th, .tc .tc-box td { text-align: center; }
.tc .tc-box tbody th { text-align: left; }
.tc .tc-box .tc-box-t { font-weight: 900; }
.tc-duo-mate { z-index: 2; }
.ins-tb .tc-plate { background: linear-gradient(180deg, transparent 0, transparent 6cqw, #efe2c4 10cqw); } .ins-tb .tc-plate .tc-st span, .ins-tb .tc-sub { color: #3b2412; }

.tc-grid > .empty { grid-column: 1 / -1; justify-self: stretch; width: 100%; box-sizing: border-box; }
@media (max-width: 560px) { .tc-tabs .tab { padding: 6px 11px; } .tc-tabs .tabs { gap: 2px; } }
@media (max-width: 560px) { .tc-market-board { flex-wrap: wrap; overflow-x: visible; justify-content: center; gap: 14px 12px; } .tc-market-board > * { flex: 0 0 calc(50% - 8px); max-width: 170px; min-width: 0; } }
@media (max-width: 560px) { .tc-body .ui-seg { flex-wrap: wrap; overflow: visible; border-radius: 16px; } }