.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(160px,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}.banner-card{--element-theme:#94a3b8;width:100%;height:125px;color:var(--text-primary);background:linear-gradient(90deg,#0d0f12 0%,#13161c 50%,#13161c66 100%);border:1px solid #ffffff0a;border-radius:10px;text-decoration:none;transition:all .3s cubic-bezier(.25,.8,.25,1);display:block;position:relative;overflow:hidden;box-shadow:0 4px 20px #0000004d}.banner-card-inner{width:100%;height:100%;position:relative}.banner-card-bg-glow{background:radial-gradient(circle at 10% 50%, var(--element-theme) 0%, transparent 60%);opacity:.03;pointer-events:none;z-index:1;transition:opacity .3s;position:absolute;inset:0}.banner-card:hover{border-color:#ffffff1a;transform:translateY(-4px);box-shadow:0 10px 30px #00000080,inset 0 0 10px #ffffff05}.banner-card:hover .banner-card-bg-glow{opacity:.08}.banner-card-portrait-wrap{z-index:1;pointer-events:none;width:50%;position:absolute;top:0;bottom:0;right:0}.banner-card-portrait-img{object-fit:cover;object-position:center 15%;transition:transform .4s}.banner-card:hover .banner-card-portrait-img{transform:scale(1.06)}.banner-card-portrait-fade{background:linear-gradient(90deg,#0d0f12 0%,#13161c00 70%);position:absolute;inset:0}.banner-card-content{z-index:2;flex-direction:column;justify-content:center;width:55%;height:100%;padding:1.25rem 1.5rem;display:flex;position:relative}.banner-card-top{align-items:center;gap:.5rem;margin-bottom:.25rem;display:flex}.banner-card-rarity-tag{letter-spacing:1px;font-size:.65rem;font-weight:800}.rarity-s .banner-card-rarity-tag{color:var(--star-color)}.rarity-a .banner-card-rarity-tag{color:#c084fc}.rarity-unknown .banner-card-rarity-tag{color:#60a5fa}.banner-card-upcoming-tag{background:linear-gradient(135deg, var(--accent-primary), #ab1d46);color:#fff;letter-spacing:.5px;border-radius:3px;padding:1px 6px;font-size:.6rem;font-weight:800}.banner-card-name{font-family:var(--font-heading);color:#fff;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;margin:0 0 .4rem;font-size:1.5rem;font-weight:800;overflow:hidden}.banner-card-meta{color:var(--text-secondary);align-items:center;gap:.75rem;font-size:.75rem;display:flex}.banner-card-meta-item{align-items:center;gap:.35rem;display:inline-flex}.banner-card-meta-item img{filter:drop-shadow(0 1px 2px #00000080)}.banner-card-meta-item.role-item{color:var(--text-secondary)}.banner-card-meta-item.role-item svg{color:var(--accent-secondary);font-size:.8rem}.banner-card-accent-line{background-color:var(--element-theme);width:0%;height:2px;transition:width .3s cubic-bezier(.25,.8,.25,1);position:absolute;bottom:0;left:0}.banner-card:hover .banner-card-accent-line{width:100%}.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(140px,1fr));gap:1rem}.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}}.character-image-container{position:absolute;overflow:hidden;border-radius:6px 6px 0 0!important;width:95%!important;height:75.5%!important;top:2.5%!important;left:2.5%!important}.character-id-card.rarity-s .character-image-container{background:radial-gradient(circle at 50% 25%,#f59e0b2e 0%,#f59e0b0a 45%,#0f0c0af2 90%)!important}.character-id-card.rarity-a .character-image-container{background:radial-gradient(circle at 50% 25%,#a855f72e 0%,#a855f70a 45%,#0c0a0ff2 90%)!important}.character-id-card.is-unreleased .character-image-container,.character-id-card.rarity-unknown .character-image-container{background:radial-gradient(circle at 50% 25%,#3b82f62e 0%,#3b82f60a 45%,#0a0c12f2 90%)!important}.character-image-container .character-image{-webkit-mask-image:linear-gradient(#000 85%,#0000 98%)!important;mask-image:linear-gradient(#000 85%,#0000 98%)!important}