@import url("styles.20260804-roster-filter-01.css");

.identity-v2 {
  --ink: #061729;
  --surface: #0b2138;
  --surface-raised: #102d4b;
  --paper: #f7f3e9;
  --muted: #667486;
  --gold: #d39a17;
  --gold-light: #f1c451;
  --red: #c40d27;
  --green: #087643;
  --blue: #0874c9;
  --line: rgba(211, 154, 23, 0.25);
  color: var(--ink);
  background: #f3efe5;
}

.identity-v2 .site-header {
  color: var(--ink);
  border-color: rgba(6, 23, 41, 0.16);
}

.identity-v2 .brand img {
  padding: 2px;
  background: #fff;
  border: 2px solid var(--gold);
}

.identity-v2 nav {
  color: #526174;
}

.identity-v2 nav a:hover,
.identity-v2 nav a:focus-visible {
  color: var(--red);
}

.identity-v2 .header-cta {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.identity-v2 .header-cta:hover,
.identity-v2 .header-cta:focus-visible {
  color: var(--ink);
  background: var(--gold-light);
  border-color: var(--gold);
}

.identity-v2 .hero {
  color: var(--ink);
}

.identity-v2 .hero::before {
  background:
    linear-gradient(90deg, rgba(247, 243, 233, 0.98) 0%, rgba(247, 243, 233, 0.91) 49%, rgba(247, 243, 233, 0.5) 100%),
    repeating-linear-gradient(90deg, transparent 0 89px, rgba(6, 23, 41, 0.045) 90px),
    linear-gradient(135deg, #fff, #dfe8ef 58%);
}

.identity-v2 .hero::after {
  right: -7vw;
  bottom: -45vw;
  border-color: rgba(8, 116, 201, 0.24);
  box-shadow: 0 0 0 10vw rgba(196, 13, 39, 0.035), 0 0 0 20vw rgba(8, 116, 201, 0.035);
}

.identity-v2 .hero-glow {
  right: 2%;
  background: radial-gradient(circle at 35% 40%, rgba(196, 13, 39, 0.2), transparent 45%),
    radial-gradient(circle at 65% 60%, rgba(8, 116, 201, 0.22), transparent 52%);
}

.identity-v2 .eyebrow {
  color: var(--blue);
}

.identity-v2 .eyebrow span {
  background: linear-gradient(90deg, var(--red) 0 46%, var(--gold) 46% 54%, var(--blue) 54%);
}

.identity-v2 h1 em {
  -webkit-text-stroke-color: var(--red);
}

.identity-v2 .hero-lede {
  color: #536274;
}

.identity-v2 .button-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--red), #9b061b);
  box-shadow: 0 12px 34px rgba(196, 13, 39, 0.22);
}

.identity-v2 .button-primary:hover,
.identity-v2 .button-primary:focus-visible {
  box-shadow: 0 16px 42px rgba(196, 13, 39, 0.3);
}

.identity-v2 .season-label {
  color: #7a8795;
}

.identity-v2 .season-label strong {
  color: var(--ink);
}

.identity-v2 .crest-stage img {
  border-radius: 0;
  filter: drop-shadow(0 28px 30px rgba(6, 23, 41, 0.18));
  mix-blend-mode: multiply;
}

.identity-v2 .crest-ring {
  border-color: rgba(196, 13, 39, 0.28);
  box-shadow: 0 0 0 28px rgba(8, 116, 201, 0.045);
}

.identity-v2 .crest-stage p {
  color: #fff;
  background: var(--ink);
  border-color: var(--red);
}

.identity-v2 .club-numbers {
  border-color: rgba(6, 23, 41, 0.16);
}

.identity-v2 .club-numbers div + div {
  border-color: rgba(6, 23, 41, 0.16);
}

.identity-v2 .club-numbers dd {
  color: #768393;
}

.identity-v2 .squad-section {
  color: var(--paper);
  background:
    linear-gradient(rgba(8, 116, 201, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 116, 201, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 15% 10%, rgba(196, 13, 39, 0.13), transparent 28rem),
    var(--ink);
  background-size: 52px 52px, 52px 52px, auto, auto;
}

.identity-v2 .squad-section .eyebrow {
  color: var(--gold-light);
}

.identity-v2 .section-heading > p {
  color: #9eb0c1;
}

.identity-v2 .roster-filters {
  background: rgba(16, 45, 75, 0.78);
  border-color: rgba(241, 196, 81, 0.24);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.identity-v2 .filter-field > span {
  color: #a9bbca;
}

.identity-v2 .filter-field select {
  color: #fff;
  background: #081d32;
  border-color: rgba(241, 196, 81, 0.36);
}

.identity-v2 .filter-result {
  color: var(--gold-light);
}

.identity-v2 .player-card {
  background: #0c243d;
  border-color: rgba(255, 255, 255, 0.11);
  border-top: 3px solid var(--blue);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
}

.identity-v2 .player-card:nth-child(3n + 2) {
  border-top-color: var(--red);
}

.identity-v2 .player-card:nth-child(3n) {
  border-top-color: var(--gold);
}

.identity-v2 .player-card:hover,
.identity-v2 .player-card:focus-visible,
.identity-v2 .player-card.is-selected {
  border-right-color: var(--gold);
  border-bottom-color: var(--gold);
  border-left-color: var(--gold);
}

.identity-v2 .player-advice {
  color: #fff;
  background: var(--red);
  border-color: var(--gold-light);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.identity-v2 .player-advice--secondary {
  background: var(--blue);
}

.identity-v2 .player-photo img {
  filter: saturate(0.88) contrast(1.04);
}

.identity-v2 .player-photo::after {
  background: linear-gradient(180deg, transparent 42%, rgba(4, 19, 34, 0.92) 100%);
}

.identity-v2 .player-role {
  color: var(--gold-light);
}

.identity-v2 .player-meta {
  background: #f8f4eb;
}

.identity-v2 .archetype {
  color: #44556a;
}

.identity-v2 .archetype-mark {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
}

.identity-v2 .archetype-mark img {
  filter: brightness(0) saturate(100%) invert(8%) sepia(22%) saturate(3234%) hue-rotate(174deg) brightness(94%);
}

.identity-v2 .archetype-mark + .archetype-mark {
  background: var(--gold-light);
}

.identity-v2 .build-link {
  color: var(--red);
  border-color: rgba(6, 23, 41, 0.15);
}

.identity-v2 .build-link[aria-disabled="true"] {
  color: #85909b;
}

.identity-v2 .player-placeholder {
  background:
    linear-gradient(145deg, rgba(8, 116, 201, 0.16), transparent 52%),
    repeating-linear-gradient(135deg, transparent 0 38px, rgba(196, 13, 39, 0.05) 39px 40px),
    #e8edf0;
}

.identity-v2 .player-placeholder img,
.identity-v2 .player-card:hover .player-placeholder img {
  opacity: 0.13;
  filter: none;
  mix-blend-mode: multiply;
}

.identity-v2 .coverage-section {
  color: var(--ink);
  background:
    radial-gradient(circle at 90% 8%, rgba(8, 116, 201, 0.12), transparent 26rem),
    #f3efe5;
}

.identity-v2 .coverage-heading > p {
  color: #627083;
}

.identity-v2 .coverage-overview {
  border-color: rgba(6, 23, 41, 0.16);
}

.identity-v2 .coverage-overview div + div {
  border-color: rgba(6, 23, 41, 0.16);
}

.identity-v2 .coverage-overview dd {
  color: #687789;
}

.identity-v2 .coverage-card {
  background: #fff;
  border-color: rgba(6, 23, 41, 0.14);
  box-shadow: 0 12px 28px rgba(6, 23, 41, 0.07);
}

.identity-v2 .coverage-code {
  color: #fff;
  background: var(--blue);
}

.identity-v2 .coverage-card:nth-child(2n) .coverage-code {
  background: var(--red);
}

.identity-v2 .coverage-status {
  color: #8a650b;
}

.identity-v2 .coverage-card[data-status="strong"] .coverage-status {
  color: #08633a;
}

.identity-v2 .coverage-count p,
.identity-v2 .coverage-depth,
.identity-v2 .coverage-names {
  color: #697789;
}

.identity-v2 .coverage-count strong {
  color: var(--ink);
}

.identity-v2 .coverage-card[data-status="strong"] .coverage-bar span {
  background: linear-gradient(90deg, var(--blue), #43a7eb);
}

.identity-v2 .club-story {
  background:
    linear-gradient(115deg, rgba(196, 13, 39, 0.98) 0 48%, rgba(8, 70, 128, 0.97) 48% 100%);
}

.identity-v2 .club-story::after {
  border-color: rgba(255, 255, 255, 0.17);
}

.identity-v2 .club-story .eyebrow {
  color: var(--gold-light);
}

.identity-v2 .formation-section {
  color: var(--paper);
  background:
    radial-gradient(circle at 12% 55%, rgba(196, 13, 39, 0.2), transparent 28rem),
    radial-gradient(circle at 88% 45%, rgba(8, 116, 201, 0.17), transparent 32rem),
    var(--ink);
}

.identity-v2 .formation-copy > p:not(.eyebrow),
.identity-v2 .selected-player p {
  color: #9cafc2;
}

.identity-v2 .formation-picker > span {
  color: #8fa2b5;
}

.identity-v2 .formation-picker select {
  background:
    linear-gradient(45deg, transparent 50%, var(--gold-light) 50%) calc(100% - 18px) 22px / 6px 6px no-repeat,
    linear-gradient(135deg, var(--gold-light) 50%, transparent 50%) calc(100% - 12px) 22px / 6px 6px no-repeat,
    #0d2742;
  border-color: rgba(255, 255, 255, 0.22);
}

.identity-v2 .formation-copy h2 span,
.identity-v2 .selected-player strong {
  color: var(--gold-light);
}

.identity-v2 .selected-player {
  border-color: var(--red);
  background: linear-gradient(90deg, rgba(196, 13, 39, 0.14), transparent);
}

.identity-v2 .formation-pitch {
  border-color: var(--gold-light);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 12.5%, rgba(0, 0, 0, 0.05) 12.5% 25%),
    linear-gradient(160deg, #0b5da0, #072e56);
}

.identity-v2 .jersey {
  color: var(--gold-light);
  background: linear-gradient(145deg, #0b2037, #020b14 72%);
}

.identity-v2 .jersey span::before {
  background: var(--red);
}

.identity-v2 .jersey span::after {
  background: var(--blue);
}

.identity-v2 .jersey-gk {
  color: var(--ink);
  background: linear-gradient(90deg, #d39a17, #f5d26e 48%, #be8205);
}

.identity-v2 .jersey-gk span::before,
.identity-v2 .jersey-gk span::after {
  background: var(--ink);
}

.identity-v2 .formation-slot small {
  background: rgba(3, 19, 35, 0.78);
}

.identity-v2 .formation-slot.is-active small {
  color: #fff;
  background: var(--red);
}

.identity-v2 footer {
  color: #8192a4;
  background: #03101e;
  border-top: 4px solid;
  border-image: linear-gradient(90deg, var(--red), var(--gold), var(--blue)) 1;
}

.identity-v2 footer p {
  color: #bac6d1;
}

@media (max-width: 720px) {
  .identity-v2 .site-header {
    color: var(--ink);
  }

  .identity-v2 .brand span {
    color: var(--ink);
  }

  .identity-v2 footer .brand span {
    color: var(--paper);
  }
}