/* ==================== 全局样式 ==================== */
/* 微软商店版（MSIX）合规：充值/VIP 走微软 IAP（msstoreAPI），隐藏外部 APK/PC 安装包下载入口
   与所有外部支付方式行（MS Store 政策 10.8.1 禁止游戏内引导外部购买机制）。body.msstore-build 由 app.js 在
   PAY_CHANNEL==='msstore' 时添加，!important 覆盖 showVipModal/showRechargeModal 等处的 inline display。 */
body.msstore-build #btnDownloadApp,
body.msstore-build #appDownloadBar,
body.msstore-build .auth-pc-download,
body.msstore-build #downloadAppOverlay,
body.msstore-build #paymentMethodsRow,
body.msstore-build #vipPaymentMethodsRow { display: none !important; }

/* Google Play 版（AAB）合规：商店政策「设备与网络滥用」禁止应用内引导用户从 Play 以外的渠道
   获取可执行文件（PC 安装包 / APK）。body.gplay-build 由 app.js 在 PAY_CHANNEL==='gplay' 时添加
   （安卓国际版 WebView 注入 AndroidIntl.getChannel()）。仅隐藏下载引导，【保留】充值/VIP 入口
   （走 Google Play Billing）；网页版 / PC 版 / 国内 APK 渠道为 'cn'，完全不受影响。 */
body.gplay-build #btnDownloadApp,
body.gplay-build #appDownloadBar,
body.gplay-build .auth-pc-download,
body.gplay-build #downloadAppOverlay,
body.gplay-build .replay-footer { display: none !important; }   /* 回放页页脚站外域名 */

/* 中国象棋棋子调色板 CSS 变量（默认经典红黑；VIP 可自定义，constants.js applyChessPalette 写入） */
:root {
    --piece-red: #c0392b;
    --piece-red-light: #e74c3c;
    --piece-black: #1a1a1a;
    --piece-black-light: #4a4a4a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    color: #e0e0e0;
    overflow-x: hidden;
}

#app { min-height: 100vh; }

.view { min-height: 100vh; }

/* 对局视图底部预留音效按钮空间，避免盖住快捷回复 */
#gameView {
    padding-bottom: 70px;
}

/* ==================== 加载动画 ==================== */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(212, 175, 55, 0.2);
    border-top-color: #d4af37;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

@keyframes spin { to { transform: rotate(360deg); } }

#loadingView {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    color: #d4af37;
}

#loadingView p { color: #8899aa; font-size: 14px; }

/* ==================== 通用按钮 ==================== */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: linear-gradient(135deg, #d4af37, #b8941f);
    color: #1a1a2e;
    font-weight: bold;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-large { padding: 14px 24px; font-size: 16px; width: 100%; }
.btn-sm { padding: 6px 14px; font-size: 13px; }

.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ==================== 认证视图（品牌背景 + 登录表单双栏/上下布局） ==================== */
#authView {
    display: flex;
    min-height: 100vh;
    background: #0a0a12;
}

.auth-brand {
    flex: 1.8;
    background-image: url('../images/login-brand/pc-brand.png');
    background-size: cover;
    background-position: left center;
    position: relative;
    min-height: 100vh;
}

.auth-brand-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, transparent 68%, #0a0a12 100%);
}

/* Logo 横幅条（手机端显示在 auth-brand 下方） */
.auth-logo-bar {
    display: none;
}

.auth-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    min-height: 100vh;
}

.auth-container {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    padding: 40px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-header h1 {
    font-size: 28px;
    color: #d4af37;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.auth-header .subtitle { color: #8899aa; font-size: 14px; }

.auth-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 4px;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #8899aa;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    font-family: inherit;
}

.auth-tab.active {
    background: linear-gradient(135deg, #d4af37, #b8941f);
    color: #1a1a2e;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    color: #ccd0d8;
    font-size: 14px;
}

.form-group input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

/* 修改资料：国家/地区下拉框（与 input 视觉一致） */
.form-group select {
    width: 100%;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 15px;
    font-family: inherit;
    transition: all 0.2s;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.form-group select:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.form-group select option {
    background: #2a2a3e;
    color: #e0e0e0;
}

.error-message {
    color: #ff6b6b;
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: 8px;
    padding: 10px;
    margin-top: 12px;
    font-size: 13px;
    text-align: center;
}

.auth-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    color: #667788;
    font-size: 13px;
}

.btn-guest {
    width: 100%;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(102, 187, 106, 0.15), rgba(76, 175, 80, 0.1));
    border: 1px solid rgba(102, 187, 106, 0.4);
    color: #81c784;
    padding: 12px 20px;
    font-size: 14px;
}

.btn-guest:hover {
    background: linear-gradient(135deg, rgba(102, 187, 106, 0.25), rgba(76, 175, 80, 0.2));
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

/* 微信一键登录按钮（微信绿） */
.btn-wechat {
    width: 100%;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #1aad19, #07c160);
    border: 1px solid rgba(26, 173, 25, 0.5);
    color: #ffffff;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(7, 193, 96, 0.25);
}

.btn-wechat:hover {
    background: linear-gradient(135deg, #16a015, #06b156);
    box-shadow: 0 6px 18px rgba(7, 193, 96, 0.35);
}

.wechat-icon {
    font-size: 16px;
    line-height: 1;
}

/* ===== APP 下载按钮 ===== */
.app-download-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.btn-download {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-download-android {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    color: #fff;
}
.btn-download-android:hover {
    background: linear-gradient(135deg, #43A047, #2E7D32);
    box-shadow: 0 4px 14px rgba(76, 175, 80, 0.3);
}

/* 登录页顶部 PC 安装程序下载按钮（Windows 蓝，风格同 Android 下载按钮） */
.auth-pc-download {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
    width: 100%;
}
.btn-download-pc {
    background: linear-gradient(135deg, #2196F3, #1565C0);
    color: #fff;
    white-space: nowrap;
}
.btn-download-pc:hover {
    background: linear-gradient(135deg, #1E88E5, #0D47A1);
    box-shadow: 0 4px 14px rgba(33, 150, 243, 0.3);
}

/* 大厅顶部下载按钮 */
.btn-download-lobby {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, #4CAF50, #2196F3);
    color: #fff;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-download-lobby:hover {
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    transform: translateY(-1px);
}

/* APP 下载弹窗 */
.modal-download-app {
    max-width: 420px;
    text-align: center;
}

.modal-download-app h2 {
    color: #d4af37;
    font-size: 22px;
    margin-bottom: 8px;
}

.download-app-desc {
    color: #8899aa;
    font-size: 14px;
    margin-bottom: 24px;
}

.download-app-buttons {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.download-app-confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 24px;
    border-radius: 12px;
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.35);
}

.dl-confirm-icon {
    font-size: 30px;
}

.dl-confirm-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.dl-confirm-name {
    font-size: 15px;
    font-weight: 700;
    color: #e8ecf1;
}

.dl-confirm-sub {
    font-size: 12px;
    color: #8899aa;
    font-weight: 400;
}

.btn-download-confirm {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    min-width: 140px;
}
.btn-download-confirm:hover {
    background: linear-gradient(135deg, #43A047, #2E7D32);
    box-shadow: 0 4px 14px rgba(76, 175, 80, 0.3);
}

.btn-download-android-large,
.btn-download-ios-large {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.btn-download-android-large {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
}
.btn-download-android-large:hover {
    background: linear-gradient(135deg, #43A047, #2E7D32);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3);
    transform: translateY(-2px);
}

.download-app-footer {
    text-align: center;
}

/* 微信扫码登录弹窗（PC） */
.wx-qr-modal {
    background: linear-gradient(135deg, #1e2a4a, #16213e);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px;
    padding: 32px 40px;
    width: 320px;
    max-width: 90vw;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    animation: modalIn 0.3s ease;
}

.wx-qr-modal h3 {
    color: #d4af37;
    font-size: 20px;
    margin-bottom: 8px;
}

.wx-qr-tip {
    color: #8899aa;
    font-size: 13px;
    margin-bottom: 20px;
}

.wx-qr-canvas {
    background: #ffffff;
    border-radius: 10px;
    padding: 12px;
    display: inline-block;
    margin-bottom: 20px;
}

.wx-qr-canvas img, .wx-qr-canvas canvas {
    display: block;
}

.wx-qr-modal .btn {
    width: 100%;
}

.wx-qr-refresh {
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(212, 175, 55, 0.35);
    color: #d4af37;
}

.wx-qr-refresh:hover {
    background: rgba(212, 175, 55, 0.12);
    border-color: #d4af37;
}

.footer-hint {
    margin-top: 4px;
    font-size: 12px;
}

/* ==================== 语言选择器 ==================== */
.lang-selector-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.lang-label {
    color: #8899aa;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 8px;
}

.lang-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

/* 登录页语言下拉菜单 */
select.lang-selector {
    display: block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 8px 34px 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccd0d8' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: #ccd0d8;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    min-width: 140px;
    outline: none;
}

select.lang-selector:focus {
    border-color: #d4af37;
    background-color: rgba(212, 175, 55, 0.08);
}

select.lang-selector option {
    background: #1e2a4a;
    color: #ccd0d8;
}

.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #ccd0d8;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.lang-btn:hover {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.12);
}

.lang-btn.active {
    border-color: #d4af37;
    background: linear-gradient(135deg, #d4af37, #b8941f);
    color: #1a1a2e;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
}

.lang-flag { font-size: 15px; line-height: 1; display: inline-flex; align-items: center; }
.lang-name { line-height: 1; white-space: nowrap; }

/* ==================== 国旗图片（本地 SVG，跨端一致） ==================== */
.flag-img {
    display: inline-block;
    height: 13px;
    width: auto;
    min-width: 18px;
    object-fit: contain;
    border-radius: 2px;
    vertical-align: -2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.lang-btn .flag-img { height: 14px; }
.lang-btn.compact .flag-img { height: 16px; vertical-align: middle; }
.country-badge-flag .flag-img { height: 15px; }
.leaderboard-entry .nickname .country-badge-flag .flag-img { height: 12px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); }

/* ==================== 自绘旗帜下拉（语言/国籍选择） ==================== */
.flag-dd {
    position: relative;
    display: inline-block;
    min-width: 160px;
    max-width: 100%;
    text-align: left;
}

.flag-dd-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 34px 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccd0d8' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: #ccd0d8;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
}

.flag-dd-btn:hover,
.flag-dd.open .flag-dd-btn {
    border-color: #d4af37;
    background-color: rgba(212, 175, 55, 0.08);
}

.flag-dd-btn .flag-dd-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flag-dd-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: #1e2a4a;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    z-index: 60;
    display: none;
    padding: 4px 0;
}

.flag-dd.open .flag-dd-list { display: block; }

.flag-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    color: #ccd0d8;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.flag-dd-item:hover { background: rgba(212, 175, 55, 0.12); }
.flag-dd-item.active { color: #d4af37; }
.flag-dd-item .flag-img { flex-shrink: 0; }
.flag-dd-noflag { display: inline-block; width: 19px; flex-shrink: 0; }

/* 资料弹窗内占满整行 */
#profileOverlay .flag-dd { display: block; width: 100%; }

/* ==================== 大厅顶部语言按钮组（紧凑） ==================== */
.lang-selector-lobby {
    flex: 0 0 auto;
    margin-left: 8px;
}

.lang-btn.compact {
    padding: 5px 8px;
    font-size: 15px;
    border-radius: 6px;
    border-color: transparent;
    background: transparent;
    opacity: 0.7;
}

.lang-btn.compact:hover {
    opacity: 1;
    background: rgba(212, 175, 55, 0.15);
}

.lang-btn.compact.active {
    opacity: 1;
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.22);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.3);
}

/* ==================== 大厅视图 ==================== */
.lobby-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    max-width: 1400px;
    margin: 0 auto;
}

.lobby-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lobby-title h1 {
    font-size: 24px;
    color: #d4af37;
    display: inline-block;
    margin-right: 16px;
}

.online-badge {
    background: rgba(76, 175, 80, 0.2);
    color: #66bb6a;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.online-badge::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #4caf50;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    animation: pulse 1.5s infinite;
}

/* 退出按钮：header 在线人数右侧，黄色按钮风格 */
.btn-logout-header {
    background: linear-gradient(135deg, #f5c518, #e6a817);
    color: #1a1400;
    border: 1px solid #c9950f;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    margin-left: 8px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
}
.btn-logout-header:hover { background: linear-gradient(135deg, #ffd83d, #f0b429); }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.user-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.user-profile {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.user-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-nickname { color: #d4af37; font-weight: bold; font-size: 16px; }

.guest-badge {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.4);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: normal;
}

.user-score { color: #ccd0d8; font-size: 13px; }
.user-stats { color: #8899aa; font-size: 12px; display: flex; align-items: baseline; gap: 10px; }
.user-score-inline { color: #ccd0d8; font-size: 13px; white-space: nowrap; }
.user-record-inline { white-space: nowrap; }

/* 用户三榜单称号：并排一行显示 */
.user-titles-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.user-titles-row .user-title { margin-right: 0; }

.user-coins {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffd700;
    font-size: 14px;
    font-weight: bold;
    margin-top: 2px;
}

.user-coins.low {
    color: #ff6b6b;
}

.btn-recharge-mini {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #1a1a2e;
    border: none;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-recharge-mini:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

/* 称号 */
.user-title {
    display: inline-block;
    background: #1565c0;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 4px;
    white-space: nowrap;
}
/* 铜钱榜称号：绿底白字 */
.user-title-coins {
    background: #2e7d32;
    color: #fff;
}
/* 胜率榜称号：黑底白字 */
.user-title-winrate {
    background: #000;
    color: #fff;
}

/* 每日登录送铜钱提示 */
.daily-bonus-hint {
    color: #4ecdc4;
    font-size: 11px;
    font-weight: normal;
    white-space: nowrap;
}

/* 每日铜钱提示 */
.header-actions {
    display: flex;
    align-items: center;
}
.daily-coins-tip {
    color: #e8b84b;
    font-size: 13px;
    white-space: nowrap;
    margin-right: 8px;
    text-shadow: 0 0 6px rgba(232, 184, 75, 0.4);
    animation: pulse 2s infinite;
}

/* 排行榜按钮（inline-flex 居中，保证与下载按钮同高） */
.btn-leaderboard {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.btn-leaderboard:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.4);
}

/* APP下载/排行榜 与 header 退出按钮同高（24px） */
.header-actions .btn-download-lobby,
.header-actions .btn-leaderboard {
    height: 24px;
    padding: 0 12px;
    line-height: 1;
    box-sizing: border-box;
}

/* 聊天室按钮：PC 显示全称「聊天室与棋社」，手机显示短称「聊天室」 */
.clubs-short { display: none; }

/* 提示弹窗按钮行（确定 + 可选取消，并排居中） */
.message-btns {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

/* 私信按钮旁的未读数量徽标 */
.dm-entry-wrap { position: relative; display: inline-flex; align-items: center; }
.dm-unread-badge {
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 8px;
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
}
#btnDmList.has-unread {
    border-color: rgba(231, 76, 60, 0.6);
}

/* 侧栏排行榜：迷你榜单 tab（积分/铜钱/胜率） */
.lb-tabs-mini {
    margin-top: 0;
    margin-bottom: 10px;
    gap: 4px;
}
.lb-tabs-mini .lb-tab {
    padding: 5px 2px;
    font-size: 12px;
    border-radius: 6px;
}
/* 侧栏排行榜条目内的关注按钮（紧凑版） */
.leaderboard-entry .lb-follow-btn {
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 10px;
    margin-left: 6px;
    flex-shrink: 0;
}

/* 排行榜弹窗（复合选择器提升优先级：覆盖 .modal-content 的 max-width:420px，
   PC 加宽到 640px 以完整显示榜单各列（含最右侧关注按钮）；手机端 media query 再收窄） */
.modal-content.modal-leaderboard {
    max-width: 640px;
    width: 92%;
}
/* 排行榜四个榜单 tab 切换 */
.leaderboard-tabs {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.lb-tab {
    flex: 1;
    padding: 8px 4px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: #ccd0d8;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.lb-tab:hover { background: rgba(255,255,255,0.1); }
.lb-tab.active {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    border-color: transparent;
    color: #fff;
    font-weight: bold;
}
/* 排行榜条目上的关注按钮（前10名可直关） */
.lb-follow-btn {
    flex-shrink: 0;
    padding: 3px 10px;
    border: 1px solid rgba(162, 155, 254, 0.55);
    border-radius: 12px;
    background: transparent;
    color: #a29bfe;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.lb-follow-btn:hover { background: rgba(162, 155, 254, 0.15); }
.lb-follow-btn.followed {
    border-color: rgba(80, 200, 120, 0.55);
    color: #50c878;
    background: rgba(80, 200, 120, 0.12);
}
.leaderboard-list {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden; /* 任何情况下不出现横向滚动条 */
    margin: 12px 0;
}
.leaderboard-item {
    display: grid;
    /* 最后一列（关注按钮）auto 自适应：俄语"Подписаться"等长文本不被截断 */
    grid-template-columns: 36px 1fr 80px 80px 100px auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 14px;
    transition: background 0.15s;
}
.leaderboard-item:hover {
    background: rgba(255,255,255,0.04);
}
.leaderboard-item.rank-top {
    background: rgba(255, 215, 0, 0.08);
}
.leaderboard-item.is-me {
    background: rgba(108, 92, 231, 0.12);
    border-left: 3px solid #a29bfe;
}
.lb-rank {
    width: 36px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
}
.lb-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* PC 弹窗：ID 过长时收缩省略，保底约 8 个字符宽度（覆盖 min-width:auto 阻止收缩的问题） */
.modal-leaderboard .lb-name { min-width: 8ch; }
.lb-title {
    background: #1565c0;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    text-align: center;
}
/* 铜钱榜称号：绿底白字 */
.lb-title-coins {
    background: #2e7d32;
    color: #fff;
}
/* 胜率榜称号：黑底白字 */
.lb-title-winrate {
    background: #000;
    color: #fff;
}
/* 榜单国籍徽标列（与称号列同列位二选一：选了国家显示国旗/文字「中国」，否则显示称号） */
.lb-country {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    white-space: nowrap;
    overflow: hidden;
}
.country-badge { display: inline-block; line-height: 1; }
.country-badge-flag { font-size: 16px; }
/* 文字版国籍（中国）：红底白字小徽标 */
.country-badge-name {
    background: #c0392b;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}
.lb-score {
    color: #ffd700;
    font-weight: bold;
    text-align: right;
}
.lb-record {
    color: #8899aa;
    font-size: 11px;
    text-align: right;
}
.lb-follow-btn-placeholder { display: block; }
.leaderboard-footer {
    text-align: center;
    margin-top: 8px;
}

/* 按钮行：整行铺满（与下排复盘/人机行两端平齐），三个按钮紧挨排列 */
.user-actions { display: flex; gap: 8px; flex-basis: 100%; margin-top: 4px; justify-content: flex-start; }
.user-actions-ai { display: flex; gap: 8px; justify-content: flex-start; }
.user-actions-ai-mobile { flex-basis: 100%; width: 100%; margin-top: 6px; }
/* PC端：对局复盘 + 人机对弈 + 残局闯关 并排一行（不随铜钱行隐藏，游客也可见），按钮宽度贴合文字 */
.user-actions-ai-desktop { flex-basis: 100%; width: 100%; margin-top: 2px; }
/* PC端：隐藏移动端按钮 */
.user-actions-ai-mobile { display: none; }

/* ==================== 推送通知 Toast（好友上线/被邀约） ==================== */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 300px;
}
.toast-item {
    background: rgba(25, 35, 55, 0.95);
    color: #e8eef7;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-left: 3px solid #4caf50;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    animation: toastIn 0.25s ease;
    word-break: break-all;
}
.toast-item.toast-invite { border-left-color: #42a5f5; }
.toast-item.toast-out { opacity: 0; transform: translateX(24px); transition: opacity 0.3s ease, transform 0.3s ease; }
@keyframes toastIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: none; }
}

/* ==================== 我的关注面板 ==================== */
.follow-panel {
    flex-basis: 100%;
    width: 100%;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 10px;
}
.follow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.follow-title-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.follow-title {
    font-size: 12px;
    white-space: nowrap;
}
.btn-follow-toggle {
    background: transparent;
    border: none;
    color: #8899aa;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    transition: transform 0.2s;
}
.btn-follow-toggle:hover { color: #ccd0d8; }
.btn-follow-toggle.collapsed { transform: rotate(-90deg); }
.follow-list.collapsed { display: none; }
.follow-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; overflow-x: hidden; }
.follow-empty {
    padding: 12px 8px;
    color: #8899aa;
    font-size: 12px;
    text-align: center;
}
.follow-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 12px;
}
.follow-item.clickable { cursor: pointer; }
.follow-item.clickable:hover { background: rgba(212, 175, 55, 0.12); }
/* 状态圆点：灰=离线 绿=在线 黄=落座 红=对局中 */
.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}
.status-dot.offline { background: #667788; }
.status-dot.online  { background: #4caf50; box-shadow: 0 0 6px rgba(76, 175, 80, 0.8); }
.status-dot.seated  { background: #ffb300; box-shadow: 0 0 6px rgba(255, 179, 0, 0.8); }
.status-dot.playing { background: #ff5252; box-shadow: 0 0 6px rgba(255, 82, 82, 0.9); animation: dotPulse 1.2s infinite; }
@keyframes dotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.follow-name {
    color: #ccd0d8;
    font-weight: bold;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}
.follow-status { color: #8899aa; flex: 1; min-width: 0; }
.follow-actions { display: flex; gap: 4px; flex-shrink: 0; }
.follow-btn {
    background: rgba(212, 175, 55, 0.15);
    color: #d4af37;
    border: 1px solid rgba(212, 175, 55, 0.4);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
}
.follow-btn.primary { background: rgba(76, 175, 80, 0.15); color: #81c784; border-color: rgba(76, 175, 80, 0.4); }
.follow-btn:hover { background: rgba(212, 175, 55, 0.3); }
.follow-btn.primary:hover { background: rgba(76, 175, 80, 0.3); }
.follow-unfollow {
    background: transparent;
    color: #667788;
    border: none;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    padding: 2px 4px;
}
.follow-unfollow:hover { color: #ff6b6b; }

/* 对局视图：玩家卡片上的关注按钮 */
.follow-player-btn {
    background: rgba(212, 175, 55, 0.15);
    color: #d4af37;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.follow-player-btn:hover { background: rgba(212, 175, 55, 0.3); }
.follow-player-btn.followed {
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
    border-color: rgba(76, 175, 80, 0.4);
}
.follow-player-btn.followed:hover { background: rgba(255, 107, 107, 0.2); color: #ff6b6b; border-color: rgba(255, 107, 107, 0.4); }

.lobby-main {
    display: flex;
    gap: 20px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
    flex: 1;
    min-height: 0;
    align-items: stretch;
    width: 100%;
}

/* 大厅视图纵向排列，让右侧排行榜填满剩余高度 */
#lobbyView { display: flex; flex-direction: column; }

/* ==================== 房间侧栏 ==================== */
.rooms-sidebar {
    width: 260px;
    flex-shrink: 0;
}

/* 左侧栏中的用户信息：竖排显示，适应窄宽度 */
.rooms-sidebar .user-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    margin-bottom: 14px;
}

.rooms-sidebar .user-profile {
    align-items: flex-start;
    width: 100%;
}

.rooms-sidebar .user-name-row {
    width: 100%;
}

.rooms-sidebar .user-nickname {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rooms-sidebar .user-stats,
.rooms-sidebar .user-titles-row,
.rooms-sidebar .user-coins {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rooms-sidebar .user-actions {
    /* 固定行数布局：容器绝不换行，每排按钮平分整行，文字在按钮内换行（不依赖 fit-text.js，避免抽搐） */
    flex-wrap: nowrap;
    width: 100%;
    justify-content: flex-start;
}

.rooms-sidebar .user-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    line-height: 1.25;
    overflow: hidden;
}

.rooms-sidebar .follow-panel {
    width: 100%;
    margin-top: 6px;
}

.rooms-sidebar .follow-list {
    max-height: 200px;
}

.rooms-sidebar h3 {
    color: #d4af37;
    font-size: 16px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #334;
}

.rooms-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.room-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.room-card:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(212,175,55,0.3);
}

.room-card.active {
    background: rgba(212,175,55,0.15);
    border-color: #d4af37;
    box-shadow: 0 0 10px rgba(212,175,55,0.2);
}

/* ==================== 房间选中提示（房间名下方，仅手机端显示） ==================== */
.room-selected-badge {
    display: none;
    margin-top: 3px;
    padding: 2px 6px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #1a1a2e;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.room-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    flex-shrink: 0;
}

.room-info { flex: 1; min-width: 0; }

.room-name {
    font-size: 14px;
    font-weight: bold;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.room-tags {
    display: flex;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.room-coins {
    font-size: 11px;
    color: #ff9944;
    background: rgba(255,153,68,0.15);
    padding: 1px 6px;
    border-radius: 4px;
}

.room-free {
    font-size: 11px;
    color: #44dd66;
    background: rgba(68,221,102,0.15);
    padding: 1px 6px;
    border-radius: 4px;
}

.room-guest {
    font-size: 11px;
    color: #8899aa;
    background: rgba(136,153,170,0.15);
    padding: 1px 6px;
    border-radius: 4px;
}

/* ==================== 桌子区域 ==================== */
.tables-section { flex: 1; min-width: 0; }

.tables-header {
    margin-bottom: 16px;
}

.tables-header h2 {
    color: #d4af37;
    font-size: 18px;
    margin-bottom: 4px;
}

.tables-header .muted {
    color: #8899aa;
    font-weight: normal;
    font-size: 13px;
}

/* 房间名 + 自动匹配按钮同行 */
.tables-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tables-title-row h2 {
    margin-bottom: 4px;
}

.btn-auto-match {
    white-space: nowrap;
}

.btn-auto-match:disabled {
    opacity: 0.6;
    cursor: default;
}

/* 预先布阵入口（仅自由布阵房间显示） */
.preset-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.preset-entry-hint {
    color: #8899aa;
    font-size: 13px;
}

/* 游戏视图内预布阵提示条 */
.pre-setup-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 12px;
    background: rgba(212, 175, 55, 0.08);
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
    font-size: 13px;
}

.pre-setup-notice .pre-setup-hint-text {
    color: #ccd;
}

.pre-setup-notice .pre-setup-use-hint {
    color: #d4af37;
    font-size: 12px;
}

.tables-empty {
    text-align: center;
    color: #667788;
    padding: 60px 20px;
    font-size: 15px;
}

.tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.table-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s;
}

.table-card:hover {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.1);
}

.table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.table-name { color: #d4af37; font-weight: bold; }

.table-status {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 10px;
}

.table-status.empty { color: #8899aa; background: rgba(255, 255, 255, 0.05); }
.table-status.partial { color: #ff9800; background: rgba(255, 152, 0, 0.15); }
.table-status.full { color: #4caf50; background: rgba(76, 175, 80, 0.15); }

.chairs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.chair {
    background: rgba(0, 0, 0, 0.2);
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.chair:hover:not(.occupied):not(.disabled) {
    background: rgba(212, 175, 55, 0.1);
    border-color: #d4af37;
    transform: translateY(-2px);
}

.chair.occupied {
    background: rgba(76, 175, 80, 0.1);
    border-color: #4caf50;
    border-style: solid;
    cursor: not-allowed;
}

.chair.disabled { cursor: not-allowed; opacity: 0.6; }

.chair .chair-empty-text { color: #556677; font-size: 13px; }
.chair .chair-icon { font-size: 24px; margin-bottom: 4px; }

.chair-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.chair-player .player-nickname { color: #d4af37; font-weight: bold; font-size: 14px; }
.chair-player .player-score { color: #8899aa; font-size: 12px; }

.sidebar {
    width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.leaderboard-panel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.leaderboard-panel .leaderboard {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.leaderboard-panel h3 {
    color: #d4af37;
    font-size: 16px;
    margin-bottom: 12px;
    text-align: center;
}

.leaderboard-entry {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 4px;
    font-size: 13px;
}

.leaderboard-entry:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }

.leaderboard-entry .rank {
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #8899aa;
    font-weight: bold;
    margin-right: 10px;
    font-size: 12px;
}

.leaderboard-entry .rank.gold { background: #d4af37; color: #1a1a2e; }
.leaderboard-entry .rank.silver { background: #c0c0c0; color: #1a1a2e; }
.leaderboard-entry .rank.bronze { background: #cd7f32; color: #fff; }

.leaderboard-entry .nickname { flex: 1; color: #ccd0d8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 侧栏排行榜昵称右侧的国籍徽标（ID 右边） */
.leaderboard-entry .nickname .country-badge-flag { font-size: 13px; margin-left: 4px; vertical-align: -1px; }
.leaderboard-entry .nickname .country-badge-name { font-size: 9px; padding: 1px 4px; margin-left: 4px; }
.leaderboard-entry .lb-entry-title { color: #a29bfe; font-size: 11px; margin-right: 6px; white-space: nowrap; flex-shrink: 0; }
.leaderboard-entry .score { color: #d4af37; font-weight: bold; flex-shrink: 0; margin-left: 6px; }

.leaderboard-entry.me {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

/* ==================== 对局视图 ==================== */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.header-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.game-header h1 {
    font-size: 20px;
    color: #d4af37;
    letter-spacing: 2px;
    margin: 0;
}

.header-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-piece-style {
    padding: 3px 10px;
    font-size: 12px;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 6px;
    color: #d4af37;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
}
.btn-piece-style:hover {
    background: rgba(212, 175, 55, 0.35);
}

/* 棋子调色板按钮（VIP 专属；🖌️） */
.btn-palette {
    padding: 2px 8px;
    font-size: 14px;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 6px;
    color: #d4af37;
    cursor: pointer;
    line-height: 1;
}
.btn-palette:hover {
    background: rgba(212, 175, 55, 0.35);
}
/* VIP 专属按钮/选项灰态：普通用户灰色不可点 */
.btn-palette.locked,
.btn-piece-style.locked,
.theme-dot.locked {
    opacity: 0.45;
    filter: grayscale(0.9);
    cursor: not-allowed;
    pointer-events: auto;
}

/* 棋子调色板弹窗 */
.modal-content.modal-palette {
    max-width: 380px;
    text-align: center;
}
.palette-desc {
    color: #aaa;
    font-size: 13px;
    margin: 6px 0 14px;
}
.palette-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.palette-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.palette-item:hover { border-color: rgba(212, 175, 55, 0.5); background: rgba(212, 175, 55, 0.08); }
.palette-item.active { border-color: #d4af37; background: rgba(212, 175, 55, 0.15); }
.palette-swatch { display: flex; gap: 8px; align-items: center; }
.palette-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}
.palette-name { font-size: 12px; color: #ddd; }

.header-info span {
    padding: 4px 16px;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    color: #d4af37;
    font-size: 13px;
}

/* 操作限时倒计时（布阵/走棋/调整/交换） */
.timer-display {
    margin-left: 10px;
    padding: 4px 14px !important;
    background: rgba(64, 158, 255, 0.15) !important;
    border-color: rgba(64, 158, 255, 0.45) !important;
    color: #6cb2ff !important;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}
.timer-display.urgent {
    background: rgba(255, 82, 82, 0.25) !important;
    border-color: rgba(255, 82, 82, 0.6) !important;
    color: #ff6b6b !important;
    animation: timerPulse 1s ease-in-out infinite;
}
@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* 断线重连顶部横幅 */
.reconnect-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    padding: 10px 16px;
    text-align: center;
    background: rgba(30, 41, 59, 0.96);
    color: #ffd166;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 209, 102, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.game-main {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    flex-wrap: wrap;
}

.side-panel {
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.player-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
}

.player-card.active {
    border-color: #d4af37;
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.2);
    background: rgba(212, 175, 55, 0.08);
}

.player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.player-color {
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 14px;
}

.player-color.red { color: #ff4444; background: rgba(255, 68, 68, 0.15); }
.player-color.black { color: #cccccc; background: rgba(50, 50, 50, 0.5); }
.player-color.white { color: #1a1a1a; background: rgba(255, 255, 255, 0.6); }

.player-name { color: #d4af37; font-size: 13px; }

.captured-pieces { font-size: 13px; min-height: 24px; }
.captured-label { color: #667788; }

.captured-piece {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    margin: 0 2px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: bold;
}

.captured-piece.red { color: #ff4444; background: rgba(255, 68, 68, 0.1); }
.captured-piece.black { color: #cccccc; background: rgba(50, 50, 50, 0.3); }
.captured-piece.white { color: #1a1a1a; background: rgba(255, 255, 255, 0.6); }

.game-info-panel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
}

.info-item { display: flex; justify-content: space-between; font-size: 13px; color: #8899aa; }

.check-warning {
    margin-top: 8px;
    padding: 6px;
    text-align: center;
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid rgba(255, 68, 68, 0.5);
    border-radius: 6px;
    color: #ff6666;
    font-weight: bold;
    font-size: 14px;
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ==================== 经济系统弹窗 ==================== */
.modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 20px;
}

.relief-icon {
    font-size: 60px;
    text-align: center;
    margin-bottom: 12px;
}

.highlight {
    color: #ffd700;
    font-weight: bold;
}

.relief-info {
    color: #8899aa;
    font-size: 13px;
    margin-top: 8px;
}

.modal-recharge {
    max-width: 500px;
    text-align: left;
}

.recharge-rates {
    text-align: center;
    margin-bottom: 16px;
}

.rate-info {
    color: #ffd700;
    font-size: 14px;
    font-weight: bold;
}

.amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.amount-item {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.amount-item:hover {
    border-color: rgba(255, 215, 0, 0.5);
    background: rgba(255, 215, 0, 0.08);
}

.amount-item.selected {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
}

.amount-cny {
    color: #ffd700;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
}

.amount-coins {
    color: #ccd0d8;
    font-size: 12px;
}

/* 海外版固定套餐（SKU）网格 */
.sku-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.sku-item {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.sku-item:hover {
    border-color: rgba(255, 215, 0, 0.5);
    background: rgba(255, 215, 0, 0.08);
}

.sku-item.selected {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
}

.sku-coins {
    color: #ffd700;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 4px;
}

.sku-price {
    color: #ccd0d8;
    font-size: 13px;
}

.sku-price .sku-usd {
    color: #ffd700;
    font-weight: bold;
}

/* Steam 账号绑定区 */
.steam-bind {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.steam-bind .rate-info {
    font-size: 13px;
}

.steam-bind .btn {
    min-width: 220px;
}

.custom-amount {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.custom-amount label {
    color: #ccd0d8;
    font-size: 14px;
}

.custom-amount input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px 12px;
    color: #ffd700;
    font-size: 16px;
    font-weight: bold;
}

.custom-amount input:focus {
    outline: none;
    border-color: #ffd700;
}

.custom-amount span {
    color: #8899aa;
    font-size: 14px;
}

.payment-methods h4 {
    color: #d4af37;
    font-size: 14px;
    margin-bottom: 10px;
}

.payment-options {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.payment-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.payment-option input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #ffd700;
}

.payment-option:has(input:checked) {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
}

.payment-icon {
    font-size: 24px;
}

.qrcode-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    padding: 16px;
    background: white;
    border-radius: 12px;
    max-width: 240px;
    margin: 20px auto;
}

.qrcode-container img,
.qrcode-container canvas {
    width: 200px;
    height: 200px;
}

.qrcode-amount {
    text-align: center;
    color: #ffd700;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
}

.qrcode-hint, .qrcode-tip {
    text-align: center;
    color: #8899aa;
    font-size: 13px;
    line-height: 1.6;
}

.qrcode-tip {
    color: #4caf50;
    font-style: italic;
}

/* 手机端 H5 支付提示与「打开微信支付」按钮 */
.qrcode-h5-tip {
    text-align: center;
    color: #ffd700;
    font-size: 14px;
    font-weight: bold;
    margin: 8px 0 4px;
}

#h5OpenBtn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    margin-bottom: 10px;
}

/* ==================== VIP 会员 ==================== */
/* 用户信息区顶部 VIP 徽章 */
.vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #d4af37, #b8941f);
    color: #1a1a2e;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 9px;
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1.6;
}

/* 「开通VIP」按钮：金色描边透明底；开通后金色渐变实心 */
.btn-vip {
    background: transparent;
    color: #d4af37;
    border: 1px solid #d4af37;
}
.btn-vip:hover {
    background: rgba(212, 175, 55, 0.15);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}
.btn-vip-active {
    background: linear-gradient(135deg, #d4af37, #b8941f);
    color: #1a1a2e;
    border: 1px solid #d4af37;
    font-weight: bold;
}

/* 大厅座位昵称旁的小皇冠徽标 */
.vip-badge-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    font-size: 10px;
    line-height: 1;
    background: rgba(212, 175, 55, 0.22);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
    flex: 0 0 auto;
}

/* 列表行内小头像（排行榜/关注/私信/棋社成员共用）：内联进昵称列，不改变 grid 列结构 */
.mini-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 14px;
    line-height: 1;
    margin-right: 4px;
    vertical-align: middle;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

/* 列表行内 VIP 小皇冠（昵称后） */
.vip-crown-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    margin-left: 4px;
    vertical-align: middle;
    flex: 0 0 auto;
}

/* 大厅用户信息区自己的头像 */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 18px;
    line-height: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.35);
    margin-right: 6px;
    vertical-align: middle;
    flex: 0 0 auto;
}

/* VIP 开通弹窗 */
.modal-content.modal-vip {
    max-width: 560px;
    text-align: left;
}

.vip-status {
    text-align: center;
    color: #ffd700;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    margin-bottom: 16px;
    /* 状态行内联重置战绩按钮（display:flex 由 JS 控制） */
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.vip-status .btn-reset-stats {
    flex-shrink: 0;
    white-space: nowrap;
}

.vip-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.vip-plan {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 8px 12px;
    text-align: center;
    transition: all 0.2s;
}
.vip-plan:hover {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.06);
    transform: translateY(-2px);
}

/* 热门套餐（年卡）：金色高亮 */
.vip-plan-hot {
    border-color: #d4af37;
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.25);
}
.vip-plan-hot .vip-plan-name { color: #ffd700; font-weight: bold; }

.vip-plan-name {
    font-size: 15px;
    color: #e0e0e0;
    margin-bottom: 8px;
}

.vip-plan-price {
    font-size: 22px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 10px;
    white-space: nowrap;
}

.vip-plan-unit {
    font-size: 11px;
    color: #8899aa;
    font-weight: normal;
    margin-left: 2px;
}

.btn-vip-buy {
    width: 100%;
    padding: 7px 0;
    font-size: 13px;
}

.vip-benefits {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.vip-benefits h4 {
    color: #d4af37;
    font-size: 14px;
    margin-bottom: 8px;
}

.vip-benefits ul { list-style: none; }

.vip-benefits li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ccd0d8;
    font-size: 13px;
    line-height: 1.7;
}

.vip-benefit-icon {
    width: 20px;
    text-align: center;
    flex: 0 0 auto;
}

/* VIP 已开通视图 */
.vip-active-view { display: flex; flex-direction: column; gap: 12px; }
.vip-active-status {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 10px;
    padding: 10px 14px;
    text-align: center;
    color: #d4af37;
    font-size: 15px;
    font-weight: bold;
}
.vip-active-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vip-active-perks li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ccd0d8;
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.vip-active-perks li:last-child { border-bottom: none; }
.vip-perk-check {
    color: #4caf50;
    font-weight: bold;
    flex-shrink: 0;
}
.vip-active-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 4px;
}
.vip-active-actions .btn { padding: 8px 18px; font-size: 14px; }

/* VIP 特权对比表 */
.vip-perks-wrap {
    overflow-x: auto;
    margin-top: 6px;
    border-radius: 8px;
}
.vip-perks-table {
    width: 100%;
    min-width: 440px;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 1.4;
}
.vip-perks-table th,
.vip-perks-table td {
    border: 1px solid rgba(255, 255, 255, 0.09);
    padding: 6px 5px;
    text-align: center;
    color: #ccd0d8;
    white-space: nowrap;
}
.vip-perks-table thead th {
    background: rgba(212, 175, 55, 0.14);
    color: #ffd700;
    font-weight: bold;
    font-size: 12px;
}
.vip-perks-table tbody td:first-child {
    text-align: left;
    font-weight: 600;
    color: #e0e0e0;
    white-space: normal;
    min-width: 88px;
}
/* 年卡推荐列高亮 */
.vip-perks-table thead th:nth-child(4),
.vip-perks-table tbody td:nth-child(4) {
    background: rgba(212, 175, 55, 0.08);
}
.vip-perks-table .yes { color: #4ade80; font-weight: bold; }
.vip-perks-table .no  { color: #f87171; }
.vip-perks-table .na  { color: #7a8898; }
.vip-perks-table .unit {
    color: #7a8898;
    font-size: 10px;
    margin-left: 1px;
}
.vip-perks-table .vip-extra {
    display: block;
    color: #ffd700;
    font-size: 10px;
    font-weight: bold;
}
.vip-perks-table .perk-price-row td {
    color: #ffd700;
    font-weight: bold;
}
.vip-perks-table .perk-price-row .unit {
    color: #7a8898;
    font-weight: normal;
}

/* 修改资料弹窗：头像选择网格（含 VIP 专属头像锁定态） */
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 6px;
}

.avatar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.avatar-item:hover {
    border-color: rgba(212, 175, 55, 0.5);
    background: rgba(212, 175, 55, 0.08);
}
.avatar-item.selected {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
}
.avatar-item.locked {
    cursor: not-allowed;
    opacity: 0.7;
}
.avatar-item.locked:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.avatar-icon { font-size: 26px; line-height: 1.2; }
.avatar-label { font-size: 11px; color: #8899aa; }
.avatar-item.selected .avatar-label { color: #ffd700; }

.avatar-lock {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    background: rgba(212, 175, 55, 0.25);
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 50%;
}

/* ==================== 棋盘 ==================== */
.board-container {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    /* 桌面端固定尺寸，由 JS 根据窗口计算；移动端由 JS 动态设置 */
    width: 576px;
    height: 648px;
    margin: 0 auto;
}

#boardCanvas { display: block; }

.pieces-layer, .overlay-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.piece {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    font-family: "STKaiti", "KaiTi", "SimSun", serif;
    cursor: pointer;
    pointer-events: auto;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), top 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease, opacity 0.3s ease;
    transform: translate(-50%, -50%);
    user-select: none;
    z-index: 10;
}

.piece-inner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    background: radial-gradient(circle at 30% 30%, #f5e6c8, #e8d5b0);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.piece.red .piece-inner { border-color: var(--piece-red, #c0392b); color: var(--piece-red, #c0392b); }
.piece.black .piece-inner { border-color: var(--piece-black, #1a1a1a); color: var(--piece-black, #1a1a1a); }

/* 图案模式：红底黑字 / 黑底白字（颜色跟随调色板变量） */
.piece.pattern.red .piece-inner {
    background: radial-gradient(circle at 30% 30%, var(--piece-red-light, #e74c3c), var(--piece-red, #c0392b));
    color: #000;
    border-color: var(--piece-red, #c0392b);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0,0,0,0.3);
}
.piece.pattern.black .piece-inner {
    background: radial-gradient(circle at 30% 30%, var(--piece-black-light, #4a4a4a), var(--piece-black, #1a1a1a));
    color: #fff;
    border-color: var(--piece-black, #1a1a1a);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0,0,0,0.3);
}
/* 图案模式：炮+国际象棋的白方炮 = 红圈（与中国象棋红方一致） */
.piece.pattern.white .piece-inner {
    background: radial-gradient(circle at 30% 30%, var(--piece-red-light, #e74c3c), var(--piece-red, #c0392b));
    color: #000;
    border-color: var(--piece-red, #c0392b);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0,0,0,0.3);
}

.piece.white .piece-inner {
    border-color: var(--intl-light-border, #222);
    color: var(--intl-light-ink, #1a1a1a);
    background: radial-gradient(circle at 30% 30%, var(--intl-light-hi, #ffffff), var(--intl-light-edge, #d8d8d8));
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.8), inset 0 -2px 4px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0,0,0,0.3);
}
.piece.intl.black .piece-inner {
    border-color: var(--intl-dark-border, #000);
    color: var(--intl-dark-ink, #f5f5f5);
    background: radial-gradient(circle at 30% 30%, var(--intl-dark-hi, #4a4a4a), var(--intl-dark-edge, #1a1a1a));
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.4);
}
.piece.hidden .piece-inner { color: #888; border-color: #888; background: rgba(128, 128, 128, 0.1); }

.piece:hover { transform: translate(-50%, -50%) scale(1.1); z-index: 15; }

/* 走子动画中：滑动期间浮在其他棋子上方（left/top 过渡已在 .piece 定义） */
.piece.moving { z-index: 30; }

.piece.selected { transform: translate(-50%, -50%) scale(1.15); z-index: 20; }
.piece.selected .piece-inner { box-shadow: 0 0 16px #d4af37, inset 0 1px 3px rgba(255, 255, 255, 0.5); border-color: #d4af37; }

.piece.in-check .piece-inner { animation: checkPulse 0.8s infinite; border-color: #ff4444; }

@keyframes checkPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 68, 68, 0.5); }
    50% { box-shadow: 0 0 20px rgba(255, 68, 68, 0.9); }
}

.move-hint {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
    z-index: 5;
}

.move-hint.empty::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(76, 175, 80, 0.5);
    border: 2px solid rgba(76, 175, 80, 0.8);
}

.move-hint.capture {
    width: 52px;
    height: 52px;
    border: 3px solid rgba(255, 68, 68, 0.7);
    background: rgba(255, 68, 68, 0.1);
    border-radius: 50%;
}

.placement-hint {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
    z-index: 5;
    border: 2px dashed rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.05);
    transition: all 0.2s;
}

.placement-hint:hover { border-color: rgba(212, 175, 55, 0.8); background: rgba(212, 175, 55, 0.2); }

.waiting-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.waiting-content {
    text-align: center;
    color: #d4af37;
}

.waiting-content p { margin-top: 16px; font-size: 16px; }

/* ==================== 棋子托盘 ==================== */
.piece-tray-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px;
}

.piece-tray-container h3, .move-history-container h3 {
    font-size: 14px;
    color: #d4af37;
    margin-bottom: 10px;
    text-align: center;
}

.piece-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    min-height: 60px;
}

.tray-piece {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    font-family: "STKaiti", "KaiTi", "SimSun", serif;
    cursor: pointer;
    border: 2px solid;
    background: radial-gradient(circle at 30% 30%, #f5e6c8, #e8d5b0);
    transition: all 0.2s;
    user-select: none;
}

.tray-piece.red { border-color: var(--piece-red, #c0392b); color: var(--piece-red, #c0392b); }
.tray-piece.black { border-color: var(--piece-black, #1a1a1a); color: var(--piece-black, #1a1a1a); }
.tray-piece.white { border-color: var(--intl-light-border, #222); color: var(--intl-light-ink, #1a1a1a); background: radial-gradient(circle at 30% 30%, var(--intl-light-hi, #ffffff), var(--intl-light-edge, #d8d8d8)); }
.tray-piece.intl.black { border-color: var(--intl-dark-border, #000); color: var(--intl-dark-ink, #f5f5f5); background: radial-gradient(circle at 30% 30%, var(--intl-dark-hi, #4a4a4a), var(--intl-dark-edge, #1a1a1a)); }
.tray-piece:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
.tray-piece.selected { transform: scale(1.15); box-shadow: 0 0 12px #d4af37; border-color: #d4af37; }

.tray-info { margin-top: 8px; text-align: center; font-size: 13px; color: #8899aa; }

/* ==================== 走棋历史 ==================== */
.move-history-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px;
    flex: 1;
    max-height: 380px;
    display: flex;
    flex-direction: column;
}

.move-history {
    flex: 1;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.7;
}

.move-history::-webkit-scrollbar { width: 6px; }
.move-history::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); }
.move-history::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.3); border-radius: 3px; }

.move-history-empty { color: #556677; text-align: center; padding: 16px 0; }

.move-entry { padding: 3px 6px; border-radius: 4px; }
.move-entry:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.move-entry .move-num { color: #667788; margin-right: 6px; }
.move-entry .move-red { color: #ff6666; }
.move-entry .move-black { color: #cccccc; }

/* ==================== 弹窗 ==================== */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content {
    background: linear-gradient(135deg, #1e2a4a, #16213e);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    max-width: 420px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-content h2 { color: #d4af37; margin-bottom: 12px; font-size: 22px; }
.modal-content p { color: #ccd0d8; font-size: 15px; line-height: 1.6; margin-bottom: 20px; white-space: pre-line; }
.modal-content .btn { min-width: 100px; }

.score-change {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.score-change.positive { color: #4caf50; }
.score-change.negative { color: #ff6b6b; }

/* 游戏结束弹窗：透明背景，让玩家透过弹窗看到棋盘和最后一步将死 */
#gameOverOverlay.modal-overlay {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: none;
}
#gameOverOverlay .modal-content {
    background: rgba(30, 42, 74, 0.82);
    backdrop-filter: blur(3px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}
/* 续弈：继续对弈提问与等待横幅 */
.rematch-question {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 600;
    color: #ffd76a;
    text-align: center;
}
.rematch-waiting {
    margin: 12px 0 0;
    font-size: 14px;
    color: #aab6d8;
    text-align: center;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1100px) {
    .game-main { flex-direction: column; align-items: center; }
    .side-panel { width: 100%; max-width: 576px; flex-direction: row; flex-wrap: wrap; }
    .side-panel > * { flex: 1; min-width: 180px; }
    .lobby-main { flex-direction: column; align-items: stretch; }
    .rooms-sidebar { width: 100%; }
    .sidebar { width: 100%; }

    /* 小屏/移动端：排行榜高度自适应内容，不强制撑满视口 */
    .sidebar { display: block; }
    .leaderboard-panel { flex: none; display: block; }
    .leaderboard-panel .leaderboard { flex: none; max-height: 400px; }
}

@media (max-width: 700px) {
    /* 棋盘：宽度撑满，高度由 JS 根据屏幕动态计算 */
    .board-container {
        width: 100%;
        max-width: calc(100vw - 32px);
        height: auto;
        transform-origin: top center;
        margin: 0 auto;
    }

    /* 对局视图移动端紧凑布局 */
    .game-header {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 6px;
    }
    .game-header h1 { font-size: 16px; }
    .header-title-row { gap: 8px; }
    .timer-display { padding: 3px 10px !important; font-size: 12px !important; }
    .header-info { font-size: 12px; }
    .game-main { padding: 12px; gap: 12px; }
    .side-panel { gap: 8px; }
    .side-panel > * { min-width: 140px; }
    .player-card { padding: 10px; }
    .game-info-panel { padding: 10px; }
    .action-buttons { gap: 6px; }
    .action-buttons .btn { padding: 8px 10px; font-size: 13px; }
    .move-history-container { padding: 10px; }
    .move-history { max-height: 120px; }

    /* 移动端大厅标题横排修复；黑框外缘缩进 16px 与主体（room-card）两端对齐 */
    .lobby-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 16px;
        width: calc(100% - 32px);
        margin: 0 16px;
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(212, 175, 55, 0.12);
        border-radius: 10px;
    }
    .lobby-header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }
    .lobby-title {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }
    .lobby-title h1 {
        white-space: nowrap;
        font-size: 20px;
        margin-right: 0;
    }
    .online-badge {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 12px;
    }
    .lang-selector-lobby {
        align-self: center;
        gap: 2px;
    }
    .btn-leaderboard {
        align-self: flex-end;
    }
    .header-actions {
        align-self: flex-end;
        gap: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: 100%;
    }
    .daily-coins-tip {
        font-size: 12px;
    }
    .user-info {
        align-self: stretch;
        width: 100%;
    }
    .daily-bonus-hint { display: none; }
    /* 手机端：右上角黄色退出按钮缩小（在线人数右边） */
    .btn-logout-header { font-size: 10px; padding: 1px 8px; margin-left: 4px; }
    /* 手机端：下载APP 与 排行榜 两按钮与退出按钮同高 */
    .header-actions .btn-download-lobby, .header-actions .btn-leaderboard {
        font-size: 10px;
        height: 18px;
        padding: 0 8px;
        line-height: 1;
    }
    /* 手机端：聊天室按钮显示短称 */
    .clubs-full { display: none; }
    .clubs-short { display: inline; }
    /* 手机端：登录页下载按钮竖排 */
    .app-download-bar {
        flex-direction: column;
    }
    /* 手机端：隐藏 PC 安装程序下载按钮（无意义） */
    .btn-download-pc {
        display: none;
    }
    .btn-download {
        font-size: 12px;
        padding: 8px 10px;
    }
    /* 手机端：铜钱/充值 缩小字体保持一行 */
    .user-coins {
        font-size: 12px;
        gap: 5px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    .btn-recharge-mini { font-size: 10px; padding: 2px 7px; }
    /* 手机端：用户信息左右分栏 —— 左按内容宽，右占满剩余空间（≥148px），给长语言按钮更多横向余地 */
    .user-info {
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(170px, 1fr);
        column-gap: 4px;
        row-gap: 0;
        align-items: start;
        width: 100%;
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(212, 175, 55, 0.12);
        border-radius: 10px;
        padding: 8px 10px;
        box-sizing: border-box;
    }
    .user-profile { display: contents; }
    .user-name-row { grid-area: 1 / 1; justify-content: flex-start; gap: 6px; }
    .user-name-row .guest-badge { display: none !important; }
    .user-titles-row { grid-area: 2 / 1; white-space: nowrap; overflow: hidden; min-width: 0; margin-top: 0; }
    .user-info.no-titles .user-titles-row { display: none; }
    .user-info.no-titles .user-stats { grid-area: 2 / 1; }
    .user-stats {
        grid-area: 3 / 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        min-height: 20px;
        align-items: center;
    }
    /* 右侧所有内容包进一个跨行容器：stretch 拉满左列总高，space-between 让铜钱行贴底与左边平齐 */
    .user-right-col {
        grid-area: 1 / 2 / 5 / 3;
        display: flex;
        flex-direction: column;
        gap: 2px;
        align-self: stretch;
        justify-content: space-between;
        width: 100%;
    }
    /* 手机端按钮行：固定行数（nowrap），文字在按钮内换行，不依赖 fit-text.js（避免抽搐） */
    .user-right-col .user-actions:not(.user-actions-ai) {
        display: flex;
        flex-wrap: nowrap;
        gap: 2px 3px;
        justify-content: flex-start;
        margin: 0 !important;
        flex: 0 0 auto !important;
        width: 100%;
    }
    .user-right-col .user-actions-ai {
        display: flex;
        flex-wrap: nowrap;
        gap: 2px 3px;
        justify-content: flex-start;
        margin: 0 !important;
        flex: 0 0 auto !important;
        width: 100%;
    }
    .user-right-col .btn,
    .user-right-col .btn-recharge-mini {
        font-size: 10px;
        padding: 3px 4px;
        white-space: nowrap;
        line-height: 1.3;
        min-height: 0;
        flex: none;
        margin: 0 !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .user-right-col .user-coins {
        display: flex;
        align-items: center;
        min-height: 0;
        font-size: 12px;
        gap: 1px;
        margin: 0 !important;
        white-space: nowrap;
        width: 100%;
    }
    .user-right-col .user-coins .btn-recharge-mini { margin-left: auto !important; font-size: 10px; padding: 2px 5px; }
    /* 按钮行内按钮：平分整行 + 文字在按钮内换行（覆盖上面 .btn 的 nowrap/flex:none；日语法语等长文案不再抽搐） */
    .user-right-col .user-actions .btn {
        flex: 1 1 0;
        min-width: 0;
        white-space: normal;
        word-break: break-word;
        text-align: center;
        line-height: 1.2;
        text-overflow: clip;
    }
    .user-actions-ai-mobile { display: flex; flex-wrap: nowrap; }
    .user-actions-ai-desktop { display: none !important; }
    /* 关注面板：第5行整行横跨两列 */
    .follow-panel { grid-area: 5 / 1 / 6 / 3; margin-top: 4px; padding: 6px 8px; }
    .follow-title { font-size: 12px; }
    .follow-item { font-size: 11px; padding: 4px 6px; gap: 6px; }
    .follow-name { max-width: 80px; }
    .follow-btn, .follow-unfollow { font-size: 10px; padding: 1px 6px; }
    /* 手机端：顶部国旗间距缩小，按钮/旗图微缩；允许换行兜底，绝对不超黑框 */
    .lang-selector-lobby {
        flex-wrap: wrap;
        gap: 2px;
        margin-left: 0;
        align-self: flex-start;
        max-width: 100%;
    }
    .lang-btn.compact {
        padding: 2px 3px;
        font-size: 13px;
        border-radius: 4px;
    }
    .lang-btn.compact .flag-img { height: 12px; min-width: 16px; }
    .lang-flag { font-size: 12px; }
    /* 手机端：lobby-main 与 header 左右边界对齐 */
    .lobby-main {
        padding: 12px 16px;
    }
    .rooms-sidebar {
        padding: 0;
        gap: 0;
    }
    /* 手机端：去掉桌面版 user-info 的底部 padding/分隔线/下边距，消除红框下方空白，主体紧贴红框 */
    .rooms-sidebar .user-info {
        padding-bottom: 8px;
        margin-bottom: 0;
        border-bottom: none;
    }
    .sidebar {
        padding: 0;
    }
    .rooms-sidebar h3 { display: none; }
    .rooms-list { gap: 8px; }
    /* 房间选中提示仅手机端显示（PC/网页端不显示） */
    .room-card.active .room-selected-badge { display: inline-block; font-size: 10px; padding: 2px 5px; }
    .leaderboard-item { font-size: 12px; gap: 6px; padding: 8px; }
    .lb-record { visibility: hidden; }
    .lb-rank { width: 28px; font-size: 14px; }
    .lb-score { min-width: 40px; }
    /* 手机端：排行榜弹窗加宽（复合选择器覆盖 .modal-content.modal-leaderboard 的 width:92%） */
    .modal-content.modal-leaderboard { width: calc(100vw - 8px); max-width: none; }
    .modal-leaderboard .lb-name { min-width: 56px; }
    .modal-leaderboard .leaderboard-item {
        grid-template-columns: 28px 1fr 48px 54px 0px auto;
        gap: 4px;
        padding: 8px 4px;
        font-size: 12px;
    }
    /* 手机端：关注按钮缩小，保证长语言文本完整显示 */
    .modal-leaderboard .lb-follow-btn { font-size: 10px; padding: 2px 6px; }
    .modal-leaderboard .lb-country { font-size: 11px; }
    .modal-leaderboard .lb-rank { width: auto; font-size: 14px; }
    .modal-leaderboard .lb-score { font-size: 12px; }
    .modal-leaderboard .lb-record { visibility: hidden; }
    /* 手机端：称号紧凑单行 */
    .user-titles-row { gap: 2px; flex-wrap: nowrap; }
    .user-titles-row .user-title { font-size: 9px; padding: 1px 3px; }
    .leaderboard-entry .nickname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* ==================== 音效控制按钮 ==================== */
#soundControls {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 9999;
    display: flex;
    gap: 8px;
}
.sound-btn {
    padding: 6px 12px;
    border: 1px solid rgba(120, 90, 40, 0.4);
    border-radius: 18px;
    background: rgba(255, 250, 235, 0.92);
    color: #5a4420;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    transition: all 0.15s;
    user-select: none;
}
.sound-btn:hover { background: #fff8e6; transform: translateY(-1px); }
.sound-btn.off { opacity: 0.55; background: #efe6d2; }
.sound-scheme-row { display: inline-flex; gap: 6px; align-items: center; }
.sound-select {
    padding: 5px 8px;
    border: 1px solid rgba(120, 90, 40, 0.4);
    border-radius: 14px;
    background: rgba(255, 250, 235, 0.92);
    color: #5a4420;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    outline: none;
}
.sound-select.locked { opacity: 0.55; }
/* 音乐/音效开关关闭时：对应方案选择下拉同步禁用（灰态不可点） */
.sound-select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.7);
    background: #efe6d2;
}

/* ==================== 布阵收藏 ==================== */
.modal-preset-picker {
    max-width: 480px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}
.preset-list {
    flex: 1;
    overflow-y: auto;
    margin: 12px 0;
}
.preset-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: all 0.15s;
}
.preset-item:hover {
    background: rgba(255, 215, 0, 0.06);
    border-color: rgba(255, 215, 0, 0.2);
}
.preset-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.preset-item-name {
    font-size: 15px;
    font-weight: 600;
    color: #e0e0e0;
}
.preset-item-meta {
    font-size: 12px;
    color: #8899aa;
}
.preset-item-actions {
    display: flex;
    gap: 8px;
}
.preset-item-actions button {
    padding: 4px 12px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #ccc;
    cursor: pointer;
    transition: all 0.15s;
}
.preset-item-actions .preset-use-btn:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
    color: #ffd700;
}
.preset-item-actions .preset-delete-btn:hover {
    background: rgba(255, 80, 80, 0.15);
    border-color: #ff5050;
    color: #ff5050;
}
.preset-empty {
    text-align: center;
    color: #667788;
    padding: 30px 0;
    font-size: 14px;
}
.preset-save-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 12px 0;
}
.preset-save-buttons .btn {
    flex: 1;
    max-width: 180px;
}

/* ==================== 观战 ==================== */
.spectator-banner {
    display: none;
    background: linear-gradient(90deg, rgba(120, 80, 160, 0.25), rgba(80, 120, 160, 0.25));
    border: 1px solid rgba(160, 120, 200, 0.3);
    border-radius: 8px;
    padding: 6px 14px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #c8b8e0;
    text-align: center;
}
.spectator-banner.active { display: block; }
.table-spectate-btn {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid rgba(120, 160, 200, 0.4);
    background: rgba(100, 150, 200, 0.12);
    color: #8cb8e0;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 6px;
}
.table-spectate-btn:hover {
    background: rgba(100, 150, 200, 0.25);
    border-color: rgba(120, 180, 220, 0.6);
    color: #a0c8e8;
}
.spectator-count {
    font-size: 11px;
    color: #778899;
    margin-left: 4px;
}

/* ==================== 对局聊天 ==================== */
.chat-container {
    background: rgba(30, 40, 55, 0.7);
    border: 1px solid rgba(120, 160, 200, 0.25);
    border-radius: 10px;
    padding: 10px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    max-height: 260px;
}
.chat-container h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #a8c4e0;
    border-bottom: 1px solid rgba(120, 160, 200, 0.2);
    padding-bottom: 6px;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    min-height: 80px;
    max-height: 150px;
    font-size: 13px;
    line-height: 1.5;
    color: #d0d8e0;
    padding-right: 4px;
}
.chat-empty {
    color: #8899aa;
    font-size: 12px;
    text-align: center;
    padding: 10px 0;
}
.chat-message {
    margin-bottom: 6px;
    word-break: break-word;
}
.chat-message.chat-self .chat-name { color: #6fd36f; }
.chat-message.chat-spectator .chat-name { color: #b8a0e0; }
.chat-message:not(.chat-self):not(.chat-spectator) .chat-name { color: #7ec8e0; }
.chat-name {
    font-weight: 600;
    margin-right: 4px;
}
.chat-text {
    color: #e0e6ed;
}
.chat-time {
    color: #778899;
    font-size: 11px;
    margin-left: 4px;
}
/* 留言点评查看弹窗（自定义残局列表） */
.ce-comment-list {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 0;
    font-size: 13px;
    color: #d0d8e0;
    text-align: left;
    min-width: 260px;
}
.ce-comment-list .chat-message {
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    margin-bottom: 0;
}
.chat-input-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    width: 100%;
    box-sizing: border-box;
}
.chat-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(120, 160, 200, 0.35);
    background: rgba(20, 30, 45, 0.8);
    color: #e0e6ed;
    font-size: 13px;
    outline: none;
}
.chat-input:focus {
    border-color: rgba(100, 180, 220, 0.7);
}
.chat-send-btn {
    padding: 6px 12px;
    font-size: 13px;
}
.chat-quick-btn {
    margin-top: 6px;
    padding: 5px 10px;
    font-size: 12px;
    width: 100%;
}
.modal-chat-quick .modal-content {
    max-width: 360px;
}
.quick-phrases {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
    max-height: 320px;
    overflow-y: auto;
}
.quick-phrase-item {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(40, 60, 90, 0.6);
    border: 1px solid rgba(120, 160, 200, 0.25);
    color: #d8e4f0;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    font-size: 14px;
}
.quick-phrase-item:hover {
    background: rgba(60, 90, 130, 0.7);
    border-color: rgba(120, 180, 220, 0.5);
}

/* 移动端聊天面板适配 */
@media (max-width: 768px) {
    /* 手机版：隐藏棋盘上方常规状态文字提示（对局进行中/你的回合等），棋盘红圈已标识行棋方；断线提示例外 */
    #phaseLabel {
        display: none;
    }
    #phaseLabel.disconnect {
        display: inline-block;
    }

    .chat-container {
        max-height: 180px;
        margin-top: 8px;
    }
    .chat-messages {
        max-height: 90px;
    }
    .chat-input-row {
        gap: 4px;
    }
    .chat-send-btn {
        padding: 5px 8px;
        font-size: 12px;
    }

    /* 登录页移动端：上下布局 */
    #authView {
        flex-direction: column;
    }
    .auth-brand {
        flex: none;
        height: 30vh;
        min-height: 160px;
        background-image: url('../images/login-brand/mobile-brand.png');
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .auth-brand-overlay {
        background: linear-gradient(to bottom, transparent 30%, #0a0a12 100%);
    }
    .auth-logo-bar {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 6px 16px;
        background: #0a0a12;
    }
    .auth-logo-bar img {
        max-width: 100%;
        height: auto;
        max-height: 44px;
    }
    .auth-form-panel {
        flex: 1;
        padding: 16px;
        min-height: auto;
        align-items: flex-start;
    }
    .auth-container {
        max-width: 100%;
        padding: 24px 20px;
    }
    .auth-header h1 {
        font-size: 22px;
    }
}

/* ==================== 备案信息 / 关于弹窗 ==================== */
.beian-line {
    margin-top: 14px;
    text-align: center;
    font-size: 11px;
}
.beian-line a {
    color: #8a94a6;
    text-decoration: none;
    letter-spacing: 0.5px;
}
.beian-line a:hover {
    color: #d4af37;
    text-decoration: underline;
}

.modal-about .about-body {
    text-align: center;
    padding: 8px 4px 4px;
}
.about-app-name {
    font-size: 18px;
    color: #e0e0e0;
    margin-bottom: 4px;
}
.about-version {
    font-size: 13px;
    color: #8a94a6;
    margin-left: 4px;
}
.about-desc {
    font-size: 13px;
    color: #8a94a6;
    margin-bottom: 14px;
}
.about-links {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 14px;
}
.about-links a {
    color: #d4af37;
    font-size: 14px;
    text-decoration: none;
}
.about-links a:hover {
    text-decoration: underline;
}
.about-beian {
    font-size: 13px;
    margin-bottom: 4px;
}
.about-beian a {
    color: #8a94a6;
    text-decoration: none;
}
.about-beian a:hover {
    color: #d4af37;
    text-decoration: underline;
}
.about-icp {
    font-size: 12px;
    color: #8a94a6;
}

/* ==================== 文档查看弹窗（应用内打开隐私政策/用户协议） ==================== */
.modal-doc {
    max-width: 720px;
    width: 92vw;
    height: 82vh;
    display: flex;
    flex-direction: column;
    padding: 18px 18px 14px;
    text-align: left;
}
.doc-viewer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.doc-viewer-head h2 {
    margin-bottom: 0;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-frame {
    flex: 1;
    width: 100%;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 10px;
    background: #fdf9ef;
}

/* ==================== 人机对弈设置弹窗 ==================== */
.ai-setup-modal {
    max-width: 480px;
    text-align: left;
}

.ai-setup-modal h2 {
    text-align: center;
    margin-bottom: 20px;
}

.ai-setup-section {
    margin-bottom: 18px;
}

.ai-setup-label {
    display: block;
    color: #d4af37;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.ai-game-types,
.ai-difficulties,
.ai-side-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-type-btn,
.ai-diff-btn,
.ai-side-btn {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #ccd0d8;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-type-btn:hover,
.ai-diff-btn:hover,
.ai-side-btn:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.3);
}

.ai-type-btn.active,
.ai-diff-btn.active,
.ai-side-btn.active {
    background: linear-gradient(135deg, #d4af37, #b8941f);
    color: #1a1a2e;
    border-color: #d4af37;
    font-weight: 600;
}

.ai-setup-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.ai-coin-info {
    display: none;
    text-align: center;
    margin-top: 14px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #d4af37;
    font-size: 13px;
    white-space: nowrap;
}

.ai-setup-actions .btn {
    min-width: 120px;
}

/* AI 思考指示器 */
.ai-thinking-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d4af37;
    font-size: 13px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==================== 对局历史弹窗 ==================== */
.modal-history {
    max-width: 620px;
    width: 92%;
}
.history-list {
    max-height: 60vh;
    overflow-y: auto;
    margin: 12px 0;
}
.history-empty {
    text-align: center;
    color: #8899aa;
    padding: 24px 0;
}
.history-item {
    background: rgba(40, 50, 65, 0.35);
    border: 1px solid rgba(120, 140, 170, 0.15);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.history-item-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hist-result {
    font-weight: 500;
    padding: 1px 10px;
    border-radius: 10px;
    font-size: 12px;
}
.hist-win { background: rgba(76, 175, 80, 0.18); color: #7ddc84; }
.hist-loss { background: rgba(229, 83, 75, 0.18); color: #f0998f; }
.hist-draw { background: rgba(150, 160, 175, 0.18); color: #b8c2d0; }
.hist-game { color: #d4af37; font-size: 13px; }
.hist-vs { color: #c0ccd8; font-size: 13px; }
.history-item-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 12px;
    color: #8899aa;
}
.hist-score { min-width: 34px; }
.hist-score-up { color: #7ddc84; }
.hist-score-down { color: #f0998f; }
.hist-replay-btn { margin-left: auto; }
.history-footer { text-align: right; }

/* ==================== 棋谱回放控制条 ==================== */
.replay-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    background: rgba(40, 50, 65, 0.35);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 8px;
}
.replay-btns {
    display: flex;
    gap: 6px;
    justify-content: center;
}
.replay-btns button {
    min-width: 42px;
}
.replay-slider {
    width: 100%;
    accent-color: #d4af37;
}
.replay-step-label {
    text-align: center;
    font-size: 12px;
    color: #b8c2d0;
    font-variant-numeric: tabular-nums;
}
.replay-share-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
}
.replay-share-row .btn {
    width: 100%;
}
.replay-banner {
    background: linear-gradient(90deg, rgba(180, 140, 50, 0.25), rgba(140, 110, 60, 0.25));
    border-color: rgba(212, 175, 55, 0.35);
    color: #e6d5a8;
}
.move-entry-replay {
    cursor: pointer;
}
.move-entry-replay:hover {
    background: rgba(212, 175, 55, 0.12);
    border-radius: 4px;
}
.move-entry-current {
    background: rgba(212, 175, 55, 0.2);
    border-radius: 4px;
}

/* ==================== 密码房：锁标识 / 控制条 / 弹窗 ==================== */

.table-lock {
    margin-left: 6px;
    font-size: 0.85em;
    cursor: help;
}

.table-lock-controls {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(212, 175, 55, 0.4);
}

.table-lock-controls button {
    flex: 1;
    padding: 6px 8px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid rgba(212, 175, 55, 0.6);
    background: rgba(212, 175, 55, 0.12);
    color: #d4af37;
    cursor: pointer;
    transition: background 0.15s;
}

.table-lock-controls button:hover {
    background: rgba(212, 175, 55, 0.25);
}

.table-lock-controls button.table-lock-btn.locked {
    border-color: #c0392b;
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

.table-lock-controls button.table-invite-btn {
    border-color: #2980b9;
    color: #3498db;
    background: rgba(52, 152, 219, 0.1);
}

.table-lock-controls button.table-leave-btn {
    border-color: #8e5a3a;
    color: #b07a4a;
    background: rgba(176, 122, 74, 0.1);
}

.table-lock-controls button.table-leave-btn:hover {
    background: rgba(176, 122, 74, 0.22);
}

/* 密码输入弹窗 */
.modal-pw {
    max-width: 320px;
    width: 90%;
}

.modal-pw .pw-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    margin-top: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: inherit;
    font-size: 15px;
    letter-spacing: 2px;
}

.modal-pw .pw-input:focus {
    outline: none;
    border-color: #d4af37;
}

.modal-pw .pw-hint {
    margin-top: 8px;
    color: #e74c3c;
    font-size: 13px;
}

.modal-pw .pw-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: flex-end;
}

/* 邀请好友弹窗 */
.modal-invite {
    max-width: 360px;
    width: 92%;
}

.invite-list {
    max-height: 300px;
    overflow-y: auto;
    margin: 10px 0;
}

.invite-empty {
    text-align: center;
    color: #8899aa;
    padding: 24px 0;
    font-size: 14px;
}

.invite-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.04);
}

.invite-nickname {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.invite-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
}

.invite-status.st-online, .invite-status.st-seated {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.12);
}

.invite-status.st-playing {
    color: #f39c12;
    background: rgba(243, 156, 18, 0.12);
}

.invite-status.st-offline {
    color: #7f8c8d;
    background: rgba(127, 140, 141, 0.12);
}

.invite-send-btn {
    padding: 4px 12px !important;
    font-size: 12px !important;
    min-width: auto;
}

/* ==================== 邀请链接 ==================== */

.invite-link-row {
    margin: 10px 0 4px;
    text-align: center;
}

.invite-link-row button {
    width: 100%;
}

.invite-link-fallback {
    margin: 8px 0;
}

.invite-link-fallback input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.6);
    background: rgba(0, 0, 0, 0.3);
    color: inherit;
    font-size: 13px;
}

/* ==================== 残局闯关 ==================== */
.endgame-desc {
    color: #9aa0ab;
    font-size: 13px;
    text-align: center;
    margin-bottom: 16px;
}

.endgame-levels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.endgame-level-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #ccd0d8;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.endgame-level-btn:hover:not(:disabled) {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.3);
}

.endgame-level-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.endgame-level-btn.cleared {
    border-color: rgba(76, 175, 80, 0.4);
    background: rgba(76, 175, 80, 0.08);
}

.endgame-level-no {
    flex: 0 0 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af37, #b8941f);
    color: #1a1a2e;
    font-weight: 700;
    font-size: 14px;
}

.endgame-level-name {
    flex: 1;
}

.endgame-level-status {
    font-size: 16px;
}

.endgame-progress {
    text-align: center;
    color: #d4af37;
    font-size: 13px;
    margin-bottom: 8px;
}

.endgame-over-buttons {
    margin-top: 4px;
}

/* ==================== 好友私信 ==================== */
.modal-dm {
    max-width: 440px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 560px;
}

.dm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.dm-title {
    color: #d4af37;
    font-size: 18px;
    font-weight: bold;
}

.modal-x {
    background: none;
    border: none;
    color: #8a93a6;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}

.modal-x:hover { color: #fff; }

/* 会话列表 */
.dm-conv-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dm-conv-empty {
    color: #8a93a6;
    text-align: center;
    margin: auto;
    font-size: 14px;
    line-height: 1.8;
}

.dm-conv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.dm-conv-item:hover { background: rgba(255, 255, 255, 0.1); }

/* 会话列表分组标题（互关好友 / 其他私信） */
.dm-conv-group {
    font-size: 11px;
    color: #8899aa;
    letter-spacing: 1px;
    padding: 8px 4px 4px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    margin-bottom: 4px;
}
.dm-conv-group:first-child { padding-top: 2px; }

.dm-conv-name {
    font-weight: bold;
    color: #e8eaf0;
    flex: 0 0 auto;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-conv-preview {
    flex: 1;
    color: #8a93a6;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 会话条目"关注TA"按钮（对方单向关注我时可回关） */
.dm-follow-back-btn {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 3px 8px;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.55);
    color: #d4af37;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.dm-follow-back-btn:hover { background: rgba(212, 175, 55, 0.28); }

/* 聊天头部"关注TA"按钮（金色描边，与返回按钮同尺寸） */
.dm-follow-back-header {
    background: rgba(212, 175, 55, 0.12) !important;
    border: 1px solid rgba(212, 175, 55, 0.55) !important;
    color: #d4af37 !important;
    padding: 3px 10px !important;
}

.dm-conv-meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.dm-conv-time { color: #6a7386; font-size: 11px; }

.dm-badge {
    background: #e74c3c;
    color: #fff;
    font-size: 11px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* 聊天视图 */
.dm-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dm-chat-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

.dm-chat-name {
    color: #e8eaf0;
    font-weight: bold;
    font-size: 15px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dm-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 2px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dm-msg {
    max-width: 78%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
    text-align: left;
}

.dm-msg.mine {
    align-self: flex-end;
    background: linear-gradient(135deg, #d4af37, #b8941f);
    color: #1a1a2e;
    border-bottom-right-radius: 4px;
}

.dm-msg.theirs {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.1);
    color: #e8eaf0;
    border-bottom-left-radius: 4px;
}

.dm-msg-time {
    display: block;
    font-size: 10px;
    color: rgba(0, 0, 0, 0.45);
    margin-top: 4px;
    text-align: right;
}

.dm-msg.theirs .dm-msg-time { color: #6a7386; }

.dm-input-row {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dm-input-row input {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #e8eaf0;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
}

.dm-input-row input:focus { border-color: #d4af37; }

.dm-input-row .btn { min-width: 70px; }

/* 关注面板头部操作区 */
.follow-header-actions {
    display: flex;
    gap: 4px;
}
.follow-header-actions .btn {
    font-size: 11px;
    padding: 3px 8px;
    white-space: nowrap;
}

/* 关注列表中的私信按钮 */
.follow-dm-btn {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #d4af37;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 4px;
}

.follow-dm-btn:hover { background: rgba(212, 175, 55, 0.3); }

/* ==================== 聊天室与棋社 ==================== */
.modal-clubs {
    max-width: 480px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 580px;
}

/* 房间/棋社列表 */
.clubs-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clubs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.clubs-item:hover { background: rgba(255, 255, 255, 0.1); }
.clubs-item-mine { border: 1px solid rgba(212, 175, 55, 0.45); }

.clubs-item-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.clubs-item-name {
    font-weight: bold;
    color: #e8eaf0;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clubs-item-topic {
    color: #8a93a6;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clubs-item-meta {
    color: #6b7688;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clubs-item .btn { flex: 0 0 auto; white-space: nowrap; }
.clubs-btn-disabled { opacity: 0.6; cursor: default !important; }

/* 玩家棋社分组头（含创建按钮） */
.clubs-player-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.clubs-create-btn { font-size: 11px; padding: 3px 8px; }

.clubs-create-hint {
    color: #6b7688;
    font-size: 11px;
    text-align: center;
    padding: 6px 4px;
    line-height: 1.6;
}

.clubs-pending-hint {
    color: #d4af37;
    font-size: 12px;
    text-align: center;
    padding: 6px 8px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px dashed rgba(212, 175, 55, 0.4);
    border-radius: 8px;
}

/* VIP 特权说明（创建棋社按钮下方） */
.clubs-vip-benefits {
    margin: 8px 4px 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(244, 208, 63, 0.04));
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 10px;
    text-align: center;
}
.clubs-vip-benefits-title {
    font-size: 13px;
    font-weight: 600;
    color: #d4af37;
    margin-bottom: 4px;
}
.clubs-vip-benefits-desc {
    font-size: 11px;
    color: #6b7688;
    line-height: 1.5;
    margin-bottom: 6px;
}
.clubs-vip-benefits-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    font-size: 11px;
    color: #4a5260;
    line-height: 1.7;
}
.clubs-vip-benefits-list li::before {
    content: '👑 ';
    color: #d4af37;
}
.clubs-vip-upgrade-btn {
    margin-top: 4px;
    font-size: 12px;
    padding: 5px 14px;
    background: linear-gradient(135deg, #d4af37, #f4d03f);
    border-color: #d4af37;
    color: #1a1a1a;
    font-weight: 600;
}
.clubs-vip-upgrade-btn:hover {
    background: linear-gradient(135deg, #f4d03f, #d4af37);
}

/* 聊天页 */
.clubs-chat { flex: 1; min-height: 0; }
.clubs-chat-header { gap: 8px; }
.clubs-chat-topic {
    flex: 1;
    min-width: 0;
    color: #8a93a6;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 管理面板（待审批/成员列表/退出/解散） */
.clubs-manage {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: rgba(0, 0, 0, 0.15);
}

.clubs-manage-title {
    font-size: 11px;
    color: #8899aa;
    letter-spacing: 1px;
    margin: 6px 0 4px;
}
.clubs-manage-title:first-child { margin-top: 0; }

.clubs-manage-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.clubs-manage-name {
    flex: 1;
    min-width: 0;
    color: #e8eaf0;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clubs-manage-row .btn { font-size: 11px; padding: 3px 8px; flex: 0 0 auto; }

.clubs-manage-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

/* 未加入棋社：申请加入行 */
.clubs-join-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 2px;
}

.clubs-join-hint {
    flex: 1;
    color: #8a93a6;
    font-size: 12px;
    line-height: 1.6;
}

/* 危险操作按钮（解散棋社） */
.btn-danger {
    background: rgba(229, 57, 53, 0.18) !important;
    border: 1px solid rgba(229, 57, 53, 0.6) !important;
    color: #ef5350 !important;
}

/* 手机端适配 */
@media (max-width: 700px) {
    .modal-clubs {
        width: calc(100vw - 16px);
        max-width: none;
        height: 80vh;
        padding: 14px;
    }
    .clubs-item { padding: 8px 10px; }
    .clubs-item-topic { font-size: 11px; }
    .clubs-manage { max-height: 150px; }
}

/* ==================== 残局编辑器（自定义残局） ==================== */

/* 编辑器工具条（游戏视图头部） */
.ce-toolbar {
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 8px;
}
.ce-tb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ce-seg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ce-seg-label {
    font-size: 12px;
    opacity: 0.8;
    margin-right: 2px;
}
.ce-seg-btn {
    padding: 4px 12px;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.ce-seg-btn:hover { background: rgba(255, 255, 255, 0.14); }
.ce-seg-btn.active {
    background: linear-gradient(135deg, #d4af37, #b8962e);
    border-color: #d4af37;
    color: #fff;
}
.ce-name-input {
    flex: 1;
    min-width: 140px;
    max-width: 260px;
    padding: 5px 10px;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    border-radius: 6px;
    outline: none;
}
.ce-name-input:focus { border-color: #d4af37; }
.ce-status-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.ce-status {
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}
.ce-status.ok { color: #66bb6a; }
.ce-status.bad { color: #ef5350; }
.ce-status.pending { color: #ffa726; }
.ce-errors {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.ce-err-item {
    font-size: 11px;
    color: #ef5350;
}

/* 托盘分组标签 */
.tray-group-label {
    width: 100%;
    font-size: 11px;
    opacity: 0.75;
    margin: 6px 0 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 2px;
}
.tray-group-label:first-child { margin-top: 0; }

/* 残局闯关弹窗：自定义残局子区 */
.endgame-custom-modal { max-height: 82vh; overflow-y: auto; }
.endgame-custom-section {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: left;
}
.endgame-custom-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.endgame-custom-header h3 {
    margin: 0;
    font-size: 14px;
}
.endgame-custom-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0 4px;
    max-height: 200px;
    overflow-y: auto;
}
.ce-list-empty {
    font-size: 12px;
    opacity: 0.6;
    padding: 8px 4px;
    text-align: center;
}
.ce-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}
.ce-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ce-item-name {
    font-size: 13px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ce-item-meta {
    font-size: 11px;
    opacity: 0.65;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ce-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.ce-del-btn { color: #ef5350 !important; }

/* 邀请好友弹窗 */
.ce-friend-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    margin: 8px 0;
    text-align: left;
}
.ce-friend-empty {
    font-size: 12px;
    opacity: 0.6;
    padding: 12px;
    text-align: center;
}
.ce-friend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}
.ce-friend-name {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.ce-friend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
    margin-right: 6px;
    vertical-align: middle;
}
.ce-friend-dot.on { background: #66bb6a; }

/* 分享链接弹窗 */
.ce-share-link-row { margin: 10px 0; }
.ce-share-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    border-radius: 6px;
}
.ce-qrcode {
    display: flex;
    justify-content: center;
    margin: 10px 0;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    width: fit-content;
}

/* 挑战弹窗 */
.ce-challenge-actions { flex-wrap: wrap; }

/* 手机端适配 */
@media (max-width: 700px) {
    .ce-toolbar { padding: 6px 8px; }
    .ce-tb-row { gap: 6px; }
    .ce-name-input { min-width: 100px; max-width: none; flex-basis: 100%; }
    .endgame-custom-modal { max-height: 88vh; }
    .ce-item-name { max-width: 130px; }
    .ce-friend-name { max-width: 130px; }

    /* VIP 会员移动端 */
    .modal-content.modal-vip { max-width: 94vw; padding: 22px 16px; }
    .vip-plans { gap: 4px; }
    .vip-plan { padding: 8px 2px 6px; }
    .vip-plan-name { font-size: 13px; margin-bottom: 4px; }
    .vip-plan-price { font-size: 15px; margin-bottom: 6px; }
    .btn-vip-buy { font-size: 11px; padding: 5px 0; }
    .avatar-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    /* 手机端：支付方式竖排缩小，避免横向溢出 */
    .payment-options { gap: 6px; width: 100%; justify-content: stretch; }
    .payment-option {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        padding: 8px 4px;
        gap: 2px;
        font-size: 11px;
        min-width: 0;
    }
    .payment-option input[type="radio"] {
        width: 14px;
        height: 14px;
    }
    .payment-icon { font-size: 18px; }
}

/* ==================== 账号删除（危险操作区 + 二次确认弹窗） ==================== */
/* Google Play「账号删除」要求：应用内需提供自助删除入口 */

.danger-zone {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed rgba(229, 57, 53, 0.35);
    text-align: left;
}
.danger-zone-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #ef5350;
    opacity: 0.9;
}
.btn-danger-link {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: #ef5350;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    font-family: inherit;
}
.btn-danger-link:hover { color: #ff7961; }
.danger-zone-hint {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.45);
}

.modal-delete-account { max-width: 460px; text-align: left; }
.danger-heading {
    margin: 0 0 14px;
    font-size: 19px;
    color: #ef5350;
    text-align: center;
}
.danger-warning {
    background: rgba(229, 57, 53, 0.1);
    border: 1px solid rgba(229, 57, 53, 0.35);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.danger-warn-lead {
    margin: 0 0 8px;
    font-size: 13px;
    color: #ff8a80;
    font-weight: 600;
}
.danger-list { margin: 0; padding-left: 18px; }
.danger-list li {
    font-size: 12.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.75);
    margin: 3px 0;
}
.danger-input-hint {
    margin: 6px 0 0;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.5;
}
.danger-error {
    margin: 10px 0 0;
    padding: 8px 10px;
    background: rgba(229, 57, 53, 0.15);
    border-left: 3px solid #ef5350;
    border-radius: 4px;
    font-size: 12.5px;
    color: #ff8a80;
}
.danger-footnote { margin: 14px 0 0; text-align: center; font-size: 11.5px; }
.danger-footnote a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.danger-footnote a:hover { color: #d4af37; }

/* 手机端：弹窗内容可滚动，避免小屏溢出 */
@media (max-width: 700px) {
    .modal-delete-account {
        max-width: calc(100vw - 24px);
        max-height: 86vh;
        overflow-y: auto;
    }
    .danger-list li { font-size: 12px; }
}