/*
 * SFP site stylesheet: the parts every page shares.
 *
 * 1. TOKENS: colours, corner roundness, spacing and font. Change a token and every page follows.
 *    A team theme would be a second set of these values.
 * 2. Everything else here is used on more than one page: header, cards, badges, buttons.
 *
 * Page-specific rules live in league.css, cup.css and squad.css. Each is scoped to the page's
 * body class (p-league, p-cup, p-squad), so a rule for one page can never leak onto another.
 */

/* ------------------------------------------------------------------
   TOKENS
------------------------------------------------------------------- */
:root {
  --sky-top: #05055f;
  --sky-mid: #0a0a8a;
  --sky-bottom: #0e0e9c;
  --flood: rgba(84,120,255,.42);
  --pitch-line: rgba(255,255,255,.085);
  --card-fill: rgba(255,255,255,.085);
  --card-border: rgba(255,255,255,.2);
  --card-blur: 14px;
  --card-radius: 18px;
  --card-pad: 16px;
  --ink: #ffffff;
  --ink-soft: rgba(255,255,255,.84);
  --ink-faint: rgba(255,255,255,.62);
  --hair: rgba(255,255,255,.14);
  --accent: #f22cf7;
  --accent-2: #66e5f6;
  --up: #3ddc84;          /* moved up the table */
  --down: #ff5c6c;        /* moved down the table */
  --royal: #2424e6;
  --gold: #ffd54a;
  --gap: 12px;
  --page-pad: 12px;
  --font: "Saira Semi Condensed", "Arial Narrow", system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --grp-a: #ff7a6b;
  --grp-b: #57b4ff;
  --stick-bg: #0b0b92;
}
:root[data-theme="dark"] { --sky-top: #030340; --sky-mid: #06065e; --sky-bottom: #090972; --flood: rgba(70,100,235,.34); --stick-bg: #07076c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sky-top: #030340; --sky-mid: #06065e; --sky-bottom: #090972; --flood: rgba(70,100,235,.34); --stick-bg: #07076c; }
}
@media (min-width: 1000px) {
  :root { --page-pad: 28px; }
}

/* ------------------------------------------------------------------
   TOKENS
------------------------------------------------------------------- */
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 96px); scroll-behavior: smooth; }

/* ------------------------------------------------------------------
   SHELL
------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  background-color: var(--sky-mid);
  background-image: radial-gradient(120% 50% at 50% 0%, var(--flood), transparent 70%), linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 50%, var(--sky-bottom) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
.pitch { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.pitch * { fill: none; stroke: var(--pitch-line); stroke-width: .35; }
.pitch .dot { fill: var(--pitch-line); stroke: none; }
.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  max-width: 430px;
  margin: 0 auto;
  padding: 14px var(--page-pad) 36px;
}
.section { display: flex; flex-direction: column; gap: var(--gap); margin-top: 18px; }
.section > h2 { margin: 0 4px; font-size: 22px; font-weight: 600; letter-spacing: .01em; }

/* ------------------------------------------------------------------
   SITE HEADER
------------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: rgba(4,4,80,.74);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.site-head-inner { max-width: 430px; margin: 0 auto; }
.wordmark { display: flex; flex-direction: column; align-items: center; padding: 10px 0 4px; line-height: 1; text-decoration: none; color: var(--ink); }
.wordmark small { font-size: 9px; letter-spacing: .34em; font-weight: 500; }
.wordmark b { font-size: 21px; font-weight: 700; letter-spacing: .04em; margin-top: 2px; }
.wordmark span { font-size: 12px; font-weight: 600; letter-spacing: .14em; margin-top: 1px; }
.tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 22px), transparent 100%);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  flex: none;
  padding: 9px 12px 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
/* drop-down under a menu item (e.g. Players): hidden on phones, where the page shows a .subtabs strip instead */
.tab-group { display: flex; flex: none; position: relative; }
.tab-menu { display: none; }

/* little tab strip at the top of a group of pages (the Players pages); phones only */
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--gap); }
.subtabs a {
  flex: none;
  padding: 7px 12px;
  border: 1px solid var(--card-border);
  border-radius: 99px;
  background: var(--card-fill);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.subtabs a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.subtabs a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) { .subtabs a:not([aria-current]):hover { border-color: var(--ink-soft); color: var(--ink); } }

/* ------------------------------------------------------------------
   THE CARD
------------------------------------------------------------------- */
.card {
  background: var(--card-fill);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(1.15);
  backdrop-filter: blur(var(--card-blur)) saturate(1.15);
}

/* ------------------------------------------------------------------
   HERO — the leader
------------------------------------------------------------------- */
.hero { padding: 18px 16px 16px; border-color: rgba(120,140,255,.55); box-shadow: 0 0 0 1px rgba(60,80,255,.25), 0 10px 40px rgba(20,20,200,.35); }
.stat-bars div { display: grid; grid-template-columns: 1fr 86px; }
.stat-bars dt, .stat-bars dd { margin: 0; border: 1.5px solid var(--accent); padding: 7px 12px; }
.stat-bars dt { background: rgba(110,0,190,.38); font-size: 15px; font-weight: 500; border-right: 0; border-radius: 4px 0 0 4px; }
.stat-bars dd { background: var(--royal); text-align: center; font-size: 22px; font-weight: 600; line-height: 1.1; border-radius: 0 4px 4px 0; }
.pills { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pill {
  display: block;
  text-align: center;
  padding: 9px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid rgba(102,229,246,.7);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(102,229,246,.22), rgba(102,229,246,.06));
}

/* ------------------------------------------------------------------
   DATA PANEL
------------------------------------------------------------------- */
.data p { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
.data .src-name { font-weight: 600; color: var(--ink); word-break: break-word; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn, button.btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  border: 1.5px solid var(--accent);
  background: var(--royal);
  display: inline-block;
}
button.btn.ghost { background: transparent; border-color: var(--hair); color: var(--ink-soft); font-weight: 500; }
.btn input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.status.err { color: #ffb3c4; }

/* ------------------------------------------------------------------
   FOOTER
------------------------------------------------------------------- */
.site-foot { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--hair); }
.site-foot nav { display: flex; flex-direction: column; gap: 10px; }
.site-foot nav a { color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.site-foot p { margin: 22px 0 0; font-size: 12px; color: var(--ink-faint); }

/* ------------------------------------------------------------------
   CLUB BADGE PLACEHOLDER — swap for real crests via BADGE_IMG in the script
------------------------------------------------------------------- */
.badge { flex: none; width: 22px; height: 26px; display: inline-block; vertical-align: middle; overflow: visible; }
.badge.m { width: 20px; height: 24px; }
.badge.s { width: 16px; height: 19px; }
.badge.l { width: 40px; height: 47px; }
.badge.inl { margin-right: 6px; vertical-align: -7px; }
.badge.s.inl { margin-right: 4px; vertical-align: -4px; }
/* Badge pictures are square (600 x 600 with clear edges), so they get square boxes and are never squashed.
   The coloured shield placeholders above keep their portrait sizes. */
img.badge { width: 30px; height: 30px; object-fit: contain; }
img.badge.m { width: 28px; height: 28px; }
img.badge.s { width: 22px; height: 22px; }
img.badge.l { width: 56px; height: 56px; }

/* ------------------------------------------------------------------
   LAYOUT HELPERS
------------------------------------------------------------------- */
.pitch.h { display: none; }
@media (min-width: 640px) {
  .page { max-width: 720px; }
  .site-head-inner { max-width: 720px; }
}

/* ------------------------------------------------------------------
   DESKTOP
------------------------------------------------------------------- */
@media (min-width: 1000px) {
  html { scroll-padding-top: 90px; }
  .pitch.v { display: none; }
  .pitch.h { display: block; }
  .site-head-inner { max-width: 1180px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
  .wordmark { flex-direction: row; align-items: baseline; gap: 9px; padding: 16px 0; }
  .wordmark small, .wordmark b, .wordmark span { margin-top: 0 !important; }
  .wordmark b { font-size: 22px; }
  .tabs { overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .tabs a { padding: 24px 14px 21px; font-size: 16px; }
  @media (hover: hover) {
    .tabs a:hover { color: #fff; }
  }
  .subtabs { display: none; }
  .tab-group:hover .tab-menu, .tab-group:focus-within .tab-menu { display: flex; }
  .tab-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    min-width: 210px;
    padding: 8px;
    background: rgba(4,4,80,.97);
    border: 1px solid var(--hair);
    border-top: 2px solid var(--accent);
    border-radius: 0 0 14px 14px;
    z-index: 30;
  }
  .tabs .tab-menu a { padding: 10px 14px; border-bottom: 0; border-radius: 8px; font-size: 15px; white-space: nowrap; }
  .tabs .tab-menu a[aria-current="page"] { background: rgba(242,44,247,.22); color: #fff; }
  @media (hover: hover) {
    .tabs .tab-menu a:hover { background: rgba(255,255,255,.12); }
  }
  .section { margin-top: 0; }
  .section > h2 { font-size: 27px; }
  .section > .sub { font-size: 14px; }
  .site-foot nav { flex-direction: row; gap: 32px; }
  .hero-r .stat-bars { margin-top: 0; }
}
@media (min-width: 1500px) {
  .site-head-inner { max-width: 1320px; }
}

/* ------------------------------------------------------------------
   LINKS, NOTICES AND SMALL PHP-VERSION PIECES
------------------------------------------------------------------- */
.tlink { color: inherit; text-decoration: none; text-transform: uppercase; }
@media (hover: hover) { .tlink:hover { text-decoration: underline; text-underline-offset: 3px; } }
.tlink:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.updated { margin: 6px 4px 0; font-size: 12px; color: var(--ink-faint); line-height: 1.4; }
.notice { padding: 22px; }
.notice h1 { margin: 0 0 8px; font-size: 24px; }
.notice p { margin: 0 0 8px; color: var(--ink-soft); line-height: 1.45; }
.notice p:last-child { margin-bottom: 0; }
form.picker { margin: 0; }
.picker { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.picker label { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.picker select { flex: 1; max-width: 240px; font: inherit; font-size: 14px; font-weight: 600; color: #fff; background: rgba(0,0,40,.4); border: 1px solid var(--card-border); border-radius: 8px; padding: 7px 10px; }
.picker select option { color: #000; }
.picker select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.picker .btn { padding: 7px 12px; }