// ==UserScript==
// @name         Steam Social Center
// @namespace    https://github.com/SmallRob/steam-userscripts
// @version      2.3.0
// @description  社交中心界面。对照宿主 steam-activity-modern 4.13.0。深度大盘右侧自上而下为热门游戏、好友数排行、热力图贴底，内容撑满视口。游戏比对三栏铺满到底，头部图标撑满图标章。样式前缀 .ssc-，不改主脚本 .sf- 样式。
// @author       SmallFork & SmallRob
// @license      MIT
// ==/UserScript==

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

  const VERSION = '2.3.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>',
    user: '<svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>',
    venn: '<svg viewBox="0 0 24 24"><circle cx="9" cy="12" r="6.5"/><circle cx="15" cy="12" r="6.5"/></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 2 24 20"><rect x="1" y="3" width="22" height="18" rx="9"/><line x1="6.5" y1="12" x2="10.5" y2="12"/><line x1="8.5" y1="10" x2="8.5" y2="14"/><line x1="15.5" y1="13.2" x2="15.51" y2="13.2"/><line x1="18.5" y1="10.8" x2="18.51" y2="10.8"/></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-root>.ssc-boot{position:absolute;z-index:10}
/* ---- 顶栏 ---- */
.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:16px 22px 10px}
.ssc-page{flex:1;min-height:0;display:none;flex-direction:column;gap:14px}
.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:2px 6px 6px 2px}
.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-page[data-page=dash] .ssc-scroll{display:flex;flex-direction:column}
.ssc-dash-inner{flex:1 0 auto;width:100%;min-height:100%;margin:0;display:flex;flex-direction:column;gap:14px;box-sizing:border-box}
.ssc-dash-stage{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1.22fr) minmax(380px,.86fr);gap:14px;align-items:stretch;min-height:0}
.ssc-dash-main,.ssc-dash-side{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:100%}
.ssc-dash-main>.ssc-card{flex:1 1 auto;min-height:0}
.ssc-dash-side>.ssc-card[data-card=hot]{flex:0 0 auto}
.ssc-dash-side>.ssc-card[data-card=fcount]{flex:1 1 auto;min-height:0}
.ssc-dash-side>.ssc-card[data-card=heat]{flex:0 0 auto;margin-top:auto}
.ssc-side-card{display:flex;flex-direction:column;min-height:0}
.ssc-side-body{flex:1;min-height:0;display:flex;flex-direction:column}
.ssc-page[data-page=dash] .ssc-tools{background:linear-gradient(160deg,rgba(148,163,184,.07),rgba(148,163,184,.02));border:1px solid rgba(148,163,184,.12);border-radius:12px;padding:10px 14px}
/* ---- 通用卡片 / 工具 ---- */
.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:14px}
.ssc-hero-card{display:flex;align-items:center;gap:13px;padding:16px 17px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.ssc-hero-card:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.3);box-shadow:0 8px 24px rgba(0,0,0,.28)}
.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:14px}
.ssc-gauge{display:flex;flex-direction:column;align-items:center;padding:14px 12px 16px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.ssc-gauge:hover{transform:translateY(-2px);border-color:rgba(34,211,238,.28);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.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:14px;align-items:start}
.ssc-grid2b{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:14px;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:0}
.ssc-heat-scroll{overflow-x:auto;scrollbar-width:thin}
.ssc-heat-days{display:grid;grid-template-columns:104px repeat(14,minmax(10px,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:104px repeat(14,minmax(10px,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-fr-skel{display:flex;align-items:center;gap:9px;padding:7px 8px}
.ssc-fr-skel i{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,rgba(148,163,184,.08),rgba(148,163,184,.2),rgba(148,163,184,.08));background-size:220% 100%;animation:ssc-shimmer 1.15s ease-in-out infinite}
@keyframes ssc-shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
.ssc-fr-wait{padding:8px 4px 2px;font-size:11.5px;color:#8fa1b8;line-height:1.5}
/* ---- 好友数据页 ---- */
.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-page[data-page=compare]{min-height:0;overflow:hidden}
.ssc-split{display:grid;grid-template-columns:minmax(0,10fr) minmax(0,11fr) minmax(0,9fr);grid-template-rows:minmax(0,1fr);gap:14px;min-height:0;flex:1;align-items:stretch}
.ssc-cmp-card{display:flex;flex-direction:column;gap:10px;padding:14px 16px;min-height:0;height:100%;overflow:hidden}
.ssc-cmp-card .ssc-field select,.ssc-cmp-card .ssc-field input{width:100%;box-sizing:border-box}
.ssc-cmp-hd{display:flex;align-items:center;gap:10px;margin:0;flex-shrink:0}
.ssc-cmp-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.ssc-cmp-ico svg{width:34px;height:34px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ssc-cmp-hd .t{flex:1;min-width:0}
.ssc-cmp-hd b{display:block;font-size:14px;font-weight:800;color:#f1f5f9}
.ssc-cmp-hd span{display:block;font-size:10.5px;color:#7d8aa0;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssc-cmp-kpis{display:flex;flex-wrap:wrap;gap:6px}
.ssc-cmp-kpi{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:9px;border:1px solid rgba(148,163,184,.14);background:rgba(148,163,184,.05);font-size:11px;color:#c9d5e3;white-space:nowrap}
.ssc-cmp-kpi b{font-size:13px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.ssc-cmp-kpi svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;flex-shrink:0}
.ssc-cmp-kpi.blue{color:#7dd3fc}
.ssc-cmp-kpi.green{color:#6ee7b7}
.ssc-cmp-kpi.rose{color:#fda4af}
.ssc-cmp-kpi.amber{color:#fcd34d}
.ssc-cmp-overlap{display:flex;height:10px;border-radius:6px;overflow:hidden;background:rgba(148,163,184,.1)}
.ssc-cmp-overlap i{display:block;height:100%;transition:width .9s cubic-bezier(.22,1,.36,1)}
.ssc-cmp-overlap i.mine{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.ssc-cmp-overlap i.shared{background:linear-gradient(90deg,#10b981,#34d399)}
.ssc-cmp-overlap i.theirs{background:linear-gradient(90deg,#f43f5e,#fb7185)}
.ssc-cmp-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:10.5px;color:#94a3b8}
.ssc-cmp-legend i{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.ssc-cmp-legend b{color:#e2e8f0;font-weight:700}
.ssc-cmp-people{display:flex;gap:6px;flex-wrap:wrap}
.ssc-cmp-person{display:flex;align-items:center;gap:6px;padding:4px 9px 4px 4px;border-radius:999px;border:1px solid rgba(148,163,184,.14);background:rgba(148,163,184,.06);font-size:11px;color:#e2e8f0;max-width:100%}
.ssc-cmp-person img{width:20px;height:20px;border-radius:50%;object-fit:cover;background:#1e293b;flex-shrink:0}
.ssc-cmp-person span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssc-cmp-list{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;padding-right:2px}
.ssc-cmp-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:10px;background:rgba(148,163,184,.045);border:1px solid rgba(148,163,184,.08);transition:all .18s ease;text-decoration:none!important;color:inherit!important;cursor:pointer}
.ssc-cmp-row:hover{border-color:rgba(34,211,238,.4);background:rgba(34,211,238,.06);transform:translateX(2px)}
.ssc-cmp-gico,.ssc-cmp-gico-big,.ssc-cmp-sug img{display:block;object-fit:cover;object-position:center;flex-shrink:0;background:#16202e}
.ssc-cmp-gico{width:68px;height:26px;border-radius:4px}
.ssc-cmp-gico-big{width:128px;height:48px;border-radius:6px}
.ssc-cmp-main{flex:1;min-width:0}
.ssc-cmp-name{font-size:12px;font-weight:600;color:#f1f5f9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px}
.ssc-cmp-bars{display:flex;flex-direction:column;gap:2px}
.ssc-cmp-bar{display:flex;align-items:center;gap:6px;font-size:10px;color:#8fa1b8}
.ssc-cmp-bar .k{width:34px;flex-shrink:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssc-cmp-bar .b{flex:1;height:5px;border-radius:3px;background:rgba(148,163,184,.12);overflow:hidden;min-width:20px}
.ssc-cmp-bar .b i{display:block;height:100%;border-radius:3px;width:0;transition:width .7s cubic-bezier(.22,1,.36,1)}
.ssc-cmp-bar .h{width:46px;text-align:right;font-variant-numeric:tabular-nums;color:#cbd5e1;flex-shrink:0}
.ssc-cmp-bar .b i.c1{background:linear-gradient(90deg,#22d3ee,#3b82f6)}
.ssc-cmp-bar .b i.c2{background:linear-gradient(90deg,#a78bfa,#f472b6)}
.ssc-cmp-bar .b i.c3{background:linear-gradient(90deg,#34d399,#22d3ee)}
.ssc-cmp-bar .b i.c4{background:linear-gradient(90deg,#fbbf24,#fb7185)}
.ssc-cmp-rank-no{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;background:rgba(148,163,184,.13);color:#94a3b8;flex-shrink:0;font-variant-numeric:tabular-nums}
.ssc-cmp-rank-no.m1{background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff;box-shadow:0 0 10px rgba(251,191,36,.35)}
.ssc-cmp-rank-no.m2{background:linear-gradient(135deg,#cbd5e1,#64748b);color:#fff}
.ssc-cmp-rank-no.m3{background:linear-gradient(135deg,#d97706,#92400e);color:#fff}
.ssc-cmp-av{width:24px;height:24px;border-radius:50%;object-fit:cover;background:#1e293b;flex-shrink:0}
.ssc-cmp-ghead{display:flex;align-items:center;gap:9px;padding:8px;border-radius:10px;background:rgba(148,163,184,.05);border:1px solid rgba(148,163,184,.1)}
.ssc-cmp-ghead .t{flex:1;min-width:0}
.ssc-cmp-ghead b{font-size:13px;font-weight:800;color:#f1f5f9;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssc-cmp-ghead span{font-size:10.5px;color:#7d8aa0;margin-top:2px;display:block}
.ssc-cmp-checks{overflow:auto;flex:0 1 auto;min-height:0;max-height:46%;display:flex;flex-direction:column;gap:3px;font-size:12px;padding-right:2px;scrollbar-width:thin}
.ssc-cmp-checks label{display:flex;align-items:center;gap:7px;padding:4px 7px;border-radius:8px;cursor:pointer;transition:background .15s ease;color:#c9d5e3;min-width:0}
.ssc-cmp-checks label:hover{background:rgba(148,163,184,.08)}
.ssc-cmp-checks label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssc-cmp-checks input{accent-color:#22d3ee;flex-shrink:0}
.ssc-cmp-checks img{width:18px;height:18px;border-radius:50%;object-fit:cover;background:#1e293b;flex-shrink:0}
.ssc-cmp-sug{display:flex;flex-direction:column;gap:5px;max-height:150px;overflow:auto;scrollbar-width:thin;padding-right:2px}
.ssc-cmp-sug .ssc-btn{display:flex;align-items:center;gap:7px;justify-content:flex-start;padding:5px 8px;font-weight:600;text-align:left;min-width:0}
.ssc-cmp-sug .ssc-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssc-cmp-sug .ssc-btn b{margin-left:auto;color:#7d8aa0;font-size:10px;flex-shrink:0}
.ssc-cmp-sug img{width:68px;height:26px;border-radius:4px}
.ssc-cmp-note{font-size:11.5px;color:#8fa1b8;line-height:1.6}
/* ---- 响应式 ---- */
@media(max-width:1100px){.ssc-hero{grid-template-columns:repeat(3,minmax(0,1fr))}.ssc-gauges{grid-template-columns:repeat(2,minmax(0,1fr))}.ssc-dash-stage{grid-template-columns:1fr}.ssc-split{grid-template-columns:1fr 1fr}.ssc-split>div:last-child{grid-column:1/-1}}
@media(max-width:900px){.ssc-grid2,.ssc-grid2b,.ssc-dash-stage{grid-template-columns:1fr}.ssc-split{grid-template-columns:1fr}.ssc-body{padding:12px 14px 10px}.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}.ssc-page{gap:12px}.ssc-dash-inner,.ssc-dash-stage,.ssc-dash-main,.ssc-dash-side{gap:12px}}
@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;
  let fcountTickAt = 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 ssc-cmp-card">
              <div class="ssc-cmp-hd"><span class="ssc-cmp-ico" style="background:linear-gradient(135deg,#22d3ee,#3b82f6);box-shadow:0 4px 14px rgba(34,211,238,.3)">${I.venn}</span><div class="t"><b>一对一</b><span>我和 TA 的库存交集 · 时长对比</span></div></div>
              <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-cmp-list" id="ssc-pair-out"></div>
            </div>
            <div class="ssc-card ssc-cmp-card">
              <div class="ssc-cmp-hd"><span class="ssc-cmp-ico" style="background:linear-gradient(135deg,#a78bfa,#f472b6);box-shadow:0 4px 14px rgba(167,139,250,.3)">${I.users}</span><div class="t"><b>2–4 人交集</b><span>勾选好友，找出大家共有的游戏</span></div></div>
              <div class="ssc-cmp-checks" id="ssc-many"></div>
              <button class="ssc-btn ssc-primary" id="ssc-many-go" type="button">看交集</button>
              <div class="ssc-cmp-list" id="ssc-many-out"></div>
            </div>
            <div class="ssc-card ssc-cmp-card">
              <div class="ssc-cmp-hd"><span class="ssc-cmp-ico" style="background:linear-gradient(135deg,#34d399,#22d3ee);box-shadow:0 4px 14px rgba(52,211,153,.3)">${I.gamepad}</span><div class="t"><b>单游戏时长</b><span>一款游戏，谁玩得最久</span></div></div>
              <div class="ssc-field"><input id="ssc-game-q" type="search" placeholder="游戏名或 AppID" /></div>
              <div class="ssc-cmp-sug" id="ssc-game-suggest"></div>
              <div class="ssc-cmp-list" 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') {
      ensureFriendCounts();
      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();
    if (safeKey() && core.loadRoster()) ensureFriendCounts();
    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);
    ensureFriendCounts();
    return true;
  }

  function close() {
    if (!opened && !rootEl) return;
    opened = false;
    if (core) {
      try { core.pauseLevelJob(); } catch (e) { /* 无任务 */ }
      try { core.pauseLibraryIndexJob(); } catch (e) { /* 无任务 */ }
      try { core.pauseFriendCountJob(); } 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);
      ensureFriendCounts();
      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-dash-inner"><div class="ssc-hero">' + hero + '</div>' +
      '<div class="ssc-gauges">' + gauges + '</div>' +
      '<div class="ssc-dash-stage">' +
        '<div class="ssc-dash-main">' + recentRankHtml(d, delay) + '</div>' +
        '<div class="ssc-dash-side">' + hotGamesHtml(d, delay) + friendsRankHtml(d, delay) + heatHtml(d, delay) + '</div>' +
      '</div></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-side-card ssc-anim" data-card="hot" style="animation-delay:' + delay(9) + 'ms">' +
      '<div class="ssc-card-hd">' + I.pie + '<b>热门游戏分布</b><span class="ssc-sub">近2周 · 按好友合计时长</span></div>' +
      '<div class="ssc-side-body">' + body + '</div></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-side-card ssc-anim" data-card="heat" style="animation-delay:' + delay(10) + 'ms">' +
      '<div class="ssc-card-hd">' + I.flame + '<b>好友游戏时长热力图</b><span class="ssc-sub">近 14 天 · 每日增量</span></div>' +
      '<div class="ssc-side-body">' + body + '</div></div>';
  }

  function friendRankSkeleton() {
    let html = '';
    for (let i = 0; i < 8; i++) {
      const w = 42 + ((i * 13) % 38);
      html += '<div class="ssc-fr-skel" aria-hidden="true"><i style="width:16px"></i><i style="width:22px;height:22px;border-radius:50%"></i><i style="flex:1;max-width:' + w + '%"></i><i style="width:40px"></i></div>';
    }
    return html;
  }

  function friendsRankHtml(d, delay) {
    const job = core.friendCountJobState ? core.friendCountJobState() : { running: false, known: 0, rosterTotal: 0 };
    const rows = d.friendsRank;
    const incomplete = job.rosterTotal > 0 && job.known < job.rosterTotal;
    const settled = !job.running && job.total > 0 && job.done >= job.total;
    const loading = !rows.length && !!safeKey() && incomplete && !settled;
    let sub = '好友总数';
    if (job.running) sub = '后台读取 ' + job.known + ' / ' + job.rosterTotal;
    else if (rows.length) sub = 'Top ' + rows.length + (job.rosterTotal ? ' · 已缓存 ' + job.known + '/' + job.rosterTotal : '');
    else if (job.rosterTotal) sub = '已缓存 ' + job.known + ' / ' + job.rosterTotal;
    let body;
    if (rows.length) {
      const max = rows[0].count || 1;
      body = rows.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('');
    } else if (loading) {
      body = friendRankSkeleton() + '<div class="ssc-fr-wait">正在后台读取好友数，已有结果会立刻出现在这里。</div>';
    } else if (!safeKey()) {
      body = '<div class="ssc-fr-wait">填写 Steam Web API Key 后，打开大盘会在后台补齐好友数。</div>';
    } else {
      body = '<div class="ssc-fr-wait">这批好友的好友列表都未公开，排行会在有人公开后自动补上。</div>';
    }
    return '<div class="ssc-card ssc-side-card ssc-anim" data-card="fcount" style="animation-delay:' + delay(11) + 'ms">' +
      '<div class="ssc-card-hd">' + I.users + '<b>好友数排行</b><span class="ssc-sub">' + esc(sub) + '</span></div>' +
      '<div class="ssc-side-body">' + body + '</div></div>';
  }

  function ensureFriendCounts() {
    if (!safeKey() || !core.loadRoster() || typeof core.startFriendCountJob !== 'function') return;
    try { core.startFriendCountJob(onFriendCount); } catch (e) { /* 无 Key 或名单时跳过 */ }
  }

  function onFriendCount(state) {
    if (!rootEl || !opened || page !== 'dash') return;
    const now = Date.now();
    if (state.phase !== 'done' && now - fcountTickAt < 900) return;
    fcountTickAt = now;
    const box = $('#ssc-dash');
    const card = box && box.querySelector('[data-card="fcount"]');
    if (!card) { renderDash(true); return; }
    const html = friendsRankHtml(core.dashAggregate(), () => 0);
    const holder = document.createElement('div');
    holder.innerHTML = html;
    const next = holder.firstElementChild;
    if (!next) return;
    card.replaceWith(next);
    animateDash(next, true);
  }

  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);
  }

  // ==================== 游戏比对页 ====================
  const GAME_CAP = 'https://cdn.cloudflare.steamstatic.com/steam/apps/';
  const GAME_ICON_FALLBACK = 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="92" height="35"><rect width="92" height="35" rx="6" fill="#16202e"/><path d="M46 8l8 6v9l-8 5-8-5v-9z" fill="none" stroke="#475569" stroke-width="2" stroke-linejoin="round"/></svg>').replace(/'/g, '%27');

  function gameIconHtml(appid, cls) {
    const id = Number(appid);
    if (!id) return '';
    const url = GAME_CAP + id + '/capsule_231x87.jpg';
    return '<img class="' + (cls || 'ssc-cmp-gico') + '" src="' + url + '" alt="" loading="lazy" onerror="this.onerror=null;this.src=\'' + GAME_ICON_FALLBACK + '\'">';
  }

  function avatarOf(steamid) {
    const roster = core.loadRoster();
    if (roster && roster.own && roster.own.avatar && steamid === host.getMySteamId()) return roster.own.avatar || '';
    const hit = ((roster && roster.friends) || []).find((friend) => friend.steamid === steamid);
    return hit ? hit.avatar || '' : '';
  }

  function noteDiv(value) {
    const node = document.createElement('div');
    node.className = 'ssc-cmp-note';
    node.textContent = value;
    return node;
  }

  function chipHtml(icon, tone, label) {
    return '<span class="ssc-cmp-kpi ' + tone + '">' + icon + '<span>' + label + '</span></span>';
  }

  function barHtml(key, color, minutes, max) {
    const pct = max ? Math.max(0, Math.min(100, minutes / max * 100)) : 0;
    return '<div class="ssc-cmp-bar"><span class="k">' + esc(key) + '</span><span class="b"><i class="' + color + '" data-w="' + pct.toFixed(1) + '"></i></span><span class="h">' + hours(minutes) + '</span></div>';
  }

  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);
      const avatar = avatarOf(person.steamid);
      if (/^https:\/\//.test(avatar)) {
        const img = document.createElement('img');
        img.src = avatar;
        img.alt = '';
        label.appendChild(img);
      }
      const name = document.createElement('span');
      name.textContent = person.personaname || person.steamid;
      label.appendChild(name);
      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.appendChild(noteDiv('你的游戏库还没有索引。到排行页点「补齐索引」，或先打开一次我的游戏库。'));
      return;
    }
    if (!friendId) {
      out.appendChild(noteDiv('选择一个已索引的好友。'));
      return;
    }
    const cmp = core.comparePair(self, friendId);
    if (!cmp) {
      out.appendChild(noteDiv('这个好友还没有游戏库索引。'));
      return;
    }

    // KPI 徽章
    const kpis = document.createElement('div');
    kpis.className = 'ssc-cmp-kpis';
    kpis.innerHTML =
      chipHtml(I.venn, 'green', '共同 <b>' + cmp.sharedCount + '</b>') +
      chipHtml(I.user, 'blue', '我独有 <b>' + cmp.myOnlyCount + '</b>') +
      chipHtml(I.user, 'rose', 'TA 独有 <b>' + cmp.friendOnlyCount + '</b>') +
      chipHtml(I.clock, 'amber', '时长 我 <b>' + hours(cmp.myTotalMinutes) + '</b> · TA <b>' + hours(cmp.friendTotalMinutes) + '</b>');
    out.appendChild(kpis);

    // 库存重叠比例条
    const total = cmp.myOnlyCount + cmp.sharedCount + cmp.friendOnlyCount || 1;
    const ov = document.createElement('div');
    ov.className = 'ssc-cmp-overlap';
    ov.innerHTML =
      '<i class="mine" data-w="' + (cmp.myOnlyCount / total * 100).toFixed(1) + '"></i>' +
      '<i class="shared" data-w="' + (cmp.sharedCount / total * 100).toFixed(1) + '"></i>' +
      '<i class="theirs" data-w="' + (cmp.friendOnlyCount / total * 100).toFixed(1) + '"></i>';
    out.appendChild(ov);
    const lg = document.createElement('div');
    lg.className = 'ssc-cmp-legend';
    lg.innerHTML =
      '<span><i style="background:#3b82f6"></i>我独有 <b>' + cmp.myOnlyCount + '</b></span>' +
      '<span><i style="background:#10b981"></i>共同 <b>' + cmp.sharedCount + '</b></span>' +
      '<span><i style="background:#f43f5e"></i>TA 独有 <b>' + cmp.friendOnlyCount + '</b></span>';
    out.appendChild(lg);

    // 共同游戏行（图标 + 双时长条）
    const shared = cmp.shared.slice().sort((a, b) => (b.myPlaytime + b.friendPlaytime) - (a.myPlaytime + a.friendPlaytime)).slice(0, 30);
    if (!shared.length) {
      out.appendChild(noteDiv('没有共同游戏，去看看 TA 独有哪些好货吧。'));
    } else {
      const max = Math.max(1, shared[0].myPlaytime + shared[0].friendPlaytime);
      shared.forEach((game) => {
        const row = document.createElement('a');
        row.className = 'ssc-cmp-row';
        row.href = 'https://store.steampowered.com/app/' + game.appid;
        row.target = '_blank';
        row.rel = 'noopener';
        row.innerHTML = gameIconHtml(game.appid) +
          '<div class="ssc-cmp-main"><div class="ssc-cmp-name">' + esc(game.name || ('App ' + game.appid)) + '</div>' +
            '<div class="ssc-cmp-bars">' +
              barHtml('我', 'c1', game.myPlaytime, max) +
              barHtml('TA', 'c2', game.friendPlaytime, max) +
            '</div></div>';
        out.appendChild(row);
      });
    }
    animateBars(out);
  }

  function renderMany() {
    const out = $('#ssc-many-out');
    out.textContent = '';
    const ids = comparePick.slice(0, 4);
    if (ids.length < 2) {
      out.appendChild(noteDiv('至少选择 2 人。'));
      return;
    }
    const cmp = core.compareMany(ids);
    const people = cmp.people || [];
    if (cmp.missing && cmp.missing.length) {
      out.appendChild(noteDiv('有 ' + cmp.missing.length + ' 人没有索引，未计入。'));
    }

    // 人员头像徽章
    const chips = document.createElement('div');
    chips.className = 'ssc-cmp-people';
    people.forEach((person) => {
      const chip = document.createElement('span');
      chip.className = 'ssc-cmp-person';
      const avatar = avatarOf(person.steamid);
      chip.innerHTML = (/^https:\/\//.test(avatar) ? '<img src="' + esc(avatar) + '" alt="" loading="lazy" onerror="this.remove()">' : '') +
        '<span>' + esc(person.name || person.steamid) + '</span>';
      chips.appendChild(chip);
    });
    out.appendChild(chips);

    const kpi = document.createElement('div');
    kpi.className = 'ssc-cmp-kpis';
    kpi.innerHTML = chipHtml(I.venn, 'green', '共同游戏 <b>' + cmp.count + '</b>');
    out.appendChild(kpi);

    if (!cmp.count) {
      out.appendChild(noteDiv('这几位好友没有共有的游戏。'));
      return;
    }
    let max = 1;
    cmp.games.forEach((game) => {
      Object.keys(game.playtimes).forEach((key) => { max = Math.max(max, game.playtimes[key] || 0); });
    });
    cmp.games.slice(0, 20).forEach((game) => {
      const row = document.createElement('a');
      row.className = 'ssc-cmp-row';
      row.href = 'https://store.steampowered.com/app/' + game.appid;
      row.target = '_blank';
      row.rel = 'noopener';
      row.innerHTML = gameIconHtml(game.appid) +
        '<div class="ssc-cmp-main"><div class="ssc-cmp-name">' + esc(game.name || ('App ' + game.appid)) + '</div>' +
          '<div class="ssc-cmp-bars">' + people.map((person, index) =>
            barHtml(person.name || person.steamid, 'c' + ((index % 4) + 1), game.playtimes[person.steamid] || 0, max)).join('') +
          '</div></div>';
      out.appendChild(row);
    });
    animateBars(out);
  }

  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.innerHTML = gameIconHtml(game.appid) + '<span>' + esc(game.name) + '</span><b>' + game.appid + '</b>';
      btn.addEventListener('click', () => renderGameRank(game.appid));
      box.appendChild(btn);
    });
  }

  function renderGameRank(appid) {
    const data = core.rankGame(appid);
    const out = $('#ssc-game-out');
    out.textContent = '';
    // 游戏头部（大图标 + 索引统计）
    const head = document.createElement('div');
    head.className = 'ssc-cmp-ghead';
    head.innerHTML = gameIconHtml(appid, 'ssc-cmp-gico-big') +
      '<div class="t"><b>' + esc(data.name || ('App ' + appid)) + '</b><span>已索引 ' + data.indexed + ' / ' + data.total + ' 位好友</span></div>';
    out.appendChild(head);
    if (!data.rows.length) {
      out.appendChild(noteDiv('已索引的好友里没有人拥有这款游戏。'));
      return;
    }
    const max = data.rows[0].minutes || 1;
    data.rows.slice(0, 40).forEach((row, index) => {
      const item = document.createElement('div');
      item.className = 'ssc-cmp-row';
      item.title = '打开 ' + row.name + ' 抽屉';
      const avatar = avatarOf(row.steamid);
      item.innerHTML =
        '<span class="ssc-cmp-rank-no' + (index < 3 ? ' m' + (index + 1) : '') + '">' + (index + 1) + '</span>' +
        (/^https:\/\//.test(avatar) ? '<img class="ssc-cmp-av" src="' + esc(avatar) + '" alt="" loading="lazy" onerror="this.remove()">' : '') +
        '<div class="ssc-cmp-main"><div class="ssc-cmp-name">' + esc(row.name) + '</div>' +
          '<div class="ssc-cmp-bar"><span class="b"><i class="c1" data-w="' + (Math.max(0, Math.min(100, row.minutes / max * 100))).toFixed(1) + '"></i></span><span class="h">' + hours(row.minutes) + '</span></div>' +
        '</div>';
      item.addEventListener('click', () => host.openFriend(row.steamid, row.name, avatar));
      out.appendChild(item);
    });
    animateBars(out);
  }

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