:root{
  --bg:#0a0e1a; --panel:#0f1524; --panel-2:#141b2d; --line:#1e2740;
  --ink:#e7ecf5; --ink-dim:#9aa6bf; --ink-faint:#6a7690;
  --accent:#4ea8de; --accent-2:#f4a259; --dest:#e05263; --origin:#f4a259; --junior:#e0e6f0;
  --sidebar-w:340px;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}
#app{display:flex;height:100vh;width:100vw}

/* SIDEBAR */
#sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--panel);
  border-right:1px solid var(--line);display:flex;flex-direction:column;height:100vh;z-index:1000}
.side-head{padding:18px 18px 14px;border-bottom:1px solid var(--line)}
.brand{display:flex;gap:12px;align-items:flex-start}
.logo{width:40px;height:28px;flex:0 0 auto;margin-top:3px}
h1{font-size:16px;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.15}
.subtitle{font-size:11px;color:var(--ink-dim);margin:5px 0 0;letter-spacing:.01em}

.scroll{flex:1;overflow-y:auto;padding:4px 0 8px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;position:relative;min-height:0}
/* Subtle gradient hint sitting just above the About footer, indicating content scrolls */
#sidebar{position:relative}
.scroll-hint{position:absolute;left:0;right:0;height:32px;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(15,22,42,.92) 90%);opacity:0;transition:opacity .18s;z-index:5}
.scroll-hint.on{opacity:1}
.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}

.control{padding:11px 18px;border-bottom:1px solid var(--line)}
.control-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-faint);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.readout{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:0;text-transform:none;font-weight:600}

/* SEGMENTED */
.seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px}
.seg button{flex:1;background:transparent;border:0;color:var(--ink-dim);font-family:var(--sans);
  font-size:11.5px;font-weight:600;padding:7px 4px;border-radius:6px;cursor:pointer;transition:.15s}
.seg button:hover{color:var(--ink)}
.seg button.active{background:var(--accent);color:#04121f;box-shadow:0 1px 6px rgba(78,168,222,.35)}

/* DECADES */
.decades{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-bottom:10px}
.decades button{background:var(--panel-2);border:1px solid var(--line);color:var(--ink-dim);
  font-family:var(--mono);font-size:11px;font-weight:600;padding:7px 0;border-radius:6px;cursor:pointer;transition:.15s}
.decades button:hover{color:var(--ink);border-color:#2c3a5e}
.decades button.active{background:var(--accent);color:#04121f;border-color:var(--accent)}

/* RANGE */
.range-wrap{position:relative;height:34px;margin-top:2px;outline:none}
.range-wrap:focus-visible{box-shadow:0 0 0 2px var(--accent);border-radius:8px}
.range-track{position:absolute;top:15px;left:2px;right:2px;height:4px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:3px}
.range-fill{position:absolute;top:0;bottom:0;background:var(--accent);border-radius:3px;opacity:.85}
.range-wrap input[type=range]{position:absolute;top:8px;left:0;width:100%;margin:0;background:none;
  pointer-events:none;-webkit-appearance:none;appearance:none;height:18px}
.range-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;
  width:16px;height:16px;border-radius:50%;background:var(--ink);border:3px solid var(--accent);
  cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.range-wrap input[type=range]::-moz-range-thumb{pointer-events:all;width:14px;height:14px;border-radius:50%;
  background:var(--ink);border:3px solid var(--accent);cursor:pointer}

/* LINK BTN */
.link-btn{background:none;border:0;color:var(--ink-faint);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;padding:0;transition:.15s;font-family:var(--sans)}
.link-btn:hover{color:var(--ink)}
.link-btn.active{color:var(--accent)}

/* TEAM GRID */
.team-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.team-chip{aspect-ratio:1;border:1px solid var(--line);border-radius:7px;background:var(--panel-2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:9px;font-weight:600;color:var(--ink-dim);position:relative;transition:.12s;overflow:hidden;padding:3px}
.team-chip::before{content:"";position:absolute;inset:0;background:var(--tc,transparent);opacity:0;transition:.12s}
.team-chip span{position:relative;z-index:1}
.team-chip .logo{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));transition:filter .12s,transform .12s}
.team-chip:hover .logo{filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) brightness(1.1);transform:scale(1.05)}
.team-chip.active .logo{filter:drop-shadow(0 2px 3px rgba(0,0,0,.7)) brightness(1.15)}
.team-chip.defunct{opacity:.72}
.team-chip.defunct span{font-style:italic;font-size:9.5px;letter-spacing:.02em;color:var(--ink-dim)}
.team-chip.defunct:hover,.team-chip.defunct.active{opacity:1}
.team-chip:hover{border-color:var(--tc);color:var(--ink)}
.team-chip:hover::before{opacity:.14}
.team-chip.active{border-color:var(--tc);color:#fff}
.team-chip.active::before{opacity:.9}
.team-chip.active span{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* STATS */
.stats-sticky{padding:11px 18px 12px;border-top:1px solid var(--line);background:var(--panel);flex:0 0 auto}
.stat-headline{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;flex-wrap:wrap}
#stat-total{font-family:var(--sans);font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:proportional-nums;font-feature-settings:"tnum" 0;line-height:1}
.stat-total-label{font-size:10.5px;color:var(--ink-dim)}
.stat-drawn{font-size:9.5px;color:var(--accent-2);margin-left:auto;font-family:var(--mono)}
.stat-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat-title{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin-bottom:5px}
.stat-list{list-style:none;margin:0;padding:0;counter-reset:s}
.stat-list li{display:flex;justify-content:space-between;font-size:11px;padding:2px 0;color:var(--ink-dim);
  border-bottom:1px solid rgba(30,39,64,.5)}
.stat-list li b{color:var(--ink);font-weight:600}
.stat-list li .cnt{font-family:var(--mono);color:var(--accent);font-size:10.5px}
.stat-list li .cnt .pct{color:var(--ink-faint);font-size:9.5px;margin-left:5px}
.stat-scope{display:flex;align-items:center;gap:7px;margin:-3px 0 9px;padding:5px 6px 5px 10px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:999px;font-size:10.5px;color:var(--ink)}
.stat-scope .scope-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.stat-scope .scope-name{font-weight:600;letter-spacing:.01em}
.stat-scope .scope-clear{margin-left:auto;background:transparent;border:0;color:var(--ink-faint);cursor:pointer;font-size:14px;line-height:1;padding:2px 6px;border-radius:4px}
.stat-scope .scope-clear:hover{background:rgba(255,255,255,.08);color:var(--ink)}

/* FOOTER / ABOUT */
.side-foot{border-top:1px solid var(--line);background:var(--panel-2)}
#about summary{padding:12px 18px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-dim);cursor:pointer;list-style:none;user-select:none}
#about summary::-webkit-details-marker{display:none}
#about summary::after{content:"+";float:right;color:var(--ink-faint)}
#about[open] summary::after{content:"\2013"}
.about-body{padding:0 18px 16px;font-size:11px;line-height:1.55;color:var(--ink-dim);max-height:44vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  position:relative;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 28px),transparent 100%)}
.about-body::-webkit-scrollbar{width:6px}
.about-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
/* Once user scrolls to bottom, remove the fade so they can read the last line clearly. */
.about-body.at-bottom{-webkit-mask-image:none;mask-image:none}
.about-body h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin:12px 0 5px}
.about-body p{margin:0 0 8px}
.about-body a{color:var(--accent);text-decoration:none}
.about-body a:hover{text-decoration:underline}
.cov-bar{height:6px;background:var(--panel);border-radius:3px;overflow:hidden;margin:3px 0 9px;border:1px solid var(--line)}
.cov-bar>i{display:block;height:100%;background:var(--accent)}
.cov-lab{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-faint);margin-bottom:1px}
.cov-lab b{color:var(--ink)}
.about-body .about-legal{font-size:9.5px;line-height:1.5;color:var(--ink-faint);margin-top:10px;font-style:italic;opacity:.75}
.about-body .about-tip{font-size:11px;margin-top:6px}
.about-body .dl-row{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.about-body .dl-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.03);color:var(--ink);font-size:11px;font-weight:600;letter-spacing:.01em;text-decoration:none;transition:background .15s,border-color .15s}
.about-body .dl-btn:hover{background:rgba(255,255,255,.07);border-color:var(--accent);text-decoration:none}
.about-body .dl-btn .dl-meta{color:var(--ink-faint);font-weight:400;font-size:10px}
.about-body .about-tip a{display:inline-block;padding:4px 9px;border:1px solid var(--line);border-radius:6px;
  color:var(--ink);text-decoration:none;background:var(--panel-2);transition:all .15s}
.about-body .about-tip a:hover{border-color:var(--accent);color:var(--accent)}

/* MAP */
#map-wrap{flex:1;position:relative}
#map{position:absolute;inset:0;background:#0a0e1a}
.leaflet-container{background:#0a0e1a;font-family:var(--sans)}
.leaflet-control-attribution{background:rgba(10,14,26,.8)!important;color:var(--ink-faint)!important;font-size:9px!important}
.leaflet-control-attribution a{color:var(--ink-dim)!important}
.leaflet-control-zoom a{background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important}
.leaflet-control-zoom a:hover{background:var(--panel-2)!important}

/* NODE MARKERS */
.node{border-radius:50%;border:1.5px solid rgba(255,255,255,.55)}

/* SEARCH */
.search-wrap{position:relative}
.search-wrap input{width:100%;box-sizing:border-box;background:var(--panel-2);border:1px solid var(--line);
  color:var(--ink);font-family:var(--sans);font-size:12.5px;font-weight:500;
  padding:9px 30px 9px 12px;border-radius:8px;outline:none;transition:.15s;
  -webkit-appearance:none;appearance:none}
.search-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(78,168,222,.15)}
.search-wrap input::placeholder{color:var(--ink-faint)}
#search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:var(--ink-faint);font-size:18px;line-height:1;
  padding:2px 6px;cursor:pointer;border-radius:4px}
#search-clear:hover{color:var(--ink);background:var(--line)}
.search-results[hidden]{display:none}
.search-results{margin-top:8px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:8px;max-height:260px;overflow-y:auto;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.search-results::-webkit-scrollbar{width:6px}
.search-results::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.sr-item{display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;
  border-bottom:1px solid var(--line);transition:.12s}
.sr-item:last-child{border-bottom:0}
.sr-item:hover,.sr-item.sr-focus{background:rgba(78,168,222,.10)}
.sr-swatch{width:6px;height:26px;border-radius:2px;flex:0 0 auto;background:var(--accent)}
.sr-badge{flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 6px;border-radius:4px;align-self:center;line-height:1}
.sr-badge-country{background:rgba(244,162,89,.18);color:#f4a259;border:1px solid rgba(244,162,89,.4)}
.sr-badge-junior{background:rgba(224,230,240,.12);color:#c9d1de;border:1px solid rgba(224,230,240,.3)}
.sr-body{flex:1;min-width:0}
.sr-name{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-name mark{background:rgba(244,162,89,.28);color:var(--ink);padding:0 1px;border-radius:2px}
.sr-meta{font-size:10.5px;color:var(--ink-dim);font-family:var(--mono);letter-spacing:0;margin-top:1px}
.sr-empty{padding:12px;font-size:11.5px;color:var(--ink-faint);text-align:center}
.sr-more{padding:8px 10px;font-size:10.5px;color:var(--ink-faint);text-align:center;border-top:1px solid var(--line);font-style:italic}

/* SEARCH ACTIVE CHIP */
.search-active[hidden]{display:none}
.search-active{margin-top:8px;display:flex;align-items:center;gap:8px;background:var(--panel-2);
  border:1px solid var(--accent);border-radius:8px;padding:6px 8px 6px 10px}
.search-active .sa-body{flex:1;min-width:0}
.search-active .sa-name{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-active .sa-meta{font-size:10px;color:var(--ink-dim);font-family:var(--mono);margin-top:1px}
.search-active .sa-clear{background:transparent;border:0;color:var(--ink-dim);cursor:pointer;
  padding:4px 6px;border-radius:4px;font-size:14px}
.search-active .sa-clear:hover{color:var(--ink);background:var(--line)}

/* PLAYER DETAIL PANEL (opens on arc click) */
.detail-panel[hidden]{display:none}
.detail-panel{position:absolute;left:14px;top:88px;background:rgba(15,21,36,.96);
  border:1px solid var(--line);border-radius:10px;padding:14px 16px 12px;z-index:850;
  backdrop-filter:blur(6px);max-width:320px;box-shadow:0 8px 28px rgba(0,0,0,.5);
  border-left:3px solid var(--accent)}
.detail-panel .dp-close{position:absolute;top:8px;right:8px;background:transparent;border:0;
  color:var(--ink-dim);cursor:pointer;font-size:16px;line-height:1;padding:4px 8px;border-radius:4px}
.detail-panel .dp-close:hover{color:var(--ink);background:var(--line)}
.detail-panel h3{font-size:14.5px;margin:0 22px 4px 0;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.detail-panel .dp-sub{font-size:11px;color:var(--ink-dim);font-family:var(--mono);margin-bottom:10px}
.detail-panel .dp-row{display:flex;justify-content:space-between;font-size:11.5px;padding:3px 0;
  border-bottom:1px solid var(--line);gap:12px}
.detail-panel .dp-row:last-of-type{border-bottom:0}
.detail-panel .dp-k{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;font-size:9.5px;font-weight:700;padding-top:3px}
.detail-panel .dp-v{color:var(--ink);text-align:right;font-weight:500;flex:1}
.detail-panel .dp-players{max-height:180px;overflow-y:auto;margin-top:4px}
.detail-panel .dp-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}
.detail-panel .dp-tflist{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 8px}
.detail-panel .dp-tf{font-size:10px;padding:3px 7px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:rgba(255,255,255,.02)}
.detail-panel .dp-tf b{color:var(--ink-faint);margin-left:2px;font-weight:600}
.detail-panel .dp-plr{display:flex;justify-content:space-between;font-size:11px;padding:4px 0;
  color:var(--ink);border-bottom:1px dotted var(--line)}
.detail-panel .dp-plr:last-child{border-bottom:0}
.detail-panel .dp-plr .dp-yr{color:var(--ink-faint);font-family:var(--mono);font-size:10.5px}

/* ARC/RIBBON — clickable cursor cue */
.arc,.ribbon{cursor:pointer}
.arc.arc-highlight{}


/* LEGEND */
.legend{position:absolute;right:14px;bottom:14px;background:rgba(15,21,36,.92);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;z-index:800;
  backdrop-filter:blur(6px);max-width:230px;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.legend-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin-bottom:8px}
.legend-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-dim);margin:4px 0}
.dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.dot-o{background:var(--origin)} .dot-j{background:var(--junior)} .dot-d{background:var(--dest)}
.legend-note{font-size:9.5px;color:var(--ink-faint);margin-top:9px;line-height:1.45;border-top:1px solid var(--line);padding-top:8px}

/* TOOLTIP */
.tooltip{position:absolute;z-index:900;pointer-events:none;background:rgba(15,21,36,.97);
  border:1px solid var(--line);border-left-width:3px;border-radius:8px;padding:9px 12px;
  font-size:12px;max-width:250px;box-shadow:0 8px 28px rgba(0,0,0,.5);line-height:1.45}
.tt-name{font-weight:700;font-size:13px;margin-bottom:3px}
.tt-meta{color:var(--ink-dim);font-size:11px}
.tt-row{display:flex;gap:6px;margin-top:5px;font-size:11px}
.tt-row .k{color:var(--ink-faint);min-width:62px}
.tt-row .v{color:var(--ink)}
.tt-pick{font-family:var(--mono);color:var(--accent);font-size:11px}

/* LOADING */
.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;background:var(--bg);z-index:1200;color:var(--ink-dim);font-size:13px}
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#loading.hide{opacity:0;pointer-events:none;transition:opacity .5s}

/* ARC FADE */
.arc-layer{transition:opacity .35s ease}

/* MOBILE */
.mobile-toggle{display:none}
@media (max-width:860px){
  #app{flex-direction:column}
  #sidebar{width:100%;flex:0 0 auto;height:auto;max-height:52vh;border-right:0;border-bottom:1px solid var(--line)}
  #map-wrap{flex:1;min-height:48vh}
  .team-grid{grid-template-columns:repeat(10,1fr)}
  .decades{grid-template-columns:repeat(8,1fr)}
  .legend{max-width:180px;padding:9px 11px}
  .legend-note{display:none}
}
@media (max-width:480px){
  .team-grid{grid-template-columns:repeat(8,1fr)}
  h1{font-size:14px}
}