/* Character relationship atlas. All styling is scoped; no perpetual animation or backdrop filters. */
.characters-page #character-links {
    position:relative; scroll-margin-top:95px; border:1px solid #86684655;
    border-radius:24px; padding:32px !important; overflow:hidden;
    background:radial-gradient(ellipse at 0 0,#57212a40,transparent 43%),linear-gradient(130deg,#191317,#0e0d10 65%);
    box-shadow:inset 0 1px 0 #ffffff05,0 24px 70px #0005;
}
.characters-page #character-links::before {
    content:''; position:absolute; top:0; left:32px; right:32px; height:1px;
    background:linear-gradient(90deg,#a23348,#c2a16c80,transparent);
}
#character-links > .characters-section-index { vertical-align:middle; }
#character-links > .eyebrow { display:inline-block !important; color:#c9a06b !important; vertical-align:middle; }
.characters-page #character-links > h2 { margin:18px 0 12px; font:500 clamp(30px,3.4vw,48px)/1.13 Georgia,serif; letter-spacing:-.025em; color:#f3e7d6; }
#character-links .relations-intro { max-width:760px; margin:0 0 25px; color:#a99c93; font:13px/1.8 Arial,sans-serif; }
#character-links #relationsApp { color:#ebddcc; text-align:left; }
#relationsApp .relations-toolbar {
    display:flex; align-items:center; gap:22px; padding:16px 20px;
    border:1px solid #9d7b4938; border-radius:14px 14px 0 0;
    background:linear-gradient(110deg,#2b2024d9,#161216); box-shadow:inset 0 1px 0 #ffffff04;
}
#relationsApp .relations-identity { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
#relationsApp .relations-identity-image { flex:0 0 46px; height:50px; }
#relationsApp .relations-identity-image img { width:100%; height:100%; object-fit:cover; object-position:center 20%; border:1px solid #b8915666; border-radius:8px; }
#relationsApp .relations-toolbar label { display:grid; gap:5px; flex:1; min-width:0; color:#b59979; font:9px/1.5 Arial,sans-serif; text-transform:uppercase; letter-spacing:.13em; }
#relationsApp .relations-toolbar > label { flex:0 1 285px; padding-left:22px; border-left:1px solid #aa89512b; }
#character-links #relationsApp select {
    appearance:none; box-sizing:border-box; width:100%; min-width:0; min-height:32px;
    padding:5px 28px 5px 0; border:0 !important; border-radius:0 !important; outline-offset:3px;
    background:transparent !important; color:#ecdbc4; font:600 13px/1.5 Arial,sans-serif; text-transform:none; letter-spacing:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23c3a171' stroke-width='1.4'/%3E%3C/svg%3E") !important;
    background-position:right 4px center !important; background-repeat:no-repeat !important; cursor:pointer;
}
#relationsApp select option { background:#21191e; color:#efdfc8; }
#relationsApp .relations-total { display:flex; align-items:center; gap:9px; padding:0 22px; border-left:1px solid #aa89512b; border-right:1px solid #aa89512b; }
#relationsApp .relations-total b { color:#dcc197; font:400 33px/1 Georgia,serif; }
#relationsApp .relations-total span { color:#aa957a; font:8px/1.5 Arial,sans-serif; letter-spacing:.12em; }
#character-links #relationsApp button {
    min-height:42px; padding:10px 14px; border:1px solid #9b795449 !important; border-radius:9px !important;
    background:#21191e !important; color:#d9bc92 !important; box-shadow:none !important; transform:none !important;
    font:12px/1.5 Arial,sans-serif; letter-spacing:normal; text-transform:none; cursor:pointer;
    transition:border-color .18s,color .18s,background-color .18s;
}
#character-links #relationsApp button:hover:not(:disabled) { border-color:#d6b47e !important; background:#3a282e !important; box-shadow:none !important; }
#character-links #relationsApp button:disabled { opacity:.35 !important; cursor:not-allowed; }
#character-links #relationsApp .relations-back { min-height:36px; font-size:11px; white-space:nowrap; background:#100d1070 !important; }
#relationsApp :is(button,a,select):focus-visible { outline:2px solid #ecc68b !important; outline-offset:4px; }
#relationsApp .relations-notice { margin:0; padding:10px 17px; border:1px solid #9d7b4926; border-top:0; border-radius:0 0 12px 12px; color:#aa9c87; background:#100d1170; font:11px/1.6 Arial,sans-serif; }
#relationsApp .relations-notice::before { content:'◈'; padding-right:8px; color:#cba46d; }
#relationsApp .relations-notice.has-spoilers { color:#e19ba7; background:#6a192112; }
#relationsApp .relations-layout {
    display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:0; align-items:stretch;
    margin-top:20px; border:1px solid #96714455; border-radius:18px; overflow:hidden; background:#0b0b0e;
}
#relationsApp .relations-map-column {
    position:relative; min-width:0; display:flex; flex-direction:column; justify-content:center;
    overflow:hidden; background:radial-gradient(ellipse at 50% 50%,#922e3b19,transparent 62%),radial-gradient(#bb945919 .6px,transparent .6px) 0 0/20px 20px,#0b0b0e;
}
#relationsApp .relations-map-column::before,#relationsApp .relations-map-column::after {
    position:absolute; top:16px; z-index:1; pointer-events:none; color:#6c604e; font:8px/1.4 Arial,sans-serif; letter-spacing:.16em;
}
#relationsApp .relations-map-column::before { content:'АРХІВ ЗВ’ЯЗКІВ'; left:20px; }
#relationsApp .relations-map-column::after { content:'✦'; right:20px; font-size:14px; color:#af8953; }
#relationsApp .relations-graph { position:relative; height:clamp(500px,42vw,600px); width:100%; scroll-margin-top:90px; }
#relationsApp .relations-lines { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#relationsApp .relations-orbits circle { fill:none; stroke:#a47b4c13; stroke-width:.7; vector-effect:non-scaling-stroke; }
#relationsApp .relations-orbits circle:nth-child(2) { stroke-dasharray:2 9; stroke:#a47b4c2c; }
#relationsApp .relations-lines path { stroke:#b698663b; fill:none; stroke-width:.8; vector-effect:non-scaling-stroke; transition:stroke .18s; }
#relationsApp .relations-lines path.is-selected { stroke:#d9b578; stroke-width:1.4; }
#relationsApp .relations-center { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; width:24%; text-align:center; }
#relationsApp .relations-center-kicker { color:#bba17b; font:8px/1.5 Arial,sans-serif; letter-spacing:.14em; margin-bottom:20px; white-space:nowrap; }
#relationsApp .relations-center img {
    width:clamp(110px,10vw,142px); height:clamp(110px,10vw,142px); object-fit:cover; object-position:center 20%;
    border:2px solid #cba169; border-radius:50%; box-shadow:0 0 0 7px #0b0b0e,0 0 0 8px #a57d476b,0 0 0 15px #a57d470a,0 15px 30px #000b;
}
#character-links #relationsApp .relations-center h3 { margin:21px 0 7px; padding:0; color:#f3e5d1; font:500 clamp(24px,2.2vw,32px)/1.2 Georgia,serif; letter-spacing:0; }
#relationsApp .relations-center .relations-link { font-size:10px; color:#bfa077; }
#character-links #relationsApp button.relations-node {
    position:absolute; left:var(--node-x); top:var(--node-y); transform:translate(-50%,-50%) !important;
    display:flex; align-items:center; gap:11px; width:22%; max-width:226px; min-height:86px; padding:8px;
    text-align:left; border-color:#9e7b4e3d !important; border-radius:12px !important;
    background:linear-gradient(110deg,#241c21,#141216) !important;
}
#character-links #relationsApp button.relations-node:hover:not(:disabled) { border-color:#c8a16c !important; background:linear-gradient(110deg,#38252b,#21181e) !important; }
#character-links #relationsApp button.relations-node.is-selected { border-color:#c6a372 !important; background:linear-gradient(110deg,#543036,#281c23) !important; box-shadow:inset 0 1px 0 #d9b98516,0 0 26px #b2804910 !important; }
#relationsApp .relations-node img { width:52px; height:64px; flex:0 0 52px; object-fit:cover; object-position:center 20%; border:1px solid #b1936c4d; border-radius:7px; filter:saturate(.72); }
#relationsApp .relations-node.is-selected img { filter:saturate(1); border-color:#d1ad76; }
#relationsApp .relations-node-text { min-width:0; padding-right:2px; }
#relationsApp .relations-node-text b { display:block; color:#eadcc8; font:500 15px/1.2 Georgia,serif; overflow-wrap:anywhere; }
#relationsApp .relations-node-text small { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:7px; color:#a89275; font:10px/1.4 Arial,sans-serif; }
#relationsApp .relations-node-arrow { position:absolute; right:7px; top:4px; font:10px Arial,sans-serif; color:#bb976554; }
#relationsApp .relations-node.is-selected .relations-node-arrow { color:#dfbd85; }
#relationsApp .relations-paging { display:flex; align-items:center; justify-content:center; gap:15px; padding:10px; border-top:1px solid #a37a591f; }
#relationsApp .relations-paging[hidden] { display:none; }
#relationsApp .relations-paging span { color:#bda98d; font:11px/1.5 Arial,sans-serif; }
#relationsApp .relations-detail { position:relative; min-width:0; border-left:1px solid #96714455; overflow:hidden; background:linear-gradient(160deg,#302027,#171217); scroll-margin-top:90px; }
#relationsApp .relations-detail-portrait { position:relative; height:205px; overflow:hidden; }
#relationsApp .relations-detail-portrait::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#2a1c23,transparent 80%); pointer-events:none; }
#relationsApp .relations-detail-portrait img { width:100%; height:100%; object-fit:cover; object-position:center 20%; filter:saturate(.7); }
#relationsApp .relations-detail-overline { position:absolute; left:24px; bottom:10px; z-index:1; color:#d4b17b; font:8px/1.5 Arial,sans-serif; letter-spacing:.2em; }
#relationsApp .relations-detail-copy { padding:18px 24px 24px; }
#relationsApp .relations-detail-pair { color:#b49981; font:10px/1.5 Arial,sans-serif; }
#character-links #relationsApp .relations-detail h3 { margin:8px 0 14px; color:#f4e1c8; font:500 34px/1.1 Georgia,serif; letter-spacing:-.015em; }
#relationsApp .relations-chip { display:inline-block; max-width:100%; box-sizing:border-box; padding:6px 9px; border:1px solid #b18b544a; border-radius:6px; color:#e0bb84; background:#c8a2650a; font:10px/1.5 Arial,sans-serif; overflow-wrap:anywhere; }
#relationsApp .relations-detail-copy p { min-height:66px; margin:17px 0 22px; color:#c4b2a6; font:13px/1.8 Arial,sans-serif; }
#character-links #relationsApp .relations-explore {
    width:100%; min-height:46px; margin-bottom:14px; border-color:#b95e6d77 !important;
    background:linear-gradient(115deg,#793344,#4d202e) !important; color:#f5dec9 !important; font-weight:600;
    box-shadow:inset 0 1px 0 #ffffff09 !important;
}
#character-links #relationsApp .relations-explore:hover { background:linear-gradient(115deg,#974056,#66283b) !important; border-color:#dc8b9c !important; }
#relationsApp .relations-link { display:inline-block; color:#d5b181; font:11px/1.5 Arial,sans-serif; text-decoration:none; border-bottom:1px solid #bd8b4a44; }
#relationsApp .relations-link:hover { color:#ffe6b9; border-color:currentColor; }
#relationsApp .relations-dossier-warning { display:block; margin-top:15px; padding-top:13px; border-top:1px solid #b6936521; color:#99867b; font:10px/1.65 Arial,sans-serif; }
#relationsApp .relations-status { margin:13px 0 0; color:#9d8c76; font:10px/1.6 Arial,sans-serif; }
@media(max-width:1250px) {
    #relationsApp .relations-layout { grid-template-columns:minmax(0,1fr) 270px; }
    #relationsApp .relations-toolbar { gap:14px; }
    #relationsApp .relations-total { padding-inline:13px; }
    #relationsApp .relations-node img { width:43px; height:57px; flex-basis:43px; }
    #relationsApp .relations-node-text b { font-size:14px; }
    #character-links #relationsApp button.relations-node { min-height:78px; gap:8px; }
}
@media(max-width:1100px) {
    #relationsApp .relations-layout { grid-template-columns:minmax(0,1fr); }
    #relationsApp .relations-detail { display:grid; grid-template-columns:220px 1fr; border-left:0; border-top:1px solid #96714455; }
    #relationsApp .relations-detail-portrait { height:100%; min-height:280px; }
    #relationsApp .relations-detail-portrait::after { background:linear-gradient(90deg,transparent,#2a1c23); }
    #relationsApp .relations-detail-copy p { min-height:0; }
    #relationsApp .relations-graph { height:540px; }
    #relationsApp .relations-node img { width:55px; height:64px; flex-basis:55px; }
    #relationsApp .relations-toolbar > label { flex-basis:240px; padding-left:14px; }
    #relationsApp .relations-total { display:none; }
}
@media(max-width:700px) {
    .characters-page #character-links { padding:24px 14px !important; border-radius:18px; }
    #character-links .relations-intro { font-size:12px; margin-bottom:20px; }
    #relationsApp .relations-toolbar { flex-wrap:wrap; padding:15px; gap:14px; }
    #relationsApp .relations-identity { flex-basis:100%; }
    #relationsApp .relations-identity-image { flex-basis:42px; height:46px; }
    #relationsApp .relations-toolbar label { font-size:8px; }
    #relationsApp .relations-toolbar > label { flex:1; padding-left:0; border-left:0; }
    #character-links #relationsApp select { font-size:12px; }
    #character-links #relationsApp .relations-back { padding:8px 10px; font-size:10px; }
    #relationsApp .relations-notice { font-size:10px; padding:10px 12px; }
    #relationsApp .relations-layout { margin-top:14px; border-radius:13px; }
    #relationsApp .relations-map-column::before,#relationsApp .relations-map-column::after { top:12px; }
    #relationsApp .relations-map-column::before { left:14px; font-size:7px; }
    #relationsApp .relations-map-column::after { right:14px; }
    #relationsApp .relations-graph { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); height:auto; gap:10px; padding:32px 12px 18px; box-sizing:border-box; }
    #relationsApp .relations-lines { display:none; }
    #relationsApp .relations-center { position:static; grid-column:1/-1; width:auto; transform:none; margin:10px 0 18px; }
    #relationsApp .relations-center img { width:100px; height:100px; }
    #relationsApp .relations-center-kicker { font-size:8px; margin-bottom:19px; }
    #character-links #relationsApp .relations-center h3 { font-size:29px; }
    #character-links #relationsApp button.relations-node { position:static; flex-direction:column; width:100%; max-width:none; transform:none !important; gap:9px; min-height:150px; padding:13px 8px 12px; text-align:center; }
    #relationsApp .relations-node img { width:58px; height:65px; flex:0 0 65px; }
    #relationsApp .relations-node-text { padding:0; }
    #relationsApp .relations-node-text b { font-size:16px; }
    #relationsApp .relations-node-text small { margin-top:5px; font-size:10px; }
    #relationsApp .relations-detail { display:block; }
    #relationsApp .relations-detail-portrait { height:190px; min-height:0; }
    #relationsApp .relations-detail-portrait::after { background:linear-gradient(0deg,#2a1c23,transparent); }
    #relationsApp .relations-detail-copy { padding:17px 20px 22px; }
}
@media(max-width:380px) {
    #relationsApp .relations-toolbar > label { flex-basis:100%; }
    #character-links #relationsApp .relations-back { width:100%; }
    #character-links #relationsApp button.relations-node { min-height:145px; }
}
/* Custom pickers replace native OS menus. Popovers use the top layer; fixed fallback works without it. */
#relationsApp .relations-picker { position:relative; min-width:0; width:100%; }
#relationsApp .relations-picker select[hidden] { display:none !important; }
#character-links #relationsApp button.relations-picker-trigger {
    display:flex; align-items:center; justify-content:space-between; gap:12px; width:calc(100% + 10px); min-height:38px;
    padding:7px 10px; margin-left:-10px; box-sizing:border-box;
    border:1px solid transparent !important; border-radius:7px !important;
    background:transparent !important; color:#efdfc9 !important; text-align:left; font:600 13px/1.5 Arial,sans-serif;
}
#character-links #relationsApp button.relations-picker-trigger:hover,
#character-links #relationsApp button.relations-picker-trigger[aria-expanded="true"] {
    border-color:#a584514a !important; background:#c5a06a0a !important;
}
#relationsApp .relations-picker-value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#relationsApp .relations-picker-chevron { flex:0 0 14px; color:#d6b37b; font:20px/1 Arial,sans-serif; transition:transform .15s; }
#relationsApp [aria-expanded="true"] .relations-picker-chevron { transform:rotate(180deg); }
.relations-picker-menu {
    position:fixed; z-index:11000; inset:auto; margin:0; padding:7px; box-sizing:border-box;
    min-width:0; max-width:calc(100vw - 24px); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
    border:1px solid #a5825180; border-radius:13px;
    background:linear-gradient(140deg,#2a1e25,#161217 80%); color:#ecddc7;
    box-shadow:0 20px 55px #000c,inset 0 1px 0 #ead6b00c;
    scrollbar-width:thin; scrollbar-color:#9d7850 #1b141a;
    text-align:left; color-scheme:dark; font:13px/1.5 Arial,sans-serif;
}
.relations-picker-menu[hidden] { display:none !important; }
.relations-picker-menu::backdrop { background:transparent; pointer-events:none; }
.relations-picker-option {
    display:flex; align-items:center; gap:12px; position:relative; min-height:60px;
    box-sizing:border-box; padding:8px 11px; margin:3px 0; border:1px solid transparent; border-radius:8px;
    background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.relations-picker-option:hover,.relations-picker-option.is-active { background:#72513b26; border-color:#a57d4e44; }
.relations-picker-option[aria-selected="true"] { border-color:#c6a06a77; background:linear-gradient(110deg,#56333988,#68483120); }
.relations-picker-option img { display:block; flex:0 0 37px; width:37px; height:44px; object-fit:cover; object-position:center 20%; border:1px solid #bd96565c; border-radius:6px; }
.relations-picker-copy { display:block; flex:1; min-width:0; }
.relations-picker-copy b { display:block; color:#eddbc3; font:600 13px/1.4 Arial,sans-serif; overflow-wrap:anywhere; }
.relations-picker-copy small { display:block; margin-top:3px; color:#a9937b; font:10px/1.5 Arial,sans-serif; letter-spacing:0; }
.relations-picker-check { flex:0 0 17px; color:#e5c18a; font:15px/1 Arial,sans-serif; visibility:hidden; }
.relations-picker-option[aria-selected="true"] .relations-picker-check { visibility:visible; }
.relations-picker-seal { display:grid; place-items:center; flex:0 0 34px; height:36px; border:1px solid #b38a533d; border-radius:8px; color:#d3b07d; background:#ad895314; font-size:21px; }
.relations-picker-option[data-value="all"] .relations-picker-seal { color:#edb0ba; background:#91334720; border-color:#ba6b734d; }
.relations-picker-menu[data-kind="scope"] .relations-picker-option { min-height:70px; }
/* The comparison reuses the same pickers, including the Griffith version field. */
.characters-page #comparisonPanel { scroll-margin-top:100px; }
#comparisonPanel .relations-picker { position:relative; width:100%; min-width:0; }
#comparisonPanel .relations-picker select[hidden] { display:none !important; }
body #comparisonPanel button.relations-picker-trigger:is(#compareFirstPicker,#compareSecondPicker,#comparisonGriffithVersionPicker) {
    display:flex; align-items:center; gap:11px; width:100%; min-width:0; min-height:68px;
    box-sizing:border-box; padding:10px 13px; margin:0; border:1px solid #9d784d66 !important;
    border-radius:12px !important; background:linear-gradient(120deg,#2b1e25,#191419) !important;
    color:#efddc4 !important; text-align:left; text-transform:none; letter-spacing:0;
    font:600 14px/1.5 Arial,sans-serif; box-shadow:inset 0 1px 0 #ffffff06 !important;
    transform:none !important; cursor:pointer;
}
body #comparisonPanel button.relations-picker-trigger:is(#compareFirstPicker,#compareSecondPicker,#comparisonGriffithVersionPicker):hover:not(:disabled),
body #comparisonPanel button.relations-picker-trigger:is(#compareFirstPicker,#compareSecondPicker,#comparisonGriffithVersionPicker)[aria-expanded="true"] { border-color:#d6b176 !important; background:linear-gradient(120deg,#3c2830,#221920) !important; box-shadow:none !important; }
#comparisonPanel button.relations-picker-trigger:disabled { opacity:.4 !important; cursor:not-allowed; }
#comparisonPanel .relations-picker-value { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#comparisonPanel .relations-picker-portrait { flex:0 0 36px; height:44px; }
#comparisonPanel .relations-picker-portrait img { display:block; width:36px; height:44px; border:1px solid #b78c5666; border-radius:6px; object-fit:cover; object-position:center 20%; }
#comparisonPanel .relations-picker-chevron { flex:0 0 13px; color:#d3af79; font:20px/1 Arial,sans-serif; transition:transform .15s; }
#comparisonPanel [aria-expanded="true"] .relations-picker-chevron { transform:rotate(180deg); }
#comparisonPanel .comparison-context .relations-picker { margin-top:7px; }
body #comparisonPanel .comparison-context button#comparisonGriffithVersionPicker { min-height:44px; padding:10px 12px; font-size:11px; border-radius:9px !important; }
#comparisonPanel button.relations-picker-trigger:focus-visible { outline:2px solid #ebc68c !important; outline-offset:3px; }
/* Finite selection feedback only: no idle animation, particles or animation loop. */
#relationsApp .relations-lines path.relations-pulse {
    stroke:#ffe3a3; stroke-width:2.6; stroke-linecap:round; stroke-dasharray:.16 1;
    vector-effect:non-scaling-stroke; pointer-events:none; transition:none;
}
@media(max-width:700px) {
    #character-links #relationsApp button.relations-picker-trigger { font-size:12px; }
    .relations-picker-option { min-height:62px; }
}
@media(prefers-reduced-motion:reduce) { #character-links #relationsApp *,#comparisonPanel .relations-picker *,.relations-picker-menu * { transition:none !important; } }