/* ========== 全局样式：所有元素都会继承这里的基础样式 ========== */
* {
    margin: 0;          /* 去掉所有元素的默认外边距，避免布局混乱 */
    padding: 0;         /* 去掉所有元素的默认内边距，避免布局混乱 */
    box-sizing: border-box; /* 盒模型：宽度=内容+内边距+边框，方便精准布局 */
    font-family: 'Segoe UI', Arial, sans-serif; /* 字体：优先用Segoe UI，无则用Arial，保证跨设备显示 */
}
body {
    background: #1a1a1a;   /* 页面整体深灰色背景，暗色调符合卡牌游戏风格 */
    color: #fff;           /* 全局默认文字白色，和深色背景对比 */
    padding: 20px;         /* 页面四周留白20px，避免内容贴边 */
    display: flex;         /* 弹性布局：让游戏主容器水平居中 */
    flex-direction: column; /* 弹性布局方向：垂直排列 */
    align-items: center;    /* 弹性布局子元素：水平居中 */
}
/* 游戏主容器：所有游戏内容的父容器，统一控制大小和样式 */
.game {
    max-width: 1000px;      /* 最大宽度1000px，避免页面太宽时布局变形 */
    width: 100%;            /* 宽度自适应父容器（最大不超过1000px） */
    background: #2d2d2d;    /* 比页面背景稍浅的灰色，区分游戏区域和页面背景 */
    padding: 20px;          /* 内边距20px，让内容和边框有距离 */
    border-radius: 16px;    /* 圆角16px，弱化直角，更美观 */
    border: 2px solid #f39c12; /* 橙色边框，游戏主题色，突出游戏区域 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.7); /* 黑色阴影，增加立体感 */
}

/* ========== 战斗区域：玩家和怪物面板的容器 ========== */
.combat {
    display: flex;          /* 弹性布局：让玩家/怪物面板并排显示 */
    justify-content: space-between; /* 子元素：两端对齐，中间留空 */
    margin-bottom: 20px;    /* 底部外边距20px，和手牌区域分隔 */
    gap: 20px;              /* 子元素之间的间距20px，避免面板紧贴 */
    align-items: center;    /* 新增：垂直居中，让角色和面板对齐 */
}
/* 新增：角色容器基础样式（通用） */
.role-container {
    width: 200px;           /* 适配角色图尺寸，可修改 */
    height: 250px;          /* 适配角色图尺寸，可修改 */
    position: relative;     /* 为攻击特效做定位容器 */
    overflow: hidden;       /* 隐藏特效溢出部分 */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 新增：角色图片通用样式 */
.role-img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* 保持图片比例，不拉伸 */
    border-radius: 12px;    /* 轻微圆角，和面板统一风格 */
    border: 2px solid #f39c12; /* 主题色边框，和游戏风格一致 */
}
/* 微调面板宽度，适配角色容器（避免页面过宽） */
/* 玩家/怪物通用面板样式：复用样式，减少代码冗余 */
.panel {
    flex: 1;                /* 弹性布局占比：1，两个面板平分父容器宽度 */
    min-width: 200px;       /* 新增：最小宽度，避免面板过窄 */
    background: #3d3d3d;    /* 面板背景色，比游戏主容器稍深 */
    padding: 15px;          /* 内边距15px，让内容和面板边框有距离 */
    border-radius: 12px;    /* 圆角12px */
    border: 1px solid #555; /* 浅灰色边框，区分面板内部和背景 */
}

/* ========== 血条和能量条：通用样式 ========== */
.hp-bar, .mana-bar {
    height: 24px;           /* 固定高度24px，保证血条/能量条高度一致 */
    background: #444;       /* 灰色背景，代表空的部分 */
    border-radius: 12px;    /* 圆角和高度一致，做成胶囊形状 */
    margin: 10px 0;         /* 上下外边距10px，和文字分隔 */
    overflow: hidden;       /* 溢出隐藏：让内部的填充条不超出边框 */
}
/* 血量填充条：红色，代表剩余血量（JS控制宽度） */
.hp-fill {
    height: 100%;           /* 高度占满父容器，和血条同高 */
    background: #e74c3c;    /* 深红色，符合“血量”的视觉认知 */
    transition: width 0.3s;  /* 宽度变化时的过渡动画（0.3秒），让血量变化更平滑 */
}
/* 能量填充条：蓝色，代表剩余能量（JS控制宽度） */
.mana-fill {
    height: 100%;
    background: #3498db;    /* 天蓝色，符合“能量”的视觉认知 */
    transition: width 0.3s; /* 和血条一样的过渡动画，保持风格统一 */
}

/* ========== 手牌区域：卡牌容器和单张卡牌样式 ========== */
.cards {
    margin: 20px 0;         /* 上下外边距20px，和战斗面板/日志分隔 */
}
/* 卡牌容器：存放所有手牌，控制卡牌的排列方式 */
.card-box {
    display: flex;          /* 弹性布局：卡牌横向排列 */
    flex-wrap: wrap;        /* 自动换行：卡牌数量多时，不会超出容器 */
    gap: 12px;              /* 卡牌之间的间距12px，避免紧贴 */
    padding: 15px;          /* 内边距15px，让卡牌和容器边框有距离 */
    background: #252525;    /* 容器背景色，比游戏主容器稍深 */
    border-radius: 16px;    /* 圆角16px */
    min-height: 200px;      /* 最小高度200px，避免没有卡牌时容器太矮 */
    border: 1px solid #f39c12; /* 橙色边框，和游戏主题呼应 */
}
/* 单张卡牌样式：核心视觉元素，保证所有卡牌大小、样式一致 */
.card {
    width: 120px;           /* 固定宽度120px */
    height: 170px;          /* 固定高度170px */
    background: #f0e6d0;    /* 米黄色背景，模拟真实卡牌的颜色 */
    color: #2c3e50;         /* 深蓝灰色文字，和米黄色背景对比清晰 */
    border-radius: 12px;    /* 圆角12px，模拟卡牌的圆角 */
    padding: 10px 6px;      /* 内边距，让卡牌内容和边框有距离 */
    cursor: pointer;        /* 鼠标悬停时变手指，提示“可点击使用” */
    transition: 0.2s;       /* 所有样式变化的过渡动画（0.2秒），让交互更丝滑 */
    border: 3px solid #7f8c8d; /* 浅灰色边框，默认状态 */
    display: flex;          /* 弹性布局：让卡牌内部内容垂直排列 */
    flex-direction: column; /* 弹性布局方向：垂直 */
    justify-content: space-between; /* 子元素：上下分散对齐（费用在顶，描述在底） */
    box-shadow: 0 4px 8px rgba(0,0,0,0.5); /* 黑色阴影，增加卡牌立体感 */
}
/* 卡牌鼠标悬停样式：交互反馈，提示玩家当前选中的卡牌 */
.card:hover {
    transform: translateY(-8px); /* 向上移动8px，突出显示 */
    border-color: #f39c12;       /* 边框变橙色，游戏主题色，强化选中效果 */
    box-shadow: 0 12px 20px #000; /* 阴影变大，增加悬浮的立体感 */
}
/* 卡牌费用：右上角的圆形数字，代表使用该卡牌需要的能量 */
.cost {
    background: #3498db;    /* 蓝色背景，和能量条颜色一致 */
    color: #fff;            /* 白色文字，对比清晰 */
    width: 28px;            /* 固定宽高28px，做成正圆形 */
    height: 28px;
    border-radius: 50%;     /* 圆角50%，正圆形 */
    display: flex;          /* 弹性布局：让数字水平垂直居中 */
    align-items: center;
    justify-content: center;
    font-weight: bold;      /* 文字加粗，更醒目 */
    margin-left: auto;      /* 靠右对齐：margin-left:auto 是弹性布局的靠右技巧 */
    font-size: 16px;        /* 字体大小 */
    border: 2px solid #fff; /* 白色边框，突出费用圈 */
}
/* 卡牌名称：居中加粗，醒目显示 */
.name {
    font-weight: 900;       /* 超粗体，比bold更醒目 */
    text-align: center;     /* 文字居中 */
    font-size: 15px;        /* 字体大小 */
    margin: 5px 0 3px;      /* 上下外边距，和费用/描述分隔 */
    color: #1e2b3a;         /* 深灰色文字，比默认文字稍深，更醒目 */
}
/* 卡牌描述：小字居中，说明卡牌效果 */
.desc {
    font-size: 11px;        /* 小字体，避免内容过多 */
    text-align: center;     /* 文字居中 */
    background: #ecd9b4;    /* 比卡牌背景稍深的米黄色，区分描述区域 */
    padding: 4px 2px;       /* 内边距，让文字和边框有距离 */
    border-radius: 20px;    /* 大圆角，做成胶囊形状 */
    margin: 5px 0;          /* 上下外边距，和名称分隔 */
}

/* ========== 战斗日志：显示战斗过程 ========== */
.log {
    background: #1e1e1e;    /* 深黑色背景，和游戏区域区分 */
    padding: 12px;          /* 内边距12px */
    border-radius: 12px;    /* 圆角12px */
    height: 140px;          /* 固定高度140px，避免日志过长 */
    overflow-y: auto;       /* 垂直滚动：日志内容过多时，显示滚动条 */
    margin: 15px 0;         /* 上下外边距15px，和手牌/按钮分隔 */
    font-size: 14px;        /* 小字体，能显示更多内容 */
    border: 1px solid #f39c12; /* 橙色边框，和游戏主题呼应 */
}

/* ========== 按钮组：结束回合、重新开始、退出商店等按钮 ========== */
.btn-group {
    display: flex;          /* 弹性布局：按钮横向排列 */
    gap: 15px;              /* 按钮之间的间距15px */
    justify-content: center; /* 按钮水平居中 */
    margin-top: 15px;       /* 顶部外边距15px，和日志分隔 */
}
/* 通用按钮样式：所有按钮复用，减少代码冗余 */
button {
    padding: 12px 30px;     /* 内边距，撑大按钮 */
    background: #2ecc71;    /* 绿色背景，代表可点击的按钮 */
    border: none;           /* 去掉默认边框 */
    border-radius: 40px;    /* 大圆角，做成胶囊按钮，更美观 */
    color: #fff;            /* 白色文字 */
    font-weight: bold;      /* 文字加粗 */
    font-size: 16px;        /* 字体大小 */
    cursor: pointer;        /* 鼠标悬停变手指，提示可点击 */
    transition: 0.2s;       /* 样式变化的过渡动画 */
    border-bottom: 4px solid #1e8b4c; /* 深绿色底部边框，模拟按钮的立体感（按下效果） */
}
/* 按钮鼠标悬停样式：交互反馈 */
button:hover {
    background: #27ae60;    /* 背景变深绿色，视觉变化 */
    transform: scale(1.02);  /* 稍微放大（1.02倍），突出显示 */
}
/* 按钮禁用样式：如“结束回合”非玩家回合时禁用 */
button:disabled {
    background: #7f8c8d;    /* 灰色背景，代表不可点击 */
    border-bottom-color: #4a4a4a; /* 深灰色底部边框，和背景呼应 */
    cursor: not-allowed;    /* 鼠标悬停变“禁止”图标，提示不可点击 */
}

/* ========== 顶部信息栏：金币、层数、牌堆信息 ========== */
.info-bar {
    display: flex;          /* 弹性布局：金币和层数两端对齐 */
    justify-content: space-between; /* 子元素两端对齐 */
    margin-bottom: 10px;    /* 底部外边距10px，和牌堆信息分隔 */
    font-size: 20px;        /* 字体大小，醒目 */
    font-weight: bold;      /* 文字加粗 */
    background: #3d3d3d;    /* 背景色，和面板一致 */
    padding: 10px 20px;     /* 内边距 */
    border-radius: 40px;    /* 大圆角，胶囊形状 */
    border: 1px solid #f39c12; /* 橙色边框 */
}
/* 牌堆信息栏：抽牌堆/弃牌堆数量，和信息栏样式统一 */
.pile-info {
    display: flex;          /* 弹性布局：两个信息横向排列 */
    gap: 30px;              /* 间距30px，避免内容拥挤 */
    font-size: 16px;        /* 字体大小比信息栏小，次要信息 */
    margin-top: 5px;        /* 顶部外边距5px */
    background: #3d3d3d;    /* 和信息栏一致的背景色 */
    padding: 8px 20px;      /* 内边距 */
    border-radius: 40px;    /* 大圆角，胶囊形状 */
    justify-content: center; /* 内容水平居中 */
}

/* ========== 地图节点界面：战斗胜利后显示，选择行动 ========== */
.map {
    display: none;          /* 初始隐藏，JS控制显示 */
    margin: 30px 0;         /* 上下外边距30px，突出地图区域 */
}
/* 节点容器：3个节点（战斗/商店/休息）的父容器 */
.nodes {
    display: flex;          /* 弹性布局：节点横向排列 */
    gap: 30px;              /* 节点之间的间距30px */
    flex-wrap: wrap;        /* 自动换行：屏幕较小时，节点垂直排列 */
    justify-content: center; /* 节点水平居中 */
}
/* 通用节点样式：3个节点复用，保证大小、样式一致 */
.node {
    padding: 30px 20px;     /* 内边距，撑大节点 */
    background: #3d3d3d;    /* 背景色，和面板一致 */
    border-radius: 24px;    /* 大圆角，更美观 */
    cursor: pointer;        /* 鼠标悬停变手指，提示可点击 */
    width: 200px;           /* 固定宽度200px，所有节点一样宽 */
    text-align: center;     /* 文字居中 */
    font-size: 28px;        /* 大字体，醒目 */
    font-weight: bold;      /* 文字加粗 */
    transition: 0.2s;       /* 样式变化的过渡动画 */
    border: 4px solid transparent; /* 透明边框：避免hover时边框出现导致布局偏移 */
}
/* 节点鼠标悬停样式：交互反馈 */
.node:hover {
    transform: scale(1.05); /* 放大1.05倍，突出显示 */
    filter: brightness(1.2); /* 亮度提高1.2倍，更醒目 */
}
/* 战斗节点：红色边框+背景，代表“战斗”的危险属性 */
.node.fight { border-color: #e74c3c; background: #4a2a2a; }
/* 商店节点：黄色边框+背景，修复display:none问题，强制显示！important提高优先级 */
.node.shop  { border-color: #f1c40f; background: #4a3f1a; display: block !important; }
/* 休息节点：绿色边框+背景，代表“休息”的恢复属性 */
.node.rest  { border-color: #2ecc71; background: #1a3a2a; }

/* ========== 商店界面：购买卡牌的区域 ========== */
.shop {
    display: none;          /* 初始隐藏，JS控制显示 */
    margin: 20px 0;         /* 上下外边距20px */
    background: #382e1e;    /* 棕黄色背景，模拟“商店”的视觉风格 */
    padding: 20px;          /* 内边距20px */
    border-radius: 30px;    /* 大圆角，和地图节点呼应 */
    border: 3px solid #f1c40f; /* 黄色边框，商店主题色 */
}
/* 商店卡牌容器：存放可购买的卡牌，和手牌容器样式类似 */
.shop-cards {
    display: flex;          /* 弹性布局：卡牌横向排列 */
    gap: 16px;              /* 卡牌之间的间距16px */
    flex-wrap: wrap;        /* 自动换行 */
    margin: 20px 0;         /* 上下外边距20px */
    justify-content: center; /* 卡牌水平居中 */
}
/* 商店单张卡牌样式：比手牌稍大，显示价格 */
.shop-card {
    background: #f0e6d0;    /* 和手牌一样的米黄色背景，保持风格统一 */
    color: #222;            /* 深灰色文字，对比清晰 */
    padding: 15px 10px;     /* 内边距，比手牌稍大 */
    border-radius: 20px;    /* 大圆角 */
    width: 150px;           /* 固定宽度150px，比手牌宽 */
    cursor: pointer;        /* 鼠标悬停变手指，提示可购买 */
    transition: 0.2s;       /* 样式变化的过渡动画 */
    border: 3px solid #f39c12; /* 橙色边框，游戏主题色 */
    display: flex;          /* 弹性布局：内部内容垂直居中 */
    flex-direction: column; /* 垂直排列 */
    align-items: center;    /* 水平居中 */
}
/* 商店卡牌鼠标悬停样式：交互反馈，和手牌类似 */
.shop-card:hover {
    background: #ffe4b5;    /* 背景变浅橙色，突出显示 */
    transform: translateY(-6px); /* 向上移动6px，悬浮效果 */
    box-shadow: 0 10px 20px black; /* 阴影变大，增加立体感 */
}
/* 商店卡牌价格：底部的金币数字，代表购买需要的金币 */
.price {
    color: #ffd966;         /* 亮黄色文字，模拟金币颜色 */
    font-weight: bold;      /* 文字加粗 */
    font-size: 18px;        /* 字体大小 */
    margin-top: 8px;        /* 顶部外边距8px，和卡牌描述分隔 */
    background: #2d2d2d;    /* 深灰色背景，突出价格 */
    padding: 4px 12px;      /* 内边距，撑大价格区域 */
    border-radius: 40px;    /* 大圆角，胶囊形状 */
}

/* ========== 提示信息：浮动的临时提示（能量不足、购买成功等） ========== */
.toast {
    position: fixed;        /* 固定定位：相对于屏幕，滚动页面时位置不变 */
    top: 20px;              /* 距离屏幕顶部20px */
    left: 50%;              /* 距离屏幕左侧50%，配合transform实现水平居中 */
    transform: translateX(-50%); /* 向左移动50%自身宽度，精准水平居中 */
    background: #000000dd;  /* 黑色半透明背景（dd是透明度），不遮挡底层内容 */
    color: #f39c12;         /* 橙色文字，游戏主题色，醒目 */
    padding: 14px 30px;     /* 内边距，撑大提示框 */
    border-radius: 60px;    /* 超大圆角，胶囊形状 */
    font-size: 18px;        /* 字体大小 */
    font-weight: bold;      /* 文字加粗 */
    opacity: 0;             /* 初始透明，JS控制显示（opacity:1） */
    transition: opacity 0.3s; /* 透明度变化的过渡动画，让提示框淡入淡出 */
    border: 2px solid #f39c12; /* 橙色边框，突出提示框 */
    z-index: 999;           /* 最高层级，保证提示框在所有内容之上 */
}
/* 层数徽章：信息栏里的“第X层”，突出显示 */
.floor-badge {
    background: #f39c12;    /* 橙色背景，游戏主题色 */
    color: #1a1a1a;         /* 深灰色文字，对比清晰 */
    padding: 5px 20px;      /* 内边距，撑大徽章 */
    border-radius: 40px;    /* 大圆角，胶囊形状 */
    font-weight: bold;      /* 文字加粗 */
}