:root{
  --navy:#0a0f22;
  --navy-2:#111936;
  --ink:#05070f;
  --card:#141414;
  --card-hi:#232323;
  --card-lo:#0d0d0d;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.055);
  --fg:#f2f4fa;
  --fg-dim:#9aa3bd;
  --fg-faint:#606a86;
  --spurs:#132257;
  --amber:#ffb020;
  --hot:#ff4d4d;
  --flap-h:96px;
  --flap-w:70px;
  --radius:6px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 78% -10%, #1c2853 0%, transparent 62%),
    radial-gradient(900px 600px at 0% 100%, #16112e 0%, transparent 60%),
    var(--ink);
  color:var(--fg);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.5;
  min-height:100vh;
}
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
a{color:#a9c2ff;text-decoration-color:rgba(169,194,255,.35);text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}

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

/* ---------- masthead ---------- */
.masthead{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:16px;
  padding:22px clamp(16px,4vw,48px) 18px;
  border-bottom:1px solid var(--line-soft);
}
.crest{
  width:38px;height:38px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #26356e, var(--spurs) 70%);
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 0 24px rgba(30,52,124,.55);
  position:relative;
}
.crest::after{
  content:"";position:absolute;inset:0;margin:auto;width:8px;height:12px;
  background:#fff;clip-path:polygon(50% 0,100% 62%,72% 100%,28% 100%,0 62%);
  opacity:.92;
}
.masthead-text{min-width:0}
h1{
  font-family:"Barlow Condensed",Impact,sans-serif;
  font-weight:700; font-size:clamp(22px,3.4vw,32px);
  letter-spacing:.045em; text-transform:uppercase; margin:0; line-height:1;
}
.tagline{margin:5px 0 0;color:var(--fg-dim);font-size:13.5px;max-width:62ch}
.live{
  margin-left:auto; flex:none; display:flex; align-items:center; gap:7px;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-dim);
  border:1px solid var(--line); border-radius:100px; padding:6px 12px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--hot);box-shadow:0 0 10px var(--hot);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}

/* ---------- layout ---------- */
.layout{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 372px;
  gap:clamp(20px,3vw,40px);
  padding:clamp(20px,3.5vw,44px) clamp(16px,4vw,48px) 56px;
  align-items:start;
}
@media (max-width:1080px){ .layout{grid-template-columns:minmax(0,1fr)} }

.boards{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px);min-width:0}

/* ---------- board ---------- */
.board{
  border:1px solid var(--line-soft);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  padding:clamp(16px,2.4vw,26px);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9);
}
.board-head h2{
  margin:0 0 16px;
  font-family:"Barlow Condensed",sans-serif;
  font-weight:600; font-size:15px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--fg-dim);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.venue-tag{
  font-family:"Inter",sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:.14em; padding:3px 9px; border-radius:4px; color:#05070f;
}
.venue-home{background:var(--amber)}
.venue-away{background:#7fd1ff}

/* ---------- split-flap ---------- */
.flipboard{
  display:flex; align-items:flex-end; gap:clamp(6px,1vw,12px);
  flex-wrap:wrap;
  padding:clamp(10px,1.6vw,18px) 0 4px;
}
.unit{display:flex;flex-direction:column;align-items:center;gap:9px}
.digits{display:flex;gap:4px}
.unit-label{
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-faint);
}
.sep{
  align-self:center; margin-bottom:34px;
  color:var(--fg-faint); font-size:26px; line-height:1; font-weight:700;
  opacity:.5;
}

.flap{
  position:relative;
  width:var(--flap-w); height:var(--flap-h);
  perspective:280px;
  border-radius:var(--radius);
  font-family:"JetBrains Mono","SFMono-Regular",monospace;
  font-size:calc(var(--flap-h) * .68);
  font-weight:700;
  color:#f6f6f4;
  background:var(--ink);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.045);
  user-select:none;
}
/* hairline gap across the middle */
.flap::after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:2px; margin-top:-1px; background:rgba(0,0,0,.85);
  z-index:6; pointer-events:none; border-radius:1px;
}
.half{
  position:absolute; left:0; right:0; height:50%;
  overflow:hidden; display:flex; justify-content:center;
  backface-visibility:hidden;
}
.half span{
  display:block; height:var(--flap-h); line-height:var(--flap-h);
  text-align:center; width:100%;
}
.half.top{
  top:0; align-items:flex-start;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(180deg,var(--card-hi),var(--card));
}
.half.bottom{
  bottom:0; align-items:flex-end;
  border-radius:0 0 var(--radius) var(--radius);
  background:linear-gradient(180deg,var(--card-lo),#161616);
}
.half.bottom span{margin-top:calc(var(--flap-h) * -.5)}
.fold-top,.fold-bottom{z-index:5}
.fold-top{transform-origin:bottom center}
.fold-bottom{transform-origin:top center;transform:rotateX(90deg)}
.flap.flipping .fold-top{animation:foldTop .34s cubic-bezier(.4,0,.75,.55) forwards}
.flap.flipping .fold-bottom{animation:foldBottom .34s cubic-bezier(.25,.5,.6,1) .34s forwards}
@keyframes foldTop{ to{transform:rotateX(-90deg)} }
@keyframes foldBottom{ from{transform:rotateX(90deg)} to{transform:rotateX(0deg)} }
/* subtle sheen */
.flap .half.top::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0));
  pointer-events:none;
}

.unit--sec .flap{--flap-h:64px;--flap-w:48px}
.unit--sec .unit-label{color:var(--fg-faint)}

@media (max-width:760px){
  .flipboard{--flap-h:66px;--flap-w:48px}
  .unit--sec .flap{--flap-h:48px;--flap-w:36px}
  .sep{margin-bottom:26px;font-size:20px}
}
@media (max-width:420px){
  .flipboard{--flap-h:54px;--flap-w:39px;gap:5px}
  .unit--sec .flap{--flap-h:40px;--flap-w:30px}
}
@media (prefers-reduced-motion:reduce){
  .flap.flipping .fold-top,.flap.flipping .fold-bottom{animation:none}
  .fold-top,.fold-bottom{display:none}
  .dot{animation:none}
}

/* ---------- board foot ---------- */
.board-foot{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
  display:flex; gap:16px; align-items:baseline; flex-wrap:wrap;
}
.last{font-size:13.5px;color:var(--fg-dim);min-width:0}
.last-label{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-faint); margin-right:8px;
}
.last strong{color:var(--fg);font-weight:600}
.since{
  margin-left:auto; font-size:12px; color:var(--fg-faint);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* ---------- headline stat ---------- */
.headline-stat{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  border:1px solid rgba(255,77,77,.28);
  background:linear-gradient(100deg, rgba(255,77,77,.10), rgba(255,77,77,.02));
  border-radius:14px; padding:clamp(16px,2.2vw,24px);
}
.headline-stat .big{
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:clamp(52px,7vw,84px); line-height:.85; color:#ff7b7b;
  font-variant-numeric:tabular-nums;
}
.headline-stat .cap{flex:1 1 260px;font-size:14.5px;color:var(--fg-dim);max-width:46ch}

/* ---------- sidebar ---------- */
.sidebar{
  border:1px solid var(--line-soft); border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.008));
  padding:clamp(16px,2vw,22px);
  position:sticky; top:20px;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9);
}
@media (max-width:1080px){ .sidebar{position:static} }
.sidebar-head h2{
  margin:0; font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:20px; letter-spacing:.05em; text-transform:uppercase;
}
.sidebar-sub{margin:6px 0 0;font-size:12.5px;color:var(--fg-dim);min-height:34px}

.toggle{display:flex;gap:4px;margin:14px 0 4px;padding:4px;border:1px solid var(--line-soft);border-radius:100px}
.toggle-btn{
  flex:1; appearance:none; border:0; cursor:pointer; border-radius:100px;
  padding:8px 10px; font:inherit; font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  background:transparent; color:var(--fg-dim); transition:background .18s,color .18s;
}
.toggle-btn:hover{color:var(--fg)}
.toggle-btn.is-active{background:rgba(255,255,255,.10);color:var(--fg)}
.toggle-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

.table{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:1px}
.row{
  display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:10px;
  padding:8px 8px; border-radius:7px; position:relative;
  transition:background .15s;
}
.row:hover{background:rgba(255,255,255,.045)}
.row .rank{font-size:11px;color:var(--fg-faint);font-variant-numeric:tabular-nums;text-align:right}
.row .name{display:flex;align-items:center;gap:9px;min-width:0}
.row .swatch{width:3px;height:16px;border-radius:2px;flex:none}
.row .label{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .val{
  font-variant-numeric:tabular-nums; font-weight:700; font-size:15px;
  min-width:22px; text-align:right;
}
.row .rate{font-size:10.5px;color:var(--fg-faint);margin-left:6px;font-weight:500}
.bar{
  grid-column:2/4; height:3px; border-radius:2px; margin-top:-2px;
  background:rgba(255,255,255,.07); overflow:hidden;
}
.bar i{display:block;height:100%;border-radius:2px}

.row.is-spurs{
  background:linear-gradient(90deg, rgba(255,77,77,.16), rgba(255,77,77,.04));
  box-shadow:inset 0 0 0 1px rgba(255,77,77,.32);
  margin-top:8px;
}
.row.is-spurs .label{font-weight:700}
.row.is-spurs .val{color:#ff8a8a}
.row.is-thin .label{color:var(--fg-dim)}
.row.is-thin .val{color:var(--fg-dim)}

.sidebar-note{margin:16px 0 0;font-size:11.5px;line-height:1.55;color:var(--fg-faint)}

/* ---------- footer ---------- */
.footer{
  position:relative; z-index:1;
  border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(20px,3vw,44px);
  padding:32px clamp(16px,4vw,48px) 56px;
}
.foot-col h3{
  margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-faint);
}
.foot-col p{margin:0;font-size:13px;line-height:1.6;color:var(--fg-dim)}

/* ---------- live refresh affordances ---------- */
.next{
  margin:10px 0 0; font-size:12px; color:var(--fg-faint);
}
.next::before{
  content:"→"; margin-right:7px; opacity:.6;
}
.flash{
  position:sticky; top:0; z-index:5;
  margin:0; padding:12px clamp(16px,4vw,48px);
  background:linear-gradient(90deg, rgba(46,204,113,.24), rgba(46,204,113,.06));
  border-bottom:1px solid rgba(46,204,113,.4);
  color:#c9ffe0; font-size:14px; font-weight:600; letter-spacing:.01em;
  animation:dropIn .4s ease-out;
}
@keyframes dropIn{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.headline-stat{transition:transform .35s cubic-bezier(.2,1.4,.4,1), box-shadow .35s}
.headline-stat.bumped{
  transform:scale(1.015);
  box-shadow:0 0 0 1px rgba(255,77,77,.5), 0 0 44px -8px rgba(255,77,77,.45);
}
@media (prefers-reduced-motion:reduce){
  .flash{animation:none}
  .headline-stat{transition:none}
  .headline-stat.bumped{transform:none}
}

/* ---------- everyone else vs Tottenham ---------- */
.combined{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin-top:16px;
  padding:14px 12px;
  border:1px solid var(--line-soft);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.combined-side{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:center}
.combined-label{
  font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-faint);
}
.combined-num{
  font-family:"Barlow Condensed",sans-serif; font-weight:700;
  font-size:40px; line-height:1; font-variant-numeric:tabular-nums;
}
.combined-sub{font-size:10px;color:var(--fg-faint);line-height:1.35}
.combined-vs{
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-faint); opacity:.6; padding:0 2px;
}
.combined-side--spurs .combined-num{color:#ff8a8a}
.combined-side--spurs .combined-label{color:#ff8a8a;opacity:.85}
.combined{grid-template-areas:"a vs b" "e e e"}
.combined-side:first-of-type{grid-area:a}
.combined-vs{grid-area:vs}
.combined-side--spurs{grid-area:b}
.combined-expected{
  grid-area:e; margin:10px 0 0; padding-top:10px;
  border-top:1px solid var(--line-soft);
  font-size:11.5px; line-height:1.45; color:var(--fg-dim); text-align:center;
}

/* ---------- short-window marker ---------- */
.ast{
  color:var(--amber); font-size:11px; font-weight:700;
  margin-left:1px; vertical-align:super; line-height:0;
}
.asterisk-note{
  margin:14px 0 0; padding-top:12px;
  border-top:1px solid var(--line-soft);
  font-size:11px; line-height:1.5; color:var(--fg-faint);
}
.asterisk-note::first-letter{color:var(--amber);font-weight:700}