/* Tailwind自定义配置 */
@layer utilities {
    .text-shadow { text-shadow: 0 0 8px rgba(34, 197, 94, 0.8); }
    .glow { box-shadow: 0 0 15px rgba(34, 197, 94, 0.6); }
    .pulse { animation: pulse 2s infinite; }
    .boss-glow { box-shadow: 0 0 20px rgba(220, 38, 38, 0.8); }
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
}

/* 引入游戏字体 */
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');

/* 全局样式 */
body {
    overflow: hidden;
    background-image: url('https://picsum.photos/id/29/1920/1080');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 游戏画布样式 */
#gameCanvas {
    border: 3px solid rgba(34, 197, 94, 0.8);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
    background: rgba(17, 24, 39, 0.85);
}

/* 僵尸动画 */
.zombie {
    animation: zombieWalk 0.5s infinite alternate;
}
.boss-zombie {
    animation: bossWalk 0.8s infinite alternate;
}
@keyframes zombieWalk {
    from { transform: translateX(0) rotate(0deg); }
    to { transform: translateX(5px) rotate(2deg); }
}
@keyframes bossWalk {
    from { transform: translateX(0) rotate(0deg) scale(1); }
    to { transform: translateX(8px) rotate(3deg) scale(1.03); }
}

/* 按钮悬浮效果 */
.btn-hover {
    transition: all 0.2s ease;
}
.btn-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(34, 197, 94, 0.4);
}

/* 血条过渡效果 */
.health-bar {
    transition: width 0.3s ease;
}

/* 状态效果图标 */
.status-icon {
    position: absolute;
    width: 24px;
    height: 24px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    border-radius: 50%;
    pointer-events: none; /* 防止遮挡交互 */
}
.blinded-icon { background-color: rgba(139, 69, 19, 0.8); }
.slowed-icon { background-color: rgba(135, 206, 235, 0.8); }
.boss-icon { background-color: rgba(220, 38, 38, 0.9); font-weight: bold; }

/* 激光效果 */
.laser-beam {
    position: absolute;
    background: linear-gradient(90deg, rgba(255,0,255,0) 0%, rgba(255,0,255,1) 50%, rgba(255,0,255,0) 100%);
    height: 5px;
    transform-origin: left center;
    z-index: 10;
    opacity: 0.8;
    animation: laserPulse 0.2s infinite alternate;
}
@keyframes laserPulse {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

/* BOSS出现提示 */
#bossWarning {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #dc2626;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(220, 38, 38, 0.8);
    font-family: 'Ma Shan Zheng', cursive;
    animation: bossWarning 1.5s infinite alternate;
    display: none;
    z-index: 100;
}
@keyframes bossWarning {
    from { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

/* Tailwind颜色扩展（补充，确保样式生效） */
:root {
    --color-primary: #22c55e;
    --color-secondary: #16a34a;
    --color-accent: #ef4444;
    --color-dark: #111827;
    --color-light: #f3f4f6;
    --color-poop: #8B4513;
    --color-pee: #87CEEB;
    --color-laser: #ff00ff;
    --color-boss: #dc2626;
}