/* GENERATED by frontend/scripts/ui-contract-css.mjs from the game's own
   component styles (ADR-0039). Do not edit: change the SCSS and rerun. */
/* src/app/shared/ui/rank-badge/rank-badge.scss */
app-rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  inline-size: var(--rank-badge);
  block-size: var(--rank-badge);
  aspect-ratio: 1;
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-muted);
  background: var(--bg-elev-2);
}

app-rank-badge.rank--4 {
  font-size: var(--fs-2xs);
}

app-rank-badge.rank--wide {
  inline-size: auto;
  min-inline-size: var(--rank-badge);
  aspect-ratio: auto;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
}

app-rank-badge.rank--tier-1 {
  background: var(--accent);
  color: var(--accent-ink);
}

app-rank-badge.rank--tier-2 {
  background: color-mix(in srgb, var(--accent) 55%, var(--bg-elev-2));
  color: var(--accent-ink);
}

app-rank-badge.rank--tier-3 {
  background: color-mix(in srgb, var(--accent) 28%, var(--bg-elev-2));
  color: var(--text);
}

/* src/app/shared/ui/club-badge/club-badge.scss */
@charset "UTF-8";
/* The host IS the badge's box. Left inline (the default for a custom
   element), it wrapped the badge in a line box: the inline-flex chip sat on
   the text baseline with descender room below it, so the host stood ~3px
   taller than the badge (23px for the 20px xs, measured) and, centred in a
   fixed slot, pushed the crest past the slot's edges — where a row's
   overflow:hidden cut the top of the crest off (a crown, a star; worse in
   Safari, whose font metrics leave more room). As a flex box of its own it
   has no line box, so its height is exactly the size's. */
app-club-badge {
  display: inline-flex;
  flex: none;
}

/* The same wordmark chip the landing site renders: a club code over the club's
   own two-stop gradient, dark ink, rectangular. Rectangular on purpose — three
   characters cramp a square, and a wide chip is visibly not a crest outline.
   Ink is fixed dark because every colour is clamped into a light band at
   ingest. Kept in step with landing/static/style.css `.badge`, so a club looks
   the same in the game and on the site. */
app-club-badge .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0a0e12;
  background: linear-gradient(140deg, var(--club-colour), var(--club-colour-2));
  border-radius: 12px;
  line-height: 1;
  user-select: none;
}

app-club-badge .badge--xs {
  width: var(--identity-badge);
  height: var(--identity-badge);
  border-radius: 50%;
  background-clip: content-box;
  padding: 2px;
  box-sizing: border-box;
}

app-club-badge .badge--sm {
  width: var(--badge-sm-w);
  height: var(--badge-sm-h);
  font-size: 0.8rem;
  border-radius: 8px;
}

app-club-badge .badge--md {
  width: var(--badge-md-w);
  height: var(--badge-md-h);
  font-size: 1.05rem;
}

app-club-badge .badge--lg {
  width: var(--badge-lg-w);
  height: var(--badge-lg-h);
  font-size: 1.4rem;
  border-radius: 16px;
}

/* With a crest the chip keeps its OUTER dimensions at every size — so a board
   of mixed clubs, some with a crest and some without, has no ragged edge and
   nothing shifts when an import lands or a takedown removes one — but is drawn
   bare inside them.

   No gradient: a crest over its own club's second-choice colour looks like a
   mistake, and the colour has already done its job everywhere the crest is
   absent. No frame and no padding either: the chip is a wide rectangle and a
   crest is roughly square, so the height is all the artwork gets, and every
   pixel of border is a pixel off it. */
app-club-badge .badge--crest {
  background: none;
  border: 0;
  padding: 0;
}

app-club-badge .badge__crest {
  /* Height-led, not width-led: the chip is a wide rectangle and a crest is
     roughly square, so the height is the binding dimension and letting the
     width follow keeps the artwork as large as the row allows, centred in the
     same outer box a chip would have filled. */
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* A crest that has to be fetched fades in rather than popping into the empty
   box (one from the cache is never marked, so it is simply there). Opacity
   only — the box is fixed — and instant under reduced motion via the global
   rule. */
app-club-badge .badge__crest {
  transition: opacity var(--dur-medium) var(--ease-standard);
}

app-club-badge .badge__crest--pending {
  opacity: 0;
}

/* A crest too dark for the dark surfaces (AssetImage.backing "light",
   measured at import) sits on a light square badge: the image's own padding
   and background inside the same height, so the chip's outer box — and every
   row around it — is unchanged. Square so a wide mark is letterboxed inside it
   rather than stretching the badge. */
app-club-badge .badge__crest--backed {
  box-sizing: border-box;
  aspect-ratio: 1;
  padding: var(--crest-backing-pad, 3px);
  background: var(--logo-backing-bg);
  border-radius: var(--logo-backing-radius);
}

app-club-badge .badge--xs {
  --crest-backing-pad: 2px;
}

app-club-badge .badge--md {
  --crest-backing-pad: 4px;
}

app-club-badge .badge--lg {
  --crest-backing-pad: 6px;
}

/* src/app/shared/ui/identity-badge/identity-badge.scss */
app-identity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--identity-badge);
  height: var(--identity-badge);
}

app-identity-badge .identity__flag {
  display: block;
  width: var(--identity-badge);
  height: auto;
  border-radius: 2px;
  outline: 1px solid var(--border);
  outline-offset: -1px;
}

/* src/app/shared/ui/identity-stripes/identity-stripes.scss */
app-identity-stripes {
  display: inline-flex;
  flex: none;
}

app-identity-stripes .stripes {
  display: inline-flex;
  align-items: center;
  gap: var(--identity-stripes-gap);
  height: var(--identity-stripes-h);
  padding: 0 var(--identity-stripes-gap);
}

app-identity-stripes .stripe {
  display: block;
  width: var(--identity-stripes-w);
  height: 100%;
  border-radius: 1px;
  transform: skewX(-20deg);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* src/app/shared/ui/board-tag/board-tag.scss */
app-board-tag {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

app-board-tag .tag__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* src/app/shared/ui/ranking-row/ranking-row.scss */
li[app-ranking-row] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

li[app-ranking-row].row--me {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 8px 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

li[app-ranking-row] .row__player {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.9375rem;
}

li[app-ranking-row] .row__points {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--accent);
}

li[app-ranking-row] .row__bone-rank {
  flex: none;
  inline-size: var(--rank-badge);
  block-size: var(--rank-badge);
  border-radius: 50%;
}

li[app-ranking-row] .row__bone-name {
  width: 9rem;
  max-width: 100%;
}

li[app-ranking-row] .row__bone-points {
  width: 2.5rem;
}