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

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

/* 加载动画 */
.loader {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    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: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.bg-gradient-pokemon {
    background: linear-gradient(135deg, #3B82F6 0%, #F59E0B 100%);
}

.pokemon-card {
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s;
    cursor: pointer;
}
.pokemon-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.type-badge {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    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 {
    transform: scale(1.05);
}

/* 属性颜色 */
.bg-grass { background-color: #4CAF50; }
.bg-fire { background-color: #F44336; }
.bg-water { background-color: #2196F3; }
.bg-electric { background-color: #FFC107; }
.bg-rock { background-color: #9E9E9E; }
.bg-psychic { background-color: #9C27B0; }
.bg-poison { background-color: #8B4513; }
.bg-flying { background-color: #87CEEB; }
.bg-normal { background-color: #E0E0E0; color: #333; }
.bg-fighting { background-color: #CD5C5C; }
.bg-ground { background-color: #D2B48C; }
.bg-bug { background-color: #7CFC00; color: #333; }
.bg-ghost { background-color: #4B0082; }
.bg-steel { background-color: #C0C0C0; color: #333; }
.bg-ice { background-color: #87CEFA; }
.bg-dragon { background-color: #FF4500; }
.bg-dark { background-color: #2F4F4F; }
.bg-fairy { background-color: #FF69B4; }

/* 确保响应式布局正常工作 */
.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;
    }
}