/* Leaderboard: header, legend, the cross table (sticky name/elo/±/score columns and header row). */
.lb-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.lb-head select{font-size:12px;padding:4px 6px;max-width:260px}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--text);align-items:center;background:var(--panel);border-radius:8px;padding:10px 14px;width:100%}
.legend>span{display:inline-flex;align-items:center;gap:8px}
.legend i{display:inline-block;width:20px;height:20px;border-radius:3px;position:relative;flex:none}
.legend .grad{width:120px;height:14px;border-radius:3px;background:linear-gradient(90deg,var(--win),var(--draw),var(--loss))}
.legend small{color:var(--muted)}
/* No padding on the top/left edges: sticky header/columns stick to the scrollport edge, so padding there would leave a strip
   through which scrolled rows show. */
.xt-wrap{overflow:auto;background:var(--xtbg);border-radius:8px;padding:0 10px 10px 0;max-height:calc(100vh - 170px);--xtbg:#151413}
/* Tournament tab: the live table grows with its content and the page scrolls (no second vertical scrollbar). */
#screen-tournament .xt-wrap{max-height:none;overflow-y:hidden}
:root[data-theme="light"] .xt-wrap{--xtbg:#2a2825}
table.xt{border-collapse:separate;border-spacing:2px;font:12px/1 var(--sans);font-weight:500;color:#ddd}
.xt th{font-weight:500;text-align:right;padding:0 8px;white-space:nowrap;color:#bdb9b3;box-sizing:border-box}
.xt tbody th,.xt thead th.h{position:sticky;background:var(--xtbg);z-index:1}
.xt th.nm{color:#f2d98a;font-weight:700;left:2px;width:150px;min-width:150px;max-width:150px;overflow:hidden;text-overflow:ellipsis;text-align:left;padding-left:10px}
.xt th.elo{color:#f3f3f3;left:154px;width:62px;min-width:62px;max-width:62px}
.xt th.ci{color:#8f8b85;left:218px;width:46px;min-width:46px;max-width:46px;font-size:11px}
.xt th.prob{color:#8fd3ff;left:266px;width:62px;min-width:62px;max-width:62px}
.xt thead th{position:sticky;top:0;background:var(--xtbg);z-index:2}
.xt thead th.h{z-index:3}
.xt thead th{vertical-align:bottom;text-align:center;padding:4px 0}
.xt thead th.h{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#8f8b85;text-align:right;vertical-align:bottom;padding-bottom:6px}
.xt thead th span{writing-mode:vertical-rl;transform:rotate(180deg);display:inline-block;color:#c9c4bc;max-height:96px;overflow:hidden;font-size:11px;font-weight:600;letter-spacing:.01em}
.xt thead th.k span{color:#f2d98a}
.xt td{width:20px;height:20px;min-width:20px;text-align:center;padding:0;border-radius:3px;position:relative;cursor:default}
.xt td[data-w]{cursor:pointer}
.xt td.e{background:var(--empty)}
.xt td.run{background:repeating-linear-gradient(45deg,#4a4744 0 3px,#5a5753 3px 6px)}
.xt td .sk,.legend .sk{position:absolute;inset:0;display:grid;place-items:center}
.xt td .sk svg,.legend .sk svg{width:14px;height:14px}
.xt td .dt,.legend .dt{position:absolute;right:3px;top:3px;width:5px;height:5px;border-radius:50%;background:#111;box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.xt tr.gap td,.xt tr.gap th{height:10px;background:transparent}
.xt tr.hov th{color:#fff;background:#3a3733}
.xt td.hov{outline:2px solid #fff;z-index:2}
.xt .xt-empty{color:#8f8b85;padding:12px;font-size:12px}
/* Phones: the four sticky columns (~330px) would fill the screen and hide the squares, so only a narrower name column
   sticks; Elo, ±95% and score scroll with the squares (left:auto keeps the header row's top stickiness). */
@media (max-width:700px){
  .xt th.nm{width:104px;min-width:104px;max-width:104px;padding-left:4px}
  .xt th.elo,.xt th.ci,.xt th.prob{left:auto;position:static}
  .xt thead th.elo,.xt thead th.ci,.xt thead th.prob{position:sticky}
  .xt .lbav{margin-right:3px}
}
/* avatars (A1): left of each row name, under each vertical column name */
.xt .lbav{display:inline-grid;place-items:center;width:16px;height:16px;font-size:12px;line-height:1;vertical-align:-3px;margin-right:6px}
.xt thead th .lbav{display:grid;margin:3px auto 0}
.xt th[data-bot]{cursor:help}
/* the bot info card (hover a bot name) */
.tip.bicard{white-space:normal;width:300px;font:12px/1.4 var(--sans);padding:10px 12px}
.bi{display:grid;gap:6px}
.bi-head{display:flex;gap:10px;align-items:center}
.bi-av{width:40px;height:40px;border-radius:6px;background:#2a2825;display:grid;place-items:center;font-size:24px;flex:none;overflow:hidden}
.bi-main{display:grid;gap:2px;min-width:0;justify-items:start}
.bi-nm{font-size:14px;color:#f2d98a}
.bi-id{font-size:11px;color:#8f8b85}
.bi-el{color:#8fd3ff;font-variant-numeric:tabular-nums}
.bi-ds{margin:0;color:#ddd}
.bi-fl{color:#8f8b85;font-size:11px}