/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* 加载动画 */
.loader {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    border-top-color: #3B82F6;
    width: 40px;
    height: 40px;
    animation: spinner 0.8s linear infinite;
}
@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 扁平化工具类 */
.text-shadow {
    text-shadow: none;
}

.bg-gradient-pokemon {
    background: #3B82F6;
}

.pokemon-card {
    background-color: white;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}
.pokemon-card:hover {
    border-color: #3B82F6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.type-badge {
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s;
}
.type-badge:hover {
    opacity: 0.9;
}

/* 属性颜色 - 扁平化配色 */
.bg-grass { background-color: #38A169; }
.bg-fire { background-color: #E53E3E; }
.bg-water { background-color: #3182CE; }
.bg-electric { background-color: #D69E2E; color: #fff; }
.bg-rock { background-color: #718096; }
.bg-psychic { background-color: #805AD5; }
.bg-poison { background-color: #9F7AEA; }
.bg-flying { background-color: #63B3ED; }
.bg-normal { background-color: #A0AEC0; color: #fff; }
.bg-fighting { background-color: #DD6B20; }
.bg-ground { background-color: #D69E2E; }
.bg-bug { background-color: #68D391; color: #333; }
.bg-ghost { background-color: #553C9A; }
.bg-steel { background-color: #4A5568; color: #fff; }
.bg-ice { background-color: #4FD1C7; }
.bg-dragon { background-color: #4C51BF; }
.bg-dark { background-color: #2D3748; }
.bg-fairy { background-color: #F687B3; }

/* 文本颜色 */
.text-gray-100 { color: #F7FAFC; }
.text-gray-300 { color: #E2E8F0; }
.text-gray-400 { color: #CBD5E0; }
.text-gray-500 { color: #A0AEC0; }
.text-gray-600 { color: #718096; }
.text-gray-700 { color: #4A5568; }
.text-gray-800 { color: #2D3748; }
.text-gray-900 { color: #1A202C; }

/* 确保响应式布局正常工作 */
.container {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}