:root {
  --navy:#0c246c; --navy-2:#0c1a4a; --bg:#0a1230; --panel:#111d4d;
  --border:#21306b; --red:#e40c24; --red-bright:#ff4d63;
  --text:#e9edf7; --muted:#9fb0e0;
}
body { background:var(--bg); color:var(--text); font-family:"Tomorrow",-apple-system,Segoe UI,Roboto,sans-serif; margin:0; }
#migrationBanner { background:#2a2410; color:#ffd98a; border-bottom:1px solid #5c4f1f;
  font-size:12.5px; line-height:1.45; text-align:center; padding:8px 16px; }
#migrationBanner a { color:#ffe2a3; font-weight:700; text-decoration:underline; }
#topbar { display:flex; align-items:center; gap:16px; padding:14px 20px; background:var(--navy-2); border-bottom:1px solid var(--border); }
#topbar .brand { font-weight:900; letter-spacing:1px; font-size:18px; }
#topbar .brand .r { color:var(--red-bright); }
#seasonSelect { appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.5px; color:var(--text);
  background-color:transparent; border:1px solid var(--border); border-radius:8px; padding:5px 30px 5px 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239fb0e0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; transition:border-color .15s, color .15s; }
#seasonSelect:hover { border-color:#3a4f9e; color:#fff; }
#seasonSelect:focus-visible { outline:none; border-color:var(--red-bright); }
#seasonSelect option { background:var(--navy-2); color:var(--text); font-weight:600; }
.seg { display:flex; border:1px solid #2a3c7a; border-radius:999px; overflow:hidden; font-size:11px; font-weight:700; cursor:pointer; }
.seg .opt { padding:5px 12px; color:var(--muted); }
.seg .opt.on { background:var(--red-bright); color:var(--bg); }
.seg[hidden] { display:none; }   /* the hidden attr is overridden by .seg's display:flex without this */
#leaders[hidden] { display:none; }   /* same: #leaders is display:grid, so the hidden attr needs help */
nav { padding:0 16px; }
#phaseTabs button, #posTabs button { font-family:inherit; background:none; border:0; border-bottom:3px solid transparent;
  color:var(--muted); font-weight:700; padding:10px 14px; cursor:pointer; font-size:13px; }
#phaseTabs button.active { color:#fff; border-bottom-color:var(--red-bright); }
#posTabs { border-bottom:1px solid #1c2a5e; }
#posTabs button.active { color:var(--red-bright); border-bottom-color:var(--red-bright); }
#controls { display:flex; gap:14px; align-items:center; padding:10px 20px; color:var(--muted); flex-wrap:wrap; }
#controls input, #controls select { background:#0c1640; color:var(--text); border:1px solid var(--border); border-radius:6px; padding:4px 8px; font-family:inherit; }
#controls select { appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; padding-right:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239fb0e0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; }
#controls select option { background:var(--navy-2); color:var(--text); }
#leaders { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:10px 20px 14px; }
#leaders.seeker { grid-template-columns:1.4fr 1fr 1fr; }
.lcard { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.lcard.hero { background:var(--navy); }
.lcard .cat { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
.lcard .val { font-size:32px; font-weight:900; color:var(--red-bright); line-height:1; margin:6px 0 4px; }
.lcard .who { font-size:12px; } .lcard .tm { font-size:10px; color:#8aa0d8; }
table.dataTable { color:var(--text); }
table.dataTable thead th { background:#0b1640 !important; color:#8aa0d8 !important; border-bottom:1px solid var(--border) !important; }
table.dataTable tbody td { border-bottom:1px solid #131f4d; }
table.dataTable tbody tr:hover td { background:#0e1a47; }
.dataTables_wrapper { padding:0 20px 20px; color:var(--muted); }
#tableCard { position:relative; }
.loading-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,18,48,.55); backdrop-filter:blur(1px); z-index:5; }
.loading-overlay[hidden] { display:none; }
.spinner { width:42px; height:42px; border-radius:50%; border:4px solid var(--border); border-top-color:var(--red-bright); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.dataTables_filter input, .dataTables_length select { background:#0c1640; color:var(--text); border:1px solid var(--border); border-radius:6px; }
.chip { background:#14245e; color:#cfe; font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; }
.disabled { opacity:.4; pointer-events:none; }
#seasonSelect:disabled, #teamSelect:disabled { opacity:.4; }
#histNote { margin:4px 20px 0; padding:8px 12px; font-size:12px; color:var(--muted);
            background:var(--panel); border:1px solid var(--border); border-radius:8px; }
#histNote[hidden] { display:none; }

/* topbar helpers (moved off inline styles so mobile can adapt them) */
.topbar-spacer { flex:1; }
.leaders-label { font-size:10px; color:var(--muted); letter-spacing:1px; }

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #topbar { flex-wrap:wrap; gap:10px; padding:12px 14px; }
  #topbar .brand { font-size:16px; }
  /* drop the flex spacer + label so the toggle left-packs and can't be pushed off-screen */
  .topbar-spacer, .leaders-label { display:none; }
  nav { padding:0 8px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #phaseTabs, #posTabs { white-space:nowrap; }
  #phaseTabs button, #posTabs button { padding:10px 10px; font-size:12px; }
  #leaders, #leaders.seeker { grid-template-columns:repeat(2,1fr); gap:10px; padding:10px 14px; }
  .lcard .val { font-size:26px; }
  #controls { padding:10px 14px; gap:10px 12px; }
  /* let the wide stats table scroll inside its own box instead of the whole page */
  .dataTables_wrapper { padding:0 12px 16px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #histNote { margin:4px 14px 0; }
}

#advBeater { padding: 4px 20px 20px; }
#advControls { display:flex; gap:14px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
#advChartWrap { position:relative; height:420px; margin-bottom:16px; }
#advEmpty { color:var(--muted); padding:24px 0; }
#beaterTable.dataTable { color:var(--text); }
/* info "i" bubble + hover/tap tooltip (the Comparative +/- explainer). display:none when
   hidden so the absolutely-positioned tip never inflates body scrollHeight / the iframe. */
.info { position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; background:var(--border); color:#cdd7f0;
  font-size:11px; font-weight:700; font-style:italic; cursor:help; user-select:none; flex:none; }
.info:hover, .info:focus-visible { background:#3a4f9e; color:#fff; outline:none; }
.info .tip { display:none; position:absolute; top:24px; left:0; z-index:30; width:300px;
  background:#0e1530; border:1px solid var(--border); border-radius:8px; padding:10px 12px;
  color:#cdd7f0; font-size:12px; line-height:1.5; font-weight:400; font-style:normal;
  box-shadow:0 8px 28px rgba(0,0,0,.5); }
.info:hover .tip, .info:focus .tip, .info:focus-within .tip { display:block; }
.info .tip b { color:var(--red-bright); } .info .tip em { color:#fff; font-style:italic; }
@media (max-width: 640px) {
  #advBeater { padding:4px 12px 16px; }
  #advChartWrap { height:340px; }
  .info .tip { left:auto; right:0; width:min(300px, calc(100vw - 56px)); }
}