/**
 * 麻将游戏 - 大厅/房间/对局样式
 * 陆筒工作室 Luto Studio
 * v2 - 大厅重构版
 */

.mahjong-page {
    margin:0; padding:0; min-height:100vh;
    background: linear-gradient(135deg, #0a1628 0%, #1a1a2e 50%, #16213e 100%);
    color: #e0e0e0;
}

.mj-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.08);
    position:sticky; top:0; z-index:50;
}

.mj-back-btn {
    color:#aaa; text-decoration:none; font-size:15px;
    padding:6px 12px; border-radius:8px;
    background:rgba(255,255,255,0.06);
    transition:all 0.2s;
}
.mj-back-btn:hover { color:#fff; background:rgba(255,255,255,0.12); }

.mj-title { font-size:18px; font-weight:bold; color:#fff; }
.mj-beans { font-size:15px; color:#f39c12; font-weight:bold; }

/* ===== 大厅 ===== */
.mj-lobby { max-width:900px; margin:0 auto; padding:30px 20px; }
.mj-lobby-subtitle { text-align:center; font-size:22px; margin-bottom:30px; color:#ccc; }

.mj-region-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px; }

.mj-region-card {
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px; padding:28px 20px; text-align:center;
    cursor:pointer; transition:all 0.25s ease;
    position:relative; overflow:hidden;
}
.mj-region-card::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(243,156,18,0.15), rgba(231,76,60,0.05));
    opacity:0; transition:opacity 0.25s;
}
.mj-region-card:hover {
    transform:translateY(-4px);
    border-color:rgba(243,156,18,0.4);
    box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.mj-region-card:hover::before { opacity:1; }
.mj-region-icon { font-size:48px; margin-bottom:12px; }
.mj-region-name { font-size:20px; font-weight:bold; color:#fff; margin-bottom:8px; position:relative; z-index:1; }
.mj-region-desc { font-size:13px; color:#aaa; margin-bottom:6px; position:relative; z-index:1; }
.mj-region-diff { font-size:12px; color:#f39c12; position:relative; z-index:1; }

/* ===== 弹窗 ===== */
.mj-modal { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; }
.mj-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.7); }
.mj-modal-content {
    background:#1a1a2e; border-radius:16px; padding:32px;
    position:relative; z-index:1; max-width:420px; width:90%;
    text-align:center; border:1px solid rgba(255,255,255,0.1);
}
.mj-modal-content h3 { font-size:20px; color:#fff; margin-bottom:24px; }
.mj-mode-options { display:flex; gap:16px; margin-bottom:20px; }
.mj-mode-btn {
    flex:1; padding:20px 16px; border-radius:14px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.04); color:#fff; cursor:pointer;
    transition:all 0.2s; font-family:inherit;
}
.mj-mode-btn:hover { border-color:rgba(243,156,18,0.5); background:rgba(243,156,18,0.08); }
.mj-mode-icon { font-size:32px; margin-bottom:8px; }
.mj-mode-label { font-size:17px; font-weight:bold; margin-bottom:4px; }
.mj-mode-desc { font-size:12px; color:#888; }
.mj-modal-close {
    padding:10px 30px; border-radius:10px; border:none;
    background:rgba(255,255,255,0.1); color:#aaa;
    cursor:pointer; font-size:15px; font-family:inherit;
}
.mj-modal-close:hover { background:rgba(255,255,255,0.18); color:#fff; }

/* ===== 房间页 ===== */
.mj-room { max-width:600px; margin:0 auto; padding:24px 20px; }
.mj-room-info {
    text-align:center; margin-bottom:24px; padding:20px;
    background:rgba(255,255,255,0.04); border-radius:14px;
    border:1px solid rgba(255,255,255,0.08);
}
.mj-room-code { font-size:18px; color:#fff; margin-bottom:6px; }
.mj-room-code strong { color:#f39c12; font-size:24px; letter-spacing:2px; }
.mj-room-type { font-size:14px; color:#888; }

.mj-match-wait {
    text-align:center; padding:32px; margin-bottom:20px;
    background:rgba(255,255,255,0.03); border-radius:14px;
}
.mj-match-spinner {
    width:48px; height:48px; margin:0 auto 16px;
    border:3px solid rgba(255,255,255,0.15);
    border-top-color:#f39c12; border-radius:50%;
    animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.mj-match-text { font-size:16px; color:#ccc; margin-bottom:8px; }
.mj-match-countdown { font-size:32px; font-weight:bold; color:#f39c12; }

.mj-players-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }
.mj-player-slot {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px; padding:16px; text-align:center; transition:all 0.2s;
}
.mj-player-slot.filled { border-color:rgba(39,174,96,0.3); background:rgba(39,174,96,0.06); }
.mj-player-avatar { font-size:32px; margin-bottom:6px; }
.mj-player-name { font-size:14px; color:#ddd; font-weight:bold; }
.mj-player-status { font-size:12px; color:#888; margin-top:4px; }

/* 房间槽位操作按钮 */
.mj-slot-actions { margin-top:10px; min-height:30px; }
.mj-slot-btn {
    padding:5px 14px; border-radius:6px; border:none;
    font-size:12px; cursor:pointer; font-family:inherit;
    transition:all 0.2s;
}
.mj-slot-add {
    background:linear-gradient(135deg, #27ae60, #2ecc71);
    color:#fff;
}
.mj-slot-add:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(39,174,96,0.35); }
.mj-slot-accept {
    background:linear-gradient(135deg, #3498db, #2980b9);
    color:#fff;
}
.mj-slot-accept:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(52,152,219,0.35); }
.mj-slot-invite {
    background:linear-gradient(135deg, #f39c12, #e67e22);
    color:#fff;
}
.mj-slot-invite:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(243,156,18,0.35); }
.mj-slot-pending { font-size:12px; color:#f39c12; }

.mj-room-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.mj-btn {
    padding:12px 24px; border-radius:10px; border:none;
    font-size:15px; font-weight:bold; cursor:pointer;
    color:#fff; font-family:inherit; transition:all 0.2s;
}
.mj-btn:disabled { opacity:0.4; cursor:not-allowed; }
.mj-btn-copy { background:#3498db; }
.mj-btn-copy:hover:not(:disabled) { background:#2980b9; }
.mj-btn-start { background:#27ae60; }
.mj-btn-start:hover:not(:disabled) { background:#219a52; }
.mj-btn-leave { background:rgba(255,255,255,0.08); color:#aaa; }
.mj-btn-leave:hover { background:rgba(231,76,60,0.2); color:#e74c3c; }

@media (max-width:600px) {
    /* 顶部栏 */
    .mj-header { padding:8px 10px; flex-wrap:wrap; gap:6px; }
    .mj-title { display:none; }
    .mj-back-btn { font-size:12px; padding:4px 8px; }
    .mj-header-right { gap:4px; flex-wrap:wrap; justify-content:flex-end; }
    .mj-hdr-btn { padding:4px 8px; font-size:11px; border-radius:6px; }
    .mj-user-info { gap:4px; font-size:12px; }
    .mj-nickname { max-width:60px; font-size:12px; }
    .mj-beans { font-size:12px; }

    /* 大厅地区卡片 */
    .mj-lobby { padding:12px 8px; }
    .mj-lobby-subtitle { font-size:17px; margin-bottom:16px; }
    .mj-region-grid { grid-template-columns:repeat(3, 1fr); gap:6px; }
    .mj-region-card { padding:12px 6px; border-radius:12px; }
    .mj-region-icon { font-size:28px; margin-bottom:4px; }
    .mj-region-name { font-size:13px; }
    .mj-region-desc { display:none; }
    .mj-region-diff { font-size:10px; }

    /* 模式选择弹窗 */
    .mj-mode-options { flex-direction:column; }
    .mj-mode-btn { padding:14px 12px; }

    /* 房间页 */
    .mj-players-grid { grid-template-columns:repeat(2, 1fr); gap:6px; }
    .mj-player-slot { padding:10px 6px; border-radius:10px; }
    .mj-player-avatar { font-size:24px; }
    .mj-player-name { font-size:11px; }
    .mj-player-status { font-size:10px; }
    .mj-room-info { padding:12px 8px; }
    .mj-room-code { font-size:14px; }
    .mj-room-code strong { font-size:18px; }
    .mj-room-type { font-size:11px; }
    .mj-btn { padding:10px 16px; font-size:13px; }

    /* 弹窗通用 */
    .mj-modal-content { padding:16px 12px; border-radius:12px; }
    .mj-modal-content h3 { font-size:16px; margin-bottom:12px; }
    .mj-modal-x { top:8px; right:10px; font-size:16px; }
    .mj-modal-wide { max-width:98vw !important; }

    /* 签到弹窗 — 竖排：日历上 + 里程碑下 */
    .mj-modal-signin { max-width:98vw !important; }
    .mj-modal-signin .mj-modal-content { padding:6px 6px; }
    .mj-modal-signin h3 { font-size:12px; margin-bottom:3px; }
    .mj-signin-container { flex-direction:column; gap:4px; overflow-y:auto; max-height:75vh; }
    .mj-signin-left { flex:none; width:100%; }
    .mj-signin-right { flex:none; width:100%; border-left:none; border-top:1px solid rgba(255,255,255,0.08); padding-left:0; padding-top:4px; margin-top:2px; }
    .mj-signin-calendar { margin-bottom:1px; }
    .mj-cal-header { margin-bottom:1px; }
    .mj-cal-nav { width:18px; height:18px; font-size:9px; border-radius:3px; }
    .mj-cal-month { font-size:10px; }
    .mj-cal-weekdays { font-size:7px; gap:0; margin-bottom:1px; }
    .mj-cal-weekdays span { padding:0; }
    .mj-cal-grid { gap:1px; }
    .mj-cal-cell { font-size:8px; border-radius:2px; }
    .mj-signin-tip { font-size:9px; margin-bottom:1px; }
    .mj-signin-btn { padding:3px 10px; font-size:10px; border-radius:4px; }

    /* 里程碑 */
    .mj-milestone-title { font-size:9px; margin:0 0 2px; text-align:left; }
    .mj-milestone-list { flex-direction:row; flex-wrap:wrap; gap:2px; }
    .mj-milestone-item { padding:2px 4px; border-radius:3px; flex:0 0 auto; }
    .mj-milestone-info { flex-direction:row; gap:4px; align-items:center; }
    .mj-milestone-label { font-size:7px; }
    .mj-milestone-label strong { font-size:8px; }
    .mj-milestone-beans { font-size:7px; }
    .mj-milestone-btn { padding:1px 4px; font-size:7px; }
    .mj-milestone-done { font-size:7px; padding:0 3px; }

    /* 好友弹窗 */
    .mj-modal-friend { max-width:98vw !important; }
    .mj-friend-tab { font-size:12px; padding:6px 0; }
    .mj-friend-row { padding:8px 10px; }
    .mj-friend-name { font-size:12px; }
    .mj-friend-search input { padding:6px 10px; font-size:12px; }
    .mj-friend-search-btn { padding:6px 12px; font-size:12px; }
}

/* ===== 用户信息栏 ===== */
.mj-header-right {
    display:flex; align-items:center; gap:10px;
}
.mj-hdr-btn {
    padding:6px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.15);
    background:rgba(255,255,255,0.06); color:#ccc;
    cursor:pointer; font-size:13px; font-family:inherit; white-space:nowrap;
    transition:all 0.2s;
}
.mj-hdr-btn:hover { background:rgba(255,255,255,0.12); color:#fff; }
.mj-hdr-btn-sign {
    border-color:rgba(243,156,18,0.4); color:#f39c12;
}
.mj-hdr-btn-sign:hover { background:rgba(243,156,18,0.15); }

.mj-user-info {
    display:flex; align-items:center; gap:12px;
    font-size:14px; color:#ccc;
}
.mj-nickname { color:#fff; font-weight:bold; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mj-beans { font-size:15px; color:#f39c12; font-weight:bold; white-space:nowrap; }

/* ===== 游戏介绍弹窗 ===== */
.mj-modal-wide { max-width:600px !important; text-align:left; }
.mj-modal-x {
    position:absolute; top:12px; right:16px;
    background:none; border:none; color:#888; font-size:20px; cursor:pointer;
}
.mj-modal-x:hover { color:#fff; }
.mj-intro-section { margin-bottom:16px; }
.mj-intro-section:last-child { margin-bottom:0; }
.mj-intro-section h4 { font-size:15px; color:#f39c12; margin:0 0 8px; }
.mj-intro-section p { font-size:13px; color:#aaa; margin:0 0 4px; line-height:1.6; }
.mj-intro-section p strong { color:#ddd; }

/* ===== 签到弹窗 ===== */
.mj-modal-signin { max-width:640px !important; }
.mj-signin-container {
    display:flex; gap:24px; text-align:left;
}
.mj-signin-left { flex:0 0 auto; width:300px; }
.mj-signin-right {
    flex:1; min-width:180px;
    border-left:1px solid rgba(255,255,255,0.08);
    padding-left:20px;
}

.mj-signin-calendar { margin-bottom:16px; }
.mj-cal-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:12px;
}
.mj-cal-nav {
    background:rgba(255,255,255,0.08); border:none; color:#ccc;
    width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:14px;
    transition:all 0.2s;
}
.mj-cal-nav:hover { background:rgba(255,255,255,0.15); color:#fff; }
.mj-cal-month { font-size:16px; font-weight:bold; color:#f39c12; }

.mj-cal-weekdays {
    display:grid; grid-template-columns:repeat(7, 1fr);
    gap:4px; margin-bottom:6px; font-size:13px; color:#888;
}
.mj-cal-weekdays span { text-align:center; padding:4px 0; }

.mj-cal-grid {
    display:grid; grid-template-columns:repeat(7, 1fr);
    gap:4px;
}
.mj-cal-cell {
    aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    border-radius:8px; font-size:14px; color:#aaa; position:relative;
    background:rgba(255,255,255,0.03); cursor:default;
}
.mj-cal-empty { background:transparent; }
.mj-cal-today {
    background:rgba(243,156,18,0.2); color:#f39c12; font-weight:bold;
    border:1px solid rgba(243,156,18,0.4); cursor:pointer;
}
.mj-cal-today:hover { background:rgba(243,156,18,0.3); }
.mj-cal-signed {
    background:rgba(39,174,96,0.2); color:#2ecc71; font-weight:bold;
    border:1px solid rgba(39,174,96,0.3);
}
.mj-cal-check { font-size:10px; margin-left:1px; color:#2ecc71; }

.mj-signin-tip { font-size:15px; color:#ccc; margin-bottom:12px; }
.mj-signin-tip strong { color:#f39c12; }

.mj-signin-btn {
    padding:10px 40px; border-radius:10px; border:none;
    background:linear-gradient(135deg, #f39c12, #e67e22);
    color:#fff; font-size:16px; font-weight:bold; cursor:pointer;
    transition:all 0.2s; font-family:inherit;
}
.mj-signin-btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 4px 16px rgba(243,156,18,0.3); }
.mj-signin-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ===== 里程碑面板 ===== */
.mj-milestone-title {
    font-size:15px; color:#f39c12; margin:0 0 16px; text-align:center;
}
.mj-milestone-list { display:flex; flex-direction:column; gap:8px; }
.mj-milestone-empty { font-size:13px; color:#666; text-align:center; padding:20px 0; }

.mj-milestone-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; border-radius:10px;
    border:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.03);
    transition:all 0.2s;
}
.mj-milestone-info {
    display:flex; flex-direction:column; gap:2px;
}
.mj-milestone-label { font-size:13px; color:#aaa; }
.mj-milestone-label strong { color:#ddd; }
.mj-milestone-beans { font-size:12px; color:#f39c12; font-weight:bold; }

.mj-milestone-claimed {
    border-color:rgba(39,174,96,0.3); background:rgba(39,174,96,0.06);
}
.mj-milestone-done {
    font-size:12px; color:#2ecc71; font-weight:bold;
    padding:4px 10px; border-radius:6px;
    background:rgba(39,174,96,0.15);
}

.mj-milestone-ready {
    border-color:rgba(243,156,18,0.4); background:rgba(243,156,18,0.06);
}
.mj-milestone-btn {
    padding:5px 14px; border-radius:6px; border:none;
    background:linear-gradient(135deg, #f39c12, #e67e22);
    color:#fff; font-size:12px; font-weight:bold; cursor:pointer;
    font-family:inherit; transition:all 0.2s; white-space:nowrap;
}
.mj-milestone-btn:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(243,156,18,0.3); }

.mj-milestone-locked { opacity:0.45; }

/* ===== 好友弹窗 ===== */
.mj-modal-friend { max-width:480px !important; }
.mj-hdr-btn-friend {
    border-color:rgba(52,152,219,0.4); color:#3498db;
}
.mj-hdr-btn-friend:hover { background:rgba(52,152,219,0.15); }

.mj-friend-tabs {
    display:flex; gap:0; margin-bottom:16px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}
.mj-friend-tab {
    flex:1; padding:8px 0; border:none; background:none;
    color:#888; font-size:14px; cursor:pointer; font-family:inherit;
    border-bottom:2px solid transparent; transition:all 0.2s;
    position:relative;
}
.mj-friend-tab:hover { color:#ccc; }
.mj-friend-tab.active { color:#3498db; border-bottom-color:#3498db; }

.mj-friend-badge {
    display:inline-block; margin-left:4px; padding:1px 6px;
    border-radius:10px; background:#e74c3c; color:#fff;
    font-size:11px; font-weight:bold; vertical-align:middle;
}

.mj-friend-panel { min-height:120px; }
.mj-friend-empty {
    text-align:center; color:#666; font-size:14px; padding:24px 0;
}

.mj-friend-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; border-radius:10px;
    border:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.03);
    margin-bottom:6px;
}
.mj-friend-name { font-size:14px; color:#ddd; }
.mj-friend-status { font-size:12px; color:#888; }

.mj-friend-remove {
    padding:4px 12px; border-radius:6px; border:none;
    background:rgba(231,76,60,0.15); color:#e74c3c;
    font-size:12px; cursor:pointer; font-family:inherit;
    transition:all 0.2s;
}
.mj-friend-remove:hover { background:rgba(231,76,60,0.3); }

.mj-friend-actions { display:flex; gap:6px; }
.mj-friend-accept {
    padding:4px 12px; border-radius:6px; border:none;
    background:rgba(39,174,96,0.2); color:#2ecc71;
    font-size:12px; cursor:pointer; font-family:inherit;
    transition:all 0.2s;
}
.mj-friend-accept:hover { background:rgba(39,174,96,0.35); }

.mj-friend-reject {
    padding:4px 12px; border-radius:6px; border:none;
    background:rgba(255,255,255,0.08); color:#888;
    font-size:12px; cursor:pointer; font-family:inherit;
    transition:all 0.2s;
}
.mj-friend-reject:hover { background:rgba(255,255,255,0.15); color:#ccc; }

.mj-friend-search {
    display:flex; gap:8px; margin-bottom:12px;
}
.mj-friend-search input {
    flex:1; padding:8px 12px; border-radius:8px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(255,255,255,0.06); color:#ddd;
    font-size:14px; font-family:inherit; outline:none;
}
.mj-friend-search input:focus { border-color:rgba(52,152,219,0.4); }
.mj-friend-search input::placeholder { color:#666; }

.mj-friend-search-btn {
    padding:8px 16px; border-radius:8px; border:none;
    background:#3498db; color:#fff; font-size:14px;
    cursor:pointer; font-family:inherit; transition:all 0.2s;
}
.mj-friend-search-btn:hover { background:#2980b9; }

.mj-friend-add {
    padding:4px 14px; border-radius:6px; border:none;
    background:linear-gradient(135deg, #3498db, #2980b9);
    color:#fff; font-size:12px; cursor:pointer;
    font-family:inherit; transition:all 0.2s;
}
.mj-friend-add:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(52,152,219,0.3); }