.characters-page{padding-bottom:4rem}.characters-page .page-title{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{flex-wrap:wrap;gap:1rem 1.5rem}.control-group,.controls-row{display:flex;align-items:center}.control-group{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}.controls-actions{margin-left:auto;display:flex;gap:1rem;align-items:center}.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}.character-grid{display:grid;padding-bottom:2rem;transition:grid-template-columns .4s ease}.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:2rem}.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:focus-visible{outline:2px solid var(--element-color);outline-offset:2px}.compact-character-card[data-element=Wind]{--element-color:var(--clr-wind)}.compact-character-card[data-element=Water]{--element-color:var(--clr-water)}.compact-character-card[data-element=Fire]{--element-color:var(--clr-fire)}.compact-character-card[data-element=Soul]{--element-color:var(--clr-soul)}.compact-character-card[data-element=Light]{--element-color:var(--clr-light)}.compact-character-card[data-element=Curse]{--element-color:var(--clr-curse)}.compact-character-card[data-element=Anima]{--element-color:var(--clr-wind)}.compact-character-card[data-element=Incantation]{--element-color:var(--clr-soul)}.compact-character-card[data-element=Chaos]{--element-color:var(--clr-curse)}.compact-character-card[data-element=Psyche]{--element-color:var(--accent-primary)}.compact-character-card[data-element=Cosmos]{--element-color:var(--clr-light)}.compact-character-card[data-element=Lakshana]{--element-color:var(--accent-tertiary)}.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-tag{color:var(--star-color)}.original-style-card{--element-color:var(--clr-unknown);position:relative;display:block;outline:none}.original-style-card[data-element=Wind]{--element-color:var(--clr-wind)}.original-style-card[data-element=Water]{--element-color:var(--clr-water)}.original-style-card[data-element=Fire]{--element-color:var(--clr-fire)}.original-style-card[data-element=Soul]{--element-color:var(--clr-soul)}.original-style-card[data-element=Light]{--element-color:var(--clr-light)}.original-style-card[data-element=Curse]{--element-color:var(--clr-curse)}.original-style-card[data-element=Anima]{--element-color:var(--clr-wind)}.original-style-card[data-element=Incantation]{--element-color:var(--clr-soul)}.original-style-card[data-element=Chaos]{--element-color:var(--clr-curse)}.original-style-card[data-element=Psyche]{--element-color:var(--accent-primary)}.original-style-card[data-element=Cosmos]{--element-color:var(--clr-light)}.original-style-card[data-element=Lakshana]{--element-color:var(--accent-tertiary)}.original-style-card .card-link{text-decoration:none;color:inherit;display:block;height:100%}.original-style-card .card-link:focus-visible .card-inner{border-color:var(--element-color);box-shadow:0 6px 18px hsla(var(--shadow-color-hsl),.2),0 0 15px 2px color-mix(in srgb,var(--element-color) 50%,transparent);transform:translateY(-6px)}.original-style-card .card-inner{position:relative;display:flex;flex-direction:column;background-color:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--border-radius-small);box-shadow:0 3px 8px hsla(var(--shadow-color-hsl),.2);overflow:hidden;height:100%;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;transform:translateY(0)}.original-style-card:hover .card-inner{border-color:var(--element-color);box-shadow:0 6px 18px hsla(var(--shadow-color-hsl),.2),0 0 15px 2px color-mix(in srgb,var(--element-color) 50%,transparent);transform:translateY(-6px)}.original-style-card .image-area{position:relative;width:100%;padding-top:133.33%;overflow:hidden;background-color:var(--bg-tertiary);border-bottom:1px solid hsla(var(--border-color-hsl),.5)}.original-style-card .image-area img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .4s ease;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.original-style-card:hover .image-area img{transform:scale(1.1) translateZ(0)}.original-style-card .element-icon{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.7);border-radius:50%;border:2px solid hsla(var(--accent-secondary-hsl),.6);box-shadow:0 1px 4px rgba(0,0,0,.6);overflow:hidden;transition:transform .3s ease,border-color .3s ease}.original-style-card:hover .element-icon{transform:scale(1.1) rotate(10deg);border-color:var(--accent-secondary)}.original-style-card .element-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}.original-style-card .details-area{position:relative;z-index:2;background:var(--bg-secondary);padding:1rem;display:flex;flex-direction:column;text-align:left;flex-grow:1}.original-style-card .details-area h3{font-size:1.2rem;font-weight:700;color:var(--text-primary);margin:0 0 .4rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;transition:color .3s ease}.original-style-card:hover .details-area h3{color:var(--element-color)}.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}}