/* Football Tracker 2026 — CSS flag badges
   Circular nation badges. Base colour lives on the ELEMENT (reliable to render);
   a single ::after carries any overlay (cross, disc, triangle). */

.flag {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  background: #1b1e24;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  flex: none;
}
.flag::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

/* ---- vertical thirds (left→right) ---- */
.fl-fra { background: linear-gradient(90deg,#0b4ea2 33.33%,#fff 33.33% 66.66%,#e1273a 66.66%); }
.fl-bel { background: linear-gradient(90deg,#141414 33.33%,#f7d417 33.33% 66.66%,#e1273a 66.66%); }
.fl-mex { background: linear-gradient(90deg,#0a6b3c 33.33%,#fff 33.33% 66.66%,#cb1a2b 66.66%); }
.fl-sen { background: linear-gradient(90deg,#16894a 33.33%,#f7d417 33.33% 66.66%,#e1273a 66.66%); }
.fl-cmr { background: linear-gradient(90deg,#16894a 33.33%,#e1273a 33.33% 66.66%,#f7d417 66.66%); }
.fl-irn { background: linear-gradient(#16894a 33.33%,#fff 33.33% 66.66%,#e1273a 66.66%); }
.fl-por { background: linear-gradient(90deg,#0a6b3c 42%,#d6202b 42%); }
.fl-mar { background: #b81b2c; }

/* ---- horizontal thirds (top→bottom) ---- */
.fl-ned { background: linear-gradient(#ae1c28 33.33%,#fff 33.33% 66.66%,#1b3a8c 66.66%); }
.fl-ger { background: linear-gradient(#141414 33.33%,#dd0000 33.33% 66.66%,#f7ce00 66.66%); }
.fl-arg { background: linear-gradient(#74acdf 33.33%,#fff 33.33% 66.66%,#74acdf 66.66%); }
.fl-cro { background: linear-gradient(#e1273a 33.33%,#fff 33.33% 66.66%,#1b3a8c 66.66%); }
.fl-gha { background: linear-gradient(#e1273a 33.33%,#f7d417 33.33% 66.66%,#16894a 66.66%); }
.fl-par { background: linear-gradient(#d52b1e 33.33%,#fff 33.33% 66.66%,#0038a8 66.66%); }
.fl-pol { background: linear-gradient(#fff 50%,#dc143c 50%); }

/* Spain — red / yellow / red */
.fl-esp { background: linear-gradient(#aa151b 26%,#f1bf00 26% 74%,#aa151b 74%); }
/* Ecuador — yellow(top half) / blue / red */
.fl-ecu { background: linear-gradient(#ffd200 50%,#1b53a8 50% 75%,#e1273a 75%); }
/* Costa Rica — blue/white/red/white/blue */
.fl-crc { background: linear-gradient(#1b3a8c 22%,#fff 22% 36%,#cb1a2b 36% 64%,#fff 64% 78%,#1b3a8c 78%); }
/* Qatar — white band + maroon */
.fl-qat { background: linear-gradient(90deg,#fff 26%,#8a1538 26%); }
/* Australia — navy */
.fl-aus { background: #14306b; }

/* ---- overlays (::after) ---- */
/* Czech — white over red + blue triangle */
.fl-cze { background: linear-gradient(#fff 50%,#e1273a 50%); }
.fl-cze::after { width: 58%; height: 100%; background: #1b3a8c; clip-path: polygon(0 0,100% 50%,0 100%); }
/* England — white + red cross */
.fl-eng { background: #f4f4f4; }
.fl-eng::after { background:
  linear-gradient(#e1273a,#e1273a) 50% 0 / 18% 100% no-repeat,
  linear-gradient(#e1273a,#e1273a) 0 50% / 100% 18% no-repeat; }
/* Switzerland — red + white cross */
.fl-sui { background: #d6202b; }
.fl-sui::after { background:
  linear-gradient(#fff,#fff) 50% 50% / 22% 60% no-repeat,
  linear-gradient(#fff,#fff) 50% 50% / 60% 22% no-repeat; }
/* Denmark — red + off-centre white cross */
.fl-den { background: #c8102e; }
.fl-den::after { background:
  linear-gradient(#fff,#fff) 40% 0 / 17% 100% no-repeat,
  linear-gradient(#fff,#fff) 0 50% / 100% 19% no-repeat; }
/* Japan — white + red disc */
.fl-jpn { background: #f4f4f4; }
.fl-jpn::after { width: 46%; height: 46%; margin: auto; border-radius: 50%; background: #bc002d; }
/* Korea — white + red/blue circle (approx) */
.fl-kor { background: #f4f4f4; }
.fl-kor::after { width: 46%; height: 46%; margin: auto; border-radius: 50%;
  background: linear-gradient(180deg,#cd2e3a 50%,#0047a0 50%); }
/* Tunisia — red + white disc */
.fl-tun { background: #e1273a; }
.fl-tun::after { width: 44%; height: 44%; margin: auto; border-radius: 50%; background: #fff; }
/* USA — stripes + blue canton */
.fl-usa { background: repeating-linear-gradient(#b22234 0 7.7%,#fff 7.7% 15.4%); }
.fl-usa::after { width: 42%; height: 54%; inset: 0 auto auto 0; margin: 0; background: #2a3560; }
/* Brazil — green + yellow diamond + blue disc (via child <i>) */
.fl-bra { background: #1f9e4a; }
.fl-bra::after { width: 66%; height: 66%; margin: auto; background: #f7d417;
  clip-path: polygon(50% 6%,94% 50%,50% 94%,6% 50%); }
.fl-bra > i { position: absolute; inset: 0; margin: auto; width: 30%; height: 30%;
  border-radius: 50%; background: #1b3a8c; z-index: 1; }