@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap";:root{--gold: #C8AA6E;--gold-light: #F0E6D2;--gold-dark: #785A28;--blue: #0AC8B9;--blue-dark: #0A1428;--blue-grey: #1E2328;--grey-dark: #3C3C41;--grey: #5B5A56;--white: #F0E6D2;--red: #C8124E}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background-color:var(--blue-dark);color:var(--white);min-height:100vh;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:Cinzel,serif;color:var(--gold);font-weight:600}a{text-decoration:none;color:inherit}button{cursor:pointer;font-family:inherit}img{max-width:100%;display:block}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--blue-grey)}::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--gold)}.navbar{background:linear-gradient(to right,var(--blue-dark),var(--blue-grey),var(--blue-dark));border-bottom:1px solid var(--gold-dark);position:sticky;top:0;z-index:100}.navbar-top-border{height:2px;background:linear-gradient(to right,transparent,var(--gold),transparent)}.navbar-container{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:64px}.navbar-logo{display:flex;align-items:center;gap:12px}.navbar-logo img{width:40px;height:40px;border:1px solid var(--gold-dark);border-radius:4px}.navbar-logo span{font-family:Cinzel,serif;font-size:1.25rem;color:var(--gold);letter-spacing:2px}.navbar-links{display:flex;align-items:center;gap:32px;list-style:none}.navbar-links a{font-family:Cinzel,serif;font-size:.875rem;text-transform:uppercase;letter-spacing:2px;color:var(--white);opacity:.7;transition:all .3s;padding:8px 0;border-bottom:2px solid transparent}.navbar-links a:hover,.navbar-links a.active{opacity:1;color:var(--gold);border-bottom-color:var(--gold)}.navbar-search{position:relative}.navbar-search input{width:200px;padding:8px 12px 8px 36px;background:#0a1428cc;border:1px solid var(--gold-dark);border-radius:4px;color:var(--white);font-size:.875rem}.navbar-search input::-moz-placeholder{color:var(--grey)}.navbar-search input::placeholder{color:var(--grey)}.navbar-search input:focus{outline:none;border-color:var(--gold)}.navbar-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--gold)}.navbar-search-results{position:absolute;top:100%;left:0;right:0;margin-top:8px;background:var(--blue-grey);border:1px solid var(--gold-dark);border-radius:4px;max-height:300px;overflow-y:auto}.navbar-search-item{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer;transition:background .2s}.navbar-search-item:hover{background:#c8aa6e1a}.navbar-search-item img{width:32px;height:32px;border-radius:4px}.navbar-mobile-btn{display:none;background:none;border:none;color:var(--gold);padding:8px}@media(max-width:768px){.navbar-links,.navbar-search{display:none}.navbar-mobile-btn{display:block}.navbar-logo span{display:none}}.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;font-family:Cinzel,serif;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;border-radius:4px;transition:all .3s}.btn-primary{background:linear-gradient(to bottom,var(--gold-dark),#5a4320);border:1px solid var(--gold);color:var(--gold-light)}.btn-primary:hover{background:linear-gradient(to bottom,var(--gold),var(--gold-dark));box-shadow:0 0 20px #c8aa6e66}.btn-outline{background:transparent;border:1px solid var(--gold-dark);color:var(--gold)}.btn-outline:hover{border-color:var(--gold);background:#c8aa6e1a}.filter-btn{padding:8px 16px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;background:transparent;border:1px solid var(--gold-dark);color:var(--gold);border-radius:4px;transition:all .3s}.filter-btn:hover{border-color:var(--gold);background:#c8aa6e1a}.filter-btn.active{background:linear-gradient(to bottom,var(--gold),var(--gold-dark));border-color:var(--gold-light);color:var(--blue-dark)}.input{width:100%;padding:12px 16px;background:var(--blue-dark);border:1px solid var(--gold-dark);border-radius:4px;color:var(--white);font-size:1rem;transition:all .3s}.input::-moz-placeholder{color:var(--grey)}.input::placeholder{color:var(--grey)}.input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 10px #c8aa6e33}.page-header{background:linear-gradient(to bottom,rgba(30,35,40,.5),transparent);padding:48px 20px;text-align:center}.page-header h1{font-size:2.5rem;margin-bottom:8px}.page-header p{color:var(--grey);font-size:1rem}.hero{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,20,40,.6),rgba(10,20,40,.4),var(--blue-dark))}.hero-content{position:relative;z-index:1;text-align:center;padding:20px;max-width:800px}.hero-content h1{font-size:clamp(2rem,6vw,4rem);margin-bottom:24px;text-shadow:0 0 30px rgba(200,170,110,.5)}.hero-content p{font-size:1.125rem;color:#f0e6d2e6;max-width:600px;margin:0 auto 32px}.hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.game-modes{padding:64px 20px;max-width:1200px;margin:0 auto}.section-title{text-align:center;margin-bottom:48px}.section-title h2{font-size:2rem;margin-bottom:12px}.section-title-line{width:80px;height:2px;background:linear-gradient(to right,transparent,var(--gold),transparent);margin:0 auto}.modes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}.mode-card{background:#1e232880;border:1px solid rgba(120,90,40,.3);border-radius:8px;padding:24px;transition:all .3s}.mode-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 10px 30px #0000004d}.mode-card svg{width:48px;height:48px;color:var(--gold);margin-bottom:16px}.mode-card h3{font-size:1.25rem;margin-bottom:8px;color:var(--gold-light)}.mode-card p{font-size:.875rem;color:var(--grey);line-height:1.6}.features{padding:64px 20px;background:linear-gradient(to bottom,var(--blue-dark),rgba(30,35,40,.3))}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;max-width:1000px;margin:0 auto}.feature-card{text-align:center;padding:32px;border:1px solid rgba(120,90,40,.3);border-radius:8px;transition:all .3s}.feature-card:hover{border-color:var(--gold)}.feature-icon{width:64px;height:64px;margin:0 auto 16px;background:#c8aa6e1a;border-radius:50%;display:flex;align-items:center;justify-content:center}.feature-icon svg{width:32px;height:32px;color:var(--gold)}.feature-card h3{font-size:1.25rem;margin-bottom:8px}.feature-card p{font-size:.875rem;color:var(--grey)}.filters{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}.champions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;padding:32px 20px;max-width:1400px;margin:0 auto}.champion-card{position:relative;aspect-ratio:3/4;border-radius:8px;overflow:hidden;border:2px solid rgba(120,90,40,.3);cursor:pointer;transition:all .3s}.champion-card:hover{border-color:var(--gold);transform:scale(1.02);box-shadow:0 0 20px #c8aa6e4d}.champion-card img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top;transition:transform .5s}.champion-card:hover img{transform:scale(1.1)}.champion-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,20,40,.9) 0%,transparent 50%)}.champion-card-name{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:Cinzel,serif;font-size:1rem;color:var(--gold-light);text-shadow:0 2px 4px rgba(0,0,0,.5)}.champion-card-tags{position:absolute;bottom:36px;left:0;right:0;display:flex;justify-content:center;gap:4px;opacity:0;transition:opacity .3s}.champion-card:hover .champion-card-tags{opacity:1}.champion-tag{font-size:.625rem;padding:2px 6px;background:#0a1428cc;border:1px solid var(--gold-dark);color:var(--gold);border-radius:2px}.skeleton{background:linear-gradient(90deg,var(--blue-grey) 25%,var(--grey-dark) 50%,var(--blue-grey) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.items-filters{max-width:800px;margin:0 auto 24px}.search-wrapper{position:relative;max-width:400px;margin:0 auto 24px}.search-wrapper svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--gold)}.search-wrapper input{padding-left:44px}.filter-category{border:1px solid rgba(120,90,40,.3);border-radius:4px;margin-bottom:8px;overflow:hidden}.filter-category-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1e232880;border:none;width:100%;color:var(--gold-light);font-family:Cinzel,serif;font-size:.875rem;cursor:pointer;transition:background .2s}.filter-category-header:hover{background:#1e2328cc}.filter-category-header svg{width:16px;height:16px;color:var(--gold);transition:transform .3s}.filter-category-header.open svg{transform:rotate(180deg)}.filter-category-content{padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px;background:#0a142880}.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;padding:32px 20px;max-width:1200px;margin:0 auto}.item-card{position:relative;aspect-ratio:1;border:2px solid rgba(120,90,40,.3);border-radius:4px;overflow:hidden;cursor:pointer;transition:all .3s}.item-card:hover{border-color:var(--gold);transform:scale(1.1);z-index:10;box-shadow:0 0 15px #c8aa6e66}.item-card img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.item-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--blue-dark);border:1px solid var(--gold);padding:8px 12px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;z-index:20}.item-card:hover .item-tooltip{opacity:1}.item-tooltip p{font-size:.875rem;color:var(--gold-light)}.runes-tabs{display:flex;justify-content:center;gap:4px;border-bottom:1px solid rgba(120,90,40,.3);padding-bottom:0;margin-bottom:32px;flex-wrap:wrap}.rune-tab{display:flex;align-items:center;gap:8px;padding:12px 20px;background:transparent;border:none;border-bottom:3px solid transparent;color:var(--grey);font-family:Cinzel,serif;font-size:.875rem;text-transform:uppercase;letter-spacing:1px;transition:all .3s;margin-bottom:-1px}.rune-tab img{width:24px;height:24px}.rune-tab:hover{color:var(--gold-light)}.rune-tab.active{border-bottom-color:var(--gold);color:var(--gold)}.rune-tab.precision.active{border-bottom-color:#c89b3c;color:#c89b3c}.rune-tab.domination.active{border-bottom-color:#d44242;color:#d44242}.rune-tab.sorcery.active{border-bottom-color:#6b8cff;color:#6b8cff}.rune-tab.resolve.active{border-bottom-color:#49aa19;color:#49aa19}.rune-tab.inspiration.active{border-bottom-color:#49c4b7;color:#49c4b7}.rune-tree{max-width:800px;margin:0 auto;padding:0 20px}.rune-tree-header{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:40px}.rune-tree-header img{width:64px;height:64px}.rune-tree-header h2{font-size:2rem}.rune-tree.precision .rune-tree-header h2{color:#c89b3c}.rune-tree.domination .rune-tree-header h2{color:#d44242}.rune-tree.sorcery .rune-tree-header h2{color:#6b8cff}.rune-tree.resolve .rune-tree-header h2{color:#49aa19}.rune-tree.inspiration .rune-tree-header h2{color:#49c4b7}.rune-slot{margin-bottom:40px}.rune-slot-label{text-align:center;margin-bottom:16px}.rune-slot-label span{font-size:.75rem;text-transform:uppercase;letter-spacing:2px;color:var(--grey)}.rune-slot-runes{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}.rune-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .3s}.rune-item:hover{transform:scale(1.05)}.rune-icon{width:64px;height:64px;border-radius:50%;border:2px solid rgba(120,90,40,.3);padding:4px;background:#1e232880;transition:all .3s;display:flex;align-items:center;justify-content:center}.rune-item:hover .rune-icon{border-color:var(--gold);box-shadow:0 0 15px #c8aa6e4d}.rune-icon img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.rune-item.keystone .rune-icon{width:80px;height:80px}.rune-name{margin-top:8px;font-size:.75rem;color:var(--grey);text-align:center;max-width:80px;transition:color .3s}.rune-item:hover .rune-name{color:var(--gold-light)}.rune-item.keystone .rune-name{color:var(--gold);font-weight:600}.rune-connector{display:flex;justify-content:center;margin:16px 0}.rune-connector-line{width:2px;height:24px;background:#785a284d}.empty-state{text-align:center;padding:64px 20px}.empty-state p{color:var(--grey);font-size:1.125rem;margin-bottom:16px}.container{max-width:1200px;margin:0 auto;padding:0 20px}.text-center{text-align:center}.mt-4{margin-top:16px}.mb-4{margin-bottom:16px}