.page-characters .chars{
    max-width: 1080px;
    margin: 12px auto 40px;
    padding: 0 12px;
}

.char-toolbar{
    display:flex; gap:10px; align-items:center; margin:8px 0 12px;
}
.char-search{
    flex:1; height:34px; padding:0 10px;
    border-radius:8px; border:none;
    background:var(--panel); color:var(--fg);
}
.tag-cloud{ display:flex; flex-wrap:wrap; gap:6px; margin-right: 12px; }
.tag-cloud button{
    font-family: dedicool;
    font-size: 14px;
    padding: 6px 10px 4px 10px;
    border-radius: 16px;
    border: none;
    background: var(--panel);
    color: var(--fg);
    cursor: pointer;
}
.tag-cloud button.active{
    background: var(--accent-2);
    color: var(--bg); }

.char-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
    gap:12px;
}
.char-card{
    display: grid; grid-template-rows: auto auto auto 1fr;
    gap:0; padding:10px;
    background:var(--panel); border:none; border-radius:8px;
    white-space: pre-line;
}
.char-card img{
    width:100%; height:200px; object-fit:cover; border-radius:4px; background:#00ff0000;
}
.char-name{ font-family: grapeSoda; font-size:32px; font-weight: 100; }
.char-role{ font-family: dedicool; font-size:13px; color:var(--muted); }
.char-bio{ font-size:14px; align-self: start; line-height:1.45; margin: 16px 0; }
.char-links{ display:flex; gap:8px; justify-content:space-between; }
.char-links a{ font-size:13px; align-self: end; }

.char-thumb{
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 4px;
	background: var(--bg);
	overflow: hidden;
}
.char-thumb img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.char-thumb img.broken{
	opacity: 0;
}