/* LAN Stats: ontwerp "Overzicht v3" (handoff). Alleen systeemlettertypes, geen externe bronnen.
   Alle kleuren en maten komen uit de designtokens hieronder. */
:root {
  --bg: #0e1215; --strip: #12181d; --surface: #182027; --surface-2: #1f2a34; --plate: #0a0d10;
  --line: #26313b; --border: #34414d; --sigil-off: #222b33; --logo-off: #3a4753;
  --text: #e8edf1; --text-2: #c3ccd4; --muted: #9aa6b1; --loser: #8a96a1; --dim: #55616c;
  --accent: #e9a93a; --accent-light: #f0bf63; --accent-pale: #f6d58f; --accent-bg: #3d2e10;
  --head: Bahnschrift, 'DIN Alternate', 'Segoe UI', system-ui, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, sans-serif;
  --pad: clamp(16px, 4vw, 48px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--border) var(--bg); }
.scroll, .strip [role="tablist"] { scrollbar-color: var(--border) var(--strip); scrollbar-width: thin; }
body { margin: 0; color: var(--text); font-family: var(--body); background: var(--bg) radial-gradient(ellipse 90% 60% at 70% -10%, #1d2a35 0, transparent 70%) no-repeat; }
a { color: var(--accent-light); } a:hover { color: var(--accent-pale); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { font-variant-numeric: tabular-nums; min-height: 100vh; display: flex; flex-direction: column; }
#app { flex: 1; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); }
.state { padding: 40px var(--pad); color: var(--muted); }
.state b { display: block; font-size: 18px; color: var(--text); font-weight: 400; margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---- header / footer ---- */
.site { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 14px var(--pad); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); margin-right: auto;
  font-family: var(--head); font-weight: 700; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; }
.brand:hover { color: var(--text); }
.mark { display: flex; width: 26px; height: 6px; gap: 2px; }
.mark i { border-radius: 3px; } .mark i:first-child { width: 62%; background: var(--accent); } .mark i:last-child { flex: 1; background: var(--logo-off); }
.site nav { display: flex; gap: 4px; font-size: 15px; }
.site nav a { color: var(--muted); text-decoration: none; padding: 10px 12px; border-radius: 2px; }
.site nav a:hover { color: var(--text); background: var(--surface); }
.site nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.foot { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding: 20px var(--pad); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ---- koppen ---- */
.h1, .h2 { margin: 0; font-family: var(--head); font-weight: 700; text-transform: uppercase; }
.h1 { font-size: clamp(52px, 10vw, 112px); line-height: .92; letter-spacing: .02em; }
.h2 { letter-spacing: .06em; font-size: clamp(26px, 3.5vw, 34px); }
.intro { padding: clamp(32px, 6vw, 72px) var(--pad) 32px; }
main { padding: 0 var(--pad); }

/* ---- seizoenenstrip ---- */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--strip); }
.strip [role="tablist"] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad); }
.stab { flex: none; width: 176px; min-height: 104px; scroll-snap-align: start; text-align: left; display: flex; flex-direction: column; gap: 4px;
  padding: 16px 16px 14px; border: 0; border-right: 1px solid var(--line); font: inherit; cursor: pointer; color: var(--text); background: transparent; }
.stab:hover { background: var(--surface-2); }
.stab[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 0 -3px 0 var(--accent); }
.stab .per { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stab .nm { font-family: var(--head); font-weight: 700; font-size: 17px; line-height: 1.2; text-wrap: pretty; }
.stab .cnt { font-size: 13px; color: var(--muted); margin-top: auto; }

/* ---- uitslagen ---- */
.results { padding: clamp(32px, 5vw, 56px) 0 24px; }
.results .head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 20px; }
.results .head > div { margin-right: auto; }
.results h2 { font-size: clamp(28px, 4vw, 40px); }
.sub { font-size: 14px; color: var(--muted); margin-top: 2px; }
.search { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); width: min(300px, 100%); }
.search input { min-height: 44px; padding: 0 14px; border-radius: 2px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.list > li { border-bottom: 1px solid var(--bg); background: linear-gradient(90deg, rgba(29, 37, 45, .92), rgba(29, 37, 45, .55) 50%, rgba(29, 37, 45, .92)); }
.match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px 16px; align-items: center; padding: 14px 16px; text-decoration: none; color: var(--text); }
.match:hover { background: var(--surface); color: var(--text); }
.match.w1 { box-shadow: inset 3px 0 0 var(--accent); } .match.w2 { box-shadow: inset -3px 0 0 var(--accent); }
.side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.side.r { justify-content: flex-end; text-align: right; }
.tname { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.tname.win { font-weight: 600; } .tname.lose { color: var(--text-2); }
.mid { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 96px; }
.plate { font-family: var(--head); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -.02em; background: var(--plate); border: 1px solid var(--border);
  padding: 6px 12px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); white-space: nowrap; }
.plate .win { color: var(--accent); } .plate .lose { color: var(--loser); } .plate .dash { color: var(--dim); margin: 0 6px; }
.split { display: flex; width: 84px; height: 4px; gap: 2px; }
.split i { border-radius: 2px; background: var(--border); } .split i.win { background: var(--accent); } .split i:last-child { flex: 1; }
.meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 13px; color: var(--muted); }
.meta b { color: var(--text); font-weight: 400; } .meta .live { color: var(--accent); font-weight: 700; letter-spacing: .08em; }
.empty { padding: 40px 8px; text-align: center; color: var(--muted); }
.empty b { display: block; font-size: 18px; font-weight: 400; color: var(--text); margin-bottom: 6px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 12px; padding-top: 24px; }
.pager span { font-size: 15px; } .pager strong { font-weight: 700; }
.btn { min-height: 44px; padding: 0 18px; border-radius: 2px; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.btn:hover:not(:disabled) { background: var(--surface); } .btn:disabled { opacity: .45; cursor: default; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--accent-light); cursor: pointer; text-decoration: underline; }
.linkbtn:hover { color: var(--accent-pale); }

/* ---- ploegteken ---- */
.sg { display: grid; grid-template-columns: repeat(5, 5px); gap: 1.5px; flex: none; }
.sg i { aspect-ratio: 1; border-radius: 1px; background: var(--sigil-off); }
.sg.s { grid-template-columns: repeat(5, 4px); gap: 1px; }
.sg.w i.on { background: var(--accent); } .sg.l i.on { background: var(--dim); } .sg.n i.on { background: var(--text-2); }

/* ---- onderste blok ---- */
.bottom { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); padding: clamp(24px, 4vw, 40px) 0 56px; border-top: 1px solid var(--line); }
.bottom .players { flex: 3 1 480px; min-width: 0; }
.bottom .aside { flex: 2 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.sechead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .sechead .h2 { margin-right: auto; }
.aside .h2 { margin-bottom: 14px; } #h-stand { margin-bottom: 8px; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
caption { text-align: left; font-size: 13px; color: var(--muted); padding-bottom: 8px; }
thead tr { color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-align: left; background: var(--surface); }
th { font-weight: 500; }
thead th { padding: 8px; } thead th:first-child { padding-left: 0; } thead th:last-child { padding-right: 0; }
tbody tr { border-top: 1px solid var(--line); }
td, tbody th { padding: 12px 8px; text-align: left; } td:first-child { padding-left: 0; } td:last-child { padding-right: 0; }
.r { text-align: right; } td.r, th.r { text-align: right; }
.rank { font-family: var(--head); font-weight: 700; line-height: 1; width: 44px; }
.rank.r1 { font-size: 34px; color: var(--accent); } .rank.r2 { font-size: 28px; } .rank.r3 { font-size: 28px; } .rank.rn { font-size: 18px; color: var(--muted); }
.pname { color: var(--text); text-decoration: none; } .pname.top { font-size: 17px; font-weight: 700; }
.pteam { font-size: 13px; font-weight: 400; color: var(--muted); }
.rb { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 2px; font-weight: 700; background: var(--surface-2); color: var(--text); }
.rb i { font-style: normal; font-size: 10px; }
.rb.hi { background: var(--accent-bg); color: var(--accent-pale); } .rb.lo { color: var(--muted); }
.pool { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pool li { position: relative; overflow: hidden; padding: 14px; background: repeating-linear-gradient(135deg, #182027 0 10px, #1b2229 10px 20px); border: 1px solid var(--line);
  min-height: 96px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); display: flex; flex-direction: column; justify-content: space-between; }
.pool .bar { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--w); border-radius: 0 2px 2px 0; background: var(--accent); }
.pool .mn { font-family: var(--head); font-weight: 700; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; }
.pool .st { font-size: 13px; color: var(--muted); } .pool .st b { color: var(--text); }
.teamcell { display: flex; align-items: center; gap: 10px; } .teamcell span:last-child { overflow-wrap: anywhere; }
abbr { text-decoration: none; }
.pos { color: var(--accent-light); } .neg { color: var(--muted); }

/* ---- matchpagina (zelfde ontwerptaal) ---- */
.page { padding-top: 24px; padding-bottom: 56px; }
.back { display: inline-block; margin-bottom: 16px; font-size: 14px; }
.mhero { border: 1px solid var(--line); padding: 18px 16px; background: linear-gradient(90deg, rgba(29, 37, 45, .92), rgba(29, 37, 45, .55) 50%, rgba(29, 37, 45, .92)); }
.mhero .meta { justify-content: center; }
.mhero .vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px 16px; align-items: center; margin: 16px 0 4px; }
.mhero .sub { text-align: center; font-size: 13px; color: var(--muted); }
.mhero .plate { font-size: clamp(30px, 6vw, 44px); padding: 8px 16px; }
.mhero .tname { font-size: clamp(16px, 2.6vw, 24px); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.tabs a { text-decoration: none; }
button.tab { min-height: 44px; padding: 0 16px; border-radius: 2px; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
button.tab:hover { background: var(--surface); }
button.tab.on { background: var(--surface-2); box-shadow: inset 0 -3px 0 var(--accent); }
.panel { background: var(--surface); border: 1px solid var(--line); padding: 4px 16px 8px; }
.teamhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0 8px; }
.teamhead b { font-size: 17px; display: flex; align-items: center; gap: 12px; font-weight: 600; } .teamhead b.lose { color: var(--text-2); }
.sb th[scope="row"], .sb td:first-child { position: sticky; left: 0; background: var(--surface); padding-right: 12px; z-index: 1; white-space: nowrap; }
.sb thead th:first-child { background: var(--surface); position: sticky; left: 0; z-index: 1; }
.sb td, .sb th { white-space: nowrap; } .sb td.r, .sb th.r { padding-left: 12px; min-width: 76px; }
.sb th[scope="row"], .sb thead th:first-child { min-width: 150px; } .sb thead th { letter-spacing: .06em; }
.h3 { margin: 32px 0 12px; font-family: var(--head); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 22px; }
.hl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.hl div { background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.hl small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.hl b { font-size: 16px; } .hl span { color: var(--accent); margin-left: 8px; font-weight: 700; }
.note { color: var(--muted); font-size: 13px; margin-top: 14px; max-width: 70ch; }
@media (max-width: 560px) {
  .match { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 12px; gap: 8px; }
  .mid { min-width: 84px; } .plate { font-size: 22px; padding: 6px 8px; }
  .sg { grid-template-columns: repeat(5, 4px); gap: 1px; }
  .side { gap: 8px; } .tname { font-size: 15px; }
  .mhero .sg { display: none; }
}