@font-face {
  font-family: "Roboto Condensed";
  src: url("assets/fonts/RobotoCondensed-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("assets/fonts/RobotoCondensed-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("assets/fonts/RobotoCondensed-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("assets/fonts/RobotoCondensed-MediumItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("assets/fonts/RobotoCondensed-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("assets/fonts/RobotoCondensed-BoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}


@font-face {
  font-family: "Roboto Condensed";
  src: url("assets/fonts/RobotoCondensed-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("assets/fonts/RobotoCondensed-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("assets/fonts/RobotoCondensed-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --font-congly: "Roboto Condensed", sans-serif;
  --font-body: var(--font-congly);
  --font-display: var(--font-congly);
  --ink: #102033;
  --ink-soft: #263a50;
  --muted: #506579;
  --paper: #eef2f7;
  --card: #ffffff;
  --line: rgba(16, 32, 51, .12);
  --navy: #0b1d34;
  --navy-2: #12355f;
  --navy-3: #173b68;
  --spain: #efc233;
  --spain-red: #b51e31;
  --arg: #79c8ed;
  --arg-deep: #1782b5;
  --arg-dark: #0d6f9d;
  --accent: #f04a37;
  --accent-2: #ff8f4f;
  --glow: rgba(23, 130, 181, .18);
  --shadow: 0 24px 70px rgba(7, 22, 41, .12);
  --shadow-soft: 0 18px 48px rgba(7, 22, 41, .08);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 14px;
  --max: 1160px;
}


html, body, button, input, select, textarea, option {
  font-family: var(--font-congly);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(239, 194, 51, .12), transparent 30%),
    radial-gradient(circle at top right, rgba(121, 200, 237, .12), transparent 26%),
    var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
button, select, input, textarea {
  font: inherit;
  font-family: var(--font-congly);
}
body, body * {
  font-family: var(--font-congly);
}
.metric-value, .path-summary strong, .big-number-card strong,
.ring-centre strong, .leader-value, .h2h-score strong {
  font-variant-numeric: tabular-nums lining-nums;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 9999;
  background: white; color: #111; padding: 10px 14px; border-radius: 8px;
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero {
  position: relative;
  min-height: clamp(720px, 100svh, 920px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 16% 22%, rgba(239, 194, 51, .26), transparent 34%),
    radial-gradient(circle at 84% 35%, rgba(121, 200, 237, .28), transparent 30%),
    linear-gradient(135deg, #071629 0%, #0c2340 52%, #081a2f 100%);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: 360px; height: 920px;
  top: -180px;
  transform: rotate(21deg);
  opacity: .84;
}
.hero::before { left: -190px; background: linear-gradient(var(--spain-red) 0 31%, var(--spain) 31% 69%, var(--spain-red) 69%); }
.hero::after { right: -205px; background: linear-gradient(#75c8ee 0 34%, #fff 34% 66%, #75c8ee 66%); }
.hero-noise {
  position: absolute; inset: 0; pointer-events: none; opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.topbar {
  width: min(calc(100% - 36px), var(--max));
  margin: 0 auto;
  padding: 24px 0;
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 3;
}
.brand {
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .08em;
  font-size: .95rem;
}
.brand span { color: #b8c7d7; font-weight: 700; }
.topbar-actions { display: flex; gap: 8px; }
.icon-button {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: white;
  background: rgba(255,255,255,.08); cursor: pointer; transition: .2s ease;
}
.icon-button:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.icon-button svg { width: 20px; height: 20px; fill: currentColor; }

.hero-content {
  position: relative; z-index: 2;
  width: min(calc(100% - 36px), 1040px);
  margin: clamp(28px, 7vh, 72px) auto 0;
  text-align: center;
  padding-bottom: 56px;
}
.eyebrow, .kicker {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .12em;
  font-size: .78rem;
}
.eyebrow { color: #c6d7e6; }
.kicker { color: var(--accent); margin: 0 0 8px; }
.hero h1,
h2,
.metric-value,
.path-summary strong,
.big-number-card strong,
.ring-centre strong,
.leader-value {
  font-family: var(--font-display);
}
.hero h1 {
  margin: 18px auto 18px;
  max-width: 1000px;
  font-size: clamp(3rem, 8vw, 6.6rem);
  line-height: .95;
  letter-spacing: -.065em;
  font-weight: 900;
  text-shadow: 0 6px 24px rgba(0, 0, 0, .22);
}
.spain-text { color: var(--spain); }
.argentina-text { color: var(--arg); }
.standfirst {
  max-width: 790px;
  margin: 0 auto 34px;
  color: #e5edf4;
  font-size: clamp(1rem, 2vw, 1.18rem);
  font-weight: 600;
}

.match-card {
  width: min(100%, 820px);
  margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.18fr 1fr; align-items: stretch;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(7,22,41,.58);
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  backdrop-filter: blur(18px);
}
.team, .match-centre { padding: 24px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.team strong { font-size: 1.12rem; margin-top: 10px; font-weight: 800; }
.team span { color: #c8d5e1; font-size: .86rem; }
.match-centre { border-inline: 1px solid rgba(255,255,255,.14); }
.match-label { font-size: .72rem; letter-spacing: .12em; color: #bfd1e2; font-weight: 800; }
.match-centre b { font-size: 1.32rem; margin-top: 4px; }
.match-centre small { color: #d2dce5; }
.countdown {
  margin-top: 10px; padding: 6px 10px; border-radius: 99px;
  background: rgba(255,255,255,.11); font-size: .8rem; color: #f0f4f8; font-weight: 700;
}
.flag { width: 55px; height: 36px; border-radius: 5px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,.25); display: grid; }
.flag i { display: block; }
.flag-spain { grid-template-rows: 1fr 1.5fr 1fr; }
.flag-spain i:nth-child(1), .flag-spain i:nth-child(3) { background: #aa151b; }
.flag-spain i:nth-child(2) { background: #f1bf00; }
.flag-argentina { grid-template-rows: 1fr 1fr 1fr; }
.flag-argentina i:nth-child(1), .flag-argentina i:nth-child(3) { background: #75aadb; }
.flag-argentina i:nth-child(2) { background: #fff; }
.scroll-cue { display: inline-flex; gap: 9px; align-items: center; margin-top: 28px; color: #d4dfeb; text-decoration: none; font-size: .84rem; font-weight: 700; }
.scroll-cue span { animation: bob 1.6s infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

.section-shell { width: min(calc(100% - 36px), var(--max)); margin-inline: auto; }
.story-intro {
  padding: 94px 0 56px;
  display: grid; grid-template-columns: 110px minmax(0, 840px);
  gap: 42px; align-items: start;
}
.story-number {
  font-family: var(--font-display);
  font-size: 5rem; line-height: 1; letter-spacing: -.08em;
  color: rgba(16,32,51,.14); font-weight: 900;
}
h2 {
  font-size: clamp(2rem, 4.8vw, 3.8rem);
  line-height: 1.06;
  letter-spacing: -.052em;
  margin: 0 0 18px;
  font-weight: 900;
}
h3 { line-height: 1.2; }
.story-intro p { font-size: 1.1rem; color: var(--ink-soft); }
.story-intro strong { color: var(--ink); }

.comparison { padding: 28px 0 96px; }
.comparison-heading { margin-bottom: 20px; }
.comparison-intro {
  max-width: 820px;
  color: var(--muted);
  margin: 12px 0 0;
  font-size: 1rem;
  font-weight: 600;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  margin-bottom: 30px;
}
.section-heading h2 { max-width: 860px; margin-bottom: 0; }
.metric-controls {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 18px;
  scrollbar-width: thin;
}
.metric-chip {
  border: 1px solid rgba(11, 29, 52, .12);
  background: rgba(255,255,255,.72);
  color: var(--muted);
  padding: 11px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 800;
  white-space: nowrap;
  transition: .2s ease;
  box-shadow: 0 8px 20px rgba(7, 22, 41, .04);
}
.metric-chip:hover { transform: translateY(-1px); border-color: rgba(11, 29, 52, .24); }
.metric-chip.active {
  color: white;
  background: linear-gradient(135deg, var(--navy-2), var(--navy));
  border-color: transparent;
}
.metric-stage {
  display: grid;
  grid-template-columns: 1fr 290px 1fr;
  align-items: stretch;
  gap: 18px;
}
.metric-team-card,
.metric-centre-panel {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(11, 29, 52, .10);
}
.metric-team-card {
  padding: clamp(26px, 4vw, 40px);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.metric-team-card::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  right: -55px;
  top: -55px;
  opacity: .16;
}
.spain-card {
  background: linear-gradient(180deg, #ffffff 0%, #fff7e5 100%);
}
.spain-card::before { background: radial-gradient(circle, rgba(181,30,49,.5), rgba(239,194,51,.2)); }
.argentina-card {
  background: linear-gradient(180deg, #ffffff 0%, #ecf8ff 100%);
}
.argentina-card::before { background: radial-gradient(circle, rgba(23,130,181,.45), rgba(121,200,237,.2)); }
.metric-topline {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.metric-team-name { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 1rem; }
.metric-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  background: rgba(11, 29, 52, .06);
  color: var(--ink-soft);
}
.metric-status.leader-spain {
  background: rgba(181, 30, 49, .12);
  color: #7e1521;
}
.metric-status.leader-argentina {
  background: rgba(23, 130, 181, .14);
  color: #0d658d;
}
.metric-status.tie {
  background: rgba(16, 32, 51, .08);
  color: var(--ink);
}
.dot { width: 11px; height: 11px; border-radius: 50%; }
.spain-dot { background: var(--spain-red); box-shadow: 0 0 0 5px rgba(181,30,49,.1); }
.argentina-dot { background: var(--arg-deep); box-shadow: 0 0 0 5px rgba(23,130,181,.1); }
.metric-value {
  font-size: clamp(3.8rem, 7vw, 5.8rem);
  line-height: .92;
  font-weight: 900;
  letter-spacing: -.07em;
  margin-top: 18px;
}
.metric-unit { color: var(--muted); font-weight: 700; }
.metric-bar-track {
  height: 14px; background: rgba(16, 32, 51, .08); border-radius: 999px;
  overflow: hidden; margin-top: 24px;
}
.metric-bar { height: 100%; border-radius: inherit; width: 0; transition: width .65s cubic-bezier(.2,.8,.2,1); }
.spain-bar { background: linear-gradient(90deg, var(--spain-red), var(--spain)); }
.argentina-bar { background: linear-gradient(90deg, var(--arg-deep), var(--arg)); }
.metric-share-row {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: .86rem;
  color: var(--muted);
}
.metric-share-row strong { color: var(--ink); font-size: 1rem; }
.metric-centre-panel {
  background: linear-gradient(180deg, #0d2442 0%, #09182d 100%);
  color: white;
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
.metric-centre-panel::before {
  content: "";
  position: absolute;
  inset: auto 24px 22px;
  height: 1px;
  background: rgba(255,255,255,.1);
}
.metric-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .78rem;
  font-weight: 800;
  color: #f4f7fb;
}
.metric-ring {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  margin: 18px 0 16px;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--spain-red) 0 var(--spain-share, 50%), var(--arg-deep) var(--spain-share, 50%) 100%);
  box-shadow: 0 24px 50px rgba(0,0,0,.2), 0 0 0 10px rgba(255,255,255,.04);
}
.metric-ring-inner {
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: linear-gradient(180deg, #132f54 0%, #0d2039 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.metric-ring-label {
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b5cbe1;
  font-weight: 800;
}
.metric-ring-inner strong {
  margin-top: 4px;
  font-size: 2.4rem;
  line-height: .95;
  letter-spacing: -.06em;
}
.metric-ring-inner small {
  color: #d3dfeb;
  font-size: .76rem;
  font-weight: 700;
}
.metric-centre-copy {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: #edf4fb;
  font-weight: 700;
}
.metric-mini-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
}
.metric-mini-grid div {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 12px;
}
.metric-mini-grid span {
  display: block;
  font-size: .72rem;
  color: #bfd0e1;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.metric-mini-grid strong { font-size: .96rem; }
.source-line {
  color: #465e74;
  font-size: .8rem;
  margin-top: 14px;
  font-weight: 600;
}

.path-section {
  position: relative;
  overflow: hidden;
  padding: 96px 0 90px;
  background:
    radial-gradient(circle at 8% 8%, rgba(239, 194, 51, .13), transparent 25%),
    radial-gradient(circle at 92% 18%, rgba(121, 200, 237, .18), transparent 28%),
    linear-gradient(155deg, #07182c 0%, #0b223e 52%, #07172a 100%);
  color: white;
}
.path-section::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  right: -220px;
  top: -250px;
  box-shadow: 0 0 0 60px rgba(255,255,255,.018), 0 0 0 130px rgba(255,255,255,.012);
}
.path-section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.path-section .section-shell { position: relative; z-index: 2; }
.path-section .kicker { color: #69d5ff; }
.path-heading { align-items: center; margin-bottom: 34px; }
.path-heading h2 { max-width: 820px; text-wrap: balance; }
.toggle {
  display: inline-flex;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}
.toggle-btn {
  border: 0;
  color: #c8d7e7;
  background: transparent;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
  font-size: .86rem;
  transition: .22s ease;
}
.toggle-btn:hover { color: #fff; }
.toggle-btn.active {
  color: var(--navy);
  background: white;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.path-layout {
  display: grid;
  grid-template-columns: 342px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}
.path-summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  box-shadow: 0 28px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.path-summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--team-accent, #79c8ed), transparent 75%);
}
.path-summary::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  right: -95px;
  top: -85px;
  background: radial-gradient(circle, var(--team-accent, #79c8ed), transparent 68%);
  opacity: .12;
  pointer-events: none;
}
.path-summary-hero { position: relative; z-index: 1; }
.summary-team-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.summary-team-row > div { min-width: 0; }
.summary-team-row small { display: block; color: #c0d1e1; font-size: .75rem; margin-top: 2px; }
.path-summary .summary-team {
  display: block;
  color: #fff;
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: .1em;
}
.summary-flag {
  width: 44px;
  height: 30px;
  border-radius: 7px;
  overflow: hidden;
  display: grid;
  box-shadow: 0 6px 18px rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.28);
}
.summary-flag i { display: block; }
.summary-flag-spain { grid-template-rows: 1fr 1.45fr 1fr; }
.summary-flag-spain i:nth-child(1), .summary-flag-spain i:nth-child(3) { background: #aa151b; }
.summary-flag-spain i:nth-child(2) { background: #f1bf00; }
.summary-flag-argentina { grid-template-rows: 1fr 1fr 1fr; }
.summary-flag-argentina i:nth-child(1), .summary-flag-argentina i:nth-child(3) { background: #75aadb; }
.summary-flag-argentina i:nth-child(2) { background: #fff; }
.summary-form-badge {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.1);
  color: #eaf3fb;
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}
.summary-goal-block {
  display: flex;
  align-items: end;
  gap: 14px;
  margin: 26px 0 14px;
}
.summary-goal-block > strong {
  display: block;
  margin: 0;
  font-size: 5.3rem;
  line-height: .76;
  letter-spacing: -.08em;
  color: white;
  text-shadow: 0 8px 28px rgba(0,0,0,.2);
}
.summary-goal-block > div { padding-bottom: 5px; }
.summary-goal-block span { display: block; font-size: 1rem; font-weight: 800; color: #fff; }
.summary-goal-block small { display: block; font-size: .72rem; color: #b9cbdb; margin-top: 3px; }
.path-summary p { color: #d2deea; margin: 0; font-size: .88rem; line-height: 1.55; }
.summary-form-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.summary-form-line > span { color: #b8cadb; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.summary-form-line > div { display: flex; gap: 5px; }
.form-dot {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .66rem;
  font-style: normal;
  font-weight: 900;
  color: #07182c;
  background: #fff;
  box-shadow: 0 5px 12px rgba(0,0,0,.18);
}
.form-w { background: #79e2b4; }
.form-d { background: #ffd76d; }
.form-l { background: #ff8f82; }
.summary-kpi-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.summary-kpi-grid article {
  min-height: 100px;
  padding: 13px;
  border-radius: 16px;
  background: rgba(4,15,29,.34);
  border: 1px solid rgba(255,255,255,.09);
  transition: .22s ease;
}
.summary-kpi-grid article:hover { transform: translateY(-2px); background: rgba(255,255,255,.075); }
.summary-kpi-grid span { display: block; color: #9fb5ca; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.summary-kpi-grid strong { display: block; margin: 8px 0 4px; font-size: 1.55rem; line-height: 1; letter-spacing: -.03em; }
.summary-kpi-grid small { display: block; color: #d4dfeb; font-size: .67rem; line-height: 1.35; }
.path-chart-wrap {
  position: relative;
  min-width: 0;
  padding: 24px 24px 20px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 28px 70px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
.path-chart-wrap::before {
  content: "";
  position: absolute;
  inset: 76px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.014), transparent 70%);
  pointer-events: none;
}
.path-chart-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.path-chart-head > div:first-child span {
  display: block;
  color: #75d4fa;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
}
.path-chart-head > div:first-child strong {
  display: block;
  margin-top: 5px;
  font-size: 1.12rem;
  color: #fff;
}
.path-legend { display: flex; gap: 16px; color: #d1deea; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.path-legend span { display: flex; gap: 7px; align-items: center; }
.path-legend i { width: 18px; height: 7px; border-radius: 999px; }
.legend-for { background: linear-gradient(90deg, #fff, var(--team-accent, #79c8ed)); }
.legend-against { background: #ff7668; }
.path-chart {
  position: relative;
  z-index: 1;
  min-height: 375px;
  display: grid;
  grid-template-columns: repeat(7, minmax(74px, 1fr));
  gap: 12px;
  align-items: stretch;
  padding: 28px 2px 4px;
}
.path-chart::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 88px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.12), var(--team-accent, #79c8ed), rgba(255,255,255,.12));
  box-shadow: 0 0 24px rgba(121,200,237,.22);
}
.journey-step {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: 26px 190px 38px 28px 34px;
  justify-items: center;
  align-items: end;
  text-align: center;
  transition: transform .22s ease;
}
.journey-step:hover { transform: translateY(-5px); }
.journey-round {
  align-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #bed0e0;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
}
.journey-bars {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 14px 14px 5px 5px;
  background:
    repeating-linear-gradient(to top, rgba(255,255,255,.045) 0 1px, transparent 1px 44px),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012));
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.journey-bar {
  position: relative;
  width: min(23px, 34%);
  min-height: 5px;
  border-radius: 8px 8px 3px 3px;
  transition: height .6s cubic-bezier(.2,.8,.2,1), filter .2s ease;
}
.journey-bar span {
  position: absolute;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  color: #fff;
  font-size: .74rem;
  font-weight: 900;
}
.journey-bar-for {
  height: var(--gf-height);
  background: linear-gradient(to top, var(--team-accent, #79c8ed), #fff);
  box-shadow: 0 0 20px rgba(121,200,237,.18);
}
.journey-bar-against { height: var(--ga-height); background: linear-gradient(to top, #ef4f45, #ff9a8f); }
.journey-step:hover .journey-bar { filter: brightness(1.12); }
.journey-node {
  position: relative;
  z-index: 3;
  align-self: center;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0b213b;
  border: 3px solid var(--team-accent, #79c8ed);
  box-shadow: 0 0 0 6px rgba(255,255,255,.04), 0 8px 20px rgba(0,0,0,.24);
}
.journey-node span { font-size: .7rem; font-weight: 900; }
.journey-step > strong { align-self: center; font-size: 1.08rem; line-height: 1; }
.journey-step > small {
  align-self: start;
  width: 100%;
  color: #c7d5e2;
  font-size: .68rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.match-pill {
  position: relative;
  min-width: 0;
  padding: 13px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease;
}
.match-pill:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.24); }
.match-pill-top { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.match-pill-top small { color: #a9bed1; font-size: .58rem; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-pill-top span { padding: 3px 6px; border-radius: 999px; font-size: .55rem; font-weight: 900; color: #07182c; background: #7fe2b5; }
.match-draw .match-pill-top span { background: #ffd46a; }
.match-loss .match-pill-top span { background: #ff8f82; }
.match-pill-score { margin: 14px 0 10px; }
.match-pill-score strong { display: block; font-size: 1.35rem; line-height: 1; }
.match-pill-score span { display: block; margin-top: 5px; color: #e8f0f7; font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-pill-meter { height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.match-pill-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--team-accent, #79c8ed), #fff); }
.match-pill em { display: block; margin-top: 8px; color: #8fa6bb; font-size: .57rem; font-style: normal; text-transform: uppercase; }

.duel { padding: 100px 0; }
.player-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.player-tab {
  white-space: nowrap;
  border: 1px solid rgba(11, 29, 52, .12);
  background: rgba(255,255,255,.78);
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--muted);
  font-weight: 800;
  font-size: .83rem;
}
.player-tab.active { background: var(--navy); color: white; border-color: var(--navy); }
.leaderboard {
  margin-top: 22px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
  border: 1px solid rgba(11, 29, 52, .10);
}
.leader-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 118px 126px;
  gap: 14px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(11, 29, 52, .08);
}
.leader-row:last-child { border-bottom: 0; }
.leader-rank { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #eef2f6; font-weight: 900; }
.leader-rank-wrap { width: 64px; display: flex; align-items: center; justify-content: center; }
.leader-rank-number {
  width: 44px;
  height: 44px;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink);
  background: linear-gradient(180deg, #f3f6f9 0%, #e7edf3 100%);
  box-shadow: 0 6px 18px rgba(7,22,41,.08);
}
.leader-rank-number.team-spain { border: 2px solid rgba(181,30,49,.2); }
.leader-rank-number.team-argentina { border: 2px solid rgba(23,130,181,.2); }
.leader-row:hover .leader-rank-number { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(7,22,41,.14); }
.leader-rank-avatar {
  width: 64px;
  height: 64px;
  position: relative;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.leader-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
  background: #eef2f6;
  border: 2px solid #fff;
  box-shadow: 0 10px 26px rgba(7,22,41,.16);
  filter: saturate(.96) contrast(1.03);
  transition: transform .22s ease, box-shadow .22s ease;
}
.leader-rank-avatar.team-spain .leader-avatar { border-color: rgba(181,30,49,.28); }
.leader-rank-avatar.team-argentina .leader-avatar { border-color: rgba(23,130,181,.28); }
.leader-row:hover .leader-avatar { transform: scale(1.055); box-shadow: 0 14px 32px rgba(7,22,41,.2); }
.leader-rank-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(7,22,41,.18);
}
.leader-player strong { display: block; }
.leader-player span { color: var(--muted); font-size: .8rem; }
.leader-team { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; }
.mini-dot { width: 8px; height: 8px; border-radius: 50%; }
.leader-value { text-align: right; font-size: 1.45rem; font-weight: 900; color: var(--ink); }
.leader-value small { font-size: .78rem; color: var(--muted); font-weight: 700; }

.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-bottom: 100px; }
.big-number-card {
  min-height: 340px;
  border-radius: var(--radius-xl);
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
}
.big-number-card::before { content: ""; position: absolute; width: 230px; height: 230px; border-radius: 50%; right: -80px; top: -80px; background: rgba(255,255,255,.1); }
.big-number-card strong { font-size: clamp(4.2rem, 8vw, 6.2rem); line-height: .82; letter-spacing: -.08em; }
.big-number-card h3 { font-size: 1.4rem; margin: 18px 0 7px; }
.big-number-card p { margin: 0; opacity: .92; font-size: .94rem; }
.card-label { position: absolute; left: 34px; top: 30px; font-size: .74rem; font-weight: 900; letter-spacing: .13em; }
.card-dark { background: linear-gradient(180deg, #0b1d34 0%, #12355f 100%); color: white; }
.card-light { background: linear-gradient(180deg, #ffffff 0%, #f6f1e9 100%); color: var(--ink); }
.card-accent { background: linear-gradient(180deg, #9fe0fb 0%, #79c8ed 100%); color: #06243a; }

.history-section {
  background:
    linear-gradient(180deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.84) 100%),
    linear-gradient(135deg, #fff4df 0%, #edf7ff 100%);
  padding: 92px 0;
}
.h2h-grid { display: grid; grid-template-columns: 260px 220px 1fr; gap: 34px; align-items: center; }
.h2h-ring { position: relative; width: 240px; height: 240px; display: grid; place-items: center; }
.h2h-ring svg { transform: rotate(-90deg); }
.ring-bg, .ring-seg { fill: none; stroke-width: 18; }
.ring-bg { stroke: #d7d4cc; }
.ring-seg { stroke-linecap: butt; stroke-dasharray: 0 415; }
.ring-spain { stroke: var(--spain-red); stroke-dasharray: 178 237; stroke-dashoffset: 0; }
.ring-draw { stroke: #929aa4; stroke-dasharray: 59 356; stroke-dashoffset: -178; }
.ring-arg { stroke: var(--arg-deep); stroke-dasharray: 178 237; stroke-dashoffset: -237; }
.ring-centre { position: absolute; display: flex; flex-direction: column; align-items: center; }
.ring-centre strong { font-size: 4.1rem; line-height: .9; letter-spacing: -.08em; }
.ring-centre span { color: var(--muted); font-weight: 700; }
.h2h-score { border-left: 1px solid rgba(11, 29, 52, .12); padding-left: 28px; }
.h2h-score div { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(11, 29, 52, .10); }
.h2h-score span { color: var(--muted); font-size: .85rem; }
.h2h-score strong { font-size: 1.8rem; font-family: var(--font-display); }
.history-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.history-notes article {
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(16,32,51,.08);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-soft);
}
.history-notes article > span { font-size: 2rem; font-weight: 900; letter-spacing: -.05em; color: var(--accent); font-family: var(--font-display); }
.history-notes h3 { margin: 12px 0 8px; }
.history-notes p { margin: 0; color: var(--muted); font-size: .94rem; }

.takeaways { padding: 100px 0; }
.takeaway-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.takeaway-grid article {
  border-top: 4px solid var(--navy);
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
  padding: 30px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 18px 48px rgba(7,22,41,.07);
}
.takeaway-grid article > span { color: var(--accent); font-size: .8rem; font-weight: 900; }
.takeaway-grid h3 { font-size: 1.25rem; margin: 18px 0 10px; }
.takeaway-grid p { color: var(--muted); font-size: .94rem; margin: 0; }

footer {
  background: #061223;
  color: #d7e1eb;
  text-align: center;
  padding: 44px 20px;
}
footer a { color: white; text-underline-offset: 4px; font-weight: 800; }
.back-top { display: inline-block; margin-bottom: 12px; text-decoration: none; }
.toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translate(-50%, 30px); opacity: 0; pointer-events: none; z-index: 999;
  background: #111; color: white; padding: 11px 16px; border-radius: 10px;
  font-size: .82rem; transition: .25s ease;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

body.light-hero .hero {
  background:
    radial-gradient(circle at 16% 22%, rgba(239, 194, 51, .18), transparent 34%),
    radial-gradient(circle at 84% 35%, rgba(121, 200, 237, .20), transparent 30%),
    linear-gradient(135deg, #eaf1f8 0%, #f8fbff 50%, #f7f3ea 100%);
  color: var(--ink);
}
body.light-hero .hero-noise { opacity: .05; }
body.light-hero .brand, body.light-hero .icon-button { color: var(--ink); }
body.light-hero .brand span { color: #5d7387; }
body.light-hero .icon-button { border-color: rgba(16,32,51,.14); background: rgba(255,255,255,.7); }
body.light-hero .eyebrow, body.light-hero .standfirst, body.light-hero .scroll-cue { color: #3c566f; }
body.light-hero .match-card { color: var(--ink); background: rgba(255,255,255,.78); border-color: rgba(16,32,51,.12); }
body.light-hero .match-centre { border-color: rgba(16,32,51,.12); }
body.light-hero .team span, body.light-hero .match-centre small, body.light-hero .match-label { color: #66798b; }
body.light-hero .countdown { background: rgba(16,32,51,.07); color: #40566b; }

@media (max-width: 980px) {
  .hero::before, .hero::after { opacity: .5; }
  .hero-content { margin-top: clamp(18px, 4vh, 40px); }
  .story-intro { grid-template-columns: 70px 1fr; gap: 22px; }
  .story-number { font-size: 3.5rem; }
  .metric-stage { grid-template-columns: 1fr; }
  .metric-centre-panel { order: -1; }
  .path-layout { grid-template-columns: 1fr; }
  .path-summary { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; }
  .path-summary dl { margin: 0; }
  .story-grid, .takeaway-grid { grid-template-columns: 1fr; }
  .big-number-card { min-height: 280px; }
  .h2h-grid { grid-template-columns: 230px 1fr; }
  .history-notes { grid-column: 1 / -1; }
}

/* CMS/iframe safety: prevent viewport-height units from expanding the hero inside a tall embed. */
@media (min-width: 641px) {
  .hero { min-height: clamp(720px, 100svh, 920px); }
  .hero-content { margin-top: clamp(28px, 7vh, 72px); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .topbar { padding: 16px 0; }
  .brand { font-size: .78rem; }
  .hero { min-height: auto; }
  .hero-content { padding: 40px 0 48px; margin-top: 0; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.8rem); }
  .standfirst { font-size: .98rem; }
  .match-card { grid-template-columns: 1fr 1fr; border-radius: 22px; }
  .match-centre { grid-column: 1 / -1; grid-row: 2; border-inline: 0; border-top: 1px solid rgba(255,255,255,.14); padding: 18px; }
  body.light-hero .match-centre { border-color: rgba(16,32,51,.12); }
  .team { padding: 18px 10px; }
  .team strong { font-size: .98rem; }
  .story-intro { padding: 68px 0 38px; grid-template-columns: 1fr; }
  .story-number { display: none; }
  .comparison { padding-bottom: 70px; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .metric-controls { margin-right: -2px; }
  .metric-chip { font-size: .8rem; padding: 10px 14px; }
  .metric-team-card { min-height: 240px; padding: 22px; }
  .metric-value { font-size: 4.4rem; }
  .metric-centre-panel { padding: 20px 18px 22px; }
  .metric-ring { width: 150px; height: 150px; }
  .metric-ring-inner { width: 112px; height: 112px; }
  .metric-ring-inner strong { font-size: 2rem; }
  .metric-mini-grid { grid-template-columns: 1fr; }
  .path-section { padding: 70px 0; }
  .toggle { width: 100%; }
  .toggle-btn { flex: 1; }
  .path-summary { display: block; }
  .path-summary strong { font-size: 4.2rem; }
  .path-summary dl { margin-top: 24px; }
  .path-chart-wrap { padding: 18px 9px; overflow-x: auto; }
  .path-chart { min-width: 580px; }
  .match-strip { display: flex; overflow-x: auto; padding-bottom: 6px; }
  .match-pill { min-width: 110px; }
  .duel { padding: 70px 0; }
  .leader-row { grid-template-columns: 58px minmax(0, 1fr) 70px; padding: 16px 14px; gap: 8px; }
  .leader-rank-wrap { width: 46px; }
  .leader-rank-number { width: 38px; height: 38px; font-size: 1rem; }
  .leader-team { grid-column: 2; grid-row: 2; }
  .leader-value { grid-column: 3; grid-row: 1 / 3; font-size: 1.25rem; }
  .story-grid { padding-bottom: 70px; }
  .history-section { padding: 70px 0; }
  .h2h-grid { grid-template-columns: 1fr; justify-items: center; }
  .h2h-score { width: 100%; border-left: 0; padding-left: 0; }
  .history-notes { grid-template-columns: 1fr; }
  .takeaways { padding: 70px 0; }
}


/* Hiệu ứng dữ liệu nhẹ, không thay đổi kết cấu */
.metric-value.data-pop,
.metric-ring-inner strong.data-pop,
.metric-share-row strong.data-pop {
  animation: data-pop .42s cubic-bezier(.2,.8,.2,1);
}
.metric-bar {
  box-shadow: 0 0 18px rgba(255,255,255,.18);
}
.spain-bar { box-shadow: 0 0 18px rgba(181,30,49,.22); }
.argentina-bar { box-shadow: 0 0 18px rgba(23,130,181,.24); }
.metric-ring { transition: background .5s ease, transform .35s ease; }
.metric-stage:hover .metric-ring { transform: scale(1.025); }
@keyframes data-pop {
  0% { opacity: .45; transform: translateY(7px) scale(.97); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}


@media (max-width: 640px) {
  .leader-rank-avatar, .leader-avatar { width: 50px; height: 50px; }
  .leader-rank-badge { min-width: 20px; height: 20px; font-size: .68rem; right: -3px; bottom: -3px; }
}


/* Hành trình: responsive CMS lock */
@media (max-width: 980px) {
  .path-layout { grid-template-columns: 1fr; }
  .path-summary { display: flex; grid-template-columns: none; }
  .path-chart-wrap { overflow-x: auto; }
  .path-chart-head { min-width: 760px; }
  .path-chart { min-width: 760px; }
  .match-strip { display: flex; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
  .match-pill { flex: 0 0 148px; }
}
@media (max-width: 640px) {
  .path-heading { margin-bottom: 24px; }
  .path-heading h2 { font-size: 2.45rem; }
  .path-summary { padding: 20px; }
  .summary-team-row { grid-template-columns: 46px minmax(0,1fr); }
  .summary-form-badge { grid-column: 1 / -1; justify-self: start; }
  .summary-goal-block > strong { font-size: 4.6rem; }
  .summary-kpi-grid { grid-template-columns: 1fr 1fr; }
  .summary-kpi-grid strong { font-size: 1.45rem; margin: 8px 0 4px; }
  .path-chart-wrap { padding: 18px 14px 16px; }
  .path-chart-head { min-width: 680px; align-items: start; }
  .path-chart { min-width: 680px; min-height: 350px; grid-template-columns: repeat(7, 84px); }
  .journey-step { grid-template-rows: 26px 170px 38px 28px 34px; }
  .journey-bars { height: 160px; }
}


/* Roboto Condensed CMS font lock */
html, body, body *, body *::before, body *::after,
button, input, select, textarea, option {
  font-family: "Roboto Condensed", sans-serif !important;
}


/* =========================================================
   AVATAR CẦU THỦ THUẦN HTML/CSS — KHÔNG FILE ẢNH, KHÔNG URL
   ========================================================= */
.css-player-avatar {
  width: 64px;
  height: 64px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  display: block;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.92) 0 22%, rgba(255,255,255,.35) 23% 44%, transparent 45%),
    linear-gradient(145deg, color-mix(in srgb, var(--avatar-accent) 42%, #e9eff5), #eef3f7 70%);
  border: 2px solid rgba(255,255,255,.94);
  box-shadow: 0 10px 26px rgba(7,22,41,.16), inset 0 0 0 1px rgba(11,29,52,.08);
  isolation: isolate;
  transition: transform .22s ease, box-shadow .22s ease;
}
.leader-rank-avatar.team-spain .css-player-avatar { outline: 2px solid rgba(181,30,49,.22); }
.leader-rank-avatar.team-argentina .css-player-avatar { outline: 2px solid rgba(23,130,181,.22); }
.leader-row:hover .css-player-avatar { transform: translateY(-2px) scale(1.045); box-shadow: 0 14px 32px rgba(7,22,41,.22); }

.avatar-body {
  position: absolute;
  z-index: 2;
  width: 52px;
  height: 27px;
  left: 6px;
  bottom: -9px;
  border-radius: 50% 50% 8px 8px / 65% 65% 20% 20%;
  background: var(--avatar-shirt);
  box-shadow: inset 0 8px 0 rgba(255,255,255,.07);
}
.avatar-shirt-accent {
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 26px;
  left: 21px;
  bottom: -9px;
  background: var(--avatar-accent);
  opacity: .75;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
}
.avatar-neck {
  position: absolute;
  z-index: 4;
  width: 13px;
  height: 14px;
  left: 25.5px;
  top: 39px;
  border-radius: 0 0 6px 6px;
  background: var(--avatar-skin);
  box-shadow: inset 0 4px 0 rgba(109,53,36,.08);
}
.avatar-face {
  position: absolute;
  z-index: 6;
  width: 34px;
  height: 40px;
  left: 15px;
  top: 10px;
  border-radius: 48% 48% 46% 46% / 40% 40% 58% 58%;
  background: var(--avatar-skin);
  box-shadow: inset 4px 0 0 rgba(255,255,255,.08), inset -4px 0 0 rgba(91,43,31,.05);
}
.avatar-ear {
  position: absolute;
  z-index: 5;
  width: 7px;
  height: 11px;
  top: 27px;
  border-radius: 50%;
  background: var(--avatar-skin);
}
.avatar-ear-left { left: 12px; }
.avatar-ear-right { right: 12px; }
.avatar-hair {
  position: absolute;
  z-index: 8;
  width: 37px;
  height: 18px;
  left: 13.5px;
  top: 7px;
  border-radius: 55% 55% 32% 32%;
  background: var(--avatar-hair);
  box-shadow: inset 0 -3px 0 rgba(255,255,255,.035);
}
.hair-short .avatar-hair { height: 16px; border-radius: 55% 55% 28% 28%; }
.hair-crop .avatar-hair { height: 13px; top: 8px; border-radius: 55% 55% 35% 35%; }
.hair-fade .avatar-hair {
  height: 15px;
  top: 8px;
  border-radius: 60% 60% 24% 24%;
}
.hair-fade .avatar-hair::before,
.hair-fade .avatar-hair::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 18px;
  top: 9px;
  background: var(--avatar-hair);
  opacity: .75;
}
.hair-fade .avatar-hair::before { left: 0; border-radius: 0 0 5px 5px; }
.hair-fade .avatar-hair::after { right: 0; border-radius: 0 0 5px 5px; }
.hair-side .avatar-hair {
  left: 12px;
  width: 40px;
  height: 18px;
  border-radius: 65% 45% 30% 25%;
  transform: skewX(-5deg);
}
.hair-side .avatar-hair::after {
  content: "";
  position: absolute;
  right: 0;
  top: 6px;
  width: 8px;
  height: 18px;
  border-radius: 0 0 8px 8px;
  background: var(--avatar-hair);
}
.hair-messy .avatar-hair {
  top: 6px;
  height: 19px;
  border-radius: 52% 58% 28% 30%;
  clip-path: polygon(0 35%, 8% 7%, 19% 22%, 30% 0, 42% 19%, 54% 2%, 67% 20%, 81% 5%, 100% 36%, 95% 100%, 5% 100%);
}
.hair-curly .avatar-hair {
  width: 40px;
  height: 20px;
  left: 12px;
  top: 6px;
  background:
    radial-gradient(circle at 10% 50%, var(--avatar-hair) 0 6px, transparent 6.5px),
    radial-gradient(circle at 28% 25%, var(--avatar-hair) 0 7px, transparent 7.5px),
    radial-gradient(circle at 48% 35%, var(--avatar-hair) 0 8px, transparent 8.5px),
    radial-gradient(circle at 70% 24%, var(--avatar-hair) 0 7px, transparent 7.5px),
    radial-gradient(circle at 90% 52%, var(--avatar-hair) 0 6px, transparent 6.5px),
    radial-gradient(circle at 28% 76%, var(--avatar-hair) 0 7px, transparent 7.5px),
    radial-gradient(circle at 68% 76%, var(--avatar-hair) 0 7px, transparent 7.5px);
  box-shadow: none;
}
.avatar-eye,
.avatar-brow,
.avatar-nose,
.avatar-mouth,
.avatar-beard { position: absolute; z-index: 10; }
.avatar-eye {
  width: 3px;
  height: 3px;
  top: 29px;
  border-radius: 50%;
  background: #172333;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.3);
}
.avatar-eye-left { left: 25px; }
.avatar-eye-right { right: 25px; }
.avatar-brow {
  width: 8px;
  height: 2px;
  top: 25px;
  border-radius: 99px;
  background: var(--avatar-hair);
  opacity: .82;
}
.avatar-brow-left { left: 21px; transform: rotate(-5deg); }
.avatar-brow-right { right: 21px; transform: rotate(5deg); }
.avatar-nose {
  width: 2px;
  height: 7px;
  left: 31px;
  top: 30px;
  border-radius: 99px;
  background: rgba(120,61,44,.22);
}
.avatar-mouth {
  width: 10px;
  height: 4px;
  left: 27px;
  top: 40px;
  border-bottom: 2px solid rgba(113,48,42,.65);
  border-radius: 0 0 50% 50%;
}
.avatar-beard { display: none; }
.has-beard .avatar-beard {
  display: block;
  z-index: 9;
  width: 25px;
  height: 15px;
  left: 19.5px;
  top: 36px;
  border-radius: 20% 20% 48% 48%;
  background: var(--avatar-hair);
  opacity: .86;
  clip-path: polygon(0 0, 18% 22%, 50% 35%, 82% 22%, 100% 0, 88% 78%, 50% 100%, 12% 78%);
}
.has-beard .avatar-mouth { z-index: 12; border-color: rgba(255,255,255,.64); }

@media (max-width: 640px) {
  .leader-rank-avatar, .css-player-avatar { width: 50px; height: 50px; }
  .css-player-avatar { transform-origin: center; }
  .css-player-avatar .avatar-face { transform: translate(-7px, -6px) scale(.78); transform-origin: center; }
  .css-player-avatar .avatar-hair,
  .css-player-avatar .avatar-eye,
  .css-player-avatar .avatar-brow,
  .css-player-avatar .avatar-nose,
  .css-player-avatar .avatar-mouth,
  .css-player-avatar .avatar-beard,
  .css-player-avatar .avatar-ear,
  .css-player-avatar .avatar-neck,
  .css-player-avatar .avatar-body,
  .css-player-avatar .avatar-shirt-accent { transform: scale(.78); transform-origin: center; }
}

/* Khóa tương thích trình duyệt/CMS cho avatar CSS */
.css-player-avatar {
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.92) 0 22%, rgba(255,255,255,.35) 23% 44%, transparent 45%),
    linear-gradient(145deg, var(--avatar-accent), #eef3f7 70%);
}
@media (max-width: 640px) {
  .leader-rank-avatar { width: 50px; height: 50px; }
  .css-player-avatar {
    width: 64px;
    height: 64px;
    transform: scale(.78125);
    transform-origin: top left;
  }
  .leader-row:hover .css-player-avatar { transform: scale(.80); }
  .css-player-avatar .avatar-face,
  .css-player-avatar .avatar-hair,
  .css-player-avatar .avatar-eye,
  .css-player-avatar .avatar-brow,
  .css-player-avatar .avatar-nose,
  .css-player-avatar .avatar-mouth,
  .css-player-avatar .avatar-beard,
  .css-player-avatar .avatar-ear,
  .css-player-avatar .avatar-neck,
  .css-player-avatar .avatar-body,
  .css-player-avatar .avatar-shirt-accent { transform: none; }
}