:root {
    --type-normal: #A8A77A;
    --type-fire: #EE8130;
    --type-water: #6390F0;
    --type-electric: #F7D02C;
    --type-grass: #7AC74C;
    --type-ice: #96D9D6;
    --type-fighting: #C22E28;
    --type-poison: #A33EA1;
    --type-ground: #E2BF65;
    --type-flying: #A98FF3;
    --type-psychic: #F95587;
    --type-bug: #A6B91A;
    --type-rock: #B6A136;
    --type-ghost: #735797;
    --type-dragon: #6F35FC;
    --type-dark: #705746;
    --type-steel: #B7B7CE;
    --type-fairy: #D685AD;
}

body {
    font-family: 'Noto Sans SC', sans-serif;
}

.pokemon-card {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pokemon-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), 0 0 15px var(--hover-glow-color, rgba(255, 255, 255, 0.1));
}

.pokemon-card .pokemon-sprite-container {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
}

.pokemon-sprite {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: 96px;
    height: 96px;
    transition: transform 0.3s ease;
}

.pokemon-card:hover .pokemon-sprite {
    transform: scale(1.1);
}

.type-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    text-transform: capitalize;
}

.type-normal { background-color: var(--type-normal); }
.type-fire { background-color: var(--type-fire); }
.type-water { background-color: var(--type-water); }
.type-electric { background-color: var(--type-electric); }
.type-grass { background-color: var(--type-grass); }
.type-ice { background-color: var(--type-ice); }
.type-fighting { background-color: var(--type-fighting); }
.type-poison { background-color: var(--type-poison); }
.type-ground { background-color: var(--type-ground); }
.type-flying { background-color: var(--type-flying); }
.type-psychic { background-color: var(--type-psychic); }
.type-bug { background-color: var(--type-bug); }
.type-rock { background-color: var(--type-rock); }
.type-ghost { background-color: var(--type-ghost); }
.type-dragon { background-color: var(--type-dragon); }
.type-dark { background-color: var(--type-dark); }
.type-steel { background-color: var(--type-steel); }
.type-fairy { background-color: var(--type-fairy); }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loader-pokeball {
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    animation: spin 1s linear infinite;
}

.loader-pokeball::before,
.loader-pokeball::after {
    content: '';
    position: absolute;
}

.loader-pokeball::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: #f00;
    border-radius: 30px 30px 0 0;
    border-bottom: 4px solid #000;
}

.loader-pokeball::after {
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    border: 4px solid #000;
    transform: translate(-50%, -50%);
}