/* One 360 × 480 canvas includes the attached medals and attribute strip. */
.cup-player-card { position: relative; display: block; width: 100%; min-width: 0; aspect-ratio: 360 / 480; isolation: isolate; text-align: center; }
.cup-player-card[hidden] { display: none; }
.cup-player-card > .cup-card-canvas {
  --cup-paper: #f3dc96; --cup-paper-dark: #9f7834; --cup-paper-light: #fff5ce;
  --cup-ink: #514321; --cup-line: #a18443; --cup-medal: #f1dfa8;
  position: absolute; inset: 0 auto auto 0; display: block; width: 360px; height: 480px;
  margin: 0; padding: 0; color: var(--cup-ink); font: 500 14px/1.2 "Segoe UI","Microsoft YaHei",sans-serif;
  text-align: center; transform: scale(var(--cup-card-scale,1)); transform-origin: top left;
  filter: drop-shadow(0 6px 8px #21170536);
}
/* Peak and active players deliberately share the original gold palette. */
.cup-card-canvas.cup-card-legend { --cup-paper: #f4f1e7; --cup-paper-dark: #b7a271; --cup-paper-light: #fffef8; --cup-ink: #575038; --cup-line: #aa925c; --cup-medal: #e9dfbf; }
/* Only orphaned historical records use this minimal fallback. Linked players
   use the complete catalog card, including its category, badges and stats. */
.cup-card-canvas.cup-card-snapshot :is(.cup-card-roles,.cup-card-radar,.cup-card-stats,.cup-card-name-en,.cup-card-measurements,.cup-card-origins,.cup-card-traits,.cup-card-badges,.cup-card-secondary) { display: none; }
.cup-card-canvas,.cup-card-canvas * { box-sizing: border-box; }
.cup-card-canvas :is(div,span,strong,b,small,p,h3,dl,dt,dd,figure,figcaption) { margin: 0; padding: 0; border: 0; background: none; color: inherit; font-family: inherit; letter-spacing: normal; }
.cup-card-canvas .cup-card-frame { position: absolute; inset: 0; width: 360px; height: 480px; overflow: visible; pointer-events: none; }
.cup-card-frame .cup-card-frame-edge { fill: none; stroke: var(--cup-paper-light); stroke-width: 1.3; opacity: .85; }
.cup-card-frame .cup-card-frame-facets { fill: var(--cup-paper-dark); opacity: .2; }
.cup-card-frame .cup-card-frame-inlay { fill: none; stroke: var(--cup-paper-light); stroke-width: 2; opacity: .8; }
.cup-card-frame .cup-card-marble { fill: none; stroke: #ad975a; stroke-width: .85; opacity: .32; }
.cup-card-frame-glint { transform: translateX(0) skewX(-18deg); opacity: 0; }
.cup-player-card:is(:hover,:focus-within) .cup-card-frame-glint { animation: cupCardGlint 3.8s ease-in-out infinite; }
@keyframes cupCardGlint { 0%,10% { transform: translateX(0) skewX(-18deg); opacity: 0; } 25% { opacity: .65; } 65%,100% { transform: translateX(660px) skewX(-18deg); opacity: 0; } }
.cup-card-canvas .cup-card-category { position: absolute; top: 40px; left: 144px; right: 49px; font-size: 14px; font-weight: 800; letter-spacing: 2px; line-height: 20px; text-align: right; color: #665024; text-shadow: 0 1px 0 #fff8; }
.cup-card-legend .cup-card-category { top: 46px; color: #776034; }
.cup-card-canvas .cup-card-rating { position: absolute; top: 54px; left: 33px; width: 75px; font-size: 48px; line-height: 1; font-weight: 850; font-variant-numeric: tabular-nums; }
.cup-card-canvas .cup-card-position { position: absolute; top: 102px; left: 32px; width: 77px; font-size: 23px; font-weight: 800; }
.cup-card-canvas .cup-card-secondary { position: absolute; top: 132px; left: 33px; width: 77px; height: 26px; font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
.cup-card-canvas .cup-card-roles { position: absolute; top: 162px; left: 40px; width: 116px; max-height: 100px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; font-size: 11px; line-height: 15px; text-align: left; cursor: help; }
.cup-card-canvas .cup-card-role { display: flex; align-items: center; gap: 3px; min-width: 0; height: 15px; padding: 0 3px; border-radius: 2px; background: #fffdf5ed; color: #4b412b; font-weight: 650; }
.cup-card-canvas .cup-card-role-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cup-card-canvas .cup-card-role-level { flex: 0 0 auto; min-width: 14px; height: 13px; padding: 0 2px; border-radius: 2px; background: #55451f; color: #fffbed; font-size: 10px; font-weight: 800; line-height: 13px; text-align: center; white-space: nowrap; }
/* The count sits below all six rows, above the name rule, without shortening a role. */
.cup-card-canvas .cup-card-role-more { position: absolute; top: calc(100% + 2px); right: 0; min-width: 20px; padding: 0 2px; border-radius: 2px; background: #fffdf5; color: #4b412b; font-size: 10px; font-weight: 800; line-height: 13px; text-align: center; }
.cup-card-canvas .cup-card-portrait-area { position: absolute; top: 59px; left: 93px; width: 233px; height: 221px; overflow: hidden; }
.cup-card-portrait-area::after { content: ""; position: absolute; inset: auto 0 0; height: 18px; background: linear-gradient(transparent,var(--cup-paper)); pointer-events: none; }
.cup-card-canvas .cup-card-portrait { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: center bottom; border: 0; border-radius: 0; background: transparent; mask-image: linear-gradient(to right,transparent,#000 7%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 94%,transparent); mask-composite: intersect; }
.cup-card-canvas .cup-card-portrait.is-placeholder { opacity: .65; mask-image: radial-gradient(ellipse at 50% 53%,#000 24%,#000a 48%,transparent 72%); mix-blend-mode: multiply; }
/* Medals straddle the card edges; the icon itself never carries a dark tile. */
.cup-card-canvas .cup-card-badges { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 4px; width: 34px; }
.cup-card-canvas .cup-card-badges-gold { left: 6px; }
.cup-card-canvas .cup-card-badges-silver { right: 6px; }
.cup-card-canvas .cup-card-badge { display: grid; position: relative; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 3px; font-size: 12px; font-weight: 800; line-height: 1; cursor: help; color: #665329; filter: drop-shadow(0 1px 1px #412b1230); }
.cup-card-badge::before,.cup-card-badge::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(24% 0,76% 0,100% 36%,50% 100%,0 36%); background: #8d7540; }
.cup-card-badge::after { inset: 1.2px; background: linear-gradient(130deg,#fff1bb,var(--cup-medal)); }
.cup-card-canvas .cup-card-badges-silver .cup-card-badge { color: #565b59; }
.cup-card-badges-silver .cup-card-badge::before { background: #959892; }
.cup-card-badges-silver .cup-card-badge::after { background: linear-gradient(130deg,#fffef7,#dedfd9); }
.cup-card-canvas .cup-card-badge-symbol { display: block; width: 25px; height: 25px; margin-top: -3px; background: currentColor; mask-image: var(--playstyle-symbol); mask-size: contain; mask-position: center; mask-repeat: no-repeat; }
.cup-card-canvas .cup-card-badge-custom { width: 24px; height: 24px; margin-top: -3px; }
.cup-card-badge-custom svg { display: block; width: 100%; height: 100%; }
.cup-card-canvas .cup-card-badge-more { padding-bottom: 6px; }
.cup-card-canvas [data-cup-tooltip]:focus-visible { outline: 2px solid #087d93; outline-offset: 3px; border-radius: 3px; }
.cup-card-canvas .cup-card-radar { position: absolute; right: 42px; top: 223px; width: 65px; height: 56px; padding: 0; border: 0; background: transparent; }
.cup-card-radar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cup-card-radar .cup-card-radar-grid { fill: none; stroke: currentColor; opacity: .35; stroke-width: .8; }
.cup-card-radar .cup-card-radar-value { fill: #2f786c35; stroke: #356c57; stroke-width: 1.5; }
.cup-card-radar text { fill: currentColor; font: 6px sans-serif; text-anchor: middle; }
.cup-card-canvas .cup-card-name-rule { position: absolute; top: 281px; left: 35px; width: 290px; height: 1px; background: linear-gradient(90deg,transparent,var(--cup-line) 12%,var(--cup-line) 88%,transparent); box-shadow: 0 1px 0 #fff8; }
.cup-card-canvas .cup-card-name { position: absolute; top: 285px; left: 42px; width: 276px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 27px; font-weight: 800; line-height: 1.06; text-align: center; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.cup-card-name-text { display: block; max-width: 100%; }
.cup-card-canvas .cup-card-name-en { position: absolute; top: 320px; left: 43px; width: 274px; height: 25px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 550; line-height: 1.03; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
/* fitName measures each font-size immediately; a site-wide transition would
   report the previous size and shrink an otherwise readable name to its floor. */
.cup-player-card .cup-card-canvas :is(.cup-card-name,.cup-card-name-en,.cup-card-secondary) { transition: none !important; }
.cup-card-canvas .cup-card-stats { position: absolute; top: 354px; left: 40px; width: 280px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); }
.cup-card-canvas .cup-card-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.cup-card-canvas .cup-card-stat dt { font-size: 12px; font-weight: 650; line-height: 1; }
.cup-card-canvas .cup-card-stat dd { font-size: 25px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cup-card-canvas .cup-card-measurements { position: absolute; top: 399px; left: 237px; width: 62px; height: 34px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; font-size: 10px; line-height: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cup-card-measurements > span { display: block; }
.cup-card-canvas .cup-card-origins { position: absolute; top: 404px; left: 50%; transform: translateX(-50%); width: 84px; height: 34px; display: flex; justify-content: center; align-items: center; gap: 16px; }
.cup-card-canvas .cup-card-origin { position: relative; display: flex; flex: 0 0 34px; align-items: center; justify-content: center; width: 34px; height: 26px; font-size: 9px; }
.cup-card-canvas .cup-card-origin:last-child { height: 34px; }
.cup-card-origin img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; border: 0; border-radius: 0; background: transparent; object-fit: contain; }
/* This small attached strip replaces the crowded prose and emoji footer. */
.cup-card-canvas .cup-card-traits { position: absolute; z-index: 3; top: 451px; left: 82px; width: 196px; height: 27px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; font-size: 19px; font-weight: 750; filter: drop-shadow(0 1px 1px #412b1230); }
.cup-card-traits::before,.cup-card-traits::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%); background: var(--cup-line); }
.cup-card-traits::after { inset: 1px; background: linear-gradient(135deg,var(--cup-paper-light),var(--cup-paper)); }
.cup-card-traits > span { display: inline-flex; align-items: center; justify-content: center; gap: 3px; white-space: nowrap; cursor: help; }
.cup-card-traits > span + span { border-left: 1px solid color-mix(in srgb,var(--cup-line),transparent 50%); }
.cup-card-canvas .cup-card-preferred-foot { font-size: 17px; }
.cup-card-traits .cup-card-trait-symbol { display: inline-flex; width: 16px; height: 20px; }
.cup-card-traits svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.cup-card-tooltip { position: fixed; z-index: 2147480000; max-width: min(320px,calc(100vw - 24px)); padding: 10px 12px; border: 1px solid #97ca53; border-radius: 6px; color: #f5f7ed; background: #111b25; box-shadow: 0 6px 20px #0005; font: 500 13px/1.5 "Segoe UI","Microsoft YaHei",sans-serif; white-space: pre-line; pointer-events: none; text-align: left; }
.cup-card-tooltip[hidden] { display: none; }
/* Tactical composition: one proportionally scaled 360 × 370 canvas. The
   original data and 360 × 480 layout remain available in the enlarged card. */
.cup-player-card.cup-player-card-lineup { aspect-ratio: 36 / 37; }
.cup-player-card-lineup > .cup-card-canvas { height: 370px; }
.cup-player-card-lineup .cup-card-canvas .cup-card-frame { height: 370px; }
.cup-player-card-lineup .cup-card-canvas :is(.cup-card-category,.cup-card-secondary,.cup-card-roles,.cup-card-name-en,.cup-card-stats,.cup-card-traits,.cup-card-measurements) { display: none; }
.cup-player-card-lineup .cup-card-canvas .cup-card-rating { top: 43px; left: 29px; width: 89px; font-size: 62px; }
.cup-player-card-lineup .cup-card-canvas .cup-card-position { top: 106px; left: 29px; width: 89px; font-size: 28px; }
.cup-player-card-lineup .cup-card-canvas .cup-card-portrait-area { top: 51px; left: 86px; width: 245px; height: 163px; }
.cup-player-card-lineup .cup-card-canvas .cup-card-name-rule { top: 217px; }
/* Keep two readable primary-name lines. Short names use their real English
   subtitle when available, otherwise stay centered in this same composition. */
.cup-player-card-lineup .cup-card-canvas .cup-card-name { top: 225px; left: 42px; width: 276px; height: 78px; font-size: 40px; line-height: 1.06; overflow: hidden; }
.cup-player-card-lineup .cup-card-name-text { width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cup-player-card-lineup.has-lineup-name-en .cup-card-canvas .cup-card-name { height: 44px; }
.cup-player-card-lineup.has-lineup-name-en .cup-card-canvas .cup-card-name-en { display: block; top: 274px; left: 42px; width: 276px; height: 30px; font-size: 28px; font-weight: 600; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cup-player-card-lineup .cup-card-canvas .cup-card-origins { top: 310px; height: 50px; width: 124px; gap: 24px; }
.cup-player-card-lineup .cup-card-canvas .cup-card-origin { flex-basis: 50px; width: 50px; height: 34px; }
.cup-player-card-lineup .cup-card-canvas .cup-card-origin:last-child { height: 50px; }
.cup-player-card-lineup .cup-card-canvas .cup-card-radar { right: 46px; top: 160px; width: 61px; height: 52px; }
.cup-player-card-lineup .cup-card-radar text { display: none; }
/* A compact card is one click/focus target. Its full preview exposes tooltips. */
.cup-player-card-lineup .cup-card-canvas [data-cup-tooltip] { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .cup-player-card { scroll-behavior: auto; } .cup-player-card .cup-card-canvas .cup-card-frame-glint { animation: none; } }
