/* ===== Admin panel ===== */
        #admin-panel {
            background: rgba(255,200,0,0.06); border: 1px solid rgba(255,200,0,0.25);
            border-radius: 10px; padding: 14px; margin-bottom: 12px;
        }
        #admin-panel h3 { color: #f4d35e; font-size: 14px; margin-bottom: 10px; }
        /* 管理员：Tab + 房间总览 + 钱包流水 */
        .adm-tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
        .adm-tab { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: #cdd8ea;
            border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
        .adm-tab.sel { background: rgba(244,211,94,0.2); border-color: rgba(244,211,94,0.5); color: #f4d35e; font-weight: bold; }
        .adm-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
        .adm-bar input { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); color: #fff;
            border-radius: 6px; padding: 5px 8px; font-size: 12px; min-width: 0; }
        .adm-bar button, .adm-adjust button { background: #3a86ff; color: #fff; border: none; border-radius: 6px;
            padding: 5px 12px; font-size: 12px; font-weight: bold; cursor: pointer; flex-shrink: 0; }
        .adm-dim { color: #8fa2c4; font-size: 11px; }
        .adm-empty { color: #8fa2c4; font-size: 12px; padding: 10px; text-align: center; }
        .adm-room { background: rgba(255,255,255,0.05); border-radius: 8px; padding: 8px 10px; margin-bottom: 7px; }
        .adm-room-h { font-size: 13px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
        .adm-tags { font-size: 11px; color: #f4d35e; margin-left: auto; }
        .adm-players { margin-top: 5px; display: flex; flex-direction: column; gap: 2px; }
        .adm-p { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; font-size: 12px; align-items: center; }
        .adm-wallet-h { font-size: 12px; color: #cdd8ea; margin-bottom: 8px; }
        .adm-wallet-h b { color: #f4d35e; }
        .adm-adjust { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
        .adm-adjust input { flex: 1; min-width: 90px; background: rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 6px; padding: 5px 8px; font-size: 12px; }
        .adm-bar select { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); color: #fff;
            border-radius: 6px; padding: 5px 8px; font-size: 12px; }
        .adm-mail-text { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2);
            color: #fff; border-radius: 6px; padding: 7px 9px; font-size: 12px; resize: vertical;
            font-family: inherit; margin-bottom: 8px; }
        .adm-tx { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; font-size: 12px;
            padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,0.06); align-items: center; }
        #admin-panel table { width: 100%; border-collapse: collapse; font-size: 13px; }
        #admin-panel th { color: #888; font-weight: normal; text-align: left; padding: 4px 6px; }
        #admin-panel td { padding: 4px 6px; border-top: 1px solid rgba(255,255,255,0.05); }
        #admin-panel input[type=number] {
            width: 100px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
            color: #fff; border-radius: 4px; padding: 3px 6px; font-size: 13px;
        }
        #admin-panel button {
            background: #f4d35e; color: #1a1a1a; border: none; border-radius: 4px;
            padding: 3px 10px; font-size: 13px; font-weight: bold; cursor: pointer;
        }
        #admin-panel button:hover { filter: brightness(1.1); }
        #admin-msg { font-size: 12px; color: #06d6a0; margin-top: 6px; min-height: 16px; }
        /* ── 管理面板·手机端 ──
           窄屏上原来的多列表格/网格会挤成一团且横向溢出。这里改成：
           表格横向可滚（不挤压内容）、流水与玩家行改为两行式布局、输入框占满一行。*/
        @media (max-width: 560px) {
            #admin-panel { padding: 10px; }
            #admin-panel h3 { font-size: 13px; }
            .adm-tabs { gap: 4px; }
            .adm-tab { padding: 5px 8px; font-size: 11.5px; flex: 1 1 auto; }
            /* 玩家表：整体横向滚动，避免列被压扁 */
            #adm-pane-users { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            #admin-panel table { min-width: 460px; }
            /* 搜索/操作栏：输入框各占一行，按钮不被挤没 */
            .adm-bar { gap: 6px; }
            .adm-bar input, .adm-bar select { flex: 1 1 100%; }
            .adm-bar button { flex: 0 0 auto; }
            .adm-adjust input { flex: 1 1 100%; }
            /* 流水行：时间+金额一行，说明另起一行（原来四列在窄屏挤成一坨）*/
            .adm-tx { grid-template-columns: 1fr auto; grid-auto-rows: min-content; gap: 2px 8px; padding: 7px 6px; }
            .adm-tx > :nth-child(1) { grid-column: 1; }
            .adm-tx > :nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
            .adm-tx > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
            .adm-tx > :nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
            /* 房间内玩家行同理 */
            .adm-p { grid-template-columns: 1fr auto auto; gap: 4px 6px; font-size: 11.5px; }
            .adm-p > :nth-child(4) { grid-column: 1 / -1; }
            .adm-room-h { font-size: 12px; }
            .adm-tags { margin-left: 0; flex-basis: 100%; }
        }

        /* ===== 大厅 ===== */
        /* 纵向 flex：好让底部的版本行用 margin-top:auto 顶到【页面最底部】。
           房间列表为空时页面很短，不这样它就会跟在列表后面浮在半空中。
           子元素 flex-shrink:0 —— 否则房间一多会被压扁（滚动由外层 overflow-y:auto 负责）。*/
        #lobby-view { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; }
        #lobby-view > * { flex-shrink: 0; }
        .lobby-top { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
        .lobby-entry {
            flex: 1; min-width: 200px; background: rgba(58,134,255,0.12);
            border: 1px solid rgba(58,134,255,0.3); border-radius: 12px; padding: 16px;
        }
        .lobby-entry.create { cursor: pointer; background: rgba(244,211,94,0.12); border-color: rgba(244,211,94,0.35); }
        .lobby-entry.create:hover { background: rgba(244,211,94,0.2); }
        .le-title { font-size: 18px; font-weight: bold; margin-bottom: 4px; }
        .le-sub { font-size: 12px; color: #9bb; }
        .le-join-row { display: flex; gap: 8px; margin-top: 8px; }
        .le-join-row input { flex: 1; min-width: 0; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2);
            color: #fff; border-radius: 6px; padding: 8px; font-size: 14px; }
        .le-join-row button { flex-shrink: 0; }
        /* 四格房间码：只输数字、输满自动加入 */
        .le-join-row.code-boxes { gap: 10px; justify-content: center; }
        .code-boxes .code-box { flex: 1; min-width: 0; max-width: 62px; aspect-ratio: 3 / 4;
            text-align: center; font-size: 26px; font-weight: 800; color: #fff; caret-color: #3a86ff;
            background: rgba(0,0,0,0.32); border: 2px solid rgba(255,255,255,0.22); border-radius: 10px; padding: 0; }
        .code-boxes .code-box:focus { outline: none; border-color: #3a86ff; box-shadow: 0 0 0 3px rgba(58,134,255,0.28); }
        .le-join-row button, .rc-join, #create-form button {
            background: #3a86ff; color: #fff; border: none; border-radius: 6px;
            padding: 8px 16px; font-weight: bold; font-size: 14px; cursor: pointer;
        }
        #create-form {
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
            border-radius: 12px; padding: 16px; margin-bottom: 16px;
        }
        #create-form h3 { color: #f4d35e; font-size: 15px; margin-bottom: 12px; }
        #create-form label { display: block; font-size: 13px; color: #cde; margin-bottom: 12px; }
        #create-form label b { color: #f4d35e; }
        /* 报名费用 div 包裹（避免 label 在手机端拦截按钮点击）*/
        .cfg-field { margin-bottom: 12px; }
        .cfg-field .cfg-label { display: block; font-size: 13px; color: #cde; margin-bottom: 6px; }
        #create-form input[type=text], #create-form input[type=number] {
            display: block; width: 100%; margin-top: 4px; background: rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 6px; padding: 8px; font-size: 14px;
        }
        #create-form input[type=range] { display: block; width: 100%; margin-top: 6px; accent-color: #3a86ff; }
        .create-actions { display: flex; gap: 10px; }
        .ct-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
        .ct-tab { flex: 1; padding: 9px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05);
            color: #9bb; border-radius: 8px; font-size: 14px; font-weight: bold; cursor: pointer; }
        .ct-tab.active { background: #f4d35e; color: #1a1a1a; border-color: #f4d35e; }
        .rc-tag.cash { background: rgba(6,214,160,0.18); color: #06d6a0; }
        #create-form button.confirm { background: #06d6a0; color: #0a1f1a; }
        #create-form button.cancel  { background: rgba(255,255,255,0.12); }
        .room-list-title { font-size: 14px; color: #9bb; margin: 8px 0; }
        .room-card {
            display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
        }
        .rc-main { flex: 1; }
        .rc-name { font-size: 16px; font-weight: bold; margin-bottom: 4px; }
        .rc-meta { font-size: 12px; color: #9bb; }
        .rc-owner { color: #cde; margin-right: 6px; }
        .rc-tag { background: rgba(244,211,94,0.18); color: #f4d35e; padding: 1px 7px; border-radius: 8px; margin-right: 6px; }
        .rc-join { min-width: 72px; }
        .rc-join:disabled { opacity: 0.4; cursor: not-allowed; }
        .rc-join.rejoin { background: #06d6a0; color: #0a1f1a; }
        .room-empty { color: rgba(255,255,255,0.3); text-align: center; padding: 30px; font-size: 14px; }

        /* ===== 牌桌顶栏 ===== */
        #table-topbar {
            display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
            padding: 8px 12px; background: rgba(0,0,0,0.25); border-radius: 8px;
        }
        #table-topbar .leave-btn {
            background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2);
            border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer;
        }
        #table-topbar .leave-btn:hover { background: rgba(214,40,40,0.4); }
        #sng-info { flex: 1; font-size: 13px; color: #cde; }
        #sng-info #next-level { color: #f4d35e; }
        #sng-info .room-no { color: #f4d35e; font-weight: bold; letter-spacing: 1px; }
        #table-topbar .sound-btn {
            background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
            border-radius: 6px; padding: 6px 10px; font-size: 14px; cursor: pointer;
        }
        #table-topbar .dissolve-btn {
            background: rgba(214,40,40,0.25); color: #ff8a8a; border: 1px solid rgba(214,40,40,0.5);
            border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer;
        }
        #table-topbar .dissolve-btn:hover { background: rgba(214,40,40,0.45); }
        .cfg-note { font-size: 12px; color: #9bb; margin-bottom: 12px;
            background: rgba(58,134,255,0.1); padding: 8px 10px; border-radius: 6px; }
        .tier-row { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
        .tier-btn { flex: 1; min-width: 64px; display: flex; flex-direction: column; align-items: center;
            padding: 8px 6px; border: 1.5px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05);
            color: #e7eefb; border-radius: 10px; font-weight: bold; font-size: 14px; cursor: pointer; }
        /* 比赛设置是浅色弹窗：加时按钮与标签需深色，否则看不清 */
        #match-modal .cfg-label { color: #3a4d70; }
        .ext-btn { flex: 1; min-width: 58px; padding: 10px 6px; border-radius: 10px; cursor: pointer;
            border: 1.5px solid #7ea3d8; background: #dbe8fb; color: #1d3a6b; font-weight: bold; font-size: 15px; }
        .ext-btn:hover { background: #c6dbf7; }
        .ext-btn:active { transform: scale(0.96); }
        .tier-btn small { font-size: 10px; font-weight: normal; opacity: 0.7; margin-top: 2px; }
        .tier-btn.sel { border-color: #f4d35e; background: linear-gradient(180deg,#f4d35e,#e0a200);
            color: #3a2600; box-shadow: 0 0 0 3px rgba(244,211,94,0.3), 0 3px 8px rgba(0,0,0,0.4); transform: translateY(-1px); }
        .tier-btn.sel small { opacity: 0.85; }

        /* ===== 比赛结算 ===== */
        #result-overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 150;
            display: flex; align-items: center; justify-content: center; padding: 20px;
        }
        .result-box {
            background: linear-gradient(160deg, #1e3550, #142336); border: 1px solid rgba(244,211,94,0.4);
            border-radius: 18px; padding: 28px 32px; text-align: center; max-width: 320px; width: 100%;
            box-shadow: 0 16px 50px rgba(0,0,0,0.6);
        }
        .result-trophy { font-size: 56px; animation: trophyPop 0.5s cubic-bezier(0.22,1,0.36,1) backwards; }
        @keyframes trophyPop { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
        .result-title { font-size: 22px; font-weight: bold; color: #f4d35e; margin: 10px 0 6px; }
        .result-sub { font-size: 15px; color: #cde; margin-bottom: 14px; }
        .result-sub b { color: #f4d35e; font-size: 18px; }
        #result-ranking { width: 100%; max-width: 320px; margin: 0 auto 18px; max-height: 40vh; overflow-y: auto; }
        .rk-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
            background: rgba(255,255,255,0.05); margin-bottom: 5px; font-size: 14px; }
        .rk-row.me { background: rgba(244,211,94,0.15); border: 1px solid rgba(244,211,94,0.4); }
        .rk-no { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: rgba(255,255,255,0.12);
            display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; }
        .rk-row:nth-child(1) .rk-no { background: #f4d35e; color: #2a1c00; }
        .rk-name { flex: 1; text-align: left; color: #e7eefb; }
        .rk-hands { font-size: 11px; color: #8fa2c4; flex-shrink: 0; }
        .rk-net { font-weight: bold; }
        .rk-tag { font-size: 10px; padding: 1px 5px; border-radius: 6px; margin-left: 5px; white-space: nowrap;
            background: rgba(244,211,94,0.18); color: #f4d35e; border: 1px solid rgba(244,211,94,0.35); }
        /* 颁奖台：🥇老板(亏最多·请客) 🥈MVP(赢最多) 🥉力工(手数最多)——纯娱乐调侃 */
        #result-podium { display: flex; justify-content: center; align-items: flex-end; gap: 10px;
            margin: 4px auto 16px; max-width: 340px; }
        #result-podium:empty { display: none; }
        .pd-item { flex: 1; max-width: 104px; display: flex; flex-direction: column; align-items: center; gap: 5px;
            animation: pdRise 0.5s cubic-bezier(0.22,1,0.36,1) backwards; }
        .pd-item.gold   { animation-delay: 0.10s; }
        .pd-item.silver { animation-delay: 0.25s; }
        .pd-item.bronze { animation-delay: 0.40s; }
        @keyframes pdRise { from { opacity: 0; transform: translateY(18px) scale(0.9); } to { opacity: 1; transform: none; } }
        .pd-medal { font-size: 20px; line-height: 1; }
        .pd-avatar { width: 44px; height: 44px; border-radius: 10px; object-fit: cover;
            background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center;
            font-weight: bold; font-size: 18px; color: #e7eefb; border: 2px solid rgba(255,255,255,0.25); }
        .pd-item.gold   .pd-avatar { border-color: #f4d35e; box-shadow: 0 0 12px rgba(244,211,94,0.5); }
        .pd-item.silver .pd-avatar { border-color: #cfd8e3; }
        .pd-item.bronze .pd-avatar { border-color: #d08b52; }
        .pd-title { font-size: 12px; font-weight: bold; color: #f4d35e; }
        .pd-item.silver .pd-title { color: #dbe4ef; }
        .pd-item.bronze .pd-title { color: #e0a678; }
        .pd-name { font-size: 12px; color: #e7eefb; max-width: 100%; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
        .pd-val { font-size: 11px; color: #9fb4d6; }
        /* 台阶：金最高、银次之、铜最矮 */
        .pd-step { width: 100%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0.05)); }
        .pd-item.gold   .pd-step { height: 26px; background: linear-gradient(180deg,rgba(244,211,94,0.5),rgba(244,211,94,0.12)); }
        .pd-item.silver .pd-step { height: 18px; }
        .pd-item.bronze .pd-step { height: 12px; background: linear-gradient(180deg,rgba(208,139,82,0.45),rgba(208,139,82,0.1)); }
        .result-btn { background: #f4d35e; color: #1a1a1a; border: none; border-radius: 8px;
            padding: 11px 28px; font-size: 15px; font-weight: bold; cursor: pointer; }
        .result-btn:hover { filter: brightness(1.1); }