/* Trading cards: team, game and history lines (cardgame-history.js). */
@font-face { font-family: "HX Sip"; src: url("../fonts/LTSipText-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "HX Sip"; src: url("../fonts/LTSipText-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "HX Sip"; src: url("../fonts/LTSipText-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "HX Sip"; src: url("../fonts/LTSipText-Italic.ttf") format("truetype"); font-style: italic; font-display: swap; }
@font-face { font-family: "HX Sip"; src: url("../fonts/LTSipText-BoldItalic.ttf") format("truetype"); font-style: italic; font-weight: 700; font-display: swap; }
@font-face { font-family: "HX Sip"; src: url("../fonts/LTSipText-BlackItalic.ttf") format("truetype"); font-style: italic; font-weight: 900; font-display: swap; }
@font-face { font-family: "HX OpenRing"; src: url("../fonts/OpenRing-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "HX Maranatha"; src: url("../fonts/Maranatha.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "HX Spree"; src: url("../fonts/MidnightSpree-Regular.woff2") format("woff2"), url("../fonts/MidnightSpree-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "HX Grim"; src: url("../fonts/GrimCreeper.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "HX Aero"; src: url("../fonts/AeroMaticsRegular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "HX Aero"; src: url("../fonts/AeroMaticsBold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "HX Aero Display"; src: url("../fonts/AeroMaticsDisplayRegular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "HX Aero Display"; src: url("../fonts/AeroMaticsDisplayBold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "HX Aero Display"; src: url("../fonts/AeroMaticsDisplayItalic.ttf") format("truetype"); font-style: italic; font-display: swap; }
@font-face { font-family: "HX Aero Display"; src: url("../fonts/AeroMaticsDisplayBoldItalic.ttf") format("truetype"); font-style: italic; font-weight: 700; font-display: swap; }

/* Aero on the NOW caption bar and the Duel / Streak stat plates */
.tc .tc-now-cap { font-family: "HX Aero", var(--sans); }
.tc .tc-now-big span { font-family: "HX Aero Display", var(--sans); font-weight: 700; }
.ins-duel .tc-title-t b, .ins-stk .tc-title-t b { font-family: "HX Aero Display", var(--sans); font-style: italic; font-weight: 700; letter-spacing: .06em; }

/* ---- shared shell for the team / game faces ---- */
.hx-front { color: #fff; }
.tc .hx-front .tc-bg { background: linear-gradient(170deg, var(--base), var(--deep)); }
.hx-front .tc-plate.hx-plate { padding-top: 6cqw; }
.hx-badge { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tc1); color: var(--ton); border: .7cqw solid var(--tc0); box-shadow: 0 .8cqw 1.8cqw rgba(0, 0, 0, .45); overflow: hidden; }
.hx-badge img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
.hx-badge.has-logo { background: #fff; }
.hx-badge.has-logo .hx-badge-ab { display: none; }
.hx-badge-ab { font-family: "HX Spree", "TC Excluded", var(--sans); font-size: 1em; letter-spacing: .02em; }
.hx-big { width: 30cqw; height: 30cqw; font-size: 8cqw; }
.hx-mid { width: 20cqw; height: 20cqw; font-size: 5.6cqw; }
.hx-sm { width: 13cqw; height: 13cqw; font-size: 3.6cqw; }

/* rivalry: split field */
.hx-split { position: absolute; inset: 2.4cqw; border-radius: 2.2cqw; overflow: hidden; }
.hx-half { position: absolute; top: 0; bottom: 0; width: 50%; display: flex; flex-direction: column; align-items: center; padding-top: 26cqw; gap: 2cqw; }
.hx-ha { left: 0; background: linear-gradient(160deg, var(--ca), var(--da)); clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); width: 56%; }
.hx-hb { right: 0; background: linear-gradient(200deg, var(--cb), var(--db)); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); width: 56%; padding-left: 8%; }
.hx-ha { padding-right: 8%; }
.hx-tn { font-family: "HX OpenRing", var(--sans); font-size: 5cqw; text-align: center; max-width: 40cqw; line-height: 1.05; text-shadow: 0 .4cqw 0 rgba(0, 0, 0, .5); overflow-wrap: anywhere; }
.hx-vs { position: absolute; left: 50%; top: 32cqw; transform: translateX(-50%); font-family: "HX Spree", var(--sans); font-size: 10cqw; color: #fff; text-shadow: 0 .6cqw 0 #000, 0 0 3cqw rgba(0, 0, 0, .6); }
.hx-rec { position: absolute; left: 0; right: 0; top: 74cqw; display: flex; flex-direction: column; align-items: center; }
.hx-rec b { font-family: "HX Spree", var(--sans); font-weight: 400; font-size: 13cqw; line-height: 1; text-shadow: 0 .6cqw 0 rgba(0, 0, 0, .55); }
.hx-rec span { font-family: "HX Sip", var(--sans); font-weight: 900; font-size: 2.6cqw; letter-spacing: .14em; background: rgba(0, 0, 0, .55); padding: .5cqw 2cqw; border-radius: 1cqw; margin-top: 1cqw; }

/* champions: team photo */
.hx-team { position: absolute; inset: 2.4cqw; display: flex; flex-direction: column; align-items: center; padding-top: 19cqw; gap: 1.6cqw; }
.hx-banner { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.hx-banner b { font-family: "HX Sip", var(--sans); font-weight: 900; font-size: 3cqw; letter-spacing: .3em; opacity: .85; }
.hx-banner span { font-family: "HX OpenRing", var(--sans); font-size: 9cqw; text-shadow: 0 .5cqw 0 rgba(0, 0, 0, .5); max-width: 86cqw; text-align: center; overflow-wrap: anywhere; }
.hx-five { display: flex; justify-content: center; gap: .6cqw; width: 100%; padding: 0 1cqw; }
.hx-mem { flex: 0 0 17.4cqw; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.tc .hx-mem .tc-portrait.hx-face { position: relative; left: auto; top: auto; right: auto; width: 17cqw; height: 22cqw; transform: none; border-radius: 1.2cqw; background: rgba(255, 255, 255, .12); overflow: hidden; -webkit-mask-image: none; mask-image: none; }
.tc .hx-mem .tc-portrait.tc-has-photo .tc-photo { height: 100%; }
.hx-mem span { font-family: "HX Sip", var(--sans); font-weight: 700; font-size: 2.1cqw; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; text-align: center; }
.hx-path { display: flex; flex-wrap: wrap; justify-content: center; gap: .8cqw; padding: 0 3cqw; }
.hx-path span { font-family: "HX Sip", var(--sans); font-weight: 700; font-size: 2.3cqw; background: rgba(0, 0, 0, .45); padding: .4cqw 1.4cqw; border-radius: 1cqw; white-space: nowrap; }
.hx-path i { font-style: normal; opacity: .7; }

/* franchise record */
.hx-rec-card { position: absolute; inset: 2.4cqw; display: flex; flex-direction: column; align-items: center; padding-top: 24cqw; gap: 1.6cqw; text-align: center; }
.hx-big-n { font-family: "HX Spree", var(--sans); font-size: 20cqw; line-height: 1; text-shadow: 0 .8cqw 0 rgba(0, 0, 0, .5); }
.hx-big-u { font-family: "HX Sip", var(--sans); font-weight: 900; font-size: 3.4cqw; letter-spacing: .18em; }
.hx-big-s { font-family: "HX Sip", var(--sans); font-style: italic; font-size: 3cqw; opacity: .85; padding: 0 4cqw; }

/* checklist: cardboard list */
.tc .hx-cl ~ .tc-plate, .ins-cl .hx-plate { background: #1b2a3a; }
.ins-cl .hx-front .tc-bg { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--c0) 8%, #f6f0e2) 0 5.6cqw, color-mix(in srgb, var(--c0) 16%, #e9e0cc) 5.6cqw 5.8cqw); }
.hx-cl { position: absolute; left: 4cqw; right: 4cqw; top: 19cqw; bottom: 22cqw; color: #1b2a3a; font-family: "HX Sip", var(--sans); display: flex; flex-direction: column; overflow: hidden; }
.hx-cl-h { font-weight: 900; font-size: 3.6cqw; line-height: 1.1; border-bottom: .5cqw solid #1b2a3a; padding-bottom: .8cqw; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.hx-cl-list { list-style: none; margin: .8cqw 0 0; padding: 0; display: flex; flex-direction: column; gap: .1cqw; }
.hx-cl-list li { display: flex; align-items: center; gap: 1.4cqw; font-size: 2.7cqw; line-height: 1.25; min-width: 0; }
.hx-box { flex: 0 0 auto; width: 2.6cqw; height: 2.6cqw; border: .35cqw solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 2.2cqw; font-weight: 900; line-height: 1; }
.hx-cl-list li.got .hx-box { background: #1b7a3a; color: #fff; border-color: #1b7a3a; }
.hx-cl-n { flex: 0 0 4cqw; font-weight: 900; text-align: right; }
.hx-cl-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.hx-cl-more { margin-top: auto; font-style: italic; font-size: 2.5cqw; }
.hx-back .hx-cl-back { color: inherit; }

/* box score */
.ins-bx .hx-front .tc-bg { background: linear-gradient(180deg, var(--deep), var(--base) 60%, var(--deep)); }
.hx-bx { position: absolute; left: 4cqw; right: 4cqw; top: 20cqw; display: flex; flex-direction: column; gap: 2cqw; font-family: "HX Sip", var(--sans); }
.hx-bx-score { display: flex; justify-content: space-around; align-items: center; }
.hx-bx-side { display: flex; flex-direction: column; align-items: center; gap: 1cqw; opacity: .8; }
.hx-bx-side.won { opacity: 1; }
.hx-bx-side b { font-family: "HX Aero Display", var(--sans); font-size: 12cqw; line-height: 1; font-weight: 700; }
.hx-bx-when { text-align: center; font-weight: 900; font-size: 2.6cqw; letter-spacing: .14em; color: #ffcf5a; }
.hx-bx .tc-box { background: rgba(255, 255, 255, .92); color: #111; border-radius: 1cqw; font-family: "HX Sip", var(--sans); font-size: 2.8cqw; }
.hx-bx-star { font-size: 2.6cqw; line-height: 1.3; text-align: center; }
.hx-bx-star b { font-weight: 900; }

/* backs */
.hx-back .tc-bk-k { margin-top: .6cqw; }
.tc .hx-back .hx-tbl, .tc .hx-back .tc-box { font-family: "HX Sip", var(--sans); }
.tc .hx-back .hx-tbl tbody th { text-align: left; white-space: nowrap; }
.tc .hx-back .hx-mini { font-size: 2.2cqw; }
.hx-back .tc-back-name { white-space: nowrap; overflow: hidden; }
.hx-back .hx-cl-list li { font-size: 2.4cqw; }

/* short prints */
.ins-spv .tc-bg { background: radial-gradient(60% 45% at 50% 32%, #fff7d6 0, #f0b54a 30%, transparent 62%), repeating-conic-gradient(from 0deg at 50% 32%, var(--deep) 0 9deg, var(--base) 9deg 18deg) !important; }
.hx-spv-d { position: absolute; inset: 2.4cqw; border-radius: 2.2cqw; pointer-events: none; box-shadow: inset 0 0 0 .8cqw #f0b54a; z-index: 1; }
.hx-tbk-d { position: absolute; right: 4cqw; top: 22cqw; z-index: 1; transform: rotate(8deg); pointer-events: none; }
.hx-tbk-d span { display: block; font-family: "HX Maranatha", serif; font-size: 4cqw; padding: .6cqw 2cqw; border: .5cqw solid var(--acc); color: var(--acc); background: rgba(0, 0, 0, .35); }
.ins-tbk .tc-bg { filter: sepia(.35) saturate(1.2); }
/* draft day */
.hx-dd-d { position: absolute; left: 3.4cqw; top: 22cqw; z-index: 1; pointer-events: none; }
.hx-dd-d span { font-family: "HX Maranatha", serif; font-size: 13cqw; color: rgba(255, 255, 255, .5); text-shadow: 0 .6cqw 0 rgba(0, 0, 0, .3); }
.ins-dd .tc-now-big b, .ins-rd .tc-now-big b { font-family: "HX Maranatha", serif; font-style: normal; }
/* nightmare */
.ins-nm .tc-front { background: linear-gradient(180deg, #0a0a0a, #2a0a0a) !important; }
.hx-nm-d { position: absolute; inset: 2.4cqw; border-radius: 2.2cqw; pointer-events: none; z-index: 1; background: radial-gradient(70% 30% at 50% 100%, rgba(140, 0, 0, .45), transparent 70%); }
.ins-nm .tc-series b, .ins-nm .tc-now-big b { font-family: "HX Grim", serif; font-style: normal; }
.ins-nm .tc-title { --title: linear-gradient(90deg, #1a0000, #5a0a0a); --title-ink: #ffdada; }

/* more display faces */
@font-face { font-family: "HX Typewriter"; src: url("../fonts/MomsTypewriter.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "HX News"; src: url("../fonts/OldNewspaperTypes.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "HX Norse"; src: url("../fonts/Norse-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "HX Greek"; src: url("../fonts/GreekHouseSymbolized.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "HX Paint"; src: url("../fonts/AppoPaint-Regular.otf") format("opentype"); font-display: swap; }
.hx-cl-h, .hx-back-cl .tc-back-name { font-family: "HX Typewriter", monospace; font-weight: 400; }
.hx-bx-when, .hx-bx-star { font-family: "HX News", serif; }
.ins-dy .tc-series b { font-family: "HX Norse", serif; font-style: normal; }
.ins-pan .tc-series b { font-family: "HX Greek", serif; }
.ins-deb .tc-series b { font-family: "HX Paint", var(--sans); font-style: normal; }
.ins-dd .tc-now-cap { font-family: "HX Typewriter", monospace; }
.ins-nm .tc-series b { line-height: 1.3; font-size: 5cqw; }
@font-face { font-family: "HX Olde"; src: url("../fonts/OldeEnglish.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "HX TopSecret"; src: url("../fonts/TopSecret.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "HX Lister"; src: url("../fonts/Lister.ttf") format("truetype"); font-display: swap; }
.hx-k-tm .hx-banner b { font-family: "HX Olde", serif; font-weight: 400; font-size: 4.6cqw; letter-spacing: .04em; }
.ins-rob .tc-series b { font-family: "HX TopSecret", var(--sans); font-style: normal; }
.hx-big-u { font-family: "HX Lister", var(--sans); font-weight: 400; }