/* 顶部分数栏 - 黑白水墨风 */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #f9f9f9;
    border: 2px solid #333;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.score-box {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
.score-box span {
    color: #000;
    font-size: 20px;
}

/* 重置按钮 - 黑白风格 */
.reset-btn {
    padding: 8px 16px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}
.reset-btn:hover {
    background: #000;
}

/* 游戏主区域 黑白水墨边框 */
.game-area {
    width: 100%;
    height: 200px;
    background: #ffffff;
    border: 3px solid #333;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* 水墨地面 - 黑白条纹 */
.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; /* 取消200%宽度，移除地面移动 */
    height: 12px;
    background: repeating-linear-gradient(90deg,
    #333 0px, #333 30px,
    #666 30px, #666 60px
    );
    /* 移除地面移动动画 */
}

/* 水墨小兔子 黑白风格 */
.dino {
    width: 32px;
    height: 36px;
    position: absolute;
    left: 60px;
    bottom: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36'%3E%3Cpath d='M16 2C10 2 6 8 6 14v10h20V14c0-6-4-12-10-12z' fill='%23ffffff' stroke='%23333333' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23333333'/%3E%3Ccircle cx='20' cy='12' r='1.5' fill='%23333333'/%3E%3Cpath d='M8 8c-2 0-3 2-3 4' stroke='%23333333' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M24 8c2 0 3 2 3 4' stroke='%23333333' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
    z-index: 10;
    transition: bottom 0.3s cubic-bezier(0.18, 0.74, 0.46, 1);
}
/* 跳跃动画 保留 */
.dino.jump {
    animation: jump 0.55s cubic-bezier(0.18, 0.74, 0.46, 1) forwards;
}
@keyframes jump {
    0% { bottom: 12px; }
    50% { bottom: 85px; }
    100% { bottom: 12px; }
}

/* 障碍物容器 */
.obstacles {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
}

/* 黑白水墨树 替换原障碍物 */
.obstacle {
    width: 20px;
    height: 30px;
    position: absolute;
    bottom: 12px;
    right: -20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cpath d='M10 0C8 5 5 8 5 12v8c0 4 3 6 5 6s5-2 5-6v-8c0-4-3-7-5-12z' fill='%23ffffff' stroke='%23333333' stroke-width='1.5'/%3E%3Cpath d='M10 12c-3 2-4 5-4 8h8c0-3-1-6-4-8z' fill='%23f0f0f0' stroke='%23333333' stroke-width='1'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
}

/* 云朵 黑白水墨风格 */
.clouds {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.cloud {
    position: absolute;
    width: 40px;
    height: 16px;
    background: rgba(240,240,240,0.9);
    border: 1px solid #333;
    border-radius: 20px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

/* 远山 黑白水墨风格 */
.mountains {
    position: absolute;
    width: 100%;
    height: 60px;
    bottom: 12px;
    left: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 120'%3E%3Cpath d='M0 120l40-30c20-15 60-45 80-30s40 40 60 25 40-50 60-35 40 60 60 45 40-70 60-55 40 80 60 65 40-90 60-75 40 110 60 95 40-130 60-115 40 150 60 135 40-170 60-155l40 170H0z' fill='%23f0f0f0' stroke='%23333333' stroke-width='1'/%3E%3C/svg%3E") repeat-x;
    background-size: 160px 60px;
    /* 移除远山移动动画 */
    opacity: 0.8;
}

/* 游戏提示 - 黑白风格 */
.game-msg {
    text-align: center;
    margin: 12px 0;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}