/**
 * State flag styling — real flag images + accent color per state.
 * Images from flagcdn.com; CSS tint is subtle so flags stay distinguishable.
 */

.race-lane[class*='state-']:not(.state-unknown):not(.state-other) {
  --state-accent: var(--state-c1, #3898ec);
  background: var(--results-surface);
  box-shadow:
    inset 5px 0 0 var(--state-accent),
    inset 0 0 0 1px var(--results-border);
}

/* Flag watermark on the right */
.race-lane[class*='state-']:not(.state-unknown):not(.state-other)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(38%, 9rem);
  background-image: var(--state-flag-url);
  background-size: cover;
  background-position: center;
  border-radius: 0 0.65rem 0.65rem 0;
  opacity: 0.42;
  mask-image: linear-gradient(to left, #000 25%, transparent 95%);
  pointer-events: none;
}

.race-lane.is-leader[class*='state-']:not(.state-unknown):not(.state-other) {
  box-shadow:
    inset 5px 0 0 var(--state-accent),
    inset 0 0 0 1px rgba(61, 214, 140, 0.45);
}

.race-lane.is-leader[class*='state-']:not(.state-unknown):not(.state-other)::after {
  opacity: 0.32;
}

/* Inline flag chip next to state name */
.race-state-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--results-text);
}

.race-flag-icon {
  width: 1.35rem;
  height: 0.9rem;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

.race-state-abbr {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 0.2rem;
  font-size: 0.7rem;
  font-family: Kanit, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--state-accent) 35%, transparent);
  color: color-mix(in srgb, var(--state-accent) 70%, #fff);
  margin-right: 0.15rem;
}

/* Per-state accent (most distinctive color, not always red) */
.state-alabama { --state-c1: #b10021; }
.state-alaska { --state-c1: #ffb612; }
.state-arizona { --state-c1: #ce5c17; }
.state-arkansas { --state-c1: #bf0a30; }
.state-california { --state-c1: #b71234; }
.state-colorado { --state-c1: #002868; }
.state-connecticut { --state-c1: #0c2340; }
.state-delaware { --state-c1: #c7a97a; }
.state-florida { --state-c1: #ff6b35; }
.state-georgia { --state-c1: #bf0a30; }
.state-hawaii { --state-c1: #c8102e; }
.state-idaho { --state-c1: #003366; }
.state-illinois { --state-c1: #0c2340; }
.state-indiana { --state-c1: #cfb53b; }
.state-iowa { --state-c1: #5c88da; }
.state-kansas { --state-c1: #005eb8; }
.state-kentucky { --state-c1: #003087; }
.state-louisiana { --state-c1: #461d7c; }
.state-maine { --state-c1: #003366; }
.state-maryland { --state-c1: #ffd200; }
.state-massachusetts { --state-c1: #002869; }
.state-michigan { --state-c1: #ffcb05; }
.state-minnesota { --state-c1: #5d8ac3; }
.state-mississippi { --state-c1: #bf0a30; }
.state-missouri { --state-c1: #c8102e; }
.state-montana { --state-c1: #75aadb; }
.state-nebraska { --state-c1: #002f6c; }
.state-nevada { --state-c1: #c7b683; }
.state-new-hampshire { --state-c1: #002f6c; }
.state-new-jersey { --state-c1: #e8d6b3; }
.state-new-mexico { --state-c1: #ffd700; }
.state-new-york { --state-c1: #002d72; }
.state-north-carolina { --state-c1: #bf0a30; }
.state-north-dakota { --state-c1: #002868; }
.state-ohio { --state-c1: #bf0a30; }
.state-oklahoma { --state-c1: #0077b5; }
.state-oregon { --state-c1: #002570; }
.state-pennsylvania { --state-c1: #002868; }
.state-rhode-island { --state-c1: #002868; }
.state-south-carolina { --state-c1: #003366; }
.state-south-dakota { --state-c1: #007a4d; }
.state-tennessee { --state-c1: #cc0000; }
.state-texas { --state-c1: #002868; }
.state-utah { --state-c1: #071d49; }
.state-vermont { --state-c1: #00843d; }
.state-virginia { --state-c1: #002f6c; }
.state-washington { --state-c1: #008457; }
.state-west-virginia { --state-c1: #ffd700; }
.state-wisconsin { --state-c1: #c1122b; }
.state-wyoming { --state-c1: #bf0a30; }
.state-district-of-columbia { --state-c1: #bf0a30; }
.state-colombia { --state-c1: #fcd116; }
.state-mexico { --state-c1: #006847; }
.state-canada { --state-c1: #ff0000; }
