/* ─────────────────────────────────────────────────────────────
   St Blazey & District Snooker League — one stylesheet for the
   whole site. Colours and sizes live in :root so they are easy
   to change in one place.
   ───────────────────────────────────────────────────────────── */
:root {
  --red: #e8003d;
  --red-dark: #c10033;
  --blue: #0088e0;
  --yellow: #fbb61a;
  --green: #0b8a12;
  --brown: #4b2019;
  --ink: #111;
  --muted: #555;
  --cream: #f9f8ee;
  --white: #fff;
  --row-alt: #f0f0f0;
  --head-row: #e6e6e0;
  --highlight: #f8dde3;
  --dark: #222;
  --wrap: 1160px;
  --sidebar: 360px;
  --font-head: "Space Grotesk", "Arial", sans-serif;
  --font-body: "Plus Jakarta Sans", "Open Sans", system-ui, sans-serif;
  --live-green: #19c24a;
  --soon-orange: #ff8a00;
  --nav-h: 58px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font: 400 var(--fs-body, 15px)/1.5 var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; margin: 0; line-height: 1.1; }
/* The --fs-… sizes come from Admin → Branding → Text sizes (see TEXT_SIZES in js/core/branding.js). */
h1 { font-size: clamp(calc(var(--fs-h1, 38px) * .68), var(--fs-h1-fluid, 4vw), var(--fs-h1, 38px)); margin: 12px 0 26px; }
h2 { font-size: var(--fs-h2, 22px); }
h3 { font-size: var(--fs-h3, 20px); margin: 30px 0 16px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* ── header & nav ───────────────────────────────────────────── */
.site-header {
  background: #000 var(--header-img, radial-gradient(ellipse at 18% 60%, #2a2a2a 0%, #000 45%)) left center / cover no-repeat;
  border-bottom: 5px solid var(--red);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
/* The logo is the same height as the menu buttons */
.logo img { height: var(--nav-h); width: auto; max-width: 160px; object-fit: contain; }
.nav-toggle { display: none; background: var(--red); color: #fff; border: 0; font: 700 16px var(--font-head); padding: 12px 16px; text-transform: uppercase; cursor: pointer; }
.main-nav { display: flex; flex-wrap: wrap; }
.main-nav a, .main-nav button {
  display: flex; align-items: center; height: var(--nav-h); padding: 0 16px;
  font: 700 var(--fs-nav, 18px)/1 var(--font-head); text-transform: uppercase; letter-spacing: .01em;
  color: #fff; border: 0; cursor: pointer; background: var(--dark);
}
.main-nav a:hover, .main-nav button:hover { filter: brightness(1.15); color: #fff; }
/* Menu colours come from Admin → Branding (see the --nav-… variables in the v6 block at the end). */
.nav-home { background: var(--nav-home) !important; color: var(--nav-home-ink) !important; }
.nav-comps { background: var(--yellow) !important; color: var(--nav-comps-ink) !important; }
.nav-fixtures { background: var(--green) !important; color: var(--nav-fixtures-ink) !important; }
.nav-league { background: var(--nav-league) !important; color: var(--nav-league-ink) !important; }
.nav-login { background: var(--nav-login) !important; color: var(--nav-login-ink) !important; }
.nav-live { background: var(--dark) !important; }
/* LIVE button: orange "LIVE SOON" an hour before matches, pulsing green while they're on */
.nav-live-btn::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #666; margin-right: 8px; }
.nav-live-btn.state-soon { background: var(--soon-orange) !important; animation: livePulse 1.6s infinite; --pulse: 255, 138, 0; }
.nav-live-btn.state-live { background: var(--live-green) !important; animation: livePulse 1.2s infinite; --pulse: 25, 194, 74; }
.nav-live-btn.state-soon::before, .nav-live-btn.state-live::before { background: #fff; animation: pulse 1.2s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(var(--pulse), .7); } 70% { box-shadow: 0 0 0 12px rgba(var(--pulse), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--pulse), 0); } }
.nav-bell svg { width: 22px; height: 22px; fill: #fff; }
.nav-bell .slash { display: none; }
.nav-bell.off svg { opacity: .55; }
.nav-bell.off .slash { display: block; }
@keyframes pulse { 50% { opacity: .25; } }

/* ── page structure ────────────────────────────────────────── */
main { flex: 1; padding: 36px 0 60px; }
main.flush { padding-top: 0; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar); gap: 34px; align-items: start; }
.stack > * + * { margin-top: 30px; }
.breadcrumb { display: inline-flex; flex-wrap: wrap; gap: 6px; background: #fff; padding: 6px 8px; font-size: 13px; font-weight: 700; margin-bottom: 18px; }
.breadcrumb > :not(:last-child)::after { content: "  -"; white-space: pre; }
.title-band { background: #fff; padding: 40px 16px; text-align: center; margin: 0 0 30px; }
.title-band h1 { margin: 0; font-size: 24px; }
.box { background: #fff; padding: 14px 12px; }

/* ── panels (red-header tables) ────────────────────────────── */
.panel { background: #fff; }
.panel-head {
  display: block; background: var(--accent); color: var(--accent-ink); text-align: center;
  font: 700 var(--fs-panel, 18px)/1 var(--font-head); text-transform: uppercase; padding: 13px 10px;
}
.panel-head.blue { background: var(--blue); color: #fff; }
.panel-head.yellow { background: var(--yellow); color: var(--nav-comps-ink); }
a.panel-head:hover { color: var(--accent-ink); filter: brightness(1.1); }
a.panel-head.blue:hover { color: #fff; }
.panel-foot { display: block; background: var(--head-row); font-weight: 700; font-size: 13px; padding: 9px 10px; }

table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-table, 14px); }
table.data th { background: var(--head-row); text-align: left; font-weight: 700; padding: 10px 14px; white-space: nowrap; font-size: var(--fs-table-head, inherit); }
table.data td { padding: 11px 14px; vertical-align: middle; }
table.data tbody tr:nth-child(even) td { background: var(--row-alt); }
table.data tbody tr.hl td { background: var(--highlight); font-weight: 700; }
table.data .num { text-align: center; white-space: nowrap; }
table.data .right { text-align: right; }
table.data .strong { font-weight: 700; }
.table-scroll { overflow-x: auto; }
.no-head thead { display: none; }
.empty { padding: 18px; text-align: center; color: var(--muted); }

.team-cell { display: flex; align-items: center; gap: 10px; }
.badge { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #222; color: #fff; font: 700 10px var(--font-head); overflow: hidden; }
.badge.logo { background: transparent; border-radius: 0; }
.badge img { width: 100%; height: 100%; object-fit: contain; }
/* Player photos are always round, whatever shape was uploaded */
.avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; background: var(--red); }
/* League leaders stand out: bigger row, bigger emblem */
table.data tbody tr.hl td { font-size: calc(var(--fs-table, 14px) + 2px); padding-top: 14px; padding-bottom: 14px; }
table.data tbody tr.hl .badge { width: 42px; height: 42px; font-size: 13px; }

/* ── sidebar widgets ───────────────────────────────────────── */
.sidebar > * + * { margin-top: 18px; }
.news-mini { display: flex; gap: 12px; background: #fff; margin-top: 14px; }
.news-mini img, .news-mini .ph { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex: none; margin: 12px 0 12px 14px; }
.news-mini div { padding: 12px 10px 12px 0; font-size: 13px; }
.news-mini strong { display: block; font: 700 15px var(--font-head); text-transform: uppercase; }
.news-mini small, .card small, .list-rows small { display: block; font-size: 12px; color: var(--muted); }
.btn-bar { display: block; background: var(--blue); color: #fff; text-align: center; font: 700 15px var(--font-head); text-transform: uppercase; padding: 14px; }
.btn-bar:hover { color: #fff; filter: brightness(1.1); }
/* Avatar on the left, number and name centred in the whole panel */
.top-break { display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; padding: 14px 18px 18px; }
.top-break .avatar { width: 72px; height: 72px; }
.top-break .value { font: 700 64px/1 var(--font-head); text-align: center; }
.new-badge { display: inline-block; background: var(--yellow); color: #1b0e06; font-size: 11px; padding: 2px 7px; margin-left: 8px; border-radius: 3px; vertical-align: middle; animation: newPulse 1.4s ease-in-out infinite; }
@keyframes newPulse { 50% { transform: scale(1.15); box-shadow: 0 0 12px rgba(251,182,26,.9); } }
.top-break .who { grid-column: 1 / -1; text-align: center; font-weight: 700; font-size: 15px; margin-top: 4px; }
.top-break.hl { background: var(--highlight); }

/* ── home ──────────────────────────────────────────────────── */
/* Fixed background photo; 3–4 news articles rotate on top of it */
.hero {
  position: relative; color: #fff; border-bottom: 5px solid var(--red); margin-top: -5px;
  background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 100%),
    #000 var(--hero-img, url("/assets/hero.jpg")) center 15% / cover no-repeat;
}
.hero-inner { position: relative; padding-top: 22px; padding-bottom: 16px; }
.hero-slides { display: grid; }
.hero-slide { grid-area: 1 / 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; opacity: 0; visibility: hidden; transition: opacity .7s, visibility .7s; }
.hero-slide.on { opacity: 1; visibility: visible; }
.hero-text { max-width: 760px; }
.hero-text h2 { display: inline; background: rgba(0, 0, 0, .8); padding: 4px 12px; font-size: clamp(22px, 3.4vw, 38px); line-height: 1.45; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* White intro block with the red button butted onto its end */
.hero-intro { display: flex; align-items: stretch; margin-top: 12px; max-width: 100%; width: fit-content; }
.hero-intro p { background: #fff; color: #000; margin: 0; padding: 10px 16px; font: 700 14px/1.35 var(--font-head); text-transform: uppercase; }
.hero-more { flex: none; display: flex; align-items: center; background: var(--red); color: #fff; padding: 0 14px; font: 700 13px var(--font-head); text-transform: uppercase; white-space: nowrap; }
.hero-more:hover { color: #fff; filter: brightness(1.1); }
.hero-meta { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #e7e7e7; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.hero-circle { width: 170px; height: 170px; border-radius: 50%; border: 7px solid rgba(90, 90, 90, .75); object-fit: cover; flex: none; }
.hero-dots { display: flex; gap: 8px; margin-top: 12px; }
.hero-dots button { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; background: transparent; padding: 0; cursor: pointer; }
.hero-dots button.on { background: var(--red); border-color: var(--red); }
.pill { background: var(--red); color: #fff !important; font-size: 10px; padding: 3px 6px; white-space: nowrap; }

/* Live & upcoming matches strip along the bottom of the banner */
.live-strip-wrap { background: linear-gradient(transparent, rgba(0,0,0,.85) 30%); padding: 18px 0 16px; }
.strip-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.strip-head h3 { margin: 0; font-size: 16px; }
.strip-head a { font-size: 13px; font-weight: 700; color: #fff; }
.strip-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
.strip-card { flex: 0 0 230px; scroll-snap-align: start; background: rgba(28,28,28,.95); border: 1px solid #3a3a3a; border-radius: 8px; padding: 8px 10px; color: #fff; font-size: 12px; transition: border-color .2s, transform .2s; }
.strip-card:hover { color: #fff; border-color: #777; transform: translateY(-2px); }
.strip-card.is-live { border-color: var(--live-green); box-shadow: 0 0 0 1px var(--live-green) inset; }
.sc-top { display: flex; justify-content: space-between; gap: 8px; color: #aaa; }
.sc-comp { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-body { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin: 8px 0 4px; }
.sc-side { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-weight: 700; line-height: 1.2; }
.sc-side .badge { width: 34px; height: 34px; }
.sc-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sc-mid b { font: 700 20px var(--font-head); }
.sc-mid b.time { font-size: 13px; border: 1px solid #666; border-radius: 6px; padding: 3px 6px; }
.sc-mid small { color: #aaa; }
.sc-foot { color: #888; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip-empty { color: #ccc; font-size: 14px; }
.strip-empty a { color: #fff; font-weight: 700; }

/* Shield holders, player/team of the week, CueViews */
.shield-icon { position: absolute; right: -14px; top: -10px; width: 110px; height: 110px; fill: rgba(251,182,26,.18); }
.spotlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.spotlight { position: relative; background: #111 radial-gradient(circle at 80% 0%, #3a0010, transparent 60%); color: #fff; padding: 22px 18px 18px; display: grid; justify-items: center; text-align: center; gap: 6px; }
.spotlight:hover { color: #fff; }
.spot-label { position: absolute; top: 0; left: 0; background: var(--yellow); color: #1b0e06; font: 700 12px var(--font-head); text-transform: uppercase; padding: 5px 10px; }
.spot-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid var(--yellow); margin-top: 10px; background: var(--red); }
.spot-badge .badge { width: 96px; height: 96px; font-size: 26px; margin-top: 10px; }
.spotlight strong { font: 700 22px var(--font-head); text-transform: uppercase; }
.spotlight small { color: #bbb; }
.spotlight p { margin: 4px 0 0; font-size: 14px; color: #e7e7e7; }
.quick-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 16px; }
.quick-links a { font: 700 20px/1 var(--font-head); text-transform: uppercase; text-align: center; padding: 14px; color: #fff; }
.quick-links a:hover { color: #fff; filter: brightness(1.1); }
.list-rows a { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; margin-top: 8px; }
.list-rows a > div { background: #fff; padding: 8px 6px; font-size: 13px; }
.list-rows strong { font-size: 15px; display: block; }
.list-rows img, .list-rows .ph { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }

/* ── cards grid (news, competitions, league hub, fixtures) ── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 20px; margin-bottom: 20px; }
.card { display: flex; flex-direction: column; }
.card img, .card .ph { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 14px; }
.card > div { background: #fff; padding: 12px 10px 14px; font-size: 13px; }
.card h4 { font-size: 18px; margin-bottom: 2px; }
.tile { display: block; background: #fff; text-align: center; padding: 24px 16px; font-size: 17px; min-height: 140px; }
.tile h4 { font-size: 19px; margin-bottom: 10px; }
.tile.tall { min-height: 238px; }
.tile p { margin: 16px 0 0; }
.tag { display: inline-block; min-width: 180px; background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 11px 16px; margin: 8px 0 12px; }
.ph { background: linear-gradient(135deg, #0b5d1a, #063a10); }

/* ── match page ────────────────────────────────────────────── */
.compare { margin: 30px 0; }
.compare h4 { text-align: center; font: 700 14px var(--font-body); text-transform: none; margin: 18px 0 6px; }
.bar { display: grid; grid-template-columns: 110px 1fr 110px; background: #fff; align-items: stretch; }
.bar span { display: grid; place-items: center; font-weight: 700; padding: 14px; }
.bar .track { display: flex; background: var(--row-alt); }
.bar .track i { background: var(--highlight); }
.live-dot { display: inline-flex; align-items: center; gap: 6px; background: var(--red); color: #fff; font: 700 12px var(--font-head); padding: 4px 8px; text-transform: uppercase; vertical-align: middle; }
.live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
.status { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--head-row); text-transform: capitalize; white-space: nowrap; }
.status.approved { background: #d7f2d9; }
.status.submitted { background: #fff0c8; }
.status.in_progress { background: var(--highlight); }
.status.postponed { background: #ddd; }

/* ── article / page content ───────────────────────────────── */
.prose { background: #fff; padding: 22px 24px; font-size: var(--fs-prose, 16px); }
.prose p { margin: 0 0 14px; }

/* ── forms & buttons ──────────────────────────────────────── */
.form { background: #fff; padding: 22px; }
.form label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 14px; }
.form label.check { display: flex; gap: 8px; align-items: center; }
input, select, textarea {
  width: 100%; font: 15px var(--font-body); padding: 9px 10px; margin-top: 5px;
  border: 1px solid #cfcfc6; background: #fff; border-radius: 0;
}
input[type="checkbox"] { width: auto; margin: 0; }
textarea { min-height: 160px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: pointer;
  background: var(--red); color: #fff; font: 700 var(--fs-button, 15px) var(--font-head); text-transform: uppercase;
  padding: 11px 18px;
}
.btn:hover { color: #fff; filter: brightness(1.1); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.secondary { background: var(--dark); }
.btn.green { background: var(--green); }
.btn.blue { background: var(--blue); }
.btn.ghost { background: var(--head-row); color: var(--ink); }
.btn.small { font-size: 13px; padding: 6px 10px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.notice { padding: 12px 14px; background: #fff0c8; margin-bottom: 16px; font-size: 14px; }
.notice.error { background: var(--highlight); color: #8a0022; font-weight: 700; }
.notice.ok { background: #d7f2d9; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast { background: var(--dark); color: #fff; padding: 12px 16px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.toast.error { background: var(--red); }
.demo-banner { background: var(--yellow); color: #1b0e06; text-align: center; font-size: 13px; padding: 6px 12px; font-weight: 700; }

/* ── scorecard ────────────────────────────────────────────── */
.scorecard td { padding: 6px 8px !important; }
.scorecard input, .scorecard select { margin: 0; padding: 7px 6px; }
.scorecard input[type="number"] { width: 76px; text-align: center; }
.running { display: flex; justify-content: center; align-items: center; gap: 24px; background: #fff; padding: 16px; font: 700 44px/1 var(--font-head); }
.running small { font: 700 14px var(--font-body); display: block; text-align: center; }
.break-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { display: inline-flex; gap: 6px; align-items: center; background: var(--head-row); padding: 3px 4px 3px 8px; font-size: 13px; }
.chip button { border: 0; background: none; cursor: pointer; font-weight: 700; }

/* ── admin ────────────────────────────────────────────────── */
.wrap.wide { max-width: 1440px; }
.admin table.data td { padding: 8px 10px; }
.admin { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: start; }
.admin-nav { background: #fff; position: sticky; top: 12px; }
.admin-nav a { display: block; padding: 10px 14px; font-weight: 700; border-left: 4px solid transparent; }
.admin-nav a.active { border-left-color: var(--red); background: var(--row-alt); }
.admin-nav .group { font: 700 12px var(--font-head); text-transform: uppercase; color: var(--muted); padding: 14px 14px 4px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.toolbar input, .toolbar select { width: auto; min-width: 180px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 26px; }
.stat { background: #fff; padding: 16px; }
.stat b { display: block; font: 700 34px/1 var(--font-head); }

/* ── sponsors & footer ────────────────────────────────────── */
.sponsors { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 34px; max-width: 840px; margin: 0 auto 60px; padding: 0 16px; }
.sponsors a { width: 368px; max-width: 100%; height: 52px; background: #111; color: #fff; display: grid; place-items: center; font-weight: 700; }
.sponsors img { width: 100%; height: 100%; object-fit: contain; }
.site-footer { background: var(--red); color: #fff; font-size: 13px; }
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 20px; padding-bottom: 20px; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
/* Loading: snooker balls bouncing in turn */
.loading { padding: 70px 16px; text-align: center; }
.balls { display: inline-flex; gap: 8px; }
.balls i { width: 16px; height: 16px; border-radius: 50%; animation: ball 1s ease-in-out infinite; box-shadow: inset -3px -3px 4px rgba(0,0,0,.35), inset 2px 2px 3px rgba(255,255,255,.4); }
.balls i:nth-child(2) { animation-delay: .1s; } .balls i:nth-child(3) { animation-delay: .2s; } .balls i:nth-child(4) { animation-delay: .3s; }
.balls i:nth-child(5) { animation-delay: .4s; } .balls i:nth-child(6) { animation-delay: .5s; } .balls i:nth-child(7) { animation-delay: .6s; }
.balls .red { background: #d0021b; } .balls .yellow { background: #f8d21c; } .balls .green { background: #138a36; } .balls .brown { background: #7b4a20; }
.balls .blue { background: #1565c0; } .balls .pink { background: #f48fb1; } .balls .black { background: #111; }
@keyframes ball { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-16px); } }

/* Live notifications (green pop-ups, bottom left) */
.live-pops { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.live-pop { background: var(--live-green); color: #fff; font-weight: 700; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.3); position: relative; animation: popIn .35s ease-out; transition: opacity .4s, transform .4s; display: flex; align-items: stretch; overflow: hidden; }
.live-pop-body { flex: 1; min-width: 0; display: block; padding: 12px 8px 12px 40px; color: inherit; text-decoration: none; }
a.live-pop-body:hover { color: inherit; background: rgba(255, 255, 255, .1); }
.live-pop-x { flex: none; width: 42px; border: 0; background: rgba(0, 0, 0, .16); color: inherit; font: 400 24px/1 var(--font-body); cursor: pointer; }
.live-pop-x:hover, .live-pop-x:focus-visible { background: rgba(0, 0, 0, .34); }
.live-pop::before { content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #d0021b; box-shadow: inset -2px -2px 3px rgba(0,0,0,.35); }
.live-pop.out { opacity: 0; transform: translateX(-20px); }
@keyframes popIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 1000px) {
  .layout, .admin { grid-template-columns: 1fr; }
  .admin-nav { position: static; display: flex; flex-wrap: wrap; }
  .admin-nav .group { width: 100%; }
  :root { --nav-h: 50px; }
  .main-nav a, .main-nav button { font-size: 16px; padding: 0 12px; }
}
@media (max-width: 720px) {
  .site-header .wrap { padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
  .logo img { height: 46px; }
  .nav-toggle { display: block; }
  .main-nav { display: none; width: 100%; flex-direction: column; }
  .main-nav.open { display: flex; }
  .main-nav a, .main-nav button { width: 100%; }
  .quick-links { grid-template-columns: 1fr; gap: 10px; }
  .hero-circle { display: none; }
  .hero-inner { padding-top: 12px; padding-bottom: 8px; }
  .hero-text h2 { font-size: 20px; }
  .hero-intro p { font-size: 12px; padding: 8px 10px; }
  .live-strip-wrap { padding-top: 10px; }
  .strip-card { flex-basis: 200px; }
  .grid-2 { grid-template-columns: 1fr; }
  table.data th, table.data td { padding: 9px 8px; }
  .bar { grid-template-columns: 64px 1fr 64px; }
  .hide-sm { display: none; }
}

/* ── image fields (admin) ─────────────────────────────────── */
.form .field-label { font-weight: 700; font-size: 13px; margin-bottom: 14px; }
.image-field { display: grid; gap: 8px; margin-top: 5px; }
.image-preview { width: 160px; height: 120px; object-fit: cover; background: var(--row-alt); border: 1px solid #ddd; }
.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; }

/* ── player page ──────────────────────────────────────────── */
.player-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.player-head h1 { margin: 0; display: flex; align-items: center; gap: 14px; }
.rank-badge { background: var(--red); color: #fff; min-width: 46px; height: 46px; display: grid; place-items: center; font-size: 26px; padding: 0 8px; }
.player-card { display: grid; grid-template-columns: 240px 1fr; gap: 30px; align-items: start; }
.player-photo { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; background: var(--red); box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.facts { background: #fff; margin: 0; padding: 18px 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 24px; }
.facts dt { font: 700 15px var(--font-head); text-transform: uppercase; }
.facts dd { margin: 4px 0 0; }
.facts a { color: var(--red); }
a.top-break:hover { color: inherit; background: var(--row-alt); }
@media (max-width: 720px) {
  .player-card { grid-template-columns: 1fr; justify-items: center; }
  .player-photo { width: 180px; height: 180px; }
  .facts { width: 100%; }
}

/* ── competitions ─────────────────────────────────────────── */
.comp-hero {
  color: #fff; margin-top: -5px; border-bottom: 5px solid var(--red); padding: 28px 0 34px;
  background: linear-gradient(90deg, rgba(0,0,0,.92) 20%, rgba(0,0,0,.55)), #111 var(--comp-img, url("/assets/hero.jpg")) center / cover;
}
.comp-hero .breadcrumb { color: var(--ink); }
.comp-hero-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.comp-hero h1 { margin: 4px 0 8px; font-size: clamp(32px, 5vw, 54px); }
.comp-kicker { margin: 0; color: var(--yellow); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; }
.comp-progress { margin: 0; display: inline-block; background: var(--red); padding: 5px 12px; font-weight: 700; font-size: 14px; }
.comp-champ { background: var(--yellow); color: #1b0e06; padding: 12px 20px; font: 700 26px/1.1 var(--font-head); text-transform: uppercase; box-shadow: 0 0 0 4px rgba(251,182,26,.3), 0 0 40px rgba(251,182,26,.45); }
.comp-champ small { display: block; font: 700 11px var(--font-body); letter-spacing: .1em; }
.glance { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--head-row); }
.glance div { background: #fff; padding: 14px; font-size: 13px; }
.glance b { display: block; font: 700 26px/1.1 var(--font-head); }
.glance-next { margin: 0; padding: 10px 14px; background: #fff; font-size: 14px; border-top: 1px solid var(--head-row); }
.list-links a { display: block; background: #fff; padding: 10px 14px; font-weight: 700; border-top: 1px solid var(--row-alt); }

/* round-by-round cards */
.fx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.fx-card { background: #fff; padding: 12px 14px 10px; font-size: 13px; }
.fx-side { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; }
.fx-side b { background: var(--yellow); min-width: 24px; text-align: center; padding: 2px 6px; }
.fx-side.won b { background: var(--red); color: #fff; }
.fx-side.won a, .fx-side.won span { color: var(--red); }
.fx-v { color: var(--yellow); font-weight: 800; padding: 2px 0; }
.fx-meta { color: var(--muted); font-size: 12px; margin-top: 8px; text-align: center; }

/* the bracket "roadmap" */
.bracket-panel { background: #161616; }
.bracket-hint { color: #9a9a9a; font-size: 13px; margin: 0; padding: 12px 16px 0; }
.bracket-wrap { overflow-x: auto; padding: 8px 8px 20px; cursor: grab; --line: #4a4a4a; }
.bracket { display: flex; min-width: max-content; }
.br-col { display: flex; flex-direction: column; width: 216px; animation: brIn .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 110ms); }
.br-title { text-align: center; color: #fff; font: 700 15px/1 var(--font-head); text-transform: uppercase; letter-spacing: .04em; padding: 14px 0 10px; }
.br-matches { display: flex; flex-direction: column; }
.br-pair { flex: 1; display: flex; flex-direction: column; position: relative; }
.br-slot { flex: 1; display: flex; align-items: center; position: relative; padding: 5px 22px; }
.br-col:not(.br-champion) .br-slot::after { content: ""; position: absolute; right: 0; top: 50%; width: 22px; border-top: 2px solid var(--line); }
.br-pair::after { content: ""; position: absolute; right: 0; top: 25%; bottom: 25%; border-right: 2px solid var(--line); }
.br-col + .br-col .br-slot::before { content: ""; position: absolute; left: 0; top: 50%; width: 22px; border-top: 2px solid var(--line); }
.br-match { width: 100%; background: #262626; border: 1px solid #333; border-radius: 6px; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.br-match:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.br-match.bye { opacity: .45; }
.br-team { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0 6px 10px; color: #d6d6d6; font-size: 13px; border-left: 3px solid transparent; transition: background .15s, color .15s; }
.br-team + .br-team { border-top: 1px solid #333; }
.br-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-score { min-width: 30px; align-self: stretch; display: grid; place-items: center; background: #1c1c1c; font-weight: 700; }
.br-team.won { color: #fff; font-weight: 700; }
.br-team.won .br-score { background: var(--red); color: #fff; }
.br-team.lost { color: #777; text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.br-team.tbc { color: #6d6d6d; font-style: italic; }
.br-team.path { border-left-color: var(--yellow); }
.br-team.lit { background: #3a2a05; color: #fff; border-left-color: var(--yellow); }
.br-meta { font-size: 11px; color: #8a8a8a; padding: 3px 10px; background: #1f1f1f; }
.br-trophy { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: #8a8a8a; font: 700 18px/1.1 var(--font-head); text-transform: uppercase; padding: 18px 10px; border: 2px dashed #444; border-radius: 10px; }
.br-trophy svg { width: 54px; height: 54px; fill: currentColor; }
.br-trophy.won { color: var(--yellow); border: 2px solid var(--yellow); background: radial-gradient(circle at 50% 30%, rgba(251,182,26,.25), transparent 70%); animation: glow 2.4s ease-in-out infinite; }
.br-trophy.lit { background: #3a2a05; }
@keyframes brIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes glow { 50% { box-shadow: 0 0 26px rgba(251,182,26,.55); } }
@media (prefers-reduced-motion: reduce) { .br-col, .br-trophy.won { animation: none; } }

.status.plain { text-transform: none; }
.bracket-wrap { display: flex; }
.bracket { margin: 0 auto; }

/* ── v3: admin form extras ────────────────────────────────── */
.form-heading { grid-column: 1 / -1; margin: 18px 0 12px; padding-top: 14px; border-top: 2px solid var(--head-row); font-size: 17px; }
.form-heading small, .form small.help { display: block; font: 400 13px var(--font-body); text-transform: none; color: var(--muted); margin-top: 3px; }
.form-actions { position: sticky; bottom: 0; background: #fff; padding: 12px 0 2px; border-top: 1px solid var(--head-row); margin-top: 8px; }
.image-preview.round { width: 120px; height: 120px; border-radius: 50%; }
.gallery-field { display: grid; gap: 8px; margin-top: 5px; }
.gal-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.gal-thumb { position: relative; margin: 0; }
.gal-thumb img { width: 96px; height: 72px; object-fit: cover; border: 1px solid #ddd; }
.gal-thumb button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--red); color: #fff; cursor: pointer; font-weight: 700; }
.pair-pick { width: auto; min-width: 150px; margin: 0; padding: 5px 6px; }

/* image library */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.lib-item { margin: 0; background: #fff; }
.lib-thumb { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; background: var(--row-alt); }
.lib-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lib-thumb:hover img { opacity: .85; }
.lib-item figcaption { padding: 6px 8px; font-size: 12px; display: grid; gap: 4px; }
.lib-item figcaption span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
dialog.picker { width: min(900px, 94vw); max-height: 86vh; border: 0; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
dialog.picker::backdrop, dialog.lightbox::backdrop { background: rgba(0,0,0,.6); }
.picker-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--head-row); position: sticky; top: 0; background: #fff; z-index: 1; }
.picker-head h3 { margin: 0; flex: 1; }
.picker-body { padding: 16px; }

/* galleries, lightbox, quotes */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.gallery-item { padding: 0; border: 0; cursor: zoom-in; background: #000; overflow: hidden; }
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s, opacity .3s; }
.gallery-item:hover img { transform: scale(1.05); opacity: .9; }
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
dialog.lightbox img { max-width: 94vw; max-height: 88vh; object-fit: contain; }
dialog.lightbox button { position: fixed; top: 14px; right: 18px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; font-size: 24px; cursor: pointer; }
.quote-box { margin: 22px 0; padding: 18px 22px 18px 54px; background: #111; color: #fff; position: relative; border-left: 6px solid var(--red); }
.quote-box::before { content: "“"; position: absolute; left: 14px; top: 0; font: 700 64px/1 var(--font-head); color: var(--red); }
.quote-box p { margin: 0; font: 600 19px/1.45 var(--font-head); }
.quote-box cite { display: block; margin-top: 8px; font-style: normal; color: var(--yellow); font-weight: 700; font-size: 14px; }
.article-kicker { margin: 0 0 12px; color: var(--red); font-size: 16px; }
.article-body .lead { font-size: 19px; font-weight: 600; line-height: 1.5; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tag-link { background: #fff; padding: 6px 12px; font-weight: 700; font-size: 13px; border: 1px solid var(--head-row); }
.ext-tag { display: inline-block; background: var(--yellow); color: #1b0e06; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 3px; }

/* venue */
.venue-top { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr; gap: 20px; align-items: start; }
.venue-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.map-frame { background: #fff; padding: 6px; }
.map-frame iframe { width: 100%; height: 340px; border: 0; display: block; }

/* CueView on player pages */
.cueview { background: #111; color: #fff; }
.cueview-head { display: flex; align-items: baseline; gap: 14px; padding: 16px 20px; border-bottom: 4px solid var(--red); }
.cueview-head span { background: var(--red); padding: 4px 10px; font: 700 14px var(--font-head); text-transform: uppercase; }
.cueview-head h2 { font-size: 22px; }
.cueview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; background: #2c2c2c; }
.cueview-grid > div { background: #161616; padding: 14px 18px; }
.cueview-grid > div.wide { grid-column: 1 / -1; }
.cueview-grid h4 { font: 700 13px var(--font-body); text-transform: none; color: var(--yellow); margin-bottom: 4px; }
.cueview-grid p { margin: 0; }

/* match headers (league and cup) */
.match-hero { background: #1d1d1d; color: #fff; border-top: 3px solid var(--red); border-bottom: 3px solid var(--red); }
.mh-band { text-align: center; padding: 10px; background: #111; font-weight: 700; font-size: 14px; }
.mh-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 22px 16px; }
.mh-side { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font: 700 22px var(--font-head); text-transform: uppercase; color: #ddd; }
.mh-side:hover { color: #fff; }
.mh-side.won { color: #fff; }
.mh-side .badge { width: 72px; height: 72px; font-size: 20px; }
.mh-score { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mh-score b { font: 700 54px/1 var(--font-head); }
.mh-score i { font: 700 40px var(--font-head); color: var(--red); font-style: normal; }
.mh-score small, .mh-score .live-dot { flex-basis: 100%; text-align: center; justify-content: center; color: #aaa; text-transform: capitalize; }
.mh-foot { text-align: center; padding: 0 0 14px; color: var(--yellow); font-weight: 700; }
.mh-foot a { color: #ddd; }

/* scorecard (styled like the original paper/WP card) */
.sc-card { background: transparent; }
.sc-title { text-align: center; margin: 10px 0 18px; }
.sc-title span { color: var(--red); }
.sc-band { background: #1d1d1d; color: #fff; text-align: center; padding: 12px; font-weight: 700; border-top: 2px solid var(--red); border-bottom: 2px solid var(--red); }
.sc-head { background: #262626; color: #fff; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 12px 20px; }
.sc-team { display: grid; justify-items: center; gap: 8px; }
.sc-team-name { font: 700 20px var(--font-head); }
.sc-emblem .badge { width: 64px; height: 64px; font-size: 18px; }
.sc-run { font: 700 40px/1 var(--font-head); color: var(--yellow); }
.sc-v { display: grid; justify-items: center; gap: 4px; padding: 0 20px; font-weight: 700; font-size: 14px; text-align: center; }
.sc-v b { font: 700 64px/1 var(--font-head); color: var(--red); }
.sc-shield { background: var(--yellow); color: #1b0e06; text-align: center; padding: 10px; font-weight: 700; }
.sc-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 10px 0; }
.sc-frames { background: #fff; }
.sc-table { width: 100%; border-collapse: collapse; }
.sc-table th { background: #1d1d1d; color: #fff; text-align: left; font-size: 12px; text-transform: uppercase; padding: 10px 8px; }
.sc-table td { padding: 6px 8px; border-bottom: 1px solid var(--row-alt); vertical-align: middle; }
/* Rich, round 38: a "starts on" line under a player made the row taller and pushed the points box down: keep each row's boxes level along the top. */
.sc-table tbody td.sc-players, .sc-table tbody td.sc-points { vertical-align: top; }
.sc-table .sc-no { background: var(--red); color: #fff; text-align: center; font: 700 20px var(--font-head); width: 44px; }
.sc-slot { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 6px; }
.sc-slot + .sc-slot { margin-top: 6px; }
.sc-slot select, .sc-slot input, .sc-points input { margin: 0; padding: 8px 6px; }
.sc-breaks { background: #fde7ec; }
.sc-points { width: 86px; }
.sc-points input { background: #e3f6e6; text-align: center; font-weight: 700; font-size: 17px; }
tr.won-a td:first-child, tr.won-b td:nth-child(4) { box-shadow: inset 4px 0 0 var(--live-green); }
tr.won-a td:nth-child(2) input, tr.won-b td:nth-child(5) input { background: var(--live-green); color: #fff; }
.sc-frame-btns { padding: 10px 8px; }
.sc-actions { justify-content: center; margin: 22px 0 16px; }
.sc-warn { text-align: center; color: #fff; padding: 9px 14px; font-weight: 700; font-size: 13px; margin-top: 8px; }
.sc-warn.orange { background: var(--soon-orange); }
.sc-warn.red { background: var(--red); }

/* calendar */
.cal-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cal-bar h2 { font-size: 24px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--head-row); border: 1px solid var(--head-row); }
.cal-dow { background: #1d1d1d; color: #fff; text-align: center; font-weight: 700; font-size: 12px; padding: 8px 0; }
.cal-day { background: #fff; min-height: 110px; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.cal-day.other { background: #f6f6f1; }
.cal-day.other .cal-num { color: #bbb; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--red); }
.cal-num { font-weight: 700; font-size: 13px; }
.cal-ev { display: block; font-size: 11px; line-height: 1.3; padding: 2px 4px; border-left: 3px solid var(--green); background: #eef7ef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.cup { border-left-color: var(--yellow); background: #fff6df; }
.cal-ev.live { border-left-color: var(--red); background: var(--highlight); }
.cal-key { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; }
.cal-key i { display: inline-block; width: 12px; height: 12px; margin-right: -6px; }
.cal-key i.league { background: var(--green); } .cal-key i.cup { background: var(--yellow); }
.cal-list { display: none; }
.cal-row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; background: #fff; padding: 10px 12px; border-left: 4px solid var(--green); margin-bottom: 6px; }
.cal-row.cup { border-left-color: var(--yellow); }
.cal-date { font-size: 13px; color: var(--muted); }
.cal-date b { display: block; color: var(--ink); }
.cal-row small { display: block; color: var(--muted); }

/* statistics */
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .grid { stroke: #e3e3dc; stroke-width: 1; }
.chart .tick { fill: var(--muted); font: 11px var(--font-body); }
.chart .bar { fill: var(--red); }
.chart .hit { fill: transparent; }
.chart .bar-g.on .bar { fill: var(--red-dark); }
.chart-tip { position: absolute; background: var(--dark); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 9px; border-radius: 4px; pointer-events: none; white-space: nowrap; }
.share { display: grid; gap: 10px; }
.share-row { display: grid; grid-template-columns: 130px 1fr 90px; gap: 10px; align-items: center; font-size: 14px; }
.share-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.share-track { background: var(--row-alt); height: 12px; border-radius: 6px; overflow: hidden; }
.share-track i { display: block; height: 100%; background: var(--red); border-radius: 6px; }
.share-row b small { font-weight: 400; color: var(--muted); }

/* bracket matches are links now */
a.br-match { display: block; color: inherit; }
a.br-match:hover { color: inherit; }
.br-match.live { border-color: var(--live-green); }
.fx-link { float: right; font-size: 12px; color: var(--red); }

@media (max-width: 720px) {
  .cal-grid { display: none; }
  .cal-list { display: block; }
  .venue-top { grid-template-columns: 1fr; }
  .mh-side { font-size: 15px; }
  .mh-side .badge { width: 46px; height: 46px; }
  .mh-score b { font-size: 38px; }
  .sc-head { padding: 12px 4px; }
  .sc-title { font-size: 22px; overflow-wrap: anywhere; }
  .sc-team-name { font-size: 15px; text-align: center; }
  .sc-v b { font-size: 40px; }
  .sc-table th:nth-child(2), .sc-table th:nth-child(5) { font-size: 0; }
  .sc-slot { grid-template-columns: 1fr; }
  .sc-points { width: 62px; }
  .sc-table td { padding: 4px; }
  .share-row { grid-template-columns: 90px 1fr 70px; }
}

/* ── v4: step-by-step scorecard (made for phones) ─────────── */
.sc-intro { margin: 0 0 12px; }
.sc-views { display: flex; align-items: center; gap: 0; margin: 12px 0; font-size: 13px; font-weight: 700; }
.sc-views span { margin-right: 10px; color: var(--muted); }
.sc-views button { border: 1px solid #cfcfc6; background: #fff; padding: 8px 14px; font: 700 13px var(--font-body); cursor: pointer; }
.sc-views button + button { border-left: 0; }
.sc-views button.on { background: var(--dark); color: #fff; border-color: var(--dark); }
.sc-photo { font-weight: 700; font-size: 13px; padding: 7px 10px; background: #fff0c8; margin-right: auto; }
.sc-photo.ok { background: #d7f2d9; color: #0b5d1a; }
.view-guided .sc-frames { background: transparent; }
.g-step { max-width: 620px; margin: 0 auto; }
.g-h { display: flex; align-items: center; gap: 10px; margin: 6px 0 6px; }
.g-h span { background: var(--red); color: #fff; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; }
.g-pick { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 8px; align-items: center; background: #fff; padding: 8px; margin-bottom: 6px; }
.g-pick-head { background: #1d1d1d; color: #fff; font-size: 13px; text-transform: uppercase; }
.g-pick select { margin: 0; padding: 10px 6px; }
.g-pick select + select { margin-top: 6px; }
.g-no { background: var(--red); color: #fff; font: 700 18px var(--font-head); width: 34px; height: 34px; display: grid; place-items: center; }
.g-wide { width: 100%; margin-top: 12px; padding: 15px; font-size: 17px; }
.g-tabs { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; padding-bottom: 2px; }
.g-tab { flex: none; min-width: 44px; height: 44px; border: 2px solid #cfcfc6; background: #fff; font: 700 17px var(--font-head); cursor: pointer; border-radius: 6px; }
.g-tab.wide { padding: 0 12px; font-size: 13px; margin-left: auto; }
.g-tab.done { background: #d7f2d9; border-color: var(--green); }
.g-tab.on { background: var(--red); border-color: var(--red); color: #fff; }
.g-frame { background: #1d1d1d; border-radius: 10px; padding: 10px; }
.g-frame-head { color: #fff; text-align: center; font: 700 15px var(--font-head); text-transform: uppercase; letter-spacing: .06em; padding: 4px 0 10px; }
.g-card { background: #fff; border-radius: 8px; padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 10px; align-items: center; border-left: 6px solid transparent; transition: border-color .2s, background .2s; }
.g-card.ahead { border-left-color: var(--live-green); background: #f1fbf3; }
.g-people { display: grid; gap: 8px; min-width: 0; }
.g-person { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.g-person .avatar { width: 48px; height: 48px; }
.g-person.empty { cursor: pointer; }
.g-person.empty .avatar { background: var(--head-row); border: 2px dashed #aaa; display: block; }
.g-person strong { display: block; font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.g-person small { color: var(--muted); }
.g-person > span { min-width: 0; }
.g-cue { width: 46px; margin: 0 -16px; opacity: 0; transform: rotate(-90deg); transition: opacity .2s; }
.g-card.ahead .g-cue { opacity: 1; animation: cueBob 1.4s ease-in-out infinite; }
@keyframes cueBob { 50% { transform: rotate(-90deg) translateX(5px); } }
.g-points { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); text-align: center; }
.g-points input { display: block; width: 86px; margin: 3px 0 0; padding: 10px 4px; font: 700 28px var(--font-head); text-align: center; background: #e3f6e6; border: 2px solid #b9dcbf; border-radius: 6px; }
.g-card.ahead .g-points input { background: var(--live-green); border-color: var(--live-green); color: #fff; }
.g-breaks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px solid var(--row-alt); padding-top: 8px; }
.g-breaks-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.g-breaks .chip { background: #fde7ec; font-weight: 700; padding: 5px 4px 5px 10px; border-radius: 14px; }
.g-breaks .chip small { color: var(--red); }
.g-break-add { display: inline-flex; gap: 6px; margin-left: auto; }
.g-break-add input { width: 78px; margin: 0; padding: 7px 6px; background: #fde7ec; }
.g-vs { text-align: center; color: var(--red); font: 700 22px var(--font-head); padding: 4px 0; }
.g-nav { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 8px; margin-top: 10px; }
.g-nav .btn { padding: 14px 6px; }
@media (max-width: 720px) {
  .sc-head { grid-template-columns: 1fr auto 1fr; padding: 10px 4px 12px; }
  .sc-emblem .badge { width: 40px; height: 40px; font-size: 13px; }
  .sc-run { font-size: 30px; }
  .sc-v span { font-size: 11px; }
  .sc-actions .btn { flex: 1 1 100%; padding: 14px; }
  .sc-tools { justify-content: stretch; }
  .sc-tools > * { flex: 1 1 100%; text-align: center; }
  .sc-intro { font-size: 13px; }
  .sc-warn { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .g-card.ahead .g-cue { animation: none; } }

/* ── v4: footer (light, with partners, socials and links) ── */
.site-footer { background: transparent; color: var(--ink); border-top: 1px solid #d5d4c8; margin-top: 10px; text-align: center; font-size: 14px; }
.site-footer .wrap { display: block; padding-top: 30px; padding-bottom: 30px; }
.foot-h { margin: 0 0 16px; font-size: 18px; letter-spacing: .04em; }
.sponsors { margin: 0 auto 30px; padding: 0; }
.socials { display: flex; justify-content: center; gap: 12px; margin-bottom: 22px; }
.socials a { width: 42px; height: 42px; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; transition: background .2s, transform .2s; }
.socials a:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.socials svg { width: 20px; height: 20px; fill: currentColor; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-bottom: 16px; font-weight: 700; }
.foot-links a:hover, .site-footer a:hover { color: var(--red); text-decoration: none; }
.foot-copy { margin: 0; color: var(--muted); font-size: 13px; }
.foot-copy a { color: inherit; }

/* search overlay */
.nav-search svg { width: 20px; height: 20px; fill: #fff; }
.nav-search span { display: none; }
.nav-search-m { display: none; }
dialog.search { width: min(680px, 94vw); max-height: 84vh; margin-top: 8vh; border: 0; padding: 0; box-shadow: 0 24px 70px rgba(0,0,0,.5); overflow: hidden; display: flex; flex-direction: column; }
dialog.search:not([open]) { display: none; }
dialog.search::backdrop { background: rgba(0,0,0,.72); }
.search-bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 3px solid var(--red); }
.search-bar svg { width: 24px; height: 24px; flex: none; fill: var(--muted); }
.search-bar input { margin: 0; border: 0; font-size: 19px; padding: 8px 0; outline: 0; }
.search-bar button { border: 0; background: var(--head-row); width: 38px; height: 38px; border-radius: 50%; font-size: 22px; cursor: pointer; flex: none; }
.search-results { overflow-y: auto; padding: 6px 14px 14px; }
.search-results h4 { margin: 14px 0 6px; font-size: 13px; color: var(--red); }
.search-hit { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 6px; }
.search-hit:hover, .search-hit:focus { background: var(--row-alt); color: inherit; }
.search-hit img, .search-dot { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--head-row); }
.search-hit strong { display: block; }
.search-hit small { color: var(--muted); }
.search-hint, .search-more { color: var(--muted); margin: 14px 4px; font-size: 14px; }

/* banner headline: the dark strip hugs each line of text */
.hero-text h2 { display: block; background: none; padding: 0; }
.hero-text h2 a, .hero-text h2 a:hover { color: #fff; }
.hero-text h2 span { background: rgba(0, 0, 0, .8); padding: 4px 12px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* live strip: round emblems and faces, carousel arrows */
.strip-card .badge, .strip-card .sc-face { width: 44px; height: 44px; border-radius: 50%; }
.strip-card .badge.logo { background: #fff; padding: 4px; }
.strip-ctrl { display: flex; align-items: center; gap: 6px; }
.strip-ctrl button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #777; background: rgba(0,0,0,.5); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.strip-ctrl button:hover { background: var(--red); border-color: var(--red); }
.strip-ctrl a { margin-left: 8px; }
.strip-row { scrollbar-width: none; }
.strip-row::-webkit-scrollbar { display: none; }

/* rankings leader stands out, like the league leaders */
table.data tbody tr.hl .avatar { width: 42px; height: 42px; }

/* phone "scroll" hint on the home page */
.scroll-hint { display: none; }

/* My area: header, tabs, next match */
.my-head { display: flex; align-items: center; gap: 16px; margin: 6px 0 16px; }
.my-head h1 { margin: 0 0 2px; }
.my-head p { margin: 0; color: var(--muted); font-weight: 700; }
.my-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--red); flex: none; }
.my-badge .badge { width: 72px; height: 72px; font-size: 20px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 3px solid var(--red); margin-bottom: 22px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; padding: 11px 16px; background: #fff; font: 700 15px var(--font-head); text-transform: uppercase; }
.tabs a.on { background: var(--red); color: #fff; }
.next-match { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: #1d1d1d; color: #fff; padding: 18px 20px; border-left: 6px solid var(--live-green); }
.next-match small { display: block; color: var(--yellow); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.next-match strong { display: block; font: 700 24px var(--font-head); text-transform: uppercase; }
.next-match span { color: #bbb; }
.next-match .btn { padding: 14px 22px; font-size: 16px; }

/* Our Players and richer profiles */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.person-card { background: #fff; padding: 16px 10px; display: grid; justify-items: center; text-align: center; gap: 4px; transition: transform .2s, box-shadow .2s; }
.person-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.1); color: inherit; }
.person-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--red); margin-bottom: 4px; }
.person-card small { color: var(--muted); }
.team-tile { display: grid; justify-items: center; gap: 8px; min-height: 0; padding: 18px 12px; }
.team-tile .badge { width: 56px; height: 56px; font-size: 16px; color: #fff; }
.team-tile h4 { margin: 0; }
.team-tile span { font-size: 13px; color: var(--muted); }
.player-head h1 .badge { width: 46px; height: 46px; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.profile-box.wide { grid-column: 1 / -1; }
.profile-box h3 { margin: 0 0 10px; }
.timeline { list-style: none; margin: 0; padding: 14px 18px; background: #fff; border-left: 4px solid var(--red); }
.timeline li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--row-alt); }
.timeline li:last-child { border-bottom: 0; }
.timeline b { color: var(--red); font-family: var(--font-head); }
.timeline li > span:only-child { grid-column: 1 / -1; }
.plain-list { list-style: none; margin: 0; padding: 14px 18px; background: #fff; display: grid; gap: 8px; }

/* admin: tag chips, and a simple menu on small screens */
.tags-field { display: grid; gap: 8px; margin-top: 5px; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tags-field select { max-width: 320px; margin: 0; }
.admin-jump { display: none; font-weight: 700; font-size: 13px; margin-bottom: 16px; }
.admin-jump select { font-weight: 700; padding: 12px 10px; border: 2px solid var(--dark); }

@media (max-width: 1000px) {
  .admin-jump { display: block; }
  .admin-nav { display: none; }
  .admin .toolbar > * { flex: 1 1 100%; min-width: 0; width: 100%; }
  .admin .table-scroll, .results-edit { -webkit-overflow-scrolling: touch; }
  .form { padding: 14px; }
}
@media (max-width: 720px) {
  /* banner: headline, then category/date with a small button — no white box */
  .hero-text { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; }
  .hero-text h2 { grid-column: 1 / -1; font-size: 21px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .hero-intro { grid-column: 2; grid-row: 2; margin: 0; }
  .hero-intro p { display: none; }
  .hero-more { padding: 9px 12px; font-size: 12px; border-radius: 3px; }
  .hero-meta { grid-column: 1; grid-row: 2; margin: 0; }
  .hero-dots { margin-top: 10px; }
  /* three buttons side by side */
  .quick-links { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .quick-links a { font-size: 13px; padding: 12px 2px; letter-spacing: 0; }
  .main-nav .nav-search { display: none; }
  .nav-search-m { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; margin-right: -12px; background: var(--dark); border: 0; cursor: pointer; }
  .nav-search-m svg { width: 20px; height: 20px; fill: #fff; }
  .nav-search-m + .nav-toggle { margin-left: 0; }
  .scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 2px; position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 40;
    background: rgba(17,17,17,.88); color: #fff; border: 0; border-radius: 22px; padding: 8px 16px 4px; font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; transition: opacity .3s, transform .3s; }
  .scroll-hint.gone { opacity: 0; pointer-events: none; transform: translate(-50%, 20px); }
  .scroll-hint .mouse { width: 18px; height: 28px; border: 2px solid #fff; border-radius: 10px; position: relative; }
  .scroll-hint .mouse i { position: absolute; left: 50%; top: 5px; width: 3px; height: 6px; margin-left: -1.5px; background: #fff; border-radius: 2px; animation: wheel 1.4s infinite; }
  .scroll-hint svg { width: 16px; height: 16px; fill: #fff; animation: nudge 1.4s infinite; }
  .profile-grid { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 70px 1fr; }
  .my-head h1 { font-size: 22px; }
  .next-match .btn { width: 100%; }
  .people { grid-template-columns: repeat(2, 1fr); }
  .sponsors a { width: 100%; }
}
@keyframes wheel { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(9px); } }
@keyframes nudge { 50% { transform: translateY(3px); } }

/* v4 fixes after testing */
.grid-2 > *, .layout > *, .admin > * { min-width: 0; }
@media (max-width: 720px) {
  .team-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .team-tile h4 { font-size: 15px; }
}
/* Admin on a phone: every list becomes a stack of cards, so nothing runs off the side */
@media (max-width: 720px) {
  #admin-body table.data, #admin-body table.data tbody, #admin-body table.data tr { display: block; width: 100%; }
  #admin-body table.data thead { display: none; }
  #admin-body table.data tr { background: #fff; margin-bottom: 10px; padding: 8px 12px; border-left: 4px solid var(--red); }
  #admin-body table.data td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 5px 0; background: none !important; text-align: right; white-space: normal; }
  #admin-body table.data td::before { content: attr(data-label); flex: none; font-weight: 700; color: var(--muted); text-align: left; }
  #admin-body table.data td[data-label=""] { justify-content: flex-end; padding-top: 8px; }
  #admin-body table.data td[data-label=""]::before { content: none; }
  #admin-body .panel-body, #admin-body .table-scroll { background: none; }
}
.search-dot { display: grid; place-items: center; background: var(--dark); color: #fff; font: 700 16px var(--font-head); }
.search-bar input::-webkit-search-cancel-button { display: none; }

/* ═════════════════════════════════════════════════════════════
   v5 — Rich's third round of feedback
   ═════════════════════════════════════════════════════════════ */
/* Body text in Questrial; headings stay in Space Grotesk. (Questrial has one
   weight, so bold body text is thickened by the browser.) */
:root { --font-body: "Questrial", "Helvetica Neue", Arial, system-ui, sans-serif; }

/* Breadcrumbs: one white chip per step, with a gap between them */
.breadcrumb { background: none; padding: 0; gap: 6px; align-items: center; }
.breadcrumb > * { background: #fff; padding: 5px 10px; }
.breadcrumb > :not(:last-child)::after { content: none; }
.breadcrumb > a:hover { background: var(--red); color: #fff; }

/* Headings with an emblem beside them (team, venue, league) */
.with-emblem { display: flex; align-items: center; gap: 14px; }
h1.with-emblem .badge { width: 52px; height: 52px; font-size: 15px; }
.emblem { display: inline-flex; flex: none; }
.emblem .badge { width: 56px; height: 56px; font-size: 15px; }
.tile.with-emblem { display: flex; align-items: center; gap: 14px; text-align: left; min-height: 0; padding: 16px; }
.tile.with-emblem .badge { width: 46px; height: 46px; font-size: 13px; }
.tile.with-emblem h4 { margin-bottom: 4px; }
.venue-tile { display: flex; align-items: center; gap: 16px; text-align: left; min-height: 120px; padding: 18px; }
.venue-tile h4 { margin-bottom: 6px; }
.venue-tile p { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.facts.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts.two-col dd { overflow-wrap: anywhere; }

/* Home page banner: headline, then category/date with a small "continue reading" */
.hero-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.hero-foot .hero-meta { margin: 0; }
.hero-more { padding: 7px 12px; font-size: 12px; border-radius: 3px; }
.hero-circle-link { flex: none; border-radius: 50%; transition: transform .2s; }
.hero-circle-link:hover { transform: scale(1.03); }
.hero-circle-link:hover .hero-circle { border-color: var(--red); }

/* Four quick links, then the "NEW" feature box */
.quick-links { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 0; }
.quick-links a { font-size: 18px; padding: 15px 6px; }
.stack > .feature-box { margin-top: 16px; }
.feature-box { display: flex; align-items: center; gap: 14px; padding: 13px 16px; font: 700 17px/1.25 var(--font-head); }
a.feature-box:hover { color: inherit; filter: brightness(1.08); }
.feature-new { flex: none; background: #fff; color: var(--red); padding: 4px 10px; border-radius: 3px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; animation: featurePulse 1.4s ease-in-out infinite; }
.feature-go { margin-left: auto; font-size: 22px; }
@keyframes featurePulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.75); } 50% { transform: scale(1.08); box-shadow: 0 0 0 9px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .feature-new { animation: none; } }

/* Live & upcoming strip: emblems sit straight on the card — no white circle */
.strip-card .badge.logo { background: transparent; padding: 0; border-radius: 0; }

/* Shield holders: smaller pictures with more room around them */
.shield-icon { width: 84px; height: 84px; right: -8px; top: -6px; }

/* Match page: wins in green, losses in red; what the ranking points are made of */
.tally { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; font-weight: 700; }
.tally.win { background: #c9efcf; color: #0b5d1a; }
.tally.loss { background: #f9cdd7; color: #a10029; }
.table-note { margin: 0; padding: 8px 14px 12px; font-size: 13px; color: var(--muted); background: #fff; }

/* Live page: the running score is centred on the dash; breaks sit beside the name */
.running { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; }
.running > div:first-child { text-align: right; }
.running > div:last-child { text-align: left; }
.running small { text-align: inherit; }
.break-tag { display: inline-block; margin: 2px 0 2px 6px; background: var(--yellow); color: #1b0e06; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
td.right .break-tag { margin: 2px 6px 2px 0; }

/* Competitions */
.comp-link { margin: 10px 0 0; font-size: 14px; }
.comp-link a { color: var(--yellow); font-weight: 700; text-decoration: underline; }
.br-title small { display: block; margin-top: 5px; font: 400 11px var(--font-body); text-transform: none; letter-spacing: 0; color: #bbb; }
.round-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.deadline { font: 700 12px var(--font-body); text-transform: none; letter-spacing: 0; background: #fff0c8; padding: 3px 9px; border-radius: 12px; }
.deadline.late { background: var(--highlight); color: #a10029; }
.deadline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }

/* "Edit this page" (admins and officers) and "back to top" (phones) */
.edit-page { position: fixed; left: 14px; bottom: 14px; z-index: 44; display: inline-flex; align-items: center; gap: 8px; background: var(--dark); color: #fff; padding: 10px 15px;
  border: 2px solid var(--yellow); border-radius: 24px; font: 700 13px var(--font-head); text-transform: uppercase; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.edit-page svg { width: 16px; height: 16px; fill: var(--yellow); }
.edit-page:hover { color: #fff; background: #000; }
.to-top { display: none; }

/* Yes/no question box */
dialog.confirm-box { width: min(440px, 92vw); border: 0; padding: 22px; box-shadow: 0 24px 70px rgba(0,0,0,.5); border-top: 6px solid var(--red); }
dialog.confirm-box::backdrop { background: rgba(0,0,0,.65); }
.confirm-box h3 { margin: 0 0 10px; }
.confirm-text p { margin: 0 0 10px; }
.confirm-box .btn-row { justify-content: flex-end; margin-top: 16px; }
.confirm-box .btn { padding: 12px 18px; }

/* My Team: postponed-match reminder */
.postponed-note { background: #fff0c8; border-left: 6px solid var(--soon-orange); padding: 14px 16px; display: grid; gap: 4px; }
.postponed-note strong { font: 700 17px var(--font-head); text-transform: uppercase; }
.postponed-note.late { background: var(--highlight); border-left-color: var(--red); }
.next-match .btn-row { align-items: center; }
.next-match .btn.small { padding: 9px 12px; font-size: 12px; background: transparent; color: #fff; border: 1px solid #777; }

/* Login page: demo logins */
.demo-logins { display: grid; gap: 6px; }
.demo-logins button { text-align: left; border: 1px solid #e3cf95; background: #fffaf0; padding: 7px 10px; cursor: pointer; font: inherit; font-size: 13px; }
.demo-logins button:hover { background: #fff; border-color: var(--red); }

/* ── scorecard: tidier, with a "Finish" step ─────────────── */
.sc-tools { align-items: center; justify-content: space-between; gap: 10px; padding: 10px; background: #fff; border-bottom: 1px solid var(--row-alt); }
.sc-photo-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; background: #fff0c8; padding: 12px 14px; border-left: 6px solid var(--soon-orange); flex: 1 1 320px; }
.sc-photo-box.ok { background: #e6f7e9; border-left-color: var(--green); }
.sc-photo-box strong { display: block; }
.sc-photo-box small { color: var(--muted); }
.sc-photo-icon svg { width: 34px; height: 34px; fill: #9a6a00; display: block; }
.sc-photo-thumb img { width: 58px; height: 58px; object-fit: cover; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.sc-start { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: #0b5d1a; }
.sc-help { margin-top: 14px; background: #fff; border: 1px solid #dcdbd0; font-size: 14px; }
.sc-help summary { cursor: pointer; padding: 10px 14px; font-weight: 700; }
.sc-help p { margin: 0; padding: 0 14px 10px; color: #333; }
.g-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.g-steps button { display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid #cfcfc6; background: #fff; padding: 10px 4px; font: 700 14px var(--font-head); text-transform: uppercase; cursor: pointer; border-radius: 6px; }
.g-steps b { width: 24px; height: 24px; border-radius: 50%; background: var(--head-row); display: grid; place-items: center; font-size: 13px; }
.g-steps button.done { border-color: var(--green); background: #e6f7e9; }
.g-steps button.done b { background: var(--green); color: #fff; }
.g-steps button.on { background: var(--red); border-color: var(--red); color: #fff; }
.g-steps button.on b { background: #fff; color: var(--red); }
.g-tabs { align-items: center; }
.g-tab.add { border-style: dashed; color: var(--muted); }
.g-pick.one { grid-template-columns: 1fr 1fr; }
.g-pick.one .g-no { display: none; }
.g-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.g-start { grid-column: 1 / -1; font-size: 13px; background: #e6f7e9; color: #0b5d1a; padding: 5px 9px; border-radius: 4px; justify-self: start; }
.g-sum { display: grid; gap: 4px; margin: 10px 0; }
.g-sum-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; background: #fff; border: 0; padding: 6px 10px 6px 6px; font: inherit; cursor: pointer; text-align: left; }
.g-sum-row span:nth-child(2) { text-align: right; }
.g-sum-row b { font: 700 16px var(--font-head); white-space: nowrap; }
.g-sum-row .won { font-weight: 700; color: #0b5d1a; }
.g-sum-row.open { background: #fff0c8; }
.g-sum-row:hover { outline: 2px solid var(--red); }
.g-total { text-align: center; font: 700 18px var(--font-head); text-transform: uppercase; margin: 14px 0; }
.g-total b { display: inline-block; background: #1d1d1d; color: var(--yellow); padding: 4px 12px; margin: 0 6px; font-size: 22px; }
.g-total small { display: block; margin-top: 6px; font: 400 13px var(--font-body); text-transform: none; color: #a10029; }
.g-final { display: grid; gap: 8px; margin-top: 14px; }
.g-final .btn { padding: 15px; font-size: 16px; }
.g-final .btn.ghost { padding: 11px; font-size: 14px; }

/* ── admin ───────────────────────────────────────────────── */
.nav-count { display: inline-block; background: var(--red); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 11px; line-height: 18px; margin-left: 4px; vertical-align: 2px; }
.notice.todo { background: #fff5e6; border-left: 6px solid var(--soon-orange); }
.todo-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.todo-list a { background: #fff; border: 1px solid #e5d3b5; padding: 6px 10px; font-weight: 700; }
.todo-list small { font-weight: 400; color: var(--muted); margin-left: 4px; }
table.data tbody tr.live-row td { background: #e3f8e9 !important; }
table.data tbody tr.live-row td:first-child { box-shadow: inset 5px 0 0 var(--live-green); font-weight: 700; }
table.data tbody tr.off-row td { color: #777; }
table.data tbody tr.todo-row td { background: #fff5e6 !important; }
.overdue { color: var(--red); font-weight: 700; }
.swatch { display: inline-block; width: 28px; height: 18px; border: 1px solid #999; vertical-align: middle; }
.form input[type=color] { width: 80px; height: 42px; padding: 3px; cursor: pointer; }
.admin .thumb { object-fit: contain; background: #fff; }
/* image library categories */
.lib-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.lib-bar label { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.lib-bar select { margin: 0; width: auto; }
.lib-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-cats button { border: 1px solid #cfcfc6; background: #fff; padding: 6px 12px; font: 700 13px var(--font-body); cursor: pointer; border-radius: 16px; }
.lib-cats button.on { background: var(--dark); color: #fff; border-color: var(--dark); }
.lib-cats small { opacity: .65; margin-left: 2px; }
.lib-item select { width: 100%; margin: 2px 0; padding: 4px; font-size: 12px; }
.picker-body .lib-bar { padding: 0 2px; }
/* CSV import */
.import-types { display: flex; flex-wrap: wrap; gap: 6px; }
.import-types button { border: 2px solid #cfcfc6; background: #fff; padding: 10px 16px; font: 700 14px var(--font-head); text-transform: uppercase; cursor: pointer; }
.import-types button.on { background: var(--red); border-color: var(--red); color: #fff; }
.import-hint { margin: 0; padding: 14px; background: #fff; }
.import-sum { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; }
.import-sum span { background: var(--row-alt); padding: 8px 14px; }
.import-sum b { font: 700 22px var(--font-head); margin-right: 6px; }
.import-sum .add b { color: var(--green); } .import-sum .update b { color: var(--blue); } .import-sum .error b { color: var(--red); }
.import-extras { margin: 0 14px 14px; padding-left: 20px; font-size: 14px; }
.status.imp-add { background: #d7f2d9; } .status.imp-update { background: #dbeafe; } .status.imp-error { background: var(--highlight); color: #a10029; }
.imp-notes { display: block; color: var(--muted); }
table.data tbody tr.imp-row-error td { background: #fdeef1 !important; }

@media (max-width: 720px) {
  .hero-text { display: block; }
  .hero-foot { justify-content: space-between; margin-top: 10px; }
  .hero-circle-link { display: none; }
  /* Four buttons don't fit across a phone, so they sit two by two */
  .quick-links { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .quick-links a { font-size: 14px; padding: 13px 4px; }
  .feature-box { font-size: 15px; padding: 12px; gap: 10px; }
  /* Scroll hint: no dark box — it shows against whatever is behind it */
  .scroll-hint { background: none; padding: 4px 10px; mix-blend-mode: difference; }
  .to-top { display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; right: 12px; bottom: 14px; z-index: 45; width: 48px; height: 48px; border-radius: 50%;
    background: var(--red); color: #fff; border: 0; font: 700 9px var(--font-head); text-transform: uppercase; box-shadow: 0 4px 14px rgba(0,0,0,.3); cursor: pointer;
    opacity: 0; pointer-events: none; transform: translateY(14px); transition: opacity .25s, transform .25s; }
  .to-top.show { opacity: 1; pointer-events: auto; transform: none; }
  .to-top svg { width: 20px; height: 20px; fill: #fff; }
  .edit-page { padding: 12px; }
  .edit-page span { display: none; }
  .venue-tile { min-height: 0; }
  h1.with-emblem .badge { width: 40px; height: 40px; font-size: 12px; }
  .sc-photo-box { grid-template-columns: auto minmax(0, 1fr); }
  .sc-photo-box .btn { grid-column: 1 / -1; }
  .g-sum-row { font-size: 13px; }
  .running { gap: 12px; }
}

/* ── v5.1: paged admin lists, "new" marks, shield history ── */
.nav-count[hidden] { display: none; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 8px 10px; background: #fff; font-size: 14px; color: var(--muted); }
.pager span { margin-right: 6px; }
.pager b { color: var(--ink); }
.pager button { width: 38px; height: 38px; border: 1px solid #cfcfc6; background: #fff; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; }
.pager button:hover:not(:disabled) { background: var(--dark); border-color: var(--dark); color: #fff; }
.pager button:disabled { opacity: .35; cursor: default; }
.new-tag { display: inline-block; background: var(--red); color: #fff; font: 700 10px var(--font-head); letter-spacing: .08em; padding: 3px 7px; border-radius: 3px; margin-left: 8px; vertical-align: 2px; animation: featurePulse 1.6s ease-in-out infinite; }
.list-todo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.list-todo span { flex: 1 1 320px; }

.shield-now { position: relative; overflow: hidden; background: #1d1d1d; color: #fff; padding: 26px 22px; display: grid; justify-items: center; text-align: center; gap: 8px; border-bottom: 5px solid var(--yellow); }
.shield-now .shield-icon { position: absolute; right: -10px; top: -14px; width: 150px; height: 150px; fill: rgba(251,182,26,.16); }
.shield-now small { color: var(--yellow); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.shield-team { display: flex; align-items: center; gap: 14px; color: #fff; }
.shield-team:hover { color: var(--yellow); }
.shield-team .badge { width: 60px; height: 60px; font-size: 17px; background: #3a3a3a; }
.shield-team strong { font: 700 clamp(26px, 5vw, 40px) var(--font-head); text-transform: uppercase; }
.shield-now span { color: #cfcfcf; font-size: 14px; }
.shield-trail { list-style: none; margin: 0; padding: 16px 18px; background: #fff; }
.shield-trail li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 16px; position: relative; padding: 0 0 18px 22px; border-left: 3px solid var(--head-row); margin-left: 6px; }
.shield-trail li:last-child { padding-bottom: 2px; }
.shield-trail li::before { content: ""; position: absolute; left: -9px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--green); }
.shield-trail li.moved::before { border-color: var(--red); background: var(--red); }
.shield-trail li.start::before { border-color: var(--yellow); background: var(--yellow); }
.shield-trail li.none::before { display: none; }
.shield-trail .when { font-weight: 700; font-size: 13px; color: var(--muted); padding-top: 1px; }
.shield-trail a { font-weight: 700; margin-right: 8px; }
.shield-trail p { margin: 4px 0 0; font-size: 14px; }
@media (max-width: 720px) {
  .shield-trail li { grid-template-columns: 1fr; }
  .pager { justify-content: space-between; }
}
.stat b.words { font-size: 22px; line-height: 34px; }

/* ═════════════════════════════════════════════════════════════
   v6 — Rich's fourth round of feedback
   ═════════════════════════════════════════════════════════════ */
/* ── branding: every colour below can be changed under Admin → Branding ── */
:root {
  --nav-home: var(--brown);     --nav-home-ink: #fff;
  --nav-comps-ink: #1b0e06;     /* competitions use --yellow */
  --nav-fixtures-ink: #ffe86a;  /* fixtures use --green */
  --nav-league: #fff;           --nav-league-ink: #000;
  --nav-login: var(--red);      --nav-login-ink: #fff;
  /* Section headers: red unless the page's section has its own colour (below). */
  --accent: var(--red);         --accent-ink: #fff;
}
/* Each part of the site takes its menu button's colour for its headers. */
.section-colors #view[data-section="competitions"] { --accent: var(--yellow); --accent-ink: var(--nav-comps-ink); }
.section-colors #view[data-section="fixtures"] { --accent: var(--green); --accent-ink: #fff; }
.section-colors #view[data-section="league"] { --accent: var(--nav-league); --accent-ink: var(--nav-league-ink); }
.section-colors #view[data-section="login"] { --accent: var(--nav-login); --accent-ink: var(--nav-login-ink); }
/* A white (League) header needs a line under it to stand apart from the white table below. */
.section-colors #view[data-section="league"] .panel-head:not(.blue):not(.yellow) { box-shadow: inset 0 -3px 0 var(--ink), inset 0 0 0 1px var(--head-row); }
.section-colors #view[data-section="league"] .tag { box-shadow: inset 0 -3px 0 var(--ink); }
/* Page layout: see the v7 block at the end (a sidebar on the left; full-width pages). */

/* ── loading screen: black, with the logo pulsing in the middle ── */
.boot { position: fixed; inset: 0; z-index: 200; background: #000; display: grid; place-items: center; transition: opacity .35s ease, visibility .35s; }
.boot img { width: min(180px, 42vw); max-height: 42vh; object-fit: contain; animation: bootPulse 1.3s ease-in-out infinite; }
.boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes bootPulse { 0%, 100% { transform: scale(.92); opacity: .65; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .boot img { animation: none; } }

/* ── branding form: optional colour pickers ── */
.color-field { display: flex; align-items: center; gap: 12px; margin-top: 5px; }
.color-field input[type="color"] { width: 64px; height: 40px; padding: 2px; margin: 0; flex: none; }
.color-field .check { margin: 0; font-weight: 400; }

/* ── handicaps: up / down since last year's review ── */
.hc-move { display: inline-block; margin-left: 8px; font: 700 12px var(--font-head); white-space: nowrap; }
.hc-move.up { color: #0b8a12; }
.hc-move.down { color: #d1002f; }
.hc-key { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.hc-key .hc-move { margin: 0 4px 0 10px; font-size: 14px; }
.hc-key .hc-move:first-child { margin-left: 0; }
.hc-edit { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.hc-edit input { width: 84px; margin: 0; text-align: center; font-weight: 700; }

/* ── competition entry form ── */
.entry-steps { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.entry-steps li { display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid #cfcfc6; background: #fff; padding: 10px 4px; font: 700 13px var(--font-head); text-transform: uppercase; text-align: center; }
.entry-steps b { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--head-row); display: grid; place-items: center; font-size: 13px; }
.entry-steps li.done { border-color: var(--green); background: #e6f7e9; }
.entry-steps li.done b { background: var(--green); color: #fff; }
.entry-steps li.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.entry-steps li.on b { background: var(--yellow); color: #1b0e06; }
.entry-box { background: #fff; padding: 20px; }
.entry-box .form { padding: 0; background: none; }
.entry-box .g-h span { background: var(--ink); }
.entry-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.entry-comps { display: grid; gap: 8px; }
.entry-comp { border: 2px solid var(--head-row); background: #fff; }
.entry-comp.on { border-color: var(--green); background: #f3fbf4; }
.entry-comp.off { opacity: .6; }
.entry-pick { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; margin: 0; cursor: pointer; font-weight: 400; }
.entry-comp.off .entry-pick { cursor: not-allowed; }
.entry-pick input { width: 22px; height: 22px; margin: 0; }
.entry-pick strong { display: block; font: 700 17px var(--font-head); text-transform: uppercase; }
.entry-pick small { display: block; color: var(--muted); }
.entry-pick em { display: block; font-style: normal; font-weight: 700; color: #a10029; font-size: 13px; }
.entry-fee { font: 700 16px var(--font-head); background: var(--yellow); color: #1b0e06; padding: 5px 10px; white-space: nowrap; }
.entry-partner { display: block; padding: 0 14px 14px 48px; margin: 0; }
.entry-check td { padding: 12px 10px; }
.entry-check tr.hl td { font: 700 17px var(--font-head); text-transform: uppercase; background: var(--head-row); }
.entry-ok { background: #d7f2d9; padding: 12px 14px; font-weight: 700; margin: 0 0 12px; }
.entry-done ul { margin: 0 0 16px; padding-left: 20px; }
.entry-pay { border: 2px solid var(--ink); padding: 16px; margin-bottom: 14px; }
.entry-pay h4 { margin-bottom: 10px; font-size: 18px; }
.entry-pay p { margin: 0 0 6px; white-space: pre-line; }
.entry-deadline { background: #fff5e6; border-left: 6px solid var(--soon-orange); padding: 12px 14px; }
.enter-bar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; background: var(--ink); color: #fff; padding: 14px 16px; margin-bottom: 18px; }
.enter-bar b { color: var(--yellow); text-transform: uppercase; font-family: var(--font-head); }
.enter-bar span { margin-left: auto; font-weight: 700; background: var(--yellow); color: #1b0e06; padding: 6px 12px; }
.enter-bar:hover { color: #fff; filter: brightness(1.15); }
.comp-actions { margin-top: 12px; }
.btn.ghost.light { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.btn.ghost.light:hover { background: rgba(255,255,255,.26); color: #fff; }

/* ── live draw ── */
.live-ctl { background: #111; color: #fff; padding: 16px; }
.live-ctl p { margin: 0 0 10px; }
.live-ctl .muted { color: #bbb; }
.live-last { font-size: 18px; border-left: 5px solid var(--yellow); padding-left: 12px; }
.live-next { font-size: 17px; padding: 14px 22px; }
.live-setup p { margin-top: 0; }
.live-draw-note { display: block; background: #111; color: #fff; padding: 12px 14px; margin-bottom: 16px; font-weight: 700; border-left: 6px solid var(--red); }
.live-draw-note:hover { color: var(--yellow); }
.live-draw-note .live-dot { margin-right: 8px; }
.draw-hero { background: #111; color: #fff; margin-top: -5px; border-bottom: 5px solid var(--yellow); padding: 26px 0 30px; }
.draw-hero.live { border-bottom-color: var(--red); }
.draw-hero .breadcrumb { color: var(--ink); }
.draw-hero h1 { margin: 4px 0 10px; font-size: clamp(30px, 5vw, 50px); }
.draw-state { margin: 0; font-size: 17px; }
.draw-state.done { color: #9be3a4; font-weight: 700; }
.draw-state .live-dot { margin-right: 8px; }
.draw-people { margin: 8px 0 0; color: #bbb; font-size: 14px; }
.draw-people b { color: #fff; }
.draw-body { padding-top: 6px; padding-bottom: 30px; }
.draw-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.draw-grid > div:only-child { grid-column: 1 / -1; }
.ties { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.ties li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px minmax(0, 1fr); gap: 10px; align-items: center; background: #fff; padding: 12px 14px; border-left: 5px solid var(--yellow); font-size: 16px; }
.ties li b:first-of-type { text-align: right; }
.ties li i { font-style: normal; color: var(--muted); text-align: center; font-weight: 700; }
.ties li em { font-style: normal; color: var(--muted); font-size: 14px; }
.ties li.waiting { display: block; border-left-color: var(--head-row); color: var(--muted); }
.ties li.new { animation: tieIn 1.1s ease-out; }
.tie-no { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 14px var(--font-head); }
@keyframes tieIn { 0% { transform: scale(.92); opacity: 0; background: var(--yellow); } 55% { transform: scale(1.03); opacity: 1; background: #fff3cf; } 100% { transform: none; background: #fff; } }
.hat { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.hat span { background: #fff; border: 1px solid #d8d8cf; padding: 6px 10px; font-weight: 700; font-size: 14px; }
.strip-card.is-draw { display: flex; flex-direction: column; border-color: var(--yellow); }
.sc-draw { flex: 1; display: grid; align-content: center; justify-items: center; gap: 6px; text-align: center; padding: 8px 0 4px; }
.sc-draw > b { font: 700 13px var(--font-head); text-transform: uppercase; color: var(--yellow); letter-spacing: .06em; }
.sc-draw p { margin: 0; font-weight: 700; font-size: 13px; line-height: 1.3; }

/* ── match night photos ── */
.mn-photos { padding: 14px; display: grid; gap: 14px; }
.mn-manage { display: grid; gap: 12px; }
.mn-manage .gal-thumb img { width: 168px; height: 126px; cursor: zoom-in; }
.mn-manage .btn-row { align-items: center; }
label.btn.busy { opacity: .6; pointer-events: none; }
label.btn.busy::after { content: " …uploading"; }
.mn-week h3 { margin-top: 0; }
.mn-match { background: #fff; padding: 12px; margin-bottom: 12px; }
.mn-match > a { display: block; font: 700 16px var(--font-head); text-transform: uppercase; margin-bottom: 10px; }

/* ── season archive ── */
.season-block { background: #fff; padding: 20px; display: grid; gap: 16px; }
.season-block h2 { display: flex; align-items: center; gap: 12px; font-size: 26px; border-bottom: 3px solid var(--ink); padding-bottom: 10px; }
.season-leagues { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.season-league { background: var(--cream); padding: 14px; }
.season-league h4 { font-size: 17px; margin-bottom: 10px; }
.season-league h4 .badge { width: 34px; height: 34px; font-size: 11px; }
.season-league dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 12px; }
.season-league dt { font-weight: 700; color: var(--muted); font-size: 13px; text-transform: uppercase; }
.season-league dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.inline-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.season-links { display: flex; flex-wrap: wrap; gap: 6px; }
.season-links a { background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; padding: 6px 10px; }
.season-links a:hover { background: var(--red); color: #fff; }
.season-cups { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.season-cups > b { font-family: var(--font-head); text-transform: uppercase; margin-right: 4px; }
.season-cups a { border: 1px solid #d8d8cf; padding: 6px 10px; font-weight: 700; font-size: 14px; }
.season-cups a span { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }

@media (max-width: 700px) {
  .entry-steps li { flex-direction: column; gap: 4px; font-size: 11px; padding: 8px 2px; }
  .entry-box { padding: 14px; }
  .entry-pick { grid-template-columns: auto 1fr; }
  .entry-fee { grid-column: 2; justify-self: start; }
  .entry-partner { padding-left: 14px; }
  .entry-nav .btn { flex: 1; padding-left: 8px; padding-right: 8px; }
  .enter-bar span { margin-left: 0; }
  .draw-grid { grid-template-columns: 1fr; }
  .ties li { grid-template-columns: 30px 1fr; font-size: 15px; }
  .ties li b:first-of-type { text-align: left; }
  .ties li i { display: none; }
  .ties li b:last-of-type, .ties li em { grid-column: 2; }
  .ties li b + i + b::before { content: "v "; color: var(--muted); font-weight: 400; }
  .hc-edit input { width: 70px; }
  .season-block { padding: 14px; }
}


/* ═════════════════════════════════════════════════════════════
   v7 — Rich's fifth round of feedback
   ═════════════════════════════════════════════════════════════ */
/* The banner headline lines up with the text under it (its dark box used to push it 12px to the right). */
.hero-text h2 { margin-left: -12px; }

/* ── menu: News button, slightly smaller buttons when logged in, your name under My Team ── */
/* News is the blue ball: every menu button is now a different snooker ball (brown, yellow, green, white, blue, red). */
:root { --nav-news: var(--blue); --nav-news-ink: #fff; }
.nav-news { background: var(--nav-news) !important; color: var(--nav-news-ink) !important; }
.section-colors #view[data-section="news"] { --accent: var(--nav-news); --accent-ink: var(--nav-news-ink); }
.nav-who { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1; }
.nav-who b { font-weight: inherit; }
.nav-who small { font: 600 10px/1 var(--font-body); text-transform: none; letter-spacing: 0; opacity: .95; max-width: 138px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1001px) {
  .main-nav.tight a, .main-nav.tight button { font-size: calc(var(--fs-nav, 18px) - 1px); padding: 0 13px; }
  .main-nav.tight-2 a, .main-nav.tight-2 button { font-size: calc(var(--fs-nav, 18px) - 2px); padding: 0 10px; }
  .main-nav.tight-2 .nav-live-btn::before { margin-right: 6px; }
}
@media (max-width: 1000px) { .nav-who { flex-direction: row; align-items: baseline; gap: 10px; } .nav-who small { max-width: none; font-size: 12px; } }

/* ── announcements ticker (very top of the home page) ── */
.ticker { display: flex; align-items: stretch; height: 34px; background: #111; color: #fff; font-size: 13px; border-bottom: 1px solid #333; }
.ticker-label { flex: none; display: flex; align-items: center; padding: 0 12px; background: var(--red); font: 700 12px var(--font-head); text-transform: uppercase; letter-spacing: .05em; }
.ticker-view { flex: 1; min-width: 0; overflow: hidden; }
.ticker-track { display: flex; width: max-content; height: 100%; animation: tickerMove 40s linear infinite; }
.ticker:hover .ticker-track, .ticker.paused .ticker-track { animation-play-state: paused; }
/* Each copy of the list is at least a screen wide, so the loop never shows a gap. */
.ticker-set { flex: none; display: flex; align-items: center; justify-content: space-around; min-width: 100vw; }
.ticker-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 26px; white-space: nowrap; font-weight: 600; color: #fff; }
.ticker-item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.ticker-item i { font-style: normal; color: var(--yellow); }
a.ticker-item:hover { color: var(--yellow); text-decoration: underline; }
.ticker-stop { flex: none; width: 40px; border: 0; border-left: 1px solid #333; background: #222; cursor: pointer; display: grid; place-items: center; }
.ticker-stop:hover { background: #333; }
.ticker-stop span { width: 10px; height: 12px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.ticker.paused .ticker-stop span { width: 0; height: 0; border: 7px solid transparent; border-left: 11px solid #fff; border-right: 0; }
@keyframes tickerMove { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } .ticker-view { overflow-x: auto; } .ticker-set[aria-hidden] { display: none; } }
@media (max-width: 700px) { .ticker-label { display: none; } .ticker-item { padding: 0 18px; } }

/* ── page layout per section (Admin → Branding → Page layout) ── */
#shell { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#side:empty { display: none; }
@media (min-width: 1001px) {
  /* A page with no side boxes of its own, in a section set to "Right sidebar": the standard boxes sit beside it. */
  #shell.has-side { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar); gap: 34px; align-items: start; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
  #shell.has-side > main .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  #shell.has-side > #side { padding: 36px 0 60px; }
  .sidebar-left #shell.has-side { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .sidebar-left #shell.has-side > #side { order: -1; }
  .sidebar-left .layout { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .sidebar-left .layout > .sidebar { order: -1; }
  /* "Full width": a page's own side boxes move underneath it, in a row. */
  #view[data-layout="full"] .layout { grid-template-columns: 1fr; }
  #view[data-layout="full"] .layout > .sidebar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; align-items: start; }
  #view[data-layout="full"] .layout > .sidebar > * + * { margin-top: 0; }
}
@media (max-width: 1000px) {
  #shell.has-side > main { padding-bottom: 24px; }
  #shell.has-side > #side { padding: 0 16px 50px; }
}

/* ── side column: latest results; the all-results page ── */
.res-list { display: grid; }
.res-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 3px 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--head-row); font-size: 14px; line-height: 1.25; }
.res-mini:first-child { border-top: 0; }
.res-mini:hover { background: var(--row-alt); color: inherit; }
.res-mini small { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 11px; }
.res-mini span:first-of-type { text-align: right; }
.res-mini b { font: 700 14px var(--font-head); background: var(--ink); color: #fff; padding: 3px 8px; white-space: nowrap; }
.res-mini .won { font-weight: 700; }
.tag-link.on { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (min-width: 701px) {
  .res-list.wide .res-mini { grid-template-columns: 150px minmax(0, 1fr) auto minmax(0, 1fr); padding: 11px 14px; font-size: 15px; }
  .res-list.wide .res-mini small { grid-column: 1; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; }
}

/* ── handicaps: green for scratch and minus, red for plus; jump to a team ── */
.hc-val { display: inline-block; min-width: 46px; padding: 2px 8px; border-radius: 4px; font-weight: 700; text-align: center; }
.hc-val.minus { background: #d3f0d6; color: #07500d; }
.hc-val.plus { background: #fcdbe2; color: #a10029; }
.hc-move.up, .hc-move.down { color: #444; }
.hc-bar { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: end; margin-bottom: 4px; }
.hc-bar label { font-weight: 700; }
.hc-bar select { display: block; width: auto; min-width: 240px; margin: 4px 0 0; }
.hc-bar .hc-key { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.hc-bar .hc-key .hc-val { font-size: 12px; min-width: 0; }
.hc-bar .hc-key .hc-val.plus, .hc-bar .hc-key .hc-move { margin-left: 10px; }
.hc-team { scroll-margin-top: 14px; }
.hc-team.flash > .panel { animation: hcFlash 1.8s ease-out; }
@keyframes hcFlash { 0%, 45% { box-shadow: 0 0 0 5px var(--ink); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ── news page: columns per category (Admin → News categories & layout) ── */
@media (min-width: 1001px) {
  .news-cols { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
  /* Fewer, wider columns get wide pictures instead of giant squares. */
  .news-cols.few .card img, .news-cols.few .card .ph { aspect-ratio: 16 / 9; }
}

/* ── handicap scorecards: running total ── */
.sc-totals { margin: 12px 0 0; text-align: center; font-weight: 700; }
.sc-totals b { font-size: 18px; font-family: var(--font-head); }
.sc-totals small { display: block; font-weight: 400; color: var(--muted); }
.sc-total-row td { background: var(--head-row); font-weight: 700; padding: 9px 8px; }
.sc-total-row .sc-points b { font: 700 18px var(--font-head); }

/* ── "add as many as you like" fields (past teams) ── */
.list-field { display: grid; gap: 8px; justify-items: start; margin-top: 5px; }
.list-field [data-list-rows] { display: grid; gap: 6px; width: 100%; }
.list-row { display: flex; gap: 6px; }
.list-row input { flex: 1; margin: 0; }
.list-row button { flex: none; width: 42px; border: 0; background: var(--head-row); font-size: 20px; line-height: 1; cursor: pointer; }
.list-row button:hover { background: var(--red); color: #fff; }

/* ── master admin: permissions grid, activity log ── */
.perm-table td small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.perm-table input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }
.perm-table thead th.num { white-space: normal; font-size: 12px; line-height: 1.2; min-width: 84px; }
.perm-notes p { margin: 0 0 8px; }
.status.act-added { background: #d7f2d9; } .status.act-changed { background: #fff0c8; } .status.act-removed { background: var(--highlight); color: #a10029; }

/* ── maintenance mode: the holding page visitors see ── */
.holding { min-height: 62vh; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding: 60px 20px; background: #111; color: #fff; }
.holding img { width: 120px; }
.holding h1 { margin: 0; }
.holding p { margin: 0; max-width: 540px; font-size: 17px; }
body.maintenance .main-nav > :not(.nav-login), body.maintenance .nav-search-m { display: none; }
@media (max-width: 760px) { #admin-body .perm-table td.perm-part { display: block; text-align: left; background: var(--head-row); } }

/* ═════════════════════════════════════════════════════════════
   v8 — Rich's sixth round of feedback
   ═════════════════════════════════════════════════════════════ */
:root {
  /* The snooker balls (scoreboard, 404 page, confetti). */
  --ball-red: #d4092f; --ball-yellow: #f6c21c; --ball-green: #0b8a12; --ball-brown: #6b3a2a;
  --ball-blue: #0a84dc; --ball-pink: #ff86b7; --ball-black: #141414; --ball-white: #f7f3e6;
  --baize: #0d6b25; --baize-dark: #07461a; --rail: #4b2019;
}

/* ── menu: Log out is an icon (the word shows in the phone menu) ── */
.nav-logout svg { width: 21px; height: 21px; fill: #fff; }
.nav-logout span { display: none; }
@media (max-width: 720px) { .nav-logout { gap: 10px; } .nav-logout span { display: inline; } }

/* ── notifications with the player's photo ── */
.live-pop.with-face .live-pop-body { display: flex; align-items: center; gap: 12px; padding-left: 12px; }
.live-pop.with-face::before { display: none; }
.live-pop-face { width: 38px; height: 38px; flex: none; border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid #fff; }
.live-pop-face.icon { object-fit: contain; padding: 4px; background: #111; border-color: #111; }

/* ── trophies ── */
.trophy { object-fit: contain; flex: none; }
.trophy.placeholder { opacity: .9; }
.trophy.tiny { display: inline-block; width: 22px; height: 26px; margin-right: 8px; vertical-align: middle; }
.trophy.inline { display: inline-block; width: 34px; height: 42px; margin-right: 12px; vertical-align: middle; }
.title-trophy { display: flex; align-items: center; gap: 18px; }
.title-trophy > .trophy { width: 84px; height: 104px; }
.title-trophy h1 { margin-bottom: 14px; }
.comp-prize { display: flex; align-items: flex-end; gap: 18px; }
.comp-trophy { width: 118px; height: 148px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)); }
.card-pic { position: relative; }
.card-trophy { position: absolute; right: 10px; bottom: 24px; width: 54px; height: 68px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); margin: 0 !important; aspect-ratio: auto !important; }
.card-pic > .ph + .card-trophy { right: 50%; bottom: 50%; transform: translate(50%, 44%); width: 42%; height: 58%; filter: none; }
.trophy-ph { display: grid; place-items: center; background: #fff; }
.trophy-ph .trophy { width: 70%; height: 80%; }
@media (max-width: 720px) {
  .title-trophy > .trophy { width: 54px; height: 68px; }
  .comp-trophy { width: 78px; height: 98px; }
}

/* ── home: feature box with announcements ── */
.feature-new.still { animation: none; }
.feature-box.scrolling { padding-right: 0; overflow: hidden; }
.feature-box.scrolling .ticker-view { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.feature-box.scrolling .ticker-track { height: auto; }
.feature-box.scrolling:hover .ticker-track, .feature-box.scrolling:focus-within .ticker-track { animation-play-state: paused; }
.feature-box.scrolling .ticker-set { min-width: 0; justify-content: flex-start; }
.feature-box.scrolling .ticker-item { color: inherit; font: inherit; gap: 10px; padding: 0 30px; }
.feature-box.scrolling .ticker-item::before { background: currentColor; opacity: .55; }
.feature-box.scrolling .ticker-item i { color: inherit; }
.feature-box.scrolling a.ticker-item:hover { color: inherit; text-decoration: underline; }
.feature-box.scrolling .ticker-item .feature-new { font-size: 11px; padding: 3px 8px; }
.feature-box.rotating { display: grid; padding: 0; }
.feature-item { grid-area: 1 / 1; display: flex; align-items: center; gap: 14px; padding: 13px 16px; color: inherit; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s, transform .45s, visibility .45s; }
.feature-item.on { opacity: 1; visibility: visible; transform: none; }
a.feature-item:hover { color: inherit; filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) {
  .feature-item { transition: none; transform: none; }
  .feature-box.scrolling .ticker-view { overflow-x: auto; }
}
@media (max-width: 720px) { .feature-item { padding: 12px; gap: 10px; } .feature-box.scrolling .ticker-item { padding: 0 20px; } }

/* ── home: key dates ── */
.key-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); background: #fff; overflow: hidden; }
.key-date { display: flex; align-items: flex-start; gap: 12px; background: #fff; padding: 14px 12px; min-width: 0; box-shadow: 1px 1px 0 var(--head-row); }
a.key-date:hover { color: inherit; background: #fffbea; }
.key-date time { flex: none; width: 58px; display: grid; justify-items: center; background: var(--ink); color: #fff; padding: 7px 4px 6px; line-height: 1; }
.key-date time b { font: 700 28px/1 var(--font-head); }
.key-date time span { font: 700 13px/1.3 var(--font-head); text-transform: uppercase; color: var(--yellow); }
.key-date time small { font-size: 11px; opacity: .75; margin-top: 3px; }
.key-date > div { min-width: 0; flex: 1; }
.key-date strong { display: block; font: 700 15px/1.25 var(--font-head); }
.key-date div small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.key-date em { display: inline-block; margin-top: 6px; font-style: normal; font-size: 11px; font-weight: 700; background: var(--head-row); padding: 2px 8px; border-radius: 20px; }
.key-date em.soon { background: var(--red); color: #fff; }
.kd-trophy { width: 30px; height: 38px; align-self: center; }
.cal-ev.key { border-left-color: var(--ink); background: #ececec; font-weight: 700; }
.cal-key i.key { background: var(--ink); }
.cal-row.key { border-left-color: var(--ink); }

/* ── formatted text (rules, info pages, minutes, sponsor pages) ── */
.rich > :first-child { margin-top: 0; }
.rich > :last-child { margin-bottom: 0; }
.rich h2 { font-size: calc(var(--fs-h2, 22px) + 2px); margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 3px solid var(--ink); scroll-margin-top: 16px; }
.rich h3 { font-size: 18px; margin: 24px 0 10px; scroll-margin-top: 16px; }
.rich h4 { font-size: 15px; margin: 18px 0 8px; }
.rich p { margin: 0 0 14px; max-width: 76ch; }
.rich .lead { font-size: 1.1em; font-weight: 600; }
.rich ul, .rich ol { margin: 0 0 14px; padding-left: 24px; max-width: 76ch; }
.rich li { margin: 5px 0; padding-left: 2px; }
.rich li > ul, .rich li > ol { margin: 5px 0 6px; }
.rich ul { list-style: none; }
.rich ul > li { position: relative; }
.rich ul > li::before { content: ""; position: absolute; left: -17px; top: .58em; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.rich ul ul > li::before { background: none; border: 2px solid var(--ink); width: 7px; height: 7px; }
.rich ul ul ul > li::before { border-radius: 0; border-width: 0 0 2px; width: 8px; height: 0; top: .75em; }
.rich ol > li::marker { font-weight: 700; font-family: var(--font-head); }
.rich a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.rich blockquote { margin: 0 0 14px; padding: 10px 16px; background: var(--cream); border-left: 5px solid var(--yellow); font-style: italic; max-width: 76ch; }
.rich hr { border: 0; border-top: 2px solid var(--head-row); margin: 22px 0; }
.rich .table-scroll { margin: 0 0 16px; }
table.rich-table { width: auto; min-width: min(100%, 360px); border: 1px solid var(--head-row); }
table.rich-table th { background: var(--ink); color: #fff; text-align: left; white-space: normal; }
table.rich-table td { white-space: normal; vertical-align: top; }
table.rich-table td:first-child { font-weight: 700; }

/* ── rules page ── */
.rule-tabs { display: flex; flex-wrap: wrap; gap: 0; margin: -8px 0 22px; border-bottom: 4px solid var(--ink); }
.rule-tabs a { padding: 11px 18px; font: 700 16px var(--font-head); text-transform: uppercase; background: #fff; border: 1px solid var(--head-row); border-bottom: 0; margin-right: 4px; }
.rule-tabs a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.rules-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.rules-layout.plain { grid-template-columns: minmax(0, 1fr); }
.rules-toc { position: sticky; top: 16px; background: #fff; padding: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.rules-toc h4 { font-size: 14px; margin-bottom: 10px; }
.rules-toc ol { list-style: none; margin: 0 0 14px; padding: 0; font-size: 14px; }
.rules-toc li a { display: block; padding: 6px 0 6px 10px; border-left: 3px solid var(--head-row); font-weight: 700; }
.rules-toc li.l2 a { padding-left: 22px; font-weight: 400; }
.rules-toc li a:hover { border-left-color: var(--red); }
.rules-body { padding: 26px 30px; }
@media (max-width: 900px) {
  .rules-layout { grid-template-columns: minmax(0, 1fr); }
  .rules-toc { position: static; max-height: none; }
  .rules-body { padding: 18px 16px; }
  .rule-tabs a { padding: 10px 12px; font-size: 14px; }
}
@media print {
  .site-header, .site-footer, #ticker, .rules-toc, .rule-tabs, .breadcrumb, .edit-page, .to-top, .demo-banner, .live-pops { display: none !important; }
  body { background: #fff; } .rules-layout { display: block; } .rules-body { padding: 0; }
}

/* ── meetings ── */
.meet-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.meet-card { background: #fff; }
.meet-card.next { padding: 22px 24px; border-top: 6px solid var(--ink); }
.meet-when { margin: 0 0 6px; font: 700 13px var(--font-head); text-transform: uppercase; color: var(--red); }
.meet-card.next h2 { font-size: 26px; }
.meet-date { margin: 8px 0 14px; font: 700 18px/1.3 var(--font-head); }
.meet-date span { display: block; font: 400 15px var(--font-body); color: var(--muted); margin-top: 2px; }
.meet-card.next .rich { margin-bottom: 14px; }
.meet-year { margin: 6px 0 10px; font-size: 30px; color: var(--muted); }
details.meet-card { margin-bottom: 8px; }
details.meet-card summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 16px; cursor: pointer; list-style: none; }
details.meet-card summary::-webkit-details-marker { display: none; }
details.meet-card summary::after { content: "+"; margin-left: auto; font: 700 22px/1 var(--font-head); }
details.meet-card[open] summary::after { content: "–"; }
details.meet-card summary strong { font: 700 17px var(--font-head); text-transform: uppercase; }
details.meet-card summary small { color: var(--muted); font-size: 13px; }
details.meet-card summary:hover { background: #fffbea; }
.meet-body { padding: 4px 18px 20px; border-top: 1px solid var(--head-row); }
.meet-body h4 { margin: 18px 0 10px; }
.meet-summary { padding-top: 14px; }

/* ── sadly no longer with us ── */
.mem-hero { background: #161616; color: #fff; margin-top: -5px; padding: 30px 0 38px; border-bottom: 5px solid #8c8c8c; }
.mem-hero .breadcrumb { color: var(--ink); }
.mem-hero h1 { font-size: clamp(30px, 5vw, 50px); margin: 6px 0 12px; }
.mem-hero p { margin: 0; max-width: 62ch; color: #d6d6d6; font-size: 17px; }
.mem-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; margin-top: 30px; }
.mem-card { display: flex; gap: 18px; background: #fff; padding: 20px; border-left: 5px solid #161616; }
.mem-card img { width: 96px; height: 96px; flex: none; border-radius: 50%; object-fit: cover; filter: grayscale(1); background: #cfcfcf; }
.mem-card img.blank { opacity: .55; }
.mem-card h2 { font-size: 21px; }
.mem-years { margin: 4px 0 8px; font-weight: 700; color: var(--muted); font-size: 14px; }
.mem-words { margin: 0 0 10px; font-size: 15px; }
.mem-link { font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mem-banner { background: #161616; color: #fff; padding: 18px 22px; border-left: 6px solid #8c8c8c; }
.mem-banner p { margin: 0 0 8px; max-width: 70ch; color: #e2e2e2; }
.mem-banner .mem-banner-h { font: 700 20px var(--font-head); text-transform: uppercase; color: #fff; }
.mem-banner-h span { font-weight: 400; color: #bdbdbd; margin-left: 10px; }
.mem-banner a { font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mem-banner a:hover { color: #fff; }
.player-card.in-memory .player-photo { filter: grayscale(1); }
.player-status { vertical-align: middle; margin-left: 10px; font-family: var(--font-body); letter-spacing: 0; }
@media (max-width: 720px) { .mem-list { grid-template-columns: 1fr; } .mem-card { padding: 16px; gap: 14px; } .mem-card img { width: 68px; height: 68px; } }

/* ── sponsor page ── */
.sponsor-head { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; background: #111; color: #fff; padding: 26px; }
.sponsor-logo { width: min(368px, 100%); height: 86px; background: #000; display: grid; place-items: center; }
.sponsor-logo img { width: 100%; height: 100%; object-fit: contain; }
.sponsor-kicker { margin: 0 0 4px; color: var(--yellow); font-weight: 700; font-size: 13px; }
.sponsor-head h1 { margin: 0 0 14px; }
.sponsor-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; align-items: start; }
.sponsor-body aside { display: grid; gap: 16px; }
.sponsor-body.solo { grid-template-columns: minmax(0, 1fr); }
.sponsor-body .facts { grid-template-columns: 1fr; padding: 18px; }
.sponsor-photo { width: 100%; }
.sponsors.left { justify-content: flex-start; margin: 0; padding: 0; max-width: none; }
@media (max-width: 900px) { .sponsor-body { grid-template-columns: 1fr; } .sponsor-head { padding: 18px; } }

/* ── 404: "Foul. Four away." ── */
.nf { margin-top: -5px; background: var(--baize) radial-gradient(ellipse at 50% 0%, #13883250 0%, transparent 60%); color: #fff; border-bottom: 14px solid var(--rail); position: relative; overflow: hidden; padding: 0 0 54px; min-height: 62vh; }
.nf::before { content: ""; position: absolute; inset: 0 0 auto; height: 14px; background: var(--rail); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.nf-table { position: relative; height: 150px; max-width: var(--wrap); margin: 0 auto; }
.nf-pocket { position: absolute; right: 26px; top: 6px; width: 58px; height: 58px; border-radius: 50%; background: #050505; box-shadow: inset 0 6px 10px rgba(0,0,0,.9), 0 0 0 5px var(--rail); }
.nf-ball { position: absolute; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset -5px -6px 9px rgba(0,0,0,.4), 3px 5px 6px rgba(0,0,0,.35); }
.nf-ball::after { content: ""; position: absolute; left: 7px; top: 5px; width: 8px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.75); }
.nf-ball.white { background: var(--ball-white); left: 12%; top: 96px; animation: nfRoll 2.6s cubic-bezier(.25,.6,.3,1) .5s forwards; }
/* The cue ball rolls from where it lies into the corner pocket — and that's the foul. */
.nf-ball.red { background: var(--ball-red); }
.nf-ball.r1 { left: 30%; top: 112px; } .nf-ball.r2 { left: 55%; top: 104px; }
.nf-ball.black { background: var(--ball-black); left: 74%; top: 112px; }
@keyframes nfRoll { 80% { opacity: 1; left: calc(100% - 74px); top: 24px; transform: none; } 100% { opacity: 0; left: calc(100% - 70px); top: 20px; transform: scale(.5); } }
.nf-body { position: relative; }
.nf-code { margin: 0; display: flex; align-items: center; gap: 10px; font: 700 clamp(88px, 17vw, 190px)/.9 var(--font-head); color: var(--ball-white); letter-spacing: -.03em; text-shadow: 0 8px 0 var(--baize-dark); }
.nf-zero { width: .62em; height: .62em; border-radius: 50%; background: #050505; box-shadow: inset 0 .08em .12em rgba(0,0,0,.9), 0 0 0 .055em var(--rail), 0 .1em 0 .05em var(--baize-dark); margin: 0 .04em; }
.nf h1 { font-size: clamp(30px, 5vw, 52px); margin: 22px 0 10px; color: var(--yellow); }
.nf-lead { margin: 0 0 24px; max-width: 56ch; font-size: 17px; color: #e9f3ea; overflow-wrap: anywhere; }
.nf .btn.secondary { background: var(--baize-dark); }
.nf .btn.ghost { background: var(--ball-white); }
@media (prefers-reduced-motion: reduce) { .nf-ball.white { animation: none; } }
@media (max-width: 720px) { .nf-table { height: 120px; } .nf-pocket { right: 14px; width: 46px; height: 46px; } .nf-ball { width: 24px; height: 24px; } .nf-ball.white { top: 78px; } .nf-ball.r1 { top: 90px; } .nf-ball.r2 { top: 84px; } .nf-ball.black { top: 92px; }
  @keyframes nfRoll { 80% { opacity: 1; left: calc(100% - 52px); top: 18px; transform: none; } 100% { opacity: 0; left: calc(100% - 49px); top: 16px; transform: scale(.5); } } }

/* ── snooker balls (scoreboard, control pad) ── */
.ball { display: inline-block; width: 16px; height: 16px; border-radius: 50%; flex: none; vertical-align: middle; box-shadow: inset -2px -3px 4px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.35); background: var(--ball-red); }
.b-red { background: var(--ball-red); } .b-yellow { background: var(--ball-yellow); } .b-green { background: var(--ball-green); } .b-brown { background: var(--ball-brown); }
.b-blue { background: var(--ball-blue); } .b-pink { background: var(--ball-pink); } .b-black { background: var(--ball-black); }

/* ── live scoreboard (public) ── */
.sb { margin-top: -5px; background: #111; color: #fff; padding: 22px 0 30px; border-bottom: 5px solid var(--yellow); }
.sb .breadcrumb { color: var(--ink); }
.sb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 18px; }
.sb-head h1 { margin: 0; font-size: clamp(22px, 3.4vw, 34px); }
.sb-head p { margin: 4px 0 0; color: #c9c9c9; font-size: 14px; }
.sb-head > div { flex: 1; min-width: 220px; }
.sb-trophy { width: 46px; height: 58px; }
.sb-table { background: var(--baize) radial-gradient(ellipse at 50% 0%, #17953a66 0%, transparent 65%); border: 12px solid var(--rail); border-radius: 10px; padding: 26px 22px 20px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), inset 0 10px 30px rgba(0,0,0,.28); }
.sb-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; }
.sb-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 18px; position: relative; padding-bottom: 34px; }
.sb-side.b { grid-template-columns: auto minmax(0, 1fr); }
.sb-side.b .sb-who { order: 2; flex-direction: row-reverse; text-align: right; }
.sb-side.b .sb-who small { justify-self: end; }
.sb-who { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; color: #fff; min-width: 0; }
a.sb-who:hover { color: var(--yellow); }
.sb-side.b .sb-who { grid-template-columns: minmax(0, 1fr) auto; }
.sb-side.b .sb-face { grid-column: 2; grid-row: 1 / 3; }
.sb-side.b .sb-name, .sb-side.b .sb-who small { grid-column: 1; text-align: right; }
.sb-face { grid-row: 1 / 3; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #fff; border: 3px solid rgba(255,255,255,.85); }
.sb-name { align-self: end; font: 700 clamp(18px, 2.4vw, 28px)/1.1 var(--font-head); text-transform: uppercase; overflow-wrap: anywhere; }
.sb-who small { align-self: start; color: #cfe6d3; font-size: 13px; }
.sb-points { font: 700 clamp(54px, 9vw, 108px)/1 var(--font-head); font-variant-numeric: tabular-nums; min-width: 1.2ch; text-align: center; text-shadow: 0 4px 0 rgba(0,0,0,.28); }
.sb-cue { position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--font-head); text-transform: uppercase; background: var(--ball-white); color: #111; padding: 4px 10px 4px 6px; border-radius: 20px; }
.sb-cue::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: inset -2px -3px 4px rgba(0,0,0,.3), 0 0 0 1px #bbb; }
.sb-side.b .sb-cue { left: auto; right: 0; }
.sb-side.at-table .sb-face { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(251,182,26,.35); }
.sb-side.won .sb-name { color: var(--yellow); }
.sb-mid { text-align: center; }
.sb-frames { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.55); padding: 10px 16px; border-radius: 6px; font-family: var(--font-head); }
.sb-frames b { font-size: clamp(30px, 4.6vw, 52px); line-height: 1; color: var(--yellow); font-variant-numeric: tabular-nums; }
.sb-frames span { font-size: 16px; color: #ddd; }
.sb-mid small { display: block; margin-top: 8px; font: 700 12px var(--font-head); text-transform: uppercase; color: #dff0e2; }
.sb-now { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.22); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 26px; align-items: center; }
.sb-break { display: flex; align-items: center; gap: 12px; }
.sb-break small { font: 700 12px var(--font-head); text-transform: uppercase; color: #dff0e2; }
.sb-break b { font: 700 40px/1 var(--font-head); min-width: 1.4ch; font-variant-numeric: tabular-nums; }
.sb-pots { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; }
.sb-pots .ball { width: 18px; height: 18px; }
.sb-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; color: #eaf6ec; }
.sb-facts b { font-family: var(--font-head); font-size: 18px; color: #fff; }
.sb-facts em { font-style: normal; font-weight: 700; color: var(--yellow); }
.sb-on .ball { margin-right: 4px; }
.sb-last { grid-column: 1 / -1; margin: 0; font-size: 13px; color: #cfe6d3; }
.sb-result { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.22); font: 700 clamp(20px, 3vw, 30px) var(--font-head); text-transform: uppercase; text-align: center; color: var(--yellow); }
.sb-result.wait { color: #eaf6ec; font-size: 17px; text-transform: none; }
.sb-under { margin-top: 30px; }
.sb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.sb-card { display: grid; gap: 8px; background: #fff; padding: 16px; border-left: 6px solid var(--head-row); }
.sb-card.is-live { border-left-color: var(--live-green); }
.sb-card.is-finished { border-left-color: var(--ink); }
.sb-card small { font-weight: 700; color: var(--muted); text-transform: uppercase; font-size: 12px; }
.sb-card-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; font: 600 16px var(--font-head); }
.sb-card-row span:last-child { text-align: right; }
.sb-card-row .strong { font-weight: 700; }
.sb-card-row b { font-size: 24px; white-space: nowrap; } .sb-card-row b i { font-style: normal; font-size: 13px; color: var(--muted); }
.sb-card em { font-style: normal; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) {
  .sb-table { border-width: 8px; padding: 16px 10px 14px; }
  .sb-board { gap: 8px; }
  .sb-side, .sb-side.b { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; }
  .sb-who, .sb-side.b .sb-who { grid-template-columns: 1fr; justify-items: center; row-gap: 6px; }
  .sb-face, .sb-side.b .sb-face { grid-column: 1; grid-row: auto; width: 54px; height: 54px; }
  .sb-side.b .sb-name, .sb-side.b .sb-who small, .sb-name, .sb-who small { grid-column: 1; text-align: center; justify-self: center; }
  .sb-side.b .sb-who { order: 0; }
  .sb-side { padding-bottom: 30px; }
  .sb-cue, .sb-side.b .sb-cue { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
  .sb-frames { padding: 8px 10px; gap: 6px; } .sb-frames span { font-size: 12px; }
  .sb-now { grid-template-columns: 1fr; }
}

/* ── presentation night & season review ── */
.pres-hero { margin-top: -5px; background: var(--rail) linear-gradient(180deg, rgba(0,0,0,.28), transparent 70%); color: #fff; padding: 26px 0 0; border-bottom: 5px solid var(--yellow); }
.pres-hero .breadcrumb { color: var(--ink); }
.pres-hero-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.pres-hero h1 { margin: 4px 0 8px; font-size: clamp(30px, 5vw, 54px); }
.pres-hero h1 span { color: var(--yellow); white-space: nowrap; }
.pres-hero p { margin: 0; max-width: 60ch; color: #f1e3d6; font-size: 16px; }
.pres-hero .toolbar { margin: 0; color: #fff; }
.pres-tabs { display: flex; gap: 4px; margin-top: 22px; }
.pres-tabs a { padding: 12px 18px; font: 700 15px var(--font-head); text-transform: uppercase; background: rgba(0,0,0,.35); color: #fff; }
.pres-tabs a.on { background: var(--yellow); color: #1b0e06; }
.pres-body { margin-top: 30px; }
.awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.award { display: grid; grid-template-columns: 112px minmax(0, 1fr); background: #fff; }
.award-cup { background: #1d1310 radial-gradient(circle at 50% 38%, #6a4a22 0%, transparent 68%); display: grid; place-items: center; padding: 14px 10px; }
.award-cup .trophy { width: 92px; height: 132px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.award-main { padding: 16px 16px 14px; min-width: 0; display: grid; align-content: start; gap: 10px; }
.award h2 { font-size: 19px; line-height: 1.15; }
.award-note { margin: -4px 0 0; font-size: 13px; color: var(--muted); }
.award-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.award-who > div { min-width: 0; display: grid; }
.award-who small { font: 700 11px var(--font-head); text-transform: uppercase; color: var(--muted); }
.award-who a, .award-who strong { font: 700 18px/1.2 var(--font-head); overflow-wrap: anywhere; }
.award-who span { font-size: 13px; color: var(--muted); }
.award-who em { font-style: normal; color: var(--muted); }
.award-who.first small { color: #9a6a00; }
.award-who.second { padding-top: 10px; border-top: 1px solid var(--head-row); }
.award-who.second a, .award-who.second strong { font-size: 15px; }
.award-face { width: 62px; height: 62px; flex: none; border-radius: 50%; overflow: hidden; background: var(--head-row); display: grid; place-items: center; border: 0; padding: 0; }
button.award-face { cursor: zoom-in; border-radius: 6px; }
.award-face img { width: 100%; height: 100%; object-fit: cover; }
.award-face.emblem .badge { width: 100%; height: 100%; font-size: 17px; }
.award-face.blank { background: repeating-linear-gradient(135deg, #eee 0 6px, #f7f7f7 6px 12px); }
.award-who.first .award-face { box-shadow: 0 0 0 3px var(--yellow); }
.award-who.second .award-face { width: 44px; height: 44px; }
.honours { background: var(--rail) linear-gradient(90deg, rgba(0,0,0,.22), transparent 30%, transparent 70%, rgba(0,0,0,.22)); color: #f6d365; padding: 26px 30px 22px; border: 6px solid #2c120d; box-shadow: inset 0 0 0 2px #7a4a1c; }
.honours h2 { text-align: center; font-size: 26px; letter-spacing: .08em; margin-bottom: 18px; color: #f6d365; }
.honours dl { margin: 0; columns: 2 320px; column-gap: 44px; }
.honours dl div { display: flex; align-items: baseline; gap: 8px; break-inside: avoid; padding: 5px 0; font-family: var(--font-head); }
.honours dt { text-transform: uppercase; font-size: 13px; letter-spacing: .04em; color: #e3c98a; }
.honours dt::after { content: ""; }
.honours dl div::before { content: ""; order: 1; flex: 1; border-bottom: 2px dotted rgba(246,211,101,.45); transform: translateY(-3px); min-width: 16px; }
.honours dd { order: 2; margin: 0; font-weight: 700; font-size: 16px; text-align: right; }
.honours > a { display: block; text-align: center; margin-top: 16px; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: #f6d365; }
.honours > a:hover { color: #fff; }
.pres-best { margin: -8px 0 0; font-size: 16px; }
.pres-best .team-cell { display: inline-flex; vertical-align: middle; font-weight: 700; }
.review-league h2 { font-size: 28px; margin-bottom: 18px; }
.review-league > * + * { margin-top: 20px; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; }
.podium-step { display: grid; justify-items: center; gap: 4px; text-align: center; background: #fff; padding: 16px 10px 0; }
.podium-step .badge { width: 54px; height: 54px; font-size: 15px; }
.podium-step strong { font: 700 18px/1.15 var(--font-head); text-transform: uppercase; }
.podium-step small { color: var(--muted); font-size: 13px; }
.podium-step b { align-self: end; width: calc(100% + 20px); margin-top: 10px; font: 700 13px var(--font-head); text-transform: uppercase; padding: 10px 6px; background: var(--head-row); }
.podium-step.p1 b { background: var(--yellow); color: #1b0e06; padding-top: 34px; }
.podium-step.p2 b { background: #cfcfcf; padding-top: 22px; }
.podium-step.p3 b { background: #c98a4b; color: #fff; }
a.podium-step:hover { color: inherit; filter: brightness(1.03); }
@media (max-width: 720px) {
  .awards { grid-template-columns: 1fr; }
  .award { grid-template-columns: 88px minmax(0, 1fr); } .award-cup .trophy { width: 68px; height: 100px; }
  .honours { padding: 20px 14px 16px; } .honours dl div { flex-wrap: wrap; } .honours dd { font-size: 15px; }
  .podium { gap: 4px; } .podium-step strong { font-size: 14px; } .podium-step .badge { width: 40px; height: 40px; }
  .pres-tabs a { padding: 10px 12px; font-size: 13px; }
}

/* ── a new highest break: confetti and a card ── */
.celebrate { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.34); animation: celebIn .25s ease-out; transition: opacity .4s; }
.celebrate.out { opacity: 0; }
.celebrate canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.celebrate-card { position: relative; width: min(360px, 100%); background: #111; color: #fff; text-align: center; padding: 26px 22px 22px; border-top: 8px solid var(--yellow); box-shadow: 0 24px 70px rgba(0,0,0,.55); animation: celebCard .45s cubic-bezier(.2,1.3,.4,1); }
.celebrate-x { position: absolute; right: 6px; top: 2px; width: 40px; height: 40px; border: 0; background: none; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.celebrate-what { margin: 0 0 14px; font: 700 15px var(--font-head); text-transform: uppercase; color: var(--yellow); }
.celebrate-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
.celebrate-row img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: #fff; border: 3px solid var(--yellow); }
.celebrate-row b { font: 700 86px/1 var(--font-head); font-variant-numeric: tabular-nums; }
.celebrate-who { margin: 14px 0 2px; font: 700 24px/1.15 var(--font-head); text-transform: uppercase; }
.celebrate-where { margin: 0 0 16px; color: #c9c9c9; }
@keyframes celebIn { from { opacity: 0; } }
@keyframes celebCard { from { opacity: 0; transform: scale(.86) translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .celebrate, .celebrate-card { animation: none; } }

/* ── admin: new field types and tools ── */
.range-field { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.range-field input[type="range"] { flex: 1; max-width: 360px; margin: 0; padding: 0; accent-color: var(--red); }
.range-field output { font: 700 22px var(--font-head); min-width: 2ch; }
.file-field { display: grid; gap: 8px; margin-top: 6px; }
.file-field input[type="text"] { margin: 0; }
.formatted-field > label { margin-bottom: 6px; }
.formatted-field > small.help { display: block; margin-bottom: 8px; }
.formatted-field textarea { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 14px; line-height: 1.5; }
.markup-preview { margin-top: 10px; border: 2px dashed var(--head-row); padding: 16px 18px; }
.award-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; margin-bottom: 20px; }
.award-tools label { font-weight: 700; font-size: 13px; display: grid; gap: 4px; }
.award-tools select { margin: 0; min-width: 200px; }
.award-tools p { flex: 1 1 100%; margin: 4px 0 0; font-size: 13px; max-width: 110ch; }

/* ── admin: live scoreboard control pad ── */
.pad { max-width: 760px; }
.pad-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.pad-top > span { flex: 1; min-width: 160px; }
.pad-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
.pad-side { display: grid; justify-items: center; gap: 2px; padding: 12px 8px 14px; border: 0; background: #2b2b2b; color: #fff; cursor: pointer; font-family: var(--font-head); border-bottom: 6px solid transparent; min-width: 0; }
.pad-side:disabled { cursor: default; opacity: 1; }
.pad-side small { font: 700 11px var(--font-head); text-transform: uppercase; color: #bbb; min-height: 14px; }
.pad-side strong { font-size: 17px; text-transform: uppercase; overflow-wrap: anywhere; text-align: center; line-height: 1.15; }
.pad-side b { font-size: 56px; line-height: 1; font-variant-numeric: tabular-nums; }
.pad-frames { font-size: 14px; background: var(--yellow); color: #1b0e06; padding: 1px 10px; border-radius: 20px; font-weight: 700; }
.pad-side.on { background: var(--baize); border-bottom-color: var(--ball-white); }
.pad-side.on small { color: #fff; }
.pad-mid { display: grid; align-content: center; justify-items: center; background: #111; color: #fff; padding: 8px 14px; font-family: var(--font-head); min-width: 92px; }
.pad-mid small, .pad-mid span { font: 700 11px var(--font-head); text-transform: uppercase; color: #bbb; text-align: center; }
.pad-mid b { font-size: 40px; line-height: 1.05; color: var(--yellow); font-variant-numeric: tabular-nums; }
.pad-pots { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 40px; padding: 10px 12px; background: #fff; margin-top: 8px; font-size: 13px; }
.pad-pots .ball { width: 20px; height: 20px; }
.pad-balls { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 12px 0; }
.ball-btn { aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-content: center; justify-items: center; color: #fff; font-family: var(--font-head);
  box-shadow: inset -8px -10px 16px rgba(0,0,0,.38), inset 6px 6px 12px rgba(255,255,255,.22), 0 4px 0 rgba(0,0,0,.25); transition: transform .08s; touch-action: manipulation; min-width: 0; }
.ball-btn span { font-size: clamp(20px, 5vw, 34px); font-weight: 700; line-height: 1; }
.ball-btn small { font: 700 clamp(9px, 1.8vw, 12px) var(--font-head); text-transform: uppercase; opacity: .92; }
.ball-btn.b-yellow, .ball-btn.b-pink { color: #1b0e06; }
.ball-btn:active { transform: translateY(3px) scale(.97); box-shadow: inset -8px -10px 16px rgba(0,0,0,.38), 0 1px 0 rgba(0,0,0,.25); }
.ball-btn:disabled { opacity: .28; cursor: not-allowed; }
.ball-btn.is-on { outline: 4px solid var(--ink); outline-offset: 3px; }
.ball-btn:focus-visible, .pad-side:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }
.pad-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.pad-big { flex: 1 1 200px; display: grid; gap: 2px; padding: 16px 14px; font-size: 18px; text-align: center; touch-action: manipulation; }
.pad-big small { font: 400 12px var(--font-body); text-transform: none; letter-spacing: 0; opacity: .9; }
.pad-fouls { background: #fff; padding: 10px 12px; }
.pad-fouls > span { font-weight: 700; font-size: 13px; margin-right: 4px; }
.pad-fouls .btn { touch-action: manipulation; }
.pad-info { margin: 12px 0 0; font-size: 14px; }
.pad-info b { font-family: var(--font-head); font-size: 17px; }
.pad-info em { font-style: normal; font-weight: 700; color: var(--red); }
.pad-fix { margin-top: 12px; background: #fff; padding: 10px 14px; }
.pad-fix summary { font-weight: 700; cursor: pointer; }
.pad-fix-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; margin-top: 12px; font-size: 14px; }
.pad-end { padding-top: 14px; border-top: 2px solid var(--head-row); margin-top: 16px; }
.pad-concede { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.pad-start p { margin: 0 0 14px; max-width: 60ch; }
@media (max-width: 720px) {
  /* Phones: two rows of big balls, easy to hit without looking */
  .pad-balls { grid-template-columns: repeat(4, 1fr); gap: 10px 12px; } .ball-btn span { font-size: 30px; } .ball-btn small { font-size: 11px; }
  .pad-side b { font-size: 42px; } .pad-side strong { font-size: 14px; } .pad-mid { min-width: 70px; padding: 6px 8px; } .pad-mid b { font-size: 30px; }
  .pad-big { font-size: 16px; padding: 14px 10px; }
}

/* ── Handicaps: the long list of players without a team folds away ── */
.hc-loose > summary { padding: 14px 16px; background: #fff; box-shadow: inset 0 -3px 0 #999; cursor: pointer; margin-bottom: 12px; }
.hc-loose > summary:hover { background: #fffbea; }
.hc-loose[open] > summary .muted { display: none; }

/* ── Seasons (pages/seasons.js) ───────────────────────────────── */
.season-tile p { margin-top: 14px; font-size: 14px; color: var(--muted); }
.season-tile.tall { min-height: 190px; }
.season-hub { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .season-hub { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .season-hub { grid-template-columns: 1fr; } .season-tile.tall { min-height: 0; } }
.season-leagues-pick { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.season-more { margin-top: 18px; }
.break-list { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.break-list b { font-weight: 400; color: var(--muted); }
.break-list b.best { font-weight: 700; color: var(--ink); }

/* ── Bye weeks in a fixture list, and on the calendar ─────────── */
table.data tbody tr.is-bye td { color: var(--muted); }
.bye-row b { margin-left: 6px; padding: 2px 8px; border-radius: 20px; background: var(--head-row); color: var(--ink); font-size: 12px; white-space: nowrap; }
.cal-ev.bye { border-left: 3px dashed #999; background: transparent; color: var(--muted); }
.cal-key i.bye { background: repeating-linear-gradient(90deg, #999 0 3px, transparent 3px 6px); }
.cal-row.bye strong { font-weight: 400; color: var(--muted); }

/* ═════════════════════════════════════════════════════════════
   v10 — Rich's eighth round: My Snooker, merchandise, CueView form,
   the news hub, the dashboard menu, log out buttons, footer icons
   ═════════════════════════════════════════════════════════════ */

/* ── footer: a social icon stays white on its red circle when hovered ── */
.site-footer .socials a:hover, .site-footer .socials a:focus-visible { background: var(--red); color: #fff; }
.site-footer .socials a:hover svg { fill: #fff; }

/* ── log out: a red icon in the menu, and a red button at the end of each dashboard menu ── */
.main-nav .nav-logout { background: var(--dark); }
.nav-logout svg { fill: #ff3355; transition: fill .15s; }
.main-nav .nav-logout:hover { background: var(--red); filter: none; }
.main-nav .nav-logout:hover svg { fill: #fff; }
.tabs .tab-logout, .admin-logout {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  background: #fff; color: var(--red-dark); border: 1px solid #f1c3cf; font: 700 14px var(--font-head); text-transform: uppercase; letter-spacing: .03em;
}
.tabs .tab-logout svg, .admin-logout svg { width: 18px; height: 18px; fill: var(--red); flex: none; }
.tabs .tab-logout:hover, .admin-logout:hover { background: var(--red); border-color: var(--red); color: #fff; }
.tabs .tab-logout:hover svg, .admin-logout:hover svg { fill: #fff; }
.tabs .tab-logout { flex: none; margin-left: auto; padding: 0 16px; border-bottom: 0; }
.admin-logout { width: 100%; padding: 12px 14px; border-radius: 12px; }
.admin-logout-m { display: none; margin-top: 26px; }

/* ── dashboard menu: groups with an icon, a search box, a clear "you are here" ── */
.admin { grid-template-columns: 256px minmax(0, 1fr); }
.admin-nav {
  background: transparent; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; padding: 0 4px 4px 0; scrollbar-width: thin;
}
.admin-find { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #dddccf; border-radius: 12px; padding: 0 12px; margin: 0; }
.admin-find svg { width: 16px; height: 16px; fill: var(--muted); flex: none; }
.admin-find input { border: 0; background: none; padding: 11px 0; margin: 0; width: 100%; min-width: 0; font: 600 14px var(--font-body); outline: none; box-shadow: none; }
.admin-find:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0, 0, 0, .07); }
.nav-group { background: #fff; border: 1px solid #e3e2d6; border-radius: 12px; flex: none; }
.nav-group.has-active { border-color: #cfcec2; box-shadow: 0 3px 12px rgba(0, 0, 0, .07); }
.nav-group-head {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 10px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  font: 700 13px var(--font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--ink); text-align: left;
}
.nav-group-head:hover { background: #f6f5ee; }
.nav-group-head > span:nth-child(2) { flex: 1; }
.nav-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--row-alt); display: grid; place-items: center; flex: none; transition: background .15s; }
.nav-ico svg { width: 16px; height: 16px; fill: var(--ink); }
.nav-group.has-active .nav-ico { background: var(--red); }
.nav-group.has-active .nav-ico svg { fill: #fff; }
.nav-group-head small { display: none; font: 700 11px var(--font-body); letter-spacing: 0; color: var(--muted); background: var(--row-alt); border-radius: 10px; padding: 1px 7px; }
.nav-group.shut .nav-group-head small { display: inline-block; }
.nav-group-head .chev { width: 8px; height: 8px; border-right: 2px solid #888; border-bottom: 2px solid #888; transform: rotate(45deg); transition: transform .2s; margin: 0 4px 4px 2px; flex: none; }
.nav-group.shut .chev { transform: rotate(-45deg); margin-bottom: 0; }
.nav-items { display: grid; gap: 2px; padding: 0 8px 9px; }
.nav-group.shut:not(.finding) .nav-items { display: none; }
.admin-nav .nav-items a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative;
  padding: 8px 10px 8px 16px; border: 0; border-radius: 8px; font-weight: 600; font-size: 14px; line-height: 1.3; color: #333;
}
.admin-nav .nav-items a::before { content: ""; position: absolute; left: 5px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: transparent; transition: background .15s; }
.admin-nav .nav-items a:hover { background: #f3f2ea; color: var(--ink); }
.admin-nav .nav-items a:hover::before { background: #cfcec2; }
.admin-nav .nav-items a.active { background: var(--highlight); color: var(--red-dark); font-weight: 700; border: 0; }
.admin-nav .nav-items a.active::before { background: var(--red); }
.admin-nav .nav-count { margin-left: auto; flex: none; }
.nav-hide { display: none !important; }
.admin-none { margin: 4px 0; padding: 10px 12px; font-size: 13px; color: var(--muted); }
.admin-none[hidden] { display: none; }
@media (max-width: 1000px) {
  .admin { grid-template-columns: 1fr; }
  .admin-nav { display: none; }
  .admin-logout-m { display: inline-flex; }
}
.in-draw { background: #d7f2d9; color: #0a5c10; font-weight: 700; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }

/* ── My Snooker (/myteam and My area → My Snooker) ─────────────── */
.ms-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; background: #1d1d1d; color: #fff; padding: 22px 24px; border-radius: 14px 14px 0 0; }
.ms-badge .badge { width: 76px; height: 76px; font-size: 20px; }
.ms-hero-text { flex: 1 1 260px; min-width: 0; }
.ms-hero h1 { margin: 2px 0 4px; color: #fff; }
.ms-hero p { margin: 0; color: #c9c9c9; }
.ms-hero p a { color: #fff; text-decoration: underline; }
.ms-kicker { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--font-head); text-transform: uppercase; letter-spacing: .09em; color: var(--yellow); }
.ms-kicker svg, .ms-note svg { width: 15px; height: 15px; fill: var(--yellow); flex: none; }
.ms-hero-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.ms-hero-actions .btn { text-align: center; }
.ms-hero-actions .btn.ghost { background: #fff; color: var(--ink); }
.ms-hero-actions .btn.small.ghost { background: transparent; color: #fff; border: 1px solid #666; }
.ms-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 22px; padding: 12px 24px; background: #fff7df; border-radius: 0 0 14px 14px; font-size: 14px; }
.ms-note svg { fill: #c98a00; margin-top: 3px; }
.ms-note a { color: var(--red-dark); font-weight: 700; text-decoration: underline; }
.ms-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.ms .stats { margin-bottom: 0; grid-template-columns: repeat(4, 1fr); }
.ms .stats.ms-mine { grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--head-row); }
.ms .stat { font-size: 13px; }
.ms a.next-match:hover { color: #fff; filter: brightness(1.12); }
.ms-form { display: flex; align-items: center; gap: 6px; }
.ms-form span { font: 700 12px var(--font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-right: 6px; }
.ms-form a { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--font-head); color: #fff; }
.ms-form a.w { background: var(--green); } .ms-form a.l { background: #9a9a9a; }
.ms-off { max-width: 620px; padding: 24px; border-radius: 14px; }
.ms-off h3 { margin-top: 0; }
button.team-tile { border: 0; font: inherit; cursor: pointer; width: 100%; }
button.team-tile:hover { box-shadow: inset 0 -4px 0 var(--red); }
/* the bar on the home page that takes a player back to their page */
.ms-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; background: #1d1d1d; color: #fff; padding: 12px 16px; border-left: 6px solid var(--yellow); }
.ms-bar b { font: 700 15px var(--font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--yellow); }
.ms-bar span { flex: 1 1 200px; color: #d0d0d0; font-size: 14px; }
.ms-bar i { font-style: normal; font-weight: 700; }
.ms-bar:hover { color: #fff; filter: brightness(1.15); }
/* the settings card in the dashboard */
.ms-card { background: #fff; border-radius: 14px; padding: 22px 24px; max-width: 720px; border-top: 5px solid var(--green); }
.ms-card.off { border-top-color: #9a9a9a; }
.ms-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.ms-card-head small { font: 700 12px var(--font-head); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.ms-card-head h2 { margin: 2px 0 0; }
.ms-card .form { padding: 0; background: none; margin-top: 16px; }
.ms-switch { display: flex !important; align-items: center; gap: 14px; cursor: pointer; padding: 14px; background: var(--cream); border-radius: 12px; }
.ms-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ms-slider { width: 52px; height: 30px; border-radius: 30px; background: #b9b9b9; position: relative; flex: none; transition: background .2s; }
.ms-slider::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.ms-switch input:checked + .ms-slider { background: var(--green); }
.ms-switch input:checked + .ms-slider::after { transform: translateX(22px); }
.ms-switch input:focus-visible + .ms-slider { outline: 3px solid var(--blue); outline-offset: 2px; }
.ms-switch b { display: block; font-size: 15px; }
.ms-switch small { display: block; font-weight: 400; color: var(--muted); }
.ms-card .form-actions { position: static; border-top: 0; padding: 0; }
@media (max-width: 900px) {
  .ms-grid { grid-template-columns: 1fr; }
  .ms .stats.ms-mine { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .ms-hero { padding: 18px 16px; gap: 12px; }
  .ms-badge .badge { width: 54px; height: 54px; font-size: 15px; }
  .ms-hero-text { flex-basis: 180px; }
  .ms-hero-actions { flex-direction: row; width: 100%; }
  .ms-hero-actions .btn { flex: 1; padding: 11px 8px; font-size: 13px; }
  .ms-note { padding: 12px 16px; }
  .ms .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ms-card { padding: 18px 16px; }
  .tabs .tab-logout { padding: 0 12px; }
}

/* ── Merchandise (/merchandise) ───────────────────────────────── */
.merch-intro { max-width: 760px; font-size: 16px; margin: -10px 0 22px; }
.merch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; margin-bottom: 26px; }
.merch-card { background: #fff; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #e6e5da; transition: box-shadow .2s, transform .2s; }
.merch-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.merch-pic { position: relative; aspect-ratio: 1 / 1; background: #f1f0e6; }
.merch-pic button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.merch-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.merch-ph { position: absolute; inset: 0; display: grid; place-items: center; }
.merch-ph svg { width: 64px; height: 64px; fill: #cfcdbf; }
.merch-price { position: absolute; left: 12px; bottom: 12px; background: var(--ink); color: #fff; font: 700 16px var(--font-head); padding: 5px 12px; border-radius: 20px; }
.merch-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.merch-body h3 { margin: 0; font-size: 19px; }
.merch-text { font-size: 14px; color: #333; }
.merch-text p { margin: 0 0 8px; } .merch-text p:last-child { margin: 0; }
.merch-options { display: flex; flex-wrap: wrap; gap: 6px; }
.merch-options span { border: 1px solid #d4d3c7; border-radius: 6px; padding: 2px 9px; font-size: 12px; font-weight: 700; }
.merch-body .btn { margin-top: auto; align-self: flex-start; }
.merch-how { border-radius: 14px; padding: 20px 22px; max-width: 760px; border-left: 6px solid var(--blue); scroll-margin-top: 20px; }
.merch-how h3 { margin: 0 0 8px; } .merch-how p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .merch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .merch-body { padding: 12px; } .merch-body h3 { font-size: 16px; }
  .merch-body .btn { align-self: stretch; text-align: center; }
}

/* ── CueView: the form (/cueview), the invitation on a player page, and the admin queue ── */
.cv-form-wrap { max-width: 820px; }
.cv-lead { font-size: 16px; margin: -10px 0 20px; }
.cv-form { border-radius: 14px; }
.cv-form .form-heading:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.cv-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cv-q > span { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; font-size: 14px; }
.cv-q i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 12px/24px var(--font-head); text-align: center; font-style: normal; }
.cv-q textarea { min-height: 62px; }
.cv-thanks { text-align: center; padding: 40px 24px; border-radius: 14px; }
.cv-thanks h1 { margin-top: 0; }
.cv-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; background: #1d1d1d; color: #fff; padding: 14px 18px; border-left: 6px solid var(--red); margin-bottom: 26px; }
.cv-invite b { font: 700 15px var(--font-head); text-transform: uppercase; }
.cv-invite span { flex: 1 1 240px; color: #d0d0d0; font-size: 14px; }
.cv-invite i { font-style: normal; font-weight: 700; color: var(--yellow); }
.cv-invite:hover { color: #fff; filter: brightness(1.15); }
.cv-sub { border-radius: 14px; padding: 18px 20px; border-left: 6px solid var(--soon-orange); }
.cv-sub header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cv-sub h3 { margin: 0; }
.cv-answers { margin: 0 0 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.cv-answers dt { font-size: 12px; font-weight: 700; color: var(--red-dark); }
.cv-answers dd { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cv-decide { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--head-row); }
.cv-decide label { font-weight: 700; font-size: 13px; }
.cv-decide label.check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.cv-decide select { display: block; margin-top: 5px; max-width: 420px; }
@media (max-width: 700px) { .cv-answers { grid-template-columns: 1fr; } }

/* ── News hub (/news): tabs, then cards — three across on a wide screen, a clean list on a phone ── */
.hub-head { margin-bottom: 16px; }
.hub-head h1 { margin-bottom: 4px; }
.hub-head p { margin: 0; color: var(--muted); font-size: 16px; }
.hub-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 22px; padding: 2px 0 10px; border-bottom: 1px solid #dddccf; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tabs a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid #dddccf; font: 700 14px var(--font-body); color: #333; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.hub-tabs a small { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--row-alt); border-radius: 10px; padding: 0 6px; line-height: 17px; }
.hub-tabs a:hover { border-color: var(--ink); color: var(--ink); }
.hub-tabs a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.hub-tabs a.on small { background: rgba(255, 255, 255, .2); color: #fff; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.hub-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e5da; border-radius: 16px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.hub-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .11); transform: translateY(-3px); color: inherit; }
.hub-pic { aspect-ratio: 16 / 10; background: #1d1d1d; overflow: hidden; flex: none; }
.hub-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.hub-card:hover .hub-pic img { transform: scale(1.04); }
.hub-ph { display: block; width: 100%; height: 100%; background: #1d1d1d url("/assets/logo.svg") center / 38% no-repeat; opacity: .9; }
.hub-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 14px; flex: 1; min-width: 0; }
.hub-cat { font: 700 11px var(--font-head); text-transform: uppercase; letter-spacing: .09em; color: var(--red-dark); }
.hub-body h3 { margin: 0; font-size: 19px; line-height: 1.25; text-transform: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hub-card:hover h3 { color: var(--red-dark); }
.hub-excerpt { margin: 0; font-size: 14px; color: #444; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid #eeede3; font-size: 12px; font-weight: 600; color: var(--muted); }
.hub-more { display: flex; justify-content: center; margin-top: 26px; }
.hub-more .btn { border-radius: 999px; padding: 12px 26px; }
.hub-more .btn small { font-weight: 600; opacity: .7; margin-left: 6px; text-transform: none; }
@media (max-width: 640px) {
  .hub-head p { font-size: 14px; }
  .hub-tabs { margin: 0 -16px 6px; padding: 2px 16px 12px; gap: 6px; }
  .hub-tabs a { padding: 7px 13px; font-size: 13px; }
  /* phones: one white list — picture on the left, headline and date beside it */
  .hub-grid { display: block; background: #fff; border-radius: 16px; padding: 2px 14px; }
  .hub-card { flex-direction: row; align-items: center; gap: 14px; border: 0; border-radius: 0; padding: 14px 0; border-bottom: 1px solid #eeede3; background: none; overflow: visible; }
  .hub-card:last-child { border-bottom: 0; }
  .hub-card:hover { box-shadow: none; transform: none; }
  .hub-pic { width: 104px; height: 104px; aspect-ratio: auto; border-radius: 12px; }
  .hub-body { padding: 0; gap: 5px; }
  .hub-cat { font-size: 10px; }
  .hub-body h3 { font-size: 16px; line-height: 1.3; }
  .hub-excerpt { display: none; }
  .hub-meta { border-top: 0; padding-top: 2px; justify-content: flex-start; gap: 6px; margin-top: 0; }
  .hub-meta span + span::before { content: "·"; margin-right: 6px; }
}
.ms-ha { display: inline-block; min-width: 48px; text-align: center; font: 700 11px var(--font-head); text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 10px; margin-right: 4px; }
.ms-ha.h { background: #d7f2d9; color: #0a5c10; } .ms-ha.a { background: var(--head-row); color: #333; }

/* ═════════════════════════════════════════════════════════════
   v11 — round nine: the menu bar that stays put, side panels,
   full-screen phone menu, back arrow, round scroll buttons,
   wins green / losses red, My Snooker for everyone, the news
   pages, competitions list, calendar, and dashboard touches
   ═════════════════════════════════════════════════════════════ */
:root {
  /* A win is always green and a loss always red, everywhere on the site. */
  --win: #0b8a12; --win-bg: #d3f0d6; --win-ink: #07500d;
  --loss: #d4092f; --loss-bg: #fcdbe2; --loss-ink: #a10029;
  --header-h: 99px;                       /* measured by main.js: how tall the menu bar is right now */
  --fs-h1: 42px; --fs-h1-fluid: 4.4vw;    /* page headlines, a little bigger (Admin → Branding can still change them) */
}
html.drawer-open, html.menu-open { overflow: hidden; }
/* Anything scrolled to (a form that opens, a #link) stops below the menu bar, not underneath it. */
html { scroll-padding-top: calc(var(--header-h) + 14px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── menu bar: always at the top of the screen ── */
#site-header { display: contents; }
.site-header { position: sticky; top: 0; z-index: 80; }
.site-header .wrap { flex-wrap: nowrap; gap: 16px; transition: padding .2s; }
.logo img { transition: height .2s; }
/* The header keeps the height of the full-size bar, so the page below never moves when the bar gets slimmer
   (that movement is what made the bar shake — see measureHeader in main.js). Only .site-bar changes size;
   the strip it gives up is see-through and lets clicks through. */
.site-header { min-height: var(--header-full, 0px); background: none; border-bottom: 0; pointer-events: none; }
.site-bar { pointer-events: auto; background: #000 var(--header-img, radial-gradient(ellipse at 18% 60%, #2a2a2a 0%, #000 45%)) left center / cover no-repeat; border-bottom: 5px solid var(--red); }
.site-header.measuring .wrap, .site-header.measuring .logo img { transition: none !important; }
.site-header.stuck .wrap { padding-top: 8px; padding-bottom: 8px; }
.site-header.stuck .logo img { height: 42px; }
.main-nav { flex-wrap: nowrap; margin-left: auto; }
.nav-icons { display: flex; align-items: center; gap: 8px; flex: none; }
.nav-icon { width: 46px; height: 46px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid #4a4a4a; background: #1c1c1c; color: #fff; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.nav-icon:hover { background: #fff; border-color: #fff; }
.nav-icon svg { width: 22px; height: 22px; fill: #fff; transition: fill .15s; }
.nav-icon:hover svg { fill: #111; }
.nav-account svg { width: 28px; height: 28px; }
.nav-account.in { background: var(--red); border-color: var(--red); }
.nav-account.in:hover { background: #fff; border-color: #fff; color: var(--red-dark); }
.nav-initials { font: 700 15px/1 var(--font-head); letter-spacing: .02em; }
.nav-bell.off svg { opacity: .6; }
.nav-icon.nav-toggle { display: none; background: var(--red); border-color: var(--red); font-size: 0; }
.nav-icon.nav-toggle:hover { background: #fff; border-color: #fff; }
body.maintenance .nav-bell, body.maintenance .nav-search, body.maintenance .nav-toggle, body.maintenance .main-nav { display: none !important; }
@media (max-width: 1100px) { .main-nav a, .main-nav button { font-size: 15px; padding: 0 10px; } }
@media (max-width: 900px) {
  .main-nav { display: none !important; }
  .nav-icon.nav-toggle { display: grid; }
  .site-header .wrap { padding-top: 10px; padding-bottom: 10px; }
  .logo img { height: 44px; }
  .site-header.stuck .logo img { height: 38px; }
  .nav-icons { gap: 6px; }
  .nav-icon { width: 42px; height: 42px; }
}
@media (max-width: 380px) { .nav-icon { width: 38px; height: 38px; } .nav-icons { gap: 4px; } }

/* ── phones: the menu opens over the whole screen ── */
.menu-overlay { position: fixed; inset: 0; z-index: 120; background: #0b0b0b; color: #fff; display: flex; flex-direction: column; padding: 12px 18px 22px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity .22s, transform .22s, visibility .22s; }
.menu-open .menu-overlay { opacity: 1; visibility: visible; transform: none; }
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-x, .drawer-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #555; background: transparent; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.menu-x:hover, .drawer-x:hover { background: #fff; color: #111; }
.menu-links { display: grid; gap: 8px; margin-top: 18px; }
.menu-links a { display: flex; align-items: center; min-height: 58px; padding: 0 18px; font: 700 22px/1 var(--font-head); text-transform: uppercase; letter-spacing: .01em; }
.menu-links a.menu-live { background: var(--dark); color: #fff; }
.menu-more { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 18px; padding-top: 12px; border-top: 1px solid #333; }
.menu-more a { padding: 11px 0; font-weight: 700; color: #ddd; border-bottom: 1px solid #222; }
.menu-foot { margin-top: auto; padding-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-foot .btn { padding: 14px 10px; text-align: center; }
.menu-foot .btn:first-child { grid-column: 1 / -1; }
.menu-foot .btn.ghost { background: #222; color: #fff; }
@media (min-width: 901px) { .menu-overlay { display: none; } }

/* ── side panels: log in / my account, and notifications ── */
.drawer-wrap { position: fixed; inset: 0; z-index: 130; }
.drawer-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .25s; }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(410px, 100%); background: #fff; color: var(--ink); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease-out; box-shadow: -12px 0 40px rgba(0, 0, 0, .3); outline: 0; }
.drawer-wrap.in .drawer { transform: none; }
.drawer-wrap.in .drawer-shade { opacity: 1; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: #111; color: #fff; border-bottom: 4px solid var(--red); }
.drawer-head h2 { margin: 0; font-size: 20px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px; display: grid; gap: 16px; align-content: start; }
.drawer-body .notice { margin: 0; }
.drawer-form { padding: 0; background: none; }
.drawer-form .btn { width: 100%; padding: 13px; }
.drawer-small { font-size: 13px; margin: 12px 0 0; }
.drawer-lead { margin: 0; font-size: 14px; color: #444; }
.drawer-h { margin: 10px 0 -6px; font-size: 12px; line-height: 1.4; letter-spacing: .08em; color: var(--muted); }
.drawer-who { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--head-row); }
.drawer-who strong { display: block; font: 700 18px var(--font-head); text-transform: uppercase; }
.drawer-who small { color: var(--muted); font-weight: 600; }
.drawer-initials { width: 50px; height: 50px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font: 700 18px var(--font-head); flex: none; }
.drawer-links { display: grid; gap: 8px; }
.drawer-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 1px solid #e6e5da; border-radius: 12px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.drawer-link:hover { border-color: var(--ink); background: #faf9f1; color: inherit; }
.drawer-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--row-alt); display: grid; place-items: center; flex: none; }
.drawer-ico svg { width: 18px; height: 18px; fill: var(--ink); }
.drawer-link > span:nth-child(2) { flex: 1; min-width: 0; }
.drawer-link b { display: block; font-size: 15px; }
.drawer-link small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.drawer-link > svg { width: 18px; height: 18px; fill: #9a998f; flex: none; }
.drawer-logout { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; border-radius: 12px; border: 1px solid #f1c3cf; background: #fff; color: var(--red-dark); font: 700 15px var(--font-head); text-transform: uppercase; cursor: pointer; }
.drawer-logout svg { width: 18px; height: 18px; fill: var(--red); }
.drawer-logout:hover { background: var(--red); border-color: var(--red); color: #fff; }
.drawer-logout:hover svg { fill: #fff; }
.install-how { margin-top: 8px; padding: 12px 14px; background: var(--cream); border-radius: 12px; font-size: 14px; }
.install-how[hidden] { display: none; }
.install-how ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.switch-list { border: 1px solid #e6e5da; border-radius: 12px; overflow: hidden; }
.switch-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-top: 1px solid #eeede3; cursor: pointer; position: relative; }
.switch-row:first-child { border-top: 0; }
.switch-row > span:first-child { flex: 1; min-width: 0; }
.switch-row b { display: block; font-size: 15px; }
.switch-row small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-row input:checked + .ms-slider { background: var(--green); }
.switch-row input:checked + .ms-slider::after { transform: translateX(22px); }
.switch-row input:focus-visible + .ms-slider { outline: 3px solid var(--blue); outline-offset: 2px; }
.switch-row.is-off { opacity: .5; cursor: default; }
.celebrate-row.is-trophy img { border-radius: 14px; object-fit: contain; background: #111; padding: 6px; }

/* ── back arrow (public pages) instead of the breadcrumb trail ── */
.back-nav { margin: 0 0 14px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; padding: 7px 16px 7px 8px; border-radius: 999px; background: #fff; border: 1px solid #dddccf; font-weight: 700; font-size: 13px; transition: background .15s, color .15s, border-color .15s; }
.back-link svg { width: 20px; height: 20px; fill: currentColor; }
.back-link:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.comp-hero .back-link, .art-hero .back-link, .sb .back-link, .draw-hero .back-link, .pres-hero .back-link { background: rgba(0, 0, 0, .55); border-color: rgba(255, 255, 255, .45); color: #fff; }
.comp-hero .back-link:hover, .art-hero .back-link:hover, .sb .back-link:hover, .draw-hero .back-link:hover, .pres-hero .back-link:hover { background: #fff; color: #111; border-color: #fff; }

/* ── round white buttons: scroll down (phones) and back to top ── */
.round-btn { position: fixed; z-index: 45; width: 48px; height: 48px; padding: 0; border-radius: 50%; background: #fff; border: 1px solid rgba(0, 0, 0, .14); box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(14px); transition: opacity .25s, transform .25s; }
.round-btn svg { width: 24px; height: 24px; fill: #111; }
.round-btn.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top.round-btn { display: grid; flex-direction: row; right: 14px; bottom: 16px; background: #fff; color: #111; font-size: 0; }
.to-top.round-btn svg { fill: #111; width: 24px; height: 24px; }
.scroll-down.round-btn { display: none; left: 50%; margin-left: -24px; bottom: 16px; }
.scroll-down.round-btn svg { animation: nudge 1.4s infinite; }
@media (max-width: 720px) { .scroll-down.round-btn { display: grid; } }
@media print { .round-btn, .menu-overlay, .drawer-wrap, .back-nav { display: none !important; } }

/* ── headlines a little bigger ── */
.hero-text h2 { font-size: clamp(24px, 3.9vw, 44px); line-height: 1.4; }
@media (max-width: 720px) { .hero-text h2 { font-size: 24px; line-height: 1.45; } }
/* Home banner: "Continue reading" sits on the left under the headline, with an arrow */
.hero-text { display: block !important; }
.hero-text .hero-meta { margin: 10px 0 0; }
.hero-text .hero-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 16px; font-size: 13px; border-radius: 3px; }
.hero-more span { font-size: 17px; line-height: 1; transition: transform .2s; }
.hero-more:hover span { transform: translateX(4px); }

/* ── footer: social icons a little smaller ── */
.socials { gap: 10px; }
.socials a { width: 36px; height: 36px; }
.socials svg { width: 17px; height: 17px; }

/* ── white tiles: "Click here to view" is a button, and the small print is smaller ── */
.tile { font-size: 15px; }
.tile-go { display: inline-block; background: var(--ink); color: #fff; padding: 7px 14px; font: 700 12px var(--font-head); text-transform: uppercase; letter-spacing: .04em; transition: background .15s; }
.tile:hover .tile-go { background: var(--red); }
.tile p { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: #444; }
.tile.with-emblem .tile-go { padding: 4px 10px; font-size: 11px; }

/* ── a win is green, a loss is red ── */
.wl { display: inline-block; min-width: 50px; padding: 3px 9px; border-radius: 4px; font: 700 12px/1.3 var(--font-head); text-transform: uppercase; letter-spacing: .03em; text-align: center; white-space: nowrap; }
.wl.won { background: var(--win-bg); color: var(--win-ink); }
.wl.lost { background: var(--loss-bg); color: var(--loss-ink); }
.wl.drawn { background: var(--head-row); color: var(--ink); }
.res-score { display: inline-block; padding: 2px 8px; font-weight: 700; white-space: nowrap; }
.res-score.done { background: var(--ink); color: #fff; border-radius: 4px; }
a.res-score.done:hover { color: #fff; filter: brightness(1.4); }
.res-num { display: inline-block; min-width: 30px; padding: 2px 8px; border-radius: 4px; text-align: center; }
.res-num.won { background: var(--win-bg); color: var(--win-ink); }
.res-num.lost { background: var(--loss-bg); color: var(--loss-ink); }
.res-mini .won { color: var(--win-ink); font-weight: 700; }
.res-mini .lost { color: var(--loss-ink); }
.fx-side b { background: var(--head-row); color: var(--ink); }
.fx-side.won b { background: var(--win); color: #fff; }
.fx-side.won a, .fx-side.won span { color: var(--win-ink); }
.fx-side.lost b { background: var(--loss); color: #fff; }
.br-team.won .br-score { background: var(--win); color: #fff; }
.br-team.lost .br-score { background: var(--loss); color: #fff; }
.mh-score b.won { color: #5fe08a; }
.mh-score b.lost { color: #ff7a8f; }
.sb-side.won .sb-name { color: #5fe08a; }
/* match page: the comparison bars — wins green, losses red, the rest plain */
.bar .track { background: #e4e3d9; }
.bar .track i { background: #9c9b90; }
.bar.bar-wins .track { background: #c3e8c7; } .bar.bar-wins .track i { background: var(--win); }
.bar.bar-loss .track { background: #f6c9d2; } .bar.bar-loss .track i { background: var(--loss); }
/* handicaps: plus is green, scratch and minus are red */
.hc-val.plus { background: var(--win-bg); color: var(--win-ink); }
.hc-val.minus { background: var(--loss-bg); color: var(--loss-ink); }
.hc-val.zero { background: var(--head-row); color: var(--ink); }
.hc-bar .hc-key .hc-val { margin-left: 10px; }
.hc-bar .hc-key .hc-val:first-child { margin-left: 0; }
/* a league table in the narrow side column: frames for and against make way for the points */
.sidebar .lt-panel th:nth-child(6), .sidebar .lt-panel td:nth-child(6), .sidebar .lt-panel th:nth-child(7), .sidebar .lt-panel td:nth-child(7) { display: none; }

/* ── follow button, and a title with a button beside it ── */
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 12px 0 26px; }
.title-row h1 { margin: 0; }
.follow-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font: 700 12px/1 var(--font-head); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; white-space: nowrap; vertical-align: middle; transition: background .15s, color .15s; }
.follow-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.follow-btn:hover { background: var(--ink); color: #fff; }
.follow-btn.on { background: var(--ink); color: #fff; }
.follow-btn.on svg { fill: var(--yellow); stroke: var(--yellow); }
.player-head h1 .follow-btn { margin-left: 4px; }

/* ── My Snooker: teams to switch between, news, followed players, on the home page, and its settings ── */
.ms-grid.one { grid-template-columns: 1fr; }
.ms-sec .ms-form { margin-top: 12px; }
.ms-sec:empty { display: none; }
.ms-grid .stack > .ms-sec:empty + * { margin-top: 0; }
.ms-teams { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 18px; padding-bottom: 4px; scrollbar-width: none; }
.ms-teams::-webkit-scrollbar { display: none; }
.ms-teams button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 1px solid #dddccf; background: #fff; font: 700 14px var(--font-body); cursor: pointer; }
.ms-teams button .badge { width: 30px; height: 30px; font-size: 10px; }
.ms-teams button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ms-news-list { display: grid; }
.ms-news { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--head-row); }
.ms-news:first-child { border-top: 0; }
.ms-news:hover { background: var(--row-alt); color: inherit; }
.ms-news-pic { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; background: #1d1d1d; }
.ms-news-pic.round { border-radius: 50%; }
.ms-news small { display: block; font-size: 11px; font-weight: 700; color: var(--red-dark); text-transform: uppercase; letter-spacing: .04em; }
.ms-news strong { display: block; font-size: 15px; line-height: 1.3; }
.ms-players { display: grid; }
.ms-player { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--head-row); }
.ms-player:first-child { border-top: 0; }
.ms-player:hover { background: var(--row-alt); color: inherit; }
.ms-player-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ms-player strong { display: block; } .ms-player small { color: var(--muted); }
.ms-player dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 0; }
.ms-player dl div { background: var(--cream); padding: 6px 4px; text-align: center; border-radius: 6px; }
.ms-player dt { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.ms-player dd { margin: 0; font-weight: 700; }
.ms-player .hc-val { min-width: 0; padding: 0 6px; }
.ms-home { background: #1d1d1d; border-radius: 14px; padding: 16px; }
.ms-home-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.ms-home-head h2 { margin: 0; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.ms-home-head h2 svg { width: 20px; height: 20px; fill: var(--yellow); }
.ms-home-head .btn.ghost { background: #fff; }
.ms-home .ms-grid { gap: 16px; }
.ms-home .ms-grid .stack > * + * { margin-top: 16px; }
.ms-home .ms-teams button { border-color: #444; }
.ms-home .ms-form span { color: #cfcfcf; }
.ms-home .notice { margin: 0; }
.ms-set { padding: 0; background: none; display: grid; gap: 18px; max-width: none; width: 100%; }
.ms-set .ms-card { max-width: none; }
.ms-set-box { margin: 0; padding: 18px 20px 20px; border: 0; background: #fff; border-radius: 14px; min-width: 0; }
.ms-set-box legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font: 700 18px var(--font-head); text-transform: uppercase; }
.ms-set-box legend + * { clear: both; }
.ms-help { margin: 0 0 12px; font-size: 14px; color: #444; }
.ms-set-h { margin: 14px 0 8px; font-size: 13px; color: var(--muted); letter-spacing: .05em; }
.ms-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ms-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.form label.ms-tick, .form label.ms-radio { display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 12px; border: 1px solid #dddccf; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px; }
.ms-tick input, .ms-radio input { width: 18px; height: 18px; flex: none; accent-color: var(--green); margin: 0; }
.ms-tick > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ms-tick .badge { width: 26px; height: 26px; font-size: 9px; flex: none; }
.ms-tick.wide > span, .ms-radio > span { display: block; }
.ms-tick b, .ms-radio b { display: block; font-size: 14px; }
.ms-tick small, .ms-radio small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.35; }
.ms-tick:has(input:checked), .ms-radio:has(input:checked) { border-color: var(--green); background: #f1faf2; }
.ms-place { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.form label.ms-radio { align-items: flex-start; }
.ms-radio input { margin-top: 2px; }
.ms-chips { min-height: 30px; margin-bottom: 10px; }
.ms-chips .chip { padding: 5px 6px 5px 10px; border-radius: 999px; }
.ms-add { display: flex; gap: 8px; }
.ms-add input { flex: 1; min-width: 0; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--red-dark); text-decoration: underline; cursor: pointer; }
.ms-set .form-actions { position: static; border: 0; padding: 0; background: none; }
@media (max-width: 700px) { .ms-place { grid-template-columns: 1fr; } .ms-set-box { padding: 16px 14px; } .ms-ticks { grid-template-columns: 1fr 1fr; } .ms-player dl { gap: 4px; } }

/* ── news hub: featured news at the top, and separate cards on a phone ── */
.hub-featured { margin: 0 0 26px; }
.hub-featured[hidden] { display: none; }
.hub-featured h2 { margin: 0 0 12px; font-size: 26px; }
.feat-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 14px; }
.feat-grid.solo { grid-template-columns: 1fr; }
.feat-main { position: relative; display: block; min-height: 400px; border-radius: 16px; overflow: hidden; background: #1d1d1d; color: #fff; }
.feat-main img, .feat-main .hub-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.feat-main:hover img { transform: scale(1.03); }
.feat-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .88) 100%); }
.feat-main .feat-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px 24px; }
.feat-main strong { display: block; font: 700 clamp(22px, 2.6vw, 32px)/1.2 var(--font-head); }
.feat-main small { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; color: #e2e2e2; }
.feat-main:hover { color: #fff; }
.feat-side { display: grid; gap: 14px; grid-auto-rows: 1fr; }
.feat-card { display: grid; grid-template-columns: 46% minmax(0, 1fr); background: #fff; border: 1px solid #e6e5da; border-radius: 14px; overflow: hidden; min-height: 120px; transition: box-shadow .2s, transform .2s; }
.feat-card:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .1); transform: translateY(-2px); color: inherit; }
.feat-card img, .feat-card .hub-ph { width: 100%; height: 100%; min-height: 120px; object-fit: cover; display: block; background: #1d1d1d; }
.feat-card .feat-text { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px; min-width: 0; }
.feat-card strong { font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feat-card small { font-size: 12px; color: var(--muted); }
.feat-card small b { color: var(--red-dark); }
@media (max-width: 860px) { .feat-grid { grid-template-columns: 1fr; } .feat-main { min-height: 300px; } }
@media (max-width: 640px) {
  .hub-featured h2 { font-size: 22px; }
  .feat-main { min-height: 240px; border-radius: 14px; }
  .feat-main .feat-text { padding: 16px; }
  .feat-card { grid-template-columns: 116px minmax(0, 1fr); min-height: 104px; }
  .feat-card img, .feat-card .hub-ph { min-height: 104px; }
  /* each article is its own white card, with a gap before the next */
  .hub-grid { display: grid; gap: 12px; background: none; border-radius: 0; padding: 0; }
  .hub-card { background: #fff; border: 1px solid #e6e5da; border-radius: 14px; padding: 12px; }
  .hub-card:last-child { border-bottom: 1px solid #e6e5da; }
}

/* ── article: picture and headline, who and when, share, then the words on the page ── */
.art-hero { position: relative; margin-top: -5px; color: #fff; border-bottom: 5px solid var(--red);
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .15) 40%, rgba(0, 0, 0, .9) 100%), #111 var(--art-img, url("/assets/hero.jpg")) center 25% / cover no-repeat; }
.art-hero .wrap { min-height: clamp(280px, 44vw, 500px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 22px; padding-bottom: 28px; }
.art-hero .back-nav { margin-bottom: auto; }
.art-hero h1 { margin: 10px 0 0; max-width: 900px; font-size: clamp(28px, 4.6vw, 54px); line-height: 1.08; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.art-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.art-cats a { background: var(--red); color: #fff; padding: 4px 10px; font: 700 11px var(--font-head); text-transform: uppercase; letter-spacing: .08em; }
.art-cats a:hover { color: #fff; filter: brightness(1.12); }
.art-wrap { max-width: 860px; padding-top: 22px; padding-bottom: 46px; }
.art-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding-bottom: 16px; margin-bottom: 26px; border-bottom: 2px solid var(--ink); }
.art-by { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; font-size: 14px; color: #444; }
.art-by b { color: var(--ink); }
.share-bar { display: flex; align-items: center; gap: 6px; }
.share-bar > span { font: 700 12px var(--font-head); text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.share-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid #cfcec3; background: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s; }
.share-btn svg { width: 17px; height: 17px; fill: var(--ink); }
.share-btn:hover { background: var(--ink); border-color: var(--ink); }
.share-btn:hover svg { fill: #fff; }
.art-body { font-size: calc(var(--fs-prose, 16px) + 2px); line-height: 1.7; }
.art-body p { margin: 0 0 20px; }
.art-body .lead { font-size: 1.2em; font-weight: 600; line-height: 1.5; }
.art-body .quote-box { margin: 26px 0; }
.video-box { position: relative; aspect-ratio: 16 / 9; margin: 0 0 26px; background: #000; border-radius: 12px; overflow: hidden; }
.video-box iframe, .video-box video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.art-extra { margin-top: 30px; }
.art-extra:empty { display: none; }
.art-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid #d9d8cc; }
@media (max-width: 640px) { .art-bar { align-items: flex-start; flex-direction: column; } .art-body { font-size: 17px; } .art-hero .wrap { padding-bottom: 20px; } }

/* ── related news: a dark strip of picture cards that scrolls sideways ── */
.news-strip { background: #0c0c0c; color: #fff; padding: 30px 0 36px; margin-top: 40px; }
.news-strip header { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }
.news-strip h2 { margin: 0; font-size: 24px; }
.ns-ctrl { display: flex; align-items: center; gap: 8px; }
.ns-ctrl a { font-weight: 700; font-size: 13px; color: #cfcfcf; margin-right: 6px; }
.ns-ctrl a:hover { color: #fff; }
.ns-ctrl button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #555; background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 3px; }
.ns-ctrl button:hover { background: #fff; color: #111; }
.ns-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ns-row::-webkit-scrollbar { display: none; }
.ns-card { position: relative; flex: 0 0 min(300px, 78vw); aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #222; color: #fff; scroll-snap-align: start; }
.ns-card img, .ns-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.ns-ph { background: #1d1d1d url("/assets/logo.svg") center 38% / 34% no-repeat; }
.ns-card:hover img { transform: scale(1.05); }
.ns-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .9) 100%); }
.ns-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 14px; }
.ns-text strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; line-height: 1.3; }
.ns-text small { display: block; margin-top: 8px; font-size: 12px; color: #d0d0d0; }
.ns-card:hover { color: #fff; }
#view > .news-strip:last-child { margin-bottom: -1px; }

/* ── competitions: rows with the picture on the left and what you need to know on the right ── */
.comp-list { display: grid; gap: 14px; margin-bottom: 20px; }
.comp-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: stretch; background: #fff; border: 1px solid #e6e5da; border-radius: 14px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.comp-row:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .1); transform: translateY(-2px); color: inherit; }
.comp-pic { position: relative; background: #1d1d1d; min-height: 150px; }
.comp-pic img:not(.trophy), .comp-pic .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comp-pic .ph { background: #1d1d1d; }
.comp-row-trophy { position: absolute; right: 10px; bottom: 10px; width: 46px; height: 58px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.comp-pic .ph + .comp-row-trophy { right: 50%; bottom: 50%; transform: translate(50%, 50%); width: 70px; height: 88px; }
.comp-info { padding: 16px 18px; display: grid; gap: 8px; align-content: center; min-width: 0; }
.comp-kind { font: 700 11px var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.comp-info h3 { margin: 0; font-size: 22px; }
.comp-row:hover h3 { color: var(--red-dark); }
.comp-blurb { margin: 0; font-size: 14px; color: #444; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.comp-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 2px 0; }
.comp-facts dt { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.comp-facts dd { margin: 0; font-weight: 700; font-size: 15px; }
.comp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.comp-go { display: grid; place-items: center; padding: 0 18px; font-size: 30px; color: #b5b4a8; }
.comp-row:hover .comp-go { color: var(--red); }
@media (max-width: 640px) {
  .comp-row { grid-template-columns: 104px minmax(0, 1fr); }
  .comp-pic { min-height: 0; }
  .comp-go { display: none; }
  .comp-info { padding: 12px; gap: 6px; }
  .comp-info h3 { font-size: 17px; }
  .comp-blurb { display: none; }
  .comp-facts { gap: 4px 14px; } .comp-facts dd { font-size: 13px; }
  .comp-row-trophy { width: 30px; height: 38px; right: 6px; bottom: 6px; }
  .comp-pic .ph + .comp-row-trophy { width: 48px; height: 60px; }
}

/* ── calendar: the season month by month, with a strip of months that stays in view ── */
.cal-top { position: sticky; top: var(--header-h); z-index: 30; display: flex; align-items: center; gap: 10px; margin: 0 -16px 14px; padding: 10px 16px; background: var(--cream); border-top: 1px solid #d9d8cc; border-bottom: 1px solid #d9d8cc; }
.cal-team select { width: 210px; max-width: 42vw; margin: 0; padding: 11px 10px; border: 1px solid var(--ink); border-radius: 8px; font-weight: 700; background: #fff; }
.cal-arrow { width: 38px; height: 38px; flex: none; border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer; border-radius: 50%; padding-bottom: 4px; }
.cal-arrow:hover { background: var(--ink); color: #fff; }
.cal-months { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.cal-months::-webkit-scrollbar { display: none; }
.cal-months button { flex: 1 0 62px; display: grid; justify-items: center; gap: 1px; padding: 6px 4px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: inherit; }
.cal-months b { font: 700 13px var(--font-head); text-transform: uppercase; }
.cal-months span { font-size: 12px; color: var(--muted); }
.cal-months button:hover { background: #ecebdf; }
.cal-months button.on { background: var(--red); color: #fff; }
.cal-months button.on span { color: #fff; }
.cal-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.cal-month { scroll-margin-top: calc(var(--header-h) + 76px); padding-top: 14px; }
.cal-month > h2 { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 3px solid var(--ink); font-size: 24px; }
.cal-day-group { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid #d9d8cc; }
.cal-day-group.past .cal-tile { background: #77766d; }
.cal-day-group.past .cal-tile small { color: #fff; }
.cal-tile { align-self: start; display: grid; justify-items: center; background: #1d1d1d; color: #fff; padding: 9px 4px 10px; border-radius: 12px; position: sticky; top: calc(var(--header-h) + 76px); }
.cal-tile small { font: 700 11px var(--font-head); text-transform: uppercase; color: var(--yellow); letter-spacing: .05em; }
.cal-tile b { font: 700 30px/1.05 var(--font-head); }
.cal-tile span { font-size: 12px; text-transform: uppercase; font-weight: 700; }
.cal-day-group.today .cal-tile { background: var(--red); }
.cal-day-group.today .cal-tile small { color: #fff; }
.cal-items { display: grid; gap: 10px; min-width: 0; }
.cal-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; background: #fff; border-radius: 12px; padding: 12px 16px; border-left: 5px solid var(--green); }
.cal-item.cup { border-left-color: var(--yellow); }
.cal-item.key { border-left-color: var(--blue); }
.cal-item.bye { border-left: 5px dashed #999; background: transparent; }
.cal-item.live { box-shadow: 0 0 0 2px var(--live-green); }
.cal-main { flex: 1 1 280px; min-width: 0; }
.cal-tag { display: block; font: 700 11px var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cal-item h3 { margin: 2px 0 6px; font-size: 18px; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.cal-item h3 a:hover { color: var(--red-dark); }
.cal-when, .cal-where { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; }
.cal-where { color: var(--muted); margin-top: 2px; }
.cal-when svg, .cal-where svg { width: 16px; height: 16px; fill: var(--red); flex: none; }
.cal-where svg { fill: #8d8c82; }
.cal-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-btn { padding: 8px 14px; border: 1px solid #cfcec3; border-radius: 8px 8px 14px 8px; background: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.cal-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (max-width: 640px) {
  .cal-top { gap: 4px; padding: 8px 10px; flex-wrap: wrap; }
  .cal-team { flex: 1 1 100%; } .cal-team select { width: 100%; max-width: none; }
  .cal-arrow { width: 32px; height: 32px; font-size: 26px; }
  .cal-months button { flex-basis: 52px; }
  .cal-month { scroll-margin-top: calc(var(--header-h) + 120px); }
  .cal-day-group { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
  .cal-tile { top: calc(var(--header-h) + 120px); padding: 7px 2px 8px; border-radius: 10px; }
  .cal-tile b { font-size: 24px; }
  .cal-item { padding: 10px 12px; }
  .cal-item h3 { font-size: 16px; }
  .cal-btns { width: 100%; } .cal-btn { flex: 1; text-align: center; padding: 8px 6px; }
}

/* ── dashboard: a menu that never scrolls inside, overview boxes you can press, gaps between blocks on a phone ── */
/* The menu is as long as its items — nothing is hidden and nothing inside it scrolls. It still follows you down
   a long page: at the top when it fits the screen; when it is taller than the screen it moves with the page
   until its last item is in view, and stays there. (pages/admin.js tells us its height: --admin-nav-h.) */
.admin-nav { max-height: none; overflow: visible; padding-bottom: 4px;
  top: min(calc(var(--header-h) + 12px), calc(100vh - var(--admin-nav-h, 0px) - 14px)); }
a.stat.stat-link { position: relative; display: block; transition: box-shadow .15s, transform .15s; }
a.stat.stat-link i { position: absolute; right: 14px; top: 14px; font-style: normal; font-size: 18px; color: #b5b4a8; transition: transform .15s, color .15s; }
a.stat.stat-link:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .12), inset 0 -4px 0 var(--red); transform: translateY(-2px); color: inherit; }
a.stat.stat-link:hover i { color: var(--red); transform: translateX(3px); }
@media (max-width: 720px) {
  #admin-body .panel { background: transparent; }
  #admin-body .panel > .panel-head { margin-bottom: 12px; }
  #admin-body table.data tr { margin-bottom: 14px; border-radius: 0 10px 10px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
  #admin-body .pager { margin-bottom: 12px; border-radius: 10px; }
  #admin-body .panel .empty { background: #fff; }
  #admin-body .stats { gap: 12px; }
  #admin-body .notice, #admin-body .toolbar, #admin-body .form { margin-bottom: 14px; }
  #admin-body .stack > * + * { margin-top: 18px; }
}

/* ── v12: league tables show who goes up and who goes down; a little more room above the home headline ── */
/* Green = top of the league, pink = the relegation place. The team you follow (My Snooker, a team's own
   pages) is cream with a dark edge, so pink and green keep one meaning each. See leagueMarks() in components.js. */
:root { --lt-top: #dcf3de; --lt-top-ink: #07500d; --lt-down: #f8dde3; --lt-down-ink: #a10029; --lt-mine: #fff3cf; }
table.data tbody tr.lt-mine td { background: var(--lt-mine); }
table.data tbody tr.lt-mine td:first-child { box-shadow: inset 4px 0 0 var(--ink); }
table.data tbody tr.lt-up td { background: var(--lt-top); }
table.data tbody tr.lt-top td { background: var(--lt-top); }
table.data tbody tr.lt-down td { background: var(--lt-down); font-weight: 700; }
/* the position, with how far the team has moved since last week: ▲2 ▼1 – */
.lt-pos { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.lt-pos b { font-weight: inherit; min-width: 1.2em; }
.lt-mv { display: inline-flex; align-items: center; gap: 2px; min-width: 24px; font: 700 12px/1 var(--font-body, inherit); white-space: nowrap; }
.lt-mv i { font-style: normal; font-size: 9px; line-height: 1; }
.lt-mv.up { color: var(--green); }
.lt-mv.down { color: var(--red); }
.lt-mv.same { color: #9a9a92; justify-content: center; }
.lt-mv.same i { font-size: 14px; }
/* P = promotion place, R = relegation place: a small letter after the team's name */
.lt-team { display: flex; align-items: center; gap: 8px; }
.lt-team .team-cell { min-width: 0; }
.lt-zone { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 4px; color: #fff; font: 700 12px/1 var(--font-head); letter-spacing: 0; }
.lt-zone.up { background: var(--green); }
.lt-zone.down { background: var(--red); }
/* the highest points total in the table */
.lt-pts { display: inline-block; min-width: 2.2em; padding: 3px 9px; border-radius: 20px; background: var(--green); color: #fff; font-weight: 700; line-height: 1.3; }
.lt-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 10px 14px; background: #fff; border-top: 1px solid var(--head-row); font-size: 13px; color: var(--muted); }
.lt-key > span { display: inline-flex; align-items: center; gap: 7px; }
.lt-key .lt-zone { width: 18px; height: 18px; font-size: 11px; }
.lt-key .lt-mv { min-width: 0; }
/* in the narrow side column the columns sit closer and the movement sits under the position, so everything fits without scrolling */
.sidebar .lt-panel .lt-pos { flex-direction: column; gap: 3px; }
.sidebar .lt-panel .lt-mv { min-width: 0; font-size: 11px; }
.sidebar .lt-panel table.data th, .sidebar .lt-panel table.data td { padding-left: 7px; padding-right: 7px; }
.sidebar .lt-panel table.data th:first-child, .sidebar .lt-panel table.data td:first-child { padding-left: 12px; }
.sidebar .lt-panel table.data th:last-child, .sidebar .lt-panel table.data td:last-child { padding-right: 12px; }
@media (max-width: 720px) {
  /* a phone: the movement sits under the position, so the column stays narrow */
  .lt-pos { flex-direction: column; gap: 3px; }
  .lt-mv { min-width: 0; font-size: 11px; }
  .lt-zone { width: 17px; height: 17px; font-size: 11px; }
  .lt-team { gap: 6px; }
  .lt-pts { min-width: 0; padding: 1px 6px; }
  /* the arrow and the points pill need a little width: the columns sit slightly closer on a phone, so the table still fits */
  .lt-panel table.data th, .lt-panel table.data td { padding-left: 4px; padding-right: 4px; }
  .lt-panel table.data th:first-child, .lt-panel table.data td:first-child { padding-left: 8px; }
  .lt-panel table.data th { font-size: 12px; }
  .lt-panel table.data th:last-child, .lt-panel table.data td:last-child { padding-right: 8px; }
}
/* home: the headline sat tight under the red bar */
.hero-inner { padding-top: 46px; }
@media (max-width: 720px) { .hero-inner { padding-top: 26px; } }

/* ── v13: home quick links — one slim row, joined like the menu bar ── */
.quick-links { display: flex; gap: 0; margin-bottom: 0; }
.quick-links a { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px; font-size: 15px; letter-spacing: .02em; white-space: nowrap; }
.quick-links svg { width: 17px; height: 17px; flex: none; fill: currentColor; opacity: .9; }
@media (max-width: 720px) {
  /* a phone: still one row, without the icons. All four fit from 360px wide; on a narrower phone the row slides sideways */
  .quick-links { overflow-x: auto; scrollbar-width: none; }
  .quick-links::-webkit-scrollbar { display: none; }
  .quick-links a { padding: 11px 6px; font-size: 12.5px; letter-spacing: 0; }
  .quick-links svg { display: none; }
}
@media (max-width: 400px) { .quick-links a { padding: 11px 4px; font-size: 12px; } }

/* ── v14: the home page's feature strip and Key dates take far less room ── */
/* The feature strip ("NEW …"): a slimmer bar. */
.feature-box { padding: 8px 14px; gap: 12px; font-size: 15px; min-height: 42px; }
.feature-new { font-size: 11px; padding: 3px 8px; }
.feature-go { font-size: 18px; }
.feature-item { padding: 8px 14px; gap: 12px; }
.feature-box.scrolling .ticker-item .feature-new { font-size: 10px; padding: 2px 7px; }
@media (max-width: 720px) { .feature-box { font-size: 14px; padding: 8px 12px; gap: 10px; } .feature-item { padding: 8px 12px; gap: 10px; } }

/* Key dates: one slim row. The yellow label on the left, then each date as a small card; extra dates slide sideways. */
.kd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; background: #fff; }
.kd-label { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 16px; background: var(--yellow); color: #1b0e06; font: 700 15px/1.1 var(--font-head); text-transform: uppercase; white-space: nowrap; }
.kd-label svg { width: 18px; height: 18px; fill: currentColor; display: none; }
.kd-label i { font: 700 11px/1.2 var(--font-body, inherit); font-style: normal; text-transform: none; letter-spacing: 0; opacity: .8; }
.kd-label:hover { color: #1b0e06; filter: brightness(1.06); }
.kd-row { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.kd-row::-webkit-scrollbar { display: none; }
.kd-item { flex: 1 0 290px; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px 14px; scroll-snap-align: start; box-shadow: inset 1px 0 0 var(--head-row); }
.kd.one .kd-item { flex-basis: 100%; }
a.kd-item:hover { color: inherit; background: #fffbea; }
.kd-item time { flex: none; width: 44px; display: grid; justify-items: center; background: var(--ink); color: #fff; padding: 5px 2px 4px; line-height: 1; border-radius: 3px; }
.kd-item time b { font: 700 20px/1 var(--font-head); }
.kd-item time span { font: 700 11px/1.3 var(--font-head); text-transform: uppercase; color: var(--yellow); }
.kd-item > div { flex: 1; min-width: 0; }
.kd-item strong { display: block; font: 700 15px/1.25 var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-item small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-item em { font-style: normal; font-weight: 700; color: var(--ink); margin-right: 7px; }
.kd-item em.soon { color: var(--red); }
/* ‹ › — only while there are more dates than fit (home.js adds .can-slide) */
.kd-nav { display: none; flex-direction: column; box-shadow: inset 1px 0 0 var(--head-row); }
.kd.can-slide .kd-nav { display: flex; }
.kd-nav button { flex: 1; width: 30px; border: 0; background: #fff; font: 700 18px/1 var(--font-head); color: var(--ink); cursor: pointer; padding: 0; }
.kd-nav button + button { box-shadow: inset 0 1px 0 var(--head-row); }
.kd-nav button:hover { background: var(--head-row); }
/* the four buttons, the strip, the entries bar and Key dates sit close together as one block */
.home-top { display: grid; gap: 10px; min-width: 0; }
.home-top > * { margin: 0; min-width: 0; }
.home-top .enter-bar { padding: 9px 14px; flex-wrap: nowrap; }
.home-top .enter-bar span { flex: none; padding: 5px 11px; margin-left: auto; }
@media (max-width: 720px) {
  /* a phone: the label is a thin bar across the top, the dates slide underneath (the next one peeks in from the right) */
  .kd { grid-template-columns: minmax(0, 1fr); }
  .kd-label { flex-direction: row; align-items: center; justify-content: flex-start; gap: 7px; padding: 6px 12px; font-size: 13px; }
  .kd-label svg { display: block; width: 15px; height: 15px; }
  .kd-label i { margin-left: auto; font-size: 12px; opacity: 1; }
  .kd-item { flex: 0 0 86%; padding: 8px 12px; gap: 10px; }
  .kd.one .kd-item { flex-basis: 100%; }
  .kd-item strong { font-size: 14px; }
  .kd.can-slide .kd-nav { display: none; }
  .home-top { gap: 8px; }
  .home-top .enter-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1px 12px; font-size: 14px; }
  .home-top .enter-bar b { grid-column: 1; }
  .home-top .enter-bar span { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
}

/* ── v14: notices from the league — breaking news, important updates, offers ── */
/* Their pop-ups have their own colours (the green ones are match news), with the kind written above the message. */
.live-pop.tone-breaking { background: var(--red); }
.live-pop.tone-update { background: #0b63c4; }
.live-pop.tone-offer { background: var(--yellow); color: #1b0e06; }
.live-pop[class*="tone-"] .live-pop-body { padding-left: 16px; }
.live-pop[class*="tone-"]::before { display: none; }
.live-pop-tag { display: block; font: 700 11px/1.2 var(--font-head); text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin-bottom: 3px; }
/* the red number on the bell: notices sent since you last opened it */
.nav-bell { position: relative; }
.nav-bell-count { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; background: var(--red); color: #fff; font: 700 11px/1 var(--font-body, inherit); box-shadow: 0 0 0 2px #000; pointer-events: none; }
/* the list behind the bell */
.notice-list { display: grid; gap: 8px; margin: 8px 0 6px; }
.notice-item { display: block; position: relative; background: #fff; border: 1px solid #eeede3; border-radius: 8px; padding: 11px 13px; color: inherit; }
a.notice-item:hover { color: inherit; border-color: #cfcec4; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.notice-item b { display: block; margin-top: 6px; font-size: 15px; line-height: 1.3; }
.notice-item p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: #444; }
.notice-item small { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.notice-tag { display: inline-block; padding: 2px 8px; border-radius: 3px; font: 700 10px/1.5 var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: #fff; }
.notice-tag.tone-breaking { background: var(--red); }
.notice-tag.tone-update { background: #0b63c4; }
.notice-tag.tone-offer { background: var(--yellow); color: #1b0e06; }
.notice-new { float: right; font: 700 10px/1.8 var(--font-head); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--red); }

/* ── v14: live text on the ball-by-ball scoreboard ── */
/* the box on the scorer's pad */
.pad-say { margin-top: 14px; background: #fff; padding: 12px 14px; border-left: 5px solid var(--blue); }
.pad-say label { display: block; font-size: 14px; margin-bottom: 8px; }
.pad-say label small { color: var(--muted); font-weight: 400; }
.pad-say-row { display: flex; gap: 8px; }
.pad-say-row input { flex: 1; min-width: 0; }
.pad-said { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.pad-said li { display: flex; align-items: baseline; gap: 8px; }
.pad-said time { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.pad-said span { flex: 1; min-width: 0; }
.pad-said button { flex: none; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.pad-said button:hover { color: var(--red); }
/* what the public sees, newest line first */
.sb-said { list-style: none; margin: 0; padding: 0; background: #fff; max-height: 420px; overflow-y: auto; }
.sb-said li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 11px 16px; border-top: 1px solid var(--row-alt); }
.sb-said li:first-child { border-top: 0; background: #f3faf4; box-shadow: inset 4px 0 0 var(--live-green); }
.sb-said time { grid-row: 1 / span 2; align-self: start; font: 700 14px/1.5 var(--font-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.sb-said small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sb-said p { margin: 0; font-size: 15px; line-height: 1.45; grid-column: 2; }

/* ── v14: the scorecard's third view — a frame scored ball by ball ── */
.sc-views { flex-wrap: wrap; row-gap: 6px; }
.g-ball { display: block; }
.g-ball .pad { padding: 12px; }
.g-ball .pad-start { margin: 0; }
.g-ball-note { padding: 18px 14px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.g-ball-note p { margin: 0; }
.pad-frame .notice { margin: 12px 0; }
@media (max-width: 720px) {
  .sc-views span { flex-basis: 100%; margin: 0; }
  .sc-views button { flex: 1; padding: 8px 6px; }
  .g-ball .pad { padding: 10px 8px; }
}
.g-ball .pad-info { color: #e9e9e4; }
.g-ball .pad-info .muted { color: #b9b9b0; }
.g-ball .pad-info em { color: var(--yellow); }
.g-ball .pad-end { border-top-color: #3a3a3a; }
.g-ball .g-ball-note, .g-ball .pad-start { background: #fff; color: var(--ink); }
.sb-frames.one b { opacity: .7; }

/* ── v14: Manage team — the captains' box on the home page, and the team sheet ── */
/* The box: fixed to the bottom of the screen, like an app's reminder. Only captains and vice captains ever see it. */
.squad-box { position: fixed; left: 50%; bottom: 14px; z-index: 55; width: min(560px, calc(100vw - 24px)); transform: translate(-50%, 24px); opacity: 0;
  display: flex; align-items: center; gap: 12px; padding: 14px 44px 14px 18px; background: #fff; color: var(--ink); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .06); border-left: 6px solid var(--green); transition: transform .3s ease-out, opacity .3s; }
.squad-box.in { transform: translate(-50%, 0); opacity: 1; }
.squad-box-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.squad-box-text strong { font: 700 18px/1.15 var(--font-head); text-transform: uppercase; }
.squad-box-text span { font-size: 14px; line-height: 1.35; }
.squad-box-text small { font-size: 12px; font-weight: 700; color: var(--red); }
.squad-box-text small.ok { color: var(--green); }
.squad-box .btn { flex: none; white-space: nowrap; border-radius: 22px; padding: 10px 16px; }
.squad-box-x { position: absolute; top: 6px; right: 8px; width: 30px; height: 30px; border: 0; background: none; font-size: 24px; line-height: 1; color: #777; cursor: pointer; border-radius: 50%; }
.squad-box-x:hover { background: var(--row-alt); color: var(--ink); }
/* while it is there, the round "scroll down" button gives way and the other corner buttons sit above it */
.has-squad-box .scroll-down { display: none !important; }
.has-squad-box .to-top, .has-squad-box .edit-page, .has-squad-box .live-pops { bottom: 110px; }
.drawer-open .squad-box, .menu-open .squad-box { display: none; }
@media (max-width: 520px) {
  .squad-box { flex-wrap: wrap; padding: 12px 40px 12px 14px; gap: 10px; }
  .squad-box .btn { width: 100%; text-align: center; }
  .has-squad-box .to-top, .has-squad-box .edit-page, .has-squad-box .live-pops { bottom: 168px; }
}
@media print { .squad-box { display: none !important; } }

/* the team sheet (My area → Manage team) */
.squad-matches { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.squad-matches::-webkit-scrollbar { display: none; }
.squad-matches a { flex: 0 0 auto; min-width: 150px; display: grid; gap: 1px; padding: 10px 14px; background: #fff; border-bottom: 4px solid transparent; }
.squad-matches a.on { border-bottom-color: var(--red); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.squad-matches b { font: 700 15px var(--font-head); text-transform: uppercase; }
.squad-matches span { font-size: 13px; }
.squad-matches small { font-size: 11px; font-weight: 700; color: var(--muted); }
.squad-matches small.ok { color: var(--green); }
.squad-form { padding: 16px 18px 18px; background: #fff; }
.squad-lead { margin: 0 0 14px; font-size: 14px; line-height: 1.5; max-width: 70ch; }
.squad-lead span { display: block; color: var(--muted); }
.squad-rows { display: grid; gap: 8px; margin-bottom: 16px; max-width: 520px; }
.squad-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 10px; }
.squad-row span { font: 700 14px var(--font-head); text-transform: uppercase; }
.squad-row select { width: 100%; }
.squad-saved { font-size: 13px; }
.squad-add { padding: 16px 18px 18px; background: #fff; border-top: 2px solid var(--head-row); }
.squad-add label { display: block; margin-bottom: 8px; font-size: 14px; }
.squad-add label small { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }
.squad-add-row { display: flex; gap: 8px; max-width: 520px; }
.squad-add-row input { flex: 1; min-width: 0; }
.squad-found { max-width: 520px; }
.squad-found p { margin: 12px 0 6px; font-size: 13px; font-weight: 700; }
.squad-hit { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin-top: 6px; background: var(--row-alt); border: 1px solid transparent; text-align: left; cursor: pointer; font: inherit; }
.squad-hit:hover { border-color: var(--green); background: #fff; }
.squad-hit b { display: block; }
.squad-hit small { color: var(--green); font-weight: 700; }
.sc-sheet { background: #e8f6ea; color: #07500d; padding: 9px 14px; font-size: 14px; margin: 8px 0; border-left: 5px solid var(--green); }
@media (max-width: 520px) { .squad-add-row { flex-wrap: wrap; } .squad-add-row .btn { width: 100%; } .squad-row { grid-template-columns: 64px minmax(0, 1fr); } }

/* ══ v15: Rich's eleventh round — mostly phones ══════════════════════════════════════ */
/* 1. iPhones zoom the whole page in when you tap a box whose text is smaller than 16px — and after
      logging in the page stayed zoomed, so everything was a little too wide for the screen.
      On phones and tablets every box you can type in or choose from is now 16px or more. */
@media (pointer: coarse), (max-width: 900px) {
  input, select, textarea { font-size: 16px !important; }
  .sc-points input { font-size: 17px !important; }
  .g-points input { font-size: 28px !important; }
  .search-bar input { font-size: 19px !important; }
}

/* 2. The list of suggestions under a text box (core/suggest.js). */
.suggest { position: absolute; z-index: 90; box-sizing: border-box; max-height: 250px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: #fff; border: 1px solid #b9b8ae; border-top: 2px solid var(--blue); border-radius: 0 0 8px 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, .22); }
.suggest button { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-bottom: 1px solid #eeede3;
  background: #fff; color: var(--ink); font: 16px/1.25 var(--font-body); text-align: left; cursor: pointer; }
.suggest button:last-of-type { border-bottom: 0; }
.suggest button span { font-weight: 700; }
.suggest button small { flex: none; max-width: 45%; color: var(--muted); font-size: 13px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest button:hover, .suggest button.on { background: #eaf3ff; }
.suggest-more { margin: 0; padding: 8px 12px; background: #f6f5ee; color: var(--muted); font-size: 13px; }
@media print { .suggest { display: none; } }

/* 3. Manage team: handicaps in their colours (the same ones as on the Handicaps page: green plus, pink minus) —
      in the squad list, and beside each frame once a player is picked. */
.squad-row { grid-template-columns: 78px minmax(0, 1fr) 58px; }
.squad-hc { font-style: normal; text-align: center; }
.squad-hc .hc-val { display: block; min-width: 0; padding: 7px 4px; font: 700 15px/1.2 var(--font-body); text-transform: none; }
.squad-hc .hc-val.zero { background: var(--row-alt); }
.squad-hc.none { color: var(--muted); font-size: 12px; }
.squad-key { margin: 0; padding: 10px 18px; background: #fff; border-top: 1px solid var(--row-alt); color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.squad-key { gap: 6px 14px; }
.squad-key span { white-space: nowrap; }
.squad-key .hc-val { min-width: 0; font-size: 12px; padding: 1px 7px; margin-right: 3px; }
@media (max-width: 520px) { .squad-row { grid-template-columns: 58px minmax(0, 1fr) 50px; gap: 8px; } .squad-row > span { font-size: 13px; } }

/* 4. Home page: Shield holders and CueView take far less room.
      Shield holders — one slim row per shield: its picture (uploaded under Admin → Leagues, small), the holders, since when. */
.shield-pic { flex: none; width: 46px; height: 46px; object-fit: contain; }
svg.shield-pic.placeholder { fill: #f0b323; }
svg.shield-pic.placeholder .shine { fill: rgba(255, 255, 255, .35); }
.shield-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--head-row); }
.shield-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px 10px 14px; background: #fff; color: var(--ink); }
.shield-row:hover { color: var(--ink); background: #fffdf5; }
.shield-row > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.shield-row small { font-size: 11px; line-height: 1.25; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.shield-row strong { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 18px/1.15 var(--font-head); text-transform: uppercase; }
.shield-row strong span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shield-row strong .badge { flex: none; width: 26px; height: 26px; font-size: 10px; }
.shield-row em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.shield-row > i { flex: none; font: 700 24px/1 var(--font-head); font-style: normal; color: var(--red); }
/* the shield's own page: the same picture beside "Current holders", instead of the big faint shield behind it */
.shield-now .shield-pic { width: 76px; height: 76px; margin-bottom: 2px; }
/* CueView — a small card each: photo, name, and a Q&A mark with the number of questions answered. */
.cv-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); background: #fff; overflow: hidden; }
.cv-chip { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 12px; background: #fff; color: var(--ink); box-shadow: 1px 0 0 var(--head-row), 0 1px 0 var(--head-row); }
.cv-chip:hover { color: var(--ink); background: #fffdf5; }
.cv-photo { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--red); }
.cv-chip > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cv-chip strong { font: 700 14.5px/1.15 var(--font-head); text-transform: uppercase; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.cv-chip small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-qa { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px 3px 5px; border-radius: 12px; background: var(--row-alt); color: var(--red); font: 700 12px/1 var(--font-head); }
.cv-qa svg { width: 16px; height: 16px; fill: currentColor; }
.cv-qa b { color: var(--ink); }
@media (max-width: 560px) {
  .cv-row { grid-template-columns: 1fr 1fr; }
  .cv-chip { gap: 8px; padding: 8px 8px 8px 10px; }
  .cv-photo { width: 36px; height: 36px; }
  .cv-chip strong { font-size: 13px; }
  .cv-qa { padding: 3px 5px 3px 4px; }
  .cv-qa b { display: none; }
  .shield-row strong { font-size: 17px; }
}

/* 5. The admin dashboard's warning when the website files are newer than the database (pages/admin.js). */
.db-behind { display: grid; gap: 8px; border-left: 6px solid var(--red); font-weight: 400; line-height: 1.5; }
.db-behind > b { font-size: 16px; }
.db-behind ol { margin: 0; padding-left: 22px; }
.db-behind code { background: rgba(0, 0, 0, .08); padding: 1px 5px; border-radius: 3px; font-size: .92em; }

/* 6. The classic scorecard on a phone. The table had five columns squeezed side by side, so a player's name
      was cut to a few letters. Each frame is now a block: its number down the left, then for each team its name,
      the player (as wide as the screen allows) with the points beside it, and the breaks underneath. */
@media (max-width: 640px) {
  .sc-table, .sc-table tbody, .sc-table tfoot { display: block; }
  .sc-table thead { display: none; }
  .sc-table tbody tr, .sc-table tfoot tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) 64px; grid-template-areas: "no pa xa" "no pb xb"; gap: 12px 8px; align-items: start;
    padding: 10px 8px 12px 0; background: #fff; border-bottom: 6px solid var(--cream, #f6f5ee); }
  .sc-table td { display: block; width: auto; padding: 0 !important; border: 0; }
  .sc-table td.sc-no { grid-area: no; align-self: stretch; width: auto; display: grid; place-items: center; margin: -10px 0 -12px; font-size: 19px; }
  .sc-table td:nth-child(1) { grid-area: pa; }
  .sc-table td:nth-child(2) { grid-area: xa; }
  .sc-table td:nth-child(4) { grid-area: pb; }
  .sc-table td:nth-child(5) { grid-area: xb; }
  .sc-table td[data-team]::before { content: attr(data-team); display: block; height: 14px; margin-bottom: 3px; font: 700 11px/14px var(--font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sc-slot { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sc-slot select { height: 44px; padding: 6px 8px; }
  .sc-slot .sc-breaks { height: 36px; padding: 4px 8px; }
  .sc-table td.sc-points { width: auto; padding-top: 17px !important; }
  .sc-points input { width: 100%; height: 44px; padding: 6px 2px; }
  .sc-table tfoot tr { background: var(--head-row); align-items: center; }
  .sc-table .sc-total-row td { background: none; }
  .sc-table .sc-total-row td.sc-points { padding-top: 0 !important; text-align: center; }
  .sc-frame-btns { padding: 12px 8px; }
  /* who won the frame: the points box is green already; here the team's name gets a tick instead of the bar down the side */
  .sc-table tr.won-a td:first-child, .sc-table tr.won-b td:nth-child(4) { box-shadow: none; }
  .sc-table tr.won-a td:first-child::before, .sc-table tr.won-b td:nth-child(4)::before { content: attr(data-team) "  ✓ won"; color: #0b7a1a; }
}

/* 7. Tables on a phone: a little less space between the columns, and long column headings may wrap onto two lines,
      so the public tables fit the screen instead of having to be slid sideways. (The admin's tables turn into cards.) */
@media (max-width: 480px) {
  table.data th { white-space: normal; line-height: 1.2; vertical-align: bottom; padding: 8px 5px; font-size: 12.5px; }
  table.data td { padding: 9px 5px; }
  table.data th:first-child, table.data td:first-child { padding-left: 10px; }
  table.data th:last-child, table.data td:last-child { padding-right: 10px; }
  table.data th.num { text-align: center; white-space: normal; }
}
@media (max-width: 400px) {
  table.data { font-size: 13px; }
  table.data th, table.data td { padding-left: 4px; padding-right: 4px; }
  table.data th:first-child, table.data td:first-child { padding-left: 8px; }
  table.data th:last-child, table.data td:last-child { padding-right: 8px; }
  table.data .team-cell { gap: 6px; }
  table.data .team-cell .badge, table.data .team-cell .avatar { width: 24px; height: 24px; font-size: 9px; }
}
/* A team's fixture list on a phone: one small block per match — teams and score, the date underneath, then the
   buttons (Enter scorecard, Postpone, Photos) on their own line where a thumb can reach them. */
@media (max-width: 560px) {
  .fx-list .table-scroll { overflow: visible; }
  .fx-list table.data, .fx-list table.data tbody { display: block; width: 100%; }
  .fx-list table.data thead { display: none; }
  .fx-list table.data tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name res out" "comp comp comp" "date date date" "act act act"; gap: 2px 10px; align-items: center; padding: 11px 12px; background: #fff; border-bottom: 1px solid var(--row-alt); }
  .fx-list table.data tbody tr:nth-child(even) { background: var(--row-alt); }
  .fx-list table.data td { display: block; padding: 0; background: none !important; text-align: left; white-space: normal; }
  .fx-list table.data td.hide-sm, .fx-list table.data td.fx-art { display: none; }
  .fx-list td.fx-name { grid-area: name; font-weight: 700; font-size: 15px; line-height: 1.3; }
  .fx-list td.fx-res { grid-area: res; }
  .fx-list td.fx-out { grid-area: out; }
  .fx-list td.fx-date { grid-area: date; font-size: 12.5px; color: var(--muted); }
  .fx-list td.fx-comp { grid-area: comp; font-size: 13px; }
  .fx-list td.fx-act { grid-area: act; margin-top: 8px; }
  .fx-list td.fx-act:empty { display: none; }
  .fx-list td.fx-act .btn-row { flex-wrap: wrap !important; gap: 8px; }
  .fx-list td.fx-act .btn { flex: 1 1 auto; min-height: 42px; }
  .fx-list .fx-none { display: none; }
}

/* 8. My area on a phone: every tab can be seen (they wrap onto two or three short rows) instead of
      running off the right-hand edge — "Profile" was cut in half and the last three could not be seen at all. */
@media (max-width: 640px) {
  .tabs { flex-wrap: wrap; overflow: visible; gap: 6px; border-bottom: 0; padding-bottom: 12px; margin-bottom: 18px; box-shadow: 0 3px 0 var(--red); }
  .tabs a { flex: 1 1 auto; padding: 10px 12px; font-size: 13.5px; text-align: center; }
  .tabs .tab-logout { flex: 1 1 auto; margin-left: 0; padding: 9px 12px; font-size: 13px; }
}

/* 9. My Snooker settings on a narrow phone: the two columns of teams share the width equally, and a long team
      name wraps, instead of pushing the page a few pixels wider than the screen. */
@media (max-width: 700px) {
  .ms-ticks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ms-tick { min-width: 0; }
  .ms-tick > span { overflow-wrap: anywhere; }
}

/* ══ v16: Rich's thirteenth round ═══════════════════════════════════════════════════════ */
/* 1. Every table looks like the league table: the row at the top is faded green (it was pink), with the
      points in a green pill on the player rankings. Pink stays for what needs a warning (relegation, losses). */
table.data tbody tr.hl td { background: var(--lt-top); font-weight: 700; }
table.data tbody tr.hl .lt-pts { font-size: inherit; }
/* a totals line (a player's "Total" season row) is bold on grey, not a highlight */
table.data tbody tr.total-row td { background: var(--head-row); font-weight: 700; }
/* A long list of players (rankings, breaks) shows the first ten — on phones and on big screens — with a button for the rest. */
.table-fold:not(.open) tr.ph-more { display: none; }
.table-fold-btn { display: block; width: 100%; padding: 13px 14px; border: 0; border-top: 1px solid var(--head-row); background: #fff; color: var(--red);
  font: 700 14px var(--font-head); text-transform: uppercase; letter-spacing: .03em; cursor: pointer; }
.table-fold-btn:hover { background: #fff7f8; }
.table-fold-btn::after { content: " ▾"; }
.table-fold.open .table-fold-btn::after { content: " ▴"; }
/* 3. My Snooker is its own page, opened from the menu: on big screens a gold star beside the person's initials,
      on phones the "★ My Snooker" button in the menu. The home page stays the same for everyone. */
.nav-icon.nav-mysnooker svg { fill: var(--yellow); }
.nav-icon.nav-mysnooker:hover svg { fill: #1b0e06; }
@media (max-width: 520px) { .nav-icon.nav-mysnooker { display: none; } }
/* 4. Player and Team of the week: a slim card each — picture on the left, the words beside it — instead of two tall boxes. */
.spotlights { gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.spotlight { display: flex; align-items: center; gap: 14px; padding: 12px 14px; text-align: left; justify-items: initial; }
.spotlight > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.spotlight .spot-label { position: static; justify-self: start; margin-bottom: 4px; padding: 3px 8px; font-size: 11px; }
.spotlight .spot-photo { flex: none; width: 60px; height: 60px; margin: 0; border-width: 3px; }
.spotlight .spot-badge { flex: none; }
.spotlight .spot-badge .badge { width: 60px; height: 60px; margin: 0; font-size: 17px; }
.spotlight strong { font-size: 18px; line-height: 1.1; }
.spotlight small { font-size: 12.5px; }
.spotlight p { margin: 3px 0 0; font-size: 13px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* 4b. Roles & permissions: the captain and vice captain columns (live scoring only) are set apart. */
.perm-table .perm-team { background: #f6f5ee; }
.perm-table thead th.perm-team { background: #e9e7da; }
.perm-table .perm-na span { color: #b8b6aa; }
/* 4c. Competition deadlines (core/comp-deadlines.js): the list in My area and on My Snooker, and the bar on the home page. */
.cd-box { background: #fff; border-left: 5px solid var(--yellow); padding: 14px 16px; }
.cd-head { margin: 0 0 10px; font-size: 17px; }
.cd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cd-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 8px; background: #f7f6ef; }
.cd-item.soon { background: #fff4d6; }
.cd-item.late { background: #fde7ec; }
.cd-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; font: 700 15px/1 var(--font-head); }
.cd-item.late .cd-ico { background: var(--red); color: #fff; }
.cd-item a { color: var(--ink); }
.cd-item a:hover b { color: var(--red); }
.cd-item b { display: block; font-size: 15px; line-height: 1.3; }
.cd-item p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; }
.cd-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 10px 14px; background: #fff4d6; border-left: 5px solid var(--yellow); color: var(--ink); font-size: 14px; }
.cd-bar.late { background: #fde7ec; border-left-color: var(--red); }
.cd-bar:hover { color: var(--ink); filter: brightness(.98); }
.cd-bar b { font: 700 13px var(--font-head); text-transform: uppercase; letter-spacing: .03em; }
.cd-bar span { min-width: 0; }
.cd-bar i { font-style: normal; font-weight: 700; color: var(--red); white-space: nowrap; }
@media (max-width: 720px) { .cd-bar { grid-template-columns: minmax(0, 1fr) auto; } .cd-bar span { grid-column: 1 / -1; grid-row: 2; } }
.deadline-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.deadline-round { margin: 0; padding: 10px 12px 2px; border: 1px solid var(--head-row); border-radius: 8px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; min-width: 0; }
.deadline-round input { min-width: 0; }
.deadline-round legend { padding: 0 6px; font: 700 13px var(--font-head); text-transform: uppercase; }
.deadline-round label { margin-bottom: 8px; font-size: 12px; }
.home-switch { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; cursor: pointer; }
.home-switch input { width: 16px; height: 16px; margin: 0; }
.wo-pick { display: block; margin: 6px auto 0; max-width: 190px; font-size: 12px; padding: 4px 6px; }
/* Round 37: walkover bar on the cup scorecard (staff only) */
.wo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 14px; border: 1px dashed var(--line, #ccc); border-radius: 10px; font-size: 14px; }
.wo-bar b { margin-right: 4px; }
/* 5. Admin → Branding → App icon: how the icon will look on an iPhone, an Android phone and as an installed app. */
.appicon-previews { display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0 10px; }
.appicon-previews figure { margin: 0; display: grid; justify-items: center; gap: 4px; }
.appicon-previews img { width: 64px; height: 64px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.appicon-previews .ai-apple { border-radius: 14px; }
.appicon-previews .ai-round { border-radius: 50%; }
.appicon-previews figcaption { font-size: 11px; font-weight: 400; color: var(--muted); }

/* ══ v17: Rich's fourteenth round ════════════════════════════════════════════════════ */
/* My Snooker settings: two choices for the Home button; "No news at all" above the news categories. */
.ms-place { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-nonews { margin-bottom: 10px; }
/* League tables: the relegation places' points in a red pill (like the leader's green one); within the promotion
   places and within the relegation places, every other row a lighter shade so neighbours stand apart. */
.lt-pts.down { background: var(--red); }
table.data tbody tr.lt-up.lt-alt td { background: #ecf8ed; }
table.data tbody tr.lt-down.lt-alt td { background: #fcedf0; }
/* The team you follow: cream with a dark edge, the same size as the other rows (it was green and bigger). */
table.data tbody tr.lt-mine td { background: var(--lt-mine); }
/* A league table in a narrow column — the sidebar, the side of My Snooker — tightens up like it does on a phone,
   so every column fits and the leader's name stays on one line. (Container query: it goes by the table's own width.) */
.lt-panel { container-type: inline-size; }
@container (max-width: 480px) {
  .lt-panel table.data { font-size: 13px; }
  .lt-panel table.data th, .lt-panel table.data td { padding-left: 4px; padding-right: 4px; }
  .lt-panel table.data th:first-child, .lt-panel table.data td:first-child { padding-left: 8px; }
  .lt-panel table.data th:last-child, .lt-panel table.data td:last-child { padding-right: 8px; }
  .lt-panel table.data th { font-size: 12px; white-space: normal; }
  .lt-panel table.data tbody tr.hl td { font-size: 14px; padding-top: 10px; padding-bottom: 10px; }
  .lt-panel table.data tbody tr.hl .badge, .lt-panel table.data .badge { width: 24px; height: 24px; font-size: 9px; }
  .lt-panel .team-cell { gap: 6px; }
  .lt-panel .lt-pos { flex-direction: column; gap: 2px; }
  .lt-panel .lt-mv { min-width: 0; font-size: 11px; }
  .lt-panel .lt-zone { width: 17px; height: 17px; font-size: 10px; }
  .lt-panel .lt-team { gap: 5px; }
  .lt-panel .lt-pts { min-width: 0; padding: 2px 7px; }
}
/* 4. Latest Competitions on the home page: two columns on bigger screens, instead of one long list with empty space beside it. */
@media (min-width: 640px) {
  .list-rows.comp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; padding-bottom: 8px; }
}
/* 5. Latest Results (home page and side column): green, the colour of Fixtures & Results — blue is News now. */
.panel-head.green { background: var(--green); color: #fff; }
a.panel-head.green:hover { color: #fff; }
.btn-bar.green { background: var(--green); }
/* 6. The My Snooker star in the menu bar carries the letters MS, like the initials beside it. */
.nav-icon.nav-mysnooker { position: relative; }
.nav-icon.nav-mysnooker svg { width: 34px; height: 34px; }
.nav-icon.nav-mysnooker b { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-38%); text-align: center; font: 700 9.5px/1 var(--font-head); letter-spacing: -.02em; color: #1b0e06; pointer-events: none; }
.nav-icon.nav-mysnooker:hover b { color: var(--yellow); }

/* ══ v18: the menu bar is one solid bar ══════════════════════════════════════════════
   It used to get slimmer once you scrolled, keeping a see-through strip below it so the page would not move.
   That strip showed the page scrolling underneath — the white band under the menu. Now the header is exactly
   as tall as the bar, at every scroll position, with nothing see-through around it. */
.site-header { min-height: 0; pointer-events: auto; }
.site-header.stuck .wrap { padding-top: 18px; padding-bottom: 18px; }
.site-header.stuck .logo img { height: var(--nav-h); }
@media (max-width: 900px) {
  .site-header.stuck .wrap { padding-top: 10px; padding-bottom: 10px; }
  .site-header.stuck .logo img { height: 44px; }
}

/* My Snooker settings: "Save my choices" sits at the bottom of the screen the whole time, so nobody has to
   scroll to the end of the form to save (and leave thinking it was saved). It turns yellow with "Not saved yet"
   as soon as anything is changed. */
.ms-set .form-actions { position: sticky; bottom: 0; z-index: 30; margin: 0 -1px; padding: 12px 74px 12px 16px; background: #fff;
  border-top: 1px solid var(--head-row); box-shadow: 0 -8px 20px rgba(0, 0, 0, .08); }
.ms-set .form-actions.dirty { background: #fff8db; border-top-color: var(--yellow); }
.ms-set .form-actions .ms-unsaved { display: none; font-weight: 700; color: #7a5b00; font-size: 14px; }
.ms-set .form-actions.dirty .ms-unsaved { display: inline; }
@media (max-width: 640px) {
  .ms-set .form-actions { padding: 10px 64px 10px 12px; }
  .ms-set .form-actions { flex-wrap: nowrap; gap: 8px; }
  .ms-set .form-actions .btn.green { flex: 1 1 auto; }
  .ms-set .form-actions [data-reset] { flex: none; padding-left: 14px; padding-right: 14px; }
  .ms-set .form-actions > .muted, .ms-set .form-actions.dirty .ms-unsaved { display: none; }
  .ms-set .form-actions.dirty .btn.green::after { content: " •"; color: var(--yellow); }
}

/* ══ v19: one Breaks box — the top three on a podium, the next few listed underneath ══════════ */
.bk-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px; padding: 14px 10px 0; background: #fff; }
.bk-pod { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 10px 4px 10px; border-radius: 10px 10px 0 0; color: var(--ink); text-align: center; }
.bk-pod:hover { color: var(--ink); }
.bk-pod .avatar { width: 46px; height: 46px; }
.bk-pod b { font: 700 30px/1 var(--font-head); }
.bk-pod small { max-width: 100%; font-size: 12px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.bk-rank { font: 700 11px/1 var(--font-head); text-transform: uppercase; letter-spacing: .06em; padding: 3px 7px; border-radius: 10px; color: #fff; }
.bk-pod.p1 { background: linear-gradient(#fff6d6, #ffeaa3); padding-top: 14px; padding-bottom: 16px; }
.bk-pod.p1 .avatar { width: 62px; height: 62px; box-shadow: 0 0 0 3px #f0b323; }
.bk-pod.p1 b { font-size: 44px; }
.bk-pod.p1 .bk-rank { background: #c99400; }
.bk-pod.p2 { background: linear-gradient(#f7f7f5, #e7e7e2); }
.bk-pod.p2 .bk-rank { background: #8a8a85; }
.bk-pod.p3 { background: linear-gradient(#fbf0e6, #f1dcc6); }
.bk-pod.p3 .bk-rank { background: #a8662d; }
.bk-pod.empty { visibility: hidden; }
.bk-rest { border-top: 3px solid var(--head-row); }
.bk-box .new-badge { margin-left: 8px; }

/* Latest Competitions: two columns on phones too (Rich, round 18) — a smaller picture and tighter text so each fits. */
@media (max-width: 639px) {
  .list-rows.comp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; padding-bottom: 8px; }
  .list-rows.comp-cols a { grid-template-columns: 36px minmax(0, 1fr); gap: 6px; }
  .list-rows.comp-cols img, .list-rows.comp-cols .ph { width: 36px; height: 36px; }
  .list-rows.comp-cols a > div { padding: 7px 6px; font-size: 12px; min-width: 0; }
  .list-rows.comp-cols strong { font-size: 13.5px; line-height: 1.2; overflow-wrap: anywhere; }
  .list-rows.comp-cols small { font-size: 11px; }
}

/* ── v20 (round 20) ─────────────────────────────────────────────── */
/* 1. Latest Competitions: every competition is one white card (picture and words inside it), the cards in a row are
      always the same height, and the trophy / emblem is never cut: it sits whole inside its circle (contain, not crop). */
.list-rows.comp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px 0 12px; }
.list-rows.comp-cols a { margin: 0; display: flex; align-items: center; gap: 12px; background: #fff; padding: 12px; border-left: 4px solid var(--yellow); min-width: 0; transition: box-shadow .15s, transform .15s; }
.list-rows.comp-cols a:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .12); transform: translateY(-1px); }
.list-rows.comp-cols a > div { background: none; padding: 0; min-width: 0; font-size: 13px; }
.list-rows.comp-cols strong { font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.list-rows.comp-cols small { font-size: 12px; margin-top: 2px; }
.list-rows.comp-cols .cc-prog { display: block; margin-top: 4px; font-weight: 600; color: #333; }
.list-rows.comp-cols .ph, .list-rows.comp-cols .cc-pic { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; overflow: hidden; }
.list-rows.comp-cols .cc-pic img { width: 82%; height: 82%; border-radius: 0; object-fit: contain; }
.list-rows.comp-cols .trophy-ph .trophy { width: 62%; height: 74%; border-radius: 0; object-fit: contain; }
@media (max-width: 639px) {
  .list-rows.comp-cols { gap: 8px; padding: 8px 0 10px; }
  .list-rows.comp-cols a { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 10px; grid-template-columns: none; }
  .list-rows.comp-cols .ph, .list-rows.comp-cols .cc-pic { width: 46px; height: 46px; }
  .list-rows.comp-cols a > div { font-size: 12.5px; }
  .list-rows.comp-cols strong { font-size: 14px; }
  .list-rows.comp-cols small { font-size: 11.5px; }
}
/* The same cut-off anywhere else: a trophy picture is never rounded or cropped. */
img.trophy { border-radius: 0; object-fit: contain; }
/* 2. The menu bar. The person button: once logged in it is the person icon in white on red (not initials such as
      "LA", which a newcomer could read as a league's name). The My Snooker star: just the star (no "MS"), and on
      phones too (it was hidden there, so phones only had it inside the menu). */
.nav-account.in svg { fill: #fff; }
.nav-account.in:hover svg { fill: var(--red); }
.nav-icon.nav-mysnooker svg { width: 26px; height: 26px; }
@media (max-width: 520px) { .nav-icon.nav-mysnooker { display: grid; } }
@media (max-width: 400px) { .site-header .nav-icons { gap: 4px; } .site-header .nav-icon { width: 38px; height: 38px; } .nav-account svg { width: 24px; height: 24px; } .nav-icon.nav-mysnooker svg { width: 23px; height: 23px; } }
@media (max-width: 350px) { .site-header .nav-icon { width: 35px; height: 35px; } .site-header .nav-icon svg { width: 19px; height: 19px; } }
/* 5. Body text in Space Grotesk, like the headings (Rich, round 20). Questrial is still in Admin → Branding → Body text. */
:root { --font-body: "Space Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif; }
/* 6. Write news step by step (Admin → Website): one big, plain question at a time. */
.nw-invite { display: flex; flex-direction: column; gap: 2px; background: var(--green); color: #fff; padding: 14px 18px; margin-bottom: 18px; border-left: 6px solid var(--yellow); }
.nw-invite b { font: 700 18px var(--font-head); text-transform: uppercase; }
.nw-invite span { font-size: 14px; opacity: .92; }
.nw-invite:hover { background: #087a10; color: #fff; }
.nw { max-width: 760px; }
.nw-steps { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.nw-steps li > * { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: var(--muted); font-size: 11.5px; line-height: 1.15; text-align: center; }
.nw-steps b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e2e0d2; color: #555; font: 700 14px var(--font-head); }
.nw-steps li.on > * { color: #111; font-weight: 700; }
.nw-steps li.on b { background: var(--red); color: #fff; box-shadow: 0 0 0 4px rgba(232, 0, 61, .18); }
.nw-steps li.done b { background: var(--green); color: #fff; }
.nw-steps li.done button { cursor: pointer; }
.nw-steps li.done button:hover span { text-decoration: underline; }
.nw-count { margin: 10px 0 8px; font-weight: 700; color: var(--muted); font-size: 14px; }
.nw-card { background: #fff; padding: 22px; border-top: 6px solid var(--red); display: grid; gap: 14px; }
.nw-card h2 { font-size: 24px; text-transform: none; letter-spacing: 0; }
.nw-optional { font: 400 16px var(--font-body); color: var(--muted); }
.nw-tip { margin: -6px 0 0; color: #444; font-size: 15px; }
.nw-card input:not([type=checkbox]), .nw-card textarea, .nw-card select { width: 100%; font-size: 18px; padding: 12px 14px; border: 2px solid #cfcdbd; border-radius: 6px; background: #fff; }
.nw-card input:focus, .nw-card textarea:focus, .nw-card select:focus { border-color: var(--green); outline: none; }
.nw-card label { display: grid; gap: 6px; font-weight: 700; }
.nw-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.nw-choices button { padding: 16px 12px; font: 700 16px var(--font-head); border: 2px solid #cfcdbd; background: #faf9f1; cursor: pointer; border-radius: 6px; }
.nw-choices button:hover { border-color: var(--green); }
.nw-choices button.on { background: var(--green); border-color: var(--green); color: #fff; }
.nw-pic { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: start; padding: 12px; background: #faf9f1; border-radius: 6px; }
.nw-pic small { display: block; color: var(--muted); margin: 2px 0 10px; }
.nw-pic-show { width: 150px; aspect-ratio: 16 / 10; background: #e9e7da; display: grid; place-items: center; overflow: hidden; color: var(--muted); font-size: 13px; }
.nw-pic-show.round { width: 110px; aspect-ratio: 1; border-radius: 50%; justify-self: center; }
.nw-pic-show img { width: 100%; height: 100%; object-fit: cover; }
.nw-busy { margin: 8px 0 0; font-weight: 700; color: var(--green); }
.nw-ticks { display: grid; gap: 8px; }
.nw-card .nw-tick { display: flex; align-items: center; gap: 14px; padding: 14px; border: 2px solid #cfcdbd; border-radius: 6px; cursor: pointer; font-weight: 400; }
.nw-tick:has(input:checked) { border-color: var(--green); background: #eef8ee; }
.nw-tick input { width: 26px; height: 26px; flex: none; accent-color: var(--green); }
.nw-tick b { display: block; font-size: 17px; }
.nw-tick small { color: var(--muted); font-size: 14px; }
.nw-sum { margin: 0; display: grid; gap: 0; }
.nw-sum > div { display: grid; grid-template-columns: 140px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid #ecebe2; align-items: center; }
.nw-sum dt { font-weight: 700; }
.nw-sum dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.nw-sum img { width: 110px; aspect-ratio: 16 / 10; object-fit: cover; margin-right: 8px; vertical-align: middle; }
.nw-sum img.round { width: 56px; aspect-ratio: 1; border-radius: 50%; }
.nw-buttons { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.nw-go { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.btn.big { font-size: 18px; padding: 14px 26px; }
.linkish { background: none; border: 0; padding: 0; color: var(--red); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.nw-foot { margin-top: 14px; font-size: 14px; }
.nw-done { text-align: center; justify-items: center; border-top-color: var(--green); }
@media (max-width: 639px) {
  .nw-steps { gap: 2px; }
  .nw-steps li > * > span { display: none; }
  .nw-steps li.on > * > span { display: none; }
  .nw-steps b { width: 28px; height: 28px; font-size: 13px; }
  .nw-card { padding: 16px; }
  .nw-card h2 { font-size: 21px; }
  .nw-pic { grid-template-columns: 1fr; }
  .nw-pic-show { width: 100%; }
  .nw-sum > div { grid-template-columns: 1fr auto; }
  .nw-sum dt { grid-column: 1 / -1; margin-bottom: -6px; }
  .nw-buttons .btn { flex: 1; }
  .nw-go { width: 100%; }
  .nw-go .btn { flex: 1; }
}
.nw-card textarea[name=lead], .nw-card textarea[name=quote_text] { min-height: 96px; }
/* Round 20b — "the whole site in Space Grotesk" (Rich): buttons don't take the page's font by themselves (browsers
   give them their own), so every button now takes it too. Buttons with their own style (.btn etc.) keep theirs. */
button { font-family: inherit; }
/* Write news: "Your articles" under the steps (change your own). */
.nw .panel { margin-top: 22px; }
.nw-mine > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #fff; border-bottom: 1px solid #ecebe2; }
.nw-mine b { display: block; }
.nw-mine small { color: var(--muted); }
.nw-mine .btn-row { flex: none; gap: 6px; }
.nw-editing { color: var(--red); }
@media (max-width: 639px) { .nw-mine > div { flex-direction: column; align-items: flex-start; } }

/* ── v21 (round 21) ─────────────────────────────────────────────── */
/* 2. Team emblems were cut off at the bottom on phones: an emblem's box is also called "logo", so on phones it took the
      menu bar logo's height (44px) inside its 24px circle. An emblem picture now always fits its box, whole. */
.badge.logo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; border-radius: 0; }
.award-face.emblem img, .award-face img.trophy { object-fit: contain; }
/* The ticker on phones: a tap counted as "the finger is over it" and kept it paused, so ▶ could not start it again.
   Only a real mouse pauses it on hover now; on a touch screen the button alone stops and starts it. */
@media (hover: none) {
  .ticker:hover:not(.paused) .ticker-track { animation-play-state: running; }
  .feature-box.scrolling:hover:not(:focus-within) .ticker-track { animation-play-state: running; }
}
/* 4. The notifications panel: room under each heading ("FROM THE LEAGUE") before its box. */
.drawer-h { margin: 14px 0 6px; }
.award-face.emblem .badge.logo { padding: 7px; background: #fff; }
/* Round 21: news waiting for the Master Admin's approval. */
.art-preview { margin: 0; text-align: center; }
.art-league { margin: 18px 0 -4px; font-size: 22px; }
.appr { display: grid; grid-template-columns: 200px 1fr; gap: 18px; background: #fff; padding: 16px; border-left: 6px solid var(--yellow); }
.appr img, .appr-ph { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #e9e7da; }
.appr h3 { margin: 4px 0 8px; text-transform: none; letter-spacing: 0; font-size: 21px; }
.appr small { color: var(--muted); }
.appr-lead { font-weight: 700; margin: 0 0 6px; }
.appr-text { margin: 0 0 14px; color: #333; white-space: pre-line; }
@media (max-width: 639px) { .appr { grid-template-columns: 1fr; } }
/* (A percentage height inside a grid box is ignored, so a tall emblem grew past its box: the box is a plain block now.) */
.badge.logo { display: block; }
.badge.logo img { display: block; object-position: center; }

/* ══ Round 22 (Rich's feedback, 15 Oct) ══════════════════════════════════════════════════ */
/* 1. Every break is highlighted, league or competition: a gold pill wherever a break is shown. */
.tally.brk { background: #ffe39a; color: #5a3d00; min-width: 34px; }
.brk-list { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.brk-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.brk-item .tally { height: 24px; min-width: 30px; font-size: 13px; }
.break-list b { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 13px; background: #ffe39a; color: #5a3d00; }
.break-list b.best { background: var(--yellow); color: #1b0e06; }
.sc-breaks:not(:placeholder-shown) { background: #fff3c4; border-color: #e8b923; font-weight: 700; }
/* 2. Live scoring: once every ball is off the table the balls can't be pressed; a note says to end the frame. */
.pad-cleared { margin: 0 0 12px; }
/* 3. The home page banner: the round news picture is now a landscape (16:9) picture. The headline has about 70% of
      the width and the picture 30%; headlines are kept to three lines (and 70 characters in the dashboard). */
.hero-slide { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); align-items: center; gap: 28px; }
.hero-slide > .hero-text:only-child { grid-column: 1 / -1; }
.hero-text { max-width: none; min-width: 0; }
.hero-text h2 { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.hero-pic-link { display: block; border-radius: 6px; overflow: hidden; border: 5px solid rgba(90, 90, 90, .75); transition: transform .2s, border-color .2s; }
.hero-pic-link:hover { transform: scale(1.02); border-color: var(--red); }
.hero-pic { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 720px) {
  .hero-slide { grid-template-columns: 1fr; }
  .hero-pic-link { display: none; }
}
/* 4. The menu bar: a button with a colour of its own (Admin → Website → Menu). */
.nav-own { background: var(--own) !important; color: var(--own-ink) !important; }
.foot-news { margin: 6px 0 10px; text-align: center; }
.foot-news a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 5. Pop-ups: home page adverts and the newsletter sign-up. */
.pop-shade { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .62); opacity: 0; transition: opacity .2s; }
.pop-shade.in { opacity: 1; }
.pop-box { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); transform: translateY(10px) scale(.98); transition: transform .2s; }
.pop-shade.in .pop-box { transform: none; }
.pop-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .72); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.pop-x:hover { background: var(--red); }
.pop-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pop-body { padding: 22px 24px 24px; }
.pop-body h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.2; }
.pop-body p { margin: 0 0 16px; color: #333; }
.pop-btn { display: inline-flex; }
.pop-advert.is-image .pop-box { width: min(620px, 100%); background: transparent; box-shadow: none; }
.pop-full-link, .pop-full { display: block; width: 100%; }
.pop-full { max-height: calc(100vh - 40px); object-fit: contain; }
.pop-kicker { display: inline-block; margin-bottom: 8px; padding: 3px 8px; background: var(--yellow); color: #1b0e06; font: 700 12px var(--font-head); text-transform: uppercase; letter-spacing: .04em; }
.pop-form { gap: 10px; }
.pop-form .btn { width: 100%; justify-content: center; }
.pop-small { margin: 8px 0 0 !important; font-size: 12.5px; }
.nl-page p:first-child { margin-top: 0; }

/* 6. The marketplace. */
.mk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mk-head h1 { margin-bottom: 8px; }
.mk-intro { max-width: 760px; color: #333; }
.mk-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 14px; }
.mk-tools input[type=search] { flex: 1 1 240px; max-width: 360px; padding: 10px 12px; border: 1px solid #ccc; font: inherit; }
.mk-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-cats button { padding: 8px 12px; border: 1px solid #ccc; background: #fff; font: 700 13px var(--font-head); cursor: pointer; }
.mk-cats button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.mk-card { display: flex; flex-direction: column; background: #fff; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.mk-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
.mk-card.sold { opacity: .72; }
.mk-pic { position: relative; display: block; aspect-ratio: 4 / 3; background: #e9e7da; overflow: hidden; }
.mk-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-ph { display: grid; place-items: center; height: 100%; font-size: 42px; }
.mk-ph.big { aspect-ratio: 4 / 3; font-size: 80px; background: #e9e7da; }
.mk-price { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; background: var(--yellow); color: #1b0e06; font: 700 16px var(--font-head); }
.mk-card.sold .mk-price { background: var(--ink); color: #fff; }
.mk-body { display: grid; gap: 4px; padding: 12px 14px 16px; }
.mk-body small { color: var(--muted); font-size: 12.5px; }
.mk-body strong { font: 700 17px/1.3 var(--font-head); }
.mk-status { display: inline-block; padding: 3px 8px; font: 700 12px var(--font-head); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.mk-status.s-pending { background: #fff0c8; color: #6b4a00; }
.mk-status.s-approved { background: #c9efcf; color: #0b5d1a; }
.mk-status.s-rejected { background: #f9cdd7; color: #a10029; }
.mk-status.s-sold { background: var(--ink); color: #fff; }
.mk-ad { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; background: #fff; padding: 20px; align-items: start; }
.mk-ad-pic button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.mk-ad-pic img { display: block; width: 100%; max-height: 520px; object-fit: contain; background: #f2f1e8; }
.mk-ad-body h1 { margin: 6px 0 4px; }
.mk-ad-price { margin: 0 0 14px; font: 700 28px var(--font-head); color: var(--red); }
.mk-contact { margin: 18px 0 10px; padding: 14px 16px; background: #f2f9f3; border-left: 5px solid var(--green); }
.mk-contact p { margin: 4px 0 0; font-size: 17px; }
.mk-contact a { color: var(--green); font-weight: 700; }
.mk-note { font-size: 13px; }
.mk-upload { display: grid; gap: 10px; margin: 4px 0 12px; }
.mk-upload .image-preview { width: 220px; height: 165px; }
@media (max-width: 760px) { .mk-ad { grid-template-columns: 1fr; padding: 14px; gap: 16px; } }

/* 7. Match night chat. */
.cm-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-left: 6px; padding: 0 6px; border-radius: 12px; background: rgba(255, 255, 255, .25); font-size: 13px; }
.cm { display: grid; gap: 14px; }
.cm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-height: 520px; overflow: auto; }
.cm-item { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; }
.cm-item.is-hidden { opacity: .55; }
.cm-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 13px var(--font-head); }
.cm-item.mine .cm-av { background: var(--red); }
.cm-meta { margin: 0; font-size: 13.5px; }
.cm-meta time { color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.cm-body { margin: 3px 0 0; padding: 9px 12px; background: #f2f1e8; border-radius: 0 12px 12px 12px; white-space: pre-line; overflow-wrap: anywhere; }
.cm-item.mine .cm-body { background: #fde6ec; }
.cm-acts { display: inline-flex; gap: 12px; margin-top: 4px; }
.cm-acts button { padding: 0; border: 0; background: none; color: var(--muted); font: 600 12.5px inherit; text-decoration: underline; cursor: pointer; }
.cm-acts button:hover { color: var(--red); }
.cm-flag { display: inline-block; padding: 1px 6px; background: #fff0c8; color: #6b4a00; font-size: 11.5px; font-weight: 700; }
.cm-empty { margin: 0; }
.cm-form { display: grid; gap: 8px; }
.cm-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #ccc; font: inherit; resize: vertical; min-height: 64px; }
.cm-send { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cm-login { margin: 0; }

/* 8. Two-step login. */
.ts-h { margin: 0 0 10px; }
.ts-steps { margin: 0 0 8px; padding-left: 20px; }
.ts-steps li { margin-bottom: 6px; }
.ts-qr img { display: block; width: 190px; height: 190px; margin: 6px 0 8px; padding: 8px; background: #fff; border: 1px solid #ddd; image-rendering: pixelated; }
.ts-secret code { word-break: break-all; font-size: 13px; }
.ts-form input[name=code] { max-width: 180px; font: 700 22px/1 var(--font-head); letter-spacing: .14em; text-align: center; }

/* 9. The dashboard's new pages. */
.admin-version { margin: 10px 4px 0; color: var(--muted); font-size: 12px; text-align: center; }
.adm-h { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; font-size: 20px; }
.nl-status { display: inline-block; padding: 3px 8px; font: 700 12px var(--font-head); text-transform: uppercase; }
.nl-status.s-draft { background: var(--head-row); }
.nl-status.s-sending { background: #fff0c8; color: #6b4a00; }
.nl-status.s-sent { background: #c9efcf; color: #0b5d1a; }
.nl-top { margin-bottom: 16px; }
.nl-build { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: start; }
.nl-blocks { display: grid; gap: 12px; }
.nlb { background: #fff; border-left: 5px solid var(--yellow); }
.nlb-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #f6f5ec; }
.nlb-tools { display: inline-flex; gap: 4px; }
.nlb-tools button { width: 30px; height: 30px; border: 1px solid #ccc; background: #fff; cursor: pointer; font-size: 14px; }
.nlb-tools button:hover:not(:disabled) { background: var(--ink); color: #fff; }
.nlb-tools button:disabled { opacity: .35; cursor: default; }
.nlb-body { padding: 12px; gap: 10px; }
.nlb-body label { margin: 0; }
.nlb-img { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.nlb-img img { width: 120px; height: 72px; object-fit: cover; border: 1px solid #ddd; }
.nlb-cols { display: grid; gap: 10px; }
.nlb-cols.c2 { grid-template-columns: 1fr 1fr; } .nlb-cols.c3 { grid-template-columns: 1fr 1fr 1fr; }
.nlb-cols fieldset { margin: 0; padding: 8px; border: 1px solid #ddd; min-width: 0; display: grid; gap: 8px; }
.nlb-cols legend { font-weight: 700; font-size: 13px; }
.nlb-color { display: inline-flex; gap: 8px; align-items: center; }
.nlb-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px; background: #fff; }
.nlb-add span { font-weight: 700; margin-right: 4px; }
.nl-preview-col { position: sticky; top: calc(var(--header-h, 70px) + 12px); }
.nl-preview-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--ink); color: #fff; }
.seg { display: inline-flex; }
.seg button { padding: 6px 10px; border: 1px solid #888; background: transparent; color: inherit; font: 600 12.5px inherit; cursor: pointer; }
.seg button.on { background: #fff; color: var(--ink); }
.nl-preview { max-height: 78vh; overflow: auto; background: #eee; }
.nl-preview.phone { width: 380px; max-width: 100%; margin: 0 auto; }
@media (max-width: 1000px) { .nl-build { grid-template-columns: 1fr; } .nl-preview-col { position: static; } .nlb-cols.c3 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .nlb-cols.c2 { grid-template-columns: 1fr; } }

.mn-preview { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 14px; background: #000; padding: 8px; }
.mn-preview > span { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; font: 700 15px var(--font-head); text-transform: uppercase; }
.mn-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.mn-row { display: grid; grid-template-columns: 24px auto minmax(110px, 1fr) minmax(140px, 1.4fr) minmax(170px, auto) auto; gap: 8px; align-items: center; padding: 8px; background: #fff; border: 1px solid #e3e3e3; }
#mn-list-more .mn-row, [data-list=more] .mn-row { grid-template-columns: 24px minmax(110px, 1fr) minmax(140px, 1.4fr) auto; }
.mn-row.off { opacity: .55; }
.mn-row.dragging { opacity: .4; }
.mn-row.over { outline: 2px dashed var(--red); }
.mn-grip { cursor: grab; color: var(--muted); font-weight: 700; letter-spacing: -2px; user-select: none; }
.mn-row input, .mn-row select { width: 100%; padding: 8px; border: 1px solid #ccc; font: inherit; min-width: 0; }
.mn-show { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; white-space: nowrap; }
.mn-show input { width: auto; }
.mn-colour { display: inline-flex; gap: 6px; align-items: center; }
.mn-colour input[type=color] { width: 40px; height: 36px; padding: 2px; }
.mn-move { display: inline-flex; gap: 4px; }
.mn-move button { width: 32px; height: 34px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
.mn-move button:disabled { opacity: .35; }
@media (max-width: 800px) { .mn-row, [data-list=more] .mn-row { grid-template-columns: 24px 1fr auto; } .mn-row .mn-href, .mn-row .mn-colour { grid-column: 2 / -1; } }

.seo-count { float: right; color: var(--muted); font-weight: 400; }
.seo-count.over { color: var(--red); font-weight: 700; }
.seo-url { display: block; padding: 9px 0; overflow-wrap: anywhere; font-weight: 400; }
.seo-previews { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin: 6px 0 14px; }
.seo-previews > div { display: grid; gap: 3px; align-content: start; padding: 12px; background: #fff; border: 1px solid #e3e3e3; font-family: Arial, sans-serif; }
.seo-previews small { color: var(--muted); font: 700 11px var(--font-head); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.g-url { color: #202124; font-size: 13px; overflow-wrap: anywhere; }
.g-title { color: #1a0dab; font-size: 19px; line-height: 1.3; }
.g-text { color: #4d5156; font-size: 13.5px; line-height: 1.5; }
.seo-social img, .seo-noimg { width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; background: #e9e7da; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.seo-social .s-url { color: #65676b; font-size: 12px; text-transform: uppercase; margin-top: 6px; }
.seo-social b { font-size: 15px; } .seo-social span:last-child { color: #65676b; font-size: 13px; }
@media (max-width: 760px) { .seo-previews { grid-template-columns: 1fr; } }

.lk-sum { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.lk-pill { padding: 5px 10px; font: 700 13px var(--font-head); }
.lk-pill.ok { background: #c9efcf; color: #0b5d1a; } .lk-pill.bad { background: #f9cdd7; color: #a10029; } .lk-pill.warn { background: #fff0c8; color: #6b4a00; }
.lk-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.lk-dot.ok { background: var(--live-green); } .lk-dot.bad { background: var(--red); } .lk-dot.warn { background: var(--soon-orange); }
.lk-url { overflow-wrap: anywhere; font-weight: 600; }
.lk-why { color: var(--red); font-weight: 700; }
.lk-where { display: block; margin-bottom: 4px; font-size: 13.5px; }

.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.pf-tile { display: grid; gap: 4px; padding: 14px; background: #f6f5ec; border-top: 5px solid #bbb; }
.pf-tile.ok { border-color: var(--live-green); } .pf-tile.warn { border-color: var(--soon-orange); } .pf-tile.bad { border-color: var(--red); }
.pf-tile small { font: 700 12px var(--font-head); text-transform: uppercase; color: var(--muted); }
.pf-tile b { font: 700 28px var(--font-head); }
.pf-tile span { font-size: 13px; color: #444; }
.pf-list { margin: 0; padding-left: 20px; } .pf-list li { margin-bottom: 6px; }

.sec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sec-list li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; }
.sec-tick { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-weight: 700; }
.sec-tick.ok { background: var(--green); } .sec-tick.warn { background: var(--soon-orange); }
.sec-h { margin: 22px 0 6px; font-size: 18px; } .sec-h:first-child { margin-top: 0; }
.sec-slug { display: flex; align-items: center; border: 1px solid #ccc; background: #fff; max-width: 560px; }
.sec-slug span { padding: 0 2px 0 10px; color: var(--muted); white-space: nowrap; font-weight: 400; }
.sec-slug input { border: 0 !important; flex: 1; min-width: 80px; }
.sec-radios, .sec-roles { display: grid; gap: 4px; }
.sec-roles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 10px 0; }
.sec-you { padding: 12px 14px; background: #fff0c8; margin: 8px 0; }
.sec-you.ok { background: #e3f6e6; }
.sec-you [data-sec-2fa]:not(:empty) { margin-top: 12px; padding: 14px; background: #fff; }
.sec-reset { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e3e3e3; }

.ver-now { display: grid; gap: 4px; margin-bottom: 16px; border-left: 6px solid var(--green); padding: 14px 16px; }
.ver-now small { color: var(--muted); font: 700 12px var(--font-head); text-transform: uppercase; }
.ver-now b { font: 700 24px var(--font-head); }
.ver-now ul { margin: 6px 0 0; padding-left: 20px; columns: 2 280px; font-size: 14px; }
.ver-live { display: inline-block; padding: 2px 7px; background: var(--live-green); color: #fff; font: 700 11.5px var(--font-head); text-transform: uppercase; }
.ver-state { font-weight: 700; } .ver-state.s-ready { color: var(--green); } .ver-state.s-error, .ver-state.s-rejected { color: var(--red); }
.ver-changes { font-size: 13.5px; }
.mn-preview .nav-live { color: #fff; }
.sec-list { padding: 4px 0; }
.ts-form input[name=code] { max-width: 200px !important; }
.sec-you { margin: 0 0 16px; }
.celebrate-note { margin: 10px 0 0; font-size: 11.5px; opacity: .8; }
.tally.brk.prov { background: #fff3c4; outline: 1px dashed #d9a400; }
.prov-note { color: #6b4a00; }

/* ══ Round 23 (Rich's feedback, 16 Oct) ═══════════════════════════════════════════════════ */
/* Add to home screen: the guide, and the small bar on phones. */
.menu-a2hs { grid-column: 1 / -1; }
.a2hs-guide { position: fixed; inset: 0; z-index: 160; display: grid; align-items: end; justify-items: center; padding: 12px; background: rgba(0, 0, 0, .6); }
.a2hs-card { position: relative; width: min(460px, 100%); max-height: calc(100vh - 24px); overflow: auto; padding: 22px 20px 18px; background: #fff; border-radius: 16px 16px 10px 10px; }
.a2hs-card h2 { margin: 0 34px 10px 0; font-size: 21px; line-height: 1.2; }
.a2hs-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #eee; font-size: 22px; cursor: pointer; }
.a2hs-steps { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 10px; }
.a2hs-steps li { display: grid; grid-template-columns: 26px 38px 1fr; gap: 10px; align-items: center; font-size: 15px; }
.a2hs-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font: 700 14px var(--font-head); }
.a2hs-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #2b2b2e; }
.a2hs-ico svg { width: 22px; height: 22px; fill: #fff; }
.a2hs-steps small { display: block; color: var(--muted); font-size: 12.5px; }
.a2hs-small { color: var(--muted); font-size: 13px; margin: 6px 0 12px; }
.a2hs-ok { width: 100%; justify-content: center; }
.a2hs-point { margin-top: 12px; text-align: center; font: 700 13px var(--font-head); color: var(--red); animation: a2hsBob 1.2s ease-in-out infinite; }
@keyframes a2hsBob { 50% { transform: translateY(5px); } }
.a2hs-bar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 140; display: grid; grid-template-columns: 38px 1fr auto 30px; gap: 10px; align-items: center;
  padding: 10px 10px 10px 12px; background: #111; color: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); animation: a2hsIn .3s ease-out; }
@keyframes a2hsIn { from { transform: translateY(30px); opacity: 0; } }
.a2hs-bar-ico svg { width: 30px; height: 30px; fill: var(--yellow); }
.a2hs-bar b { display: block; font: 700 15px var(--font-head); }
.a2hs-bar small { color: #ccc; font-size: 12.5px; }
.a2hs-later { border: 0; background: none; color: #aaa; font-size: 24px; cursor: pointer; }
/* Home page banner layouts (Site settings → Home page banner → Banner layout). */
.hero.hero-l-text .hero-pic-link { display: none; }
.hero.hero-l-text .hero-slide { grid-template-columns: 1fr; }
.hero-bgs { position: absolute; inset: 0; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: #000 center 30% / cover no-repeat; opacity: 0; transition: opacity .9s; }
.hero-bg.on { opacity: 1; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 75%), linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 45%); }
.hero.hero-l-big { background: #000; }
.hero.hero-l-big .hero-inner { min-height: clamp(380px, 46vw, 600px); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 26px; }
.hero.hero-l-big .hero-slide { grid-template-columns: minmax(0, 1fr); }
.hero.hero-l-big .hero-pic-link { display: none; }
.hero.hero-l-big .hero-text { max-width: 920px; }
.hero.hero-l-big .hero-text h2 span { background: none; padding: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }
.hero.hero-l-big .hero-text h2 { font-size: clamp(28px, 3.8vw, 50px); line-height: 1.1; margin-left: 0; }
@media (max-width: 720px) { .hero.hero-l-big .hero-inner { min-height: 360px; } .hero.hero-l-big .hero-text h2 { font-size: 28px; } }
.hero.hero-l-big .live-strip-wrap { position: relative; }
/* Side adverts. */
.ad-slot { display: grid; gap: 12px; }
.ad-box { position: relative; background: #fff; border: 1px solid #e3e3e3; }
.ad-label { position: absolute; top: 6px; right: 6px; z-index: 1; padding: 1px 6px; background: rgba(0, 0, 0, .6); color: #fff; font: 600 10.5px var(--font-head); text-transform: uppercase; letter-spacing: .05em; }
.ad-pic { display: block; } .ad-pic img { display: block; width: 100%; height: auto; }
.ad-text { padding: 12px 14px 14px; } .ad-text b { font: 700 17px var(--font-head); } .ad-text p { margin: 6px 0 10px; font-size: 14px; color: #333; }
.ad-inline { margin: 14px auto 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ad-inline .ad-box { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .ad-inline .ad-box:has(.ad-pic):has(.ad-text) { grid-template-columns: 220px 1fr; align-items: center; } }
/* Rules help: the button on the scorecards, and the search. */
.rh-btn { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 90; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 10px; border: 0; border-radius: 24px;
  background: var(--blue); color: #fff; font: 700 14px var(--font-head); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); cursor: pointer; }
.rh-btn span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--blue); }
.rh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rh-chips button { padding: 6px 10px; border: 1px solid #ccc; border-radius: 16px; background: #fff; cursor: pointer; font: 600 13px inherit; }
.rh-hit { border-bottom: 1px solid #eee; padding: 10px 4px; }
.rh-hit summary { cursor: pointer; display: grid; gap: 2px; }
.rh-hit summary small { color: var(--muted); font-size: 12px; }
.rh-text { padding: 8px 0; font-size: 14.5px; }
.rh-text mark, .rh-hit mark { background: #ffe39a; }
/* Latest results: emblems, a score pill, and more on hover (or a tap on ⌄). */
.res-rich { display: grid; }
.res-card { position: relative; border-bottom: 1px solid #eee; }
.res-card:last-child { border-bottom: 0; }
.res-rich .res-mini { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px 8px; padding: 10px 34px 10px 12px; border: 0; }
.res-rich .res-mini small { grid-column: 1 / -1; text-align: center; }
.res-team { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 13.5px; }
.res-team:first-of-type { justify-content: flex-end; text-align: right; }
.res-team em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-team .badge { flex: none; width: 26px; height: 26px; font-size: 9px; }
.res-team.won { color: var(--green); } .res-team.lost { color: #777; }
.res-pill { display: inline-flex; border-radius: 6px; overflow: hidden; font: 700 15px var(--font-head); }
.res-pill i { font-style: normal; min-width: 26px; padding: 4px 6px; text-align: center; background: #222; color: #fff; }
.res-pill i.w { background: var(--green); }
.res-rich .res-head { width: 100%; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; }
.res-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eee; font-size: 14px; line-height: 1; transition: transform .25s; }
.res-card.open .res-toggle { transform: translateY(-50%) rotate(180deg); background: var(--ink); color: #fff; }
.res-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; background: #f7f7f2; }
.res-more-in { overflow: hidden; min-height: 0; padding: 0 14px; font-size: 13px; }
.res-card.open .res-more { grid-template-rows: 1fr; }
.res-card.open .res-more-in { padding: 10px 14px 14px; }
@media (hover: hover) { .res-card:hover { background: #fafaf5; } }
.res-bits { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 4px; color: #444; }
.res-frames { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 2px; }
.res-frames li { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 2px 4px; }
.res-frames li span:first-child { text-align: right; }
.res-frames li.h span:first-child, .res-frames li.a span:last-child { font-weight: 700; color: var(--green); }
.res-frames b { font-variant-numeric: tabular-nums; }
.res-facts { margin: 6px 0; color: #444; }
.res-more .btn.res-go { font-weight: 700; color: #fff; background: var(--red); margin-top: 6px; }
.res-more .btn.res-go:hover { color: #fff; filter: brightness(1.1); }
/* Sponsorship packages. */
.sp-intro, .dl-intro { max-width: 780px; color: #333; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 18px 0; }
.sp-card { background: #fff; border-top: 8px solid var(--sp); padding: 0 0 16px; display: flex; flex-direction: column; }
.sp-card header { padding: 16px 18px 10px; background: color-mix(in srgb, var(--sp) 12%, #fff); }
.sp-card h2 { margin: 0; font-size: 26px; }
.sp-price { margin: 4px 0 0; font: 700 28px var(--font-head); color: var(--ink); } .sp-price small { font-size: 14px; color: var(--muted); font-weight: 600; }
.sp-sum { margin: 12px 18px 0; color: #444; }
.sp-card ul { margin: 12px 18px 0; padding-left: 20px; display: grid; gap: 6px; }
.sp-who { margin: 12px 18px 0; font-size: 13px; color: var(--muted); }
.sp-contact { margin-top: 10px; border-left: 6px solid var(--green); }
/* League downloads. */
.dl-cat h2 { margin: 24px 0 10px; font-size: 20px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.dl-card { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px; background: #fff; color: inherit; text-decoration: none; border: 1px solid #e6e6e0; transition: box-shadow .15s, transform .15s; }
.dl-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .1); }
.dl-kind { display: grid; place-items: center; min-width: 58px; height: 46px; padding: 0 6px; background: #444; color: #fff; font: 700 12px var(--font-head); text-transform: uppercase; }
.dl-kind.k-pdf { background: var(--red); } .dl-kind.k-word { background: #2b579a; } .dl-kind.k-excel { background: #217346; } .dl-kind.k-powerpoint { background: #d24726; } .dl-kind.k-picture { background: #7a4fc4; }
.dl-body { display: grid; gap: 3px; } .dl-body strong { font: 700 16px var(--font-head); } .dl-body small { color: var(--muted); }
.dl-go { font-size: 22px; color: var(--red); }
/* Hall of Fame. */
.hof-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin: 18px 0; }
.hof-sec h2 { margin: 26px 0 12px; font-size: 22px; }
.hof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.hof-card { display: flex; flex-direction: column; background: #fff; color: inherit; text-decoration: none; border-bottom: 5px solid var(--yellow); transition: transform .15s, box-shadow .15s; }
.hof-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); }
.hof-card.big { background: #111; color: #fff; }
.hof-pic { display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #2a2a2a, #0d0d0d); font-size: 46px; overflow: hidden; }
.hof-pic img { width: 100%; height: 100%; object-fit: cover; }
.hof-body { display: grid; gap: 4px; padding: 12px 14px 16px; }
.hof-body small { color: var(--yellow); font: 700 12px var(--font-head); text-transform: uppercase; } .hof-card:not(.big) .hof-body small { color: #9a6c00; }
.hof-body strong { font: 700 18px/1.25 var(--font-head); } .hof-body em { font-style: normal; opacity: .8; } .hof-mini { font-size: 13px; opacity: .8; }
.hof-cat { margin: 0; color: #9a6c00; font: 700 13px var(--font-head); text-transform: uppercase; }
.hof-subject { margin: -6px 0 16px; font-size: 18px; font-weight: 600; }
.hof-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.hof-hero { width: 100%; max-height: 520px; object-fit: cover; cursor: zoom-in; }
.hof-ach ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mem-pics { margin: 6px 0 12px; }
.mem-story { margin-top: 10px; } .mem-story summary { cursor: pointer; font-weight: 700; color: var(--red); } .mem-story .rich { margin-top: 8px; }
@media (max-width: 800px) { .hof-layout { grid-template-columns: 1fr; } }
/* Suggested handicaps. */
.hs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.hs-new { width: 80px; padding: 6px; font-weight: 700; text-align: center; border: 1px solid #ccc; }
.hs-new.down { background: #e3f6e6; } .hs-new.up { background: #fde6ec; }
.hof-card.big { flex-direction: row; min-height: 220px; }
.hof-card.big .hof-pic { flex: 0 0 42%; aspect-ratio: auto; }
.hof-card.big .hof-body { align-content: center; padding: 20px 22px; }
.hof-card.big .hof-body strong { font-size: 24px; }
@media (max-width: 640px) { .hof-card.big { flex-direction: column; } .hof-card.big .hof-pic { aspect-ratio: 16 / 9; } }
.a2hs-point { margin: 8px 0 12px; }

/* ══ Round 24 (Rich's feedback, 17 Oct) ═══════════════════════════════════════════════════ */
/* Phone admin lists: a cell with several things in it stays one block (the link checker's addresses were one letter per line). */
.lk-cell { min-width: 0; text-align: left; overflow-wrap: anywhere; }
@media (max-width: 720px) { #admin-body table.data td > * { min-width: 0; } #admin-body table.data td > .lk-cell { flex: 1; } }
.hs-explain { padding: 4px 4px 14px; border-bottom: 1px solid #eee; margin-bottom: 14px; font-size: 14.5px; }
.hs-explain ul { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 5px; }
/* Match night chat: a button near the top, the chat slides up from the bottom (Rich, round 24). */
.cm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cm-open { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 22px; background: var(--green); color: #fff; font: 700 14px var(--font-head); cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.cm-open svg { width: 20px; height: 20px; fill: currentColor; }
.cm-open b { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #fff; color: var(--green); font-size: 12px; }
.cm-sheet { position: fixed; inset: 0; z-index: 170; pointer-events: none; }
.cm-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .25s; }
.cm-panel-s { position: absolute; left: 50%; bottom: 0; width: min(560px, 100%); height: min(78vh, 680px); transform: translate(-50%, 102%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .3); padding-bottom: env(safe-area-inset-bottom); }
.cm-sheet.open { pointer-events: auto; }
.cm-sheet.open .cm-shade { opacity: 1; }
.cm-sheet.open .cm-panel-s { transform: translate(-50%, 0); }
html.cm-locked { overflow: hidden; }
.cm-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 10px; border-bottom: 1px solid #eee; }
.cm-top div { display: grid; } .cm-top b { font: 700 17px var(--font-head); } .cm-top small { color: var(--muted); }
.cm-grab { position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #ccc; }
.cm-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #eee; font-size: 22px; cursor: pointer; }
.cm-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px; border-bottom: 1px solid #f2f2f2; }
.cm-sheet .cm-list { flex: 1; overflow: auto; max-height: none; padding: 12px 16px; margin: 0; list-style: none; display: grid; gap: 12px; align-content: start; }
.cm-foot { border-top: 1px solid #eee; padding: 10px 12px; }
.cm-sheet .cm-form { display: flex; gap: 8px; align-items: flex-end; }
.cm-sheet .cm-form textarea { flex: 1; min-height: 42px; max-height: 120px; padding: 10px 12px; border: 1px solid #ccc; border-radius: 20px; font: inherit; resize: none; }
.cm-closed { margin: 0; padding: 8px; text-align: center; color: var(--muted); font-weight: 600; }
.a2hs-never { grid-column: 1 / -1; justify-self: start; margin: -2px 0 0 48px; padding: 0; border: 0; background: none; color: #bbb; font-size: 12.5px; text-decoration: underline; cursor: pointer; }

/* ── Round 25: form guide (marks out of 10) ───────────────────── */
.form-badge { display: inline-flex; align-items: center; gap: 3px; min-width: 40px; justify-content: center; padding: 3px 8px; border-radius: 999px;
  font: 700 14px/1.2 var(--font-head); font-variant-numeric: tabular-nums; color: #fff; background: #888; white-space: nowrap; }
.form-badge.good { background: var(--green); }
.form-badge.ok { background: #e69500; }
.form-badge.low { background: var(--red); }
.form-badge.none { background: #ddd; color: #555; }
.form-badge.big { font-size: 24px; padding: 6px 14px; min-width: 70px; }
.form-trend { font-style: normal; font-size: .62em; opacity: .95; }
.form-chips { display: inline-flex; gap: 3px; vertical-align: middle; }
.fc { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; font: 700 12px/1 var(--font-head); color: #fff; background: #888; text-decoration: none; flex: none; }
a.fc:hover { color: #fff; filter: brightness(1.15); transform: translateY(-1px); }
.fc.w { background: var(--green); }
.fc.l { background: var(--red); }
.fc.d { background: #8a8a8a; }
.form-link { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.form-link small { color: #666; }

.form-box { background: #fff; border: 1px solid #e6e6e6; border-left: 5px solid var(--green); padding: 18px; display: grid; gap: 14px; margin: 0 0 22px; }
.form-top { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.form-score { display: grid; justify-items: center; gap: 4px; }
.form-score > span:last-child { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: .04em; }
.form-sum { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.form-sum h3 { margin: 0; }
.form-sum p { margin: 0; color: #333; }
.form-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.form-list a { display: grid; grid-template-columns: 92px 1fr 150px; gap: 12px; align-items: center; padding: 8px 6px; color: inherit; text-decoration: none; border-top: 1px solid #f0f0f0; }
.form-list a:hover { background: #fafafa; }
.fl-when { font-size: 13px; color: #666; }
.fl-what { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.fl-what small { flex-basis: 100%; color: #777; font-size: 12px; }
.fl-mark { display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 8px; position: relative; }
.fl-mark::before { content: ""; grid-column: 1; grid-row: 1; height: 8px; border-radius: 4px; background: #eee; }
.fl-mark i { grid-column: 1; grid-row: 1; height: 8px; border-radius: 4px; background: #888; }
.fl-mark i.good { background: var(--green); } .fl-mark i.ok { background: #e69500; } .fl-mark i.low { background: var(--red); }
.fl-mark b { font-variant-numeric: tabular-nums; text-align: right; }
.form-how summary { cursor: pointer; font-weight: 700; color: var(--red); }
.form-how p { margin: 6px 0 0; color: #444; font-size: 14px; }
@media (max-width: 640px) {
  .form-list a { grid-template-columns: 1fr 96px; }
  .fl-when { grid-column: 1 / -1; margin-bottom: -6px; }
}

/* Person cards (team page) and the player/team of the week */
.pc-form { display: inline-flex; align-items: center; gap: 4px; }
.pc-form .form-badge { font-size: 12px; min-width: 32px; padding: 2px 6px; }
.spot-form { margin-top: 6px; }
.spot-score { flex: none; display: grid; justify-items: center; gap: 2px; }
.spot-score small { color: #bbb; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
.spotlight > .form-badge { flex: none; }

/* League tables */
.lt-form { text-decoration: none; }
.lt-form .fc { width: 18px; height: 18px; font-size: 10px; }

/* The form guide page */
.fg-intro { max-width: 760px; color: #333; margin: 6px 0 0; }
.fg-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fg-bar .toolbar { margin: 0; }
.fg-bar select, .fg-bar input[type=search] { padding: 9px 12px; border: 1px solid #ccc; border-radius: 6px; font: inherit; background: #fff; }
.fg-bar input[type=search] { flex: 1; min-width: 160px; }
.fg-tabs { display: inline-flex; border: 1px solid #ccc; border-radius: 999px; overflow: hidden; }
.fg-tabs button { border: 0; background: #fff; padding: 9px 18px; font: 700 14px var(--font-head); text-transform: uppercase; cursor: pointer; }
.fg-tabs button[aria-selected="true"] { background: #111; color: #fff; }
.fg-sort { border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; cursor: pointer; padding: 0; display: inline-flex; gap: 4px; align-items: center; }
.fg-sort i { font-style: normal; font-size: 11px; opacity: .55; }
.fg-sort.on i { opacity: 1; }
.fg-who { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.fg-who span { display: grid; min-width: 0; }
.fg-who small { color: #777; }
.fg-photo { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; background: var(--red); }
.fg-table td { vertical-align: middle; }
@media (max-width: 640px) {
  #view table.fg-table thead { display: none; }
  #view table.fg-table, #view table.fg-table tbody { display: block; }
  #view table.fg-table tr { display: grid; grid-template-columns: 26px 1fr auto; grid-template-areas: "n who score" "n chips chips"; gap: 6px 10px; align-items: center; padding: 10px 6px; border-bottom: 1px solid #eee; }
  #view table.fg-table td { display: block; padding: 0; border: 0; }
  #view table.fg-table td::before { content: none !important; }
  #view table.fg-table td:nth-child(1) { grid-area: n; color: #888; }
  #view table.fg-table td:nth-child(2) { grid-area: who; }
  #view table.fg-table td:nth-child(3) { grid-area: score; text-align: right; }
  #view table.fg-table td:nth-child(4) { grid-area: chips; }
  #view table.fg-table td.hide-sm { display: none; }
}
.fg-more { margin-top: 12px; }
@media (max-width: 640px) {
  #view table.fg-table tr, #view table.fg-table tr:nth-child(even) { background: #fff; }
  #view table.fg-table tr.hl { background: #eaf6ea; }
  #view table.fg-table td, #view table.fg-table tr.hl td { background: transparent !important; }
}
/* Round 25b: player and team of the month */
.spot-month .spot-label { background: var(--blue); color: #fff; }
/* My Snooker: Form */
.ms-myform { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 12px 14px; margin-bottom: 8px; background: #111; color: #fff; text-decoration: none; border-radius: 6px; }
.ms-myform:hover { color: #fff; filter: brightness(1.15); }
.ms-myform.team { background: #2a2a2a; }
.ms-myform > span:not(.form-badge) { display: grid; gap: 4px; min-width: 0; }
.ms-myform small { color: #bbb; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; font-weight: 700; }
.ms-myform strong { font-weight: 600; font-size: 14px; }
.ms-formlist { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.ms-formlist a { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 4px; border-top: 1px solid #eee; color: inherit; text-decoration: none; }
.ms-formlist a:hover { background: #fafafa; }
.ms-formlist a > span:not(.form-badge):not(.form-chips) { display: grid; min-width: 0; }
.ms-formlist strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-formlist small { color: #777; font-size: 12px; }
.ms-fl-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--red); }
.ms-formlist .fc { width: 18px; height: 18px; font-size: 10px; }
@media (max-width: 420px) { .ms-formlist .form-chips { display: none; } .ms-formlist a { grid-template-columns: 34px 1fr auto; } }

/* Round 27: real data — "Not updated yet" where the league hasn't added something */
.not-upd { color: #8a8a8a; font-style: italic; font-weight: 600; white-space: nowrap; }
p.not-upd { margin: 0; }
.cv-empty { display: flex; align-items: center; gap: 12px; background: #111; color: #fff; padding: 14px 18px; }
.cv-empty span { font: 700 13px var(--font-head); text-transform: uppercase; letter-spacing: .08em; color: var(--yellow, #fbb61a); }
.cv-empty .not-upd { color: #bbb; }
.stats-empty { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e6e6e6; padding: 16px 18px; }
.stats-empty b { font: 700 15px var(--font-head); text-transform: uppercase; }

/* Round 28: the "white" banner — white background, headline on the left, the article's picture on the right
   (Site settings → Home page banner → Banner layout). The background photo isn't used. */
.hero.hero-l-white { background: #fff; color: var(--ink, #111); border-bottom: 1px solid #e4e4e4; }
.hero.hero-l-white .hero-inner { padding-top: 30px; padding-bottom: 26px; }
.hero.hero-l-white .hero-slide { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: 40px; align-items: center; }
.hero.hero-l-white .hero-pic { background: #eee; }
.hero.hero-l-white .hero-text h2 { font-size: clamp(26px, 3vw, 42px); line-height: 1.08; margin-left: 0; -webkit-line-clamp: 4; text-transform: uppercase; letter-spacing: -.01em; }
.hero.hero-l-white .hero-text h2 a, .hero.hero-l-white .hero-text h2 a:hover { color: var(--ink, #111); }
.hero.hero-l-white .hero-text h2 a:hover span { color: var(--red); }
.hero.hero-l-white .hero-text h2 span { background: none; padding: 0; text-shadow: none; }
.hero.hero-l-white .hero-meta { order: -1; margin: 0 0 12px; color: var(--red); text-shadow: none; text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; font-weight: 700; }
.hero.hero-l-white .hero-text { display: flex !important; flex-direction: column; align-items: flex-start; }
.hero.hero-l-white .hero-more { margin-top: 20px; padding: 12px 18px; border-radius: 3px; }
.hero.hero-l-white .hero-pic-link { display: block; border: 0; border-radius: 0; }
.hero.hero-l-white .hero-pic-link:hover { transform: none; }
.hero.hero-l-white .hero-pic-link:hover .hero-pic { transform: scale(1.03); }
.hero.hero-l-white .hero-pic { transition: transform .4s; }
.hero.hero-l-white .hero-dots button { border-color: #bbb; }
.hero.hero-l-white .hero-dots button.on { background: var(--red); border-color: var(--red); }
.hero.hero-l-white .live-strip-wrap { background: #111; padding-top: 16px; }
@media (max-width: 760px) {
  .hero.hero-l-white .hero-inner { padding-top: 0; padding-bottom: 18px; }
  .hero.hero-l-white .hero-slide { grid-template-columns: 1fr; gap: 14px; }
  .hero.hero-l-white .hero-pic-link { display: block; order: -1; margin: 0 -16px; }
  .hero.hero-l-white .hero-text h2 { font-size: 26px; }
  .hero.hero-l-white .hero-more { margin-top: 14px; }
}

/* Round 30: "Live soon" — orange, pulsing, on a match that starts within the hour (as the LIVE button does). */
.live-soon { display: inline-flex; align-items: center; gap: 6px; background: var(--soon-orange, #ff8a00); color: #fff; font: 700 11.5px var(--font-head);
  padding: 3px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; white-space: nowrap;
  animation: livePulse 1.6s infinite; --pulse: 255, 138, 0; }
.live-soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
.sc-mid .live-soon { margin-top: 4px; }
.mh-score .live-soon { flex-basis: auto; margin: 6px auto 0; }
.cal-when .live-soon { margin-left: 6px; }
@media (prefers-reduced-motion: reduce) { .live-soon, .live-soon::before { animation: none; } }
/* Round 30: Latest results — a tag saying which league or competition, gold for cups; a drawn chevron. */
.res-top { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.res-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font: 700 10.5px var(--font-head); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.res-tag.league { background: #e7f3e7; color: var(--green); }
.res-tag.cup { background: #fff3cf; color: #8a6200; border: 1px solid #f0c94f; }
.res-tag i { font-style: normal; font-size: 10px; }
.res-card.cup, .res-mini.cup { box-shadow: inset 4px 0 0 #e0a800; }
.res-toggle { width: 28px; height: 28px; background: transparent; border: 1.5px solid #d6d6d6; color: #555; transition: transform .25s, background .2s, border-color .2s, color .2s; }
.res-toggle svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.res-head:hover .res-toggle { border-color: var(--ink); color: var(--ink); }
.res-card.open .res-toggle { background: var(--ink); border-color: var(--ink); color: #fff; }
/* My Snooker: Team & handicaps fits its column (round 30) */
.ms-sec-handicaps table.data { table-layout: auto; width: 100%; }
.ms-sec-handicaps table.data th, .ms-sec-handicaps table.data td { padding-left: 6px; padding-right: 6px; }
.ms-sec-handicaps table.data td:first-child { min-width: 0; }
.ms-sec-handicaps .hc-val { padding: 3px 7px; }
.ms-sec-handicaps .form-badge { min-width: 34px; padding: 2px 6px; font-size: 12px; }
.ms-sec-handicaps td small.muted { font-size: 11px; }

/* Round 31 (Rich): the White banner on the page's light grey, the headline in its own white panel, a small gap,
   then the picture — rounded corners on both (our own look: soft corners, not WST's angled cuts). */
.hero.hero-l-white { background: var(--cream, #f7f6ee); border-bottom: 0; }
.hero.hero-l-white .hero-inner { padding-top: 22px; padding-bottom: 22px; }
.hero.hero-l-white .hero-slide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; align-items: stretch; }
.hero.hero-l-white .hero-text { background: #fff; border-radius: 16px; padding: clamp(20px, 3vw, 40px); justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.hero.hero-l-white .hero-pic-link { border-radius: 16px; overflow: hidden; align-self: stretch; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.hero.hero-l-white .hero-pic { height: 100%; min-height: 100%; aspect-ratio: 16 / 9; }
.hero.hero-l-white .hero-dots { margin-top: 14px; }
@media (max-width: 760px) {
  .hero.hero-l-white .hero-inner { padding-top: 14px; }
  .hero.hero-l-white .hero-slide { grid-template-columns: 1fr; gap: 10px; }
  .hero.hero-l-white .hero-pic-link { margin: 0; border-radius: 14px; order: -1; }
  .hero.hero-l-white .hero-pic { height: auto; min-height: 0; }
  .hero.hero-l-white .hero-text { border-radius: 14px; padding: 18px; }
}
/* Round 34: a competition's box — the trophy on its own, or the picture filling it */
.comp-pic.is-trophy .comp-row-trophy { right: 50%; bottom: 50%; transform: translate(50%, 50%); width: 70px; height: 88px; }
@media (max-width: 640px) { .comp-pic.is-trophy .comp-row-trophy { width: 48px; height: 60px; } }
/* Round 37: match preview — head to head write-up */
.h2h-summary { padding: 14px 18px 6px; }
.h2h-summary p { margin: 0 0 10px; line-height: 1.55; }
/* Round 38: Draws & results — rows changed but not saved yet, and the Save all bar */
.results-edit tbody tr.dirty td { background: #fff8db; }
.results-edit tbody tr.dirty td:first-child { box-shadow: inset 4px 0 0 var(--yellow); }
.results-edit tbody tr.row-error td { background: #fdeef1; }
.save-all-row { position: sticky; bottom: 0; z-index: 3; margin: 0; padding: 12px 14px; align-items: center; gap: 12px; background: var(--white, #fff); border-top: 1px solid var(--line); }
.br-meta .pp, .fx-meta .pp { color: var(--red); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.mh-score small.pp-tag { color: #ff8a8a; font-weight: 700; text-transform: uppercase; }
/* Round 38: Live & upcoming strip — result labels, and every label's colour can be changed in Site settings */
.sc-label { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 4px; font: 700 11px var(--font-head); text-transform: uppercase; letter-spacing: .03em;
  background: var(--strip-done, #2f7d32); color: var(--strip-done-ink, #fff); }
.sc-label.pending { background: var(--strip-pending, #f2b705); color: var(--strip-pending-ink, #111); }
.sc-label.walkover { background: var(--strip-walkover, var(--strip-done, #2f7d32)); color: var(--strip-walkover-ink, var(--strip-done-ink, #fff)); }
.sc-label.postponed { background: var(--strip-postponed, #6b6b6b); color: var(--strip-postponed-ink, #fff); }
.live-strip .live-dot { background: var(--strip-live, var(--red)); color: var(--strip-live-ink, #fff); }
.live-strip .live-dot::before { background: currentColor; }
.live-strip .live-soon { background: var(--strip-soon, var(--soon-orange, #ff8a00)); color: var(--strip-soon-ink, #fff); }
.live-strip .live-soon::before { background: currentColor; }
.live-strip .strip-card.is-live { border-color: var(--strip-live, var(--live-green)); box-shadow: 0 0 0 1px var(--strip-live, var(--live-green)) inset; }
/* Round 40: tabs on long forms (Site settings) and the strip label preview */
.form-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--line); }
.form-tabs button { border: 1px solid var(--line); background: #fff; padding: 8px 14px; border-radius: 999px; font: 700 13px var(--font-head); cursor: pointer; color: var(--ink); }
.form-tabs button.on { background: var(--dark, #111); border-color: var(--dark, #111); color: #fff; }
.form-pane[hidden] { display: none !important; }
.strip-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; background: #1c1c1c; border-radius: 8px; }
.strip-preview .muted { color: #aaa; margin-right: 4px; }
.sp-tag { display: inline-flex; padding: 4px 8px; border-radius: 4px; font: 700 11px var(--font-head); text-transform: uppercase; letter-spacing: .03em; background: #555; color: #fff; }
/* Round 40: dashboard Overview — Tonight, Needs you, Your recent changes */
.ov-grid { display: grid; grid-template-columns: 1fr; gap: 22px; margin-bottom: 24px; align-items: start; }
.tn-sum { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 4px; }
.tn-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: #eee; }
.tn-chip.tn-live { background: #dcf7e3; } .tn-chip.tn-submitted { background: #fff3c4; } .tn-chip.tn-late { background: #fde0e6; }
.tn-chip.tn-postponed { background: #e8e8e8; } .tn-chip.tn-approved { background: #e3f0ff; }
.tn-list { display: flex; flex-direction: column; }
.tn-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 62px 150px auto; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--row-alt); border-left: 4px solid transparent; }
.tn-row.tn-live { border-left-color: var(--live-green); } .tn-row.tn-submitted { border-left-color: var(--yellow); }
.tn-row.tn-late { border-left-color: var(--red); background: #fff6f8; } .tn-row.tn-postponed { opacity: .7; }
.tn-time { font: 700 13px var(--font-head); color: var(--muted); }
.tn-what { display: flex; flex-direction: column; min-width: 0; } .tn-what small { color: var(--muted); font-size: 11px; }
.tn-what a { font-weight: 700; color: var(--ink); }
.tn-score { font: 700 16px var(--font-head); text-align: center; }
.tn-state { font-size: 12.5px; }
.tn-late .tn-state { color: var(--red); font-weight: 700; } .tn-live .tn-state { color: #0c7a2c; font-weight: 700; }
.tn-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .tn-row { grid-template-columns: 44px minmax(0, 1fr) 56px; } .tn-state { grid-column: 2 / -1; } .tn-acts { grid-column: 1 / -1; justify-content: flex-start; } }
.ny-list { padding: 4px 0; }
.ny-group { border-top: 1px solid var(--row-alt); }
.ny-group:first-child { border-top: 0; }
.ny-group summary { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; font-weight: 700; font-size: 14px; }
.ny-group summary::-webkit-details-marker { display: none; }
.ny-group summary .ny-text::after { content: " ▾"; color: var(--muted); font-weight: 400; }
.ny-group[open] summary .ny-text::after { content: " ▴"; }
.ny-group ul { list-style: none; margin: 0 0 8px; padding: 0 14px 0 50px; font-size: 13.5px; }
.ny-group li { padding: 4px 0; }
.ny-group li a { color: var(--ink); }
.ny-ico { font-size: 17px; text-align: center; }
.ny-done { padding: 18px 14px; margin: 0; font-weight: 700; color: #0c7a2c; }
.rc-list { list-style: none; margin: 0; padding: 4px 0; }
.rc-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--row-alt); font-size: 13.5px; }
.rc-list li:first-child { border-top: 0; }
.rc-when { color: var(--muted); font-size: 12px; }
.rc-what small { display: block; color: var(--muted); }
.sug-list { list-style: none; margin: 0; padding: 4px 0; }
.sug-list li { display: grid; grid-template-columns: 110px 50px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--row-alt); }
.sug-list li:first-child { border-top: 0; }
.sug-list small { color: var(--muted); }
/* Round 40: dashboard search — players, teams, matches… under the menu matches */
.admin-records { margin: 6px 0 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.admin-records[hidden] { display: none; }
.admin-records .ar-head { display: block; padding: 4px 10px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.admin-records a { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 6px; color: var(--ink); font-size: 13.5px; }
.admin-records a:hover, .admin-records a:focus { background: var(--row-alt); }
.admin-records i { font-style: normal; font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--red); min-width: 72px; }
.admin-records small { color: var(--muted); }
/* Round 40: the shareable result picture */
.share-card-box { border: 0; border-radius: 14px; padding: 18px; max-width: min(560px, 94vw); width: 100%; }
.share-card-box::backdrop { background: rgba(0,0,0,.7); }
.share-card-box img { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: 14px; }
.share-card-box .muted { font-size: 13px; margin: 10px 0 0; }
/* Round 40: Season wrapped */
.wr-hero { background: linear-gradient(135deg, #0d0d0d, #2a0b14 60%, #0b3d1a); color: #fff; border-radius: 16px; padding: 28px 26px; }
.wr-hero small { color: #fbb61a; font: 700 13px var(--font-head); text-transform: uppercase; letter-spacing: .08em; }
.wr-hero h1 { margin: 8px 0 14px; font-size: clamp(30px, 5vw, 52px); line-height: 1.02; color: #fff; display: block; }
.wr-hero h1 em { font-style: normal; color: #fbb61a; }
.wr-hero h1 .badge { width: 46px; height: 46px; vertical-align: middle; }
.wr-tools { display: flex; flex-wrap: wrap; gap: 14px; }
.wr-tools .toolbar { color: #fff; margin: 0; }
.wr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.wr-card { border-radius: 14px; padding: 22px 20px; color: #fff; display: flex; flex-direction: column; gap: 6px; min-height: 160px; justify-content: flex-end; }
.wr-card b { font: 900 clamp(40px, 6vw, 64px)/1 var(--font-head); }
.wr-card span { font: 700 15px var(--font-head); text-transform: uppercase; letter-spacing: .03em; }
.wr-card small { font-size: 13.5px; opacity: .9; }
.wr-card a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.wr-wide { grid-column: span 2; }
@media (max-width: 560px) { .wr-wide { grid-column: auto; } }
.wr-red { background: var(--red); } .wr-green { background: #0b7a2b; } .wr-gold { background: #e3a20a; color: #111; }
.wr-black { background: #151515; } .wr-blue { background: #0a6fc2; }

/* ═════════════════════════════════════════════════════════════
   ROUND 43 — THE CALM LOOK (standard; Admin → Branding → Look)
   Rich: "too many colours … make things a little more light and airy … like WST, blacks and reds and a less
   colourful menu". One accent (the main colour, red), black and greys for everything else, white cards with
   room around them, and one quiet menu where the page you are on is underlined. Colour is kept for meaning
   only: live (green), cup results (gold), wins and relegation. Everything here is under html.look-calm, so
   choosing "Classic" in Branding brings the colourful version back untouched.
   ═════════════════════════════════════════════════════════════ */
html.look-calm {
  --cream: #f5f5f3 !important;          /* page background: a quiet light grey */
  --blue: #141414 !important;           /* everything that was blue (News, buttons) becomes black */
  --nav-news: #141414 !important; --nav-news-ink: #fff !important;
  --yellow: #d9a514 !important;         /* a deeper gold, for trophies and cup results only */
  --green: #1d7a35 !important;
  --ink: #141414; --muted: #6b6b6b;
  --line: #e7e5e0;
  --row-alt: #fafaf8; --head-row: #fafaf8;
  --highlight: #fbeef1;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20,20,20,.04), 0 1px 1px rgba(20,20,20,.03);
}
html.look-calm body { background: var(--cream); }
html.look-calm #view[data-section] { --accent: var(--red) !important; --accent-ink: #fff !important; }

/* ── header: black, one row, no coloured blocks ── */
html.look-calm .site-header { border-bottom: 3px solid var(--red); }
html.look-calm .main-nav { gap: 2px; }
html.look-calm .main-nav a, html.look-calm .main-nav button {
  background: transparent !important; color: #fff !important; height: 44px; padding: 0 14px;
  font-size: min(var(--fs-nav, 18px), 16px); letter-spacing: .04em; position: relative; filter: none !important;
}
html.look-calm .main-nav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 2px; background: var(--red); transform: scaleX(0); transition: transform .18s; }
html.look-calm .main-nav a:hover::after, html.look-calm .main-nav a:focus-visible::after { transform: scaleX(1); }
html.look-calm .main-nav a:hover { color: #fff !important; }
html.look-calm[data-section="home"] .main-nav .nav-home::after, html.look-calm[data-section="competitions"] .main-nav .nav-comps::after,
html.look-calm[data-section="fixtures"] .main-nav .nav-fixtures::after, html.look-calm[data-section="league"] .main-nav .nav-league::after,
html.look-calm[data-section="news"] .main-nav .nav-news::after { transform: scaleX(1); }
/* LIVE keeps its meaning: grey dot when nothing is on, orange soon, green when live */
html.look-calm .main-nav .nav-live-btn { border: 1px solid #3a3a3a; border-radius: 999px; height: 36px; margin: 4px 0 0 8px; padding: 0 14px; }
html.look-calm .main-nav .nav-live-btn::after { display: none; }
html.look-calm .main-nav .nav-live-btn.state-soon { background: var(--soon-orange) !important; border-color: transparent; }
html.look-calm .main-nav .nav-live-btn.state-live { background: var(--live-green) !important; border-color: transparent; }
html.look-calm .nav-icon { background: transparent !important; border: 1px solid #3a3a3a !important; }

/* ── page rhythm: more room between things ── */
html.look-calm main { padding: 44px 0 72px; }
html.look-calm .layout { gap: 40px; }
html.look-calm .stack > * + * { margin-top: 36px; }
html.look-calm .sidebar > * + * { margin-top: 24px; }

/* ── panels: white cards with a quiet heading instead of coloured bars ── */
html.look-calm .panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
html.look-calm .panel-head, html.look-calm .panel-head.blue, html.look-calm .panel-head.yellow, html.look-calm .panel-head.green, html.look-calm .panel-head.red {
  background: #fff !important; color: var(--ink) !important; text-align: left; box-shadow: none !important;
  font-size: min(var(--fs-panel, 18px), 16px); letter-spacing: .05em; padding: 18px 20px 14px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
html.look-calm .panel-head::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--red); flex: none; }
html.look-calm a.panel-head::after { content: "→"; margin-left: auto; color: var(--muted); font-weight: 400; transition: transform .15s, color .15s; }
html.look-calm a.panel-head:hover { filter: none; color: var(--ink) !important; }
html.look-calm a.panel-head:hover::after { color: var(--red); transform: translateX(3px); }
html.look-calm .panel-foot { background: #fff; color: var(--red); border-top: 1px solid var(--line); padding: 13px 20px; font-size: 13.5px; }
html.look-calm .panel-foot:hover { background: var(--row-alt); }

/* ── tables: lines instead of stripes, quiet column headings ── */
html.look-calm table.data th { background: var(--head-row); color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; border-bottom: 1px solid var(--line); }
html.look-calm table.data td { border-bottom: 1px solid #f0efeb; }
html.look-calm table.data tbody tr:last-child td { border-bottom: 0; }
html.look-calm table.data tbody tr:nth-child(even) td { background: transparent; }
html.look-calm table.data tbody tr.hl td { background: #fafaf8; }
html.look-calm .lt-pts { background: var(--ink); }

/* ── home page tiles and bars ── */
html.look-calm .quick-links { gap: 12px; }
html.look-calm .quick-links a { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  font-size: 15px; letter-spacing: .04em; padding: 16px 8px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: border-color .15s, transform .15s; }
html.look-calm .quick-links a:hover { border-color: var(--ink); transform: translateY(-1px); filter: none; }
html.look-calm .quick-links a svg { fill: var(--red) !important; color: var(--red); }
html.look-calm .feature-box { background: #fff !important; color: var(--ink) !important; border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; }
html.look-calm .feature-new { background: var(--red) !important; color: #fff !important; }
html.look-calm .feature-box .ticker-item::before { background: var(--red); opacity: 1; }
html.look-calm .enter-bar { background: #fff; color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--red); border-radius: var(--radius); }
html.look-calm .enter-bar:hover { color: var(--ink); filter: none; border-color: var(--ink); border-left-color: var(--red); }
html.look-calm .enter-bar b { color: var(--red); }
html.look-calm .enter-bar span { background: var(--ink); color: #fff; border-radius: 6px; }
html.look-calm .kd { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
html.look-calm .kd-label { background: #fff !important; color: var(--ink) !important; border-right: 1px solid var(--line); }
html.look-calm .kd-label i { color: var(--red); }
html.look-calm .kd-item time, html.look-calm .key-date time { background: var(--ink); border-radius: 8px; }
html.look-calm .kd-item time span, html.look-calm .key-date time span { color: #fff; opacity: .75; }
html.look-calm .ms-bar { border-radius: var(--radius); }
html.look-calm .ms-bar b { color: #fff; }

/* buttons */
html.look-calm .btn-bar, html.look-calm .btn-bar.green { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13.5px; letter-spacing: .05em; padding: 13px; }
html.look-calm .btn-bar:hover { color: var(--ink); border-color: var(--ink); filter: none; }
html.look-calm .btn.blue, html.look-calm .btn.green { background: var(--ink); }

/* ── Latest Results: black scores, the winner in red; gold only marks a competition ── */
html.look-calm .res-tag.league { background: #f0efeb; color: var(--muted); }
html.look-calm .res-team.won { color: var(--ink); font-weight: 700; } html.look-calm .res-team.lost { color: #8a8a8a; }
html.look-calm .res-pill i { background: #2a2a2a; } html.look-calm .res-pill i.w { background: var(--red); }
html.look-calm .res-card.cup, html.look-calm .res-mini.cup { box-shadow: inset 3px 0 0 var(--yellow); }

/* ── player / team of the week: plain black cards ── */
html.look-calm .spotlight { background: #141414 !important; border-radius: var(--radius); overflow: hidden; }
html.look-calm .spot-label { background: var(--red); color: #fff; }
html.look-calm .spot-photo { border-color: #fff; }

/* ── competitions list on the home page ── */
html.look-calm .comp-cols { background: #fff !important; }
html.look-calm .list-rows.comp-cols a { border-left: 0 !important; border-bottom: 1px solid #f0efeb; margin: 0; }
html.look-calm .list-rows.comp-cols a > div { background: transparent; }

/* ── the live & upcoming strip: always readable on its dark band (Rich: the heading was black) ── */
html.look-calm .live-strip .strip-head h3, .hero.hero-l-white .live-strip .strip-head h3 { color: #fff; }
.hero.hero-l-white .live-strip .strip-head a { color: #fff; }
html.look-calm .hero.hero-l-white .live-strip-wrap { background: #141414; }
html.look-calm .strip-card { border-radius: 10px; }

/* ── footer: light partner boxes ── */
html.look-calm .sponsors a { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }

/* ── the hero (white banner) sits on the page colour with soft cards ── */
html.look-calm .hero.hero-l-white .hero-text, html.look-calm .hero.hero-l-white .hero-pic-link { border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }

/* ── smaller things that were loud ── */
html.look-calm .breadcrumb { background: transparent; padding: 0; color: var(--muted); }
html.look-calm .title-band { border-radius: var(--radius); border: 1px solid var(--line); }
html.look-calm .tag { border-radius: 6px; }
html.look-calm .news-mini { border-radius: 10px; }
@media (max-width: 900px) {
  html.look-calm main { padding: 28px 0 56px; }
  html.look-calm .stack > * + * { margin-top: 26px; }
}
/* calm: the break podium in greys, with gold kept for the record holder's label only */
html.look-calm .bk-pod.p1, html.look-calm .bk-pod.p2, html.look-calm .bk-pod.p3 { background: #f7f6f3; }
html.look-calm .bk-pod.p1 { background: #f1efea; }
html.look-calm .bk-pod.p1 .avatar { box-shadow: 0 0 0 3px var(--yellow); }
html.look-calm .bk-pod.p2 .bk-rank, html.look-calm .bk-pod.p3 .bk-rank { background: #8a8a85; }
html.look-calm .bk-rest { border-top: 1px solid var(--line); }
html.look-calm .tally.brk { background: #f1efea; color: var(--ink); }
html.look-calm .tally.brk.prov { background: #fff; outline-color: #c9c5bb; }
/* calm: page tiles (Our League, team lists) as cards; "Click here to view" becomes a quiet red link */
html.look-calm .tile { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
html.look-calm .tile:hover { border-color: var(--ink); transform: translateY(-1px); color: var(--ink); }
html.look-calm .tile.tall { min-height: 0; padding: 26px 20px; }
html.look-calm .tile h4 { font-size: 17px; letter-spacing: .02em; }
html.look-calm .tile-go { background: none; color: var(--red); padding: 0; font-size: 12px; letter-spacing: .06em; }
html.look-calm .tile-go::after { content: " →"; }
html.look-calm .tile:hover .tile-go { background: none; color: var(--red); }
html.look-calm .tile.with-emblem .tile-go { padding: 0; }
html.look-calm .tile p { color: var(--muted); }
/* Round 43: My Snooker news — small versions of the news page (both looks) */
.ms-news-panel .mini-feat, .ms-news-panel .mini-cards { padding: 16px; }
.mini-feat { gap: 12px; }
.mini-feat .feat-main { min-height: 300px; border-radius: 12px; }
.mini-feat .feat-main strong { font-size: clamp(19px, 2vw, 24px); }
.mini-feat .feat-side { gap: 12px; }
.mini-feat .feat-card { grid-template-columns: 40% minmax(0, 1fr); min-height: 92px; border-radius: 10px; }
.mini-feat .feat-card img, .mini-feat .feat-card .hub-ph { min-height: 92px; }
.mini-feat .feat-card .feat-text { padding: 10px 12px; gap: 6px; }
.mini-feat .feat-card strong { font-size: 14px; }
.mini-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini-cards .hub-card { border-radius: 12px; }
.mini-cards .hub-body { padding: 12px 14px 14px; }
.mini-cards .hub-body h3 { font-size: 15px; line-height: 1.3; margin: 4px 0 8px; }
@media (max-width: 760px) {
  .mini-feat { grid-template-columns: 1fr; }
  .mini-feat .feat-main { min-height: 220px; }
  .mini-cards { grid-template-columns: 1fr; }
  .mini-cards .hub-card { flex-direction: row; }
  .mini-cards .hub-pic { width: 38%; flex: none; }
}
@media (max-width: 640px) {
  html.look-calm .quick-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; gap: 8px; }
  html.look-calm .quick-links a { font-size: 13px; padding: 13px 6px; min-width: 0; }
  html.look-calm .tile.with-emblem { padding: 14px; }
}
/* Round 44: countdown to a match that hasn't started (match and cup match previews) */
.countdown { display: flex; justify-content: center; gap: 10px; padding: 4px 16px 22px; }
.countdown span { display: grid; justify-items: center; min-width: 64px; padding: 10px 6px 8px; background: rgba(255,255,255,.08); border-radius: 8px; }
.countdown b { font: 700 30px/1 var(--font-head); color: #fff; font-variant-numeric: tabular-nums; }
.countdown small { margin-top: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #bbb; }
.countdown-now { margin: 0; font: 700 18px var(--font-head); text-transform: uppercase; color: #fff; }
@media (max-width: 480px) { .countdown span { min-width: 54px; } .countdown b { font-size: 24px; } }

/* ═════════════════════════════════════════════════════════════
   ROUND 44 — FLATTER, LIKE WST (Rich's list)
   No hairline borders or shadows on cards: white blocks on the light grey page do the separating.
   ═════════════════════════════════════════════════════════════ */
/* 11 + 13: flat — no borders or shadows round cards, tiles and the four quick links */
html.look-calm .panel, html.look-calm .quick-links a, html.look-calm .tile, html.look-calm .feature-box, html.look-calm .enter-bar,
html.look-calm .kd, html.look-calm .btn-bar, html.look-calm .sponsors a, html.look-calm .hub-card, html.look-calm .feat-card,
html.look-calm .hero.hero-l-white .hero-text, html.look-calm .hero.hero-l-white .hero-pic-link, html.look-calm .title-band,
html.look-calm .back-link, html.look-calm .hub-tabs a, html.look-calm .stat, html.look-calm .ms-card {
  border: 0 !important; box-shadow: none !important;
}
html.look-calm .enter-bar { border-left: 4px solid var(--red) !important; }
html.look-calm .quick-links a:hover, html.look-calm .tile:hover, html.look-calm .btn-bar:hover { background: #fff !important; color: var(--red) !important; transform: none; }
html.look-calm .hub-card:hover, html.look-calm .feat-card:hover { box-shadow: none; transform: none; }
html.look-calm .hub-card:hover h3, html.look-calm .feat-card:hover strong { color: var(--red); }
html.look-calm .kd-label { border-right: 0; }
html.look-calm .panel-head { border-bottom: 0; padding-bottom: 8px; }
html.look-calm .panel-foot { border-top: 0; }
html.look-calm .stat { border-radius: var(--radius); }

/* 10: the menu — plain text, no boxes, the words in red; the page you are on in white with a red line */
html.look-calm .main-nav a, html.look-calm .main-nav button { color: var(--red) !important; }
html.look-calm .main-nav a:hover { color: #fff !important; }
html.look-calm[data-section="home"] .main-nav .nav-home, html.look-calm[data-section="competitions"] .main-nav .nav-comps,
html.look-calm[data-section="fixtures"] .main-nav .nav-fixtures, html.look-calm[data-section="league"] .main-nav .nav-league,
html.look-calm[data-section="news"] .main-nav .nav-news { color: #fff !important; }
html.look-calm .main-nav .nav-live-btn { color: #fff !important; border: 0; background: #262626 !important; }
html.look-calm .nav-icon { border: 0 !important; background: #1f1f1f !important; }

/* 12: nothing pulses — live and live soon are shown by their colour and a steady dot */
html.look-calm .nav-live-btn, html.look-calm .nav-live-btn::before, html.look-calm .live-dot::before,
html.look-calm .live-soon, html.look-calm .live-soon::before, html.look-calm .strip-card.is-live { animation: none !important; }

/* 1: the live & upcoming strip the other way round — light band, white cards, dark writing, no outline */
html.look-calm .live-strip-wrap, html.look-calm .hero.hero-l-white .live-strip-wrap { background: #ebeae6 !important; padding: 20px 0 18px; }
html.look-calm .live-strip .strip-head h3, html.look-calm .hero .live-strip .strip-head h3 { color: var(--ink) !important; }
html.look-calm .live-strip .strip-head a, html.look-calm .hero .live-strip .strip-head a { color: var(--red) !important; }
html.look-calm .strip-card { background: #fff; border: 0 !important; box-shadow: none !important; color: var(--ink); border-radius: 10px; }
html.look-calm .strip-card:hover { color: var(--ink); transform: none; }
html.look-calm .strip-card.is-live { box-shadow: inset 0 -3px 0 var(--strip-live, var(--live-green)) !important; }
html.look-calm .strip-card.is-draw { box-shadow: inset 0 -3px 0 var(--yellow) !important; }
html.look-calm .sc-top, html.look-calm .sc-mid small { color: var(--muted); }
html.look-calm .sc-foot { color: #8a8a8a; }
html.look-calm .sc-mid b.time { border-color: #d6d4cf; }
html.look-calm .strip-empty { color: var(--muted); } html.look-calm .strip-empty a { color: var(--red); }
html.look-calm .strip-ctrl button, html.look-calm [data-strip] button { background: #fff; color: var(--ink); border-color: #fff; }
html.look-calm .strip-card .badge.logo { background: transparent; }

/* 2: league tables — no shaded top and bottom rows (the P and R markers still say who goes up and down) */
html.look-calm table.data tbody tr.hl td, html.look-calm table.data tbody tr.lt-top td, html.look-calm table.data tbody tr.lt-up td,
html.look-calm table.data tbody tr.lt-down td, html.look-calm table.data tbody tr.lt-up.lt-alt td, html.look-calm table.data tbody tr.lt-down.lt-alt td {
  background: transparent !important; font-weight: inherit;
}
html.look-calm .lt-panel table.data tbody tr.hl td, html.look-calm table.data tbody tr.hl td { font-size: inherit; padding-top: 11px; padding-bottom: 11px; }
html.look-calm table.data tbody tr.hl .badge { width: 30px; height: 30px; font-size: 10px; }
html.look-calm .lt-pts { background: transparent; color: var(--ink); padding: 0; }

/* 5: breaks stand out — every break in red */
html.look-calm .tally.brk, html.look-calm .break-tag { background: var(--red); color: #fff; }
html.look-calm .tally.brk.prov { background: #fff; color: var(--red); outline: 1px dashed var(--red); }
html.look-calm .bk-pod b { color: var(--red); }
html.look-calm .bk-pod.p1, html.look-calm .bk-pod.p2, html.look-calm .bk-pod.p3 { background: #f6f5f2; }

/* 6: rankings like WST — the leader in a black row that stays at the top while the list scrolls */
html.look-calm .rk-scroll { max-height: 312px; overflow-y: auto; scrollbar-width: thin; }
.rk-scroll tr.hl td { position: sticky; top: 0; z-index: 1; }
html.look-calm .rk-scroll tr.hl td, html.look-calm .rk-panel table.data tbody tr.hl td { background: #141414 !important; color: #fff; font-weight: 700; }
html.look-calm .rk-panel tr.hl a { color: #fff; }
html.look-calm .rk-panel td.num:first-child { color: var(--red); font-weight: 700; }
html.look-calm .rk-panel tr.hl .lt-pts, html.look-calm .rk-panel tr.hl td.strong { color: #fff; }
/* Round 44: Share button beside the back arrow */
.back-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.back-nav.only-share { justify-content: flex-end; margin-bottom: 8px; }
.share-page { display: inline-flex; align-items: center; gap: 6px; border: 0; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 999px; font: 700 13px var(--font-body); cursor: pointer; }
.share-page svg { width: 16px; height: 16px; fill: var(--red); }
.share-page:hover { color: var(--red); }

/* ═════════════════════════════════════════════════════════════
   ROUND 45 — Rich: "a little too white", shading back in the tables, breaks in green,
   alerts in a soft yellow, and the black strip / grey header options (Admin → Branding → Look)
   ═════════════════════════════════════════════════════════════ */
/* softer: a warm grey page and off-white boxes instead of pure white */
html.look-calm { --cream: #ecebe6 !important; --card: #fbfaf7; --row-alt: #f4f3ef; --head-row: #f4f3ef; }
html.look-calm .panel, html.look-calm .panel-head, html.look-calm .panel-foot, html.look-calm .quick-links a, html.look-calm .tile,
html.look-calm .enter-bar, html.look-calm .kd, html.look-calm .kd-label, html.look-calm .btn-bar, html.look-calm .sponsors a,
html.look-calm .hub-card, html.look-calm .feat-card, html.look-calm .hero.hero-l-white .hero-text, html.look-calm .back-link,
html.look-calm .share-page, html.look-calm .stat, html.look-calm .comp-cols, html.look-calm .bk-podium, html.look-calm .title-band,
html.look-calm .hub-tabs a:not(.on) { background-color: var(--card) !important; }
html.look-calm .quick-links a:hover, html.look-calm .tile:hover, html.look-calm .btn-bar:hover { background: var(--card) !important; }
html.look-calm .panel-foot:hover { background: var(--row-alt) !important; }

/* alerts (the scrolling feature box, notices): a soft yellow */
html.look-calm .feature-box { background: #fdf3cf !important; color: #3b2f05 !important; }
html.look-calm .feature-box .ticker-item::before { background: #c99400; }
html.look-calm .notice { background: #fdf3cf; border-radius: 10px; }

/* tables: the light stripes back, the leader a little bigger on a soft yellow, the bottom places on a soft red */
html.look-calm table.data tbody tr:nth-child(even) td { background: var(--row-alt) !important; }
html.look-calm table.data tbody tr.lt-top td, html.look-calm table.data tbody tr.hl td { background: #fbf1cc !important; font-weight: 700; }
html.look-calm .lt-panel table.data tbody tr.lt-top td, html.look-calm table.data tbody tr.lt-top td { font-size: calc(var(--fs-table, 14px) + 2px); padding-top: 14px; padding-bottom: 14px; }
html.look-calm table.data tbody tr.lt-top .badge { width: 38px; height: 38px; font-size: 12px; }
html.look-calm table.data tbody tr.lt-down td, html.look-calm table.data tbody tr.lt-down.lt-alt td { background: #f9e4e7 !important; }
html.look-calm table.data tbody tr.lt-mine td { background: #ecebe6 !important; }
/* the rankings' pinned leader stays black */
html.look-calm .rk-scroll tr.hl td, html.look-calm .rk-panel table.data tbody tr.hl td { background: #141414 !important; }

/* breaks in green (red reads as a minus); the top three on the podium in black */
html.look-calm .tally.brk, html.look-calm .break-tag { background: var(--green); color: #fff; }
html.look-calm .tally.brk.prov { background: var(--card); color: var(--green); outline: 1px dashed var(--green); }
html.look-calm .bk-pod b { color: var(--ink); }
html.look-calm .bk-pod.p1, html.look-calm .bk-pod.p2, html.look-calm .bk-pod.p3 { background: #f1f0eb; }

/* option: the Live & upcoming strip in black, like WST */
html.look-calm.strip-dark .live-strip-wrap, html.look-calm.strip-dark .hero.hero-l-white .live-strip-wrap { background: #0f0f0f !important; }
html.look-calm.strip-dark .live-strip .strip-head h3, html.look-calm.strip-dark .hero .live-strip .strip-head h3 { color: #fff !important; }
html.look-calm.strip-dark .strip-card { background: #1e1e1e; color: #fff; }
html.look-calm.strip-dark .strip-card:hover { color: #fff; background: #262626; }
html.look-calm.strip-dark .sc-top, html.look-calm.strip-dark .sc-mid small { color: #9a9a9a; }
html.look-calm.strip-dark .sc-foot { color: #8a8a8a; }
html.look-calm.strip-dark .sc-mid b.time { border-color: #444; }
html.look-calm.strip-dark .strip-ctrl button, html.look-calm.strip-dark [data-strip] button { background: #262626; color: #fff; border-color: #262626; }

/* option: a dark grey header (the menu words stay red) */
html.look-calm.head-grey .site-bar { background: #2d2d30 !important; }
html.look-calm.head-grey .nav-icon, html.look-calm.head-grey .main-nav .nav-live-btn:not(.state-soon):not(.state-live) { background: #3c3c40 !important; }
html.look-calm.head-grey .main-nav a, html.look-calm.head-grey .main-nav button { color: #ff4d6d !important; }
html.look-calm.head-grey[data-section="home"] .main-nav .nav-home, html.look-calm.head-grey[data-section="competitions"] .main-nav .nav-comps,
html.look-calm.head-grey[data-section="fixtures"] .main-nav .nav-fixtures, html.look-calm.head-grey[data-section="league"] .main-nav .nav-league,
html.look-calm.head-grey[data-section="news"] .main-nav .nav-news, html.look-calm.head-grey .main-nav a:hover { color: #fff !important; }
html.look-calm.head-grey .main-nav .nav-live-btn { color: #fff !important; }
html.look-calm:not(.strip-dark) .live-strip-wrap, html.look-calm:not(.strip-dark) .hero.hero-l-white .live-strip-wrap { background: #dfddd6 !important; }
html.look-calm .rk-panel td.num:first-child { color: var(--ink); }
html.look-calm .rk-panel tr.hl td.num:first-child { color: #fff; }
html.look-calm.strip-dark .strip-card .badge:not(.logo) { background: #3a3a3a; }
/* Round 45b (Rich): the page background a neutral light grey like WST, so the white blocks stand out */
html.look-calm { --cream: #ececec !important; --card: #ffffff; --row-alt: #f6f6f6; --head-row: #f6f6f6; }
html.look-calm:not(.strip-dark) .live-strip-wrap, html.look-calm:not(.strip-dark) .hero.hero-l-white .live-strip-wrap { background: #dedede !important; }
html.look-calm .bk-pod.p1, html.look-calm .bk-pod.p2, html.look-calm .bk-pod.p3 { background: #f3f3f3; }
html.look-calm table.data tbody tr.lt-mine td { background: #ececec !important; }
/* Round 46: player trophy cabinet */
.cabinet { background: var(--card, #fff); border-radius: var(--radius, 12px); padding: 18px 20px; margin: 22px 0; }
.cabinet h3 { margin: 0 0 12px; }
.cabinet ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cabinet li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; background: #141414; color: #fff; border-radius: 10px; }
.cab-trophy { width: 52px; height: 52px; object-fit: contain; }
.cab-name { font: 700 17px/1.15 var(--font-head); text-transform: uppercase; letter-spacing: .02em; }
.cab-count { font: 700 26px/1 var(--font-head); color: var(--yellow, #ffd237); }

/* ═════════════════════════════════════════════════════════════
   ROUND 46 — Rich's feedback 58
   ═════════════════════════════════════════════════════════════ */
/* the two logos: the main one, and the one for a light header */
.logo .logo-light { display: none; }
html.look-calm.head-light .logo .logo-main { display: none; }
html.look-calm.head-light .logo .logo-light { display: block; }
html.look-calm.head-light .logo .logo-light.auto { filter: invert(1) hue-rotate(180deg); }   /* no light-header logo uploaded yet */

/* the page background chosen in Branding now shows in the calm look too */
html.look-calm body { background: var(--page-bg, var(--cream)); }

/* Rich's yellow (#ffd237): trophies, cup results, the 1st place badge; alerts get a soft tint of it */
html.look-calm { --yellow: #ffd237 !important; }
html.look-calm .feature-box { background: #ffefb0 !important; color: #2b2200 !important; }
html.look-calm .notice { background: #ffefb0; }
html.look-calm .res-tag.cup { background: #fff3c4; color: #6b5200; border-color: #ffd237; }

/* the top of each league table in a faint green (it was yellow) */
html.look-calm table.data tbody tr.lt-top td, html.look-calm table.data tbody tr.hl td { background: #e3f2e3 !important; }
html.look-calm .rk-scroll tr.hl td, html.look-calm .rk-panel table.data tbody tr.hl td { background: #141414 !important; }

/* the black strip the other way round: dark grey band, black cards */
html.look-calm.strip-dark .live-strip-wrap, html.look-calm.strip-dark .hero.hero-l-white .live-strip-wrap { background: #2b2b2b !important; }
html.look-calm.strip-dark .strip-card { background: #0d0d0d; }
html.look-calm.strip-dark .strip-card:hover { background: #161616; }
html.look-calm.strip-dark .strip-ctrl button, html.look-calm.strip-dark [data-strip] button { background: #0d0d0d; border-color: #0d0d0d; }
html.look-calm.strip-dark .strip-card .badge:not(.logo) { background: #333; }

/* grey header: the menu follows the main colour (made a little lighter so it reads on grey) */
html.look-calm.head-grey .main-nav a, html.look-calm.head-grey .main-nav button { color: color-mix(in srgb, var(--red) 78%, #fff) !important; }

/* option: a light cream header (#fbfaef) with red menu words */
html.look-calm.head-light .site-bar { background: #fbfaef !important; }
html.look-calm.head-light .main-nav a, html.look-calm.head-light .main-nav button { color: var(--red) !important; }
html.look-calm.head-light[data-section="home"] .main-nav .nav-home, html.look-calm.head-light[data-section="competitions"] .main-nav .nav-comps,
html.look-calm.head-light[data-section="fixtures"] .main-nav .nav-fixtures, html.look-calm.head-light[data-section="league"] .main-nav .nav-league,
html.look-calm.head-light[data-section="news"] .main-nav .nav-news, html.look-calm.head-light .main-nav a:hover { color: var(--ink) !important; }
html.look-calm.head-light .nav-icon { background: #ecebdf !important; color: var(--ink); }
html.look-calm.head-light .nav-icon svg { fill: var(--ink) !important; }
html.look-calm.head-light .main-nav .nav-live-btn:not(.state-soon):not(.state-live) { background: #ecebdf !important; color: var(--ink) !important; }
html.look-calm.head-light .main-nav .nav-live-btn.state-soon, html.look-calm.head-light .main-nav .nav-live-btn.state-live { color: #fff !important; }

/* ═════════════════════════════════════════════════════════════
   ROUND 47 — the standard home page, and Rich's smaller requests
   ═════════════════════════════════════════════════════════════ */
/* a thinner red line under the menu */
.site-bar { border-bottom-width: 3px !important; }
/* the banner's background colour (Site settings → Home page) */
html.look-calm .hero.hero-l-white { background: var(--hero-bg, var(--page-bg, var(--cream))); }
/* a thin line along the top of the strip */
.live-strip-wrap.strip-line-red { border-top: 3px solid var(--red); }
.live-strip-wrap.strip-line-yellow { border-top: 3px solid var(--yellow, #ffd237); }
.live-strip-wrap.strip-line-grey { border-top: 3px solid #b9b9b9; }

/* block headings on the standard home page */
.home-block { min-width: 0; }
.hb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.hb-head h2 { font-size: 22px; display: flex; align-items: center; gap: 10px; }
.hb-head h2::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--red); }
.hb-head a { font-weight: 700; font-size: 14px; color: var(--red); white-space: nowrap; }
.hb-sub { margin: 16px 0 8px; font-size: 14px; color: var(--muted); letter-spacing: .06em; }

/* latest news: six cards, three across */
.home-news { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-news .hub-card { background: var(--card, #fff); }

/* season promotion */
.promo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0; background: #141414; color: #fff; border-radius: var(--radius, 12px); overflow: hidden; }
.promo-main { padding: clamp(22px, 3vw, 36px); border-left: 5px solid var(--red); }
.promo-kicker { display: inline-block; font: 700 12px var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--yellow, #ffd237); margin-bottom: 10px; }
.promo h2 { font-size: clamp(24px, 3vw, 36px); line-height: 1.08; color: #fff; }
.promo h2 span { color: var(--yellow, #ffd237); }
.promo p { margin: 14px 0 0; color: #d6d6d6; line-height: 1.55; max-width: 52ch; }
.promo-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.promo .promo-go { background: var(--red); color: #fff; border-radius: 6px; }
.promo .promo-more { background: transparent; color: #fff; border: 1px solid #555; border-radius: 6px; }
.promo-dates { list-style: none; margin: 0; padding: 18px; display: grid; gap: 8px; align-content: center; background: #1d1d1d; }
.promo-dates a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 8px; color: #fff; }
.promo-dates a:hover { background: #262626; color: #fff; }
.promo-dates time { display: grid; justify-items: center; background: #fff; color: var(--ink); border-radius: 8px; padding: 6px 0 5px; }
.promo-dates time b { font: 700 20px/1 var(--font-head); }
.promo-dates time small { font: 700 11px var(--font-head); text-transform: uppercase; color: var(--red); }
.promo-dates span { font-weight: 700; line-height: 1.3; }

/* the My Snooker invitation */
.ms-invite { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; background: var(--card, #fff); border-radius: var(--radius, 12px); border-left: 4px solid var(--yellow, #ffd237); }
.ms-invite-star { font-size: 24px; color: var(--yellow, #ffd237); }
.ms-invite b { display: block; font: 700 16px var(--font-head); text-transform: uppercase; letter-spacing: .03em; }
.ms-invite small { display: block; color: var(--muted); margin-top: 2px; }
.ms-invite i { font-style: normal; font-weight: 700; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px; white-space: nowrap; }
.ms-invite:hover { color: var(--ink); } .ms-invite:hover i { background: var(--red); }

/* competitions like the news: the one being played as the big feature */
.comp-feature { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; }
.comp-feature.solo { grid-template-columns: 1fr; }
.cf-main { position: relative; display: grid; grid-template-rows: 1fr auto; min-height: 330px; background: #141414; color: #fff; border-radius: var(--radius, 12px); overflow: hidden; }
.cf-main:hover { color: #fff; }
.cf-trophy { display: grid; place-items: center; padding: 26px 0 0; background: radial-gradient(circle at 50% 60%, rgba(255,210,55,.18), transparent 60%); }
.cf-trophy .trophy { width: 120px; height: 150px; object-fit: contain; }
.cf-pic { width: 100%; height: 190px; object-fit: cover; }
.cf-text { padding: 18px 22px 20px; display: grid; gap: 6px; }
.cf-kicker { font: 700 12px var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--yellow, #ffd237); }
.cf-live { color: var(--live-green); }
.cf-text strong { font: 700 clamp(22px, 2.4vw, 30px)/1.1 var(--font-head); text-transform: uppercase; }
.cf-text small { color: #bdbdbd; font-weight: 600; }
.cf-match { margin: 4px 0 0; font-size: 14px; color: #e6e6e6; } .cf-match b { color: #fff; padding: 0 4px; } .cf-match em { font-style: normal; color: #bdbdbd; }
.cf-go { margin-top: 6px; font-weight: 700; color: var(--red); }
.cf-side { display: grid; gap: 10px; grid-auto-rows: 1fr; }
.cf-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; background: var(--card, #fff); border-radius: 10px; }
.cf-card:hover strong { color: var(--red); }
.cf-mini .trophy { width: 44px; height: 50px; object-fit: contain; }
.cf-card strong { display: block; font: 700 15px/1.2 var(--font-head); text-transform: uppercase; }
.cf-card small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* our teams */
.team-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.team-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card, #fff); border-radius: 10px; font-weight: 700; font-size: 14px; min-width: 0; }
.team-tile span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-tile .badge { width: 32px; height: 32px; font-size: 10px; flex: none; }
.team-tile:hover { color: var(--red); }

@media (max-width: 900px) {
  .promo, .comp-feature { grid-template-columns: 1fr; }
  .home-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .home-news { grid-template-columns: 1fr; }
  .home-news .hub-card { flex-direction: row; } .home-news .hub-pic { width: 38%; flex: none; aspect-ratio: auto; }
  .ms-invite { grid-template-columns: auto minmax(0, 1fr); } .ms-invite i { grid-column: 1 / -1; text-align: center; }
  .cf-main { min-height: 0; }
  .team-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html.look-calm main.flush { padding-top: 0; }
html.look-calm .hero { margin-top: -3px; }
@media (max-width: 560px) { .home-news .hub-card:nth-child(n+5) { display: none; } }

/* Round 45: every Save button in the admin dashboard stays in view at the bottom of the screen,
   so a long form never needs scrolling to the end to save it. (Each form keeps its own bar,
   and the bar settles back into place when the end of its form is reached.) */
#admin-body .form-actions,
#admin-body .nw-buttons {
  position: sticky; bottom: 0; z-index: 25;
  margin: 18px 0 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid #e6e5da; border-radius: 12px;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
}
/* Inside a white form card, the bar runs edge to edge along the card's bottom */
#admin-body .form > .form-actions:last-child { margin: 18px -22px -22px; padding-left: 22px; padding-right: 22px; border-width: 1px 0 0; border-radius: 0; }
#admin-body .nw-card > .nw-buttons:last-child { margin: 6px -22px -22px; padding-left: 22px; padding-right: 22px; border-width: 1px 0 0; border-radius: 0; }
@media (max-width: 1000px) {
  #admin-body .form > .form-actions:last-child { margin: 14px -14px -14px; padding-left: 14px; padding-right: 72px; }
  #admin-body .form-actions { padding-right: 72px; }   /* room for the round "back to top" button */
}
@media (max-width: 639px) {
  #admin-body .nw-card > .nw-buttons:last-child { margin: 6px -16px -16px; padding-left: 16px; padding-right: 16px; }
}
/* Panels clip their content for the rounded corners. "hidden" quietly stops a sticky bar from sticking;
   "clip" trims the corners just the same but lets the Save bar stay in view. */
html.look-calm #admin-body .panel { overflow: clip; }

/* Back button fix: the calm look forces every back button's background to off-white, but the hover
   (and the buttons over dark hero pictures) still used white text, so the words vanished.
   Normal pages: dark pill on hover. Over a hero picture: dark see-through pill, white pill on hover. */
html.look-calm .back-link:hover { background-color: var(--ink) !important; color: #fff; }
html.look-calm :is(.comp-hero, .art-hero, .sb, .draw-hero, .pres-hero) .back-link { background-color: rgba(0, 0, 0, .55) !important; color: #fff; }
html.look-calm :is(.comp-hero, .art-hero, .sb, .draw-hero, .pres-hero) .back-link:hover { background-color: #fff !important; color: #111; }

/* ═════════════════════════════════════════════════════════════
   ROUND 46 — Neil's feedback 62
   ═════════════════════════════════════════════════════════════ */
/* Menu underline: it grew with a "transform", which browsers draw blurred while it moves, so it looked
   thick during the hover and thin once it stopped. Now the bar's painted width grows instead: crisp and
   the same thin line from start to finish. */
html.look-calm .main-nav a::after {
  transform: none !important; transition: background-size .18s ease;
  background: linear-gradient(var(--red), var(--red)) center / 0 100% no-repeat;
}
html.look-calm .main-nav a:hover::after, html.look-calm .main-nav a:focus-visible::after,
html.look-calm[data-section="home"] .main-nav .nav-home::after, html.look-calm[data-section="competitions"] .main-nav .nav-comps::after,
html.look-calm[data-section="fixtures"] .main-nav .nav-fixtures::after, html.look-calm[data-section="league"] .main-nav .nav-league::after,
html.look-calm[data-section="news"] .main-nav .nav-news::after { background-size: 100% 100%; }

/* Times in the visitor's own time zone: the small note under fixture lists, the calendar and in the footer */
.zone-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.site-footer .zone-note { color: inherit; opacity: .7; margin: 0 0 8px; }

/* Admin search on phones and tablets: the menu down the side is replaced by the "Admin menu" list,
   but the search box stays. Type in it and the matching pages, players, teams and matches drop down below. */
@media (max-width: 1000px) {
  .admin > .admin-nav { display: block; position: static; max-height: none; margin: 0 0 4px; padding: 0; background: none; }
  .admin > .admin-nav > :not(.admin-find) { display: none; }
  .admin > .admin-nav.finding > .nav-group:not(.nav-hide),
  .admin > .admin-nav.finding > .admin-records:not([hidden]),
  .admin > .admin-nav.finding > .admin-none:not([hidden]) { display: block; }
  .admin > .admin-nav.finding { background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .1); }
  .admin > .admin-nav .admin-find input { font-size: 16px; }   /* 16px stops iPhones zooming in on the box */
}

/* Overview → Needs you: the buttons on the right are all one width, so they line up */
.ny-group summary .btn { width: 112px; justify-content: center; text-align: center; }

/* Colour pickers sit on their own line under the label, with a little room, instead of touching the words */
.form label > input[type=color] { display: block; margin-top: 8px; }
.color-field { margin-top: 8px; }

/* Admin settings forms: every heading is its own box — a title strip on top, its settings underneath —
   with space between boxes, so each setting can be dealt with on its own. */
#admin-body .form-sec { background: #fff; border: 1px solid #e6e5da; border-radius: 14px; padding: 0 20px 6px; margin: 0 0 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
#admin-body .form-sec:last-child { margin-bottom: 0; }
#admin-body .form-sec > .form-heading {
  position: relative; margin: 0 -20px 18px; padding: 15px 20px 14px 34px; border-top: 0;
  border-bottom: 1px solid #ecebe3; background: #f7f6f0; border-radius: 13px 13px 0 0; font-size: 15px; letter-spacing: .02em;
}
#admin-body .form-sec > .form-heading::before { content: ""; position: absolute; left: 20px; top: 16px; width: 4px; height: 17px; border-radius: 2px; background: var(--red); }
#admin-body .form-sec > .form-heading small { margin-top: 5px; font-size: 13px; line-height: 1.45; letter-spacing: 0; }
#admin-body .form-sec.no-head { padding-top: 18px; }
#admin-body .form-sec > .grid-2 { padding-bottom: 4px; }
/* the tabs above the boxes get a little room */
#admin-body .form-tabs + .form-pane, #admin-body .form-tabs ~ .form-pane { margin-top: 18px; }
@media (max-width: 1000px) {
  #admin-body .form-sec { padding: 0 14px 4px; }
  #admin-body .form-sec > .form-heading { margin: 0 -14px 14px; padding: 13px 14px 12px 28px; }
  #admin-body .form-sec > .form-heading::before { left: 14px; top: 14px; }
}

/* Rich: a thinner red line under the menu. There were two 3px lines on top of each other (the header and
   the bar inside it), so it still looked thick. Now it is one 2px line. */
html.look-calm .site-header, .site-header { border-bottom: 0 !important; }
.site-bar { border-bottom-width: 2px !important; }
/* Rich: a thin line of colour along the top of the live & upcoming strip (on as standard, red;
   Site settings → Strip & results to change the colour or turn it off) */
.live-strip-wrap.strip-line-red, .live-strip-wrap.strip-line-yellow, .live-strip-wrap.strip-line-grey { border-top-width: 2px !important; }

/* ═════════════════════════════════════════════════════════════
   ROUND 48 — My Snooker is the home page (Neil's idea, Rich to try it), and the guide
   ═════════════════════════════════════════════════════════════ */
/* the logged-in home page: the live strip on its own (no banner), then the person's own header and sections */
.hero.hero-personal { background: none; border-bottom: 0; margin-top: 0; }
.ms-home-hero { border-radius: 14px; margin-bottom: 18px; }
.ms-homepage > .stack > .home-top { margin-bottom: 4px; }
.ms-homepage [data-ms-home] { margin-top: 22px; }
.ms-homepage [data-ms-home]:empty { min-height: 320px; }

/* Home page settings: the sections in two columns, each with ↑ ↓ to move it, numbered in order */
.ms-order-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.ms-order-cols .ms-set-h small { font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: 4px; }
.ms-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: ms-order; }
.ms-order-row { display: flex; align-items: stretch; gap: 8px; counter-increment: ms-order; border-radius: 10px; }
.ms-order-row::before { content: counter(ms-order); flex: none; width: 26px; display: grid; place-items: center; font: 700 13px var(--font-head); color: var(--muted); }
.ms-order-row .ms-tick { flex: 1; min-width: 0; }
.ms-move { display: flex; flex-direction: column; gap: 4px; flex: none; }
.ms-move button { flex: 1; width: 40px; min-height: 26px; border: 1px solid #dddccf; background: #fff; border-radius: 8px; font: 700 15px/1 var(--font-body); color: var(--ink); cursor: pointer; padding: 0; }
.ms-move button:hover, .ms-move button:focus-visible { border-color: var(--ink); background: #f3f2ea; }
.ms-order-row:first-child [data-move="-1"], .ms-order-row:last-child [data-move="1"] { opacity: .3; pointer-events: none; }
.ms-order-row.moved { animation: msMoved .7s ease-out; }
@keyframes msMoved { from { background: #fff1b8; } to { background: transparent; } }
@media (max-width: 760px) { .ms-order-cols { grid-template-columns: 1fr; } }

/* team pages: the team's rankings and breaks, side by side */
.team-extra { gap: 18px; align-items: start; margin: 22px 0; }

/* the guide: the page dimmed, one part lit up, and a note beside it */
.guide-shade { position: fixed; inset: 0; z-index: 1000; background: rgba(12, 12, 12, .62); }
.guide-spot { position: fixed; z-index: 1001; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 3px var(--red), 0 0 24px rgba(232, 0, 61, .35);
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; }
.guide-spot.none { display: none; }
.guide-tip { position: fixed; z-index: 1002; width: min(370px, calc(100vw - 24px)); background: #fff; color: var(--ink); border-radius: 16px;
  padding: 18px 18px 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); transition: left .3s ease, top .3s ease; }
.guide-tip.middle { width: min(440px, calc(100vw - 24px)); padding: 24px 24px 16px; }
.guide-count { font: 700 11px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.guide-title { margin: 6px 0 6px; font-size: 19px; line-height: 1.2; text-transform: none; }
.guide-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: #3a3a3a; }
.guide-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0 12px; }
.guide-dots i { width: 7px; height: 7px; border-radius: 50%; background: #dcdbd2; }
.guide-dots i.done { background: #9b9a90; }
.guide-dots i.on { background: var(--red); width: 18px; border-radius: 4px; }
.guide-btns { display: flex; align-items: center; gap: 8px; }
.guide-btns > span { flex: 1; }
.guide-skip { border: 0; background: none; padding: 6px 2px; font: 600 13px var(--font-body); color: var(--muted); cursor: pointer; text-decoration: underline; }
.guide-skip:hover { color: var(--ink); }
html.guide-on .squad-box, html.guide-on .a2hs-bar, html.guide-on .live-pops, html.guide-on .to-top { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .guide-spot, .guide-tip { transition: none; } }

/* Round 49 — My Snooker "At a glance": league position, ranking and breaks, three tiles at the top */
.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.glance-tile { position: relative; display: flex; flex-direction: column; gap: 2px; background: #fff; border-radius: 14px; padding: 16px 18px; color: var(--ink); border-top: 4px solid var(--red); transition: box-shadow .15s, transform .15s; }
.glance-tile:nth-child(2) { border-top-color: var(--ink); }
.glance-tile:nth-child(3) { border-top-color: var(--green, #1f7a35); }
.glance-tile small { font: 700 11px var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.glance-tile b { font: 700 38px/1.1 var(--font-head); }
.glance-tile span { font-size: 13px; color: var(--muted); }
.glance-tile i { position: absolute; right: 14px; top: 12px; font-style: normal; color: #b5b4a8; }
.glance-tile:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .1); transform: translateY(-2px); color: var(--ink); }
@media (max-width: 640px) { .glance { grid-template-columns: 1fr; gap: 8px; } .glance-tile { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; padding: 12px 14px; } .glance-tile small { width: 100%; } .glance-tile b { font-size: 28px; } }

/* ═════════════════════════════════════════════════════════════
   ROUND 49 — Rich's feedback (26 Oct)
   ═════════════════════════════════════════════════════════════ */
/* Footer social icons: like the logo — see-through with a thin black border */
html.look-calm .site-footer .socials a { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink); }
html.look-calm .site-footer .socials a svg { fill: var(--ink) !important; }
html.look-calm .site-footer .socials a:hover, html.look-calm .site-footer .socials a:focus-visible { background: var(--ink) !important; color: #fff !important; }
html.look-calm .site-footer .socials a:hover svg, html.look-calm .site-footer .socials a:focus-visible svg { fill: #fff !important; }

/* Home page: the Competitions / Calendar / Handicaps / Fixtures buttons get a thin border */
html.look-calm .quick-links a { border: 1px solid var(--ink) !important; }

/* News headlines: no red when the mouse is over them (they stay their own colour) */
html.look-calm :is(.hub-card, .feat-card, .news-mini, .ms-news, a.card, .cf-card):hover,
html.look-calm :is(.hub-card, .feat-card, .news-mini, .ms-news, a.card, .cf-card):hover :is(h3, h4, strong) { color: var(--ink) !important; }
html.look-calm :is(.feat-main, .ns-card):hover, html.look-calm :is(.feat-main, .ns-card):hover :is(h3, h4, strong) { color: #fff !important; }
html.look-calm .hero-text h2 a:hover, html.look-calm .art-hero h1 a:hover { color: inherit; }

/* The phone menu: cream, the logo at the top, the main pages as plain rows like the desktop menu, then the rest */
html.look-calm.menu-cream .menu-overlay { background: var(--page-bg, var(--cream)); color: var(--ink); padding: 14px 20px 24px; }
html.look-calm.menu-cream .menu-top { padding-bottom: 10px; }
html.look-calm.menu-cream .menu-logo .logo-main { display: none !important; }
html.look-calm.menu-cream .menu-logo .logo-light { display: block !important; height: 54px; width: auto; }
html.look-calm.menu-cream .menu-logo .logo-light.auto { filter: invert(1) hue-rotate(180deg); }
html.look-calm.menu-cream .menu-x { border-color: #c9c8bc; color: var(--ink); background: transparent; }
html.look-calm.menu-cream .menu-x:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
html.look-calm.menu-cream .menu-links { gap: 0; margin-top: 8px; border-top: 1px solid #d9d8cc; }
html.look-calm.menu-cream .menu-links a { background: none !important; color: var(--ink) !important; border: 0; border-bottom: 1px solid #d9d8cc; border-radius: 0;
  min-height: 56px; padding: 0 2px; font: 700 21px/1 var(--font-head); justify-content: space-between; box-shadow: none; }
html.look-calm.menu-cream .menu-links a::after { content: "›"; font: 400 26px/1 var(--font-body); color: #a9a89c; }
html.look-calm.menu-cream .menu-links a:hover, html.look-calm.menu-cream .menu-links a:active { color: var(--red) !important; }
html.look-calm.menu-cream[data-section="home"] .menu-links .nav-home, html.look-calm.menu-cream[data-section="competitions"] .menu-links .nav-comps,
html.look-calm.menu-cream[data-section="fixtures"] .menu-links .nav-fixtures, html.look-calm.menu-cream[data-section="league"] .menu-links .nav-league,
html.look-calm.menu-cream[data-section="news"] .menu-links .nav-news { color: var(--red) !important; }
html.look-calm.menu-cream .menu-links a.menu-live span { display: inline-flex; align-items: center; gap: 10px; }
html.look-calm.menu-cream .menu-links a.menu-live span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #b5b4a8; }
html.look-calm.menu-cream .menu-links a.menu-live.state-live span::before, html.look-calm.menu-cream .menu-links a.menu-live.state-soon span::before { background: var(--live-green, #19a33a); }
html.look-calm.menu-cream .menu-more { margin-top: 22px; padding-top: 0; border-top: 0; gap: 0 20px; }
html.look-calm.menu-cream .menu-more::before { content: "More"; grid-column: 1 / -1; font: 700 12px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-bottom: 4px; }
html.look-calm.menu-cream .menu-more a { color: var(--ink); font-weight: 600; border-bottom: 1px solid #e3e2d7; }
html.look-calm.menu-cream .menu-more a:hover { color: var(--red); }
html.look-calm.menu-cream .menu-foot .btn { background: #fff !important; color: var(--ink) !important; border: 1px solid #c9c8bc; box-shadow: none; }
html.look-calm.menu-cream .menu-foot .btn:first-child { background: var(--ink) !important; color: #fff !important; border-color: var(--ink); }
html.look-calm.menu-cream .menu-links a.menu-live::before { display: none !important; }   /* the menu bar's own dot: the row has its dot by the word */
html.look-calm.menu-cream .menu-links a.menu-live { animation: none !important; }

/* Round 50 — the last red hovers on news headlines: the banner headline on the cream banner, its picture's border,
   and any other link to a news story (they keep their own colour) */
html.look-calm .hero .hero-text h2 a:hover, html.look-calm .hero .hero-text h2 a:hover span { color: inherit !important; }
html.look-calm .hero-pic-link:hover { border-color: var(--ink) !important; }
html.look-calm a[href^="/news/"]:not(.btn):not(.feat-main):not(.ns-card):not(.hero-more):not(.hub-more):hover { color: inherit; }
/* the colour-blocks phone menu is black, so it always shows the main logo */
html:not(.menu-cream) .menu-logo .logo-light { display: none !important; }
html:not(.menu-cream) .menu-logo .logo-main { display: block !important; }

/* ═════════════════════════════════════════════════════════════
   ROUND 51 — one menu (Neil, feedback 64): More ▾ and Admin ▾ / Captain ▾ / My account ▾ in the bar,
   Log in as a button, the phone menu holding everything; the strip's All | My team switch; white scores
   ═════════════════════════════════════════════════════════════ */
/* the dropdowns */
.nav-drop-wrap { position: relative; display: flex; align-items: center; }
.chev { display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
[aria-expanded="true"] > .chev { transform: translateY(1px) rotate(-135deg); }
html.look-calm .main-nav .nav-more { display: inline-flex; align-items: center; cursor: pointer; border: 0; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; }
html.look-calm .main-nav .nav-more::after { display: none; }
.nav-drop { position: absolute; top: calc(100% + 12px); z-index: 300; background: #fff; color: var(--ink); border: 1px solid #e3e2d7; border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18); padding: 8px; text-align: left; }
.nav-drop[hidden] { display: none; }
.more-drop { left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; min-width: 380px; }
html.look-calm .main-nav .more-drop a { display: block; height: auto; padding: 11px 12px; border-radius: 8px; background: none !important; color: var(--ink) !important;
  font: 600 15px/1.25 var(--font-body); letter-spacing: 0; text-transform: none; white-space: nowrap; }
html.look-calm .main-nav .more-drop a::after { display: none; }
html.look-calm .main-nav .more-drop a:hover, html.look-calm .main-nav .more-drop a:focus-visible { background: #f3f2ea !important; color: var(--ink) !important; }
/* Log in (logged out) — a plain button with words, not a picture */
.nav-login { height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font: 700 15px var(--font-head); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; flex: none; }
.nav-login:hover { background: var(--ink); color: #fff; }
/* Admin ▾ / Captain ▾ / My account ▾ (logged in) */
.nav-acct { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid #3a3a3a; background: transparent; color: #fff;
  font: 700 15px var(--font-head); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; flex: none; }
.nav-acct-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--red); display: grid; place-items: center; flex: none; }
.nav-acct-ico svg { width: 22px; height: 22px; fill: #fff; }
.nav-acct:hover, .nav-acct[aria-expanded="true"] { background: #fff; color: var(--ink); border-color: #fff; }
html.look-calm.head-light .nav-acct { background: #ecebdf; border-color: #ecebdf; color: var(--ink); }
html.look-calm.head-light .nav-acct:hover, html.look-calm.head-light .nav-acct[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.acct-drop { right: 0; width: 330px; }
.acct-who { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid #ecebe3; }
.acct-who strong { display: block; font-size: 15px; } .acct-who small { color: var(--muted); font-size: 12.5px; }
.acct-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.acct-item:hover, .acct-item:focus-visible { background: #f3f2ea; color: var(--ink); }
.acct-item b { display: block; font-size: 15px; } .acct-item small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.acct-ico { width: 34px; height: 34px; border-radius: 50%; background: #f1f0e8; display: grid; place-items: center; flex: none; }
.acct-ico svg { width: 18px; height: 18px; fill: var(--ink); }
.acct-out { margin-top: 4px; border-top: 1px solid #ecebe3; border-radius: 0 0 10px 10px; }
.acct-out b { color: var(--red); }
@media (max-width: 1180px) { .nav-acct-word { display: none; } .nav-acct { padding: 0 10px 0 6px; gap: 2px; } }
@media (max-width: 900px) {
  .nav-acct { width: 42px; height: 42px; padding: 0; justify-content: center; border: 0; background: none !important; }
  .nav-acct .chev { display: none; }
  .nav-acct-ico { width: 42px; height: 42px; }
  .nav-login { height: 42px; padding: 0 16px; font-size: 14px; }
}

/* the phone menu: the account part (same links as the dropdown), Log in, and the buttons at the bottom */
.menu-acct { margin-top: 22px; }
.menu-h { margin: 0 0 6px; font: 700 12px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.menu-acct .acct-item { padding: 10px 2px; border-radius: 0; border-bottom: 1px solid #333; color: #fff; }
.menu-acct .acct-item small { color: #aaa; } .menu-acct .acct-ico { background: #222; } .menu-acct .acct-ico svg { fill: #fff; }
html.look-calm.menu-cream .menu-acct .acct-item { color: var(--ink); border-bottom-color: #e3e2d7; }
html.look-calm.menu-cream .menu-acct .acct-item small { color: var(--muted); }
html.look-calm.menu-cream .menu-acct .acct-ico { background: #fff; border: 1px solid #e3e2d7; } html.look-calm.menu-cream .menu-acct .acct-ico svg { fill: var(--ink); }
.menu-acct .acct-out { border-top: 0; }
.menu-login { display: block; width: 100%; margin-top: 18px; padding: 15px; font-size: 16px; background: var(--red) !important; color: #fff !important; border: 0 !important; }
/* Feedback 64: every button at the bottom fills its space (an odd one out goes the full width) */
.menu-foot .btn:first-child { grid-column: auto; }
.menu-foot > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
html.look-calm.menu-cream .menu-foot .btn:first-child { background: #fff !important; color: var(--ink) !important; border-color: #c9c8bc; }
html.look-calm.menu-cream .menu-foot .menu-a2hs { background: var(--ink) !important; color: #fff !important; border-color: var(--ink); }

/* the strip: All | My team */
.strip-mine { display: inline-flex; padding: 2px; margin-right: 6px; border: 1px solid currentColor; border-radius: 999px; }
.strip-mine button { border: 0; background: none; color: inherit; padding: 5px 12px; border-radius: 999px; font: 700 12.5px var(--font-body); cursor: pointer; white-space: nowrap; }
.strip-mine button[aria-pressed="true"] { background: var(--red); color: #fff; }
.live-strip .strip-ctrl { flex-wrap: wrap; justify-content: flex-end; }

/* Feedback 64: the match score at the top of a match page is just white (no green and red) */
.mh-score b.won, .mh-score b.lost, .mh-score b, .mh-score i { color: #fff; }
/* the switch has its own look (the strip's round ‹ › button styles must not reach it) */
html .live-strip .strip-mine, html.look-calm [data-strip] .strip-mine { background: #fff; border: 1px solid #d5d4c8; color: var(--ink); }
html .live-strip .strip-mine button, html.look-calm [data-strip] .strip-mine button, html.look-calm.strip-dark [data-strip] .strip-mine button {
  width: auto !important; height: auto !important; min-width: 0; padding: 6px 14px; border: 0 !important; border-radius: 999px; background: transparent !important; color: var(--ink) !important; font: 700 13px var(--font-body); }
html .live-strip .strip-mine button[aria-pressed="true"], html.look-calm [data-strip] .strip-mine button[aria-pressed="true"],
html.look-calm.strip-dark [data-strip] .strip-mine button[aria-pressed="true"] { background: var(--red) !important; color: #fff !important; }

/* ═════════════════════════════════════════════════════════════
   ROUND 52 — My Snooker is its own page again (/mysnooker); the home page is the same for everyone
   ═════════════════════════════════════════════════════════════ */
/* Home page, under Competitions / Calendar / Handicaps / Fixtures: the way to My Snooker (logged in, computers) */
.my-snooker-btn { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 18px; border-radius: var(--radius, 12px);
  background: var(--ink); color: #fff; border: 1px solid var(--ink); transition: transform .15s, box-shadow .15s; }
.my-snooker-btn svg { width: 22px; height: 22px; fill: var(--yellow, #ffd237); flex: none; }
.my-snooker-btn b { font: 700 17px var(--font-head); text-transform: uppercase; letter-spacing: .03em; }
.my-snooker-btn span { flex: 1; color: #d7d7d7; font-size: 14px; }
.my-snooker-btn i { font-style: normal; font-size: 20px; color: var(--yellow, #ffd237); transition: transform .15s; }
.my-snooker-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .18); }
.my-snooker-btn:hover i { transform: translateX(4px); }
@media (max-width: 900px) { .my-snooker-btn { display: none; } }

/* My Snooker in the account menu (phone menu and the dropdown): it stands out, with a soft shine */
.acct-item.acct-special { position: relative; overflow: hidden; background: linear-gradient(135deg, #fff7d1, #ffe58a) !important; border: 1px solid #f0cd55 !important;
  border-radius: 12px !important; margin: 4px 0 8px; padding: 12px 12px !important; }
.acct-item.acct-special .acct-ico { background: var(--ink) !important; border: 0 !important; }
.acct-item.acct-special .acct-ico svg { fill: var(--yellow, #ffd237) !important; }
.acct-item.acct-special b { color: var(--ink) !important; font-size: 16px; } .acct-item.acct-special small { color: #5c4a00 !important; }
.acct-item.acct-special::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: acctShine 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes acctShine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .acct-item.acct-special::after { animation: none; display: none; } }

/* Phones: no person button in the bar — everything for the login is in the ☰ menu */
@media (max-width: 900px) { .acct-wrap, .nav-acct { display: none !important; } }

/* The strip's controls: ‹ › and Calendar always together on one line; the filters (or All | my team) on a row below */
.live-strip .strip-ctrl { flex-wrap: nowrap; white-space: nowrap; }
.strip-arrows { display: inline-flex; gap: 6px; flex: none; }
.strip-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 12px; }
.strip-filters .strip-mine { margin: 0; }
.strip-select select { height: 36px; padding: 0 34px 0 12px; border-radius: 999px; border: 1px solid #d5d4c8; background-color: #fff; color: var(--ink);
  font: 600 14px var(--font-body); max-width: 260px; cursor: pointer; margin: 0; }
.strip-stats { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--red); color: #fff !important; font: 700 13.5px var(--font-body); white-space: nowrap; }
.strip-stats:hover { background: var(--ink); }
@media (max-width: 640px) { .strip-select { flex: 1 1 140px; } .strip-select select { width: 100%; max-width: none; } .strip-stats { width: 100%; justify-content: center; } }

/* the My Snooker page itself */
.ms-page { margin-top: 22px; }
.ms-page .ms-home-hero { margin-top: 4px; }

/* Neil, round 52: the round "scroll down" button sits above a Save bar, not on top of it */
@media (max-width: 1000px) {
  body:has(.form-actions) .scroll-hint, body:has(.save-all-row) .scroll-hint { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* the same button for visitors (it's a <button>: opens Log in) */
button.my-snooker-btn { width: 100%; text-align: left; cursor: pointer; font: inherit; }

/* Round 53 — the strip's filters: small pills in the strip's own style (the real dropdown sits invisibly on top) */
.strip-select { position: relative; display: inline-flex; align-items: center; height: 34px; min-width: 0; max-width: 250px; padding: 0 36px 0 14px;
  border-radius: 999px; border: 1px solid #cfcec2; background: #fff; color: var(--ink); font: 600 13px/1 var(--font-body); cursor: pointer; }
.strip-select-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip-select::after { content: ""; position: absolute; right: 15px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .7; pointer-events: none; }
.strip-select select { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; opacity: 0; cursor: pointer;
  border: 0; border-radius: 999px; font-size: 16px !important; appearance: none; -webkit-appearance: none; }
.strip-select:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.strip-select.is-set { border-color: var(--red); font-weight: 700; }
/* on the dark strip: dark pills like its ‹ › buttons */
html.look-calm.strip-dark .strip-select { background: #0d0d0d; border-color: #4a4a4a; color: #fff; }
html.look-calm.strip-dark .strip-select.is-set { border-color: var(--red); }
.strip-stats { height: 34px; font-size: 13px; }
@media (max-width: 640px) {
  .strip-filters { gap: 8px; }
  .strip-select { flex: 1 1 0; max-width: none; }
  .strip-stats { flex-basis: 100%; }
}

/* ═════════════════════════════════════════════════════════════
   ROUND 53 — Neil's feedback 70
   ═════════════════════════════════════════════════════════════ */
/* Home page buttons: eight of them, two even rows of four (two columns on phones), each with its icon */
html.look-calm .quick-links.ql-8 { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; overflow: visible; }
html.look-calm .quick-links.ql-8 a { justify-content: flex-start; gap: 10px; padding: 13px 14px; font-size: 15px; min-width: 0; white-space: nowrap; }
html.look-calm .quick-links.ql-8 a span { overflow: hidden; text-overflow: ellipsis; }
html.look-calm .quick-links.ql-8 svg { display: block !important; width: 20px; height: 20px; flex: none; }
@media (max-width: 1100px) { html.look-calm .quick-links.ql-8 a { font-size: 13.5px; padding: 12px 10px; gap: 8px; } }
@media (max-width: 760px) {
  html.look-calm .quick-links.ql-8 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html.look-calm .quick-links.ql-8 a { font-size: 14px; padding: 13px 12px; }
}

/* Menu bar: Live, the account button, the bell and search all one height (a touch taller) */
.nav-icon, .nav-acct, .nav-login { height: 50px; }
.nav-icon { width: 50px; }
.nav-acct-ico { width: 38px; height: 38px; }
html.look-calm .main-nav .nav-live-btn { height: 50px; margin-top: 0; padding: 0 20px; align-self: center; }
html.look-calm .main-nav { align-items: center; }
@media (max-width: 900px) { .nav-icon { width: 42px; height: 42px; } .nav-login { height: 42px; } }
/* More ▾ looks like the Admin ▾ dropdown: a heading, then rows with a round icon */
.more-drop { display: block; min-width: 0; width: 460px; }
.more-head strong { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; }
html.look-calm .main-nav .more-drop a.acct-item { display: flex; height: auto; padding: 8px 10px; border-radius: 10px; font: inherit; text-transform: none; letter-spacing: 0; white-space: normal; color: var(--ink) !important; }
html.look-calm .main-nav .more-drop a.acct-item b { font: 700 14.5px var(--font-body); }
html.look-calm .main-nav .more-drop a.acct-item:hover, html.look-calm .main-nav .more-drop a.acct-item:focus-visible { background: #f3f2ea !important; }
/* Phones: the ★ goes straight to My Snooker (before the bell); computers have it in the Admin ▾ menu and on the home page */
.nav-star { display: none !important; }
@media (max-width: 900px) { .nav-star { display: grid !important; } html.look-calm .nav-star svg { fill: #e0a800 !important; } }

/* Featured competition: its current round — results and fixtures */
.cf-round { margin-top: 12px; }
.cf-round-h { display: block; font: 700 12px var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cf-round ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cf-round li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px; }
.cf-round li span:first-child { text-align: right; } .cf-round li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-round li b { min-width: 58px; text-align: center; padding: 3px 8px; border-radius: 6px; background: #f1f0e8; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.cf-round li.done b { background: var(--ink); color: #fff; }
.cf-round-more { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; }

/* the white banner's slider dots, inside the card under "Continue reading" (Rich) */
.hero .hero-dots.in-card { margin-top: 18px; }
.hero.hero-l-white .hero-dots.in-card button { border-color: #bbb; }
.hero.hero-l-white .hero-dots.in-card button.on { background: var(--red); border-color: var(--red); }

/* search: rounded corners like the rest of the site (Rich) */
dialog.search { border-radius: 18px; }
.search-bar input { border-radius: 999px; border: 1px solid #dddccf; padding: 10px 16px; background: #fff; }
.search-bar input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, .07); }
.search-dot.go { background: var(--red); color: #fff; font-weight: 700; }

/* Our League page in groups (Rich), with buttons to jump to each group */
.league-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.league-jump a { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid #d9d8cc; font-weight: 700; font-size: 14px; color: var(--ink); }
.league-jump a:hover { border-color: var(--ink); color: var(--ink); }
.league-group { margin-bottom: 30px; scroll-margin-top: calc(var(--header-h, 90px) + 16px); }
.league-group-h { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0 0 14px; }
.league-group-h::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--red); }

/* footer: Help first in the row of links */
.foot-links .foot-help { font-weight: 700; }

/* admin → player: the "Sadly passed away" tick box */
.passed-away { padding: 12px 14px; border: 1px solid #e3e2d7; border-radius: 10px; background: #faf9f4; margin: 0 0 14px !important; align-items: flex-start !important; }
.passed-away input { margin-top: 3px; }

/* Phones (Neil): Live, then ★ My Snooker, then the bell, then search — Live keeps its grey / orange "Live soon" / green look */
.nav-live-m { display: none !important; }
@media (max-width: 900px) {
  .nav-live-m { display: inline-flex !important; align-items: center; gap: 6px; height: 42px; padding: 0 13px; border-radius: 999px; flex: none;
    font: 700 13px var(--font-head); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; border: 1px solid #3a3a3a; color: #fff; background: transparent; }
  .nav-live-m::before { width: 8px; height: 8px; margin: 0; }
  html.look-calm.head-light .nav-live-m:not(.state-soon):not(.state-live) { background: #ecebdf; border-color: #ecebdf; color: var(--ink); }
  .nav-live-m.state-soon { background: var(--soon-orange) !important; border-color: transparent !important; color: #fff !important; }
  .nav-live-m.state-live { background: var(--live-green) !important; border-color: transparent !important; color: #fff !important; }
  .nav-live-m.state-soon::before, .nav-live-m.state-live::before { background: #fff; }
}
@media (max-width: 400px) { .nav-live-m { padding: 0 10px; font-size: 12px; } .nav-icons { gap: 5px; } }
/* …and the ★ glows like the My Snooker row in the menu: gold, with the same soft shine passing over it */
@media (max-width: 900px) {
  .nav-icon.nav-star { position: relative; overflow: hidden; background: linear-gradient(135deg, #fff7d1, #ffe58a) !important; border: 1px solid #f0cd55 !important; }
  html.look-calm .nav-icon.nav-star svg { fill: var(--ink) !important; }
  .nav-icon.nav-star::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 50%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); animation: acctShine 4.5s ease-in-out infinite; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .nav-icon.nav-star::after { display: none; } }

/* Home page buttons: long names ("League tables", "Competitions") wrap onto two lines instead of being cut off */
html.look-calm .quick-links.ql-8 a { white-space: normal; line-height: 1.15; text-align: left; letter-spacing: .01em; }
html.look-calm .quick-links.ql-8 a span { overflow: visible; text-overflow: clip; }
/* Featured competition (dark card): upcoming dates readable — light text on a soft panel; results in white panels */
.cf-main .cf-round li b { background: rgba(255, 255, 255, .14); color: #fff; }
.cf-main .cf-round li.done b { background: #fff; color: var(--ink); }
.cf-main .cf-round-h, .cf-main .cf-round-more { color: #bdbdbd; }
/* the heading over the eight buttons */
.ql-head { margin: 0 0 12px; }
.ql-head h2 { margin: 0; }
/* (stronger than the cream header's own button colour, which was winning) */
@media (max-width: 900px) {
  html .nav-icons a.nav-icon.nav-star { background: linear-gradient(135deg, #fff7d1, #ffd84d) !important; border: 1px solid #e9bf2e !important; box-shadow: 0 0 0 3px rgba(255, 210, 55, .28), 0 0 14px rgba(255, 196, 0, .45); }
  html .nav-icons a.nav-icon.nav-star svg { fill: var(--ink) !important; }
}
@media (min-width: 761px) { html.look-calm .quick-links.ql-8 a { font-size: 14px; letter-spacing: 0; padding: 13px 12px; gap: 9px; } html.look-calm .quick-links.ql-8 svg { width: 18px; height: 18px; } }

/* ═════════════════════════════════════════════════════════════
   ROUND 54 — Neil's feedback 71
   ═════════════════════════════════════════════════════════════ */
/* Latest Results: each result a small scoreboard — tag and date on top, one line per side, scores lined up on the right */
.res-sb-list { padding: 2px 0; }
.res-sb-card { position: relative; display: block; border-bottom: 1px solid #eeede6; border-left: 0 !important; background: none; }
.res-sb-card:last-child { border-bottom: 0; }
.res-sb { position: relative; display: grid; gap: 7px; width: 100%; padding: 13px 48px 13px 16px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
a.res-sb { padding-right: 16px; }
.res-sb:hover, .res-sb:focus-visible { background: #faf9f4; color: var(--ink); }
.res-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.res-meta .res-tag { margin: 0; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-meta time { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.res-line { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14.5px; }
.res-line .badge { width: 26px; height: 26px; font-size: 9px; }
.res-line em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-line.won em { font-weight: 700; } .res-line.lost em { color: #6a6a6a; }
.res-line b { min-width: 32px; padding: 3px 8px; border-radius: 6px; background: #f1f0e8; font: 700 14px var(--font-body); text-align: center; }
.res-line.won b { background: var(--win, #1f8a3b); color: #fff; }
.res-line.lost b { background: var(--loss-bg, #fde4e7); color: var(--loss, #c4112f); }
.res-sb .res-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.res-sb-card.open .res-toggle { transform: translateY(-50%) rotate(180deg); }

/* Rich, round 54 — one set of colours all over the site:
   live = green (like the Live button) · in progress / waiting = yellow · postponed, cancelled, walkover = red ·
   finished / completed = green · wins green, losses red · handicaps + green, − red */
:root { --ok-bg: #dcf3e0; --ok-ink: #0b5d1a; --ok: #1f8a3b; --warn-bg: #fff0c2; --warn-ink: #7a5b00; --bad-bg: #fde4e7; --bad-ink: #b0102b; --bad: #c4112f; }
.live-dot { background: var(--live-green) !important; color: #fff !important; }
.live-dot::before { background: #fff !important; }
.live-strip .live-dot { background: var(--strip-live, var(--live-green)) !important; }
.live-strip .live-dot::before { background: currentColor !important; animation: pulse 1.2s infinite !important; }
.mh-score .live-dot { color: #fff !important; }
.sc-label.walkover { background: var(--strip-walkover, var(--bad)); color: var(--strip-walkover-ink, #fff); }
.sc-label.postponed { background: var(--strip-postponed, var(--bad)); color: var(--strip-postponed-ink, #fff); }
.status { background: #ecebe4; color: var(--ink); }
.status.in_progress, .status.submitted, .status.pending { background: var(--warn-bg) !important; color: var(--warn-ink) !important; }
.status.approved, .status.completed, .status.finished { background: var(--ok-bg) !important; color: var(--ok-ink) !important; }
.status.postponed, .status.cancelled, .status.walkover { background: var(--bad-bg) !important; color: var(--bad-ink) !important; }
.wl.won, .tally.win { background: var(--ok-bg) !important; color: var(--ok-ink) !important; }
.wl.lost, .tally.loss { background: var(--bad-bg) !important; color: var(--bad-ink) !important; }
.ms-form a.w { background: var(--ok) !important; } .ms-form a.l { background: var(--bad) !important; }
.hc-val.plus { background: var(--ok-bg) !important; color: var(--ok-ink) !important; }
.hc-val.minus { background: var(--bad-bg) !important; color: var(--bad-ink) !important; }
.hc-move.up { color: var(--ok) !important; } .hc-move.down { color: var(--bad) !important; }

/* News: the featured block a little smaller (Rich) — the big story is a 16:9 picture, the three beside it share its height */
.feat-main { min-height: 0; aspect-ratio: 16 / 9; }
.feat-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feat-side { grid-auto-rows: minmax(0, 1fr); }
.feat-card { min-height: 0; }
.feat-card img, .feat-card .hub-ph { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .feat-main { min-height: 0; } }
/* Pictures the shape of a snooker table: 16:9 landscape (Rich) */
.hub-pic { aspect-ratio: 16 / 9; }
.ns-card { aspect-ratio: 16 / 9; }
.cf-pic { height: auto; aspect-ratio: 16 / 9; }

/* Help page FAQs: each question opens and closes, with a search box above */
.faq-search { display: block; margin: 0 0 18px; }
.faq-search input { width: 100%; max-width: 560px; padding: 13px 18px; border-radius: 999px; border: 1px solid #d5d4c8; background: #fff; font-size: 16px; }
.faq-list { display: grid; gap: 10px; margin: 6px 0 26px; }
.faq { background: #fff; border: 1px solid #e3e2d7; border-radius: 12px; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 15px 50px 15px 18px; position: relative; font-weight: 700; font-size: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 400 26px/1 var(--font-body); color: var(--red); }
.faq[open] summary::after { content: "−"; }
.faq summary:hover { background: #faf9f4; }
.faq-a { padding: 0 18px 14px; color: #333; }
.faq-a > :first-child { margin-top: 0; }
.faq-none { color: var(--muted); }

/* My Snooker: choosing a team — clean cards, the whole name, a clear Choose button */
.ms > .ms-hero { border-radius: 14px; margin-bottom: 26px; }
.pick-league { margin-bottom: 28px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.pick-team { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px 14px; background: #fff; border: 1px solid #e3e2d7; border-radius: 14px;
  color: var(--ink); font: inherit; text-align: center; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.pick-badge .badge { width: 64px; height: 64px; font-size: 14px; }
.pick-team b { font: 700 16px/1.15 var(--font-head); text-transform: uppercase; letter-spacing: .02em; }
.pick-go { margin-top: auto; padding: 7px 14px; border-radius: 999px; background: #f1f0e8; font-size: 13px; font-weight: 700; }
.pick-team:hover, .pick-team:focus-visible { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .08); }
.pick-team:hover .pick-go, .pick-team:focus-visible .pick-go { background: var(--red); color: #fff; }
@media (max-width: 520px) { .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pick-badge .badge { width: 52px; height: 52px; } .pick-team b { font-size: 14px; } }

/* Draws & results: the entrant search box and its list (already entered = greyed out) */
.ent-pick { position: relative; }
.ent-pick input[type=search] { width: 100%; margin-top: 6px; }
.ent-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; max-height: 340px; overflow-y: auto; background: #fff; border: 1px solid #d5d4c8; border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .14); padding: 6px; margin-top: 4px; }
.ent-list[hidden] { display: none; }
.ent-h { display: block; padding: 6px 10px 4px; font: 700 11px var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ent-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font: inherit; cursor: pointer; color: var(--ink); }
.ent-item:hover:not([disabled]) { background: #f3f2ea; }
.ent-item small { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.ent-item.taken { opacity: .45; cursor: not-allowed; }
.ent-item.taken small { color: var(--bad, #c4112f); font-weight: 700; }
.ent-none { margin: 8px 10px; color: var(--muted); font-size: 14px; }

/* Fixtures form: the "new date" box only when Postponed is chosen */
[data-new-date-wrap][hidden] { display: none !important; }
/* admin: Back beside the breadcrumb */
.admin-crumbs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-crumbs .breadcrumb { margin-bottom: 0; }
.admin-back { cursor: pointer; font: inherit; font-weight: 700; font-size: 13px; }
/* admin lists: the Sort dropdown sits with the filters */
.toolbar [data-sort] { width: auto; }

/* ═══════════════════════════════════════════════════════════════
   ROUND 55 — Help & support requests (/support, Admin → Support)
   ═══════════════════════════════════════════════════════════════ */
/* status pills, in the site's status colours */
.sup-pill.sup-new { background: var(--bad-bg) !important; color: var(--bad-ink) !important; }
.sup-pill.sup-progress { background: var(--warn-bg) !important; color: var(--warn-ink) !important; }
.sup-pill.sup-waiting { background: #e8eef7 !important; color: #234a7a !important; }
.sup-pill.sup-resolved { background: var(--ok-bg) !important; color: var(--ok-ink) !important; }
.sup-no { font: 700 13px var(--font-head); color: var(--muted); letter-spacing: .03em; margin-right: 6px; }

/* the public pages */
.sup-page { max-width: 820px; }
.sup-lead { font-size: 17px; line-height: 1.55; margin: 0 0 8px; }
.sup-faq-hint { color: var(--muted); margin: 0 0 22px; }
.sup-form, .sup-reply { border-radius: 14px; border: 1px solid #e3e2d7; padding: 22px; display: grid; gap: 14px; }
.sup-form .help { display: block; min-height: 1em; margin-top: 4px; color: var(--muted); font-weight: 400; }
.sup-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.sup-shot-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sup-shot { display: block; max-width: 100%; max-height: 320px; margin-top: 10px; border-radius: 8px; border: 1px solid #e3e2d7; }
.sup-shot.small { display: inline-block; max-height: 60px; margin: 0; vertical-align: middle; }
.sup-mine { border-radius: 14px; border: 1px solid #e3e2d7; padding: 16px 20px; margin-bottom: 20px; }
.sup-mine h2 { font-size: 18px; margin: 0 0 8px; }
.sup-mine ul { list-style: none; margin: 0; padding: 0; }
.sup-mine li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid #eeede3; }
.sup-mine li:first-child { border-top: 0; }
.sup-mine li a { flex: 1 1 260px; color: var(--ink); }
.sup-done { text-align: center; border-radius: 16px; padding: 34px 24px; border: 1px solid #e3e2d7; }
.sup-done h1 { font-size: clamp(26px, 4vw, 34px); margin: 8px 0 12px; }
.sup-done .btn-row { justify-content: center; margin-top: 18px; }
.sup-done-tick { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 30px; font-weight: 700; }
.sup-ref { font-size: 1.15em; }
.sup-head h1, .sup-head h2 { margin: 8px 0 6px; }
.sup-head p { margin: 0 0 16px; }
.sup-private { font-size: 13px; margin-top: 10px; }
.sup-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: #fff; border: 1px solid #e3e2d7; border-left: 5px solid var(--ok);
  border-radius: 14px; padding: 20px 22px; margin-top: 24px; }
.sup-cta h2 { margin: 0 0 4px; font-size: 20px; }
.sup-cta p { margin: 0; color: var(--muted); max-width: 560px; }

/* the conversation */
.sup-thread { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.sup-msg { background: #fff; border: 1px solid #e3e2d7; border-radius: 14px; padding: 14px 16px; max-width: 88%; }
.sup-msg.them, .sup-msg.me { justify-self: start; border-top-left-radius: 4px; }
.sup-msg.league { justify-self: end; background: #f1f8f2; border-color: #cfe7d3; border-top-right-radius: 4px; }
.sup-page .sup-msg.me { justify-self: end; background: #fff; border-top-left-radius: 14px; border-top-right-radius: 4px; }
.sup-page .sup-msg.league { justify-self: start; border-top-right-radius: 14px; border-top-left-radius: 4px; }
.sup-msg.note { justify-self: stretch; max-width: none; background: #fff8dc; border: 1px dashed #e0c25c; }
.sup-msg-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 6px; }
.sup-msg-head time { color: var(--muted); white-space: nowrap; }
.sup-msg-body p { margin: 0 0 8px; } .sup-msg-body p:last-child { margin-bottom: 0; }

/* the inbox */
.sup-tallies { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.sup-tally { background: #fff; border: 1px solid #e3e2d7; border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.sup-tally b { font-size: 16px; margin-right: 3px; }
.sup-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.sup-toolbar input[type=search] { flex: 1 1 240px; width: auto; }
.sup-toolbar select { width: auto; }
.sup-toolbar .check { margin: 0; }
.sup-open { color: var(--ink); }
.sup-flag { display: inline-block; margin-left: 4px; font-size: 11.5px; font-weight: 700; color: var(--bad-ink); }
tr.sup-needs td:first-child { box-shadow: inset 4px 0 0 var(--bad); }
.sup-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.sup-side { border-radius: 14px; border: 1px solid #e3e2d7; padding: 18px; display: grid; gap: 12px; position: sticky; top: 90px; }
.sup-side h3 { margin: 0; }
.sup-side label { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.sup-side-note { font-size: 13px; margin: 0; }
@media (max-width: 900px) { .sup-grid { grid-template-columns: 1fr; } .sup-side { position: static; } .sup-msg { max-width: 100%; } }
.btn.danger { background: var(--bad, #c4112f) !important; color: #fff !important; }

/* categories (Master Admin) */
.sup-cat { border-radius: 14px; border: 1px solid #e3e2d7; padding: 18px; display: grid; gap: 12px; }
.sup-roles { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.sup-roles .check { margin: 0; font-weight: 400; }
.sup-cat-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sup-cat-foot .btn-row { margin-left: auto; }
.sup-sort { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sup-sort input { width: 80px; }
.sup-toolbar .check { display: inline-flex; align-items: center; gap: 8px; width: auto; font-weight: 600; white-space: nowrap; }
.sup-toolbar .check input { width: auto; margin: 0; }
.sup-faq-hint a { text-decoration: underline; }

/* ═══ ROUND 57 — log in first (support, entries, CueViews, memories) ═══ */
.login-wall { max-width: 760px; }
.lw-box { background: #fff; border: 1px solid #e3e2d7; border-radius: 16px; padding: 34px 26px; text-align: center; margin-top: 10px; }
.lw-box h1 { font-size: clamp(26px, 4vw, 34px); margin: 12px 0 10px; }
.lw-box p { max-width: 520px; margin: 0 auto 16px; line-height: 1.55; }
.lw-box .btn-row { justify-content: center; }
.lw-icon { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #f3f2ea; }
.lw-icon svg { width: 28px; height: 28px; fill: var(--ink); }
.lw-note { font-size: 13.5px; margin-top: 16px !important; margin-bottom: 0 !important; }
.ent-pair { align-items: end; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .grid-3 { grid-template-columns: 1fr; } }