/* Same tokens as the app. One product, whether you are a fan or a secretary. */
:root{
  --ink:#0B0F0D; --ink-raised:#131816; --ink-sunken:#050807;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16);
  --chalk:#F7F9F8; --mist:#939C97; --mist-dim:#626B66;
  --green:#157F4C; --green-bright:#34C77B; --green-soft:rgba(52,199,123,.13);
  --amber:#E0A32E; --clay:#D2503A;
  --f-display:'Archivo',system-ui,sans-serif;
  --f-body:'Instrument Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:40px;
  --r-sm:6px;--r-md:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--chalk);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:900px;margin:0 auto;padding:0 var(--s4)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);position:fixed;background:var(--green);color:#fff;padding:10px 14px;border-radius:var(--r-sm);z-index:10}

.site-head{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,15,13,.94);backdrop-filter:blur(12px);z-index:5}
.site-head__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:60px;flex-wrap:wrap}
.brand{font-family:var(--f-display);font-weight:800;font-size:17px;text-decoration:none}
.nav{display:flex;gap:var(--s4);overflow-x:auto}
.nav a{font-size:14px;font-weight:600;color:var(--mist);text-decoration:none;padding:6px 0;white-space:nowrap}
.nav a:hover,.nav a:focus{color:var(--green-bright)}

.page-head{padding:var(--s6) 0 var(--s4)}
.page-head h1{font-family:var(--f-display);font-weight:800;font-size:30px;margin:0 0 var(--s2)}
.page-head--club{display:flex;align-items:center;gap:var(--s4)}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist-dim);margin:0 0 var(--s2)}
h2{font-family:var(--f-display);font-weight:700;font-size:19px;margin:var(--s6) 0 var(--s3)}
.empty{color:var(--mist)}

.live-note{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--green-bright);margin:0}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.table th,.table td{padding:12px 8px;text-align:left;border-bottom:1px solid var(--line)}
.table thead th{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist-dim);font-weight:600}
.table abbr{text-decoration:none;border:0}
.num{text-align:right;width:1%;white-space:nowrap}
.strong{font-weight:700;color:var(--chalk)}
.club{display:flex;align-items:center;gap:10px;font-weight:500}
.club__name{overflow:hidden;text-overflow:ellipsis}
.adjust{font-family:var(--f-mono);font-size:11px;color:var(--clay)}
.crest{width:26px;height:26px;border-radius:var(--r-sm);flex:none;object-fit:contain;background:var(--ink-raised)}
.crest--letters{display:grid;place-items:center;background:var(--green);color:#fff;font-family:var(--f-display);font-weight:800;font-size:10px}
.page-head--club .crest{width:56px;height:56px;font-size:16px}

.day__head{font-size:13px;font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mist-dim);margin:var(--s5) 0 var(--s2)}
.matches{list-style:none;margin:0;padding:0}
.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s3);
  padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--ink-raised);margin-bottom:var(--s2)}
.match--live{border-color:rgba(52,199,123,.35)}
.match__side{font-weight:500;font-size:15px}
.match__side--away{text-align:right}
.match__meta{font-family:var(--f-mono);font-size:13px;color:var(--mist)}
.match__venue{grid-column:1/-1;font-size:12px;color:var(--mist-dim)}
.score{font-family:var(--f-display);font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}

.squad{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.player{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s3);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-raised)}
.player__no{font-family:var(--f-display);font-weight:800;width:28px;text-align:center;color:var(--mist)}
.player__name{flex:1}
.player__pos{font-family:var(--f-mono);font-size:11px;color:var(--mist-dim)}

.club-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.club-list a{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-raised);text-decoration:none}

.btn{display:inline-block;background:var(--green);color:#fff;padding:12px 18px;border-radius:var(--r-sm);text-decoration:none;font-weight:600}

.site-foot{border-top:1px solid var(--line);margin-top:var(--s6);padding:var(--s5) 0;color:var(--mist-dim);font-size:13px}
.site-foot a{color:var(--mist)}

.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:560px){
  .hide-s{display:none}
  .page-head h1{font-size:24px}
  .match{font-size:14px}
}

/* Match detail */
.scoreline{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s4);margin:var(--s4) 0}
.scoreline__club{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600}
.scoreline__club--away{flex-direction:row-reverse;text-align:right}
.scoreline__score{font-family:var(--f-display);font-weight:800;font-size:34px;font-variant-numeric:tabular-nums}
.note{font-size:13px;color:var(--mist);margin:0}
.note--warn{color:var(--amber)}
.match{position:relative}
.match__link{position:absolute;inset:0}
.match__link:focus-visible{outline:2px solid var(--green-bright);outline-offset:2px;border-radius:var(--r-md)}

.timeline{list-style:none;margin:0;padding:0}
.timeline__row{display:grid;grid-template-columns:52px 1fr;gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--line)}
.timeline__row--away{grid-template-columns:52px 1fr;text-align:right}
.timeline__row--away .timeline__what{justify-items:end}
.timeline__minute{font-family:var(--f-mono);font-size:13px;color:var(--mist-dim)}
.timeline__what{display:grid;gap:2px}
.timeline__type{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist-dim)}
.timeline__who{font-weight:500}
.timeline__second{font-size:12px;color:var(--mist)}
.pens{font-family:var(--f-mono);font-size:11px;color:var(--mist-dim);margin-left:6px}

/* A dark crest on a light plate. Padding rather than a background alone —
   a badge flush to the edge of a white square reads as a mistake. */
.crest--plate{background:#F7F9F8;padding:3px;border-radius:var(--r-sm)}
.page-head--club .crest--plate{padding:6px}

/* Player profile */
.portrait{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--ink-raised);flex:none}
.stats{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.stats li{background:var(--ink-raised);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s3);display:grid;gap:2px}
.stats__n{font-family:var(--f-display);font-weight:800;font-size:24px;font-variant-numeric:tabular-nums}
.stats__l{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mist-dim)}
.cards{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;color:var(--mist)}
.card{display:inline-block;width:11px;height:15px;border-radius:2px}
.card--y{background:var(--amber)}
.card--r{background:var(--clay);margin-left:var(--s3)}

/* ============================================================
   Front page
   ============================================================ */

.hero{position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(52,199,123,.20), transparent 60%),
    radial-gradient(90% 70% at 5% 0%, rgba(21,127,76,.28), transparent 55%),
    var(--ink-sunken);
  border-bottom:1px solid var(--line)}
/* The floodlight: a competition site should feel like an evening kickoff. */
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(11,15,13,.85) 100%)}
.hero__inner{position:relative;z-index:1;padding:56px 16px 44px}
.hero__eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green-bright);margin:0 0 10px}
.hero__title{font-family:var(--f-display);font-weight:800;font-size:clamp(30px,7vw,52px);
  line-height:1.02;letter-spacing:-.02em;margin:0}
.hero__live{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;
  font-size:13px;font-weight:600;color:var(--green-bright)}
.dot--pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.hero__actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.btn--on-hero{background:var(--green-bright);color:#04140C}
.btn--ghost{background:transparent;color:var(--chalk);border:1px solid var(--line-strong)}

.block{padding:34px 0 4px}
.block__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:var(--s3)}
.block__head h2{margin:0;font-size:18px}
.more{font-size:13px;font-weight:600;color:var(--green-bright);text-decoration:none;white-space:nowrap}
.more:hover{text-decoration:underline}

/* Results rail — swipeable on a phone, the way a scores app behaves. */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(196px,1fr);
  gap:var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.card-match{scroll-snap-align:start;display:grid;gap:6px;text-decoration:none;
  background:var(--ink-raised);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s3);transition:border-color .15s ease,transform .15s ease}
.card-match:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.card-match--live{border-color:rgba(52,199,123,.4)}
.card-match__when{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist-dim)}
.card-match--live .card-match__when{color:var(--green-bright)}
.card-match__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-match__club{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-match__goals{font-family:var(--f-display);font-weight:800;font-size:16px;
  font-variant-numeric:tabular-nums}

.table--compact th,.table--compact td{padding:10px 8px}

.scorers{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.scorer{display:flex;align-items:center;gap:var(--s3);padding:12px var(--s3);
  background:var(--ink-raised);border:1px solid var(--line);border-radius:var(--r-md)}
.scorer__rank{font-family:var(--f-display);font-weight:800;font-size:15px;color:var(--mist-dim);
  width:20px;text-align:center;flex:none}
.scorer__body{display:grid;gap:2px;flex:1;min-width:0}
.scorer__name{font-weight:600;text-decoration:none}
.scorer__name:hover{text-decoration:underline}
.scorer__club{font-size:12px;color:var(--mist-dim)}
.scorer__goals{font-family:var(--f-display);font-weight:800;font-size:20px;
  color:var(--green-bright);font-variant-numeric:tabular-nums}

/* ============================================================
   Navigation — top bar on a wide screen, tab bar on a phone
   ============================================================ */

.nav--top a[aria-current='page']{color:var(--green-bright)}

.tabbar{display:none}

@media (max-width:720px){
  .nav--top{display:none}

  .tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:20;
    background:rgba(11,15,13,.96);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
    /* Clears the home indicator on a modern phone. */
    padding-bottom:env(safe-area-inset-bottom)}
  .tabbar__item{display:grid;justify-items:center;gap:3px;padding:9px 4px 7px;
    text-decoration:none;color:var(--mist-dim);
    /* A comfortable thumb target, not a 12px link. */
    min-height:52px}
  .tabbar__icon{font-size:17px;line-height:1}
  .tabbar__label{font-size:10px;font-weight:600;letter-spacing:.02em}
  .tabbar__item[aria-current='page']{color:var(--green-bright)}

  /* Nothing should sit underneath the bar. */
  body{padding-bottom:64px}
  .site-foot{margin-bottom:8px}
  .hero__inner{padding:40px 16px 34px}
}

@media (min-width:721px){
  .site-head{position:sticky}
}