/* WDL.ONL – Hauptstyle */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg:         #ffffff;
  --bg-2:       #f7f7f7;
  --bg-3:       #eeeeee;
  --accent:     #e6c892;
  --accent-dim: #fdf5e4;
  --accent-dk:  #b08730;
  --text:       #111111;
  --text-2:     #555555;
  --text-3:     #999999;
  --border:     #e2e2e2;
  --border-2:   #cccccc;
  --win:        #1a7535;
  --loss:       #b52020;
  --draw:       #6b6b6b;
  --sw:         230px;
  --th:         52px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0d0d0d; --bg-2:#181818; --bg-3:#242424;
    --accent:#e6c892; --accent-dim:#201908; --accent-dk:#d4aa60;
    --text:#f0f0f0; --text-2:#aaaaaa; --text-3:#666666;
    --border:#2a2a2a; --border-2:#3a3a3a;
    --win:#3db554; --loss:#d44545; --draw:#888888;
  }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family:'IBM Plex Sans',system-ui,sans-serif; background:var(--bg); color:var(--text); font-size:13px; line-height:1.5; }
a { color:var(--accent-dk); text-decoration:none; }
a:hover { text-decoration:none; }

/* TOPBAR */
/* App-Install-Banner */
.app-banner { display:none; position:fixed; top:0; left:0; right:0; z-index:300;
  background:var(--text); color:var(--bg); padding:10px 14px; gap:10px;
  align-items:center; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.app-banner.visible { display:flex; }
.app-banner-icon { width:36px; height:36px; border-radius:8px; background:var(--accent);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.app-banner-icon svg { width:20px; height:20px; }
.app-banner-text { flex:1; min-width:0; }
.app-banner-text strong { display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-banner-text span { font-size:11px; opacity:.65; }
.app-banner-btn { flex-shrink:0; background:var(--accent); color:#111; font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:6px; text-decoration:none; letter-spacing:.04em; white-space:nowrap; }
.app-banner-close { flex-shrink:0; background:none; border:none; color:inherit; opacity:.5;
  cursor:pointer; padding:4px; line-height:1; font-size:18px; }
.app-banner-close:hover { opacity:1; }
body.has-banner { --banner-h: 57px; }
body.has-banner .topbar { top:var(--banner-h); }
body.has-banner .layout  { padding-top:calc(var(--th) + var(--banner-h)); }
.nav-app { color:var(--accent) !important; }
.nav-app .n-badge { background:var(--accent); color:#111 !important; }

.topbar { position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; height:var(--th); background:var(--bg); border-bottom:1px solid var(--border); display:flex; align-items:center; z-index:200; }
.t-brand { width:var(--sw); flex-shrink:0; display:flex; align-items:center; gap:10px; padding:0 20px; border-right:1px solid var(--border); height:100%; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14px; text-decoration:none; color:var(--text); }
.logo { width:30px; height:30px; background:var(--accent); color:#111; font-size:10px; font-weight:700; font-family:'IBM Plex Mono',monospace; display:flex; align-items:center; justify-content:center; letter-spacing:.04em; flex-shrink:0; }
.t-meta { flex:1; display:flex; align-items:center; gap:12px; padding:0 18px; overflow:hidden; min-width:0; }
.t-name { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.chip { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.07em; padding:2px 7px; border:1px solid var(--border-2); background:var(--bg-2); color:var(--text-3); white-space:nowrap; flex-shrink:0; text-transform:uppercase; }
.chip.live { border-color:var(--win); background:transparent; color:var(--win); display:flex; align-items:center; gap:4px; }
.live-dot { width:5px; height:5px; border-radius:50%; background:var(--win); animation:pulse 2s infinite; flex-shrink:0; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.t-right { margin-left:auto; padding:0 16px; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-3); white-space:nowrap; flex-shrink:0; }

/* SIDEBAR */
.sidebar { position:fixed; top:var(--th); left:0; bottom:0; width:var(--sw); background:var(--bg); border-right:1px solid var(--border); overflow-y:auto; padding:20px 0; display:flex; flex-direction:column; z-index:100; }
.s-sec { margin-bottom:24px; }
.s-label { font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3); padding:0 18px 7px; display:block; }
.nav-item { display:flex; align-items:center; gap:9px; padding:7px 18px; font-size:13px; font-weight:500; color:var(--text-2); border-left:2px solid transparent; transition:background .1s,color .1s; text-decoration:none; }
.nav-item:hover { background:var(--bg-2); color:var(--text); text-decoration:none; }
.nav-item.active { color:var(--text); border-left-color:var(--accent); background:var(--accent-dim); }
.n-ico { width:14px; height:14px; opacity:.6; flex-shrink:0; }
.nav-item.active .n-ico { opacity:1; }
.n-badge { margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:9px; padding:1px 5px; background:var(--bg-3); color:var(--text-3); border-radius:2px; }
.s-footer { margin-top:auto; padding:14px 18px 0; border-top:1px solid var(--border); font-size:10px; color:var(--text-3); font-family:'IBM Plex Mono',monospace; line-height:1.7; }

/* LAYOUT */
.layout { display:flex; padding-top:var(--th); }
.main { margin-left:var(--sw); flex:1; padding:26px 26px 40px; min-width:0; }

/* PAGE HEADER */
.page-head { display:flex; align-items:baseline; gap:12px; margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.page-title { font-family:'IBM Plex Mono',monospace; font-size:17px; font-weight:600; color:var(--text); margin:0; letter-spacing:-.02em; }
.page-sub { font-size:11px; color:var(--text-3); }

/* KPI GRID */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); margin-bottom:24px; }
.kpi { background:var(--bg); padding:15px 18px; }
.kpi-l { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); margin-bottom:4px; }
.kpi-v { font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:600; color:var(--text); line-height:1; font-variant-numeric:tabular-nums; }
.kpi-v.gold { color:var(--accent-dk); }
.kpi-s { font-size:10px; color:var(--text-3); margin-top:3px; }

/* BLOCK */
.block { border:1px solid var(--border); margin-bottom:24px; }
.block-head { padding:9px 14px; border-bottom:1px solid var(--border); background:var(--bg-2); font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.block-body { padding:14px 16px; }

/* TABLE */
.tw { overflow-x:auto; }
.dt { width:100%; border-collapse:collapse; font-size:12px; }
.dt thead th { font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--text-3); background:var(--bg-2); padding:8px 11px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.dt thead th.r { text-align:right; }
.dt tbody tr { border-bottom:1px solid var(--border); transition:background .07s; }
.dt tbody tr:last-child { border-bottom:0; }
.dt tbody tr:hover { background:var(--bg-2); }
.dt tbody tr.clickable { cursor:pointer; }
.dt td { padding:8px 11px; vertical-align:middle; }
.dt td.r { font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; text-align:right; color:var(--text-2); }
.dt td.r.b { font-weight:600; color:var(--text); }
/* No underline on table & card links */
.dt td a, .dt td a:hover,
.hrow a, .hrow a:hover,
.player-card, .player-card:hover,
.block-head a, .block-head a:hover,
.profile-meta a, .profile-meta a:hover,
.kpi-s a, .kpi-s a:hover { text-decoration:none; }
.dt td a:hover { color:var(--accent-dk); }
.t-name-c a, .t-name-c a:hover { color:var(--text); text-decoration:none; }

/* POS */
.pos { font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; color:var(--text-3); font-variant-numeric:tabular-nums; display:inline-block; width:22px; }
.pos.p1 { color:var(--accent-dk); }

/* TEAM CELLS */
.t-name-c { font-weight:600; font-size:12px; }
.t-venue { font-size:10px; color:var(--text-3); }
.div-tag { font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700; color:var(--accent-dk); background:var(--accent-dim); padding:2px 6px; white-space:nowrap; }

/* WIN BAR */
.win-bc { display:flex; align-items:center; gap:5px; min-width:72px; }
.bar-t { flex:1; height:3px; background:var(--bg-3); }
.bar-f { height:100%; background:var(--accent); }
.bar-v { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-3); width:36px; text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums; }

/* DIVISION TABS */
.div-tabs { display:flex; gap:1px; background:var(--border); border:1px solid var(--border); overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:0; }
.div-tab { flex-shrink:0; padding:7px 13px; font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; letter-spacing:.07em; color:var(--text-3); background:var(--bg-2); white-space:nowrap; text-decoration:none; display:block; border-bottom:2px solid transparent; }
.div-tab:hover { background:var(--bg-3); color:var(--text-2); text-decoration:none; }
.div-tab.active { background:var(--accent); color:#111; border-bottom-color:transparent; }

/* SEASON SELECTOR */
.season-sel { display:flex; gap:1px; background:var(--border); border:1px solid var(--border); flex-shrink:0; }
.s-btn { padding:3px 10px; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:600; letter-spacing:.06em; background:var(--bg-2); color:var(--text-3); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; }
.s-btn:hover { background:var(--bg-3); color:var(--text-2); text-decoration:none; }
.s-btn.active { background:var(--accent); color:#111; }

/* H-BARS */
.hbars { display:flex; flex-direction:column; gap:7px; }
.hrow { display:grid; grid-template-columns:150px 1fr 52px; align-items:center; gap:8px; }
.hlabel { font-size:11px; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.htrack { height:15px; background:var(--bg-3); position:relative; }
.hbar { position:absolute; left:0; top:0; bottom:0; background:var(--accent); }
.hval { font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; color:var(--text-2); text-align:right; font-variant-numeric:tabular-nums; }

/* TWO-COL */
.two { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }

/* PLAYER CARDS */
.player-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1px; background:var(--border); }
.player-card { background:var(--bg); padding:10px 14px; display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; transition:background .08s; }
.player-card:hover { background:var(--bg-2); }
.p-avatar { width:32px; height:32px; border:1px solid var(--border); background:var(--bg-2); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; color:var(--text-3); flex-shrink:0; }
.p-name { font-size:12px; font-weight:600; color:var(--text); }
.p-nick { font-size:10px; color:var(--text-3); }
.cap-tag { font-family:'IBM Plex Mono',monospace; font-size:8px; background:var(--accent); color:#111; padding:1px 4px; font-weight:700; margin-left:4px; }

/* DELTA */
.delta { font-family:'IBM Plex Mono',monospace; font-size:10px; padding:1px 6px; border-radius:2px; font-variant-numeric:tabular-nums; }
.delta.up { background:rgba(26,117,53,.12); color:var(--win); }
.delta.dn { background:rgba(181,32,32,.12); color:var(--loss); }
.delta.eq { background:var(--bg-3); color:var(--text-3); }

/* SEARCH / FILTER BAR */
.filter-bar { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.f-input { flex:1; min-width:180px; border:1px solid var(--border); background:var(--bg); color:var(--text); padding:7px 12px; font-family:'IBM Plex Mono',monospace; font-size:12px; outline:none; }
.f-input:focus { border-color:var(--accent); }
.f-select { border:1px solid var(--border); background:var(--bg); color:var(--text); padding:7px 10px; font-family:'IBM Plex Mono',monospace; font-size:11px; cursor:pointer; outline:none; }

/* PROFILE HEADER */
.profile-head { display:flex; align-items:flex-start; gap:20px; margin-bottom:24px; padding:20px; border:1px solid var(--border); background:var(--bg-2); }
.profile-avatar { width:60px; height:60px; background:var(--accent); color:#111; font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.profile-name { font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:700; margin:0 0 4px; }
.profile-meta { font-size:12px; color:var(--text-2); display:flex; gap:12px; flex-wrap:wrap; }

/* SEASON HISTORY */
.season-row { display:grid; grid-template-columns:120px 60px repeat(7,1fr); gap:0; border-bottom:1px solid var(--border); }
.season-row:last-child { border-bottom:0; }
.season-cell { padding:8px 11px; font-family:'IBM Plex Mono',monospace; font-size:11px; font-variant-numeric:tabular-nums; }
.season-cell.name { font-size:12px; font-weight:600; color:var(--text); font-family:inherit; }
.season-cell.pts { font-weight:700; color:var(--accent-dk); font-size:14px; }

/* BREADCRUMB */
.breadcrumb { font-size:11px; color:var(--text-3); margin-bottom:16px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.breadcrumb a { color:var(--text-3); }
.breadcrumb a:hover { color:var(--text); text-decoration:underline; }
.breadcrumb span { color:var(--border-2); }

/* SORTABLE TABLE HEADERS */
.sort-th { color:var(--text-3); text-decoration:none; display:inline-flex; align-items:center; gap:4px; font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; }
.sort-th:hover { color:var(--text); text-decoration:none; }

/* FILTER BAR BUTTONS */
.f-btn { border:1px solid var(--border); background:var(--bg-2); color:var(--text-2); padding:7px 14px; font-family:'IBM Plex Mono',monospace; font-size:11px; cursor:pointer; }
.f-btn:hover { background:var(--bg-3); }
.f-reset { display:flex; align-items:center; padding:7px 10px; font-size:11px; color:var(--text-3); border:1px solid var(--border); text-decoration:none; }
.f-reset:hover { color:var(--text); background:var(--bg-2); text-decoration:none; }

/* PROFILE - extra polish */
.profile-head { border-left:3px solid var(--accent); overflow:hidden; }
.profile-avatar { letter-spacing:-.02em; overflow:hidden; }
.profile-name a, .profile-name a:hover { color:inherit; text-decoration:none; }

/* COMPARISON GRIDS – clip outer double-border */
.cmp-grid { overflow:hidden; }
.cmp-cell { padding:11px 14px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); }

/* FORM INLINE */
form.inline { display:inline; }

/* ALERTS */
.alert { padding:10px 14px; border:1px solid; margin-bottom:16px; font-size:12px; }
.alert.info { border-color:var(--border-2); background:var(--bg-2); color:var(--text-2); }
.alert.warn { border-color:var(--accent); background:var(--accent-dim); color:var(--accent-dk); }

/* UPLOAD IMAGES */
.avatar-img { width:100%; height:100%; object-fit:cover; display:block; }

/* STAT CELLS (career/aggregate grids) */
.stat-cell { background:var(--bg); padding:12px 16px; }
.stat-l { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:3px; }
.stat-v { font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:600; color:var(--text); line-height:1; font-variant-numeric:tabular-nums; }
.stat-v.gold { color:var(--accent-dk); }

/* CONTACT CARDS */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1px; background:var(--border); }
.contact-card { background:var(--bg); padding:14px 16px; display:flex; flex-direction:column; gap:5px; }
.contact-team { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px; }
.contact-name { font-size:13px; font-weight:600; color:var(--text); }
.contact-detail { font-size:11px; color:var(--text-2); display:flex; align-items:center; gap:6px; }
.contact-detail a { color:var(--accent-dk); }
.contact-detail a:hover { text-decoration:underline; }

/* SECTION SEPARATOR HEADING */
.sec-head {
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-3);
  padding:20px 0 8px;
  margin-bottom:16px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:10px;
}
.sec-head::after {
  content:'';
  flex:1;
  height:1px;
  background:var(--border);
  display:block;
}

/* PROFILE DETAIL ROW – venue / meta inline items */
.profile-detail { display:flex; align-items:center; gap:4px; color:var(--text-3); }
.profile-detail svg { flex-shrink:0; }

/* MOBILE */
@media (max-width:720px) {
  :root { --sw:0px; }
  .sidebar { display:none; }
  .main { margin-left:0; padding:12px 12px 32px; }
  footer { margin-left:0 !important; }
  .t-brand { width:auto; border-right:0; }
  .t-name { display:none; }
  .two { grid-template-columns:1fr; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .hrow { grid-template-columns:90px 1fr 42px; }
  .profile-head { flex-wrap:wrap; gap:12px; }
  .mob-nav { display:flex; overflow-x:auto; border-bottom:1px solid var(--border); margin-bottom:14px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .mob-nav::-webkit-scrollbar { display:none; }
  .mob-item { flex-shrink:0; padding:8px 11px; font-size:11px; font-weight:500; color:var(--text-3); border-bottom:2px solid transparent; white-space:nowrap; text-decoration:none; display:block; }
  .mob-item:hover { color:var(--text); text-decoration:none; }
  .mob-item.active { color:var(--text); border-bottom-color:var(--accent); }
  .season-row { grid-template-columns:1fr 1fr 1fr; }
  .sec-head { padding-top:14px; }
  .profile-avatar { width:52px !important; height:52px !important; font-size:16px !important; }
  .profile-name { font-size:16px !important; }
}
@media (max-width:480px) {
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .profile-head { gap:10px; padding:14px; }
}
@media (min-width:721px) { .mob-nav { display:none; } }