body,html,#root{margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-image:linear-gradient(to top,red,#ff1919);color:#333}.app{padding:1rem;box-sizing:border-box}h1{text-align:center;margin-bottom:1rem;font-size:5vw;color:gold}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-weight:500;font-family:inherit;background-color:#1a1a1a;color:#fff;cursor:pointer;transition:border-color .25s;text-wrap:nowrap;height:2.5rem}button:hover{background-color:#505050;color:#fff}input{width:100%;height:2.5rem;border-radius:25px;text-align:center;margin-bottom:1rem}input[type=text]{width:100%;padding:.8rem;font-size:1.2rem;border:2px solid #ccc;border-radius:12px;margin-bottom:1rem;transition:all .3s;box-shadow:0 2px 6px #0000001a;box-sizing:border-box}.buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tab-button{padding:.5rem 1.2rem;border-radius:20px;background-color:#666;color:#fff;border:1px solid transparent;font-weight:500;transition:all .2s;cursor:pointer}.tab-button:hover{background-color:#999;transform:scale(1.05)}.tab-button.active{background-color:gold;color:#000;font-weight:700;border:2px solid #333;box-shadow:0 0 8px #0006;transform:scale(1.1)}.types{display:grid;width:100%;grid-template-columns:repeat(18,1fr);justify-items:center;margin-bottom:1rem;gap:10px;padding:5px;background-color:#333;border-radius:25px;overflow-x:auto}.types button{width:9vw;height:9vw;max-width:48px;max-height:48px;padding:0;background-color:#eee;border:2px solid #aaa;border-radius:50%;transition:all .3s;position:relative}.types button img{width:70%;height:70%;pointer-events:none}.types button:hover{background-color:#aaa;border:3px solid black;box-shadow:0 0 6px #0006;transform:scale(1.1)}.types button.active-type{border:3px solid black;background-color:var(--type-color);box-shadow:0 0 6px #0006;transform:scale(1.1)}.generations{display:grid;grid-template-columns:repeat(9,1fr);overflow-x:auto;gap:10px;margin-bottom:1rem;background-color:#333;border-radius:25px;padding:5px}.generations button{border-radius:20px;padding:.5rem 1.2rem;background-color:#666;color:#fff;border:1px solid transparent;font-weight:500;transition:all .2s;cursor:pointer}.generations button:hover{background-color:#999;transform:scale(1.05)}.generations button.active-generation{background-color:gold;color:#000;font-weight:700;border:2px solid #333;box-shadow:0 0 8px #0006;transform:scale(1.1)}.filter-toggle-btn{background-color:#444;color:#fff;border-radius:20px;padding:.5rem 1.2rem;margin:0 .25rem;transition:background-color .3s,transform .2s}.filter-toggle-btn:hover{background-color:#888;transform:scale(1.05)}.filter-toggle-btn.active{background-color:#4caf50;color:#fff;font-weight:700;box-shadow:0 0 6px #0000004d}.pokemon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;margin-bottom:1rem;background-color:#333;border-radius:25px;padding:1rem;min-height:50vh}.pokemon-card{padding:1rem;border-radius:1rem;height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1rem;cursor:pointer}.pokemon-card:hover{box-shadow:0 0 8px 2px #fffc,0 0 15px 4px #0096ffb3,0 0 20px 6px #0096ff80}.pokemon-card img{width:50%;max-width:80px}.pokemon-card h3{font-size:1rem;margin-top:.5rem;text-align:center}.card-types{display:flex;justify-content:center;gap:.3rem;margin-top:.5rem;margin-bottom:.3rem}.card-type{display:flex;align-items:center;padding:.2rem .5rem;border-radius:1rem;font-size:.75rem;text-wrap:nowrap;color:#fff;font-weight:500;text-transform:capitalize}.card-type img{width:16px;height:16px;margin-right:.25rem}.pagination{display:flex;flex-direction:row;justify-content:center;align-items:center;font-size:20px;gap:10px}.pagination button{padding:.5rem 1rem}.modal{display:flex;flex-direction:column;align-items:center;background-color:#333;border-radius:25px;padding:1.5rem}.modal-header{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}.modal-content{width:90%;max-width:480px;padding:1.5rem;display:flex;flex-direction:column;align-items:center;background-color:#fff;border-radius:25px}.modal-content img{width:50%;max-width:200px;display:block;margin:0 auto}.types-detail{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;margin-top:.5rem;margin-bottom:.3rem}.types-detail span{display:flex;align-items:center;padding:.2rem .5rem;border-radius:1rem;font-size:.75rem;color:#fff;font-weight:500;text-transform:capitalize;border:black 1px solid}.types-detail span img{width:16px;height:16px;margin-right:.25rem}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;text-align:center}.stats strong{font-size:.9rem}.bar{height:10px;background-color:#333;border-radius:25px}.fill{height:10px;border-radius:25px;transition:width .3s ease-in-out,background-color .3s}.evolution-chain{display:flex;flex-direction:row;align-items:center;gap:1rem;margin-top:1rem;width:100%;overflow-x:auto;padding-bottom:1rem;justify-content:center}.evolution-chain.overflowing{justify-content:flex-start}.evo-step{display:flex;flex-direction:column;align-items:center;background-color:#fafafa;border:2px solid #ccc;border-radius:12px;padding:1rem;width:100px;text-align:center;transition:transform .2s ease;box-shadow:0 4px 8px #00000026;cursor:pointer;flex-shrink:0}.evo-step:hover{transform:scale(1.05);border-color:#888}.evo-step img{width:100%;object-fit:contain;margin-bottom:.5rem}.evo-arrow-wrapper{display:flex;flex-direction:column;align-items:center;gap:.3rem;flex-shrink:0}.evo-arrow{font-size:2rem;color:#fff}.evo-condition{font-size:.75rem;color:#fff;background-color:#555;padding:.2rem .5rem;border-radius:10px;white-space:nowrap;text-align:center}.modal-nav{display:flex;justify-content:space-between;width:100%;margin-bottom:1rem}.modal-nav button{background-color:#1a1a1a;color:#fff;border:none;border-radius:12px;padding:.5rem 1.2rem;font-size:1rem;cursor:pointer;transition:background-color .3s}.modal-nav button:hover{background-color:#555}.loading-spinner{width:100%;height:300px;display:flex;align-items:center;justify-content:center}.loading-spinner img{width:80px;height:80px;animation:spin 1s linear infinite;filter:drop-shadow(0 0 8px rgba(0,0,0,.3))}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.intro-screen{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#666;display:flex;align-items:center;justify-content:center;z-index:9999}.intro-pokeball{width:200px;height:200px;animation:spinOnce 1.5s ease-out forwards}@keyframes spinOnce{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app.hidden{opacity:0;transform:scale(.8);transition:opacity 1s ease,transform 1s ease}.app.visible{opacity:1;transform:scale(1);transition:opacity 1s ease,transform 1s ease}.app-header{display:flex;justify-content:center;background-color:#1a1a1a;padding:1rem 0;margin-bottom:1rem;border-bottom:2px solid gold}.nav-tabs{display:flex;gap:1rem}.nav-tabs button{background-color:transparent;border:none;color:#fff;font-size:1.1rem;padding:.5rem 1rem;cursor:pointer;border-bottom:3px solid transparent;transition:all .3s ease}.nav-tabs button:hover{color:gold}.nav-tabs button.active{font-weight:700;color:gold;border-bottom:3px solid gold}.github-btn{position:fixed;bottom:20px;right:20px;background-color:#24292f;padding:12px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .2s ease,background-color .2s ease;z-index:1000}.github-btn:hover{transform:scale(1.1);background-color:#444c56}@media screen and (max-width: 768px){input{margin-bottom:5px}.pokemon-grid{grid-template-columns:repeat(3,1fr)}.pokemon-card{height:200px}.pokemon-card h3{font-size:16px;margin:0}.card-types{display:flex}.evolution-chain{overflow-x:auto}.evo-step img{width:80px}}@media screen and (max-width: 426px){.pokemon-grid{grid-template-columns:repeat(2,1fr)}.pokemon-card{height:200px;padding:5px}.modal-nav button{padding:.5rem}}@media screen and (max-width: 321px){.pokemon-grid{grid-template-columns:repeat(1,1fr)}}