/* --- 全局与主题 --- */
:root {
    --bg-top: #ffd6e5; /* 粉色顶部 */
    --bg-bottom: #ffe9f0; /* 浅粉底部 */
    --primary: #ff8fab; /* 主要粉色 */
    --primary-light: #ffaabc;
    --primary-dark: #f56a8a;
    --accent: #a0e7e5; /* 青色点缀 */
    --accent-light: #c4f1f0;
    --text-main: #6d4c41; /* 棕色文字 */
    --text-light: #a1887f;
    --panel-bg: rgba(255, 255, 255, 0.9);
    --shadow: 0 4px 8px rgba(211, 147, 167, 0.2); /* 粉色阴影 */
    --border-radius: 16px; /* 更圆润的圆角 */
    --transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 平滑过渡 */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
    user-select: none; /* 禁止选择文本 */
    -webkit-user-select: none;
}

body {
    font-family: 'ZCOOL KuaiLe', 'Noto Sans SC', sans-serif; /* 可爱圆润字体 */
    background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom));
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: -webkit-fill-available; /* iOS Safari 高度修正 */
    overflow: hidden; /* 禁止滚动 */
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* --- 梦幻背景 --- */
#dreamy-background {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.star {
    position: absolute;
    width: 4px; height: 4px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
    animation: twinkle 2s infinite alternate ease-in-out;
}

/* 随机分布星星 */
.star:nth-child(1) { top: 10%; left: 20%; animation-delay: 0.2s; }
.star:nth-child(2) { top: 30%; left: 80%; animation-delay: 0.8s; transform: scale(1.2); }
.star:nth-child(3) { top: 55%; left: 15%; animation-delay: 1.5s; transform: scale(0.8); }
.star:nth-child(4) { top: 80%; left: 60%; animation-delay: 0.5s; }
.star:nth-child(5) { top: 25%; left: 45%; animation-delay: 1.1s; transform: scale(1.1); }
.star:nth-child(6) { top: 70%; left: 90%; animation-delay: 1.8s; }

@keyframes twinkle {
    from { opacity: 0.4; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1.2); }
}

/* --- 主要游戏区域 --- */
#game-area {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    padding: 20px; /* 留出边距 */
}

/* --- 新增：猫咪头像样式 --- */
.cat-avatar {
    position: absolute; /* 绝对定位，相对于 #game-area */
    top: 15px;          /* 距离顶部距离 */
    width: 60px;        /* 头像宽度 */
    height: 60px;       /* 头像高度 */
    border-radius: 50%; /* 圆形头像 */
    object-fit: cover;  /* 保持图片比例并裁剪 */
    border: 3px solid white; /* 白色边框 */
    box-shadow: 0 2px 6px rgba(211, 147, 167, 0.3); /* 粉色阴影 */
    z-index: 5;         /* 确保在零食之上 */
    /* 添加简单的呼吸/摇摆动画 */
    animation: gentle-sway 4s ease-in-out infinite alternate;
}

#beibei-avatar {
    left: 20px; /* 贝贝在左边 */
    /* animation-delay: 0s; */ /* 可以设置不同延迟 */
}

#meimei-avatar {
    right: 20px; /* 妹妹在右边 */
    animation-delay: 0.5s; /* 稍微错开动画 */
}

/* 猫咪头像摇摆动画 */
@keyframes gentle-sway {
    0% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-3px) rotate(0deg); }
    100% { transform: translateY(0) rotate(2deg); }
}

/* 确保零食在头像下方或同级（如果需要）*/
.snack {
    /* ... 其他样式保持不变 ... */
    z-index: 1; /* 确保零食的 z-index 低于头像 */
}

/* --- 漂浮的小零食 --- */
.snack {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: transform 0.3s ease-out, opacity 0.5s ease;
    will-change: transform, opacity;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1));
}

/* 定义不同零食的背景图片 */
.snack-type-1 { background-image: url('assets/snacks/fish.png'); } /* 小鱼干 */
.snack-type-2 { background-image: url('assets/snacks/catnip.png'); } /* 猫薄荷 */
.snack-type-3 { background-image: url('assets/snacks/yarn.png'); } /* 毛线团 */
.snack-type-4 { background-image: url('assets/snacks/mouse.png'); } /* 玩具老鼠 */
.snack-type-5 { background-image: url('assets/snacks/treat.png'); } /* 猫粮/小饼干 */
.snack-type-rare {
    background-image: url('assets/snacks/golden_fish.png'); /* 稀有：黄金鱼 */
    animation: rare-glow 1.5s infinite alternate;
}

@keyframes rare-glow {
    from { filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1)) brightness(1); }
    to { filter: drop-shadow(2px 2px 8px #ffec8b) brightness(1.2); } /* 金色光晕 */
}

/* 零食漂浮动画 */
.snack.animated {
    animation: float-snack 6s infinite alternate ease-in-out;
}

@keyframes float-snack {
    0% { transform: translateY(0px) rotate(var(--rotate, 0deg)); }
    50% { transform: translateY(-12px) rotate(var(--rotate, 0deg)); }
    100% { transform: translateY(0px) rotate(var(--rotate, 0deg)); }
}

/* 点击时的抖动 */
.snack.pop {
    animation: pop-snack 0.4s ease-out;
}

@keyframes pop-snack {
    0% { transform: scale(1) rotate(var(--rotate, 0deg)); }
    50% { transform: scale(1.2) rotate(var(--rotate, 0deg)); }
    100% { transform: scale(1) rotate(var(--rotate, 0deg)); }
}

/* 收集反馈文字 (喵力值增加) */
.feedback-text {
    position: absolute;
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: bold;
    pointer-events: none;
    z-index: 10;
    opacity: 1;
    transition: transform 1s cubic-bezier(0.1, 0.8, 0.2, 1), opacity 1s ease-out;
    transform: translate(-50%, 0); /* 初始居中 */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

/* --- 底部控制面板 --- */
#control-panel {
    background-color: var(--panel-bg);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    z-index: 100;
    position: relative; /* 确保在游戏区域之上 */
}

/* 猫咪信息区 */
#cat-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1; /* 占据剩余空间 */
}

#level-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

#cat-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-dark);
}

#level-indicator {
    background-color: var(--primary);
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

#level-indicator.level-pulse { /* 层级变化动画 */
    animation: pulse 0.4s ease-out;
}

.paw-icon {
    font-size: 14px;
    margin-right: 4px;
    display: inline-block;
    transform: translateY(-1px);
}

#level-display { margin-right: 2px; }
#level-suffix { font-size: 12px; }

/* 喵力值进度条 */
#power-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#power-bar {
    height: 10px; /* 加粗一点 */
    background-color: rgba(109, 76, 65, 0.1); /* 浅棕色背景 */
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    max-width: 180px; /* 稍微加长 */
}

#power-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, var(--accent-light), var(--accent)); /* 青色渐变 */
    border-radius: 5px;
    transition: width var(--transition);
}

#power-display {
    font-size: 12px;
    color: var(--text-light);
}

/* 爬塔按钮 */
#climb-tower-button {
    background: linear-gradient(to bottom, var(--primary-light), var(--primary));
    color: white;
    padding: 12px 20px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: bold;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#climb-tower-button:hover:not(:disabled) {
    background: linear-gradient(to bottom, var(--primary), var(--primary-dark));
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(211, 147, 167, 0.3);
}

#climb-tower-button:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(211, 147, 167, 0.2);
}

#climb-tower-button:disabled {
    background: #e0e0e0; /* 灰色 */
    color: #bdbdbd;
    cursor: not-allowed;
    box-shadow: none;
}

/* 按钮水平抖动 (能量不足) */
#climb-tower-button.shake-horizontal {
    animation: shake-hor 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake-hor {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* 设置按钮 */
.small-icon-button {
    width: 36px; height: 36px;
    border-radius: 50%;
    background-color: var(--accent-light);
    color: var(--primary-dark);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    transition: all var(--transition);
}

.small-icon-button:hover {
    background-color: var(--accent);
    transform: rotate(15deg) scale(1.1);
}

/* --- 提示/成就弹窗 --- */
#toast-popup {
    position: fixed;
    bottom: 80px; /* 控制面板上方 */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 20px; /* 更圆 */
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 200;
    opacity: 0;
    transition: opacity var(--transition), transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); /* 带回弹效果 */
}

#toast-popup:not(.hidden) {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px); /* 向上弹出 */
}

/* --- 设置面板 --- */
#settings-panel {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.9); /* 初始小一点 */
    background-color: var(--panel-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 24px rgba(211, 147, 167, 0.3);
    width: 90%;
    max-width: 300px;
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28); /* 回弹效果 */
}

#settings-panel:not(.hidden) {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(109, 76, 65, 0.1);
}

.panel-header h2 {
    margin: 0;
    color: var(--primary-dark);
    font-size: 20px;
}

#close-settings {
    color: var(--text-light);
    font-size: 24px;
}

.panel-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px; /* 加大间距 */
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setting-item label:first-child {
    color: var(--text-main);
}

/* 开关样式 (沿用之前的，颜色可能需要微调) */
.switch { position: relative; display: inline-block; width: 48px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: var(--primary); }
input:focus + .slider { box-shadow: 0 0 1px var(--primary); }
input:checked + .slider:before { transform: translateX(24px); }
.slider.round { border-radius: 24px; }
.slider.round:before { border-radius: 50%; }

.reset-button {
    background-color: var(--primary-light);
    color: white;
    padding: 8px 16px;
    border-radius: 12px;
    transition: all var(--transition);
}

.reset-button:hover {
    background-color: var(--primary);
    transform: scale(1.05);
}

.credits {
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
    margin-top: 10px;
}

/* --- 胜利庆祝画面 --- */
#victory-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(255, 214, 229, 0.9); /* 半透明粉色背景 */
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
}

#victory-screen:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

.victory-content {
    background-color: white;
    padding: 30px 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(211, 147, 167, 0.4);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    transform: scale(0.8);
    animation: victory-pop-in 0.5s 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

@keyframes victory-pop-in {
    to { transform: scale(1); }
}

.victory-title {
    font-family: 'Ma Shan Zheng', cursive; /* 特殊字体 */
    font-size: 48px;
    color: var(--primary-dark);
    margin-bottom: 0;
}

.victory-message {
    font-size: 16px;
    color: var(--text-main);
    line-height: 1.5;
}

.cat-celebration {
    font-size: 24px;
    color: var(--accent); /* 青色 */
    font-weight: bold;
    margin-top: 10px;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

#play-again-button {
    background: linear-gradient(to bottom, var(--accent-light), var(--accent));
    color: var(--primary-dark);
    padding: 12px 25px;
    border-radius: var(--border-radius);
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
    box-shadow: var(--shadow);
    transition: all var(--transition);
}

#play-again-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(160, 231, 229, 0.4);
}


/* 层级动画 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); } /* 更明显一点 */
    100% { transform: scale(1); }
}