:root{
  --club-blue:#2D3598;
  --club-blue-dark:#222a78;

  --black:#0b0c0f;
  --text:#ffffff;
  --muted:rgba(255,255,255,.75);
  --line:rgba(255,255,255,.12);
  --page-max:1100px;

  /* SCORE column width (responsive in ONE place) */
  --scorebox-width:clamp(160px, 28vw, 220px);

  /* SINGLE CONTROL POINT FOR GOALS CENTRE GAP */
  --goal-gap:50px;

  /* Buffer from the centre line for goal text */
  --goal-centre-buffer:10px;
}

*{box-sizing:border-box}

body{
  margin:0;
  
  font-size:14px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#f3f4f7;
  color:#111;
}

h2{   font-size:18px; }
h3{  font-size:16px; }
h3.goal-line { font-size:16px; } /* This is on the player.php page for the detailed goals*/ 
h3.white-box { font-size:16px; } /* This is on the player.php page for the detailed goals*/ 


/* ================= WHITE LOGO SECTION ================= */
.logo-strip{
  background:#ffffff;
  border-bottom:1px solid #e5e6eb;
}
.logo-strip .inner{
  max-width:var(--page-max);
  margin:0 auto;
  padding:16px 18px;
  display:flex;
  align-items:center;
}
.logo-strip img{ height:70px; }

/* ================= BLUE HEADER ================= */
.club-bar{
  background:linear-gradient(180deg,var(--club-blue),var(--club-blue-dark));
  color:#fff;
}
.club-bar .inner{
  max-width:var(--page-max);
  margin:0 auto;
  padding:12px 33px;
}
.club-title{
  font-size:26px;
  font-weight:750;
  letter-spacing:.7px;
}

/* ================= PAGE WRAP ================= */
.page{
  max-width:var(--page-max);
  margin:0 auto;
  padding:0 16px;
}

/* ================= SECTION MENU ================= */
.subnav{
  display:flex;
  align-items:center;
  gap:24px;
  margin:12px 0 5px 15px;
  font-size:15px;
  font-weight:550;

  overflow-x:auto;
  overflow-y:hidden;
  flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch;
}
.subnav a{
  color:#111;
  text-decoration:none;
  padding:6px 0;
  border-bottom:3px solid transparent;
  transition:border-color .15s ease;

  flex:0 0 auto;
}
.subnav a:hover{
  border-bottom-color:#111;
}
.subnav a.more{
  margin-left:auto;
  margin-right:10px;
}

/* ================= BLACK MATCH SECTION ================= */
.match{
  background:
    radial-gradient(1000px 300px at 50% 0%,rgba(255,255,255,.08),transparent 60%),
    linear-gradient(180deg,#151821,var(--black));
  color:#fff;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
}
.match-inner{ padding:26px 22px; }

.match-meta{
  text-align:center;
  color:var(--muted);
  font-size:14px;
  margin-bottom:14px;
}

/* ================= SCORE TABLE ================= */
table.score{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
table.score td{
  padding:6px;
  vertical-align:middle;
}

.team{
  font-size:26px;
  font-weight:750;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.team.home{ text-align:right; }
.team.away{ text-align:left; }

.scorebox{
  width:var(--scorebox-width);
  text-align:center;
}
.bigscore{
  font-size:56px;
  font-weight:900;
  line-height:1;
}
.bigscore span{
  margin:0 14px;
  opacity:.35;
}

/* Divider */
.divider{
  margin:18px 0;
  border-top:1px solid var(--line);
}

/* ================= SECTION TITLE ================= */
.section-title{
  text-align:center;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:900;
  margin-top:14px;
}

/* ================= GOALS TABLE ================= */
.goals-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  margin-top:10px;
}
.goals-table td{
  vertical-align:top;
  padding:0;
}

/* Centre spacer — ONE place controlled by --goal-gap */
.goals-spacer{
  width:var(--goal-gap);
}

/* Two equal sides */
.goals-home,
.goals-away{
  width:calc((100% - var(--goal-gap)) / 2);
}

.goals-cell{
  font-size:15px;
  font-weight:650;
  color:#fff;
  overflow:visible;
}

/* Tight alignment to centre with buffer */
.goals-home{
  text-align:right;
}
.goals-home .goal-line{
  margin-right:calc(var(--goal-centre-buffer) * -1);
}

.goals-away{
  text-align:left;
}
.goals-away .goal-line{
  margin-left:calc(var(--goal-centre-buffer) * -1);
}

.goal-line{
  margin:6px 0;
  line-height:1.25;
}

.minute{ font-weight:900; }
.sep{ opacity:.9; }

/* ================= ASSIST (HARDCODE BRACKETS IN HTML) =================
   HTML should be:
   <span class="assist">( <span class="assist-text">Assist: </span>NAME)</span>

   On small screens, we hide only "Assist: " including its trailing space.
*/
.assist{
  color:var(--muted);
  font-weight:700;
  margin-left:6px;
}

.assist-text{
  display:inline;
}

@media (max-width:600px){
  .assist-text{
    display:none;
  }
}

/* ================= LOCATION + ATTENDANCE ================= */
.venue{
  margin-top:16px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}
.venue-link{
  color:#fff;
  font-weight:900;
  text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.35);
  padding-bottom:2px;
}
.venue-link:hover{
  border-bottom-color:#fff;
}
.attendance{ margin-top:6px; }

/* ================= WHITE VIDEO SECTION ================= */
.highlights{
  background:#ffffff;
  margin-top:28px;
  border-radius:16px;
  border:1px solid #e5e6eb;
  padding:22px;
}
.highlights h2{
  margin:0 0 14px;
  font-size:18px;
  font-weight:700;
}
.video-wrap{
  position:relative;
  padding-top:56.25%;
  border-radius:12px;
  overflow:hidden;
}
.video-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* ================= RESPONSIVE ================= */
@media(max-width:720px){
  .club-title{ font-size:16px; }
  .team{ font-size:18px; }
  .bigscore{ font-size:42px; }
}