/* ==========================================================================
   快乐农场 - 基础与全局样式 (base.css)
   ========================================================================== */

/* 1. 全局变量与基础设置 (Global Variables & Reset) */
:root {
    /* 游戏主区域宽度，控制整体内容的左右留白 */
    --game-width: 65%;
    
    /* 侧边背包栏的宽度：
       使用 clamp() 函数实现响应式宽度：
       - 最小 200px (手机)
       - 理想 12vw (大屏)
       - 最大 400px (超宽屏)
    */
    --inv-width: clamp(200px, 12vw, 400px);
    
    /* 顶部状态栏的固定高度，用于计算页面顶部的 padding，防止内容被遮挡 */
    --header-height: 70px;
}

body {
    font-family: 'Nunito', 'Segoe UI', sans-serif; /* 使用新字体 */
    background-color: #f7f9fc; /* 更干净的背景色 */
    color: #4a5568; /* 字体颜色不要用纯黑，用深灰蓝更高级 */
}

/* 标题样式重置 */
h1 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

h2 {
    margin-top: 40px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    color: #444;
}

/* ==========================================================================
   2. 像素画素材专用样式 (Pixel Art Assets)
   ========================================================================== */

/* 通用像素图标样式 */
.pixel-icon {
    width: 64px;
    height: 64px;
    image-rendering: pixelated; /* 核心属性：保持像素边缘锐利，不抗锯齿 */
    image-rendering: -moz-crisp-edges; /* Firefox 兼容 */
    display: inline-block;
    vertical-align: middle;
}

/* 商店和背包列表里稍微小一点，显得精致 */
.shop-item .pixel-icon, 
.inventory-content .pixel-icon {
    width: 32px;
    height: 32px;
}

/* 田地里可以稍微大一点 */
.field .pixel-icon {
    width: 96px;
    height: 96px;
    margin-bottom: 5px;
    filter: drop-shadow(0 4px 2px rgba(0,0,0,0.1)); /* 给作物加一点投影 */
}

/* 文本行内的小图标 (如任务描述、日志) */
.text-inline-icon {
    width: 20px;
    height: 20px;
    image-rendering: pixelated;
    vertical-align: text-bottom;
    margin: 0 2px;
}