/* Character portraits in the story: current perspective on the left, everyone else on the right. */
.er-story-line.has-avatar{display:grid;gap:11px;align-items:start;padding:7px 2px}
.er-story-line.has-avatar.is-self{grid-template-columns:42px minmax(0,1fr)}
.er-story-line.has-avatar.is-other{grid-template-columns:minmax(0,1fr) 42px}
.er-story-line.has-avatar.is-self>p{grid-column:2;grid-row:1}
.er-story-line.has-avatar.is-other>p{grid-column:1;grid-row:1}
.er-story-line.has-avatar.is-self>.er-story-avatar{grid-column:1;grid-row:1}
.er-story-line.has-avatar.is-other>.er-story-avatar{grid-column:2;grid-row:1}

/* Character map marker: portrait sits above an actual flag. Shared-cell characters are staggered by JS. */
.er-map-marker.er-map-character{
    width:44px;height:64px;border:0;border-radius:0;background:transparent;box-shadow:none;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
    transform:translate(calc(-50% + var(--er-map-character-offset,0px)),-76%);overflow:visible;z-index:8
}
.er-map-marker.er-map-character::before,.er-map-marker.er-map-character::after{display:none}
.er-map-marker.er-map-character:hover,.er-map-marker.er-map-character:focus-visible{background:transparent;box-shadow:none;outline:none}
.er-map-character__avatar{
    position:relative;display:grid;place-items:center;width:34px;height:34px;border:2px solid rgba(237,226,195,.94);
    border-radius:50%;overflow:hidden;background:#111923;color:#f6e7bd;font-size:.72rem;font-weight:900;
    box-shadow:0 5px 14px rgba(0,0,0,.58);z-index:2
}
.er-map-character__avatar>span{grid-area:1/1}
.er-map-character__avatar img{grid-area:1/1;width:100%;height:100%;object-fit:cover;background:#111923;z-index:1}
.er-map-character__flag{
    position:relative;display:grid;place-items:center;width:31px;height:20px;border:2px solid #e5d7aa;
    border-radius:3px 10px 10px 3px;color:#fff;font-size:.68rem;font-weight:950;line-height:1;
    box-shadow:0 5px 12px rgba(0,0,0,.52)
}
.er-map-marker--participant .er-map-character__flag{background:#795f2d}
.er-map-marker--ai .er-map-character__flag{background:#394c72}
.er-map-character__flag::after{content:"";position:absolute;left:-5px;top:-2px;width:2px;height:31px;background:#d7c99d;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.er-map-character.is-current .er-map-character__avatar{border-color:#fff2ad;box-shadow:0 0 0 3px rgba(255,224,91,.28),0 5px 16px rgba(0,0,0,.62)}
.er-map-character.is-current .er-map-character__flag{border-color:#fff3a7;box-shadow:0 0 13px rgba(255,225,92,.72)}
.er-map-character.is-narratively-inactive .er-map-character__avatar{border-style:dashed}
.er-map-character.is-narratively-inactive .er-map-character__flag{filter:saturate(.58);border-style:dashed}

/* Keep tooltips inside the clipped map viewport, including POIs on outer cells. */
.er-map-marker .er-map-tooltip{box-sizing:border-box;max-width:min(230px,calc(100vw - 48px));white-space:normal;overflow-wrap:anywhere}
.er-map-marker.is-tooltip-left .er-map-tooltip{left:-6px;right:auto;transform:translateX(0) translateY(4px)}
.er-map-marker.is-tooltip-right .er-map-tooltip{left:auto;right:-6px;transform:translateX(0) translateY(4px)}
.er-map-marker.is-tooltip-below .er-map-tooltip{top:calc(100% + 9px);bottom:auto}
.er-map-marker.is-tooltip-left:hover .er-map-tooltip,.er-map-marker.is-tooltip-left:focus-visible .er-map-tooltip,
.er-map-marker.is-tooltip-right:hover .er-map-tooltip,.er-map-marker.is-tooltip-right:focus-visible .er-map-tooltip{transform:translateX(0) translateY(0)}
.er-map-marker.is-tooltip-below:hover .er-map-tooltip,.er-map-marker.is-tooltip-below:focus-visible .er-map-tooltip{transform:translateX(-50%) translateY(0)}
.er-map-marker.is-tooltip-left.is-tooltip-below:hover .er-map-tooltip,.er-map-marker.is-tooltip-left.is-tooltip-below:focus-visible .er-map-tooltip,
.er-map-marker.is-tooltip-right.is-tooltip-below:hover .er-map-tooltip,.er-map-marker.is-tooltip-right.is-tooltip-below:focus-visible .er-map-tooltip{transform:translateX(0) translateY(0)}

@media(max-width:760px){
    .er-story-line.has-avatar{gap:8px}
    .er-story-line.has-avatar.is-self{grid-template-columns:36px minmax(0,1fr)}
    .er-story-line.has-avatar.is-other{grid-template-columns:minmax(0,1fr) 36px}
    .er-map-marker.er-map-character{width:38px;height:56px;gap:2px;transform:translate(calc(-50% + var(--er-map-character-offset,0px)),-72%)}
    .er-map-character__avatar{width:29px;height:29px}
    .er-map-character__flag{width:27px;height:18px;font-size:.61rem}
    .er-map-marker .er-map-tooltip{min-width:150px;max-width:min(210px,calc(100vw - 36px))}
}