* { box-sizing: border-box; margin: 0; padding: 0; }
body { height: 100vh; overflow: hidden; font-family: 'VT323', monospace; background: #111; }
.pixel-text { font-family: 'VT323', monospace; letter-spacing: 2px; }
.main-container { display: flex; height: 100vh; }

/* Panel Izquierdo */
.left-panel {
    flex: 1; background: linear-gradient(to bottom, #f44 50%, #eee 50%);
    position: relative; border-right: 12px solid #000;
    display: flex; flex-direction: column; align-items: center;
}
.center-line { height: 40px; background: #000; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); }
.pokeball-ui-circle {
    width: 280px; height: 280px; background: #fff; border: 15px solid #000; border-radius: 50%;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.digit { font-size: 4rem; color: #000; border-bottom: 6px solid #000; display: inline-block; width: 45px; text-align: center; }
.controls-row { display: flex; gap: 40px; margin-top: 10px; }
.arrow-btn { background: none; border: none; font-size: 2.8rem; cursor: pointer; color: #000; }
.arrow-btn:active { transform: scale(0.9); }

/* Panel Derecho */
.right-panel {
    flex: 1;
    position: relative;
    background-color: #000;
}

#pokemon-viewer {
height: 70%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
/* El fondo pixelado image_0.png se carga dinámicamente en el JS */
background-size: cover;
background-position: center;
}

.pokemon-sprite { height: 280px; filter: drop-shadow(0 15px 15px rgba(0,0,0,0.5)); z-index: 5; }

.form-arrow {
    position: absolute; background: rgba(0,0,0,0.6); color: #fff; border: 2px solid #fff;
    padding: 10px 15px; cursor: pointer; z-index: 10; border-radius: 5px;
}
.form-arrow.left { left: 20px; }
.form-arrow.right { right: 20px; }

/* Overlay de Información detallada */
.content-overlay {
    height: 30%; width: 100%; background: rgba(0,0,0,0.9);
    padding: 0 40px; display: flex; align-items: center; gap: 30px;
    border-top: 6px solid #fff; /* Borde superior blanco como en la imagen */
}
.info-layout { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.info-box { display: flex; flex-direction: column; align-items: flex-start; }
.info-box h1 { font-size: 3rem; color: #fff; text-transform: uppercase; margin-top: -5px; }
.info-box span { color: #aaa; font-size: 1.8rem; }

/* Botón Shiny (Versión Rectangular Estática amarilla sólida) */
.special-btn {
    width: 65px; height: 65px; border: 4px solid #fff; border-radius: 5px; /* Rectangular con bordes suaves */
    font-size: 2.5rem; cursor: pointer; display: flex; justify-content: center; align-items: center;
    transition: background 0.2s, color 0.2s;
}
.shiny-off { background: #333; color: #555; }
.shiny-on { background: #ff0; color: #000; border-color: #ff0; } /* Sin animación ni brillo */

/* Lista de Tipos */
.types-list { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.type-icon {
    padding: 8px 20px; border-radius: 5px; color: #fff;
    text-transform: uppercase; font-size: 0.9rem; font-weight: bold;
    border: 2px solid rgba(255,255,255,0.4);
    min-width: 120px; text-align: center;
}

/* Colores Oficiales PokeAPI */
.type-normal { background: #A8A878; } .type-fire { background: #F08030; }
.type-water { background: #6890F0; } .type-grass { background: #78C850; }
.type-electric { background: #F8D030; } .type-ice { background: #98D8D8; }
.type-fighting { background: #C03028; } .type-poison { background: #A040A0; }
.type-ground { background: #E0C068; } .type-flying { background: #A890F0; }
.type-psychic { background: #F85888; } .type-bug { background: #A8B820; }
.type-rock { background: #B8A038; } .type-ghost { background: #705898; }
.type-dragon { background: #7038F8; } .type-dark { background: #705848; }
.type-steel { background: #B8B8D0; } .type-fairy { background: #EE99AC; }

.search-section { position: absolute; bottom: 30px; text-align: center; width: 100%; z-index: 20; color: #000; }
#search-btn { padding: 10px 30px; background: #000; color: #fff; border: 3px solid #fff; cursor: pointer; }