/* HerdMentality · hidden GUN / MAGAZINE / LINKS easter egg
   Images: /images/links/{gun,magazine,bullet}.png (packaged at relative paths).
   Independent from the site's voicebank / character / terms styles. */
.friendlinks-zone{
  width:calc(100vw - 112px);max-width:none;
  position:relative;left:50%;transform:translateX(-50%);
  display:flex;justify-content:flex-end;
  padding:48px 0 10px;min-height:292px;
  overflow:visible;background:#fff;
}
.friendlinks-device{
  position:relative;flex:0 0 auto;width:279px;height:220px;
  isolation:isolate;background:transparent;
}
/* Scale the three original transparent PNGs as a single unit. */
.friendlinks-figure{
  position:absolute;top:0;right:0;width:348px;height:275px;
  transform:scale(.8);transform-origin:top right;
}
.friendlinks-trigger{
  position:absolute;z-index:3;top:0;left:12px;
  width:260px;height:165px;border:0;outline:0;background:transparent;
  cursor:pointer;padding:0;touch-action:manipulation;
}
.friendlinks-trigger img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.friendlinks-trigger:focus-visible{outline:1px solid #777;outline-offset:3px}
.friendlinks-magazine{
  position:absolute;z-index:2;left:146px;top:126px;
  width:171px;height:145px;
  transform:translate(-18px,-48px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform 310ms cubic-bezier(.21,.73,.29,1),opacity 120ms ease-out,visibility 0s linear 310ms;
}
.friendlinks-device.is-open .friendlinks-magazine{
  transform:translate(0,0);opacity:1;visibility:visible;pointer-events:auto;
  transition:transform 310ms cubic-bezier(.21,.73,.29,1),opacity 150ms ease-out,visibility 0s;
}
.friendlinks-magazine-image{
  display:block;position:absolute;left:0;top:0;
  width:70px;height:auto;object-fit:contain;pointer-events:none;user-select:none;
}
.friendlinks-rounds{
  position:absolute;left:72px;top:24px;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
}
.friendlinks-bullet{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-width:46px;width:46px;height:57px;padding:4px;
  border:0;background:transparent;cursor:pointer;
  color:#222;touch-action:manipulation;
}
.friendlinks-bullet img{height:44px;width:auto;max-width:100%;object-fit:contain;pointer-events:none;user-select:none}
.friendlinks-bullet:after{content:"";position:absolute;bottom:4px;left:12px;right:12px;height:1px;background:#555;opacity:0;transition:opacity 130ms ease}
.friendlinks-bullet.is-selected:after{opacity:1}
.friendlinks-bullet:focus-visible{outline:1px solid #777;outline-offset:2px}
.friendlinks-bullet-name{
  position:absolute;left:calc(100% + 5px);top:50%;transform:translateY(-50%);
  font:14px/1.35 "Helvetica Neue","Yu Gothic",Arial,sans-serif;
  letter-spacing:.01em;color:#222;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity 135ms ease;
}
.friendlinks-bullet:hover .friendlinks-bullet-name,
.friendlinks-bullet:focus-visible .friendlinks-bullet-name,
.friendlinks-bullet.is-selected .friendlinks-bullet-name{opacity:1}
@media(max-width:650px){
 .friendlinks-zone{width:calc(100vw - 44px);padding-top:34px;min-height:267px}
 .friendlinks-device{width:min(272px,100%);height:215px}
 .friendlinks-figure{transform:scale(.78)}
 .friendlinks-trigger{left:0}
 .friendlinks-magazine{left:132px}
 .friendlinks-rounds{left:72px}
 /* Keep the invisible touch target usable after the artwork is scaled down. */
 .friendlinks-bullet{min-width:60px;width:60px;height:62px}
 .friendlinks-bullet-name{left:50%;right:auto;top:calc(100% + 1px);transform:translateX(-50%);font-size:13px}
}
@media(max-width:360px){
 .friendlinks-zone{width:calc(100vw - 32px)}
 .friendlinks-device{width:min(261px,100%);height:207px}
 .friendlinks-figure{transform:scale(.75)}
}
@media(prefers-reduced-motion:reduce){
 .friendlinks-magazine,.friendlinks-device.is-open .friendlinks-magazine,
 .friendlinks-bullet-name,.friendlinks-bullet:after{transition:none!important}
}
