/* ===== 牌友面板（2026-09-13）=====
           形态沿用收件箱/战绩那套左侧抽屉（.side-panel），所以背景、头部、
           「点空白处关闭」都是现成的，这里只写内容部分。*/
        .fr-tabs { display: flex; gap: 8px; margin: 10px 0 4px; }
        .fr-tab {
            flex: 1; padding: 8px 10px; border-radius: 10px; cursor: pointer;
            font-size: 13px; font-weight: 600; color: #9db9a9;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }
        .fr-tab:hover { color: #dfe9e2; }
        .fr-tab.sel { background: #06d6a0; color: #0a1f1a; border-color: #06d6a0; }

        /* .side-panel 自己已经 overflow-y:auto，这里不要再套一层滚动 */
        #friends-body { padding: 6px 2px 16px; }
        .fr-sec { font-size: 12px; color: #9db9a9; letter-spacing: .3px; margin: 14px 2px 7px; }
        .fr-sec:first-child { margin-top: 6px; }

        .fr-row {
            display: flex; flex-direction: column; gap: 6px; padding: 10px;
            border-radius: 12px; margin-bottom: 8px;
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
        }
        .fr-av {
            width: 40px; height: 40px; border-radius: 11px; overflow: hidden; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
        }
        .fr-av img { width: 100%; height: 100%; object-fit: cover; }
        .fr-av .fr-ltr { font-size: 17px; font-weight: bold; color: #eaf3ee; }
        .fr-top { display: flex; align-items: center; gap: 10px; }
        .fr-main { flex: 1; min-width: 0; }
        .fr-name { font-size: 14px; font-weight: bold; color: #eaf3ee;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        /* 备注单占一行：放在 .fr-name 里会跟名字一起被截断，两边都看不清。
           它是【只有我看得见】的私货，所以颜色压得比名字低。*/
        .fr-note { font-size: 12px; color: #9db9a9; margin-top: 2px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .fr-sub { font-size: 12px; color: #9db9a9; margin-top: 3px;
            display: flex; align-items: center; gap: 4px; }

        /* 在线状态小圆点：离线灰 / 在线薄荷 / 牌桌中金色（金=「现在就能约」）*/
        .fr-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
        .fr-dot.off { background: #56685d; }
        .fr-dot.on { background: #06d6a0; }
        .fr-dot.playing { background: #f4d35e; }

        /* 按钮单独一层、右对齐：和信息挤一行时，flex-shrink:0 的按钮会把名字压成「ad⋯」 */
        .fr-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
        .fr-btn {
            padding: 6px 11px; border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 600;
            background: rgba(255,255,255,0.07); color: #dfe9e2;
            border: 1px solid rgba(255,255,255,0.16);
            transition: background 0.15s ease, transform 0.15s ease;
        }
        .fr-btn:hover { background: rgba(255,255,255,0.13); }
        .fr-btn:active { transform: scale(0.95); }
        .fr-btn.ok { background: rgba(6,214,160,0.18); border-color: rgba(6,214,160,0.5); color: #7ff0cf; }
        .fr-btn.danger { color: #ff8f8f; border-color: rgba(255,120,120,0.28); }

        /* 点头像弹层里的牌友状态：已是牌友 / 申请中 只显示文字，
           不放一个点下去没反应的按钮。*/
        .ap-friend-tag { display: inline-block; padding: 5px 12px; border-radius: 999px;
            font-size: 12px; color: #9db9a9; background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.12); }

        /* 备注弹窗（自家的，不用浏览器 prompt）*/
        .note-box { max-width: 320px; width: 86%; }
        .note-title { font-size: 15px; color: #eaf3ee; margin-bottom: 4px; }
        .note-title b { color: #f4d35e; }
        .note-hint { font-size: 12px; color: #9db9a9; margin-bottom: 12px; }
        .note-input {
            width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px;
            background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2);
            color: #eaf3ee; font-size: 14px; outline: none;
        }
        .note-input:focus { border-color: rgba(6,214,160,0.6); }
        .note-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

        /* 应用内确认框（替掉浏览器 confirm）*/
        .confirm-box { max-width: 340px; width: 88%; }
        .confirm-text { font-size: 14px; color: #dfe9e2; line-height: 1.7; white-space: pre-wrap; }
        .confirm-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
        .confirm-acts .fr-btn { padding: 8px 16px; font-size: 13px; }
        .fr-btn.danger.ok, #confirm-ok.danger {
            background: rgba(255,120,120,0.18); border-color: rgba(255,120,120,0.5); color: #ff9f9f; }

        /* 搜索加好友：只认精确匹配，所以不做输入即搜（那会让人以为能模糊找）*/
        .fr-search-row { display: flex; gap: 8px; margin: 10px 0 6px; }
        .fr-search {
            flex: 1; min-width: 0; padding: 8px 12px; border-radius: 10px;
            background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.18);
            color: #eaf3ee; font-size: 13px; outline: none;
        }
        .fr-search:focus { border-color: rgba(6,214,160,0.6); }
        /* 牌友号：让人念给朋友的东西，字要能看清，且点一下就能复制 */
        .me-code { margin-top: 5px; font-size: 12px; color: #9db9a9; cursor: pointer;
            font-variant-numeric: tabular-nums; letter-spacing: .6px; }
        .me-code:active { color: #dfe9e2; }

        /* 邀请弹窗里的在线牌友列表 */
        /* 写死 180px 在横屏手机（视口才 ~380px 高）上会吃掉半屏，
           所以取「180px 和 30dvh 里更小的那个」。*/
        .inv-friends { display: flex; flex-direction: column; gap: 6px;
            max-height: min(180px, 30dvh); overflow-y: auto; }
        .inv-count { color: #9db9a9; font-weight: normal; }
        .inv-filter { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
        .inv-fr { display: flex; align-items: center; gap: 8px;
            padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,0.05); }
        .inv-fr .fr-av { width: 28px; height: 28px; font-size: 13px; }
        .inv-fr .fr-name { flex: 1; min-width: 0; }
        .inv-fr .fr-btn { flex-shrink: 0; }

        /* 大厅「N 位牌友在线」：约局的第一步是「有没有人」，所以它要在最上面、一眼看到 */
        .fr-online { display: flex; align-items: center; gap: 8px; cursor: pointer;
            padding: 9px 12px; margin-bottom: 10px; border-radius: 12px;
            background: linear-gradient(135deg, rgba(6,214,160,0.13), rgba(6,214,160,0.05));
            border: 1px solid rgba(6,214,160,0.28); }
        .fr-online:active { background: rgba(6,214,160,0.2); }
        .fo-dot { width: 8px; height: 8px; border-radius: 999px; background: #06d6a0;
            box-shadow: 0 0 6px rgba(6,214,160,0.8); flex-shrink: 0; }
        .fo-text { font-size: 13px; font-weight: bold; color: #dfe9e2; flex-shrink: 0; }
        .fo-avs { display: flex; align-items: center; margin-left: auto; }
        /* 头像叠着放：横着排 6 个会把这一行撑爆，叠放既省地方又一眼看出「有一群人」 */
        .fo-av { width: 24px; height: 24px; border-radius: 999px; overflow: hidden;
            display: flex; align-items: center; justify-content: center;
            background: #2f4a3e; border: 1.5px solid #1a2c24; margin-left: -7px;
            font-size: 11px; font-weight: bold; color: #eaf3ee; flex-shrink: 0; }
        .fo-av:first-child { margin-left: 0; }
        .fo-av img { width: 100%; height: 100%; object-fit: cover; }
        .fo-more { font-size: 11px; color: #9db9a9; margin-left: 5px; flex-shrink: 0; }
        .fo-go { color: #6fe6c0; font-size: 18px; margin-left: 4px; flex-shrink: 0; }

        /* 对战战绩：跟在在线状态后面的一小行。数字本身用颜色分正负，
           但【别用金色】—— 金只留给「钱/赢/我/奖励/品牌」，这里是中性对比。*/
        /* 对战战绩整行独占一层，不跟按钮/状态抢横向。窄屏放不下就换行，不许溢出。*/
        .fr-h2h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
            font-size: 12px; color: #9db9a9; padding-top: 6px;
            border-top: 1px dashed rgba(255,255,255,0.08); }
        .fr-h2h-n { color: #dfe9e2; }
        .fr-h2h b { font-weight: bold; font-variant-numeric: tabular-nums; }
        .h2h-up { color: #06d6a0; }
        .h2h-down { color: #ef476f; }