.title{
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    text-align: center !important;
}
/* 桌面端三栏左右宽度不同（左 186px、右 268px），按页面居中会让标题偏右，
   这里左移两栏差值的一半，使标题正好居中在棋盘（中间列）正上方 */
@media (min-width: 901px){
    #title.title{
        transform: translateX(-41px);
    }
}
.chessBoard{
    /*display: block; !*块级元素，使其可以居中*!*/
    margin: auto;
    box-shadow: 5px 5px 10px #B9B9B9, -2px -2px 2px #B9B9B9;
    cursor: pointer;
}
.lobby{
    width: 750px;
    height: 100%;
    margin: auto;
    box-shadow: 5px 5px 10px #B9B9B9, -2px -2px 2px #B9B9B9;
    cursor: pointer;
}
.board-btn{
    padding: 10px 20px;
    background-color: forestgreen;
    border-radius: 8px;
    color: white;
}

html body{
    height: 100%;
    background-color: black;
}
/* 背景层固定在视口：任何分辨率、页面滚动、窗口缩放与拖拽都完整铺满，不被内容高度截断 */
.bg-layer{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #1b1b1b;
    z-index: 0;
    pointer-events: none;
}
.wrapper{
    padding-bottom: 20px;
    position: relative;
    margin: 0;
    width: 100%;
    min-height: 100vh;
    z-index: 1;
}
.container-all{
    width: 100%;
    display: flex;
    position: relative;
    margin-top: 30px;
}
.left{
    width: 20%;
    margin-left: 5%;
}
/*.container div{*/
/*    margin: auto;*/
/*}*/

.middle{
    width: 60%;
    text-align: center;
}
.right{
    width: 20%;
    margin-right: 5%;
}
.avatar{
    width: 80px;
    height: 80px;
    border-radius: 20px;
}
.userInfo{
    display: flex;
}
.avatar-container{
    text-align: center;
}
.name-container{

}
.name{
    /*font-weight: bolder !important;*/
    margin-left: 10px !important;
    /*font-size: larger !important;*/
    margin-bottom: 0 !important;
}
.room-container{
    margin: 30px;
    display: grid;
    grid: 200px /180px 180px 180px 180px;
}
.room{
    border-radius: 20px;
    background-color: #DEB887;
    width: 150px;
    height: 150px;
}
.room-left{
    display: block;
    width: 50%;
    height: 100%;
}
.player-name{
    font-size: smaller;
}
.room-right{
    display: block;
    width: 50%;
    height: 100%;
}
.player-avatar{
    text-align: center;
    margin: auto;
    width: 50px;
    border-radius: 10px;
}
.room-avatar{
    margin: 10px;
    display: flex;
}
.tip{
    margin: 10px;
    width: 100%;
}
/* 大厅标题：居中的蓝色胶囊样式，适配背景主题且更显眼 */
.lobby .lobby-title{
    width: fit-content;
    margin: 8px auto 14px;
    padding: 6px 26px;
    font-size: 20px !important;
    font-weight: 700;
    letter-spacing: 4px;
    color: #ffffff;
    background: linear-gradient(135deg, #4aa3df, #2185d0);
    border-radius: 22px;
    box-shadow: 0 3px 8px rgba(33,133,208,.45);
    text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.add-avatar{
    width: 80px;
    height: 80px;
}
.room-avatar .add{
    width: 100%;
    margin: auto;
}

.chat-window{
    border-radius: 20px;
    background-color: beige;
    height: 410px;
    display: block;
    width: 300px;
}

.chat-bottom{
    margin-left: 15px;
    margin-top: 3px;
    display: flex;
    margin-bottom: 0;
    position: absolute;
}
.chat-middle{
    margin-left: 5px;
    border-radius: 5px;
    margin-right: 5px;
    background-color: white;
    height: 340px;
    overflow: scroll;
}
.chat-name{
    font-weight: bolder;
    text-align: center;
}
.send-btn{
    margin-left: 5px;
    margin-right: 0;
    color: aliceblue;
    background-color: green;
    border-radius: 4px;
}
.message-left{
    border-radius: 3px;
    background-color: aliceblue;
    padding: 0;
    word-break:break-all;
}
.message-right{
    border-radius: 3px;
    background-color: darkseagreen;
    padding: 0;
    word-break:break-all;
}
.message-middle{
    border-radius: 3px;
    padding: 0;
    word-break:break-all;
}
.message-middle p{
    color: red;
}

/*提示框的css*/
/* 提示语开始 */
@-webkit-keyframes toastAnimation {
    0% {
        opacity:1;
    }
    25% {
        opacity:0.75;
    }
    50% {
        opacity:0.5;
    }
    75% {
        opacity:0.25;
    }
    100% {
        opacity:0;
    }
}
@keyframes toastAnimation {
    0% {
        opacity:1;
    }
    25% {
        opacity:0.75;
    }
    50% {
        opacity:0.5;
    }
    75% {
        opacity:0.25;
    }
    100% {
        opacity:0;
    }
}
.toast-message {
    text-align:center;
    color:#fff;
    font-size:14px;
    /* 宽度按内容自适应，最长不超过视口 80% / 420px */
    width:auto;
    min-width:150px;
    max-width:min(80vw, 420px);
    box-sizing:border-box;
    padding:10px;
    background-color:rgba(0,0,0,0.5);
    box-shadow:0 8px 16px 0 rgba(51,51,51,0.30);
    border-radius:4px;
    position:fixed;
    z-index:9999;
    /* 所有轻提示统一显示在视口正中 */
    left:50%;
    top:50%;
    margin-left:0;
    transform:translate(-50%,-50%);
}
/* 提示语结束 */
.red{
    background-color: red;
}

/* 分页样式 */
/* th控制整体位置：二选一 */
/* ①整体靠左（默认）：不用额外加样式 */
/* ②整体在单元格居中：打开下面注释 */
tfoot th {
    text-align: center !important;
}

.ui.pagination.menu {
    /* 宽度自适应内部所有内容，不会100%铺满th */
    display: inline-flex !important;
    align-items: center;
    gap:2px;
    float:none !important;
}
.pagination.menu .item{
    padding:4px 6px !important;
}
/* 分页样式 */


/* ============================================================
   布局与响应式（最终版，按使用反馈整理）
   ============================================================ */

/* ---------- 三栏骨架：拉开间距，右栏不再紧贴大厅 ---------- */
.container-all{
    max-width: 1340px;
    margin: 24px auto 0;
    gap: 16px;
    align-items: stretch;   /* 三栏等高，面板上下对齐 */
    box-sizing: border-box;
    padding: 0 12px;
}

.left{
    width: 186px;
    flex: 0 0 186px;
    margin: 0;
}

.middle{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.right{
    width: 268px;
    flex: 0 0 268px;
    margin: 0;
}

/* ---------- 大厅/历史对局面板：浅色卡片，观感更整洁 ---------- */
.lobby{
    height: auto;
    min-height: 200px;
    max-width: 100%;
    box-sizing: border-box;
    flex: 1 1 auto;   /* 与右侧栏等高，面板对齐 */
    background: transparent;   /* 保留原来的背景：背景图照常透出 */
    border-radius: 0;
    box-shadow: 5px 5px 10px #B9B9B9, -2px -2px 2px #B9B9B9;   /* 原来的投影 */
padding: 0;
}

/* ---------- 历史对局：表格区域默认填满面板，分页固定在底部 ---------- */
.history-panel{
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.history-scroll{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.history-panel .ui.table{
    margin: 0;
}
/* 表格收紧内边距并适当缩小字号：配合加宽后的面板，缓解列拥挤 */
.history-panel table.ui.celled.padded.table > thead > tr > th,
.history-panel table.ui.celled.padded.table > tbody > tr > td{
    padding: 7px 6px;
    font-size: 13px;
    word-break: break-word;
}
.history-pager{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 0 6px;
    /* 分页条加浅色底，避免页码落在深色背景图上难以辨认 */
    background: rgba(255,255,255,.9);
    border-radius: 10px;
    margin-top: 6px;
}
.history-pager .pager-btn{
    padding: 5px 18px;
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    background: #2185d0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s;
}
.history-pager .pager-btn:hover:not(:disabled){
    background: #1678c2;
}
.history-pager .pager-btn:disabled{
    background: #b9c6d2;
    cursor: not-allowed;
}
.history-pager .pager-pos{
    font-size: 15px;
    font-weight: 700;
    color: #1f2a33;
    min-width: 44px;
    text-align: center;
    letter-spacing: .5px;
}
.history-pager .pager-total{
    font-size: 13px;
    color: #566573;
}

/* ---------- 左栏：头像在上、昵称在下（居中） ---------- */
.userInfo{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 26px;   /* 退出登录与头像之间留足间距 */
}

.avatar{
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 18px;
}

.userInfo .name{
    display: block;
    margin: 0 !important;   /* 昵称放到头像正下方 */
    font-size: 16px !important;
    text-align: center;
    word-break: break-all;
}

/* ---------- 左栏按钮：恢复原先宽度（约 72px）、彼此等宽并左对齐 ---------- */
.btn-container{
    display: flex;
    flex-direction: column;
    align-items: center;   /* 与头像、昵称同轴居中 */
    gap: 14px;
}

.btn-container > .ui.button,
.btn-container .ui.blue.buttons{
    width: 72px;
    margin: 0 !important;
    box-sizing: border-box;
}

/* 背景按钮组：整体与其它按钮等宽，内部文字按钮自适应、箭头固定 */
.btn-container .ui.blue.buttons{
    display: flex;
    position: relative;
}

.btn-container .ui.blue.buttons > .ui.button:not(.dropdown){
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
}

.btn-container .ui.blue.buttons > .ui.dropdown{
    flex: 0 0 auto;
    position: static;
}

/* 标记中的换行符不参与间距，统一由 gap 控制 */
.btn-container > br{
    display: none;
}

/* ---------- 背景下拉：默认收起，点击展开，菜单对齐按钮组左缘 ---------- */
.btn-container .ui.dropdown > .menu{
    display: none;
    position: absolute;
    left: 0 !important;
    right: auto !important;
    top: calc(100% + 4px) !important;
    min-width: 140px;
    z-index: 30;
    margin: 0;
}

.btn-container .ui.dropdown.active > .menu,
.btn-container .ui.dropdown.visible > .menu,
.btn-container .ui.dropdown.open > .menu{
    display: block;
}

/* ---------- 右栏卡片：圆角与间距统一 ---------- */
.blog-btn-wrap{
    margin-bottom: 14px;
}

.online-list{
    border-radius: 12px;
    margin-bottom: 14px;
}

/* 在线列表搜索框：与面板风格一致的浅色输入，支持按昵称/账号模糊搜索 */
.online-search{
    position: relative;
    display: flex;
    align-items: center;
    margin: 6px 8px 8px;
    padding: 0 8px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255,255,255,.9);
    border: 1px solid #d8e0ea;
    box-sizing: border-box;
}
.online-search .icon{
    color: #8a94a0;
    margin: 0 6px 0 0;
    flex: 0 0 auto;
}
.online-search input{
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #2f3b45;
}
.online-search .online-search-clear{
    cursor: pointer;
    margin: 0 0 0 6px;
    color: #b0b8c2;
}
.online-search .online-search-clear:hover{
    color: #e06c6c;
}

.chat-window{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: 380px;
    box-sizing: border-box;
    border-radius: 12px;
    overflow: hidden;
}

.chat-top{
    flex: 0 0 auto;
}

.chat-middle{
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    margin-left: 8px;
    margin-right: 8px;
}

/* 底部输入行：不再绝对定位，占满卡片内宽并与消息区左右对齐 */
.chat-bottom{
    position: static;
    flex: 0 0 auto;
    display: flex;
    margin: 8px;
}

.chat-bottom .ui.action.input{
    width: 100%;
    display: flex;
}

.chat-bottom .ui.action.input > input{
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.chat-bottom .ui.action.input > .button{
    flex: 0 0 auto;
}

.room-chat{
    margin-top: 12px;
}

/* ---------- 移动端：三栏纵向堆叠、左栏收敛为工具条 ---------- */
@media (max-width: 900px){
    html, body{
        height: auto;
        min-height: 100%;
    }

    .wrapper{
        position: relative;
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;   /* 窄屏兜底，杜绝横向滚动 */
    }

    .container-all{
        flex-direction: column;
        gap: 14px;
        margin-top: 12px;
        padding: 0 10px;
    }

    .left,
    .middle,
    .right{
        width: 100%;
        flex: 0 0 auto;
        margin: 0;
        box-sizing: border-box;
    }

    .left{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 12px;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 12px;
        padding: 10px;
    }

    .userInfo{
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 10px;
        margin: 0;
    }

    .userInfo .name{
        margin: 0 !important;
        text-align: left;
    }

    .btn-container{
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .title{
        font-size: 22px !important;
        margin-top: 8px !important;
        padding: 0 10px;
    }

    .lobby{
        width: 100%;
        min-height: 160px;
    }

.room-container{
        margin: 12px;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        grid-template-rows: none;
        grid-auto-rows: auto;
        gap: 16px;
        max-width: 100%;
    }

    .room{
        width: 100%;
        max-width: 210px;
        height: 208px;
    }

    .chessBoard{
        width: 100%;
        max-width: 540px;
        height: auto;
    }

    .chat-window{
        height: 300px;
    }

    .chat-middle{
        height: auto;
    }

    .ui.table{
        display: block;
        overflow-x: auto;
    }

    .online-list{
        box-sizing: border-box;
    }
}

@media (max-width: 600px){
    .container-all{
        padding: 0 8px;
    }

    .avatar{
        width: 56px;
        height: 56px;
        border-radius: 14px;
    }

    .userInfo .name{
        font-size: 15px !important;
    }

    .btn-container{
        gap: 8px;
    }

    .btn-container > .ui.button,
    .btn-container .ui.blue.buttons{
        width: 68px;
        margin: 0 !important;
    }

.room-container{
        grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
    }

    .chat-window{
        height: 260px;
    }
}

/* ===== 本轮新增：在线用户列表状态标签 ===== */
/* 仅展示当前游戏状态，昵称字体与配色保持原样 */
.online-status{
    margin-left: 6px;
    padding: 0 7px;
    font-size: 12px;
    line-height: 18px;
    border-radius: 9px;
    white-space: nowrap;
    vertical-align: middle;
}
.online-status.status-idle{
    color: #666666;
    background: #ececec;
}
.online-status.status-inroom{
    color: #1b6ec2;
    background: #e3f0fd;
}
.online-status.status-ingame{
    color: #b35b00;
    background: #fff0da;
}
.online-status.status-spectating{
    color: #6a3fc4;
    background: #f0e9fd;
}

/* ===== 本轮新增：房间与标题栏的观战人数 ===== */
/* 房间卡片：仅对局中的房间显示（位置由下方“卡片文案与按钮对齐”区块统一为底部居中） */
.room{
    position: relative;
}
.room-spectators{
    font-size: 12px;
    line-height: 18px;
    color: #8a5a2b;
    pointer-events: none;
}
/* 标题栏右侧：当前房间的观战人数 */
.title-spectators{
    margin-left: 12px;
    padding: 0 8px;
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
    background: #2185d0;
    border-radius: 10px;
    vertical-align: middle;
}

/* ===== 本轮新增：大厅房间卡片文案与按钮对齐 ===== */
/* 卡片统一为纵向弹性布局：标题统一距卡片上沿 10px 并水平居中 */
.room{
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 0 6px;
}
/* 标题不再用 width:100% 造成横向偏移，改为按内容宽度居中 */
.room .tip{
    width: auto;
    margin: 0;
    text-align: center;
}
/* 头像区/加号区统一置于标题下方，固定 130px 宽便于左右均分并居中 */
.room .room-avatar{
    width: 130px;
    margin: 8px 0 0;
    display: flex;
    justify-content: center;
}
/* 观战人数改为卡片底部居中一行（不再绝对定位） */
.room .room-spectators{
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    order: 3;          /* 排在标题与头像之后，作为卡片最后一行 */
    margin-top: auto;  /* 贴住卡片底部 */
    text-align: center;
}
/* 对局中房间卡片：观战人数上方的观战按钮（样式复用在线列表的观战按钮） */
.room .room-spectate-wrap{
    order: 2;              /* 排在标题/头像之后、观战人数(3)之前 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
}

/* ===== 本轮新增：在线列表行内邀请/观战按钮 ===== */
/* 昵称过长时省略，保证状态与按钮不被挤出 */
.online-user .online-nick{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 按钮组靠右显示在状态右侧 */
.online-user .online-actions{
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}
.mini-btn{
    padding: 1px 8px;
    font-size: 12px;
    line-height: 16px;
    color: #2185d0;
    background: #f2f7fd;
    border: 1px solid #a8c8ea;
    border-radius: 8px;
    cursor: pointer;
}
/* 冷却倒计时中的邀请按钮：不可点击并弱化 */
.mini-btn:disabled{
    cursor: not-allowed;
    opacity: .65;
}
/* 当天已被该用户屏蔽的邀请按钮：置灰、仍可点击以给出提示 */
.mini-btn.blocked{
    color: #9a9a9a;
    background: #f0f0f0;
    border-color: #dddddd;
    cursor: not-allowed;
}

/* 邀请弹窗中的第三个选项：以次要链接形式放在提示下方 */
.invite-block-link{
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: #b35b00;
    text-decoration: underline;
}
.mini-btn:hover{
    background: #e2effb;
}
.mini-btn.spectate{
    color: #2e8b40;
    background: #f2fbf2;
    border-color: #b6dbb6;
}
.mini-btn.spectate:hover{
    background: #e5f6e5;
}

/* ===== 本轮新增：房间内房主标识（样式从简，配色可自行调整） ===== */
.userInfo .owner-badge{
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    font-size: 12px;
    line-height: 18px;
    color: #8a5a2b;
    background: #f6e9d2;
    border: 1px solid #dcc39a;
    border-radius: 8px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ===== 本轮新增：大厅房间卡片「公开/私人」标识（仅等待加入的房间显示） ===== */
/* 作为卡片最后一行（与对局中卡片的观战人数同处底部），贴住卡片底部并水平居中 */
.room .room-visibility{
    order: 3;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    font-size: 12px;
    line-height: 18px;
    border-radius: 9px;
    white-space: nowrap;
    pointer-events: none;
}
.room .room-visibility .icon{
    margin: 0;
}
.room .room-visibility.public{
    color: #1b6ec2;
    background: #e3f0fd;
    border: 1px solid #b6d3f2;
}
.room .room-visibility.private{
    color: #8a5a2b;
    background: #fff3e0;
    border: 1px solid #e8cfa3;
}

/* ===== 本轮新增：房间内房主/对手昵称行（棋盘正下方，踢出按钮位于对手昵称右侧） ===== */
.room-players{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 2px 0 8px;
}
.room-players .rp-name{
    font-size: 15px;
    font-weight: 700;
    color: #1565c0;
    text-shadow: 0 0 4px #ffffff, 0 0 4px #ffffff, 0 1px 0 #ffffff;
}
.room-players .rp-owner-tag{
    margin-left: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #b35b00;
    text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff;
}
.room-players .rp-kick{
    margin: 0 !important;
    padding: 4px 10px;
    font-size: 12px;
}

/* ===== 本轮新增：标题左侧「公开/私人」苹果风格开关（仅房主在房间内可见） ===== */
.pk-switch-wrap{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 14px;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}
.pk-switch-wrap .pk-label{
    font-size: 13px !important;
    font-weight: 700;
    line-height: 1;
    color: #4a555f;                     /* 未选中也加深，避免在背景图上发虚 */
    text-shadow: 0 0 2px rgba(255,255,255,.95), 0 1px 1px rgba(255,255,255,.85);
    transition: color .2s;
}
.pk-switch-wrap .pk-label.on{
    color: #17222b;                     /* 选中的一侧更深，形成明显对比 */
}
.pk-switch{
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    border-radius: 13px;
    vertical-align: middle;
    box-shadow: inset 0 0 1px rgba(0,0,0,.35);
    transition: background .2s;
}
.pk-switch.is-private{ background: #2185d0; }   /* 旋钮在左 = 私人 = 蓝色背景 */
.pk-switch.is-public{ background: #2e8b40; }    /* 旋钮在右 = 公开 = 绿色背景 */
.pk-switch .pk-knob{
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,.35);
    transition: left .2s;
}
.pk-switch.is-public .pk-knob{ left: 22px; }

/* ===== 本轮新增：在线列表对齐与标注配色 ===== */
/* 搜索框左侧与列表状态灯（绿点）左对齐：去掉左右外边距，整行起点与列表项内容一致 */
.online-list .online-search{
    margin: 6px 0 8px;
}
/* 昵称列固定宽度：使每行的游戏状态列从同一横坐标开始，逐行对齐 */
.online-user .online-name{
    flex: 0 0 100px;
    display: flex;
    align-items: baseline;
    gap: 3px;
    min-width: 0;
}
/* 状态标签不再跟随昵称宽度浮动，紧贴固定起点 */
.online-user .online-status{
    margin-left: 0;
}
/* 昵称后「(我)」标记改为紫色（覆盖内嵌样式中的橙色） */
.online-list .online-user .online-self{
    color: #7b3fe4;
}

/* ===== 管理员能力：按钮、入口与面板 ===== */
/* 在线列表中的禁言/封号按钮沿用 mini-btn 基础样式，这里只补配色 */
.mini-btn.admin-mute{
    background: #f0ad4e;
    border-color: #e09b3d;
    color: #fff;
}
.mini-btn.admin-mute.muted{
    background: #8c8c8c;
    border-color: #7a7a7a;
}
.mini-btn.admin-ban{
    background: #d9534f;
    border-color: #c9302c;
    color: #fff;
}
.mini-btn.admin-view{
    background: #5b7cfa;
    border-color: #4a6ae8;
    color: #fff;
}

/* 大厅房间卡片上的管理员操作行 */
.room-admin-wrap{
    display: flex;
    justify-content: center;
    gap: 6px;
    /* 位于房间名称行之下单独一行：不再用负外边距上提，避免与名称重叠 */
    margin-top: 2px;
    flex-wrap: wrap;
}

/* 大厅管理员入口条 */
.admin-bar{
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin: 2px 0 8px;
}
.admin-bar-label{
    font-size: 13px;
    font-weight: 700;
    color: #5b7cfa;
}

/* 管理员浮层面板（隐身查看房间 / 封号名单） */
.admin-panel{
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 360px;
    max-height: 62vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    z-index: 2600;
    padding: 10px 12px;
    text-align: left;
}
.admin-banned-panel{
    right: 392px;
}
.admin-panel-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.admin-panel-title{
    font-size: 14px;
    font-weight: 700;
    color: #1f2a33;
}
.admin-panel-actions{
    display: flex;
    gap: 6px;
}
.admin-room-info p{
    margin: 2px 0;
    font-size: 13px;
    color: #2f3b45;
}
.admin-label{
    color: #7a8794;
}
.admin-room-chat{
    margin-top: 8px;
    flex: 1;
    min-height: 120px;
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 8px;
    background: #fafbfc;
}
.admin-chat-item{
    font-size: 13px;
    line-height: 1.6;
    color: #2f3b45;
    word-break: break-all;
}
.admin-chat-time{
    color: #9aa5b1;
    font-size: 12px;
}
.admin-chat-empty{
    font-size: 13px;
    color: #9aa5b1;
    text-align: center;
    padding: 12px 0;
}
.admin-panel-tip{
    margin: 8px 0 0;
    font-size: 12px;
    color: #9aa5b1;
}
/* ===== 管理员：封号名单（固定在大厅左侧「背景」按钮下方，默认展开）===== */
.admin-banned-box{
    margin-top: 14px;
    width: 100%;
    background: rgba(255, 255, 255, .95);
    border: 1px solid #f0cfcd;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    overflow: hidden;
    text-align: left;
}
.admin-banned-head{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(135deg, #fdecea, #f8dcd9);
    border-bottom: 1px solid #f2d6d3;
}
.admin-banned-title{
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: #c9302c;
    white-space: nowrap;
}
.admin-banned-count{
    font-size: 12px;
    color: #b4574f;
    background: #fff;
    border-radius: 9px;
    padding: 1px 7px;
}
.admin-banned-toggle{
    font-size: 12px;
    color: #9aa5b1;
    white-space: nowrap;
}
.admin-banned-list{
    max-height: 230px;
    overflow-y: auto;
    padding: 4px 8px 8px;
}
.admin-banned-item{
    padding: 7px 2px;
    border-bottom: 1px dashed #ececec;
}
.admin-banned-item:last-child{
    border-bottom: none;
}
.admin-banned-line1{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.admin-banned-line2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 3px;
}
.admin-banned-name{
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: #2f3b45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-banned-ip{
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: #9aa5b1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-banned-time{
    font-size: 11px;
    color: #b0b8c1;
    white-space: nowrap;
}
.admin-banned-empty{
    font-size: 12px;
    color: #9aa5b1;
    text-align: center;
    padding: 10px 0;
}
.admin-banned-more{
    font-size: 11px;
    color: #9aa5b1;
    text-align: center;
    padding: 6px 0 2px;
}



/* ===== 管理员隐身查看房间：进入房间内部视图时的提示 ===== */
/* 亮眼配色：白字 + 橙红渐变胶囊，确保在背景图上清晰可见 */
.admin-view-hint{
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #ffffff;
    background: linear-gradient(135deg, #ff6a3d, #e53935);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(229, 57, 53, .45);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.admin-view-chat-tip{
    text-align: center;
    color: #9aa5b1;
    font-size: 12px;
    padding: 8px 0;
}

/* ===== 房间内昵称旁的准备状态标签 ===== */
.rp-ready{
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    font-size: 11px;
    line-height: 17px;
    font-weight: 400;
    letter-spacing: 0;
    color: #8a6d3b;
    background: #fff7e6;
    border: 1px solid #f0d9a8;
    border-radius: 9px;
    vertical-align: middle;
    text-shadow: none;
}
.rp-ready.ready{
    color: #1e7b34;
    background: #e8f7ec;
    border-color: #b7e2c2;
}

/* ===== 房间内昵称旁的管理按钮（仅管理员可见）===== */
.rp-admin-actions{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    vertical-align: middle;
}
.rp-admin-actions .mini-btn{
    padding: 1px 7px;
    font-size: 11px;
    line-height: 1.5;
}

/* ===== 被禁言后聊天窗口的冻结：提示直接显示在输入框那一行 ===== */
/* 占据输入框的位置（与输入框同高同宽），发送按钮仍在同一行右侧且为禁用态 */
.muted-inline{
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #d9534f;
    background: #fdecea;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    cursor: not-allowed;
    white-space: nowrap;
    overflow: hidden;
}
.muted-inline .muted-scroll-text{
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    vertical-align: middle;
    will-change: transform;
}
.muted-inline .muted-scroll-text .muted-seg{
    display: inline-block;
    white-space: nowrap;
    /* 每段末尾留出固定间隔：第二段与第一段首尾衔接时不会粘连 */
    padding-right: 48px;
}
/* 文字完全放得下时居中静态显示；放不下时由 JS 加上 scrolling 类改为向左循环滚动 */
.muted-inline .muted-scroll-text:not(.scrolling) .muted-seg{
    padding-right: 0;
}
.muted-inline .muted-scroll-text:not(.scrolling) .muted-seg[aria-hidden="true"]{
    display: none;
}
/* 两段完全相同的文字首尾相接，位移 50% 即一整段宽度：滚到末尾时第一个字正好从右侧接上 */
/* 滚动时改为左对齐：从第一个字开始向左走，第二段正好在末尾接上，避免居中导致首字被裁掉 */
.muted-inline.muted-scrolling{
    justify-content: flex-start;
}
.muted-inline .muted-scroll-text.scrolling{
    animation-name: muted-marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes muted-marquee{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}
.chat-bottom button[disabled]{
    opacity: .6;
    cursor: not-allowed;
}

/* ===== 公共聊天中的管理员处置通报（禁言/封号，起到警戒作用）===== */
.public-notice-line{
    text-align: center;
    margin: 6px 4px;
}
.public-notice-text{
    display: inline-block;
    max-width: 96%;
    padding: 3px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #b3261e;
    background: #fdecea;
    border: 1px solid #f6c9c4;
    border-radius: 10px;
    word-break: break-all;
}

/* ===== 本轮新增：房间名称与卡片尺寸（大厅卡片与房间内展示，名称最多 9 个字符）===== */
/* 大厅房间网格：按可用宽度自适应排列，卡片整体加高加宽，避免元素挤压、溢出与相互覆盖 */
.room-container{
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    /* 行高交给内容决定，避免固定行高小于卡片高度时与下一行重叠 */
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 18px;
    width: 100%;
    max-width: 820px;
    margin: 24px auto;
    justify-items: center;
}
/* 房间卡片：加高加宽，容纳「名称行 + 管理按钮/状态 + 头像区 + 底部标识」且互不覆盖 */
.room{
    box-sizing: border-box;
    width: 100%;
    max-width: 210px;
    height: 208px;
}
/* 房间号：卡片首行，限宽 + 省略号兜底，完整显示「房间号：000001」且不超出卡片 */
.room .room-no{
    order: 0;
    box-sizing: border-box;
    max-width: 190px;
    padding: 0 8px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    color: #5b3a1a;
    background: rgba(255, 255, 255, .72);
    border-radius: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 头像区：占满卡片可用宽度并上移，给名称行腾出空间 */
.room .room-avatar{
    width: 100%;
    max-width: 186px;
    margin: 2px 0 0;
}
/* 卡片内玩家昵称：超长时单行省略，不换行、不挤压其它元素 */
.room .player-name{
    max-width: 100%;
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 创建房间卡片改为点击加号头像即建，不再需要名称输入框与创建按钮 */
/* 大厅搜索房间：位于「大厅」标题与房间网格之间 */
.room-search{
    display: flex;
    align-items: center;
    gap: 6px;
    width: 240px;
    margin: 0 auto 8px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #cbd5e1;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.room-search .icon.search{
    margin: 0;
    color: #9aa5b1;
}
.room-search .room-search-input{
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    line-height: 20px;
    color: #2f3b45;
}
.room-search .room-search-clear{
    margin: 0;
    color: #b9c2cb;
    cursor: pointer;
}
.room-search .room-search-clear:hover{
    color: #7a8794;
}
/* 搜索无匹配结果时的提示 */
.room-no-match{
    width: fit-content;
    margin: 0 auto 10px;
    padding: 4px 14px;
    font-size: 13px;
    color: #8a5a2b;
    background: #fff3e0;
    border: 1px solid #e8cfa3;
    border-radius: 12px;
}
/* ===== 房间内标题栏：显示「房间号：xxxxxx」，单行自适应，不换行、不挤压观战人数 ===== */
.title .title-main{
    display: inline-block;
    max-width: calc(100% - 40px);
    padding: 0 4px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== 本轮修复：大厅房间卡片不再拥挤，头像区与创建卡片居中 ===== */
.room-container{
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 22px;
    max-width: 900px;
    align-items: stretch;
}
.room{
    width: 100%;
    max-width: 236px;
    min-height: 246px;
    height: auto;
    padding: 14px 12px 12px;
    gap: 6px;
}
/* 玩家头像区：整行居中，左右两个头像各自在自己的半区内居中，互不挤压 */
.room .room-avatar{
    /* 等待卡片与对局卡片统一使用整行内容宽度，头像/名称/空位整体在卡片内居中 */
    width: 100%;
    max-width: 100%;
    min-height: 66px;
    margin: 8px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}
.room .room-left,
.room .room-right{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
    flex: 1 1 0;
    height: auto;
    min-width: 0;
}
.room .player-avatar{
    width: 52px;
    height: 52px;
    margin: 0;
    border-radius: 12px;
    object-fit: cover;
}
.room .player-name{
    max-width: 100%;
    margin: 4px 0 0;
    text-align: center;
}
.room .tip{
    margin: 0;
    font-size: 15px;
    line-height: 22px;
}
.room .room-admin-wrap{
    margin: 0;
}
/* 创建房间卡片：内容整体垂直居中，与上方标题、加号之间留出舒展间距 */
.room.create-room{
    justify-content: center;
    gap: 14px;
    padding: 18px 12px;
}
.room.create-room .tip{
    margin-bottom: 2px;
}
.room.create-room .room-avatar{
    margin: 0 auto;
    min-height: 76px;
}
.room.create-room .add-avatar{
    width: 64px;
    height: 64px;
}

/* ===== 等待加入卡片：标题与头像整块在卡片内垂直居中，公开/私人标签仍贴底 ===== */
/* 房间号保留在卡片顶部；「等待加入···」上方与底部标签上方均分剩余空间，实现红框区域居中 */
.room.state-waiting .tip{
    margin-top: auto;
}