.characters-page{padding-bottom:4rem}.characters-page .page-title{text-align:center;margin-bottom:1rem}.page-intro{text-align:center;font-size:1.05rem;color:var(--text-secondary);max-width:650px;margin:0 auto 2.5rem;line-height:1.6}.character-list-controls{margin-bottom:2.5rem;padding:1rem 1.5rem;background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color);display:flex;flex-direction:column;gap:1.5rem}.controls-row.top-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem}.search-sort-group{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;flex-grow:1}.controls-actions{display:flex;gap:1rem;align-items:center;flex-shrink:0}.controls-row.bottom-row{padding-top:1rem;border-top:1px solid var(--border-color);display:flex;flex-direction:column;align-items:flex-start;gap:1rem}.control-group{display:flex;align-items:center;gap:.8rem}.control-group .filter-label{font-weight:600;color:var(--text-secondary);font-size:.9rem;white-space:nowrap}.control-group .control-search-input{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:20px;padding:.5rem 1rem;color:var(--text-primary);width:220px;transition:all .2s ease}.control-group .control-search-input:focus{width:260px;border-color:var(--accent-secondary);box-shadow:0 0 8px 0 color-mix(in srgb,var(--accent-secondary) 40%,transparent);outline:none}.filter-buttons-container{display:flex;flex-wrap:wrap;gap:.5rem}.view-toggle-group{display:flex;background-color:var(--bg-primary);border-radius:var(--border-radius-small);border:1px solid var(--border-color);padding:2px}.view-toggle-btn{padding:.4rem .8rem;font-size:1rem;border:none;background-color:transparent;color:var(--text-secondary);cursor:pointer;border-radius:var(--border-radius-small);transition:background-color .2s ease,color .2s ease;display:flex;align-items:center;gap:.4em}.view-toggle-btn:hover:not(.active){background-color:var(--bg-tertiary)}.view-toggle-btn.active{background-color:var(--accent-secondary);color:var(--bg-primary);font-weight:600}.sort-select-wrapper{position:relative;display:flex;align-items:center}.control-sort-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:20px;padding:.5rem 2.5rem .5rem 1rem;color:var(--text-secondary);font-weight:600;cursor:pointer;transition:all .2s ease;font-size:.9rem}.control-sort-select:hover{border-color:var(--accent-secondary);color:var(--text-primary)}.sort-select-icon{position:absolute;right:1rem;pointer-events:none;color:var(--text-secondary);font-size:.8rem}@media (max-width:768px){.controls-row.top-row,.search-sort-group{flex-direction:column;align-items:stretch;gap:1rem}.controls-actions{justify-content:flex-end}.control-group{flex-direction:column;align-items:flex-start;gap:.5rem}.control-group .control-search-input,.control-group .control-sort-select,.control-group .sort-select-wrapper{width:100%}.controls-row.bottom-row{align-items:stretch}}.character-grid{display:grid;padding-bottom:2rem}.character-grid.view-compact{grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1rem}.character-grid.view-full{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem;align-items:start}.compact-character-card{--element-color:var(--clr-unknown);display:flex;align-items:center;gap:1rem;background-color:var(--bg-secondary);border-radius:var(--border-radius-small);border:1px solid var(--border-color);padding:.75rem;text-decoration:none;color:var(--text-primary);transition:background-color .2s ease,border-color .2s ease,transform .2s ease}.compact-character-card:focus-within,.compact-character-card:hover{background-color:var(--bg-tertiary);border-color:var(--element-color);transform:translateY(-3px);outline:none}.compact-character-card[data-element=Anima]{--element-color:var(--clr-wind)}.compact-character-card[data-element=Psyche]{--element-color:var(--clr-water)}.compact-character-card[data-element=Lakshana]{--element-color:var(--clr-fire)}.compact-character-card[data-element=Chaos]{--element-color:var(--clr-soul)}.compact-character-card[data-element=Cosmos]{--element-color:var(--clr-light)}.compact-character-card[data-element=Incantation]{--element-color:var(--clr-curse)}.compact-character-card[data-element=Unknown]{--element-color:var(--clr-unknown)}.compact-card-portrait{width:64px;height:64px;flex-shrink:0;border-radius:var(--border-radius-small);overflow:hidden;background-color:var(--bg-primary);border:1px solid var(--border-color);position:relative}.compact-card-portrait img{width:100%;height:100%;object-fit:cover;object-position:center top}.compact-card-info{flex-grow:1;min-width:0}.compact-card-name{font-family:var(--font-heading);font-size:1.1rem;font-weight:600;margin:0 0 .4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compact-card-tags{display:flex;flex-wrap:wrap;gap:.5rem}.compact-card-tag{display:inline-flex;align-items:center;gap:.4em;font-size:.7rem;font-weight:600;padding:.2rem .5rem;border-radius:4px;background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-secondary);text-transform:capitalize}.compact-card-tag svg{font-size:.9em}.compact-card-tag.element-tag img{width:12px;height:12px}.compact-card-tag.rarity-a-rank,.compact-card-tag.rarity-s-rank{position:relative;padding-left:1.8em}.compact-card-tag.rarity-a-rank:before,.compact-card-tag.rarity-s-rank:before{content:"";position:absolute;left:.4em;top:50%;transform:translateY(-50%);width:1.1em;height:1.1em;background-size:contain;background-repeat:no-repeat;background-position:50%}.compact-card-tag.rarity-s-rank:before{background-image:url(/images/characters/rank-s.webp)}.compact-card-tag.rarity-a-rank:before{background-image:url(/images/characters/rank-a.webp)}.compact-card-tag.rarity-s-rank{color:var(--star-color);background-color:rgba(255,217,0,.1);border-color:rgba(255,217,0,.3)}.compact-card-tag.rarity-a-rank{color:var(--clr-soul);background-color:rgba(143,93,192,.1);border-color:rgba(143,93,192,.3)}.compact-card-tag.role-tag{color:var(--text-secondary)}.id-card-link-wrapper{display:block;text-decoration:none;color:inherit;transition:transform .3s ease;will-change:transform;position:relative;outline:none}.id-card-link-wrapper:focus-visible,.id-card-link-wrapper:hover{transform:translateY(-6px)}.character-id-card{position:relative;width:100%;aspect-ratio:280/400;overflow:hidden}.character-id-card:after{content:"";position:absolute;top:4%;left:.91%;width:99%;height:92%;border-radius:6px;border:2px solid transparent;box-shadow:0 0 15px 3px transparent;transition:border-color .3s ease,box-shadow .3s ease,opacity .3s ease;pointer-events:none;z-index:5;opacity:0}.id-card-link-wrapper:focus-visible .character-id-card:after,.id-card-link-wrapper:hover .character-id-card:after{opacity:1;border-color:var(--hover-glow-color);box-shadow:0 0 10px 3px color-mix(in srgb,var(--hover-glow-color) 100%,transparent)}.id-card-link-wrapper[data-element=Anima]{--hover-glow-color:var(--clr-wind)}.id-card-link-wrapper[data-element=Psyche]{--hover-glow-color:var(--clr-water)}.id-card-link-wrapper[data-element=Lakshana]{--hover-glow-color:var(--clr-fire)}.id-card-link-wrapper[data-element=Chaos]{--hover-glow-color:var(--clr-soul)}.id-card-link-wrapper[data-element=Cosmos]{--hover-glow-color:var(--clr-light)}.id-card-link-wrapper[data-element=Incantation]{--hover-glow-color:var(--clr-curse)}.id-card-link-wrapper[data-element=Unknown]{--hover-glow-color:var(--clr-unknown)}.character-id-card-background,.character-id-card-content{position:absolute;inset:0;width:100%;height:100%}.character-id-card-background{z-index:1}.character-id-card-content{z-index:2}.character-image-container{position:absolute;top:14.6%;left:7.5%;width:86%;height:62%;overflow:hidden;border-radius:2px}.character-image{width:100%;height:100%;object-fit:cover;object-position:center 10%}.character-name-container{position:absolute;bottom:10%;left:9.5%;width:81%;height:10%;display:flex;align-items:center;justify-content:center;padding:0 .5rem}.character-name{font-family:var(--font-heading);font-size:clamp(1rem,5vw,1.5rem);font-weight:700;color:#fff;text-shadow:1px 1px 4px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 .2em}.id-card-icons-container{position:absolute;z-index:4}.id-card-icons-container:before{content:"";position:absolute;inset:0;z-index:1;background-color:rgba(0,0,0,.6);border:1px solid hsla(0,0%,100%,.1);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.id-card-icons-container:after{content:"";position:absolute;z-index:2;background-size:contain;background-repeat:no-repeat;background-position:50%}.id-card-link-wrapper[data-rarity=S-Rank] .id-card-icons-container:after{background-image:url(/images/characters/rank-s.webp)}.id-card-link-wrapper[data-rarity=A-Rank] .id-card-icons-container:after{background-image:url(/images/characters/rank-a.webp)}.character-element-icon{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center}.character-element-icon img{object-fit:contain}.id-card-icons-container{top:8%;left:6%;width:82px;height:42px}.id-card-icons-container:before{border-radius:21px}.id-card-icons-container:after{top:3px;left:4px;width:35px;height:35px}.character-element-icon{top:3px;right:4px;width:35px;height:35px}.character-element-icon img{width:28px;height:28px}@media (max-width:480px){.id-card-icons-container{top:8%;left:6%;width:78px;height:38px}.id-card-icons-container:before{border-radius:19px}.id-card-icons-container:after{top:3px;left:3px;width:32px;height:32px}.character-element-icon{top:3px;right:3px;width:32px;height:32px}.character-element-icon img{width:24px;height:24px}}.filter-button[data-rarity=A-Rank],.filter-button[data-rarity=S-Rank]{position:relative;padding-left:2em}.filter-button[data-rarity=A-Rank]:before,.filter-button[data-rarity=S-Rank]:before{content:"";position:absolute;left:.5rem;top:50%;transform:translateY(-50%);width:2.2em;height:2.2em;background-size:contain;background-repeat:no-repeat;background-position:50%}.filter-button[data-rarity=S-Rank]:before{background-image:url(/images/characters/rank-s.webp)}.filter-button[data-rarity=A-Rank]:before{background-image:url(/images/characters/rank-a.webp)}.no-match-message-container{grid-column:1/-1;text-align:center;padding:3rem 1rem;background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px dashed var(--border-color)}.no-match-message-container .icon{font-size:2.5rem;margin-bottom:1rem;color:var(--accent-secondary)}.no-match-message-container .title{color:var(--text-primary);font-size:1.2rem;font-weight:600;margin:0 0 .5rem}.no-match-message-container .message{color:var(--text-secondary);margin:0}@media (max-width:768px){.character-grid.view-full{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.5rem}.character-grid.view-compact{grid-template-columns:1fr}}@media (max-width:480px){.character-grid.view-full{grid-template-columns:repeat(2,1fr);gap:1rem}}.filter-button[data-rarity=Unknown].active{background-color:var(--text-secondary);border-color:var(--text-secondary);color:var(--bg-primary)}.skeleton-controls{height:180px;border-radius:var(--border-radius);border:1px solid var(--border-color);opacity:.5}.skeleton-card,.skeleton-controls{background-color:var(--bg-secondary)}.skeleton-card{border:2px solid var(--border-color);border-radius:var(--border-radius-small);overflow:hidden;height:100%;min-height:260px}.skeleton-image{width:100%;padding-top:133.33%;background-color:var(--bg-tertiary);position:relative;overflow:hidden}.skeleton-image:before,.skeleton-text:before{content:"";position:absolute;inset:0;transform:translateX(-100%);background-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.08) 20%,hsla(0,0%,100%,.15) 60%,hsla(0,0%,100%,0));animation:shimmer 1.5s infinite}.skeleton-text-group{padding:1rem}.skeleton-text{height:1em;background-color:var(--bg-tertiary);border-radius:4px;position:relative;overflow:hidden}.skeleton-title{width:70%;height:1.2em;margin-bottom:.5rem}.skeleton-tag{width:40%}@keyframes shimmer{to{transform:translateX(100%)}}