/* Crests are source artwork, not cropped avatars.  Square frames keep round
   club marks completely visible while the default coloured flag stays intact. */
:root {
  --crest-glass-background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.4), transparent 44%),
    linear-gradient(145deg, rgba(225,241,248,.25), rgba(113,153,173,.13));
  --crest-glass-border:rgba(229,244,250,.38);
  --crest-glass-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(117,153,171,.12),
    0 5px 14px rgba(0,0,0,.24);
}
.team-crest-large,
.team-directory-crest,
.team-identity-preview > span,
.team-profile-crest-trigger,
.team-policy-name i,
.team-card-mark,
.event-team-row i,
.team-slot .team-mark,
.team-preview i:not(.team-flag),
.team-directory i:not(.team-flag),
.team-hero > i:not(.team-flag) {
  border-radius:4px !important;
}
.team-crest-large,
.team-directory-crest,
.team-identity-preview > span,
.team-profile-crest-trigger {
  display:grid;
  aspect-ratio:1;
  overflow:hidden;
  place-items:center;
}
.teams-directory-page .team-directory-crest { width:clamp(50px,3.3vw,66px) !important; height:clamp(50px,3.3vw,66px) !important; }
/* The sixteen-team selector is a denser, fixed-width index.  Its crest must
   stay inside the dedicated first grid column; the larger directory-card rule
   above is intentionally not allowed to expand into the team name. */
.teams-directory-page .team-selector-rail .team-directory-crest { width:30px !important; height:30px !important; min-width:30px; padding:1px; }
.event-team-row i { width:38px; height:38px; }
.team-crest-large img,
.team-directory-crest img,
.team-identity-preview > span > img,
.team-profile-crest-trigger img,
.team-card-mark img,
.event-team-row img,
.team-slot .team-mark img,
.team-policy-name i img,
.team-preview i img,
.team-directory i img,
.team-hero > i img {
  box-sizing:border-box;
  object-fit:contain !important;
  padding:2px;
}

/* Real crest artwork receives one consistent translucent support surface.
   Default generated flags keep their team-colour treatment. */
:is(
  .team-crest-large,
  .team-directory-crest,
  .team-identity-preview > span,
  .team-profile-crest-trigger,
  .team-policy-name i,
  .team-card-mark,
  .event-team-row i,
  .account-team-identity > i,
  .team-slot .team-mark:not(.flag),
  .bid-feed .feed-team-mark:not(.flag),
  .home-schedule-team em:not(.team-flag),
  .history-team-mark,
  .draw-team-slot > i:not(.team-flag),
  .standing-team > em:not(.team-flag),
  .fixture-queue-teams em:not(.team-flag),
  .playoff-qualification-slot em:not(.team-flag),
  .champion-callout em:not(.team-flag),
  .knockout-match em:not(.team-flag),
  .group-entry > i:not(.team-flag),
  .event-team-profile > i:not(.team-flag),
  .standing-card td > i:not(.team-flag),
  .team-preview > i:not(.team-flag),
  .team-directory i:not(.team-flag),
  .team-hero > i:not(.team-flag),
  .draw-reel-crest:not(.team-flag)
):has(> img) {
  box-sizing:border-box;
  border:1px solid var(--crest-glass-border) !important;
  border-radius:5px !important;
  background:var(--crest-glass-background) !important;
  box-shadow:var(--crest-glass-shadow) !important;
  -webkit-backdrop-filter:blur(9px) saturate(135%);
  backdrop-filter:blur(9px) saturate(135%);
}

:is(
  .team-slot .team-mark:not(.flag),
  .bid-feed .feed-team-mark:not(.flag),
  .home-schedule-team em:not(.team-flag),
  .history-team-mark,
  .draw-team-slot > i:not(.team-flag),
  .standing-team > em:not(.team-flag),
  .fixture-queue-teams em:not(.team-flag),
  .playoff-qualification-slot em:not(.team-flag),
  .champion-callout em:not(.team-flag),
  .knockout-match em:not(.team-flag),
  .group-entry > i:not(.team-flag),
  .event-team-profile > i:not(.team-flag),
  .standing-card td > i:not(.team-flag),
  .draw-reel-crest:not(.team-flag)
):has(> img) > img {
  box-sizing:border-box;
  padding:2px !important;
  object-fit:contain !important;
}

/* Club crests on player cards and thumbnails in crest selectors use the same
   support without inheriting the rectangular nationality-flag treatment. */
:is(.catalog-card-origins, .editor-card-origins) i.club:has(> img) {
  border:1px solid var(--crest-glass-border) !important;
  border-radius:5px !important;
  background:var(--crest-glass-background) !important;
  box-shadow:var(--crest-glass-shadow) !important;
  -webkit-backdrop-filter:blur(9px) saturate(135%);
  backdrop-filter:blur(9px) saturate(135%);
}
:is(.catalog-card-origins, .editor-card-origins) i.club:has(> img) > img {
  box-sizing:border-box;
  padding:2px !important;
  object-fit:contain !important;
}
.crest-library-grid img,
.crest-asset-card > header > img {
  box-sizing:border-box;
  padding:3px;
  border:1px solid var(--crest-glass-border);
  border-radius:5px;
  background:var(--crest-glass-background);
  box-shadow:var(--crest-glass-shadow);
  -webkit-backdrop-filter:blur(9px) saturate(135%);
  backdrop-filter:blur(9px) saturate(135%);
  object-fit:contain !important;
}
@media (min-width:2400px) { .teams-directory-page .team-selector-rail .team-directory-crest { width:34px !important; height:34px !important; min-width:34px; } }
