.chars-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;align-items:start;margin-top:1rem;width:auto;margin-left:3rem}.char-card{width:300px;height:500px;margin-top:20px;display:flex;flex-direction:column;align-items:center;text-align:center;background:#ffffff05;padding:.6rem;border-radius:10px;text-decoration:none;color:inherit;transition:transform .14s ease,box-shadow .14s ease}.img-wrap{position:relative;max-width:100%;max-height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:8px;background:linear-gradient(180deg,#ffffff05,#0000000a)}.img-wrap.star5{background:linear-gradient(0deg,#ffa600,#ffda05a2)}.img-wrap.star4{background:linear-gradient(0deg,#ea06ff,#8c00ff99)}.char-img{max-width:150%;max-height:150%;align-items:center;aspect-ratio:3 / 4;height:auto;object-fit:cover;border-radius:8px;display:block;transition:opacity .5s ease,transform .8s ease}.char-img.halfbody{opacity:1;transform:scale(1.5) translate(145px) translateY(130px)}.char-img.splashart{opacity:0;transform:scale(1.5) translateY(10px)}.char-card:hover .char-img.halfbody{opacity:0;transform:scale(1.5) translate(130px) translateY(30px)}.char-card:hover .char-img.splashart{opacity:1;transform:scale(1.5) translateY(10px) translate(-170px)}.char-icons{position:absolute;bottom:8px;left:8px;display:flex;gap:6px;z-index:10}.char-icon{width:32px;height:32px;object-fit:contain;background:#0009;border-radius:6px;padding:4px;backdrop-filter:blur(4px)}.cn-icon{position:absolute;top:10px;right:10px;width:40px;height:40px;display:flex;object-fit:contain}.char-name{margin-top:.6rem;font-weight:600;font-size:1rem}@media (min-width: 900px){.chars-grid{grid-template-columns:repeat(auto-fill,320px)}.char-card{padding:.8rem}}.filter-controls{display:flex;gap:1rem;margin-left:50px;margin-bottom:2rem;flex-wrap:wrap;align-items:center}.search-input{flex:1;min-width:200px;max-width:400px;padding:.75rem 1rem;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#ffffff0d;color:#fff;font-size:1rem;outline:none;transition:border-color .2s ease}.search-input:focus{border-color:#4a9eff}.rarity-filters{display:flex;gap:.5rem}.rarity-btn{padding:.75rem 1.25rem;border-radius:8px;border:2px solid rgba(255,255,255,.2);background:#ffffff0d;color:#999;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease;opacity:.5;white-space:nowrap}.rarity-btn.active.star5-btn{border-color:#ffa600;background:#ffa60033;color:#ffc800;opacity:1}.rarity-btn.active.star4-btn{border-color:#ea06ff;background:#ea06ff33;color:#ea64ff;opacity:1}.rarity-btn.active.all-btn{border-color:#4a9eff;background:#4a9eff33;color:#4a9eff;opacity:1}.rarity-btn.active.cn-btn{border-color:#ff3030;background:#ff3e3e;color:#fff;opacity:1}.rarity-btn.active.burn-btn{border-color:#f13a1e;background:#8a020233;color:#bb3329;opacity:1}.rarity-btn.active.freeze-btn{border-color:#50b4ff;background:#285aa040;color:#a0d2ff;opacity:1}.rarity-btn.active.elec-btn{border-color:#ffe650;background:#b4a01440;color:#fff096;opacity:1}.rarity-btn.active.corro-btn{border-color:#b050c8;background:#78287140;color:#cd96e6;opacity:1}.rarity-btn.active.hydro-btn{border-color:#468cff;background:#1e46a040;color:#a0c8ff;opacity:1}.rarity-btn.active.phys-btn{border-color:#b4b4b4;background:#5a5a5a4d;color:#dcdcdc;opacity:1}.rarity-btn.active.bulwark-btn{border-color:#3c59aa;background:#1427644d;color:#787fdc;opacity:1}.rarity-btn.active.sentinel-btn{border-color:#ff6464;background:#a03a284d;color:#ffb0aa;opacity:1}.rarity-btn.active.support-btn{border-color:#50dc73;background:#2b822840;color:#b7f0a0;opacity:1}.rarity-btn.active.vanguard-btn{border-color:#de3cff;background:#9414a04d;color:#e48cff;opacity:1}.result-count{margin-left:70px;margin-bottom:1rem;color:#999;font-size:.9rem}.tile{outline:1px solid rgba(255,255,255,.1)}.tile:hover{outline:1px solid orange}.selected{outline:1px solid red}.tile:active{transform:scale(1.1)}.aoe-tile{background-color:#0000ff0d}.aoe-edge-top{border-top:1px solid blue!important}.aoe-edge-bottom{border-bottom:1px solid blue!important}.aoe-edge-left{border-left:1px solid blue!important}.aoe-edge-right{border-right:1px solid blue!important}