.character-portrait{height:200px;object-fit:cover;object-position:center top;display:block;margin:-28px -28px 14px;width:calc(100% + 56px);opacity:.86;mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);cursor:zoom-in;transition:opacity .2s,filter .2s}.character-portrait:hover{opacity:1;filter:saturate(1.15)}

#image-viewer:not([open]){display:none}#image-viewer[open]{display:grid;place-items:center;position:fixed;inset:0;margin:auto;width:min(92vw,980px);height:min(92vh,900px);padding:24px;background:#090914f2;border:1px solid #54508e;box-shadow:0 24px 100px #000;overflow:hidden}#image-viewer::backdrop{background:#05050ddd;backdrop-filter:blur(8px)}#full-character-image{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border:1px solid var(--line)}.image-viewer-close{position:absolute;right:12px;top:10px;width:42px;height:42px;border:1px solid var(--line);border-radius:8px;background:#17152a;color:var(--ink);font:400 1.8rem/1 sans-serif;cursor:pointer;z-index:2}.image-viewer-close:hover{border-color:var(--cyan);color:var(--cyan)}.image-viewer-close:focus{outline:2px solid var(--cyan);outline-offset:2px}

@media (max-width:520px){.character-portrait{height:180px}}