/* Relationship chronicle — no impact on the play-stage viewport. */
.bond-page{padding-bottom:72px}
.bond-page .section-title{align-items:flex-start}
.bond-head-actions{margin-top:0}
.bond-discovery{display:flex;align-items:center;gap:9px 18px;flex-wrap:wrap;border-top:1px solid #6d5849;border-bottom:1px solid #6d5849;padding:14px 3px 16px;margin:16px 0 26px;color:#e5d6c5}
.bond-discovery strong{color:#f2d4a3;font-size:16px}
.bond-discovery span{color:#d4c7bb;font-size:14px}
.bond-discovery small{color:#aba197;flex-basis:100%;font-size:13px;line-height:1.6}
.bond-layout{display:grid;grid-template-columns:minmax(200px,235px) minmax(0,1fr);align-items:start;gap:24px}
.bond-sidebar{border:1px solid #685749;background:#242127;border-radius:10px;padding:15px}
.bond-sidebar h2{font:600 17px/1.5 var(--ui-font);color:#edcc9d;margin:0 0 12px}
.bond-roster{display:grid;gap:6px;max-height:calc(100dvh - 210px);overflow:auto;overscroll-behavior:contain}
.bond-person{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid transparent;border-radius:8px;background:transparent;color:#e8dbcc;padding:8px;font-size:15px;font-weight:600;min-height:62px}
.bond-person:hover,.bond-person.is-selected{background:#393039;border-color:#a68b69;color:#ffebcb}
.bond-person-label{min-width:0;white-space:normal}
.bond-avatar{display:block;position:relative;flex-shrink:0;width:54px;height:54px;overflow:hidden;border-radius:50%;border:1px solid #947555;background:radial-gradient(circle at 50% 32%,#8e6960,#29222b 82%)}
.bond-avatar img{height:100%;width:100%;object-fit:contain;object-position:bottom center}
.bond-main{min-width:0;display:grid;gap:24px}
.bond-focus{display:flex;align-items:center;gap:18px;padding:18px 20px;background:linear-gradient(130deg,#352e35,#252127);border:1px solid #856c53;border-radius:11px}
.bond-focus>.bond-avatar{width:88px;height:88px}
.bond-kicker{color:#c1a27b;font-size:12px;letter-spacing:.06em;line-height:1.7}
.bond-focus h2{color:#f5d9aa;font-size:26px;letter-spacing:.06em;margin:3px 0 5px}
.bond-focus p:last-child{color:#d2c4b5;font-size:14px}
.bond-map,.bond-detail,.bond-story{padding:22px 24px;background:#242127;border:1px solid #756353;border-radius:10px}
.bond-map h3,.bond-story h3,.bond-detail h3{font-size:22px;color:#efd2a1;line-height:1.5;margin:0 0 8px}
.bond-muted{font-size:14px;line-height:1.75;color:#c8beb3}
.bond-branches{margin-top:18px;margin-left:16px;padding-left:22px;border-left:1px solid #896f56;display:grid;gap:11px}
.bond-link{display:flex;align-items:center;text-align:left;gap:14px;position:relative;padding:11px 13px 11px 15px;min-width:0;width:100%;color:#f4e6d5;background:#302a32;border:1px solid #705f50;border-radius:10px;min-height:80px;transition:background .15s,border-color .15s}
.bond-link .bond-branch{position:absolute;left:-23px;top:50%;width:22px;height:1px;background:#896f56}
.bond-link .bond-branch:before{content:"";position:absolute;left:-4px;top:-3px;width:7px;height:7px;border-radius:50%;background:#bba07a}
.bond-link:hover,.bond-link.is-selected{background:#423541;border-color:#ddbc84}
.bond-link .bond-avatar{height:52px;width:52px}
.bond-link-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.bond-link-copy strong{font-size:17px;font-weight:650;letter-spacing:.04em}
.bond-link-copy small{font-size:13px;color:#d6cbbf;line-height:1.5;overflow-wrap:anywhere}
.bond-tone{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border:1px solid #806f5f;background:#3b3438;color:#e8d9c9;font-size:12px;font-weight:600;border-radius:99px;white-space:nowrap;flex-shrink:0}
.bond-tone-unknown{border-style:dashed;color:#c7c0bb;background:#332f34}
.bond-tone-close{border-color:#749889;color:#cfecdd;background:#264139}
.bond-tone-trust{border-color:#8195b3;color:#d9e3f7;background:#33394a}
.bond-tone-caution{border-color:#ae916d;color:#efddbc;background:#494033}
.bond-tone-distance{border-color:#93868d;color:#e2d7dc;background:#413941}
.bond-tone-tension{border-color:#bc807f;color:#f8ceca;background:#4d3236}
.bond-detail{scroll-margin-top:14px}
.bond-detail-actors{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.bond-detail-actors .bond-avatar{width:70px;height:70px}
.bond-link-mark{width:44px;height:1px;background:#c8a477;position:relative}
.bond-link-mark:before,.bond-link-mark:after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:#c8a477}
.bond-link-mark:before{left:0}.bond-link-mark:after{right:0}
.bond-detail h3{display:inline-block;margin:3px 12px 6px 0}
.bond-detail-summary{font-size:16px;line-height:1.9;color:#f0e4d6;margin:16px 0 24px}
.bond-detail h4{font-size:17px;color:#f0cfa0;margin-bottom:13px}
.bond-timeline,.bond-storyline{padding:0;margin:0;list-style:none;display:grid;gap:12px}
.bond-timeline li,.bond-storyline li{position:relative;padding:12px 15px 12px 19px;background:#302a32;border-left:2px solid #bda075;border-radius:0 7px 7px 0}
.bond-timeline strong,.bond-storyline strong{display:block;font-size:16px;color:#f7e5cb;margin:3px 0 5px}
.bond-chapter{display:block;font-size:12px;color:#ccb28b}
.bond-timeline p,.bond-storyline p{color:#d7ccc2;font-size:14px;line-height:1.85}
.bond-storyline small{display:block;color:#bca88f;font-size:13px;margin-bottom:6px}
.bond-story>.bond-muted{margin-bottom:15px}
.bond-empty{padding:32px 24px;background:#28232b;border:1px solid #8e7355;border-radius:10px;max-width:720px}
.bond-empty h2{font-size:23px;color:#eecb95}
.bond-empty p{margin:14px 0 22px;color:#e2d6c8;line-height:1.9}
.bond-page button:focus-visible{outline:3px solid #efd199;outline-offset:3px}
@media(max-width:800px){
 .bond-layout{grid-template-columns:minmax(0,1fr)}
 .bond-sidebar{padding:12px}
 .bond-roster{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;max-height:none;padding:0 2px 7px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
 .bond-person{display:flex;flex-direction:column;flex:0 0 84px;min-width:84px;min-height:105px;justify-content:center;padding:9px 6px;text-align:center;scroll-snap-align:start;gap:8px;font-size:12px}
 .bond-person .bond-avatar{height:56px;width:56px}
 .bond-person-label{line-height:1.4}
}
@media(max-width:650px){
 .bond-page{padding:27px 12px 55px}
 .bond-page .section-title{margin-bottom:20px;padding:0 5px}
 .bond-page .section-title .panel-subtitle{font-size:14px}
 .bond-head-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
 .bond-head-actions .btn{min-height:44px}
 .bond-discovery{padding:12px 7px;margin:11px 0 19px}
 .bond-main{gap:15px}
 .bond-focus{padding:13px;gap:13px}
 .bond-focus>.bond-avatar{height:72px;width:72px}
 .bond-focus h2{font-size:22px}
 .bond-map,.bond-detail,.bond-story{padding:17px 14px}
 .bond-map h3,.bond-story h3,.bond-detail h3{font-size:20px}
 .bond-branches{padding-left:15px;margin-left:8px;gap:9px}
 .bond-link{gap:9px;padding:9px;min-height:75px}
 .bond-link .bond-branch{left:-16px;width:15px}
 .bond-link .bond-avatar{width:46px;height:46px}
 .bond-link-copy strong{font-size:15px}
 .bond-link-copy small{font-size:12px}
 .bond-tone{font-size:11px;padding:5px 7px}
 .bond-detail-actors .bond-avatar{height:60px;width:60px}
 .bond-detail-summary{font-size:15px}
 .bond-timeline li,.bond-storyline li{padding:11px 12px 11px 14px}
}
@media(prefers-reduced-motion:reduce){.bond-link{transition:none}.bond-roster{scroll-behavior:auto}}