/* GAA Scores. Dark by default, Limerick green accent; scoreboard numerals and headings in Big Shoulders, everything else in Public Sans.
   Every colour is a token: :root holds the dark values, [data-theme="light"] the light ones. The inline script in <head> sets data-theme before first paint. */
:root {
  --bg: #0b0f0d; --bar: #070a09; --bar-ink: #eef3f0; --bar-muted: #9aa7a0; --bar-line: #26302b; --bar-accent: #2bb673; --brand-crest: #2bb673;
  --surface: #131916; --surface-2: #19211d; --raise: #212b26; --line: #232d28; --line-strong: #33403a;
  --ink: #eef3f0; --ink-2: #c8d2cc; --muted: #8b9891; --faint: #66736c;
  --accent: #2bb673; --accent-strong: #1f9a57; --accent-ink: #03150b; --accent-soft: rgba(43, 182, 115, .14);
  --live: #3ddc84; --live-soft: rgba(61, 220, 132, .12); --red: #ff5a4a;
  --star: #f5c518; --won: #ffffff; --me: #58d394; --scrim: rgba(0, 0, 0, .6); --shadow: 0 10px 30px rgba(0, 0, 0, .5);
  --warn-bg: #3a2f10; --warn-ink: #f3d48a; --ok-bg: #143322; --ok-ink: #9ee0b8;
  --board-glow: rgba(43, 182, 115, .16);
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --star-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  --star-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #eef2ef; --bar: #0f7a41; --bar-ink: #ffffff; --bar-muted: rgba(255, 255, 255, .8); --bar-line: rgba(255, 255, 255, .28); --bar-accent: #ffffff; --brand-crest: #ffffff;
  --surface: #ffffff; --surface-2: #f4f7f5; --raise: #e8eee9; --line: #e1e7e3; --line-strong: #c9d3cd;
  --ink: #12211a; --ink-2: #2b3a32; --muted: #5b6b62; --faint: #87958d;
  --accent: #0f7a41; --accent-strong: #0b5f32; --accent-ink: #ffffff; --accent-soft: rgba(15, 122, 65, .1);
  --live: #0c8a46; --live-soft: rgba(12, 138, 70, .1); --red: #c4271b;
  --star: #d99a00; --won: #0b1711; --me: #0f7a41; --scrim: rgba(10, 20, 15, .45); --shadow: 0 10px 30px rgba(15, 40, 25, .18);
  --warn-bg: #fff6db; --warn-ink: #6b4e00; --ok-bg: #e3f2e8; --ok-ink: #0b5a30;
  --board-glow: rgba(15, 122, 65, .09);
  color-scheme: light;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--body); overflow-x: hidden }
a { color: inherit }
a:hover { color: var(--accent) }
img { max-width: 100% }
button { font-family: inherit }
[hidden] { display: none !important }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px }
header.site :focus-visible { outline-color: var(--bar-ink) }
main:focus { outline: none }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none }
.skip:focus { top: 8px }

/* ---------- Top bar ---------- */
header.site { position: sticky; top: 0; z-index: 30; background: var(--bar); color: var(--bar-ink); padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--bar-line) }
.bar {
  max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 6px 14px; min-height: 56px;
  padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); flex-wrap: wrap
}
.brand { display: flex; align-items: center; gap: 8px; font: 800 23px/1 var(--display); letter-spacing: .04em; text-decoration: none; color: var(--bar-ink); white-space: nowrap; margin-right: 6px }
.brand:hover { color: var(--bar-ink) }
.crest { width: 27px; height: 27px; color: var(--brand-crest); flex: none }
nav.top { display: flex; align-items: stretch; font-size: 14px; font-weight: 600; align-self: stretch }
nav.top a { display: flex; align-items: center; padding: 0 11px; text-decoration: none; color: var(--bar-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap }
nav.top a:hover { color: var(--bar-ink) }
nav.top a[aria-current] { color: var(--bar-ink); border-bottom-color: var(--bar-accent) }
.nav-star { color: var(--star) }
:root[data-theme="light"] .nav-star { color: inherit }
.tools { display: flex; align-items: center; gap: 8px; margin-left: auto }
.iconbtn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--bar-line); background: transparent;
  color: var(--bar-ink); cursor: pointer; padding: 0; flex: none; text-decoration: none
}
.iconbtn:hover { background: color-mix(in srgb, var(--bar-ink) 10%, transparent); color: var(--bar-ink) }
.ic { width: 18px; height: 18px; fill: currentColor }
.ic.stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.theme-btn .ic { display: none }
:root:not([data-theme-pref]) .theme-btn .t-dark, [data-theme-pref="dark"] .theme-btn .t-dark, [data-theme-pref="light"] .theme-btn .t-light, [data-theme-pref="system"] .theme-btn .t-system { display: block }

/* County switcher */
.county { position: relative }
.county summary {
  list-style: none; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 10px; border: 1px solid var(--bar-line); border-radius: 999px;
  font: 600 13px/1 var(--body); cursor: pointer; color: var(--bar-ink); white-space: nowrap
}
.county summary::-webkit-details-marker { display: none }
.county summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translateY(-2px); opacity: .7; margin-left: 2px }
.county summary:hover { background: color-mix(in srgb, var(--bar-ink) 10%, transparent) }
.county .ic { width: 16px; height: 16px }
.county .menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 220px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px
}
.menu-h { margin: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.county ul { list-style: none; margin: 0; padding: 0 }
.county li { display: flex; align-items: center }
.county li a { flex: 1; padding: 9px 10px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px }
.county li a:hover { background: var(--surface-2); color: var(--ink) }
.county li a[aria-current]::after { content: "✓"; color: var(--accent); margin-left: 8px }

/* ---------- Shell: sidebar + content ---------- */
.shell {
  max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 14px max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left))
}
.shell.no-side { grid-template-columns: minmax(0, 1fr) }
main { min-width: 0; max-width: 960px; width: 100%; padding-bottom: 36px; min-height: 60vh }
.no-side main { max-width: 1100px; margin: 0 auto }

.sidebar {
  position: sticky; top: 72px; max-height: calc(100vh - 86px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  background: var(--surface); border-radius: 12px; padding: 10px 6px 12px
}
.side-top { display: none }
.side-sec + .side-sec { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px }
.side-h { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 8px 6px; font: 700 11px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.side-h a { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--accent); text-decoration: none; font-weight: 600 }
.side-list { list-style: none; margin: 0; padding: 0 }
.side-list li { display: flex; align-items: center; min-width: 0 }
.side-list a { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 7px; text-decoration: none; font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.side-list a:hover { background: var(--surface-2); color: var(--ink) }
.side-list a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600 }
.side-list .kind { color: var(--faint); font-size: 11px; margin-left: 6px }
.side-empty { color: var(--muted); font-size: 13px; padding: 4px 8px 6px; display: block !important }
.side-list .star { width: 34px; height: 32px }
.side-list .star:not([aria-pressed="true"]) { opacity: .55 }
.side-list li:hover .star { opacity: 1 }
.side-code > summary, .side-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; border-radius: 7px }
.side-code > summary::-webkit-details-marker, .side-more > summary::-webkit-details-marker { display: none }
.side-code > summary { padding: 7px 8px; font-weight: 700; font-size: 14px }
.side-code > summary small { margin-left: auto; color: var(--faint); font-weight: 500; font-size: 12px }
.side-code > summary::after, .side-more > summary::after { content: ""; width: 6px; height: 6px; border: solid var(--muted); border-width: 0 1.6px 1.6px 0; transform: rotate(-45deg); transition: transform .15s }
.side-more > summary::after { margin-left: auto; margin-right: 12px }
.side-code[open] > summary::after, .side-more[open] > summary::after { transform: rotate(45deg) }
.side-code > summary:hover, .side-more > summary:hover { background: var(--surface-2) }
.side-code .side-list { padding-left: 4px }
.side-more > summary { padding: 6px 8px 6px 12px; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase }
.scrim { display: none }

/* Code badge on competition headers and sidebar */
.cbadge {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 7px; font: 800 13px/1 var(--display); letter-spacing: .02em;
  background: var(--accent-soft); color: var(--accent)
}
.cbadge.c-football { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink-2) }
.cbadge.c-camogie, .cbadge.c-ladies_football, .cbadge.c-ladies-football, .cbadge.c-lgfa { background: color-mix(in srgb, var(--star) 16%, transparent); color: var(--star) }
.side-code .cbadge { width: 22px; height: 22px; font-size: 12px; border-radius: 6px }

/* ---------- Star buttons ---------- */
.star {
  display: inline-grid; place-items: center; width: 44px; align-self: stretch; min-height: 36px; flex: none; padding: 0; border: 0; background: transparent; color: var(--faint); cursor: pointer; border-radius: 8px
}
.star::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--star-path) center / contain no-repeat; mask: var(--star-path) center / contain no-repeat }
.star:hover { color: var(--star) }
.star[aria-pressed="true"] { color: var(--star) }
.star[aria-pressed="true"]::before { -webkit-mask-image: var(--star-fill); mask-image: var(--star-fill) }
.star.pop::before { animation: pop .3s ease-out }
@keyframes pop { 40% { transform: scale(1.35) } }
.star.labelled {
  display: inline-flex; align-items: center; gap: 8px; width: auto; min-height: 40px; align-self: center; padding: 0 16px 0 12px; border: 1.5px solid var(--line-strong); border-radius: 999px;
  color: var(--ink); font: 700 13px/1 var(--body)
}
.star.labelled::before { color: var(--star) }
.star.labelled:hover { border-color: var(--star); color: var(--ink) }
.star.labelled[aria-pressed="true"] { border-color: var(--star); background: color-mix(in srgb, var(--star) 14%, transparent); color: var(--ink) }
.star .on { display: none }
.star[aria-pressed="true"] .on { display: inline }
.star[aria-pressed="true"] .off { display: none }

/* ---------- Headings and page furniture ---------- */
h1 { font: 800 clamp(26px, 5vw, 38px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 6px 0 4px; text-wrap: balance }
h1 .thin { font-weight: 600; color: var(--muted) }
h2 { font: 800 20px/1.15 var(--display); text-transform: uppercase; letter-spacing: .04em; margin: 22px 0 8px; text-wrap: balance }
h2 small, h3 small { font: 500 12px/1 var(--body); color: var(--muted); text-transform: none; letter-spacing: 0; margin-left: 6px }
h3 { font: 700 14px/1.3 var(--body); margin: 16px 0 6px }
.ph { font: 700 12px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 18px 2px 8px; display: flex; align-items: center; gap: 8px }
.ph-star { color: var(--star); font-size: 14px }
.sub { color: var(--muted); margin: 0; font-size: 14px }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 8px 0 -2px }
.eyebrow a { text-decoration: none }
.note { color: var(--muted); font-size: 13px }
.empty { color: var(--muted); padding: 12px 14px; margin: 0; font-size: 14px }
.pagehead, .dayhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 10px }
.dayhead { align-items: baseline; margin: 14px 2px 8px }
.dayhead h1 { font-size: clamp(24px, 4.4vw, 30px); margin: 0 }
.dayhead h1 .thin { font-size: .7em; letter-spacing: .03em; margin-left: 4px }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start }
.cols2 > * { min-width: 0 }
@media (max-width: 760px) { .cols2 { grid-template-columns: 1fr } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px }
.crumb { color: var(--muted); font-size: 13px; padding-block: 4px 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center }
.crumb a { text-decoration: none; font-weight: 600; color: var(--accent) }
.crumb .star { min-height: 32px; width: 36px; margin-left: auto }

/* ---------- Date strip ---------- */
.datestrip { display: flex; align-items: stretch; background: var(--surface); border-radius: 12px; overflow: hidden; margin-bottom: 4px }
.days { position: relative; display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; flex: 1; min-width: 0 }
.days::-webkit-scrollbar { display: none }
.days li { flex: none; scroll-snap-align: center }
.day { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 66px; padding: 9px 8px 6px; text-decoration: none; color: var(--ink-2); border-bottom: 2px solid transparent; position: relative }
.day:hover { background: var(--surface-2); color: var(--ink) }
.day .dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em }
.day .db { font-size: 12px; color: var(--muted); white-space: nowrap }
.day .ddot { width: 5px; height: 5px; border-radius: 50%; margin-top: 3px }
.day .ddot.on { background: var(--faint) }
.day.has-live .ddot { background: var(--live); box-shadow: 0 0 0 3px var(--live-soft) }
.day.is-today .dt { color: var(--accent) }
.day[aria-current] { color: var(--ink); background: var(--accent-soft); border-bottom-color: var(--accent) }
.day[aria-current] .db { color: var(--ink-2) }
.dsarrow { display: grid; place-items: center; width: 34px; flex: none; text-decoration: none; font-size: 22px; color: var(--ink-2); border-right: 1px solid var(--line) }
.days + .dsarrow { border-right: 0; border-left: 1px solid var(--line) }
.dsarrow.off { color: var(--faint); opacity: .4 }
.dsarrow:hover { background: var(--surface-2) }
.dspick { position: relative; display: grid; place-items: center; width: 44px; flex: none; border-left: 1px solid var(--line); cursor: pointer; color: var(--ink-2) }
.dspick::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--cal) center / contain no-repeat; mask: var(--cal) center / contain no-repeat }
.dspick:hover { background: var(--surface-2); color: var(--accent) }
.dspick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; color-scheme: inherit }
.dspick:focus-within { outline: 2px solid var(--accent); outline-offset: -2px }

/* ---------- Filters and segmented controls ---------- */
.filters, .filterbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px }
.filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px }
.filters::-webkit-scrollbar { display: none }
.filters button, .seg a, .seg button, .tablist button {
  font: 600 13px/1 var(--body); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 8px 13px;
  cursor: pointer; text-decoration: none; white-space: nowrap; flex: none
}
.filters button small, .tablist button small { opacity: .65; margin-left: 4px; font-weight: 500 }
.filters button:hover, .seg a:hover, .tablist button:hover { border-color: var(--accent); color: var(--ink) }
.filters button[aria-pressed="true"], .seg a[aria-current], .tablist button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent) }
.filters .f-live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-right: 6px; vertical-align: 1px; animation: blink 1.4s infinite }
.filters .f-live[aria-pressed="true"]::before { background: currentColor }
.seg { display: inline-flex; gap: 6px; flex-wrap: wrap }
.filterbar { gap: 8px 18px }
.tablist { display: flex; gap: 6px; margin: 14px 0 8px; flex-wrap: wrap }
.h2row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap }
.h2row .tablist { margin: 16px 0 6px }
.chips { display: flex; gap: 8px; flex-wrap: wrap }
.chip { display: inline-flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding-left: 14px }
.chip a { text-decoration: none; font-weight: 600; font-size: 14px }
.chip .star { min-height: 38px; width: 40px }

/* ---------- Game rows ---------- */
.games { display: flex; flex-direction: column; background: var(--surface); border-radius: 12px; overflow: hidden }
.game { display: flex; align-items: stretch; border-top: 1px solid var(--line); position: relative; min-width: 0 }
.game:first-child { border-top: 0 }
.game:hover { background: var(--surface-2) }
.g-link { flex: 1; min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 0 9px 8px; text-decoration: none; color: inherit }
.g-link:hover { color: inherit }
.g-link:focus-visible { outline-offset: -2px }
.game .when { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.25; border-right: 1px solid var(--line); align-self: stretch; padding-right: 6px }
.game .when .d { font-weight: 600; font-size: 11px; line-height: 1.15; margin-bottom: 2px }
.st { font-weight: 700; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap }
.st.live { color: var(--live) }
.st.live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--live); margin-right: 4px; vertical-align: 1px; animation: blink 1.4s infinite }
.st.ht { color: var(--live) }
.st.ft, .st.wo { color: var(--muted) }
.st.due, .st.pp { color: var(--faint); font-weight: 600; font-size: 11px; white-space: normal }
.st.pp { color: var(--red) }
@keyframes blink { 50% { opacity: .25 } }
.game .sides { display: grid; gap: 2px; min-width: 0 }
.side { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; min-width: 0; font-size: 14.5px; color: var(--ink-2) }
.side .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.side.won { color: var(--won) }
.side.won .nm { font-weight: 700 }
.side.lost { color: var(--muted) }
.side.me .nm { color: var(--me) }
.side .score { flex: none; text-align: right }
.sc { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap }
.sc small { color: var(--muted); font-weight: 500; font-size: 12px; display: inline-block; min-width: 3.1ch; text-align: right }
.sc.wo { color: var(--muted); font-weight: 600 }
.is-live .side .sc { color: var(--live) }
.game.is-live { background: linear-gradient(90deg, var(--live-soft), transparent 40%) }
.game.is-live:hover { background-color: var(--surface-2) }
.game .meta { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px }
.game .meta .via { color: var(--live) }
.game > .star { width: 44px; border-left: 1px solid transparent }

/* Competition groups: a header row then the games */
.groups { display: grid; gap: 12px; margin-top: 12px }
.cgroup { background: var(--surface); border-radius: 12px; overflow: hidden }
.cgroup .games { border-radius: 0; background: transparent }
.cgroup .games .game:first-child { border-top: 1px solid var(--line) }
.chead { display: flex; align-items: stretch; background: var(--surface-2) }
.ctitle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 12px; text-decoration: none }
.ctitle:hover b { color: var(--accent) }
.ctext { min-width: 0; display: grid }
.ctext b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ctext small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.live-box, .mine-box { margin-top: 12px }
.live-box .ph, .mine-box .ph { margin-top: 0 }
.mine-box .games { box-shadow: inset 3px 0 0 var(--star) }

/* ---------- Scoreboard (game page) ---------- */
.board {
  background: radial-gradient(120% 90% at 50% 0%, var(--board-glow), transparent 70%), var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 16px 14px; margin-block: 10px 16px
}
.board .comp { text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600 }
.board .comp b { color: var(--ink-2) }
.board .teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 8px; margin-block: 14px 8px }
.board .team { text-align: center; min-width: 0; display: flex; flex-direction: column; align-items: center }
.board .team .name { font: 800 clamp(20px, 5vw, 34px)/1.02 var(--display); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; min-height: 2.04em; display: flex; align-items: flex-end; justify-content: center }
.board .team .name a { text-decoration: none }
.board .team .score { font: 800 clamp(48px, 13vw, 88px)/1 var(--display); font-variant-numeric: tabular-nums; margin-top: 8px; letter-spacing: .01em }
.board .team .tot { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.5em }
.board .team.win .score { color: var(--won) }
.board .team.win .name::after { content: none }
.board .team.win .tot::after { content: " · Winners"; color: var(--accent); font-weight: 600; letter-spacing: .04em }
.board .team .star { min-height: 34px; width: 40px; margin-top: 2px; align-self: center }
.board .mid { text-align: center; min-width: 64px; align-self: center }
.board[data-status="live"] .team .score, .board[data-status="ht"] .team .score { color: var(--live) }
.pill { display: inline-block; padding: 5px 10px; border-radius: 6px; letter-spacing: .08em; font-size: 13px; font-weight: 700; background: var(--raise); color: var(--ink) }
.pill.live { background: var(--live); color: var(--accent-ink) }
.pill.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; animation: blink 1.4s infinite }
.pill.ht { background: var(--live); color: var(--accent-ink) }
.pill.ft, .pill.wo { background: var(--ink); color: var(--bg) }
.board .facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px }
.board .facts b { color: var(--ink); font-weight: 600 }
.status { margin-top: 10px; border-radius: 8px; padding: 8px 12px; font-size: 13px }
.status.warn { background: var(--warn-bg); color: var(--warn-ink) }
.status.ok { background: var(--ok-bg); color: var(--ok-ink) }
.grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr } }
.grid h2:first-child { margin-top: 4px }
.grid .games { border: 1px solid var(--line) }

/* Live feed, newest first */
.feed { list-style: none; margin: 0; padding: 0 }
.feed li { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); align-items: baseline }
.feed li:last-child { border-bottom: 0 }
.feed .m { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; font-size: 13px }
.feed .what { min-width: 0; overflow-wrap: anywhere }
.feed .what small { color: var(--muted) }
.feed .what a { color: var(--accent) }
.feed .run { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap }

/* Scorers, teams */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
@media (max-width: 480px) { .cols { grid-template-columns: 1fr } }
.cols > * { min-width: 0 }
.cols h3 { margin: 0 0 6px }
table.sc { width: 100%; border-collapse: collapse; font-size: 14px; font-weight: 400; white-space: normal }
table.sc td { padding: 5px 0; border-bottom: 1px solid var(--line); vertical-align: top }
table.sc td.n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; padding-left: 10px }
table.sc tr:last-child td { border-bottom: 0 }
table.sc small { color: var(--muted) }
table.sc.small { font-size: 13px }
ol.xv { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; font-size: 14px }
ol.xv li { display: flex; gap: 8px }
ol.xv li b { width: 22px; text-align: right; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; flex: none }

/* ---------- League tables ---------- */
.tbl-wrap { overflow-x: auto; margin-bottom: 14px }
.tbl-wrap h4 { margin: 4px 2px 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border-radius: 12px; overflow: hidden; font-size: 14px; font-variant-numeric: tabular-nums; min-width: 320px }
.tbl th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; padding: 9px 6px; text-align: center; background: var(--surface-2) }
.tbl td { padding: 8px 6px; text-align: center; border-top: 1px solid var(--line) }
.tbl .team { text-align: left; width: 45% }
.tbl .team a { text-decoration: none; font-weight: 600 }
.tbl .pos { color: var(--muted); width: 30px }
.tbl .pts { font-weight: 800 }
.tbl tr.mine td { background: var(--accent-soft) }
.tbl tr.mine .team a { color: var(--me) }
@media (max-width: 480px) { .tbl .xs { display: none } }

/* ---------- Bracket ---------- */
.bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px }
.bcol { display: flex; flex-direction: column; min-width: 0 }
.bhead { font: 700 12px/1 var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 6px 0 8px; border-bottom: 2px solid var(--accent); margin-bottom: 8px }
.bgames { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; flex: 1 }
.bgame { display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 8px 10px; text-decoration: none; font-size: 14px }
.bgame:hover { border-color: var(--accent); color: inherit }
.bgame.is-live { border-left-color: var(--live) }
.bside { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-2) }
.bside.won { font-weight: 700; color: var(--won) }
.bmeta { font-size: 12px; color: var(--muted); margin-top: 2px }
.subh { margin-top: 18px }
.rounds section h3 { margin: 18px 2px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted) }

/* ---------- Club ---------- */
.teamcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px }
.teamcard { background: var(--surface); border-radius: 12px; padding: 12px; display: grid; gap: 8px; align-content: start; min-width: 0 }
.teamcard h3 { margin: 0; display: flex; justify-content: space-between; gap: 8px; align-items: baseline }
.teamcard h3 a { text-decoration: none }
.teamcard .lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px }
.teamcard .game { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2) }
.teamcard .g-link { grid-template-columns: 62px minmax(0, 1fr) }
details.season summary { cursor: pointer; list-style: none }
details.season summary::-webkit-details-marker { display: none }
details.season summary h2 { display: inline-flex; align-items: baseline; gap: 6px }
details.season summary h2::after { content: "Show"; font: 600 13px/1 var(--body); color: var(--accent); text-transform: none; letter-spacing: 0; margin-left: 8px }
details.season[open] summary h2::after { content: "Hide" }

/* ---------- Clubs and competitions ---------- */
.search { width: 100%; max-width: 420px; font: 16px var(--body); padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); margin: 6px 0 12px }
.search::placeholder { color: var(--faint) }
.clubindex { columns: 3 220px; column-gap: 20px }
.clubindex section { break-inside: avoid; margin-bottom: 10px }
.clubindex h3 { color: var(--accent); font: 800 20px/1 var(--display); margin: 10px 2px 4px }
.clublist { display: flex; flex-direction: column }
.citem { display: flex; align-items: center; border-radius: 8px }
.citem:hover { background: var(--surface) }
.citem a { flex: 1; min-width: 0; text-decoration: none; padding: 6px 4px 6px 6px; font-weight: 500 }
.citem .star { min-height: 32px; width: 36px }
.citem .star:not([aria-pressed="true"]) { opacity: .5 }
.citem:hover .star { opacity: 1 }
.complist { display: flex; flex-direction: column; background: var(--surface); border-radius: 12px; overflow: hidden }
.comprow { display: flex; align-items: stretch; border-top: 1px solid var(--line) }
.comprow:first-child { border-top: 0 }
.comprow:hover { background: var(--surface-2) }
.complist .comp { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 10px; padding: 10px 4px 10px 12px; text-decoration: none }
.complist .t { font-weight: 600 }
.complist .s { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap }

/* ---------- Favourites page ---------- */
.favgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px }
.favcard { background: var(--surface); border-radius: 12px; overflow: hidden; min-width: 0 }
.favcard .chead { background: var(--surface-2) }
.favcard .lbl { display: block; padding: 8px 12px 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.favcard .games { border-radius: 0; background: transparent }
.favcard .empty { padding: 8px 12px 12px; font-size: 13px }

/* ---------- Articles ---------- */
.reads { display: flex; flex-direction: column; background: var(--surface); border-radius: 12px; overflow: hidden }
.read { display: grid; gap: 2px; text-decoration: none; padding: 11px 14px; border-top: 1px solid var(--line) }
.read:first-child { border-top: 0 }
.read:hover { background: var(--surface-2); color: inherit }
.read .tag, .tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent) }
.read .t { font-weight: 600 }
.read .s { color: var(--muted); font-size: 12px }

/* ---------- Admin ---------- */
.btn { font: 600 14px/1 var(--body); background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 10px 14px; cursor: pointer }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong) }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap }
.reviews { display: grid; gap: 10px }
.posttext { white-space: pre-wrap; background: var(--bg); padding: 8px 10px; border-radius: 6px; font-size: 14px }
.scoreform { display: flex; gap: 12px; flex-wrap: wrap; align-items: end }
.scoreform label { display: grid; gap: 4px; font-size: 13px; font-weight: 600 }
.scoreform input, .scoreform select { font: 15px var(--body); padding: 7px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink) }
div.pre, pre.pre { white-space: pre-wrap; background: var(--surface); border: 1px solid var(--line); padding: 12px; border-radius: 8px; overflow-x: auto; font-size: 13px }
.prose { max-width: 65ch }
.prose p { margin: 0 0 12px }
.prose a { color: var(--accent) }

footer.site { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); margin-top: 10px }
footer.site .foot { max-width: 1320px; margin: 0 auto; padding: 4px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)) }
footer.site p { margin: 12px 0 }
footer.site a { color: var(--ink-2) }

/* ---------- Responsive ---------- */
/* Medium: nav moves to its own row under the logo */
@media (max-width: 1180px) {
  .bar { padding-top: 6px }
  nav.top { order: 3; width: 100%; height: 42px; overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 6px; width: calc(100% + 28px) }
  nav.top::-webkit-scrollbar { display: none }
  html { scroll-padding-top: 130px }
  .sidebar { top: 116px; max-height: calc(100vh - 130px) }
}
/* Small: the sidebar becomes a slide-in drawer */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding-top: 10px; gap: 0 }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: min(86vw, 330px); max-height: none; border-radius: 0 14px 14px 0; padding: calc(8px + env(safe-area-inset-top)) 8px 24px;
    transform: translateX(-105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; box-shadow: var(--shadow)
  }
  .sidebar.open { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s }
  .side-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px 10px; font: 800 20px/1 var(--display); text-transform: uppercase; letter-spacing: .04em }
  .side-top .iconbtn { color: var(--ink); border-color: var(--line-strong) }
  .side-list .star:not([aria-pressed="true"]) { opacity: .8 }
  .side-list a { padding: 9px 8px; font-size: 14.5px }
  .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--scrim) }
  body.drawer-open { overflow: hidden }
}
@media (min-width: 901px) { .menu-btn { display: none } }
@media (max-width: 560px) {
  .bar { gap: 6px 8px; padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)) }
  nav.top { margin: 0 -10px; width: calc(100% + 20px); padding: 0 2px }
  nav.top a { padding: 0 10px }
  .brand { font-size: 21px; gap: 6px; margin-right: 0 }
  .crest { width: 24px; height: 24px }
  .county summary { padding: 0 10px 0 9px }
  .shell { padding-left: 8px; padding-right: 8px }
  .g-link { grid-template-columns: 50px minmax(0, 1fr); gap: 8px; padding-left: 4px }
  .teamcard .g-link { grid-template-columns: 56px minmax(0, 1fr) }
  .sidebar { font-size: 14px }
  .day { min-width: 58px; padding-inline: 4px }
  .dsarrow { width: 28px }
  .dspick { width: 40px }
  .game > .star { width: 40px }
  .board { padding-inline: 10px }
  .board .mid { min-width: 52px }
  h2 { font-size: 19px }
  .favgrid { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 380px) {
  .county .lbl { display: none }
  .county summary { padding: 0 8px 0 10px }
  .brand { font-size: 20px }
  .side .score, .sc small { font-size: 11px }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
}

/* ---- media: streams and videos (src/media) ---- */
.streamed { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 1px }
.meta > .streamed:first-child { margin-left: 0 }
.watch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px }
.watch-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; line-height: 1.2 }
.watch-btn:hover { background: var(--accent-strong); color: var(--accent-ink) }
.watch-btn small { font-weight: 600; opacity: .75; font-size: 12px }
.watch-btn .wb-ic { font-size: 12px }
.watch-btn.live .wb-ic { animation: blink 1.4s infinite }
.watch-btn.replay, .watch-btn.replay-soon { background: var(--raise); color: var(--ink) }
.watch-btn.replay:hover, .watch-btn.replay-soon:hover { background: var(--line-strong); color: var(--ink) }
.vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px }
.vid { display: grid; gap: 3px; align-content: start; text-decoration: none; min-width: 0 }
.vid:hover { color: inherit }
.vid:hover .vt { color: var(--accent) }
.vthumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--raise) }
.vthumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.vplay { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; padding-left: 2px }
.vt { font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.vs { font-size: 12px; color: var(--muted) }