/**
 * battle.css - 对战系统样式
 * 单一职责：对战界面专用样式
 */

/* 对战容器 */
.battle-container {
    max-width: 1200px;
    margin: 0 auto;
}

.battle-header {
    text-align: center;
    margin-bottom: 30px;
}

.battle-header h2 {
    color: #ff6b35;
    font-size: 2.5em;
    margin-bottom: 10px;
}

.battle-header .subtitle {
    color: #aaa;
    font-size: 1.2em;
}

/* 对战模式选择 */
.battle-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.mode-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.mode-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 107, 53, 0.3);
}

.mode-icon {
    font-size: 50px;
    margin-bottom: 15px;
}

.mode-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

.mode-desc {
    color: #aaa;
    font-size: 14px;
    line-height: 1.5;
}

/* 对战准备 */
.battle-prepare {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.battle-prepare h3 {
    color: #3498db;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.8em;
}

.pet-selection {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    margin-bottom: 30px;
    align-items: start;
}

@media (max-width: 768px) {
    .pet-selection {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.pet-select-card {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.select-header h4 {
    color: #fff;
    font-size: 16px;
    margin: 0;
}

.enemy-options {
    display: flex;
    gap: 8px;
}

.pets-list {
    min-height: 200px;
    max-height: 300px;
    overflow-y: auto;
}

.pet-select-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.3s;
}

.pet-select-item:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(52, 152, 219, 0.3);
}

.pet-select-item.selected {
    background: rgba(52, 152, 219, 0.2);
    border-color: #3498db;
}

.select-pet-avatar {
    font-size: 30px;
    margin-right: 15px;
}

.select-pet-info {
    flex: 1;
}

.select-pet-name {
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
}

.select-pet-stats {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #aaa;
}

.enemy-difficulty {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 5px;
}

.enemy-difficulty.easy {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.enemy-difficulty.medium {
    background: rgba(241, 196, 15, 0.2);
    color: #f1c40f;
}

.enemy-difficulty.hard {
    background: rgba(231, 76, 60, 0.2);
    color: #e74c3c;
}

.vs-separator {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-text {
    background: rgba(255, 107, 53, 0.3);
    color: #ff6b35;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    border: 3px solid rgba(255, 107, 53, 0.5);
}

.battle-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

/* 对战竞技场 */
.battle-arena {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.arena-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.arena-header h3 {
    color: #ff6b35;
    margin: 0;
    font-size: 1.8em;
}

.battle-controls {
    display: flex;
    gap: 10px;
}

.arena-content {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    align-items: center;
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .arena-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.battle-pet {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.player-pet {
    border-color: rgba(52, 152, 219, 0.3);
}

.enemy-pet {
    border-color: rgba(231, 76, 60, 0.3);
}

.pet-battle-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.pet-name {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.player-pet .pet-name {
    color: #3498db;
}

.enemy-pet .pet-name {
    color: #e74c3c;
}

.pet-level {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 14px;
    color: #aaa;
}

.pet-battle-avatar {
    font-size: 80px;
    margin: 15px 0;
}

.pet-health {
    margin: 20px 0;
}

.health-bar {
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

.health-fill {
    height: 100%;
    border-radius: 10px;
    background: #2ecc71;
    transition: width 0.5s ease;
}

.health-text {
    font-size: 14px;
    color: #aaa;
    text-align: center;
}

.pet-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.pet-stats .stat {
    background: rgba(0, 0, 0, 0.2);
    padding: 8px;
    border-radius: 6px;
    text-align: center;
}

.stat-label {
    display: block;
    font-size: 12px;
    color: #aaa;
    margin-bottom: 4px;
}

.stat-value {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

/* 对战中心区域 */
.battle-center {
    text-align: center;
}

.battle-log {
    height: 150px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.log-entry {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
    color: #aaa;
}

.log-entry:last-child {
    border-bottom: none;
}

.battle-skills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.skill-btn {
    padding: 12px;
    background: rgba(52, 152, 219, 0.2);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 8px;
    color: #3498db;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

.skill-btn:hover {
    background: rgba(52, 152, 219, 0.3);
    transform: translateY(-2px);
}

/* 竞技场底部 */
.arena-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.turn-info {
    font-size: 16px;
    color: #aaa;
}

.turn-info span {
    color: #fff;
    font-weight: 600;
    font-size: 20px;
}

.result-preview {
    color: #f1c40f;
    font-size: 14px;
}

/* 对战结果 */
.battle-result {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

#result-title {
    color: #ff6b35;
    margin-bottom: 25px;
    font-size: 2em;
}

.result-content {
    margin-bottom: 30px;
}

.result-message {
    font-size: 20px;
    color: #fff;
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.result-rewards {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.result-rewards h4 {
    color: #f1c40f;
    margin-bottom: 15px;
    text-align: center;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.reward-item:last-child {
    border-bottom: none;
}

.reward-icon {
    font-size: 20px;
}

.reward-text {
    color: #fff;
    font-size: 16px;
}

.result-stats {
    color: #aaa;
    font-size: 14px;
}

.result-stats p {
    margin: 8px 0;
}

.result-stats span {
    color: #fff;
    font-weight: 600;
}

.result-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

/* 对战排行榜 */
.battle-rank {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.battle-rank h3 {
    color: #f1c40f;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.5em;
}

.rank-list {
    margin-bottom: 20px;
}

.rank-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.rank-number {
    width: 30px;
    height: 30px;
    background: rgba(52, 152, 219, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #fff;
    margin-right: 15px;
}

.rank-item:nth-child(1) .rank-number {
    background: rgba(241, 196, 15, 0.3);
    color: #f1c40f;
}

.rank-item:nth-child(2) .rank-number {
    background: rgba(149, 165, 166, 0.3);
    color: #95a5a6;
}

.rank-item:nth-child(3) .rank-number {
    background: rgba(211, 84, 0, 0.3);
    color: #d35400;
}

.rank-name {
    flex: 1;
    color: #fff;
    font-weight: 600;
}

.rank-score {
    color: #aaa;
    font-size: 14px;
}

/* 加载和空状态 */
.loading-text, .empty-text, .error-text {
    text-align: center;
    padding: 30px;
    color: #aaa;
    font-style: italic;
}

.empty-text {
    color: #7f8c8d;
}

.error-text {
    color: #e74c3c;
}

/* 响应式调整 */
@media (max-width: 480px) {
    .battle-modes {
        grid-template-columns: 1fr;
    }
    
    .battle-skills {
        grid-template-columns: 1fr;
    }
    
    .result-actions {
        flex-direction: column;
    }
    
    .result-actions .btn {
        width: 100%;
    }
    
    .battle-controls {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* ============================================
   对战模式/难度按钮美化
   覆盖内联样式，用 !important 确保生效
   ============================================ */

/* 模式选择容器 - 横排等宽 */
#battle-menu > div:first-child {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
    padding: 0 10px !important;
}

/* 两个模式按钮横排等宽 */
.mode-btn {
    flex: 1 !important;
    max-width: 200px !important;
    padding: 14px 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
}

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

/* PVE - 绿色系 */
#bmode-pve {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), rgba(39, 174, 96, 0.1)) !important;
    color: #2ecc71 !important;
    border-color: rgba(46, 204, 113, 0.3) !important;
}
#bmode-pve:hover {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.3), rgba(39, 174, 96, 0.15)) !important;
    border-color: rgba(46, 204, 113, 0.6) !important;
}
#bmode-pve.active,
.mode-btn[id="bmode-pve"] {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.3), rgba(39, 174, 96, 0.18)) !important;
    border-color: #2ecc71 !important;
}

/* PVP - 紫色系 */
#bmode-pvp {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.15), rgba(142, 68, 173, 0.08)) !important;
    color: #9b59b6 !important;
    border-color: rgba(155, 89, 182, 0.3) !important;
}
#bmode-pvp:hover {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.25), rgba(142, 68, 173, 0.12)) !important;
    border-color: rgba(155, 89, 182, 0.6) !important;
}
#bmode-pvp.active,
.mode-btn[id="bmode-pvp"] {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.25), rgba(142, 68, 173, 0.15)) !important;
    border-color: #9b59b6 !important;
}

/* 难度按钮容器 - 横排等宽 */
#battle-diff {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    padding: 0 10px !important;
}

/* 三个难度按钮横排等宽 */
.diff-btn {
    flex: 1 !important;
    max-width: 140px !important;
    padding: 12px 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
}

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

/* 简单 - 绿色系 */
#bdiff-easy {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(39, 174, 96, 0.06)) !important;
    color: #2ecc71 !important;
    border-color: rgba(46, 204, 113, 0.2) !important;
}
#bdiff-easy:hover,
#bdiff-easy.active {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.3), rgba(39, 174, 96, 0.15)) !important;
    border-color: #2ecc71 !important;
}

/* 中等 - 黄色系 */
#bdiff-medium {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.12), rgba(243, 156, 18, 0.06)) !important;
    color: #f1c40f !important;
    border-color: rgba(241, 196, 15, 0.2) !important;
}
#bdiff-medium:hover,
#bdiff-medium.active {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.25), rgba(243, 156, 18, 0.12)) !important;
    border-color: #f1c40f !important;
}

/* 困难 - 红色系 */
#bdiff-hard {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.12), rgba(192, 57, 43, 0.06)) !important;
    color: #e74c3c !important;
    border-color: rgba(231, 76, 60, 0.2) !important;
}
#bdiff-hard:hover,
#bdiff-hard.active {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.25), rgba(192, 57, 43, 0.12)) !important;
    border-color: #e74c3c !important;
}

/* 开始战斗按钮 - 放大，金色主色调 */
.btn-primary[onclick*="startBattle"] {
    display: inline-block !important;
    padding: 14px 50px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3) !important;
    letter-spacing: 2px !important;
}

.btn-primary[onclick*="startBattle"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(243, 156, 18, 0.5) !important;
    background: linear-gradient(135deg, #f1c40f, #e67e22) !important;
}

.btn-primary[onclick*="startBattle"]:active {
    transform: translateY(-1px) !important;
}

/* 整体容器内边距 */
#battle-menu {
    padding: 20px 50px !important;
}

/* 再来一局按钮风格统一 */
#battle-btn-rematch {
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

#battle-btn-rematch:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
}