/* General Styles */
body {
    font-family: 'Press Start 2P', cursive;
    background-color: #333; /* Dark background */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    color: #333;
    font-size: 10px; /* Smaller base font size for pixel look */
    line-height: 1.5;
}

/* Pokedex Container */
.pokedex {
    width: 700px;
    height: 550px;
    background-color: #d10a40; /* Classic Pokedex Red */
    border: 4px solid #333;
    border-radius: 10px 10px 10px 30px; /* Rounded top, sharper bottom */
    display: flex;
    flex-direction: column;
    box-shadow: 5px 5px 0px #8b0000; /* Pixelated shadow */
    position: relative; /* For positioning elements */
    padding: 15px;
}

/* Pokedex Top Section */
.pokedex-top {
    display: flex;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 4px solid #333;
    margin-bottom: 15px;
}

.camera-lens {
    width: 50px;
    height: 50px;
    background-color: #87ceeb; /* Sky blue */
    border: 4px solid #333;
    border-radius: 50%;
    margin-right: 15px;
    box-shadow: inset 2px 2px 0px #4682b4; /* Inner shadow */
}

.led {
    width: 15px;
    height: 15px;
    border: 2px solid #333;
    border-radius: 50%;
    margin-left: 8px;
    box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.5);
}

.led-red { background-color: #ff0000; }
.led-yellow { background-color: #ffff00; }
.led-green { background-color: #00ff00; }

/* Pokedex Main Section */
.pokedex-main {
    display: flex;
    flex-direction: row;
    gap: 15px;
    flex-grow: 1;
    align-items: stretch; /* Explicitly set stretch */
    min-height: 0; /* Prevent flexbox sizing issues */
}

/* Pokemon List */
.pokedex-list {
    width: 200px;
    background-color: #f0f0f0;
    border: 4px solid #333;
    border-radius: 4px;
    padding: 10px;
    overflow-y: auto;
    box-shadow: inset 3px 3px 0px #bbb;
    color: #333;
    min-height: 0; /* Prevent flexbox sizing issues */
}

.pokedex-list h3 {
    margin-top: 0;
    font-size: 12px;
    text-align: center;
}

#pokemon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 9px;
}

#pokemon-list li {
    padding: 5px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    text-transform: capitalize;
}

#pokemon-list li:hover {
    background-color: #d10a40;
    color: white;
}

/* Pokedex Screen */
.pokedex-screen {
    background-color: #9ead86; /* Gameboy green */
    border: 4px solid #333;
    flex-grow: 1;
    padding: 15px;
    overflow-y: auto; /* Scroll if content overflows */
    box-shadow: inset 3px 3px 0px #5f7c5a; /* Inner shadow */
    min-height: 0; /* Prevent flexbox sizing issues */
}

#pokemon-display {
    text-align: center;
    color: #333; /* Dark text on green screen */
}

#pokemon-display img {
    width: 96px; /* Pixel art size */
    height: 96px;
    margin-bottom: 10px;
    image-rendering: pixelated; /* Keep pixels sharp */
    background-color: rgba(255, 255, 255, 0.1); /* Slight background for image */
    border: 2px solid #333;
}

#pokemon-display h2 {
    margin: 5px 0;
    text-transform: capitalize;
    font-size: 14px;
}

#pokemon-display p {
    margin: 3px 0;
    font-size: 10px;
}

.pokemon-types {
    margin-top: 10px;
}

.pokemon-types strong {
    display: block;
    margin-bottom: 3px;
}

.pokemon-types span {
    display: inline-block;
    padding: 3px 6px;
    margin: 2px;
    border: 1px solid #333;
    border-radius: 0; /* Sharp corners */
    color: white;
    text-transform: capitalize;
    font-size: 9px;
    text-shadow: 1px 1px #333; /* Pixel text shadow */
}

/* Moves List */
.pokemon-moves {
    margin-top: 10px;
    text-align: left;
    max-height: 150px;
    overflow-y: auto;
    border-top: 2px solid #333;
    padding-top: 5px;
    font-size: 8px;
}

.pokemon-moves strong {
    display: block;
    margin-bottom: 5px;
}

.pokemon-moves ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    columns: 2;
    column-gap: 10px;
}

.pokemon-moves li {
    margin-bottom: 3px;
    text-transform: capitalize;
}

/* Pokedex Bottom Section */
.pokedex-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
    border-top: 4px solid #333;
    margin-top: auto; /* Push to bottom */
}

#pokemon-search {
    padding: 8px;
    border: 2px solid #333;
    border-radius: 0; /* Sharp corners */
    margin-right: 5px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    width: 150px; /* Adjust width */
    background-color: #eee;
}

#search-button {
    padding: 8px 12px;
    background-color: #3b4cca; /* Pokemon Blue */
    color: white;
    border: 2px solid #333;
    border-radius: 0; /* Sharp corners */
    cursor: pointer;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    box-shadow: 2px 2px 0px #2a3aa8; /* Pixelated shadow */
    text-shadow: 1px 1px #333;
}

#search-button:active {
    box-shadow: inset 1px 1px 0px #2a3aa8; /* Pressed effect */
    transform: translate(1px, 1px); /* Slight move on press */
}

/* Type Colors (Keep existing, maybe adjust slightly if needed) */
.type-normal { background-color: #A8A77A; }
.type-fire { background-color: #EE8130; }
.type-water { background-color: #6390F0; }
.type-electric { background-color: #F7D02C; }
.type-grass { background-color: #7AC74C; }
.type-ice { background-color: #96D9D6; }
.type-fighting { background-color: #C22E28; }
.type-poison { background-color: #A33EA1; }
.type-ground { background-color: #E2BF65; }
.type-flying { background-color: #A98FF3; }
.type-psychic { background-color: #F95587; }
.type-bug { background-color: #A6B91A; }
.type-rock { background-color: #B6A136; }
.type-ghost { background-color: #735797; }
.type-dragon { background-color: #6F35FC; }
.type-dark { background-color: #705746; }
.type-steel { background-color: #B7B7CE; }
.type-fairy { background-color: #D685AD; }

/* Custom Scrollbar Styles (WebKit) */
.pokedex-list::-webkit-scrollbar,
.pokedex-screen::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}

.pokedex-list::-webkit-scrollbar-track,
.pokedex-screen::-webkit-scrollbar-track {
    background: #ccc; /* Color of the track */
    border: 1px solid #333;
    border-radius: 0; /* Sharp corners */
}

.pokedex-list::-webkit-scrollbar-thumb,
.pokedex-screen::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scroll thumb */
    border: 2px solid #333; /* Border around thumb */
    border-radius: 0; /* Sharp corners */
}

.pokedex-list::-webkit-scrollbar-thumb:hover,
.pokedex-screen::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker thumb on hover */
}