/* Real player-facing detail page, uses the same frame/header/footer as Records and Settings. */
#relation-character-screen.tg-rel-detail-modern{
 --tg-rel-heading-size:clamp(28px,6.9vw,34px);--bg:#171615;--surface:#171615;
 --head:'Monomakh Unicode',serif;--body:'Old Standard TT',Georgia,serif;
 --ink:#d6c39a;--gold:#d2b983;--muted:#9e8d6c;--gold-weak:#aa956f;
 position:relative!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
 width:min(100%,480px)!important;max-width:480px!important;min-width:0!important;
 min-height:100dvh!important;height:auto!important;aspect-ratio:auto!important;
 margin:0 auto!important;padding:0 17px 20px!important;overflow:visible!important;
 background:#171615!important;color:#d6c39a!important;font-family:var(--body)!important;
 isolation:isolate!important;
}
#relation-character-screen.tg-rel-detail-modern *,#relation-character-screen.tg-rel-detail-modern *::before,#relation-character-screen.tg-rel-detail-modern *::after{box-sizing:border-box}
#relation-character-screen.tg-rel-detail-modern .tg-r-main{position:relative!important;z-index:3!important;flex:1 0 auto!important;width:100%!important;max-width:690px!important;min-width:0!important;margin:0 auto!important;padding:12px 7px 0!important;overflow:visible!important}
#relation-character-screen.tg-rel-detail-modern .tg-r-head{flex:0 0 auto!important;position:relative!important;z-index:3!important;padding-top:60px!important;text-align:center!important}
#relation-character-screen.tg-rel-detail-modern .tg-r-head h1{margin:0!important;color:#d2b983!important;font:400 clamp(32px,8.3vw,37px)/1.1 'Monomakh Unicode',serif!important;letter-spacing:0!important;text-transform:uppercase!important}
#relation-character-screen.tg-rel-detail-modern .tg-r-sub{display:none!important}
#relation-character-screen.tg-rel-detail-modern .tg-r-head .tg-r-rule{height:1px;margin:7px auto 0;width:78%;max-width:400px;background:linear-gradient(90deg,transparent,#806b48 24%,#b49b64 50%,#806b48 76%,transparent);position:relative;opacity:.72}
#relation-character-screen.tg-rel-detail-modern .tg-r-head .tg-r-rule::after{content:'';position:absolute;left:50%;top:-3px;width:6px;height:6px;background:#171615;border:1px solid #a28b65;transform:translateX(-50%) rotate(45deg)}
#relation-character-screen.tg-rel-detail-modern .tg-r-top-ornament{position:absolute!important;z-index:3!important;top:0!important;left:50%!important;width:67.2px!important;height:auto!important;transform:translateX(-50%)!important;opacity:.93!important;pointer-events:none!important}
#relation-character-screen.tg-rel-detail-modern .tg-r-footer{position:relative!important;z-index:3!important;flex:0 0 70px!important;height:70px!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;margin-top:4px!important;padding:0 0 13px!important;pointer-events:none!important}
#relation-character-screen.tg-rel-detail-modern .tg-r-footer img{width:67.2px;height:auto;transform:rotate(180deg);opacity:.9}
#relation-character-screen.tg-rel-detail-modern .tg-r-footer::before,#relation-character-screen.tg-rel-detail-modern .tg-r-footer::after{content:'';position:absolute;bottom:30px;height:1px;width:min(24%,110px);background:linear-gradient(90deg,transparent,rgba(173,139,87,.65))}
#relation-character-screen.tg-rel-detail-modern .tg-r-footer::before{left:14%}
#relation-character-screen.tg-rel-detail-modern .tg-r-footer::after{right:14%;transform:rotate(180deg)}
#relation-character-screen.tg-rel-detail-modern .tg-r-frame{position:absolute!important;inset:0!important;pointer-events:none!important;z-index:2!important}
#relation-character-screen.tg-rel-detail-modern .tg-r-frame::before{content:'';position:absolute;inset:9px;border:1px solid rgba(185,153,95,.48);border-radius:5px}
#relation-character-screen.tg-rel-detail-modern .tg-r-frame::after{content:'';position:absolute;inset:12px;border:1px solid rgba(173,140,82,.19);border-radius:3px}
#relation-character-screen.tg-rel-detail-modern .tg-r-frame-corner{color:#a38a60;position:absolute;width:37px;height:37px;opacity:.9}
#relation-character-screen.tg-rel-detail-modern .tg-r-frame-corner svg{display:block;width:100%;height:100%}
#relation-character-screen.tg-rel-detail-modern .tg-r-frame-corner.tl{left:8px;top:8px}
#relation-character-screen.tg-rel-detail-modern .tg-r-frame-corner.tr{right:8px;top:8px;transform:scaleX(-1)}
#relation-character-screen.tg-rel-detail-modern .tg-r-frame-corner.bl{left:8px;bottom:8px;transform:scaleY(-1)}
#relation-character-screen.tg-rel-detail-modern .tg-r-frame-corner.br{right:8px;bottom:8px;transform:scale(-1,-1)}
#relation-character-screen.tg-rel-detail-modern .tg-r-close{position:absolute!important;z-index:15!important;right:17px!important;top:15px!important;width:36px!important;height:36px!important;background:transparent!important;border:0!important;cursor:pointer!important}
#relation-character-screen.tg-rel-detail-modern .tg-r-close::before,#relation-character-screen.tg-rel-detail-modern .tg-r-close::after{content:'';position:absolute;top:17px;left:7px;width:22px;height:1.3px;background:linear-gradient(90deg,#8c7959,#e0c897,#8c7959);transform-origin:center}
#relation-character-screen.tg-rel-detail-modern .tg-r-close::before{transform:rotate(45deg)}
#relation-character-screen.tg-rel-detail-modern .tg-r-close::after{transform:rotate(-45deg)}
#relation-character-screen.tg-rel-detail-modern .tg-r-main .graph-surface{background:transparent!important}
#relation-character-screen.tg-rel-detail-modern .tg-r-main .event .year{background:transparent!important;box-shadow:none!important}
#relation-character-screen.tg-rel-detail-modern .tg-r-main .event .event-picture{background:#171615!important}
#relation-character-screen.tg-rel-detail-modern .tg-r-main .r-art{background:#171615!important}
#relation-character-screen.tg-rel-detail-modern .tg-r-main .biggest{background:transparent!important}
#relation-character-screen.tg-rel-detail-modern .scales-board-custom svg{background:transparent!important}
#relation-character-screen.tg-rel-detail-modern .tg-r-main .portrait{width:100%;margin:0 auto 4px}
/* Expanded graph is a normal page, NEVER a fixed overlay or nested viewport. */
#relation-character-screen.tg-rel-detail-modern .tg-r-main .modal{position:relative!important;inset:auto!important;z-index:auto!important;max-width:100%!important;width:100%!important;margin:0!important;border:0!important;min-height:0!important;box-shadow:none!important;overflow:visible!important}
#relation-character-screen.tg-rel-detail-modern .tg-r-main .graph-scroll{scrollbar-color:#b79762 #171615}
@media(max-width:360px){#relation-character-screen.tg-rel-detail-modern{padding-inline:13px!important}#relation-character-screen.tg-rel-detail-modern .tg-r-main{padding-inline:5px!important}}

#relation-character-screen.tg-rel-detail-modern .scorebar{--score-pos:13;position:relative;margin:5px 7px 7px;padding:0 0 1px}
#relation-character-screen.tg-rel-detail-modern .scoretop{position:relative;height:23px;margin:0 0 -1px}
#relation-character-screen.tg-rel-detail-modern .scoretop .stage-word{display:none}
#relation-character-screen.tg-rel-detail-modern .scoretop .n{position:absolute;left:var(--score-pos);top:2px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:1px;white-space:nowrap;font:16.5px/1 var(--head);font-variant-numeric:lining-nums tabular-nums;border-bottom:1px solid #d8b77f;padding-bottom:2px}
#relation-character-screen.tg-rel-detail-modern .scoretop .n::after{content:none}
#relation-character-screen.tg-rel-detail-modern .scoretop .n .current-score{font-size:1em;font-weight:400;background:linear-gradient(90deg,var(--score-color-start),var(--score-color-end));-webkit-background-clip:text;background-clip:text;color:transparent}
#relation-character-screen.tg-rel-detail-modern .scoretop .n .slash{font-size:1em;color:#d8bf8d}
#relation-character-screen.tg-rel-detail-modern .scoretop .n .max-score{font-size:1em;font-weight:400;color:#4f8737}
#relation-character-screen.tg-rel-detail-modern #relationScale{margin-top:1px}
#relation-character-screen.tg-rel-detail-modern .gauge-art{display:block;width:100%;height:auto;overflow:visible}
#relation-character-screen.tg-rel-detail-modern .scale-legend{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:center;gap:0;margin:2px 6px 0}
#relation-character-screen.tg-rel-detail-modern .scale-legend span{font-family:"Monomakh Unicode",serif;font-size:clamp(14px,4.6vw,24px);line-height:1.12;font-weight:400;text-transform:uppercase;letter-spacing:0;white-space:nowrap;background-clip:text;-webkit-background-clip:text;color:transparent}
#relation-character-screen.tg-rel-detail-modern .scale-legend .left{text-align:left;background-image:linear-gradient(90deg,#8d4b39,#8d4b39)}
#relation-character-screen.tg-rel-detail-modern .scale-legend .center{text-align:center;background-image:linear-gradient(90deg,#8a6943,#748046)}
#relation-character-screen.tg-rel-detail-modern .scale-legend .right{text-align:right;background-image:linear-gradient(90deg,#4f8737,#4f8737)}
#relation-character-screen.tg-rel-detail-modern .section{position:relative;padding:6px 9px 9px;margin:8px 0 0}
#relation-character-screen.tg-rel-detail-modern .section:before{content:"";position:absolute;inset:0;border-top:1px solid #94764980;pointer-events:none}
/* All three section titles share one typographic and ornament system. */
#relation-character-screen.tg-rel-detail-modern .section h2,#relation-character-screen.tg-rel-detail-modern .accordion h2{margin:0;font:400 var(--tg-rel-heading-size)/1.16 var(--head);color:#d6b983;text-align:center;letter-spacing:.01em;text-transform:none}
#relation-character-screen.tg-rel-detail-modern .section-subhead{position:relative;text-align:center;margin:0 auto 3px;padding:0}
#relation-character-screen.tg-rel-detail-modern .section-subhead .tg-r-rule,#relation-character-screen.tg-rel-detail-modern .accordion>.tg-r-rule{height:1px;margin:1px auto 3px;width:78%;max-width:400px;background:linear-gradient(90deg,transparent,#a18a61 20%,#d0af72 50%,#a18a61 80%,transparent);position:relative;opacity:.72}
#relation-character-screen.tg-rel-detail-modern .section-subhead .tg-r-rule::after,#relation-character-screen.tg-rel-detail-modern .accordion>.tg-r-rule::after{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;background:#1b1917;border:1px solid #c5a678;transform:translateX(-50%) rotate(45deg)}
#relation-character-screen.tg-rel-detail-modern .graph-surface{position:relative;padding:2px 4px 4px;background:transparent;border-top:0;border-bottom:1px solid #80663f77}
#relation-character-screen.tg-rel-detail-modern .graph-scroll[role=button]{cursor:zoom-in}
#relation-character-screen.tg-rel-detail-modern .graph-scroll{overflow-x:auto;overflow-y:hidden;max-width:100%;touch-action:pan-x;scrollbar-width:thin;scrollbar-color:#b79762 #201b16}
#relation-character-screen.tg-rel-detail-modern .graph-scroll::-webkit-scrollbar{height:5px}
#relation-character-screen.tg-rel-detail-modern .graph-scroll::-webkit-scrollbar-thumb{background:#b79762}
#relation-character-screen.tg-rel-detail-modern .graph-scroll svg{display:block;width:820px;max-width:none;height:290px}
#relation-character-screen.tg-rel-detail-modern .plot-pick{cursor:pointer;outline:none}
#relation-character-screen.tg-rel-detail-modern .plot-pick .hit{fill:transparent}
#relation-character-screen.tg-rel-detail-modern .plot-pick .rhomb{fill:#151411;stroke:#d7b77c;stroke-width:1.7}
#relation-character-screen.tg-rel-detail-modern .plot-pick[aria-pressed=true] .rhomb{fill:#ebd49d;stroke:#f1dfb4;stroke-width:2}
#relation-character-screen.tg-rel-detail-modern .plot-pick.locked .rhomb{fill:#545049;stroke:#8a8174}
#relation-character-screen.tg-rel-detail-modern .plot-pick:focus .rhomb{stroke:white;stroke-width:3}
#relation-character-screen.tg-rel-detail-modern .plot-pick:focus{outline:none}
#relation-character-screen.tg-rel-detail-modern .graph-reading{min-height:0;margin:5px 7px 3px;padding:6px 6px 6px 9px;border-left:2px solid #af8753;display:grid;grid-template-columns:60px minmax(0,1fr);gap:9px;align-items:start}
#relation-character-screen.tg-rel-detail-modern .graph-reading .r-art{width:60px;aspect-ratio:1/1;border:1px solid rgba(198,162,103,.74);box-shadow:inset 0 0 0 3px #15120f;overflow:hidden;background:#201c17}
#relation-character-screen.tg-rel-detail-modern .graph-reading .r-copy{min-width:0}
#relation-character-screen.tg-rel-detail-modern .graph-reading .r-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font:13px var(--body);color:#a99472}
#relation-character-screen.tg-rel-detail-modern .graph-reading .r-top strong{font:20px var(--head);font-weight:400;color:#d8b87f}
#relation-character-screen.tg-rel-detail-modern .graph-reading h3{font:19px/1.2 var(--head);color:#d9bd88}
#relation-character-screen.tg-rel-detail-modern .graph-reading p{font:13px/1.34 var(--body);color:#b9a686}
#relation-character-screen.tg-rel-detail-modern .stats{margin:18px 0 0;border-top:1px solid #90744b55;border-bottom:1px solid #90744b55;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
#relation-character-screen.tg-rel-detail-modern .stat{text-align:center;padding:11px 2px 9px;border-right:1px solid #77613e6b;min-width:0}
#relation-character-screen.tg-rel-detail-modern .stat:last-child{border:0}
#relation-character-screen.tg-rel-detail-modern .stat strong{display:block;color:#dabb82;font:29px var(--head);font-weight:400}
#relation-character-screen.tg-rel-detail-modern .stat span{font:11px/1.15 var(--body);color:#ad9878;display:block;max-width:72px;margin:4px auto}
#relation-character-screen.tg-rel-detail-modern .biggest{font:clamp(21px,5.5vw,25px)/1.2 var(--head);display:flex;justify-content:space-between;flex-wrap:nowrap;white-space:nowrap;gap:8px;padding:9px 1px 9px;color:#d0b27e;border-bottom:1px solid #6d573b5c;align-items:baseline}
#relation-character-screen.tg-rel-detail-modern .biggest b{font:clamp(21px,5.5vw,25px)/1.1 var(--head);color:#d7b77e;font-weight:400}
#relation-character-screen.tg-rel-detail-modern .jump-numbers{display:inline-flex;align-items:baseline;gap:9px;white-space:nowrap;font-variant-numeric:lining-nums}
#relation-character-screen.tg-rel-detail-modern .jump-arrow{font:23px/1 var(--head)}
#relation-character-screen.tg-rel-detail-modern .section-scales .biggest{margin-top:6px;border-top:1px solid #7a644259;padding-inline:12px}
#relation-character-screen.tg-rel-detail-modern .section-scales .biggest b{max-width:none;text-align:right}
#relation-character-screen.tg-rel-detail-modern .biggest .delta-up{color:#c4d892}
#relation-character-screen.tg-rel-detail-modern .biggest .delta-down{color:#d59d8f}
#relation-character-screen.tg-rel-detail-modern .accordion{margin:28px 0 10px;border-top:1px solid #94764980;border-bottom:1px solid #94764980;padding:5px 0 4px}
#relation-character-screen.tg-rel-detail-modern .accordion-toggle{position:relative;width:100%;border:0;background:transparent;padding:10px 8px 0;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;color:#d3b47a}
#relation-character-screen.tg-rel-detail-modern .accordion-toggle h2{flex:1;padding-left:29px}
#relation-character-screen.tg-rel-detail-modern .accordion-toggle .chev{font:27px var(--body);line-height:1;color:#d8b87e;transform:rotate(90deg);display:inline-block;transition:transform .17s}
#relation-character-screen.tg-rel-detail-modern .accordion-toggle[aria-expanded=true] .chev{transform:rotate(-90deg)}
#relation-character-screen.tg-rel-detail-modern .history{position:relative;margin:6px 5px 10px;padding:1px 1px 4px}
#relation-character-screen.tg-rel-detail-modern .history[hidden]{display:none}
#relation-character-screen.tg-rel-detail-modern .history:before{content:"";position:absolute;left:calc(var(--event-visual-width) / 2 + 3px);top:24px;bottom:16px;width:1px;background:linear-gradient(180deg,transparent,#9c7c4d 6%,#765b36 95%,transparent);pointer-events:none}
#relation-character-screen.tg-rel-detail-modern .history{--event-visual-width:clamp(76px,22vw,104px)}
#relation-character-screen.tg-rel-detail-modern .event{display:grid;grid-template-columns:var(--event-visual-width) minmax(0,1fr);align-items:start;gap:clamp(12px,3.8vw,21px);padding:17px 4px 20px;text-align:left;background:transparent;color:inherit;border:0;border-bottom:1px solid #816c494f;width:100%;position:relative;min-width:0}
#relation-character-screen.tg-rel-detail-modern .event:last-child{border-bottom:0}
#relation-character-screen.tg-rel-detail-modern .event .event-visual{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1}
#relation-character-screen.tg-rel-detail-modern .event .year{display:block;width:100%;text-align:center;font:22px/1.08 var(--head);color:#d0b27e;padding:0 0 4px;background:transparent;text-shadow:0 1px 8px #0009}
#relation-character-screen.tg-rel-detail-modern .event .event-picture{display:block;position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#171615;border:1px solid rgba(193,159,100,.74);box-shadow:inset 0 0 0 3px #17130f,0 3px 9px #0008;isolation:isolate}
#relation-character-screen.tg-rel-detail-modern .event .event-picture::after{content:"";position:absolute;inset:4px;border:1px solid rgba(223,186,119,.35);pointer-events:none}
#relation-character-screen.tg-rel-detail-modern .event-illustration{display:block;width:100%;height:100%}
#relation-character-screen.tg-rel-detail-modern .event .event-copy{min-width:0;padding-top:4px}
#relation-character-screen.tg-rel-detail-modern .event .event-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;min-width:0}
#relation-character-screen.tg-rel-detail-modern .event-title{font:clamp(18px,4.5vw,22px)/1.18 var(--head);color:#dec18b;display:block}
#relation-character-screen.tg-rel-detail-modern .event-val{font:19px var(--head);color:#c88170;flex:none}
#relation-character-screen.tg-rel-detail-modern .event-val.positive{color:#95b27b}
#relation-character-screen.tg-rel-detail-modern .event-description{font:clamp(14px,3.5vw,17px)/1.34 var(--body);color:#b5a080;margin-top:9px;display:block}
#relation-character-screen.tg-rel-detail-modern .event:hover .event-title,#relation-character-screen.tg-rel-detail-modern .event:focus-visible .event-title{color:#f0d4a0}
#relation-character-screen.tg-rel-detail-modern .event:focus-visible{outline-offset:-3px}
#relation-character-screen.tg-rel-detail-modern .event.is-locked .event-title,#relation-character-screen.tg-rel-detail-modern .event.is-locked .event-description{filter:blur(7.2px);opacity:.62;user-select:none}
#relation-character-screen.tg-rel-detail-modern .event.is-locked .event-picture .event-illustration{filter:blur(8.4px) grayscale(.7);opacity:.65}
#relation-character-screen.tg-rel-detail-modern .event.is-locked .event-picture::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(135deg,#0a090773,transparent 45%,#0909079e)}
#relation-character-screen.tg-rel-detail-modern .event.is-locked .event-val{font-size:17px;color:#927e5e}
#relation-character-screen.tg-rel-detail-modern .modal[hidden]{display:none}
#relation-character-screen.tg-rel-detail-modern .modal{position:relative;inset:auto;z-index:auto;background:transparent;display:flex;flex-direction:column;padding:0 7px 20px;overflow:visible}
#relation-character-screen.tg-rel-detail-modern .modal-header{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid #897148;padding-bottom:12px;margin-bottom:12px}
#relation-character-screen.tg-rel-detail-modern .modal-header strong{font:25px var(--head);color:#d7b982;font-weight:400}
#relation-character-screen.tg-rel-detail-modern .modal-header button{flex:none;border:1px solid #a28751;background:#251d15;color:#ddc291;min-height:34px;width:auto;padding:5px 12px;font:16px/1.2 var(--body);cursor:pointer}
#relation-character-screen.tg-rel-detail-modern .modal .graph-scroll svg{width:max(820px,100%);height:auto}
#relation-character-screen.tg-rel-detail-modern .modal .graph-reading{margin-top:12px}
#relation-character-screen.tg-rel-detail-modern .hero{margin:0 0 4px;text-align:center}
#relation-character-screen.tg-rel-detail-modern .portrait{position:relative;width:calc(100% - 8px);aspect-ratio:1000/640;margin:0 auto 4px;isolation:isolate}
#relation-character-screen.tg-rel-detail-modern .portrait .portrait-crop{position:absolute;inset:0;overflow:hidden;clip-path:url(#heroCut);background:#494747}
#relation-character-screen.tg-rel-detail-modern .portrait .portrait-crop img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:50% 12%;transform:none;display:block}
#relation-character-screen.tg-rel-detail-modern .portrait svg.portrait-stroke{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#relation-character-screen.tg-rel-detail-modern .portrait .outer-aura{stroke:#eac083;stroke-width:6;fill:none;opacity:.72;filter:url(#portraitAuraBlur);mask:url(#portraitOutsideMask)}
#relation-character-screen.tg-rel-detail-modern .portrait .outer{stroke:#d4b479;stroke-width:4;fill:none;filter:none}
#relation-character-screen.tg-rel-detail-modern .portrait .inner{stroke:#efd8a1;stroke-width:1.5;opacity:.86;fill:none;filter:none}
#relation-character-screen.tg-rel-detail-modern .section-scales{padding:6px 0 0;margin:10px 0 0;background:transparent}
#relation-character-screen.tg-rel-detail-modern .section-scales:before{display:none}
#relation-character-screen.tg-rel-detail-modern .section-scales .scales-board-custom{background:transparent;overflow:visible;padding:0;border:0;isolation:auto}
/* Scales use the shared .section-subhead typography and rule above. */
#relation-character-screen.tg-rel-detail-modern .section-scales .scales-board-custom svg{display:block;width:104%;margin-left:-2%;height:auto;aspect-ratio:1080/1110;overflow:visible;background:transparent}
@media (max-width:600px){#relation-character-screen.tg-rel-detail-modern .portrait{width:100%}}
#relation-character-screen.tg-rel-detail-modern #relationPlaque{margin:7px 0 17px;padding:0 3px;overflow:visible;}
#relation-character-screen.tg-rel-detail-modern .relation-plaque{
 --panel-rgb:127,59,52;
 position:relative;isolation:isolate;display:block;
 box-sizing:border-box;width:100%;aspect-ratio:1352 / 497;
 min-height:0;height:auto; margin:0;padding:0;
 container-type:inline-size;
 border:0;border-radius:0;
 background:none;box-shadow:none;outline:0;
 color:#d0b686;text-shadow:none;
 overflow:visible;
}
#relation-character-screen.tg-rel-detail-modern .relation-plaque--enemy{--panel-rgb:127,59,52}
#relation-character-screen.tg-rel-detail-modern .relation-plaque--hostile{--panel-rgb:141,83,55}
#relation-character-screen.tg-rel-detail-modern .relation-plaque--stranger{--panel-rgb:155,131,59}
#relation-character-screen.tg-rel-detail-modern .relation-plaque--friend{--panel-rgb:93,190,66}
#relation-character-screen.tg-rel-detail-modern .relation-plaque[data-stage]{background:none}
#relation-character-screen.tg-rel-detail-modern .relation-plaque:before,#relation-character-screen.tg-rel-detail-modern .relation-plaque:after{content:none;display:none}
#relation-character-screen.tg-rel-detail-modern .plaque-frame{position:absolute;inset:3.82% 1.47%;z-index:0;pointer-events:none;
 border:0.44cqw solid rgba(200,170,123,.77);border-radius:0;
 background:
  radial-gradient(ellipse 55% 44% at 49% 10%,rgba(210,171,121,.07),rgba(210,171,121,0) 85%),
  radial-gradient(ellipse 92% 84% at 49% 100%,rgba(0,0,0,.10),transparent 88%),
  linear-gradient(180deg,rgba(var(--panel-rgb),.19) 0%,rgba(var(--panel-rgb),.15) 26%,rgba(var(--panel-rgb),.115) 57%,rgba(var(--panel-rgb),.095) 100%);
 box-shadow:none;
}
#relation-character-screen.tg-rel-detail-modern .plaque-frame:before{content:"";position:absolute;inset:0;pointer-events:none;
 border:0.09cqw solid rgba(200,170,123,.14);
}
#relation-character-screen.tg-rel-detail-modern .plaque-filagree{position:absolute;z-index:4;pointer-events:none;
 width:6.66%;height:auto;aspect-ratio:1;
 color:#c8aa7b;opacity:1;filter:none;
}
#relation-character-screen.tg-rel-detail-modern .plaque-filagree svg{display:block;width:100%;height:100%;filter:none;overflow:visible;}
#relation-character-screen.tg-rel-detail-modern .plaque-filagree--tl{left:0;top:0;transform:none}
#relation-character-screen.tg-rel-detail-modern .plaque-filagree--tr{right:0;top:0;transform:scaleX(-1)}
#relation-character-screen.tg-rel-detail-modern .plaque-filagree--bl{left:0;bottom:0;transform:scaleY(-1)}
#relation-character-screen.tg-rel-detail-modern .plaque-filagree--br{right:0;bottom:0;transform:scale(-1)}
#relation-character-screen.tg-rel-detail-modern .relation-plaque h3{position:absolute;z-index:2;top:10.1%;left:0;right:0;
 padding:0;margin:0;border:0;
 font:400 5.48cqw/.98 "Old Standard TT",Georgia,serif;
 color:#d0b686;text-align:center;text-transform:uppercase;
 letter-spacing:0;text-shadow:none;
}
#relation-character-screen.tg-rel-detail-modern .plaque-gold-underline{position:absolute;left:33%;right:33%;top:25.5%;
 width:auto;max-width:none;height:1.8cqw;margin:0;filter:none;
 background:linear-gradient(90deg,transparent,rgba(208,182,134,.36) 16%,rgba(208,182,134,.5) 50%,rgba(208,182,134,.36) 84%,transparent) center top/100% .09cqw no-repeat;
}
#relation-character-screen.tg-rel-detail-modern .plaque-gold-underline:after{content:"";position:absolute;inset:0;
 background:radial-gradient(ellipse 80% 45% at 50% 0%,rgba(208,182,134,.115),transparent 100%);filter:blur(.45cqw);
}
#relation-character-screen.tg-rel-detail-modern .relation-plaque .plaque-lead,#relation-character-screen.tg-rel-detail-modern .relation-plaque .plaque-footnote{
 position:absolute;z-index:2;left:3.42%;right:3.4%;
 width:auto;padding:0;margin:0;
 color:#d0b686;font:400 4.00cqw/1.065 "Old Standard TT",Georgia,serif;
 letter-spacing:0;text-shadow:none;text-align:left;
}
#relation-character-screen.tg-rel-detail-modern .relation-plaque .plaque-lead{top:32.5%;}
#relation-character-screen.tg-rel-detail-modern .relation-plaque .plaque-footnote{top:71.4%;}
@media  (max-width:600px){#relation-character-screen.tg-rel-detail-modern .relation-plaque{width:100%;min-height:0;}
#relation-character-screen.tg-rel-detail-modern .relation-plaque .plaque-lead,#relation-character-screen.tg-rel-detail-modern .relation-plaque .plaque-footnote{font-size:4.00cqw;}}
#relation-character-screen.tg-rel-detail-modern .event-noart{display:grid;place-items:center;width:100%;height:100%;color:#a48757;font:34px/1 "Monomakh Unicode",serif;opacity:.56}
#relation-character-screen.tg-rel-detail-modern .graph-reading .r-art .event-noart{height:100%;}
#relation-character-screen.tg-rel-detail-modern .graph-reading .r-art img,#relation-character-screen.tg-rel-detail-modern .event .event-picture img{width:100%;height:100%;object-fit:cover;display:block}
#relation-character-screen.tg-rel-detail-modern .graph-reading .r-art img{border:0}
#relation-character-screen.tg-rel-detail-modern .graph-reading .r-copy{background:transparent}
#relation-character-screen.tg-rel-detail-modern .graph-reading .r-top,#relation-character-screen.tg-rel-detail-modern .graph-reading h3,#relation-character-screen.tg-rel-detail-modern .graph-reading p{background:transparent}
#relation-character-screen.tg-rel-detail-modern #chartSvg svg,#relation-character-screen.tg-rel-detail-modern #modalChart svg{display:block;width:max(820px,100%);height:auto}
#relation-character-screen.tg-rel-detail-modern #historySection{margin-bottom:8px}

/* Graph has one heading ornament; previews remain hidden until selection. */
#relation-character-screen.tg-rel-detail-modern #graph-section:before{display:none}
#relation-character-screen.tg-rel-detail-modern .graph-reading[hidden],#relation-character-screen.tg-rel-detail-modern #modalReading[hidden]{display:none}
#relation-character-screen.tg-rel-detail-modern .graph-scroll[role=button]:focus-visible{outline:1px solid #d4b980;outline-offset:2px}
/* Conceal real titles, dates, descriptions, changes and illustrations as author requested. */
#relation-character-screen.tg-rel-detail-modern .event.is-locked .event-visual .year{filter:grayscale(1) blur(3.6px);color:#a39d95;opacity:.75;user-select:none}
#relation-character-screen.tg-rel-detail-modern .event.is-locked .event-val{filter:grayscale(1) blur(4.8px);color:#aaa49d!important;opacity:.67;user-select:none}
#relation-character-screen.tg-rel-detail-modern .event.is-locked .event-title,#relation-character-screen.tg-rel-detail-modern .event.is-locked .event-description{filter:grayscale(1) blur(6px);color:#aaa49d;opacity:.68}
#relation-character-screen.tg-rel-detail-modern .graph-reading .r-art.is-locked{filter:grayscale(1) blur(3.6px);opacity:.75}
#relation-character-screen.tg-rel-detail-modern .graph-reading .r-copy.is-locked{filter:grayscale(1) blur(4.8px);opacity:.65;user-select:none}
#relation-character-screen.tg-rel-detail-modern .event-art-wrap{position:relative;display:block;width:100%;height:100%;overflow:hidden}
#relation-character-screen.tg-rel-detail-modern .event-art-wrap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#relation-character-screen.tg-rel-detail-modern .event-noart{position:absolute;inset:0;display:block;width:100%;height:100%;background:radial-gradient(ellipse at 50% 38%,#756b5d55,#231f1a 72%);opacity:1;overflow:hidden}
#relation-character-screen.tg-rel-detail-modern .event-placeholder-art{position:absolute;inset:11% 13%;display:block;opacity:.7;background:linear-gradient(150deg,#76695880,#2b2825 74%);clip-path:polygon(45% 0,60% 4%,67% 24%,84% 40%,74% 66%,92% 100%,9% 100%,24% 65%,16% 42%,33% 23%)}
#relation-character-screen.tg-rel-detail-modern .event-noart--2 .event-placeholder-art{clip-path:polygon(16% 13%,44% 8%,52% 20%,82% 5%,72% 42%,91% 59%,64% 100%,28% 82%,9% 54%)}
#relation-character-screen.tg-rel-detail-modern .event-noart--3 .event-placeholder-art{clip-path:polygon(50% 4%,85% 32%,75% 65%,100% 88%,69% 100%,25% 89%,3% 57%,24% 21%)}
#relation-character-screen.tg-rel-detail-modern .event-noart--4 .event-placeholder-art{clip-path:polygon(3% 50%,44% 3%,60% 19%,73% 0,95% 45%,70% 74%,85% 100%,35% 95%)}
#relation-character-screen.tg-rel-detail-modern .event-noart--5 .event-placeholder-art{clip-path:polygon(8% 9%,55% 2%,82% 17%,93% 67%,64% 100%,29% 90%,6% 58%,34% 32%)}
#relation-character-screen.tg-rel-detail-modern .event.is-locked .event-picture{filter:grayscale(1);opacity:.76}

/* Hide only the normal detail sections when the graph is expanded in place. */
#relation-character-screen.tg-rel-detail-modern.is-graph-expanded .tg-r-close,
#relation-character-screen.tg-rel-detail-modern.is-graph-expanded .tg-r-head,
#relation-character-screen.tg-rel-detail-modern.is-graph-expanded .tg-r-top-ornament,
#relation-character-screen.tg-rel-detail-modern.is-graph-expanded .tg-r-main>.hero,
#relation-character-screen.tg-rel-detail-modern.is-graph-expanded .tg-r-main>.section,
#relation-character-screen.tg-rel-detail-modern.is-graph-expanded .tg-r-main>.accordion{display:none!important}
#relation-character-screen.tg-rel-detail-modern.is-graph-expanded .tg-r-main{padding-top:45px!important}
#relation-character-screen.tg-rel-detail-modern.is-graph-expanded .tg-r-main>.modal{display:flex!important}
#relation-character-screen.tg-rel-detail-modern .expanded-history{margin-top:15px;border-top:1px solid #94764980;padding:15px 3px 0}
#relation-character-screen.tg-rel-detail-modern .expanded-history h2{font:400 var(--tg-rel-heading-size)/1.16 var(--head);text-align:center;color:#d6b983;margin:0 0 5px}
#relation-character-screen.tg-rel-detail-modern .expanded-history .tg-r-rule{height:1px;width:78%;margin:2px auto 10px;max-width:400px;background:linear-gradient(90deg,transparent,#a18a61 20%,#d0af72 50%,#a18a61 80%,transparent)}
#relation-character-screen.tg-rel-detail-modern .expanded-history .history{margin-top:2px}
#relation-character-screen.tg-rel-detail-modern .modal-header strong{min-width:0}
@media(max-width:370px){
 #relation-character-screen.tg-rel-detail-modern .modal-header strong{font-size:21px}
 #relation-character-screen.tg-rel-detail-modern .modal-header button{padding-inline:8px;font-size:14px}
}
