: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){
  body,
  p,
  ul,
  ol,
  table,
  th,
  td,
  label,
  input,
  textarea,
  select,
  button,
  a{
    font-size:13px;
  }

  .club-title{ font-size:16px; }
  .team{ font-size:18px; }
  .bigscore{ font-size:42px; }
}

/* Front-end flag headers */
.pitch1-section-header{
  position:absolute;
  top:7px;
  left:0;
  z-index:2;
}
.pitch1-section-badge{
  display:inline-block;
  padding:11px 18px;
  border-radius:0 10px 10px 0;
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:#fff;
  background:var(--pitch1-section-colour, #356611);
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
}



/* Front-end grey / black pill menus */
.pitch1-pill-menu,
.extras-tabs{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:0 0 14px 0;
}
.pitch1-pill-menu::-webkit-scrollbar,
.extras-tabs::-webkit-scrollbar{
  display:none;
}
.pitch1-pill,
.extras-tab{
  appearance:none;
  border:1px solid rgba(17,17,17,.16);
  background:#f7f8fa;
  padding:8px 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  color:#111;
  display:inline-block;
  flex:0 0 auto;
}
.pitch1-pill.is-active,
.pitch1-pill[aria-selected="true"],
.extras-tab[aria-selected="true"]{
  background:#1a1a1a;
  color:#fff;
  border-color:#1a1a1a;
}
.pitch1-pill:hover,
.extras-tab:hover{
  text-decoration:none;
}

@media (max-width:700px){
  .pitch1-pill-menu,
  .extras-tabs{
    gap:8px;
  }
  .pitch1-pill,
  .extras-tab{
    padding:7px 10px;
    font-size:13px;
  }
}

/* Extra-small front-end text and flag headers */
@media (max-width:410px){
  body,
  p,
  ul,
  ol,
  table,
  th,
  td,
  label,
  input,
  textarea,
  select,
  button,
  a{
    font-size:12px;
  }

  .pitch1-section-badge,
  .section-header-combo .combo-badge,
  .league-section-header .league-section-badge,
  .results-section-header .results-section-badge{
    font-size:11px !important;
    padding:10px 16px !important;
  }

  .pitch1-pill-menu,
  .extras-tabs{
    gap:6px;
  }
  .pitch1-pill,
  .extras-tab{
    padding:6px 9px;
    font-size:12px;
  }
}