/*
 * team-crests.css — presentation for BWTeams.crestHtml() and its league marks.
 *
 * Loaded from base.html (and directly by live.html, which does not extend it),
 * so every surface that draws a team gets the same crest geometry.
 */

.bw-crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  vertical-align: middle;
  line-height: 1;
}
.bw-crest img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Crests are drawn for white backgrounds; a soft glow keeps the dark-navy
     ones (Nets, Spurs, Grizzlies, Ravens) from disappearing into a dark card. */
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.22));
}
.bw-crest.bw-crest-flat img { filter: none; }

/* Shown when the crest image fails, or when the league/team has no logo to
   key on. A brand-coloured disc carrying the abbreviation — the same
   affordance these surfaces used before crests existed. */
.bw-crest-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-align: center;
  /* Scales with the wrapper so one rule serves every size. */
  font-size: 0.36em;
  box-sizing: border-box;
  border: 1px solid var(--glass-border2);
}

.bw-crest-xs   { width: 16px; height: 16px; font-size: 16px; }
.bw-crest-sm   { width: 20px; height: 20px; font-size: 20px; }
.bw-crest-md   { width: 28px; height: 28px; font-size: 28px; }
.bw-crest-lg   { width: 42px; height: 42px; font-size: 42px; }
.bw-crest-xl   { width: 64px; height: 64px; font-size: 64px; }
.bw-crest-hero { width: 96px; height: 96px; font-size: 96px; }

/* The smallest discs cannot fit three glyphs at 0.36em without clipping. */
.bw-crest-xs .bw-crest-fallback { font-size: 0.34em; letter-spacing: 0; }

/* ── League marks ──────────────────────────────────────────────────────
   Background images rather than <img> tags: a blocked or 404'd logo simply
   doesn't paint — no broken-image glyph, and no DOM mutation that would make
   a keyed reconcile repaint every row. Wordmarks accompany them, so a badge
   still reads correctly with no logo at all. */
.bw-league-logo {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));
}
.bw-league-logo[data-league="nba"]   { background-image: url('https://a.espncdn.com/i/teamlogos/leagues/500/nba.png'); }
.bw-league-logo[data-league="nfl"]   { background-image: url('https://a.espncdn.com/i/teamlogos/leagues/500/nfl.png'); }
.bw-league-logo[data-league="mlb"]   { background-image: url('https://a.espncdn.com/i/teamlogos/leagues/500/mlb.png'); }
.bw-league-logo[data-league="nhl"]   { background-image: url('https://a.espncdn.com/i/teamlogos/leagues/500/nhl.png'); }
/* The NCAA governs both college leagues, so they share one mark. It is served
   from here because ESPN has no league logo at teamlogos/leagues/500/ncaa.png
   (the badge painted blank). The lettering is outlined, so it needs no font. */
.bw-league-logo[data-league="ncaab"],
.bw-league-logo[data-league="ncaaf"] { background-image: url('../img/leagues/ncaa.svg'); }
.bw-league-logo[data-league="fifa"]  { background-image: url('https://a.espncdn.com/i/leaguelogos/soccer/500/9.png'); }
.bw-league-logo[data-league="epl"]   { background-image: url('https://a.espncdn.com/i/leaguelogos/soccer/500/23.png'); }

.bw-league-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 2px 8px 2px 4px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg2);
  font-family: 'Inter', sans-serif;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text2, #c8d0da);
}
/* For hosts that already supply their own frame and type. */
.bw-league-badge.is-bare {
  padding: 0;
  border: none;
  background: none;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}