/* ============================================================
   main.css - 主界面样式（GameScene）
   ============================================================ */

#scene-game-main {
    padding: 16px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a1a1a 100%);
}

/* --- 顶部状态栏 --- */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0,0,0,0.4);
    border-radius: 12px;
    margin-bottom: 16px;
}
/* V3.2.7.9.4: PC 端顶栏跟 .scene（手机壳）同宽 480px（之前是 1248px 导致顶栏比舞台宽 2.5 倍越界）
   视口 ≥1025px 时：.scene max-width 480px 居中 → 顶栏也限 480px（不超出舞台） */
@media (min-width: 481px) {
    .top-bar {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
#user-avatar-main {
    display: flex;
    align-items: center;
}
#user-avatar-main .character-avatar,
#user-avatar-main .character-avatar-img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    background: #FFD4A3 !important;
    border: 2px solid var(--secondary-yellow);
    overflow: hidden;
}
#user-avatar-main .character-avatar-img {
    object-fit: cover;
}
.user-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.user-name {
    font-size: 14px;
    font-weight: bold;
    color: var(--secondary-yellow);
}
.user-level {
    font-size: 11px;
    background: var(--primary-red);
    padding: 1px 6px;
    border-radius: 8px;
    align-self: flex-start;
}
.game-time {
    text-align: center;
}
.year-month {
    font-size: 14px;
    color: var(--secondary-yellow);
    font-weight: bold;
}
.m2-rate {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}
/* V3.0 新增：顶栏存档信息行 */
.save-info {
    font-size: 11px;
    color: #66bb6a;
    margin-top: 2px;
    font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
    cursor: help;
}
.save-info:hover {
    color: #4caf50;
}
.settings-icon {
    font-size: 22px;
    cursor: pointer;
    opacity: 0.8;
}
.settings-icon:hover { opacity: 1; }

/* V3.0 新增：充值按钮（齿轮左侧） */
.recharge-icon {
    font-size: 22px;
    cursor: pointer;
    opacity: 0.8;
    margin-left: auto;
}
.recharge-icon:hover { opacity: 1; transform: scale(1.1); }

/* --- 充值弹窗专属样式 --- */

/* V3.0 新增：剩余总积分预览条（3 列布局） */
.recharge-preview {
    background: linear-gradient(135deg, #fff8e1, #ffecb3);
    border-radius: 12px;
    padding: 14px 12px;
    margin-bottom: 14px;
    border: 2px solid #ffd54f;
}
.recharge-preview-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 6px;
    align-items: center;
}
.recharge-preview-cell {
    text-align: center;
    padding: 4px;
}
.recharge-preview-label {
    font-size: 11px;
    color: #8b6914;
    margin-bottom: 4px;
    font-weight: 600;
}
.recharge-preview-value {
    font-size: 18px;
    font-weight: 800;
    color: #5d4037;
    font-family: "SimSun", "宋体", serif;
}
.recharge-preview-value.plus {
    color: #2e7d32;
}
.recharge-preview-value.total {
    color: #c62828;
    font-size: 22px;
}
.recharge-preview-cell.highlight {
    background: rgba(255, 87, 34, 0.1);
    border-radius: 8px;
    padding: 6px 4px;
}
.recharge-preview-plus, .recharge-preview-arrow {
    font-size: 18px;
    color: #8b6914;
    font-weight: 800;
    text-align: center;
}

/* V3.0 新增：自定义金额按钮 */
.recharge-custom-btn {
    width: 100%;
    background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
    border: 2px dashed #999;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #5d4037;
    cursor: pointer;
    margin-bottom: 14px;
    transition: all 0.2s;
    font-family: inherit;
}
.recharge-custom-btn:hover {
    background: linear-gradient(135deg, #fff8e1, #ffecb3);
    border-color: #ffd54f;
    color: #c62828;
    transform: translateY(-1px);
}

/* V3.0 新增：4 档选中态 */
.recharge-card.selected {
    border-color: #ff5722 !important;
    background: linear-gradient(135deg, #fff3e0, #ffe0b2) !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 16px rgba(255, 87, 34, 0.3);
}

/* ============================================================
   V3.0 升级：存档管理弹窗样式
   V3.2.4.2 修复：自适应高度 + 金色滚动条 + 存档计数提示
   ============================================================ */
.save-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
    /* V3.2.4.2: 自适应高度，跟随面板剩余空间 */
    flex: 1 1 auto;
    min-height: 0;
    max-height: 60vh;          /* PC 大屏最多 60% 视口 */
    overflow-y: auto;
    overflow-x: hidden;
    /* 自定义滚动条（PC 浏览器可见 + 移动端友好） */
    scrollbar-width: thin;
    scrollbar-color: #ff9800 rgba(0,0,0,0.05);
}
.save-list::-webkit-scrollbar { width: 8px; }
.save-list::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
}
.save-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff9800 0%, #f57c00 100%);
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.3);
}
.save-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #fb8c00 0%, #e65100 100%);
}
/* V3.2.4.2: 存档数量提示徽章 */
.save-count-hint {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin: -4px -4px 8px -4px;
    background: linear-gradient(180deg, rgba(255,248,225,0.95) 0%, rgba(255,236,179,0.9) 100%);
    border: 1px solid #ffb74d;
    border-radius: 8px;
    font-size: 12px;
    color: #5d4037;
    font-weight: 600;
    backdrop-filter: blur(4px);
}
.save-count-hint .save-count-num {
    color: #c62828;
    font-weight: 800;
    font-size: 14px;
    font-family: "SimSun", "宋体", serif;
}
.save-count-hint .save-scroll-tip {
    color: #ff6f00;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
    animation: bounce-down 1.5s infinite;
}
@keyframes bounce-down {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2px); }
}
.save-card {
    position: relative;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 14px 16px;
    transition: all 0.2s;
}
.save-card.latest {
    border-color: #ff9800;
    background: linear-gradient(135deg, #fff8e1, #ffecb3);
}
.save-card.current {
    border-color: #2e7d32;
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}
.save-card-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff9800;
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
}
.save-card-badge.current-badge {
    background: #2e7d32;
    right: auto;
    left: -8px;
}
.save-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.save-card-era {
    font-size: 15px;
    font-weight: 800;
    color: #5d4037;
    font-family: "SimSun", "宋体", serif;
}
.save-card-time {
    font-size: 11px;
    color: #8b6914;
    font-weight: 600;
}
.save-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.save-stat {
    text-align: center;
    padding: 6px 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
}
.save-stat-label {
    font-size: 10px;
    color: #8b6914;
    margin-bottom: 2px;
}
.save-stat-value {
    font-size: 13px;
    font-weight: 800;
    color: #c62828;
    font-family: "SimSun", "宋体", serif;
}
.save-card-actions {
    display: flex;
    gap: 8px;
}
.save-action-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.save-action-btn.load-btn {
    background: #2e7d32;
    color: #fff;
}
.save-action-btn.load-btn:hover {
    background: #1b5e20;
}
.save-action-btn.danger {
    background: #f5f5f5;
    color: #c62828;
    border: 1px solid #ef9a9a;
}
.save-action-btn.danger:hover {
    background: #ffebee;
}

.save-new-btn {
    width: 100%;
    background: linear-gradient(135deg, #fff8e1, #ffecb3);
    border: 2px dashed #ff9800;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #c62828;
    cursor: pointer;
    margin-bottom: 14px;
    transition: all 0.2s;
    font-family: inherit;
}
.save-new-btn:hover {
    background: linear-gradient(135deg, #ffecb3, #ffd54f);
    transform: translateY(-1px);
}

.recharge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.recharge-card {
    position: relative;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.recharge-card:hover {
    border-color: #ffd54f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 213, 79, 0.3);
}
.recharge-card.popular {
    border-color: #ff9800;
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
}
.recharge-card-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff5722;
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
}
.recharge-card-label {
    font-size: 14px;
    font-weight: 700;
    color: #5d4037;
    margin-bottom: 6px;
}
.recharge-card-price {
    font-size: 24px;
    font-weight: 800;
    color: #c62828;
    margin-bottom: 4px;
    font-family: "SimSun", "宋体", serif;
}
.recharge-card-points {
    font-size: 12px;
    color: #8b6914;
    margin-bottom: 4px;
}
.recharge-card-rate {
    font-size: 10px;
    color: #999;
}

.recharge-notice {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}
.recharge-notice-title {
    font-size: 13px;
    font-weight: 700;
    color: #5d4037;
    margin-bottom: 6px;
}
.recharge-notice-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: #5d4037;
}
.recharge-notice-list li {
    padding-left: 0;
}

/* --- 资产面板 --- */
.asset-panel {
    background: rgba(0,0,0,0.4);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}
.asset-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.asset-row:last-child { margin-bottom: 0; }
.asset-item {
    background: rgba(255,255,255,0.05);
    padding: 10px;
    border-radius: 8px;
}
.asset-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.asset-value {
    font-size: 16px;
    font-weight: bold;
    color: var(--secondary-yellow);
}

/* --- 操作按钮 --- */
.action-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.action-btn {
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
.action-btn:hover, .action-btn:active {
    background: rgba(212, 165, 116, 0.2);
    border-color: var(--secondary-yellow);
    transform: translateY(-2px);
}
.action-icon { font-size: 28px; }
.action-text { font-size: 12px; color: var(--text-secondary); }

/* --- 结束本月按钮 --- */
.end-month-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-light) 100%);
    color: #fff;
    padding: 14px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
    transition: all 0.2s;
}
.end-month-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(139, 26, 26, 0.4);
}

/* --- 系统空间入口按钮（右下角悬浮）--- */
.system-btn {
    position: fixed;
    right: 20px;
    bottom: 80px;
    width: 60px;
    height: 80px;
    cursor: pointer;
    z-index: 51;             /* V3.2.6.1: 高于排行榜，确保不被遮挡 */
    transition: all 0.2s;
}
/* V3.2.7.9.4: PC 端把 system-btn / leaderboard-btn 约束在 .scene（手机壳）右内侧
   .scene 居中 480px → 舞台右边 = 50vw + 240px
   按钮 right = 视口宽 - 舞台右边 + 20 = 50vw - 220px
   用 max(20px, ...) 兜底小屏（按钮贴视口右边） */
@media (min-width: 481px) {
    .system-btn {
        right: max(20px, calc(50vw - 220px));
    }
    #leaderboard-btn {
        right: max(90px, calc(50vw - 150px)) !important;  /* 系统按钮左边 70px 错开 */
    }
}

/* V3.2.7.8.3：移动端 480px — system-btn / leaderboard-btn 拉到手机壳内（不跑到外面） */
@media (max-width: 480px) {
    .system-btn {
        right: 20px !important;
        bottom: 10px !important;  /* V3.3.3: 贴底，避开操作按钮 */
    }
    #leaderboard-btn {
        right: 80px !important;  /* 系统按钮左边 60px 错开 */
        bottom: 10px !important;  /* V3.3.3: 贴底 */
    }
    /* V3.3.3: 移动端隐藏顶栏 3 徽章（信用/段位/月卡）— 避免挤压布局
       在设置里可点击单独入口（已通过 renderCreditBadge 等方法渲染）*/
    #topbar-badges {
        display: none !important;
    }
    /* V3.3.3: 移动端喇叭按钮贴底（避开操作按钮和结束今日按钮）*/
    .bgm-toggle {
        left: 20px !important;
        bottom: 10px !important;
    }
}
.system-btn:hover { transform: scale(1.05); }
.system-btn:active { transform: scale(0.95); }
.system-btn-hexagon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--secondary-yellow) 0%, #B8893E 100%);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 4px 12px rgba(212, 165, 116, 0.5);
    animation: glow 2s infinite;
}
.system-btn-icon {
    font-size: 22px;
    color: var(--bg-dark);
}
.system-btn-label {
    text-align: center;
    font-size: 12px;
    color: var(--secondary-yellow);
    margin-top: 4px;
    font-weight: bold;
}
.system-btn-reddot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 14px;
    height: 14px;
    background: var(--error);
    border-radius: 50%;
    border: 2px solid var(--bg-dark);
    animation: pulse 1s infinite;
}
.system-btn.low-energy .system-btn-hexagon {
    background: linear-gradient(135deg, var(--error) 0%, #C0392B 100%);
    animation: glow 1s infinite;
}
/* ============================================================
   V3.2.5: AI 对手状态卡
   ============================================================ */
.ai-cards {
    margin: 12px 16px;
    padding: 12px;
    background: linear-gradient(135deg, #fff8e1 0%, #fffbf0 100%);
    border: 1px solid #f0d68c;
    border-radius: 8px;
}
.ai-card-label {
    font-size: 12px;
    color: #8b6914;
    margin-bottom: 8px;
    font-weight: bold;
}
.ai-card-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* V3.3.4: 玩家+3AI 共 4 人 */
    gap: 8px;
}
.ai-card {
    background: #fff;
    border: 1px solid #e8d8a0;
    border-radius: 6px;
    padding: 8px 6px;
    text-align: center;
    position: relative;
    cursor: pointer;                /* V3.3.4: 提示可点击 */
    transition: transform 0.15s, box-shadow 0.15s;
}
.ai-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212,160,23,0.25);
}
.ai-card.player {
    border: 2px solid #d4a017;      /* V3.3.4: 玩家金色边框 */
    background: linear-gradient(180deg, #fff8e1 0%, #fff 100%);
}
.ai-card-avatar {
    font-size: 20px;
    line-height: 1;
}
.ai-card-name {
    font-size: 12px;
    color: #5d4e37;
    margin-top: 2px;
    font-weight: bold;
}
.ai-card-assets {
    font-size: 11px;
    color: #8b6914;
    margin-top: 4px;
}
.ai-card-pnl {
    font-size: 11px;
    margin-top: 2px;
    font-weight: bold;
}
.ai-card-pnl.up { color: #1b5e20; }
.ai-card-pnl.down { color: #c62828; }
.ai-card-pnl.zero { color: #999; }
.ai-card-rank {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #d4a017;
    color: #fff;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: bold;
}