.characters-page{padding-bottom:4rem}.characters-page .page-title{text-align:center;margin-bottom:1rem}.page-intro{text-align:center;color:var(--text-secondary);max-width:650px;margin:0 auto 2.5rem;font-size:1.05rem;line-height:1.6}.character-list-controls{background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color);flex-direction:column;gap:1.5rem;margin-bottom:2.5rem;padding:1rem 1.5rem;display:flex}.controls-row.top-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;display:flex}.search-sort-group{flex-wrap:wrap;flex-grow:1;gap:1rem 1.5rem;display:flex}.controls-actions{flex-shrink:0;align-items:center;gap:1rem;display:flex}.controls-row.bottom-row{border-top:1px solid var(--border-color);flex-direction:column;align-items:flex-start;gap:1rem;padding-top:1rem;display:flex}.control-group{align-items:center;gap:.8rem;display:flex}.control-group .filter-label{color:var(--text-secondary);white-space:nowrap;font-size:.9rem;font-weight:600}.control-group .control-search-input{background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:20px;width:220px;padding:.5rem 1rem;transition:all .2s}.control-group .control-search-input:focus{border-color:var(--accent-secondary);width:260px;box-shadow:0 0 8px 0px color-mix(in srgb, var(--accent-secondary) 40%, transparent);outline:none}.filter-buttons-container{flex-wrap:wrap;gap:.5rem;display:flex}.view-toggle-group{background-color:var(--bg-primary);border-radius:var(--border-radius-small);border:1px solid var(--border-color);padding:2px;display:flex}.view-toggle-btn{color:var(--text-secondary);cursor:pointer;border-radius:var(--border-radius-small);background-color:#0000;border:none;align-items:center;gap:.4em;padding:.4rem .8rem;font-size:1rem;transition:background-color .2s,color .2s;display:flex}.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{align-items:center;display:flex;position:relative}.control-sort-select{appearance:none;background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;border-radius:20px;padding:.5rem 2.5rem .5rem 1rem;font-size:.9rem;font-weight:600;transition:all .2s}.control-sort-select:hover{border-color:var(--accent-secondary);color:var(--text-primary)}.sort-select-icon{pointer-events:none;color:var(--text-secondary);font-size:.8rem;position:absolute;right:1rem}@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 .sort-select-wrapper,.control-group .control-sort-select{width:100%}.controls-row.bottom-row{align-items:stretch}}.character-grid{padding-bottom:2rem;display:grid}.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));align-items:start;gap:1.5rem}.id-card-link-wrapper.disabled,.compact-character-card.disabled{cursor:default;pointer-events:none;opacity:.95;transform:none!important}.is-coming-soon{filter:grayscale(.2)contrast(.95)}.coming-soon-badge{background:linear-gradient(135deg, var(--accent-primary), #ab1d46);color:#fff;z-index:10;letter-spacing:.5px;border:1px solid #fff3;border-radius:4px;padding:2px 10px;font-size:.85rem;font-weight:800;position:absolute;top:9%;left:7.5%;transform:rotate(5deg);box-shadow:0 2px 5px #0000004d}.coming-soon-badge-compact{background:linear-gradient(135deg, var(--accent-primary), #ab1d46);color:#fff;z-index:10;border-radius:3px;padding:1px 6px;font-size:.7rem;font-weight:800;position:absolute;top:10px;right:10px;box-shadow:0 1px 3px #0003}.id-card-render-wrapper,.compact-card-inner{width:100%;height:100%;position:relative}.compact-character-card{--element-color:var(--clr-unknown);background-color:var(--bg-secondary);border-radius:var(--border-radius-small);border:1px solid var(--border-color);color:var(--text-primary);align-items:center;gap:1rem;padding:.75rem;text-decoration:none;transition:background-color .2s,border-color .2s,transform .2s;display:flex}.compact-character-card:hover,.compact-character-card:focus-within{background-color:var(--bg-tertiary);border-color:var(--element-color);outline:none;transform:translateY(-3px)}.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{border-radius:var(--border-radius-small);background-color:var(--bg-primary);border:1px solid var(--border-color);flex-shrink:0;width:64px;height:64px;position:relative;overflow:hidden}.compact-card-portrait img{object-fit:cover;object-position:center top;width:100%;height:100%}.compact-card-info{flex-grow:1;min-width:0}.compact-card-name{font-family:var(--font-heading);white-space:nowrap;text-overflow:ellipsis;margin:0 0 .4rem;font-size:1.1rem;font-weight:600;overflow:hidden}.compact-card-tags{flex-wrap:wrap;gap:.5rem;display:flex}.compact-card-tag{background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-secondary);text-transform:capitalize;border-radius:4px;align-items:center;gap:.4em;padding:.2rem .5rem;font-size:.7rem;font-weight:600;display:inline-flex}.compact-card-tag svg{font-size:.9em}.compact-card-tag.element-tag img{width:12px;height:12px}.compact-card-tag.rarity-s-rank,.compact-card-tag.rarity-a-rank{padding-left:1.8em;position:relative}.compact-card-tag.rarity-s-rank:before,.compact-card-tag.rarity-a-rank:before{content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;width:1.1em;height:1.1em;position:absolute;top:50%;left:.4em;transform:translateY(-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:#ffd9001a;border-color:#ffd9004d}.compact-card-tag.rarity-a-rank{color:var(--clr-soul);background-color:#8f5dc01a;border-color:#8f5dc04d}.compact-card-tag.role-tag{color:var(--text-secondary)}.id-card-link-wrapper{color:inherit;will-change:transform;outline:none;text-decoration:none;transition:transform .3s;display:block;position:relative}.id-card-link-wrapper:hover,.id-card-link-wrapper:focus-visible{transform:translateY(-6px)}.character-id-card{aspect-ratio:280/400;width:100%;position:relative;overflow:hidden}.character-id-card:after{content:"";pointer-events:none;z-index:5;opacity:0;border:2px solid #0000;border-radius:6px;width:99%;height:92%;transition:border-color .3s,box-shadow .3s,opacity .3s;position:absolute;top:4%;left:.91%;box-shadow:0 0 15px 3px #0000}.id-card-link-wrapper:hover .character-id-card:after,.id-card-link-wrapper:focus-visible .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{width:100%;height:100%;position:absolute;inset:0}.character-id-card-background{z-index:1}.character-id-card-content{z-index:2}.character-image-container{border-radius:2px;width:86%;height:62%;position:absolute;top:14.6%;left:7.5%;overflow:hidden}.character-image{object-fit:cover;object-position:center 10%;width:100%;height:100%}.character-name-container{justify-content:center;align-items:center;width:81%;height:10%;padding:0 .5rem;display:flex;position:absolute;bottom:10%;left:9.5%}.character-name{font-family:var(--font-heading);color:#fff;text-shadow:1px 1px 4px #000c;white-space:nowrap;text-overflow:ellipsis;padding:0 .2em;font-size:clamp(1rem,5vw,1.5rem);font-weight:700;overflow:hidden}.id-card-icons-container{z-index:4;-webkit-backdrop-filter:blur(6px);background-color:#0009;border:1px solid #ffffff26;border-radius:20px;align-items:center;gap:6px;padding:4px 8px;display:flex;position:absolute;top:8%;left:6%;box-shadow:0 4px 10px #0000004d}.character-rarity-icon,.character-element-icon,.character-arc-icon{flex-shrink:0;justify-content:center;align-items:center;display:flex}.character-rarity-icon img{filter:drop-shadow(0 2px 4px #00000080);width:32px;height:32px}.character-element-icon img{filter:drop-shadow(0 2px 4px #00000080);width:28px;height:28px}.character-arc-icon img{filter:drop-shadow(0 2px 4px #0006);width:26px;height:26px}@media (max-width:480px){.id-card-icons-container{gap:4px;padding:3px 6px;top:7%;left:5%}.character-rarity-icon img{width:26px;height:26px}.character-element-icon img{width:22px;height:22px}.character-arc-icon img{width:20px;height:20px}}.filter-button[data-rarity=S-Rank],.filter-button[data-rarity=A-Rank]{padding-left:2em;position:relative}.filter-button[data-rarity=S-Rank]:before,.filter-button[data-rarity=A-Rank]:before{content:"";background-position:50%;background-repeat:no-repeat;background-size:contain;width:2.2em;height:2.2em;position:absolute;top:50%;left:.5rem;transform:translateY(-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{text-align:center;background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px dashed var(--border-color);grid-column:1/-1;padding:3rem 1rem}.no-match-message-container .icon{color:var(--accent-secondary);margin-bottom:1rem;font-size:2.5rem}.no-match-message-container .title{color:var(--text-primary);margin:0 0 .5rem;font-size:1.2rem;font-weight:600}.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]{border:1px solid var(--border-color);color:var(--text-secondary);background:0 0;padding:.4em 1em;font-weight:700;transition:all .2s;position:relative;box-shadow:0 1px 3px #0000001a}.filter-button[data-rarity=Unknown]:hover{background-color:var(--bg-tertiary);border-color:var(--accent-secondary);color:var(--text-primary);transform:translateY(-2px);box-shadow:0 3px 6px #00000026}.filter-button[data-rarity=Unknown].active{background-color:var(--accent-primary);border-color:var(--accent-primary);color:#fff;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.skeleton-controls{background-color:var(--bg-secondary);border-radius:var(--border-radius);border:1px solid var(--border-color);opacity:.5;height:180px}.skeleton-card{background-color:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--border-radius-small);height:100%;min-height:260px;overflow:hidden}.skeleton-image{background-color:var(--bg-tertiary);width:100%;padding-top:133.33%;position:relative;overflow:hidden}.skeleton-image:before,.skeleton-text:before{content:"";background-image:linear-gradient(90deg,#fff0 0,#ffffff14 20%,#ffffff26 60%,#fff0);animation:1.5s infinite shimmer;position:absolute;inset:0;transform:translate(-100%)}.skeleton-text-group{padding:1rem}.skeleton-text{background-color:var(--bg-tertiary);border-radius:4px;height:1em;position:relative;overflow:hidden}.skeleton-title{width:70%;height:1.2em;margin-bottom:.5rem}.skeleton-tag{width:40%}@keyframes shimmer{to{transform:translate(100%)}}.filter-main-groups{flex-wrap:wrap;gap:2rem;margin-bottom:.75rem;display:flex}.tag-filter-group-compact{border-top:1px solid hsla(var(--border-color-hsl), .3);align-items:center;gap:1rem;width:100%;padding-top:.75rem;display:flex}.tag-buttons-flex{flex-wrap:wrap;flex:1;gap:.5rem;display:flex}.tag-btn-compact{background:hsla(var(--bg-primary-hsl), .4);border:1px solid hsla(var(--border-color-hsl), .3);color:var(--text-secondary);cursor:pointer;white-space:nowrap;border-radius:5px;align-items:center;gap:.4rem;padding:.35rem .65rem;font-size:.75rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.tag-btn-compact:hover{background:hsla(var(--bg-tertiary-hsl), .7);border-color:hsla(var(--accent-secondary-hsl), .4);color:var(--text-primary);transform:translateY(-1px)}.tag-btn-compact.active{background:hsla(var(--accent-secondary-hsl), .1);border-color:var(--accent-secondary);color:var(--accent-secondary);box-shadow:0 2px 8px hsla(var(--accent-secondary-hsl), .15)}.tag-icon-mini{flex-shrink:0;justify-content:center;align-items:center;width:16px;height:16px;display:flex}.tag-icon-mini img{object-fit:contain;width:14px;height:14px}.tag-text-mini{white-space:nowrap}.tag-dot-active{background:var(--accent-secondary);width:3px;height:3px;box-shadow:0 0 3px var(--accent-secondary);border-radius:50%;position:absolute;top:3px;right:3px}@media (max-width:900px){.tag-filter-group-compact{flex-direction:column;align-items:flex-start;gap:.75rem}.tag-buttons-flex{grid-template-columns:repeat(2,1fr);gap:.5rem;width:100%;display:grid}}@media (max-width:480px){.tag-buttons-flex{grid-template-columns:repeat(2,1fr)}.tag-btn-compact{justify-content:flex-start}}