/* ===== 侧栏面板（战绩 / 牌谱）===== */
        .side-panel { position: fixed; top: 0; left: 0; bottom: 0; width: 84%; max-width: 380px; z-index: 180;
            background: linear-gradient(160deg,#1b2740,#0e1626); color: #e7eefb; padding: 16px;
            box-shadow: 6px 0 30px rgba(0,0,0,0.5); overflow-y: auto; }
        .sp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 17px; }
        .sp-head button { background: none; border: none; color: #9fb0cc; font-size: 20px; cursor: pointer; }
        .sp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .sp-table th { text-align: left; color: #7e90b0; font-weight: normal; padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .sp-table td { padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
        .sp-spec { margin-top: 18px; }
        .sp-spec b { font-size: 14px; color: #aebbd6; }
        #spec-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
        .spec-chip { background: rgba(255,255,255,0.08); border-radius: 12px; padding: 3px 10px; font-size: 12px; }
        .hist-filter { display: flex; gap: 8px; margin-bottom: 12px; }
        .hist-filter .hf { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
            color: #cdd9ef; border-radius: 16px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
        .hist-filter .hf.active { background: #3a86ff; border-color: #3a86ff; color: #fff; }
        .hist-empty { text-align: center; color: #7e90b0; padding: 30px; }
        .hist-more { display: block; width: 100%; padding: 10px; margin: 4px 0 8px; cursor: pointer;
            background: rgba(255,255,255,0.06); color: #cdd9ef; border: 1px solid rgba(255,255,255,0.14);
            border-radius: 10px; font-size: 13px; font-weight: bold; }
        .hist-more:hover { background: rgba(255,255,255,0.12); }
        /* 牌谱列表：底牌+公共牌小卡 */
        .hi-cards { --card-w: 22px; --card-h: 30px; display: flex; gap: 10px; margin-top: 7px; align-items: center; flex-wrap: wrap; }
        .hi-mine, .hi-comm { display: inline-flex; gap: 2px; }
        .hi-comm { opacity: 0.92; }
        .hi-nocomm { font-size: 11px; color: #7e90b0; }
        /* 牌谱详情（screenshot3 清爽 breakdown）*/
        #hand-detail { position: fixed; inset: 0; z-index: 210; background: rgba(6,10,18,0.92);
            display: none; align-items: stretch; justify-content: center; }
        .hd-box { width: 100%; max-width: 640px; background: linear-gradient(160deg,#182236,#0c1320);
            color: #e7eefb; display: flex; flex-direction: column; }
        .hd-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
            border-bottom: 1px solid rgba(255,255,255,0.08); }
        .hd-head b { font-size: 15px; }
        .hd-head-btns { display: flex; gap: 8px; align-items: center; }
        .hd-replay { background: #3a86ff; color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-weight: bold; font-size: 13px; cursor: pointer; }
        .hd-close { background: none; border: none; color: #9fb0cc; font-size: 22px; cursor: pointer; }
        #hd-board { text-align: center; padding: 12px; background: radial-gradient(ellipse at center,#1c3a34 0%,#0c1320 80%); }
        .hd-pot { font-size: 13px; color: #f4d35e; margin-bottom: 8px; }
        .hd-comm { --card-w: 32px; --card-h: 44px; display: flex; gap: 4px; justify-content: center; }
        .hd-runit { margin-top: 4px; }
        .hd-runit-t { font-size: 12px; color: #ffcf5c; text-align: center; margin-bottom: 6px; }
        .hd-runit-row { display: flex; align-items: center; gap: 8px; padding: 3px 6px; }
        .hd-runit-no { font-size: 11px; color: #9fb4d6; min-width: 40px; }
        .hd-runit-bd { display: flex; gap: 3px; }
        .hd-runit-bd .card { width: 24px; height: 33px; min-width: 24px; }
        .hd-runit-bd .card .rank { font-size: 10px; }
        .hd-runit-bd .card .suit { font-size: 9px; }
        .hd-runit-w { font-size: 11px; color: #f4d35e; flex: 1; }
        #hd-rows { flex: 1; overflow-y: auto; padding: 6px 10px 20px; }
        .hd-row { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,0.06); }
        .hd-row.folded { opacity: 0.5; }
        .hd-who { width: 84px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
        .hd-av { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
            font-weight: bold; font-size: 13px; overflow: hidden; flex-shrink: 0; }
        .hd-av img { width: 100%; height: 100%; object-fit: cover; }
        .hd-nm { font-size: 11px; line-height: 1.3; min-width: 0; }
        .hd-pos { display: inline-block; background: rgba(58,134,255,0.25); color: #9cc3ff; border-radius: 4px; padding: 0 4px; font-size: 9px; margin-left: 2px; }
        .hd-me { display: inline-block; background: #06d6a0; color: #04241c; border-radius: 4px; padding: 0 4px; font-size: 9px; margin-left: 2px; }
        .hd-fold { display: inline-block; color: #f87171; font-size: 9px; margin-left: 2px; }
        .hd-hole { --card-w: 26px; --card-h: 36px; display: flex; gap: 2px; flex-shrink: 0; }
        .hd-acts { flex: 1; display: flex; flex-wrap: wrap; gap: 3px; align-items: center; min-width: 0; }
        .hd-st { font-size: 9px; color: #7e90b0; margin: 0 2px 0 5px; }
        .hd-act { font-size: 10px; font-weight: bold; border-radius: 4px; padding: 1px 5px; background: rgba(255,255,255,0.1); color: #cdd9ef; }
        .hd-act.f { background: rgba(120,120,120,0.3); color: #aaa; }
        .hd-act.ck { background: rgba(120,150,200,0.28); color: #bcd; }
        .hd-act.c { background: rgba(16,155,70,0.32); color: #7ee6a8; }
        .hd-act.b { background: rgba(58,134,255,0.32); color: #9cc3ff; }
        .hd-act.r { background: rgba(240,150,20,0.34); color: #ffcf8f; }
        .hd-net { width: 66px; flex-shrink: 0; text-align: right; font-weight: bold; font-size: 13px; font-variant-numeric: tabular-nums; }
        .hd-net.win { color: #4ade80; } .hd-net.lose { color: #f87171; }
        /* 桌面左右小箭头（游戏内直达 战绩/牌谱）*/
        .edge-arrow { position: fixed; bottom: 92px; z-index: 60; display: none;
            flex-direction: row; align-items: center; gap: 1px; background: rgba(18,26,42,0.85);
            color: #cdd9ef; border: 1px solid rgba(255,255,255,0.18); padding: 10px 4px; font-size: 16px; font-weight: bold; cursor: pointer; }
        .edge-arrow span { font-size: 10px; writing-mode: vertical-rl; letter-spacing: 2px; }
        .edge-arrow.left { left: 0; border-radius: 0 12px 12px 0; }
        .edge-arrow.right { right: 0; border-radius: 12px 0 0 12px; }
        body.in-room .edge-arrow { display: flex !important; }
        /* 点头像弹层：本局数据 + 表情 */
        #avatar-popup { position: fixed; inset: 0; z-index: 205; background: rgba(6,10,18,0.6);
            display: none; align-items: center; justify-content: center; padding: 20px; }
        .ap-box { width: 100%; max-width: 340px; background: linear-gradient(160deg,#1b2740,#0e1626); color: #e7eefb;
            border-radius: 16px; padding: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
        .ap-head { display: flex; align-items: center; gap: 10px; }
        .ap-av { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
            font-weight: bold; font-size: 18px; overflow: hidden; flex-shrink: 0; }
        .ap-av img { width: 100%; height: 100%; object-fit: cover; }
        .ap-name { flex: 1; font-size: 16px; font-weight: bold; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ap-close { background: none; border: none; color: #9fb0cc; font-size: 20px; cursor: pointer; }
        .ap-sub { font-size: 11px; color: #8fa2c4; margin: 12px 2px 6px; }
        .ap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
        .ap-loading { grid-column: 1/-1; text-align: center; color: #7e90b0; padding: 14px; font-size: 13px; }
        .ap-stat { background: rgba(255,255,255,0.05); border-radius: 10px; padding: 9px 4px; text-align: center; }
        .ap-val { font-size: 16px; font-weight: bold; color: #f4d35e; }
        .ap-lab { font-size: 10px; color: #9fb0cc; margin-top: 2px; }
        .ap-emo-title { font-size: 11px; color: #8fa2c4; margin: 14px 2px 6px; }
        .ap-emotes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
        .ap-emotes .emote-btn { font-size: 22px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
            border-radius: 10px; width: 42px; height: 42px; cursor: pointer; }
        .ap-owner { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.09); }
        .ap-owner-btn { width: 100%; padding: 10px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: bold;
            background: rgba(255,159,28,0.16); border: 1px solid rgba(255,159,28,0.5); color: #ffcf8a; }
        .ap-owner-btn:active { background: rgba(255,159,28,0.28); }

        /* 牌谱详情：每家的最终牌型名（仅在牌面可见时才渲染，见 42-replay.js 的隐私判断）*/
        .hd-cat { display: block; margin-top: 3px; font-size: 10.5px; font-weight: bold; color: #f4d35e;
            white-space: nowrap; letter-spacing: 0.3px; }
        .hd-cat.dim { color: #9fb4d6; font-weight: normal; }