:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--background-color: #121212;--card-background: #1e1e1e;--text-color: #e0e0e0;--text-muted: #a0a0a0;--border-color: #333333;--primary-blue: #2a7fff;--hover-blue: #539bff;--lol-gold: #c8aa6e;--link-color: var(--primary-blue);--shadow-color: rgba(255, 255, 255, .05);font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:var(--text-color);background-color:var(--background-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo,.logo:hover,.logo.react:hover{display:none}a:nth-of-type(2) .logo{animation:none}h1{color:var(--lol-gold);margin-bottom:2rem}p{color:var(--text-muted)}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--primary-blue);color:#fff;cursor:pointer;transition:border-color .25s,background-color .25s}button:hover{background-color:var(--hover-blue);border-color:var(--hover-blue)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.card{padding:0}.read-the-docs{color:var(--text-muted)}.champion-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:1.2rem;padding:1rem 0}.champion-card{background-color:var(--card-background);border:1px solid var(--border-color);border-radius:8px;padding:.8rem .5rem;text-align:center;cursor:pointer;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out,border-color .2s ease-in-out;box-shadow:0 2px 4px var(--shadow-color)}.champion-card:hover{transform:translateY(-3px);box-shadow:0 6px 12px var(--shadow-color);border-color:var(--lol-gold)}.champion-icon{width:70px;height:70px;display:block;margin:0 auto .7rem;border-radius:50%;border:2px solid var(--border-color)}.champion-card:hover .champion-icon{border-color:var(--lol-gold)}.champion-card p{margin:0;font-size:.9rem;font-weight:600;color:var(--text-color)}.controls-container{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:2rem;align-items:center}.filters{flex-grow:1;margin-bottom:0;padding:0;background:none;border:none;display:flex;flex-wrap:wrap;gap:1rem;min-width:200px}.language-selector{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}.language-selector label{color:var(--text-muted);font-size:.9rem}#language-select{padding:.5rem .8rem;font-size:.9rem;border-radius:6px;border:1px solid var(--border-color);background-color:var(--card-background);color:var(--text-color);cursor:pointer}#language-select:disabled{cursor:not-allowed;opacity:.7}.search-input{flex-grow:1;padding:.7rem 1rem;font-size:1rem;border-radius:6px;border:1px solid var(--border-color);background-color:var(--background-color);color:var(--text-color);min-width:200px}.search-input::placeholder{color:var(--text-muted)}.role-filters{display:flex;flex-wrap:wrap;gap:.5rem}.role-filters button{background-color:transparent;color:var(--text-muted);border:1px solid var(--border-color);padding:.5rem 1rem;font-size:.9rem;cursor:pointer;border-radius:6px;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.role-filters button:hover{background-color:var(--border-color);color:var(--text-color);border-color:var(--text-muted)}.role-filters button.active{background-color:var(--lol-gold);color:var(--background-color);border-color:var(--lol-gold);font-weight:600}.no-results{grid-column:1 / -1;text-align:center;color:var(--text-muted);margin-top:2rem;font-size:1.1rem}.champion-detail{padding:2rem;margin:1rem auto;max-width:950px;border:1px solid var(--border-color);border-radius:12px;background-color:var(--card-background);position:relative;box-shadow:0 4px 12px var(--shadow-color)}.champion-detail.loading,.champion-detail.error{text-align:center;padding:3rem;font-size:1.2rem;color:var(--text-muted);background-color:var(--background-color);border:none;box-shadow:none}.champion-detail.error button{margin-left:1rem;background-color:var(--text-muted);color:var(--background-color)}.champion-detail.error button:hover{background-color:var(--text-color)}.close-button{position:absolute;top:1.5rem;right:1.5rem;padding:.6em 1.2em;cursor:pointer;background-color:var(--background-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:8px;transition:background-color .2s ease,color .2s ease}.close-button:hover{background-color:var(--border-color);color:var(--text-color)}.champion-detail h2{margin-top:0;margin-bottom:2rem;padding-bottom:1rem;text-align:center;color:var(--text-color);border-bottom:1px solid var(--border-color);font-size:1.8rem}.champion-detail h3{margin-top:2.5rem;margin-bottom:1.2rem;border-bottom:1px solid var(--border-color);padding-bottom:.6rem;color:var(--lol-gold);font-size:1.4rem}.champion-header{display:flex;gap:2rem;margin-bottom:2.5rem;align-items:flex-start}.champion-splash{width:350px;height:auto;border-radius:8px;object-fit:cover;flex-shrink:0;border:1px solid var(--border-color)}.champion-lore{flex-grow:1}.champion-lore h3{margin-top:0;margin-bottom:.8rem;border-bottom:none;color:var(--text-color);font-size:1.2rem}.champion-lore p{line-height:1.7;color:var(--text-muted);font-size:1rem}.champion-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem 1.5rem;background-color:var(--background-color);padding:1.5rem;border-radius:8px;border:1px solid var(--border-color)}.champion-stats div{color:var(--text-color);font-size:.95rem}.champion-stats span{color:var(--text-muted);font-size:.85rem}.champion-abilities{display:flex;flex-direction:column;gap:1.8rem}.ability{display:flex;align-items:flex-start;gap:1.2rem;padding:1.2rem;border:1px solid var(--border-color);border-radius:8px;background-color:var(--card-background);box-shadow:0 2px 4px var(--shadow-color)}.ability.passive{background-color:#2c2a24;border-left:4px solid var(--lol-gold);padding-left:calc(1.2rem - 4px)}.ability img{width:60px;height:60px;border-radius:6px;flex-shrink:0;border:1px solid var(--border-color)}.ability div{flex-grow:1}.ability strong{display:block;margin-bottom:.4rem;font-size:1.15rem;color:var(--text-color)}.ability strong span{color:var(--text-muted);font-weight:400;font-size:.9em;margin-left:.5rem}.ability p{margin:0;line-height:1.6;color:var(--text-muted);font-size:.95rem}.gameplay-tips{margin-top:2.5rem;margin-bottom:2.5rem}.gameplay-tips h3{margin-top:0;margin-bottom:1.2rem;border-bottom:1px solid var(--border-color);padding-bottom:.6rem;color:var(--lol-gold);font-size:1.4rem}.tips-container{display:flex;gap:2rem;flex-wrap:wrap}.tips-column{flex:1;min-width:250px;background-color:var(--card-background);padding:1.5rem;border-radius:8px;border:1px solid var(--border-color)}.tips-column h4{margin-top:0;margin-bottom:1rem;color:var(--text-color);font-size:1.1rem;border-bottom:1px solid var(--border-color);padding-bottom:.5rem}.tips-column ul{list-style:disc;padding-left:1.5rem;margin:0;color:var(--text-muted)}.tips-column li{margin-bottom:.7rem;line-height:1.6}@media (max-width: 768px){.champion-detail{padding:1rem}.close-button{top:1rem;right:1rem}.champion-header{flex-direction:column;align-items:center;gap:1rem}.champion-splash{width:100%;max-width:400px}.champion-stats{grid-template-columns:1fr;padding:1rem}.ability{padding:1rem;gap:1rem}.ability img{width:50px;height:50px}.tips-container{flex-direction:column;gap:1.5rem}.tips-column{padding:1rem}}