/* ===== 设置面板 ===== */
        #settings-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100;
            display: flex; align-items: center; justify-content: center; padding: 16px;
        }
        .settings-box {
            background: #eef2f7; color: #1a2330; border-radius: 16px; padding: 18px 20px;
            width: 100%; max-width: 440px; max-height: 90vh; max-height: 90dvh; overflow-y: auto;
            box-shadow: 0 12px 40px rgba(0,0,0,0.5);
        }
        .settings-head { display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 12px; }
        .settings-head h2 { font-size: 19px; color: #1a2330; }
        .settings-close { position: absolute; right: 0; top: 0; background: none; border: none;
            font-size: 18px; cursor: pointer; color: #667; }
        .settings-sec { margin-bottom: 18px; }
        .sec-title { font-size: 14px; font-weight: bold; color: #2a3a52; margin-bottom: 10px; }
        .sec-hint { font-size: 11.5px; color: #7a879b; margin-top: 8px; line-height: 1.5; }
        .avatar-grid { display: flex; flex-wrap: wrap; gap: 8px; }
        .avatar-opt {
            width: 48px; height: 48px; border-radius: 50%; overflow: hidden; cursor: pointer;
            border: 3px solid transparent; background: #dfe6ef; display: flex; align-items: center;
            justify-content: center; color: #667; font-size: 12px;
        }
        .avatar-opt img { width: 100%; height: 100%; object-fit: cover; }
        .avatar-opt.sel { border-color: #3a86ff; }
        .theme-row { display: flex; gap: 10px; }
        .theme-swatch {
            flex: 1; height: 78px; border-radius: 10px; cursor: pointer; position: relative;
            border: 3px solid transparent; display: flex; align-items: flex-end; justify-content: center;
        }
        .theme-swatch span { font-size: 12px; color: #fff; background: rgba(0,0,0,0.35);
            width: 100%; text-align: center; padding: 2px 0; border-radius: 0 0 7px 7px; }
        .theme-swatch.sel { border-color: #3a86ff; box-shadow: 0 0 0 2px rgba(58,134,255,0.3); }
        .cardstyle-row { display: flex; gap: 10px; margin-bottom: 10px; }
        .cs-opt { flex: 1; padding: 10px; border: 2px solid #cdd6e3; background: #fff; border-radius: 8px;
            font-size: 14px; font-weight: bold; color: #2a3a52; cursor: pointer; }
        .cs-opt.sel { border-color: #3a86ff; background: #eaf2ff; }
        .cs-preview { display: flex; gap: 4px; justify-content: center; }
        .cs-preview .card { width: 38px; height: 52px; }
        .cs-preview .card .rank { font-size: 13px; } .cs-preview .card .suit { font-size: 18px; }
        .quickbet-opts { display: flex; flex-wrap: wrap; gap: 8px; }
        .qb-opt { padding: 7px 12px; border: 2px solid #cdd6e3; background: #fff; border-radius: 16px;
            font-size: 13px; font-weight: bold; color: #2a3a52; cursor: pointer; }
        .qb-opt.sel { border-color: #06d6a0; background: #e3fff7; color: #088; }
        .qb-custom { display: flex; gap: 8px; margin-top: 8px; }
        .qb-custom input { flex: 1; min-width: 0; border: 1px solid #cdd6e3; border-radius: 8px; padding: 7px 10px; font-size: 13px; }
        .qb-custom button { flex-shrink: 0; background: #3a86ff; color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-weight: bold; cursor: pointer; }
        .settings-sec.toggles { display: flex; gap: 20px; }
        .set-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #2a3a52; font-weight: bold; }
        .set-toggle input { width: 18px; height: 18px; }


        /* 版本信息（大厅底部）：一行灰色小字，平时不抢眼，报 bug 时点一下能复制。
           margin-top:auto 把它顶到页面【最底部】—— 房间列表为空时页面很短，
           不这样它会跟在列表后面浮在半空中（配合 #lobby-view 的纵向 flex 生效）。*/
        .lobby-version { margin-top: auto; text-align: center; padding: 18px 8px 14px; cursor: pointer;
            font-size: 11px; color: rgba(255,255,255,0.3); line-height: 1.6;
            font-variant-numeric: tabular-nums; letter-spacing: 0.2px; }
        .lobby-version:active { color: rgba(255,255,255,0.55); }
        /* 前端与服务端版本对不上 = 本机缓存了旧前端，标黄提示 */
        .lobby-version.stale { color: #e0a33e; }