/* ══════════════════════════════════════════════════════════════════════════
   THE SCOREBOARD, AS A PAGE ELEMENT

   This is the real frame bar's treatment lifted out of overlay.html and made
   embeddable: the carbon gradient, the 128deg hatch, the halftone dot field
   with its two-way mask, the team-coloured slash hanging off the score, the
   -9deg slant, the goal pop and the light sweep.

   The overlay sizes everything in vh because it owns a 1920x1080 canvas. Here
   nothing may depend on viewport height, so every measurement is driven by a
   single --u (unit) on .board. Change --u and the whole graphic scales, which
   is how the same markup serves an 88px hero bar and a 46px one on the sign-in
   panel without a second stylesheet.
   ══════════════════════════════════════════════════════════════════════════ */

.board{
  --u: 88px;              /* bar height. everything below is a multiple */
  --slant: -9deg;
  --pa:#1a2436; --pb:#0d1421; --pc:#0a1018;
  --home:#4d7bff; --away:#ff4d45;

  position:relative;width:100%;height:var(--u);
  display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(160deg,var(--pa) 0%,var(--pb) 62%,var(--pc) 100%);
  box-shadow:0 calc(var(--u)*.05) calc(var(--u)*.22) rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.10);
  font-family:var(--display);
}
/* the fine diagonal carbon hatch. deliberately in px, not scaled: it is a
   hairline texture and sub-pixel widths just make it shimmer */
.board::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(128deg,
    rgba(255,255,255,.032) 0 1.5px, rgba(255,255,255,0) 1.5px 9px);
}

.bd-side{
  flex:1;min-width:0;align-self:stretch;position:relative;overflow:hidden;
  display:flex;align-items:center;
  gap:calc(var(--u)*.16);padding:0 calc(var(--u)*.20);
}
.bd-side.away{flex-direction:row-reverse}

/* halftone field: peaks on the score, falls away BOTH ways so it never ends
   in a hard vertical seam against the clock */
.bd-ht{
  position:absolute;top:0;bottom:0;right:0;width:62%;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle,var(--dots) calc(var(--u)*.018),
                                   transparent calc(var(--u)*.021));
  background-size:calc(var(--u)*.10) calc(var(--u)*.10);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 50%,
                                     rgba(0,0,0,1) 86%,rgba(0,0,0,.1) 100%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 50%,
                                     rgba(0,0,0,1) 86%,rgba(0,0,0,.1) 100%);
  opacity:.85;
}
.bd-side.away .bd-ht{right:auto;left:0;transform:scaleX(-1)}

.bd-crest{
  flex:none;width:calc(var(--u)*.60);height:calc(var(--u)*.60);
  position:relative;z-index:2;filter:drop-shadow(0 0 calc(var(--u)*.10) var(--glow));
}
.bd-crest img{width:100%;height:100%;object-fit:contain;display:block}
/* the same shield silhouette the product draws when a team has no emblem */
.bd-crest .sh{
  position:absolute;inset:0;
  clip-path:polygon(7% 0%,93% 0%,100% 7%,100% 52%,96% 68%,86% 81%,69% 93%,
                    50% 100%,31% 93%,14% 81%,4% 68%,0% 52%,0% 7%);
}
.bd-crest .ab{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--u)*.17);font-weight:800;letter-spacing:.01em;
  padding-bottom:calc(var(--u)*.05);
}

.bd-abbr{
  position:relative;z-index:2;white-space:nowrap;
  font-size:calc(var(--u)*.30);font-weight:800;font-stretch:87%;line-height:1;
  color:#fff;text-transform:uppercase;transform:skewX(var(--slant));
  text-shadow:0 calc(var(--u)*.02) calc(var(--u)*.09) rgba(0,0,0,.75);
}
.bd-score{
  position:relative;z-index:2;margin-left:auto;flex:none;
  font-size:calc(var(--u)*.52);font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;color:#fff;transform:skewX(var(--slant));
  text-shadow:0 calc(var(--u)*.02) calc(var(--u)*.10) rgba(0,0,0,.8);
}
.bd-side.away .bd-score{margin-left:0;margin-right:auto}
/* the slash hangs off the score itself, so it stays glued to the digits
   whether the score is 0 or 10, and inherits the skew for free */
.bd-score::before{
  content:'';position:absolute;
  top:calc((var(--u)*.52 - var(--u)) / 2 - var(--u)*.10);
  bottom:calc((var(--u)*.52 - var(--u)) / 2 - var(--u)*.10);
  left:calc(var(--u)*-.20);width:calc(var(--u)*.045);
  background:linear-gradient(180deg,transparent,var(--glow) 18%,
                             var(--glow) 82%,transparent);
  box-shadow:0 0 calc(var(--u)*.11) var(--glow);
}
.bd-side.away .bd-score::before{left:auto;right:calc(var(--u)*-.20)}

.bd-cards{position:relative;z-index:2;display:flex;gap:calc(var(--u)*.05);flex:none}
.bd-cards i{
  display:block;width:calc(var(--u)*.11);height:calc(var(--u)*.16);
  border-radius:calc(var(--u)*.02);
  background:linear-gradient(180deg,#ff3b30,#c8102e);
  box-shadow:0 0 calc(var(--u)*.06) rgba(226,35,26,.8);
  animation:bdCard .4s cubic-bezier(.2,1.6,.3,1);
}
.bd-cards i.y{
  background:linear-gradient(180deg,#ffe14d,#f5b800);
  box-shadow:0 0 calc(var(--u)*.06) rgba(245,184,0,.75);
}
@keyframes bdCard{from{transform:scale(0) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}

.bd-centre{
  flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(var(--u)*.02);padding:0 calc(var(--u)*.26);min-width:calc(var(--u)*2.1);
  border-left:2px solid rgba(255,255,255,.07);
  border-right:2px solid rgba(255,255,255,.07);
  position:relative;z-index:2;
}
.bd-clock{
  font-size:calc(var(--u)*.45);font-weight:800;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.015em;
  transform:skewX(var(--slant));
  text-shadow:0 calc(var(--u)*.02) calc(var(--u)*.09) rgba(0,0,0,.75);
}
.bd-meta{
  display:flex;align-items:center;gap:calc(var(--u)*.07);
  font-size:calc(var(--u)*.105);font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:#c3d2ec;white-space:nowrap;
}
.bd-meta b{color:#dbe8ff;font-weight:800}
.bd-meta i{
  font-style:normal;width:calc(var(--u)*.16);height:calc(var(--u)*.16);
  background:var(--accent);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:.9;
}

/* goal: the score kicks, and a band of light sweeps the side */
.bd-side.pop .bd-score{animation:bdPop .9s cubic-bezier(.2,1.5,.3,1)}
@keyframes bdPop{
  0%  {transform:skewX(var(--slant)) scale(1)}
  17% {transform:skewX(var(--slant)) scale(1.3);
       text-shadow:0 0 calc(var(--u)*.26) #fff,0 0 calc(var(--u)*.5) var(--glow)}
  55% {transform:skewX(var(--slant)) scale(1.06)}
  100%{transform:skewX(var(--slant)) scale(1)}
}
.bd-side.pop::after{
  content:'';position:absolute;top:0;bottom:0;left:-45%;width:45%;z-index:3;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
  animation:bdSweep .9s cubic-bezier(.3,.1,.3,1);
}
@keyframes bdSweep{to{left:120%}}

/* On a phone the competition line is the widest thing in the bar and it is
   nowrap, so it sets the board's min-content width and drags the whole grid
   track past the viewport. The real overlay never faces this because it always
   owns a 1920 canvas. Drop it and tighten the centre. */
@media (max-width:640px){
  .bd-meta{display:none}
  .bd-centre{min-width:calc(var(--u)*1.35);padding:0 calc(var(--u)*.16)}
  .bd-side{gap:calc(var(--u)*.11);padding:0 calc(var(--u)*.14)}
}

@media (prefers-reduced-motion: reduce){
  .bd-side.pop .bd-score,.bd-side.pop::after,.bd-cards i{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   THE CORNER BOARD — the product's second layout

   Two stacked team rows and a competition strip, the shape that sits in a
   corner of the stream rather than across the top. Same idiom as the frame:
   carbon panels, 128deg hatch, a team-coloured slash introducing each score.

   Driven by --r, the row height, exactly as .board is driven by --u. The real
   overlay works in px against a fixed 1920 canvas; every ratio below is that
   design divided by its 74px row so the whole thing scales from one number.
   ══════════════════════════════════════════════════════════════════════════ */
.cboard{
  --r:74px;
  --slant:-9deg;
  --pa:#1a2436; --pb:#0d1421; --pc:#0a1018;
  display:flex;flex-direction:column;gap:calc(var(--r)*.095);
  width:calc(var(--r)*6.4);max-width:100%;
  font-family:var(--display);
}
.cb-row{
  position:relative;display:flex;align-items:center;
  height:var(--r);border-radius:calc(var(--r)*.108);overflow:hidden;
  background:linear-gradient(158deg,var(--pa) 0%,var(--pb) 62%,var(--pc) 100%);
  box-shadow:0 calc(var(--r)*.135) calc(var(--r)*.35) rgba(0,0,0,.62),
             inset 0 1px 0 rgba(255,255,255,.10);
}
.cb-row::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(128deg,
    rgba(255,255,255,.032) 0 1px, rgba(255,255,255,0) 1px 6px);
}
/* halftone gathers toward the score, same as the frame */
.cb-ht{
  position:absolute;top:0;bottom:0;right:0;width:64%;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle,var(--dots) calc(var(--r)*.02),
                                   transparent calc(var(--r)*.024));
  background-size:calc(var(--r)*.115) calc(var(--r)*.115);
  -webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,1) 88%);
          mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,1) 88%);
  opacity:.8;
}
.cb-crest{
  flex:none;position:relative;z-index:2;
  width:calc(var(--r)*.68);height:calc(var(--r)*.76);
  margin:0 calc(var(--r)*.20) 0 calc(var(--r)*.175);
  filter:drop-shadow(0 0 calc(var(--r)*.12) var(--glow));
}
.cb-crest img{width:100%;height:100%;object-fit:contain;display:block}
.cb-crest .sh{position:absolute;inset:0;
  clip-path:polygon(7% 0%,93% 0%,100% 7%,100% 52%,96% 68%,86% 81%,69% 93%,
                    50% 100%,31% 93%,14% 81%,4% 68%,0% 52%,0% 7%)}
.cb-crest .ab{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:calc(var(--r)*.19);font-weight:800;
  padding-bottom:calc(var(--r)*.055)}
.cb-id{position:relative;z-index:2;min-width:0;flex:1}
.cb-id b{
  display:block;font-size:calc(var(--r)*.378);font-weight:800;line-height:1;
  color:#fff;text-transform:uppercase;white-space:nowrap;
  transform:skewX(var(--slant));transform-origin:left;
  text-shadow:0 calc(var(--r)*.02) calc(var(--r)*.09) rgba(0,0,0,.75);
}
.cb-id i{
  display:block;margin-top:calc(var(--r)*.075);font-style:normal;
  font-size:calc(var(--r)*.135);font-weight:700;letter-spacing:.30em;
  color:#93a6c4;text-transform:uppercase;
}
.cb-cards{position:relative;z-index:2;display:flex;gap:calc(var(--r)*.05);
          flex:none;margin-right:calc(var(--r)*.16)}
.cb-cards i{
  display:block;width:calc(var(--r)*.13);height:calc(var(--r)*.19);
  border-radius:calc(var(--r)*.025);
  background:linear-gradient(180deg,#ff3b30,#c8102e);
  box-shadow:0 0 calc(var(--r)*.07) rgba(226,35,26,.8);
  animation:bdCard .4s cubic-bezier(.2,1.6,.3,1);
}
.cb-cards i.y{background:linear-gradient(180deg,#ffe14d,#f5b800);
              box-shadow:0 0 calc(var(--r)*.07) rgba(245,184,0,.75)}
.cb-score{
  position:relative;z-index:3;flex:none;width:calc(var(--r)*1.24);
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--r)*.595);font-weight:800;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;transform:skewX(var(--slant));
  text-shadow:0 calc(var(--r)*.02) calc(var(--r)*.10) rgba(0,0,0,.8);
}
.cb-score::before{
  content:'';position:absolute;left:calc(var(--r)*-.06);
  top:calc(var(--r)*.10);bottom:calc(var(--r)*.10);width:calc(var(--r)*.045);
  background:linear-gradient(180deg,transparent,var(--glow) 18%,
                             var(--glow) 82%,transparent);
  box-shadow:0 0 calc(var(--r)*.12) var(--glow);
}
/* Three lines live in here (clock, stage, wordmark) and they come to about
   0.70 of a row height. At 0.62 the wordmark was simply clipped off the bottom
   by the overflow:hidden that keeps the corners rounded. */
.cb-strip{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  min-height:calc(var(--r)*.80);border-radius:calc(var(--r)*.108);overflow:hidden;
  padding:calc(var(--r)*.06) calc(var(--r)*.14);
  background:linear-gradient(158deg,var(--pa) 0%,var(--pb) 62%,var(--pc) 100%);
  box-shadow:0 calc(var(--r)*.10) calc(var(--r)*.26) rgba(0,0,0,.6),
             inset 0 1px 0 rgba(255,255,255,.08);
}
.cb-strip::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(128deg,
    rgba(255,255,255,.032) 0 1px, rgba(255,255,255,0) 1px 6px);
}
.cb-badge{
  position:relative;flex:none;display:flex;align-items:center;gap:calc(var(--r)*.06);
  font-size:calc(var(--r)*.128);font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:#c3d2ec;white-space:nowrap;
}
.cb-badge em{
  font-style:normal;width:calc(var(--r)*.14);height:calc(var(--r)*.14);
  background:var(--accent,#2f6df6);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:.9;
}
.cb-mid{position:relative;text-align:center;flex:1;min-width:0}
.cb-clock{
  font-size:calc(var(--r)*.378);font-weight:800;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;transform:skewX(var(--slant));display:inline-block;
}
.cb-stage{
  font-size:calc(var(--r)*.128);font-weight:700;letter-spacing:.22em;line-height:1.15;
  text-transform:uppercase;color:#c3d2ec;margin-top:calc(var(--r)*.03);
}
.cb-word{
  font-size:calc(var(--r)*.105);font-weight:700;letter-spacing:.34em;line-height:1.15;
  text-transform:uppercase;color:#5d6b85;margin-top:calc(var(--r)*.03);
}
.cb-row.pop .cb-score{animation:bdPop .9s cubic-bezier(.2,1.5,.3,1)}
.cb-row.pop::after{
  content:'';position:absolute;top:0;bottom:0;left:-45%;width:45%;z-index:4;
  pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
  animation:bdSweep .9s cubic-bezier(.3,.1,.3,1);
}
@media (prefers-reduced-motion: reduce){
  .cb-row.pop .cb-score,.cb-row.pop::after,.cb-cards i{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   SHOT MAP + LIVE STATS

   The pitch is 105x68 metres, the same coordinate space FotMob reports shots
   in, so a shot's position here is its real position with no fudging. Markings
   are to scale: the box is 16.5 deep and 40.32 wide, the six-yard 5.5 by 18.32,
   the arc 9.15 and the spot 11 out.
   ══════════════════════════════════════════════════════════════════════════ */
.pitch{
  position:relative;aspect-ratio:105/68;width:100%;overflow:hidden;
  border-radius:12px;
  background:
    repeating-linear-gradient(90deg,#16401f 0 8.5%,#1a4a25 8.5% 17%);
  box-shadow:inset 0 0 90px rgba(0,0,0,.55),0 20px 54px rgba(0,0,0,.5);
  --ln:rgba(255,255,255,.30);
}
.pitch .mk{position:absolute;border:2px solid var(--ln);pointer-events:none}
.pitch .edge{inset:3%}
.pitch .half{left:50%;top:3%;bottom:3%;border-width:0 0 0 2px}
.pitch .circle{left:50%;top:50%;width:17.4%;aspect-ratio:1;transform:translate(-50%,-50%);
               border-radius:50%}
.pitch .spot{left:50%;top:50%;width:1.1%;aspect-ratio:1;transform:translate(-50%,-50%);
             background:var(--ln);border:0;border-radius:50%}
.pitch .box{top:50%;transform:translateY(-50%);height:59.3%;width:15.7%}
.pitch .box.l{left:3%} .pitch .box.r{right:3%}
.pitch .six{top:50%;transform:translateY(-50%);height:26.9%;width:5.2%}
.pitch .six.l{left:3%} .pitch .six.r{right:3%}
.pitch .pk{width:.9%;aspect-ratio:1;background:var(--ln);border:0;border-radius:50%;
           top:50%;transform:translate(-50%,-50%)}
.pitch .pk.l{left:13.5%} .pitch .pk.r{left:86.5%}

.shot{
  position:absolute;transform:translate(-50%,-50%) scale(0);border-radius:50%;
  border:2px solid #fff;box-sizing:border-box;
  animation:shotIn .5s cubic-bezier(.2,1.6,.35,1) forwards;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
@keyframes shotIn{to{transform:translate(-50%,-50%) scale(1)}}
.shot.miss{background:transparent}
.shot.on{background:rgba(255,255,255,.55)}
.shot.goal{background:#fff;box-shadow:0 0 16px #fff,0 0 34px var(--gcol,#4d7bff)}
.shot.goal::after{
  content:'';position:absolute;inset:-8px;border-radius:50%;
  border:2px solid var(--gcol,#4d7bff);opacity:0;
  animation:shotRing 1.4s ease-out infinite;
}
@keyframes shotRing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}

.sm-legend{
  display:flex;gap:clamp(12px,1.4vw,26px);flex-wrap:wrap;margin-top:14px;
  font:600 clamp(10.5px,.72vw,13px) var(--body);letter-spacing:.14em;
  text-transform:uppercase;color:#61748f;
}
.sm-legend span{display:flex;align-items:center;gap:7px}
.sm-legend b{width:11px;height:11px;border-radius:50%;border:2px solid #fff;display:block}
.sm-legend b.on{background:rgba(255,255,255,.55)}
.sm-legend b.goal{background:#fff}

/* ── live stat panel ── */
.spanel{display:grid;gap:clamp(11px,1vw,17px)}
.srow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
      gap:clamp(10px,1vw,18px)}
.srow .v{
  font:800 clamp(16px,1.35vw,25px) var(--display);color:#fff;
  font-variant-numeric:tabular-nums;min-width:2.6em;text-align:center;
  transform:skewX(-9deg);
}
.srow .lbl{
  text-align:center;font:600 clamp(10.5px,.76vw,13.5px) var(--body);
  letter-spacing:.2em;text-transform:uppercase;color:#8296b4;
}
.sbar{
  position:relative;height:7px;border-radius:4px;overflow:hidden;
  background:#16203180;margin-top:8px;display:flex;
}
.sbar u{display:block;height:100%;transition:width .9s cubic-bezier(.22,.8,.3,1)}
.sbar u.h{background:linear-gradient(90deg,#4d7bff,#2f6df6)}
.sbar u.a{background:linear-gradient(90deg,#ff4d45,#c8102e);margin-left:auto}

/* ══════════════════════════════════════════════════════════════════════════
   THE KIT SHIELD

   Concentric layers cut to one silhouette and inset progressively, so the rim,
   the neon rail and the face nest like a milled badge:

     shd-metal   0%    faceted steel bezel, and the badge's cast shadow
     shd-neon    4%    team-coloured rail. drop-shadow() follows a clip-path's
                       alpha, which is the only way to make a glow trace the
                       shield outline instead of its bounding box
     shd-seat    9%    a dark gap so the face sits down inside the rail
     shd-face   11%    the kit, brushed, under a top-left gloss
     shd-txt           the abbreviation, embossed into the plate

   Sized entirely in cqw against .shd itself. Two things forced that:
   percentages are not valid as a drop-shadow blur radius (the glow silently
   did nothing), and font-size:% resolves against the INHERITED size, not the
   element, so the lettering came out 6px regardless of the badge. Container
   units make every measurement scale with the shield, so one definition
   serves a 26px chip and a 140px crest, for all 493 kits, all ten patterns
   and any colour a customer invents. No per-team artwork.
   ══════════════════════════════════════════════════════════════════════════ */
.shd{
  --shape:polygon(7% 0%,93% 0%,100% 7%,100% 52%,96% 68%,86% 81%,69% 93%,
                  50% 100%,31% 93%,14% 81%,4% 68%,0% 52%,0% 7%);
  --glow:#4d7bff; --kit:#1a2436; --ink:#fff;
  container-type:inline-size;isolation:isolate;
  position:relative;display:block;width:100%;height:100%;
}
.shd i{position:absolute;display:block;clip-path:var(--shape);pointer-events:none}

/* brushed steel bezel. Hard stops read as milled facets rather than a wash. */
.shd .shd-metal{
  inset:0;
  background:
    linear-gradient(147deg,
      #f2f7ff 0%, #b9c8dd 11%, #6d7f99 24%, #33415a 38%,
      #55688a 50%, #9db0cb 63%, #dfe9f8 74%, #6f819c 86%, #26303f 100%);
  filter:drop-shadow(0 2cqw 3cqw rgba(0,0,0,.62));
}
/* the neon rail: hot at the top edge, saturated round the rest */
.shd .shd-neon{
  inset:4%;
  background:linear-gradient(158deg,#ffffff 0%,#ffffff 6%,var(--glow) 20%,
                             var(--glow) 78%,color-mix(in srgb,var(--glow) 55%,#000) 100%);
  filter:drop-shadow(0 0 1.6cqw var(--glow)) drop-shadow(0 0 4.5cqw var(--glow));
}
.shd .shd-seat{inset:9%;background:#060a11}
.shd .shd-face{inset:11%;background:var(--kit)}
/* Brushed texture and gloss, in straight alpha.
   This used mix-blend-mode:overlay, which was richer but wrong: a blend group
   composites against its backdrop over the element's BOUNDING BOX, and iOS
   Safari does not intersect that group with the clip-path. The result was a
   grey rectangle sitting over the score bar behind every badge. Plain rgba
   needs no blend group, so it cannot leak outside the silhouette anywhere. */
.shd .shd-gloss{
  inset:11%;
  background:
    repeating-linear-gradient(128deg,rgba(255,255,255,.10) 0 1px,rgba(255,255,255,0) 1px 5px),
    linear-gradient(152deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.09) 26%,
                    rgba(255,255,255,0) 52%,rgba(0,0,0,.30) 100%);
}
/* the abbreviation, cut into the plate */
.shd .shd-txt{
  position:absolute;inset:11%;z-index:2;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display,'Saira Condensed',sans-serif);
  font-weight:800;font-size:30cqw;letter-spacing:.005em;line-height:1;
  color:var(--ink);padding-bottom:5cqw;
  text-shadow:
    0 -.045em 0 rgba(255,255,255,.6),
    0 .05em .012em rgba(0,0,0,.9),
    0 0 .3em rgba(0,0,0,.55);
}
/* A patterned kit needs a PLATE, not a halo. The letters cross two or three
   colours, so on a white-and-black stripe there is no single ink that works and
   no amount of shadow saves it: 157 of 493 kits measured at 1.0:1 that way.
   A dark band across the middle is what a broadcast actually does, and it makes
   white ink correct on every pattern regardless of the colours underneath. */
.shd.busy .shd-txt{
  background:linear-gradient(180deg,
    rgba(6,10,18,0) 14%, rgba(6,10,18,.52) 30%, rgba(6,10,18,.60) 50%,
    rgba(6,10,18,.52) 70%, rgba(6,10,18,0) 86%);
  text-shadow:0 .04em .02em rgba(0,0,0,.85);
}

/* Below roughly 34px the bezel, rail and seat together eat the badge and it
   turns into a grey blob, so small sizes drop the seat and thin the rim. */
.shd.sm .shd-neon{inset:3%}
.shd.sm .shd-seat{display:none}
.shd.sm .shd-face,.shd.sm .shd-gloss,.shd.sm .shd-txt{inset:7.5%}
.shd.sm .shd-txt{font-size:34cqw;padding-bottom:4cqw}
.shd.sm .shd-metal{filter:drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.6))}

/* ── the stat band, as it appears along the bottom of a stream ──
   A teaser, not the feature. Three panels cycle and the counter says how many
   more there are, so the demo shows the shape of the thing without handing
   over the whole rotation. */
.sband{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:9cqw;display:flex;align-items:center;
  padding:0 2.2cqw;gap:2cqw;overflow:hidden;
  background:linear-gradient(0deg,#0a1018 0%,#0d1421 55%,#1a2436 100%);
  box-shadow:0 -.4cqw 1.6cqw rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.10);
  font-family:var(--display);
}
.sband::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(128deg,
    rgba(255,255,255,.03) 0 1px,rgba(255,255,255,0) 1px 6px);
}
.sb-tag{
  position:relative;flex:none;display:flex;align-items:center;gap:.7cqw;
  font-size:1.15cqw;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#6f9bff;
}
.sb-tag em{
  font-style:normal;width:.8cqw;height:.8cqw;border-radius:50%;
  background:#ff4d45;box-shadow:0 0 .8cqw #ff4d45;
  animation:live 1.9s ease-in-out infinite;
}
/* Dead centre on the BAND, not centred in the space left over between the
   side groups. 'LIVE' on the left is narrower than the dots plus '+20 more'
   on the right, so a flex:1 middle sat left of centre and no longer lined up
   with the clock in the scoreboard above, which is genuinely centred. */
.sb-win{position:absolute;left:50%;transform:translateX(-50%);
        width:62%;height:100%;overflow:hidden}
.sb-item{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:2.4cqw;opacity:0;transform:translateY(35%);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.9,.3,1);
}
.sb-item.on{opacity:1;transform:none}
.sb-item b{font-size:2.5cqw;font-weight:800;color:#fff;
           font-variant-numeric:tabular-nums;transform:skewX(-9deg)}
.sb-item i{
  font-style:normal;font-size:1.15cqw;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#93a6c4;min-width:11cqw;text-align:center;
}
.sb-more{
  position:relative;flex:none;font-size:1.05cqw;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#5d6b85;
}
.sb-dots{position:relative;flex:none;display:flex;gap:.5cqw;margin-left:auto}
.sb-dots u{display:block;width:.55cqw;height:.55cqw;border-radius:50%;
           background:#2b3b56;transition:background .3s}
.sb-dots u.on{background:#6f9bff;box-shadow:0 0 .8cqw #6f9bff}

/* ── momentum ──
   Positive is home. Measured, not assumed: across sampled matches the home
   side's shots averaged +30 and the away side's -25, so the sign convention
   was read off the data rather than guessed at. */
.mom{position:relative;width:100%;height:clamp(150px,15vw,230px);
     display:flex;align-items:center;gap:.5%}
.mom::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
             background:rgba(255,255,255,.16)}
.mom u{flex:1;position:relative;height:100%;display:block}
.mom u b{
  position:absolute;left:0;right:0;display:block;border-radius:2px;
  height:0;transition:height .5s cubic-bezier(.22,.8,.3,1),
                      top .5s cubic-bezier(.22,.8,.3,1),
                      bottom .5s cubic-bezier(.22,.8,.3,1);
}
.mom u b.h{bottom:50%;background:linear-gradient(180deg,#6f9bff,#2f6df6);
           box-shadow:0 0 10px rgba(47,109,246,.5)}
.mom u b.a{top:50%;background:linear-gradient(0deg,#ff6b64,#c8102e);
           box-shadow:0 0 10px rgba(200,16,46,.5)}
.mom-key{display:flex;justify-content:space-between;margin-top:12px;
         font:600 clamp(10.5px,.72vw,13px) var(--body);letter-spacing:.18em;
         text-transform:uppercase;color:#61748f}
.mom-key i{font-style:normal;color:#8fb2ff}
.mom-key em{font-style:normal;color:#ff9d97}

/* ══════════════════════════════════════════════════════════════════════════
   THE BREAK PANELS, as they actually appear along the bottom of a stream.
   A horizontal band: an identity block on the left behind a slanted divider,
   the content in the middle, pagination on the right.
   ══════════════════════════════════════════════════════════════════════════ */
.pband{
  --u:74px; --home:#4d7bff; --away:#f5a524;
  position:relative;display:flex;align-items:center;overflow:hidden;
  height:var(--u);border-radius:calc(var(--u)*.10);
  background:linear-gradient(158deg,#1a2436 0%,#0d1421 62%,#0a1018 100%);
  box-shadow:0 calc(var(--u)*.14) calc(var(--u)*.34) rgba(0,0,0,.62),
             inset 0 1px 0 rgba(255,255,255,.10);
  font-family:var(--display);
}
.pband::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(128deg,
    rgba(255,255,255,.032) 0 1px,rgba(255,255,255,0) 1px 6px);
}
.pb-id{
  position:relative;z-index:2;flex:none;display:flex;align-items:center;
  gap:calc(var(--u)*.16);padding:0 calc(var(--u)*.30) 0 calc(var(--u)*.22);
}
.pb-id .crest{width:calc(var(--u)*.52);height:calc(var(--u)*.58);flex:none}
/* > div, not bare descendants: the crest's kit shield is built from <b> and
   <i> elements too, and unscoped these rules reached in and restyled them.
   The margin-top alone shifted every absolutely positioned layer downwards. */
.pb-id > div b{
  display:block;font-size:calc(var(--u)*.235);font-weight:800;line-height:1;
  color:#fff;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;
  transform:skewX(-9deg);transform-origin:left;
}
.pb-id > div i{
  display:block;margin-top:calc(var(--u)*.07);font-style:normal;
  font-size:calc(var(--u)*.115);font-weight:700;letter-spacing:.22em;
  color:#8fa3c0;text-transform:uppercase;white-space:nowrap;
}
/* the slanted divider the real panel uses to separate identity from content */
.pb-cut{
  position:relative;z-index:2;flex:none;width:calc(var(--u)*.05);
  height:calc(var(--u)*.62);transform:skewX(-9deg);
  background:linear-gradient(180deg,transparent,var(--home) 18%,var(--home) 82%,transparent);
  box-shadow:0 0 calc(var(--u)*.14) var(--home);
}
.pb-body{position:relative;z-index:2;flex:1;min-width:0;height:100%;
         display:flex;align-items:center;padding:0 calc(var(--u)*.26)}

/* ── stats ── */
.pb-stats{display:flex;align-items:center;gap:calc(var(--u)*.42);width:100%}
.pb-stat{flex:1;min-width:0}
.pb-stat .row{display:flex;align-items:baseline;justify-content:space-between;
              gap:calc(var(--u)*.16)}
.pb-stat .v{font-size:calc(var(--u)*.30);font-weight:800;color:#fff;line-height:1;
            font-variant-numeric:tabular-nums;transform:skewX(-9deg)}
.pb-stat .v.a{color:var(--away)}
.pb-stat .v.h{color:#fff}
.pb-stat .k{font-size:calc(var(--u)*.115);font-weight:700;letter-spacing:.2em;
            text-transform:uppercase;color:#8fa3c0;white-space:nowrap}
/* .pb-bar, not .bar: the demo window's fake title bar already claims `.bar`
   at the same specificity and is defined later in the cascade, so it won. The
   track inherited padding:11px and no height, which made height:100% on the
   fills resolve against an auto-height parent and collapse them to zero. */
.pb-stat .pb-bar{
  display:flex;height:calc(var(--u)*.085);margin-top:calc(var(--u)*.14);
  border-radius:calc(var(--u)*.05);overflow:hidden;background:#1620317a;
}
.pb-stat .pb-bar u{display:block;align-self:stretch;
                   transition:width .8s cubic-bezier(.22,.8,.3,1)}
.pb-stat .pb-bar u.h{background:linear-gradient(90deg,#6f9bff,var(--home))}
.pb-stat .pb-bar u.a{background:linear-gradient(90deg,var(--away),#ffcf6b);margin-left:auto}

/* ── momentum ── */
.pb-mom{position:relative;width:100%;height:calc(var(--u)*.62);display:flex;
        align-items:center;gap:.4%;
        transition:opacity .45s ease}
.pb-mom.wipe{opacity:0}
.pb-mom.wipe .now{transition:none}
.pb-mom::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;
                background:rgba(255,255,255,.14)}
.pb-mom u{flex:1;position:relative;height:100%}
.pb-mom u b{position:absolute;left:6%;right:6%;height:0;border-radius:1px;
            transition:height .45s cubic-bezier(.22,.8,.3,1)}
.pb-mom u b.h{bottom:50%;background:var(--home)}
.pb-mom u b.a{top:50%;background:var(--away)}
/* the live marker the product puts at the current minute */
.pb-mom .now{
  position:absolute;top:50%;width:calc(var(--u)*.14);height:calc(var(--u)*.14);
  border-radius:50%;border:2px solid #fff;background:#0d1421;
  transform:translate(-50%,-50%);transition:left .45s linear;z-index:2;
  box-shadow:0 0 calc(var(--u)*.16) rgba(255,255,255,.5);
}
.pb-dots{display:none;position:relative;z-index:2;flex:none;
         gap:calc(var(--u)*.07);padding-right:calc(var(--u)*.26)}
.pb-dots u{display:block;width:calc(var(--u)*.075);height:calc(var(--u)*.075);
           border-radius:50%;background:#2b3b56;transition:background .3s}
.pb-dots u.on{background:#8fa3c0}
@media(max-width:700px){
  /* The band's horizontal anatomy does not fit a phone. The title text and
     one-per-page dots (13 pages of XI = ~150px of dots) left the body ~30px,
     and .pb-body does not clip, so values painted straight over the dots and
     the shirt number sat on the title. On a phone the crest alone identifies
     the panel (the window chrome above it already names it), the dots go, and
     the whole width belongs to the one item on show. */
  .pb-id > div{display:none}
  .pb-dots{display:none}
  .pb-body{overflow:hidden}
  .pb-id{padding:0 calc(var(--u)*.10) 0 calc(var(--u)*.22)}
  .pb-stats{gap:calc(var(--u)*.24)}
}


/* ── the lineup band ──
   Copied from the product's own .pl row rather than reinvented: <i> the shirt
   number, <b> the name, <s> the substitution badge carrying the arrow and the
   minute. Everything sizes in em off the row, and the row is baseline-aligned,
   so a badge appearing can never push its line out of step with the others.
   A substituted player gets .fresh, which flashes the NAME green and lets it
   settle to white, instead of leaving it permanently coloured. */
/* baseline, not center: the substitution badge makes its row taller, and
   centring unequal rows drops that name below the line. Baseline aligns the
   NAMES, which is what the eye reads, whatever else the row carries. */
.pb-xi{
  /* .275 looked right but clipped a name in 8 frames out of 14; .25 with a
     tighter gap is bigger than before and still fits every line. */
  display:flex;align-items:baseline;gap:calc(var(--u)*.20);width:100%;
  font-size:calc(var(--u)*.25);
}
.pb-pl{
  flex:1;min-width:0;display:inline-flex;align-items:baseline;gap:.42em;
  white-space:nowrap;
  animation:plIn .42s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes plIn{from{opacity:0;transform:translateY(22%)}to{opacity:1;transform:none}}
.pb-pl:nth-child(2){animation-delay:.07s}
.pb-pl:nth-child(3){animation-delay:.14s}
.pb-pl:nth-child(4){animation-delay:.21s}
.pb-pl:nth-child(5){animation-delay:.28s}
.pb-pl i{
  font-style:normal;flex:none;min-width:1.2em;text-align:right;
  font-size:.72em;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--home);text-shadow:0 0 .5em var(--home);
}
.pb-pl b{
  font-size:1em;font-weight:700;color:#fff;text-transform:uppercase;
  letter-spacing:.012em;overflow:hidden;text-overflow:ellipsis;
  transform:skewX(-9deg);transform-origin:left;
  text-shadow:0 .08em .3em rgba(0,0,0,.72);
}
/* the substitution badge: arrow plus the minute he came on */
.pb-pl s{
  text-decoration:none;flex:none;display:flex;align-items:center;gap:.18em;
  margin-left:.1em;padding:.11em .34em;border-radius:.18em;
  background:rgba(37,211,102,.16);
  font-size:.53em;font-weight:800;color:#4fe08a;letter-spacing:.04em;
}
.pb-pl.fresh b{animation:subIn 2.4s ease both}
@keyframes subIn{
  0%  {color:#7dffb4;text-shadow:0 0 .7em rgba(37,211,102,.9)}
  70% {color:#7dffb4}
  100%{color:#fff}
}
/* a lone keeper is the opposite problem from a back five */
.pb-xi.solo{justify-content:center;font-size:calc(var(--u)*.36)}
.pb-xi.solo .pb-pl{flex:none}
.pb-xi.tight{gap:calc(var(--u)*.18)}
.pb-sub-tag{display:none}
@media (prefers-reduced-motion: reduce){ .pb-pl,.pb-pl.fresh b{animation:none} }
@media(max-width:700px){ .pb-xi{gap:calc(var(--u)*.18)} }


/* ── the tactics board demo ── */
.tacdemo{
  position:relative;width:100%;aspect-ratio:105/68;overflow:hidden;
  border-radius:10px;border:1px solid #245c33;
  background:linear-gradient(160deg,#175025 0%,#0d3517 60%,#0a2c13 100%);
}
.tacdemo svg{position:absolute;inset:0;width:100%;height:100%}
.tacdemo .mk{fill:none;stroke:rgba(255,255,255,.32);stroke-width:.35}
.tacdemo .arr line{
  stroke:#f5b800;stroke-width:.8;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .9s cubic-bezier(.3,.8,.3,1);
}
.tacdemo .arr polygon{fill:#f5b800;opacity:0;transition:opacity .3s ease .75s}
.tacdemo .arr.on line{stroke-dashoffset:0}
.tacdemo .arr.on polygon{opacity:1}
.td-p{
  position:absolute;width:5.8%;aspect-ratio:1;margin:0;
  transform:translate(-50%,-50%);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:800 clamp(7px,.72vw,10px) var(--display);color:#0a0e1a;
  background:var(--tc,#fff);
  box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 0 0 1.5px rgba(255,255,255,.4);
  transition:left 1.1s cubic-bezier(.3,.8,.3,1),top 1.1s cubic-bezier(.3,.8,.3,1);
}
.td-p[style*="#2f8bff"]{color:#fff}
@media (prefers-reduced-motion: reduce){
  .tacdemo .arr line,.tacdemo .arr polygon,.td-p{transition:none}
}


/* ── the live league table demo ── */
.ltdemo{
  --rh:clamp(30px,4.6vw,38px);
  position:relative;border-radius:10px;border:1px solid #22345c;overflow:hidden;
  background:linear-gradient(165deg,#101a33 0%,#0a1226 60%,#080e1e 100%);
}
.lt-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px 10px;
  font:700 clamp(11px,.85vw,13px) var(--display);letter-spacing:.14em;
  text-transform:uppercase;color:#8fa3c8;
}
.lt-live{display:flex;align-items:center;gap:6px;color:#ff7070;letter-spacing:.18em}
.lt-live i{width:7px;height:7px;border-radius:50%;background:#ff5d5d;animation:ltPulse 1.6s ease infinite}
@keyframes ltPulse{0%,100%{opacity:1}50%{opacity:.25}}
.lt-bd{position:relative;height:calc(var(--rh)*8);margin:0 10px}
.lt-r{
  position:absolute;left:0;right:0;height:var(--rh);
  display:grid;grid-template-columns:4px 2em 1.1em 1fr auto 2em 2.6em 2.2em;
  align-items:center;gap:.35em;padding-right:8px;border-radius:6px;
  font:600 clamp(11px,.92vw,14.5px) var(--display);letter-spacing:.03em;
  color:#e6ecf8;
  transition:top .9s cubic-bezier(.3,.8,.3,1);
}
.lt-r.me{background:rgba(77,123,255,.10);box-shadow:inset 0 0 0 1px rgba(77,123,255,.22)}
.lt-r .z{justify-self:start;width:3px;height:62%;border-radius:2px;background:var(--z,transparent)}
.lt-r .ps{text-align:center;font-weight:800;color:#aab8d8;font-variant-numeric:tabular-nums}
.lt-r .mv{font-size:.62em;text-align:center}
.lt-r .mv.up{color:#4fe08a}
.lt-r .mv.dn{color:#ff6a6a}
.lt-r .nm{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700}
.lt-r .lv{
  font-weight:800;font-variant-numeric:tabular-nums;font-size:.78em;
  color:#ffb3b3;background:rgba(255,93,93,.14);border-radius:4px;padding:.14em .4em;
}
.lt-r .lv:empty{display:none}
.lt-r .pl,.lt-r .gd{font-variant-numeric:tabular-nums;text-align:right;color:#8fa3c8;font-size:.86em}
.lt-r .pt{font-variant-numeric:tabular-nums;text-align:right;font-weight:800;color:#fff}
.lt-r.gl{animation:ltGoal 1.5s ease}
@keyframes ltGoal{
  0%{background:rgba(245,184,0,.34)}
  100%{background:rgba(77,123,255,.10)}
}
.lt-key{
  display:flex;gap:18px;padding:10px 16px 14px;
  font:600 clamp(10px,.75vw,12px) var(--display);letter-spacing:.08em;color:#8fa3c8;
}
.lt-key span{display:flex;align-items:center}
.lt-key u{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--z);
  margin-right:6px;text-decoration:none}
@media (prefers-reduced-motion: reduce){ .lt-r{transition:none} .lt-live i{animation:none} }