/* =========================================================================
   BEYOND THE COURT CHARITY CUP × INTER DA NANG
   style.css — mobile first. Every breakpoint scales UP from a phone.

   Built on the Inter Da Nang identity: near-black ground, bone-white type,
   Bebas Neue display over Inter, 1px hairline rules, dot grid + film grain.
   ========================================================================= */

/* ------------------------------------------------------------- TOKENS --- */
:root{
  --black:#080808;
  --panel:#0c0c0c;
  --panel-2:#101010;
  --white:#f0ede8;
  --dim:rgba(240,237,232,.48);
  --faint:rgba(240,237,232,.28);
  --ghost:rgba(240,237,232,.1);
  --line:rgba(240,237,232,.08);
  --line-2:rgba(240,237,232,.16);

  --gold:#C9A227;          /* champions, finals, qualification */
  --live:#D9705E;          /* live match pulse */
  --win:#6FAE7F;

  --acc:#F0EDE8;           /* division accent — swapped on [data-division] */

  --display:'Bebas Neue',Impact,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;

  --spring:cubic-bezier(.16,1,.3,1);
  --out:cubic-bezier(.25,.46,.45,.94);

  --gut:20px;              /* page gutter — grows at wider breakpoints */
  --nav-h:58px;
  --sel-h:46px;
}
@media(min-width:768px){ :root{ --gut:34px; --nav-h:66px; } }
@media(min-width:1200px){ :root{ --gut:52px; } }

body[data-division="womens"]{ --acc:#D9A9B0; }
body[data-division="u19"]   { --acc:#8FB8A8; }

/* --------------------------------------------------------------- BASE --- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background-color:var(--black);
  background-image:radial-gradient(rgba(240,237,232,.04) 1px,transparent 1px);
  background-size:32px 32px;
  color:var(--white);
  font-family:var(--body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-top:calc(var(--nav-h) + var(--sel-h));
}
body.no-selector{padding-top:var(--nav-h)}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9990;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%;display:block}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:var(--gut)}
.wrap-slim{max-width:840px}

/* ----------------------------------------------------------- TYPOGRAPHY - */
.eyebrow{
  font-size:.53rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--faint)
}
.sect-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--line)
}
.sect-title{
  font-family:var(--display);font-size:clamp(1.6rem,6vw,2.5rem);
  line-height:.95;letter-spacing:.04em
}
.sect-link{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  white-space:nowrap;transition:color .25s ease}
.sect-link:hover{color:var(--white)}
.page-title{
  font-family:var(--display);font-size:clamp(2.6rem,12vw,5rem);
  line-height:.88;letter-spacing:.02em
}
.serif{font-family:var(--serif);font-style:italic;font-weight:500}
.mono-num{font-family:var(--display);letter-spacing:.03em;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- NAV --- */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:600;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gut);
  background:rgba(8,8,8,.86);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--line)
}
.nav-brand{display:flex;align-items:center;gap:10px;min-width:0}
.nav-brand img{height:30px;width:auto;flex-shrink:0}
.nav-brand .x{font-family:var(--display);font-size:.7rem;color:var(--ghost);flex-shrink:0}
.nav-wm{display:flex;flex-direction:column;gap:2px;min-width:0}
.nav-wm b{font-family:var(--display);font-weight:400;font-size:.82rem;letter-spacing:.16em;
  line-height:1;white-space:nowrap}
.nav-wm span{font-size:.42rem;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
  line-height:1;white-space:nowrap}

.nav-links{display:none;gap:0;align-items:center}
.nav-links a{
  position:relative;padding:8px 16px;font-size:.56rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);transition:color .24s ease
}
.nav-links a::after{
  content:'';position:absolute;left:16px;right:16px;bottom:2px;height:1px;background:var(--acc);
  transform:scaleX(0);transform-origin:center;transition:transform .3s var(--spring)
}
.nav-links a:hover{color:rgba(240,237,232,.8)}
.nav-links a.active{color:var(--white)}
.nav-links a.active::after,.nav-links a:hover::after{transform:scaleX(1)}
@media(min-width:900px){ .nav-links{display:flex} .nav-burger{display:none!important} }

.nav-burger{
  width:40px;height:40px;display:grid;place-items:center;gap:5px;margin-right:-8px
}
.nav-burger i{display:block;width:20px;height:1px;background:var(--white);
  transition:transform .35s var(--spring),opacity .2s ease}
.nav-burger i:nth-child(1){transform:translateY(-3px)}
.nav-burger i:nth-child(2){transform:translateY(3px)}
body.menu-open .nav-burger i:nth-child(1){transform:rotate(45deg)}
body.menu-open .nav-burger i:nth-child(2){transform:rotate(-45deg)}

#mmenu{
  position:fixed;inset:var(--nav-h) 0 0;z-index:590;background:rgba(8,8,8,.98);
  backdrop-filter:blur(30px);display:flex;flex-direction:column;
  padding:26px var(--gut) 40px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s ease,transform .35s var(--spring),visibility .3s
}
body.menu-open #mmenu{opacity:1;visibility:visible;transform:none}
#mmenu a{
  font-family:var(--display);font-size:2.1rem;letter-spacing:.06em;line-height:1;
  padding:16px 0;border-bottom:1px solid var(--line);color:rgba(240,237,232,.6);
  display:flex;align-items:center;justify-content:space-between;transition:color .2s ease
}
#mmenu a.active,#mmenu a:hover{color:var(--white)}
#mmenu a small{font-family:var(--body);font-size:.5rem;letter-spacing:.2em;color:var(--faint)}

/* --------------------------------------------- DIVISION SELECTOR (sticky) */
#divsel{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:580;height:var(--sel-h);
  display:grid;grid-template-columns:repeat(var(--cols,3),1fr);
  background:rgba(8,8,8,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--line)
}
#divsel button{
  position:relative;font-size:.58rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--faint);
  border-right:1px solid var(--line);transition:color .25s ease,background .25s ease
}
#divsel button:last-child{border-right:none}
#divsel button::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sel-acc,var(--white));
  transform:scaleX(0);transition:transform .35s var(--spring)
}
#divsel button[aria-selected="true"]{color:var(--white)}
#divsel button[aria-selected="true"]::after{transform:scaleX(1)}
#divsel button:hover{background:rgba(240,237,232,.03);color:rgba(240,237,232,.75)}

/* ------------------------------------------------------------ BUTTONS --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:0 26px;
  font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--line-2);color:var(--white);
  position:relative;overflow:hidden;transition:border-color .3s ease,color .3s ease
}
.btn::before{
  content:'';position:absolute;inset:0;background:var(--white);
  transform:translateY(101%);transition:transform .4s var(--spring);z-index:0
}
.btn span{position:relative;z-index:1;transition:color .3s ease}
.btn:hover{border-color:var(--white)}
.btn:hover::before{transform:translateY(0)}
.btn:hover span{color:var(--black)}
.btn-solid{background:var(--white);color:var(--black);border-color:var(--white)}
.btn-solid::before{background:var(--black)}
.btn-solid:hover span{color:var(--white)}
.btn-block{display:flex;width:100%}

/* --------------------------------------------------------------- HERO --- */
/* `section.hero` so the generic `section{padding-block}` rule further down
   can't flatten the hero's own padding */
section.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:52px var(--gut) 40px;border-bottom:1px solid var(--line)
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% -10%,rgba(201,162,39,.09) 0%,transparent 62%)
}
.hero-watermark{
  position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);
  width:min(78vw,520px);opacity:.022;pointer-events:none;filter:grayscale(1)
}
/* the watermark must stay out of the flow — a bare `.hero > *` rule would
   out-cascade .hero-watermark's position:absolute and give the hero 500px
   of dead height */
.hero > *:not(.hero-watermark){position:relative;z-index:1}
.hero-lockup{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:22px}
.hero-lockup img{height:56px;width:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.55))}
.hero-lockup .x{font-family:var(--display);font-size:1rem;color:var(--ghost)}
@media(min-width:768px){ section.hero{padding:78px var(--gut) 62px} .hero-lockup img{height:78px} }

.hero-title{
  font-family:var(--display);font-size:clamp(2.9rem,13vw,7rem);line-height:.88;letter-spacing:.02em
}
.hero-title em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(240,237,232,.42)}
.hero-meta{
  margin-top:16px;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)
}
.hero-dates{display:flex;justify-content:center;gap:8px;margin-top:26px;flex-wrap:wrap}
.date-cell{
  border:1px solid var(--line);padding:10px 16px;min-width:74px;
  transition:border-color .3s ease,transform .3s var(--spring)
}
.date-cell:hover{border-color:var(--line-2);transform:translateY(-2px)}
.date-cell b{display:block;font-family:var(--display);font-weight:400;font-size:1.7rem;line-height:1}
.date-cell span{display:block;font-size:.44rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-top:5px}
@media(min-width:768px){ .date-cell{padding:14px 24px} .date-cell b{font-size:2.2rem} }

.hero-divs{
  margin-top:24px;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)
}
.hero-divs i{font-style:normal;color:var(--ghost);margin-inline:8px}
.hero-cta{display:flex;flex-direction:column;gap:10px;margin-top:32px;align-items:stretch}
@media(min-width:560px){ .hero-cta{flex-direction:row;justify-content:center} .hero-cta .btn{min-width:210px} }

/* ---------------------------------------------------------- SNAPSHOT --- */
.snapshot{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--line)}
@media(min-width:768px){ .snapshot{grid-template-columns:repeat(4,1fr)} }
.snap{
  padding:24px 16px;text-align:center;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)
}
.snap:nth-child(2n){border-right:none}
@media(min-width:768px){
  .snap{border-bottom:none;padding:34px 18px}
  .snap:nth-child(2n){border-right:1px solid var(--line)}
  .snap:last-child{border-right:none}
}
.snap b{display:block;font-family:var(--display);font-weight:400;font-size:2.4rem;line-height:1;
  letter-spacing:.02em}
.snap span{display:block;font-size:.48rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-top:8px}
@media(min-width:768px){ .snap b{font-size:3.2rem} }

/* --------------------------------------------------- DIVISION CARDS --- */
.divcards{display:grid;gap:1px;background:var(--line)}
@media(min-width:860px){ .divcards{grid-template-columns:repeat(3,1fr)} }
.divcard{
  position:relative;background:var(--black);padding:30px var(--gut);overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  transition:background .35s ease
}
@media(min-width:860px){ .divcard{display:block;padding:46px 30px;min-height:250px} }
.divcard::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 15% 0%,var(--c) 0%,transparent 58%);
  transition:opacity .5s ease
}
.divcard:hover{background:#0b0b0b}
.divcard:hover::before{opacity:.1}
.divcard-ghost{
  position:absolute;right:-6px;bottom:-24px;font-family:var(--display);font-size:6rem;
  line-height:1;color:rgba(240,237,232,.03);pointer-events:none;user-select:none
}
@media(min-width:860px){ .divcard-ghost{font-size:9rem;bottom:-32px} }
/* :not() for the same reason as .hero-watermark — a bare `> *` rule would
   pull the ghost numeral back into the flex flow */
.divcard > *:not(.divcard-ghost){position:relative;z-index:1}
.divcard-n{font-family:var(--display);font-size:.72rem;letter-spacing:.2em;color:var(--c)}
.divcard-t{font-family:var(--display);font-size:2rem;line-height:.95;letter-spacing:.04em;margin-top:6px}
@media(min-width:860px){ .divcard-t{font-size:3rem;margin-top:14px} .divcard-n{font-size:.8rem} }
.divcard-meta{font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.divcard-go{
  font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  display:flex;align-items:center;gap:8px;white-space:nowrap
}
@media(min-width:860px){ .divcard-go{margin-top:28px} }
/* on a phone the arrow alone is the affordance — the title needs the width */
@media(max-width:859px){ .divcard-go .lbl{display:none} .divcard-go i{font-size:1rem} }
.divcard:hover .divcard-go{color:var(--white)}
.divcard-go i{font-style:normal;transition:transform .3s var(--spring)}
.divcard:hover .divcard-go i{transform:translateX(5px)}

/* --------------------------------------------------------- MATCH CARD --- */
.matchlist{display:grid;gap:10px}
/* on a wide screen two columns show a whole matchday without scrolling */
@media(min-width:900px){ .matchlist{grid-template-columns:repeat(2,1fr)} }
.match{
  display:block;position:relative;background:var(--panel);border:1px solid var(--line);
  padding:14px 16px;transition:border-color .3s ease,transform .3s var(--spring),background .3s ease
}
.match:hover{border-color:var(--line-2);background:var(--panel-2)}
@media(hover:hover){ .match:hover{transform:translateY(-2px)} }
.match-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)
}
.match-div{
  font-size:.46rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--d-acc,var(--white));display:flex;align-items:center;gap:7px
}
.match-div::before{content:'';width:5px;height:5px;background:var(--d-acc,var(--white));border-radius:50%}
.match-when{font-size:.46rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);text-align:right}

.match-side{display:flex;align-items:center;gap:11px;padding:5px 0}
.match-side + .match-side{margin-top:3px}
.match-name{
  flex:1;min-width:0;font-size:.86rem;font-weight:400;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.match-side.tbd .match-name{color:var(--faint);font-style:italic;font-family:var(--serif);font-size:.95rem}
.match-score{
  font-family:var(--display);font-size:1.5rem;line-height:1;letter-spacing:.02em;
  min-width:22px;text-align:right;font-variant-numeric:tabular-nums
}
.match-side.lost .match-name,.match-side.lost .match-score{color:var(--dim)}
.match-side.won .match-score{color:var(--white)}
.match-kick{
  font-family:var(--display);font-size:1.35rem;line-height:1;color:var(--dim);letter-spacing:.04em
}

.match-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line)
}
.status{
  font-size:.46rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:7px;color:var(--faint)
}
.status.ft{color:var(--dim)}
.status.live{color:var(--live)}
.status.live::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--live);
  animation:pulse 1.6s ease-in-out infinite
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.match-more{font-size:.46rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ghost)}
.match:hover .match-more{color:var(--dim)}

/* the final gets its own treatment */
.match.is-final{border-color:rgba(201,162,39,.34);background:linear-gradient(180deg,rgba(201,162,39,.05),transparent 60%),var(--panel)}
.match.is-final .match-div{color:var(--gold)}
.match.is-final .match-div::before{background:var(--gold)}
.match.is-final:hover{border-color:rgba(201,162,39,.6)}

/* team badge / monogram */
.badge{
  width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--line-2);background:rgba(240,237,232,.03);
  font-family:var(--display);font-size:.68rem;letter-spacing:.04em;color:var(--dim);
  overflow:hidden
}
.badge img{width:100%;height:100%;object-fit:contain}
.badge.tbd{border-style:dashed;border-color:var(--line);background:none}
.badge.lg{width:52px;height:52px;font-size:1.15rem}
.badge.xl{width:78px;height:78px;font-size:1.8rem}

/* ------------------------------------------------------------ FILTERS --- */
.filters{
  display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.filters::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;min-height:38px;padding:0 16px;border:1px solid var(--line);
  font-size:.5rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);transition:all .25s ease;white-space:nowrap
}
.chip:hover{border-color:var(--line-2);color:var(--white)}
.chip[aria-pressed="true"]{background:var(--white);border-color:var(--white);color:var(--black)}

/* ----------------------------------------------------------- STANDINGS -- */
.table-wrap{border:1px solid var(--line);background:var(--panel)}
.stbl{font-size:.8rem}
.stbl th{
  font-size:.46rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);padding:12px 6px;text-align:center;border-bottom:1px solid var(--line);
  font-family:var(--body)
}
.stbl th.team-col,.stbl td.team-col{text-align:left;padding-left:12px}
.stbl th.pos-col,.stbl td.pos-col{width:34px;padding-left:12px;text-align:left}
.stbl td{padding:0;text-align:center;font-variant-numeric:tabular-nums;color:var(--dim)}
.stbl td.num{padding:12px 6px}
.stbl td.pts{color:var(--white);font-weight:500}
.stbl tbody tr{border-bottom:1px solid var(--line);transition:background .25s ease}
.stbl tbody tr:last-child{border-bottom:none}
.stbl tbody tr:hover{background:rgba(240,237,232,.02)}
.st-pos{font-family:var(--display);font-size:.95rem;color:var(--faint)}
.st-team{display:flex;align-items:center;gap:10px;padding:10px 0;min-width:0}
.st-team .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--white);font-weight:400}
/* the two qualification places */
.stbl tr.qualifies .st-pos{color:var(--gold)}
.stbl tr.qualifies{background:linear-gradient(90deg,rgba(201,162,39,.06),transparent 70%)}
.stbl tr.qual-last{border-bottom:1px solid rgba(201,162,39,.4)}
.qual-note{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px;background:rgba(201,162,39,.05);
  font-size:.46rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid var(--line)
}
.hide-sm{display:none}
@media(min-width:720px){ .hide-sm{display:table-cell} .stbl{font-size:.84rem} }

/* expandable row on phones */
.st-row-detail td{padding:0;border-bottom:1px solid var(--line)}
.st-detail-inner{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  max-height:0;overflow:hidden;transition:max-height .4s var(--spring)
}
tr.open + .st-row-detail .st-detail-inner{max-height:200px}
.st-detail-inner div{background:var(--panel-2);padding:11px 6px;text-align:center}
.st-detail-inner b{display:block;font-family:var(--display);font-size:1.05rem;color:var(--white);line-height:1}
.st-detail-inner span{display:block;font-size:.42rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-top:4px}
.st-caret{
  width:16px;flex-shrink:0;color:var(--faint);font-size:.6rem;
  transition:transform .3s var(--spring),color .25s ease
}
tr.open .st-caret{transform:rotate(180deg);color:var(--dim)}
@media(min-width:720px){ .st-caret{display:none} }

.form-dots{display:flex;gap:3px;justify-content:center}
.form-dots i{
  width:16px;height:16px;display:grid;place-items:center;font-style:normal;
  font-size:.42rem;font-weight:600;border:1px solid var(--line-2);color:var(--faint)
}
.form-dots i.W{background:rgba(111,174,127,.18);border-color:rgba(111,174,127,.4);color:#9ed2a9}
.form-dots i.D{color:var(--dim)}
.form-dots i.L{background:rgba(217,112,94,.12);border-color:rgba(217,112,94,.3);color:#e0a094}

/* ------------------------------------------------- ROAD TO THE FINAL --- */
.road{border:1px solid var(--line);background:var(--panel);padding:26px 18px;text-align:center}
@media(min-width:768px){ .road{padding:40px 30px} }
.road-step{font-size:.5rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.road-arrow{
  width:1px;height:26px;margin:14px auto;
  background:linear-gradient(180deg,var(--line-2),transparent)
}
.road-pair{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:18px 0
}
.road-slot{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.road-slot .nm{
  font-family:var(--display);font-size:1rem;line-height:1.05;letter-spacing:.04em;
  overflow-wrap:anywhere
}
.road-slot.tbd .nm{font-family:var(--serif);font-style:italic;font-size:.9rem;color:var(--faint);letter-spacing:0}
.road-v{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--ghost)}
@media(min-width:560px){ .road-slot .nm{font-size:1.35rem} .road-pair{gap:20px} }
.road-champ{
  margin-top:18px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:12px
}
.road-champ .cup{font-size:1.5rem;line-height:1;filter:grayscale(.2)}
.road-champ .nm{font-family:var(--display);font-size:1.6rem;letter-spacing:.05em;color:var(--gold)}
.road-champ.pending .nm{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--ghost);letter-spacing:0}

.champ-banner{
  border:1px solid rgba(201,162,39,.4);
  background:linear-gradient(180deg,rgba(201,162,39,.09),transparent 70%),var(--panel);
  padding:30px 20px;text-align:center
}
.champ-banner .lbl{font-size:.5rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.champ-banner .nm{font-family:var(--display);font-size:clamp(1.8rem,8vw,3rem);letter-spacing:.04em;margin-top:12px}

/* ---------------------------------------------------------- STATS ----- */
.ptbl tr{border-bottom:1px solid var(--line)}
.ptbl tr:last-child{border-bottom:none}
.ptbl td{padding:12px 6px;vertical-align:middle}
.ptbl .rk{
  width:34px;padding-left:12px;font-family:var(--display);font-size:1rem;color:var(--faint);text-align:left
}
.ptbl .who{min-width:0}
.ptbl .nm{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptbl .tm{font-size:.48rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.ptbl .n{
  width:60px;padding-right:12px;text-align:right;font-family:var(--display);font-size:1.5rem;
  color:var(--white);font-variant-numeric:tabular-nums
}
.ptbl tr.leader{background:linear-gradient(90deg,rgba(201,162,39,.07),transparent 70%)}
.ptbl tr.leader .rk,.ptbl tr.leader .n{color:var(--gold)}
.who-cell{display:flex;align-items:center;gap:11px;min-width:0}

.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(min-width:768px){ .statgrid{grid-template-columns:repeat(4,1fr)} }
.statgrid div{background:var(--panel);padding:24px 12px;text-align:center}
.statgrid b{display:block;font-family:var(--display);font-size:2.6rem;line-height:1}
.statgrid span{display:block;font-size:.46rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-top:7px}

/* ---------------------------------------------------------- TEAM PAGE -- */
.team-head{
  display:flex;align-items:center;gap:18px;padding-block:26px;border-bottom:1px solid var(--line)
}
.team-head .nm{font-family:var(--display);font-size:clamp(1.8rem,8vw,3.2rem);line-height:.95;letter-spacing:.03em}
.team-head .meta{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.squad{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:600px){ .squad{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .squad{grid-template-columns:repeat(3,1fr)} }
.sq{display:flex;align-items:center;gap:12px;background:var(--panel);padding:13px 14px}
.sq .no{font-family:var(--display);font-size:1.05rem;color:var(--ghost);width:24px;text-align:center;flex-shrink:0}
.sq .nm{flex:1;min-width:0;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq .po{font-size:.44rem;letter-spacing:.16em;color:var(--faint);border:1px solid var(--line);padding:3px 6px}
.sq .gl{font-size:.5rem;letter-spacing:.1em;color:var(--dim);white-space:nowrap}

/* --------------------------------------------------------- MATCH PAGE -- */
.mp-score{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:30px 0;text-align:center
}
.mp-team{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.mp-team .nm{font-family:var(--display);font-size:clamp(.95rem,4.4vw,1.6rem);line-height:1.05;
  letter-spacing:.04em;overflow-wrap:anywhere}
.mp-nums{display:flex;align-items:center;gap:10px;font-family:var(--display);
  font-size:clamp(2.4rem,13vw,4.2rem);line-height:1;font-variant-numeric:tabular-nums}
.mp-nums i{font-style:normal;color:var(--ghost);font-size:.5em}
.mp-info{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.mp-info div{background:var(--panel);padding:16px 8px;text-align:center}
.mp-info b{display:block;font-size:.8rem;font-weight:400}
.mp-info span{display:block;font-size:.44rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-top:6px}
.ev{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.ev:last-child{border-bottom:none}
.ev .min{font-family:var(--display);font-size:.95rem;color:var(--faint);width:36px;flex-shrink:0}
.ev .ic{width:18px;text-align:center;flex-shrink:0;font-size:.8rem}
.ev .nm{flex:1;min-width:0;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev .tm{font-size:.44rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.ev.away{flex-direction:row-reverse;text-align:right}

/* --------------------------------------------------------- ACCORDION --- */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0;text-align:left;font-size:.88rem;font-weight:400;
  transition:color .25s ease
}
.acc-q:hover{color:var(--white)}
.acc-q i{font-style:normal;color:var(--ghost);font-size:1.2rem;line-height:1;flex-shrink:0;
  transition:transform .35s var(--spring),color .25s ease}
.acc-item.open .acc-q i{transform:rotate(45deg);color:var(--dim)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .4s var(--spring)}
.acc-item.open .acc-a{max-height:320px}
.acc-a p{padding-bottom:20px;font-size:.82rem;line-height:1.7;color:var(--dim);max-width:62ch}

/* ------------------------------------------------------------ FORMAT --- */
.fmt{display:grid;gap:0;text-align:center}
.fmt-step{border:1px solid var(--line);background:var(--panel);padding:20px 16px}
.fmt-step b{display:block;font-family:var(--display);font-size:1.5rem;letter-spacing:.05em}
.fmt-step span{display:block;font-size:.56rem;color:var(--dim);margin-top:6px;letter-spacing:.04em}
.fmt-arrow{width:1px;height:24px;margin:0 auto;background:linear-gradient(180deg,var(--line-2),transparent)}
.fmt-step.gold{border-color:rgba(201,162,39,.35)}
.fmt-step.gold b{color:var(--gold)}

/* ------------------------------------------------------------ SHELLS --- */
section{padding-block:44px}
@media(min-width:768px){ section{padding-block:64px} }
.sect-flush{padding-inline:0}
.empty{
  border:1px dashed var(--line-2);padding:34px 20px;text-align:center;color:var(--faint);
  font-size:.72rem;letter-spacing:.04em
}
.skeleton{border:1px solid var(--line);background:var(--panel);height:104px;
  animation:sk 1.4s ease-in-out infinite}
@keyframes sk{0%,100%{opacity:.4}50%{opacity:.75}}

.demo-ribbon{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:8px 16px;background:rgba(201,162,39,.1);border-bottom:1px solid rgba(201,162,39,.28);
  font-size:.46rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  text-align:center
}

/* ------------------------------------------------------------ FOOTER --- */
footer{border-top:1px solid var(--line);padding:46px var(--gut) 34px;text-align:center}
.foot-lockup{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:22px}
.foot-lockup img{height:40px;width:auto;opacity:.85}
.foot-lockup .x{font-family:var(--display);font-size:.8rem;color:var(--ghost)}
.foot-wm{font-family:var(--display);font-size:clamp(2rem,10vw,4rem);line-height:.9;letter-spacing:.03em}
.foot-sub{font-family:var(--serif);font-style:italic;color:var(--faint);margin-top:10px;font-size:.95rem}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin-top:26px}
.foot-links a{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  transition:color .25s ease}
.foot-links a:hover{color:var(--white)}
.foot-fine{margin-top:26px;font-size:.46rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ghost)}

/* ---------------------------------------------------------- REVEALS --- */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--out),transform .6s var(--spring)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}