/* 基础样式和动画 */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    
    .text-glow {
        text-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
    }
    
    .bg-grid {
        background-image: linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
    }
    
    .animate-float {
        animation: float 3s ease-in-out infinite;
    }
    
    .animate-pulse-slow {
        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    
    /* 游戏按钮 */
    .game-btn {
        @apply text-white font-semibold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-secondary/50;
    }
    
    .game-btn:disabled {
        @apply opacity-50 cursor-not-allowed hover:scale-100;
    }
    
    /* 模式按钮 */
    .mode-btn {
        @apply text-white text-sm font-semibold py-2 px-4 rounded-lg transition-all;
    }
    
    .mode-btn.active {
        @apply opacity-100;
    }
    
    .mode-btn:not(.active) {
        @apply opacity-70;
    }
    
    /* 状态栏 */
    .game-status-bar {
        @apply flex justify-between items-center p-4;
    }
    
    .status-items {
        @apply flex gap-6;
    }
    
    .status-item {
        @apply flex items-center gap-2 bg-dark/50 backdrop-blur-sm px-4 py-2 rounded-lg border border-gray-800;
    }
    
    .pause-btn {
        @apply bg-dark/50 backdrop-blur-sm hover:bg-dark/70 text-white p-4 rounded-full border border-gray-800 transition-all duration-300;
    }
    
    /* 指示器 */
    .combo-indicator {
        @apply absolute top-1/3 left-1/2 transform -translate-x-1/2 text-3xl font-display font-bold text-accent opacity-0 transition-opacity duration-300 pointer-events-none;
    }
    
    .no-ammo-indicator {
        @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-2xl font-display font-bold text-red-500 opacity-0 transition-opacity duration-300 pointer-events-none;
    }
    
    /* 点击效果 */
    .tap-indicator {
        position: absolute;
        width: 40px;
        height: 40px;
        border: 2px solid rgba(255,255,255,0.5);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 20;
        animation: tapEffect 0.6s ease-out forwards;
    }
    
    /* 排行榜 */
    .leaderboard-list {
        @apply space-y-2;
    }
    
    .leaderboard-item {
        @apply flex items-center justify-between p-3 bg-gray-900/50 rounded-lg hover:bg-gray-900/70 transition-colors;
        animation: slideIn 0.3s ease-out forwards;
        opacity: 0;
        transform: translateY(10px);
    }
    
    /* 名称输入 */
    .name-input-wrapper {
        @apply bg-gradient-to-r from-secondary/20 to-accent/20 rounded-lg p-4 border border-secondary/30;
    }
    
    .name-input-title {
        @apply text-white font-semibold mb-2 text-center;
    }
    
    .name-input-group {
        @apply flex gap-2;
    }
    
    .name-input {
        @apply flex-1 bg-dark border border-gray-700 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-secondary;
    }
    
    .submit-btn {
        @apply bg-secondary hover:bg-secondary/80 text-white font-semibold py-2 px-4 rounded-lg transition-all;
    }
    
    .name-input-hint {
        @apply text-gray-400 text-xs mt-2;
    }
    
    /* 模态框 */
    .screen-overlay {
        @apply absolute inset-0 z-30 flex items-center justify-center bg-primary/80 backdrop-blur-sm;
    }
    
    .modal-content {
        @apply bg-dark/90 p-8 rounded-xl border border-gray-800 shadow-2xl max-w-xs w-full mx-4;
    }
    
    /* 按钮组 */
    .button-group {
        @apply flex flex-col gap-4 mb-6;
    }
    
    /* 游戏说明 */
    .instructions-list {
        @apply space-y-4 text-gray-300 mb-6;
    }
    
    .instruction-item {
        @apply flex items-start;
    }
    
    /* 动画 */
    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }
    
    @keyframes tapEffect {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(0.5);
        }
        100% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(1.5);
        }
    }
    
    @keyframes slideIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: .5;
        }
    }
}