// ==UserScript==
// @name         Steam Social Center
// @namespace    https://github.com/SmallRob/steam-userscripts
// @version      2.0.0
// @description  社交中心界面。对照宿主 steam-activity-modern 4.10.0。深度大盘（Hero 汇总 + 仪表 + 排行/环图/热力图）+ 好友数据 + 好友排行 + 游戏比对。样式前缀 .ssc-，不改主脚本 .sf- 样式。
// @author       SmallFork & SmallRob
// @license      MIT
// ==/UserScript==

/**
 * window.SteamSocialCenter.init(host) → boolean
 * 四个页：深度大盘（默认）、好友数据、好友排行、游戏比对。
 * 打开时只读 steam_social_db，不自动跑等级和游戏库索引。
 */
(function (root) {
  'use strict';

  const VERSION = '2.0.0';
  const API_VERSION = 1;
  const ROW = 72;
  const REDUCED = typeof root.matchMedia === 'function' && root.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const DONUT_COLORS = ['#22d3ee', '#3b82f6', '#a78bfa', '#34d399', '#fbbf24', '#fb7185', '#f472b6', '#60a5fa'];
  const OTHER_COLOR = '#475569';

  const I = {
    chart: '<svg viewBox="0 0 24 24"><path d="M4 19V5"/><path d="M4 19h16"/><path d="M8 16v-5"/><path d="M12 16V8"/><path d="M16 16v-8"/><path d="M20 16V6"/></svg>',
    users: '<svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>',
    activity: '<svg viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>',
    gamepad: '<svg viewBox="0 0 24 24"><line x1="6" y1="12" x2="10" y2="12"/><line x1="8" y1="10" x2="8" y2="14"/><line x1="15" y1="13" x2="15.01" y2="13"/><line x1="18" y1="11" x2="18.01" y2="11"/><rect x="2" y="6" width="20" height="12" rx="6"/></svg>',
    clock: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
    shield: '<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>',
    trophy: '<svg viewBox="0 0 24 24"><path d="M8 21h8"/><path d="M12 17v4"/><path d="M6 3h12v6a6 6 0 0 1-12 0V3z"/><path d="M6 5H3v2a4 4 0 0 0 4 4"/><path d="M18 5h3v2a4 4 0 0 1-4 4"/></svg>',
    flame: '<svg viewBox="0 0 24 24"><path d="M12 22c4.4 0 8-3.6 8-8 0-3.5-2.5-6.3-4.5-8.5C13.9 3.7 13 2.5 13 1c-3 2-4 4.5-4 7 0 1 .2 1.8.5 2.5C8 10 7 8.5 7 7c-1.9 1.9-3 4.4-3 7 0 4.4 3.6 8 8 8z"/></svg>',
    pie: '<svg viewBox="0 0 24 24"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>',
    lock: '<svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>',
  };

  const CSS = `
#ssc-root{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;background:#0b0f16;color:#dbe4ee;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;opacity:0;visibility:hidden;transition:opacity .25s ease}
#ssc-root.ssc-open{opacity:1;visibility:visible}
#ssc-root::before,#ssc-root::after{content:"";position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
#ssc-root::before{width:560px;height:560px;left:-180px;top:-200px;background:radial-gradient(circle,rgba(34,211,238,.14),transparent 65%);animation:ssc-drift 26s ease-in-out infinite alternate}
#ssc-root::after{width:680px;height:680px;right:-220px;bottom:-260px;background:radial-gradient(circle,rgba(59,130,246,.12),transparent 65%);animation:ssc-drift 32s ease-in-out infinite alternate-reverse}
@keyframes ssc-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(70px,44px,0) scale(1.18)}}
#ssc-root>*{position:relative;z-index:1}
/* ---- 顶栏 ---- */
.ssc-top{display:flex;align-items:center;gap:14px;padding:0 22px;height:58px;background:rgba(12,17,26,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(148,163,184,.12);flex-shrink:0}
.ssc-brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;color:#fff;letter-spacing:.5px;white-space:nowrap}
.ssc-brand-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#22d3ee,#3b82f6);box-shadow:0 0 18px rgba(34,211,238,.35);flex-shrink:0}
.ssc-brand-ico svg{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ssc-tabs{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.ssc-tabs::-webkit-scrollbar{display:none}
.ssc-tab{border:none;background:transparent;color:#93a4ba;border-radius:9px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:all .18s ease;white-space:nowrap;flex-shrink:0}
.ssc-tab:hover{color:#e2e8f0;background:rgba(148,163,184,.09)}
.ssc-tab.ssc-on{color:#fff;background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(59,130,246,.22));box-shadow:inset 0 0 0 1px rgba(34,211,238,.35),0 0 16px rgba(34,211,238,.12)}
.ssc-x{width:34px;height:34px;border-radius:9px;border:1px solid rgba(148,163,184,.18);background:rgba(148,163,184,.08);color:#e2e8f0;cursor:pointer;font-size:16px;line-height:1;flex-shrink:0;transition:all .18s ease}
.ssc-x:hover{background:rgba(244,63,94,.22);border-color:rgba(244,63,94,.4);color:#fff}
/* ---- 页面容器 ---- */
.ssc-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 22px 18px}
.ssc-page{flex:1;min-height:0;display:none;flex-direction:column;gap:10px}
.ssc-page.ssc-on{display:flex}
.ssc-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(34,211,238,.3) transparent;padding-right:4px}
.ssc-scroll::-webkit-scrollbar{width:6px}
.ssc-scroll::-webkit-scrollbar-thumb{background:rgba(34,211,238,.28);border-radius:3px}
.ssc-scroll::-webkit-scrollbar-track{background:transparent}
/* ---- 通用卡片 / 工具 ---- */
.ssc-card{position:relative;background:linear-gradient(160deg,rgba(148,163,184,.07),rgba(148,163,184,.02));border:1px solid rgba(148,163,184,.12);border-radius:14px;padding:14px 16px;min-width:0;overflow:hidden}
.ssc-card-hd{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ssc-card-hd svg{width:15px;height:15px;stroke:#22d3ee;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ssc-card-hd b{font-size:13.5px;font-weight:700;color:#f1f5f9;white-space:nowrap}
.ssc-card-hd .ssc-sub{margin-left:auto;font-size:11px;color:#7d8aa0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssc-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.ssc-tools input,.ssc-tools select,.ssc-field input,.ssc-field select{background:#131b27;color:#e2e8f0;border:1px solid rgba(148,163,184,.22);border-radius:9px;padding:7px 10px;font-size:13px;outline:none;transition:border-color .18s ease}
.ssc-tools input:focus,.ssc-field input:focus{border-color:rgba(34,211,238,.55)}
.ssc-tools input{min-width:220px;flex:1}
.ssc-btn{border:none;border-radius:9px;padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;color:#e2e8f0;background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.16);transition:all .18s ease}
.ssc-btn:hover{background:rgba(148,163,184,.18)}
.ssc-btn.ssc-primary{background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(34,211,238,.28)}
.ssc-btn.ssc-primary:hover{filter:brightness(1.12)}
.ssc-btn:disabled{opacity:.45;cursor:default}
.ssc-note{font-size:12px;color:#8fa1b8}
.ssc-banner{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.32);color:#fbbf24;border-radius:10px;padding:9px 12px;font-size:12px;flex-shrink:0}
.ssc-empty{margin:6px 0;text-align:center;color:#7d8aa0;padding:26px 14px;font-size:12.5px;line-height:1.7;border:1px dashed rgba(148,163,184,.16);border-radius:12px}
/* ---- 入场动画 ---- */
.ssc-anim{animation:ssc-up .55s cubic-bezier(.22,1,.36,1) backwards}
@keyframes ssc-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* ---- 启动加载动画 ---- */
.ssc-boot{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:radial-gradient(ellipse at center,rgba(14,20,32,.98),rgba(8,11,17,.995));transition:opacity .5s ease,visibility .5s}
.ssc-boot.ssc-boot-hide{opacity:0;visibility:hidden}
.ssc-boot-orbit{position:relative;width:112px;height:112px}
.ssc-boot-orbit i{position:absolute;inset:0;border-radius:50%;border:2px solid transparent}
.ssc-boot-orbit i:nth-child(1){border-top-color:#22d3ee;border-right-color:rgba(34,211,238,.22);animation:ssc-rot 1.1s linear infinite}
.ssc-boot-orbit i:nth-child(2){inset:13px;border-bottom-color:#3b82f6;border-left-color:rgba(59,130,246,.22);animation:ssc-rot 1.6s linear infinite reverse}
.ssc-boot-orbit i:nth-child(3){inset:26px;border-top-color:#a78bfa;border-bottom-color:rgba(167,139,250,.25);animation:ssc-rot .9s linear infinite}
@keyframes ssc-rot{to{transform:rotate(360deg)}}
.ssc-boot-core{position:absolute;inset:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#22d3ee,#3b82f6);box-shadow:0 0 26px rgba(34,211,238,.55);animation:ssc-pulse 1.6s ease-in-out infinite}
.ssc-boot-core svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round}
@keyframes ssc-pulse{0%,100%{transform:scale(.84);opacity:.7}50%{transform:scale(1);opacity:1}}
.ssc-boot-text{font-size:15px;font-weight:800;letter-spacing:8px;text-indent:8px;color:#e2e8f0;animation:ssc-glow 1.6s ease-in-out infinite}
@keyframes ssc-glow{0%,100%{opacity:.5;text-shadow:none}50%{opacity:1;text-shadow:0 0 20px rgba(34,211,238,.6)}}
.ssc-boot-bar{width:220px;height:3px;border-radius:2px;background:rgba(148,163,184,.12);overflow:hidden}
.ssc-boot-bar i{display:block;height:100%;width:40%;border-radius:2px;background:linear-gradient(90deg,transparent,#22d3ee,#3b82f6,transparent);animation:ssc-scan 1.15s ease-in-out infinite}
@keyframes ssc-scan{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
/* ---- Hero 汇总 ---- */
.ssc-hero{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ssc-hero-card{display:flex;align-items:center;gap:12px;padding:14px 15px}
.ssc-hero-card::after{content:"";position:absolute;right:-34px;top:-34px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,var(--g1),transparent 70%);opacity:.12;pointer-events:none}
.ssc-hero-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ssc-hero-ico svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ssc-hero-mid{flex:1;min-width:0}
.ssc-hero-val{font-size:23px;font-weight:800;color:#fff;line-height:1.08;font-variant-numeric:tabular-nums;letter-spacing:.3px;white-space:nowrap}
.ssc-hero-val small{font-size:12px;font-weight:700;color:#8fa1b8;margin-left:2px}
.ssc-hero-lbl{font-size:11.5px;color:#c0cdde;margin-top:3px;font-weight:600}
.ssc-hero-sub{font-size:10px;color:#7d8aa0;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssc-hero-bar{height:3px;border-radius:2px;background:rgba(148,163,184,.14);margin-top:7px;overflow:hidden}
.ssc-hero-bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--g1),var(--g2));width:0;transition:width .9s cubic-bezier(.22,1,.36,1)}
/* ---- 仪表 ---- */
.ssc-gauges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ssc-gauge{display:flex;flex-direction:column;align-items:center;padding:12px 10px 14px}
.ssc-gauge-wrap{position:relative;width:118px;height:100px}
.ssc-gauge-wrap svg{width:118px;height:118px;margin-top:-9px}
.ssc-g-track{fill:none;stroke:rgba(148,163,184,.13);stroke-width:9;stroke-linecap:round;stroke-dasharray:75 25}
.ssc-g-val{fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 1s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 5px currentColor)}
.ssc-gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:12px}
.ssc-gauge-center b{font-size:19px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.ssc-gauge-center i{font-style:normal;font-size:10px;color:#7d8aa0;margin-top:2px}
.ssc-gauge-lbl{font-size:12px;font-weight:700;color:#dbe4ee;margin-top:2px}
.ssc-gauge-note{font-size:10px;color:#7d8aa0;margin-top:2px;text-align:center}
/* ---- 大盘网格 ---- */
.ssc-grid2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px;align-items:start}
.ssc-grid2b{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:12px;align-items:start}
/* ---- 最近好友游戏时长排行 ---- */
.ssc-rr-row{display:flex;gap:10px;padding:10px 11px;border-radius:12px;background:rgba(148,163,184,.045);border:1px solid rgba(148,163,184,.09);margin-bottom:8px;cursor:pointer;transition:all .18s ease}
.ssc-rr-row:last-child{margin-bottom:0}
.ssc-rr-row:hover{border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.06);transform:translateY(-1px)}
.ssc-medal{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;align-self:flex-start;background:rgba(148,163,184,.13);color:#94a3b8}
.ssc-medal.m1{background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff;box-shadow:0 0 12px rgba(251,191,36,.4)}
.ssc-medal.m2{background:linear-gradient(135deg,#cbd5e1,#64748b);color:#fff}
.ssc-medal.m3{background:linear-gradient(135deg,#d97706,#92400e);color:#fff}
.ssc-rr-av{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid rgba(34,211,238,.35);flex-shrink:0;align-self:flex-start;background:#1e293b}
.ssc-rr-main{flex:1;min-width:0}
.ssc-rr-top{display:flex;align-items:baseline;gap:6px;min-width:0}
.ssc-rr-name{font-size:13.5px;font-weight:700;color:#f1f5f9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssc-rr-hours{margin-left:auto;font-size:14px;font-weight:800;color:#fbbf24;font-variant-numeric:tabular-nums;flex-shrink:0}
.ssc-rr-unit{font-size:10px;color:#a16207;font-weight:700;flex-shrink:0}
.ssc-rr-game{display:flex;align-items:center;gap:8px;font-size:11px;color:#9fb0c5;margin-top:4px;min-width:0}
.ssc-rr-game img{width:16px;height:16px;border-radius:4px;flex-shrink:0;background:rgba(148,163,184,.1)}
.ssc-rr-game .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}
.ssc-rr-game .gb{flex:1;height:3px;border-radius:2px;background:rgba(148,163,184,.12);overflow:hidden;min-width:26px}
.ssc-rr-game .gb i{display:block;height:100%;background:linear-gradient(90deg,#22d3ee,#3b82f6);border-radius:2px;width:0;transition:width .9s cubic-bezier(.22,1,.36,1)}
.ssc-rr-game b{color:#7dd3fc;font-weight:700;flex-shrink:0;font-variant-numeric:tabular-nums}
.ssc-rr-bar{height:3px;border-radius:2px;background:rgba(148,163,184,.1);margin-top:7px;overflow:hidden}
.ssc-rr-bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#fbbf24,#f59e0b);width:0;transition:width .9s cubic-bezier(.22,1,.36,1)}
/* ---- 热门游戏环图 ---- */
.ssc-donut-wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ssc-donut{position:relative;width:186px;height:186px;flex-shrink:0;margin:0 auto}
.ssc-donut svg{width:100%;height:100%;display:block}
.ssc-donut .ssc-seg{fill:none;stroke-width:14;cursor:pointer;transition:stroke-dasharray 1s cubic-bezier(.22,1,.36,1),stroke-dashoffset 1s cubic-bezier(.22,1,.36,1),opacity .18s ease,stroke-width .18s ease}
.ssc-donut .ssc-seg.ssc-dim{opacity:.25}
.ssc-donut .ssc-seg.ssc-hot{stroke-width:17}
.ssc-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;padding:0 26px}
.ssc-donut-center b{font-size:22px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.ssc-donut-center span{font-size:10px;color:#8fa1b8;margin-top:3px;line-height:1.4}
.ssc-legend{flex:1;min-width:210px;display:flex;flex-direction:column;gap:5px}
.ssc-lg-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:5px 8px;border-radius:8px;cursor:pointer;transition:background .15s ease}
.ssc-lg-row:hover,.ssc-lg-row.ssc-hot{background:rgba(148,163,184,.09)}
.ssc-lg-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.ssc-lg-ico{width:18px;height:18px;border-radius:4px;flex-shrink:0;object-fit:cover;background:rgba(148,163,184,.12)}
.ssc-lg-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dbe4ee}
.ssc-lg-meta{color:#7d8aa0;font-size:10.5px;flex-shrink:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.ssc-lg-pct{width:44px;text-align:right;font-weight:700;color:#e2e8f0;flex-shrink:0;font-variant-numeric:tabular-nums}
/* ---- 热力图 ---- */
.ssc-heat{display:flex;flex-direction:column;gap:3px;min-width:520px}
.ssc-heat-scroll{overflow-x:auto;scrollbar-width:thin}
.ssc-heat-days{display:grid;grid-template-columns:118px repeat(14,1fr);gap:3px;font-size:9.5px;color:#64748b;padding-bottom:2px}
.ssc-heat-days span{text-align:center;white-space:nowrap}
.ssc-heat-row{display:grid;grid-template-columns:118px repeat(14,1fr);gap:3px;align-items:center;border-radius:6px;cursor:pointer}
.ssc-heat-row:hover{background:rgba(148,163,184,.05)}
.ssc-heat-name{display:flex;align-items:center;gap:6px;font-size:11px;color:#c9d5e3;min-width:0;padding-right:4px}
.ssc-heat-name img{width:18px;height:18px;border-radius:50%;flex-shrink:0;background:#1e293b}
.ssc-heat-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssc-cell{aspect-ratio:1;max-height:16px;width:100%;border-radius:3px;background:rgba(148,163,184,.08)}
.ssc-cell.v1{background:#155e75}.ssc-cell.v2{background:#0e7490}.ssc-cell.v3{background:#06b6d4}.ssc-cell.v4{background:#22d3ee;box-shadow:0 0 5px rgba(34,211,238,.35)}.ssc-cell.v5{background:#a5f3fc;box-shadow:0 0 8px rgba(34,211,238,.55)}
.ssc-heat-legend{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:10px;color:#64748b;margin-top:10px}
.ssc-heat-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;background:rgba(148,163,184,.08)}
.ssc-heat-legend i.v1{background:#155e75}.ssc-heat-legend i.v2{background:#0e7490}.ssc-heat-legend i.v3{background:#06b6d4}.ssc-heat-legend i.v4{background:#22d3ee}.ssc-heat-legend i.v5{background:#a5f3fc}
/* ---- 好友数排行条形 ---- */
.ssc-fr-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:9px;font-size:12px;cursor:pointer;transition:background .15s ease}
.ssc-fr-row:hover{background:rgba(148,163,184,.08)}
.ssc-fr-no{width:22px;color:#7d8aa0;font-weight:700;text-align:center;flex-shrink:0;font-variant-numeric:tabular-nums}
.ssc-fr-av{width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#1e293b}
.ssc-fr-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dbe4ee}
.ssc-fr-bar{width:34%;height:7px;border-radius:4px;background:rgba(148,163,184,.1);overflow:hidden;flex-shrink:0}
.ssc-fr-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#22d3ee,#3b82f6);box-shadow:0 0 8px rgba(34,211,238,.35);width:0;transition:width .9s cubic-bezier(.22,1,.36,1)}
.ssc-fr-val{width:56px;text-align:right;font-weight:700;color:#67e8f9;flex-shrink:0;font-variant-numeric:tabular-nums}
/* ---- 好友数据页 ---- */
.ssc-kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.ssc-kpi{background:linear-gradient(160deg,rgba(148,163,184,.07),rgba(148,163,184,.02));border:1px solid rgba(148,163,184,.12);border-radius:10px;padding:8px 10px}
.ssc-kpi b{display:block;font-size:17px;color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.ssc-kpi span{font-size:10.5px;color:#8fa1b8}
.ssc-list{position:relative;flex:1;min-height:0;overflow:auto;border:1px solid rgba(148,163,184,.1);border-radius:12px;background:rgba(0,0,0,.18);scrollbar-width:thin;scrollbar-color:rgba(34,211,238,.3) transparent}
.ssc-list::-webkit-scrollbar{width:6px}
.ssc-list::-webkit-scrollbar-thumb{background:rgba(34,211,238,.28);border-radius:3px}
.ssc-spacer{width:1px}
.ssc-win{position:absolute;left:0;right:0;top:0}
.ssc-row{display:flex;align-items:center;gap:10px;height:64px;margin:0 8px 8px;padding:0 10px;box-sizing:border-box;background:rgba(148,163,184,.045);border:1px solid rgba(148,163,184,.08);border-radius:11px;color:inherit;width:calc(100% - 16px);text-align:left;cursor:pointer;transition:all .18s ease}
.ssc-row:hover{border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.07)}
.ssc-av{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#1e293b;flex-shrink:0}
.ssc-mid{flex:1;min-width:0}
.ssc-name{font-size:14px;font-weight:700;color:#f8fafc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssc-sub{font-size:12px;color:#8fa1b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssc-meta{display:flex;gap:6px;flex-shrink:0;font-size:11px;color:#cbd5e1;flex-wrap:wrap;justify-content:flex-end}
.ssc-pill{background:rgba(148,163,184,.1);border-radius:999px;padding:3px 7px;white-space:nowrap}
.ssc-pill.ssc-new{background:rgba(251,113,133,.16);color:#fda4af}
.ssc-pill.ssc-vac{background:rgba(244,63,94,.2);color:#fecaca}
.ssc-pill.ssc-game{background:rgba(139,92,246,.2);color:#ddd6fe}
.ssc-pill.ssc-lv{color:#fbbf24;background:rgba(251,191,36,.1)}
.ssc-empty{margin:auto;text-align:center;color:#8fa1b8;padding:48px 16px;font-size:14px;line-height:1.6}
/* ---- 排行页 ---- */
.ssc-rank-list,.ssc-cmp{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin;scrollbar-color:rgba(34,211,238,.3) transparent}
.ssc-rank-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;background:rgba(148,163,184,.045);border:1px solid rgba(148,163,184,.08)}
.ssc-rank-row .ssc-rk-name{font-size:13px;font-weight:600;color:#e2e8f0;width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}
.ssc-rank-row .ssc-fr-bar{flex:1;width:auto}
.ssc-rank-row .ssc-rk-val{font-size:12px;font-weight:700;color:#7dd3fc;width:88px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssc-rank-row button{margin-left:auto;flex-shrink:0}
/* ---- 比对页 ---- */
.ssc-split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:0;flex:1}
.ssc-card h3{margin:0 0 8px;font-size:14px;color:#fff}
.ssc-checks{overflow:auto;max-height:180px;display:flex;flex-direction:column;gap:4px;font-size:12px}
.ssc-result{overflow:auto;flex:1;min-height:80px;font-size:12px;display:flex;flex-direction:column;gap:4px;color:#c9d5e3}
.ssc-suggest{display:flex;flex-direction:column;gap:4px}
.ssc-suggest button{text-align:left}
/* ---- 响应式 ---- */
@media(max-width:1100px){.ssc-hero{grid-template-columns:repeat(3,minmax(0,1fr))}.ssc-gauges{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.ssc-grid2,.ssc-grid2b{grid-template-columns:1fr}.ssc-split{grid-template-columns:1fr}.ssc-body{padding:10px 12px 14px}.ssc-top{padding:0 12px}.ssc-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.ssc-rank-row .ssc-rk-name{width:96px}.ssc-rank-row .ssc-fr-bar{display:none}}
@media(max-width:640px){.ssc-hero{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){#ssc-root *,#ssc-root *::before,#ssc-root *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
`;

  let host = null;
  let core = null;
  let inited = false;
  let styled = false;
  let opened = false;
  let page = 'dash';
  let query = '';
  let sortKey = 'days';
  let view = [];
  let rootEl = null;
  let searchTimer = null;
  let gameTimer = null;
  let comparePick = [];
  let dashTickAt = 0;

  function $(sel, base) { return (base || rootEl).querySelector(sel); }
  function text(sel, value) {
    const node = $(sel);
    if (node) node.textContent = value;
  }
  function esc(value) {
    return String(value == null ? '' : value).replace(/[&<>"']/g, (c) => ({
      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
    }[c]));
  }
  function hours(minutes) {
    return (Math.round((minutes || 0) / 6) / 10) + 'h';
  }
  function animateBars(container) {
    requestAnimationFrame(() => {
      container.querySelectorAll('[data-w]').forEach((bar) => {
        bar.style.width = (Math.max(0, Math.min(100, Number(bar.dataset.w) || 0))) + '%';
      });
    });
  }
  function countUp(node, target) {
    const fmtPct = node.dataset.fmt === 'pct';
    const format = (v) => (fmtPct ? (Math.round(v * 10) / 10).toString() : Math.round(v).toLocaleString('en-US'));
    if (REDUCED) { node.textContent = format(target); return; }
    const t0 = performance.now();
    const dur = 950;
    const step = (t) => {
      const p = Math.min(1, (t - t0) / dur);
      const e = 1 - Math.pow(1 - p, 3);
      node.textContent = format(target * e);
      if (p < 1 && opened) requestAnimationFrame(step);
    };
    requestAnimationFrame(step);
  }

  function init(nextHost) {
    try {
      if (!nextHost || nextHost.apiVersion !== API_VERSION) return false;
      const required = ['getApiKey', 'getMySteamId', 'openFriend', 'showToast'];
      for (let i = 0; i < required.length; i++) {
        if (typeof nextHost[required[i]] !== 'function') return false;
      }
      core = root.SteamSocialCore;
      if (!core || core.apiVersion !== API_VERSION || typeof core.attach !== 'function') return false;
      if (!core.attach(nextHost)) return false;
      host = nextHost;
      injectStyle();
      inited = true;
      return true;
    } catch (e) {
      return false;
    }
  }

  function injectStyle() {
    if (styled) return;
    styled = true;
    if (typeof GM_addStyle === 'function') GM_addStyle(CSS);
    else if (root.document) {
      const style = root.document.createElement('style');
      style.textContent = CSS;
      root.document.head.appendChild(style);
    }
  }

  function isOpen() { return opened; }

  function toast(message, type) {
    try { host.showToast(message, type || 'info'); } catch (e) { /* 宿主提示失败时忽略 */ }
  }

  function ensureDom() {
    if (rootEl) return;
    const doc = root.document;
    rootEl = doc.createElement('div');
    rootEl.id = 'ssc-root';
    rootEl.innerHTML = `
      <div class="ssc-top">
        <div class="ssc-brand"><span class="ssc-brand-ico">${I.chart}</span><span>社交中心</span></div>
        <div class="ssc-tabs">
          <button class="ssc-tab ssc-on" data-page="dash" type="button">深度大盘</button>
          <button class="ssc-tab" data-page="data" type="button">好友数据</button>
          <button class="ssc-tab" data-page="rank" type="button">好友排行</button>
          <button class="ssc-tab" data-page="compare" type="button">游戏比对</button>
        </div>
        <button class="ssc-x" type="button" aria-label="关闭">×</button>
      </div>
      <div class="ssc-body">
        <section class="ssc-page ssc-on" data-page="dash">
          <div class="ssc-tools">
            <span class="ssc-note" id="ssc-dash-cover">读取本地缓存…</span>
            <button class="ssc-btn ssc-primary" id="ssc-dash-index" type="button">补齐深度数据</button>
            <span class="ssc-note" id="ssc-dash-gen"></span>
          </div>
          <div class="ssc-scroll" id="ssc-dash"></div>
        </section>
        <section class="ssc-page" data-page="data">
          <div class="ssc-banner" id="ssc-key-banner" hidden>填写 Steam Web API Key 后才能读取好友名单。Key 在好友列表的设置里保存，这里不会发请求。</div>
          <div class="ssc-kpis" id="ssc-kpis"></div>
          <div class="ssc-tools">
            <input id="ssc-q" type="search" placeholder="搜索名字、SteamID、国家代码" />
            <select id="ssc-sort">
              <option value="days">好友天数</option>
              <option value="status">状态</option>
              <option value="name">名字</option>
              <option value="level">等级</option>
              <option value="country">国家</option>
            </select>
            <button class="ssc-btn" id="ssc-refresh" type="button">刷新名单</button>
            <button class="ssc-btn" id="ssc-level" type="button">补齐等级</button>
            <span class="ssc-note" id="ssc-level-note"></span>
          </div>
          <div class="ssc-list" id="ssc-list"><div class="ssc-spacer"></div><div class="ssc-win"></div></div>
        </section>
        <section class="ssc-page" data-page="rank">
          <div class="ssc-tools">
            <button class="ssc-tab ssc-on" data-rank="days" type="button">好友天数</button>
            <button class="ssc-tab" data-rank="status" type="button">在线</button>
            <button class="ssc-tab" data-rank="level" type="button">等级</button>
            <button class="ssc-tab" data-rank="gameCount" type="button">游戏数</button>
            <button class="ssc-tab" data-rank="playtime" type="button">总时长</button>
            <button class="ssc-tab" data-rank="recent2w" type="button">近两周</button>
            <button class="ssc-btn ssc-primary" id="ssc-index" type="button">补齐索引</button>
            <span class="ssc-note" id="ssc-index-count">已索引 0 / 0</span>
          </div>
          <div class="ssc-note">游戏数、总时长、近两周只统计已经索引的好友。索引不会在打开时自动开始。</div>
          <div class="ssc-rank-list" id="ssc-rank"></div>
        </section>
        <section class="ssc-page" data-page="compare">
          <div class="ssc-split">
            <div class="ssc-card">
              <h3>一对一</h3>
              <div class="ssc-field"><select id="ssc-pair"></select></div>
              <button class="ssc-btn ssc-primary" id="ssc-pair-go" type="button">比对</button>
              <div class="ssc-result" id="ssc-pair-out"></div>
            </div>
            <div class="ssc-card">
              <h3>2–4 人交集</h3>
              <div class="ssc-checks" id="ssc-many"></div>
              <button class="ssc-btn ssc-primary" id="ssc-many-go" type="button">看交集</button>
              <div class="ssc-result" id="ssc-many-out"></div>
            </div>
            <div class="ssc-card">
              <h3>单游戏时长</h3>
              <div class="ssc-field"><input id="ssc-game-q" type="search" placeholder="游戏名或 AppID" /></div>
              <div class="ssc-suggest" id="ssc-game-suggest"></div>
              <div class="ssc-result" id="ssc-game-out"></div>
            </div>
          </div>
        </section>
      </div>
      <div class="ssc-boot" id="ssc-boot">
        <div class="ssc-boot-orbit"><i></i><i></i><i></i><span class="ssc-boot-core">${I.chart}</span></div>
        <div class="ssc-boot-text">社交中心</div>
        <div class="ssc-boot-bar"><i></i></div>
      </div>`;
    doc.body.appendChild(rootEl);
    const dashBox = $('#ssc-dash');
    dashBox.addEventListener('click', onDashClick);
    dashBox.addEventListener('mouseover', onDashHover);
    dashBox.addEventListener('mouseout', onDashHoverOut);
    rootEl.querySelector('.ssc-x').addEventListener('click', close);
    rootEl.querySelectorAll('.ssc-top .ssc-tab').forEach((btn) => {
      btn.addEventListener('click', () => showPage(btn.dataset.page));
    });
    $('#ssc-q').addEventListener('input', (e) => {
      query = e.target.value || '';
      clearTimeout(searchTimer);
      searchTimer = setTimeout(() => paintList(false), 120);
    });
    $('#ssc-sort').addEventListener('change', (e) => {
      sortKey = e.target.value;
      paintList(false);
    });
    $('#ssc-refresh').addEventListener('click', () => refreshRoster(true));
    $('#ssc-level').addEventListener('click', onLevelClick);
    $('#ssc-list').addEventListener('scroll', onListScroll);
    $('#ssc-list').addEventListener('click', onRowClick);
    rootEl.querySelectorAll('[data-rank]').forEach((btn) => {
      btn.addEventListener('click', () => {
        rootEl.querySelectorAll('[data-rank]').forEach((node) => node.classList.toggle('ssc-on', node === btn));
        renderRank(btn.dataset.rank);
      });
    });
    $('#ssc-index').addEventListener('click', onIndexClick);
    $('#ssc-dash-index').addEventListener('click', onIndexClick);
    $('#ssc-pair-go').addEventListener('click', renderPair);
    $('#ssc-many-go').addEventListener('click', renderMany);
    $('#ssc-game-q').addEventListener('input', () => {
      clearTimeout(gameTimer);
      gameTimer = setTimeout(renderGameSuggest, 200);
    });
    buildKpiShell();
  }

  function buildKpiShell() {
    const keys = [
      ['total', '好友'],
      ['ingame', '游戏中'],
      ['online', '在线'],
      ['offline', '离线'],
      ['fresh', '30 天内新好友'],
      ['countries', '国家'],
      ['vac', 'VAC 已知'],
    ];
    const hostNode = $('#ssc-kpis');
    hostNode.innerHTML = '';
    keys.forEach((item) => {
      const card = document.createElement('div');
      card.className = 'ssc-kpi';
      const value = document.createElement('b');
      value.id = 'ssc-kpi-' + item[0];
      value.textContent = '–';
      const label = document.createElement('span');
      label.textContent = item[1];
      card.appendChild(value);
      card.appendChild(label);
      hostNode.appendChild(card);
    });
  }

  function showPage(next) {
    page = next || 'dash';
    rootEl.querySelectorAll('.ssc-top .ssc-tab').forEach((btn) => {
      btn.classList.toggle('ssc-on', btn.dataset.page === page);
    });
    rootEl.querySelectorAll('.ssc-page').forEach((node) => {
      node.classList.toggle('ssc-on', node.dataset.page === page);
    });
    if (page === 'dash') renderDash(false);
    if (page === 'data') paintList(true);
    if (page === 'rank') {
      syncIndexButton();
      const current = rootEl.querySelector('[data-rank].ssc-on');
      renderRank(current ? current.dataset.rank : 'days');
    }
    if (page === 'compare') fillCompareSources();
  }

  async function open() {
    if (!inited) return false;
    ensureDom();
    if (opened) return true;
    opened = true;
    rootEl.classList.add('ssc-open');
    document.body.style.overflow = 'hidden';
    document.addEventListener('keydown', onKey);
    const boot = $('#ssc-boot');
    if (boot) boot.classList.remove('ssc-boot-hide');
    const minDelay = new Promise((resolve) => setTimeout(resolve, REDUCED ? 60 : 850));
    try { await core.ready; } catch (e) { /* 内存模式仍可打开 */ }
    paintFromCache();
    showPage(page);
    await minDelay;
    if (boot) boot.classList.add('ssc-boot-hide');
    const key = safeKey();
    const banner = $('#ssc-key-banner');
    if (banner) banner.hidden = !!key;
    if (!key) return true;
    if (!core.rosterFresh()) refreshRoster(false);
    else core.startVacFill(onVac);
    return true;
  }

  function close() {
    if (!opened && !rootEl) return;
    opened = false;
    if (core) {
      try { core.pauseLevelJob(); } catch (e) { /* 无任务 */ }
      try { core.pauseLibraryIndexJob(); } catch (e) { /* 无任务 */ }
      try { core.pauseVacFill(); } catch (e) { /* 无任务 */ }
    }
    document.removeEventListener('keydown', onKey);
    if (rootEl) rootEl.classList.remove('ssc-open');
    document.body.style.overflow = '';
  }

  function onKey(e) {
    if (e.key === 'Escape' && opened) close();
  }

  function safeKey() {
    try { return host.getApiKey(); } catch (e) { return ''; }
  }

  function paintFromCache() {
    paintKpi();
    paintList(true);
    syncLevelButton();
    syncIndexButton();
  }

  function paintKpi() {
    const data = core.kpi();
    text('#ssc-kpi-total', String(data.total));
    text('#ssc-kpi-ingame', String(data.ingame));
    text('#ssc-kpi-online', String(data.online));
    text('#ssc-kpi-offline', String(data.offline));
    text('#ssc-kpi-fresh', String(data.fresh));
    text('#ssc-kpi-countries', String(data.countries));
    text('#ssc-kpi-vac', data.vacKnown + (data.vacBanned ? ' · 封禁 ' + data.vacBanned : ''));
  }

  function paintList(keepScroll) {
    if (!rootEl) return;
    view = core.queryFriends({ q: query, sort: sortKey });
    const list = $('#ssc-list');
    const top = keepScroll ? list.scrollTop : 0;
    const spacer = list.querySelector('.ssc-spacer');
    spacer.style.height = (view.length * ROW) + 'px';
    if (!view.length) {
      list.querySelector('.ssc-win').textContent = '';
      const empty = document.createElement('div');
      empty.className = 'ssc-empty';
      empty.textContent = core.loadRoster()
        ? '没有匹配的好友'
        : (safeKey() ? '还没有好友缓存，正在准备名单…' : '没有缓存。填写 API Key 后才能拉取好友名单。');
      list.querySelector('.ssc-win').appendChild(empty);
      return;
    }
    if (!keepScroll) list.scrollTop = 0;
    else list.scrollTop = top;
    drawWindow();
    requestAnimationFrame(() => { if (opened) drawWindow(); });
  }

  let scrollRaf = 0;
  function onListScroll() {
    if (scrollRaf) return;
    scrollRaf = requestAnimationFrame(() => {
      scrollRaf = 0;
      drawWindow();
    });
  }

  function drawWindow() {
    const list = $('#ssc-list');
    if (!list || !view.length) return;
    const top = list.scrollTop;
    const height = list.clientHeight || 480;
    const start = Math.max(0, Math.floor(top / ROW) - 4);
    const end = Math.min(view.length, Math.ceil((top + height) / ROW) + 4);
    const win = list.querySelector('.ssc-win');
    const vac = core.getVac();
    const levels = core.getLevels();
    const frag = document.createDocumentFragment();
    for (let i = start; i < end; i++) frag.appendChild(renderRow(view[i], vac, levels));
    win.textContent = '';
    win.style.transform = 'translateY(' + (start * ROW) + 'px)';
    win.appendChild(frag);
  }

  function renderRow(friend, vac, levels) {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'ssc-row';
    btn.dataset.id = friend.steamid;
    const img = document.createElement('img');
    img.className = 'ssc-av';
    img.alt = '';
    if (/^https:\/\//.test(friend.avatar || '')) img.src = friend.avatar;
    const mid = document.createElement('div');
    mid.className = 'ssc-mid';
    const name = document.createElement('div');
    name.className = 'ssc-name';
    name.textContent = friend.personaname || friend.steamid;
    const sub = document.createElement('div');
    sub.className = 'ssc-sub';
    sub.textContent = statusText(friend);
    mid.appendChild(name);
    mid.appendChild(sub);
    const meta = document.createElement('div');
    meta.className = 'ssc-meta';
    meta.appendChild(pill(daysText(friend), isFresh(friend) ? 'ssc-pill ssc-new' : 'ssc-pill'));
    if (friend.countryCode) meta.appendChild(pill(friend.countryCode, 'ssc-pill'));
    const level = levels[friend.steamid];
    const levelPill = pill(level == null ? '等级 —' : ('Lv.' + level), 'ssc-pill ssc-lv');
    meta.appendChild(levelPill);
    const ban = vac[friend.steamid];
    if (ban && (ban.vac || ban.gameBan || ban.communityBanned)) meta.appendChild(pill('VAC', 'ssc-pill ssc-vac'));
    const mutual = core.getMutual(friend.steamid);
    if (mutual && !mutual.private) meta.appendChild(pill('共同 ' + mutual.count, 'ssc-pill'));
    btn.appendChild(img);
    btn.appendChild(mid);
    btn.appendChild(meta);
    return btn;
  }

  function pill(label, cls) {
    const node = document.createElement('span');
    node.className = cls;
    node.textContent = label;
    return node;
  }

  function statusText(friend) {
    if (friend.personastate > 0 && friend.gameextrainfo) return '游戏中 · ' + friend.gameextrainfo;
    if (friend.personastate > 0) return '在线';
    return '离线';
  }

  function daysText(friend) {
    const days = core.pure.friendDays(friend.friend_since, Date.now());
    return days == null ? '好友天数未知' : (days + ' 天');
  }

  function isFresh(friend) {
    return core.pure.isNewFriend(friend, Date.now());
  }

  function onRowClick(e) {
    const row = e.target.closest('.ssc-row');
    if (!row) return;
    const friend = view.find((item) => item.steamid === row.dataset.id);
    if (!friend) return;
    host.openFriend(friend.steamid, friend.personaname || '', friend.avatar || '');
  }

  async function refreshRoster(manual) {
    if (!safeKey()) {
      toast('需要 API Key 才能刷新名单', 'warn');
      return;
    }
    const btn = $('#ssc-refresh');
    if (btn) btn.disabled = true;
    try {
      await core.refreshRoster();
      const list = $('#ssc-list');
      const top = list ? list.scrollTop : 0;
      paintKpi();
      paintList(true);
      if (list) list.scrollTop = top;
      drawWindow();
      if (page === 'dash') renderDash(true);
      core.startVacFill(onVac);
      if (manual) toast('好友名单已更新', 'info');
    } catch (e) {
      const code = e && e.code;
      if (code === 'NO_KEY') toast('需要 API Key', 'warn');
      else if (code === 'NO_STEAMID') toast('没有识别到你的 SteamID', 'error');
      else toast('好友名单更新失败', 'error');
    } finally {
      if (btn) btn.disabled = false;
    }
  }

  function onVac() {
    if (!opened || !rootEl) return;
    paintKpi();
    const vac = core.getVac();
    rootEl.querySelectorAll('.ssc-row').forEach((row) => {
      const ban = vac[row.dataset.id];
      const old = row.querySelector('.ssc-vac');
      const show = ban && (ban.vac || ban.gameBan || ban.communityBanned);
      if (show && !old) row.querySelector('.ssc-meta').appendChild(pill('VAC', 'ssc-pill ssc-vac'));
      if (!show && old) old.remove();
    });
  }

  function onLevelClick() {
    if (!safeKey()) { toast('补齐等级需要 API Key', 'warn'); return; }
    if (!core.loadRoster()) { toast('先有好友名单才能补等级', 'warn'); return; }
    const state = core.levelJobState();
    if (state.running && !state.paused) core.pauseLevelJob();
    else if (state.paused) core.resumeLevelJob();
    else core.startLevelJob(onLevelItem);
    syncLevelButton();
  }

  function onLevelItem(id, level) {
    if (!id || !rootEl) return;
    const row = rootEl.querySelector('.ssc-row[data-id="' + cssEscape(id) + '"] .ssc-lv');
    if (row) row.textContent = 'Lv.' + level;
    syncLevelButton();
  }

  function cssEscape(value) {
    return window.CSS && CSS.escape ? CSS.escape(value) : String(value).replace(/"/g, '');
  }

  function syncLevelButton() {
    const state = core.levelJobState();
    const btn = $('#ssc-level');
    if (!btn) return;
    if (state.running && !state.paused) btn.textContent = '暂停等级';
    else if (state.paused) btn.textContent = '继续等级';
    else btn.textContent = '补齐等级';
    text('#ssc-level-note', state.total ? ('等级 ' + state.done + ' / ' + state.total) : '');
  }

  function onIndexClick() {
    if (!safeKey()) { toast('补齐索引需要 API Key', 'warn'); return; }
    if (!core.loadRoster()) { toast('先有好友名单才能索引游戏库', 'warn'); return; }
    const state = core.libraryJobState();
    if (state.running && !state.paused) core.pauseLibraryIndexJob();
    else if (state.paused) core.resumeLibraryIndexJob();
    else {
      const started = core.startLibraryIndexJob(onIndex);
      if (!started.running && !started.total) toast('游戏库索引已经齐了', 'info');
    }
    syncIndexButton();
  }

  function onIndex(state) {
    if (!rootEl) return;
    syncIndexButton();
    const stats = core.indexStats();
    const note = '已索引 ' + stats.indexed + ' / ' + stats.total + (state.failed ? ' · 跳过 ' + state.failed : '');
    text('#ssc-index-count', note);
    text('#ssc-dash-cover', note);
    if (page === 'dash' && (state.phase === 'tick' || state.phase === 'done')) {
      const now = Date.now();
      if (state.phase === 'done' || now - dashTickAt >= 1600) {
        dashTickAt = now;
        renderDash(true);
      }
    }
    if (state.phase === 'done' && page === 'rank') {
      const current = rootEl.querySelector('[data-rank].ssc-on');
      renderRank(current ? current.dataset.rank : 'days');
    }
    if (state.phase === 'done' && page === 'compare') fillCompareSources();
  }

  function syncIndexButton() {
    const state = core.libraryJobState();
    const stats = core.indexStats();
    const label = state.running && !state.paused ? '暂停索引' : (state.paused ? '继续索引' : '补齐深度数据');
    ['#ssc-index', '#ssc-dash-index'].forEach((sel) => {
      const btn = $(sel);
      if (btn) btn.textContent = sel === '#ssc-index' ? label.replace('深度数据', '索引') : label;
    });
    const note = '已索引 ' + stats.indexed + ' / ' + stats.total;
    const indexNote = $('#ssc-index-count');
    if (indexNote && !state.running) indexNote.textContent = note;
    const dashNote = $('#ssc-dash-cover');
    if (dashNote && !state.running) dashNote.textContent = note;
  }

  // ==================== 深度大盘 ====================
  function gaugeSvg(pct, color) {
    const p = Math.max(0, Math.min(1, pct || 0));
    return '<svg viewBox="0 0 120 120" aria-hidden="true">' +
      '<circle class="ssc-g-track" cx="60" cy="60" r="48" pathLength="100" transform="rotate(135 60 60)"></circle>' +
      '<circle class="ssc-g-val" cx="60" cy="60" r="48" pathLength="100" transform="rotate(135 60 60)" stroke="' + color + '" style="color:' + color + '" data-pct="' + p + '"></circle>' +
      '</svg>';
  }

  function heroCard(o) {
    const pct = o.pct == null ? null : Math.max(0, Math.min(1, o.pct));
    return '<div class="ssc-card ssc-hero-card ssc-anim" style="--g1:' + o.g1 + ';--g2:' + o.g2 + ';animation-delay:' + o.delay + 'ms">' +
      '<div class="ssc-hero-ico" style="background:linear-gradient(135deg,' + o.g1 + ',' + o.g2 + ');box-shadow:0 4px 16px ' + o.g1 + '55">' + o.icon + '</div>' +
      '<div class="ssc-hero-mid">' +
        '<div class="ssc-hero-val"><span data-cu="' + (o.val || 0) + '">0</span>' +
          (o.suffix ? '<small>' + esc(o.suffix) + '</small>' : '') +
          (o.unit ? '<small>' + esc(o.unit) + '</small>' : '') +
        '</div>' +
        '<div class="ssc-hero-lbl">' + esc(o.lbl) + '</div>' +
        (o.sub ? '<div class="ssc-hero-sub">' + esc(o.sub) + '</div>' : '') +
        (pct != null ? '<div class="ssc-hero-bar"><i data-w="' + (pct * 100).toFixed(1) + '"></i></div>' : '') +
      '</div></div>';
  }

  function gaugeCard(o) {
    const pct = Math.max(0, Math.min(1, o.pct || 0));
    return '<div class="ssc-card ssc-gauge ssc-anim" style="animation-delay:' + o.delay + 'ms">' +
      '<div class="ssc-gauge-wrap">' + gaugeSvg(pct, o.color) +
        '<div class="ssc-gauge-center"><b data-cu="' + (Math.round(pct * 1000) / 10) + '" data-fmt="pct">0</b><i>% · ' + esc(o.note) + '</i></div>' +
      '</div>' +
      '<div class="ssc-gauge-lbl">' + esc(o.lbl) + '</div>' +
      '</div>';
  }

  function heatLevel(value, max) {
    if (!value) return '';
    const p = value / (max || 1);
    if (p <= 0.2) return 'v1';
    if (p <= 0.4) return 'v2';
    if (p <= 0.6) return 'v3';
    if (p <= 0.85) return 'v4';
    return 'v5';
  }

  function renderDash(live) {
    if (!rootEl || !opened) return;
    const box = $('#ssc-dash');
    if (!box) return;
    const d = core.dashAggregate();
    const prevScroll = live ? box.scrollTop : 0;
    box.innerHTML = dashHtml(d, live);
    animateDash(box, live);
    text('#ssc-dash-gen', d.coverage.total ? ('数据截至 ' + new Date(d.generatedAt).toLocaleTimeString('zh-CN', { hour12: false })) : '');
    if (live && prevScroll) box.scrollTop = prevScroll;
  }

  function dashHtml(d, live) {
    const k = d.kpis;
    const cov = d.coverage;
    const delay = (i) => (live ? 0 : Math.min(i * 60, 420));
    const onlineTotal = k.online + k.ingame;
    const pubTotal = d.publicCount + d.privateCount;

    if (!cov.total && !k.total) {
      return '<div class="ssc-empty ssc-anim">' + (safeKey()
        ? '还没有好友缓存，点上方「刷新名单」或在好友数据页刷新后回来。'
        : '填写 Steam Web API Key 后才能读取好友名单与深度数据。') + '</div>';
    }

    const hero =
      heroCard({ icon: I.users, val: k.total, suffix: d.limit ? ' / ' + d.limit : '', lbl: '好友总数', sub: d.limit ? '上限随等级估算（Lv.' + d.ownLevel + '）' : '补齐等级后显示上限', g1: '#3b82f6', g2: '#60a5fa', pct: d.limit ? k.total / d.limit : null, delay: delay(0) }) +
      heroCard({ icon: I.activity, val: k.online, lbl: '当前在线', sub: '不含游戏中', g1: '#10b981', g2: '#34d399', delay: delay(1) }) +
      heroCard({ icon: I.gamepad, val: k.ingame, lbl: '游戏中', sub: k.ingame ? '正在开黑' : '此刻无人游戏中', g1: '#8b5cf6', g2: '#a78bfa', delay: delay(2) }) +
      heroCard({ icon: I.clock, val: Math.round(d.recent2wMinutes / 60), unit: '小时', lbl: '好友近2周总时长', sub: '已索引 ' + cov.recent + ' / ' + cov.total + ' 人', g1: '#f59e0b', g2: '#fbbf24', delay: delay(3) }) +
      heroCard({ icon: I.shield, val: d.publicCount, lbl: '数据公开好友', sub: '私密 ' + d.privateCount + ' 人', g1: '#ec4899', g2: '#f472b6', pct: pubTotal ? d.publicCount / pubTotal : null, delay: delay(4) });

    const gauges =
      gaugeCard({ lbl: '在线率', note: onlineTotal + '/' + k.total, pct: k.total ? onlineTotal / k.total : 0, color: '#22d3ee', delay: delay(5) }) +
      gaugeCard({ lbl: '游戏中占比', note: k.ingame + '/' + k.total, pct: k.total ? k.ingame / k.total : 0, color: '#a78bfa', delay: delay(6) }) +
      gaugeCard({ lbl: '好友位使用', note: d.limit ? k.total + '/' + d.limit : '需本人等级', pct: d.limit ? k.total / d.limit : 0, color: '#60a5fa', delay: delay(7) }) +
      gaugeCard({ lbl: '资料公开率', note: pubTotal ? d.publicCount + '/' + pubTotal : '待索引', pct: pubTotal ? d.publicCount / pubTotal : 0, color: '#34d399', delay: delay(8) });

    return '<div class="ssc-hero">' + hero + '</div>' +
      '<div class="ssc-gauges">' + gauges + '</div>' +
      '<div class="ssc-grid2">' + recentRankHtml(d, delay) + hotGamesHtml(d, delay) + '</div>' +
      '<div class="ssc-grid2b">' + heatHtml(d, delay) + friendsRankHtml(d, delay) + '</div>';
  }

  function recentRankHtml(d, delay) {
    const rows = d.recentRank;
    let body;
    if (!rows.length) {
      body = '<div class="ssc-empty">近2周暂无好友游玩记录。点上方「补齐深度数据」索引好友游戏库后出现（不会自动开始）。</div>';
    } else {
      const max = rows[0].minutes || 1;
      body = rows.map((row, i) => {
        const games = (row.topGames || []).map((game) => {
          const icon = game.icon
            ? '<img src="' + esc(game.icon) + '" alt="" loading="lazy" onerror="this.remove()">'
            : '<span style="width:16px;flex-shrink:0"></span>';
          return '<div class="ssc-rr-game">' + icon +
            '<span class="n">' + esc(game.name) + '</span>' +
            '<span class="gb"><i data-w="' + ((game.minutes / max) * 100).toFixed(1) + '"></i></span>' +
            '<b>' + hours(game.minutes) + '</b></div>';
        }).join('');
        const avatar = /^https:\/\//.test(row.avatar || '')
          ? '<img class="ssc-rr-av" src="' + esc(row.avatar) + '" alt="" loading="lazy" onerror="this.remove()">'
          : '';
        return '<div class="ssc-rr-row ssc-anim" style="animation-delay:' + delay(i + 9) + 'ms" data-sid="' + esc(row.steamid) + '" data-name="' + esc(row.name) + '" data-av="' + esc(row.avatar) + '">' +
          '<span class="ssc-medal' + (i < 3 ? ' m' + (i + 1) : '') + '">' + (i + 1) + '</span>' + avatar +
          '<div class="ssc-rr-main">' +
            '<div class="ssc-rr-top"><span class="ssc-rr-name">' + esc(row.name) + '</span>' +
              '<span class="ssc-rr-hours" data-cu="' + Math.round(row.minutes / 60) + '">0</span><span class="ssc-rr-unit">小时</span></div>' +
            games +
            '<div class="ssc-rr-bar"><i data-w="' + ((row.minutes / max) * 100).toFixed(1) + '"></i></div>' +
          '</div></div>';
      }).join('');
    }
    return '<div class="ssc-card ssc-anim" style="animation-delay:' + delay(8) + 'ms">' +
      '<div class="ssc-card-hd">' + I.trophy + '<b>最近好友游戏时长排行</b><span class="ssc-sub">近2周 · Top 10 · 点击进抽屉</span></div>' + body + '</div>';
  }

  function donutSegments(hotGames, totalMinutes) {
    const total = totalMinutes || 1;
    const segs = hotGames.map((game, i) => ({
      name: game.name, minutes: game.minutes, players: game.players, icon: game.icon,
      color: game.appid === 0 ? OTHER_COLOR : DONUT_COLORS[i % DONUT_COLORS.length],
      pct: (game.minutes / total) * 100,
    }));
    const used = segs.reduce((sum, seg) => sum + seg.pct, 0);
    if (segs.length && used < 99.5) segs.push({ name: '未计入', minutes: 0, players: 0, icon: '', color: OTHER_COLOR, pct: Math.max(0, 100 - used) });
    return segs;
  }

  function hotGamesHtml(d, delay) {
    let body;
    if (!d.hotGames.length) {
      body = '<div class="ssc-empty">还没有热门游戏数据。索引好友游戏库后，这里会汇总大家近2周在玩什么。</div>';
    } else {
      const segs = donutSegments(d.hotGames, d.hotTotalMinutes);
      let acc = 0;
      const circles = segs.map((seg, i) => {
        const len = Math.max(0.4, seg.pct - 0.6);
        const off = 25 - acc;
        acc += seg.pct;
        return '<circle class="ssc-seg" data-seg="' + i + '" cx="60" cy="60" r="46" pathLength="100" stroke="' + seg.color + '" stroke-dasharray="0.01 99.99" stroke-dashoffset="' + off.toFixed(2) + '" data-len="' + Math.min(99.9, len).toFixed(2) + '"></circle>';
      }).join('');
      const legend = segs.map((seg, i) => {
        const icon = seg.icon ? '<img class="ssc-lg-ico" src="' + esc(seg.icon) + '" alt="" loading="lazy" onerror="this.remove()">' : '';
        return '<div class="ssc-lg-row" data-seg="' + i + '">' +
          '<span class="ssc-lg-dot" style="background:' + seg.color + '"></span>' + icon +
          '<span class="ssc-lg-name">' + esc(seg.name) + '</span>' +
          '<span class="ssc-lg-meta">' + (seg.minutes ? hours(seg.minutes) + ' · ' + seg.players + '人' : '—') + '</span>' +
          '<span class="ssc-lg-pct">' + seg.pct.toFixed(1) + '%</span></div>';
      }).join('');
      body = '<div class="ssc-donut-wrap">' +
        '<div class="ssc-donut"><svg viewBox="0 0 120 120">' + circles + '</svg>' +
          '<div class="ssc-donut-center"><b data-cu="' + Math.round(d.hotTotalMinutes / 60) + '">0</b><span>小时 · 近2周<br>共 ' + d.hotKinds + ' 款</span></div>' +
        '</div>' +
        '<div class="ssc-legend">' + legend + '</div>' +
      '</div>';
    }
    return '<div class="ssc-card ssc-anim" style="animation-delay:' + delay(9) + 'ms">' +
      '<div class="ssc-card-hd">' + I.pie + '<b>热门游戏分布</b><span class="ssc-sub">近2周 · 按好友合计时长</span></div>' + body + '</div>';
  }

  function heatHtml(d, delay) {
    let body;
    if (!d.heat.rows.length) {
      body = '<div class="ssc-empty">热力图按天累积：每天索引/刷新后记录一次游玩快照，相邻两天差值即当日游戏时长。今天先跑一轮「补齐深度数据」。</div>';
    } else {
      const days = d.heat.days;
      const header = '<div class="ssc-heat-days"><span></span>' + days.map((day, i) =>
        '<span>' + (i % 2 ? '' : day.label) + '</span>').join('') + '</div>';
      const rows = d.heat.rows.map((row) => {
        const avatar = /^https:\/\//.test(row.avatar || '')
          ? '<img src="' + esc(row.avatar) + '" alt="" loading="lazy" onerror="this.remove()">'
          : '';
        const cells = row.cells.map((value) => {
          if (value == null) return '<span class="ssc-cell"></span>';
          const level = heatLevel(value, d.heat.max);
          const tip = esc(row.name) + (value ? ' · ' + hours(value) : ' · 无游玩');
          return '<span class="ssc-cell ' + level + '" title="' + tip + '"></span>';
        }).join('');
        return '<div class="ssc-heat-row" data-sid="' + esc(row.steamid) + '" data-name="' + esc(row.name) + '" data-av="' + esc(row.avatar) + '" title="打开 ' + esc(row.name) + ' 抽屉">' +
          '<div class="ssc-heat-name">' + avatar + '<span>' + esc(row.name) + '</span></div>' + cells + '</div>';
      }).join('');
      const legend = '<div class="ssc-heat-legend">少 <i class="v1"></i><i class="v2"></i><i class="v3"></i><i class="v4"></i><i class="v5"></i> 多</div>';
      body = '<div class="ssc-heat-scroll"><div class="ssc-heat">' + header + rows + '</div></div>' + legend;
    }
    return '<div class="ssc-card ssc-anim" style="animation-delay:' + delay(10) + 'ms">' +
      '<div class="ssc-card-hd">' + I.flame + '<b>好友游戏时长热力图</b><span class="ssc-sub">近 14 天 · 每日增量</span></div>' + body + '</div>';
  }

  function friendsRankHtml(d, delay) {
    let body;
    if (!d.friendsRank.length) {
      body = '<div class="ssc-empty">暂无缓存。在单人抽屉里查看过「共同好友」的好友会出现在这里（不自动扫描全员）。</div>';
    } else {
      const max = d.friendsRank[0].count || 1;
      body = d.friendsRank.map((row, i) =>
        '<div class="ssc-fr-row ssc-anim" style="animation-delay:' + delay(i + 11) + 'ms" data-sid="' + esc(row.steamid) + '" data-name="' + esc(row.name) + '" data-av="' + esc(row.avatar) + '">' +
          '<span class="ssc-fr-no">' + (i + 1) + '</span>' +
          (/^https:\/\//.test(row.avatar || '') ? '<img class="ssc-fr-av" src="' + esc(row.avatar) + '" alt="" loading="lazy" onerror="this.remove()">' : '') +
          '<span class="ssc-fr-name">' + esc(row.name) + '</span>' +
          '<span class="ssc-fr-bar"><i data-w="' + ((row.count / max) * 100).toFixed(1) + '"></i></span>' +
          '<span class="ssc-fr-val">' + row.count + '人</span>' +
        '</div>').join('');
    }
    return '<div class="ssc-card ssc-anim" style="animation-delay:' + delay(11) + 'ms">' +
      '<div class="ssc-card-hd">' + I.users + '<b>好友数排行</b><span class="ssc-sub">Top 10 · 好友总数</span></div>' + body + '</div>';
  }

  function animateDash(box, live) {
    box.querySelectorAll('[data-cu]').forEach((node) => {
      const target = Number(node.dataset.cu) || 0;
      if (live || REDUCED) {
        node.textContent = node.dataset.fmt === 'pct' ? String(target) : Math.round(target).toLocaleString('en-US');
      } else {
        countUp(node, target);
      }
    });
    box.querySelectorAll('.ssc-g-val').forEach((circle) => {
      const pct = Math.max(0, Math.min(1, Number(circle.dataset.pct) || 0));
      circle.setAttribute('stroke-dasharray', (75 * pct).toFixed(2) + ' ' + (100 - 75 * pct).toFixed(2));
    });
    requestAnimationFrame(() => {
      box.querySelectorAll('.ssc-seg').forEach((circle) => {
        const len = Number(circle.dataset.len) || 0;
        circle.setAttribute('stroke-dasharray', len.toFixed(2) + ' ' + (100 - len).toFixed(2));
      });
      box.querySelectorAll('[data-w]').forEach((bar) => {
        bar.style.width = Math.max(0, Math.min(100, Number(bar.dataset.w) || 0)) + '%';
      });
    });
  }

  function openFromDashRow(row) {
    if (!row) return;
    host.openFriend(row.dataset.sid || '', row.dataset.name || '', row.dataset.av || '');
  }

  function onDashClick(e) {
    if (e.target.closest('.ssc-lg-row')) return;
    openFromDashRow(e.target.closest('.ssc-rr-row, .ssc-heat-row, .ssc-fr-row'));
  }

  function onDashHover(e) {
    const row = e.target.closest('.ssc-lg-row');
    const seg = e.target.closest('.ssc-seg');
    const index = row ? row.dataset.seg : (seg ? seg.dataset.seg : null);
    if (index == null) return;
    const box = $('#ssc-dash');
    box.querySelectorAll('.ssc-seg').forEach((circle) => {
      circle.classList.toggle('ssc-hot', circle.dataset.seg === index);
      circle.classList.toggle('ssc-dim', circle.dataset.seg !== index);
    });
    box.querySelectorAll('.ssc-lg-row').forEach((node) => {
      node.classList.toggle('ssc-hot', node.dataset.seg === index);
    });
  }

  function onDashHoverOut(e) {
    if (e.target.closest('.ssc-lg-row') || e.target.closest('.ssc-seg')) {
      const box = $('#ssc-dash');
      box.querySelectorAll('.ssc-seg.ssc-dim,.ssc-seg.ssc-hot').forEach((circle) => circle.classList.remove('ssc-dim', 'ssc-hot'));
      box.querySelectorAll('.ssc-lg-row.ssc-hot').forEach((node) => node.classList.remove('ssc-hot'));
    }
  }

  // ==================== 好友排行页 ====================
  function renderRank(kind) {
    const data = core.rank(kind || 'days');
    const box = $('#ssc-rank');
    box.textContent = '';
    const stats = core.indexStats();
    const indexedKinds = kind === 'recent2w' || kind === 'gameCount' || kind === 'playtime';
    if (indexedKinds) {
      text('#ssc-index-count', '已索引 ' + data.indexed + ' / ' + data.total);
    } else if (!core.libraryJobState().running) {
      text('#ssc-index-count', '已索引 ' + stats.indexed + ' / ' + stats.total);
    }
    if (!data.rows.length) {
      const empty = document.createElement('div');
      empty.className = 'ssc-empty';
      empty.textContent = indexedKinds ? '还没有可排的索引数据。点「补齐索引」才会请求游戏库。' : '还没有好友名单。';
      box.appendChild(empty);
      return;
    }
    const max = data.rows.length && data.rows[0].value != null ? data.rows[0].value : 0;
    data.rows.slice(0, 50).forEach((row, index) => {
      const line = document.createElement('div');
      line.className = 'ssc-rank-row ssc-anim';
      line.style.animationDelay = Math.min(index * 40, 320) + 'ms';
      const pct = max > 0 && row.value != null ? Math.max(2, (row.value / max) * 100) : 0;
      line.innerHTML =
        '<span class="ssc-medal' + (index < 3 ? ' m' + (index + 1) : '') + '">' + (index + 1) + '</span>' +
        (/^https:\/\//.test(row.avatar || '') ? '<img class="ssc-fr-av" src="' + esc(row.avatar) + '" alt="" loading="lazy" onerror="this.remove()">' : '') +
        '<span class="ssc-rk-name">' + esc(row.name) + '</span>' +
        '<span class="ssc-fr-bar"><i data-w="' + pct.toFixed(1) + '"></i></span>' +
        '<span class="ssc-rk-val">' + esc(row.label) + '</span>';
      const openBtn = document.createElement('button');
      openBtn.type = 'button';
      openBtn.className = 'ssc-btn';
      openBtn.textContent = '查看';
      openBtn.addEventListener('click', () => host.openFriend(row.steamid, row.name, row.avatar || ''));
      line.appendChild(openBtn);
      box.appendChild(line);
    });
    animateBars(box);
  }

  // ==================== 游戏比对页 ====================
  function indexedPeople() {
    const roster = core.loadRoster();
    const people = [];
    const self = host.getMySteamId();
    if (self && core.peekGames(self)) {
      people.push({ steamid: self, personaname: '我', avatar: (roster && roster.own && roster.own.avatar) || '' });
    }
    ((roster && roster.friends) || []).forEach((friend) => {
      if (core.peekGames(friend.steamid)) people.push(friend);
    });
    return people;
  }

  function fillCompareSources() {
    const people = indexedPeople();
    const self = host.getMySteamId();
    const pair = $('#ssc-pair');
    const many = $('#ssc-many');
    pair.textContent = '';
    many.textContent = '';
    const friends = people.filter((person) => person.steamid !== self);
    if (!friends.length) {
      const opt = document.createElement('option');
      opt.textContent = '还没有已索引的好友';
      opt.value = '';
      pair.appendChild(opt);
    }
    friends.forEach((friend) => {
      const opt = document.createElement('option');
      opt.value = friend.steamid;
      opt.textContent = friend.personaname || friend.steamid;
      pair.appendChild(opt);
    });
    people.forEach((person) => {
      const label = document.createElement('label');
      const input = document.createElement('input');
      input.type = 'checkbox';
      input.value = person.steamid;
      input.checked = comparePick.indexOf(person.steamid) !== -1;
      input.addEventListener('change', () => {
        const checked = Array.from(many.querySelectorAll('input:checked')).map((node) => node.value);
        if (checked.length > 4) {
          input.checked = false;
          toast('最多选择 4 人', 'warn');
          return;
        }
        comparePick = checked;
      });
      label.appendChild(input);
      label.appendChild(document.createTextNode(' ' + (person.personaname || person.steamid)));
      many.appendChild(label);
    });
    if (!people.length) {
      const tip = document.createElement('div');
      tip.className = 'ssc-note';
      tip.textContent = '索引完成后，这里才会出现可以比对的人。';
      many.appendChild(tip);
    }
  }

  function renderPair() {
    const friendId = $('#ssc-pair').value;
    const out = $('#ssc-pair-out');
    out.textContent = '';
    const self = host.getMySteamId();
    if (!self || !core.peekGames(self)) {
      out.textContent = '你的游戏库还没有索引。到排行页点「补齐索引」，或先打开一次我的游戏库。';
      return;
    }
    if (!friendId) {
      out.textContent = '选择一个已索引的好友。';
      return;
    }
    const cmp = core.comparePair(self, friendId);
    if (!cmp) {
      out.textContent = '这个好友还没有游戏库索引。';
      return;
    }
    out.appendChild(statLine('都有 ' + cmp.sharedCount + ' · 我独有 ' + cmp.myOnlyCount + ' · 他独有 ' + cmp.friendOnlyCount));
    out.appendChild(statLine('总时长 ' + hours(cmp.myTotalMinutes) + ' / ' + hours(cmp.friendTotalMinutes)));
    cmp.shared.slice().sort((a, b) => (b.myPlaytime + b.friendPlaytime) - (a.myPlaytime + a.friendPlaytime)).slice(0, 30)
      .forEach((game) => out.appendChild(statLine(game.name + ' · 我 ' + hours(game.myPlaytime) + ' / 他 ' + hours(game.friendPlaytime))));
  }

  function renderMany() {
    const out = $('#ssc-many-out');
    out.textContent = '';
    const ids = comparePick.slice(0, 4);
    if (ids.length < 2) {
      out.textContent = '至少选择 2 人。';
      return;
    }
    const cmp = core.compareMany(ids);
    if (cmp.missing && cmp.missing.length) {
      out.appendChild(statLine('有 ' + cmp.missing.length + ' 人没有索引，未计入。'));
    }
    out.appendChild(statLine('共同游戏 ' + cmp.count));
    (cmp.games || []).slice(0, 30).forEach((game) => {
      const bits = (cmp.people || []).map((person) => (person.name + ' ' + hours(game.playtimes[person.steamid] || 0)));
      out.appendChild(statLine(game.name + ' · ' + bits.join(' / ')));
    });
  }

  function renderGameSuggest() {
    const q = $('#ssc-game-q').value;
    const box = $('#ssc-game-suggest');
    box.textContent = '';
    core.searchGames(q, 8).forEach((game) => {
      const btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'ssc-btn';
      btn.textContent = game.name + ' (' + game.appid + ')';
      btn.addEventListener('click', () => renderGameRank(game.appid));
      box.appendChild(btn);
    });
  }

  function renderGameRank(appid) {
    const data = core.rankGame(appid);
    const out = $('#ssc-game-out');
    out.textContent = '';
    out.appendChild(statLine((data.name || ('App ' + appid)) + ' · 已索引 ' + data.indexed + ' / ' + data.total));
    if (!data.rows.length) {
      out.appendChild(statLine('已索引的好友里没有人拥有这款游戏。'));
      return;
    }
    data.rows.slice(0, 40).forEach((row, index) => {
      out.appendChild(statLine((index + 1) + '. ' + row.name + ' · ' + hours(row.minutes)));
    });
  }

  function statLine(value) {
    const node = document.createElement('div');
    node.textContent = value;
    return node;
  }

  root.SteamSocialCenter = {
    version: VERSION,
    apiVersion: API_VERSION,
    init,
    open,
    close,
    isOpen,
  };
})(typeof window !== 'undefined' ? window : globalThis);