/* MoFutbol TV visual identity — stadium black, metallic silver and Pan-African accents. */
:root {
  --navy: #090b0b;
  --navy2: #111515;
  --panel: #161a19;
  --panel2: #1d2321;
  --border: #303835;
  --ink: #f3f4f1;
  --muted: #a1aba5;
  --gold: #e9bf27;
  --gold2: #d8ab1c;
  --green: #62be38;
  --red: #d6383c;
}
html { background: #080a09; }
body {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 95% 0%, rgba(32,81,37,.16) 0, transparent 28%),
    radial-gradient(ellipse at 7% 18%, rgba(255,255,255,.028) 0, transparent 34%),
    repeating-linear-gradient(135deg, transparent 0, transparent 145px, rgba(255,255,255,.008) 146px, transparent 147px),
    #090b0b;
}
.topline { height: 4px; background: linear-gradient(90deg, #238a35 0 33.3%, #ecc530 33.3% 66.6%, #d7353c 66.6%); }
.site-header {
  height: 82px;
  background: rgba(8,10,10,.96);
  border-bottom: 1px solid #343b37;
  box-shadow: 0 9px 24px #0006;
}
.brand { min-width: 225px; gap: 9px; }
.brand-logo { width: 67px; height: 67px; object-fit: contain; display: block; mix-blend-mode: screen; }
.brand-type strong { color: #e7ece6; letter-spacing: .15px; font-family: var(--display); font-size: 22px; }
.brand-type strong span { color: #5aba38; }
.brand-type small { font-size: 9px; color: #bac2ba; letter-spacing: 3.4px; margin-top: 5px; }
.nav-link { color: #b1bab4; }
.nav-link:hover, .nav-link.active { color: #f5f6f3; }
.nav-link.active:after { background: linear-gradient(90deg,#55b636 0 55%, #e8be29 55% 80%, #d7343b 80%); }
.header-right .data-badge { color: #b8e0aa; border-color: #365e34; background: #17221a; }
.data-badge span { background: #66ca42; }
.header-action, .small-button, .secondary-button { background: #1a201e; border-color: #4d5951; }
.header-action:hover, .small-button:hover, .secondary-button:hover { border-color: #68bc43; }
.header-action svg { color: #e9bf27; }
main { padding-bottom: 80px; }
.masthead {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(260px, 340px);
  gap: 0;
  align-items: stretch;
  min-height: 246px;
  padding: 0;
  margin: 24px 0 0;
  border: 1px solid #393e39;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg,#309844 0 45%,#e7bf22 45% 75%,#d5333c 75%) 1;
  background:
    radial-gradient(ellipse at 30% -90%, #49514c30, transparent 70%),
    repeating-linear-gradient(135deg, transparent 0 12px, #ffffff03 13px, transparent 14px),
    #111413;
  position: relative;
  overflow: hidden;
}
.masthead:before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 51% -22%, #d8e1d42c 0 2px, transparent 90px), radial-gradient(circle at 70% -8%, #ffffff30 0 1px, transparent 56px);
}
.masthead-copy { padding: 28px 34px 25px; position: relative; z-index: 1; }
.eyebrow { color: #e5eae5; font-size: 10px; letter-spacing: 2.5px; }
.eyebrow b { font-weight: 900; color: #68c63e; }
.eyebrow b:nth-of-type(2) { color: #e7c12b; }
.eyebrow-line { background: #62be38; width: 28px; }
.eyebrow-tail { color: #7e8b82; letter-spacing: 1.4px; }
h1 { margin: 20px 0 10px; font-size: clamp(43px,4.1vw,70px); color: #f2f3f0; text-shadow: 2px 3px 0 #0006; }
h1 em { color: #70c345; background: linear-gradient(103deg,#72c949 0 66%,#ebc12b 93%,#efca36 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.masthead p { max-width: 675px; color: #b6bfb6; font-size: 13px; line-height: 1.65; }
.hero-signature { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: #858f87; font-size: 9px; letter-spacing: 1.2px; font-weight: 750; }
.hero-signature strong { color: #e5e8e2; }
.hero-signature>span { height: 12px; width: 3px; background: #59b835; }
.hero-signature>i { height: 12px; width: 3px; background: #e9bd27; }
.masthead-visual {
  min-height: 243px;
  position: relative;
  background:
    linear-gradient(90deg,#0d1010 0%,transparent 26%),
    linear-gradient(0deg,#0d100f 0%,transparent 40%),
    url('./mofutbol-founder-portrait.png') center 29%/cover no-repeat;
  border-left: 1px solid #414743;
  display: flex;
  align-items: end;
}
.masthead-visual:before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 0 90%,#0b0e0b80),linear-gradient(0deg,#070907ae,transparent 50%); }
.masthead-visual:after { content:''; position:absolute; width:95px; height:4px; right:0; top:13px; transform:skewX(-22deg); background:linear-gradient(90deg,#38a943 0 35%,#e9bb26 35% 70%,#d63238 70%); }
.visual-caption { position:relative; z-index:1; padding:0 23px 20px; display:flex; flex-direction:column; gap:4px; text-shadow:0 2px 6px #000; }
.visual-caption span { font: 26px/.95 var(--display); color:#f3f4f1; }
.visual-caption strong { font-size:9px; letter-spacing:1.3px; color:#e9c22c; }
.filter-bar { display:flex; justify-content:space-between; align-items:center; gap:20px; border:1px solid #343d36; border-top:0; background:linear-gradient(100deg,#171d19,#131715); padding:13px 20px; margin-bottom:16px; }
.filter-bar-title { display:flex; flex-direction:column; white-space:nowrap; }
.filter-bar-title span { color:#5fc23c; font-size:9px; font-weight:900; letter-spacing:1.7px; }
.filter-bar-title strong { color:#e5e7e2; font-size:13px; letter-spacing:1.1px; }
.global-filters { gap:9px; }
.global-filters label, .compare-controls label { color:#9daea0; }
.global-filters select, .compare-controls select {
  border-color:#45534a;
  color:#f4f5f1;
  background-color:#212923;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2363c044' stroke-width='2'/%3E%3C/svg%3E");
}
.global-filters select:hover, .compare-controls select:hover { border-color:#69bc49; }
.notice { color:#aeb7ae; border-color:#313a33; background:#141915; margin-bottom:27px; border-left:3px solid #488e38; }
.notice strong { color:#e4e9e3; }
.notice-icon { color:#70c347; border-color:#5a8152; }
.notice button, .text-link { color:#77c64e; }
.section-kicker { color:#7acb4d; }
.section-heading h2 { color:#f4f5f1; }
.section-heading h2 small, .quiet-label { color:#9ba59d; }
.panel {
  background:linear-gradient(140deg,#1a1e1b 0%,#121615 72%);
  border-color:#343c35;
  box-shadow:0 10px 25px #0004;
}
.panel-heading h3 { color:#eef1ed; }
.panel-heading h3 em { color:#70c547; }
.panel-mini { color:#8d9c90; }
.team-feature { background:linear-gradient(130deg,#222723,#111512 80%); }
.team-feature:before { border-color:#ffffff05; }
.team-feature:after { background:linear-gradient(180deg,#5dbb3d,#ecc631 62%,#ca3038); }
.feature-name { color:#fafbf8; }
.team-meta { color:#aeb8af; }
.team-meta span { color:#78cb51; }
.club-crest { background:linear-gradient(135deg,#2da244 0 34%,#e9c02b 34% 68%,#c9363b 68%); }
.crest-inner { background:#151a17; border-color:#b7bbb3b0; }
.crest-inner small { color:#93d07a; }
.crest-inner i { background:var(--club-color,var(--gold)); }
.feature-divider { background:linear-gradient(90deg,#55b536,#efc62e,#b03537 80%,transparent); }
.headline-stat { border-color:#ffffff19; }
.headline-stat span,.headline-stat small { color:#9cafa0; }
.headline-stat strong.gold { color:#ebc530; }
.feature-tag { background:#244027; color:#bce9ad; }
.feature-bottom { color:#9baa9a; }
.scatter-wrap svg { background:#12181547; }
.chart-bottom { border-color:#343d36; color:#a9b8aa; }
.chart-bottom .hint { color:#87988b; }
.legend-dot.yellow { background:#efc82c; }
.legend-dot.pale { background:#659e72; }
.legend-dot.white { background:#eff4eb; }
.legend-dot.hollow { border-color:#87a28c; }
.metric-card { background:linear-gradient(150deg,#1d231d,#141915); border-color:#333e35; }
.metric-card:hover { border-color:#71bd4e; }
.metric-card:after { background:linear-gradient(90deg,var(--rank-color) var(--rank-progress),#ffffff17 var(--rank-progress)); }
.metric-label { color:#d8e0d8; }
.metric-rank strong { color:#f5f6f2; }
.metric-value { border-color:#ffffff14; color:#96a99b; }
.metric-value strong { color:#f4f5f1; }
.chart-desc, .shot-summary { color:#a6b2a7; }
.pill { color:#aebcaf; background:#202921; border-color:#435044; }
.pill.active { color:#0b160c; background:#6bc747; border-color:#6bc747; }
.form-chip.W, .form-mini .W { background:#69c44a; }
.form-chip.D, .form-mini .D { background:#bac5b6; }
.form-chip.L, .form-mini .L { background:#db5352; }
.form-caption, .eff-label { color:#a7b8a8; }
.form-block, .eff-track, .shot-filters { border-color:#344036; }
.eff-track { background:#303b31; }
.eff-track i { background:#e9bf2d; }
.eff-item:nth-child(2) i { background:#6cc64b; }
.eff-item:nth-child(3) i { background:#d34848; }
.shot-filter { color:#a8b6a9; }
.shot-filter.active { color:#eef8ec; background:#29422b; border-color:#4b7950; }
.small-table-wrap, .table-footer { border-color:#39413b; }
.data-table th { color:#86ae88; border-color:#3c463c; }
.data-table td { color:#c4cec3; border-color:#303a31; }
.data-table tbody tr:hover { background:#243228; }
.team-cell strong { color:#f0f3ee; }
.table-footer { color:#8d9e8f; }
.club-card,.player-card { background:linear-gradient(140deg,#202720,#131715); border-color:#354239; }
.club-card:hover { border-color:#6ac348; }
.club-card:before { border-color:#ffffff08; }
.club-card .club-icon { color:#eed03c; }
.club-card p,.club-card-bottom,.player-numbers span { color:#a9b8aa; }
.club-card-bottom b { color:#77c952; }
.players-intro p { color:#aab7aa; }
.players-stamp span { color:#6bc244; }
.player-card:before { background:linear-gradient(90deg,#64bd3d,#ebc334,#cb343d); right:67%; }
.player-role { color:#9dbca3; }
.table-hero p { color:#9caf9d; }
.compare-controls { background:linear-gradient(105deg,#1c251e,#131715); }
.compare-vs { color:#e8c22e; }
.comparison-bar { background:#313c32; }
.comparison-bar i { background:#6abe42; }
.comparison-bar.right i { background:#e0bb29; }
.swap-button { background:#68c447; color:#0c190e; }
.studio-icon,.primary-button { background:#65be42; border-color:#65be42; color:#10180f; }
.upload-zone,.code-fields { background:#101510; border-color:#4c654c; }
.upload-zone label small { color:#a3b6a1; }
.schema-panel p,.studio-card p { color:#afbaaf; }
.code-fields { color:#e5c447; }
.danger-button { background:#3c2526; border-color:#a34d4a; }
footer { border-color:#373f39; color:#98a498; align-items:center; }
.footer-brand { display:flex; align-items:center; gap:9px; }
.footer-brand img { mix-blend-mode:screen; object-fit:contain; }
.footer-brand>span { display:flex; flex-direction:column; gap:1px; }
.footer-brand strong { color:#f2f4ee; font:18px var(--display); }
.footer-brand strong span { color:#6bc347; }
.footer-brand small { font-size:7px; letter-spacing:1.2px; color:#b6a73a; }
footer a { color:#76ca50; }

/* Recolor axes, plots, and the field drawing while keeping the data and behavior intact. */
#scatterChart stop[stop-color="#173b59"] { stop-color:#17201a; }
#scatterChart stop[stop-color="#204967"] { stop-color:#29382b; }
#scatterChart path[stroke="#48647b"],#trendChart path[stroke="#42617a"] { stroke:#485a49; }
#scatterChart circle[fill="#7d9db8"] { fill:#5d9664; stroke:#91c093; }
#scatterChart path[stroke="#dceaf4"] { stroke:#e6dfbd; }
#scatterChart circle[fill="#f5c518"] { fill:#ebc530; }
#shotChart rect[fill="#0b2743"] { fill:#141915; }
#shotChart path[stroke="#52718a"] { stroke:#596f5b; }
#shotChart path[stroke="#406780"] { stroke:#4a6450; }
#shotChart circle[fill="#153752"] { fill:#24372a; }
#trendChart path[stroke="#e8f0f6"] { stroke:#dce6d6; }

@media (max-width: 1240px) {
  .brand { min-width:200px; }
  .brand-logo { width:56px; height:56px; }
  .masthead { grid-template-columns:minmax(0,1fr) 280px; }
  .masthead-copy { padding:25px 27px; }
  h1 { font-size:clamp(42px,4.5vw,62px); }
}
@media (max-width: 900px) {
  .site-header { height:auto; }
  .brand { min-width:0; }
  .brand-logo { width:53px; height:53px; }
  .masthead { grid-template-columns:minmax(0,1fr) 235px; }
  .masthead-copy { padding:25px 22px; }
  .masthead-visual { min-height:225px; }
  .eyebrow-tail { display:none; }
  .filter-bar { flex-wrap:wrap; }
  .filter-bar-title { flex:1; }
  .global-filters { width:100%; justify-content:flex-start; }
}
@media (max-width: 650px) {
  .masthead { display:block; min-height:0; margin-top:17px; }
  .masthead-copy { padding:24px 20px 29px; }
  .masthead h1 { font-size:clamp(38px,10.5vw,57px); margin-top:16px; }
  .masthead p { max-width:90%; }
  .hero-signature { font-size:8px; flex-wrap:wrap; }
  .masthead-visual { position:absolute; inset:0 0 0 42%; opacity:.17; border:0; pointer-events:none; min-height:0; }
  .masthead-visual:before { background:linear-gradient(90deg,#111413,transparent 65%); }
  .visual-caption { display:none; }
  .filter-bar { padding:13px; gap:11px; }
  .filter-bar-title { width:100%; }
  .global-filters { display:grid; grid-template-columns:1fr 1fr; }
  .notice { margin-bottom:23px; }
  .brand-type strong { font-size:19px; }
  .brand-type small { font-size:8px; }
  .footer-brand { width:100%; }
}
@media print {
  body { background:#fff; }
  .panel,.metric-card { background:#f4f6f3; }
  .masthead-visual { display:none; }
}
body.data-pending section.view:not(#view-matchfeed){display:none!important}
.data-unavailable{color:#aeb9bb;font-size:14px;padding:20px}
.notice a{color:#e9c444;text-decoration:underline;text-underline-offset:3px}
.feed-control{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px;margin-bottom:15px}
.feed-control h3{font:26px var(--display);color:#fff;margin-bottom:6px}
.feed-control p,.feed-note p{color:#aab6ab;font-size:12px;line-height:1.6;max-width:650px}
.feed-control label{color:#85ba7a;font-size:10px;font-weight:900;letter-spacing:1px;display:flex;flex-direction:column;gap:8px;min-width:230px}
.feed-control select{background:#16231a;color:#edf3e9;border:1px solid #486a43;padding:12px 13px;min-width:230px;font-size:12px}
.feed-status{padding:18px 20px;color:#bdd1b8;background:#141b16;border:1px solid #344435;font-size:13px;margin-bottom:17px;line-height:1.6}
.feed-status strong{color:#f3f5ee}.feed-status code,.schema-panel code{color:#efd061}
.feed-status button{margin-left:10px}
.feed-note{padding:28px}.feed-note strong{color:#91cf72}.feed-note .small-button{margin-top:16px}
.feed-table{padding:20px;margin-bottom:16px}
.feed-table .data-table{min-width:820px}
.feed-match-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feed-match-grid .panel{padding:21px}
.feed-match{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid #354236;padding:12px 0;color:#dfe9db;font-size:12px}
.feed-match>div{display:flex;flex-direction:column;gap:3px;min-width:0}.feed-match strong{white-space:normal}
.feed-match time{color:#8bbd79;font-size:10px;font-weight:800}.feed-match span{font-size:10px;color:#7e897c}
.feed-match>b{font:18px var(--display);white-space:nowrap;color:#e7d477}
.feed-empty{padding:18px 0;color:#a6b4a5;font-size:12px}
.schema-panel a{color:#7cc05b;text-decoration:underline}
@media(max-width:800px){.feed-control{align-items:stretch;flex-direction:column}.feed-match-grid{grid-template-columns:1fr}}