/* Relationships inherit the same width, padding, frame and passage scroll as every game section.
   Only the illustration, diagram zoom and relationship content are specific. */
#relations-screen.tg-rel-overview{
  font-size:16px!important;
  line-height:1.4!important;
  background:#171615!important;
}
#relations-screen.tg-rel-overview .tg-r-head{padding-top:48px}
#relations-screen.tg-rel-overview .tg-r-sub{display:none}
#relations-screen.tg-rel-overview .tg-r-rule{margin-top:12px}
#relations-screen.tg-rel-overview .tg-r-main{
  width:100%;
  max-width:none;
  padding:14px 0 0;
  min-width:0;
  box-sizing:border-box;
}
#relations-screen.tg-rel-overview .tg-rel-content{position:relative;min-width:0}
#relations-screen.tg-rel-overview .tg-rel-tabs{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:end;gap:2px;
  margin:5px 0 12px;padding:0;
}
#relations-screen.tg-rel-overview .tg-rel-tab{
  position:relative;isolation:isolate;display:grid;place-items:end center;
  box-sizing:border-box;min-width:0;min-height:33px;
  padding:9px 2px;text-align:center;border:0;background:transparent;
  color:#c1ae88;white-space:nowrap;
  font:400 13.8px/1.1 'Old Standard TT',Georgia,serif;
  cursor:pointer;
}
#relations-screen.tg-rel-overview .tg-rel-tab span{position:relative;z-index:2}
#relations-screen.tg-rel-overview .tg-rel-tab.active{color:#d6c39a}
#relations-screen.tg-rel-overview .tg-rel-tab.active::before{
  content:"";position:absolute;left:6%;right:6%;bottom:1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(220,190,127,.98) 50%,transparent);
  box-shadow:0 -1px 5px rgba(214,173,112,.28);
}
#relations-screen.tg-rel-overview .tg-rel-tab.active::after{
  content:"";position:absolute;left:2px;right:2px;bottom:0;height:88%;
  background:linear-gradient(0deg,rgba(214,173,112,.18),rgba(214,173,112,.10) 14%,rgba(214,173,112,.04) 32%,transparent 70%);
  pointer-events:none;
}
#relations-screen.tg-rel-overview .wheel-layout{
  position:relative;min-width:0;border:1px solid rgba(175,144,89,.33);
  background:radial-gradient(ellipse at 50% 48%,rgba(107,79,43,.09),transparent 60%);
  overflow:hidden;
}
#relations-screen.tg-rel-overview .wheel-layout::before{
  content:"";position:absolute;inset:5px;
  border:1px solid rgba(175,144,89,.12);pointer-events:none;
}
#relations-screen.tg-rel-overview .orbit{
  position:relative;isolation:isolate;overflow:hidden;
  height:var(--mobile-orbit-height,var(--orbit-height,520px));
  margin:0;
  /* Contain gestures to the diagram; JS forwards one-finger vertical scroll to passage. */
  touch-action:none;user-select:none;cursor:default;
}
#relations-screen.tg-rel-overview .orbit-world{
  position:absolute;left:0;top:0;
  /* JS positions/scales the world around the viewport or touch midpoint.
     Fixed top-edge centering would fight the two-axis pan transform. */
  transform-origin:0 0;
  overflow:visible;
}
#relations-screen.tg-rel-overview .orbit-world>svg{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;
}
#relations-screen.tg-rel-overview .relation-center-links .tg-rel-worn-stroke{
  fill:none;stroke-width:.58px;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
#relations-screen.tg-rel-overview .ring-braid .ring-base{
  fill:none;stroke-width:1px;opacity:.5;
}
#relations-screen.tg-rel-overview .ring-braid .ring-braid-strand{
  fill:none;stroke-width:1.45px;stroke-linecap:round;stroke-linejoin:round;
}
#relations-screen.tg-rel-overview .ring-braid .ring-braid-glow{
  fill:none;stroke-width:.55px;opacity:.55;
  stroke-linecap:round;stroke-linejoin:round;
}
#relations-screen.tg-rel-overview .orbit-world .person{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-32px);
  width:89px;height:96px;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
  background:transparent;border:0;color:#ebcf9e;z-index:4;
  cursor:pointer;text-align:center;touch-action:manipulation;
}
#relations-screen.tg-rel-overview .orbit-world .person .portrait-frame,
#relations-screen.tg-rel-overview .orbit-world .hero-center{
  position:relative;display:grid;place-items:center;
  flex:0 0 64px;width:64px;height:64px;box-sizing:border-box;
  padding:0;border-radius:50%;border:0;
  background:#191715;overflow:visible;box-shadow:none;
}
#relations-screen.tg-rel-overview .orbit-world .hero-center{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  pointer-events:none;z-index:3;
  color:#d2b983;
}
#relations-screen.tg-rel-overview .orbit-world .photo{
  position:relative;z-index:1;display:block;
  width:52px;height:52px;object-fit:contain;
  border-radius:50%;background:#191715;
  box-shadow:0 0 0 1px rgba(13,11,10,.85);
}
#relations-screen.tg-rel-overview .orbit-world .portrait-ornament{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  overflow:visible;pointer-events:none;
}
#relations-screen.tg-rel-overview .portrait-ornament-base{fill:none;stroke-width:.9;opacity:.65}
#relations-screen.tg-rel-overview .portrait-ornament-strand{fill:none;stroke-width:1.42;stroke-linecap:round;stroke-linejoin:round}
#relations-screen.tg-rel-overview .portrait-ornament-glow{fill:none;stroke-width:.55;opacity:.52;stroke-linecap:round;stroke-linejoin:round}
/* Same approved discovery pulse as Heroes: a duplicate of the exact vector
   portrait rim beneath the original SVG and PNG. All portraits share one key. */
#relations-screen.tg-rel-overview .orbit-world .person .tg-rel-portrait-light{
  display:none;
}
#relations-screen.tg-rel-overview .orbit-world .person.tg-ui-discovery-new .tg-rel-portrait-light{
  display:block;position:absolute;inset:0;z-index:0;
  width:100%;height:100%;pointer-events:none;
  filter:drop-shadow(0 0 1px rgba(247,244,236,.55))
         drop-shadow(0 0 16px rgba(255,255,255,.26))
         drop-shadow(0 0 28px rgba(255,244,221,.18));
  animation:tg-ui-approved-white-frame 2s ease-in-out infinite;
}
#relations-screen.tg-rel-overview .orbit-world .person.tg-ui-discovery-new .tg-rel-portrait-light :is(circle,path){
  stroke:rgba(247,244,236,.55)!important;
}
@media(prefers-reduced-motion:reduce){
  #relations-screen.tg-rel-overview .orbit-world .person.tg-ui-discovery-new .tg-rel-portrait-light{
    animation:none;opacity:.92;
  }
}
#relations-screen.tg-rel-overview .orbit-world .person:hover .portrait-frame,
#relations-screen.tg-rel-overview .orbit-world .person:focus-visible .portrait-frame{
  filter:drop-shadow(0 0 2px var(--stage-color));
}
#relations-screen.tg-rel-overview .orbit-world .person:focus-visible{outline:1px solid var(--stage-color);outline-offset:2px}
/* Filtered categories name every visible portrait; "All" has only
   Alyosha's central label. Reuse the approved center-label typography. */
#relations-screen.tg-rel-overview .orbit-world .hero-center .caption,
#relations-screen.tg-rel-overview .orbit-world .person .caption{
  display:block;font:400 12.5px/1.1 'Old Standard TT',Georgia,serif;
  color:#d2b983;letter-spacing:.025em;white-space:nowrap;
  text-shadow:0 1px 3px #000,0 0 5px #000;
}
#relations-screen.tg-rel-overview .orbit-world .person .caption{
  flex:0 0 auto;width:max-content;max-width:none;
  padding:0;margin:1px 0 0;text-align:center;pointer-events:none;
}
#relations-screen.tg-rel-overview .orbit-world .hero-center .caption{
  position:absolute;left:50%;top:calc(100% + 4px);
  transform:translateX(-50%);width:89px;text-align:center;
}
#relations-screen.tg-rel-overview .orbit-world .person.is-dead .photo{filter:grayscale(1) brightness(.8)}
#relations-screen.tg-rel-overview .tg-rel-summary{margin:14px 2px 0}
#relations-screen.tg-rel-overview .tg-rel-stats-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,104px);gap:8px;
}
#relations-screen.tg-rel-overview .tg-rel-stage-card{
  position:relative;box-sizing:border-box;min-width:0;height:104px;
  display:flex;flex-direction:column;justify-content:space-between;gap:6px;
  padding:11px 10px 9px;
  appearance:none;-webkit-appearance:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  border:1px solid rgba(175,144,89,.55);
  background:radial-gradient(ellipse at 12% 100%,rgba(158,114,59,.09),transparent 75%),linear-gradient(115deg,#231f1b,#191715 86%);
  box-shadow:inset 0 0 0 5px #1d1916,inset 0 0 0 6px rgba(191,153,96,.18);
}
#relations-screen.tg-rel-overview .tg-rel-stage-card:focus-visible{
  outline:2px solid #d2b983;outline-offset:2px;
}
#relations-screen.tg-rel-overview .tg-rel-stage-card:hover{
  border-color:rgba(210,185,131,.85);
}
#relations-screen.tg-rel-overview .tg-rel-stage-card::before,
#relations-screen.tg-rel-overview .tg-rel-stage-card::after{
  content:'✥';position:absolute;color:#b99760;
  font:14px/1 'Old Standard TT',Georgia,serif;pointer-events:none;
}
#relations-screen.tg-rel-overview .tg-rel-stage-card::before{left:-7px;top:-7px}
#relations-screen.tg-rel-overview .tg-rel-stage-card::after{right:-7px;bottom:-7px}
#relations-screen.tg-rel-overview .tg-rel-stage-name{
  flex:0 0 auto;min-height:17px;margin:0;
  color:#d9bc87;font:400 15px/18px 'Old Standard TT',Georgia,serif;white-space:nowrap;
}
#relations-screen.tg-rel-overview .tg-rel-stage-bottom{
  display:grid;grid-template-columns:52px 8px minmax(0,1fr);
  align-items:center;gap:5px;min-height:52px;margin-top:auto;
}
#relations-screen.tg-rel-overview .tg-rel-stage-icon{
  display:block;width:52px;height:52px;overflow:visible;
}
#relations-screen.tg-rel-overview .tg-rel-stage-icon svg{display:block;width:100%;height:100%;overflow:visible}
#relations-screen.tg-rel-overview .stage-friends .tg-rel-stage-icon svg{transform:scale(.88);transform-origin:center}
#relations-screen.tg-rel-overview .stage-strangers .tg-rel-stage-icon svg{transform:scale(.97);transform-origin:center}
#relations-screen.tg-rel-overview .stage-enemies .tg-rel-stage-icon svg{transform:scale(1.14);transform-origin:center}
#relations-screen.tg-rel-overview .tg-rel-stage-divider{
  position:relative;display:block;width:8px;height:39px;
}
#relations-screen.tg-rel-overview .tg-rel-stage-divider::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;
  width:1px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(210,185,131,.87) 18%,rgba(165,136,85,.76) 51%,rgba(210,185,131,.87) 82%,transparent);
}
#relations-screen.tg-rel-overview .tg-rel-stage-divider::after{
  content:'✦';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.72);
  color:#d2b983;font:10px/1 'Old Standard TT',Georgia,serif;
  background:rgba(18,16,14,.95);padding:1px 0;
}
#relations-screen.tg-rel-overview .tg-rel-stage-value{
  justify-self:center;min-width:0;
  color:#d2ad70;font:400 25px/1 'Old Standard TT',Georgia,serif;
  letter-spacing:-.035em;
}
@media(max-width:390px){
  #relations-screen.tg-rel-overview .tg-rel-tab{font-size:13.2px}
  #relations-screen.tg-rel-overview .tg-rel-stats-grid{grid-template-rows:repeat(2,102px);gap:7px}
  #relations-screen.tg-rel-overview .tg-rel-stage-card{height:102px;padding:10px 8px 8px}
  #relations-screen.tg-rel-overview .tg-rel-stage-name{font-size:14.5px}
  #relations-screen.tg-rel-overview .tg-rel-stage-bottom{grid-template-columns:48px 8px minmax(0,1fr);min-height:48px}
  #relations-screen.tg-rel-overview .tg-rel-stage-icon{width:48px;height:48px}
  #relations-screen.tg-rel-overview .tg-rel-stage-divider{height:37px}
  #relations-screen.tg-rel-overview .tg-rel-stage-value{font-size:24px}
}
@media(max-width:350px){
  #relations-screen.tg-rel-overview .tg-rel-tab{font-size:12.2px;padding-inline:0}
  #relations-screen.tg-rel-overview .tg-rel-stats-grid{grid-template-rows:repeat(2,98px);gap:6px}
  #relations-screen.tg-rel-overview .tg-rel-stage-card{height:98px;padding:9px 7px 7px}
  #relations-screen.tg-rel-overview .tg-rel-stage-name{font-size:14px}
  #relations-screen.tg-rel-overview .tg-rel-stage-bottom{grid-template-columns:43px 7px minmax(0,1fr);min-height:43px;gap:4px}
  #relations-screen.tg-rel-overview .tg-rel-stage-icon{width:43px;height:43px}
  #relations-screen.tg-rel-overview .tg-rel-stage-divider{height:34px}
  #relations-screen.tg-rel-overview .tg-rel-stage-value{font-size:22px}
}