*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:      #0d1f14;
  --bg2:     #162b1e;
  --bg3:     #1e3a2a;
  --border:  #2d6a4f;
  --accent:  #4caf50;
  --gold:    #ffd700;
  --text:    #ddeedd;
  --muted:   #8aab8a;
  --red:     #e06060;
  --link:    #6fcf7f;
}
body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--bg); color: var(--text);
       font-size: 15px; line-height: 1.5; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--accent); }
nav { background: #0a1a10; border-bottom: 2px solid var(--border); padding: 0 1.5rem;
      display: flex; align-items: center; gap: 0; position: sticky; top: 0; z-index: 100; }
.nav-brand { font-weight: 700; font-size: 1rem; color: var(--gold); padding: 0.7rem 1rem 0.7rem 0;
             border-right: 1px solid var(--border); margin-right: 0.5rem; white-space: nowrap; }
nav a { color: var(--muted); padding: 0.7rem 0.75rem; display: inline-block; font-size: 0.88rem; }
nav a:hover, nav a.active { color: var(--text); text-decoration: none; background: var(--bg3); }
header { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 1.5rem 2rem 1.2rem; }
header h1 { font-size: 1.8rem; color: var(--gold); }
header .sub { color: var(--muted); font-size: 0.9rem; margin-top: 0.3rem; }
.breadcrumb { font-size: 0.82rem; color: var(--muted); margin-top: 0.5rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--link); }
main { max-width: 1200px; margin: 0 auto; padding: 1.5rem 2rem 3rem; }
h2 { font-size: 1.3rem; color: var(--accent); margin: 1.5rem 0 0.7rem; border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; }
h3 { font-size: 1.05rem; color: var(--gold); margin: 1.2rem 0 0.5rem; }
p  { margin: 0.5rem 0; color: var(--text); }
.muted { color: var(--muted); }
.section { margin-bottom: 2rem; }
/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin: 1rem 0; }
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
        padding: 1rem; transition: border-color 0.2s; }
.card:hover { border-color: var(--accent); }
.card h3 { margin-top: 0; font-size: 0.95rem; }
.card .stat { font-size: 1.4rem; font-weight: 700; color: var(--gold); }
.card .label { font-size: 0.8rem; color: var(--muted); }
/* Tables */
table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.5rem; font-size: 0.88rem; }
thead th { background: var(--bg3); color: var(--gold); text-align: left;
           padding: 0.5rem 0.7rem; font-weight: 600; border-bottom: 2px solid var(--border); }
tbody tr:nth-child(even) { background: var(--bg2); }
tbody tr:hover { background: #1f3d2a; }
td { padding: 0.4rem 0.7rem; border-bottom: 1px solid #1a3020; vertical-align: middle; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
/* Rating badges */
.rat-gold  { background: #5a4a00; color: var(--gold); border-radius: 4px; padding: 1px 6px; font-weight: 700; }
.rat-green { background: #1a4a1a; color: #7fff7f; border-radius: 4px; padding: 1px 6px; font-weight: 700; }
.rat-mid   { background: #2a3a1a; color: #afc; border-radius: 4px; padding: 1px 6px; }
.rat-low   { background: #1a1a1a; color: var(--muted); border-radius: 4px; padding: 1px 6px; }
/* Bars */
.bar-wrap { display: flex; align-items: center; gap: 6px; }
.bar-wrap span { font-size: 0.8rem; color: var(--muted); min-width: 2ch; }
.bar { height: 8px; border-radius: 4px; min-width: 2px; }
.bar-gold  { background: var(--gold); }
.bar-green { background: var(--accent); }
.bar-mid   { background: #7aaa7a; }
.bar-low   { background: #4a6a4a; }
/* Skill grid */
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
              gap: 0.4rem 1rem; margin: 0.5rem 0; }
.skill-row  { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; }
.skill-row .sk-label { width: 80px; color: var(--muted); flex-shrink: 0; }
/* Position badge */
.pos { display: inline-block; background: var(--bg3); border: 1px solid var(--border);
       border-radius: 3px; padding: 0 5px; font-size: 0.78rem; color: var(--gold);
       font-weight: 600; min-width: 2.5rem; text-align: center; }
/* Details/summary */
details { margin: 0.3rem 0; }
details summary { cursor: pointer; color: var(--muted); font-size: 0.82rem; user-select: none; }
details summary:hover { color: var(--link); }
details[open] summary { color: var(--accent); margin-bottom: 0.5rem; }
/* Stat highlights */
.highlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin: 1rem 0; }
.hl { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 0.8rem 1rem; }
.hl .hl-val { font-size: 1.6rem; font-weight: 700; color: var(--gold); }
.hl .hl-lbl { font-size: 0.78rem; color: var(--muted); }
.hl .hl-sub { font-size: 0.85rem; color: var(--link); }
/* Trivia box */
.trivia { background: #0f2820; border-left: 3px solid var(--gold); padding: 0.8rem 1rem;
          margin: 1rem 0; border-radius: 0 6px 6px 0; font-size: 0.9rem; color: var(--text); }
.trivia strong { color: var(--gold); }
/* Nationality flag-ish */
.nat { font-size: 0.82rem; color: var(--muted); }
footer { border-top: 1px solid var(--border); padding: 1rem 2rem; text-align: center;
         color: var(--muted); font-size: 0.8rem; margin-top: 2rem; }
/* Search (static filter) */
.filter-bar { display: flex; gap: 0.5rem; margin: 0.5rem 0 1rem; flex-wrap: wrap; }
.filter-bar input { background: var(--bg2); border: 1px solid var(--border); color: var(--text);
                    padding: 0.4rem 0.7rem; border-radius: 4px; font-size: 0.88rem; width: 240px; }
.filter-bar input::placeholder { color: var(--muted); }
/* Sortable headers */
thead th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
thead th[data-sort]:hover { color: var(--accent); }
thead th[data-sort]::after { content: ' ⇅'; opacity: 0.4; font-size: 0.75em; }
thead th[data-sort].sort-asc::after  { content: ' ▲'; opacity: 1; }
thead th[data-sort].sort-desc::after { content: ' ▼'; opacity: 1; }
/* Pitch / formation */
.pitch { background: linear-gradient(to bottom, #1a5c2a 0%, #236b33 40%, #1e6330 60%, #1a5c2a 100%);
         border: 2px solid #2d8a45; border-radius: 8px; padding: 1.2rem 0.5rem;
         margin: 0.5rem 0 1.5rem; position: relative; overflow: hidden; }
.pitch::before { content: ''; position: absolute; top: 50%; left: 0; right: 0;
                 height: 1px; background: rgba(255,255,255,0.15); }
.pitch::after  { content: ''; position: absolute; left: 50%; top: 50%;
                 transform: translate(-50%,-50%);
                 width: 80px; height: 80px; border-radius: 50%;
                 border: 1px solid rgba(255,255,255,0.15); }
.formation-row { display: flex; justify-content: space-around; align-items: flex-start;
                 margin: 0.6rem 0; position: relative; z-index: 1; }
.p-bubble { text-align: center; width: 90px; }
.p-circle { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 4px;
            border: 2px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0.45);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.72rem; font-weight: 700; color: #fff; }
.p-circle.gk-circle { border-color: var(--gold); color: var(--gold); }
.p-name { font-size: 0.72rem; color: #fff; line-height: 1.2; word-break: break-word; }
.p-name a { color: #cfc; text-decoration: none; }
.p-name a:hover { text-decoration: underline; }
.p-avg  { font-size: 0.68rem; color: rgba(255,255,255,0.65); }
/* Alphabet nav */
.alpha { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0 1rem; }
.alpha a { background: var(--bg2); border: 1px solid var(--border); border-radius: 3px;
           padding: 0.15rem 0.4rem; font-size: 0.8rem; color: var(--muted); }
.alpha a:hover { color: var(--link); border-color: var(--accent); text-decoration: none; }
@media (max-width: 700px) {
  main { padding: 1rem; }
  header { padding: 1rem; }
  .highlights { grid-template-columns: repeat(2, 1fr); }
  nav { flex-wrap: wrap; }
}