:root{
  --ink:#0A0A0A; --panel:#121211; --line:rgba(242,235,216,0.12); --line2:rgba(242,235,216,0.06);
  /* secondary text: solid + brighter (was 60%/40% alpha cream — too dim to read on the dark panels) */
  --cream:#F2EBD8; --dim:#D4CDBA; --faint:#A8A28E;
  --hot:#FF5722; --gold:#D4A017; --lime:#CBEA4C; --teal:#4FAFB5; --ice:#A8E4FF; --red:#B30000;
  --sans:'Inter','Segoe UI',system-ui,sans-serif; --mono:'JetBrains Mono',monospace; --disp:'Bebas Neue',Impact,sans-serif; --ed:'Fraunces',Georgia,serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:-0.005em;
  background-image:radial-gradient(circle at 15% 0%,rgba(255,87,34,0.06),transparent 45%),radial-gradient(circle at 90% 100%,rgba(203,234,76,0.05),transparent 45%);min-height:100vh;}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(10,10,10,0.92);backdrop-filter:blur(8px);z-index:50;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px}
#ballcanvas{flex-shrink:0}
.brand-name{font-family:var(--disp);font-size:54px;letter-spacing:0.04em;line-height:0.8;color:var(--hot)}
.brand-sub{font-family:var(--disp);font-size:16px;letter-spacing:0.18em;color:var(--lime);line-height:1.02;border-left:1px solid var(--line);padding-left:12px}
#nav{display:flex;gap:4px;flex-wrap:wrap}
.tab{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:0.01em;padding:8px 15px;background:transparent;color:var(--gold);border:1px solid transparent;border-radius:9px;cursor:pointer;transition:all .15s}
.tab:hover{color:var(--cream);background:rgba(242,235,216,0.06)}
.tab.active{color:#0A0A0A;border-color:var(--hot);background:var(--hot);font-weight:700}
.tab.livebtn{color:var(--red);border-color:rgba(179,0,0,0.45)}
.tab.livebtn.livenow{color:#fff!important;background:var(--red)!important;border-color:var(--red)!important;font-weight:700;animation:livep 1.2s ease-in-out infinite}
main{max-width:920px;margin:0 auto;padding:28px;}
.foot{text-align:center;font-size:10px;letter-spacing:0.12em;color:var(--faint);padding:30px;border-top:1px solid var(--line2);margin-top:40px}

.vhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.vtitle{font-family:var(--disp);font-size:44px;letter-spacing:0.02em;line-height:0.95;display:inline-block}
.vtag{font-size:10px;letter-spacing:0.18em;color:#0A0A0A;background:var(--gold);padding:4px 12px 3px 9px;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);font-weight:700}
.vsub{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
#legend{display:flex;flex-wrap:wrap;gap:7px 16px;padding:7px 16px;font-size:11px;letter-spacing:0.03em;color:var(--dim);border-bottom:1px solid var(--line2);align-items:center}

/* broadcast ticker */
.ticker{overflow:hidden;background:#0d0c0a;border-bottom:1px solid var(--line2);cursor:default}
.ticker-in{display:inline-flex;align-items:center;gap:30px;white-space:nowrap;padding:8px 0;font-size:11.5px;letter-spacing:0.05em;color:var(--dim);animation:tick 55s linear infinite;will-change:transform}
.ticker:hover .ticker-in{animation-play-state:paused}
.ticker-in b{color:var(--cream);font-weight:700}
.ticker-in [data-p]{cursor:pointer}
.ticker-in [data-p]:hover{color:var(--hot)}
.ticker-in [data-p]:hover b{color:var(--hot)}
.tksep{color:var(--lime);font-style:normal;font-size:8px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.controls button,.controls select,input.search{font-family:var(--sans);font-weight:500;font-size:13px;background:var(--panel);color:var(--cream);border:1px solid var(--line);border-radius:10px;padding:9px 13px;cursor:pointer}
input.search:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 2px rgba(203,234,76,0.15)}
.controls button.on{background:rgba(255,87,34,0.12);border-color:var(--hot);color:var(--hot)}
input.search{width:100%;cursor:text}
select{cursor:pointer}

.row{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#171613,#100f0e);border:1px solid var(--line2);box-shadow:inset 0 1px 0 rgba(242,235,216,0.05);border-radius:12px;padding:10px 13px;margin-bottom:7px}
[data-p]:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(242,235,216,0.05),0 6px 18px rgba(0,0,0,0.45)}
.rank{font-family:var(--disp);font-size:22px;width:30px;color:var(--faint)}
.rank.top{color:var(--gold)}
.logo{width:30px;height:30px;border-radius:50%;object-fit:contain;background:#fff;padding:3px;flex-shrink:0}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--panel);flex-shrink:0}
.avatar.ph{display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--dim);border:1px solid var(--line)}
.pname{font-size:14px;font-weight:700;color:var(--gold);letter-spacing:0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmeta{font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grow{flex:1;min-width:0}
.bigv{font-family:var(--disp);font-size:26px;font-variant-numeric:tabular-nums}
.metric{font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(242,235,216,0.14);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,87,34,0.5)}
/* League Pulse insight tiles */
.pulse{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin-bottom:16px}
.ptile{--pa:var(--hot);background:linear-gradient(180deg,#1a1815,#100f0e);border:1px solid var(--line2);box-shadow:inset 0 1px 0 rgba(242,235,216,0.06);border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color .15s,transform .12s}
.ptile:nth-child(2){--pa:var(--lime)}
.ptile:nth-child(3){--pa:var(--gold)}
.ptile:nth-child(4){--pa:var(--teal)}
.ptile:hover{border-color:var(--pa);transform:translateY(-1px)}
.plbl{font-size:9px;letter-spacing:0.12em;background:var(--pa);color:#0A0A0A;font-weight:700;display:inline-block;padding:3px 10px 2px 7px;clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%);margin-bottom:7px;white-space:nowrap}
.pbig{font-family:var(--disp);font-size:30px;line-height:1;color:var(--pa)}
.psub{font-size:10.5px;color:var(--dim);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slbl{font-size:10px;letter-spacing:0.16em;color:var(--faint);margin:16px 0 8px}
.livepill{font-size:9px;font-weight:700;letter-spacing:0.1em;color:#fff;background:var(--red);padding:2px 9px;border-radius:999px;white-space:nowrap;animation:livep 1.4s ease-in-out infinite}
@keyframes livep{0%,100%{opacity:1}50%{opacity:0.45}}
.bar{height:6px;background:rgba(242,235,216,0.1);border-radius:3px;overflow:hidden}
.bar > i{display:block;height:100%;border-radius:3px}
.fire{color:var(--gold)}.ice{color:var(--ice)}.med{color:var(--hot)}.pos{color:var(--lime)}

.card{background:var(--ink);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.tile{background:var(--panel);border-radius:10px;padding:12px 14px}
.lbl{font-size:11px;letter-spacing:0.14em;color:var(--dim)}
.metric{font-family:var(--disp);font-size:30px;line-height:1}
.movecard{background:rgba(242,235,216,0.04);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:11px}
a.link{color:var(--hot);text-decoration:none}
.chip{font-size:9.5px;letter-spacing:0.06em;padding:3px 9px;border-radius:999px;border:1px solid currentColor;display:inline-flex;align-items:center;gap:4px;font-weight:600}

/* player profile popup */
[data-p]{cursor:pointer;transition:border-color .15s,transform .1s}
[data-p]:hover{border-color:var(--tc,var(--hot))}
[data-p]:active{transform:scale(0.995)}
/* staggered entrance on first render of a list view */
@keyframes stagIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.stag{animation:stagIn .3s cubic-bezier(.2,.8,.2,1) both}
.modal-bg{position:fixed;inset:0;background:rgba(10,10,10,0.82);backdrop-filter:blur(5px);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px}
.modal-wrap{display:flex;flex-direction:column;max-width:430px;width:100%}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:100%;padding:20px 22px;position:relative;max-height:80vh;overflow:auto;box-shadow:0 24px 80px rgba(0,0,0,0.6)}
.modal-x{align-self:flex-end;background:rgba(18,18,17,0.9);border:1px solid var(--line);border-radius:10px;color:var(--cream);font-family:var(--mono);font-size:16px;letter-spacing:0.06em;cursor:pointer;padding:10px 18px;margin-bottom:10px}
.modal-x:hover{color:var(--hot);border-color:var(--hot)}

/* mobile — the link gets opened on phones; don't hide data behind ellipsis there */
@media (max-width:560px){
  main{padding:14px}
  .topbar{padding:8px 12px;gap:8px}
  .brand-name{font-size:38px}
  .brand-sub{font-size:11px;letter-spacing:0.16em;padding-left:9px}
  #ballcanvas{width:44px;height:44px}
  #nav{gap:2px}
  .tab{font-size:14px;padding:5px 10px}
  /* KEY strip: one swipeable line instead of 8 wrapped lines (was 143px of chrome) */
  #legend{flex-wrap:nowrap;overflow-x:auto;gap:14px;padding:6px 12px;scrollbar-width:none}
  #legend::-webkit-scrollbar{display:none}
  #legend>*{white-space:nowrap;flex-shrink:0}
  .ticker-in{font-size:10.5px;padding:6px 0}
  .vtitle{font-size:24px}
  .pname{font-size:16.5px}
  .pmeta{white-space:normal;line-height:1.45}
  .bigv{font-size:22px}
  .controls select{width:100%}
}