@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Inter:wght@300;400;600&display=swap";:root{--bg-1: #0f1724;--bg-2: #0b1220;--accent: #ffcc33;--accent-2: #7cfbff;--muted: rgba(255,255,255,.08);--glass: rgba(255,255,255,.04);--glass-strong: rgba(255,255,255,.06);--card: rgba(255,255,255,.03);--radius: 14px;--glass-blur: 8px;--transition-fast: .18s;--transition-medium: .32s}.App{min-height:100vh;display:flex;flex-direction:column}:root{--bg-1: #0a0e1a;--bg-2: #151923;--bg-3: #1e2433;--accent: #ffcc33;--accent-2: #7cfbff;--accent-3: #ff6b9d;--accent-4: #66d9ef;--muted: rgba(255, 255, 255, .08);--glass: rgba(255, 255, 255, .04);--glass-strong: rgba(255, 255, 255, .06);--card: rgba(255, 255, 255, .03);--radius: 14px;--glass-blur: 8px;--transition-fast: .18s;--transition-medium: .32s;--transition-slow: .6s}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Inter,Segoe UI,Roboto,system-ui,-apple-system,Helvetica Neue,Arial;background:radial-gradient(ellipse at top left,rgba(124,251,255,.15) 0%,transparent 50%),radial-gradient(ellipse at bottom right,rgba(255,204,51,.1) 0%,transparent 50%),radial-gradient(circle at 20% 80%,rgba(255,107,157,.08) 0%,transparent 50%),linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 50%,var(--bg-3) 100%);color:#e6eef8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.4;min-height:100vh;position:relative;overflow-x:hidden}.App{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:2}.StartPage{max-width:720px;margin:48px auto;padding:40px 32px;border-radius:20px;background:linear-gradient(135deg,#ffffff14,#ffffff05),linear-gradient(180deg,var(--glass),var(--glass-strong));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 60px #0000004d,0 0 120px #7cfbff1a,inset 0 1px #ffffff1a;border:1px solid rgba(255,255,255,.1);text-align:center;position:relative;animation:slideUp .8s ease-out;z-index:2}.StartPage:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,var(--accent-2),var(--accent),var(--accent-3),var(--accent-4));border-radius:20px;z-index:-1;opacity:.5;animation:borderGlow 3s linear infinite}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes borderGlow{0%,to{opacity:.3}50%{opacity:.6}}.StartPage h1{font-family:Orbitron,monospace;font-size:3.5rem;font-weight:700;background:linear-gradient(135deg,var(--accent-2),var(--accent),var(--accent-3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px;margin-bottom:16px;text-shadow:0 0 40px rgba(124,251,255,.5);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.StartPage p{color:#e6eef8d9;margin:16px 0 32px;font-size:1.1rem;line-height:1.6}.StartPage button{font-family:Orbitron,monospace;font-weight:600;font-size:1.1rem;padding:16px 40px;border-radius:50px;border:none;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent-3));color:var(--bg-1);box-shadow:0 8px 32px #ffcc334d,0 0 60px #fc33;transition:all var(--transition-medium) ease;text-transform:uppercase;letter-spacing:1px;position:relative;overflow:hidden}.StartPage button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.StartPage button:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 40px #fc36,0 0 80px #ffcc334d}.StartPage button:hover:before{left:100%}.bg{position:absolute;bottom:0;left:0;max-width:25%;max-height:25%;object-fit:cover}.Pokemons{padding:28px 20px;width:100%;max-width:1200px;margin:75px auto}.Pokemons h2{text-align:center;margin-bottom:22px;color:var(--accent-2);font-family:Orbitron,monospace;font-size:2rem;text-transform:uppercase;letter-spacing:1px}.PokemonList{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}.PokemonCard{background:linear-gradient(135deg,#ffffff14,#ffffff05),linear-gradient(180deg,var(--glass),var(--glass-strong));border-radius:16px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;border:1px solid rgba(255,255,255,.1);transition:all var(--transition-medium) ease;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadeInUp .6s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.PokemonCard:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,rgba(124,251,255,.1),transparent);opacity:0;transition:opacity var(--transition-medium) ease}.PokemonCard:hover:before{opacity:1}.PokemonCard:hover{transform:translateY(-12px) scale(1.03);box-shadow:0 25px 50px #0000004d,0 0 40px #7cfbff33,0 0 60px #ffcc331a;border-color:#7cfbff4d}.PokemonCard img{width:160px;height:160px;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.4));transition:all var(--transition-medium) ease;position:relative;z-index:2}.PokemonCard:hover img{transform:scale(1.1) rotate(5deg);filter:drop-shadow(0 16px 32px rgba(0,0,0,.5)) brightness(1.1)}.PokemonCard h2{color:#eaf6ff;margin-top:8px;text-transform:capitalize;font-size:1.3rem;font-weight:600;position:relative;z-index:2}.type{padding:8px 16px;border-radius:20px;font-weight:600;font-size:.85rem;margin:2px;display:inline-block;background:linear-gradient(135deg,var(--accent-2),var(--accent-4));color:var(--bg-1);box-shadow:0 4px 12px #7cfbff4d;transition:all var(--transition-fast) ease}.type:hover{transform:scale(1.05);box-shadow:0 6px 16px #7cfbff66}.Load-more{display:block;margin:32px auto;padding:16px 32px;border-radius:50px;background:linear-gradient(135deg,var(--accent),var(--accent-3));color:var(--bg-1);border:none;cursor:pointer;font-family:Orbitron,monospace;font-weight:600;font-size:1rem;text-transform:uppercase;letter-spacing:1px;box-shadow:0 10px 30px #ffcc334d,0 0 40px #fc33;transition:all var(--transition-medium) ease;position:relative;overflow:hidden}.Load-more:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff4d;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease}.Load-more:hover{transform:translateY(-6px) scale(1.05);box-shadow:0 15px 40px #fc36,0 0 60px #ffcc334d}.Load-more:hover:before{width:300px;height:300px}.PokemonDetailsPage{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 18px;background-size:cover;background-position:center;transition:background-image .48s ease-in-out}.bg-layer{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(10px) saturate(1.05);transition:opacity .52s ease,transform .52s ease;opacity:0;z-index:0}.bg-layer.prev{z-index:0}.bg-layer.current{z-index:1}.PokemonDetailsPage>*{position:relative;z-index:2}.bg-layer{position:absolute}.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);background:linear-gradient(135deg,#ffffff1a,#ffffff0d);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-medium) ease;z-index:10;font-size:1.5rem;color:var(--accent-2)}.nav-arrow:hover{background:linear-gradient(135deg,#7cfbff33,#7cfbff1a);transform:translateY(-50%) scale(1.1);box-shadow:0 8px 25px #7cfbff4d}.nav-arrow.prev{left:20px}.nav-arrow.next{right:20px}.nav-arrow.disabled{opacity:.3;cursor:not-allowed}.nav-arrow.disabled:hover{transform:translateY(-50%);background:linear-gradient(135deg,#ffffff1a,#ffffff0d);box-shadow:none}.Back-link{position:absolute;top:22px;left:22px;z-index:10;display:flex;align-items:center;justify-content:center}.Back-link img{height:24px}.Back-link a{color:var(--accent);text-decoration:none;padding:8px 16px;border-radius:10px;background:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);transition:all var(--transition-fast) ease;font-weight:500}.Back-link a:hover{background:#fc33;transform:translateY(-2px)}.PokemonDetails{width:90%;margin-top:75px;max-width:1200px;display:flex;gap:28px;align-items:flex-start;animation:slideIn .8s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.PokemonDetails .left-section,.PokemonDetails .right-section{flex:1}.left-section{display:flex;flex-direction:column;align-items:center;gap:12px}.left-section h2{font-size:2.5rem;color:var(--accent);text-transform:capitalize;font-family:Orbitron,monospace;letter-spacing:1px;text-shadow:0 0 20px rgba(255,204,51,.5)}.main-image-wrapper{background:linear-gradient(180deg,#ffffff08,#ffffff05);border-radius:18px;padding:18px;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid rgba(255,255,255,.04);display:flex;justify-content:center;align-items:center;transition:transform 1s cubic-bezier(.2,.9,.2,1),box-shadow 1s ease}.main-image-wrapper:hover{transform:scale(.95) rotateX(20deg) rotateY(5deg);box-shadow:0 8px 25px #7cfbff4d}.main-image{width:320px;height:320px;object-fit:contain;border-radius:12px;transition:transform 1s cubic-bezier(.2,.9,.2,1),filter 1s ease}.main-image:hover{transform:scale(1.24);filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}.thumbnails{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;justify-content:center}.thumbnail{width:64px;height:64px;padding:6px;border-radius:10px;background:var(--glass);border:1px solid rgba(255,255,255,.03);cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,opacity .22s ease;opacity:.9}.thumbnail:hover{transform:translateY(-6px) scale(1.06);box-shadow:0 10px 26px #02061799}.thumbnail.active{box-shadow:0 18px 40px #7cfbff14;transform:translateY(-8px) scale(1.08);border:2px solid rgba(124,251,255,.28)}.right-section{padding:12px 18px;background:#ffffff1a;border-radius:12px;border:1px solid rgba(255,255,255,.03);transition:all .3s ease}.right-section:hover{background:#fff3;transform:scale(1.1)}.Basic-info{display:flex;gap:12px;justify-content:space-around;color:#e6eef8e6;margin-bottom:12px}.Basic-info .Height,.Basic-info .Weight{padding:8px 16px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#ffffff05;font-weight:500}.Stats{display:flex;flex-direction:column;gap:10px}.Stat-info{display:flex;justify-content:space-between;align-items:center;color:#dff8ff;font-weight:500;padding:4px}.Stat-value{font-size:1.2rem;font-weight:700}.Stat-value.max{color:red;box-shadow:inset 0 -3px 6px #00000040;background:linear-gradient(90deg,var(--accent-2),var(--accent));padding:4px;border-radius:50%;font-weight:700}.Stat-bar{height:14px;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent));box-shadow:inset 0 -3px 6px #00000040;transition:width 1s ease-out}.pokemon-suggestions{margin-top:40px;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);border-radius:16px;border:1px solid rgba(255,255,255,.05)}.suggestions-title{text-align:center;font-family:Orbitron,monospace;font-size:1.5rem;color:var(--accent-2);margin-bottom:20px;text-transform:uppercase;letter-spacing:1px}.suggestions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}.suggestion-card{background:linear-gradient(135deg,#ffffff0d,#ffffff05);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px;text-align:center;cursor:pointer;transition:all var(--transition-medium) ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.suggestion-card:hover{transform:translateY(-8px) scale(1.05);box-shadow:0 15px 35px #0003;border-color:#7cfbff4d}.suggestion-card img{width:80px;height:80px;object-fit:contain;margin-bottom:8px}.suggestion-card h3{color:#eaf6ff;font-size:1rem;text-transform:capitalize;margin-bottom:4px}.suggestion-types{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}.suggestion-type{padding:4px 8px;border-radius:12px;font-size:.7rem;font-weight:600;background:linear-gradient(135deg,var(--accent-2),var(--accent-4));color:var(--bg-1)}@media(max-width:900px){.PokemonDetails{flex-direction:column;align-items:center}.PokemonDetails .right-section{width:90%}.main-image{width:220px;height:220px}.nav-arrow{width:50px;height:50px;font-size:1.2rem}.nav-arrow.prev{left:10px}.nav-arrow.next{right:10px}}@media(max-width:768px){.StartPage{margin:20px auto;padding:24px 20px}.StartPage h1{font-size:2.5rem}.PokemonList{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.PokemonCard{padding:16px}.PokemonCard img{width:120px;height:120px}.suggestions-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}.fade-in{animation:fadeIn .42s ease both}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.pokemon-container-full{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}.floating-pokemon-bg{position:absolute;opacity:.15;filter:brightness(.7) drop-shadow(0 0 8px rgba(124,251,255,.2));transition:all .4s ease;pointer-events:auto;cursor:pointer;animation:floatAround linear infinite}.floating-pokemon-bg:hover{opacity:.6;filter:brightness(1.1) drop-shadow(0 0 15px rgba(124,251,255,.5));transform:scale(2);z-index:10}@keyframes floatAround{0%{transform:translateY(0) translate(0) rotate(0)}25%{transform:translateY(var(--my1)) translate(var(--mx1)) rotate(var(--rot))}50%{transform:translateY(0) translate(0) rotate(0)}75%{transform:translateY(var(--my2)) translate(var(--mx2)) rotate(calc(var(--rot) * -1))}to{transform:translateY(0) translate(0) rotate(0)}}.pokemon-container{position:fixed;bottom:0;left:0;width:100%;height:40%;pointer-events:none;z-index:5;overflow:hidden}.floating-pokemon{position:absolute;opacity:.3;filter:brightness(.8) drop-shadow(0 0 10px rgba(124,251,255,.3));transition:all .3s ease;pointer-events:auto;cursor:pointer;animation:floatUpDown linear infinite;width:125%;height:125%}.floating-pokemon:hover{opacity:.8;filter:brightness(1.2) drop-shadow(0 0 20px rgba(124,251,255,.6));transform:scale(3.5);z-index:10}@keyframes floatUpDown{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(-20px) rotate(5deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-15px) rotate(-5deg)}to{transform:translateY(0) rotate(0)}}:focus{outline:2px solid rgba(124,251,255,.12);outline-offset:3px}
