/* Player detail presentation. Scoped so the approved database layout stays intact. */
.cp-page { position: relative; width: 100%; max-width: var(--page-max); margin: 0 auto 16px; padding: 6px var(--page-gutter) 0; }
.cp-page *, .cp-page *::before, .cp-page *::after { box-sizing: border-box; }
.cp-page [hidden] { display: none !important; }
.cp-page a { text-underline-offset: 4px; }
.cp-page :is(a,button,input,summary):focus-visible { outline: 2px solid #a6d3ff; outline-offset: 4px; }
.cp-page button,.cp-page input { font: inherit; }
.cp-page button { cursor: pointer; }
.cp-page :is(h1,h2,h3,p,dl) { margin-top: 0; }
.cp-page :is(h1,h2,h3,strong,dd) { overflow-wrap: break-word; word-break: normal; }
.cp-page :is(#overview,#scouting,#club-contract,#comparison) { scroll-margin-top: calc(var(--header-height) + 72px); }
.cp-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 4px; font-size: .8rem; color: #9aabbd; }

.cp-back { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: #b4c4d6; text-decoration: none; }
.cp-back:hover { color: #dcecff; }
.cp-hero { display: grid; grid-template-columns: 122px minmax(0,1fr) 420px; gap: 18px; align-items: center; padding: 4px 0 8px; }
.cp-portrait { position: relative; display: grid; align-items: end; justify-items: center; min-width: 0; width: 122px; height: 132px; align-self: center; overflow: clip; border: 1px solid var(--panel-border); border-radius: 14px; background: #1b2732; }
.cp-portrait__halo { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 85%,#4188d170,transparent 75%); }
.cp-portrait::after { content: ''; pointer-events: none; position: absolute; inset: auto 0 0; height: 16%; background: linear-gradient(transparent,#0c1724); }
.cp-portrait > img { position: relative; display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 14px #0005); }
.cp-kicker { display: block; margin: 0 0 10px; color: #79b9ff; font-size: .68rem; letter-spacing: .16em; font-weight: 750; }
.cp-identity { min-width: 0; }
.cp-identity h1 { margin: 0 0 6px; line-height: 1.12; letter-spacing: -.035em; font-size: clamp(1.5rem,2vw,2.25rem); font-weight: 650; }
.cp-identity h1 > span { display: inline; font: inherit; font-weight: 500; color: #c8d5e4; letter-spacing: inherit; }
.cp-identity h1 > strong { display: inline; font: inherit; font-weight: 740; }
.cp-identity__entities { display: flex; flex-wrap: wrap; gap: 5px 14px; }
.cp-identity__entities a { display: inline-flex; min-width: 0; align-items: center; gap: 7px; min-height: 26px; color: #c1ccd9; text-decoration: none; font-size: .82rem; line-height: 1.4; }
.cp-identity__entities a:hover { color: #fff; }
.cp-identity__entities img { flex: 0 0 auto; object-fit: contain; }
.cp-positions { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.cp-position { display: inline-grid; place-items: center; min-width: 38px; min-height: 38px; padding: 5px; border: 1px solid #7cb4ff36; border-radius: 7px; background: #1d3650; color: #b6d8ff; font-weight: 750; font-size: .85rem; text-decoration: none; }
.cp-bio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; }
.cp-bio div { display: grid; gap: 1px; }
.cp-bio dt { color: #9dacbf; font-size: .7rem; }
.cp-bio dd { margin: 0; color: #e6edf6; font-size: .83rem; font-weight: 650; }
.cp-stars-line { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; }
.cp-stars-line > span { display: flex; align-items: center; gap: 7px; }
.cp-stars-line small { color: #94a5ba; font-size: .73rem; }
.cp-stars-line b { color: #aad5ff; font-size: .88rem; letter-spacing: .06em; }
.cp-stars-line i { color: #58687c; font-style: normal; }
.cp-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.cp-actions form { margin: 0; }
.cp-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; max-width: 100%; padding: 9px 13px; border: 1px solid var(--panel-border); border-radius: var(--radius-control); background: var(--control-fill); color: #e1ecfa; font-size: .82rem; font-weight: 650; text-decoration: none; line-height: 1.4; }
.cp-button svg { flex: 0 0 auto; }
.cp-button:hover { background: #293e55; border-color: #79b9ff; }
.cp-button--primary { color: var(--button-ink); background: var(--button-fill); border-color: #4c96ed; }
.cp-button--primary:hover { background: #257ee8; }
.cp-button[aria-pressed="true"] { background: #163955; border-color: #71b4f4; color: #d8edff; }
.cp-button:disabled { cursor: wait; opacity: .6; }
.cp-button--icon { padding: 10px; }
.cp-status { margin: 8px 0 0; color: #b7dcff; font-size: .8rem; line-height: 1.5; text-align: right; }
.cp-metrics { display: grid; grid-template-columns: repeat(2,minmax(min-content,1fr)) minmax(max-content,1.5fr) minmax(max-content,1.15fr); gap: 8px; }
.cp-metric { position: relative; overflow: hidden; min-width: 0; min-height: 82px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 8px 6px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--panel-fill); box-shadow: var(--panel-shadow); text-align: center; }
.cp-metric > span { color: #b0bfd1; font-size: .75rem; font-weight: 650; letter-spacing: .01em; text-transform: uppercase; }

.cp-score { display: inline-grid; place-items: center; flex-shrink: 0; min-width: 34px; height: 34px; padding: 4px; border-radius: 6px; color: var(--rating-ink,#fff); background: var(--rating-bg,#263342); font-size: .9rem; font-weight: 740; line-height: 1; font-variant-numeric: tabular-nums; }
.cp-metric--rating > .cp-score { width: 42px; height: 42px; border-radius: 8px; font-size: 1.65rem; }
.cp-metric--money > strong { white-space: nowrap; font-size: 1.35rem; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.cp-section-nav { position: sticky; top: var(--header-height); z-index: 12; margin: 2px 0 10px; box-shadow: 0 8px 20px #00000010; }
.cp-layout { display: grid; grid-template-columns: 290px minmax(0,1fr); align-items: start; gap: 14px; }
.cp-panel { min-width: 0; padding: 14px; border: 1px solid var(--panel-border); border-radius: var(--radius-panel); background: var(--panel-fill); box-shadow: var(--panel-shadow); }
.cp-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cp-section-heading .cp-kicker { display: none; }
.cp-page h2 { margin: 0; font-size: 1.16rem; line-height: 1.3; letter-spacing: -.025em; font-weight: 650; }


.cp-position-panel { padding: 12px; }
.cp-pitch { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); grid-template-rows: repeat(7,minmax(40px,1fr)); gap: 0; align-items: center; padding: 6px; min-height: 294px; border: 1px solid #5b94c93b; border-radius: 12px; background: repeating-linear-gradient(0deg,#1b385126 0 14%,#18314a0a 14% 28%),linear-gradient(150deg,#10283b,#15212d); }
.cp-pitch__lines { position: absolute; width: 100%; height: 100%; inset: 0; color: #81b1d934; pointer-events: none; }
.cp-pitch-position { z-index: 1; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 40px; min-width: 0; padding: 2px 1px; border: 1px solid transparent; border-radius: 7px; color: #aac0d7; background: transparent; }
.cp-pitch-position > span { font-size: .75rem; font-weight: 750; }
.cp-pitch-position .cp-score { min-width: 28px; width: 28px; height: 24px; font-size: .85rem; border-radius: 5px; opacity: 1; }
.cp-pitch-position.is-primary { border-color: #7ac0ff; background: #1e4b6e; color: #e4f3ff; box-shadow: 0 0 10px #3f93d520; }
.cp-pitch-position.is-primary .cp-score,.cp-pitch-position[aria-pressed="true"] .cp-score { opacity: 1; }
.cp-pitch-position:is(:hover,[aria-pressed="true"]) { background: #335776; color: #fff; border-color: #c4e4ff; }
.cp-pitch-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin: 6px 0 4px; color: #a3b4c7; font-size: .68rem; }
.cp-pitch-caption > span { display: inline-flex; align-items: center; gap: 6px; }
.cp-pitch-caption i { display: inline-block; width: 9px; height: 9px; border: 1px solid #9accff; border-radius: 3px; background: #326387; }
.cp-position-reading { margin: 4px 0 0; color: #c0d5ec; font-size: .77rem; line-height: 1.45; }
.cp-note { margin: 10px 0; color: #94a8c0; font-size: .78rem; line-height: 1.6; }
.cp-playstyles { border-top: 1px solid var(--panel-border); margin-top: 8px; padding-top: 8px; }
.cp-playstyles ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cp-playstyles li { display: block; margin: 0; padding: 0; }
.cp-playstyles li img { flex: 0 0 auto; }
.cp-playstyles .is-plus { border-color: #d8b75a80; background: #3b321a; color: #ffe49a; }
.cp-style-plus { position: absolute; right: 3px; top: -3px; color: #a5d2ff; font-size: 1rem; }
.cp-style-fallback { display: grid; place-items: center; flex: 0 0 30px; }
.cp-main { display: grid; gap: var(--section-gap); min-width: 0; }
.cp-attribute-search { display: flex; align-items: center; gap: 8px; width: 230px; max-width: 55%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--control-fill); color: #a3b8cd; }
.cp-attribute-search input { min-width: 0; width: 100%; color: #e4edf9; background: transparent; border: 0; font-size: .84rem; }
.cp-attribute-search input::placeholder { color: #8da1ba; }
.cp-attribute-search svg { flex-shrink: 0; }
.cp-attributes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 26px; }
.cp-attribute-category { min-width: 0; }
.cp-attribute-category h3 { margin: 0 0 7px; padding-bottom: 8px; border-bottom: 1px solid #6b86a42e; color: #d2e4fa; font-size: .86rem; line-height: 1.4; }
.cp-attribute-category dl { margin: 0; display: grid; gap: 0; }
.cp-attribute { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 32px; padding: 3px 0; border-radius: 5px; }
.cp-attribute dt { color: #b8c6d6; font-size: .875rem; line-height: 1.4; }
.cp-attribute dd { display: flex; align-items: center; gap: 8px; margin: 0; }
.cp-attribute .cp-score { width: 30px; min-width: 30px; height: 26px; font-size: .82rem; }
.cp-attribute-bar { display: block; width: 36px; height: 3px; background: #ffffff0c; border-radius: 3px; overflow: hidden; }
.cp-attribute-bar i { display: block; width: 100%; height: 100%; background: var(--rating-bg,#718399); transform: scaleX(calc(var(--attribute-score)/99)); transform-origin: left; }
.cp-contract__body { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 24px; }
.cp-contract__club { display: grid; align-content: start; justify-items: start; gap: 12px; }
.cp-contract__club img { object-fit: contain; }
.cp-contract__club strong { font-size: 1rem; }
.cp-contract__club > span { color: #9cadc0; font-size: .78rem; }
.cp-contract__club a { min-height: 44px; padding-top: 8px; color: #94c8ff; font-size: .78rem; }
.cp-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 22px; margin: 0; }
.cp-facts > div { display: grid; align-content: center; gap: 4px; padding: 12px 0; border-bottom: 1px solid #ffffff0e; }
.cp-facts dt { font-size: .74rem; color: #94a7bf; line-height: 1.4; }
.cp-facts dd { margin: 0; font-size: .9rem; font-weight: 600; color: #dce7f4; line-height: 1.5; }
.cp-comparison { margin-top: 0; }
.cp-comparison__count { padding: 7px 10px; border: 1px solid #5990c14d; border-radius: 8px; color: #b7d8fb; font-size: .78rem; }
.cp-comparison[open] .cp-comparison__content { padding-top: 0; }
.cp-compare-search { max-width: 650px; }
.cp-compare-search label { display: block; margin-bottom: 10px; font-size: .88rem; color: #bacce1; }
.cp-compare-search > div { display: flex; gap: 8px; }
.cp-compare-search input { width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px; border: 1px solid #5e7e9f66; border-radius: 10px; background: #0d1926; color: #ecf4ff; font-size: .9rem; }
.cp-compare-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; list-style: none; padding: 0; margin: 16px 0; }
.cp-compare-results a { display: grid; grid-template-columns: 42px minmax(0,1fr) 34px; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #91b6db22; border-radius: 12px; color: #e5effc; background: #1b2a3c; text-decoration: none; }
.cp-compare-results a:hover { border-color: #a4c9f1; background: #233a53; }
.cp-compare-results img { object-fit: contain; }
.cp-compare-results strong { display: block; font-size: .92rem; line-height: 1.4; }
.cp-compare-results small { display: block; margin-top: 4px; color: #9db3cd; font-size: .75rem; overflow-wrap: break-word; }
.cp-compare-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-top: 8px; }
.cp-compare-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: .78rem; line-height: 1.5; color: #b6c5d5; }
.cp-compare-legend__higher { color: #75e5a4; }
.cp-compare-legend__lower { color: #ff919b; }
.cp-compare-clear { display: inline-flex; align-items: center; min-height: 44px; color: #9ecaff; font-size: .8rem; }
.cp-compare-context { margin: 0 0 6px; color: #a7b8cb; font-size: .76rem; line-height: 1.5; }
.cp-compare-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin-top: 8px; font-variant-numeric: tabular-nums; }
.cp-compare-table th,.cp-compare-table td { width: 32%; padding: 10px; text-align: center; font-size: .86rem; overflow-wrap: break-word; word-break: normal; border-bottom: 1px solid #ffffff10; }
.cp-compare-table th:first-child { width: 36%; text-align: left; }
.cp-compare-table thead th { position: sticky; top: calc(var(--header-height) + var(--cp-tabs-height, 56px) + 6px); z-index: 5; background: #1b2d40; color: #e8f1fc; font-weight: 650; line-height: 1.4; border-bottom-color: #7398c54d; box-shadow: 0 5px 8px #07101b22; }
.cp-compare-table thead th:first-child { border-top-left-radius: 8px; }
.cp-compare-table thead th:last-child { border-top-right-radius: 8px; }
.cp-compare-table tbody th { color: #b4c6db; font-weight: 500; }
.cp-compare-person { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.cp-compare-person > span { min-width: 0; overflow-wrap: anywhere; word-break: normal; }
.cp-compare-person img { flex: 0 0 36px; width: 36px; height: 40px; object-fit: contain; }
.cp-compare-cell { --compare-ink: #d7e3f2; --compare-fill: #ffffff03; color: var(--compare-ink); background: var(--compare-fill); }
.cp-compare-cell--higher { --compare-ink: #75e5a4; --compare-fill: #234c361f; }
.cp-compare-cell--lower { --compare-ink: #ff919b; --compare-fill: #71343b1a; }
.cp-compare-cell--equal { --compare-ink: #c4d2e3; }
.cp-compare-value { display: inline-block; font-size: 1rem; font-weight: 720; line-height: 1.5; color: inherit; }
.cp-compare-delta { display: inline-block; margin-inline-start: 7px; padding: 1px 5px; border: 1px solid currentColor; border-radius: 5px; font-size: .72rem; font-weight: 650; line-height: 1.4; white-space: nowrap; vertical-align: middle; }
.cp-compare-attributes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 18px; margin-top: 18px; }
.cp-compare-attributes details { min-width: 0; border: 1px solid #7398c52b; border-radius: 12px; padding: 14px; }
.cp-compare-attributes summary { min-height: 44px; padding-block: 10px; color: #cbdff7; font-size: .9rem; cursor: pointer; }
.cp-compare-attributes .cp-compare-table th,.cp-compare-attributes .cp-compare-table td { padding: 10px 7px; font-size: .82rem; }
.cp-compare-attributes .cp-compare-value { display: block; }
.cp-compare-attributes .cp-compare-delta { margin-inline-start: 0; }
.cp-compare-attributes .cp-compare-person { display: block; }
.cp-statistics { margin-top: 24px; }
.cp-share-dialog { width: min(520px,calc(100% - 32px)); padding: 24px; border: 1px solid #83b7f159; border-radius: 20px; background: #152337; color: #e1edfc; }
.cp-share-dialog::backdrop { background: #040914b8; }
.cp-share-dialog form { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.cp-share-dialog p { color: #a6b9d1; font-size: .86rem; margin-block: 16px; }
.cp-share-dialog input { width: 100%; min-height: 48px; padding: 10px; border: 1px solid #54789c; border-radius: 8px; background: #0b192b; color: #cae3ff; font-size: 1rem; }
.cp-unavailable { min-height: 50vh; padding-top: 36px; }
.cp-unavailable h1 { max-width: 760px; font-size: clamp(2rem,3.5vw,3rem); letter-spacing: -.04em; line-height: 1.1; }
.cp-unavailable > p:not(.cp-kicker) { max-width: 600px; color: #a6b9d0; line-height: 1.6; margin-bottom: 28px; }
.cp-summary { min-width: 0; container: player-summary / inline-size; }
.cp-identity__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px; }
.cp-status:empty { margin: 0; }
.cp-style-button { position: relative; display: flex; align-items: center; gap: 7px; max-width: 100%; min-height: 44px; padding: 6px 9px; border: 1px solid var(--panel-border); border-radius: 8px; color: #d8e6f6; background: var(--control-fill); text-align: left; }
.cp-style-name { position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%);font-size:.75rem;font-weight:650;line-height:1.3;white-space:nowrap;padding:8px 10px;border-radius:7px;border:1px solid #34485e;background:#0c1522;color:#fff;opacity:0;visibility:hidden;pointer-events:none;z-index:5; }
.cp-style-button{width:48px;height:48px;padding:8px;justify-content:center;flex-shrink:0;}
.cp-style-button:is(:hover,:focus-visible) .cp-style-name{opacity:1;visibility:visible}
.cp-style-button.is-plus{background:#332a16;color:#f4cb6c;border-color:#8e7032}
.cp-style-button.is-plus img { filter: brightness(0) saturate(100%) invert(84%) sepia(45%) saturate(700%) hue-rotate(345deg) brightness(101%) contrast(93%); }
.cp-style-button:is(:hover,:focus-visible,[aria-pressed="true"]) { border-color: #8ebced; background: #263f56; }
.cp-style-reading { min-height: 18px; margin: 6px 0 0; color: #acc9e6; font-size: .78rem; line-height: 1.4; }
.cp-attribute:hover { background: #62a9ff12; }
.cp-page.is-tabbed .cp-main:not(:has(> [data-tab-panel]:not([hidden]))) { display: none; }
@media (min-width: 1700px) {
  .cp-layout { grid-template-columns: 310px minmax(0,1fr); }
  .cp-hero { grid-template-columns: 138px minmax(0,1fr) 456px; gap: 20px; }
  .cp-portrait { width: 138px; height: 140px; }
  .cp-attributes { gap: 20px 32px; }
  .cp-attribute-bar { width: 70px; }
  .cp-facts { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 1439px) { .cp-attribute-bar { display: none; } .cp-facts { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 1099px) {
  .cp-hero { grid-template-columns: 110px minmax(0,1fr); gap: 14px 18px; }
  .cp-portrait { width: 110px; height: 134px; }
  .cp-summary { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px 16px; }
  .cp-actions { margin-top: 0; }
  .cp-metric { min-height: 90px; }
  .cp-status { grid-column: 1 / -1; }
  .cp-layout { display: flex; flex-direction: column; }
  .cp-position-panel,.cp-main { width: 100%; }
  .cp-position-panel .cp-pitch { max-width: 400px; margin-inline: auto; grid-template-rows: repeat(7,minmax(44px,1fr)); min-height: 344px; }
  .cp-position-panel .cp-playstyles { max-width: 650px; margin-inline: auto; }
  .cp-attributes { gap: 20px; }
}
@media (max-width: 767px) {
  .cp-page { padding-top: 8px; }
  .cp-back { min-height: 44px; }
  .cp-hero { grid-template-columns: 90px minmax(0,1fr); gap: 12px; padding-top: 4px; }
  .cp-portrait { width: 90px; height: 120px; }
  .cp-identity h1 { font-size: 1.4rem; }
  .cp-identity__entities a { min-height: 28px; font-size: .76rem; }
  .cp-identity__entities img { width: 20px; height: 20px; }
  .cp-identity__facts { gap: 8px; margin-top: 8px; }
  .cp-bio { gap: 6px 10px; }
  .cp-position { min-width: 44px; min-height: 44px; }
  .cp-stars-line { gap: 4px 12px; }
  .cp-stars-line > span { gap: 5px; }
  .cp-stars-line small { font-size: .68rem; }
  .cp-stars-line b { font-size: .78rem; }
  .cp-summary { display: block; }
  .cp-metrics { gap: 6px; }
  .cp-metric { min-height: 92px; padding-inline: 4px; border-radius: 10px; }
  .cp-metric--money > strong { font-size: 1.1rem; }
  .cp-metric--rating > .cp-score { width: 40px; height: 40px; font-size: 1.5rem; }
  .cp-metric > span { font-size: .7rem; }
  .cp-actions { justify-content: stretch; margin-top: 10px; }
  .cp-actions > form,.cp-actions > .cp-button:not(.cp-button--icon) { flex: 1; }
  .cp-actions form > button { width: 100%; }
  .cp-section-nav { margin-bottom: 12px; }
  .cp-section-nav a { flex: 1 1 calc(50% - 8px); }
  .cp-panel { padding: 16px; }
  .cp-attributes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 18px; }
  .cp-attribute-search input,.cp-compare-search input { font-size: 16px; }
  .cp-attribute-bar { display: none; }
  .cp-contract__body { grid-template-columns: 1fr; gap: 18px; }
  .cp-contract__club { grid-template-columns: 60px minmax(0,1fr); align-items: center; column-gap: 12px; row-gap: 5px; }
  .cp-contract__club img { grid-row: 1 / 4; width: 60px; height: 60px; }
  .cp-facts { gap: 0 16px; }
  .cp-compare-results,.cp-compare-attributes { grid-template-columns: 1fr; }
  .cp-compare-table { display: block; }
  .cp-compare-table thead { position: sticky; top: calc(var(--header-height) + var(--cp-tabs-height, 110px) + 4px); z-index: 5; display: block; }
  .cp-compare-table thead tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cp-compare-table thead th { position: static; width: auto; padding: 10px 6px; }
  .cp-compare-table thead .cp-compare-table__label { display: none; }
  .cp-compare-table thead th:nth-child(2) { border-top-left-radius: 8px; }
  .cp-compare-table tbody { display: block; }
  .cp-compare-table tbody tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-bottom: 1px solid var(--panel-border); padding-block: 9px; }
  .cp-compare-table tbody th,.cp-compare-table tbody td { width: auto; border: 0; font-size: .86rem; }
  .cp-compare-table tbody th:first-child { width: auto; grid-column: 1 / -1; padding: 4px; text-align: center; font-size: .82rem; }
  .cp-compare-person { flex-direction: column; gap: 4px; }
  .cp-compare-person img { flex-basis: auto; }
  .cp-compare-person > span { font-size: .85rem; }
  .cp-compare-toolbar { gap: 0; }
  .cp-compare-legend { gap: 5px 12px; }
  .cp-compare-attributes .cp-compare-value { display: inline-block; }
  .cp-compare-attributes .cp-compare-delta { margin-inline-start: 6px; }

}
@media (max-width: 479px) {
  .cp-attributes { grid-template-columns: 1fr; gap: 18px; }
  .cp-attribute { min-height: 32px; }
  .cp-section-heading { flex-wrap: wrap; }
  .cp-attribute-search { width: 100%; max-width: 100%; }
  .cp-page h2 { font-size: 1.1rem; }
}
/* Keep full monetary values together; use pairs when the summary is narrow. */
@container player-summary (max-width: 22.5rem) {
  .cp-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 389px) {
  .cp-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@keyframes cp-reveal { from { opacity: .3; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cp-portrait-light { from { opacity: .35; } to { opacity: 1; } }
@keyframes cp-score-reveal { from { transform: scale(.9); } to { transform: scale(1); } }
@keyframes cp-bar-reveal { from { transform: scaleX(0); } to { transform: scaleX(calc(var(--attribute-score)/99)); } }
@media (prefers-reduced-motion: no-preference) {
  .cp-hero { animation: cp-reveal 420ms var(--motion-ease); }
  .cp-portrait__halo { animation: cp-portrait-light 1600ms ease-out; }
  .cp-portrait.is-portrait-ready > img { animation: cp-reveal 460ms var(--motion-ease); }
  .cp-position-panel { animation: cp-reveal 500ms var(--motion-ease); }
  .cp-attribute-category { animation: cp-reveal 500ms var(--motion-ease) backwards; }
  .cp-attribute-category:nth-child(2),.cp-attribute-category:nth-child(5) { animation-delay: 50ms; }
  .cp-attribute-category:nth-child(3),.cp-attribute-category:nth-child(6) { animation-delay: 100ms; }
  .cp-attribute-bar i { animation: cp-bar-reveal 650ms var(--motion-ease); }
  .cp-metric > .cp-score { animation: cp-score-reveal 380ms var(--motion-ease); }
  .cp-pitch-position[aria-pressed="true"] .cp-score { animation: cp-score-reveal 220ms var(--motion-ease); }
  .cp-compare-attributes details[open] > table { animation: platform-fade 180ms ease-out; }
  .cp-compare-cell { transition: background-color 160ms; }
  .cp-compare-table tbody tr:hover .cp-compare-cell { background: #6597ca12; }
  .cp-back > span { transition: transform 180ms var(--motion-ease); }
  .cp-back:is(:hover,:focus-visible) > span { transform: translateX(-3px); }
  .cp-button:active,.cp-style-button:active { transform: scale(.97); }

  .cp-button,.cp-position,.cp-style-button,.cp-pitch-position,.cp-compare-results a { transition: transform 180ms var(--motion-ease),background-color 180ms,border-color 180ms,box-shadow 180ms; }
  .cp-portrait > img { transition: transform 600ms var(--motion-ease); transform-origin: 50% 85%; }
  .cp-metric { transition: transform 240ms var(--motion-ease),border-color 240ms,box-shadow 240ms; }
  .cp-metric::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg,transparent 20%,#a2ceff0f 50%,transparent 80%); transform: translateX(-110%); transition: transform 650ms; }
  .cp-metric:hover::after { transform: translateX(110%); }
  .cp-metric:hover { border-color: #89b9eb4f; box-shadow: 0 10px 24px #0003; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .cp-button:hover,.cp-position:hover { transform: translateY(-2px); }
  .cp-portrait:hover > img { transform: scale(1.035); }
  .cp-metric:hover { transform: translateY(-2px); }
  .cp-style-button:hover { transform: translateY(-3px); border-color: #8ebced70; }
  .cp-pitch-position:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .cp-page *, .cp-page *::before, .cp-page *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

.cp-page:not(.is-tabbed) .cp-section-nav { position: static; }
.cp-position-reading:empty { display: none; }
.cp-playstyles .cp-section-heading { margin-bottom: 8px; }
@media (min-width: 1100px) { .cp-section-nav { padding: 3px; margin-bottom: 10px; } .cp-section-nav > a { min-height: 38px; } }

/* Historical squad context on player detail (career.34.9). */
.career-squad-version--detail { margin: 6px 0 10px; }
.career-squad-version--detail .cp-button { min-height: 42px; }
.cp-metric__rating { display: inline-flex !important; align-items: center; justify-content: center; gap: 5px; color: inherit !important; text-transform: none !important; }
.cp-metric--rating .cp-metric__rating > .cp-score { width: 42px; height: 42px; border-radius: 8px; font-size: 1.65rem; }
.cp-metric__rating .squad-delta { position: absolute; right: 7px; top: 7px; }
.cp-attribute-score { display: inline-flex; align-items: center; gap: 4px; }
.cp-attribute-score .squad-delta { min-width: 24px; min-height: 18px; padding-inline: 4px; font-size: .61rem; }
.cp-stars-line b { display: inline-flex; align-items: center; gap: 5px; }
.cp-stars-line .squad-delta { letter-spacing: normal; }
.cp-squad-changes { margin: 8px 0 12px; padding: 13px 14px; border: 1px solid var(--panel-border); border-radius: var(--radius-panel); background: linear-gradient(145deg,#101c29,#111923); box-shadow: var(--panel-shadow); }
.cp-squad-changes__heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.cp-squad-changes__heading .cp-kicker { margin-bottom: 3px; }
.cp-squad-changes__heading h2 { margin: 0; }
.cp-squad-changes__heading > span { color: #8fa4bb; font-size: .72rem; }
.cp-squad-changes__summary { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.cp-squad-changes__summary > span { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 5px 8px; border: 1px solid #7189a229; border-radius: 8px; background: #ffffff05; color: #becddd; font-size: .75rem; }
.cp-squad-changes__summary em { color: #9fb0c2; font-style: normal; }
.cp-squad-changes__list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px 12px; margin: 0; padding-top: 9px; border-top: 1px solid #7189a222; }
.cp-squad-changes__list > div { min-width: 0; display: grid; gap: 2px; padding: 5px 0; }
.cp-squad-changes__list dt { color: #8fa4bb; font-size: .67rem; font-weight: 750; text-transform: uppercase; }
.cp-squad-changes__list dd { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: .78rem; }
.cp-squad-changes__list dd span { color: #8fa0b2; text-decoration: line-through; text-decoration-color: #ff7d8a80; }
.cp-squad-changes__list dd i { color: #687d92; font-style: normal; }
.cp-squad-changes__list dd strong { color: #e6f0fb; }
@media (max-width: 900px) { .cp-squad-changes__list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px) {
  .cp-squad-changes__heading { display: grid; align-items: start; gap: 4px; }
  .cp-squad-changes__list { grid-template-columns: 1fr; }
  .cp-metric__rating .squad-delta { right: 4px; top: 4px; }
}

/* v35.2 — finance provenance: FC27 launch Squad files do not yet expose verified finance. */
.cp-source-badge { display:inline-flex; margin-left:5px; padding:2px 5px; border:1px solid #75839855; border-radius:999px; color:#94a5ba; font-size:.55rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; }
.cp-metric--money.is-legacy strong { color:#d8e0ea; }
.cp-style-reading:empty{display:none}.cp-irl-season{display:flex;gap:12px;align-items:end;margin:20px 0}.cp-irl-season label{display:grid;gap:8px;font-size:13px;color:#afbdd0}.cp-irl-season select{padding:12px;color:#fff;background:#1a2637;border:1px solid #344357;border-radius:9px;max-width:100%;min-width:0}.cp-irl-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:24px 0}.cp-irl-metrics article{background:#142238;border:1px solid #293c56;border-radius:12px;padding:18px}.cp-irl-metrics span{font-size:12px;color:#a1b5d0}.cp-irl-metrics strong{display:block;font-size:28px;margin-top:8px}.cp-irl-groups{display:grid;grid-template-columns:1fr 1fr;gap:24px}.cp-irl-groups h3{font-size:16px;color:#fff}.cp-irl-groups dl>div{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid #283346;font-size:14px}.cp-irl-groups dt{color:#aebcd0}.cp-irl-groups dd{margin:0;font-weight:700}.cp-irl-context{color:#a7bbd5}.cp-irl-empty{padding:36px 0}.cp-irl-empty p{color:#9eafc3;line-height:1.7}.cp-player-irl .cp-note{margin-top:24px}.cp-playstyles ul{gap:10px}.cp-style-button.is-plus:is(:hover,:focus-visible){border-color:#f6d17d;background:#4a3a1e}
@media(max-width:760px){.cp-irl-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.cp-irl-groups{grid-template-columns:1fr}.cp-irl-season{flex-wrap:wrap}.cp-irl-season label{max-width:100%}.cp-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Attribute families open individually, including without JavaScript. */
.cp-attributes{align-items:start;gap:12px}
.cp-attribute-category{border:1px solid var(--panel-border);border-radius:12px;background:#0b162366;overflow:hidden}
.cp-attribute-category summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:14px 16px;cursor:pointer;list-style:none}
.cp-attribute-category summary::-webkit-details-marker{display:none}
.cp-attribute-category summary h3{margin:0;padding:0;border:0;font-size:.88rem}
.cp-attribute-category summary:focus-visible{outline:2px solid #248cff;outline-offset:-3px}
.cp-attribute-category .cp-attribute-toggle{font-size:20px;font-weight:400;color:#829fbb;transition:transform 160ms}
.cp-attribute-category[open] .cp-attribute-toggle{transform:rotate(45deg)}
.cp-attribute-category[open] summary{border-bottom:1px solid var(--panel-border)}
.cp-attribute-category dl{padding:8px 14px 12px}

/* Real-world summary uses the same quiet, expandable groups as attributes. */
.cp-irl-metrics article>span{display:flex;align-items:center;gap:7px;line-height:1.3}.cp-irl-metrics svg{flex:0 0 16px;color:#8ebce9}.cp-irl-group{align-self:start;background:#101a24;border:1px solid #ffffff12;border-radius:12px;overflow:hidden}.cp-irl-group>summary{padding:15px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none}.cp-irl-group>summary::-webkit-details-marker{display:none}.cp-irl-group h3{margin:0;font-size:14px;color:#cbdaf0}.cp-irl-group>summary>span{color:#83a3c3}.cp-irl-group[open]>summary>span{transform:rotate(45deg)}.cp-irl-group>dl{margin:0;padding:0 16px 14px}.cp-irl-group dl>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:12px;color:#a7b9cb}.cp-irl-group dd{margin:0;color:#edf5ff;font-variant-numeric:tabular-nums}@media(max-width:600px){.cp-irl-metrics article>span{font-size:10px;gap:5px}.cp-irl-metrics svg{width:14px;height:14px;flex-basis:14px}}

/* Desktop keeps the complete attribute overview visible. */
.cp-estimate-mark{font-size:.65em;opacity:.8;margin-right:1px}
@media(min-width:901px){.cp-attribute-category>summary{cursor:default}.cp-attribute-category .cp-attribute-toggle{display:none}}
.cp-pitch-position .cp-score:has(.cp-estimate-mark){display:inline-flex;align-items:center;justify-content:center;gap:1px;min-width:31px;width:auto;padding:3px}.cp-pitch-position .cp-estimate-mark{margin:0;line-height:1}

.cp-knowledge{padding:16px 18px;margin:12px 0 22px;border:1px solid #ffffff14;border-radius:14px;background:#0c152180}.cp-knowledge-heading{display:flex;justify-content:space-between;align-items:center;gap:14px}.cp-knowledge-heading h3{font-size:14px;margin:0}.cp-knowledge-heading a{font-size:12px;color:#85bdff}.cp-knowledge dl{display:flex;gap:14px 36px;flex-wrap:wrap;margin:14px 0}.cp-knowledge dt{font-size:11px;color:#8ea6c0}.cp-knowledge dd{font-size:14px;font-weight:600;margin:5px 0 0}.cp-knowledge>p{font-size:10px;color:#8297af;margin:0}.cp-player-irl .cp-irl-empty:has(+.cp-knowledge){padding:16px}.cp-player-irl:has(.cp-knowledge) .cp-irl-empty{padding:18px 0;background:none;border:0}.cp-player-irl:has(.cp-knowledge) .cp-irl-empty h3{font-size:15px}.cp-player-irl:has(.cp-knowledge) .cp-irl-empty p{font-size:13px}
@media(max-width:760px){.cp-knowledge{padding:14px}.cp-knowledge dl{gap:14px 24px}.cp-knowledge dd{font-size:13px}.cp-knowledge-heading h3{font-size:13px}.cp-knowledge-heading a{white-space:nowrap}}

/* 49.29: visible read errors and a keyboard/touch accessible retry. */
.cp-search-feedback{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.cp-search-feedback>p:empty{display:none}
.cp-search-feedback>[hidden],[data-player-favorite-check][hidden]{display:none}
.cp-search-feedback>.cp-button{min-height:40px;margin-block:10px}
[data-compare-results].is-stale{opacity:.5;pointer-events:none}
[data-player-favorite-check]{display:block;margin-top:8px;color:#9cd4ff;font-size:.8rem;line-height:1.5;text-underline-offset:3px;overflow-wrap:anywhere}