/* 基础容器 */
.pk-card, .pk-story-box {
    display: block !important;
    clear: both !important;
    margin: 15px auto !important;
    padding: 12px;
    border: 3px solid #333;
    border-radius: 15px;
    background-color: #ffffff;
    max-width: 95%;
    box-sizing: border-box;
}

/* 网格布局：解决排列乱的问题 */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: 10px 0;
}

.stat-item {
    display: flex;
    border: 2px solid #333;
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.85em;
}

.stat-item .label {
    background: #3498db;
    color: white;
    padding: 4px 8px;
    font-weight: bold;
    min-width: 40px;
    text-align: center;
}

.stat-item .value {
    background: #fff;
    color: #333;
    padding: 4px 8px;
    flex-grow: 1;
}

/* 徽章样式：背包专用 */
.badge-group {
    margin: 8px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.badge-title {
    background: #ff5a5a;
    color: white;
    padding: 2px 8px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.8em;
    border: 1px solid #333;
}

.badge-item {
    background: #f1f1f1;
    border: 1px solid #ccc;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 0.8em;
}

/* 正文与描述框 */
.pk-story-box {
    line-height: 1.8;
    background-image: linear-gradient(to bottom, #ffffff 0%, #fff9e6 100%);
    box-shadow: 6px 6px 0px #4caf50;
}

.desc-box, .memo-box {
    background: #f9f9f9;
    padding: 10px;
    border-radius: 10px;
    border: 1px dashed #333;
    margin-top: 10px;
    font-size: 0.9em;
}

/* 身体部位网格 */
.body-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    margin-top: 10px;
    font-size: 0.85em;
}

.body-item {
    padding: 5px;
    border-bottom: 1px solid #eee;
}

/* 指令建议 */
.action-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.action-list span {
    background: #fff9c4;
    padding: 8px;
    border-radius: 8px;
    border-left: 5px solid #f1c40f;
    font-size: 0.9em;
}

/* 标题栏颜色 */
.pk-header {
    background: #ff5a5a;
    color: white;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #333;
    text-shadow: 1px 1px 0px #333;
    cursor: pointer;
}
/* 进度条通用样式 */
.bar-bg {
    height: 12px;
    background: #eee;
    border: 2px solid #333;
    border-radius: 6px;
    overflow: hidden;
    margin: 5px 0 10px 0;
}
.bar-fill { height: 100%; transition: width 0.5s ease; }
.bar-fill.exp { background: #3498db; }
.bar-fill.bond { background: #ff7675; }

/* 属性网格：2列布局，告别乱序 */
.attr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 10px 0;
}
.attr-item {
    display: flex;
    align-items: center;
    border: 2px solid #333;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    font-size: 0.85em;
}
.attr-n { background: #333; color: #fff; padding: 2px 6px; min-width: 35px; text-align: center; }
.attr-v { flex-grow: 1; text-align: center; font-weight: bold; }
.attr-r { padding: 2px 6px; font-size: 0.8em; }

/* 评价等级配色 */
.r-卓越 { background: #f1c40f; color: #000; }
.r-优秀 { background: #2ecc71; color: #fff; }
.r-普通 { background: #bdc3c7; color: #fff; }

/* 标签行 */
.label-row { display: flex; justify-content: space-between; font-size: 0.85em; font-weight: bold; }
.badge-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.tag { background: #f1f1f1; border: 1px solid #333; padding: 2px 6px; border-radius: 4px; font-size: 0.8em; }
.tag-special { background: #333; color: #ffde00; padding: 2px 8px; border-radius: 4px; font-size: 0.8em; font-weight: bold; }

/* 底部技能描述 */
.skill-footer {
    background: #fff9e6;
    border-top: 1px dashed #333;
    padding: 8px;
    margin-top: 10px;
    font-size: 0.85em;
}
.skill-footer p { margin: 3px 0; }
/* 战斗大屏幕容器 */
.battle-screen {
    background: #fdfdfd;
    border: 4px solid #333;
    border-radius: 12px;
    padding: 10px;
    margin: 15px 0;
    box-shadow: 8px 8px 0px #e74c3c; /* 战斗感红阴影 */
    font-family: 'Courier New', Courier, monospace;
}

/* 双方信息布局 */
.opponent-side, .player-side {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
}

.stat-box {
    width: 60%;
    background: #f0f0f0;
    border: 2px solid #333;
    border-radius: 0 15px 0 15px;
    padding: 5px 10px;
    position: relative;
}

/* 血条样式 */
.hp-bar-bg {
    background: #ddd;
    height: 10px;
    border: 1px solid #333;
    margin: 4px 0;
    border-radius: 5px;
}

.hp-bar-fill {
    background: #2ecc71; /* 绿色血条 */
    height: 100%;
    transition: width 0.5s;
}

.player-hp { background: #3498db; } /* 玩家血条用蓝色区分 */

.hp-text { font-size: 0.8em; font-weight: bold; }

/* VS分割线 */
.vs-divider {
    text-align: center;
    font-weight: 900;
    color: #e74c3c;
    font-style: italic;
    font-size: 1.2em;
    margin: 5px 0;
}

/* 技能按钮网格 */
.move-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-top: 10px;
}

.move-btn {
    border: 2px solid #333;
    padding: 5px;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 5px;
}

.type-fire { background: #ff9f43; color: white; }
.type-water { background: #54a0ff; color: white; }
.type-grass { background: #1dd1a1; color: white; }
.type-normal { background: #c8d6e5; }

/* 战斗日志 */
.battle-log {
    background: #333;
    color: #00ff00; /* 经典黑底绿字 */
    padding: 8px;
    margin-top: 8px;
    font-size: 0.85em;
    border-radius: 4px;
    min-height: 30px;
}
/* 图鉴外壳 */
.pk-dex-full {
    margin: 15px 0;
    border: 3px solid #e74c3c;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
}

.pk-dex-header {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.dex-wrapper { padding: 12px; background: #fffcfc; }

/* 顶部网格 */
.dex-top-grid { display: flex; gap: 15px; margin-bottom: 10px; }
.dex-avatar { 
    width: 80px; height: 80px; background: #eee; 
    border: 2px solid #333; display: flex; 
    align-items: center; text-align: center; font-size: 10px;
}
.dex-basic p { margin: 2px 0; font-size: 13px; }

/* 数值条 */
.dex-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-item { display: flex; align-items: center; gap: 5px; }
.s-bar { flex: 1; height: 6px; background: #ddd; border-radius: 3px; }
.s-fill { height: 100%; border-radius: 3px; }
.hp { background: #ff4757; } .atk { background: #ffa502; }
.def { background: #2ed573; } .spd { background: #1e90ff; }

/* 进化/娘化进度条 */
.p-bar-bg { height: 12px; background: #eee; border-radius: 6px; margin: 5px 0; border: 1px solid #ccc; }
.p-bar-fill { height: 100%; border-radius: 5px; transition: width 0.8s; }
.evo { background: linear-gradient(90deg, #f1c40f, #f39c12); }
.sync { background: linear-gradient(90deg, #9b59b6, #8e44ad); }

.dex-divider { height: 2px; background: #eee; margin: 10px 0; }
.dex-hidden-data { font-size: 12px; color: #444; line-height: 1.5; }
.dex-hidden-data strong { color: #c0392b; }
.dex-footer { font-size: 10px; color: #999; text-align: right; margin-top: 10px; }