/* Aberkenfig Pool League — dark sports-dashboard theme.
   Navy ground, electric blue, silver. Mobile-first with a bottom nav. */
:root {
  color-scheme: dark;
  --navy:#0a0f1e; --navy2:#0c1326; --card:#141e37; --card2:#1a2746; --raised:#223257;
  --line:#25324e; --line2:#304260;
  --blue:#2f6ff0; --blue2:#2a61d4; --accent:#6aa6ff;
  --ink:#eaf0fb; --muted:#8f9dbe; --silver:#cdd7ea;
  --win:#36cf80; --loss:#ff6b6b; --amber:#f5c451;
  --gold:#f5c451; --medal:#c4ccde; --bronze:#d08a4e;
  --nav-h:62px;
}
* { box-sizing:border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--navy);
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); }
a { color:var(--accent); text-decoration:none; }
h1,h2,h3 { margin:0; }
img { max-width:100%; }
[hidden] { display:none !important; }

/* ---- header ---- */
header { position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px clamp(16px,5vw,40px); background:rgba(12,19,38,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line); min-height:60px;
  padding-top:calc(10px + env(safe-area-inset-top, 0px)); }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); font-weight:800; letter-spacing:.01em; }
.brand img { width:38px; height:38px; border-radius:9px; flex:none; }
.brand .brand-sub { display:block; font-size:.66rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin-top:1px; }
.brand .brand-main { font-size:1.02rem; line-height:1.05; }
header nav { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
header nav a { color:var(--silver); font-weight:600; font-size:.92rem; padding:7px 11px; border-radius:8px; }
header nav a:hover { background:var(--card); color:var(--ink); }
header nav a.active { background:var(--blue); color:#fff; }
header .signout { border:0; background:transparent; color:var(--silver); font:inherit; font-weight:600; cursor:pointer; padding:7px 11px; }

/* ---- layout ---- */
main { width:min(1120px,94vw); margin:0 auto; padding:20px 0 40px; }
.hero { padding:18px 0 10px; }
.hero.compact { padding-top:8px; }
.hero h1 { font-size:clamp(1.6rem,5vw,2.6rem); line-height:1.08; }
.eyebrow { color:var(--accent); font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.wide { grid-column:1/-1; }

.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; margin-bottom:16px; }
.card h2 { font-size:1.15rem; }

.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:22px 2px 12px; }
.section-head h2 { font-size:1.12rem; }
.section-head a { font-weight:700; font-size:.88rem; }

/* ---- season hero + stats ---- */
.season-hero { background:linear-gradient(135deg,var(--card2),var(--card)); border:1px solid var(--line2);
  border-radius:18px; padding:22px; margin-bottom:14px; position:relative; overflow:hidden; }
.pill { display:inline-block; padding:4px 12px; border-radius:99px; background:rgba(47,111,240,.18);
  color:var(--accent); font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.season-hero h1 { margin:12px 0 6px; font-size:clamp(1.7rem,6vw,2.5rem); }
.season-hero p { margin:0; color:var(--muted); }
.news { margin-top:18px; background:var(--navy2); border:1px solid var(--line); border-left:3px solid var(--amber);
  border-radius:13px; padding:12px 14px 10px; }
.news-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.news-tag { color:var(--amber); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.news-count { color:var(--muted); font-size:.72rem; font-variant-numeric:tabular-nums; }
.news-track { list-style:none; margin:0; padding:0; min-height:4.6em; }
.news-item { display:flex; gap:10px; align-items:flex-start; animation:news-in .35s ease-out; }
.news-item[hidden] { display:none; }
.news-item p { margin:0; color:var(--ink); line-height:1.45; font-size:.95rem; }
.news-item strong { color:#fff; }
.news-emoji { font-size:1.35rem; line-height:1.2; }
.news-dots { display:flex; gap:6px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.news-dots button { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:var(--line2); cursor:pointer; }
.news-dots button[aria-current] { background:var(--amber); width:20px; border-radius:4px; }
@keyframes news-in { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .news-item { animation:none; } }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
.stat { background:var(--navy2); border:1px solid var(--line); border-radius:13px; padding:14px 10px; text-align:center; }
.stat strong { display:block; font-size:1.7rem; line-height:1; color:#fff; }
.stat span { display:block; margin-top:6px; color:var(--muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; }

/* ---- team badge ---- */
.badge-team { display:inline-grid; place-content:center; width:46px; height:46px; border-radius:50%;
  background:hsl(var(--h,215) 48% 42%); color:#fff; font-weight:800; font-size:.86rem; flex:none;
  border:2px solid hsl(var(--h,215) 55% 58%); letter-spacing:.02em; }
.badge-team.sm { width:32px; height:32px; font-size:.7rem; border-width:1.5px; }
/* Logo badges: the artwork is square with its own dark ground, so it fills the
   circle cleanly. Falls back to the initials span when a team has no logo. */
img.badge-team { display:block; object-fit:cover; background:var(--navy2);
  border-color:var(--line2); }

/* ---- tournament bracket ---- */
.prelim-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; margin-top:14px; }
.b-label { display:flex; justify-content:space-between; align-items:baseline; padding:6px 10px 2px; color:var(--amber);
  font-size:.72rem; font-weight:800; letter-spacing:.06em; }
.b-label span { color:var(--muted); font-weight:600; letter-spacing:0; }
.bracket-card { padding-left:0; padding-right:0; }
.bracket-card > .section-head, .bracket-card > .bracket-key { padding:0 20px; }
.bracket-hint { font-size:.78rem; }
.bracket-scroll { overflow-x:auto; padding:4px 20px 12px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.bracket-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.bracket { display:flex; gap:28px; width:max-content; padding-right:20px; }
.b-round { display:flex; flex-direction:column; width:220px; scroll-snap-align:start; }
.b-head { height:40px; margin:0 0 6px; text-align:center; color:var(--muted); font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em; }
.b-round.final .b-head, .b-round.champ .b-head { color:var(--amber); }
.b-body, .b-pair { flex:1; display:flex; flex-direction:column; }
.b-pair { position:relative; }
.b-slot { flex:1; display:flex; align-items:center; padding:5px 0; }
.b-match { position:relative; width:100%; background:var(--card2); border:1px solid var(--line2); border-radius:10px; }
.b-round.final .b-match { border-color:var(--amber); box-shadow:0 0 0 1px rgba(245,196,81,.25); }
.b-row { display:flex; align-items:center; gap:8px; padding:6px 10px; min-height:40px; }
.b-row + .b-row { border-top:1px solid var(--line); }
.b-logo { flex:none; width:22px; height:22px; border-radius:50%; display:inline-grid; place-content:center; object-fit:cover;
  background:hsl(var(--h,215) 48% 42%); color:#fff; font-size:.55rem; font-weight:800; }
.b-code { background:var(--navy2); color:var(--amber); border:1px dashed var(--line2); font-size:.58rem; }
.b-who { min-width:0; flex:1; display:flex; flex-direction:column; }
.b-name { font-size:.86rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.b-team { font-size:.7rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Home and Away share one fixed box so they line up exactly; the text-indent
   balances the trailing letter-spacing so the word sits dead centre. */
.b-home, .b-away { flex:none; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:2.9rem; height:1.05rem; padding:0; border:1px solid transparent; border-radius:4px; vertical-align:middle;
  font-size:.6rem; font-weight:800; line-height:1; text-transform:uppercase; letter-spacing:.06em; text-indent:.06em; }
.b-home { color:#1b1500; background:var(--amber); border-color:var(--amber); }
.b-away { color:var(--silver); border-color:var(--line2); }
.b-when { display:block; margin-top:3px; color:var(--silver); font-size:.68rem; font-weight:600; text-transform:none; letter-spacing:0; }
.when { color:var(--amber); font-weight:700; }
.cup-when { margin-left:8px; color:var(--muted); font-weight:600; text-transform:none; letter-spacing:0; }
.b-score { font-weight:800; font-variant-numeric:tabular-nums; color:var(--silver); }
.b-row.won .b-name, .b-row.won .b-score { color:var(--win); }
.b-row.lost { opacity:.5; }
.b-row.tbc .b-name { color:var(--muted); font-weight:600; font-style:italic; }
/* Joining lines: out of every tie, down the pair, into the next round. */
.b-round:not(.champ) .b-match::after { content:""; position:absolute; top:50%; right:-15px; width:14px; border-top:2px solid var(--line2); }
.b-pair.two::after { content:""; position:absolute; top:25%; bottom:25%; right:-15px; border-right:2px solid var(--line2); }
.b-round + .b-round .b-match::before, .b-champ::before { content:""; position:absolute; top:50%; left:-15px; width:14px; border-top:2px solid var(--line2); }
.b-champ { position:relative; width:100%; text-align:center; padding:16px 10px; border-radius:12px; border:1px dashed var(--line2);
  background:var(--navy2); display:flex; flex-direction:column; gap:2px; }
.b-champ.crowned { border:1px solid var(--gold); background:linear-gradient(160deg,rgba(245,196,81,.18),var(--card2)); }
.b-champ .b-name { white-space:normal; }
/* Doubles pairings are long: wrap to two lines rather than cut off. */
.b-match .b-name { white-space:normal; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.b-trophy { font-size:1.6rem; }
.bracket-key { font-size:.78rem; margin:6px 0 0; }

/* ---- team page: cup ties ---- */
.cup-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:0 16px; }
.cup-card { padding:14px 16px; }
.cup-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; }
.cup-head a:first-child { font-weight:800; color:#fff; }
.cup-link { font-size:.8rem; white-space:nowrap; }
.cup-row { display:grid; grid-template-columns:2.9rem 1fr auto; gap:2px 10px; padding:8px 0; border-top:1px solid var(--line); }
.cup-round { grid-column:1 / -1; color:var(--amber); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.cup-tie { font-size:.9rem; line-height:1.45; }
.cup-side { align-self:start; height:calc(.9rem * 1.45); display:flex; align-items:center; }   /* centred on the first line of the tie */
.cup-score { align-self:center; font-weight:800; font-variant-numeric:tabular-nums; color:var(--silver); white-space:nowrap; }
.cup-row.won .cup-score { color:var(--win); }
.cup-row.lost { opacity:.6; }
@media (max-width:420px) { .cup-grid { grid-template-columns:1fr; } }

/* ---- team page ---- */
.team-hero { display:flex; align-items:center; gap:18px; padding:14px 0 18px; }
.team-crest { width:104px; height:104px; border-radius:20px; object-fit:cover; flex:none;
  border:2px solid var(--line2); background:var(--navy2); }
span.team-crest { display:grid; place-content:center; font-size:1.5rem; }
.team-hero h1 { font-size:clamp(1.5rem,6vw,2.2rem); margin:2px 0 4px; }
.team-stats { grid-template-columns:repeat(5,1fr); margin-top:8px; margin-bottom:16px; }
.team-stats.elo-stats { grid-template-columns:repeat(2,1fr); }
.stat-group { margin:14px 2px 0; color:var(--muted); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.captain-name { margin:0; font-size:1.15rem; font-weight:700; }
.contact-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.menu-list a .accent { color:var(--accent); font-weight:700; }
.badge-link { display:inline-flex; }
a.st-team { color:var(--ink); }
a.st-team:hover .nm { color:var(--accent); }
a.fx-side { color:inherit; }
a.fx-side:hover .fx-name { color:var(--accent); }

/* ---- fixture cards ---- */
.fixture-card { display:block; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; margin-bottom:10px; color:inherit; }
.fixture-card .fx-date { color:var(--accent); font-size:.76rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:10px; display:flex; justify-content:space-between; }
.fixture-card .fx-date .wk { color:var(--muted); }
.fx-teams { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.fx-side { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.fx-side .fx-name { font-weight:700; font-size:.92rem; }
.fx-mid { text-align:center; }
.fx-vs { font-weight:800; color:var(--silver); font-size:.95rem; }
.fx-score { font-weight:800; font-size:1.5rem; color:#fff; }
.fx-status { display:block; margin-top:3px; color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; }
.fx-score-mid .fx-vs { color:#fff; }

.tourney-night { display:block; margin:22px 0 10px; border-left:4px solid var(--accent); color:inherit; }
tr.tourney-row td { background:rgba(47,111,240,.08); }
tr.bye-row td { color:var(--muted); }
.bye-line { margin:-4px 2px 12px; color:var(--muted); font-size:.88rem; }
.bye-card { opacity:.75; }
.bye-card .bye-text { margin:0; color:var(--muted); font-weight:700; text-align:center; }
tr.tourney-row td:first-child { box-shadow:inset 4px 0 0 var(--accent); }
.tourney-night .tn-cups { margin:4px 0 6px; line-height:1.5; }
.tourney-night h2 { margin:4px 0 2px; font-size:1.05rem; }

/* LIVE badge: a scorecard is being entered right now. */
.live-badge { display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:999px;
  background:rgba(54,207,128,.16); color:var(--win); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.live-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--win); animation:live-pulse 1.4s ease-in-out infinite; }
.fx-mid .live-badge { display:flex; width:fit-content; margin:0 auto 4px; }
.fx-mid .live-badge + .fx-score { display:block; line-height:1.1; }
@keyframes live-pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(54,207,128,.6); } 50% { opacity:.55; box-shadow:0 0 0 5px rgba(54,207,128,0); } }
@media (prefers-reduced-motion: reduce) { .live-badge::before { animation:none; } }
.autosave-status { font-size:.85rem; margin-left:10px; }

/* expandable fixture details */
details.fixture-card > summary { list-style:none; cursor:pointer; }
details.fixture-card > summary::-webkit-details-marker { display:none; }
.fx-detail { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.fx-detail div { display:flex; flex-direction:column; gap:2px; font-size:.9rem; }
.fx-detail .muted { font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; }

/* menu list (More page) */
.menu-list { display:flex; flex-direction:column; gap:8px; }
.menu-list a { display:flex; flex-direction:column; gap:2px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:var(--navy2); color:var(--ink); font-weight:700; }
.menu-list a small { color:var(--muted); font-weight:500; }
.sort-chips { margin:0 0 14px; }
.sort-chips a.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.rankings .rk-pos { font-weight:800; }
.rankings .rk-team-inline { display:none; }
/* The crown hangs in a fixed gutter left of the Player column, so every name
   starts at the same x whether or not it is crowned. Centred on the name's
   line, then lifted: the emoji's ink sits low in its box (measured 1.8px at 16px). */
.rankings th:nth-child(2),.rankings td:nth-child(2) { padding-left:30px; }
.rk-name { position:relative; display:inline-block; }
.crown { font-size:.95em; line-height:1; }
.crown[data-tip] { position:relative; display:inline-block; cursor:help; outline:none; transform:translateY(-.08em); }
.rk-name .crown { position:absolute; right:100%; margin-right:6px; top:50%; transform:translateY(calc(-50% - .08em)); }
/* Tooltip on hover (mouse) and on tap (focus), since phones have no hover. */
.crown[data-tip]::after { content:attr(data-tip); position:absolute; left:0; bottom:calc(100% + 8px); z-index:5;
  width:max-content; max-width:220px; white-space:normal; padding:7px 10px; border-radius:8px;
  background:var(--raised); border:1px solid var(--line2); color:var(--ink); font-size:.78rem; font-weight:600; line-height:1.3;
  box-shadow:0 6px 18px rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .12s; }
.crown[data-tip]:hover::after,.crown[data-tip]:focus::after { opacity:1; }
/* Later rows' names are positioned too, so without this they paint over the tooltip. */
.crown[data-tip]:hover,.crown[data-tip]:focus { z-index:20; }
/* Tables scroll sideways, which clips anything above them: near the top the
   tooltip opens downwards instead. */
tbody tr:nth-child(-n+2) .crown[data-tip]::after { bottom:auto; top:calc(100% + 8px); }
/* League table: crown to the right of the team name, outside the team link.
   Its tooltip is anchored to the start of the cell (the crown is static and
   untransformed so it doesn't become the anchor), giving it the column's full
   width on a phone. margin-bottom lifts the emoji as transform does elsewhere. */
.st-cell { position:relative; display:flex; align-items:center; gap:6px; min-width:0; }
.st-cell:hover,.st-cell:focus-within { z-index:20; }
.st-cell .st-team { min-width:0; }
.st-cell .crown[data-tip] { position:static; transform:none; margin-bottom:.16em; flex:none; }
.st-cell .crown[data-tip]::after { left:0; right:auto; }
/* Squad list keeps the same crown gutter as the rankings. */
.squad th:first-child,.squad td:first-child { padding-left:30px; }
.rankings .st-won { color:var(--win); }

/* result pill */
.result-row { display:flex; align-items:center; gap:10px; padding:11px 2px; border-bottom:1px solid var(--line); }
.result-row:last-child { border-bottom:0; }
.result-row .rr-teams { flex:1; font-weight:600; font-size:.92rem; }
.result-row .rr-score { font-weight:800; font-variant-numeric:tabular-nums; color:#fff;
  background:var(--navy2); border:1px solid var(--line); border-radius:8px; padding:4px 10px; }

/* ---- tables ---- */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; }
th,td { padding:11px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; color:var(--ink); }
th.num,td.num { text-align:right; font-variant-numeric:tabular-nums; }
th.ra,td.ra { text-align:right; }
th.ctr,td.ctr { text-align:center; }
th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  border-bottom:1px solid var(--line2); }
tbody tr:last-child td { border-bottom:0; }

/* league table */
.standings td { padding:9px 8px; }
.standings .st-team { display:flex; align-items:center; gap:10px; font-weight:700; min-width:0; }
/* max-width:0 with a percentage width is what lets the name truncate instead of
   overflowing into the figures column on a narrow screen. */
.standings td:nth-child(2) { max-width:0; width:99%; }
.standings .st-team .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.standings .st-rank { width:30px; text-align:center; font-weight:800; color:var(--muted); }
.standings tr.top .st-rank { color:var(--navy); background:var(--gold); border-radius:7px; }
.standings tr.pos2 .st-rank { color:var(--navy); background:var(--medal); border-radius:7px; }
.standings tr.pos3 .st-rank { color:var(--navy); background:var(--bronze); border-radius:7px; }
.standings .st-pts { font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.standings .st-won { color:var(--win); font-weight:700; }
.standings .st-lost { color:var(--loss); font-weight:700; }
.standings tr.me { background:rgba(47,111,240,.10); }
/* Where the table divides into top 8 and bottom 7 after 14 games. */
/* Painted as a gradient on one full-width cell: a dashed border restarts at
   every column edge and merges with the neighbouring cells' borders. */
.standings tr.split-row td { padding:0; height:2px; border:0;
  background:repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 14px); }
.standings tr:has(+ tr.split-row) td { border-bottom:0; }

/* rankings */
.rank-row .rk-pos { font-weight:800; width:34px; text-align:center; }
.rank-medal-1 { color:var(--gold); } .rank-medal-2 { color:var(--medal); } .rank-medal-3 { color:var(--bronze); }
.form { display:inline-flex; gap:3px; }
.form i { width:16px; height:16px; border-radius:4px; display:inline-grid; place-content:center;
  font-size:.6rem; font-weight:800; font-style:normal; color:#fff; }
.form i.w { background:var(--win); } .form i.l { background:var(--loss); color:#2a0d0d; }

/* ---- forms ---- */
input,select,textarea,button { font:inherit; }
input,select,textarea { width:100%; border:1px solid var(--line2); border-radius:9px; padding:11px 12px;
  background:var(--navy2); color:var(--ink); }
input::placeholder,textarea::placeholder { color:var(--muted); }
select { color:var(--ink); }
select option { background:var(--card2); color:var(--ink); }
select+select { margin-top:6px; }
label { display:grid; gap:6px; font-weight:650; color:var(--silver); }
button { border:0; border-radius:10px; padding:11px 17px; color:#fff; background:var(--blue); font-weight:700; cursor:pointer; }
button:hover { background:var(--blue2); }
button.secondary,a.button.secondary { color:var(--accent); background:rgba(47,111,240,.16); }
a.button { display:inline-block; border-radius:10px; padding:11px 17px; color:#fff; background:var(--blue);
  font-weight:700; white-space:nowrap; }
a.button:hover { background:var(--blue2); }
.inline-form { display:grid; grid-template-columns:2fr 1fr auto; gap:10px; }
.form-stack { display:grid; gap:16px; max-width:680px; }
.actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.inline-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.link-button { padding:6px 10px; background:transparent; color:var(--loss); }
.back { display:inline-block; margin-bottom:16px; color:var(--accent); font-weight:600; }

/* ---- scorecard ---- */
.scorecard td { white-space:nowrap; }
.scorecard th:first-child,.scorecard td:first-child { text-align:center; }
.scorecard small { display:block; color:var(--muted); }
.scorecard { width:auto; min-width:100%; }
.scorecard select { display:block; width:auto; min-width:100%; }
.scorecard th:first-child,.scorecard td:first-child { width:64px; position:sticky; left:0; z-index:1; background:var(--card); }
.scorecard thead th:first-child { background:var(--card); }
.scorecard.review { min-width:0; }
.scorecard tr.session th { text-align:left; width:auto; background:var(--card2); color:var(--accent);
  font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; }
/* Breaking side: an asterisk in a fixed-width gutter beside the selects, so
   marked and unmarked cells stay the same size and line up. */
.scorecard .pick { display:flex; align-items:center; gap:6px; }
.scorecard .pick > div { flex:1; }
.brk { color:var(--accent); font-weight:800; }
.scorecard .pick .brk { width:.7em; flex:none; text-align:center; font-size:1.15rem; }
.brk-key { margin:0 0 10px; font-size:.85rem; }
.scorecard.review td,.scorecard.review th { white-space:nowrap; }
.scorecard.review .player { display:block; }
.scorecard.review .won { background:rgba(54,207,128,.14); font-weight:700; }
.scorecard.review tfoot th { background:var(--card2); font-size:1rem; text-transform:none; color:#fff; }
.final-score { margin:0; font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; color:#fff; }

/* ---- misc components ---- */
.muted { color:var(--muted); font-size:.9rem; }
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chips span,.chips a { padding:9px 14px; background:var(--card2); border:1px solid var(--line); border-radius:99px; color:var(--silver); }
.message { padding:12px 15px; margin-bottom:12px; border-radius:10px; background:rgba(47,111,240,.14); border-left:4px solid var(--blue); color:var(--ink); }
.message.error { background:rgba(255,107,107,.14); border-color:var(--loss); }
.impact { background:var(--navy2); padding:14px; border-left:4px solid var(--blue); border-radius:8px; color:var(--silver); }
.badge { display:inline-block; min-width:19px; padding:1px 6px; border-radius:99px; color:var(--navy); background:var(--amber); font-size:.72rem; font-weight:800; text-align:center; }

/* ---- bottom nav ---- */
.bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex;
  background:rgba(12,19,38,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom, 0px); }
.bottom-nav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 2px 8px;
  color:var(--muted); font-size:.66rem; font-weight:700; letter-spacing:.02em; }
.bottom-nav a svg { width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.bottom-nav a.active { color:var(--accent); }
.bottom-nav a.active svg { stroke:var(--accent); }

/* ---- install hint ---- */
.install-hint { display:flex; align-items:center; gap:12px; padding:10px clamp(16px,5vw,40px); background:var(--blue); color:#fff; font-size:.92rem; }
.install-hint img { border-radius:7px; flex:none; }
.install-hint span { flex:1; }
.install-hint button { border:0; cursor:pointer; font:inherit; }
.install-hint #install-go { padding:7px 14px; border-radius:8px; background:#fff; color:var(--blue2); font-weight:800; }
.install-hint #install-dismiss { background:transparent; color:#fff; font-size:1.4rem; line-height:1; padding:0 4px; }
.install-hint small { display:block; margin-top:3px; opacity:.85; font-size:.8rem; }
/* The iOS share glyph: a box with an arrow out of the top. */
.ios-share { display:inline-block; width:14px; height:16px; margin:0 2px -3px; border:2px solid #fff; border-top:0; border-radius:0 0 3px 3px; position:relative; }
.ios-share::before { content:""; position:absolute; left:50%; top:-9px; width:2px; height:13px; background:#fff; transform:translateX(-50%); }
.ios-share::after { content:""; position:absolute; left:50%; top:-9px; width:7px; height:7px; border-left:2px solid #fff; border-top:2px solid #fff; transform:translateX(-50%) rotate(45deg); }

/* ---- about / release / specs (kept, dark-themed) ---- */
.about-hero,.about-intro { display:flex; align-items:center; justify-content:space-between; gap:26px; }
.about-hero .lede { max-width:720px; color:var(--silver); font-size:1.05rem; }
.version-stamp { min-width:140px; aspect-ratio:1; display:grid; place-content:center; text-align:center; color:#fff;
  background:linear-gradient(145deg,var(--blue),var(--blue2)); border-radius:24px; }
.version-stamp span { font-size:.7rem; font-weight:800; letter-spacing:.18em; }
.version-stamp strong { font-size:2.4rem; line-height:1.1; }
.version-stamp small { opacity:.82; }
.about-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.about-grid .card { margin-bottom:0; }
.about-intro p { max-width:720px; margin:0; color:var(--silver); }
.status-card { min-width:240px; display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--navy2); }
.status-card strong,.status-card small { display:block; }
.status-card small { color:var(--muted); margin-top:2px; }
.status-dot { width:12px; height:12px; flex:none; border-radius:50%; background:var(--win); box-shadow:0 0 0 5px rgba(54,207,128,.16); }
.spec-list { margin:0; }
.spec-list div { display:grid; grid-template-columns:150px 1fr; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
.spec-list div:last-child { border-bottom:0; }
.spec-list dt { color:var(--muted); font-size:.84rem; font-weight:700; }
.spec-list dd { margin:0; font-weight:650; color:var(--silver); }
.feature-list { list-style:none; margin:0; padding:0; }
.feature-list li { display:flex; gap:13px; padding:11px 0; border-bottom:1px solid var(--line); }
.feature-list li:last-child { border-bottom:0; }
.feature-list li>span { display:grid; place-items:center; width:32px; height:32px; flex:none; border-radius:9px; color:var(--accent); background:rgba(47,111,240,.16); font-size:.76rem; font-weight:800; }
.feature-list strong { display:block; }
.feature-list small { display:block; margin-top:2px; color:var(--muted); }
.release-list { list-style:none; margin:0; padding:0; }
.release-list>li { padding:16px 0; border-bottom:1px solid var(--line); }
.release-list>li:first-child { padding-top:4px; }
.release-list>li:last-child { border-bottom:0; padding-bottom:0; }
.release-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-bottom:9px; }
.release-head strong { padding:3px 11px; border-radius:99px; color:#fff; background:var(--blue); font-size:.9rem; }
.release-list>li:not(:first-child) .release-head strong { color:var(--accent); background:rgba(47,111,240,.16); }
.release-head span { color:var(--muted); font-size:.84rem; font-weight:650; text-transform:uppercase; letter-spacing:.04em; }
.release-list ul { margin:0; padding-left:20px; color:var(--silver); }
.release-list ul li { padding:3px 0; }
.metric-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.metric-grid div { min-height:108px; display:flex; flex-direction:column; justify-content:flex-start; padding:15px; border:1px solid var(--line); border-radius:12px; background:var(--navy2); }
.metric-grid strong { color:var(--accent); font-size:1.5rem; }
.metric-grid span { margin-top:6px; color:var(--muted); font-size:.8rem; line-height:1.3; }
.manifest-table th { text-align:left; color:var(--muted); background:transparent; }
.manifest-table td { text-align:left; font-weight:650; color:var(--silver); }
.legal-line { margin:18px 0 0; color:var(--muted); font-size:.82rem; }
.site-footer { display:flex; justify-content:space-between; gap:20px; padding:22px clamp(16px,5vw,40px); color:var(--muted); background:var(--navy2); border-top:1px solid var(--line); font-size:.84rem; }

/* ---- responsive ---- */
@media (min-width:901px) { .bottom-nav { display:none; } body { padding-bottom:0; } }
@media (max-width:900px) {
  header nav { display:none; }
  .metric-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:620px) {
  .standings .opt { display:none; }   /* keep +/- and Pts on screen */
  /* Rankings: team moves under the player's name so the figures fit. */
  .rankings .rk-team { display:none; }
  .rankings .rk-team-inline { display:block; font-size:.78rem; }
  .rankings th,.rankings td { padding-left:5px; padding-right:5px; }
  .rankings th:nth-child(2),.rankings td:nth-child(2) { padding-left:28px; }
  /* Long names wrap rather than push the figures off the right edge. */
  .rankings td:nth-child(2) { white-space:normal; overflow-wrap:break-word; width:99%; }
  /* Wrap rather than truncate: "Fox & Hounds" and "Fox & Hounds B" both
     ellipsised to "Fox & Hou…", making the two teams indistinguishable. */
  .standings .st-team .nm { white-space:normal; overflow:visible; line-height:1.15; overflow-wrap:break-word; min-width:0; }
  /* Six figure columns (P W D L +/- Pts) need tighter padding on a phone, or
     single long words like "Llangeinor" spill into the P column. */
  .standings th,.standings td { padding-left:4px; padding-right:4px; }
  .standings .st-team { gap:8px; }
  .standings .badge-team.sm { width:28px; height:28px; }
  .grid,.about-grid { grid-template-columns:1fr; }
  .inline-form { grid-template-columns:1fr; }
  .about-hero,.about-intro,.site-footer { flex-direction:column; align-items:flex-start; }
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .stat strong { font-size:1.4rem; }
}

/* Public scorecard link on a confirmed result. */
.fx-date .sc-link { margin:-3px 0; padding:3px 10px; border-radius:99px; background:rgba(47,111,240,.16);
  color:var(--accent); font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.fx-date .sc-link:hover, .fx-date .sc-link:focus-visible { background:rgba(47,111,240,.3); }
.fx-date .wk .sc-link { margin-left:6px; }

/* Public scorecard: two team columns that fit a phone without sideways scrolling. */
.scorecard.public { table-layout:fixed; width:100%; }
.scorecard.public th:first-child,.scorecard.public td:first-child { width:52px; }
.scorecard.public td,.scorecard.public th { white-space:normal; overflow-wrap:anywhere; }
.scorecard.public .clr { display:block; margin-top:2px; color:var(--win); font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }

/* 8s Cup scorecard: first to 7, blackball shoot-out at 6-6 */
.cup-rule { margin:0 0 6px; color:var(--silver); font-size:.88rem; }
.cup-running { margin:0 0 10px; font-weight:800; color:var(--amber); font-variant-numeric:tabular-nums; }
.cup-running:empty { display:none; }
.scorecard .shootout-row td { white-space:normal; }
.scorecard .shootout-row select:disabled { opacity:.5; }
.fx-status.shootout { color:var(--amber); font-weight:800; }

/* ---- player page ---- */
a.pl-link { color:inherit; text-decoration:none; }
a.pl-link:hover strong, a.pl-link:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.elo-sub { margin:-4px 0 10px; font-size:.82rem; }
.elo-chart { position:relative; }
.elo-chart svg { display:block; width:100%; height:auto; overflow:visible; }
.elo-grid { stroke:var(--line); stroke-width:1; }
.elo-axis { fill:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.elo-season { stroke:var(--line2); stroke-width:1; stroke-dasharray:3 3; }
.elo-line { fill:none; stroke:#4a8af5; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.elo-gap { fill:none; stroke:#4a8af5; stroke-width:2; stroke-dasharray:4 5; opacity:.6; }
.elo-dot { fill:#4a8af5; stroke:var(--card); stroke-width:2; }
.elo-cross { stroke:var(--muted); stroke-width:1; }
.elo-focus { fill:#4a8af5; stroke:var(--ink); stroke-width:2; }
.elo-hit { fill:transparent; cursor:crosshair; outline:none; }
.elo-hit:focus-visible { stroke:var(--accent); stroke-width:2; }
.elo-tip { position:absolute; top:-6px; transform:translateY(-100%); pointer-events:none; z-index:2;
  background:var(--raised); border:1px solid var(--line2); border-radius:8px; padding:6px 10px; min-width:120px; max-width:240px;
  box-shadow:0 6px 18px rgba(0,0,0,.35); }
.elo-tip strong { display:block; font-size:1.05rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.elo-tip span { display:block; font-size:.78rem; color:var(--silver); }
.elo-tip small { display:block; font-size:.72rem; color:var(--muted); }
.pl-cup { padding:8px 0; border-top:1px solid var(--line); }
.pl-cup:first-of-type { border-top:0; }
.pl-cup-status { display:block; font-size:.82rem; color:var(--silver); margin-top:2px; }
.pl-game { padding:10px 0; border-top:1px solid var(--line); }
.pl-game:first-of-type { border-top:0; }
.pl-game-head { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.pl-when { color:var(--amber); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.pl-change { font-weight:800; font-variant-numeric:tabular-nums; color:var(--silver); }
.pl-change.up { color:var(--win); }
.pl-change.down { color:var(--loss); }
.pl-game-main { margin-top:3px; }
.pl-score { margin-left:6px; color:var(--silver); font-variant-numeric:tabular-nums; }
.pl-game-main .sc-link { margin-left:8px; font-size:.8rem; }
.pl-frames { list-style:none; margin:6px 0 0; padding:0; font-size:.84rem; color:var(--silver); }
.pl-frames li { padding:2px 0; }
.pl-wl { display:inline-block; width:1.3em; font-weight:800; }
.pl-frames li.won .pl-wl { color:var(--win); }
.pl-frames li.lost .pl-wl { color:var(--loss); }
.pl-cup-status { display:flex; align-items:flex-start; gap:8px; }
.pl-cup-status .b-home, .pl-cup-status .b-away { margin-top:1px; }
.pl-sub { margin:18px 0 2px; font-size:1rem; }
.pl-cup-played { display:block; font-size:.82rem; color:var(--silver); margin-top:3px; }
.pl-cup-played .pl-wl { width:auto; margin-right:4px; }
.pl-cup-played.won .pl-wl { color:var(--win); }
.pl-cup-played.lost .pl-wl { color:var(--loss); }