/* =========================================================================
   VIFL 2026 — Da Nang
   The poster reads north-to-south: Hanoi red, Da Nang gold, Saigon blue,
   over a night map. The site borrows that spine — a near-black ground with
   the three city colours used to mean something, never as decoration.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#07070A; --ink2:#0C0C11; --ink3:#12121A;
  --line:rgba(240,240,245,.09); --line2:rgba(240,240,245,.18);
  --white:#F2F2F5; --dim:rgba(242,242,245,.52); --mute:rgba(242,242,245,.3);
  --red:#E02B2B; --gold:#F5C542; --blue:#3E7BD6;
  --live:#FF3B3B; --win:#4FBF7B; --draw:rgba(242,242,245,.4); --loss:#E0684F;
  --disp:'Bebas Neue',Impact,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--white);font-family:var(--body);
  font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── HEADER ─────────────────────────────────────────────────────────── */
/* The blur lives on a pseudo-element, not on the header itself. An element
   carrying backdrop-filter becomes the containing block for its
   position:fixed descendants — exactly like transform does — which sized the
   mobile nav panel against a 64px header instead of the viewport. Moving the
   filter one level down keeps the effect and frees the panel. */
header.top{position:sticky;top:0;z-index:60;background:transparent;
  border-bottom:1px solid var(--line);isolation:isolate}
header.top::before{content:'';position:absolute;inset:0;z-index:-1;
  background:rgba(7,7,10,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.top-in{max-width:var(--wrap);margin:0 auto;padding:0 22px;height:64px;
  display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:baseline;gap:9px;flex:none}
.brand b{font-family:var(--disp);font-size:1.6rem;letter-spacing:.06em;line-height:1}
.brand span{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
nav.main{display:flex;gap:2px;margin-left:auto}
nav.main a{position:relative;padding:10px 16px;font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);transition:color .18s}
/* the underline grows from the middle rather than blinking on */
nav.main a::after{content:'';position:absolute;left:16px;right:16px;bottom:4px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:center;
  transition:transform .24s cubic-bezier(.22,.61,.36,1)}
nav.main a:hover::after{transform:scaleX(.45)}
nav.main a.on::after{transform:scaleX(1)}
/* The numbering and the matchday block belong to the mobile panel; in a
   horizontal bar they are noise. */
nav.main a i{display:none}
nav.main a:hover{color:var(--white)}
nav.main a.on{color:var(--white)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line2);
  color:var(--white);width:42px;height:38px;font-size:1rem;cursor:pointer}
@media(max-width:860px){
  /* A slide-in panel, not a strip that pushes the page down. It covers the
     screen so the menu is the only thing to deal with, and every row is a
     44px+ target reachable with a thumb. */
  nav.main{position:fixed;top:0;right:0;bottom:0;width:min(340px,84vw);z-index:70;
    display:flex;flex-direction:column;gap:0;padding:88px 0 26px;
    background:var(--ink2);border-left:1px solid var(--line2);
    transform:translateX(102%);transition:transform .34s cubic-bezier(.22,.61,.36,1);
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  nav.main.open{transform:none;box-shadow:-30px 0 60px rgba(0,0,0,.55)}
  nav.main a::after{display:none}
  nav.main a{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:17px 26px;font-family:var(--disp);font-size:1.5rem;letter-spacing:.06em;
    text-transform:none;color:var(--dim);border-bottom:1px solid var(--line);
    opacity:0;transform:translateX(16px);
    transition:opacity .3s ease,transform .3s ease,color .18s}
  nav.main.open a{opacity:1;transform:none}
  nav.main.open a:nth-child(1){transition-delay:.06s}
  nav.main.open a:nth-child(2){transition-delay:.10s}
  nav.main.open a:nth-child(3){transition-delay:.14s}
  nav.main.open a:nth-child(4){transition-delay:.18s}
  nav.main.open a:nth-child(5){transition-delay:.22s}
  nav.main.open a:nth-child(6){transition-delay:.26s}
  nav.main a i{display:block;font-style:normal;font-family:var(--body);font-size:.56rem;
    letter-spacing:.16em;color:var(--mute)}
  nav.main a.on{color:var(--white);border-bottom-color:var(--line)}
  nav.main a.on i{color:var(--gold)}
  nav.main a:active{background:var(--ink3)}
  .nav-veil{position:fixed;inset:0;z-index:65;background:rgba(4,4,7,.72);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;transition:opacity .3s ease}
  .nav-veil.on{opacity:1}

  /* burger → close, drawn rather than typed so it animates */
  .burger{display:block;position:relative;z-index:80;width:44px;height:40px;
    background:none;border:1px solid var(--line2);cursor:pointer}
  .burger span,.burger span::before,.burger span::after{
    position:absolute;left:50%;width:18px;height:1.5px;background:var(--white);
    transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .2s}
  .burger span{top:50%;transform:translate(-50%,-50%)}
  .burger span::before,.burger span::after{content:'';left:0;transform-origin:center}
  .burger span::before{top:-6px}
  .burger span::after{top:6px}
  .burger[aria-expanded=true] span{transform:translate(-50%,-50%) rotate(45deg)}
  .burger[aria-expanded=true] span::before{transform:translateY(6px) rotate(-90deg)}
  .burger[aria-expanded=true] span::after{opacity:0}
  body.nav-open{overflow:hidden}
}
@media(min-width:861px){ .nav-veil{display:none} }
}

/* ── LIVE BAR ───────────────────────────────────────────────────────── */
.livebar{background:var(--live);color:#fff;position:sticky;top:64px;z-index:55}
.livebar a,.livebar div.lb-in{max-width:var(--wrap);margin:0 auto;padding:11px 22px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.76rem;font-weight:600}
.lb-dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:none;
  animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.lb-tag{font-family:var(--disp);font-size:1rem;letter-spacing:.14em}
.lb-go{margin-left:auto;padding:5px 13px;border:1px solid rgba(255,255,255,.6);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.lb-go:hover{background:#fff;color:var(--live)}

/* ── HERO ───────────────────────────────────────────────────────────── */
.hero{position:relative;padding:96px 0 78px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero::before{content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 42% at 22% 8%,  rgba(224,43,43,.30), transparent 70%),
    radial-gradient(52% 40% at 50% 48%, rgba(245,197,66,.22), transparent 70%),
    radial-gradient(62% 46% at 80% 96%, rgba(62,123,214,.28), transparent 70%)}
.hero::after{content:'';position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent)}
.hero > *{position:relative;z-index:1}
.hero-eyebrow{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px}
.hero h1{font-family:var(--disp);font-size:clamp(4.2rem,15vw,10rem);line-height:.84;
  letter-spacing:.02em}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero-sub{font-family:var(--disp);font-size:clamp(1.1rem,3.6vw,1.9rem);
  letter-spacing:.14em;color:var(--white);margin-top:14px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.hero-meta b{color:var(--white);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;
  font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid var(--line2);color:var(--white);cursor:pointer;background:none;
  font-family:inherit;transition:.18s}
.btn:hover{border-color:var(--white)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#0A0A0A}
.btn-gold:hover{background:#ffd965;border-color:#ffd965}
.btn-live{background:var(--live);border-color:var(--live);color:#fff}
.btn-live:hover{background:#ff5555;border-color:#ff5555}
.btn-sm{padding:9px 16px;font-size:.58rem}

/* ── SECTIONS ───────────────────────────────────────────────────────── */
section.sec{padding:72px 0;border-bottom:1px solid var(--line)}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:30px;flex-wrap:wrap}
.sec-hd h2{font-family:var(--disp);font-size:clamp(1.9rem,5vw,2.8rem);letter-spacing:.04em;line-height:1}
.sec-hd p{font-size:.78rem;color:var(--dim);margin-top:6px;max-width:56ch}
.sec-hd a{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap}
.sec-hd a:hover{color:var(--gold)}
.eyebrow{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.prose p{font-size:.92rem;line-height:1.85;color:var(--dim);margin-bottom:16px;max-width:70ch}
.prose p:first-child{color:var(--white)}

/* ── CRESTS ─────────────────────────────────────────────────────────── */
.crest{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--ink3);border:1px solid var(--line2);
  font-family:var(--disp);font-size:.95rem;letter-spacing:.04em;color:var(--white);overflow:hidden}
.crest img{width:100%;height:100%;object-fit:contain;padding:4px}
/* the badge IS the mark — no ring, no fill, no padding stealing its size.
   The canvas is deliberately larger than the artwork (every badge is scaled to
   the same INK area, not the same bounding box), so the box is scaled up to
   compensate. Growing all of them by the same factor keeps them consistent. */
.crest.has-img{background:none;border:none;border-radius:0;overflow:visible;
  width:56px;height:56px}
.crest.has-img.sm{width:38px;height:38px}
.crest.has-img.lg{width:100px;height:100px}
.crest.has-img img{padding:0}
.crest-tbd{border-style:dashed;border-color:var(--line2);background:transparent}
.crest.lg{width:76px;height:76px;font-size:1.5rem}
.crest.sm{width:30px;height:30px;font-size:.72rem}

/* ── FIXTURE CARDS ──────────────────────────────────────────────────── */
.mlist{display:flex;flex-direction:column;gap:10px}
.m{display:block;background:var(--ink2);border:1px solid var(--line);
  transition:border-color .18s,background .18s}
.m:hover{border-color:var(--line2);background:var(--ink3)}
.m.is-live{border-color:var(--live);background:rgba(255,59,59,.06)}
.m-top{display:flex;align-items:center;gap:10px;padding:10px 16px;
  border-bottom:1px solid var(--line);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);flex-wrap:wrap}
.m-stage{color:var(--gold)}
.m-when{margin-left:auto;color:var(--dim)}
.m-body{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:18px 16px}
.m-team{display:flex;align-items:center;gap:12px;min-width:0}
.m-team.away{flex-direction:row-reverse;text-align:right}
.m-team b{font-size:.9rem;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis}
.m-team.dim b{color:var(--dim);font-weight:400}
.m-score{display:flex;align-items:center;gap:10px;font-family:var(--disp);
  font-size:2rem;letter-spacing:.06em;line-height:1;white-space:nowrap}
.m-score i{font-style:normal;color:var(--mute);font-size:1.1rem}
.m-ko{font-family:var(--disp);font-size:1.5rem;letter-spacing:.06em;color:var(--dim);white-space:nowrap}
.m-foot{padding:10px 16px;border-top:1px solid var(--line);display:flex;
  align-items:center;gap:12px;flex-wrap:wrap;font-size:.66rem;color:var(--dim)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;
  font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line2);color:var(--dim)}
.badge-live{background:var(--live);border-color:var(--live);color:#fff}
.badge-live .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
.badge-ft{border-color:var(--line2);color:var(--dim)}
.stream{display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  padding:7px 14px;background:var(--live);color:#fff;font-size:.6rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.stream:hover{background:#ff5555}
.stream.off{background:none;border:1px solid var(--line2);color:var(--dim)}
@media(max-width:620px){
  .m-body{grid-template-columns:1fr auto 1fr;gap:8px;padding:15px 12px}
  .m-team b{font-size:.78rem}
  .crest{width:34px;height:34px;font-size:.76rem}
  .m-score{font-size:1.5rem}
  .stream{width:100%;margin-left:0;justify-content:center;margin-top:4px}
}

/* ── TABLE ──────────────────────────────────────────────────────────── */
.tbl-wrap{border:1px solid var(--line);background:var(--ink2);overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;min-width:620px}
table.tbl th{padding:13px 10px;font-size:.56rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);text-align:center;border-bottom:1px solid var(--line2);
  white-space:nowrap;background:var(--ink3)}
table.tbl th:nth-child(2){text-align:left}
table.tbl td{padding:12px 10px;font-size:.82rem;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl td:nth-child(2){text-align:left}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover{background:var(--ink3)}
.t-pos{font-family:var(--disp);font-size:1.05rem;color:var(--dim);width:44px}
.t-team{display:flex;align-items:center;gap:11px;min-width:0}
.t-team b{font-weight:600;font-size:.86rem}
.t-team span{font-size:.62rem;color:var(--mute);letter-spacing:.1em;text-transform:uppercase}
.t-pts{font-family:var(--disp);font-size:1.25rem;color:var(--gold)}
.t-form{display:flex;gap:3px;justify-content:center}
.t-form i{width:18px;height:18px;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:.56rem;font-weight:700;border-radius:2px}
.f-W{background:rgba(79,191,123,.22);color:var(--win)}
.f-D{background:rgba(242,242,245,.12);color:var(--draw)}
.f-L{background:rgba(224,104,79,.2);color:var(--loss)}
.qual{box-shadow:inset 3px 0 0 var(--line2)}
.p-final{box-shadow:inset 3px 0 0 var(--gold)}
.p-third{box-shadow:inset 3px 0 0 var(--blue)}
.p-spoon{box-shadow:inset 3px 0 0 var(--mute)}
.tbl-key i.p-final{background:var(--gold)}
.tbl-key i.p-third{background:var(--blue)}
.tbl-key i.p-spoon{background:var(--mute)}
.tbl-key{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:.66rem;color:var(--mute)}
.tbl-key i{display:inline-block;width:9px;height:9px;background:var(--gold);margin-right:7px}

/* ── STATS ──────────────────────────────────────────────────────────── */
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card{background:var(--ink2);border:1px solid var(--line);padding:20px}
.card h3{font-family:var(--disp);font-size:1.15rem;letter-spacing:.08em;margin-bottom:14px}
.rank{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.rank:last-child{border-bottom:none}
.rank-n{font-family:var(--disp);font-size:1rem;color:var(--mute);width:22px;flex:none}
.rank-b{flex:1;min-width:0}
.rank-b b{display:block;font-size:.84rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-b span{font-size:.64rem;color:var(--mute)}
.rank-v{font-family:var(--disp);font-size:1.4rem;color:var(--gold);flex:none}
.stat{background:var(--ink2);border:1px solid var(--line);padding:22px 18px;text-align:center}
.stat b{display:block;font-family:var(--disp);font-size:2.6rem;line-height:1;letter-spacing:.03em}
.stat span{display:block;margin-top:7px;font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute)}

/* ── TEAM CARDS ─────────────────────────────────────────────────────── */
.tcard{display:flex;align-items:center;gap:15px;padding:18px;background:var(--ink2);
  border:1px solid var(--line);transition:.18s}
.tcard:hover{border-color:var(--line2);background:var(--ink3);transform:translateY(-2px)}
.tcard-b{min-width:0;flex:1}
.tcard-b b{display:block;font-size:.95rem;font-weight:600}
.tcard-b span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.tcard-b i{display:block;font-style:normal;font-size:.68rem;color:var(--gold);margin-top:4px}
.city-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:1px}

/* ── MISC ───────────────────────────────────────────────────────────── */
.empty{padding:56px 20px;text-align:center;color:var(--mute);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;border:1px dashed var(--line2)}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px}
.chip{padding:9px 16px;background:var(--ink2);border:1px solid var(--line);
  color:var(--dim);font-family:inherit;font-size:.64rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;transition:.18s}
.chip:hover{border-color:var(--line2);color:var(--white)}
.chip.on{background:var(--white);border-color:var(--white);color:var(--ink)}
.note{padding:16px 18px;border:1px solid var(--line2);background:var(--ink2);
  font-size:.8rem;color:var(--dim);line-height:1.7}
.crumbs{display:flex;gap:9px;align-items:center;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin-bottom:22px;flex-wrap:wrap}
.crumbs a:hover{color:var(--white)}
footer.bot{padding:46px 0 60px;color:var(--mute);font-size:.72rem}
.bot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer.bot a:hover{color:var(--white)}
.skeleton{opacity:.4;animation:sk 1.2s ease-in-out infinite}
@keyframes sk{0%,100%{opacity:.25}50%{opacity:.55}}

/* ── LOGO ───────────────────────────────────────────────────────────── */
.brand{display:flex;align-items:center;flex:none}
/* One image: the crest and the logo's own ViFL lettering. Sized to match the
   export exactly, so nothing is resampled at runtime. */
.brand-mark{width:128px;height:40px;flex:none;display:block}
/* The full lockup leads the hero. It carries the crest, the wordmark and the
   league's full name, so the headline below states the edition instead of
   repeating any of them. */
.hero-logo{width:min(230px,44vw);height:auto;margin:0 0 28px;
  filter:drop-shadow(0 8px 34px rgba(0,0,0,.7))}
@media(max-width:620px){.hero-logo{margin:0 auto 24px}}

/* ── HERO VIDEO ─────────────────────────────────────────────────────────
   The footage is background, not content: it is muted, loops, carries no
   audio track at all, and is hidden from assistive tech. The scrim is what
   makes the type legible over moving pictures — without it the headline
   flickers between readable and not as the bridge lights change. */
.hero.has-video{padding:120px 0 96px}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.5}
.hero-scrim{position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(180deg,rgba(7,7,10,.72) 0%,rgba(7,7,10,.55) 42%,rgba(7,7,10,.96) 100%),
    radial-gradient(58% 44% at 20% 6%,rgba(224,43,43,.30),transparent 70%),
    radial-gradient(58% 44% at 82% 92%,rgba(62,123,214,.26),transparent 70%)}
.hero.has-video::before,.hero.has-video::after{display:none}
.hero-credit{position:absolute;right:16px;bottom:12px;z-index:2;font-size:.56rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(242,242,245,.34)}
.hero-credit a{border-bottom:1px solid rgba(242,242,245,.2)}
.hero-credit a:hover{color:var(--white)}
@media(max-width:620px){
  .hero.has-video{padding:84px 0 30px}
  /* on a phone the credit has no corner to sit in, so it becomes a normal
     line under the buttons rather than dim text floating over the footage */
  .hero-credit{position:static;display:block;margin:26px 22px 0;text-align:left;
    color:rgba(242,242,245,.5);line-height:1.7}
}
/* Someone who has asked their system for less motion should not be handed a
   looping video as the first thing on the page. */
@media (prefers-reduced-motion: reduce){
  .hero-vid{display:none}
  .hero.has-video{background:url('/img/danang-hero.jpg') center/cover no-repeat}
}

/* ── SCROLL REVEAL ──────────────────────────────────────────────────────
   Sections and cards rise a few pixels as they come into view. Deliberately
   small and quick: the point is that the page feels alive, not that anyone
   waits for it. Anything below the first fold starts hidden; the hero never
   does, so the page is never blank on arrival. */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.06s}.rv-d2{transition-delay:.12s}
.rv-d3{transition-delay:.18s}.rv-d4{transition-delay:.24s}

/* ── COUNTERS ───────────────────────────────────────────────────────────
   Tabular figures so the number does not jitter sideways while it counts. */
.stat b,.sv-count{font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}
.stat{position:relative;overflow:hidden}
.stat::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .9s ease .2s}
.stat.in::after{transform:scaleX(1)}

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
footer.bot{padding:74px 0 46px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(224,43,43,.05) 40%,rgba(62,123,214,.06))}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:38px;
  padding-bottom:52px;border-bottom:1px solid var(--line)}
.foot-brand img{width:172px;height:auto;margin-bottom:20px}
.foot-brand p{font-size:.78rem;line-height:1.8;color:var(--dim);max-width:42ch}
.foot-nav{display:flex;flex-direction:column;gap:11px}
.foot-nav h4{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:5px;font-weight:600}
.foot-nav a,.foot-nav span{font-size:.78rem;color:var(--dim);transition:color .18s}
.foot-nav a:hover{color:var(--white)}

/* the credit line — the largest type on the page, on purpose */
.built{display:block;padding:52px 0 46px;border-bottom:1px solid var(--line);
  text-align:center;transition:opacity .25s}
.built:hover{opacity:.82}
.built-k{display:block;font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--mute);margin-bottom:14px}
.built-row{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,30px)}
.built-badge{width:clamp(52px,10vw,104px);height:auto;flex:none}
.built-b{display:block;font-family:var(--disp);line-height:.92;letter-spacing:.03em;
  font-size:clamp(2rem,7.6vw,5.2rem);color:var(--white);text-align:left}
.built-b em{display:block;font-style:normal;font-size:.44em;letter-spacing:.2em;
  color:var(--dim);margin-top:8px}
@media(max-width:520px){
  .built-row{flex-direction:column;gap:16px}
  .built-b{text-align:center}
}
.foot-bot{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
  padding-top:26px;font-size:.68rem;color:var(--mute)}
.foot-bot a{border-bottom:1px solid rgba(242,242,245,.16)}
.foot-bot a:hover{color:var(--white)}
@media(max-width:820px){
  .foot-top{grid-template-columns:1fr;gap:32px;padding-bottom:40px}
  .foot-brand img{width:150px}
  footer.bot{padding:52px 0 40px}
  .built{padding:40px 0 34px}
}

/* One switch turns every bit of motion off for anyone who asked for that. */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1;transform:none;transition:none}
  .stat::after{transition:none;transform:scaleX(1)}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

/* ── PLAYERS ────────────────────────────────────────────────────────────── */
.pface{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;
  background:var(--ink3);border:1px solid var(--line2)}
.pface-ph{display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-size:1.05rem;color:var(--dim)}
.pface.lg{width:104px;height:104px;font-size:2.4rem}
.phead{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.phead h1{font-family:var(--disp);font-size:clamp(2rem,7vw,3.4rem);
  letter-spacing:.03em;line-height:1}
.phead-m{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.phead-m a:hover{color:var(--white)}
.tcard-b i{display:block;font-style:normal;font-size:.68rem;color:var(--gold);margin-top:4px}
a.rank{transition:background .15s}
a.rank:hover{background:var(--ink3)}

/* ── KIT DOTS ───────────────────────────────────────────────────────────
   A small strip beside the name so players know which shirt to bring. Purely
   supplementary — the team name is still the identifier, so colour is never
   carrying meaning on its own. */
.kdot{display:inline-block;width:13px;height:13px;border-radius:3px;margin:0 6px;
  vertical-align:-1px;border:1px solid rgba(242,242,245,.22);
  background:linear-gradient(105deg,var(--k1) 0 62%,var(--k2) 62% 100%)}
.m-team.away b .kdot{margin-left:0}
@media(max-width:620px){ .kdot{width:11px;height:11px;margin:0 4px} }